/* My Productivity Calc — mobile-first. Plain CSS, no framework, no build step.
   Edit colours in one place: the :root block below. */

:root{
  --paper:#f7f4ee; --paper-2:#f1ece2; --ink:#1b1a17; --ink-2:#5d5a52;
  --rule:#d8d3c7; --rule-2:#e9e4d9; --field:#fffdf8;
  --accent:#1f5f52; --accent-2:#2d7a69; --flag:#8c3a1e;
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --pad:20px;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#14161a;--paper-2:#181b21;--ink:#eceae4;--ink-2:#9d9d96;
        --rule:#333a42;--rule-2:#242a31;--field:#1b1f25;
        --accent:#6fc9b3;--accent-2:#8bdcc7;--flag:#e08b64;}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
.sheet{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:block;padding:10px var(--pad);background:var(--accent);color:var(--paper)}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--ink)}
.masthead .inner{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-top:16px;padding-bottom:12px}
.wordmark{font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:-.015em;
  color:var(--ink);text-decoration:none}
.wordmark em{font-style:italic;color:var(--accent)}
.meta{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:600;margin:0}

/* ---------- hero ---------- */
.hero{padding:34px 0 30px;border-bottom:1px solid var(--rule)}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.85rem,7.2vw,3.1rem);line-height:1.07;
   letter-spacing:-.024em;margin:0 0 16px;max-width:19ch}
h1 em{font-style:italic;color:var(--accent)}
.lede{font-size:1.03rem;color:var(--ink-2);margin:0 0 12px;max-width:40rem}
.lede.small{font-size:.92rem}
.cta{display:inline-block;margin-top:10px;background:var(--accent);color:var(--paper);
  text-decoration:none;font-weight:600;padding:13px 24px;border-radius:3px;font-size:1rem}
.cta:active{background:var(--accent-2)}

/* ---------- bands ---------- */
.band{padding:32px 0;border-bottom:1px solid var(--rule)}
.band.alt{background:var(--paper-2)}
h2{font-family:var(--serif);font-size:1.4rem;font-weight:600;letter-spacing:-.012em;margin:0 0 5px}
.sec-note{font-size:.92rem;color:var(--ink-2);margin:0 0 20px}
.sec-note.wide{max-width:46rem}

/* ---------- form ---------- */
.field{margin:0 0 15px}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:.88rem;font-weight:600;margin-bottom:5px}
.field .unit{font-weight:400;font-size:.76rem;color:var(--ink-2)}
.field input,.field select{width:100%;padding:12px 12px;font:inherit;font-family:var(--mono);
  font-size:1rem;color:var(--ink);background:var(--field);border:1px solid var(--rule);border-radius:3px}
.field select{font-family:var(--sans)}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.field .why{font-size:.79rem;color:var(--ink-2);margin:5px 0 0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- headline figure ---------- */
.figure{border-bottom:1px solid var(--rule);padding-bottom:16px;margin:22px 0 18px}
.figure.tight{border:0;padding:0;margin:14px 0 0}
.figure .n{font-family:var(--serif);font-size:clamp(3rem,15vw,4.4rem);line-height:.92;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;display:block}
.figure .n.under{color:var(--flag)}
.figure .cap{font-size:.88rem;color:var(--ink-2);margin:9px 0 0;max-width:30rem}

/* ---------- day strip ---------- */
.strip{margin:0 0 20px}
.strip-bar{display:flex;height:34px;border:1px solid var(--ink);border-radius:2px;overflow:hidden;background:var(--field)}
.seg{transition:width .18s ease}
.seg.billed{background:var(--accent)}
.seg.unbilled{background:repeating-linear-gradient(135deg,transparent,transparent 5px,var(--rule) 5px,var(--rule) 6px)}
.seg.lunch{background:var(--rule-2);border-left:1px solid var(--ink)}
.strip-key{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem;color:var(--ink-2);margin:8px 0 0}
.strip-key b{font-weight:600;color:var(--ink)}
.strip-key i{display:inline-block;width:10px;height:10px;vertical-align:-1px;margin-right:5px;border:1px solid var(--ink)}
.strip-key i.billed{background:var(--accent)}
.strip-key i.unbilled{background:repeating-linear-gradient(135deg,transparent,transparent 3px,var(--rule) 3px,var(--rule) 4px)}
.strip-key i.lunch{background:var(--rule-2)}

/* ---------- ledger ---------- */
.ledger{width:100%;border-collapse:collapse;font-size:.95rem}
.ledger th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  font-weight:700;padding:0 0 7px;border-bottom:1px solid var(--ink)}
.ledger th:last-child,.ledger td:last-child{text-align:right}
.ledger td{padding:11px 0;border-bottom:1px solid var(--rule-2);vertical-align:baseline}
.ledger td:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger tr:last-child td{border-bottom:0}
.ledger .sub{display:block;font-size:.78rem;color:var(--ink-2);margin-top:3px;max-width:24rem}
.flagged td:last-child{color:var(--flag);font-weight:700}

