/* Talous component styles.
   Every value here is lifted verbatim from the live marketing site (site.css)
   and the product surfaces it draws. Class names carry a tls- prefix so they
   cannot collide with a consuming project's own .btn / .card / .chip.

   Two colour rules from the brand guideline are easy to lose and are enforced
   in this file rather than left to discipline:
   1. ONE EMBER ELEMENT PER VIEWPORT. Only .tls-btn-primary and the lit stretch
      of .tls-linetrack paint ember. Nothing else in this file does.
   2. THE THREE STATUS HUES ONLY EVER TOUCH A NUMBER. Never a border, chip,
      heading or icon. Chips are ink-on-sunken and separate by weight. */

/* ── Button ─────────────────────────────────────────────────────────────── */
.tls-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--control-h-lg);padding:0 var(--space-7);border-radius:var(--radius-md);border:1px solid transparent;font-family:var(--font-sans);font-size:var(--size-small);font-weight:var(--weight-medium);text-decoration:none;cursor:pointer;white-space:nowrap;transition:var(--transition-color),transform var(--dur-fast) var(--ease-standard)}
.tls-btn-primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.tls-btn-primary:hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.tls-btn-primary:active{background:var(--action-primary-bg-active);transform:translateY(var(--press-translate))}
.tls-btn-secondary{background:var(--action-secondary-bg);color:var(--action-secondary-fg);border-color:var(--action-secondary-border)}
.tls-btn-secondary:hover{background:var(--action-secondary-bg-hover);color:var(--action-secondary-fg)}
.tls-btn-secondary:active{transform:translateY(var(--press-translate))}
.tls-btn-ghost{background:transparent;color:var(--action-ghost-fg);padding:0 var(--space-4)}
.tls-btn-ghost:hover{background:var(--action-ghost-bg-hover);color:var(--text-primary)}
.tls-btn-sm{height:var(--control-h);padding:0 var(--space-6)}
.tls-btn[disabled],.tls-btn[aria-disabled="true"]{background:var(--action-disabled-bg);color:var(--action-disabled-fg);border-color:transparent;cursor:not-allowed;pointer-events:none}
/* The arrow is drawn from currentColor, not an icon font — it inherits the
   button's colour in every state and nudges 3px on hover. */
.tls-btn .tls-arw{display:block;width:14px;height:1px;background:currentColor;position:relative;transition:transform var(--dur-fast) var(--ease-standard)}
.tls-btn .tls-arw::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.tls-btn:hover .tls-arw{transform:translateX(3px)}
/* On a pine band the secondary button goes transparent with a band border. */
.tls-band .tls-btn-secondary{background:transparent;color:var(--text-on-dark);border-color:var(--border-on-dark)}
.tls-band .tls-btn-secondary:hover{background:var(--surface-raised-on-dark);color:var(--text-on-dark)}
.tls-band .tls-btn-ghost{color:var(--band-muted)}
.tls-band .tls-btn-ghost:hover{background:var(--surface-raised-on-dark);color:var(--text-on-dark)}
.tls-btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5)}

/* ── Chip ───────────────────────────────────────────────────────────────── */
.tls-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);padding:4px 10px;border-radius:var(--radius-pill);white-space:nowrap;color:var(--text-secondary);background:var(--surface-sunken)}
.tls-chip-strong{color:var(--text-primary)}
.tls-chip-outline{background:transparent;border:1px solid var(--border-on-dark);color:var(--band-muted);padding:3px 9px;font-size:var(--size-micro);letter-spacing:.1em}
/* The one exception to "ember only on the CTA": a stop on the line that runs
   today. It is the lit stretch, and it is the only ember in its viewport. */
.tls-chip-lit{border-color:var(--action);color:var(--action)}

/* ── Card / tile ────────────────────────────────────────────────────────── */
.tls-card{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-card);overflow:hidden;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.tls-card h3{font-size:var(--size-h3)}
.tls-card p{font-size:var(--size-small);line-height:1.55;color:var(--text-secondary)}
.tls-card-dark{background:var(--surface-band);border-color:var(--surface-band);color:var(--text-on-dark)}
.tls-card-dark h3{color:var(--text-on-dark)}
.tls-card-dark p{color:var(--band-muted)}
.tls-card-flat{border-radius:var(--radius-lg);padding:var(--space-6)}
@media (hover:hover){.tls-card-lift:hover{transform:translateY(var(--hover-lift));box-shadow:var(--shadow-md)}}

