/* Camera scanner (phone) · page layout and this page's own drawing: the desk beside the phone frame, the camera scene
   with its code boxes, and the bottom sheet the kit parts sit in. */
@layer page {
  .ps-desk { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s10); min-height: 100dvh; padding: var(--s8); }
  .ps-side { justify-self: end; max-width: 360px; }
  .ps-right { justify-self: start; max-width: 340px; }

  /* The phone, 1 : 1 on the desk. */
  .ps-phone { position: relative; width: 410px; height: 864px; border-radius: 60px; overflow: hidden; isolation: isolate; background: var(--ink-950); border: 10px solid var(--navy-990); outline: 1px solid rgba(169, 208, 223, .22); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
  .ps-phone::after { content: ''; position: absolute; z-index: 3; inset: 0 0 auto; height: 150px; background: linear-gradient(180deg, rgba(6, 26, 43, .72), transparent); pointer-events: none; }
  .ps-sbar { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 6px 30px 0; font-size: 15px; font-weight: 600; color: #fff; pointer-events: none; }
  .ps-scene { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 40%; transform: scale(var(--zoom, 1)); }
  .ps-box { cursor: pointer; }
  .ps-box:focus-visible { outline: none; }
  .ps-box__mark { fill: none; stroke: var(--sky-300); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 5; opacity: .55; }
  .ps-box__veil { fill: var(--sky-400); opacity: 0; }
  .ps-box__badgec { fill: var(--navy-950); stroke: var(--sky-300); stroke-width: 2; }
  .ps-box__badget { font: 700 15px var(--font-ui); fill: #fff; text-anchor: middle; dominant-baseline: central; }
  .ps-box[aria-checked="true"] .ps-box__mark { stroke: var(--sky-400); stroke-dasharray: none; opacity: 1; }
  .ps-box[aria-checked="true"] .ps-box__veil { opacity: .16; }
  .ps-box[aria-checked="true"] .ps-box__badgec { fill: var(--sky-400); stroke: var(--sky-400); }
  .ps-box[aria-checked="true"] .ps-box__badget { fill: var(--navy-990); }
  .ps-box:focus-visible .ps-box__mark { stroke: var(--focus); stroke-width: 4; stroke-dasharray: none; opacity: 1; }
  .ps-phone:not([data-state="found"], [data-state="resolved"]) .ps-boxes { display: none; }
  .ps-phone[data-state="resolved"] .ps-box[aria-checked="false"] { opacity: .25; }
  .ps-reticle { --scan-h: 200px; position: absolute; left: 50%; top: 36%; width: 260px; height: 200px; transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, .7); border-radius: var(--r5); box-shadow: 0 0 0 999px rgba(6, 26, 43, .38); pointer-events: none; }
  .ps-phone:not([data-state="looking"]) .ps-reticle { display: none; }
  .ps-dead { position: absolute; inset: 0; display: none; place-items: start center; padding-top: 180px; background: linear-gradient(180deg, var(--navy-950), var(--navy-990)); color: var(--text-3); }
  .ps-phone:is([data-state="denied"], [data-state="insecure"]) .ps-dead { display: grid; }
  .ps-phone:is([data-state="denied"], [data-state="insecure"]) .ps-zoom { display: none; }
  .ps-ctl { position: absolute; z-index: 4; top: 56px; left: 16px; right: 16px; display: flex; align-items: center; gap: var(--s2); color: #fff; }
  .ps-zoom { position: absolute; z-index: 4; top: 128px; right: 16px; }

  /* The bottom sheet: the screen's words and actions over the camera. */
  .ps-sheet { position: absolute; z-index: 4; inset: auto 0 0; max-height: 64%; overflow-y: auto; padding: var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)); border-radius: var(--r5) var(--r5) 0 0; background: color-mix(in oklab, var(--navy-950) 94%, transparent); border-top: 1px solid var(--line); }
  .ps-phone:is([data-state="lit"], [data-state="cart"], [data-state="wrongfeeder"], [data-state="rack"]) .ps-sheet { max-height: 78%; }
  .ps-phone:is([data-state="denied"], [data-state="insecure"]) .ps-sheet { max-height: none; }
  /* The stop signal's pill (liveState(), painted by app.js): at the top of the phone, over the camera, centred under the
     status bar; hidden while connected. The last actions show below it while a write is unanswered or was not booked
     (station-kit.js paints them), over the camera and under the controls. */
  .ps-stop { position: absolute; z-index: 6; top: 52px; inset-inline: 12px; display: flex; justify-content: center; pointer-events: none; }
  .ps-attn { position: absolute; z-index: 5; top: 112px; left: 12px; right: 12px; max-height: max(96px, calc(36% - 124px)); overflow-y: auto; padding: var(--s2); border-radius: var(--r4); background: var(--navy-950); border: 1px solid var(--line); }
  .ps-phone:has(> .ps-attn:not([hidden])) .ps-zoom { display: none; } /* it takes the zoom's place until dealt with */

  @media (max-width: 1100px) { .ps-desk { grid-template-columns: minmax(0, 1fr) auto; } .ps-side { display: none; } }
  @media (max-width: 600px) {
    .ps-desk { display: flex; flex-direction: column; gap: 0; padding: 0; }
    .ps-right { max-width: none; padding: var(--s4); }
    .ps-right > p { display: none; }
    .ps-phone { width: 100%; height: 100dvh; min-height: 640px; border: 0; border-radius: 0; outline: 0; box-shadow: none; }
    .ps-sbar { display: none; }
    .ps-stop { top: 12px; }
    .ps-ctl { top: 16px; }
    .ps-zoom { top: 84px; }
  }
}