/* ── TOOLS ───────────────────────────────────────────────────────────────
   A sub-app: a rail that stays put and a pane that swaps. Built to
   branddesign.md — ink primary buttons (§3), one muted icon set, mono for
   counts and small labels, 500 for labels and 600 for titles, hairline --b1
   borders on neutral cards. */

#view-tools { overflow: hidden; }

.tl-app {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

/* ── Rail ── */
.tl-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--b1);
  background: var(--bg);
}
.tl-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4) var(--s-3);
}
.tl-rail-home {
  border: 0; background: none; padding: 0;
  font: var(--fw-semi) var(--fs-18)/1 var(--ff-sans);
  color: var(--tx);
  letter-spacing: -0.02em;
  cursor: pointer;
}
.tl-rail-home:hover { opacity: 0.75; }
.tl-rail-n {
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-mono);
  color: var(--t2);
  border: 1px solid var(--b1);
  border-radius: var(--r-pill);
  padding: 4px 8px;
}

.tl-search {
  position: relative;
  display: flex; align-items: center;
  margin: 0 var(--s-4) var(--s-3);
}
.tl-search svg { position: absolute; left: 11px; color: var(--t3); pointer-events: none; }
.tl-search input {
  width: 100%;
  padding: 9px 12px 9px 32px;
  border: 1px solid var(--b1);
  border-radius: var(--r-3);
  background: var(--bg2);
  color: var(--tx);
  font: var(--fw-regular) var(--fs-13)/1 var(--ff-sans);
}
.tl-search input::placeholder { color: var(--t3); }
.tl-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}

.tl-rail-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--s-3) var(--s-6);
  scrollbar-width: thin;
}
.tl-rail-cat {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-2) var(--s-2);
}
.tl-rail-cat-n {
  font: var(--fw-semi) var(--fs-11)/1 var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t2);
}
.tl-rail-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-2);
  background: none;
  color: var(--t2);
  font: var(--fw-medium) var(--fs-13)/1.3 var(--ff-sans);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tl-rail-item:hover { background: var(--bg3); color: var(--tx); }
.tl-rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tl-rail-item.on { background: var(--bg3); color: var(--tx); }
.tl-rail-dot {
  width: 5px; height: 5px;
  border-radius: 1px;
  background: var(--b3, var(--t3));
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease);
}
.tl-rail-item.on .tl-rail-dot { background: var(--accent); }
.tl-rail-none {
  padding: var(--s-5) var(--s-2);
  font: var(--fw-regular) var(--fs-13)/1.5 var(--ff-sans);
  color: var(--t2);
}

/* ── Pane ── */
.tl-pane { min-height: 0; overflow-y: auto; }
.tl-page {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-6) var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.tl-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4);
}
.tl-head-meta { display: flex; flex-direction: column; gap: var(--s-2); }
.tl-eyebrow {
  font: var(--fw-semi) var(--fs-11)/1 var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t2);
}
.tl-title {
  font: var(--fw-bold) var(--fs-32, 32px)/1.15 var(--ff-sans);
  color: var(--tx);
  letter-spacing: -0.03em;
  margin: 0;
}
.tl-sub {
  font: var(--fw-regular) var(--fs-15)/1.55 var(--ff-sans);
  color: var(--t2);
  margin: 0; max-width: 60ch;
}

.tl-tier {
  font: var(--fw-semi) var(--fs-10)/1 var(--ff-mono);
  letter-spacing: 0.1em;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--b1);
  background: var(--bg3);
  color: var(--t2);
  flex-shrink: 0;
}
/* The one place accent earns its keep here: what costs money. */
.tl-tier.pro { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }

/* ── Console: the field, its options and the run button as one object ── */
.tl-console {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--b1);
  border-radius: var(--r-5);
  background: var(--bg2);
}
.tl-form { display: flex; flex-direction: column; gap: var(--s-3); }
.tl-label { font: var(--fw-medium) var(--fs-13)/1 var(--ff-sans); color: var(--t2); }
.tl-field {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--b2);
  border-radius: var(--r-3);
  background: var(--bg);
  color: var(--tx);
  font: var(--fw-regular) var(--fs-15)/1.5 var(--ff-sans);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.tl-field::placeholder { color: var(--t3); }
/* §8 focus spec: accent border plus a 3px accent-line halo. */
.tl-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}
.tl-area { resize: vertical; min-height: 96px; }

