/* ════════════════════════════════════════
   APRS Frame Parser – style.css
   Dark theme, color-coded segments
   ════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0f1117;
  --surface:  #1a1d27;
  --surf2:    #22263a;
  --surf3:    #2a2f47;
  --border:   #2e3250;
  --text:     #cdd6f4;
  --muted:    #6c7086;
  --radius:   10px;
  --font:     'Segoe UI', system-ui, sans-serif;
  --mono:     'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;

  /* Segment colors – spread across full color wheel */
  --c-source:    #4f8ef7;   /* blue */
  --c-dest:      #c084fc;   /* violet */
  --c-path:      #94a3b8;   /* slate */
  --c-sep:       #4a4f6a;
  --c-dti:       #fb923c;   /* orange */
  --c-timestamp: #fbbf24;   /* amber */
  --c-lat:       #4ade80;   /* green */
  --c-lon:       #22d3ee;   /* cyan – clearly distinct from green lat */
  --c-sym-table: #818cf8;   /* indigo */
  --c-sym-code:  #a78bfa;   /* violet-purple */
  --c-cs:        #a3e635;   /* lime */
  --c-course:    #38bdf8;   /* sky blue */
  --c-speed:     #bef264;   /* lime-yellow */
  --c-altitude:  #facc15;   /* yellow – distinct from orange timestamp */
  --c-wx-dir:    #7dd3fc;   /* light sky */
  --c-wx-spd:    #bae6fd;
  --c-wx-gust:   #60a5fa;   /* blue */
  --c-wx-temp:   #f87171;   /* red */
  --c-wx-rain1:  #3b82f6;   /* blue */
  --c-wx-rain24: #2563eb;
  --c-wx-rainMn: #1d4ed8;
  --c-wx-hum:    #06b6d4;   /* darker cyan */
  --c-wx-baro:   #64748b;   /* slate */
  --c-wx-lum:    #fcd34d;   /* yellow */
  --c-wx-rawrain:#93c5fd;
  --c-wx-rad:    #f43f5e;   /* rose-red */
  --c-wx-sw:     #9ca3af;
  --c-msg-addr:  #f97316;   /* orange (who we message) */
  --c-msg-text:  #fde68a;   /* pale yellow (message body) */
  --c-msg-id:    #ef4444;   /* red (ID/ACK critical) */
  --c-msg-ack:   #86efac;   /* mint green (positive confirm) */
  --c-obj-name:  #fb923c;   /* orange */
  --c-obj-status:#fde68a;   /* pale yellow */
  --c-tele:      #fbbf24;   /* amber */
  --c-tele-bits: #f59e0b;   /* amber-dark */
  --c-phg:       #a78bfa;   /* violet */
  --c-comp-type: #c084fc;   /* violet */
  --c-comment:   #9ca3af;   /* slate */
  --c-nmea-type: #67e8f9;   /* cyan */
  --c-mice-dest: #c084fc;   /* violet (same as dest) */
  --c-mice-lon:  #22d3ee;   /* cyan (same as lon) */
  --c-mice-spd:  #bef264;   /* lime-yellow (same as speed) */
  --c-mice-crs:  #38bdf8;   /* sky blue (same as course) */
  --c-error:     #f87171;   /* red */
  --c-unknown:   #6b7280;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Header ──────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.logo { font-size: 20px; font-weight: 700; color: var(--c-dti); letter-spacing: .5px; }
.logo span { color: var(--c-lat); }
.badge-aprs {
  font-size: 11px; font-weight: 700; background: rgba(251,146,60,.15);
  color: var(--c-dti); border: 1px solid rgba(251,146,60,.3);
  border-radius: 20px; padding: 2px 10px; letter-spacing: .5px;
}

/* ── Layout ──────────────────────────────────────── */
.container { max-width: 1400px; margin: 0 auto; padding: 20px 24px; }

