/* ==========================================================================
   /dashboards · Dashboards & reports. Page-only classes, prefix db-.
   Tokens only; the shared library lives in app.css.
   ========================================================================== */

/* ------------------------------------------------------------- hero ---- */
.db-hero{padding:72px 0 104px}
.db-intro{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:24px 56px;align-items:end}
.db-intro .display{max-width:11ch}
.db-intro .btns{margin-top:24px}

/* ------------------------------------------- the two outputs: a toggle -- */
/* same pattern as the homepage hero tabs, on paper: a line pill, the chosen one filled ink.
   JS off: the tablist stays hidden and both views stack under their own headings. */
.db-views{margin-top:52px}
.db-tabs{display:none;justify-content:center;gap:8px}
.db-views.js .db-tabs{display:flex}
.db-tabs button{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;border:0;border-radius:var(--r-pill);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);font:500 14px var(--sans);color:var(--ink-2);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.db-tabs button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.db-tabs button[aria-selected=true]{background:var(--ink);box-shadow:none;color:var(--paper)}
.db-view[hidden]{display:none}
.db-views.js .db-view{margin-top:22px}
.db-view-h{margin:0 0 18px;font-size:var(--fs-h3);letter-spacing:-.03em}
.db-views.js .db-view-h{display:none}
.db-view+.db-view{margin-top:56px}
.db-views.js .db-view+.db-view{margin-top:22px}

/* ---------------------------------------------------- the studio stage -- */
.db-studio{position:relative;border-radius:var(--r-blk);background:var(--white);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);overflow:hidden}
.db-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 18px 14px 22px;border-bottom:1px solid var(--line)}
.db-name{display:inline-flex;align-items:center;gap:10px;font-size:15px;letter-spacing:-.01em}
.db-name b{font-weight:500}
.db-mk{width:16px;height:16px;color:var(--primary)}
.db-status{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.db-acts{display:inline-flex;gap:8px}
.db-acts .pill[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}

.db-ask{display:flex;align-items:flex-end;gap:14px;margin:18px 20px 0;padding:12px 8px 8px 20px;border-radius:22px;background:var(--paper);outline:1px solid var(--line);outline-offset:-1px;transition:outline-color .4s var(--ease)}
.db-q{flex:1;min-width:0;padding-bottom:6px;font-size:16px;line-height:1.45;letter-spacing:-.01em;min-height:1.45em}
.db-caret{display:none;width:2px;height:1.1em;margin-left:2px;vertical-align:-.18em;background:var(--accent);animation:db-blink 1s steps(1) infinite}
.is-typing .db-caret{display:inline-block}
@keyframes db-blink{50%{opacity:0}}
.db-send{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper)}
.db-send svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.db-studio[data-step="1"] .db-ask{outline:1.5px solid var(--accent);outline-offset:-1.5px}

.db-body{position:relative;display:grid;padding:16px 20px 20px}
.db-board,.db-out{grid-area:1/1;min-width:0}
.db-board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;transition:transform .7s var(--ease-out),opacity .5s var(--ease),filter .5s var(--ease)}

