/* ===== ARLAB UI 1.0 tokens ==============================================
   Two designed palettes on cool neutrals (the frame Agents Studio and ARLAB
   Knowledge run on). Light is the default; dark applies via [data-theme="dark"]
   or prefers-color-scheme when nothing is stamped. Token names are stable:
   every consumer already reads these. Surfaces step sunken -> ground -> raise. */

:root {
  color-scheme: light;

  --ground: #f3f4f7;
  --raise: #ffffff;
  --sunken: #e9ebf0;
  --sunken-2: #dfe2e9;

  --line: #d9dce3;
  --line-soft: #e7e9ee;
  --line-hover: #b9bdc8;

  --ink: #15161c;
  --ink-dim: #4b4f5c;
  --ink-faint: #7b8090;      /* AA on --raise for real text */
  --ink-inactive: #a3a7b3;   /* placeholders only */

  --accent: #e414db;
  --action: #d000c6;
  --action-hover: #bf00b6;
  --action-pressed: #a8009f;
  --action-ink: #fff;
  --accent-deep: #a80fa3;
  --accent-tint: rgba(228, 20, 219, 0.10);
  --accent-soft: rgba(228, 20, 219, 0.08);
  --accent-line: rgba(228, 20, 219, 0.35);
  --accent-secondary: #e8823a;

  --live: #1e8a55;  --live-tint: rgba(30, 138, 85, 0.12);
  --warn: #b8720a;  --warn-tint: rgba(184, 114, 10, 0.12);
  --crit: #c62f2f;  --crit-tint: rgba(198, 47, 47, 0.12);
  --info: #2f6fd6;  --info-tint: rgba(47, 111, 214, 0.12);
  --code-bg: #e9ebf0;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -16px rgba(0, 0, 0, 0.18);
  --shadow-card: var(--shadow);
  --shadow-pop: 0 14px 40px -10px rgba(0, 0, 0, 0.22);
  --shadow-glow: 0 0 32px rgba(228, 20, 219, 0.14);

  --font-sans: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Corners: 6 for items and segments, 8 for inputs, 10 for panels, 12 for dialogs, pills for
     buttons, badges, chips, dots. --radius-xs stays as an alias for older consumers. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 9999px;
  --tracking-tight: -0.01em;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.15s;
  --dur-slow: 0.28s;

  /* Type: 14.5px base, the scale the frame uses. */
  --text-2xs: 11px;      /* panel headings, sidebar group labels (uppercase, tracked) */
  --text-xs: 12.5px;     /* labels, meta, chips; badges 11.5px */
  --text-sm: 13.5px;     /* secondary text, property values */
  --text-base: 14.5px;   /* body, rows, form values */
  --text-md: 16px;       /* panel content heading, dialog title */
  --text-lg: 16px;
  --text-xl: 22px;       /* section title */
  --text-2xl: 28px;      /* detail title, dashboard greeting */
  --text-3xl: 34px;      /* page title */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* Frame dimensions shared by the shells and panes. */
  --side-w: 252px;
  --list-w: 372px;
  --top-h: 58px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark;
  --ground: #0e0f13; --raise: #15161c; --sunken: #0b0c10; --sunken-2: #1b1d25;
  --line: #262933; --line-soft: #1f2129; --line-hover: #3a3e4b;
  --ink: #ecedf1; --ink-dim: #b4b8c4; --ink-faint: #7d8292; --ink-inactive: #5a5e6b;
  --accent: #f04ee8; --accent-deep: #f47cee; --accent-tint: rgba(240, 78, 232, 0.14); --accent-soft: rgba(240, 78, 232, 0.10); --accent-line: rgba(240, 78, 232, 0.4); --accent-secondary: #e8823a;
  --live: #5cc48b; --live-tint: rgba(92, 196, 139, 0.14); --warn: #e6a94a; --warn-tint: rgba(230, 169, 74, 0.14); --crit: #f07171; --crit-tint: rgba(240, 113, 113, 0.14); --info: #7aa7f0; --info-tint: rgba(122, 167, 240, 0.14); --code-bg: #0b0c10;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -18px rgba(0, 0, 0, 0.8); --shadow-card: var(--shadow);
  --shadow-pop: 0 18px 50px -12px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 0 40px rgba(240, 78, 232, 0.18); }
}

:root[data-theme="dark"] { color-scheme: dark;
  --ground: #0e0f13; --raise: #15161c; --sunken: #0b0c10; --sunken-2: #1b1d25;
  --line: #262933; --line-soft: #1f2129; --line-hover: #3a3e4b;
  --ink: #ecedf1; --ink-dim: #b4b8c4; --ink-faint: #7d8292; --ink-inactive: #5a5e6b;
  --accent: #f04ee8; --accent-deep: #f47cee; --accent-tint: rgba(240, 78, 232, 0.14); --accent-soft: rgba(240, 78, 232, 0.10); --accent-line: rgba(240, 78, 232, 0.4); --accent-secondary: #e8823a;
  --live: #5cc48b; --live-tint: rgba(92, 196, 139, 0.14); --warn: #e6a94a; --warn-tint: rgba(230, 169, 74, 0.14); --crit: #f07171; --crit-tint: rgba(240, 113, 113, 0.14); --info: #7aa7f0; --info-tint: rgba(122, 167, 240, 0.14); --code-bg: #0b0c10;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -18px rgba(0, 0, 0, 0.8); --shadow-card: var(--shadow);
  --shadow-pop: 0 18px 50px -12px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 0 40px rgba(240, 78, 232, 0.18); }

/* A flat, calm ground. The corner glows of 0.x are gone: the frame carries the depth. */
body[data-arlab-ui] { background: var(--ground); color: var(--ink); }

/* Scrollbar — ported from theARLab's public site (its global recipe: thin,
   transparent track, tokenized thumb). Firefox properties are inherited,
   so setting them once here covers every scrollable box in the app. */
:root { scrollbar-color: var(--line-hover) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-hover); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ===== primitives ========================================================
   Every primitive is defensively self-contained: its own box-sizing, its
   own focus ring, its own transition timing. None of them assume a global
   reset or a particular parent layout (a badge must stay pill-shaped even
   inside a stretching flex column; a row must not collapse under a long
   title next to a fixed-width trailing control). Every interactive control
   shares one focus-ring recipe: 2px solid var(--accent), 2px offset. */

.arlab-btn, .arlab-card, .arlab-badge, .arlab-input, .arlab-textarea, .arlab-select,
.arlab-skeleton, .arlab-icon-btn, .arlab-avatar, .arlab-chip, .arlab-dialog,
.arlab-menu-item, .arlab-picker-item, .arlab-cmdk-row, .arlab-navtree-link,
.arlab-taginput, .arlab-search-btn, .arlab-toc-link, .arlab-collapsible-trigger { box-sizing: border-box; }

