/* ────────────────────────────────────────────────────────────────────────────
   SHOWCASE STYLESHEET ENTRY
   ────────────────────────────────────────────────────────────────────────────
   The kit's own globals, plus one extra source glob for the showcase itself.

   globals.css declares its own @source, and Tailwind resolves that path
   relative to the file that declares it — so it scans the kit's src directory
   and nothing else. The showcase lives outside it, and without the glob below
   its markup would compile to no utilities at all.

   The fix belongs HERE, not in globals.css: scripts/build-css.mjs feeds
   globals.css to the Tailwind CLI to produce the published dist/styles.css, so
   a showcase glob there would ship showcase-only classes to every consumer.

   Note for editors: do not write a doubled-asterisk glob inside a CSS comment.
   The slash that follows it closes the comment early, and Tailwind then reports
   the brace group as "Invalid declaration".
   ──────────────────────────────────────────────────────────────────────────── */

@import '../../src/styles/globals.css';

@source '../**/*.{ts,tsx}';

/* ────────────────────────────────────────────────────────────────────────────
   CBAR DOC-SITE CHROME
   ────────────────────────────────────────────────────────────────────────────
   The components on this site are the kit, and they carry the semantic layer.
   What is styled below is the site *around* them — nav rail, hero band, page
   headings — which has no semantic role in the kit and therefore gets its own
   small token set, `--cbar-*`, defined once here.

   Everything is measured out of the CBAR Figma file (`CBAR - Design System`):

     · the brand fill is `brand/primary/500` #004976 — the same navy the
       "Intro / Guidelines / Standarts" heading band and the file thumbnail use;
     · the heading band is an 80px-padded frame with a 100px radius on its top
       corners, which is where `.cbar-hero` gets its silhouette;
     · the thumbnail sets two soft concentric discs off the right edge — the
       radial gradients below;
     · the type scale is the file's published text styles (Heading/H1 … H4,
       body/*, overline/default), all DM Sans;
     · the shadows are the published `shadows/shadows light/*` effect styles,
       which are a tight ambient pair rather than Tailwind's single soft drop.

   Rebranding the site away from CBAR is editing this block, nothing else.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Nav rail + hero. Kept as primitives on purpose: the kit's semantic roles
     describe components, and "the navy the doc site is painted in" is not one
     of them. */
  --cbar-shell: var(--ui-color-brand-500);
  --cbar-shell-ink: var(--ui-color-neutral-0);
  --cbar-shell-ink-muted: var(--ui-color-brand-200);
  --cbar-shell-hover: color-mix(in oklab, var(--ui-color-neutral-0) 8%, transparent);
  /* Deliberately clear of `hover` rather than equal to it. CBAR draws the two
     identically on its own tabs, which is what makes an unselected one look
     selected — the same trap `--ctl-soft` exists to get the kit out of. Here the
     fill is only half the signal anyway; the accent bar below carries the rest. */
  --cbar-shell-active: color-mix(in oklab, var(--ui-color-neutral-0) 14%, transparent);
  --cbar-shell-border: color-mix(in oklab, var(--ui-color-neutral-0) 14%, transparent);
  /* The rail's own scrollbar. A default one paints light grey on the navy and is
     the loudest thing in the column. */
  --cbar-shell-scroll: color-mix(in oklab, var(--ui-color-neutral-0) 24%, transparent);

  /* The one second colour the shell uses: CBAR's Secondary turquoise, marking
     the active rail row. A real ramp step, not a picked value. */
  --cbar-accent: var(--ui-color-secondary-500);

  /* One gutter for the whole site, so the header and the rail stop each
     restating their own padding and drifting a step apart. */
  --cbar-gutter: 2rem;
  --cbar-gutter-sm: 1rem;

  /* The rail's width, in one place: the desktop grid track, the width the
     column's contents hold on to while that track animates, and the drawer's
     own width below `lg` all read it. Three copies of `17rem` is how a collapse
     animation ends up half a step out of sync with the thing it moves. */
  --cbar-rail-w: 17rem;

  /*
   * The site's monospace face — loaded in `index.html` beside DM Sans.
   *
   * Re-pointing `--ui-font-mono` at it is what makes every `font-mono` utility
   * on the site pick it up from one line: the props table's name/type/default
   * columns, a matrix axis label, and every code block. `theme.css` maps
   * `--font-mono: var(--ui-font-mono)` inside `@theme inline`, which resolves at
   * use rather than at declaration.
   *
   * Safe to override *here* and nowhere else: `scripts/build-css.mjs` compiles
   * the published `dist/styles.css` from `globals.css`, which this file imports
   * rather than is. A consumer of the kit still gets the system mono stack.
   */
  --cbar-font-mono:
    'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
    monospace;
  --ui-font-mono: var(--cbar-font-mono);

  /* shadows/shadows light/* — a 1px ambient ring plus a soft drop. */
  --cbar-shadow-xs: 0 1px 2px 0 rgb(24 24 27 / 0.1), 0 0 1px 0 rgb(24 24 27 / 0.2);
  --cbar-shadow-sm: 0 2px 4px 0 rgb(24 24 27 / 0.1), 0 0 1px 0 rgb(24 24 27 / 0.3);
  --cbar-shadow-md: 0 4px 8px 0 rgb(24 24 27 / 0.1), 0 0 1px 0 rgb(24 24 27 / 0.3);
  --cbar-shadow-lg: 0 8px 16px 0 rgb(24 24 27 / 0.1), 0 0 1px 0 rgb(24 24 27 / 0.3);
}

