/* Optio design system: tokens + components + responsive. Generated by docs/design-system/src/build.py; do not edit. */
:root, [data-theme="light"] {
  /* Shell ground */
  --bg-solid: #dfe3ea;
  --bg: linear-gradient(180deg, #e9edf3 0%, #d6dde8 45%, #cfd6e3 100%);
  --bg-glow: radial-gradient(900px 600px at 15% 0%, rgba(255,255,255,.75), transparent 60%), radial-gradient(700px 500px at 100% 20%, rgba(120,150,210,.35), transparent 60%), radial-gradient(800px 600px at 40% 110%, rgba(255,200,150,.28), transparent 60%);

  /* One ink, one neutral triplet, one glass triplet, one shadow triplet */
  --ink: #1d1d1f;
  --mute-rgb: 60,60,67;
  --glass-rgb: 255,255,255;
  --rim-rgb: 255,255,255;           /* the highlight on a glass edge */
  --shadow-rgb: 30,40,70;
  --on-accent: #fff;

  /* Accents */
  --blue: #0058b0;
  --indigo: #4f4dd6;
  --green: #1f7a34;
  --orange: #b02e00;
  --amber: #e07800;
  --amber-ink: #9a5300;             /* amber as text: the fill is too light to read */
  --blue-tint: rgba(0,113,227,.12);
  --indigo-tint: rgba(94,92,230,.12);
  --green-tint: rgba(52,199,89,.16);
  --orange-tint: rgba(201,52,0,.12);
  --amber-tint: rgba(255,149,0,.16);

  /* Semantic */
  --danger: #a2191f;
  --danger-tint: rgba(218,30,40,.11);
  --find: #0043ce;
  --find-tint: rgba(0,67,206,.10);
  --ok: #1a6b2d;
  --tier-gold: #a86b00;
  --notice: #c98a00;
  --badge: #ff3b30;

  /* Audience editor section colours */
  --c-profile: #0071e3;
  --c-activity: #5e5ce6;
  --c-purchases: #248a3d;
  --c-products: #0a84a0;
  --c-predictions: #a24bd6;
  --c-reach: #d1366b;
  --c-lists: #6e6e73;

  /* People avatars (initials discs); index = stable hash of the person id */
  --av-1: #ff9500; --av-2: #5e5ce6; --av-3: #248a3d; --av-4: #0071e3;
  --av-5: #af52de; --av-6: #c93400; --av-7: #30b0c7;

  /* Agent thread */
  --bubble: #e6e7f7;
  --bubble-line: rgba(94,92,230,.14);
  --chip: rgba(255,255,255,.82);
  --toast: rgba(29,29,31,.92);
  --toast-action: #8ec5ff;

  /* Customer devices: what the recipient sees, so these never follow the app theme */
  --device-frame: #1d1d1f;
  --device-paper: #fff;
  --device-ink: #1d1d1f;
  --device-text: #2a2a2e;
  --device-muted: rgba(60,60,67,.55);
  --device-line: rgba(60,60,67,.12);
  --device-bubble: #e9e9eb;
  --device-head: #f6f6f8;
  --email-canvas: #eef1f5;
  --email-soft: #f3f5f8;
  --email-footer: #8a8f98;
  --placeholder-a: #e9ecf1;
  --placeholder-b: #e1e5eb;
  color-scheme: light;
  /* Map canvas (the architecture-map prototype's atlas colours) */
  --map-ground: #edf2f7;
  --map-card: #fff;
  --map-muted: #465970;
  --map-border: #b8c8d8;
  --map-featured: #0753a2;
  --map-on-featured: #fff;          /* text on the system card */
  --map-accent-ink: #0753a2;        /* accent text on a map card (ports) */
  /* Start map (specs/start §3): the approved prototype's colours (prototypes/alexandria-start), the users' amber, teal and violet */
  --start-dot: #c9d5e2;
  --start-shell: #f6f8fb;
  --start-shell-line: #dbe3ec;
  --start-accent: #0753a2;
  --start-accent-tint: rgba(7,83,162,.10);
  --start-what: #b45f06;
  --start-what-tint: rgba(224,120,0,.14);
  --start-how: #1f6f8b;
  --start-how-tint: rgba(10,132,160,.14);
  --start-agent: #4f4dd6;
  --start-agent-tint: rgba(94,92,230,.14);
  --start-lit: #1f7a34;
  --start-lit-tint: rgba(52,199,89,.16);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg-solid: #14171f;
  --bg: linear-gradient(180deg, #1c2029 0%, #151923 45%, #10131b 100%);
  --bg-glow: radial-gradient(900px 600px at 15% 0%, rgba(90,110,160,.28), transparent 60%), radial-gradient(700px 500px at 100% 20%, rgba(94,92,230,.22), transparent 60%), radial-gradient(800px 600px at 40% 110%, rgba(255,150,80,.10), transparent 60%);
  --ink: #f5f5f7;
  --mute-rgb: 235,235,245;
  --glass-rgb: 44,51,68;            /* dark glass: surfaces stay dark, text stays light */
  --rim-rgb: 120,130,160;           /* a light rim keeps glass edges visible */
  --on-accent: #0b1220;             /* accents are light in dark mode, so their labels are dark */
  --shadow-rgb: 0,0,0;
  --blue: #70b4ff;
  --indigo: #b1aeff;
  --green: #4fd66f;
  --orange: #ff9a72;
  --amber: #ffb340;
  --amber-ink: #ffbe5c;
  --blue-tint: rgba(61,155,255,.14);
  --indigo-tint: rgba(142,139,255,.14);
  --green-tint: rgba(79,214,111,.14);
  --orange-tint: rgba(255,138,91,.14);
  --amber-tint: rgba(255,179,64,.14);
  --danger: #ff8f8f;
  --danger-tint: rgba(255,123,123,.14);
  --find: #8ab9ff;
  --find-tint: rgba(138,185,255,.14);
  --ok: #5fd37f;
  --tier-gold: #f0b440;
  --notice: #f0c040;
  --c-profile: #3d9bff;
  --c-activity: #8e8bff;
  --c-purchases: #4fd66f;
  --c-products: #4cc9e0;
  --c-predictions: #c98bff;
  --c-reach: #ff7aa2;
  --c-lists: #aeaeb2;
  --bubble: #2b2d45;
  --bubble-line: rgba(160,158,255,.18);
  --chip: rgba(48,53,66,.9);
  color-scheme: dark;
  /* Map canvas (the architecture-map prototype's atlas colours) */
  --map-ground: #111d2c;
  --map-card: #203147;
  --map-muted: #c0cddd;
  --map-border: #52667f;
  --map-featured: #0b4f96;
  --map-on-featured: #fff;
  --map-accent-ink: #9ccbff;
  /* Start map (specs/start §3): the approved prototype's dark colours */
  --start-dot: #22344b;
  --start-shell: #151b25;
  --start-shell-line: #2a3546;
  --start-accent: #6fb0ff;
  --start-accent-tint: rgba(111,176,255,.14);
  --start-what: #ffb35c;
  --start-what-tint: rgba(255,170,70,.16);
  --start-how: #5fd0ea;
  --start-how-tint: rgba(95,208,234,.14);
  --start-agent: #a9a7ff;
  --start-agent-tint: rgba(169,167,255,.16);
  --start-lit: #5fd37a;
  --start-lit-tint: rgba(95,211,122,.16);
} }
[data-theme="dark"] {
  --bg-solid: #14171f;
  --bg: linear-gradient(180deg, #1c2029 0%, #151923 45%, #10131b 100%);
  --bg-glow: radial-gradient(900px 600px at 15% 0%, rgba(90,110,160,.28), transparent 60%), radial-gradient(700px 500px at 100% 20%, rgba(94,92,230,.22), transparent 60%), radial-gradient(800px 600px at 40% 110%, rgba(255,150,80,.10), transparent 60%);
  --ink: #f5f5f7;
  --mute-rgb: 235,235,245;
  --glass-rgb: 44,51,68;            /* dark glass: surfaces stay dark, text stays light */
  --rim-rgb: 120,130,160;           /* a light rim keeps glass edges visible */
  --on-accent: #0b1220;             /* accents are light in dark mode, so their labels are dark */
  --shadow-rgb: 0,0,0;
  --blue: #70b4ff;
  --indigo: #b1aeff;
  --green: #4fd66f;
  --orange: #ff9a72;
  --amber: #ffb340;
  --amber-ink: #ffbe5c;
  --blue-tint: rgba(61,155,255,.14);
  --indigo-tint: rgba(142,139,255,.14);
  --green-tint: rgba(79,214,111,.14);
  --orange-tint: rgba(255,138,91,.14);
  --amber-tint: rgba(255,179,64,.14);
  --danger: #ff8f8f;
  --danger-tint: rgba(255,123,123,.14);
  --find: #8ab9ff;
  --find-tint: rgba(138,185,255,.14);
  --ok: #5fd37f;
  --tier-gold: #f0b440;
  --notice: #f0c040;
  --c-profile: #3d9bff;
  --c-activity: #8e8bff;
  --c-purchases: #4fd66f;
  --c-products: #4cc9e0;
  --c-predictions: #c98bff;
  --c-reach: #ff7aa2;
  --c-lists: #aeaeb2;
  --bubble: #2b2d45;
  --bubble-line: rgba(160,158,255,.18);
  --chip: rgba(48,53,66,.9);
  color-scheme: dark;
  /* Map canvas (the architecture-map prototype's atlas colours) */
  --map-ground: #111d2c;
  --map-card: #203147;
  --map-muted: #c0cddd;
  --map-border: #52667f;
  --map-featured: #0b4f96;
  --map-on-featured: #fff;
  --map-accent-ink: #9ccbff;
  /* Start map (specs/start §3): the approved prototype's dark colours */
  --start-dot: #22344b;
  --start-shell: #151b25;
  --start-shell-line: #2a3546;
  --start-accent: #6fb0ff;
  --start-accent-tint: rgba(111,176,255,.14);
  --start-what: #ffb35c;
  --start-what-tint: rgba(255,170,70,.16);
  --start-how: #5fd0ea;
  --start-how-tint: rgba(95,208,234,.14);
  --start-agent: #a9a7ff;
  --start-agent-tint: rgba(169,167,255,.16);
  --start-lit: #5fd37a;
  --start-lit-tint: rgba(95,211,122,.16);
}
:root, [data-theme] {
  --o-symbol: url("/static/assets/symbol.png");
  /* ---- Text: ink plus four graded neutrals (replaces the 12 ad-hoc alphas of v0) ---- */
  --fg: var(--ink);
  --fg-2: rgba(var(--mute-rgb),.82);   /* secondary: subtitles, notes, deltas */
  --fg-3: rgba(var(--mute-rgb),.76);   /* meta: timestamps, column heads, captions */
  --fg-4: rgba(var(--mute-rgb),.5);   /* faint: placeholders, separators, idle icons */
  --fg-5: rgba(var(--mute-rgb),.28);   /* ghost: row chevrons, empty ticks */

  /* ---- Lines and washes ---- */
  --line: rgba(var(--mute-rgb),.1);          /* section dividers, card edges */
  --line-strong: rgba(var(--mute-rgb),.16);  /* row rules on glass, control rings */
  --line-faint: rgba(var(--mute-rgb),.07);   /* table row rules */
  --wash: rgba(var(--mute-rgb),.07);         /* segmented tracks, bar tracks, tags */
  --wash-hover: rgba(var(--mute-rgb),.1);    /* hover on transparent controls */
  --ring-control: inset 0 0 0 .5px rgba(var(--mute-rgb),.2);
  --ring-control-hover: inset 0 0 0 .5px rgba(var(--mute-rgb),.34);
  --ring-outline: inset 0 0 0 1px rgba(var(--mute-rgb),.2);

  /* ---- Selection and tones, derived so dark mode follows (v0 hard-coded these) ---- */
  --sel: color-mix(in srgb, var(--blue) 8%, transparent);
  --sel-strong: color-mix(in srgb, var(--blue) 12%, transparent);
  --sel-ring: color-mix(in srgb, var(--blue) 35%, transparent);
  --exclude-sel: color-mix(in srgb, var(--orange) 8%, transparent);
  --exclude-ring: color-mix(in srgb, var(--orange) 35%, transparent);
  --danger-wash: color-mix(in srgb, var(--danger) 9%, transparent);
  --merge-tag: color-mix(in srgb, var(--indigo) 10%, transparent);
  --merge-tag-ring: color-mix(in srgb, var(--indigo) 24%, transparent);

  /* ---- Surfaces (liquid glass) ---- */
  --surface-nav: linear-gradient(160deg, rgba(var(--glass-rgb),.42), rgba(var(--glass-rgb),.18));
  --surface-main: linear-gradient(160deg, rgba(var(--glass-rgb),.30), rgba(var(--glass-rgb),.12));
  --surface-agent: rgba(var(--glass-rgb),.55);
  --surface-card: var(--surface-nav);
  --surface-block: rgba(var(--glass-rgb),.6);
  --surface-section: rgba(var(--glass-rgb),.55);
  /* The section glass made opaque over the canvas ground: for sticky cells and heads that other
     content scrolls under (a see-through sticky cell shows the cells beneath it). */
  --surface-solid: color-mix(in srgb, rgb(var(--glass-rgb)) 55%, var(--map-ground));
  --surface-well: rgba(var(--glass-rgb),.5);
  --surface-field: rgba(var(--glass-rgb),.82);
  --surface-field-focus: rgba(var(--glass-rgb),.97);
  --surface-raised: rgba(var(--glass-rgb),.96);
  --surface-hover: rgba(var(--glass-rgb),.6);
  --surface-popover: rgba(var(--glass-rgb),.97);
  --surface-dialog: rgba(var(--glass-rgb),.9);
  --surface-strip: rgba(var(--glass-rgb),.22);

  --edge-panel: inset 0 1px 0 rgba(var(--rim-rgb),.85), inset 0 -1px 0 rgba(var(--rim-rgb),.25), inset 0 0 0 .5px rgba(var(--rim-rgb),.5);
  --edge-soft: inset 0 1px 0 rgba(var(--rim-rgb),.7), inset 0 0 0 .5px rgba(var(--rim-rgb),.55);
  --edge-block: inset 0 1px 0 rgba(var(--rim-rgb),.85), inset 0 0 0 .5px rgba(var(--mute-rgb),.1);
  --shadow-panel: 0 14px 40px -20px rgba(var(--shadow-rgb),.3);
  --shadow-control: 0 10px 30px -18px rgba(var(--shadow-rgb),.4);
  --shadow-block: var(--edge-block), 0 14px 34px -26px rgba(var(--shadow-rgb),.4);
  --shadow-card: var(--edge-panel), var(--shadow-panel);
  --shadow-button: var(--edge-soft), var(--shadow-control);
  --shadow-raised: 0 1px 3px rgba(var(--shadow-rgb),.14), inset 0 0 0 .5px rgba(var(--mute-rgb),.1);
  --shadow-lift: 0 18px 36px -24px rgba(var(--shadow-rgb),.5);
  --shadow-popover: 0 0 0 .5px rgba(var(--mute-rgb),.14), 0 2px 6px -2px rgba(var(--shadow-rgb),.12), 0 16px 36px -16px rgba(var(--shadow-rgb),.35);
  --shadow-dialog: inset 0 1px 0 rgba(var(--rim-rgb),.95), inset 0 0 0 .5px rgba(var(--mute-rgb),.12), 0 40px 90px -30px rgba(var(--shadow-rgb),.6);
  --shadow-primary: 0 10px 24px -14px var(--blue);
  --shadow-toast: 0 14px 30px -14px rgba(0,0,0,.5);
  --scrim: rgba(20,25,40,.26);
  --blur-glass: blur(22px) saturate(170%);
  --blur-strong: blur(28px) saturate(180%);
  --blur-dialog: blur(40px) saturate(180%);
  --blur-scrim: blur(12px) saturate(120%);

  /* ---- Workbench (specs/workbench): the shell's regions; flat translucent bars over the gradient ---- */
  --h-header: 44px; --w-rail: 48px; --w-outline: 240px; --h-statusbar: 24px;
  --w-agent-1: 300px; --w-agent-2: 460px; --w-agent-3: 680px;  /* the agent panel's three widths */
  --surface-bar: rgba(var(--glass-rgb),.62);      /* header, tools row and status bar */
  --surface-rail: rgba(var(--glass-rgb),.55);     /* the rail (activity bar) */
  --surface-outline: rgba(var(--glass-rgb),.38);  /* the outline (side bar) */
  --surface-panel: color-mix(in srgb, rgb(var(--glass-rgb)) 94%, var(--map-ground));  /* the agent panel over the canvas: opaque, no blur */
  --line-bar: rgba(var(--mute-rgb),.12);          /* hairlines between the bars and the canvas */
  --shadow-panel-edge: -18px 0 40px -30px rgba(var(--shadow-rgb),.45);
  --canvas-dots: radial-gradient(circle, color-mix(in srgb, var(--map-muted) 12%, transparent) .8px, transparent .9px);  /* at 22px */

  /* ---- Focus: one ring for fields, one outline for everything else ---- */
  --focus-field: inset 0 0 0 1.5px var(--blue), 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent);
  --focus-outline: 2px solid color-mix(in srgb, var(--blue) 70%, transparent);

  /* ---- Type ---- */
  --font-sans: "IBM Plex Sans", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Fira Code", "FiraGO", ui-monospace, SFMono-Regular, Menlo, monospace;  /* technical text: ids, diagrams, prompts */
  --text-hero: 57px;  --text-display: 43px; --text-h1: 33px;  --text-h2: 25px;
  --text-title: 23px; --text-lead: 22px;    --text-step: 18px; --text-agent: 17px;
  --text-body-lg: 16.5px; --text-row: 16px; --text-body: 15px; --text-body-sm: 14.5px;
  --text-caption: 14px; --text-micro: 13.5px; --text-nano: 12.5px;
  --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --leading-tight: 1.1; --leading-heading: 1.25; --leading-body: 1.43; --leading-relaxed: 1.5; --leading-agent: 1.7;
  --tracking-body: .16px; --tracking-display: -.2px; --tracking-hero: -1.6px; --tracking-eyebrow: .6px;

  /* ---- Space (px) ---- */
  --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px;
  --space-7: 14px; --space-8: 16px; --space-9: 18px; --space-10: 22px; --space-11: 24px; --space-12: 40px;

  /* ---- Radii: actions are pills (height / 2); fields are soft rectangles ---- */
  --radius-panel: 28px; --radius-dialog: 28px; --radius-card: 24px; --radius-block: 24px;
  --radius-section: 22px; --radius-well: 18px; --radius-row: 16px; --radius-menu: 14px;
  --radius-tile: 11px; --radius-chiptile: 10px; --radius-field: 10px; --radius-token: 10px;
  --radius-option: 9px; --radius-check: 6px; --radius-bubble: 18px 18px 6px 18px; --radius-bubble-in: 18px 18px 18px 6px;

  /* ---- Sizes ---- */
  --h-control-xs: 24px; --h-control-sm: 28px; --h-control: 36px; --h-control-lg: 38px; --h-control-xl: 40px; --h-field-xl: 44px;
  --h-row: 56px; --h-row-lg: 64px; --h-nav-item: 36px; --h-step-node: 34px;
  --w-sidebar: 224px; --w-sidebar-collapsed: 64px;
  --w-agent: 340px; --w-agent-wide: 560px; --w-agent-max: 840px;
  --w-dialog-lg: 980px; --w-dialog-md: 504px; --w-dialog-sm: 420px; --w-drawer: 820px;
  --w-prose: 64ch; --w-sentence: 920px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.32,.72,0,1);
  --ease-reveal: cubic-bezier(.16,1,.3,1);
  --dur-press: .15s; --dur-fast: .15s; --dur-base: .2s; --dur-state: .3s; --dur-fold: .45s;
  --dur-land: .5s; --dur-agent: .36s;
  --w-work: clamp(440px, 46%, 820px);   /* agent first: the work pane beside the conversation */ --dur-desk: .6s; --dur-spin: 1s; --dur-shimmer: 1.5s; --dur-pulse: 1.6s;
  --press-scale: .97;
  --shimmer: linear-gradient(90deg, rgba(var(--mute-rgb),.08) 25%, rgba(var(--mute-rgb),.16) 50%, rgba(var(--mute-rgb),.08) 75%);

  /* ---- Stacking ---- */
  --z-sticky: 4; --z-menu: 30; --z-drawer: 35; --z-editor: 40; --z-dialog: 80; --z-toast: 90;
}

/* ===================== keyframes (names kept from v0) ===================== */
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes land { from { opacity: 0; transform: translateY(18px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ddin { from { opacity: 0; transform: translateY(-4px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes slidein { from { opacity: 0; transform: translateX(24px) } to { opacity: 1; transform: none } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes shimmer { 0% { background-position: 150% 0 } 100% { background-position: -50% 0 } }
@keyframes ring { 0%,100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--indigo) 16%, transparent) } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--indigo) 6%, transparent) } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent) } 50% { box-shadow: 0 0 0 6px transparent } }
@keyframes glow { 0% { background: color-mix(in srgb, var(--green) 16%, transparent) } 100% { background: transparent } }
@keyframes grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
@keyframes wordIn { 0% { opacity: 0; transform: translateY(14px); filter: blur(5px) } 100% { opacity: 1; transform: none; filter: blur(0) } }
@keyframes orbIn { 0% { opacity: 0; transform: scale(.4) rotate(-40deg) } 100% { opacity: 1; transform: scale(1) rotate(0) } }
@keyframes orbOut { 0% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0) } 100% { opacity: 0; transform: scale(2.2) rotate(90deg); filter: blur(10px) } }
@keyframes symSpin { 0% { transform: rotate(0deg) scale(1) } 50% { transform: rotate(180deg) scale(1.12) } 100% { transform: rotate(360deg) scale(1) } }
@keyframes symGlow { 0%,100% { opacity: .35; transform: scale(.9) } 50% { opacity: .9; transform: scale(1.35) } }
@keyframes avBlink { 0%,91%,100% { transform: scaleY(1) } 94% { transform: scaleY(.1) } }
@keyframes avWander { 0%,28%,100% { transform: translate(0,0) } 36%,50% { transform: translate(1.7px,-.7px) } 58%,72% { transform: translate(-1.7px,.3px) } 80% { transform: translate(0,0) } }
@keyframes avScan { 0%,100% { transform: translate(-1.9px,.5px) } 50% { transform: translate(1.9px,.5px) } }
@keyframes avRock { 0%,100% { transform: rotate(-4deg) } 50% { transform: rotate(4deg) } }
@keyframes avBreath { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

/* ===================== base ===================== */
.o-root, .o-root *, .o-root *::before, .o-root *::after { box-sizing: border-box }
.o-root { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--fg); -webkit-font-smoothing: antialiased }
.o-root :where(button, input, select, textarea) { font: inherit; letter-spacing: inherit; color: inherit }
.o-root :where(input, textarea)::placeholder { color: var(--fg-4) }
.o-root :where(a) { color: var(--blue); text-decoration: none }
html, body { height: 100%; margin: 0 }
body { background: var(--bg-solid) }
:where(.o-root) :focus-visible { outline: var(--focus-outline); outline-offset: 2px }
/* Inputs that sit inside a styled field draw no outline of their own: the field shows focus. */
:where(.o-search, .o-affix, .o-composer__field, .o-menu__search) :is(input, textarea):focus-visible, .o-rich:focus-visible, .o-input:focus-visible { outline: none }
.o-root ::selection { background: color-mix(in srgb, var(--blue) 20%, transparent) }
.o-num { font-variant-numeric: tabular-nums }
.o-spin { animation: spin var(--dur-spin) linear infinite }
.o-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.o-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color var(--dur-state) ease }
.o-scroll:hover { scrollbar-color: rgba(var(--mute-rgb),.22) transparent }
.o-glass { -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass) }
.o-collapse { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 0fr; transition: grid-template-rows var(--dur-fold) var(--ease-out) }
.o-collapse > * { min-height: 0; min-width: 0; overflow: hidden }
.o-collapse[data-open] { grid-template-rows: 1fr }
.o-sep { opacity: .45 }

/* ===================== tones: one attribute drives ink, tint and solid ===================== */
[data-tone] { --tone: var(--fg-2); --tone-tint: var(--wash); --tone-solid: rgba(var(--mute-rgb),.45) }
[data-tone="blue"]   { --tone: var(--blue);   --tone-tint: var(--blue-tint);   --tone-solid: var(--blue) }
[data-tone="indigo"] { --tone: var(--indigo); --tone-tint: var(--indigo-tint); --tone-solid: var(--indigo) }
[data-tone="green"]  { --tone: var(--ok);     --tone-tint: var(--green-tint);  --tone-solid: var(--green) }
[data-tone="orange"] { --tone: var(--orange); --tone-tint: var(--orange-tint); --tone-solid: var(--orange) }
[data-tone="amber"]  { --tone: var(--amber-ink);  --tone-tint: var(--amber-tint);  --tone-solid: var(--amber) }
[data-tone="danger"] { --tone: var(--danger); --tone-tint: var(--danger-tint); --tone-solid: var(--danger) }
[data-tone="find"]   { --tone: var(--find);   --tone-tint: var(--find-tint);   --tone-solid: var(--find) }
[data-tone="muted"]  { --tone: var(--fg-2);   --tone-tint: var(--wash);        --tone-solid: rgba(var(--mute-rgb),.45) }
[data-tone="profile"]     { --tone: var(--c-profile);     --tone-solid: var(--c-profile) }
[data-tone="activity"]    { --tone: var(--c-activity);    --tone-solid: var(--c-activity) }
[data-tone="purchases"]   { --tone: var(--c-purchases);   --tone-solid: var(--c-purchases) }
[data-tone="products"]    { --tone: var(--c-products);    --tone-solid: var(--c-products) }
[data-tone="predictions"] { --tone: var(--c-predictions); --tone-solid: var(--c-predictions) }
[data-tone="reach"]       { --tone: var(--c-reach);       --tone-solid: var(--c-reach) }
[data-tone="lists"]       { --tone: var(--c-lists);       --tone-solid: var(--c-lists) }
[data-tone="profile"],[data-tone="activity"],[data-tone="purchases"],[data-tone="products"],[data-tone="predictions"],[data-tone="reach"],[data-tone="lists"] { --tone-tint: color-mix(in srgb, var(--tone) 13%, transparent) }

/* ===================== surfaces ===================== */
.o-panel { position: relative; min-width: 0; border-radius: var(--radius-panel); background: var(--surface-main); box-shadow: var(--shadow-card); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass) }
.o-panel--nav { background: var(--surface-nav) }
.o-panel--agent { background: var(--surface-agent); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.75), inset 0 0 0 .5px rgba(var(--rim-rgb),.6), 0 14px 40px -20px rgba(var(--shadow-rgb),.35) }
.o-card { min-width: 0; border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-card); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass) }
.o-card--list { padding: 6px; display: flex; flex-direction: column }
.o-block { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-block); background: var(--surface-block); box-shadow: var(--shadow-block); animation: land var(--dur-land) var(--ease-out) both }
.o-section { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 16px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-section__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 24px }
.o-section__title { font-size: var(--text-caption); color: var(--fg-2) }
.o-section__title--strong { font-size: 17px; font-weight: var(--weight-medium); color: var(--fg) }
.o-section__note { font-size: 13px; color: var(--fg-4) }
.o-section__link { margin-left: auto; font-size: var(--text-micro); color: var(--blue); cursor: pointer; background: none; border: 0; padding: 0 }
.o-well { display: flex; flex-direction: column; border-radius: var(--radius-well); background: var(--surface-well); box-shadow: inset 0 0 0 .5px var(--line) }
.o-strip { display: flex; align-items: center; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; min-height: 38px; padding: 9px 16px; border-radius: 19px; background: var(--surface-strip); box-shadow: inset 0 0 0 .5px rgba(var(--rim-rgb),.5) }
@media (prefers-reduced-transparency: reduce) { .o-panel, .o-card, .o-glass, .o-dialog, .o-menu, .o-drawer__panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--bg-solid) !important } }

/* ===================== icons ===================== */
.o-tileicon { --s: 30px; flex: none; width: var(--s); height: var(--s); border-radius: var(--radius-chiptile); display: inline-flex; align-items: center; justify-content: center; color: var(--tone); background: var(--tone-tint) }
.o-tileicon .ti { font-size: 16px }
.o-tileicon--sm { --s: 24px; border-radius: 8px } .o-tileicon--sm .ti { font-size: 14px }
.o-tileicon--md { --s: 32px; border-radius: var(--radius-tile) } .o-tileicon--md .ti { font-size: 17px }
.o-tileicon--lg { --s: 44px; border-radius: 14px; background: rgba(var(--glass-rgb),.8); box-shadow: 0 8px 20px -12px rgba(var(--shadow-rgb),.4) } .o-tileicon--lg .ti { font-size: 23px }
.o-tileicon--round { border-radius: 50% }
.o-tileicon--solid { color: var(--on-accent); background: var(--tone-solid) }

/* ===================== buttons ===================== */
.o-btn { --h: var(--h-control); flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h); padding: 0 14px; border: 0; border-radius: calc(var(--h) / 2); background: transparent; color: var(--fg); font-size: var(--text-body-sm); font-weight: var(--weight-regular); letter-spacing: 0; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; transition: transform var(--dur-press) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease, filter var(--dur-fast) ease }
.o-btn .ti { font-size: 16px }
.o-btn:active { transform: scale(var(--press-scale)) }
.o-btn:disabled, .o-btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; pointer-events: none }
.o-btn--xs { --h: var(--h-control-xs); padding: 0 9px; font-size: var(--text-micro); gap: 4px } .o-btn--xs .ti { font-size: 14px }
.o-btn--sm { --h: var(--h-control-sm); padding: 0 11px; font-size: var(--text-caption); gap: 5px } .o-btn--sm .ti { font-size: 15px }
.o-btn--lg { --h: var(--h-control-lg); padding: 0 18px; font-size: var(--text-body); gap: 7px }
.o-btn--block { width: 100% }
.o-btn--primary { color: var(--on-accent); background: var(--blue); font-weight: var(--weight-medium); box-shadow: var(--shadow-primary) }
.o-btn--primary:hover { filter: brightness(1.06) }
.o-btn--confirm { color: var(--on-accent); background: var(--green); font-weight: var(--weight-medium) }
.o-btn--danger { color: var(--on-accent); background: var(--danger); font-weight: var(--weight-medium) }
.o-btn--danger:hover, .o-btn--confirm:hover { filter: brightness(1.06) }
.o-btn--glass { background: rgba(var(--glass-rgb),.7); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.7), var(--ring-control), 0 8px 20px -14px rgba(var(--shadow-rgb),.4) }
.o-btn--glass:hover { background: rgba(var(--glass-rgb),.92) }
.o-btn--soft { background: rgba(var(--glass-rgb),.5); box-shadow: var(--ring-control) }
.o-btn--soft:hover { background: rgba(var(--glass-rgb),.75) }
.o-btn--ghost { color: var(--blue) }
.o-btn--ghost:hover { background: var(--sel) }
.o-btn--muted { color: var(--fg-2) }
.o-btn--muted:hover { color: var(--fg); background: var(--wash-hover) }
.o-btn--danger-ghost { color: var(--danger) }
.o-btn--danger-ghost:hover { background: var(--danger-wash) }
.o-btn--outline { box-shadow: var(--ring-outline) }
.o-btn--outline:hover { color: var(--blue); background: var(--chip); box-shadow: inset 0 0 0 1px var(--sel-ring), 0 4px 10px -6px rgba(var(--shadow-rgb),.3); transform: translateY(-1px) }
.o-btn--outline-primary { color: var(--blue); font-weight: var(--weight-medium); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent) }
.o-btn--outline-primary:hover { background: var(--sel); transform: translateY(-1px) }
.o-btn--chip { --h: 32px; padding: 0 13px 0 11px; gap: 7px; font-size: var(--text-body); background: var(--chip); box-shadow: inset 0 0 0 1px rgba(var(--mute-rgb),.14), 0 1px 2px rgba(var(--shadow-rgb),.06) }
.o-btn--chip:hover { background: rgba(var(--glass-rgb),.9); transform: translateY(-1px) }
.o-btn__lead { color: var(--tone, currentColor) }
.o-btn__trail { font-size: 14px !important; opacity: .8 }
.o-btn[aria-busy="true"] { pointer-events: none } .o-btn[aria-busy="true"]:disabled { opacity: 1 }
.o-btn[aria-busy="true"] .ti { animation: spin var(--dur-spin) linear infinite }

.o-iconbtn { --s: 32px; flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fg-3); cursor: pointer; transition: transform var(--dur-press) ease, background var(--dur-base) ease, color var(--dur-base) ease, box-shadow var(--dur-base) ease }
.o-iconbtn .ti { font-size: 18px }
.o-iconbtn:hover { color: var(--fg); background: var(--surface-hover) }
.o-iconbtn:active { transform: scale(.94) }
.o-iconbtn[aria-pressed="true"], .o-iconbtn[aria-expanded="true"] { color: var(--indigo); background: var(--indigo-tint) }
.o-iconbtn--sm { --s: 28px } .o-iconbtn--sm .ti { font-size: 16px }
.o-iconbtn--sm:hover { background: var(--wash-hover) }
.o-iconbtn--md { --s: 36px } .o-iconbtn--md .ti { font-size: 19px }
.o-iconbtn--square { border-radius: 14px }
.o-iconbtn--glass { --s: 40px; color: rgba(var(--mute-rgb),.75); background: rgba(var(--glass-rgb),.5); box-shadow: var(--shadow-button); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong) }
.o-iconbtn--glass .ti { font-size: 19px }
.o-iconbtn--glass:hover { background: rgba(var(--glass-rgb),.75) }
.o-iconbtn--glass[aria-pressed="true"] { color: var(--fg); background: rgba(var(--glass-rgb),.85); box-shadow: inset 0 0 0 1px rgba(var(--mute-rgb),.35) }
.o-iconbtn--outline { color: var(--fg-2); background: rgba(var(--glass-rgb),.6); box-shadow: inset 0 0 0 .5px var(--line-strong) }
.o-iconbtn--danger:hover { color: var(--danger); background: var(--danger-wash) }
.o-iconbtn--accent { color: var(--blue) } .o-iconbtn--accent:hover { background: var(--sel) }
.o-count { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--on-accent); background: var(--badge); box-shadow: 0 0 0 2px var(--bg-solid) }

.o-capsule { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 20px; background: color-mix(in srgb, var(--green) 9%, transparent); animation: fade var(--dur-fast) ease both }
.o-capsule__q { padding: 0 6px 0 10px; font-size: var(--text-caption); color: var(--ok) }
.o-capsule--danger { background: color-mix(in srgb, var(--danger) 8%, transparent) } .o-capsule--danger .o-capsule__q { color: var(--danger) }

/* ===================== avatar ===================== */
.o-avatar { --s: 32px; flex: none; width: var(--s); height: var(--s); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--s) * .36); font-weight: var(--weight-semibold); letter-spacing: 0; color: var(--on-accent); background: var(--av-4) }
.o-avatar--xs { --s: 18px; font-size: 9.5px } .o-avatar--sm { --s: 22px; font-size: 10.5px } .o-avatar--md { --s: 26px; font-size: 11px }
.o-avatar--lg { --s: 40px; font-size: 14px } .o-avatar--xl { --s: 64px; font-size: 22px; font-weight: var(--weight-medium); background: linear-gradient(145deg, color-mix(in srgb, var(--indigo) 70%, white), var(--indigo)); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--indigo) 70%, transparent) }
.o-avatar--system { color: var(--fg-2); background: var(--wash-hover) }
.o-avatar[data-av="1"] { background: var(--av-1) } .o-avatar[data-av="2"] { background: var(--av-2) } .o-avatar[data-av="3"] { background: var(--av-3) }
.o-avatar[data-av="4"] { background: var(--av-4) } .o-avatar[data-av="5"] { background: var(--av-5) } .o-avatar[data-av="6"] { background: var(--av-6) } .o-avatar[data-av="7"] { background: var(--av-7) }
.o-wstile { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: var(--weight-semibold); color: var(--on-accent); background: var(--blue) }

/* ===================== pills, tags, badges ===================== */
.o-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: var(--text-micro); white-space: nowrap; color: var(--tone); background: var(--tone-tint); transition: background var(--dur-state) ease, color var(--dur-state) ease }
.o-pill .ti { font-size: 13px }
.o-pill--sm { height: 22px; padding: 0 9px; border-radius: 11px; font-size: 13px }
.o-pill__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tone-solid) }
.o-pill--live .o-pill__dot { animation: pulse 2s ease infinite; color: var(--tone-solid) }
.o-tag { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; font-size: 12px; color: var(--tone, var(--blue)); background: var(--tone-tint, var(--blue-tint)) }
.o-tag--md { height: 20px; padding: 0 8px; border-radius: 10px; font-size: var(--text-nano) }
.o-tag--neutral { color: var(--fg-2); background: var(--wash); height: 24px; padding: 0 10px; border-radius: 12px; font-size: 13px }
.o-tag--outline { color: var(--fg); background: none; height: 26px; padding: 0 11px; border-radius: 13px; font-size: var(--text-micro); box-shadow: inset 0 0 0 1px var(--line-strong) }
.o-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 12px; color: var(--fg-2); background: var(--wash-hover) }
.o-badge--alert { color: var(--on-accent); background: var(--orange) }
.o-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tone-solid, var(--fg-4)) }
.o-dot--ring { background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--mute-rgb),.3) }
.o-live { display: inline-flex; align-items: center; gap: 9px } .o-live .o-dot { background: var(--ok); animation: avBreath var(--dur-pulse) ease-in-out infinite }
.o-status { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--tone) } .o-status .ti { font-size: 14px }

/* ===================== form fields ===================== */
.o-field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.o-label { font-size: var(--text-micro); color: var(--fg-2) }
.o-hint { font-size: 13px; line-height: 1.45; color: var(--fg-3) }
.o-error { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--danger) } .o-error .ti { font-size: 14px }
.o-input { height: var(--h-control); width: 100%; min-width: 0; padding: 0 12px; border: 0; outline: none; border-radius: var(--radius-field); font-size: var(--text-body-sm); color: var(--fg); background: var(--surface-field); box-shadow: var(--ring-control), 0 1px 2px rgba(var(--shadow-rgb),.06); transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease }
.o-input:hover { box-shadow: var(--ring-control-hover), 0 1px 2px rgba(var(--shadow-rgb),.08) }
.o-input:focus, .o-input:focus-within { background: var(--surface-field-focus); box-shadow: var(--focus-field); outline: none }
.o-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--danger) }
.o-input:disabled { opacity: .45 }
textarea.o-input { height: auto; min-height: 80px; padding: 10px 12px; line-height: 1.55; resize: vertical }
.o-input--auto { width: auto }
.o-input--code { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-caption); white-space: pre; overflow-wrap: normal } /* source text such as SQL */
/* A select field: the native arrow is replaced by a drawn chevron with room on its right. */
select.o-input, select.o-input:focus { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat }
/* A file field: the field's look, with the chooser drawn as the design system's soft button. */
.o-input[type="file"] { height: auto; min-height: var(--h-control); padding: 5px 6px; cursor: pointer; color: var(--fg-2) }
.o-input[type="file"]::file-selector-button { height: 30px; margin-right: 12px; padding: 0 14px; border: 0; border-radius: 15px; font: inherit; font-size: var(--text-body-sm); color: var(--fg); background: var(--surface-raised, var(--surface-field-focus)); box-shadow: var(--ring-control); cursor: pointer; transition: background var(--dur-fast) ease }
.o-input[type="file"]::file-selector-button:hover { background: var(--surface-hover) }
.o-input--title { height: 28px; max-width: 380px; margin-left: -8px; padding: 0 8px; border-radius: 8px; font-size: var(--text-body-lg); background: transparent; box-shadow: none; text-overflow: ellipsis }
.o-input--title:hover { background: var(--surface-hover); box-shadow: none }
.o-input--title:focus { background: var(--surface-field-focus); box-shadow: inset 0 0 0 1.5px var(--blue) }
.o-input--hero { height: auto; padding: 9px 14px; border-radius: 14px; font-size: var(--text-title); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: 1.3; background: rgba(var(--glass-rgb),.5); box-shadow: inset 0 0 0 .5px var(--line-strong) }
.o-affix { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: var(--h-control) } .o-affix input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: var(--text-body-sm); height: 100% } .o-affix span { color: var(--fg-3); font-size: var(--text-caption) }
.o-search { display: flex; align-items: center; gap: 9px; height: 38px; min-width: 0; padding: 0 14px; border-radius: 19px; background: rgba(var(--glass-rgb),.55); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.14); transition: box-shadow var(--dur-fast) ease }
.o-search:focus-within { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 50%, transparent) }
.o-search > .ti { flex: none; font-size: 17px; color: var(--fg-3) }
.o-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; font-size: var(--text-body-sm) }
.o-search--sm { height: 34px; padding: 0 12px; border-radius: 17px; background: var(--surface-field); box-shadow: var(--ring-control), 0 1px 2px rgba(var(--shadow-rgb),.06) }
.o-search--global { height: var(--h-field-xl); border-radius: 22px; padding: 0 14px; gap: 10px; background: rgba(var(--glass-rgb),.5); box-shadow: var(--shadow-button); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong) }
.o-search--global > .ti { font-size: 19px } .o-search--global input { font-size: 16px }
.o-kbd { flex: none; padding: 2px 7px; border-radius: 7px; font-size: 12px; color: var(--fg-4); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.25) }

.o-select { width: 320px; max-width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--h-control); padding: 0 12px 0 14px; border: 0; border-radius: var(--radius-field); cursor: pointer; font-size: var(--text-body-sm); text-align: left; color: var(--fg); background: var(--surface-field); box-shadow: var(--ring-control), 0 1px 2px rgba(var(--shadow-rgb),.06); transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease }
.o-select:hover { box-shadow: var(--ring-control-hover), 0 1px 2px rgba(var(--shadow-rgb),.08) }
.o-select[aria-expanded="true"] { background: var(--surface-field-focus); box-shadow: var(--focus-field) }
.o-select > .ti { font-size: 14px; opacity: .45 }
.o-select--empty > span:first-child { color: var(--blue) }
.o-select--auto { width: auto }

.o-check { flex: none; appearance: none; -webkit-appearance: none; margin: 0; width: 18px; height: 18px; border-radius: var(--radius-check); cursor: pointer; display: inline-grid; place-content: center; background: rgba(var(--glass-rgb),.8); box-shadow: inset 0 0 0 1px rgba(var(--mute-rgb),.28); transition: background var(--dur-fast) ease }
.o-check::before { content: ""; width: 10px; height: 6px; border: solid var(--on-accent); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--dur-fast) ease }
.o-check:checked, .o-check:indeterminate { background: var(--blue); box-shadow: none }
.o-check:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1) }
.o-check:indeterminate::before { width: 9px; height: 0; border-width: 0 0 2px 0; transform: none }
/* A checkbox with its text: the label is the click target. */
.o-checkline { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; font-size: var(--text-body-sm); color: var(--fg); line-height: 1.35 }
.o-checkline > .o-check { flex: none }
.o-check--round { width: 22px; height: 22px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--mute-rgb),.3) }
.o-switch { flex: none; appearance: none; -webkit-appearance: none; margin: 0; position: relative; width: 44px; height: 26px; border-radius: 13px; cursor: pointer; background: rgba(var(--mute-rgb),.2); transition: background var(--dur-base) ease }
.o-switch::before { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px -2px rgba(var(--shadow-rgb),.6); transition: transform var(--dur-base) var(--ease-out) }
.o-switch:checked { background: var(--green) }
.o-switch:checked::before { transform: translateX(18px) }
.o-switch--sm { width: 34px; height: 20px; border-radius: 10px } .o-switch--sm::before { top: 2px; left: 2px; width: 16px; height: 16px }
.o-switch--sm:checked::before { transform: translateX(14px) }
.o-switch--danger:checked { background: var(--danger) }
.o-switch:disabled { opacity: .45; cursor: default }
.o-togglerow { display: flex; align-items: center; gap: 12px; min-height: 58px; cursor: pointer; border-bottom: .5px solid var(--line-faint) }
.o-togglerow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px } .o-togglerow__label { font-size: var(--text-body-sm) } .o-togglerow__hint { font-size: 13px; color: var(--fg-3) }

.o-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; cursor: pointer; font-size: var(--text-caption); white-space: nowrap; color: var(--fg); background: rgba(var(--glass-rgb),.85); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.22), 0 1px 2px rgba(var(--shadow-rgb),.05); transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease }
.o-chip .ti { font-size: 15px }
.o-chip:hover { background: rgba(var(--glass-rgb),.95) }
.o-chip[aria-pressed="true"], .o-chip[aria-checked="true"] { color: var(--blue); background: var(--sel-strong); box-shadow: inset 0 0 0 1px var(--sel-ring) }
.o-chip--exclude[aria-pressed="true"] { color: var(--orange); background: var(--exclude-sel); box-shadow: inset 0 0 0 1px var(--exclude-ring) }
.o-chip__count { font-size: var(--text-nano); opacity: .6; font-variant-numeric: tabular-nums }
.o-chip--quiet { color: var(--fg-2); background: rgba(var(--glass-rgb),.4); box-shadow: inset 0 0 0 .5px var(--line) }
.o-chip--quiet[aria-pressed="true"] { color: var(--fg); background: var(--surface-raised); box-shadow: var(--shadow-raised) }
.o-chip--menu { height: var(--h-control); padding: 0 12px 0 14px; border-radius: 18px; font-size: var(--text-body-sm); gap: 6px; background: var(--surface-field) }
.o-chip--menu > .ti:last-child { font-size: 14px; opacity: .45 }
.o-chip--menu.has-value { color: var(--blue); background: var(--sel); box-shadow: inset 0 0 0 .5px var(--sel-ring) }
.o-chip--menu[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent), inset 0 0 0 1px var(--blue) }
.o-chip--merge { height: 28px; padding: 0 11px 0 9px; border-radius: 14px; font-size: var(--text-micro); color: var(--indigo); background: color-mix(in srgb, var(--indigo) 8%, transparent); box-shadow: none }
.o-chip--merge:hover { background: color-mix(in srgb, var(--indigo) 15%, transparent) } .o-chip--merge .ti { font-size: 13px }
.o-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px }

.o-stepper { display: inline-flex; align-items: center; gap: 2px; height: var(--h-control); padding: 0 4px; border-radius: var(--radius-field); background: var(--surface-field); box-shadow: var(--ring-control), 0 1px 2px rgba(var(--shadow-rgb),.06) }
.o-stepper button { width: 28px; height: 28px; border: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fg-2); background: none }
.o-stepper button:hover { color: var(--fg); background: var(--wash-hover) } .o-stepper button .ti { font-size: 14px }
.o-stepper output { min-width: 70px; text-align: center; font-size: var(--text-body-sm); font-variant-numeric: tabular-nums }

.o-frow { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; flex-wrap: wrap }
.o-frow__label { flex: none; width: 84px; min-height: var(--h-control); display: flex; align-items: center; font-size: var(--text-caption); color: var(--fg-2) }
.o-frow__ctl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: var(--h-control) }
.o-frow__join { font-size: var(--text-body-sm); color: var(--fg-2) }
.o-fdiv { height: .5px; margin: 8px 0; background: var(--line) }

.o-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 0; border-radius: 18px; text-align: left; cursor: pointer; background: rgba(var(--glass-rgb),.45); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.8), inset 0 0 0 .5px rgba(var(--rim-rgb),.6), 0 8px 22px -18px rgba(var(--shadow-rgb),.35); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) ease, box-shadow var(--dur-base) ease }
.o-choice:hover { background: rgba(var(--glass-rgb),.75) }
.o-choice__head { display: flex; align-items: center; gap: 10px }
.o-choice__name { font-size: var(--text-body-lg) }
.o-choice__desc { font-size: var(--text-micro); line-height: 1.4; color: var(--fg-2); text-wrap: pretty }
.o-choice .o-tileicon { --s: 30px; border-radius: 50%; color: var(--tone); background: var(--wash); transition: background .22s ease, color .22s ease }
.o-choice[aria-checked="true"] { transform: translateY(-2px); background: rgba(var(--glass-rgb),.8); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.8), inset 0 0 0 1.5px var(--tone-solid), 0 14px 30px -20px rgba(var(--shadow-rgb),.5) }
.o-choice[aria-checked="true"] .o-tileicon { color: var(--on-accent); background: var(--tone-solid) }
.o-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px }

.o-swatch { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--o-sw); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); transition: box-shadow var(--dur-fast) ease }
.o-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg-solid), 0 0 0 4px var(--o-sw) }
.o-swatch--custom[aria-checked="true"], .o-swatch--custom[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--bg-solid), 0 0 0 4px var(--fg) }
.o-swatch--custom { --o-sw: conic-gradient(from 180deg, #ff3b30, #ffcc00, #34c759, #00c7be, #0071e3, #5e5ce6, #ff2d55, #ff3b30); background: var(--o-sw) }

/* rich text with merge tags (SMS, push, email blocks) */
.o-rich { min-height: 140px; padding: 18px 22px 20px; outline: none; font-size: 16px; line-height: 1.75; white-space: pre-wrap; word-break: break-word }
.o-rich:empty::before { content: attr(data-placeholder); color: var(--fg-4); pointer-events: none }
.o-mtag { display: inline-flex; align-items: center; margin: 0 1px; padding: 0 8px; height: 1.55em; line-height: 1.55em; vertical-align: baseline; border-radius: 7px; font-size: .92em; white-space: nowrap; user-select: all; color: var(--indigo); background: var(--merge-tag); box-shadow: inset 0 0 0 .5px var(--merge-tag-ring) }
.o-composecard { border-radius: var(--radius-section); background: rgba(var(--glass-rgb),.88); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.12), 0 1px 2px rgba(var(--shadow-rgb),.05), 0 24px 48px -32px rgba(var(--shadow-rgb),.45) }
.o-composecard__bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 16px 14px 22px; border-top: .5px solid var(--line) }
.o-meter { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-micro); white-space: nowrap; color: var(--fg-2); font-variant-numeric: tabular-nums }
.o-meter__track { width: 44px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--wash-hover) }
.o-meter__fill { display: block; height: 100%; width: calc(var(--o-value, 0) * 1%); border-radius: 2px; background: var(--green) }
.o-meter.is-over { color: var(--orange) } .o-meter.is-over .o-meter__fill { background: var(--orange) }

/* ===================== navigation ===================== */
/* application page: body that hosts the shell at full viewport height */
.o-page { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg) }
.o-page > .o-app { height: 100% }
.o-shell { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 16px; height: 100%; overflow: hidden; color: var(--fg); background: var(--bg) }
.o-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--bg-glow) }
.o-shell__bar { flex: none; display: flex; align-items: center; gap: 16px }
.o-shell__logo { flex: none; min-width: var(--w-sidebar); height: 44px; display: flex; align-items: center; padding: 0 14px; transition: min-width var(--dur-state) var(--ease-out) }
.o-shell__logo img { height: 26px; width: auto }
/* A product's own square mark and name instead of the vendor logo. */
.o-shell__logo img.o-shell__mark { height: 28px; width: 28px; border-radius: 7px; flex: none }
.o-shell__product { margin-left: 10px; font-size: var(--text-body); font-weight: 500; color: var(--fg); white-space: nowrap }
.o-shell[data-nav="collapsed"] .o-shell__product { display: none }
.o-shell__body { flex: 1; min-height: 0; display: flex; gap: 16px }
.o-shell[data-nav="collapsed"] .o-shell__logo { min-width: var(--w-sidebar-collapsed) }
.o-nav { flex: none; width: var(--w-sidebar); display: flex; flex-direction: column; gap: 14px; padding: 12px; overflow: hidden; transition: width var(--dur-state) var(--ease-out) }
.o-shell[data-nav="collapsed"] .o-nav { width: var(--w-sidebar-collapsed) }
.o-shell[data-nav="collapsed"] .o-nav :where(.o-navitem__label, .o-ws__text, .o-ws > .ti, .o-nav__wide) { display: none }
.o-shell[data-nav="collapsed"] .o-nav__foot { flex-direction: column }
.o-nav__list { display: flex; flex-direction: column; gap: 2px }
.o-ws { display: flex; align-items: center; gap: 10px; padding: 8px 5px 2px; border: 0; background: none; text-align: left; cursor: pointer }
.o-ws__text { flex: 1; min-width: 0; display: flex; flex-direction: column } .o-ws__name { font-size: var(--text-caption); font-weight: var(--weight-semibold) } .o-ws__kind { font-size: 12px; color: var(--fg-2); margin-top: 1px }
.o-ws > .ti { font-size: 15px; color: var(--fg-4) }
.o-navitem { display: flex; align-items: center; gap: 10px; height: var(--h-nav-item); padding: 0 10px; border-radius: 16px; color: var(--fg); text-decoration: none; cursor: pointer; transition: background var(--dur-base) ease }
.o-root a.o-navitem { color: var(--fg) }
.o-navitem > .ti { flex: none; width: 20px; text-align: center; font-size: 18px; color: rgba(var(--mute-rgb),.7) }
.o-navitem__label { flex: 1; min-width: 0; font-size: var(--text-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-navitem:hover { background: rgba(var(--glass-rgb),.45) }
.o-navitem[aria-current="page"] { background: rgba(var(--glass-rgb),.8); box-shadow: var(--shadow-nav-active, inset 0 1px 0 rgba(var(--rim-rgb),.9), 0 6px 16px -10px rgba(var(--shadow-rgb),.4)) }
.o-navitem[aria-current="page"] > .ti { color: var(--blue) } .o-navitem[aria-current="page"] .o-navitem__label { font-weight: var(--weight-medium) }
.o-nav__foot { margin-top: auto; display: flex; align-items: center; gap: 2px; padding-top: 10px; border-top: .5px solid var(--line-strong) }
.o-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; padding: 16px 6px 0 18px; overflow: hidden }
.o-main__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 2px 14px 24px 0 }

.o-pagehead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 8px 14px }
.o-pagehead__text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.o-pagehead h1, .o-h1 { margin: 0; font-size: var(--text-h1); font-weight: var(--weight-light); letter-spacing: 0; line-height: 1.2 }
.o-pagehead__sub { font-size: var(--text-caption); color: var(--fg-2) }
.o-sectionhead { display: flex; align-items: flex-end; gap: 12px; padding: 0 12px; margin-bottom: 8px }
.o-sectionhead__title { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-title); padding-bottom: 8px }
.o-sectionhead__meta { padding-bottom: 13px; font-size: var(--text-caption); color: var(--fg-3) }
.o-crumb { display: flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); color: var(--fg-2) }
.o-root .o-crumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2) } .o-root .o-crumb a:hover { color: var(--blue) }
.o-crumb .ti { font-size: 15px } .o-crumb [aria-current] { color: var(--fg) }
.o-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: var(--text-caption); color: var(--fg-2) } .o-meta .ti { font-size: 15px }

.o-seg { flex: none; max-width: 100%; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 18px; overflow-x: auto; background: var(--wash) }
.o-seg__opt { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; cursor: pointer; font-size: var(--text-caption); white-space: nowrap; color: var(--fg-2); background: transparent; transition: background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease }
.o-seg__opt .ti { font-size: 15px }
.o-seg__opt:hover { color: var(--fg) }
.o-root a.o-seg__opt { color: var(--fg-2); text-decoration: none } .o-root a.o-seg__opt:hover, .o-root a.o-seg__opt[aria-current="page"] { color: var(--fg) }
.o-seg__opt[aria-selected="true"], .o-seg__opt[aria-checked="true"], .o-seg__opt[aria-pressed="true"], .o-seg__opt[aria-current="page"] { color: var(--fg); background: var(--surface-raised); box-shadow: var(--shadow-raised) }
.o-seg__count { font-size: var(--text-nano); color: var(--fg-4); font-variant-numeric: tabular-nums }
.o-seg--sm { border-radius: 11px } .o-seg--sm .o-seg__opt { height: 28px; border-radius: var(--radius-option) }
.o-seg--fill { display: flex; width: 100% } .o-seg--fill .o-seg__opt { flex: 1 }
/* Wrap: every option stays visible on narrow surfaces (a side panel's tabs); rows wrap instead of scrolling. */
.o-seg--wrap { display: flex; flex-wrap: wrap; overflow: visible; border-radius: 13px } .o-seg--wrap .o-seg__opt { height: 28px; padding: 0 10px; border-radius: 10px }
.o-seg--glass { height: 34px; padding: 5px; border-radius: 17px; background: var(--glass-fill-track, rgba(var(--glass-rgb),.14)); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.4), inset 0 0 0 .5px rgba(var(--rim-rgb),.3) }
.o-seg--glass .o-seg__opt { height: 24px; padding: 0 8px; border-radius: 12px; font-size: var(--text-micro); color: rgba(var(--mute-rgb),.55) }
.o-seg--glass .o-seg__opt[aria-selected="true"] { color: var(--fg); background: linear-gradient(160deg, rgba(var(--glass-rgb),.26), rgba(var(--glass-rgb),.08)); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.75), inset 0 0 0 .5px rgba(var(--rim-rgb),.5), 0 2px 8px -5px rgba(var(--shadow-rgb),.25) }
.o-seg--collapse .o-seg__opt:not([aria-selected="true"]) .o-seg__label { display: none }

.o-tabs { display: flex; align-items: center; gap: 2px; border-bottom: .5px solid var(--line-strong) }
.o-tabs__tab { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; margin-bottom: -.5px; border: 0; background: none; cursor: pointer; font-size: var(--text-body); color: var(--fg-2) }
.o-tabs__tab:hover { color: var(--fg) }
.o-tabs__tab[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--blue) }

.o-wizard { display: flex; align-items: center; gap: 4px }
.o-wizard__step { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 8px; border: 0; border-radius: 17px; background: none; cursor: pointer; transition: background var(--dur-base) ease, opacity var(--dur-base) ease }
.o-wizard__step:disabled, .o-wizard__step[aria-disabled="true"] { opacity: .4; cursor: default }
.o-root a.o-wizard__step { color: inherit; text-decoration: none }
.o-wizard__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--fg-2); background: rgba(var(--mute-rgb),.12) }
.o-wizard__dot .ti { font-size: 13px }
.o-wizard__label { font-size: var(--text-body-sm); white-space: nowrap; color: rgba(var(--mute-rgb),.62) }
.o-wizard__step[data-state="done"] .o-wizard__dot { color: var(--on-accent); background: var(--green) }
.o-wizard__step[aria-current="step"] { padding-right: 14px; background: rgba(var(--glass-rgb),.62); box-shadow: inset 0 0 0 .5px rgba(var(--rim-rgb),.7), 0 8px 20px -14px rgba(var(--shadow-rgb),.5) }
.o-wizard__step[aria-current="step"] .o-wizard__dot { color: var(--on-accent); background: var(--blue) }
.o-wizard__step[aria-current="step"] .o-wizard__label { color: var(--fg) }
.o-wizardbar { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 16px; border-bottom: .5px solid var(--line-strong); background: rgba(var(--glass-rgb),.1) }
.o-wizardbar > :first-child, .o-wizardbar > :last-child { flex: 1 0 auto; display: flex } .o-wizardbar > :last-child { justify-content: flex-end }
@container (max-width: 540px) { .o-wizard__step:not([aria-current="step"]) .o-wizard__label { display: none } }

/* focused page: a navigation-free frame for setup, sign-in and single-task pages */
.o-focus { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; margin: 0; color: var(--fg); background: var(--bg) }
.o-focus::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg-glow) }
.o-focus__bar { flex: none; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 20px }
.o-root a.o-focus__brand, .o-focus__brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: var(--fg) }
.o-focus__brand img { height: 24px; width: auto }
.o-focus__product { padding-left: 12px; border-left: .5px solid var(--line-strong); font-size: var(--text-body); color: var(--fg-2); white-space: nowrap }
/* A product's own square mark instead of the vendor logo; the product name
   then follows without a divider. */
.o-focus__brand img.o-focus__mark { height: 28px; width: 28px; border-radius: 7px; flex: none }
.o-focus__mark + .o-focus__product { padding-left: 0; border-left: 0; color: var(--fg); font-weight: 500 }
.o-focus__main { flex: 1; width: 100%; max-width: var(--o-focus-width, 760px); margin: 0 auto; padding: 8px 20px 40px; display: flex; flex-direction: column; gap: 16px }
.o-focus--wide { --o-focus-width: 1040px }
.o-focus__panel { overflow: hidden; container-type: inline-size; animation: rise var(--dur-base) var(--ease-out) both }
.o-focus__panel > .o-wizardbar { height: auto; min-height: 60px; overflow-x: auto; scrollbar-width: none }
.o-focus__body { display: flex; flex-direction: column; gap: 18px; padding: 24px 28px 28px }
.o-focus__head { display: flex; flex-direction: column; gap: 6px }
.o-focus__title { margin: 0; font-size: var(--text-h1); font-weight: var(--weight-light); line-height: 1.2 }
.o-focus__lead { margin: 0; font-size: var(--text-body-sm); line-height: 1.55; color: var(--fg-2) }
.o-focus__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px }
.o-focus__grid > .o-focus__wide { grid-column: 1 / -1 }
.o-focus__group { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.o-focus__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 4px }
.o-focus__actions > .o-focus__aside { margin-right: auto }
.o-focus__foot { flex: none; padding: 0 20px 20px; text-align: center; font-size: var(--text-micro); color: var(--fg-3) }
@container (max-width: 560px) { .o-focus__grid { grid-template-columns: minmax(0, 1fr) } .o-focus__body { padding: 18px 16px 20px } }

.o-steps { display: flex; flex-direction: column }
.o-step { display: flex; gap: 16px; align-items: stretch }
.o-step__rail { flex: none; width: 34px; display: flex; flex-direction: column; align-items: center }
.o-step__node { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-micro); font-variant-numeric: tabular-nums; color: var(--fg-3); background: rgba(var(--glass-rgb),.45); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .4s ease, color .4s ease, box-shadow .4s ease }
.o-step__node .ti { font-size: 16px }
.o-step__line { flex: 1; width: 1.5px; margin: 6px 0; border-radius: 1px; background: rgba(var(--mute-rgb),.15); transition: background var(--dur-desk) ease }
.o-step:last-child .o-step__line { background: transparent }
.o-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px }
.o-step:last-child .o-step__body { padding-bottom: 0 }
.o-step__head { display: flex; align-items: center; gap: 10px; min-height: 34px; flex-wrap: wrap }
.o-step__label { font-size: var(--text-step); color: var(--fg-4); transition: color var(--dur-state) ease }
.o-step__time { margin-left: auto; font-size: var(--text-micro); color: var(--fg-3); font-variant-numeric: tabular-nums }
.o-step[data-state="done"] .o-step__node { color: var(--on-accent); background: var(--green); box-shadow: none }
.o-step[data-state="done"] .o-step__line { background: var(--green) }
.o-step[data-state="working"] .o-step__node { color: var(--on-accent); background: var(--indigo); box-shadow: none; animation: ring var(--dur-pulse) ease-in-out infinite }
.o-step[data-state="working"] .o-step__node .ti { animation: spin var(--dur-spin) linear infinite }
.o-step[data-state="working"] .o-step__line, .o-step[data-state="you"] .o-step__line { background: linear-gradient(color-mix(in srgb, var(--indigo) 70%, transparent), rgba(var(--mute-rgb),.15)) }
.o-step[data-state="you"] .o-step__node { color: var(--blue); background: rgba(var(--glass-rgb),.95); box-shadow: inset 0 0 0 1.5px var(--blue), 0 8px 20px -12px color-mix(in srgb, var(--blue) 60%, transparent) }
.o-step:not([data-state="pending"]) .o-step__label { color: var(--fg) }

/* ===================== data display ===================== */
.o-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px }
.o-kpi { overflow: hidden; padding: 16px 18px; display: flex; flex-direction: column }
.o-kpi__label { display: flex; align-items: center; gap: 9px; font-size: var(--text-body-lg) } .o-kpi__label .ti { font-size: 21px; color: var(--tone) }
.o-kpi__value { margin-top: 14px; font-size: clamp(30px, 3vw, var(--text-display)); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; white-space: nowrap }
.o-kpi__delta { margin-top: 12px; font-size: var(--text-body-sm); line-height: 1.45; color: var(--fg-2) }
.o-delta { white-space: nowrap; color: var(--ok) } .o-delta--down { color: var(--danger) } .o-delta .ti { font-size: 15px; vertical-align: -2px; margin-right: 2px }
.o-kpi__foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--text-body-sm); color: var(--fg-2) } .o-kpi__foot b { font-weight: 400; color: var(--fg); font-variant-numeric: tabular-nums }

.o-tiles { display: grid; grid-template-columns: repeat(var(--o-cols, 3), minmax(0,1fr)); gap: 1px; border-radius: 14px; overflow: hidden; background: rgba(var(--mute-rgb),.08) }
.o-tile { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 0; text-align: left; background: rgba(var(--glass-rgb),.72); color: var(--fg) }
button.o-tile { cursor: pointer } button.o-tile:hover { background: rgba(var(--glass-rgb),.95) }
.o-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--blue) 9%, rgba(var(--glass-rgb),.72)) }
.o-tile__label { display: flex; align-items: center; gap: 6px; font-size: var(--text-micro); color: var(--fg-2) } .o-tile__label .ti { font-size: 15px }
.o-tile__value { font-size: 21px; font-weight: var(--weight-light); font-variant-numeric: tabular-nums; color: var(--tone, var(--fg)) }
.o-tile__sub { font-size: var(--text-nano); color: var(--fg-4) }
.o-tiles--lg .o-tile { padding: 14px 16px } .o-tiles--lg .o-tile__value { font-size: 23px } .o-tiles--lg { border-radius: 16px }
.o-herostats { display: flex; align-items: stretch } .o-herostat { display: flex; flex-direction: column; gap: 3px; padding: 0 24px; border-left: .5px solid var(--line-strong) } .o-herostat:first-child { border-left: 0; padding-left: 0 }
.o-herostat__label { font-size: var(--text-micro); color: var(--fg-3) } .o-herostat__value { font-size: var(--text-h1); font-weight: var(--weight-light); letter-spacing: -.6px; line-height: 1.1; font-variant-numeric: tabular-nums } .o-herostat__note { font-size: var(--text-micro); color: var(--tone, var(--fg-3)) }

.o-bignum { display: flex; align-items: baseline; gap: 10px }
.o-bignum__value { font-size: var(--text-hero); font-weight: var(--weight-light); letter-spacing: var(--tracking-hero); line-height: 1; font-variant-numeric: tabular-nums; transition: opacity var(--dur-base) ease }
.o-bignum__unit { font-size: 17px; color: var(--fg-2) }
.o-bignum--md .o-bignum__value { font-size: var(--text-display); letter-spacing: -.4px } .o-bignum--sm .o-bignum__value { font-size: 31px; letter-spacing: -.8px }
.htmx-request .o-bignum__value, .o-bignum.is-counting .o-bignum__value { opacity: .45 }
.o-updating { display: none; font-size: 13px; color: var(--fg-4); animation: fade var(--dur-base) ease both }
.htmx-request .o-updating, .htmx-request.o-updating { display: inline }

/* tables (grid based so columns can collapse per container width) */
.o-table { display: flex; flex-direction: column; border-radius: var(--radius-section); background: var(--surface-well); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.8), inset 0 0 0 .5px var(--line), 0 14px 34px -26px rgba(var(--shadow-rgb),.4); container-type: inline-size }
.o-tr { display: grid; grid-template-columns: var(--o-cols); align-items: center; gap: 12px; min-height: var(--h-row); padding: 6px 18px; border-top: .5px solid var(--line-faint); color: var(--fg); transition: background var(--dur-fast) ease }
.o-root a.o-tr { color: var(--fg) }
/* The table's rounded corners: no divider above the first row, and the end rows' hover follows the radius. */
.o-table > .o-tr:first-child { border-top: 0; border-top-left-radius: var(--radius-section); border-top-right-radius: var(--radius-section) }
.o-table > .o-tr:last-child { border-bottom-left-radius: var(--radius-section); border-bottom-right-radius: var(--radius-section) }
.o-tr:is(a, [data-href]) { cursor: pointer } .o-tr:is(a, [data-href]):hover { background: rgba(var(--glass-rgb),.6) }
.o-tr[aria-selected="true"] { background: var(--sel) }
/* Reveal: a native <details> whose <summary> is styled as a button (give it
   .o-btn classes); the content shows below when open. No script needed. */
.o-reveal > summary { width: fit-content; list-style: none; cursor: pointer }
.o-reveal > summary::-webkit-details-marker { display: none }
.o-reveal[open] > summary { margin-bottom: 14px }
/* An item list: name, tags, actions; rows can be indented as a tree. The
   column template is fixed so pages need no inline style (CSP). */
.o-table--items { --o-cols: minmax(0,1fr) auto auto; --o-cols-sm: minmax(0,1fr) auto }
.o-tr[data-depth="1"] > :first-child { padding-left: 20px } .o-tr[data-depth="2"] > :first-child { padding-left: 40px }
.o-tr[data-depth="3"] > :first-child { padding-left: 60px } .o-tr[data-depth="4"] > :first-child { padding-left: 80px }
.o-tr[data-depth="5"] > :first-child { padding-left: 100px } .o-tr[data-depth="6"] > :first-child { padding-left: 120px }
.o-tr--head { position: sticky; top: 0; z-index: var(--z-sticky); min-height: 40px; padding-top: 4px; padding-bottom: 0; border-top: 0; border-radius: var(--radius-section) var(--radius-section) 0 0; font-size: var(--text-nano); letter-spacing: .4px; text-transform: uppercase; color: var(--fg-4); background: rgba(var(--glass-rgb),.88); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) }
.o-th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit }
.o-th-sort .ti { font-size: 13px; visibility: hidden } [aria-sort="ascending"] > .o-th-sort .ti, [aria-sort="descending"] > .o-th-sort .ti { visibility: visible }
.o-td-r { text-align: right; justify-self: end } .o-td-main { display: flex; align-items: center; gap: 11px; min-width: 0 }
.o-root a.o-td-stack { color: var(--fg) }
.o-td-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.o-td-stack > :is(.o-pill, .o-tag) { align-self: flex-start }
.o-td-title { font-size: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .o-td-sub { font-size: 13px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-td-muted { font-size: var(--text-micro); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-table__foot { padding: 10px 18px 12px; border-top: .5px solid var(--line-faint); font-size: var(--text-micro); color: var(--fg-3) }
.o-table__empty { display: flex; align-items: center; gap: 10px; min-height: var(--h-row); padding: 0 18px; font-size: var(--text-body-sm); color: var(--fg-2) } .o-table__empty .ti { font-size: 18px; color: var(--fg-4) }
@container (max-width: 820px) { .o-col-md { display: none !important } }
@container (max-width: 560px) { .o-col-sm { display: none !important } }
.o-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.o-bulkbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 36px; padding: 0 6px 0 14px; border-radius: 18px; background: rgba(var(--glass-rgb),.85); box-shadow: inset 0 0 0 .5px var(--line-strong), 0 10px 24px -18px rgba(var(--shadow-rgb),.5); animation: rise var(--dur-base) ease both }
.o-bulkbar__count { font-size: var(--text-body-sm); margin-right: 6px }

.o-lrow { display: flex; align-items: center; gap: 12px; min-height: var(--h-row-lg); padding: 11px 12px 11px 14px; border-radius: var(--radius-row); color: var(--fg); transition: background var(--dur-base) ease }
.o-lrow + .o-lrow { box-shadow: 0 -.5px 0 rgba(var(--mute-rgb),.15) }
.o-root a.o-lrow { color: var(--fg) } a.o-lrow:hover { background: rgba(var(--glass-rgb),.55) }
.o-lrow.is-new { animation: glow 4.5s ease-out both }
.o-lrow__main { flex: 1; min-width: 0 }
.o-lrow__title { display: flex; align-items: center; gap: 8px; font-size: var(--text-row) } .o-lrow__title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-lrow__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: var(--text-caption); color: var(--fg-2); white-space: nowrap; overflow: hidden } .o-lrow__meta .ti { font-size: 15px }
.o-lrow__stat { flex: none; text-align: right } .o-lrow__stat b { display: block; font-weight: 400; font-size: var(--text-row); font-variant-numeric: tabular-nums; color: var(--tone, var(--fg)) } .o-lrow__stat small { display: block; margin-top: 2px; font-size: var(--text-micro); color: var(--fg-4) }
.o-lrow__chev { flex: none; font-size: 16px; color: var(--fg-5) }
.o-lrow .o-bar { margin-top: 8px }

.o-signal { display: flex; align-items: center; gap: 12px; min-height: var(--h-row-lg); padding: 11px 8px 11px 14px; border-radius: var(--radius-row) }
.o-signal + .o-signal { box-shadow: 0 -.5px 0 rgba(var(--mute-rgb),.15) }
.o-signal > .ti { flex: none; font-size: 20px; color: var(--tone) }
.o-signal__main { flex: 1; min-width: 0 }
.o-signal__title { display: flex; align-items: center; gap: 8px; font-size: var(--text-row) }
.o-signal__detail { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: var(--text-caption); line-height: 1.4; color: rgba(var(--mute-rgb),.62); text-wrap: pretty }
.o-signal__action { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; font-size: var(--text-caption); white-space: nowrap; cursor: pointer; color: var(--tone); background: var(--tone-tint); transition: transform var(--dur-press) ease }
.o-signal__action:active { transform: scale(.96) }
.o-signal.is-new { animation: land .6s var(--ease-out) both }

.o-kv { display: flex; flex-direction: column; padding: 14px 0 6px }
.o-kv + .o-kv { border-top: .5px solid var(--line) }
.o-eyebrow { font-size: var(--text-nano); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(var(--mute-rgb),.48) }
.o-kv .o-eyebrow { padding-bottom: 6px }
.o-kv__row { display: flex; align-items: center; gap: 10px; min-height: 32px }
.o-kv__key { flex: none; width: 86px; font-size: var(--text-micro); color: var(--fg-3) }
.o-kv__val { flex: 1; min-width: 0; font-size: var(--text-body-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums }

/* bars and charts: CSS only, values arrive as --o-value (0–100) from the server */
.o-bar { position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: var(--wash-hover) }
.o-bar__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--o-value, 0) * 1%); border-radius: inherit; background: var(--tone-solid, var(--green)); transition: width .4s var(--ease-out) }
.o-bar--3 { height: 3px } .o-bar--6 { height: 6px; border-radius: 3px } .o-bar--8 { height: 8px; border-radius: 4px } .o-bar--10 { height: 10px; border-radius: 5px }
.o-bar--goal { overflow: visible }
.o-bar__forecast { position: absolute; top: 0; bottom: 0; left: calc(var(--o-from) * 1%); width: calc(var(--o-value) * 1%); border-radius: 0 3px 3px 0; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--green) 30%, transparent) 0 4px, transparent 4px 7px) }
.o-bar__aim { position: absolute; top: -4px; bottom: -4px; left: calc(var(--o-value) * 1%); width: 2px; border-radius: 1px; background: rgba(var(--mute-rgb),.5) }
.o-barrows { display: flex; flex-direction: column; gap: 4px }
.o-barrow { display: grid; grid-template-columns: minmax(0,108px) minmax(0,1fr) 44px 14px; align-items: center; gap: 10px; height: 32px; padding: 0 8px; margin: 0 -8px; border: 0; border-radius: var(--radius-option); background: transparent; color: var(--fg); text-align: left; cursor: pointer; transition: background var(--dur-fast) ease }
.o-barrow:hover { background: rgba(var(--glass-rgb),.7) }
.o-barrow[aria-pressed="true"] { background: var(--sel) } .o-barrow[aria-pressed="true"] .o-barrow__label { color: var(--blue) }
.o-barrow__label { font-size: var(--text-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-barrow__track { height: 8px; border-radius: 4px; overflow: hidden; background: var(--wash) }
.o-barrow__fill { display: block; height: 100%; width: max(3%, calc(var(--o-value) * 1%)); border-radius: 4px; background: var(--tone-solid, var(--blue)); transition: width .35s var(--ease-out) }
.o-barrow__value { font-size: var(--text-micro); text-align: right; color: var(--fg-2); font-variant-numeric: tabular-nums }
.o-barrow > .ti { font-size: 14px; color: var(--fg-5) } .o-barrow[aria-pressed="true"] > .ti { color: var(--blue) }
.o-funnel .o-barrow { grid-template-columns: 96px minmax(0,1fr) 64px 52px 20px; height: 34px }
.o-funnel .o-barrow__track { height: 20px; border-radius: 6px; background: rgba(var(--mute-rgb),.06) }
.o-funnel .o-barrow__fill { border-radius: 6px; background: var(--blue); opacity: calc(.85 - var(--o-step, 0) * .14) }
.o-funnel .o-barrow:last-child .o-barrow__fill { opacity: 1 }
.o-funnel .o-barrow:last-child .o-barrow__fill { background: var(--green) }
.o-stack { display: flex; height: 10px; gap: 2px; border-radius: 5px; overflow: hidden }
.o-stack > span { flex: var(--o-flex) 1 0; min-width: 3px; background: var(--tone-solid) }
.o-stack--12 { height: 12px; border-radius: 6px } .o-stack--6 { height: 6px; border-radius: 3px }
.o-legend { display: flex; flex-wrap: wrap; gap: 6px 18px }
.o-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-caption); color: var(--fg-2) } .o-legend__item b { font-weight: 400; color: var(--fg); font-variant-numeric: tabular-nums }
.o-cols { display: grid; grid-template-columns: repeat(var(--o-n, 6), minmax(0,1fr)); gap: 6px; height: 150px }
.o-col { min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 6px 4px 4px; border: 0; border-radius: var(--radius-field); background: transparent; color: var(--fg-2); cursor: pointer }
.o-col:hover { background: rgba(var(--glass-rgb),.7) } .o-col[aria-pressed="true"] { background: var(--sel); color: var(--blue) }
.o-col__bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px }
.o-col__bar { width: 38%; max-width: 20px; height: max(2%, calc(var(--o-value) * 1%)); border-radius: 4px 4px 2px 2px; background: var(--tone-solid); transition: height .35s var(--ease-out) }
.o-col__bar--due { box-shadow: inset 0 0 0 1.5px var(--orange); background: repeating-linear-gradient(135deg, var(--exclude-sel) 0 5px, transparent 5px 10px) }
.o-col__label { font-size: 13px; text-align: center; font-variant-numeric: tabular-nums }
.o-cols--months { height: 128px; --o-n: 12 } .o-cols--months .o-col { cursor: default; padding: 0 } .o-cols--months .o-col__bar { width: 100%; max-width: 28px; border-radius: 7px } .o-cols--months .o-col__label { font-size: 12px; color: var(--fg-4) }
.o-cols--months .o-col__bar.is-muted { background: color-mix(in srgb, var(--indigo) 35%, transparent) }

/* timelines */
.o-tl { display: flex; flex-direction: column }
.o-tl__item { display: flex; align-items: stretch; gap: 14px }
.o-tl__rail { flex: none; width: 32px; display: flex; flex-direction: column; align-items: center }
.o-tl__rail::before, .o-tl__rail::after { content: ""; width: 1.5px; background: rgba(var(--mute-rgb),.18) }
.o-tl__rail::before { height: 12px } .o-tl__rail::after { flex: 1; min-height: 12px }
.o-tl__item:first-child .o-tl__rail::before, .o-tl__item:last-child .o-tl__rail::after { background: transparent }
.o-tl__node { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--tone); background: rgba(var(--glass-rgb),.9); box-shadow: inset 0 0 0 1px var(--line-strong) }
.o-tl__node .ti { font-size: 17px } .o-tl__node--solid { color: var(--on-accent); background: var(--tone-solid); box-shadow: none }
.o-tl__body { flex: 1; min-width: 0; display: flex; gap: 12px; padding: 12px 0 14px }
.o-tl__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.o-tl__when { font-size: var(--text-micro); color: var(--fg-3); font-variant-numeric: tabular-nums } .o-tl__title { font-size: 15.5px } .o-tl__sub { font-size: var(--text-micro); color: var(--fg-2) }
.o-tl__aside { flex: none; padding-top: 18px; text-align: right } .o-tl__aside b { display: block; font-weight: 400; font-size: var(--text-row); color: var(--tone, var(--fg)); font-variant-numeric: tabular-nums } .o-tl__aside small { font-size: 13px; color: var(--fg-4) }
.o-tl__total { display: flex; align-items: baseline; gap: 14px; padding: 12px 0 8px 46px; border-top: .5px solid var(--line); font-size: var(--text-body-sm); color: var(--fg-2) } .o-tl__total b { margin-left: auto; font-weight: 400; font-size: var(--text-row); color: var(--fg) }
.o-log { display: flex; flex-direction: column }
.o-log__item { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; animation: rise .25s ease both }
.o-log__text { font-size: var(--text-body-sm) } .o-log__meta { font-size: 13px; color: var(--fg-4) }

/* plain-language segment sentence */
.o-sentence { max-width: var(--w-sentence); margin: 0; font-size: var(--text-title); font-weight: var(--weight-light); line-height: 1.6; letter-spacing: var(--tracking-display); text-wrap: pretty }
.o-sentence--sm { font-size: 20px; letter-spacing: -.1px }
.o-sentence--exclude { font-size: 15.5px; font-weight: 400; letter-spacing: var(--tracking-body); line-height: 1.7; color: var(--fg-2) }
.o-phrase { display: inline; padding: 1px 7px; border: 0; border-radius: var(--radius-token); font: inherit; letter-spacing: inherit; cursor: pointer; color: var(--blue); background: var(--sel); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background var(--dur-base) ease, color var(--dur-base) ease, box-shadow var(--dur-base) ease }
.o-phrase:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 30%, transparent) }
.o-phrase[aria-expanded="true"] { color: var(--on-accent); background: var(--blue) }
.o-phrase--exclude { color: var(--orange); background: var(--exclude-sel) }
.o-phrase--exclude:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--orange) 30%, transparent) }
.o-phrase--exclude[aria-expanded="true"] { color: var(--on-accent); background: var(--orange) }
.o-adddetail { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; height: 30px; margin: 0 0 4px 10px; padding: 0 12px 0 8px; border: 0; border-radius: 15px; cursor: pointer; font-size: var(--text-body-sm); font-weight: 400; letter-spacing: 0; color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, transparent); transition: background var(--dur-fast) ease }
.o-adddetail:hover { background: color-mix(in srgb, var(--blue) 15%, transparent) } .o-adddetail .ti { font-size: 15px }
.o-optrows { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: var(--radius-well); background: var(--surface-well); box-shadow: var(--edge-block) }
.o-optrow { display: grid; grid-template-columns: 22px minmax(0,1fr) minmax(60px,220px) 64px; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border: 0; border-radius: 12px; cursor: pointer; text-align: left; color: var(--fg); background: transparent; transition: background var(--dur-fast) ease }
.o-optrow:hover { background: rgba(var(--glass-rgb),.8) }
.o-optrow[aria-checked="true"] { background: var(--sel) } .o-optrow[aria-checked="true"] .o-optrow__label { color: var(--blue) }
.o-optrow__tick { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); box-shadow: inset 0 0 0 1.5px rgba(var(--mute-rgb),.3); transition: background var(--dur-fast) ease } .o-optrow__tick .ti { font-size: 14px; opacity: 0 }
.o-optrow[aria-checked="true"] .o-optrow__tick { background: var(--blue); box-shadow: none } .o-optrow[aria-checked="true"] .o-optrow__tick .ti { opacity: 1 }
.o-optrow__label { font-size: var(--text-body) }
.o-optrow__track { height: 8px; border-radius: 4px; overflow: hidden; background: var(--wash) }
.o-optrow__fill { display: block; height: 100%; width: max(3%, calc(var(--o-value) * 1%)); border-radius: 4px; background: rgba(var(--mute-rgb),.28); transition: width .35s var(--ease-out), background var(--dur-base) ease }
.o-optrow[aria-checked="true"] .o-optrow__fill { background: var(--blue) }
.o-optrow__count { font-size: var(--text-caption); text-align: right; color: var(--fg-2); font-variant-numeric: tabular-nums }

/* ===================== feedback ===================== */
.o-toasts { position: absolute; left: 50%; bottom: 20px; z-index: var(--z-toast); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none }
.o-toast { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 16px; border-radius: 20px; font-size: var(--text-body-sm); white-space: nowrap; color: #fff; background: var(--toast); box-shadow: var(--shadow-toast); animation: rise var(--dur-base) ease both }
.o-toast__action { height: 28px; padding: 0 10px; border: 0; border-radius: 14px; background: none; cursor: pointer; font-size: var(--text-body-sm); color: var(--toast-action) }
.o-toast__action:hover { color: #fff; background: rgba(255,255,255,.1) }
.o-toast__close { width: 26px; height: 26px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: none; cursor: pointer; color: rgba(255,255,255,.6) } .o-toast__close .ti { font-size: 15px }
.o-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px 24px; min-height: 220px; text-align: center }
.o-empty__icon { width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--tone, var(--ok)); background: var(--tone-tint, var(--green-tint)) } .o-empty__icon .ti { font-size: 25px }
.o-empty__title { font-size: 17px } .o-empty__body { max-width: 320px; font-size: var(--text-body-sm); line-height: 1.45; color: var(--fg-2); text-wrap: pretty }
.o-empty .o-btn { margin-top: 10px }
.o-skel { display: block; height: 12px; border-radius: 6px; background: var(--shimmer); background-size: 200% 100%; animation: shimmer var(--dur-shimmer) ease-in-out infinite }
.o-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--tone-solid) 8%, transparent); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--tone-solid) 24%, transparent) }
.o-banner__icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); background: var(--tone-solid) } .o-banner__icon .ti { font-size: 16px }
.o-banner__title { font-size: var(--text-body) } .o-banner__body { font-size: var(--text-micro); color: var(--fg-2) }
.o-banner--inline { padding: 9px 12px; border-radius: 13px; gap: 9px; font-size: var(--text-micro); line-height: 1.45; color: var(--tone) } .o-banner--inline > .ti { font-size: 16px }
.o-issues { display: flex; flex-direction: column; padding: 4px 16px; border-radius: 16px; background: var(--surface-well); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.12) }
.o-issue { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0 }
.o-issue + .o-issue { border-top: .5px solid var(--line) }
.o-issue > .ti { flex: none; font-size: 18px; color: var(--tone) }
.o-issue__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-body) } .o-issue__text small { font-size: var(--text-micro); color: var(--fg-2) }
.o-ticker__item { flex: 1 1 220px; min-width: 0; display: flex; align-items: flex-start; gap: 9px; font-size: 15.5px; line-height: 20px; animation: rise .5s var(--ease-out) both } .o-ticker__item .ti { font-size: 18px; line-height: 20px; color: var(--tone) }
[data-tip] { position: relative }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: var(--z-menu); width: max-content; max-width: 220px; padding: 7px 10px; border-radius: 9px; font-size: 13px; line-height: 1.4; font-weight: 400; letter-spacing: 0; text-align: left; white-space: normal; color: #fff; background: var(--toast); box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); animation: fade var(--dur-fast) ease both; pointer-events: none }

/* ===================== overlays ===================== */
.o-menu { min-width: 200px; margin: 0; padding: 5px; border: 0; border-radius: var(--radius-menu); color: var(--fg); background: var(--surface-popover); box-shadow: var(--shadow-popover); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); animation: ddin .16s var(--ease-out) both }
.o-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: var(--radius-option); background: none; cursor: pointer; text-align: left; font-size: var(--text-body-sm); color: var(--fg); white-space: nowrap }
.o-menu__item > .ti { font-size: 16px; opacity: .8 }
.o-menu__item:hover, .o-menu__item[data-active] { background: rgba(var(--mute-rgb),.075) }
.o-menu__item--danger { color: var(--danger) }
.o-menu__item:disabled { opacity: .35; cursor: default; background: none }
.o-menu__item--rich { padding: 8px 12px; gap: 11px; border-radius: var(--radius-tile) } .o-menu__text { display: flex; flex-direction: column } .o-menu__hint { font-size: 13px; color: var(--fg-3) }
.o-menu__sep { height: .5px; margin: 4px 6px; background: var(--line) }
.o-menu__head { padding: 6px 10px 8px; font-size: 13px; line-height: 1.45; color: var(--fg-3) }
.o-menu__row { padding: 4px 5px } /* a control inside a menu, e.g. the theme picker */
.o-menu__search { display: flex; align-items: center; gap: 8px; height: 38px; margin: -5px -5px 4px; padding: 0 12px; border-bottom: .5px solid var(--line) } .o-menu__search .ti { font-size: 15px; color: var(--fg-4) } .o-menu__search input { flex: 1; border: 0; outline: 0; background: none; font-size: var(--text-body-sm) }
.o-option { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px 6px 8px; border-radius: 8px; cursor: pointer; font-size: var(--text-body-sm) }
.o-option > .ti { width: 16px; font-size: 15px; color: transparent } .o-option small { margin-left: auto; font-size: 13px; color: var(--fg-4) }
.o-option:hover, .o-option[data-active] { background: rgba(var(--mute-rgb),.075) }
.o-option[aria-selected="true"] { color: var(--blue) } .o-option[aria-selected="true"] > .ti { color: var(--blue) }
.o-option[aria-checked] > .o-check { pointer-events: none }

.o-dialog { width: min(var(--o-w, var(--w-dialog-lg)), calc(100% - 44px)); max-height: calc(100% - 44px); padding: 0; border: 0; border-radius: var(--radius-dialog); overflow: hidden; display: flex; flex-direction: column; color: var(--fg); background: var(--surface-dialog); box-shadow: var(--shadow-dialog); -webkit-backdrop-filter: var(--blur-dialog); backdrop-filter: var(--blur-dialog); animation: land .36s var(--ease-out) both }
dialog.o-dialog:not([open]) { display: none }
.o-dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: var(--blur-scrim); backdrop-filter: var(--blur-scrim); animation: fade var(--dur-state) ease }
.o-dialog--md { --o-w: var(--w-dialog-md) } .o-dialog--sm { --o-w: var(--w-dialog-sm); border-radius: var(--radius-card) }
.o-dialog__head { display: flex; align-items: center; gap: 14px; padding: 18px 16px 14px 24px }
.o-dialog__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px } .o-dialog__title { margin: 0; font-size: var(--text-step); font-weight: 400; line-height: 1.3 } .o-dialog__sub { font-size: var(--text-micro); line-height: 1.4; color: var(--fg-2) }
.o-dialog__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 24px 20px; border-top: .5px solid var(--line) }
.o-dialog__foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px 24px; border-top: .5px solid var(--line) }
/* Media dialog: a film or recording on black, full width at 16:9; a [data-o-play] video starts when the dialog opens and pauses when it closes. */
.o-dialog--media { --o-w: 1200px; color: #f5f5f7; background: #000 }
.o-dialog--media .o-dialog__head { padding: 10px 10px 10px 20px }
.o-dialog--media .o-dialog__title { color: #f5f5f7 }
.o-dialog--media .o-iconbtn { color: #f5f5f7 }
.o-dialog__media { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000 }
.o-dialog__summary { flex: 1; font-size: var(--text-caption); color: var(--fg-2); font-variant-numeric: tabular-nums }
.o-confirm { display: flex; flex-direction: column; gap: 10px; padding: 24px }
.o-confirm__title { margin: 0; font-size: 21px; font-weight: var(--weight-light); letter-spacing: var(--tracking-display) }
.o-confirm__body { margin: 0; font-size: var(--text-body-sm); line-height: 1.5; color: var(--fg-2); text-wrap: pretty }
.o-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px }
.o-drawer { position: absolute; inset: 0; z-index: var(--z-drawer); display: flex; justify-content: flex-end }
.o-drawer__scrim { position: absolute; inset: 0; background: rgba(var(--shadow-rgb),.16); animation: fade var(--dur-base) ease both }
.o-drawer__panel { position: relative; width: min(var(--w-drawer), 100%); height: 100%; display: flex; flex-direction: column; background: var(--surface-dialog); box-shadow: inset .5px 0 0 var(--line-strong), -24px 0 60px -30px rgba(var(--shadow-rgb),.5); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); animation: slidein .28s var(--ease-out) both }
.o-drawer__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: .5px solid var(--line-strong) }
.o-editor { position: absolute; inset: 0; z-index: var(--z-editor); display: flex; flex-direction: column; background: var(--bg); animation: fade .16s ease both }
.o-editor::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-glow) }
.o-editor__bar { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; height: 64px; padding: 0 16px; border-bottom: .5px solid var(--line) }
.o-editor__bar > :last-child { justify-self: end; display: flex; gap: 8px }

/* ===================== agent ===================== */
.o-mark { --s: 22px; position: relative; display: block; flex: none; width: var(--s); height: var(--s) }
.o-mark__body { position: absolute; inset: 0; background: var(--ink); -webkit-mask: var(--o-symbol) center / contain no-repeat; mask: var(--o-symbol) center / contain no-repeat }
.o-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.o-mark__look { transition: transform var(--dur-fold) var(--ease-out) }
.o-mark__eye { fill: var(--ink); transform-box: fill-box; transform-origin: center }
.o-mark__lid, .o-mark__smile { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; display: none }
.o-mark[data-mood="idle"] .o-mark__move { animation: avWander 11s ease-in-out infinite }
.o-mark:is([data-mood="idle"],[data-mood="listen"],[data-mood="needs"]) .o-mark__eye { animation: avBlink 5s ease-in-out infinite }
.o-mark[data-mood="listen"] .o-mark__look { transform: translate(0, 2px) }
.o-mark[data-mood="needs"] .o-mark__look { transform: translate(-2.4px, 0) }
.o-mark[data-mood="work"] .o-mark__move { animation: avScan 1.8s ease-in-out infinite }
.o-mark[data-mood="think"] { animation: avRock 3s ease-in-out infinite }
.o-mark:is([data-mood="think"],[data-mood="sorry"]) .o-mark__eye { display: none } .o-mark:is([data-mood="think"],[data-mood="sorry"]) .o-mark__lid { display: inline }
.o-mark[data-mood="happy"] .o-mark__eye { display: none } .o-mark[data-mood="happy"] .o-mark__smile { display: inline }
.o-mark[data-still] *, .o-mark[data-still] { animation: none !important }
.o-mark--20 { --s: 20px } .o-mark--30 { --s: 30px }

/* The panel owns two independent states: open (data-open) and width (data-width → --o-agent-w).
   Both animate: the panel's width moves, main gives way, and the content keeps the target width
   while the edge travels, so the panel slides in, out, wider or narrower instead of reflowing. */
.o-agent { --o-agent-w: var(--w-agent-wide); display: flex; flex-direction: column; flex: none; width: var(--o-agent-w); min-height: 0; overflow: hidden;
  transition: width var(--dur-agent) var(--ease-out), margin-left var(--dur-agent) var(--ease-out), opacity var(--dur-agent) ease, transform var(--dur-agent) var(--ease-out), box-shadow var(--dur-agent) ease }
.o-agent > :not(.o-agent__history) { flex-shrink: 0; width: var(--o-agent-w); max-width: none }
.o-agent > .o-thread { flex-shrink: 1 }
.o-agent[data-width="narrow"] { --o-agent-w: var(--w-agent) }
.o-agent:not([data-open]) { width: 0; margin-left: calc(-1 * var(--space-8)); opacity: 0; box-shadow: none; pointer-events: none }
.o-agent:not([data-open]) :is(.o-welcome, .o-welcome *, .o-welcome__orb::before, .o-welcome__orb::after) { animation-play-state: paused }
/* Main fades back in after the panel has made room; it fades out at once when the panel goes full, so its content is never seen squeezed. */
.o-main { transition: opacity .24s ease .2s, margin-right var(--dur-agent) var(--ease-out), padding var(--dur-agent) var(--ease-out) }
.o-agent__head { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 12px 0 18px; border-bottom: .5px solid var(--line-strong) }
.o-agent__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2 } .o-agent__name b { font-size: 16px; font-weight: var(--weight-semibold) } .o-agent__name small { font-size: 13px; color: var(--fg-2) }
.o-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px }
.o-msg-user { display: flex; justify-content: flex-end; animation: rise .25s ease both }
.o-msg-user > div { max-width: 85%; padding: 10px 15px; border-radius: var(--radius-bubble); font-size: var(--text-row); line-height: 1.5; letter-spacing: 0; background: var(--bubble); box-shadow: inset 0 0 0 1px var(--bubble-line); text-wrap: pretty }
.o-msg-ai { display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 0; animation: rise var(--dur-state) ease both }
.o-prose { max-width: var(--w-prose); display: flex; flex-direction: column; gap: 14px; font-size: var(--text-agent); line-height: var(--leading-agent); letter-spacing: 0 }
.o-prose > * { margin: 0 } .o-prose h3 { margin-top: 6px; font-size: var(--text-step); font-weight: var(--weight-semibold); line-height: 1.4; letter-spacing: -.1px }
.o-prose strong { font-weight: var(--weight-semibold) } .o-prose ul, .o-prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px }
.o-deskline { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--text-micro); color: var(--fg-3); animation: fade var(--dur-state) ease both } .o-deskline .ti { font-size: 14px; color: var(--green) }
.o-worksteps { display: flex; flex-direction: column; gap: 5px }
.o-workstep { display: flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); line-height: 1.4; color: rgba(var(--mute-rgb),.8); transition: color var(--dur-state) ease }
.o-workstep .ti { flex: none; font-size: 15px }
.o-workstep[data-state="done"] .ti { color: var(--green) }
.o-workstep[data-state="now"] { color: var(--fg) } .o-workstep[data-state="now"] .ti { color: var(--indigo); animation: spin var(--dur-spin) linear infinite }
.o-workstep[data-state="todo"] { color: var(--fg-3) } .o-workstep[data-state="todo"] .ti { color: rgba(var(--mute-rgb),.3) }
.o-made { display: flex; align-items: center; gap: 10px; margin-top: 6px }
.o-made__disc { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); background: var(--green); box-shadow: 0 6px 14px -8px var(--green); animation: land var(--dur-land) var(--ease-out) both } .o-made__disc .ti { font-size: 16px }
.o-made__title { font-size: var(--text-lead); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: 1.2 }
.o-madecard { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--radius-row); color: var(--fg); background: rgba(var(--glass-rgb),.55); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; transition: background var(--dur-fast) ease, transform var(--dur-fast) ease }
.o-root a.o-madecard { color: var(--fg) } .o-madecard:hover { background: rgba(var(--glass-rgb),.9); transform: translateY(-1px) }
.o-madecard .o-tileicon { --s: 34px; border-radius: var(--radius-tile) } .o-madecard .o-tileicon .ti { font-size: 18px }
.o-madecard__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px } .o-madecard__name { font-size: var(--text-body) } .o-madecard__meta { display: flex; align-items: center; gap: 6px; font-size: var(--text-micro); color: var(--fg-2) }
.o-madecard__open { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-caption); color: var(--blue) } .o-madecard__open .ti { font-size: 14px }
.o-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px }
.o-feedback { display: flex; align-items: center; gap: 2px; margin: -4px 0 0 -6px } .o-feedback .o-iconbtn { --s: 30px; color: var(--fg-4) } .o-feedback .o-iconbtn .ti { font-size: 17px } .o-feedback .o-iconbtn[aria-pressed="true"] { color: var(--fg); background: none }
.o-agentstatus { display: flex; align-items: center; gap: 9px; margin-top: 2px } .o-agentstatus > span:last-child { font-size: var(--text-body); color: var(--fg-2); animation: avBreath var(--dur-pulse) ease-in-out infinite }
.o-divider-label { display: flex; align-items: center; gap: 10px; font-size: var(--text-nano); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-4) } .o-divider-label::before, .o-divider-label::after { content: ""; flex: 1; height: .5px; background: rgba(var(--mute-rgb),.18) }
.o-composer { padding: 12px 14px 14px; border-top: .5px solid var(--line-strong) }
.o-composer__field { display: flex; align-items: center; gap: 8px; min-height: var(--h-field-xl); padding: 0 6px 0 16px; border-radius: 22px; background: rgba(var(--glass-rgb),.75); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.18); transition: box-shadow var(--dur-base) ease }
.o-composer__field:focus-within { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--indigo) 45%, transparent) }
.o-composer__field textarea, .o-composer__field input { flex: 1; min-width: 0; min-height: var(--h-field-xl); padding: 12px 0; border: 0; outline: 0; resize: none; background: transparent; font-size: var(--text-body); line-height: 20px; field-sizing: content; max-height: 160px }
/* The composer input is an editable block (see ui.js), so password managers never attach to it. */
.o-composer__input { flex: 1; min-width: 0; min-height: var(--h-field-xl); max-height: 160px; overflow-y: auto; padding: 12px 0; outline: 0; font-size: var(--text-body); line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; color: var(--fg) }
.o-composer__input[data-empty]::before { content: attr(data-placeholder); color: var(--fg-4); pointer-events: none }
.o-composer__send { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--on-accent); background: var(--indigo); transition: transform var(--dur-press) ease, opacity var(--dur-fast) ease }
.o-composer__send:active { transform: scale(.92) } .o-composer__send:disabled { opacity: .45; cursor: default } .o-composer__send .ti { font-size: 17px }
.o-composer__note { margin-top: 8px; padding: 0 8px; font-size: var(--text-nano); color: var(--fg-3) }
/* Suggested next prompt: faded text inside the empty composer (its placeholder), Tab or → takes it.
   The take button shows a Tab key on desktop and an arrow on touch, only while the suggestion shows. */
.o-composer__take { display: none; flex: none; align-items: center; justify-content: center; height: 26px; padding: 0 7px; border: 0; border-radius: 8px; cursor: pointer; background: none; color: var(--fg-3) }
.o-composer__take kbd { font: inherit; font-size: var(--text-nano); padding: 1px 6px; border-radius: 6px; box-shadow: inset 0 0 0 .5px var(--line-strong) }
.o-composer__take .ti { display: none; font-size: 18px }
.o-composer__field[data-next]:has(.o-composer__input[data-empty]) .o-composer__take { display: inline-flex }
@media (pointer: coarse) { .o-composer__take { width: 36px; height: 36px } .o-composer__take kbd { display: none } .o-composer__take .ti { display: inline } }
/* What next: shortcuts after something finished or at a new stage, styled as the welcome's starters. */
.o-shortcuts { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; animation: rise .3s var(--ease-out) both }
.o-shortcuts__label { font-size: var(--text-nano); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-4) }
.o-shortcuts .o-chips { justify-content: flex-start }
:is(.o-shortcuts, .o-welcome__starters) .o-btn { max-width: 100%; height: auto; min-height: var(--h); padding-top: 5px; padding-bottom: 5px; white-space: normal; text-align: left; line-height: 1.3 }
.o-welcome { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 14px 4px 12%; text-align: center; align-items: center }
.o-welcome__hello { font-size: var(--text-step); line-height: 1.3; color: var(--fg-2) }
.o-welcome__ask { font-size: var(--text-h2); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: 1.25 }
.o-welcome__tip { max-width: 440px; font-size: var(--text-caption); line-height: 1.5; color: var(--fg-2) } .o-welcome__tip .ti { font-size: 16px; color: var(--notice); vertical-align: -2px; margin-right: 6px }
.o-words > span { display: inline-block; animation: wordIn 1.1s var(--ease-reveal) both; animation-delay: calc(var(--i, 0) * .12s) }
.o-history__item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 14px; cursor: pointer; transition: background var(--dur-fast) ease }
.o-history__item:hover { background: var(--wash) } .o-history__item[aria-current="true"] { background: color-mix(in srgb, var(--indigo) 8%, transparent) }

/* ===================== desk blocks ===================== */
.o-block__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 12px 12px 18px }
.o-block__titles { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.o-block__name { font-size: var(--text-body-lg) } .o-block__meta { font-size: var(--text-micro); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-block__body { display: flex; flex-direction: column; gap: 14px; padding: 14px 22px 20px }
.o-block__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px 14px 18px; border-top: .5px solid var(--line) }
.o-block__note { flex: 1; min-width: 180px; font-size: var(--text-caption); line-height: 1.45; color: var(--fg-2) }
.o-result { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--green) 10%, transparent); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--green) 25%, transparent); animation: land var(--dur-land) var(--ease-out) both }
.o-result__disc { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); background: var(--green) } .o-result__disc .ti { font-size: 19px }
.o-quietline { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 18px; border-radius: 18px; font-size: var(--text-body-sm); color: var(--fg-2); background: rgba(var(--glass-rgb),.35); box-shadow: inset 0 0 0 .5px var(--line) }
.o-quietline .o-dot { background: var(--indigo); animation: avBreath 1.8s ease-in-out infinite }
.o-wavecard { border-radius: 20px; background: rgba(var(--glass-rgb),.42); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.8), inset 0 0 0 .5px rgba(var(--mute-rgb),.12); transition: background var(--dur-base) ease, box-shadow var(--dur-base) ease }
.o-wavecard[data-open] { background: rgba(var(--glass-rgb),.6); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.8), inset 0 0 0 .5px rgba(var(--mute-rgb),.2), 0 18px 40px -26px rgba(var(--shadow-rgb),.55) }
.o-wavecard__head { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 16px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--fg) }
.o-wavecard__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px } .o-wavecard__title { display: flex; align-items: center; gap: 8px; font-size: 15.5px } .o-wavecard__sub { font-size: var(--text-micro); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-timing { flex: none; display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 11px; font-size: var(--text-nano); white-space: nowrap; color: var(--tone-solid); background: rgba(var(--glass-rgb),.75); box-shadow: inset 0 0 0 .5px var(--line) }
.o-wavecard__body { padding: 10px 16px 16px; border-top: .5px solid var(--line) }

/* ===================== customer device previews (never themed) ===================== */
.o-bubble-in { max-width: min(100%, 360px); padding: 10px 14px; border-radius: var(--radius-bubble-in); font-size: var(--text-body-sm); line-height: 1.5; white-space: pre-wrap; color: var(--on-accent); background: var(--tone-solid, var(--green)) }
.o-phone { width: 300px; max-width: 100%; min-height: 380px; border-radius: 34px; overflow: hidden; border: 10px solid var(--device-frame); background: var(--device-paper); color: var(--device-ink) }
.o-phone__head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px 12px; background: var(--device-head); border-bottom: .5px solid var(--device-line); font-size: 13px }
.o-phone__avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: #fff; background: linear-gradient(180deg, #a3aab8, #858c9b) }
.o-phone__thread { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px } .o-phone__time { align-self: center; font-size: 12px; color: var(--device-muted) }
.o-phone__bubble { align-self: flex-start; max-width: 82%; padding: 9px 13px; border-radius: var(--radius-bubble-in); font-size: 15px; line-height: 1.42; white-space: pre-wrap; color: var(--device-ink); background: var(--device-bubble) }
.o-push { max-width: 360px; display: flex; gap: 10px; padding: 11px 12px; border-radius: 18px; color: var(--device-ink); background: rgba(245,245,247,.92); box-shadow: inset 0 0 0 .5px var(--device-line), 0 10px 24px -18px rgba(30,40,70,.4) }
.o-push__app { flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; background: #0071e3 }
.o-push__title { display: flex; gap: 8px; font-size: 14px; font-weight: 600 } .o-push__title small { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--device-muted) } .o-push__body { font-size: 14px; color: var(--device-text) }
.o-email { max-width: 520px; border-radius: 12px; overflow: hidden; color: var(--device-text); background: var(--device-paper); box-shadow: 0 0 0 .5px rgba(60,60,67,.14), 0 10px 26px -20px rgba(var(--shadow-rgb),.6) }
.o-email__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px } .o-email__subject { font-size: var(--text-body-sm); font-weight: 600; color: var(--device-ink) } .o-email__from { font-size: 12px; color: var(--device-muted) }
.o-email__band { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 14px; color: #fff; background: var(--brand, #0071e3); font-size: 12px; font-weight: 700; letter-spacing: 1.4px }
.o-email__body { padding: 16px 14px; font-size: var(--text-caption); line-height: 1.65; white-space: pre-wrap }
.o-email__cta { display: inline-flex; align-items: center; height: 36px; margin-top: 14px; padding: 0 18px; border-radius: 18px; font-size: var(--text-caption); font-weight: 600; color: #fff; background: var(--brand, #0071e3) }
.o-email__legal { margin-top: 16px; padding-top: 10px; border-top: .5px solid var(--device-line); font-size: 11.5px; line-height: 1.5; color: rgba(60,60,67,.45) }

@media (prefers-reduced-motion: reduce) {
  .o-root *, .o-root *::before, .o-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}

/* ===================== shell parts (from v00 validation G-01..G-03) ===================== */
.o-spacer { flex: 1 }
.o-logo-dark { display: none }
[data-theme="dark"] .o-logo-light { display: none } [data-theme="dark"] .o-logo-dark { display: block }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .o-logo-light { display: none } :root:not([data-theme="light"]) .o-logo-dark { display: block } }
.o-shell__logo { text-decoration: none }
.o-theme-icon-dark { display: none }
[data-theme="dark"] .o-theme-icon-light { display: none } [data-theme="dark"] .o-theme-icon-dark { display: inline }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .o-theme-icon-light { display: none } :root:not([data-theme="light"]) .o-theme-icon-dark { display: inline } }
.o-shell[data-nav="collapsed"] .o-nav-icon-open, .o-shell[data-nav="open"] .o-nav-icon-closed { display: none }
.o-shell__bar .o-avatar { border: 0; padding: 0; cursor: pointer }

/* ===================== agent parts (G-04, G-10) ===================== */
.o-thread__items { display: flex; flex-direction: column; gap: 12px }
/* Agent first, one continuous conversation: what was said on earlier pages stays above, read only,
   each part under its page's divider; its reply buttons are spent, so they are not shown. */
.o-thread__earlier { display: flex; flex-direction: column; gap: inherit }
.o-thread__earlier :is(.o-quick, .o-shortcuts, .o-feedback, .o-welcome) { display: none }
.o-welcome { min-height: 100%; animation: rise .45s var(--ease-out) both }
.o-welcome__orb { position: relative; width: 32px; height: 32px; margin-bottom: -32px; animation: orbIn .7s var(--ease-out) both, orbOut 1s cubic-bezier(.4,0,.2,1) 2.1s forwards }
.o-welcome__orb::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--indigo) 45%, transparent), color-mix(in srgb, var(--blue) 18%, transparent) 55%, transparent 75%); filter: blur(6px); animation: symGlow 2.2s ease-in-out infinite }
.o-welcome__orb::after { content: ""; position: absolute; inset: 4px; background: linear-gradient(135deg, #8b89ff, var(--indigo) 55%, var(--blue)); -webkit-mask: var(--o-symbol) center / contain no-repeat; mask: var(--o-symbol) center / contain no-repeat; animation: symSpin 3.2s cubic-bezier(.65,0,.35,1) infinite }
.o-welcome .o-words > span { animation: wordIn 1.1s var(--ease-reveal) both; animation-delay: calc(var(--o-delay, 2.5s) + var(--i, 0) * .14s) }
.o-welcome__hello { --o-delay: 2.5s } .o-welcome__ask { --o-delay: 3.2s }
.o-welcome__starters, .o-welcome__tip { animation: wordIn 1.2s var(--ease-reveal) both } .o-welcome__starters { animation-delay: 2.6s } .o-welcome__tip { animation-delay: 3.2s }
.o-welcome__promo { animation: wordIn 1.4s var(--ease-reveal) 4.2s both }
.o-welcome--simple { align-items: flex-start; text-align: left; justify-content: flex-start; gap: 10px; padding: 8px 4px 0; min-height: 0; animation: fade .3s ease both }
.o-welcome--simple .o-welcome__ask { font-size: 19px; letter-spacing: -.1px; line-height: 1.35 }
.o-welcome--simple :is(.o-welcome__starters, .o-welcome__tip) { animation: none; justify-content: flex-start; margin-top: 4px }
.o-welcome__sub { max-width: 380px; font-size: var(--text-caption); line-height: 1.5; color: var(--fg-2) }
.o-welcome__starters { justify-content: center; margin-top: 10px }
.o-welcome__tip a { white-space: nowrap }
.o-welcome__promo { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px 22px; text-align: center }
.o-welcome__promo b { font-weight: 400; font-size: 16px } .o-welcome__promo span { max-width: 320px; font-size: var(--text-caption); line-height: 1.5; color: var(--fg-2) }
.o-madecard__all { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-micro); color: var(--fg-2) }
.o-root a.o-madecard__all { color: var(--fg-2) } .o-madecard__all:hover { color: var(--blue) }
.o-agent__history { position: absolute; top: 60px; left: 0; right: 0; bottom: 0; z-index: 5; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px 20px; background: var(--surface-popover); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); animation: rise .22s var(--ease-out) both }
.o-agent__history-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px } .o-agent__history-head span { flex: 1; font-size: var(--text-lead); font-weight: 300; letter-spacing: -.2px }
.o-agent__history .o-eyebrow { padding: 12px 8px 6px }
.o-history__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--text-body) } .o-history__text small { font-size: var(--text-micro); color: var(--fg-3) }
.o-history__time { font-size: 13px; color: var(--fg-4); font-variant-numeric: tabular-nums }
.o-agent[data-width="xwide"] { --o-agent-w: min(var(--w-agent-max), 100%) }
/* Full: ui.js measures the space main and the panel share (--o-agent-full) so the stretch animates too. */
.o-agent[data-width="full"] { --o-agent-w: var(--o-agent-full, var(--w-agent-max)) }
@container app (min-width: 1024px) {
  .o-shell__body:has(> .o-agent[data-width="full"][data-open]) > .o-main { margin-right: calc(-1 * var(--space-8)); padding-left: 0; padding-right: 0; opacity: 0; pointer-events: none; transition: opacity .12s ease, margin-right var(--dur-agent) var(--ease-out), padding var(--dur-agent) var(--ease-out) }
}
.o-agent[data-width="full"] .o-thread { padding: 48px max(32px, calc((100% - 760px) / 2)) 24px; gap: 20px }
.o-agent[data-width="full"] .o-composer { padding: 14px max(32px, calc((100% - 760px) / 2)) 26px; border-top: 0 }
/* Steps update in place: each line has its own id and is swapped alone, so the message never re-enters. */
.o-workstep { transition: color var(--dur-state) ease } .o-workstep .ti { transition: color var(--dur-state) ease }
/* Queue: a message sent while the agent works waits under the thread until the agent takes it. */
.o-msg-user[data-queued] > div { opacity: .6; box-shadow: inset 0 0 0 1px var(--bubble-line), 0 0 0 0 transparent }
.o-msg-user[data-queued]::after { content: attr(data-queued); align-self: flex-end; margin-top: 4px; font-size: var(--text-nano); color: var(--fg-4) }
.o-msg-user { flex-direction: column; align-items: flex-end }
.o-composer__stop { display: inline-flex; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; color: var(--on-accent); background: var(--ink) }
.o-composer__stop .ti { font-size: 15px } .o-composer__stop:active { transform: scale(.92) }
#composer-stop:empty { display: none }

/* ===================== header panels: notifications, account ===================== */
.o-pop { width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 90px)); margin: 0; padding: 0; border: 0; border-radius: var(--radius-section); display: flex; flex-direction: column; overflow: hidden; color: var(--fg); background: var(--surface-popover); box-shadow: var(--shadow-popover); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); animation: ddin .18s var(--ease-out) both }
.o-pop[popover]:not(:popover-open) { display: none }
.o-pop__head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px 18px }
.o-pop__title { flex: 1; font-size: var(--text-step) }
.o-pop__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 6px }
.o-pop__foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px 18px; border-top: .5px solid var(--line) }
.o-pop .o-seg { margin: 0 12px 8px 18px }
.o-note { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 12px; border-radius: var(--radius-row); color: var(--fg); cursor: pointer; transition: background var(--dur-fast) ease }
.o-root a.o-note { color: var(--fg) } .o-note:hover { background: var(--wash) }
.o-note + .o-note { box-shadow: 0 -.5px 0 var(--line-faint) }
.o-note__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.o-note__title { font-size: var(--text-body) } .o-note__detail { font-size: var(--text-micro); line-height: 1.4; color: var(--fg-2) } .o-note__time { font-size: 13px; color: var(--fg-4); font-variant-numeric: tabular-nums }
.o-note[data-unread]::after { content: ""; position: absolute; top: 18px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue) }
.o-note[data-unread] .o-note__title { font-weight: var(--weight-medium) }
.o-acct__who { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px }
.o-acct__who b { display: block; font-weight: var(--weight-medium); font-size: var(--text-body) } .o-acct__who small { font-size: var(--text-micro); color: var(--fg-3) }
.o-acct__row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px }
.o-acct__row > span:first-child { flex: 1; font-size: var(--text-body-sm); color: var(--fg-2) }

/* ===================== settings window (split dialog) ===================== */
.o-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; padding: 14px 0; border-top: .5px solid var(--line-faint) }
.o-setting:first-of-type { border-top: 0 }
.o-setting__text { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.o-setting__label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-body) }
.o-setting__hint { font-size: var(--text-micro); line-height: 1.45; color: var(--fg-2); max-width: 60ch }
.o-setting__ctl { display: flex; align-items: center; gap: 8px; justify-content: flex-end }
.o-setting[data-changed] .o-setting__label::after { content: attr(data-changed); font-size: var(--text-nano); color: var(--ok) }
.o-settings__group { margin: 18px 0 2px; font-size: var(--text-nano); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-4) }
.o-settings__group:first-child { margin-top: 0 }
/* Settings levels: this workspace and the account (account default, workspace override). */
.o-settings__level { display: flex; margin: 2px 0 8px }
.o-settings__level { width: 100% } .o-settings__level .o-seg__opt { flex: 1; min-width: 0; gap: 7px; padding: 0 8px }
.o-td-sub.o-td-wrap { white-space: normal }
.o-settings__where { padding: 0 10px 10px; font-size: var(--text-nano); line-height: 1.45; color: var(--fg-3) }
.o-setting[data-locked] .o-setting__label { color: var(--fg-2) }
.o-setting__text > span:has(> .o-btn) { display: flex; margin-top: 2px }
.o-setting__text > .o-bar { margin-top: 8px; max-width: 320px }
.o-settings-page .o-banner--inline + .o-banner--inline { margin-top: 8px }
.o-settings-page .o-table { margin: 10px 0 6px }
.o-settings-page .o-table__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
/* Workspace switcher (sidebar workspace button, account menu): the account's workspaces, your other accounts. */
.o-wstile--xs { width: 18px; height: 18px; border-radius: 6px; font-size: 9.5px }
.o-wstile--sm { width: 26px; height: 26px; border-radius: 8px; font-size: 11.5px }
/* Context in the top bar: the workspace you are in, always visible, quiet; opens the switcher. */
.o-context { --h: 36px; display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 320px; height: var(--h); padding: 0 10px 0 5px; border: 0; border-radius: calc(var(--h) / 2); cursor: pointer; text-align: left; color: var(--fg); background: none; transition: background var(--dur-fast) ease }
.o-context:hover, .o-context[aria-expanded="true"] { background: rgba(var(--glass-rgb),.6) }
.o-context__ws { min-width: 0; font-size: var(--text-body-sm); font-weight: var(--weight-medium) }
.o-context > .ti { flex: none; font-size: 14px; color: var(--fg-3) }
.o-context > .o-tag { flex: none }
/* Settings as a page: the split fills main; the rail and the section scroll on their own. */
.o-settings-page { display: flex; flex-direction: column; height: 100%; min-height: 0 }
.o-settings-page > .o-pagehead { padding: 22px 26px 12px }
.o-settings-page > .o-split { flex: 1; min-height: 0; border-top: .5px solid var(--line) }
.o-settings-page .o-split__detail { padding-left: 26px; padding-right: 26px }
.o-wspop .o-menu__item--rich > .o-tag { margin-left: auto }
.o-wspop .o-menu__item--rich > .o-tag + .o-acct__current { margin-left: 6px }
.o-menu__item[aria-current="true"] { background: rgba(var(--mute-rgb),.06) }
@container (max-width: 560px) { .o-setting { grid-template-columns: minmax(0, 1fr) } .o-setting__ctl { justify-content: flex-start } }

/* ===================== full-window editor (v0 Templates): covers the whole shell, not only main ===================== */
.o-editor--app { position: fixed; inset: 0; z-index: var(--z-editor) }
.o-editor--app .o-editor__bar { padding-top: env(safe-area-inset-top, 0px) }

.o-btn--compact { --h: 32px; padding: 0 13px; font-size: var(--text-caption) }
.o-btn--link { color: var(--blue) }
.o-capsule .o-btn { --h: 32px }
/* The greeting welcome fills the thread and centres; the main scroller keeps its place when parts are swapped out of band. */
.o-thread__items:has(> .o-welcome:not(.o-welcome--simple)) { flex: 1 }
.o-main__scroll { overflow-anchor: none }
.o-wstile[data-tone] { background: var(--tone-solid) }
.o-pop__label { padding: 6px 12px 4px }
.o-acct__current { margin-left: auto; color: var(--blue); font-size: 16px }
.o-settings__heading { margin: 0 0 6px; font-size: var(--text-lead); font-weight: var(--weight-light); letter-spacing: var(--tracking-display) }
.o-setting__list { max-width: 300px; text-align: right }
.o-dialog__title:focus { outline: none } /* a dialog focuses its title on open, so the first button is not ringed */
/* A full-window editor rendered inside main: main's backdrop-filter would make it the containing block of the fixed editor. */
.o-main:has(> .o-editor--app) { -webkit-backdrop-filter: none; backdrop-filter: none }
[data-o-reveal="start"] { scroll-margin-top: 14px }

/* ---------- ui/map: a server-rendered diagram with a camera (ui.js [data-o-map]) ----------
   Cards are HTML in <foreignObject>, edges are SVG paths; the visual baseline is
   the architecture-map prototype: dotted canvas, cards with a coloured top edge,
   orthogonal edges with numbered badges, dimming for an active flow. */
.o-maplayout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 14px; min-height: 0 }
.o-map { position: relative; min-height: 560px; height: calc(100vh - 250px); border-radius: 12px; overflow: hidden; touch-action: none;
  background-color: var(--map-card); background-image: radial-gradient(circle, color-mix(in srgb, var(--map-muted) 12%, transparent) .8px, transparent .9px); background-size: 22px 22px;
  border: 1px solid color-mix(in srgb, var(--map-border) 55%, var(--map-card)) }
/* Diagram text is technical text (specs/workbench §9, W10, W27, W60): Fira Code with FiraGO
   on every canvas (cards, line and area labels, flow blocks, lanes); diagram.TextWidth measures
   it. The foot, the hints and the use cases' tables keep the main font. */
.o-map { font-family: var(--font-mono) }
.o-map[data-o-map-html], .o-map__foot, .o-map__hint, .o-map__edithint, .o-map__editerror { font-family: var(--font-sans) }
.o-map > svg { display: block; width: 100%; height: 100%; cursor: grab; user-select: none }
/* The drawing shows only once its camera is set (reveal.js, data-o-cam), so no frame paints it at
   100% before it jumps (D56). Without script (no data-o-js) it shows as laid out. */
[data-o-js] [data-o-map]:not([data-o-cam]) [data-o-map-world] { visibility: hidden }
.o-map[data-panning] > svg { cursor: grabbing }
/* A native HTML world shares the SVG camera without rasterizing tables or
   turning form controls into drawing primitives. Bounds use layout dimensions. */
.o-map__surface { position: absolute; inset: 0; overflow: hidden; cursor: grab }
.o-map__html { width: max-content; min-width: 100%; min-height: 100%; padding: 24px; box-sizing: border-box; transform-origin: 0 0 }
.o-map__html :is(input, textarea, select, button, label, summary, [contenteditable]) { cursor: auto }
.o-map__html a { cursor: pointer }
html:not([data-o-js]) .o-map[data-o-map-html] > .o-map__surface { overflow: auto }
.o-map[data-panning] > .o-map__surface { cursor: grabbing; user-select: none }
.o-map__html :is(.o-uclist__scroll, .o-coverage) { overflow: visible; max-height: none }
.o-map__html .o-coverage { width: max-content; min-width: 100% }
.o-map__html .o-coverage table { min-width: 100% }
/* The canvas's zoom sits in the tools row (W59): −, the percentage, +, 100 %, Fit. A page
   without a map (a story, a list, a table) shows none. */
.o-zoomtools { display: inline-flex; align-items: center; gap: 2px; margin-left: auto }
.o-zoomtools__pct { min-width: 44px; height: 28px; padding: 0 4px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: center; font: var(--text-micro)/1 var(--font-mono); color: var(--fg-2); font-variant-numeric: tabular-nums }
.o-zoomtools__pct:hover { background: var(--wash-hover); color: var(--fg) }
html:not(:has([data-o-map])) .o-zoomtools { display: none }
/* The Diagram / Story switch keeps its place at the row's end (W69): the zoom pushes it there
   beside a map; without one (the story itself, a list) the switch pushes itself. */
html:not(:has([data-o-map])) [data-story-switch] { margin-left: auto }
/* Data › Tables (W59): the where-it-lives table's frame, numbers right-aligned. */
.o-datatables__n { text-align: right; font-variant-numeric: tabular-nums }
.o-datatables th code { font: 12px/1.4 var(--font-mono) }
/* The use case stepper ‹ n/m › (W59): the place opens all the steps again. */
.o-stepper { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; border-radius: 10px; background: var(--wash) }
.o-stepper__at { min-width: 36px; text-align: center; font: var(--text-micro)/1 var(--font-mono); color: var(--fg-2); text-decoration: none; font-variant-numeric: tabular-nums }
a.o-stepper__at:hover { color: var(--blue) }
.o-stepper [aria-disabled] { opacity: .35; pointer-events: none }
/* The desk's bottom line: the legend and the navigation hint (the zoom is in the tools row, W59). */
.o-map__foot { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; pointer-events: none }
.o-map__foot > * { pointer-events: auto }
/* The foot folds to its info button (reveal.js, data-o-foot on <html>), out of the drawing's way. */
.o-map__foot-toggle { flex: none; background: color-mix(in srgb, var(--map-card) 88%, transparent); box-shadow: 0 0 0 .5px var(--map-border) }
[data-o-foot="folded"] .o-map__foot > :not(.o-map__foot-toggle) { display: none }
[data-o-foot="folded"] .o-map__foot-toggle { color: var(--fg-3) }
.o-map__foot .o-map__legend { padding: 5px 12px; border-radius: 10px; background: color-mix(in srgb, var(--map-card) 88%, transparent); box-shadow: 0 0 0 .5px var(--map-border) }
.o-map__foot .o-map__hint { position: static }
.o-map__hint { position: absolute; left: 12px; bottom: 12px; font-size: var(--text-nano); color: var(--fg-3); padding: 4px 8px; border-radius: 8px; background: rgba(var(--glass-rgb),.7) }
.o-map__loadscale { display: inline-flex; align-items: center; gap: 10px }
.o-map__loadscale > span { display: inline-flex; align-items: center; gap: 4px }
.o-map__loadscale svg { width: 22px; height: 16px; margin-right: 0 }
.o-map__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--text-micro); color: var(--fg-2) }
.o-map__legend svg { width: 26px; height: 8px; vertical-align: middle; margin-right: 4px }

/* A card: a soft tint of its area colour (a shade darker than what is behind it), a hairline edge in that
   colour, a thin colour bar along the top (::before, clipped by the radius) and a quiet layered shadow. One
   look on the canvas, in a layer's frame and in an area; the system in scope is the featured card below. */
.o-mapnode { position: relative; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--node, var(--blue)) 24%, var(--map-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--node, var(--blue)) 10%, var(--map-card)), color-mix(in srgb, var(--node, var(--blue)) 6%, var(--map-card)));
  color: var(--fg); box-shadow: 0 1px 2px rgba(var(--shadow-rgb),.06), 0 10px 24px -16px rgba(var(--shadow-rgb),.4);
  font-size: var(--text-micro); overflow: hidden; transition: opacity var(--dur-fast) ease, box-shadow var(--dur-fast) ease }
.o-mapnode::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 3px; border-radius: 0 0 3px 3px; background: var(--node, var(--blue)); pointer-events: none }
.o-mapnode[data-system]::before { content: none }
/* Rings are outlines drawn inside the card (negative offset): the card's foreignObject would clip a ring
   outside it square, losing the round corners. Outlines follow border-radius. */
.o-mapnode:hover { box-shadow: 0 1px 2px rgba(var(--shadow-rgb),.08), 0 14px 28px -14px rgba(var(--shadow-rgb),.45); outline: 2px solid color-mix(in srgb, var(--node, var(--blue)) 55%, transparent); outline-offset: -2px }
.o-mapnode .o-mapnode__top { border-bottom-color: color-mix(in srgb, var(--node, var(--blue)) 14%, transparent) }
.o-mapnode:not([data-system]) .o-mapnode__top > span:first-of-type { color: color-mix(in srgb, var(--node, var(--blue)) 55%, var(--fg-3)); font-weight: var(--weight-medium); letter-spacing: .02em }
.o-mapnode > * { flex: none; min-width: 0 }
.o-mapnode > :is(.o-mapnode__summary, .o-mapnode__sub) { flex: 0 1 auto; min-height: 0 }
.o-mapnode__top { white-space: nowrap; overflow: hidden }
.o-mapnode__top > span:not(.o-tag) { overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.o-mapnode__top > :is(.o-tag, .o-mapnode__dot, .o-mapnode__info) { flex: none }
.o-mapnode__top { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--node, var(--blue)) 25%, transparent); color: var(--fg-3) }
.o-mapnode__top i.o-mapnode__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--node, var(--blue)); flex: none }
/* role tags above a card of the traced use case; [data-o-map-roles] hides them */
.o-maproles { overflow: visible; pointer-events: none }
.o-maproles__row { display: flex; gap: 4px; align-items: flex-end; height: 100%; padding: 0 2px 4px; box-sizing: border-box; overflow: hidden }
.o-maproles__row .o-tag { font-weight: var(--weight-medium); letter-spacing: .02em; box-shadow: 0 0 0 1.5px var(--desk, var(--bg)) }
html[data-map-roles="off"] .o-maproles { display: none }
/* compared with another draft or revision: added cards and connections green, changed orange */
.o-mapnode[data-change="added"] { box-shadow: 0 0 0 2.5px var(--green), 0 10px 24px -16px rgba(var(--mute-rgb),.5) }
.o-mapnode[data-change="changed"] { box-shadow: 0 0 0 2.5px var(--orange), 0 10px 24px -16px rgba(var(--mute-rgb),.5) }
/* a connection keeps its kind's colour: it is drawn bolder and solid, its number pill takes the change's colour,
   and everything unchanged fades while comparing (.o-map[data-comparing]) */
.o-mapedges g[data-change] { --edge-plus: 2 }
.o-mapedges g[data-change] .o-mapedge { stroke-opacity: .95 }
.o-mapbadges [data-change="added"] rect { fill: var(--green); stroke: var(--green) }
.o-mapbadges [data-change="changed"] rect { fill: var(--orange); stroke: var(--orange) }
.o-mapbadges [data-change] text { fill: var(--on-accent) }
.o-map[data-comparing] .o-mapedges g:not([data-change]) { opacity: .25 }
.o-map[data-comparing] .o-mapnode:not([data-change]) > * { opacity: .45 }
.o-map__compare { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--fg-2); font-size: var(--text-micro) }
.o-mapnode__top .o-tag { margin-left: auto }
.o-mapnode__title { font-size: 18px; font-weight: var(--weight-semibold); line-height: 1.25; color: var(--fg); text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.o-mapnode__title::after { content: ""; position: absolute; inset: 0 } /* the whole card selects */
.o-mapnode__sub { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-mapnode__foot { margin-top: auto; display: flex; align-items: center; gap: 8px; color: var(--fg-3) }
.o-mapnode__foot { min-width: 0 } .o-mapnode__foot > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-mapnode__inside { margin-left: auto; flex: none; color: var(--node, var(--blue)); font-weight: var(--weight-medium) }
/* The Inside link opens the layer in one click; it sits above the title's whole-card select area. */
a.o-mapnode__inside { position: relative; z-index: 1; text-decoration: none; border-radius: 6px }
a.o-mapnode__inside:hover { text-decoration: underline }
.o-mapcard { position: relative; height: 100% }
.o-mapnode[data-kind="actor"], .o-mapnode[data-kind="external_system"] { --node: var(--blue) }
.o-mapnode[data-kind="boundary"] { --node: var(--indigo) }
.o-mapnode[data-kind="area"] { --node: var(--c-products) }
.o-mapnode[data-kind="process"] { --node: var(--green) }
.o-mapnode[data-kind="component"] { --node: var(--fg-2) }
.o-mapnode[data-kind="data_store"] { --node: var(--orange) }
.o-mapnode__summary { color: var(--fg); font-size: var(--text-caption); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical }
/* The model's system in scope (Model.System): the hero card of the prototype's first layer. */
.o-mapnode[data-system] { --node: var(--map-on-featured); gap: 10px; padding: 16px 20px 18px; color: var(--map-on-featured); border: 1px solid color-mix(in srgb, var(--map-featured) 70%, black);
  background: var(--map-featured); box-shadow: 0 8px 30px color-mix(in srgb, var(--map-featured) 22%, transparent) }
.o-mapnode[data-system] .o-mapnode__top { color: color-mix(in srgb, var(--map-on-featured) 72%, transparent); border-bottom-color: color-mix(in srgb, var(--map-on-featured) 22%, transparent) }
.o-mapnode[data-system] .o-mapnode__title { font-size: 27px; font-weight: var(--weight-regular); line-height: 1.2; color: var(--map-on-featured); -webkit-line-clamp: 3 }
.o-mapnode[data-system] .o-mapnode__summary { color: color-mix(in srgb, var(--map-on-featured) 88%, transparent); font-size: var(--text-body-sm); -webkit-line-clamp: 3 }
.o-mapnode[data-system] :is(.o-mapnode__sub, .o-mapnode__foot) { color: color-mix(in srgb, var(--map-on-featured) 70%, transparent) }
.o-mapnode[data-system] .o-mapnode__inside { color: var(--map-on-featured) }
.o-mapnode[data-system]:hover, .o-mapnode[data-system][data-active] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 45%, transparent), 0 14px 34px rgba(var(--shadow-rgb),.3) }
.o-mapnode[data-system][aria-current="true"] { box-shadow: 0 14px 34px rgba(var(--shadow-rgb),.3); outline: 3px solid var(--blue); outline-offset: -3px }
/* Area colours ("by idea"): every outermost area has a tone; its parts inherit it (diagram.Tones). */
.o-mapnode[data-tone="teal"] { --node: var(--c-products) } .o-mapnode[data-tone="indigo"] { --node: var(--indigo) }
.o-mapnode[data-tone="green"] { --node: var(--green) } .o-mapnode[data-tone="orange"] { --node: var(--orange) }
.o-mapnode[data-tone="slate"] { --node: var(--fg-2) } .o-mapnode[data-tone="blue"] { --node: var(--blue) }
/* Where each thing lives (specs/data §6): entities as rows, database designs as columns on the canvas.
   A solid mark is the source of truth, a dashed one a copy (with its freshness under it); a muted one
   is stored where the model does not say which design is the source. */
.o-lives { position: absolute; inset: 0; overflow: auto; padding: 72px 24px 32px; box-sizing: border-box }
.o-desk[data-panel] .o-lives { right: var(--panel-w) }
.o-lives__scroll { width: max-content; max-width: 100%; margin: 0 auto; overflow-x: auto; border-radius: var(--radius-section); background: var(--surface-raised); box-shadow: inset 0 0 0 .5px var(--line), 0 14px 34px -26px rgba(var(--shadow-rgb),.4) }
.o-lives__table { border-collapse: collapse; font-size: var(--text-caption); color: var(--fg) }
.o-lives__table :is(th, td) { padding: 10px 16px; border-top: .5px solid var(--line-faint); text-align: left; vertical-align: top; min-width: 130px; max-width: 230px }
.o-lives__table thead th { border-top: 0; font-weight: var(--weight-semibold) }
.o-lives__table tbody th { font-weight: var(--weight-medium); min-width: 170px }
.o-lives__table tbody th a { color: var(--fg); text-decoration: none } .o-lives__table tbody th a:hover { color: var(--blue) }
.o-lives__table tbody tr[aria-current="true"] { background: color-mix(in srgb, var(--blue) 9%, transparent) }
.o-lives__store { display: block }
.o-lives__sub { display: block; margin-top: 2px; font-size: var(--text-nano); font-weight: var(--weight-regular); color: var(--fg-3) }
.o-lives__sub[data-tone="amber"] { color: color-mix(in srgb, var(--amber) 70%, var(--fg)) }
.o-lives__cell { display: inline-flex; align-items: center; gap: 8px }
.o-lives__forms { overflow-wrap: break-word; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; color: var(--fg-2) }
.o-lives__mark { flex: none; display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border-radius: 4px; background: var(--blue); border: 1.5px solid var(--blue) }
.o-lives__mark[data-hold="copy"] { background: transparent; border-style: dashed }
.o-lives__mark[data-hold="stored"] { background: var(--wash); border-color: var(--fg-4) }
.o-lives__legend { display: inline-flex; align-items: center; gap: 12px; font-size: var(--text-nano); color: var(--fg-2) }
.o-lives__legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
.o-lives__more { margin: 0; padding: 10px 16px; font-size: var(--text-nano); color: var(--fg-3) }
/* What the model does not say yet, in the notes. */
.o-notes__missing { margin: 0 0 4px; padding-left: 18px; font-size: var(--text-body-sm); color: var(--fg-2) }
.o-notes__missing > li::marker { color: var(--amber-ink) }
/* Data cards (specs/data): an entity, a table or a cache key listing its attributes, columns or fields,
   one 22px line each under the header (diagram.DataHeadH / DataLineH). A key or link mark leads the line;
   an optional (nullable) line is quieter. */
.o-mapnode--data { gap: 4px; padding-bottom: 10px }
.o-mapnode--data[data-kind="entity"]:not([data-tone]) { --node: var(--c-products) }
.o-mapnode--data:is([data-kind="table"], [data-kind="cache_key"]) { --node: var(--orange) }
.o-mapnode--data:is([data-kind="view"], [data-kind="materialized_view"]) { --node: var(--indigo) }
.o-mapnode__lines { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 2px 0 0; padding: 4px 0 0; list-style: none; overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--node, var(--blue)) 18%, transparent); font-size: 13px }
.o-mapnode__lines > li { flex: none; height: 22px; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 6px }
.o-mapnode__lines > li > .ti { font-size: 13px; color: var(--node, var(--blue)) }
.o-mapnode__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg) }
.o-mapnode__type { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--fg-3) }
.o-mapnode__lines > li:is([data-mark~="pk"], [data-mark="id"]) .o-mapnode__line { font-weight: var(--weight-semibold) }
.o-mapnode__lines > li[data-null] .o-mapnode__line { color: var(--fg-2) }
.o-mapnode__lines > li.o-mapnode__more { display: block; line-height: 22px; color: var(--fg-3) }
/* Names only ([data-compact], diagram.DataNameH): one line of name, the sub line, and the count of lines at
   the right of the header. */
.o-mapnode--data[data-compact] .o-mapnode__title { -webkit-line-clamp: 1 }
.o-mapnode__top > .o-mapnode__count { margin-left: auto; flex: none; color: var(--fg-3); font-weight: var(--weight-regular); letter-spacing: 0 }
/* A card with parts opens its layer; the info button opens its details instead. */
.o-mapnode__info { position: relative; z-index: 2; margin-left: auto; display: inline-flex; padding: 2px; border-radius: 50%; color: var(--fg-3); font-size: 17px; line-height: 1 }
.o-mapnode__info:hover { color: var(--node, var(--blue)); background: var(--wash) }
.o-mapnode__top .o-tag + .o-mapnode__info { margin-left: 4px }
.o-mapnode[data-system] .o-mapnode__info { color: color-mix(in srgb, var(--map-on-featured) 75%, transparent) }
.o-mapnode[data-audience="business"] .o-mapnode__summary { -webkit-line-clamp: 2; color: var(--fg-2) }
.o-mapnode[data-system][data-audience="business"] .o-mapnode__summary { color: color-mix(in srgb, var(--map-on-featured) 88%, transparent); -webkit-line-clamp: 3 }
/* The frame around the focus's parts, labelled with the focus's name. */
.o-mapframe rect { fill: color-mix(in srgb, var(--blue) 2%, var(--map-card)); stroke: color-mix(in srgb, var(--blue) 22%, var(--map-card)); stroke-width: 1 }
.o-mapframe text { fill: var(--blue); font-size: 20px; font-weight: 600 }
/* An area drawn as a container of its parts (specs/diagram D22): a frame in the area's tone; its
   name opens the area's own layer. */
.o-mapgroup { --node: var(--blue) }
.o-mapgroup[data-tone="teal"] { --node: var(--c-products) } .o-mapgroup[data-tone="indigo"] { --node: var(--indigo) }
.o-mapgroup[data-tone="green"] { --node: var(--green) } .o-mapgroup[data-tone="orange"] { --node: var(--orange) }
.o-mapgroup[data-tone="slate"] { --node: var(--fg-2) } .o-mapgroup[data-tone="blue"] { --node: var(--blue) }
/* An area is a zone, not a box: a pale wash of its colour with a thin dashed edge, so the cards in it
   (solid, darker-edged, with a shadow) read as the objects. */
.o-mapgroup rect { fill: color-mix(in srgb, var(--node) 5%, transparent); stroke: color-mix(in srgb, var(--node) 30%, transparent); stroke-width: 1; stroke-dasharray: 6 5 }
.o-mapgroup text { fill: color-mix(in srgb, var(--node) 80%, var(--fg)); font-size: 16px; font-weight: 600; letter-spacing: .02em }
.o-mapgroup a { cursor: pointer } .o-mapgroup a:hover text, .o-mapgroup a:focus-visible text { text-decoration: underline }
.o-mapnode[data-role="context"] { border: 1px solid color-mix(in srgb, var(--map-border) 48%, var(--map-card)); border-radius: 10px;
  background: color-mix(in srgb, var(--map-ground) 65%, var(--map-card)); box-shadow: none }
.o-mapnode[data-role="self"] { outline: 2px dashed var(--node); outline-offset: 3px }
/* Off the active flow: the card stays opaque on the desk; only its content and colour fade. */
.o-mapnode[data-dimmed] { box-shadow: none } .o-mapnode[data-dimmed]::before { opacity: .35 }
.o-mapnode[data-dimmed] > * { opacity: .45 }
.o-mapnode[data-active] { box-shadow: 0 7px 20px rgba(var(--shadow-rgb),.12); outline: 2px solid var(--node); outline-offset: -2px }
.o-mapnode[aria-current="true"] { box-shadow: 0 8px 24px rgba(var(--shadow-rgb),.18); outline: 3px solid var(--blue); outline-offset: -3px }

/* Edges follow the prototype's flows: rounded corners, a soft translucent line in the kind's colour and a solid
   head with a desk-coloured outline that stops short of the card; the number sits in a pill with the load rate. */
/* Edges keep their size on screen from 50% zoom up: ui.js sets --map-k (the camera's scale) on
   [data-o-map], and widths, dashes and heads divide by it (--edge-k, at least .5, so a far
   zoomed-out overview does not drown its cards in lines). The line's weight (--edge-n, in px)
   is 4 by default, 2 in-process, and 2–15 by the active load scenario (data-weight 1–6, one per
   decade of rate: below 1/s up to 10k/s and above);
   an active edge adds 1.5, the selected one 2.5. The head (views.EdgeHead) sits at the tip and
   scales with the weight; a mask (.o-mapedge-cut) hides the line under it. */
.o-mapedges [data-edge], .o-mapedges [data-kind] { --edge-n: 2.5; --edge-plus: 0; --edge-k: max(var(--map-k, 1), .5); --edge-px: calc(1px / var(--edge-k)) }
.o-mapedges [data-mode="in_process"] { --edge-n: 1.5 }
.o-mapedges [data-weight="1"] { --edge-n: 2 } .o-mapedges [data-weight="2"] { --edge-n: 3.5 } .o-mapedges [data-weight="3"] { --edge-n: 5.5 }
.o-mapedges [data-weight="4"] { --edge-n: 8 } .o-mapedges [data-weight="5"] { --edge-n: 11 } .o-mapedges [data-weight="6"] { --edge-n: 15 }
.o-mapedges [data-active] { --edge-plus: 1.25 }
.o-mapedges [aria-current="true"] { --edge-plus: 2.5 }
.o-map__legend, .o-map__foot { --map-k: 1 }
.o-mapedge { fill: none; stroke: var(--edge, var(--fg-3)); stroke-width: calc((var(--edge-n, 2.5) + var(--edge-plus, 0)) * var(--edge-px, 1px)); stroke-opacity: .5; stroke-linejoin: round; stroke-linecap: round; transition: opacity var(--dur-fast) ease, stroke-opacity var(--dur-fast) ease }
/* Heads grow slower than their line: about .7× for the default 2.5px line, 1× at 6px, about 2× for the boldest. */
.o-mapedge-head, .o-mapedge-cut { scale: calc((var(--edge-n, 2.5) + var(--edge-plus, 0) + 6) / 12 / var(--edge-k, 1)) }
.o-mapedge-head { fill: var(--edge, var(--fg-3)); stroke: var(--map-card); stroke-width: 3; stroke-linejoin: round; paint-order: stroke fill; pointer-events: none }
.o-mapedge-hit { fill: none; stroke: transparent; stroke-width: calc(16 * var(--edge-px, 1px)); cursor: pointer }
.o-mapedges a:hover .o-mapedge { stroke-opacity: .8 }
.o-mapedges [data-kind="data"], .o-mapbadges [data-kind="data"] { --edge: var(--blue) }
.o-mapedges [data-kind="command"], .o-mapbadges [data-kind="command"] { --edge: var(--indigo) }
.o-mapedges [data-kind="command"] .o-mapedge { stroke-dasharray: calc(10 * var(--edge-px, 1px)) calc(7 * var(--edge-px, 1px)) }
.o-mapedges [data-kind="query"], .o-mapbadges [data-kind="query"] { --edge: var(--green) }
.o-mapedges [data-kind="event"], .o-mapbadges [data-kind="event"] { --edge: var(--orange) }
.o-mapedges [data-kind="event"] .o-mapedge { stroke-dasharray: calc(.5 * var(--edge-px, 1px)) calc(8 * var(--edge-px, 1px)) }
.o-mapedges [data-kind="mixed"], .o-mapbadges [data-kind="mixed"] { --edge: var(--fg-2) }
.o-mapedges [data-mode="in_process"] .o-mapedge { stroke-dasharray: calc(.5 * var(--edge-px, 1px)) calc(6 * var(--edge-px, 1px)) }
.o-mapedges [data-dimmed] { opacity: .2 }
/* A use case's chosen step (specs/diagram D35): its lines and cards stand out, the use case's other steps rest. */
.o-mapedges [data-step="current"] { --edge-plus: 2 }
.o-mapedges [data-step="current"] .o-mapedge { stroke-opacity: .9 }
.o-mapedges [data-step="other"], .o-mapbadges [data-step="other"] { opacity: .22 }
.o-mapnode[data-step="other"] { box-shadow: none; outline-color: color-mix(in srgb, var(--node) 35%, transparent) } .o-mapnode[data-step="other"] > * { opacity: .5 }
.o-mapnode[data-step="current"] { box-shadow: 0 8px 22px rgba(var(--shadow-rgb),.16); outline: 3px solid var(--node); outline-offset: -3px }
/* Edit layout (ui.js [data-o-map-editbar]): cards move, links rest; a moved card's edges are drawn
   as straight provisional lines (.o-mapdrafts) until the saved map is re-routed by the server. */
.o-map[data-o-map-editing] { outline: 2px dashed color-mix(in srgb, var(--blue) 55%, transparent); outline-offset: -6px }
.o-map[data-o-map-editing] [data-o-map-card] { cursor: grab }
.o-map[data-o-map-editing] [data-o-map-card][data-o-dragging] { cursor: grabbing }
.o-map[data-o-map-editing] [data-o-map-card] a { pointer-events: none }
.o-map[data-o-map-editing] .o-mapcard:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 16px }
.o-map[data-o-map-editing] .o-mapedges { pointer-events: none }
.o-mapedges [data-o-stale], .o-mapbadges [data-o-stale] { opacity: 0 }
.o-mapdrafts line { stroke: var(--blue); stroke-width: calc(2px / var(--map-k, 1)); stroke-dasharray: calc(6px / var(--map-k, 1)) calc(5px / var(--map-k, 1)); opacity: .7 }
.o-map__editbar { position: absolute; z-index: 7; top: 76px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
  max-width: calc(100% - 24px); padding: 6px 6px 6px 14px; border-radius: 14px; background: rgba(var(--glass-rgb),.92); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); box-shadow: var(--shadow-popover) }
.o-map__editbar[hidden] { display: none }
.o-map__edithint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); color: var(--fg-2) }
.o-map__editerror { font-size: var(--text-body-sm); color: var(--danger) }
.o-menu__confirm { display: grid; gap: 4px; max-width: 280px; padding: 2px 4px 4px } .o-menu__confirm[hidden] { display: none }
.o-menu__confirm .o-menu__head { white-space: normal; padding-bottom: 4px } .o-menu__confirm .o-toolbar { justify-content: flex-end }
.o-mapedges [data-active] .o-mapedge { stroke-opacity: .85 }
.o-mapedges [aria-current="true"] .o-mapedge { stroke-opacity: 1 }
/* Hover or focus traces one edge (ui.js sets data-tracing on the map, data-hover on the edge and
   data-hover-end on its two cards): the edge comes to the front, bold and opaque, its cards ring,
   everything else fades. Pointers that hover only; a tap selects instead. */
.o-map[data-tracing] .o-mapedges > g:not([data-hover]) { opacity: .12 }
.o-map[data-tracing] .o-mapedges > g[data-hover] { opacity: 1; --edge-plus: 2.5 }
.o-map[data-tracing] .o-mapedges > g[data-hover] .o-mapedge { stroke-opacity: 1 }
.o-map[data-tracing] .o-mapbadges > :not([data-hover]):not([aria-current="true"]):not([data-in-sel]) { opacity: .3 }
.o-map[data-tracing] .o-mapbadges > [data-hover] rect { stroke: var(--edge); stroke-width: 1.5 }
.o-map[data-tracing] .o-mapnode:not([data-hover-end]) > * { opacity: .4 }
.o-map[data-tracing] .o-mapnode[data-hover-end] > * { opacity: 1 }
/* A selection outlives a hover: while something else is traced, the selected card or edge keeps a quieter,
   dashed mark instead of fading with the rest. */
.o-map[data-tracing] .o-mapnode[aria-current="true"]:not([data-hover-end]) { box-shadow: none; outline: 2px dashed var(--blue); outline-offset: -2px }
.o-map[data-tracing] .o-mapnode[aria-current="true"]:not([data-hover-end]) > * { opacity: .8 }
/* The whole selection outlives a hover: its edges stay clearly drawn (the selected edge with a dashed blue
   ring on its number) and its cards keep a dashed ring, while everything else fades. */
.o-map[data-tracing] .o-mapedges > g[data-in-sel]:not([data-hover]) { opacity: .55 }
.o-map[data-tracing] .o-mapedges > g[data-in-sel]:not([data-hover]) .o-mapedge { stroke-opacity: .8 }
.o-map[data-tracing] .o-mapedges > g[aria-current="true"]:not([data-hover]) { opacity: .7 }
.o-map[data-tracing] .o-mapbadges > [aria-current="true"]:not([data-hover]) rect { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 3 2 }
.o-map[data-tracing] .o-mapnode[data-sel-end]:not([data-hover-end]) { box-shadow: none; outline: 2px dashed color-mix(in srgb, var(--blue) 70%, transparent); outline-offset: -2px }
.o-map[data-tracing] .o-mapnode[data-sel-end]:not([data-hover-end]) > * { opacity: .65 }
.o-map[data-tracing] .o-mapnode[data-hover-end] { box-shadow: 0 8px 24px rgba(var(--shadow-rgb),.18); outline: 3px solid color-mix(in srgb, var(--edge-ring, var(--blue)) 70%, transparent); outline-offset: -3px }
@media (prefers-reduced-motion: reduce) { .o-mapedge { transition: none } }
/* Connection numbers (K24) sit on their own layer above every line, on an opaque pill: no line is
   drawn across a number. A dimmed connection's number stays opaque, quieter in muted ink. */
.o-mapbadges > a { cursor: pointer }
.o-mapedge-badge rect { fill: var(--map-card); stroke: var(--edge, var(--map-border)); stroke-width: 1.2 }
.o-mapbadges [data-active] rect, .o-mapbadges [aria-current="true"] rect { stroke: var(--edge, var(--map-border)); stroke-width: 1.5 }
.o-mapedge-badge text { fill: var(--fg); font-size: 13px; font-weight: 600; text-anchor: middle; dominant-baseline: central }
.o-mapbadges [data-dimmed] text { fill: var(--map-muted); font-weight: 500 }

.o-mapside { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; padding: 16px 18px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-mapside h2 { font-size: 18px; font-weight: var(--weight-medium); margin: 0 }
.o-mapside dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: var(--text-body-sm) }
.o-mapside dt { color: var(--fg-3) } .o-mapside dd { margin: 0; min-width: 0; overflow-wrap: anywhere }
.o-mapside ul { margin: 0; padding-left: 18px; font-size: var(--text-body-sm) } .o-mapside li { margin: 3px 0 }
/* Text people and agents wrote reads as written: its line breaks, paragraphs and lists stay. */
.o-mapside__text, .o-mapside__desc { white-space: pre-line; overflow-wrap: anywhere }
.o-mapside__lead { margin: -4px 0 0; color: var(--fg-2) }
.o-mapside__desc { display: block; margin-top: 2px; font-size: var(--text-caption); color: var(--fg-3) }
.o-mapside li[data-current] { margin-inline: -8px; padding: 4px 8px; border-radius: var(--radius-option); background: var(--blue-tint) }
.o-mapside li[data-current] a { font-weight: var(--weight-medium) }
/* Imported source evidence fits the notes pane at every width. Identity labels
   stack above their values; long paths, revisions, digests and citations remain
   readable without widening the pane. Source keeps the prompt's pre-wrap. */
.o-evidence { min-width: 0; max-width: 100%; overflow-wrap: anywhere }
.o-evidence dl { grid-template-columns: minmax(0, 1fr); gap: 4px }
.o-evidence dd + dt { margin-top: var(--space-8) }
.o-evidence :is(details, summary, dd, p, a, code) { min-width: 0; overflow-wrap: anywhere }
.o-evidence code { white-space: pre-wrap }
.o-evidence a { max-width: 100%; white-space: normal }

/* Stepping through a use case's steps on the map (D35). */
.o-mapsteps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.o-mapsteps__at { margin-left: auto; font-size: var(--text-caption); color: var(--fg-2); display: inline-flex; gap: 8px }
.o-mapside__num { margin-right: 6px; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; color: var(--fg-2) }
.o-mapside li[data-depth="1"] { margin-left: 16px } .o-mapside li[data-depth="2"] { margin-left: 32px } .o-mapside li[data-depth="3"], .o-mapside li[data-depth="4"] { margin-left: 48px }
/* Arrow markers do not inherit from the edge that uses them: one per kind. */

/* Changing layer animates the diagram like the prototype (old layer out, new layer in, back is the
   reverse); ui.js lets only layer links ([data-o-nav="in|up"]) start a transition. Only the drawing
   (the map's svg) moves: the desk's dotted ground, legend and controls stay still. */
@view-transition { navigation: auto }
.o-work__canvas > .o-map > svg { view-transition-name: o-canvas }
/* Only a change of layer (types "in" and "up", set by ui.js) animates; every other navigation runs an
   instant, invisible transition instead of a skipped one, which would reject its promises before
   the deferred ui.js could catch them. */
::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*), ::view-transition-old(o-canvas), ::view-transition-new(o-canvas) { animation: none }
html:active-view-transition-type(in, up)::view-transition-old(o-canvas) { animation: o-map-out .16s var(--ease-out) both }
html:active-view-transition-type(in)::view-transition-new(o-canvas) { animation: o-map-in .48s var(--ease-reveal, var(--ease-out)) .1s both }
html:active-view-transition-type(up)::view-transition-new(o-canvas) { animation: o-map-back .48s var(--ease-reveal, var(--ease-out)) .1s both }
@keyframes o-map-out { to { opacity: 0; transform: scale(1.045) } }
@keyframes o-map-in { from { opacity: 0; transform: scale(.91) translateY(16px) } to { opacity: 1; transform: none } }
@keyframes o-map-back { from { opacity: 0; transform: scale(1.06) translateY(-12px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(o-canvas), ::view-transition-new(o-canvas) { animation: none } }

/* ---------- ui/work: the project workspace — the diagram owns the window ----------
   An explorer on the left and the desk. The explorer (.o-explorer) holds the brand, the project
   and model-version switchers, search (⌘K), the views, the view's structure (.o-tree__row) and
   the account; body[data-rail] folds it to a 60px rail of icons. The desk (.o-desk) holds the
   view's tools and the notes/agent buttons in one island (.o-desk__dock: .o-desk__tools,
   .o-desk__buttons) that its grip drags anywhere, the breadcrumb as a thin strip at the bottom
   (.o-desk__foot), and the panel (.o-sidepanel) the buttons open, which slides in from the right,
   stops at the strip and closes by its button again or by its own ×. The panel is
   an overlay, so opening it never resizes the map or moves its camera. Pages that are not a
   diagram scroll inside .o-work__page. */
.o-work { --explorer-w: 284px; --rail-w: 60px; --panel-w: min(380px, calc(100% - 24px)); --foot-h: 28px;
  height: 100vh; height: 100dvh; display: flex; overflow: hidden; margin: 0; color: var(--fg); background: var(--bg-solid) }
.o-explorer { flex: none; width: var(--explorer-w); min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 8px 8px;
  background: var(--surface-section); border-right: .5px solid var(--line); transition: width var(--dur-state) var(--ease-out); overflow: hidden }
.o-explorer__head { flex: none; display: flex; align-items: flex-start; gap: 6px; padding: 0 0 8px 2px }
.o-root a.o-explorer__brand, .o-explorer__brand { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px }
.o-explorer__brand:hover { background: var(--wash) }
.o-explorer__brand img { width: 28px; height: 28px; border-radius: 7px }
.o-explorer__id { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start }
.o-explorer__id .o-picker { max-width: 100%; height: 30px; padding: 0 6px }
.o-explorer__id .o-picker + .o-picker { height: 24px; font-size: var(--text-caption); font-weight: var(--weight-regular); color: var(--fg-2) }
.o-explorer__product { height: 36px; display: flex; align-items: center; font-weight: var(--weight-medium) }
.o-explorer__updated { max-width: 100%; padding: 0 6px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); color: var(--fg-3) }
.o-root a.o-explorer__settings, .o-explorer__settings { flex: none; display: flex; align-items: center; gap: 8px; height: 34px; margin-top: auto; padding: 0 10px; border-radius: var(--radius-option); font-size: var(--text-body-sm); color: var(--fg-2); text-decoration: none }
.o-explorer__settings:hover { background: var(--wash); color: var(--fg) }
.o-explorer__settings .ti { width: 18px; font-size: 18px; text-align: center }
.o-explorer__fold { flex: none; margin-top: 3px; color: var(--fg-3) }
.o-explorer__search { flex: none; display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 4px 8px; padding: 0 10px; border: .5px solid var(--line-strong);
  border-radius: var(--radius-field); background: var(--surface-field); color: var(--fg-3); font: inherit; font-size: var(--text-body-sm); cursor: pointer }
.o-explorer__search:hover { background: var(--surface-field-focus) }
.o-explorer__search .o-explorer__label { flex: 1; text-align: left }
.o-explorer__kbd { font: inherit; font-size: var(--text-micro); color: var(--fg-3) }
.o-explorer__views { flex: none; display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px }
.o-root a.o-explorer__view, .o-explorer__view, .o-root a.o-tree__row, .o-tree__row { display: flex; align-items: center; gap: 8px; min-width: 0; border-radius: var(--radius-option); color: var(--fg); text-decoration: none }
.o-explorer__view { height: 34px; padding: 0 10px; font-size: var(--text-body-sm) }
.o-explorer__view .ti { flex: none; width: 18px; font-size: 18px; text-align: center; color: var(--fg-2) }
.o-explorer__view:hover, .o-tree__row:hover { background: var(--wash) }
.o-explorer__view[aria-current="page"], .o-tree__row[aria-current="page"] { background: color-mix(in srgb, var(--blue) 13%, transparent); color: var(--blue); font-weight: var(--weight-medium) }
.o-explorer__view[aria-current="page"] .ti { color: var(--blue) }
.o-explorer__title { flex: none; padding: 10px 12px 6px; border-top: .5px solid var(--line); font-size: var(--text-nano); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3) }
.o-explorer__tree { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin }
.o-tree__row { flex: none; min-height: 30px; padding: 4px 8px 4px calc(6px + var(--tree-depth, 0) * 14px); font-size: var(--text-body-sm) }
.o-tree__row[data-depth="1"] { --tree-depth: 1 } .o-tree__row[data-depth="2"] { --tree-depth: 2 } .o-tree__row[data-depth="3"] { --tree-depth: 3 }
.o-tree__row[data-depth="4"] { --tree-depth: 4 } .o-tree__row[data-depth="5"] { --tree-depth: 5 } .o-tree__row[data-depth="6"] { --tree-depth: 6 }
/* Top level is a compact neutral destination, outside the layer hierarchy. */
.o-tree__row[data-o-tree-root] { align-self: flex-start; min-height: 28px; padding: 4px 10px; margin: 0 0 6px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); font-weight: var(--weight-medium) }
.o-tree__row[data-o-tree-root]:hover { background: var(--surface-field-focus) }
.o-tree__row[data-o-tree-root][aria-current="page"] { color: var(--fg); background: var(--wash) }
.o-tree__fold { flex: none; width: 14px; font-size: 14px; color: var(--fg-3) }
/* A row's name wraps to two lines (its whole name stays in its title), and a
   muted second line says what the row is, so a long name is never cut to a
   few letters by its label. */
.o-tree__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.o-tree__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.3 }
.o-tree__sub { font-size: var(--text-micro); color: var(--fg-3); line-height: 1.3; overflow-wrap: anywhere }
.o-tree__meta { flex: none; font-size: var(--text-micro); color: var(--fg-3); font-variant-numeric: tabular-nums }
.o-explorer__foot { flex: none; display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: .5px solid var(--line) }
.o-explorer__foot .o-work__account { flex: 1; min-width: 0; justify-content: flex-start; gap: 10px; width: auto; padding: 0 8px 0 2px; border-radius: 12px }
.o-work__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); color: var(--fg-2) }
.o-explorer__unfold { display: none }
/* The rail: icons only; the brand, search, views and account stay one click away. */
.o-work[data-rail] .o-explorer { width: var(--rail-w); align-items: center; padding: 10px 6px 8px }
.o-work[data-rail] .o-explorer__head { flex-direction: column; align-items: center; padding: 0 0 6px }
.o-work[data-rail] .o-explorer :is(.o-explorer__id, .o-explorer__fold, .o-explorer__label, .o-explorer__kbd) { display: none }
.o-work[data-rail] .o-explorer__search { width: 40px; height: 40px; margin: 0 0 6px; padding: 0; justify-content: center; border: 0; background: transparent }
.o-work[data-rail] .o-explorer__search .ti { font-size: 19px }
.o-work[data-rail] .o-explorer__views { flex: 1; align-items: center; gap: 4px }
.o-work[data-rail] .o-explorer__view { width: 44px; height: 44px; padding: 0; justify-content: center }
.o-work[data-rail] .o-explorer__view .ti { font-size: 21px }
.o-work[data-rail] .o-explorer__foot { flex-direction: column; border-top: 0 }
.o-work[data-rail] .o-explorer__foot .o-work__account { flex: none; width: 36px; padding: 0; justify-content: center }
.o-work[data-rail] .o-explorer__unfold { display: inline-flex }
.o-work[data-rail] .o-explorer > .o-spacer { display: none }
.o-work[data-rail] .o-explorer__settings { width: 44px; height: 44px; padding: 0; justify-content: center }
/* In the rail the project and the version are icons (.o-explorer__railbtn) opening their menus. */
.o-explorer__railbtn { display: none; flex: none; align-items: center; justify-content: center; width: 40px; height: 36px; margin: 0 0 2px; padding: 0; border: 0;
  border-radius: var(--radius-option); background: transparent; color: var(--fg-2); font: inherit; cursor: pointer }
.o-explorer__railbtn:hover, .o-explorer__railbtn[aria-expanded="true"] { background: var(--wash); color: var(--fg) }
.o-explorer__railbtn .ti { font-size: 19px }
.o-work[data-rail] .o-explorer__railbtn { display: inline-flex }
/* The menu's tip (ui.js, [data-o-tip] → .o-tip): the item's name and its question beside the
   rail, on hover or keyboard focus; placed in window pixels, so the rail's scroll never clips it. */
.o-tip { position: fixed; z-index: 60; max-width: 280px; padding: 6px 10px; border-radius: 9px; background: var(--fg); color: var(--bg-solid);
  box-shadow: 0 6px 18px rgba(var(--shadow-rgb),.22); font-size: var(--text-caption); line-height: 1.35; pointer-events: none }
.o-tip strong { font-weight: var(--weight-semibold) }
.o-tip[hidden] { display: none }
/* The second column (.o-viewnav, specs/projects D54): the view's own list beside the rail, its
   title naming what it lists ("Model · Sheets") and one line explaining it; rows with parts fold
   in place (.o-tree__row[data-o-fold]). [data-closed] folds it to a strip whose button reopens it. */
.o-viewnav { --viewnav-w: 264px; flex: none; width: var(--viewnav-w); min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 8px 8px;
  background: var(--surface-section); border-right: .5px solid var(--line); overflow: hidden; box-sizing: border-box }
.o-viewnav__head { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 2px 0 8px; min-height: 30px }
.o-viewnav__title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--fg-2) }
.o-viewnav__view { color: var(--fg) }
.o-viewnav__sep { margin: 0 4px; color: var(--fg-3) }
.o-viewnav__close { display: none }
.o-viewnav__lead { flex: none; margin: 2px 8px 10px; font-size: var(--text-caption); line-height: 1.45; color: var(--fg-3) }
.o-viewnav__tree { padding-bottom: 8px }
.o-viewnav__unfold { display: none; flex: 1; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 8px 0; border: 0; border-radius: var(--radius-option);
  background: transparent; color: var(--fg-2); font: inherit; cursor: pointer }
.o-viewnav__unfold:hover { background: var(--wash); color: var(--fg) }
.o-viewnav__unfold .ti { font-size: 17px }
.o-viewnav__strip { writing-mode: vertical-rl; font-size: var(--text-caption); color: var(--fg-3); white-space: nowrap }
.o-viewnav[data-closed] { width: 36px; padding: 8px 2px }
.o-viewnav[data-closed] :is(.o-viewnav__head, .o-viewnav__lead, .o-viewnav__tree, .o-outline__find, .o-outline__none) { display: none }
.o-viewnav[data-closed] .o-viewnav__unfold { display: flex }
.o-desk__navbtn { display: none; gap: 6px }
/* A row with parts folds the rows under it: its chevron (data-o-fold-toggle) is the target. */
.o-tree__row[data-o-fold] .o-tree__fold { cursor: pointer; border-radius: 4px }
.o-tree__row[data-o-fold] .o-tree__fold:hover { background: var(--wash); color: var(--fg) }
.o-tree__row[role="button"] { cursor: pointer }
.o-root .o-tree__row[hidden], .o-tree__row[hidden] { display: none }
/* The desk. */
.o-desk { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; container: desk / inline-size }
.o-desk__dock { position: absolute; z-index: 8; top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); display: flex; align-items: center; gap: 6px;
  padding: 5px; border-radius: 14px; background: var(--surface-popover); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong);
  box-shadow: var(--edge-block), 0 8px 24px rgba(var(--shadow-rgb),.12); transition: left var(--dur-agent) var(--ease-out) }
/* Dragged by its grip: placed in desk pixels (ui.js), no centring and no slide. */
.o-desk__dock[data-placed] { transform: none; transition: none }
.o-desk__dock[data-dragging] { box-shadow: var(--edge-block), 0 14px 36px rgba(var(--shadow-rgb),.24) }
.o-desk__grip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 32px; margin-right: -2px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--fg-4); cursor: grab; touch-action: none }
.o-desk__grip:hover { color: var(--fg-2); background: var(--wash) }
.o-desk__dock[data-dragging] .o-desk__grip { cursor: grabbing }
.o-desk__grip .ti { font-size: 17px }
.o-desk__tools { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none }
.o-desk__tools > * { flex: none }
.o-desk[data-panel] .o-map__editbar { left: calc((100% - var(--panel-w)) / 2); max-width: calc(100% - var(--panel-w) - 24px) }
.o-desk[data-panel] > .o-desk__dock:not([data-placed]) { left: calc((100% - var(--panel-w)) / 2); max-width: calc(100% - var(--panel-w) - 24px) }
.o-desk__tools .o-work__flow { gap: 6px; font-size: var(--text-caption); color: var(--fg-3) }
.o-desk__tools .o-work__flow .ti { font-size: 17px; padding-left: 4px }
.o-desk__tools .o-work__flow select { height: 32px; max-width: 200px }
/* The way back (D53, D56): an arrow alone leads the dock when a page was opened from another view
   (back=); its tip and accessible name say where it goes. */
.o-root a.o-backlink, .o-backlink { color: var(--blue) }
.o-desk__sep { width: 1px; height: 20px; background: var(--line); margin: 0 2px }
/* Menu buttons (ui/work · .o-menubtn): a dock choice as a button that opens its menu, never a native
   select, so the dock fits a narrow desk. __label names the choice, __value shows the current one
   (cut with an ellipsis), __caret the menu; [data-active] (not the default) turns it blue with a dot.
   Its .o-menu holds __group heads and menuitemradio / menuitemcheckbox items ticked by aria-checked. */
.o-menubtn { gap: 6px; max-width: 260px; padding: 0 8px 0 9px }
.o-menubtn > .ti:first-child { font-size: 17px }
.o-menubtn__label { flex: none }
.o-menubtn__value { min-width: 0; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3) }
.o-menubtn__value::before { content: "\00b7"; margin-right: 6px }
/* A tight tools row (W59): with the agent panel open below 1500 px, or below 1200 px, a menu
   button keeps its icon and current value; its title still names it. */
@media (max-width: 1499px) { .o-desk[data-panel] .o-desk__tools .o-menubtn__label { display: none } .o-desk[data-panel] .o-desk__tools .o-menubtn__value::before { content: none } }
@media (max-width: 1199px) { .o-desk__tools .o-menubtn__label { display: none } .o-desk__tools .o-menubtn__value::before { content: none } }
/* The same narrow tools row keeps the icon of a segment or button that has one (Block schema,
   Swimlanes, Its use case, Diagram, Story); the label stays for screen readers, and the row keeps
   the Diagram / Story switch on screen. */
@media (max-width: 1499px) { .o-desk[data-panel] .o-desk__tools :is(.o-seg__opt, .o-btn):has(> .ti) { font-size: 0; gap: 0 } .o-desk[data-panel] .o-desk__tools :is(.o-seg__opt, .o-btn):has(> .ti) > .ti { font-size: 17px; margin: 0 } }
@media (max-width: 1199px) { .o-desk__tools :is(.o-seg__opt, .o-btn):has(> .ti) { font-size: 0; gap: 0 } .o-desk__tools :is(.o-seg__opt, .o-btn):has(> .ti) > .ti { font-size: 17px; margin: 0 } }
.o-menubtn__caret { flex: none; font-size: 13px !important; opacity: .6 }
.o-menubtn[data-active] { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent) }
.o-menubtn[data-active] .o-menubtn__value { color: inherit }
.o-menubtn[data-active]::after { content: ""; flex: none; width: 6px; height: 6px; margin-left: -2px; border-radius: 50%; background: var(--blue); order: 3 }
.o-menubtn[data-active] .o-menubtn__caret { order: 4 }
.o-menubtn[aria-expanded="true"] { background: var(--wash) }
.o-menubtn__menu { max-height: min(70vh, 520px); max-width: min(360px, calc(100vw - 24px)); overflow-y: auto }
.o-menubtn__menu .o-menu__item { white-space: normal; overflow-wrap: anywhere; line-height: 1.35 }
/* A growing list (menuList): a filter, the first five choices and More… (N); with script the rest
   wait until More or a filter shows them (data-o-show), and the list scrolls within a capped height. */
.o-menubtn__find { padding: 6px 8px 4px }
.o-menubtn__find .o-input { width: 100% }
.o-menubtn__list[data-expanded], .o-menubtn__list[data-filtering] { max-height: 288px; overflow-y: auto }
[data-o-js] .o-menubtn__list [data-o-menu-more]:not([data-o-show]), .o-menubtn__list .o-menu__item[hidden], .o-menubtn__more[hidden] { display: none }
.o-menubtn__more { color: var(--blue) }
.o-menubtn__none { margin: 0; padding: 8px 10px; color: var(--fg-3); font-size: var(--text-small) }
html:not([data-o-js]) .o-menubtn__find, html:not([data-o-js]) .o-menubtn__more { display: none }
.o-menubtn__group { padding: 8px 10px 4px; font-size: var(--text-nano); font-weight: var(--weight-medium); letter-spacing: .04em; text-transform: uppercase }
.o-menu__item:is([role="menuitemradio"], [role="menuitemcheckbox"]) { padding-left: 30px; position: relative }
.o-menu__item:is([role="menuitemradio"], [role="menuitemcheckbox"])[aria-checked="true"] { font-weight: var(--weight-medium) }
.o-menu__item:is([role="menuitemradio"], [role="menuitemcheckbox"])[aria-checked="true"]::before { content: "\2713"; position: absolute; left: 11px; color: var(--blue) }
.o-menu__item[role="menuitemcheckbox"]::after { content: ""; position: absolute; left: 9px; width: 13px; height: 13px; box-sizing: border-box; border: 1.5px solid var(--fg-4); border-radius: 4px }
.o-menu__item[role="menuitemcheckbox"][aria-checked="true"]::after { border-color: var(--blue) }
.o-menu__item[role="menuitemcheckbox"][aria-checked="true"]::before { left: 11.5px; font-size: 11px }
.o-menu__item:focus-visible { outline: 2px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: -2px }
.o-desk__foot { flex: none; height: var(--foot-h); display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--surface-section);
  border-top: .5px solid var(--line); font-size: var(--text-micro); color: var(--fg-3); white-space: nowrap }
.o-desk__foot .o-crumb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-micro) }
.o-desk__foot .o-crumb [aria-current] { color: var(--fg); font-weight: var(--weight-medium) }
.o-desk__meta { flex: none }
/* The notes and agent buttons close the dock, after a hairline; a pressed one is its panel, open. */
.o-desk__buttons { flex: none; display: flex; gap: 2px; padding-left: 6px; border-left: .5px solid var(--line) }
.o-desk__tools:empty + .o-desk__buttons, .o-desk__grip + .o-desk__buttons { padding-left: 0; border-left: 0 }
.o-desk__buttons .o-iconbtn { color: var(--fg-2) } .o-desk__buttons .o-iconbtn .ti { font-size: 18px }
.o-desk__buttons .o-iconbtn:hover { color: var(--fg); background: var(--wash-hover) }
.o-desk__buttons .o-iconbtn[aria-pressed="true"] { background: var(--blue); color: #fff }
.o-sidepanel { position: absolute; z-index: 7; top: 0; right: 0; bottom: var(--foot-h); width: var(--panel-w); display: flex; flex-direction: column; min-height: 0;
  background: var(--surface-popover); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); border-left: .5px solid var(--line);
  box-shadow: -14px 0 36px rgba(var(--shadow-rgb),.10); transform: translateX(calc(100% + 48px)); visibility: hidden;
  transition: transform var(--dur-agent) var(--ease-out), visibility 0s linear var(--dur-agent) }
.o-sidepanel[data-open] { transform: none; visibility: visible; transition: transform var(--dur-agent) var(--ease-out), visibility 0s }
.o-sidepanel__pane { flex: 1; min-height: 0; display: flex; flex-direction: column }
.o-sidepanel__pane[hidden] { display: none }
.o-sidepanel__head { flex: none; height: 56px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 10px 0 18px; font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3) }
.o-sidepanel__head > h2 { flex: 1; min-width: 0; margin: 0; font: inherit; letter-spacing: inherit; color: inherit }
.o-sidepanel__body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 18px 18px; font-size: var(--text-body-sm) }
.o-sidepanel__body > p { margin: 0 }
.o-sidepanel > .o-sidepanel__pane > .o-mapside { border-radius: 0; box-shadow: none; background: transparent; padding-top: 0 }
@media (prefers-reduced-motion: reduce) { .o-sidepanel, .o-sidepanel[data-open], .o-desk__dock, .o-explorer { transition: none } }
/* Search: a palette over everything the workspace can open. */
.o-palette { width: min(600px, calc(100vw - 24px)); max-height: min(460px, calc(100vh - 140px)); margin: 110px auto auto; padding: 0; border: 0; border-radius: var(--radius-section);
  background: var(--surface-popover); color: var(--fg); box-shadow: var(--edge-block), 0 24px 60px rgba(var(--shadow-rgb),.3) }
.o-palette::backdrop { background: rgba(var(--shadow-rgb),.28) }
.o-palette[open] { animation: rise var(--dur-base) var(--ease-out) both }
.o-palette__box { display: flex; flex-direction: column; max-height: inherit; padding: 8px }
.o-palette__field { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-bottom: .5px solid var(--line); color: var(--fg-3) }
.o-palette__input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 16px; outline: none }
.o-palette__list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 1px; padding-top: 6px }
.o-root a.o-palette__item, .o-palette__item { flex: none; display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 6px 10px; border-radius: var(--radius-option); color: var(--fg); text-decoration: none; font-size: var(--text-body-sm) }
.o-palette__item[hidden] { display: none }
.o-palette__item[data-active] { background: color-mix(in srgb, var(--blue) 12%, transparent) }
.o-palette__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-palette__kind { flex: none; font-size: var(--text-micro); color: var(--fg-3) }
.o-palette__empty { margin: 0; padding: 16px 10px; color: var(--fg-3); font-size: var(--text-body-sm) }
.o-root a.o-work__brand, .o-work__brand { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 4px; border-radius: 10px; color: var(--fg); font-weight: var(--weight-medium); text-decoration: none }
.o-work__flow { display: flex; align-items: center; gap: 8px; font-size: var(--text-micro); color: var(--fg-3) }
.o-work__flow select { height: 30px; max-width: 280px; padding: 0 28px 0 10px; font-size: var(--text-caption) }
.o-work__tool { display: flex; align-items: center }
.o-work__account { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; cursor: pointer }
.o-work__account:hover, .o-work__account[aria-expanded="true"] { background: var(--wash) }
.o-work__account:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px }
.o-work__main { flex: 1; min-height: 0; display: flex; flex-direction: column }
/* The desk fills the whole canvas: no inset, frame or rounded corners. */
.o-work__canvas { position: relative; flex: 1; min-height: 0; background: var(--map-ground) }
.o-work__canvas > .o-map { height: 100%; min-height: 0; border: 0; border-radius: 0 }
.o-work__canvas > .o-banner { position: absolute; z-index: 4; top: 64px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 20px) }
/* Skeleton (ui/skeleton): placeholder blocks shown while a desk swap is slow (ui.js adds it after
   SKELETON_DELAY ms, so a fast swap never flickers). .o-skeleton--desk covers the canvas with card
   blocks, .o-skeleton--pane stands in for the notes' lines; __block and __line shimmer, still under
   reduced motion. */
@keyframes o-shimmer { from { background-position: 100% 0 } to { background-position: -100% 0 } }
.o-skeleton { pointer-events: none }
.o-skeleton__block, .o-skeleton__line { border-radius: 8px; background: linear-gradient(90deg, var(--wash) 30%, color-mix(in srgb, var(--fg) 9%, transparent) 50%, var(--wash) 70%); background-size: 200% 100%; animation: o-shimmer 1.3s linear infinite }
.o-skeleton--desk { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; align-content: center; gap: 48px 64px; padding: 96px 48px; background: color-mix(in srgb, var(--map-ground) 72%, transparent); animation: fade var(--dur-fast, .15s) ease-out }
.o-skeleton--desk .o-skeleton__block { height: 92px; border-radius: 14px }
.o-skeleton--pane { display: flex; flex-direction: column; gap: 10px; padding-top: 6px }
.o-skeleton--pane .o-skeleton__line { height: 12px }
.o-skeleton--pane .o-skeleton__line:nth-child(1) { width: 40%; height: 18px }
.o-skeleton--pane .o-skeleton__line:nth-child(3n) { width: 72% }
.o-skeleton--pane .o-skeleton__line:nth-child(3n+2) { width: 88% }
.o-sidepanel__body[data-o-loading] > :not(.o-skeleton) { display: none }
@media (prefers-reduced-motion: reduce) { .o-skeleton__block, .o-skeleton__line, .o-skeleton--desk { animation: none } }
/* An open side panel covers the desk's right edge: the camera controls and the legend move left. */
.o-map__foot { transition: right var(--dur-agent) var(--ease-out) }
.o-desk[data-panel] .o-map__foot { right: calc(var(--panel-w) + 12px) }
.o-work__page { flex: 1; min-height: 0; overflow: auto }
/* The round buttons float over a scrolling page: a narrow desk gives them a lane. */
@container desk (max-width: 1360px) { .o-work__page[data-buttons] > .o-work__inner { padding-top: 64px } }
.o-work__page[data-tools] > .o-work__inner { padding-top: 70px } /* the tool island floats over the page */
/* A list or table layout of a canvas view (the Use cases list and coverage) keeps the canvas's dotted
   ground under its panels, so switching layouts never changes the room, only what is drawn in it. */
/* On-canvas panel (.o-ground): every view of a project sits on the canvas's dotted ground. A view
   that is a drawing fills it with the map; a table or dashboard view floats its panels on it. Inside
   the ground the glass surfaces turn opaque, so no panel, table or sheet shows the dots through. */
.o-ground, .o-work__page[data-ground] { background-color: var(--map-card); background-image: var(--canvas-dots); background-size: 22px 22px;
  --surface-section: var(--surface-solid); --surface-block: var(--surface-solid);
  --surface-well: color-mix(in srgb, rgb(var(--glass-rgb)) 50%, var(--surface-solid)); --surface-field: color-mix(in srgb, rgb(var(--glass-rgb)) 82%, var(--map-ground)) }
.o-work__page[data-ground] .o-deploy__system { background: var(--surface-solid) }
.o-desk[data-panel] > .o-work__page { padding-right: var(--panel-px, var(--panel-w)) }
/* A page (not a canvas) reflows beside the agent panel: it is a size container, so its grids
   stack by the room the page has, not by the window (the panel and the outline take part of it). */
.o-work__page { container: page / inline-size }
.o-work__inner { width: 100%; max-width: 1120px; margin: 0 auto; padding: 18px 20px 48px; display: flex; flex-direction: column; gap: 16px }
.o-work__empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; overflow: auto }
.o-work__empty > .o-panel { width: min(560px, 100%) }
/* Release notes (.o-release): a version and date head, then one row per change with a New/Fixed
   tag. The releases since the viewer's last visit show in the bell (.o-notifs, W55). */
.o-release__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px }
.o-release__version { margin: 0; font-size: var(--text-body); font-weight: var(--weight-medium) }
.o-release__date { font-size: var(--text-micro); color: var(--fg-3) }
.o-release { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-body-sm) }
.o-release li { display: flex; align-items: baseline; gap: 10px }
.o-release li > .o-tag { flex: none; min-width: 52px; justify-content: center }
/* A switcher names the current project or model version and opens an .o-menu popover. */
.o-picker { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--fg); font: inherit; font-size: var(--text-body-sm); font-weight: var(--weight-medium); cursor: pointer }
.o-picker:hover, .o-picker[aria-expanded="true"] { background: var(--wash) }
.o-picker__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-picker__sub { flex: none; font-weight: var(--weight-regular); color: var(--fg-3) }
.o-picker > .ti { flex: none; font-size: 15px; color: var(--fg-3) }
.o-root .o-menu a.o-menu__item { color: var(--fg); text-decoration: none }
.o-menu__item[aria-current="true"] { font-weight: var(--weight-medium) }
.o-menu__item[aria-current="true"]::after { content: "\2713"; margin-left: auto; padding-left: 12px; color: var(--blue) }
.o-menu__item .o-menu__hint { margin-left: auto; padding-left: 12px }
.o-menu--wide { min-width: 300px; max-width: min(420px, calc(100vw - 24px)) }
/* Projects: glass cards with the project's tile icon, name, role and team size, a ⋯ menu, an optional
   description, and a foot that states what is inside (revision and draft tags) and opens the diagram.
   A dashed tile creates a project. --list stacks them one per row. */
.o-projectgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px }
.o-projectgrid--list { grid-template-columns: minmax(0, 1fr); gap: 8px }
.o-projectcard { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 14px 0 18px; border-radius: var(--radius-section);
  background: var(--surface-section); box-shadow: var(--edge-block); transition: box-shadow var(--dur-fast) ease, transform var(--dur-press) ease }
.o-projectcard:hover { box-shadow: var(--edge-block), 0 12px 28px -14px rgba(var(--shadow-rgb),.35) }
.o-projectcard__head { display: flex; align-items: center; gap: 12px; min-width: 0 }
.o-root a.o-projectcard__open, .o-projectcard__open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--fg); text-decoration: none }
.o-projectcard__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit } /* the whole card opens the project */
.o-projectcard__name { font-size: 18px; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-projectcard__meta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-caption); color: var(--fg-3) }
.o-projectcard__meta .ti { font-size: 14px }
.o-projectcard__more { position: relative; z-index: 1 }
.o-projectcard__desc { margin: 0; font-size: var(--text-body-sm); color: var(--fg-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.o-root a.o-projectcard__foot, .o-projectcard__foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; min-height: 46px; margin: auto -14px 0 -18px; padding: 0 16px 0 18px;
  border-top: .5px solid var(--line); border-radius: 0 0 var(--radius-section) var(--radius-section); color: var(--fg-3); text-decoration: none }
.o-projectcard__foot:hover { background: var(--wash) }
.o-projectcard__foot > .ti { font-size: 16px; transition: transform var(--dur-fast) ease }
.o-projectcard:hover .o-projectcard__foot > .ti { color: var(--blue); transform: translateX(2px) }
.o-projectcard__when { flex: none; font-size: var(--text-micro) }
/* A card with a thumbnail (the project's top layer, .o-thumb) shows it on top; the thumbnail is a link like the name. */
.o-projectcard--thumb { padding-top: 0 }
.o-root a.o-projectcard__thumb, .o-projectcard__thumb { position: relative; z-index: 1; display: block; height: 150px; margin: 0 -14px 2px -18px; border-radius: var(--radius-section) var(--radius-section) 0 0; overflow: hidden;
  background: var(--map-ground); border-bottom: .5px solid var(--line) }
.o-projectcard__facts { margin: 0; font-size: var(--text-caption); color: var(--fg-3) }
/* Settings tiles: the project-wide settings at a glance on the project overview; each opens its tab of the project pane. */
.o-settiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px }
.o-root a.o-settile, .o-settile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: var(--radius-tile, 14px); background: var(--surface-raised);
  box-shadow: var(--edge-block); color: var(--fg); text-decoration: none; transition: box-shadow var(--dur-fast) ease }
.o-settile:hover { box-shadow: var(--edge-block), 0 10px 24px -14px rgba(var(--shadow-rgb),.35) }
.o-settile__title { font-size: var(--text-body-sm); font-weight: var(--weight-medium) }
.o-settile__value { font-size: 25px; font-weight: var(--weight-medium); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-settile__sub { font-size: var(--text-caption); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-settile[data-warn] .o-settile__sub { color: var(--orange) }
.o-projectgrid--list .o-projectcard__thumb, .o-projectgrid--list .o-projectcard__facts { display: none }
.o-projectgrid--list .o-projectcard--thumb { padding-top: 8px }
/* Thumbnail: a diagram drawn small from the map's layout; strokes keep one pixel at any scale. */
.o-thumb { display: block; width: 100%; height: 100%; padding: 12px 14px; box-sizing: border-box }
.o-thumb__zone { fill: color-mix(in srgb, var(--node, var(--blue)) 6%, transparent); stroke: color-mix(in srgb, var(--node, var(--blue)) 40%, transparent); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke }
.o-thumb__edge { fill: none; stroke: var(--fg-3); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke }
.o-thumb__node { fill: color-mix(in srgb, var(--node, var(--blue)) 12%, var(--map-card)); stroke: color-mix(in srgb, var(--node, var(--blue)) 45%, var(--map-border)); stroke-width: 1; vector-effect: non-scaling-stroke }
.o-thumb__node[data-system] { fill: var(--map-featured); stroke: var(--map-featured) }
.o-thumb__node:is([data-kind="actor"], [data-kind="external_system"]) { --node: var(--blue) } .o-thumb__node[data-kind="boundary"] { --node: var(--indigo) }
.o-thumb__node[data-kind="area"] { --node: var(--c-products) } .o-thumb__node[data-kind="process"] { --node: var(--green) }
.o-thumb__node[data-kind="component"] { --node: var(--fg-2) } .o-thumb__node[data-kind="data_store"] { --node: var(--orange) }
:is(.o-thumb__node, .o-thumb__zone)[data-tone="teal"] { --node: var(--c-products) } :is(.o-thumb__node, .o-thumb__zone)[data-tone="indigo"] { --node: var(--indigo) }
:is(.o-thumb__node, .o-thumb__zone)[data-tone="green"] { --node: var(--green) } :is(.o-thumb__node, .o-thumb__zone)[data-tone="orange"] { --node: var(--orange) }
:is(.o-thumb__node, .o-thumb__zone)[data-tone="slate"] { --node: var(--fg-2) } :is(.o-thumb__node, .o-thumb__zone)[data-tone="blue"] { --node: var(--blue) }
.o-projectgrid--list .o-projectcard { flex-direction: row; align-items: center; gap: 14px; padding: 8px 8px 8px 16px }
.o-projectgrid--list .o-projectcard__head { flex: 1 1 50% }
.o-projectgrid--list .o-projectcard__desc { flex: 1 1 30%; -webkit-line-clamp: 1 }
.o-projectgrid--list .o-projectcard__foot { flex: 0 0 auto; margin: 0; border: 0; min-height: 36px; border-radius: 12px }
/* ui/agents: connected MCP agents as cards. .o-agentgrid lays them out like projects; each .o-agentcard shows the
   provider's .o-agentlogo (a white tile with the brand mark, or a robot .o-tileicon), the person's name for the
   connection (or the product name), a rename popover, the granted scopes as icon tags, facts (last used, connected,
   connection ID) and Disconnect. A dashed .o-agentnew tile opens the "Add an agent" dialog: .o-howto tabs per agent
   ([data-o-tabs]) with numbered steps and .o-copyfield values copied by [data-o-copy]. */
.o-agentgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px }
.o-agentcard { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 14px 0 16px; border-radius: var(--radius-section);
  background: var(--surface-section); box-shadow: var(--edge-block); transition: box-shadow var(--dur-fast) ease }
.o-agentcard:hover { box-shadow: var(--edge-block), 0 12px 28px -14px rgba(var(--shadow-rgb),.35) }
.o-agentcard__head { display: flex; align-items: center; gap: 12px; min-width: 0 }
.o-agentcard__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.o-agentcard__name { font-size: 17px; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-agentcard__meta { font-size: var(--text-caption); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-agentcard__rename { width: min(300px, calc(100vw - 32px)); padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end }
.o-agentcard__rename:not(:popover-open) { display: none }
.o-agentcard__rename .o-field { align-self: stretch }
.o-agentcard__scopes { display: flex; flex-wrap: wrap; gap: 5px }
.o-agentcard__scopes .o-tag { gap: 4px; cursor: default } .o-agentcard__scopes .o-tag .ti { font-size: 13px }
.o-agentcard__facts { margin: 0; display: grid; gap: 4px; font-size: var(--text-caption) }
.o-agentcard__facts > div { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.o-agentcard__facts dt { flex: 0 0 92px; color: var(--fg-3) }
.o-agentcard__facts dd { margin: 0; min-width: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; color: var(--fg-2) }
.o-agentcard__facts code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: var(--wash); color: var(--fg-2) }
.o-agentcard__foot { display: flex; justify-content: flex-end; margin: auto -14px 0 -16px; padding: 6px 8px; border-top: .5px solid var(--line) }
.o-agentcard__foot .o-btn:not(:hover):not(:focus-visible) { color: var(--fg-3) }
.o-agentnew { min-height: 220px }
.o-agentlogo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--fg-2);
  box-shadow: inset 0 0 0 .5px rgba(var(--shadow-rgb),.18), 0 6px 14px -8px rgba(var(--shadow-rgb),.45) }
.o-agentlogo img { display: block; width: 22px; height: 22px; transition: transform var(--dur-base) var(--ease-out) }
.o-agentlogo .ti { font-size: 20px }
.o-agentlogo--sm { width: 28px; height: 28px; border-radius: 9px } .o-agentlogo--sm img { width: 17px; height: 17px } .o-agentlogo--sm .ti { font-size: 16px }
.o-agentlogo--robot { --s: 40px; border-radius: 12px }
.o-agentcard:hover .o-agentlogo img, .o-agentcard:hover .o-agentlogo--robot .ti { transform: rotate(-12deg) scale(1.08) }
.o-focus__head > .o-agentlogo { margin-bottom: 6px }
.o-howto { display: flex; flex-direction: column; gap: 16px; padding-top: 14px }
.o-howto__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px }
.o-howto__tab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border-radius: 12px; cursor: pointer;
  font-size: var(--text-caption); color: var(--fg-2); background: var(--wash); transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease }
.o-howto__tab input { position: absolute; opacity: 0; pointer-events: none }
.o-howto__tab:hover { background: var(--wash-hover) }
.o-howto__tab:has(input:checked) { color: var(--fg); background: var(--surface-section); box-shadow: var(--edge-block), 0 0 0 1.5px var(--blue) }
.o-howto__tab:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px }
.o-howto__pane { display: flex; flex-direction: column; gap: 14px } .o-howto__pane[hidden] { display: none }
.o-howto__head { display: flex; align-items: center; gap: 12px }
.o-howto__head .o-agentlogo { width: 44px; height: 44px; border-radius: 14px } .o-howto__head .o-agentlogo img { width: 26px; height: 26px }
.o-howto__head > span:last-child { display: flex; flex-direction: column; gap: 1px } .o-howto__head b { font-size: 18px; font-weight: var(--weight-medium) }
.o-howto__steps { margin: 0; padding: 0; list-style: none; counter-reset: howto; display: flex; flex-direction: column; gap: 12px }
.o-howto__steps li { counter-increment: howto; position: relative; padding-left: 34px; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-body-sm); color: var(--fg) }
.o-howto__steps li::before { content: counter(howto); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--blue); background: var(--blue-tint) }
.o-howto__note { display: flex; align-items: flex-start; gap: 6px; margin: 0 }
.o-copyfield { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 4px 4px 12px; border-radius: 10px; background: var(--indigo-tint) }
.o-copyfield code { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: var(--indigo); overflow-x: auto; white-space: nowrap; scrollbar-width: none; user-select: all }
.o-copyfield .o-iconbtn { color: var(--indigo) }
.o-copyfield [data-o-copied] { color: var(--ok) }
/* ui/start: the live lines of Getting started's setup steps (specs/start §3.4): __status is the agent's (step 2)
   and the model's (step 3) progress, data-state pending | working | done; __members lists the team (step 4). */
.o-start__status { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 12px; font-size: var(--text-body-sm); background: var(--wash) }
.o-start__status > .ti { flex: none; font-size: 19px; color: var(--fg-3) }
.o-start__status[data-state="pending"] > .ti-loader-2 { animation: spin var(--dur-spin) linear infinite }
.o-start__status[data-state="working"] > .ti { color: var(--indigo) }
.o-start__status[data-state="done"] > .ti { color: var(--ok) }
.o-start__members { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px }
.o-start__members li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; font-size: var(--text-body-sm) }
.o-projectnew { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 132px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-section);
  background: transparent; color: var(--fg-3); font: inherit; font-size: 19px; cursor: pointer; transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background var(--dur-fast) ease }
.o-projectnew:hover { color: var(--blue); border-color: var(--blue); background: var(--sel) }
.o-projectgrid--list .o-projectnew { min-height: 56px; font-size: var(--text-body) }
.o-projectfirst { width: min(560px, 100%) }

/* ---------- ui/forecast: simulated load on the map and the Forecast view ----------
   Figures are planning estimates: the load line and edge rates use the "simulated" amber tone. */
/* The load sits in the card's foot, bottom left, as a round pill, so it never covers the summary. */
.o-mapnode__load { display: inline-flex; flex: none; align-items: baseline; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: var(--text-micro); color: var(--fg-2);
  background: color-mix(in srgb, var(--amber, var(--orange)) 14%, transparent); white-space: nowrap }
.o-mapnode__load b { font-size: 14px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums }
.o-mapnode[data-system] .o-mapnode__load { background: color-mix(in srgb, var(--map-on-featured) 16%, transparent); color: color-mix(in srgb, var(--map-on-featured) 80%, transparent) }
.o-mapnode[data-system] .o-mapnode__load b { color: var(--map-on-featured) }
.o-mapedge-badge .o-mapedge-rate { fill: var(--map-muted); font-size: 12px; font-weight: 500; text-anchor: start }
/* The Deployment map (.o-deploy): who uses the platform on top (.o-deploy__ext), then the system:
   a column-flowing set of groups (areas, data-tone 1–6, or hosts) with their sections (a cell, a
   cluster) and a card per deployable part: where it runs, its evidence, how it scales, its runtime.
   Proposed or open parts are dashed; parts not deployed in the environment are faded. */
.o-deploy { display: flex; flex-direction: column; gap: 14px; padding: 10px 24px 40px; box-sizing: border-box }
.o-deploy__outside { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 12px; border-radius: var(--radius-section); border: 1px dashed var(--line-strong) }
.o-root a.o-deploy__ext, .o-deploy__ext { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--map-card); box-shadow: 0 0 0 .5px var(--map-border); color: var(--fg); text-decoration: none }
.o-deploy__ext span { font-size: var(--text-micro); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-deploy__system { padding: 16px; border-radius: var(--radius-section); border: 1.5px solid color-mix(in srgb, var(--blue) 40%, transparent); background: color-mix(in srgb, var(--map-card) 60%, transparent) }
.o-deploy__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px }
.o-deploy__head h1 { margin: 0; font-size: 23px; font-weight: var(--weight-medium); color: var(--blue) }
.o-deploy__head span { font-size: var(--text-caption); color: var(--fg-3) }
.o-deploy__groups { columns: 360px 3; column-gap: 14px }
.o-deploy__group { break-inside: avoid; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; padding: 12px; border-radius: 16px; background: var(--map-card); box-shadow: 0 0 0 .5px var(--map-border); border-top: 4px solid var(--area, var(--fg-3)); scroll-margin-top: 70px }
.o-deploy__group[data-tone="1"] { --area: var(--blue) } .o-deploy__group[data-tone="2"] { --area: var(--orange) } .o-deploy__group[data-tone="3"] { --area: var(--indigo) }
.o-deploy__group[data-tone="4"] { --area: var(--green) } .o-deploy__group[data-tone="5"] { --area: var(--amber) } .o-deploy__group[data-tone="6"] { --area: var(--fg-2) }
.o-deploy__group[data-host] { border-top-color: var(--fg-2) }
.o-deploy__grouphead { display: flex; align-items: baseline; gap: 8px }
.o-deploy__grouphead h2 { margin: 0; font-size: 17px; font-weight: var(--weight-medium) }
.o-deploy__grouphead span { font-size: var(--text-micro); color: var(--fg-3) }
.o-deploy__grouphead .o-deploy__open { color: var(--amber-ink) }
.o-deploy__section[data-named] { padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--area, var(--fg-3)) 6%, transparent) }
.o-deploy__sectionhead { display: flex; justify-content: space-between; margin: 0 2px 6px; font-size: var(--text-caption); font-weight: var(--weight-medium) }
.o-deploy__sectionhead span + span { font-weight: var(--weight-regular); color: var(--fg-3) }
.o-deploy__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px }
.o-root a.o-deploy__card, .o-deploy__card { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-field-focus); border: 1px solid var(--map-border); color: var(--fg); text-decoration: none; transition: box-shadow var(--dur-fast) ease }
.o-deploy__card:hover { box-shadow: 0 6px 16px -10px rgba(var(--shadow-rgb),.5) }
.o-deploy__card[data-proposed] { border-style: dashed }
.o-deploy__card[data-missing] { opacity: .55 }
.o-deploy__card[aria-current="true"] { box-shadow: 0 0 0 2px var(--blue) }
.o-deploy__name { display: flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); font-weight: var(--weight-medium); line-height: 1.25 }
.o-deploy__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--area, var(--fg-3)) }
.o-deploy__where { font-size: 11.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; padding: 0 }
.o-deploy__meta { display: flex; justify-content: space-between; gap: 6px; font-size: var(--text-micro) }
.o-deploy__evidence { color: var(--amber-ink) }
.o-deploy__scale { color: var(--fg-2); text-align: right }
.o-deploy__runtime { font-size: var(--text-micro); color: var(--fg-3) }
.o-deploy__runtime[data-none] { color: var(--amber-ink) }
/* By node pool (specs/hosting UI-1): the totals per hosting profile, the hosting plan's suggestions,
   each pool's shape, utilisation (<meter>) and price per profile, and on a card its replicas and cost. */
/* side by side (deploy.side): one column per hosting profile, its total on top, pools as that profile prices them */
.o-deploy__side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; margin-bottom: 18px }
.o-deploy__column { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--map-card); box-shadow: 0 0 0 .5px var(--map-border) }
.o-deploy__column[data-cheapest] { box-shadow: inset 0 0 0 1.5px var(--green) }
.o-deploy__columnhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-bottom: 8px; border-bottom: .5px solid var(--map-border) }
.o-deploy__columnhead h2 { flex-basis: 100%; margin: 0; font-size: var(--text-body); font-weight: var(--weight-semibold) }
.o-deploy__columntotal { font-size: var(--text-title); font-variant-numeric: tabular-nums }
.o-deploy__columnpool { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; background: var(--wash) }
.o-deploy__columnpool[data-cheapest] { background: var(--green-tint) }
.o-deploy__columnrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0 }
.o-deploy__columnrow b { font-variant-numeric: tabular-nums; white-space: nowrap }
.o-deploy__columnrow a { color: var(--fg); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-deploy__columnsub { color: var(--fg-3); font-size: var(--text-micro) }
.o-deploy__columnsub code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-deploy__columnparts { display: flex; flex-wrap: wrap; gap: 4px }
.o-deploy__columnparts span { padding: 1px 7px; border-radius: 8px; background: var(--map-card); box-shadow: 0 0 0 .5px var(--map-border); font-size: var(--text-micro); color: var(--fg-2) }
/* forecast A against B (specs/forecast F17): label, A, B, difference; a difference in B's favour is green */
.o-abfacts { display: grid; grid-template-columns: minmax(120px, auto) repeat(3, minmax(0, 1fr)); gap: 6px 14px; align-items: baseline; font-size: var(--text-body-sm) }
.o-abfacts__head { font-size: var(--text-nano); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3) }
.o-abfacts__label { color: var(--fg-2) }
.o-abfacts b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums }
.o-abfacts__diff { font-variant-numeric: tabular-nums; color: var(--fg-3) }
.o-abfacts__diff[data-better] { color: var(--ok) }
.o-abfacts__diff[data-worse] { color: var(--danger) }
.o-deploy__totals { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px }
.o-deploy__total { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--map-card); box-shadow: 0 0 0 .5px var(--map-border); font-size: var(--text-body-sm) }
.o-deploy__total b { font-variant-numeric: tabular-nums }
.o-deploy__total[data-cheapest] { box-shadow: inset 0 0 0 1px var(--green); background: var(--green-tint) }
.o-deploy__diff { font-size: var(--text-micro); color: var(--fg-3); font-variant-numeric: tabular-nums }
.o-deploy__plan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-well); box-shadow: inset 0 0 0 .5px var(--line) }
.o-deploy__suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--text-body-sm) }
.o-deploy__suggestion b { color: var(--green); font-variant-numeric: tabular-nums }
.o-deploy__suggestion form { margin-left: auto }
.o-deploy__pool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--text-micro); color: var(--fg-2) }
.o-deploy__util { display: inline-flex; align-items: center; gap: 6px }
.o-deploy__util meter { width: 70px; height: 8px }
.o-deploy__prices { flex-basis: 100%; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none }
.o-deploy__prices li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 3px 6px; border-radius: 6px }
.o-deploy__prices li[data-cheapest] { background: var(--green-tint) }
.o-deploy__prices b { font-variant-numeric: tabular-nums; text-align: right }
.o-deploy__replicas { font-size: var(--text-micro); color: var(--fg-2) }
.o-deploy__cost { font-size: var(--text-micro); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums }
.o-deploy__picker { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 220px; max-width: 340px }
.o-deploy__picker > .o-hint { margin: 0 0 2px; white-space: normal }
/* Use cases view (.o-ucview, specs/projects D46): "What must the system do, and what is missing?", in
   three layouts. Canvas (.o-ucmap on .o-map, pans and zooms like the map): the system's __boundary
   with the use cases (__uc) inside, banded (__band) by the actor who needs them; the actors
   (__actor, a stick __figure) outside on the left, the outside systems (__outside) on the right,
   __wires between them. A use case's five dots (.o-ucpill__dots) are its checks (trigger and goal,
   steps on the map, data, load, failure path), amber while one is missing; data-kind="no_actor"
   dashes it amber, "gap" makes a dashed orange tile for something no use case explains. List
   (.o-uclist): a search and actor filter (__bar) over a sortable table. Coverage (.o-coverage):
   the use cases against the inputs, outputs and parts, or against the domain's concepts; gap
   columns and rows are tinted. */
.o-ucview { display: flex; flex-direction: column; gap: 14px }
.o-ucview__answer { margin: 0; font-size: var(--text-body); color: var(--fg-2) }
.o-map__foot .o-ucview__answer { max-width: 520px; padding: 5px 12px; border-radius: 10px; background: color-mix(in srgb, var(--map-card) 88%, transparent); box-shadow: 0 0 0 .5px var(--map-border); font-size: var(--text-caption) }
.o-ucview__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: var(--text-caption); color: var(--fg-3) }
.o-ucview__legend b, .o-ucmap .o-map__legend b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-right: 4px; border-radius: 9px; background: var(--wash); color: var(--fg-2); font-weight: var(--weight-semibold); font-size: var(--text-micro) }
.o-ucmap foreignObject { overflow: visible }
.o-ucmap__boundary { fill: color-mix(in srgb, var(--map-card) 55%, transparent); stroke: color-mix(in srgb, var(--blue) 40%, transparent); stroke-width: 1.5 }
.o-ucmap__system { fill: var(--blue); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; font-weight: var(--weight-semibold) }
.o-ucmap__band { fill: color-mix(in srgb, var(--blue) 4%, transparent); stroke: none }
.o-ucmap__band[data-gap] { fill: none; stroke: var(--line-strong); stroke-dasharray: 5 4 }
.o-ucmap__bandname { fill: var(--fg-3); font-size: 12px; font-weight: var(--weight-medium) }
.o-ucmap__wires path { fill: none; stroke: var(--fg-3); stroke-opacity: .55; stroke-width: 1.6 }
.o-ucmap__wires path[data-gap] { stroke: var(--orange); stroke-dasharray: 5 4; stroke-opacity: .8 }
.o-ucmap__wires path[data-lit] { stroke: var(--blue); stroke-opacity: 1; stroke-width: 2.4 }
.o-root a.o-ucmap__actor, .o-ucmap__actor { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; height: 100%; color: var(--fg); text-decoration: none; text-align: center; font-size: var(--text-caption); line-height: 1.25 }
.o-ucmap__figure { width: 30px; height: 36px; flex: none; fill: none; stroke: var(--fg-3); stroke-width: 1.8; stroke-linecap: round }
.o-ucmap__actor[data-lit] .o-ucmap__figure { stroke: var(--blue) }
.o-ucmap__actor[data-lit] span { color: var(--blue); font-weight: var(--weight-medium) }
.o-root a.o-ucmap__uc, .o-ucmap__uc { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 0 16px; border-radius: 23px; background: var(--map-card); box-shadow: 0 0 0 1px var(--map-border), 0 6px 18px -14px rgba(30, 40, 60, .5); color: var(--fg); text-decoration: none; font-size: var(--text-body-sm) }
.o-ucmap__uc:hover { background: var(--wash-hover) }
.o-ucmap__uc[data-partial] { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--amber) 70%, transparent) }
.o-ucmap__uc[data-kind="no_actor"] { box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--amber) 70%, transparent) }
.o-ucmap__uc[data-kind="gap"] { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; border-radius: 14px; background: color-mix(in srgb, var(--orange) 6%, var(--map-card)); box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--orange) 70%, transparent) }
.o-ucmap__uc[data-kind="gap"] small { font-size: var(--text-nano); color: var(--fg-3) }
.o-ucmap__uc[aria-current="true"] { outline: 2.5px solid var(--blue); outline-offset: 2px }
.o-ucmap__uc[data-lit] { box-shadow: 0 0 0 1.5px var(--blue) }
.o-ucmap__uc:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }
.o-ucmap__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium) }
.o-root a.o-ucmap__outside, .o-ucmap__outside { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; width: 100%; height: 100%; padding: 6px 12px; border-radius: 10px; background: var(--map-card); box-shadow: 0 0 0 1px var(--map-border); color: var(--fg); text-decoration: none; font-size: var(--text-caption); line-height: 1.3 }
.o-ucmap__outside small { font-size: var(--text-nano); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3) }
.o-ucmap__outside span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-ucmap__outside[data-gap] { background: color-mix(in srgb, var(--orange) 6%, var(--map-card)); box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--orange) 70%, transparent) }
.o-ucmap__outside[data-lit] { box-shadow: 0 0 0 1.5px var(--blue) }
.o-ucmap__key { display: inline-block; width: 14px; height: 10px; vertical-align: -1px; border-radius: 3px; border: 1.5px dashed var(--orange); box-sizing: border-box }
.o-ucpill__dots { display: flex; gap: 4px; flex: none }
.o-ucpill__dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--amber) 75%, transparent) }
.o-ucpill__dots i[data-on] { background: var(--green) }
.o-uclist { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.o-uclist__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.o-uclist__search { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px }
.o-uclist__search .ti { position: absolute; left: 10px; color: var(--fg-3); pointer-events: none }
.o-uclist__search .o-input { width: 100%; padding-left: 30px }
.o-uclist__count { margin-left: auto; font-size: var(--text-caption); color: var(--fg-3); font-variant-numeric: tabular-nums }
.o-uclist__scroll { overflow: auto; max-height: calc(100vh - 240px); border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-uclist__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-body-sm) }
.o-uclist__table th, .o-uclist__table td { padding: 8px 12px; border-bottom: .5px solid var(--line); text-align: left; vertical-align: middle }
.o-uclist__table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-solid); font-size: var(--text-micro); letter-spacing: .05em; text-transform: uppercase; font-weight: var(--weight-medium); white-space: nowrap }
.o-root .o-uclist__table thead a { color: var(--fg-3); text-decoration: none }
.o-uclist__table thead th[aria-sort="ascending"] a::after { content: " ↑"; color: var(--blue) }
.o-uclist__table thead th[aria-sort="descending"] a::after { content: " ↓"; color: var(--blue) }
.o-uclist__table thead th[aria-sort="ascending"] a, .o-uclist__table thead th[aria-sort="descending"] a { color: var(--fg) }
.o-uclist__table tbody th { font-weight: var(--weight-medium) }
.o-root .o-uclist__table tbody th a { color: var(--fg); text-decoration: none }
.o-root .o-uclist__table tbody th a:hover { color: var(--blue) }
.o-uclist__table tbody tr:hover > * { background: var(--wash-hover) }
.o-uclist__num { text-align: right; font-variant-numeric: tabular-nums }
.o-uclist__none { color: var(--fg-3) }
.o-uclist__flows { font-size: var(--text-caption); color: var(--fg-2) }
.o-uclist__flows[data-tone="green"] { color: var(--green) }
.o-uclist__flows[data-tone="amber"] { color: var(--amber-ink) }
.o-uclist__flows[data-tone="muted"] { color: var(--fg-3) }
/* A use case's page (specs/projects D46): the Use cases view one step in, in three layouts sharing
   one inspector. Story (.o-ucstory on .o-map): the trigger and outcome __pills, the __step boxes
   top to bottom with their __chips (.o-ucchip: data-kind part, concept, data or flow), a step's
   branches ([data-branch], dashed blue) and the failures (__branch[data-kind="failure"], dashed
   orange) to the right, joined by __lines. Sheet (.o-ucsheet): the use case as a page, its
   __headline sentence ("As ‹actor›, I want ‹goal›, so that ‹outcome›"), its fields and numbered
   __steps. Trace (.o-uctrace on .o-map): a __lane per kind (steps, flows, data, concepts) with
   __item links; a pick lights what it comes from and leads to (data-lit) and dims the rest
   (data-dim). The inspector (.o-ucinspect in the side panel) shows the fields (.o-ucfield): a
   label with a pencil, the value, or the __form editing it in place. */
.o-ucchip { display: inline-block; box-sizing: border-box; min-height: 22px; max-width: 100%; padding: 3px 8px; border-radius: 11px; background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); font-size: var(--text-micro); line-height: 16px; white-space: normal; overflow-wrap: anywhere; text-decoration: none } /* wraps inside itself, never clipped (the story sizes cards to it, D53) */
.o-root a.o-ucchip { color: var(--blue); text-decoration: none }
.o-ucchip[data-kind="concept"] { background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo) }
.o-ucchip[data-kind="data"] { background: var(--wash); color: var(--fg-2); font-family: var(--font-mono, monospace) }
.o-root a.o-ucchip[data-kind="flow"], .o-ucchip[data-kind="flow"] { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent); font-weight: var(--weight-medium) }
.o-ucstory foreignObject, .o-uctrace foreignObject { overflow: visible }
.o-ucstory__lines path { fill: none; stroke: var(--fg-3); stroke-opacity: .6; stroke-width: 1.6 }
.o-ucstory__lines path[data-dashed] { stroke: color-mix(in srgb, var(--blue) 60%, transparent); stroke-dasharray: 5 4 }
.o-ucstory__pill { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 10px 16px; border-radius: 21px; background: var(--map-card); box-shadow: 0 0 0 1px var(--map-border); font-size: var(--text-body-sm); line-height: 1.3 }
.o-ucstory__pill b { flex: none; font-size: var(--text-nano); letter-spacing: .06em; text-transform: uppercase; color: var(--blue) }
.o-ucstory__pill span { font-size: var(--text-body-sm); line-height: 19px; overflow-wrap: anywhere }
.o-ucstory__pill[data-kind="outcome"] { border-radius: 14px; background: color-mix(in srgb, var(--green) 9%, var(--map-card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent) }
.o-ucstory__pill[data-kind="outcome"] b { color: var(--green) }
.o-ucstory__step { box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; padding: 12px 14px; border-radius: 12px; background: var(--map-card); box-shadow: 0 0 0 1px var(--map-border), 0 8px 20px -16px rgba(30, 40, 60, .5) }
.o-ucstory__step[data-branch] { background: color-mix(in srgb, var(--blue) 4%, var(--map-card)); box-shadow: none; border: 1px dashed color-mix(in srgb, var(--blue) 50%, transparent) }
.o-ucstory__step[aria-current="true"] { box-shadow: 0 0 0 2px var(--blue) }
.o-root a.o-ucstory__text, .o-ucstory__text { display: flex; gap: 8px; color: var(--fg); text-decoration: none; font-size: var(--text-body-sm); line-height: 19px }
.o-ucstory__text span { min-width: 0; overflow-wrap: anywhere }
.o-ucstory__text em, .o-ucsheet__steps em { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: 11px; background: var(--fg-3); color: var(--map-card); font-style: normal; font-size: var(--text-micro); font-weight: var(--weight-semibold) }
.o-ucstory__step[aria-current="true"] em, .o-ucsheet__steps li[aria-current="true"] em { background: var(--blue) }
.o-ucstory__text:hover span { color: var(--blue) }
.o-ucstory__chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; margin: 0 } /* every chip, in as many rows as they take */
/* A step's action, apart from its tags: the flow detailing it (a button), or that none does yet
   with the prompt that asks the agent for one (editors). */
.o-ucstory__act { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-top: auto }
.o-root a.o-ucstory__flow, .o-ucstory__flow { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px 0 10px; border-radius: 14px; background: var(--blue); color: var(--on-accent); font-size: var(--text-caption); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap }
.o-ucstory__flow .ti { font-size: 16px }
.o-root a.o-ucstory__flow:hover { filter: brightness(1.08) }
.o-ucstory__noflow { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-3); font-size: var(--text-caption) }
.o-ucstory__noflow .ti { font-size: 16px }
.o-ucstory__ask { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border: 0; border-radius: 13px; background: var(--wash); color: var(--fg-2); font: inherit; font-size: var(--text-caption); cursor: pointer }
.o-ucstory__ask:hover { color: var(--blue) }
.o-ucstory__branch { box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; width: 100%; height: 100%; padding: 8px 10px; border-radius: 10px; font-size: var(--text-caption); line-height: 1.4; color: var(--fg-2); background: color-mix(in srgb, var(--orange) 5%, var(--map-card)); border: 1.5px dashed color-mix(in srgb, var(--orange) 65%, transparent) }
.o-ucstory__branch b { font-size: var(--text-nano); letter-spacing: .06em; text-transform: uppercase; color: var(--orange) }
.o-ucstory__branch span { font-size: var(--text-caption); line-height: 19px; overflow-wrap: anywhere }
.o-ucsheet { height: 100%; overflow: auto; padding: 28px 20px 80px; box-sizing: border-box }
.o-desk[data-panel] .o-ucsheet { padding-right: calc(var(--panel-px, var(--panel-w)) + 20px) }
.o-ucsheet__page { max-width: 760px; margin: 0 auto; padding: 28px 32px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block); display: flex; flex-direction: column; gap: 4px }
.o-ucsheet__headline { margin: 0 0 12px; font-size: var(--text-title); line-height: 1.45; color: var(--fg-2) }
.o-ucsheet__headline b { color: var(--fg); font-weight: var(--weight-semibold) }
.o-ucsheet__headline b[data-missing] { color: var(--amber-ink); font-weight: var(--weight-medium); font-style: italic }
.o-ucinspect .o-ucsheet__headline { font-size: var(--text-body); margin: 0 0 6px }
.o-ucnext { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--amber) 9%, var(--map-card)); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--amber) 40%, transparent); font-size: var(--text-caption); line-height: 1.5; color: var(--fg-2) }
.o-ucnext p { margin: 0 }
.o-ucnext b { color: var(--fg-1) }
.o-ucsheet__steps { padding-top: 12px; border-top: .5px solid var(--line) }
.o-ucsheet__steps ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.o-ucsheet__steps li { display: flex; flex-direction: column; gap: 4px }
.o-ucsheet__steps li[data-branch] { margin-left: 30px; padding-left: 10px; border-left: 2px dashed color-mix(in srgb, var(--blue) 40%, transparent) }
.o-root .o-ucsheet__steps li > a { display: flex; gap: 8px; color: var(--fg); text-decoration: none; font-size: var(--text-body-sm); line-height: 1.4 }
.o-ucsheet__steps .o-ucstory__chips, .o-ucsheet__steps .o-ucstory__act { padding-left: 30px; max-height: none }
.o-uctrace__lane { fill: color-mix(in srgb, var(--map-card) 40%, transparent); stroke: var(--map-border); stroke-width: .5 }
.o-uctrace__lanename { fill: var(--fg-3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: var(--weight-medium) }
.o-uctrace__empty { fill: var(--fg-3); font-size: 13px; font-style: italic }
.o-uctrace__lines path { fill: none; stroke: var(--fg-3); stroke-opacity: .55; stroke-width: 1.6 }
.o-uctrace__lines [data-dashed] path { stroke-dasharray: 5 4 }
.o-uctrace__lines text { fill: var(--fg-3); font-size: 12px; paint-order: stroke; stroke: var(--map-ground); stroke-width: 4px; stroke-linejoin: round }
.o-uctrace__lines [data-lit] path { stroke: var(--blue); stroke-opacity: 1; stroke-width: 2.4 }
.o-uctrace__lines [data-dim] { opacity: .18 }
.o-root a.o-uctrace__item, .o-uctrace__item { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; width: 100%; height: 100%; padding: 4px 10px; border-radius: 10px; background: var(--map-card); box-shadow: 0 0 0 1px var(--map-border); color: var(--fg); text-decoration: none; font-size: var(--text-caption); line-height: 1.3 }
.o-uctrace__item span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.o-uctrace__item small { font-size: var(--text-nano); color: var(--fg-3) }
.o-uctrace__item[data-kind="flow"] { background: color-mix(in srgb, var(--blue) 7%, var(--map-card)) }
.o-uctrace__item[data-kind="data"] { font-family: var(--font-mono, monospace) }
.o-uctrace__item[data-kind="concept"] { background: color-mix(in srgb, var(--indigo) 8%, var(--map-card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--indigo) 35%, transparent) }
.o-uctrace__item[aria-current="true"] { box-shadow: 0 0 0 2.5px var(--blue) }
.o-uctrace__item[data-lit] { box-shadow: 0 0 0 1.5px var(--blue) }
.o-uctrace__item[data-dim] { opacity: .3 }
.o-ucinspect__meta { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: var(--text-caption); color: var(--fg-3) }
.o-ucfield { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: .5px solid var(--line) }
.o-ucfield[data-editing] { margin: 0 -10px; padding: 10px; border-top-color: transparent; border-radius: 10px; background: color-mix(in srgb, var(--blue) 5%, transparent) }
.o-ucfield__head { display: flex; align-items: center; gap: 6px; min-height: 28px }
.o-ucfield__head .o-eyebrow { margin: 0 }
.o-ucfield__head .o-iconbtn { margin-left: auto; color: var(--fg-3) }
.o-ucfield[data-saved] .o-ucfield__head .o-eyebrow::after { content: " ✓"; color: var(--green) }
.o-ucfield__text { margin: 0; font-size: var(--text-body-sm); line-height: 1.5; color: var(--fg) }
.o-ucfield__list { margin: 0; padding-left: 18px; font-size: var(--text-body-sm); line-height: 1.5 }
.o-ucfield__empty { margin: 0; font-size: var(--text-caption); color: var(--fg-3); font-style: italic }
.o-ucfield__form { display: flex; flex-direction: column; gap: 8px }
.o-ucfield__form textarea { width: 100%; box-sizing: border-box; resize: vertical }
.o-ucfield__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px }
.o-ucfield__actions .o-hint { margin-left: auto }
.o-ucfield__actors { display: flex; flex-wrap: wrap; gap: 6px }
.o-ucfield__actor { position: relative; display: inline-flex }
.o-ucfield__actor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.o-ucfield__actor span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--map-card); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--text-caption) }
.o-ucfield__actor input:checked + span { background: var(--blue); color: #fff; box-shadow: none }
.o-ucfield__actor input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px }
.o-coverage { overflow: auto; max-height: calc(100vh - 220px); border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-coverage table { border-collapse: separate; border-spacing: 0; font-size: var(--text-body-sm) }
.o-coverage th, .o-coverage td { padding: 6px 10px; border-bottom: .5px solid var(--line); text-align: center; white-space: nowrap }
/* Sticky heads and the sticky first column are opaque (--surface-solid): cells scroll under them.
   The column's right edge is a line; the corner sits above both. A column head shows at most three
   lines of its name (the whole name is its title). */
.o-coverage thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-solid); vertical-align: bottom; font-weight: var(--weight-medium); min-width: 88px; max-width: 140px; white-space: normal; text-align: left }
.o-coverage thead th > :not(.o-coverage__group) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere }
.o-coverage tbody th, .o-coverage tfoot th { position: sticky; left: 0; z-index: 2; background: var(--surface-solid); box-shadow: inset -1px 0 0 var(--line-strong); text-align: left; font-weight: var(--weight-medium); white-space: normal; min-width: 180px }
.o-coverage .o-coverage__corner { left: 0; z-index: 3; box-shadow: inset -1px 0 0 var(--line-strong) }
.o-coverage__group { display: block; font-size: var(--text-nano); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); font-weight: var(--weight-medium) }
.o-coverage thead th[data-group="in"] .o-coverage__group, .o-coverage thead th[data-group="out"] .o-coverage__group { color: var(--blue) }
.o-coverage [data-gap] { background: color-mix(in srgb, var(--orange) 12%, var(--surface-solid)) }
.o-coverage thead th[data-group="concept"] .o-coverage__group { color: var(--indigo) }
.o-coverage td[data-role="touches"] abbr { background: var(--wash); color: var(--fg-2) }
.o-coverage td[data-role] abbr { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); font-weight: var(--weight-semibold); text-decoration: none; cursor: help }
.o-coverage td[data-role="calls"] abbr { background: var(--wash); color: var(--fg-3) }
.o-coverage tbody tr[aria-current="true"] > * { background: color-mix(in srgb, var(--blue) 8%, var(--surface-solid)) }
.o-coverage tbody tr:hover > th { background: color-mix(in srgb, var(--fg) 4%, var(--surface-solid)) }
.o-coverage tfoot td, .o-coverage tfoot th { color: var(--fg-3); border-bottom: 0 }

/* Logbook (.o-logbook): "What did we settle, what is open, and how close are we?". Three __tiles
   (decided, open, readiness with a __bar), then mode "Decisions": the .o-ledger, a list of groups
   (open, decided, superseded) whose __row links carry a __mark ("?" open, check decided) and a
   __meta line; or mode "Readiness": .o-readiness, a .o-coverage table of use cases against the six
   stages whose __cell links show done, partly, not yet or an open decision (data-state). */
.o-logbook__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 720px }
.o-logbook__tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-logbook__tile span { font-size: var(--text-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); font-weight: var(--weight-medium) }
.o-logbook__tile b { font-size: var(--text-title); font-weight: var(--weight-semibold); color: var(--fg); font-variant-numeric: tabular-nums }
.o-logbook__tile[data-tone="green"] b { color: var(--green) }
.o-logbook__tile[data-tone="amber"] b { color: color-mix(in srgb, var(--amber) 80%, var(--fg)) }
/* Readiness as a <meter> (no inline style under the CSP). */
.o-logbook__bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 5px; margin-top: 4px; border: 0; border-radius: 3px; background: var(--wash) }
.o-logbook__bar::-webkit-meter-bar { height: 5px; border: 0; border-radius: 3px; background: var(--wash) }
.o-logbook__bar::-webkit-meter-optimum-value { border-radius: 3px; background: var(--blue) }
.o-logbook__bar::-moz-meter-bar { border-radius: 3px; background: var(--blue) }
.o-ledger { display: flex; flex-direction: column; gap: 14px; max-width: 760px }
.o-ledger__group { display: flex; flex-direction: column; gap: 4px }
.o-ledger__group h3 span { margin-left: 4px; color: var(--fg-3) }
.o-ledger__none { margin: 0; font-size: var(--text-body-sm); color: var(--fg-3) }
.o-root a.o-ledger__row, .o-ledger__row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-section); box-shadow: var(--edge-block); color: var(--fg); text-decoration: none }
.o-ledger__row:hover { background: var(--wash-hover) }
.o-ledger__row[aria-current="true"] { outline: 2.5px solid var(--blue); outline-offset: 1px }
.o-ledger__mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); font-size: 15px }
.o-ledger__row[data-state="open"] .o-ledger__mark { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--orange) 80%, transparent); color: color-mix(in srgb, var(--orange) 85%, var(--fg)) }
.o-ledger__row[data-state="superseded"] { opacity: .7 }
.o-ledger__row[data-state="superseded"] .o-ledger__mark { background: var(--wash); color: var(--fg-3) }
.o-ledger__text { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.o-ledger__title { font-size: var(--text-body); font-weight: var(--weight-medium); line-height: 1.35 }
.o-ledger__meta { font-size: var(--text-caption); color: var(--fg-3) }
.o-readiness td { padding: 4px 6px }
.o-root a.o-readiness__cell, .o-readiness__cell, .o-readiness__key { display: inline-flex; align-items: center; gap: 5px; min-width: 92px; padding: 4px 9px; border-radius: 999px; font-size: var(--text-caption); text-decoration: none; color: var(--fg-3); background: var(--wash) }
.o-readiness__cell[data-state="done"], .o-readiness__key[data-state="done"] { background: color-mix(in srgb, var(--green) 16%, transparent); color: color-mix(in srgb, var(--green) 75%, var(--fg)) }
.o-readiness__cell[data-state="partly"], .o-readiness__key[data-state="partly"] { background: color-mix(in srgb, var(--amber) 18%, transparent); color: color-mix(in srgb, var(--amber) 60%, var(--fg)) }
.o-readiness__cell[data-state="blocked"], .o-readiness__key[data-state="blocked"] { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--orange) 75%, transparent); color: color-mix(in srgb, var(--orange) 80%, var(--fg)) }
.o-readiness__cell[aria-current="true"] { outline: 2.5px solid var(--blue); outline-offset: 1px }
.o-readiness__cell:hover { filter: brightness(.97) }
.o-readiness__key { min-width: 0 }
.o-readiness__pct b { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold) }
/* Experiments (.o-trials, specs/start §5): "What should we try first?". Records only. __group per
   state (proposed, running, concluded, abandoned; an .o-eyebrow with a count) holding __cards, a grid
   of .o-trial links: a __head with the __title and, once concluded, an __outcome pill
   (data-outcome confirmed | rejected | inconclusive), the __hypothesis, __facts (measure and the
   threshold that counts as success, each with a __label) and a __meta line. aria-current="true"
   outlines the selection; data-state="abandoned" mutes the card. */
.o-trials__group { display: flex; flex-direction: column; gap: 6px; max-width: 960px; margin-bottom: 14px }
.o-trials__group h3 span { margin-left: 4px; color: var(--fg-3) }
.o-trials__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px }
.o-root a.o-trial, .o-trial { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-section); box-shadow: var(--edge-block); color: var(--fg); text-decoration: none }
.o-trial:hover { background: var(--wash-hover) }
.o-trial[aria-current="true"] { outline: 2.5px solid var(--blue); outline-offset: 1px }
.o-trial[data-state="running"] { box-shadow: var(--edge-block), inset 3px 0 0 color-mix(in srgb, var(--amber) 80%, transparent) }
.o-trial[data-state="abandoned"] { opacity: .7 }
.o-trial__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px }
.o-trial__title { font-size: var(--text-body); font-weight: var(--weight-medium); line-height: 1.35 }
.o-trial__outcome { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: var(--text-caption); background: var(--wash); color: var(--fg-2) }
.o-trial__outcome[data-outcome="confirmed"] { background: color-mix(in srgb, var(--green) 16%, transparent); color: color-mix(in srgb, var(--green) 75%, var(--fg)) }
.o-trial__outcome[data-outcome="rejected"] { background: color-mix(in srgb, var(--danger) 14%, transparent); color: color-mix(in srgb, var(--danger) 75%, var(--fg)) }
.o-trial__hypothesis { font-size: var(--text-body-sm); color: var(--fg-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.o-trial__facts { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-caption); color: var(--fg-2) }
.o-trial__label { font-size: var(--text-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); font-weight: var(--weight-medium) }
.o-trial__meta { font-size: var(--text-caption); color: var(--fg-3) }
/* Observe (.o-observe, specs/start §6): "Did it turn out as decided?". Records only. __group per
   subject (its heading links the subject; aria-current="true" when one of its observations is
   selected) holding __rows: the __main link (__title, __meta), the __values (the value seen in <b>
   and the __expected one), an .o-gap and, for a gap an editor may act on, __acts (New task, New
   decision). A row's data-band is ok, watch or off; aria-current="true" outlines the selection.
   .o-gap (ui/gap) is a gap against the expected value: a __bar <meter> (no inline style under the
   CSP) filled to the gap's size and coloured by data-band (ok green, watch amber, off red; A7: 10%
   and 25%), then the signed __text with its __band; __key pills make the legend. */
.o-observe__group { display: flex; flex-direction: column; gap: 4px; max-width: 900px; margin-bottom: 14px; padding: 2px; border-radius: 14px }
.o-observe__group[aria-current="true"] { background: color-mix(in srgb, var(--blue) 6%, transparent) }
.o-observe__group h3 a { color: inherit; text-decoration: none }
.o-observe__group h3 a:hover { text-decoration: underline }
.o-observe__group h3 span { margin-left: 4px; color: var(--fg-3) }
.o-observe__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(140px, 180px) auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--surface-section); box-shadow: var(--edge-block) }
.o-observe__row[aria-current="true"] { outline: 2.5px solid var(--blue); outline-offset: 1px }
.o-root a.o-observe__main, .o-observe__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--fg); text-decoration: none }
.o-observe__title { font-size: var(--text-body); font-weight: var(--weight-medium); line-height: 1.35 }
.o-observe__meta, .o-observe__expected { font-size: var(--text-caption); color: var(--fg-3) }
.o-observe__values { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-variant-numeric: tabular-nums; white-space: nowrap }
.o-observe__acts { display: flex; gap: 4px }
.o-observe__acts form { display: contents }
.o-gap { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: var(--text-caption); color: var(--fg-2) }
.o-gap__bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--wash) }
.o-gap__bar::-webkit-meter-bar { height: 6px; border: 0; border-radius: 3px; background: var(--wash) }
.o-gap__bar::-webkit-meter-optimum-value, .o-gap__bar::-webkit-meter-suboptimum-value, .o-gap__bar::-webkit-meter-even-less-good-value { border-radius: 3px; background: var(--gap-tone, var(--green)) }
.o-gap__bar::-moz-meter-bar { border-radius: 3px; background: var(--gap-tone, var(--green)) }
.o-gap[data-band="ok"] { --gap-tone: var(--green) }
.o-gap[data-band="watch"] { --gap-tone: var(--amber) }
.o-gap[data-band="off"] { --gap-tone: var(--danger) }
.o-gap__text { font-variant-numeric: tabular-nums }
.o-gap__band, .o-gap__key { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: var(--text-micro); background: color-mix(in srgb, var(--gap-tone, var(--fg-3)) 16%, transparent); color: color-mix(in srgb, var(--gap-tone, var(--fg-3)) 75%, var(--fg)) }
.o-gap__key { margin-left: 0 }
.o-gap__key[data-band="ok"] { --gap-tone: var(--green) }
.o-gap__key[data-band="watch"] { --gap-tone: var(--amber) }
.o-gap__key[data-band="off"] { --gap-tone: var(--danger) }
/* The Overview (.o-overview): "Where are we?". __side stacks __box cards at the full width
   (data-alone): .o-where (__ready: the readiness __pct with an .o-where__meter, __small lines and
   __facts, links when they open a view; __journey: .o-stops--two), .o-next (the weakest stop:
   __title, __why and the copyable __prompt) and .o-team (__list of members and the viewer's agent
   with an __ok dot). .o-stops lists the views in the explorer's order: a numbered __stop with its
   __q (the view over its count) and a status __dot (data-state done | partly | open). .o-checklist
   (Set up your project's groups) is a <details> wrap whose summary carries the title and a __meter,
   then __item <details> rows (data-state done | current | todo) with a round __mark and a __body
   holding the step's text, copy fields and action. */
.o-overview { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 24px }
.o-overview[data-alone] { grid-template-columns: minmax(0, 1fr) }
.o-overview__side { display: grid; gap: 14px; min-width: 0 }
.o-overview__box, .o-overview .o-checklist { max-width: none; padding: 14px 16px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-overview__head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.o-where { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px }
.o-where__ready { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.o-where__pct { font-size: 37px; line-height: 1.05; font-weight: var(--weight-semibold); margin-top: 2px }
.o-where__small { font-size: var(--text-caption); line-height: 1.45; color: var(--fg-3) }
.o-where__facts { display: grid; gap: 10px; margin-top: 12px }
.o-root a.o-where__fact, .o-where__fact { display: flex; flex-direction: column; gap: 1px; color: var(--fg); text-decoration: none; border-radius: var(--radius-option) }
a.o-where__fact:hover b { color: var(--blue) }
.o-where__fact b { font-size: 16px; font-weight: var(--weight-semibold) }
.o-where__journey { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.o-next { display: grid; gap: 8px; justify-items: start }
.o-next > .o-eyebrow { margin: 0 }
.o-root a.o-next__title, .o-next__title { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--fg); text-decoration: none }
a.o-next__title:hover { color: var(--blue) }
.o-next__why { margin: 0; font-size: var(--text-body-sm); line-height: 1.5; color: var(--fg-2) }
.o-team > .o-eyebrow { margin: 0 0 8px }
.o-team__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--text-body-sm) }
.o-team__list li { display: inline-flex; align-items: center; gap: 6px }
.o-team__ok { width: 8px; height: 8px; border-radius: 50%; background: var(--green) }
.o-team__none { color: var(--fg-3) }
.o-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 720px }
.o-stops--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; max-width: none }
.o-stops--two > li { border-top: .5px solid var(--line) }
.o-stops__group { padding: 10px 10px 2px; font-size: var(--text-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); font-weight: var(--weight-medium) }
.o-root a.o-stops__stop, .o-stops__stop { display: grid; grid-template-columns: 18px minmax(0,1fr) 10px; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px; border-radius: var(--radius-option); color: var(--fg); text-decoration: none }
a.o-stops__stop:hover { background: var(--wash-hover) }
.o-stops__n { font-size: var(--text-micro); color: var(--fg-3); font-variant-numeric: tabular-nums; text-align: right }
.o-stops__dot { width: 10px; height: 10px; border-radius: 50%; justify-self: center; box-shadow: inset 0 0 0 1.5px var(--fg-5) }
.o-stops__stop[data-state="done"] .o-stops__dot { background: var(--green); box-shadow: none }
.o-stops__stop[data-state="partly"] .o-stops__dot { background: linear-gradient(90deg, var(--amber) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--amber) }
.o-stops__q { display: flex; flex-direction: column; min-width: 0 }
.o-stops__q b { font-size: var(--text-body-sm); font-weight: var(--weight-medium) }
.o-stops__q span { font-size: var(--text-caption); color: var(--fg-3) }
.o-stops--compact { gap: 0 }
.o-stops--compact .o-stops__stop { min-height: 30px; padding: 2px 6px }
.o-next__prompt { width: 100%; box-sizing: border-box }
.o-next__prompt code { white-space: normal; word-break: break-word }
/* Progress as a <meter> (no inline style under the CSP): readiness blue, the checklist green. */
.o-where__meter, .o-checklist__meter { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 5px; margin-top: 4px; border: 0; border-radius: 3px; background: var(--wash) }
.o-where__meter::-webkit-meter-bar, .o-checklist__meter::-webkit-meter-bar { height: 5px; border: 0; border-radius: 3px; background: var(--wash) }
.o-where__meter::-webkit-meter-optimum-value { border-radius: 3px; background: var(--blue) }
.o-where__meter::-moz-meter-bar { border-radius: 3px; background: var(--blue) }
.o-checklist__meter::-webkit-meter-optimum-value { border-radius: 3px; background: var(--green) }
.o-checklist__meter::-moz-meter-bar { border-radius: 3px; background: var(--green) }
.o-checklist { max-width: 720px; padding: 12px 14px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-checklist__head { display: grid; gap: 8px; list-style: none; cursor: pointer }
.o-checklist__head::-webkit-details-marker, .o-checklist__item > summary::-webkit-details-marker { display: none }
.o-checklist__head .o-eyebrow { margin: 0 }
.o-checklist__items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px }
.o-checklist__item > summary { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: var(--radius-option); list-style: none; cursor: pointer }
.o-checklist__item > summary:hover { background: var(--wash-hover) }
.o-checklist__mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--fg-3); box-shadow: inset 0 0 0 1.5px var(--fg-5) }
.o-checklist__item[data-state="done"] .o-checklist__mark { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); box-shadow: none; font-size: 15px }
.o-checklist__item[data-state="current"] .o-checklist__mark { color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue) }
.o-checklist__text { display: flex; flex-direction: column; min-width: 0 }
.o-checklist__text b { font-size: var(--text-body-sm); font-weight: var(--weight-medium) }
.o-checklist__text span { font-size: var(--text-caption); color: var(--fg-3) }
.o-checklist__item[data-state="done"] .o-checklist__text b { color: var(--fg-3) }
.o-checklist__body { display: grid; gap: 8px; padding: 2px 6px 12px 40px; font-size: var(--text-body-sm); color: var(--fg-2) }
.o-checklist__body p { margin: 0 }
.o-checklist__body .o-copyfield code { white-space: normal; word-break: break-word }
/* Domain view (.o-domain on .o-work__canvas): "What are the core concepts and how do they relate?",
   in three layouts, each drawn on the map canvas (.o-map.o-cmap: the dotted ground, pan, zoom and
   Fit, the answer and legend in .o-map__foot); the HTML parts sit in foreignObjects of the world.
   Areas: __bubble links (an area's name, counts, first concepts as __chips) joined
   by __lines--areas lines as thick as the relations between them (stroke-width attribute). One
   area: its __area frame, __card links (an __cardarea eyebrow over the __cardname; data-outside
   dashes a neighbour from another area) and relation __lines (verb label, a __sub line with the
   cardinality; the dot marks where a line points; data-dashed for lines that leave the area).
   Cards: a column per area under an __head, __note links stating their relations in words; a
   line group with data-hidden shows only while one of its data-ends concepts is pointed at
   (ui.js sets data-hover). One concept: the __card data-center in the middle, its neighbours
   around (its glossary is the side panel's last list). A relation's label is a __pill on its line. data-tone
   colours an area everywhere; data-state lights the selection ("selected"), its direct
   neighbours ("near") and dims the rest ("dim"); data-undefined dashes a concept without a
   definition. __trail, in the foot, holds the concepts visited. */
.o-cmap foreignObject { overflow: visible }
.o-cmap [data-tone] { --area: var(--tone-solid, var(--blue)) }
.o-cmap__area { position: relative; width: 100%; height: 100%; box-sizing: border-box; border: 1.5px dashed color-mix(in srgb, var(--area) 45%, transparent); border-radius: var(--radius-section); background: color-mix(in srgb, var(--area) 6%, transparent) }
.o-cmap__areaname { position: absolute; left: 16px; top: 10px; font-size: var(--text-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--area); font-weight: var(--weight-semibold) }
.o-root a.o-cmap__bubble, .o-cmap__bubble { width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 28px; border: 1.5px solid var(--area); background: color-mix(in srgb, var(--area) 12%, var(--map-card)); box-shadow: 0 10px 30px -18px rgba(var(--shadow-rgb), .45); color: var(--fg); text-decoration: none; overflow: hidden; transition: transform var(--dur-fast) ease }
.o-cmap__bubble:hover { transform: translateY(-1px) }
.o-cmap__bubblename { font-size: var(--text-body); line-height: 20px; font-weight: var(--weight-semibold); color: var(--area); overflow-wrap: anywhere }
.o-cmap__bubblecount { font-size: var(--text-caption); line-height: 19px; color: var(--fg-2) }
.o-cmap__chips { display: flex; flex-wrap: wrap; gap: 5px }
.o-cmap__chips span { height: 22px; padding: 0 8px; border-radius: 11px; background: rgba(var(--glass-rgb), .85); font-size: var(--text-micro); display: inline-flex; align-items: center; white-space: nowrap; max-width: 100%; flex: none; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis }
.o-cmap__chips span[data-more] { background: transparent; color: var(--fg-3) }
.o-cmap__bubblenote { font-size: var(--text-micro); line-height: 18px; color: var(--orange) }
.o-cmap__lines { pointer-events: none }
.o-cmap__lines line, .o-cmap__lines path { fill: none; stroke: var(--line-strong); stroke-width: 1.5 }
.o-cmap__lines--areas line { stroke: color-mix(in srgb, var(--fg-3) 55%, transparent); stroke-linecap: round }
.o-cmap__lines circle { fill: var(--line-strong) }
.o-cmap__lines text { font-size: 11.5px; fill: var(--fg-2); paint-order: stroke; stroke: var(--map-ground); stroke-width: 4px; stroke-linejoin: round }
.o-cmap__lines .o-cmap__sub { font-size: 10.5px; fill: var(--fg-3); font-family: var(--font-mono) }
.o-cmap__lines .o-cmap__pill { fill: var(--map-card); stroke: var(--map-border); stroke-width: 1 }
.o-cmap__lines .o-cmap__pill + text { stroke: none }
.o-cmap__lines g[data-state="selected"] .o-cmap__pill, .o-cmap__lines g[data-hover] .o-cmap__pill { stroke: color-mix(in srgb, var(--blue) 45%, transparent) }
.o-cmap__lines g[data-dashed] :is(line, path) { stroke-dasharray: 5 4 }
.o-cmap__lines g[data-state="selected"] :is(line, path) { stroke: var(--blue); stroke-width: 2 }
.o-cmap__lines g[data-state="selected"] circle { fill: var(--blue) }
.o-cmap__lines g[data-state="selected"] text { fill: var(--blue) }
.o-cmap__lines g[data-state="dim"] { opacity: .15 }
.o-cmap__lines g[data-hidden]:not([data-hover]) { display: none }
.o-cmap__lines g[data-hover] :is(line, path) { stroke: var(--blue); stroke-width: 2 }
.o-cmap__lines g[data-hover] circle { fill: var(--blue) }
.o-cmap__lines g[data-hover] text { fill: var(--blue) }
.o-root a.o-cmap__card, .o-cmap__card { width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 12px; border-radius: 12px; background: var(--map-card); box-shadow: 0 0 0 1px var(--map-border), 0 6px 18px -12px rgba(var(--shadow-rgb), .45); color: var(--fg); text-decoration: none; overflow: hidden }
.o-cmap__card:hover { background: var(--wash-hover) }
.o-cmap__cardarea { display: flex; align-items: center; gap: 2px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--area); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-cmap__cardarea .ti { font-size: 12px }
.o-cmap__cardname { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: var(--text-body-sm); font-weight: var(--weight-semibold); line-height: 17px; overflow: hidden; overflow-wrap: anywhere }
.o-cmap__card[data-outside] { background: rgba(var(--glass-rgb), .6); box-shadow: none; border: 1px dashed var(--map-border) }
.o-cmap__card[data-center] { align-items: center; text-align: center; border-radius: 16px; box-shadow: 0 0 0 2px var(--blue), 0 0 0 7px color-mix(in srgb, var(--blue) 12%, transparent), 0 18px 40px -20px color-mix(in srgb, var(--blue) 60%, transparent) }
.o-cmap__card[data-center] .o-cmap__cardname { font-size: var(--text-body); line-height: 18px }
.o-cmap__card[data-undefined], .o-cmap__note[data-undefined] { background: transparent; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--amber) 75%, transparent) }
.o-cmap__card[data-state="selected"]:not([data-center]), .o-cmap__note[data-state="selected"] { outline: 2.5px solid var(--blue); outline-offset: 2px }
.o-cmap__card[data-state="near"]:not([data-outside]), .o-cmap__note[data-state="near"] { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--blue) 55%, transparent) }
.o-cmap__card[data-state="dim"], .o-cmap__note[data-state="dim"] { opacity: .35 }
.o-root a.o-cmap__head, .o-cmap__head { height: 100%; display: flex; align-items: center; gap: 8px; font-size: var(--text-micro); letter-spacing: .07em; text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--area); text-decoration: none; white-space: nowrap }
.o-cmap__head i { width: 24px; height: 3px; border-radius: 2px; background: var(--area); flex: none }
.o-cmap__head b { color: var(--fg-3); font-weight: var(--weight-regular) }
.o-root a.o-cmap__note, .o-cmap__note { width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--map-card); box-shadow: 0 0 0 1px var(--map-border), 0 10px 24px -18px rgba(var(--shadow-rgb), .4); color: var(--fg); text-decoration: none; overflow: hidden; transition: opacity var(--dur-fast) ease }
.o-cmap__note:hover { box-shadow: 0 0 0 1.5px var(--blue) }
.o-cmap__note > * { flex: none }
.o-cmap__note .o-cmap__cardname { font-size: var(--text-body-sm) }
.o-cmap__notedef { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--text-micro); line-height: 1.4; color: var(--fg-2) }
.o-cmap__noterel { font-size: var(--text-micro); line-height: 20px; color: var(--fg); overflow-wrap: anywhere }
.o-cmap__noterel em { font-style: normal; color: var(--blue) }
.o-cmap__noterel span { color: var(--fg-3) }
.o-cmap__noteinc { margin-top: auto; font-size: 11.5px; color: var(--fg-3) }
.o-cmap__swatch { display: inline-block; width: 18px; height: 10px; margin-right: 6px; border-radius: 4px; border: 1.5px dashed color-mix(in srgb, var(--amber) 75%, transparent); vertical-align: middle }
.o-domain__trail { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 10px; background: color-mix(in srgb, var(--map-card) 88%, transparent); box-shadow: 0 0 0 .5px var(--map-border); font-size: var(--text-micro); color: var(--fg-3) }
.o-domain__trail .o-chip { height: 24px; padding: 0 10px }
.o-domain .o-map__foot .o-map__legend { flex-wrap: nowrap; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis }
/* Flows view (.o-flow on .o-map): "How exactly does this step work?". One flow of the model as a
   block schema or in swimlanes, laid out by the server. Start and end blocks are pills, steps
   rounded boxes, decisions diamonds, errors dashed orange; error exits are dashed. data-dimmed
   fades what the happy path leaves out; a selected block and its exits are blue; a lit lane is
   the selected block's part. The foot names where the flow sits (.o-flow__trail). */
.o-flow__lane rect { fill: color-mix(in srgb, var(--map-card) 45%, transparent); stroke: var(--map-border); stroke-width: 1 }
.o-flow__lane:nth-child(even) rect { fill: color-mix(in srgb, var(--map-card) 20%, transparent) }
.o-flow__lane[data-lit] rect { fill: color-mix(in srgb, var(--blue) 9%, var(--map-card)) }
.o-flow__lanename { padding: 6px 12px; font-size: var(--text-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-flow__lane[data-lit] .o-flow__lanename { color: var(--blue) }
.o-flow__edge path { fill: none; stroke: var(--fg-3); stroke-opacity: .6; stroke-width: 2 }
.o-flow__edge text { fill: var(--fg-2); font-size: 13px; font-weight: var(--weight-medium); paint-order: stroke; stroke: var(--map-ground); stroke-width: 4px; stroke-linejoin: round }
.o-flow__edge[data-error] path { stroke: var(--orange); stroke-dasharray: 6 5 }
.o-flow__edge[data-lit] path { stroke: var(--blue); stroke-opacity: 1; stroke-width: 2.5 }
.o-flow__head { fill: var(--fg-3) }
.o-flow__head[data-error] { fill: var(--orange) }
.o-flow__shape { fill: var(--map-card); stroke: var(--map-border); stroke-width: 1.5 }
.o-flow__block[data-kind="start"] .o-flow__shape, .o-flow__block[data-kind="end"] .o-flow__shape { fill: color-mix(in srgb, var(--blue) 12%, var(--map-card)); stroke: color-mix(in srgb, var(--blue) 50%, transparent) }
.o-flow__block[data-kind="decision"] .o-flow__shape { fill: color-mix(in srgb, var(--amber) 10%, var(--map-card)); stroke: color-mix(in srgb, var(--amber) 60%, transparent) }
.o-flow__block[data-kind="error"] .o-flow__shape { fill: color-mix(in srgb, var(--orange) 8%, var(--map-card)); stroke: var(--orange); stroke-dasharray: 6 4 }
.o-flow__block[aria-current="true"] .o-flow__shape { stroke: var(--blue); stroke-width: 3; stroke-dasharray: none }
.o-flow__block[data-dimmed], .o-flow__edge[data-dimmed] { opacity: .22 }
.o-root a.o-flow__text, .o-flow__text { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; padding: 8px 14px; color: var(--fg); text-decoration: none; text-align: center; font-size: var(--text-body-sm); line-height: 1.25; cursor: pointer; overflow-wrap: anywhere }
/* The layout sizes every box to its whole text (wrapped, never cut; specs/logbook K20), so nothing here clamps or hides. */
.o-flow__text span { max-width: 100% }
.o-root a.o-flow__text[data-kind="start"], .o-root a.o-flow__text[data-kind="end"], .o-flow__text[data-kind="start"], .o-flow__text[data-kind="end"] { padding: 8px 24px }
.o-root a.o-flow__text[data-kind="decision"], .o-flow__text[data-kind="decision"] { padding: 3px 4px; font-size: var(--text-caption) }
.o-flow__text small { font-size: var(--text-nano); line-height: 1.25; color: var(--fg-3); max-width: 100% }
.o-flow__text:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 10px }
.o-flow__trail { display: flex; flex-wrap: nowrap; overflow: hidden; align-items: center; gap: 4px; min-width: 0; max-width: 100%; padding: 5px 12px; border-radius: 10px; background: color-mix(in srgb, var(--map-card) 88%, transparent); box-shadow: 0 0 0 .5px var(--map-border); box-sizing: border-box; font-size: var(--text-caption); color: var(--fg-3) }
.o-flow__trail a { flex: 0 1 auto; min-width: 0; color: var(--fg-2); text-decoration: none; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-flow__trail a:hover { color: var(--blue) }
.o-flow__trail a:first-child, .o-flow__trail a[data-step] { flex: none }
.o-flow__trail a:last-child { color: var(--fg); font-weight: var(--weight-medium) }
.o-flow__key { display: inline-block; width: 14px; height: 10px; vertical-align: -1px; border-radius: 3px; background: var(--map-card); box-shadow: 0 0 0 1.5px var(--map-border) }
.o-flow__key[data-kind="decision"] { width: 10px; transform: rotate(45deg) scale(.85); border-radius: 1px; background: color-mix(in srgb, var(--amber) 10%, var(--map-card)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--amber) 60%, transparent) }
.o-flow__key[data-kind="error"] { box-shadow: none; border: 1.5px dashed var(--orange); box-sizing: border-box }
.o-flow__empty { margin: auto; max-width: 440px }
.o-mapside__prompt { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--wash); font-size: var(--text-caption); line-height: 1.5; color: var(--fg-2) }
.o-explorer__group { display: block; padding: 2px 12px 3px; font-size: var(--text-nano); letter-spacing: .07em; text-transform: uppercase; color: var(--fg-3) }
.o-explorer__gap { display: block; height: 6px }
.o-work[data-rail] .o-explorer__group { display: none }
/* The views (.o-journey, specs/projects D38, D54): each stop's icon and name, a readiness dot
   (done, partly, open) at the end; its question is the tip (.o-tip), never a second line. In the
   rail only the icon shows, with the dot on its corner. */
.o-journey .o-journey__stop { position: relative; height: 36px; padding: 0 10px }
.o-journey__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-journey__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--fg-3) }
.o-journey__dot[data-ready="done"] { border-color: var(--green); background: var(--green) }
.o-journey__dot[data-ready="partly"] { border-color: var(--amber-ink); background: linear-gradient(90deg, var(--amber) 50%, transparent 50%) }
.o-journey__dot[data-ready="open"] { border-color: var(--fg-3); background: transparent }
.o-work[data-rail] .o-journey__dot { position: absolute; top: 7px; right: 7px }
/* The project's history (.o-history): a timeline with a lane for the published revisions
   (diamonds) and one per draft (dots coloured by author, a pill for a submission, a ring for a
   review), drawn as SVG on a 1000-wide track; the people involved; the latest changes in words. */
.o-history { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-history__head { display: flex; align-items: center; gap: 10px }
.o-history__head .o-eyebrow { margin: 0 }
.o-history__range { font-size: var(--text-micro); color: var(--fg-3) }
.o-history__people { display: flex }
.o-history__people .o-avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface-section) }
.o-history__lanes { display: flex; flex-direction: column; gap: 2px }
.o-history__lane { display: flex; align-items: center; gap: 12px; padding: 4px 6px; border-radius: 10px }
.o-history__lane:hover { background: var(--wash) }
.o-root a.o-history__name, .o-history__name { flex: none; width: 190px; display: flex; flex-direction: column; line-height: 1.25; color: var(--fg); text-decoration: none; min-width: 0 }
.o-history__name b { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-history__name span { font-size: var(--text-micro); color: var(--fg-3) }
.o-history__track { flex: 1; min-width: 0; height: auto; overflow: visible }
.o-history__line { stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round }
.o-history__lane[data-published] .o-history__line { stroke: var(--blue); opacity: .5 }
.o-history__rev { fill: var(--blue) }
.o-history__mark, .o-history__submit { fill: var(--fg-3); stroke: var(--surface-section); stroke-width: 2 }
.o-history__review { fill: var(--surface-section); stroke: var(--green); stroke-width: 3 }
.o-history__mark[data-av="1"], .o-history__submit[data-av="1"] { fill: var(--av-1) } .o-history__mark[data-av="2"], .o-history__submit[data-av="2"] { fill: var(--av-2) }
.o-history__mark[data-av="3"], .o-history__submit[data-av="3"] { fill: var(--av-3) } .o-history__mark[data-av="4"], .o-history__submit[data-av="4"] { fill: var(--av-4) }
.o-history__mark[data-av="5"], .o-history__submit[data-av="5"] { fill: var(--av-5) } .o-history__mark[data-av="6"], .o-history__submit[data-av="6"] { fill: var(--av-6) }
.o-history__events { margin: 4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px }
.o-history__events li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-field); font-size: var(--text-body-sm) }
.o-history__events b { font-weight: var(--weight-medium) }
.o-history__when { display: block; font-size: var(--text-micro); color: var(--fg-3) }
/* The document reader (.o-reader): one chapter in a reading column and, beside it, a schematic
   map (.o-minimap) of the system's parts and what is around it. A paragraph names the part it
   is about (data-ref); pointing at it or focusing it lights that part (ui.js sets data-lit). */
.o-reader { display: flex; gap: 32px; align-items: flex-start; width: 100%; max-width: 1160px; margin: 0 auto; padding: 12px 28px 56px; box-sizing: border-box }
.o-reader__text { flex: 1; min-width: 0; max-width: 660px; margin: 0 auto }
.o-reader__kicker { font-size: var(--text-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--fg-3) }
.o-reader__text h1 { margin: 6px 0 20px; font-size: 33px; line-height: 1.15; font-weight: var(--weight-medium); letter-spacing: -.012em }
.o-reader__p { position: relative; display: flex; gap: 10px; margin: 0 0 6px -12px; padding: 6px 12px; border-radius: 10px; font-size: 17.5px; line-height: 1.7; color: var(--fg); transition: background-color var(--dur-fast) ease }
.o-reader__p[data-ref]:not([data-ref=""]):hover, .o-reader__p[data-lit] { background: color-mix(in srgb, var(--blue) 8%, transparent) }
.o-reader__p:focus-visible { outline: 2px solid var(--blue); outline-offset: 0 }
.o-reader__p[data-kind="lead"] { font-size: 20px; line-height: 1.6; color: var(--fg-2); margin-bottom: 14px }
.o-reader__p[data-kind="item"] { font-size: 16px; line-height: 1.55 }
.o-reader__p[data-kind="question"], .o-reader__p[data-kind="failure"], .o-reader__p[data-kind="issue"] { font-size: 16px; background: var(--amber-tint) }
.o-reader__p > .ti { flex: none; margin-top: 4px; color: var(--amber-ink) }
.o-reader__meta { margin: -12px 0 18px; font-size: var(--text-caption); color: var(--fg-3) }
.o-reader__p[data-depth="1"] { margin-left: 4px } .o-reader__p[data-depth="2"] { margin-left: 20px } .o-reader__p[data-depth="3"] { margin-left: 36px } .o-reader__p[data-depth="4"] { margin-left: 52px }
.o-reader__body { white-space: pre-line; overflow-wrap: anywhere }
.o-reader__num { flex: none; min-width: 24px; height: 24px; padding: 0 6px; margin-top: 3px; border-radius: 12px; display: grid; place-items: center; font-size: 13px; font-weight: var(--weight-medium); background: var(--wash); color: var(--fg-2) }
.o-reader__sub { margin-left: auto; padding-left: 12px; font-size: var(--text-micro); color: var(--fg-3); white-space: nowrap }
.o-reader__pager { display: flex; gap: 12px; margin-top: 36px }
.o-root .o-reader__pager a, .o-reader__pager a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-width: 200px; border-radius: 14px; background: var(--surface-section); box-shadow: var(--edge-block); color: var(--fg); text-decoration: none }
.o-reader__pager a span { font-size: var(--text-micro); color: var(--fg-3) }
.o-reader__pager a[rel="next"] { text-align: right }
.o-reader__map { position: sticky; top: 76px; flex: none; width: 320px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-section); background: var(--map-ground); box-shadow: var(--edge-block) }
.o-reader__maphead { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3) }
.o-reader__maphead a { text-transform: none; letter-spacing: 0; font-size: var(--text-caption) }
.o-reader__maphint { margin: 0; font-size: var(--text-micro); color: var(--fg-3) }
.o-minimap__outside, .o-minimap__inside { display: flex; flex-wrap: wrap; gap: 6px }
.o-root a.o-minimap__system, .o-minimap__system { margin-top: 4px; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--blue); text-decoration: none }
.o-minimap__inside { padding: 8px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--blue) 35%, transparent); background: color-mix(in srgb, var(--map-card) 70%, transparent) }
.o-root a.o-minimap__node, .o-minimap__node { flex: 1 1 120px; display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 10px; background: var(--map-card); box-shadow: 0 0 0 .5px var(--map-border); color: var(--fg); text-decoration: none; font-size: var(--text-caption); transition: box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease, opacity var(--dur-fast) ease }
.o-minimap__node span { font-size: var(--text-nano); color: var(--fg-3) }
.o-reader__map[data-lit] .o-minimap__node { opacity: .45 }
.o-reader__map .o-minimap__node[data-lit] { opacity: 1; box-shadow: 0 0 0 2px var(--blue), 0 8px 20px -8px rgba(var(--shadow-rgb),.4); transform: scale(1.03) }
/* The Model spreadsheet (.o-sheetpage): a status strip (.o-sheetstatus: version, review state,
   issues, the last cell edit's result), the grid of one item kind (.o-cells__grid: dense rows,
   cells edited in place with .o-cells__input, the ID cell opens the item in the side panel) and
   the sheet tabs at the bottom (.o-sheets). Uses the desk's full width (.o-work__page[data-wide]). */
.o-work__page[data-wide] { display: flex; flex-direction: column }
.o-work__page[data-wide] > .o-work__inner { flex: 1; max-width: none; padding: 0; gap: 0; box-sizing: border-box } /* the tools are a row above, not an island over the page */
.o-work__page[data-wide] > .o-work__inner > .o-sheetpage { flex: 1 }
.o-sheetpage { display: flex; flex-direction: column; min-height: 0 }
.o-sheetpage__head { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 10px }
.o-sheetpage__review { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1120px; margin: 0 auto; padding: 8px 20px 32px; box-sizing: border-box }
.o-sheetstatus { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px 4px 12px; border-radius: 12px; background: var(--surface-section); box-shadow: var(--edge-block); font-size: var(--text-caption); color: var(--fg-2) }
.o-sheetstatus__saved { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); animation: fade var(--dur-state) ease both }
.o-sheetstatus__error { display: inline-flex; align-items: center; gap: 4px; color: var(--danger) }
.o-cells { flex: 1 1 auto; min-height: 120px; overflow: auto; border-top: .5px solid var(--line); background: var(--surface-field) }
.o-cells__grid { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm) }
.o-cells__grid th { position: sticky; top: 0; z-index: 1; padding: 7px 10px; text-align: left; font-weight: var(--weight-regular); font-size: var(--text-micro); color: var(--fg-3); background: var(--surface-popover); border-bottom: .5px solid var(--line); border-right: .5px solid var(--line); white-space: nowrap }
.o-cells__grid th label { display: flex; flex-direction: column; gap: 4px }
.o-cells__filter { width: 100%; min-width: 90px; height: 28px; padding: 0 6px; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface-field); color: var(--fg); font: inherit }
.o-cells__filter::placeholder { color: var(--fg-3); opacity: 1 }
.o-cells__filter:focus { outline: 2px solid var(--blue); outline-offset: -2px }
.o-cells__input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: -2px }
.o-cells__grid td { padding: 0; border-bottom: .5px solid var(--line); border-right: .5px solid var(--line); vertical-align: middle; max-width: 280px }
.o-cells__grid tr:hover td { background: var(--wash) }
.o-cells__grid tr[aria-current="true"] td { background: color-mix(in srgb, var(--blue) 9%, transparent) }
.o-root a.o-cells__id, .o-cells__id { display: block; padding: 7px 10px; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-micro); color: var(--blue); text-decoration: none; white-space: nowrap }
.o-cells__grid tr[data-depth="1"] .o-cells__id { padding-left: 24px } .o-cells__grid tr[data-depth="2"] .o-cells__id { padding-left: 38px }
.o-cells__grid tr[data-depth="3"] .o-cells__id { padding-left: 52px } .o-cells__grid tr[data-depth="4"] .o-cells__id, .o-cells__grid tr[data-depth="5"] .o-cells__id, .o-cells__grid tr[data-depth="6"] .o-cells__id { padding-left: 66px }
.o-root a.o-cells__count, .o-cells__count { display: block; padding: 7px 10px; color: var(--fg-2); text-decoration: none; font-variant-numeric: tabular-nums }
.o-cells__text { display: block; padding: 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-cells__input { display: block; width: 100%; min-width: 90px; height: 34px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 0; background: transparent; color: var(--fg); font: inherit; font-size: var(--text-body-sm); text-overflow: ellipsis }
.o-cells__input:hover { background: var(--surface-field-focus) }
.o-cells__input:focus { outline: 2px solid var(--blue); outline-offset: -2px; background: var(--surface-field-focus) }
select.o-cells__input { cursor: pointer; appearance: none; padding-right: 22px; background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%); background-position: calc(100% - 13px) 15px, calc(100% - 9px) 15px; background-size: 4px 4px; background-repeat: no-repeat }
.o-cells__issues { width: 44px; text-align: center }
.o-cells__empty { margin: 0; padding: 20px 16px; color: var(--fg-3) }
.o-sheets { position: sticky; bottom: 0; z-index: 2; flex: none; display: flex; gap: 2px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; background: rgb(var(--glass-rgb)); border-top: .5px solid var(--line-strong); box-shadow: 0 -8px 18px -14px rgba(var(--shadow-rgb),.5) }
.o-root a.o-sheets__tab, .o-sheets__tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; color: var(--fg-2); text-decoration: none; font-size: var(--text-caption); border-top: 2px solid transparent }
.o-sheets__tab:hover { background: var(--wash) }
.o-sheets__tab[aria-current="page"] { color: var(--fg); font-weight: var(--weight-medium); background: var(--surface-field-focus); border-top-color: var(--blue) }
.o-sheets__count { font-size: var(--text-micro); color: var(--fg-3) }
.o-sheets__tab[aria-current="page"] .o-sheets__count { color: var(--blue) }
.o-sheets__issues { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger-tint); color: var(--danger); font-size: 11px; line-height: 16px; text-align: center }
.o-itempanel { display: flex; flex-direction: column; gap: 12px }
.o-itempanel__title { margin: 0 0 4px; font-size: 17px; font-weight: var(--weight-medium) }
/* The project pane (side panel): tabs over the project-wide settings, a list per tab, an item's form in place. */
.o-projpane__host { flex: 1; min-height: 0; display: flex; flex-direction: column }
.o-projpane__host[aria-busy="true"] > .o-projpane { opacity: .55; transition: opacity var(--dur-fast) ease }
.o-projpane__loading { padding: 0 18px }
.o-projpane__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column }
.o-root a.o-projpane__row, .o-projpane__row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 4px; border-top: .5px solid var(--line); color: var(--fg); text-decoration: none }
.o-projpane__list > li:first-child > .o-projpane__row, .o-projpane__list > .o-projpane__row:first-child { border-top: 0 }
a.o-projpane__row:hover { background: var(--wash); border-radius: var(--radius-option) }
.o-projpane__row > .ti { flex: none; color: var(--fg-4) }
.o-projpane__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; text-overflow: ellipsis }
.o-projpane__sub { font-size: var(--text-micro); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-root a.o-projpane__back, .o-projpane__back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--fg-2); text-decoration: none }
.o-projpane__back:hover { color: var(--fg) }
.o-projpane__note { margin-top: auto !important; padding-top: 8px }
.o-projpane__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column }
.o-projpane__step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: .5px solid var(--line); font-size: var(--text-body-sm); line-height: 1.4 }
.o-projpane__step:first-child { border-top: 0 }
.o-projpane__step[data-sub] { padding-left: 22px }
.o-projpane__no { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-micro);
  font-weight: var(--weight-medium); color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent) }
.o-projpane__step[data-missing] .o-projpane__sub { color: var(--orange) }
.o-projpane__trace { align-self: flex-start }
/* Explorer sections after the tree: a heading with an add link, then rows. */
.o-tree__section { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 8px 4px 12px; border-top: .5px solid var(--line) }
.o-tree__heading { flex: 1; font-size: var(--text-nano); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3) }
.o-root a.o-tree__add, .o-tree__add { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-micro); color: var(--blue); text-decoration: none }
.o-tree__add .ti { font-size: 13px }
/* Ports: the system's inputs and outputs on its frame or card (map). */
.o-mapport { pointer-events: none }
.o-mapport rect { fill: var(--map-card); stroke: var(--map-accent-ink); stroke-width: 1.2 }
.o-mapport[data-dir="out"] rect { fill: color-mix(in srgb, var(--map-featured) 8%, var(--map-card)) }
.o-mapport text { font-size: 12.5px; font-weight: var(--weight-medium); fill: var(--map-accent-ink); text-anchor: middle; dominant-baseline: middle }
/* A port whose label found no free place: a dot on the border, named on hover (K21). */
.o-mapport[data-short] { pointer-events: auto; cursor: help }
.o-mapport[data-short] circle { fill: var(--map-card); stroke: var(--map-accent-ink); stroke-width: 2 }
.o-mapport[data-short][data-dir="out"] circle { fill: var(--map-accent-ink) }
.o-projpane .o-sheetpage__review { padding: 0 } .o-projpane .o-section { padding: 0; margin: 0 0 14px; background: none; box-shadow: none }
.o-itempanel__kept { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: var(--text-caption); color: var(--fg-2) }
.o-itempanel__kept code { white-space: pre-wrap; word-break: break-word }
.o-itempanel__remove { margin-top: 8px; padding-top: 10px; border-top: .5px solid var(--line) }
.o-sidepanel__body .o-focus__group { gap: 10px }
/* The forecast's verdict (.o-verdict, data-tone green|amber|red): a mark, the answer in one line
   and the monthly cost. The load map (.o-loadmap): one column per area, one block per part; flex
   weights (data-w 1–12) follow cost, data-tone the load against capacity (green under 70%,
   amber 70–100%, red over, muted unsized). .o-fix cards say what to do about each bottleneck. */
.o-verdict { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-verdict__mark { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; font-size: 29px; background: var(--green-tint); color: var(--green) }
.o-verdict[data-tone="amber"] .o-verdict__mark { background: var(--amber-tint); color: var(--amber-ink) }
.o-verdict[data-tone="red"] .o-verdict__mark { background: var(--danger-tint); color: var(--danger) }
.o-verdict__text { flex: 1; min-width: 0 }
.o-verdict__text h1 { margin: 2px 0 4px; font-size: 27px; font-weight: var(--weight-medium); letter-spacing: -.01em; line-height: 1.2 }
.o-verdict__text p { margin: 0; color: var(--fg-2) }
.o-verdict__scenario { font-size: var(--text-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3) }
.o-verdict__cost { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right }
.o-verdict__cost b { font-size: 25px; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums }
.o-verdict__cost span { font-size: var(--text-caption); color: var(--fg-3) }
.o-loadmap__legend { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; font-size: var(--text-micro); color: var(--fg-3) }
.o-loadmap__legend .o-eyebrow { margin: 0 }
.o-loadmap__legend > span:not(.o-spacer) { display: inline-flex; align-items: center; gap: 5px }
.o-loadmap__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px }
.o-loadmap { display: flex; gap: 6px; height: 320px; padding: 6px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-loadmap__area { flex: 1 1 0; min-width: 120px; display: flex; flex-direction: column; gap: 6px }
.o-loadmap__head { flex: none; display: flex; align-items: baseline; gap: 6px; padding: 4px 6px 0; font-size: var(--text-caption) }
.o-loadmap__head span { color: var(--fg-3) }
.o-root a.o-loadmap__block, .o-loadmap__block { flex: 1 1 0; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: start; column-gap: 8px; row-gap: 1px; padding: 7px 10px; line-height: 1.3; border-radius: 12px; text-decoration: none; overflow: hidden;
  background: var(--green-tint); color: var(--fg); transition: transform var(--dur-press) ease, box-shadow var(--dur-fast) ease }
.o-loadmap__block:hover { box-shadow: inset 0 0 0 1.5px var(--fg-2) }
.o-loadmap__block:active { transform: scale(.985) }
.o-loadmap__name { grid-column: 1; grid-row: 1; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-loadmap__sub { grid-column: 1 / -1; grid-row: 2; font-size: var(--text-micro); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-loadmap__figure { grid-column: 2; grid-row: 1; font-size: 16px; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums }
.o-loadmap__more { flex: none; padding: 0 6px 4px; font-size: var(--text-micro); color: var(--fg-3) }
[data-tone="green"].o-loadmap__swatch, .o-loadmap__block[data-tone="green"] { background: var(--green-tint) }
[data-tone="amber"].o-loadmap__swatch, .o-loadmap__block[data-tone="amber"] { background: var(--amber-tint) }
[data-tone="red"].o-loadmap__swatch, .o-loadmap__block[data-tone="red"] { background: var(--danger-tint) }
[data-tone="muted"].o-loadmap__swatch, .o-loadmap__block[data-tone="muted"] { background: var(--wash) }
.o-loadmap__block[data-tone="red"] .o-loadmap__figure { color: var(--danger) }
.o-loadmap__block[data-tone="amber"] .o-loadmap__figure { color: var(--amber-ink) }
.o-loadmap [data-w="1"] { flex-grow: 1 } .o-loadmap [data-w="2"] { flex-grow: 2 } .o-loadmap [data-w="3"] { flex-grow: 3 } .o-loadmap [data-w="4"] { flex-grow: 4 }
.o-loadmap [data-w="5"] { flex-grow: 5 } .o-loadmap [data-w="6"] { flex-grow: 6 } .o-loadmap [data-w="7"] { flex-grow: 7 } .o-loadmap [data-w="8"] { flex-grow: 8 }
.o-loadmap [data-w="9"] { flex-grow: 9 } .o-loadmap [data-w="10"] { flex-grow: 10 } .o-loadmap [data-w="11"] { flex-grow: 11 } .o-loadmap [data-w="12"] { flex-grow: 12 }
/* .o-costbar is a cost split by category (specs/hosting FC-8): a segment per category, sized by
   data-w 1..12 (flex weights, so no inline style) and coloured by data-cat. */
.o-costbar { display: flex; gap: 2px; height: 8px; min-width: 60px; border-radius: 4px; overflow: hidden; background: var(--wash) }
.o-costbar__seg { flex: 1 1 0; min-width: 2px; background: var(--blue) }
.o-costbar__seg[data-cat="usage"] { background: var(--indigo) } .o-costbar__seg[data-cat="extras"] { background: var(--amber) }
.o-costbar__seg[data-cat="managed"] { background: var(--orange) } .o-costbar__seg[data-cat="storage"] { background: var(--green) } .o-costbar__seg[data-cat="network"] { background: var(--fg-2) }
.o-costbar [data-w="1"] { flex-grow: 1 } .o-costbar [data-w="2"] { flex-grow: 2 } .o-costbar [data-w="3"] { flex-grow: 3 } .o-costbar [data-w="4"] { flex-grow: 4 }
.o-costbar [data-w="5"] { flex-grow: 5 } .o-costbar [data-w="6"] { flex-grow: 6 } .o-costbar [data-w="7"] { flex-grow: 7 } .o-costbar [data-w="8"] { flex-grow: 8 }
.o-costbar [data-w="9"] { flex-grow: 9 } .o-costbar [data-w="10"] { flex-grow: 10 } .o-costbar [data-w="11"] { flex-grow: 11 } .o-costbar [data-w="12"] { flex-grow: 12 }
.o-costbar__legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--text-micro); color: var(--fg-2) }
.o-costbar__legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--blue) }
.o-costbar__legend i[data-cat="usage"] { background: var(--indigo) } .o-costbar__legend i[data-cat="extras"] { background: var(--amber) }
.o-costbar__legend i[data-cat="managed"] { background: var(--orange) } .o-costbar__legend i[data-cat="storage"] { background: var(--green) } .o-costbar__legend i[data-cat="network"] { background: var(--fg-2) }
/* .o-profmatrix compares hosting profiles or price sets: scenarios or keys as rows, up to 12 columns
   (data-cols); the cheapest cell of a row is marked data-cheapest. Past 4 columns it keeps 120px per column
   and its .o-scrollx wrapper scrolls sideways instead of squeezing the numbers. */
.o-profmatrix { --o-cols: minmax(0, 1.2fr) repeat(var(--o-pcols, 1), minmax(0, 1fr)) }
.o-profmatrix[data-cols="2"] { --o-pcols: 2 } .o-profmatrix[data-cols="3"] { --o-pcols: 3 } .o-profmatrix[data-cols="4"] { --o-pcols: 4 }
.o-profmatrix[data-cols="5"] { --o-pcols: 5 } .o-profmatrix[data-cols="6"] { --o-pcols: 6 } .o-profmatrix[data-cols="7"] { --o-pcols: 7 }
.o-profmatrix[data-cols="8"] { --o-pcols: 8 } .o-profmatrix[data-cols="9"] { --o-pcols: 9 } .o-profmatrix[data-cols="10"] { --o-pcols: 10 }
.o-profmatrix[data-cols="11"] { --o-pcols: 11 } .o-profmatrix[data-cols="12"] { --o-pcols: 12 }
.o-profmatrix { min-width: calc(180px + var(--o-pcols, 1) * 120px) }
.o-scrollx { max-width: 100%; overflow-x: auto }
/* .o-checks lays out a group of labelled checkboxes (input.o-check inside each label) that wraps. */
.o-checks { display: flex; flex-wrap: wrap; gap: 8px 18px }
.o-checks > label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer }
.o-profcell__sub { font-size: var(--text-nano); color: var(--fg-3); font-variant-numeric: tabular-nums }
.o-profcell[data-unpriced] { color: var(--fg-3) }
.o-root a.o-profcell, .o-profcell { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; border-radius: 10px; color: var(--fg); text-decoration: none }
.o-profcell:hover { background: var(--wash-hover) }
.o-profcell b { font-variant-numeric: tabular-nums }
.o-profcell[data-cheapest] { background: var(--green-tint); box-shadow: inset 0 0 0 1px var(--green) }
.o-costlines { --o-cols: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.6fr) }
.o-fixes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px }
.o-fix { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-fix p { margin: 0; color: var(--fg-2) }
.o-fix__kind { font-size: var(--text-nano); font-weight: var(--weight-medium); letter-spacing: .07em; text-transform: uppercase; color: var(--amber-ink) }
.o-fix[data-tone="red"] .o-fix__kind { color: var(--danger) }
.o-fix__name { font-size: 16px; font-weight: var(--weight-medium) }
.o-tree__dot { flex: none; width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background: var(--fg-3) }
.o-tree__dot[data-tone="green"] { background: var(--green) } .o-tree__dot[data-tone="amber"] { background: var(--amber) } .o-tree__dot[data-tone="red"] { background: var(--danger) }
.o-forecast__table { --o-cols: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) }
/* .o-formgrid lays short fields of one form side by side, as many as fit (catalogue prices, sets). */
.o-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px }
.o-forecast__matrix { --o-cols: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) }
.o-readiness { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--text-body-sm); color: var(--fg-2) }
.o-prices { --o-cols: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) }
.o-forecast__totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px }
.o-forecast__total { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--surface-well); box-shadow: inset 0 0 0 .5px var(--line) }
.o-forecast__total b { font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums }
.o-forecast__total span b { font-size: var(--text-body-sm) }

/* ---------- ui/doc: generated documentation pages ---------- */
.o-doc__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: var(--text-body-sm) }
.o-doc__facts dt { color: var(--fg-3) } .o-doc__facts dd { margin: 0 }
.o-doc__indent-1 { margin-left: 20px } .o-doc__indent-2 { margin-left: 40px } .o-doc__indent-3 { margin-left: 60px }
.o-doc__indent-4 { margin-left: 80px } .o-doc__indent-5 { margin-left: 100px } .o-doc__indent-6 { margin-left: 120px }

/* ---------- ui/deck: a presentation that scrolls (landing pages) ----------
   One section fills the window and snaps; a pinned stage beside the text changes with the
   section in view. Markup: html.o-deckroot > body.o-deckbody > .o-deck[data-o-deck][data-o-step]
   holding .o-deck__bar, .o-deck__stage > .o-deck__frame[data-o-deck-frame][data-size="WxH"] >
   .o-deck__canvas (drawn at its design size, scaled to fit), main > .o-deck__section[data-o-deck-section]
   > .o-deck__text, the .o-deck__rail of a[data-o-deck-dot], a.o-deck__next and .o-deck__count.
   ui.js decides from the scroll position, once per move and with hysteresis, which section
   is current and sets data-o-step on the deck and data-o-deck-at (before, current, after) on
   every section. A stage keeps one set of elements and each step change moves, scales, fades
   or re-faces them in one eased, time-based transition on transform and opacity only, so the
   deck plays as one transition and a change mid-move retargets from where things are; with
   script the words are pinned too and hand over the same way. It keeps the rail, next button and count
   on the step, scales the frame and moves a section at a time on the arrow keys, PgUp PgDn
   Space Home End. On a phone held upright the sections swipe across (main is the scroller);
   on a low landscape screen they snap down with the stage beside the words. Without script
   the sections read in order and the rail links still jump; with reduced motion nothing
   animates and the sections still snap. */
.o-deckroot { scroll-snap-type: y mandatory; scroll-behavior: smooth }
.o-deckbody { margin: 0; min-height: 100vh; color: var(--fg); background-color: var(--map-card);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--map-muted) 14%, transparent) .8px, transparent .9px); background-size: 22px 22px }
.o-deck { position: relative; --o-deck-bar: 64px; --o-deck-foot: 56px; --o-deck-left: 72px; --o-deck-text: min(500px, 40vw) }
.o-deck__bar { position: fixed; z-index: 6; top: 0; left: 0; right: 0; height: var(--o-deck-bar); display: flex; align-items: center; gap: 12px; padding: 0 48px; box-sizing: border-box; pointer-events: none }
.o-deck__bar > * { pointer-events: auto }
.o-deck__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--text-body-lg); color: var(--fg); text-decoration: none }
.o-deck__mark { width: 24px; height: 24px; border-radius: 6px }
.o-deck__nav { display: flex; align-items: center; gap: 16px; padding: 4px 4px 4px 16px; border-radius: 22px; background: var(--surface-popover); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--ring-control), 0 6px 18px rgba(var(--shadow-rgb),.08) }
.o-deck__link { font-size: var(--text-body-sm); color: var(--fg-2); text-decoration: none } .o-deck__link:hover { color: var(--blue) }
.o-deck__sections { position: relative; z-index: 1 }
.o-deck__section { position: relative; box-sizing: border-box; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; padding: var(--o-deck-bar) 0 var(--o-deck-foot) var(--o-deck-left) }
.o-deck__text { width: var(--o-deck-text); display: flex; flex-direction: column; align-items: flex-start }
/* With script the words are pinned like the stage: every section's text sits in one place
   between the bar and the foot, and when the current section changes (ui.js sets
   data-o-deck-at: before, current, after) the old words leave quickly, upwards when going on,
   and the new ones arrive after them from the other side, in one timed move, so no text ever
   scrolls across the bar or the count. */
.o-deck[data-o-deck-armed] .o-deck__text { position: fixed; z-index: 3; left: var(--o-deck-left); top: var(--o-deck-bar); bottom: var(--o-deck-foot); justify-content: center; opacity: 0; visibility: hidden; transform: translateY(32px); transition: opacity .2s ease-out, transform .3s ease-out, visibility 0s .3s }
.o-deck[data-o-deck-armed] .o-deck__section[data-o-deck-at="before"] .o-deck__text { transform: translateY(-32px) }
.o-deck[data-o-deck-armed] .o-deck__section[data-o-deck-at="current"] .o-deck__text { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease-out .22s, transform .7s cubic-bezier(.2,.7,.2,1) .18s, visibility 0s }
.o-deck__kick { margin: 0 0 14px; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); font-weight: 600 }
.o-deck__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin: 0 0 14px; border-radius: 12px; font-size: var(--text-nano); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--wash); color: var(--fg-2) }
.o-deck__tag[data-tone="now"] { background: var(--green-tint); color: var(--ok) }
.o-deck__tag[data-tone="next"] { background: var(--indigo-tint); color: var(--indigo) }
.o-deck__title { margin: 0; font-size: var(--text-display); line-height: 1.07; letter-spacing: -.022em; font-weight: 600; text-wrap: balance }
.o-deck__aside { margin: 12px 0 0; font-size: 23px; line-height: 1.3; font-weight: 600; color: var(--blue) } /* the short answer to the objection, under the title */
.o-deck__line { margin: 16px 0 0; font-size: 20px; line-height: 1.5; color: var(--fg-2); max-width: 30em }
.o-deck__line2 { margin: 10px 0 0; font-size: var(--text-body-lg); line-height: 1.5; color: var(--fg-3); max-width: 34em }
.o-deck__note { margin: 18px 0 0; font-size: var(--text-nano); color: var(--fg-3) }
.o-deck__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px }
.o-deck__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; height: 48px; padding: 0 22px; border-radius: 24px; background: #111318; color: #fff; font-size: var(--text-body-lg); font-weight: 500; text-decoration: none; transition: background var(--dur-fast) ease, transform var(--dur-fast) ease }
.o-deck__cta:hover { background: #2c2f36; transform: translateY(-1px) }
.o-deck__agent { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; width: min(100%, 420px) }
.o-deck__agentlabel { font-size: var(--text-caption); font-weight: 600 }
.o-deck__agenthint { font-size: var(--text-nano); color: var(--fg-3) }
.o-deck__stage { position: fixed; z-index: 2; top: var(--o-deck-bar); bottom: var(--o-deck-foot); right: 64px; left: calc(var(--o-deck-left) + var(--o-deck-text) + 24px); display: flex; align-items: center; justify-content: center; pointer-events: none }
.o-deck__frame { position: relative; flex: none; width: calc((720px - 2 * var(--o-deck-crop-x, 0px)) * var(--o-deck-scale, .8)); height: calc(640px * var(--o-deck-scale, .8)) }
.o-deck__canvas { position: absolute; left: calc(var(--o-deck-crop-x, 0px) * -1 * var(--o-deck-scale, .8)); top: 0; width: 720px; height: 640px; transform: scale(var(--o-deck-scale, .8)); transform-origin: 0 0 }
.o-deck__rail { position: fixed; z-index: 6; right: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px }
.o-deck__dot { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--fg-5); transition: height var(--dur-state) ease, background var(--dur-state) ease }
.o-deck__dot:hover { background: var(--fg-3) }
.o-deck__dot[aria-current="step"] { height: 24px; background: var(--blue) }
.o-deck__next { position: fixed; z-index: 6; left: 50%; bottom: 22px; margin-left: -22px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--fg); background: var(--surface-raised); box-shadow: var(--ring-control), 0 6px 18px rgba(var(--shadow-rgb),.12); text-decoration: none }
.o-deck__next:hover { color: var(--blue) }
.o-deck__next .ti { transition: transform var(--dur-state) var(--ease-out) }
.o-deck__next[data-last] .ti { transform: rotate(180deg) }
.o-deck__count { position: fixed; z-index: 6; left: 48px; bottom: 30px; font-size: 13px; color: var(--fg-3); font-family: 'IBM Plex Mono', ui-monospace, monospace }
@media (prefers-reduced-motion: reduce) { .o-deckroot { scroll-behavior: auto } .o-deck * { transition: none !important; animation: none !important } }
/* the small "About ArchIDE" link under the sign-in panel */
.o-focus__about { margin: 14px 0 0; text-align: center; font-size: var(--text-caption) }
.o-focus__about a { color: var(--fg-3); text-decoration: none } .o-focus__about a:hover { color: var(--blue) }
/* ui/item: an item's own page (specs/projects D58): head, tabs in the address, a body of sections;
   its neighbourhood drawn as cards around it; the slim notes' "Open page"; the selected card's page
   badge when the notes stay closed on a selection; the notes' own preference switch. */
.o-itempage { max-width: 900px; margin: 0 auto; padding: 28px 32px 40px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block); display: flex; flex-direction: column; gap: 12px; box-sizing: border-box }
.o-itempage__head { display: flex; flex-direction: column; gap: 8px }
.o-itempage__head > .o-toolbar { flex-wrap: wrap }
.o-itempage__head .o-tag { height: auto; min-height: 22px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left }
.o-itempage__title { margin: 0; font-size: 25px; line-height: 1.3; font-weight: var(--weight-semibold); color: var(--fg); overflow-wrap: anywhere }
.o-itempage__lead { margin: 0; font-size: var(--text-body); line-height: 1.5; color: var(--fg-2); overflow-wrap: anywhere }
.o-itempage__tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex-wrap: nowrap }
.o-itempage__tabs .o-tabs__tab { flex: none; text-decoration: none; white-space: nowrap }
.o-itempage__count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--wash); font-size: 12px; color: var(--fg-2) }
.o-itempage__body { display: flex; flex-direction: column; gap: 4px }
.o-itempage__section { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: .5px solid var(--line) }
.o-itempage__section > .o-toolbar .o-eyebrow, .o-itempage__section > .o-eyebrow { margin: 0 }
.o-itempage__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: var(--text-body-sm) }
.o-itempage__facts dt { color: var(--fg-3) }
.o-itempage__facts dd { margin: 0; color: var(--fg); overflow-wrap: anywhere }
.o-itempage__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--text-body-sm); line-height: 1.45 }
.o-itempage__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere }
.o-itempage__list a { color: var(--map-accent-ink); text-decoration: none; font-weight: var(--weight-medium) }
.o-itempage__list a:hover { text-decoration: underline }
.o-itempage__sub { color: var(--fg-3); font-size: var(--text-caption) }
.o-itempage__desc { flex-basis: 100%; margin: 0; color: var(--fg-2) }
.o-itempage__context { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--surface-well); font: 12.5px/1.55 var(--font-mono); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto }
.o-itemhood { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 220px) minmax(0, 1fr); align-items: center; gap: 28px; padding: 18px 0 8px }
.o-itemhood__side { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.o-itemhood__side li { position: relative }
.o-itemhood__side[data-side="in"] li::after, .o-itemhood__side[data-side="out"] li::before { content: ""; position: absolute; top: 50%; width: 28px; border-top: 1.5px solid color-mix(in srgb, var(--blue) 45%, transparent) }
.o-itemhood__side[data-side="in"] li::after { right: -28px }
.o-itemhood__side[data-side="out"] li::before { left: -28px }
.o-itemhood__card { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--surface-block); box-shadow: var(--edge-block); text-decoration: none; color: var(--fg); overflow-wrap: anywhere }
.o-itemhood__card b { font-weight: var(--weight-medium); font-size: var(--text-body-sm) }
.o-itemhood__card span { font-size: var(--text-caption); color: var(--fg-3) }
.o-itemhood__card:hover { box-shadow: var(--edge-block), 0 0 0 1.5px var(--blue) }
.o-itemhood__self { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--blue); color: var(--on-accent); text-align: center; overflow-wrap: anywhere }
.o-itemhood__self span { font-size: var(--text-caption) }
.o-itemhood__self b { font-size: var(--text-body); font-weight: var(--weight-semibold) }
.o-notes__open { align-self: flex-start; margin: 6px 0 4px; text-decoration: none }
.o-mapnode__page { position: relative; z-index: 2; display: inline-flex; padding: 3px; margin-left: auto; border-radius: 6px; background: var(--blue); color: var(--on-accent); font-size: 15px; line-height: 1; text-decoration: none; flex: none }
.o-mapnode__info + .o-mapnode__page { margin-left: 4px }
.o-mapnode__page:hover { filter: brightness(1.1) }
.o-cmap__page { position: absolute; top: 6px; right: 6px; margin: 0 }
.o-notespref { margin: 0; display: contents }
.o-notespref__switch { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 14px; background: none; cursor: pointer; font: inherit; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2) }
.o-notespref__switch:hover { color: var(--fg); background: var(--wash) }
.o-notespref__switch > span { position: relative; width: 24px; height: 14px; border-radius: 7px; background: var(--line-strong); transition: background .15s }
.o-notespref__switch > span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-solid); transition: transform .15s }
.o-notespref__switch[aria-checked="true"] > span { background: var(--blue) }
.o-notespref__switch[aria-checked="true"] > span::after { transform: translateX(10px) }
@media (prefers-reduced-motion: reduce) { .o-notespref__switch > span, .o-notespref__switch > span::after { transition: none } }

/* ui/workspace: fixed editor frame. Header/status span every workspace column. */
.o-root.o-work { position: relative; --rail-w: 48px; --viewnav-w: 240px; --foot-h: 0px; display: grid; grid-template-columns: 48px auto minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; height: 100dvh; overflow: hidden }
.o-work__header { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; min-width: 0; z-index: 10; background: var(--surface-solid); border-bottom: .5px solid var(--line) }
.o-work__identity { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 40px; padding: 2px 8px }
.o-work__identity .o-picker { min-width: 0; max-width: min(35vw,400px) }
.o-work__identity .o-picker__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-work__content-header .o-desk__dock { position: static; transform: none; max-width: none; width: 100%; min-height: 36px; border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; padding: 2px 8px; box-sizing: border-box; transition: none }
.o-work__content-header .o-desk__tools { flex: 1; min-width: 0 }
.o-work__content-header { grid-column: 1; grid-row: 1; min-width: 0; background: var(--surface-solid); border-bottom: .5px solid var(--line) }
.o-work__actions { flex: none; display: flex; align-items: center; gap: 2px; padding: 2px 8px 2px 0 }
.o-work__actions .o-desk__buttons { padding-left: 0; border-left: 0 }
.o-work[data-rail] > .o-explorer { grid-row: 2; grid-column: 1; width: 48px; padding: 4px 2px; overflow: hidden; transition: none }
.o-work[data-rail] .o-explorer__head { padding: 0 }
.o-work[data-rail] .o-explorer__views { min-height: 0; overflow-y: auto; overflow-x: hidden }
.o-work[data-rail] .o-explorer__foot { margin-top: auto; align-items: center; padding: 4px 0; }
.o-work[data-rail] .o-explorer__view, .o-work[data-rail] .o-journey__stop { width: 44px; min-height: 40px; flex-shrink: 0 }
.o-work > .o-viewnav { grid-row: 2; grid-column: 2; --viewnav-w: 240px }
.o-work > .o-desk { grid-row: 2; grid-column: 3; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto minmax(0,1fr) }
.o-work > .o-desk > .o-work__breadcrumbs { grid-column: 1; grid-row: 2 }
.o-work > .o-desk > :is(.o-work__main,.o-work__page) { grid-column: 1; grid-row: 3 }
.o-work:not(:has(> .o-viewnav)) { grid-template-columns: 48px 0 minmax(0,1fr) }
.o-work__breadcrumbs { flex: none; min-height: 24px; padding: 2px 12px; border-bottom: .5px solid var(--line); background: var(--surface-solid); overflow: auto; box-sizing: border-box }
.o-work__breadcrumbs:has(.o-crumb > span:only-child:empty) { display: none }
.o-work__main, .o-work__page { min-height: 0; min-width: 0 }
.o-work .o-work__page { padding-top: 24px; padding-bottom: 24px }
.o-work__status { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 24px; padding: 2px 8px; border-top: .5px solid var(--line); font-size: var(--text-caption); color: var(--fg-2); background: var(--surface-solid); z-index: 10 }
.o-work__status-source { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg) }
.o-work__status-context { max-width: 24vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-work__agentstatus { white-space: nowrap }
.o-work__loading { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption) }
.o-work__loading[hidden] { display: none }
.o-work__loading .ti { animation: spin var(--dur-spin) linear infinite }
.o-work .o-sidepanel { grid-column: 1; grid-row: 3; bottom: 0 }
.o-work__page .o-section { background: var(--surface-section); padding: 20px; border: .5px solid var(--line); border-radius: var(--radius-panel,16px) }
@media (prefers-reduced-motion: reduce) { .o-work__loading .ti { animation: none } }
/* ui/workbench (specs/workbench §1, DESIGN-SYSTEM.md): VS Code's regions in Optio SaaS's look. The
   gradient ground with its glows is the only glass; the header, rail, outline, tools row and status
   bar are flat translucent bars with hairlines, never blurred, and the canvas has no frame. The
   rail's current view has a blue icon, a 2px blue bar on its left and a faint blue fill; a group
   is a hairline. Account sits above Settings (the gear), lowest in the rail (W4). */
.o-root.o-work { --rail-w: var(--w-rail); --viewnav-w: var(--w-outline); grid-template-columns: var(--w-rail) auto minmax(0,1fr);
  background-color: var(--bg-solid); background-image: var(--bg-glow), var(--bg); background-attachment: fixed }
.o-work:not(:has(> .o-viewnav)) { grid-template-columns: var(--w-rail) 0 minmax(0,1fr) }
.o-work__header { height: var(--h-header); box-sizing: border-box; background: var(--surface-bar); border-bottom-color: var(--line-bar) }
.o-work__identity { min-height: 0 }
.o-work[data-rail] > .o-explorer { width: var(--w-rail); padding: 6px 2px; background: var(--surface-rail); border-right: .5px solid var(--line-bar) }
.o-work > .o-viewnav { --viewnav-w: var(--w-outline); background: var(--surface-outline); border-right-color: var(--line-bar) }
.o-work__content-header, .o-work__breadcrumbs { background: var(--surface-bar); border-bottom-color: var(--line-bar) }
.o-work__status { height: var(--h-statusbar); min-height: 0; box-sizing: border-box; padding: 0 10px; background: var(--surface-bar); border-top-color: var(--line-bar);
  font-family: var(--font-mono); font-size: 11.5px }
.o-work .o-sidepanel { background: var(--surface-panel); -webkit-backdrop-filter: none; backdrop-filter: none; border-left-color: var(--line-bar); box-shadow: var(--shadow-panel-edge) }
.o-work[data-rail] .o-journey .o-journey__stop { width: var(--w-rail); min-height: 42px; border-radius: 0 }
.o-work[data-rail] .o-journey__stop:hover { background: var(--wash) }
.o-work[data-rail] .o-journey__stop .ti { color: var(--fg-2) }
.o-work[data-rail] .o-journey__stop[aria-current="page"] { background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--blue) }
.o-work[data-rail] .o-journey__stop[aria-current="page"] .ti { color: var(--blue) }
.o-work[data-rail] .o-journey__stop[aria-current="page"]::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; border-radius: 0 2px 2px 0; background: var(--blue) }
.o-work[data-rail] .o-explorer__group { display: block; flex: none; width: 24px; height: 0; margin: 5px auto; padding: 0; border-top: .5px solid var(--line-strong); font-size: 0; overflow: hidden }
.o-work[data-rail] .o-explorer__views > .o-explorer__group:first-child { display: none }
.o-work[data-rail] .o-explorer__foot { gap: 2px }
.o-work[data-rail] .o-explorer__foot .o-explorer__settings { width: var(--w-rail); height: 42px; margin: 0; border-radius: 0 }
.o-work[data-rail] .o-explorer__settings { position: relative }
.o-work[data-rail] .o-explorer__settings[aria-current="page"] { background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--blue) }
.o-work[data-rail] .o-explorer__settings[aria-current="page"]::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; border-radius: 0 2px 2px 0; background: var(--blue) }
/* The header (stage 2): pickers | back, forward and the search field, centred | outline toggle,
   Help, panel buttons and the bell. Back and forward stay disabled until there is a step to take
   (ui.js); their tip names where they lead. */
.o-work__header { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); column-gap: 8px }
.o-work__header > .o-work__actions { justify-self: end }
.o-work__center { display: flex; align-items: center; gap: 2px }
.o-work__center .o-iconbtn:disabled { opacity: .4; cursor: default }
/* Loading (W50): while a step is slow (html[data-o-loading], ui.js) the rail's logo stands up: 2 px
   larger (28 → 30), lifted a pixel, with a mint glow that pulses about once a second. Under reduced
   motion it stands up with a steady glow. */
@keyframes o-logo-glow {
  0%, 100% { box-shadow: 0 2px 5px -2px rgba(var(--shadow-rgb),.35), 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent) }
  50% { box-shadow: 0 4px 9px -3px rgba(var(--shadow-rgb),.45), 0 0 9px 2px color-mix(in srgb, var(--green) 55%, transparent) }
}
.o-explorer__brand img { transition: transform var(--dur-fast, .15s) ease }
:root[data-o-loading] .o-explorer__brand img { transform: translateY(-1px) scale(1.0715); animation: o-logo-glow 1.1s ease-in-out infinite }
@media (prefers-reduced-motion: reduce) {
  .o-explorer__brand img { transition: none }
  :root[data-o-loading] .o-explorer__brand img { animation: none; box-shadow: 0 0 8px 1px color-mix(in srgb, var(--green) 45%, transparent) }
}
.o-wbsearch { display: flex; align-items: center; gap: 8px; width: clamp(200px, 30vw, 440px); height: 28px; margin-left: 6px; padding: 0 10px; box-sizing: border-box;
  border: .5px solid var(--line-strong); border-radius: var(--radius-field); background: var(--surface-field); color: var(--fg-3); font: inherit; font-size: var(--text-caption); cursor: pointer }
.o-wbsearch:hover { background: var(--surface-field-focus); color: var(--fg-2) }
.o-wbsearch:focus-visible { outline: var(--focus-outline); outline-offset: 1px }
.o-wbsearch .ti { font-size: 15px }
.o-wbsearch__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left }
.o-wbsearch .o-explorer__kbd { font-family: var(--font-mono); font-size: 11px }
.o-work__outlinebtn[aria-expanded="true"] { color: var(--blue) }
.o-notifs { width: min(360px, calc(100vw - 24px)) }
.o-notifs__empty { margin: 0; padding: 8px 12px 12px; font-size: var(--text-caption); line-height: 1.45; color: var(--fg-3) }
/* The bell's list (W55): one row per notification, newest first, a dot while unread; the list
   scrolls inside the popover; Mark all read at its foot. The badge counts what is unread. */
.o-notifs [data-notifs-list] { max-height: min(420px, calc(100vh - 140px)); overflow: auto }
.o-notifs__list { margin: 0; padding: 2px 4px 4px; list-style: none; display: flex; flex-direction: column; gap: 2px }
.o-notif { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: var(--radius-option); color: var(--fg); text-decoration: none }
.o-notif:hover, .o-notif:focus-visible { background: rgba(var(--mute-rgb),.075) }
.o-notif__dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: transparent }
.o-notif[data-unread] .o-notif__dot { background: var(--blue) }
.o-notif__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-body-sm); line-height: 1.4 }
.o-notif__body > b { font-weight: var(--weight-medium); overflow-wrap: anywhere }
.o-notif__body > span { color: var(--fg-2); overflow-wrap: anywhere }
.o-notif__body > .o-notif__when { font-size: var(--text-micro); color: var(--fg-3) }
.o-notifs__foot { display: flex; justify-content: space-between; padding: 4px 8px 8px; border-top: .5px solid var(--line) }
.o-notifs--page { width: auto; max-width: 640px; margin: 24px auto; padding: 0 16px }
.o-bell { position: relative }
.o-bell__count { position: absolute; top: 3px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; font-size: 10px; line-height: 15px;
  font-weight: var(--weight-medium); text-align: center; color: #fff; background: var(--danger); box-shadow: 0 0 0 2px var(--surface-bar, var(--bg)); pointer-events: none }

/* The Interface view (specs/workbench §8, W58): a storyboard of screens per
   use case (.o-screens, .o-screen), component cards (.o-compcard) and the
   design system's tokens (.o-tokens), on the canvas's ground. */
.o-interface { display: flex; flex-direction: column; gap: 18px; padding: 0 0 28px; max-width: 1200px }
.o-interface__counts { margin: 0; font-size: var(--text-body-sm); color: var(--fg-3) }
.o-interface__empty { display: grid; gap: 10px; justify-items: start }
.o-screens { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-screens__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.o-screens__title { margin: 0; font-size: 14px; font-weight: 500 }
.o-screens__title a { color: inherit; text-decoration: none }
.o-screens__title a:hover { color: var(--blue) }
.o-screens__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.o-screens__step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 10px; align-items: start }
.o-screens__num { grid-row: span 2; width: 22px; height: 22px; border-radius: 11px; display: grid; place-content: center; font: 500 12px/1 var(--font-mono); color: var(--fg-2); background: var(--wash) }
.o-screens__step[data-has-screen] .o-screens__num { color: var(--blue); background: var(--blue-tint) }
.o-screens__text { font-size: var(--text-body-sm); line-height: 22px; color: var(--fg-2) }
.o-screens__cards { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px }
.o-screens__cards:empty { display: none }
.o-screens__cards--wrap { flex-wrap: wrap; overflow: visible }
.o-screen { flex: none; width: 240px; max-width: 100%; display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: var(--radius-card); background: var(--map-card); box-shadow: var(--shadow-card) }
.o-screen[aria-current="page"] { box-shadow: var(--shadow-card), 0 0 0 2px var(--blue) }
.o-screen__name { font-weight: 500; color: var(--fg); text-decoration: none; overflow-wrap: anywhere }
.o-screen__name:hover { color: var(--blue) }
.o-screen__page { font: 12px/1.4 var(--font-mono); color: var(--fg-3); overflow-wrap: anywhere }
.o-screen__page[data-missing] { color: var(--amber-ink, var(--orange)); text-decoration: line-through }
.o-screen__chips { display: flex; flex-wrap: wrap; gap: 4px }
.o-screen__chips .o-tag { font-family: var(--font-mono) }
.o-screen__uses { font-size: 12px; color: var(--fg-3) }
.o-screen__run { justify-self: start }
.o-sites { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-sites .o-eyebrow { margin: 0 }
.o-sites__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.o-sites__row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-height: 34px }
.o-sites__address { min-width: 0; color: var(--blue); text-decoration: none; overflow-wrap: anywhere }
.o-sites__address code { font: 13px/1.4 var(--font-mono) }
.o-sites__meta { font: 12px/1.4 var(--font-mono); color: var(--fg-3) }
.o-sites__acts { margin-left: auto; display: flex; align-items: center; gap: 4px }
.o-sites__acts form { margin: 0 }
.o-sites__publish { display: flex; align-items: flex-end; gap: 10px 14px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line) }
.o-sites__publish .o-hint { flex-basis: 100% }
.o-sites__name { min-width: 0; flex: 1 1 320px }
.o-sites__prefixed { display: flex; align-items: center; gap: 2px; min-width: 0 }
.o-sites__prefix { flex: none; font: 12.5px/1 var(--font-mono); color: var(--fg-3) }
.o-sites__prefixed .o-input { min-width: 120px; flex: 1; font-family: var(--font-mono) }
.o-gallery { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-gallery__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.o-gallery__head .o-eyebrow { margin: 0 }
.o-gallery__hint { margin: 0; font-size: var(--text-body-sm); line-height: 1.45; color: var(--fg-2) }
.o-gallery__frame { display: block; width: 100%; height: min(72vh, 760px); border: 0; border-radius: 12px; background: var(--map-card); box-shadow: inset 0 0 0 1px var(--line) }
.o-compcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px }
.o-compcard { min-width: 0; display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: var(--radius-card); background: var(--map-card); box-shadow: var(--shadow-card) }
.o-compcard[aria-current="page"] { box-shadow: var(--shadow-card), 0 0 0 2px var(--blue) }
.o-compcard__preview { height: 120px; border-radius: 10px; background: var(--map-ground); display: grid; place-content: center; overflow: hidden; color: var(--fg-4); font-size: 28px }
.o-compcard__preview img { max-width: 100%; max-height: 120px; object-fit: contain; display: block }
.o-compcard__name { font-weight: 500; color: var(--fg); text-decoration: none }
.o-compcard__name:hover { color: var(--blue) }
.o-compcard__desc { margin: 0; font-size: var(--text-body-sm); line-height: 1.45; color: var(--fg-2) }
.o-compcard__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-3) }
.o-compcard__row b { font-weight: 500; margin-right: 2px }
.o-compcard__row code { font: 12px/1.4 var(--font-mono); color: var(--fg-2); overflow-wrap: anywhere }
.o-compcard__used { font-size: 12px; color: var(--fg-3) }
.o-compcard__used a { color: var(--blue) }
.o-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: start }
.o-tokens__group { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-tokens__group .o-eyebrow { margin: 0 }
.o-tokens__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.o-tokens__item { display: flex; align-items: center; gap: 10px; min-height: 30px }
.o-tokens__swatch, .o-tokens__corner { flex: none; width: 28px; height: 28px }
.o-tokens__swatch rect { stroke: var(--line-strong) }
.o-tokens__nofill { fill: var(--wash); stroke-dasharray: 3 2 }
.o-tokens__corner rect { fill: var(--blue-tint); stroke: var(--blue) }
.o-tokens__bar { flex: none; max-width: 160px }
.o-tokens__bar rect { fill: var(--blue) }
.o-tokens__name { flex: 1; display: grid; min-width: 0 }
.o-tokens__name code { font: 500 12px/1.4 var(--font-mono); color: var(--fg); overflow-wrap: anywhere }
.o-tokens__value { font: 12px/1.4 var(--font-mono); color: var(--fg-3); overflow-wrap: anywhere }
@media (max-width: 640px) { .o-screen { width: 210px } }
/* The outline's width (W38): --outline-custom on <html> (ui.js, reveal.js), any width its grip
   leaves (180–480 px), or --w-outline by default. Folded, it is a strip without a grip. */
.o-work > .o-viewnav { --viewnav-w: var(--outline-custom, var(--w-outline)); position: relative;
  transition-property: none } /* the width follows the grip at once: reduced motion's .01 ms would leave a released drag one step behind for a frame */
.o-viewnav__grip { position: absolute; z-index: 2; top: 0; bottom: 0; right: 0; width: 6px; cursor: col-resize; touch-action: none }
.o-viewnav__grip::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: transparent; transition: background var(--dur-fast) ease }
.o-viewnav__grip:hover::after, .o-viewnav[data-dragging] .o-viewnav__grip::after { background: var(--blue) }
.o-viewnav__grip:focus-visible { outline: none }
.o-viewnav__grip:focus-visible::after { width: 2px; background: var(--blue) }
.o-viewnav[data-closed] .o-viewnav__grip { display: none }
.o-viewnav[data-dragging] { user-select: none }
/* The use cases' outline: a name on one line, cut with "…"; its whole name is the row's tip (W37). */
.o-viewnav[data-viewnav="usecases"] .o-tree__name { display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; line-clamp: unset }
/* W45: a view without tools has no tools row (the phone keeps it for the outline's button); a view
   that does not go deeper than its first level has no breadcrumb. */
.o-work__content-header[data-no-tools] { display: none }
.o-work__breadcrumbs[hidden] { display: none }
/* The Story form (.o-story, specs/workbench §3, W7): a view's content as text in order, on a card on
   the canvas's ground; paragraphs at 14px with a 1.65 line height, at most 68 characters wide.
   Names in bold open their item; __lines is an ordered list (interactions, a flow's blocks). */
.o-story { box-sizing: border-box; width: 100%; max-width: calc(68ch + 64px); margin: 0 auto; padding: 28px 32px 34px; border-radius: 16px;
  background: var(--surface-solid); box-shadow: var(--shadow-raised); color: var(--fg) }
.o-story__head { margin-bottom: 6px }
.o-story__title { margin: 0; font-size: 22px; font-weight: var(--weight-regular); line-height: 1.3; text-wrap: balance }
.o-story__lead, .o-story__para, .o-story__lines, .o-story__empty { font-size: 14px; line-height: 1.65; max-width: 68ch }
.o-story__lead { margin: 8px 0 0; color: var(--fg-2) }
.o-story__empty { margin: 18px 0 0; color: var(--fg-3) }
.o-story__section { margin-top: 26px }
.o-story__heading { margin: 0 0 4px; font-size: 14px; font-weight: var(--weight-medium); letter-spacing: .01em }
.o-root .o-story__heading a, .o-story__heading a { color: var(--fg); text-decoration: none }
.o-story__heading a:hover, .o-root a.o-story__name:hover { text-decoration: underline; text-underline-offset: 2px }
.o-story__sub { margin: 0 0 8px; font-size: var(--text-nano); color: var(--fg-3) }
.o-story__para { margin: 0 0 10px }
.o-root a.o-story__name, .o-story__name { font-weight: var(--weight-semibold); color: var(--fg); text-decoration: none }
.o-story__lines { margin: 4px 0 0; padding-left: 26px }
.o-story__lines > li { padding-left: 2px; margin-bottom: 4px }
.o-story__lines > li::marker { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3) }
/* The suggested product map and the agent's prompts on Settings (.o-suggest, .o-prompt, W53): a
   checklist card; the suggestion's items with their use cases as tags; a prompt in Fira Code with
   Copy and the line that says where to paste it. */
.o-suggest { max-width: none; margin: 12px 16px 4px; display: grid; gap: 10px }
.o-suggest__lead, .o-suggest__left { margin: 0; font-size: var(--text-body-sm); color: var(--fg-2); max-width: 72ch }
.o-suggest__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.o-suggest__item { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; font-size: var(--text-body-sm) }
.o-suggest__ucs { display: flex; flex-wrap: wrap; gap: 4px }
.o-prompt { display: grid; gap: 6px }
.o-prompt__head { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.o-prompt__text { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--wash); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; font-variant-ligatures: none; color: var(--fg) }
.o-prompt__hint { margin: 0; font-size: var(--text-caption); color: var(--fg-3) }
@container page (max-width: 560px) { .o-suggest__item { grid-template-columns: minmax(0, 1fr) } }
/* The Overview's progress card (.o-progresscard, W52): rows of a name (items indented by depth), the
   use cases it holds, a readiness bar and its percent in mono; releases carry their state tag. */
.o-progresscard { margin-top: 16px; max-width: none }
.o-progresscard__sub { margin-top: 16px }
.o-progresscard__rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px }
.o-progresscard__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(60px, 120px) 40px; align-items: center; gap: 10px; min-height: 30px; padding: 2px 6px }
.o-progresscard__row[data-depth="1"] .o-progresscard__name { padding-left: 14px } .o-progresscard__row[data-depth="2"] .o-progresscard__name { padding-left: 28px }
.o-progresscard__row[data-depth="3"] .o-progresscard__name { padding-left: 42px }
.o-progresscard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-body-sm); font-weight: var(--weight-medium) }
.o-progresscard__row[data-depth]:not([data-depth="0"]) .o-progresscard__name { font-weight: var(--weight-regular) }
.o-progresscard__release { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px }
.o-progresscard__count { font-size: var(--text-caption); color: var(--fg-3); white-space: nowrap }
.o-progresscard__pct { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); text-align: right }
.o-progresscard__none { margin: 6px 0 8px; font-size: var(--text-body-sm); color: var(--fg-2); max-width: 60ch }
.o-progresscard__unassigned { display: inline-block; margin-top: 8px; font-size: var(--text-caption) }
.o-setup__note { color: var(--amber-ink, var(--orange)) }
/* The use case's product item (.o-ucitem, W52): its eyebrow, the item's path, and for editors a
   picker that moves it under another item. */
.o-ucitem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 2px; font-size: var(--text-body-sm) }
.o-ucitem__path { font-weight: var(--weight-medium) }
.o-ucitem__none { color: var(--fg-3) }
.o-ucitem__move { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap }
.o-ucitem__move .o-eyebrow { margin: 0 }
.o-ucitem__move select { max-width: 260px }
/* A field that saves on change (.o-busyfield, W54): while its form[data-o-busy] is sent, the
   control is disabled, its chevron gives way to a spinner and it dims less than a plain disabled field. */
.o-busyfield { position: relative; display: inline-flex; max-width: 100% }
.o-busyfield__spin { display: none; position: absolute; top: 50%; right: 10px; margin-top: -8px; font-size: 15px; line-height: 16px; color: var(--fg-3);
  pointer-events: none; animation: spin var(--dur-spin) linear infinite }
form[data-o-sent] .o-busyfield__spin { display: block }
form[data-o-sent] .o-busyfield select.o-input { background-image: none; opacity: .7; cursor: progress }
/* Readiness bar (.o-progress): a track and a blue bar whose width is data-pct (0–100 in tens). */
.o-progress { position: relative; display: block; flex: 1; min-width: 80px; height: 6px; border-radius: 3px; background: var(--wash); overflow: hidden }
.o-progress__bar { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--blue) }
.o-progress__bar[data-pct="10"] { width: 10% } .o-progress__bar[data-pct="20"] { width: 20% } .o-progress__bar[data-pct="30"] { width: 30% }
.o-progress__bar[data-pct="40"] { width: 40% } .o-progress__bar[data-pct="50"] { width: 50% } .o-progress__bar[data-pct="60"] { width: 60% }
.o-progress__bar[data-pct="70"] { width: 70% } .o-progress__bar[data-pct="80"] { width: 80% } .o-progress__bar[data-pct="90"] { width: 90% }
.o-progress__bar[data-pct="100"] { width: 100%; background: var(--green) }
/* Set up your project (.o-setup, specs/workbench §6, W46): inside the project page's frame, with the
   Overview's pieces: a lead and a meter, then the groups as checklist cards (.o-checklist, eyebrow
   heading) in columns; each step a row like a getting-started item: a round mark (done: green check;
   to do: blue ring; coming: dashed), its title and line, a method tag and Start / Review. */
.o-setup { display: flex; flex-direction: column; gap: 16px }
.o-setup__summary { display: grid; gap: 10px; max-width: 720px; padding: 0 8px }
.o-setup__lead { margin: 0; font-size: var(--text-body-sm); line-height: 1.5; color: var(--fg-2) }
.o-setup__progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.o-setup__progress .o-eyebrow { flex: none }
.o-setup__progress .o-checklist__meter { flex: 1; min-width: 120px; max-width: 320px; margin: 0 }
.o-setup__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start }
.o-setup__group.o-checklist { max-width: none }
.o-setup__group .o-eyebrow { margin: 0 }
.o-setup__steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px }
.o-setup__step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: var(--radius-option) }
.o-setup__step:hover { background: var(--wash-hover) }
.o-setup__mark[data-state="done"] { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); box-shadow: none; font-size: 15px }
.o-setup__mark[data-state="todo"] { box-shadow: inset 0 0 0 1.5px var(--blue) }
.o-setup__mark:is([data-state="soon"], [data-state="v2"], [data-state="later"]) { box-shadow: none; border: 1.5px dashed var(--fg-4); box-sizing: border-box }
.o-setup__step:is([data-state="soon"], [data-state="v2"], [data-state="later"]) .o-checklist__text b { color: var(--fg-2) }
.o-setup__act { display: flex; align-items: center; gap: 8px }
.o-setup__method { flex: none; white-space: nowrap }
.o-setup__step:is([data-state="soon"], [data-state="v2"], [data-state="later"]) .o-setup__method { color: var(--indigo); background: var(--indigo-tint) }
@container page (max-width: 620px) { .o-setup__step { grid-template-columns: 24px minmax(0, 1fr) } .o-setup__act { grid-column: 2 } }
/* Help (.o-help): Methodology (the C4 ladder: four indented rungs, then method cards) and
   Guidelines (grouped, numbered rules). */
.o-help { box-sizing: border-box; width: 100%; max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px }
.o-help__title { margin: 0; font-size: 22px; font-weight: var(--weight-regular) }
.o-help__lead, .o-help__para { max-width: 68ch; font-size: 14px; line-height: 1.65; color: var(--fg-2); margin: 6px 0 0 }
.o-help__head .o-seg { margin-top: 14px }
.o-help__section { padding: 20px 22px; border-radius: 16px; background: var(--surface-solid); box-shadow: var(--shadow-raised); scroll-margin-top: 16px }
.o-help__heading { margin: 0 0 8px; font-size: 18px; font-weight: var(--weight-regular) }
.o-help__sub { margin: 18px 0 4px; font-size: 14px; font-weight: var(--weight-medium) }
.o-help__ladder { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px }
.o-help__rung { display: grid; grid-template-columns: minmax(150px, 190px) minmax(140px, 200px) minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 9px 12px; border-radius: 10px; background: var(--wash) }
.o-help__rung[data-depth="1"] { margin-left: 18px } .o-help__rung[data-depth="2"] { margin-left: 36px } .o-help__rung[data-depth="3"] { margin-left: 54px }
.o-help__level { font-size: 13px; font-weight: var(--weight-medium) }
.o-help__layer { font-family: var(--font-mono); font-size: 12px; color: var(--blue) }
.o-help__rungtext { font-size: 13px; line-height: 1.5; color: var(--fg-2) }
.o-help__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: 18px }
.o-help__card { padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 .5px var(--line-strong) }
.o-help__cardtitle { margin: 0; font-size: 14px; font-weight: var(--weight-medium) }
.o-help__card .o-help__para { font-size: 13px; line-height: 1.55 }
.o-help__where { margin: 8px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3) }
.o-help__rules { margin: 4px 0 0; padding-left: 24px; font-size: 14px; line-height: 1.6; max-width: 68ch }
.o-help__rules > li { margin-bottom: 4px }
.o-help__rules > li::marker { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3) }
@container page (max-width: 620px) { .o-help__rung { grid-template-columns: minmax(0, 1fr) } .o-help__rung[data-depth] { margin-left: 0 } }
/* Find in the outline: rows that don't match hide; a match inside a folded row still shows. */
.o-outline__find { flex: none; display: flex; align-items: center; gap: 6px; margin: 0 6px 8px; color: var(--fg-3) }
.o-outline__find .o-input { flex: 1; min-width: 0 }
.o-outline__none { flex: none; margin: 0 10px 8px; font-size: var(--text-caption); color: var(--fg-3) }
.o-root .o-viewnav :is(.o-tree__row, .o-tree__section)[data-o-find-hide] { display: none }
.o-root .o-viewnav .o-tree__row[data-o-find-show][hidden] { display: flex }
/* The agent panel's width (W6, W35): --panel-custom on <html> (ui.js, reveal.js), any width the grip
   leaves, or --w-agent-1 by default; the head's buttons set the three presets. From 680 px
   (html[data-panel-wide]) the outline hides. */
.o-root.o-work { --panel-w: min(var(--panel-custom, var(--w-agent-1)), calc(100% - 24px)); --panel-px: var(--panel-custom, var(--w-agent-1)) }
/* --panel-px is the panel's width as a plain length, for paddings: a percentage inside --panel-w would
   resolve against another box there. ui.js keeps it within the window. */
:root[data-panel-wide] .o-work:has(> .o-desk[data-panel]) > .o-viewnav { display: none }
.o-sidepanel[data-dragging] { transition: none; user-select: none }
.o-sidepanel__grip { position: absolute; z-index: 2; top: 0; bottom: 0; left: -3px; width: 7px; cursor: col-resize; touch-action: none }
.o-sidepanel__grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: transparent; transition: background var(--dur-fast) ease }
.o-sidepanel__grip:hover::after, .o-sidepanel[data-dragging] .o-sidepanel__grip::after { background: var(--blue) }
.o-sidepanel__grip:focus-visible { outline: none }
.o-sidepanel__grip:focus-visible::after { width: 2px; background: var(--blue) }
.o-sidepanel__widths { flex: none }
.o-sidepanel__widths .o-seg__opt { width: 26px; padding: 0; justify-content: center }
/* Each width's glyph: a window whose right part (the panel) grows with the width. */
.o-sidepanel__bars { --fill: 3px; display: block; width: 15px; height: 11px; border: 1.5px solid currentColor; border-radius: 2px; box-sizing: border-box;
  background: linear-gradient(to left, currentColor var(--fill), transparent var(--fill)) }
.o-sidepanel__bars[data-w="2"] { --fill: 6px } .o-sidepanel__bars[data-w="3"] { --fill: 9px }

/* Work (specs/work §10): the Tasks board, a task's page and the drawn spec. A board column per
   stage; the stages of this slice are full, the later ones muted. Cards carry the number, kind,
   title, the stage owner, criteria met (a bar) and what the changeset adds and changes. */
.o-taskboard__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px }
.o-taskboard__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-taskboard__col:not([data-live]) { opacity: .62 }
.o-taskboard__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline }
.o-taskboard__head h2 { margin: 0; font-size: var(--text-body); font-weight: var(--weight-semibold) }
.o-taskboard__count { font-size: var(--text-caption); color: var(--fg-3); font-variant-numeric: tabular-nums }
.o-taskboard__role { grid-column: 1 / -1; font-size: var(--text-caption); color: var(--fg-3) }
.o-taskboard__none { margin: 0; font-size: var(--text-caption); color: var(--fg-3) }
.o-taskcard { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--map-card); color: var(--fg); text-decoration: none;
  border: 1px solid var(--map-border); transition: box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease }
.o-taskcard:hover { border-color: var(--blue); box-shadow: 0 6px 18px -12px rgba(var(--shadow-rgb),.5) }
.o-taskcard:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 1px }
.o-taskcard__top { display: flex; align-items: center; gap: 6px; min-width: 0 }
.o-taskcard__ref, .o-task__ref, .o-crit__id { font-family: var(--font-mono); font-size: 12.5px; color: var(--blue); font-variant-ligatures: none }
.o-taskcard__changes { display: inline-flex; gap: 4px; margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3) }
.o-taskcard__changes [data-change="added"] { color: var(--green) } .o-taskcard__changes [data-change="changed"] { color: var(--amber-ink) }
.o-taskcard__changes [data-change="removed"] { color: var(--danger) }
.o-taskcard__title { font-size: var(--text-body-sm); font-weight: var(--weight-medium); line-height: 1.35; overflow-wrap: anywhere }
.o-taskcard__foot { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-caption); color: var(--fg-3) }
.o-taskcard__owner { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-taskcard__bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--wash) }
.o-taskcard__bar::-webkit-meter-bar { height: 4px; border: 0; border-radius: 2px; background: var(--wash) }
.o-taskcard__bar::-webkit-meter-optimum-value { border-radius: 2px; background: var(--green) }
.o-taskcard__bar::-moz-meter-bar { border-radius: 2px; background: var(--green) }
.o-taskcard__ready { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-caption); color: var(--green) }
.o-tag[data-kind="feature"] { --tone: var(--indigo); --tone-tint: var(--indigo-tint) }
.o-tag[data-kind="fix"] { --tone: var(--amber-ink); --tone-tint: var(--amber-tint) }
.o-tag[data-change="added"] { --tone: var(--green); --tone-tint: var(--green-tint) }
.o-tag[data-change="changed"] { --tone: var(--amber-ink); --tone-tint: var(--amber-tint) }
.o-tag[data-change="removed"] { --tone: var(--danger); --tone-tint: var(--danger-tint) }
.o-tag[data-tone="danger"] { --tone: var(--danger); --tone-tint: var(--danger-tint) }
.o-tasknew { max-width: 720px }
.o-tasknew__title, .o-task__title { margin: 0; font-size: var(--text-title); font-weight: var(--weight-semibold); line-height: 1.25; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere }
.o-tasknew__kind { display: flex; gap: 14px; border: 0; padding: 0; margin: 0 }
/* A task: its header (number, kind, base revision, title) and the stages as steps, then tabs. */
.o-task { gap: 12px }
.o-task__head { display: flex; flex-direction: column; gap: 8px }
.o-task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 }
.o-task__titleform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.o-task__titleform .o-input { flex: 1 1 260px }
.o-task__steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 4px 0 0; padding: 0; list-style: none }
.o-task__step { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 3px solid var(--line-strong); min-width: 0 }
.o-task__step[data-state="done"] { border-top-color: var(--green) }
.o-task__step[data-state="current"] { border-top-color: var(--blue) }
.o-task__step[data-state="later"] { opacity: .55 }
.o-task__stepname { font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--fg-2) }
.o-task__step[data-state="current"] .o-task__stepname { color: var(--blue) }
.o-task__stepowner { font-size: var(--text-micro); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-task__tabs { overflow-x: auto; scrollbar-width: none }
.o-task__tabs .o-tabs__tab { white-space: nowrap; text-decoration: none }
.o-task__tabs .o-tabs__tab[aria-disabled="true"] { cursor: default; color: var(--fg-3) }
.o-task__later { margin-left: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--indigo) }
.o-task__body { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.o-task__links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 }
.o-task__base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.o-task__base > span { flex: 1 1 220px }
.o-task__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.o-task__tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-task__tile b { font-size: var(--text-title); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums }
.o-task__tile span { font-size: var(--text-caption); color: var(--fg-3) }
.o-task__tile[data-tone="amber"] b { color: var(--amber-ink) }
.o-task__touch { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0 }
.o-task__touchrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: baseline }
.o-task__touchrow dt { font-size: var(--text-caption); color: var(--fg-3) }
.o-task__touchrow dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 }
.o-task__moves { margin: 4px 0 0; padding-left: 20px; font-size: var(--text-body-sm) }
.o-task__items td, .o-task__items th { vertical-align: middle }
.o-task__fromdraft { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px }
.o-task__json summary, .o-spec__upload summary, .o-tasknotes__more summary { cursor: pointer; font-size: var(--text-body-sm); color: var(--blue) }
.o-task__json form, .o-spec__upload form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px }
.o-task__conflicts ul { margin: 0 0 8px; padding-left: 20px }
.o-task__activity { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none }
.o-task__event { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: .5px solid var(--line) }
.o-task__when { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3) }
.o-task__what { font-size: var(--text-body-sm); overflow-wrap: anywhere }
.o-task__what b[data-agent] { color: var(--indigo) }
.o-task__comment { display: block; margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--wash); white-space: pre-wrap }
@container page (max-width: 620px) {
  .o-task__steps { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .o-task__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .o-task__touchrow, .o-task__event { grid-template-columns: minmax(0, 1fr) }
}
/* An acceptance criterion: AC-n, its text, how it is checked and its state (open, reported by an
   agent in indigo, confirmed by a person in green, sent back in red), then its evidence. */
.o-crits { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none }
.o-crit { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--map-card); border: 1px solid var(--map-border) }
.o-crit:target { outline: 2.5px solid var(--blue); outline-offset: 1px }
.o-crit__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px }
.o-crit__text { flex: 1 1 240px; font-size: var(--text-body-sm); line-height: 1.45; overflow-wrap: anywhere }
.o-crit__state, .o-acref[data-state] { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: var(--text-micro); white-space: nowrap;
  color: var(--fg-2); background: var(--wash) }
.o-crit__state[data-state="reported"], .o-acref[data-state="reported"] { color: var(--indigo); background: var(--indigo-tint) }
.o-crit__state[data-state="confirmed"], .o-acref[data-state="confirmed"] { color: var(--green); background: var(--green-tint) }
.o-crit__state[data-state="rejected"], .o-acref[data-state="rejected"] { color: var(--danger); background: var(--danger-tint) }
.o-crit__edit { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.o-crit__edit .o-input { flex: 1 1 240px }
.o-crit__evidence { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: var(--text-caption); color: var(--fg-3) }
.o-crit__who[data-agent] { color: var(--indigo) }
.o-crit__ev { display: inline-flex; gap: 4px; align-items: baseline }
.o-crit__ev code { font-family: var(--font-mono); font-size: 12px; padding: 0 5px; border-radius: 4px; background: var(--wash); color: var(--fg-2) }
.o-crit__note { margin: 0; font-size: var(--text-caption); color: var(--fg-2); white-space: pre-wrap }
.o-crit__confirmed { margin: 0; font-size: var(--text-caption); color: var(--green) }
.o-crit__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start }
.o-crit__reject form, .o-crit__report form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px }
.o-crit__reject .o-input, .o-crit__report .o-input { flex: 1 1 200px }
.o-crit__add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.o-crit__add .o-input { flex: 1 1 260px }
/* A reference in a task's text: an item chip (element, use case, decision); an unknown one is dashed. */
.o-refchip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-family: var(--font-mono); font-size: 12px; font-variant-ligatures: none;
  color: var(--blue); background: var(--blue-tint); text-decoration: none; white-space: nowrap; vertical-align: baseline }
.o-refchip[data-ref-kind="decision"] { color: var(--amber-ink); background: var(--amber-tint) }
.o-refchip[data-ref-kind="use_case"] { color: var(--indigo); background: var(--indigo-tint) }
.o-refchip[data-unknown] { color: var(--fg-3); background: none; box-shadow: inset 0 0 0 1px var(--line-strong); text-decoration: line-through }
a.o-refchip:hover { text-decoration: underline }
.o-acref, .o-taskref { font-family: var(--font-mono); font-size: 12.5px; text-decoration: none; font-variant-ligatures: none }
.o-taskref { color: var(--blue) }
.o-acref[data-unknown] { color: var(--fg-3) }
/* The task's right panel: the stage, its owner and what it lacks, the action, the agent's context. */
.o-tasknotes { display: flex; flex-direction: column; gap: 10px }
.o-tasknotes__kv { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: var(--text-body-sm) }
.o-tasknotes__kv dt { color: var(--fg-3) }
.o-tasknotes__kv dd { margin: 0; overflow-wrap: anywhere }
.o-tasknotes__lacks { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--text-body-sm); color: var(--fg-2) }
.o-tasknotes__lacks li { display: flex; gap: 6px; align-items: baseline }
.o-tasknotes__lacks li[data-done] { color: var(--green) }
.o-tasknotes__more form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px }
/* Markdown of a task (problem) and its spec: no raw HTML; tables stay tables; links open outside. */
.o-md { display: flex; flex-direction: column; gap: 10px; font-size: var(--text-body-sm); line-height: 1.6; max-width: 76ch; overflow-wrap: anywhere }
.o-md > * { margin: 0 } .o-md p, .o-md li { margin: 0 }
.o-md ul, .o-md ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px }
.o-md li > ul, .o-md li > ol { margin-top: 4px }
.o-md code { font-family: var(--font-mono); font-size: .92em; padding: 0 4px; border-radius: 4px; background: var(--wash); font-variant-ligatures: none }
.o-md__h { margin: 6px 0 0; font-size: var(--text-body); font-weight: var(--weight-semibold) }
.o-md__code { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--wash); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-x: auto; font-variant-ligatures: none }
.o-md__code code { padding: 0; background: none }
.o-md__table { overflow-x: auto; max-width: 100% }
.o-md__table table { border-collapse: collapse; font-size: var(--text-caption) }
.o-md__table th, .o-md__table td { padding: 6px 10px; border-bottom: .5px solid var(--line); text-align: left; vertical-align: top }
.o-md__table th { font-weight: var(--weight-semibold); color: var(--fg-2) }
.o-md blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--fg-2) }
.o-md hr { border: 0; border-top: .5px solid var(--line) }
/* The drawn spec: each ## section a panel on the canvas ground with its picture, the text folded under it. */
.o-spec { display: flex; flex-direction: column; gap: 12px }
.o-spec__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px }
.o-spec__version { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px }
.o-spec__from { margin: 0 } .o-spec__from code { font-family: var(--font-mono); font-size: 12px }
.o-spec__warnings summary { cursor: pointer } .o-spec__warnings ul { margin: 6px 0 0; padding-left: 20px }
.o-spec__diffbody { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--map-card); border: 1px solid var(--map-border); font-family: var(--font-mono); font-size: 12px;
  line-height: 1.5; white-space: pre-wrap; overflow-x: auto; max-height: 520px; overflow-y: auto }
.o-spec__diffbody [data-op="add"] { color: var(--green); background: var(--green-tint) }
.o-spec__diffbody [data-op="del"] { color: var(--danger); background: var(--danger-tint) }
.o-spec__diffbody [data-op="same"] { color: var(--fg-3) }
.o-spec__difflinks { margin: 0 }
.o-spec__source { margin: 0; padding: 14px 16px; border-radius: var(--radius-section); background: var(--map-card); border: 1px solid var(--map-border); font-family: var(--font-mono);
  font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; font-variant-ligatures: none }
.o-spec__defs { position: absolute; width: 0; height: 0; overflow: hidden }
.o-spec__head path { fill: var(--map-muted) }
.o-spec__head[data-tone="call"] path { fill: var(--blue) } .o-spec__head[data-tone="agent"] path { fill: var(--indigo) }
.o-spec__head[data-tone="good"] path, .o-spec__head[data-tone="new"] path { fill: var(--green) }
.o-spec__head[data-tone="changed"] path { fill: var(--amber) } .o-spec__head[data-tone="bad"] path { fill: var(--danger) }
.o-spec__head[data-tone="reply"] path { fill: var(--blue) }
.o-spec__ground { display: flex; flex-direction: column; gap: 14px; padding: 14px; border-radius: var(--radius-section); background-color: var(--map-ground); background-image: var(--canvas-dots); background-size: 22px 22px }
.o-spec__intro { display: flex; flex-direction: column; gap: 8px; padding: 4px 6px }
.o-spec__title { margin: 0; font-size: var(--text-title); font-weight: var(--weight-semibold) }
.o-spec__commentform { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px } .o-spec__commentform .o-input { flex: 1 1 240px }
.o-specpanel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--map-card); border: 1px solid var(--map-border);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb),.06), 0 10px 24px -18px rgba(var(--shadow-rgb),.35); scroll-margin-top: 80px; min-width: 0 }
.o-specpanel:target { outline: 2.5px solid var(--blue); outline-offset: 2px }
.o-specpanel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px }
.o-specpanel__head h3 { margin: 0; font-size: var(--text-body); font-weight: var(--weight-semibold) }
.o-specpanel__n { font-family: var(--font-mono); font-size: 12.5px; color: var(--blue) }
.o-specpanel__src { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3) }
.o-specpanel__text summary { cursor: pointer; font-size: var(--text-body-sm); color: var(--blue); padding-top: 8px; border-top: .5px solid var(--line) }
.o-specpanel__text[open] summary { margin-bottom: 8px }
.o-specpic { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.o-specpic__scroll { overflow-x: auto; border-radius: 10px; background-color: var(--map-ground); background-image: var(--canvas-dots); background-size: 22px 22px; border: .5px solid var(--map-border) }
.o-specpic__svg { display: block; width: 100%; min-width: 520px; height: auto; font-family: var(--font-mono); font-variant-ligatures: none }
/* On a phone sequences, states and entities keep their labels legible: the picture scrolls inside __scroll. */
@media (max-width: 640px) { .o-specpic__svg:is([data-flow], [data-states], [data-entities]) { min-width: 680px } }
.o-specpic__card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--map-border); background: var(--map-ground); color: var(--fg-2) }
.o-specpic__card > span { display: flex; flex-direction: column; gap: 2px }
.o-specpic__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: var(--text-caption); color: var(--fg-3) }
.o-specpic__legend [data-change="added"] { color: var(--green) } .o-specpic__legend [data-change="changed"] { color: var(--amber-ink) }
.o-specpic__questions { display: flex; flex-direction: column; gap: 8px }
.o-specq { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--map-border); background: var(--map-card) }
.o-specq__mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--orange) 80%, transparent);
  color: color-mix(in srgb, var(--orange) 85%, var(--fg)); font-size: 14px }
.o-specq b { font-size: var(--text-body-sm) } .o-specq p { margin: 4px 0 0; font-size: var(--text-caption); color: var(--fg-2) }
.o-specpic__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px }
.o-spectile { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--map-border); background: var(--map-card) }
.o-spectile__letter { font-size: 22px; line-height: 1; color: var(--blue) }
.o-spectile__key { font-size: var(--text-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3) }
.o-spectile p { margin: 0; font-size: var(--text-caption); line-height: 1.5 }
.o-specpic__releases { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px }
.o-specpic__arrow { display: grid; place-items: center; color: var(--fg-3) }
.o-specrel { flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--map-border); background: var(--map-card) }
.o-specrel p { margin: 0; font-size: var(--text-caption) }
.o-specrel__done { color: var(--fg-2) } .o-specrel__done span { margin-right: 6px; font-family: var(--font-mono); color: var(--green) }
.o-specpic__checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--text-body-sm) }
.o-specpic__checks li { display: flex; gap: 8px; align-items: baseline }
.o-specpic__box { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--map-border) }
.o-specpic__crits { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none }
.o-specpic__crits li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; background: var(--map-ground); font-size: var(--text-caption) }
.o-specpic__crits a { font-family: var(--font-mono); color: var(--blue); text-decoration: none }
/* SVG of the pictures: the map's card colours, Fira Code labels, indigo for agents, green new, amber changed. */
.o-specsvg__sub, .o-specsvg__hint, .o-specsvg__mark, .o-specsvg__n, .o-specsvg__rellabel text { font-size: 10.5px; fill: var(--map-muted) }
.o-specsvg__hint { font-size: 11.5px; font-weight: 500 }
.o-specsvg__name { font-size: 14.5px; font-weight: 500; fill: var(--fg) }
.o-specsvg__label { font-size: 11.5px; fill: var(--fg) }
[data-tone="call"].o-specsvg__hint, [data-tone="call"].o-specsvg__sub { fill: var(--blue) }
[data-tone="agent"].o-specsvg__sub { fill: var(--indigo) } [data-tone="good"].o-specsvg__sub { fill: var(--green) }
[data-tone="changed"].o-specsvg__sub { fill: var(--amber-ink) }
.o-specsvg__stage rect { fill: var(--map-card); stroke: var(--map-border); stroke-width: 1.3; stroke-dasharray: 5 4 }
.o-specsvg__stage { opacity: .55 } .o-specsvg__stage[data-live] { opacity: 1 }
.o-specsvg__stage[data-live] rect { stroke-dasharray: none; stroke: var(--blue); stroke-width: 1.5 }
.o-specsvg__stage[data-done] rect { stroke: var(--green) }
.o-specsvg__stage[data-current] rect { stroke-width: 2.5; fill: color-mix(in srgb, var(--blue) 8%, var(--map-card)) }
.o-specsvg__rule { stroke: var(--map-border); stroke-opacity: .6 }
.o-specsvg__pill { fill: var(--wash); stroke: var(--map-border); stroke-dasharray: 4 3 }
.o-specsvg__line { fill: none; stroke: var(--map-muted); stroke-width: 1.7 }
.o-specsvg__line[data-dashed] { stroke-dasharray: 6 4 }
.o-specsvg__line[data-tone="call"], .o-specsvg__line[data-tone="reply"] { stroke: var(--blue) }
.o-specsvg__line[data-tone="agent"] { stroke: var(--indigo) }
.o-specsvg__line[data-tone="good"], .o-specsvg__line[data-tone="new"] { stroke: var(--green) }
.o-specsvg__line[data-tone="changed"] { stroke: var(--amber) }
.o-specsvg__line[data-tone="plain"] { stroke: var(--indigo); stroke-opacity: .55 }
.o-specsvg__frame { fill: none; stroke: var(--map-border); stroke-dasharray: 7 5 }
.o-specsvg__card rect { fill: var(--map-card); stroke: var(--map-border); stroke-width: 1.3 }
.o-specsvg__card[data-change="added"] rect { fill: var(--green-tint); stroke: var(--green); stroke-width: 2; stroke-dasharray: 6 4 }
.o-specsvg__card[data-change="changed"] rect { fill: var(--amber-tint); stroke: var(--amber); stroke-width: 1.8 }
.o-specsvg__card[data-change="added"] .o-specsvg__mark { fill: var(--green) } .o-specsvg__card[data-change="changed"] .o-specsvg__mark { fill: var(--amber-ink) }
.o-specsvg__card:not([data-change]) { opacity: .78 }
.o-specsvg__dot { fill: var(--blue) }
.o-specsvg__lifeline { stroke: var(--map-border); stroke-dasharray: 3 4 }
.o-specsvg__lane rect { fill: var(--map-card); stroke: var(--map-border); stroke-width: 1.4 }
.o-specsvg__lane[data-agent] rect { stroke: var(--indigo) } .o-specsvg__lane[data-agent] text { fill: var(--indigo) }
.o-specsvg__lane[data-ref] rect { fill: color-mix(in srgb, var(--blue) 6%, var(--map-card)) }
.o-specsvg__msg circle { fill: var(--map-card); stroke: var(--blue) }
.o-specsvg__msg[data-tone="agent"] circle { stroke: var(--indigo) } .o-specsvg__msg[data-tone="agent"] .o-specsvg__n { fill: var(--indigo) }
.o-specsvg__n { font-size: 9.5px; fill: var(--blue) }
.o-specsvg__start { fill: var(--fg) } .o-specsvg__end { fill: none; stroke: var(--fg); stroke-width: 3 }
.o-specsvg__state rect { fill: var(--map-card); stroke: var(--map-muted); stroke-width: 2 }
.o-specsvg__state text { font-size: 13.5px; font-weight: 500; fill: var(--map-muted) }
.o-specsvg__state[data-tone="good"] rect { stroke: var(--green) } .o-specsvg__state[data-tone="good"] text { fill: var(--green) }
.o-specsvg__state[data-tone="agent"] rect { stroke: var(--indigo) } .o-specsvg__state[data-tone="agent"] text { fill: var(--indigo) }
.o-specsvg__state[data-tone="bad"] rect { stroke: var(--danger) } .o-specsvg__state[data-tone="bad"] text { fill: var(--danger) }
.o-specsvg__rel { stroke: var(--map-border); stroke-width: 1.4 } .o-specsvg__rel[data-dashed] { stroke-dasharray: 5 4 }
.o-specsvg__rellabel rect { fill: var(--map-ground) }
.o-specsvg__leader { stroke: var(--map-muted); stroke-width: 1; stroke-dasharray: 2 3 } .o-specsvg__leaddot { fill: var(--map-muted) }
.o-specsvg__tag rect { fill: var(--map-ground); stroke: var(--map-border); stroke-width: .6 }
.o-specsvg__entity rect { fill: var(--map-card); stroke: var(--map-border); stroke-width: 1.4 }
.o-specsvg__entity[data-later] { opacity: .62 }
.o-specsvg__entity[data-hub] rect { fill: var(--map-featured); stroke: var(--map-featured) }
.o-specsvg__entity[data-hub] text { fill: var(--map-on-featured) }
/* ---------- Sketch (specs/work §6, release 1b; T43) ----------
   A free drawing on the map's canvas, archide.sketch/v1, as a workspace view like the map: .o-sketch
   is the desk's .o-work__canvas, its .o-map.o-sketch__canvas (the map's camera, foot and hint) the
   whole ground. Its tools sit in the shell's tools row (.o-sketch__bar in #desk-tools: the
   .o-sketch__tools groups of .o-iconbtn, the .o-sketch__actions status and Save at the row's end
   before the zoom); its Source form ([data-mode="source"], the Diagram / Source switch) lays an
   .o-story card with the document over the canvas, which keeps its size and camera underneath.
   .o-sketchsvg draws the shapes and lines the same way in the editor and in a spec's panel: a shape is
   g.o-sketchsvg__shape[data-kind] (box, rounded, person, store, note, frame, text) with a .o-sketchsvg__body,
   its .o-sketchsvg__text lines and a .o-sketchsvg__sub reference; [data-missing] marks a reference to
   nothing, [data-selected] the selection. A line is g.o-sketchsvg__line with a wide .o-sketchsvg__hit, the
   .o-sketchsvg__stroke ([data-dashed]) and a .o-sketchsvg__label. */
.o-desk__tools > .o-sketch__bar { flex: 1 0 auto; display: flex; align-items: center; gap: 6px; min-width: 0 }
.o-sketch__tools { display: inline-flex; align-items: center; gap: 2px }
.o-sketch__tools .o-iconbtn:disabled { opacity: .38; cursor: default; background: none }
.o-sketch__actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 8px; min-width: 0 }
.o-sketch__actions ~ .o-zoomtools, .o-sketch__bar ~ .o-zoomtools { margin-left: 0 }
.o-sketch__status { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); color: var(--fg-3) }
.o-sketch__status[data-state="dirty"] { color: var(--amber-ink) } .o-sketch__status[data-state="failed"] { color: var(--danger) }
.o-sketch__status[data-state="saved"] { color: var(--green) }
.o-map.o-sketch__canvas:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: -2px }
.o-sketch[data-editable] .o-sketch__canvas[data-tool]:not([data-tool="select"]) > svg { cursor: crosshair }
.o-sketch__empty { position: absolute; top: 40%; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); padding: 6px 12px; border-radius: 8px;
  background: var(--surface-raised); color: var(--fg-3); font-family: var(--font-sans); font-size: var(--text-caption); pointer-events: none; text-align: center }
.o-desk[data-panel] .o-sketch__empty { right: var(--panel-w) }
.o-sketch[data-mode="source"] > .o-sketch__canvas { visibility: hidden }
.o-sketch__sourcepane { position: absolute; inset: 0; z-index: 3; overflow: auto; padding: 24px 16px 40px; box-sizing: border-box }
.o-sketch__sourcepane[hidden] { display: none }
.o-desk[data-panel] .o-sketch__sourcepane { padding-right: calc(var(--panel-px, var(--panel-w)) + 16px) }
.o-sketch__source.o-story { max-width: 920px }
.o-sketch__form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px }
.o-sketch__source textarea { display: block; width: 100%; box-sizing: border-box; min-height: 52dvh; margin-top: 16px; resize: vertical; font-size: 12px; line-height: 1.5; tab-size: 2 }
.o-sketch__form textarea { margin-top: 0 }
.o-sketch__formfoot { display: flex; justify-content: flex-end }
.o-sketchsvg { font-family: var(--font-mono); font-variant-ligatures: none }
.o-sketchsvg__body { fill: var(--map-card); stroke: var(--map-border); stroke-width: 1.4 }
.o-sketchsvg__shape[data-kind="person"] .o-sketchsvg__body { fill: color-mix(in srgb, var(--blue) 5%, var(--map-card)) }
.o-sketchsvg__shape[data-kind="store"] .o-sketchsvg__body { fill: color-mix(in srgb, var(--green) 6%, var(--map-card)) }
.o-sketchsvg__rim { fill: none; stroke: var(--map-border); stroke-width: 1.4 }
.o-sketchsvg__shape[data-kind="note"] .o-sketchsvg__body { fill: var(--amber-tint); stroke: var(--amber) }
.o-sketchsvg__fold { fill: none; stroke: var(--amber); stroke-width: 1.2 }
.o-sketchsvg__shape[data-kind="frame"] .o-sketchsvg__body { fill: color-mix(in srgb, var(--map-muted) 4%, transparent); stroke: var(--map-muted); stroke-dasharray: 7 5 }
.o-sketchsvg__shape[data-kind="text"] .o-sketchsvg__body { fill: transparent; stroke: none }
.o-sketchsvg__glyph { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round }
.o-sketchsvg__text { font-size: 12.5px; fill: var(--fg) }
.o-sketchsvg__shape[data-kind="text"] .o-sketchsvg__text { font-size: 13.5px }
.o-sketchsvg__shape[data-kind="frame"] .o-sketchsvg__text { fill: var(--fg-2); font-weight: var(--weight-medium) }
.o-sketchsvg__sub { font-size: 10.5px; fill: var(--map-muted) }
.o-sketchsvg__shape[data-ref] .o-sketchsvg__body { stroke: color-mix(in srgb, var(--blue) 55%, var(--map-border)) }
.o-sketchsvg__shape[data-missing] .o-sketchsvg__body { stroke: var(--danger); stroke-dasharray: 5 3 }
.o-sketchsvg__shape[data-missing] .o-sketchsvg__sub { fill: var(--danger) }
.o-sketchsvg__line { color: var(--indigo) }
.o-sketchsvg__stroke { stroke: var(--indigo); stroke-width: 1.6; fill: none }
.o-sketchsvg__line[data-dashed] .o-sketchsvg__stroke { stroke-dasharray: 6 4 }
.o-sketchsvg__hit { stroke: transparent; stroke-width: 14; fill: none }
.o-sketchsvg__label { font-size: 11px; fill: var(--map-muted); paint-order: stroke; stroke: var(--map-ground); stroke-width: 4px; stroke-linejoin: round }
.o-sketchsvg__head path { fill: var(--indigo) }
.o-sketchsvg__link { cursor: pointer }
.o-sketchsvg__link:hover .o-sketchsvg__body, .o-sketchsvg__link:focus-visible .o-sketchsvg__body { stroke: var(--blue); stroke-width: 2 }
.o-sketch[data-editable] .o-sketchsvg__shape, .o-sketch[data-editable] .o-sketchsvg__line { cursor: move }
.o-sketchsvg__shape:focus { outline: none }
.o-sketchsvg__shape:focus-visible .o-sketchsvg__body { stroke: var(--focus-outline); stroke-width: 2.5 }
.o-sketchsvg__shape[data-selected] .o-sketchsvg__body { stroke: var(--blue); stroke-width: 2.2 }
.o-sketchsvg__line[data-selected] .o-sketchsvg__stroke { stroke: var(--blue); stroke-width: 2.4 }
.o-sketchsvg__handle { fill: var(--map-card); stroke: var(--blue); stroke-width: 1.5; cursor: nwse-resize }
.o-sketchsvg__draft { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; pointer-events: none }
.o-specpic__sketch { display: flex; flex-direction: column; gap: 6px; margin: 0 }
.o-specpic__sketch .o-specpic__svg { max-height: 640px }
.o-specpic__legend a { color: var(--blue) }
.o-sketchlist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none }
.o-sketchlist__item { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-card);
  color: var(--fg); text-decoration: none; font-size: var(--text-body-sm) }
.o-sketchlist__item:hover { background: var(--surface-hover) }
.o-sketchlist__item[aria-current="page"] { border-color: var(--blue); background: var(--blue-tint) }
.o-sketchlist__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium) }
.o-sketchlist__meta { color: var(--fg-3); font-size: var(--text-caption); white-space: nowrap }
.o-tasksketches { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.o-tasksketches__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px }
.o-tasksketches__add > summary { list-style: none; cursor: pointer } .o-tasksketches__add > summary::-webkit-details-marker { display: none }
.o-tasksketches__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px }
.o-tasksketches__form .o-field { flex: 1 1 220px; min-width: 0 }
.o-sketchespage { display: flex; flex-direction: column; gap: 12px }
.o-sketchnotes__inspect { display: flex; flex-direction: column; gap: 8px }
.o-sketchnotes__fields { display: flex; flex-direction: column; gap: 8px }
.o-sketchnotes__fields[hidden] { display: none }
.o-sketchnotes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px }
.o-sketchnotes__links { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none }
.o-sketchnotes [data-sketch-refs] code { margin-left: 6px; font-size: 11.5px; color: var(--fg-3) }
/* ---------- Prototypes and files of a task (specs/work §7, release 1c) ----------
   .o-taskprotos is the task's Prototypes tab: two parts (.o-taskprotos__part), each with a head and a form.
   .o-protolinks lays out .o-protolink cards: a 16:10 .o-protolink__thumb (a framed page scaled to a third,
   .o-protolink__frame; a component's preview .o-protolink__img; or a glyph) above the kind, the title link, where it
   is (site · page) and who linked it. [data-unavailable] (unavailable, missing) mutes a card to its address and why.
   .o-taskfiles lists the files as rows (icon, name, size · who · when, remove); .o-taskfiles__images shows the
   images among them inline. */
.o-taskprotos { display: flex; flex-direction: column; gap: 28px; min-width: 0 }
.o-taskprotos__part { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.o-taskprotos__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px }
.o-taskprotos__title { margin: 0; font-size: var(--text-body); font-weight: var(--weight-medium) }
.o-taskprotos__head .o-hint { margin: 0 }
.o-taskprotos .o-empty { min-height: 0; padding: 20px 16px; border-radius: 12px; border: 1px dashed var(--line); color: var(--fg-3) }
.o-taskprotos .o-empty .ti { font-size: 22px }
.o-taskprotos .o-empty p { margin: 0; max-width: 46ch; font-size: var(--text-body-sm) }
.o-taskprotos__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; padding: 12px; border-radius: 12px; background: var(--surface-card); border: 1px solid var(--line) }
.o-taskprotos__form .o-field { flex: 1 1 200px; min-width: 0 }
.o-taskprotos__form .o-taskprotos__wide { flex-basis: 100% }
.o-taskprotos__form .o-hint { margin: 0 }
.o-protolinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none }
.o-protolink { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-card) }
.o-protolink__thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--map-ground);
  background-image: var(--canvas-dots); background-size: 22px 22px; border-bottom: 1px solid var(--line); color: var(--fg-3) }
.o-protolink__frame { position: absolute; top: 0; left: 0; width: 300%; height: 300%; border: 0; transform: scale(calc(1 / 3)); transform-origin: 0 0; pointer-events: none; background: var(--map-card) }
.o-protolink__img { width: 100%; height: 100%; object-fit: contain; padding: 10px }
.o-protolink__glyph { font-size: 28px }
.o-protolink__thumb--off { color: var(--fg-3) }
.o-protolink__body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0 }
.o-protolink__body p { margin: 0 }
.o-protolink__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--fg-3) }
.o-protolink__title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: var(--weight-medium); color: var(--fg); text-decoration: none; overflow-wrap: anywhere }
a.o-protolink__title:hover { color: var(--blue) }
a.o-protolink__title .ti { font-size: 14px; color: var(--fg-3) }
.o-protolink__where { font: 12px/1.4 var(--font-mono); color: var(--fg-3); overflow-wrap: anywhere }
.o-protolink__label { font-size: var(--text-body-sm); color: var(--fg-2); overflow-wrap: anywhere }
.o-protolink__why { font-size: var(--text-body-sm); color: var(--fg-2) }
.o-protolink__by { font-size: var(--text-caption); color: var(--fg-3) }
.o-protolink__remove { margin-top: 4px }
.o-protolink[data-unavailable]:not([data-unavailable=""]) { border-style: dashed; background: transparent }
.o-protolink[data-unavailable]:not([data-unavailable=""]) .o-protolink__title { color: var(--fg-2) }
.o-taskfiles { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-card) }
.o-taskfiles__row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px 8px 12px }
.o-taskfiles__row + .o-taskfiles__row { border-top: 1px solid var(--line) }
.o-taskfiles__icon { flex: none; font-size: 20px; color: var(--fg-3) }
.o-taskfiles__row[data-kind="image"] .o-taskfiles__icon { color: var(--blue) }
.o-taskfiles__main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0 }
.o-taskfiles__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); text-decoration: none; font-weight: var(--weight-medium) }
.o-taskfiles__name:hover { color: var(--blue); text-decoration: underline }
.o-taskfiles__meta { font-size: var(--text-caption); color: var(--fg-3) }
.o-taskfiles__images { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none }
.o-taskfiles__image a { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: var(--map-ground) }
.o-taskfiles__image img { width: 100%; height: 100%; object-fit: contain }
.o-taskfiles__image a:focus-visible { outline: var(--focus-outline); outline-offset: 2px }
.o-taskfiles__input { padding: 6px 10px; height: auto; min-height: var(--h-control) }

/* Getting started (.o-startmap, .o-startnotes; specs/start §3): the drawing of Alexandria, the approved
   prototype's (prototypes/alexandria-start) rule for rule. Its class names inside the drawing and the cards
   are the prototype's, scoped here, so a test compares the two element for element; its colours are the
   --start-* tokens and the map's. The desk holds the SVG (or in Story the parts' texts), the notes pane
   the cards; ui.js (startmap) adds hover, focus and selection, and the server draws the same state. */
.o-startmap, .o-startnotes, .o-work__content-header:has(.o-startmap__setup) {
  --ground: var(--map-ground); --dot: var(--start-dot); --card: var(--map-card); --mute: var(--map-muted);
  --line: var(--map-border); --shell: var(--start-shell); --shell-line: var(--start-shell-line);
  --accent: var(--start-accent); --accent-tint: var(--start-accent-tint);
  --what: var(--start-what); --what-tint: var(--start-what-tint); --how: var(--start-how); --how-tint: var(--start-how-tint);
  --agent: var(--start-agent); --agent-tint: var(--start-agent-tint); --lit: var(--start-lit); --lit-tint: var(--start-lit-tint);
  --mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
}
.o-startmap { position: relative; flex: 1; min-height: 0; overflow: auto; color: var(--ink); font-size: 13px;
  background-color: var(--ground); background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 18px 18px }
.o-startmap svg { display: block; width: 100%; min-width: 860px; height: auto; max-height: 100% }
/* The notes pane lies over the desk: the drawing keeps clear of it. */
.o-desk[data-panel] .o-startmap { margin-right: var(--panel-px, var(--panel-w)) }
.o-startmap [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.o-startmap .n { cursor: pointer }
.o-startmap .n rect.box { fill: var(--card); stroke: var(--line); stroke-width: 1.2; transition: stroke .15s, fill .15s }
.o-startmap .n:hover rect.box, .o-startmap .n:focus-visible rect.box { stroke: var(--accent); stroke-width: 2 }
.o-startmap .n.sel rect.box { stroke: var(--accent); stroke-width: 2.4 }
.o-startmap .n.dim rect.box { stroke-opacity: .45 }
.o-startmap .n.dim text, .o-startmap .n.dim .glyph, .o-startmap .n.dim .state { opacity: .4 }
.o-startmap .n.lit rect.box { fill: color-mix(in srgb, var(--lit) 16%, var(--card)) }
.o-startmap .n.focus rect.box { stroke: var(--accent); stroke-width: 2.4 }
.o-startmap .n text { fill: var(--ink); font-size: 13px; font-weight: 560 }
.o-startmap .n .q { fill: var(--mute); font-size: 10.5px; font-weight: 400 }
.o-startmap .n .state { fill: var(--line) }
.o-startmap .n.lit .state { fill: var(--lit) }
.o-startmap .glyph { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.o-startmap .hall-label { fill: var(--mute); font-size: 10.5px; letter-spacing: .1em; font-weight: 600 }
.o-startmap .building { fill: var(--card); fill-opacity: .55; stroke: var(--line); stroke-width: 1.4 }
.o-startmap .pediment { fill: var(--card); stroke: var(--line); stroke-width: 1.4 }
.o-startmap .frieze { fill: none; stroke: var(--line); stroke-width: 1 }
.o-startmap .column { fill: var(--card); stroke: var(--line); stroke-width: 1.2 }
.o-startmap .title-txt { fill: var(--ink); font-size: 15px; font-weight: 650 }
.o-startmap .sub-txt { fill: var(--mute); font-size: 11px }
.o-startmap .wire { fill: none; stroke: var(--line); stroke-width: 1.3 }
.o-startmap .area { fill: var(--agent-tint); fill-opacity: .5; stroke: var(--agent); stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 6 5 }
.o-startmap .area-g:hover .area, .o-startmap .area-g:focus-visible .area { stroke-opacity: 1 }
.o-startmap .mcp rect.box { stroke: var(--agent); stroke-width: 1.8; fill: color-mix(in srgb, var(--agent) 18%, var(--card)) }
.o-startmap .mcp text { fill: var(--agent); font-weight: 700; letter-spacing: .06em }
.o-startmap .wire.flow { stroke-dasharray: 4 5; animation: o-startmap-flow 1.2s linear infinite }
@keyframes o-startmap-flow { to { stroke-dashoffset: -18 } }
@media (prefers-reduced-motion: reduce) { .o-startmap .wire.flow { animation: none } }
.o-startmap .tie { fill: none; stroke-width: 1.6; opacity: 0; transition: opacity .2s }
.o-startmap .tie.on { opacity: .9 }
.o-startmap .tie-ghost { fill: none; stroke-width: 1.3; stroke-dasharray: 3 4; opacity: 0; pointer-events: none; transition: opacity .2s }
.o-startmap .tie-ghost.on { opacity: .14 }
.o-startmap .tie-ghost.what { stroke: var(--what) } .o-startmap .tie-ghost.how { stroke: var(--how) } .o-startmap .tie-ghost.agent { stroke: var(--agent) }
.o-startmap .reader rect.box { stroke-width: 1.6 }
.o-startmap .n.own-what rect.box { stroke: var(--what); fill: color-mix(in srgb, var(--what) 16%, var(--card)); stroke-width: 2 }
.o-startmap .n.own-how rect.box { stroke: var(--how); fill: color-mix(in srgb, var(--how) 16%, var(--card)); stroke-width: 2 }
.o-startmap .n.own-agent rect.box { stroke: var(--agent); fill: color-mix(in srgb, var(--agent) 16%, var(--card)); stroke-width: 2 }
.o-startmap .n.own-what .glyph { stroke: var(--what) } .o-startmap .n.own-how .glyph { stroke: var(--how) } .o-startmap .n.own-agent .glyph { stroke: var(--agent) }
.o-startmap .reader.what rect.box { stroke: var(--what); fill: var(--what-tint) } .o-startmap .tie.what { stroke: var(--what) }
.o-startmap .reader.how rect.box { stroke: var(--how); fill: var(--how-tint) } .o-startmap .tie.how { stroke: var(--how) }
.o-startmap .reader.agent rect.box { stroke: var(--agent); fill: var(--agent-tint) } .o-startmap .tie.agent { stroke: var(--agent); stroke-dasharray: 3 4 }
/* The prototype colours a user's icon and a guideline's leader dots inline; the CSP allows no inline style, so data-tone does. */
.o-startmap .glyph[data-tone="what"] { stroke: var(--what) } .o-startmap .glyph[data-tone="how"] { stroke: var(--how) } .o-startmap .glyph[data-tone="agent"] { stroke: var(--agent) }
.o-startmap circle[data-tone="what"] { fill: var(--what) } .o-startmap circle[data-tone="how"] { fill: var(--how) } .o-startmap circle[data-tone="agent"] { fill: var(--agent) }
.o-startmap .src rect.box { stroke-dasharray: 3 3 }
.o-startmap .n.own-guide rect.box { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 14%, var(--card)); stroke-width: 2 }
.o-startmap .n.also rect.box { stroke: var(--accent); stroke-dasharray: 4 3; stroke-width: 1.6 }
.o-startmap .guide.on rect.box { stroke: var(--accent); stroke-width: 2.4; fill: var(--accent-tint) }
.o-startmap .gnum { fill: var(--accent) } .o-startmap .gnum-t { fill: #fff; font-size: 11px; font-weight: 700 }
.o-startmap .arrowhead { fill: var(--line) }
.o-startmap .pin circle { fill: var(--accent) } .o-startmap .pin text { fill: #fff; font-size: 11px; font-weight: 700 }
/* Story: the same project as text, what an agent reads behind every part. */
.o-startmap .story { padding-block: 24px; padding-left: 28px; padding-right: 28px; max-width: 760px; display: flex; flex-direction: column; gap: 18px }
.o-startmap .story article { background: var(--card); border: 1px solid var(--shell-line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px }
.o-startmap .story h3 { margin: 0; font-size: 14px }
.o-startmap .story .agent-text { font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--mute); white-space: pre-wrap }
.o-startmap .story .lead { color: var(--mute); margin: 0 }
.o-startmap .eyebrow, .o-startnotes .eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); font-weight: 600 }
/* The tools: the hint and Set up this project (the prototype's title bar pill). */
.o-startmap__hint { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.o-startmap__setup { border: 1px solid var(--shell-line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 4px 10px; text-decoration: none; white-space: nowrap; margin-left: auto }
.o-startmap__setup[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent) }
/* The notes pane's cards: one shows at a time. */
.o-startnotes { color: var(--ink); font-size: 13px }
.o-startnotes__card { display: flex; flex-direction: column; gap: 14px; padding: 16px }
.o-startnotes__card[hidden] { display: none }
.o-startnotes h2 { margin: 0; font-size: 19px; text-wrap: balance }
.o-startnotes .question { font-size: 15px; color: var(--accent); margin: 0 }
.o-startnotes p { margin: 0; line-height: 1.45; color: var(--ink) }
.o-startnotes .chips { display: flex; flex-wrap: wrap; gap: 6px }
.o-startnotes .chip { border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 550 }
.o-startnotes .chip.what { background: var(--what-tint); color: var(--what) } .o-startnotes .chip.how { background: var(--how-tint); color: var(--how) } .o-startnotes .chip.agent { background: var(--agent-tint); color: var(--agent) }
.o-startnotes .row { display: flex; gap: 8px; align-items: center }
.o-startnotes .row .k { width: 64px; color: var(--mute); font-size: 12px; flex: none }
.o-startnotes details.behind { border: 1px solid var(--shell-line); border-radius: 10px; background: var(--card) }
.o-startnotes details.behind summary { cursor: pointer; padding: 9px 12px; font-weight: 600; display: flex; gap: 8px; align-items: center }
.o-startnotes details.behind summary span { color: var(--mute); font-weight: 400; font-size: 12px }
.o-startnotes details.behind div { padding: 0 12px 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--mute); white-space: pre-wrap }
.o-startnotes .primary, .o-startnotes .ghost { font: inherit; cursor: pointer; text-decoration: none; display: inline-block }
.o-startnotes .primary { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 600 }
.o-startnotes .ghost { background: none; color: var(--ink); border: 1px solid var(--shell-line); border-radius: 8px; padding: 8px 14px }
.o-startnotes .ghost:disabled { cursor: default; opacity: .5 }
.o-startnotes .gsteps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; line-height: 1.4 }
.o-startnotes .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px }
.o-startnotes .steps li a { box-sizing: border-box; width: 100%; display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer; color: inherit; text-decoration: none }
.o-startnotes .steps li a:hover { background: var(--accent-tint) }
.o-startnotes .steps .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1.5px solid var(--line); color: var(--mute); flex: none }
.o-startnotes .steps li.done .num { background: var(--lit); border-color: var(--lit); color: #fff }
.o-startnotes .steps li.cur .num { background: var(--accent); border-color: var(--accent); color: #fff }
.o-startnotes .steps li.cur a { background: var(--accent-tint); font-weight: 600 }
.o-startnotes .bar { height: 4px; border-radius: 4px; background: var(--shell-line); overflow: hidden }
.o-startnotes .bar i { display: block; height: 100%; width: 0; background: var(--lit); transition: width .3s }
.o-startnotes .bar i[data-pct="20"] { width: 20% } .o-startnotes .bar i[data-pct="40"] { width: 40% } .o-startnotes .bar i[data-pct="60"] { width: 60% }
.o-startnotes .bar i[data-pct="80"] { width: 80% } .o-startnotes .bar i[data-pct="100"] { width: 100% }
.o-startnotes .legend { display: flex; flex-wrap: wrap; gap: 6px }
.o-startnotes .pill { border: 1px solid var(--shell-line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 4px 10px; text-decoration: none }
/* What the setup steps run: the name form, the agent's address and prompt, the invitation. */
.o-startnotes__form { display: flex; flex-direction: column; gap: 10px; align-items: stretch }
.o-startnotes__form > .o-btn { align-self: flex-start }

/* Reading guide: optional instructions share the real view's notes. */
.o-reading-notes { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain }
.o-reading-notes > .o-sidepanel__body { overflow: visible; min-height: auto }
.o-reading-notes > .o-mapside { border-radius: 0; box-shadow: none; background: transparent; padding-top: 0 }
.o-reading-guide { margin: 0 0 16px; padding: var(--space-8); color: var(--fg); background: var(--surface-section); border: 1px solid var(--line-bar); border-radius: var(--radius-tile); overflow-wrap: anywhere }
.o-reading-guide__eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: var(--text-caption); color: var(--fg-2) }
.o-reading-guide h2 { margin: 12px 0; font-size: var(--text-step); line-height: 1.3 }
.o-reading-guide p { margin: 10px 0; line-height: 1.5 }
.o-reading-guide__identity, .o-reading-guide__benefit { color: var(--fg-2) }
.o-reading-guide__notice { padding: 12px; border-inline-start: 3px solid var(--amber); background: var(--amber-tint) }
.o-reading-guide__steps, .o-reading-guide__chooser nav { display: grid; gap: 4px; margin-block: 12px }
.o-reading-guide__steps a, .o-reading-guide__chooser a { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: var(--radius-check) }
.o-reading-guide__steps a[aria-current="step"], .o-reading-guide__chooser a[aria-current="step"] { color: var(--fg); background: var(--sel); box-shadow: inset 3px 0 var(--blue); font-weight: 600 }
.o-reading-guide__chooser summary { min-height: 44px; padding-block: 12px; cursor: pointer }
.o-reading-guide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 12px }
.o-reading-guide .o-btn, .o-introduction-prompt .o-btn { min-height: 44px; white-space: normal; text-align: center }
.o-reading-guide__exit { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px }
.o-introduction-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; color: var(--fg); background: var(--surface-section); border-block-end: 1px solid var(--line-bar) }
.o-introduction-prompt p { flex: 1 1 220px; margin: 0; line-height: 1.5 }
.o-introduction-prompt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.o-reading-guide form, .o-introduction-prompt form { margin: 0 }
@media (max-width: 600px) {
 .o-reading-guide { padding: 12px }
 .o-introduction-prompt { padding: 8px 12px }
 .o-introduction-prompt__actions { width: 100% }
}

/* An invitation reserves its own row and never covers a requested view. */
.o-work > .o-desk:has(> .o-introduction-prompt) { grid-template-rows: auto auto auto minmax(0,1fr) }
.o-work > .o-desk > .o-introduction-prompt { grid-column: 1; grid-row: 3 }
.o-work > .o-desk:has(> .o-introduction-prompt) > :is(.o-work__main,.o-work__page,.o-sidepanel) { grid-row: 4 }
.o-work[data-public-example] .o-reading-guide__steps { display: none }


/* ===================== responsive ===================== */
/* One markup for every width. The shell answers to the app container (window classes:
   phone < 768, tablet 768–1023, laptop 1024–1279, desktop ≥ 1280); every component answers
   to its own container, so it behaves the same in a dialog, a sheet or a narrow column. */
@keyframes sheetin { from { transform: translateY(100%) } to { transform: none } }
.o-app { container: app / inline-size; position: relative; height: 100% }
.o-main__scroll { container-type: inline-size }
.o-show-sm { display: none }
.o-btn { position: relative }

/* laptop: the agent docks narrow, a wide agent would starve main */
@container app (min-width: 1024px) and (max-width: 1279px) {
  .o-agent[data-width]:not([data-width="full"]) { --o-agent-w: var(--w-agent) }
}

/* tablet: icon rail, agent slides over main as a sheet */
@container app (max-width: 1023px) {
  .o-shell { padding: 12px; gap: 12px }
  .o-shell__body { position: relative; gap: 12px }
  .o-shell__logo { min-width: 0; padding: 0 6px }
  .o-nav { width: var(--w-sidebar-collapsed) }
  .o-nav :where(.o-navitem__label, .o-ws__text, .o-ws > .ti, .o-nav__wide) { display: none }
  .o-nav__foot { flex-direction: column }
  .o-agent, .o-agent[data-width] { --o-agent-w: min(420px, 100%); position: absolute; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: var(--o-agent-w); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.75), inset 0 0 0 .5px rgba(var(--rim-rgb),.6), -24px 0 60px -24px rgba(var(--shadow-rgb),.5); background: var(--surface-dialog) }
  .o-agent:not([data-open]) { width: var(--o-agent-w); margin-left: 0; opacity: 0; transform: translateX(calc(100% + 24px)) }
}

/* phone: top bar, one page, floating tab bar; agent and overlays are full-height sheets */
@container app (max-width: 767px) {
  .o-shell { padding: 0; gap: 0 }
  .o-shell__bar { height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0; gap: 8px; background: color-mix(in srgb, var(--bg-solid) 70%, transparent); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); box-shadow: 0 .5px 0 var(--line-strong) }
  .o-shell__bar .o-iconbtn--glass { --s: 36px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none }
  .o-shell__bar .o-avatar--lg { --s: 32px; font-size: 12px }
  .o-shell__logo { height: 56px; padding: 0 } .o-shell__logo img { height: 20px }
  .o-shell__logo img.o-shell__mark { height: 24px; width: 24px }
  .o-hide-phone { display: none !important }
  .o-shell__body { position: static; flex-direction: column; gap: 0 }
  .o-main { order: 1; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none }
  .o-main__scroll { padding: 14px 14px 20px; gap: 18px }
  .o-shell[data-nav] .o-nav { order: 2; width: auto; flex-direction: row; align-items: center; gap: 0; margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)); padding: 5px; border-radius: 26px }
  .o-shell[data-nav] .o-nav :is(.o-ws, .o-nav__foot) { display: none }
  .o-nav__list { flex: 1; flex-direction: row; justify-content: space-around; gap: 2px }
  .o-navitem { flex: 1; flex-direction: column; justify-content: center; gap: 2px; height: 50px; padding: 0 2px; border-radius: 21px }
  .o-shell .o-nav .o-navitem__label { display: block; flex: none; font-size: 11.5px; letter-spacing: 0 }
  .o-navitem > .ti { width: auto; font-size: 21px }
  .o-shell[data-mode="focus"] .o-nav { display: none }
  .o-agent, .o-agent[data-width] { --o-agent-w: 100%; position: absolute; inset: 0; width: 100%; border-radius: 0; padding-top: env(safe-area-inset-top, 0px) }
  .o-agent:not([data-open]) { width: 100%; opacity: 1; transform: translateY(100%) }
  .o-main > .o-wizardbar { order: 2; flex-wrap: wrap; height: auto; gap: 10px 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: .5px solid var(--line-strong); border-bottom: 0; background: color-mix(in srgb, var(--bg-solid) 70%, transparent); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong) }
  .o-main > .o-wizardbar > .o-wizard { order: -1; flex: 1 1 100%; justify-content: center }
  .o-main > .o-wizardbar > :last-child .o-btn { --h: var(--h-control-lg); padding: 0 20px }
}

/* components, by their own container */
@container (max-width: 820px) { .o-tr { grid-template-columns: var(--o-cols-md, var(--o-cols)) } }
@container (max-width: 560px) {
  .o-tr { grid-template-columns: var(--o-cols-sm, var(--o-cols-md, var(--o-cols))); gap: 10px; padding: 8px 14px; min-height: 60px }
  .o-tr--head { display: none }
  .o-tr--head + .o-tr { border-top: 0 }
  .o-show-sm { display: revert }
  .o-table__foot { padding: 10px 14px 12px }
}
@container (max-width: 560px) {
  .o-pagehead { padding: 2px 2px 8px; gap: 10px }
  .o-pagehead h1 { font-size: 27px }
  .o-pagehead .o-search { order: 3; flex: 1 1 100% }
  .o-kpis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px 16px; gap: 12px }
  .o-kpis > * { scroll-snap-align: center }
  .o-kpi__value { font-size: 35px }
  .o-bignum__value { font-size: var(--text-display); letter-spacing: -1px }
  .o-sentence:not(.o-sentence--exclude) { font-size: 20px; letter-spacing: -.1px }
  .o-block__head { padding: 12px 12px 10px 14px }
  .o-block__body { padding: 12px 16px 16px }
  .o-block__foot { padding: 12px 14px 14px }
  .o-block__foot .o-block__note { flex-basis: 100% }
  .o-block__foot .o-btn--primary { flex: 1 }
  .o-signal { flex-wrap: wrap; row-gap: 8px }
  .o-signal__main { flex: 1 1 calc(100% - 80px) }
  .o-signal__action { margin-left: 31px }
  .o-bulkbar { position: sticky; bottom: 8px; z-index: var(--z-sticky); padding: 6px 6px 6px 14px; border-radius: 22px }
  .o-herostats { flex-wrap: wrap; row-gap: 14px } .o-herostat { padding: 0 16px }
  .o-herostat__value { font-size: 25px }
  .o-tiles { grid-template-columns: repeat(var(--o-cols-sm, var(--o-cols, 3)), minmax(0,1fr)) }
  .o-frow__label { width: 100%; min-height: 0 }
  .o-select { width: 100% }
  .o-choices { grid-template-columns: repeat(2, minmax(0,1fr)) }
}

/* bottom sheet: dialogs, menus and pickers on a phone */
.o-sheet__scrim { position: absolute; inset: 0; z-index: calc(var(--z-dialog) - 1); background: var(--scrim); -webkit-backdrop-filter: var(--blur-scrim); backdrop-filter: var(--blur-scrim); animation: fade var(--dur-state) ease both }
.o-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-dialog); max-height: 92%; display: flex; flex-direction: column; border-radius: var(--radius-dialog) var(--radius-dialog) 0 0; overflow: hidden; color: var(--fg); background: var(--surface-dialog); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.9), 0 -20px 60px -30px rgba(var(--shadow-rgb),.5); -webkit-backdrop-filter: var(--blur-dialog); backdrop-filter: var(--blur-dialog); padding-bottom: env(safe-area-inset-bottom, 0px); animation: sheetin .32s var(--ease-out) both }
.o-sheet::before { content: ""; flex: none; align-self: center; width: 36px; height: 5px; margin: 8px 0 0; border-radius: 3px; background: rgba(var(--mute-rgb),.3) }
.o-sheet .o-dialog__head { padding: 10px 12px 12px 18px }
.o-sheet .o-dialog__body { padding: 4px 16px 16px }
.o-sheet .o-dialog__foot { padding: 12px 14px 14px 18px }
.o-sheet--menu { padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)) }
.o-sheet--menu .o-menu__item { min-height: 48px; font-size: 17px; border-radius: 14px }
@media (max-width: 767px) {
  dialog.o-dialog { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-dialog) var(--radius-dialog) 0 0; animation: sheetin .32s var(--ease-out) both }
  .o-menu[popover] { position: fixed; inset: auto 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px; width: auto; min-width: 0; max-height: 70dvh; border-radius: 22px; padding: 8px }
  .o-menu[popover] :is(.o-menu__item, .o-option) { min-height: 48px; font-size: 17px }
  .o-drawer__panel { width: 100% }
  .o-editor__bar { grid-template-columns: minmax(0,1fr) auto; height: auto; padding: 8px 12px; row-gap: 8px }
  .o-editor__bar > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; justify-self: center }
}

/* split: list + detail side by side, drill-in when narrow (audience editor, settings) */
.o-split { container-type: inline-size; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(196px, 236px) minmax(0, 1fr) }
.o-split__list { min-width: 0; overflow-y: auto; padding: 10px 10px 14px 12px; border-right: .5px solid var(--line); display: flex; flex-direction: column; gap: 4px }
.o-split__detail { min-width: 0; overflow-y: auto; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px }
.o-split__back { display: none }
.o-railitem { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 10px; border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: left; color: var(--fg); transition: background var(--dur-fast) ease }
.o-railitem:hover { background: rgba(var(--glass-rgb),.7) } .o-railitem[aria-current="true"] { background: rgba(var(--glass-rgb),.85) }
.o-railitem__text { flex: 1; min-width: 0; display: flex; flex-direction: column } .o-railitem__title { font-size: var(--text-body-sm) } .o-railitem__sum { font-size: var(--text-nano); color: var(--fg-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .o-railitem__sum.has-value { color: var(--blue) }
@container (max-width: 600px) {
  .o-split { grid-template-columns: minmax(0, 1fr) }
  .o-split__list { border-right: 0 }
  .o-split[data-pane="detail"] .o-split__list, .o-split:not([data-pane="detail"]) .o-split__detail { display: none }
  .o-split__back { display: inline-flex; align-self: flex-start; margin: -8px 0 0 -10px }
  .o-split__detail { padding: 14px 16px 18px }
}

/* touch: bigger controls, larger hit areas, no hover-only information */
@media (pointer: coarse) {
  :root, [data-theme] { --h-control: 40px; --h-control-sm: 32px }
  .o-btn::after, .o-iconbtn::after, .o-chip::after, .o-seg__opt::after { content: ""; position: absolute; inset: -6px }
  .o-chip, .o-seg__opt { position: relative }
  .o-input, .o-search input, .o-affix input, .o-composer__field textarea, .o-composer__field input, .o-composer__input, .o-menu__search input { font-size: 17px }
}
@media (hover: none) {
  [data-tip]:hover::after { display: none }
}
@media (max-width: 767px) {
  /* A sketch on a phone: the tools row scrolls sideways under the finger and keeps Save; the
     revision line is read out but shown only when a save failed; Source takes the width. */
  .o-sketch__status:not([data-state="failed"]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
  .o-sketch__actions { padding-left: 4px }
  .o-desk[data-panel] .o-sketch__sourcepane { padding-right: 8px }
  .o-desk[data-panel] .o-sketch__empty { right: 0 }
  .o-sketch__sourcepane { padding: 12px 8px 24px }
  .o-sketch__source.o-story { padding: 18px 14px 22px }
}
@media (max-width: 767px) {
  .o-pop { position: fixed; inset: auto 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px; width: auto; max-height: 80dvh; border-radius: 22px; animation: sheetin .32s var(--ease-out) both }
}

/* ===================== agent first ===================== */
/* The person chose "Agent first": the conversation is main and the page Optio works on is a pane
   on the right (data-work open|closed). The pane is the page's own "app" container, so every page
   lays itself out by the pane's width (its tablet or phone layout in a narrow pane) with no
   page-specific rules. Tablet: the pane slides over the conversation; phone: it rises over it. */
.o-shell[data-first="agent"] .o-shell__body > .o-agent { order: 1; flex: 1; --o-agent-w: auto; width: auto; min-width: 0; margin-left: 0; opacity: 1; transform: none; pointer-events: auto }
.o-shell[data-first="agent"] .o-agent :is([data-o-agent-width], .o-agent__head [data-o-agent-toggle]) { display: none }
.o-shell[data-first="agent"] .o-agent .o-thread { padding: 40px max(28px, calc((100% - 720px) / 2)) 24px; gap: 18px }
.o-shell[data-first="agent"] .o-agent .o-composer { padding: 14px max(28px, calc((100% - 720px) / 2)) 22px; border-top: 0 }
.o-shell[data-first="agent"] .o-shell__body > .o-main { order: 2; flex: none; width: var(--w-work); container: app / inline-size; opacity: 1; pointer-events: auto; margin-right: 0; transition: width var(--dur-agent) var(--ease-out), margin-left var(--dur-agent) var(--ease-out), opacity var(--dur-agent) ease, transform var(--dur-agent) var(--ease-out) }
.o-shell[data-first="agent"][data-work="closed"] .o-shell__body > .o-main { width: 0; margin-left: calc(-1 * var(--space-8)); padding-left: 0; padding-right: 0; opacity: 0; pointer-events: none }
@container app (max-width: 1023px) {
  .o-shell[data-first="agent"] .o-shell__body > .o-agent { position: relative; inset: auto; z-index: auto; box-shadow: none }
  .o-shell[data-first="agent"] .o-shell__body > .o-main { position: absolute; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: min(560px, 100%); background: var(--surface-dialog); box-shadow: inset 0 1px 0 rgba(var(--rim-rgb),.75), inset 0 0 0 .5px rgba(var(--rim-rgb),.6), -24px 0 60px -24px rgba(var(--shadow-rgb),.5) }
  .o-shell[data-first="agent"][data-work="closed"] .o-shell__body > .o-main { width: min(560px, 100%); margin-left: 0; transform: translateX(calc(100% + 24px)) }
  .o-shell[data-first="agent"] .o-agent .o-thread { padding: 24px 18px 18px }
  .o-shell[data-first="agent"] .o-agent .o-composer { padding: 12px 14px 14px }
}
@container app (max-width: 767px) {
  .o-shell[data-first="agent"] .o-shell__body { position: relative }
  .o-shell[data-first="agent"] .o-shell__body > .o-agent { order: 1; flex: 1; border-radius: 0; padding-top: 0 }
  .o-shell[data-first="agent"] .o-shell__body > .o-main { inset: 0; width: 100%; z-index: var(--z-drawer); border-radius: 0; background: var(--bg-solid) }
  .o-shell[data-first="agent"][data-work="closed"] .o-shell__body > .o-main { width: 100%; transform: translateY(100%); opacity: 1 }
}
/* A full-window editor (.o-editor--app) covers the work pane only: the pane is a containing block
   (container), the top bar, the sidebar and the conversation stay. */
.o-shell[data-first="agent"]:has(.o-editor--app) :is(.o-shell__bar, .o-nav) { visibility: visible }
.o-shell[data-first="agent"]:has(.o-editor--app) .o-shell__body > .o-agent { position: relative; inset: auto; z-index: auto }

/* focused page: phone window */
@media (max-width: 767px) {
  .o-focus__bar { height: 56px; padding: 0 16px }
  .o-focus__main { padding: 4px 12px 28px }
  .o-focus__product { padding-left: 10px; font-size: var(--text-body-sm) }
  .o-focus__mark + .o-focus__product { padding-left: 0 }
}

@media (max-width: 1100px) { .o-maplayout { grid-template-columns: minmax(0,1fr) } .o-map { height: 70vh } }
/* ui/work on a phone: the explorer is a rail and unfolds over the desk (data-unfold, not remembered);
   the side panel becomes a bottom sheet under the round buttons. */
@media (max-width: 767px) {
  .o-work:not([data-unfold]) .o-explorer { width: var(--rail-w); align-items: center; padding: 10px 6px 8px }
  .o-work:not([data-unfold]) .o-explorer__head { flex-direction: column; align-items: center; padding: 0 0 6px }
  .o-work:not([data-unfold]) .o-explorer :is(.o-explorer__id, .o-explorer__fold, .o-explorer__label, .o-explorer__kbd) { display: none }
  .o-work:not([data-unfold]) .o-explorer__search { width: 40px; height: 40px; margin: 0 0 6px; padding: 0; justify-content: center; border: 0; background: transparent }
  .o-work:not([data-unfold]) .o-explorer__search .ti { font-size: 19px }
  .o-work:not([data-unfold]) .o-explorer__views { flex: 1; align-items: center; gap: 4px }
  .o-work:not([data-unfold]) .o-explorer__view { width: 44px; height: 44px; padding: 0; justify-content: center }
  .o-work:not([data-unfold]) .o-explorer__view .ti { font-size: 21px }
  .o-work:not([data-unfold]) .o-explorer__group { display: none }
  .o-work:not([data-unfold]) .o-journey .o-journey__stop { height: 44px; padding: 0 }
  .o-work:not([data-unfold]) .o-journey__dot { position: absolute; top: 7px; right: 7px }
  .o-work:not([data-unfold]) .o-explorer__foot { flex-direction: column; border-top: 0 }
  .o-work:not([data-unfold]) .o-explorer__foot .o-work__account { flex: none; width: 36px; padding: 0; justify-content: center }
  .o-work:not([data-unfold]) .o-explorer__unfold { display: inline-flex }
  .o-work:not([data-unfold]) .o-explorer > .o-spacer { display: none }
  .o-work[data-unfold] .o-explorer { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: min(var(--explorer-w), 86vw); box-shadow: 14px 0 40px rgba(var(--shadow-rgb),.22) }
  .o-work[data-unfold] .o-explorer__unfold { display: none }
  .o-work[data-unfold] .o-desk::before { content: ""; position: absolute; inset: 0; z-index: 20; background: rgba(var(--shadow-rgb),.2) }
  .o-work:not([data-unfold]) .o-explorer__railbtn { display: inline-flex }
  /* The view's list (.o-viewnav) is a sheet from the left, opened by the dock's list button. */
  .o-viewnav, .o-viewnav[data-closed] { display: none }
  .o-work[data-viewnav-open] .o-viewnav { display: flex; position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); padding-top: 12px; background: var(--surface-solid); box-shadow: 14px 0 40px rgba(var(--shadow-rgb),.22) }
  .o-work[data-viewnav-open] .o-viewnav :is(.o-viewnav__head, .o-viewnav__lead, .o-viewnav__tree, .o-outline__find) { display: flex }
  .o-work[data-viewnav-open] .o-viewnav__lead { display: block }
  .o-work[data-viewnav-open] .o-desk::before { content: ""; position: absolute; inset: 0; z-index: 20; background: rgba(var(--shadow-rgb),.2) }
  .o-viewnav__fold, .o-viewnav__unfold, .o-work[data-viewnav-open] .o-viewnav__unfold { display: none }
  .o-viewnav__close { display: inline-flex }
  .o-desk__navbtn { display: inline-flex }
  .o-picker > .ti-selector { display: none }
  .o-map__foot { display: none }
  .o-lives, .o-desk[data-panel] .o-lives { right: 0; padding: 64px 8px 24px }
  .o-desk[data-panel] > .o-work__page { padding-right: 0 }
  .o-lives__table :is(th, td) { padding: 8px 10px; min-width: 104px }
  .o-work .o-hide-phone { display: none !important } /* the workspace is not in the shell's container */
  .o-desk__dock, .o-desk__dock[data-placed], .o-desk[data-panel] > .o-desk__dock:not([data-placed]) { left: 8px !important; right: 8px; top: 8px !important; transform: none; max-width: none }
  .o-desk__tools { flex: 1 }
  .o-desk__grip { display: none }
  .o-desk__tools .o-work__flow select { max-width: 120px }
  .o-menubtn__label { display: none } /* a phone keeps the icon and the current value */
  .o-menubtn__value { max-width: 10ch }
  .o-menubtn__value::before { content: none }
  .o-sidepanel { top: auto; left: 0; width: auto; height: 62%; border-left: 0; border-top: .5px solid var(--line); border-radius: 22px 22px 0 0; transform: translateY(calc(100% + 48px)) }
  .o-sidepanel[data-peek] { height: min(300px, 46%); cursor: pointer }
  .o-sidepanel[data-peek]::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--fg-3); opacity: .5 }
  .o-history__name { width: 110px }
  .o-deploy { padding: 6px 10px 30px }
  .o-deploy__groups { columns: 1 }
  .o-deploy__outside { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 6px }
  .o-uclist__table th[data-col="steps"], .o-uclist__table th[data-col="open"], .o-uclist__table td.o-uclist__num { display: none }
  .o-uclist__count { margin-left: 0 }
  .o-ucsheet, .o-desk[data-panel] .o-ucsheet { padding: 12px 10px 80px }
  .o-ucsheet__page { padding: 18px 16px }
  .o-itempage { padding: 18px 16px 28px; border-radius: 12px }
  .o-itempage__title { font-size: 21px }
  .o-itemhood { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .o-itemhood__side li::before, .o-itemhood__side li::after { display: none }
  .o-itempage__facts { grid-template-columns: minmax(0, 1fr) }
  .o-itempage__facts dd { margin-bottom: 4px }
  .o-ucsheet__headline { font-size: var(--text-body) }
  .o-logbook__tiles { gap: 6px }
  .o-logbook__tile { padding: 8px 10px }
  .o-overview, .o-where, .o-stops--two { grid-template-columns: minmax(0, 1fr) }
  .o-checklist__body { padding-left: 6px }
  .o-readiness__cell span { display: none }
  .o-root a.o-readiness__cell, .o-readiness__cell { min-width: 0 }
  .o-observe__row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px }
  .o-observe__row .o-gap, .o-observe__acts { grid-column: 1 / -1 }
  .o-trials__cards { grid-template-columns: minmax(0, 1fr) }
  .o-work:not([data-unfold]) .o-explorer__group { display: none }
  .o-work:not([data-unfold]) .o-explorer__settings { width: 44px; height: 44px; padding: 0; justify-content: center }
  .o-reader { flex-direction: column; padding: 4px 14px 40px; gap: 18px }
  .o-reader__map { position: static; width: auto; box-sizing: border-box }
  .o-reader__text h1 { font-size: 27px }
  .o-reader__pager a { min-width: 0; flex: 1 }
  .o-verdict { flex-wrap: wrap; gap: 12px; padding: 14px }
  .o-verdict__mark { width: 44px; height: 44px; font-size: 23px }
  .o-verdict__text { flex: 1 1 200px }
  .o-verdict__text h1 { font-size: 22px }
  .o-verdict__cost { flex: 1 1 100%; align-items: flex-start; text-align: left }
  .o-loadmap__legend { flex-wrap: wrap; gap: 6px 12px }
  .o-loadmap__legend .o-eyebrow { flex: 1 1 100% }
  .o-loadmap { flex-direction: column; height: auto }
  .o-loadmap__area { min-height: 160px }
  .o-work__inner { padding: 14px 12px 40px }
  .o-projectgrid--list .o-projectcard { flex-direction: column; align-items: stretch }
  .o-agentgrid { grid-template-columns: minmax(0, 1fr) }
  .o-agentnew { min-height: 64px }
}

/* deck on a tablet: a narrower text column */
@media (max-width: 1023px) and (min-width: 768px) {
  .o-deck { --o-deck-text: 44vw; --o-deck-left: 40px }
  .o-deck__stage { left: calc(var(--o-deck-left) + var(--o-deck-text) + 16px); right: 40px }
  .o-deck__title { font-size: var(--text-h1) }
  .o-deck__line { font-size: var(--text-body-lg) }
}

/* deck on a phone held upright: the sections scroll across, one per swipe (main is the
   scroller, the page itself never scrolls sideways); the words sit at the top of each section,
   in a block of one height for every section so the stage never jumps, and the stage pins
   below them, filling the rest of the height, where the thumb swipes without covering the
   words; the rail becomes a slim progress bar */
@media (max-width: 767px) and (orientation: portrait) {
  .o-deckroot { scroll-snap-type: none; overflow: hidden; height: 100% }
  .o-deckbody { height: 100%; overflow: hidden; overscroll-behavior: none }
  .o-deck__sections { display: flex; width: 100vw; height: 100vh; height: 100dvh; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch }
  .o-deck__sections::-webkit-scrollbar { display: none }
  .o-deck__section { flex: 0 0 100vw; width: 100vw; scroll-snap-align: start }
  .o-deck { --o-deck-bar: 52px; --o-deck-text-h: 40vh; --o-deck-text-h: 40svh; --o-deck-text: 100%; --o-deck-crop-x: 28px }
  .o-deck[data-o-deck-armed] .o-deck__section .o-deck__text { position: static; opacity: 1; transform: none; visibility: visible; transition: none }
  .o-deck__text, .o-deck[data-o-deck-armed] .o-deck__section .o-deck__text { box-sizing: border-box; height: var(--o-deck-text-h); justify-content: flex-start }
  .o-deck__text > * { flex-shrink: 0 }
  .o-deck__link { white-space: nowrap }
  .o-deck__wide { display: none !important } /* left out on an upright phone: the bar and the last section have no room */
  .o-deck__bar { gap: 8px; padding: 0 12px 0 16px; background: color-mix(in srgb, var(--map-card) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px) }
  .o-deck__brand > span { display: none } /* keep showroom and sign-in reachable; the brand retains its accessible name */
  .o-deck__nav { gap: 8px; padding: 3px 3px 3px 6px; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none }
  .o-deck__stage { top: calc(var(--o-deck-bar) + 14px + var(--o-deck-text-h)); bottom: 6px; left: 4px; right: 4px }
  .o-deck__section { align-items: flex-start; padding: calc(var(--o-deck-bar) + 14px) 20px 0 }
  .o-deck__kick, .o-deck__tag { margin-bottom: 8px }
  .o-deck__title { font-size: 25px; line-height: 1.12 }
  .o-deck__aside { margin-top: 6px; font-size: 19px }
  .o-deck__line { margin-top: 10px; font-size: var(--text-body); line-height: 1.45 }
  .o-deck__line2 { margin-top: 6px; font-size: var(--text-caption); line-height: 1.45 }
  .o-deck__actions { margin-top: 12px; gap: 8px }
  .o-deck__agenthint { display: none }
  .o-deck__cta { margin-top: 10px; height: 42px; font-size: var(--text-body) }
  .o-deck__agent { margin-top: 10px }
  .o-deck__note { margin-top: 10px }
  .o-deck__rail { top: var(--o-deck-bar); left: 0; right: 0; transform: none; flex-direction: row; gap: 2px; padding: 0 12px }
  .o-deck__dot { flex: 1; width: auto; height: 3px; border-radius: 2px }
  .o-deck__dot[aria-current="step"] { height: 3px }
  .o-deck__next { left: auto; right: 16px; bottom: 16px; margin: 0; width: 40px; height: 40px }
  .o-deck__next .ti { transform: rotate(-90deg) }
  .o-deck__next[data-last] .ti { transform: rotate(90deg) }
  .o-deck__count { display: none }
}

/* deck on a low landscape screen (a phone or small tablet turned sideways): the sections
   snap down the page as on a desktop, with the stage beside the words, scaled to the height */
@media (orientation: landscape) and (max-height: 520px) {
  .o-deck { --o-deck-bar: 44px; --o-deck-foot: 10px; --o-deck-left: 28px; --o-deck-text: min(46vw, 420px) }
  .o-deck__bar { padding: 0 16px }
  .o-deck__nav { gap: 10px; padding: 2px 2px 2px 12px }
  .o-deck__stage { top: calc(var(--o-deck-bar) + 4px); left: calc(var(--o-deck-left) + var(--o-deck-text) + 12px); right: 40px }
  .o-deck__kick, .o-deck__tag { margin-bottom: 6px }
  .o-deck__title { font-size: 25px; line-height: 1.12 }
  .o-deck__aside { margin-top: 4px; font-size: 17px }
  .o-deck__line { margin-top: 8px; font-size: var(--text-body-sm); line-height: 1.45 }
  .o-deck__line2 { margin-top: 4px; font-size: var(--text-caption); line-height: 1.4 }
  .o-deck__note { margin-top: 6px }
  .o-deck__actions { margin-top: 12px; gap: 8px }
  .o-deck__cta { margin-top: 8px; height: 38px; font-size: var(--text-body-sm) }
  .o-deck__agent { margin-top: 8px }
  .o-deck__agenthint { display: none }
  .o-deck__rail { right: 14px; gap: 6px }
  .o-deck__dot { width: 6px; height: 6px }
  .o-deck__dot[aria-current="step"] { height: 16px }
  .o-deck__next { left: auto; right: 12px; bottom: 10px; margin: 0; width: 34px; height: 34px; font-size: 16px }
  .o-deck__count { display: none }
}

/* The Model view has its sheet list in the second column on desktop. */
@media (min-width: 768px) {
  :is([data-draft-page], [data-settings-page]) > .o-sheets { display: none } /* the outline lists the sheets (W45) */
}
@media (max-width: 767px) {
  .o-sheetstatus { flex-wrap: wrap; gap: 6px; padding: 4px 8px }
  .o-sheetstatus > span:not(.o-spacer):not(.o-sheetstatus__error) { white-space: nowrap }
  .o-sheetstatus__error { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere }
}

/* ui/workspace: phone sheets leave the fixed header and status visible. */
@media (max-width: 767px) {
 .o-root.o-work { grid-template-columns: 48px 0 minmax(0,1fr) }
 .o-work > .o-viewnav, .o-work > .o-viewnav[data-closed] { position: absolute; grid-column: 2 / 4; grid-row: 2; top: 0; bottom: 0; left: 0; width: min(280px,calc(100vw - 48px)); z-index: 30; display: none }
 .o-work[data-viewnav-open] > .o-viewnav { display: flex }
 .o-work[data-viewnav-open] > .o-viewnav :is(.o-viewnav__head,.o-viewnav__lead,.o-viewnav__tree,.o-outline__find) { display: flex }
 .o-work[data-viewnav-open] .o-viewnav__unfold { display: none }
 .o-work__content-header .o-desk__navbtn { display: inline-flex; min-height: 44px }
 .o-work__content-header[data-no-tools]:has(.o-desk__navbtn) { display: block }
 .o-work__header { display: flex; flex-wrap: wrap; height: auto; min-height: var(--h-header) }
 .o-work__center { order: 3; flex: 1 1 100%; padding: 0 6px 4px; box-sizing: border-box }
 .o-wbsearch { flex: 1; width: auto }
 .o-sidepanel__grip, .o-sidepanel__widths, .o-viewnav__grip { display: none }
 .o-story { padding: 18px 16px 24px; border-radius: 12px }
 .o-work__identity { flex-basis: 100%; box-sizing: border-box }
 .o-work__actions { margin-left: auto }
 .o-work__identity .o-picker { max-width: 32vw }
 .o-work__status { gap: 6px }
 .o-work__status-context { display: none }
 .o-work__page .o-section { padding: 12px }
}

/* ui/workbench: a page reflows by its own width (.o-work__page is the "page" container), so the
   agent panel and the outline narrowing it stack its grids as a narrow window would. */
@container page (max-width: 980px) { .o-overview { grid-template-columns: minmax(0, 1fr) } }
@container page (max-width: 720px) {
  .o-where, .o-stops--two { grid-template-columns: minmax(0, 1fr) }
  .o-itemhood { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .o-itemhood__side li::before, .o-itemhood__side li::after { display: none }
}
@container page (max-width: 520px) { .o-itempage__facts { grid-template-columns: minmax(0, 1fr) } .o-itempage__facts dd { margin-bottom: 4px } }