/* ============================================================
   DOCUMENTATION CHROME
   ------------------------------------------------------------
   The shell of the design-system site: left nav, page column,
   section headers, demo scaffolding.

   THIS IS NOT PART OF THE DESIGN SYSTEM. Nothing here ships with
   the product, and no product screen may use these classes. It is
   kept in its own file, imported only by the doc pages, so the
   boundary is obvious — main.css never pulls it in.

   It does consume design tokens, because the documentation should
   look like the thing it documents.
   ============================================================ */

/* ---------- Layout ----------------------------------------
   Same structure as the app shell (css/layout/_shell.css):

     .ds-layout   the shell — owns the gutter and pushes clear of the
                  fixed sidebar, exactly like .ice-shell
     .ds-nav      the fixed sidebar, like .ice-sidebar
     .ds-main     the content column, capped and centred in whatever
                  space is left, like .ice-content

   One gutter token drives the sidebar inset and the content offset,
   so changing it moves both together.
   ---------------------------------------------------------- */

.ds-layout {
  --ds-gutter: var(--space-24);
  min-block-size: 100dvh;
}

@media (min-width: 861px) {
  .ds-layout {
    padding: var(--ds-gutter);
    padding-inline-start: calc(
      var(--ds-gutter) + var(--width-sidebar) + var(--ds-gutter));
  }
}

/* Capped and centred in the remaining space — the same
   `margin-inline: auto` trick .ice-content uses. */
.ds-main {
  min-inline-size: 0;
  max-inline-size: var(--w-900);
  margin-inline: auto;
  padding-block-end: var(--space-80);
}

@media (max-width: 860px) {
  .ds-main { padding: var(--space-24) var(--space-20) var(--space-80); }
}

/* ---------- Nav -------------------------------------------
   Same recipe as .ice-sidebar in the app: a rounded glass panel,
   pinned to the viewport and inset by the gutter on all four sides,
   full height, scrolling internally if the nav outgrows the screen.
   ---------------------------------------------------------- */
.ds-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16);
  border-radius: var(--radius-20);
}

@media (min-width: 861px) {
  .ds-nav {
    position: fixed;
    inset-block: var(--ds-gutter);
    inset-inline-start: var(--ds-gutter);
    inline-size: var(--width-sidebar);
    overflow-y: auto;
    z-index: var(--z-sticky);
  }
}

.ds-nav__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-8) var(--space-12);
  margin-block-end: var(--space-24);
}
.ds-nav__brand b { font-size: var(--type-h5-size); font-weight: var(--weight-semibold); color: var(--fg-high); }
.ds-nav__brand span { font-size: var(--type-body-s-size); color: var(--fg-low); }

.ds-nav__group { margin-block-end: var(--space-20); }

.ds-nav__grouptitle {
  display: block;
  padding-inline: var(--space-12);
  margin-block-end: var(--space-8);
  font-size: var(--type-caps-s-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--type-caps-m-track);
  text-transform: uppercase;
  color: var(--fg-low);
}

.ds-nav__list { display: flex; flex-direction: column; gap: 1px; }

.ds-nav__list a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-9);
  font-size: var(--type-body-m-size);
  font-weight: var(--weight-medium);
  color: var(--fg-medium);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
/* Same treatment as .ice-nav-item in the app: a quiet wash on hover,
   glass on the active row. Surface-scoped, so it reads correctly
   whichever polarity the nav is set to. */
.ds-nav__list a:hover { background-color: var(--hover-veil); color: var(--fg-high); }

.ds-nav__list li.is-active > a {
  color: var(--fg-high);
  font-weight: var(--weight-semibold);
  background-image: var(--elev-primary-2-image);
  box-shadow: var(--elev-primary-2-shadow);
}

.ds-nav__list a .ice-icon { inline-size: var(--icon-s); block-size: var(--icon-s); opacity: .7; }

/* ---------- Page furniture -------------------------------- */
.ds-page-title {
  font-size: var(--type-h2-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--type-h4-track);
  color: var(--fg-high);
  margin-block-end: var(--space-8);
}

.ds-page-lede {
  font-size: var(--type-body-l-size);
  line-height: var(--type-body-m-leading);
  color: var(--fg-medium);
  max-inline-size: 72ch;
  margin-block-end: var(--space-40);
}

/* A section is a PANEL. The page title and lede sit on the raw
   backdrop; everything else is grouped into cards, so a long page
   reads as a stack of topics rather than one continuous scroll. */
.ds-section {
  margin-block-end: var(--space-24);
  padding: var(--space-24);
  border-radius: var(--radius-20);
  border: 1px solid var(--elev-primary-2-border);
  background-image: var(--elev-primary-2-image);
  box-shadow: var(--elev-primary-2-shadow);
  backdrop-filter: blur(var(--shadow-s-blur));
  -webkit-backdrop-filter: blur(var(--shadow-s-blur));
}