.dark {
  /* On a dark page the 500 navy is barely darker than the canvas, so the rail
     drops two steps and the hero one — the band still has to read as a band. */
  --cbar-shell: var(--ui-color-brand-900);
  --cbar-shell-ink-muted: var(--ui-color-brand-300);
}

/* ── The shell, and the rail track it collapses ────────────────────────────── */

/*
 * The desktop rail track lives here rather than as two written-out Tailwind
 * templates on the shell, because a class swapped at the moment of the press
 * cannot be transitioned: `lg:grid-cols-[17rem_1fr]` → `lg:grid-cols-1` changes
 * the number of tracks, and a track list only interpolates against another of
 * the same length. Both states are one declaration apart now — `0rem 1fr` and
 * `var(--cbar-rail-w) 1fr` — so the browser has something to animate between.
 *
 * Only from `lg` up. Below it the rail is a portalled Sheet and contributes no
 * grid item at all, so the shell keeps Tailwind's `grid-cols-1`; this file is
 * unlayered and would otherwise beat that utility at every width.
 */
@media (min-width: 64rem) {
  .cbar-shell {
    grid-template-columns: 0rem 1fr;
  }

  .cbar-shell[data-rail='shown'] {
    grid-template-columns: var(--cbar-rail-w) 1fr;
  }
}

/* `base`, not `slow`: every frame of this re-lays-out the whole page beside it,
   including a forty-preview overview, so the animation is kept as short as it
   can be while still reading as a movement rather than a jump. */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .cbar-shell {
    transition: grid-template-columns var(--ui-duration-base) var(--ui-ease-emphasized);
  }

  .cbar-rail-column > * {
    transition: opacity var(--ui-duration-fast) var(--ui-ease-standard);
  }
}

/* ── The navy rail ─────────────────────────────────────────────────────────── */

/*
 * The static column, and the two rules that let a 17rem rail live in a track
 * being animated to zero.
 *
 * `overflow: hidden` so the links are clipped by the track instead of spilling
 * over the content, and a fixed width on the contents so they are clipped
 * rather than reflowed — left to itself the head would rewrap and the search
 * field would shrink through six intermediate widths on the way out, which is
 * the part that read as "not smooth" more than the width change did.
 *
 * The fade is what covers the last few pixels: the text is gone before the
 * track is, so the collapse ends on an empty edge rather than on half a word.
 */
.cbar-rail-column {
  overflow: hidden;
}

.cbar-rail-column > * {
  width: var(--cbar-rail-w);
}

.cbar-shell[data-rail='hidden'] .cbar-rail-column > * {
  opacity: 0;
}

