/* ==========================================================================
   Page: LATENT Kit · Foundations (K00–K04)
   Shell (sidebar, chapters, headings, palette): components/kit-shell.css

   Note: several specimen boxes below use box-sizing: content-box so their
   height values read like the spec (e.g. "height 44" + 1px border).
   ========================================================================== */

/* --------------------------------------------------------------------------
   K00 Cover & index
   -------------------------------------------------------------------------- */
.cover__title {
  margin-top: 28px;
  font: 300 clamp(72px, 12vw, 176px)/.9 var(--font-serif);
  letter-spacing: -.04em;
}

.cover__intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: end;
  gap: 32px 64px;
  margin-top: 28px;
}

.cover__lede {
  max-width: 620px;
  font: 400 clamp(24px, 2.4vw, 32px)/1.3 var(--font-serif);
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.cover__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cover-step;
  font: 400 15px/1.5 var(--font-sans);
  color: var(--ink-2);
}

.cover__steps li {
  display: flex;
  gap: 12px;
  counter-increment: cover-step;
}

.cover__steps li::before {
  content: counter(cover-step);
  font: 500 12px/1.9 var(--font-mono);
  color: var(--ink);
}

/* Index of all kit and demo pages */
.kit-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  margin-top: 64px;
  border-top: 1px solid var(--hairline-strong);
  border-left: 1px solid var(--hairline);
}

.kit-index__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 153px; /* 120 + padding + border */
  padding: 16px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}

.kit-index__card:hover {
  background: var(--surface);
  color: var(--ink);
}

.kit-index__meta {
  display: flex;
  justify-content: space-between;
  font: 500 11px/1 var(--font-mono);
}

.kit-index__id { color: var(--machine-ink); }
.kit-index__tag { color: var(--success); }

.kit-index__label {
  font: 400 20px/1.2 var(--font-serif);
}

.kit-index__desc {
  margin-top: auto;
  font: 400 13px/1.4 var(--font-sans);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   K01 Principles
   -------------------------------------------------------------------------- */
.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 48px;
  margin-top: 56px;
}

.principles__group {
  display: flex;
  flex-direction: column;
}

.principles__heading {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline-strong);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .08em;
}

.principle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}

.principle__title {
  font: 400 22px/1.25 var(--font-serif);
}

.principle__text {
  font: 400 15px/1.55 var(--font-sans);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   K02 Color & tokens
   -------------------------------------------------------------------------- */

/* Role cards: Human / Machine / Prose / Code */
.role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin-top: 48px;
}

.role-card {
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 20px;
  border-radius: var(--radius-card);
}

.role-card__token,
.role-card__hex {
  font: 500 12px/1 var(--font-mono);
}

.role-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.role-card__name {
  font: 400 30px/1.1 var(--font-serif);
}

.role-card__text {
  font: 400 14px/1.4 var(--font-sans);
}

.role-card--action {
  border: 1px solid var(--hairline-strong);
  background: var(--lime-400);
}

.role-card--machine {
  background: var(--mist-100);
}

.role-card--paper {
  border: 1px solid var(--hairline);
  background: var(--paper-100);
}

.role-card--machine .role-card__token,
.role-card--machine .role-card__hex,
.role-card--paper .role-card__token,
.role-card--paper .role-card__hex {
  color: var(--graphite-700);
}

.role-card--terminal {
  background: var(--term-950);
  color: var(--term-100);
}

.role-card--terminal .role-card__token,
.role-card--terminal .role-card__text,
.role-card--terminal .role-card__hex {
  color: var(--term-300);
}

/* Primitive swatches (colour via --swatch) */
.swatch-rows {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 24px;
}

.swatch-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.swatch {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.swatch__chip {
  height: 64px;
  background: var(--swatch);
}

.swatch__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  font: 400 12px/1.2 var(--font-mono);
}

.swatch__name { font-weight: 500; }
.swatch__hex { color: var(--ink-3); }

/* Semantic token table */
.token-table-frame {
  margin-top: 24px;
}

.token-table td {
  vertical-align: baseline;
}

.token-table__name {
  white-space: nowrap;
}

.token-table__brand {
  display: inline-block;
  width: 14px;
  color: var(--machine-ink);
}

.token-table__value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.token-table__use {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-2);
}

/* Theme demos: identical markup, only the tokens differ */
.theme-demos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin-top: 24px;
}

.theme-demo {
  --action-border: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--canvas);
  color: var(--ink);
}

/* Paper = default tokens. Terminal = data-theme="term" in the HTML. */
.theme-demo--terminal {
  --action-border: var(--action);
}

