/* GENERATED by scripts/landing-styles.mjs from ui/styles/components.css (@getorrery/styles). Do not edit: change the source, then re-run. */
/* Orrery design system — components. Every class here is also what the orr-* elements
   render inside their shadow roots (components.js links this file into each one).
   States: :hover, :focus-visible, :active, [disabled]/[aria-disabled], [aria-busy] (loading), [aria-invalid] (error). */

/* ═══ snapshot guard ═══ canvas artboards are DOM snapshots that set -webkit-text-fill-color on every ancestor;
   without this a system element would paint its parent's ink instead of its own `color`. */
[class^="o-"], [class*=" o-"], .o-kbd > kbd { -webkit-text-fill-color: currentColor; }

/* ═══ icon ═══ */
.o-icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; color: currentColor; }
.o-icon--sm { width: 14px; height: 14px; }
.o-icon--lg { width: 20px; height: 20px; }
.o-icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ button ═══
   Old ADE type and look (ADE-08 + ade/src/styles.css kj-button variants). Type is !important on purpose: the canvas
   artboards are DOM snapshots whose inline styles carry the browser's button font (Arial 13.33px) and an inherited
   -webkit-text-fill-color; a system button must never take either. */
.o-btn {
  --b-bg: var(--ui-fill); --b-fg: var(--ui-on-fill); --b-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  height: var(--ctl-h); padding: 0 var(--sp-5);
  border: 1px solid var(--b-bd); border-radius: var(--btn-r, var(--r-sm));
  background: var(--b-bg); color: var(--b-fg);
  font-family: var(--font-ui) !important; font-size: var(--fs-body) !important; font-weight: var(--fw-normal) !important;
  font-style: normal !important; line-height: normal !important; letter-spacing: normal !important; text-transform: none !important;
  -webkit-text-fill-color: currentColor !important; -webkit-font-smoothing: antialiased;
  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.o-btn:hover { text-decoration: none; }
.o-btn:focus-visible { outline: none; box-shadow: var(--ui-ring); }
/* primary (default): accent fill, accent-on ink, weight 600 (ADE-08 "Run all"); hover brightens, press darkens */
.o-btn--default, .o-btn:not([class*="o-btn--outline"]):not([class*="o-btn--ghost"]):not([class*="o-btn--destructive"]):not([class*="o-btn--danger"]):not([class*="o-btn--link"]):not([class*="o-btn--caption"]) { font-weight: var(--fw-strong) !important; }
.o-btn--default:hover, .o-btn:not([class*="o-btn--"]):hover { filter: brightness(1.06); }
.o-btn--default:active, .o-btn:not([class*="o-btn--"]):active { filter: brightness(0.96); }
/* outline (ADE .btn.ghost-hair): transparent, hairline, ink-2; hover = stronger hairline only */
.o-btn--outline { --b-bg: transparent; --b-fg: var(--ink-2); --b-bd: var(--hair); }
.o-btn--outline:hover { --b-bd: var(--hair-2); }
/* ghost (ADE .btn, quiet in toolbars): no ground, ink-2; hover = panel-3 ground + full ink */
.o-btn--ghost { --b-bg: transparent; --b-fg: var(--ink-2); --b-bd: transparent; }
.o-btn--ghost:hover { --b-bg: var(--panel-3); --b-fg: var(--ink); }
/* destructive (ADE `danger`): red ink on a transparent ground; hover = a quiet red tint */
.o-btn--destructive { --b-bg: transparent; --b-fg: var(--st-blocked); --b-bd: transparent; }
.o-btn--destructive:hover { --b-bg: color-mix(in oklch, var(--sem-del), transparent 88%); }
/* danger: the filled form, for a final confirm only */
.o-btn--danger { --b-bg: var(--sem-del); --b-fg: var(--on-solid); }
.o-btn--danger:hover { filter: brightness(1.06); }
.o-btn--link { --b-bg: transparent; --b-fg: var(--ui-link); --b-bd: transparent; height: auto; padding: 0; border: 0; }
.o-btn--link:hover { text-decoration: underline; text-underline-offset: 2px; --b-fg: var(--ink); }
.o-btn--sm { height: var(--ctl-h-sm); padding: 0 var(--sp-4); font-size: var(--fs-badge) !important; gap: var(--sp-2); }
.o-btn--lg { height: var(--ctl-h-lg); padding: 0 var(--sp-7); font-size: var(--fs-sm) !important; }
.o-btn--tap { height: var(--tap); padding: 0 var(--sp-7); font-size: var(--fs-phone) !important; }
.o-btn--icon { width: var(--ctl-h); padding: 0; }
.o-btn--icon.o-btn--sm { width: var(--ctl-h-sm); }
.o-btn--icon.o-btn--lg { width: var(--ctl-h-lg); }
.o-btn--block { width: 100%; }
/* pressed (toggles): neutral raised surface + hairline ring + full ink; accent only on the icon */
.o-btn[aria-pressed="true"] { --b-bg: var(--panel-3); --b-fg: var(--ink); --b-bd: var(--hair-2); }
.o-btn[aria-pressed="true"] svg { color: var(--ui-ink); }
.o-btn--default[aria-pressed="true"] { --b-bg: var(--ui-fill); --b-fg: var(--ui-on-fill); box-shadow: var(--glow); }
.o-btn--default[aria-pressed="true"] svg { color: inherit; }
.o-btn:disabled, .o-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; pointer-events: none; filter: none; }
.o-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.o-btn[aria-busy="true"] .o-spin { width: 1em; height: 1em; }

/* ═══ dot ═══ */
.o-dot { --d: var(--st-idle); display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--d); flex-shrink: 0; vertical-align: middle; color: var(--d); }
.o-dot--sm { width: 6px; height: 6px; }
.o-dot--running { --d: var(--st-running); }
.o-dot--waiting { --d: var(--st-waiting); }
.o-dot--blocked { --d: var(--st-blocked); }
.o-dot--done { --d: var(--st-done); }
.o-dot--idle { --d: var(--st-idle); }
.o-dot--online { --d: var(--st-online); }
.o-dot--offline { --d: transparent; box-shadow: inset 0 0 0 1.5px var(--st-offline); }
.o-dot--pulse { animation: o-pulse var(--dur-pulse) ease-in-out infinite, o-ring var(--dur-pulse) ease-out infinite; }

/* ═══ pill (status pill: dot + word) ═══ */
.o-pill {
  --p: var(--st-idle);
  display: inline-flex; align-items: center; gap: var(--sp-3);
  height: 20px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklch, var(--p), transparent 60%);
  background: color-mix(in oklch, var(--p), transparent 88%);
  color: var(--p);
  font: var(--fw-strong) var(--fs-badge) / 1 var(--font-ui);
  white-space: nowrap;
}
.o-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.o-pill--nodot::before { display: none; }
.o-pill--running { --p: var(--st-running); }
.o-pill--running::before { animation: o-pulse var(--dur-pulse) ease-in-out infinite; }
.o-pill--waiting { --p: var(--st-waiting); }
.o-pill--blocked { --p: var(--st-blocked); }
.o-pill--done { --p: var(--st-done); }
.o-pill--idle { --p: var(--ink-3); }
.o-pill--online { --p: var(--st-online); }
.o-pill--offline { --p: var(--ink-3); }
.o-pill--offline::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ═══ chip ═══ */
.o-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 22px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: var(--fs-badge);
  white-space: nowrap;
}
.o-chip__x { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); padding: 0; cursor: pointer; }
.o-chip__x:hover { background: var(--panel-3); color: var(--ink); }
.o-chip[aria-selected="true"] { border-color: var(--ui-line); background: var(--ui-sel); color: var(--ink); }

/* ═══ kbd ═══ */
.o-kbd { display: inline-flex; gap: 3px; align-items: center; }
.o-kbd > kbd, .o-kbd__key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--panel-2); border: 1px solid var(--hair-2); border-bottom-width: 2px; border-radius: 4px;
  color: var(--ink-2); font: var(--fw-medium) var(--fs-tag) / 1 var(--font-mono);
}
.o-kbd:not(:has(kbd, .o-kbd__key)) {
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--panel-2); border: 1px solid var(--hair-2); border-bottom-width: 2px; border-radius: 4px;
  color: var(--ink-2); font: var(--fw-medium) var(--fs-tag) / 1 var(--font-mono); justify-content: center;
}

