/* Infinite Solutions — PTO dashboard design system.
   Shared by every page. Token names are production's (--paper, --canvas, --muted,
   --rule, --accent, --moss ...) because pto-calc.js injects markup that references
   them; the values are the Executive palette.

   Sizing: the page is driven by viewport HEIGHT. Every clamp is (floor, vh term,
   ceiling) — a shallow laptop screen closes the whitespace up and eases the display
   numerals down, a tall screen spends the room on larger type. Reading text floors
   at ~12.5px and only starts growing past ~800px tall, so it is legible at every
   size. The arrangement never changes: no card moves or reflows with height. */

:root{
  --canvas:#F2EEE5; --paper:#FFFFFF; --ink:#1E1A15; --muted:#6F6757; --rule:#E7E1D6;
  --blue:#014A73; --on-blue:#F4EFE6; --blueline:rgba(255,255,255,.15); --bluesub:#AFCADB;
  --accent:#C33E1D; --moss:#1D7A44; --amber:#A9701A;
  --amber-bg:#FBF0DA; --amber-line:#E9D3A6; --amber-ink:#7A5214;
  --green-bg:#E6F1EA; --green-ink:#1B6E43;
  --red-bg:#F8E7E2; --red-ink:#8F2A13;
  --track:#ECE6DA; --hover:#EAF1F5;
  /* carried from the previous production sheet so existing markup keeps resolving */
  --cream:#FEF4E8; --paper-dark:#F6E7D5; --accent-deep:#9E2F15; --accent-bright:#EE7522;
  --moss-light:#2C9456; --danger:#B3261E; --warning:#EE7522;
  --radius:12px; --shadow:0 3px 12px rgba(26,26,26,.06);
  /* Browser-painted UI — <select> popups, the date and time pickers, scrollbars,
     checkboxes — follows color-scheme, not our tokens. Without it the whole app
     kept the light widgets in dark mode: the "View as" list came out as pale grey
     text on a white popup, and every date picker opened white. */
  color-scheme:light;
  /* vertical rhythm */
  --vgap:clamp(.42rem,1.28vh,1.15rem);
  --cardpad:clamp(.42rem,1.18vh,1.05rem);
}
@media (prefers-color-scheme: dark){
  :root{ --canvas:#14120F; --paper:#211E19; --ink:#ECE6DB; --muted:#A79E90; --rule:#332E27;
    --blue:#0F3B58; --on-blue:#EAF2F8; --bluesub:#8FB6CE; --blueline:rgba(255,255,255,.12);
    --accent:#E0682F; --moss:#4CAE6E; --amber:#E0A24A;
    --amber-bg:#3A2A16; --amber-line:#5A4327; --amber-ink:#F2C79E;
    --green-bg:#1C2A22; --green-ink:#8FD3A6;
    --red-bg:#3A211B; --red-ink:#F0A88F;
    --track:#3A342B; --hover:#26221C;
    --cream:#2A241C; --paper-dark:#2A241C; --accent-deep:#E0682F; --accent-bright:#F08A46;
    --moss-light:#6BC489; --danger:#F0A88F; --warning:#E0A24A;
    --shadow:0 6px 20px rgba(0,0,0,.35);
    color-scheme:dark; }
}
:root[data-theme="dark"]{ --canvas:#14120F; --paper:#211E19; --ink:#ECE6DB; --muted:#A79E90; --rule:#332E27;
  --blue:#0F3B58; --on-blue:#EAF2F8; --bluesub:#8FB6CE; --blueline:rgba(255,255,255,.12);
  --accent:#E0682F; --moss:#4CAE6E; --amber:#E0A24A; --amber-bg:#3A2A16; --amber-line:#5A4327;
  --amber-ink:#F2C79E; --green-bg:#1C2A22; --green-ink:#8FD3A6; --red-bg:#3A211B; --red-ink:#F0A88F;
  --track:#3A342B; --hover:#26221C; --cream:#2A241C; --paper-dark:#2A241C; --accent-deep:#E0682F;
  --accent-bright:#F08A46; --moss-light:#6BC489; --danger:#F0A88F; --warning:#E0A24A;
  --shadow:0 6px 20px rgba(0,0,0,.35);
  color-scheme:dark; }
:root[data-theme="light"]{ --canvas:#F2EEE5; --paper:#FFFFFF; --ink:#1E1A15; --muted:#6F6757; --rule:#E7E1D6;
  --blue:#014A73; --on-blue:#F4EFE6; --bluesub:#AFCADB; --blueline:rgba(255,255,255,.15);
  --accent:#C33E1D; --moss:#1D7A44; --amber:#A9701A; --amber-bg:#FBF0DA; --amber-line:#E9D3A6;
  --amber-ink:#7A5214; --green-bg:#E6F1EA; --green-ink:#1B6E43; --red-bg:#F8E7E2; --red-ink:#8F2A13;
  --track:#ECE6DA; --hover:#EAF1F5; --cream:#FEF4E8; --paper-dark:#F6E7D5; --accent-deep:#9E2F15;
  --accent-bright:#EE7522; --moss-light:#2C9456; --danger:#B3261E; --warning:#EE7522;
  --shadow:0 3px 12px rgba(26,26,26,.06);
  color-scheme:light; }

*{ box-sizing:border-box; }
/* Always reserve the scrollbar gutter. My Team's table is long enough to scroll
   while the other pages fit, and a scrollbar narrows the viewport — which slid the
   centred container 7px left on that page only, so the content visibly jumped as
   you moved between pages. */
html{ scrollbar-gutter:stable; }
body{ margin:0; font-family:'Hanken Grotesk',system-ui,sans-serif; background:var(--canvas); color:var(--ink); }
.num{ font-variant-numeric:tabular-nums; }
.disp{ font-family:'Bricolage Grotesque',serif; letter-spacing:-.02em; }

