/* AI work system case (8.10): live graphics on the light page, in the site's tokens. Meaning colors: red = what broke / gives up, lime = decision / keeps. Everything else is ink and grey. */
.window.live, .hero-fig .window.live { background: var(--color-surface-page); padding: var(--s4); }
.gh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.gh h3, .gh .gh-title { margin: 0; font-size: var(--t-20); line-height: 1.3; font-weight: 600; font-family: var(--font-head); letter-spacing: -0.01em; text-wrap: balance; }
.gh p { margin: 4px 0 0; font-size: var(--t-14); color: var(--color-content-secondary); }
.legend { display: flex; flex-wrap: wrap; gap: 8px var(--s3); font-size: var(--t-14); color: var(--color-content-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.legend i { width: 18px; height: 3px; border-radius: 3px; background: var(--color-content-primary); }
.legend i.dash { height: 0; background: none; border-top: 2px dashed #9d9da3; border-radius: 0; }
.legend b { font: 500 13px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--color-content-primary); }

/* svg graphics */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-body); }
.chart .ax { font-size: 12px; fill: var(--color-content-secondary); }
.chart .ax.faint { fill: var(--color-content-muted); font-size: 10.5px; }
.chart .grid { stroke: var(--color-line); stroke-width: 1; stroke-dasharray: 2 5; }
.chart .base { stroke: var(--color-line); stroke-width: 1; }
.chart .load { fill: none; stroke: var(--color-content-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .total { fill: none; stroke: #9d9da3; stroke-width: 1.75; stroke-dasharray: 5 5; stroke-linecap: round; stroke-linejoin: round; }
.chart .tip { fill: #fff; stroke: var(--color-line); }
.chart .tip-bad { fill: #fde8eb; stroke: none; }
.chart .tip-good { fill: var(--color-accent-lime); stroke: none; }
.chart .tip-t { font-size: 12px; font-weight: 600; fill: var(--color-content-primary); }
.chart .tip-d { font-size: 10.5px; fill: var(--color-content-secondary); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.chart .dot { stroke: #fff; stroke-width: 3; }
.chart .dot-bad { fill: #d6334a; }
.chart .dot-mid { fill: #9d9da3; }
/* lime marks: no black outline, a soft lime halo (her pick 13.10, option C) */
.chart .dot-good { fill: var(--color-accent-lime); filter: drop-shadow(0 0 5px rgba(170, 215, 20, 0.95)); }
.chart .node { fill: var(--color-surface-subtle); stroke: var(--color-line); }
.chart .node-t { font-size: 15px; font-weight: 500; fill: var(--color-content-primary); text-anchor: middle; }
.chart .node-t.l { text-anchor: start; font-weight: 400; }
.chart .node-t.s { font-size: 14px; }
.chart .node-t.b { font-weight: 600; }
.chart .arrow { fill: none; stroke: #9d9da3; stroke-width: 1.5; }
.chart .loop { fill: none; stroke: #d6334a; stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .loop-solid { fill: none; stroke: #d6334a; stroke-width: 1.5; }
.chart .loop-tip { fill: #fde8eb; }
.chart .loop-t { font-size: 14px; fill: var(--color-content-primary); }
.chart .num { fill: #fff; stroke: var(--color-line); }
.chart .num-t { font-size: 12px; fill: var(--color-content-secondary); }
.chart .user { fill: var(--color-content-primary); }
.chart .user-t { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; fill: #fff; }
.chart .bus, .chart .stub line { stroke: var(--color-line); stroke-width: 1.5; }
.chart .box { fill: var(--color-surface-subtle); stroke: var(--color-line); }
.chart .cap { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; fill: var(--color-content-secondary); }
.chart .lime { fill: var(--color-accent-lime); }
.chart .out { fill: none; stroke: var(--color-content-primary); stroke-width: 1.8; stroke-linejoin: round; }

/* process: three tickets, what broke above the perforation, the decision below */
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 var(--s2); }
.ticket { grid-row: span 3; display: grid; grid-template-rows: subgrid; border: 1px solid var(--color-line); border-radius: 24px; overflow: hidden; background: var(--color-surface-page); }
.t-top { padding: var(--s3); background: #fdf3f4; display: grid; gap: var(--s1); align-content: start; }
.t-top p { margin: 0; font-size: var(--t-16); line-height: 1.45; }
.t-bot { padding: var(--s3); background: #f6fbe0; display: grid; gap: var(--s1); align-content: start; }
.t-bot h3 { margin: 0; font: 600 var(--t-20)/1.25 var(--font-head); letter-spacing: -0.01em; }
.t-label { font-size: var(--t-14); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-content-secondary); }
.t-label.bad { color: #d6334a; }
.t-rib { position: relative; padding: 10px var(--s3); background: var(--color-surface-page); border-top: 1px dashed #cfcfd4; border-bottom: 1px dashed #cfcfd4; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-content-primary); }
.t-rib::before, .t-rib::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--color-surface-page); border: 1px solid var(--color-line); }
.t-rib::before { left: -9px; }
.t-rib::after { right: -9px; }

/* trade-offs */
.tradeoffs { display: grid; border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--s2) var(--s4); background: var(--color-surface-page); }
.to-head, .to-row { display: grid; grid-template-columns: 36px minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s3); align-items: start; }
.to-head { padding: var(--s2) 0 var(--s1); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-content-secondary); }
.to-row { padding: var(--s3) 0; border-top: 1px solid var(--color-line); }
.to-n { padding-top: 6px; font: 500 12px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--color-content-secondary); }
.to-choice { display: grid; gap: 8px; justify-items: start; }
.to-pill { padding: 5px 14px; border-radius: 999px; background: var(--color-surface-subtle); box-shadow: inset 0 0 0 1px var(--color-line); font: 600 var(--t-16)/1.3 var(--font-body); }
.to-choice small { padding-left: 14px; font-size: var(--t-14); color: var(--color-content-secondary); }
.to-keep, .to-give { position: relative; padding: 6px 0 0 18px; line-height: 1.45; }
.to-keep::before, .to-give::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50%; }
.to-keep::before { background: var(--color-accent-lime); box-shadow: 0 0 0 4px rgba(200, 240, 50, 0.38); }
.to-give::before { background: #d6334a; }
.k-lbl { display: none; }

/* use case 1: symptom to result on one rail */
.tl { list-style: none; margin: 0; padding: 0; display: grid; max-width: 640px; }
.tl li { position: relative; display: grid; gap: 6px; justify-items: start; padding: 0 0 var(--s3) calc(var(--s4) + var(--s1)); }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-content-primary); }
.tl li.bad::before { background: #d6334a; }
.tl li.good::before { background: var(--color-accent-lime); box-shadow: 0 0 0 5px rgba(200, 240, 50, 0.38); }
.tl li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 24px; bottom: 4px; width: 2px; background: var(--color-line); }
.tl-tag { padding: 4px 12px; border-radius: 999px; background: var(--color-surface-subtle); box-shadow: inset 0 0 0 1px var(--color-line); font-size: var(--t-14); font-weight: 600; line-height: 1.4; }
.tl li.bad .tl-tag { background: #fde8eb; box-shadow: none; }
.tl p { margin: 0; line-height: 1.5; }
.tl-res { padding: 8px 16px; border-radius: 999px; background: var(--color-accent-lime); color: var(--color-accent-on-lime); font: 600 var(--t-16)/1.3 var(--font-head) !important; letter-spacing: -0.01em; }

@media (max-width: 900px) {
  .tickets { grid-template-columns: 1fr; grid-template-rows: none; gap: var(--s2); }
  .ticket { grid-row: auto; grid-template-rows: auto; }
  .tradeoffs { padding: var(--s2) var(--s3); }
  .to-head { display: none; }
  .to-head + .to-row { border-top: 0; padding-top: var(--s1); }
  .to-row { grid-template-columns: 28px minmax(0, 1fr); row-gap: var(--s1); }
  .to-keep, .to-give { grid-column: 2; padding-top: 0; }
  .to-keep::before, .to-give::before { top: 8px; }
  .k-lbl { display: inline; font-style: normal; font-size: var(--t-14); color: var(--color-content-secondary); margin-right: 8px; }
}
@media (max-width: 560px) { .window.live, .hero-fig .window.live { padding: var(--s2); } .chart text { font-size: 13px; } }

/* the system map is scaled down more than the others, so its text is set larger inside the svg */
.chart.sys .node-t { font-size: 17px; }
.chart.sys .node-t.s { font-size: 16px; }
.chart.sys .cap { font-size: 14px; }
.chart.sys .num-t { font-size: 13px; }
.chart.sys .user-t { font-size: 15px; }

/* phones (15.10, her note: the graphs that scrolled sideways looked bad): the three graphics have their own version drawn for a phone (.only-m); the wide originals (.no-m) stay on desktop and tablet. No sideways scroll. */
.only-m, .chart.only-m { display: none; }
@media (max-width: 700px) {
  .no-m, .chart.no-m { display: none; }
  .only-m { display: block; }
  .chart.only-m { display: block; }

  /* memory chart: the callouts are numbered points, listed underneath */
  .chart.cm { max-width: 300px; margin: 0 auto; }
  .chart.cm .ax { font-size: 12.5px; }
  .chart.cm .ax.faint { font-size: 11px; }
  .chart.cm .num-t { font-size: 12px; font-weight: 600; fill: var(--color-content-primary); }
  .cm-key { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 10px; }
  .cm-key li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--t-14); line-height: 1.3; }
  .cm-key .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); font-size: 12px; font-weight: 600; }
  .cm-key b { font-weight: 600; }
  .cm-key .d { font: 500 12px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--color-content-secondary); }

  .legend span { white-space: normal; flex-wrap: wrap; }
  /* memory chart header and key centered over and under the graph (15.10, her note) */
  .gh { flex-direction: column; align-items: center; text-align: center; }
  .legend { flex-direction: column; align-items: center; gap: 8px; }
  .legend span { justify-content: center; text-align: center; }
  .cm-key li { display: flex; justify-content: center; align-items: center; text-align: center; }

  /* process tickets (15.10, her note): not the full width of the screen, text centered */
  .tickets { max-width: 340px; margin-left: auto; margin-right: auto; }
  .t-top, .t-bot { text-align: center; justify-items: center; }

  /* flow: a column; the red loop runs down the right side */
  .chart.flow-m { max-width: 270px; margin: 0 auto; }
  .chart.flow-m .node-t { font-size: 15px; }
  .chart.flow-m .loop-t { font-size: 14px; }

  /* system map: a vertical stack in plain HTML, so the text keeps a real size */
  .sysm { display: grid; justify-items: center; }
  .sysm .sm-user { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; width: 100%; }
  .sysm .sm-user::after { content: ""; flex: 0 0 100%; height: 16px; background: linear-gradient(var(--color-line), var(--color-line)) center / 1.5px 100% no-repeat; }
  .sysm .sm-pill { position: relative; padding: 6px 16px 6px calc(16px + 0.1em); border-radius: 999px; background: var(--color-content-primary); color: #fff; font: 600 14px/1.2 var(--font-body); letter-spacing: 0.1em; text-align: center; }
  .sysm .sm-cap { flex: 0 0 100%; text-align: center; font-size: var(--t-14); line-height: 1.4; color: var(--color-content-secondary); }
  /* numbers 1 to 3: always a small circle on the top-left corner of its pill (same on desktop) */
  .sysm .sm-n { position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); font: 600 12px/1 var(--font-body); letter-spacing: 0; color: var(--color-content-primary); }
  .sysm .sm-chips { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sysm .sm-chips span { padding: 6px 4px; text-align: center; border-radius: 999px; background: var(--color-surface-subtle); box-shadow: inset 0 0 0 1px var(--color-line); font: 500 14px/1.3 var(--font-body); }
  .sysm .sm-box { position: relative; width: 100%; margin-top: var(--s3); padding: var(--s2); border-radius: 24px; background: var(--color-surface-subtle); box-shadow: inset 0 0 0 1px var(--color-line); }
  .sysm .sm-box::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--s3)); width: 1.5px; height: var(--s3); margin-left: -1px; background: var(--color-line); }
  .sysm .sm-label { margin: 0 0 var(--s2); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--color-content-secondary); }
  .sysm .sm-flow { display: grid; justify-items: center; }
  .sysm .sm-box { display: grid; }
  .sysm .sm-node { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); font: 500 16px/1.3 var(--font-body); }
  .sysm .sm-lime { background: var(--color-accent-lime); box-shadow: none; font-weight: 600; color: var(--color-accent-on-lime); }
  .sysm .sm-arr { position: relative; display: block; width: 1.5px; height: 22px; margin: 4px 0; background: #9d9da3; }
  .sysm .sm-arr::after { content: ""; position: absolute; left: -3px; bottom: 0; width: 7px; height: 7px; border-right: 1.5px solid #9d9da3; border-bottom: 1.5px solid #9d9da3; transform: rotate(45deg) translate(-1px, -1px); }
  .sysm .sm-back { display: inline-flex; align-items: center; gap: 8px; justify-self: center; margin: var(--s2) 0 0; padding: 8px 16px; border-radius: 999px; background: var(--color-content-primary); color: #fff; font: 600 var(--t-14)/1.3 var(--font-body); }
  .sysm .sm-note { position: relative; display: inline-flex; align-items: center; justify-self: center; margin: var(--s3) 0 0; padding: 8px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); font: 500 var(--t-14)/1.3 var(--font-body); color: var(--color-content-primary); }
}

/* dashboard walk-through video */
.window video.walk { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; background: var(--color-surface-subtle); }

/* the memory chart (Use case 1): draws itself when it comes into view (same trigger as the other entry motion; without JS or with reduced motion it just sits there finished) */
.js-reveal .draws .chart .load { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-reveal .draws .chart .total, .js-reveal .draws .chart polygon, .js-reveal .draws .chart .mk { opacity: 0; }
.js-reveal .draws .chart .dot.mk { transform-box: fill-box; transform-origin: center; transform: scale(0.3); }
.js-reveal .draws .chart g.mk { transform-box: fill-box; transform-origin: left center; transform: translateY(4px); }
.js-reveal .draws.is-in .chart .load { animation: ai-draw 2200ms cubic-bezier(0.45, 0.05, 0.3, 1) 250ms forwards; }
.js-reveal .draws.is-in .chart .total { animation: ai-fade 1400ms ease-out 300ms forwards; }
.js-reveal .draws.is-in .chart polygon { animation: ai-fade 1600ms ease-out 1000ms forwards; }
.js-reveal .draws.is-in .chart .mk1 { animation: ai-mark 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 1250ms forwards; }
.js-reveal .draws.is-in .chart .mk2 { animation: ai-mark 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 1500ms forwards; }
.js-reveal .draws.is-in .chart .mk3 { animation: ai-mark 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 2100ms forwards; }
@keyframes ai-draw { to { stroke-dashoffset: 0; } }
@keyframes ai-fade { to { opacity: 1; } }
@keyframes ai-mark { to { opacity: 1; transform: none; } }

/* title on two lines on wide screens: "...that grows" / "without growing the work around it" */
.case-hero h1 { max-width: none; }
.br-wide { display: none; }
@media (min-width: 1000px) { .br-wide { display: inline; } }

/* quiet play button, shown only when the video cannot start by itself */
.window.has-video { position: relative; }
.walk-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--color-surface-page); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.08), 0 8px 24px rgba(17, 17, 17, 0.16); cursor: pointer; }
.walk-play[hidden] { display: none; }
.walk-play svg { width: 28px; height: 28px; margin-left: 3px; fill: var(--color-content-primary); }
.walk-play:focus-visible { outline: 2px solid var(--color-content-primary); outline-offset: 3px; }