/* ═══ badge (count / tag) ═══ */
.o-badge {
  --t: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--t), transparent 88%);
  color: var(--t);
  font: var(--fw-medium) var(--fs-badge) / 1 var(--font-ui);
  font-variant-numeric: tabular-nums; letter-spacing: normal;
  white-space: nowrap;
}
.o-badge--neutral { --t: var(--ink-2); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hair); }
.o-badge--add { --t: var(--sem-add); }
.o-badge--del { --t: var(--sem-del); }
.o-badge--attn { --t: var(--sem-attn); }
.o-badge--change { --t: var(--sem-change); }
.o-badge--live { --t: var(--sem-live); }
.o-badge--accent { --t: var(--ui-ink); background: var(--ui-sel); }
.o-badge--solid { background: var(--t); color: var(--on-solid); }
.o-badge--mono { font-family: var(--font-mono); }
.o-badge--square { border-radius: 4px; }

/* ═══ dialog ═══ */
.o-scrim {
  position: fixed; inset: 0; z-index: var(--z-dialog);
  display: grid; place-items: center; padding: var(--sp-7);
  background: var(--scrim);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: o-fade var(--dur) var(--ease);
}
.o-scrim--sheet { place-items: end center; padding: 0; }
.o-dialog {
  position: relative;
  display: flex; flex-direction: column;
  /* viewport-relative: inside kouji's overlay the parent is the shrink-wrapped panel host, so a % cap
     resolved against the dialog's own width and took 32px off every size (md came out 568) */
  width: 600px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px);
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: o-rise var(--dur-enter) var(--ease);
}
.o-scrim > .o-dialog { max-width: calc(100% - 32px); max-height: calc(100% - 48px); } /* framed (canvas, .o-sheet-host): cap to the scrim */
.o-dialog--sm { width: 480px; }
.o-dialog--md { width: 600px; }
.o-dialog--lg { width: 880px; }
.o-dialog--xl { width: 1200px; }
.o-dialog__head { display: flex; align-items: center; gap: 9px; padding: 14px 18px; } /* symmetric: icon, title + sub and × centre in the band; the body starts flush under it */
.o-dialog__title { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.o-dialog__sub { font-size: var(--fs-meta); color: var(--ink-4); }
.o-dialog__ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--ui-sel); box-shadow: inset 0 0 0 1px var(--ui-sel-2); color: var(--ui-ink); flex-shrink: 0; }
.o-dialog__ico--danger { background: var(--del-fill); box-shadow: inset 0 0 0 1px var(--del-line); color: var(--sem-del); }
.o-dialog__body { flex: 1; min-height: 0; overflow: auto; padding: 0 18px 14px; display: flex; flex-direction: column; gap: 14px; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); }
.o-dialog__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-4); padding: var(--sp-6) 18px 18px; }
.o-dialog__foot > .o-hint, .o-dialog__foot > .meta { margin-right: auto; }
.o-dialog__close { margin-left: auto; }

/* ═══ sheet (phone bottom sheet) ═══ */
.o-sheet {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-height: 86%;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--hair-2); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow);
  animation: o-sheet-up var(--dur-enter) var(--ease);
  overflow: hidden;
}
.o-sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: var(--sp-4) auto 0; border-radius: 2px; background: var(--hair-2); flex-shrink: 0; }
.o-sheet__head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4) 0 var(--sp-7); min-height: var(--tap); }
.o-sheet__title { flex: 1; min-width: 0; font-size: var(--fs-phone-title); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-sheet__body { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4) var(--sp-7) var(--sp-7); display: flex; flex-direction: column; gap: 14px; font-size: var(--fs-phone); }
.o-sheet__foot { display: flex; gap: var(--sp-4); padding: var(--sp-4) var(--sp-7) max(var(--sp-9), env(safe-area-inset-bottom)); }
.o-sheet__foot > * { flex: 1; }

/* ═══ tabs ═══ */
.o-tabs { display: flex; align-items: stretch; gap: var(--sp-1); border-bottom: 1px solid var(--hair); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.o-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  height: 34px; padding: 0 var(--sp-5);
  border: 0; background: transparent;
  color: var(--ink-3);
  font: var(--fw-normal) var(--fs-body) / 1 var(--font-ui);
  white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.o-tab:hover { color: var(--ink); }
.o-tab[aria-selected="true"] { color: var(--ink); font-weight: var(--fw-medium); }
.o-tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--ui-ind); }
.o-tab:focus-visible { outline: none; box-shadow: inset var(--ui-ring); border-radius: var(--r-sm); }
.o-tab:disabled { opacity: 0.45; cursor: not-allowed; }

/* ═══ segmented ═══ */
.o-seg { display: inline-flex; padding: var(--sp-1); gap: var(--sp-1); background: var(--panel-2); border: 1px solid var(--hair); border-radius: var(--r-md); flex-shrink: 0; }
.o-seg__opt {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--seg-h, var(--ctl-h-sm)); padding: 0 var(--seg-px, var(--sp-5));
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3);
  font: var(--fw-normal) var(--seg-fs, var(--fs-badge)) / 1 var(--font-ui); letter-spacing: normal;
  white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.o-seg__opt:hover { background: var(--panel-3); color: var(--ink); }
.o-seg__opt[aria-checked="true"], .o-seg__opt[aria-pressed="true"], .o-seg__opt[aria-selected="true"] { background: var(--panel-3); color: var(--ink); box-shadow: 0 0 0 1px var(--hair-2); }
.o-seg__opt:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.o-seg__opt:disabled { opacity: 0.45; cursor: not-allowed; }
.o-seg--block { display: flex; --seg-flex: 1 1 0; }
.o-seg--block .o-seg__opt { flex: 1; }
.o-seg--tap { --seg-h: 36px; --seg-fs: var(--fs-body); }

/* ═══ form: field, label, input, textarea, select ═══ */
.o-field { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.o-label { font-size: var(--fs-badge); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--fw-medium); }
.o-hint { font-size: var(--fs-badge); color: var(--ink-4); line-height: 1.45; }
.o-error { font-size: var(--fs-badge); color: var(--sem-del); line-height: 1.45; display: flex; align-items: center; gap: var(--sp-2); }
.o-input, .o-textarea, .o-select {
  width: 100%; min-width: 0;
  height: var(--ctl-h);
  padding: 0 var(--sp-5);
  background: var(--panel-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  color: var(--ink);
  font: var(--fw-normal) var(--fs-body) / 1.4 var(--font-ui);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.o-input::placeholder, .o-textarea::placeholder { color: var(--ink-4); }
.o-input:hover, .o-textarea:hover, .o-select:hover { border-color: var(--hair-2); }
.o-input:focus, .o-textarea:focus, .o-select:focus, .o-input:focus-visible, .o-textarea:focus-visible, .o-select:focus-visible { border-color: var(--ui-focus); box-shadow: var(--ui-ring); }
.o-input[aria-invalid="true"], .o-textarea[aria-invalid="true"], .o-select[aria-invalid="true"], .o-field--error .o-input { border-color: var(--sem-del); box-shadow: 0 0 0 3px var(--del-fill); }
.o-input:disabled, .o-textarea:disabled, .o-select:disabled { opacity: 0.5; cursor: not-allowed; }
.o-input--mono, .o-textarea--mono { font-family: var(--font-mono); font-size: var(--fs-meta); }
.o-input--lg { height: var(--ctl-h-lg); }
.o-input--tap { height: var(--tap); font-size: var(--fs-phone); }
.o-textarea { height: auto; min-height: 72px; padding: var(--sp-4) var(--sp-5); resize: vertical; line-height: 1.5; }
.o-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8b8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.o-input-wrap { position: relative; display: flex; align-items: center; }
.o-input-wrap > .o-icon { position: absolute; left: var(--sp-5); color: var(--ink-3); pointer-events: none; }
.o-input-wrap > .o-icon + .o-input { padding-left: 32px; }

/* ═══ switch ═══ */
.o-switch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-4); cursor: pointer; font-size: var(--fs-body); color: var(--ink); }
.o-switch__track, .o-switch > input {
  appearance: none; -webkit-appearance: none; margin: 0;
  position: relative; width: 34px; height: 19px; flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--panel-3);
  border: 1px solid var(--hair-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.o-switch__track::after, .o-switch > input::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--ink-3); box-shadow: var(--shadow-knob);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.o-switch[aria-checked="true"] .o-switch__track, .o-switch > input:checked { background: var(--ui-fill); border-color: var(--ui-fill); }
.o-switch[aria-checked="true"] .o-switch__track::after, .o-switch > input:checked::after { transform: translateX(15px); background: var(--ui-on-fill); }
.o-switch:focus-visible .o-switch__track, .o-switch > input:focus-visible { box-shadow: var(--ui-ring); outline: none; }
.o-switch[aria-disabled="true"], .o-switch:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

