/* United Weather Dashboard - Central Oregon Weather Watch
   Brand: navy #1B2440 · cream #F3EEE7 · yellow #F2E33A · green #2E7D50
   Flight categories use the standard VFR / MVFR / IFR / LIFR colors.
   Every colored mark also has a text label, so nothing depends on color alone. */

:root {
  --navy: #1B2440; --navy2: #26315A; --navy3: #33406E; --yellow: #F2E33A; --green: #2E7D50;
  --bg: #F3EEE7; --card: #FFFFFF; --card2: #FBF8F2; --line: #E3DCD1; --line2: #EEE8DE;
  --tx: #132038; --tx2: #45526B; --mu: #5F6B82; --link: #1F5FD6; --hl: #FFF6C2;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.05);
  /* flight categories */
  --VFR: #23804C; --MVFR: #2F6BC4; --IFR: #C9493B; --LIFR: #7B4BC0;
  --VFRs: #D9EEE1; --MVFRs: #DAE5F7; --IFRs: #F7DCD7; --LIFRs: #E8DDF6;
  /* delay / cancellation causes */
  --cW: #C9493B; --cN: #E08A1E; --cA: #5B6B8C; --cL: #9AA6BD; --cS: #7A3E9D; --cE: #B5367A; --cD: #C3CAD6; --cV: #2A8C8C;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}
html[data-theme=dark] {
  --bg: #121A30; --card: #1B2440; --card2: #212B4D; --line: #2E3A60; --line2: #28335A;
  --tx: #EEF0F6; --tx2: #C3CADB; --mu: #9AA4BE; --link: #8DB8F2; --hl: #3A3A22; --shadow: none;
  --VFRs: #1E3D2C; --MVFRs: #1E2F4E; --IFRs: #4A2420; --LIFRs: #35264F;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 16px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; background: var(--bg); color: var(--tx); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: var(--navy); padding: 8px 14px; border-radius: 8px; z-index: 100; font-weight: 700; }
.skip:focus { left: 8px; }
.num { font-variant-numeric: tabular-nums; }
.mu { color: var(--mu); }
.small { font-size: 13px; }
.loading { padding: 60px; text-align: center; color: var(--mu); }
.err { padding: 30px; color: var(--cW); }

/* ---------- top bar ---------- */
.top { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 40; }
.top .in { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; flex: none; }
.brand:hover { text-decoration: none; }
.badge { width: auto; height: 52px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.brand b { display: block; font-size: 19px; line-height: 1.2; }
.brand small { display: block; color: var(--yellow); font-size: 12px; font-weight: 600; }
.search { flex: 1; max-width: 560px; position: relative; margin-left: auto; }
.search input { width: 100%; height: 40px; border: 0; border-radius: 10px; padding: 0 14px; background: #fff; color: #1B2440; }
.sugg { position: absolute; left: 0; right: 0; top: 46px; background: var(--card); color: var(--tx); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.25); overflow: hidden; z-index: 60; }
.sugg a { display: flex; gap: 10px; padding: 9px 14px; color: var(--tx); border-bottom: 1px solid var(--line2); }
.sugg a:hover, .sugg a.on { background: var(--hl); text-decoration: none; }
.sugg a small { margin-left: auto; color: var(--mu); }
.tbtn { height: 36px; border-radius: 9px; border: 1px solid var(--navy3); background: var(--navy2); color: #DDE2EE; padding: 0 11px; cursor: pointer; white-space: nowrap; }
.tbtn[aria-pressed=true] { background: var(--yellow); color: var(--navy); border-color: var(--yellow); font-weight: 700; }

/* ---------- tabs ---------- */
.nav { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 60px; z-index: 30; }
.nav .in { max-width: 1440px; margin: 0 auto; display: flex; gap: 2px; padding: 0 16px; overflow-x: auto; }
.nav a { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; color: var(--tx2); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav a:hover { text-decoration: none; color: var(--tx); }
.nav a i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--line2); }
.nav a[aria-current=page] { color: var(--tx); border-bottom-color: var(--yellow); }
.nav a[aria-current=page] i { background: var(--navy); color: var(--yellow); }

/* ---------- layout ---------- */
.wrap { max-width: 1440px; margin: 0 auto; padding: 20px 24px 40px; min-height: 70vh; }
h1 { font-size: 28px; line-height: 1.15; margin: 0; letter-spacing: -.02em; }
h2 { font-size: 18px; margin: 0 0 4px; }
h3 { font-size: 12.5px; margin: 0 0 8px; color: var(--tx2); text-transform: uppercase; letter-spacing: .07em; }
.sub { color: var(--tx2); margin: 4px 0 0; }
.phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wide { grid-column: 1 / -1; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; min-width: 0; }
.card.tight { padding: 0; overflow: hidden; }
.card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.note { background: var(--card2); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 14px; color: var(--tx2); font-size: 14px; }
.note.warn { border-color: #E0B44A; background: var(--hl); }
@media (max-width: 1100px) { .g4, .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .g2, .g3, .g4, .g6 { grid-template-columns: 1fr; } .top .in { flex-wrap: wrap; } .search { order: 3; max-width: none; flex-basis: 100%; } .nav { top: 0; position: static; } }

/* ---------- KPI tiles ---------- */
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--mu); font-size: 13px; }
.kpi .d { font-size: 13px; color: var(--tx2); margin-top: 2px; }

/* ---------- controls ---------- */
.ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--card); }
.seg button { border: 0; border-right: 1px solid var(--line); background: none; padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--tx2); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--navy); color: #fff; box-shadow: inset 0 -3px 0 var(--yellow); }
html[data-theme=dark] .seg button.on { background: var(--yellow); color: var(--navy); }
.btn { border: 1px solid var(--line); background: var(--card); border-radius: 9px; padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--tx2); display: inline-flex; gap: 6px; align-items: center; }
.btn:hover { background: var(--card2); text-decoration: none; }
.btn.pri { background: var(--green); border-color: var(--green); color: #fff; }
select, input[type=date], input[type=number], input[type=text] { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; background: var(--card); color: var(--tx); }
label.f { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--mu); }

