/* The title matcher page.
   Bonfire's ground, faces and marks, with the same token names and the same
   measured contrast ratios as outliers.css — scoped to .tt so the two pages
   cannot fight over the cascade. */

.tt {
  --tt-ground:        #0A0A0D;   /* the system's near-black                  */
  --tt-ink:           #EDEDF0;   /* 17.6:1                                   */
  --tt-muted:         #8A8A96;   /*  6.0:1                                   */
  --tt-mark:          #ECECE7;   /* bone: buttons, the thing filled in       */
  --tt-on-mark:       #0A0A0D;
  --tt-rule:          #23232B;
  --tt-surface:       #131319;
  --tt-surface-2:     #1C1C24;
  --tt-field:         #131319;
  --tt-line:          #3A3A46;

  --tt-negative:      #D6453F;
  --tt-negative-wash: #1A0E0E;
  --tt-positive:      #7FC8A9;
  --tt-positive-wash: #0E1714;
  --tt-ember:         #FFC46A;   /* provisional in design-system.md          */
  --tt-swipe:         rgb(255 196 106 / 0.24);

  --tt-argument: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tt-emphasis: "Fraunces", Georgia, "Times New Roman", serif;
  --tt-data:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* One scale, on a 16px base. Before this there were 22 distinct sizes on the
     page and no relationship between them.
       micro  12px  uppercase labels and tickers, nothing anyone has to read
       small  14px  metadata: multiples, niches, fine print, chips
       body   16px  anything that is a sentence
       lead   18px  the input, and the line that introduces a group
     Nothing goes below micro, and nothing that is a sentence goes below body. */
  --fs-micro: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body:  1rem;
  --fs-lead:  1.125rem;

  --tt-pad: clamp(1.15rem, 5vw, 4rem);
  --tt-ease: cubic-bezier(0.22, 1, 0.36, 1);

  background: var(--tt-ground);
  color: var(--tt-ink);
  font-family: var(--tt-argument);
  line-height: 1.55;
}
/* The light variant, taken from outliers-palettes.md: the poles swap and the
   status colours darken, because #7FC8A9 on a light ground is 1.86:1. */
.tt--light {
  --tt-ground:        #FAF9F7;
  --tt-ink:           #16161A;   /* 18.8:1                                   */
  --tt-muted:         #585A63;   /*  6.5:1 — #8A8A96 is 3.2:1 here and fails */
  --tt-mark:          #16161A;
  --tt-on-mark:       #FAF9F7;
  --tt-rule:          #E2E0DB;
  --tt-surface:       #F2F0EC;
  --tt-surface-2:     #EAE7E1;
  --tt-field:         #FFFFFF;
  --tt-line:          #C3BDB2;
  --tt-negative:      #B03A28;   /*  5.7:1                                   */
  --tt-negative-wash: #FBF2F0;
  --tt-positive:      #2F6B4F;   /*  6.0:1                                   */
  --tt-positive-wash: #EFF4F0;
  --tt-ember:         #8A5D0C;   /*  4.9:1 — the ember is invisible here     */
  --tt-swipe:         rgb(255 196 106 / 0.85);
}
.tt *, .tt *::before, .tt *::after { box-sizing: border-box; }
.tt [hidden] { display: none !important; }
.tt h1, .tt h2, .tt h3, .tt h4 {
  font-family: var(--tt-argument);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
.tt mark {
  color: inherit;
  background: linear-gradient(var(--tt-swipe), var(--tt-swipe)) no-repeat;
  background-size: 100% 84%;
  background-position: 0 12%;
  padding-inline: 0.24em;
  margin-inline: -0.24em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.tt-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.tt-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--tt-muted);
}
.tt :where(button, input, textarea, a):focus-visible {
  outline: 2px solid var(--tt-mark);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .tt *, .tt *::before, .tt *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* Direct children only. The argument below the tool is the outliers page's
   markup and manages its own gutters through --pad; adding this one on top of
   that double-indents every row. */
.tt > section { padding-inline: var(--tt-pad); }
/* A highlighted line is being pointed at, so it takes the ink colour rather than
   the muted grey the rest of the statements sit in. */
.tt .lp-statement mark { color: var(--lp-ink); }

/* outliers.css rules every section off from the one above it. This page does
   not want dividers, so they come off here — titles.css loads second. */
.tt .lp section,
.tt.lp section { border-top: 0; }
/* ── the member strip ─────────────────────────────────────────────────── */

.tt-memberbar { background: var(--tt-surface); }
.tt-memberbar-in {
  max-width: 72rem; margin: 0 auto; padding: 0.85rem var(--tt-pad);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.5rem;
}
.tt-quota {
  font-family: var(--tt-data); font-size: var(--fs-small);
  font-variant-numeric: tabular-nums; color: var(--tt-muted);
}
.tt-quota b { color: var(--tt-ink); font-weight: 500; }
.tt-quota.is-out b { color: var(--tt-negative); }
.tt-upsell { margin-left: auto; font-size: var(--fs-small); color: var(--tt-muted); }
.tt-upsell a { color: var(--tt-ink); text-underline-offset: 3px; }
.tt-meter { display: inline-flex; gap: 3px; vertical-align: -1px; margin-right: 0.55rem; }
.tt-meter i { display: block; width: 6px; height: 13px; border-radius: 1px; background: var(--tt-line); }
.tt-meter i.on { background: var(--tt-positive); }
.tt-meter.is-out i { background: var(--tt-negative-wash); box-shadow: inset 0 0 0 1px var(--tt-negative); }
/* ── hero ─────────────────────────────────────────────────────────────── */

.tt-hero {
  padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: 0.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.15rem; text-align: center;
}
.tt-hero h1 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.1rem); max-width: 54rem; }
/* One quiet line of numbers, the way it read before: the count and its label
   side by side, small, in the data face. */
