:root{color-scheme:dark;--bg:#09121e;--panel:#142338;--line:#25384d;--text:#e5effd;--muted:#8ca6c7;--subtle:#6e8fb5;--green:#8de5b5;--cyan:#80c6e8}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:radial-gradient(ellipse 90% 65% at 50% -25%,#1a3453 0%,var(--bg) 72%);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.01em}.shell{height:100dvh;max-width:1550px;margin:auto;padding:0 20px 12px;display:flex;flex-direction:column;min-height:0}.topbar{flex:0 0 83px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:12px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;border:1px solid #34516d;background:#172a40;color:var(--cyan);font-size:25px}.eyebrow,label{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--subtle)}h1{font-size:24px;letter-spacing:-.04em;margin:2px 0}h1 span{color:var(--cyan)}.muted,small{color:var(--muted);font-size:11px}.header-right{display:flex;align-items:center;gap:16px}.status{font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--muted);white-space:nowrap}.status.live{color:var(--green)}.status.stale{color:#e1c98b}.ranges{display:flex;gap:5px}.ranges button{background:#17283f;border:1px solid #294059;border-radius:6px;color:var(--muted);padding:7px 9px;cursor:pointer;font-size:11px}.ranges button:hover,.ranges button.active{border-color:var(--cyan);color:var(--cyan)}
.dashboard{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr 1fr 1fr 1fr;gap:10px;padding-top:10px}.metric,.panel{background:linear-gradient(155deg,#17283f,var(--panel) 68%);border:1px solid #294059;border-radius:11px;min-width:0;min-height:0;overflow:hidden}.metric{padding:12px 15px;display:flex;flex-direction:column;gap:3px}.metric strong{font-size:clamp(19px,2.3vw,30px);font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.metric small{font-size:11px}.temp{grid-column:1;grid-row:1}.humidity{grid-column:2;grid-row:1}.pressure{grid-column:3;grid-row:1}.sky{grid-column:1;grid-row:2}.rain{grid-column:2;grid-row:2}.reserved-top{grid-column:3;grid-row:2}.wind{grid-column:1 / 3;grid-row:3 / 5}.reserved-bottom-one{grid-column:3;grid-row:3}.reserved-bottom-two{grid-column:3;grid-row:4}.reserved{opacity:.35}.panel{padding:13px 17px}.panel-title{font-size:12px;font-weight:700;letter-spacing:.11em}.chart{flex:1;min-height:36px;margin-top:3px}.chart svg{width:100%;height:100%;overflow:hidden}.chart text{fill:var(--muted);font-size:11px}.chart-empty{display:grid;place-items:center;height:100%;color:var(--muted);font-size:11px}.legend{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}.legend i{width:12px;height:3px;display:inline-block;margin-left:6px}.legend .cyan{background:var(--cyan)}.legend .green{background:var(--green)}.rain-detail{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--muted)}.compass-wrap{display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,75px);height:calc(100% - 52px);min-height:0}.compass-wrap svg{height:100%;max-width:55%;width:auto;min-height:0}.wind-numbers{display:flex;flex-direction:column;align-items:flex-start}.wind-numbers strong{font-size:clamp(28px,4vw,48px)}.instrument-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:8px;font-size:11px;color:var(--muted)}.error{color:#e5a1a1;font-size:11px;margin:3px 0 0;max-height:22px;overflow:hidden}
@media(max-height:720px){.topbar{flex-basis:66px}.brand-mark{width:35px;height:35px}.metric{padding:8px 11px}.metric strong{font-size:21px}.panel{padding:9px 12px}.dashboard{gap:7px;padding-top:7px}.chart{min-height:24px}.metric small{font-size:10px}}
@media(max-width:700px){.shell{padding:0 8px 8px}.topbar{flex-basis:72px}.brand-mark{display:none}h1{font-size:18px}.eyebrow{font-size:8px}.header-right{flex-direction:column;align-items:flex-end;gap:4px}.ranges button{font-size:9px;padding:4px}.dashboard{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr))}.temp{grid-area:1/1}.humidity{grid-area:1/2}.pressure{grid-area:2/1}.sky{grid-area:2/2}.rain{grid-area:3/1}.reserved-top{grid-area:3/2}.wind{grid-area:4/1/6/3}.reserved-bottom-one,.reserved-bottom-two{display:none}.compass-wrap svg{max-width:45%}}

/* Six readable instrument tiles, two equal rows. */
.topbar{flex:0 0 auto;min-height:86px;flex-wrap:wrap;padding:10px 0;gap:10px 22px}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(9px,1.2vw,20px);font-size:12px}
.site-nav a,.overview-breadcrumb a{color:var(--muted);text-decoration:none}
.site-nav a:hover,.overview-breadcrumb a:hover{color:var(--cyan)}
.overview-breadcrumb{font-size:11px;letter-spacing:.09em;color:var(--subtle);white-space:nowrap}
.dashboard-controls{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0 0}
.dashboard{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;padding-top:10px}
.temp{grid-area:1/1}.humidity{grid-area:1/2}.pressure{grid-area:1/3}.sky{grid-area:2/1}.rain{grid-area:2/2}.wind{grid-area:2/3}
.metric{padding:clamp(12px,1.4vw,20px);gap:7px}
.metric strong{font-size:clamp(25px,2.5vw,37px)}
.metric small,.rain-detail,.instrument-foot{font-size:clamp(11px,.9vw,13px)}
.chart{min-height:80px;margin-top:8px}
.chart text{font-size:15px}
.panel{padding:clamp(12px,1.4vw,20px);display:flex;flex-direction:column}
.compass-wrap{flex:1;height:auto;min-height:0;gap:clamp(8px,1.5vw,24px)}
.compass-wrap svg{width:min(55%,240px);height:auto;max-height:100%;flex-shrink:1}
.wind-numbers strong{font-size:clamp(28px,3vw,45px)}
.instrument-foot{flex:0 0 auto;gap:5px;padding-top:9px}
@media(max-height:720px){.topbar{min-height:68px}.metric{padding:10px 13px;gap:4px}.metric strong{font-size:clamp(22px,2.2vw,30px)}.chart{margin-top:4px;min-height:60px}.dashboard{gap:9px}.panel{padding:10px 13px}}
@media(max-width:900px){.topbar{min-height:0}.site-nav{order:3;width:100%;justify-content:flex-start}.dashboard{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}.temp{grid-area:1/1}.humidity{grid-area:1/2}.pressure{grid-area:2/1}.sky{grid-area:2/2}.rain{grid-area:3/1}.wind{grid-area:3/2}.metric strong{font-size:clamp(20px,3vw,30px)}}
@media(max-width:540px){.shell{padding:0 8px 8px}.topbar{gap:5px}.brand-mark{display:none}.site-nav{font-size:10px;gap:8px}.overview-breadcrumb{font-size:9px}.dashboard{gap:6px;padding-top:6px}.metric,.panel{padding:8px}.metric{gap:2px}.metric strong{font-size:clamp(17px,4vw,24px)}.metric small{font-size:10px}.chart{min-height:25px;margin-top:2px}.chart text{font-size:16px}.compass-wrap{gap:3px}.compass-wrap svg{width:55%}.wind-numbers strong{font-size:23px}.instrument-foot{font-size:9px}.dashboard-controls{padding-top:5px}.ranges button{font-size:10px;padding:5px}.status{font-size:9px}}