/* ---------- chips and badges ---------- */
.cat { display: inline-block; min-width: 46px; text-align: center; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 6px; color: #fff; }
.cat.VFR { background: var(--VFR); } .cat.MVFR { background: var(--MVFR); } .cat.IFR { background: var(--IFR); } .cat.LIFR { background: var(--LIFR); }
.cat.NA { background: var(--line); color: var(--mu); }
.cause { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 7px; color: #fff; white-space: nowrap; }
.cause.W { background: var(--cW); } .cause.N { background: var(--cN); color: #2a1a00; } .cause.A { background: var(--cA); }
.cause.L { background: var(--cL); color: #1B2440; } .cause.S { background: var(--cS); } .cause.E { background: var(--cE); }
.cause.D { background: var(--cD); color: #1B2440; } .cause.V { background: var(--cV); }
.tag { display: inline-block; font-size: 12px; border: 1px solid var(--line); border-radius: 20px; padding: 0 8px; color: var(--tx2); background: var(--card2); }
.tag.core { border-color: var(--yellow); background: #FFF8C8; color: #3d3600; font-weight: 700; }
.tag.exp { border-color: #9DB7E6; }
.st-c { color: var(--cW); font-weight: 700; }
.st-d { color: #B36A00; font-weight: 700; }
.st-v { color: var(--cV); font-weight: 700; }
html[data-theme=dark] .st-d { color: #F0B35C; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--tx2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mu); padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--card2); position: sticky; top: 0; }
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--card2); }
.tbl tr.sel td { background: var(--hl); }
.tbl td.r, .tbl th.r { text-align: right; }
.scroll { max-height: 560px; overflow: auto; }
.pager { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }

/* ---------- map ---------- */
.map { height: 460px; border-radius: 12px; overflow: hidden; background: #DCE6EF; position: relative; }
.map .nomap { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mu); padding: 20px; text-align: center; }
.maplibregl-popup-content { color: #132038; font: 14px/1.45 "Segoe UI", system-ui, sans-serif; border-radius: 10px; }

/* ---------- charts ---------- */
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--mu); }

/* ---------- calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .cal { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .cal { grid-template-columns: repeat(2, 1fr); } }
.cal .m b { display: block; font-size: 13px; margin-bottom: 4px; }
.cal .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal .days a, .cal .days span { aspect-ratio: 1; border-radius: 4px; font-size: 11px; display: grid; place-items: center; color: var(--tx2); background: var(--line2); }
.cal .days a:hover { outline: 2px solid var(--navy); text-decoration: none; }
.cal .days span.blank { background: none; }

/* ---------- day page: hour strip ---------- */
.strip { display: grid; grid-template-columns: 120px repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 12px; align-items: stretch; }
.strip .lab { color: var(--mu); padding: 4px 6px 4px 0; text-align: right; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .h { text-align: center; color: var(--mu); }
.strip .c { border-radius: 4px; min-height: 24px; display: grid; place-items: center; font-weight: 700; font-size: 11px; color: #fff; cursor: pointer; border: 0; padding: 0; }
.strip .c.VFR { background: var(--VFR); } .strip .c.MVFR { background: var(--MVFR); } .strip .c.IFR { background: var(--IFR); } .strip .c.LIFR { background: var(--LIFR); }
.strip .c.NA { background: var(--line2); color: var(--mu); }
.strip .c.sel { outline: 3px solid var(--yellow); outline-offset: 1px; }
.strip .bar { display: flex; flex-direction: column; justify-content: flex-end; min-height: 46px; cursor: pointer; border-radius: 4px; background: var(--card2); }
.strip .bar i { display: block; }
.strip .bar.sel { outline: 3px solid var(--yellow); }

/* ---------- day page: reports ---------- */
.rpt { font-family: var(--mono); font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.rpt .wx { color: var(--cW); font-weight: 700; } .rpt .sky { color: var(--MVFR); font-weight: 600; } .rpt .vis { color: var(--LIFR); font-weight: 600; }
.rpt .tg { background: var(--line2); border-radius: 3px; padding: 0 2px; font-weight: 700; } .rpt .rmk { color: var(--mu); }
.rlist { max-height: 520px; overflow: auto; }
.rlist .row { display: grid; grid-template-columns: 78px 56px 1fr; white-space: normal; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line2); align-items: start; }
.rlist .row.hl { background: var(--hl); }
.taf { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
.taf.hl { border-color: #E0B44A; background: var(--hl); }
.taf .g { display: grid; grid-template-columns: 70px 120px 56px 1fr; gap: 6px; padding: 2px 0; font-size: 13px; }
.taf .g.now { background: rgba(242,227,58,.35); border-radius: 4px; }
.detail { background: var(--card2); border-top: 1px solid var(--line); padding: 12px 16px; }
.detail .grid { gap: 12px; }
.chain { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.chain .leg { border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; background: var(--card); }
.chain .arrow { color: var(--mu); }

/* ---------- misc ---------- */
.tip { position: fixed; z-index: 90; background: #1B2440; color: #fff; padding: 7px 10px; border-radius: 8px; font-size: 13px; max-width: 320px; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.foot { max-width: 1440px; margin: 0 auto; padding: 18px 24px 30px; color: var(--mu); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bigbar { height: 10px; border-radius: 6px; background: var(--line2); overflow: hidden; display: flex; }
.bigbar i { display: block; height: 100%; }
.heat td.v { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
details.how { margin-top: 10px; font-size: 14.5px; color: var(--tx2); background: var(--card2); border: 1px solid var(--line); border-radius: 10px; }
details.how summary { cursor: pointer; color: var(--navy); font-weight: 650; padding: 8px 12px; list-style: none; display: flex; gap: 8px; align-items: center; }
details.how summary::-webkit-details-marker { display: none; }
details.how summary:before { content: "?"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: var(--yellow); font-size: 12px; font-weight: 800; }
details.how[open] summary { border-bottom: 1px solid var(--line); }
details.how > :not(summary) { padding: 8px 14px 10px; margin: 0; }
html[data-theme=dark] details.how summary { color: var(--yellow); }
.brief { border-left: 5px solid var(--green); background: var(--card); border-radius: 10px; padding: 12px 16px; margin-top: 14px; box-shadow: var(--shadow); line-height: 1.6; }
.brief h3 { margin: 0 0 4px; color: var(--green); font-size: 15px; }
html[data-theme=dark] .brief h3 { color: #7FD3A0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- flight finder ---------- */
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .g5 { grid-template-columns: 1fr; } }
.filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; padding: 16px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--tx2); }
.filters input, .filters select, .ctl input, .ctl select { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--card); color: var(--tx); }
.filters label.chk { flex-direction: row; align-items: center; height: 36px; }
.filters label.chk input { height: auto; }
.filters .go { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.tbl th[data-k] { cursor: pointer; user-select: none; }
.tbl th.sorted { color: var(--tx); box-shadow: inset 0 -3px 0 var(--yellow); }
.tag.wx { border-color: var(--cW); color: var(--cW); font-weight: 700; }
.btn:disabled { opacity: .45; cursor: default; }
/* ---------- hour strip: selected hour ---------- */
.strip .c.sel, .strip .bar.sel { outline: 3px solid var(--navy); outline-offset: 1px; }
html[data-theme=dark] .strip .c.sel, html[data-theme=dark] .strip .bar.sel { outline-color: var(--yellow); }
.strip .bar i { width: 100%; }
/* ---------- forecast vs observed matrix ---------- */
.mx { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: 13px; }
.mx th { font-weight: 600; color: var(--mu); padding: 4px; text-align: center; }
.mx th.corner { font-size: 11.5px; text-align: left; }
.mxc { text-align: center; padding: 8px 4px; border-radius: 8px; background: rgba(201,73,59,var(--a)); border: 2px solid transparent; }
.mxc b { display: block; font-size: 15px; } .mxc small { color: inherit; opacity: .8; }
.mxc.diag { border-color: var(--green); }
.mxc.worse { box-shadow: inset 0 0 0 1px var(--cW); }
.mxc.empty { color: var(--mu); background: var(--line2); }

.rlist .row > .num { white-space: nowrap; }