.tl-opts { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); }
.tl-opt { display: flex; flex-direction: column; gap: 7px; }
.tl-opt-l {
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t2);
}
.tl-seg {
  display: flex; gap: 3px;
  padding: 3px;
  background: var(--bg3);
  border: 1px solid var(--b1);
  border-radius: var(--r-3);
}
.tl-seg-b {
  border: 0; background: none;
  padding: 6px 11px;
  border-radius: var(--r-2);
  color: var(--t2);
  font: var(--fw-medium) var(--fs-12)/1 var(--ff-sans);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tl-seg-b:hover { color: var(--tx); }
.tl-seg-b.on { background: var(--bg2); color: var(--tx); box-shadow: 0 1px 3px rgba(0,0,0,0.13); }
.tl-seg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.tl-actions-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
/* §3: the primary action is ink, not accent. */
.tl-run {
  padding: 12px 22px;
  border: 1px solid var(--fill, var(--tx));
  border-radius: var(--r-3);
  background: var(--fill, var(--tx));
  color: var(--fill-ink, var(--bg2));
  font: var(--fw-semi) var(--fs-14)/1 var(--ff-sans);
  cursor: pointer;
  transition: opacity var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.tl-run:hover:not(:disabled) { opacity: 0.88; }
.tl-run:active:not(:disabled) { transform: scale(0.98); }
.tl-run:disabled { opacity: 0.5; cursor: default; }
.tl-run:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-hint { font: var(--fw-regular) var(--fs-11)/1 var(--ff-mono); color: var(--t3); }

/* ── History ── */
.tl-hist {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--b1);
}
.tl-hist-l {
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--t2);
}
.tl-hist-i {
  padding: 6px 10px;
  border: 1px solid var(--b1);
  border-radius: var(--r-pill);
  background: none;
  color: var(--t2);
  font: var(--fw-regular) var(--fs-12)/1 var(--ff-sans);
  cursor: pointer;
  max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tl-hist-i:hover { color: var(--tx); border-color: var(--b2); }
.tl-hist-x {
  margin-left: auto;
  border: 0; background: none;
  color: var(--t3);
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.07em;
  cursor: pointer;
}
.tl-hist-x:hover { color: var(--tx); }

/* ── Preview ── */
.tl-preview {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--b1);
  border-radius: var(--r-4);
  background: var(--bg2);
  margin-bottom: var(--s-4);
}
.tl-preview-img {
  width: 128px; height: 72px;
  object-fit: cover;
  border-radius: var(--r-2);
  background: var(--bg3);
  flex-shrink: 0;
}
.tl-preview-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tl-preview-b b {
  font: var(--fw-semi) var(--fs-14)/1.35 var(--ff-sans);
  color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-preview-c { font: var(--fw-medium) var(--fs-12)/1 var(--ff-sans); color: var(--t2); }
.tl-preview-s { font: var(--fw-regular) var(--fs-11)/1.4 var(--ff-mono); color: var(--t2); }
.tl-preview-go {
  flex-shrink: 0;
  color: var(--t2);
  font: var(--fw-medium) var(--fs-12)/1 var(--ff-sans);
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid var(--b1);
  border-radius: var(--r-2);
}
.tl-preview-go:hover { color: var(--tx); border-color: var(--b2); }

/* ── Running / errors ── */
.tl-working {
  display: flex; align-items: center; gap: 10px;
  font: var(--fw-medium) var(--fs-13)/1 var(--ff-sans);
  color: var(--t2);
  padding: var(--s-5) 0;
}
.tl-spin {
  width: 14px; height: 14px;
  border: 2px solid var(--b2);
  border-top-color: var(--tx);
  border-radius: 50%;
  animation: tlSpin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes tlSpin { to { transform: rotate(360deg); } }

.tl-err {
  padding: var(--s-4);
  border: 1px solid var(--danger);
  border-radius: var(--r-3);
  background: var(--danger-bg);
  color: var(--danger);
  font: var(--fw-medium) var(--fs-13)/1.5 var(--ff-sans);
}
.tl-empty {
  padding: var(--s-5);
  border: 1px dashed var(--b2);
  border-radius: var(--r-3);
  color: var(--t2);
  font: var(--fw-regular) var(--fs-13)/1.6 var(--ff-sans);
}
.tl-note {
  font: var(--fw-regular) var(--fs-12)/1.6 var(--ff-sans);
  color: var(--t2);
  max-width: 68ch;
}

/* ── Results ── */
.tl-res { display: flex; flex-direction: column; gap: var(--s-3); }
.tl-res-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--b1);
}
.tl-count { font: var(--fw-regular) var(--fs-12)/1 var(--ff-mono); color: var(--t2); }
.tl-count.over { color: var(--accent); }

