/* Shared chrome for the tool pages. Same tokens and type as the front page, so
   the tools read as part of one site rather than a pile of separate projects. */

:root {
  --bg:#ffffff; --ink:#14171d; --dim:#6a7280; --faint:#9aa1ac;
  --line:rgba(0,0,0,.10); --panel:#fafafa; --hover:#f2f3f5;
  --accent:#14171d;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0b0d11; --ink:#eef1f6; --dim:#939cab; --faint:#666e7c;
    --line:rgba(255,255,255,.11); --panel:#0f1218; --hover:#161b24; --accent:#eef1f6;
  }
}
:root[data-theme="dark"] {
  --bg:#0b0d11; --ink:#eef1f6; --dim:#939cab; --faint:#666e7c;
  --line:rgba(255,255,255,.11); --panel:#0f1218; --hover:#161b24; --accent:#eef1f6;
}

*,*::before,*::after{box-sizing:border-box}
body.app{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:1px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ── chrome ─────────────────────────────────────────────────────────────── */
.appbar{display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,2rem);border-bottom:1px solid var(--line)}
.mark{font-family:var(--mono);font-size:.78rem;letter-spacing:.32em}
.cursor{animation:blink 1.5s steps(2,start) infinite}
@keyframes blink{to{opacity:0}}
.crumb{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-right:auto;margin-left:.6rem}
.theme{appearance:none;background:none;border:0;color:var(--faint);cursor:pointer;line-height:0;padding:.2rem;transition:color .2s,transform .35s}
.theme:hover{color:var(--ink);transform:rotate(25deg)}
.appfoot{padding:2rem clamp(1rem,4vw,2rem) 3rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--faint)}
.appfoot a:hover{color:var(--ink)}

/* ── pomodoro ───────────────────────────────────────────────────────────── */
.pomo{max-width:34rem;margin:0 auto;padding:clamp(2rem,6vw,3.5rem) clamp(1rem,4vw,2rem) 4rem}

.phases{display:flex;gap:.4rem;justify-content:center;margin-bottom:clamp(2rem,5vw,3rem)}
.phases button{appearance:none;background:none;border:1px solid transparent;border-radius:2px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding:.5rem .85rem;cursor:pointer;transition:color .2s,border-color .2s}
.phases button:hover{color:var(--dim)}
.phases button.on{color:var(--ink);border-color:var(--line)}

.dial{position:relative;width:min(15rem,72vw);aspect-ratio:1;margin:0 auto}
.dial svg{width:100%;height:100%;display:block}
.track{stroke:var(--line)}
.prog{stroke:var(--accent);transition:stroke-dashoffset .3s linear}
.readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem}
.time{font-family:var(--mono);font-weight:300;font-size:clamp(2.1rem,9vw,2.9rem);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.phase-name{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

.now{text-align:center;color:var(--dim);font-size:.94rem;margin:1.4rem 0 0;min-height:1.5em}

.controls{display:flex;gap:.5rem;justify-content:center;margin-top:1.6rem}
.primary,.ghost{appearance:none;cursor:pointer;border-radius:2px;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:.7rem 1.5rem;transition:background .2s,color .2s}
.primary{background:var(--ink);color:var(--bg);border:1px solid var(--ink);min-width:7.5rem}
.primary:hover{opacity:.86}
.ghost{background:none;color:var(--dim);border:1px solid var(--line)}
.ghost:hover{color:var(--ink);border-color:var(--ink)}
.hint{text-align:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--faint);margin:1.1rem 0 0}

/* ── panels ─────────────────────────────────────────────────────────────── */
.panel{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:1.6rem}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.panel h2{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);font-weight:400;margin:0}
.count{font-family:var(--mono);font-size:.68rem;color:var(--faint)}

#taskForm{display:flex;gap:.5rem}
#taskForm input{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:.6rem .8rem;color:var(--ink);font-family:var(--sans);font-size:.95rem}
#taskForm input::placeholder{color:var(--faint)}
#taskForm button{appearance:none;background:none;border:1px solid var(--line);border-radius:2px;
  color:var(--dim);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;padding:0 1rem;cursor:pointer}
#taskForm button:hover{color:var(--ink);border-color:var(--ink)}

.tasks{list-style:none;margin:1rem 0 0;padding:0}
.tasks li{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.tick{appearance:none;width:1rem;height:1rem;flex:none;border:1px solid var(--dim);
  border-radius:50%;background:none;cursor:pointer;transition:background .2s,border-color .2s}
.tasks li.is-done .tick{background:var(--ink);border-color:var(--ink)}
.tx{flex:1;font-size:.95rem}
.tasks li.is-done .tx{color:var(--faint);text-decoration:line-through}
.rm{appearance:none;background:none;border:0;color:var(--faint);font-size:1.1rem;line-height:1;cursor:pointer;padding:0 .2rem}
.rm:hover{color:var(--ink)}
.empty{color:var(--faint);font-size:.9rem;margin:1rem 0 0}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.stats b{display:block;font-family:var(--mono);font-weight:400;font-size:1.55rem;font-variant-numeric:tabular-nums}
.stats span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--faint)}