/*
 * The rail is a column now — a head that stays and a list that scrolls. It used
 * to be one `overflow-y-auto` box, which meant the lockup and the search field
 * left the viewport as soon as you scrolled towards a component near the bottom
 * of a forty-link list: the two things you reach for *because* the list is long
 * were the first two to go. The scroll belongs to `.cbar-rail-list` below.
 *
 * The `display` for that column is a Tailwind utility on the two mount points,
 * NOT a rule here. Everything in this file is unlayered so it can beat the kit's
 * own component classes — which means a `display:flex` here would equally beat
 * `hidden` and `lg:hidden`, and both copies of the rail would be on screen at
 * once below `lg`. This class carries paint, and only paint.
 */
.cbar-rail {
  background: var(--cbar-shell);
  color: var(--cbar-shell-ink);
}

/* The hairline appears only once there is something above the fold to separate
   from — `chrome/hooks/use-scrolled.ts` sets the attribute off the list's own scroll. */
.cbar-rail-head {
  flex-shrink: 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ui-duration-base) var(--ui-ease-standard);
}

.cbar-rail-head[data-scrolled='true'] {
  border-bottom-color: var(--cbar-shell-border);
}

.cbar-rail-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  /* The rail and the page are two scroll areas side by side; without this,
     reaching the end of the rail hands the wheel to the document behind it. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cbar-shell-scroll) transparent;
}

/* Firefox takes `scrollbar-color` above; Chromium needs the pseudo-elements. */
.cbar-rail-list::-webkit-scrollbar {
  width: 8px;
}

.cbar-rail-list::-webkit-scrollbar-track {
  background: transparent;
}

.cbar-rail-list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--cbar-shell-scroll);
}

.cbar-rail-link {
  /* Containing block for the accent bar below. */
  position: relative;
  color: var(--cbar-shell-ink-muted);
}

/*
 * The active marker.
 *
 * A wash alone is what the rail had, and across forty rows at 8%-vs-14% it is
 * not something you see without looking for it. A 2px turquoise bar is legible
 * at a glance and is the one place the shell uses CBAR's second brand colour.
 */
.cbar-rail-link::before {
  content: '';
  position: absolute;
  inset-block: 0.25rem;
  left: 0;
  width: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background-color var(--ui-duration-fast) var(--ui-ease-standard);
}

.cbar-rail-link:hover {
  background: var(--cbar-shell-hover);
  color: var(--cbar-shell-ink);
}

.cbar-rail-link[data-active='true'] {
  background: var(--cbar-shell-active);
  color: var(--cbar-shell-ink);
}

.cbar-rail-link[data-active='true']::before {
  background: var(--cbar-accent);
}

/* The `/` hint inside the search field, and the shape any future key hint takes. */
.cbar-kbd {
  display: inline-flex;
  min-width: 1.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cbar-shell-border);
  border-radius: var(--ui-radius-2xs);
  padding-inline: 0.25rem;
  font-family: var(--cbar-font-mono);
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--cbar-shell-ink-muted);
}

/* The search box is the kit's Input with a leading icon, so the class lands on
   the adornment *wrapper* rather than on the field. Everything the shell has to
   repaint therefore has to reach a descendant: the inner input inherits nothing
   useful, its placeholder and the icon both default to `--muted-foreground`,
   which is a dark grey on a navy rail. */
.cbar-rail-field {
  background: color-mix(in oklab, var(--ui-color-neutral-0) 8%, transparent);
  border-color: var(--cbar-shell-border);
  color: var(--cbar-shell-ink);
}

.cbar-rail-field input,
.cbar-rail-field svg {
  color: var(--cbar-shell-ink);
}

.cbar-rail-field ::placeholder,
.cbar-rail-field::placeholder {
  color: var(--cbar-shell-ink-muted);
}

/* `:focus-within` because focus is on the field inside the wrapper now. The
   bare-element form is kept for anything still styled directly. */
.cbar-rail-field:focus-within,
.cbar-rail-field:focus-visible {
  outline: 2px solid var(--cbar-shell-ink);
  outline-offset: 1px;
}

