/* Whenfair — timetable house style.
   Printed-schedule vernacular: white ground, structural rules instead of cards,
   no shadows, no rounded corners, one signal red running the burden ramp. */

:root{
  color-scheme:light dark;

  --paper:#FFFFFF;
  --paper-2:#F3F2EE;
  --paper-3:#E7E6E0;

  --ink:#0C0C0B;
  --ink-2:#4C4C47;
  --ink-3:#7A7A72;

  --rule:#D6D5CE;
  --rule-strong:#0C0C0B;

  --signal:#C2402A;
  --signal-2:#9C3120;
  --signal-ink:#FFFFFF;
  --signal-wash:#F8ECE8;
  --invert-accent:#E8775C;

  /* burden ramp: neutral-calm through to signal */
  --b0-bg:#E7EAE1; --b0-fg:#2B3225;
  --b1-bg:#F4EADF; --b1-fg:#5C4526;
  --b2-bg:#F2D2C4; --b2-fg:#6E2D1A;
  --b3-bg:#E19C84; --b3-fg:#4A1708;
  --b4-bg:#C2402A; --b4-fg:#FDEFEB;

  --display:'Familjen Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body:'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#0D0D0C;
    --paper-2:#161615;
    --paper-3:#22221F;

    --ink:#F0EFEA;
    --ink-2:#A9A8A0;
    --ink-3:#77766E;

    --rule:#2B2B28;
    --rule-strong:#F0EFEA;

    --signal:#E2563C;
    --signal-2:#F07F68;
    --signal-ink:#140804;
    --signal-wash:#231310;
    --invert-accent:#A8371F;

    --b0-bg:#1E211B; --b0-fg:#C4CCB7;
    --b1-bg:#2C2519; --b1-fg:#DCC79B;
    --b2-bg:#452A1F; --b2-fg:#EFAB91;
    --b3-bg:#6D3422; --b3-fg:#FAC1AB;
    --b4-bg:#B33F27; --b4-fg:#FFEAE3;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
p{margin:0}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:700; text-wrap:balance;}
a{color:var(--ink); text-underline-offset:3px; text-decoration-thickness:1px;}
a:hover{color:var(--signal)}
:focus-visible{outline:2px solid var(--signal); outline-offset:2px;}

.wrap{max-width:1120px; margin:0 auto; padding-inline:24px;}

.eyebrow{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------------------------------------------------------------- header */
.topbar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
  background:var(--paper); border-bottom:1px solid var(--rule-strong);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:10px;
}
.mark{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:18px;
  letter-spacing:-.02em; color:var(--ink);
}
.mark:hover{color:var(--ink)}
.mark svg{display:block}

.btn{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; border-radius:0; padding:9px 16px;
  border:1px solid var(--signal); background:var(--signal);
  color:var(--signal-ink); text-decoration:none; display:inline-block;
}
.btn:hover{background:var(--signal-2); border-color:var(--signal-2); color:var(--signal-ink);}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule-strong);}
.btn.ghost:hover{background:var(--ink); color:var(--paper);}

/* ------------------------------------------------------------------ hero */
.hero{padding-block:52px 34px; border-bottom:3px solid var(--rule-strong);}
.hero h1{
  font-size:clamp(36px,7vw,68px); font-weight:700;
  letter-spacing:-.035em; line-height:.98;
  max-width:15ch; margin-block:14px 18px;
}
.hero .lede{
  font-size:clamp(16px,2.1vw,18px); color:var(--ink-2);
  max-width:58ch; line-height:1.55;
}
.hero .lede em{font-style:normal; color:var(--ink); font-weight:600; box-shadow:inset 0 -.4em 0 var(--signal-wash);}

main .wrap{display:flex; flex-direction:column; padding-block:0 64px;}

/* --------------------------------------------------------------- section */
.panel{background:transparent; border:0; border-radius:0; box-shadow:none;}
.panel + .panel, .verdict + .panel, .panel + .verdict{border-top:1px solid var(--rule);}
.panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px 20px; flex-wrap:wrap; padding:22px 0 12px;
}
.panel-head h2{
  font-size:20px; font-weight:700; letter-spacing:-.02em;
}
.panel-head .note{
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  line-height:1.45; max-width:62ch;
}
.panel-body{padding:0 0 30px;}