/* ═══ checkbox ═══ */
.o-check { display: inline-flex; align-items: center; gap: var(--sp-4); cursor: pointer; font-size: var(--fs-body); color: var(--ink); }
.o-check__box, .o-check > input {
  appearance: none; -webkit-appearance: none; margin: 0;
  position: relative; width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 4px; border: 1px solid var(--hair-2); background: var(--panel-2);
  display: inline-grid; place-items: center; cursor: pointer; color: var(--ui-on-fill);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.o-check > input::after { content: ""; width: 9px; height: 5px; border: 2px solid currentColor; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.o-check > input:checked::after { opacity: 1; }
.o-check[aria-checked="true"] .o-check__box, .o-check > input:checked { background: var(--ui-fill); border-color: var(--ui-fill); }
.o-check[aria-checked="mixed"] .o-check__box { background: var(--ui-fill); border-color: var(--ui-fill); }
.o-check__box svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.5; fill: none; opacity: 0; }
.o-check[aria-checked="true"] .o-check__box svg { opacity: 1; }
.o-check:hover .o-check__box, .o-check > input:hover { border-color: var(--ink-4); }
.o-check:focus-visible .o-check__box, .o-check > input:focus-visible { box-shadow: var(--ui-ring); outline: none; }
.o-check[aria-disabled="true"], .o-check:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

/* ═══ menu (house rule: every item leads with an icon) ═══ */
.o-menu {
  display: flex; flex-direction: column;
  min-width: 200px; padding: var(--sp-2);
  background: var(--elev);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: var(--fs-body);
  z-index: var(--z-dropdown);
}
.o-menu__item {
  display: flex; align-items: center; gap: var(--sp-4);
  height: 28px; padding: 0 var(--sp-4);
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink);
  font: inherit; text-align: left; white-space: nowrap; cursor: pointer;
}
.o-menu__item > .o-icon, .o-menu__item > orr-icon { color: var(--ink-3); }
.o-menu__item:hover, .o-menu__item[data-active], .o-menu__item:focus-visible { background: var(--elev-hover); outline: none; }
.o-menu__item:hover > .o-icon, .o-menu__item:hover > orr-icon { color: var(--ink); }
.o-menu__item--danger, .o-menu__item--danger > .o-icon, .o-menu__item--danger > orr-icon { color: var(--sem-del); }
.o-menu__item:disabled, .o-menu__item[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; background: transparent; }
.o-menu__item[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--ui-ink); }
.o-menu__key { margin-left: auto; padding-left: var(--sp-7); color: var(--ink-4); font: var(--fs-tag) var(--font-mono); }
.o-menu__sep { height: 1px; margin: var(--sp-2) var(--sp-2); background: var(--hair); border: 0; }
.o-menu__label { padding: var(--sp-3) var(--sp-4) var(--sp-2); font-size: var(--fs-micro); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-4); }

/* ═══ tooltip ═══ */
.o-tip {
  display: inline-block;
  max-width: 280px; padding: var(--sp-2) var(--sp-4);
  background: var(--elev); color: var(--ink);
  border: 1px solid var(--hair-2); border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  font: var(--fs-badge) / 1.4 var(--font-ui);
  z-index: var(--z-tooltip);
  pointer-events: none;
}

/* ═══ toast ═══ */
.o-toast {
  --tt: var(--sem-change);
  display: flex; align-items: flex-start; gap: var(--sp-5);
  width: 380px; max-width: calc(100vw - 32px);
  padding: var(--sp-6) 14px;
  background: var(--elev);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  color: var(--ink);
  font: var(--fs-meta) / 1.4 var(--font-ui);
  animation: o-rise var(--dur-enter) var(--ease);
}
.o-toast__ico { color: var(--tt); flex-shrink: 0; margin-top: 1px; }
.o-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--ink-2); }
.o-toast__title { color: var(--ink); font-weight: var(--fw-medium); font-size: var(--fs-body); }
.o-toast__actions { display: flex; gap: var(--sp-3); align-items: center; flex-shrink: 0; }
.o-toast--info { --tt: var(--sem-change); }
.o-toast--ok { --tt: var(--sem-add); }
.o-toast--warn { --tt: var(--sem-attn); }
.o-toast--error { --tt: var(--sem-del); border-color: var(--del-line); }

/* ═══ banner ═══ */
.o-banner {
  --bt: var(--sem-change);
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid color-mix(in oklch, var(--bt), transparent 60%);
  background: color-mix(in oklch, var(--bt), transparent 90%);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--fs-meta); line-height: 1.45;
}
.o-banner > .o-icon:first-child, .o-banner > orr-icon:first-child { color: var(--bt); }
.o-banner__body { flex: 1; min-width: 0; }
.o-banner--info { --bt: var(--sem-change); }
.o-banner--ok { --bt: var(--sem-add); }
.o-banner--warn, .o-banner--attn { --bt: var(--sem-attn); }
.o-banner--error { --bt: var(--sem-del); }
.o-banner--accent { --bt: var(--accent); }
.o-banner--flat { border-radius: 0; border-left: 0; border-right: 0; }

/* ═══ skeleton / spinner ═══ */
.o-skel { display: block; height: 12px; border-radius: var(--r-sm); background: var(--panel-3); animation: o-shimmer 1.4s ease-in-out infinite; }
.o-skel + .o-skel { margin-top: var(--sp-4); }
.o-skel--line:last-child:not(:first-child) { width: 60%; }
.o-skel--circle { border-radius: 50%; }
.o-spin {
  --spin-w: 2px;
  display: inline-block; width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 10%, var(--brand-1) 38%, var(--brand-2) 68%, var(--brand-3) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--spin-w)), #000 calc(100% - var(--spin-w) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--spin-w)), #000 calc(100% - var(--spin-w) + 0.5px));
  animation: o-spin 0.8s linear infinite;
  vertical-align: middle;
}
.o-spin--sm { width: 12px; height: 12px; --spin-w: 1.5px; }
.o-spin--lg { width: 24px; height: 24px; --spin-w: 2.5px; }
/* inside a button the spinner takes the button's ink: the triad never sits on a filled control */
.o-btn .o-spin { background: none; -webkit-mask: none; mask: none; border: 2px solid color-mix(in oklch, currentColor, transparent 75%); border-top-color: currentColor; }

/* ═══ empty ═══ */
.o-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-11) var(--sp-9); text-align: center; color: var(--ink-3); }
.o-empty__ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--panel-2); border: 1px solid var(--hair); color: var(--ink-3); margin-bottom: var(--sp-2); }
.o-empty__title { color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.o-empty__body { font-size: var(--fs-meta); max-width: 360px; line-height: 1.5; }
.o-empty__action { margin-top: var(--sp-4); display: flex; gap: var(--sp-4); }
.o-empty--line { flex-direction: row; justify-content: flex-start; padding: var(--sp-4) 0; text-align: left; font-size: var(--fs-meta); }

/* ═══ card ═══ */
.o-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-lg); min-width: 0; overflow: hidden; }
.o-card__head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--hair); font-weight: var(--fw-medium); }
.o-card__title { flex: 1; min-width: 0; font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-card__body { padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.o-card__foot { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-7); border-top: 1px solid var(--hair); }
.o-card--hover { cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.o-card--hover:hover { border-color: var(--hair-2); }
.o-card[aria-selected="true"] { border-color: var(--ui-line); box-shadow: var(--glow); }

/* ═══ setting row ═══ */
.o-set-row { display: flex; align-items: flex-start; gap: var(--sp-7); padding: var(--sp-5) 0; min-width: 0; }
.o-set-row--wide { flex-direction: column; gap: var(--sp-3); }
.o-set-row--dis { opacity: 0.45; pointer-events: none; }
.o-set-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.o-set-row__label { display: flex; align-items: center; gap: var(--sp-4); color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.2; }
.o-set-row__hint { max-width: 46ch; color: var(--ink-3); font-size: var(--fs-meta); line-height: 1.5; }
.o-set-row__hint code { color: var(--ink-3); background: var(--panel-2); padding: 0 var(--sp-2); border: 0; border-radius: 4px; }
.o-set-row__key { font-family: var(--font-mono); font-size: var(--fs-badge); color: var(--ink-4); letter-spacing: normal; }
.o-set-row__ctl { flex: none; display: flex; align-items: center; gap: var(--sp-4); padding-top: 1px; }
.o-set-row--wide .o-set-row__ctl { width: 100%; padding-top: 0; }
/* a settings group: section head (micro caps, ink-3, trailing hairline) + rows; groups are ruled */
.o-set-group { padding: var(--sp-7) 0; border-bottom: 1px solid var(--hair); }
.o-set-group:last-child { border-bottom: 0; }
.o-set-group__head { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-3); color: var(--ink-3); font-size: var(--fs-badge); font-weight: var(--fw-normal); text-transform: uppercase; letter-spacing: 0.12em; }
.o-set-group__head::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* ═══ list / item ═══ */
.o-list { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.o-list--boxed { border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--panel); padding: var(--sp-2); }
.o-list--rows { gap: 0; }
.o-list--rows > .o-item { border-radius: 0; border-bottom: 1px solid var(--hair); }
.o-item {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--row-h); padding: var(--sp-2) var(--sp-4);
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2);
  font: var(--fs-body) / 1.35 var(--font-ui);
  text-align: left; text-decoration: none; cursor: pointer; width: 100%; min-width: 0;
}
.o-item > .o-icon, .o-item > orr-icon { color: var(--ink-3); }
.o-item:hover { background: var(--panel-3); color: var(--ink); text-decoration: none; }
.o-item[aria-selected="true"], .o-item[aria-current="page"] { background: var(--ui-sel); color: var(--ink); font-weight: var(--fw-medium); }
.o-item[aria-selected="true"] > .o-icon, .o-item[aria-selected="true"] > orr-icon { color: var(--ui-ink); }
.o-item:focus-visible { outline: none; box-shadow: inset var(--ui-ring); }
.o-item[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.o-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.o-item__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-item__sub { font-size: var(--fs-badge); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-normal); }
.o-item__meta { margin-left: auto; flex-shrink: 0; font-size: var(--fs-meta); color: var(--ink-4); font-variant-numeric: tabular-nums; font-weight: var(--fw-normal); }
.o-item--tap { min-height: var(--tap); font-size: var(--fs-phone); }

