/* Bonsai — approved revision 09: Clay Atelier / Moonlit Conservatory.
 * Warm paper by day, blue-green atmosphere and a warm-orange night light.
 * Baloo 2 / Nunito, fine borders, localized film and 2px colored cast shadows.
 * :root + :root[data-theme="matcha-dark"] are the ONLY exported scopes.
 * Historical themes: themes-history.css (not loaded). */
:root{
  /* Web roles alias the existing scale; native type and target exports stay stable. */
  --font-note:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif; /* Web note reader and preview face: system sans, not the brand faces */
  --input-focus:var(--on-secondary-container); /* Focused input border colour; replaces the border, no outer ring */
  --elev-callout:var(--shadow-sm-x) var(--shadow-sm-y) var(--shadow-blur) var(--shadow-spread) var(--callout-color,var(--callout-note)); /* Callout hard shadow in the callout's own semantic colour */
  --ui-row-height:var(--sp-32); /* Web menu and navigation row height (32px desktop, 48px coarse pointer) */
  --label-inset:var(--sp-4); /* Inset between a chip/label highlight and its host edge */
  --label-remove-size:var(--sp-24); /* Removal control size inside input chips */
  --ui-panel-size:var(--type-body-size); /* Web panel heading role size (15/700) */
  --ui-list-size:var(--table-body-size); /* Web list title role size (14/600) */
  --ui-nav-size:var(--type-body-sm-size); /* Web navigation label role size (13/600) */
  --ui-body-size:var(--table-body-size); /* Web UI body role size (14/400) */
  --ui-secondary-size:var(--type-body-sm-size); /* Web secondary text role size (13/400) */
  --ui-meta-size:var(--type-caption-size); /* Web metadata role size (11/400) */
  --note-table-cell-min:96px; /* Minimum note table cell width before the table scrolls */
  --note-table-cell-max:240px; /* Maximum note table cell width; longer content wraps */
  --press-scale:0.92; /* Scale applied to pressed chips and small controls */
  --opacity-solid:1; /* Fully opaque; base for grayscale/opacity aliases */
  --disabled-grayscale:var(--opacity-solid); /* Grayscale amount for disabled raised actions (Light desaturates) */
  --note-h1-size:39px; /* Note heading H1 size inside rendered notes, not a page title */
  --note-h1-weight:600; /* Note heading H1 weight inside rendered notes, not a page title */
  --note-h1-line:1.14; /* Note heading H1 line height inside rendered notes, not a page title */
  --note-h2-size:24px; /* Note heading H2 size inside rendered notes, not a page title */
  --note-h2-weight:600; /* Note heading H2 weight inside rendered notes, not a page title */
  --note-h2-line:1.3; /* Note heading H2 line height inside rendered notes, not a page title */
  --note-h3-size:15px; /* Note heading H3 size inside rendered notes, not a page title */
  --note-h3-weight:800; /* Note heading H3 weight inside rendered notes, not a page title */
  --note-h3-line:1.5; /* Note heading H3 line height inside rendered notes, not a page title */
  --note-h4-size:13px; /* Note heading H4 size inside rendered notes, not a page title */
  --note-h4-weight:800; /* Note heading H4 weight inside rendered notes, not a page title */
  --note-h4-line:1.5; /* Note heading H4 line height inside rendered notes, not a page title */
  --note-h5-size:12px; /* Note heading H5 size inside rendered notes, not a page title */
  --note-h5-weight:800; /* Note heading H5 weight inside rendered notes, not a page title */
  --note-h5-line:1.5; /* Note heading H5 line height inside rendered notes, not a page title */
  --note-h6-size:12px; /* Note heading H6 size inside rendered notes, not a page title */
  --note-h6-weight:600; /* Note heading H6 weight inside rendered notes, not a page title */
  --note-h6-line:1.5; /* Note heading H6 line height inside rendered notes, not a page title */
  --type-display-color:var(--on-surface); /* Type role display: default text colour */
  --type-h1-color:var(--on-surface); /* Type role h1: default text colour */
  --type-h2-color:var(--on-surface); /* Type role h2: default text colour */
  --type-title-color:var(--on-surface); /* Type role title: default text colour */
  --type-subtitle-color:var(--text-muted); /* Type role subtitle: default text colour */
  --type-body-color:var(--on-surface); /* Type role body: default text colour */
  --type-body-sm-color:var(--text-muted); /* Type role body-sm: default text colour */
  --type-label-color:var(--text-muted); /* Type role label: default text colour */
  --type-caption-color:var(--text-muted); /* Type role caption: default text colour */
  --type-hand-color:var(--secondary-fg); /* Type role hand: default text colour */
  --type-mono-color:var(--text-muted); /* Type role mono: default text colour */
  color-scheme:light;
  --backdrop:#26302A; /* Scrim behind dialogs and drawers, at --backdrop-alpha */
  --on-backdrop:#FCFBF4; /* Text drawn directly on the scrim */
  --avatar-sm:32px; /* Avatar small diameter */
  --avatar-md:44px; /* Avatar default diameter */
  --avatar-lg:64px; /* Avatar large diameter */
  --badge-size:20px; /* Count badge height */
  --badge-dot:12px; /* Dot badge diameter */
  --stepper-dot:30px; /* Stepper step circle diameter */
  --drawer-width:216px; /* Navigation drawer width */
  --appbar-height:68px; /* App bar height */
  --bottomnav-height:66px; /* Bottom navigation height */
  --bottomnav-label-size:10px; /* Bottom navigation label size */
  --page-end-inset:96px; /* Bottom inset of a scrolling tab page: clears the bottom navigation and FAB */
  --list-row-height:60px; /* Two-line list row height */
  --tooltip-pad-y:6px; /* Tooltip vertical padding */
  --tooltip-pad-x:10px; /* Tooltip horizontal padding */
  --tooltip-width:200px; /* Rich tooltip width */
  --dialog-width:320px; /* Dialog width on narrow screens */
  --action-max-width:640px; /* Cap for the exceptional centered large action (A-30) */
  --spinner-size:40px; /* Circular progress diameter */
  --dur-skeleton:1300ms; /* Skeleton shimmer cycle */
  --backdrop-alpha:.48; /* Scrim opacity */
  --card-media-height:150px; /* Card media slot height */

  --ink:#d7dbdc; /* Fine frame around cards and raised surfaces */
  --primary:#626d49; /* Outward actions: open, create, start (A-10); pair with --on-primary */
  --on-primary:#ffffff; /* Label on --primary fills */
  --primary-strong:#5f6a47; /* Darker green for filled-primary hover */
  --primary-container:#e9eddf; /* Tinted green surface: selected rows, outlined-green hover, success chips */
  --on-primary-container:var(--primary-fg); /* Text on --primary-container */
  --secondary:#526e82; /* Inward actions: save, confirm, apply (A-11); pair with --on-secondary */
  --on-secondary:#ffffff; /* Label on --secondary fills */
  --secondary-strong:#506b7e; /* Darker blue for filled-secondary hover and link hover */
  --secondary-container:#e5edf0; /* Tinted blue surface: selection, outlined-blue hover */
  --on-secondary-container:var(--secondary-fg); /* Text on --secondary-container; Light input focus border */
  --accent:#F4B63C; /* Sun-yellow signature accent; highlight tones share this hue */
  --on-accent:#3A2900; /* Text on --accent */
  --bloom:#E86A80; /* Coral pop for blossom marks and count badges */
  --bg:var(--surface); /* Page/canvas background (milky cream in Light) */
  --on-bg:#34372d; /* Text on the page background */
  --surface:#fbf8f1; /* Default paper surface: cards, lists, sheets */
  --on-surface:#34372d; /* Primary text on paper surfaces */
  --surface-2:#fffcf7; /* Raised paper: pop cards, outlined buttons, dialogs */
  --surface-sunken:var(--surface); /* Recessed paper: code blocks, empty habit cells, disabled fills */
  --muted-surface:var(--surface); /* Quiet tinted surface: table headers, neutral chips, filled cards */
  --on-muted-surface:#34372d; /* Text on --muted-surface */
  --muted:#666d5f; /* Muted text colour (alias target of --text-muted) */
  --subtle:var(--muted); /* Subtle glyphs: trailing chevrons, metadata icons */
  --border:#d6dbce; /* Default soft divider and outlined-card border */
  --border-faint:#e9eddf; /* Faint divider inside dense lists and tables */
  --hairline:rgba(52,55,45,.10); /* Translucent 1px hairline for separators drawn over any surface */
  --success:var(--primary); /* Success fill (alerts, snackbars); pair with --on-success */
  --on-success:var(--on-primary); /* Label on --success */
  --success-container:var(--primary-container); /* Tinted success surface */
  --on-success-container:var(--on-primary-container); /* Text on --success-container */
  --error:#a94e43; /* Negative actions: cancel, delete, stop (A-12); pair with --on-error */
  --on-error:#FFFFFF; /* Label on --error fills */
  --error-container:#f1e0d9; /* Tinted error surface: red outlined hover/press */
  --on-error-container:#743c34; /* Text on --error-container */
  --warning:#8d691f; /* Warning fill for alerts and badges */
  --on-warning:#ffffff; /* Label on --warning */
  --warning-container:#F8E2A4; /* Tinted warning surface */
  --on-warning-container:#4E3B16; /* Text on --warning-container */
  --info:var(--secondary); /* Informational fill (alerts) */
  --on-info:var(--on-secondary); /* Label on --info */
  --info-container:var(--secondary-container); /* Tinted info surface */
  --on-info-container:var(--on-secondary-container); /* Text on --info-container */
  --link:var(--secondary-fg); /* Inline links and text buttons */
  --m-leaf:#3FA34D; /* Mascot leaf green, pinned to the Lottie files */
  --m-ink:#33302B; /* Mascot outline ink */
  --m-pot:#E8703A; /* Mascot pot terracotta */
  --m-cheek:#F6B1B1; /* Mascot blush */
  --m-spark:#F5C242; /* Mascot sparkle */
  --m-drop:#4FA3E0; /* Mascot water drop */
  --m-bud:#F2A9C4; /* Mascot bud pink */
  --m-fruit:#E25C4A; /* Mascot fruit red */
  --m-withered:#A6A69C; /* Mascot withered grey */
  --leaf:var(--m-leaf); /* Leaf fill for brand illustration (alias of mascot leaf) */
  --leaf-2:#63C878; /* Lighter second leaf tone */
  --pot:var(--m-pot); /* Pot fill for brand illustration */
  --sp-2:2px; /* Spacing step 2px for gaps, padding and margins */
  --sp-4:4px; /* Spacing step 4px for gaps, padding and margins */
  --sp-8:8px; /* Spacing step 8px for gaps, padding and margins */
  --sp-12:12px; /* Spacing step 12px for gaps, padding and margins */
  --sp-16:16px; /* Spacing step 16px for gaps, padding and margins */
  --sp-20:20px; /* Spacing step 20px for gaps, padding and margins */
  --sp-24:24px; /* Spacing step 24px for gaps, padding and margins */
  --sp-32:32px; /* Spacing step 32px for gaps, padding and margins */
  --sp-40:40px; /* Approved collection and empty-state vertical inset */
  --sp-48:48px; /* Spacing step 48px for gaps, padding and margins */
  --sp-64:64px; /* Spacing step 64px for gaps, padding and margins */
  --opt-1:1px; /* Hairline option width (1px) for fine strokes */
  --opt-3:3px; /* Thick option width (3px) for emphasised strokes */
  --r-none:0; /* Square corners */
  --r-2xs:4px; /* Radius for tiny marks: state chips, bars, swatches */
  --r-xs:8px; /* Radius for chips, badges and small controls */
  --r-sm:8px; /* Radius for inputs, code blocks and menus */
  --r-md:14px; /* Radius for folder cards, callouts and sheets */
  --r-lg:20px; /* Radius for cards, dialogs and lists */
  --r-xl:28px; /* Radius for large hero surfaces */
  --r-full:999px; /* Pill radius for buttons and FAB */
  --shadow-ink:174 198 207; /* RGB channels of the ink shadow for translucent compositions */
  --elev-0:none; /* No shadow */
  --elev-1:0 var(--shadow-level-1-y) var(--shadow-blur) var(--shadow-hard); /* Resting card shadow: hard 2px drop */
  --elev-2:0 var(--shadow-level-2-y) var(--shadow-blur) var(--shadow-hard); /* Elevated card shadow: hard 4px drop */
  --elev-3:0 var(--shadow-level-3-y) var(--shadow-blur) var(--shadow-hard); /* Dialog and menu shadow: hard 6px drop */
  --elev-pop:var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-hard); /* Signature cut-out shadow: filled buttons, FAB, card--pop */
  --elev-pop-sm:var(--shadow-sm-x) var(--shadow-sm-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-hard); /* Collapsed pop shadow: pressed state, folder cards, outlined buttons */
  --frame-ink:var(--stroke) solid var(--ink); /* Standard ink frame: cards, folder cards, button groups */
  --frame-heavy:var(--stroke-heavy) solid var(--ink); /* Heavy ink frame for dialogs */
  --ring:var(--focus); /* Focus ring colour alias */
  --focus-ring:0 0 0 var(--focus-inner) var(--focus-gap), 0 0 0 var(--focus-outer) var(--focus); /* Two-ring keyboard focus: surface gap then focus colour */
  --signature:var(--accent); /* Brand signature accent alias */
  --wash:var(--primary-container); /* Pale green wash behind marked/pending blocks */
  --sync-pending-bg:var(--warning-container); /* Background of a pending sync change */
  --sync-pending-edge:var(--warning-fg); /* Edge marker of a pending sync change */
  --font-brand:'Newsreader',Georgia,serif; /* Bonsai wordmark; landing headings opt into their separate editorial role */
  --brand-weight:500; /* Printed wordmark weight */
  --font-display:'Manrope','PingFang SC',system-ui,sans-serif; /* Interface headings, category titles and buttons */
  --font-body:'Manrope','PingFang SC',-apple-system,BlinkMacSystemFont,sans-serif; /* Interface body, card titles, labels and captions */
  --font-hand:var(--font-body); /* Handwritten role face (currently the body face) */
  --font-ui:var(--font-display); /* UI control face alias (display face) */
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace; /* Monospace for code and source editors */
  --dur-fast:120ms; /* Fast motion: hover, press, chips */
  --dur-base:240ms; /* Standard motion: menus, sheets */
  --dur-slow:420ms; /* Slow motion: page and drawer transitions */
  --ease:cubic-bezier(.2,.8,.2,1); /* Standard easing */
  --ease-spring:cubic-bezier(.34,1.5,.5,1); /* Overshooting spring easing for playful motion */
  --icon-size:24px; /* Default icon viewport (24) */
  /* Size is the square SVG viewport, including its centered artwork safe area. */
  --icon-size-18:var(--icon-sm); /* Icon size 18: inline glyphs */
  --icon-size-20:var(--icon-button); /* Icon size 20: icon buttons */
  --icon-size-24:var(--icon-size); /* Icon size 24: default */
  --icon-size-32:var(--sp-32); /* Icon size 32: emphasised glyphs */
  --icon-size-40:calc(var(--sp-32) + var(--sp-8)); /* Icon size 40: leading slots */
  --icon-stroke:1.65; /* Icon stroke width in viewport units */
  --outline:var(--control-border); /* Outline colour for bordered controls in this theme */
  --shadow-hard:#aec6cf; /* Colored cast: blue daylight; subdued lifted blue in Dark */
  --control-border:#7b8073; /* Border of inputs, checkboxes and switches (≥ 3:1 on surfaces) */
  --focus:var(--secondary-fg); /* Keyboard focus colour */
  --task-blocked:var(--muted); /* Task state blocked / todo foreground */
  --task-actionable:var(--secondary-fg); /* Task state actionable foreground */
  --task-done:var(--primary-fg); /* Task state done foreground */
  --task-blocker:var(--warning-fg); /* Task state blocker foreground */
  --callout-note:var(--task-actionable); /* Callout note accent (also unknown callout types) */
  --callout-warning:var(--warning-fg); /* Callout warning accent */
  --callout-danger:var(--error-fg); /* Callout danger accent */
  --callout-example:var(--task-blocked); /* Callout example accent */
  --code-bg:var(--surface-sunken); /* Code block background */
  --code-fg:var(--on-surface); /* Code text */
  --selection:var(--secondary-container); /* Text selection background */
  --on-selection:var(--secondary-fg); /* Selected text colour */
  --disabled-bg:var(--surface-sunken); /* Disabled control fill */
  --on-disabled:var(--muted); /* Disabled label (kept readable) */
  --on-surface-2:var(--on-surface); /* Text on raised paper */
  --on-surface-sunken:var(--on-surface); /* Text on recessed paper */
  --on-wash:var(--on-surface); /* Text on --wash */
  --on-bloom:#3A1720; /* Text on --bloom */
  --text-muted:var(--muted); /* Secondary text: metadata, helper text, captions */
  --inverse-surface:var(--on-surface); /* Inverse surface for snackbars and tooltips */
  --on-inverse-surface:var(--surface); /* Text on the inverse surface */
  --inverse-link:#9CDEAA; /* Action link on the inverse surface */
  --control-hover:var(--primary-container); /* Hover fill for neutral controls and rows */
  --on-control-hover:var(--primary-fg); /* Text on --control-hover */
  --control-pressed:var(--primary-container); /* Pressed fill for neutral controls */
  --on-control-pressed:var(--primary-fg); /* Text on --control-pressed */
  --control-selected:var(--primary-container); /* Selected fill for rows, radios and filters */
  --on-control-selected:var(--on-primary-container); /* Text on --control-selected */
  --focus-gap:var(--surface); /* Gap ring between a control and its focus ring */
  --link-hover:var(--secondary-strong); /* Link hover colour */
  --primary-hover:var(--primary-strong); /* Filled green hover fill */
  --on-primary-hover:var(--on-primary); /* Label on filled green hover */
  --secondary-hover:var(--secondary-strong); /* Filled blue hover fill */
  --on-secondary-hover:var(--on-secondary); /* Label on filled blue hover */
  /* Semantic aliases also project into the no-JavaScript system theme. */
  --action-primary-pressed:var(--primary-container); /* Pressed fill of green actions (lighter, A-40) */
  --on-action-primary-pressed:var(--on-primary-container); /* Label on pressed green */
  --action-secondary-pressed:var(--secondary-container); /* Pressed fill of blue actions */
  --on-action-secondary-pressed:var(--on-secondary-container); /* Label on pressed blue */
  --action-success-pressed:var(--success-container); /* Pressed fill of success actions */
  --on-action-success-pressed:var(--on-success-container); /* Label on pressed success */
  --action-error-pressed:var(--error-container); /* Pressed fill of red actions */
  --on-action-error-pressed:var(--on-error-container); /* Label on pressed red */
  --action-error-hover:var(--error-fg); /* Filled red hover fill */
  --action-success-hover:var(--success-fg); /* Filled success hover fill */
  --primary-fg:var(--primary); /* Green as small text, outline or icon on paper (outlined/text buttons) */
  --secondary-fg:var(--secondary); /* Blue as small text or outline on paper */
  --error-fg:var(--error); /* Red as small text or outline on paper */
  --success-fg:var(--primary-fg); /* Success as small text on paper */
  --warning-fg:#865600; /* Warning as small text on paper */
  --on-task-blocked:#FFFFFF; /* Label on a solid blocked task fill */
  --task-blocked-container:var(--surface-sunken); /* Tinted container of the blocked task state */
  --on-task-blocked-container:var(--on-surface); /* Text on the blocked task container */
  --on-task-actionable:#FFFFFF; /* Label on a solid actionable task fill */
  --task-actionable-container:var(--secondary-container); /* Tinted container of the actionable task state */
  --on-task-actionable-container:var(--secondary-fg); /* Text on the actionable task container */
  --on-task-done:#FFFFFF; /* Label on a solid done task fill */
  --task-done-container:var(--primary-container); /* Tinted container of the done task state */
  --on-task-done-container:var(--primary-fg); /* Text on the done task container */
  --on-task-blocker:#FFFFFF; /* Label on a solid blocker task fill */
  --task-blocker-container:var(--warning-container); /* Tinted container of the blocker task state */
  --on-task-blocker-container:var(--on-warning-container); /* Text on the blocker task container */
  --on-callout-note:#FFFFFF; /* Label on a solid note callout fill */
  --callout-note-container:var(--surface-2); /* Tinted container of the note callout state */
  --on-callout-note-container:var(--on-surface-2); /* Text on the note callout container */
  --callout-tip:var(--task-done); /* Callout tip accent */
  --on-callout-tip:#FFFFFF; /* Label on a solid tip callout fill */
  --callout-tip-container:var(--surface-2); /* Tinted container of the tip callout state */
  --on-callout-tip-container:var(--on-surface-2); /* Text on the tip callout container */
  --on-callout-warning:#FFFFFF; /* Label on a solid warning callout fill */
  --callout-warning-container:var(--surface-2); /* Tinted container of the warning callout state */
  --on-callout-warning-container:var(--on-surface-2); /* Text on the warning callout container */
  --on-callout-danger:#FFFFFF; /* Label on a solid danger callout fill */
  --callout-danger-container:var(--surface-2); /* Tinted container of the danger callout state */
  --on-callout-danger-container:var(--on-surface-2); /* Text on the danger callout container */
  --callout-success:var(--task-done); /* Callout success accent */
  --on-callout-success:#FFFFFF; /* Label on a solid success callout fill */
  --callout-success-container:var(--surface-2); /* Tinted container of the success callout state */
  --on-callout-success-container:var(--on-surface-2); /* Text on the success callout container */
  --callout-question:var(--task-actionable); /* Callout question accent */
  --on-callout-question:#FFFFFF; /* Label on a solid question callout fill */
  --callout-question-container:var(--surface-2); /* Tinted container of the question callout state */
  --on-callout-question-container:var(--on-surface-2); /* Text on the question callout container */
  --callout-quote:var(--task-blocked); /* Callout quote accent */
  --on-callout-quote:#FFFFFF; /* Label on a solid quote callout fill */
  --callout-quote-container:var(--surface-2); /* Tinted container of the quote callout state */
  --on-callout-quote-container:var(--on-surface-2); /* Text on the quote callout container */
  --on-callout-example:#FFFFFF; /* Label on a solid example callout fill */
  --callout-example-container:var(--surface-2); /* Tinted container of the example callout state */
  --on-callout-example-container:var(--on-surface-2); /* Text on the example callout container */
  --callout-todo:var(--task-done); /* Callout todo accent */
  --on-callout-todo:#FFFFFF; /* Label on a solid todo callout fill */
  --callout-todo-container:var(--surface-2); /* Tinted container of the todo callout state */
  --on-callout-todo-container:var(--on-surface-2); /* Text on the todo callout container */
  --timeline-done:var(--task-done); /* Timeline done accent */
  --on-timeline-done:var(--on-task-done); /* Label on a solid done timeline fill */
  --timeline-done-container:var(--task-done-container); /* Tinted container of the done timeline state */
  --on-timeline-done-container:var(--on-task-done-container); /* Text on the done timeline container */
  --timeline-next:var(--task-actionable); /* Timeline next accent */
  --on-timeline-next:var(--on-task-actionable); /* Label on a solid next timeline fill */
  --timeline-next-container:var(--task-actionable-container); /* Tinted container of the next timeline state */
  --on-timeline-next-container:var(--on-task-actionable-container); /* Text on the next timeline container */
  --timeline-wait:var(--task-blocker); /* Timeline wait accent */
  --on-timeline-wait:var(--on-task-blocker); /* Label on a solid wait timeline fill */
  --timeline-wait-container:var(--task-blocker-container); /* Tinted container of the wait timeline state */
  --on-timeline-wait-container:var(--on-task-blocker-container); /* Text on the wait timeline container */
  --timeline-todo:var(--task-blocked); /* Timeline todo accent */
  --on-timeline-todo:var(--on-task-blocked); /* Label on a solid todo timeline fill */
  --timeline-todo-container:var(--task-blocked-container); /* Tinted container of the todo timeline state */
  --on-timeline-todo-container:var(--on-task-blocked-container); /* Text on the todo timeline container */
  --habit-checked:var(--task-done); /* Habit cell done fill */
  --on-habit-checked:var(--on-task-done); /* Glyph on a done habit cell */
  --habit-empty:var(--surface-sunken); /* Habit cell not done fill */
  --on-habit-empty:var(--text-muted); /* Glyph on an empty habit cell */
  --habit-inactive:var(--disabled-bg); /* Habit cell before the habit started */
  --on-habit-inactive:var(--on-disabled); /* Glyph on an inactive habit cell */
  --habit-today-ring:var(--focus); /* Ring around today's habit cell */
  --habit-border:var(--control-border); /* Habit cell border */
  --table-header:var(--muted-surface); /* Note table header fill */
  --on-table-header:var(--on-muted-surface); /* Note table header text */
  --mermaid-node:var(--primary-container); /* Diagram node fill */
  --on-mermaid-node:var(--on-primary-container); /* Diagram node text */
  --mermaid-line:var(--control-border); /* Diagram edges and node borders */
  --stroke-thin:1px; /* 1px stroke: dividers, habit cells */
  --stroke:1px; /* Standard 2px stroke: frames, outlines */
  --stroke-heavy:1px; /* 2.5px stroke: dialogs, task boxes */
  --stroke-focus:2px; /* 3px keyboard focus outline */
  --focus-offset:3px; /* Focus outline offset */
  --focus-inner:2px; /* Inner focus ring width */
  --focus-outer:5px; /* Outer focus ring width */
  --touch-min:48px; /* Minimum interactive target (48) */
  --touch-large:56px; /* Large control height (56) */
  --touch-fab:60px; /* FAB diameter (60) */
  --icon-sm:18px; /* Small icon (18) */
  --icon-lg:30px; /* Large icon (30) */
  --table-body-size:14px; /* Table and Web list body size */
  --table-body-weight:500; /* Table body weight */
  --icon-button:20px; /* Icon button glyph size */
  --icon-fab:26px; /* FAB glyph size */
  --icon-alert:22px; /* Alert leading icon size */
  --icon-chip:16px; /* Chip glyph size */
  --icon-check-stroke:3; /* Checkmark stroke width in viewport units */
  --shadow-x:2px; /* Pop shadow x offset */
  --shadow-y:2px; /* Pop shadow y offset */
  --shadow-blur:.4px; /* Fine frosted edge of the 2px colored cast shadow */
  --shadow-spread:0px; /* Shadow spread */
  --shadow-sm-x:2px; /* Small pop shadow x offset */
  --shadow-sm-y:2px; /* Small pop shadow y offset */
  --shadow-level-1-y:1px; /* Elevation 1 drop */
  --shadow-level-2-y:2px; /* Elevation 2 drop */
  --shadow-level-3-y:4px; /* Elevation 3 drop */
  --check-size:18px; /* Checkbox and task box size */
  --switch-width:52px; /* Switch track width */
  --switch-height:30px; /* Switch track height */
  --switch-thumb:22px; /* Switch thumb diameter */
  --field-height:48px; /* Text field control height */
  --control-radius:5px; /* Radius of checkbox boxes and small controls */
  --habit-size:24px; /* Habit cell size */
  --font-folder-emoji:32px; /* Leading emoji size on folder cards */
  --line-folder-emoji:1.2; /* Line height of the folder emoji slot */
  --font-code:12px; /* Inline/fenced code size */
  --line-code:1.5; /* Code line height */
  --font-code-label:10px; /* Code language label size */
  --tracking-code-label:.8px; /* Code label letter spacing */
  --type-display-size:39px; /* Type role display: font size */
  --type-display-weight:700; /* Type role display: weight */
  --type-display-line:1.2; /* Type role display: line height */
  --type-display-tracking:-.5px; /* Type role display: letter spacing */
  --type-h1-size:39px; /* Type role h1: font size */
  --type-h1-weight:700; /* Type role h1: weight */
  --type-h1-line:1.2; /* Type role h1: line height */
  --type-h1-tracking:-.5px; /* Type role h1: letter spacing */
  --type-h2-size:23px; /* Type role h2: font size */
  --type-h2-weight:700; /* Type role h2: weight */
  --type-h2-line:1.2; /* Type role h2: line height */
  --type-h2-tracking:-0.23px; /* Type role h2: letter spacing */
  --type-title-size:16px; /* Type role title: font size */
  --type-title-weight:700; /* Type role title: weight */
  --type-title-line:1.3; /* Type role title: line height */
  --type-title-tracking:-0.095px; /* Type role title: letter spacing */
  --type-subtitle-size:15px; /* Type role subtitle: font size */
  --type-subtitle-weight:700; /* Type role subtitle: weight */
  --type-subtitle-line:1.4; /* Type role subtitle: line height */
  --type-subtitle-tracking:0px; /* Type role subtitle: letter spacing */
  --type-body-size:14px; /* Type role body: font size */
  --type-body-weight:400; /* Type role body: weight */
  --type-body-line:1.6; /* Type role body: line height */
  --type-body-tracking:0px; /* Type role body: letter spacing */
  --type-body-sm-size:13px; /* Type role body-sm: font size */
  --type-body-sm-weight:400; /* Type role body-sm: weight */
  --type-body-sm-line:1.55; /* Type role body-sm: line height */
  --type-body-sm-tracking:0px; /* Type role body-sm: letter spacing */
  --type-label-size:12px; /* Type role label: font size */
  --type-label-weight:700; /* Type role label: weight */
  --type-label-line:1.3; /* Type role label: line height */
  --type-label-tracking:0.96px; /* Type role label: letter spacing */
  --type-caption-size:11px; /* Type role caption: font size */
  --type-caption-weight:400; /* Type role caption: weight */
  --type-caption-line:1.4; /* Type role caption: line height */
  --type-caption-tracking:0px; /* Type role caption: letter spacing */
  --type-hand-size:22px; /* Type role hand: font size */
  --type-hand-weight:400; /* Type role hand: weight */
  --type-hand-line:1.2; /* Type role hand: line height */
  --type-hand-tracking:0px; /* Type role hand: letter spacing */
  --type-mono-size:13px; /* Type role mono: font size */
  --type-mono-weight:500; /* Type role mono: weight */
  --type-mono-line:1.5; /* Type role mono: line height */
  --type-mono-tracking:0px; /* Type role mono: letter spacing */
  --legacy-primary-light:#226539; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-primary-dark:#123A1E; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-text-disabled:#97A088; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-divider:#26302A1F; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-outline:#26302A38; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-accent-tint:#2C824829; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-cat-neutral:#6A7562; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-cat-archive:#8B927F; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-st-actionable:#2C8248; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-st-blocked:#6A7562; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-st-blocker:#B93A2C; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-st-warning:#8A621A; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-st-foundation:#75612B; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-task-orange:#D97728; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-grain:#4A5244; /* Pre-D5 light-only compatibility colour; not an active theme role */
  --legacy-type-display-size:28px; /* Pre-D5 light-only type value (display size); compatibility layer, not an active role */
  --legacy-type-display-weight:800; /* Pre-D5 light-only type value (display weight); compatibility layer, not an active role */
  --legacy-type-display-line:1.12; /* Pre-D5 light-only type value (display line); compatibility layer, not an active role */
  --legacy-type-display-tracking:-0.3px; /* Pre-D5 light-only type value (display tracking); compatibility layer, not an active role */
  --legacy-type-h2-size:21px; /* Pre-D5 light-only type value (h2 size); compatibility layer, not an active role */
  --legacy-type-h2-weight:700; /* Pre-D5 light-only type value (h2 weight); compatibility layer, not an active role */
  --legacy-type-h2-line:1; /* Pre-D5 light-only type value (h2 line); compatibility layer, not an active role */
  --legacy-type-h2-tracking:0px; /* Pre-D5 light-only type value (h2 tracking); compatibility layer, not an active role */
  --legacy-type-title-size:17px; /* Pre-D5 light-only type value (title size); compatibility layer, not an active role */
  --legacy-type-title-weight:700; /* Pre-D5 light-only type value (title weight); compatibility layer, not an active role */
  --legacy-type-title-line:1; /* Pre-D5 light-only type value (title line); compatibility layer, not an active role */
  --legacy-type-title-tracking:0px; /* Pre-D5 light-only type value (title tracking); compatibility layer, not an active role */
  --legacy-type-body-size:15px; /* Pre-D5 light-only type value (body size); compatibility layer, not an active role */
  --legacy-type-body-weight:400; /* Pre-D5 light-only type value (body weight); compatibility layer, not an active role */
  --legacy-type-body-line:1.5; /* Pre-D5 light-only type value (body line); compatibility layer, not an active role */
  --legacy-type-body-tracking:0px; /* Pre-D5 light-only type value (body tracking); compatibility layer, not an active role */
  --legacy-type-body2-size:13px; /* Pre-D5 light-only type value (body2 size); compatibility layer, not an active role */
  --legacy-type-body2-weight:400; /* Pre-D5 light-only type value (body2 weight); compatibility layer, not an active role */
  --legacy-type-body2-line:1.45; /* Pre-D5 light-only type value (body2 line); compatibility layer, not an active role */
  --legacy-type-body2-tracking:0px; /* Pre-D5 light-only type value (body2 tracking); compatibility layer, not an active role */
  --legacy-type-label-size:12px; /* Pre-D5 light-only type value (label size); compatibility layer, not an active role */
  --legacy-type-label-weight:700; /* Pre-D5 light-only type value (label weight); compatibility layer, not an active role */
  --legacy-type-label-line:1; /* Pre-D5 light-only type value (label line); compatibility layer, not an active role */
  --legacy-type-label-tracking:0.4px; /* Pre-D5 light-only type value (label tracking); compatibility layer, not an active role */
  --legacy-type-overline-size:10px; /* Pre-D5 light-only type value (overline size); compatibility layer, not an active role */
  --legacy-type-overline-weight:800; /* Pre-D5 light-only type value (overline weight); compatibility layer, not an active role */
  --legacy-type-overline-line:1; /* Pre-D5 light-only type value (overline line); compatibility layer, not an active role */
  --legacy-type-overline-tracking:1.5px; /* Pre-D5 light-only type value (overline tracking); compatibility layer, not an active role */
  --layout-section-gap:var(--sp-32);
  --layout-section-gap-narrow:var(--sp-24); /* Distinct page sections */
  --layout-group-gap:var(--sp-24); /* Related groups within a section */
  --layout-control-gap:var(--sp-16); /* Default vertical stack of controls */
  --layout-inset:var(--sp-16); /* Default component content inset */
  --layout-inline-gap:var(--sp-8); /* Related inline controls and icon labels */
  --layout-label-gap:var(--sp-4); /* Label, input and helper text */
  --layout-detail-gap:var(--sp-2); /* Optical micro-spacing only */
  --workspace-seam:var(--surface-2); /* Near-white slit between workspace bands */
  --mascot-image:url("brands/bonsai-clay.png"); /* Day identity master; Night keeps its canopy, face, trunk and pot design */
  --mascot-happy-image:url("brands/bonsai-clay-happy.png"); /* Authored Day smile texture for continuous contour animation */
  --mascot-light-opacity:0; /* Night-light visibility in the active theme */
  --canvas-glow-a:#c6cba9; /* Diffuse lower-left botanical color field */
  --canvas-glow-b:#e4b6a1; /* Diffuse upper-right atmospheric color field */
  --canvas-glow-c:#d9e4db; /* Diffuse lower atmospheric color field */
  --glass:rgba(249,244,234,.42); /* Translucent navigation and conversation surface */
  --glass-border:rgba(255,251,242,.76); /* Fine edge of navigation glass */
  --shadow-fleck:#cdb7a0; /* Sparse colored flecks inside cast shadows */
  --lamp-warm:rgba(239,177,112,0); /* Local warm-orange light behind the night mascot */
  --glass-blur:24px; /* Navigation backdrop blur */
  --film-tile:url("brands/film-grain.png"); /* Approved low-alpha film; navigation and local lamp only */
  --film-size:192px; /* Local film tile size */
  --film-alpha:16; /* Maximum 8-bit film alpha; confined to navigation and shadows */
  --lamp-scale:1.04; /* Silhouette expansion without lateral offset */
  --lamp-blur:7px; /* Local night-light diffusion */
  --lamp-frost-opacity:.22; /* Fine frost strength around the night light */
  --lamp-frost-blur:.6px; /* Fine local frost diffusion */
  --button-height:40px; /* Refined visible button height; coarse pointers retain touch-min */
  --button-padding:18px; /* Approved horizontal button padding */
  --button-size:13px; /* Approved standard button label size */
  --button-small-size:11px; /* Approved compact button label size */
  --button-line:normal; /* Preserve the approved font intrinsic line box */
  --folder-line:normal; /* Approved folder title and metadata line boxes */
  --button-weight:700; /* Approved button label weight */
  --folder-padding:20px; /* Desktop folder card padding */
  --folder-mobile-pad-x:14px; /* Mobile folder card horizontal padding */
  --folder-mobile-pad-y:17px; /* Mobile folder card vertical padding */
  --folder-title-size:16px; /* Desktop folder title size */
  --folder-meta-size:12px; /* Desktop folder metadata size */
  --folder-title-gap:5px; /* Folder title-to-metadata gap */
  --folder-slot:44px; /* Desktop folder leading slot */
  --folder-mobile-slot:37px; /* Mobile folder leading slot */
  --folder-icon-radius:12px; /* Desktop folder leading tile radius */
  --folder-mobile-icon-radius:10px; /* Mobile folder leading tile radius */
  --workspace-chat-width:320px; /* Default conversation column width */
  --workspace-mobile-header:62px; /* Mobile workspace header height */
  --workspace-brand-size:25px; /* Desktop brand size */
  --workspace-mobile-brand-size:22px; /* Mobile brand size */
  --workspace-brand-width:40px; /* Desktop mascot image width */
  --workspace-brand-height:44px; /* Desktop mascot image height */
  --workspace-mobile-brand-width:30px; /* Mobile mascot image width */
  --workspace-mobile-brand-height:36px; /* Mobile mascot image height */
  --collection-mobile-title-size:32px; /* Mobile collection title size */
  --note-mobile-h2-size:23px; /* Approved narrow reader section heading */
  --note-reading-line:1.75; /* Approved paragraph leading in the web reader */
  --note-reading-tracking:-.6px; /* Approved heading tracking in the web reader */
  --callout-reading-inset:20px; /* Quiet reader callout left inset */
  --callout-reading-mobile-inset:15px; /* Quiet reader callout left inset on narrow screens */
  --callout-reading-margin:28px; /* Quiet reader callout block separation */
  --note-mobile-h1-size:35px; /* Mobile note H1 size */
  --composer-font-size:12px; /* Desktop composer text size */
  --mascot-nav-width:104px; /* Navigation mascot width */
  --mascot-nav-height:116px; /* Navigation mascot height */
  --mascot-hero-width:160px; /* Conversation empty-state mascot width */
  --mascot-hero-height:180px; /* Conversation empty-state mascot height */
  --mascot-footer-width:65px; /* Collection footer mascot width */
  --mascot-footer-height:70px; /* Collection footer mascot height */
  --canvas-atmosphere:radial-gradient(ellipse at 0% 82%,var(--canvas-glow-a),transparent 62%),radial-gradient(ellipse at 103% 26%,var(--canvas-glow-b),transparent 59%),radial-gradient(ellipse at 65% 105%,var(--canvas-glow-c),transparent 55%); /* Approved three-field ambient background; never behind note text */
  --elev-button:0 1px 1px #1b384108; /* Quiet button elevation from the approved study */
  --workspace-canvas:#e9e2d5; /* Decorative canvas under translucent chrome; text sits on named surfaces */
  --glyph-subtle:#7b8073; /* Decorative trailing glyphs, separate from small readable text */
}
:root[data-theme="matcha-dark"]{
  --disabled-grayscale:0;
  --input-focus:var(--focus);
  color-scheme:dark;
  --backdrop:#26302A;
  --on-backdrop:#FCFBF4;
  --bg:#102330;
  --on-bg:#e7f0ec;
  --surface:#182a34;
  --on-surface:#e7f0ec;
  --surface-2:#233941;
  --surface-sunken:#102330;
  --muted-surface:#263e39;
  --on-muted-surface:#e7f0ec;
  --muted:#adc0c0;
  --subtle:#9bb4b7;
  --primary:#8ab5a9;
  --on-primary:#17382d;
  --primary-strong:#86b0a4;
  --primary-container:#263e39;
  --on-primary-container:var(--primary-fg);
  --secondary:#a5c9e8;
  --on-secondary:#203345;
  --secondary-strong:#a0c3e1;
  --secondary-container:#273e4b;
  --on-secondary-container:var(--secondary-fg);
  --accent:#F0CE78;
  --on-accent:#392E13;
  --bloom:#F1A7B8;
  --ink:#415a67;
  --outline:var(--control-border);
  --shadow-hard:#648195;
  --control-border:#9bb4b7;
  --border:#3c545e;
  --border-faint:#273e4b;
  --hairline:rgba(231,240,236,.10);
  --success:var(--primary);
  --on-success:var(--on-primary);
  --success-container:var(--primary-container);
  --on-success-container:var(--on-primary-container);
  --error:#efa59a;
  --on-error:#481e21;
  --error-container:#50343a;
  --on-error-container:#ffded9;
  --warning:#E5C16D;
  --on-warning:#392e13;
  --warning-container:#574821;
  --on-warning-container:#FFE7A3;
  --info:var(--secondary);
  --on-info:var(--on-secondary);
  --info-container:var(--secondary-container);
  --on-info-container:var(--on-secondary-container);
  --link:var(--secondary-fg);
  --focus:var(--secondary-fg);
  --ring:var(--focus);
  --task-blocked:var(--muted);
  --task-actionable:var(--secondary-fg);
  --task-done:var(--primary-fg);
  --task-blocker:var(--warning-fg);
  --callout-note:var(--task-actionable);
  --callout-warning:var(--warning-fg);
  --callout-danger:var(--error-fg);
  --callout-example:var(--task-blocked);
  --code-bg:var(--surface-sunken);
  --code-fg:var(--on-surface);
  --selection:var(--secondary-container);
  --on-selection:var(--secondary-fg);
  --disabled-bg:var(--surface-sunken);
  --on-disabled:var(--muted);
  --wash:var(--primary-container);
  --sync-pending-bg:var(--warning-container);
  --sync-pending-edge:var(--warning-fg);
  --shadow-ink:100 129 149;
  --on-surface-2:var(--on-surface);
  --on-surface-sunken:var(--on-surface);
  --on-wash:var(--on-surface);
  --on-bloom:#3A1720;
  --text-muted:var(--muted);
  --inverse-surface:var(--on-surface);
  --on-inverse-surface:var(--surface);
  --inverse-link:#245F8C;
  --control-hover:var(--primary-container);
  --on-control-hover:var(--primary-fg);
  --control-pressed:var(--primary-container);
  --on-control-pressed:var(--primary-fg);
  --control-selected:var(--primary-container);
  --on-control-selected:var(--on-primary-container);
  --focus-gap:var(--surface);
  --link-hover:var(--secondary-strong);
  --primary-hover:var(--primary-strong);
  --on-primary-hover:var(--on-primary);
  --secondary-hover:var(--secondary-strong);
  --on-secondary-hover:var(--on-secondary);
  /* Semantic aliases also project into the no-JavaScript system theme. */
  --action-primary-pressed:var(--on-primary-container);
  --on-action-primary-pressed:var(--on-primary);
  --action-secondary-pressed:var(--on-secondary-container);
  --on-action-secondary-pressed:var(--on-secondary);
  --action-success-pressed:var(--on-success-container);
  --on-action-success-pressed:var(--on-success);
  --action-error-pressed:var(--on-error-container);
  --on-action-error-pressed:var(--on-error);
  --action-error-hover:var(--on-error-container);
  --action-success-hover:var(--primary-hover);
  --primary-fg:#a3d4c3;
  --secondary-fg:var(--secondary);
  --error-fg:var(--error);
  --success-fg:var(--primary-fg);
  --warning-fg:var(--warning);
  --on-task-blocked:#203345;
  --task-blocked-container:var(--surface-sunken);
  --on-task-blocked-container:var(--on-surface);
  --on-task-actionable:#203345;
  --task-actionable-container:var(--secondary-container);
  --on-task-actionable-container:var(--secondary-fg);
  --on-task-done:#183224;
  --task-done-container:var(--primary-container);
  --on-task-done-container:var(--primary-fg);
  --on-task-blocker:#362515;
  --task-blocker-container:var(--warning-container);
  --on-task-blocker-container:var(--on-warning-container);
  --on-callout-note:#203345;
  --callout-note-container:var(--surface-2);
  --on-callout-note-container:var(--on-surface-2);
  --callout-tip:var(--task-done);
  --on-callout-tip:#203345;
  --callout-tip-container:var(--surface-2);
  --on-callout-tip-container:var(--on-surface-2);
  --on-callout-warning:#392E13;
  --callout-warning-container:var(--surface-2);
  --on-callout-warning-container:var(--on-surface-2);
  --on-callout-danger:#481E21;
  --callout-danger-container:var(--surface-2);
  --on-callout-danger-container:var(--on-surface-2);
  --callout-success:var(--task-done);
  --on-callout-success:#203345;
  --callout-success-container:var(--surface-2);
  --on-callout-success-container:var(--on-surface-2);
  --callout-question:var(--task-actionable);
  --on-callout-question:#203345;
  --callout-question-container:var(--surface-2);
  --on-callout-question-container:var(--on-surface-2);
  --callout-quote:var(--task-blocked);
  --on-callout-quote:#203345;
  --callout-quote-container:var(--surface-2);
  --on-callout-quote-container:var(--on-surface-2);
  --on-callout-example:#203345;
  --callout-example-container:var(--surface-2);
  --on-callout-example-container:var(--on-surface-2);
  --callout-todo:var(--task-done);
  --on-callout-todo:#203345;
  --callout-todo-container:var(--surface-2);
  --on-callout-todo-container:var(--on-surface-2);
  --timeline-done:var(--task-done);
  --on-timeline-done:var(--on-task-done);
  --timeline-done-container:var(--task-done-container);
  --on-timeline-done-container:var(--on-task-done-container);
  --timeline-next:var(--task-actionable);
  --on-timeline-next:var(--on-task-actionable);
  --timeline-next-container:var(--task-actionable-container);
  --on-timeline-next-container:var(--on-task-actionable-container);
  --timeline-wait:var(--task-blocker);
  --on-timeline-wait:var(--on-task-blocker);
  --timeline-wait-container:var(--task-blocker-container);
  --on-timeline-wait-container:var(--on-task-blocker-container);
  --timeline-todo:var(--task-blocked);
  --on-timeline-todo:var(--on-task-blocked);
  --timeline-todo-container:var(--task-blocked-container);
  --on-timeline-todo-container:var(--on-task-blocked-container);
  --habit-checked:var(--task-done);
  --on-habit-checked:var(--on-task-done);
  --habit-empty:var(--surface-sunken);
  --on-habit-empty:var(--text-muted);
  --habit-inactive:var(--disabled-bg);
  --on-habit-inactive:var(--on-disabled);
  --habit-today-ring:var(--focus);
  --habit-border:var(--control-border);
  --table-header:var(--muted-surface);
  --on-table-header:var(--on-muted-surface);
  --mermaid-node:var(--primary-container);
  --on-mermaid-node:var(--on-primary-container);
  --mermaid-line:var(--control-border);
  --legacy-primary-light:#226539;
  --legacy-primary-dark:#123A1E;
  --legacy-text-disabled:#97A088;
  --legacy-divider:#26302A1F;
  --legacy-outline:#26302A38;
  --legacy-accent-tint:#2C824829;
  --legacy-cat-neutral:#6A7562;
  --legacy-cat-archive:#8B927F;
  --legacy-st-actionable:#2C8248;
  --legacy-st-blocked:#6A7562;
  --legacy-st-blocker:#B93A2C;
  --legacy-st-warning:#8A621A;
  --legacy-st-foundation:#75612B;
  --legacy-task-orange:#D97728;
  --legacy-grain:#4A5244;
  --m-leaf:#3FA34D;
  --m-ink:#33302B;
  --m-pot:#E8703A;
  --m-cheek:#F6B1B1;
  --m-spark:#F5C242;
  --m-drop:#4FA3E0;
  --m-bud:#F2A9C4;
  --m-fruit:#E25C4A;
  --m-withered:#A6A69C;
  --leaf:var(--m-leaf);
  --leaf-2:#63C878;
  --pot:var(--m-pot);
  --signature:var(--accent);
  --workspace-seam:var(--glass-border);
  --mascot-image:url("brands/bonsai-moon.png"); /* Day identity in the existing mint and blue night palette */
  --mascot-happy-image:url("brands/bonsai-moon-happy.png"); /* Authored Night smile texture with the shared Day identity */
  --mascot-light-opacity:1;
  --canvas-glow-a:#425f5c;
  --canvas-glow-b:#354369;
  --canvas-glow-c:#1c3a47;
  --glass:rgba(24,43,54,.42);
  --glass-border:rgba(180,218,221,.18);
  --shadow-fleck:#4d797d;
  --lamp-warm:rgba(239,177,112,.38);
  --workspace-canvas:#102330;
  --glyph-subtle:#9bb4b7;
}

