/* Aura Tasks. Apple-inspired UI.
   Panels, cards and overlays are liquid glass: an SVG displacement filter bends whatever is behind them
   (the wallpaper, or the list scrolling under the toolbar) at a lit rim. Colour lives in the data; chrome stays neutral.
   Every size, radius, colour and density value below is a token that Settings can change. */

:root {
  --font: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, monospace;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);      /* iOS sheet curve: fast start, critically damped settle */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* a small overshoot, only for confirmations (a tick) */
  --t-fast: 140ms; --t: 240ms; --t-slow: 420ms; --t-layout: 340ms;

  /* user-scalable tokens (set by Settings) */
  --text-scale: 1; --radius-scale: 1; --accent: #0a72e8; --on-accent: #ffffff; --wp-angle: 135deg;
  --fs-xs: calc(11px * var(--text-scale)); --fs-s: calc(12px * var(--text-scale)); --fs-m: calc(13px * var(--text-scale));
  --fs-b: calc(14px * var(--text-scale)); --fs-l: calc(15px * var(--text-scale)); --fs-xl: calc(17px * var(--text-scale));
  --fs-2: calc(20px * var(--text-scale)); --fs-3: calc(22px * var(--text-scale)); --fs-4: calc(28px * var(--text-scale)); --fs-5: calc(34px * var(--text-scale));
  --r-xs: calc(6px * var(--radius-scale)); --r-sm: calc(8px * var(--radius-scale)); --r: calc(12px * var(--radius-scale));
  --r-lg: calc(16px * var(--radius-scale)); --r-xl: calc(20px * var(--radius-scale)); --r-pill: calc(999px * var(--radius-scale));
  --gap: 12px; --rail: 60px;
  /* density: comfortable */
  --row-min: 52px; --nav-h: 32px; --pad: 20px; --space: 16px; --ctl-h: 34px;

  color-scheme: light;
  --wp-1: var(--wpl-1, #d9e7fb); --wp-2: var(--wpl-2, #eef3f6); --wp-3: var(--wpl-3, #f7e4d6);
  --wp-band: rgba(255, 255, 255, 0.34); --wp-band-2: rgba(255, 255, 255, 0.22);
  --surface: #ffffff; --surface-2: #f4f6f9; --surface-3: #e8ebf0;
  --panel-solid: rgba(250, 251, 253, 0.97); --material: rgba(251, 252, 254, 0.97); --field: rgba(255, 255, 255, 0.72);
  --rim: rgba(255, 255, 255, 0.9); --rim-2: rgba(255, 255, 255, 0.35); --edge: rgba(16, 24, 40, 0.08);
  --line: rgba(16, 24, 40, 0.08); --line-2: rgba(16, 24, 40, 0.14);
  --text: #1d1d1f; --text-2: #474a52; --text-3: #676a73;
  --accent-ink: color-mix(in oklab, var(--accent) 82%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
  --primary-bg: var(--accent); --primary-ink: var(--on-accent);
  --lg-tint: #ffffff;
  --scrim: rgba(20, 22, 28, 0.22);
  --hover: rgba(127, 127, 140, 0.11);
  --sb-thumb: rgba(16, 24, 40, 0.26); --sb-thumb-hover: rgba(16, 24, 40, 0.42);
  --shadow-sm: 0 1px 2px rgba(16, 19, 26, 0.06);
  --shadow: 0 10px 30px rgba(16, 19, 26, 0.08), 0 2px 6px rgba(16, 19, 26, 0.05);
  --shadow-lg: 0 28px 80px rgba(16, 19, 26, 0.18), 0 6px 18px rgba(16, 19, 26, 0.08);

  /* status: fixed, never reused for brands */
  --s-open: #8b8e96; --s-progress: #2a78d6; --s-blocked: #d03b3b; --s-upcoming: #6250d6; --s-unknown: #b77d00; --s-done: #0ca30c;
  --s-unknown-fill: #fab219; --critical-ink: #b42828;
  /* brand palette: validated categorical slots (dataviz validator, light). Brands use their own colour or slot N. */
  --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100; --cat-5: #e87ba4; --cat-6: #008300; --cat-7: #4a5bc4; --cat-8: #9a6b3f;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --wp-1: var(--wpd-1, #0a1730); --wp-2: var(--wpd-2, #0b2a38); --wp-3: var(--wpd-3, #2b1b2e);
  --wp-band: rgba(255, 255, 255, 0.07); --wp-band-2: rgba(255, 255, 255, 0.045);
  --surface: #15171c; --surface-2: #1c1f25; --surface-3: #262a31;
  --panel-solid: rgba(22, 24, 30, 0.97); --material: rgba(28, 31, 38, 0.97); --field: rgba(0, 0, 0, 0.28);
  --rim: rgba(255, 255, 255, 0.14); --rim-2: rgba(255, 255, 255, 0.06); --edge: rgba(0, 0, 0, 0.45);
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14);
  --text: #f2f3f5; --text-2: #babdc5; --text-3: #9196a1;
  --accent-ink: color-mix(in oklab, var(--accent) 62%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
  --lg-tint: #12151c;
  --scrim: rgba(0, 0, 0, 0.45);
  --hover: rgba(160, 165, 180, 0.12);
  --sb-thumb: rgba(255, 255, 255, 0.22); --sb-thumb-hover: rgba(255, 255, 255, 0.38);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.35);
  --s-open: #8f929a; --s-progress: #3987e5; --s-blocked: #e66767; --s-upcoming: #9085e9; --s-unknown: #fab219; --s-done: #2fbf3a;
  --critical-ink: #ff8a8a;
  --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --cat-7: #7383e6; --cat-8: #b88a5c;
}

:root[data-density="compact"] { --row-min: 42px; --nav-h: 28px; --pad: 14px; --space: 12px; --ctl-h: 30px; }
:root[data-density="spacious"] { --row-min: 60px; --nav-h: 36px; --pad: 26px; --space: 20px; --ctl-h: 38px; }
:root[data-font="rounded"] {
  --font: "SF Pro Rounded", ui-rounded, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "SF Pro Rounded", ui-rounded, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
:root[data-font="serif"] { --font-display: "New York", ui-serif, "Iowan Old Style", Charter, "Sitka Heading", Georgia, serif; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: var(--fs-b)/1.45 var(--font); color: var(--text); -webkit-font-smoothing: antialiased;
  background: var(--wp-1); overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: default; background: none; border: 0; padding: 0; }
button:disabled { opacity: 0.45; }
a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0; }
.muted { color: var(--text-3); }
.crit { color: var(--critical-ink); }
.spacer { flex: 1; }
.grow { flex: 1; align-self: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 16px; height: 16px; flex: none; }
.skip { position: absolute; z-index: 90; left: 16px; top: -60px; padding: 8px 14px; border-radius: var(--r-sm); background: var(--primary-bg); color: var(--primary-ink); transition: top var(--t-fast); }
.skip:focus { top: 16px; }