.week{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;height:4.5rem;margin-top:1.6rem;align-items:end}
.bar{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;align-items:center}
.bar span{width:100%;background:var(--ink);border-radius:1px;min-height:2px;transition:height .3s}
.bar span.zero{background:var(--line)}
.bar em{font-family:var(--mono);font-style:normal;font-size:.6rem;color:var(--faint)}

.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.8rem}
.settings label{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--dim);
  display:flex;align-items:center;gap:.45rem}
.settings input{width:3.4rem;background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:.35rem .45rem;color:var(--ink);font-family:var(--mono);font-size:.85rem;text-align:center}
.switches{margin-top:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.switches label{font-size:.9rem;color:var(--dim);display:flex;align-items:center;gap:.55rem;cursor:pointer}
.switches input{accent-color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  .prog{transition:none}.cursor{animation:none}.theme{transition:none}
}

/* ── reconcile ──────────────────────────────────────────────────────────── */
.wide{max-width:60rem;margin:0 auto;padding:clamp(2rem,5vw,3rem) clamp(1rem,4vw,2rem) 4rem}
.intro-block{max-width:38rem;margin-bottom:2.5rem}
.intro-block h1{font-weight:200;font-size:clamp(1.8rem,5vw,2.5rem);letter-spacing:-.01em;margin:0 0 .9rem}
.intro-block p{color:var(--dim);margin:0}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem}
.drop{border:1px solid var(--line);border-radius:3px;padding:1.3rem;background:var(--panel)}
.drop label{display:block;cursor:pointer}
.drop-label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.7rem}
.drop-cta{display:block;border:1px dashed var(--line);border-radius:2px;padding:.9rem;
  text-align:center;color:var(--dim);font-size:.92rem;transition:border-color .2s,color .2s}
.drop label:hover .drop-cta{border-color:var(--ink);color:var(--ink)}
.cols{margin-top:1rem;display:grid;gap:.6rem}
.cols label{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--faint);
  display:flex;align-items:center;gap:.5rem}
.cols select{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:2px;
  padding:.4rem .5rem;color:var(--ink);font-family:var(--sans);font-size:.88rem}

.opts{margin-top:1.4rem;border:1px solid var(--line);border-radius:3px;padding:0 1.1rem}
.opts summary{cursor:pointer;padding:.9rem 0;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.opts summary:hover{color:var(--ink)}
.opt-grid{display:flex;flex-wrap:wrap;gap:1rem;padding-bottom:.4rem}
.opt-grid label{font-family:var(--mono);font-size:.72rem;color:var(--dim);display:flex;align-items:center;gap:.45rem}
.opt-grid input{width:5rem;background:var(--bg);border:1px solid var(--line);border-radius:2px;
  padding:.35rem .5rem;color:var(--ink);font-family:var(--mono);font-size:.85rem}
.opts .switches{padding-bottom:1.1rem}
.opts .switches em{font-style:normal;color:var(--faint);font-size:.85em}

.rec-form .primary{margin-top:1.4rem}
.rec-form .primary:disabled{opacity:.4;cursor:not-allowed}
.err{color:#c0392b;font-size:.9rem;margin:.9rem 0 0}
:root[data-theme="dark"] .err,
:root:not([data-theme="light"]) .err{color:#ff8a75}

#results{margin-top:3rem;border-top:1px solid var(--line);padding-top:2rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:2rem}
.card{background:var(--bg);padding:1.1rem}
.card b{display:block;font-family:var(--mono);font-weight:400;font-size:1.45rem;font-variant-numeric:tabular-nums}
.card span{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--faint)}
.card.bad b{color:#c0392b}.card.warn b{color:#b8860b}
:root[data-theme="dark"] .card.bad b,:root:not([data-theme="light"]) .card.bad b{color:#ff8a75}
:root[data-theme="dark"] .card.warn b,:root:not([data-theme="light"]) .card.warn b{color:#e0b354}

.tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem}
.tabs button{appearance:none;background:none;border:1px solid transparent;border-radius:2px;cursor:pointer;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--faint);padding:.45rem .7rem}
.tabs button em{font-style:normal;opacity:.65}
.tabs button:hover{color:var(--dim)}
.tabs button.on{color:var(--ink);border-color:var(--line)}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:3px}
#table{width:100%;border-collapse:collapse;font-size:.88rem}
#table th{text-align:left;font-family:var(--mono);font-weight:400;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);padding:.75rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap}
#table td{padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
#table tr:last-child td{border-bottom:0}
#table td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
#table td.none{color:var(--faint);text-align:center;padding:2rem}
.note{font-family:var(--mono);font-size:.68rem;color:var(--faint);margin:.9rem 0 1.2rem}

/* ── headlines ──────────────────────────────────────────────────────────── */
.news-bar{display:flex;gap:.5rem;align-items:center;margin-bottom:1.2rem}
.news-bar input[type=search]{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);
  border-radius:2px;padding:.6rem .8rem;color:var(--ink);font-family:var(--sans);font-size:.95rem}
.news-bar input::placeholder{color:var(--faint)}
.news-bar button{appearance:none;background:none;border:1px solid var(--line);border-radius:2px;
  color:var(--dim);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;padding:0 1rem;cursor:pointer}
.news-bar button:hover{color:var(--ink);border-color:var(--ink)}
.news-bar .clear{font-family:var(--mono);font-size:.7rem;color:var(--faint)}
.news-bar .clear:hover{color:var(--ink)}

.sections{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.8rem}
.sections a{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);border:1px solid transparent;border-radius:2px;padding:.4rem .7rem}
.sections a:hover{color:var(--dim)}
.sections a.on{color:var(--ink);border-color:var(--line)}