/* A plain section, for prose that should not look like a specimen. */
.ds-section[data-plain] {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ds-section__title {
  font-size: var(--type-h4-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--type-h4-track);
  color: var(--fg-high);
  padding-block-end: var(--space-12);
  margin-block-end: var(--space-16);
  border-block-end: 1px solid var(--border-divider);
}

.ds-section__note {
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-leading);
  color: var(--fg-medium);
  max-inline-size: 72ch;
  margin-block-end: var(--space-20);
}

/* ---------- Glass levels strip ----------------------------
   Sits outside any .ds-section on purpose: a panel around it would
   mean looking at glass through glass, and the levels would stop
   being comparable. */
.ds-levels {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: repeat(auto-fit, minmax(var(--w-150), 1fr));
  margin-block-end: var(--space-40);
}
.ds-level {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  border-radius: var(--radius-16);
  min-block-size: var(--w-100);
}
.ds-level__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--type-caps-s-size);
  /* Follows the panel, not the page: the `dark` elevation sets its
     own white foreground, and a fixed --fg-2 vanished on it. */
  color: currentColor;
  opacity: .75;
  white-space: nowrap;
}

/* Shadow specimens, laid out across rather than down: six cast
   shadows on the first line, the three remaining on the second. */
.ds-shadows {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-16) var(--space-12);
}
.ds-shadow { display: flex; flex-direction: column; gap: var(--space-8); }
.ds-shadow__box {
  block-size: var(--w-80);
  border-radius: var(--radius-16);
  background-image: var(--elev-primary-3-image);
  border: 1px solid var(--elev-primary-3-border);
}
.ds-shadow__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--type-caps-s-size);
  color: var(--fg-low);
}

/* The elevation strip is grouped by family, each group titled. */
.ds-family { margin-block-end: var(--space-32); }
.ds-family__title {
  font-size: var(--type-caps-s-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--type-caps-m-track);
  text-transform: uppercase;
  color: var(--fg-low);
  margin-block-end: var(--space-10);
}
.ds-family .ds-levels { margin-block-end: 0; }

/* ---------- Demo scaffolding ------------------------------ */

/* A demo block. No background and no forced polarity: the component
   sits on the page's real theme and backdrop, which is how it looks
   in the product. Use the gear to see the other theme. */
.ds-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-block: var(--space-8);
}

/* Used only by surfaces.php, where forcing a polarity IS the point.
   The material comes from .ice-glass in the markup; this is spacing. */
.ds-pane {
  padding: var(--space-20);
  border-radius: var(--radius-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.ds-pane > .ds-pane__label {
  font-size: var(--type-caps-s-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--type-caps-m-track);
  text-transform: uppercase;
  color: var(--fg-low);
}

.ds-row { display: flex; gap: var(--space-12); align-items: center; flex-wrap: wrap; }
.ds-col { display: flex; flex-direction: column; gap: var(--space-12); }
.ds-grid { display: grid; gap: var(--space-12); grid-template-columns: repeat(auto-fill, minmax(var(--w-180), 1fr)); }

/* A labelled specimen row: monospace label on the left, demo on the right. */
.ds-spec {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding-block: var(--space-12);
}
.ds-spec + .ds-spec { border-block-start: 1px solid var(--border-divider); }

.ds-spec__label {
  inline-size: var(--w-120);
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--type-caps-s-size);
  line-height: var(--type-h6-leading);
  color: var(--fg-low);
}
.ds-spec__demo {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  flex-wrap: wrap;
  flex: 1 0 0;
  min-inline-size: 0;
}

/* A hairline between two groups inside one specimen row — square vs
   pill, filled vs outlined. */
.ds-sep {
  inline-size: 1px;
  align-self: stretch;
  min-block-size: var(--space-24);
  background-color: var(--border-divider);
  flex-shrink: 0;
  margin-inline: var(--space-4);
}

/* A block that may be wider than the column — the width scale, a
   wide table. It scrolls on its own rather than pushing the page. */
.ds-scroll {
  overflow-x: auto;
  padding-block-end: var(--space-8);
}

/* ---------- Code + tables --------------------------------- */
.ds-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--type-caps-s-size);
  padding: 2px 6px;
  border-radius: var(--radius-3);
  background-color: rgb(110 138 186 / .14);
  color: var(--fg-high);
}

pre.ds-pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--type-body-s-size);
  line-height: 1.6;
  padding: var(--space-16);
  border-radius: var(--radius-16);
  border: 1px solid var(--border-divider);
  background-color: rgb(110 138 186 / .10);
  color: var(--fg-high);
  overflow-x: auto;
}

