/*
 * Traffic Light: the verdict, the diagnostic map, the pivots, the progress list and "How this
 * was checked". Shared by the member page and the public teaser (/tools/traffic-light/).
 * Colours come from /css/tokens.css; the lamp colours are the owner's prototype.
 *
 * Light is never shown by colour alone: every light has a word, an icon shape (circle, triangle,
 * diamond, dashed circle) and a lamp position. Text is never coloured by the light.
 * Motion (the owner's prototype, direction E, approved 27 Sep 2026): while the check runs the
 * lamps pass a soft glow red, amber, green; when the result is in they go dark for 0.4 s, the
 * chosen lamp settles over 0.7 s, and 0.52 s in the verdict and headline rise 8 px, then the
 * map rows 90 ms apart, then the pivots. Only opacity and transform move: a lamp's light is a
 * layer that fades. prefers-reduced-motion shows the end state with no transitions.
 */

:root {
  --tl-go: #3f7d4f;
  --tl-wait: #c28a2a;       /* lamp fill */
  --tl-wait-ink: #a8751f;   /* map icons: 3.95:1 on --card (#c28a2a is 2.97:1) */
  --tl-stop: #a2432f;
  --tl-off: #ebe5d7;
  --tl-settle: cubic-bezier(.2, .7, .3, 1);
}

/* hidden always hides, whatever display a class sets (site.css has no such rule) */
.tl [hidden] { display: none !important; }

/* Icons */
.tl-icon { display: inline-block; flex: 0 0 auto; vertical-align: -0.15em; }
.tl-icon-green { fill: var(--tl-go); }
.tl-icon-amber { fill: var(--tl-wait-ink); }
.tl-icon-red { fill: var(--tl-stop); }
.tl-icon-not_assessed { fill: none; }
.tl-icon-hollow { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-dasharray: 3 2.2; }

/* Lamp housing: Red · Amber · Green */
.tl-lamps { display: inline-flex; gap: 10px; padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--paper); flex: 0 0 auto; }
.tl-lamp {
  --c: var(--tl-off);
  position: relative;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tl-off);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .14);
}
.tl-lamp-red { --c: var(--tl-stop); }
.tl-lamp-amber { --c: var(--tl-wait); }
.tl-lamp-green { --c: var(--tl-go); }
/* The light: a layer in the lamp's colour, with its glow, that fades in and out. */
.tl-lamp::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent), 0 0 18px 2px color-mix(in srgb, var(--c) 40%, transparent);
  opacity: 0; transition: opacity .7s var(--tl-settle);
}
.tl-lamp.on::before { opacity: 1; }
.tl-lamp .tl-glyph { position: relative; fill: var(--card); stroke: none; }
.tl-lamp .tl-glyph .tl-icon-hollow { stroke: var(--card); }

/* While the check runs: one lamp at a time, red, amber, green, 0.26 s each, with a softer glow. */
.tl-progress-lamps { margin: 2px 0 12px; }
.tl-lamps.running .tl-lamp::before {
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--c) 35%, transparent);
  transition: none; animation: tl-cycle .78s ease infinite;
}
.tl-lamps.running .tl-lamp-amber::before { animation-delay: .26s; }
.tl-lamps.running .tl-lamp-green::before { animation-delay: .52s; }
@keyframes tl-cycle {
  0%, 53.8%, 100% { opacity: 0; }
  20.5%, 33.3% { opacity: 1; }
}