/* ---------- scrollbars ----------
   Thin pills inset from the edges (track margins keep them clear of rounded corners). Classic, not overlay,
   so they take their own lane and never sit on top of content or controls. Auto mode shows the thumb
   while the list is hovered, focused or scrolling. */
.scroll { overflow: auto; overscroll-behavior: contain; }
.scroll-x { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; margin: 8px; }
::-webkit-scrollbar-thumb { background: var(--sb-thumb) padding-box; border: 3px solid transparent; border-radius: 999px; min-height: 36px; min-width: 36px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); border-width: 2px; }
::-webkit-scrollbar-corner, ::-webkit-scrollbar-button { display: none; background: transparent; }
:root[data-scrollbars="auto"] *:not(:hover):not(:focus-within):not(.is-scrolling)::-webkit-scrollbar-thumb { background-color: transparent; }
:root[data-scrollbars="hidden"] ::-webkit-scrollbar { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
  :root[data-scrollbars="hidden"] * { scrollbar-width: none; }
}

/* ---------- materials ---------- */
/* .panel = a chrome surface. Solid until (or unless) it turns into glass (see "liquid glass" below). */
.panel { position: relative; border-radius: var(--r-xl); background: var(--panel-solid); border: 1px solid var(--edge); box-shadow: var(--shadow), inset 0 1px 0 var(--rim); }
/* .material = small floating surfaces over content (menus, toasts, tooltips, dialogs): opaque liquid finish, no blur */
.material {
  position: relative; background: var(--material); border: 1px solid var(--edge);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-2);
}
.material::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }

/* ---------- liquid glass ----------
   Every panel, card, board column and dialog is glass: a tint, a lit rim, a top sheen, and the colour behind
   lifted through it (a native backdrop-filter, close to free). The toolbar, menus, toasts and tooltips also
   bend what is behind them at the rim: lib.js useGlass gives each one data-lg and --lens, its SVG filter.
   Glass inside glass stays solid (Apple's rule). The glass sits on ::before, under the content: on the element
   itself, backdrop-filter would become the containing block of the fixed menus inside panels and clip them.
   Pieces that scroll or fade in and hold no menus carry it themselves (a ::before would scroll away, and a
   fading parent hides the page from it). Nothing that contains glass may use filter, mask, mix-blend-mode
   or opacity < 1, or the glass sees only that ancestor. */
:root[data-glass="on"] :is(.panel, .card, .col, .sheet):not(:is(.panel, .card, .col, .sheet) *) { background: transparent; border-color: transparent; }
:where(:root[data-glass="on"] :is(.panel, .card, .col, .sheet):not(:is(.panel, .card, .col, .sheet) *)) { position: relative; isolation: isolate; }
:root[data-glass="on"] :is(.panel, .card, .col, .sheet):not(.scroll, :is(.panel, .card, .col, .sheet) *)::before,
:root[data-glass="on"] :is(.menu, .toast, .tip, .card.scroll:not(:is(.panel, .card, .col, .sheet) *)) {
  backdrop-filter: var(--glass-blur,) var(--lens,) saturate(1.6);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rim) calc(var(--glass-rim) * 30%), transparent), transparent 40%),
    color-mix(in srgb, var(--lg-tint) calc(var(--glass-alpha, var(--glass-tint)) * 100%), transparent);
}
:root[data-glass="on"] :is(.panel, .card, .col, .sheet):not(.scroll, :is(.panel, .card, .col, .sheet) *)::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rim) calc(var(--glass-rim) * 100%), transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--rim-2) calc(var(--glass-rim) * 100%), transparent);
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
}
:root[data-glass="on"] .card.scroll:not(:is(.panel, .card, .col, .sheet) *) { border-color: color-mix(in srgb, var(--rim-2) calc(var(--glass-rim) * 100%), var(--line)); }
:root[data-glass="on"] .col.drop-over::before { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.toolbar { --glass-blur: blur(1px); --glass-alpha: calc(var(--glass-tint) * 0.75); }  /* the list scrolls under it: clear enough to see it bend */
.material { --glass-blur: blur(16px); --glass-alpha: max(var(--glass-tint), 0.8); }  /* menus, toasts, dialogs sit over text */

/* ---------- motion: transform, opacity and one shadow only, so it stays on the compositor ---------- */
#view > * { animation: view-in var(--t-slow) var(--ease); }   /* each view slides in when it opens, not on every filter change */
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
/* scroll edge: the toolbar lifts as the list passes under it (scroll-driven, no JS) */
@supports (animation-timeline: scroll()) {
  .main { timeline-scope: --list; }
  .view { scroll-timeline: --list block; }
  .toolbar { animation: bar-lift linear both; animation-timeline: --list; animation-range: 0 48px; }
}
@keyframes bar-lift { to { box-shadow: 0 14px 34px rgba(16, 19, 26, 0.14), 0 2px 6px rgba(16, 19, 26, 0.06), inset 0 1px 0 var(--rim); } }

/* ---------- wallpaper: a linear gradient with crisp light bands for the glass to bend ---------- */
#wallpaper {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(calc(var(--wp-angle) - 62deg), transparent 0 17%, var(--wp-band) 17.6% 27%, transparent 27.6% 61%, var(--wp-band-2) 61.6% 69%, transparent 69.6%),
    linear-gradient(var(--wp-angle), var(--wp-1) 0%, var(--wp-2) 52%, var(--wp-3) 100%);
}
:root[data-bands="off"] #wallpaper { background: linear-gradient(var(--wp-angle), var(--wp-1) 0%, var(--wp-2) 52%, var(--wp-3) 100%); }

/* ---------- shell ----------
   One flex row: sidebar | gap | main | gap | task details | gap | Claude. The gaps are the resize handles. */
.app { position: absolute; inset: 0; display: flex; padding: var(--gap); overflow: hidden; }

.gutter { position: relative; z-index: 22; flex: none; width: var(--gap); cursor: col-resize; touch-action: none; outline: none; transition: width var(--t-layout) var(--ease); }
.gutter::before { content: ""; position: absolute; inset: 0 -3px; }   /* a slightly wider grab area */
.gutter::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 36px; margin: -18px 0 0 -2px; border-radius: 2px;
  background: var(--line-2); opacity: 0; transition: opacity var(--t-fast), height var(--t) var(--ease), margin var(--t) var(--ease), background-color var(--t-fast);
}
.gutter:hover::after, .gutter:focus-visible::after { opacity: 1; height: 64px; margin-top: -32px; background: var(--accent); }
.gutter:focus-visible { outline: none; }
.gutter.off { width: 0; pointer-events: none; visibility: hidden; }
:root.resizing, :root.resizing * { cursor: col-resize !important; user-select: none; }
:root.resizing .gutter::after { opacity: 1; }
:root.resizing .app *, :root.resizing .app { transition: none !important; }

