/* YAT — the setup page.
   Everything here is a *drawing of the device*, never a live control: this page
   teaches you to read your own screen, and the real settings page is served by
   the device itself. So the panels below are built from the same parts the
   firmware draws (44px header + rule, body, 32px footer + rule, brand bottom
   right — engine/src/render.cpp's "standard" chrome), at whatever size the
   column happens to be. */

/* ---------- numbered instruction lists ---------- */

.setup-list { padding-left: 1.35rem; margin: 0; }
.setup-list li { margin-bottom: 0.85rem; }
.setup-list li:last-child { margin-bottom: 0; }
.setup-list li::marker { font-family: var(--mono); font-size: 0.82em; color: var(--seal); }
.setup-list .en { display: block; color: var(--ink-3); font-size: 0.86em; margin-top: 0.2rem; }

/* ---------- 01 · the gesture ---------- */

.gesture {
  display: grid; gap: 1.6rem clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: 12rem minmax(0, 1fr);
  align-items: start;
}

/* The device seen edge-on, with the one button that matters on it. */
.gesture-art {
  position: relative;
  border: 1px solid var(--ink); background: #fff;
  height: 9.5rem;
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
}
.gesture-key {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: #3f8f4f; border: 1px solid #2c6537;
  box-shadow: 0 0 0 0.55rem #fff, 0 0 0 calc(0.55rem + 1px) var(--rule);
}
.gesture-hold {
  font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.06em;
  color: var(--seal); font-variant-numeric: tabular-nums;
}
.gesture-hold::before {
  content: "▸"; margin-right: 0.3rem; color: var(--ink-3);
}
/* "5–10s ♪", not "5s": the hold is measured from after wake, so a real finger
   needs 7-8 s, and the sound is the actual release cue. A bare "5s" here
   would contradict the instruction beside it — and is the single most common
   way a person gives up one second before the beep. */

@media (max-width: 46rem) {
  .gesture { grid-template-columns: 1fr; }
  .gesture-art { height: 7rem; }
}

/* ---------- 02 · the two screens ---------- */

.screens { display: grid; gap: clamp(2rem, 5vw, 3rem); }
@media (min-width: 62rem) {
  .screens { grid-template-columns: 1fr 1fr; align-items: start; }
}

.screen-card { border-top: 2px solid var(--ink); padding-top: 1rem; }
.screen-tag { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.9rem; }
.screen-letter {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 1.9rem; height: 1.9rem; background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
}
.screen-tag .label { line-height: 1.35; }
.screen-body { margin-top: 1.2rem; }
.screen-body .col-head { border-top: 0; padding-top: 0; }

/* ---------- the drawn e-ink panel ---------- */

.escreen {
  margin: 0;
  border: 1px solid var(--ink); background: #fff;
  aspect-ratio: 800 / 480;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  font-size: clamp(0.5rem, 1.55vw, 0.72rem);
  line-height: 1.3;
  overflow: hidden;
}
@media (min-width: 62rem) {
  .escreen { font-size: clamp(0.5rem, 1.05vw, 0.7rem); }
}

.escreen-head {
  border-bottom: 1px solid var(--ink);
  padding: 0.5em 0.9em;
  font-family: var(--sans); font-weight: 600; font-size: 1.5em;
  display: flex; align-items: baseline; gap: 0.7em;
}
.escreen-head span { font-weight: 400; font-size: 0.7em; color: var(--ink-2); }

.escreen-body { padding: 0.9em; min-height: 0; }
.escreen-two {
  display: flex; align-items: center; justify-content: space-evenly; gap: 0.9em;
}
.escreen-portal {
  display: flex; align-items: center; justify-content: center; gap: 1.4em;
}

.escreen-qrwrap {
  display: flex; flex-direction: column; align-items: center; gap: 0.45em;
  min-width: 0;
}
.escreen-side {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em;
  min-width: 0;
}
/* The literal IP, drawn the size and colour the firmware draws it: 32px bold
   blue against a 24px bold anchor line. It is the one string on the panel a
   desktop user has to copy by hand, so it wins the visual fight. */
.escreen-addr {
  font-family: var(--mono); font-size: 1.6em; font-weight: 700; color: #2f5aa8;
  word-break: break-all; line-height: 1.15;
}
.escreen-strong { font-weight: 700; font-size: 1.2em; color: var(--ink); }
.escreen-small-row {
  display: flex; align-items: flex-start; gap: 0.5em; margin-top: 0.35em;
}
.escreen-cap {
  text-align: center; color: var(--ink); font-size: 1em;
}
.escreen-cap span { display: block; color: var(--ink-2); font-size: 0.9em; }
.escreen-cap-left { text-align: left; }
.escreen-cap-sm { font-size: 0.85em; }

/* The advisory lines above the footer rule. The firmware draws its "wait" and
   "2.4 GHz" hints in Ink::Blue and the literal network name in black, so the
   drawing does the same. */
.escreen-note {
  padding: 0 0.9em 0.55em;
  text-align: center; color: #2f5aa8; font-size: 0.95em;
}
.escreen-note span { display: block; }
.escreen-note .ink { color: var(--ink); }

.escreen-foot {
  border-top: 1px solid var(--ink);
  padding: 0.4em 0.9em;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.9em; color: var(--ink-2);
}

/* A QR-shaped block: decorative only, and deliberately not scannable — the
   real codes are on the device. Checkerboard body + three finder squares. */
.qr {
  position: relative; flex: none;
  background-color: #fff;
  background-image: repeating-conic-gradient(var(--ink) 0% 25%, #fff 0% 50%);
  background-size: 14.28% 14.28%;
  outline: 1px solid var(--rule);
}
.qr::before, .qr::after, .qr > i {
  content: ""; position: absolute; width: 30%; height: 30%;
  background: #fff;
  box-shadow:
    inset 0 0 0 2px var(--ink),
    inset 0 0 0 4px #fff,
    inset 0 0 0 7px var(--ink);
}
.qr::before { top: 5%; left: 5%; }
.qr::after { top: 5%; right: 5%; }
.qr > i { bottom: 5%; left: 5%; }

.qr-lg { width: 8.5em; height: 8.5em; }
.qr-xl { width: 10em; height: 10em; }
.qr-sm { width: 4.2em; height: 4.2em; flex: none; }

/* ---------- desktop address hand-off ---------- */

.addr-open {
  border: 1px solid var(--rule); background: #fff;
  padding: 1rem 1.15rem; margin-top: 1.4rem;
}
.addr-open .field { margin-bottom: 0; }
/* label.field > span sets display:block for field captions and out-specifies
   .ssid-row on its own, which would stack the button under the input. */
.addr-open label.field > span.ssid-row { display: flex; }
.addr-open .improv-status { margin-top: 0.6rem; min-height: 0; }
.addr-open .improv-status:empty { display: none; }

@media (max-width: 30rem) {
  .ssid-row { flex-wrap: wrap; }
  .addr-open .ssid-row .btn { width: 100%; justify-content: center; }
}

/* The screen illustrations' fallback block — mirrors the firmware's blue side
   rule marking the text-only last resort (the single-QR rule made the second
   QR into this). */
.escreen-fallback { border-left: 4px solid #2b5fa3; padding-left: .55rem; margin-top: .55rem; display: block; }
.escreen-fallback b { color: #2b5fa3; }