/* Segue web — component & layout layer.
   Every value here is a token via var(--…). No literal colors, sizes, or radii.
   The token layer is tokens/build/tokens.css (generated). See web/tools/check-tokens.mjs. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
  letter-spacing: var(--font-body-tracking);
  color: var(--color-text-primary);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---- type utilities (mirror the Swift SegueTextStyle enum) ---- */
.t-large-title { font-size: var(--font-large-title-size); line-height: var(--font-large-title-line); font-weight: var(--font-large-title-weight); letter-spacing: var(--font-large-title-tracking); }
.t-title1 { font-size: var(--font-title1-size); line-height: var(--font-title1-line); font-weight: var(--font-title1-weight); letter-spacing: var(--font-title1-tracking); }
.t-title2 { font-size: var(--font-title2-size); line-height: var(--font-title2-line); font-weight: var(--font-title2-weight); letter-spacing: var(--font-title2-tracking); }
.t-title3 { font-size: var(--font-title3-size); line-height: var(--font-title3-line); font-weight: var(--font-title3-weight); letter-spacing: var(--font-title3-tracking); }
.t-headline { font-size: var(--font-headline-size); line-height: var(--font-headline-line); font-weight: var(--font-headline-weight); letter-spacing: var(--font-headline-tracking); }
.t-body { font-size: var(--font-body-size); line-height: var(--font-body-line); font-weight: var(--font-body-weight); letter-spacing: var(--font-body-tracking); }
.t-callout { font-size: var(--font-callout-size); line-height: var(--font-callout-line); letter-spacing: var(--font-callout-tracking); }
.t-subhead { font-size: var(--font-subhead-size); line-height: var(--font-subhead-line); letter-spacing: var(--font-subhead-tracking); }
.t-footnote { font-size: var(--font-footnote-size); line-height: var(--font-footnote-line); }
.t-caption { font-size: var(--font-caption-size); line-height: var(--font-caption-line); font-weight: var(--font-caption-weight); text-transform: uppercase; letter-spacing: 0.04em; }
.t-code { font-family: var(--font-mono); font-size: var(--font-code-size); line-height: var(--font-code-line); }

.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-accent { color: var(--color-accent); }

/* ---- app shell ---- */
.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--color-surface);
  border-right: var(--border-hairline) solid var(--color-separator);
  padding: var(--space-3) var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-1);
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-1) var(--space-2); }
.brand-mark {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--color-accent); display: grid; place-items: center;
  color: var(--color-text-on-accent); font-weight: 700; font-size: 15px;
}
.nav-section-label { padding: var(--space-2) var(--space-1) var(--space-0_5); color: var(--color-text-tertiary); }
.nav-item {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-1); border-radius: var(--radius-md);
  color: var(--color-text-secondary); cursor: pointer;
  transition: background var(--duration-fast) var(--easing-standard);
}
.nav-item:hover { background: var(--color-fill); }
.nav-item[aria-current="page"] { background: var(--color-fill); color: var(--color-text-primary); font-weight: 600; }
.nav-item .dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--color-accent); }

.main { min-width: 0; }
.topbar {
  height: 56px; border-bottom: var(--border-hairline) solid var(--color-separator);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-3); position: sticky; top: 0; z-index: 10;
}
.content { padding: var(--space-4) var(--space-4) var(--space-8); max-width: 1120px; margin: 0 auto; }

/* ---- primitives ---- */
.card {
  background: var(--color-surface);
  border: var(--border-hairline) solid var(--color-separator);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-sm);
}
.card-pad { padding: var(--space-3); }

.btn {
  appearance: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-0_5);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-md);
  font-size: var(--font-callout-size); font-weight: 600;
  transition: background var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
}
.btn:active { transform: translateY(0.5px); }
.btn-primary { background: var(--color-accent); color: var(--color-text-on-accent); }
.btn-primary:hover { background: var(--color-accent-pressed); }
.btn-secondary { background: var(--color-fill); color: var(--color-text-primary); }
.btn-secondary:hover { background: var(--color-fill-pressed); }
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { background: var(--color-fill); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-0_5);
  padding: 2px var(--space-1); border-radius: var(--radius-pill);
  font-size: var(--font-caption-size); font-weight: 600;
  background: var(--color-fill); color: var(--color-text-secondary);
  letter-spacing: 0; text-transform: none;
}
.badge-accent { background: var(--color-accent-muted); color: var(--color-accent); }
.badge-outline { background: transparent; border: var(--border-hairline) solid var(--color-separator-strong); }
.badge-success { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }

.stack-badge {
  font-family: var(--font-mono); font-size: var(--font-footnote-size);
  color: var(--color-text-tertiary);
  border: var(--border-hairline) solid var(--color-separator);
  border-radius: var(--radius-sm); padding: 1px var(--space-0_5);
}

.progress { height: 4px; border-radius: var(--radius-pill); background: var(--color-fill); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-pill); }

.segmented { display: inline-flex; gap: 2px; padding: 2px; background: var(--color-fill); border-radius: var(--radius-md); }
.segmented button {
  border: none; background: transparent; cursor: pointer;
  padding: var(--space-0_5) var(--space-1_5); border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--font-subhead-size); font-weight: 500; color: var(--color-text-secondary);
}
.segmented button[aria-selected="true"] {
  background: var(--color-surface); color: var(--color-text-primary);
  box-shadow: var(--elevation-sm); font-weight: 600;
}

.code {
  background: var(--color-code-surface); color: var(--color-text-on-code);
  border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: var(--font-code-size); line-height: var(--font-code-line);
  padding: var(--space-2); overflow: auto;
}
.code .kw { color: var(--color-accent); }
.code .ty { color: #9DC7E8; }
.code .st { color: #A8CE9A; }
.code .cm { color: var(--color-text-tertiary); }
.code .num { color: #E0B080; }

hr.sep { border: none; border-top: var(--border-hairline) solid var(--color-separator); margin: var(--space-2) 0; }

.row { display: flex; align-items: center; gap: var(--space-1); }
.between { display: flex; align-items: center; justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.muted-icon { color: var(--color-text-tertiary); }

/* SF-style monochrome glyphs — inline SVG, currentColor stroke. Never emoji. */
.glyph { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.glyph-sm { width: 15px; height: 15px; }