/* sidebar */
.sidebar {
  flex: none; z-index: 20; width: var(--side-w); display: flex; flex-direction: column; overflow: hidden; padding: 14px 8px 8px;
  transition: width var(--t-layout) var(--ease), margin var(--t-layout) var(--ease);
}
.app.side-peek .sidebar { width: var(--side-full); margin-right: calc(var(--rail) - var(--side-full)); z-index: 40; }
.brandmark { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 0 0 11px; margin-bottom: 10px; white-space: nowrap; }
.brandmark img { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.brandmark b { font: 600 var(--fs-l)/1 var(--font-display); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
.side-scroll { flex: 1; min-height: 0; margin: 0 -8px; padding: 0 8px; }
.side-group { margin-top: 14px; }
.side-label {
  width: 100%; display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px 0 14px; border-radius: var(--r-sm);
  font-size: var(--fs-s); font-weight: 500; color: var(--text-3); white-space: nowrap;
}
.side-label:hover { color: var(--text-2); background: var(--hover); }
.side-label .i { width: 12px; height: 12px; margin-left: auto; transition: transform var(--t) var(--ease); }
.side-label .i.turned { transform: rotate(-90deg); }
.side-sep { height: 1px; margin: 6px 12px 8px; background: var(--line); }
/* icon x-position stays the same collapsed or expanded, so nothing jumps */
.nav-item {
  width: 100%; height: var(--nav-h); display: flex; align-items: center; gap: 10px; padding: 0 10px 0 14px; border-radius: var(--r-sm);
  color: var(--text-2); text-align: left; white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease);
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item:active { transform: scale(0.97); }
.nav-item[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.nav-item .i { color: var(--text-3); }
.nav-item[aria-current="true"] .i { color: var(--accent); }
.nav-item .label-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-item .count { font-size: var(--fs-s); color: var(--text-3); font-variant-numeric: tabular-nums; }
.dot-slot { width: 16px; display: grid; place-items: center; flex: none; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c, var(--text-3)); }
.label-txt, .nav-item .count { transition: opacity var(--t) var(--ease); }
.sidebar.collapsed .label-txt, .sidebar.collapsed .count { opacity: 0; pointer-events: none; }
.side-foot { border-top: 1px solid var(--line); padding: 8px 0 0; margin-top: 8px; display: grid; gap: 2px; }
.live { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 14px 0 18px; font-size: var(--fs-s); color: var(--text-2); white-space: nowrap; overflow: hidden; }
.live .dot { --c: var(--s-done); }
.live.off .dot { --c: var(--s-blocked); }
.kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
  font: var(--fs-xs) var(--mono); color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
}

/* main column: the toolbar floats over the content, which scrolls up under its glass */
.main { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; --bar-clear: calc(56px + var(--gap) + 8px); }
.toolbar { position: absolute; top: 0; left: 0; right: 0; z-index: 15; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 8px; }
.tb-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; margin-left: 4px; }
.toolbar h1 { font: 600 var(--fs-xl)/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0; white-space: nowrap; }
.toolbar .sub { color: var(--text-3); font-size: var(--fs-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn.on { color: var(--accent-ink); background: var(--accent-soft); }
.view { flex: 1; min-height: 0; padding: var(--bar-clear) 0 32px 12px; scroll-padding-top: var(--bar-clear); scrollbar-gutter: stable; outline: none; }
.view::-webkit-scrollbar-track { margin-top: var(--bar-clear); }
.view.fill { overflow: hidden; display: flex; flex-direction: column; padding: var(--bar-clear) 12px 0; }
.view-inner { max-width: 1480px; margin: 0 auto; }
.page-title { font: 600 var(--fs-4)/1.15 var(--font-display); letter-spacing: -0.022em; margin: 8px 0 0; }
.page-sub { color: var(--text-3); margin: 4px 0 24px; }

/* task details + Claude: they slide open by width so the content column re-flows instead of being covered */
.inspector, .chat {
  flex: none; width: 0; overflow: hidden; display: flex; opacity: 0; visibility: hidden; box-shadow: none; border-width: 0;
  transition: width var(--t-layout) var(--ease), opacity var(--t) var(--ease), visibility 0s linear var(--t-layout);
}
.inspector { z-index: 36; }
.chat { z-index: 30; }
.app.insp-open .inspector, .app.chat-open .chat {
  opacity: 1; visibility: visible; border-width: 1px;
  transition: width var(--t-layout) var(--ease), opacity var(--t) var(--ease), visibility 0s;
}
.app.insp-open .inspector { width: var(--insp-w); }
.app.chat-open .chat { width: var(--chat-w); }
.app.insp-open .inspector, .app.chat-open .chat { box-shadow: var(--shadow), inset 0 1px 0 var(--rim); }
.insp-inner { width: var(--insp-w); flex: none; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.chat-inner { width: var(--chat-w); flex: none; height: 100%; display: flex; flex-direction: column; min-height: 0; position: relative; }
/* small windows: the panel floats over the content instead of squeezing it */
.app.insp-over .inspector { position: absolute; top: var(--gap); bottom: var(--gap); right: var(--insp-right); }
.app.chat-over .chat { position: absolute; top: var(--gap); bottom: var(--gap); right: var(--gap); }
.app.insp-over.insp-open .inspector, .app.chat-over.chat-open .chat { box-shadow: var(--shadow-lg), inset 0 1px 0 var(--rim); }
/* full-screen chat */
.app.chat-full .main { display: none; }
.app.chat-full.chat-open .chat { flex: 1 1 0; width: auto; min-width: 0; }
.app.chat-full .chat-inner { width: 100%; }

/* ---------- search ---------- */
.search {
  flex: 0 1 300px; min-width: 150px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; border-radius: 18px;
  background: var(--field); border: 1px solid var(--line); color: var(--text-3); box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast), flex-basis var(--t) var(--ease);
}
.search:hover { border-color: var(--line-2); }
.search:focus-within { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); flex-basis: 380px; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font-size: var(--fs-b); }
.search input:focus-visible { outline: none; }
.search input::placeholder { color: var(--text-3); }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search .kbd { flex: none; margin-right: 2px; }
.search:focus-within .kbd { opacity: 0; }
.search-clear { flex: none; width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; color: var(--text-2); background: var(--surface-3); transition: background-color var(--t-fast); }
.search-clear:hover { background: var(--line-2); color: var(--text); }
.search-clear .i { width: 12px; height: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-h); padding: 0 14px; border-radius: var(--r-pill);
  font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color var(--t-fast), transform var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn.sm { height: 28px; padding: 0 11px; font-size: var(--fs-m); }
.btn.primary { background: var(--primary-bg); color: var(--primary-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(16, 24, 40, 0.12); }
.btn.primary:hover:not(:disabled) { background: color-mix(in oklab, var(--primary-bg) 90%, #000); }
.btn.plain { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.btn.plain:hover:not(:disabled) { background: var(--surface-3); }
.btn.quiet { color: var(--text-2); padding: 0 10px; }
.btn.quiet:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.icon-btn { width: 34px; height: 34px; border-radius: 17px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); transition: background-color var(--t-fast), transform var(--t-fast), color var(--t-fast); }
.icon-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.icon-btn:active:not(:disabled) { transform: scale(0.94); }
.icon-btn.sm { width: 28px; height: 28px; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border-radius: var(--r-xs); font-size: var(--fs-s); color: var(--text-3); }
.link-btn:hover { background: var(--hover); color: var(--text); }
.link-btn .i { width: 13px; height: 13px; }

/* ---------- overview ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: var(--space); }
.stat { text-align: left; padding: 16px 20px; display: grid; gap: 4px; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.stat:hover { box-shadow: var(--shadow); }
.stat:active { transform: scale(0.985); }
.stat .label { font-size: var(--fs-m); color: var(--text-2); }
.stat .fig { font: 600 var(--fs-5)/1.05 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .ctx { font-size: var(--fs-s); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.alert .fig { color: var(--critical-ink); }

.section { padding: var(--pad); margin-bottom: var(--space); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 16px; }
.section-head h2 { font: 600 var(--fs-xl)/1.25 var(--font-display); letter-spacing: -0.01em; margin: 0; white-space: nowrap; }
.section-head .muted { font-size: var(--fs-m); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-s); color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* the week strip: the one rich element on the overview */
.week { display: grid; grid-template-columns: minmax(132px, 1.15fr) repeat(7, minmax(100px, 1fr)) minmax(132px, 1.15fr); gap: 8px; padding-bottom: 6px; }
.day { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.day-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; min-width: 0; }
.day-head .wd { font-size: var(--fs-s); color: var(--text-3); }
.day-head .dn { font: 600 var(--fs-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.day.today .dn { background: var(--accent); color: var(--on-accent); }
.day.today .wd { color: var(--accent-ink); font-weight: 500; }
.day-head .tag { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.day-head .big { font: 600 var(--fs-l)/1 var(--font-display); }
.day.overdue .big { color: var(--critical-ink); }
.day.weekend { background: var(--surface-2); border-radius: var(--r); }
.day.weekend .day-head { border-color: transparent; }
.chip {
  width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; row-gap: 2px; align-items: center;
  padding: 7px 8px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line);
  transition: background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.chip:hover { background: var(--surface); box-shadow: var(--shadow); }
.chip:active { transform: scale(0.98); }
.chip .dot { width: 6px; height: 6px; }
.chip .mono { color: var(--text-3); }
.chip .t { grid-column: 1 / -1; font-size: var(--fs-s); line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.more { font-size: var(--fs-s); color: var(--accent-ink); text-align: left; padding: 4px 8px; border-radius: var(--r-xs); }
.more:hover { background: var(--accent-soft); }
.empty-day { font-size: var(--fs-s); color: var(--text-3); padding: 6px 8px; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space); }
.bars { display: grid; gap: 4px; }
.bar-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 76px; align-items: center; gap: 12px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--r-sm); text-align: left; width: calc(100% + 16px); }
.bar-row:hover { background: var(--surface-2); }
.bar-row .name { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .val { text-align: right; font-size: var(--fs-s); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-row .val b { color: var(--text); font-weight: 500; font-size: var(--fs-b); }
.stack { display: flex; gap: 2px; height: 10px; }
.stack i { display: block; height: 100%; border-radius: 2px; background: var(--c); min-width: 3px; }
.stack i:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.stack i:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.person-row { grid-template-columns: 28px minmax(0, 1fr) 96px; }
.person-row .stack { height: 8px; }
.person-bar { display: grid; gap: 4px; min-width: 0; }

.feed { display: grid; }
.feed-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 10px 8px; margin: 0 -8px; border-radius: var(--r-sm); text-align: left; width: calc(100% + 16px); }
.feed-item:hover { background: var(--surface-2); }
.feed-item p { margin: 0; color: var(--text-2); font-size: var(--fs-m); }
.feed-item p b { color: var(--text); font-weight: 500; }
.feed-item time { font-size: var(--fs-s); color: var(--text-3); white-space: nowrap; }
.actor { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.actor.claude { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 2px; border-radius: calc(10px * var(--radius-scale)); background: var(--surface-3); gap: 2px; }
.seg button { height: 28px; padding: 0 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-m); display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--t-fast), color var(--t-fast); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 0.5px var(--line); }
.seg .c { color: var(--text-3); font-variant-numeric: tabular-nums; }
.pill { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-m); white-space: nowrap; transition: background-color var(--t-fast), border-color var(--t-fast); }
.pill:hover { border-color: var(--line-2); color: var(--text); }
.pill.on { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.pill .i { width: 14px; height: 14px; color: var(--text-3); }

/* menu popover (fixed position, so clipping panels never cut it off) */
.menu-wrap { position: relative; display: inline-flex; }
.menu { position: fixed; z-index: 60; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); padding: 6px; border-radius: var(--r); transform-origin: top left; animation: pop var(--t) var(--ease); }
.menu.up { transform-origin: bottom left; }
.menu.right { transform-origin: top right; }
.menu button { position: relative; width: 100%; min-height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--r-xs); text-align: left; color: var(--text); }
.menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-hint { margin-left: auto; }
.menu button:hover, .menu button:focus-visible { background: var(--accent); color: var(--on-accent); outline: none; }
.menu button:hover .i, .menu button:focus-visible .i, .menu button:hover .muted, .menu button:focus-visible .muted, .menu button:hover .status, .menu button:focus-visible .status { color: inherit; }
.menu button .check { margin-left: auto; }
.menu .sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu-empty { padding: 8px 10px; color: var(--text-3); font-size: var(--fs-m); }
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }

/* ---------- task rows ---------- */
.group { margin-bottom: 24px; }
.group-head { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; font: 600 var(--fs-m) var(--font); color: var(--text-2); }
.group-head .muted { font-weight: 400; }
.rows { overflow: hidden; }
.row {
  display: grid; grid-template-columns: 28px 64px minmax(0, 1fr) auto 104px 120px; align-items: center; gap: 12px;
  min-height: var(--row-min); padding: 8px 12px; border-top: 1px solid var(--line); cursor: default;
  transition: background-color var(--t-fast);
}
.row:first-child { border-top: 0; }
.row:hover { background: var(--surface-2); }
.row.sel { background: var(--accent-soft); }
.rows .row { content-visibility: auto; contain-intrinsic-size: auto var(--row-min); }   /* long lists only paint what is on screen */
.row.flash { animation: flash 2.4s var(--ease); }
@keyframes flash { 0%, 30% { background: var(--accent-soft); } }
.row .title { min-width: 0; }
.row .title div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .title small { display: block; font-size: var(--fs-s); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.is-done .title div { color: var(--text-3); }
.check-btn { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.check-btn:hover { border-color: var(--s-done); }
.check-btn:active { transform: scale(0.9); }
.check-btn.on { background: var(--s-done); border-color: var(--s-done); color: #fff; }
.check-btn .i { width: 14px; height: 14px; transform: scale(0.4); transition: transform var(--t) var(--spring); }
.check-btn.on .i { transform: none; }   /* a transition, not an animation: it pops when ticked, not on every render */
.due { font-size: var(--fs-s); color: var(--text-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.due.over { color: var(--critical-ink); font-weight: 500; }
.due.soon { color: var(--accent-ink); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--text-2); white-space: nowrap; }
.status .i { width: 14px; height: 14px; color: var(--sc); }
.avatars { display: flex; justify-content: flex-end; gap: 3px; }
.avatar {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 600 10px/1 var(--font); letter-spacing: 0.02em; background: var(--surface-3); color: var(--text-2); box-shadow: 0 0 0 2px var(--surface);
}
.avatar.lg { width: 56px; height: 56px; font-size: 19px; box-shadow: none; }
.avatar.md { width: 32px; height: 32px; font-size: 12px; box-shadow: none; }
.src { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast); }
.src:hover { border-color: var(--accent); color: var(--accent-ink); }
.src .mono { color: inherit; }
.empty { text-align: center; padding: 56px 24px; color: var(--text-3); margin-bottom: var(--space); }
.empty h3 { color: var(--text); font: 600 var(--fs-xl) var(--font-display); margin: 12px 0 4px; }
.empty p { max-width: 46ch; margin: 0 auto 16px; }
.empty > .i { width: 28px; height: 28px; }
.empty-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

.rules { padding: 16px 20px; margin-bottom: 20px; }
.rules.flush { margin-bottom: 0; }
.rules h3 { font: 600 var(--fs-m) var(--font); color: var(--text-2); margin: 0 0 8px; }
.rule { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-m); }
.rule:first-of-type { border-top: 0; }
.rule .by { color: var(--text-3); font-size: var(--fs-s); white-space: nowrap; }

/* ---------- views that fill the height (board, people, meetings): their panes scroll, not the page ---------- */
.fill-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fill-head { flex: none; }
.board { flex: 1; min-height: 0; display: flex; gap: 12px; align-items: stretch; padding-bottom: 12px; }
.col { flex: none; width: 272px; display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-lg); padding: 8px 4px 0 8px; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--line); transition: background-color var(--t-fast), box-shadow var(--t-fast); }
.col.drop-over { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.col-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; font-weight: 500; }
.col-head .i { width: 15px; height: 15px; color: var(--sc); }
.col-head .muted { font-weight: 400; font-variant-numeric: tabular-nums; }
.col-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 4px 10px 0; }
.col-empty { margin: 0; padding: 18px 8px; text-align: center; font-size: var(--fs-s); color: var(--text-3); border: 1px dashed var(--line-2); border-radius: var(--r); }
.bcard {
  flex: none; width: 100%; text-align: left; display: grid; gap: 8px; padding: 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); touch-action: none; user-select: none; transition: box-shadow var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.bcard:hover { box-shadow: var(--shadow); }
.bcard .top { display: flex; align-items: center; gap: 6px; }
.bcard .top .mono { color: var(--text-3); }
.bcard .t { font-size: var(--fs-m); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bcard.flash { animation: flash 2.4s var(--ease); }
.drag-source { opacity: 0.35; }
.drag-ghost { position: fixed; z-index: 100; pointer-events: none; margin: 0; box-shadow: var(--shadow-lg); will-change: transform; }

.split { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--list-w) var(--gap) minmax(0, 1fr); padding-bottom: 12px; }
.split .gutter { width: auto; }
.list-pane { padding: 6px; min-height: 0; }
.detail-pane { min-height: 0; padding-right: 2px; scrollbar-gutter: stable; }
.detail-inner { padding-bottom: 20px; }
.list-item { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); text-align: left; transition: background-color var(--t-fast); }
.list-item.meeting-item { grid-template-columns: 44px 1fr auto; }
.list-item:hover { background: var(--surface-2); }
.list-item[aria-current="true"] { background: var(--accent-soft); }
.li-text { min-width: 0; display: grid; }
.list-item .n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .r { font-size: var(--fs-s); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .c { font-size: var(--fs-s); color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.list-item .c.over { color: var(--critical-ink); }
.list-day { font-size: var(--fs-s); color: var(--text-3); padding: 12px 10px 4px; }
.detail-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: var(--pad); margin-bottom: var(--space); }
.dh-text { min-width: 0; flex: 1; }
.detail-head h2 { font: 600 var(--fs-3)/1.2 var(--font-display); letter-spacing: -0.015em; margin: 0; }
.detail-head p { margin: 2px 0 0; color: var(--text-3); }
.kpis { display: flex; gap: 24px; margin-left: auto; }
.kpis div { text-align: right; }
.kpis b { display: block; font: 600 var(--fs-3)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.kpis span { font-size: var(--fs-s); color: var(--text-3); }
.kpis .over b { color: var(--critical-ink); }

.reader { padding: 24px 28px; margin-bottom: 20px; }
.reader h2 { font: 600 var(--fs-3)/1.25 var(--font-display); letter-spacing: -0.015em; margin: 0 0 4px; }
.reader .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-3); font-size: var(--fs-m); margin-bottom: 20px; align-items: center; }
.reader h3 { font: 600 var(--fs-l) var(--font-display); margin: 28px 0 10px; }
.note-gap { margin-top: 24px; }
.md h4 { font: 600 var(--fs-b) var(--font); margin: 16px 0 6px; }
.md ul { margin: 0; padding-left: 20px; }
.md li { margin: 3px 0; color: var(--text-2); }
.md li.nested { margin-left: 18px; }
.md p { color: var(--text-2); margin: 0 0 8px; }
.transcript { display: grid; gap: 6px; font-size: calc(13.5px * var(--text-scale)); line-height: 1.55; }
.transcript p { content-visibility: auto; contain-intrinsic-size: auto 22px; margin: 0; display: grid; grid-template-columns: 112px 1fr; gap: 12px; }
.transcript .who { color: var(--text-3); font-size: var(--fs-s); padding-top: 2px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- inspector content ---------- */
.insp-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 10px 6px 20px; }
.insp-head .mono { font-size: var(--fs-s); color: var(--text-2); }
.insp-body { flex: 1; min-height: 0; padding: 4px 14px 24px 20px; scrollbar-gutter: stable; }
.title-edit { width: 100%; resize: none; border: 0; outline: 0; background: none; font: 600 var(--fs-2)/1.3 var(--font-display); letter-spacing: -0.012em; padding: 4px 0; margin: 0 0 12px; field-sizing: content; min-height: 2.6em; }
.title-edit:focus { box-shadow: 0 2px 0 var(--accent); }
.fields { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 20px; }
.fields > label { font-size: var(--fs-m); color: var(--text-3); }
.fields .val { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.person-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 2px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-m); }
.person-chip .avatar { width: 22px; height: 22px; box-shadow: none; font-size: 9px; }
.person-chip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); }
.person-chip button:hover { background: var(--surface-3); color: var(--text); }
.person-chip button .i { width: 12px; height: 12px; }
.input { height: var(--ctl-h); padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); outline: 0; min-width: 0; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.input { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.45; }
.input.w-full { width: 100%; }
.hint { font-size: var(--fs-s); color: var(--text-3); }
.sub-h { font: 600 var(--fs-m) var(--font); color: var(--text-2); margin: 24px 0 8px; display: flex; align-items: center; gap: 8px; }
.note { padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 8px; font-size: var(--fs-m); white-space: pre-wrap; overflow-wrap: anywhere; }
.note small { display: block; color: var(--text-3); font-size: var(--fs-s); margin-bottom: 4px; }
.right-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.hist { font-size: var(--fs-s); color: var(--text-3); display: grid; gap: 6px; }
.hist div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.hist b { color: var(--text-2); font-weight: 500; }
.insp-foot { flex: none; display: flex; gap: 8px; padding: 10px 14px 10px 20px; border-top: 1px solid var(--line); }