.verdict{font-size:.95rem;font-weight:600;margin:14px 0 0;padding-left:13px;border-left:2px solid var(--accent)}
.verdict.behind{border-color:var(--flag);color:var(--flag)}

/* ---------- actions ---------- */
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.actions button{font:inherit;font-size:.88rem;font-weight:600;padding:10px 15px;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:3px}
.actions button:active{background:var(--ink);color:var(--paper)}
.saved{font-size:.8rem;color:var(--accent);font-weight:600}

/* ---------- tables ---------- */
.units-table{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.units-table th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);font-weight:700;padding:0 0 7px;border-bottom:1px solid var(--ink)}
.units-table td{padding:8px 0;border-bottom:1px solid var(--rule-2);font-family:var(--mono)}
.units-table th:nth-child(2),.units-table td:nth-child(2){text-align:right}
.units-table.wide-table td,.units-table.wide-table th{font-family:var(--sans);padding-right:14px}
.units-table.wide-table th:nth-child(2),.units-table.wide-table td:nth-child(2){text-align:left}
.units-table tr.hit td{background:var(--accent);color:var(--paper);font-weight:700}

.caveat{font-size:.86rem;color:var(--ink-2);border-left:2px solid var(--flag);
  padding:2px 0 2px 14px;margin:22px 0 0;max-width:46rem}
.caveat strong{color:var(--ink)}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--rule-2);padding:13px 0}
details:last-of-type{border-bottom:0}
summary{cursor:pointer;font-weight:600;font-family:var(--serif);font-size:1.05rem}
summary::marker{color:var(--accent)}
details p{color:var(--ink-2);margin:9px 0 0;max-width:46rem;font-size:.94rem}

/* ---------- ads: fixed height reserved so the page never jumps (protects Core Web Vitals) ---------- */
.ad-wrap{padding-top:22px;padding-bottom:22px;text-align:center}
.ad-label{display:block;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:6px}
.ad-slot{min-height:280px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--rule);border-radius:3px;background:var(--field)}
@media(min-width:760px){.ad-slot{min-height:120px}}

/* ---------- footer ---------- */
footer{padding:26px 0 44px;font-size:.86rem;color:var(--ink-2)}
footer p{margin:0 0 9px;max-width:46rem}
footer a{color:var(--ink-2);text-underline-offset:3px}
.fine{font-size:.78rem}

/* ---------- desktop ---------- */
@media(min-width:820px){
  :root{--pad:28px}
  body{font-size:17px}
  .hero{padding:52px 0 44px}
  .band{padding:44px 0}
  .worksheet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0}
  .col-form{padding:0 34px 0 0;border-right:1px solid var(--rule)}
  .col-out{padding:0 0 0 34px}
  .col-out .figure{margin-top:0}
  .week-grid,.ref-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:start}
  .ref-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
}

/* ---------- print: therapists screenshot or print this for supervision ---------- */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .hero,.ad-wrap,.actions,.cta,.skip,details,footer .fine{display:none}
  .band{border:0;padding:10pt 0;break-inside:avoid}
  .band.alt{background:#fff}
  .field input,.field select{border:0;padding:0;background:none}
  .worksheet{display:block}
  .col-form{border:0;padding:0}
  .col-out{padding:0}
}

/* ---------- navigation ---------- */
.topnav{display:flex;gap:16px;flex-wrap:wrap}
.topnav a{color:var(--ink-2);text-decoration:none;font-size:.86rem;font-weight:600;
  letter-spacing:.02em;padding:2px 0;border-bottom:2px solid transparent}