.arlab-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* ---- Button --------------------------------------------------------- */
.arlab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; line-height: 1;
  height: 34px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--raise); color: var(--ink); cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.arlab-btn:hover:not(:disabled) { border-color: var(--ink-faint); }
.arlab-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.arlab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arlab-btn.sm { height: 28px; padding: 0 11px; font-size: var(--text-xs); }
.arlab-btn-label { display: inline-flex; align-items: center; gap: 6px; }
/* Primary: flat accent, brightens on hover. No gradient sweep, no lift, no glow: the accent is the signal. */
/* The brand pink is 3.87:1 against white, under the 4.5:1 that text on a button needs. --action is
   the same pink a step deeper, 4.67:1, and it is what every primary action uses; --accent stays the
   brand colour for dots, tints and edges, where contrast is not the question. Hover darkens rather
   than brightening, which used to lower the contrast further. */
.arlab-btn.primary { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.arlab-btn.primary:hover:not(:disabled) { background: var(--action-hover); border-color: var(--action-hover); filter: none; }
.arlab-btn.primary:active:not(:disabled) { background: var(--action-pressed); border-color: var(--action-pressed); }
.arlab-btn.ghost { background: transparent; border-color: transparent; }
.arlab-btn.ghost:hover:not(:disabled) { background: var(--sunken); border-color: transparent; }
.arlab-btn.danger { background: transparent; border-color: var(--line); color: var(--crit); }
.arlab-btn.danger:hover:not(:disabled) { border-color: var(--crit); background: var(--crit-tint); }

/* ---- IconButton -------------------------------------------------------- */
.arlab-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: transparent; color: var(--ink-dim);
  cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.arlab-icon-btn:hover:not(:disabled) { background: var(--sunken); border-color: var(--line-hover); color: var(--ink); }
.arlab-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arlab-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.arlab-icon-btn.sm { width: 28px; height: 28px; }

/* ---- Card + composable header/body/footer ------------------------------ */
.arlab-card {
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius-md);
  /* An inset top highlight on top of the drop shadow — the "glass" detail
     theARLab's actual elevated surfaces use, not just a shadow underneath. */
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--line-soft); padding: 22px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.arlab-card.interactive {
  cursor: pointer;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.arlab-card.interactive:hover { border-color: var(--line-hover); box-shadow: var(--shadow-pop); transform: translateY(-2px); }
.arlab-card.interactive:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arlab-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
.arlab-card-header-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.arlab-card-title { font-size: var(--text-lg); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--ink); margin: 0; line-height: var(--leading-tight); }
.arlab-card-description { font-size: var(--text-base); color: var(--ink-dim); line-height: var(--leading-normal); margin: 0; }
.arlab-card-body { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.arlab-card-footer { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 2px; }

/* ---- Badge --------------------------------------------------------- */
.arlab-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap; flex-shrink: 0;
  color: var(--ink-dim); background: transparent; border: 1px solid var(--line);
}
.arlab-badge.accent { color: var(--accent-deep); background: var(--accent-tint); border-color: transparent; }
.arlab-badge.warn { color: var(--warn); background: var(--warn-tint); border-color: transparent; }
.arlab-badge.crit { color: var(--crit); background: var(--crit-tint); border-color: transparent; }
.arlab-badge.live { color: var(--live); background: var(--live-tint); border-color: transparent; }

/* ---- Chip (removable tag, distinct from Badge: identity not status) ---- */
.arlab-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; color: var(--ink-dim); background: transparent;
  border: 1px solid var(--line); white-space: nowrap; cursor: default;
}
.arlab-chip.on, .arlab-chip[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent-line); }
.arlab-chip[role="button"] { cursor: pointer; }
.arlab-chip[role="button"]:hover { border-color: var(--ink-faint); }
.arlab-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.arlab-chip.empty { border-style: dashed; color: var(--ink-faint); background: transparent; }
.arlab-chip-remove {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--radius-pill);
  border: none; background: transparent; color: var(--ink-faint); cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.arlab-chip-remove:hover { background: var(--line-soft); color: var(--ink); }
.arlab-chip-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- Avatar -------------------------------------------------------- */
.arlab-avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); overflow: hidden;
  background: var(--accent-tint); color: var(--accent-deep); font-family: var(--font-sans); font-weight: 600;
  flex-shrink: 0; border: 1px solid var(--line);
}
.arlab-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Row: a typographic list item ---------------------------------
   Use for anything that was tempted to be its own bordered card —
   divide with a hairline, not a box. */
.arlab-list { display: flex; flex-direction: column; }
.arlab-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 2px; border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur) var(--ease);
}
.arlab-list .arlab-row:last-child { border-bottom: none; }
.arlab-row.interactive {
  cursor: pointer; margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--radius-xs);
}
.arlab-row.interactive:hover { background: var(--sunken); }
.arlab-row.interactive:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.arlab-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.arlab-row-title { font-size: var(--text-base); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arlab-row-meta { font-size: var(--text-sm); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arlab-row-trailing { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* ---- Field / Label / Input / Textarea / Select ---------------------- */
.arlab-field { display: flex; flex-direction: column; gap: 6px; }
.arlab-label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--ink-dim); }
.arlab-hint { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-faint); }
.arlab-hint.error { color: var(--crit); }

.arlab-input, .arlab-textarea, .arlab-select {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink); background: var(--raise); width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.arlab-input { height: 36px; }
.arlab-input::placeholder, .arlab-textarea::placeholder { color: var(--ink-inactive); }
.arlab-input:hover, .arlab-textarea:hover, .arlab-select:hover { border-color: var(--ink-faint); }
.arlab-input:focus-visible, .arlab-textarea:focus-visible, .arlab-select:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
.arlab-input.error, .arlab-textarea.error, .arlab-select.error { border-color: var(--crit); }
.arlab-input.error:focus-visible, .arlab-textarea.error:focus-visible, .arlab-select.error:focus-visible {
  border-color: var(--crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 16%, transparent);
}
.arlab-input:disabled, .arlab-textarea:disabled, .arlab-select:disabled { opacity: 0.55; cursor: not-allowed; }

.arlab-textarea { resize: vertical; min-height: 88px; line-height: var(--leading-normal); }

.arlab-select-wrap { position: relative; display: flex; width: 100%; }
.arlab-select { appearance: none; padding-right: 36px; cursor: pointer; }
.arlab-select-chevron { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-faint); }

