/* Closest to the Pin — "forecast desk" theme, layered over shared/css/app.css.
   A weather service's look: overcast paper with faint isobars, slate ink, radar amber for
   action, storm violet and rain green. Big Shoulders Display over Public Sans (OFL,
   fonts/). Square corners and ruled panels, like a printed bulletin. */
:root {
  --blue: #F5A524; --blue-d: #E08E0B; --blue-l: #F8BE5B; --zen: #C9D6E3;
  --ink: #1B1F23; --ink2: #3F4851; --mute: #5D6670; --line: #C3CCD4; --line2: #D7DEE4;
  --paper: #E9EEF2; --coconut: #F6F8FA; --sand: #DCE4EB; --graphite: #262B30; --night: #15181B;
  --crimson: #C23B2C; --canopy: #B86A00; --gold: #F5A524; --navy: #2E3A46; --plum: #5B3FA6;
  --good: #2F7D37; --good-bg: #E2F1E3; --bad: #C23B2C; --bad-bg: #FBE7E3;
  --accent: #F5A524; --violet: #5B3FA6; --rain: #3F8F46;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font: 'Public Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --r: 4px; --top: 66px;
  --shadow: 0 1px 0 rgba(27, 31, 35, .08), 0 6px 18px rgba(27, 31, 35, .07);
  --star: #F5A524; --star-ink: #1B1F23;
  /* text on amber is ink; the hotspot ring and selection glow are amber and violet, not Dropbox blue */
  --on-blue: #1B1F23; --hs-ring: rgba(245, 165, 36, .35); --hs-pulse: rgba(245, 165, 36, .2); --sel-glow: rgba(91, 63, 166, .25);
}
body[data-theme="forecast"] {
  background-color: var(--paper);
  /* faint isobars: three wavy contour lines, repeated */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260' viewBox='0 0 520 260'%3E%3Cg fill='none' stroke='%23B9C5CF' stroke-width='1.2' opacity='.55'%3E%3Cpath d='M-20 60 C 80 20, 160 110, 260 70 S 440 30, 540 80'/%3E%3Cpath d='M-20 140 C 90 100, 170 190, 270 150 S 450 110, 540 160'/%3E%3Cpath d='M-20 220 C 70 185, 180 260, 280 225 S 430 195, 540 235'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
}
[data-theme="forecast"] h1, [data-theme="forecast"] h2, [data-theme="forecast"] h3, [data-theme="forecast"] h4 { font-stretch: 100%; font-weight: 800; letter-spacing: 0; line-height: 1.02; }
[data-theme="forecast"] .beathead h2 { font-size: clamp(32px, 4.4vw, 48px); max-width: 22ch; }
[data-theme="forecast"] .btn { border-radius: 3px; font-weight: 700; }
[data-theme="forecast"] .btn.primary { color: var(--ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
[data-theme="forecast"] .btn.primary:disabled { background: #C9D0D6; color: #fff; box-shadow: none; }
[data-theme="forecast"] :focus-visible { outline-color: var(--violet); }
/* on the dark surfaces violet is too dim to see (about 2:1): amber there */
[data-theme="forecast"] .top :focus-visible, [data-theme="forecast"] .rail :focus-visible, [data-theme="forecast"] .hero :focus-visible, [data-theme="forecast"] .player :focus-visible, [data-theme="forecast"] .simcall :focus-visible, [data-theme="forecast"] .flip.on:focus-visible { outline-color: var(--accent); }

/* top bar: a dark bulletin strip with an amber rule */
[data-theme="forecast"] .top { background: var(--ink); color: #EEF2F5; border-bottom: 4px solid var(--accent); backdrop-filter: none; }
[data-theme="forecast"] .brand { color: #EEF2F5; }
[data-theme="forecast"] .brand b { font-stretch: 100%; font-weight: 800; font-size: 24px; }
[data-theme="forecast"] .brand small { color: #9EA9B3; }
[data-theme="forecast"] .iconbtn { color: #EEF2F5; border-radius: 3px; }
[data-theme="forecast"] .iconbtn:hover { background: rgba(255, 255, 255, .1); }
[data-theme="forecast"] .xp { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); border-radius: 3px; }
[data-theme="forecast"] .xp .lv { background: var(--accent); color: var(--ink); border-radius: 3px; font-stretch: 100%; font-weight: 800; font-size: 16px; }
[data-theme="forecast"] .xp .meta small { color: #9EA9B3; }
[data-theme="forecast"] .xp .track { background: rgba(255, 255, 255, .16); }
[data-theme="forecast"] .xp .plus { color: var(--accent); }
[data-theme="forecast"] .combo { background: var(--violet); color: #fff; border-radius: 3px; }
[data-theme="forecast"] .menu { color: var(--ink); border-radius: 4px; }

/* the path sits on the right, as a list of station readings */
[data-theme="forecast"] .shell { grid-template-columns: minmax(0, 1fr) 290px; }
[data-theme="forecast"] .rail { order: 2; background: var(--ink); color: #DDE3E8; border-right: 0; border-left: 4px solid var(--accent); }
[data-theme="forecast"] .rail h3 { color: #fff; font-size: 24px; }
[data-theme="forecast"] .rail .sub, [data-theme="forecast"] .path .m, [data-theme="forecast"] .rail .meta, [data-theme="forecast"] .rail .reset, [data-theme="forecast"] .trophies h4 { color: #9EA9B3; }
[data-theme="forecast"] .path::before { background: repeating-linear-gradient(to bottom, #4A535C 0 4px, transparent 4px 9px); width: 2px; }
[data-theme="forecast"] .path .dot { border-radius: 3px; background: var(--ink); box-shadow: inset 0 0 0 2px #4A535C; color: #9EA9B3; font-stretch: 100%; font-weight: 800; font-size: 16px; }
[data-theme="forecast"] .path .done .dot { background: var(--rain); color: #fff; box-shadow: none; }
[data-theme="forecast"] .path .cur .dot { background: var(--accent); color: var(--ink); box-shadow: 0 0 0 5px rgba(245, 165, 36, .22); }
[data-theme="forecast"] .path button:hover .t { color: var(--accent); }
[data-theme="forecast"] .trophies { border-top-color: #3A424A; }
[data-theme="forecast"] .badge { background: #262B30; box-shadow: inset 0 0 0 1px #3A424A; border-radius: 3px; }
[data-theme="forecast"] .badge.on { box-shadow: inset 0 0 0 2px var(--accent); }

/* bulletin cards */
[data-theme="forecast"] .card { background: #fff; padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow), inset 0 0 0 1px var(--line2); border-top: 6px solid var(--ink); position: relative; }
[data-theme="forecast"] .card:has(.hero) { background: none; padding: 0; box-shadow: none; border-top: 0; }
[data-theme="forecast"] .eyebrow { color: var(--violet); font-weight: 700; }
[data-theme="forecast"] .eyebrow i { background: var(--accent); border-radius: 0; transform: none; width: 18px; height: 4px; }
[data-theme="forecast"] .footerbar { border-top: 2px solid var(--ink); }
[data-theme="forecast"] .steps i { border-radius: 0; height: 6px; }
[data-theme="forecast"] .steps i.on { background: var(--accent); }
[data-theme="forecast"] .panel { border-radius: 3px; border-left: 4px solid var(--accent); }
[data-theme="forecast"] .panel.white { border-left-color: var(--violet); }
[data-theme="forecast"] .panel.white.bad { border-left-color: var(--bad); }
[data-theme="forecast"] .linkbtn:hover { background: var(--coconut); }

/* coach: a radio operator's slip */
[data-theme="forecast"] .coach .ava { border-radius: 4px; background: #DCE4EB; box-shadow: none; }
[data-theme="forecast"] .coach .say { border-radius: 0 4px 4px 4px; background: #FFFBEF; box-shadow: inset 0 0 0 1px #EAD9AE; }
[data-theme="forecast"] .coach .name { color: #955600; }   /* a deeper canopy: passes AA on the note paper */
[data-theme="forecast"] .hear { background: #F6E8C6; border-radius: 3px; }

/* landing: a forecast map */
[data-theme="forecast"] .hero { border-radius: 4px; background: var(--ink); border-bottom: 6px solid var(--accent); }
[data-theme="forecast"] .hero h1 { font-size: clamp(44px, 6vw, 80px); font-weight: 900; line-height: .95; }
[data-theme="forecast"] .hero .kicker { color: var(--accent) !important; font-weight: 700; }
[data-theme="forecast"] .hero .art { background: #222830; padding: 0; }
[data-theme="forecast"] .hero .art img { max-height: none; height: 100%; object-fit: cover; }
[data-theme="forecast"] .hero .meta .chip { border-radius: 3px; }
[data-theme="forecast"] .hero .namebox input { border-radius: 3px; }
[data-theme="forecast"] .landing-below .kicker { font: 800 24px var(--display); color: var(--ink); }
[data-theme="forecast"] .modcard { background: #fff; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line2); border-left: 4px solid var(--accent); }
[data-theme="forecast"] .modcard:hover { box-shadow: inset 0 0 0 2px var(--ink); }
[data-theme="forecast"] .modcard b { font: 800 20px/1.05 var(--display); }

/* activities */
[data-theme="forecast"] .flip .f { background: var(--coconut); border-radius: 3px; border-top: 5px solid var(--violet); }
[data-theme="forecast"] .flip .f b { font-stretch: 100%; font-weight: 700; font-size: 24px; line-height: 1.05; }
[data-theme="forecast"] .flip .b { background: var(--ink); border-radius: 3px; border-top: 5px solid var(--accent); }
[data-theme="forecast"] .flip .b b { color: var(--accent); }
[data-theme="forecast"] .choice, [data-theme="forecast"] .tok, [data-theme="forecast"] .orow, [data-theme="forecast"] .bin, [data-theme="forecast"] .slot, [data-theme="forecast"] .swcard, [data-theme="forecast"] .stat, [data-theme="forecast"] .tray { border-radius: 3px; }
[data-theme="forecast"] .choice .k { border-radius: 2px; background: var(--ink); color: #fff; }
[data-theme="forecast"] .swcard .txt { font-stretch: 100%; font-weight: 700; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.1; }
[data-theme="forecast"] .qhead { font: 600 clamp(18px, 2vw, 21px)/1.4 var(--font); border-left: 4px solid var(--violet); padding-left: 14px; }
[data-theme="forecast"] .boss { border-radius: 3px; }
[data-theme="forecast"] .boss b { font-stretch: 100%; font-weight: 800; font-size: 24px; }
[data-theme="forecast"] .stat b, [data-theme="forecast"] .result .big, [data-theme="forecast"] .lightning .clock .t { font-stretch: 100%; font-weight: 800; }
[data-theme="forecast"] .lightning .clock .track i { background: var(--violet); }
[data-theme="forecast"] .player { border-radius: 4px; }
[data-theme="forecast"] .player .bigplay span { color: var(--ink); border-radius: 4px; }
[data-theme="forecast"] .player .bar i { background: var(--accent); }
[data-theme="forecast"] .hs { border-radius: 4px; }
[data-theme="forecast"] .hotwrap, [data-theme="forecast"] .huntwrap { border-radius: 3px; }
[data-theme="forecast"] .toast { border-radius: 4px; border-left: 5px solid var(--accent); }
[data-theme="forecast"] .toast .lvmedal { background: var(--accent); color: var(--ink); border-radius: 3px; font-weight: 800; }
[data-theme="forecast"] .foot-note { border-top-color: var(--line); }

/* a clean deal record (hotspot) */
.rec { font-size: 14px; color: var(--ink); background: #fff; }
.rechead { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--ink); color: #fff; }
.rechead b { font-size: 16px; } .rechead span { color: var(--accent); font-weight: 700; white-space: nowrap; }
.recgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line2); }
.recgrid > div { background: #fff; padding: 10px 46px 10px 14px; min-height: 52px; }
.recgrid .wide { grid-column: span 4; }
.recgrid .half { grid-column: span 2; }
.recgrid small { display: block; color: var(--mute); font-size: 14px; font-weight: 700; }
.recgrid b { font-size: 16px; }

/* a pipeline table (hunt) */
.crm { font-size: 14px; color: var(--ink); }
.crmbar { display: flex; justify-content: space-between; padding: 12px 16px; background: var(--ink); color: #fff; }
.crmbar span { color: #9EA9B3; }
.crm table { width: 100%; border-collapse: collapse; }
.crm th { text-align: left; font-size: 14px; color: var(--mute); padding: 8px 10px; border-bottom: 2px solid var(--ink); background: var(--coconut); }
.crm td { padding: 10px; border-bottom: 1px solid var(--line2); vertical-align: top; line-height: 1.4; }
.crm .huntable { padding: 1px 3px; margin: -1px -3px; }
.crmfoot { padding: 10px 16px; font-size: 14px; color: var(--mute); background: var(--coconut); }

/* the forecast week */
.week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.week div { background: var(--coconut); border-top: 5px solid var(--violet); padding: 14px 16px; }
.week b { display: block; font: 800 24px var(--display); }
.week span { font-size: 16px; color: var(--ink2); }

/* call the quarter (simulation) and the gut call */
.sim .simhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.sim .simhead .qn { font: 800 24px var(--display); }
.sim .simhead .qsub { color: var(--ink2); font-size: 16px; }
.sim .simdeals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sim .deal { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 3px; transition: border-color .15s, background .3s; }
.sim .deal[data-pick] { border-color: var(--ink2); }
.sim .dh { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.sim .dh b { font-size: 16px; } .sim .amt { font: 800 20px var(--display); white-space: nowrap; }
.sim .dp { font-size: 14px; color: var(--mute); }
.sim .claim { font-size: 14px; font-weight: 700; color: var(--violet); }
.sim ul { margin: 2px 0 4px; padding-left: 18px; font-size: 14px; color: var(--ink2); }
.sim .cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.sim .cats button { font: 700 14px var(--font); padding: 9px 4px; min-height: 40px; background: var(--coconut); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.sim .cats button:hover { border-color: var(--ink2); }
.sim .cats button[aria-checked="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.sim .cats button[aria-checked="true"][data-g="C"] { background: var(--rain); border-color: var(--rain); }
.sim .cats button[aria-checked="true"][data-g="B"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.sim .cats button[aria-checked="true"][data-g="P"] { background: #6F8FB0; border-color: #6F8FB0; }
.sim .deal.played .cats button { cursor: default; }
.sim .res:empty { display: none; }
.sim .res { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line2); font-size: 14px; color: var(--ink2); display: flex; flex-direction: column; gap: 3px; }
.sim .res b { font: 800 20px var(--display); }
.sim .res em { font-style: normal; color: var(--ink); }
.sim .deal.won { background: var(--good-bg); } .sim .deal.won .res b { color: var(--good); }
.sim .deal.slipped { background: #EEF1F4; } .sim .deal.slipped .res b { color: var(--mute); }
.sim .deal.wrongcat { border-color: var(--bad); border-left-width: 5px; }
.sim .simcall { margin-top: 16px; padding: 18px; background: var(--ink); color: #EEF2F5; border-radius: 3px; }
.sim .tally { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
.sim .tally small, .sim .callset label { display: block; font-size: 14px; color: #9EA9B3; font-weight: 700; }
.sim .tally b { font: 800 24px var(--display); }
.sim .callnum { display: flex; align-items: center; gap: 10px; }
.sim .callnum .btn { color: #fff; box-shadow: inset 0 0 0 1px #4A535C; width: 40px; justify-content: center; }
.sim .callnum .btn:hover { background: rgba(255, 255, 255, .12); }
.sim .callv { font: 900 44px var(--display); color: var(--accent); min-width: 120px; text-align: center; }
.sim input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; }
.sim .hint { color: #C3CCD4; margin: 10px 0 14px; }
.sim .simcall .btn.primary:disabled { background: #3A424A; color: #C3CCD4; }
.sim .verdict { margin-top: 16px; padding: 18px 20px; border-left: 6px solid var(--mute); background: #fff; border-top: 1px solid var(--line2); border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.sim .verdict.pin { border-left-color: var(--rain); } .sim .verdict.low { border-left-color: var(--violet); } .sim .verdict.high { border-left-color: var(--bad); }
.sim .verdict h3 { font-size: 32px; margin: 4px 0 6px; }
.sim .tip { font-size: 16px; color: var(--ink2); }
.sim .verdict .btn { margin-top: 8px; }
.sim .qtab { border-collapse: collapse; margin: 14px 0 6px; font-size: 16px; }
.sim .qtab th, .sim .qtab td { text-align: left; padding: 6px 18px 6px 0; border-bottom: 1px solid var(--line2); }
.sim .qtab th { font-size: 14px; color: var(--mute); }
.gut .gutlist { background: #fff; border: 1px solid var(--line); }
.gut .grow { display: grid; grid-template-columns: 1fr auto 70px; gap: 12px; align-items: baseline; padding: 9px 14px; border-top: 1px solid var(--line2); font-size: 16px; }
.gut .grow:first-child { border-top: 0; }
.gut .grow span { color: var(--violet); font-weight: 700; font-size: 14px; }
.gut .grow .amt { color: var(--ink); text-align: right; font-size: 20px; }
.gut .simcall .lock { margin-top: 14px; }

/* certificate (1650 x 1275): a forecast bulletin */
.fcert { width: 1650px; height: 1275px; position: relative; background: #F4F6F8; color: var(--ink); font-family: var(--font); overflow: hidden; display: flex; flex-direction: column; }
.fcert .iso { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='825' height='425' viewBox='0 0 520 260'%3E%3Cg fill='none' stroke='%23C3CCD4' stroke-width='1.4'%3E%3Cpath d='M-20 60 C 80 20, 160 110, 260 70 S 440 30, 540 80'/%3E%3Cpath d='M-20 140 C 90 100, 170 190, 270 150 S 450 110, 540 160'/%3E%3Cpath d='M-20 220 C 70 185, 180 260, 280 225 S 430 195, 540 235'/%3E%3C/g%3E%3C/svg%3E"); opacity: .7; }
.fcert .fhead { position: relative; display: flex; align-items: center; gap: 24px; background: var(--ink); color: #fff; padding: 46px 90px; border-bottom: 14px solid var(--accent); font: 800 46px var(--display); }
.fcert .fhead .mk { width: 82px; height: 82px; } .fcert .fhead .mk svg { width: 100%; height: 100%; }
.fcert .fhead .stamp { margin-left: auto; font: 700 24px var(--font); color: #9EA9B3; }
.fcert .fbody { position: relative; padding: 80px 90px 0; flex: 1; }
.fcert .k { font: 700 28px var(--font); color: var(--violet); }
.fcert .nm { font: 900 150px/0.95 var(--display); margin-top: 24px; overflow-wrap: anywhere; }
.fcert .nm.long { font-size: 112px; } .fcert .nm.longer { font-size: 84px; }
.fcert .line { font-size: 31px; line-height: 1.5; color: var(--ink2); max-width: 1180px; margin-top: 40px; }
.fcert .line b { color: var(--ink); }
.fcert .readings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); background: #fff; }
.fcert .readings div { padding: 24px 30px; border-left: 1px solid var(--line); }
.fcert .readings div:first-child { border-left: 0; }
.fcert .readings small { display: block; font-size: 21px; color: var(--mute); font-weight: 700; }
.fcert .readings b { font: 800 50px var(--display); white-space: nowrap; }
.fcert .fine { position: relative; padding: 0 90px 50px; font-size: 18px; color: var(--mute); line-height: 1.45; }

/* forecast card (portrait, 1275 x 1650) */
.ftake { width: 1275px; height: 1650px; background: #fff; color: var(--ink); font-family: var(--font); padding: 0 0 70px; display: flex; flex-direction: column; }
.ftake .th { display: flex; align-items: center; gap: 24px; padding: 50px 80px; background: var(--ink); color: #fff; border-bottom: 12px solid var(--accent); }
.ftake .th .mk { width: 76px; height: 76px; background: #fff; border-radius: 50%; padding: 4px; } .ftake .th .mk svg { width: 100%; height: 100%; }
.ftake .th b { font: 900 64px/1 var(--display); display: block; }
.ftake .th span { font-size: 22px; color: #9EA9B3; }
.ftake .th .who { margin-left: auto; text-align: right; font-size: 20px; color: #9EA9B3; }
.ftake .th .who b { font: 700 28px var(--font); color: #fff; }
.ftake .tb { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 46px; padding: 46px 80px 0; flex: 1; align-content: start; }
.ftake h4 { font: 800 34px var(--display); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 3px solid var(--accent); }
.ftake p, .ftake li { font-size: 21px; line-height: 1.45; }
.ftake ul { margin: 0; padding-left: 26px; } .ftake li { margin-bottom: 7px; }
.ftake .full { grid-column: 1 / -1; }
.ftake .box { background: var(--coconut); padding: 26px 30px; border-left: 8px solid var(--violet); }
.ftake .box h4 { border-bottom: 0; padding-bottom: 0; }
.ftake .fine { font-size: 16px; color: var(--mute); padding: 0 80px; }
.ftake .mine { border-left-color: var(--accent); padding: 22px 30px; }
.ftake .minegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; }
.ftake .minegrid small { display: block; font-size: 17px; font-weight: 700; color: var(--violet); }
.ftake .minegrid p { font-size: 19px; line-height: 1.4; max-height: 82px; overflow: hidden; overflow-wrap: anywhere; }
.ftake .minegrid .empty { color: var(--mute); }

@media (max-width: 1000px) {
  [data-theme="forecast"] .shell { grid-template-columns: 1fr; }
  [data-theme="forecast"] .rail { left: auto; right: 0; transform: translateX(102%); border-left: 4px solid var(--accent); }
  body[data-theme="forecast"].map-open .rail { transform: none; }
}
@media (max-width: 760px) {
  [data-theme="forecast"] .card { padding: 18px 16px; }
  [data-theme="forecast"] .main { padding: 16px 10px 32px; }
  [data-theme="forecast"] .brand b { font-size: 20px; }
  .sim .simdeals, .week { grid-template-columns: 1fr; }
  .sim .verdict .scoreboard { display: grid; grid-template-columns: 1fr 1fr; }
}