/* =============================================================
   arXiv Design System — the documentation site (tier 2)

   This file is NOT self-contained. A docs page loads tier 1 first:

     <link rel="stylesheet" href="design-system.css">
     <link rel="stylesheet" href="docs.css">

   Tier 1 is the design system. This file holds only what the documentation
   pages need in order to SHOW it: grids that lay a component's variants
   side by side, the labels on them, the grounds a demo sits on, the table
   that lists tokens. None of it is for building arXiv pages, so none of it
   carries the ds- prefix. A page must not add a <style> block of its own:
   what a demo needs goes here, and what the site needs goes in tier 1.
   ============================================================= */


/* ─── Variant grid ───────────────────────────────────────────────
   Columns of one component in different states or contexts, each with a
   label. Six columns of buttons fit the page width at this gap. */
.state-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-tight) var(--ds-space-3);
  align-items: flex-start;
  margin-bottom: var(--ds-space-3);
}
/* An empty cell: a variant that does not exist in this column. It borrows a
   button's geometry so the rows below it still line up, and is invisible. */
.state-gap { visibility: hidden; }
.state-label {
  font-family: var(--ds-font-condensed);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}


/* ─── Demo grounds ───────────────────────────────────────────────
   The surfaces a component is shown on. Colour comes from tokens or from
   an inline style on the element; these only give the ground its shape. */
.tinted-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-tight);
  margin-top: var(--ds-space-1);
  padding: 16px 18px;
  background: var(--ds-accent-surface);
  border: 1px solid var(--ds-accent-border);
  border-radius: 6px;
}
.tinted-row + .tinted-row { margin-top: var(--ds-space-3); }
.tinted-row.warm { background: var(--ds-surface-muted); border-color: var(--ds-border); }
.dark-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-tight);
  margin-top: var(--ds-space-1);
  padding: 18px;
  background: var(--ds-accent-strong);
  border-radius: 6px;
}
.close-ground { display: inline-flex; padding: 6px 8px; border-radius: 6px; }
.chip-demo-stage {
  position: relative;
  margin-bottom: var(--ds-space-4);   /* the pill hangs below the stage */
  max-width: 460px;
  padding: 22px 24px 30px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  font-family: var(--ds-font-mono);
  font-size: 0.9375rem;
  color: var(--ds-text-muted);
  text-align: center;
}


/* ─── Stand-in: the actions inside an element pill ──────────────
   .ds-element-pill styles its children not at all, so the docs give them a
   look here. Promotion candidate: the pill (or a small text button) should
   own this. */
.chip-demo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  margin-block: -5px;
  padding: 0 3px;
  font-family: var(--ds-font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ds-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.chip-demo:hover { color: var(--ds-link); text-decoration: underline; text-underline-offset: 2px; }
.chip-demo:focus-visible { outline: 3px solid var(--ds-focus-ring); outline-offset: 2px; border-radius: 3px; }
.chip-demo.is-cta { color: var(--ds-link); font-weight: 600; }
.chip-demo svg { width: 1em; height: 1em; flex-shrink: 0; }


/* ─── Reference material inside a card ──────────────────────────── */
.ref { margin-top: var(--ds-space-3); }
.ref .token-table { max-width: 100%; }
.ref .token-table + dl { margin-top: var(--ds-space-3); }
.token-table { margin-top: var(--ds-space-2); }
.token-table th,
.token-table td {
  padding: 8px 12px;
  font-size: 0.75rem;
  text-align: left;
  border-top: 1px solid var(--ds-surface-muted);
}
.token-table thead th {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  background: var(--ds-surface-muted);
  border-top: none;
}
.token-table code {
  padding: 0;
  font-family: var(--ds-font-mono);
  font-size: 0.6875rem;
  color: var(--ds-link);
  background: none;
}
.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 3px;
}
/* A specimen: the same swatch as a card's direct child is a block a reader
   can look at, not a chip beside a value. */
.ds-card > .swatch {
  display: block;
  width: 100%;
  height: 4.5rem;
  margin: 0 0 var(--ds-space-2);
  border-radius: 6px;
}
.ds-card > strong + code, .ds-card > code + code { margin-left: var(--ds-space-tight); }
.notes li { margin-bottom: var(--ds-space-1); }
.ds-card + .notes { margin-top: var(--ds-space-4); }   /* notes that follow an example keep the card's gap */