/* --------------------------------------------------------------- roster */
.controls{display:flex; flex-direction:column; gap:16px;}
.chips{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--rule-strong);}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px; font-size:13.5px; font-weight:500;
  border-right:1px solid var(--rule); border-radius:0;
  background:transparent;
}
.chip:last-child{border-right:0}
.chip .off{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.02em;}
.chip .nodst{color:var(--signal); font-weight:600;}
.chip .hc{
  font-family:var(--mono); font-size:10.5px; font-weight:500; color:var(--ink-3);
  background:transparent; border:1px solid var(--rule); border-radius:0;
  padding:2px 6px; cursor:pointer;
}
.chip .hc:hover{border-color:var(--signal); color:var(--signal);}
.chip .x{
  border:0; background:transparent; color:var(--ink-3);
  cursor:pointer; font-size:15px; line-height:1; padding:2px 3px;
}
.chip .x:hover{color:var(--signal)}

.fields{display:flex; flex-wrap:wrap; gap:16px 22px; align-items:flex-end;}
.field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.field label{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
select,input[type='date'],input[type='number'],input[type='email']{
  font-family:var(--body); font-size:13.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule-strong);
  border-radius:0; padding:8px 10px; min-height:38px;
}
.field input[type='number']{width:76px}

/* -------------------------------------------------------------- verdict */
.verdict{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:26px 0 30px; display:flex; flex-direction:column; gap:20px;
}
.headline{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 20px;}
.headline .slot{
  font-family:var(--display); font-weight:700;
  font-size:clamp(46px,10vw,88px); letter-spacing:-.05em;
  line-height:.85; font-variant-numeric:tabular-nums;
}
.headline .slot span{
  font-family:var(--mono); color:var(--signal);
  font-size:.22em; letter-spacing:.14em; margin-left:10px; vertical-align:baseline;
}
.headline .eyebrow{padding-bottom:6px}
.verdict-note{font-size:14.5px; color:var(--ink-2); max-width:72ch; line-height:1.6;}

.locals{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:0; border-block:1px solid var(--rule-strong); border-radius:0; background:transparent;
}
.local{
  padding:14px 14px; display:flex; flex-direction:column; gap:3px;
  border-right:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.local:last-child{border-right:0}
.local .city{font-size:11px; text-transform:uppercase; letter-spacing:.09em; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.local .t{font-family:var(--mono); font-size:23px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.local .tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.85;}

.b0{background:var(--b0-bg); color:var(--b0-fg)}
.b1{background:var(--b1-bg); color:var(--b1-fg)}
.b2{background:var(--b2-bg); color:var(--b2-fg)}
.b3{background:var(--b3-bg); color:var(--b3-fg)}
.b4{background:var(--b4-bg); color:var(--b4-fg)}

.frontier{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0; border:1px solid var(--rule);}
.fcard{
  text-align:left; font-family:var(--body); cursor:pointer;
  background:transparent; color:var(--ink);
  border:0; border-right:1px solid var(--rule); border-radius:0;
  padding:14px 16px; display:flex; flex-direction:column; gap:4px;
}
.fcard:last-child{border-right:0}
.fcard:hover{background:var(--paper-2)}
.fcard.on{background:var(--signal-wash); box-shadow:inset 0 3px 0 var(--signal);}
.fcard .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);}
.fcard .v{font-family:var(--mono); font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.fcard .m{font-size:12px; color:var(--ink-2); line-height:1.4;}

.anchor{
  display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--ink-2);
  background:transparent; border-left:3px solid var(--signal);
  border-radius:0; padding:4px 0 4px 15px; line-height:1.55;
}
.anchor b{color:var(--ink); font-weight:600}
.anchor code{font-family:var(--mono); font-size:12px;}

/* ----------------------------------------------------------------- grid */
.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%}

