/*
 * HR4NT Propagation Forge
 * Space-age console styling with LCARS influence: elbow frames, block bars with
 * rounded caps, condensed uppercase labels.
 *
 * Two views share one geometry. The default is BRIGHT, per the site standard.
 * "Shack mode" (.pf-shack) is the black LCARS console for a display left running.
 * Every text/background pair is chosen for contrast in both.
 *
 * Everything is scoped to .pf-root so nothing leaks into the theme.
 */

.pf-root{
  /* structure */
  --bg:#eef2f7;
  --panel:#ffffff;
  --panel-2:#f6f9fc;
  --ink:#0f1e30;
  --ink-soft:#4a6076;
  --line:#d3dfeb;
  --radius:22px;

  /* LCARS block colors - bright view keeps them saturated on white */
  --lc-orange:#d1590a;
  --lc-amber:#b8790b;
  --lc-lilac:#5b5bd6;
  --lc-mauve:#9a4a9a;
  --lc-ice:#1f6f9c;
  --bar-ink:#ffffff;          /* text that sits ON a color bar */

  --accent:#d1590a;
  --accent-soft:#fdf0e7;

  --good:#15803d; --good-bg:#e6f5ec;
  --fair:#9a6206; --fair-bg:#fdf5e3;
  --poor:#b3221c; --poor-bg:#fdeceb;

  /* map */
  --sea:#cfe0f0; --land:#9db8a6; --night:#0d1e33; --map-ink:#0f1e30;

  --shadow:0 1px 2px rgba(12,30,52,.06), 0 6px 18px rgba(12,30,52,.07);
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --cond:"Antonio","Oswald","Arial Narrow","Helvetica Neue",Arial,sans-serif;

  background:var(--bg);
  color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}

/* Shack mode: a Strange New Worlds bridge console rather than a TNG panel.
   Backlit glass, hairline rules, restrained cyan with amber for anything urgent. */
.pf-root.pf-shack{
  --bg:#02060c;
  --panel:#070d16;
  --panel-2:#0b131f;
  --ink:#dbe9f7;
  --ink-soft:#7d99b4;
  --line:rgba(79,214,232,.16);

  --lc-orange:#ffb95a;
  --lc-amber:#ffd79a;
  --lc-lilac:#8fb6ff;
  --lc-mauve:#b79cff;
  --lc-ice:#4fd6e8;
  --bar-ink:#02080c;

  --accent:#4fd6e8;
  --accent-2:#ffb95a;
  --accent-soft:rgba(79,214,232,.10);

  --good:#5fe3b0; --good-bg:rgba(95,227,176,.10);
  --fair:#ffcf7a; --fair-bg:rgba(255,207,122,.10);
  --poor:#ff8a7a; --poor-bg:rgba(255,138,122,.10);

  --sea:#030a13; --land:#12313a; --night:#000305; --map-ink:#8fd8e6;

  --glow:0 0 18px rgba(79,214,232,.16);
  --shadow:0 0 0 1px rgba(79,214,232,.10), 0 0 22px rgba(2,20,30,.7);
}
.pf-root{ --accent-2:var(--accent); --glow:none; }

/* glass panels with a lit top edge */
.pf-root.pf-shack .card,
.pf-root.pf-shack .verdict,
.pf-root.pf-shack .clock,
.pf-root.pf-shack .brand>div{
  background:linear-gradient(180deg, rgba(79,214,232,.05), rgba(3,10,18,0) 42%), var(--panel);
  border-color:var(--line);
}
.pf-root.pf-shack .card{ box-shadow:var(--shadow), var(--glow); }