*{box-sizing:border-box;margin:0;padding:0}

/* =========================================================================
   TYPOGRAPHY scale (~1.25 modular: 15→19→23→29→37→46). Tracking/leading tuned
   per step: tight on big display, airy on body, wide on small labels.
   ========================================================================= */
.t-display{font:var(--type-display-weight) var(--type-display-size)/var(--type-display-line) var(--font-display);letter-spacing:var(--type-display-tracking);color:var(--type-display-color)}
.t-h1{font:var(--type-h1-weight) var(--type-h1-size)/var(--type-h1-line) var(--font-display);letter-spacing:var(--type-h1-tracking);color:var(--type-h1-color)}
.t-h2{font:var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-line) var(--font-display);letter-spacing:var(--type-h2-tracking);color:var(--type-h2-color)}
.t-title{font:var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-body);letter-spacing:var(--type-title-tracking);color:var(--type-title-color)}
.t-subtitle{font:var(--type-subtitle-weight) var(--type-subtitle-size)/var(--type-subtitle-line) var(--font-body);letter-spacing:var(--type-subtitle-tracking);color:var(--type-subtitle-color)}
.t-body{font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-body);letter-spacing:var(--type-body-tracking);color:var(--type-body-color)}
.t-body-sm{font:var(--type-body-sm-weight) var(--type-body-sm-size)/var(--type-body-sm-line) var(--font-body);letter-spacing:var(--type-body-sm-tracking);color:var(--type-body-sm-color)}
.t-label{font:var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-ui);letter-spacing:var(--type-label-tracking);color:var(--type-label-color)}
.t-caption{font:var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-line) var(--font-body);letter-spacing:var(--type-caption-tracking);color:var(--type-caption-color)}
.t-hand{font:var(--type-hand-weight) var(--type-hand-size)/var(--type-hand-line) var(--font-hand);letter-spacing:var(--type-hand-tracking);color:var(--type-hand-color)}
.t-mono{font:var(--type-mono-weight) var(--type-mono-size)/var(--type-mono-line) var(--font-mono);letter-spacing:var(--type-mono-tracking);color:var(--type-mono-color)}

/* =========================================================================
   ICON — inline SVG sprite: <svg class="ico"><use href="#i-home"/></svg>
   Fully token-driven so icons re-theme with the system.
   ========================================================================= */
.ico{width:var(--icon-box,var(--icon-size));height:var(--icon-box,var(--icon-size));display:inline-block;vertical-align:middle;
  fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ico--sm{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm))}
.ico--lg{width:var(--icon-box,var(--icon-lg));height:var(--icon-box,var(--icon-lg))}
.ico[data-size="18"]{--icon-box:var(--icon-size-18)}
.ico[data-size="20"]{--icon-box:var(--icon-size-20)}
.ico[data-size="24"]{--icon-box:var(--icon-size-24)}
.ico[data-size="32"]{--icon-box:var(--icon-size-32)}
.ico[data-size="40"]{--icon-box:var(--icon-size-40)}
.ico--filled{fill:currentColor;stroke:none}
/* Mascot / illustration art (carries its own multi-colour fills via CSS vars). */
.art{display:inline-block;vertical-align:middle;width:64px;height:64px}
.art--sm{width:40px;height:40px}
.art--lg{width:104px;height:104px}
.art--xl{width:160px;height:160px}

/* =========================================================================
   INPUTS
   ========================================================================= */
/* Button — MUI variants (contained/outlined/text) × colors × sizes.
   Contained actions use the approved quiet elevation; cast shadows belong to cards. */
.btn{--btn-c:var(--primary);--btn-on:var(--on-primary);--btn-fg:var(--primary-fg);--btn-hover:var(--primary-hover);--btn-tint:var(--primary-container);--btn-on-tint:var(--on-primary-container);--btn-pressed:var(--action-primary-pressed);--btn-on-pressed:var(--on-action-primary-pressed);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  min-height:var(--button-height);padding:0 var(--button-padding);border-radius:var(--r-sm);cursor:pointer;
  font:var(--button-weight) var(--button-size)/var(--button-line) var(--font-display);letter-spacing:normal;border:var(--stroke) solid transparent;
  background:none;color:var(--on-surface);white-space:nowrap;text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease)}
.btn .ico{width:var(--icon-box,var(--icon-button));height:var(--icon-box,var(--icon-button))}
.btn-contained{background:var(--btn-c);color:var(--btn-on);border-color:transparent;box-shadow:var(--elev-button)}
.btn-contained:hover,.btn-contained.is-hovered{background:var(--btn-hover);color:var(--btn-on)}
.btn-contained:is(:active,.is-pressed){transform:translate(2px,2px);box-shadow:var(--elev-pop-sm)}
.btn-outlined{background:var(--surface-2);border-color:var(--border);color:var(--btn-fg);box-shadow:none}
.btn-outlined:is(:active,.is-pressed){box-shadow:none}
.btn-outlined:hover,.btn-outlined.is-hovered{background:var(--btn-tint);color:var(--btn-on-tint)}
.btn-text{color:var(--btn-fg);padding:0 var(--sp-8);}
.btn-text:hover,.btn-text.is-hovered{background:var(--btn-tint);color:var(--btn-on-tint)}
.btn--secondary{--btn-c:var(--secondary);--btn-on:var(--on-secondary);--btn-fg:var(--secondary-fg);--btn-hover:var(--secondary-hover);--btn-tint:var(--secondary-container);--btn-on-tint:var(--on-secondary-container);--btn-pressed:var(--action-secondary-pressed);--btn-on-pressed:var(--on-action-secondary-pressed)}
.btn--success{--btn-c:var(--success);--btn-on:var(--on-success);--btn-fg:var(--success-fg);--btn-hover:var(--action-success-hover);--btn-tint:var(--success-container);--btn-on-tint:var(--on-success-container);--btn-pressed:var(--action-success-pressed);--btn-on-pressed:var(--on-action-success-pressed)}
.btn--error{--btn-c:var(--error);--btn-on:var(--on-error);--btn-fg:var(--error-fg);--btn-hover:var(--action-error-hover);--btn-tint:var(--error-container);--btn-on-tint:var(--on-error-container);--btn-pressed:var(--action-error-pressed);--btn-on-pressed:var(--on-action-error-pressed)}
.btn--sm{min-height:var(--ui-row-height);padding:0 var(--sp-12);font-size:var(--button-small-size)}
.btn--lg{min-height:var(--touch-large);padding:0 var(--sp-24);font-size:17px}
.btn:disabled,.btn.is-disabled{opacity:1;cursor:not-allowed;box-shadow:none;transform:none;filter:grayscale(var(--disabled-grayscale));pointer-events:none}
.btn:focus-visible{outline:var(--stroke-focus) solid var(--outline);box-shadow:none;outline-offset:var(--sp-4);}

.btn-contained:focus-visible{box-shadow:var(--elev-button)}
.btn-contained:is(:active,.is-pressed):focus-visible{box-shadow:var(--elev-pop-sm)}
.btn-outlined:focus-visible{outline-color:var(--btn-fg);box-shadow:none}
.btn-outlined:is(:active,.is-pressed):focus-visible{box-shadow:none}

/* Button group */
.btn-group{display:inline-flex;border:var(--frame-ink);border-radius:var(--r-full);overflow:hidden;box-shadow:var(--elev-pop-sm)}
.btn-group .btn{border:none;border-radius:0;box-shadow:none;min-height:var(--button-height);padding:0 var(--sp-12);}
.btn-group .btn+.btn{border-left:var(--stroke) solid var(--ink)}
.btn-group .btn.is-active{background:var(--primary);color:var(--on-primary)}

/* Icon button */
.icon-btn{width:var(--touch-min);height:var(--touch-min);display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);cursor:pointer;color:var(--on-surface);background:none;border:var(--stroke) solid transparent;
  transition:transform var(--dur-fast) var(--ease-spring)}
.icon-btn:hover{background:var(--control-hover);color:var(--on-control-hover)}
.icon-btn:active{transform:scale(var(--press-scale))}
.icon-btn--filled{background:var(--primary);color:var(--on-primary);border-color:var(--ink);box-shadow:var(--elev-pop-sm)}
.icon-btn--outlined{border-color:var(--border)}
.icon-btn.is-active{color:var(--secondary-fg)}
.icon-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Anchor and native button hosts share the same undecorated label. */
.icon-btn,.fab{text-decoration:none}

/* FAB */
.fab{height:var(--touch-fab);min-width:var(--touch-fab);padding:0 var(--sp-16);display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  border-radius:var(--r-xl);background:var(--secondary);color:var(--on-secondary);border:var(--stroke-heavy) solid var(--ink);
  box-shadow:var(--elev-pop);cursor:pointer;font:800 15px var(--font-ui);
  transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast) var(--ease)}
.fab .ico{width:var(--icon-box,var(--icon-fab));height:var(--icon-box,var(--icon-fab))}
.fab:active{transform:translate(2px,2px);box-shadow:var(--elev-pop-sm)}
.fab--sm{height:var(--touch-min);min-width:var(--touch-min);border-radius:var(--r-lg)}
.fab--extended{border-radius:var(--r-full)}

/* Checkbox / Radio / Switch — hand-drawn, ink-outlined */
.check{display:inline-flex;align-items:center;gap:var(--sp-8);cursor:pointer;font:600 15px var(--font-body);color:var(--on-surface);min-height:var(--touch-min)}
.check .box{width:var(--check-size);height:var(--check-size);border:var(--stroke-heavy) solid var(--control-border);border-radius:var(--r-xs);background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;color:var(--on-primary);transition:transform var(--dur-fast) var(--ease)}
.check .box .ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm));stroke-width:var(--icon-check-stroke);opacity:0;transform:scale(.4);transition:.16s var(--ease-spring)}
.check.is-checked .box{background:var(--primary)}
.check.is-checked .box .ico{opacity:1;transform:scale(1)}
.check.is-indeterminate .box{background:var(--primary)}
.check .box.radio{border-radius:var(--r-full)}
.check .box.radio .dot{width:var(--sp-12);height:var(--sp-12);border-radius:var(--r-full);background:var(--on-primary);transform:scale(0);transition:.16s var(--ease-spring)}
.check.is-checked .box.radio{background:var(--primary)}
.check.is-checked .box.radio .dot{transform:scale(1)}
.check.is-disabled{opacity:1;pointer-events:none}

.switch{display:inline-flex;align-items:center;gap:var(--sp-12);cursor:pointer;min-height:var(--touch-min)}
.switch .track{width:var(--switch-width);height:var(--switch-height);border-radius:var(--r-full);background:var(--surface-sunken);border:var(--stroke-heavy) solid var(--control-border);
  position:relative;transition:transform var(--dur-base) var(--ease)}
.switch .thumb{position:absolute;top:2px;left:2px;width:var(--switch-thumb);height:var(--switch-thumb);border-radius:var(--r-full);background:var(--control-border);
  transition:transform var(--dur-base) var(--ease-spring)}
.switch.is-on .track{background:var(--primary)}
.switch.is-on .thumb{transform:translateX(22px);background:var(--on-primary)}
.switch.is-disabled{opacity:1;pointer-events:none}
/* 开关也可以是 <button role=switch>:去掉 UA 的按钮皮,其余和 span 宿主一样 */
button.switch{background:none;border:0;padding:0;font:inherit;color:inherit}

/* Text field — filled / outlined / standard, with label + helper/error */
.field{display:inline-flex;flex-direction:column;gap:var(--sp-4);width:260px;max-width:100%}
.field .lab{font:700 13px var(--font-ui);color:var(--muted);letter-spacing:.01em}
.field .ctl{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--touch-min);padding:0 var(--sp-12);
  font:500 var(--ui-body-size) var(--font-body);color:var(--on-surface);background:var(--surface);
  border:var(--stroke) solid var(--ink);border-radius:var(--r-md);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.field .ctl .ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm));color:var(--subtle)}