/* ---- Masthead ---- */
.mh{ background:var(--paper); border-bottom:1px solid var(--rule); }
/* min-height keeps the bar the same depth whether or not the page carries the
   Request button, so the nav sits on the same line everywhere too. */
.mh-in{ max-width:1500px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  min-height:clamp(52px,7vh,76px);
  padding:clamp(.42rem,1vh,.8rem) clamp(1rem,3vw,2rem); }
/* Three zones: brand, nav, actions. The brand zone holds a fixed width so the nav
   starts at the same x on every page — page titles differ in length, and letting the
   nav follow them made the links jump as you moved between pages. */
.mh-l{ display:flex; align-items:center; gap:.9rem; flex:0 0 clamp(230px,26vw,360px); min-width:0; }
.mh-nav{ display:flex; gap:.2rem; flex-wrap:wrap; flex:1 1 auto; }
.mh-r{ margin-left:auto; }
.mh-logo{ height:clamp(26px,3vh,38px); width:auto; display:block; }
:root[data-theme="dark"] .mh-logo{ filter:brightness(1.55); }
@media (prefers-color-scheme: dark){ .mh-logo{ filter:brightness(1.55); } }
:root[data-theme="light"] .mh-logo{ filter:none; }
.mh-div{ width:1px; height:26px; background:var(--rule); }
.mh-title{ font-size:clamp(1.12rem,2.24vh,1.32rem); font-weight:700; }
.mh-title span{ font-weight:400; color:var(--muted); font-style:italic; }
.mh-r{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.nav{ color:var(--blue); text-decoration:none; font-size:clamp(.82rem,1.64vh,.96rem); font-weight:600;
  padding:.45rem .7rem; border-radius:8px; }
:root[data-theme="dark"] .nav{ color:var(--bluesub); }
.nav:hover{ background:var(--hover); }
/* the page you are on keeps its slot so the row never reflows between pages */
.nav.current{ color:var(--ink); background:var(--track); cursor:default; }
.picker{ display:flex; align-items:center; gap:.45rem; border:1px solid var(--rule); border-radius:8px;
  padding:clamp(.3rem,.6vh,.45rem) .55rem; font-size:clamp(.82rem,1.64vh,.96rem); background:var(--paper); }
.picker .lbl{ color:var(--muted); font-size:clamp(.78rem,1.56vh,.92rem); }
.picker select{ border:none; background-color:var(--paper); color:var(--ink); font:inherit;
  font-size:clamp(.82rem,1.64vh,.96rem); }
/* Matches .picker's own fill, so the closed control looks unchanged while the open
   list has a surface to sit on. Firefox/Windows reads these for the popup. */
.picker select option{ background-color:var(--paper); color:var(--ink); }
.req-field select option{ background-color:var(--canvas); color:var(--ink); }
.req{ background:var(--accent); color:#fff; border:none; border-radius:999px;
  padding:clamp(.55rem,1.1vh,.7rem) clamp(1.1rem,2.2vh,1.4rem); font-size:clamp(.86rem,1.72vh,1rem);
  font-weight:600; cursor:pointer; text-decoration:none; }
:root[data-theme="dark"] .req{ color:#160c06; }
.req:hover{ filter:brightness(1.06); }
.theme-btn{ background:var(--paper); border:1px solid var(--rule); color:var(--muted); border-radius:8px;
  padding:.4rem .55rem; cursor:pointer; font-size:.85rem; }

/* Negative-balance strip — full bleed directly under the masthead, as it was before
   the redesign. It sits outside .container on purpose: edge to edge is what makes it
   read as an alert rather than another card. Its own colours rather than --danger,
   which in dark mode is a light salmon meant for text, not a background. */
.negative-banner{ background:#B3261E; color:#fff; }
/* Background runs edge to edge; the text lines up with the masthead and the cards,
   same max-width and padding as .mh-in / .container. */
.nb-in{ max-width:1500px; margin:0 auto; padding:.45rem clamp(1rem,3vw,2rem);
  font-size:clamp(.8rem,1.6vh,.94rem); letter-spacing:.01em; }
.negative-banner strong{ text-transform:uppercase; letter-spacing:.14em;
  font-weight:700; margin-right:.5rem; }
:root[data-theme="dark"] .negative-banner{ background:#7A1E17; color:#FFE8E3; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .negative-banner{ background:#7A1E17; color:#FFE8E3; }
}

/* ---- Page shell ---- */
.container{ max-width:1500px; margin:0 auto; display:flex; flex-direction:column;
  padding:clamp(.35rem,.95vh,.8rem) clamp(1rem,3vw,2rem) clamp(.3rem,.85vh,.7rem); gap:var(--vgap); }
/* Pages render into #dash / #main, so the row gap has to be set there too — on
   .container it only ever spaces the rendered block from the footer. */
#dash,#main{ display:flex; flex-direction:column; gap:var(--vgap); }
/* no horizontal inset — the heading shares its left edge with the cards, the
   masthead and the over-balance banner */
.greet{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  border-bottom:1px solid var(--rule); padding:0 0 clamp(.2rem,.6vh,.35rem); }
.greet h1{ font-size:clamp(1.15rem,2.65vh,1.85rem); margin:0; }
.greet h1 em{ font-style:normal; color:var(--accent); }
.greet .meta{ font-size:clamp(.82rem,1.64vh,.96rem); color:var(--muted); display:flex; gap:1.1rem; flex-wrap:wrap; }
.greet .meta b{ color:var(--ink); font-weight:600; }
.pagehead{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-bottom:1px solid var(--rule); padding:0 0 clamp(.2rem,.6vh,.35rem); }
.pagehead h1{ font-size:clamp(1.15rem,2.65vh,1.85rem); margin:0; }
.foot{ color:var(--muted); font-size:clamp(.78rem,1.56vh,.92rem); font-style:italic; padding:0 .2rem; }
.loading{ padding:3rem; text-align:center; color:var(--muted); font-style:italic; }

/* One 12-column grid for every row, so card edges line up down the page. */
.g12{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--vgap); align-items:stretch; }
.s3{ grid-column:span 3; } .s4{ grid-column:span 4; } .s6{ grid-column:span 6; }
.s8{ grid-column:span 8; } .s12{ grid-column:span 12; }
/* Half-width cards two-up. The hero goes full width so the rows pair off cleanly —
   left at span 6 it shares a row with one stat, which pushes a tile up next to the
   other stat and strands the fourth tile on its own row. */
@media(max-width:1100px){ .s3,.s4{ grid-column:span 6; } .hero{ grid-column:span 12; } }
@media(max-width:700px){ .s3,.s4,.s6,.s8{ grid-column:span 12; } }

/* ---- Cards ---- */
.card{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--cardpad) 1rem; box-shadow:var(--shadow); display:flex; flex-direction:column; }
/* Reading text — labels, captions, list detail — never drops below ~12.5px. */
.lab{ font-size:clamp(.78rem,1.56vh,.92rem); font-weight:600; color:var(--muted); margin-bottom:.24rem; }
.sect-title{ font-size:clamp(1rem,2vh,1.2rem); font-weight:700; margin:0; }
/* pins a card's trailing block (bar, footer) to the bottom so they align card-to-card */
.pin{ margin-top:auto; padding-top:clamp(.32rem,.9vh,.55rem); }

.hero{ background:var(--blue); color:var(--on-blue); border-color:transparent; }
.hero .lab{ color:var(--bluesub); }
.hero-row{ display:flex; align-items:stretch; justify-content:space-between; gap:1.8rem; flex-wrap:wrap; }
.hero-l{ display:flex; flex-direction:column; justify-content:center; }
.hero-big{ font-size:clamp(1.8rem,4.6vh,3.3rem); font-weight:300; line-height:.9; letter-spacing:-.04em; }
.hero-big small{ font-size:clamp(.9rem,1.8vh,1.05rem); font-weight:400; color:var(--bluesub);
  margin-left:.35rem; letter-spacing:.03em; }
.hero-days{ color:rgba(255,255,255,.9); font-size:clamp(.86rem,1.72vh,1rem); font-style:italic; margin-top:.2rem; }
.hero-tab{ min-width:230px; font-size:clamp(.81rem,1.62vh,.96rem); border-left:1px solid var(--blueline);
  padding-left:1.2rem; display:flex; flex-direction:column; justify-content:center; }
.hero-tab .r{ display:flex; justify-content:space-between; gap:1rem; padding:clamp(.06rem,.26vh,.14rem) 0; }
.hero-tab .r span:first-child{ color:var(--bluesub); }
.hero-tab .r:last-child{ font-weight:700; margin-top:.2rem; padding-top:.32rem; border-top:1px dashed var(--blueline); }

.stat .v{ font-size:clamp(1.3rem,3.1vh,2.05rem); font-weight:400; line-height:1; letter-spacing:-.03em; }
.stat .v small{ font-size:clamp(.8rem,1.6vh,.94rem); color:var(--muted); font-weight:500; margin-left:.25rem; }
.cap{ font-size:clamp(.83rem,1.66vh,.97rem); color:var(--muted); margin-top:.2rem; }
.bar{ height:clamp(6px,.85vh,9px); border-radius:99px; background:var(--track); overflow:hidden;
  margin-top:clamp(.28rem,.8vh,.65rem); }
.bar i{ display:block; height:100%; border-radius:99px; }
.bar i.blue{ background:var(--blue); } .bar i.orange{ background:var(--accent); }
:root[data-theme="dark"] .bar i.blue{ background:var(--bluesub); }

.tile .v{ font-size:clamp(1.1rem,2.55vh,1.7rem); font-weight:400; line-height:1; letter-spacing:-.03em; }
.tile .v small{ font-size:clamp(.76rem,1.52vh,.9rem); color:var(--muted); font-weight:500;
  margin-left:.2rem; letter-spacing:.02em; }
.tile-status .v{ font-size:clamp(1.05rem,2.35vh,1.55rem); }
.status-chip{ margin-top:clamp(.2rem,.6vh,.45rem); }
/* Transparent wrapper: the four tiles are ordinary grid items of .g12. */
.facts{ display:contents; }

.chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:clamp(.75rem,1.5vh,.88rem);
  font-weight:700; border-radius:999px; padding:.22rem .6rem; margin-top:.45rem; }