.feed{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.feed li{border-bottom:1px solid var(--line)}
.feed a{display:flex;gap:1rem;padding:1.1rem 0;align-items:flex-start}
.feed img{width:6.5rem;height:4.4rem;object-fit:cover;border-radius:2px;flex:none;background:var(--panel)}
.feed .txt{min-width:0;display:flex;flex-direction:column;gap:.22rem}
.feed .meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.feed .head{font-size:1rem;line-height:1.35;color:var(--ink)}
.feed a:hover .head{text-decoration:underline;text-underline-offset:3px}
.feed .sum{font-size:.88rem;color:var(--dim);line-height:1.5}
.none-msg{color:var(--faint);padding:2.5rem 0;text-align:center}

@media (max-width:560px){
  .feed img{width:4.4rem;height:3.2rem}
  .feed .sum{display:none}
}

/* ── anomalies ──────────────────────────────────────────────────────────── */
#table td.why{color:var(--dim);font-size:.86rem;line-height:1.5;min-width:16rem}
#table tr.sev-high td:nth-child(4){color:#c0392b}
:root[data-theme="dark"] #table tr.sev-high td:nth-child(4),
:root:not([data-theme="light"]) #table tr.sev-high td:nth-child(4){color:#ff8a75}
.rec-form .drop{max-width:32rem}

/* ── report builder ─────────────────────────────────────────────────────── */
.sched{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--dim);
  border-left:2px solid var(--line);padding-left:.8rem;margin:0 0 1.6rem}
.mailbody{background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:1.2rem;overflow-x:auto;font-family:var(--mono);font-size:.78rem;line-height:1.65;
  color:var(--ink);white-space:pre;margin:0}
.hintlet{font-size:.62rem;color:var(--faint)}

/* ── spec check ─────────────────────────────────────────────────────────── */
.rule{display:flex;gap:.45rem;align-items:center;margin-bottom:.5rem;flex-wrap:wrap}
.rule select,.rule input{background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:.45rem .55rem;color:var(--ink);font-family:var(--sans);font-size:.9rem}
.rule select{min-width:8rem}
.rule input{flex:1;min-width:7rem}
.rule .rm{appearance:none;background:none;border:0;color:var(--faint);font-size:1.15rem;
  line-height:1;cursor:pointer;padding:0 .3rem}
.rule .rm:hover{color:var(--ink)}
#addRule{margin-top:.4rem}

.verdict{font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;padding:.9rem 1.1rem;
  border-radius:3px;margin-bottom:1.6rem;border:1px solid var(--line)}
.verdict.pass{color:#1e7a46;border-color:#1e7a4633;background:#1e7a460d}
.verdict.fail{color:#c0392b;border-color:#c0392b33;background:#c0392b0d}
:root[data-theme="dark"] .verdict.pass,:root:not([data-theme="light"]) .verdict.pass{color:#6ede9d}
:root[data-theme="dark"] .verdict.fail,:root:not([data-theme="light"]) .verdict.fail{color:#ff8a75}
.card.ok b{color:#1e7a46}
:root[data-theme="dark"] .card.ok b,:root:not([data-theme="light"]) .card.ok b{color:#6ede9d}