/* FREQUENCY Simulation refinement
   All operational motion remains driven by harbor-stage.js. This layer changes
   hierarchy, material treatment, and responsive composition only. */
:root {
  --dm-bg: #060910;
  --dm-panel: #0b1019;
  --dm-panel-2: #101722;
  --indigo-line: rgba(116, 139, 172, .22);
  --indigo-line-2: rgba(116, 139, 172, .12);
  --signal-live: #42c7f4;
  --accent-quiet: #8ba3c7;
  --accent-quiet-wash: rgba(139, 163, 199, .08);   /* selected surface */
  --accent-quiet-line: rgba(139, 163, 199, .35);   /* selected hairline, dotted leaders */
  --text-body: #c1cad7;
  --text-muted: #8290a3;
  --text-faint: #566477;
  --shadow-panel: 0 1px 0 rgba(255,255,255,.025) inset, 0 18px 44px -28px rgba(0,0,0,.9);
  --shadow-raised: 0 1px 0 rgba(255,255,255,.04) inset, 0 34px 80px -34px rgba(0,0,0,.96);
}
html { background:#060910; }
body {
  background:
    radial-gradient(900px 540px at 72% 16%, rgba(43,83,116,.10), transparent 68%),
    linear-gradient(180deg,#070a11 0%,#060910 100%);
}
header { background:rgba(6,9,16,.88)!important; backdrop-filter:blur(18px) saturate(125%)!important; -webkit-backdrop-filter:blur(18px) saturate(125%)!important; border-color:rgba(116,139,172,.12)!important; }
main > section:first-child { padding-top:56px!important; }
main > section:first-child h1 { max-width:860px!important; letter-spacing:-.035em!important; }
main > section:first-child p { max-width:760px!important; color:#aeb9c8!important; }
.freq-phase-rail { gap:6px!important; padding:6px; border:1px solid rgba(116,139,172,.16); background:rgba(8,12,20,.72); border-radius:8px; }
.freq-phase-rail > button { min-height:68px; background:transparent!important; border-color:transparent!important; border-radius:5px!important; }
.freq-phase-rail > button[aria-selected="true"] { background:linear-gradient(180deg,rgba(139,163,199,.10),rgba(139,163,199,.04))!important; border-color:rgba(139,163,199,.5)!important; box-shadow:0 0 0 1px rgba(139,163,199,.05) inset; }
/* Hover is a faint hairline only, so a hovered tab never reads as the selected phase. */
.freq-phase-rail > button[aria-selected="false"]:hover { border-color:var(--border-faint)!important; background:rgba(255,255,255,.015)!important; }
.freq-station-grid > div, .freq-calc-grid > div { background:linear-gradient(180deg,rgba(16,23,34,.92),rgba(9,14,22,.92))!important; border-color:rgba(116,139,172,.18)!important; }
.freq-calc-grid > div { border-style:solid!important; }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible { box-shadow:0 0 0 2px var(--dm-bg),0 0 0 4px var(--accent-quiet)!important; }
/* Telemetry values align like instrumentation. */
.mono { font-variant-numeric:tabular-nums slashed-zero; }

@media (max-width:760px){
  main > section:first-child { padding-top:36px!important; }
  .freq-phase-rail { display:flex!important; overflow-x:auto; scroll-snap-type:x mandatory; }
  .freq-phase-rail > button { min-width:132px; scroll-snap-align:start; }
  .freq-station-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .freq-calc-grid { grid-template-columns:1fr!important; }
}
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important;} }
@media (max-width:620px){
  .freq-phase-rail { display:flex!important; overflow-x:auto!important; grid-template-columns:none!important; overscroll-behavior-x:contain; }
  .freq-phase-rail > button { flex:0 0 128px; min-width:128px; }
}

/* Instrument panel grid (Simulation): status | viewport | schematic */
@media (max-width: 1220px) {
  .freq-instrument-grid { grid-template-columns: 260px minmax(0,1fr)!important; }
  .freq-instrument-grid > div:last-child { grid-column: 1 / -1; max-width: 440px; }
}
@media (max-width: 900px) {
  .freq-instrument-grid { grid-template-columns: minmax(0,1fr)!important; }
  .freq-instrument-grid > div:last-child { grid-column: auto; max-width: none; }
}
@media (max-width: 560px) {
  .freq-manifest-row { grid-template-columns: minmax(0,1fr) 72px 96px!important; }
}