/* Design system v2 components (Knowledge project/business-manager/design). Tokens come from
   /assets/tokens.css (src/design-tokens.mjs); the font from /assets/fonts.css. Everything here
   applies inside body.ds, so pages move over one step at a time. Documented on /admin/styleguide. */

/* ---------- base ---------- */
.ds { color-scheme: light; font-family: var(--font-sans); font-size: var(--fs-16); line-height: 1.55; color: var(--fg); background: var(--bg);
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
:root[data-theme="dark"] .ds { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ds { color-scheme: dark; } }
/* :where() keeps these base rules at class strength, so any component class below wins. */
.ds :where(h1, h2, h3, h4) { color: var(--fg); letter-spacing: -.02em; line-height: 1.2; font-weight: 650; }
.ds :where(h1) { font-size: var(--fs-30); margin: 0 0 var(--sp-2); }
.ds :where(h2) { font-size: var(--fs-20); margin: 0 0 var(--sp-3); }
.ds :where(h3) { font-size: var(--fs-16); margin: 0 0 var(--sp-2); letter-spacing: -.01em; }
.ds :where(a) { color: var(--link); text-underline-offset: 3px; }
.ds :focus { outline: none; }
.ds :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The hidden attribute always wins over a component's display (filtered options, empty states). */
.ds [hidden] { display: none !important; }
.ds .main { max-width: 1200px; padding: var(--sp-8) var(--sp-6) var(--sp-16); gap: var(--sp-6); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--fg-muted); }
.text-subtle { color: var(--fg-subtle); }
.text-12 { font-size: var(--fs-12); } .text-14 { font-size: var(--fs-14); } .text-16 { font-size: var(--fs-16); } .text-18 { font-size: var(--fs-18); }
.text-20 { font-size: var(--fs-20); } .text-24 { font-size: var(--fs-24); } .text-30 { font-size: var(--fs-30); } .text-36 { font-size: var(--fs-36); }
.text-48 { font-size: var(--fs-48); } .text-60 { font-size: var(--fs-60); }
.text-24, .text-30, .text-36, .text-48, .text-60 { letter-spacing: -.025em; line-height: 1.1; font-weight: 700; }
.kicker { font-size: var(--fs-12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-soft-fg); margin: 0; }

/* ---------- icons ---------- */
.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-16 { width: 16px; height: 16px; } .icon-20 { width: 20px; height: 20px; } .icon-24 { width: 24px; height: 24px; }

/* ---------- layout helpers ---------- */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.row-between { justify-content: space-between; }
.col { display: grid; gap: var(--sp-3); }
.auto-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.split { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }

/* ---------- buttons ---------- */
/* style.css paints every button:hover violet; inside .ds each kind of button names its own
   hover colour in --hover-bg instead (this rule outranks button:hover). */
.ds button:hover, .btn:hover { background: var(--hover-bg, transparent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4);
  font: 600 var(--fs-14)/1 var(--font-sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  border-radius: var(--r-input); border: 1px solid transparent; background: var(--surface); color: var(--fg); --hover-bg: var(--surface-2);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--primary); color: var(--primary-fg); --hover-bg: var(--primary-hover); box-shadow: 0 1px 2px rgba(46, 16, 101, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); --hover-bg: var(--surface-2); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.btn-secondary:hover { border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--fg-muted); --hover-bg: var(--primary-soft); }
.btn-ghost:hover { color: var(--primary-soft-fg); }
.btn-danger { background: var(--danger); color: var(--surface); --hover-bg: var(--danger-hover); }
.btn-icon { width: 40px; padding: 0; }
.btn-sm { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-12); }
.btn-sm.btn-icon { width: 32px; }
.btn-lg { min-height: 48px; padding: 0 var(--sp-6); font-size: var(--fs-16); border-radius: var(--r-card); }
.btn:hover, .btn:focus { text-decoration: none; }

