/* ============================================================
   PRODUCTIVITY — shared shell for the hub and every tool page
   (tool-specific styles live in css/tool-<id>.css)
   ============================================================ */
body[data-section="productivity"] button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; }

/* ---------- breadcrumb + tool switcher ---------- */
.tool-nav{ display:flex; justify-content:space-between; align-items:center; gap:.8rem 2rem; flex-wrap:wrap; padding-top:1.4rem; }
.tool-crumb{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.tool-crumb a{ color:var(--ink-soft); border-bottom:1px solid var(--line); }
.tool-crumb a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.tool-crumb span{ margin:0 .5rem; color:var(--line); }
.tool-strip{ display:flex; gap:.4rem 1.2rem; flex-wrap:wrap; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.tool-strip[hidden]{ display:none; }
.tool-strip a{ color:var(--ink-soft); padding-bottom:.25rem; border-bottom:2px solid transparent; }
.tool-strip a:hover{ color:var(--ink); }
.tool-strip a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); }
.tool-strip b{ font-weight:500; color:var(--accent); margin-right:.35rem; }

/* ---------- page heading (hub and tools) ---------- */
.tool-head{ padding-top:2rem; }
.tool-eyebrow{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.tool-title{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.9rem,4.6vw,2.6rem); line-height:1.1; margin:.35rem 0 0; }
.tool-intro{ margin:.7rem 0 0; color:var(--ink-soft); max-width:62ch; }

/* ---------- hub ---------- */
.tool-grid{ list-style:none; margin:2.2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.tool-grid > li{ background:var(--paper); }
.tool-card{ display:flex; flex-direction:column; height:100%; padding:1.6rem 1.5rem 1.5rem; transition:background .15s; }
a.tool-card:hover{ background:var(--paper-2); }
.tool-card-no{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--accent); }
.tool-card-name{ font-family:var(--f-display); font-weight:600; font-size:1.25rem; margin:.6rem 0 .5rem; line-height:1.2; }
.tool-card-blurb{ font-size:.95rem; color:var(--ink-soft); margin:0 0 1.2rem; }
.tool-card-meta{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:auto; }
.tool-card-go{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; margin-top:1rem; align-self:flex-start; border-bottom:1px solid currentColor; }
.tool-card.is-soon{ justify-content:center; align-items:center; text-align:center; min-height:12rem; color:var(--ink-soft); background:repeating-linear-gradient(135deg, transparent 0 10px, rgba(201,194,180,.25) 10px 11px); }
.tool-card.is-soon .tool-card-name{ font-size:1rem; color:var(--ink-soft); }
.tool-card.is-soon p{ margin:0; font-size:.88rem; }

/* ---------- sliders (shared by every tool) ---------- */
body[data-section="productivity"] input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; --p:50%;
}
body[data-section="productivity"] input[type=range]::-webkit-slider-runnable-track{
  height:3px; background:linear-gradient(90deg, var(--accent) var(--p), var(--line) var(--p));
}
body[data-section="productivity"] input[type=range]::-moz-range-track{ height:3px; background:var(--line); }
body[data-section="productivity"] input[type=range]::-moz-range-progress{ height:3px; background:var(--accent); }
body[data-section="productivity"] input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; margin-top:-6.5px; background:var(--paper); border:2px solid var(--accent); border-radius:2px; transform:rotate(45deg);
}
body[data-section="productivity"] input[type=range]::-moz-range-thumb{
  width:12px; height:12px; background:var(--paper); border:2px solid var(--accent); border-radius:2px; transform:rotate(45deg);
}
body[data-section="productivity"] input[type=range]:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* two-handle range: two inputs stacked on one track, a fill div underneath */
.dual{ position:relative; height:22px; --a:0%; --b:100%; }
.dual-track{ position:absolute; left:8px; right:8px; top:50%; height:3px; margin-top:-1.5px; background:var(--line); }
.dual-track i{ position:absolute; top:0; bottom:0; background:var(--accent); }
body[data-section="productivity"] .dual input[type=range]{ position:absolute; inset:0; margin:0; pointer-events:none; }
body[data-section="productivity"] .dual input[type=range]::-webkit-slider-runnable-track{ background:transparent; }
body[data-section="productivity"] .dual input[type=range]::-moz-range-track{ background:transparent; }
body[data-section="productivity"] .dual input[type=range]::-moz-range-progress{ background:transparent; }
body[data-section="productivity"] .dual input[type=range]::-webkit-slider-thumb{ pointer-events:auto; cursor:grab; }
body[data-section="productivity"] .dual input[type=range]::-moz-range-thumb{ pointer-events:auto; cursor:grab; }
.dual-ticks{ display:flex; justify-content:space-between; margin:0 4px; font-family:var(--f-mono); font-size:.58rem; color:var(--ink-soft); opacity:.75; }