.cbar-rail-divider {
  border-color: var(--cbar-shell-border);
}

/* ── The shell around the content ─────────────────────────────────────────── */

/* The header keeps its border at rest and gains an elevation once `main` has
   moved, so a page scrolled halfway still reads as content passing *under* the
   breadcrumb rather than as two panes that happen to touch. */
.cbar-header {
  transition: box-shadow var(--ui-duration-base) var(--ui-ease-standard);
}

.cbar-header[data-scrolled='true'] {
  box-shadow: var(--cbar-shadow-sm);
}

/*
 * The toolbar's shared shape, lifted out of the three inline copies it was
 * written as.
 *
 * The radius is `xs` — 4px, CBAR's control corner, which is what the icon Button
 * and the Segmented group beside these already draw. They were `rounded-md` (8px)
 * and sat a step off everything else in the same row.
 */
.cbar-pill {
  display: flex;
  height: 2.25rem;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--input);
  border-radius: var(--ui-radius-xs);
  background: var(--background);
  padding-inline: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/*
 * A section heading with a rule running off its trailing edge — see
 * `chrome/ui/section.tsx`.
 *
 * This is the one change that makes a component page read as four sections
 * instead of one column of controls: playground, each matrix, compositions, the
 * tables. Only the treatment is shared; the level stays `h2` at every call site,
 * because axe flagged the heading jumps once already.
 */
.cbar-section-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cbar-section {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--foreground);
}

.cbar-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* The skip link. Forty-plus rail links stand between the top of the document
   and the content, which is exactly the case this exists for — and the site
   audits itself with axe, so it should not be the one failing. */
.cbar-skip {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  border-radius: var(--ui-radius-xs);
  background: var(--cbar-shell);
  color: var(--cbar-shell-ink);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--cbar-shadow-md);
  /* Off-screen rather than `display:none`, which would take it out of the tab
     order and leave the link doing nothing at all. */
  transform: translateY(-200%);
  transition: transform var(--ui-duration-fast) var(--ui-ease-standard);
}

.cbar-skip:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--cbar-shell-ink);
  outline-offset: 2px;
}

/* ── The axe panel's target ring ──────────────────────────────────────────── */

/* Applied imperatively by `chrome/ui/a11y-panel.tsx` to whatever element axe
   named, for two seconds. It cannot be a utility class: the target is somewhere
   inside a registry entry's tree, reached through `document.querySelector`, so
   nothing renders it and Tailwind would never see it in a source scan.
   `--destructive` rather than a literal, so it follows the theme like anything
   else on the page. */
.a11y-target {
  outline: 3px solid var(--destructive);
  outline-offset: 2px;
  border-radius: var(--ui-radius-xs);
}

/* ── The hero band ─────────────────────────────────────────────────────────── */

/* Figma draws 100px on a 1244px-wide frame. The site is narrower and scrolls,
   so the radius is expressed in the same proportion rather than copied. */
.cbar-hero {
  position: relative;
  overflow: hidden;
  background: var(--cbar-shell);
  color: var(--cbar-shell-ink);
  border-radius: 0;
}

/* The thumbnail's discs: two soft circles pinned off the right edge, drawn as
   gradients so the site carries no image asset. */
.cbar-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 88% 18%,
      color-mix(in oklab, var(--ui-color-neutral-0) 12%, transparent) 0 34%,
      transparent 34.4%
    ),
    radial-gradient(
      circle at 104% 76%,
      color-mix(in oklab, var(--ui-color-neutral-0) 8%, transparent) 0 46%,
      transparent 46.4%
    );
}

.cbar-hero > * {
  position: relative;
  z-index: 1;
}

/* ── The intro tour ────────────────────────────────────────────────────────── */

/* The band the lockup sits on in the tour's first slide.
   It exists because `brand/cbar-logo.svg` is baked white and carries no
   `currentColor` — see `brand/logo.tsx` — so navy is the only ground the mark
   may be drawn on, and the dialog's own surface is `--background`. Same two
   declarations as `.cbar-rail` rather than a shared class: the rail is a
   layout region with a scroll container and hover rules, and inheriting all of
   that to tint one box would be the larger mistake. */