/* header bars: a lit rule under a soft wash, not a slab of color */
.pf-root.pf-shack .card>h3{
  background:linear-gradient(180deg, rgba(79,214,232,.16), rgba(79,214,232,.04));
  color:var(--ink);
  border-bottom:1px solid var(--accent);
  text-shadow:0 0 12px rgba(79,214,232,.5);
}
.pf-root.pf-shack .card>h3::before{ background:var(--accent); opacity:.85; width:4px; }
.pf-root.pf-shack .card>h3::after{ left:10px; width:2px; background:var(--accent); opacity:.5; }
.pf-root.pf-shack .card-map>h3,
.pf-root.pf-shack .cards>.card:nth-child(1)>h3,
.pf-root.pf-shack .cards>.card:nth-child(2)>h3,
.pf-root.pf-shack .cards>.card:nth-child(3)>h3,
.pf-root.pf-shack .cards>.card:nth-child(4)>h3,
.pf-root.pf-shack .cards>.card:nth-child(5)>h3,
.pf-root.pf-shack .cards>.card:nth-child(6)>h3{
  background:linear-gradient(180deg, rgba(79,214,232,.16), rgba(79,214,232,.04));
}

.pf-root.pf-shack .brand-elbow{
  background:linear-gradient(180deg,var(--accent),rgba(79,214,232,.35));
  box-shadow:0 0 22px rgba(79,214,232,.3);
}
.pf-root.pf-shack .verdict::before{
  background:linear-gradient(180deg,var(--accent-2),rgba(255,185,90,.25));
  box-shadow:0 0 18px rgba(255,185,90,.35);
}
.pf-root.pf-shack .tile{
  background:linear-gradient(180deg, rgba(79,214,232,.045), rgba(3,10,18,0));
  border-color:var(--line);
}
.pf-root.pf-shack .tile .val{ text-shadow:0 0 16px rgba(79,214,232,.35); }
.pf-root.pf-shack .clock b{ text-shadow:0 0 14px rgba(79,214,232,.4); }
.pf-root.pf-shack .modebtn{
  background:transparent;border:1px solid var(--accent);color:var(--accent);
  box-shadow:inset 0 0 18px rgba(79,214,232,.10);
}
.pf-root.pf-shack .qth button{
  background:linear-gradient(180deg,var(--accent),rgba(79,214,232,.55));color:var(--bar-ink);
  box-shadow:0 0 16px rgba(79,214,232,.25);
}
.pf-root.pf-shack .qth .locbtn{
  background:transparent;color:var(--accent);border:1px solid var(--line);box-shadow:none;
}
.pf-root.pf-shack .drawer{ border-left-color:var(--accent); }
.pf-root.pf-shack .dclose{
  background:transparent;border:1px solid var(--accent);color:var(--accent);
}

.pf-root, .pf-root *{box-sizing:border-box}
.pf-root .wrap{max-width:1180px;margin:0 auto;padding:20px 16px 48px}

.pf-root .screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================ header ============================ */
.pf-root .top{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.pf-root .brand{display:flex;align-items:stretch;gap:0;min-width:0}

/* the LCARS elbow: a thick bar that turns a corner */
.pf-root .brand-elbow{
  flex:none;width:52px;align-self:stretch;min-height:52px;
  background:var(--lc-orange);
  border-radius:var(--radius) 0 0 var(--radius);
}
.pf-root .brand>div{
  background:var(--panel);border:1px solid var(--line);border-left:0;
  border-radius:0 var(--radius) var(--radius) 0;
  padding:8px 22px 9px 18px;display:flex;flex-direction:column;justify-content:center;
}
.pf-root .brand h2{
  margin:0;font-family:var(--cond);font-size:23px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:1.1;
}
.pf-root .brand p{margin:2px 0 0;font-size:12px;color:var(--ink-soft);letter-spacing:.02em}

.pf-root .clocks{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.pf-root .clock{
  background:var(--panel);border:1px solid var(--line);
  border-radius:6px 16px 16px 6px;padding:6px 14px;text-align:center;min-width:76px;
}
.pf-root .clock b{
  display:block;font-family:var(--cond);font-size:20px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;line-height:1.15;color:var(--accent);
}
.pf-root .clock span{
  display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:1px;
}
.pf-root .modebtn{
  background:var(--lc-lilac);border:0;color:var(--bar-ink);
  border-radius:6px 18px 18px 6px;padding:0 18px;min-height:44px;
  font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;cursor:pointer;
}
.pf-root .modebtn:hover{filter:brightness(1.12)}
.pf-root .modebtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ============================ notices ============================ */
.pf-root .pf-notice{
  display:none;margin-bottom:14px;padding:11px 16px;
  background:var(--fair-bg);color:var(--fair);
  border-left:6px solid var(--fair);border-radius:0 14px 14px 0;
  font-size:13.5px;font-weight:600;
}

/* ============================ verdict ============================ */
.pf-root .verdict{
  background:var(--panel);border:1px solid var(--line);border-left:0;
  border-radius:0 var(--radius) var(--radius) 0;
  padding:17px 20px 17px 24px;margin-bottom:16px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.pf-root .verdict::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--lc-orange);
}
.pf-root .verdict h3{
  margin:0 0 6px;font-family:var(--cond);font-size:21px;font-weight:700;
  letter-spacing:.055em;text-transform:uppercase;color:var(--ink);line-height:1.2;
}
.pf-root .verdict p{margin:0;color:var(--ink-soft);font-size:14.5px}
.pf-root .verdict .stamp{
  font-size:11px;color:var(--ink-soft);margin-top:10px;display:block;
  font-family:var(--mono);letter-spacing:.02em;
}

/* ============================ cards ============================ */
.pf-root .card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.pf-root .card>h3{
  margin:0;padding:10px 18px;
  font-family:var(--cond);font-size:14px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;
  background:var(--lc-ice);color:var(--bar-ink);
  border-radius:0;position:relative;
}
/* LCARS index block at the left end of the bar. A solid element, not a cut-out. */
.pf-root .card>h3::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:34px;
  background:var(--bar-ink);opacity:.22;
}
.pf-root .card>h3::after{
  content:"";position:absolute;left:38px;top:0;bottom:0;width:6px;
  background:var(--bar-ink);opacity:.22;
}
.pf-root .card .body{padding:16px}