/* ---------- Claude panel ---------- */
.chat-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 8px 10px 14px; border-bottom: 1px solid var(--line); }
.chat-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-ink); }
.chat-avatar.lg { width: 48px; height: 48px; }
.chat-avatar.lg .i { width: 24px; height: 24px; }
.chat-title { display: grid; line-height: 1.2; min-width: 0; }
.chat-title b { font: 600 var(--fs-l) var(--font-display); }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--text-3); white-space: nowrap; }
.conn .dot { width: 7px; height: 7px; --c: var(--text-3); }
.conn.ok .dot { --c: var(--s-done); }
.conn.busy .dot { --c: var(--accent); animation: breathe 1.2s ease-in-out infinite; }
.conn.warn .dot { --c: var(--s-unknown-fill); }
.conn.off .dot { --c: var(--s-blocked); }
.conn.ok, .conn.warn, .conn.off { white-space: normal; min-width: 0; overflow-wrap: anywhere; } /* long provider and model names wrap */
.conn .dot { flex: none; }
@keyframes breathe { 50% { opacity: 0.35; } }
.chat-banner { flex: none; display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 10px 10px 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--s-unknown-fill) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--s-unknown-fill) 35%, transparent); font-size: var(--fs-m); }
.chat-banner > .i { color: var(--s-unknown); }
.chat-banner span { flex: 1; min-width: 0; }
.chat-body { flex: 1; min-height: 0; padding: 16px 6px 12px 14px; scrollbar-gutter: stable; }
.chat-col { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; align-content: start; }
.msg-user { justify-self: end; max-width: 86%; display: grid; justify-items: end; gap: 4px; }
.msg-user .bubble { background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 18px 18px 6px 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-user .meta { font-size: var(--fs-xs); color: var(--text-3); }
.msg-ai { display: grid; gap: 8px; min-width: 0; }
.msg-ai .text { line-height: 1.55; overflow-wrap: anywhere; }
.msg-ai.err .text { color: var(--critical-ink); }
.msg-ai .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-s); color: var(--text-3); opacity: 0.85; }
.msg-ai:not(:hover) .meta .link-btn { opacity: 0.7; }
.notice { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: var(--fs-s); color: var(--text-3); }
.notice .i { width: 14px; height: 14px; margin-top: 2px; color: var(--s-unknown); }
.rich p { margin: 0 0 8px; }
.rich p:last-child { margin-bottom: 0; }
.rich ul, .rich ol { margin: 0 0 8px; padding-left: 20px; }
.rich li { margin: 3px 0; }
.rich strong { font-weight: 600; }
.rich code { font: var(--fs-s) var(--mono); background: var(--surface-3); padding: 1px 5px; border-radius: 5px; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tool { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-s); color: var(--text-2); max-width: 100%; }
.tool span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool .i { width: 14px; height: 14px; color: var(--text-3); }
.tool.run .i { color: var(--accent-ink); animation: spin 0.9s linear infinite; }
.tool.ok .i { color: var(--s-done); }
.tool.bad { color: var(--critical-ink); }
.tool.bad .i { color: var(--critical-ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.idlink { font: var(--fs-s) var(--mono); color: var(--accent-ink); background: var(--accent-soft); padding: 0 5px; border-radius: 5px; vertical-align: 0.5px; }
.idlink:hover { text-decoration: underline; }
.caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; background: var(--accent); border-radius: 2px; vertical-align: -2px; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.thinking { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: var(--fs-m); }
.pulse-dots { display: inline-flex; gap: 3px; }
.pulse-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: breathe 1.2s ease-in-out infinite; }
.pulse-dots i:nth-child(2) { animation-delay: 0.15s; }
.pulse-dots i:nth-child(3) { animation-delay: 0.3s; }
.chat-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 28px 8px 8px; }
.chat-empty h3 { margin: 6px 0 0; font: 600 var(--fs-xl) var(--font-display); }
.chat-empty p { margin: 0 0 10px; color: var(--text-2); max-width: 40ch; }
.suggest { display: grid; gap: 8px; width: 100%; }
.suggest button { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-m); color: var(--text); text-align: left; transition: background-color var(--t-fast), border-color var(--t-fast); }
.suggest button:hover { border-color: var(--accent); background: var(--surface); }
.suggest button .i { color: var(--accent-ink); width: 15px; height: 15px; }
.chat-skel { display: grid; gap: 12px; padding: 8px 0; }
.chat-skel i, .skel-lines i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.chat-skel i:nth-child(1) { width: 60%; justify-self: end; height: 32px; border-radius: 16px; }
.chat-skel i:nth-child(2) { width: 90%; }
.chat-skel i:nth-child(3) { width: 72%; }
.skel-lines { display: grid; gap: 10px; margin-top: 24px; }
.skel-lines i:nth-child(2n) { width: 82%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.jump { position: absolute; left: 50%; bottom: 150px; translate: -50% 0; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: var(--fs-s); background: var(--material); border: 1px solid var(--line-2); box-shadow: var(--shadow); color: var(--text); animation: pop var(--t) var(--ease); }
.composer { flex: none; padding: 8px 12px 10px; display: grid; gap: 6px; }
.ctx-chip { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); color: var(--text-3); padding: 0 4px; }
.ctx-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-chip .i { width: 13px; height: 13px; }
.composer-box { border-radius: calc(18px * var(--radius-scale)); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer textarea { display: block; width: 100%; min-height: 44px; max-height: 180px; resize: none; border: 0; outline: 0; background: none; padding: 11px 14px 4px; line-height: 1.45; field-sizing: content; }
.composer textarea:focus-visible { outline: none; }
.composer textarea::placeholder { color: var(--text-3); }
.composer-actions { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px; }
.composer-hint { margin: 0; text-align: center; font-size: var(--fs-xs); color: var(--text-3); }
.composer-hint .kbd { height: 17px; min-width: 0; font-size: 10px; }
.round { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); flex: none; transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.round:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.round:active:not(:disabled) { transform: scale(0.92); }
.round .i { width: 18px; height: 18px; }
.round.send { background: var(--accent); color: var(--on-accent); }
.round.send:disabled { background: var(--surface-3); color: var(--text-3); opacity: 1; }
.round.stop { background: var(--text); color: var(--surface); }
.round.on { background: var(--accent); color: var(--on-accent); }
.round.on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent); animation: ring 1.3s var(--ease) infinite; }
@keyframes ring { from { opacity: 0.8; transform: scale(0.92); } to { opacity: 0; transform: scale(1.25); } }
.toggle { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 14px; color: var(--text-3); font-size: var(--fs-s); transition: background-color var(--t-fast), color var(--t-fast); }
.toggle .i { width: 14px; height: 14px; }
.toggle:hover { background: var(--hover); color: var(--text); }
.toggle.on { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- settings ---------- */
.settings { max-width: 980px; }
.set-tabs { margin-bottom: 20px; }
.set-tabs button { height: 32px; }
.set-tabs .i { width: 15px; height: 15px; }
.set-card { padding: var(--pad); margin-bottom: var(--space); }
.set-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.set-head > div { flex: 1; }
.set-head h2 { font: 600 var(--fs-xl)/1.25 var(--font-display); margin: 0; letter-spacing: -0.01em; }
.set-head p { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-m); }
.set-row { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.set-head + .set-row, .set-head + .wp-grid + .set-row { border-top: 0; }
.set-label { display: grid; gap: 2px; }
.set-label label, .set-label b { font-weight: 500; }
.set-label small { color: var(--text-3); font-size: var(--fs-s); }
.set-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.set-block { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.set-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 4px 0 var(--space); }
.set-card .set-actions { margin-bottom: 0; padding-top: 8px; }
.set-actions.start { justify-content: flex-start; }
.err { color: var(--critical-ink); font-size: var(--fs-m); margin: 0 0 12px; }
.switch { position: relative; width: 42px; height: 26px; border-radius: 13px; flex: none; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--t) var(--ease); }
.switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform var(--t) var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] span { transform: translateX(16px); }
.slider { display: flex; align-items: center; gap: 12px; width: min(380px, 100%); }
.slider input { flex: 1; min-width: 0; height: 6px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--p), var(--surface-3) var(--p)); outline-offset: 6px; }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.12); transition: transform var(--t-fast); }
.slider input:active::-webkit-slider-thumb { transform: scale(1.12); }
.slider output { min-width: 56px; text-align: right; color: var(--text-2); font-size: var(--fs-s); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); display: grid; place-items: center; transition: transform var(--t-fast); }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-checked="true"], .swatch.custom.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); }
.swatch.custom { color: #fff; overflow: hidden; }
.swatch.custom:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.swatch.custom .i { width: 14px; height: 14px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); pointer-events: none; }
.swatch input[type="color"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.color-trio { display: flex; gap: 8px; }
.color-trio input { width: 48px; height: 32px; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; padding: 8px 0 12px; }
.wp-tile { display: grid; gap: 6px; font-size: var(--fs-m); color: var(--text-2); text-align: left; padding: 4px; border-radius: var(--r); transition: background-color var(--t-fast); }
.wp-tile:hover { background: var(--hover); }
.wp-swatch { height: 64px; border-radius: var(--r-sm); background: var(--g); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
:root[data-theme="dark"] .wp-swatch { background: var(--gd); }
.wp-tile[aria-checked="true"] { color: var(--text); font-weight: 500; }
.wp-tile[aria-checked="true"] .wp-swatch { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding-top: 6px; }
.preset { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); transition: border-color var(--t-fast), background-color var(--t-fast); }
.preset:hover { border-color: var(--accent); background: var(--surface); }
.preset span { font-size: var(--fs-s); color: var(--text-3); }
.edit-head, .edit-row { display: grid; gap: 8px; align-items: center; padding: 6px 0; }
.edit-head { font-size: var(--fs-s); color: var(--text-3); padding-top: 4px; }
.edit-row { border-top: 1px solid var(--line); }
.edit-row .input { width: 100%; }
.brand-row { grid-template-columns: 30px minmax(120px, 1fr) 76px minmax(140px, 2fr) 64px; }
.person-row-edit { grid-template-columns: minmax(120px, 1.3fr) minmax(70px, 0.7fr) minmax(100px, 1.1fr) minmax(130px, 1.3fr) minmax(110px, 1.2fr) auto 64px; }
.hol-row { grid-template-columns: 170px minmax(0, 1fr) auto; }
.mono-in { font-family: var(--mono); text-transform: uppercase; }
.row-err { grid-column: 1 / -1; margin: 0; }
.check-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-m); color: var(--text-2); white-space: nowrap; }
.check-label input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.shortcuts { display: grid; gap: 2px; }
.shortcuts > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.shortcuts > div:first-child { border-top: 0; }
.keys { display: inline-flex; gap: 4px; }