.tl-text {
  margin: 0;
  padding: var(--s-5);
  border: 1px solid var(--b1);
  border-radius: var(--r-4);
  background: var(--bg2);
  color: var(--tx);
  font: var(--fw-regular) var(--fs-14)/1.75 var(--ff-sans);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 620px;
  overflow-y: auto;
}

.tl-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.tl-lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s-3);
  padding: 12px 14px;
  border: 1px solid var(--b1);
  border-radius: var(--r-3);
  background: var(--bg2);
}
.tl-line-t { font: var(--fw-regular) var(--fs-14)/1.4 var(--ff-sans); color: var(--tx); min-width: 0; }
.tl-line-n {
  font: var(--fw-regular) var(--fs-11)/1 var(--ff-mono);
  color: var(--t2);
  min-width: 24px; text-align: right;
}
.tl-line-n.over { color: var(--accent); }
.tl-line-a { display: flex; gap: 4px; opacity: 0; transition: opacity var(--t-base) var(--ease); }
.tl-lines li:hover .tl-line-a,
.tl-lines li:focus-within .tl-line-a { opacity: 1; }
.tl-mini {
  border: 1px solid var(--b1);
  background: none;
  color: var(--t2);
  border-radius: var(--r-2);
  padding: 5px 9px;
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-sans);
  cursor: pointer;
}
.tl-mini:hover { color: var(--tx); border-color: var(--b2); }

.tl-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tl-tag {
  padding: 7px 12px;
  border: 1px solid var(--b1);
  border-radius: var(--r-pill);
  background: var(--bg3);
  color: var(--t2);
  font: var(--fw-regular) var(--fs-13)/1 var(--ff-sans);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tl-tag:hover { color: var(--tx); border-color: var(--b2); }

/* ── Assets ── */
.tl-assets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s-3);
}
.tl-asset {
  display: flex; flex-direction: column;
  border: 1px solid var(--b1);
  border-radius: var(--r-4);
  background: var(--bg2);
  overflow: hidden;
}
/* A size above what the original was uploaded at 404s; the img onerror marks
   the card rather than leaving a broken frame. */
.tl-asset.is-gone { opacity: 0.4; }
.tl-asset.is-gone .tl-asset-dl { pointer-events: none; color: var(--t3); }
.tl-asset-img {
  aspect-ratio: 16 / 9;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tl-asset-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-asset-m {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  padding: 11px 13px 0;
}
.tl-asset-m b { font: var(--fw-medium) var(--fs-13)/1 var(--ff-sans); color: var(--tx); }
.tl-asset-m span { font: var(--fw-regular) var(--fs-11)/1 var(--ff-mono); color: var(--t2); }
.tl-asset-dl {
  margin: 10px 13px 13px;
  padding: 9px 0;
  text-align: center;
  border: 1px solid var(--b2);
  border-radius: var(--r-2);
  color: var(--tx);
  font: var(--fw-medium) var(--fs-12)/1 var(--ff-sans);
  text-decoration: none;
  transition: background var(--t-base) var(--ease);
}
.tl-asset-dl:hover { background: var(--bg3); }

/* ── Verdict + suggestions ── */
.tl-verdict {
  display: flex; flex-direction: column; gap: 7px;
  padding: var(--s-6);
  border: 1px solid var(--b1);
  border-radius: var(--r-4);
  background: var(--bg2);
}
.tl-verdict b { font: var(--fw-semi) var(--fs-20)/1.25 var(--ff-sans); color: var(--tx); letter-spacing: -0.02em; }
.tl-verdict span { font: var(--fw-regular) var(--fs-13)/1.6 var(--ff-sans); color: var(--t2); }
.tl-verdict a { color: var(--accent); font: var(--fw-medium) var(--fs-13)/1 var(--ff-sans); text-decoration: none; }
.tl-verdict a:hover { text-decoration: underline; }
.tl-verdict.yes { border-color: rgba(34,197,94,0.35); background: var(--success-bg); }
.tl-verdict.yes b { color: var(--success); }

.tl-sugg { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tl-sugg-l {
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--t2);
}
.tl-sugg-b {
  padding: 7px 12px;
  border: 1px solid var(--b1);
  border-radius: var(--r-pill);
  background: none;
  color: var(--t2);
  font: var(--fw-regular) var(--fs-13)/1 var(--ff-sans);
  cursor: pointer;
}
.tl-sugg-b:hover { color: var(--tx); border-color: var(--b2); }

/* ── Actions ── */
.tl-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-act {
  padding: 8px 13px;
  border: 1px solid var(--b2);
  border-radius: var(--r-2);
  background: none;
  color: var(--tx);
  font: var(--fw-medium) var(--fs-12)/1 var(--ff-sans);
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.tl-act:hover { background: var(--bg3); }
.tl-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Related ── */
.tl-related {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--b1);
}
.tl-related-t {
  font: var(--fw-semi) var(--fs-11)/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--t2);
  margin: 0;
}
.tl-related-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-2); }
.tl-related-c {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--b1);
  border-radius: var(--r-3);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.tl-related-c:hover { border-color: var(--b2); background: var(--bg3); }