.tt-credentials {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem;
  font-family: var(--tt-data); font-size: clamp(var(--fs-small), 0.82rem + 0.25vw, var(--fs-body));
  color: var(--tt-muted); font-variant-numeric: tabular-nums;
}
.tt-cred { white-space: nowrap; }
.tt-cred b { color: var(--tt-ink); font-weight: 500; margin-right: 0.35em; }
/* The median multiple is the one number on this row that is an argument rather
   than a size, so it gets the positive mark. */
.tt-cred b.tt-hl {
  color: var(--tt-positive);
  background: color-mix(in srgb, var(--tt-positive) 16%, transparent);
  border-radius: 3px; padding: 0.05em 0.3em; margin-right: 0.4em;
}
/* ── the console ──────────────────────────────────────────────────────── */

.tt-tool { padding-top: clamp(1.75rem, 4vw, 2.5rem); padding-bottom: 1rem; }
.tt-console {
  max-width: 52rem; margin: 0 auto;
  border: 1px solid var(--tt-line); border-radius: 6px; background: var(--tt-surface);
}
.tt-console-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.tt-field {
  width: 100%; min-height: 5.25rem; resize: vertical;
  padding: 0.9rem 1rem; background: var(--tt-field); color: var(--tt-ink);
  border: 1px solid var(--tt-line); border-radius: 5px;
  font: inherit; font-size: var(--fs-lead); line-height: 1.5;
}
.tt-field::placeholder { color: var(--tt-muted); }
.tt-field:focus-visible { border-color: var(--tt-mark); }
.tt-field:disabled { opacity: 0.45; }
.tt-run-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.tt-btn {
  height: 3rem; padding: 0 1.6rem; border: 0; border-radius: 5px;
  background: var(--tt-mark); color: var(--tt-on-mark);
  font: inherit; font-weight: 700; cursor: pointer;
  transition: opacity 0.14s var(--tt-ease);
}
.tt-btn:hover:not(:disabled) { opacity: 0.86; }
.tt-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tt-note { font-size: var(--fs-small); color: var(--tt-muted); }
.tt-note.is-error { color: var(--tt-negative); }
/* The label gets its own line: inline, it left the first chip stranded beside it
   and the rest wrapping under, which reads as a mistake rather than a row. */
