/* ==========================================================================
   TOOLS
   Ported from the previous site so the eight tools keep working. These rules
   still carry the old palette in places. They are scoped to tool pages only,
   so they cannot leak into the new design. Worth a cleanup pass later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OLD TOKEN COMPATIBILITY
   The ported markup and CSS reference the previous site's variable names.
   None of those exist now, so every one resolved to nothing and selected
   states rendered with no background: white text on the page colour.

   Rather than rewrite 149 rules, the old names are re-pointed at the current
   tokens here. Change tokens.css and the tools follow automatically.

   --violet and --c-blue were the old primary interactive colour, so they now
   map to the accent. --accent was the old red, which only ever meant "bad",
   so it maps to the danger token, not to the new accent.
   -------------------------------------------------------------------------- */
.tool-page {
  --violet:       var(--c-accent);
  --violet-soft:  var(--c-accent-hover);
  --c-blue:       var(--c-accent);
  --c-green:      var(--c-good);
  --c-teal:       var(--c-accent-4);
  --c-purple:     var(--c-accent-5);
  --c-amber:      var(--c-warn);
  --accent:       var(--c-danger);

  --ink:          var(--c-ink);
  --ink-soft:     var(--c-ink-2);
  --muted:        var(--c-ink-2);   /* ink-3 lands under AA on small labels */
  --navy:         var(--c-ink);
  --line:         var(--c-rule);
  --bg:           var(--c-ground);
  --bg-soft:      var(--c-surface-2);
  --surface:      var(--c-surface);
  --maxw:         var(--w-page);
  --serif:        var(--font-display);
  --sans:         var(--font-body);
}
.tool-page .theme-opt.active {border-color:var(--accent);background:var(--bg);color:var(--ink);box-shadow:0 0 0 1.5px var(--accent) inset}
.tool-page .page {display:none}
.tool-page .page.active {display:block}
.tool-page .wrap {max-width:var(--maxw);margin:0 auto;padding:0 22px}
.tool-page .sp {padding:54px 0}
.tool-page .btn {display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:.92rem;padding:11px 20px;border-radius:6px;cursor:pointer;border:none;transition:.16s}
.tool-page .btn-vi {background:var(--violet);color:#fff}
.tool-page .btn-vi:hover {background:var(--violet-soft)}
.tool-page .btn-gh {background:var(--c-surface);color:var(--ink);border:1.5px solid var(--line)}
.tool-page .btn-gh:hover {border-color:var(--navy)}
.tool-page .navrow a:hover, .tool-page .navrow a.active {color:var(--accent);border-bottom-color:var(--accent)}
.tool-page .rnb .l {font-size:.78rem;color:var(--c-on-ink-2);margin-top:3px}
.tool-page .back-btn {display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.88rem;color:var(--navy);cursor:pointer;border:none;background:none;padding:0;white-space:nowrap}
.tool-page .back-btn:hover {color:var(--accent)}
.tool-page .stat-box .v {font-family:var(--serif);font-size:1.8rem;font-weight:700;color:var(--violet)}
.tool-page .stat-box .l {font-size:.8rem;color:var(--muted);margin-top:3px}
.tool-page /* ======================== TOOL STYLES ======================== */
/* shared */
.tool-page-hdr {padding:40px 0 30px;color:#fff}
.tool-page .tool-page-hdr h1 {color:#fff;margin-bottom:8px}
.tool-page .tool-page-hdr p {color:rgba(255,255,255,.8);font-size:.98rem;margin-top:8px}
.tool-page .tool-wrap {max-width:1000px;margin:0 auto;padding:0 22px}
.tool-page .tpanel {background:var(--bg-soft);border-radius:12px;padding:22px}
.tool-page .tpanel h4 {font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.tool-page .flabel {display:block;font-size:.85rem;font-weight:700;margin-bottom:6px;color:var(--ink)}
.tool-page .finput {width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:7px;font-family:var(--sans);font-size:.9rem}
.tool-page .finput:focus {outline:none;border-color:var(--violet)}
.tool-page .fsel {width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:7px;font-family:var(--sans);font-size:.9rem;background:var(--c-surface)}
.tool-page .ftarea {width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:7px;font-family:var(--sans);font-size:.9rem;resize:vertical;min-height:80px}
.tool-page .ftarea:focus, .tool-page .fsel:focus {outline:none;border-color:var(--violet)}
.tool-page .result-box {background:var(--c-surface);border:1.5px solid var(--line);border-radius:10px;padding:18px;min-height:80px;font-size:.95rem;line-height:1.7;white-space:pre-wrap}
.tool-page .result-box.loading {color:var(--muted);font-style:italic}
.tool-page .tok {display:none;color:var(--c-green);font-weight:700;font-size:.82rem;margin-top:8px}
.tool-page .stat2 {background:var(--c-surface);border-radius:10px;padding:18px;text-align:center}
.tool-page .stat2 .v {font-family:var(--serif);font-size:2rem;font-weight:700}
.tool-page .stat2 .l {font-size:.76rem;color:var(--muted);margin-top:3px}
.tool-page /* sliders */
.sl-row {margin-bottom:18px}
.tool-page .sl-row label {display:flex;justify-content:space-between;font-size:.9rem;font-weight:600;margin-bottom:6px}
.tool-page .sl-row label span {color:var(--violet);font-weight:800}
.tool-page /* toggle */
.tog-row {display:flex;justify-content:space-between;align-items:center;font-size:.9rem;font-weight:600;margin-bottom:14px}
.tool-page .tog {position:relative;width:44px;height:24px;flex-shrink:0}
.tool-page .tog input {opacity:0;width:0;height:0}
.tool-page .tog-sl {position:absolute;inset:0;background:var(--c-rule-strong);border-radius:24px;cursor:pointer;transition:.2s}
.tool-page .tog-sl:before {content:"";position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:var(--c-surface);border-radius:50%;transition:.2s}
.tool-page .tog input:checked+.tog-sl {background:var(--violet)}
.tool-page .tog input:checked+.tog-sl:before {transform:translateX(20px)}
.tool-page /* tone pills */
.tone-pills {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tool-page .tp {padding:6px 14px;border:1.5px solid var(--line);border-radius:20px;font-family:var(--sans);font-size:.82rem;font-weight:700;cursor:pointer;background:var(--c-surface);transition:.15s}
.tool-page .tp.active {background:var(--violet);color:#fff;border-color:var(--violet)}
.tool-page /* stars */
.stars {font-size:1.4rem;display:flex;gap:4px;margin-bottom:6px}
.tool-page .star {cursor:pointer;opacity:.3;transition:.1s}
.tool-page .star.on {opacity:1}
.tool-page /* poster */
.tmpl-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tool-page .tmpl {border:2px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;transition:.15s}
.tool-page .tmpl:hover {border-color:var(--violet)}
.tool-page .tmpl.sel {border-color:var(--violet);box-shadow:0 0 0 3px var(--c-accent-tint)}
.tool-page .tmpl .prev {height:60px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;color:#fff;letter-spacing:.05em}
.tool-page .tmpl .pnm {font-size:.76rem;text-align:center;padding:5px;background:var(--c-surface)}
.tool-page .role-row {display:flex;gap:8px;align-items:center;margin-bottom:8px}
.tool-page .role-row select {flex:1;padding:9px 10px;border:1.5px solid var(--line);border-radius:6px;font-family:var(--sans);font-size:.88rem}
.tool-page .role-row input {width:60px;padding:9px 8px;border:1.5px solid var(--line);border-radius:6px;font-family:var(--sans);font-size:.88rem;text-align:center}
.tool-page .role-row .del {background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:4px}
.tool-page .role-row .del:hover {color:var(--accent)}
.tool-page .add-role {width:100%;padding:10px;border:1.5px dashed var(--violet);border-radius:6px;background:transparent;font-family:var(--sans);font-size:.88rem;font-weight:700;color:var(--violet);cursor:pointer}
.tool-page #posterCanvas .pc-top-block {padding:7% 8% 5%}
.tool-page #posterCanvas .pc-mid-block {padding:0 8%;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.tool-page #posterCanvas .pc-ft {padding:4% 8% 7%;border-top:1px solid rgba(255,255,255,.22)}
.tool-page #posterCanvas .pc-hl {font-family:var(--serif);font-weight:700;line-height:1.0;margin:0 0 8px}
.tool-page #posterCanvas .pc-store {font-weight:600;opacity:.9;margin-bottom:0}
.tool-page #posterCanvas .pc-div {height:1px;background:rgba(255,255,255,.25);margin:14px 0 0}
.tool-page #posterCanvas .pc-pos-lbl {font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.65;margin-bottom:8px}
.tool-page #posterCanvas .pc-pos-row {display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.12);border-radius:8px}
.tool-page #posterCanvas .pc-pos-nm {font-weight:700}
.tool-page #posterCanvas .pc-pos-badge {background:rgba(255,255,255,.25);border-radius:20px;padding:4px 14px;font-size:.82rem;font-weight:800;white-space:nowrap}
.tool-page #posterCanvas .pc-ft-lbl {font-size:.68rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;opacity:.65;margin-bottom:8px}
.tool-page #posterCanvas .pc-ft-line {font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:8px;margin-top:4px}
.tool-page /* schedule */
.sched-tbl {border-radius:10px;overflow:auto;border:1px solid var(--line)}
.tool-page .sched-tbl table {width:100%;border-collapse:collapse;font-size:.84rem;min-width:600px}
.tool-page .sched-tbl th {background:var(--bg-soft);padding:10px 12px;text-align:left;font-weight:800;color:var(--muted);text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;border-bottom:1px solid var(--line)}
.tool-page .sched-tbl td {padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tool-page .sched-tbl tr:last-child td {border:none}
.tool-page .shift-badge {display:inline-block;padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:700}
.tool-page /* waste calc */
.wc-output {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.tool-page .wc-stat {background:var(--c-surface);border-radius:10px;padding:16px;border-top:3px solid var(--c-green);text-align:center}
.tool-page .wc-stat .v {font-family:var(--serif);font-size:1.8rem;font-weight:700;color:var(--c-green)}
.tool-page .wc-stat.amber {border-top-color:var(--c-amber)}
.tool-page .wc-stat.amber .v {color:var(--c-amber)}
.tool-page .wc-stat.red {border-top-color:var(--accent)}
.tool-page .wc-stat.red .v {color:var(--accent)}
.tool-page .wc-stat.blue {border-top-color:var(--c-blue)}
.tool-page .wc-stat.blue .v {color:var(--c-blue)}
.tool-page .wc-stat .l {font-size:.76rem;color:var(--muted);margin-top:3px}
.tool-page .wc-bar-wrap {background:var(--bg-soft);border-radius:8px;padding:16px;margin-top:12px}
.tool-page .wc-bar-row {display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:.84rem}
.tool-page .wc-bar-row .cat {width:130px;flex-shrink:0;font-weight:600;color:var(--ink-soft)}
.tool-page .wc-bar {flex:1;background:var(--c-rule);border-radius:4px;height:10px;overflow:hidden}
.tool-page .wc-bar-fill {height:100%;border-radius:4px;transition:.4s}
.tool-page .wc-bar-row .val {width:50px;text-align:right;font-weight:700;color:var(--ink)}
.tool-page /* job desc */
.jd-chips {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tool-page .jd-chip {padding:5px 12px;border:1.5px solid var(--line);border-radius:20px;font-size:.82rem;font-weight:700;cursor:pointer;background:var(--c-surface);transition:.15s}
.tool-page .jd-chip.active {background:var(--c-blue);color:#fff;border-color:var(--c-blue)}
.tool-page /* checklist */
.cl-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tool-page .cl-grid {grid-template-columns:1fr}
.tool-page .cl-category {background:var(--c-surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tool-page .cl-cat-hdr {display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-soft);border-bottom:1px solid var(--line);font-weight:800;font-size:.9rem}
.tool-page .cl-item {display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:.12s}
.tool-page .cl-item:last-child {border:none}
.tool-page .cl-item:hover {background:var(--c-surface-2)}
.tool-page .cl-item.done {opacity:.5}
.tool-page .cl-item.done .cl-text {text-decoration:line-through;color:var(--muted)}
.tool-page .cl-cb {width:18px;height:18px;border-radius:4px;border:2px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s}
.tool-page .cl-item.done .cl-cb {background:var(--c-green);border-color:var(--c-green);color:#fff}
.tool-page .cl-text {font-size:.88rem}
.tool-page .cl-prog {height:6px;background:var(--c-rule);border-radius:3px;margin-bottom:20px;overflow:hidden}
.tool-page .cl-prog-fill {height:100%;background:var(--c-green);border-radius:3px;transition:.3s}
.tool-page .cl-prog-label {font-size:.8rem;color:var(--muted);margin-bottom:6px;font-weight:600}
.tool-page .seo-item {display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.tool-page .seo-item:last-child {border:none}
.tool-page .seo-status {width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0}
.tool-page .seo-item .si-txt {flex:1}
.tool-page .si-tip {font-size:.78rem;color:var(--muted)}
.tool-page .cs-block .val {font-weight:700;color:var(--ink);font-size:.98rem;margin-bottom:2px;word-break:break-word}
.tool-page .cm-pill.active {background:var(--navy);color:#fff}
.tool-page .cm-sort button.active {color:var(--accent);background:var(--c-accent-tint)}
.tool-page .cm-arrow.up.on {color:var(--accent);background:var(--c-accent-tint)}
.tool-page .cm-arrow.down.on {color:var(--c-accent);background:var(--c-accent-tint)}
.tool-page .pc-progress.on .pc-progress-fill {animation:pcfake 18s linear forwards}
.tool-page .pc-ep-summary.on {display:block}
.tool-page .blog-article-hdr .wrap {max-width:820px;margin:0 auto}
.tool-page .blog-stat .v {font-size:2rem;font-weight:800;color:var(--violet);font-family:var(--serif)}
.tool-page .blog-stat .l {font-size:.78rem;color:var(--muted);margin-top:4px}
.tool-page .roi-r {display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.tool-page .roi-r:last-child {border:none}
.tool-page .roi-assumptions {background:var(--c-accent-tint);border-radius:10px;padding:16px;margin-top:14px;font-size:.84rem;color:var(--ink-soft)}
.tool-page .roi-total {background:var(--c-accent-tint)}
.tool-page .seo-action-box {background:var(--c-accent-tint);border:1.5px solid var(--c-rule-strong);border-radius:10px;padding:18px}
.tool-page .sched-alert {background:var(--c-surface)}
.tool-page .cs-block .val {font-weight:700;color:var(--ink);font-size:.98rem;margin-bottom:2px;word-break:break-word}
.tool-page .cm-pill.active {background:var(--navy);color:#fff}
.tool-page .cm-sort button.active {color:var(--accent);background:var(--c-accent-tint)}
.tool-page .cm-arrow.up.on {color:var(--accent);background:var(--c-accent-tint)}
.tool-page .cm-arrow.down.on {color:var(--c-accent);background:var(--c-accent-tint)}
.tool-page .pc-progress.on .pc-progress-fill {animation:pcfake 18s linear forwards}
.tool-page .pc-ep-summary.on {display:block}

/* --------------------------------------------------------------------------
   OVERRIDES
   Last in the file on purpose: these have to beat the ported rules above.

   The old sheet hardcodes `color:#fff` on selected states. That was safe when
   the accent was always dark, but the accent flips to light green in dark mode,
   so white text on it drops to about 1.2:1. These pin the text to the token
   that is paired with the accent instead, which is correct in both themes.
   -------------------------------------------------------------------------- */
.tool-page .btn-vi,
.tool-page .tp.active,
.tool-page .jd-chip.active,
.tool-page .cl-item.done .cl-cb { color: var(--c-on-accent); }

/* Same problem on the template preview, which sits on a coloured swatch. */
.tool-page .tmpl .prev { color: var(--c-on-accent); }

/* Surfaces the old sheet assumed were always white. */
.tool-page .wc-stat { background: var(--c-surface); }

/* The old sheet used a hardcoded white panel behind several tools. */
.tool-page .tool-wrap { color: var(--c-ink); }

/* The old sheet hardcodes white panels. Fine when the page was always light;
   in dark mode they became white boxes inheriting light text. Point them at the
   surface token so they follow the theme. The toggle knob stays literally white,
   because it sits on the accent in both themes. */
.tool-page .btn-gh,
.tool-page .fsel,
.tool-page .result-box,
.tool-page .stat2,
.tool-page .tp,
.tool-page .tmpl .pnm,
.tool-page .wc-stat,
.tool-page .jd-chip,
.tool-page .cl-category,
.tool-page .sched-alert { background: var(--c-surface); color: var(--c-ink); }

/* Selected states win again after the block above. */
.tool-page .tp.active,
.tool-page .jd-chip.active { background: var(--c-accent); color: var(--c-on-accent); }
.tool-page .cl-item.done .cl-cb { background: var(--c-good); color: var(--c-on-accent); }
.tool-page .btn-vi { background: var(--c-accent); color: var(--c-on-accent); }
.tool-page .btn-vi:hover { background: var(--c-accent-hover); }

/* Inputs and text areas follow the theme too. */
.tool-page .finput,
.tool-page .ftarea { background: var(--c-surface); color: var(--c-ink); }
.tool-page .finput::placeholder,
.tool-page .ftarea::placeholder { color: var(--c-ink-3); }

/* The ported markup reuses the class name `btn`, which is also our own button
   component. Inside a tool the old rules win on background but leave white text
   on the accent. Pin both, and cover any input the old sheet missed. */
.tool-page .btn { background: var(--c-accent); color: var(--c-on-accent); }
.tool-page .btn:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }
.tool-page .btn-gh { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-rule-strong); }
.tool-page .btn-gh:hover { border-color: var(--c-ink); color: var(--c-ink); }
.tool-page .btn-nv { background: var(--c-ink); color: var(--c-ground); }

.tool-page input,
.tool-page select,
.tool-page textarea { background: var(--c-surface); color: var(--c-ink); }
.tool-page input::placeholder,
.tool-page textarea::placeholder { color: var(--c-ink-3); }
.tool-page input[type="range"] { background: transparent; }
.tool-page input[type="checkbox"] { accent-color: var(--c-accent); }

/* --------------------------------------------------------------------------
   CONTAINER ALIGNMENT

   The ported sheet carried its own container: .tool-wrap at 1000px with a 22px
   gutter, and a .wrap override at the same 22px. Neither matches the site,
   which is --w-page wide with a --s-5 gutter. The result was three different
   left edges stacked down a single tool page: the breadcrumb and headline on
   the site container, the tool itself indented 80px inside that, and the
   "more on" buttons below it back out at full width.

   One container for the whole page instead. The tools are grids and panels,
   so they take the extra width without anything stretching badly.
   -------------------------------------------------------------------------- */
.tool-page .tool-wrap,
.tool-page .wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* Vertical rhythm off the same scale as every other section on the site,
   rather than the ported sheet's loose 54px. */
.tool-page .sp { padding-block: var(--s-8); }

/* --------------------------------------------------------------------------
   RESPONSIVE COLUMNS

   Every tool was laid out with an inline two-column grid, which no media query
   can reach, so on a phone the second column simply hung off the right edge:
   five of the eight pages scrolled sideways to about 590px inside a 390px
   window. These two classes carry the same ratios and collapse properly.

   .tool-cols is the tool's main split. The ratio rides in --cols so the shape
   of each tool is still declared where the markup is, and it collapses at the
   point the narrower column stops being usable rather than at a device width.

   .tool-fit is for rows of equal tiles. auto-fit needs no breakpoint: the row
   reflows from four across to two to one on its own.
   -------------------------------------------------------------------------- */
.tool-page .tool-cols {
  display: grid;
  grid-template-columns: var(--cols, 1fr 1fr);
  gap: var(--s-6);
  align-items: start;
}
.tool-page .tool-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4, 0.75rem);
}
@media (max-width: 900px) {
  .tool-page .tool-cols { grid-template-columns: 1fr; }
}

/* Same treatment for the three grids that live in this sheet rather than in
   the markup: poster templates, waste categories, checklist columns. */
.tool-page .tmpl-grid,
.tool-page .wc-output {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* The schedule table is genuinely wide, so it keeps its min-width and scrolls
   inside its own box. That is correct: it must not stretch the page with it. */
.tool-page .sched-tbl { max-width: 100%; }

/* The readiness checklist has always carried a colour per category in its data
   and never drawn it, so eight identical cards came out identically grey. The
   colours themselves were an undefined --c-purple and a violet left over from
   the old site; they are the seven topic accents now. Drawn as a rule above the
   category name, which is the same device .wc-stat already uses. */
.tool-page .cl-category { border-top: 3px solid var(--cat, var(--c-rule-strong)); }
.tool-page .cl-cat-hdr > span:first-child { color: var(--cat, var(--c-ink)); }

/* The sliders are the main control on four of these tools and were rendering
   in the browser's default blue, the one colour on the page that belongs to
   no one. accent-color styles the track fill and the thumb in one property. */
.tool-page input[type="range"] { accent-color: var(--c-accent); }