/* ---- Checkbox -------------------------------------------------------- */
.arlab-checkbox { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink); cursor: pointer; user-select: none; }
.arlab-checkbox input { position: absolute; inset: 0; width: 20px; height: 20px; opacity: 0; margin: 0; cursor: pointer; }
.arlab-checkbox-box {
  width: 20px; height: 20px; border-radius: var(--radius-xs); border: 1.5px solid var(--line-hover); background: var(--raise);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.arlab-checkbox-box svg { opacity: 0; transform: scale(0.5); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.arlab-checkbox input:checked ~ .arlab-checkbox-box { background: var(--accent); border-color: var(--accent); }
.arlab-checkbox input:checked ~ .arlab-checkbox-box svg { opacity: 1; transform: scale(1); }
.arlab-checkbox input:focus-visible ~ .arlab-checkbox-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.arlab-checkbox input:disabled ~ .arlab-checkbox-box { opacity: 0.5; cursor: not-allowed; }

/* ---- Radio -------------------------------------------------------- */
.arlab-radio { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink); cursor: pointer; user-select: none; }
.arlab-radio input { position: absolute; inset: 0; width: 20px; height: 20px; opacity: 0; margin: 0; cursor: pointer; }
.arlab-radio-dot {
  width: 20px; height: 20px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-hover); background: var(--raise);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color var(--dur) var(--ease);
}
.arlab-radio-dot::after { content: ''; width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--accent); transform: scale(0); transition: transform var(--dur) var(--ease); }
.arlab-radio input:checked ~ .arlab-radio-dot { border-color: var(--accent); }
.arlab-radio input:checked ~ .arlab-radio-dot::after { transform: scale(1); }
.arlab-radio input:focus-visible ~ .arlab-radio-dot { outline: 2px solid var(--accent); outline-offset: 2px; }
.arlab-radio input:disabled ~ .arlab-radio-dot { opacity: 0.5; cursor: not-allowed; }

/* ---- Switch (boolean toggle) ---------------------------------------- */
.arlab-switch {
  position: relative; display: inline-flex; align-items: center; width: 44px; height: 25px; flex-shrink: 0;
  border-radius: var(--radius-pill); background: var(--sunken); border: 1px solid var(--line); cursor: pointer; padding: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.arlab-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.arlab-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: var(--radius-pill);
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform var(--dur) var(--ease);
}
.arlab-switch[aria-checked="true"] .arlab-switch-knob { transform: translateX(19px); }
.arlab-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arlab-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- SegmentedControl (tabs-as-buttons / pill toggle group) --------- */
.arlab-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-md); }
.arlab-segment {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink-dim);
  padding: 5px 12px; border-radius: var(--radius-sm); border: none; background: transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); white-space: nowrap;
}
.arlab-segment:hover { color: var(--ink); }
.arlab-segment[aria-selected="true"] { background: var(--raise); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 2px 6px -2px rgba(0,0,0,.18); }
.arlab-segment:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arlab-segment:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Dropzone (file upload) ------------------------------------------
   No dashed border — a dashed rectangle with a centered upload glyph is
   the single most reached-for "AI file upload" pattern there is. Instead:
   a solid panel with a tonal wash, an actually-elevated icon "target"
   (its own card-like surface with a shadow, not a lone floating glyph),
   and an explicit pill affordance so the control doesn't rely on "click
   anywhere and hope" to read as interactive. */
.arlab-dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--sunken), var(--raise) 130%);
  padding: 36px 24px; text-align: center; cursor: pointer; width: 100%;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.arlab-dropzone:hover { border-color: var(--line-hover); box-shadow: var(--shadow-card); }
.arlab-dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arlab-dropzone-target {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--radius-sm); background: var(--raise); border: 1px solid var(--line); color: var(--ink-dim);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.arlab-dropzone:hover .arlab-dropzone-target { transform: translateY(-2px); border-color: var(--accent-line); color: var(--accent-deep); }
.arlab-dropzone-title { font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.arlab-dropzone-hint { font-size: var(--text-xs); color: var(--ink-faint); }
.arlab-dropzone-browse {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700;
  color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line);
  padding: 7px 16px; border-radius: var(--radius-pill);
}
.arlab-dropzone.drag { border-color: var(--accent); background: var(--accent-tint); box-shadow: var(--shadow-glow); }
.arlab-dropzone.drag .arlab-dropzone-target { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08); }
.arlab-dropzone.drag .arlab-dropzone-browse { background: var(--accent); border-color: var(--accent); color: #fff; }
.arlab-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* ---- Navbar ---------------------------------------------------------
   Structural pattern only: a flex row of arbitrary slots. NavbarBrand is
   the one opinionated piece (logo + name lockup) — everything else is
   just children, so any element can be added around it. */
.arlab-navbar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-height: 64px;
  padding: 16px 28px; background: var(--raise); border-bottom: 1px solid var(--line);
}
.arlab-navbar-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.arlab-navbar-brand .arlab-navbar-logo { height: 26px; width: auto; display: block; }
/* A live "heartbeat" dot: the core stays lit while a ring pulses out from it. */
.arlab-navbar-dot { position: relative; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 0 8px var(--accent-line); flex-shrink: 0; }
.arlab-navbar-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--accent); animation: arlab-pulse 1.9s var(--ease) infinite;
}
@keyframes arlab-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .arlab-navbar-dot::after { animation: none; } }
.arlab-navbar-name { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--ink); white-space: nowrap; }
.arlab-navbar-spacer { flex: 1 1 auto; }

/* Primary nav links, directly in the bar — not boxed in a sunken
   container (that's SegmentedControl's job, for a small view toggle, not
   top-level app navigation). Quiet text, a neutral background shift for
   the active item, never a big colored pill — matches the anti-slop
   playbook's "navigation is typographic" rule. */
.arlab-navbar-links { display: flex; align-items: center; gap: 2px; }
.arlab-navbar-link {
  display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-faint); padding: 9px 12px; border-radius: var(--radius-xs); border: none; background: none;
  cursor: pointer; white-space: nowrap; transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.arlab-navbar-link:hover { color: var(--ink); background: var(--sunken); }
.arlab-navbar-link[aria-current="true"] { color: var(--ink); background: var(--sunken); }
.arlab-navbar-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- Dialog ---------------------------------------------------------- */
.arlab-dialog-backdrop {
  position: fixed; inset: 0; background: rgba(10, 8, 12, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100;
  animation: arlab-fade-in var(--dur-slow) var(--ease);
}
.arlab-dialog {
  position: relative; background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop), inset 0 1px 0 var(--line-soft); max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 26px; animation: arlab-dialog-in var(--dur-slow) var(--ease);
}
.arlab-dialog-title { font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--ink); margin: 0 0 6px; }
.arlab-dialog-description { font-size: var(--text-base); color: var(--ink-dim); line-height: var(--leading-normal); margin: 0 0 18px; }
.arlab-dialog-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@keyframes arlab-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes arlab-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .arlab-dialog-backdrop, .arlab-dialog { animation: none; } }