/* each panel gets its own LCARS color, the way a real console is coded */
.pf-root .card-map>h3{background:var(--lc-orange)}
.pf-root .cards>.card:nth-child(1)>h3{background:var(--lc-amber)}
.pf-root .cards>.card:nth-child(2)>h3{background:var(--lc-orange)}
.pf-root .cards>.card:nth-child(3)>h3{background:var(--lc-lilac)}
.pf-root .cards>.card:nth-child(4)>h3{background:var(--lc-mauve)}

.pf-root .card-map{margin-bottom:16px}
/* Flex, not grid: with six panels possible and any of them switchable off, grid
   leaves a final row stranded on the left. Flex rows fill edge to edge and a short
   final row centers, which is the house rule. */
.pf-root .cards{
  display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;justify-content:center;
}
.pf-root .cards>.card{display:flex;flex-direction:column;flex:1 1 300px;min-width:0}
.pf-root .cards>.card .body{flex:1}

/* ============================ map ============================ */
.pf-root .mapbox{position:relative;line-height:0;background:var(--sea);padding:6px 0}
.pf-root .mapsvg{position:relative}
.pf-root .mapbox svg{display:block;width:100%;height:auto}
.pf-root .maplegend{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  padding:12px;border-top:1px solid var(--line);line-height:1.4;background:var(--panel-2);
}
.pf-root .key{
  display:inline-flex;align-items:center;gap:7px;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);
  background:var(--panel);border:1px solid var(--line);
  border-radius:4px 12px 12px 4px;padding:4px 12px;white-space:nowrap;
}
.pf-root .sw{width:11px;height:11px;border-radius:2px;flex:none}
.pf-root .sw-day{background:var(--land)}
.pf-root .sw-night{background:var(--night);border:1px solid var(--line)}
.pf-root .sw-gray{background:#fbbf24}
.pf-root .sw-sun{background:#fde047;border-radius:50%}

/* ============================ band table ============================ */
.pf-root table{width:100%;border-collapse:collapse}
.pf-root th,.pf-root td{
  padding:9px 5px;text-align:center;font-size:13.5px;
  border-bottom:1px solid var(--line);color:var(--ink);
}
.pf-root th{
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;
}
.pf-root th.th-band{text-align:left}
.pf-root tbody tr:last-child td{border-bottom:0}
.pf-root td.bandname{
  text-align:left;font-family:var(--cond);font-size:15px;font-weight:700;
  letter-spacing:.06em;white-space:nowrap;
}
.pf-root .pill{
  display:inline-block;min-width:58px;padding:4px 10px;
  border-radius:3px 11px 11px 3px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;
}
.pf-root .p-good{background:var(--good-bg);color:var(--good)}
.pf-root .p-fair{background:var(--fair-bg);color:var(--fair)}
.pf-root .p-poor{background:var(--poor-bg);color:var(--poor)}
.pf-root .p-closed{background:var(--panel-2);color:var(--ink-soft)}

/* ============================ tiles ============================ */
.pf-root .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.pf-root .tile{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:4px 16px 16px 4px;padding:11px 10px 12px;text-align:center;
  cursor:pointer;font:inherit;color:var(--ink);position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  transition:border-color .16s,transform .16s,background .16s;
}
.pf-root .tile:hover{border-color:var(--accent);transform:translateY(-1px)}
.pf-root .tile:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pf-root .tile .lab{
  display:block;width:100%;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;line-height:1.3;
}
.pf-root .tile .val{
  display:block;width:100%;font-family:var(--cond);font-size:30px;font-weight:700;
  line-height:1.1;margin:5px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--accent);
}
.pf-root .tile .val .u{font-size:12px;font-weight:700;letter-spacing:.06em}
.pf-root .tile .st{
  display:block;width:100%;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;line-height:1.35;margin-top:auto;padding-top:3px;
}
.pf-root .tile .hint{
  position:absolute;top:6px;right:9px;font-size:10px;color:var(--ink-soft);
  opacity:.65;font-weight:700;
}
.pf-root .s-good{color:var(--good)}
.pf-root .s-fair{color:var(--fair)}
.pf-root .s-poor{color:var(--poor)}
.pf-root .spark{display:block;width:100%;height:18px;margin:2px 0 4px;overflow:visible}

/* small square "explain" buttons in the band table */
.pf-root td .tile{
  padding:3px 0;min-width:26px;border-radius:3px 10px 10px 3px;
  font-weight:700;font-size:12px;color:var(--ink-soft);
}

/* ============================ location bar ============================ */
.pf-root .qthbar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  background:var(--panel);border:1px solid var(--line);border-left:0;
  border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 18px 14px 22px;margin-bottom:16px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.pf-root .qthbar::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--lc-lilac);
}
.pf-root.pf-shack .qthbar::before{
  background:linear-gradient(180deg,var(--accent),rgba(79,214,232,.3));
  box-shadow:0 0 16px rgba(79,214,232,.3);
}
.pf-root .qthbar-l{flex:1 1 280px;min-width:0}
.pf-root .qthbar-l b{
  display:block;font-family:var(--cond);font-size:16px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
}
.pf-root .qthbar-l span{
  display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);
}
.pf-root .qthbar .qth{flex:0 1 420px;align-items:center}
.pf-root .qthbar .qth input{flex:1 1 150px}
.pf-root .qthbar .qth button{flex:0 0 auto;padding:11px 16px}
.pf-root .qthbar .err{flex:1 1 100%}
@media(max-width:620px){
  .pf-root .qthbar .qth{flex:1 1 100%}
  .pf-root .qthbar .qth input{flex:1 1 100%}
  .pf-root .qthbar .qth button{flex:1 1 0}
}

