/* Lab phone (Step 6) — mobile-first, same instrument theme as the console */
body.ph { min-height: 100%; height: auto; }
#app { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
.ph-top { display: flex; align-items: center; gap: 10px; padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); }
.ph-logo { height: 18px; opacity: .9; }
.ph-tag { font: 600 10px/1 var(--mono); letter-spacing: .14em; color: var(--accent2); border: 1px solid var(--line2); border-radius: 4px; padding: 3px 6px; }
.ph-top .spacer { flex: 1; }
.ph-clk { font-size: 11px; color: var(--muted); }
.led { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.led[data-tone="ok"] { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.led[data-tone="mid"] { background: var(--mid); }
.led[data-tone="bad"] { background: var(--bad); }
.ph-view { position: relative; background: #000; aspect-ratio: 3 / 4; max-height: 62dvh; overflow: hidden; }
.ph-view video, .ph-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-reticle { position: absolute; inset: 18% 12%; border: 1px dashed rgba(127,227,255,.35); border-radius: 10px; pointer-events: none; }
.ph-banner { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(10,13,18,.78);
  border: 1px solid var(--line2); font-size: 14px; text-align: center; backdrop-filter: blur(6px); }
.ph-banner[data-tone="ok"] { border-color: var(--ok); color: var(--ok); }
.ph-banner[data-tone="bad"] { border-color: var(--bad); color: var(--bad); }
.ph-steps { display: flex; list-style: none; margin: 0; padding: 8px 10px; gap: 4px; }
.ph-steps li { flex: 1; text-align: center; font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 7px 0; border-radius: 4px;
  background: var(--card2); border: 1px solid var(--line); color: var(--muted); }
.ph-steps li[data-state="on"] { border-color: var(--accent); color: var(--accent2); }
.ph-steps li[data-state="done"], .ph-steps li[data-state="ok"] { border-color: var(--ok); color: var(--ok); }
.ph-steps li[data-state="bad"] { border-color: var(--bad); color: var(--bad); }
.ph-panel { padding: 4px 14px 16px; display: grid; gap: 10px; }
.ph-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ph-check { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); }
.ph-check input { width: auto; }
.ph-knock { font-size: 17px; padding: 14px; }
.ph-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; margin: 0; }
.ph-kv dt { color: var(--muted); }
.ph-kv dd { margin: 0; overflow-wrap: anywhere; }