/* Input chips are touch-sized: keep a gap above and below them instead of letting them touch the outline. */
.field .ctl:has(> .chip){padding-block:var(--sp-8)}
.field .ctl :is(input,textarea,select){border:none;outline:none;background:none;flex:1;font:inherit;color:inherit;min-width:0}
.field .ctl input::placeholder{color:var(--subtle)}
.field--filled .ctl{background:var(--muted-surface);border-color:transparent;border-bottom:var(--stroke) solid var(--ink);}

.field--standard .ctl{background:none;border:none;border-bottom:var(--stroke) solid var(--ink);border-radius:0;padding:0}

.field.is-error .ctl{border-color:var(--error-fg)}
.field.is-error .lab,.field.is-error .help{color:var(--error-fg)}
.field.is-disabled{opacity:1;pointer-events:none}
.field .help{font:400 12px var(--font-body);color:var(--subtle)}

/* Select & Autocomplete reuse .field with a trailing chevron / options */
.field.select .ctl{cursor:pointer;justify-content:space-between}
.menu-pop{margin-top:var(--sp-4);background:var(--surface-2);border:var(--stroke-heavy) solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-4);width:260px;max-width:100%}
.menu-pop .opt{background:none;border:0;text-decoration:none;padding:var(--sp-4) var(--sp-8);border-radius:var(--r-sm);font:600 var(--ui-nav-size)/var(--type-body-line) var(--font-body);color:var(--on-surface);cursor:pointer;display:flex;align-items:center;gap:var(--sp-8)}
.menu-pop .opt:hover{background:var(--muted-surface)}
.menu-pop .opt.is-selected{background:var(--primary-container);color:var(--on-primary-container)}
/* Autocomplete 的建议列表:键盘移到的那一项和悬停同一个底(选中的值仍是 is-selected);两行的项第二行是位置(路径)这类次要信息 */
.menu-pop .opt.is-active{background:var(--muted-surface)}
.menu-pop .opt .opt__text{display:flex;flex-direction:column;flex:1 1 0;min-width:0}
.menu-pop .opt .opt__sub{font:400 12px var(--font-body);color:var(--subtle);overflow-wrap:anywhere}
/* 分层的建议列表(mention 里的文件夹):有下一层的选项尾巴上一个进入按钮(chevron-right),点它或 →/Tab 进那一层,点选项本身是选整项;
   列表顶上一行 menu-pop__head 说现在在哪一层,带返回(back),滚动时贴在顶上。两个按钮都是 48dp 的点按区 */
.menu-pop .opt .opt__drill,.menu-pop .menu-pop__head .back{flex:none;display:inline-grid;place-items:center;width:var(--ui-row-height);height:var(--ui-row-height);
  padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer}
.menu-pop .opt .opt__drill{margin:0;}
.menu-pop .opt .opt__drill:hover,.menu-pop .menu-pop__head .back:hover{background:var(--control-hover);color:var(--on-control-hover)}
.menu-pop .menu-pop__head{position:sticky;top:calc(-1 * var(--sp-4));z-index:1;display:flex;align-items:center;gap:var(--sp-4);
  margin:0 0 var(--sp-4);padding:0 var(--sp-12) 0 0;background:var(--surface-2);
  border-bottom:var(--stroke) solid var(--border);font:700 12px var(--font-ui);color:var(--subtle);overflow-wrap:anywhere}

/* Slider */
.slider{width:240px;padding:var(--sp-16) 0;position:relative}
.slider .rail{height:var(--sp-8);border-radius:var(--r-full);background:var(--surface-sunken);border:var(--stroke) solid var(--ink);position:relative}
.slider .fill{position:absolute;left:0;top:-2px;bottom:-2px;border-radius:var(--r-full);background:var(--primary);border:var(--stroke) solid var(--ink)}
.slider .knob{position:absolute;top:50%;width:var(--icon-fab);height:var(--icon-fab);border-radius:var(--r-full);background:var(--surface-2);
  border:var(--stroke-focus) solid var(--ink);transform:translate(-50%,-50%);box-shadow:var(--elev-pop-sm)}
.slider .knob::after{content:attr(data-val);position:absolute;bottom:130%;left:50%;transform:translateX(-50%);
  font:800 11px var(--font-ui);color:var(--on-accent);background:var(--accent);padding:2px 6px;border-radius:var(--r-xs);border:var(--stroke) solid var(--ink)}

/* Toggle button (group) */
.toggle-group{display:inline-flex;gap:var(--sp-8);flex-wrap:wrap}
.toggle-btn{min-height:var(--touch-min);padding:0 var(--sp-16);display:inline-flex;align-items:center;gap:var(--sp-8);
  border:var(--stroke) solid var(--border);border-radius:var(--r-full);background:var(--surface);color:var(--muted);
  font:700 14px var(--font-ui);cursor:pointer;transition:transform var(--dur-fast) var(--ease)}
.toggle-btn .ico{width:var(--icon-box,var(--icon-button));height:var(--icon-box,var(--icon-button))}
.toggle-btn.is-active{background:var(--primary-container);color:var(--on-primary-container);border-color:var(--ink)}

/* Rating */
.rating{display:inline-flex;gap:var(--sp-4);color:var(--border)}
.rating .ico{width:var(--icon-box,var(--icon-fab));height:var(--icon-box,var(--icon-fab));cursor:pointer}
.rating .on{color:var(--accent);fill:var(--accent);stroke:var(--ink)}

/* =========================================================================
   DATA DISPLAY
   ========================================================================= */
.avatar{width:var(--avatar-md);height:var(--avatar-md);border-radius:var(--r-full);background:var(--primary-container);color:var(--on-primary-container);
  border:var(--stroke) solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font:800 15px var(--font-ui);overflow:hidden;flex:0 0 auto}
.avatar--sm{width:var(--avatar-sm);height:var(--avatar-sm);font-size:12px}
.avatar--lg{width:var(--avatar-lg);height:var(--avatar-lg);font-size:22px}
.avatar--square{border-radius:var(--r-md)}

.badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--badge-size);height:var(--badge-size);padding:0 6px;
  border-radius:var(--r-full);background:var(--error);color:var(--on-error);font:800 11px var(--font-ui);border:var(--stroke) solid var(--surface)}
.badge--dot{min-width:var(--badge-dot);width:var(--badge-dot);height:var(--badge-dot);padding:0}
.badge-anchor{position:relative;display:inline-flex}
.badge-anchor .badge{position:absolute;top:-6px;right:-6px}

.chip,.ds-pill,.ds-sessions-count,.ds-sessions-tag{display:inline-flex;position:relative;isolation:isolate;align-items:center;justify-content:center;gap:var(--sp-4);
  min-height:var(--sp-20);padding:var(--sp-2) var(--sp-4);border:0;border-radius:0;box-shadow:none;
  font:600 var(--ui-meta-size)/1.3 var(--font-body);background:var(--muted-surface);color:var(--on-muted-surface);vertical-align:middle;white-space:nowrap}
.chip{--label-bg:var(--muted-surface);--label-fg:var(--on-muted-surface);background:var(--label-bg);color:var(--label-fg)}
.chip .ico{width:var(--icon-box,var(--icon-chip));height:var(--icon-box,var(--icon-chip))}
.chip--filter.is-selected{--label-bg:var(--primary-container);--label-fg:var(--on-primary-container)}
.chip--input,.chip--suggestion{--label-bg:var(--secondary-container);--label-fg:var(--on-secondary-container)}
.chip--input .x{width:var(--label-remove-size);height:var(--label-remove-size);min-width:var(--label-remove-size);min-height:var(--label-remove-size);
  border:0;border-radius:0;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:inherit;cursor:pointer}
.chip:is(button,a,[role=button]),.chip:has(.x){min-height:var(--ui-row-height);background:transparent;text-decoration:none;cursor:pointer}
.chip:is(button,a,[role=button])::before,.chip:has(.x)::before{content:"";position:absolute;z-index:-1;inset:var(--label-inset) 0;background:var(--label-bg)}
.chip:is(button,a,[role=button]):hover::before,.chip:has(.x):hover::before{background:var(--control-hover)}
.chip:is(button,a,[role=button]):hover,.chip:has(.x):hover{color:var(--on-control-hover)}
.chip:is(button,a,[role=button]):active::before{background:var(--control-pressed)}
.chip:is(button,a,[role=button]):active{color:var(--on-control-pressed)}
.chip:focus-visible{outline:var(--stroke-thin) solid var(--focus);outline-offset:0}
.chip:disabled{color:var(--on-disabled);cursor:default;--label-bg:var(--disabled-bg)}
.chip:disabled::before{background:var(--disabled-bg)}

.divider{height:0;border:none;border-top:var(--stroke) solid var(--border-faint)}
.divider--inset{margin-left:var(--sp-48)}
.divider-v{width:0;align-self:stretch;border-left:var(--stroke) solid var(--border-faint)}

/* List / list-item rows */
.list{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg)}
.list-item{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12);min-height:var(--touch-min);cursor:pointer;transition:transform var(--dur-fast) var(--ease)}
.list-item:hover{background:var(--muted-surface)}
.list-item+.list-item{border-top:var(--stroke) solid var(--border-faint)}
.list-item .li-body{flex:1;min-width:0}
.list-item .li-title{font:600 var(--ui-list-size)/var(--type-body-line) var(--font-body);color:var(--on-surface)}
.list-item .li-sub{font:400 var(--ui-meta-size)/var(--type-body-line) var(--font-body);color:var(--muted);margin-top:2px}
.list-item .li-trail{color:var(--subtle);display:flex;align-items:center;gap:var(--sp-8)}

/* Table */
.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--r-lg);overflow:hidden;font:var(--table-body-weight) var(--table-body-size) var(--font-body)}
.table th{text-align:left;font:800 12px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--on-table-header);
  background:var(--table-header);padding:var(--sp-8) var(--sp-12);}
.table td{padding:var(--sp-8) var(--sp-12);border-top:var(--stroke) solid var(--border-faint);color:var(--on-surface)}
.table tbody tr:hover td{background:var(--control-hover);color:var(--on-control-hover)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}

/* Tooltip */
.tooltip{position:relative;display:inline-flex}
.tooltip .tip{position:absolute;bottom:130%;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--inverse-surface);color:var(--on-inverse-surface);font:700 12px var(--font-ui);padding:var(--tooltip-pad-y) var(--tooltip-pad-x);border-radius:var(--r-sm);box-shadow:none;border:var(--stroke) solid var(--ink);}
.tooltip .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--inverse-surface)}
.tooltip .tip--rich{white-space:normal;width:var(--tooltip-width);text-align:left;font-weight:500;line-height:1.5}
/* Hover hint for an icon-only control: shown while a fine pointer hovers it or the keyboard focuses it, never while
   its own menu is open. The tip repeats the control's accessible name, so it is aria-hidden. --below suits top bars;
   --end aligns the tip with a control at the right edge so it stays on screen. */
.tooltip--hover .tip{display:none;z-index:30;pointer-events:none}
@media(hover:hover){.tooltip--hover:hover .tip{display:block}}
.tooltip--hover:has(:focus-visible) .tip{display:block}
.tooltip--hover:is([open],:has([aria-expanded=true],details[open])) .tip{display:none}
.tooltip--below .tip{bottom:auto;top:calc(100% + var(--sp-8))}
.tooltip--below .tip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--inverse-surface)}
.tooltip--end .tip{left:auto;right:0;transform:none}
.tooltip--end .tip::after{left:auto;right:calc(var(--touch-min) / 2);transform:translateX(50%)}

/* =========================================================================
   FEEDBACK
   ========================================================================= */
.alert{display:flex;gap:var(--sp-12);align-items:flex-start;padding:var(--sp-12) var(--sp-16);border-radius:var(--r-md);
  border:var(--stroke) solid var(--ink);background:var(--info-container);color:var(--on-info-container);box-shadow:var(--elev-pop-sm)}
.alert .ico{width:var(--icon-box,var(--icon-alert));height:var(--icon-box,var(--icon-alert));margin-top:1px}
.alert .a-title{font:800 14px var(--font-ui)}
.alert .a-body{font:500 13px/1.5 var(--font-body);margin-top:2px}
.alert--success{background:var(--success-container);color:var(--on-success-container)}
.alert--warning{background:var(--warning-container);color:var(--on-warning-container)}
.alert--error{background:var(--error-container);color:var(--on-error-container)}
.alert--outlined{background:var(--surface);box-shadow:none}

/* Dialog */
.dialog{width:var(--dialog-width);max-width:100%;background:var(--surface-2);border:var(--frame-heavy);border-radius:var(--r-lg);box-shadow:var(--elev-3);overflow:hidden}
.dialog .d-body{padding:var(--sp-20)}
.dialog .d-title{font:800 20px var(--font-display);color:var(--on-surface)}
.dialog .d-text{font:400 14px/1.6 var(--font-body);color:var(--muted);margin-top:var(--sp-8)}
.dialog .d-actions{display:flex;justify-content:flex-end;gap:var(--sp-8);padding:0 var(--sp-16) var(--sp-16)}

/* Snackbar */
.snackbar{display:inline-flex;align-items:center;gap:var(--sp-16);background:var(--inverse-surface);color:var(--on-inverse-surface);
  padding:var(--sp-12) var(--sp-16);border-radius:var(--r-md);box-shadow:var(--elev-2);font:600 14px var(--font-body);border:var(--stroke) solid var(--ink);}
.snackbar .sb-action{font:800 13px var(--font-ui);color:var(--inverse-link);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}

/* Progress — linear + circular */
.progress{position:relative;height:var(--sp-12);border-radius:var(--r-full);background:var(--surface-sunken);border:var(--stroke) solid var(--ink);overflow:hidden}
.progress .bar{height:100%;background:var(--primary);border-radius:var(--r-full)}
.progress--striped .bar{background:var(--primary-strong)}
/* A quota near its limit; the host also says so in text. */
.progress--attention .bar{background:var(--warning)}
/* Quota bar with a pace marker (where an even rate would be by now). The host draws one SVG
   inside .progress: a rect.bar whose width attribute is the used share and a line.pace at
   the even-pace share, so geometry stays in attributes, never inline style. The host also
   states both values in text. */
.progress>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.progress>svg .bar{fill:var(--primary)}
.progress--attention>svg .bar{fill:var(--warning)}
.progress>svg .pace{stroke:var(--ink);stroke-width:var(--stroke-heavy)}
.spinner{width:var(--spinner-size);height:var(--spinner-size);border-radius:var(--r-full);border:5px solid var(--surface-sunken);border-top-color:var(--primary);animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Typing — 三个点:一件事还在进行、还没有可见的输出(agent 这一轮还没说出字)。不定进度,没有轨道;
   减少动态效果时三个点静止,所以宿主另带一段给读屏的文字(role=status) */
.typing{display:inline-flex;align-items:center;gap:var(--sp-4);height:var(--sp-24);padding:0 var(--sp-12);border-radius:var(--r-full);background:var(--muted-surface)}
.typing .dot{width:var(--sp-8);height:var(--sp-8);border-radius:var(--r-full);background:var(--muted);animation:typing-bounce var(--dur-skeleton) ease-in-out infinite}
.typing .dot:nth-child(2){animation-delay:160ms}
.typing .dot:nth-child(3){animation-delay:320ms}
@keyframes typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(calc(-1*var(--sp-4)));opacity:1}}

/* Skeleton */
.skel{background:var(--surface-sunken);animation:skel-pulse var(--dur-skeleton) ease-in-out infinite;border-radius:var(--r-sm)}
.skel--text{height:12px;border-radius:var(--r-full)}
.skel--circle{border-radius:var(--r-full)}
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* Backdrop */
.backdrop{position:absolute;inset:0;background:var(--backdrop);color:var(--on-backdrop);display:flex;align-items:center;justify-content:center}

/* =========================================================================
   SURFACES
   ========================================================================= */
.paper{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-16)}
.paper--0{box-shadow:none;border:var(--stroke) solid var(--border)}
.paper--1{box-shadow:var(--elev-1);border:var(--stroke) solid var(--ink);}
.paper--2{box-shadow:var(--elev-2);border:var(--stroke) solid var(--ink);}

.card{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-16);box-shadow:var(--elev-1);border:var(--frame-ink);}
.card--elevated{box-shadow:var(--elev-2)}
.card--outlined{box-shadow:none;border-color:var(--border)}
.card--filled{background:var(--muted-surface);box-shadow:none}
.card--pop{border-color:var(--ink);box-shadow:var(--elev-pop);background:var(--surface-2)}   /* signature cut-out */
/* 会话气泡:card--pop 顶上多一个小尖,指着它说的那一块(待知悉的「知道了」浮卡用它);--bubble-x 是尖尖离左边多远 */
.bubble{position:relative;z-index:0;--bubble-x:var(--sp-20)}
/* 菱形有一半在卡片里:压在卡片边框之上(把那一段边框盖掉),但在内容之下,别盖住按钮的角 */
.bubble::before{content:"";position:absolute;z-index:-1;top:-9px;left:var(--bubble-x);width:14px;height:14px;background:inherit;border-top:var(--stroke) solid var(--ink);border-left:var(--stroke) solid var(--ink);border-top-left-radius:3px;transform:rotate(45deg)}
/* 尖尖在左边、指向左侧的那一块(气泡摆在它右边时用);垂直居中 */
.bubble--left::before{top:calc(50% - 7px);left:-9px;border-top:0;border-bottom:var(--stroke) solid var(--ink);border-top-left-radius:0;border-bottom-left-radius:3px}
.card__media{height:var(--card-media-height);border-radius:var(--r-md);background:var(--wash);border:var(--stroke) solid var(--border);margin:calc(-1*var(--sp-4)) 0 var(--sp-12);overflow:hidden;position:relative}

/* Accordion */
.accordion{border:var(--stroke) solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.accordion .ac-item+.ac-item{border-top:var(--stroke) solid var(--border-faint)}
.accordion .ac-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);padding:var(--sp-16);cursor:pointer;font:700 15px var(--font-body);color:var(--on-surface)}
.accordion .ac-head .ico{transition:transform var(--dur-base) var(--ease)}
.accordion .ac-item.is-open .ac-head .ico{transform:rotate(180deg)}
.accordion .ac-panel{padding:0 var(--sp-16) var(--sp-16);font:400 14px/1.6 var(--font-body);color:var(--muted)}

/* =========================================================================
   NAVIGATION
   ========================================================================= */
.appbar{height:var(--appbar-height);display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-8);background:var(--surface);color:var(--on-surface);border:var(--stroke) solid var(--border);border-radius:var(--r-md)}
.appbar .ttl{flex:1;font:800 20px var(--font-display);letter-spacing:-.01em}
.appbar--center .ttl{text-align:center}
.appbar--transparent{background:transparent}
.appbar--brand .ttl{color:var(--primary)}

.bottomnav{display:flex;align-items:stretch;height:var(--bottomnav-height);background:var(--surface-2);border-top:var(--stroke) solid var(--ink)}
.bottomnav .ni{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);cursor:pointer;color:var(--subtle);font:700 var(--bottomnav-label-size) var(--font-ui)}
.bottomnav .ni .ico{width:var(--icon-box,var(--icon-size));height:var(--icon-box,var(--icon-size))}
.bottomnav .ni.is-active{color:var(--primary-fg)}
.bottomnav .ni.is-active .pill{position:absolute;margin-top:-30px;width:44px;height:30px;border-radius:var(--r-full);background:var(--primary-container);z-index:-1}

.drawer{width:var(--drawer-width);background:var(--surface-2);border-right:var(--stroke-heavy) solid var(--ink);padding:var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-4)}
.drawer .d-item{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-12);border-radius:var(--r-md);cursor:pointer;font:700 15px var(--font-ui);color:var(--on-surface)}
.drawer .d-item:hover{background:var(--muted-surface)}
.drawer .d-item.is-active{background:var(--primary-container);color:var(--on-primary-container)}

.tabs{display:flex;gap:var(--sp-4);border-bottom:var(--stroke) solid var(--border-faint)}
.tabs .tab{background:none;border:0;text-decoration:none;padding:var(--sp-12) var(--sp-16);font:700 14px var(--font-ui);color:var(--muted);cursor:pointer;border-bottom:var(--stroke-focus) solid transparent;margin-bottom:-2px}
.tabs .tab.is-active{color:var(--primary);border-bottom-color:var(--primary-fg)}
/* segmented pill tabs */
.segment{display:inline-flex;background:var(--muted-surface);border:var(--stroke) solid var(--ink);border-radius:var(--r-full);padding:3px}
.segment .seg{background:none;border:0;text-decoration:none;padding:var(--sp-8) var(--sp-16);border-radius:var(--r-full);font:700 13px var(--font-ui);color:var(--muted);cursor:pointer}
.segment .seg.is-active{background:var(--surface-2);color:var(--primary);box-shadow:var(--elev-pop-sm)}

.link{color:var(--link);font:700 15px var(--font-body);text-decoration:none;border-bottom:var(--stroke) solid color-mix(in srgb,var(--link) 40%,transparent);cursor:pointer}
.link:hover{border-bottom-color:var(--link)}

/* Stepper */
.stepper{display:flex;align-items:center;gap:var(--sp-4)}
.stepper .step{display:flex;align-items:center;gap:var(--sp-8);color:var(--muted);font:700 13px var(--font-ui)}
.stepper .step .dot{width:var(--stepper-dot);height:var(--stepper-dot);border-radius:var(--r-full);border:var(--stroke-heavy) solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;font:800 13px var(--font-ui);color:var(--muted)}
.stepper .step.is-active .dot{background:var(--primary);color:var(--on-primary);border-color:var(--ink)}
.stepper .step.is-done .dot{background:var(--primary-container);color:var(--on-primary-container);border-color:var(--ink)}
.stepper .connector{flex:1;height:var(--stroke);background:var(--border);min-width:16px}

/* Speed dial */
.speeddial{display:inline-flex;flex-direction:column;align-items:center;gap:var(--sp-12)}
.speeddial .sd-mini{width:var(--touch-min);height:var(--touch-min);border-radius:var(--r-full);background:var(--surface-2);border:var(--stroke) solid var(--ink);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--elev-pop-sm);color:var(--secondary-fg)}

/* =========================================================================
   Utility: horizontal scroll row that does NOT clip hard/soft shadows
   ========================================================================= */
.scrollrow{display:flex;gap:var(--sp-12);overflow-x:auto;overflow-y:visible;padding:6px 6px 16px;scroll-snap-type:x mandatory}
.scrollrow>*{scroll-snap-align:start;flex:0 0 auto}
.scrollrow::-webkit-scrollbar{height:0}
.stack{display:flex;flex-direction:column;gap:var(--sp-12)}
.row{display:flex;align-items:center;gap:var(--sp-12)}
.row--end{justify-content:flex-end}
.grow{flex:1;min-width:0}

/* Shared states: opaque pairs make hover/selected/disabled auditable. */
::selection{background:var(--selection);color:var(--on-selection)}
:focus-visible{outline:var(--stroke-focus) solid var(--focus);outline-offset:var(--focus-offset)}
a{color:var(--link)}
/* Element defaults must not override semantic action/navigation classes. */
a:where(:hover){color:var(--link-hover)}
.icon-btn--outlined,.toggle-btn{border-color:var(--control-border)}
.field:focus-within .ctl,.field.is-focused .ctl{border-color:var(--input-focus);box-shadow:none;outline:none}
.field--filled:is(:focus-within,.is-focused) .ctl,.field--standard:is(:focus-within,.is-focused) .ctl{border-color:transparent;border-bottom-color:var(--input-focus)}
.field.is-error .ctl{border-color:var(--error-fg)}
.field .ctl :is(input,textarea,select):focus-visible{outline:none;box-shadow:none}

.btn:disabled,.btn.is-disabled{background:var(--disabled-bg);color:var(--on-disabled);border-color:var(--control-border)}
.field.is-disabled .ctl,.check.is-disabled .box,.switch.is-disabled .track{background:var(--disabled-bg);color:var(--on-disabled);border-color:var(--control-border)}
.field.is-disabled,.check.is-disabled,.switch.is-disabled{color:var(--on-disabled)}
.btn-contained:hover{color:var(--btn-on)}
.icon-btn--filled:hover{background:var(--primary-hover);color:var(--on-primary-hover)}
.check.is-checked .box,.check.is-indeterminate .box,.switch.is-on .track{border-color:var(--on-primary)}
.switch.is-disabled .thumb{background:var(--on-disabled)}
.btn:active,.btn.is-pressed{background:var(--btn-pressed);color:var(--btn-on-pressed);transform:translate(var(--shadow-sm-x),var(--shadow-sm-y))}
.toggle-btn:active{background:var(--control-pressed);color:var(--on-control-pressed);transform:translate(var(--shadow-sm-x),var(--shadow-sm-y))}
.menu-pop .opt{min-height:var(--ui-row-height)}
.segment .seg,.tabs .tab{min-height:var(--touch-min);display:flex;align-items:center}
.toggle-btn:hover{background:var(--control-hover);color:var(--on-control-hover)}
.toggle-btn.is-active:hover{background:var(--control-selected);color:var(--on-control-selected)}
.rating{color:var(--control-border)}
.rating .ico{min-width:var(--touch-min);min-height:var(--touch-min)}
.alert--outlined{color:var(--on-surface)}
.chip{transition:transform var(--dur-fast) var(--ease)}

/* Filters select a view of the current collection, not a task action. */
.filter-group{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:0 var(--sp-8);margin:var(--sp-16) 0}
.chip--filter .filter-check{flex-shrink:0;display:none}
.chip--filter.is-selected .filter-check{display:block}

/* A collection display scope is a single-choice disclosure, not a chip set. */
.collection-heading{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12)}
.collection-heading>h1{margin:0}
.display-filter{position:relative;margin-left:auto;max-width:100%;color:var(--on-surface)}
.display-filter>summary{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);min-height:var(--touch-min);
  padding:0 var(--sp-12);border:var(--stroke) solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);cursor:pointer;list-style:none;font:400 var(--folder-meta-size)/var(--type-body-line) var(--font-body)}
.display-filter>summary::-webkit-details-marker{display:none}
.display-filter>summary:hover{background:var(--control-hover);color:var(--on-control-hover)}
.display-filter>summary:active{background:var(--control-pressed);color:var(--on-control-pressed)}
.display-filter>summary>.ico{width:var(--icon-box,var(--icon-chip));height:var(--icon-box,var(--icon-chip))}
.display-filter[open]>summary>.ico{transform:rotate(180deg)}
.display-filter__menu{position:absolute;right:0;top:calc(100% + var(--sp-4));z-index:10;width:max-content;min-width:100%;max-width:calc(100vw - var(--sp-48));
  padding:var(--sp-8);border:var(--stroke) solid var(--ink);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--elev-pop-sm)}
.display-filter__menu fieldset{margin:0;padding:0;border:0;min-width:0}
.display-filter__menu legend{padding:var(--sp-8) var(--sp-12);color:var(--muted);font:var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-ui)}
.display-filter__option{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--ui-row-height);padding:var(--sp-8) var(--sp-12);
  border-radius:var(--r-xs);cursor:pointer;font:var(--type-label-weight) var(--type-body-sm-size)/var(--type-body-line) var(--font-ui)}
.display-filter__option:hover{background:var(--control-hover);color:var(--on-control-hover)}
.display-filter__option:has(input:checked){background:var(--primary-container);color:var(--on-primary-container)}
.display-filter__option input{appearance:none;flex-shrink:0;margin:0;width:var(--sp-20);height:var(--sp-20);border:var(--stroke) solid var(--control-border);border-radius:var(--r-full);background:var(--surface);cursor:pointer}
.display-filter__option input:checked{color:var(--on-primary);border-color:var(--primary-fg);background:var(--primary-fg);box-shadow:inset 0 0 0 var(--sp-4) var(--surface)}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Note semantics. These are display specimens, not Markdown parsers. */
.note-callout{padding:var(--sp-20);border:var(--stroke) solid var(--callout-color,var(--callout-note));border-radius:var(--r-md);background:var(--callout-fill,var(--callout-note-container));color:var(--on-callout-fill,var(--on-callout-note-container));--elev-callout:var(--shadow-sm-x) var(--shadow-sm-y) var(--shadow-blur) var(--shadow-spread) var(--callout-color,var(--callout-note));box-shadow:var(--elev-callout);}
.note-callout>strong{color:var(--callout-color,var(--callout-note));font-weight:var(--type-title-weight);display:flex;align-items:center;gap:var(--sp-8)}
.note-callout .ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm))}
.note-callout p{margin:var(--sp-8) 0 0;font-size:var(--type-body-sm-size);line-height:var(--type-body-line)}
.task{display:flex;gap:var(--sp-12);align-items:flex-start;padding:var(--sp-12) 0;border-bottom:var(--stroke-thin) solid var(--border-faint);color:var(--on-surface)}
.task-box{flex:0 0 var(--check-size);height:var(--check-size);margin-top:var(--sp-2);border:var(--stroke-heavy) solid currentColor;border-radius:var(--control-radius);color:var(--task-color);display:grid;place-items:center;font-weight:var(--type-display-weight);line-height:1}
.task small{display:block;color:var(--text-muted);font-size:var(--type-caption-size);margin-top:var(--sp-4)}
.task strong{font-size:var(--type-body-size);font-weight:var(--type-title-weight)}
.task--blocked{--task-color:var(--task-blocked)}
.task--actionable{--task-color:var(--task-actionable)}
.task--done{--task-color:var(--task-done)}
.task--blocker{--task-color:var(--task-blocker)}
.task--done strong{color:var(--text-muted);text-decoration:line-through}
.task--done .task-box{background:var(--task-done);color:var(--on-task-done);border-color:var(--task-done)}
.note mark{background:var(--warning-container);color:var(--on-warning-container);border-radius:var(--sp-4);padding:0 var(--opt-3)}
.note code,.ds-code{background:var(--code-bg);color:var(--code-fg);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-xs);font:var(--type-mono-size)/var(--type-body-line) var(--font-mono)}
.note pre,.ds-code{padding:var(--sp-16);border-radius:var(--r-sm);overflow:auto;max-width:100%;white-space:pre}
.note pre code{padding:0}
.ds-semantic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--sp-16);width:100%}
.ds-semantic-card{padding:var(--sp-16);border:var(--stroke) solid var(--outline);border-radius:var(--r-md);background:var(--surface);color:var(--on-surface)}
.ds-semantic-card h3{font:var(--type-title-weight) var(--type-title-size) var(--font-body);margin-bottom:var(--sp-12)}
.ds-semantic-card p{font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-body)}
.ds-timeline{display:flex;flex-direction:column;gap:var(--sp-16);border-left:var(--stroke) solid var(--control-border);padding-left:var(--sp-16)}
.ds-timeline time{font:var(--type-caption-size) var(--font-body);color:var(--text-muted)}
.ds-habits{display:flex;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-4)}
.ds-habit{display:grid;place-items:center;width:var(--habit-size);height:var(--habit-size);border:var(--stroke-thin) solid var(--habit-border);border-radius:var(--sp-4);background:var(--habit-empty);color:var(--on-habit-empty);font:var(--type-caption-size) var(--font-body)}
.ds-habit.is-checked{background:var(--habit-checked);color:var(--on-habit-checked);border-color:var(--habit-checked)}
.ds-habit.is-inactive{background:var(--habit-inactive);color:var(--on-habit-inactive)}
.ds-habit.is-today{outline:var(--stroke) solid var(--habit-today-ring);outline-offset:var(--sp-2)}
.ds-diagram{max-width:100%;height:auto;background:var(--surface-2);border-radius:var(--r-sm)}
.ds-diagram rect{fill:var(--mermaid-node);stroke:var(--mermaid-line);stroke-width:var(--stroke)}
.ds-diagram text{fill:var(--on-mermaid-node);font:var(--type-body-size) var(--font-body)}
.ds-diagram path{stroke:var(--mermaid-line);stroke-width:var(--stroke);fill:none}