/* ── Stat row — a label and a figure inside a card ──────────────────────── */
.tls-rows{border:1px solid var(--border-hairline);border-radius:var(--radius-lg);overflow:hidden}
.tls-card-dark .tls-rows{border-color:var(--border-on-dark);background:color-mix(in oklab, #FFFFFF 5%, transparent)}
.tls-row{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border-hairline);font-size:var(--size-small)}
.tls-row:last-child{border-bottom:0}
.tls-card-dark .tls-row{border-bottom-color:var(--border-on-dark)}
.tls-row-v{margin-left:auto;font-size:var(--size-caption);color:var(--text-secondary);white-space:nowrap}
.tls-card-dark .tls-row-v{color:var(--band-muted)}

/* ── Metric ─────────────────────────────────────────────────────────────── */
.tls-metric-l{font-family:var(--font-mono);font-size:var(--size-micro);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-secondary)}
.tls-metric-v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-weight:var(--weight-medium);letter-spacing:-.01em;line-height:1.1;color:var(--text-primary)}
.tls-metric-md .tls-metric-v{font-size:var(--size-metric-md)}
.tls-metric-lg .tls-metric-v{font-size:var(--size-metric-lg)}
.tls-metric-xl .tls-metric-v{font-size:clamp(28px,3.2vw,var(--size-metric-xl));letter-spacing:-.02em;line-height:1}
.tls-metric-md .tls-metric-v,.tls-metric-lg .tls-metric-v{margin-top:var(--space-3)}
.tls-metric-xl .tls-metric-v{margin-top:var(--space-5)}
.tls-card-dark .tls-metric-l{color:var(--band-muted)}
.tls-card-dark .tls-metric-v{color:var(--text-on-dark)}
/* Status hue on the figure only. Never on the row, the chip or the label. */
.tls-v-ok{color:var(--status-on-target)}
.tls-v-watch{color:var(--status-needs-look)}
.tls-v-losing{color:var(--status-losing)}

/* ── App frame — the product surface ────────────────────────────────────── */
/* A light surface can sit inside a .tls-band, so it restates its own colour —
   inherited, everything on it comes through at --text-on-dark and goes
   near-white on white. */
.tls-app{border-radius:var(--radius-frame);border:1px solid var(--border-default);background:var(--surface-card);box-shadow:var(--shadow-lg);overflow:hidden;text-align:left;color:var(--text-primary)}
.tls-app-bar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-7);border-bottom:1px solid var(--border-hairline)}
.tls-app-mark{width:18px;height:18px;margin-right:var(--space-3)}
.tls-app-tab{font-family:var(--font-mono);font-size:var(--size-micro);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-secondary);padding:5px 10px;border-radius:var(--radius-sm);background:none;border:0;cursor:pointer;transition:var(--transition-color)}
.tls-app-tab:hover{color:var(--text-primary)}
.tls-app-tab.is-on{color:var(--text-primary);background:var(--surface-sunken)}
.tls-app-when{margin-left:auto;font-family:var(--font-mono);font-size:var(--size-micro);color:var(--text-secondary)}
.tls-app-body{padding:var(--space-7);background:var(--surface-sunken);display:flex;flex-direction:column;gap:var(--space-6)}
.tls-app-cap{display:block;margin-top:var(--space-6);text-align:center;max-width:none}

/* ── KPI grid ───────────────────────────────────────────────────────────── */
.tls-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.tls-kpi{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);padding:var(--space-6)}
@media (max-width:760px){.tls-kpis{grid-template-columns:repeat(2,1fr)}}

/* ── Queue ──────────────────────────────────────────────────────────────── */
.tls-queue{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);overflow:hidden}
.tls-queue-h{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-7);border-bottom:1px solid var(--border-hairline)}
.tls-queue-h .tls-chip{margin-left:auto}
.tls-qrow{display:grid;grid-template-columns:1fr auto auto;gap:var(--space-4) var(--space-6);align-items:center;padding:var(--space-6) var(--space-7);border-bottom:1px solid var(--border-hairline)}
.tls-qrow:last-child{border-bottom:0}
.tls-q-n{font-size:var(--size-small);font-weight:var(--weight-medium);line-height:1.4}
.tls-q-n small{display:block;font-size:var(--size-caption);font-weight:var(--weight-regular);color:var(--text-secondary);margin-top:2px}
.tls-q-a{font-size:var(--size-small);white-space:nowrap;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
@media (max-width:640px){.tls-qrow{grid-template-columns:1fr auto;padding:var(--space-5) var(--space-6)}.tls-q-n{grid-column:1/-1}}

/* ── Record row — what it predicted against what happened ───────────────── */
.tls-rrow{padding:var(--space-7);border-bottom:1px solid var(--border-hairline)}
.tls-rrow:last-child{border-bottom:0}
.tls-r-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
.tls-r-id{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-secondary);flex:none}
.tls-r-t{font-size:var(--size-small);font-weight:var(--weight-medium)}
.tls-r-h .tls-chip{margin-left:auto}
.tls-r-p,.tls-r-a{margin-top:var(--space-4);font-size:var(--size-small);line-height:1.5;color:var(--text-secondary);max-width:66ch}
/* The outcome sits under a short rule so predicted and actual read as a pair. */
.tls-r-a{position:relative;padding-left:var(--space-8)}
.tls-r-a::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:1px;background:var(--border-strong)}
.tls-r-miss{color:var(--text-primary)}
@media (max-width:640px){.tls-rrow{padding:var(--space-6)}.tls-r-id{width:100%}}