.tt-examples { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tt-examples > .tt-label { flex-basis: 100%; margin-bottom: -0.15rem; }
.tt-chip {
  padding: 0.4rem 0.7rem; background: transparent; border: 1px dashed var(--tt-line);
  border-radius: 5px; color: var(--tt-muted); font: inherit; font-size: var(--fs-small);
  cursor: pointer; text-align: left; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tt-chip:hover { color: var(--tt-ink); border-color: var(--tt-mark); border-style: solid; }
/* ── the wait ─────────────────────────────────────────────────────────── */

.tt-waiting {
  padding-top: 0.85rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.tt-waiting-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--tt-data); font-size: var(--fs-small);
}
.tt-waiting-stage { color: var(--tt-ink); }
.tt-waiting-clock { color: var(--tt-muted); font-variant-numeric: tabular-nums; }
.tt-waiting-fine { margin: 0; font-size: var(--fs-small); color: var(--tt-muted); }
/* Real templates from the library, scrolling past. Not decoration: they are
   what the model is reading, and the page says only that. */
.tt-ticker {
  height: 5.4rem; overflow: hidden; position: relative;
  border-radius: 4px; background: var(--tt-surface-2);
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.tt-ticker-in { animation: tt-roll 9s linear infinite; }
.tt-ticker-line {
  display: flex; gap: 0.7rem; padding: 0.2rem 0.75rem;
  font-family: var(--tt-data); font-size: var(--fs-micro); color: var(--tt-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tt-ticker-line b { color: var(--tt-positive); font-weight: 500; font-variant-numeric: tabular-nums; }
@keyframes tt-roll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* ── results ──────────────────────────────────────────────────────────── */

.tt-results { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.tt-results-in { max-width: 52rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.4rem; }
.tt-echo {
  border-left: 2px solid var(--tt-line); padding: 0.2rem 0 0.2rem 1rem;
  color: var(--tt-muted); font-size: var(--fs-body); line-height: 1.55;
}
.tt-echo q { color: var(--tt-ink); font-style: normal; }
.tt-shape {
  font-family: var(--tt-data); font-size: var(--fs-micro); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--tt-positive);
}
.tt-group { display: flex; flex-direction: column; gap: 0.7rem; }
.tt-group-head { display: flex; flex-direction: column; gap: 0.25rem; }
.tt-group-head h3 { font-size: var(--fs-lead); }
.tt-group-head p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--tt-muted); max-width: 40rem; }
.tt-res {
  border: 1px solid var(--tt-rule); border-left: 2px solid var(--tt-line);
  border-radius: 5px; background: var(--tt-surface); padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.tt-res--close { border-left-color: var(--tt-positive); }
.tt-res--trade { border-left-color: var(--tt-ember); }
.tt-res-head { display: flex; align-items: flex-start; gap: 1rem; }
.tt-res-title { font-size: clamp(var(--fs-lead), 1rem + 0.5vw, 1.375rem); line-height: 1.3; flex: 1; min-width: 0; }
.tt-res-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.tt-tpl {
  font-family: var(--tt-data); font-size: var(--fs-small); color: var(--tt-muted);
  background: var(--tt-surface-2); border-radius: 3px; padding: 0.2rem 0.45rem;
  overflow-wrap: anywhere;
}
.tt-tpl b { color: var(--tt-ink); font-weight: 500; }
.tt-x {
  font-family: var(--tt-data); font-size: var(--fs-small); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--tt-positive);
  border: 1px solid currentColor; border-radius: 3px; padding: 0.12rem 0.4rem; white-space: nowrap;
}
.tt-niche { font-family: var(--tt-data); font-size: var(--fs-small); color: var(--tt-muted); }
/* The citation. The format came out of a real video, and the reader can go and
   watch the one it worked on. */
.tt-source {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.45rem 0.15rem 0.35rem;
  border: 1px solid var(--tt-rule); border-radius: 999px;
  background: var(--tt-surface-2); color: var(--tt-muted);
  font-family: var(--tt-data); font-size: var(--fs-small); line-height: 1.4;
  text-decoration: none; max-width: 14rem;
  transition: color 0.14s var(--tt-ease), border-color 0.14s var(--tt-ease);
}
.tt-source svg { width: 13px; height: 9px; flex: 0 0 auto; }
.tt-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-source:hover { color: var(--tt-ink); border-color: var(--tt-line); }
.tt-res-note {
  margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--tt-muted);
  border-top: 1px solid var(--tt-rule); padding-top: 0.5rem;
}
.tt-res-note b { color: var(--tt-ink); font-weight: 500; }
.tt-res-note.is-cost b { color: var(--tt-negative); }
.tt-copy {
  flex: 0 0 auto; height: 2rem; padding: 0 0.7rem; background: transparent;
  border: 1px solid var(--tt-line); border-radius: 5px; color: var(--tt-muted);
  font-family: var(--tt-data); font-size: var(--fs-small); cursor: pointer;
}
.tt-copy:hover { color: var(--tt-ink); border-color: var(--tt-mark); }
.tt-copy.is-done { color: var(--tt-positive); border-color: var(--tt-positive); }
.tt-picks {
  border: 1px solid var(--tt-rule); border-radius: 5px; padding: 1rem 1.1rem;
  background: var(--tt-surface); display: flex; flex-direction: column; gap: 0.5rem;
}
.tt-picks h3 { font-size: var(--fs-lead); }
.tt-picks p { margin: 0; font-size: var(--fs-body); color: var(--tt-muted); line-height: 1.55; }
.tt-picks p b { color: var(--tt-ink); font-weight: 700; }
/* ── the gate ─────────────────────────────────────────────────────────── */

.tt-locked-wrap { position: relative; }
.tt-locked { filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; }
.tt-gate {
  border: 1px solid var(--tt-line); border-radius: 6px; background: var(--tt-surface);
  padding: clamp(1.1rem, 3vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.85rem;
  animation: tt-gate-in 0.42s var(--tt-ease) both;
}
@keyframes tt-gate-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tt-gate h3 { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem); }
.tt-gate p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--tt-muted); max-width: 38rem; }
.tt-gate-count {
  font-family: var(--tt-data); font-size: var(--fs-micro); color: var(--tt-positive);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tt-gate-form { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tt-gate-form input[type="email"] {
  flex: 1 1 16rem; min-width: 0; height: 3rem; padding: 0 1rem;
  background: var(--tt-field); color: var(--tt-ink);
  border: 1px solid var(--tt-line); border-radius: 5px; font: inherit; font-size: var(--fs-lead);
}
.tt-gate-form input::placeholder { color: var(--tt-muted); }
.tt-gate-form input:focus-visible { border-color: var(--tt-mark); }
.tt-gate-fine { font-size: var(--fs-small); color: var(--tt-muted); }
.tt-gate-fine a { color: var(--tt-ink); text-underline-offset: 3px; }
.tt-gate-fine.is-error { color: var(--tt-negative); }
.tt-hp { position: absolute; left: -9999px; }
/* ── refusals: each one reads differently on purpose ──────────────────── */

.tt-panel {
  border: 1px solid var(--tt-line); background: var(--tt-surface);
  border-radius: 6px; padding: clamp(1.1rem, 3vw, 1.6rem);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.tt-panel--spent { border-color: var(--tt-negative); background: var(--tt-negative-wash); }
.tt-panel h3 { font-size: 1.25rem; }
.tt-panel p { margin: 0; color: var(--tt-muted); font-size: var(--fs-body); line-height: 1.55; max-width: 38rem; }
.tt-panel p b { color: var(--tt-ink); font-weight: 500; }
/* ── below the fold ───────────────────────────────────────────────────── */

/* No dividers: the sections are separated by space, not by rules. */
.tt-argument { }
.tt-closer {
  padding-top: clamp(2.75rem, 5vw, 4rem); padding-bottom: clamp(2.75rem, 5vw, 4rem);
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center;
}
.tt-closer h2 { font-size: clamp(1.3rem, 1rem + 1.8vw, 2.2rem); max-width: 44rem; }
@media (max-width: 52rem) {
    .tt-res-head { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .tt-upsell { margin-left: 0; flex-basis: 100%; }
}