/* ═══ avatar ═══ */
.o-avatar {
  --av: var(--id-1);
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in oklch, var(--av), transparent 78%);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--av), transparent 50%);
  color: var(--av);
  font: var(--fw-strong) var(--fs-tag) / 1 var(--font-ui);
  text-transform: uppercase; user-select: none;
}
.o-avatar--sm { width: 18px; height: 18px; font-size: 9px; }
.o-avatar--lg { width: 32px; height: 32px; font-size: var(--fs-badge); }
.o-avatar--sq { border-radius: var(--r-sm); }
.o-avatar--1 { --av: var(--id-1); } .o-avatar--2 { --av: var(--id-2); } .o-avatar--3 { --av: var(--id-3); }
.o-avatar--4 { --av: var(--id-4); } .o-avatar--5 { --av: var(--id-5); } .o-avatar--6 { --av: var(--id-6); }
.o-avatar--7 { --av: var(--id-7); }

/* ═══ brand mark ═══ */
.o-mark { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.o-mark svg { width: 100%; height: 100%; display: block; }
/* app-icon form: the mark on a rounded --brand-plate square (rx 22/100) */
.o-mark--plate { border-radius: 22%; background: var(--brand-plate); }
.o-wordmark { font: var(--fw-medium) var(--fs-md) / 1 var(--font-brand); letter-spacing: -0.3px; color: var(--ink); }

/* ═══ meter ═══ */
.o-meter { --v: 0%; --m: var(--ui-meter); position: relative; display: block; width: 100%; height: 4px; border-radius: var(--r-pill); background: var(--panel-3); overflow: hidden; }
.o-meter::after, .o-meter__fill { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: var(--m); transition: width var(--dur-slow) var(--ease); }
.o-meter--attn { --m: var(--sem-attn); }
.o-meter--danger { --m: var(--sem-del); }
.o-meter--ok { --m: var(--sem-add); }
.o-meter--lg { height: 6px; }
.o-meter-row { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ═══ file tree ═══ */
.o-tree { display: flex; flex-direction: column; min-width: 0; font: var(--fs-label) / 1 var(--font-ui); padding: var(--sp-2) 0; }
.o-tree:focus-visible { outline: none; box-shadow: inset var(--ui-ring); }
.o-tree__row {
  --indent: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--tree-row-h);
  padding: 0 var(--sp-5) 0 calc(var(--sp-5) + var(--indent) * 14px);
  border: 0; border-left: 2px solid transparent;
  background: transparent; color: var(--ink-2);
  font: inherit; text-align: left; white-space: nowrap; cursor: pointer; width: 100%; min-width: 0;
}
.o-tree__row:hover { background: var(--panel-3); color: var(--ink); }
.o-tree__row[aria-selected="true"] { background: var(--ui-sel); color: var(--ink); border-left-color: var(--ui-ind); }
.o-tree__row[data-focus] { box-shadow: inset 0 0 0 1px var(--ui-line); }
.o-tree__dir { color: var(--ink-3); cursor: pointer; }
.o-tree__dir .o-tree__name { color: var(--ink-2); }
.o-tree__chev { width: 12px; height: 12px; color: var(--ink-4); transition: transform var(--dur-fast) var(--ease); flex-shrink: 0; }
.o-tree__dir[aria-expanded="false"] .o-tree__chev { transform: rotate(-90deg); }
.o-tree__ico { width: 14px; height: 14px; color: var(--ink-4); flex-shrink: 0; }
.o-tree__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: var(--fs-meta); }
.o-tree__status { width: 14px; text-align: center; font: var(--fw-strong) var(--fs-badge) / 1 var(--font-mono); flex-shrink: 0; }
.o-tree__status[data-status="A"], .o-tree__row[data-status="A"] .o-tree__name { color: var(--vcs-added); }
.o-tree__status[data-status="M"], .o-tree__row[data-status="M"] .o-tree__name { color: var(--vcs-modified); }
.o-tree__status[data-status="R"], .o-tree__row[data-status="R"] .o-tree__name { color: var(--vcs-renamed); }
.o-tree__status[data-status="D"] { color: var(--vcs-deleted); }
.o-tree__row[data-status="D"] .o-tree__name { color: var(--vcs-deleted); text-decoration: line-through; }
.o-tree__status[data-status="C"], .o-tree__status[data-status="U"] { color: var(--vcs-conflicted); }
.o-tree__status[data-status="?"], .o-tree__row[data-status="?"] .o-tree__name { color: var(--vcs-untracked); }
.o-tree__status[data-status="!"], .o-tree__row[data-status="!"] .o-tree__name { color: var(--vcs-ignored); }
.o-tree__row[data-status="C"] .o-tree__name, .o-tree__row[data-status="U"] .o-tree__name { color: var(--vcs-conflicted); }
.o-tree__add, .o-tree__del { font: var(--fs-badge) / 1 var(--font-mono); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.o-tree__add { color: var(--sem-add); }
.o-tree__del { color: var(--sem-del); }
.o-tree__empty { padding: var(--sp-4) var(--sp-6); color: var(--ink-3); font-size: var(--fs-meta); }

/* ═══ diff ═══ */
.o-diff { display: flex; flex-direction: column; min-width: 0; background: var(--well); font: var(--fs-code) / var(--lh-code) var(--font-mono); color: var(--ink-2); overflow: auto; }
.o-diff:focus-visible { outline: none; box-shadow: inset var(--ui-ring); }
.o-diff__file { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6); background: var(--panel); border-bottom: 1px solid var(--hair); font: var(--fs-meta) / 1.4 var(--font-mono); color: var(--ink); }
.o-diff__line { display: grid; grid-template-columns: 44px 44px 16px minmax(0, 1fr); min-width: max-content; white-space: pre; }
.o-diff--split .o-diff__line { grid-template-columns: 44px 16px minmax(0, 1fr) 44px 16px minmax(0, 1fr); }
.o-diff--nonum .o-diff__line { grid-template-columns: 16px minmax(0, 1fr); }
.o-diff__num { padding: 0 var(--sp-3); text-align: right; color: var(--ink-4); user-select: none; font-variant-numeric: tabular-nums; }
.o-diff__sign { text-align: center; color: var(--ink-4); user-select: none; }
.o-diff__text { padding-right: var(--sp-7); min-width: 0; }
.o-diff__line--add { background: var(--code-add-bg); }
.o-diff__line--add .o-diff__text, .o-diff__line--add .o-diff__sign { color: var(--code-add-ink); }
.o-diff__line--del { background: var(--code-del-bg); }
.o-diff__line--del .o-diff__text, .o-diff__line--del .o-diff__sign { color: var(--code-del-ink); }
.o-diff__line--ctx .o-diff__text { color: var(--ink-2); }
.o-diff--syn .o-diff__line--add .o-diff__text, .o-diff--syn .o-diff__line--del .o-diff__text, .o-diff--syn .o-diff__line--ctx .o-diff__text { color: var(--ink); }
.o-diff--syn .o-diff__cell--add.o-diff__text, .o-diff--syn .o-diff__cell--del.o-diff__text { color: var(--ink); }
.o-diff__line--hunk { background: color-mix(in oklch, var(--sem-change), transparent 92%); color: var(--ink-3); }
.o-diff__line--hunk .o-diff__text { color: var(--ink-3); font-style: italic; }
.o-diff__cell--add { background: var(--code-add-bg); color: var(--code-add-ink); }
.o-diff__cell--del { background: var(--code-del-bg); color: var(--code-del-ink); }
.o-diff__cell--empty { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--side-a) 4px 8px); }
.o-diff__line[data-current="1"], .o-diff__line[data-current="true"] { box-shadow: inset 2px 0 0 var(--ui-ind); background-image: linear-gradient(var(--ui-sel), var(--ui-sel)); }
/* an added / removed row keeps its green / red while current: the bar marks it */
.o-diff__line--add[data-current], .o-diff__line--del[data-current] { background-image: none; }
.o-diff__line:hover .o-diff__num { color: var(--ink-2); }
.o-diff__comment {
  margin: var(--sp-3) var(--sp-6) var(--sp-3) 104px;
  padding: var(--sp-5) var(--sp-6);
  background: var(--panel); border: 1px solid var(--hair-2); border-radius: var(--r-md);
  font: var(--fs-body) / 1.5 var(--font-ui); color: var(--ink); white-space: normal;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.o-diff__comment .o-textarea { min-height: 56px; }
.o-diff__fold { padding: var(--sp-1) var(--sp-6); color: var(--ink-4); font-size: var(--fs-badge); background: var(--side-a); cursor: pointer; border: 0; text-align: left; }
.o-diff__fold:hover { color: var(--ink); }

/* ═══ code (read-only file) ═══ */
.o-code { display: block; background: var(--well); border: 1px solid var(--hair); border-radius: var(--r-md); font: var(--fs-code) / var(--lh-code) var(--font-mono); color: var(--ink); overflow: auto; padding: var(--sp-4) 0; white-space: pre; }
.o-code--flat { border: 0; border-radius: 0; background: var(--panel-2); }
.o-code__line { display: flex; min-width: max-content; padding-right: var(--sp-7); }
.o-code__num { width: 44px; padding-right: var(--sp-5); text-align: right; color: var(--ink-4); user-select: none; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.o-code__line[data-current="1"] { background: var(--ui-sel); }
.o-code pre, .o-code code { margin: 0; padding: 0 var(--sp-6); background: none; border: 0; font: inherit; color: inherit; }
/* syntax tokens (OrrSyntax): Monaco vs-dark / vs palette via --syn-* */
.tk-kw { color: var(--syn-kw); } .tk-str { color: var(--syn-str); } .tk-num { color: var(--syn-num); }
.tk-com { color: var(--syn-com); font-style: italic; } .tk-fn { color: var(--syn-fn); } .tk-type { color: var(--syn-type); }
.tk-punc { color: var(--syn-punc); }

/* ═══ terminal ═══ */
.o-term { display: flex; flex-direction: column; background: var(--term-bg); color: var(--term-body); font: var(--fs-code) / var(--lh-code) var(--font-mono); padding: var(--sp-5) var(--sp-6); overflow: auto; border-radius: var(--r-md); border: 1px solid var(--hair); white-space: pre-wrap; word-break: break-word; }
.o-term--flat { border: 0; border-radius: 0; }
.o-term__line { min-height: var(--lh-code); }
.o-term__line--err { color: var(--log-err); }
.o-term__line--warn { color: var(--log-warn); }
.o-term__line--sys { color: var(--log-sys); }
.o-term__line--ok { color: var(--sem-add); }
.o-term__prompt { color: var(--ui-ink); user-select: none; margin-right: 1ch; }
.o-term__input { display: flex; align-items: center; }
.o-term__input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font: inherit; padding: 0; }
.o-term__cursor { display: inline-block; width: 0.6em; height: 1.1em; vertical-align: text-bottom; background: var(--ink); animation: o-blink 1s steps(1) infinite; }

/* ═══ composer ═══ */
.o-composer { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); background: var(--panel-2); border: 1px solid var(--hair); border-radius: var(--r-lg); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.o-composer:focus-within { border-color: var(--ui-focus); box-shadow: var(--ui-ring); }
.o-composer .o-textarea, .o-composer__input { min-height: 44px; max-height: 240px; padding: 0 var(--sp-2); background: transparent; border: 0; box-shadow: none; resize: none; font-size: var(--fs-body); color: var(--ink); outline: none; width: 100%; font-family: var(--font-ui); line-height: 1.5; }
.o-composer .o-textarea:focus { box-shadow: none; }
.o-composer__bar { display: flex; align-items: center; gap: var(--sp-3); }
.o-composer__bar > .o-composer__spacer { flex: 1; }
.o-composer[aria-busy="true"] { border-color: var(--live-line); }

/* ═══ message ═══ */
.o-msg { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; max-width: 760px; font-size: var(--fs-body); line-height: 1.55; color: var(--ink); }
.o-msg__head { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-meta); color: var(--ink-3); }
.o-msg__author { color: var(--ink); font-weight: var(--fw-medium); }
.o-msg__time { margin-left: auto; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.o-msg__body { min-width: 0; overflow-wrap: anywhere; }
.o-msg__body p + p { margin-top: var(--sp-4); }
.o-msg--user { align-self: flex-end; max-width: 620px; }
.o-msg--user .o-msg__body { padding: var(--sp-5) var(--sp-6); background: var(--panel-3); border: 1px solid var(--hair); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); }
.o-msg--user .o-msg__head { justify-content: flex-end; }
.o-msg--agent .o-msg__body { padding: 0 var(--sp-1); }
.o-msg--tool { color: var(--ink-2); font-size: var(--fs-meta); }
.o-msg--tool .o-msg__body { font-family: var(--font-mono); }
.o-msg--system { align-self: center; color: var(--ink-3); font-size: var(--fs-meta); text-align: center; }
.o-msg--system .o-msg__body { display: inline-flex; align-items: center; gap: var(--sp-3); }

