/* Chart styles: cards on the landing frame, each a chart in one style with its motion spec
   underneath, and a floating dock that switches the company for every chart at once.
   Builds on ../lab/lab.css for the inspector, controls and chart text. */

body { padding-bottom: 104px; } /* room for the dock */

.st-card { display: flex; flex-direction: column; gap: 6px; padding: 30px var(--pad) 34px; }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-name { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 600 24px/1.1 var(--heading-face); letter-spacing: -0.03em; }
.st-name span { font: 400 11px/1 var(--mono); letter-spacing: 0; color: var(--muted); }
.st-kind { margin: 0; font: 400 11px/1.4 var(--mono); text-transform: uppercase; color: var(--muted); }
.st-stage { margin-top: 22px; }
.st-stage .lab-fig { margin: 0; }
.st-motion { margin: 30px 0 0; font: 400 12.5px/1.6 var(--sans); color: var(--muted); max-width: 62ch; }
.st-motion b { margin-right: 6px; font: 400 10.5px/1 var(--mono); text-transform: uppercase; color: var(--text); }
.st-replay { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: var(--line) solid var(--stroke-strong); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.st-replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s cubic-bezier(0.5, 0, 0.2, 1); }
.st-replay:hover svg { transform: rotate(-200deg); }
.st-replay:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.st-dock { position: fixed; z-index: 40; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 5px 5px 5px 16px; border: var(--line) solid var(--stroke-strong); border-radius: 6px; background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 32px -16px rgb(0 0 0 / 0.45); }
.st-dock-l { font: 400 10.5px/1 var(--mono); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.st-dock .seg { flex-wrap: nowrap; border: 0; background: none; padding: 0; }
.st-dock .seg-b { height: 30px; padding: 0 11px; }
.st-dock .seg-pill { height: 30px; }
.st-dock-btn { flex: none; height: 30px; padding: 0 14px; border: 0; border-radius: var(--radius); background: var(--ink); color: var(--on-ink); font: 400 11px/1 var(--mono); text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.st-dock-btn:hover { opacity: 0.86; }
.st-dock-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

@media (max-width: 760px) {
  .st-dock { left: 12px; right: 12px; transform: none; overflow-x: auto; padding-left: 10px; scrollbar-width: none; }
  .st-dock::-webkit-scrollbar { display: none; }
  .st-dock-l { display: none; }
}

/* ---------- 01 dot stack */
.lab-svg .dt { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s, fill 0.45s; }
.lab-svg .dt.in { transform: scale(1); }
.lab-svg.no-tr .dt { transition: none !important; }
.lab-svg .dt.out { transform: translateY(12px) scale(0.3); opacity: 0; transition-duration: 0.38s; transition-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
.lab-svg .dt-col { transition: opacity 0.2s; }
.lab-svg .dots.focus .dt-col:not(.on) { opacity: 0.25; }

/* ---------- 02 level meter */
.lab-svg .seg { fill: var(--seg); transition: fill 0.06s; }
.lab-svg .seg.off { fill: color-mix(in srgb, var(--text) 3.5%, transparent); }
.lab-svg .peak { fill: var(--vermilion); }

/* ---------- 03 capsule, 04 capsule sharp */
.lab-svg .cap { transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1); }
.lab-svg .cap.on { transform: translateY(-4px); }
.lab-svg .cap.on .cap-b { filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.18)); }
.lab-svg .odo { transition: translate 0.25s cubic-bezier(0.3, 0.7, 0.4, 1); } /* the tag lifts with its bar */
.lab-svg .odo.on { translate: 0 -4px; }
.lab-svg .odo-bg { fill: var(--surface); stroke: var(--stroke); stroke-width: 1; transition: x 0.45s, width 0.45s; }
.lab-svg .odo text { font-size: 10.5px; fill: var(--text); font-variant-numeric: tabular-nums; }
.lab-svg .odo-c, .lab-svg .odo-s { transition: transform 0.45s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.3s; }
.lab-svg .odo-r { transition: transform 0.8s cubic-bezier(0.2, 0.75, 0.15, 1); }
.lab-svg .odo.cold .odo-r, .lab-svg .odo.cold .odo-c, .lab-svg .odo.cold .odo-s, .lab-svg .odo.cold .odo-bg { transition: none; }