/* ── Decision record ────────────────────────────────────────────────────── */
.tls-record{border-left:2px solid var(--action);background:var(--surface-raised-on-dark);border-radius:var(--radius-md);padding:var(--space-7);color:var(--text-on-dark)}
.tls-record .ep-eyebrow{color:var(--band-muted)}
.tls-record p{margin-top:var(--space-5);color:var(--text-on-dark)}
/* Pushed back: the same record without the ember edge — nothing was actioned. */
.tls-record-rejected{border-left-color:var(--border-on-dark)}

/* ── Band — the one dark section per page ───────────────────────────────── */
.tls-band{position:relative;overflow:clip;background:var(--surface-band);color:var(--text-on-dark)}
/* The one deep-green surface. It belongs to the thing that is true — the
   record, the profit picture, what the system has learned. Never a feature list. */
.tls-band-green{--surface-band:var(--green-900);--surface-raised-on-dark:var(--green-700);background:var(--green-900)}
.tls-band h1,.tls-band h2,.tls-band h3{color:var(--text-on-dark)}
.tls-band .t-body,.tls-band .t-lede{color:var(--text-muted-on-dark)}
.tls-band .ep-eyebrow,.tls-band .t-illus{color:var(--band-muted)}
.tls-band a:not(.tls-btn){color:var(--ember-300)}
.tls-band>*:not(.tls-mark-bleed){position:relative;z-index:1}

/* ── Section head ───────────────────────────────────────────────────────── */
/* Two heads, alternating. Centred is reserved for the moments that earn it;
   split takes the rest — one page running the same head eight times means
   nothing is emphasised because everything is. */
.tls-head-c{max-width:760px;margin:0 auto var(--space-13);text-align:center}
/* Base sets a reading measure on every p, which in a centred head leaves the
   eyebrow centred inside a narrower box than the headline — visibly off-axis.
   Centred heads take the full column. */
.tls-head-c .ep-eyebrow{display:block;max-width:none;margin:0 auto var(--space-6)}
.tls-head-c .t-mega,.tls-head-c .t-hero{margin-inline:auto}
.tls-head-c .t-lede{margin:var(--space-7) auto 0}
.tls-head-s{display:grid;grid-template-columns:minmax(110px,.5fr) minmax(0,3fr);gap:var(--space-6) var(--space-9);align-items:start;margin-bottom:var(--space-13);text-align:left}
/* The eyebrow sits on the headline's first baseline, so it reads as a margin
   note against the line of type rather than a label floating above it. */
.tls-head-s .ep-eyebrow{display:block;padding-top:.5em}
.tls-head-s .t-mega{grid-column:2;max-width:18ch}
.tls-head-s .t-lede{grid-column:2;margin-top:0;max-width:52ch}
@media (max-width:820px){.tls-head-s{grid-template-columns:1fr;gap:var(--space-6)}.tls-head-s .t-mega,.tls-head-s .t-lede{grid-column:1}.tls-head-s .ep-eyebrow{padding-top:0}}

/* ── The line ───────────────────────────────────────────────────────────── */
.tls-line-zones{list-style:none;margin:0 0 var(--space-9);padding:0;display:grid;grid-template-columns:var(--cols)}
.tls-line-zone{display:flex;flex-direction:column;gap:9px;padding-right:var(--space-8)}
.tls-line-zone span{font-family:var(--font-mono);font-size:var(--size-micro);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--band-muted)}
.tls-line-zone i{display:block;height:1px;background:var(--border-on-dark)}
.tls-line-zone-live span{color:var(--action)}
.tls-line-zone-live i{background:var(--action)}
.tls-linetrack{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:var(--cols, repeat(var(--stops,5),1fr))}
.tls-stop{position:relative;padding:0 var(--space-5)}
/* Each stop draws its own column-wide rail segment behind its node, so the lit
   run ends exactly midway between the last live stop and the first dated one. */