.cbar-tour-band {
  background: var(--cbar-shell);
  color: var(--cbar-shell-ink);
}

/* ── The published type scale ──────────────────────────────────────────────── */

.t-h1 {
  font-size: 2.75rem; /* Heading/H1 — 44/52 SemiBold */
  line-height: 3.25rem;
  font-weight: 600;
  letter-spacing: 0;
}

.t-h2 {
  font-size: 2rem; /* Heading/H2 — 32/44 SemiBold */
  line-height: 2.75rem;
  font-weight: 600;
}

.t-h3 {
  font-size: 1.25rem; /* Heading/H3 — 20/28 SemiBold */
  line-height: 1.75rem;
  font-weight: 600;
}

.t-h4 {
  font-size: 1.125rem; /* Heading/H4 — 18/24 SemiBold */
  line-height: 1.5rem;
  font-weight: 600;
}

.t-body {
  font-size: 1rem; /* body/default-regular — 16/28 */
  line-height: 1.75rem;
}

.t-body-sm {
  font-size: 0.875rem; /* body/small-regular — 14/28 */
  line-height: 1.75rem;
}

.t-overline {
  font-size: 0.625rem; /* overline/default — 10/12 Medium, +0.5px */
  line-height: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Surfaces ──────────────────────────────────────────────────────────────── */

/* `--ui-ease-standard`, not `--ui-ease-out` — the latter has never existed in
   `tokens.css` (it ships `standard` and `emphasized`), so this transition was
   silently running on the `ease` fallback. */
.cbar-card {
  box-shadow: var(--cbar-shadow-xs);
  transition:
    box-shadow var(--ui-duration-base) var(--ui-ease-standard),
    transform var(--ui-duration-base) var(--ui-ease-standard);
}

.cbar-card:hover {
  box-shadow: var(--cbar-shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
  .cbar-card:hover {
    transform: translateY(-1px);
  }
}

/* The axe panel — `fixed`, so it needs the elevation the flow would otherwise
   give it, and the one consumer of the largest published shadow. */
.cbar-panel {
  box-shadow: var(--cbar-shadow-lg);
}

/*
 * A variant grid, drawn as a table rather than as floating cells.
 *
 * A CSS grid has no row element to put a border on, so every cell draws its own
 * leading edge and its own top; the header row draws only the leading edge,
 * since it already carries a bottom border. The row-label gutter therefore drops
 * its `border-r` in `chrome/ui/matrix.tsx` — the first cell of each row now draws
 * that same line, which is also what makes the header line up with the body.
 */
.cbar-matrix-head,
.cbar-matrix-cell {
  border-inline-start: 1px solid var(--border);
}

/*
 * The sticky row-label gutter, which slides over the cells on a wide grid and
 * would otherwise cover the very hairline that separates it from them.
 *
 * A shadow rather than a border: it paints *outside* the box, in the same pixel
 * column the first cell's `border-inline-start` occupies, so unscrolled the two
 * coincide and nothing doubles. A border here would sit inside the gutter and
 * draw a second line beside it.
 */
.cbar-matrix-gutter {
  box-shadow: 1px 0 0 0 var(--border);
}

.cbar-matrix-cell {
  border-block-start: 1px solid var(--border);
}

.cbar-matrix-cell:hover {
  background: color-mix(in oklab, var(--foreground) 3%, transparent);
}

/*
 * Code, wherever it appears — a generated snippet, an import line, a props
 * table cell.
 *
 * `font-family` is restated rather than left to `font-mono`: `CopyBlock`'s
 * `<pre>` and `CopyLine`'s `<code>` get the face from Tailwind's preflight,
 * but a `<kbd>` or a bare `<code>` inside a translated paragraph does not.
 * Ligatures off because a snippet showing `=>` should show two characters.
 */
.cbar-code {
  font-family: var(--cbar-font-mono);
  font-variant-ligatures: none;
  tab-size: 2;
  line-height: 1.6;
}