.callout--note{--callout-color:var(--callout-note);--callout-fill:var(--callout-note-container);--on-callout-fill:var(--on-callout-note-container)}

.callout--tip{--callout-color:var(--callout-tip);--callout-fill:var(--callout-tip-container);--on-callout-fill:var(--on-callout-tip-container)}

.callout--warning{--callout-color:var(--callout-warning);--callout-fill:var(--callout-warning-container);--on-callout-fill:var(--on-callout-warning-container)}

.callout--danger{--callout-color:var(--callout-danger);--callout-fill:var(--callout-danger-container);--on-callout-fill:var(--on-callout-danger-container)}

.callout--success{--callout-color:var(--callout-success);--callout-fill:var(--callout-success-container);--on-callout-fill:var(--on-callout-success-container)}

.callout--question{--callout-color:var(--callout-question);--callout-fill:var(--callout-question-container);--on-callout-fill:var(--on-callout-question-container)}

.callout--quote{--callout-color:var(--callout-quote);--callout-fill:var(--callout-quote-container);--on-callout-fill:var(--on-callout-quote-container)}

.callout--example{--callout-color:var(--callout-example);--callout-fill:var(--callout-example-container);--on-callout-fill:var(--on-callout-example-container)}

.callout--todo{--callout-color:var(--callout-todo);--callout-fill:var(--callout-todo-container);--on-callout-fill:var(--on-callout-todo-container)}
.field .ctl{min-width:0;flex-wrap:wrap}
.field .ctl :is(input,textarea,select){min-width:0;flex-basis:var(--touch-min)}
.menu-pop .opt{min-width:0;flex-wrap:wrap;overflow-wrap:anywhere}

/* D2: note roles are independent from product page titles. */
.note-h1{font:var(--note-h1-weight) var(--note-h1-size)/var(--note-h1-line) var(--font-body);color:var(--on-surface);margin:var(--sp-16) 0 var(--sp-8)}
.note-h2{font:var(--note-h2-weight) var(--note-h2-size)/var(--note-h2-line) var(--font-body);color:var(--on-surface);margin:var(--sp-16) 0 var(--sp-8)}
/* 二级标题成一节,可折叠:summary 里就是那个 h2,右边一个箭头(和 select 同一个字形),默认展开;正文的样式一字不动 */
.note-section>summary{list-style:none;display:flex;align-items:center;gap:var(--sp-8);cursor:pointer}
.note-section>summary::-webkit-details-marker{display:none}
.note-section>summary>.note-h2{flex:1;min-width:0}
.note-section>summary::after{content:"";width:9px;height:9px;flex:none;margin:0 var(--sp-4) 4px 0;border-right:calc(var(--icon-stroke) * 1px) solid currentColor;border-bottom:calc(var(--icon-stroke) * 1px) solid currentColor;transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease)}
.note-section[open]>summary::after{margin:4px var(--sp-4) 0 0;transform:rotate(-135deg)}
.note-h3{font:var(--note-h3-weight) var(--note-h3-size)/var(--note-h3-line) var(--font-body);color:var(--on-surface);margin:var(--sp-16) 0 var(--sp-8)}
.note-h4{font:var(--note-h4-weight) var(--note-h4-size)/var(--note-h4-line) var(--font-body);color:var(--on-surface);margin:var(--sp-16) 0 var(--sp-8)}
.note-h5{font:var(--note-h5-weight) var(--note-h5-size)/var(--note-h5-line) var(--font-body);color:var(--on-surface);margin:var(--sp-16) 0 var(--sp-8)}
.note-h6{font:var(--note-h6-weight) var(--note-h6-size)/var(--note-h6-line) var(--font-body);color:var(--on-surface);margin:var(--sp-16) 0 var(--sp-8)}
.note-body{font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-body);color:var(--on-surface);overflow-wrap:anywhere;margin:0 0 var(--sp-16)}
.note-inline code{font-family:var(--font-mono);font-size:var(--type-mono-size);background:var(--code-bg);color:var(--code-fg);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-xs)}
.note-inline mark{background:var(--warning-container);color:var(--on-warning-container)}
.note-inline a{color:var(--link);text-decoration:underline;text-underline-offset:var(--sp-2)}
.note-inline .missing{color:var(--text-muted);text-decoration:underline dotted}
.note-inline mark a,.note-inline mark .missing,.note-inline mark .note-tag{color:var(--on-selection)}
.note-inline .note-tag{color:var(--secondary-fg)}
.note-list{padding-inline-start:var(--sp-24);margin:0 0 var(--sp-16);font:var(--type-body-size)/var(--type-body-line) var(--font-body);color:var(--on-surface);overflow-wrap:anywhere}
.note-list :is(ul,ol){padding-inline-start:var(--sp-16)}
/* Keep the semantic tree at every depth; stop visual indentation after level 3.
   Inside markers at deeper levels cannot overlap their ancestors' markers. */
.note-list .note-list .note-list .note-list{padding-inline-start:0;list-style-position:inside}
.note-quote{border-inline-start:var(--stroke-focus) solid var(--control-border);padding:var(--sp-8) var(--sp-16);margin:0 0 var(--sp-16);color:var(--text-muted);font:var(--type-body-size)/var(--type-body-line) var(--font-body)}
.note-rule{border:0;border-top:var(--stroke-thin) solid var(--control-border);margin:var(--sp-16) 0;width:100%}
.note-scroll{max-width:100%;overflow:auto}
.ds-form{display:flex;flex-direction:column;gap:var(--sp-16);min-width:0;width:100%;color:var(--on-surface)}
.ds-form fieldset{border:var(--stroke) solid var(--control-border);border-radius:var(--r-sm);padding:var(--sp-16);min-width:0}
.ds-form legend{font:var(--type-label-weight) var(--type-label-size) var(--font-ui);padding:0 var(--sp-4)}
.ds-form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){min-height:var(--touch-min);width:100%;min-width:0;border:var(--stroke) solid var(--ink);border-radius:var(--r-sm);padding:var(--sp-8) var(--sp-12);background:var(--surface);color:var(--on-surface);font:var(--ui-body-size)/var(--type-body-line) var(--font-body);}
.ds-choice{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--touch-min);cursor:pointer}
.ds-choice input{accent-color:var(--primary-fg);width:var(--check-size);height:var(--check-size);flex-shrink:0}
.ds-form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):disabled{background:var(--disabled-bg);color:var(--on-disabled);cursor:default;border-color:var(--control-border);}
.ds-form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea)[aria-invalid=true]{border-color:var(--error-fg)}
/* :is() 那条字段规则的优先级按它最复杂的分支算(0,4,1),这里要配平才压得过它的 padding / background */
.ds-form select:not([multiple]):not([size]):not([hidden]){appearance:none;padding-right:calc(var(--sp-12) + var(--icon-sm) + var(--sp-12))}
/* 原生 select 的箭头画在边框角上、不吃内边距:去掉它,外面套 .ds-select 把设计系统的 chevron 放到右侧 12px */
.ds-select{position:relative;display:block}
.ds-select>.ico{position:absolute;right:var(--sp-12);top:50%;width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm));transform:translateY(-50%);pointer-events:none;color:var(--on-surface)}
.ds-error{color:var(--error-fg);font-size:var(--type-body-sm-size)}
.ds-nav{display:flex;flex-wrap:wrap;gap:var(--sp-8);align-items:center}
.ds-nav a{display:flex;align-items:center;min-height:var(--ui-row-height);padding:var(--sp-4) var(--sp-12);border-radius:var(--r-sm);color:var(--link);cursor:pointer;overflow-wrap:anywhere}
.ds-disclosure>summary{display:flex;align-items:center;min-height:var(--touch-min);padding:var(--sp-12) var(--sp-16);border-radius:var(--r-sm);color:var(--link);cursor:pointer;overflow-wrap:anywhere}
.ds-nav a[aria-current=page]{background:var(--control-selected);color:var(--on-control-selected)}
.ds-disclosure{border:var(--stroke) solid var(--control-border);border-radius:var(--r-md);background:var(--surface);color:var(--on-surface);width:100%}
.ds-disclosure>summary{font-weight:var(--type-title-weight)}
.ds-disclosure[open]>summary{border-bottom:var(--stroke-thin) solid var(--control-border)}
.ds-disclosure>div{padding:var(--sp-16)}
.ds-folder{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-16);border:var(--frame-ink);border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--elev-pop-sm);color:var(--on-surface);text-decoration:none;min-height:var(--touch-min);width:100%;overflow-wrap:anywhere}
.ds-folder:hover{background:var(--control-hover);color:var(--on-control-hover)}
.ds-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8);padding:var(--sp-12);background:var(--surface-2);color:var(--on-surface);border:var(--stroke) solid var(--control-border);border-radius:var(--r-sm)}
.ds-stack{display:flex;flex-direction:column;gap:var(--layout-control-gap);width:100%;min-width:0}
.ds-meta{font:var(--type-caption-size)/var(--type-body-line) var(--font-body);color:var(--text-muted)}
.ds-spec-label{font:var(--type-caption-size)/var(--type-body-line) var(--font-body);color:var(--text-muted);margin-bottom:var(--sp-8)}

.ds-form input::placeholder{color:var(--text-muted);opacity:var(--opacity-solid)}

/* D3 reading variants. vault-* names are behavior hooks, not visual owners. */
.ds-task{display:flex;align-items:flex-start;gap:var(--sp-8);padding:var(--sp-12);border:var(--stroke) solid var(--control-border);border-radius:var(--r-md);background:var(--surface-2);color:var(--on-surface-2);margin-bottom:var(--sp-12);--task-color:var(--task-blocked)}
.ds-task.is-actionable{--task-color:var(--task-actionable)}
.ds-task.is-done{--task-color:var(--task-done)}
.ds-task.is-blocker{--task-color:var(--task-blocker)}
.ds-task>.ms,.ds-task .vault-toggle,.ds-task .vault-due{color:var(--task-color)}
.ds-task .vault-task-body{min-width:0;flex:1}
.ds-task.is-done .vault-task-body>div:first-child{color:var(--text-muted)}
.ds-task .vault-due{display:block;font:var(--type-caption-size)/var(--type-body-line) var(--font-body);margin-top:var(--sp-4)}
.ds-task .vault-reason{color:var(--task-blocker);font:var(--type-body-sm-size)/var(--type-body-line) var(--font-body);margin-top:var(--sp-4)}
.ds-task .vault-toggle{display:grid;place-items:center;flex-shrink:0;min-width:var(--touch-min);min-height:var(--touch-min);border:0;border-radius:var(--r-sm);padding:0;background:transparent;cursor:pointer}
.ds-task .vault-toggle:disabled{cursor:wait;background:var(--disabled-bg);color:var(--on-disabled)}
.note-callout{margin-bottom:var(--sp-16);overflow-wrap:anywhere}
.note-inline .anchor{color:inherit;text-decoration:none}
.ds-code{margin:0 0 var(--sp-16)}
.ds-code pre{margin:0;font:inherit;color:inherit;white-space:pre}
.ds-code code{font:inherit;background:none;padding:0;color:inherit}
.ds-raw{white-space:pre-wrap;overflow-wrap:anywhere;border:var(--stroke-thin) dashed var(--control-border)}
.note-scroll :is(th,td){overflow-wrap:anywhere}
.ta-l{text-align:left}.ta-c{text-align:center}.ta-r{text-align:right}
/* Project/Area shelf cards mirror the native FolderCard composition. */
.ds-stack.folder-shelf{gap:var(--sp-16)}
.ds-folder.foldercard{flex-direction:row;align-items:center;gap:var(--sp-16);padding:var(--folder-padding)}
.ds-folder.foldercard .folderface,.ds-public-journal-preview .folderface{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--folder-slot);height:var(--folder-slot);border-radius:var(--folder-icon-radius);background:var(--primary-container);text-align:center}
.ds-folder.foldercard .folderface>.ms{font-size:calc(var(--font-folder-emoji) + var(--sp-8))}
.ds-folder.foldercard .grow{gap:var(--folder-title-gap)}
.ds-folder.foldercard .t-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--folder-title-size)/var(--folder-line) var(--font-body)}
.ds-folder.foldercard :is(small,.ds-meta){font-size:var(--folder-meta-size);line-height:var(--folder-line)}
.ds-folder.foldercard .folder-trailing{color:var(--glyph-subtle)}
.ds-folder .folderface,.ds-public-journal-preview .folderface{font:var(--font-folder-emoji)/var(--line-folder-emoji) var(--font-body);color:var(--primary-fg)}
.ds-folder .grow{min-width:0;display:flex;flex-direction:column}
.ds-folder .t-title{white-space:normal;overflow-wrap:anywhere}
.ds-disclosure .ds-disclosure{margin-top:var(--sp-12)}
.ds-disclosure>summary{list-style:none;gap:var(--sp-8)}
.ds-disclosure>summary::-webkit-details-marker{display:none}
.ds-disclosure[open]>summary>.ico{transform:rotate(180deg)}
.ds-appearance{position:relative;max-width:100%;flex:none}
.ds-appearance>summary,.ds-bar-link{min-width:var(--touch-min);justify-content:center;min-height:var(--touch-min);display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-8);cursor:pointer;color:var(--on-surface);text-decoration:none;font:700 var(--type-body-size)/var(--type-body-line) var(--font-ui)}
/* Label beside an icon: trim the line box to cap height + baseline so flex centring lands on the ink, whatever the font's ascent/descent. Browsers without text-box keep the metric-based centring */
.ds-cap{text-box:trim-both cap alphabetic}
.ds-appearance>.ds-form{position:absolute;right:0;z-index:10;min-width:var(--touch-min);width:max-content;max-width:80vw;padding:var(--sp-16);background:var(--surface-2);border:var(--stroke-heavy) solid var(--border);border-radius:var(--r-md)}
.ds-appearance[hidden]{display:none}
/* The icon-only summary carries the tooltip--hover tip, so the hint stays under the icon even where a page makes the disclosure static. */
.ds-appearance>summary{position:relative}

.note-scroll .table :is(th,td).ta-l{text-align:left}
.note-scroll .table :is(th,td).ta-c{text-align:center}
.note-scroll .table :is(th,td).ta-r{text-align:right}
.note-list .note-list{margin-bottom:0}
.ds-code.vault-mermaid.is-drawn{background:var(--surface-2);color:var(--on-surface-2)}
.ds-reading-nav{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-8);padding:var(--sp-16);background:var(--surface);color:var(--on-surface);border:var(--stroke) solid var(--border);border-radius:var(--r-md)}
.ds-reading-nav a{gap:var(--sp-8);text-decoration:none;color:var(--on-surface);font:600 var(--ui-nav-size)/var(--type-body-line) var(--font-body);}
.ds-reading-nav a:hover{background:var(--control-hover);color:var(--on-control-hover)}
.ds-reading-nav a[aria-current=page]{background:var(--primary-container);color:var(--on-primary-container);font-weight:var(--type-title-weight)}
.ds-nav-shortcuts{display:grid;gap:var(--sp-8);margin-block-end:var(--sp-24)}
.ds-reading-nav .ds-brand{color:var(--primary);font:var(--brand-weight) 20px var(--font-brand);letter-spacing:-.01em}
.ds-reading-nav .ds-link{color:var(--link)}

.ds-preview{padding:var(--sp-12);background:var(--surface-2);color:var(--on-surface-2);border:var(--stroke) solid var(--control-border);border-radius:var(--r-md)}
.ds-disclosure .list-item{overflow-wrap:anywhere}

.note-scroll .table :is(th,td){min-width:var(--note-table-cell-min);max-width:var(--note-table-cell-max)}
.ds-task>.ms{font-size:var(--check-size);min-width:var(--check-size);line-height:1}
.ds-task .vault-toggle:hover:not(:disabled){background:var(--control-hover);color:var(--on-control-hover)}
.ds-task .vault-toggle:active:not(:disabled){background:var(--control-pressed);color:var(--on-control-pressed)}

/* D6 Timeline presentation: phased rail / native disclosure, shared surface. */
.timeline-card{padding:var(--sp-16);background:var(--surface-2);color:var(--on-surface-2);border:var(--stroke) solid var(--border);border-radius:var(--r-md);margin-bottom:var(--sp-8)}
.timeline-card header{margin-bottom:var(--sp-16);font:var(--type-body-size)/var(--type-body-line) var(--font-body)}
.timeline-card header p{margin:var(--sp-8) 0;color:var(--link)}
.timeline-row{min-width:0}
.timeline-row summary,.timeline-source summary{min-height:var(--touch-min);min-width:var(--touch-min);cursor:pointer;padding:var(--sp-8) var(--sp-4);font:var(--type-body-size)/var(--type-body-line) var(--font-body)}
.timeline-row summary{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
.timeline-title{flex:1;min-width:var(--touch-min);overflow-wrap:anywhere}
.timeline-state{border-radius:var(--r-2xs);padding:var(--sp-2) var(--sp-4);font:var(--type-caption-size)/var(--type-body-line) var(--font-body)}
.timeline-row.is-done .timeline-state{background:var(--timeline-done-container);color:var(--on-timeline-done-container)}
.timeline-row.is-next .timeline-state{background:var(--timeline-next-container);color:var(--on-timeline-next-container)}
.timeline-row.is-wait .timeline-state{background:var(--timeline-wait-container);color:var(--on-timeline-wait-container)}
.timeline-row.is-todo .timeline-state{background:var(--timeline-todo-container);color:var(--on-timeline-todo-container)}
.timeline-row.is-next .timeline-title{font-weight:var(--type-h1-weight)}
.timeline-detail{padding:var(--sp-8);border-left:var(--stroke) solid var(--control-border);overflow-wrap:anywhere}
.timeline-detail p{margin:var(--sp-4) 0}
.timeline-phase{font:var(--type-caption-size)/var(--type-body-line) var(--font-body);color:var(--text-muted)}
.timeline-today{color:var(--link);border-top:var(--stroke) dashed var(--control-border);padding-top:var(--sp-8)}
.timeline-source{margin-top:var(--sp-16)}
.timeline-source pre{max-width:100%;overflow:auto;font:var(--type-mono-size)/var(--type-body-line) var(--font-mono)}
.timeline-row summary:focus-visible,.timeline-source summary:focus-visible{outline:var(--stroke) solid var(--focus);outline-offset:var(--sp-2)}

/* D4 system variants: native forms, notices and editor host. */
.ds-endpoint{display:block;padding:var(--sp-12) var(--sp-16);font:var(--type-mono-size)/var(--type-mono-line) var(--font-mono);color:var(--code-fg);background:var(--code-bg);border:var(--stroke) solid var(--control-border);border-radius:var(--r-md);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.ds-notice{flex-direction:column}
.ds-form .ds-stack{gap:var(--layout-label-gap)}
.ds-form label:not(.ds-choice){font:var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-ui)}
.ds-form input[type=hidden]{display:none}
.ds-editor-text{font:var(--type-mono-weight) var(--type-mono-size)/var(--type-mono-line) var(--font-mono);background:var(--surface);color:var(--on-surface);border:var(--stroke) solid var(--ink);border-radius:var(--r-md)}
.ds-form textarea.ds-editor-text{font:var(--type-mono-weight) var(--type-mono-size)/var(--type-mono-line) var(--font-mono)}

/* ── CodeMirror ──
   颜色一律走 styles.css 的 token,不写死色值,深色模式跟着整站一起翻。
   CodeMirror 自己的基础样式是它运行时插进 <head> 的(带 style-src 的 nonce,见 web/html.ts);
   这里只改它认的那几个 CSS 变量和我们自己的 cm-b-* 类。 */
.cm-editor {
  background: var(--surface);
  border:var(--stroke) solid var(--ink);
  border-radius: var(--r-md);
  font: 500 var(--type-mono-size)/var(--type-mono-line) var(--font-mono);
  color: var(--on-surface);
}

.cm-editor.cm-focused,.cm-editor.cm-focused:focus-within {
  outline:none;
  box-shadow:none;
  border-color:var(--input-focus);
}

.cm-editor .cm-scroller {
  font: inherit;
  line-height: var(--type-mono-line);
}

.cm-editor .cm-content { caret-color: var(--primary); }
.cm-editor .cm-cursor { border-left-color: var(--primary); }
.cm-editor .cm-activeLine { background: var(--surface-2); }
.cm-editor .cm-selectionBackground,
.cm-editor .cm-content ::selection { background: var(--primary-container); }
.cm-editor .cm-tooltip {
  background: var(--surface);
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-sm);
  color: var(--on-surface);
}
.cm-editor .cm-tooltip-autocomplete > ul > li[aria-selected] {
  background: var(--primary-container);
  color: var(--on-primary-container, var(--on-surface));
}

/* markdown 的上色。名字来自 browser/dialect.ts 的 HighlightStyle */
.cm-b-h1 { font-weight: 800; color: var(--primary); }
.cm-b-h2 { font-weight: 800; color: var(--primary); }
.cm-b-h { font-weight: 700; color: var(--secondary); }
.cm-b-strong { font-weight: 800; }
.cm-b-em { font-style: italic; }
.cm-b-strike { text-decoration: line-through; color: var(--muted); }
.cm-b-code { color: var(--text-muted); }
.cm-b-link { color: var(--secondary); }
.cm-b-quote { color: var(--muted); }
.cm-b-list { color: var(--muted); }
.cm-b-mark { color: var(--muted); }

/* Bonsai 自己那几样 */
.cm-b-wikilink { color: var(--primary); }
.cm-b-highlight { background: var(--warning-container, var(--surface-2)); }
.cm-b-comment { color: var(--muted); opacity: var(--opacity-solid); }
.cm-b-due { color: var(--task-actionable); font-weight: 700; }
.cm-b-callout { color: var(--secondary); font-weight: 700; }

/* 四态任务的那一个状态字,和笔记页、手机 app 同一组语义色 */
.cm-b-task { font-weight: 800; }
.cm-b-task.is-todo { color: var(--task-blocked); }
.cm-b-task.is-actionable { color: var(--task-actionable); }
.cm-b-task.is-done { color: var(--task-done); }
.cm-b-task.is-blocker { color: var(--task-blocker); }

/* ── Cognitive Sync:待知悉 ──
   agent 写进笔记、人还没说「知道了」的那几行(bonsai-server:web/render.ts 给相交的块加 data-change,
   note-components.tsx 是同步条,browser/dialect.ts 给编辑器里的行加 cm-b-sync-pending;手机 app 的 BlockList 画同一套)。
   状态不只靠颜色:同步条上有文字,正文里的块多一道左侧色条和一层平的底。只用现有 token,不新增。 */
[data-change] { box-shadow: inset var(--stroke-focus) 0 0 var(--sync-pending-edge); background: var(--sync-pending-bg); border-radius: var(--r-xs); }
/* 光秃秃的文字块(段落、标题、列表项、引用)自己没有内边距,标了就给一点,边线和文字之间才有呼吸;卡片类的块(任务、callout、代码、表格)本来就有 */
[data-change]:where(p, h1, h2, h3, h4, h5, h6, li, blockquote) { padding: var(--sp-4) var(--sp-8); }
.cm-b-sync-pending { background: var(--sync-pending-bg); }

.sync-bar { margin-bottom: var(--sp-16); }
.sync-bar .sync-item { padding: var(--sp-12) var(--sp-16); border-top: var(--stroke-thin) solid var(--control-border); }
.sync-meta, .sync-ack { flex-wrap: wrap; gap: var(--sp-8); align-items: center; }
.sync-excerpt { margin: var(--sp-8) 0; padding: var(--sp-8) var(--sp-12); white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--wash); color: var(--on-wash); box-shadow: inset var(--stroke-focus) 0 0 var(--info); border-radius: var(--r-xs); }
.sync-excerpt--old, .sync-item[data-sync-state="acknowledged"] .sync-excerpt { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.sync-ack--all, .sync-acked { border-top: var(--stroke-thin) solid var(--control-border); padding: var(--sp-12) var(--sp-16); }
.sync-acked .sync-item { border-top: 0; padding-inline: 0; }



.ds-page{background:var(--bg);color:var(--on-bg);font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-body)}

.ds-page .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere;padding-block:var(--sp-8)}

.ds-notice>summary{min-height:var(--touch-min);cursor:pointer}

/* Reader, folder overview and editor preview share source-order block spacing.
   Only direct blocks participate; inline pieces and nested lists keep their metrics. */
.note-flow{display:flow-root;min-width:0;margin-block:0}
.note-flow > *{margin-block:0}
.note-flow > * + *{margin-top:var(--sp-24)}
.note-flow > :is(h1,h2,h3,h4,h5,h6):not(:first-child){margin-top:var(--sp-32)}
.note-flow > :is(h1,h2,h3,h4,h5,h6) + *{margin-top:var(--sp-16)}

/* Explicit exception to content-width, right-aligned task actions. */
.btn.btn--centered{align-self:center;width:100%;max-width:var(--action-max-width);margin-inline:auto}

/* Sessions overview: approved 2026-10-17. See sessions.md. */
.ds-sessions-page-title{display:flex;align-items:flex-start;gap:var(--sp-16)}
.ds-sessions-page-title h1{font:var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-line) var(--font-display);letter-spacing:var(--type-h2-tracking);color:var(--type-h2-color)}
.ds-sessions-subtitle{color:var(--text-muted);margin-top:var(--sp-8)}
.ds-sessions-search{display:flex;align-items:center;gap:var(--sp-8);margin-left:auto;width:var(--drawer-width);max-width:var(--drawer-width);height:var(--touch-min);border:var(--stroke) solid var(--ink);border-radius:var(--r-sm);padding:0 var(--sp-12);background:var(--surface)}
.ds-sessions-search input{min-height:0;background:none;border:0;outline:none;color:var(--on-surface);width:100%;min-width:0;font-size:var(--type-body-sm-size)}
.ds-sessions-search:focus-within{box-shadow:none;border-color:var(--input-focus);outline:none;}
.ds-sessions-summary-line{display:flex;align-items:center;gap:var(--sp-24);margin:var(--sp-20) 0 var(--sp-24);flex-wrap:wrap}
.ds-sessions-summary-item{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--type-body-sm-size)}
.ds-sessions-summary-item b{color:var(--on-surface)}
.ds-sessions-signal{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--sp-20);height:var(--sp-20);border-radius:var(--r-full);font-size:var(--type-caption-size);font-weight:800}
.ds-sessions-signal.ds-sessions-working{color:var(--secondary);border:var(--stroke) solid var(--secondary)}
.ds-sessions-signal.ds-sessions-working::after{content:'';width:var(--sp-8);height:var(--sp-8);border-radius:var(--r-full);background:var(--secondary)}
.ds-sessions-signal.ds-sessions-attention{color:var(--warning-fg)}
.ds-sessions-signal.ds-sessions-done{color:var(--primary-fg)}
.ds-sessions-signal .ico{width:var(--sp-20);height:var(--sp-20)}
.ds-sessions-signal.ds-sessions-idle{color:var(--text-muted)}
.ds-sessions-signal.ds-sessions-stopped{color:var(--text-muted)}
.ds-sessions-viewbar{display:flex;align-items:center;gap:var(--sp-16);border-bottom:var(--stroke-thin) solid var(--border);padding-bottom:var(--sp-4)}
.ds-sessions-viewbar .tabs{border:0;gap:var(--sp-16)}
.ds-sessions-viewbar .tab{font-size:var(--type-body-size);padding-inline:var(--sp-4);gap:var(--sp-8)}
.tab.is-active .ds-sessions-count{background:var(--primary-container);color:var(--on-primary-container)}
.ds-sessions-filters{display:flex;align-items:center;gap:var(--sp-8);margin:var(--sp-8) 0}
.ds-sessions-filters .ds-sessions-caption{margin-left:auto}
.ds-sessions-caption{font-size:var(--type-caption-size);color:var(--text-muted)}
.ds-sessions-section-heading{display:flex;align-items:center;gap:var(--sp-8);font:var(--type-h2-weight) var(--type-title-size)/var(--type-h2-line) var(--font-display);margin:var(--sp-20) 0 var(--sp-12)}
.ds-sessions-count{min-width:var(--sp-20)}
.ds-sessions-session{background:var(--surface-2);border:var(--stroke) solid var(--ink);border-radius:var(--r-md);box-shadow:var(--elev-pop-sm);margin-bottom:var(--sp-20);overflow:visible}
.ds-sessions-session-main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.85fr) auto;align-items:center;gap:var(--sp-20);padding:var(--sp-20)}
.ds-sessions-session-heading{display:flex;align-items:flex-start;gap:var(--sp-12)}
.ds-sessions-session-title{background:none;border:0;text-align:left;color:var(--on-surface);font:var(--type-title-weight) var(--type-subtitle-size)/var(--type-title-line) var(--font-body);padding:var(--sp-4) 0;display:block;min-height:var(--sp-32)}
.ds-sessions-session-title:hover{color:var(--link);text-decoration:underline}
.ds-sessions-engine-mark{height:var(--sp-32);width:var(--sp-32);flex:none;display:grid;place-items:center;color:var(--on-surface);margin-top:var(--sp-4)}