/* ═══ tool call ═══ */
.o-tool { --ts: var(--sem-live); display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-md); overflow: hidden; font-size: var(--fs-meta); }
.o-tool[data-state="ok"] { --ts: var(--sem-add); }
.o-tool[data-state="error"] { --ts: var(--sem-del); border-color: var(--del-line); }
.o-tool__head { display: flex; align-items: center; gap: var(--sp-4); min-height: 32px; padding: 0 var(--sp-6); border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; width: 100%; }
.o-tool__head:hover { background: var(--panel-3); }
.o-tool__head:focus-visible { outline: none; box-shadow: inset var(--ui-ring); }
.o-tool__state { color: var(--ts); display: inline-flex; }
.o-tool__name { font-family: var(--font-mono); font-weight: var(--fw-medium); }
.o-tool__arg { flex: 1; min-width: 0; color: var(--ink-3); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-tool__chev { color: var(--ink-4); transition: transform var(--dur-fast) var(--ease); }
.o-tool[data-open] .o-tool__chev, .o-tool[open] .o-tool__chev { transform: rotate(90deg); }
.o-tool__body { border-top: 1px solid var(--hair); padding: var(--sp-5) var(--sp-6); background: var(--well); font: var(--fs-code) / var(--lh-code) var(--font-mono); color: var(--ink-2); white-space: pre-wrap; overflow: auto; max-height: 320px; }
.o-tool__row { display: flex; gap: var(--sp-4); padding: var(--sp-2) var(--sp-6); font-family: var(--font-mono); color: var(--ink-2); border-top: 1px solid var(--hair); }
.o-tool__row > :first-child { color: var(--ink-4); min-width: 64px; }

/* ═══ consent ═══ */
.o-consent { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6) var(--sp-7); background: var(--panel); border: 1px solid var(--attn-line); border-radius: var(--r-lg); box-shadow: 0 0 0 3px var(--attn-fill); min-width: 0; }
.o-consent__head { display: flex; align-items: center; gap: var(--sp-4); color: var(--ink); font-weight: var(--fw-medium); }
.o-consent__head > .o-icon, .o-consent__head > orr-icon { color: var(--sem-attn); }
.o-consent__age { margin-left: auto; font-weight: var(--fw-normal); font-size: var(--fs-meta); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.o-consent__cmd { padding: var(--sp-5) var(--sp-6); border-radius: var(--r-sm); background: var(--well); border: 1px solid var(--hair); font: 13.5px / 20px var(--font-mono); color: var(--ink); word-break: break-word; white-space: pre-wrap; }
.o-consent__rule { font-size: var(--fs-meta); color: var(--ink-3); }
.o-consent__rule code { color: var(--ink-2); }
.o-consent__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.o-consent__actions .o-kbd { margin-left: var(--sp-2); }

/* ═══ thread (App-00 Agent-mode conversation = @getorrery/chat variant="agent") ═══
   A turn is a head line (who · hover actions) over a bubble. Tools are .o-tool--row lines with a status dot;
   edits are a 31 px card with file chips; consent is .o-consent--flat; the composer is .o-composer--thread. */
.o-turn { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.o-who { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink-3); font: var(--fs-badge) / normal var(--font-ui); }
.o-who__you { padding: 1px 5px; border-radius: 3px; background: color-mix(in oklch, var(--accent), transparent 88%); color: var(--accent-ink); font: var(--fs-micro) / normal var(--font-mono); }
.o-who__via { color: var(--ink-4); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.o-who__acts { margin-left: auto; display: flex; align-items: center; gap: 1px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.o-turn:hover .o-who__acts, .o-turn:focus-within .o-who__acts { opacity: 1; }
.o-who__act { display: grid; place-items: center; flex: none; width: 17px; height: 17px; padding: 3px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-3); cursor: pointer; }
.o-who__act:hover { background: var(--panel-3); color: var(--ink); }
.o-who__act:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.o-who__act svg { width: 11px; height: 11px; }
.o-bubble { min-width: 0; padding: 8px 11px; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--panel); color: var(--ink); line-height: 21.7px; overflow-wrap: anywhere; }
.o-bubble--user { background: var(--panel-2); border-color: var(--hair-2); white-space: pre-wrap; }
/* the person's turn: on the right, the bubble as wide as its text, their avatar beside it */
.o-turn--user { align-items: flex-end; }
.o-turn__line { display: flex; align-items: flex-end; gap: var(--sp-3); max-width: min(80%, 620px); min-width: 0; }
.o-turn__main { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.o-turn--user .o-bubble { width: fit-content; max-width: 100%; border-radius: var(--r-md) var(--r-md) var(--r-sm) var(--r-md); }
.o-turn--user .o-who { justify-content: flex-end; }
.o-turn__avatar { margin-bottom: 18px; }
.o-bubble__cursor { margin-left: 1px; color: var(--sem-live); animation: o-blink 1s steps(2) infinite; }
.o-working .o-bubble { display: flex; align-items: center; gap: var(--sp-4); }
.o-tool__dot { --d: var(--ink-3); width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--d); box-shadow: 0 0 0 3px color-mix(in oklch, var(--d), transparent 78%); }
.o-tool__dot[data-state="running"] { --d: var(--sem-live); animation: o-pulse 1.4s ease-in-out infinite; }
.o-tool__dot[data-state="error"] { --d: var(--sem-del); }
.o-tool--row[data-open] .o-tool__chev { transform: rotate(180deg); }
.o-edits { min-width: 0; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.o-edits__head { display: flex; align-items: center; gap: 9px; width: 100%; height: 31px; padding: 7px 10px; border: 0; background: transparent; color: var(--ink-2); font: var(--fs-meta) / normal var(--font-ui); letter-spacing: normal; text-align: left; cursor: pointer; }
.o-edits__head:hover .o-edits__open { color: var(--accent-ink); }
.o-edits__head:focus-visible { outline: none; box-shadow: inset var(--ui-ring); }
.o-edits__head > svg { width: 15px; height: 15px; flex: none; color: var(--accent-ink); }
.o-edits__title { color: var(--ink); white-space: nowrap; }
.o-edits__stat { color: var(--ink-4); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.o-edits__open { margin-left: auto; color: var(--ink-4); font-size: var(--fs-badge); white-space: nowrap; }
.o-edits__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 10px 9px; }
.o-filechip { display: inline-flex; align-items: center; gap: var(--sp-3); height: 22px; padding: 2px 7px; border: 1px solid var(--hair); border-radius: 4px; background: var(--panel-2); color: var(--ink-2); font: var(--fs-badge) / normal var(--font-mono); letter-spacing: normal; white-space: nowrap; cursor: pointer; }
.o-filechip:hover { border-color: var(--hair-2); color: var(--ink); }
.o-filechip:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.o-filechip__stat { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.o-filechip--more { border-style: dashed; }
/* consent, flat (App-00): hairline card, bolt + title, `$ command` on --bg, three 29 px answers, no key hints */
.o-consent--flat { gap: 7px; padding: 9px var(--sp-6); border-color: var(--hair-2); border-radius: var(--r-md); box-shadow: none; }
.o-consent--flat .o-consent__head { gap: var(--sp-4); color: var(--ink-2); font-size: var(--fs-meta); font-weight: var(--fw-normal); }
.o-consent--flat .o-consent__head > svg { width: 15px; height: 15px; flex: none; color: var(--sem-attn); }
.o-consent--flat .o-consent__cmd { padding: var(--sp-3) 9px; background: var(--bg); color: var(--ink-2); font: var(--fs-meta) / normal var(--font-mono); word-break: break-all; }
.o-consent--flat .o-consent__actions { gap: var(--sp-3); }
/* composer, thread (App-00): the bar under the textarea — agent chip, model, cost meta, spacer, Stop, Send */
.o-composer__chip { display: inline-flex; align-items: center; gap: 5px; flex: none; min-width: 0; height: 22px; padding: 0 7px; border: 1px solid var(--hair); border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: var(--fs-badge) / normal var(--font-ui); letter-spacing: normal; white-space: nowrap; overflow: hidden; }
button.o-composer__chip { cursor: pointer; }
button.o-composer__chip:hover { border-color: var(--hair-2); color: var(--ink); }
button.o-composer__chip:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.o-composer__chip > svg { width: 11px; height: 11px; flex: none; }
.o-composer__chip > svg.o-composer__chev { width: 10px; height: 10px; color: var(--ink-4); }
.o-composer__meta { display: inline-flex; align-items: center; gap: 4px; flex: none; min-width: 0; padding: 2px 6px; border: 1px solid var(--hair); border-radius: 4px; color: var(--ink-3); font: var(--fs-micro) / var(--fs-micro) var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.o-composer__meta > i { margin: 0 1px; color: var(--ink-4); font-style: normal; }
.o-composer__spacer { flex: 1 1 0; min-width: 4px; }
/* attach (App-00 `Attach a file`): 21 px icon button, 15 px link glyph (T00 computed; the svg attribute says 13); files waiting to go are .o-filechip with a remove × */
.o-composer__attach { display: flex; align-items: center; justify-content: center; flex: none; width: 21px; height: 21px; padding: 3px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-3); cursor: pointer; }
.o-composer__attach:hover { color: var(--ink); background: var(--panel-3); }
.o-composer__attach:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.o-composer__attach > svg { width: 15px; height: 15px; }
.o-attachments { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.o-attachments--sent { justify-content: flex-end; }
.o-attachments--sent .o-filechip { cursor: default; }
.o-filechip__x { display: grid; place-items: center; width: 14px; height: 14px; margin: 0 -3px 0 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--ink-4); font: 12px / 1 var(--font-ui); cursor: pointer; }
.o-filechip__x:hover { color: var(--ink); background: var(--panel-3); }
.o-filechip__x:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.o-attach-error { color: var(--sem-del); font-size: var(--fs-meta); }
/* phone (PhoneApp-00): the working bar over the composer, and the meta line under it */
.o-workbar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--hair); background: var(--panel-2); color: var(--ink-3); font-size: var(--fs-meta); }
.o-workbar__queued { padding: 2px var(--sp-4); border: 1px solid var(--hair); border-radius: var(--r-pill); background: var(--panel); color: var(--ink-2); font: var(--fs-badge) / normal var(--font-mono); white-space: nowrap; }
.o-composer__foot { display: flex; gap: var(--sp-5); padding: 0 var(--sp-2); color: var(--ink-4); font: 11.5px / normal var(--font-mono); white-space: nowrap; overflow: hidden; }
.o-composer__foot > .o-composer__also { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }

/* ═══ status bar ═══ */
.o-status { display: flex; align-items: center; gap: var(--sp-6); height: var(--statusbar-h); padding: 0 var(--sp-6); background: var(--panel); border-top: 1px solid var(--hair); color: var(--ink-3); font: var(--fs-badge) / 1 var(--font-ui); white-space: nowrap; overflow: hidden; min-width: 0; }
.o-status__item { display: inline-flex; align-items: center; gap: var(--sp-3); }
.o-status__spacer { flex: 1; }
.o-status button { background: none; border: 0; padding: 0 var(--sp-2); height: 100%; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-3); }
.o-status button:hover { color: var(--ink); background: var(--panel-3); }