/* ============================ data status ============================ */
.pf-root .statbtn{
  display:inline-block;margin-top:8px;padding:4px 13px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:4px 12px 12px 4px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
.pf-root .statbtn:hover{border-color:var(--accent);color:var(--accent)}
.pf-root .statbtn.warn{border-color:var(--fair);color:var(--fair)}
.pf-root .statwrap{
  max-width:520px;margin:12px auto 0;padding:14px 16px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
}
.pf-root .statrow{
  display:grid;grid-template-columns:1fr auto 74px;gap:10px;align-items:baseline;
  padding:6px 0;border-bottom:1px solid var(--line);
  font-size:12.5px;text-transform:none;letter-spacing:0;font-weight:400;
}
.pf-root .statrow:last-child{border-bottom:0}
.pf-root .statrow b{font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.pf-root .statrow i{font-style:normal;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-soft);text-align:right}

/* ============================ alerts strip ============================ */
.pf-root .alerts{display:none;margin-bottom:14px}
.pf-root .alert{
  background:var(--poor-bg);border-left:6px solid var(--poor);
  border-radius:0 14px 14px 0;padding:11px 16px;margin-bottom:8px;
}
.pf-root .alert b{
  display:block;font-family:var(--cond);font-size:14.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--poor);line-height:1.3;
}
.pf-root .alert span{display:block;margin-top:4px;font-size:13.5px;color:var(--ink)}