.ds-sessions-session-meta{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--type-caption-size);color:var(--text-muted);flex-wrap:wrap}
.ds-sessions-origin{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--type-body-sm-size);margin-top:var(--sp-4);min-width:0}
.ds-sessions-origin a{display:inline-flex;align-items:center;gap:var(--sp-4);min-width:0}
.ds-sessions-origin .ico{width:var(--sp-16);height:var(--sp-16)}
.ds-sessions-text-link{border:0;background:none;color:var(--link);padding:0;text-align:left;font:inherit;cursor:pointer;text-underline-offset:var(--sp-4)}
.ds-sessions-text-link:hover{text-decoration:underline}
.ds-sessions-origin .ds-sessions-text-link{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ds-sessions-source-label{color:var(--text-muted);font-size:var(--type-caption-size)}
.ds-sessions-status-row{display:flex;align-items:center;gap:var(--sp-8);font-weight:700;font-size:var(--type-body-sm-size);margin-bottom:var(--sp-4)}
.ds-sessions-status-row.ds-sessions-working{color:var(--secondary-fg)}
.ds-sessions-status-row.ds-sessions-attention{color:var(--warning-fg)}
.ds-sessions-status-row.ds-sessions-done{color:var(--primary-fg)}
.ds-sessions-status-row.ds-sessions-idle,.ds-sessions-status-row.ds-sessions-stopped{color:var(--text-muted)}
.ds-sessions-progress-copy{font-size:var(--type-caption-size);color:var(--text-muted);margin-top:var(--sp-4)}
.ds-sessions-meter{display:flex;gap:var(--sp-4);width:100%;height:var(--sp-8);margin:var(--sp-8) 0}
.ds-sessions-meter>span{flex:1;border-radius:var(--r-xs);background:var(--surface-sunken)}
.ds-sessions-meter>.ds-sessions-complete{background:var(--primary)}
.ds-sessions-meter>.ds-sessions-current{background:var(--secondary)}
.ds-sessions-meter.ds-sessions-attention>.ds-sessions-current{background:var(--warning)}
.ds-sessions-meter.ds-sessions-indeterminate{background:var(--surface-sunken);border-radius:var(--r-full);overflow:hidden}
.ds-sessions-meter.ds-sessions-indeterminate span{background:var(--secondary);flex:none;width:28%;margin-left:18%}
.ds-sessions-worktree-mini{border-left:var(--stroke-thin) solid var(--border);padding-left:var(--sp-16);font-size:var(--type-body-sm-size);min-width:0}
.ds-sessions-worktree-mini .ds-sessions-text-link{font-weight:700;display:flex;gap:var(--sp-8);align-items:center}
.ds-sessions-branch-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:var(--type-caption-size);margin-top:var(--sp-4)}
.ds-sessions-warning-text{color:var(--warning-fg);font-size:var(--type-caption-size)}
.ds-sessions-row-menu{position:relative}
.ds-sessions-row-menu>button{width:var(--touch-min);height:var(--touch-min);display:grid;place-items:center;background:none;border:0;border-radius:var(--r-sm);color:var(--text-muted)}
.ds-sessions-row-menu>button:hover{background:var(--control-hover)}
.ds-sessions-controls{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-4)}
.ds-sessions-session-action{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-4)}
.ds-sessions-expand-btn{min-width:var(--touch-min);min-height:var(--touch-min);display:flex;gap:var(--sp-8);align-items:center;color:var(--link);background:none;border:0;font-weight:700}

.ds-sessions-expanded-body{border-top:var(--stroke-thin) solid var(--border);padding:var(--sp-16) var(--sp-20);background:var(--surface)}
.ds-sessions-phase-top{display:flex;align-items:center;gap:var(--sp-16);font-size:var(--type-body-sm-size);margin-bottom:var(--sp-12)}
.ds-sessions-phase-top b{font-weight:700}
.ds-sessions-phase-top .ds-sessions-caption{margin-left:auto}
.ds-sessions-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8)}
.ds-sessions-phase{font-size:var(--type-caption-size);color:var(--text-muted)}
.ds-sessions-phase:before{content:'';display:block;height:var(--sp-8);border-radius:var(--r-xs);background:var(--surface-sunken);margin-bottom:var(--sp-4)}
.ds-sessions-phase.ds-sessions-complete:before{background:var(--primary)}
.ds-sessions-phase.ds-sessions-current{color:var(--secondary-fg);font-weight:700}
.ds-sessions-phase.ds-sessions-current:before{background:var(--secondary)}
.ds-sessions-agent-header{display:flex;align-items:center;margin-top:var(--sp-16);gap:var(--sp-12);padding-top:var(--sp-12);border-top:var(--stroke-thin) solid var(--border);font-size:var(--type-body-sm-size)}
.ds-sessions-agent-header .ds-sessions-caption{margin-left:auto}
.ds-sessions-agent-tree{margin:var(--sp-8) 0 0 var(--sp-12);border-left:var(--stroke) solid var(--border);padding-left:var(--sp-24)}
.ds-sessions-agent-row{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:var(--sp-16);align-items:center;min-height:var(--touch-min);border-bottom:var(--stroke-thin) solid var(--border-faint)}
.ds-sessions-agent-row:last-child{border-bottom:0}
.ds-sessions-agent-row:before{content:'';position:absolute;left:calc(-1 * var(--sp-24));top:50%;width:var(--sp-16);border-top:var(--stroke) solid var(--border)}
.ds-sessions-agent-name{display:flex;align-items:center;gap:var(--sp-12);min-width:0;font-size:var(--type-body-sm-size)}
.ds-sessions-agent-name .ds-sessions-text-link{color:var(--on-surface);font-weight:700}
.ds-sessions-agent-progress{display:flex;align-items:center;gap:var(--sp-12);font-size:var(--type-caption-size)}
.ds-sessions-agent-progress .ds-sessions-meter{max-width:calc(var(--sp-64)*2);flex:1}
.ds-sessions-agent-control{display:inline-flex;align-items:center;gap:var(--sp-4);min-height:var(--touch-min);padding-inline:var(--sp-12);border:0;background:none;color:var(--secondary-fg);font-weight:700;font-size:var(--type-caption-size)}
.ds-sessions-session-footer{display:flex;align-items:center;gap:var(--sp-12);padding-top:var(--sp-12)}
.ds-sessions-session-footer .ds-sessions-row{margin-left:auto}
.ds-sessions-row{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
.ds-sessions-row--end{justify-content:flex-end}
.ds-sessions-card-link{min-height:var(--touch-min);display:flex;align-items:center;gap:var(--sp-8);font-weight:700}
.ds-sessions-mini-label{font-size:var(--type-caption-size);color:var(--text-muted)}
.ds-sessions-view-note{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-16);padding:var(--sp-16);border-radius:var(--r-sm);background:var(--secondary-container);color:var(--on-secondary-container);font-size:var(--type-body-sm-size)}
.ds-sessions-wt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-24);margin-top:var(--sp-24)}
.ds-sessions-wt-card{border:var(--stroke) solid var(--ink);border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--elev-pop-sm);overflow:hidden}
.ds-sessions-wt-card-header{display:flex;gap:var(--sp-12);align-items:center;padding:var(--sp-20);border-bottom:var(--stroke-thin) solid var(--border)}
.ds-sessions-branch-icon{display:flex;gap:var(--sp-8);align-items:center;font-weight:800}
.ds-sessions-wt-card h2{font:var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-body)}
.ds-sessions-wt-card .ds-sessions-tag{margin-left:auto}
.ds-sessions-wt-body{padding:var(--sp-20)}
.ds-sessions-tag.ds-sessions-working{background:var(--secondary-container);color:var(--on-secondary-container)}
.ds-sessions-tag.ds-sessions-attention{background:var(--warning-container);color:var(--on-warning-container)}
.ds-sessions-tag.ds-sessions-done{background:var(--primary-container);color:var(--on-primary-container)}
.ds-sessions-wt-origin{display:flex;align-items:center;gap:var(--sp-8);color:var(--text-muted);font-size:var(--type-body-sm-size);margin-top:var(--sp-8)}
.ds-sessions-wt-origin .ds-sessions-engine-mark{width:var(--sp-24);height:var(--sp-24);margin:0}
.ds-sessions-wt-session{margin:var(--sp-20) 0;display:flex;gap:var(--sp-12);align-items:center;padding:var(--sp-12) 0;border-block:var(--stroke-thin) solid var(--border)}
.ds-sessions-wt-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-12);margin-bottom:var(--sp-16)}
.ds-sessions-wt-facts strong{display:block;font-size:var(--type-title-size)}
.ds-sessions-wt-facts span{color:var(--text-muted);font-size:var(--type-caption-size)}
.ds-sessions-wt-message{min-height:var(--touch-min);font-size:var(--type-body-sm-size);color:var(--text-muted)}
.ds-sessions-wt-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-8);margin-top:var(--sp-12)}
.ds-sessions-empty{padding:var(--sp-48);text-align:center;color:var(--text-muted);border:var(--stroke-thin) dashed var(--control-border);border-radius:var(--r-md);margin-top:var(--sp-24)}

.ds-sessions-page{padding:var(--sp-24);container-type:inline-size;min-width:0}

.ds-sessions-page h1,.ds-sessions-page h2,.ds-sessions-page p{margin:0}

.ds-sessions-page .ds-sessions-section-heading{margin:var(--sp-24) 0 var(--sp-12)}

.ds-sessions-page :is(button,a,input){overflow-wrap:anywhere}

.ds-sessions-session-title{min-height:var(--touch-min)}

.ds-sessions-origin a{min-height:var(--touch-min);display:inline-flex;align-items:center}

.ds-sessions-phases{grid-template-columns:repeat(auto-fit,minmax(var(--sp-64),1fr))}

.ds-sessions-page :is(.ds-sessions-working){--session-tone:var(--secondary-fg)}

.ds-sessions-page :is(.ds-sessions-attention){--session-tone:var(--warning-fg)}

.ds-sessions-page :is(.ds-sessions-done){--session-tone:var(--primary-fg)}

.ds-sessions-signal{color:var(--session-tone,var(--text-muted))}

.ds-sessions-status-row{color:var(--session-tone,var(--text-muted))}

.ds-sessions-page .ds-display-scope{margin-left:auto}

.ds-sessions-session-main>*{min-width:0}

.ds-sessions-agent-row{padding-block:var(--sp-8)}

.ds-sessions-origin{overflow-wrap:anywhere}

.ds-sessions-empty{padding:var(--sp-32)}

@container (max-width:900px){.ds-sessions-session-main{grid-template-columns:minmax(0,1fr) auto}
.ds-sessions-session-progress{grid-column:1/-1}
.ds-sessions-worktree-mini{grid-column:1/-1;padding-left:0;border:0}
.ds-sessions-controls{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-4)}
.ds-sessions-session-action{grid-column:2;grid-row:1}
.ds-sessions-page-title{flex-wrap:wrap}
.ds-sessions-search{margin-left:0;width:100%;max-width:none}
.ds-sessions-wt-grid{grid-template-columns:1fr}
}

@container (max-width:540px){.ds-sessions-agent-row{grid-template-columns:1fr auto}
.ds-sessions-agent-progress{grid-column:1}
.ds-sessions-agent-control{grid-column:2;grid-row:1/3}
.ds-sessions-filters{flex-wrap:wrap}
.ds-sessions-filters .ds-sessions-caption{width:100%;margin-left:0}
.ds-sessions-session-main,.ds-sessions-expanded-body{padding:var(--sp-16)}
.ds-sessions-session-footer{flex-wrap:wrap}
.ds-sessions-summary-line{gap:var(--sp-12)}
}


/* Sessions reuse the shared icon and button primitives; text never supplies a glyph. */
.ds-sessions-card-link{border:0;background:none;color:var(--link);text-align:left;font:inherit;cursor:pointer}
.ds-sessions-worktree-mini .ds-sessions-text-link{overflow-wrap:anywhere}
.ds-sessions-page .ico{flex-shrink:0}

/* Sessions refinement 4: approved source composition, 2026-10-18. */
.ds-sessions-page-title{align-items:center}
.ds-sessions-subtitle{font-size:var(--type-body-sm-size)}
.ds-sessions-summary-line{margin:var(--sp-16) 0 var(--sp-20)}
.ds-sessions-viewbar{position:relative}
.ds-sessions-toolbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-12)}
.ds-sessions-scope-copy{font-size:var(--type-caption-size);color:var(--text-muted)}
.ds-sessions-filter-trigger{position:relative;display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);border:var(--stroke-thin) solid var(--control-border);background:var(--surface);border-radius:var(--r-sm);color:var(--on-surface)}
.ds-sessions-filter-trigger[aria-expanded=true]{background:var(--secondary-container);color:var(--on-secondary-container);border-color:var(--secondary-fg)}
.ds-sessions-filter-trigger b{position:absolute;top:var(--sp-2);right:var(--sp-2);font-size:var(--type-caption-size);color:var(--on-secondary);background:var(--secondary);width:var(--sp-16);height:var(--sp-16);border-radius:var(--r-full);display:block}
.ds-sessions-runtime-row{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-8);color:var(--text-muted);font-size:var(--type-caption-size);min-height:var(--sp-32)}
.ds-sessions-runtime-row .ico{width:var(--sp-16);height:var(--sp-16);color:var(--warning-fg)}
.ds-sessions-runtime-row button{border:0;background:none;color:var(--secondary-fg);font-weight:700;font-size:inherit;min-height:var(--touch-min);padding:0 var(--sp-8)}
.ds-sessions-runtime-row .ds-sessions-refresh{margin-left:auto;display:flex;align-items:center;gap:var(--sp-8)}
.ds-sessions-runtime-row .ds-sessions-refresh .ico{color:inherit}
.ds-sessions-section-heading{margin-top:var(--sp-16)}
.ds-sessions-session-main{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,.85fr)}
.ds-sessions-session-title{font-size:var(--type-subtitle-size);font-weight:800}
.ds-sessions-engine-mark{margin-right:var(--sp-4)}
.ds-sessions-agent-name .ds-provider-icon{width:var(--sp-20);height:var(--sp-20)}
.ds-sessions-card-actions{padding:var(--sp-8) var(--sp-20) var(--sp-12);display:flex;align-items:center;gap:var(--sp-12);border-top:var(--stroke-thin) solid var(--border-faint);background:var(--surface-2)}
.ds-sessions-card-actions .row{margin-left:auto;gap:var(--sp-8)}
.ds-sessions-card-actions .btn{padding-inline:var(--sp-16)}
.ds-sessions-expand{display:flex;align-items:center;gap:var(--sp-8);background:none;border:0;color:var(--text-muted);font-size:var(--type-caption-size);min-height:var(--touch-min)}
.ds-sessions-expand .ico{width:var(--sp-16)}
.ds-sessions-expanded-body{padding-block:var(--sp-12)}
.ds-sessions-agent-header{margin-top:var(--sp-12)}
.ds-sessions-filter-menu{position:absolute;right:0;top:calc(100% + var(--sp-8));width:calc(var(--drawer-width) + var(--sp-64));background:var(--surface-2);border:var(--stroke-thin) solid var(--control-border);border-radius:var(--r-sm);padding:var(--sp-20);box-shadow:none;z-index:10}
.ds-sessions-filter-menu[hidden]{display:none}
.ds-sessions-menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-12)}
.ds-sessions-menu-top h2{font:var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-display)}
.ds-sessions-menu-close{border:0;background:none;display:grid;place-items:center;color:var(--text-muted);width:var(--touch-min);height:var(--touch-min)}
.ds-sessions-filter-menu fieldset{border:0;padding:var(--sp-12) 0;margin:0;border-top:var(--stroke-thin) solid var(--border-faint)}
.ds-sessions-filter-menu legend{float:left;width:100%;font-size:var(--type-caption-size);font-weight:800;color:var(--text-muted);margin-bottom:var(--sp-8)}
.ds-sessions-option-line{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--touch-min);font-size:var(--type-body-sm-size);padding:0 var(--sp-8);border-radius:var(--r-xs);cursor:pointer}
.ds-sessions-option-line input{accent-color:var(--primary);width:var(--sp-16);height:var(--sp-16)}
.ds-sessions-option-line:has(input:checked){background:var(--primary-container);color:var(--on-primary-container)}
.ds-sessions-option-line .ds-provider-icon{width:var(--sp-24);height:var(--sp-24)}
.ds-sessions-option-line small{color:var(--text-muted);margin-left:auto}
.ds-sessions-scope-options{display:flex;gap:var(--sp-4);clear:both}
.ds-sessions-scope-options .ds-sessions-option-line{flex:1;gap:var(--sp-4);justify-content:center;font-size:var(--type-caption-size)}
.ds-sessions-status-options{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.ds-sessions-agent-options{clear:both;display:grid;gap:var(--sp-4)}
.ds-sessions-menu-actions{border-top:var(--stroke-thin) solid var(--border-faint);padding-top:var(--sp-16);display:flex;gap:var(--sp-8);justify-content:flex-end}
.ds-sessions-menu-actions .btn{padding-inline:var(--sp-16)}
.ds-sessions-menu-hint{font-size:var(--type-caption-size);color:var(--text-muted);padding-bottom:var(--sp-12)}
.ds-sessions-runtime-detail{margin:var(--sp-4) 0 var(--sp-12);padding:var(--sp-16);border-left:var(--stroke) solid var(--warning);background:var(--surface);font-size:var(--type-body-sm-size);border-radius:var(--r-xs)}
.ds-sessions-runtime-detail p{margin-top:var(--sp-8);color:var(--text-muted)}
.ds-sessions-runtime-detail .row{margin-top:var(--sp-12)}
.ds-sessions-runtime-detail[hidden]{display:none}
.ds-sessions-session-action-groups{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-20);margin-left:auto}
.ds-sessions-session-management{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-8)}
.ds-sessions-session-entry{padding-left:var(--sp-20);border-left:var(--stroke-thin) solid var(--border);display:flex;align-items:center}
.ds-sessions-session-entry .btn{white-space:nowrap}

.ds-sessions-session-dialog{position:fixed;inset:0;margin:auto;width:calc(100vw - var(--sp-64)*2);max-width:calc(var(--drawer-width)*4);height:calc(100vh - var(--sp-64)*2);max-height:calc(100vh - var(--sp-32)*2);padding:0;overflow:hidden;color:var(--on-surface)}
.ds-sessions-session-dialog[open]{display:flex;flex-direction:column}
.ds-sessions-session-dialog::backdrop{background:var(--backdrop);opacity:var(--backdrop-alpha)}
.ds-sessions-session-dialog.is-expanded{width:calc(100vw - var(--sp-16)*2);max-width:none;height:calc(100vh - var(--sp-16)*2);max-height:none}
.ds-sessions-session-dialog .ds-sessions-dialog-head{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-20) var(--sp-24);border-bottom:var(--stroke-thin) solid var(--border);background:var(--surface-2);flex:none}
.ds-sessions-dialog-head h2{font:var(--type-title-weight) var(--type-h2-size)/var(--type-h2-line) var(--font-display)}
.ds-sessions-dialog-head .ds-sessions-heading-copy{min-width:0}
.ds-sessions-dialog-head p{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--type-caption-size);color:var(--text-muted);margin-top:var(--sp-4)}
.ds-sessions-dialog-tools{margin-left:auto;display:flex;gap:var(--sp-8);align-items:center}
.ds-sessions-plain-control{min-width:var(--touch-min);min-height:var(--touch-min);display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);border:0;background:none;color:var(--text-muted);border-radius:var(--r-xs);font-size:var(--type-body-sm-size);font-weight:700}
.ds-sessions-plain-control:hover{background:var(--control-hover)}
.ds-sessions-dialog-content{display:grid;grid-template-columns:minmax(0,1fr) var(--drawer-width);min-height:0;flex:1}
.ds-sessions-dialog-conversation{min-height:0;display:flex;flex-direction:column;overflow:hidden}
.ds-sessions-transcript{padding:var(--sp-24) var(--sp-32);overflow-y:auto;min-height:0;flex:1;overscroll-behavior:contain}
.ds-sessions-composer{padding:var(--sp-16) var(--sp-24) var(--sp-20);border-top:var(--stroke-thin) solid var(--border);background:var(--surface-2);flex:none}
.ds-sessions-composer .ds-sessions-field-area{padding:var(--sp-12) var(--sp-16);border:var(--stroke) solid var(--ink);border-radius:var(--r-sm);background:var(--surface)}
.ds-sessions-composer textarea{display:block;width:100%;height:var(--sp-64);resize:none;border:0;background:none;color:var(--on-surface);font:inherit;outline:0}
.ds-sessions-composer-foot{display:flex;align-items:center;gap:var(--sp-8);padding-top:var(--sp-12)}
.ds-sessions-composer-foot .ds-sessions-hint{font-size:var(--type-caption-size);color:var(--text-muted);margin-right:auto}
.ds-sessions-composer-foot .btn{padding-inline:var(--sp-16)}
.ds-sessions-composer-status{display:flex;align-items:center;gap:var(--sp-8);color:var(--secondary-fg);font-size:var(--type-caption-size);margin-bottom:var(--sp-12)}
.ds-sessions-dialog-context{border-left:var(--stroke-thin) solid var(--border);background:var(--surface);padding:var(--sp-24) var(--sp-20);overflow-y:auto;min-height:0}
.ds-sessions-context-section+.ds-sessions-context-section{border-top:var(--stroke-thin) solid var(--border);margin-top:var(--sp-24);padding-top:var(--sp-20)}
.ds-sessions-context-section h3{font:var(--type-title-weight) var(--type-subtitle-size)/var(--type-title-line) var(--font-display);margin-bottom:var(--sp-12)}
.ds-sessions-context-section p,.ds-sessions-context-section a{font-size:var(--type-body-sm-size);line-height:var(--type-body-line)}
.ds-sessions-context-section .ds-sessions-meta{font-size:var(--type-caption-size);color:var(--text-muted);margin:var(--sp-4) 0}
.ds-sessions-context-section .ds-sessions-note-link{display:flex;align-items:center;gap:var(--sp-8)}
.ds-sessions-plan-step{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--touch-min);font-size:var(--type-body-sm-size);color:var(--text-muted)}
.ds-sessions-plan-step .ico{width:var(--sp-16);height:var(--sp-16)}
.ds-sessions-plan-step.complete .ico{color:var(--primary-fg)}
.ds-sessions-plan-step.current{color:var(--secondary-fg);font-weight:700}
.ds-sessions-plan-step .ds-sessions-step-number{width:var(--sp-20);text-align:center;font-size:var(--type-caption-size)}
.ds-sessions-agent-mini{display:flex;align-items:center;gap:var(--sp-8);margin:var(--sp-12) 0;font-size:var(--type-caption-size)}
.ds-sessions-agent-mini .ds-provider-icon{width:var(--sp-20);height:var(--sp-20)}
.ds-sessions-agent-mini .ds-sessions-state{margin-left:auto;color:var(--text-muted)}
.ds-sessions-context-end{display:flex;justify-content:flex-end;margin-top:var(--sp-24)}

.ds-provider-icon{display:inline-block;flex:none;width:var(--sp-32);height:var(--sp-32);object-fit:contain;vertical-align:middle}
.ds-provider-icon--dark{display:none}
:root[data-theme="matcha-dark"] .ds-provider-icon--light{display:none}
:root[data-theme="matcha-dark"] .ds-provider-icon--dark{display:inline-block}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .ds-provider-icon--light{display:none}:root:not([data-theme]) .ds-provider-icon--dark{display:inline-block}}
dialog.dialog{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - var(--sp-32));overflow:auto}
.ds-sessions-session-dialog{height:calc(100dvh - var(--sp-64)*2);overflow:hidden}
.ds-sessions-session-dialog.is-expanded{height:calc(100dvh - var(--sp-16)*2)}
.ds-sessions-filter-menu{max-width:calc(100vw - var(--sp-48));max-height:calc(100dvh - var(--sp-64));overflow:auto}
.ds-sessions-plain-control:focus-visible,.ds-sessions-filter-trigger:focus-visible{outline:var(--stroke) solid var(--secondary-fg);outline-offset:var(--sp-2)}
.ds-sessions-dialog-head h2{overflow-wrap:anywhere}
.ds-sessions-dialog-context a{color:var(--primary-fg)}
.ds-sessions-agent-control{color:var(--primary-fg)}
.ds-sessions-session-dialog .ds-sessions-status-row{font-size:var(--type-caption-size)}
.ds-sessions-dialog-conversation .ws-chat-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--sp-24) var(--sp-32)}
.ds-sessions-dialog-conversation :is(.ws-dock,.ws-composer){flex:none;border-top:var(--stroke-thin) solid var(--border);padding:var(--sp-16) var(--sp-24) var(--sp-20);background:var(--surface-2)}
.ds-sessions-dialog-conversation .ws-user{background:var(--surface);border:0;border-radius:var(--r-sm);box-shadow:none;padding:var(--sp-16) var(--sp-20)}
.ds-sessions-dialog-conversation .ws-items{gap:var(--sp-24);padding:0}
.ds-sessions-dialog-conversation .ws-chat-problem{flex:none}
@container(max-width:900px){.ds-sessions-session-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ds-sessions-worktree-mini{grid-column:1/-1}}
@media(max-width:700px){.ds-sessions-session-dialog{width:calc(100vw - var(--sp-16)*2);height:calc(100dvh - var(--sp-16)*2);max-height:none}.ds-sessions-dialog-content{display:flex;flex-direction:column;overflow:auto}.ds-sessions-dialog-conversation{flex:none;min-height:calc(var(--drawer-width)*2)}.ds-sessions-dialog-context{overflow:visible;border-left:0;border-top:var(--stroke-thin) solid var(--border)}.ds-sessions-card-actions{flex-wrap:wrap}.ds-sessions-session-action-groups{gap:var(--sp-8);flex-wrap:wrap}.ds-sessions-session-entry{padding-left:var(--sp-8)}.ds-sessions-scope-copy{display:none}.ds-sessions-dialog-tools{gap:0}.ds-sessions-dialog-head{padding:var(--sp-12)}.ds-sessions-session-management{flex-wrap:wrap}}

.ds-sessions-dialog-conversation .ws-dock{border-inline:0;border-bottom:0;border-radius:0;box-shadow:none}

/* Shared live composer adopts the approved inset field in the detail surface. */
.ds-sessions-dialog-conversation .ws-compose{padding:var(--sp-12) var(--sp-16);border:var(--stroke) solid var(--ink);border-radius:var(--r-sm);background:var(--surface)}
.ds-sessions-dialog-conversation .ws-user{align-self:stretch;max-width:none}
.ds-sessions-dialog-context p{overflow-wrap:anywhere}
.ds-sessions-dialog-context .ds-sessions-agent-mini{flex-wrap:wrap}
@media(max-width:700px){.ds-sessions-dialog-content .ds-sessions-dialog-conversation{height:100%;min-height:0}}

/* Approved workspace composition (2026-10-18, revision 6). */
.ds-workspace{--nav-w:var(--drawer-width);background:var(--surface);color:var(--on-surface)}
.ds-workspace-banner{height:var(--sp-24);display:grid;place-items:center;flex:none;background:var(--primary);color:var(--on-primary);font-size:var(--type-caption-size);border-bottom:var(--stroke-thin) solid var(--border)}
.ds-workspace-header{height:var(--appbar-height);flex:none;display:flex;align-items:center;gap:var(--sp-8);padding:0 var(--sp-16);background:var(--surface);border:0;border-bottom:var(--stroke-thin) solid var(--border);border-radius:0;margin:0}
.ds-workspace-brand{display:flex;align-items:center;gap:var(--sp-8);color:var(--primary-fg);font:var(--brand-weight) var(--type-h2-size)/1 var(--font-brand);text-decoration:none;white-space:nowrap}
.ds-workspace-brand img,.ds-workspace-brand .art{width:var(--avatar-sm);height:var(--avatar-sm);object-fit:contain}
.ds-workspace-nav,.ds-workspace-chat{background:var(--surface);color:var(--on-surface);border:0;border-radius:0;box-shadow:none;padding:var(--sp-16) var(--sp-12)}
.ds-workspace-divider{position:relative;background:var(--surface)}
.ds-workspace-divider:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:var(--stroke-thin);background:var(--border)}
.ds-workspace-nav .ds-nav-shortcuts{gap:var(--sp-2);padding-bottom:var(--sp-16);margin-bottom:var(--sp-16);border-bottom:var(--stroke-thin) solid var(--border)}
.ds-workspace-drawer:focus{outline:none;box-shadow:none}
.ds-workspace-nav a:focus-visible,.ds-workspace-header .ds-quiet:focus-visible{outline:var(--stroke-thin) solid var(--text-muted);outline-offset:calc(-1 * var(--stroke-thin));box-shadow:none}
:is(.ds-workspace-nav,.ds-public-mobile-nav) a{font:600 var(--type-body-sm-size)/var(--type-body-line) var(--font-body)}
:is(.ds-workspace-nav,.ds-public-mobile-nav) a .ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm));flex:none}
.ds-workspace-section{display:flex;align-items:center;gap:var(--sp-8);margin:var(--sp-8) 0}
.ds-workspace-section>a{flex:1;min-width:0}
.ds-quiet,.ds-note-command,.ds-dismiss{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);min-width:var(--touch-min);min-height:var(--touch-min);padding:0 var(--sp-8);border:0;border-radius:var(--r-xs);box-shadow:none;background:transparent;color:var(--on-surface);font:600 var(--type-body-sm-size)/var(--type-body-line) var(--font-body);text-decoration:none;cursor:pointer}
.ds-quiet .ico{width:var(--icon-box,var(--icon-button));height:var(--icon-box,var(--icon-button))}
.ds-note-command .ico,.ds-dismiss .ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm))}
.ds-quiet:hover,.ds-note-command:hover,.ds-dismiss:hover,.ds-note-command[aria-expanded=true],.ds-note-command[aria-pressed=true]{background:var(--control-hover);color:var(--on-control-hover)}
.ds-quiet:focus-visible,.ds-note-command:focus-visible,.ds-dismiss:focus-visible{outline:none;box-shadow:inset 0 calc(-1 * var(--stroke-focus)) 0 var(--text-muted)}
.ds-quiet:disabled,.ds-note-command:disabled{color:var(--on-disabled);cursor:default}
.ds-note-paper{background:var(--surface-2);border:0;border-radius:0;box-shadow:none;padding:0;min-width:0}
.ds-note-chrome{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-24);min-width:0}
.ds-note-chrome>.crumbs{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ds-note-commands{display:flex;align-items:center;flex:none;gap:0}
.ds-note-indicator{position:relative;display:inline-flex;align-items:center;justify-content:center}
.ds-note-command-count{position:absolute;top:calc(-1 * var(--sp-8));left:calc(100% - var(--sp-12));font-size:var(--type-caption-size);font-weight:700}
.ds-note-switch-state{font-size:var(--type-caption-size);font-weight:700}
.ds-note-command[aria-checked=true] .ds-note-switch-off,.ds-note-command:not([aria-checked=true]) .ds-note-switch-on{display:none}
.ds-note-command-count.badge{left:calc(100% - var(--sp-12) + var(--sp-2));padding-inline:var(--sp-2);flex:none;white-space:nowrap;min-width:var(--badge-size);width:max-content;line-height:1}
.typing.ds-note-loading{height:var(--sp-12);padding:0;gap:var(--sp-2);background:transparent}
.typing.ds-note-loading .dot{width:var(--sp-4);height:var(--sp-4)}
.ds-note-reading[aria-checked=true] .ico{fill:currentColor}
.ds-light-popover{position:absolute;z-index:20;background:var(--surface);color:var(--on-surface);border:var(--stroke-thin) solid var(--control-border);border-radius:var(--r-sm);box-shadow:none;padding:var(--sp-8);max-width:calc(100vw - var(--sp-24))}
.menu-pop.ds-light-popover{width:var(--drawer-width)}
.menu-pop.ds-light-popover .opt{width:100%;box-sizing:border-box;text-align:left}
.menu-pop.ds-light-popover .opt>.ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm));flex:none}
.menu-pop .menu-separator{border:0;border-top:var(--stroke-thin) solid var(--border);margin:var(--sp-8) var(--sp-12)}
.menu-pop .opt.opt--danger{color:var(--error-fg)}
.menu-pop .opt.opt--danger:hover{background:var(--error-container);color:var(--on-error-container)}
/* Compact header tool: an icon-only native disclosure (Appearance, Language) whose choices open in a light popover
   under its right edge. The summary is a .ds-quiet icon with an accessible name inside a .tooltip--hover.tooltip--below. */