/* Verdict */
.tl-verdict { position: relative; }
.tl-verdict-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 10px; }
.tl-verdict-status { flex: 1 1 200px; min-width: 0; }
h2.tl-word { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--ink); }
h2.tl-word:focus { outline: none; }
h2.tl-word:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.tl-subline { margin: 2px 0 0; font-size: 15px; color: var(--muted); }
.tl-headline { font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--text); margin: 6px 0 10px; max-width: 60ch; }
.tl-meta, .tl-caveat, .tl-red-note, .tl-rule-note { font-size: 13px; color: var(--muted); margin: 4px 0; }
.tl-caveat { font-weight: 500; color: var(--text); }
.tl-facts { font-size: 15px; line-height: 1.55; color: var(--text); margin: 0 0 10px; max-width: 60ch; }
.tl-bridge { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.tl-elapsed { font-variant-numeric: tabular-nums; margin: -6px 0 10px; }
.tl-partial { font-size: 13.5px; color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: 8px; padding: 9px 12px; margin: 0 0 12px; }

/* The reveal. Without JavaScript or with reduced motion everything is simply there. */
.tl-animate .tl-reveal { opacity: 0; transform: translateY(8px); }
.tl-animate.tl-settled .tl-reveal { opacity: 1; transform: none; transition: opacity .65s var(--tl-settle), transform .65s var(--tl-settle); transition-delay: .52s; }
.tl-animate.tl-settled .tl-map .tl-reveal { transition-delay: calc(.76s + var(--i, 0) * 90ms); }
.tl-animate.tl-settled .tl-pivots.tl-reveal { transition-delay: calc(.82s + var(--n, 6) * 90ms); }

/* Map */
.tl-map-section { margin: 20px 0; }
.tl-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 6px 0 10px; font-size: 12.5px; color: var(--muted); }
.tl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tl-disclosure { margin: 6px 0 12px; font-size: 13.5px; }
.tl-disclosure > summary { cursor: pointer; color: var(--ink); min-height: 44px; display: flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 2px; list-style: none; }
.tl-disclosure > summary::-webkit-details-marker { display: none; }
.tl-disclosure > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); flex: 0 0 auto; transition: transform .2s; }
.tl-disclosure[open] > summary::before { transform: rotate(45deg); }
.tl-all-rules h4 { font-size: 13.5px; margin: 12px 0 4px; }
.tl-all-rules ul { margin: 0; padding-left: 18px; }
.tl-all-rules li { margin: 2px 0; }
.tl-map { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.tl-row { border-bottom: 1px solid var(--hairline); }
.tl-row-head { margin: 0; font-size: inherit; font-weight: inherit; }
.tl-row-toggle {
  width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px;
  padding: 8px 2px; background: none; border: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--text);
}
.tl-row-toggle::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0 6px; flex: 0 0 auto; transition: transform .2s; }
.tl-row-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
.tl-row-name { font-size: 15px; font-weight: 500; flex: 1 1 auto; min-width: 0; }
.tl-row-status { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: right; }
.tl-panel { padding: 0 2px 14px 26px; }
.tl-checks { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.tl-reason { font-size: 15px; margin: 0 0 8px; }
.tl-no-receipt, .tl-rule, .tl-numbers { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.tl-rule { border-left: 2px solid var(--gold-line); padding-left: 8px; }

/* Receipts */
.tl-receipts { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.tl-receipt-link { display: block; min-height: 44px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--card); color: var(--text); text-decoration: none; position: relative; padding-right: 28px; }
a.tl-receipt-link:hover { border-color: var(--delta); }
.tl-receipt-line { display: block; font-size: 12.5px; color: var(--muted); }
.tl-receipt-title { display: block; font-family: var(--serif); font-size: 15px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tl-receipt-input .tl-receipt-line { padding: 6px 0; }
.tl-ext { position: absolute; right: 10px; top: 8px; color: var(--muted); font-size: 13px; }
.tl-flag { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: 10px; padding: 0 8px; margin: 2px 6px 2px 0; }
.tl-more { min-height: 44px; }

/* Chart: bars in ink, never traffic colours */
.tl-chart { margin: 8px 0 10px; }
.tl-chart-title { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.tl-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; height: 120px; }
.tl-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.tl-bar-value { font-size: 11.5px; color: var(--text); margin-bottom: 2px; }
.tl-bar { display: block; width: 70%; max-width: 36px; background: color-mix(in srgb, var(--ink) 60%, transparent); border-radius: 3px 3px 0 0; }
.tl-bar-year { font-size: 11px; color: var(--muted); margin-top: 4px; text-align: center; line-height: 1.2; }

/* Pivots */
.tl-pivots { margin: 20px 0; }
.tl-pivot-list { list-style: none; margin: 0; padding: 0; counter-reset: pivot; display: grid; gap: 12px; }
.tl-pivot { counter-increment: pivot; position: relative; padding-left: 44px !important; }
.tl-pivot::before { content: counter(pivot); position: absolute; left: 14px; top: 18px; font-family: var(--serif); font-size: 18px; color: var(--ink); }
.tl-pivot-title { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.tl-pivot-why { margin: 0 0 6px; font-size: 14.5px; }
.tl-pivot-fixes { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.tl-check-version { margin-top: 6px; }
.tl-prospero { margin-top: 12px; }

/* How this was checked */
.tl-how > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; }
.tl-how > summary::-webkit-details-marker { display: none; }
.tl-how > summary::after { content: "Show"; margin-left: auto; font-size: 13px; color: var(--ink); text-decoration: underline; }
.tl-how[open] > summary::after { content: "Hide"; }
.tl-how-title { margin: 0 !important; }
.tl-how h3 { font-size: 14.5px; margin: 16px 0 6px; }
.tl-search { border-top: 1px solid var(--hairline); padding: 8px 0; }
.tl-search-label { margin: 0 0 4px; font-size: 13.5px; font-weight: 500; }
.tl-search-term { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 10px; }
.tl-search-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 4px 0 0; font-size: 13.5px; }
.tl-search-actions a, .tl-search-actions button { min-height: 44px; display: inline-flex; align-items: center; }
.tl-dropped { font-size: 13px; color: var(--muted); }

/* Progress */
.tl-steps { list-style: none; margin: 10px 0; padding: 0; font-size: 14px; }
.tl-step { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; color: var(--muted); }
.tl-step-mark { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 1px solid var(--field-border); position: relative; }
.tl-step[data-state="active"] { color: var(--text); font-weight: 500; }
.tl-step[data-state="active"] .tl-step-mark { border-color: transparent; }
.tl-step[data-state="active"] .tl-step-mark::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); }
.tl-step[data-state="done"] { color: var(--text); }
.tl-step[data-state="done"] .tl-step-mark { border-color: var(--ink); background: var(--ink); }
.tl-step[data-state="done"] .tl-step-mark::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tl-step[data-state="skipped"] .tl-step-mark { border: none; }
.tl-step[data-state="skipped"] .tl-step-mark::after { content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background: var(--muted); }
.tl-step-body { display: flex; flex-direction: column; min-width: 0; }
.tl-step-note { font-size: 13px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.tl-longest { margin: 4px 0 8px; }

/* Clarify */
.tl-clarify-title { font-weight: 600; margin: 0 0 4px; }
.tl-chips { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.tl-chip { text-align: left; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 14.5px; color: var(--ink); background: var(--card); border: 1px solid var(--field-border); border-radius: 10px; cursor: pointer; }
.tl-chip:hover { border-color: var(--delta); }

/* Your idea */
.tl-idea-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }
.tl-idea-title { font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; font-family: var(--sans) !important; font-weight: 500 !important; margin: 0 !important; }
.tl-idea-text { margin: 6px 0; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
/* On phones the idea shows 3 lines (2 while the check runs), with Show all (spec 9.1). */
.tl-idea-more { display: inline-flex; align-items: center; min-height: 44px; margin: -4px 0 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--ink); background: none; border: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tl-idea-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 619.98px) {
  .tl-idea-text.tl-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .tl-idea-text.tl-clamp.tl-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
}
@media (min-width: 620px) {
  .tl-idea .tl-idea-more { display: none; }
}
.tl-read-as { font-size: 13px; color: var(--muted); margin: 4px 0 0; overflow-wrap: anywhere; }

@media (min-width: 620px) {
  .tl-row-toggle { display: grid; grid-template-columns: 20px 13.5rem 1fr 16px; }
  .tl-row-status { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-lamp, .tl-lamp::before, .tl-reveal, .tl-row, .tl-row-toggle::after { transition: none !important; animation: none !important; }
  .tl-animate .tl-reveal { opacity: 1 !important; transform: none !important; }
  .tl-lamps.running .tl-lamp::before { animation: none !important; }
}

@media print {
  .tl-map .tl-panel[hidden] { display: block !important; }
  .tl-row-toggle::after, .tl-more, .tl-check-version, .tl-copy, .tl-actions, .tl-progress, .tl-progress-done, .tl-history, .tl-form, .tl-idea-more { display: none !important; }
  .tl-idea-text.tl-clamp { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
  .tl-receipt-link { border: none; padding: 2px 0; min-height: 0; }
  .tl-lamp, .tl-lamp::before { box-shadow: none !important; }
  .tl-lamp { border: 1px solid #000; }
  .tl-animate .tl-reveal { opacity: 1 !important; transform: none !important; }
}