/* Practice Simulation: the demo connector's page around the pretend computer. */
:root {
  --paper: #f5f4ee;
  --card: #fffdf7;
  --ink: #172c3a;
  --ink-soft: #3b4f5c;
  --green: #345e55;
  --green-dark: #264a42;
  --green-wash: #dfe9e3;
  --brass: #7a4f00;
  --brass-wash: #f3e3bd;
  --rule: #b9c3bb;
  --focus: #0b57d0;
  --ring: #0b57d0;
  --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --guide-width: 24rem;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.55;
  overflow: auto;
}
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.demo {
  display: grid; grid-template-rows: auto auto minmax(32rem, 1fr);
  min-width: 40rem; min-height: 100vh; min-height: 100dvh;
}
/* A practice page is made to fit a phone, so the pretend computer's minimum width does not apply. */
.demo[data-kind="page"] { min-width: 0; }
/* On a very short screen (a phone turned sideways, or the browser zoomed a long way) the wrapped top bar can fill the
   whole height, so it scrolls away with the page instead of covering it. */
@media (max-height: 30rem) {
  .demo[data-kind="page"] .demo-bar { position: static; }
}

/* ---------- Top bar: always visible ---------- */
.demo-bar {
  position: sticky; top: 0; z-index: 4;
  grid-row: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .5rem 1rem;
  background: var(--ink); color: #fff;
  border-bottom: 5px solid var(--brass-wash);
}
.demo-label {
  margin: 0; padding: .2rem .65rem;
  background: var(--brass-wash); color: var(--ink);
  border-radius: 6px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .9rem;
}
.demo-title {
  flex: 1 1 18rem; min-width: 0; margin: 0;
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; font-weight: 700;
}
.demo-bar-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.demo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: .35rem 1rem;
  border: 3px solid var(--green); border-radius: 10px;
  background: var(--card); color: var(--green-dark);
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.demo-btn:hover { background: var(--green-wash); color: var(--ink); }
.demo-btn-strong { background: var(--green); border-color: var(--green); color: #fff; }
.demo-btn-strong:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.demo-bar .demo-btn { border-color: #fff; }
.demo-bar .demo-btn:focus-visible { outline-color: #ffd54a; }

.demo-closed-bar {
  grid-row: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .4rem 1rem; background: var(--brass-wash); color: var(--ink); font-weight: 600;
}
.demo-closed-bar p { margin: 0; }

/* ---------- Body: pretend computer and the guide ---------- */
.demo-body {
  grid-row: 3; min-height: 32rem;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--guide-width);
}
.demo[data-guide="closed"] .demo-body { grid-template-columns: minmax(0, 1fr); }
.demo[data-guide="closed"] .demo-guide { display: none; }

.demo-stage { position: relative; min-width: 0; min-height: 26rem; overflow: hidden; background: #000; }
.demo-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }

.demo-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.demo[data-guide="closed"] .demo-overlay { display: none; }
.demo-ring {
  position: absolute; border-radius: 10px;
  border: 4px solid var(--ring);
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(11, 87, 208, .35);
  transition: left .12s, top .12s, width .12s, height .12s;
  animation: demo-pulse 1.6s ease-in-out infinite;
}
.demo-ring.is-flash { animation: demo-flash .5s ease-in-out 3; }
@keyframes demo-pulse { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 12px rgba(11, 87, 208, .18); } }
@keyframes demo-flash { 50% { border-color: #ffd54a; } }
.demo-tip {
  position: absolute; max-width: 18rem;
  padding: .5rem .8rem; border-radius: 10px;
  background: var(--ring); color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.3;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.demo-tip::before {
  content: ""; position: absolute; width: 14px; height: 14px; background: var(--ring);
  transform: rotate(45deg);
}
.demo-tip[data-side="below"]::before { top: -6px; left: var(--arrow, 50%); margin-left: -7px; }
.demo-tip[data-side="above"]::before { bottom: -6px; left: var(--arrow, 50%); margin-left: -7px; }
.demo-tip[data-side="right"]::before { left: -6px; top: var(--arrow, 50%); margin-top: -7px; }
.demo-tip[data-side="left"]::before { right: -6px; top: var(--arrow, 50%); margin-top: -7px; }
.demo-tip[data-side="inside"]::before { display: none; }

.demo-cover {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; padding: 1rem;
  overflow-y: auto;
  background: rgba(23, 44, 58, .92);
}
.demo-cover-card {
  flex: 0 0 auto; width: 100%; max-width: 36rem; margin-block: auto; padding: 1.5rem 1.75rem;
  background: var(--card); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 8px 8px 0 var(--green);
}
.demo-cover-card h2 { margin: 0 0 .6rem; font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; }
.demo-cover-card p { margin: 0 0 .9rem; }
.demo-cover-card .demo-btn { margin: .25rem .5rem 0 0; }
.demo-cover-status { font-weight: 700; margin: 0; }

/* ---------- Guide ---------- */
.demo-guide {
  min-height: 0; max-height: max(32rem, calc(100dvh - 6rem)); overflow-y: auto;
  padding: 1rem 1.1rem 1.5rem;
  background: var(--paper); border-left: 4px solid var(--green);
}
.demo-guide-heading { margin: 0; font-family: var(--serif); font-size: 1.4rem; }
.demo-progress { margin: .1rem 0 .75rem; color: var(--brass); font-weight: 800; }
.demo-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.demo-steps > li {
  position: relative; margin: 0 0 .6rem; padding: .55rem .7rem .55rem 2.8rem;
  border: 2px solid var(--rule); border-radius: 10px; background: var(--card);
  color: var(--ink-soft);
}
.demo-steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: .55rem; top: .5rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--rule); font-weight: 800; font-size: .95rem; color: var(--ink);
}
.demo-steps > li.is-current { border: 3px solid var(--green); color: var(--ink); box-shadow: 4px 4px 0 var(--green); }
.demo-steps > li.is-current::before { background: var(--green); border-color: var(--green); color: #fff; }
.demo-steps > li.is-done::before { content: "✓"; background: var(--green-wash); border-color: var(--green); color: var(--green-dark); }
.demo-steps > li.is-later { opacity: .8; }
.demo-steps p { margin: 0; }
.demo-steps strong { color: var(--ink); }

.demo-feedback { min-height: 1.5rem; margin: .75rem 0; font-weight: 700; }
.demo-feedback.is-done { padding: .5rem .75rem; background: var(--green-wash); border-left: 6px solid var(--green); }
.demo-feedback.is-nudge { padding: .5rem .75rem; background: var(--brass-wash); border-left: 6px solid var(--brass); }
.demo-guide-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.demo-finish { margin-top: 1rem; padding: 1rem; background: var(--card); border: 3px solid var(--green); border-radius: 12px; }
.demo-finish h2 { margin: 0 0 .5rem; font-family: var(--serif); font-size: 1.4rem; }
.demo-finish p { margin: 0 0 .75rem; }
.demo-finish-actions { display: flex; flex-direction: column; gap: .5rem; }

.demo-noscript { margin: 2rem; color: #fff; font-size: 1.25rem; }
.demo-print { display: none; }

/* Narrower screens: the guide sits under the pretend computer. */
@media (max-width: 68rem) {
  .demo-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(26rem, 1fr) minmax(16rem, auto); }
  .demo-guide { max-height: max(16rem, 34dvh); border-left: 0; border-top: 4px solid var(--green); }
  .demo[data-guide="closed"] .demo-body { grid-template-rows: minmax(26rem, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-ring, .demo-ring.is-flash { animation: none; transition: none; }
}

@media print {
  body { background: #fff; overflow: visible; font-size: 13pt; }
  .demo { display: none; }
  .demo-print { display: block; color: #000; }
  .demo-print h1 { font-family: var(--serif); }
}