/* targa-design components. Classes and modifiers only; every value is a token from the
   generated stylesheet (site.css / app.css), so the same file serves both dialects.
   Registry and status: components.json. Rules: DESIGN.md.
   Loaded after tokens.css and before the app's own stylesheet. */

/* The hidden attribute wins over every display the library sets. */
[hidden].btn, [hidden].card, [hidden].field, [hidden].badge, [hidden].pill, [hidden].notice, [hidden].toast, [hidden].toast-region, [hidden].tabs, [hidden].seg, [hidden].empty, [hidden].skeleton, [hidden].icon, [hidden].table-wrap { display: none; }

/* ---------------------------------------------------------------- icons */
.icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 1.25em; height: 1.25em; }
[dir="rtl"] .icon-mirror { transform: scaleX(-1); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-height-md); padding: 0 var(--space-5);
  font: inherit; font-size: var(--text-md); font-weight: 550; line-height: 1.2; white-space: nowrap;
  color: var(--fg); background: color-mix(in srgb, var(--fg) 10%, transparent);
  border: 1px solid transparent; border-radius: var(--btn-radius); cursor: pointer;
  text-decoration: none; -webkit-appearance: none; appearance: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
.btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--fg) 15%, transparent); }
.btn:active { transform: translateY(0); transition-duration: var(--dur-fast); }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: var(--btn-shadow); }
.btn-primary:hover { background: var(--btn-primary-hover-bg); color: var(--btn-primary-fg); }
.btn-secondary, .btn-ghost { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-line); }
.btn-secondary:hover, .btn-ghost:hover { background: color-mix(in srgb, var(--fg) 8%, var(--btn-secondary-bg)); }
.btn-danger, .btn.danger-btn { background: transparent; color: var(--btn-danger-fg); border-color: var(--btn-danger-line); box-shadow: none; }
.btn-danger:hover, .btn.danger-btn:hover { background: var(--btn-danger-hover-bg); color: var(--btn-danger-fg); }
.btn-link { background: transparent; color: var(--btn-link-fg); padding-inline: var(--space-1); min-height: var(--target-min); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.btn-link:hover { background: transparent; transform: none; text-decoration-color: currentColor; }
.btn-sm { min-height: var(--btn-height-sm); padding-inline: var(--space-4); font-size: var(--text-sm); }
.btn-block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em;
  border: 2px solid color-mix(in srgb, var(--on-accent) 35%, transparent); border-top-color: var(--on-accent); border-radius: 50%;
  animation: btn-spin var(--dur-slow) linear infinite;
}
.btn:not(.btn-primary).is-loading::after { border-color: color-mix(in srgb, var(--fg) 25%, transparent); border-top-color: var(--fg); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn .icon { font-size: 1.1em; }

/* ---------------------------------------------------------------- cards */
.card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--card-radius);
  padding: var(--card-pad); box-shadow: var(--card-halo);
}
.card-eyebrow {
  margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text);
}
html[data-script="rtl"] .card-eyebrow, html[data-script="cjk"] .card-eyebrow, html[data-script="indic"] .card-eyebrow, html[data-script="complex"] .card-eyebrow { letter-spacing: 0; }
.card-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
.card-detail { margin: 0; color: var(--muted); font-size: var(--text-md); line-height: 1.55; }
.card-detail + .card-detail { margin-top: var(--space-2); }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: auto; padding-top: var(--space-5); }
.card-tint { background: color-mix(in srgb, var(--accent-soft) 70%, var(--card-bg)); border-color: var(--accent-line); }
.card-flat { box-shadow: none; }
.card-stat .stat-value { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; margin: var(--space-2) 0; }
.card-stat .stat-value.is-good { color: var(--ok-text); }
.card-stat .stat-value.is-warn { color: var(--warn-text); }
.card-stat .stat-value.is-alert { color: var(--alert-text); }
.card-stat .stat-note { margin: 0; color: var(--faint); font-size: var(--text-sm); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--w-card-min), 1fr)); gap: var(--space-4); }