/* The system's one signature moment, replacing an earlier corner-bracket
   idea that needed a caption to be understood — a real design detail
   shouldn't need one. This doesn't: a gradient top edge, the exact
   magenta→orange pair the primary button already uses, on the two
   highest-emphasis surfaces (Dialog, CommandPalette) only. Immediately
   legible as "this is the important one," ties directly back to the one
   other place the gradient appears instead of inventing a new idiom. */
.arlab-accent-edge::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
}

/* ---- Toast ------------------------------------------------------------ */
.arlab-toast-viewport {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 110;
  display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; pointer-events: none;
}
.arlab-toast {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--ground);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500;
  padding: 10px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-pop);
  pointer-events: auto; animation: arlab-toast-in var(--dur-slow) var(--ease); white-space: nowrap;
}
@keyframes arlab-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .arlab-toast { animation: none; } }

/* ---- Skeleton --------------------------------------------------------- */
.arlab-skeleton {
  background: linear-gradient(90deg, var(--sunken) 25%, var(--line-soft) 50%, var(--sunken) 75%);
  background-size: 200% 100%; animation: arlab-skel 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm); flex-shrink: 0;
}
@keyframes arlab-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .arlab-skeleton { animation: none; } }

/* ===== second pass: patterns mined from arlab-studio + arlab-docs ======= */

/* ---- Popover / DropdownMenu / ComboboxPicker --------------------------
   ponytail: simple absolute-in-relative positioning, no collision/flip
   detection or portal. Fine while every menu opens with room below it;
   revisit with a floating-position engine if one ever needs to flip. */
.arlab-popover-wrap { position: relative; display: inline-flex; }
.arlab-popover-panel {
  position: absolute; top: calc(100% + 6px); z-index: 40; min-width: 200px;
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop); padding: 6px; animation: arlab-pop-in var(--dur) var(--ease);
}
.arlab-popover-panel.start { left: 0; }
.arlab-popover-panel.end { right: 0; }
@keyframes arlab-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .arlab-popover-panel { animation: none; } }

.arlab-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink); background: none; border: none;
  padding: 10px 12px; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.arlab-menu-item:hover, .arlab-menu-item.active { background: var(--sunken); }
.arlab-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.arlab-menu-item.danger { color: var(--crit); }
.arlab-menu-item.danger:hover { background: color-mix(in srgb, var(--crit) 8%, transparent); }
.arlab-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
.arlab-menu-sep { height: 1px; background: var(--line-soft); margin: 6px 4px; }

.arlab-picker { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.arlab-picker-list { display: flex; flex-direction: column; max-height: 280px; overflow-y: auto; gap: 1px; }
.arlab-picker-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink); background: none; border: none;
  padding: 11px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--dur) var(--ease);
}
.arlab-picker-item:hover, .arlab-picker-item.active { background: var(--sunken); }
.arlab-picker-item:disabled { opacity: 0.45; cursor: not-allowed; }
.arlab-picker-item-meta { font-size: var(--text-xs); color: var(--ink-faint); }
.arlab-picker-empty { padding: 24px 12px; text-align: center; color: var(--ink-faint); font-size: var(--text-sm); }

/* ---- CommandPalette ----------------------------------------------------- */
.arlab-cmdk-backdrop {
  position: fixed; inset: 0; background: rgba(10, 8, 12, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh 24px 24px; z-index: 100;
  animation: arlab-fade-in var(--dur-slow) var(--ease);
}
.arlab-cmdk {
  position: relative; width: 100%; max-width: 560px; background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop), inset 0 1px 0 var(--line-soft); overflow: hidden; animation: arlab-dialog-in var(--dur-slow) var(--ease);
}
.arlab-cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 4px 16px; border-bottom: 1px solid var(--line); }
.arlab-cmdk-input-row svg { color: var(--ink-faint); flex-shrink: 0; }
.arlab-cmdk-input { flex: 1; border: none; background: none; outline: none; font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 500; color: var(--ink); height: 60px; }
.arlab-cmdk-input::placeholder { color: var(--ink-inactive); }
.arlab-cmdk-kbd { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); border: 1px solid var(--line); background: var(--sunken); padding: 2px 6px; border-radius: var(--radius-xs); flex-shrink: 0; }
.arlab-cmdk-list { max-height: 360px; overflow-y: auto; padding: 6px; }
.arlab-cmdk-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; padding: 12px; border-radius: var(--radius-sm); cursor: pointer; }
.arlab-cmdk-row:hover, .arlab-cmdk-row.active { background: var(--sunken); }
.arlab-cmdk-row-type { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 2px 6px; flex-shrink: 0; }
.arlab-cmdk-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.arlab-cmdk-row-title { font-size: var(--text-base); color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arlab-cmdk-row-summary { font-size: var(--text-xs); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arlab-cmdk-empty { padding: 40px 20px; text-align: center; color: var(--ink-faint); font-size: var(--text-sm); }

/* ---- NavTree: collapsible, nested, route-aware ------------------------- */
.arlab-navtree { display: flex; flex-direction: column; gap: 1px; font-family: var(--font-sans); font-size: var(--text-base); }
.arlab-navtree-node { display: flex; flex-direction: column; }
.arlab-navtree-row { display: flex; align-items: center; gap: 6px; }
.arlab-navtree-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0;
  border: none; background: none; color: var(--ink-faint); cursor: pointer; border-radius: 4px; padding: 0;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.arlab-navtree-toggle.open { transform: rotate(90deg); }
.arlab-navtree-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.arlab-navtree-link {
  flex: 1; min-width: 0; display: block; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--ink-dim);
  text-decoration: none; border-left: 2px solid transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.arlab-navtree-link:hover { color: var(--ink); background: var(--sunken); }
.arlab-navtree-link.active { color: var(--accent-deep); background: var(--accent-tint); border-left-color: var(--accent); font-weight: 500; }
.arlab-navtree-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.arlab-navtree-children { display: flex; flex-direction: column; gap: 1px; margin-left: 20px; padding-left: 8px; border-left: 1px solid var(--line-soft); }

/* ---- Toc (scrollspy) ---------------------------------------------------- */
.arlab-toc { display: flex; flex-direction: column; border-left: 1px solid var(--line-soft); }
.arlab-toc-link {
  padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-faint);
  text-decoration: none; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.arlab-toc-link:hover { color: var(--ink); }
.arlab-toc-link.active { color: var(--accent-deep); border-left-color: var(--accent); }
.arlab-toc-link.depth-3 { padding-left: 26px; }

/* ---- Breadcrumbs ---------------------------------------------------------
   Explicit flex-direction: row, not left to the flex shorthand default —
   a consumer app's own `nav { flex-direction: column }` (a sidebar reset,
   say) would otherwise win the cascade on that one property and stack
   this vertically, since nothing here would be contesting it. Learned
   this the hard way in the showcase page itself. */
.arlab-breadcrumbs {
  display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-faint);
}
.arlab-breadcrumbs a {
  color: var(--ink-faint); text-decoration: none; padding: 3px 2px; border-radius: var(--radius-xs);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.arlab-breadcrumbs a:hover { color: var(--ink); background: var(--sunken); }
.arlab-breadcrumbs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.arlab-breadcrumbs .current { color: var(--ink); font-weight: 600; padding: 3px 2px; }
.arlab-breadcrumbs .sep { display: inline-flex; color: var(--ink-inactive); flex-shrink: 0; margin: 0 1px; }

/* ---- LoadingBar: indeterminate top-of-page progress ------------------- */
.arlab-loadingbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; overflow: hidden; background: transparent; }
.arlab-loadingbar-fill {
  position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  animation: arlab-loadingbar-slide 1.4s var(--ease) infinite;
}
@keyframes arlab-loadingbar-slide { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .arlab-loadingbar-fill { animation-duration: 2.4s; } }

/* ---- TagInput ------------------------------------------------------------ */
.arlab-taginput {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; background: var(--sunken);
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 7px 8px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.arlab-taginput:focus-within { border-color: var(--accent); background: var(--raise); box-shadow: 0 0 0 3px var(--accent-soft); }
.arlab-taginput input { flex: 1; min-width: 80px; border: none; background: none; outline: none; font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink); padding: 3px; }
.arlab-taginput input::placeholder { color: var(--ink-inactive); }

/* ---- Collapsible: CSS-only grid-rows animation, no JS height measuring - */
.arlab-collapsible-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none;
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: 500; color: var(--ink); cursor: pointer; padding: 4px 0;
}
.arlab-collapsible-trigger svg { transition: transform var(--dur) var(--ease); flex-shrink: 0; color: var(--ink-faint); }
.arlab-collapsible-trigger[aria-expanded="true"] svg { transform: rotate(90deg); }
.arlab-collapsible-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.arlab-collapsible-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease); }
.arlab-collapsible-body.open { grid-template-rows: 1fr; }
.arlab-collapsible-body > div { overflow: hidden; }
.arlab-collapsible-body-inner { padding-top: 10px; }
@media (prefers-reduced-motion: reduce) { .arlab-collapsible-body { transition: none; } }