.brand-logo{display:block;width:clamp(48px,5vw,76px);height:clamp(48px,5vw,76px);object-fit:contain;flex-shrink:0}
@media(max-width:700px){.brand-logo{width:48px;height:48px}}

/* Shared TSOLive header geometry: keep navigation stable between sites. */
@media (min-width: 1251px) {
  .shell {
    max-width: 1800px;
    padding-left: 32px;
    padding-right: 32px;
  }
  .topbar {
    min-height: 76px;
    flex: 0 0 76px;
    padding: 0;
    gap: 20px;
    flex-wrap: nowrap;
  }
  .brand { gap: 12px; }
  .brand-logo { width: 55px; height: 55px; border-radius: 12px; }
  .brand h1 { font-size: 25px; line-height: 1; margin: 0; font-weight: 720; }
  .eyebrow {
    margin: 0 0 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
  }
  #updated { font-size: 11px; margin-top: 5px; }
  .site-nav {
    margin-left: auto;
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 8px 18px;
    font-size: 11px;
  }
  .site-nav a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
  }
}
.site-nav a[aria-current="page"] { color: var(--cyan); }
@media (min-width: 901px) and (max-width: 1250px) {
  .shell { max-width: 1800px; padding-left: 26px; padding-right: 26px; }
  .topbar { gap: 20px; }
  .site-nav { margin-left: auto; justify-content: flex-end; gap: 8px 18px; }
  .site-nav a { font-size: 11px; font-weight: 600; white-space: nowrap; }
}