/* ============================================================================
   css/entry.css — the entry views: pair, signin, start, policy, body.
   Owner unit: P10 (prp/2026-09-26-pocket-web-v2/units/P10.md) — "Entry views restyled".

   These views are built from the shared `P.moment` (voice + one block + at most two actions), whose
   `pk-*` classes css/kit.css already styles. THIS file carries only what is the entry views' own: the
   classes their blocks put inside the moment's block. Everything is drawn from the tokens
   (`tokens.css`) — no colour literal, no inline style (CSP, design §11) — in the v14 look: a single
   quiet column, serif voice, the loudest thing on a screen being the one the person has to READ or
   TYPE (the connect code, the one-time-code field).

   The classes are the v1 vocabulary on purpose (design §2: "kept and restyled"): behaviour, the
   data-role hooks the suites and the integration scan read, and the class names stay; only the
   look changes.
   ============================================================================ */

/* ---- the block every entry moment draws into --------------------------------------------------- */
.p-block { display: flex; flex-direction: column; gap: 10px; }
.p-block > * { margin: 0; }

/* the supporting sentence under the voice, and the two quiet notes */
.hint, .p-note, .p-item-text {
  font-size: 14.5px; line-height: 1.5; color: var(--ink2); max-width: 52ch;
}
.p-note { color: var(--ink3); font-size: 13.5px; }
.p-empty { font-size: 14px; color: var(--ink3); }

/* a refusal-with-a-reason on the person's own row: the gateway's sentence, in the accent ink */
.p-err, .p-why { font-size: 13.5px; line-height: 1.45; color: var(--you); max-width: 52ch; }
.p-why { color: var(--ink3); }
.p-block .p-err { color: var(--you); }

/* a section title inside a block (start.js's step title and its two folds) */
.p-sec {
  font-family: var(--serif); font-variation-settings: "SOFT" 100;
  font-weight: 350; font-size: 21px; line-height: 1.25; color: var(--ink);
}
button.p-sec {
  font-family: inherit; font-variation-settings: normal; font-weight: 500;
  font-size: 13.5px; color: var(--ink3); text-align: left; background: none;
  border: 0; padding: 4px 0; cursor: pointer;
}
button.p-sec:hover { color: var(--ink2); }
button.p-sec:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the "this is what this screen will NOT do" box (policy.js) */
.fence {
  font-size: 13px; line-height: 1.5; color: var(--ink3); border: 1px dashed var(--ink4);
  border-radius: 10px; padding: 10px 12px;
}

/* ---- pair.js: the code is READ off the glass, never typed into it -------------------------------- */
.p-code-out {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 34px; line-height: 1.1; letter-spacing: .22em; text-align: center;
  color: var(--ink); background: var(--sunk); border-radius: 14px; padding: 18px 12px;
  user-select: all; -webkit-user-select: all;
}

/* the completion beat: a ring, one line */
.beat { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0 4px; }
.beat .ring {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; color: var(--done); border: 2px solid var(--done);
  animation: pk-in .3s ease both;
}
.beat .bl { font-size: 15px; color: var(--ink); text-align: center; }
@media (prefers-reduced-motion: reduce) { .beat .ring { animation: none; } }

/* ---- pair.js + signin.js: the typed fields --------------------------------------------------------- */
.p-input {
  height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
  padding: 0 14px; font-size: 16px; color: var(--ink); outline: 0; width: 100%;
  box-sizing: border-box;
}
.p-input::placeholder { color: var(--ink3); }
.p-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pk-signin { display: flex; flex-direction: column; gap: 10px; }

/* ---- body.js: the machine picker is an index, a column the eye runs down ---------------------------- */
.p-rows { display: flex; flex-direction: column; gap: 8px; }
.rowwrap { display: flex; flex-direction: column; }
.rowwrap .row {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 4px;
  background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left;
  color: var(--ink); font-size: 15px; width: 100%;
}
.rowwrap .row:last-child { border-bottom: 0; }
.rowwrap .row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rowwrap .row.sel { background: var(--sunk); border-radius: 10px; }
.rowwrap .row .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the state is the FIRST thing a narrow row clips: an identity is the last thing that may */
.rowwrap .row .st { flex: 0 200 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; font-size: 13px; color: var(--ink3); }
.rowwrap .row .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink4); flex: none; }
.rowwrap .row .dot.ok { background: var(--done); }

/* ---- the entry page ITSELF: one quiet centred column, no shell around it ----------------------
   WR audit, 2026-09-27: `js/frame.js`/`css/frame.css` now hide the sidebar/tabbar/ask bar for an
   entry route (pair, signin — `main.pk-page[data-surface="entry"]`, the attribute `js/router.js`'s
   `newPageHost` writes off SURFACE_OF), but hiding the shell left the moment's own three nodes —
   `.pk-voice`/`.pk-block`/`.pk-actions`, built straight onto the page host by `P.moment` — full-
   bleed across the whole pane: the code field and the sign-in button spanned the entire glass with
   no padding, because nothing in this file had ever had to lay out the PAGE, only what a moment
   draws inside one. This is the v14 look the file header promises and P10 never wired: a single
   column, capped narrow, centred both ways, the loudest thing on the screen being what he has to
   read or type. */
main.pk-page[data-surface="entry"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  /* NOT `min-height: 100%` — measured live (Playwright, 390×900): `.pk-page-slot`'s own `height`
     property is `auto` (only ITS `min-height: 100%` is set, in the base rule above), and a block
     box with an `auto` height is not a "specified height" a child's percentage can resolve
     against — CSS silently treats the child's percentage as `auto` instead, which is content's
     own height. Measured: 269px of content in a 900px pane, top-anchored, `justify-content:
     center` doing nothing because there was no extra space to center it in. `100vh`/`100dvh` are
     what `#pk-app` itself resolves against (frame.css, above) and need no ancestor's height to be
     definite — the same fallback order for the same reason (iOS Safari's address bar). */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
main.pk-page[data-surface="entry"] > .pk-voice,
main.pk-page[data-surface="entry"] > .pk-block,
main.pk-page[data-surface="entry"] > .pk-actions {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
main.pk-page[data-surface="entry"] > .pk-voice {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-weight: 350;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
  margin: 0 auto 18px;
  max-width: 360px;
}

/* ---- start.js's page: the one moment-drawn host the sheet fix (`.pk-sheet-body`, above) and the
   entry fix (`[data-surface="entry"]`, above) both miss. Machine → Start keeps the shell — its
   route is a genuine PAGE (design §3.1: surface "page", sidebar/tabbar stay drawn) — so it must
   NOT take the centred, shell-less, 360px-capped entry treatment above; measured with the shell
   visible and `.pk-voice`/`.p-block` sitting at `top: 0` of the glass, because `main.pk-page` (an
   ordinary page host) carries no padding of its own by design — every OTHER page view supplies its
   own padded `.page` box (kit.css) before drawing into it, and start.js is the one page-surfaced
   view that draws `P.moment`'s bare nodes straight onto the host, the way an entry view or a sheet
   view does. Same class of bug as the sheet-body fix above (`.pk-voice`/`.pk-block`/`.pk-actions`
   relying on an ancestor gutter no page host supplies); same fix, `.page`'s own numbers, so Start
   reads like every other page in the shell rather than like its own third layout. */
main.pk-page[data-route="start"] {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 140px;
  box-sizing: border-box;
}