/* De Stijl (/de-stijl/): the design system this site uses, shown one story at a time. A tool beside the site, not a
   page of it, so it has a look of its own: no grid of black gaps, no colour blocks, no site menu or footer; one paper
   surface split by hairlines, compact type, native controls. Tokens and fonts come from /styles.css (linked first),
   so the shell follows the theme like every page. Not inlined in production: the server inlines /styles.css only.
   Its responsive switch is a viewport media query: the shell sits outside the site's container tiers.

   Layout: the bar on top (name, preview settings, a link back to the site), then the story list (nav) beside the
   stage (main, the iframe on its canvas), the footer under the list. One screen tall; the list scrolls on its own. */
.ds {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "bar bar" "nav stage" "foot stage";
  height: 100vh;
  height: 100dvh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.ds a {
  color: var(--ink);
  text-underline-offset: 4px;
}

.ds a:hover {
  color: var(--link-hover);
}

.ds :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* the skip link: out of sight until it takes keyboard focus */
.ds-skip {
  position: fixed;
  z-index: 1;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  background: var(--paper);
  font-weight: 500;
}

.ds-skip:not(:focus) {
  clip-path: inset(50%);
}

/* the bar: the name left, the preview settings and the way back right; wraps on narrow screens */
.ds-bar {
  grid-area: bar;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  min-height: 64px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--grid-line);
}

.ds-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
}

.ds-title {
  margin: 0;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ds-tag {
  margin: 0;
  color: var(--muted);
}

.ds-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  margin-inline-start: auto;
}

.ds-tools[hidden] {
  display: none;
}

.ds-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}

/* a native select and checkboxes, framed in --muted (non-text contrast, 1.4.11) */
.ds-tool select {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--muted);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.ds-tool input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
}

.ds-tool:has(input:disabled) {
  color: var(--muted);
  cursor: default;
}

.ds-site {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

/* the story list: compact, 14px; each link 32px tall with a mouse (above WCAG 2.5.8's 24px; the site's AAA
   target of 44px is kept on touch screens); each story sits 16px in from its group's label; the current story
   (frame.js and docs.js mark it) is bold, underlined and flagged by a bar in that indent, under the label's edge,
   so colour is never the only cue */
.ds-nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 16px 20px;
  border-right: 1px solid var(--grid-line);
  font-size: 14px;
}

/* the intro: 48px above the first group (its 32px plus the list's 16px gap), clearly more than the space between
   groups, so it reads as a preface to the list, not as one of its groups */
.ds-intro {
  margin: 0 0 32px;
  line-height: 1.5;
  color: var(--muted);
}

.ds-label {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.ds-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-nav li a {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding-inline-start: 13px;
  border-inline-start: 3px solid transparent;
  text-decoration: none;
}

.ds-nav li a:hover {
  text-decoration: underline;
}

.ds-nav a[aria-current] {
  border-inline-start-color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
}

@media (pointer: coarse) {
  .ds-nav li a {
    min-height: 44px;
  }
}

/* the stage: the story's frame on a canvas of its own, padded all round, so where the story ends is always clear */
.ds-stage {
  grid-area: stage;
  min-width: 0;
  padding: 24px;
  background: var(--grid-line);
}

.ds-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 1px solid var(--muted);
  background: var(--black);
}

.ds-foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  padding: 8px 24px;
  border-top: 1px solid var(--grid-line);
  border-right: 1px solid var(--grid-line);
  font-size: 14px;
  color: var(--muted);
}

.ds-foot p {
  margin: 0;
  flex-basis: 100%;
}

.ds-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* phones: one column that scrolls as a page, the stories wrapping in rows to keep the list short, the stage most
   of a screen tall */
@media (width < 760px) {
  .ds {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto calc(100svh * 0.85) auto;
    grid-template-areas: "bar" "nav" "stage" "foot";
    height: auto;
  }

  .ds-bar {
    padding: 8px 16px;
  }

  .ds-tools {
    margin-inline-start: 0;
  }

  .ds-nav {
    overflow-y: visible;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--grid-line);
  }

  .ds-group ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
  }

  .ds-nav li a {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .ds-stage {
    padding: 12px;
  }

  .ds-foot {
    padding: 8px 16px;
    border-right: 0;
  }
}

/* inside a story (frame.html): a screen of black above and below a block, so its scroll-driven motion has room */
.ds-space {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-height: var(--screen);
  margin: 0;
  padding: 0 20px;
  font-size: 18px;
  text-align: center;
  color: var(--on-color);
}

/* ===== Foundations pages (colour.html, type.html, space.html, grid.html; docs.js fills the live values) =====
   A reading page inside the stage: paper, one column up to 1040px, De Stijl's hairlines between sections. The body
   is also .page, so the site's container (cqi), geometry tokens and tiers apply exactly as on a site page. */
.dsd {
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.dsd-main {
  box-sizing: border-box;
  max-width: 1040px;
  padding: 40px 40px 72px;
}

.dsd code,
.dsd-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
}