/* ---------------------------------------------------------------- fields */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field-label { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.field-label .optional { font-weight: 400; color: var(--faint); margin-inline-start: var(--space-1); }
.field-input, .field select, .field textarea, .field input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%; min-height: var(--btn-height-md); padding: var(--space-2) var(--space-3);
  font: inherit; font-size: var(--text-base); line-height: 1.4; color: var(--field-fg);
  background: var(--field-bg); border: 1px solid var(--field-line); border-radius: var(--field-radius);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.field textarea { min-height: calc(var(--btn-height-md) * 2.4); resize: vertical; }
.field-select { position: relative; }
.field-select select { padding-inline-end: var(--space-7); }
/* the chevron is a mask so its colour is a token, not a value baked into an image */
.field-select::after { content: ""; position: absolute; inset-inline-end: var(--space-3); top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.field :is(input, select, textarea):focus-visible { border-color: var(--field-focus); outline: 2px solid var(--field-focus); outline-offset: 0; }
.field :is(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; background: var(--surface-2); }
.field-hint { margin: 0; font-size: var(--text-sm); color: var(--faint); line-height: 1.5; }
.field-error { margin: 0; font-size: var(--text-sm); color: var(--alert-text); line-height: 1.5; display: flex; gap: var(--space-1); align-items: flex-start; }
.field.is-invalid :is(input, select, textarea) { border-color: var(--alert-text); }
.field-row { display: flex; gap: var(--space-2); align-items: center; }
.field-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); color: var(--fg); cursor: pointer; min-height: var(--target-min); }
.field-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.field-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- badges and pills */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; white-space: nowrap;
  color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--badge-radius);
}
html[data-script="rtl"] .badge, html[data-script="cjk"] .badge, html[data-script="indic"] .badge, html[data-script="complex"] .badge { letter-spacing: 0; }
.badge-accent { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.badge-soft { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-line); }
.badge-warn { color: var(--warn-text); background: var(--warn-soft); border-color: var(--warn-line); }
.badge-alert { color: var(--alert-text); background: var(--alert-soft); border-color: var(--alert-line); }
.badge-muted { color: var(--faint); background: var(--surface-2); border-color: transparent; }
/* Status is always three things together: a colour, a dot and a word. */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.5; white-space: nowrap;
  color: var(--fg); background: var(--surface-2); border-radius: var(--radius-pill);
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.pill-ok { color: var(--ok-text); background: var(--accent-soft); } .pill-ok::before { background: var(--ok); }
.pill-warn { color: var(--warn-text); background: var(--warn-soft); } .pill-warn::before { background: var(--warn); }
.pill-alert { color: var(--alert-text); background: var(--alert-soft); } .pill-alert::before { background: var(--alert); }
.pill-live::before { animation: pill-pulse 2s infinite; }
@keyframes pill-pulse { 50% { opacity: .4; } }

/* ---------------------------------------------------------------- notices */
.notice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); font-size: var(--text-md); line-height: 1.5;
  color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.notice > .icon { font-size: 1.2em; margin-top: .1em; }
.notice p { margin: 0; }
.notice p + p { margin-top: var(--space-1); }
.notice-title { display: block; font-weight: 600; margin-bottom: 2px; }
.notice-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.notice-info { background: var(--accent-soft); border-color: var(--accent-line); } .notice-info > .icon { color: var(--accent-text); }
.notice-ok { background: var(--accent-soft); border-color: var(--accent-line); } .notice-ok > .icon { color: var(--ok-text); }
.notice-warn { background: var(--warn-soft); border-color: var(--warn-line); } .notice-warn > .icon { color: var(--warn-text); }
.notice-alert { background: var(--alert-soft); border-color: var(--alert-line); } .notice-alert > .icon { color: var(--alert-text); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { text-align: start; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-2); vertical-align: top; }
.table th { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .06em; color: var(--muted); white-space: nowrap; background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; }
.table caption { text-align: start; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--muted); caption-side: bottom; }

/* ---------------------------------------------------------------- dialog */
dialog.dialog {
  width: min(var(--w-dialog), calc(100vw - var(--space-7))); max-height: calc(100vh - var(--space-8)); padding: 0; margin: auto;
  color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
}
dialog.dialog::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); -webkit-backdrop-filter: blur(calc(var(--glass-blur) / 4)); backdrop-filter: blur(calc(var(--glass-blur) / 4)); }
.dialog-body { padding: var(--space-6); }
.dialog-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; }
.dialog-text { margin: 0; color: var(--muted); font-size: var(--text-md); line-height: 1.55; }
.dialog-actions { display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line-2); }

