/*
 * Tenrung pages: the scorecard form, a shared result and the printable role card. Loads after the Last Table tokens
 * and components and uses only their variables. The ladder picture leads every result: filled cells in teal, empty
 * cells as outlines, so the weak lines read at a glance before any text.
 */

.lt-page .tr-faqs h2 {
  margin: 0;
  font: 560 var(--lt-step-3) / var(--lt-leading-tight) var(--lt-font-display);
  color: var(--lt-text-1);
}
.lt-page .lt-section:last-child { padding-bottom: var(--lt-space-8); }

/* The star field fades out over the text column, so no star lands on a word. */
.tr-sky::before { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 40%, #000 75%); mask-image: linear-gradient(90deg, transparent 0, transparent 40%, #000 75%); }

/* Table and fact text sits between the 13 px and 16 px steps of the shared scale. */
:root {
  --tr-text-sm: 0.875rem;
  --tr-text-md: 0.9375rem;
}

.tr-facts { display: flex; flex-wrap: wrap; gap: var(--lt-space-2) var(--lt-space-5); margin: var(--lt-space-5) 0; font-size: var(--tr-text-sm); color: var(--lt-text-1); }

/* The hero text beside the sample result on a desktop; stacked on a phone. */
.tr-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--lt-space-6); align-items: center; }
.tr-sample { margin: 0; display: grid; gap: var(--lt-space-3); }
.tr-sample figcaption { font-size: var(--tr-text-sm); }
/* The band chip sits on the starry hero; a solid fill under its see-through tint keeps stars out of the text. */
.tr-numbers .lt-chip[data-tone="danger"] { background: linear-gradient(var(--lt-danger-wash), var(--lt-danger-wash)), var(--lt-surface-1); }
.tr-numbers .lt-chip[data-tone="warn"] { background: linear-gradient(var(--lt-warning-wash), var(--lt-warning-wash)), var(--lt-surface-1); }
.tr-numbers .lt-chip[data-tone="attention"] { background: linear-gradient(var(--lt-glow-wash), var(--lt-glow-wash)), var(--lt-surface-1); }
.tr-numbers .lt-chip[data-tone="ok"] { background: linear-gradient(var(--lt-success-wash), var(--lt-success-wash)), var(--lt-surface-1); }

/* The score block: ladder picture, then the numbers. */
.tr-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--lt-space-5); align-items: center; }
.tr-picture { width: 13rem; }
.tr-ladder { display: block; width: 100%; height: auto; }
.tr-rail { stroke: var(--lt-line-strong); stroke-width: 3; stroke-linecap: round; }
.tr-cell { fill: transparent; stroke: var(--lt-line-strong); stroke-width: 1.5; }
.tr-cell.is-on { fill: var(--lt-teal); stroke: var(--lt-teal); }
.tr-rung-label { fill: var(--lt-text-2); font: var(--lt-step--2) var(--lt-font-ui); }
.tr-numbers { max-width: 34rem; }
.tr-numbers p { margin: var(--lt-space-2) 0 0; }
.tr-range { white-space: nowrap; }
.tr-team { margin: 0; }
.tr-total { margin: 0; font: 600 var(--lt-step-6) / 1 var(--lt-font-display); letter-spacing: -0.03em; color: var(--lt-text-1); }
.tr-of { font-size: var(--lt-step-3); color: var(--lt-text-3); letter-spacing: 0; }
.tr-meaning { color: var(--lt-text-1); }
.tr-next { color: var(--lt-text-2); }
.tr-cta { display: flex; flex-wrap: wrap; gap: var(--lt-space-3); margin: var(--lt-space-5) 0 0; }

/* The form: 10 lines, each a set of 4 sentences to pick from. */
.tr-form { display: grid; gap: var(--lt-space-4); margin-top: var(--lt-space-5); }
.tr-line { margin: 0; padding: var(--lt-space-4); border: 1px solid var(--lt-line); border-radius: var(--lt-radius-card); background: var(--lt-surface-2); display: grid; gap: var(--lt-space-2); }
.tr-line legend { padding: 0 var(--lt-space-2); font: 600 var(--lt-step-1) / var(--lt-leading-tight) var(--lt-font-display); color: var(--lt-text-1); }
.tr-line legend .lt-mono { color: var(--lt-text-3); margin-right: var(--lt-space-2); font-size: var(--lt-step--1); }
.tr-option {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--lt-space-3);
  align-items: start;
  min-height: 44px;
  padding: var(--lt-space-2) var(--lt-space-3);
  border: 1px solid transparent;
  border-radius: var(--lt-radius-control);
  color: var(--lt-text-2);
  cursor: pointer;
}
.tr-option:hover { border-color: var(--lt-line-strong); color: var(--lt-text-1); }
.tr-option input { position: absolute; opacity: 0; pointer-events: none; }
.tr-level {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-radius-pill);
  font: 600 var(--lt-step--1) / 1 var(--lt-font-mono);
  color: var(--lt-text-2);
}
.tr-option:has(input:checked) { border-color: var(--lt-teal); background: var(--lt-teal-wash); color: var(--lt-text-1); }
.tr-option:has(input:checked) .tr-level { background: var(--lt-teal); border-color: var(--lt-teal); color: var(--lt-surface-1); }
.tr-option:has(input:focus-visible) { outline: 2px solid var(--lt-teal); outline-offset: 2px; }
.tr-option > span:last-child { padding-top: var(--lt-space-1); }
.tr-submit { display: grid; gap: var(--lt-space-3); }
.tr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt-space-3); }
.tr-actions .lt-prompt-hint { margin: 0; flex: 1 1 14rem; }