/* ═══ command palette ═══ */
.o-palette { display: flex; flex-direction: column; width: 620px; max-width: calc(100% - 32px); max-height: 460px; background: var(--panel); border: 1px solid var(--hair-2); border-radius: var(--r-lg); box-shadow: var(--shadow); color: var(--ink); overflow: hidden; animation: o-rise var(--dur-enter) var(--ease); }
.o-scrim--palette { place-items: start center; padding-top: 90px; z-index: var(--z-palette); }
.o-palette__input { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) 14px; border-bottom: 1px solid var(--hair); color: var(--ink-3); }
.o-palette__input input { flex: 1; min-width: 0; height: 30px; border: 0; outline: none; background: transparent; color: var(--ink); font: var(--fs-phone) var(--font-ui); }
.o-palette__input input::placeholder { color: var(--ink-4); }
.o-palette__list { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-3) 0; }
.o-palette__item { display: flex; align-items: center; gap: var(--sp-5); width: 100%; padding: 7px 14px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--ink); font: var(--fs-body) var(--font-ui); text-align: left; cursor: pointer; }
.o-palette__item > .o-icon, .o-palette__item > orr-icon { color: var(--ink-3); }
.o-palette__item[data-active], .o-palette__item:hover { background: var(--panel-3); border-left-color: var(--accent); }
.o-palette__group { width: 70px; font-size: var(--fs-badge); color: var(--ink-4); flex-shrink: 0; }
.o-palette__label { font-weight: var(--fw-medium); }
.o-palette__sub { margin-left: auto; font-size: var(--fs-badge); color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-palette__empty { padding: 14px; color: var(--ink-3); font-size: var(--fs-meta); }
.o-palette__foot { display: flex; gap: 14px; padding: var(--sp-4) 14px; border-top: 1px solid var(--hair); font-size: var(--fs-badge); color: var(--ink-4); }

/* ═══ table (spec / data tables) ═══ */
.o-table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); line-height: 1.45; color: var(--ink-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.o-table th { padding: var(--sp-3) var(--sp-6); text-align: left; vertical-align: bottom; font-weight: var(--fw-medium); color: var(--ink-3); border-bottom: 1px solid var(--hair-2); white-space: nowrap; }
.o-table td { padding: var(--sp-3) var(--sp-6); text-align: left; vertical-align: top; border-top: 1px solid var(--hair); }
.o-table tr:first-child td { border-top: 0; }
.o-table--flush { border-top: 0; border-bottom: 0; }
.o-table--flush th:first-child, .o-table--flush td:first-child { padding-left: 0; }
.o-table--flush th:last-child, .o-table--flush td:last-child { padding-right: 0; }
.o-table--zebra tbody tr:nth-child(even) td { background: var(--side-a); }
.o-table--hover tbody tr:hover td { background: var(--panel-3); color: var(--ink); }
.o-table__key { font-family: var(--font-mono); color: var(--ink); width: 160px; white-space: nowrap; }
.o-table__num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.o-table__muted { color: var(--ink-3); }

/* ═══ changes list (orr-filetree mode="tree|flat" = the ADE diff-file-list) ═══ */
.o-changes { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--panel); color: var(--ink); font: var(--fs-body) / 1.35 var(--font-ui); }
.o-changes__head { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--hair); flex: none; min-width: 0; }
.o-changes__title { flex: 0 1 auto; min-width: 0; font-size: var(--fs-badge); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-changes__list { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-2) 0; outline: none; }
.o-changes__list:focus-visible { box-shadow: inset var(--ui-ring); }
.o-changes__empty { padding: var(--sp-5) var(--sp-6); color: var(--ink-4); }
.o-changes__row { display: flex; align-items: center; gap: var(--sp-3); height: var(--row-h); margin: 1px var(--sp-3); padding: 0 var(--sp-5); border-radius: var(--r-sm); cursor: pointer; min-width: 0; }
.o-changes__row--dir { padding: 0 var(--sp-4); }
.o-changes__row:hover { background: var(--panel-2); }
.o-changes__row[aria-selected="true"], .o-changes__row[aria-selected="true"]:hover { background: var(--panel-3); }
.o-changes__list:focus-visible .o-changes__row[data-focus] { box-shadow: inset 0 0 0 1px var(--ui-line); }
.o-changes__ico { color: var(--ink-4); width: 14px; height: 14px; flex: none; }
.o-changes__name { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-changes__dir { flex: 1 1 auto; min-width: 0; font-size: var(--fs-meta); color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-changes__dir--from { color: var(--vcs-renamed); }
.o-changes__dname { flex: 0 1 auto; min-width: 0; font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-changes__row--gone .o-changes__dname { color: var(--ink-4); text-decoration: line-through; opacity: 0.7; }
.o-changes__counts { flex: none; margin-left: auto; }
.o-changes__row--dir .o-changes__counts { opacity: 0.75; }
/* +/- counts (ADE app-add-del) */
.o-addel { display: inline-flex; gap: var(--sp-2); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; flex: none; }
.o-addel__add { color: var(--code-add-ink); }
.o-addel__del { color: var(--code-del-ink); }
/* file-state badge (ADE app-state-badge): A / M / D / R square */
.o-state { --s: var(--vcs-modified); display: inline-grid; place-items: center; width: var(--sp-6); height: var(--sp-6); flex: none; border-radius: 3px; background: color-mix(in oklch, var(--s), transparent 88%); color: var(--s); font: var(--fw-strong) var(--fs-2xs) / 1 var(--font-ui); }
.o-state[data-state="A"] { --s: var(--vcs-added); }
.o-state[data-state="R"] { --s: var(--vcs-renamed); }
.o-state[data-state="D"] { --s: var(--vcs-deleted); background: transparent; }
.o-state[data-state="C"], .o-state[data-state="U"] { --s: var(--vcs-conflicted); }
.o-state[data-state="?"] { --s: var(--vcs-untracked); }
.o-state[data-state="!"] { --s: var(--vcs-ignored); background: transparent; }
/* compact segmented (in-pane switchers, ADE .tabs-xs) */
.o-seg--xs { padding: 2px; gap: 1px; }
.o-seg--xs { --seg-px: var(--sp-3); }
.o-seg--xs .o-seg__opt { gap: var(--sp-3); }
.o-seg__opt[aria-selected="true"] svg, .o-seg__opt[aria-checked="true"] svg { color: var(--ui-ink); }

/* ═══ phone tab bar (orr-tabbar) ═══ */
.o-tabbar { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); padding: var(--sp-2) 0 var(--sp-8); background: var(--panel); border-top: 1px solid var(--hair); }
.o-tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tap); padding: var(--sp-2) var(--sp-2); border: 0; background: transparent; color: var(--ink-3); font: var(--fw-normal) var(--fs-tag) / 1.2 var(--font-ui); letter-spacing: normal; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.o-tabbar__item:hover { color: var(--ink-2); }
.o-tabbar__item[aria-selected="true"] { color: var(--ink); font-weight: var(--fw-medium); }
.o-tabbar__item[aria-selected="true"]::before { content: ""; position: absolute; top: calc(-1 * var(--sp-2) - 1px); left: 50%; width: 24px; height: 2px; margin-left: -12px; border-radius: 0 0 2px 2px; background: var(--ui-ind); }
.o-tabbar__item[aria-selected="true"] .o-tabbar__ico { color: var(--ui-ink); }
.o-tabbar__item:focus-visible { outline: none; box-shadow: inset var(--ui-ring); border-radius: var(--r-md); }
.o-tabbar__item:disabled { opacity: 0.45; cursor: not-allowed; }
.o-tabbar__ico { position: relative; display: inline-flex; width: 20px; height: 20px; }
.o-tabbar__ico svg { width: 20px; height: 20px; }
.o-tabbar__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.o-tabbar__badge { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--sem-attn); color: var(--on-solid); font: var(--fw-strong) 10px / 16px var(--font-ui); text-align: center; }