/* ---------- form controls ---------- */
.field { display: grid; gap: var(--sp-1); font-weight: 400; font-size: var(--fs-14); min-width: 0; }
.field > .label { font-weight: 600; color: var(--fg); }
.field > .hint { color: var(--fg-subtle); font-size: var(--fs-12); }
.field > .field-error { margin: 0; color: var(--danger); font-size: var(--fs-12); }
.input, .select, .textarea { font: 400 var(--fs-14)/1.4 var(--font-sans); color: var(--fg); background: var(--surface); width: 100%;
  min-height: 40px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-input);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.input::placeholder, .textarea::placeholder { color: var(--fg-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--fg-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible, .combobox-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border: 1px solid var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.select { appearance: none; padding-right: var(--sp-10); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.textarea { min-height: 96px; resize: vertical; }
.input[type="date"] { font-variant-numeric: tabular-nums; }
.input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.input-group { position: relative; display: flex; align-items: center; }
.input-group > .icon { position: absolute; left: var(--sp-3); color: var(--fg-subtle); pointer-events: none; }
.input-group > .input { padding-left: var(--sp-10); }
.check, .radio { display: inline-flex; align-items: flex-start; gap: var(--sp-2); font-weight: 400; font-size: var(--fs-14); cursor: pointer; }
.check input, .radio input { appearance: none; flex: none; width: 18px; height: 18px; margin: 2px 0 0; border: 1.5px solid var(--border-strong); background: var(--surface);
  display: grid; place-content: center; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); cursor: pointer; }
.check input { border-radius: 4px; }
.radio input { border-radius: 50%; }
.check input::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--primary-fg); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--dur-fast) var(--ease); }
.radio input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-fg); transform: scale(0); transition: transform var(--dur-fast) var(--ease); }
.check input:checked, .radio input:checked { background: var(--primary); border-color: var(--primary); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.radio input:checked::after { transform: scale(1); }
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); font-weight: 400; font-size: var(--fs-14); cursor: pointer; }
.switch input { appearance: none; flex: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: var(--r-full); background: var(--border-strong); cursor: pointer;
  transition: background-color var(--dur) var(--ease); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform var(--dur) var(--ease); }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(16px); }
.dropzone { position: relative; display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-6); text-align: center; font-weight: 400;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-card); background: var(--surface-2); color: var(--fg-muted); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.dropzone .icon { color: var(--primary); width: 32px; height: 32px; }
.dropzone strong { color: var(--fg); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone:hover, .dropzone.is-over { border-color: var(--primary); background: var(--primary-soft); }
.dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone-files { list-style: none; margin: 0; padding: 0; font-size: var(--fs-12); color: var(--fg); }
.combobox { position: relative; }
.combobox-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: var(--sp-1); list-style: none; max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-2); }
.combobox-list [role="option"] { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-input); cursor: pointer; font-size: var(--fs-14); }
.combobox-list [role="option"] small { color: var(--fg-subtle); font-size: var(--fs-12); }
.combobox-list [role="option"][aria-selected="true"], .combobox-list [role="option"]:hover { background: var(--primary-soft); color: var(--primary-soft-fg); }
.combobox-list [role="option"][aria-selected="true"] small { color: var(--primary-soft-fg); }