.tl-related-c b { font: var(--fw-medium) var(--fs-13)/1.3 var(--ff-sans); color: var(--tx); }
.tl-related-c span {
  font: var(--fw-regular) var(--fs-12)/1.35 var(--ff-sans);
  color: var(--t2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── TOOLS HOME ──────────────────────────────────────────────────────────
   The first version was correct and flat: white cards on a white page with
   hairline borders, three identical grids, nothing to look at.

   Two things carry it now, and both already exist in the app rather than
   being a third visual language invented for this page. The hero is a dark
   block on the same gradient as the dashboard banner (.cc-banner), which is
   dark in both themes and states its text in literal light values. Over it
   sits the halftone from the dashboard charts — the same ordered checker,
   here as CSS, dissolving toward the middle.

   Everything below the hero stays light and quiet. One loud thing, then
   calm, is the whole composition. */
.tl-home {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-6) var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-9);
}

/* ── Hero ── */
.tl-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
  padding: var(--s-10) var(--s-6);
  border-radius: 20px;
  border: 1px solid var(--b1);
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(255,53,3,0.18) 0%, transparent 58%),
    linear-gradient(100deg, #131110 0%, #0c0a0a 48%, #050505 100%);
}
/* The halftone, bold at the top corners and gone by the middle. Same 2px
   checker the dashboard cards use, masked so it dissolves rather than tiling
   flatly across the block. */