/* ---- Tooltip: CSS-only, no JS positioning ------------------------------- */
.arlab-tooltip-wrap { position: relative; display: inline-flex; }
.arlab-tooltip-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(2px);
  background: var(--ink); color: var(--ground); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 60;
  opacity: 0; transition: opacity var(--dur) var(--ease) var(--dur), transform var(--dur) var(--ease) var(--dur);
}
.arlab-tooltip-wrap:hover .arlab-tooltip-bubble, .arlab-tooltip-wrap:focus-within .arlab-tooltip-bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .arlab-tooltip-bubble { transition: opacity var(--dur) var(--ease); } }

/* ---- Card variants: colored rail, hover-reveal accent ------------------- */
.arlab-card.rail { position: relative; padding-left: 26px; }
.arlab-card.rail::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--card-rail, var(--accent)); border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.arlab-card.accent-hover { position: relative; overflow: hidden; }
.arlab-card.accent-hover::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--card-rail, var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease);
}
.arlab-card.accent-hover:hover::after, .arlab-card.accent-hover:focus-within::after { transform: scaleX(1); }


/* ---- SearchButton: an input-shaped button that opens something else ----- */
.arlab-search-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 12px; height: 34px;
  color: var(--ink-faint); font-family: var(--font-sans); font-size: var(--text-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.arlab-search-btn:hover { border-color: var(--ink-faint); }
.arlab-search-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.arlab-search-btn span.placeholder { flex: 1; }
.arlab-search-btn svg { flex-shrink: 0; }

/* ---- LegendDot ------------------------------------------------------------ */
.arlab-legend-dot { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--ink-dim); }
.arlab-legend-dot .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex-shrink: 0; }

/* ---- Kicker: a restrained eyebrow label. Use rarely — for a genuine
   section eyebrow or a breadcrumb-like trail, NOT as the default label
   style (that's what .arlab-label is for). Sentence case, not uppercase:
   arlab-docs' mono-uppercase-everywhere convention is exactly what rule 2
   of the anti-slop playbook bans. */

/* ---- Timestamp ------------------------------------------------------------ */
.arlab-timestamp { font-size: var(--text-sm); color: var(--ink-faint); }

/* ---- ScoreBar: a precise fill meter, not an icon+number stat tile --------- */
.arlab-scorebar-wrap { display: inline-flex; align-items: center; gap: 8px; }
.arlab-scorebar { position: relative; width: 64px; height: 4px; border-radius: var(--radius-pill); background: var(--sunken); overflow: hidden; flex-shrink: 0; }
.arlab-scorebar-fill { position: absolute; inset: 0; width: 0; border-radius: var(--radius-pill); background: var(--accent); transition: width var(--dur-slow) var(--ease); }
.arlab-scorebar-fill.live { background: var(--live); }
.arlab-scorebar-fill.warn { background: var(--warn); }
.arlab-scorebar-fill.crit { background: var(--crit); }
.arlab-scorebar-value { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); flex-shrink: 0; }

/* ---- Kanban: a status board (triage queues, pipeline stages, ...) -------- */
/* Fills the parent's height (a flex-1/min-h-0 ancestor) — columns scroll
   independently instead of the whole page growing with the busiest column. */
.arlab-kanban { display: flex; align-items: stretch; gap: 20px; height: 100%; overflow-x: auto; padding-bottom: 8px; }
.arlab-kanban-col { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; }
/* Collapsed: shrink to just the header instead of leaving a tall empty box
   (stretch would otherwise still give it the full board height). */
.arlab-kanban-col.collapsed { align-self: flex-start; }
.arlab-kanban-col-header {
  display: flex; align-items: center; justify-content: space-between; width: 100%; flex-shrink: 0;
  padding: 8px 2px; margin-bottom: 4px; background: none; border: none; cursor: pointer;
  border-radius: var(--radius-xs); transition: background var(--dur) var(--ease);
}
.arlab-kanban-col-header:hover { background: var(--sunken); }
.arlab-kanban-col-header:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.arlab-kanban-col-title-group { display: flex; align-items: center; gap: 6px; min-width: 0; }
.arlab-kanban-col-chevron { color: var(--ink-faint); flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.arlab-kanban-col.collapsed .arlab-kanban-col-chevron { transform: rotate(-90deg); }
.arlab-kanban-col-title { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; color: var(--ink); margin: 0; text-align: left; }
.arlab-kanban-col-count { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); flex-shrink: 0; }
.arlab-kanban-col-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 4px; }

