/* ============================================================================
   /time-to-value (sub page system v1.1, 9 Oct 2026). A plain page with ONE live figure
   (chapter 02): a dial whose twelve o'clock is the day you connect, the history before
   it already lit. The drawing is TimeToValuePage.Drawing (time-to-value.aspx.vb), one
   square of 0..1000 units; every moment is drawn here from [data-s] on the figure
   (0 on connect, 1 day one, 2 inside thirty days, 3 after that); sub.js only sets it.
   Tokens only (no hex outside tos-site.css). Mobile first; 760 / 1180 breakpoints.
   ============================================================================ */

/* ---- ledger rows with a heading line (as on /trust) ---- */
.sp .lg-x .lg-h { display: block; margin-bottom: 2px; font-weight: 600; }

/* ---- a coda: a framed paragraph, no record key ---- */
.sp.ttv .callout > p:first-child { margin-top: 0; }

/* ---- the questions keep a real h3 inside each summary: it takes the summary's face ---- */
.sp.ttv .qa > summary h3 { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; }

/* ---- the figure ---- */
.sp .ttv-live { margin-top: 36px; }
.sp .ttv-c { width: min(100%, 310px); }
.sp .ttv-c > svg { overflow: hidden; }
.sp .ttv-live.reset, .sp .ttv-live.reset * { transition: none !important; animation: none !important; }

.sp .ttv-live .t-hand { transform-box: view-box; transform-origin: 500px 500px; transition: transform .9s var(--dl-ease); }
.sp .ttv-live .t-hand line { stroke: var(--lp-accent); stroke-width: 22; stroke-linecap: round; }
.sp .ttv-live .t-hub { fill: var(--lp-accent); }
.sp .ttv-live .t-past circle { fill: var(--lp-ink); transform-box: fill-box; transform-origin: center; }
.sp .ttv-live .t-new circle { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s ease; }
.sp .ttv-live .t-src circle { fill: var(--lp-accent); opacity: 0; transition: opacity .35s ease; }
.sp .ttv-live .t-link { stroke: var(--lp-accent); stroke-width: 2px; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .35s ease; }

/* 0 on connect, 1 day one: twelve o'clock is today */
.sp .ttv-live[data-s="0"] .n0, .sp .ttv-live[data-s="1"] .n0 { opacity: 1; }
/* 1 day one: a dot from before you had Timer answers, its line to the hub is the source */
.sp .ttv-live[data-s="1"] .t-src circle, .sp .ttv-live[data-s="1"] .t-link { opacity: 1; }
/* 2 inside thirty days: the hand a month on */
.sp .ttv-live[data-s="2"] .t-hand { transform: rotate(30deg); }
.sp .ttv-live[data-s="2"] .n0, .sp .ttv-live[data-s="2"] .n1 { opacity: 1; }
/* 3 after that: it keeps adding */
.sp .ttv-live[data-s="3"] .t-hand { transform: rotate(150deg); }
.sp .ttv-live[data-s="3"] .t-new circle { opacity: 1; }
.sp .ttv-live[data-s="3"] .n1 { transition-delay: .15s; }
.sp .ttv-live[data-s="3"] .n2 { transition-delay: .35s; }
.sp .ttv-live[data-s="3"] .n3 { transition-delay: .55s; }
.sp .ttv-live[data-s="3"] .n4 { transition-delay: .75s; }
.sp .ttv-live[data-s="3"] .n5 { transition-delay: .95s; }

/* on connect, the history arrives counter-clockwise: read backwards (reduced motion: sub.css
   switches animations off, and the dots are simply there) */
@keyframes ttv-read { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.sp.js .ttv-live[data-s="0"] .t-past circle { animation: ttv-read .5s var(--dl-ease) both; }
.sp.js .ttv-live[data-s="0"] .t-past circle:nth-child(1) { animation-delay: .1s; }
.sp.js .ttv-live[data-s="0"] .t-past circle:nth-child(2) { animation-delay: .25s; }
.sp.js .ttv-live[data-s="0"] .t-past circle:nth-child(3) { animation-delay: .4s; }
.sp.js .ttv-live[data-s="0"] .t-past circle:nth-child(4) { animation-delay: .55s; }
.sp.js .ttv-live[data-s="0"] .t-past circle:nth-child(5) { animation-delay: .7s; }
.sp.js .ttv-live[data-s="0"] .t-past circle:nth-child(6) { animation-delay: .85s; }

/* the legend: what each kind of dot is */
.sp .ttv-lg { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; }
.sp .ttv-lg li { display: flex; align-items: center; gap: 8px; color: var(--lp-muted); }
.sp .ttv-lg .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sp .ttv-lg .sw.is-past { background: var(--lp-ink); }
.sp .ttv-lg .sw.is-new { border: 1.5px solid var(--lp-ink); background: var(--lp-paper); }
.sp .ttv-lg .sw.is-src { background: var(--lp-accent); }

@media (min-width: 760px) {
  .sp .ttv-c { width: min(100%, 360px); }
}
@media (min-width: 1180px) {
  .sp .ttv-live { margin-top: 48px; }
  .sp .ttv-c { width: min(100%, 380px); }
  .sp .ttv-live .ls-x { font-size: 17px; }
}