/* ============================ band-by-hour grid ============================ */
.pf-root .cards > .card-wide{flex:1 1 100%}
.pf-root .bg-row{
  display:grid;grid-template-columns:52px repeat(24,1fr);
  gap:2px;align-items:center;margin-bottom:2px;
}
.pf-root .bg-b{
  font-family:var(--cond);font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--ink-soft);text-align:right;padding-right:7px;
}
.pf-root .bg-c{height:16px;border-radius:2px;background:var(--panel-2)}
.pf-root .bg-head .bg-c{
  height:auto;background:none;font-family:var(--mono);font-size:9px;
  color:var(--ink-soft);text-align:center;
}
.pf-root .bg-c.r2{background:var(--good)}
.pf-root .bg-c.r1{background:var(--fair)}
.pf-root .bg-c.r0{background:var(--poor);opacity:.30}
.pf-root .bg-c.now{outline:1.5px solid var(--accent);outline-offset:-1px}
.pf-root .bg-head .bg-c.now{color:var(--accent);font-weight:700;outline:0}
.pf-root .bg-key{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;
}
.pf-root .bg-key i{
  display:inline-block;width:12px;height:12px;border-radius:2px;
  margin-right:5px;vertical-align:-2px;
}
.pf-root .bg-key i.r2{background:var(--good)}
.pf-root .bg-key i.r1{background:var(--fair)}
.pf-root .bg-key i.r0{background:var(--poor);opacity:.30}
.pf-root .bg-utc{text-transform:none;letter-spacing:0;font-weight:400;opacity:.85}
.pf-root .gridhint{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}

/* ============================ three-day forecast ============================ */
.pf-root .fc-bars{
  display:flex;align-items:flex-end;gap:2px;height:74px;
  padding:8px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:4px 14px 14px 4px;
}
.pf-root .fc-b{flex:1;display:flex;align-items:flex-end;height:100%}
.pf-root .fc-b i{display:block;width:100%;border-radius:2px}
.pf-root .s-bg-good{background:var(--good)}
.pf-root .s-bg-fair{background:var(--fair)}
.pf-root .s-bg-poor{background:var(--poor)}
.pf-root .fc-sum{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:11px;flex-wrap:wrap;
}
.pf-root .fc-sum b{
  font-family:var(--cond);font-size:14px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);
}
.pf-root .fc-sum span{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft)}
.pf-root .fc-sum + .gridhint{margin-top:9px}

@media(max-width:600px){
  .pf-root .bg-row{grid-template-columns:44px repeat(24,1fr);gap:1px}
  .pf-root .bg-c{height:13px}
  .pf-root .bg-b{font-size:10.5px;padding-right:5px}
}

/* ============================ MUF layer ============================ */
.pf-root .mufcanvas{
  position:absolute;left:0;top:6px;width:100%;height:calc(100% - 12px);
  display:none;pointer-events:none;
}
.pf-root .mapmode{
  background:var(--panel);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:4px 12px 12px 4px;padding:4px 12px;cursor:pointer;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
.pf-root .mapmode:hover{border-color:var(--accent);color:var(--accent)}
.pf-root .mapmode.on{background:var(--accent);color:var(--bar-ink);border-color:var(--accent)}
.pf-root .muflegend{padding:0 16px 14px;border-top:1px solid var(--line)}
.pf-root .mufbar{
  height:10px;border-radius:5px;margin-top:12px;border:1px solid var(--line);
  background:linear-gradient(90deg,#2b3ea8,#22b3d6,#34c759,#ffd60a,#ff9500,#e03131);
}
.pf-root .mufticks{
  display:flex;justify-content:space-between;margin-top:4px;
  font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);
}
.pf-root .sunfail{margin:0;font-size:12px;color:var(--fair);font-weight:600}
.pf-root .mufnote{
  margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-soft);
}
.pf-root .ver{
  display:block;margin-top:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:none;opacity:.75;
}