.tls-stop::before{content:"";position:absolute;top:11px;left:0;right:0;height:2px;background:var(--border-on-dark)}
.tls-stop.is-on::before{background:var(--action)}
.tls-stop:first-child::before{left:50%}
.tls-stop:last-child::before{right:50%}
.tls-node{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0 auto;border-radius:7px;border:2px solid color-mix(in oklab, #FFFFFF 22%, transparent);background:var(--surface-band)}
.tls-stop.is-on .tls-node{border-color:var(--action);background:var(--action)}
.tls-node i{display:none;width:8px;height:8px;border-radius:2px;background:var(--surface-band)}
.tls-stop.is-on .tls-node i{display:block}
.tls-stopbody{margin-top:var(--space-7);text-align:center}
/* Every title reserves two lines. Sizing to the shortest title means the one
   that wraps drags its chip and description out of rank, and which title wraps
   changes with the viewport — so the row is equalised rather than chased. */
.tls-stopbody h3{font-size:var(--size-h3);color:var(--text-on-dark);text-wrap:pretty;min-height:2.7em}
.tls-stopbody .tls-chip-outline{margin-top:var(--space-4)}
.tls-stopbody p{margin:var(--space-5) auto 0;max-width:24ch;font-size:var(--size-small);line-height:1.5;color:var(--band-muted)}
/* The destination. Same rail, same node, but the body becomes an ember-tinted
   panel — the payoff sits at the end of the line rather than in a box below it. */
.tls-stop-end .tls-node{border-color:var(--action);background:transparent}
.tls-stop-end .tls-node i{display:block;background:var(--action)}
.tls-stop-end .tls-stopbody{margin-top:var(--space-7);padding:var(--space-6) var(--space-7) var(--space-7);text-align:left;border:1px solid color-mix(in oklab, var(--action) 42%, transparent);background:color-mix(in oklab, var(--action) 8%, transparent);border-radius:var(--radius-xl)}
.tls-stop-end .tls-stopbody h3{margin-top:var(--space-4);min-height:0;font-size:var(--size-h3);letter-spacing:var(--tracking-heading)}
.tls-stop-end .tls-stopbody p{margin:var(--space-5) 0 0;max-width:38ch}
/* When the destination IS the profit figure, it takes green rather than ember —
   ember is the action colour and arriving at your own money is not an action. */
.tls-stop-end-green .tls-node{border-color:var(--sage);background:transparent}
.tls-stop-end-green .tls-node i{background:var(--sage)}
.tls-stop-end-green .tls-stopbody{border-color:color-mix(in oklab, var(--sage) 58%, transparent);background:color-mix(in oklab, var(--sage) 14%, transparent)}
.tls-stop-end-green .tls-stopbody h3{color:var(--green-300)}
@media (max-width:880px){
  .tls-line-zones{display:none}
  .tls-linetrack{grid-template-columns:1fr}
  .tls-stop-end .tls-stopbody{margin-left:calc(var(--space-10)*-1)}
  .tls-stopbody h3{min-height:0}
  .tls-stop{padding:0 0 0 var(--space-10)}
  .tls-stop::before{top:0;bottom:0;left:11px;right:auto;width:2px;height:auto}
  .tls-stop:first-child::before{top:11px;left:11px}
  .tls-stop:last-child::before{top:0;bottom:auto;height:11px}
  .tls-node{position:absolute;left:0;top:0;margin:0}
  .tls-stopbody{margin-top:0;padding-bottom:var(--space-9);text-align:left}
  .tls-stopbody p{margin-inline:0;max-width:46ch}
}

@media (max-width:1060px) and (min-width:881px){
  .tls-linetrack{grid-template-columns:repeat(var(--stops,5),1fr)}
  .tls-line-zones{grid-template-columns:repeat(var(--stops,5),1fr)}
  .tls-line-zone:last-child{display:none}
  .tls-stop-end{grid-column:1/-1;padding:0}
  .tls-stop-end::before{display:none}
  .tls-stop:nth-last-child(2)::before{right:50%}
  .tls-stop-end .tls-node{display:none}
  .tls-stop-end .tls-stopbody{margin-top:var(--space-9)}
  .tls-stop-end .tls-stopbody p{max-width:60ch}
}

/* ── Terminus — the panel that closes the line's argument ───────────────── */
.tls-terminus{margin-top:var(--space-12);padding:var(--space-9) var(--space-8);border:1px solid color-mix(in oklab, var(--action) 52%, transparent);background:color-mix(in oklab, var(--action) 7%, transparent);border-radius:var(--radius-xl);text-align:center}
.tls-terminus .ep-eyebrow{display:block;color:var(--band-muted)}
.tls-terminus h3{margin-top:var(--space-4);font-size:var(--size-h1);letter-spacing:var(--tracking-display)}
.tls-terminus p{margin:var(--space-5) auto 0;max-width:52ch;font-size:var(--size-small);color:var(--band-muted)}

/* ── Timeline ───────────────────────────────────────────────────────────── */
.tls-tline{list-style:none;padding:0;margin:var(--space-8) 0 0;display:flex;flex-direction:column;justify-content:space-between;flex:1}
.tls-tline li{display:grid;grid-template-columns:104px 1fr;gap:var(--space-6);padding:var(--space-6) 0;border-bottom:1px solid var(--border-hairline)}
.tls-tline li:last-child{border-bottom:0;padding-bottom:0}
/* Ink, not ember. Four ember timestamps beside an ember CTA would be five
   ember elements in one viewport. */
.tls-tline .tls-w{font-family:var(--font-mono);font-size:var(--size-caption);letter-spacing:.06em;color:var(--text-primary);padding-top:2px}
.tls-tline .tls-d{font-size:var(--size-small);line-height:1.55}
@media (max-width:760px){.tls-tline li{grid-template-columns:1fr;gap:var(--space-2)}}

/* ── Rule list ──────────────────────────────────────────────────────────── */
/* A rule, not a tick: a row of ember ticks beside an ember CTA would be six
   ember elements in one viewport. The marker is a 14px hairline. */
.tls-rulelist{list-style:none;padding:0;margin:var(--space-8) 0 0;display:flex;flex-direction:column;gap:var(--space-5)}
.tls-rulelist li{display:flex;gap:var(--space-5);font-size:var(--size-small);line-height:1.5;color:var(--text-secondary)}
.tls-rulelist .tls-ck{flex:none;width:14px;height:1px;margin-top:11px;background:var(--border-strong)}
.tls-rulelist .tls-date{flex:none;min-width:44px;font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-primary)}
.tls-rulelist-mono li{font-family:var(--font-mono);font-size:var(--size-caption);line-height:1.5}
.tls-band .tls-rulelist li,.tls-card-dark .tls-rulelist li{color:var(--band-muted)}
.tls-band .tls-rulelist .tls-ck,.tls-card-dark .tls-rulelist .tls-ck{background:var(--band-muted)}
.tls-band .tls-rulelist .tls-date,.tls-card-dark .tls-rulelist .tls-date{color:var(--text-on-dark)}

/* ── Accordion ──────────────────────────────────────────────────────────── */
.tls-q{border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card);margin-bottom:var(--space-4);overflow:hidden;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.tls-q summary{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-7);font-size:var(--size-body);font-weight:var(--weight-medium);cursor:pointer;list-style:none}
.tls-q summary::-webkit-details-marker{display:none}
/* The marker rotates rather than swapping glyph, so open/close is one
   continuous gesture instead of two states. */