.chip.ok{ background:var(--green-bg); color:var(--green-ink); }
.chip.warn{ background:var(--amber-bg); color:var(--amber-ink); }
.chip.bad{ background:var(--red-bg); color:var(--red-ink); }
.chip.info{ background:var(--hover); color:var(--blue); }
:root[data-theme="dark"] .chip.info{ color:var(--bluesub); }
.dot{ width:7px; height:7px; border-radius:99px; background:currentColor; }

/* ---- Time off taken ---- */
.toff-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem; }
.toff-badge{ font-size:clamp(.78rem,1.56vh,.92rem); font-weight:600; color:var(--blue);
  background:var(--hover); border-radius:99px; padding:.2rem .6rem; }
:root[data-theme="dark"] .toff-badge{ color:var(--bluesub); }
/* Grows on a roomy screen so more of the year shows unscrolled. */
.toff-list{ max-height:clamp(115px,27vh,430px); overflow-y:auto; scrollbar-width:thin; }
.toff-list::-webkit-scrollbar{ width:6px; }
.toff-list::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:99px; }
/* Tighter rows come from the line-height, not smaller type — the text stays the same
   size so the list reads compact rather than cramped. */
.toff-item{ display:flex; align-items:baseline; gap:1rem; padding:clamp(.09rem,.3vh,.2rem) 0;
  line-height:1.28; border-top:1px solid var(--rule); }