/* ============================ solar image ============================ */
.pf-root .sunbody{display:flex;flex-direction:column}
.pf-root .sunimg{
  display:block;width:100%;height:auto;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--line);
}
.pf-root.pf-shack .sunimg{box-shadow:0 0 26px rgba(255,185,90,.18)}
.pf-root .sunnote{margin:12px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-soft)}
.pf-root .bcn-m b em{
  float:right;font-style:normal;font-family:var(--mono);font-size:10.5px;
  font-weight:700;color:var(--ink-soft);letter-spacing:0;
}

/* ============================ band extras ============================ */
.pf-root .bandx{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.pf-root .bx{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:3px 12px 12px 3px;padding:8px 9px;text-align:center;
  cursor:pointer;font:inherit;color:var(--ink);
}
.pf-root .bx:hover{border-color:var(--accent)}
.pf-root .bx:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pf-root .bx-l{
  display:block;font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;
}
.pf-root .bx-v{
  display:block;margin-top:3px;font-family:var(--cond);font-size:16px;font-weight:700;
  letter-spacing:.04em;color:var(--accent);
}

/* ============================ NCDXF beacons ============================ */
.pf-root .beacons{display:flex;flex-direction:column;gap:8px}
.pf-root .bcn{
  display:flex;align-items:center;gap:11px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:4px 14px 14px 4px;padding:8px 12px 8px 10px;
}
.pf-root .bcn-f{
  flex:none;width:60px;text-align:center;
  font-family:var(--mono);font-size:12.5px;font-weight:700;
  color:var(--accent);line-height:1.25;
}
.pf-root .bcn-f span{
  display:block;font-size:9px;letter-spacing:.12em;color:var(--ink-soft);font-weight:700;
}
.pf-root .bcn-m{flex:1;min-width:0}
.pf-root .bcn-m b{
  display:block;font-family:var(--cond);font-size:16px;font-weight:700;
  letter-spacing:.09em;color:var(--ink);line-height:1.15;
}
.pf-root .bcn-m span{
  display:block;font-size:10.5px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pf-root .bcn-bar{
  margin-top:5px;height:3px;border-radius:2px;background:var(--line);overflow:hidden;
}
.pf-root .bcn-bar i{
  display:block;height:100%;background:var(--accent);
  transition:width .9s linear;
}
.pf-root.pf-shack .bcn-bar i{box-shadow:0 0 10px rgba(79,214,232,.7)}
.pf-root .bcn-note{
  margin:12px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-soft);
}

/* ============================ QTH ============================ */
.pf-root .qth{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.pf-root .qth input{
  flex:1 1 100%;min-width:0;padding:10px 13px;border:1px solid var(--line);
  border-radius:4px 14px 14px 4px;background:var(--panel-2);color:var(--ink);
  font-family:var(--cond);font-size:17px;letter-spacing:.14em;text-transform:uppercase;
}
.pf-root .qth input::placeholder{
  font-family:inherit;font-size:12px;letter-spacing:.06em;text-transform:none;color:var(--ink-soft);
}
.pf-root .qth input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.pf-root .qth button{
  flex:1 1 0;min-width:0;padding:11px 12px;border-radius:4px 16px 16px 4px;border:0;
  background:var(--lc-orange);color:var(--bar-ink);
  font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;
}
.pf-root .qth button:hover{filter:brightness(1.12)}
.pf-root .qth button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.pf-root .qth .locbtn{
  background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);
  font-family:var(--cond);font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;
}
.pf-root .locbtn:hover{border-color:var(--accent);color:var(--accent)}
.pf-root .locbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pf-root .locbtn[disabled]{opacity:.6;cursor:default}
.pf-root .privacy{
  margin-top:9px;font-size:11px;line-height:1.5;color:var(--ink-soft);
}
.pf-root .qthout{margin-top:13px;font-size:14px;display:none}
.pf-root .qthout.on{display:block}
.pf-root .qthrow{
  display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line);
}
.pf-root .qthrow:last-child{border-bottom:0}
.pf-root .qthrow>span{font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;align-self:center}
.pf-root .qthrow b{
  font-family:var(--cond);font-size:16px;letter-spacing:.05em;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);
}
.pf-root .graynote{
  margin-top:12px;padding:12px 14px;border-radius:0 14px 14px 0;
  background:var(--accent-soft);border-left:5px solid var(--accent);
  font-size:13.5px;color:var(--ink);
}
.pf-root .err{color:var(--poor);font-size:13px;margin-top:9px;display:none;font-weight:600}
.pf-root .err.on{display:block}