/* ═══ button group: bordered panel-2 strip of (ghost icon) buttons, hairline dividers ═══ */
.o-btn-group { --btn-r: 0; display: inline-flex; align-items: stretch; background: var(--panel-2); border: 1px solid var(--hair); border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; }
.o-btn-group > .o-btn { border: 0; border-radius: 0; height: var(--ctl-h); }
.o-btn-group { gap: 1px; }
.o-btn-group > * + * { box-shadow: -1px 0 0 var(--hair); }
.o-btn-group .o-btn--ghost:hover { --b-bg: var(--panel-3); }
.o-btn-group--sm { height: calc(var(--ctl-h-sm) + 4px); align-items: center; }
.o-btn-group--sm > .o-btn { height: var(--ctl-h-sm); }

/* ═══ window caption buttons (Hide to tray / Minimize / Restore / Close) ═══ */
.o-btn--caption, .o-btn--caption-close { --b-bg: transparent; --b-fg: var(--ink-3); --b-bd: transparent; width: 36px; height: 43px; padding: 0; border: 0; border-radius: 0; }
.o-btn--caption:hover, .o-btn--caption-close:hover { --b-bg: var(--panel-3); --b-fg: var(--ink); }
.o-btn--caption-close:hover { --b-bg: var(--sem-del); --b-fg: var(--on-solid); }