.toff-when{ display:flex; align-items:baseline; gap:.45rem; white-space:nowrap; }
.toff-when .d{ font-weight:600; font-size:clamp(.93rem,1.86vh,1.08rem); }
.toff-when .s{ font-size:clamp(.79rem,1.58vh,.93rem); color:var(--muted); font-style:italic; }
.toff-detail{ flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:.15rem .4rem;
  font-size:clamp(.79rem,1.58vh,.93rem); color:var(--muted); }
.toff-detail b{ color:var(--ink); font-weight:600; font-style:normal; }
.toff-detail .sep{ color:var(--rule); }
.toff-tot{ font-size:clamp(.93rem,1.86vh,1.08rem); font-weight:600; color:var(--accent);
  white-space:nowrap; margin-left:auto; }
.toff-more{ font-size:clamp(.8rem,1.6vh,.94rem); color:var(--muted); font-style:italic;
  padding-top:.6rem; border-top:1px solid var(--rule); }

/* ---- Accrual year ---- */
.meter{ display:grid; grid-template-columns:repeat(13,1fr); gap:5px; margin:clamp(.3rem,.85vh,.5rem) 0; }
.meter i{ height:clamp(14px,2.55vh,32px); border-radius:5px; background:var(--track); }
.meter i.done{ background:var(--blue); } .meter i.now{ background:var(--accent); }
:root[data-theme="dark"] .meter i.done{ background:var(--bluesub); }
.legend{ display:flex; gap:1.1rem; font-size:clamp(.79rem,1.58vh,.93rem); color:var(--muted); flex-wrap:wrap; }
.legend span{ display:flex; align-items:center; gap:.35rem; }
.legend .k{ width:10px; height:10px; border-radius:3px; }
.accr-foot{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; border-top:1px solid var(--rule); }
.accr-foot .k{ display:block; color:var(--muted); font-size:clamp(.78rem,1.56vh,.92rem); font-weight:600; }
.accr-foot b{ display:block; color:var(--ink); font-size:clamp(1.1rem,2.2vh,1.35rem); font-weight:400;
  letter-spacing:-.02em; margin-top:.1rem; }

/* ---- Plan ahead ---- */
.plan-title{ margin-bottom:clamp(.4rem,1.28vh,1rem); }
/* The two halves sit on the page's own 12-column tracks, so the split between them
   falls exactly on the gap between the two cards above — and "What if I take time
   off?" starts on the same line as "Accrual year". The negative margin cancels the
   card's padding so the tracks match the grid outside it; each half puts that inset
   back so the text still lines up with the card's own edge. */
.plan{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--vgap);
  /* cancel the card's padding AND its 1px border, so these tracks are the page's
     tracks exactly — without the border the right-hand column lands 1px adrift */
  margin-left:calc(-1rem - 1px); margin-right:calc(-1rem - 1px); }
.plan > .plan-l{ grid-column:1 / span 6; padding:0 calc(1rem + 1px); }
.plan > .whatif{ grid-column:7 / span 6; padding:0 calc(1rem + 1px); }
/* Below ~1260px each half is too narrow to hold the forfeit notice on one line
   (and the three what-if inputs get cramped), so the two halves stack and take the
   full card width instead. Measured, not guessed: at 1210px the worst-case notice
   misses by a pixel, so the split needs to stop above that. */
@media(max-width:1260px){
  .plan{ grid-template-columns:1fr; margin-left:0; margin-right:0; }
  .plan > .plan-l, .plan > .whatif{ grid-column:1 / -1; padding:0; }
}
.plan-big{ font-size:clamp(1.45rem,3.55vh,2.35rem); font-weight:300; line-height:.95; letter-spacing:-.04em; }
.plan-big small{ font-size:clamp(.9rem,1.8vh,1.05rem); color:var(--muted); font-weight:500; margin-left:.3rem; }
.plan-note{ color:var(--muted); font-size:clamp(.88rem,1.76vh,1.02rem); margin-top:.15rem; line-height:1.4; }
.sched{ margin-top:clamp(.3rem,.85vh,.6rem); background:var(--canvas); border:1px solid var(--rule);
  border-radius:10px; padding:clamp(.35rem,.95vh,.5rem) .8rem; }
.sched .h{ font-size:clamp(.78rem,1.56vh,.92rem); font-weight:600; color:var(--muted); margin-bottom:.3rem; }
.sched .r{ display:flex; align-items:center; gap:.55rem; font-size:clamp(.88rem,1.76vh,1.02rem); padding:.08rem 0; }
.sched .r .d{ width:8px; height:8px; border-radius:99px; }
.sched .r .d.g{ background:var(--moss); } .sched .r .d.a{ background:var(--accent); }
.sched .r em{ font-style:normal; color:var(--muted); }
.forfeit{ margin-top:clamp(.3rem,.85vh,.6rem); background:var(--amber-bg); border:1px solid var(--amber-line);
  color:var(--amber-ink); border-radius:10px; padding:clamp(.42rem,1vh,.75rem) .85rem;
  font-size:clamp(.88rem,1.76vh,1.02rem); line-height:1.4; }
.oknote{ margin-top:clamp(.3rem,.85vh,.6rem); background:var(--green-bg); border:1px solid transparent;
  color:var(--green-ink); border-radius:10px; padding:clamp(.42rem,1vh,.75rem) .85rem;
  font-size:clamp(.88rem,1.76vh,1.02rem); }
