/* Shared look for the tool pages (calculators). Tokens match public/index.html. */
@font-face{font-family:"Bricolage Grotesque";font-weight:600 800;font-display:swap;src:url(/fonts/bricolage-grotesque.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400 600;font-display:swap;src:url(/fonts/ibm-plex-sans.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600.woff2) format("woff2")}
:root{
  --bg:#eef1ee; --surface:#ffffff; --fg:#17201b; --muted:#5d6b63; --line:#d5ddd7;
  --felt:#1f5b45; --felt-edge:#14402f; --felt-ink:#e3f1ea; --felt-muted:#a9cbbb;
  --card:#fbfaf5; --card-back:#b5372d; --card-back-2:#8f2a22;
  --chip:#f2b632; --chip-ink:#2a1e00; --focus:#2f7de1; --warn:#a46200;
  --display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1512; --surface:#18201c; --fg:#e7eee9; --muted:#9aaaa1; --line:#2a3530;
  --felt:#173f31; --felt-edge:#0c261d; --felt-ink:#e3f1ea; --felt-muted:#93b8a7;
  --card:#f1efe6; --card-back:#b5372d; --card-back-2:#7a231c;
  --focus:#6aa8ff; --warn:#e3a33b; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1512; --surface:#18201c; --fg:#e7eee9; --muted:#9aaaa1; --line:#2a3530;
  --felt:#173f31; --felt-edge:#0c261d; --felt-ink:#e3f1ea; --felt-muted:#93b8a7;
  --card:#f1efe6; --card-back:#b5372d; --card-back-2:#7a231c;
  --focus:#6aa8ff; --warn:#e3a33b; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--body)}
.wrap{max-width:860px;margin:0 auto;padding-block:20px 48px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));display:grid;gap:28px}
a{color:inherit;text-underline-offset:2px}
a:focus-visible,input:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Header: brand plus links to every tool. */
.site-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.brand{font:800 22px/1 var(--display);text-decoration:none;display:flex;align-items:center;gap:8px}
.brand::before{content:"";width:16px;height:22px;border-radius:3px;background:repeating-linear-gradient(45deg,var(--card-back) 0 3px,var(--card-back-2) 3px 6px);box-shadow:0 0 0 2px var(--card) inset}
.tools-nav{display:flex;flex-wrap:wrap;gap:6px}
.tools-nav a{font-size:14px;font-weight:500;text-decoration:none;padding:7px 12px;border-radius:999px;color:var(--muted)}
.tools-nav a:hover{color:var(--fg);background:var(--surface)}
.tools-nav a[aria-current="page"]{color:var(--fg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}

h1{font:800 clamp(32px,5.6vw,48px)/1.02 var(--display);letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
.lede{margin:0;color:var(--muted);font-size:17px;max-width:58ch;text-wrap:pretty}

/* The tool itself sits on the felt, like the poker table. */
.tool{background:radial-gradient(120% 90% at 50% 30%, var(--felt) 60%, var(--felt-edge));color:var(--felt-ink);border-radius:24px;padding:22px 18px;box-shadow:inset 0 0 0 6px var(--felt-edge), inset 0 2px 20px rgba(0,0,0,.3);display:grid;gap:18px;min-width:0}
.tool h2{font:800 18px/1.2 var(--display);margin:0}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.field{display:grid;gap:5px;min-width:0;align-content:start}
.field>span,.lbl{font:600 11px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--felt-muted)}
.field small{color:var(--felt-muted);font-size:12px}
.tool input{width:100%;min-width:0;font:500 16px var(--body);color:var(--fg);background:var(--surface);border:1px solid transparent;border-radius:10px;padding:9px 11px;min-height:44px}
.tool input[aria-invalid="true"]{border-color:var(--chip);box-shadow:0 0 0 1px var(--chip)}
.rows{display:grid;gap:8px}
.row{display:grid;grid-template-columns:minmax(0,1fr) 6.5em 7em 5.5em 44px;gap:8px;align-items:end;background:rgba(0,0,0,.18);border-radius:14px;padding:10px}
.row .out{font:600 18px/44px var(--mono);text-align:right;font-variant-numeric:tabular-nums;color:var(--felt-ink)}
.icon-btn{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:transparent;color:var(--felt-ink);box-shadow:inset 0 0 0 2px var(--felt-muted);font-size:20px;line-height:1}
.actions{display:flex;flex-wrap:wrap;gap:10px}
button{font:600 15px var(--body);border-radius:999px;min-height:44px;padding:0 20px;cursor:pointer;border:0}
.btn-chip{background:var(--chip);color:var(--chip-ink)}
.btn-ghost{background:transparent;color:var(--felt-ink);box-shadow:inset 0 0 0 2px var(--felt-muted)}
button:disabled{opacity:.45;cursor:not-allowed}

/* Results: big numbers on cards. */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.result{background:var(--card);color:#17201b;border-radius:12px;padding:12px 14px;box-shadow:0 3px 8px rgba(0,0,0,.3);min-width:0}
.result .k{display:block;font:600 11px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#5d6b63}
.result .v{display:block;font:600 30px/1.15 var(--mono);font-variant-numeric:tabular-nums;margin-top:4px;overflow-wrap:anywhere}
.result .u{font:500 13px var(--body);color:#5d6b63}
.result.main{box-shadow:0 0 0 3px var(--chip) inset,0 3px 8px rgba(0,0,0,.3)}
.note{margin:0;color:var(--felt-muted);font-size:14px}
.note strong{color:var(--felt-ink)}

details.more{border-top:1px solid rgba(255,255,255,.15);padding-top:14px}
details.more summary{cursor:pointer;font:800 16px var(--display);color:var(--felt-ink)}
details.more[open] summary{margin-bottom:12px}

/* Explanations below the tool. */
.prose{display:grid;gap:10px;max-width:68ch}
.prose h2{font:800 22px/1.15 var(--display);margin:14px 0 2px}
.prose p,.prose li{margin:0;color:var(--muted);text-wrap:pretty}
.prose ul,.prose ol{margin:0;padding-left:1.2em;display:grid;gap:6px}
.prose strong{color:var(--fg);font-weight:600}
.formula{font:600 14px/1.6 var(--mono);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--fg);overflow-x:auto}

.page{display:grid;gap:28px;min-width:0}
.section-title{font:800 22px/1.15 var(--display);margin:0 0 12px}
.more-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.more-tools a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none}
.more-tools a:hover{border-color:var(--muted)}
.more-tools b{display:block;font:800 17px/1.2 var(--display);margin-bottom:4px}
.more-tools span{color:var(--muted);font-size:14px}
.site-foot{color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:16px}

@media (max-width:560px){
  .row{grid-template-columns:1fr 1fr 44px}
  .row .name{grid-column:1 / -1}
  .row .out{grid-column:1 / 3;text-align:left;line-height:1.3}
  .row .out::before{content:"Capacity: ";font:500 13px var(--body);color:var(--felt-muted)}
  .row .icon-btn{grid-column:3;grid-row:2}
  .row .days-off{grid-column:1;grid-row:2}
  .row .avail{grid-column:2;grid-row:2}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}