/* ---------- surfaces ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: var(--sp-6); min-width: 0; position: relative; }
.panel-lg { border-radius: var(--r-panel); padding: var(--sp-8); }
.panel-flat { box-shadow: none; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.panel-head h2, .panel-head h3 { margin: 0; }
.panel-link { color: inherit; text-decoration: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.panel-link:hover { border-color: var(--primary); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.panel-promo { color: #FFFFFF; border: 0; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, #8B5CF6 0%, #6D28D9 35%, #1E1B4B 100%); }
.panel-promo h3, .panel-promo p { color: #FFFFFF; }
.panel-promo .btn-secondary { background: #FFFFFF; color: #1E1B4B; border-color: transparent; }
.stat { display: grid; gap: var(--sp-1); }
.stat-label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-14); font-weight: 500; color: var(--fg-muted); margin: 0; }
.stat-label .icon { color: var(--primary-soft-fg); background: var(--primary-soft); border-radius: var(--r-input); padding: 6px; width: 28px; height: 28px; }
.stat-value { font-size: var(--fs-30); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; margin: var(--sp-1) 0 0; }
.stat-trend { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-12); font-weight: 600; margin: 0; }
.stat-trend.up { color: var(--success); } .stat-trend.down { color: var(--danger); } .stat-trend .note { color: var(--fg-subtle); font-weight: 400; }

/* ---------- pills, badges and avatars ---------- */
.pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px 10px; border-radius: var(--r-full); font-size: var(--fs-12); font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--surface-3); color: var(--fg-muted); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-primary { background: var(--primary-soft); color: var(--primary-soft-fg); }
.pill-success { background: var(--success-bg); color: var(--success); }
.pill-warning { background: var(--warning-bg); color: var(--warning); }
.pill-danger { background: var(--danger-bg); color: var(--danger); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-accent { background: var(--accent); color: var(--accent-fg); }
.pill-outline { background: transparent; border: 1px solid var(--border); color: var(--fg-muted); }
.avatar { --avatar: #6D28D9; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: var(--fs-12); font-weight: 700;
  letter-spacing: .02em; color: #FFFFFF; background: var(--avatar); box-shadow: 0 0 0 2px var(--surface); }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; } .avatar-lg { width: 48px; height: 48px; font-size: var(--fs-16); }
/* Eight avatar colours, all with white initials at 4.5:1 or better; avatarHue() picks one from the name. */
.avatar-h0 { --avatar: #6D28D9; } .avatar-h1 { --avatar: #1D4ED8; } .avatar-h2 { --avatar: #047857; } .avatar-h3 { --avatar: #B45309; }
.avatar-h4 { --avatar: #BE185D; } .avatar-h5 { --avatar: #0E7490; } .avatar-h6 { --avatar: #4338CA; } .avatar-h7 { --avatar: #B91C1C; }
.avatar-stack { display: inline-flex; } .avatar-stack .avatar + .avatar { margin-left: -8px; }

/* ---------- tables ---------- */
.table-scroll { overflow: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-1); }
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); }
.dtable th, .dtable td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.dtable thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--fg-muted); font-size: var(--fs-12); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.dtable tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.dtable tbody tr:hover { background: var(--surface-3); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable .num { text-align: right; }
.dtable .cell-main { display: flex; align-items: center; gap: var(--sp-3); font-weight: 600; min-width: 12rem; }
.dtable .cell-main small { display: block; font-weight: 400; color: var(--fg-subtle); font-size: var(--fs-12); }
.dtable .cell-actions { width: 1%; white-space: nowrap; text-align: right; }

/* ---------- navigation: tabs, segmented control, breadcrumbs ---------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3); margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent;
  font: 500 var(--fs-14)/1 var(--font-sans); color: var(--fg-muted); cursor: pointer; white-space: nowrap; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--primary-soft-fg); border-bottom-color: var(--primary); font-weight: 600; }
.tab-panel { padding-top: var(--sp-4); }
.tab-count { font-size: var(--fs-12); padding: 0 6px; border-radius: var(--r-full); background: var(--surface-3); color: var(--fg-muted); }
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-card); background: var(--surface-3); border: 1px solid var(--border); }
.segmented label { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border-radius: 7px; font-size: var(--fs-14); font-weight: 500; color: var(--fg-muted); cursor: pointer; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label:has(input:checked) { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.segmented .btn { min-height: 30px; border-radius: 7px; }
.segmented .btn[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; font-size: var(--fs-14); color: var(--fg-subtle); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 var(--sp-2) 0 var(--sp-1); }
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--fg); font-weight: 600; }

/* ---------- overlays: modal, drawer, menu, tooltip, toast ---------- */
dialog.modal, dialog.drawer, dialog.palette { color: var(--fg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); padding: 0; max-width: calc(100vw - 32px); }
dialog.modal::backdrop, dialog.drawer::backdrop, dialog.palette::backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); }
dialog.modal { width: 520px; border-radius: var(--r-panel); }
dialog.modal[open] { animation: ds-pop var(--dur) var(--ease); }
dialog.drawer { width: 440px; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: var(--r-panel) 0 0 var(--r-panel); }
dialog.drawer[open] { display: flex; flex-direction: column; animation: ds-slide-left var(--dur) var(--ease); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-6) var(--sp-6) 0; }
.dialog-head h2 { margin: 0; font-size: var(--fs-18); }
.dialog-head p { margin: var(--sp-1) 0 0; color: var(--fg-muted); font-size: var(--fs-14); }
.dialog-body { padding: var(--sp-4) var(--sp-6); display: grid; gap: var(--sp-4); }
dialog.drawer .dialog-body { flex: 1; overflow-y: auto; align-content: start; }
.dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6) var(--sp-6); }
dialog.drawer .dialog-foot { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.menu-wrap { position: relative; display: inline-block; }
.menu { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); min-width: 200px; margin: 0; padding: var(--sp-1); list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-2); transform-origin: top right; animation: ds-pop var(--dur-fast) var(--ease); }
.menu[hidden] { display: none; }
.menu [role="menuitem"] { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-input); background: none;
  font: 500 var(--fs-14)/1.3 var(--font-sans); color: var(--fg); text-decoration: none; text-align: left; cursor: pointer; --hover-bg: var(--surface-3); }