.whatif .row{ display:flex; gap:.8rem; }
.field{ display:flex; flex-direction:column; gap:.2rem; flex:1; }
.field label{ font-size:clamp(.78rem,1.56vh,.92rem); font-weight:600; color:var(--muted); }
.field input{ border:1px solid var(--rule); border-radius:8px; padding:clamp(.38rem,.9vh,.6rem) .55rem;
  font:inherit; font-size:clamp(.95rem,2vh,1.1rem); background:var(--canvas); color:var(--ink); width:100%; }
.wi-res{ margin-top:clamp(.4rem,1vh,.7rem); }
.wi-res .r{ display:flex; justify-content:space-between; align-items:baseline;
  padding:clamp(.2rem,.6vh,.35rem) 0; border-top:1px solid var(--rule); }
.wi-res .r .k{ color:var(--muted); font-size:clamp(.9rem,1.8vh,1.05rem); }
.wi-res .r .k em{ font-style:normal; display:block; font-size:clamp(.78rem,1.56vh,.92rem); }
.wi-res .r .val{ font-size:clamp(1.2rem,2.4vh,1.45rem); font-weight:700; }
.wi-res .r .val.pos{ color:var(--moss); } .wi-res .r .val.neg{ color:var(--accent); }

/* ---- Explanatory lede (non-dashboard pages) ---- */
.lede{ color:var(--muted); font-size:clamp(.88rem,1.76vh,1.02rem); line-height:1.5; max-width:78ch; }
.notice{ background:var(--amber-bg); border:1px solid var(--amber-line); color:var(--amber-ink);
  border-radius:10px; padding:.65rem .85rem; font-size:clamp(.88rem,1.76vh,1.02rem); line-height:1.45; }

/* ---- Tables (My Team / Forfeiture) ----
   PTO.sortable renders its table inside its own .card, so that card carries no
   padding here and the cell padding does the spacing instead. The card sizes to the
   table and the WRAPPER scrolls, so on a narrow screen the right-hand columns stay
   reachable instead of being clipped. */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-wrap > .card{ padding:0; overflow:hidden; min-width:max-content; }
table{ width:100%; min-width:520px; border-collapse:collapse; }
th,td{ text-align:left; padding:.55rem .8rem; border-bottom:1px solid var(--rule);
  font-size:clamp(.9rem,1.8vh,1.04rem); white-space:nowrap; }
th{ font-size:clamp(.78rem,1.56vh,.92rem); font-weight:600; color:var(--muted); background:transparent; }
th.sortable{ cursor:pointer; user-select:none; }
th.sortable:hover{ color:var(--ink); }
th.sorted{ color:var(--accent); }
.arrow{ color:var(--accent); }
tbody tr:hover{ background:var(--canvas); }
tr:last-child td{ border-bottom:none; }
td.num{ text-align:right; font-variant-numeric:tabular-nums; }
td.name{ font-weight:600; }
td.name .you{ font-size:.72rem; color:var(--muted); margin-left:.4rem; font-weight:500; }
/* Status pills in table cells — the colour coding carried over from the previous
   production tables, which read faster down a long column than plain words. */
.pill{ display:inline-block; font-size:clamp(.74rem,1.48vh,.86rem); font-weight:600;
  padding:.14rem .55rem; border-radius:999px; white-space:nowrap; }
.pill.good,.pill.yes{ background:var(--green-bg); color:var(--green-ink); }
.pill.low{ background:var(--amber-bg); color:var(--amber-ink); }
.pill.over,.pill.bad{ background:var(--red-bg); color:var(--red-ink); }
.pill.no{ background:var(--track); color:var(--muted); }
.risk{ color:var(--accent); font-weight:600; }
.dash{ color:var(--muted); }

/* A short row of figures reads better content-sized than stretched across twelve
   columns — four tiles on a wide screen should not each be 450px of mostly air. */
.statstrip{ display:flex; flex-wrap:wrap; gap:var(--vgap); }
.statstrip > .card{ flex:1 1 auto; min-width:150px; max-width:260px; }
@media(max-width:640px){ .statstrip > .card{ min-width:calc(50% - var(--vgap)); max-width:none; } }
.empty{ padding:1.6rem; text-align:center; color:var(--muted); font-style:italic; }