.topnav a:hover,.topnav a:focus{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- guide pages ---------- */
.article{max-width:44rem}
.crumb{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
  font-weight:600;margin:0 0 14px}
.crumb a{color:var(--accent)}
.article h1{font-size:clamp(1.7rem,5.6vw,2.5rem);margin-bottom:12px;max-width:22ch}
.dek{font-family:var(--serif);font-size:1.16rem;font-style:italic;color:var(--ink-2);
  margin:0 0 10px;max-width:38rem}
.byline{font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
  font-weight:600;margin:0 0 30px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.article h2{font-size:1.32rem;margin:34px 0 10px}
.article p{margin:0 0 16px}
.article ul,.article ol{margin:0 0 18px;padding-left:22px}
.article li{margin-bottom:9px}
.article strong{font-weight:700}
.article table{width:100%;border-collapse:collapse;font-size:.92rem;margin:0 0 20px;
  font-variant-numeric:tabular-nums}
.article th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);font-weight:700;padding:0 10px 7px 0;border-bottom:1px solid var(--ink)}
.article td{padding:7px 10px 7px 0;border-bottom:1px solid var(--rule-2);font-family:var(--mono)}
.article a{color:var(--accent);text-underline-offset:3px}
@media(max-width:819px){.article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* ---------- guide lists ---------- */
.related{list-style:none;margin:0;padding:0}
.related li{border-bottom:1px solid var(--rule-2);padding:14px 0}
.related li:last-child{border-bottom:0}
.related a{display:block;font-family:var(--serif);font-size:1.08rem;font-weight:600;
  color:var(--ink);text-decoration:none;letter-spacing:-.008em}
.related a:hover{color:var(--accent)}
.related span{display:block;font-size:.88rem;color:var(--ink-2);margin-top:3px}
.related .card-dek{font-size:.88rem;color:var(--ink-2);margin:3px 0 0}
.tag-group{margin-bottom:34px}
.tag-group h2{border-bottom:1px solid var(--ink);padding-bottom:7px;margin-bottom:4px}

.cta-block{max-width:44rem}
.cta-block p{color:var(--ink-2);margin:6px 0 16px}

/* ---------- home page guide teaser ---------- */
.guide-teaser{display:grid;gap:0}
@media(min-width:820px){.guide-teaser{grid-template-columns:1fr 1fr;gap:0 38px}}

/* ---------- calculator pages: card + score layout ---------- */
.card{background:var(--field);border:1px solid var(--rule);border-radius:10px;padding:22px}
.calc-hero{padding:26px 0 4px}
.calc-hero h1{font-size:clamp(1.7rem,5.5vw,2.4rem);margin-bottom:10px}
.calc-shell{display:grid;gap:18px}
@media(min-width:880px){.calc-shell{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px}}
.calc-inputs h2,.calc-result h2{font-size:1.1rem;margin-bottom:4px}

.result-label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  font-weight:700;margin:0 0 6px}
.result-figure{font-family:var(--serif);font-size:clamp(2.8rem,11vw,4rem);line-height:1;
  letter-spacing:-.03em;margin:0;font-variant-numeric:tabular-nums}
.calc-band{display:inline-block;margin:12px 0 0;padding:5px 13px;border-radius:999px;
  font-size:.8rem;font-weight:700;letter-spacing:.02em}
.calc-band.b1{background:#fbe3da;color:#8c3a1e}
.calc-band.b2{background:#fbeedb;color:#8a5a00}
.calc-band.b3{background:#f6f0da;color:#6b5c15}
.calc-band.b4{background:#dcefe9;color:#17564a}
.calc-band.b5{background:#cfe9df;color:#12463a}
@media (prefers-color-scheme:dark){
  .calc-band.b1{background:#3a201a;color:#e08b64}
  .calc-band.b2{background:#33270f;color:#ffca7a}
  .calc-band.b3{background:#2f2d16;color:#d9cf87}
  .calc-band.b4{background:#123128;color:#6fc9b3}
  .calc-band.b5{background:#12463a;color:#8bdcc7}
}
.meter{height:8px;border-radius:99px;background:var(--rule-2);margin:16px 0 4px;overflow:hidden}
.meter-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .18s ease}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin:20px 0 0}
.stat-grid .stat{background:var(--field);padding:12px 14px}
.stat-grid .k{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);font-weight:700}
.stat-grid .v{display:block;font-family:var(--mono);font-size:1.1rem;font-variant-numeric:tabular-nums;
  margin-top:3px}
.calc-notes{list-style:none;margin:18px 0 0;padding:0}
.calc-notes li{font-size:.9rem;color:var(--ink-2);padding:9px 0 9px 14px;
  border-left:2px solid var(--accent);margin-bottom:8px}

.two-col{display:grid;gap:18px}
@media(min-width:880px){.two-col{grid-template-columns:1fr 1fr;gap:22px}}
.read-more{font-size:.92rem;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-2)}

/* ---------- tool library cards ---------- */
.tool-grid{display:grid;gap:14px;margin-top:16px}
@media(min-width:700px){.tool-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tool-grid{grid-template-columns:repeat(3,1fr)}}
.tool-card{display:block;background:var(--field);border:1px solid var(--rule);border-radius:10px;
  padding:18px;text-decoration:none;color:var(--ink);transition:border-color .15s ease}
.tool-card:hover{border-color:var(--accent)}
.tool-cat{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:8px}
.tool-name{display:block;font-family:var(--serif);font-size:1.14rem;font-weight:600;
  letter-spacing:-.01em;margin-bottom:6px}
.tool-dek{display:block;font-size:.88rem;color:var(--ink-2);margin-bottom:12px}
.tool-go{display:block;font-size:.82rem;font-weight:700;color:var(--accent)}