/* White-label: Nordhafen overrides eight semantic tokens */
.theme-demo--nordhafen {
  --canvas: #EEF2F4;
  --surface: #FFFFFF;
  --ink: #0E1B2A;
  --ink-2: #34465A;
  --hairline: #CFD8E0;
  --action: #0E5E6F;
  --on-action: #FFFFFF;
  --action-border: #0E5E6F;
  --machine-tint: #E1ECEE;
  --machine-ink: #3B6470;
}

.theme-demo__head {
  display: flex;
  justify-content: space-between;
  font: 500 12px/1 var(--font-mono);
  color: var(--ink-2);
}

.theme-demo__field {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
  font: 400 15px/1 var(--font-sans);
  color: var(--ink-2);
}

.theme-demo__answer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-control);
  background: var(--machine-tint);
}

.theme-demo__answer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.theme-demo__model {
  font: 500 11px/1 var(--font-mono);
  color: var(--machine-ink);
}

.theme-demo__chip {
  padding: 5px 8px;
  border-radius: var(--radius-pill);
  background: var(--success-tint);
  color: var(--success);
  font: 600 11px/1 var(--font-sans);
}

.theme-demo__text {
  font: 400 15px/1.5 var(--font-sans);
}

.theme-demo__actions {
  display: flex;
  gap: 8px;
}

.theme-demo__btn {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: 500 15px/1 var(--font-sans);
}

.theme-demo__btn--primary {
  border-color: var(--action-border);
  background: var(--action);
  color: var(--on-action);
  font-weight: 600;
}

/* Inline citation marker inside running text (static specimen) */
.inline-cite {
  padding: 1px 4px;
  border: 1px solid var(--machine-ink);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font: 500 11px/1 var(--font-mono);
}

.inline-cite--raised {
  vertical-align: 2px;
}

/* Contrast cards (colours via --fg / --bg) */
.contrast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.contrast-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.contrast-card__sample {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 16px;
  background: var(--bg);
  color: var(--fg);
}

.contrast-card__aa {
  font: 500 18px/1 var(--font-sans);
}

.contrast-card__ratio {
  font: 500 20px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.contrast-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font: 400 12px/1.3 var(--font-mono);
}

.contrast-card__label {
  color: var(--ink-2);
}

.contrast-card__level {
  flex: none;
  padding: 3px 6px;
  border-radius: var(--radius-xs);
  font-weight: 500;
}

.contrast-card__level--pass  { background: var(--success-tint); color: var(--success); }
.contrast-card__level--large { background: var(--warning-tint); color: var(--warning); }
.contrast-card__level--fail  { background: var(--error-tint);   color: var(--error); }

/* Status & verification pills */
.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font: 600 14px/1 var(--font-sans);
}

.status-pill--grounded    { background: var(--success-tint); color: var(--success); }
.status-pill--review      { background: var(--warning-tint); color: var(--warning); }
.status-pill--verified    { background: var(--success); color: var(--white); }
.status-pill--unsupported { background: var(--error-tint); color: var(--error); }

.status-pill--system {
  box-sizing: content-box;
  gap: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-weight: 500;
}

/* Data-viz scales */
.viz-scales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  margin-top: 24px;
}

.viz-scale {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.viz-scale__name {
  font: 500 12px/1 var(--font-mono);
  color: var(--ink-2);
}

.viz-scale__bar {
  box-sizing: content-box;
  display: flex;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

.viz-scale__cell {
  flex: 1;
  background: var(--swatch);
}

.viz-scale__hexes {
  font: 400 11px/1.5 var(--font-mono);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   K03 Typography & voice
   -------------------------------------------------------------------------- */
.typefaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin-top: 48px;
}

.typeface {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-card);
}

.typeface__role {
  font: 500 12px/1 var(--font-mono);
  color: var(--machine-ink);
}

.typeface__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.typeface__name {
  font: 600 17px/1.3 var(--font-sans);
}

.typeface__use {
  font: 400 15px/1.5 var(--font-sans);
  color: var(--ink-2);
}

.typeface--serif {
  border: 1px solid var(--hairline);
  background: var(--surface);
}

.typeface--serif .typeface__glyph {
  font: 400 72px/1 var(--font-serif);
  letter-spacing: -.02em;
}

.typeface--serif .typeface__sample {
  font: italic 400 20px/1.4 var(--font-serif);
}

.typeface--sans {
  background: var(--mist-100);
}

.typeface--sans .typeface__glyph {
  font: 500 72px/1 var(--font-sans);
  letter-spacing: -.02em;
}

.typeface--sans .typeface__sample {
  font: 400 17px/1.55 var(--font-sans);
}

.typeface--mono {
  background: var(--term-950);
  color: var(--term-100);
}

.typeface--mono .typeface__role { color: var(--mist-400); }
.typeface--mono .typeface__use { color: var(--term-300); }

.typeface--mono .typeface__glyph {
  font: 400 72px/1 var(--font-mono);
  letter-spacing: -.04em;
}

.typeface--mono .typeface__sample {
  font: 400 15px/1.5 var(--font-mono);
}

/* Fluid type scale – samples carry the real .t-* classes */
.type-scale {
  margin-top: 24px;
  border-top: 1px solid var(--hairline-strong);
}

.type-scale__row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}