.menu [role="menuitem"] .icon { color: var(--fg-subtle); }
.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus-visible { background: var(--surface-3); outline: none; }
.menu [role="menuitem"].danger, .menu [role="menuitem"].danger .icon { color: var(--danger); }
.menu [role="separator"] { height: 1px; margin: var(--sp-1) 0; background: var(--border); }
.tip-wrap { position: relative; display: inline-flex; }
.tip { position: absolute; z-index: 40; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); width: max-content; max-width: 240px; padding: 6px 10px; border-radius: var(--r-input);
  background: var(--slate-900); color: var(--slate-50); font-size: var(--fs-12); font-weight: 500; line-height: 1.4; pointer-events: none;
  display: none; animation: ds-tip var(--dur-fast) var(--ease) forwards; }
/* display: none while hidden, so a tooltip near the edge never widens a phone page. */
.tip-wrap:hover .tip, .tip-wrap:focus-within .tip { display: block; }
.toasts { position: fixed; z-index: 60; right: var(--sp-4); bottom: var(--sp-4); display: grid; gap: var(--sp-2); width: min(360px, calc(100vw - 32px)); margin: 0; padding: 0; list-style: none; }
.toast { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card); background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); box-shadow: var(--shadow-2); font-size: var(--fs-14); animation: ds-slide-up var(--dur) var(--ease); }
.toast .icon { color: var(--success); margin-top: 1px; }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* ---------- progress: bars, rings, stepper ---------- */
.bar { appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: var(--r-full); overflow: hidden; background: var(--surface-3); }
.bar::-webkit-progress-bar { background: var(--surface-3); border-radius: var(--r-full); }
.bar::-webkit-progress-value { background: linear-gradient(90deg, var(--violet-500), var(--primary)); border-radius: var(--r-full); transition: width var(--dur) var(--ease); }
.bar::-moz-progress-bar { background: var(--primary); border-radius: var(--r-full); }
.bar.warn::-webkit-progress-value { background: var(--accent); } .bar.warn::-moz-progress-bar { background: var(--accent); }
.meter { display: grid; gap: var(--sp-1); font-size: var(--fs-12); color: var(--fg-muted); }
.meter-head { display: flex; justify-content: space-between; gap: var(--sp-2); }
.meter-head strong { color: var(--fg); font-variant-numeric: tabular-nums; }
.ring { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring .ring-track { stroke: var(--surface-3); }
.ring .ring-value { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset var(--dur) var(--ease); }
.ring-label { font-size: var(--fs-14); font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper { display: flex; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.stepper li { flex: 1; min-width: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-12); font-weight: 600; color: var(--fg-subtle); counter-increment: step; }
.stepper li::before { content: ""; height: 4px; border-radius: var(--r-full); background: var(--surface-3); }
.stepper .step-name { display: flex; align-items: center; gap: var(--sp-2); }
.stepper .step-name::before { content: counter(step); display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); font-size: 11px; }
.stepper .is-done::before, .stepper .is-current::before { background: var(--primary); }
.stepper .is-done, .stepper .is-current { color: var(--fg); }
.stepper .is-done .step-name::before { content: "\2713"; background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.stepper .is-current .step-name::before { border-color: var(--primary); color: var(--primary-soft-fg); background: var(--primary-soft); }

/* ---------- empty states and skeletons ---------- */
.empty { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-10) var(--sp-6); text-align: center; }
.empty svg.spot { width: 120px; height: 96px; margin-bottom: var(--sp-2); }
.empty h3, .empty h2 { margin: 0; font-size: var(--fs-16); }
.empty p { margin: 0 0 var(--sp-2); color: var(--fg-muted); font-size: var(--fs-14); max-width: 36ch; }
.spot .s-bg { fill: var(--primary-soft); } .spot .s-card { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; }
.spot .s-line { stroke: var(--border); stroke-width: 6; stroke-linecap: round; } .spot .s-accent { fill: var(--accent); } .spot .s-primary { fill: var(--primary); }
.skeleton { display: block; border-radius: var(--r-input); background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%;
  animation: ds-shimmer 1.4s linear infinite; }
.skeleton-line { height: 12px; } .skeleton-line.w-60 { width: 60%; } .skeleton-line.w-80 { width: 80%; } .skeleton-line.w-40 { width: 40%; }
.skeleton-title { height: 20px; width: 45%; } .skeleton-circle { width: 36px; height: 36px; border-radius: 50%; }

/* ---------- command palette ---------- */
dialog.palette { width: 640px; margin-top: 12vh; border-radius: var(--r-panel); }
dialog.palette[open] { animation: ds-pop var(--dur) var(--ease); }
.palette-search { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.palette-search .icon { color: var(--fg-subtle); }
.palette-search input { flex: 1; min-width: 0; border: 0; background: none; font: 400 var(--fs-16)/1.4 var(--font-sans); color: var(--fg); padding: 0; }
.palette-search input:focus-visible { outline: none; }
.palette-list { list-style: none; margin: 0; padding: var(--sp-2); max-height: min(420px, 60vh); overflow-y: auto; }
.palette-group { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--fs-12); font-weight: 600; color: var(--fg-subtle); letter-spacing: .04em; text-transform: uppercase; }
.palette-list [role="option"] a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-input); color: var(--fg); text-decoration: none; font-size: var(--fs-14); }
.palette-list [role="option"] a .icon { color: var(--fg-subtle); }
.palette-list [role="option"][aria-selected="true"] a { background: var(--primary-soft); color: var(--primary-soft-fg); }
.palette-list [role="option"][aria-selected="true"] a .icon { color: var(--primary-soft-fg); }
.palette-foot { display: flex; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-12); color: var(--fg-subtle); }
.palette-empty { padding: var(--sp-6); text-align: center; color: var(--fg-muted); font-size: var(--fs-14); }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border); border-bottom-width: 2px;
  background: var(--surface-2); color: var(--fg-muted); font: 600 11px/1 var(--font-sans); }
