/* Feature showcase — one feature at a time, each shown as an animated
   miniature of the real app.

   The miniatures are drawn in HTML/CSS (built by showcase.js), not recorded:
   sharp at any size, translated with the page, a few KB. The whole "app
   window" is laid out on a fixed 64em × 34em canvas whose font-size is tied
   to the window's width (container query), so it SCALES as one picture rather
   than reflowing — every row is always shown whole, never cropped.

   Chip colours mirror the app's station rail (frontend StationRail.css). */

/* ---------- Layout ----------
   A segmented bar across the top names every feature; below it, the active
   feature's story (number, headline, description, controls) sits beside its
   picture. Only ONE feature's words are ever on screen, so nothing competes
   with the demo for attention. */
.showcase{
  display:grid;grid-template-columns:minmax(270px,340px) 1fr;
  grid-template-areas:"tabs tabs" "copy win";
  column-gap:56px;row-gap:44px;
}

/* ---------- Feature bar (horizontal tabs) ---------- */
.sc-tabs{
  grid-area:tabs;position:relative;display:flex;gap:2px;padding:5px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 1px 2px rgba(29,29,31,.04),0 18px 40px -34px rgba(29,29,31,.4);
}
/* The ink pill: glides under the active tab (JS sets its x and width) and
   fills with a warm hairline as that feature's demo plays (--p, 0 → 1). */