/* ---------------------------------------------------------------- toasts */
.toast-region { position: fixed; inset-inline-end: var(--space-5); bottom: var(--space-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); width: min(var(--w-toast), calc(100vw - var(--space-7))); pointer-events: none; }
.toast {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  font-size: var(--text-md); line-height: 1.5; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--card-shadow); pointer-events: auto;
  animation: toast-in var(--dur-slow) var(--ease-out);
}
.toast > .icon { font-size: 1.2em; margin-top: .1em; color: var(--muted); }
.toast-ok > .icon { color: var(--ok-text); } .toast-warn > .icon { color: var(--warn-text); } .toast-alert > .icon { color: var(--alert-text); }
.toast .btn { margin-inline-start: auto; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- tabs and segmented control */
.tabs { display: flex; gap: 2px; margin: 0 0 var(--space-5); border-bottom: 1px solid var(--line); flex-wrap: wrap; list-style: none; padding: 0; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); min-height: var(--target-min); font: inherit; font-size: var(--text-md); color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; text-decoration: none; }
.tabs a:hover, .tabs button:hover { color: var(--fg); }
.tabs [aria-current], .tabs [aria-selected="true"], .tabs .on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; }
.seg > * { padding: var(--space-2) var(--space-4); min-height: var(--target-min); font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--muted); background: none; border: 0; border-inline-end: 1px solid var(--line); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.seg > :last-child { border-inline-end: 0; }
.seg [aria-pressed="true"], .seg [aria-current], .seg .on { background: var(--accent-soft); color: var(--accent-text); }
.seg [disabled], .seg .soon { color: var(--faint); font-weight: 500; cursor: not-allowed; }

/* ---------------------------------------------------------------- chart primitives */
/* Bar: set --value (0 to 1) on .bar; add .is-warn / .is-alert for quota states. */
.bar { position: relative; height: 8px; background: var(--line-2); border-radius: var(--radius-pill); overflow: hidden; }
.bar::after { content: ""; position: absolute; inset: 0; inline-size: calc(var(--value, 0) * 100%); background: var(--accent); border-radius: inherit; transition: inline-size var(--dur-slow) var(--ease-out); }
.bar.is-warn::after { background: var(--warn); }
.bar.is-alert::after { background: var(--alert); }
/* Sparkline: an inline SVG polyline in currentColor. */
.spark { display: block; width: 100%; height: 32px; color: var(--accent-text); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
/* Dial: a score ring; set --value (0 to 1) on .dial, put the number inside. */
.dial { --size: 96px; position: relative; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; background: conic-gradient(var(--accent) calc(var(--value, 0) * 360deg), var(--line-2) 0); }
.dial::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.dial > * { position: relative; }
.dial.is-warn { background: conic-gradient(var(--warn) calc(var(--value, 0) * 360deg), var(--line-2) 0); }
.dial.is-alert { background: conic-gradient(var(--alert) calc(var(--value, 0) * 360deg), var(--line-2) 0); }

/* ---------------------------------------------------------------- empty state */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-6); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.empty > .icon { font-size: 1.6em; color: var(--faint); }
.empty-title { margin: 0; font-weight: 600; color: var(--fg); font-size: var(--text-base); }
.empty p { margin: 0; font-size: var(--text-md); line-height: 1.5; }
.empty .btn { margin-top: var(--space-2); }

/* ---------------------------------------------------------------- skeleton (loading) */
.skeleton { display: block; height: 1em; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--line-2), var(--surface-2), var(--line-2)); background-size: 200% 100%; animation: skeleton 1.4s linear infinite; }
@keyframes skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- utilities */
/* Small, token-backed classes for the spacing and text adjustments pages used to make with
   inline styles. Spacing steps are the --space scale (0 and 1 to 12); text steps are the dialect's
   --text scale. Layout-only inline styles (width, min-width, flex, grid, overflow-wrap) stay inline. */