.search-trigger { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-2) 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-input);
  background: var(--surface-2); color: var(--fg-subtle); font: 400 var(--fs-14)/1 var(--font-sans); cursor: pointer; min-width: 220px; --hover-bg: var(--surface-3); }
.search-trigger span { flex: 1; text-align: left; }
.search-trigger:hover { border-color: var(--border-strong); color: var(--fg-muted); }

/* ---------- decoration ---------- */
.blob-bg { position: relative; isolation: isolate; overflow: hidden; }
.blob-bg::before { content: ""; position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .28), transparent); filter: blur(10px); }
.blob-bg::after { content: ""; position: absolute; z-index: -1; inset: auto auto -50% -10%; width: 50%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 158, 11, .18), transparent); filter: blur(10px); }
.grid-bg { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 32px 32px; }

/* ---------- motion ---------- */
@keyframes ds-pop { from { opacity: 0; transform: scale(.97) translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ds-slide-left { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ds-slide-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ds-tip { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ds-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ds *, .ds *::before, .ds *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- the styleguide page itself ---------- */
.sg-hero { display: grid; gap: var(--sp-3); }
.sg-hero h1 { font-size: var(--fs-48); letter-spacing: -.035em; margin: 0; }
.sg-lead { margin: 0 0 var(--sp-2); max-width: 60ch; }
.sg-intro { margin: var(--sp-1) 0 0; max-width: 70ch; }
.sg-section { display: grid; gap: var(--sp-5); }
.sg-section > .panel-head { margin: 0; }
.sg-sub { margin: 0; }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.swatch { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.swatch svg { flex: none; }
.swatch span { display: grid; min-width: 0; }
.swatch code { font: 500 var(--fs-12)/1.3 var(--font-mono); color: var(--fg); overflow-wrap: anywhere; }
.swatch small { font-size: var(--fs-12); color: var(--fg-subtle); }
.sg-type { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.sg-type li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; gap: var(--sp-4); white-space: nowrap; overflow: hidden; }
.sg-type li > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.sg-type-size { font-size: var(--fs-12); color: var(--fg-subtle); }
.sg-space { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-12); }
.sg-space li { display: flex; align-items: center; gap: var(--sp-3); }
.sg-space code, .sg-radius code { font-family: var(--font-mono); }
.sg-space-bar { display: inline-block; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--violet-400), var(--primary)); }
.sg-w-1 { width: 4px; } .sg-w-2 { width: 8px; } .sg-w-3 { width: 12px; } .sg-w-4 { width: 16px; } .sg-w-6 { width: 24px; } .sg-w-8 { width: 32px; } .sg-w-12 { width: 48px; } .sg-w-16 { width: 64px; }
.sg-radius { display: grid; gap: var(--sp-1); place-content: center; text-align: center; min-height: 96px; border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-12); }
.sg-r-input { border-radius: var(--r-input); } .sg-r-card { border-radius: var(--r-card); } .sg-r-panel { border-radius: var(--r-panel); } .sg-r-full { border-radius: var(--r-full); }
.sg-shadow-2 { border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-2); }
.sg-icons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.sg-icons li { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-1); border-radius: var(--r-card); color: var(--fg); text-align: center; }
.sg-icons li:hover { background: var(--surface-3); }
.sg-icons small { font-size: 11px; color: var(--fg-subtle); overflow-wrap: anywhere; }
.sg-fieldset { border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-2); margin: 0; }
.sg-fieldset legend { font-size: var(--fs-14); font-weight: 600; padding: 0 var(--sp-1); }
.sg-card-title { margin: 0; }
.sg-card-text { margin: 0; }
.panel-link .row > div { flex: 1; min-width: 0; }
.sg-skeletons { display: grid; gap: var(--sp-3); align-content: start; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .ds .main { padding: var(--sp-5) var(--sp-4) var(--sp-12); }
  .ds h1 { font-size: var(--fs-24); }
  .panel { padding: var(--sp-4); }
  .panel-lg { padding: var(--sp-5); }
  dialog.drawer { width: 100vw; max-width: 100vw; border-radius: 0; }
  dialog.palette { margin-top: var(--sp-4); }
  .search-trigger { min-width: 0; width: 100%; }
  .stepper .step-name span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stepper .is-current .step-name span { position: static; width: auto; height: auto; clip-path: none; }
  .text-48 { font-size: var(--fs-36); } .text-60 { font-size: var(--fs-48); }
}