.tl-hero::before,
.tl-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.tl-hero::before {
  background-image: repeating-conic-gradient(rgba(255,53,3,0.55) 0% 25%, transparent 0% 50%);
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(90% 90% at 0% 0%, #000 0%, rgba(0,0,0,0.4) 12%, transparent 34%);
          mask-image: radial-gradient(90% 90% at 0% 0%, #000 0%, rgba(0,0,0,0.4) 12%, transparent 34%);
}
.tl-hero::after {
  background-image: repeating-conic-gradient(rgba(255,255,255,0.30) 0% 25%, transparent 0% 50%);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(85% 85% at 100% 100%, #000 0%, transparent 46%);
          mask-image: radial-gradient(85% 85% at 100% 100%, #000 0%, transparent 46%);
}

.tl-hero-eyebrow {
  font: var(--fw-semi) var(--fs-11)/1 var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.45);
}
.tl-hero-t {
  margin: 0;
  font: var(--fw-regular) clamp(42px, 6.4vw, 76px)/1.0 var(--ff-display);
  color: #fff;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* The single accent on the page, on one line of the headline. */
.tl-hero-t em { font-style: italic; color: var(--accent); }
.tl-hero-s {
  margin: 0;
  max-width: 52ch;
  font: var(--fw-regular) var(--fs-16)/1.6 var(--ff-sans);
  color: rgba(255,255,255,0.55);
}

.tl-hero-form {
  display: flex;
  gap: var(--s-2);
  width: 100%;
  max-width: 640px;
  margin-top: var(--s-4);
}
.tl-hero-field {
  flex: 1;
  min-width: 0;
  padding: 17px 20px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-5);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font: var(--fw-regular) var(--fs-15)/1 var(--ff-sans);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.tl-hero-field::placeholder { color: rgba(255,255,255,0.4); }
.tl-hero-field:focus {
  outline: none;
  background: rgba(255,255,255,0.10);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,53,3,0.28);
}
/* On a dark ground the ink button inverts: white is the high-contrast one. */
.tl-hero-go {
  flex-shrink: 0;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-5);
  background: #fff;
  color: #0c0a0a;
  font: var(--fw-bold) var(--fs-14)/1 var(--ff-sans);
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 6px 22px -8px rgba(0,0,0,0.65);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.tl-hero-go:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.8); }
.tl-hero-go:active { transform: translateY(0); }
.tl-hero-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.tl-hero-match { width: 100%; max-width: 780px; }
.tl-hero-matchhead {
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--s-3);
}
.tl-hero-matchrow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: var(--s-2);
  text-align: left;
}
.tl-hero-pick {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-3);
  background: rgba(255,255,255,0.045);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.tl-hero-pick:hover {
  border-color: rgba(255,53,3,0.55);
  background: rgba(255,255,255,0.09);
  transform: translateY(-1px);
}
.tl-hero-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-hero-pick b { font: var(--fw-semi) var(--fs-13)/1.3 var(--ff-sans); color: #fff; }
.tl-hero-pick span {
  font: var(--fw-regular) var(--fs-12)/1.35 var(--ff-sans);
  color: rgba(255,255,255,0.45);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-hero-none {
  padding: var(--s-4);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: var(--r-3);
  font: var(--fw-regular) var(--fs-13)/1.6 var(--ff-sans);
  color: rgba(255,255,255,0.55);
}

.tl-hero-stats {
  display: flex; gap: var(--s-6); flex-wrap: wrap; justify-content: center;
  margin-top: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.09);
  width: 100%; max-width: 640px;
}
.tl-hero-stats span {
  font: var(--fw-regular) var(--fs-11)/1 var(--ff-mono);
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.tl-hero-stats b { color: #fff; font-weight: var(--fw-semi); }

/* ── Shared section heading ── */
.tl-h2 {
  margin: 0 0 var(--s-4);
  font: var(--fw-semi) var(--fs-20)/1.2 var(--ff-sans);
  color: var(--tx);
  letter-spacing: -0.02em;
}

/* ── Featured ── */
.tl-feat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-3);
}
.tl-feat-c {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-5);
  border: 1px solid var(--b1);
  border-radius: var(--r-5);
  background: var(--bg2);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
/* An accent rule that draws itself along the top edge on hover — the only
   moving part on an otherwise still page. */
.tl-feat-c::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.tl-feat-c:hover { border-color: var(--b2); transform: translateY(-3px); box-shadow: var(--shadow-md, 0 12px 28px -14px rgba(0,0,0,0.3)); }
.tl-feat-c:hover::before { transform: scaleX(1); }
.tl-feat-c:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-feat-n {
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-mono);
  color: var(--t3);
  letter-spacing: 0.12em;
}
.tl-feat-c b { font: var(--fw-semi) var(--fs-16)/1.3 var(--ff-sans); color: var(--tx); letter-spacing: -0.01em; }
.tl-feat-b { font: var(--fw-regular) var(--fs-13)/1.45 var(--ff-sans); color: var(--t2); }
.tl-feat-go {
  margin-top: auto;
  padding-top: var(--s-3);
  font: var(--fw-medium) var(--fs-12)/1 var(--ff-sans);
  color: var(--t2);
  transition: color var(--t-base) var(--ease);
}
.tl-feat-c:hover .tl-feat-go { color: var(--accent); }

/* ── How it works ── */
.tl-how-row {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5);
  counter-reset: how;
}
.tl-how-row li {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: var(--s-4);
  border-top: 2px solid var(--b2);
  counter-increment: how;
}
.tl-how-row li::before {
  content: counter(how, decimal-leading-zero);
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-mono);
  color: var(--t3);
  letter-spacing: 0.12em;
}
.tl-how-row b { font: var(--fw-semi) var(--fs-16)/1.3 var(--ff-sans); color: var(--tx); }
.tl-how-row span { font: var(--fw-regular) var(--fs-13)/1.6 var(--ff-sans); color: var(--t2); }

