/*
 * TowTask Scanner styles.
 * Self-contained: no Tailwind dependency, since this renders inside the theme.
 * Tokens mirror the TowTask theme config so the report reads as part of the site.
 */

.tt-scan, .tt-report {
  --tt-base:      #F8FAFC;
  --tt-surface:   #FFFFFF;
  --tt-accent:    #34D399;
  --tt-highlight: #4ADFE4;
  --tt-text:      #1F2937;
  --tt-contrast:  #1E4079;
  --tt-blue-bg:   #E0F7FA;
  --tt-dark:      #0C1F42;
  --tt-risk:      #FFF5F5;
  --tt-control:   #F0FFF4;
  --tt-hover:     #2B6CB0;
  --tt-muted:     #6B7280;
  --tt-line:      #E5E7EB;
  --tt-danger:    #DC2626;
  --tt-warn:      #D97706;

  color: var(--tt-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tt-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Buttons ------------------------------------------------------------ */
.tt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; border-radius: 12px; border: 0;
  font-weight: 800; font-size: 15px; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.tt-btn--primary { background: var(--tt-accent); color: #fff; box-shadow: 0 10px 24px rgba(52,211,153,.32); }
.tt-btn--primary:hover { background: #10B981; color: #fff; transform: scale(1.02); }
.tt-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* --- Scan form ---------------------------------------------------------- */
.tt-scan { background: var(--tt-surface); border-radius: 20px; padding: 40px; box-shadow: 0 6px 24px rgba(12,31,66,.08); }
.tt-scan__heading { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; color: var(--tt-dark); margin: 0 0 10px; }
.tt-scan__sub { color: var(--tt-muted); font-size: 17px; margin: 0 0 24px; }
.tt-scan__form { display: flex; gap: 12px; flex-wrap: wrap; }
.tt-scan__input {
  flex: 1 1 300px; padding: 16px 20px; font-size: 17px;
  border: 2px solid var(--tt-line); border-radius: 12px; background: var(--tt-base);
  font-family: inherit; color: var(--tt-text);
}
.tt-scan__input:focus { outline: 0; border-color: var(--tt-highlight); background: #fff; }
.tt-scan__error { color: var(--tt-danger); font-weight: 600; margin: 14px 0 0; }
.tt-scan__points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.tt-scan__points li { position: relative; padding-left: 26px; color: var(--tt-muted); font-size: 15px; }
.tt-scan__points li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  border-radius: 3px; background: var(--tt-accent);
}

/* --- Progress ------------------------------------------------------------ */
.tt-progress { margin-top: 24px; }
.tt-progress__bar { height: 8px; background: var(--tt-line); border-radius: 999px; overflow: hidden; }
.tt-progress__bar span { display: block; height: 100%; width: 5%; background: var(--tt-accent); border-radius: 999px; transition: width .5s ease; }
.tt-progress__label { margin: 10px 0 0; color: var(--tt-muted); font-size: 14px; }

/* --- Report shell -------------------------------------------------------- */
.tt-report { max-width: 1000px; margin: 0 auto; padding: 48px 20px 80px; }
.tt-section { margin-top: 56px; }
.tt-section h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--tt-dark); margin: 0 0 6px; }
.tt-section__sub { color: var(--tt-muted); margin: 0 0 22px; font-size: 16px; }
.tt-note { color: var(--tt-muted); font-size: 14px; margin-top: 14px; }
.tt-stamp { color: var(--tt-muted); font-size: 13px; margin-top: 48px; text-align: center; }
.tt-card--empty { background: var(--tt-surface); border-radius: 20px; padding: 48px; text-align: center; box-shadow: 0 6px 24px rgba(12,31,66,.08); }

/* --- Hero ---------------------------------------------------------------- */
.tt-hero { background: var(--tt-blue-bg); border-radius: 20px; padding: 40px; }
.tt-hero__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--tt-hover); margin: 0 0 6px; }
.tt-hero__domain { font-size: clamp(28px, 5vw, 46px); font-weight: 800; letter-spacing: -.03em; color: var(--tt-dark); margin: 0 0 24px; word-break: break-all; }
.tt-hero__grid { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
@media (max-width: 640px) { .tt-hero__grid { grid-template-columns: 1fr; gap: 20px; } .tt-hero, .tt-scan { padding: 26px; } }

.tt-score { background: #fff; border-radius: 16px; padding: 24px 30px; text-align: center; box-shadow: 0 4px 14px rgba(12,31,66,.08); }
.tt-score__num { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--tt-contrast); }
.tt-score__num span { font-size: 20px; color: var(--tt-muted); font-weight: 600; }
.tt-score__level { margin-top: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-hover); }

.tt-verdict__head { font-size: 20px; font-weight: 700; color: var(--tt-dark); margin: 0 0 8px; }
.tt-verdict__sub { color: var(--tt-text); margin: 0; font-size: 16px; line-height: 1.6; }

