/* Amateur-radio receiver presentation. Layout belongs to dashboard.css. */

:root[data-theme="amateur-radio"] {
  color-scheme: dark;
  --background: #11100c;
  --surface: #1b1a14;
  --surface-emphasis: #242218;
  --text: #f6edcf;
  --muted: #bdb394;
  --border: #5b5139;
  --accent: #d99a3e;
  --accent-strong: #f0b65d;
  --success: #82d18a;
  --warning: #f0c85a;
  --danger: #ef8484;
  --focus: #8ed9e6;
  --shadow: inset 0 0 0 1px rgb(255 255 255 / 0.025);
  --radius-small: 0.2rem;
  --radius-large: 0.3rem;
  --radio-accent: #d99a3e;
  --radio-soft: rgb(217 154 62 / 0.08);
  --radio-cyan: #8ed9e6;
  --radio-bezel: #090a08;
  font-family:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

:root[data-theme="amateur-radio"] body {
  background:
    repeating-linear-gradient(
      0deg,
      rgb(255 255 255 / 0.012) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(180deg, rgb(217 154 62 / 0.045), transparent 22rem),
    var(--background);
}

:root[data-theme="amateur-radio"] .site-header {
  position: relative;
  border-color: #6d6146;
  border-radius: var(--radius-large);
  background: linear-gradient(180deg, #29271e, #171711);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.06) inset,
    0 0.45rem 1rem rgb(0 0 0 / 0.36);
}

:root[data-theme="amateur-radio"] .site-header::after {
  position: absolute;
  right: 0.8rem;
  bottom: 0;
  left: 0.8rem;
  height: 0.18rem;
  background: repeating-linear-gradient(
    90deg,
    var(--radio-accent) 0 0.16rem,
    transparent 0.16rem 0.55rem
  );
  content: "";
  opacity: 0.72;
}

:root[data-theme="amateur-radio"] .overview {
  padding-top: 0.5rem;
}

:root[data-theme="amateur-radio"] .site-header h1,
:root[data-theme="amateur-radio"] .site-header .eyebrow {
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

:root[data-theme="amateur-radio"] .workspace-shell {
  border: 1px solid #655b43;
  border-radius: var(--radius-large);
  background: linear-gradient(145deg, #25231a, #12120e 74%);
  box-shadow:
    0 0 0 0.18rem #090a08,
    0 0.65rem 1.45rem rgb(0 0 0 / 0.4);
}

:root[data-theme="amateur-radio"] .workspace-tabs {
  border-bottom: 1px solid #5b5139;
  background: #12120e;
}

:root[data-theme="amateur-radio"] .workspace-tabs button,
:root[data-theme="amateur-radio"] .workspace-tabs [role="tab"] {
  border-color: #5e563f;
  border-radius: 0.16rem;
  background: linear-gradient(180deg, #343126, #191812);
  color: var(--muted);
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px #000;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.08) inset,
    0 0.18rem 0 #080906;
}

:root[data-theme="amateur-radio"] .workspace-tabs button:hover,
:root[data-theme="amateur-radio"] .workspace-tabs button:focus-visible,
:root[data-theme="amateur-radio"] .workspace-tabs [role="tab"]:hover,
:root[data-theme="amateur-radio"] .workspace-tabs [role="tab"]:focus-visible {
  border-color: var(--radio-accent);
  color: var(--text);
}

:root[data-theme="amateur-radio"] .workspace-tabs button[aria-selected="true"],
:root[data-theme="amateur-radio"] .workspace-tabs [role="tab"][aria-selected="true"] {
  border-color: var(--accent-strong);
  background: linear-gradient(180deg, #6c4d20, #342510);
  color: #fff4d2;
  box-shadow:
    0 0 0 1px rgb(255 208 120 / 0.14) inset,
    0 0 0.75rem rgb(217 154 62 / 0.18);
}

:root[data-theme="amateur-radio"] .workspace-deck {
  border-radius: 0 0 var(--radius-large) var(--radius-large);
  background: rgb(8 9 7 / 0.38);
}

:root[data-theme="amateur-radio"] [data-workspace-pane] {
  border-color: #4d4634;
  background: linear-gradient(180deg, rgb(36 34 24 / 0.72), rgb(17 16 12 / 0.74));
}

:root[data-theme="amateur-radio"] .panel {
  --panel-signal: var(--radio-accent);
  position: relative;
  border: 1px solid #5b5139;
  border-top: 0.22rem solid var(--panel-signal);
  border-radius: var(--radius-small);
  background:
    radial-gradient(circle at 0.55rem 0.55rem, #7a7159 0 0.08rem, #090a08 0.09rem 0.16rem, transparent 0.17rem),
    linear-gradient(155deg, #25231a, #15150f 72%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.04) inset,
    0 0.45rem 1rem rgb(0 0 0 / 0.3);
}

:root[data-theme="amateur-radio"] .scanner-controls-panel,
:root[data-theme="amateur-radio"] .recording-control-panel {
  --panel-signal: var(--radio-cyan);
}

:root[data-theme="amateur-radio"] .browser-audio-panel,
:root[data-theme="amateur-radio"] .recording-playback-panel {
  --panel-signal: var(--success);
}

:root[data-theme="amateur-radio"] .panel h2,
:root[data-theme="amateur-radio"] .panel h3,
:root[data-theme="amateur-radio"] .radio-field-groups h3 {
  color: #f5d494;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

:root[data-theme="amateur-radio"] .panel h2::before,
:root[data-theme="amateur-radio"] .panel h3::before {
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  content: "";
  background: var(--panel-signal);
  box-shadow: 0 0 0.45rem var(--panel-signal);
}

:root[data-theme="amateur-radio"] #radio-activity-panel {
  --panel-signal: var(--radio-accent);
  border: 1px solid #89806a;
  border-top: 0.3rem solid var(--radio-accent);
  background:
    linear-gradient(180deg, rgb(142 217 230 / 0.035), transparent 45%),
    var(--radio-bezel);
  box-shadow:
    0 0 0 0.3rem #28271f,
    0 0 0 0.38rem #080906,
    0 0.75rem 1.4rem rgb(0 0 0 / 0.45);
}

:root[data-theme="amateur-radio"] #radio-activity-panel h2 {
  color: var(--radio-cyan);
  text-shadow: 0 0 0.55rem rgb(142 217 230 / 0.35);
}

:root[data-theme="amateur-radio"] #radio-activity-panel .label,
:root[data-theme="amateur-radio"] #radio-activity-panel dt,
:root[data-theme="amateur-radio"] .panel-kicker,
:root[data-theme="amateur-radio"] .eyebrow {
  color: var(--radio-cyan);
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

:root[data-theme="amateur-radio"] #radio-activity-panel .value,
:root[data-theme="amateur-radio"] #radio-activity-panel dd,
:root[data-theme="amateur-radio"] #radio-activity-panel output,
:root[data-theme="amateur-radio"] .primary-value,
:root[data-theme="amateur-radio"] .technical-value,
:root[data-theme="amateur-radio"] .status-list dd {
  color: #ffd078;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  letter-spacing: 0.025em;
}

:root[data-theme="amateur-radio"] .radio-view-controls {
  border: 1px solid #5b5139;
  border-left: 0.3rem solid var(--radio-accent);
  border-radius: var(--radius-small);
  background: #12130f;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.035) inset;
}

:root[data-theme="amateur-radio"] .radio-field-groups {
  border-color: #4d4634;
  border-radius: var(--radius-small);
  background: var(--radio-soft);
  box-shadow: 0 0 0 1px #5b5139 inset;
}

:root[data-theme="amateur-radio"] button,
:root[data-theme="amateur-radio"] .button,
:root[data-theme="amateur-radio"] .primary-button,
:root[data-theme="amateur-radio"] .secondary-button {
  border-color: #655c45;
  border-radius: 0.16rem;
  background: linear-gradient(180deg, #343126, #191912);
  color: var(--text);
  font-weight: 720;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.08) inset,
    0 0.15rem 0 #080906;
}

:root[data-theme="amateur-radio"] button:hover,
:root[data-theme="amateur-radio"] .button:hover,
:root[data-theme="amateur-radio"] .primary-button:hover,
:root[data-theme="amateur-radio"] .secondary-button:hover {
  border-color: var(--radio-accent);
  background: linear-gradient(180deg, #4b402a, #251f14);
}

:root[data-theme="amateur-radio"] .primary-button {
  border-color: var(--accent-strong);
  background: linear-gradient(180deg, #805b24, #412e13);
  color: #fff6dc;
}

:root[data-theme="amateur-radio"] button:focus-visible,
:root[data-theme="amateur-radio"] .button:focus-visible,
:root[data-theme="amateur-radio"] .primary-button:focus-visible,
:root[data-theme="amateur-radio"] .secondary-button:focus-visible,
:root[data-theme="amateur-radio"] input:focus-visible,
:root[data-theme="amateur-radio"] select:focus-visible {
  outline-color: var(--focus);
  box-shadow: 0 0 0 0.18rem rgb(142 217 230 / 0.22);
}

:root[data-theme="amateur-radio"] input,
:root[data-theme="amateur-radio"] select,
:root[data-theme="amateur-radio"] textarea {
  border-color: #655c45;
  border-radius: 0.16rem;
  background: #090b09;
  color: #ffd078;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
}

:root[data-theme="amateur-radio"] .status,
:root[data-theme="amateur-radio"] [data-status] {
  border-color: #5b5139;
  background: #10110d;
  color: var(--muted);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

:root[data-theme="amateur-radio"] .status.connected,
:root[data-theme="amateur-radio"] .status.success,
:root[data-theme="amateur-radio"] [data-status="connected"],
:root[data-theme="amateur-radio"] [data-status="success"] {
  border-color: var(--success);
  color: var(--success);
}

:root[data-theme="amateur-radio"] .status.loading,
:root[data-theme="amateur-radio"] .status.warning,
:root[data-theme="amateur-radio"] [data-status="loading"],
:root[data-theme="amateur-radio"] [data-status="warning"] {
  border-color: var(--warning);
  color: var(--warning);
}

:root[data-theme="amateur-radio"] .status.error,
:root[data-theme="amateur-radio"] [data-status="error"] {
  border-color: var(--danger);
  color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="amateur-radio"] *,
  :root[data-theme="amateur-radio"] *::before,
  :root[data-theme="amateur-radio"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (forced-colors: active) {
  :root[data-theme="amateur-radio"] {
    --background: Canvas;
    --surface: Canvas;
    --surface-emphasis: Canvas;
    --text: CanvasText;
    --muted: CanvasText;
    --border: CanvasText;
    --accent: Highlight;
    --accent-strong: Highlight;
    --focus: Highlight;
    --radio-accent: Highlight;
    --radio-cyan: Highlight;
  }

  :root[data-theme="amateur-radio"] .workspace-shell,
  :root[data-theme="amateur-radio"] .workspace-tabs,
  :root[data-theme="amateur-radio"] .workspace-deck,
  :root[data-theme="amateur-radio"] [data-workspace-pane],
  :root[data-theme="amateur-radio"] .panel,
  :root[data-theme="amateur-radio"] #radio-activity-panel,
  :root[data-theme="amateur-radio"] .radio-view-controls,
  :root[data-theme="amateur-radio"] .radio-field-groups {
    background: Canvas;
    box-shadow: none;
  }

  :root[data-theme="amateur-radio"] .site-header::after,
  :root[data-theme="amateur-radio"] .panel h2::before,
  :root[data-theme="amateur-radio"] .panel h3::before {
    background: Highlight;
    color: Highlight;
  }
}