/* =====================================================================
   Design System — USE-CASE PRESETS  v0.5.0
   Thin layers on the SAME core (tokens + base). Pick one per build by
   putting the preset class on a wrapper. They only adjust layout, rhythm,
   and a few preset-only extras — never the brand/token identity.
       doc      → walkthroughs, BRDs, client docs, handovers
       dash     → dashboards, internal tools, admin panels
       web      → marketing sites, landing pages, proposals
   Import after tokens.css + base.css. Ships in @layer ds.presets.
   ===================================================================== */

@layer ds.presets{
/* ===================== shared extra: scroll-progress bar ============== */
.ds-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:50;
  background:var(--grad-signature);transition:width .1s linear}

/* ============================ DOC / WALKTHROUGH ====================== */
/* Reading-optimized. Pair with a sticky left/side TOC (.ds-navitem). */
.preset-doc{--content-max:720px;--lh:var(--lh-prose)}
.preset-doc .prose{max-width:var(--content-max);margin:0 auto;font-size:var(--fs-16);line-height:var(--lh-prose);color:var(--c-txt)}
.preset-doc .prose h1{font-family:var(--font-display);font-size:var(--fs-36);letter-spacing:var(--tracking-display);margin:0 0 var(--sp-4)}
.preset-doc .prose h2{font-family:var(--font-display);font-size:var(--fs-24);letter-spacing:-.01em;margin:var(--sp-10) 0 var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--c-line)}
.preset-doc .prose h3{font-size:var(--fs-18);font-weight:var(--fw-semi);margin:var(--sp-6) 0 var(--sp-2)}
.preset-doc .prose p{margin:0 0 var(--sp-4)}  /* measure lives on .prose (the column), NOT the <p> — keeps body text the same width as sibling images/tables/headings instead of narrower */
.preset-doc .prose a{color:var(--c-accent);text-underline-offset:2px}
.preset-doc .prose ul,.preset-doc .prose ol{margin:0 0 var(--sp-4);padding-left:1.4em}
.preset-doc .prose li{margin:.3em 0}
.preset-doc .prose img,.preset-doc .prose figure img{max-width:100%;border-radius:var(--r);border:1px solid var(--c-line);display:block}
.preset-doc .prose figcaption{color:var(--c-muted);font-size:var(--fs-13);margin-top:6px;text-align:center}
.preset-doc .prose blockquote{margin:var(--sp-4) 0;padding:4px 0 4px 16px;border-left:3px solid var(--c-line-2);color:var(--c-txt-2)}
.preset-doc .prose code{font-family:var(--font-mono);font-size:.9em;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:6px;padding:1px 6px}
.preset-doc .prose pre{font-family:var(--font-mono);font-size:var(--fs-13);background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--r);padding:var(--sp-3) var(--sp-4);overflow:auto}
.preset-doc .prose hr{border:none;border-top:1px solid var(--c-line);margin:var(--sp-8) 0}

/* ============================ DASHBOARD ============================== */
/* Dense, scannable. Use with a sidebar (.ds-navitem) + .ds-kpi grid + .ds-table. */
.preset-dash{--lh:1.45}
.preset-dash .ds-card{padding:var(--sp-3) var(--sp-4)}
.preset-dash .grid-kpi{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.preset-dash .toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.preset-dash main,.preset-dash .content{max-width:none;padding:var(--sp-5) var(--sp-6)}

/* ========================= WEBSITE / LANDING ======================== */
/* Generous rhythm, big display type, hero + feature grid + pill CTAs. */
.preset-web{--content-max:1120px}
.preset-web .container{max-width:var(--content-max);margin:0 auto;padding-inline:var(--sp-6)}
.preset-web section{padding-block:var(--sp-16)}
.preset-web .hero{padding:var(--sp-16) 0 var(--sp-12);text-align:center}
.preset-web .hero h1{font-family:var(--font-display);font-size:clamp(var(--fs-30),6vw,var(--fs-44));line-height:1.05;letter-spacing:-.025em;margin:0 0 var(--sp-4)}
.preset-web .hero .grad{background:var(--grad-signature);-webkit-background-clip:text;background-clip:text;color:transparent}
.preset-web .hero p{font-size:var(--fs-18);color:var(--c-txt-2);max-width:60ch;margin:0 auto var(--sp-6)}
.preset-web .features{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.preset-web .eyebrow{display:inline-block;color:var(--c-accent);font-weight:var(--fw-semi);font-size:var(--fs-13);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-2)}
/* optional subtle grain for dark hero — borrowed from wiki-dashboard */
.preset-web .grain{position:relative;isolation:isolate}
.preset-web .grain::after{content:"";position:absolute;inset:0;z-index:-1;mix-blend-mode:overlay;opacity:.035;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ---- ticker (marquee strip) — 2nd-use fold 2026-07-17 (svc + raccoonandpeacock).
   Markup: .ds-ticker > .ds-ticker-track > 2x identical .item spans (the
   duplicate makes the -50% loop seamless). Level by default; add
   .ds-ticker-tilt for the sticker-strip cut. Pauses on hover. */
.preset-web .ds-ticker{border-block:1px solid var(--c-line);padding-block:var(--sp-3);overflow:clip;background:var(--c-bg)}
.preset-web .ds-ticker-tilt{transform:rotate(-1.2deg) scale(1.03)}
.preset-web .ds-ticker-track{display:flex;gap:var(--sp-8);width:max-content;animation:ds-tick 36s linear infinite}
.preset-web .ds-ticker:hover .ds-ticker-track{animation-play-state:paused}
.preset-web .ds-ticker .item{display:flex;align-items:center;gap:var(--sp-8);font-family:var(--font-display);
  font-size:var(--fs-20);font-weight:var(--fw-medium);letter-spacing:.01em;color:var(--c-txt-2);white-space:nowrap}
.preset-web .ds-ticker .item i{width:7px;height:7px;border-radius:var(--r-pill);background:var(--grad-signature);flex:none}
@keyframes ds-tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.preset-web .ds-ticker-track{animation:none}}

/* ---- full-bleed photo band — 2nd-use fold 2026-07-17 (svc + raccoonandpeacock).
   Dissolves into --c-bg on both edges via mask, so the photo belongs to the
   page instead of sitting in a card. Optional giant word: .word.ds-hollow.
   No parallax on the img — a transform slides the dissolve edges. */
.preset-web .ds-bleed{position:relative;margin:0}
.preset-web .ds-bleed img{display:block;width:100%;height:clamp(380px,62vh,640px);object-fit:cover;
  filter:saturate(.85) brightness(.72);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.preset-web .ds-bleed .word{position:absolute;left:50%;top:46%;translate:-50% -50%;white-space:nowrap;pointer-events:none;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:clamp(72px,15vw,210px);letter-spacing:-.02em}
.preset-web .ds-bleed figcaption{position:absolute;left:0;right:0;bottom:16%;display:flex;align-items:center;gap:var(--sp-2)}
}