/* ---- Steps / stepper ------------------------------------------------------ */
.arlab-steps { display: flex; flex-direction: column; }
.arlab-step { display: flex; gap: 14px; padding-bottom: 20px; position: relative; }
.arlab-step:last-child { padding-bottom: 0; }
.arlab-step::before {
  content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--line);
}
.arlab-step:last-child::before { display: none; }
.arlab-step-index {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: var(--radius-pill); background: var(--sunken); border: 1px solid var(--line); color: var(--ink-dim);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; z-index: 1;
}
.arlab-step.done .arlab-step-index { background: var(--accent); border-color: var(--accent); color: #fff; }
.arlab-step.current .arlab-step-index { border-color: var(--accent); color: var(--accent-deep); }
.arlab-step-body { padding-top: 3px; }
.arlab-step-title { font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.arlab-step-description { font-size: var(--text-sm); color: var(--ink-faint); margin-top: 2px; }

.arlab-icon-tile { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 13px; color: #fff; background: linear-gradient(150deg, var(--accent), var(--accent-deep)); box-shadow: 0 6px 18px -6px var(--accent-line); }
.arlab-icon-tile.sm { width: 38px; height: 38px; border-radius: 11px; }
.arlab-icon-tile.lg { width: 56px; height: 56px; border-radius: 15px; }
.arlab-icon-tile.soft { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); box-shadow: none; }
.arlab-icon-tile.plain { background: var(--sunken); color: var(--ink-dim); border: 1px solid var(--line); box-shadow: none; }



/* ===== ARLAB UI 1.0 layout primitives ====================================
   The grammar of an application screen: split view and panes, the detail header band with its
   property row and tab strip, panels with rows and facts, timeline and step lists, the dashboard
   grid, the reading page and the gate. Tokens only; both themes come from the tokens. */

/* ----- split view and panes ----- */
.arlab-split { flex: 1; min-height: 0; min-width: 0; display: flex; }
.arlab-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.arlab-pane.list { width: var(--list-w); flex-shrink: 0; border-right: 1px solid var(--line); background: var(--ground); }
.arlab-pane.detail { flex: 1; background: var(--raise); container: arlab-pane / inline-size; }
.arlab-pane-tools { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line-soft); }
.arlab-pane-scroll { overflow: auto; flex: 1; min-height: 0; padding-bottom: 20px; }
.arlab-list-group { padding: 16px 16px 6px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.04em; text-transform: uppercase; }
.arlab-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); display: inline-block; flex-shrink: 0; background: var(--ink-faint); }
.arlab-item {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 1px 12px; align-items: center;
  width: calc(100% - 12px); margin: 0 6px; padding: 10px 16px; border: 0; border-left: 2px solid transparent; border-radius: var(--radius-sm);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.arlab-item:hover { background: var(--sunken); }
.arlab-item.on { background: var(--raise); border-left-color: var(--accent); box-shadow: var(--shadow); }
.arlab-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.arlab-item-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--ink-faint); }
.arlab-item-title { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.arlab-item-sub { grid-column: 2; color: var(--ink-faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arlab-item-trailing { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.arlab-item-skeleton { display: grid; gap: 8px; padding: 12px 18px; }
.arlab-list-empty { padding: 24px 18px; color: var(--ink-faint); font-size: var(--text-sm); }

/* ----- detail header band ----- */
.arlab-dhead {
  padding: 26px 36px 0; border-bottom: 1px solid var(--line); background: var(--ground);
  box-shadow: 0 8px 18px -16px rgba(0, 0, 0, 0.55); position: relative; z-index: 2; flex-shrink: 0;
}
.arlab-dhead-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.arlab-dhead-title { margin: 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arlab-dhead-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.arlab-dhead-tabs { padding: 0 0 18px; }
.arlab-dhead-tabs .arlab-tabstrip { margin-top: 20px; }
.arlab-props { display: flex; gap: 6px 22px; margin-top: 12px; flex-wrap: wrap; align-items: baseline; }
.arlab-prop { display: flex; gap: 7px; align-items: baseline; min-width: 0; }
.arlab-prop-k { font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; }
.arlab-prop-v { font-size: var(--text-sm); color: var(--ink-dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.arlab-prop-v.mono { font-family: var(--font-mono); font-size: 12.5px; }
.arlab-tabstrip { display: flex; width: 100%; gap: 2px; background: var(--sunken); padding: 3px; border-radius: 9px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.arlab-tabstrip::-webkit-scrollbar { display: none; }
.arlab-tabstrip button {
  flex: 1; text-align: center; padding: 8px 10px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink-dim);
  border: 0; border-radius: 7px; background: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.arlab-tabstrip button:hover { color: var(--ink); }
.arlab-tabstrip button.on { background: var(--raise); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.18); }
.arlab-tabstrip button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.arlab-dbody { padding: 28px 36px 56px; overflow: auto; flex: 1; min-height: 0; container: arlab-pane / inline-size; }
/* These columns live inside a pane, not inside the window: a 1440 screen leaves a detail pane of
   about 816px once the sidebar and the list have taken theirs, and a demo frame can be narrower
   still. Sized against the viewport, the inspector kept its 320px while the main column fell to a
   few hundred, and step text wrapped one word per line. So the split view is a container, and
   these ask it how much room there actually is. */
.arlab-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
/* A container query is evaluated against the container's CONTENT box, so a detail body 816px wide
   with 36px of padding each side answers 744px, not 816. These numbers are measured in the running
   apps: 744 is what a 1440 screen leaves once the sidebar and the list have taken theirs. */
@container arlab-pane (min-width: 700px) { .arlab-cols { grid-template-columns: minmax(0, 1fr) 280px; } }
@container arlab-pane (min-width: 860px) { .arlab-cols { grid-template-columns: minmax(0, 1fr) 320px; } }
@container arlab-pane (min-width: 660px) {
  .arlab-cols.equal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .arlab-cols.run { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}

.arlab-stack > * + * { margin-top: 14px; }

/* ----- panel and its contents ----- */
.arlab-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--raise); box-shadow: var(--shadow); min-width: 0; }
.arlab-panel.quiet { box-shadow: none; }
.arlab-panel.gate { border-color: var(--accent-line); }
.arlab-panel-title {
  margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.arlab-panel.gate .arlab-panel-title { color: var(--accent-deep); border-bottom-color: var(--accent-line); }
.arlab-panel-trailing { text-transform: none; letter-spacing: 0; font-weight: 400; display: inline-flex; align-items: center; gap: 8px; }
.arlab-panel-body { padding: 16px; }
.arlab-rows { display: flex; flex-direction: column; }
.arlab-row-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line-soft); font-size: var(--text-sm); min-width: 0; }
.arlab-row-item:first-child { border-top: 0; }
.arlab-row-item.link { cursor: pointer; }
.arlab-row-item.link:hover { background: var(--sunken); }
.arlab-row-item.link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* `text-overflow` needs a block container with inline content: on an inline-flex box it is
   ignored, and a row that was too long got cut mid-word with no ellipsis at all. Block, with the
   children left inline, so a long row ends in a proper ellipsis. */
.arlab-row-item-main { flex: 1 1 auto; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arlab-row-item-main > * { vertical-align: middle; }
.arlab-row-item-right { display: inline-flex; gap: 8px; align-items: center; flex-shrink: 0; }
.arlab-facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; padding: 14px 16px; font-size: var(--text-sm); margin: 0; }
.arlab-facts-row { display: contents; }
.arlab-facts dt { color: var(--ink-faint); }
.arlab-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.arlab-empty { padding: 22px 16px; color: var(--ink-faint); font-size: var(--text-sm); }
.arlab-empty p { margin: 0 0 10px; }
.arlab-empty p:last-child { margin-bottom: 0; }
.arlab-timeline { padding: 6px 16px 12px; }
.arlab-tl { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; font-size: var(--text-sm); }
.arlab-tl-dot { width: 10px; height: 10px; border-radius: var(--radius-pill); border: 2px solid var(--line); background: var(--raise); }
.arlab-tl-dot.ok { background: var(--live); border-color: var(--live); }
.arlab-tl-dot.now { border-color: var(--accent); background: var(--accent-tint); }
.arlab-tl-dot.failed { background: var(--crit); border-color: var(--crit); }
.arlab-tl-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.arlab-steplist { display: flex; flex-direction: column; }
.arlab-steprow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 16px; border-top: 1px solid var(--line-soft); }
.arlab-steprow:first-child { border-top: 0; }
.arlab-steprow.link { cursor: pointer; }
.arlab-steprow.link:hover { background: var(--sunken); }
.arlab-steprow.link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.arlab-steprow-n { width: 26px; height: 26px; border-radius: var(--radius-pill); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.arlab-steprow-n.marked { border-color: var(--accent-line); color: var(--accent-deep); background: var(--accent-tint); }
.arlab-steprow-text { min-width: 0; display: flex; flex-direction: column; }
.arlab-steprow-name { font-weight: 500; }
.arlab-steprow-sub { color: var(--ink-faint); font-size: var(--text-xs); }
.arlab-steprow-trailing { display: inline-flex; gap: 6px; align-items: center; }

/* ----- dashboard ----- */
.arlab-dash { padding: 28px 36px 48px; overflow: auto; flex: 1; min-height: 0; container: arlab-pane / inline-size; }
.arlab-dash-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.arlab-dash-title { margin: 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
.arlab-dash-sub { color: var(--ink-dim); margin-top: 4px; }
.arlab-dash-actions { display: flex; gap: 8px; }
.arlab-dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: start; }
.arlab-panel.span-4 { grid-column: span 4; }
.arlab-panel.span-5 { grid-column: span 5; }
.arlab-panel.span-7 { grid-column: span 7; }
.arlab-panel.span-8 { grid-column: span 8; }
.arlab-panel.span-12 { grid-column: span 12; }
@media (max-width: 1100px) { .arlab-panel.span-4, .arlab-panel.span-5, .arlab-panel.span-7, .arlab-panel.span-8 { grid-column: span 12; } }
.arlab-att { display: flex; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--line-soft); align-items: flex-start; }
.arlab-att:first-child { border-top: 0; }
.arlab-att-icon { width: 28px; height: 28px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0; background: var(--warn-tint); color: var(--warn); }
.arlab-att-icon.accent { background: var(--accent-tint); color: var(--accent-deep); }
.arlab-att-icon svg { width: 14px; height: 14px; }
.arlab-att-text { min-width: 0; flex: 1; }
.arlab-att-text b { font-weight: 500; }
.arlab-att-sub { display: block; margin-top: 2px; color: var(--ink-faint); font-size: var(--text-xs); }
.arlab-att-action { margin-left: auto; flex-shrink: 0; }
.arlab-act { display: flex; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line-soft); font-size: var(--text-sm); align-items: baseline; }
.arlab-act:first-child { border-top: 0; }
.arlab-act-time { color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px; flex-shrink: 0; width: 56px; white-space: nowrap; }
.arlab-act-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- reading page ----- */
.arlab-read { padding: 32px 36px 48px; overflow: auto; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@container arlab-pane (min-width: 840px) { .arlab-read.with-rail { grid-template-columns: minmax(0, 1fr) 300px; } }
@container arlab-pane (min-width: 1060px) { .arlab-read.with-rail { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (max-width: 1100px) { .arlab-read.with-rail { grid-template-columns: minmax(0, 1fr); } }
.arlab-read.narrow .arlab-read-main { max-width: 46rem; }
.arlab-read-main { min-width: 0; }
.arlab-read-title { margin: 0 0 6px; font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
.arlab-read-sub { color: var(--ink-dim); margin: 0 0 18px; max-width: 62ch; }
.arlab-read-rail { min-width: 0; }

/* ----- gate: splash and sign-in ----- */
.arlab-splash { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 14px; }
.arlab-splash-text { color: var(--ink-faint); font-size: var(--text-xs); }
.arlab-gate { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.arlab-gate-card { width: 100%; max-width: 430px; background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow); }
.arlab-gate-title { font-size: var(--text-xl); margin: 20px 0 8px; letter-spacing: var(--tracking-tight); font-weight: 600; }
.arlab-gate-text { color: var(--ink-dim); margin: 0 0 18px; line-height: var(--leading-relaxed); }
.arlab-gate-fine { color: var(--ink-faint); font-size: var(--text-xs); margin: 14px 0 0; }

/* ----- copy block and readable document ----- */
.arlab-copyblock { position: relative; }
.arlab-copyblock .arlab-btn { position: absolute; top: 6px; right: 6px; }
.arlab-code { font-family: var(--font-mono); font-size: 12px; background: var(--sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; color: var(--ink); }
.arlab-readable { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: var(--text-sm); }
.arlab-readable.top { margin: 4px 0; }
.arlab-readable-row { display: contents; }
.arlab-readable dt { color: var(--ink-faint); font-weight: 500; }
.arlab-readable dd { margin: 0; min-width: 0; }
.arlab-readable-list { margin: 2px 0; padding-left: 18px; }
.arlab-readable-list li { margin: 4px 0; }
.arlab-readable-val { white-space: pre-wrap; overflow-wrap: anywhere; }
.arlab-readable-none { color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .arlab-item, .arlab-tabstrip button { transition: none; }
}
/* ===== ARLAB UI 1.0 shells ===============================================
   Shell A (sidebar + top bar + workspace) and Shell B (sticky top bar + page).
   Frame dimensions come from --side-w / --list-w / --top-h. Tokens only. */

/* shared: brand, account */
.arlab-shell-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: none; border: 0; color: var(--ink); font: inherit; cursor: default; text-align: left; border-radius: var(--radius-sm); }
button.arlab-shell-brand { cursor: pointer; }
button.arlab-shell-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arlab-shell-brand svg { height: 20px; width: auto; display: block; color: var(--ink); }
.arlab-shell-brand b { font-weight: 600; font-size: var(--text-base); white-space: nowrap; }
.arlab-shell-pulse { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 0 0 0 var(--accent-line); animation: arlab-shell-pulse 2.4s infinite; flex-shrink: 0; }
@keyframes arlab-shell-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-line); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .arlab-shell-pulse { animation: none; } }
.arlab-shell-account { display: flex; align-items: center; gap: 10px; min-width: 0; background: none; border: 0; padding: 2px; cursor: pointer; color: inherit; text-align: left; font: inherit; border-radius: var(--radius-pill); }
.arlab-shell-account:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arlab-shell-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; font-size: var(--text-sm); }
.arlab-shell-who span, .arlab-shell-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arlab-shell-who small { color: var(--ink-faint); font-size: 11.5px; }

/* ---- Shell A: sidebar ---- */
.arlab-app { display: grid; grid-template-columns: var(--side-w) 1fr; height: 100vh; background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-base); }
.arlab-side { background: var(--sunken); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 12px 14px; min-height: 0; }
.arlab-side .arlab-shell-brand { padding-bottom: 22px; }
.arlab-side-group { font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding: 16px 12px 6px; }
.arlab-side-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink-dim); font: 500 14px var(--font-sans); background: none; border: 0; cursor: pointer; min-width: 0; }
.arlab-side-item:hover { background: var(--sunken-2); color: var(--ink); }
.arlab-side-item.on { background: var(--raise); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.arlab-side-item.on .arlab-side-icon { color: var(--accent); }
.arlab-side-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.arlab-side-icon { display: inline-flex; flex-shrink: 0; opacity: .9; }
.arlab-side-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arlab-side-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); }
.arlab-side-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); flex-shrink: 0; display: inline-block; }
.arlab-side-recent .arlab-side-item { font-weight: 400; font-size: var(--text-sm); padding: 6px 12px; }
.arlab-side-grow { flex: 1; min-height: 0; overflow: auto; }
.arlab-side-me { display: flex; align-items: center; gap: 8px; padding: 12px 8px 4px; border-top: 1px solid var(--line); margin-top: 8px; }
.arlab-side-me .arlab-shell-account { flex: 1; }
.arlab-main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.arlab-topbar { height: var(--top-h); display: flex; align-items: center; gap: 14px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--ground); flex-shrink: 0; }
.arlab-crumbs { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: var(--text-sm); min-width: 0; flex: 1; }
.arlab-crumbs a, .arlab-crumbs button { color: var(--ink-faint); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.arlab-crumbs a:hover, .arlab-crumbs button:hover { color: var(--ink); }
.arlab-crumbs b { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arlab-topbar .arlab-search-btn { margin-left: auto; width: 220px; flex: 0 0 auto; }
.arlab-crumbs + .arlab-search-btn { margin-left: 0; }
.arlab-body { container: arlab-pane / inline-size; flex: 1; min-height: 0; display: flex; }
@media (max-width: 1000px) {
  .arlab-app { grid-template-columns: 64px 1fr; }
  .arlab-side { padding: 14px 8px 10px; }
  .arlab-side .arlab-shell-brand b, .arlab-side-label, .arlab-side-count, .arlab-side-group, .arlab-side-recent, .arlab-shell-who { display: none; }
  .arlab-side-item { justify-content: center; padding: 10px 0; }
  .arlab-side-me { justify-content: center; flex-direction: column; }
}
@media (max-width: 900px) {
  .arlab-topbar .arlab-search-btn, .arlab-topnav .arlab-search-btn { width: 34px; padding: 0 8px; justify-content: center; }
  .arlab-topbar .arlab-search-btn .placeholder, .arlab-topbar .arlab-search-btn .arlab-cmdk-kbd,
  .arlab-topnav .arlab-search-btn .placeholder, .arlab-topnav .arlab-search-btn .arlab-cmdk-kbd { display: none; }
}

/* ---- Shell B: top navigation ---- */
html { overscroll-behavior-y: none; }
.arlab-topnav-app { min-height: 100vh; background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-base); }
.arlab-topnav { position: sticky; top: 0; z-index: 40; height: var(--top-h); display: flex; align-items: center; gap: 14px; padding: 0 24px; background: var(--raise); border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.arlab-topnav-links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.arlab-topnav-link { padding: 7px 12px; border-radius: var(--radius-sm); color: var(--ink-dim); font: 500 14px var(--font-sans); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.arlab-topnav-link:hover { color: var(--ink); background: var(--sunken); }
.arlab-topnav-link.on { color: var(--ink); background: var(--sunken); }
.arlab-topnav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.arlab-topnav-spacer { flex: 1 1 auto; }
.arlab-topnav .arlab-search-btn { width: 220px; flex: 0 0 auto; }
.arlab-topnav .arlab-shell-account.compact { gap: 8px; }
/* The page, and the sidebar shell's workspace, are the containers the layout primitives inside
   them measure themselves against. A container query asks an ancestor, never the element itself. */
.arlab-topnav-page { min-height: calc(100vh - var(--top-h)); container: arlab-pane / inline-size; }

/* On a phone the top bar wants more room than it has: the brand, the links, the search, the
   account and the theme toggle on one line pushed the page sideways. It wraps onto a second line,
   the search takes the width it can, and the page padding tightens. */
@media (max-width: 620px) {
  .arlab-topnav { height: auto; min-height: var(--top-h); flex-wrap: wrap; padding: 10px 16px; row-gap: 8px; }
  .arlab-topnav-spacer { flex-basis: 100%; height: 0; }
  .arlab-topnav-links { margin-left: 0; }
  .arlab-topnav .arlab-search-btn { width: auto; flex: 1 1 auto; min-width: 0; }
  .arlab-shell-account .arlab-shell-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 560px) {
  .arlab-read, .arlab-dash { padding: 24px 16px 56px; }
}