.ds-header-menu{position:relative;flex:none}
.ds-header-menu>summary{list-style:none}
.ds-header-menu>summary::-webkit-details-marker{display:none}
.ds-header-menu>.ds-light-popover{top:100%;right:0;width:max-content}
.ds-header-menu>.ds-light-popover>label{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--touch-min)}
.ds-header-menu>.menu-pop.ds-light-popover{margin-top:0;display:flex;flex-direction:column}
.ds-note-more{position:relative}
.ds-note-more-panel{right:0;top:100%;display:flex;align-items:center;width:max-content;gap:var(--sp-4)}
.ds-note-action-divider{height:var(--sp-20);border-left:var(--stroke-thin) solid var(--border);margin-inline:var(--sp-4)}
.ds-groups{position:relative}
.ds-groups-trigger{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--ui-row-height);padding:0 var(--sp-12);border:0;background:transparent;color:var(--text-muted);font:600 var(--type-body-sm-size)/var(--type-body-line) var(--font-body);cursor:pointer}
.ds-groups-trigger .ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm))}
.ds-groups-menu{left:0;top:100%;width:var(--drawer-width);max-height:60dvh;overflow:auto}
.ds-groups-option{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--ui-row-height);padding:0 var(--sp-8);cursor:pointer;font-size:var(--type-body-sm-size)}
.ds-groups-option:hover{background:var(--control-hover)}
.ds-groups-option input{accent-color:var(--primary);width:var(--icon-size-18);height:var(--icon-size-18);flex:none}
.ds-groups-search{width:100%;margin-bottom:var(--sp-8)}
.ds-note-dialog{position:fixed;inset:0;margin:auto;padding:0;background:var(--surface);color:var(--on-surface);border:var(--stroke) solid var(--ink);border-radius:var(--r-md);width:var(--action-max-width);max-width:calc(100vw - var(--sp-32));max-height:calc(100dvh - var(--sp-32));box-shadow:var(--elev-3)}
.ds-note-dialog::backdrop{background:var(--backdrop);opacity:var(--backdrop-alpha)}
.ds-note-dialog>header{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-16) var(--sp-24);border-bottom:var(--stroke-thin) solid var(--border)}
.ds-note-dialog>header h2{flex:1;margin:0}
.ds-note-dialog>header h2:focus{outline:none}
.ds-note-dialog-body{padding:var(--sp-24);overflow:auto}
.ds-note-awareness{margin-bottom:var(--sp-24);padding:var(--sp-16);border-top:var(--stroke-thin) solid var(--border);border-bottom:var(--stroke-thin) solid var(--border);background:var(--surface-2)}
.ds-sessions-filter-trigger{border:0;border-radius:0;background:transparent}
.ds-sessions-filter-trigger .ico{width:var(--icon-box,var(--icon-button));height:var(--icon-box,var(--icon-button))}
@media(max-width:700px){.ds-note-chrome{gap:0}.ds-note-more-panel{flex-wrap:wrap}.ds-workspace-header{padding-inline:var(--sp-8)}.ds-note-dialog-body{padding:var(--sp-16)}}

.ds-light-popover[hidden],.ds-note-awareness[hidden]{display:none}
.ds-ack-pop{position:absolute;display:flex;align-items:center;gap:var(--sp-4)}
.ds-ack-pop[hidden]{display:none}
.ds-server-view>.card,.ds-server-view>section.card{border:0;border-radius:0;box-shadow:none;padding:0;background:var(--surface)}
.ds-note-awareness .sync-write{border:0;border-bottom:var(--stroke-thin) solid var(--border);border-radius:0;box-shadow:none;background:transparent}
.ds-note-paper .sync-hint{display:none}
.ds-workspace .ws-edit-card{border:0;border-radius:0;box-shadow:none}

.ds-workspace-brand-zone{display:flex;align-items:center;gap:var(--sp-8);width:calc(var(--nav-w) - var(--sp-16));min-width:calc(var(--touch-min)*2 + var(--sp-24));flex:none}
.ds-workspace-brand-zone>.ds-quiet{margin-left:auto}
.ds-workspace-brand-zone[data-collapsed=true]{width:auto;min-width:0}
.ds-workspace-brand-zone[data-collapsed=true]>.ds-quiet{margin-left:0}
.ds-workspace .ds-note-paper{padding:0;gap:0;display:block}
.ds-note-paper>.ds-note-chrome{min-height:var(--touch-min);padding:0 var(--sp-24);margin:0;border-bottom:var(--stroke-thin) solid var(--border)}
.ds-note-paper>.note-body,.ds-note-paper>.ds-notice,.ds-note-paper>.ds-note-awareness{width:calc(100% - var(--sp-48));max-width:calc(var(--action-max-width) + var(--sp-32));margin:var(--sp-32) auto}
.ds-note-paper .ds-task{border:0;border-radius:0;box-shadow:none;padding:var(--sp-8) 0}
.ds-note-paper>.ds-note-awareness{margin-top:var(--sp-16)}
.ds-note-dialog-body .ds-server-view>section>h1{display:none}
.ds-workspace-chat>.ws-chat-head{padding-bottom:var(--sp-12);border-bottom:var(--stroke-thin) solid var(--border)}
.ds-workspace-chat>.ws-chat-head>.ds-conversation-titlebar:only-child{padding-bottom:0;border-bottom:0}
.ds-workspace-nav .ws-tree-note .ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm))}
@media(max-width:700px){.ds-note-paper>.ds-note-chrome{padding-inline:var(--sp-8)}.ds-note-paper>.note-body,.ds-note-paper>.ds-note-awareness{width:calc(100% - var(--sp-32))}}

/* Compact header retains the same controls when drawers become overlays. */
.ds-workspace[data-narrow=true] .ds-workspace-brand-zone{width:auto;min-width:0}
@media(max-width:700px){.ds-workspace-header{gap:var(--sp-4)}.ds-workspace-brand-zone{gap:var(--sp-4)}.ds-workspace-header>.grow{min-width:0}.ds-workspace-header .ds-quiet{padding-inline:var(--sp-4)}}

.ds-workspace-nav .ds-groups-menu{width:100%}

/* Workspace tree, location and conversation: approved reference alignment. */
.ds-workspace-section>a{font:800 var(--type-body-size)/var(--type-body-line) var(--font-body)}
.ds-workspace-section .ico{color:var(--text-muted)}
.ds-groups-trigger strong{color:var(--on-surface);font-weight:800}
.ds-tree{list-style:none;margin:0 0 0 var(--sp-12);padding:0 0 0 var(--sp-12);border-left:var(--stroke-thin) solid var(--border)}
.ds-tree .ds-tree{margin-left:var(--sp-24)}
.ds-tree[data-depth="6"] .ds-tree{margin-left:0;padding-left:0;border-left:0}
.ds-tree-row{display:flex;align-items:center;min-width:0;min-height:var(--ui-row-height);}
.ds-tree-row>.ds-quiet{flex:none;color:var(--text-muted);border-radius:0}
.ds-workspace-nav .ds-tree-row>a{flex:1;min-width:0;gap:0;padding:0;min-height:var(--ui-row-height);}
.ds-tree-row[data-expanded=true]>a{font-weight:800}
.ds-tree-row>a>.ds-meta{padding-inline:var(--sp-4)}
.ds-workspace-nav .ds-tree-note>a>.ico{width:var(--icon-box,var(--icon-chip));height:var(--icon-box,var(--icon-chip));margin-inline:var(--sp-8);flex:none;color:var(--text-muted)}
.ds-tree-row>a[aria-current=page]>.ico{color:var(--on-primary-container)}
.ds-note-location{display:flex;align-items:center;gap:var(--sp-8);flex:1;min-width:0;color:var(--text-muted);font:600 var(--type-body-sm-size)/var(--type-body-line) var(--font-body);white-space:nowrap;overflow:hidden}
.ds-note-location>a{color:inherit;text-decoration:none;flex-shrink:0;display:inline-flex;align-items:center;min-height:var(--touch-min)}
.ds-note-location>a:hover{color:var(--on-surface)}
.ds-note-location>.ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm));flex:none}
.ds-note-location>span{overflow:hidden;text-overflow:ellipsis}
.ds-note-properties{display:flex;flex-direction:column;gap:var(--sp-16)}
.ds-note-properties .ds-property-panel{position:static;width:100%;max-width:100%;max-height:none;margin-top:var(--sp-12);padding:var(--sp-16);border:var(--stroke-thin) solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);box-shadow:none}
.ds-note-properties .ds-property-editor{border:0;padding:var(--sp-16) 0;background:transparent}
.ds-conversation-titlebar{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--ui-row-height);padding-bottom:var(--sp-8);border-bottom:var(--stroke-thin) solid var(--border)}
.ds-conversation-title{display:flex;align-items:center;gap:var(--sp-8);flex:1;min-width:0;margin:0;font:700 var(--ui-panel-size)/var(--type-title-line) var(--font-body);}
.ds-conversation-title>.ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm));flex:none}
.ds-conversation-title>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-conversation-add{flex:none;width:var(--ui-row-height);min-width:var(--ui-row-height);padding:0;min-height:var(--ui-row-height);}
.ds-conversation-add .ico{width:var(--icon-box,var(--icon-chip));height:var(--icon-box,var(--icon-chip));}
.ds-sessions-section-header{display:flex;align-items:center;gap:var(--sp-12);margin:var(--sp-16) 0}
.ds-sessions-section-header>.ds-sessions-section-heading{flex:1;min-width:0;margin:0}
.ds-sessions-section-header>.btn{flex:none}
.ds-conversation-status{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;min-height:var(--touch-min)}
.ds-conversation-state{display:flex;align-items:center;gap:var(--sp-8);flex:1;min-width:0;flex-wrap:wrap;font-size:var(--type-body-sm-size)}
.ds-conversation-state>.ds-meta{white-space:nowrap}
.ds-conversation-dot{width:var(--badge-dot);height:var(--badge-dot);border-radius:var(--r-full);background:var(--text-muted);flex:none}
.ds-conversation-dot[data-state=working]{background:var(--primary-fg)}
.ds-conversation-dot[data-state=attention]{background:var(--warning-fg)}
.ds-conversation-dot[data-state=failed]{background:var(--error-fg)}
.ds-conversation-origin{display:flex;align-items:center;gap:var(--sp-8);min-width:0;color:var(--text-muted);font-size:var(--type-body-sm-size)}
.ds-conversation-origin>.ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm));flex:none}
.ds-conversation-origin>a{color:inherit;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-conversation-origin>a:hover{color:var(--on-surface)}
.ds-conversation-origin>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.ds-note-location{gap:var(--sp-4)}.ds-conversation-title{font-size:var(--type-body-size)}}

/* Shared center-pane account flows retain the workspace chrome. */
.ds-workspace-account{display:grid;gap:var(--sp-24);min-width:0}
.ds-workspace-account .ds-server-view > .card:first-child{border:0;border-radius:0;box-shadow:none;padding:0;background:transparent}
.ds-workspace-account .ds-form{min-width:0}
.ds-workspace-account :is(pre,code){overflow-wrap:anywhere;white-space:pre-wrap}
.ds-sessions-dialog-conversation > .ws-run-head{flex:none;padding:var(--sp-12) var(--sp-24);border-bottom:var(--stroke-thin) solid var(--border)}

/* Input focus changes the existing frame only, including composite controls. */
.ds-form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):is(:focus,:focus-visible),.ds-editor-text:is(:focus,:focus-visible){border-color:var(--input-focus);outline:none;box-shadow:none}
.ds-form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea)[aria-invalid=true]{border-color:var(--error-fg)}
.ds-form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):disabled{border-color:var(--control-border)}
.ds-groups-search{border:var(--stroke) solid var(--ink);border-radius:var(--r-sm);padding:var(--sp-8) var(--sp-12);background:var(--surface);color:var(--on-surface);font:400 var(--ui-body-size)/var(--type-body-line) var(--font-body)}
.ds-groups-search:focus{border-color:var(--input-focus);outline:none;box-shadow:none}
.ds-sessions-search input:focus,.ds-sessions-composer textarea:focus,.ws-compose-input:focus{outline:none;box-shadow:none}
.ws-dock.ds-toolbar{border-color:var(--ink)}
.ws-dock.ds-toolbar:focus-within,.ds-sessions-composer .ds-sessions-field-area:focus-within,.ds-sessions-dialog-conversation .ws-compose:focus-within{border-color:var(--input-focus);outline:none;box-shadow:none}
.ws-compose .ws-compose-input{font:400 var(--ui-body-size)/var(--type-body-line) var(--font-body)}


/* Web typography roles. Brand, sidebar headings, buttons and card faces retain their fonts. */
.ds-type-panel{font:700 var(--ui-panel-size)/var(--type-title-line) var(--font-body)}
.ds-type-list{font:600 var(--ui-list-size)/var(--type-body-line) var(--font-body)}
.ds-type-nav{font:600 var(--ui-nav-size)/var(--type-body-line) var(--font-body)}
.ds-type-body{font:400 var(--ui-body-size)/var(--type-body-line) var(--font-body)}
.ds-type-secondary{font:400 var(--ui-secondary-size)/var(--type-body-line) var(--font-body)}
.ds-type-meta{font:400 var(--ui-meta-size)/var(--type-label-line) var(--font-body)}
.ds-tree-row>.ds-quiet,.ds-workspace-section>.ds-quiet{min-width:var(--ui-row-height);min-height:var(--ui-row-height);padding:0 var(--sp-8)}
.ds-note-commands{gap:0}
.ds-workspace-chat .icon-btn{width:var(--ui-row-height);height:var(--ui-row-height)}
.ds-workspace-chat .icon-btn .ico,.ds-workspace-chat .ds-quiet .ico,.ds-sessions-search>.ico,.menu-pop .opt>.ico,.list-item>.ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm))}
.ds-sessions-filter-trigger .ico{width:var(--icon-box,var(--icon-sm));height:var(--icon-box,var(--icon-sm))}

/* Reading scope is explicit: the shared Markdown renderer also serves conversation messages. */
.ds-note-content,.ds-preview,.app-note .note-body,.ds-preview .note-body{font:400 var(--type-body-size)/var(--type-body-line) var(--font-note)}
:is(.ds-note-content,.app-note,.ds-preview) :is(.note-body,.note-list,.note-quote,.note-table){font-family:var(--font-note);font-size:var(--type-body-size);font-weight:400;line-height:var(--type-body-line)}
:is(.ds-note-content,.app-note,.ds-preview) .note-h1{font:600 var(--note-h1-size)/var(--note-h1-line) var(--font-note)}
:is(.ds-note-content,.app-note,.ds-preview) .note-h2{font:600 var(--note-h2-size)/var(--note-h2-line) var(--font-note)}
:is(.ds-note-content,.app-note,.ds-preview) .note-h3{font:600 var(--note-h2-size)/var(--note-h2-line) var(--font-note)}
:is(.ds-note-content,.app-note,.ds-preview) .note-h4{font:600 var(--type-body-size)/var(--note-h4-line) var(--font-note)}
:is(.ds-note-content,.app-note,.ds-preview) .note-h5{font:600 var(--type-body-sm-size)/var(--note-h5-line) var(--font-note)}
:is(.ds-note-content,.app-note,.ds-preview) .note-h6{font:600 var(--type-caption-size)/var(--note-h6-line) var(--font-note)}
:is(.ds-note-content,.app-note,.ds-preview) :is(.card,.note-callout){font-family:var(--font-body)}
:is(.ds-note-content,.app-note,.ds-preview) .note-callout p{font-family:var(--font-body);font-size:var(--type-body-sm-size)}
:is(.ds-note-content,.app-note,.ds-preview) .note-scroll .table{font-family:var(--font-note);font-size:var(--type-body-size);font-weight:400}

@media(pointer:coarse){
  :root{--ui-row-height:var(--touch-min);--label-inset:var(--sp-12);--label-remove-size:var(--touch-min)}
}

.field:has(.ctl [aria-invalid=true]) .ctl{border-color:var(--error-fg)}
.field:has(.ctl :disabled) .ctl{border-color:var(--control-border);background:var(--disabled-bg);color:var(--on-disabled)}
/* Plain conversation settings share the composer's focused frame. */
.ws-pick select:focus{outline:none;box-shadow:none}
.ds-workspace-chat .note-body,.ds-sessions-transcript .note-body{font-size:var(--ui-body-size)}

/* Revision 09 material composition. Values live only in the canonical scopes above. */
.ds-workspace,.ws.ds-workspace{background-color:var(--workspace-canvas);background-image:var(--canvas-atmosphere);background-attachment:fixed;isolation:isolate}
.ds-workspace .ds-workspace-header,.ds-workspace .ds-workspace-nav,.ds-workspace .ds-workspace-chat{background-color:var(--glass);backdrop-filter:blur(var(--glass-blur));border-color:var(--glass-border)}
.ds-workspace .ds-workspace-header,.ds-workspace .ds-workspace-nav{background-image:var(--film-tile);background-size:var(--film-size) var(--film-size)}
/* Backdrop filtering creates a stacking context: raise the whole header, not its menus. */
.ds-workspace .ds-workspace-header{position:relative;z-index:1;height:var(--appbar-height)}
.ds-workspace>:is(.ws-body,.ds-workspace-body){isolation:isolate}
.ds-workspace .ds-workspace-brand{color:var(--on-surface);font-size:var(--workspace-brand-size);letter-spacing:var(--type-display-tracking)}
.ds-workspace .ds-workspace-brand :is(img,.art){width:var(--workspace-brand-width);height:var(--workspace-brand-height)}
.ds-workspace .ds-workspace-divider{background:transparent;width:0;flex-basis:0;z-index:1}
.ds-workspace .ds-workspace-divider:before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--sp-4));width:var(--sp-8)}
.ds-workspace .ds-workspace-divider:is(:hover,:focus-visible):before{background:var(--control-hover)}
.ds-workspace .ds-workspace-divider:after{display:none}
.ds-workspace :is(.ws-main,.ds-note-paper){background:var(--surface)}
.ds-workspace-nav .ds-nav-shortcuts{gap:0;border-bottom:0}
.ds-workspace-nav .ds-workspace-section>a{font-size:var(--ui-nav-size)}
:is(.ds-workspace-nav.ds-nav,.ds-workspace-nav .ds-nav,.ds-public-mobile-nav .ds-nav) a{color:var(--text-muted);text-decoration:none;gap:var(--sp-12)}
:is(.ds-workspace-nav.ds-nav,.ds-workspace-nav .ds-nav,.ds-public-mobile-nav .ds-nav) a[aria-current=page]{color:var(--primary-fg);background:var(--primary-container);font-weight:800}
.ds-workspace .ds-note-paper>.ds-note-chrome{min-height:var(--appbar-height)}
.collection-heading>h1{font:var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-line) var(--font-display);letter-spacing:var(--type-h2-tracking);color:var(--type-h2-color)}
.ds-folder:hover{background:var(--surface-2);color:var(--on-surface);transform:translate(calc(-1 * var(--stroke)),calc(-1 * var(--shadow-sm-y)))}
.ds-folder:active{transform:translate(var(--shadow-sm-x),var(--shadow-sm-y))}
.ds-cast{position:relative;isolation:isolate}
.ds-folder.ds-cast-ready,.ds-sessions-session.ds-cast-ready,.card--pop.ds-cast-ready,.ws-dock.ds-cast-ready{box-shadow:none}
.ds-cast-texture{position:absolute;left:calc(-1 * var(--stroke));top:calc(-1 * var(--stroke));pointer-events:none;z-index:-1;max-width:none;filter:blur(var(--shadow-blur))}
.ds-mascot{display:inline-grid;place-items:center;position:relative;isolation:isolate;flex:none;line-height:0;width:var(--mascot-nav-width);height:var(--mascot-nav-height)}
.ds-mascot--hero{width:var(--mascot-hero-width);height:var(--mascot-hero-height)}
.ds-mascot--footer{width:var(--mascot-footer-width);height:var(--mascot-footer-height)}
.ds-mascot--brand{width:var(--workspace-brand-width);height:var(--workspace-brand-height)}
.ds-mascot-image{position:relative;z-index:1;width:100%;height:100%;background-image:var(--mascot-image);background-size:contain;background-position:center;background-repeat:no-repeat}
.ds-mascot-aura,.ds-mascot-frost{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--mascot-light-opacity)}
.ds-mascot-aura{transform:scale(var(--lamp-scale));filter:blur(var(--lamp-blur))}
.ds-mascot-aura:before{content:'';position:absolute;inset:0;mask:var(--mascot-image) center/contain no-repeat;background:linear-gradient(140deg,color-mix(in srgb,var(--lamp-warm) 75%,transparent),var(--lamp-warm) 48%,color-mix(in srgb,var(--lamp-warm) 55%,transparent))}
.ds-mascot-frost{transform:scale(var(--lamp-scale));mask:var(--mascot-image) center/contain no-repeat;background:var(--film-tile);opacity:calc(var(--mascot-light-opacity)*var(--lamp-frost-opacity));filter:blur(var(--lamp-frost-blur));mix-blend-mode:screen}
/* One shared renderer; automatic public hero, press-only conversation companion. */
.ds-mascot-motion-render{position:absolute;z-index:1;pointer-events:none}
.ds-mascot-motion-stage{position:absolute;inset:0 calc(-100% / 6);z-index:2;overflow:hidden;pointer-events:none}
.ds-mascot-motion-effects{width:100%;height:100%;pointer-events:none}
.ds-mascot-expression-source{display:none;background-image:var(--mascot-happy-image)}
.ds-mascot-image[hidden],.ds-mascot-motion-render[hidden]{display:none}
.ds-mascot--interactive{appearance:none;border:0;padding:0;background:transparent;color:inherit;border-radius:var(--r-lg);cursor:pointer}
.ds-mascot--interactive:focus-visible{outline:var(--stroke-focus) solid var(--focus);outline-offset:var(--focus-offset)}
.ds-mascot--brand :is(.ds-mascot-aura,.ds-mascot-frost){display:none}
@media(max-width:900px){
  :is(.ds-workspace-nav.ds-nav,.ds-workspace-nav .ds-nav,.ds-public-mobile-nav .ds-nav) a,.ds-workspace-nav .ds-tree-row>a,.ds-workspace-nav .ds-groups-trigger{min-height:var(--touch-min)}
  .ds-folder.foldercard{gap:var(--sp-12);padding:var(--folder-mobile-pad-y) var(--folder-mobile-pad-x)}
  .ds-folder.foldercard .folderface{width:var(--folder-mobile-slot);height:var(--folder-mobile-slot);border-radius:var(--folder-mobile-icon-radius)}
  .ds-folder.foldercard .t-title{font-size:var(--ui-body-size)}
  .ds-folder.foldercard :is(small,.ds-meta){font-size:var(--type-caption-size)}
  .display-filter>summary{font-size:var(--type-caption-size)}
  .ds-workspace .ds-workspace-header{height:var(--workspace-mobile-header)}
  .ds-workspace .ds-workspace-brand{font-size:var(--workspace-mobile-brand-size)}
  .ds-workspace .ds-workspace-brand :is(img,.art),.ds-mascot--brand{width:var(--workspace-mobile-brand-width);height:var(--workspace-mobile-brand-height)}
  .ds-workspace .ds-workspace-nav,.ds-workspace .ds-workspace-chat{background-color:color-mix(in srgb,var(--surface) 83%,transparent)}
}
@media(prefers-reduced-transparency:reduce){
  .ds-workspace,.ws.ds-workspace{background-image:none}
  .ds-workspace .ds-workspace-header,.ds-workspace .ds-workspace-nav,.ds-workspace .ds-workspace-chat{background-color:var(--surface-2);backdrop-filter:none}
  .ds-mascot-aura,.ds-mascot-frost{display:none}
}
@supports not(backdrop-filter:blur(1px)){
  .ds-workspace .ds-workspace-header,.ds-workspace .ds-workspace-nav,.ds-workspace .ds-workspace-chat{background-color:var(--surface-2)}
}

/* Canonical workspace specimen and reusable collection/empty-state composition. */

.ds-workspace-preview{margin:0;min-height:100vh;font:400 var(--ui-body-size)/var(--type-body-line) var(--font-body)}
.ds-workspace-preview>svg[aria-hidden="true"]{position:absolute}
.ds-workspace-body{display:grid;grid-template-columns:var(--drawer-width) minmax(0,1fr) var(--workspace-chat-width);min-height:calc(100vh - var(--appbar-height))}
.ds-workspace-body>.ds-workspace-nav{display:flex;flex-direction:column;align-items:stretch;gap:0}
.ds-workspace-body>.ds-workspace-nav .ds-nav{display:flex;flex-direction:column;align-items:stretch;gap:0}
.ds-workspace-main{min-width:0;min-height:inherit;background:var(--surface)}
.ds-workspace-collection{max-width:calc(var(--drawer-width)*4);margin:auto;padding:var(--sp-40) var(--sp-48)}
.ds-workspace-collection>.row{margin-top:var(--sp-24)}
.ds-workspace-collection>.ds-meta{margin-bottom:var(--sp-24)}
.ds-workspace-collection .collection-heading{margin-bottom:var(--sp-24)}
.ds-workspace-body>.ds-workspace-chat{display:flex;flex-direction:column;padding:var(--sp-20)}
.ds-workspace-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:var(--sp-40) var(--sp-24)}
.ds-workspace-empty>h2{font:600 var(--type-h2-size)/var(--type-title-line) var(--font-display);margin:var(--sp-20) 0 var(--sp-8)}
.ds-workspace-empty>p{font-size:var(--folder-meta-size);color:var(--text-muted)}
.ds-workspace-preview .ds-toolbar{margin-top:var(--sp-24)}
.ds-workspace-preview .ds-toolbar>textarea{width:100%;resize:none;background:transparent;border:0;color:var(--on-surface);font:400 var(--composer-font-size)/var(--type-body-line) var(--font-body)}
@media(max-width:900px){
 .ds-workspace-body{display:block;min-height:calc(100vh - var(--workspace-mobile-header))}
 .ds-workspace-body>.ds-workspace-nav,.ds-workspace-body>.ds-workspace-chat{display:none}
 .ds-workspace-collection{padding:var(--sp-24) var(--sp-20)}
 .ds-workspace-preview .ds-workspace-header{padding-inline:var(--sp-12)}
 .ds-workspace-preview .ds-workspace-header .btn{padding-inline:var(--sp-12)}
}

/* Outer integration planes remain transparent behind canonical glass. */
.ws.ds-workspace .ws-nav,.ws.ds-workspace .ws-chat{background:transparent}
.ws.ds-workspace .ws-center{background:var(--surface)}

.ds-form :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea)[aria-invalid=true]:focus-visible{border-color:var(--input-focus)}

/* Reader typography and quiet callouts from the approved note specimen. */
:is(.ds-note-content,.app-note,.ds-preview) :is(.note-h1,.note-h2){letter-spacing:var(--note-reading-tracking)}
:is(.ds-note-content,.app-note,.ds-preview) .note-body{line-height:var(--note-reading-line)}
:is(.ds-note-content,.app-note,.ds-preview) .note-callout{background:transparent;border:0;border-left:var(--stroke-focus) solid var(--callout-color,var(--callout-note));border-radius:0;box-shadow:none;padding:0 0 0 var(--callout-reading-inset);margin:var(--callout-reading-margin) 0}
@media(max-width:900px){
 :is(.ds-note-content,.app-note,.ds-preview) .note-h1{font-size:var(--note-mobile-h1-size)}
 :is(.ds-note-content,.app-note,.ds-preview) .note-h2{font-size:var(--note-mobile-h2-size)}
 :is(.ds-note-content,.app-note,.ds-preview) .note-body{font-size:var(--type-body-sm-size)}
 :is(.ds-note-content,.app-note,.ds-preview) .note-callout{padding-left:var(--callout-reading-mobile-inset);margin:var(--sp-24) 0}
}

/* Detail refinement: ambient seams, compact actions and a conversation companion. */
.ds-workspace .ds-workspace-header{border-bottom:var(--sp-2) solid var(--workspace-seam);background-clip:padding-box}
.ds-workspace .ds-note-paper>.ds-note-chrome,.ds-workspace-chat>.ws-chat-head,.ds-workspace-chat .ds-conversation-titlebar{border-bottom:0;position:relative}
.ds-workspace .ds-note-paper>.ds-note-chrome:after,.ds-workspace-chat>.ws-chat-head:after,.ds-workspace-chat .ds-conversation-titlebar:not(:only-child):after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sp-2);background:var(--workspace-seam)}
.ds-workspace-chat>.ws-chat-head:after{left:calc(-1 * var(--sp-12));right:calc(-1 * var(--sp-12))}
.ds-workspace-nav .ds-workspace-section>a{color:var(--on-surface)}
.ds-workspace-nav .ds-nav-shortcuts .ico{stroke-width:var(--icon-stroke)}
.ds-workspace-chat .ws-chat-body>.ds-stack:has(.ds-workspace-empty){flex:1}
.ds-workspace-empty>.app-empty{max-width:var(--drawer-width);margin:var(--sp-20) 0 0;color:var(--text-muted)}
.ds-mascot--responsive{--gaze-x:0deg;--gaze-y:0deg}
.ds-mascot--responsive .ds-mascot-image{background:none}
.ds-mascot--responsive .ds-mascot-image:before,.ds-mascot-crown{content:"";position:absolute;inset:0;background:var(--mascot-image) center/contain no-repeat}
.ds-mascot--responsive .ds-mascot-image:before{clip-path:inset(60% 0 0)}
.ds-mascot-crown{clip-path:inset(0 0 39%);transform-origin:50% 60%;transform:perspective(var(--mascot-hero-height)) rotateY(var(--gaze-x,0deg)) rotateX(var(--gaze-y,0deg));transition:transform var(--dur-base) var(--ease)}
@media(prefers-reduced-motion:reduce){.ds-mascot-crown{transform:none;transition:none}}
@media(pointer:coarse){.btn,.btn--sm,.btn-group .btn{min-height:var(--touch-min)}}