/* problem callout: air above it (two columns like the Risk page: the list, and the light bulb conclusion) */
#problem .callout { margin-top: var(--s4); }

/* What I learned: the open question sits as its own line under the bullets, label in bold */
#learned .unsolved { margin: var(--s2) 0 0; }

/* the video fills its frame to the last pixel (a fractional width used to leave a thin dark line under it) */
.window video.walk { object-fit: cover; }

/* cover chart: clickable points, and the pointer that shows them */
.window.live.has-cursor { position: relative; }
.chart .guide { stroke: var(--color-content-primary); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0; transition: opacity 220ms; }
.chart[data-sel="1"] .g1, .chart[data-sel="2"] .g2, .chart[data-sel="3"] .g3 { opacity: 0.5; }
.chart .ring { fill: #fff; stroke: var(--color-content-primary); stroke-width: 2; opacity: 0; transition: opacity 220ms; }
.chart[data-sel="1"] .r1, .chart[data-sel="2"] .r2, .chart[data-sel="3"] .r3 { opacity: 1; }
.chart .tip { transition: fill 220ms, stroke 220ms; }
.chart .tip-t, .chart .tip-d { transition: fill 220ms; }
.chart[data-sel="1"] g.mk1 .tip, .chart[data-sel="2"] g.mk2 .tip, .chart[data-sel="3"] g.mk3 .tip { fill: var(--color-content-primary); stroke: var(--color-content-primary); }
.chart[data-sel="1"] g.mk1 text, .chart[data-sel="2"] g.mk2 text, .chart[data-sel="3"] g.mk3 text { fill: #fff; }
.chart .hit { fill: transparent; cursor: pointer; outline: none; }
.chart .hit:focus-visible { stroke: var(--color-content-primary); stroke-width: 2; stroke-dasharray: 3 3; }
.demo-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 3; pointer-events: none; opacity: 0; transform: translate(-100px, -100px); transition: transform 900ms cubic-bezier(0.45, 0.05, 0.3, 1), opacity 300ms; }
.demo-cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-content-primary); opacity: 0; }
.demo-cursor.is-click::after { animation: ai-ripple 520ms ease-out; }
@keyframes ai-ripple { from { opacity: 0.6; transform: scale(0.6); } to { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .demo-cursor { display: none; } }

/* the video sits 2 px larger than its frame on every side and the frame clips it: no thin dark edge can show at any width or zoom */
.vframe { position: relative; overflow: hidden; aspect-ratio: 1280 / 800; background: var(--color-surface-subtle); }
.vframe video.walk { position: absolute; left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); max-width: none; aspect-ratio: auto; object-fit: cover; display: block; }

/* a thin strip of the video's own page grey lies over its bottom edge: whatever the browser does at that edge (overlay or fractional pixel), no dark hairline can show, and an element on top also keeps the video out of the hardware overlay path that causes it */
.vframe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #f0f0f1; z-index: 2; pointer-events: none; }

/* dashboard screens (13.10, her note: text and spacing did not show what belongs to what): each screen is one block, label and text directly above its own image, a wide gap between blocks */
.dblock { display: grid; gap: var(--s2); margin-top: var(--s4); }
.dblock .measure { display: grid; gap: var(--s1); }
.dblock .measure p { margin: 0; }
.dblock .fig { margin: 0; }
/* What I learned as rows, like Results on the other cases (13.10, her note) */
.rows.learn { margin-top: var(--s3); }
.rows.learn .row { grid-template-columns: 1fr; gap: var(--s1); }