.tt-gate { margin-top: 26px; background: #fff; border-left: 5px solid var(--tt-danger); border-radius: 12px; padding: 18px 22px; }
.tt-gate__label { margin: 0 0 8px; font-weight: 700; color: var(--tt-danger); }
.tt-gate ul { margin: 0; padding-left: 20px; }
.tt-gate li { margin-bottom: 6px; line-height: 1.55; }

/* --- Chain ---------------------------------------------------------------- */
.tt-chain { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; flex-wrap: wrap; counter-reset: c; }
.tt-chain__item { flex: 1 1 130px; padding: 16px 12px; border-radius: 12px; text-align: center; font-weight: 700; font-size: 14px; border: 2px solid transparent; }
.tt-chain__item--ok     { background: var(--tt-control); color: #047857; border-color: rgba(52,211,153,.45); }
.tt-chain__item--break  { background: var(--tt-risk);    color: var(--tt-danger); border-color: var(--tt-danger); }
.tt-chain__item--after  { background: var(--tt-base);    color: #9CA3AF; }
.tt-chain__item--break .tt-chain__label::after { content: " breaks here"; font-weight: 600; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }

/* --- Pillars --------------------------------------------------------------- */
.tt-pillars { display: grid; gap: 14px; }
.tt-pillar__top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.tt-pillar__name { font-weight: 600; }
.tt-pillar__score { color: var(--tt-muted); font-variant-numeric: tabular-nums; }
.tt-meter { height: 10px; background: var(--tt-line); border-radius: 999px; overflow: hidden; }
.tt-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--tt-accent), var(--tt-highlight)); }

