/* FDA OFDM-ISAC: simulation styles (assets/sim.css).
   Every selector is scoped under #sim-root and every colour comes from the shared tokens in
   assets/style.css. Only the three screens use the --screen* tokens and stay dark in both themes;
   the card titles, plots, notes, primary bar, control deck and readouts are page UI on hairlines. */

#sim-root {
  position: relative;
  min-width: 0;
  font-family: var(--font-body);
  color: var(--ink);
}
#sim-root *,
#sim-root *::before,
#sim-root *::after { box-sizing: border-box; }
#sim-root [hidden] { display: none !important; }
#sim-root .sim-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
#sim-root sub { font-size: 0.75em; line-height: 0; }

/* ---------- Layout ----------
   Three cards (phased array, linear FDA, permuted FDA), then the primary bar, the control deck
   and the readout strip. From 880 px the cards sit in one row, so the three screens are seen at
   once (the two plots sit side by side under each screen from 1120 px, stacked below that).
   From 700 to 879 px the cards stack with the plots beside each screen; phones stack
   everything. Below 880 px, while the screens are in view and the primary bar is not, a dock
   at the bottom of the viewport holds N, f_c, the offset step and Play. In the one-row layout
   it would cover the plots under the cards, so it stays hidden there (watchDock in sim.js). */
#sim-root .sim-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}
#sim-root .sim-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}
@media (min-width: 880px) {
  #sim-root .sim-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}

/* ---------- Card ---------- */
#sim-root .sim-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
#sim-root .sim-card-title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 0 0 9px;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
}
#sim-root .sim-card-sep { font-weight: 400; color: var(--ink-3); }
#sim-root .sim-card-rule { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: var(--ink-2); }
/* align-content: start puts any extra card height (a longer note on another card) below the
   note, so the plots of the three cards stay on one line. */
#sim-root .sim-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  flex: 1 1 auto;
}
@media (min-width: 700px) and (max-width: 879.98px) {
  #sim-root .sim-card-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* ---------- Screen ---------- */
#sim-root .sim-screen {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  background: var(--screen);
  color: var(--screen-ink);
  border-radius: var(--radius);
}
#sim-root .sim-screen canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
#sim-root .sim-canvas-top {
  cursor: crosshair;
  touch-action: manipulation;
}
#sim-root .sim-canvas-top.is-panning { cursor: grabbing; }

#sim-root .sim-notice {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 16px);
  padding: 3px 10px;
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
  color: var(--screen-ink);
  background: var(--screen-2);
  border: 1px solid var(--screen-rule);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
}
#sim-root .sim-notice.is-shown { opacity: 1; }
#sim-root .sim-notice:empty { padding: 0; border-width: 0; }
#sim-root .sim-hover {
  position: absolute;
  z-index: 3;
  top: 0; left: 0;
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--screen-ink);
  background: var(--screen-2);
  background: color-mix(in srgb, var(--screen-2) 92%, transparent);
  border: 1px solid var(--screen-rule);
  border-radius: 4px;
  pointer-events: none;
}

/* ---------- Plots and note under (or beside) each screen ---------- */
#sim-root .sim-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px 14px;
  min-width: 0;
  padding: 12px 0 0;
}
@media (min-width: 700px) and (max-width: 879.98px) {
  #sim-root .sim-side {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 0 0 0 16px;
  }
}
@media (min-width: 880px) and (max-width: 1119.98px) {
  #sim-root .sim-side { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
#sim-root .sim-plot {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#sim-root .sim-plot-cap {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink-2);
}
#sim-root .sim-plot canvas {
  display: block;
  width: 100%;
  height: 84px;
}
@media (min-width: 700px) and (max-width: 879.98px) {
  #sim-root .sim-plot canvas { height: 96px; }
}
@media (min-width: 880px) and (max-width: 1119.98px) {
  #sim-root .sim-plot canvas { height: 72px; }
}
@media (max-width: 699.98px) {
  #sim-root .sim-plot canvas { height: 92px; }
}
#sim-root .sim-card-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}
#sim-root .sim-note-warn { color: var(--warn); font-weight: 600; }

