/* Meteor Online 0.2 – shared color palette and section layout.
 * Based on the user's AIS Online reference: olive panels, cream text,
 * green instruments, square controls. No external fonts or assets.
 */
:root {
  color-scheme: dark;
  --page: #161713;
  --shell: #393c30;
  --panel: #2b2e25;
  --input: #11150e;
  --border: #747766;
  --text: #e8e4c6;
  --muted: #c6c3ab;
  --green: #00ff00;
  --button: #e8e4c6;
  --button-text: #272b22;
  --example: #858548;
  --danger: #b94e43;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 14px;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font:
    16px/1.6 Arial,
    Helvetica,
    sans-serif;
}
a {
  color: inherit;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--green);
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
select,
summary {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.48;
}
button {
  background: var(--button);
  color: var(--button-text);
  border: 1px solid #a6a78c;
  padding: 11px 16px;
  font-weight: 700;
  min-height: 47px;
  border-radius: 0;
}
button:hover:enabled {
  background: #f7f2d4;
}
button.example {
  background: var(--example);
  border-color: #92925a;
}
button.danger {
  background: var(--danger);
  color: #fff;
  border-color: #c3776f;
}
button.danger:hover:enabled {
  background: #cd6054;
}
label {
  display: block;
  font-weight: 700;
}
input[type="text"],
input[type="number"],
select,
textarea {
  width: 100%;
  margin-top: 7px;
  min-height: 47px;
  padding: 10px 13px;
  color: var(--green);
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 0;
}
input::placeholder,
textarea::placeholder {
  color: #9c9f8e;
  opacity: 1;
}
textarea {
  resize: vertical;
  font:
    14px/1.5 "Courier New",
    monospace;
}
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green);
}
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.app-shell {
  max-width: 1240px;
  margin: 18px auto;
  padding: 19px 20px;
  background: var(--shell);
  border: 1px solid var(--border);
}
.site-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  padding: 0 4px 24px;
  margin-bottom: 16px;
}
.brand {
  font-size: 44px;
  line-height: 1.3;
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 2px;
}
.brand span {
  color: var(--green);
}
.site-header p {
  margin: 13px 0 0;
}
.header-status {
  flex-shrink: 0;
  text-align: right;
  padding-top: 2px;
}
#utcClock {
  font-size: 24px;
}
.header-status nav {
  color: var(--green);
  margin-top: 6px;
  font:
    14px/1.8 "Courier New",
    monospace;
}
.header-status nav a {
  text-decoration: none;
}
.panel {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 16px;
  margin: 14px 0;
  scroll-margin-top: 14px;
}
h1,
h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 17px;
}
p {
  margin: 12px 0;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 17px;
}
.section-title h1,
.section-title h2 {
  margin: 0;
}
.green {
  color: var(--green);
}
.mono {
  font-family: "Courier New", monospace;
  font-size: 14px;
}
.hint {
  font-size: 14px;
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.65;
}
.signal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
}
.signal-grid canvas {
  display: block;
  width: 100%;
  height: 180px;
  background: #071006;
  border: 1px solid #444d38;
}
.frequency-scale {
  display: flex;
  justify-content: space-between;
  line-height: 1.5;
  font-size: 13px;
}
.signal-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 8px;
}
.receiver-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.85fr 1.15fr;
  gap: 15px;
}
.file-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 14px;
  margin-top: 16px;
  border: 1px dashed var(--border);
  background: #23271e;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.file-area span {
  font-size: 14px;
  color: var(--muted);
}
.file-area.drag {
  border: 1px solid var(--green);
  background: #253a20;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
#rateLabel {
  max-width: 360px;
  margin-top: 12px;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 20px 0 12px;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
details {
  margin-top: 16px;
}
summary {
  color: var(--text);
  font-weight: 700;
}
details[open] summary {
  margin-bottom: 14px;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.settings-grid .check {
  margin: 8px 0;
}
.progress-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 17px 0 4px;
}
progress {
  appearance: none;
  flex: 1;
  min-width: 20px;
  height: 6px;
  border: 1px solid #d9d9c9;
  background: #e7e6dc;
}
progress::-webkit-progress-bar {
  background: #e7e6dc;
}
progress::-webkit-progress-value {
  background: #14891d;
}
progress::-moz-progress-bar {
  background: #14891d;
}
#percent {
  width: 60px;
  text-align: right;
}
#status {
  margin: 8px 0;
}
.metrics {
  display: flex;
  gap: 12px 32px;
  flex-wrap: wrap;
  color: var(--text);
}
.metrics strong {
  color: var(--green);
  font-weight: 400;
}
.station-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 14px;
}
.locator-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}
.locator-row label {
  flex: 1;
  min-width: 190px;
}
.next-pass {
  display: grid;
  gap: 7px;
  background: #1c2519;
  border-left: 3px solid var(--green);
  padding: 16px 18px;
  margin: 18px 0 10px;
}
.next-pass strong {
  font-size: 22px;
  font-weight: 400;
}
#nextPassDetail {
  color: var(--text);
}
.table-scroll {
  width: 100%;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-top: 14px;
}
caption {
  text-align: left;
  color: var(--muted);
  font-size: 14px;
  padding-bottom: 10px;
}
th,
td {
  padding: 11px 13px;
  border: 1px solid #686d59;
  text-align: left;
  vertical-align: top;
}
th {
  background: #3a3f2f;
  font-weight: 700;
  white-space: nowrap;
}
tbody tr:nth-child(even) {
  background: #303529;
}
#passTable td {
  white-space: nowrap;
}
#passTable tbody tr:first-child {
  color: #f1efd9;
}
.image-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 17px;
}
.image-controls > label:first-child {
  min-width: 230px;
  flex: 1;
}
.image-controls .check {
  min-height: 47px;
}
.canvas-wrap {
  overflow: auto;
  max-height: 800px;
  background: #080c06;
  border: 1px solid var(--border);
}
#image {
  display: block;
  width: 100%;
  height: auto;
}
.image-empty {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #616651;
  background: var(--input);
  color: var(--muted);
  text-align: center;
  padding: 16px;
}
.image-empty strong {
  color: var(--green);
  font:
    16px "Courier New",
    monospace;
}
#log {
  min-height: 130px;
  max-height: 250px;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 14px;
  background: var(--input);
  border: 1px solid #616651;
  font:
    14px/1.7 "Courier New",
    monospace;
  color: var(--green);
  margin-bottom: 0;
}
.help ol {
  padding-left: 24px;
}
.help li {
  margin: 8px 0;
}
footer {
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 1000px) {
  .app-shell {
    margin: 0;
    border-left: none;
    border-right: none;
  }
  .site-header {
    flex-wrap: wrap;
  }
  .header-status {
    text-align: left;
  }
  .station-grid {
    grid-template-columns: 1fr 1fr;
  }
  .receiver-grid {
    grid-template-columns: 1fr 1fr;
  }
  .receiver-grid > label:last-child {
    grid-column: 1 / -1;
  }
  .signal-grid {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
}
@media (max-width: 600px) {
  .app-shell {
    padding: 14px 10px;
  }
  .brand {
    font-size: 34px;
  }
  .site-header p {
    font-size: 14px;
  }
  .panel {
    padding: 13px;
  }
  .signal-grid {
    grid-template-columns: 1fr;
  }
  .signal-grid > div:last-child {
    display: none;
  }
  .station-grid,
  .receiver-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .receiver-grid > label:last-child {
    grid-column: auto;
  }
  .section-title {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .button-row > button {
    flex: 1 1 auto;
  }
  .metrics {
    gap: 8px 20px;
  }
  .next-pass strong {
    font-size: 19px;
  }
  .locator-row button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* TMC-specific instruments and responsive controls. */
:root{--green:#00ff00}h1{font-size:44px;letter-spacing:2px;line-height:1.1;margin:3px 0 16px}h1 span{color:var(--green);font-weight:400}h2{font-size:16px;margin:0 0 15px;line-height:1.5}p{margin:12px 0}.site-header{padding:3px 4px 14px;border-bottom:1px solid var(--border);margin-bottom:16px;gap:20px}.site-header p{margin:12px 0 10px}.clock{text-align:right;font-size:23px;white-space:nowrap;padding-top:1px}.clock small{font:14px 'Courier New',monospace;color:var(--green)}.panel{margin:14px 0 0;padding:16px;border:1px solid var(--border);background:var(--panel)}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}.section-head h2{margin:0}.section-foot{display:flex;justify-content:space-between;color:var(--green);font-size:14px;gap:10px;margin-top:8px}.green{color:var(--green)}.mono{font-family:'Courier New',monospace;font-size:14px}.muted,.note{color:var(--muted)}.small{font-size:14px}.controls{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.05fr;gap:15px}.controls.secondary{grid-template-columns:1.5fr 1fr 2.05fr;margin-top:12px}.hint{align-self:end;padding:12px 0;color:var(--green);font-family:'Courier New',monospace;font-size:14px}.file-zone{display:flex;justify-content:space-between;gap:14px;border:1px dashed var(--border);padding:16px;cursor:pointer;background:#323629}.file-zone:hover,.file-zone.drag{border-color:var(--green)}.file-zone input{position:absolute;width:1px;height:1px;opacity:0}.file-zone:focus-within{outline:2px solid var(--green)}.file-zone span{color:var(--muted);overflow-wrap:anywhere;font-weight:400}.buttons{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.progress-row{display:flex;align-items:center;gap:20px}.progress-row progress{width:100%;height:8px;accent-color:var(--green)}.progress-row span{min-width:48px;text-align:right}.stats{display:flex;gap:8px 23px;flex-wrap:wrap}.stats b{font-weight:400;color:var(--green)}.station-grid{display:grid;grid-template-columns:1.1fr 1fr 1.1fr 1fr;gap:16px}.station-grid small{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}.station-grid strong{display:block;font-size:20px;color:var(--green);font-weight:400}.station-grid .mono{font-size:18px}.traffic-tools{display:flex;gap:10px;margin-bottom:15px}.traffic-tools input{flex:1;min-width:100px;background:var(--input);color:var(--text);border:1px solid var(--border);padding:12px;font:inherit;border-radius:0}.traffic-tools select{width:225px;margin:0}.check{display:flex;gap:10px;align-items:center;font-weight:400}.check input{flex-shrink:0}.empty{padding:30px 20px;border:1px dashed #626951;color:var(--green);text-align:center;font:16px 'Courier New',monospace}.empty p{font:16px/1.6 Arial,sans-serif;color:var(--muted);max-width:800px;margin:14px auto 0}.message{border:1px solid var(--border);margin-top:12px;background:#24291f}.message header{display:flex;justify-content:space-between;padding:10px 14px;background:#343c2c;gap:12px}.message .road{font-weight:700;color:var(--green)}.message .content{padding:12px 14px}.message h3{font-size:18px;font-weight:400;margin:0 0 7px;color:var(--text)}.message p{margin:5px 0}.message .meta{font-size:14px;color:var(--muted)}.message details{margin-top:10px;font-size:14px}.message pre{white-space:pre-wrap;overflow-wrap:anywhere}.badge{display:inline-block;padding:1px 7px;border:1px solid var(--border);font:13px/1.6 'Courier New',monospace}.badge.demo{border-color:#cabb61;color:#efdf9e}.warn{color:#ffd18b}#spectrum{width:100%;height:155px;display:block;background:#061006}.axis{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:4px}#log{max-height:300px;overflow:auto;font:13px/1.7 'Courier New',monospace;white-space:pre-wrap}details summary{font-weight:700;padding:5px 0}details+details{margin-top:8px}li{margin:10px 0}footer{display:flex;justify-content:space-between;gap:15px;margin-top:20px;font-size:13px;color:var(--muted)}code{overflow-wrap:anywhere}button:disabled{opacity:.48}#status{overflow-wrap:anywhere}
@media(max-width:900px){.controls{grid-template-columns:1fr 1fr}.controls.secondary{grid-template-columns:1fr 1fr}.hint{grid-column:1/-1}.station-grid{grid-template-columns:1fr 1fr}.traffic-tools{flex-wrap:wrap}.traffic-tools input{flex-basis:100%}.site-header{flex-wrap:wrap}.clock{text-align:left}.file-zone{flex-direction:column}.section-head{flex-wrap:wrap}footer{flex-direction:column}}
@media(max-width:540px){.app-shell{margin:0;padding:12px 10px;border:0}.panel{padding:12px}.controls,.controls.secondary,.station-grid{grid-template-columns:1fr}h1{font-size:36px}.clock{font-size:19px}.section-foot{flex-direction:column}.axis{font-size:10px}.traffic-tools select{width:100%}.check{align-items:flex-start}.buttons button{flex:1}.station-grid{gap:12px}.section-head>span{font-size:12px}}

/* Static station reference: editable in data/stations.json. */
.station-overview .section-head { flex-wrap: wrap; }
.station-list-link {
  display: inline-block;
  padding: 11px 16px;
  border: 1px solid #a6a78c;
  background: var(--button);
  color: var(--button-text);
  font-weight: 700;
  text-decoration: none;
}
.station-list-link:hover { background: #f7f2d4; color: var(--button-text); }
.station-region { margin-top: 24px; }
.station-region h3 { margin: 0 0 10px; font-size: 17px; color: var(--green); }
.station-table-scroll { overflow-x: auto; }
.station-frequency-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.station-frequency-table th,
.station-frequency-table td {
  padding: 9px 11px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.station-frequency-table thead { background: #353b2d; }
.station-frequency-table tbody th { width: 35%; font-weight: 400; }
.station-frequency-table .station-qrg { width: 17%; color: var(--green); font-family: 'Courier New', monospace; white-space: nowrap; }
.station-source { margin-top: 7px; font-size: 14px; color: var(--muted); }
.station-sources { margin-top: 22px; }
@media (max-width: 540px) {
  .station-frequency-table { min-width: 510px; }
  .station-list-link { width: 100%; overflow-wrap: anywhere; }
}