.ds-table { inline-size: 100%; border-collapse: collapse; font-size: var(--type-body-m-size); }
.ds-table th, .ds-table td {
  text-align: start;
  padding: var(--space-8) var(--space-12);
  border-block-end: 1px solid var(--border-divider);
  vertical-align: middle;
}
.ds-table th { font-weight: var(--weight-semibold); color: var(--fg-high); }
.ds-table td { color: var(--fg-medium); }

/* ---------- Responsive equivalence table (.rt) ------------
   The four bands side by side, the one matching the screen raised
   like the highlighted column in the Figma sheets. All four numbers
   always visible — the docs never show a single adapted value.

   STRUCTURE ONLY. Every bit of type here is a design-system class in
   the markup (.ice-caps-s, .ice-body-m, .ice-semibold, .ice-emph-*);
   this file sets no font-size, weight, family, tracking or colour. */
.rt { border-radius: var(--radius-20); padding: var(--space-16) var(--space-24); overflow-x: auto; }
.rt__table { inline-size: 100%; border-collapse: separate; border-spacing: 0; }
.rt__table th, .rt__table td {
  padding: var(--space-12) var(--space-20);
  text-align: end; white-space: nowrap; vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.rt__colhead { vertical-align: bottom; }
.rt__colhead .ice-caps-s { display: block; margin-block-end: var(--space-4); }
.rt__rowhead { text-align: start; }
.rt__table tbody tr + tr th, .rt__table tbody tr + tr td { border-block-start: 1px solid var(--border-divider); }

/* The live column: filled and rounded at its two ends. */
.rt[data-live="notebook"] [data-band="notebook"],
.rt[data-live="laptop"]   [data-band="laptop"],
.rt[data-live="desktop"]  [data-band="desktop"],
.rt[data-live="imac"]     [data-band="imac"] { background: rgba(255, 255, 255, .55); }
.rt[data-live="notebook"] thead [data-band="notebook"],
.rt[data-live="laptop"]   thead [data-band="laptop"],
.rt[data-live="desktop"]  thead [data-band="desktop"],
.rt[data-live="imac"]     thead [data-band="imac"] {
  border-start-start-radius: var(--radius-12); border-start-end-radius: var(--radius-12);
}
.rt[data-live="notebook"] tbody tr:last-child [data-band="notebook"],
.rt[data-live="laptop"]   tbody tr:last-child [data-band="laptop"],
.rt[data-live="desktop"]  tbody tr:last-child [data-band="desktop"],
.rt[data-live="imac"]     tbody tr:last-child [data-band="imac"] {
  border-end-start-radius: var(--radius-12); border-end-end-radius: var(--radius-12);
}

/* ---------- Token specimens ------------------------------- */
.ds-ramp { display: grid; grid-template-columns: repeat(10, 1fr); border-radius: var(--radius-12); overflow: hidden; }
.ds-ramp > div {
  block-size: 48px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-block-end: 3px;
  font-family: ui-monospace, monospace; font-size: 9px;
}
.ds-token { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-token code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--type-caps-s-size);
  color: var(--fg-low);
}
/* Just a size. The elevation it is paired with supplies the fill,
   the border and the shadow. */
.ds-swatch { block-size: 56px; }
.ds-bar { block-size: var(--space-24); background-color: var(--accent); border-radius: var(--radius-3); }

/* ---------- Callout --------------------------------------- */
.ds-note {
  padding: var(--space-16);
  border-radius: var(--radius-16);
  border-inline-start: 3px solid var(--accent);
  background-color: rgb(110 138 186 / .10);
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-leading);
  color: var(--fg-medium);
  margin-block-end: var(--space-20);
  max-inline-size: 72ch;
}
.ds-note b { color: var(--fg-high); }
.ds-note[data-tone="warn"] { border-inline-start-color: var(--badge-amber); }

/* ---------- Overview cards (home) ------------------------- */
.ds-cards { display: grid; gap: var(--space-12); grid-template-columns: repeat(auto-fill, minmax(var(--w-240), 1fr)); }
.ds-cardlink {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-16);
  border-radius: var(--radius-16);
  border: 1px solid var(--border-divider);
  background-color: rgb(255 255 255 / .35);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.ds-cardlink:hover { transform: translateY(-2px); box-shadow: var(--elev-primary-2-shadow); }
.ds-cardlink b { font-size: var(--type-h5-size); font-weight: var(--weight-medium); color: var(--fg-high); }
.ds-cardlink span { font-size: var(--type-body-m-size); color: var(--fg-medium); line-height: var(--type-body-m-leading); }

/* ---------- Mobile ---------------------------------------- */
@media (max-width: 860px) {
  .ds-nav {
    position: static;
    inline-size: auto;
    margin: var(--space-16) var(--space-16) 0;
  }
}