/* Sky Riders Weather
   Brand tokens matched to the Sky Riders main site: deep navy ink, sky blue links,
   light blue accents, black buttons, DM Sans headings and Jost body text. */
:root {
  --brand: #2a5d8d;          /* sky */
  --brand-dark: #001128;     /* navy */
  --brand-soft: #e7eef5;
  --navy: #001128;
  --accent: #72bede;         /* light blue highlight */
  --signal: #121212;         /* buttons */
  --signal-ink: #ffffff;
  --ink: #001128;
  --ink-2: #33405a;
  --muted: #4c586b;
  --bg: #f4f4f4;
  --surface: #ffffff;
  --line: #e0e0e0;
  --ok: #2e9d5b;   --ok-soft: #e4f4ea;
  --warn: #d98a00; --warn-soft: #fdf1da;
  --bad: #c0392b;  --bad-soft: #fbe5e5;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: none;
  --font-head: 'DM Sans', Arial, sans-serif;
  --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font-body); letter-spacing: .3px; -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 500; line-height: 1.3; margin: 0 0 .5em; letter-spacing: .4px; color: var(--navy); text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 500; }
h2 { font-size: 1.3rem; font-weight: 500; }
h3 { font-size: 1.08rem; font-weight: 500; }
p { margin: 0 0 .8em; }
code { background: var(--brand-soft); padding: 0 .3em; border-radius: 4px; font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.break { word-break: break-all; }
.nowrap { white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.topstrip { background: var(--navy); color: #fff; font-size: .8rem; }
.topstrip .wrap { display: flex; gap: 18px; align-items: center; min-height: 34px; flex-wrap: wrap; }
.topstrip a { color: #fff; text-decoration: none; opacity: .85; }
.topstrip a:hover { opacity: 1; color: #fff; }
.spacer { flex: 1; }
.mainbar { background: var(--bg); border-bottom: 1px solid rgba(0,17,40,.08); position: sticky; top: 0; z-index: 20; }
.mainbar .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { height: 24px; width: auto; }
.brand-text { font: 600 1.35rem var(--font-head); letter-spacing: -.01em; color: var(--navy); }
.brand-sub { font: 500 .7rem var(--font-body); text-transform: uppercase; letter-spacing: 1.6px; color: var(--card-ink, #121212); background: var(--accent); padding: 3px 10px; border-radius: 40px; }
.mainnav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; }
.mainnav a { font: 400 .95rem var(--font-body); letter-spacing: .6px; color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.mainnav a:hover { background: rgba(0,17,40,.05); }
.mainnav a.active { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.mainnav a.nav-instructor { color: var(--brand); }
.mainnav a.nav-instructor.active { background: var(--brand); color: #fff; }
@media (max-width: 720px) {
  .mainbar .wrap { gap: 6px; padding-top: 10px; padding-bottom: 6px; }
  .mainnav { margin-left: 0; width: 100%; }
  .brand img { height: 21px; }
}

main.wrap { padding-top: 24px; padding-bottom: 40px; min-height: 60vh; }
.sitefoot { background: #121212; color: #b0b0b0; font-size: .88rem; padding: 26px 0; }
.sitefoot strong { color: #fff; }
.sitefoot a { color: #fff; }

/* ---------- Layout ---------- */
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin: 6px 0 22px; }
.hero-tight { margin-bottom: 16px; align-items: center; }
.lead { color: var(--ink-2); font-size: 1.05rem; max-width: 62ch; margin: 0; }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 18px; border: 1px solid var(--line); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.grid-2 > .card { margin-bottom: 0; }
.grid-2 { margin-bottom: 18px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .grid-2, .grid-main { grid-template-columns: minmax(0, 1fr); } }
.card { min-width: 0; }
.section-title { margin: 26px 0 12px; }
.crumbs { margin: 0 0 4px; font-size: .9rem; }
.crumbs a { text-decoration: none; }
.narrow { max-width: 440px; margin: 30px auto; }
.narrow-form { max-width: 520px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 400 .95rem var(--font-body); letter-spacing: 1px; border: 1px solid var(--signal); background: var(--signal); color: var(--signal-ink); padding: 11px 24px; border-radius: 6px; cursor: pointer; text-decoration: none; transition: box-shadow .3s, background .3s, border-color .3s; }
.btn:hover { box-shadow: 0 0 0 1px var(--signal); color: var(--signal-ink); }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.btn-ghost:hover { background: var(--surface); color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.btn-danger { background: var(--surface); color: var(--bad); border-color: var(--bad-soft); }
.btn-danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); box-shadow: none; }
.btn-small { padding: 5px 12px; font-size: .8rem; }

/* ---------- Segmented control ---------- */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.seg button, .seg a, .seg-radio span { font: 700 .9rem var(--font-head); border: 0; background: transparent; color: var(--ink-2); padding: 9px 16px; border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-block; }
.seg button.on, .seg a.on, .seg-radio input:checked + span { background: var(--navy); color: #fff; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-small button { padding: 5px 11px; font-size: .8rem; }
.form .seg { margin-bottom: 14px; }

/* ---------- Tags and badges ---------- */
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.tag { font: 700 .72rem var(--font-head); text-transform: uppercase; letter-spacing: .06em; background: var(--brand-soft); color: var(--brand-dark); padding: 3px 9px; border-radius: 999px; }
.tag-warn { background: var(--warn-soft); color: #8a5800; }
.pill { font-size: .8rem; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; margin-left: 6px; }
.badge { display: inline-block; font: 700 .8rem var(--font-head); padding: 4px 11px; border-radius: 999px; vertical-align: middle; }
.badge-flyable { background: var(--ok-soft); color: #1d6b3d; }
.badge-marginal { background: var(--warn-soft); color: #8a5800; }
.badge-not_flyable { background: var(--bad-soft); color: #a02c2c; }
.st { font: 700 .75rem var(--font-head); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.st-pending { background: var(--warn-soft); color: #8a5800; }
.st-approved { background: var(--ok-soft); color: #1d6b3d; }
.st-countered { background: var(--brand-soft); color: var(--brand-dark); }
.count { background: var(--bad); color: #fff; border-radius: 999px; padding: 0 7px; font-size: .75rem; margin-left: 4px; }

/* ---------- Flash ---------- */
.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 600; }
.flash-ok { background: var(--ok-soft); color: #1d6b3d; }
.flash-error { background: var(--bad-soft); color: #a02c2c; }
.flash-info { background: var(--brand-soft); color: var(--brand-dark); font-weight: 400; }

/* ---------- Forms ---------- */
.form label { display: block; margin-bottom: 14px; }
.label { display: block; font: 700 .78rem var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 6px; }
.label .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input:not([type]), select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
}
textarea { resize: vertical; min-height: 44px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .row-2, .row-3 { grid-template-columns: 1fr; } }
.checks { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.check { display: inline-flex !important; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 0; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.check-inline { align-self: end; margin-bottom: 24px !important; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.save-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; bottom: 12px; z-index: 5; }

.verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.verdict-opt { margin: 0 !important; cursor: pointer; }
.verdict-opt input { position: absolute; opacity: 0; }
.verdict-opt span { display: block; text-align: center; font: 700 .95rem var(--font-head); padding: 14px 8px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: #fff; transition: all .15s; }
.verdict-opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--brand-soft); }
.v-flyable input:checked + span { border-color: var(--ok); background: var(--ok-soft); color: #1d6b3d; }
.v-marginal input:checked + span { border-color: var(--warn); background: var(--warn-soft); color: #8a5800; }
.v-not_flyable input:checked + span { border-color: var(--bad); background: var(--bad-soft); color: #a02c2c; }
.verdicts:has(input:only-of-type) { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
@media (max-width: 480px) { .verdict-opt span { font-size: .82rem; padding: 12px 4px; } }

/* ---------- Dashboard ---------- */
.site-head { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.site-pick { min-width: 260px; flex: 0 1 340px; }
.site-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: var(--ink-2); font-size: .9rem; padding-bottom: 10px; }
.site-meta .pill { margin: 0; }
.site-notes { flex-basis: 100%; margin: 0; color: var(--ink-2); }
.site-card { padding-bottom: 12px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; }
.fc { font-size: .88rem; }
.fc th { font: 700 .72rem var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fc td { padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fc .arrow { display: inline-block; font-weight: 800; color: var(--brand); }
.fc tr.lvl-0 .dot { background: var(--ok); }
.fc tr.lvl-1 .dot { background: var(--warn); }
.fc tr.lvl-2 .dot { background: var(--bad); }
.fc tr.lvl-0 td:first-child { box-shadow: inset 4px 0 var(--ok); }
.fc tr.lvl-1 td:first-child { box-shadow: inset 4px 0 var(--warn); }
.fc tr.lvl-2 td:first-child { box-shadow: inset 4px 0 var(--bad); }
.rating { display: flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.why { color: var(--ink-2); font-size: .8rem; }
.fineprint { font-size: .78rem; color: var(--muted); margin: 10px 0 0; }

.tool-list { display: grid; gap: 10px; }
.tool { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s; }
.tool:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); }
.tool-name { font: 700 .98rem var(--font-head); }
.tool-desc { grid-column: 1; font-size: .85rem; color: var(--ink-2); }
.tool-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.2rem; color: var(--brand); }

.embed-wrap { position: relative; padding-top: 56%; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) { .embed-wrap { padding-top: 110%; } }

.analysis-list { display: grid; gap: 8px; }
.analysis-item { display: grid; grid-template-columns: 120px 1fr auto; gap: 2px 14px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.analysis-item:hover { border-color: var(--brand); color: var(--ink); }
.ai-date { font: 700 .85rem var(--font-head); color: var(--brand); grid-row: span 2; }
.ai-title { font-weight: 600; }
.ai-meta { grid-column: 2; font-size: .85rem; color: var(--muted); }
.ai-status { grid-column: 3; grid-row: 1 / span 2; align-self: center; font: 700 .75rem var(--font-head); color: var(--ok); }
@media (max-width: 560px) { .analysis-item { grid-template-columns: minmax(0, 1fr); } .ai-date, .ai-title, .ai-meta, .ai-status { grid-column: 1; grid-row: auto; } }
.cta-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--navy); color: #fff; border: 0; }
.cta-card h2 { color: #fff; }
.cta-card p { color: #c9d6e6; margin: 0; }

.analysis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.analysis-card { text-decoration: none; color: var(--ink); margin: 0; transition: transform .15s, border-color .15s; }
.analysis-card:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--ink); }
.analysis-card p { margin: 0 0 4px; font-size: .9rem; }
.ac-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

/* ---------- Analysis page ---------- */
.steps ol { margin: 0 0 12px; padding-left: 20px; }
.steps li { margin-bottom: 4px; }
.tool-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font: 600 .85rem var(--font-head); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: #fff; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; flex: 1; }
.panel-num { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font: 600 .9rem var(--font-head); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.panel-prompt { color: var(--ink-2); font-weight: 600; }
.panel-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 860px) { .panel-body { grid-template-columns: 1fr; } }
.shot { margin: 0; }
.shot img { border-radius: var(--radius-sm); border: 1px solid var(--line); cursor: zoom-in; width: 100%; }
.shot figcaption { font-size: .78rem; margin-top: 6px; }
.instructor-note { margin-top: 14px; background: var(--brand-soft); border-left: 4px solid var(--brand); padding: 12px 14px; border-radius: var(--radius-sm); }
.instructor-note p { margin: 0; }
form.locked textarea { background: var(--bg); }
.result { border: 2px solid var(--brand); }
.result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.verdict-compare { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.verdict-compare .label { margin-bottom: 4px; }
.match { font-weight: 700; padding: 8px 12px; border-radius: var(--radius-sm); }
.match.yes { background: var(--ok-soft); color: #1d6b3d; }
.match.no { background: var(--warn-soft); color: #8a5800; }
.summary { font-size: 1.02rem; margin: 12px 0; }

/* ---------- Requests ---------- */
.status-card h2 { margin-bottom: 6px; }
.status-pending { border-left: 6px solid var(--warn); }
.status-approved { border-left: 6px solid var(--ok); }
.status-countered { border-left: 6px solid var(--brand); }
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.shot-card { margin: 0; padding: 12px; }
.shot-card img { border-radius: var(--radius-sm); cursor: zoom-in; margin-bottom: 8px; }
.shot-card figcaption { font-size: .9rem; margin-bottom: 8px; }
.req-list { list-style: none; margin: 0; padding: 0; }
.req-list a { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.req-list .muted { font-size: .82rem; }
.req-list .st { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.danger-zone { margin-top: 24px; text-align: right; }

/* ---------- Admin ---------- */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.subnav a { font: 600 .88rem var(--font-head); color: var(--ink-2); text-decoration: none; padding: 7px 13px; border-radius: 999px; }
.subnav a:hover { background: var(--surface); }
.subnav a.on { background: var(--brand); color: #fff; }
.list th { font: 700 .72rem var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.list td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.list td .muted { font-size: .82rem; }
.limits input { max-width: 90px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.row-actions form { margin: 0; }
.site-list { list-style: none; margin: 0; padding: 0; }
.site-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.site-list li.on { background: var(--brand-soft); margin: 0 -12px; padding: 12px; border-radius: var(--radius-sm); }
.site-list .muted { font-size: .82rem; }
.map { height: 280px; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: 14px; z-index: 0; }

.repeat-list { display: grid; gap: 14px; margin-bottom: 14px; }
.repeat-list.numbered { counter-reset: panel; }
.repeat-list.numbered .panel-num::before { counter-increment: panel; content: counter(panel); }
.repeat-row { margin: 0; }
.shot-row:not(.card) { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.row-head { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.row-head label { margin: 0 !important; min-width: 200px; }
.panel-edit { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .panel-edit { grid-template-columns: 1fr; } }

/* ---------- Screenshot field ---------- */
.img-field { position: relative; }
.img-drop { position: relative; border: 2px dashed #c9cfd6; border-radius: var(--radius-sm); min-height: 150px; display: flex; align-items: center; justify-content: center; background: var(--bg); cursor: pointer; overflow: hidden; outline: none; }
.img-drop:focus { border-color: var(--brand); }
.img-field.drag .img-drop { border-color: var(--brand); background: var(--brand-soft); }
.img-field.has-img .img-drop { border-style: solid; border-color: var(--line); background: #fff; }
.img-preview { max-height: 460px; width: auto; margin: 0 auto; }
.img-field:not(.has-img) .img-preview { display: none; }
.img-hint { color: var(--muted); font-size: .9rem; padding: 20px; text-align: center; }
.img-field.has-img .img-hint { display: none; }
.img-busy { display: none; position: absolute; inset: 0; background: rgba(255,255,255,.8); align-items: center; justify-content: center; font-weight: 700; }
.img-field.busy .img-busy { display: flex; }
.img-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.img-field:not(.has-img) .act-annotate, .img-field:not(.has-ann) .act-clear-ann { display: none; }
.img-field.has-ann .img-drop::after { content: 'Annotated'; position: absolute; top: 8px; right: 8px; font: 700 .7rem var(--font-head); background: var(--brand); color: #fff; padding: 3px 8px; border-radius: 999px; }

/* ---------- Annotator ---------- */
.annot-modal { position: fixed; inset: 0; background: rgba(10, 12, 15, .94); z-index: 100; display: none; flex-direction: column; }
.annot-modal.open { display: flex; }
.annot-bar { display: flex; gap: 8px; padding: 10px 12px; background: #1b1f24; flex-wrap: wrap; align-items: center; }
.annot-group { display: flex; gap: 3px; background: #2a2f36; border-radius: 10px; padding: 3px; }
.annot-bar button { font: 600 .82rem var(--font-head); color: #dfe3e8; background: transparent; border: 0; padding: 7px 11px; border-radius: 8px; cursor: pointer; }
.annot-bar button:hover { background: #3a4049; }
.annot-bar button.on { background: var(--brand); color: #fff; }
.annot-colors button { width: 30px; height: 30px; padding: 0; position: relative; }
.annot-colors button::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(255,255,255,.3); }
.annot-colors button.on { background: #fff; }
.annot-spacer { flex: 1; }
.annot-bar .annot-save { background: var(--signal); color: var(--signal-ink); }
.annot-bar .annot-save:hover { background: #333; }
.annot-stage { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 14px; }
.annot-stage canvas { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; touch-action: none; cursor: crosshair; box-shadow: 0 6px 30px rgba(0,0,0,.5); background: #fff; }
.annot-tip { color: #9aa3ad; font-size: .8rem; text-align: center; margin: 0 0 10px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(10,12,15,.92); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.lightbox-close { position: absolute; top: 12px; right: 16px; background: #fff; border: 0; border-radius: 50%; width: 40px; height: 40px; font-size: 1.5rem; cursor: pointer; }

/* ---------- Sunrise / sunset ---------- */
.sun { display: inline-flex; gap: 14px; flex-wrap: wrap; font: 600 .88rem var(--font-head); margin: 6px 0 10px; }
.sun > span { padding: 4px 10px; border-radius: 999px; }
.sun-up { background: #fff4d6; color: #8a5800; }
.sun-down { background: #e6e3f5; color: #3f3577; }
.fc tr.dark td { color: var(--muted); background: #f7f7f9; }

/* ---------- RASP / NOTAMs ---------- */
#rasp-charts { margin-bottom: 12px; }
.rasp-img { background: var(--bg); border-radius: var(--radius-sm); min-height: 120px; display: flex; align-items: center; justify-content: center; padding: 8px; }
.rasp-img img { max-width: 710px; width: 100%; cursor: zoom-in; }
.rasp-img img:not([src]) { display: none; }
.notam-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notam { border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius-sm); padding: 10px 12px; }
.notam-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.notam-top .pill { margin: 0; }
.notam-when { font-size: .82rem; color: var(--ink-2); margin-bottom: 4px; }
.notam-text { font: .85rem/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.ok-note { color: #1d6b3d; font-weight: 600; margin: 0; }

.grid-wide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
@media (max-width: 900px) { .grid-wide { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Windgram and model comparison ---------- */
.chart-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.chart-controls select { width: auto; padding: 6px 10px; font-size: .85rem; }
.chart-box { min-height: 80px; }
.chart-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.windgram { display: block; font-family: var(--font-body); }
.cmp { display: block; width: 100%; height: auto; min-width: 560px; font-family: var(--font-body); }
.wg-grid { stroke: var(--line); stroke-width: 1; }
.wg-axis { font-size: 11px; fill: var(--muted); }
.wg-val { font-size: 11px; fill: var(--ink); font-weight: 600; }
.wg-rowlabel { font-size: 10px; fill: var(--ink-2); font-weight: 700; }
.wg-cell { font-size: 11px; fill: var(--ink); }
.wg-warn { fill: #a02c2c; font-weight: 700; }
.wg-cloud { fill: #6b7480; }
.wg-thermal { fill: #eb6834; }
.wg-base { stroke: #e87ba4; stroke-width: 2; }
.wg-ground { stroke: var(--ink-2); stroke-width: 1.5; }
.wg-hit, .cmp-hit { fill: transparent; }
.wg-hit.on { fill: rgba(42, 93, 141, .08); }
.cmp-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cmp-label { font-size: 11px; fill: var(--ink-2); font-weight: 600; }
.cmp-limit { stroke: #d03b3b; stroke-width: 1.5; stroke-dasharray: 5 4; }
.cmp-cross { stroke: var(--ink-2); stroke-width: 1; }
.cmp-dir td { text-align: center; }
.cmp-dir td:first-child { text-align: left; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--ink-2); margin-top: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 4px; }
.chart-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.wg-thermal-sw { background: #eb6834; opacity: .45; }
.wg-cloud-sw { background: #6b7480; opacity: .45; }
i.ln { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: #e87ba4; vertical-align: middle; margin-right: 4px; }
.chart-tip { position: absolute; top: 8px; z-index: 5; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius-sm); padding: 8px 10px; font-size: .8rem; pointer-events: none; min-width: 170px; max-width: 260px; }
.chart-tip table { margin: 4px 0; }
.chart-tip td { padding: 1px 6px 1px 0; white-space: nowrap; }
.rasp-add { display: inline-flex; gap: 6px; align-items: center; }
.rasp-add select { width: auto; }

/* ---------- Site map, briefing and risk assessment ---------- */
.site-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch; }
.site-info { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.site-info .site-pick { width: 100%; max-width: 360px; flex: none; }
.site-info .seg { margin-top: 4px; }
.site-map { min-height: 240px; max-height: 300px; border-radius: var(--radius-sm); border: 1px solid var(--line); z-index: 0; }
@media (max-width: 800px) { .site-top { grid-template-columns: minmax(0, 1fr); } .site-map { min-height: 200px; } }
.sr-site-pin span { display: block; width: 26px; height: 26px; background: var(--brand); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.sr-pin span { display: block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--ink-2); margin-top: 8px; }
.map-legend i, .feature-list i, .fe-top i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.feature-list { list-style: none; margin: 10px 0 0; padding: 0; font-size: .88rem; }
.feature-list li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.brief-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.brief-grid > .card { margin: 0; }
@media (max-width: 900px) { .brief-grid { grid-template-columns: minmax(0, 1fr); } }
.brief-map { height: 380px; border-radius: var(--radius-sm); z-index: 0; }
.emergency { border-top: 6px solid #d03b3b; }
.em-999 { font: 700 1.05rem var(--font-head); color: #a02c2c; }
.em-999 a { color: #a02c2c; }
.emergency dl { margin: 0; }
.emergency dt { font: 700 .72rem var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 10px; }
.emergency dd { margin: 2px 0 0; }
.ra td { vertical-align: top; }
.risk { display: inline-block; font: 700 .75rem var(--font-head); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.risk b { margin-left: 2px; }
.risk-low { background: var(--ok-soft); color: #1d6b3d; }
.risk-med { background: var(--warn-soft); color: #8a5800; }
.risk-high { background: #fde3d6; color: #9a3d14; }
.risk-vhigh { background: var(--bad-soft); color: #a02c2c; }
.brief-edit { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .brief-edit { grid-template-columns: minmax(0, 1fr); } }
.edit-map { height: 480px; border-radius: var(--radius-sm); border: 1px solid var(--line); z-index: 0; }
.feature-edit { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 480px; overflow: auto; }
.feature-edit li { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; display: grid; gap: 6px; }
.fe-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fe-top select { width: auto; padding: 5px 8px; }
.feature-edit input { padding: 6px 9px; font-size: .88rem; }
.hz-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
@media (max-width: 760px) { .hz-grid { grid-template-columns: minmax(0, 1fr); } }
.hz-row .grow { flex: 1; min-width: 220px; }
.ls { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ls select { width: auto; padding: 6px 4px; }
.leaflet-container { font-family: var(--font-body); }

/* ---------- Guided checklist ---------- */
.checklist { display: grid; gap: 8px; margin-bottom: 16px; }
.cl-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; display: grid; gap: 8px; background: var(--surface); }
.cl-row:has(input:checked) { border-color: #c3d3e6; }
.cl-head { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.cl-head > div:first-child { min-width: 0; flex: 1 1 260px; }
.cl-hint { display: block; font-size: .84rem; color: var(--muted); }
.cl-rates { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.form .cl-rates label, .cl-rate { display: inline-block; margin: 0 !important; cursor: pointer; }
.cl-rate input { position: absolute; opacity: 0; pointer-events: none; }
.cl-rate span { display: inline-block; font: 600 .8rem var(--font-body); padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--ink-2); background: #fff; min-width: 52px; text-align: center; }
.cl-rate input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 1px; }
.cl-ok input:checked + span { background: var(--ok-soft); border-color: var(--ok); color: #1d6b3d; }
.cl-concern input:checked + span { background: var(--warn-soft); border-color: var(--warn); color: #8a5800; }
.cl-nogo input:checked + span { background: var(--bad-soft); border-color: var(--bad); color: #a02c2c; }
.cl-na input:checked + span { background: var(--bg); border-color: var(--muted); color: var(--ink); }
.cl-note { padding: 7px 10px !important; font-size: .9rem; }
form.locked .cl-rate { cursor: default; }
.rate { display: inline-block; font: 600 .78rem var(--font-body); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.rate-ok { background: var(--ok-soft); color: #1d6b3d; }
.rate-concern { background: var(--warn-soft); color: #8a5800; }
.rate-nogo { background: var(--bad-soft); color: #a02c2c; }
.rate-na, .rate-none { background: var(--bg); color: var(--muted); }
.cl-n { font-size: .85rem; color: var(--ink-2); margin-top: 3px; white-space: normal; }
.cl-table td { vertical-align: top; }
.cl-table tr.cl-diff td { background: #fff8e8; }
.cl-table tr.cl-diff td:first-child { box-shadow: inset 4px 0 var(--warn); }
#cl-compare { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------- Go/no-go board ---------- */
.go { display: inline-block; font: 700 .78rem var(--font-body); padding: 4px 11px; border-radius: 999px; white-space: nowrap; border: 1.5px solid transparent; }
.go-on { background: var(--ok-soft); color: #1d6b3d; }
.go-marginal { background: var(--warn-soft); color: #8a5800; }
.go-tbc { background: var(--brand-soft); color: var(--navy); }
.go-off { background: var(--bad-soft); color: #a02c2c; }
.board-card { border-top: 4px solid var(--navy); }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.board-item { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 12px; align-items: start; text-align: left; font: inherit; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-left-width: 5px; border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; }
.board-item:hover { border-color: var(--brand); color: var(--ink); }
.board-item.go-on { border-left-color: var(--ok); }
.board-item.go-marginal { border-left-color: var(--warn); }
.board-item.go-tbc { border-left-color: var(--brand); }
.board-item.go-off { border-left-color: var(--bad); }
.board-item.go-on, .board-item.go-marginal, .board-item.go-tbc, .board-item.go-off { background: var(--surface); color: var(--ink); }
.board-when { display: grid; font-size: .82rem; color: var(--muted); grid-row: span 2; min-width: 74px; }
.board-when strong { font: 700 .98rem var(--font-head); color: var(--navy); }
.board-where { font-weight: 600; font-size: .92rem; min-width: 0; }
.board-reason { display: block; font-weight: 400; color: var(--ink-2); font-size: .84rem; }
.board-item > .go { grid-column: 2; justify-self: start; }
.go-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.form .go-pick label { margin: 0; cursor: pointer; }
.go-pick input { position: absolute; opacity: 0; }
.go-pick .go { padding: 8px 14px; opacity: .55; }
.go-pick input:checked + .go { opacity: 1; border-color: currentColor; }
.go-pick input:focus-visible + .go { outline: 2px solid var(--ink); }
.go-quick { display: flex; gap: 4px; flex-wrap: wrap; }
.go-quick .go { cursor: pointer; opacity: .45; padding: 3px 8px; font-size: .72rem; }
.go-quick .go.on, .go-quick .go:hover { opacity: 1; border-color: currentColor; }
body.embed { background: transparent; }
.board-embed { padding: 4px; }
.board-embed .card-head h2 { font-size: 1.1rem; }

/* ---------- Session log and logbook ---------- */
.flew { display: inline-block; font: 700 .78rem var(--font-body); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.flew-yes { background: var(--ok-soft); color: #1d6b3d; }
.flew-partly { background: var(--warn-soft); color: #8a5800; }
.flew-no { background: var(--bad-soft); color: #a02c2c; }
.acc { display: inline-block; font: 600 .78rem var(--font-body); padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.acc-poor { border-color: #f0c4c4; color: #a02c2c; }
.acc-good { border-color: #bfe3cc; color: #1d6b3d; }
.lead .flew, .lead .acc { vertical-align: middle; }
.log-filter { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.log-filter label { min-width: 200px; }
.log-list { display: grid; gap: 12px; }
.log-item { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; text-decoration: none; color: var(--ink); margin: 0; }
.log-item:hover { border-color: var(--brand); color: var(--ink); }
.log-date { display: grid; align-content: start; text-align: center; background: var(--brand-soft); border-radius: var(--radius-sm); padding: 8px 4px; color: var(--navy); }
.log-date strong { font: 600 1.05rem var(--font-head); }
.log-date span { font-size: .8rem; }
.log-body h3 { margin: 4px 0 2px; }
.log-body p { margin: 0 0 4px; font-size: .92rem; }
.log-lesson { color: var(--ink-2); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 12px; }
.facts dt { font: 600 .78rem var(--font-body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 2px; }
.facts dd { margin: 0; }
.lesson-card { border-top: 4px solid var(--accent); }
.outcome-card { border-top: 4px solid var(--navy); }
.lesson { background: var(--brand-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.obs-window { fill: rgba(15, 31, 51, .06); }
.obs-line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.obs-label { fill: var(--ink); font-weight: 800; }
.obs-row td { border-top: 2px solid var(--line); }
.narrow-wide { max-width: 860px; }

/* ---------- Day picker and upcoming analyses ---------- */
.top-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; margin-bottom: 18px; }
.top-cards > .card { margin: 0; }
.top-cards:not(:has(> :not([hidden]))) { display: none; }
.top-cards .board { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.day-pick { width: 100%; }
.day-tabs { display: flex; flex-wrap: wrap; border-radius: 14px; }
.day-tabs button { position: relative; }
.day-dot { position: absolute; top: 3px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.site-analysis { display: flex; gap: 10px 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%;
  background: #fff6e0; border: 1px solid #f5d48c; border-radius: var(--radius-sm); padding: 10px 12px; font-size: .92rem; }
.upcoming-card { border-top: 4px solid var(--accent); }
.upcoming { display: grid; gap: 8px; }
.up-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.up-date { display: grid; font-size: .82rem; color: var(--muted); }
.up-date strong { font: 700 .98rem var(--font-head); color: var(--navy); }
.up-body { display: grid; min-width: 0; }
.up-title { font-weight: 700; color: var(--ink); text-decoration: none; }
.up-title:hover { color: var(--brand); }
.up-done { color: var(--ok); }
.up-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) { .up-item { grid-template-columns: minmax(0, 1fr); } .up-actions { justify-content: flex-start; } }

/* ---------- Wind strip (model comparison) ---------- */
.ws-wrap { margin-top: 14px; }
.wstrip { border-collapse: separate; border-spacing: 2px; font-size: .78rem; width: auto; min-width: 100%; }
.wstrip thead th { font: 600 .72rem var(--font-body); color: var(--muted); text-align: center; padding: 0 0 2px; }
.ws-model { text-align: left; font: 600 .8rem var(--font-body); color: var(--ink-2); white-space: nowrap; padding-right: 8px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.ws-cell { text-align: center; min-width: 38px; padding: 4px 2px 3px; border-radius: 6px; line-height: 1.05; }
.ws-cell b { display: block; font-size: .88rem; }
.ws-cell small { display: block; font-size: .68rem; opacity: .85; }
.ws-arrow { display: block; width: 16px; height: 16px; margin: 0 auto 2px; }
.ws-none { background: var(--bg); color: var(--muted); }
.ws-obs { background: var(--ink); color: #fff; }

/* ---------- Student password page ---------- */
body.gate { min-height: 100vh; min-height: 100dvh; margin: 0; background-color: var(--navy);
  background-image: linear-gradient(160deg, rgba(0, 17, 40, .45), rgba(0, 0, 0, .6)), var(--img), var(--img-small);
  background-size: cover; background-position: center; background-attachment: fixed; }
.gate-main { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.gate-card { width: 100%; max-width: 420px; background: rgba(255, 255, 255, .96); border-radius: 16px; padding: 32px 28px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35); text-align: center; backdrop-filter: blur(6px); }
.gate-logo { height: 44px; width: auto; margin: 0 auto 10px; }
.gate-card .brand-text { display: block; margin-bottom: 8px; }
.gate-card .brand-sub { display: inline-block; margin-bottom: 18px; }
.gate-card h1 { font-size: 1.6rem; margin-bottom: 8px; }
.gate-card > p { color: var(--ink-2); margin-bottom: 18px; }
.gate-field { display: block; text-align: left; margin-bottom: 14px; }
.gate-field input { font-size: 1.05rem; padding: 12px 14px; }
.gate-btn { width: 100%; padding: 13px 20px; font-size: 1.02rem; }
.gate-note { font-size: .85rem; color: var(--muted) !important; margin: 14px 0 6px !important; }
.gate-links { font-size: .85rem; margin: 0 !important; }
.gate-card .flash { text-align: left; }

/* ---------- Skew-T ---------- */
.skewt { display: block; width: 100%; max-width: 760px; height: auto; min-width: 520px; font-family: var(--font-body); }
.skt-bg { fill: #fff; stroke: var(--line); }
.skt-isobar { stroke: #c6d0dc; stroke-width: 1; }
.skt-iso { fill: none; stroke: #d5dde7; stroke-width: 1; }
.skt-zero { stroke: #8fb3e0; stroke-width: 1.5; }
.skt-dry { fill: none; stroke: #e9c9a8; stroke-width: 1; }
.skt-moist { fill: none; stroke: #b9dcc9; stroke-width: 1; stroke-dasharray: 5 3; }
.skt-mix { fill: none; stroke: #c9c3e6; stroke-width: 1; stroke-dasharray: 2 3; }
.skt-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.skt-parcel { fill: none; stroke: #0f1f33; stroke-width: 1.5; stroke-dasharray: 6 4; }
.skt-mark { stroke-width: 1; stroke-dasharray: 3 3; }
.skt-m-base { stroke: #e87ba4; }
.skt-m-top { stroke: #eb6834; }
.skt-m-zero { stroke: #2a78d6; }
.skt-mlabel { font-size: 11px; fill: var(--ink); font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.skt-barb { fill: var(--ink); stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.skt-barb-calm { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.skt-hit { fill: transparent; }
.skt-wrap { position: relative; }
.skt-wrap .chart-tip { top: 0; }
.skt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.skt-facts > div { background: var(--bg); border-radius: var(--radius-sm); padding: 8px 12px; }
.skt-facts strong { font: 700 1.1rem var(--font-head); color: var(--navy); }
.skt-facts .label { margin-bottom: 2px; }
i.skt-ln-parcel { background: repeating-linear-gradient(90deg, #0f1f33 0 5px, transparent 5px 8px); }
i.skt-ln-dry { background: #e9c9a8; }
i.skt-ln-moist { background: #b9dcc9; }

@media print {
  .topstrip, .mainbar, .sitefoot, .no-print, .leaflet-control-container { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* Skew-T highlights and reading guide */
.skt-band-inv { fill: #eda100; fill-opacity: .16; }
.skt-band-moist { fill: #6f8aa8; fill-opacity: .14; }
.skt-cape { fill: #d03b3b; fill-opacity: .22; stroke: none; }
.skt-bl-inv { fill: #8a5d00; }
.skt-bl-moist { fill: #3d5674; }
.skt-bl-cape { fill: #a32626; }
i.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
i.skt-sw-inv { background: rgba(237,161,0,.35); }
i.skt-sw-moist { background: rgba(111,138,168,.35); }
i.skt-sw-cape { background: rgba(208,59,59,.4); }
.skt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); grid-template-areas: "chart notes" "howto notes"; gap: 18px 24px; align-items: start; }
.skt-grid > * { min-width: 0; }
.skt-chart { grid-area: chart; } .skt-guide { grid-area: notes; } .skt-howto { grid-area: howto; }
.skt-howto ol { columns: 2 280px; column-gap: 28px; }
.skt-howto li { break-inside: avoid; }
@media (max-width: 960px) { .skt-grid { grid-template-columns: 1fr; grid-template-areas: "chart" "notes" "howto"; } }
.skt-guide h3 { margin: 0 0 10px; font-size: 1rem; }
.skt-notes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.skt-notes li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; }
.skt-notes p { margin: 2px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.skt-notes strong { font-size: .92rem; color: var(--ink); }
.skt-key { width: 12px; height: 12px; border-radius: 3px; margin-top: 4px; background: var(--line); }
.skt-n-base .skt-key { background: #e87ba4; }
.skt-n-top .skt-key { background: #eb6834; }
.skt-n-inv .skt-key { background: rgba(237,161,0,.55); }
.skt-n-moist .skt-key { background: rgba(111,138,168,.5); }
.skt-n-cape .skt-key { background: rgba(208,59,59,.5); }
.skt-n-wind .skt-key { background: var(--ink); border-radius: 50%; }
.skt-n-zero .skt-key { background: #2a78d6; }
.skt-risk-warn strong, .skt-risk-bad strong { color: #b42828; }
.skt-risk-watch strong { color: #8a5d00; }
.skt-howto { border-top: 1px solid var(--line); padding-top: 12px; }
.skt-howto summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.skt-howto ol { margin: 10px 0 0; padding-left: 18px; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.skt-howto li { margin-bottom: 8px; }
.skt-howto li strong { color: var(--ink); }