/* ---- Filter buttons ---- */
.filters{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.fbtn{ font-size:clamp(.8rem,1.6vh,.94rem); font-weight:600; border:1px solid var(--rule);
  background:var(--paper); color:var(--muted); padding:.4rem .8rem; border-radius:999px; cursor:pointer; }
.fbtn.active{ background:var(--blue); color:#fff; border-color:var(--blue); }
:root[data-theme="dark"] .fbtn.active{ color:#0F0D09; background:var(--bluesub); border-color:var(--bluesub); }
.fcount{ font-size:clamp(.82rem,1.64vh,.96rem); color:var(--muted); }

/* ---- Request page ----
   A form is a single column of reading, so it sits in a card of readable width
   rather than stretching its inputs the full width of a large screen. */
.req-page{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(.9rem,2vh,1.5rem) clamp(1rem,2vw,1.6rem);
  width:100%; max-width:760px; margin:0 auto; }
.req-page h2{ font-size:clamp(1.15rem,2.65vh,1.6rem); margin:0 0 .25rem; }
.req-sub{ color:var(--muted); font-size:clamp(.88rem,1.76vh,1.02rem); line-height:1.5; margin:0 0 1rem; }

/* ---- Request form / modal ---- */
.req-field{ display:flex; flex-direction:column; gap:.3rem; }
.req-field > span{ font-size:clamp(.78rem,1.56vh,.92rem); font-weight:600; color:var(--muted); }
.req-field > span em{ font-style:normal; opacity:.75; font-weight:400; }
.req-field input,.req-field select,.req-field textarea{ background:var(--canvas); border:1px solid var(--rule);
  border-radius:8px; padding:.55rem .65rem; color:var(--ink); font:inherit; width:100%; }
.req-field textarea{ resize:vertical; }
.req-row{ display:flex; gap:.85rem; } .req-row .req-field{ flex:1; }
.req-check{ display:flex; align-items:center; gap:.5rem; font-size:.88rem; cursor:pointer; }
.req-check input{ width:auto; margin:0; accent-color:var(--accent); }
.req-body{ display:flex; flex-direction:column; gap:.8rem; }
.req-actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; align-items:center; }
.req-btn{ font-size:.85rem; font-weight:600; background:var(--accent); color:#fff; border:1px solid var(--accent);
  padding:.55rem 1.1rem; border-radius:999px; cursor:pointer; text-decoration:none; }
.req-btn.ghost{ background:transparent; color:var(--muted); border-color:var(--rule); }
.req-btn.urgent{ background:var(--red-ink); border-color:var(--red-ink); }
.req-btn:disabled{ opacity:.55; cursor:default; }
:root[data-theme="dark"] .req-btn{ color:#160c06; }
:root[data-theme="dark"] .req-btn.ghost{ color:var(--muted); }
.req-status{ margin-top:.7rem; font-size:.9rem; min-height:1rem; }
.req-status .req-err{ color:var(--accent); } .req-status .req-muted{ color:var(--muted); }
.to-warn{ border-radius:10px; padding:.65rem .85rem; font-size:.9rem; line-height:1.45;
  background:var(--amber-bg); color:var(--amber-ink); border:1px solid var(--amber-line); }
.req-success{ text-align:center; padding:1.2rem 0 .4rem; }
.req-success-icon{ width:48px; height:48px; border-radius:50%; background:var(--moss); color:#fff;
  font-size:1.4rem; display:flex; align-items:center; justify-content:center; margin:0 auto .8rem; }
:root[data-theme="dark"] .req-success-icon{ color:#0F0D09; }
.req-success h3{ font-size:1.2rem; margin-bottom:.35rem; }
.req-success p{ color:var(--muted); font-size:.94rem; margin-bottom:1rem; }
.req-success .req-actions{ justify-content:center; }
.req-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:rgba(20,16,10,.55); padding:1rem; }
.req-modal-card{ background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); width:100%; max-width:460px; padding:1.2rem 1.3rem;
  max-height:90vh; overflow-y:auto; }
.req-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.req-modal-head h3{ font-size:1.2rem; margin:0; }
.req-close{ background:none; border:none; font-size:1.5rem; line-height:1; color:var(--muted); cursor:pointer; }
.req-close:hover{ color:var(--ink); }
.req-myreq{ margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--rule); }
.req-myreq-title{ font-size:clamp(.78rem,1.56vh,.92rem); font-weight:600; color:var(--muted); margin-bottom:.5rem; }
.req-modal-body{ display:flex; flex-direction:column; gap:.85rem; }
.req-modal-foot{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.2rem; }
#req-notice:not(:empty){ margin-top:.2rem; }

/* ---- Service-team availability, shown inside the request modal ----
   Lived inline in index.html, which meant the calendar page's copy of the modal
   rendered it unstyled. Shared now, and on tokens so it themes with everything else. */
#timeoff{ padding-top:0; }
.to-section{ margin-top:.5rem; }
.to-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; }
@media(max-width:860px){ .to-grid{ grid-template-columns:1fr; } }
.to-card{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.15rem 1.3rem; }
.to-card-title{ font-size:clamp(.82rem,1.64vh,.96rem); font-weight:600; color:var(--muted); margin-bottom:.7rem; }
.to-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.to-head .section-title{ margin-bottom:0; }
.to-field-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.to-field{ display:flex; flex-direction:column; gap:.3rem; }
.to-field label{ font-size:clamp(.78rem,1.56vh,.92rem); font-weight:600; color:var(--muted); }
.to-field input{ background:var(--canvas); border:1px solid var(--rule); border-radius:8px;
  padding:.5rem .6rem; color:var(--ink); font:inherit; }
.to-result{ margin-top:1rem; }
.to-ok{ border-radius:10px; padding:.7rem .85rem; font-size:.9rem; line-height:1.5;
  background:var(--green-bg); color:var(--green-ink); }