.tls-q summary::after{content:"+";margin-left:auto;flex:none;font-family:var(--font-mono);font-size:19px;line-height:1;color:var(--text-secondary);transition:transform var(--dur-base) var(--ease-standard)}
.tls-q[open] summary::after{transform:rotate(45deg)}
.tls-q summary:hover{background:var(--surface-sunken)}
/* <details> cannot animate its own height. grid-template-rows 0fr→1fr animates
   to auto honestly, and degrades to an instant open where unsupported. */
.tls-q>.tls-a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-standard)}
.tls-q[open]>.tls-a-wrap{grid-template-rows:1fr}
.tls-q>.tls-a-wrap>.tls-a{overflow:hidden;min-height:0;padding:0 var(--space-7) var(--space-7);font-size:var(--size-small);line-height:1.6;color:var(--text-secondary);max-width:62ch}
@media (prefers-reduced-motion:reduce){.tls-q>.tls-a-wrap{transition:none}}

/* ── Shell helpers ──────────────────────────────────────────────────────── */
.tls-wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter)}
.tls-wrap-narrow{max-width:var(--page-narrow);margin:0 auto;padding:0 var(--page-gutter)}
.tls-sec{position:relative;padding:var(--space-15) 0}
.tls-sec-tight{padding:var(--space-13) 0}