/* Approved phone prototype layout, scoped to the served participant surface. */

  /* Participant phone (stage C). Rendering rule: every string from the case or from a participant is
     placed with textContent / createTextNode. Nothing here ever assigns innerHTML.
     The spatial grid (CASE-113), stacked for a phone: the orientation band on top (Case, the phase pill,
     who you are), then the information (scene card, vitals, findings, investigations), then the decision. */
  html.phone-page { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; scroll-padding-bottom: 96px; } /* the sticky header and the fixed Live surface bar never hide the focused control (WCAG 2.4.11) */
  body.phone-page { min-height: 100vh; font-size: var(--t-md); }
  .phone-app { max-width: 520px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
  .phone-app .top { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--field-line); background: var(--nav-bg); color: var(--nav-ink); position: sticky; top: 0; z-index: var(--z-sticky); }
  .phone-app .top .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
  .phone-app .top .who-text { min-width: 0; }
  .phone-app .top .brand { margin: 0; font-size: var(--t-xs); font-weight: var(--w-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
  .phone-app .top .name { margin: 0; font-weight: var(--w-semibold); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .phone-app .top .pill svg { flex: none; }
  .phone-app .iconbtn { min-width: 44px; min-height: 44px; border: 1px solid var(--field-line); background: var(--surface); color: var(--nav-ink); border-radius: 50%; display: grid; place-items: center; }
  .phone-app .conn { margin: var(--sp-2) var(--sp-4) 0; }
  .phone-app .conn .banner { font-size: var(--t-sm); }
  .phone-app .conn .banner.lost { background: var(--alert-tint); color: var(--alert-ink); }
  .phone-app .conn .banner.wait { background: var(--sunken); color: var(--ink); }
  .phone-app .note { margin: var(--sp-2) var(--sp-4) 0; min-height: 0; font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--petrol-ink); }
  .phone-app .note:empty { display: none; }
  .phone-app #menu { margin: var(--sp-2) var(--sp-4) 0; padding: var(--sp-4); }
  .phone-app main { flex: 1; padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
  .phone-app main.pad-bar { padding-bottom: 96px; }
  .phone-app main:focus { outline: none; }
  .phone-app main > :empty { display: none; }
  .phone-app h1, .phone-app h2, .phone-app h3, .phone-app h4 { margin: 0; }
  .phone-app h1 { font-size: var(--t-xl); }
  .phone-app h2 { font-size: var(--t-lg); }
  .phone-app h3 { font-size: var(--t-md); }
  .phone-app h4 { font-size: var(--t-md); font-weight: var(--w-semibold); }
  .phone-app [tabindex="-1"]:focus { outline: none; }
  .phone-app [tabindex="-1"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .phone-app p { margin: 0; }
  .phone-app .card { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
  .phone-app .card.flat { box-shadow: none; }
  .phone-app .small { font-size: var(--t-sm); }
  .phone-app .join-footer { display: flex; justify-content: center; }
  .phone-app .join-footer a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--sp-3); color: var(--petrol-ink); font-size: var(--t-sm); font-weight: var(--w-medium); }

  /* information: one scene card, then bento tiles (CASE-116, CASE-117) */
  .phone-app .scene { gap: var(--sp-2); }
  .phone-app .scene .prose { font-size: var(--t-md); line-height: 1.55; }
  .phone-app .scene[data-kind="consequence"], .phone-app .scene[data-kind="terminal"] { box-shadow: inset 4px 0 0 var(--ph-consequence), var(--shadow-1); }
  .phone-app .tile { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
  .phone-app .points { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; font-size: var(--t-md); }
  .phone-app .points li { overflow-wrap: anywhere; padding-left: 2px; }
  .phone-app .points li::marker { color: var(--petrol-ink); }
  .phone-app .vitals { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); }
  .phone-app .vitals li { display: grid; align-content: start; min-width: 0; }
  .phone-app .vitals .vl { font-size: var(--t-xs); font-weight: var(--w-semibold); color: var(--ink-muted); overflow-wrap: anywhere; }
  .phone-app .vitals .vv { font: var(--w-semibold) var(--t-lg)/1.15 var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .phone-app .vitals .vu { display: inline-block; font-size: var(--t-xs); font-weight: var(--w-regular); color: var(--ink-muted); margin-left: 3px; font-family: var(--sans); white-space: nowrap; }
  .phone-app .vitals .arrow { font: var(--w-medium) var(--t-xs)/1.3 var(--mono); }
  .phone-app details.ctx { border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); }
  .phone-app details.ctx summary { min-height: 48px; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); font-weight: var(--w-semibold); cursor: pointer; }
  .phone-app details.ctx .inner { padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-3); }

  /* forms */
  .phone-app label.field, .phone-app .field-label { display: block; font-weight: var(--w-semibold); font-size: var(--t-sm); margin-bottom: 6px; }
  .phone-app input[type=text], .phone-app textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 16px; }
  .phone-app textarea { min-height: 112px; resize: vertical; }
  .phone-app input[aria-invalid=true] { border-color: var(--alert); border-width: 2px; }
  .phone-app .code-input { font: var(--w-semibold) 26px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-align: center; }
  .phone-app .counter { font-size: var(--t-xs); color: var(--ink-muted); text-align: right; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .phone-app .btn { min-height: 48px; font-size: var(--t-md); }
  .phone-app .btn.small { min-height: 44px; font-size: var(--t-sm); padding: 6px 12px; }
  .phone-app .stack { display: grid; gap: var(--sp-3); }
  .phone-app .err { color: var(--alert-ink); font-weight: var(--w-semibold); font-size: var(--t-sm); margin-top: 6px; display: flex; gap: 8px; align-items: flex-start; }
  .phone-app .err:empty { display: none; }
  .phone-app .idwarn { margin-top: 6px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--manual-tint); color: var(--manual-ink); font-size: var(--t-sm); font-weight: var(--w-medium); }
  .phone-app .idwarn:empty { display: none; }
  .phone-app fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  .phone-app fieldset:disabled .opt { opacity: .75; }
  .phone-app legend { padding: 0; font-size: var(--t-lg); font-weight: var(--w-semibold); line-height: 1.3; margin-bottom: var(--sp-3); }
  .phone-app .hint { font-size: var(--t-sm); color: var(--ink-muted); margin: 0 0 8px; }

  /* avatar picker (CASE-119): a radio group of 16 vendored drawings, each with a spoken label */
  .phone-app .avatars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .phone-app .av { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 2px solid transparent; border-radius: var(--radius); background: var(--sunken); cursor: pointer; }
  .phone-app .av input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
  .phone-app .av img { width: 78%; height: auto; border-radius: 50%; pointer-events: none; }
  .phone-app .av:has(input:checked) { border-color: var(--petrol); background: var(--petrol-tint); }
  .phone-app .av:has(input:checked)::after { content: "\2713" / ""; position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--petrol); color: var(--on-petrol); font-size: 12px; font-weight: var(--w-bold); line-height: 1; }
  .phone-app .av:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .phone-app .preview { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius); background: var(--nav-bg); }
  .phone-app .preview .nm { font-weight: var(--w-semibold); overflow-wrap: anywhere; }

  /* option tiles: the decision zone carries the option colours (CASE-114): mark + full text + a checked indicator */
  .phone-app .opts { display: grid; gap: var(--sp-2); }
  .phone-app .opt { position: relative; display: grid; grid-template-columns: 36px 1fr 26px; gap: var(--sp-3); align-items: center; min-height: 60px; padding: 10px 12px; cursor: pointer; }
  .phone-app .opt input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: inherit; }
  .phone-app .opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
  .phone-app .opt .mk { display: grid; }
  .phone-app .opt .lbl { overflow-wrap: anywhere; line-height: 1.35; font-weight: var(--w-medium); }
  .phone-app .opt .ind { width: 24px; height: 24px; border: 2px solid var(--field-line); border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--surface); }
  .phone-app .opt.multi .ind { border-radius: 6px; }
  .phone-app .opt:has(input:checked) { --mk:var(--petrol); border: 2px solid var(--ink); padding: 9px 11px; background: color-mix(in srgb, var(--mk) 22%, var(--surface)); }
  .phone-app .opt:has(input:checked) .ind { background: var(--ink); border: 0; color: var(--surface); }
  .phone-app .opt:has(input:checked) .lbl { font-weight: var(--w-semibold); }
  .phone-app .opt.locked { background: var(--sunken); border-style: dashed; cursor: not-allowed; color: var(--ink-muted); }
  .phone-app .opt.locked .mk { opacity: .45; }
  .phone-app .opt.locked .ind { display: none; }
  .phone-app .opt .tag { grid-column: 2 / -1; justify-self: start; }
  .phone-app .opt .xnote { grid-column: 2 / -1; }
  .phone-app .xnote { font-size: var(--t-xs); color: var(--ink-muted); }
  .phone-app .mk-line { display: inline-flex; gap: 8px; align-items: center; vertical-align: middle; }
  .phone-app .mk-line svg { flex: none; }
  .phone-app .mk-wrap { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 6px; }
  .phone-app .chose { display: flex; gap: 10px; align-items: center; font-weight: var(--w-semibold); overflow-wrap: anywhere; }
  .phone-app .chose .mk-wrap { margin: 0; flex: none; }

  /* ranking */
  .phone-app .rank { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
  .phone-app .rank li { --mk: var(--petrol); border: 2px solid var(--petrol); background: color-mix(in srgb, var(--mk) 14%, var(--surface)); border-radius: var(--radius); padding: 8px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
  .phone-app .rank .top-row { display: flex; gap: 10px; align-items: center; }
  .phone-app .rank .pos { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--petrol); color: var(--on-petrol); font-weight: var(--w-semibold); display: grid; place-items: center; font-size: var(--t-sm); }
  .phone-app .rank .top-row .lbl { min-width: 0; }
  .phone-app .rank .row-btns { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; align-items: center; }
  .phone-app .rank-move { min-width: 44px; min-height: 44px; padding: 4px; font-size: var(--t-lg); }
  .phone-app .avail { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .phone-app .avail li { --mk: var(--ink-muted); display: flex; gap: 10px; align-items: center; min-height: 56px; padding: 6px 6px 6px 12px; border: 1px solid var(--field-line); border-radius: var(--radius); background: color-mix(in srgb, var(--mk) 12%, var(--surface)); }
  .phone-app .avail li > .lbl { flex: 1; min-width: 0; }
  .phone-app .avail li.locked { background: var(--sunken); border-style: dashed; }
  .phone-app .avail li.locked .mk, .phone-app .rank li.locked .mk { opacity: .45; }
  .phone-app .empty-rank { padding: 12px; border: 1px dashed var(--field-line); border-radius: var(--radius-sm); color: var(--ink-muted); margin-bottom: 10px; }

  /* receipts */
  .phone-app .receipts { display: grid; gap: 6px; }
  .phone-app .receipts:not(:has(.t:not(:empty))) { display: none; }
  .phone-app .card > p:empty { display: none; }
  .phone-app .rcpt { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--sunken); font-weight: var(--w-medium); font-size: var(--t-sm); }
  .phone-app .rcpt:has(.t:empty) { display: none; }
  .phone-app .rcpt .t { flex: 1; }
  .phone-app .rcpt svg { flex: none; margin-top: 2px; }
  .phone-app .rcpt.alert { background: var(--alert-tint); color: var(--alert-ink); }
  .phone-app .rcpt.ok { background: var(--ok-tint); color: var(--ok-ink); }
  .phone-app .rcpt.info { background: var(--petrol-tint); color: var(--petrol-ink); }
  .phone-app .rcpt.pause { background: var(--ph-paused-tint); color: var(--ph-paused-ink); }
  .phone-app .saved-line { font-weight: var(--w-semibold); overflow-wrap: anywhere; }
  .phone-app .timer-line { font-size: var(--t-sm); color: var(--ink-muted); display: inline-flex; gap: 6px; align-items: center; }
  .phone-app .timer-line:empty { display: none; }
  .phone-app .decision { box-shadow: inset 0 4px 0 var(--ph, var(--petrol)), var(--shadow-1); }

  /* timeline */
  .phone-app .tl h3 { margin-bottom: 8px; font-size: var(--t-sm); color: var(--ink-muted); letter-spacing: .08em; text-transform: uppercase; }
  .phone-app .strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin: 0 -16px; padding-inline: 16px; list-style: none; }
  .phone-app .strip li { scroll-snap-align: start; flex: 0 0 62%; }
  .phone-app .strip button { width: 100%; min-height: 64px; text-align: left; padding: 8px 12px; border: 1px solid var(--field-line); background: var(--surface); border-radius: var(--radius-sm); display: grid; gap: 2px; }
  .phone-app .strip button[aria-current=true] { border: 2px solid var(--petrol); padding: 7px 11px; background: var(--petrol-tint); }
  .phone-app .strip .n { font-size: var(--t-xs); font-weight: var(--w-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
  .phone-app .strip .t { font-weight: var(--w-medium); font-size: var(--t-sm); overflow-wrap: anywhere; }
  .phone-app .bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--field-line); box-shadow: var(--shadow-2); }
  .phone-app .bar .inner { max-width: 520px; margin: 0 auto; }
  .phone-app .bar[hidden] { display: none; }

  /* result + recap */
  .phone-app .result { background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); padding: var(--sp-4); display: grid; gap: 6px; }
  .phone-app .ranking-result { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); color: var(--ink); background: var(--surface); }
  .phone-app .ranking-result ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
  .phone-app .recap-round { border-top: 1px solid var(--field-line); padding-top: 12px; display: grid; gap: 6px; }
  .phone-app .recap-round p { overflow-wrap: anywhere; }
  .phone-app .cls { display: inline-flex; gap: 6px; align-items: center; font-weight: var(--w-semibold); }
  .phone-app ul.plain, .phone-app ol.plain { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
  .phone-app .sr-only-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .phone-app .spin { animation: phone-spin 1s linear infinite; }
  @keyframes phone-spin { to { transform: rotate(360deg); } }
  @media print {
    .phone-app .top, .phone-app .conn, .phone-app .note, .phone-app .bar, .phone-app #menu, .phone-app .noprint, .phone-app .strip, .phone-app .tl { display: none; }
    body.phone-page { background: var(--ground); }
  }

.phone-app .rename-heading { font-size:var(--t-md); margin-bottom:var(--sp-2); }
.phone-app .held-prompt { font-size:var(--t-lg); font-weight:var(--w-semibold); line-height:1.3; overflow-wrap:anywhere; }
.phone-app .wrap-anywhere { overflow-wrap:anywhere; }
.phone-app .block-note { display:block; }
.phone-app .av-color-label { color:var(--ink); font-size:var(--t-xs); font-weight:var(--w-semibold); }
.phone-app .unsent { color:var(--alert-ink); background:var(--alert-tint); margin:var(--sp-2) var(--sp-4); padding:var(--sp-2); }
.phone-app .unsent:empty { display:none; }

.phone-app .opt .ind svg { visibility:hidden; }
.phone-app .opt:has(input:checked) .ind svg { visibility:visible; }

/* Authored layout must not override the participant hidden state. */
.phone-app [hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .phone-app .presentation-new-group { animation: phone-presentation-share 240ms ease-out both; }
  @keyframes phone-presentation-share { from { opacity: .72; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}