/* ============================ drawer ============================ */
.pf-root .scrim{
  position:fixed;inset:0;background:rgba(4,10,18,.62);opacity:0;pointer-events:none;
  transition:opacity .18s;z-index:99998;
}
.pf-root .scrim.on{opacity:1;pointer-events:auto}
.pf-root .drawer{
  position:fixed;z-index:99999;right:0;top:0;height:100%;width:min(440px,100%);
  background:var(--panel);border-left:10px solid var(--lc-orange);
  transform:translateX(100%);transition:transform .22s ease;
  display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(4,10,18,.35);
}
.pf-root .drawer.on{transform:none}
@media(max-width:560px){
  .pf-root .drawer{
    top:auto;bottom:0;height:auto;max-height:86vh;width:100%;
    border-left:0;border-top:10px solid var(--lc-orange);
    border-radius:20px 20px 0 0;transform:translateY(100%);
  }
}
.pf-root .dhead{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:17px 18px;border-bottom:1px solid var(--line);background:var(--panel-2);
}
.pf-root .dhead h3{
  margin:0;font-family:var(--cond);font-size:21px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);line-height:1.15;
}
.pf-root .dhead .now{
  font-size:11px;color:var(--ink-soft);margin-top:3px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:700;
}
.pf-root .dclose{
  background:var(--lc-orange);border:0;color:var(--bar-ink);border-radius:4px 14px 14px 4px;
  width:38px;height:34px;font-size:18px;line-height:1;cursor:pointer;flex:none;font-weight:700;
}
.pf-root .dclose:hover{filter:brightness(1.12)}
.pf-root .dclose:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pf-root .dbody{padding:17px 18px;overflow-y:auto}
.pf-root .dbody h4{
  margin:18px 0 6px;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;
}
.pf-root .dbody h4:first-child{margin-top:0}
.pf-root .dbody p{margin:0 0 9px;font-size:14.5px;color:var(--ink)}
.pf-root .readout{
  background:var(--accent-soft);border-left:5px solid var(--accent);
  border-radius:0 14px 14px 0;padding:12px 14px;margin:0 0 4px;font-size:14.5px;color:var(--ink);
}
.pf-root .scale{list-style:none;margin:7px 0 0;padding:0;font-size:13px}
.pf-root .scale li{
  display:flex;gap:10px;padding:6px 10px;border-radius:3px 12px 12px 3px;align-items:baseline;
}
.pf-root .scale li.hit{background:var(--accent-soft);font-weight:700}
.pf-root .scale .rng{
  flex:none;width:74px;color:var(--ink-soft);font-family:var(--mono);
  font-size:11.5px;font-variant-numeric:tabular-nums;
}
.pf-root .scale li.hit .rng{color:var(--accent)}

/* ============================ footer ============================ */
.pf-root .foot{
  margin-top:22px;font-size:10.5px;color:var(--ink-soft);text-align:center;
  line-height:1.8;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
}
.pf-root .pf-tests{
  display:none;margin-top:10px;font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;
}

@media(max-width:520px){
  .pf-root .top{gap:10px}
  .pf-root .brand h2{font-size:19px}
  .pf-root .brand-elbow{width:40px;min-height:46px}
  .pf-root .brand-elbow::after{left:40px;width:18px}
  .pf-root .brand>div{padding-left:22px}
  .pf-root .clocks{width:100%}
  .pf-root .clock{flex:1}
  .pf-root .modebtn{flex:1}
}