/* DO NOT EDIT — propagated from packages/components/src/utilities.css
   by packages/components/scripts/sync-utilities.mjs.
   Run `npm run sync:utilities` after changing the source. */
/**
 * RunsNative utility-CSS layer — hand-authored, not generated.
 *
 * Conventions (inherited by every utility in this file):
 *   Namespace   — classes are .run-<name>, mirroring the run- element prefix.
 *   Tokens      — utilities reference only contracted --run-* tokens via
 *                 var(--run-…, <literal-fallback>). No raw values except
 *                 documented fallbacks.
 *   Layer       — rules live in @layer run-utilities so consumer-app CSS wins
 *                 all specificity ties without needing !important.
 *
 * Distribution: copied to dist/utilities.css and consumer public dirs by
 * scripts/sync-utilities.mjs (run via `npm run sync:utilities`).
 */

@layer run-utilities {
  /* ── .run-frame ─────────────────────────────────────────────────────────────
   * Aspect-ratio-locked container. Crops a child <img>, <video>, <picture>,
   * <canvas>, or <svg> to the configured ratio via object-fit.
   *
   * Per-instance hooks (not contracted tokens — utility-local knobs):
   *   --run-frame-ratio      default 16 / 9
   *   --run-frame-fit        default cover
   *   --run-frame-position   default center
   *
   * Usage:
   *   <div class="run-frame" style="--run-frame-ratio: 4/3">
   *     <img src="…" alt="…">
   *   </div>
   */
  .run-frame {
    aspect-ratio: var(--run-frame-ratio, 16 / 9);
    overflow: hidden;
    display: block;
  }

  .run-frame > :is(img, video, picture, canvas, svg) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: var(--run-frame-fit, cover);
    object-position: var(--run-frame-position, center);
  }

  /* ── .run-stack ─────────────────────────────────────────────────────────────
   * Vertical flex column with token-governed gap. The canonical building block
   * for stacking discrete sections of content.
   *
   * Usage:
   *   <div class="run-stack">
   *     <p>…</p>
   *     <p>…</p>
   *   </div>
   */
  .run-stack {
    display: flex;
    flex-direction: column;
    gap: var(--run-space-semantic-md);
  }

  /* ── .run-cluster ───────────────────────────────────────────────────────────
   * Wrapping horizontal flex for inline groups — tag clouds, button groups,
   * breadcrumbs. Items wrap onto new lines before overflowing.
   *
   * Usage:
   *   <div class="run-cluster">
   *     <run-tag>…</run-tag>
   *     <run-tag>…</run-tag>
   *   </div>
   */
  .run-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--run-space-semantic-md);
    align-items: center;
  }

  /* ── .run-flank ─────────────────────────────────────────────────────────────
   * Icon-left / content-fill / badge-right — the list-item pattern used by
   * showcase nav, sidebar entries, and breadcrumb pairs. The second child
   * expands to fill available space; first and last children size to content.
   *
   * Usage:
   *   <div class="run-flank">
   *     <run-icon name="…"></run-icon>
   *     <span>Label</span>
   *     <run-badge>…</run-badge>
   *   </div>
   */
  .run-flank {
    display: flex;
    align-items: center;
    gap: var(--run-space-semantic-sm);
  }

  .run-flank > :nth-child(2) {
    flex: 1 1 0%;
    min-inline-size: 0;
  }

  /* ── .run-center ────────────────────────────────────────────────────────────
   * Max-width reading column, horizontally centered. The canonical layout unit
   * for prose, article bodies, and marketing copy.
   *
   * Exceeds Web Awesome: WA has no equivalent primitive.
   *
   * Per-instance hook (not a contracted token — utility-local knob):
   *   --run-center-max-width   default 60ch
   *
   * Usage:
   *   <article class="run-center">…</article>
   *   <article class="run-center" style="--run-center-max-width: 72ch">…</article>
   */
  .run-center {
    max-inline-size: var(--run-center-max-width, 60ch);
    margin-inline: auto;
  }

  /* ── .run-sidebar ───────────────────────────────────────────────────────────
   * Fixed-width sidebar + fluid main content, collapsing to a single column
   * when the container is narrower than --run-sidebar-threshold. No media
   * queries — collapse is driven by container geometry alone.
   *
   * Exceeds Web Awesome: WA has no sidebar primitive.
   *
   * Per-instance hooks (not contracted tokens — utility-local knobs):
   *   --run-sidebar-width       sidebar's preferred width   (default: 20rem)
   *   --run-sidebar-threshold   min main-area width before  (default: 30rem)
   *                             the layout switches to single column
   *   --run-sidebar-gap         gap between sidebar + main  (default: --run-space-semantic-lg)
   *
   * Markup convention: first child = sidebar, last child = main content.
   *
   * Usage:
   *   <div class="run-sidebar">
   *     <nav>…</nav>
   *     <main>…</main>
   *   </div>
   */
  .run-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--run-sidebar-gap, var(--run-space-semantic-lg));
  }

  .run-sidebar > :first-child {
    flex-basis: var(--run-sidebar-width, 20rem);
    flex-grow: 1;
  }

  .run-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--run-sidebar-threshold, 30rem);
  }

  /* ── gap modifiers ──────────────────────────────────────────────────────────
   * Override gap on any flex or grid container. Reads the density dimension's
   * space-semantic scale.
   *
   * Usage:  <div class="run-stack run-gap-xl">…</div>
   */
  .run-gap-2xs { gap: var(--run-space-semantic-2xs); }
  .run-gap-xs  { gap: var(--run-space-semantic-xs); }
  .run-gap-sm  { gap: var(--run-space-semantic-sm); }
  .run-gap-md  { gap: var(--run-space-semantic-md); }
  .run-gap-lg  { gap: var(--run-space-semantic-lg); }
  .run-gap-xl  { gap: var(--run-space-semantic-xl); }

  /* ── align modifiers ────────────────────────────────────────────────────────
   * Set align-items on a flex or grid container.
   *
   * Usage:  <div class="run-cluster run-align-start">…</div>
   */
  .run-align-start   { align-items: flex-start; }
  .run-align-center  { align-items: center; }
  .run-align-end     { align-items: flex-end; }
  .run-align-stretch { align-items: stretch; }

  /* ── justify modifiers ──────────────────────────────────────────────────────
   * Set justify-content on a flex or grid container.
   *
   * Usage:  <div class="run-cluster run-justify-between">…</div>
   */
  .run-justify-start   { justify-content: flex-start; }
  .run-justify-center  { justify-content: center; }
  .run-justify-end     { justify-content: flex-end; }
  .run-justify-between { justify-content: space-between; }
  .run-justify-around  { justify-content: space-around; }

  /* ── .run-prose ─────────────────────────────────────────────────────────────
   * Hierarchical, asymmetric typographic rhythm for long-form content.
   * Apply to any container whose children are raw HTML elements — .org docs
   * tabs, in-browser methodology articles, markdown-rendered bodies.
   *
   * Exceeds Web Awesome: WA's wa-prose uses static relative values. run-prose
   * ties --run-prose-rhythm-scale to the typography dimension so a brand
   * density change adapts prose rhythm automatically.
   *
   * Per-instance hooks (not contracted tokens — utility-local knobs):
   *   --run-prose-line-length    max-inline-size of the container  (default: 65ch)
   *   --run-prose-rhythm-scale   multiplier on all block margins   (default: 1)
   *                              <1 tightens, >1 loosens
   *
   * Specificity: all selectors use :where() → (0,0,0). Consumer-app CSS and
   * inline styles override without needing !important.
   *
   * Opt-out: add .run-not-prose to any child to skip all prose styling on it
   * and its descendants.
   *
   * Usage:
   *   <article class="run-prose">
   *     <h1>Title</h1>
   *     <p>Body copy …</p>
   *   </article>
   *
   *   <!-- tighter rhythm -->
   *   <article class="run-prose" style="--run-prose-rhythm-scale: 0.75">…</article>
   *
   *   <!-- wider reading column -->
   *   <article class="run-prose" style="--run-prose-line-length: 75ch">…</article>
   */

  /* Container */
  :where(.run-prose) {
    max-inline-size: var(--run-prose-line-length, 65ch);
    font-family: var(--run-font-semantic-family-body);
    font-size: var(--run-font-size-base);
    line-height: var(--run-font-semantic-line-height-body);
    color: var(--run-color-text-primary);
  }

  /* Headings — asymmetric: 2× space above vs below */
  :where(.run-prose :not(.run-not-prose)) > h1 {
    font-family: var(--run-font-semantic-family-heading);
    font-size: var(--run-font-size-4xl);
    font-weight: var(--run-font-semantic-weight-heading);
    line-height: var(--run-font-semantic-line-height-heading);
    color: var(--run-color-text-primary);
    margin-block-start: calc(var(--run-prose-rhythm-scale, 1) * 2em);
    margin-block-end:   calc(var(--run-prose-rhythm-scale, 1) * 0.5em);
  }

  :where(.run-prose :not(.run-not-prose)) > h2 {
    font-family: var(--run-font-semantic-family-heading);
    font-size: var(--run-font-size-3xl);
    font-weight: var(--run-font-semantic-weight-heading);
    line-height: var(--run-font-semantic-line-height-heading);
    color: var(--run-color-text-primary);
    margin-block-start: calc(var(--run-prose-rhythm-scale, 1) * 2em);
    margin-block-end:   calc(var(--run-prose-rhythm-scale, 1) * 0.5em);
  }

  :where(.run-prose :not(.run-not-prose)) > h3 {
    font-family: var(--run-font-semantic-family-heading);
    font-size: var(--run-font-size-2xl);
    font-weight: var(--run-font-semantic-weight-heading);
    line-height: var(--run-font-semantic-line-height-heading);
    color: var(--run-color-text-primary);
    margin-block-start: calc(var(--run-prose-rhythm-scale, 1) * 1.75em);
    margin-block-end:   calc(var(--run-prose-rhythm-scale, 1) * 0.4em);
  }

  :where(.run-prose :not(.run-not-prose)) > h4 {
    font-family: var(--run-font-semantic-family-heading);
    font-size: var(--run-font-size-xl);
    font-weight: var(--run-font-semantic-weight-heading);
    line-height: var(--run-font-semantic-line-height-heading);
    color: var(--run-color-text-primary);
    margin-block-start: calc(var(--run-prose-rhythm-scale, 1) * 1.5em);
    margin-block-end:   calc(var(--run-prose-rhythm-scale, 1) * 0.35em);
  }

  /* First heading after the container opening needs no top margin */
  :where(.run-prose) > :is(h1, h2, h3, h4):first-child {
    margin-block-start: 0;
  }

  /* Paragraphs */
  :where(.run-prose :not(.run-not-prose)) > p {
    margin-block-start: 0;
    margin-block-end: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-md, 1rem));
    color: var(--run-color-text-primary);
  }

  /* Lists */
  :where(.run-prose :not(.run-not-prose)) > ul,
  :where(.run-prose :not(.run-not-prose)) > ol {
    margin-block-start: 0;
    margin-block-end: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-md, 1rem));
    padding-inline-start: 1.5em;
  }

  :where(.run-prose :not(.run-not-prose)) > ul > li,
  :where(.run-prose :not(.run-not-prose)) > ol > li {
    margin-block-end: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-xs, 0.5rem));
    color: var(--run-color-text-primary);
  }

  /* Inline code */
  :where(.run-prose :not(.run-not-prose)) code:not(pre > code) {
    font-family: var(--run-font-semantic-family-code);
    font-size: 0.875em;
    background: var(--run-color-surface-subtle);
    color: var(--run-color-text-primary);
    border-radius: 3px;
    padding-block: 0.1em;
    padding-inline: 0.3em;
  }

  /* Code blocks */
  :where(.run-prose :not(.run-not-prose)) > pre {
    font-family: var(--run-font-semantic-family-code);
    font-size: var(--run-font-size-sm);
    background: var(--run-color-surface-subtle);
    color: var(--run-color-text-primary);
    border-radius: 4px;
    padding-block: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-sm, 0.75rem));
    padding-inline: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-md, 1rem));
    overflow-x: auto;
    margin-block-start: 0;
    margin-block-end: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-md, 1rem));
  }

  :where(.run-prose :not(.run-not-prose)) > pre > code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
  }

  /* Tables */
  :where(.run-prose :not(.run-not-prose)) > table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block-start: 0;
    margin-block-end: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-md, 1rem));
    font-size: var(--run-font-size-sm);
  }

  :where(.run-prose :not(.run-not-prose)) > table th,
  :where(.run-prose :not(.run-not-prose)) > table td {
    padding-block: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-xs, 0.5rem));
    padding-inline: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-sm, 0.75rem));
    border-block-end: 1px solid var(--run-color-border-subtle);
    text-align: start;
    color: var(--run-color-text-primary);
  }

  :where(.run-prose :not(.run-not-prose)) > table th {
    font-weight: var(--run-font-semantic-weight-bold);
    color: var(--run-color-text-secondary);
    border-block-end: 2px solid var(--run-color-border-default);
  }

  /* Horizontal rule */
  :where(.run-prose :not(.run-not-prose)) > hr {
    border: none;
    border-block-start: 1px solid var(--run-color-border-subtle);
    margin-block: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-lg, 1.5rem));
  }

  /* Blockquote / callout */
  :where(.run-prose :not(.run-not-prose)) > blockquote {
    border-inline-start: 3px solid var(--run-color-border-subtle);
    padding-inline-start: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-md, 1rem));
    margin-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: calc(var(--run-prose-rhythm-scale, 1) * var(--run-space-semantic-md, 1rem));
    color: var(--run-color-text-secondary);
    font-style: italic;
  }
}