/* ---------- sheet (modal) ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); animation: fade var(--t) var(--ease); }
.sheet {
  position: fixed; z-index: 51; left: 50%; top: 14vh; width: min(560px, calc(100vw - 48px)); max-height: calc(100vh - 18vh); overflow: auto; translate: -50% 0;
  border-radius: var(--r-xl); padding: 24px; overscroll-behavior: contain; animation: materialize var(--t-slow) var(--ease);
}
.sheet h2 { font: 600 var(--fs-2) var(--font-display); margin: 0 0 16px; letter-spacing: -0.012em; }
.sheet .fields { grid-template-columns: 88px minmax(0, 1fr); }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
@keyframes fade { from { opacity: 0; } }
@keyframes materialize { from { opacity: 0; transform: scale(0.96) translateY(8px); } }

/* ---------- toast & tooltip ---------- */
.toasts { position: fixed; z-index: 70; left: 50%; bottom: 28px; translate: -50% 0; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 22px; font-size: var(--fs-m); max-width: min(520px, calc(100vw - 32px)); animation: rise var(--t-slow) var(--ease); }
.toast .i { color: var(--accent-ink); }
.toast.error .i { color: var(--critical-ink); }
.toast-pad { width: 6px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.tip { position: fixed; z-index: 80; pointer-events: none; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-s); max-width: 280px; line-height: 1.4; animation: fade var(--t-fast) ease; }
.tip b { display: block; font-weight: 500; font-size: var(--fs-m); }
.tip.side { translate: 0 -50%; display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
.tip.side b { display: inline; }
.tip-count { color: var(--text-3); font-variant-numeric: tabular-nums; }

.splash { position: fixed; inset: 0; display: grid; place-items: center; color: var(--text-3); text-align: center; background: linear-gradient(var(--wp-angle), var(--wp-1), var(--wp-2) 52%, var(--wp-3)); }
.splash h3 { color: var(--text); font: 600 var(--fs-xl) var(--font-display); margin: 12px 0 6px; }
.splash p { max-width: 42ch; margin: 0 auto 16px; }
.splash-logo { width: 48px; height: 48px; border-radius: 12px; animation: breathe 1.6s ease-in-out infinite; }
.splash-icon .i { width: 32px; height: 32px; }

/* ---------- responsive: container queries, so each region adapts to its own width, not the window's ---------- */
.main { container: main / inline-size; }
.view { container: view / inline-size; }
.rows { container-type: inline-size; }
.view-inner { container: page / inline-size; }
@container main (max-width: 720px) { .tb-title .sub { display: none; } }
@container main (max-width: 600px) {
  .new-btn { width: 36px; padding: 0; }
  .new-btn span { display: none; }
  .search { flex: 0 1 36px; min-width: 36px; padding: 0 9px; cursor: text; }
  .search .kbd { display: none; }
  .search:focus-within, .search.has-value { flex: 1 1 220px; padding: 0 6px 0 12px; }
}
@container page (max-width: 760px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } .stats { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); } }
@container view (max-width: 700px) {
  .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(150px, 36%) var(--gap) minmax(0, 1fr); }
  .split .gutter { pointer-events: none; }
  .split .gutter::after { display: none; }
  .kpis { margin-left: 0; }
}
@container (max-width: 680px) {
  .row { grid-template-columns: 28px 60px minmax(0, 1fr) auto 92px; }
  .row .status { display: none; }
}
@container (max-width: 460px) {
  .row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; }
  .row > .mono, .row .avatars { display: none; }
}
@container view (max-width: 520px) { .transcript p { grid-template-columns: 1fr; gap: 0; } .transcript .who { text-align: left; } }
@media (max-width: 760px) {
  .set-row { grid-template-columns: minmax(0, 1fr); }
  .brand-row, .person-row-edit, .hol-row { grid-template-columns: 1fr 1fr; }
  .edit-head { display: none; }
}