/* ── Input section ───────────────────────────────── */
.input-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.input-card h2 {
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px;
}
.input-row { display: flex; gap: 10px; align-items: flex-start; }
textarea {
  flex: 1;
  background: var(--surf2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 13px;
  resize: vertical;
  min-height: 72px;
  line-height: 1.6;
  transition: border-color .2s;
}
textarea:focus { outline: none; border-color: var(--c-dti); }
textarea::placeholder { color: var(--muted); }
.btn-parse {
  background: linear-gradient(135deg, var(--c-dti), #ea580c);
  border: none; color: #fff;
  border-radius: 8px; padding: 12px 24px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: opacity .2s;
  letter-spacing: .3px;
}
.btn-parse:hover { opacity: .85; }

/* Examples */
.examples { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.examples-label { color: var(--muted); font-size: 12px; align-self: center; }
.btn-example {
  background: var(--surf2); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 3px 10px;
  font-size: 11px; cursor: pointer; font-family: var(--mono);
  transition: background .15s;
}
.btn-example:hover { background: var(--surf3); border-color: var(--c-dti); }

/* ── Error banner ────────────────────────────────── */
.error-banner {
  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
  color: var(--c-error); font-size: 13px; display: flex; gap: 10px;
}

/* ── Type badge ──────────────────────────────────── */
.type-banner {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 18px; margin-bottom: 16px;
}
.type-icon { font-size: 22px; }
.type-text .type-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .7px; }
.type-text .type-val   { font-size: 16px; font-weight: 700; color: var(--c-dti); }

/* Coordinates */
.coord-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.coord-pill {
  background: var(--surf2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 12px; font-family: var(--mono);
  font-size: 12px;
}
.coord-pill .coord-l { color: var(--muted); margin-right: 4px; }
.coord-pill .coord-v { color: var(--c-lat); }
.coord-pill.lon .coord-v { color: var(--c-lon); }

/* ── Visual frame ────────────────────────────────── */
.frame-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
}
.frame-card h2 { font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; }
.frame-visual {
  font-family: var(--mono); font-size: 15px;
  line-height: 1.8; word-break: break-all;
  background: var(--surf2); border-radius: 8px; padding: 14px 16px;
}
.seg {
  border-radius: 3px; cursor: default;
  transition: filter .15s;
  padding: 1px 2px;
}
.seg:hover { filter: brightness(1.25); }
.seg.sep { color: var(--c-sep); }

/* ── Segment color classes ───────────────────────── */
.seg.source    { color: var(--c-source);    background: rgba(79,142,247,.12); }
.seg.dest      { color: var(--c-dest);      background: rgba(192,132,252,.12); }
.seg.path      { color: var(--c-path);      background: rgba(148,163,184,.10); }
.seg.dti       { color: var(--c-dti);       background: rgba(251,146,60,.15); font-weight: 700; border-radius: 4px; padding: 1px 5px; }
.seg.timestamp { color: var(--c-timestamp); background: rgba(251,191,36,.10); }
.seg.lat       { color: var(--c-lat);       background: rgba(74,222,128,.10); }
.seg.lon       { color: var(--c-lon);       background: rgba(34,211,238,.10); }  /* cyan */
.seg.sym-table { color: var(--c-sym-table); background: rgba(129,140,248,.12); }
.seg.sym-code  { color: var(--c-sym-code);  background: rgba(167,139,250,.12); }
.seg.cs        { color: var(--c-cs); }
.seg.course    { color: var(--c-course);    background: rgba(56,189,248,.10); }
.seg.speed     { color: var(--c-speed);     background: rgba(190,242,100,.08); }  /* lime-yellow */
.seg.altitude  { color: var(--c-altitude);  background: rgba(250,204,21,.10); }  /* yellow */
.seg.comp-type { color: var(--c-comp-type); }
.seg.phg       { color: var(--c-phg);       background: rgba(167,139,250,.10); }
.seg.wx-dir    { color: var(--c-wx-dir);    background: rgba(125,211,252,.10); }
.seg.wx-spd    { color: var(--c-wx-spd); }
.seg.wx-gust   { color: var(--c-wx-gust); }
.seg.wx-temp   { color: var(--c-wx-temp);   background: rgba(248,113,113,.10); }
.seg.wx-rain1  { color: var(--c-wx-rain1); }
.seg.wx-rain24 { color: var(--c-wx-rain24); }
.seg.wx-rainMn { color: var(--c-wx-rainMn); }
.seg.wx-hum    { color: var(--c-wx-hum);    background: rgba(6,182,212,.10); }   /* darker cyan */
.seg.wx-baro   { color: var(--c-wx-baro);   background: rgba(100,116,139,.10); }
.seg.wx-lum    { color: var(--c-wx-lum); }
.seg.wx-rawrain{ color: var(--c-wx-rawrain);}
.seg.wx-rad    { color: var(--c-wx-rad); }
.seg.wx-sw     { color: var(--c-wx-sw); }
.seg.msg-addr  { color: var(--c-msg-addr);  background: rgba(249,115,22,.12); }  /* orange */
.seg.msg-text  { color: var(--c-msg-text);  background: rgba(253,230,138,.08); } /* pale yellow */
.seg.msg-id    { color: var(--c-msg-id);    background: rgba(239,68,68,.12); font-weight: 600; } /* red */
.seg.msg-ack   { color: var(--c-msg-ack);   background: rgba(134,239,172,.12); font-weight: 700; }
.seg.obj-name  { color: var(--c-obj-name);  background: rgba(251,146,60,.12); }
.seg.obj-status{ color: var(--c-obj-status);}
.seg.tele      { color: var(--c-tele); }
.seg.tele-bits { color: var(--c-tele-bits); background: rgba(245,158,11,.10); font-weight: 600; }
.seg.comment   { color: var(--c-comment); }
.seg.nmea-type { color: var(--c-nmea-type); font-weight: 700; }
.seg.mice-dest { color: var(--c-mice-dest); background: rgba(192,132,252,.12); }
.seg.mice-lon    { color: var(--c-mice-lon);  background: rgba(34,211,238,.08); }  /* cyan */
.seg.mice-spd    { color: var(--c-mice-spd);  background: rgba(190,242,100,.08); } /* lime-yellow */
.seg.mice-crs    { color: var(--c-mice-crs);  background: rgba(56,189,248,.08); }
.seg.mice-device { color: #fb923c;            background: rgba(251,146,60,.10); }
.seg.device      { color: #fb923c;            background: rgba(251,146,60,.10); }
.seg.error     { color: var(--c-error);     background: rgba(248,113,113,.15); }
.seg.unknown   { color: var(--c-unknown); }

/* Cross-highlight: segment ↔ table row */
.seg.seg-hl            { filter: brightness(1.5) !important; outline: 1px solid currentColor; outline-offset: 1px; border-radius: 3px; }
.field-row.row-hl      { background: rgba(255,255,255,.07) !important; }

/* ── Legend ──────────────────────────────────────── */
.legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px;
}
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.legend-dot  { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ── Detail table ────────────────────────────────── */
.detail-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 16px;
}
.detail-card h2 {
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.group-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--muted);
  background: var(--surf2); padding: 6px 18px;
  border-bottom: 1px solid var(--border);
}
.field-row {
  display: grid;
  grid-template-columns: 220px 160px 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.field-row:hover { background: var(--surf2); }
.field-row:last-child { border-bottom: none; }
.field-row > div { padding: 9px 18px; font-size: 13px; }
.field-name  { color: var(--text); font-weight: 600; border-right: 1px solid var(--border); }
.field-raw   {
  font-family: var(--mono); font-size: 12px;
  border-right: 1px solid var(--border);
  word-break: break-all;
  display: flex; align-items: center;
}
.field-raw span { padding: 2px 6px; border-radius: 4px; }
.field-value { color: #e0e0e0; border-right: 1px solid var(--border); font-weight: 500; }
.field-desc  { color: var(--muted); font-size: 12px; }

/* Table header */
.table-header {
  display: grid;
  grid-template-columns: 220px 160px 1fr 1fr;
  background: var(--surf3);
  border-bottom: 1px solid var(--border);
}
.table-header > div {
  padding: 8px 18px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); border-right: 1px solid var(--border);
}
.table-header > div:last-child { border-right: none; }

/* ── Tooltip on hover (seg) ──────────────────────── */
.seg[data-tip]:hover::after {
  content: attr(data-tip);
  position: fixed;
  background: var(--surf3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  font-family: var(--font);
  padding: 6px 10px;
  max-width: 280px;
  pointer-events: none;
  z-index: 9999;
  white-space: pre-wrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* ── Placeholder ─────────────────────────────────── */
.placeholder {
  text-align: center; color: var(--muted);
  padding: 60px 20px; font-size: 15px;
}
.placeholder .big { font-size: 48px; margin-bottom: 12px; }
.placeholder p { max-width: 400px; margin: 0 auto; line-height: 1.7; }

/* ── APRS symbol icons ───────────────────────────────────── */
.aprs-sym-icon {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: inline-block;
  flex-shrink: 0;
  border-radius: 3px;
  vertical-align: middle;
}
.aprs-map-icon { background: none !important; border: none !important; }
.aprs-map-icon .aprs-sym-icon { filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  .field-row, .table-header {
    grid-template-columns: 1fr 1fr;
  }
  .field-desc, .table-header > div:last-child { display: none; }
}
@media (max-width: 600px) {
  .field-row, .table-header { grid-template-columns: 1fr; }
  .field-name { border-right: none; border-bottom: 1px solid var(--border); }
  .field-raw  { border-right: none; border-bottom: 1px solid var(--border); }
  .field-value{ border-right: none; }
  .table-header > div:nth-child(n+2) { display: none; }
}