/* ---------- Primary bar (page UI between two hairlines) ---------- */
#sim-root .sim-primary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 32px;
  padding: 14px 0 8px;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 640px) {
  #sim-root .sim-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
  #sim-root .sim-primary { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(190px, auto); }
}
#sim-root .sim-primary .sim-field { margin: 2px 0 8px; }
#sim-root .sim-primary .sim-field-head { flex-wrap: wrap; }
#sim-root .sim-primary .sim-field-head .sim-label { white-space: nowrap; }
#sim-root .sim-primary .sim-label { color: var(--ink); }
#sim-root .sim-primary .sim-aux,
#sim-root .sim-primary .sim-unit { color: var(--ink-2); }
#sim-root .sim-primary .sim-field-main .sim-label { font-size: var(--step-0); font-weight: 600; }
#sim-root .sim-primary .sim-field-main .sim-aux { font-size: 12.5px; text-align: left; }
#sim-root .sim-primary .sim-field-main input[type="range"] { height: 32px; }
#sim-root .sim-primary .sim-numbox {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--rule);
}
#sim-root .sim-primary .sim-field-main .sim-numbox { height: 36px; font-size: var(--step-0); width: 5.2em; }
#sim-root .sim-primary input[type="range"] { accent-color: var(--accent); }
#sim-root .sim-primary input:focus-visible,
#sim-root .sim-primary .sim-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
#sim-root .sim-playcell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 6px 12px;
  min-width: 0;
  padding: 4px 0 8px;
}
#sim-root .sim-clock {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
#sim-root .sim-btn.sim-play { min-width: 104px; min-height: 40px; }

/* ---------- Control deck (page UI) ---------- */

#sim-root .sim-field { margin: 4px 0 12px; min-width: 0; }
#sim-root .sim-field.is-disabled .sim-label,
#sim-root .sim-field.is-disabled .sim-aux { opacity: 0.55; }
#sim-root .sim-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 8px;
  margin-bottom: 2px;
}
#sim-root .sim-label {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
}
#sim-root .sim-aux {
  min-width: 0;
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
#sim-root .sim-field-body {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#sim-root input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
}
#sim-root input[type="range"]:disabled { cursor: default; opacity: 0.5; }
#sim-root .sim-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#sim-root .sim-numbox {
  font: inherit;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  width: 5.8em;
  height: 32px;
  padding: 4px 6px;
}
#sim-root .sim-numbox:disabled { opacity: 0.55; }
#sim-root .sim-unit {
  min-width: 2.4em;
  font-size: 12.5px;
  color: var(--ink-2);
}
#sim-root .sim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
}
#sim-root .sim-btn:hover { border-color: var(--ink-3); }
#sim-root .sim-btn-primary {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
#sim-root .sim-btn-primary:hover { border-color: var(--ink); }
#sim-root .sim-btn:focus-visible,
#sim-root input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
#sim-root .sim-hint,
#sim-root .sim-note,
#sim-root .sim-timeread,
#sim-root .sim-permtext {
  margin: 2px 0 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---------- Readout strip ---------- */

/* ---------- Short laptop screens ----------
   With the cards in one row on a screen about 800 px tall, tighter plots and padding keep the
   primary bar inside the first viewport under the three screens. */
@media (min-width: 1120px) and (max-height: 860px) {
  #sim-root .sim-app { gap: 8px; }
  #sim-root .sim-card-title { padding: 0 0 6px; }
  #sim-root .sim-side { gap: 6px 12px; padding: 8px 0 0; }
  #sim-root .sim-plot canvas { height: 64px; }
  #sim-root .sim-card-note { font-size: 0.875rem; line-height: 1.45; }
  #sim-root .sim-primary { padding: 8px 0 2px; }
  #sim-root .sim-primary .sim-field { margin: 0 0 4px; }
  #sim-root .sim-playcell { padding: 2px 0 4px; }
}

/* ---------- Dock (quick controls pinned to the bottom of the viewport) ---------- */
#sim-root .sim-dock {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 16px);
  display: flex;
  align-items: flex-end;
  gap: 8px 10px;
  padding: 6px 10px 8px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#sim-root .sim-dock-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#sim-root .sim-dock-field label {
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ink-2);
}
#sim-root .sim-dock .sim-numbox {
  width: 4.2em;
  height: 36px;
  font-size: var(--step--1);
  color: var(--ink);
  background: var(--paper);
  border-color: var(--rule);
}
#sim-root .sim-dock #sim-dock-n { width: 3.2em; }
#sim-root .sim-btn.sim-dock-play { min-width: 84px; min-height: 36px; }
#sim-root .sim-dock input:focus-visible,
#sim-root .sim-dock .sim-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  #sim-root .sim-btn,
  #sim-root .sim-seg-btn { transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease; }
}

/* One line under the primary bar: clicking a screen sets the focus. */
#sim-root .sim-focus-hint { margin: -6px 0 0; font-size: 0.875rem; color: var(--ink-2); }