.type-scale__spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 400 12px/1.4 var(--font-mono);
}

.type-scale__token { font-weight: 500; }
.type-scale__value { color: var(--ink-3); }

.type-scale__sample {
  overflow: hidden;
  padding-block: .18em;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type-scale__sample--label {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .08em;
}

/* Long-form answer + notation */
.type-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  margin-top: 72px;
}

.type-pair__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.type-pair__title {
  font: 400 30px/1.2 var(--font-serif);
}

.type-pair__note {
  font: 400 15px/1.5 var(--font-sans);
  color: var(--ink-2);
}

.longform {
  padding: 28px;
  border-radius: var(--radius-card);
  background: var(--machine-tint);
}

.longform__text {
  max-width: 68ch;
  font: 400 18px/1.7 var(--font-sans);
  text-wrap: pretty;
}

.longform__meta {
  margin-top: 16px;
  font: 400 12px/1.4 var(--font-mono);
  color: var(--ink-2);
}

.notation {
  border-top: 1px solid var(--hairline-strong);
}

.notation__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.notation__key {
  font: 400 14px/1.3 var(--font-sans);
  color: var(--ink-2);
}

.notation__value {
  font: 500 14px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Voice: don't / do */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin-top: 24px;
}

.voice-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.voice-card__context {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  font: 500 12px/1 var(--font-mono);
  color: var(--machine-ink);
}

.voice-card__case {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
}

.voice-card__case--dont {
  border-bottom: 1px solid var(--hairline);
}

.voice-card__verdict {
  font: 600 12px/1 var(--font-sans);
}

.voice-card__text {
  font: 400 16px/1.5 var(--font-sans);
}

.voice-card__case--dont .voice-card__text {
  color: var(--ink-2);
  text-decoration-color: #B42323;
}

/* --------------------------------------------------------------------------
   K04 Layout & app shells
   -------------------------------------------------------------------------- */
.layout-grid-title {
  --kit-subhead-gap: 64px;
}

/* Grid specimens */
.grid-demos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
  margin-top: 24px;
}

.grid-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grid-demo__frame {
  box-sizing: content-box;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
  height: 140px;
  padding: 0 var(--margin);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.grid-demo__frame > span {
  border-right: 1px solid var(--mist-300);
  border-left: 1px solid var(--mist-300);
  background: var(--mist-100);
}

.grid-demo--desktop { --cols: 12; --margin: 3.3%; --col-gap: 1.7%; flex: 3 1 0; min-width: min(100%, 420px); }
.grid-demo--tablet  { --cols: 8;  --margin: 3.1%; --col-gap: 2%;   flex: 2 1 0; min-width: min(100%, 280px); }
.grid-demo--mobile  { --cols: 4;  --margin: 5.1%; --col-gap: 4.1%; flex: 0 0 150px; min-width: 150px; }

.grid-demo__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 400 12px/1.4 var(--font-mono);
}

.grid-demo__name { font-weight: 500; }
.grid-demo__spec { color: var(--ink-3); }

/* Spacing + geometry + density */
.layout-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 48px;
  margin-top: 64px;
}

.layout-pair__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.layout-pair__title {
  font: 400 30px/1.2 var(--font-serif);
}

.density-title {
  margin-top: 24px;
}

.spacing-scale {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spacing-scale__row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  font: 400 12px/1 var(--font-mono);
}

.spacing-scale__name {
  color: var(--ink-2);
}

/* Bar width = value × 2 px */
.spacing-scale__bar {
  display: block;
  width: calc(var(--space) * 2px);
  max-width: 100%;
  height: 12px;
  border-radius: 2px;
  background: var(--ink);
}