/* blocks */
.db-b{min-width:0;padding:14px 16px 16px;border-radius:var(--r-card);background:var(--paper);transition:background-color .35s var(--ease),outline-color .35s var(--ease)}
.db-kpis{grid-column:1/-1}
.db-chart{grid-column:1/8}
.db-dec{grid-column:8/13}
.db-anom{grid-column:1/7}
.db-risk{grid-column:7/13}
.db-more{grid-column:1/-1;padding:10px 14px;border-radius:14px;outline:1px dashed var(--line-2);outline-offset:-1px;font-size:12.5px;color:var(--ink-2);text-align:center;transition:opacity .35s var(--ease)}
.db-bh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:13px}
.db-bh b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-st{flex:none;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);background:var(--white);font-size:12px;color:var(--ink-2);white-space:nowrap;transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.db-st i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.db-st.s i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mute)}
.db-kg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.db-kg>div{padding:2px 0 0 14px;border-left:1px solid var(--line-2)}
.db-kg>div:first-child{padding-left:0;border-left:0}
.db-kg span{display:block;font-size:12px;color:var(--ink-2)}
.db-kg b{display:block;margin-top:4px;font-size:30px;font-weight:400;letter-spacing:-.045em;line-height:1}
.db-kg small{display:block;margin-top:6px;font-size:12px;color:var(--ink-3)}
.db-line{width:100%;height:104px}
.db-line path{vector-effect:non-scaling-stroke}
.db-line .f{fill:var(--t1)}
.db-line .a{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.db-line .b{fill:none;stroke:var(--primary);stroke-width:1.5;stroke-dasharray:4 4}
.db-read{margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.db-read b{color:var(--ink);font-weight:500}
.db-dr{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.db-dr:first-of-type{border-top:0;padding-top:2px}
.db-v{flex:none;display:inline-grid;place-items:center;min-width:64px;height:24px;padding:0 8px;border-radius:7px;background:var(--t1);font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--ink)}
.db-v.kill{background:var(--warn-t);color:var(--warn-ink)}
.db-dt{min-width:0}
.db-dt b{display:block;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-dt small{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.db-big{font-size:34px;font-weight:400;letter-spacing:-.045em;line-height:1}
.db-big em{font-style:normal;font-size:14px;letter-spacing:0;color:var(--warn-ink);margin-left:6px}
.db-big small{display:block;margin-top:8px;font-size:12px;letter-spacing:0;color:var(--ink-2)}
.db-anom .tag{margin-top:12px}

/* build: the layout drafts first as dashed outlines, then each block fills */
.db-studio.is-build .db-b:not(.on){background:transparent;outline:1.5px dashed var(--line-2);outline-offset:-1.5px}
.db-studio.is-build .db-b>*{transition:opacity .45s var(--ease)}
.db-studio.is-build .db-b:not(.on)>*{opacity:0}
.db-studio.is-build .db-more:not(.on){opacity:0}
.db-b.on{animation:db-in .55s var(--ease-out)}
@keyframes db-in{from{transform:scale(.975)}to{transform:none}}

/* live: every stamp lights up */
.db-studio[data-step="2"] .db-st{background:var(--t1);box-shadow:inset 0 0 0 1px var(--accent)}
.db-studio[data-step="2"] .db-st i{animation:pulse 2.4s var(--ease) infinite}
.db-studio[data-step="2"] .db-st.s i{animation:none}

/* share + export: the board steps back, the dated link steps forward */
.db-out{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:center;gap:24px;padding:56px 12px 12px;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.db-studio[data-step="3"] .db-out,.db-studio[data-step="4"] .db-out{opacity:1;visibility:visible;transition-delay:.12s,0s}
.db-studio[data-step="3"] .db-board,.db-studio[data-step="4"] .db-board{transform:scale(.94);opacity:.22;filter:blur(2px) grayscale(1);pointer-events:none}
.db-link{position:relative;flex:none;width:min(420px,100%);padding:20px 22px 18px;border-radius:22px;background:var(--white);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);transform:translateY(18px) scale(.96);transition:transform .6s var(--ease-out)}
.db-studio[data-step="3"] .db-out .db-link{transform:none}
/* export: the link steps aside and the PDF slides out from behind it; transforms only, the pair stays centred */
.db-studio[data-step="4"] .db-out .db-link{transform:translateX(-96px)}
.db-lt{display:flex;align-items:center;gap:14px}
.db-lt b{display:block;font-size:16px;font-weight:500;letter-spacing:-.015em}
.db-lt small{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:12.5px;color:var(--ink-2)}
.db-lt small::before{content:"";width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mute)}
.db-thumb{flex:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:10px 1fr;gap:4px;width:64px;height:48px;padding:6px;border-radius:10px;background:var(--paper)}
.db-thumb i{border-radius:3px;background:var(--line-2)}
.db-thumb i:nth-child(1){grid-column:1/-1;background:var(--t2)}
.db-thumb i:nth-child(3){background:var(--t1)}
.db-thumb i:nth-child(4){display:none}
.db-url{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 12px;border-radius:12px;background:var(--paper);font-size:13.5px;color:var(--ink);min-width:0}
.db-url svg{flex:none;width:15px;height:15px;fill:none;stroke:var(--mute);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.db-url span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 0}
.db-meta dt{font-size:12px;color:var(--ink-3)}
.db-meta dd{margin:2px 0 0;font-size:13.5px;font-weight:500}

.db-pdf{flex:none;width:168px;margin-left:-192px;opacity:0;transform:translateX(-24px) rotate(-4deg);transition:opacity .4s var(--ease),transform .65s var(--ease-out)}
.db-studio[data-step="4"] .db-pdf{opacity:1;transform:translateX(96px) rotate(2deg)}
.db-pdf p{margin-top:12px;font-size:12.5px;text-align:center}
.db-pdf p b{display:block;font-weight:500}
.db-pdf p small{display:block;color:var(--ink-2)}
.db-page{position:relative;aspect-ratio:210/297;padding:14px 12px;border-radius:8px;background:var(--white);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.db-page::after{content:"PDF";position:absolute;right:-8px;bottom:14px;padding:3px 7px;border-radius:6px;background:var(--primary);color:var(--on-primary);font-size:10.5px;font-weight:600;letter-spacing:.06em}
.db-page i{display:block;height:6px;margin-top:7px;border-radius:3px;background:var(--grey)}
.db-page i.w{width:62%}
.db-page i.w2{width:40%}
.db-page i.h{height:40px;background:var(--t1)}
.db-page b{display:block;margin-top:10px;font-size:13px;font-weight:500;letter-spacing:-.01em}
.db-ps{display:inline-flex;align-items:center;gap:5px;padding:2px 6px;border-radius:var(--r-pill);background:var(--paper);font-size:9.5px;color:var(--ink-2);white-space:nowrap}
.db-ps::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.db-pg{position:absolute;left:12px;bottom:10px;font-size:9.5px;color:var(--ink-3)}

/* the rail: four properties, also the stage's controls */
.db-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.db-rail button{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:14px 16px 15px;border:0;border-radius:var(--r-card);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);text-align:left;cursor:pointer;transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.db-rail button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.db-rail button[aria-pressed=true]{background:var(--white);box-shadow:var(--shadow-ui),inset 0 0 0 1px var(--line)}
.db-rail .n{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--grey);font-size:12.5px;font-weight:500;transition:background-color .3s var(--ease),color .3s var(--ease)}
.db-rail button[aria-pressed=true] .n{background:var(--accent);color:var(--on-accent)}
.db-rail b{display:block;font-size:15px;font-weight:500;letter-spacing:-.015em}
.db-rail small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.db-cap{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:16px}
.db-replay{flex:none;margin-top:-8px}

.db-replay[hidden]{display:none}


/* ------------------------------------------------------ the report ---- */
/* a document on the left, the cards it produces on the right; the bar is the studio's */
.db-rep-b{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.db-doc{padding:26px 30px 28px;border-right:1px solid var(--line)}
.db-rt{font-size:22px;font-weight:400;letter-spacing:-.03em;line-height:1.2;text-wrap:balance}
.db-rd{margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.db-rs{margin-top:16px;font-size:14.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty;max-width:62ch}
.db-rk{margin-top:22px;padding:16px 18px;border-radius:var(--r-card);background:var(--paper)}
.db-rk b{font-size:26px}
.db-vt{margin-top:12px}
.db-vt b{font-size:44px}
.db-rl{display:flex;align-items:baseline;gap:10px;margin-top:26px;font-size:13px;color:var(--ink-2)}
.db-rl b{font-size:15px;font-weight:500;color:var(--ink)}
.db-fl{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.db-fl li{border-bottom:1px solid var(--line)}
.db-f summary{display:grid;grid-template-columns:22px minmax(0,1fr) 56px auto 28px;align-items:center;gap:12px;padding:13px 0;cursor:pointer;list-style:none}
.db-f summary::-webkit-details-marker{display:none}
.db-f .n{font-size:12.5px;color:var(--ink-3)}
.db-ft{display:flex;align-items:center;gap:10px;min-width:0}
.db-ft b{font-size:14px;font-weight:500;line-height:1.35;letter-spacing:-.01em;text-wrap:pretty}
.db-fb{height:4px;border-radius:2px;background:var(--grey);overflow:hidden}
.db-fb i{display:block;height:100%;width:calc(var(--v,0) * 1%);border-radius:2px;background:var(--accent)}
.db-f .e{font-size:15px;font-weight:500;white-space:nowrap;text-align:right}
.db-f .e small{font-size:12px;font-weight:400;color:var(--ink-2)}
.db-np .e small{color:var(--ink-3)}
.db-f summary>i{position:relative;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color .3s var(--ease)}
.db-f summary>i::before,.db-f summary>i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--ink);transition:transform .4s var(--ease)}
.db-f summary>i::after{transform:rotate(90deg)}
.db-f[open] summary>i{background:var(--ink)}
.db-f[open] summary>i::before,.db-f[open] summary>i::after{background:var(--paper)}
.db-f[open] summary>i::after{transform:rotate(0)}
.db-f summary:hover>i{box-shadow:inset 0 0 0 1px var(--ink)}
.db-ev{padding:2px 40px 18px 34px}
.db-ev dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.db-ev dl>div{min-width:0;padding:10px 12px;border-radius:12px;background:var(--paper)}
.db-ev dt{font-size:12px;color:var(--ink-2)}
.db-ev dd{margin:2px 0 0;font-size:14.5px;font-weight:500}
.db-ev p{margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.db-rf{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
@supports (interpolate-size:allow-keywords){
  .db-fl{interpolate-size:allow-keywords}
  .db-f::details-content{height:0;overflow:clip;transition:height .4s var(--ease),content-visibility .4s allow-discrete}
  .db-f[open]::details-content{height:auto}
}

.db-side{display:flex;flex-direction:column;gap:12px;padding:26px 24px 24px;background:var(--paper)}
.db-sh{margin-bottom:6px}
.db-sh b{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em}
.db-sh span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.db-meas{margin-top:6px;padding:16px 18px 14px;border-radius:var(--r-card);outline:1.5px dashed var(--line-2);outline-offset:-1.5px}
.db-meas p{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.db-meas p b{color:var(--ink);font-weight:500}
.db-meas-l{padding-top:8px;border-top:1px solid var(--line);font-size:12.5px}
/* ----------------------------------------------------- mirror pair ---- */
.db-ps-ask{max-width:92%;margin:0 0 18px auto;padding:12px 15px;border-radius:18px;border-bottom-right-radius:6px;background:var(--ink);color:var(--paper);font-size:14px;line-height:1.5}
.db-tl>div>span{display:inline-flex;align-items:baseline;gap:12px}
.db-tl time{min-width:3.2em;font-size:13px;color:var(--ink-3)}
.ps-lit .ps-note .go{margin-left:6px}

/* ------------------------------------------------------- responsive ---- */
@media (max-width:1100px){
  .db-rail button{padding:12px 14px}
}
@media (max-width:860px){
  .db-hero{padding:48px 0 72px}
  .db-intro{grid-template-columns:1fr}
  .db-views{margin-top:36px}
  .db-rep-b{grid-template-columns:minmax(0,1fr)}
  .db-doc{padding:20px 16px 22px;border-right:0;border-bottom:1px solid var(--line)}
  .db-rt{font-size:20px}
  .db-rk{padding:14px 16px}
  .db-vt b{font-size:40px}
  .db-f summary{grid-template-columns:20px minmax(0,1fr) auto 28px;gap:10px}
  .db-fb{display:none}
  .db-ft{flex-direction:column;align-items:flex-start;gap:4px}
  .db-ev{padding:0 0 16px 30px}
  .db-ev dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-side{padding:20px 14px 16px}
  .db-bar{padding:12px 14px 12px 16px}
  .db-status{order:3;width:100%;margin-left:0}
  .db-acts{margin-left:auto}
  .db-ask{margin:14px 14px 0;padding:10px 6px 6px 14px}
  .db-q{font-size:15px}
  .db-body{padding:14px}
  .db-board{grid-template-columns:minmax(0,1fr)}
  .db-board>*{grid-column:1/-1}
  .db-kg{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .db-kg>div:nth-child(3){padding-left:0;border-left:0}
  .db-risk{display:none}
  .db-out{align-items:flex-start;flex-direction:column;justify-content:flex-start;padding:4px 0}
  .db-studio[data-step="3"] .db-board,.db-studio[data-step="4"] .db-board{max-height:420px;overflow:hidden}
  .db-pdf{display:none;margin:0;width:150px;transform:none}
  .db-studio[data-step="4"] .db-out .db-link{transform:none}
  .db-studio[data-step="4"] .db-pdf{display:block;align-self:center;transform:rotate(2deg)}
  .db-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .db-rail button{padding:12px;gap:10px;align-items:center}
  .db-cap{flex-direction:column;gap:6px}
  .db-replay{margin-top:0;margin-left:-8px}
  .db-tl>div{flex-direction:column;gap:2px}
}
@media (max-width:520px){
  .db-acts .pill{padding:0 12px}
  /* block titles wrap instead of truncating beside the status badge */
  .db-bh{align-items:flex-start}
  .db-bh b{white-space:normal;overflow:visible;text-overflow:clip}
  .db-name .tag{display:none}
  .db-kg b{font-size:26px}
  .db-rail button{flex-direction:column;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .db-board,.db-out,.db-link,.db-pdf,.db-ask{transition:none}
  .db-b.on{animation:none}
  .db-caret{animation:none}
  .db-f::details-content{transition:none}
}