/* Spacing hierarchy: page sections, related groups, controls, then labels. */
.ds-server-view{display:flex;flex-direction:column;gap:var(--layout-section-gap);min-width:0}
.ds-server-view:empty{display:none}
.ds-server-view>.card{margin:0}
.ds-form{gap:var(--layout-control-gap)}
.ds-note-awareness .sync-write{padding:var(--layout-inset);border:0}
.ds-note-awareness .sync-meta{margin-bottom:var(--layout-control-gap)}
.ds-note-awareness .sync-ack{padding-block:var(--layout-control-gap)}
.ds-note-awareness .sync-write+.sync-write{margin-top:var(--layout-group-gap)}
@media(max-width:900px){.ds-server-view{gap:var(--layout-section-gap-narrow)}}

/* Approved public-site composition (2026-10-27). Shared control identities remain unchanged. */
.ds-public-public-page{margin:0;background-color:var(--surface);color:var(--on-surface);font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-body)}

.ds-public-ambient{position:fixed;inset:0;z-index:-2;background-color:var(--workspace-canvas);background-image:var(--canvas-atmosphere);pointer-events:none}
.ds-public-paper-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--film-tile),var(--film-tile);background-size:calc(var(--film-size)*.75),var(--film-size);background-position:0 0,var(--sp-64) var(--sp-48);filter:grayscale(var(--opacity-solid)) contrast(2);mix-blend-mode:screen;mask-image:radial-gradient(ellipse 80% 72% at 0% 82%,var(--on-surface) 8%,transparent 80%),radial-gradient(ellipse 74% 80% at 103% 26%,var(--on-surface) 6%,transparent 80%);mask-mode:alpha}
.ds-public-floating-nav{max-width:calc(100% - var(--sp-24));flex-wrap:wrap;position:fixed;top:var(--sp-16);right:var(--sp-32);z-index:100;display:flex;align-items:center;gap:var(--sp-8)}
.ds-public-page > .ds-public-floating-nav{position:absolute}
.ds-public-floating-nav a,.ds-public-floating-nav button{flex:none}.ds-public-floating-nav .icon-btn{color:var(--on-surface)}
.ds-public-landing{isolation:isolate;overflow:hidden}.ds-public-landing-pager{height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:contain;scrollbar-width:none}.ds-public-landing-pager::-webkit-scrollbar{display:none}
.ds-public-page{position:relative;min-height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;padding:calc(var(--sp-64) + var(--sp-32)) var(--sp-64) var(--sp-64)}
.ds-public-page-inner{width:100%;max-width:1200px;margin-inline:auto}.ds-public-hero-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--sp-64);align-items:center}
.ds-public-hero-copy{display:flex;flex-direction:column;align-items:start;gap:var(--sp-24);max-width:660px}.ds-public-hero-wordmark{font:var(--brand-weight) var(--workspace-brand-size)/var(--type-display-line) var(--font-brand);color:var(--on-surface);text-decoration:none}
.ds-public-hero-title{font:var(--type-display-weight) clamp(var(--sp-48),6.5vw,calc(var(--sp-64) + var(--sp-16)))/var(--type-display-line) var(--font-display);letter-spacing:var(--type-display-tracking);white-space:nowrap;color:var(--on-surface)}
.ds-public-hero-subtitle{font:var(--type-body-weight) clamp(var(--sp-20),1.6vw,var(--type-h2-size))/var(--type-body-line) var(--font-body);max-width:550px;color:var(--text-muted)}
.ds-public-hero-actions{width:100%;margin-top:var(--sp-8);flex-wrap:wrap}.ds-public-hero-art{display:grid;place-items:center;min-width:0}
.ds-public-hero-mascot{width:min(38vw,calc(var(--mascot-hero-width)*3));height:auto;aspect-ratio:8/9}.ds-public-hero-mascot .ds-mascot-image{height:100%;width:100%}
.ds-public-page-controls{position:fixed;left:50%;bottom:var(--sp-12);transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:0}.ds-public-pager-dot{width:var(--sp-8);height:var(--sp-8);border-radius:var(--r-full);background:var(--text-muted)}.ds-public-page-controls [aria-current=page] .ds-public-pager-dot{background:var(--primary-fg);opacity:1;width:var(--sp-24)}
.ds-public-page-two-layout{display:flex;flex-direction:column;gap:var(--layout-group-gap)}.ds-public-overview-heading{display:flex;flex-direction:column;align-items:start;gap:var(--sp-12)}.ds-public-overview-heading h2{font-size:var(--sp-40)}.ds-public-overview-heading p{max-width:960px;font-size:var(--type-title-size);color:var(--text-muted)}
.ds-public-feature-section{display:flex;flex-direction:column;gap:var(--sp-8)}
.ds-public-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-16)}.ds-public-feature-card{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-24)}.ds-public-feature-card>.ico{color:var(--primary-fg)}.ds-public-feature-card>p{color:var(--text-muted)}
.ds-public-overview-bottom{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--layout-section-gap);align-items:start;border-top:var(--stroke-thin) solid var(--hairline);padding-top:var(--layout-group-gap)}.ds-public-overview-group{display:flex;flex-direction:column;gap:var(--sp-16)}.ds-public-overview-header{min-height:var(--touch-min)}.ds-public-mini-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-12)}.ds-public-shelf-item{display:flex;align-items:center;gap:var(--sp-8);text-decoration:none;color:var(--on-surface)}.ds-public-shelf-item>.ico{color:var(--primary-fg)}.ds-public-other-folders{display:flex;gap:var(--sp-16);flex-wrap:wrap;color:var(--text-muted)}.ds-public-other-folders span{display:flex;align-items:center;gap:var(--sp-8)}
.ds-public-life-map{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-8);padding:0;margin:0;list-style:none}.ds-public-life-map li{display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);font-size:var(--type-caption-size)}.ds-public-life-map .ico{color:var(--primary-fg)}
.ds-public-journal-preview{display:flex;align-items:center;gap:var(--layout-inset);padding:var(--layout-inset);color:var(--on-surface);text-decoration:none}.ds-public-journal-preview>.folderface{flex:none}.ds-public-journal-preview>.ico{flex:none;margin-left:auto;color:var(--text-muted)}.ds-public-journal-preview:focus-visible{outline:var(--stroke-focus) solid var(--focus);outline-offset:var(--sp-4)}.ds-public-journal-summary{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}.ds-public-journal-summary h4{color:var(--on-surface)}
.ds-public-overview-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--layout-control-gap);padding-top:var(--layout-group-gap);border-top:var(--stroke-thin) solid var(--hairline)}.ds-public-overview-footer>.t-caption{margin-left:auto;text-align:right}

/* Selected landing typography and paper. Only the public pager opts in. */
.ds-public-landing--paper{
  --landing-heading-family:system-ui,-apple-system,"PingFang SC",sans-serif; /* Stable no-JS/error fallback. */
  --landing-body-family:system-ui,-apple-system,"PingFang SC",sans-serif; /* Landing body fallback; note roles stay unchanged. */
  background:var(--surface);
  font-family:var(--landing-body-family);
}
[data-landing-fonts=ready] .ds-public-landing--paper{
  --landing-heading-family:"Newsreader","Noto Serif SC",serif;
  --landing-body-family:"Manrope","Noto Sans SC",sans-serif;
}
.ds-public-landing--paper :is(.ds-public-hero-title,.ds-public-hero-wordmark,.t-h1,.t-h2){font-family:var(--landing-heading-family);font-weight:600}
[data-landing-fonts=ready] .ds-public-landing--paper :is(.ds-public-hero-title,.ds-public-hero-wordmark,.t-h1,.t-h2){font-weight:500}
.ds-public-landing--paper :is(.ds-public-hero-subtitle,.t-title,.t-body,.t-body-sm,.t-caption,.ds-bar-link,.ds-quiet,.btn){font-family:var(--landing-body-family)}
[data-landing-fonts=ready][data-landing-type=editorial] .ds-public-landing--paper :is(h1,h2,h3,h4,h5,h6){font-family:var(--landing-heading-family)}
[data-landing-fonts=ready][data-landing-type=editorial] .ds-public-landing--paper :is(.ds-public-feature-card,.ds-public-journal-preview) .t-title{font-family:var(--landing-body-family)}
.ds-public-landing--paper .btn{font-weight:600}
[data-landing-fonts=loading] .ds-public-landing--paper :is(.ds-public-page-inner,.ds-public-floating-nav,.ds-public-page-controls){visibility:hidden}
.ds-public-landing--paper .ds-public-ambient{display:none}
.ds-public-landing--paper .ds-public-paper-grain{
  background-size:calc(var(--film-size)*.5);
  background-image:var(--film-tile);
  mask-image:none;
  opacity:var(--lamp-frost-opacity);
}
.ds-public-landing--paper .ds-public-page-inner{position:relative;z-index:1}
.ds-public-wash{position:absolute;pointer-events:none;isolation:isolate}
.ds-public-wash::after{
  content:"";position:absolute;inset:0;
  background-image:var(--film-tile),var(--film-tile);
  background-size:calc(var(--film-size)*.5),calc(var(--film-size)*.75);
  background-position:0 0,var(--sp-48) var(--sp-32);
  filter:grayscale(var(--opacity-solid)) contrast(2);
  mix-blend-mode:screen;
  mask-image:var(--wash-mask);
}
.ds-public-wash--crown{
  top:0;right:0;width:65%;height:72dvh;
  background:
    radial-gradient(ellipse 49% 43% at 94% 31%,var(--canvas-glow-b) 14%,transparent 94%),
    radial-gradient(ellipse 48% 35% at 53% 0%,var(--canvas-glow-b) 12%,transparent 91%),
    radial-gradient(ellipse 24% 39% at 103% 60%,var(--canvas-glow-c) 10%,transparent 90%);
  --wash-mask:radial-gradient(ellipse 52% 50% at 92% 26%,var(--on-surface) 18%,transparent 91%),radial-gradient(ellipse 45% 35% at 52% 0%,var(--on-surface) 5%,transparent 90%);
}
.ds-public-wash--bridge{
  bottom:-38dvh;left:0;width:100%;height:80dvh;
  mask-image:linear-gradient(transparent,var(--on-surface) 18% 80%,transparent);
  background:
    radial-gradient(ellipse 26% 54% at -4% 44%,var(--canvas-glow-a) 28%,transparent 93%),
    radial-gradient(ellipse 38% 38% at 24% 56%,var(--canvas-glow-a) 16%,transparent 94%),
    radial-gradient(ellipse 46% 42% at 64% 69%,var(--canvas-glow-c) 12%,transparent 95%);
  --wash-mask:radial-gradient(ellipse 31% 59% at 0% 44%,var(--on-surface) 18%,transparent 90%),radial-gradient(ellipse 55% 43% at 35% 61%,var(--on-surface) 12%,transparent 92%);
}
.ds-public-wash--garden{
  inset:0;
  mask-image:linear-gradient(transparent,var(--on-surface) 18%);
  background:
    radial-gradient(ellipse 35% 54% at 104% 57%,var(--canvas-glow-b) 18%,transparent 91%),
    radial-gradient(ellipse 47% 35% at 68% 108%,var(--canvas-glow-c) 18%,transparent 94%),
    radial-gradient(ellipse 44% 48% at -9% 89%,var(--canvas-glow-a) 10%,transparent 95%);
  --wash-mask:radial-gradient(ellipse 39% 60% at 102% 56%,var(--on-surface) 14%,transparent 89%),radial-gradient(ellipse 62% 42% at 52% 106%,var(--on-surface) 15%,transparent 92%),radial-gradient(ellipse 42% 43% at 0% 86%,var(--on-surface) 8%,transparent 95%);
}
/* Shared paper and proportional watercolor placement in both themes. */
.ds-public-hero-paint{display:none}
.ds-public-landing--paper .ds-public-page{
  background-color:var(--surface);
  background-image:url("brands/landing-paper-day.png");
  background-size:auto;
  background-position:right top;
  background-repeat:repeat;
  background-blend-mode:darken;
  isolation:isolate;
}
.ds-public-landing--paper .ds-public-page--painted{
  --landing-paint-width:min(calc(100vw + var(--sp-64) * 4),calc(var(--sp-64) * 20));
  --landing-paint-nav-lift:clamp(0px,calc((var(--sp-64) * 20 - 100vw) * .18),calc(var(--sp-64) + var(--sp-48)));
  --landing-paint-top:calc(var(--landing-paint-width) * -.225 - var(--landing-paint-nav-lift));
  isolation:isolate;overflow:hidden;
}
.ds-public-landing--paper .ds-public-hero-paint{
  display:block;position:absolute;top:var(--landing-paint-top);right:calc(-1 * var(--sp-32));z-index:0;
  width:var(--landing-paint-width);height:auto;max-width:none;pointer-events:none;mix-blend-mode:darken;
}
.ds-public-landing--paper .ds-public-page--paint-left .ds-public-hero-paint{
  left:calc(-1 * var(--sp-32));right:auto;transform:scaleX(-1);
}
.ds-public-landing--paper .ds-public-page > .ds-public-wash{display:none}
/* Reuse the paper fibers as neutral luminance over the Night note surface. */
[data-theme=matcha-dark] .ds-public-landing--paper .ds-public-page{background-image:none}
[data-theme=matcha-dark] .ds-public-landing--paper .ds-public-page::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("brands/landing-paper-day.png") right top/auto repeat;
  filter:grayscale(1) brightness(.52) contrast(6);mix-blend-mode:soft-light;opacity:var(--lamp-frost-opacity);
}
:root:not([data-theme=matcha-dark]) .ds-public-landing--paper .ds-public-hero-paint--night,
[data-theme=matcha-dark] .ds-public-landing--paper .ds-public-hero-paint--day{display:none}
/* Keep the Night wave at one scale and angle; cap the left crop before it disappears. */
[data-theme=matcha-dark] .ds-public-landing--paper .ds-public-hero-paint--night{
  mix-blend-mode:normal;width:calc(var(--sp-64) * 17);max-width:none;margin-top:0;
  top:calc(-1 * (var(--sp-64) * 5 + var(--sp-32)));
}
[data-theme=matcha-dark] .ds-public-landing--paper .ds-public-page--paint-left .ds-public-hero-paint--night{
  transform:rotate(-20deg) scaleX(-1);
  left:calc(-1 * clamp(0px,calc((var(--sp-64) * 20 - 100vw) * .75),calc(var(--sp-64) * 5)));
}
@media(min-width:701px) and (max-height:800px){
  [data-theme=matcha-dark] .ds-public-landing--paper .ds-public-hero-paint--night{top:calc(-1 * (var(--sp-64) * 6 + var(--sp-32)))}
  .ds-public-landing--paper .ds-public-page--painted{
    --landing-paint-width:min(calc(100vw + var(--sp-64) * 4),calc(var(--sp-64) * 16));
    --landing-paint-top:calc(var(--landing-paint-width) * -.27 - var(--landing-paint-nav-lift));
  }
}
@media(min-width:701px) and (max-height:700px){
  [data-theme=matcha-dark] .ds-public-landing--paper .ds-public-hero-paint--night{top:calc(-1 * (var(--sp-64) * 7 + var(--sp-32)))}
  .ds-public-landing--paper .ds-public-page--painted{
    --landing-paint-width:min(calc(100vw + var(--sp-64) * 4),calc(var(--sp-64) * 14));
    --landing-paint-top:calc(var(--landing-paint-width) * -.3 - var(--landing-paint-nav-lift));
  }
}
@media(max-width:700px){
  .ds-public-landing--paper .ds-public-page--painted{
    /* The reserved paper band already clears the title; release the menu lift on phones. */
    --landing-paint-nav-lift:clamp(0px,calc((100vw - var(--sp-64) * 7) * .4),calc(var(--sp-64) + var(--sp-48)));
    padding-top:calc(var(--landing-paint-width) * .2 + var(--sp-32));
  }
  .ds-public-landing--paper .ds-public-hero-paint{right:calc(-1 * var(--sp-24))}
  .ds-public-landing--paper .ds-public-page--paint-left .ds-public-hero-paint{left:calc(-1 * var(--sp-24));right:auto}
  .ds-public-landing--paper .ds-public-floating-nav a{
    text-shadow:0 0 var(--sp-4) var(--surface),0 var(--stroke) var(--sp-2) var(--surface);
  }
}
@media(min-width:701px) and (max-width:1280px){
  .ds-public-landing--paper .ds-public-hero-title{font-size:clamp(var(--sp-40),5.8vw,calc(var(--sp-64) + var(--sp-16)))}
}
@media(max-width:700px){
  .ds-public-wash--crown{width:80%;height:48dvh}
  .ds-public-wash--bridge{height:56dvh;bottom:-28dvh}
}

/* Documentation and journal reuse the approved workspace shell. */
.ds-public-content-page{isolation:isolate;background:var(--workspace-canvas);min-height:100dvh}.ds-public-content-page .ds-public-floating-nav{top:var(--sp-8)}
.ds-workspace .ds-public-document-header{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;padding-inline:var(--sp-24);height:var(--appbar-height)}.ds-public-document-brand{display:flex;align-items:center;gap:var(--sp-8);font:var(--brand-weight) var(--workspace-brand-size)/var(--type-display-line) var(--font-brand);color:var(--on-surface);text-decoration:none}
/* Align Newsreader ink optically with the mascot, not its ascender box. */
.ds-public-document-brand .ds-public-brand-name{transform:translateY(var(--sp-4))}
.ds-public-document-shell{display:grid;grid-template-columns:248px minmax(0,1fr);padding-top:var(--appbar-height);min-height:100dvh;gap:0}
.ds-public-document-sidebar{position:fixed;top:var(--appbar-height);bottom:0;left:0;width:248px;padding:var(--sp-32) var(--sp-16);overflow-y:auto;border:0;background-color:var(--glass);background-image:var(--film-tile);background-size:var(--film-size);backdrop-filter:blur(var(--glass-blur))}
.ds-public-sidebar-title{padding:0 var(--sp-12);margin-bottom:var(--sp-16);font:var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-body)}.ds-public-document-sidebar .ds-nav{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-4)}.ds-public-document-sidebar .ds-public-sidebar-foot{margin-top:var(--sp-32)}
/* Documentation sidebar section: a native disclosure whose muted label summary folds the pages inside it (e.g. Concepts). */
.ds-public-sidebar-group{margin:var(--sp-24) 0 0}details.ds-public-sidebar-group>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);min-height:var(--ui-row-height);padding:0 var(--sp-12);font:var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-ui);letter-spacing:var(--type-label-tracking);color:var(--type-label-color);cursor:pointer;list-style:none}.ds-public-sidebar-group>summary::-webkit-details-marker{display:none}.ds-public-sidebar-group>summary .ico{flex:none;transition:transform var(--dur-base) var(--ease)}.ds-public-sidebar-group[open]>summary .ico{transform:rotate(180deg)}.ds-public-sidebar-group>.ds-nav{margin-top:var(--sp-4)}
.ds-public-document-main{grid-column:2;min-width:0;min-height:calc(100dvh - var(--appbar-height));background:var(--surface);border-top:0}
.ds-public-reading-wrap{max-width:920px;margin-inline:auto;padding:var(--sp-48) var(--sp-64) var(--sp-64)}.ds-public-reading-kicker{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-32);color:var(--text-muted)}
.ds-public-reading-body{min-width:0}.ds-public-reading-body .note-h1{margin-bottom:var(--sp-32)}.ds-public-reading-body p{max-width:78ch}.ds-public-reading-body .note-h2{margin-top:var(--sp-32);margin-bottom:var(--sp-16)}
.ds-public-reading-body .note-code,.ds-public-reading-body .note-scroll{margin-block:var(--sp-24)}.ds-public-reading-body ul{margin-block:var(--sp-16)}.ds-public-reading-body a{overflow-wrap:anywhere}
.ds-public-reading-footer{margin-top:var(--sp-48);padding-top:var(--sp-24);border-top:var(--stroke) solid var(--border-faint);display:flex;justify-content:space-between;gap:var(--sp-16);align-items:center}
.ds-public-doc-description{margin-bottom:var(--sp-32)}.ds-public-journal-list{display:flex;flex-direction:column;gap:var(--sp-24);margin-top:var(--sp-40)}.ds-public-journal-card{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-32)}
.ds-public-mobile-nav{display:none}.ds-public-missing-page{min-height:100dvh;display:grid;place-items:center;padding:var(--sp-64) var(--sp-24)}.ds-public-missing-inner{display:flex;flex-direction:column;gap:var(--sp-24);max-width:600px;text-align:center}.ds-public-missing-inner .row{justify-content:center}
@media(min-width:1700px){.ds-public-page-inner{max-width:1400px}}
@media(max-width:1100px){.ds-public-page{padding-inline:var(--sp-32)}.ds-public-hero-layout{gap:var(--sp-32)}.ds-public-feature-card{padding:var(--sp-16)}.ds-public-overview-heading{align-items:start}.ds-public-mini-shelf{grid-template-columns:1fr}.ds-public-document-shell{grid-template-columns:216px minmax(0,1fr)}.ds-public-document-sidebar{width:216px}.ds-public-reading-wrap{padding:var(--sp-40) var(--sp-32)}.ds-public-overview-bottom{gap:var(--sp-24)}}
@media(max-width:700px){
.ds-public-floating-nav{right:var(--sp-12);top:var(--sp-8);gap:0}.ds-public-floating-nav .ds-bar-link{padding-inline:var(--sp-8);font-size:var(--ui-body-size)}
.ds-public-landing-pager{scroll-snap-type:y proximity}.ds-public-page{padding:calc(var(--sp-64) + var(--sp-16)) var(--sp-24) var(--sp-64)}.ds-public-hero-layout{grid-template-columns:1fr;gap:var(--sp-8)}.ds-public-hero-copy{gap:var(--sp-16)}.ds-public-hero-title{font-size:clamp(var(--sp-32),10vw,var(--sp-48));max-width:520px}.ds-public-hero-wordmark{font-size:var(--type-h2-size)}.ds-public-hero-subtitle{font-size:var(--sp-20)}.ds-public-hero-actions{margin-top:0}.ds-public-hero-mascot{width:min(55vw,calc(var(--mascot-hero-width)*1.5))}.ds-public-hero-art{justify-self:center}
.ds-public-page-controls{bottom:var(--sp-4)}.ds-public-overview-heading{flex-direction:column;gap:var(--sp-12)}.ds-public-overview-heading h2{font-size:var(--sp-32)}.ds-public-feature-grid{grid-template-columns:1fr 1fr}.ds-public-feature-card{gap:var(--sp-8)}.ds-public-overview-bottom{grid-template-columns:1fr;gap:var(--sp-24)}.ds-public-mini-shelf{grid-template-columns:1fr 1fr 1fr}.ds-public-overview-footer{flex-wrap:wrap}.ds-public-life-map{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--layout-control-gap)}.ds-public-other-folders{gap:var(--sp-12)}
.ds-workspace .ds-public-document-header{padding-inline:var(--sp-12);height:var(--workspace-mobile-header)}.ds-public-document-brand .ds-public-brand-name{display:none}.ds-public-document-shell{display:block}.ds-public-document-sidebar{display:none}.ds-public-document-main{min-height:calc(100dvh - var(--appbar-height))}.ds-public-reading-wrap{padding:var(--sp-24)}.ds-public-reading-kicker{margin-bottom:var(--sp-24)}.ds-public-reading-body .note-h1{font-size:var(--note-mobile-h1-size);margin-bottom:var(--sp-24)}
.ds-public-mobile-nav{display:block;padding:var(--sp-12) var(--sp-24);background:var(--glass);border-bottom:var(--sp-2) solid var(--workspace-seam)}.ds-public-mobile-nav summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);font:var(--type-title-weight) var(--type-body-size)/var(--type-body-line) var(--font-body);min-height:var(--sp-32);cursor:pointer;list-style:none}.ds-public-mobile-nav summary::-webkit-details-marker{display:none}.ds-public-mobile-nav .ds-nav{display:flex;align-items:stretch;flex-direction:column;padding-top:var(--sp-12)}
.ds-public-journal-card{padding:var(--sp-24)}.ds-public-reading-footer{flex-wrap:wrap}.ds-public-reading-footer .row{margin-left:auto}
}
@media(max-width:360px){.ds-public-page{padding-inline:var(--sp-20)}.ds-public-feature-grid{grid-template-columns:1fr}.ds-public-mini-shelf{grid-template-columns:1fr}.ds-public-hero-mascot{width:160px}}
@media(max-height:700px) and (min-width:701px){.ds-public-hero-mascot{width:320px}.ds-public-page{padding-top:var(--sp-64)}.ds-public-hero-copy{gap:var(--sp-16)}}
@media(prefers-reduced-motion:reduce){.ds-public-landing-pager{scroll-behavior:auto}.ds-public-pager-dot{transition:none}}

@media(max-width:700px){.ds-public-document-shell{padding-top:var(--workspace-mobile-header)}.ds-public-document-main{min-height:calc(100dvh - var(--workspace-mobile-header))}}
@media(max-width:360px){.ds-public-floating-nav .ds-bar-link{font-size:var(--type-caption-size);padding-inline:var(--sp-4)}}


/* Active mascot sheet shares the approved surfaces and image component. */
.ds-mascot-sheet{margin:0;color:var(--on-surface);font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-body);background-color:var(--workspace-canvas);background-image:var(--canvas-atmosphere);background-attachment:fixed}
.ds-mascot-sheet-heading{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-8);padding:var(--sp-16) var(--sp-24);background-color:var(--glass);background-image:var(--film-tile);background-size:var(--film-size);border-bottom:var(--sp-2) solid var(--workspace-seam)}
.ds-mascot-sheet-main{max-width:1000px;margin:auto;padding:var(--sp-48) var(--sp-24);display:flex;flex-direction:column;gap:var(--sp-24)}
.ds-mascot-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-24)}
.ds-mascot-sheet-card{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-24)}
.ds-mascot-sheet-scene{display:grid;place-items:center;min-height:calc(var(--mascot-hero-height)*1.5);background-color:var(--workspace-canvas);background-image:var(--canvas-atmosphere);border-radius:var(--r-md)}
.ds-mascot-sheet-scene>.ds-mascot{width:calc(var(--mascot-hero-width)*1.5);height:calc(var(--mascot-hero-height)*1.5)}
.ds-mascot-sheet-sizes{display:flex;align-items:center;justify-content:center;gap:var(--sp-32);min-height:calc(var(--mascot-hero-height)*1.5)}
.ds-mascot-sheet-contract{display:flex;flex-direction:column;gap:var(--sp-16)}
.ds-public-feature-card,.ds-public-shelf-item{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){.ds-mascot-sheet-grid{grid-template-columns:1fr}.ds-mascot-sheet-main{padding-top:var(--sp-32)}}