/* ─── Icon catalogue (icons.html, generated) ───────────────────── */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--ds-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4) var(--ds-space-2);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
}
.icon-cell svg { width: 1.5rem; height: 1.5rem; }
.icon-name { font-family: var(--ds-font-mono); font-size: 0.75rem; color: var(--ds-text-muted); word-break: break-all; text-align: center; }


/* ─── Moved from alerts.html ──────────────────────────────────────
   The live status-token table: one row per state, read from the stylesheet
   at runtime. .token-table and .swatch above give it its type. */
.token-table td.state-name {
  font-weight: 700;
  color: var(--ds-text-muted);
  background: var(--ds-canvas);
  white-space: nowrap;
}
.ratio-pass { font-weight: 700; }
.ratio-fail { font-weight: 700; color: var(--ds-error-border); }
/* A table wider than a phone scrolls inside its own box; the page never does. */
.table-scroll { overflow-x: auto; }


/* ─── Moved from tags.html ───────────────────────────────────────
   A wrapping row of tags or badges inside a demo card, or in a table
   cell: siblings that belong together, so they take the tight gap. */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-tight);
}


/* ─── Moved from forms.html ──────────────────────────────────────
   Field states side by side inside a demo card: one labelled field per
   cell. The field takes .ds-field--full so the half-width default does not
   leave it 130px wide in a narrow cell. */
.form-states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ds-space-block);
}
.form-state {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-tight);
}
/* A label with a tooltip trigger beside it. */
.form-label-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  margin-bottom: var(--ds-space-2);
}
.form-label-row--end {
  justify-content: flex-end;
  margin-top: var(--ds-space-block);
  padding-top: var(--ds-space-block);
  border-top: 1px solid var(--ds-border);
}


/* ─── A labelled column in the variant grid ──────────────────────
   For a component that is not a button; .ds-btn-group--stack does this
   job for buttons. */
.state-cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-tight); }


/* ─── Moved from spacing.html ────────────────────────────────────
   The proximity demo: the same label/value pairs twice, spaced by the
   named breaks on one side and by one flat gap on the other. Every gap
   sits on a container, none on a child. */
.prox, .prox-group, .prox-row { display: grid; }
.prox       { gap: var(--ds-space-section); }
.prox-group { gap: var(--ds-space-block); }
.prox-row   { gap: var(--ds-space-tight); }
.prox--flat, .prox--flat .prox-group, .prox--flat .prox-row { gap: var(--ds-space-block); }


/* ─── Moved from progressive-disclosure.html ─────────────────────
   Staging for the disclosure demos: none of it is for building arXiv pages. */
/* The author-list demo: a real list that reads as a sentence, which is the
   shape .ds-show-more exists to serve. */
.authors-demo { max-width: 560px; font-size: 0.95rem; line-height: 1.7; }
.authors-demo ul { display: inline; list-style: none; padding: 0; margin: 0; }
.authors-demo li { display: inline; }
.authors-demo li:not(:last-child)::after { content: ', '; }
.authors-demo a { color: var(--ds-link); text-decoration: none; }
.authors-demo a:hover { text-decoration: underline; }
/* A stand-in for the sidebar the rail accordion is built for: narrow, with
   the rail's own hairline dividers between items. No box of its own. */
.rail-demo { max-width: 300px; }
.rail-demo > * + * { border-top: 1px solid var(--ds-border); margin-top: var(--ds-space-3); padding-top: 14px; }
/* The popover, dropped into the page flow so it can be read here rather than
   floating over it. */
.popover-demo .ds-popover { position: relative; display: block; --ds-popover-width: 20rem; max-height: none; }


/* ─── Site chrome inside a card (header.html, footer.html) ──
   A header or footer runs to the card's edges: it carries its own padding,
   so the card gives it none. The accordion foot drops its negative margins
   to match. Not for a card that holds a margin note. */
.chrome-demo { padding: 0; overflow: hidden; }
.chrome-demo > .ds-acc:last-child { margin: 0; }


/* ─── Moved from cards.html ─────────────────────────────
   The info card at the width its sidebar gives it, and a stand-in for
   that sidebar beside a main content area. */
.context-example { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ds-space-block); }
.context-main { flex: 1 1 16rem; min-width: 0; }
.context-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  border-radius: 4px;
  background: var(--ds-surface-muted);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--ds-text-muted);
}
.context-sidebar { flex: 0 0 240px; max-width: 100%; }