/* ---------- accessibility preferences ---------- */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .panel { background: var(--surface) !important; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(16, 19, 26, 0.3); --line-2: rgba(16, 19, 26, 0.5); --edge: rgba(16, 19, 26, 0.5); --text-3: var(--text-2); }
}

/* settings editors: Save appears only once a row has changes */
.edit-row .btn.primary:disabled { visibility: hidden; }
.brand-row .swatch.custom.on { width: 24px; height: 24px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }

/* AI provider, cloud and import/export settings */
.key-in { width: min(100%, 340px); font-family: var(--mono); }
.key-in::placeholder, .model-in::placeholder { font-family: system-ui, sans-serif; letter-spacing: 0; }
.model-in { width: min(100%, 300px); font-family: var(--mono); }
.code-in { width: 9em; font-family: var(--mono); letter-spacing: 0.2em; }
.check-line { margin: 4px 0 0; font-size: var(--fs-s); color: var(--text-2); }
.check-line.ok { color: var(--s-done); }
.check-line.bad, .warn-hint { color: var(--critical-ink); }
.link-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.link-names { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.link-names .i { color: var(--text-3); flex: none; }
.import-preview { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.import-preview p { margin: 0; }
.mini-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: var(--fs-m); }
.mini-row:first-child { border-top: 0; }
.mini-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-chip .dot.online { --c: var(--s-done); margin-left: 6px; }
.cloud-form { display: block; }
/* each settings card isolates its own stacking, so the card with an open menu must sit above the cards after it */
.set-card:has(.menu) { z-index: 2; }

/* online version: sign-in page (ui/login.html) */
.login { min-height: 100dvh; display: grid; place-content: center; gap: 14px; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.login-card { width: min(380px, calc(100vw - 40px)); display: grid; gap: 14px; padding: 28px; text-align: center; justify-items: center; }
.login-card h1 { margin: 2px 0 0; font-size: var(--fs-xl, 1.5rem); }
.login-card p { margin: 0; }
.login-fields { width: 100%; display: grid; gap: 6px; text-align: left; }
.login-fields label { font-weight: 500; font-size: var(--fs-m); margin-top: 4px; }
.login-card .btn { width: 100%; justify-content: center; }
.login-card .err { margin: 0; }
.login-foot { text-align: center; max-width: 380px; }
.install-steps { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }

/* a panel floating over the content (small windows, tablets) is solid, so the page never shows through it */
:root .app.chat-over .chat, :root .app.insp-over .inspector, :root[data-glass="on"] .app.chat-over .chat::before, :root[data-glass="on"] .app.insp-over .inspector::before { background: var(--panel-solid); }

/* ---------- phones (the installed online app on iPhone and Android): a tab bar, a slide-out menu, full-screen sheets ---------- */
.tabbar { display: none; }
.app.phone { padding: calc(env(safe-area-inset-top) + 6px) 6px 0; }
.app.phone .gutter { display: none; }
.app.phone .sidebar { position: absolute; z-index: 60; top: calc(env(safe-area-inset-top) + 6px); bottom: calc(env(safe-area-inset-bottom) + 6px); left: 6px; width: min(300px, 86vw); margin: 0; transform: translateX(calc(-100% - 12px)); visibility: hidden; transition: transform var(--t-layout) var(--ease), visibility 0s linear var(--t-layout); }
.app.phone.side-peek .sidebar { transform: none; visibility: visible; width: min(300px, 86vw); margin: 0; box-shadow: var(--shadow-lg), inset 0 1px 0 var(--rim); transition: transform var(--t-layout) var(--ease), visibility 0s; }
.app.phone .main { --bar-clear: 64px; }
.app.phone .view { padding: var(--bar-clear) 4px calc(84px + env(safe-area-inset-bottom)); }
.app.phone .view.fill { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.app.phone .tabbar { display: flex; position: fixed; z-index: 45; left: 6px; right: 6px; bottom: calc(6px + env(safe-area-inset-bottom)); height: 62px; padding: 0 4px; justify-content: space-around; align-items: center; }
.tabbar button { flex: 1; display: grid; justify-items: center; gap: 3px; padding: 6px 0; font-size: 11px; font-weight: 500; color: var(--text-3); border-radius: var(--r); }
.tabbar button[aria-current="true"] { color: var(--accent-ink); }
.tabbar button:active { background: var(--hover); }
.tabbar .i { width: 22px; height: 22px; }
.app.phone.chat-open .chat, .app.phone.insp-open .inspector { position: fixed; inset: 0; width: auto; border-radius: 0; border-width: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.app.phone .chat-inner, .app.phone .insp-inner { width: 100%; }
.app.phone.chat-open .chat { z-index: 50; }
.app.phone.insp-open .inspector { z-index: 55; }
:root .app.phone :is(.chat, .inspector, .sidebar, .tabbar), :root[data-glass="on"] .app.phone :is(.chat, .inspector, .sidebar, .tabbar)::before { background: var(--panel-solid); }
.app.phone .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
.app.phone .toolbar h1 { font-size: var(--fs-l); }
.login [hidden] { display: none !important; }
/* online version: Settings > Team */
.member-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto auto auto; }
.member-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono-sm { font-family: var(--mono); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.invite-made { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.invite-made .hint { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .member-row { grid-template-columns: 1fr auto; } }
.btn.danger { background: var(--critical-ink); border-color: var(--critical-ink); color: #fff; }
/* the API key: a text field shown as dots, so browsers never treat Settings as a sign-in form and autofill a saved password into it (and the email into Search) */
.masked { -webkit-text-security: disc; text-security: disc; }
.masked:placeholder-shown { -webkit-text-security: none; text-security: none; }