/* Rack setup, one controller — layout unique to this page: the wizard frame (path beside stage), the identify
   layout, the phone mirror, the board finder and the decided/reported convergence. */
@layer page {
  /* The step sits on one sheet beside the stepper (steppedFlow, K5). Its actions stay in reach at the foot of the
     viewport while a long step scrolls, so the next step is always one press away. */
  .pd-stage { --wstep-bleed: var(--s8); display: grid; align-content: start; min-width: 0; padding: var(--s6) var(--s8) var(--s4); border: 1px solid var(--line); border-radius: var(--r4); background: var(--sheet); box-shadow: var(--shadow-1); }
  /* Shape: the fields beside the drawing they make. */
  .pd-shape { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  /* Follow the light: the boards (the one being lit first open) beside the rack and the progress. */
  .pd-ftl { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s6); align-items: start; }

  /* Identify: the outline beside the answers. */
  .pd-hello { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }

  /* The paired phone, mirrored on this screen. */
  .pd-pp { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-start; }
  .pd-pp__phone { width: 244px; display: grid; gap: var(--s3); padding: var(--s4) var(--s3); border: 6px solid var(--ink-800); border-radius: var(--r5); background: var(--sheet); }

  /* Find boards: call and response with the hardware. */
  .pd-find { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: start; }

  /* Check it answers: what was decided and what the controller reported converge on one stamp. */
  .pd-conv { display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: stretch; }
  .pd-conv__lanes { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; row-gap: var(--s2); }
  .pd-conv__join { position: relative; display: grid; align-items: center; padding-left: var(--s5); }
  .pd-conv__join::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: var(--s4); border: 2px solid var(--line-2); border-left: 0; border-radius: 0 var(--r3) var(--r3) 0; }
  .pd-conv__stamp { display: grid; gap: 2px; padding: var(--s3) var(--s4); border: 1.5px solid var(--line-2); border-radius: var(--r3); background: var(--sheet); font-size: var(--t-small); color: var(--text-2); }
  .pd-conv__stamp b { font-size: var(--t-data); color: var(--text); }
  .pd-conv[data-state="done"] .pd-conv__stamp { border-color: var(--ok-dot); }
  .pd-conv[data-state="done"] .pd-conv__join::before { border-color: var(--ok-dot); }
  .pd-conv[data-state="checking"] .pd-conv__stamp { border-color: var(--accent); }

  /* Follow the light: the rack beside what it has answered so far; the bays below. */

  /* In service / not added: the step beside its receipt. */
  .pd-done { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s8); align-items: start; }

  @media (max-width: 1100px) {
    .pd-done, .pd-shape, .pd-ftl { grid-template-columns: minmax(0, 1fr); }
    .pd-conv { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
    .pd-conv__join { padding-left: 0; }
    .pd-conv__join::before { display: none; }
  }
  @media (max-width: 900px) {
    .pd-stage { --wstep-bleed: var(--s4); padding: var(--s5) var(--s4) var(--s3); }
    .pd-hello { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
    /* On a narrow screen the step follows the stepper strip directly; the owner and the ids stay on the desk. */
    .pd-flow .flow__aside { display: none; }
  }
  @media (max-width: 600px) {
    .pd-find { grid-template-columns: minmax(0, 1fr); }
    .pd-conv__lanes { grid-template-columns: minmax(0, 1fr); }
  }
  /* Asking on your phone makes no sense when this is the phone. */
  @media (max-width: 560px) { .pd-askphone { display: none; } }
}