/* AI-to-human Inbox. Approved composition: raised queue, calm reading detail. */
.ds-inbox{--ds-inbox-queue-width:38%;height:100%;min-height:0;display:flex;flex-direction:column;color:var(--on-surface);container-type:inline-size}
.ds-inbox-queue-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-20) 0 var(--sp-12)}
.ds-inbox-queue-head h1{margin:0}
.ds-inbox-preview{font-size:var(--type-caption-size);color:var(--text-muted);white-space:nowrap}
.ds-inbox-panes{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,min(var(--ds-inbox-queue-width),60cqi)) auto minmax(0,1fr)}
.ds-inbox-queue{overflow:auto;padding:0 var(--sp-24) var(--sp-24) var(--sp-32);scrollbar-gutter:stable}
.ds-inbox-group{margin-bottom:var(--sp-20)}
.ds-inbox-section{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--sp-32)}
.ds-inbox-section-toggle{appearance:none;display:flex;align-items:center;gap:var(--sp-8);background:transparent;border:0;color:var(--on-surface);font:inherit;font-size:var(--type-body-sm-size);padding:var(--sp-8) 0;flex:1;min-width:0;min-height:var(--sp-32);text-align:left;cursor:pointer}
.ds-inbox-section-toggle .ico{width:var(--icon-sm);height:var(--icon-sm)}
.ds-inbox-section-toggle>span:last-child{color:var(--text-muted);margin-left:auto;font-size:var(--type-caption-size)}
.ds-inbox-section-all{flex:none}
.ds-inbox-items{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-4) var(--sp-4) var(--sp-4) 0}
.ds-inbox-items[hidden]{display:none}
.ds-inbox-item{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-8);width:100%;padding:var(--sp-16);font:inherit;color:var(--on-surface);text-align:left;cursor:pointer;min-width:0;overflow:visible}
.ds-inbox-item:hover{background:var(--surface)}
.ds-inbox-item[aria-current=true]{background:var(--primary-container);border-color:var(--primary)}
.ds-inbox-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap}
.ds-inbox-item-top>small{color:var(--text-muted);font-size:var(--type-caption-size);line-height:var(--type-body-line)}
.ds-inbox-item>strong{font-size:var(--type-body-size);font-weight:var(--type-title-weight);line-height:var(--type-title-line)}
.ds-inbox-item-summary{font-size:var(--type-body-sm-size);line-height:var(--type-body-line);color:var(--text-muted)}
.ds-inbox-signal{display:inline-flex;align-items:center;gap:var(--sp-4);align-self:flex-start;border-radius:var(--r-full);padding:var(--sp-2) var(--sp-8);font-size:var(--type-caption-size);font-weight:var(--type-title-weight);line-height:var(--type-body-line);background:var(--surface);color:var(--text-muted);flex:none}
.ds-inbox-signal .ico{width:var(--icon-sm);height:var(--icon-sm)}
.ds-inbox-signal[data-tone=warning]{background:var(--warning-container);color:var(--on-warning-container)}
.ds-inbox-signal[data-tone=error]{background:var(--error-container);color:var(--on-error-container)}
.ds-inbox-signal[data-tone=info]{background:var(--info-container);color:var(--on-info-container)}
.ds-inbox-detail{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border-left:var(--stroke) solid var(--workspace-seam);background:var(--surface-2);overflow:auto;scrollbar-gutter:stable}
.ds-inbox-detail-toolbar{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-20) var(--sp-32) var(--sp-12)}
.ds-inbox-provenance{min-width:0;flex:1;font-size:var(--type-caption-size);color:var(--text-muted);overflow-wrap:anywhere}
.ds-inbox-provenance a{color:inherit;text-underline-offset:var(--sp-4)}
.ds-inbox-back{display:none}
.ds-inbox-detail-content{padding:0 var(--sp-32) var(--sp-24);flex:1;overflow-wrap:anywhere}
.ds-inbox-detail-heading h2{font-size:var(--type-h2-size);line-height:var(--type-h2-line);font-weight:var(--type-h2-weight);margin:var(--sp-16) 0 var(--sp-12);text-wrap:pretty}
.ds-inbox-detail-content p{font-size:var(--type-body-size);line-height:var(--type-body-line);margin:var(--sp-8) 0 0}
.ds-inbox-detail-heading>p{color:var(--text-muted)}
.ds-inbox-timing{margin:var(--sp-12) 0;color:var(--text-muted);font-size:var(--type-caption-size)}
.ds-inbox-timing summary{cursor:pointer}
.ds-inbox-timing .ico{width:var(--icon-sm);height:var(--icon-sm);vertical-align:middle;margin-right:var(--sp-4)}
.ds-inbox-scope{padding:var(--sp-16);background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--r-md);margin-top:var(--sp-24)}
.ds-inbox-scope h3,.ds-inbox-after h3{font:inherit;font-weight:var(--type-title-weight);font-size:var(--type-body-sm-size);margin:0}
.ds-inbox-scope p{color:var(--text-muted)}
.ds-inbox-choices{border:0;padding:0;margin:var(--sp-24) 0;min-width:0}
.ds-inbox-choices h3{font:inherit;font-size:var(--type-title-size);font-weight:var(--type-title-weight);margin:0 0 var(--sp-12)}
.ds-inbox-options{display:grid;gap:var(--sp-12)}
.ds-inbox-options[data-layout=horizontal]{grid-template-columns:repeat(2,minmax(0,1fr))}
.ds-inbox-option{display:flex;gap:var(--sp-12);align-items:flex-start;min-width:0;min-height:var(--touch-min);border:var(--stroke) solid var(--border);background:var(--surface-2);border-radius:var(--r-md);padding:var(--sp-16);cursor:pointer}
.ds-inbox-option input{appearance:auto;accent-color:var(--secondary);width:var(--icon-sm);height:var(--icon-sm);margin:var(--sp-2) 0 0;flex:none}
.ds-inbox-option>span{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-8);min-width:0}
.ds-inbox-option strong{font-size:var(--type-body-size)}
.ds-inbox-option>span>span{display:block;width:100%;font-size:var(--type-body-sm-size);color:var(--text-muted);line-height:var(--type-body-line)}
.ds-inbox-option[data-selected=true]{background:var(--secondary-container);border-color:var(--secondary)}
.ds-inbox-option:has(input:focus-visible){outline:var(--stroke-heavy) solid var(--focus);outline-offset:var(--sp-2)}
.ds-inbox-option:has(input:disabled){cursor:default}
.ds-inbox-recommend{font-size:var(--type-caption-size);color:var(--primary)}
.ds-inbox-after{padding:var(--sp-16) 0;border-top:var(--stroke) solid var(--border);margin-top:var(--sp-24)}
.ds-inbox-after p{color:var(--text-muted);font-size:var(--type-body-sm-size)}
.ds-inbox-evidence{margin-top:var(--sp-16);font-size:var(--type-body-sm-size)}
.ds-inbox-evidence>summary{display:flex;align-items:center;gap:var(--sp-8);list-style:none;cursor:pointer;min-height:var(--sp-32);color:var(--text-muted)}
.ds-inbox-evidence>summary::-webkit-details-marker{display:none}
.ds-inbox-evidence[open]>summary>.ico{transform:rotate(90deg)}
.ds-inbox-evidence .ico{width:var(--icon-sm);height:var(--icon-sm)}
.ds-inbox-evidence>div{border-left:var(--stroke) solid var(--border);padding-left:var(--sp-16);margin-left:var(--sp-8)}
.ds-inbox-evidence section{padding:var(--sp-12) 0}
.ds-inbox-evidence small{display:block;color:var(--text-muted);margin-top:var(--sp-4)}
.ds-inbox-comparison{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);margin:var(--sp-24) 0}
.ds-inbox-comparison>section{border:var(--stroke) solid var(--border);padding:var(--sp-16);border-radius:var(--r-md);background:var(--surface)}
.ds-inbox-comparison>section:last-child{background:var(--primary-container)}
.ds-inbox-comparison small{color:var(--text-muted);font-size:var(--type-caption-size);font-weight:var(--type-title-weight)}
.ds-inbox-checklist{list-style:none;margin:var(--sp-24) 0;padding:0;display:grid;gap:var(--sp-16)}
.ds-inbox-checklist li{display:flex;gap:var(--sp-12)}
.ds-inbox-checklist .ico{flex:none;color:var(--primary);width:var(--icon-sm);height:var(--icon-sm);margin-top:var(--sp-4)}
.ds-inbox-checklist p{font-size:var(--type-body-sm-size);color:var(--text-muted);margin-top:var(--sp-4)}
.ds-inbox-group-block{padding:var(--sp-16);background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--r-md);margin-top:var(--sp-16)}
.ds-inbox-group-block[data-handled=true]{border-style:dashed;color:var(--text-muted)}
.ds-inbox-group-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-12)}
.ds-inbox-group-head>div{min-width:0}
.ds-inbox-group-head strong{font-size:var(--type-body-size);font-weight:var(--type-title-weight)}
.ds-inbox-group-head small{display:block;color:var(--text-muted);font-size:var(--type-caption-size);margin-top:var(--sp-2)}
.ds-inbox-group-head>.btn,.ds-inbox-group-head>.ds-inbox-muted{flex:none}
.ds-inbox-group-block>p{color:var(--text-muted)}
.ds-inbox-group-entries{list-style:none;margin:var(--sp-12) 0 0;padding:0;display:grid;gap:var(--sp-12)}
.ds-inbox-group-entries strong{font-size:var(--type-body-sm-size);font-weight:var(--type-title-weight)}
.ds-inbox-group-entries p{font-size:var(--type-body-sm-size);color:var(--text-muted);margin-top:var(--sp-4);white-space:pre-wrap}
.ds-inbox-option--own{padding:var(--sp-12) var(--sp-16)}
.ds-inbox-option--own>span{flex:1}
.ds-inbox-options[data-layout=horizontal] .ds-inbox-option--own{grid-column:1/-1}
.ds-inbox-own-text{display:block;width:100%;min-height:calc(var(--type-body-line) * 1em);max-height:calc(var(--type-body-line) * 8em);resize:none;border:0;padding:0;margin:0;background:none;color:var(--on-surface);font:inherit;line-height:var(--type-body-line);outline:0;field-sizing:content}
.ds-inbox-own-text::placeholder{color:var(--text-muted)}
.ds-inbox-choice-actions{margin-top:var(--sp-12)}
.ds-inbox-choice-actions .ds-bonsai-mark{--explain-size:var(--icon-sm)}
.ds-inbox-detail-footer{padding:var(--sp-16) var(--sp-32) var(--sp-24);border-top:var(--stroke) solid var(--border)}
.ds-inbox-detail-footer p{margin:0 0 var(--sp-12);font-size:var(--type-body-sm-size)}
.ds-inbox-muted{font-size:var(--type-body-sm-size);color:var(--text-muted)}
.ds-inbox-receipt{display:flex;align-items:flex-start;gap:var(--sp-12);font-size:var(--type-body-sm-size)}
.ds-inbox-receipt>.ico{color:var(--primary);flex:none}
.ds-inbox-receipt>div{flex:1}
.ds-inbox-receipt p{margin:var(--sp-4) 0;color:var(--text-muted)}
.ds-inbox-failure{background:var(--warning-container);color:var(--on-warning-container);padding:var(--sp-12);border-radius:var(--r-md);margin-bottom:var(--sp-16)}
.ds-inbox-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);background:var(--warning-container);color:var(--on-warning-container);padding:var(--sp-8) var(--sp-24);font-size:var(--type-body-sm-size)}
.ds-inbox-empty{max-width:var(--action-max-width);margin:auto;padding:var(--sp-48) var(--sp-32)}
.ds-inbox-empty>.ico{color:var(--primary);width:var(--sp-32);height:var(--sp-32)}
.ds-inbox-empty h2{font-size:var(--type-title-size);margin:var(--sp-16) 0 var(--sp-8)}
.ds-inbox-empty p{color:var(--text-muted);line-height:var(--type-body-line)}
/* The compact summary is global chrome, never a Today widget. */
.ds-inbox-global{position:relative}
.ds-inbox-summary{appearance:none;display:flex;align-items:center;gap:var(--sp-8);border:var(--stroke) solid var(--border);border-radius:var(--r-full);background:var(--surface-2);color:var(--on-surface);font:inherit;font-size:var(--type-body-sm-size);height:var(--sp-32);padding:0 var(--sp-12);cursor:pointer}
.ds-inbox-summary>.ico{width:var(--icon-sm);height:var(--icon-sm);flex:none}
.ds-inbox-summary-label{max-width:var(--dialog-width);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-inbox-summary-count{font-size:var(--type-caption-size);font-weight:var(--type-title-weight);color:var(--primary)}
.ds-inbox-pop{position:absolute;right:0;top:calc(100% + var(--sp-8));width:var(--workspace-chat-width);max-width:calc(100vw - var(--sp-32));padding:var(--sp-16);z-index:40}
.ds-inbox-pop header{display:flex;justify-content:space-between;gap:var(--sp-8);margin-bottom:var(--sp-16)}
.ds-inbox-pop header small{font-size:var(--type-caption-size);color:var(--text-muted)}
.ds-inbox-pop-lead{display:flex;flex-direction:column;gap:var(--sp-8);color:var(--on-surface);text-decoration:none;background:var(--surface);border-radius:var(--r-md);padding:var(--sp-12)}
.ds-inbox-pop-lead small{color:var(--text-muted);font-size:var(--type-caption-size)}
.ds-inbox-pop-groups{display:grid;gap:var(--sp-4);padding:var(--sp-12) 0}
.ds-inbox-pop-groups>a{display:flex;justify-content:space-between;align-items:center;color:var(--text-muted);text-decoration:none;min-height:var(--sp-32);font-size:var(--type-body-sm-size)}
/* Explain keeps the exact native alpha silhouette. Sample the canopy's own
   interior fill at 4x scale so the face is absent without changing its outline. */
.ds-bonsai-mark,.ds-explain-mark{--explain-size:calc(var(--sp-24) + var(--sp-4));display:inline-block;flex:none;width:var(--explain-size);height:var(--explain-size);background-color:var(--leaf);background-image:url("brands/bonsai-flat-512.png");background-size:calc(var(--explain-size) * 4) calc(var(--explain-size) * 4);background-position:calc(var(--explain-size) * -1.5) calc(var(--explain-size) * -1.125);mask-image:url("brands/bonsai-flat-512.png");mask-mode:alpha;mask-size:100% 100%;mask-repeat:no-repeat}
.ds-explain-trigger{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:var(--sp-32);height:var(--sp-32);padding:0;border:0;border-radius:var(--r-full);background:transparent;color:var(--on-surface);cursor:pointer}
.ds-explain-trigger:hover,.ds-explain-trigger:active{background:transparent}
.ds-explain-selection{appearance:none;position:fixed;inset:auto;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);height:var(--sp-32);padding:0 var(--sp-12) 0 var(--sp-8);border:var(--stroke) solid var(--glass-border);border-radius:var(--r-full);background:var(--glass);backdrop-filter:blur(var(--glass-blur));color:var(--on-surface);font:inherit;font-size:var(--type-body-sm-size);box-shadow:none;cursor:pointer;z-index:50}
.ds-explain-selection[popover]:not(:popover-open){display:none}
.ds-explain-selection>.ds-explain-mark{--explain-size:var(--sp-24)}
.ds-explain-context{display:flex;flex-direction:column;gap:var(--sp-4);font-size:var(--type-body-sm-size)}
.ds-explain-context small{font-size:var(--type-caption-size);color:var(--text-muted)}
.ds-explain-context blockquote{display:flex;flex-direction:column;gap:var(--sp-8);margin:var(--sp-12) 0 0;padding:var(--sp-12);border-left:var(--stroke) solid var(--primary);background:var(--primary-container);border-radius:var(--r-sm)}
.ds-explain-prompts{display:flex;gap:var(--sp-8);flex-wrap:wrap;padding:var(--sp-12) var(--sp-20)}
.ds-explain-prompts .chip{font-size:var(--type-caption-size)}
/* Explain's side chat lives in the conversation drawer (2026-11-01): the drawer titlebar carries the flat canopy mark,
   the item strip sits under the titlebar and the prompt chips sit in the composer. */
.ds-conversation-title>.ds-bonsai-mark{--explain-size:var(--icon-box,var(--icon-sm))}
.ds-workspace-chat .ds-explain-context{padding-top:var(--sp-12)}
.ws-compose>.ds-explain-prompts{padding:0 0 var(--sp-8)}
.ds-inbox-section-toggle:focus-visible,.ds-inbox-item:focus-visible,.ds-inbox-summary:focus-visible,.ds-explain-trigger:focus-visible,.ds-explain-selection:focus-visible{outline:var(--stroke-heavy) solid var(--focus);outline-offset:var(--sp-4)}
@container (max-width:760px){
 .ds-inbox-panes{grid-template-columns:minmax(0,1fr)}
 .ds-inbox-queue-head{padding:var(--sp-16) 0 var(--sp-8)}
 .ds-inbox-preview{max-width:40%;white-space:normal;text-align:right}
 .ds-inbox-queue{padding:0 var(--sp-20) var(--sp-20)}
 .ds-inbox[data-detail=false] .ds-inbox-detail{display:none}
 .ds-inbox[data-detail=true] .ds-inbox-queue{display:none}
 .ds-inbox-detail{border-left:0}
 .ds-inbox-back{display:inline-flex}
 .ds-inbox-detail-toolbar{padding:var(--sp-12) var(--sp-20)}
 .ds-inbox-detail-content{padding:0 var(--sp-20) var(--sp-20)}
 .ds-inbox-detail-footer{padding:var(--sp-16) var(--sp-20)}
 .ds-inbox-comparison{grid-template-columns:1fr}
 .ds-inbox-choice-actions>.btn{flex:1 1 0}
 .ds-inbox-receipt{flex-wrap:wrap}
}
@media(max-width:900px){
 .ds-inbox-summary-label,.ds-inbox-summary>.ico:last-child{display:none}
 .ds-inbox-summary{padding:0 var(--sp-8)}
 .ds-inbox-pop{position:fixed;top:calc(var(--appbar-height) + var(--sp-8));right:var(--sp-16)}
}
@media(pointer:coarse){
 .ds-explain-trigger,.ds-inbox-summary{min-width:var(--touch-min);min-height:var(--touch-min)}
 .ds-inbox-section-toggle,.ds-inbox-evidence>summary,.ds-inbox-pop-groups>a{min-height:var(--touch-min)}
}
.ds-explain-selection--specimen{position:static;inset:auto}

.ds-inbox-summary[data-tone=warning]{background:var(--warning-container);color:var(--on-warning-container);border-color:var(--warning-container)}
.ds-inbox-summary[data-tone=error]{background:var(--error-container);color:var(--on-error-container);border-color:var(--error-container)}
.ds-inbox-summary[data-tone=info]{background:var(--info-container);color:var(--on-info-container);border-color:var(--info-container)}
.ds-inbox-summary:is([data-tone=warning],[data-tone=error],[data-tone=info]) .ds-inbox-summary-count{color:inherit}
.ds-inbox-nav-count{margin-left:auto;font-size:var(--type-caption-size);font-variant-numeric:tabular-nums}

.ds-inbox-group-clear{display:flex;gap:var(--sp-12);padding:var(--sp-16) 0;font-size:var(--type-body-sm-size);line-height:var(--type-body-line)}
.ds-inbox-group-clear>.ico{width:var(--icon-sm);height:var(--icon-sm);color:var(--primary);flex:none;margin-top:var(--sp-2)}
.ds-inbox-group-clear strong{font-weight:var(--type-title-weight)}
.ds-inbox-group-clear p{margin:var(--sp-4) 0 0;color:var(--text-muted)}
.ds-inbox-clear h2{font-size:var(--type-h2-size);font-weight:var(--type-h2-weight);line-height:var(--type-h2-line);text-wrap:pretty}

/* Issues / Turn workspace. One shared status axis; no per-turn status model. */
.ds-issues-page{height:100%;min-height:0;box-sizing:border-box}
.ds-issues{display:flex;flex-direction:column;flex:1;min-height:0;gap:var(--sp-16);container-type:inline-size}
.ds-issues-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-12);flex-shrink:0}
.ds-issues-collection-tabs{border:0;gap:var(--sp-16)}
.ds-issues-collection-tabs .tab{gap:var(--sp-8);min-height:var(--ui-row-height);padding:var(--sp-4) 0;font-size:var(--ui-nav-size)}
.ds-issues-view-controls{display:flex;align-items:center;gap:var(--sp-4)}
.ds-issues-controls{margin-left:auto;display:flex;align-items:center;gap:var(--sp-8);min-width:0}
.ds-issues-toolbar .ico{width:var(--sp-16);height:var(--sp-16)}
.ds-issues-search{width:calc(var(--sp-64)*4);max-width:100%;min-width:0}
.ds-issues-search .ctl{min-height:var(--ui-row-height);padding:0 var(--sp-8);gap:var(--sp-8)}
.ds-issues-search input{font-size:var(--ui-nav-size)}
.ds-issues-count{font:var(--type-body-weight) var(--type-caption-size)/1 var(--font-ui);min-width:var(--sp-16);text-align:center;white-space:nowrap}
.ds-issues-columns{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(calc(var(--sp-64)*4),1fr);gap:var(--sp-16);flex:1;min-height:0;overflow:auto;align-items:stretch;padding-bottom:var(--sp-4)}
.ds-issues-column{display:flex;flex-direction:column;min-width:0;min-height:0}
.ds-issues-column h2,.ds-issues-band h2{margin:0;font:inherit}
.ds-issues-lane-title{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-4) var(--sp-8);min-height:var(--ui-row-height);width:100%;box-sizing:border-box;text-align:left;border:0;border-radius:var(--r-sm);background:var(--muted-surface);color:var(--on-surface);font:var(--type-label-weight) var(--ui-nav-size)/var(--type-body-line) var(--font-ui);flex-shrink:0}
button.ds-issues-lane-title{cursor:pointer}
button.ds-issues-lane-title:hover{filter:brightness(.97)}
.ds-issues-column[data-kind=human] .ds-issues-lane-title{background:var(--accent);color:var(--on-accent)}
.ds-issues-column:is([data-kind=agent],[data-kind=todo]) .ds-issues-lane-title{background:var(--secondary);color:var(--on-secondary)}
.ds-issues-column[data-kind=closed] .ds-issues-lane-title{background:var(--primary);color:var(--on-primary)}
.ds-issues-resize{position:relative;display:inline-block;width:var(--sp-24);height:var(--sp-24);margin-left:auto;flex-shrink:0}
.ds-issues-resize .ico{position:absolute;top:var(--sp-4);left:0;width:var(--sp-16);height:var(--sp-16)}
.ds-issues-resize .ico+.ico{left:auto;right:0}
.ds-issues-column-body{padding:var(--sp-12) 0;overflow:auto;min-height:0;flex:1;scrollbar-gutter:stable}
.ds-issues-stack{display:grid;gap:var(--sp-8)}
.ds-issues-group+.ds-issues-group{margin-top:var(--sp-24)}
.ds-issues-status{display:flex;align-items:center;gap:var(--sp-8);margin:0 0 var(--sp-12);font:var(--type-label-weight) var(--type-body-sm-size)/var(--type-body-line) var(--font-ui);color:var(--text-muted)}
.ds-issues-status-dot{display:inline-block;width:var(--sp-8);height:var(--sp-8);border:var(--stroke-focus) solid currentColor;border-radius:50%;box-sizing:border-box;flex-shrink:0}
.ds-issues-axis{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.ds-issues-axis-content{display:grid;min-width:100%;width:max-content;align-content:start}
.ds-issues-status-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(calc(var(--sp-64)*4),1fr)}
.ds-issues-axis-head{position:sticky;top:0;z-index:2;background:var(--surface);padding-bottom:var(--sp-8)}
.ds-issues-axis-stop{contain:inline-size;display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-12);border-bottom:var(--stroke) solid var(--border);font:var(--type-label-weight) var(--type-body-sm-size)/var(--type-body-line) var(--font-ui);color:var(--text-muted)}
.ds-issues-axis-stop .ds-issues-count{margin-left:auto}
.ds-issues-status-cell{contain:inline-size;display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-8);padding:var(--sp-12);min-width:0;min-height:var(--sp-64)}
.ds-issues-band{margin-bottom:var(--sp-12);background:var(--surface-sunken);border-radius:var(--r-sm)}
.ds-issues-band[data-kind=human]{background:var(--warning-container);color:var(--on-warning-container)}
.ds-issues-band[data-kind=agent]{background:var(--secondary-container);color:var(--on-secondary-container)}
.ds-issues-band .ds-issues-lane-title{background:transparent;color:inherit;position:sticky;left:0;width:fit-content;max-width:100%}
.ds-issue-ticket{position:relative;background:var(--surface-2);color:var(--on-surface);border:var(--stroke) solid var(--ink);border-radius:var(--r-sm);min-width:0;box-sizing:border-box;transition:border-color var(--dur-fast) var(--ease)}
.ds-issue-ticket:hover{border-color:var(--secondary)}
.ds-issue-ticket{border-left-width:var(--sp-4)}
.ds-issue-ticket[data-kind=human]{border-left-color:var(--accent)}
.ds-issue-ticket:is([data-kind=agent],[data-kind=todo]){border-left-color:var(--secondary)}
.ds-issue-ticket[data-kind=closed]{border-left-color:var(--primary)}
.ds-issue-ticket-link{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-8);padding-right:var(--sp-32);color:inherit;text-decoration:none;min-height:var(--ui-row-height);box-sizing:border-box}
.ds-issue-ticket-link:hover{text-decoration:none;color:inherit}
.ds-issue-number{font-size:var(--type-caption-size);color:var(--text-muted);white-space:nowrap}
.ds-issue-title{font:var(--table-body-weight) var(--type-body-sm-size)/var(--type-body-line) var(--font-ui);overflow-wrap:anywhere}
.ds-issue-footer{display:flex;align-items:center;gap:var(--sp-8);padding:0 var(--sp-8) var(--sp-8);min-height:var(--sp-20)}
.ds-issue-project{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sp-20);height:var(--sp-20);font-size:var(--sp-16)}
.ds-issue-project .ico{width:var(--sp-16);height:var(--sp-16);color:var(--text-muted)}
.ds-issue-identities{margin-left:auto;display:flex;gap:var(--sp-4)}
.ds-issue-avatar.avatar{white-space:nowrap;width:var(--sp-20);height:var(--sp-20);font-size:var(--type-caption-size);font-weight:var(--type-label-weight);box-sizing:border-box}
.ds-issue-avatar .ico{width:var(--sp-12);height:var(--sp-12)}
.ds-issue-avatar[data-agent=true]{background:var(--secondary-container);color:var(--on-secondary-container)}
.ds-issue-priority{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-2xs);background:var(--secondary-container);font-size:var(--type-caption-size);font-weight:var(--type-label-weight);white-space:nowrap;color:var(--text-muted)}
.ds-issue-priority .ico{width:var(--sp-12);height:var(--sp-12)}
.ds-issue-priority[data-level="0"]{background:var(--error-container);color:var(--on-error-container)}
.ds-issue-priority[data-level="1"]{background:var(--warning-container);color:var(--on-warning-container)}
.ds-issue-actions{position:absolute;right:var(--sp-2);top:var(--sp-2)}
.ds-issue-actions .ico{width:var(--sp-16);height:var(--sp-16)}
.ds-issues-menu-trigger.icon-btn{width:var(--ui-row-height);height:var(--ui-row-height);min-height:var(--ui-row-height);box-sizing:border-box}
.ds-issues-menu{position:fixed;inset:auto;margin:0;z-index:10;min-width:calc(var(--sp-64)*3);max-width:calc(100vw - var(--sp-16));max-height:calc(100dvh - var(--sp-16));overflow:auto;box-sizing:border-box}
.ds-issues-menu:not(:popover-open){display:none}
.ds-issues-menu .opt{width:100%;text-align:left;font-size:var(--ui-nav-size);min-height:var(--ui-row-height)}
.ds-issues-menu .ico,.ds-issues-menu .ds-bonsai-mark{width:var(--sp-16);height:var(--sp-16);flex-shrink:0}
.ds-issues-menu-label{padding:var(--sp-4) var(--sp-8);font-size:var(--type-caption-size);color:var(--text-muted)}
.ds-issues-menu-check{margin-left:auto;display:inline-flex;min-width:var(--sp-16)}
.ds-issues-menu .opt:disabled{color:var(--text-muted);cursor:default}
.ds-issues-status-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--text-muted)}
.ds-issues-status-icon .ico{width:var(--sp-16);height:var(--sp-16)}
.ds-issue-ticket>.ds-meta{padding:0 var(--sp-8);font-size:var(--type-caption-size)}
.ds-issues-results{overflow:auto;flex:1;min-height:0}
.ds-issues-results>.ds-meta{margin-bottom:var(--sp-16)}
.ds-issues-view-icon{width:var(--sp-16);height:var(--sp-16);display:inline-block;position:relative;flex-shrink:0;border:calc(var(--icon-stroke) * var(--sp-16) / 24) solid currentColor;border-radius:var(--r-2xs);box-sizing:border-box}
.ds-issues-view-icon:after{content:"";position:absolute;background:currentColor}
.ds-issues-view-icon[data-view=columns]:after{width:calc(var(--icon-stroke) * var(--sp-16) / 24);height:100%;left:calc(50% - calc(var(--icon-stroke) * var(--sp-16) / 24)/2);top:0}
.ds-issues-view-icon[data-view=axis]{border:0;border-radius:0;}
.ds-issues-view-icon[data-view=axis]:before{content:"";position:absolute;left:0;top:calc(50% - calc(var(--icon-stroke) * var(--sp-16) / 24)/2);width:var(--sp-4);height:calc(var(--icon-stroke) * var(--sp-16) / 24);background:currentColor;box-shadow:var(--sp-12) 0 currentColor}
.ds-issues-view-icon[data-view=axis]:after{background:transparent;border:calc(var(--icon-stroke) * var(--sp-16) / 24) solid currentColor;border-radius:50%;box-sizing:border-box;width:var(--sp-8);height:var(--sp-8);left:var(--sp-4);top:var(--sp-4)}
.ds-issues-view-icon[data-view=split]:after{height:calc(var(--icon-stroke) * var(--sp-16) / 24);width:100%;left:0;top:calc(50% - calc(var(--icon-stroke) * var(--sp-16) / 24)/2)}
.ds-issues-merge{position:relative;display:inline-block;width:var(--sp-16);height:var(--sp-16);flex-shrink:0}
.ds-issues-merge>i,.ds-issues-merge>b,.ds-issues-merge>b>i{position:absolute;display:block;width:var(--sp-12);height:var(--sp-12);border-radius:50%;box-sizing:border-box}
.ds-issues-merge>i{border:calc(var(--icon-stroke) * var(--sp-16) / 24) solid currentColor;left:0;top:0}
.ds-issues-merge>i+i,.ds-issues-merge>b>i{left:var(--sp-4);top:var(--sp-4)}
.ds-issues-merge>b{left:0;top:0;overflow:hidden}
.ds-issues-merge>b>i{background:currentColor}
@container (max-width:600px){
  .ds-issues-controls{flex:1 0 100%;min-width:0}
  .ds-issues-search{width:100%}
  .ds-issues-toolbar{gap:var(--sp-8)}
  .ds-issues-axis .ds-issue-title,.ds-issues-axis .ds-issue-footer{display:none}
  .ds-issues-axis .ds-issues-status-cell{flex-direction:row;align-content:flex-start;flex-wrap:wrap;align-items:flex-start;padding:var(--sp-8);gap:var(--sp-4)}
  .ds-issues-axis .ds-issue-ticket{flex:0 1 auto}
  .ds-issues-axis .ds-issue-ticket-link{padding:var(--sp-8);min-width:var(--sp-40)}
  .ds-issues-axis .ds-issue-actions{display:none}
}

.ws-view.ds-issues-page{gap:var(--sp-12)}
.ds-issues-page>.ds-stack{gap:var(--sp-8)}
@media(pointer:coarse){.ds-issues-menu-trigger.icon-btn,.ds-issues-collection-tabs .tab,.ds-issues-lane-title{min-height:var(--touch-min)}.ds-issues-menu-trigger.icon-btn{width:var(--touch-min)}.ds-issue-ticket-link{min-height:var(--touch-min)}}

/* Independent issue fields compose existing menu, tooltip, label and text-field controls. */
.ds-issues-group>summary{cursor:pointer;list-style:none;min-height:var(--ui-row-height);margin-bottom:var(--sp-8)}
.ds-issues-group>summary::-webkit-details-marker{display:none}
.ds-issues-group>summary>.ico{width:var(--sp-12);height:var(--sp-12);transition:transform var(--dur-fast) var(--ease)}
.ds-issues-group[open]>summary>.ico{transform:rotate(90deg)}
.ds-issue-footer .ds-issues-menu-trigger.icon-btn{width:auto;min-width:var(--sp-24);height:var(--sp-24);min-height:var(--sp-24);padding:0;border:0;border-radius:var(--r-2xs);background:transparent}
.ds-issue-footer .ds-issues-menu-trigger:hover{background:var(--surface-sunken)}
.ds-issue-field-form{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-8)}
.ds-issue-field-form p{margin:0}
.ds-issue-field-form .btn{align-self:flex-end;font-size:var(--ui-nav-size);min-height:var(--ui-row-height)}
.ds-issue-field-form .ctl{min-height:var(--ui-row-height)}
.ds-issue-project:hover{text-decoration:none;background:var(--surface-sunken);border-radius:var(--r-2xs)}
@media(pointer:coarse){.ds-issue-footer .ds-issues-menu-trigger.icon-btn,.ds-issue-project{min-width:var(--touch-min);min-height:var(--touch-min)}}