/* Storybook chrome only — NOT part of the design system and NOT part of the
 * extracted component layer. Built from the system's own tokens so a reviewer
 * never mistakes scaffolding for brand. Load order per page:
 *   ../colors_and_type.css  →  tw-bridge.css  →  storybook.css
 * (index.html and project-chip.html also load components.css for .cc-chip,
 *  the one Astro port.)
 */

/* body carries no padding at all — top padding would sit above the sticky nav
   (body's first child) and side padding would inset the bar's own background
   and hairline. Both belong on the shell. The gutter ladder below is
   .page-container's, repeated verbatim so the shell's content lines up with
   the nav's; .ds-nav-inner IS a .page-container and is border-box, so this
   one has to be too. */
body { padding: 0 0 6rem; }
.sb  { box-sizing: border-box; max-width: var(--max-width-desktop);
       margin: 0 auto; padding: 4rem var(--gutter-base) 0; }
@media (min-width: 768px)  { .sb { padding-inline: var(--gutter-md); } }
@media (min-width: 1280px) { .sb { padding-inline: var(--gutter-xl); } }

.sb-back { display: inline-block; margin-bottom: 2rem;
           color: var(--color-body-secondary-lighter);
           font-size: var(--text-caption); text-decoration: none; }
.sb-back:hover { color: var(--color-hovered); }

/* ---- component header ---------------------------------------------------- */
.sb-head { padding-bottom: 2rem; margin-bottom: 3rem;
           border-bottom: 1px solid var(--color-surface-quaternary); }
/* #5F20FE is 2.94:1 on the rebuilt #0A0A0B page — below every WCAG floor at
   any size, so the eyebrow uses --color-hovered (8.41:1). DESIGN.md §10.5. */
.sb-head .eyebrow { margin: 0 0 0.75rem; color: var(--color-hovered);
                    font-size: var(--text-caption);
                    font-weight: var(--font-weight-bold);
                    letter-spacing: 0.08em; text-transform: uppercase; }
.sb-head h1 { margin: 0; font-size: var(--text-heading-sm);
              line-height: var(--text-heading-sm--line-height); }
.sb-head p { max-width: 70ch; margin: 1rem 0 0;
             color: var(--color-body-secondary-lighter);
             font-size: var(--text-md); line-height: var(--leading-md); }

.sb-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.sb-tag { padding: 0.25rem 0.75rem; border-radius: var(--radius-pill);
          border: 1px solid var(--color-surface-quaternary);
          font-family: var(--font-mono); font-size: 0.75rem;
          color: var(--color-body-secondary-lighter); }
.sb-tag.is-vue   { border-color: var(--color-action); color: var(--color-hovered); }
.sb-tag.is-astro { border-color: var(--color-surface-quaternary); }

/* ---- sections ------------------------------------------------------------ */
.sb-section { margin-top: 3.5rem; }
.sb-section > h2 { margin: 0 0 0.5rem; font-size: var(--text-lg);
                   line-height: var(--leading-lg); }
.sb-section > p { max-width: 72ch; margin: 0 0 1.5rem;
                  color: var(--color-body-secondary-lighter);
                  font-size: var(--text-caption);
                  line-height: var(--leading-caption); }