.sc-ink{
  position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;
  background:var(--ink);overflow:hidden;pointer-events:none;
  box-shadow:0 6px 16px -8px rgba(29,29,31,.55);
}
.sc-tabs.ready .sc-ink{transition:transform .55s var(--ease),width .55s var(--ease)}
.sc-ink-fill{
  position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  /* The hero headline's pastel band (index.html h1), as a progress line. */
  background:linear-gradient(90deg,#a89489,#d9a988 55%,#d29a92);
  transform-origin:left;transform:scaleX(var(--p,0));opacity:.95;
}
.sc-tab{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;z-index:1;
  flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:999px;white-space:nowrap;
  color:var(--ink-soft);transition:color .35s ease,background .25s ease;
}
.sc-tab:hover{color:var(--ink);background:rgba(0,0,0,.035)}
.sc-tab[aria-selected="true"],.sc-tab[aria-selected="true"]:hover{color:#fff;background:transparent}
.sc-tab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sc-num{font-size:11px;font-weight:600;letter-spacing:.06em;opacity:.55;font-variant-numeric:tabular-nums}
.sc-short{font-size:14.5px;font-weight:600;letter-spacing:-0.005em;overflow:hidden;text-overflow:ellipsis}
/* Kept for aria-labelledby and as the caption's source; never drawn here. */
.sc-title,.sc-desc-wrap{display:none}

/* ---------- Body: the story beside the picture ---------- */
.sc-body{display:contents}
.sc-copy{grid-area:copy;display:flex;flex-direction:column;min-width:0;padding-top:6px}
.sc-kicker{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.sc-kicker b{color:var(--ink);font-weight:600}
.sc-caption{margin-top:18px}
.sc-caption h3{
  font-size:clamp(26px,2.7vw,34px);line-height:1.12;letter-spacing:-0.025em;font-weight:600;
  text-wrap:balance;margin-bottom:16px;
}
.sc-caption p{font-size:16px;color:var(--ink-soft);line-height:1.6;max-width:40ch;text-wrap:pretty}
/* A feature change: the words rise out of a soft blur, and the hero's pastel
   band passes once through the headline. */
.sc-copy.swap .sc-kicker{animation:sc-rise .6s var(--ease) both}
.sc-copy.swap .sc-caption h3{animation:sc-rise .7s var(--ease) .05s both}
.sc-copy.swap .sc-caption p{animation:sc-rise .7s var(--ease) .14s both}
@keyframes sc-rise{from{opacity:0;transform:translateY(12px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sc-copy.swap .sc-caption h3{
    background:linear-gradient(100deg,
      var(--ink) 0%, var(--ink) 38%, #a89489 44%, #d9a988 49%, #d29a92 54%, var(--ink) 62%, var(--ink) 100%);
    background-size:300% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:sc-rise .7s var(--ease) .05s both,sc-sweep 1.8s cubic-bezier(.45,0,.25,1) .15s both;
  }
}
@keyframes sc-sweep{from{background-position:100% 0}to{background-position:0 0}}

/* Next: the site's outlined pill (.btn-ghost, like the language toggle) —
   plainly a button on touch screens too, yet secondary to the dark CTA. */
.sc-next{
  align-self:flex-start;max-width:100%;min-width:0;margin-top:26px;
  font-family:inherit;background:var(--paper-2);padding:10px 18px 10px 20px;
}
.sc-next:hover{border-color:var(--ink)}
.sc-next-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-next:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sc-next svg{width:16px;height:16px;flex-shrink:0;transition:transform .25s var(--ease)}
.sc-next:hover svg{transform:translateX(3px)}
/* After one full loop of a demo, the Next button nods once — a hint that
   there is more, never a timer that moves the visitor on. */
.sc-next.nudge{animation:nudge 1.4s var(--ease) 1}
@keyframes nudge{0%,100%{transform:none}30%{transform:translateX(4px)}55%{transform:translateX(-1px)}}

/* ---------- Stage ---------- */
.sc-stage{grid-area:win;display:flex;flex-direction:column;align-items:flex-end;gap:12px;min-width:0;align-self:start}
.sc-stage .sc-window{align-self:stretch}
/* Pause, just under the picture's corner — at the motion it stops, without
   covering any of it (every demo runs to its own edges). */
.sc-pause{
  all:unset;box-sizing:border-box;cursor:pointer;flex-shrink:0;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);
  transition:color .2s ease,border-color .2s ease;
}
.sc-pause:hover,.sc-pause.on{color:var(--ink);border-color:var(--ink)}
.sc-pause[hidden]{display:none}
.sc-pause:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sc-pause svg{width:12px;height:12px}
.sc-window{
  container-type:inline-size;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 30px 60px -40px rgba(29,29,31,.35),0 2px 6px -4px rgba(29,29,31,.12);
  overflow:hidden;touch-action:pan-y;
}

/* ---------- The app window (scaled canvas) ---------- */
.cv{
  --cv-w:64;
  font-size:calc(100cqw / var(--cv-w));
  width:64em;height:34em;display:flex;line-height:1.35;color:var(--ink);
  user-select:none;-webkit-user-select:none;
}
.cv-main{position:relative;flex:1;min-width:0;background:var(--paper)}
.dp{
  position:absolute;inset:0;padding:1.7em 2em;
  opacity:0;visibility:hidden;transform:translateY(.6em);
  transition:opacity .35s ease,transform .45s var(--ease),visibility 0s linear .35s;
}
.dp.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease .08s,transform .45s var(--ease) .08s,visibility 0s}

/* Shared app bits */
.cv-head{display:flex;align-items:center;gap:1em;margin-bottom:1.2em;min-height:2.6em}
.cv-title{font-size:1.75em;font-weight:650;letter-spacing:-0.015em}
.cv-sub{color:var(--ink-soft);font-size:1.05em}
.cv-sp{flex:1}
.cv-btn{
  display:inline-flex;align-items:center;height:2.5em;padding:0 1.15em;border-radius:2em;
  border:1px solid rgba(0,0,0,.12);background:var(--paper-2);font-weight:600;font-size:.98em;
  transition:transform .15s ease,background .2s ease,color .2s ease;
}
.cv-btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.cv-btn.press{transform:scale(.94)}
.cv-card{background:var(--paper-2);border:1px solid var(--line);border-radius:.9em}
.cv-label{font-size:.82em;font-weight:600;color:var(--ink-soft);letter-spacing:.02em;text-transform:uppercase}
.caret{display:inline-block;width:1px;height:1.1em;background:var(--ink);vertical-align:-.15em;margin-left:1px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.focus{box-shadow:0 0 0 2px var(--ink) !important;border-color:transparent !important}

/* Station chips — app states: idle / waiting / in progress / done */
.chip{
  display:inline-flex;align-items:center;flex-shrink:0;
  height:2.25em;padding:0 .56em;border-radius:.55em;
  border:1px solid #d1d5db;color:#4b5563;background:transparent;
  font-size:.9em;font-weight:600;white-space:nowrap;
  transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.chip::before{ /* the tick grows in, so the chips after it slide rather than jump */
  content:"\2713";display:inline-block;width:0;margin-right:0;opacity:0;overflow:hidden;font-weight:700;
  transition:width .35s var(--ease),margin .35s var(--ease),opacity .35s ease;
}
.chip.w{background:#fffbeb;color:#b45309;border-color:rgba(180,83,9,.35)}
.chip.p{background:#4338ca;color:#fff;border-color:#4338ca;box-shadow:0 0 0 2px rgba(67,56,202,.22)}
.chip.c{background:#dcfce7;color:#166534;border-color:#dcfce7}
.chip.c::before{width:.85em;margin-right:.3em;opacity:1}
.chip.pop{animation:pop .4s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* 1 — Home board */
.bd{overflow:hidden}
.bd-th,.bd-row{display:grid;grid-template-columns:var(--bd-name,15em) 1fr;align-items:center;gap:1em;padding:0 1.2em}
.bd-th{height:2.7em;background:#ececef;font-weight:600;font-size:.95em;border-bottom:1px solid var(--line)}
.bd-count{display:inline-grid;place-items:center;min-width:1.9em;height:1.5em;margin-left:.5em;border-radius:1em;background:rgba(0,0,0,.08);font-size:.85em}
.bd-row{height:4.1em;border-top:1px solid var(--line);transition:opacity .6s ease,background .6s ease}
.bd-row:first-of-type{border-top:0}
.bd-row.out{opacity:.42}
.bd-name{font-weight:600;font-size:1.05em;white-space:nowrap}
.bd-meta{display:flex;align-items:center;gap:.45em;color:var(--ink-soft);font-size:.92em;margin-top:.15em;white-space:nowrap}
.bd-dot{width:.7em;height:.7em;border-radius:50%;border:1px solid #9ca3af;flex-shrink:0;transition:background .35s,border-color .35s}
.bd-row.arrived .bd-dot{background:#1a7f37;border-color:#1a7f37}
.bd-chips{display:flex;gap:.38em}

/* 2 — Visit view (the chart's Appointments tab) */
.dp-col{display:flex;flex-direction:column}
.dp-col .cv-head{margin-bottom:.7em}
.ex-tabs{display:flex;gap:1.8em;border-bottom:1px solid var(--line);margin-bottom:.8em;font-weight:600;color:var(--ink-soft);font-size:.95em}
.ex-tabs span{padding-bottom:.55em}
.ex-tabs .on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.ex-save{display:inline-flex;align-items:center;gap:.4em;color:var(--ink-soft);font-size:.95em;font-weight:500;opacity:0;transition:opacity .3s ease}
.ex-save.show{opacity:1}
.ex-save.ok{color:#1a7f37}
.ex-h{font-size:.85em;font-weight:700;color:var(--ink-soft);letter-spacing:.05em}
.vx-rail{display:flex;gap:.4em;margin-bottom:.75em;font-size:.92em}
.vx-steps{display:flex;gap:.4em;margin-bottom:.75em}
.vx-step{
  display:inline-flex;align-items:center;height:2.2em;padding:0 .95em;border-radius:2em;
  font-weight:600;font-size:.92em;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.vx-step.done{color:var(--ink)}
.vx-step.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.vx-view{position:relative;flex:1;min-height:0;overflow:hidden}
.vx-scroll{position:relative;transition:transform 1s var(--ease)}
.vx-sec + .vx-sec{border-top:1px solid var(--line)}
.vx-sec-h{padding:.75em 1.3em .1em;font-size:.8em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.vx-page{padding:.45em 1.3em .9em}
.vx-page > .cv-label{display:block;margin-bottom:.6em}
.vx-proc{display:flex;align-items:center;justify-content:space-between;color:var(--ink-soft);font-size:.95em}
.vx-mt{display:block;margin-top:.9em}
/* flowsheet */
.fs{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums}
.fs th{font-weight:600;color:var(--ink-soft);font-size:.86em;padding:.3em .4em;text-align:center;white-space:nowrap}
.fs th.fs-g{color:var(--ink);border-bottom:1px solid var(--line)}
.fs th.fs-date,.fs td.fs-date{text-align:left;width:7em}
.fs td{padding:.15em .25em;text-align:center;height:2.5em;border-top:1px solid var(--line);white-space:nowrap;color:var(--ink-soft)}
.fs tr.fs-now td{color:var(--ink);font-weight:600;background:#fafafb}
.fs tr.fs-now td:not(.fs-date){box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);border-radius:.4em;transition:box-shadow .2s ease}
.fs tr.fs-now td.focus{box-shadow:inset 0 0 0 2px var(--ink)}
/* segment exam */
.sg-top{display:flex;align-items:center;margin-bottom:.2em}
.sg-same{height:2.1em;font-size:.9em}
.sg-row{display:grid;grid-template-columns:11em 1fr 1fr;gap:.6em;align-items:center;margin-top:.35em}
.sg-h{margin-top:0}
.sg-l{font-weight:600;font-size:.95em}
.sg-cell{
  height:2.15em;display:flex;align-items:center;padding:0 .7em;border-radius:.55em;
  border:1px solid rgba(0,0,0,.12);background:var(--paper-2);white-space:nowrap;transition:box-shadow .2s ease,background .8s ease;
}
.sg-cell.flash{animation:flash 1s ease}
@keyframes flash{from{background:#e0e7ff}to{background:var(--paper-2)}}
.sg-bar{display:flex;align-items:center;gap:.8em;margin-top:.55em;min-height:2.2em}
.sg-bar-l{font-size:.82em;font-weight:600;color:var(--ink-soft)}
.sg-pills{display:flex;gap:.4em}
.qf-pill{
  display:inline-flex;align-items:center;height:2.1em;padding:0 .8em;border-radius:2em;
  background:#f0f0f3;font-weight:600;font-size:.9em;transition:background .15s ease,color .15s ease;
}
.qf-pill.press{background:var(--ink);color:#fff}
/* plan / dx */
.vx-plan{display:grid;grid-template-columns:1.35fr 1fr;gap:1.4em}
.vx-col{min-width:0}
.vx-col > .cv-label{display:block;margin-bottom:.45em}
.dx-wrap{position:relative}
.dx-in{display:flex;align-items:center;height:2.4em;padding:0 .8em;border-radius:.6em;border:1px solid rgba(0,0,0,.12);background:var(--paper-2)}
.dx-in:not(.focus) .caret{display:none}
.dx-menu{
  position:absolute;left:0;right:0;top:2.7em;z-index:3;padding:.3em;background:var(--paper-2);
  border:1px solid var(--line);border-radius:.7em;box-shadow:0 1.2em 2.4em -1em rgba(0,0,0,.25);
  opacity:0;transform:translateY(-.3em);transition:opacity .2s ease,transform .25s var(--ease);
}
.dx-menu.open{opacity:1;transform:none}
.dx-opt{display:flex;gap:.7em;padding:.5em .6em;border-radius:.45em;font-size:.95em}
.dx-opt.hl{background:#f0f0f3}
.dx-opt b{color:#3730a3;min-width:3.4em}
.dx-row{
  display:flex;align-items:center;gap:.6em;margin-top:.5em;padding:.45em .7em;border-radius:.6em;background:#f6f6f8;font-size:.95em;
  opacity:0;transform:translateY(.3em);transition:opacity .35s ease,transform .45s var(--ease);
}
.dx-row.show{opacity:1;transform:none}
.dx-row b{color:#3730a3}
.dx-eye{margin-left:auto;font-weight:700;font-size:.85em;padding:.15em .5em;border-radius:.4em;border:1px solid rgba(0,0,0,.15)}
.dx-prim{font-size:.82em;font-weight:600;color:#166534;background:#dcfce7;padding:.15em .5em;border-radius:.4em}
.pl-box{min-height:3.2em;padding:.6em .8em;border-radius:.6em;border:1px solid rgba(0,0,0,.12);background:var(--paper-2);font-size:.95em}
.fu-card{
  padding:1em 1.1em;border-radius:.8em;border:1px solid var(--line);background:#fafafb;
  display:flex;flex-direction:column;gap:.5em;opacity:0;transform:translateY(.5em);transition:opacity .4s ease,transform .5s var(--ease);
}
.fu-card.show{opacity:1;transform:none}
.fu-card b{font-size:1.2em;font-weight:650}
.fu-tests{display:flex;gap:.35em}

/* 3 — Scheduling */
.sch{display:grid;grid-template-columns:31em 1fr;gap:1.4em;height:calc(100% - 3.8em)}
.sch-form{padding:1.1em 1.3em;display:flex;flex-direction:column;gap:.65em}
.sch-f{display:grid;grid-template-columns:7.2em 1fr;align-items:center;gap:.8em;position:relative}
.sch-f > .cv-label{font-size:.78em}
.sch-in{
  display:flex;align-items:center;height:2.45em;padding:0 .8em;border-radius:.6em;
  border:1px solid rgba(0,0,0,.12);background:var(--paper-2);white-space:nowrap;transition:box-shadow .2s ease;
}
.sch-in.ph{color:var(--ink-faint)}
.sch-in.sel::after{content:"";margin-left:auto;border:.3em solid transparent;border-top-color:var(--ink-soft);transform:translateY(.15em)}
.sch-menu{
  position:absolute;left:8em;right:0;top:2.8em;z-index:3;padding:.35em;
  background:var(--paper-2);border:1px solid var(--line);border-radius:.7em;
  box-shadow:0 1.2em 2.4em -1em rgba(0,0,0,.25);
  opacity:0;transform:translateY(-.4em);pointer-events:none;transition:opacity .2s ease,transform .25s var(--ease);
}
.sch-menu.open{opacity:1;transform:none}
.sch-opt{padding:.55em .7em;border-radius:.45em;transition:background .15s ease}
.sch-opt.hl{background:#f0f0f3}
.sch-chips{display:flex;flex-wrap:wrap;gap:.4em;min-height:2.25em;align-items:center}
.sch-steps{display:flex;align-items:center;flex-wrap:wrap;gap:.35em;min-height:2.25em;font-size:.92em}
.sch-step{display:inline-flex;align-items:center;height:2.1em;padding:0 .65em;border-radius:.5em;background:#f0f0f3;font-weight:600;opacity:0;transition:opacity .3s ease}
.sch-step.show{opacity:1}
.sch-arrow{color:var(--ink-faint);opacity:0;transition:opacity .3s ease}
.sch-arrow.show{opacity:1}
.sch-actions{display:flex;justify-content:flex-end;margin-top:auto}
.sch-cal{position:relative;overflow:hidden;display:flex;flex-direction:column}
.sch-cal-h{display:flex;justify-content:space-between;align-items:baseline;padding:.9em 1.1em;border-bottom:1px solid var(--line);font-weight:600}
.sch-cal-h span{color:var(--ink-soft);font-weight:500;font-size:.92em}
.sch-grid{position:relative;flex:1;margin:0 .8em 0 4em}
.sch-hr{position:absolute;left:-3.3em;right:0;border-top:1px solid var(--line);font-size:.8em;color:var(--ink-faint)}
.sch-hr span{position:relative;top:-.7em;background:var(--paper-2);padding-right:.5em}
.sch-ev{
  position:absolute;left:.2em;right:.2em;border-radius:.45em;padding:.3em .6em;
  background:#eceffd;border-left:.25em solid #4f46e5;font-size:.86em;overflow:hidden;line-height:1.25;
}
.sch-ev b{font-weight:600}
.sch-ev span{display:block;color:var(--ink-soft)}
.sch-ev.alt{background:#e7f6ec;border-left-color:#1a7f37}
.sch-ev.new{background:#fff3e6;border-left-color:#d97706;opacity:0;transform:scale(.92);transition:opacity .4s ease,transform .5s var(--ease)}
.sch-ev.new.show{opacity:1;transform:none;box-shadow:0 0 0 2px rgba(217,119,6,.35)}
.sch-slot{position:absolute;left:.2em;right:.2em;border:1.5px dashed #d97706;border-radius:.45em;opacity:0;transition:opacity .3s ease}
.sch-slot.show{opacity:1}

/* 4 — Patient sidebar, customised */
.ps{display:grid;grid-template-columns:20em 1fr;gap:1.3em;height:100%}
.ps-side{position:relative;padding:1em .9em;overflow:hidden;background:var(--paper-2);font-size:.84em}
.ps-gear{position:absolute;top:.9em;right:.9em;width:1.9em;height:1.9em;border-radius:.5em;display:grid;place-items:center;color:var(--ink-soft);transition:background .2s ease,color .2s ease,transform .15s ease}
.ps-gear svg{width:1.25em;height:1.25em}
.ps-gear.on{background:var(--ink);color:#fff}
.ps-gear.press{transform:scale(.88)}
.ps-id{text-align:center;margin-bottom:.9em}
.ps-av{width:3.6em;height:3.6em;margin:0 auto .5em;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:1.05em}
.ps-name{font-weight:650;font-size:1.15em}
.ps-meta{color:var(--ink-soft);font-size:.86em}
.ps-list{display:flex;flex-direction:column;gap:.55em}
.ps-sec{
  border:1px solid var(--line);border-radius:.8em;overflow:hidden;background:var(--paper-2);
  transition:transform .5s var(--ease),opacity .25s ease;
}
.ps-sec.enter{animation:sec-in .5s var(--ease)}
@keyframes sec-in{from{opacity:0;transform:translateY(-.6em) scale(.97)}to{opacity:1;transform:none}}
.ps-sec.leave{opacity:0;transform:scale(.96)}
.ps-sec-h{display:flex;align-items:center;gap:.45em;height:2.3em;padding:0 .8em;background:#f0f0f3;font-size:.8em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.ps-count{display:inline-grid;place-items:center;min-width:1.6em;height:1.45em;border-radius:1em;background:rgba(0,0,0,.08);color:var(--ink);font-size:.95em}
.ps-chev{width:.5em;height:.5em;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg) translate(.1em,.1em)}
.ps-sec-b{padding:.45em .8em .55em}
.ps-line{font-size:.9em;line-height:1.45}
.ps-line small{color:var(--ink-soft);font-size:.92em}
.ps-tags{display:flex;gap:.4em}
.pt-tag{display:inline-flex;align-items:center;height:1.9em;padding:0 .65em;border-radius:.5em;font-weight:600;font-size:.9em;background:#fff1f1;color:#b42318}
.ps-right{position:relative;min-width:0}
.ps-ghost{display:flex;flex-direction:column;gap:1em;padding:1.2em .4em;opacity:.55}
.ps-ghost i{display:block;height:1.1em;border-radius:.4em;background:#e5e5ea}
.pz{
  position:absolute;inset:0;padding:1.1em 1.2em;display:flex;flex-direction:column;
  box-shadow:0 1.6em 3em -1.6em rgba(0,0,0,.3);
  opacity:0;transform:translateX(-1.2em);transition:opacity .35s ease,transform .5s var(--ease);
}
.pz.open{opacity:1;transform:none}
.pz-title{font-weight:650;font-size:1.2em;margin-bottom:.6em}
.pz-tabs{display:flex;gap:1.4em;border-bottom:1px solid var(--line);margin-bottom:.7em;font-weight:600;font-size:.92em;color:var(--ink-soft)}
.pz-tab{padding-bottom:.5em;transition:color .2s ease}
.pz-tab.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.pz-tab.press{color:var(--ink)}
.pz-panes{position:relative;flex:1;min-height:0}
.pz-pane{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s}
.pz-pane.on{opacity:1;visibility:visible;transition:opacity .25s ease .15s} /* out, then in: never both at once */
.pz-pane .cv-label{display:block;font-size:.72em;margin-bottom:.15em}
.pz-mt{margin-top:.5em}
.ck-row{display:flex;align-items:center;gap:.6em;padding:.2em .3em;border-radius:.4em;font-size:.92em;transition:background .2s ease}
.ck{width:1.05em;height:1.05em;border-radius:.3em;border:1.5px solid #9ca3af;display:grid;place-items:center;transition:background .2s ease,border-color .2s ease}
.ck-row.on .ck{background:var(--ink);border-color:var(--ink)}
.ck-row.on .ck::after{content:"\2713";color:#fff;font-size:.75em;font-weight:700;line-height:1}
.ck-row.focus{box-shadow:0 0 0 2px var(--ink)}
.pz-hint{font-size:.85em;color:var(--ink-soft);margin-bottom:.6em}
.pz-order{display:flex;flex-direction:column;gap:.4em}
.ord-row{display:flex;align-items:center;gap:.6em;height:2.2em;padding:0 .7em;border-radius:.55em;border:1px solid var(--line);background:var(--paper-2);font-size:.92em;transition:box-shadow .2s ease,transform .2s ease}
.ord-row.drag{box-shadow:0 .8em 1.6em -.8em rgba(0,0,0,.35);transform:scale(1.02)}
.ord-grip{color:var(--ink-faint);letter-spacing:-.15em;font-size:.85em}
.pz-tpls{border-top:1px solid var(--line);padding-top:.7em;margin-top:.5em}
.pz-tpls .cv-label{display:block;font-size:.72em;margin-bottom:.4em}
.tpl{display:flex;align-items:center;gap:.6em;padding:.45em .7em;border-radius:.55em;border:1px solid var(--line);margin-top:.35em;font-size:.92em;transition:background .2s ease,box-shadow .2s ease}
.tpl span{color:var(--ink-soft);font-size:.9em}
.tpl .tpl-ok{margin-left:auto;color:#1a7f37;font-weight:600;opacity:0;transition:opacity .3s ease}
.tpl.applied{background:#f6f6f8}
.tpl.applied .tpl-ok{opacity:1}

/* 5 — Reports */
.rp{display:grid;grid-template-columns:19em 1fr;gap:1.1em;height:calc(100% - 3.8em)}
.rp-cfg{padding:1.2em 1.3em;display:flex;flex-direction:column;gap:1em}
.rp-f .cv-label{display:block;font-size:.78em;margin-bottom:.4em}
.rp-body{display:flex;flex-direction:column;gap:1.1em;min-width:0}
.rp-kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.1em}
.rp-kpi{padding:.9em 1.1em}
.rp-kpi b{display:block;font-size:1.75em;font-weight:650;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;margin-top:.15em}
.rp-chart{flex:1;padding:1em 1.2em;display:flex;flex-direction:column;min-height:0}
.rp-bars{flex:1;display:flex;align-items:flex-end;gap:1.6em;padding:0 .6em;border-bottom:1px solid var(--line)}
.rp-col{flex:1;display:flex;flex-direction:column-reverse;height:100%;justify-content:flex-start}
.rp-seg{transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease)}
.rp-seg:last-child{border-radius:.35em .35em 0 0}
.rp-seg.grow{transform:none}
.rp-x{display:flex;gap:1.6em;padding:.45em .6em 0;font-size:.85em;color:var(--ink-soft)}
.rp-x span{flex:1;text-align:center}
.rp-legend{display:flex;gap:1.3em;font-size:.85em;color:var(--ink-soft);margin-top:.6em}
.rp-legend i{display:inline-block;width:.75em;height:.75em;border-radius:.2em;vertical-align:-.05em;margin-right:.4em}
.rp-dim{opacity:.35;transition:opacity .4s ease}
.rp-dim.on{opacity:1}

/* 6 — Quick text */
.qt{display:grid;grid-template-columns:1fr 18em;gap:1.1em;height:calc(100% - 3.8em)}
.qt-ed{padding:1.2em 1.4em;display:flex;flex-direction:column;min-width:0}
.qt-box{
  position:relative;flex:1;margin-top:.6em;padding:1em 1.1em;border-radius:.7em;
  border:1px solid rgba(0,0,0,.12);background:var(--paper-2);font-size:1.08em;line-height:1.6;
  box-shadow:0 0 0 2px var(--ink);border-color:transparent;
}
.qt-ins{border-radius:.25em;transition:background 1.4s ease}
.qt-ins.fresh{background:#fde68a;transition:none}
.qt-code{color:#4338ca;font-weight:600}
.qt-pop{
  position:absolute;z-index:3;min-width:30em;padding:.35em;
  background:var(--paper-2);border:1px solid var(--line);border-radius:.7em;
  box-shadow:0 1.2em 2.4em -1em rgba(0,0,0,.28);font-size:.88em;line-height:1.35;
  opacity:0;transform:translateY(-.3em);transition:opacity .18s ease,transform .22s var(--ease);
}
.qt-pop.open{opacity:1;transform:none}
.qt-opt{display:flex;gap:.8em;padding:.55em .7em;border-radius:.45em}
.qt-opt.hl{background:#f0f0f3}
.qt-opt b{color:#4338ca;min-width:3.6em}
.qt-opt span{color:var(--ink-soft);max-width:26em}
.qt-hint{margin-top:.8em;color:var(--ink-soft);font-size:.9em}
.qt-hint kbd{font-family:inherit;font-weight:700;padding:.1em .45em;border-radius:.35em;border:1px solid rgba(0,0,0,.15);background:var(--paper-2);color:var(--ink)}
.qt-key{display:inline-block;margin-left:.6em;padding:.05em .5em;border-radius:.35em;background:var(--ink);color:#fff;font-weight:700;opacity:0;transition:opacity .15s ease}
.qt-key.show{opacity:1}
.qt-lib{padding:1.2em 1.2em}
.qt-lib .cv-label{display:block;margin-bottom:.6em}
.qt-item{padding:.55em 0;border-top:1px solid var(--line);font-size:.92em;transition:background .3s ease}
.qt-item:first-of-type{border-top:0}
.qt-item b{color:#4338ca;display:block}
.qt-item span{color:var(--ink-soft);display:block}
.qt-item.hl b{text-decoration:underline;text-underline-offset:.2em}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  /* Bar, picture, then its story: the picture comes first on a narrow screen. */
  .showcase{grid-template-columns:1fr;grid-template-areas:"tabs" "win" "copy";row-gap:22px}
  /* The bar scrolls sideways; the pill rides along with its tab. */
  .sc-tabs{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .sc-tabs::-webkit-scrollbar{display:none}
  .sc-tab{flex:1 0 auto;scroll-snap-align:center;padding:10px 16px}
  .sc-num{display:none}
  .sc-copy{padding-top:0}
  .sc-caption{margin-top:10px}
  .sc-caption h3{font-size:22px;margin-bottom:8px}
  .sc-caption p{font-size:15px;max-width:52ch}
  .sc-next{margin-top:16px}
}
@media (max-width:600px){
  /* Edge to edge on phones: every pixel of width goes to the picture. */
  .sc-window{margin:0 -28px;border-radius:0;border-left:0;border-right:0}
  .sc-tabs{margin:0 -12px}
}
@media (prefers-reduced-motion:reduce){
  .dp,.dp.on,.sc-next.nudge,.sc-copy.swap *,.sc-tabs.ready .sc-ink{transition:none;animation:none}
  .sc-copy.swap .sc-caption h3{background:none;-webkit-text-fill-color:currentColor}
  .sc-ink-fill{display:none}
  .caret{animation:none}
}