.hgrid{font-family:var(--mono); font-size:10.5px; font-variant-numeric:tabular-nums; min-width:820px;}
.hgrid th,.hgrid td{padding:0; text-align:center}
.hgrid thead th{
  font-weight:400; color:var(--ink-3); padding-bottom:7px; font-size:9.5px; letter-spacing:.02em;
}
.hgrid thead th.hr{cursor:pointer}
.hgrid thead th.hr:hover{color:var(--signal)}
.hgrid thead th.hr.on{background:var(--ink); color:var(--paper); font-weight:600;}
.hgrid th.cityname{
  position:sticky; left:0; z-index:2; background:var(--paper); text-align:left;
  font-family:var(--body); font-size:12px; font-weight:500; color:var(--ink);
  padding-right:14px; white-space:nowrap; border-right:1px solid var(--rule-strong);
}
.hgrid tbody td{
  height:29px; width:3.35%;
  border-right:1px solid color-mix(in srgb, var(--paper) 70%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 70%, transparent);
}
.hgrid tbody td.pick{box-shadow:inset 0 0 0 2px var(--ink); font-weight:600; position:relative; z-index:1;}
.hgrid td.dayshift::after{content:attr(data-shift); font-size:7.5px; vertical-align:super; opacity:.65;}
.hgrid tr.totals td{height:26px; font-size:9.5px; color:var(--ink-3); background:transparent; border:0;}
.hgrid tr.totals th.cityname{
  font-size:9.5px; color:var(--ink-3); font-family:var(--mono);
  letter-spacing:.14em; text-transform:uppercase; border-right-color:var(--rule);
}

.legend{display:flex; flex-wrap:wrap; gap:7px 18px; margin-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);}
.legend span{display:inline-flex; align-items:center; gap:7px}
.swatch{width:14px; height:14px; border-radius:0; display:inline-block}

/* ------------------------------------------------------------ stability */
.stab{font-size:12.5px; min-width:680px}
.stab th{
  text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
  padding:0 10px 9px 0; border-bottom:1px solid var(--rule-strong);
}
.stab td{padding:7px 10px 7px 0; border-bottom:1px solid var(--rule);}
.stab td.num{font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;}
.strip{display:flex; gap:2px}
.strip i{width:13px; height:19px; border-radius:0; display:block}
.stab .best td{background:var(--signal-wash)}
.stab .best td.num:first-child{box-shadow:inset 3px 0 0 var(--signal)}
.stab .drift{font-family:var(--mono); font-size:11px; color:var(--ink-3); white-space:nowrap;}
.stab .drift.moves{color:var(--signal); font-weight:600;}

/* --------------------------------------------------------------- ledger */
.ledger{font-size:12.5px; min-width:560px}
.ledger th{
  text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
  padding:0 12px 9px 0; border-bottom:1px solid var(--rule-strong);
}
.ledger td{padding:8px 12px 8px 0; border-bottom:1px solid var(--rule); vertical-align:middle;}
.ledger td.d{white-space:nowrap; color:var(--ink-2); font-family:var(--mono); font-size:11.5px;}
.ledger td.s{font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;}
.who{display:flex; flex-wrap:wrap; gap:5px}
.who em{
  font-style:normal; font-family:var(--mono); font-size:10px;
  letter-spacing:.03em; padding:3px 7px; border-radius:0; white-space:nowrap;
}

.tally{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px; margin-top:28px;}
.tally h3{font-size:14px; font-weight:700; margin-bottom:12px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;}
.tally h3 small{
  font-family:var(--mono); font-weight:400; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.bars{display:flex; flex-direction:column; gap:6px}
.bar{display:grid; grid-template-columns:1fr 36px; align-items:center; gap:10px}
.bar .track{height:24px; background:var(--paper-3); border-radius:0; overflow:hidden; position:relative;}
.bar .fill{height:100%; background:var(--ink); opacity:.16}
.bar .fill.hot{background:var(--signal); opacity:.9}
.bar .lbl{
  position:absolute; inset:0; display:flex; align-items:center; padding-left:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink);
}
.bar .num{font-family:var(--mono); font-size:11.5px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2);}

.payoff{
  margin-top:22px; font-size:14px; color:var(--ink-2); line-height:1.6;
  background:transparent; border-radius:0;
  border-left:3px solid var(--signal); padding:2px 0 2px 15px; max-width:76ch;
}
.payoff b{color:var(--ink); font-weight:600}