/* ═══ compact tool-call row (orr-tool-call compact): borderless one-line disclosure ═══ */
.o-tool--row { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.o-tool--row .o-tool__head { min-height: 19px; height: 19px; padding: 1px 0; gap: 7px; font: var(--fs-meta) / normal var(--font-ui); letter-spacing: normal; color: var(--ink-3); }
.o-tool--row .o-tool__head:hover { background: transparent; color: var(--ink); }
.o-tool--row .o-tool__name { font-family: var(--font-ui); font-weight: var(--fw-normal); color: var(--ink-2); }
.o-tool--row .o-tool__arg { flex: 0 1 auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font: var(--fs-badge) / normal var(--font-mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-tool__meta { flex: none; color: var(--ink-4); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.o-tool--row .o-tool__chev { width: 11px; height: 11px; color: var(--ink-4); }
.o-tool--row .o-tool__body { margin: var(--sp-2) 0 var(--sp-3) var(--sp-6); border: 1px solid var(--hair); border-radius: var(--r-sm); }

/* ═══ split button: one bordered unit, two actions (main | alternate path) ═══ */
.o-split-btn { display: inline-flex; align-items: stretch; height: var(--ctl-h); border: 1px solid var(--hair-2); border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; }
.o-split-btn > .o-btn { --btn-r: 0; height: 100%; border: 0; border-radius: 0; }
.o-split-btn > * + *, .o-split-btn > .o-btn + .o-btn { border-left: 1px solid var(--hair-2); }
.o-split-btn--primary { border-color: transparent; }
.o-split-btn--primary > * + *, .o-split-btn--primary > .o-btn + .o-btn { border-left-color: color-mix(in oklch, var(--ui-on-fill), transparent 75%); }
.o-split-btn__chip { display: inline-flex; align-items: center; height: 18px; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--panel-3); color: var(--ink-3); font: var(--fw-normal) var(--fs-tag) / 1 var(--font-mono); font-variant-numeric: tabular-nums; }
.o-btn--default .o-split-btn__chip, .o-split-btn--primary .o-btn .o-split-btn__chip { background: color-mix(in oklch, var(--ui-on-fill), transparent 85%); color: inherit; }

/* ═══ popover surface (status-bar popovers, small floating panels) ═══ */
.o-popover { display: flex; flex-direction: column; min-width: 280px; max-width: 420px; background: var(--elev); color: var(--ink); border: 1px solid var(--hair-2); border-radius: var(--r-lg); box-shadow: var(--shadow); font-size: var(--fs-body); overflow: hidden; z-index: var(--z-dropdown); }
.o-popover__head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--hair); }
.o-popover__title { flex: 1; min-width: 0; font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-popover__meta { font-size: var(--fs-meta); color: var(--ink-3); }
.o-popover__body { display: flex; flex-direction: column; padding: var(--sp-2); max-height: 360px; overflow: auto; }
.o-popover__row { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--row-h); padding: 0 var(--sp-4); border-radius: var(--r-sm); color: var(--ink-2); }
.o-popover__row:hover { background: var(--elev-hover); color: var(--ink); }
.o-popover__foot { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--hair); font-size: var(--fs-meta); color: var(--ink-3); }

/* ═══ nav item, bar variant (modal / settings nav): panel-3 + hair-2 ring + accent bar ═══ */
.o-item--bar { position: relative; }
.o-item--bar[aria-selected="true"], .o-item--bar[aria-current="page"] { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--ink); }
.o-item--bar[aria-selected="true"]::before, .o-item--bar[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2.5px; border-radius: 0 2px 2px 0; background: var(--ui-ind); }
.o-item--bar[aria-selected="true"] > .o-icon, .o-item--bar[aria-selected="true"] > svg { color: var(--ui-ink); }

/* ═══ top-bar search trigger: icon + shortcut, opens the palette ═══ */
.o-search-trigger { display: inline-flex; align-items: center; gap: var(--sp-4); height: 26px; padding: 0 var(--sp-3) 0 var(--sp-4); border: 1px solid var(--hair); border-radius: var(--r-sm); background: transparent; color: var(--ink-3); font: var(--fw-normal) var(--fs-meta) / 1 var(--font-ui); letter-spacing: normal; cursor: pointer; flex-shrink: 0; }
.o-search-trigger:hover { border-color: var(--hair-2); color: var(--ink-2); background: var(--panel-2); }
.o-search-trigger:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.o-kbd--md > kbd, .o-kbd--md .o-kbd__key { height: 20px; min-width: 20px; padding: 0 var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-normal); }

/* ═══ kbd inside a control (search pill, button, menu / palette item, chip, tab, input) ═══
   A hint, not a second button: no border, no ground, mono 11, --ink-3, fits inside the control's height.
   Applies automatically by context; `.o-kbd--inline` (or <orr-kbd inline>) forces it anywhere. */
.o-kbd--inline, .o-btn .o-kbd, .o-search-trigger .o-kbd, .o-menu__item .o-kbd, .o-palette__item .o-kbd,
.o-input-wrap .o-kbd, .o-chip .o-kbd, .o-pill .o-kbd, .o-tab .o-kbd, .o-seg__opt .o-kbd, .o-item .o-kbd { gap: var(--sp-2); margin-left: var(--sp-2); }
.o-kbd--inline > kbd, .o-kbd--inline .o-kbd__key, .o-kbd--inline:not(:has(kbd, .o-kbd__key)),
.o-btn .o-kbd > kbd, .o-btn .o-kbd__key, .o-btn .o-kbd:not(:has(kbd, .o-kbd__key)),
.o-search-trigger .o-kbd > kbd, .o-search-trigger .o-kbd__key, .o-search-trigger .o-kbd:not(:has(kbd, .o-kbd__key)),
.o-menu__item .o-kbd > kbd, .o-menu__item .o-kbd__key, .o-palette__item .o-kbd > kbd, .o-palette__item .o-kbd__key,
.o-input-wrap .o-kbd > kbd, .o-input-wrap .o-kbd__key, .o-chip .o-kbd__key, .o-pill .o-kbd__key, .o-tab .o-kbd__key, .o-seg__opt .o-kbd__key, .o-item .o-kbd__key {
  min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--ink-3); font: var(--fw-normal) var(--fs-tag) / 1 var(--font-mono); letter-spacing: normal;
}
/* on a filled (primary) button the hint takes the button's ink, quieted */
.o-btn--default .o-kbd > kbd, .o-btn--default .o-kbd__key, .o-btn:not([class*="o-btn--"]) .o-kbd__key { color: inherit; opacity: 0.7; }

/* ═══ choice cards (orr-choices / orr-choice): a radio group drawn as cards (CloudApp-00 Run on, instance size) ═══
   Row card: icon or dot, title, sub line; selected = accent border on --ui-sel. `.o-choice--card`: the stacked
   size card on --panel-2 (title row, mono spec, note); selected = accent border + focus ring. */
.o-choices { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--sp-4); min-width: 0; }
.o-choices--card { gap: var(--sp-5); }
.o-choice {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 9px var(--sp-5);
  border: 1px solid var(--hair); border-radius: var(--r-md);
  background: transparent; color: var(--ink);
  font: var(--fw-normal) var(--fs-meta) / 1.35 var(--font-ui); letter-spacing: normal; text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.o-choice:hover { border-color: var(--hair-2); }
.o-choice[aria-checked="true"] { border-color: var(--accent); background: var(--ui-sel); }
.o-choice:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.o-choice:disabled, .o-choice[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.o-choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.o-choice__title { font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-choice__sub { font-size: var(--fs-badge); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-choice--card { flex-direction: column; align-items: stretch; gap: var(--sp-3); padding: var(--sp-6); background: var(--panel-2); font-size: var(--fs-body); }
.o-choice--card[aria-checked="true"] { background: var(--panel-2); box-shadow: var(--ui-ring); }
.o-choice--card .o-choice__sub { white-space: normal; }

/* ═══ overlays scoped to a frame ═══ */
.o-scrim--local { position: absolute; }

/* keyframes live here too: shadow roots link this file, and @keyframes do not cross the shadow boundary */
@keyframes o-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes o-ring { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor, transparent 55%); } 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes o-blink { 50% { opacity: 0; } }
@keyframes o-rise { from { transform: translateY(7px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes o-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes o-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes o-spin { to { transform: rotate(360deg); } }
@keyframes o-shimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) {
  .o-dot--pulse, .o-pill--running::before, .o-skel, .o-term__cursor, .o-dialog, .o-sheet, .o-toast, .o-scrim, .o-palette { animation: none; }
}