/* Shared phone corrections for the promoted site. Loaded by every promoted
   page after its version stylesheet, with site-phone.js building the phone
   navigation. Without the script the header keeps a wrapped fallback. */
@media (max-width: 760px) {
  .hd .hd-in { height: auto; min-height: 0; padding: 10px 0 12px; row-gap: 10px; }
  .hd nav { order: 3; width: 100%; margin: 0; }
  .hd nav ul { flex-wrap: wrap; gap: 6px 18px; }
  .hd .util { margin-left: auto; display: flex; gap: 8px; }
  .annc { font-size: 11.5px; padding: 7px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v8-hero { padding-top: 40px; }
  .p-v8-hero { padding-top: 28px; }
}

/* Purpose-built phone navigation: one calm bar, wordmark and Menu. The
   desktop nav rows never render on phones once site-phone.js is up. */
.pmenu-btn { display: none; }
@media (max-width: 760px) {
  .pnav .hd .hd-in { flex-wrap: nowrap; height: 56px; min-height: 56px; padding: 0 20px; row-gap: 0; align-items: center; justify-content: space-between; }
  .pnav .hd nav, .pnav .hd .util, .pnav .hd .hd-in > .access { display: none; }
  .pnav .pmenu-btn { display: inline-flex; align-items: center; font-family: var(--sans); font-size: var(--f13); font-weight: 600; letter-spacing: 0.01em; color: var(--on-ink); background: none; border: 1px solid var(--ln-d); border-radius: 99px; padding: 8px 18px; min-height: 38px; cursor: pointer; }
}
.pmenu { position: fixed; inset: 0; z-index: 320; background: var(--ink); display: flex; flex-direction: column; padding: 0 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; }
.pmenu[hidden] { display: none; }
.pmenu-top { display: flex; align-items: center; justify-content: space-between; height: 56px; flex: none; }
.pmenu-mark { font-family: var(--sans); font-weight: 600; font-size: var(--f15); color: var(--on-ink); }
.pmenu-close { font-family: var(--sans); font-size: var(--f13); font-weight: 600; color: var(--on-ink); background: none; border: 1px solid var(--ln-d); border-radius: 99px; padding: 8px 18px; min-height: 38px; cursor: pointer; }
.pmenu-nav { display: block; margin-top: 22px; }
.pmenu-nav a { display: block; font-family: var(--serif); font-weight: 300; font-size: 1.85rem; line-height: 1.2; color: var(--on-ink); padding: 15px 0; border-bottom: 1px solid rgba(239, 237, 230, 0.08); }
.pmenu-nav a[aria-current="page"]::after { content: " ·"; color: var(--on-ink-3); }
.pmenu-actions { margin-top: auto; padding-top: 28px; }
.pmenu-actions .btn { display: flex; width: 100%; justify-content: center; }

/* ---------- shared corrections, all viewports ----------
   Colour discipline on the v12-chain pages (crucible, learning): amber only
   marks a held or pending state on data, never labels or schematic accents. */
.st.kiln { color: var(--on-ink-2); }
.rp-cells i.B { background: rgba(239, 237, 230, 0.18); color: #EFEDE6; }
.rp-row.flip .m::after { content: " · differs"; color: var(--on-ink-3); }

/* ---------- phone layout corrections ---------- */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px; }
  .topics button, .filters button, .dtabs button, .mode button, .rd-mode button, .db-tl .tn { min-height: 44px; }
  .rp-row.head { display: none; }
  .rp-cells::before { content: attr(data-l); display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink-3); margin-bottom: 4px; }
}
@media (max-width: 680px) {
  .ctxbar { flex-wrap: wrap; overflow: visible; }
  .ctxbar .ci { flex: 1 1 46%; border-right: 0; }
  .kv { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kv .v { text-align: left; }
  .rail button span { display: none; }
  .lb { padding: 0; }
  .lb .lb-box { max-width: 100vw; max-height: 100dvh; border-radius: 0; }
  .lb .lb-fig { overflow: auto; -webkit-overflow-scrolling: touch; }
  .db-top { padding: 10px 12px; gap: 8px; }
}
@media (max-width: 560px) {
  .instr .ctl { display: grid; grid-template-columns: auto 1fr; row-gap: 10px; align-items: center; }
  .instr .ctl select, .instr .ctl input[type="range"], .instr .ctl .run-st { grid-column: 1 / -1; min-width: 0; max-width: 100%; }
  .entities { grid-template-columns: 1fr; }
  .annc a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .annc a span { display: none; }
}