/* ===========================================================
   Purple Weather Bureau — /predictions/
   Minnesota Vikings predictions and odds, presented as a
   regional forecast centre.
   Every class in this file is prefixed wb-. Nothing here is
   used by any other page on the site.
   =========================================================== */

/* ---------- self-hosted wide tabular numeral face ---------- */
@font-face{
  font-family:"Archivo Expanded WB";
  src:url("/assets/fonts/archivo-expanded-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo Expanded WB";
  src:url("/assets/fonts/archivo-expanded-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo Expanded WB";
  src:url("/assets/fonts/archivo-expanded-900.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;
}

/* ---------- tokens ---------- */
.page-bureau{
  --wb-sky:#dce3e8;
  --wb-sky-2:#ccd6de;
  --wb-sky-3:#bcc8d2;
  --wb-cloud:#f7f8f8;
  --wb-cloud-2:#eceff1;
  --wb-purple:#4f2683;
  --wb-purple-d:#38195e;
  --wb-purple-ink:#2a1450;
  --wb-purple-l:#6a3ba8;
  --wb-gold:#ffc62f;
  --wb-gold-f:#e8a800;
  --wb-gold-ink:#6b4a00;
  --wb-ink:#202329;
  --wb-ink-2:#454a55;
  --wb-ink-3:#5d6673;
  --wb-line:#b9c3cc;
  --wb-line-d:#8b98a4;
  --wb-coral:#d65a4a;
  --wb-coral-ink:#9e3323;
  --wb-green-ink:#1b5f46;
  --wb-glass:rgba(255,255,255,.55);

  --wb-display:var(--display);
  --wb-body:var(--body);
  --wb-num:"Archivo Expanded WB",var(--display),"Arial Black",sans-serif;
  --wb-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  --wb-r:4px;
  --wb-shadow:0 2px 10px rgba(32,35,41,.10);
  --wb-shadow-2:0 10px 30px rgba(32,35,41,.16);

  background:var(--wb-sky);
  color:var(--wb-ink);
}

.page-bureau main{
  background:
    linear-gradient(180deg,#d4dde4 0,var(--wb-sky) 340px,var(--wb-sky) 100%);
}

/* focus: gold fails on the pale ground, so the ring is purple with a
   light halo that keeps it visible over dark studio panels too */
.page-bureau :focus-visible{
  outline:3px solid var(--wb-purple);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,198,47,.55);
  border-radius:2px;
}
.page-bureau .wb-dark :focus-visible{
  outline:3px solid var(--wb-gold);
  box-shadow:0 0 0 6px rgba(255,255,255,.35);
}

/* ---------- shared type ---------- */
.page-bureau .wb-sec{padding:48px 0}
.page-bureau .wb-sec-tight{padding:34px 0}
.page-bureau .wb-h2{
  font-family:var(--wb-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(21px,2.5vw,30px);line-height:1.08;letter-spacing:.015em;
  color:var(--wb-purple-ink);margin:0;
}
.page-bureau .wb-h3{
  font-family:var(--wb-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(15px,1.5vw,18px);line-height:1.15;letter-spacing:.05em;
  color:var(--wb-purple-ink);margin:0;
}
.page-bureau .wb-h4{
  font-family:var(--wb-display);font-weight:600;text-transform:uppercase;
  font-size:13px;letter-spacing:.09em;color:var(--wb-ink-2);margin:0;
}
.page-bureau .wb-sechead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:20px;
  border-bottom:2px solid var(--wb-line-d);padding-bottom:10px;
}
.page-bureau .wb-sechead > *{min-width:0}
.page-bureau .wb-kicker{
  font-family:var(--wb-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wb-ink-2);margin:0 0 6px;
}
.page-bureau .wb-p{margin:0 0 14px;max-width:72ch;font-size:16.5px;line-height:1.62;color:var(--wb-ink)}
.page-bureau .wb-p:last-child{margin-bottom:0}
.page-bureau .wb-p a{color:var(--wb-purple);text-decoration:underline;text-underline-offset:3px}
.page-bureau .wb-p a:hover{color:var(--wb-purple-l)}
.page-bureau .wb-list{margin:0 0 14px;padding-left:0;max-width:72ch}
.page-bureau .wb-list li{
  position:relative;padding-left:22px;margin-bottom:7px;line-height:1.55;
}
.page-bureau .wb-list li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:2px;background:var(--wb-purple);
}
.page-bureau .wb-note{
  font-size:14px;color:var(--wb-ink-2);margin:0;max-width:72ch;line-height:1.55;
}

/* ---------- the timestamp always travels with the number ---------- */
.page-bureau .wb-odds{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  vertical-align:baseline;
}
.page-bureau .wb-odds-r{align-items:flex-end}
.page-bureau .wb-odds-c{align-items:center}
.page-bureau .wb-odds-num{
  font-family:var(--wb-num);font-weight:700;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;letter-spacing:.005em;
  font-size:clamp(19px,2.2vw,26px);line-height:1.06;color:var(--wb-purple-ink);
  white-space:nowrap;
}
.page-bureau .wb-odds-sm .wb-odds-num{font-size:clamp(16px,1.5vw,19px)}
.page-bureau .wb-odds-when{
  font-family:var(--wb-mono);font-size:10.5px;line-height:1.3;letter-spacing:.05em;
  text-transform:uppercase;color:var(--wb-ink-2);white-space:normal;
}
.page-bureau .wb-odds-when time{white-space:nowrap}
.page-bureau .wb-illus .wb-odds-num{color:var(--wb-ink)}
.page-bureau .wb-stamp{
  font-family:var(--wb-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--wb-ink-2);
}

/* market vs editorial: two permanently different badges */
.page-bureau .wb-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--wb-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;font-weight:700;
}
.page-bureau .wb-badge-market{background:var(--wb-purple);color:#fff}
.page-bureau .wb-badge-editorial{
  background:repeating-linear-gradient(135deg,#f4ecd8 0 6px,#efe3c6 6px 12px);
  color:var(--wb-gold-ink);border:1px solid var(--wb-gold-f);
}
.page-bureau .wb-badge-illus{background:#e6eaee;color:var(--wb-ink-2);border:1px solid var(--wb-line-d)}
.page-bureau .wb-badge .wb-i{width:13px;height:13px;flex:none}

/* an editorial block is always on the hatched warm ground with a gold rule */
.page-bureau .wb-editorial{
  border:1px solid var(--wb-gold-f);
  border-left:6px solid var(--wb-gold);
  background:linear-gradient(180deg,#fffdf6,#fbf6e8);
  border-radius:var(--wb-r);
}
/* a market block is always white glass with a purple rule */
.page-bureau .wb-market{
  border:1px solid var(--wb-line);
  border-left:6px solid var(--wb-purple);
  background:var(--wb-cloud);
  border-radius:var(--wb-r);
}

/* ---------- tables ---------- */
.page-bureau .wb-tw{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--wb-line);background:var(--wb-cloud);border-radius:var(--wb-r);
}
.page-bureau .wb-tw:focus-visible{outline-offset:0}
.page-bureau table.wb-t{
  width:100%;border-collapse:collapse;font-size:15px;min-width:460px;
}
.page-bureau table.wb-t caption{
  text-align:left;padding:12px 14px;font-family:var(--wb-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--wb-ink-2);
  border-bottom:1px solid var(--wb-line);background:var(--wb-cloud-2);
}
.page-bureau table.wb-t th,
.page-bureau table.wb-t td{
  border:1px solid var(--wb-line);padding:11px 13px;text-align:left;vertical-align:top;
}
.page-bureau table.wb-t thead th{
  background:var(--wb-purple-ink);color:#fff;font-family:var(--wb-display);
  font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:12px;
  border-color:var(--wb-purple-ink);
}
.page-bureau table.wb-t tbody th{
  font-family:var(--wb-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:13px;color:var(--wb-purple-ink);white-space:nowrap;
}
.page-bureau table.wb-t tr.wb-zebra td,
.page-bureau table.wb-t tr.wb-zebra th{background:#eef1f4}
.page-bureau table.wb-t td.wb-num{
  font-family:var(--wb-num);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;font-weight:600;text-align:right;white-space:nowrap;
}
.page-bureau table.wb-t.wb-t-editorial thead th{background:var(--wb-gold-ink);border-color:var(--wb-gold-ink)}
.page-bureau .wb-scrollhint{display:none}
@media (max-width:760px){
  .page-bureau .wb-scrollhint{
    display:block;font-family:var(--wb-mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--wb-ink-2);margin:7px 0 0;
  }
}

/* =========================================================
   1. Forecast-window hero
   ========================================================= */
.page-bureau .wb-hero{
  position:relative;padding:26px 0 40px;
  background:linear-gradient(180deg,#c6d1da,#dce3e8 78%);
  border-bottom:3px solid var(--wb-purple-ink);
}
.page-bureau .wb-crumb{
  font-family:var(--wb-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wb-ink-2);margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.page-bureau .wb-crumb a{color:var(--wb-purple);text-decoration:underline;text-underline-offset:3px}
.page-bureau .wb-crumb .wb-i{width:11px;height:11px;flex:none;color:var(--wb-ink-3)}

.page-bureau .wb-window{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;
  border:14px solid #2f3440;border-radius:6px;
  box-shadow:var(--wb-shadow-2),inset 0 0 0 2px #575e6d;
  overflow:hidden;background:#2f3440;
}
.page-bureau .wb-window > *{min-width:0}

/* --- the studio view. Swap for the photograph with the single line
       marked ONE-LINE BANNER SWAP below. --- */
.page-bureau .wb-view{
  position:relative;min-height:340px;overflow:hidden;background:#5b6472;
}
/* Photograph layer, empty until a banner file exists. It sits above the drawn
   artwork, so the SVG stays in place as the fallback and needs no edit.
   ONE-LINE BANNER SWAP -- add exactly this line to switch to the photograph:
   .page-bureau .wb-view-photo{display:block;background-image:url("/assets/img/predictions-banner.webp")}
   (If you do, also reword the aria-label on .wb-view-art so the description
   matches the photograph rather than the drawing.) */
.page-bureau .wb-view-photo{
  position:absolute;inset:0;display:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.page-bureau .wb-view-art{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.page-bureau .wb-view-glass{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.20) 0 12%,rgba(255,255,255,0) 34%),
    linear-gradient(115deg,rgba(255,255,255,0) 52%,rgba(255,255,255,.11) 62%,rgba(255,255,255,0) 74%);
}
.page-bureau .wb-view-mullion{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - 3px),rgba(47,52,64,.85) calc(50% - 3px) calc(50% + 3px),transparent calc(50% + 3px)),
    linear-gradient(180deg,transparent calc(62% - 3px),rgba(47,52,64,.85) calc(62% - 3px) calc(62% + 3px),transparent calc(62% + 3px));
}
.page-bureau .wb-view-cap{
  position:absolute;left:0;right:0;bottom:0;padding:10px 14px;
  background:linear-gradient(180deg,rgba(18,11,34,.55),rgba(18,11,34,.94));
  color:#fff;font-family:var(--wb-mono);font-size:11px;letter-spacing:.08em;line-height:1.45;
}

/* --- the broadcast panel --- */
.page-bureau .wb-panel{
  background:linear-gradient(180deg,var(--wb-purple-ink),#1d0e39);
  color:#fff;padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px;
}
.page-bureau .wb-panel-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-bureau .wb-mflag{
  display:inline-flex;align-items:center;gap:8px;background:var(--wb-gold);color:#231800;
  font-family:var(--wb-mono);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:6px 11px;border-radius:2px;
}
.page-bureau .wb-mflag .wb-i{width:14px;height:14px;flex:none}
.page-bureau .wb-panel h1{
  font-family:var(--wb-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.5vw,42px);line-height:1.02;letter-spacing:.01em;margin:0;color:#fff;
}
.page-bureau .wb-panel-fix{
  font-family:var(--wb-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:15px;color:var(--wb-gold);margin:0;
}
.page-bureau .wb-panel-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.22);border-radius:3px;
}
.page-bureau .wb-panel-cell{
  background:rgba(255,255,255,.06);padding:11px 12px;min-width:0;
  display:flex;flex-direction:column;gap:4px;
}
.page-bureau .wb-panel-cell .wb-h4{color:rgba(255,255,255,.78)}
.page-bureau .wb-panel-cell .wb-odds-num{color:#fff}
.page-bureau .wb-panel-cell .wb-odds-when{color:var(--wb-gold)}
.page-bureau .wb-panel-cell .wb-val{
  font-family:var(--wb-num);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(17px,1.9vw,21px);line-height:1.1;color:#fff;
}
.page-bureau .wb-panel-cell .wb-val-t{
  font-family:var(--wb-display);font-weight:600;text-transform:uppercase;
  font-size:15px;letter-spacing:.03em;color:#fff;line-height:1.2;
}
.page-bureau .wb-panel-disc{
  border-top:1px solid rgba(255,255,255,.25);padding-top:11px;
  font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.9);margin:0;
}
.page-bureau .wb-panel-disc b{color:var(--wb-gold)}
.page-bureau .wb-panel-updated{
  font-family:var(--wb-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--wb-gold);margin:0;
}

/* on-page index */
.page-bureau .wb-index{
  margin-top:22px;border:1px solid var(--wb-line);background:var(--wb-cloud);
  border-radius:var(--wb-r);padding:14px 16px;
}
.page-bureau .wb-index ul{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0 0}
.page-bureau .wb-index a{
  display:inline-flex;align-items:center;min-height:34px;padding:6px 11px;
  border:1px solid var(--wb-line-d);border-radius:2px;background:#fff;
  font-family:var(--wb-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:12px;color:var(--wb-purple-ink);
}
.page-bureau .wb-index a:hover{background:var(--wb-purple);color:#fff;border-color:var(--wb-purple)}

/* =========================================================
   2. Instruments
   ========================================================= */
.page-bureau .wb-instr-strip{position:relative}
.page-bureau .wb-instr{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
}
.page-bureau .wb-instr > *{min-width:0}
.page-bureau .wb-gauge{
  background:linear-gradient(180deg,#fff,#eef1f4);
  border:1px solid var(--wb-line-d);border-radius:var(--wb-r);
  box-shadow:var(--wb-shadow);padding:16px 15px 15px;
  display:flex;flex-direction:column;gap:11px;
}
.page-bureau .wb-gauge-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.page-bureau .wb-gauge-head > *{min-width:0}
.page-bureau .wb-gauge-art{
  width:100%;height:140px;display:block;margin:0 auto;
}
.page-bureau .wb-gauge-read{
  border-top:1px solid var(--wb-line);padding-top:10px;
}
.page-bureau .wb-gauge-val{
  font-family:var(--wb-num);font-weight:900;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;font-size:clamp(22px,2.4vw,28px);line-height:1.05;
  color:var(--wb-purple-ink);display:block;
}
.page-bureau .wb-gauge-val-t{
  font-family:var(--wb-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,1.7vw,20px);letter-spacing:.03em;line-height:1.12;
  color:var(--wb-purple-ink);display:block;
}
.page-bureau .wb-gauge-sub{
  font-family:var(--wb-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wb-ink-2);display:block;margin-top:5px;line-height:1.4;
}
.page-bureau .wb-gauge-note{font-size:13.5px;line-height:1.5;color:var(--wb-ink-2);margin:0}
.page-bureau .wb-instr-nav{display:none}

/* =========================================================
   3. Forecast front
   ========================================================= */
.page-bureau .wb-front{
  background:linear-gradient(180deg,#241243,#160a2c);border-radius:var(--wb-r);
  padding:18px 18px 14px;box-shadow:var(--wb-shadow-2);
}
.page-bureau .wb-front-art{width:100%;height:auto;display:block}
.page-bureau .wb-front-legend{
  display:flex;flex-wrap:wrap;gap:14px;margin:13px 0 0;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.22);
}
.page-bureau .wb-front-legend li{
  display:flex;align-items:center;gap:8px;padding-left:0;margin:0;
  font-family:var(--wb-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.page-bureau .wb-front-legend li::before{display:none}
.page-bureau .wb-swatch{width:16px;height:16px;border-radius:2px;flex:none;border:1px solid rgba(255,255,255,.5)}
.page-bureau .wb-swatch-spread{background:var(--wb-gold)}
.page-bureau .wb-swatch-total{background:#8f6fd4}
.page-bureau .wb-swatch-storm{background:var(--wb-coral)}

/* =========================================================
   4. Pressure systems
   ========================================================= */
.page-bureau .wb-press{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px) minmax(0,1fr);
  gap:16px;align-items:stretch;
}
.page-bureau .wb-press > *{min-width:0}
.page-bureau .wb-sys{
  border-radius:var(--wb-r);padding:16px 16px 14px;box-shadow:var(--wb-shadow);
  display:flex;flex-direction:column;gap:10px;
}
.page-bureau .wb-sys-high{background:linear-gradient(180deg,#3a1c68,#291149);color:#fff}
.page-bureau .wb-sys-low{
  background:linear-gradient(180deg,#fdf3d8,#f6e6bb);color:var(--wb-ink);
  border:1px solid var(--wb-gold-f);
}
.page-bureau .wb-sys-badge{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:var(--wb-mono);font-weight:700;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 10px;border-radius:2px;
}
.page-bureau .wb-sys-high .wb-sys-badge{background:var(--wb-gold);color:#231800}
.page-bureau .wb-sys-low .wb-sys-badge{background:var(--wb-purple);color:#fff}
.page-bureau .wb-sys-badge .wb-i{width:16px;height:16px;flex:none}
.page-bureau .wb-sys h3{color:inherit}
.page-bureau .wb-sys-high h3{color:#fff}
.page-bureau .wb-sys-items{margin:0;display:flex;flex-direction:column;gap:9px}
.page-bureau .wb-sys-items li{padding-left:0;margin:0}
.page-bureau .wb-sys-items li::before{display:none}
.page-bureau .wb-sys-items b{
  display:block;font-family:var(--wb-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:13px;
}
.page-bureau .wb-sys-high .wb-sys-items b{color:var(--wb-gold)}
.page-bureau .wb-sys-low .wb-sys-items b{color:var(--wb-purple)}
.page-bureau .wb-sys-items span{display:block;font-size:14px;line-height:1.5}
.page-bureau .wb-sys-high .wb-sys-items span{color:rgba(255,255,255,.88)}
.page-bureau .wb-conv{
  background:var(--wb-cloud);border:1px solid var(--wb-line-d);border-radius:var(--wb-r);
  padding:16px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;box-shadow:var(--wb-shadow);
}
.page-bureau .wb-conv-art{width:100%;max-width:200px;height:110px;display:block}
.page-bureau .wb-conv-score{
  font-family:var(--wb-num);font-weight:900;font-variant-numeric:tabular-nums;
  font-size:clamp(26px,3vw,34px);line-height:1.02;color:var(--wb-purple-ink);
}

/* =========================================================
   5. Warning lights
   ========================================================= */
.page-bureau .wb-lights{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
}
.page-bureau .wb-lights > *{min-width:0}
.page-bureau .wb-light{
  border:1px solid var(--wb-line-d);border-radius:var(--wb-r);background:var(--wb-cloud);
  box-shadow:var(--wb-shadow);overflow:hidden;
}
.page-bureau .wb-light > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:12px 14px;min-height:56px;
}
.page-bureau .wb-light > summary::-webkit-details-marker{display:none}
.page-bureau .wb-light > summary:hover{background:#eef1f4}
.page-bureau .wb-lamp{
  width:24px;height:24px;flex:none;border-radius:50%;
  border:3px solid #6d7684;background:#c6cdd5;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.28);
}
.page-bureau .wb-light-on .wb-lamp{
  background:var(--wb-coral);border-color:#7d2718;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.28),0 0 0 4px rgba(214,90,74,.28);
}
.page-bureau .wb-light-txt{flex:1 1 auto;min-width:0}
.page-bureau .wb-light-name{
  display:block;font-family:var(--wb-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:14px;color:var(--wb-purple-ink);line-height:1.2;
}
.page-bureau .wb-light-state{
  display:block;font-family:var(--wb-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;margin-top:3px;
}
.page-bureau .wb-light-off .wb-light-state{color:var(--wb-ink-2)}
.page-bureau .wb-light-on .wb-light-state{color:var(--wb-coral-ink);font-weight:700}
.page-bureau .wb-light-chev{width:16px;height:16px;flex:none;color:var(--wb-purple);transition:transform 200ms}
.page-bureau .wb-light[open] .wb-light-chev{transform:rotate(180deg)}
.page-bureau .wb-light-body{border-top:1px solid var(--wb-line);padding:14px}
.page-bureau .wb-revision{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px;
}
.page-bureau .wb-revision > *{min-width:0}
.page-bureau .wb-rev-cell{
  border:1px solid var(--wb-line);border-radius:2px;padding:10px 11px;background:#fff;
}
.page-bureau .wb-rev-prev{background:#eef1f4}
.page-bureau .wb-rev-cell .wb-h4{margin-bottom:6px}
.page-bureau .wb-rev-cell p{margin:0;font-size:13.5px;line-height:1.5}

/* =========================================================
   6. Seventeen-week strip
   ========================================================= */
.page-bureau .wb-cond-key{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:18px;
}
.page-bureau .wb-cond-key > *{min-width:0}
.page-bureau .wb-cond{
  display:flex;gap:10px;align-items:flex-start;background:var(--wb-cloud);
  border:1px solid var(--wb-line);border-radius:var(--wb-r);padding:11px 12px;
}
.page-bureau .wb-cond .wb-sym{flex:none}
.page-bureau .wb-cond b{
  display:block;font-family:var(--wb-display);font-weight:600;text-transform:uppercase;
  font-size:12.5px;letter-spacing:.05em;color:var(--wb-purple-ink);line-height:1.2;
}
.page-bureau .wb-cond span{display:block;font-size:13px;line-height:1.45;color:var(--wb-ink-2);margin-top:3px}
.page-bureau .wb-sym{width:34px;height:34px;display:block;color:var(--wb-purple)}
.page-bureau .wb-sym-sun{color:var(--wb-gold-ink)}
.page-bureau .wb-sym-storm{color:var(--wb-coral-ink)}

.page-bureau ol.wb-weeks{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px;
  margin:0;padding:0;list-style:none;
}
.page-bureau .wb-weeks > *{min-width:0}
.page-bureau .wb-week{
  background:var(--wb-cloud);border:1px solid var(--wb-line-d);border-radius:var(--wb-r);
  padding:11px 11px 12px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--wb-shadow);
}
.page-bureau .wb-week-lead{border-color:var(--wb-purple);border-width:2px;background:#fff}
.page-bureau .wb-week-no{
  font-family:var(--wb-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--wb-ink-2);
}
.page-bureau .wb-week-opp{
  font-family:var(--wb-display);font-weight:600;text-transform:uppercase;font-size:13px;
  letter-spacing:.03em;color:var(--wb-purple-ink);line-height:1.2;
}
.page-bureau .wb-week-cond{
  font-family:var(--wb-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wb-ink-2);line-height:1.35;
}
.page-bureau .wb-week-note{font-size:12.5px;line-height:1.45;color:var(--wb-ink-2);margin:0}
.page-bureau .wb-week-score{
  font-family:var(--wb-num);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:16px;color:var(--wb-purple-ink);
}

/* =========================================================
   7. Climate dial
   ========================================================= */
.page-bureau .wb-climate{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:22px;align-items:start;
}
.page-bureau .wb-climate > *{min-width:0}
.page-bureau .wb-dial-wrap{
  background:linear-gradient(180deg,#fffdf6,#f6ecd6);border:1px solid var(--wb-gold-f);
  border-radius:var(--wb-r);padding:16px;box-shadow:var(--wb-shadow);
}
.page-bureau .wb-dial{width:100%;height:auto;max-width:288px;margin:0 auto;display:block}
.page-bureau .wb-dial-key{display:flex;flex-direction:column;gap:8px;margin:14px 0 0}
.page-bureau .wb-dial-key li{display:flex;align-items:center;gap:9px;padding-left:0;margin:0;font-size:13.5px}
.page-bureau .wb-dial-key li::before{display:none}
.page-bureau .wb-dial-key .wb-swatch{border-color:var(--wb-line-d)}
.page-bureau .wb-dial-key b{
  margin-left:auto;font-family:var(--wb-num);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:15px;color:var(--wb-purple-ink);
}
.page-bureau .wb-arc-1{background:#2a1450}
.page-bureau .wb-arc-2{background:#4f2683}
.page-bureau .wb-arc-3{background:#8f6fd4}
.page-bureau .wb-arc-4{background:var(--wb-gold)}
.page-bureau .wb-season-vals{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px;
}
.page-bureau .wb-season-vals > *{min-width:0}
.page-bureau .wb-sv{
  border:1px solid var(--wb-gold-f);border-top:5px solid var(--wb-gold);
  background:linear-gradient(180deg,#fffdf6,#fbf6e8);
  border-radius:var(--wb-r);padding:12px 13px;
}
.page-bureau .wb-sv .wb-h4{margin-bottom:6px}
.page-bureau .wb-sv b{
  font-family:var(--wb-num);font-weight:900;font-variant-numeric:tabular-nums;
  font-size:clamp(24px,2.6vw,30px);line-height:1.02;color:var(--wb-purple-ink);display:block;
}
.page-bureau .wb-sv span{
  display:block;font-family:var(--wb-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--wb-gold-ink);margin-top:5px;
}

/* =========================================================
   8. Quarterback visibility screen
   ========================================================= */
.page-bureau .wb-screen{
  background:linear-gradient(180deg,#111826,#0b111c);border-radius:var(--wb-r);
  padding:16px;box-shadow:var(--wb-shadow-2);border:1px solid #2c3547;
}
.page-bureau .wb-screen-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:11px;margin-bottom:13px;
}
.page-bureau .wb-screen-head .wb-h3{color:#fff}
.page-bureau .wb-screen-tag{
  font-family:var(--wb-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#8fe3c0;margin-left:auto;
}
.page-bureau .wb-vis{display:flex;flex-direction:column;gap:10px;margin:0}
.page-bureau .wb-vis li{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,130px) minmax(0,215px);
  gap:12px;align-items:center;padding:11px 12px;margin:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:2px;
}
.page-bureau .wb-vis li::before{display:none}
.page-bureau .wb-vis li > *{min-width:0}
.page-bureau .wb-vis-name{
  font-family:var(--wb-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:15px;color:#fff;
}
.page-bureau .wb-vis-name a{color:#ffd76a;text-decoration:underline;text-underline-offset:3px}
.page-bureau .wb-vis-role{
  font-family:var(--wb-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.page-bureau .wb-vis-read{display:flex;align-items:center;gap:9px}
.page-bureau .wb-vis-bar{
  flex:1 1 auto;min-width:0;height:9px;border-radius:5px;background:rgba(255,255,255,.18);overflow:hidden;
}
.page-bureau .wb-vis-fill{display:block;height:100%;background:var(--wb-gold)}
.page-bureau .wb-vis-val{
  font-family:var(--wb-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;white-space:nowrap;
}

/* =========================================================
   9. Prediction archive — hanging files
   ========================================================= */
.page-bureau .wb-files{display:flex;flex-direction:column;gap:14px}
.page-bureau .wb-file{
  background:linear-gradient(180deg,#fffef9,#f4f1e7);
  border:1px solid var(--wb-line-d);border-top:none;border-radius:0 0 var(--wb-r) var(--wb-r);
  box-shadow:var(--wb-shadow);position:relative;padding:0 0 14px;
}
.page-bureau .wb-file-tab{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--wb-purple-ink);color:#fff;padding:9px 14px;
  border-radius:var(--wb-r) var(--wb-r) 0 0;
}
.page-bureau .wb-file-tab .wb-h3{color:#fff}
.page-bureau .wb-file-status{
  margin-left:auto;font-family:var(--wb-mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;background:var(--wb-gold);color:#231800;padding:4px 9px;border-radius:2px;
}
.page-bureau .wb-file-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;
  background:#fffef9;border-bottom:1px solid var(--wb-line);
}
.page-bureau .wb-file-grid > *{min-width:0}
.page-bureau .wb-file-cell{
  background:#fffef9;padding:12px 14px;
  border-top:1px solid var(--wb-line);border-right:1px solid var(--wb-line);
}
.page-bureau .wb-file-cell .wb-h4{margin-bottom:6px}
.page-bureau .wb-file-cell p{margin:0;font-size:14px;line-height:1.5}
.page-bureau .wb-file-foot{padding:12px 14px 0}

/* =========================================================
   10. Record table / rainfall chart placeholder
   ========================================================= */
.page-bureau .wb-empty{
  border:2px dashed var(--wb-line-d);border-radius:var(--wb-r);background:var(--wb-cloud);
  padding:20px;display:flex;gap:16px;align-items:flex-start;margin-top:16px;
}
.page-bureau .wb-empty > *{min-width:0}
.page-bureau .wb-empty-art{width:74px;height:74px;flex:none;color:var(--wb-line-d)}

/* =========================================================
   11. Odds explanation desk
   ========================================================= */
.page-bureau .wb-desk{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;
}
.page-bureau .wb-desk > *{min-width:0}
.page-bureau .wb-card{
  background:var(--wb-cloud);border:1px solid var(--wb-line-d);border-radius:var(--wb-r);
  box-shadow:var(--wb-shadow);display:flex;flex-direction:column;overflow:hidden;
}
.page-bureau .wb-card-head{
  background:linear-gradient(180deg,#3a1c68,#2a1450);color:#fff;padding:13px 15px;
  display:flex;align-items:center;gap:11px;
}
.page-bureau .wb-card-head .wb-i{width:24px;height:24px;flex:none;color:var(--wb-gold)}
.page-bureau .wb-card-head h3{color:#fff}
.page-bureau .wb-card-body{padding:14px 15px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.page-bureau .wb-card-body .wb-tw{border-radius:2px}
.page-bureau .wb-card-body table.wb-t{min-width:0;font-size:14px}
.page-bureau .wb-card-body table.wb-t th,
.page-bureau .wb-card-body table.wb-t td{padding:8px 10px}

/* =========================================================
   12. Responsible-use panel
   ========================================================= */
.page-bureau .wb-care{
  background:var(--wb-cloud);border:1px solid var(--wb-line-d);
  border-left:6px solid var(--wb-purple);border-radius:var(--wb-r);
  padding:18px 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:18px;align-items:start;box-shadow:var(--wb-shadow);
}
.page-bureau .wb-care > *{min-width:0}
.page-bureau .wb-care-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.page-bureau .wb-care-head .wb-i{width:22px;height:22px;flex:none;color:var(--wb-purple)}
.page-bureau .wb-care p{margin:0 0 10px;font-size:15px;line-height:1.6;max-width:66ch}
.page-bureau .wb-care p:last-child{margin-bottom:0}
.page-bureau .wb-care-quote{
  border-left:3px solid var(--wb-gold);padding-left:12px;font-size:15.5px;
}
.page-bureau .wb-care-age{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--wb-mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:#e6eaee;border:1px solid var(--wb-line-d);color:var(--wb-ink);
  padding:6px 10px;border-radius:2px;
}
.page-bureau .wb-care-res{
  background:#fff;border:1px solid var(--wb-line);border-radius:var(--wb-r);padding:14px;
}
.page-bureau .wb-care-res ul{margin:9px 0 0;display:flex;flex-direction:column;gap:9px}
.page-bureau .wb-care-res li{padding-left:0;margin:0}
.page-bureau .wb-care-res li::before{display:none}
.page-bureau .wb-care-res a{
  display:inline-flex;align-items:center;min-height:44px;gap:9px;
  color:var(--wb-purple);text-decoration:underline;text-underline-offset:3px;
  font-family:var(--wb-num);font-weight:700;font-variant-numeric:tabular-nums;font-size:19px;
}
.page-bureau .wb-care-res a.wb-care-site{font-family:var(--wb-body);font-weight:400;font-size:15px}
.page-bureau .wb-care-res .wb-i{width:19px;height:19px;flex:none}
.page-bureau .wb-care-res p{font-size:13.5px;color:var(--wb-ink-2)}

/* =========================================================
   FAQ
   ========================================================= */
.page-bureau .wb-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.page-bureau .wb-faq > *{min-width:0}
.page-bureau .wb-qa{
  background:var(--wb-cloud);border:1px solid var(--wb-line);border-radius:var(--wb-r);padding:14px 15px;
}
.page-bureau .wb-qa h3{margin-bottom:7px}
.page-bureau .wb-qa p{margin:0;font-size:14.5px;line-height:1.58}

/* related links */
.page-bureau .wb-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.page-bureau .wb-links > *{min-width:0}
.page-bureau .wb-link{
  display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 14px;
  background:var(--wb-cloud);border:1px solid var(--wb-line-d);border-radius:var(--wb-r);
  font-family:var(--wb-display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  font-size:13px;color:var(--wb-purple-ink);box-shadow:var(--wb-shadow);
}
.page-bureau .wb-link .wb-i{width:16px;height:16px;flex:none;color:var(--wb-purple);margin-left:auto}
.page-bureau .wb-link:hover{background:var(--wb-purple);color:#fff;border-color:var(--wb-purple)}
.page-bureau .wb-link:hover .wb-i{color:var(--wb-gold)}

/* generic inline icon default so nothing renders at 300x150 */
.page-bureau .wb-i{width:18px;height:18px;display:inline-block;vertical-align:middle}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .page-bureau .wb-press{grid-template-columns:1fr}
  .page-bureau .wb-climate{grid-template-columns:1fr}
  .page-bureau .wb-instr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .page-bureau .wb-window{grid-template-columns:1fr;border-width:10px}
  .page-bureau .wb-view{min-height:230px}
  .page-bureau .wb-care{grid-template-columns:1fr}
  .page-bureau .wb-vis li{grid-template-columns:1fr;gap:7px}
}
@media (max-width:700px){
  .page-bureau .wb-sec{padding:34px 0}
  /* instruments become a one-at-a-time swipe area */
  .page-bureau .wb-instr{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:10px;scroll-padding-left:0;
  }
  .page-bureau .wb-instr > .wb-gauge{
    flex:0 0 86%;scroll-snap-align:start;
  }
  .page-bureau .wb-instr-nav{
    display:flex;align-items:center;gap:10px;margin-top:6px;
  }
  .page-bureau .wb-instr-btn{
    width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--wb-line-d);border-radius:50%;background:var(--wb-cloud);
    color:var(--wb-purple-ink);
  }
  .page-bureau .wb-instr-btn[disabled]{opacity:.4;cursor:default}
  .page-bureau .wb-instr-btn .wb-i{width:18px;height:18px}
  .page-bureau .wb-instr-pos{
    font-family:var(--wb-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--wb-ink-2);
  }
  .page-bureau .wb-instr-flip{transform:scaleX(-1)}
  /* seasonal forecast becomes a vertical list */
  .page-bureau ol.wb-weeks{grid-template-columns:1fr}
  .page-bureau .wb-week{
    display:grid;grid-template-columns:56px minmax(0,1fr);
    grid-template-areas:"no opp" "sym cond" "sym note";
    column-gap:12px;row-gap:4px;align-items:start;
  }
  .page-bureau .wb-week > .wb-week-no{grid-area:no}
  .page-bureau .wb-week > .wb-week-opp{grid-area:opp}
  .page-bureau .wb-week > .wb-sym{grid-area:sym;align-self:center}
  .page-bureau .wb-week > .wb-week-cond{grid-area:cond}
  .page-bureau .wb-week > .wb-week-note{grid-area:note}
  .page-bureau .wb-panel{padding:16px 15px 18px}
  .page-bureau .wb-panel-grid{grid-template-columns:1fr}
  /* the number and its checked time stay in one unbreakable block */
  .page-bureau .wb-odds{display:inline-flex}
  .page-bureau table.wb-t{min-width:0}
  .page-bureau table.wb-t,
  .page-bureau table.wb-t tbody,
  .page-bureau table.wb-t tr{display:block;width:100%}
  .page-bureau table.wb-t thead{position:absolute;left:-9999px}
  .page-bureau table.wb-t caption{display:block;width:100%;box-sizing:border-box}
  .page-bureau table.wb-t tbody th{white-space:normal}
  .page-bureau table.wb-t.wb-t-stack tr{
    border:1px solid var(--wb-line);margin-bottom:-1px;
  }
  .page-bureau table.wb-t.wb-t-stack th,
  .page-bureau table.wb-t.wb-t-stack td{
    display:block;border:none;border-bottom:1px solid var(--wb-line);white-space:normal;
  }
  .page-bureau table.wb-t.wb-t-stack td.wb-num{text-align:left}
  .page-bureau table.wb-t.wb-t-stack td[data-lab]::before{
    content:attr(data-lab);display:block;font-family:var(--wb-mono);font-size:10.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--wb-ink-2);margin-bottom:3px;
  }
  .page-bureau table.wb-t.wb-t-stack tr:last-child td:last-child{border-bottom:none}
}
@media (max-width:520px){
  .page-bureau .wb-window{border-width:8px}
  .page-bureau .wb-index ul{gap:6px}
  .page-bureau .wb-cond-key{grid-template-columns:1fr}
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .page-bureau .wb-front-sweep,
  .page-bureau .wb-front-marker,
  .page-bureau .wb-gauge-needle,
  .page-bureau .wb-lamp,
  .page-bureau .wb-light-chev,
  .page-bureau .wb-reveal{
    animation:none !important;transition:none !important;
  }
  .page-bureau .wb-reveal,
  .page-bureau .wb-reveal.wb-in,
  .page-bureau .wb-in .wb-front-sweep{opacity:1 !important;transform:none !important;animation:none !important}
  .page-bureau .wb-instr{scroll-behavior:auto}
}

/* Entrance animation is purely additive: nothing is hidden by default, so
   with this stylesheet's script blocked every panel, gauge and chart line is
   still fully visible. The script only adds .wb-in to play the animation. */
.page-bureau .wb-reveal.wb-in{animation:wb-rise 520ms ease both}
@keyframes wb-rise{from{opacity:.25;transform:translateY(14px)}to{opacity:1;transform:none}}
.page-bureau .wb-in .wb-front-sweep{animation:wb-sweep 1400ms ease-out both}
@keyframes wb-sweep{from{stroke-dashoffset:640}to{stroke-dashoffset:0}}


/* ---------- visibility pips (three-step scale, always labelled in text) ---------- */
.page-bureau .wb-pips{display:inline-flex;gap:4px;flex:none}
.page-bureau .wb-pip{
  width:12px;height:12px;border-radius:2px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.45);display:block;
}
.page-bureau .wb-pip-on{background:var(--wb-gold);border-color:#8a6000}

/* ---------- illustration tables are visually cooler than market tables ---------- */
.page-bureau .wb-illus{background:#eef1f4}
.page-bureau .wb-illus table.wb-t thead th{background:#4b515c;border-color:#4b515c}
.page-bureau .wb-illus table.wb-t caption{background:#e2e7eb;color:var(--wb-ink-2)}