.to-ok a, .to-warn a{ color:inherit; font-weight:600; }
.to-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.to-btn{ font-size:.85rem; font-weight:600; border:1px solid var(--accent); background:var(--accent);
  color:#fff; padding:.45rem .8rem; border-radius:999px; cursor:pointer; text-decoration:none; }
.to-btn.ghost{ background:transparent; color:var(--accent); }
:root[data-theme="dark"] .to-btn{ color:#160c06; }
:root[data-theme="dark"] .to-btn.ghost{ color:var(--accent); background:transparent; }
.to-escalate{ margin-top:.6rem; font-size:.88rem; line-height:1.5; color:var(--ink); }
.to-daylist{ margin-top:.9rem; display:flex; flex-direction:column; gap:.35rem; }
.to-day{ display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  padding:.5rem .7rem; border:1px solid var(--rule); border-radius:8px; font-size:.88rem; }
.to-day.cap{ border-color:var(--amber-line); background:var(--amber-bg); }
.to-day .cnt{ font-size:.82rem; color:var(--muted); text-align:right; }
.to-day.cap .cnt{ color:var(--amber-ink); }
.to-cal{ display:flex; flex-direction:column; max-height:440px; overflow:auto; }
.to-cal-row{ display:grid; grid-template-columns:auto 1fr auto; gap:.7rem; align-items:center;
  padding:.5rem .1rem; border-bottom:1px solid var(--rule); font-size:.9rem; }
.to-cal-row:last-child{ border-bottom:none; }
.to-dates{ font-size:.82rem; color:var(--muted); white-space:nowrap; }
.to-badge{ font-size:.74rem; font-weight:600; padding:.14rem .5rem; border-radius:999px; white-space:nowrap; }
.to-badge.pto{ background:var(--hover); color:var(--blue); }
.to-badge.ooo{ background:var(--track); color:var(--muted); }
.to-badge.svc{ background:var(--accent); color:#fff; margin-left:.35rem; }
:root[data-theme="dark"] .to-badge.pto{ color:var(--bluesub); }
:root[data-theme="dark"] .to-badge.svc{ color:#160c06; }
.to-muted{ color:var(--muted); font-style:italic; font-size:.92rem; }

/* ---- Vacation calendar ---- */
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.cal-title{ font-size:clamp(1.2rem,2.65vh,1.6rem); font-weight:700; letter-spacing:-.02em; min-width:11ch; }
.cal-nav{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.cal-btn{ font-size:clamp(.8rem,1.6vh,.94rem); font-weight:600; background:var(--paper);
  border:1px solid var(--rule); color:var(--ink); padding:.42rem .75rem; border-radius:8px; cursor:pointer; }
.cal-btn:hover{ border-color:var(--muted); }
.cal-scope{ display:flex; align-items:center; gap:.4rem; font-size:clamp(.8rem,1.6vh,.94rem);
  color:var(--muted); cursor:pointer; white-space:nowrap; }
.cal-scope input{ width:auto; margin:0; accent-color:var(--accent); cursor:pointer; }
/* The whole month fits the screen. Week rows share the height left after the
   masthead, month header, legend, weekday strip and footer, and the renderer caps
   how many people it stacks per week to what that leaves room for — the rest
   collapse into a "+N" chip. Nothing scrolls. */
.cal-weeks{ border:1px solid var(--rule); border-radius:12px; background:var(--paper);
  box-shadow:var(--shadow); overflow:hidden; }
.cal-dow-row{ display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--rule);
  background:var(--paper); }
.cal-dow{ font-size:clamp(.75rem,1.5vh,.88rem); font-weight:600; color:var(--muted); padding:.45rem; text-align:center; }
/* Everyone off in a week gets a row — a "+N more" hides exactly the information the
   page exists to show, so it is a last resort for an absurd week, not a layout tool.
   Rows take the height the screen can give them (the month needs only as many weeks
   as it touches, set by the renderer in --cal-weeks) and grow past it when a busy
   week needs more, so a quiet month fits and only a heavy one scrolls. The renderer
   reads --cal-lane/--cal-gap back out, so CSS and JS cannot drift. */
:root{ --cal-chrome:262px; --cal-weeks:6; --cal-lane:clamp(15px,1.8vh,19px); --cal-gap:3px; }
.cw{ position:relative; border-bottom:1px solid var(--rule);
  min-height:clamp(56px,calc((100vh - var(--cal-chrome)) / var(--cal-weeks)),170px); }
.cw:last-child{ border-bottom:none; }
.cw-bg{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(7,1fr); }
.cw-bg > div{ border-right:1px solid var(--rule); }
.cw-bg > div:last-child{ border-right:none; }
.cw-bg > div.other{ background:var(--canvas); }
.cw-bg > div.today{ background:rgba(195,62,29,.07); }
:root[data-theme="dark"] .cw-bg > div.today{ background:rgba(224,104,47,.12); }
.cw-dates{ position:relative; display:grid; grid-template-columns:repeat(7,1fr); }
.cw-dates > div{ text-align:right; padding:4px 7px 0; font-size:clamp(.75rem,1.5vh,.88rem); color:var(--muted); }
.cw-dates > div.other{ opacity:.45; }
.cw-dates > div.today{ color:var(--accent); font-weight:700; }
.cw-bars{ position:relative; display:grid; grid-template-columns:repeat(7,1fr);
  grid-auto-rows:var(--cal-lane); gap:var(--cal-gap); padding:3px 4px 6px; }
/* stands in for the people a week has no room to list */
.cw-more{ min-width:0; font-size:.72rem; font-weight:600; padding:0 6px;
  line-height:var(--cal-lane); height:var(--cal-lane);
  border-radius:10px; color:var(--muted); background:var(--track); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; cursor:default; }
/* One source of truth for the request-type colours. The calendar bars and the
   legend swatches above them both read these, so a colour cannot be changed in
   one place and left stale in the other. */
:root{ --ev-pto:var(--blue); --ev-ooo:#6B6154; --ev-pat:#135F35; }
:root[data-theme="dark"]{ --ev-pto:var(--bluesub); --ev-ooo:#B2A99B; --ev-pat:var(--moss); }
/* Each type exposes its colour as --barc, so a whole day fills with it and a partial
   day can texture it without losing label contrast. */
.bar-ev{ --barc:var(--ev-pto); min-width:0; font-size:.75rem; padding:0 7px;
  line-height:var(--cal-lane); height:var(--cal-lane);
  border-radius:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; background:var(--barc); }
.bar-ev.ooo{ --barc:var(--ev-ooo); } .bar-ev.pat{ --barc:var(--ev-pat); }
:root[data-theme="dark"] .bar-ev{ color:#0F0D09; }
.bar-ev .svc{ opacity:.85; font-weight:700; }
/* Part of a day: keep the type fill so the label keeps its contrast, and add a faint,
   widely-spaced diagonal texture — enough to read as "not a whole day". */
.bar-ev.partial{ background-image:repeating-linear-gradient(135deg,
  rgba(255,255,255,.12) 0 6px, rgba(255,255,255,0) 6px 16px); }
:root[data-theme="dark"] .bar-ev.partial{ background-image:repeating-linear-gradient(135deg,
  rgba(0,0,0,.10) 0 6px, rgba(0,0,0,0) 6px 16px); }
.bar-ev .pt{ font-weight:600; margin-left:.15rem; opacity:.95; }
/* Legend swatches carry the same fill as the bars they stand for, and the same
   rounded-rect shape, so the key reads as a sample of the calendar rather than a
   separate set of marks. Without the per-type fills these inherit .dot's
   currentColor and all three come out the legend's muted grey. */
.legend .dot.pto, .legend .dot.ooo, .legend .dot.pat, .legend .k-partial{
  width:14px; height:10px; border-radius:3px; display:inline-block; }
.legend .dot.pto{ background:var(--ev-pto); }
.legend .dot.ooo{ background:var(--ev-ooo); }
.legend .dot.pat{ background:var(--ev-pat); }
.legend .k-partial{ background:var(--ev-pto);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.45) 0 3px, rgba(255,255,255,0) 3px 7px); }
:root[data-theme="dark"] .legend .k-partial{
  background-image:repeating-linear-gradient(135deg, rgba(0,0,0,.30) 0 3px, rgba(0,0,0,0) 3px 7px); }

/* A strip a lead may act on. The affordance is deliberately quiet — the calendar
   is read-first, and most bars on screen are not actionable, so a loud treatment
   would misrepresent how much of the grid is clickable. */
.bar-ev.actionable{ cursor:pointer; }
.bar-ev.actionable:hover{ filter:brightness(1.12); }
.bar-ev.actionable:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }

/* ---- Manage a team member's time off ---- */
.mng-who{ font-weight:600; font-size:1.05rem; margin-bottom:.5rem; }
.mng-item{ border:1px solid var(--rule); border-radius:10px; padding:.7rem .8rem; margin-bottom:.6rem; }
.mng-item:last-child{ margin-bottom:0; }
.mng-item-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-bottom:.45rem; }
.mng-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.5rem; flex-wrap:wrap; }

/* ---- "Your upcoming time off" list (markup injected by pto-calc.js) ---- */
.myreq-list{ display:flex; flex-direction:column; gap:.45rem; }
.myreq-row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.55rem .75rem; border:1px solid var(--rule); border-radius:10px; background:var(--paper); }
.myreq-row.done{ opacity:.55; }
.myreq-when{ font-weight:600; font-size:.92rem; }
.myreq-meta{ font-size:.78rem; color:var(--muted); margin-top:.12rem; }
.myreq-badge{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:.1rem .42rem; border-radius:999px; margin-left:.4rem; }
.myreq-badge.approved{ background:var(--green-bg); color:var(--green-ink); }
.myreq-badge.pending{ background:var(--amber-bg); color:var(--amber-ink); }
.myreq-cancel{ font-size:.78rem; font-weight:600; border:1px solid var(--rule); background:transparent;
  color:var(--accent); padding:.35rem .7rem; border-radius:999px; cursor:pointer; white-space:nowrap; }
.myreq-cancel:hover{ background:var(--accent); color:#fff; }
.myreq-cancel[disabled]{ opacity:.5; cursor:default; }
.myreq-empty{ color:var(--muted); font-style:italic; font-size:.9rem; }

/* ---- Short viewports ----
   The arrangement is the same at every screen size — same rows, same order, same
   card widths. A shallow screen is handled purely by scale. Nothing reflows. */

/* ---- Phones ---- */
@media (max-width:640px){
  /* brand row carries the theme toggle; actions and picker follow below */
  .mh-in{ position:relative; padding:.55rem 1rem; gap:.5rem; }
  .mh-logo{ height:26px; } .mh-title{ font-size:1rem; }
  .mh-l{ width:calc(100% - 46px); }
  #theme-btn{ position:absolute; top:.55rem; right:1rem; }
  .mh-r{ width:100%; gap:.4rem; }
  #nav{ flex:1 1 100%; }
  .picker{ flex:1; } .picker select{ flex:1; min-width:0; }
  .greet{ gap:.3rem; } .greet h1{ font-size:1.4rem; }
  .greet .meta{ gap:.6rem; font-size:.78rem; }
  /* the breakdown stacks under the balance, so its rule belongs on top */
  .hero-row{ gap:0; }
  .hero-tab{ width:100%; min-width:0; border-left:none; padding-left:0;
    border-top:1px solid var(--blueline); padding-top:.5rem; margin-top:.55rem; }
  .hero-big{ font-size:2.6rem; }
  /* per-day hours are the first thing to go when the row gets narrow */
  .toff-detail{ display:none; }
  .whatif .row{ flex-wrap:wrap; }
  .whatif .row .field:last-child{ flex:1 1 100%; }
  .meter i{ height:20px; }
  .accr-foot b{ font-size:1rem; }
  .req-row{ flex-wrap:wrap; } .req-row .req-field{ flex:1 1 100%; }
  .cal-head{ gap:.5rem; }
  .cw{ min-height:70px; }
  .container{ padding-left:1rem; padding-right:1rem; }
}
/* Once the grid has stacked, the four small figures still read better two-up than as
   four full-width bands. After the rule that sends stacked cards to full width, so it
   applies to the tiles only — the hero and stat cards stay full width. */
@media (max-width:700px){
  .tile{ grid-column:span 6; }
  /* half-width tiles are narrow enough that the status word wraps on a 360px phone
     and drags its row taller, so size it off the width available */
  .tile-status .v{ font-size:clamp(.95rem,4.3vw,1.15rem); }
}