/* created 2026-10-30 for Drench Cast P1: structure and plain type only, vantablack ground (design v1.0 §7.4, §14 G8).
   The look (type, dial form, the instrument's form) waits for Creative Seat 2's sheets and Caleb's pick (G12).
   Floors held here: no text under 16 px, no target under 44 px, body 7:1 and secondary 4.5:1 on black, nothing animates.
   The seat's ruling of 30 Oct 11:5x: every word in the card's bone (never #fff), every line-height and vertical space a
   multiple of 4 px, one print stylesheet for the station page and the guide, and the owner's sign-in form styled here. */
:root {
  color-scheme: dark;
  --ground: #000;
  --ink: #ebe6dc;          /* the card's bone (card.d1afaeb8.css --bone), 16.9:1 on black */
  --ink-2: #b0aca5;        /* the bone at 75 %, 9.3:1 on black */
  --hair: #6f6f6f;         /* 4.2:1 on black: hairlines and marks, never words */
  --lit: #ebe6dc;          /* the bone: no word and no mark in #fff */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font: 18px/28px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
p { margin: 0 0 16px; }
.secondary { color: var(--ink-2); font-size: 16px; }
a { color: var(--ink); }
[hidden] { display: none !important; }

.tune { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 16px; text-align: center; }
.name { font-size: 22px; line-height: 32px; font-weight: 600; margin: 0; }
.tune-in { font: inherit; font-size: 22px; line-height: 32px; min-width: 220px; min-height: 64px; padding: 16px 28px; color: var(--lit); background: var(--ground); border: 1px solid var(--ink-2); border-radius: 10px; }
.tune-in:disabled { color: var(--ink-2); }
body.tuned .tune { display: none; }

.radio { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.ig { margin: 0 0 24px; }

.dial { position: relative; height: 96px; margin: 0 0 24px; }
.scale { position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: var(--hair); }
.marks { position: absolute; inset: 0; touch-action: none; }
.mark { position: absolute; top: 0; width: 56px; min-height: 88px; margin-left: -28px; padding: 0; border: 0; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; }
.mark .tick { display: block; width: 1px; height: 48px; background: var(--hair); }
.mark[aria-checked="true"] { color: var(--lit); }
.mark[aria-checked="true"] .tick { width: 3px; background: var(--lit); }
.mark.locked .tick { width: 12px; height: 12px; margin: 16px 0 20px; border: 1px solid var(--hair); border-radius: 50%; background: transparent; }
.mark.locked[aria-checked="true"] .tick { border-color: var(--lit); }
.mark:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.slot-1 { left: 10%; }
.slot-2 { left: 30%; }
.slot-3 { left: 50%; }
.slot-4 { left: 70%; }
.slot-5 { left: 90%; }

.now { margin: 0 0 24px; }
.station-line { margin: 0 0 8px; }
.now-line { margin: 0 0 12px; }
.now-line a { text-decoration: none; display: inline-block; min-height: 44px; padding: 8px 0; }
.now-line a:focus-visible { outline: 1px solid var(--ink); }
.hairline { height: 4px; background: linear-gradient(#262626, #262626) top / 100% 1px no-repeat; }
.hairline-fill { height: 1px; background: var(--ink-2); transform-origin: 0 0; transform: scaleX(0); }
.where { margin: 8px 0 16px; }

.meter { display: grid; gap: 12px; max-width: 480px; }
.meter-row { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 8px; }
.meter-ch { line-height: 20px; }
.meter-track { position: relative; height: 5px; background: #1c1c1c; }
.meter-bar { position: absolute; inset: 0; background: var(--ink-2); transform-origin: 0 0; transform: scaleX(0); }
.meter-peak { position: absolute; top: -3px; left: 0; width: 1px; height: 11px; background: var(--lit); transform: translateX(-2px); }
.corr-mid { position: absolute; left: 50%; top: -3px; width: 1px; height: 11px; background: var(--hair); }
.corr-dot { position: absolute; top: -2px; left: 0; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--ink-2); }

.controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.button { font: inherit; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 88px; padding: 8px 18px;
  color: var(--ink); background: var(--ground); border: 1px solid var(--hair); border-radius: 8px; text-decoration: none; }
.settings summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.settings .row { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 8px 0; }
.settings input[type="checkbox"] { width: 44px; height: 44px; margin: 0; }
.settings select { font: inherit; min-height: 44px; color: var(--ink); background: var(--ground); border: 1px solid var(--hair); border-radius: 6px; padding: 0 8px; }

/* the guide */
.guide { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; overflow-wrap: anywhere; }   /* no word wider than a 320 px phone at 200 % text */
.guide h1 { font-size: 22px; line-height: 32px; margin: 0 0 16px; }
.guide nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 24px; }
.guide nav .day { margin: 0; }
.columns { display: grid; gap: 32px; }
@media (min-width: 768px) { .columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.column h2 { font-size: 18px; margin: 0 0 12px; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 4.5em 1fr; gap: 4px 12px; padding: 12px 0;
  background: linear-gradient(#262626, #262626) top / 100% 1px no-repeat; }   /* a hairline that takes no height */
.rows li.now-row { background-image: linear-gradient(var(--ink-2), var(--ink-2)); }
.rows .when { font-variant-numeric: tabular-nums; }
.rows .tz { grid-column: 2; }
.rows a { overflow-wrap: anywhere; display: inline-block; min-height: 44px; padding: 8px 0; }
.column .ring { display: none; }
.column.locked .ring { display: inline-block; width: 12px; height: 12px; margin: 0 12px 0 0; border: 1px solid var(--hair); border-radius: 50%; vertical-align: middle; }

/* shop mode */
.shop { min-height: 100vh; min-height: 100svh; padding: 16px; display: flex; flex-direction: column; }
.shop .shop-top { display: flex; justify-content: flex-end; }
.shop .dial { margin-top: auto; }
.shop .health { min-height: 24px; margin: 8px 0 0; }
.shop .cast { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; }

/* the owner's sign-in form at /-/load (P2's page links this stylesheet) */
.owner { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.owner form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.owner input { font: inherit; min-height: 44px; min-width: 220px; max-width: 100%; padding: 8px 12px; color: var(--ink);
  background: var(--ground); border: 1px solid var(--hair); border-radius: 8px; }

/* print: one sheet for the station page and the guide. The words print black on white paper; nothing that carries a
   word is left off; backgrounds (the hairlines and meter fills) do not print. */
@media print {
  :root { color-scheme: light; --ground: #fff; --ink: #000; --ink-2: #333; --hair: #999; --lit: #000; }
  html, body { background: #fff; color: #000; }
  .tune, .shop { min-height: 0; }
  .button, .tune-in, .settings select, .owner input { color: #000; background: #fff; border-color: #999; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}