@media (max-width: 720px) {
  .tl-home { padding: var(--s-4) var(--s-4) var(--s-8); gap: var(--s-7); }
  .tl-hero { padding: var(--s-7) var(--s-4); border-radius: 16px; }
  .tl-hero-form { flex-direction: column; }
  .tl-hero-go { padding: 15px 28px; }
  .tl-hero-stats { gap: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .tl-feat-c:hover { transform: none; }
  .tl-feat-c::before { transition: none; }
  .tl-hero-pick:hover { transform: none; }
  .tl-hero-go:hover { transform: none; }
}

/* ── Overview grid ── */
.tl-sec { display: flex; flex-direction: column; gap: var(--s-4); }
.tl-sec-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--b1);
}
.tl-sec-meta { display: flex; flex-direction: column; gap: 4px; }
.tl-sec-t {
  font: var(--fw-semi) var(--fs-20)/1.2 var(--ff-sans);
  color: var(--tx); letter-spacing: -0.02em; margin: 0;
}
.tl-sec-s { font: var(--fw-regular) var(--fs-13)/1 var(--ff-sans); color: var(--t2); margin: 0; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.tl-card {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--b1);
  border-radius: var(--r-4);
  background: var(--bg2);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.tl-card:hover { border-color: var(--b2); background: var(--bg3); transform: translateY(-1px); }
.tl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The catalogue number. Mono, quiet, and the thing that makes three
   identical grids read as one numbered set. */
.tl-card-n {
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-mono);
  color: var(--t3);
  letter-spacing: 0.08em;
  transition: color var(--t-base) var(--ease);
}
.tl-card:hover .tl-card-n { color: var(--accent); }
.tl-card-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl-card-t {
  font: var(--fw-medium) var(--fs-15)/1.3 var(--ff-sans); color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-card-s {
  font: var(--fw-regular) var(--fs-12)/1.35 var(--ff-sans); color: var(--t2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-card-go { color: var(--t3); font-size: var(--fs-15); transition: color var(--t-base) var(--ease); }
.tl-card:hover .tl-card-go { color: var(--tx); }

@media (max-width: 900px) {
  /* The rail becomes a strip across the top rather than eating a phone's
     width; the list scrolls sideways. */
  .tl-app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .tl-rail { border-right: 0; border-bottom: 1px solid var(--b1); max-height: 190px; }
  .tl-page { padding: var(--s-6) var(--s-4) var(--s-8); }
  .tl-title { font-size: 26px; }
  .tl-grid { grid-template-columns: 1fr; }
  .tl-preview-img { width: 96px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-spin { animation: none; }
  .tl-card:hover { transform: none; }
}

/* ── THUMBNAIL PREVIEW ───────────────────────────────────────────────────
   The point of this tool is that the small sizes tell the truth, so the
   placements render at YouTube's real thumbnail widths (--tpw) and the title
   is clamped to two lines by width, the way YouTube clamps it — not by a
   character count, which would be a different and wrong answer.

   The Slate touch is the halftone on the empty state and a hairline accent
   on the widest placement. Everything else stays out of the way: the point
   is to look at the artwork, not at our chrome. */
.tl-page.tl-wide { max-width: 1000px; }

.tp { display: flex; flex-direction: column; gap: var(--s-6); }

.tp-console {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--b1);
  border-radius: var(--r-5);
  background: var(--bg2);
}
.tp-row { display: flex; flex-direction: column; gap: var(--s-2); }
.tp-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.tp-two > div { display: flex; flex-direction: column; gap: var(--s-2); }
.tp-inline { display: flex; gap: var(--s-2); }
.tp-inline .tl-field { flex: 1; min-width: 0; }

.tp-or {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--t3);
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.tp-or::before, .tp-or::after { content: ''; flex: 1; height: 1px; background: var(--b1); }

.tp-drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: var(--s-6);
  border: 1px dashed var(--b2);
  border-radius: var(--r-4);
  text-align: center;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.tp-drop.is-over { border-color: var(--accent); background: var(--accent-bg); }
.tp-drop input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
}
.tp-drop-t { font: var(--fw-medium) var(--fs-14)/1 var(--ff-sans); color: var(--tx); }
.tp-drop-s { font: var(--fw-regular) var(--fs-12)/1 var(--ff-sans); color: var(--t2); }

.tp-opts { display: flex; flex-wrap: wrap; gap: var(--s-5); }

/* ── Empty state ── */

/* A 16:9 block wearing the app's halftone — the shape of the thing that is
   missing, in Slate's own texture. */
.tp-art {
  width: 200px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-3);
  margin-bottom: var(--s-3);
  background-color: var(--bg3);
  background-image:
    repeating-conic-gradient(var(--accent-line) 0% 25%, transparent 0% 50%),
    repeating-conic-gradient(var(--b2) 0% 25%, transparent 0% 50%);
  background-size: 8px 8px, 14px 14px;
  -webkit-mask-image:
    radial-gradient(90% 90% at 0% 0%, #000 0%, transparent 44%),
    radial-gradient(90% 90% at 100% 100%, #000 0%, transparent 44%);
          mask-image:
    radial-gradient(90% 90% at 0% 0%, #000 0%, transparent 44%),
    radial-gradient(90% 90% at 100% 100%, #000 0%, transparent 44%);
  border: 1px solid var(--b1);
}



/* ── Checks ── */
.tp-checks { display: flex; flex-direction: column; gap: 1px; }
.tp-check {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: baseline;
  padding: 11px 14px;
  border: 1px solid var(--b1);
  border-radius: var(--r-3);
  background: var(--bg2);
}
.tp-check b { font: var(--fw-semi) var(--fs-13)/1.35 var(--ff-sans); color: var(--tx); }
.tp-check span { font: var(--fw-regular) var(--fs-13)/1.5 var(--ff-sans); color: var(--t2); }
.tp-check.is-bad  { border-color: var(--accent-line); background: var(--accent-bg); }
.tp-check.is-bad b { color: var(--accent); }
.tp-check.is-warn b { color: var(--warning); }
.tp-check.is-ok b { color: var(--success); }

/* ── Placements ── */
.tp-spots {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  align-items: flex-start;
  padding: var(--s-6);
  border: 1px solid var(--b1);
  border-radius: var(--r-5);
  background: #ffffff;
  /* YouTube's own greys, not Slate's — the preview has to look like YouTube
     or it is not a preview. */
  --tp-tx: #0f0f0f;
  --tp-t2: #606060;
  --tp-bg: #ffffff;
}
.tp-spots.is-dark {
  background: #0f0f0f;
  border-color: #272727;
  --tp-tx: #f1f1f1;
  --tp-t2: #aaaaaa;
  --tp-bg: #0f0f0f;
}

.tp-spot { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); width: var(--tpw); }
.tp-spot-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--b1);
}
.tp-spots.is-dark .tp-spot-h { border-bottom-color: #272727; }
.tp-spot-h b {
  font: var(--fw-semi) var(--fs-11)/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tp-t2);
}
.tp-spot-h span { font: var(--fw-regular) var(--fs-11)/1 var(--ff-mono); color: var(--tp-t2); }
/* The widest placement is the one people design for, so it gets the hairline. */
.tp-search .tp-spot-h { border-bottom-color: var(--accent); }

.tp-card { display: flex; flex-direction: column; gap: 9px; }
.tp-art {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #181818;
}
.tp-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The chip and the bar sit ON the artwork. Showing them is the only way to
   notice that the corner you put text in is covered. */
.tp-dur {
  position: absolute;
  right: 4px; bottom: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font: 500 12px/1.4 var(--ff-sans);
  font-variant-numeric: tabular-nums;
}
.tp-prog {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,0.3);
}
.tp-prog i { display: block; height: 100%; width: 38%; background: #f00; }

.tp-meta { display: flex; flex-direction: column; gap: 2px; }
/* Two lines, clamped by width — the same mechanism YouTube uses, which is why
   the cut you see here is the cut you get. */
.tp-title {
  font: 500 14px/1.45 var(--ff-sans);
  color: var(--tp-tx);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.tp-chan, .tp-stats { font: 400 12px/1.4 var(--ff-sans); color: var(--tp-t2); }

/* Per-placement type sizes, as YouTube sets them. */
.tp-side .tp-title { font-size: 13px; line-height: 1.4; }
.tp-side .tp-chan, .tp-side .tp-stats { font-size: 11px; }
.tp-grid .tp-title { font-size: 13px; }
.tp-mobile .tp-art { border-radius: 0; }
.tp-mobile .tp-title { font-size: 15px; }

.tp-spot-n {
  margin: 0;
  font: var(--fw-regular) var(--fs-11)/1.5 var(--ff-sans);
  color: var(--tp-t2);
}

@media (max-width: 720px) {
  .tp-two { grid-template-columns: 1fr; }
  .tp-inline { flex-direction: column; }
  .tp-spots { padding: var(--s-4); gap: var(--s-5); }
  .tp-check { grid-template-columns: 1fr; gap: 3px; }
}