/* ----------------------------------------------------------------- team */
.team{
  background:var(--ink); color:var(--paper);
  border-radius:0; overflow:hidden; box-shadow:none; margin-top:36px;
}
.team .inner{padding:40px 32px; display:grid; grid-template-columns:1.15fr 1fr; gap:40px;}
@media (max-width:780px){ .team .inner{grid-template-columns:1fr; gap:30px; padding:28px 20px} }
.team h2{
  font-family:var(--display); font-size:clamp(24px,3.6vw,34px); font-weight:700;
  letter-spacing:-.03em; line-height:1.05; margin-bottom:14px; color:var(--paper);
}
.team p{color:color-mix(in srgb, var(--paper) 68%, transparent); font-size:14.5px; max-width:48ch; line-height:1.6;}
.team .eyebrow{color:var(--invert-accent); margin-bottom:10px}

.feats{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:0;}
.feats li{
  display:grid; grid-template-columns:30px 1fr; gap:12px; font-size:13.5px; line-height:1.55;
  color:color-mix(in srgb, var(--paper) 82%, transparent);
  padding:12px 0; border-top:1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.feats li b{color:var(--paper); font-weight:600}
.feats li span.ic{font-family:var(--mono); font-size:10.5px; color:var(--invert-accent); letter-spacing:.02em;}

.signup{
  background:transparent; border:1px solid color-mix(in srgb, var(--paper) 26%, transparent);
  border-radius:0; padding:24px; align-self:start;
}
.signup label{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:color-mix(in srgb, var(--paper) 62%, transparent); margin-bottom:9px;
}
.signup input[type='email']{
  width:100%; background:transparent; border-radius:0;
  border:1px solid color-mix(in srgb, var(--paper) 30%, transparent); color:var(--paper);
}
.signup input[type='email']::placeholder{color:color-mix(in srgb, var(--paper) 40%, transparent)}
.signup input[type='email']:focus-visible{outline-color:var(--invert-accent)}
.signup .btn{width:100%; margin-top:12px; text-align:center;}
.signup .small{
  font-size:11.5px; line-height:1.5; margin-top:12px;
  color:color-mix(in srgb, var(--paper) 52%, transparent);
}
.signup .ok{font-size:14px; color:var(--invert-accent); font-weight:500; line-height:1.55;}

/* --------------------------------------------------------------- footer */
footer.site{border-top:3px solid var(--rule-strong); padding-block:24px 48px; font-size:12.5px; color:var(--ink-3); line-height:1.6;}
footer.site .wrap{display:flex; flex-direction:column; gap:12px; max-width:1120px;}
footer.site p{max-width:78ch}
footer.site code{font-family:var(--mono); font-size:11px; color:var(--ink-2);}
footer.site .row{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:14px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}

@media (max-width:560px){
  .wrap{padding-inline:18px}
  .hero{padding-block:36px 26px}
  .chips{flex-direction:column}
  .chip{border-right:0; border-bottom:1px solid var(--rule)}
  .chip:last-child{border-bottom:0}
  .fcard{border-right:0; border-bottom:1px solid var(--rule)}
  .fcard:last-child{border-bottom:0}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

/* ------------------------------------------------- roster disclosure */
/* Desktop keeps the full control panel open and hides the summary row.
   Under 700px the answer comes first and the controls collapse to one line. */
.roster-summary{display:none}
#rosterbox > summary::-webkit-details-marker{display:none}
#rosterbox > summary::marker{content:''}

@media (max-width:700px){
  /* the verdict is the product — it must be the first thing on a phone */
  .verdict{order:-1; padding-top:20px;}
  .verdict + .panel{border-top:0}
  #roster-head{display:none}

  .roster-summary{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    list-style:none; cursor:pointer;
    padding:13px 0; margin-top:4px;
    border-top:1px solid var(--rule-strong);
    border-bottom:1px solid var(--rule);
  }
  .roster-summary .rs-text{
    font-family:var(--mono); font-size:11px; letter-spacing:.06em;
    color:var(--ink-2); line-height:1.4;
  }
  .roster-summary .rs-cta{
    font-family:var(--mono); font-size:10px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--signal); white-space:nowrap;
    border:1px solid var(--signal); padding:5px 10px;
  }
  #rosterbox[open] > .roster-summary{border-bottom-color:var(--rule-strong)}
  #rosterbox[open] > .roster-summary .rs-cta::after{content:'\2009\00d7'}
  #rosterbox > .panel-body{padding-top:18px}

  /* the slot has to survive being the first thing on screen */
  .headline .slot{font-size:clamp(52px,16vw,72px)}
}