/* rd3 tools: the workflow stories and each article's tool, drawn in the rd3 exhibit style (Geist with tabular figures, pill controls,
   rounded white cards, no mock-app chrome). Scoped to .rdi. */
.rdi{color-scheme:light;
  --ink:#0a1322; --ink-2:#3c4656; --ink-3:#5f6878;
  --paper:#ffffff; --page:#f6f5f1; --line:#e3e1db; --line-2:#cfcac0; --soft:#f1f0ec; --white:#ffffff;
  --accent:#157a6b; --accent-lt:#e4f5f1; --accent-dk:#0f5c50;
  --ok:#1d7a52; --ok-lt:#e3f2ea; --warn:#8a5100; --warn-lt:#fbf0d9; --bad:#b42318; --bad-lt:#fbeceb;
  --ai:#3f3a8f; --ai-lt:#e9e7f7; --person:#7a4a00; --person-lt:#f6ead6;
  --serif:"Geist","Geist Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Geist","Geist Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Geist","Geist Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink-2);font:1rem/1.6 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.rdi,.rdi *{box-sizing:border-box}
.rdi [hidden]{display:none!important}
.rdi h1,.rdi h2,.rdi h3,.rdi h4{margin:0;color:var(--ink);text-wrap:balance;font-weight:600}
.rdi p{margin:0}
.rdi ul,.rdi ol{margin:0}
.rdi a{color:var(--accent)}
.rdi table{margin:0;border:0;border-collapse:collapse;width:100%}
.rdi th,.rdi td{border:0;text-align:left}
.rdi button{text-transform:none;letter-spacing:normal;box-shadow:none;line-height:inherit;font-family:var(--sans)}
.rdi button:hover{background-image:none}
.rdi input[type=range]{border:0;padding:0;background:none}
.rdi .wrap{max-width:80rem;margin-inline:auto;padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}
.rdi .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rdi .eyebrow{font:500 0.75rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 0.625rem}
.rdi .h2{font:600 clamp(1.625rem,3vw,2.25rem)/1.12 var(--serif);letter-spacing:-.015em}
.rdi .lead{font-size:1.125rem;color:var(--ink-2);max-width:41.1em}
.rdi .fine{font-size:0.8125rem;color:var(--ink-3);max-width:53.04em}
.rdi .btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-height:2.75rem;padding:0 1.25rem;border-radius:999px;border:0;background:var(--accent);color:#fff;font:600 0.9375rem/1.15 var(--sans);cursor:pointer;text-decoration:none;text-align:center}
.rdi .btn:hover{background:var(--accent-dk);color:#fff}
.rdi .btn:disabled{opacity:.45;cursor:default}
.rdi .btn.line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.rdi .btn.line:hover{background:var(--white);color:var(--ink)}
.rdi .btn.sm{min-height:2.25rem;padding:0.375rem 0.8125rem;font-size:0.875rem}
.rdi .tlink{font-weight:600;text-decoration:underline;text-underline-offset:0.1875rem}
.rdi .panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:1.25rem;min-width:0}
.rdi .sec{padding-block:clamp(2.25rem,5vw,4rem);border-top:1px solid var(--line)}
.rdi .sec-head{display:grid;gap:0.5rem;margin-bottom:1.375rem;max-width:47.5rem}
.rdi .crumb{font-size:0.875rem;color:var(--ink-3);margin-bottom:1.125rem}
.rdi .crumb a{color:var(--ink-2)}
.rdi .tag{display:inline-flex;align-items:center;gap:0.375rem;font:500 0.6875rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:0.3125rem 0.5625rem;background:var(--paper);white-space:nowrap}
.rdi .tag.k{color:var(--accent);border-color:#bcd7cb;background:var(--accent-lt)}

/* Roles (same as the home studio) */
.rdi .role{display:inline-flex;align-items:center;font:600 0.6562rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:0.3125rem 0.5rem;border-radius:999px;white-space:nowrap}
.rdi .role.auto,.rdi .role.rule{background:#e4f5f1;color:#157a6b}
.rdi .role.ai{background:var(--ai-lt);color:var(--ai)}
.rdi .role.person{background:var(--person-lt);color:var(--person)}
.rdi .role.no{background:var(--bad-lt);color:var(--bad)}

@keyframes rdi-pulse{50%{opacity:.35}}
.rdi .flow-bar{display:flex;flex-wrap:wrap;gap:0.625rem 0.875rem;align-items:center;padding:0.75rem 1rem;border-bottom:1px solid var(--line);background:var(--paper)}
.rdi .flow-ctl{display:inline-flex;flex-wrap:wrap;gap:0.375rem}
.rdi .flow-bar .btn.sm{padding-inline:0.65rem}

/* Yes / no grid */
.rdi .yn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.rdi .yn>div{padding:0.875rem 1rem 1rem;display:grid;gap:0.5rem;align-content:start;border-right:1px solid var(--line)}
.rdi .yn>div:last-child{border-right:0}
.rdi .yn h3{font:600 0.875rem/1.3 var(--sans);display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}
.rdi .yn ul{padding-left:1.125rem;font-size:0.875rem;display:grid;gap:0.25rem;color:var(--ink-2)}
.rdi .yn .no-col{background:#fdf6f5}

/* Hero (hub + article) */
.rdi .hero{padding-block:clamp(1.75rem,4vw,3.25rem) clamp(1.75rem,4vw,2.75rem)}
.rdi .hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.75rem 3rem;align-items:start}
.rdi .hero h1{font:600 clamp(2rem,4.4vw,3.25rem)/1.06 var(--serif);letter-spacing:-.02em;margin-bottom:1rem}
.rdi .meta{display:flex;flex-wrap:wrap;gap:0.5rem 0.625rem;align-items:center;margin-top:1.125rem;font-size:0.875rem;color:var(--ink-3)}
.rdi .tldr{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:1.125rem 1.25rem;box-shadow:0 18px 40px -30px rgba(27,28,30,.45)}
.rdi .tldr h2{font:500 0.75rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:0.625rem}
.rdi .tldr ul{padding-left:1.125rem;display:grid;gap:0.5rem;font-size:0.9375rem;color:var(--ink)}

/* Demo shell + primitives used by rd-insights.js demos */
.rdi .demo{border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.rdi .demo-in{padding:clamp(1rem,2.4vw,1.5rem);display:grid;gap:1.125rem}
.rdi .demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.25rem 1.75rem;align-items:start}
.rdi .demo-grid>*{min-width:0}
.rdi .ctl{display:grid;gap:0.875rem}
.rdi .rng{display:grid;gap:0.375rem}
.rdi .rng-h{display:flex;justify-content:space-between;gap:0.625rem;font-size:0.875rem;color:var(--ink-2)}
.rdi .rng-h output{font:600 0.875rem/1.3 var(--mono);color:var(--ink);white-space:nowrap}
.rdi .rng input{width:100%;accent-color:var(--accent)}
.rdi .seg{display:inline-flex;flex-wrap:wrap;gap:0.25rem;padding:0.1875rem;background:var(--soft);border-radius:12px}
.rdi .seg button{border:0;background:transparent;color:var(--ink-2);font:500 0.875rem/1.2 var(--sans);padding:0.5rem 0.75rem;border-radius:10px;cursor:pointer}
.rdi .seg button[aria-pressed=true]{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rdi .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.125rem,1fr));gap:0.625rem}
.rdi .kpis>div{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:0.75rem 0.875rem;display:grid;gap:2px}
.rdi .kpis b{font:600 1.625rem/1.1 var(--mono);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.rdi .kpis span{font-size:0.7812rem;color:var(--ink-3)}
.rdi .kpis .g b{color:var(--ok)}
.rdi .kpis .r b{color:var(--bad)}
.rdi .bars{display:grid;gap:0.625rem}
.rdi .bar{display:grid;grid-template-columns:minmax(5.625rem,30%) minmax(0,1fr) auto;gap:0.625rem;align-items:center;font-size:0.8438rem}
.rdi .bar i{display:block;height:0.875rem;border-radius:3px;background:var(--line-2)}
.rdi .bar.a i{background:var(--accent)}
.rdi .bar.w i{background:var(--warn)}
.rdi .bar.b i{background:var(--bad)}
.rdi .bar.ai i{background:var(--ai)}
.rdi .bar output{font:600 0.8125rem/1 var(--mono);color:var(--ink);white-space:nowrap}
.rdi .verdict{border-radius:12px;padding:0.75rem 0.875rem;font-size:0.9375rem;border:1px solid var(--line);background:var(--white);color:var(--ink)}
.rdi .verdict.ok{border-color:#b6dbc8;background:var(--ok-lt)}
.rdi .verdict.warn{border-color:#ecd39c;background:var(--warn-lt)}
.rdi .verdict.bad{border-color:#efb7b2;background:var(--bad-lt)}
.rdi .verdict b{color:var(--ink)}
.rdi .doc{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px -28px rgba(27,28,30,.45);padding:clamp(0.875rem,2vw,1.25rem);font-size:0.8438rem;color:#222;overflow-x:auto}
.rdi .doc-in{min-width:21.25rem}
.rdi .doc .hdr{display:flex;justify-content:space-between;gap:0.875rem;border-bottom:2px solid #222;padding-bottom:0.5rem;margin-bottom:0.625rem}
.rdi .doc .hdr b{font-size:0.9375rem}
.rdi .doc th{font-size:0.6562rem;letter-spacing:.06em;text-transform:uppercase;color:#666;border-bottom:1px solid #ccc;padding:0.375rem 0.25rem;font-weight:600}
.rdi .doc td{padding:0.4375rem 0.25rem;border-bottom:1px solid #eee}
.rdi .doc .r,.rdi .tbl .r{text-align:right}
.rdi .hl-bad{background:var(--bad-lt);box-shadow:inset 0 0 0 1.5px var(--bad);border-radius:3px}
.rdi .hl-warn{background:var(--warn-lt);box-shadow:inset 0 0 0 1.5px var(--warn);border-radius:3px}
.rdi .hl-ok{background:var(--ok-lt)}
.rdi .tbl{font-size:0.875rem;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rdi .tbl-wrap{overflow-x:auto;border-radius:12px}
.rdi .tbl th{font:600 0.6875rem/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);background:var(--soft);padding:0.5rem 0.625rem}
.rdi .tbl td{padding:0.5625rem 0.625rem;border-top:1px solid var(--line);vertical-align:top}
.rdi .tbl tr.bad td{background:var(--bad-lt)}
.rdi .tbl tr.warn td{background:var(--warn-lt)}
.rdi .tbl tr.ok td{background:var(--ok-lt)}
.rdi .checks{display:grid;gap:0.5rem;padding:0;list-style:none}
.rdi .checks li{display:grid;grid-template-columns:1.375rem minmax(0,1fr);gap:0.5rem;align-items:start;font-size:0.9062rem;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:0.5625rem 0.75rem}
.rdi .checks li::before{content:"";width:1rem;height:1rem;border-radius:50%;border:1.5px solid var(--line-2);margin-top:0.1875rem}
.rdi .checks li.ok::before{background:var(--ok);border-color:var(--ok);box-shadow:inset 0 0 0 3px #fff}
.rdi .checks li.bad{border-color:#efb7b2;background:var(--bad-lt)}
.rdi .checks li.bad::before{background:var(--bad);border-color:var(--bad);box-shadow:inset 0 0 0 3px #fff}
.rdi .checks li.warn{border-color:#ecd39c;background:var(--warn-lt)}
.rdi .checks li.warn::before{background:var(--warn);border-color:var(--warn);box-shadow:inset 0 0 0 3px #fff}
.rdi .checks small{display:block;color:var(--ink-3);font-size:0.7812rem}
.rdi .toggle{display:flex;gap:0.625rem;align-items:flex-start;font-size:0.9062rem;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:0.625rem 0.75rem;cursor:pointer}
.rdi .toggle input{margin-top:0.25rem;accent-color:var(--accent);width:1rem;height:1rem;flex:none}
.rdi .chipset{display:flex;flex-wrap:wrap;gap:0.375rem}
.rdi .chipset button{border:1px solid var(--line);background:var(--white);color:var(--ink-2);border-radius:999px;padding:0.4375rem 0.75rem;font:500 0.875rem/1.2 var(--sans);cursor:pointer}
.rdi .chipset button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.rdi .lane{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr));gap:0.625rem}
.rdi .lane>div{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:0.625rem 0.75rem;display:grid;gap:0.25rem;font-size:0.8438rem}
.rdi .demo-foot{padding:0.625rem 1rem;border-top:1px solid var(--line);font-size:0.7812rem;color:var(--ink-3);background:var(--white)}
.rdi canvas{max-width:100%}

/* Article body */
.rdi .body{display:grid;grid-template-columns:minmax(0,1fr) 18.75rem;gap:2.5rem;align-items:start}
.rdi .prose{max-width:43.75rem;font-size:1.0625rem;line-height:1.7;color:var(--ink-2)}
.rdi .prose h2{font:600 clamp(1.375rem,2.4vw,1.75rem)/1.2 var(--serif);margin:2.125rem 0 0.625rem;letter-spacing:-.01em}
.rdi .prose h2:first-child{margin-top:0}
.rdi .prose h3{font:600 1.125rem/1.3 var(--sans);margin:1.375rem 0 0.375rem}
.rdi .prose p{margin:0 0 0.875rem}
.rdi .prose ul,.rdi .prose ol{padding-left:1.375rem;margin:0 0 1rem;display:grid;gap:0.375rem}
.rdi .prose strong{color:var(--ink)}
.rdi .prose table{font-size:0.9062rem;margin:0.375rem 0 1.125rem;background:var(--white);border:1px solid var(--line)}
.rdi .prose th{font:600 0.7188rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);background:var(--soft);padding:0.5rem 0.625rem}
.rdi .prose td{padding:0.5625rem 0.625rem;border-top:1px solid var(--line);vertical-align:top}
.rdi .prose .tbl-wrap{overflow-x:auto;margin-bottom:1.125rem}
.rdi .prose .tbl-wrap table{margin:0}
.rdi .side{position:sticky;top:6rem;display:grid;gap:0.875rem}
.rdi .side .panel h2{font:600 1.375rem/1.15 var(--serif);margin:0.25rem 0 0.5rem}
.rdi .side .panel p{font-size:0.9062rem;margin-bottom:0.75rem}
.rdi .toc{display:grid;gap:0.375rem;padding:0;list-style:none;font-size:0.875rem}
.rdi .toc a{color:var(--ink-2);text-decoration:none;border-left:2px solid var(--line);padding-left:0.625rem;display:block}
.rdi .toc a:hover{border-color:var(--accent);color:var(--ink)}

/* Draw this for your business */
.rdi .draw{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.25rem 1.75rem;align-items:start}
.rdi .draw>*{min-width:0}
.rdi .draw textarea{width:100%;min-height:8.125rem;font:1rem/1.5 var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:0.75rem 0.875rem;resize:vertical}
.rdi .draw label{font-weight:600;color:var(--ink);display:block;margin-bottom:0.5rem}
.rdi .draw-out:empty{display:none}
.rdi .typing::after{content:"…";animation:rdi-pulse 1s infinite}

/* FAQ, related, closing */
.rdi .faq{display:grid;gap:0.5rem;max-width:51.25rem}
.rdi .faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0.75rem 1rem}
.rdi .faq summary{cursor:pointer;font-weight:600;color:var(--ink)}
.rdi .faq details p{margin-top:0.5rem;font-size:0.9688rem}
.rdi .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.rdi .card{display:grid;gap:0.625rem;align-content:start;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:1.125rem;text-decoration:none;color:var(--ink-2);transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.rdi .card:hover{border-color:var(--ink);box-shadow:0 14px 30px -24px rgba(27,28,30,.6)}
@media (prefers-reduced-motion:no-preference){.rdi .card:hover{transform:translateY(-1px)}}
.rdi .card h2,.rdi .card h3{font:600 1.3125rem/1.2 var(--serif)}
.rdi .card p{font-size:0.9062rem}
.rdi .card-top{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center}
.rdi .card .go{font-weight:600;color:var(--accent);font-size:0.9062rem}
.rdi .glyph{display:flex;align-items:center;gap:0;flex-wrap:nowrap;overflow:hidden;padding:0.625rem 0 2px}
.rdi .glyph .role{font-size:0.5625rem;padding:0.1875rem 0.3125rem}
.rdi .glyph i{width:0.75rem;height:2px;background:var(--line-2);flex:none}
.rdi .glyph .role.caught{background:var(--bad);color:#fff}
.rdi .sys{font:500 0.75rem/1.4 var(--mono);color:var(--ink-3)}
.rdi .close{background:#17191b;color:#d9dcd6}
.rdi .close .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.5rem 2.5rem;align-items:center;padding-block:clamp(2.25rem,5vw,3.5rem)}
.rdi .close h2{color:#fff;font:600 clamp(1.625rem,3vw,2.25rem)/1.15 var(--serif)}
.rdi .close p{color:#d9dcd6;margin-top:0.625rem;max-width:39.78em}
.rdi .close .eyebrow{color:#6fc3a8}
.rdi .close .acts{display:flex;flex-wrap:wrap;gap:0.625rem;justify-content:flex-end}
.rdi .close .btn.line{color:#fff;border-color:#8e948f}
.rdi .close .btn.line:hover{background:#24272a}
.rdi .close a:not(.btn){color:#6fc3a8}

/* Hub */
.rdi .filters{display:grid;gap:0.625rem;margin-bottom:1.5rem}
.rdi .filters .row{display:flex;flex-wrap:wrap;gap:0.5rem 0.75rem;align-items:center}
.rdi .filters .k{font:500 0.7188rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);min-width:4.75rem}
.rdi .feature{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.rdi .feature .card{background:var(--white)}
.rdi .feature .big{font:600 1.75rem/1 var(--mono);color:var(--accent)}
.rdi .count{font-size:0.875rem;color:var(--ink-3)}
.rdi .empty{padding:1.25rem;border:1px dashed var(--line-2);border-radius:16px;text-align:center}

@media (max-width:63.75em){
  .rdi .body{grid-template-columns:minmax(0,1fr)}
  .rdi .side{position:static}
  .rdi .yn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rdi .yn>div:nth-child(2){border-right:0}
  .rdi .yn>div:nth-child(n+3){border-top:1px solid var(--line)}
  .rdi .cards,.rdi .feature{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:47.5em){
  .rdi .hero-grid,.rdi .demo-grid,.rdi .draw,.rdi .close .wrap{grid-template-columns:minmax(0,1fr)}
  .rdi .close .acts{justify-content:flex-start}
  .rdi .yn{grid-template-columns:minmax(0,1fr)}
  .rdi .yn>div{border-right:0;border-top:1px solid var(--line)}
  .rdi .yn>div:first-child{border-top:0}
  .rdi .cards,.rdi .feature{grid-template-columns:minmax(0,1fr)}
  .rdi .prose{font-size:1.0312rem}
  .rdi .bar{grid-template-columns:minmax(5rem,34%) minmax(0,1fr) auto}
  .rdi .filters .k{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.rdi *{animation:none!important;transition:none!important}}
.rdi-site main#rdb-main{background:#f3f1ec}

/* Launch audit item 27: no text under 12px in the article tools. The grey in the sample documents is #666 (5.74:1 on white). */
.rdi .tag,.rdi .role,.rdi .filters .k,.rdi .doc th,.rdi .tbl th,.rdi .prose th,.rdi .glyph .role{font-size:0.75rem}
.rdi .role{letter-spacing:.02em;padding:0.3125rem 0.375rem}
.rdi .doc small,.rdi .demo small{font-size:max(0.75rem,.83em)}

.rdi .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Audit fixes, 18 October 2026. Sizes in this file are in rem, so the tools follow the browser's text size (L1). */
/* U5: each slider has a box for typing the figure. */
.rdi .rng-i{display:grid;grid-template-columns:minmax(0,1fr) 6.5rem;gap:.75rem;align-items:center}
.rdi .rng-n{width:100%;min-height:2.25rem;font:500 .9375rem/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--white);border:1px solid var(--line-2);border-radius:8px;padding:.3rem .5rem;text-align:right}
.rdi .rng-n:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rdi .rng input[type=range]{min-height:1.5rem}

/* RD-EX-3: the weekly job review. Flag sits beside the job, the cells wrap, and below 44rem (of the table's own width) each job is a card
   with its figures labelled, so nothing sits behind a sideways scroll. */
.rdi .jr-wrap{container-type:inline-size}
.rdi .tbl.jr{font-size:.8438rem}
.rdi .tbl.jr th{padding:.5rem .5rem}
.rdi .tbl.jr td{padding:.5625rem .5rem}
.rdi .tbl.jr td:first-child{min-width:8.5rem}
.rdi .tbl.jr td.fl{min-width:6.5rem}
@container (max-width:43.99rem){
  .rdi .tbl.jr,.rdi .tbl.jr tbody{display:block;border:0;background:none}
  .rdi .tbl.jr thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rdi .tbl.jr tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .75rem;padding:.75rem .875rem;margin-bottom:.625rem;background:var(--white);border:1px solid var(--line);border-radius:12px}
  .rdi .tbl.jr tr.bad{background:var(--bad-lt);border-color:#efb7b2}
  .rdi .tbl.jr tr.warn{background:var(--warn-lt);border-color:#ecd39c}
  .rdi .tbl.jr td,.rdi .tbl.jr tr.bad td,.rdi .tbl.jr tr.warn td{display:block;padding:0;border:0;background:none;text-align:left;min-width:0}
  .rdi .tbl.jr td:first-child,.rdi .tbl.jr td.fl{grid-column:1 / -1;min-width:0}
  .rdi .tbl.jr td[data-l]::before{content:attr(data-l);display:block;font:600 .75rem/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
}
@container (min-width:30rem) and (max-width:43.99rem){.rdi .tbl.jr tr{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* RD-EX-10: four KPI tiles sit two by two, not three and one. */
@media (min-width:30rem){.rdi .kpis:has(>div:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* RD-EX-13: touch targets in the tools are at least 44px on touch screens and phones; a verdict that takes focus after a run shows it. */
@media (pointer:coarse),(max-width:47.99rem){
  .rdi .btn.sm,.rdi .seg button,.rdi .chipset button,.rdi .rng-n,.rdi .rng input[type=range]{min-height:2.75rem}
}
.rdi .verdict:focus{outline:none}
.rdi .verdict:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rdi .verdict{scroll-margin-block:1rem}

/* RD-PERF-2: a tool is built when it comes near the screen (rd3-flow.js), so until then its box holds the height it will have (measured per tool and
   screen width, 20 Oct 2026) and nothing below it moves when it is built. Without JavaScript the box is not held open. */
@media (min-width:75rem){
  .rdi-js .rdi .demo:not([data-built])[data-demo=ap-calc]{min-height:1675px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=job-margin]{min-height:1274px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=cost-to-own]{min-height:1472px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=data-sorter]{min-height:1328px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=report-checks]{min-height:1428px}
}
@media (min-width:64rem) and (max-width:74.99rem){
  .rdi-js .rdi .demo:not([data-built])[data-demo=ap-calc]{min-height:2282px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=job-margin]{min-height:1931px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=cost-to-own]{min-height:1914px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=data-sorter]{min-height:1637px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=report-checks]{min-height:1570px}
}
@media (min-width:48rem) and (max-width:63.99rem){
  .rdi-js .rdi .demo:not([data-built])[data-demo=ap-calc]{min-height:1925px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=job-margin]{min-height:1832px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=cost-to-own]{min-height:1584px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=data-sorter]{min-height:1518px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=report-checks]{min-height:1530px}
}
@media (min-width:37.5rem) and (max-width:47.99rem){
  .rdi-js .rdi .demo:not([data-built])[data-demo=ap-calc]{min-height:2634px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=job-margin]{min-height:2377px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=cost-to-own]{min-height:2386px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=data-sorter]{min-height:2024px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=report-checks]{min-height:1865px}
}
@media (max-width:37.49rem){
  .rdi-js .rdi .demo:not([data-built])[data-demo=ap-calc]{min-height:3533px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=job-margin]{min-height:2925px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=cost-to-own]{min-height:3116px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=data-sorter]{min-height:2962px}
  .rdi-js .rdi .demo:not([data-built])[data-demo=report-checks]{min-height:2445px}
}

/* The story layout (the films' grammar, owner 20 Oct 2026): rd3_wf_story() prints every scene, initStory() in rd3-flow.js plays them.
   One idea per scene: the source document, what arrived beside it, Claude reads both into the same fields, plain rules join them row by row,
   the mistake in dollars, the person's decision, the outcome. The site's skin (Geist, the role colours, white cards on the warm page).
   The five layers sit in one grid cell, so the example keeps the height of its tallest scene and nothing below it moves. Each scene's own
   motion is CSS keyed on data-k (the scene's kind; the data sets which scenes a story has and in what order), played only while .play is on,
   transform and opacity only, on the shared tokens. data-r is the role the scene lights; at the end the roles the chosen outcome reached (.lit) are tinted. */
.rdi .sf{--sf-c:21rem;--sf-k:4.5rem;--sf-x:calc(50% + var(--sf-k) / 2);--sf-in:translateX(1.5rem);container:sf / inline-size;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper)}
.rdi .sf:not(.is-live) [data-run],.rdi .sf:not(.is-live) .flow-ctl{visibility:hidden}
.rdi .sf-pos{display:flex;align-items:center;gap:.625rem;flex:1 1 12rem;margin:0;font-size:.8125rem;font-weight:600;line-height:1.3;color:var(--ink-3);white-space:nowrap}
/* Every scene's counter is printed in one cell, so the bar is as wide for the longest name as for the shortest and never wraps differently from scene to scene. */
.rdi .sf-pn{display:inline-grid}
.rdi .sf-pn>span{grid-area:1 / 1;visibility:hidden}
.rdi .sf-pn>span.on{visibility:visible}
.rdi .sf-pg{display:flex;gap:3px;flex:0 1 7rem;min-width:3.5rem}
.rdi .sf-pg i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.rdi .sf-pg i.d{background:var(--accent)}
.rdi .sf-st{display:grid;gap:1.125rem;padding:1.25rem 1.25rem 1.125rem;background:var(--page)}
.rdi .sf-st>*{width:100%;max-width:calc(2 * var(--sf-c) + var(--sf-k));margin-inline:auto;min-width:0}
.rdi .sf-roles{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;list-style:none}
.rdi .sf-roles li{display:inline-flex;align-items:center;gap:.375rem;padding:.3125rem .75rem .3125rem .5rem;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);font-size:.8125rem;font-weight:600;line-height:1.2;color:var(--ink-3)}
.rdi .sf svg{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rdi .sf[data-r="ai"] .sf-roles .ai{background:var(--ai);border-color:var(--ai);color:#fff}
.rdi .sf[data-r="rule"] .sf-roles .rule{background:var(--accent);border-color:var(--accent);color:#fff}
.rdi .sf[data-r="person"] .sf-roles .person{background:var(--person);border-color:var(--person);color:#fff}
.rdi .sf[data-k="end"] .sf-roles .ai.lit{background:var(--ai-lt);border-color:transparent;color:var(--ai)}
.rdi .sf[data-k="end"] .sf-roles .rule.lit{background:var(--accent-lt);border-color:transparent;color:var(--accent-dk)}
.rdi .sf[data-k="end"] .sf-roles .person.lit{background:var(--person-lt);border-color:transparent;color:var(--person)}
/* Layers and captions: every one printed, only the current one shown. The caption rows line up across layers (subgrid). */
.rdi .sf-ls{display:grid;grid-template-rows:auto auto;row-gap:1.125rem}
.rdi .sf-l{grid-area:1 / 1 / 3 / 2;display:grid;grid-template-rows:subgrid;min-width:0;visibility:hidden;opacity:0}
.rdi .sf-l.on{visibility:visible;opacity:1}
.rdi .sf-cs{display:grid;align-content:start}
.rdi .sf-c{grid-area:1 / 1;visibility:hidden}
.rdi .sf-c.on{visibility:visible}
.rdi .sf-c :is(h3,h4){font-size:clamp(1.25rem,1rem + 1.6cqi,1.75rem);line-height:1.15;letter-spacing:-.022em}
.rdi .sf-c p{margin-top:.375rem;max-width:31.82em;font-size:clamp(.9375rem,.875rem + .5cqi,1.0625rem);line-height:1.45;color:var(--ink-2)}
.rdi .sf-vis{min-width:0}
.rdi .sf-note{font-size:.75rem;color:var(--ink-3)}
/* 1-2: the documents, drawn as the site's sheets. The first sits centred until the second arrives beside it. */
.rdi .sf-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sf-k);row-gap:.75rem;align-items:start}
.rdi .sf-doc{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:3px;padding:.75rem 1rem .875rem;box-shadow:0 1px 2px rgba(10,19,34,.05),0 18px 30px -24px rgba(10,19,34,.55)}
.rdi .sf-doc::after{content:"";position:absolute;top:-1px;right:-1px;width:20px;height:20px;background:linear-gradient(225deg,var(--page) 50%,#e7e4dd 50%);border-bottom-left-radius:3px}
.rdi .sf-doc::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(63,58,143,0) calc(100% - 2.5rem),rgba(63,58,143,.16));border-bottom:2px solid var(--ai);transform:translateY(-101%)}
.rdi .sf-db{display:flex;align-items:center;gap:.5rem;padding-right:1.25rem;font-size:.8125rem;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.rdi .sf-db svg{color:#b4321f}
.rdi .sf-pdf{flex:none;font-size:.75rem;font-weight:700;line-height:1;letter-spacing:.05em;color:#fff;background:#c4321f;border-radius:4px;padding:.25rem .3125rem}
.rdi .sf-dt{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 .75rem;margin-top:.75rem}
.rdi .sf-dt b{font-size:.875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.rdi .sf-dt span{font-size:.8125rem;color:var(--ink-3)}
.rdi .sf-dm{margin:.125rem 0 .5rem;font-size:.8125rem;line-height:1.35;color:var(--ink-3)}
.rdi .sf-dl{margin:0;padding:0;list-style:none}
.rdi .sf-dl li{display:grid;grid-template-columns:minmax(min-content,1fr) auto;column-gap:.75rem;padding:.4375rem 0;border-top:1px solid var(--soft);font-size:.875rem;line-height:1.35;color:var(--ink)}
.rdi .sf-dl small{grid-column:1;font-size:.8125rem;color:var(--ink-3)}
.rdi .sf-ds{margin:0;border-top:1px solid var(--soft);padding-top:.25rem}
.rdi .sf-ds div{display:flex;justify-content:space-between;gap:.75rem;padding:.1875rem 0;font-size:.8125rem;color:var(--ink-3)}
.rdi .sf-ds dd{margin:0}
.rdi .sf-ds .tot{margin-top:.25rem;padding-top:.4375rem;border-top:2px solid var(--ink);font-size:.9375rem;font-weight:600;color:var(--ink)}
.rdi .sf[data-k="docs1"] .sf-doc.a{transform:translateX(var(--sf-x))}
.rdi .sf[data-k="docs1"] .sf-doc.b{visibility:hidden;opacity:0}
/* 3-4: the fields Claude read, as two cards; the rules then join each pair with a tick or a cross. */
.rdi .sf-fx{position:relative;display:grid}
.rdi .sf-cb{position:absolute;top:0;bottom:0;width:calc((100% - var(--sf-k)) / 2);border-radius:12px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 18px 30px -24px rgba(10,19,34,.55)}
.rdi .sf-cb.a{left:0}
.rdi .sf-cb.b{right:0}
.rdi .sf-r{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--sf-k) minmax(0,1fr)}
.rdi .sf-a,.rdi .sf-b{position:relative;isolation:isolate;display:grid;align-content:center;gap:.125rem;min-width:0;padding:.5625rem 1rem;border-top:1px solid var(--soft)}
.rdi .sf-r:last-child .sf-a{border-radius:0 0 0 12px}
.rdi .sf-r:last-child .sf-b{border-radius:0 0 12px 0}
.rdi .sf-h .sf-a,.rdi .sf-h .sf-b{border-top:0;padding-block:.625rem;border-radius:12px 12px 0 0;background:var(--ai-lt)}
.rdi .sf-ai{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:600;color:var(--ai)}
.rdi .sf-ai.sf-src{color:var(--ink-2)}
.rdi .sf-fx.by-rec .sf-h :is(.sf-a,.sf-b){background:var(--soft)}
.rdi .sf-f{font-size:.8125rem;color:var(--ink-2)}
.rdi .sf-fn{white-space:nowrap}
.rdi .sf-f em{font-style:normal;font-weight:600;color:var(--ink)}
.rdi .sf-lb{font-size:.75rem;font-weight:600;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rdi .sf-v{font-size:.9375rem;line-height:1.35;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.rdi .sf-r.bad .sf-v{color:var(--bad);font-weight:600}
.rdi .sf-r.bad .sf-a::before,.rdi .sf-r.bad .sf-b::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--bad-lt)}
.rdi .sf-k{position:relative;display:grid;place-items:center}
.rdi .sf-w{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--accent);transform-origin:0 50%}
.rdi .sf-r.bad .sf-w{background:var(--bad)}
.rdi .sf-m{position:relative;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--accent);color:#fff;font-size:.8125rem;font-weight:700;font-style:normal;line-height:1}
.rdi .sf-r.bad .sf-m{background:var(--bad)}
.rdi .sf-ck{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.rdi .sf-ck li{display:inline-flex;align-items:center;gap:.4375rem;padding:.375rem .75rem .375rem .4375rem;border-radius:999px;background:var(--accent-lt);color:var(--accent-dk);font-size:.8125rem;font-weight:600;line-height:1.25}
.rdi .sf-ck li.bad{background:var(--bad-lt);color:var(--bad)}
.rdi .sf-ck i{display:grid;place-items:center;flex:none;width:1.125rem;height:1.125rem;border-radius:50%;background:var(--accent);color:#fff;font-size:.75rem;font-style:normal;line-height:1}
.rdi .sf-ck li.bad i{background:var(--bad)}
/* A field that changed as asked (a new account in a change request, this period's figure against the last): neutral, neither a pass nor a fail. */
.rdi .sf-r.chg .sf-w,.rdi .sf-r.chg .sf-m,.rdi .sf-ck li.chg i{background:var(--ink-3)}
.rdi .sf-ck li.chg{background:var(--soft);color:var(--ink-2)}
/* Scene 3 is the reading only: no joins, no reds, no results yet. */
.rdi .sf[data-k="read"] :is(.sf-w,.sf-m,.sf-ck){visibility:hidden;opacity:0}
/* (a pseudo-element cannot sit inside :is(), so the tints are listed apart) */
.rdi .sf[data-k="read"] .sf-r.bad .sf-a::before,.rdi .sf[data-k="read"] .sf-r.bad .sf-b::before,.rdi .sf[data-k="read"] .sf-r.bad::before{visibility:hidden;opacity:0}
.rdi .sf[data-k="read"] .sf-r.bad .sf-v{color:var(--ink);font-weight:500}
.rdi .sf[data-k="read"] .sf-res{display:none}
/* 5: the mistake, worked out in dollars. */
.rdi .sf-mis,.rdi .sf-msg,.rdi .sf-end{background:var(--white);border-radius:14px;box-shadow:0 0 0 1px var(--line),0 18px 30px -24px rgba(10,19,34,.55)}
.rdi .sf-mis{padding:1.125rem 1.375rem 1.25rem}
.rdi .sf-mt{font-size:.9375rem;font-weight:600;color:var(--ink-3)}
.rdi .sf-mc{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.5rem;margin-top:.75rem;text-align:center}
.rdi .sf-mc p{display:grid;gap:.125rem}
.rdi .sf-mc small{font-size:.8125rem;line-height:1.3;color:var(--ink-3)}
.rdi .sf-mc b{font-size:clamp(1.75rem,1rem + 5cqi,3.25rem);font-weight:600;line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.rdi .sf-mc .b b,.rdi .sf-mc.one b{color:var(--bad)}
.rdi .sf-mc.one{grid-template-columns:minmax(0,1fr)}
.rdi .sf-mc.xl b{font-size:clamp(1.5rem,.75rem + 3.4cqi,2.5rem)}
.rdi .sf-up{padding:.3125rem .625rem;border-radius:999px;background:var(--bad);color:#fff;font-size:.875rem;font-weight:600;line-height:1}
.rdi .sf-mw{margin:1rem 0 0;border-top:1px solid var(--line)}
.rdi .sf-mw div{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--soft);font-size:1rem;line-height:1.35;color:var(--ink)}
.rdi .sf-mw dd{margin:0}
.rdi .sf-mw div:last-child{border-bottom:0;font-size:1.125rem;font-weight:600;color:var(--bad)}
.rdi .sf-mf{margin-top:.375rem;font-size:.8125rem;color:var(--ink-3)}
/* 6: the decision, as a message to the person. The visitor makes it: each choice is a button that plays its own outcome. */
.rdi .sf-msg{overflow:hidden}
.rdi .sf-mh{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.75rem 1.25rem;background:var(--person-lt)}
.rdi .sf-av{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--person);color:#fff;font-size:.875rem;font-weight:600}
.rdi .sf-who b{display:block;font-size:.9375rem;line-height:1.3;color:var(--ink)}
.rdi .sf-who small{display:block;font-size:.8125rem;line-height:1.3;color:var(--ink-3)}
.rdi .sf-stat{margin-left:auto;padding:.375rem .75rem;border-radius:999px;background:var(--bad);color:#fff;font-size:.8125rem;font-weight:600;line-height:1.1;white-space:nowrap}
.rdi .sf-mb{padding:1rem 1.25rem 1.25rem}
.rdi .sf-mk{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rdi .sf-mq{margin-top:.375rem;font-size:clamp(1rem,.9rem + .8cqi,1.25rem);line-height:1.45;color:var(--ink)}
.rdi .sf-msg:focus{outline:0}
.rdi .sf-ch{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.rdi .sf-cho{min-height:2.75rem;padding:.5rem 1rem;border-radius:10px;border:1.5px solid var(--line-2);background:var(--white);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;color:var(--ink);cursor:pointer}
.rdi .sf-cho:hover{border-color:var(--person)}
.rdi .sf-cho:focus-visible{outline:2px solid var(--person);outline-offset:2px}
.rdi .sf-cho[aria-pressed="true"]{background:var(--person);border-color:var(--person);color:#fff}
.rdi .sf-hint{margin-top:.625rem;font-size:.8125rem;line-height:1.4;color:var(--ink-3)}
.rdi .sf:not(.is-live) .sf-hint,.rdi .sf:not(.is-live) .sf-again{visibility:hidden}
.rdi .sf:not(.is-live) .sf-cho{pointer-events:none}
/* 7: the outcome, with who did what. */
.rdi .sf-ends{display:grid}
.rdi .sf-end{grid-area:1 / 1;align-self:start;visibility:hidden;padding:1.125rem 1.375rem 1.25rem}
.rdi .sf-end.on{visibility:inherit}
.rdi .sf-end:focus{outline:0}
.rdi .sf-et{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem}
.rdi .sf-et b{padding:.375rem .75rem;border-radius:999px;background:var(--bad);color:#fff;font-size:.875rem;font-weight:600;line-height:1.1}
.rdi .sf-et b.ok{background:var(--accent)}
.rdi .sf-et span{font-size:1.0625rem;line-height:1.4;font-weight:500;color:var(--ink)}
.rdi .sf-el{display:grid;gap:.625rem;margin:1rem 0 0;padding:0;list-style:none}
.rdi .sf-el li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.75rem;align-items:start;font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.rdi .sf-el i{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:8px;font-style:normal}
.rdi .sf-el .ai i{background:var(--ai-lt);color:var(--ai)}
.rdi .sf-el .rule i{background:var(--accent-lt);color:var(--accent)}
.rdi .sf-el .person i{background:var(--person-lt);color:var(--person)}
.rdi .sf-el .off i{background:var(--soft);color:var(--ink-3)}
.rdi .sf-el .off span{color:var(--ink-3)}
.rdi .sf-again{margin-top:.875rem}
.rdi .sf-ec{margin-top:1rem;padding:.625rem .875rem;border-radius:10px;background:var(--accent-lt);color:var(--accent-dk);font-size:.875rem;line-height:1.45}
/* The outcome's artefacts (rd3_wf_art()): what the choice sets going, drawn as the thing itself (an email, a chat message, a ledger entry,
   a task, a calendar item, a document, a change or a note) in the site's card style, beside who did what. Each layout differs at a glance. */
.rdi .sf-eg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.25rem;align-items:start;margin-top:1rem}
.rdi .sf-end.has-art .sf-el{margin-top:0;gap:.5rem}
.rdi .sf-end.has-art .sf-el li{font-size:.875rem;line-height:1.45;gap:.625rem}
.rdi .sf-end.has-art .sf-ec{margin-top:.75rem;font-size:.8125rem}
.rdi .sf-arts{display:grid;gap:.625rem;align-content:start;min-width:0}
.rdi .sf-ak{font-size:.8125rem;font-weight:600;line-height:1.35;color:var(--ink-2)}
.rdi .sf-art{position:relative;min-width:0;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(10,19,34,.05),0 14px 24px -22px rgba(10,19,34,.5)}
.rdi .sf-ab{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .4375rem;padding:.4375rem .75rem;border-bottom:1px solid var(--line);background:var(--soft);font-size:.75rem;font-weight:600;line-height:1.3;color:var(--ink-2)}
.rdi .sf-ab svg{width:.9375rem;height:.9375rem;color:var(--ink-3)}
.rdi .sf-aa{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.rdi .sf-aa b{color:var(--ink)}
.rdi .sf-as{flex:none;margin-left:auto;padding:.1875rem .5rem;border-radius:999px;background:var(--warn-lt);color:var(--warn);font-size:.75rem;font-weight:600;line-height:1.1}
.rdi .sf-as.ok{background:var(--accent-lt);color:var(--accent-dk)}
.rdi .sf-as.bad{background:var(--bad-lt);color:var(--bad)}
.rdi .sf-sm{flex:none;font-size:.75rem;font-weight:500;color:var(--ink-3)}
.rdi .sf-ai2{position:relative;display:grid;gap:.5rem;padding:.6875rem .875rem .75rem}
.rdi .sf-af{display:flex;flex-wrap:wrap;gap:.375rem;padding:.5rem .875rem .625rem;border-top:1px solid var(--soft)}
.rdi .sf-af span{display:inline-flex;align-items:center;gap:.3125rem;padding:.1875rem .5rem;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.2}
.rdi .sf-af svg{width:.8125rem;height:.8125rem}
.rdi .sf-af .ai{background:var(--ai-lt);color:var(--ai)}
.rdi .sf-af .person{background:var(--person-lt);color:var(--person)}
.rdi .sf-at{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.125rem .75rem}
.rdi .sf-at b{font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.rdi .sf-at span{font-size:.8125rem;color:var(--ink-3)}
.rdi .sf-at em{font-style:normal;padding:.125rem .5rem;border-radius:999px;background:var(--person-lt);color:var(--person);font-size:.75rem;font-weight:600}
.rdi .sf-am{margin-top:-.375rem;font-size:.8125rem;line-height:1.35;color:var(--ink-3)}
/* On a wide stage the outcome opens out past the story's column, so two artefacts sit side by side and the stage stays about as tall as the other scenes. */
@container sf (min-width:54rem){
  .rdi .l-end .sf-vis{margin-inline:calc((100% - min(60rem, 100cqi - 2.5rem)) / 2)}
  .rdi .sf-eg{grid-template-columns:minmax(0,1fr) 16.5rem}
  .rdi .n2 .sf-arts{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .rdi .n2 .sf-ak{grid-column:1 / -1}
}
/* An email: its header, then the body and attachments. */
.rdi .sf-amh{margin:0;padding-bottom:.375rem;border-bottom:1px solid var(--soft)}
.rdi .sf-amh div{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:.5rem;padding:.0625rem 0;font-size:.8125rem;line-height:1.4}
.rdi .sf-amh dt{color:var(--ink-3)}
.rdi .sf-amh dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.rdi .sf-amh .subj dd{font-weight:600}
.rdi .sf-amb p{font-size:.875rem;line-height:1.5;color:var(--ink)}
.rdi .sf-amb p+p{margin-top:.375rem}
.rdi .sf-aat{display:flex;flex-wrap:wrap;gap:.375rem;padding:0;list-style:none}
.rdi .sf-aat li{display:inline-flex;align-items:center;gap:.25rem;padding:.1875rem .5rem;border:1px solid var(--line);border-radius:6px;font-size:.75rem;color:var(--ink-2)}
.rdi .sf-aat svg{width:.8125rem;height:.8125rem}
/* A chat message: avatar, name, time, text. */
.rdi .sf-acm{display:grid;gap:.75rem;padding:0;list-style:none}
.rdi .sf-acm li{display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:.625rem}
.rdi .sf-aav{grid-row:span 2;display:grid;place-items:center;width:2rem;height:2rem;border-radius:8px;background:var(--person);color:#fff;font-size:.75rem;font-weight:700}
.rdi .sf-aav.ai{background:var(--ai)}
.rdi .sf-amw{display:flex;flex-wrap:wrap;align-items:baseline;gap:.375rem;line-height:1.3}
.rdi .sf-amw b{font-size:.875rem;color:var(--ink)}
.rdi .sf-amw em{font-style:normal;padding:0 .25rem;border-radius:3px;background:var(--soft);color:var(--ink-3);font-size:.75rem;font-weight:600}
.rdi .sf-amw small{font-size:.75rem;color:var(--ink-3)}
.rdi .sf-amt{font-size:.875rem;line-height:1.5;color:var(--ink)}
/* A ledger entry or a document: lines, totals, a stamp. On paper ('paper'), it is the document itself, sent back. */
.rdi .sf-abl{margin:0;padding:0;list-style:none}
.rdi .sf-abl li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.75rem;padding:.3125rem .5rem;margin-inline:-.5rem;border-top:1px solid var(--soft);font-size:.875rem;line-height:1.35;color:var(--ink)}
.rdi .sf-abl small{display:block;font-size:.75rem;color:var(--ink-3)}
.rdi .sf-abl .fl{grid-column:1 / -1;font-weight:600}
.rdi .sf-abl li.hl{border-radius:6px;background:var(--bad-lt)}
.rdi .sf-abl li.hl .v,.rdi .sf-abl li.hl .fl{color:var(--bad)}
.rdi .sf-abl li.acc{border-radius:6px;background:var(--warn-lt)}
.rdi .sf-abl li.acc .fl{color:var(--warn)}
.rdi .sf-abl li.cut>span:first-child{color:var(--ink-3);text-decoration:line-through}
.rdi .sf-abl li.cut .v{color:var(--bad);font-weight:600}
.rdi .sf-art .sf-nw{white-space:nowrap}
.rdi .sf-abs{margin:0}
.rdi .sf-abs div{display:flex;justify-content:space-between;gap:.75rem;padding:.125rem 0;font-size:.8125rem;color:var(--ink-3)}
.rdi .sf-abs dd{margin:0}
.rdi .sf-abs .tot{margin-top:.125rem;padding-top:.375rem;border-top:2px solid var(--ink);font-size:.9375rem;font-weight:600;color:var(--ink)}
.rdi .sf-art.paper{border-radius:3px}
.rdi .sf-art.paper::after{content:"";position:absolute;top:-1px;right:-1px;width:18px;height:18px;background:linear-gradient(225deg,var(--page) 50%,#e7e4dd 50%);border-bottom-left-radius:3px}
.rdi .sf-art.paper .sf-ab{background:var(--white);padding-right:1.5rem}
.rdi .sf-ast{justify-self:center;margin:.125rem 0;padding:.1875rem .75rem;border:2.5px solid currentColor;border-radius:6px;background:rgba(255,255,255,.88);color:var(--bad);font-size:1.0625rem;font-weight:700;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-8deg)}
.rdi .sf-ast.ok{color:var(--accent)}
.rdi .sf-an{padding:.4375rem .625rem;border-radius:8px;background:var(--soft);font-size:.8125rem;line-height:1.45;color:var(--ink)}
/* A task: a checklist with what is done and what is still open. */
.rdi .sf-ati{margin:0;padding:0;list-style:none}
.rdi .sf-ati li{display:grid;grid-template-columns:1.125rem minmax(0,1fr);gap:.5rem;align-items:start;padding:.3125rem 0;border-top:1px solid var(--soft);font-size:.875rem;line-height:1.4;color:var(--ink);font-weight:500}
.rdi .sf-ati i{display:grid;place-items:center;width:1.125rem;height:1.125rem;margin-top:.0625rem;border:1.5px solid var(--line-2);border-radius:4px;font-size:.75rem;font-style:normal;line-height:1;color:#fff}
.rdi .sf-ati .done{color:var(--ink-3);font-weight:400}
.rdi .sf-ati .done i{background:var(--accent);border-color:var(--accent)}
.rdi .sf-ati .todo i{border-color:var(--bad)}
/* Labelled details, and a record's change from the old value to the new. */
.rdi .sf-ar{margin:0}
.rdi .sf-ar div{display:grid;grid-template-columns:minmax(4.5rem,max-content) minmax(0,1fr);gap:.75rem;padding:.1875rem 0;font-size:.8125rem;line-height:1.4}
.rdi .sf-ar dt{color:var(--ink-3)}
.rdi .sf-ar dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.rdi .sf-ar s{color:var(--ink-3)}
.rdi .sf-ar i{margin:0 .375rem;font-style:normal;color:var(--ink-3)}
.rdi .sf-ar b{font-weight:600}
.rdi .a-chg .sf-ar div{padding:.375rem 0;border-top:1px solid var(--soft)}
.rdi .a-chg .sf-ar dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .375rem}
.rdi .a-chg .sf-ar i{margin:0}
/* A calendar item: the date block beside what the call is for. */
.rdi .sf-acal{display:grid;grid-template-columns:4.25rem minmax(0,1fr);gap:.75rem;align-items:start}
.rdi .sf-acal>div{display:grid;gap:.375rem;min-width:0}
.rdi .sf-acd{display:grid;gap:.125rem;padding:.5rem .25rem;border-radius:10px;background:var(--accent-lt);color:var(--accent-dk);text-align:center}
.rdi .sf-acd small{font-size:.75rem;font-weight:600;line-height:1.2}
.rdi .sf-acd b{font-size:1rem;line-height:1.15}
.rdi .a-cal .sf-at b,.rdi .a-doc .sf-at b,.rdi .a-note .sf-at b,.rdi .a-task .sf-at b,.rdi .a-chg .sf-at b{font-size:.9375rem;letter-spacing:0;text-transform:none}
/* A note on a record: the note on a warm ground. A document sent: a report's page. */
.rdi .a-note .sf-ai2{background:var(--warn-lt)}
.rdi .a-note .sf-an{background:rgba(255,255,255,.7)}
.rdi .a-doc .sf-ai2{border-left:3px solid var(--accent)}
/* Phones and narrow columns: the documents stack, the two field cards become one, with a tick or a cross between the ordered and the billed value. */
@container sf (max-width:35.99rem){
  .rdi .sf-st{--sf-k:2.25rem;--sf-x:0px;--sf-in:translateY(1rem);padding:1rem .75rem}
  .rdi .sf-docs{grid-template-columns:minmax(0,1fr)}
  .rdi .sf-doc{padding:.625rem .875rem .75rem}
  .rdi .sf-dt{margin-top:.5rem}
  .rdi .sf-dl li{padding:.3125rem 0}
  .rdi .sf-cb.a{width:100%}
  .rdi .sf-cb.b{display:none}
  .rdi .sf-r{grid-template-areas:"l l l" "a k b"}
  .rdi .sf-r>.sf-a{display:contents}
  .rdi .sf-r>.sf-a>*{grid-area:a;padding:.125rem 0 .5rem .875rem}
  .rdi .sf-r>.sf-a>.sf-lb,.rdi .sf-r>.sf-a>.sf-ai{grid-area:l;padding:.5rem .875rem 0;border-top:1px solid var(--soft)}
  .rdi .sf-r>.sf-b{grid-area:b;border-top:0;padding:.125rem .875rem .5rem 0;align-content:start}
  .rdi .sf-r>.sf-b>.sf-lb,.rdi .sf-r>.sf-b>.sf-ai{display:none}
  .rdi .sf-k{grid-area:k;align-self:start;margin-top:.0625rem}
  .rdi .sf-w{display:none}
  .rdi .sf-m{width:1.5rem;height:1.5rem;font-size:.75rem}
  .rdi .sf-h{border-radius:12px 12px 0 0;background:var(--ai-lt)}
  .rdi .sf-fx.by-rec .sf-h{background:var(--soft)}
  .rdi .sf-h>.sf-a>.sf-ai{border-top:0;padding-top:.625rem}
  .rdi .sf-h>.sf-a>.sf-f{padding-bottom:.625rem}
  .rdi .sf-h>.sf-b{background:none;padding-bottom:.625rem;align-content:end}
  .rdi .sf-r.bad .sf-a::before,.rdi .sf-r.bad .sf-b::before{display:none}
  .rdi .sf-r.bad::before{content:"";position:absolute;inset:0;background:var(--bad-lt)}
  .rdi .sf-r.bad:last-child::before{border-radius:0 0 12px 12px}
  .rdi .sf-r>*,.rdi .sf-r>.sf-a>*{position:relative}
  .rdi .sf-mis,.rdi .sf-end{padding:1rem}
  .rdi .sf-eg{grid-template-columns:minmax(0,1fr);gap:.875rem;margin-top:.75rem}
  .rdi .sf-end.has-art .sf-et span{font-size:1rem}
  .rdi .sf-end.has-art .sf-el{gap:.375rem}
  .rdi .sf-end.has-art .sf-el li{grid-template-columns:1.375rem minmax(0,1fr);gap:.5rem;font-size:.8125rem;line-height:1.4}
  .rdi .sf-end.has-art .sf-el i{width:1.375rem;height:1.375rem;border-radius:6px}
  .rdi .sf-end.has-art .sf-el svg{width:.875rem;height:.875rem}
  .rdi .sf-end.has-art .sf-ec{margin-top:.625rem;padding:.5rem .75rem;line-height:1.4}
  .rdi .sf-end.has-art .sf-again{margin-top:.625rem}
  .rdi .sf-amb p{font-size:.8125rem;line-height:1.45}
  .rdi .sf-amt{font-size:.8125rem;line-height:1.45}
  .rdi .sf-acal{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .rdi .sf-acd{display:flex;align-items:baseline;justify-content:flex-start;gap:.5rem;padding:.375rem .625rem;text-align:left}
  .rdi .sf-ar div{grid-template-columns:5.25rem minmax(0,1fr);gap:.5rem}
  .rdi .sf-ai2{padding:.625rem .75rem .6875rem}
  .rdi .sf-af{padding:.4375rem .75rem .5625rem}
  .rdi .sf-ab{padding:.4375rem .625rem}
  /* Reading only, no joins yet: the mark column closes up so the values wrap less. */
  .rdi .sf[data-k="read"] .sf-r:not(.sf-h){grid-template-columns:minmax(0,1fr) .5rem minmax(0,1fr)}
  .rdi .sf-mb{padding:.875rem 1rem 1rem}
  .rdi .sf-mh{padding:.75rem 1rem}
  .rdi .sf-stat{margin-left:0}
  .rdi .sf-mc{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .rdi .sf-mc .a{grid-area:1 / 1}
  .rdi .sf-mc .b{grid-area:1 / 2}
  .rdi .sf-up{grid-area:2 / 1 / 3 / 3;justify-self:center}
  .rdi .sf-mc b{font-size:clamp(1.5rem,.75rem + 5cqi,2rem)}
  .rdi .sf-mc.long{grid-template-columns:minmax(0,1fr);gap:.375rem}
  .rdi .sf-mc.long>*{grid-area:auto}
  .rdi .sf-f em{display:block}
  .rdi .sf-dot{display:none}
  .rdi .sf-fn{white-space:normal}
  .rdi .sf-ds div{padding:.125rem 0}
  /* On a phone the order, read in full in scene 1 (where it stands alone), folds to its header and total once the bill sits under it,
     so the documents are no taller than the other scenes. */
  .rdi .sf:not([data-k="docs1"]) .sf-doc.a :is(.sf-dm,.sf-dl,.sf-ds div:not(.tot)){display:none}
  .rdi .sf:not([data-k="docs1"]) .sf-doc.a .sf-ds{border-top:0;padding-top:0}
  .rdi .sf[data-k="docs1"] .sf-doc.b{display:none}
}
/* Motion: only while a run plays, one ease, the shared durations. Pause holds every animation where it is. */
@media (prefers-reduced-motion:no-preference){
  .rdi .sf.play .sf-c.on :is(h3,h4){animation:sf-rise var(--dur-2) var(--ease-out) both}
  .rdi .sf.play .sf-c.on p{animation:sf-rise var(--dur-2) var(--ease-out) .25s both}
  .rdi .sf.play .sf-l.in{animation:sf-fade var(--dur-2) var(--ease-out) .15s both}
  .rdi .sf.play .sf-l.out{visibility:visible;opacity:1;animation:sf-gone var(--dur-1) var(--ease-out) both}
  .rdi .sf[data-k="docs1"].play .sf-doc.a{animation:sf-up var(--dur-3) var(--ease-out) .2s both}
  .rdi .sf[data-k="docs2"].play .sf-doc.a{animation:sf-slide var(--dur-3) var(--ease-out) .2s both}
  .rdi .sf[data-k="docs2"].play .sf-doc.b{animation:sf-from var(--dur-3) var(--ease-out) .8s both}
  .rdi .sf[data-k="read"].play .l-docs.out{animation:sf-gone var(--dur-2) var(--ease-out) 2s both}
  .rdi .sf[data-k="read"].play .l-docs.out .sf-doc::before{animation:sf-scan 1.4s var(--ease-in-out) .3s both}
  .rdi .sf[data-k="read"].play .l-docs.out .sf-doc.b::before{animation-delay:.55s}
  .rdi .sf[data-k="read"].play .l-fields.in{animation:none}
  .rdi .sf[data-k="read"].play .l-fields .sf-vis{animation:sf-fade var(--dur-2) var(--ease-out) 2s both}
  .rdi .sf[data-k="read"].play .sf-r:not(.sf-h){animation:sf-rise var(--dur-2) var(--ease-out) both;animation-delay:calc(2.1s + var(--i) * .15s)}
  .rdi .sf[data-k="match"].play .sf-w{animation:sf-grow .4s var(--ease-out) both;animation-delay:calc(.6s + var(--i) * .45s)}
  .rdi .sf[data-k="match"].play .sf-m{animation:sf-pop .4s var(--ease-out) both;animation-delay:calc(.9s + var(--i) * .45s)}
  .rdi .sf[data-k="match"].play .sf-r.bad .sf-a::before,.rdi .sf[data-k="match"].play .sf-r.bad .sf-b::before,.rdi .sf[data-k="match"].play .sf-r.bad::before{animation:sf-fade .4s var(--ease-out) both;animation-delay:calc(1s + var(--i) * .45s)}
  .rdi .sf[data-k="match"].play .sf-r.bad .sf-v{animation:sf-red 1ms linear both;animation-delay:calc(1s + var(--i) * .45s)}
  .rdi .sf[data-k="match"].play .sf-ck li{animation:sf-rise var(--dur-2) var(--ease-out) both;animation-delay:calc(3.2s + var(--j) * .2s)}
  .rdi .sf[data-k="mistake"].play .l-mis.in{animation-name:sf-zoom;animation-duration:var(--dur-3)}
  .rdi .sf[data-k="mistake"].play .sf-mw div{animation:sf-rise var(--dur-2) var(--ease-out) both;animation-delay:calc(1.2s + var(--i) * .4s)}
  .rdi .sf[data-k="mistake"].play .sf-mf{animation:sf-rise var(--dur-2) var(--ease-out) 2.5s both}
  .rdi .sf[data-k="decide"].play .l-dec.in{animation-name:sf-up;animation-duration:var(--dur-3)}
  .rdi .sf[data-k="decide"].play .sf-mk{animation:sf-rise var(--dur-2) var(--ease-out) .6s both}
  .rdi .sf[data-k="decide"].play .sf-mq{animation:sf-rise var(--dur-2) var(--ease-out) .8s both}
  .rdi .sf[data-k="decide"].play .sf-ch,.rdi .sf[data-k="decide"].play .sf-hint{animation:sf-rise var(--dur-2) var(--ease-out) 1.3s both}
  .rdi .sf[data-k="decide"].play .sf-stat{animation:sf-pop var(--dur-2) var(--ease-out) 1.8s both}
  .rdi .sf[data-k="end"].play .sf-end.on .sf-el li{animation:sf-rise var(--dur-2) var(--ease-out) both}
  .rdi .sf[data-k="end"].play .sf-el li:nth-child(2){animation-delay:.3s}
  .rdi .sf[data-k="end"].play .sf-el li:nth-child(3){animation-delay:.6s}
  .rdi .sf[data-k="end"].play .sf-end.on :is(.sf-ec,.sf-again){animation:sf-rise var(--dur-2) var(--ease-out) 1.1s both}
  .rdi .sf[data-k="end"].play .sf-end.on .sf-ak{animation:sf-rise var(--dur-2) var(--ease-out) .1s both}
  .rdi .sf[data-k="end"].play .sf-end.on .sf-art{animation:sf-up var(--dur-3) var(--ease-out) .25s both}
  .rdi .sf[data-k="end"].play .sf-end.on .sf-art+.sf-art{animation-delay:.7s}
  .rdi .sf[data-k="end"].play .sf-end.on .sf-ast{animation:sf-stamp var(--dur-2) var(--ease-out) .9s both}
  .rdi .sf.paused *,.rdi .sf.paused *::before,.rdi .sf.paused *::after{animation-play-state:paused!important}
}
@keyframes sf-rise{from{opacity:0;transform:translateY(.625rem)}}
@keyframes sf-up{from{opacity:0;transform:translateY(1.25rem)}}
@keyframes sf-fade{from{opacity:0}}
@keyframes sf-gone{to{opacity:0;visibility:hidden}}
@keyframes sf-slide{from{transform:translateX(var(--sf-x))}}
@keyframes sf-from{from{opacity:0;transform:var(--sf-in)}}
@keyframes sf-scan{from{transform:translateY(-101%)}to{transform:translateY(101%)}}
@keyframes sf-grow{from{transform:scaleX(0)}}
@keyframes sf-pop{from{opacity:0;transform:scale(.6)}}
@keyframes sf-red{from{color:var(--ink)}}
@keyframes sf-zoom{from{opacity:0;transform:scale(.96)}}
@keyframes sf-stamp{from{opacity:0;transform:rotate(-8deg) scale(1.35)}}