/* --- Plan ------------------------------------------------------------------ */
.tt-plan { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: p; }
.tt-plan__item { background: #fff; border: 1px solid var(--tt-line); border-left: 5px solid var(--tt-highlight); border-radius: 12px; padding: 18px 22px; }
.tt-plan__item--gate { border-left-color: var(--tt-accent); background: var(--tt-control); }
/* Grid, not flex. A three-item flex row with space-between let the title
   collapse to zero width between the number and the points badge, so the most
   important line in the box vanished while everything around it rendered. */
.tt-plan__head {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px; margin-bottom: 2px;
}
.tt-plan__label {
  margin: 0; min-width: 0; font-size: 17px; font-weight: 800;
  line-height: 1.35; letter-spacing: -.01em; color: var(--tt-dark);
  overflow-wrap: anywhere;
}
.tt-plan__why { margin: 0 0 6px; line-height: 1.6; }
.tt-plan__meta { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted); }
.tt-tag { flex-shrink: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; background: var(--tt-base); color: var(--tt-muted); }
.tt-tag--effort { background: var(--tt-blue-bg); color: var(--tt-hover); font-weight: 600; text-transform: none; letter-spacing: 0; }
.tt-tag--gate { background: var(--tt-accent); color: #fff; }

/* --- Broker ----------------------------------------------------------------- */
.tt-broker { border-radius: 14px; padding: 24px; border-left: 6px solid; }
.tt-broker--unknown  { background: var(--tt-base);    border-color: var(--tt-line); }
.tt-broker--clear    { background: var(--tt-control); border-color: var(--tt-accent); }
.tt-broker--low      { background: var(--tt-base);    border-color: var(--tt-highlight); }
.tt-broker--elevated { background: #FFFBEB;           border-color: var(--tt-warn); }
.tt-broker--high     { background: var(--tt-risk);    border-color: var(--tt-danger); }
.tt-broker__verdict { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--tt-dark); }
.tt-broker__detail  { margin: 0; line-height: 1.65; }
.tt-broker__signals { margin: 16px 0 0; padding-left: 20px; }
.tt-broker__signals li { margin-bottom: 6px; font-size: 15px; line-height: 1.5; }

/* --- Simulation --------------------------------------------------------------- */
.tt-sim { display: grid; gap: 8px; }
.tt-sim__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--tt-line); border-radius: 10px; padding: 12px 16px; }
.tt-sim__label { font-size: 15px; }
.tt-sim__fields { display: flex; gap: 5px; flex-shrink: 0; }
.tt-dot { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.tt-dot--ok { background: var(--tt-control); color: #047857; }
.tt-dot--no { background: var(--tt-risk); color: var(--tt-danger); }

/* --- Checks ---------------------------------------------------------------------- */
.tt-details summary { cursor: pointer; font-weight: 700; color: var(--tt-hover); padding: 12px 0; }
.tt-checks { display: grid; gap: 6px; margin-top: 12px; }
.tt-check { display: grid; grid-template-columns: 230px 1fr; gap: 14px; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) { .tt-check { grid-template-columns: 1fr; gap: 4px; } }
.tt-check--pass           { background: var(--tt-control); }
.tt-check--partial        { background: #FFFBEB; }
.tt-check--fail           { background: var(--tt-risk); }
.tt-check--error          { background: var(--tt-risk); }
.tt-check--not_applicable { background: var(--tt-base); color: var(--tt-muted); }
.tt-check__id { font-weight: 700; }

/* --- CTA ------------------------------------------------------------------------- */
.tt-cta { margin-top: 56px; background: var(--tt-contrast); color: #fff; border-radius: 20px; padding: 44px; text-align: center; }
.tt-cta h2 { color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.tt-cta p { color: rgba(255,255,255,.85); max-width: 620px; margin: 0 auto 26px; line-height: 1.6; }

/* --- Evidence blocks ------------------------------------------------------ */
.tt-ev { margin: 12px 0; padding: 14px 16px; background: var(--tt-base); border-radius: 10px; border: 1px solid var(--tt-line); }
.tt-ev__title { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tt-muted); }
.tt-ev__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tt-ev__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.tt-ev__key { background: var(--tt-contrast); color: #fff; padding: 3px 10px; border-radius: 6px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-ev__where { font-size: 14px; color: var(--tt-text); }
.tt-ev__pages { font-size: 12px; color: var(--tt-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tt-ev__note { margin: 12px 0 0; font-size: 13px; color: var(--tt-muted); font-style: italic; }
.tt-ev__chips { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tt-chip { background: #fff; border: 1px solid var(--tt-line); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.tt-chip--more { background: var(--tt-line); border-color: transparent; color: var(--tt-muted); }
.tt-ev__table { width: 100%; border-collapse: collapse; }
.tt-ev__table th { text-align: left; padding: 6px 14px 6px 0; font-size: 13px; color: var(--tt-muted); font-weight: 600; white-space: nowrap; }
.tt-ev__table td { padding: 6px 0; }
.tt-ev__table code { background: #fff; border: 1px solid var(--tt-line); padding: 3px 9px; border-radius: 6px; font-size: 13px; }
.tt-ev__quote { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.tt-ev__quote:last-child { margin-bottom: 0; }
.tt-ev__quote-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted); margin-bottom: 3px; }
.tt-ev__metric { margin: 0; font-size: 14px; }
.tt-ev__metric strong { font-size: 22px; color: var(--tt-danger); }

/* --- Fix cards ------------------------------------------------------------- */
.tt-fix { margin: 12px 0 0; border: 1px solid var(--tt-line); border-radius: 10px; background: #fff; }
.tt-fix__toggle { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--tt-hover); font-size: 14px; list-style: none; display: flex; align-items: center; gap: 8px; }
.tt-fix__toggle::-webkit-details-marker { display: none; }
.tt-fix__toggle::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--tt-accent); color: #fff; font-size: 15px; line-height: 1; }
.tt-fix[open] .tt-fix__toggle::before { content: "\2212"; }
.tt-fix__body { padding: 0 16px 16px; }
.tt-fix__warn { background: var(--tt-risk); border-left: 4px solid var(--tt-danger); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; line-height: 1.55; }
.tt-fix__steps { margin: 0 0 14px; padding-left: 22px; }
.tt-fix__steps li { margin-bottom: 8px; line-height: 1.6; font-size: 14px; }

/* --- Code blocks ------------------------------------------------------------ */
.tt-code { border: 1px solid var(--tt-line); border-radius: 10px; overflow: hidden; }
.tt-code__bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--tt-base); border-bottom: 1px solid var(--tt-line); }
.tt-code__name { font-size: 12px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--tt-contrast); }
.tt-code__actions { display: flex; gap: 6px; }
.tt-code__btn { border: 1px solid var(--tt-line); background: #fff; border-radius: 6px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--tt-hover); font-family: inherit; }
.tt-code__btn:hover { background: var(--tt-hover); color: #fff; border-color: var(--tt-hover); }
.tt-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; background: #0C1F42; max-height: 420px; }
.tt-code code { color: #D7E3F4; font-size: 12.5px; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }

/* --- Comparison --------------------------------------------------------------- */
.tt-compare__form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tt-compare__input { flex: 1 1 190px; padding: 13px 16px; font-size: 15px; border: 2px solid var(--tt-line); border-radius: 10px; background: var(--tt-base); font-family: inherit; }
.tt-compare__input:focus { outline: 0; border-color: var(--tt-highlight); background: #fff; }

.tt-rank { background: var(--tt-blue-bg); border-radius: 14px; padding: 22px 26px; margin: 24px 0; }
.tt-rank__headline { margin: 0; font-size: 19px; font-weight: 700; color: var(--tt-dark); line-height: 1.5; }

.tt-vs { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.tt-vs th { text-align: left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted); border-bottom: 2px solid var(--tt-line); }
.tt-vs td { padding: 13px 12px; border-bottom: 1px solid var(--tt-line); }
.tt-vs tr.is-you { background: var(--tt-control); }
.tt-vs tr.is-you td { font-weight: 700; }
.tt-vs__score { font-variant-numeric: tabular-nums; font-weight: 700; }

.tt-gap { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tt-gap__item { background: var(--tt-risk); border-left: 5px solid var(--tt-danger); border-radius: 10px; padding: 15px 18px; }
.tt-gap__item--some { background: #FFFBEB; border-left-color: var(--tt-warn); }
.tt-gap__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.tt-gap__label { font-weight: 700; color: var(--tt-dark); }
.tt-gap__ratio { flex-shrink: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tt-danger); }
.tt-gap__item--some .tt-gap__ratio { color: var(--tt-warn); }
.tt-gap__who { margin: 0; font-size: 13px; color: var(--tt-muted); }
.tt-ahead { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tt-ahead li { background: var(--tt-control); border: 1px solid rgba(52,211,153,.5); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; color: #047857; }

/* --- Scanner page ------------------------------------------------------------- */
.tt-scan__eyebrow { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--tt-hover); background: var(--tt-blue-bg); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.tt-scan__meta { margin: 12px 0 0; font-size: 13px; color: var(--tt-muted); }
.tt-scan__demo { margin-top: 30px; padding: 22px 26px; background: var(--tt-blue-bg); border-radius: 14px; }
.tt-scan__demo-q { margin: 0 0 10px; font-size: 19px; font-weight: 700; color: var(--tt-dark); line-height: 1.45; }
.tt-scan__demo-a { margin: 0; color: var(--tt-text); line-height: 1.6; }
.tt-scan__intro { margin-bottom: 22px; }
.tt-scan__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }
.tt-scan__card { background: var(--tt-base); border-radius: 12px; padding: 20px; border-top: 4px solid var(--tt-accent); }
.tt-scan__card-num { font-size: 12px; font-weight: 800; color: var(--tt-accent); letter-spacing: .1em; }
.tt-scan__card h3 { margin: 8px 0 6px; font-size: 17px; font-weight: 700; color: var(--tt-dark); }
.tt-scan__card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tt-muted); }
.tt-scan__strip { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--tt-line); font-size: 14px; color: var(--tt-muted); }
.tt-scan__strip strong { color: var(--tt-contrast); font-weight: 800; }

/* --- Gauge and tally ----------------------------------------------------------- */
.tt-hero__gauge { display: grid; place-items: center; }
.tt-gauge { width: 190px; height: 190px; }
.tt-tally { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.tt-tally__item { font-size: 14px; padding: 6px 14px; border-radius: 999px; background: #fff; }
.tt-tally__item strong { font-size: 17px; font-weight: 800; margin-right: 4px; }
.tt-tally__item--pass strong { color: #047857; }
.tt-tally__item--partial strong { color: var(--tt-warn); }
.tt-tally__item--fail strong { color: var(--tt-danger); }

/* --- AI answer preview ---------------------------------------------------------- */
.tt-chat { background: #fff; border: 1px solid var(--tt-line); border-radius: 16px; padding: 26px; }
.tt-chat__q { margin: 0 0 20px; font-size: 18px; font-weight: 700; color: var(--tt-dark); padding: 14px 18px; background: var(--tt-base); border-radius: 14px 14px 14px 4px; display: inline-block; }
.tt-chat__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .tt-chat__pair { grid-template-columns: 1fr; } }
.tt-chat__side { padding: 18px 20px; border-radius: 4px 14px 14px 14px; }
.tt-chat__side--now { background: var(--tt-risk); border: 1px solid rgba(220,38,38,.25); }
.tt-chat__side--after { background: var(--tt-control); border: 1px solid rgba(52,211,153,.4); }
.tt-chat__side p { margin: 0; line-height: 1.65; font-size: 15px; }
.tt-chat__tag { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.tt-chat__tag--now { background: var(--tt-danger); color: #fff; }
.tt-chat__tag--after { background: var(--tt-accent); color: #fff; }
.tt-chat__gap { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--tt-line); font-size: 14px; color: var(--tt-text); line-height: 1.6; }

/* --- Level ladder ------------------------------------------------------------------ */
.tt-ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; counter-reset: l; }
.tt-ladder__step { display: flex; gap: 16px; align-items: flex-start; padding: 15px 18px; border-radius: 12px; border: 2px solid transparent; }
.tt-ladder__step--done   { background: var(--tt-control); }
.tt-ladder__step--here   { background: #fff; border-color: var(--tt-accent); box-shadow: 0 4px 16px rgba(52,211,153,.22); }
.tt-ladder__step--next   { background: var(--tt-risk); border-color: rgba(220,38,38,.3); }
.tt-ladder__step--future { background: var(--tt-base); opacity: .6; }
.tt-ladder__num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: #fff; color: var(--tt-muted); border: 1px solid var(--tt-line); }
.tt-ladder__step--done .tt-ladder__num { background: var(--tt-accent); color: #fff; border-color: transparent; }
.tt-ladder__step--here .tt-ladder__num { background: var(--tt-contrast); color: #fff; border-color: transparent; }
.tt-ladder__body { display: block; }
.tt-ladder__name { display: block; font-weight: 700; color: var(--tt-dark); margin-bottom: 2px; }
.tt-ladder__desc { display: block; font-size: 14px; color: var(--tt-muted); line-height: 1.5; }
.tt-ladder__tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; background: var(--tt-accent); color: #fff; padding: 3px 9px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.tt-ladder__block { display: block; margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--tt-danger); }

/* --- Radar --------------------------------------------------------------------------- */
.tt-radar-wrap { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 32px; align-items: center; }
@media (max-width: 860px) { .tt-radar-wrap { grid-template-columns: 1fr; } }
.tt-radar { width: 100%; height: auto; max-width: 460px; margin: 0 auto; display: block; }
.tt-bar { display: block; height: 9px; background: var(--tt-line); border-radius: 999px; overflow: hidden; }
.tt-bar__fill { display: block; height: 100%; border-radius: 999px; }

/* --- Plan additions -------------------------------------------------------------------- */
.tt-plan__cost { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--tt-text); }
.tt-plan__why { font-size: 13.5px; color: var(--tt-muted); background: var(--tt-base); border-radius: 8px; padding: 10px 13px; }
.tt-plan__detail-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #9CA3AF; margin-bottom: 3px; }

/* --- Phone layout -----------------------------------------------------------------
 * Most towing operators will open this on a phone, often standing next to a truck.
 * Everything below collapses to a single column and drops the ornamental spacing. */
@media (max-width: 600px) {
  .tt-report { padding: 28px 16px 60px; }
  .tt-section { margin-top: 40px; }
  .tt-section h2 { font-size: 23px; }
  .tt-hero { padding: 24px 20px; }
  .tt-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .tt-gauge { width: 160px; height: 160px; }
  .tt-tally { justify-content: center; }
  .tt-verdict__head { font-size: 17px; }
  .tt-gate { text-align: left; }

  .tt-chat { padding: 18px; }
  .tt-chat__q { font-size: 16px; display: block; }
  .tt-ladder__step { padding: 13px 14px; gap: 12px; }
  .tt-ladder__name { font-size: 15px; }
  .tt-ladder__tag { display: block; margin: 5px 0 0; width: fit-content; }

  .tt-chain { gap: 5px; }
  .tt-chain__item { flex: 1 1 calc(50% - 5px); font-size: 13px; padding: 12px 8px; }

  .tt-plan__item { padding: 15px 16px; }
  .tt-plan__head { grid-template-columns: auto 1fr; }
  .tt-plan__head .tt-tag { grid-column: 2; justify-self: start; margin-top: 4px; }
  .tt-plan__tech { margin-left: 0; }
  .tt-plan__cost { font-size: 15px; }
  .tt-code pre { padding: 12px; }
  .tt-code code { font-size: 11.5px; }

  .tt-compare__form { flex-direction: column; }
  .tt-vs { font-size: 13px; }
  .tt-vs th, .tt-vs td { padding: 9px 7px; }

  .tt-cta { padding: 30px 22px; }
  .tt-cta h2 { font-size: 24px; }
  .tt-btn { width: 100%; padding: 15px 20px; font-size: 14px; }

  .tt-scan__strip { gap: 14px; font-size: 13px; }
  .tt-scan__demo { padding: 18px; }
  .tt-scan__demo-q { font-size: 17px; }
}

/* Long phone numbers and domains must never force a horizontal scrollbar. */
.tt-ev__list li { word-break: break-word; }
.tt-vs td:first-child { word-break: break-all; }

/* --- Fix list: tally strip -------------------------------------------------- */
.tt-scoreboard {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 32px;
}
@media (max-width: 720px) { .tt-scoreboard { grid-template-columns: repeat(2, 1fr); } }
.tt-scoreboard__item {
  background: #fff; border: 1px solid var(--tt-line); border-radius: 14px;
  padding: 18px 16px; text-align: center;
}
.tt-scoreboard__num {
  display: block; font-size: 34px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--tt-contrast);
}
.tt-scoreboard__label {
  display: block; margin-top: 8px; font-size: 12px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted);
}
.tt-scoreboard__item--alert { background: var(--tt-risk); border-color: rgba(220,38,38,.28); }
.tt-scoreboard__item--alert .tt-scoreboard__num { color: var(--tt-danger); }
.tt-scoreboard__item--gain  { background: var(--tt-control); border-color: rgba(52,211,153,.4); }
.tt-scoreboard__item--gain .tt-scoreboard__num { color: #047857; }

/* --- Fix list: groups -------------------------------------------------------- */
.tt-group { margin-bottom: 36px; }
.tt-group__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; border-bottom: 2px solid var(--tt-line); padding-bottom: 10px; margin-bottom: 8px;
}
.tt-group__title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--tt-dark);
}
.tt-group__count {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px;
  padding: 0 8px; border-radius: 999px; background: var(--tt-base);
  font-size: 13px; font-weight: 700; color: var(--tt-muted);
}
.tt-group__points {
  flex-shrink: 0; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tt-muted);
}
.tt-group__sub { margin: 0 0 18px; color: var(--tt-muted); font-size: 15px; line-height: 1.6; max-width: 760px; }

.tt-group--blocking .tt-group__head  { border-bottom-color: var(--tt-danger); }
.tt-group--blocking .tt-group__title { color: var(--tt-danger); }
.tt-group--blocking .tt-group__count { background: var(--tt-risk); color: var(--tt-danger); }
.tt-group--high .tt-group__head      { border-bottom-color: var(--tt-accent); }
.tt-group--high .tt-group__count     { background: var(--tt-control); color: #047857; }

.tt-group__fold > summary {
  cursor: pointer; padding: 12px 16px; border-radius: 10px; background: var(--tt-base);
  font-weight: 700; color: var(--tt-hover); list-style: none;
}
.tt-group__fold > summary::-webkit-details-marker { display: none; }
.tt-group__fold > summary::after { content: "  ▾"; }
.tt-group__fold[open] > summary::after { content: "  ▴"; }
.tt-group__fold[open] > summary { margin-bottom: 14px; }

/* --- Fix list: numbering and effort ------------------------------------------ */
.tt-plan__n {
  flex-shrink: 0; display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px; margin-right: 4px;
  background: var(--tt-contrast); color: #fff; font-size: 13px; font-weight: 800;
}
.tt-plan__item--gate .tt-plan__n { background: var(--tt-danger); }
.tt-plan__effort {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tt-hover);
}

.tt-group--quick .tt-group__head  { border-bottom-color: var(--tt-highlight); }
.tt-group--quick .tt-group__count { background: var(--tt-blue-bg); color: var(--tt-hover); }

.tt-check__summary { color: var(--tt-text); }

/* --- Status colour: missing is red, working is green ------------------------ */
/* An owner should be able to scan the page and know what is wrong from colour
   alone, before reading a word. Left borders alone were too subtle. */
.tt-plan__item {
  background: var(--tt-risk);
  border: 1px solid rgba(220,38,38,.22);
  border-left: 5px solid var(--tt-danger);
}
.tt-plan__item--gate {
  background: var(--tt-risk);
  border-color: rgba(220,38,38,.45);
  border-left-width: 7px;
  box-shadow: 0 4px 14px rgba(220,38,38,.10);
}
.tt-group--quick .tt-plan__item,
.tt-group--worth .tt-plan__item {
  background: #FFFBEB;
  border-color: rgba(217,119,6,.22);
  border-left-color: var(--tt-warn);
}
.tt-group--later .tt-plan__item {
  background: var(--tt-base);
  border-color: var(--tt-line);
  border-left-color: #9CA3AF;
}
.tt-plan__item .tt-code { background: #fff; }

/* Working list, shown alongside the fix list */
.tt-wins { display: grid; gap: 8px; margin-top: 6px; }
.tt-win {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--tt-control); border: 1px solid rgba(52,211,153,.35);
  border-left: 5px solid var(--tt-accent); border-radius: 10px; padding: 12px 16px;
}
.tt-win__tick { flex-shrink: 0; color: #047857; font-weight: 800; }
.tt-win__label { font-weight: 700; color: var(--tt-dark); font-size: 15px; }
.tt-win__note { display: block; font-weight: 400; color: var(--tt-muted); font-size: 13.5px; margin-top: 2px; }

/* Full check list: unmistakable pass/fail */
.tt-check--pass    { background: var(--tt-control); border-left: 4px solid var(--tt-accent); }
.tt-check--partial { background: #FFFBEB;          border-left: 4px solid var(--tt-warn); }
.tt-check--fail,
.tt-check--error   { background: var(--tt-risk);   border-left: 4px solid var(--tt-danger); }
.tt-check--not_applicable { background: var(--tt-base); border-left: 4px solid var(--tt-line); }

/* Build stamp, so a screenshot always says which version produced it */
.tt-build { text-align: center; color: #9CA3AF; font-size: 12px; margin-top: 8px; }

.tt-group--wins .tt-group__head { border-bottom-color: var(--tt-accent); }
.tt-group--wins .tt-group__title { color: #047857; }
.tt-group--wins .tt-group__count { background: var(--tt-control); color: #047857; }

.tt-compare__auto { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tt-compare__or { color: var(--tt-muted); font-size: 14px; }

/* Technical name shown under the plain-language title. An owner reads the top
   line; whoever actually implements the fix needs the real term to search for. */
.tt-plan__tech, .tt-check__tech {
  display: block; margin: 0 0 10px 38px; font-weight: 500; font-size: 12px;
  color: var(--tt-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tt-check__tech { margin-left: 0; }

.tt-restale {
  text-align: center; margin-top: 32px; padding: 12px 16px;
  background: var(--tt-blue-bg); border-radius: 10px;
  font-size: 14px; color: var(--tt-contrast);
}
.tt-restale a { color: var(--tt-hover); font-weight: 700; }

/* --- Run another scan ------------------------------------------------------- */
.tt-again {
  margin-top: 48px; background: var(--tt-blue-bg);
  border-radius: 18px; padding: 28px 32px;
}
.tt-again__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.tt-again__head { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--tt-dark); }
.tt-again__sub { margin: 0; color: var(--tt-muted); font-size: 15px; }
.tt-again__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tt-btn--ghost-dark {
  background: #fff; color: var(--tt-contrast);
  border: 2px solid var(--tt-highlight);
}
.tt-btn--ghost-dark:hover { border-color: var(--tt-hover); color: var(--tt-hover); }
@media (max-width: 640px) {
  .tt-again { padding: 22px; }
  .tt-again__inner { flex-direction: column; align-items: flex-start; }
  .tt-again__actions { width: 100%; }
  .tt-again__actions .tt-btn { flex: 1 1 auto; justify-content: center; }
}

/* --- Market league table ----------------------------------------------------- */
.tt-market__lede { max-width: 700px; margin: 0 0 24px; color: var(--tt-text); font-size: 16px; line-height: 1.6; }
.tt-league { display: grid; gap: 8px; }
.tt-league__row {
  display: grid; grid-template-columns: 44px 1fr 160px 56px;
  align-items: center; gap: 16px; padding: 14px 18px;
  background: #fff; border: 1px solid var(--tt-line); border-radius: 12px;
  text-decoration: none; color: var(--tt-text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.tt-league__row:hover {
  transform: translateY(-2px); border-color: var(--tt-highlight);
  box-shadow: 0 8px 20px rgba(12,31,66,.10);
}
.tt-league__row--pending { opacity: .6; grid-template-columns: 44px 1fr auto; }
.tt-league__rank {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--tt-base);
  font-weight: 800; font-size: 14px; color: var(--tt-contrast);
}
.tt-league__row:first-child .tt-league__rank { background: var(--tt-accent); color: #fff; }
.tt-league__main { min-width: 0; }
.tt-league__domain { display: block; font-weight: 700; font-size: 16px; color: var(--tt-dark); word-break: break-all; }
.tt-league__level { display: block; margin-top: 3px; font-size: 12.5px; color: var(--tt-muted); }
.tt-league__flag {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--tt-risk); color: var(--tt-danger); font-size: 11px; font-weight: 700;
}
.tt-league__score {
  text-align: right; font-size: 22px; font-weight: 800;
  letter-spacing: -.02em; color: var(--tt-contrast); font-variant-numeric: tabular-nums;
}
.tt-league__pending { font-size: 13px; color: var(--tt-muted); font-style: italic; }
@media (max-width: 720px) {
  .tt-league__row { grid-template-columns: 36px 1fr 48px; }
  .tt-league__bar { display: none; }
}

/* Shared gaps across the market.
   Named separately from .tt-gap, which is the comparison list on the report.
   They collided: this rule set display:flex on that list container and every
   comparison card ran off the page in a single unwrapped row. */
.tt-mgaps { display: grid; gap: 10px; }
.tt-mgap {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--tt-risk); border-left: 5px solid var(--tt-danger);
  border-radius: 10px; padding: 14px 18px;
}
.tt-mgap__stat {
  flex-shrink: 0; font-size: 18px; font-weight: 800;
  color: var(--tt-danger); font-variant-numeric: tabular-nums; min-width: 54px;
}
.tt-mgap__label { font-weight: 600; color: var(--tt-dark); min-width: 0; }

/* --- Print / Save as PDF ------------------------------------------------------ */
/* The report is the pitch, so it has to survive being printed or attached to an
   email. Everything interactive is either opened or removed. */
@media print {
  @page { margin: 14mm; }

  body { background: #fff !important; }

  header, footer, nav, .tt-cta, .tt-again, .tt-compare__auto, .tt-compare__form,
  .tt-code__actions, .tt-print, [data-tt-compare-progress], .tt-restale {
    display: none !important;
  }

  .tt-report { max-width: 100%; padding: 0; }
  .tt-section { margin-top: 22px; page-break-inside: avoid; }
  .tt-hero { background: #fff !important; border: 2px solid #E5E7EB; }

  /* Folded content must be readable on paper. */
  details { display: block !important; }
  details > summary { display: none !important; }
  .tt-group__fold[open], .tt-group__fold { display: block !important; }
  .tt-fix, .tt-details { display: block !important; }
  .tt-fix__body, .tt-checks { display: block !important; }

  .tt-plan__item, .tt-win, .tt-gap, .tt-league__row { page-break-inside: avoid; }
  .tt-code pre { background: #F8FAFC !important; max-height: none !important; }
  .tt-code code { color: #1F2937 !important; }

  a[href]::after { content: ""; }
  .tt-gauge { width: 150px !important; height: 150px !important; }
}

.tt-print { margin-left: auto; }

/* --- Change since last scan ---------------------------------------------------- */
.tt-diff { border-radius: 14px; padding: 24px; border-left: 6px solid; }
.tt-diff--up   { background: var(--tt-control); border-color: var(--tt-accent); }
.tt-diff--down { background: var(--tt-risk);    border-color: var(--tt-danger); }
.tt-diff__head { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--tt-contrast); }
.tt-diff__arrow { margin: 0 8px; color: var(--tt-muted); }
.tt-diff__delta { margin-left: 12px; font-size: 20px; }
.tt-diff--up .tt-diff__delta   { color: #047857; }
.tt-diff--down .tt-diff__delta { color: var(--tt-danger); }
.tt-diff--flat { background: var(--tt-panel, #f4f6f8); border-color: var(--tt-muted); }
.tt-diff--flat .tt-diff__delta { color: var(--tt-muted); }
.tt-diff__when { margin: 6px 0 0; font-size: 14px; color: var(--tt-muted); }
.tt-diff__none { margin: 4px 0 0; max-width: 60ch; }
.tt-diff__level { margin: 8px 0 0; font-weight: 700; color: #047857; }
.tt-diff__label { margin: 18px 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted); }
.tt-diff__list { margin: 0; padding-left: 20px; }
.tt-diff__list li { margin-bottom: 4px; }
.tt-diff__list--good li { color: #047857; }
.tt-diff__list--bad li  { color: var(--tt-danger); }

/* ===========================================================================
   Responsive safety net
   ---------------------------------------------------------------------------
   Added after a comparison list ran off the page: a later rule turned its
   container into an unwrapped flex row, and nothing in the stylesheet stopped
   the overflow. These rules make that class of bug impossible rather than
   fixing each component as it surfaces.

   Three causes of horizontal overflow, all handled here:
     1. flex rows that never wrap
     2. grid children that refuse to shrink below their content (min-width:auto)
     3. long unbroken strings, which for this tool means domains and URLs
   =========================================================================== */

/* Nothing inside the tool may exceed the viewport. */
.tt-report, .tt-scan, .tt-market { max-width: 100%; overflow-x: clip; }
.tt-report *, .tt-scan * { max-width: 100%; }

/* Grid and flex children default to min-width:auto, which means a long word
   can push a track wider than its container. This is the single most common
   cause of a layout escaping its parent. */
.tt-report [class^="tt-"], .tt-report [class*=" tt-"],
.tt-scan  [class^="tt-"], .tt-scan  [class*=" tt-"] { min-width: 0; }

/* Any flex row that was not explicitly told to wrap, now wraps. */
.tt-scoreboard, .tt-chain, .tt-again__inner, .tt-again__actions,
.tt-compare__auto, .tt-compare__form, .tt-group__head, .tt-plan__head,
.tt-code__bar, .tt-code__actions, .tt-ev__list li, .tt-ahead,
.tt-sim__row, .tt-sim__fields, .tt-hero__grid, .tt-tally { flex-wrap: wrap; }

/* Domains, URLs and file paths are the long unbroken strings in this tool. */
.tt-league__domain, .tt-hero__domain, .tt-vs td, .tt-gap__who,
.tt-ev__key, .tt-code__name, .tt-plan__tech, .tt-check__tech,
.tt-scan__input, .tt-compare__input { overflow-wrap: anywhere; }

/* Tables scroll rather than stretch the page. */
.tt-vs-wrap, .tt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tt-vs { min-width: 460px; }

/* Code blocks are the one place a horizontal scrollbar is correct. */
.tt-code pre { max-width: 100%; overflow-x: auto; }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .tt-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .tt-again__inner { flex-direction: column; align-items: stretch; }
  .tt-chain__item { flex: 1 1 calc(33.333% - 6px); }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .tt-report { padding: 24px 16px 60px; }
  .tt-hero, .tt-scan, .tt-cta, .tt-again { padding: 20px; }
  .tt-hero__domain { font-size: 26px; }
  .tt-section h2 { font-size: 22px; }

  .tt-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tt-scoreboard__num { font-size: 26px; }

  .tt-chain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-chain__item { flex: initial; }

  .tt-plan__item { padding: 16px; }
  .tt-plan__head { grid-template-columns: auto minmax(0, 1fr); }
  .tt-plan__head .tt-tag { grid-column: 2; justify-self: start; margin-top: 4px; }

  .tt-league__row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; }
  .tt-mgap { flex-direction: column; align-items: flex-start; gap: 6px; }

  .tt-compare__form { flex-direction: column; }
  .tt-compare__input, .tt-compare__form .tt-btn { width: 100%; }
  .tt-again__actions .tt-btn { width: 100%; }

  .tt-gap__head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tt-sim__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tt-diff__head { font-size: 26px; }
  .tt-btn { padding: 14px 20px; font-size: 14px; }
}

/* ---------- Small phone ---------- */
@media (max-width: 400px) {
  .tt-scoreboard { grid-template-columns: minmax(0, 1fr); }
  .tt-chain { grid-template-columns: minmax(0, 1fr); }
}

/* Remaining flex rows the audit flagged as unable to wrap. */
.tt-pillar__top, .tt-fix__toggle, .tt-gap__head, .tt-ladder__step,
.tt-group__title, .tt-win, .tt-league__row { flex-wrap: wrap; }

/* Fixed grid tracks become flexible so a long value cannot widen the page.
   minmax(0, …) is the important part: without the zero minimum, a grid track
   refuses to shrink below its content and pushes the whole layout wider. */
.tt-check      { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
.tt-radar-wrap { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
.tt-league__row          { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 160px) 56px; }
.tt-league__row--pending { grid-template-columns: 44px minmax(0, 1fr) auto; }
.tt-scoreboard { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* The gauge is the one fixed-size element, and it must never be the reason
   the page scrolls sideways. */
.tt-gauge { max-width: 100%; height: auto; }

.tt-ev__list li { flex-wrap: wrap; }

/* Chain intact: shown when no gate fails, so the diagram is never left
   ambiguous about whether the absence of a marker means "fine" or "unknown". */
.tt-chain__intact { margin: 14px 0 0; font-weight: 600; color: #047857; }

/* Level badge on each chain step, tying the chain to the ladder. */
.tt-chain__level { display: block; margin-top: 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tt-muted); }

/* Explainer shown when a strong score sits behind a low level. */
.tt-note--why { border-radius: 14px; padding: 20px 24px; margin: 0 0 20px;
  background: var(--tt-control); border-left: 6px solid var(--tt-accent); }
.tt-note--why p { margin: 0 0 10px; max-width: 70ch; }
.tt-note--why p:last-child { margin-bottom: 0; }
.tt-note__head { font-weight: 800; color: var(--tt-contrast); }

/* ---------------------------------------------------------------------------
   Mobile grid collapse. MUST STAY LAST IN THIS FILE.

   Several two-column grids had a max-width media query collapsing them to one
   column, and then a later top-level rule re-declaring the two-column tracks.
   Equal specificity, so source order decides and the later rule won: the media
   queries never applied and the layouts stayed two-column on phones.

   The radar section was the visible casualty. A 460px chart column beside a
   squeezed second column on a 360px screen pushed the pillar labels off the
   edge and stacked them on top of each other.

   Anything added below this block that touches these grid tracks will
   reintroduce the bug.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .tt-radar-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .tt-radar { max-width: 380px; }
  .tt-check { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tt-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .tt-radar { max-width: 300px; }
  .tt-chain { grid-template-columns: minmax(0, 1fr); }
  .tt-scoreboard { grid-template-columns: minmax(0, 1fr); }
  .tt-league__row,
  .tt-league__row--pending { grid-template-columns: 36px minmax(0, 1fr) auto; }

  /* Pillar rows: name and percentage on one line, bar beneath, so a long
     label like "Commercial Terms & Quotability" wraps instead of forcing
     the row wider than the screen. */
  .tt-pillar__top { gap: 8px; align-items: baseline; }
  .tt-pillar__name { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
  .tt-pillar__score { flex: 0 0 auto; }
}

/* No horizontal scroll, whatever else happens. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Forward-looking note on the top ladder rung. Deliberately quiet: it is
   context, not a blocker, and must not read as another thing to fix. */
.tt-ladder__horizon { display: block; margin-top: 6px; font-size: 13px;
  line-height: 1.5; color: var(--tt-muted); font-style: italic; max-width: 60ch; }

/* Cross-model comparison caveat. Prominent enough to be read, not alarming:
   the diff is still useful, it just is not a like-for-like score. */
.tt-diff__model { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,.6); border-left: 4px solid var(--tt-warn, #d97706);
  font-size: 14px; line-height: 1.5; max-width: 66ch; }