/* First moves, the plan and the line table. */
.tr-moves { list-style: none; margin: var(--lt-space-5) 0 0; padding: 0; display: grid; gap: var(--lt-space-4); counter-reset: move; }
.tr-moves li { padding-left: var(--lt-space-6); position: relative; counter-increment: move; }
.tr-moves li::before {
  content: counter(move);
  position: absolute;
  left: 0;
  top: 0;
  font: 600 var(--lt-step-2) / 1 var(--lt-font-display);
  color: var(--lt-teal);
}
.tr-move-title { margin: 0; font: 600 var(--lt-step-1) / var(--lt-leading-tight) var(--lt-font-display); color: var(--lt-text-1); }
.tr-moves p { margin: var(--lt-space-1) 0 0; color: var(--lt-text-1); }
.tr-moves p.tr-move-now { color: var(--lt-text-2); font-size: var(--tr-text-sm); }
.tr-offer { margin: var(--lt-space-6) 0 0; padding-top: var(--lt-space-4); border-top: 1px solid var(--lt-line); color: var(--lt-text-2); }
.tr-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lt-space-4); margin-top: var(--lt-space-5); }
.tr-month h3 { margin: var(--lt-space-1) 0 0; }
.tr-month > p.lt-muted { margin: var(--lt-space-2) 0 0; }
.tr-steps { list-style: none; margin: var(--lt-space-4) 0 0; padding: 0; display: grid; gap: var(--lt-space-3); font-size: var(--tr-text-md); color: var(--lt-text-1); }
.tr-steps li { display: grid; gap: var(--lt-space-1); padding-top: var(--lt-space-3); border-top: 1px solid var(--lt-line); }
.tr-step-head { display: flex; align-items: center; justify-content: space-between; gap: var(--lt-space-2); color: var(--lt-text-3); }
/* One accent only: a step to start is teal, a step to tighten is ink, a step to keep is muted. */
.tr-status { font: 600 var(--tr-text-sm) / 1 var(--lt-font-ui); color: var(--lt-text-1); }
.tr-status[data-status="start"] { color: var(--lt-teal); }
.tr-status[data-status="keep"] { color: var(--lt-text-3); font-weight: 500; }
/* These tables hold sentences, so their cells wrap instead of scrolling sideways, and a row heading reads as text. */
.tr-table th, .tr-table td { white-space: normal; vertical-align: top; }
.tr-table tbody th { background: none; color: var(--lt-text-1); }
.tr-table td.lt-mono, .tr-now { display: block; margin-top: var(--lt-space-1); font-weight: 400; color: var(--lt-text-2); font-size: var(--tr-text-md); }

/* The role card. */
.tr-role h3 { margin: var(--lt-space-1) 0 0; }
.tr-role-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--lt-space-5); margin-top: var(--lt-space-4); }
.tr-role ul { margin: var(--lt-space-2) 0 0; padding-left: var(--lt-space-4); display: grid; gap: var(--lt-space-2); }
.tr-not { margin: var(--lt-space-3) 0 0; color: var(--lt-text-2); }
.tr-jobs { margin-top: var(--lt-space-2); }
.tr-jobs th { font-size: var(--tr-text-md); font-weight: 600; }
.tr-jobs td { color: var(--lt-text-2); font-size: var(--tr-text-sm); white-space: nowrap; }
.tr-time { margin: var(--lt-space-3) 0 0; }
.tr-note { margin-top: var(--lt-space-5); }
.tr-note p { margin: var(--lt-space-2) 0 0; color: var(--lt-text-2); }
.tr-fill { margin-top: var(--lt-space-4); display: grid; gap: var(--lt-space-4); }
.tr-fill p { margin: 0; display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: end; gap: var(--lt-space-3); }
.tr-blank { display: block; height: 1.5rem; border-bottom: 1px solid var(--lt-line-strong); }

@media (max-width: 860px) {
  .tr-hero, .tr-role-grid { grid-template-columns: minmax(0, 1fr); }
  .tr-plan { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .tr-score { grid-template-columns: minmax(0, 1fr); gap: var(--lt-space-4); }
  .tr-picture { width: min(15rem, 100%); }
  .tr-numbers { order: -1; }
  .tr-cta { flex-direction: column; }
  .tr-cta .lt-btn { width: 100%; justify-content: center; }
}

@media print {
  .lt-page header, .lt-page footer, .lt-page nav, .tr-print-hide, .tr-print-head { display: none !important; }
  .lt-hero::before, .lt-hero::after { display: none; }
  .tr-role, .tr-fill { break-inside: avoid; }
}