.geometry {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.geometry--radii { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.geometry--elevation { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }

.geometry__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.geometry__shape {
  box-sizing: content-box;
  height: 72px;
  background: var(--surface);
}

.geometry__caption {
  font: 400 12px/1.3 var(--font-mono);
}

.geometry--radii .geometry__shape { border: 1px solid var(--hairline-strong); }
.geometry__shape--r6   { border-radius: var(--radius-sm); }
.geometry__shape--r10  { border-radius: var(--radius-control); }
.geometry__shape--r16  { border-radius: var(--radius-card); }
.geometry__shape--pill { border-radius: var(--radius-pill); }

.geometry--elevation .geometry__shape { border-radius: var(--radius-control); }
.geometry__shape--elev-1 { border: 1px solid var(--hairline); }
.geometry__shape--elev-2 {
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 12px 32px -12px rgba(18, 18, 18, .25);
}

.density {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.density-demo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.density-demo__head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  font: 500 11px/1 var(--font-mono);
  color: var(--machine-ink);
}

.density-demo__row {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 14px;
  font: 400 16px/1 var(--font-sans);
}

.density-demo__row + .density-demo__row {
  border-top: 1px solid var(--surface-sunken);
}

.density-demo__price {
  font: 400 13px/1 var(--font-mono);
}

.density-demo__foot {
  padding: 8px 14px;
  background: var(--surface-2);
  font: 400 11px/1.4 var(--font-mono);
  color: var(--ink-3);
}

.density-demo--compact .density-demo__head { padding: 8px 12px; }
.density-demo--compact .density-demo__row { height: 32px; padding: 0 12px; font-size: 14px; }
.density-demo--compact .density-demo__price { font-size: 12px; }
.density-demo--compact .density-demo__foot { padding: 8px 12px; }

/* App shell wireframes */
.shells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
  margin-top: 24px;
}

.shell-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shell-demo__frame {
  box-sizing: content-box;
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  height: 240px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  font: 400 10px/1.2 var(--font-mono);
  color: var(--ink-2);
}

.shell-demo__frame--assistant { grid-template-columns: 22% minmax(0, 1fr) 30%; }
.shell-demo__frame--docs      { grid-template-columns: 22% minmax(0, 1fr) 20%; }

.shell-demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  padding: 0 8px;
  border-bottom: 1px solid var(--hairline);
}

.shell-demo__pane {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}

.shell-demo__pane--threads { border-right: 1px solid var(--hairline); background: var(--surface-2); }
.shell-demo__pane--nav     { border-right: 1px solid var(--hairline); }
.shell-demo__pane--aside   { border-left: 1px solid var(--hairline); }

.shell-demo__line {
  height: 6px;
  border-radius: 2px;
  background: var(--surface-sunken);
}

.shell-demo__line--current { width: 70%; background: var(--ink); }
.shell-demo__line--short   { width: 80%; }
.shell-demo__line--thin    { height: 4px; }

.shell-demo__turn {
  height: 24px;
  border-radius: var(--radius-xs);
  background: var(--mist-100);
}

.shell-demo__turn--long { height: 40px; }

.shell-demo__composer {
  box-sizing: content-box;
  height: 18px;
  margin-top: auto;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
}

.shell-demo__card {
  box-sizing: content-box;
  height: 30px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
}

.shell-demo__code {
  height: 52px;
  border-radius: var(--radius-xs);
  background: var(--term-950);
}

/* Console wireframe (terminal colours) */
.shell-demo__frame--console {
  grid-template-columns: 18% repeat(3, minmax(0, 1fr));
  grid-template-rows: 28px 52px minmax(0, 1fr);
  border-color: var(--term-700);
  background: var(--term-950);
  color: var(--term-300);
}

.shell-demo__frame--console .shell-demo__bar {
  border-bottom-color: var(--term-700);
}

.shell-demo__pane--console-nav {
  grid-row: 2 / 4;
  border-right: 1px solid var(--term-700);
  background: var(--term-900);
}

.shell-demo__tile {
  margin: 8px 4px 0;
  padding: 6px;
  border: 1px solid var(--term-700);
  border-radius: var(--radius-xs);
  background: var(--term-900);
}

.shell-demo__tile--first { margin: 8px 4px 0 8px; }
.shell-demo__tile--last  { margin: 8px 8px 0 4px; }
.shell-demo__tile--wide  { grid-column: 2 / 5; margin: 8px; }

.shell-demo__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shell-demo__name {
  font: 600 15px/1.3 var(--font-sans);
}

.shell-demo__spec {
  font: 400 12px/1.4 var(--font-mono);
  color: var(--ink-3);
}