/* inline code: a chip, --ink at 6% behind it and at 20% around it, mixed from the theme's own ink so it follows
   every theme (and each theme cell in the colour tables); text keeps --ink, so contrast barely moves. Rounded:
   De Stijl is a tool beside the site, not a panel of it (the site keeps radius for illustrations only). Code in a
   block (.dsd-code) stays as it is. */
.dsd :not(pre) > code {
  padding: 0.1em 0.35em;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.dsd-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.dsd-title {
  margin: 4px 0 12px;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.dsd-lead {
  max-width: 65ch;
  margin: 0;
  font-size: 18px;
  color: var(--muted);
}

.dsd-here {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.dsd-sec {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--grid-line);
}

.dsd-sec h2 {
  margin: 0 0 12px;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.dsd-sec > p {
  max-width: 65ch;
  margin: 0 0 16px;
}

.dsd-rules {
  max-width: 70ch;
  margin: 0 0 24px;
  padding-inline-start: 20px;
}

.dsd-rules li + li {
  margin-top: 8px;
}

.dsd-code {
  margin: 0 0 16px;
  padding: 16px;
  overflow-x: auto;
  border: 1px solid var(--grid-line);
  line-height: 1.6;
}

/* tables: hairline rows, the first column the row's heading; wide ones scroll on their own */
.dsd-scroll {
  overflow-x: auto;
  margin-bottom: 16px;
}

.dsd-table {
  border-collapse: collapse;
  font-size: 14px;
}

.dsd-table th,
.dsd-table td {
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--grid-line);
  text-align: left;
  vertical-align: middle;
}

.dsd-table thead th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.dsd-table tbody th {
  font-weight: 500;
}

.dsd-role {
  display: block;
  max-width: 32ch;
  font-weight: 400;
  color: var(--muted);
}

/* the colour and contrast tables: each cell carries a theme (data-theme), so it is drawn in that theme's paper */
.dsd-colours td,
.dsd-contrast td {
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink);
  white-space: nowrap;
}

.dsd-chip {
  display: inline-block;
  width: 32px;
  height: 24px;
  margin-inline-end: 8px;
  vertical-align: middle;
  outline: 1px solid var(--muted);
  outline-offset: -1px;
}

.dsd-sample {
  display: inline-block;
  min-width: 40px;
  padding: 4px 8px;
  font-weight: 500;
  text-align: center;
}

.dsd-ratio {
  font-size: 12px;
}

.dsd-low {
  font-weight: 600;
  text-decoration: underline;
}

.dsd-f-dm {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
}

.dsd-f-inter {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
}

.dsd-f-archivo {
  font-family: "Archivo", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 300;
}

/* specimens use the site's own classes at the site's own sizes */
.dsd-specimen {
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--grid-line);
}

.dsd-spec-label {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
}

.dsd .s-body {
  min-width: 0;
  max-width: 60ch;
}

.dsd-ui {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.dsd-lockup {
  margin: 0 0 16px;
  padding: 40px;
}

.dsd-lockup .ap-fit {
  --title-size: 8cqi;
}

/* the spacing scale as bars in --ink */
.dsd-bars {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dsd-bars li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 28px;
}

.dsd-bar {
  height: 12px;
  background: var(--ink);
}

.dsd-shapes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  font-size: 14px;
}

.dsd-shape-square {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 3px solid var(--ink);
}

.dsd-shape-target {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  outline: 1px dashed var(--muted);
}

.dsd-shape-focus {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

/* the grid demo: a real black-gap grid, built the site's way */
.dsd-demo {
  display: grid;
  gap: var(--frame);
  grid-template-columns: minmax(0, 1fr) 14cqi;
  grid-template-rows: 64px 64px 32px;
  grid-template-areas: "panel s1" "panel s2" "panel s3";
  margin: 0 0 16px;
  padding: var(--frame);
  background: var(--black);
  font-size: 12px;
}

.dsd-demo > * {
  padding: 8px;
}

.dsd-demo-panel {
  grid-area: panel;
}

/* cell maps: each block's grid drawn small (docs.js builds the cells from data-map), beside its areas in text */
.dsd-maps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.dsd-map {
  margin: 0;
}

.dsd-map figcaption {
  margin: 8px 0;
  font-size: 14px;
}

.dsd-map-grid {
  display: grid;
  gap: 3px;
  height: 160px;
  padding: 3px;
  background: var(--black);
}

.dsd-map-cell {
  overflow: hidden;
  padding: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.3;
}

.dsd-map .dsd-code {
  font-size: 12px;
}

/* a probe docs.js measures tokens with */
.dsd-probe {
  position: absolute;
  visibility: hidden;
  height: 0;
}

@media (width < 760px) {
  .dsd-main {
    padding: 24px 16px 48px;
  }

  .dsd-title {
    font-size: 36px;
  }
}