/* ---- the story canvas ---------------------------------------------------- */
.sb-stories { display: grid; gap: 1rem;
              grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.sb-stories.is-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.sb-stories.is-single { grid-template-columns: 1fr; }

.sb-story { border: 1px solid var(--color-surface-quaternary);
            border-radius: var(--radius-card); overflow: hidden; }
/* The canvas is the page ground, never a lighter panel — a component judged on
   the wrong surface is judged wrong. */
.sb-canvas { display: flex; align-items: center; justify-content: center;
             gap: 1rem; flex-wrap: wrap;
             min-height: 9rem; padding: 2rem;
             background: var(--color-surface-primary); }
.sb-canvas.is-tall  { min-height: 15rem; }

/* colors_and_type.css paints docs-chrome anchors violet with an UNLAYERED
   `a` rule, which out-cascades every layered utility a mounted component
   carries (unlayered beats @layer regardless of specificity). Inside the
   canvases, roll anchor color back to the layered world so the component's
   own classes decide — falling back to the bridge's preflight-equivalent
   `color: inherit` when no utility is present. */
.sb-canvas a, .sb-mount a,
.sb-canvas a:hover, .sb-mount a:hover { color: revert-layer; }
/* Same story for headings: the docs baseline sizes h1–h3 with unlayered
   element rules that production's global.css does not have. Roll them back
   so a mounted component's own text-* utilities decide. */
.sb-canvas :is(h1, h2, h3, h4, h5, h6),
.sb-mount :is(h1, h2, h3, h4, h5, h6) {
  color: revert-layer; font-size: revert-layer;
  font-weight: revert-layer; line-height: revert-layer;
}
.sb-canvas.is-start { justify-content: flex-start; align-items: flex-start; }
.sb-canvas.is-block { display: block; }

.sb-story-body { padding: 0.875rem 1rem;
                 border-top: 1px solid var(--color-surface-quaternary);
                 background: var(--color-surface-secondary); }
.sb-story-name { display: block; color: var(--color-heading);
                 font-size: var(--text-caption);
                 font-weight: var(--font-weight-bold); }
.sb-story-args { display: block; margin-top: 0.375rem;
                 font-family: var(--font-mono); font-size: 0.75rem;
                 line-height: 1.5; color: var(--color-hovered);
                 word-break: break-word; }
.sb-story-note { display: block; margin-top: 0.5rem;
                 font-size: 0.75rem; line-height: 1.5;
                 color: var(--color-body-secondary-lighter); }

/* ---- props table --------------------------------------------------------- */
table.sb-props { width: 100%; border-collapse: collapse;
                 font-size: var(--text-caption); }
.sb-props th { text-align: left; padding: 0.75rem 1rem;
               color: var(--color-body-secondary-lighter);
               font-weight: var(--font-weight-bold);
               border-bottom: 1px solid var(--color-surface-quaternary); }
.sb-props td { padding: 0.75rem 1rem; vertical-align: top;
               border-bottom: 1px solid var(--color-surface-quaternary);
               color: var(--color-body-secondary-lighter); }
.sb-props td:first-child { color: var(--color-heading);
                           font-weight: var(--font-weight-bold); }
.sb-props code { font-family: var(--font-mono); font-size: 0.8125rem;
                 color: var(--color-hovered); }
.sb-req { color: var(--color-action); font-family: var(--font-mono); }

/* ---- callouts ------------------------------------------------------------ */
.sb-note { padding: 1rem 1.25rem; border-radius: var(--radius-sm);
           border: 1px solid var(--color-surface-quaternary);
           color: var(--color-body-secondary-lighter);
           font-size: var(--text-caption); line-height: var(--leading-caption); }
.sb-note + .sb-note { margin-top: 0.75rem; }
.sb-note strong { color: var(--color-heading); }
.sb-note code { font-family: var(--font-mono); font-size: 0.8125rem;
                color: var(--color-hovered); }
.sb-note.is-warn { border-color: var(--color-action); }

/* ---- catalog (index) ----------------------------------------------------- */
.sb-cat { display: grid; gap: 1rem;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
/* A card used to be one big <a>, but the thumbs now MOUNT the real
   components — several of which render anchors of their own, and anchors
   cannot nest. So the card is a <div>: the .meta anchor stretches itself
   over the whole card with ::after, and the thumb carries `inert` because
   it is decoration, not a second set of controls. */
.sb-cat .sb-card { position: relative; display: flex; flex-direction: column;
                   border-radius: var(--radius-card); overflow: hidden;
                   border: 1px solid var(--color-surface-quaternary);
                   transition: border-color var(--transition-colors); }
.sb-cat .sb-card:hover { border-color: var(--color-action); }
.sb-cat a.meta { text-decoration: none; }
.sb-cat a.meta::after { content: ""; position: absolute; inset: 0; }
.sb-cat .thumb { display: flex; align-items: center; justify-content: center;
                 gap: 0.5rem; flex-wrap: wrap;
                 height: 8rem; padding: 1rem;
                 background: var(--color-surface-primary);
                 overflow: hidden; }
.sb-cat .meta { padding: 1rem;
                border-top: 1px solid var(--color-surface-quaternary);
                background: var(--color-surface-secondary); }
/* Meta typography is scoped to .meta children ONLY. A bare `.sb-cat span`
   out-specifies the .cc-* component classes and flattens every mini-demo in
   the thumbs into stacked blocks. */
.sb-cat .meta { display: block; }
.sb-cat .meta strong { display: block; color: var(--color-heading);
                       font-size: var(--text-caption); }
.sb-cat .meta > span { display: block; margin-top: 0.375rem;
                       color: var(--color-body-secondary-lighter);
                       font-size: 0.75rem; line-height: 1.5; }
.sb-cat .meta > code { display: block; margin-top: 0.625rem;
                       font-family: var(--font-mono); font-size: 0.6875rem;
                       color: var(--color-hovered); word-break: break-all; }
.sb-cat .meta span code { font-family: var(--font-mono); font-size: 0.6875rem;
                          color: var(--color-hovered); }