/* ============================================================
   Antenna Demo — dish.css
   The dish module (dish.js). Every rule is scoped under .ant-dish; the
   shared kit (sidebar, cards, controls, tiles, stage, view tabs, canvases,
   the three.js wrap and the cut cards) comes from style.css under
   .ant-module. Every color is an --ece-* token.
   ============================================================ */

/* ── Inputs: the radius is the emphasized one (the reading's most common error is r vs D) ── */
.ant-dish .radius-field {
  margin: -2px -5px 0; padding: 7px 8px 8px;
  border-radius: var(--ece-radius-chip);
  background: rgb(var(--ece-accent-lt-rgb) / 0.3);
  border: 1px solid rgb(var(--ece-accent-rgb) / 0.3);
}
.ant-dish .r-label { font-weight: 600; color: var(--ece-ink); }
.ant-dish .r-label b { color: var(--ece-accent-dk); font-size: 15px; font-style: italic; }
.ant-dish .num-input.r-input { border-color: var(--ece-accent); color: var(--ece-accent-dk); }
.ant-dish .num-input.r-input:focus { border-color: var(--ece-accent-dk); }
.ant-dish .diam-line label { font-size: 12px; color: var(--ece-ink-3); }
.ant-dish .num-input.d-input { width: 66px; font-size: 12.5px; font-weight: 500; color: var(--ece-ink-3); }

.ant-dish .ideal-tag { display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 600; color: transparent; }
.ant-dish .ideal-tag.on { color: var(--ece-ok); }
.ant-dish .slider-ends { display: flex; justify-content: space-between; margin-top: -3px; font-size: 10.5px; color: var(--ece-ink-3); }

.ant-dish .preset-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 6px; }
.ant-dish .preset-row .preset-btn { min-height: 30px; padding: 4px 6px; font-size: 12.5px; white-space: nowrap; }
.ant-dish .preset-row .preset-btn.active { background: var(--ece-brand); border-color: var(--ece-brand); color: var(--ece-paper); }
.ant-dish .double-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ece-ink-3); }
.ant-dish .dbl-btn { min-height: 26px; padding: 3px 12px; font-size: 12.5px; font-family: var(--ece-font-mono); }

/* ── Readouts ── */
.ant-dish .metric-sub { display: block; margin-top: 1px; font-size: 10.5px; line-height: 1.25; color: var(--ece-ink-3); white-space: normal; }
.ant-dish .metric-row.two .metric-sub { text-wrap: balance; }
.ant-dish .metric-r .metric-val { color: var(--ece-accent-dk); }
.ant-dish .gain-tile { padding: 6px 8px 7px; }
.ant-dish .gain-tile .metric-label { font-size: 12.5px; color: var(--ece-ink-2); }
.ant-dish .gain-tile .metric-label b { color: var(--ece-accent-dk); font-style: italic; }
.ant-dish .gain-tile .metric-val { display: block; font-size: 28px; line-height: 1.15; color: var(--ece-ink); }
.ant-dish .gain-tile .metric-sub { font-family: var(--ece-font-mono); }
.ant-dish .metric-row.two .metric-val { font-size: 16px; }
.ant-dish .metric-row.two .metric-val.long { font-size: 13.5px; }
/* λ needs up to 9 characters (0.01034 m): its tile gets the extra width */
.ant-dish .metric-row.three { grid-template-columns: 1.5fr 1fr 1fr; }
.ant-dish .metric-row.three .metric-val { font-size: 15px; }
.ant-dish .rd-hint {
  padding: 6px 8px; font-size: 12px; line-height: 1.38; color: var(--ece-ink-2);
  border-left: 3px solid var(--ece-accent);
  background: rgb(var(--ece-accent-lt-rgb) / 0.22);
  border-radius: 0 var(--ece-radius-chip) var(--ece-radius-chip) 0;
}
.ant-dish .rd-hint b { color: var(--ece-accent-dk); }

/* ── Stage ── */
.ant-dish .mode-seg .ece-segment,
.ant-dish .span-seg .ece-segment,
.ant-dish .bright-seg .ece-segment { font-size: 13px; padding: 4px 12px; }
.ant-dish .bright-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ece-ink-2); }
.ant-dish .play-btn { min-width: 64px; min-height: 28px; padding: 3px 10px; }
.ant-dish .speed-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ece-ink-2); }
.ant-dish .speed-ctl input[type="range"] { width: 110px; }
.ant-dish .view-caption { flex-shrink: 0; max-width: 1100px; padding: 0 6px; font-size: 13px; line-height: 1.45; color: var(--ece-ink-2); }
.ant-dish .gain-notes { font-size: 12px; line-height: 1.4; color: var(--ece-ink-3); }
.ant-dish .gain-notes span { display: block; }
.ant-dish .beam-status { font-family: var(--ece-font-mono); font-size: 12.5px; color: var(--ece-ink-3); }

@media (max-height: 860px) {
  .ant-dish .gain-tile .metric-val { font-size: 24px; }
  .ant-dish .view-caption { font-size: 12.5px; line-height: 1.38; }
}