.m-0 { margin: 0; }
.mx-auto { margin-inline: auto; }
.mt-auto { margin-top: auto; }
.mt-n1 { margin-top: calc(-1 * var(--space-1)); }
.mt-n2 { margin-top: calc(-1 * var(--space-2)); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }
.mt-10 { margin-top: var(--space-10); }
.mt-11 { margin-top: var(--space-11); }
.mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-9 { margin-bottom: var(--space-9); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-11 { margin-bottom: var(--space-11); }
.mb-12 { margin-bottom: var(--space-12); }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-7 { padding-top: var(--space-7); }
.pt-8 { padding-top: var(--space-8); }
.pt-9 { padding-top: var(--space-9); }
.pt-10 { padding-top: var(--space-10); }
.pt-11 { padding-top: var(--space-11); }
.pt-12 { padding-top: var(--space-12); }
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-7 { padding-bottom: var(--space-7); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-9 { padding-bottom: var(--space-9); }
.pb-10 { padding-bottom: var(--space-10); }
.pb-11 { padding-bottom: var(--space-11); }
.pb-12 { padding-bottom: var(--space-12); }
.ps-0 { padding-inline-start: 0; }
.ps-1 { padding-inline-start: var(--space-1); }
.ps-2 { padding-inline-start: var(--space-2); }
.ps-3 { padding-inline-start: var(--space-3); }
.ps-4 { padding-inline-start: var(--space-4); }
.ps-5 { padding-inline-start: var(--space-5); }
.ps-6 { padding-inline-start: var(--space-6); }
.ps-7 { padding-inline-start: var(--space-7); }
.ps-8 { padding-inline-start: var(--space-8); }
.ps-9 { padding-inline-start: var(--space-9); }
.ps-10 { padding-inline-start: var(--space-10); }
.ps-11 { padding-inline-start: var(--space-11); }
.ps-12 { padding-inline-start: var(--space-12); }
.pe-0 { padding-inline-end: 0; }
.pe-1 { padding-inline-end: var(--space-1); }
.pe-2 { padding-inline-end: var(--space-2); }
.pe-3 { padding-inline-end: var(--space-3); }
.pe-4 { padding-inline-end: var(--space-4); }
.pe-5 { padding-inline-end: var(--space-5); }
.pe-6 { padding-inline-end: var(--space-6); }
.pe-7 { padding-inline-end: var(--space-7); }
.pe-8 { padding-inline-end: var(--space-8); }
.pe-9 { padding-inline-end: var(--space-9); }
.pe-10 { padding-inline-end: var(--space-10); }
.pe-11 { padding-inline-end: var(--space-11); }
.pe-12 { padding-inline-end: var(--space-12); }
.p-0 { padding: 0; }
.px-0 { padding-inline: 0; }
.py-0 { padding-block: 0; }
.gap-0 { gap: 0; }
.p-1 { padding: var(--space-1); }
.px-1 { padding-inline: var(--space-1); }
.py-1 { padding-block: var(--space-1); }
.gap-1 { gap: var(--space-1); }
.p-2 { padding: var(--space-2); }
.px-2 { padding-inline: var(--space-2); }
.py-2 { padding-block: var(--space-2); }
.gap-2 { gap: var(--space-2); }
.p-3 { padding: var(--space-3); }
.px-3 { padding-inline: var(--space-3); }
.py-3 { padding-block: var(--space-3); }
.gap-3 { gap: var(--space-3); }
.p-4 { padding: var(--space-4); }
.px-4 { padding-inline: var(--space-4); }
.py-4 { padding-block: var(--space-4); }
.gap-4 { gap: var(--space-4); }
.p-5 { padding: var(--space-5); }
.px-5 { padding-inline: var(--space-5); }
.py-5 { padding-block: var(--space-5); }
.gap-5 { gap: var(--space-5); }
.p-6 { padding: var(--space-6); }
.px-6 { padding-inline: var(--space-6); }
.py-6 { padding-block: var(--space-6); }
.gap-6 { gap: var(--space-6); }
.ms-1 { margin-inline-start: var(--space-1); }
.me-1 { margin-inline-end: var(--space-1); }
.ms-2 { margin-inline-start: var(--space-2); }
.me-2 { margin-inline-end: var(--space-2); }
.ms-3 { margin-inline-start: var(--space-3); }
.me-3 { margin-inline-end: var(--space-3); }
.ms-4 { margin-inline-start: var(--space-4); }
.me-4 { margin-inline-end: var(--space-4); }
.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }
.text-2xs { font-size: var(--text-2xs, var(--text-xs)); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl, var(--text-2xl)); }
.text-4xl { font-size: var(--text-4xl, var(--text-display)); }
.text-display { font-size: var(--text-display); }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.lh-tight { line-height: 1.3; }
.lh-base { line-height: 1.55; }
.lh-loose { line-height: 1.7; }
.measure { max-width: 64ch; }
.stack-1 { display: flex; flex-direction: column; gap: var(--space-1); }
.row-1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.row-2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.row-3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.row-4 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.inline { display: inline; }
.block { display: block; }
.inline-block { display: inline-block; }
.wrap { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.ta-start { text-align: start; }
.ta-end { text-align: end; }
.ta-center { text-align: center; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.text-fg { color: var(--fg); }
.text-muted { color: var(--muted); }
.text-faint { color: var(--faint); }
.text-ok { color: var(--ok-text); }
.text-warn { color: var(--warn-text); }
.text-alert { color: var(--alert-text); }
.text-accent { color: var(--accent-text); }
.bg-surface { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }
.bg-accent { background: var(--accent); }
.bg-accent-ink { background: var(--accent-ink); }
.bg-accent-soft { background: var(--accent-soft); }
.bg-transparent { background: transparent; }
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- modes */
@media (forced-colors: active) {
  .btn, .badge, .pill, .notice, .card, .toast, .seg, .table-wrap, dialog.dialog { border: 1px solid CanvasText; }
  .btn-primary, .badge-accent { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .pill::before, .bar::after { background: CanvasText; }
  .tabs [aria-current], .tabs [aria-selected="true"], .tabs .on { border-bottom-color: Highlight; }
  .dial { background: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .bar::after, .toast { transition: none; animation: none; transform: none; }
  .pill-live::before, .skeleton { animation: none; }
}