/* ---------- 05 scan */
.lab-svg .ar-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
.lab-svg .ar-last { stroke: var(--c); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.7; }
.lab-svg .ar-dot { fill: var(--c); stroke: var(--chart-bg); stroke-width: 2; }
.lab-svg .ar-ring { fill: none; stroke: var(--c); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: st-ring 2.2s ease-out infinite; }
@keyframes st-ring { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(3); opacity: 0; } }
.lab-svg .scan { stroke: var(--vermilion); stroke-width: 1; }
.lab-svg .chip rect { fill: var(--c); }
.lab-svg .chip text { fill: var(--chart-bg) !important; font-size: 10.5px; }

/* growth and decline, a diverging pair checked for colour-blind separation in both modes
   (light: the sage and cherry families; dark: lifted and split in lightness, so deutan readers
   still tell them apart) */
:root { --grow: light-dark(#11946D, #30AC86); --fall: light-dark(#B5121B, #B53642); }
.lab-svg .key-up { fill: var(--grow); }
.lab-svg .key-down { fill: var(--fall); }
.lab-svg .pill.grow rect { fill: var(--grow); }
.lab-svg .pill.fall rect { fill: var(--fall); }
.lab-svg .pill.grow text, .lab-svg .pill.fall text { fill: #fff !important; }

/* ---------- 06 candles: filled closed higher than it opened, hollow lower */
.lab-svg .cdl { transition: opacity 0.2s; }
.lab-svg .cdl line { stroke: var(--c); stroke-width: 1.25; }
.lab-svg .cdl rect { stroke: var(--c); stroke-width: 1.25; transition: fill 0.35s; }
.lab-svg .cdl.up rect { fill: var(--c); }
.lab-svg .cdl.dn rect { fill: var(--chart-bg); }
.lab-svg .cdl.live { opacity: 0.5; }
.lab-svg .cdls.focus .cdl:not(.on) { opacity: 0.22; }
.lab-svg .cdls.focus .cdl.live.on { opacity: 0.75; }
.lab-svg .key-filled { fill: var(--c); }
.lab-svg .key-hollow { fill: var(--chart-bg); stroke: var(--c); stroke-width: 1.25; }

/* ---------- 07 waterfall */
.lab-svg .wf { transition: opacity 0.2s; }
.lab-svg .wf rect { transition: fill 0.4s; }
.lab-svg .wf.total rect { fill: var(--logo); } /* graphite: green and red stay growth and decline, whatever the company's colour */
.lab-svg .wf.up rect { fill: var(--grow); }
.lab-svg .wf.down rect { fill: var(--fall); }
.lab-svg .wf-link { stroke: var(--muted); stroke-width: 1; opacity: 0.6; }
.lab-svg .wfs.focus .wf:not(.on) { opacity: 0.28; }

/* ---------- 08 pen */
.lab-svg .pen-path { fill: none; stroke: var(--c); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lab-svg .pen-nib path { fill: var(--text); }
.lab-svg .pen-slit { stroke: var(--chart-bg); stroke-width: 1; }
.lab-svg .pen-guide { stroke: var(--rule); stroke-width: 1; }

/* ---------- 09 echo */
.lab-svg .echo-cur { fill: none; stroke: var(--logo); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } /* ink, so colour means only growth or decline */
.lab-svg .echo-line { fill: none; stroke: var(--muted); stroke-width: 1.25; stroke-linejoin: round; }
.lab-svg .echo-grow { fill: var(--grow); fill-opacity: 0.2; }
.lab-svg .echo-fall { fill: var(--fall); fill-opacity: 0.24; }
.lab-svg .echo-end, .lab-svg .echo-dot { fill: var(--logo); stroke: var(--chart-bg); stroke-width: 2; }
.lab-svg .echo-dot-e { fill: var(--muted); stroke: var(--chart-bg); stroke-width: 2; }
.lab-svg .echo-guide { stroke: var(--rule); stroke-width: 1; }

@media (prefers-reduced-motion: reduce) {
  .lab-svg .dt, .lab-svg .odo-r, .lab-svg .odo-c, .lab-svg .odo-s { transition: none; }
  .lab-svg .ar-ring { animation: none; }
}