/* IBM Plex Sans and IBM Plex Serif: © IBM Corp., SIL Open Font License 1.1 (static/fonts/IBM-PLEX-LICENSE.txt). Served from Axork itself. */
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("fonts/ibm-plex-serif-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* Atkinson Hyperlegible (the Axork wordmark only): © Braille Institute of America, SIL OFL 1.1 (static/fonts/ATKINSON-HYPERLEGIBLE-LICENSE.txt). */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* axork AI. Colors are the tokens below: change --accent to rebrand. */

:root {
  /* Apple-inspired materials: soft gray stage, white cards, system blue. */
  --bg: #F5F5F7;
  --sidebar: #F0F0F2;
  --surface: #FFFFFF;
  --ink: #1D1D1F;
  --muted: #636366;
  --faint: #6A6A6F;          /* 4.5:1 on every light ground (C157); theme.js repaints these */
  --line: #D2D2D7;
  --hover: rgba(0, 0, 0, 0.04);
  --accent: #4A55C8;
  --accent-ink: #FFFFFF;
  --accent-soft: #ECEEFB;
  --bubble: #F2F2F7;
  --danger: #B42318;
  --danger-ink: #FFFFFF;
  --ok: #137A3E;
  --cost-1: #137A3E;         /* W8-P cost tiers, light to heavy: 4.5:1 on every light ground; theme.js repaints these */
  --cost-2: #02708B;
  --cost-3: #8A5A00;
  --cost-4: #B23A02;
  --cost-5: #A21CAF;
  --signal: #0B6E66;         /* Synaram keypad's teal signal and violet (dialpad.js); theme.js repaints these */
  --signal-ink: #FFFFFF;
  --signal-soft: #E2F1EF;
  --violet: #6D28D9;
  --plan-resting: #475569;   /* Plan Facts sheet spines (plan-sheet.js), one data colour per plan family: white text reads at 4.5:1 on each */
  --plan-basal: #6D28D9;
  --plan-pulse: #1D4ED8;
  --plan-myelin: #0F7A4B;
  --plan-plexus: #B42318;
  --plan-ink: #FFFFFF;
  --ps-paper: #FFFFFF;        /* the Plan Facts sheet is a printed label: black on white in every theme, like Purchase Facts */
  --ps-line: #000000;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --chrome-h: 52px;
  --sidebar-w: 260px;
  --thread-center: 50%;     /* Synaram split. Settings may nudge 34–66%. Never the edge. */
  --thread-gutter: 8%;
  --thread-gap: 12px;
  --tc-ref: 430;            /* iPhone 15 Pro Max CSS px — video width follows the bubble, not the screen */
  --tc-bubble-ratio: 0.76;
  --tc-gutter: 16px;

  /* ---- The "Apple x Fluent" look (docs/design.md). Apple decides how it feels (calm, round, frosted, soft wide
     shadows); Fluent how it is organised (a rail of places, Mica stage, acrylic panes, segmented controls, a 1 px edge
     highlight, a two-ring focus). theme.js repaints every colour here for each of the 101 shades of both tints. */
  --line-strong: #BEBEC4;                           /* a firmer rule than --line: dividers in bars, slider tracks */
  --accent-tint: rgba(74, 85, 200, 0.10);           /* a wash of the accent: the Ask Axork strip, selected tiles */
  --mica: radial-gradient(1200px 700px at 8% -10%, rgba(0, 100, 204, 0.10), transparent 60%),
          radial-gradient(900px 600px at 100% 110%, rgba(109, 40, 217, 0.08), transparent 60%),
          linear-gradient(180deg, #F4F6FA, #EEF1F6);
  --glass: rgba(255, 255, 255, 0.66);               /* acrylic panes: the list pane, command bars, the composer */
  --glass-strong: rgba(255, 255, 255, 0.82);        /* tiles and tooltips */
  --glass-opaque: rgba(255, 255, 255, 0.985);       /* anything drawn over text: menus, flyouts, the model sheet */
  --glass-blur: blur(22px) saturate(1.35);          /* decoration only: every pane reads without it */
  --edge: inset 0 0 0 1px rgba(255, 255, 255, 0.55); /* Fluent's 1 px highlight on every raised surface */
  --shadow-1: 0 1px 2px rgba(15, 20, 40, 0.06), 0 2px 8px rgba(15, 20, 40, 0.05);     /* a resting card */
  --shadow-2: 0 2px 6px rgba(15, 20, 40, 0.06), 0 16px 40px rgba(15, 20, 40, 0.10);   /* a floating panel */
  --shadow-3: 0 8px 20px rgba(15, 20, 40, 0.10), 0 32px 80px rgba(15, 20, 40, 0.16);  /* a flyout or sheet */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px; --pill: 999px;   /* 12 controls and rows, 16 cards, 20 sheets */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --rail-w: 88px;            /* capsule 56 + inset 12 + air so words never sit under it */
  --rail-gutter: 0px;        /* live right gutter while the capsule or a floating bell is out */
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);   /* the two-ring focus (style.css, last section) */
  --t-fast: 120ms; --t: 200ms; --t-slow: 320ms; --ease: cubic-bezier(0.2, 0.8, 0.2, 1);  /* hover · flyout · sheet */
  /* Type scale: page title, section title, pane title, command-bar title, body, list row, secondary, meta, eyebrow. */
  --fs-title: 34px; --fs-section: 24px; --fs-pane: 20px; --fs-bar: 17px; --fs-body: 15.5px; --fs-row: 14.5px;
  --fs-small: 13.5px; --fs-meta: 12.5px; --fs-eyebrow: 12px;

  --wordmark: "Atkinson Hyperlegible", "IBM Plex Sans", sans-serif;
  --display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --text: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ui-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --sidebar: #1C1C1E;
    --surface: #2C2C2E;
    --ink: #F5F5F7;
    --muted: #A1A1A6;
    --faint: #9A9AA0;
    --line: #3A3A3C;
    --hover: rgba(255, 255, 255, 0.08);
    --accent: #A5ADFF;
    --accent-ink: #15172A;
    --accent-soft: #232852;
    --bubble: #1C1C1E;
    --danger: #FF6961;
    --danger-ink: #151515;
    --ok: #30D158;
    --cost-1: #4ADE80;
    --cost-2: #22D3EE;
    --cost-3: #FBBF24;
    --cost-4: #FB923C;
    --cost-5: #F472B6;
    --signal: #47E5C4;
    --signal-ink: #151515;
    --signal-soft: #0F2E29;
    --violet: #A99BFF;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.45);
    --line-strong: #4A4A4E;
    --accent-tint: rgba(165, 173, 255, 0.16);
    --mica: radial-gradient(1000px 600px at 10% -10%, rgba(64, 156, 255, 0.16), transparent 60%),
            radial-gradient(900px 600px at 100% 110%, rgba(169, 155, 255, 0.12), transparent 60%),
            linear-gradient(180deg, #121419, #0B0C10);
    --glass: rgba(34, 36, 44, 0.62);
    --glass-strong: rgba(34, 36, 44, 0.86);
    --glass-opaque: rgba(34, 36, 44, 0.985);
    --edge: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 32px 80px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

h1, h2, h3 { font-family: var(--display); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.47 var(--text);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--accent-soft); }
/* NK-TR-2026-10 §7: keyboard focus ring (sky), 2px offset. */
:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 980px;
  background: transparent;
  color: var(--muted);
  transition: background .12s ease, color .12s ease;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }

.glyph, .avatar-ai {
  flex: none;
  background: url("favicon.svg") center / contain no-repeat;
}

.primary {
  border: 0;
  border-radius: 980px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  padding: 10px 16px;
}
.primary:disabled { opacity: 0.6; cursor: default; }
.ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.ghost:hover { border-color: var(--faint); }
.wide { width: 100%; }
.link { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ===================================================================== frame */

.shell {
  height: calc(100 * var(--vh, 1vh));
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}
.shell.collapsed { grid-template-columns: minmax(0, 1fr); }
.shell.collapsed .sidebar { display: none; }

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 10px 10px 0;
  overflow-y: auto;
}

.side-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px 6px; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font: 800 20px/1 var(--display);
  letter-spacing: -0.02em;
  border-radius: 10px;
}
.mark-name { text-transform: none; }   /* brand names in name case, never capitals (owner, 28 Oct 2026) */
.mark .glyph { width: 28px; height: 28px; border-radius: 9px; }

.new-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 9px 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}
.new-chat:hover { border-color: var(--faint); }
.new-chat svg { color: var(--accent); }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--faint);
}
.search:focus-within { border-color: var(--faint); color: var(--muted); }
.search svg { width: 17px; height: 17px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 8px 0; font-size: 14.5px; }
.search input::placeholder { color: var(--faint); }

.chat-list { flex: 1 0 240px; overflow-y: auto; margin: 0 -4px; padding: 0 4px 12px; }   /* never squeezed away: on short screens the sidebar scrolls instead */

.group-label {
  margin: 14px 10px 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--faint);
}

.chat-item { display: flex; align-items: center; border-radius: 10px; }
.chat-item:hover, .chat-item.active { background: var(--hover); }
.chat-item.active { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.chat-item a {
  flex: 1;
  min-width: 0;
  padding: 8px 4px 8px 10px;
  color: inherit;
  text-decoration: none;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 10px;
}
.chat-item .icon-btn { width: 30px; height: 30px; opacity: 0; }
.chat-item:hover .icon-btn, .chat-item.active .icon-btn, .chat-item .icon-btn:focus-visible { opacity: 1; }
.list-empty { margin: 16px 10px; font-size: 14px; color: var(--faint); }

.side-foot { border-top: 1px solid var(--line); margin: 0 -10px; padding: 10px; flex: none; position: sticky; bottom: 0; z-index: 2; background: var(--sidebar); }

.account-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 8px;
  text-align: left;
}
.account-btn:hover { background: var(--hover); }
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
.who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.who b, .who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who b { font-weight: 600; font-size: 14.5px; }
.who small { color: var(--muted); font-size: 12.5px; }

.guest-card { padding: 4px 4px 2px; }
.guest-card p { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.guest-card p b { color: var(--ink); font-weight: 600; }
.meter { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 0 0 12px; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.guest-actions { display: flex; gap: 8px; }
.guest-actions .primary { flex: 1.3; padding: 9px 8px; font-size: 14px; white-space: nowrap; }
.guest-actions .ghost { flex: 1; justify-content: center; border-radius: 12px; padding: 9px 8px; white-space: nowrap; }

.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(10, 14, 30, 0.45); }

.main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 56px;
  padding: 10px 12px;
}
.topbar #open-sidebar { display: none; }
.collapsed .topbar #open-sidebar { display: inline-grid; }
.topbar #new-chat-top { display: none; }
.collapsed .topbar #new-chat-top { display: inline-grid; }

.chat-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-left: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===================================================================== conversation */

.thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.column { max-width: 800px; margin: 0 auto; padding: 8px 24px 28px; }

/* Before the first message, the greeting and message box sit in the middle of the screen. */
.main.empty .thread { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: visible; }
.main.empty .column { width: 100%; padding-bottom: 20px; }
.main.empty .dock { flex: 1 1 0; }
.main:not(.empty) .welcome, .main:not(.empty) .suggestions { display: none; }

.welcome { text-align: center; }
.greeting {
  margin: 0;
  font: 800 clamp(34px, calc(5.5 * var(--vw, 1vw)), 52px)/1.05 var(--display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.035em;
}
.caret {
  display: inline-block;
  width: 0.09em;
  height: 0.78em;
  margin-left: 0.08em;
  vertical-align: -0.04em;
  background: var(--accent);
  border-radius: 0.015em;
  animation: blink 1.1s steps(1) infinite;
}
.welcome-sub { margin: 12px 0 0; font-size: 18px; color: var(--muted); }

.messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 30px; }

.msg-user {
  align-self: flex-end;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
/* A one-word prompt is a pill; long prompts wrap at 75% of the column. */
.msg-user .bubble {
  width: fit-content;
  max-width: 75%;
  box-sizing: border-box;
  background: var(--bubble);
  padding: 10px 16px;
  border-radius: 22px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}
.msg-user .bubble:not(:only-child) { border-bottom-right-radius: 8px; }
.msg-user.drop-here .bubble { outline: 2px dashed var(--accent); outline-offset: 3px; }
.msg-user .msg-files { max-width: 75%; }

.msg-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.file-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 13.5px;
}
.file-pill span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-pill.more { padding: 6px 12px; color: var(--muted); }
.thumb {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: zoom-in;
}

.ext {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 700 9.5px/1 var(--text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ext[data-kind="pdf"] { background: color-mix(in srgb, #E2483D 16%, var(--surface)); color: #C8372D; }
.ext[data-kind="sheet"] { background: color-mix(in srgb, #1E9A57 16%, var(--surface)); color: #18834A; }
.ext[data-kind="slides"] { background: color-mix(in srgb, #E07A1F 18%, var(--surface)); color: #B9600F; }
.ext[data-kind="code"] { background: var(--hover); color: var(--muted); }

.msg-ai { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
.avatar-ai { width: 28px; height: 28px; border-radius: 9px; margin-top: 1px; }
.model-label { margin: 2px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }

.body { overflow-wrap: anywhere; }
.body > :first-child { margin-top: 0; }
.body > :last-child { margin-bottom: 0; }
.body p, .body ul, .body ol, .body blockquote, .body .code, .body .table-wrap { margin: 0 0 0.8em; }
.body ul, .body ol { padding-left: 1.4em; }
.body ul { list-style: disc; }
.body ol { list-style: decimal; }
.body li { margin: 0.25em 0; }
.body h3, .body h4, .body h5, .body h6 { margin: 1.1em 0 0.4em; line-height: 1.3; font-weight: 600; }
.body h3 { font-size: 1.2em; }
.body h4 { font-size: 1.07em; }
.body h5, .body h6 { font-size: 1em; }
.body strong { font-weight: 600; }
.body a { color: var(--accent); text-underline-offset: 3px; }
.body hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
.body blockquote { border-left: 3px solid var(--line); padding-left: 14px; color: var(--muted); }
.body code { font: 0.88em/1.4 var(--mono); background: var(--accent-soft); padding: 0.12em 0.35em; border-radius: 6px; }
.body .code { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.copy-code { border: 0; border-radius: 8px; background: transparent; color: var(--muted); padding: 3px 8px; font-size: 12.5px; font-weight: 600; }
.copy-code:hover { background: var(--hover); color: var(--ink); }
.body pre { margin: 0; padding: 12px 14px; overflow-x: auto; }
.body pre code { background: none; padding: 0; font-size: 0.86em; line-height: 1.6; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.body table { border-collapse: collapse; width: 100%; font-size: 0.94em; }
.body th, .body td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.body th { background: var(--hover); font-weight: 600; }
.body tr:last-child td { border-bottom: 0; }

.body.streaming > :last-child::after,
.body.streaming:empty::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.15em;
  background: var(--accent);
  border-radius: 2px;
  animation: blink 1s steps(1) infinite;
}

/* Impulse gauge: estimated progress of one reply. The bar is painted from JS (CSSOM), never an inline style. */
.impulse-meter { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.impulse-bar { flex: 0 0 120px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.impulse-bar i { display: block; height: 100%; width: 1%; background: var(--accent); transition: width 0.4s ease; }
.impulse-text { min-width: 0; }

.status-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14.5px; min-height: 26px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: hop 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }

.ai-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin-top: 4px; }
.ai-images figure { margin: 0; position: relative; }
.ai-images img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: zoom-in;
}

.actions { display: flex; gap: 2px; margin: 8px 0 0 -8px; }
.act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.act:hover { background: var(--hover); color: var(--ink); }
.act svg { width: 16px; height: 16px; }
.stopped-note { margin-top: 6px; font-size: 13px; color: var(--faint); }

.card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.card p { margin: 0; flex: 1 1 240px; }
.card .detail { flex-basis: 100%; order: 5; font: 12.5px/1.5 var(--mono); color: var(--muted); }
.card.error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.card.notice { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.card-actions { display: flex; gap: 8px; }
.card-actions .primary { padding: 8px 14px; font-size: 14px; }

/* ===================================================================== message box */

.dock { padding: 0 16px calc(12px + env(safe-area-inset-bottom)); }

.drift-card {
  max-width: 768px;
  margin: 0 auto 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
  box-shadow: var(--shadow);
}
.drift-note { margin: 0 0 6px; font-weight: 600; font-size: 14px; }
/* W9-X: long chats send a summary of their older part (engram.py) */
.history-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 auto 10px; max-width: 760px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; }
.history-note[hidden] { display: none; }
.drift-summary { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.drift-ask { margin: 0 0 10px; font-size: 13.5px; }
.drift-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.drift-actions .primary, .drift-actions .ghost { padding: 7px 12px; font-size: 13.5px; border-radius: 12px; }

.composer {
  max-width: 768px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 10px 10px 8px 14px;
  transition: border-color 0.15s ease;
}
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

.composer textarea {
  display: block;
  width: 100%;
  max-height: 40vh;   /* NK-TR-2026-10: grow with content, then scroll */
  padding: 6px 4px 8px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font-size: 16px;   /* 16px keeps iPhones from zooming in on tap */
  line-height: 1.5;
}
.composer textarea::placeholder { color: var(--faint); }

.composer-bar { display: flex; align-items: center; gap: 4px; }
.attach { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); }

.picker { position: relative; }
.picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(52 * var(--vw, 1vw));
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 6px 8px 6px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.picker-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-btn:hover, .picker-btn[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.picker-btn svg { width: 16px; height: 16px; }

.tray-count { margin-left: auto; padding: 0 6px; font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.tray-count.over { color: var(--danger); }

.send {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}
.send:disabled { background: var(--line); color: var(--faint); cursor: default; }
.send .i-stop { display: none; }
.send.stop .i-send { display: none; }
.send.stop .i-stop { display: block; }
.send .i-stop rect { fill: currentColor; stroke: none; }
.composer-bar .send { margin-left: 4px; }
.tray-count:empty + .send { margin-left: auto; }

.tray { display: flex; flex-wrap: wrap; gap: 8px; max-height: 196px; overflow-y: auto; padding: 2px 0 10px; }
.att {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 224px;
  padding: 6px 4px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
}
.att .ext { width: 36px; height: 36px; border-radius: 9px; font-size: 10px; }
.att img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.att-name { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-meta { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att.failed { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.att.failed .att-meta { color: var(--danger); }
.att .icon-btn { width: 26px; height: 26px; border-radius: 8px; }
.att .icon-btn svg { width: 15px; height: 15px; }
.att-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); transition: width 0.2s ease; }
.att > span { min-width: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att > span small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.att.failed > span small { color: var(--danger); }
.att.busy::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: var(--accent); animation: att-busy 1.2s ease-in-out infinite; }
@keyframes att-busy { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .att.busy::after { animation: none; width: 100%; opacity: 0.5; } }
.send.queue { background: color-mix(in srgb, var(--accent) 82%, var(--ink)); }

.suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 768px; margin: 14px auto 0; }
.suggestion {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--muted);
}
.suggestion:hover { background: var(--surface); color: var(--ink); }

.hint { max-width: 768px; margin: 8px auto 0; text-align: center; font-size: 12.5px; color: var(--faint); min-height: 1.4em; }
.hint .link { font-size: inherit; }

/* ===================================================================== menus, dialogs, toasts */

.menu {
  position: fixed;
  z-index: 60;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.menu > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: transparent;
  padding: 8px 10px;
  font-size: 14.5px;
  text-align: left;
}
.menu > button:hover, .menu > button:focus-visible { background: var(--hover); }
.menu > button.danger { color: var(--danger); }
.menu svg { width: 17px; height: 17px; }

.model-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  top: auto;
  width: min(360px, calc(calc(100 * var(--vw, 1vw)) - 32px));
  max-height: min(calc(70 * var(--vh, 1vh)), 520px);
  overflow-y: auto;
}
.model-menu.down { top: calc(100% + 10px); bottom: auto; }
.model-option {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 2px 10px !important;
  align-items: start !important;
  padding: 10px 12px !important;
}
.model-option .m-name { font-weight: 600; font-size: 14.5px; }
.model-option .m-desc { grid-column: 1; font-size: 13px; color: var(--muted); line-height: 1.4; }
.model-option .m-tags { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.model-option .m-check { grid-column: 2; grid-row: 1; color: var(--accent); visibility: hidden; }
.model-option[aria-checked="true"] .m-check { visibility: visible; }
.model-option.locked { opacity: 0.6; }
.tag {
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--hover);
  color: var(--muted);
}
.tag.adv { background: var(--accent-soft); color: var(--accent); }
.menu-section { margin: 8px 12px 4px; font-size: 12.5px; font-weight: 600; color: var(--faint); }

.dialog {
  width: min(400px, calc(calc(100 * var(--vw, 1vw)) - 32px));
  border: 0;
  border-radius: 22px;
  padding: 30px 28px 24px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.dialog::backdrop, .lightbox::backdrop { background: rgba(8, 12, 28, 0.55); }
.auth { display: flex; flex-direction: column; gap: 14px; }
.auth h2 { margin: 4px 0 0; font: 800 26px/1.15 var(--display); letter-spacing: -0.02em; }
.auth-sub { margin: -6px 0 4px; color: var(--muted); font-size: 15px; }
.glyph.big { width: 40px; height: 40px; border-radius: 12px; }
.dialog-close { position: absolute; top: 14px; right: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13.5px; font-weight: 600; }
.field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  padding: 11px 12px;
  font-size: 16px;
  outline: 0;
}
.field input:focus { border-color: var(--accent); }
.auth-error { margin: 0; min-height: 1.2em; color: var(--danger); font-size: 14px; }
.auth-error:empty { display: none; }
.auth .primary { padding: 12px 16px; font-size: 15px; }
.auth-switch { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }

.lightbox {
  max-width: calc(94 * var(--vw, 1vw));
  max-height: calc(94 * var(--vh, 1vh));
  border: 0;
  border-radius: 18px;
  padding: 10px;
  background: var(--surface);
}
.lightbox img { display: block; max-width: calc(calc(94 * var(--vw, 1vw)) - 20px); max-height: calc(calc(94 * var(--vh, 1vh)) - 80px); border-radius: 12px; margin: 0 auto; }
.lightbox-bar { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 2px 2px; }

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, rgba(8, 12, 28, 0.35));
}
.drop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 48px;
  border: 2px dashed var(--accent);
  border-radius: 22px;
  background: var(--surface);
  text-align: center;
}
.drop-card svg { width: 36px; height: 36px; color: var(--accent); }
.drop-card p { margin: 6px 0 0; font-size: 18px; font-weight: 600; }
.drop-card small { color: var(--muted); }

.toasts, .nrk-toast-stack {
  position: fixed;
  left: 50%;
  top: calc(16px + env(safe-area-inset-top));
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(calc(100 * var(--vw, 1vw)) - 32px);
  pointer-events: none;
}
/* Stack vertically; keep clear of bottom-right dock / FAB areas (NK-TR-2026-10). */
.nrk-toast-stack {
  left: auto; right: 16px; top: auto;
  bottom: calc(72px + env(safe-area-inset-bottom));
  transform: none; align-items: flex-end;
}
.toast {
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  box-shadow: var(--shadow);
}

.nrk-offline-banner {
  position: sticky; top: 0; z-index: 90;
  background: #1D1D1F; color: #F5F5F7;
  text-align: center; font-size: 13.5px; font-weight: 600;
  padding: 8px 12px;
}
html.nrk-offline .nrk-offline-lock,
html.nrk-offline textarea:disabled,
html.nrk-offline input:disabled {
  filter: grayscale(0.55); opacity: 0.72; cursor: not-allowed;
}
.nrk-tip {
  position: fixed; z-index: 100; max-width: 260px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(29, 29, 31, 0.94); color: #F5F5F7;
  font-size: 12.5px; line-height: 1.35; pointer-events: none;
  box-shadow: var(--shadow);
}
.nrk-tip[hidden] { display: none !important; }

/* Minimum 44×44 tap targets on icon / primary actions (NK-TR-2026-10). */
.icon-btn, .composer-bar .attach, .composer-bar .send-btn, button.copy-code {
  min-width: 44px; min-height: 44px;
}

/* ===================================================================== sign-in */

.providers { display: flex; flex-direction: column; gap: 8px; }
.provider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.provider-btn:hover { border-color: var(--faint); background: var(--bg); }
.provider-btn img { width: 20px; height: 20px; object-fit: contain; }
.provider-btn.busy { opacity: 0.7; pointer-events: none; }

.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.email-form { display: flex; flex-direction: column; gap: 12px; }

.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; user-select: none; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.auth-fine { margin: -4px 0 0; font-size: 13px; color: var(--faint); text-align: center; }
.construct-copy { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; text-align: center; }

.switch-row, .sec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.switch-row span, .sec-row span { display: flex; flex-direction: column; gap: 3px; }
.switch-row b, .sec-row b { font-weight: 600; font-size: 15px; }
.switch-row small, .sec-row small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.switch-row { cursor: pointer; }
.switch-row input {
  appearance: none;
  flex: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: 99px;
  background: var(--line);
  cursor: pointer;
  transition: background 0.15s ease;
}
.switch-row input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.switch-row input:checked { background: var(--accent); }
.switch-row input:checked::after { transform: translateX(18px); }
.sec-row .ghost:disabled { opacity: 0.5; cursor: default; }

.dialog-back { position: absolute; top: 14px; left: 14px; }
.dialog-back:not([hidden]) ~ h2 { margin-top: 28px; }
.auth-step { display: flex; flex-direction: column; gap: 12px; }
.who-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  font-size: 14.5px;
}
.who-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.link.center { align-self: center; font-size: 14px; }
.ghost.wide { justify-content: center; border-radius: 12px; padding: 11px 16px; font-size: 15px; }

.wide-dialog { width: min(560px, calc(calc(100 * var(--vw, 1vw)) - 24px)); max-height: calc(calc(100 * var(--vh, 1vh)) - 32px); overflow-y: auto; }
.sec-block { padding: 16px 0 6px; border-top: 1px solid var(--line); }
.sec-block h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.sec-note { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sec-head .ghost:disabled { opacity: 0.5; cursor: default; }
.pw-form { display: flex; flex-direction: column; gap: 12px; }
.pw-form .primary { align-self: flex-start; }

.mail-list { list-style: none; margin: 6px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mail-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 14px; }
.mail-list .tag { font-family: var(--text); }
.device-list { list-style: none; margin: 0; padding: 0; }
.device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.device:last-child { border-bottom: 0; }
.device-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.device-info b { font-weight: 600; font-size: 14.5px; }
.device-info small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.device .ghost { flex: none; }

/* ---------- new-password helper */

.pw-meter { display: none; margin-top: -4px; font-size: 13px; }
.pw-meter.active { display: block; }
.pw-bar { display: inline-flex; gap: 4px; vertical-align: middle; }
.pw-bar i { width: 34px; height: 5px; border-radius: 99px; background: var(--line); }
.pw-bar i.on.s1 { background: var(--danger); }
.pw-bar i.on.s2 { background: #D98A12; }
.pw-bar i.on.s3 { background: color-mix(in srgb, var(--ok) 70%, var(--accent)); }
.pw-bar i.on.s4 { background: var(--ok); }
.pw-label { margin-left: 8px; font-weight: 600; color: var(--muted); }
.pw-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; text-align: left; }
.pw-rules li { color: var(--muted); padding-left: 20px; position: relative; }
.pw-rules li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--faint);
}
.pw-rules li.met { color: var(--ink); }
.pw-rules li.met::before { border-color: var(--ok); background: var(--ok); }
.pw-server { margin: 6px 0 0; color: var(--danger); font-weight: 500; }
.pw-server:empty { display: none; }

/* ---------- the code page */

body.verify-page { overflow: auto; }
.verify {
  min-height: calc(100 * var(--vh, 1vh));
  min-height: calc(100 * var(--vh, 1vh));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px calc(40px + env(safe-area-inset-bottom));
}
.verify .mark { align-self: flex-start; margin: 0 0 auto; }
.verify-card {
  width: min(440px, 100%);
  margin: 40px 0 auto;
  padding: 34px 30px 26px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.verify-card h1 { margin: 0; font: 800 28px/1.15 var(--display); letter-spacing: -0.025em; }
.verify-sub { margin: 10px 0 14px; color: var(--muted); font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }
.verify-sub b { color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 0.95em; letter-spacing: 0.01em; }
.verify-local {
  margin: 0 0 22px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #4f6ef7) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #4f6ef7) 28%, transparent);
  color: var(--ink); font: 600 14.5px/1.4 var(--sans); letter-spacing: 0.02em;
}
.verify-local[hidden] { display: none !important; }

.code-boxes { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.code-boxes input {
  width: 48px;
  height: 58px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  text-align: center;
  font: 600 24px/1 var(--mono);
  outline: 0;
  caret-color: var(--accent);
}
.code-boxes input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.code-boxes input:disabled { opacity: 0.55; }
.code-gap { width: 8px; }

.code-msg { min-height: 1.45em; margin: 14px 0 12px; font-size: 14.5px; font-weight: 500; color: var(--danger); }
.form-card { text-align: left; }
.form-card h1, .form-card .verify-sub, .form-card .step-count { text-align: center; }
.form-card form { display: flex; flex-direction: column; gap: 12px; }
.form-card .code-msg { margin: 2px 0 0; min-height: 1.4em; }
.form-card .skip { margin-top: 4px; }
.step-count { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--accent); }
.step-count:empty { display: none; }
.phone-row {
  display: flex; gap: 8px; align-items: stretch;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 0 4px 0 0;
}
.phone-row:focus-within { border-color: var(--accent); }
.phone-row select {
  flex: 0 0 auto; max-width: 7.5rem; border: 0; background: transparent; color: var(--ink);
  font: inherit; padding: 10px 8px; border-radius: 12px;
}
.phone-row input {
  flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 10px 12px 10px 4px !important;
}
.mfa-pick {
  border: 0; margin: 4px 0 0; padding: 0; display: grid; gap: 6px;
}
.mfa-pick legend { font-size: 13.5px; font-weight: 600; padding: 0; margin-bottom: 2px; }
.at-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  padding-left: 12px;
  font-size: 16px !important;
  font-weight: 400 !important;
}
.at-input:focus-within { border-color: var(--accent); }
.at-input span { color: var(--muted); }
.at-input input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding-left: 4px !important; }
.code-msg[data-kind="ok"] { color: var(--ok); }
#code-form .check { justify-content: center; margin-bottom: 16px; }
#code-form .primary { padding: 12px 16px; font-size: 15px; }
.verify-meta { margin: 16px 0 6px; font-size: 13px; color: var(--faint); }
.verify-actions { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 14px; }
.verify-actions .link:disabled { color: var(--faint); text-decoration: none; cursor: default; }
.link.muted { color: var(--muted); }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }

@media (max-width: 420px) {
  .verify-card { padding: 28px 18px 22px; border-radius: 20px; }
  .code-boxes { gap: 6px; }
  .code-boxes input { width: 42px; height: 52px; font-size: 22px; }
  .code-gap { width: 4px; }
}

/* ===================================================================== phones and small windows */

@media (max-width: 860px) {
  .shell, .shell.collapsed { grid-template-columns: minmax(0, 1fr); }
  .shell.collapsed .sidebar { display: flex; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(calc(86 * var(--vw, 1vw)), 320px);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow);
  }
  .shell.drawer-open .sidebar { transform: none; }
  .topbar #open-sidebar, .topbar #new-chat-top { display: inline-grid; }
  .chat-item .icon-btn { opacity: 1; }
  .column { padding: 8px 16px 24px; }
  .dock { padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }
  .main.empty .dock { flex: 0 0 auto; }
  .main.empty .thread { flex: 1 1 auto; justify-content: center; }
  .att { width: calc(50% - 4px); min-width: 150px; }
  .msg-ai { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .msg-ai .avatar-ai { display: none; }
}

@media (min-width: 861px) {
  #close-sidebar { display: inline-grid; }
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes hop { 0%, 70%, 100% { opacity: 0.35; transform: none; } 35% { opacity: 1; transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .caret, .dots i, .body.streaming > :last-child::after, .body.streaming:empty::after { animation: none !important; }
  .sidebar, .composer, .att-bar, .switch-row input, .switch-row input::after { transition: none !important; }
}

/* ===================================================================== plans and owner pages */

body.page { overflow: auto; }
.page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--chrome-h);
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 40;
  min-width: 0;
}
.page-top .mark { font-size: 18px; }
/* Small Impulses meter at every width: the count and the bar; the sentence is its tooltip and accessible name
   (impulse-bank.js). It already opens Plans, so a Plans button beside it would be the same link twice. */
.page-top .impulse-bank-note, .topbar .impulse-bank-note { display: none; }
.page-top:has(.impulse-bank:not([hidden])) .page-tools > a.ghost[href*="/plans"],
.topbar:has(.impulse-bank:not([hidden])) a.ghost[href*="/plans"] { display: none; }
/* Under 900 px there is no capsule, so the product tabs are how you change app: they get their own scrolling row
   under the bar instead of being squeezed to one tab beside the logo. */
@media (max-width: 899px) {
  .page-top:has(> .app-nav) { flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; flex-shrink: 0; }   /* column pages (Camrive) would squash it */
  .page-top > .mark { order: 1; }
  .page-top > .syn-nav-btn { order: 2; margin-left: auto; }
  .page-top > .page-tools { order: 2; }
  .page-top > .app-nav { order: 3; flex: 1 0 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .mail-page .page-top .mcp-topbar { display: none; }        /* Ask (Relay) stays in the mail toolbar */
  .page-top:has(> .app-nav) .nk-launch-btn { display: none; }  /* the tabs row already switches app */
}
@media (max-width: 600px) {
  .page-top .impulse-bank-tokens { display: none; }          /* the count alone on a phone */
  .page-top .impulse-bank { padding: 4px 10px; }
}
/* The logo and name never shrink, and a product's logo is 30 px wherever the page is served: camrive.js, daxolex.js and
   the rest add their logo on axork.com paths too, where html.camrive (which sizes it) isn't set, so the bare SVG grew to
   ~80 x 110 px, spilled out of the bar and its name painted over the first tab (walkthrough, 1 Nov 2026). */
.page-top > .mark { flex: none; }
.page-top > .mark > img { width: 30px; height: 30px; flex: none; }
.page-main { width: min(1120px, 100%); margin: 0 auto; padding: 16px 20px 64px; }
body.page.drive-page, body.page.vault-page, body.page.settings-page {
  min-height: calc(100 * var(--vh, 1vh));
  display: flex;
  flex-direction: column;
}
body.page.drive-page .page-main,
body.page.vault-page .page-main,
body.page.settings-page .page-main { flex: 1; width: min(1120px, 100%); }
.page-title { margin: 28px 0 8px; text-align: center; font: 800 clamp(30px, calc(5 * var(--vw, 1vw)), 44px)/1.08 var(--display); letter-spacing: -0.03em; }
.page-sub { margin: 0 auto 28px; max-width: 620px; text-align: center; color: var(--muted); }
.page-title.left, .page-sub.left { text-align: left; margin-left: 0; max-width: none; }
.eyebrow { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--accent); }
.fine { color: var(--faint); font-size: 13px; text-align: center; margin: 14px 0 0; }
.btn-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.primary.soft { background: var(--accent-soft); color: var(--accent); }
.ghost.danger { color: var(--danger); }
.ghost.tiny { padding: 4px 10px; font-size: 13px; }
.ghost.wide, .primary.wide { width: 100%; justify-content: center; }
.paypal { border-radius: 12px; padding: 9px 14px; }

.banner { margin: 0 auto 16px; max-width: 720px; padding: 12px 16px; border-radius: 14px; font-weight: 500;
  background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.banner[data-kind="error"] { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

.usage-panel, .panel {
  margin: 0 0 24px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.usage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.usage-head h2 { margin: 0; font: 800 26px/1.15 var(--display); letter-spacing: -0.02em; }
.usage-sub { margin: 4px 0 0; color: var(--muted); }
.usage-manage { display: flex; gap: 8px; flex-wrap: wrap; }
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 28px; margin-top: 18px; }
.meter-row { min-width: 0; }
.meter-label { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 6px; }
.meter-label span { color: var(--muted); }
.meter.big { height: 10px; margin: 0; }
.meter i[data-level="high"] { background: var(--danger); }
.meter-note { grid-column: 1 / -1; margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.plan-card.highlight { border: 2px solid var(--accent); padding: 21px 19px 19px; box-shadow: var(--shadow); }
.plan-card.current { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.plan-flag { position: absolute; top: -12px; left: 18px; padding: 3px 10px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.plan-card h3 { margin: 0; font: 800 22px/1.2 var(--display); }
.plan-tag { margin: 4px 0 14px; color: var(--muted); font-size: 14px; min-height: 2.9em; }
.plan-price { margin: 0 0 16px; display: flex; align-items: baseline; gap: 6px; }
.plan-price b { font: 800 36px/1 var(--display); letter-spacing: -0.03em; }
.plan-price span { color: var(--muted); font-size: 14px; }
.plan-actions { display: flex; flex-direction: column; gap: 8px; min-height: 44px; margin-bottom: 16px; }
.pay-methods { margin: 22px 0 0; text-align: left; }
.pay-methods h2 { font-size: 18px; margin: 0 0 6px; }
.pay-methods > .fine { text-align: left; margin: 0 0 10px; }
.pay-method-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pay-method { display: flex; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.pay-method p { margin: 0; }
.pay-method .fine { margin: 2px 0 0; text-align: left; }
.pay-method button, .pay-method a { flex: 0 0 auto; }
.pay-await { margin: 12px 0 0; text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.pay-await h3 { margin: 0 0 6px; font-size: 16px; }
.pay-await dl { margin: 8px 0 0; }
.pay-await div { display: grid; grid-template-columns: 8rem 1fr; gap: 4px 12px; margin: 0 0 4px; }
.plan-state { margin: 0; padding: 10px 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); }
.plan-card ul { margin: 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: 14.5px; }
.plan-card li { position: relative; padding-left: 24px; }
.plan-card li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

.credits-section { margin-top: 48px; }
.credits-section h2 { margin: 0 0 6px; text-align: center; font: 800 28px/1.2 var(--display); letter-spacing: -0.02em; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 820px; margin: 0 auto; }
.pack-card { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.pack-credits { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pack-credits b { font: 800 24px/1 var(--display); }
.pack-price { margin: 0 0 10px; color: var(--muted); }
.pack-actions { display: flex; gap: 8px; }
.pack-actions > * { flex: 1; justify-content: center; }
.credits-section .switch-row { max-width: 820px; margin: 18px auto 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }

/* owner */
.wide-main { width: min(1240px, 100%); }
.owner-nav { display: flex; gap: 18px; font-size: 14px; font-weight: 500; }
.owner-nav a { color: var(--muted); text-decoration: none; }
.owner-nav a:hover { color: var(--ink); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.kpi p { margin: 0 0 6px; color: var(--muted); font-size: 13px; font-weight: 500; }
.kpi b { display: block; font: 800 26px/1.1 var(--display); letter-spacing: -0.02em; }
.kpi small { color: var(--faint); font-size: 12.5px; }
.panel h2 { margin: 0 0 12px; font: 800 20px/1.2 var(--display); }
.panel h3 { margin: 18px 0 8px; font-size: 15px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h2 { margin: 0; }
.panel-actions { display: flex; gap: 8px; }
.legend { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 10px; }
.key.rev { background: var(--accent); }
.key.cost { background: var(--faint); }
.chart svg { width: 100%; height: auto; display: block; stroke: none; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--faint); stroke: none; font-size: 11px; font-weight: 400; font-family: var(--text); }
.chart .bar.rev { fill: var(--accent); }
.chart .bar.cost { fill: var(--faint); }
.plan-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { padding: 6px 14px; border-radius: 99px; background: var(--hover); font-size: 14px; }
.search-box { display: flex; gap: 8px; }
.search-box input { width: min(320px, calc(60 * var(--vw, 1vw))); padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data td small { display: block; color: var(--faint); font-size: 12.5px; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .bad { color: var(--danger); }
table.data .empty { text-align: center; color: var(--faint); padding: 24px; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions .ghost + .ghost { margin-left: 6px; }
table.edit input { width: 100%; min-width: 72px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); text-align: inherit; }
table.edit td.num input { text-align: right; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.json-box { width: 100%; min-height: 420px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font: 13px/1.5 var(--mono); }

@media (max-width: 980px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-nav { display: none; }
}
@media (max-width: 600px) {
  .plan-grid, .two-col { grid-template-columns: 1fr; }
  .plan-tag { min-height: 0; }
  .usage-panel, .panel { padding: 18px 16px; }
  .page-top .ghost { padding: 6px 12px; }
}

/* ===================================================================== sections: mail and messages */

.side-apps { display: grid; gap: 2px; margin: 0 0 10px; }
.side-apps a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.side-apps a:hover { background: var(--hover); }
.side-apps svg { width: 18px; height: 18px; color: var(--muted); }
.side-apps b { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 12px; text-align: center; }

.mail-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 99px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 500;
}
.mail-toggle svg { width: 17px; height: 17px; }
.mail-toggle:hover { color: var(--ink); border-color: var(--faint); }
.mail-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
@media (max-width: 560px) { .mail-toggle span { display: none; } .mail-toggle { padding: 0 9px; } }

.app-nav {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius);
  background: var(--hover);
  overflow-x: auto;
  max-width: min(720px, 100%);
  min-width: 0;
  flex: 1 1 auto;
  scrollbar-width: none;
}
.app-nav::-webkit-scrollbar { display: none; }
.app-nav a {
  flex: none;
  padding: 6px 12px;
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.app-nav a:hover { color: var(--ink); }
.app-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

body.mail-page { display: flex; flex-direction: column; height: calc(100 * var(--vh, 1vh)); overflow: hidden; }
.mail-page .banner { margin: 0 16px 12px; max-width: none; }
.mail-intro { flex: 1; overflow: auto; display: flex; justify-content: center; padding: 8px 16px 40px; }
.intro-card { width: min(520px, 100%); margin-top: 24px; height: max-content; }
.intro-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; }
.intro-icon svg { width: 28px; height: 28px; }
.intro-address { margin: -8px 0 20px; font: 600 20px/1.3 var(--mono); color: var(--accent); overflow-wrap: anywhere; }
.intro-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.intro-sync { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.intro-sync p { width: 100%; margin: 6px 0 0; }
.intro-points { margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; text-align: left; display: grid; gap: 10px; color: var(--muted); font-size: 14.5px; }
.intro-points li { padding-left: 22px; position: relative; }
.intro-points li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

.page-tools { display: flex; align-items: center; gap: 8px; }

/* Remaining plan allowance (static/impulse-bank.js). A row of tokens in the top tools, next to Plans. */
.impulse-bank {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  max-width: min(440px, 70vw);
  margin: 0;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  color: inherit;
  text-decoration: none;
  line-height: 1.15;
}
.impulse-bank[hidden] { display: none; }
.impulse-bank:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.impulse-bank:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.topbar .impulse-bank { align-self: center; }
.impulse-bank-tokens {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  flex: none;
}
.impulse-bank-token {
  width: 8px;
  height: 7px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.impulse-bank-token.is-on {
  height: 18px;
  background: var(--accent);
}
.impulse-bank-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.impulse-bank-count {
  font: 600 13px/1.15 var(--text);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.impulse-bank[data-state="empty"] .impulse-bank-count { color: var(--danger); }
.impulse-bank-note {
  font: 500 11px/1.25 var(--text);
  color: var(--muted);
  max-width: 36ch;
}
@media (max-width: 720px) {
  .impulse-bank { max-width: min(280px, 58vw); padding: 3px 8px; }
  .impulse-bank-note { max-width: 24ch; }
}
.mail-page { background: var(--bg); }
.mail-app {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr);
  margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface); overflow: hidden;
}
.mail-app.ai-out { grid-template-columns: 220px minmax(0, 1fr); }
/* Relay docks as a third column — same chrome family as Messenger’s info rail */
.mail-app.mcp-rail-open,
body.mcp-open .mail-app {
  grid-template-columns: 220px minmax(0, 1fr) minmax(300px, 340px);
}
@media (max-width: 1180px) {
  .mail-app.mcp-rail-open,
  body.mcp-open .mail-app { grid-template-columns: 200px minmax(0, 1fr) minmax(280px, 320px); }
}
@media (max-width: 960px) {
  .mail-app.mcp-rail-open,
  body.mcp-open .mail-app { grid-template-columns: 220px minmax(0, 1fr); }
  body.mcp-open .mail-ai.mcp-rail {
    position: fixed; inset: calc(var(--chrome-h, 52px) + env(safe-area-inset-top, 0px)) 0 0 auto;
    width: min(360px, 100vw); z-index: 30; border-left: 1px solid var(--line);
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.08);
  }
}
.mail-side { padding: 14px 12px; border-right: 1px solid var(--line); overflow: auto; display: flex; flex-direction: column; gap: 12px; background: #F7F8FC; min-width: 0; }
[data-theme="dark"] .mail-side, body.dark .mail-side { background: var(--sidebar); }
.mail-side .primary, .mail-write {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 44px; border-radius: 12px; font-weight: 700; font-size: 15px;
}
.mail-side .primary svg, .mail-write svg { width: 17px; height: 17px; }
.mail-folders-label { margin: 2px 0 0; flex: none; }
.side-plus {
  margin-left: 6px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: var(--hover);
  color: var(--muted); font: 700 14px/1 var(--text); cursor: pointer; vertical-align: middle;
}
.side-plus:hover { color: var(--accent); background: var(--accent-soft); }
.folders { display: grid; gap: 2px; width: 100%; flex: none; }
.folder { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font: inherit; font-size: 14.5px; cursor: pointer; }
.folder svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.folder:hover { background: var(--hover); }
.folder.active { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); font-weight: 700; box-shadow: none; }
.folder.active svg { color: var(--accent); }
.folder b {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  background: #E11D48; color: #fff; font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center;
}
.mail-storage-card {
  margin-top: auto; border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.mail-storage-card .side-label { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); }
.side-block { border-top: 1px solid var(--line); padding-top: 12px; }
.side-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.side-note { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.addr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.addr-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.addr-list .addr { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.addr-list .link { font-size: 12px; }
.addr-list .inbox-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.addr-list .inbox-row.on { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.addr-list .unread-n { margin-left: auto; color: var(--accent); font-size: 12px; }
.all-inboxes { width: 100%; margin: 0 0 6px; }
.alias-form { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.alias-form input { width: 92px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; }
.sync-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.mail-stream { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.stream-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; flex-wrap: wrap; }
.mail-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; margin: 0; padding: 0 12px; border-radius: 12px; background: var(--hover); color: var(--faint); }
.mail-search input { flex: 1; min-width: 0; padding: 9px 0; border: 0; background: transparent; outline: 0; }
.mail-layout { display: flex; flex: none; padding: 3px; border-radius: 10px; background: var(--hover); gap: 0; }
.mail-layout button { border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.mail-layout button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }
.mail-layout-note { display: none; }
.mail-quick-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.mail-quick-filters button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 99px; cursor: pointer; }
.mail-quick-filters button[aria-pressed="true"] { border-color: transparent; background: var(--accent); color: #fff; }
.mail-quick-filters button.qfilter-drive[aria-pressed="true"] { letter-spacing: 0.01em; }
.mail-drive-side { padding: 4px 10px 8px; border-top: 1px solid var(--line); margin-top: 4px; }
.mail-drive-folder { width: 100%; }
.mail-drive-folder.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.drive-read { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-bottom: 8px; }
.drive-read[hidden] { display: none; }
.drive-read h1 { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.drive-crumb { margin: 0; color: var(--muted); font-size: 12.5px; word-break: break-word; }
.drive-att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; overflow: auto; min-height: 0; flex: 1; }
.drive-att-card { display: grid; grid-template-columns: 72px 1fr auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.drive-thumb { width: 72px; height: 72px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(160deg, #EEF2FF, #E0E7FF); color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; overflow: hidden; }
.drive-thumb span { padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,0.75); }
.drive-thumb-img { background-size: cover; background-position: center; }
.drive-thumb-pdf { background: linear-gradient(160deg, #FEE2E2, #FECACA); color: #B91C1C; }
.drive-thumb-doc { background: linear-gradient(160deg, #FFEDD5, #FED7AA); color: #C2410C; }
.drive-thumb-code { background: linear-gradient(160deg, #1E293B, #0F172A); color: #93C5FD; }
.drive-att-meta { min-width: 0; display: grid; gap: 3px; }
.drive-att-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.drive-att-meta small { color: var(--muted); font-size: 12px; }
.drive-type { display: inline-block; padding: 1px 7px; border-radius: 99px; background: var(--hover); font-weight: 700; font-size: 10.5px; letter-spacing: 0.04em; }
.drive-att-card .drive-dl { color: var(--muted); }
.drive-att-card .drive-dl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drive-path-foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.drive-path-foot code { font: 12px/1.4 var(--mono, ui-monospace, monospace); color: var(--ink); word-break: break-word; }
.drive-empty { margin: 24px 0; color: var(--faint); text-align: center; }
.att-preview { display: flex; flex-direction: column; gap: 10px; min-height: 280px; flex: 1; }
.att-preview[hidden] { display: none; }
.att-preview-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.att-preview-head b { flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-preview-dl { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 8px 14px; border-radius: 10px; }
.att-preview-stage { flex: 1; min-height: 240px; border: 1px solid var(--line); border-radius: 14px; overflow: auto; background: #0B1220; color: #E2E8F0; position: relative; }
.att-preview-img { display: block; max-width: 100%; margin: 0 auto; background: #111; }
.att-preview-frame { width: 100%; height: min(70vh, 640px); border: 0; background: #fff; }
.att-preview-code { margin: 0; padding: 18px 20px; font: 12.5px/1.55 var(--mono, ui-monospace, monospace); white-space: pre-wrap; word-break: break-word; }
.att-preview-fallback { margin: 40px 20px; text-align: center; color: #94A3B8; }
.mail-features-block { margin-bottom: 4px; }
.mail-features-block code { font-size: 11.5px; }
.density { display: flex; flex: none; align-items: center; padding: 3px; border-radius: 10px; background: var(--hover); gap: 0; }
.density .dens-label { padding: 0 6px 0 8px; font-size: 11.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; }
.density button { border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.density button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.mail-ask { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 99px !important; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)) !important; background: var(--accent-soft) !important; color: var(--accent) !important; font-weight: 700; }
.mail-ask svg { width: 15px; height: 15px; }

/* Classic (Mailbird 3-pane) / Split / List — colors still come from Appearance. */
.mail-app.layout-betterbird .mail-split,
.mail-app[data-layout="betterbird"] .mail-split { flex-direction: column; }
.mail-app.layout-classic {
  grid-template-columns: 220px minmax(0, 1fr);
}
.mail-app.layout-classic .mail-split,
.mail-app[data-layout="classic"] .mail-split { flex-direction: row; align-items: stretch; }
.mail-app.layout-classic .mail-stream.open .msg-list,
.mail-app[data-layout="classic"] .mail-stream.open .msg-list,
.mail-app.layout-classic .mail-stream .msg-list,
.mail-app[data-layout="classic"] .mail-stream .msg-list {
  flex: 0 0 min(36%, 380px); max-width: 420px; border-right: 1px solid var(--line);
  background: #FAFBFE; padding: 0;
}
[data-theme="dark"] .mail-app.layout-classic .msg-list,
[data-theme="dark"] .mail-app[data-layout="classic"] .msg-list { background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.mail-app.layout-classic .mail-stream.open .mail-read,
.mail-app[data-layout="classic"] .mail-stream.open .mail-read,
.mail-app.layout-classic .mail-stream .mail-read,
.mail-app[data-layout="classic"] .mail-stream .mail-read {
  flex: 1 1 auto; border-top: 0; min-width: 0; display: flex; flex-direction: column;
}
.mail-app.layout-classic .mail-stream:not(.open) .mail-read,
.mail-app[data-layout="classic"] .mail-stream:not(.open) .mail-read {
  display: flex; flex-direction: column; flex: 1 1 auto; border-top: 0;
}
.mail-app.layout-classic .folder.active,
.mail-app[data-layout="classic"] .folder.active {
  background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); box-shadow: none; font-weight: 700;
}
.mail-app.layout-classic .folder.active svg,
.mail-app[data-layout="classic"] .folder.active svg { color: var(--accent); }
.mail-app .msg-row {        /* every layout: avatar | sender + subject + preview | time */
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start;
  border-radius: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding: 12px 14px; border-left: 3px solid transparent;
}
.mail-app .msg-row .row-avatar { grid-row: 1 / span 3; align-self: center; }
.mail-app .msg-row .row-top { grid-column: 2; }
.mail-app .msg-row .row-meta { grid-column: 3; grid-row: 1; }
.mail-app .msg-row .row-subject { grid-column: 2 / span 2; }
.mail-app .msg-row .row-snippet { grid-column: 2 / span 2; }
.mail-app .msg-row .row-chips { grid-column: 2 / span 2; }
.mail-app .msg-row.active {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-left-color: var(--accent);
  box-shadow: none;
}
.mail-app.layout-classic .read-empty,
.mail-app[data-layout="classic"] .read-empty {
  flex: 1; display: grid; place-items: center; text-align: center; padding: 32px;
  color: var(--muted);
}
.mail-app.layout-list .mail-stream.open .msg-list,
.mail-app[data-layout="list"] .mail-stream.open .msg-list { flex: 1 1 auto; }
.mail-app.layout-list .mail-stream.open .mail-read,
.mail-app[data-layout="list"] .mail-stream.open .mail-read {
  position: absolute; inset: 0; z-index: 5; background: var(--surface); border-top: 0;
  display: block; overflow: auto;
}
.mail-app.layout-list .mail-stream { position: relative; }
.mail-app.layout-list .back-btn { display: inline-flex; }
.mail-app.layout-classic .mail-quick-filters,
.mail-app[data-layout="classic"] .mail-quick-filters { display: flex; }
.row-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font: 700 13px/1 var(--text); flex: none;
}
.read-foot {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.read-foot-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 12px; font-weight: 600;
}
.read-foot-btn svg { width: 16px; height: 16px; }
@media (max-width: 980px) {
  .mail-app.layout-classic .mail-split,
  .mail-app[data-layout="classic"] .mail-split { flex-direction: column; }
  .mail-app.layout-classic .mail-stream.open .msg-list,
  .mail-app[data-layout="classic"] .mail-stream.open .msg-list,
  .mail-app.layout-classic .mail-stream .msg-list,
  .mail-app[data-layout="classic"] .mail-stream .msg-list { flex: 0 1 40%; max-width: none; border-right: 0; }
  .mail-app.layout-classic .mail-stream.open .mail-read,
  .mail-app[data-layout="classic"] .mail-stream.open .mail-read { border-top: 1px solid var(--line); }
}
.ai-toggle { display: none; }
.ai-away { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ai-away .link { font-size: 12.5px; }
.mail-split { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.msg-list { list-style: none; margin: 0; padding: 8px 6px 12px; overflow: auto; flex: 1; min-height: 0; }
.mail-stream.open .msg-list { flex: 0 1 40%; }
.msg-row { width: 100%; display: grid; gap: 2px; padding: 10px 12px; border: 0; border-radius: 12px; background: none; text-align: left; }
.msg-row:hover { background: var(--hover); }
.msg-row.active { background: var(--accent-soft); }
.row-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.row-top b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-top time, .row-top .row-meta { flex: none; color: var(--faint); font-size: 12.5px; }
.row-top .row-meta time { color: inherit; }
.row-subject { display: flex; align-items: center; gap: 4px; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row-subject svg { width: 14px; height: 14px; color: var(--faint); }
.row-snippet { font-size: 13px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msg-row.unread b, .msg-row.unread .row-subject { font-weight: 700; }
.msg-row.unread .row-top b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
.row-chips { display: none; }
.row-chip { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 7px; border-radius: 99px; background: var(--hover); color: var(--muted); font-size: 11.5px; }
.list-empty { padding: 40px 12px; text-align: center; color: var(--faint); font-size: 14px; }
.place-empty {
  display: grid; justify-items: center; align-content: center; gap: 12px;
  margin: 0 auto; padding: 48px 20px; max-width: 28em; text-align: center; list-style: none;
}
.place-empty p {
  margin: 0; font: 400 var(--fs-body, 15.5px)/1.45 var(--text); color: var(--muted);
}
.place-empty .primary, .place-empty a.primary {
  min-height: 44px; min-width: 44px; padding: 0 16px; display: inline-grid; place-items: center;
  text-decoration: none;
}


.mail-read { overflow: auto; padding: 18px 26px 30px; min-width: 0; min-height: 0; }
.mail-stream.open .mail-read { flex: 1 1 60%; border-top: 1px solid var(--line); }
.mail-stream:not(.open) .mail-read { display: none; }
.mail-app.layout-classic .mail-read #read,
.mail-app[data-layout="classic"] .mail-read #read {
  display: flex; flex-direction: column; min-height: 100%;
}
.read-empty { height: 100%; display: grid; place-content: center; text-align: center; color: var(--muted); max-width: 360px; margin: 0 auto; }
.read-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.read-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.back-btn { display: none; }
#read h1 { margin: 0 0 14px; font: 700 23px/1.25 var(--display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.read-meta { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.read-meta .avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.read-meta div { flex: 1; min-width: 0; display: grid; }
.read-meta b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.read-meta small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.read-meta time { flex: none; color: var(--faint); font-size: 13px; }
.read-files, .c-files { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 13.5px; max-width: 100%; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip small { color: var(--faint); }
.file-chip svg { width: 16px; height: 16px; color: var(--accent); }
.read-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; }
.read-html { width: 100%; min-height: calc(60 * var(--vh, 1vh)); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
@media print {
  .page-top, .mail-side, .read-tools, .html-tools, dialog, .banner, iframe.read-html { display: none !important; }
  .mail-read, #read, #read-body { display: block !important; user-select: text; }
}
.mail-leave { max-width: 36rem; margin: 12vh auto; padding: 24px; }
.mail-leave h1 { margin: 0 0 12px; font: 600 22px/1.3 var(--display); color: var(--ink); }
.mail-leave p { margin: 0 0 12px; color: var(--muted); }
.mail-leave-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-caution { display: block; margin-top: 2px; color: var(--danger); font-size: 12px; font-weight: 600; }

dialog.compose { width: min(640px, calc(100% - 24px)); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog.compose.small { width: min(440px, calc(100% - 24px)); }
/* Only when open — a bare display:flex keeps closed <dialog> visible and blocks the Mail page. */
dialog.compose.gmail-dialog[open] { width: min(680px, calc(100% - 24px)); max-height: calc(100% - 48px); overflow: hidden; display: flex; flex-direction: column; }
dialog.compose::backdrop { background: rgba(10, 14, 30, 0.45); }
dialog.compose form { display: flex; flex-direction: column; padding: 18px 20px 16px; gap: 2px; }
dialog.compose form.gmail-compose { padding: 0; gap: 0; max-height: calc(100vh - 80px); min-height: 480px; }
dialog.compose .gmc-body { min-height: 220px; }
dialog.compose .gmc-head { padding: 12px 12px 10px 16px; margin: 0; border-bottom: 1px solid var(--line); gap: 6px; }
dialog.compose .gmc-head h2 { font: 600 16px/1.2 var(--text); }
.compose-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.compose-head h2 { margin: 0; font: 700 20px/1.2 var(--display); }
.c-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.c-row span { width: 64px; flex: none; color: var(--muted); font-size: 14px; }
.c-row input, .c-row select { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; outline: 0; }
#c-text { margin-top: 10px; padding: 10px 0; border: 0; background: transparent; resize: vertical; outline: 0; font-size: 15px; line-height: 1.55; }
.compose-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.compose-foot .primary { margin-left: auto; }
.attach-label { cursor: pointer; }
dialog.compose .field { display: grid; gap: 4px; margin-top: 10px; font-size: 14px; font-weight: 500; }
dialog.compose .field input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }

/* ---- Relay floating overlay + top bubble + edge tab ---- */
.mcp-topbar {
  display: flex; align-items: center; gap: 8px; max-width: min(420px, 46vw); min-width: 0;
}
.mcp-topbar[hidden] { display: none !important; }
.mcp-bubble {
  display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%;
  padding: 2px 3px 2px 4px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--accent-soft);
}
.mcp-bubble[hidden] { display: none !important; }
.mcp-bubble-open {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 5px 8px 5px 7px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.mcp-bubble-open:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mcp-spark { width: 16px; height: 16px; color: var(--accent); flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ai-head b { display: inline-flex; align-items: center; gap: 6px; }
.ai-head .mcp-spark { width: 15px; height: 15px; }
.mcp-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #22C55E; box-shadow: 0 0 0 3px color-mix(in srgb, #22C55E 24%, transparent);
}
.mcp-bubble-copy { display: grid; min-width: 0; }
.mcp-bubble-copy b { font: 700 12.5px/1.15 var(--display); color: var(--accent); }
.mcp-bubble-copy small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-bubble-x { width: 28px; height: 28px; flex: none; }
.mcp-home-link { display: none !important; }
.mcp-drag-hint { display: none !important; }

.mcp-edge {
  position: fixed; top: 50%; z-index: 41; transform: translateY(-50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: 18px 7px; border: 1px solid var(--line); border-radius: 14px 0 0 14px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--ink);
  font: 700 12px/1 var(--display); letter-spacing: 0.04em; cursor: pointer;
  box-shadow: var(--shadow);
}
.mcp-edge[hidden] { display: none !important; }
.mcp-edge[data-side="right"] { right: 0; border-radius: 14px 0 0 14px; }
.mcp-edge[data-side="left"] { left: 0; border-radius: 0 14px 14px 0; writing-mode: vertical-lr; }
.mcp-edge:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }

.mail-ai.mcp-overlay, .mail-ai {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--sidebar);
}
/* Native Mail rail — not a floating external card */
.mail-ai.mcp-rail {
  position: relative; top: auto; right: auto; width: auto; height: auto;
  z-index: 1; border: 0; border-left: 1px solid var(--line); border-radius: 0;
  box-shadow: none; overflow: hidden; background: var(--sidebar);
}
.mail-ai.mcp-overlay[hidden] { display: none !important; }
.mcp-drag { cursor: default; touch-action: pan-y; user-select: none; }
.mcp-hint { display: none; }

.ai-head {
  display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.ai-head-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ai-head-tools { display: inline-flex; align-items: center; gap: 1px; flex: none; }
.ai-head-tools .icon-btn { width: 30px; height: 30px; color: var(--muted); }
.ai-head-tools .icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ai-head b { font: 700 15px/1.2 var(--display); }
.ai-head small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-head .hs-host { margin-top: 4px; }
.ai-model-wrap {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
}
.ai-model-wrap > .mcp-spark { width: 12px; height: 12px; }
.ai-model-wrap select {
  appearance: none; -webkit-appearance: none;
  max-width: 78px; padding: 4px 16px 4px 2px; border: 0;
  border-radius: 999px; color: var(--ink); font: 600 12px/1.2 var(--text);
  cursor: pointer; outline: 0; background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 11px;
}
.ai-model-wrap select:focus { color: var(--accent); }
.ai-model-wrap.ai-model-locked {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: var(--accent-soft);
}
.ai-model-wrap.ai-model-locked select {
  cursor: default; max-width: 96px; color: var(--accent);
  background-image: none; padding-right: 6px;
}
.ai-close { display: inline-grid; }
/* Messenger-aligned thread surface */
.ai-log {
  list-style: none; margin: 0; padding: 14px 12px 12px; overflow: auto; flex: 1;
  display: flex; flex-direction: column; gap: 10px; background: var(--bg);
}
.ai-msg { max-width: 100%; display: grid; gap: 4px; }
.ai-model-chip {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 2px 8px;
  width: fit-content; border-radius: 999px; background: var(--accent-soft);
  font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 0.01em;
}
.ai-model-chip .mcp-spark { width: 11px; height: 11px; }
.ai-bub {
  padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45;
  overflow-wrap: anywhere; background: var(--bubble, var(--surface));
}
.ai-msg.user { align-self: flex-end; max-width: 88%; justify-items: end; }
.ai-msg.user .ai-bub {
  background: var(--accent-soft); color: var(--ink); white-space: pre-wrap;
  border-radius: 16px 16px 6px 16px;
}
.ai-msg.user .ai-meta {
  display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: 11px; padding: 0 4px;
}
.ai-msg.user .ai-checks { color: var(--accent); letter-spacing: -1px; font-weight: 700; }
.ai-msg.assistant { align-self: stretch; max-width: 96%; }
.ai-msg.assistant .ai-bub {
  background: transparent; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: none;
}
.ai-msg.assistant .ai-bub > :first-child { margin-top: 0; }
.ai-msg.assistant .ai-bub > :last-child { margin-bottom: 0; }
.ai-msg.assistant .ai-bub p { margin: 0 0 0.55em; }
.ai-msg.assistant .ai-bub ul, .ai-msg.assistant .ai-bub ol { margin: 0.2em 0 0.6em; padding-left: 1.2em; }
.ai-thumb {
  width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  font-size: 14px; cursor: pointer; justify-self: start;
}
.ai-thumb:hover, .ai-thumb.on { background: var(--hover); color: var(--accent); }
.ai-msg.note { align-self: center; color: var(--faint); font-size: 12.5px; text-align: center; padding: 8px 6px; }
.ai-form { display: flex; flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.ai-composer {
  display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 6px; width: 100%;
  padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg);
}
.ai-composer:focus-within { border-color: var(--accent); }
.ai-form textarea {
  flex: 1; min-width: 0; min-height: 38px; max-height: 120px; padding: 8px 0; border: 0;
  border-radius: 0; background: transparent; resize: none; outline: 0; font: inherit; font-size: 14px; line-height: 1.4;
}
.ai-attach { width: 34px; height: 34px; color: var(--muted); }
.ai-attach svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ai-send {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff);
  display: inline-grid; place-items: center; cursor: pointer;
}
.ai-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ai-send:hover { filter: brightness(1.05); }
.ai-send.stopping { background: var(--danger, #c0392b); }
body.mail-page .ai-form { padding-right: 12px; }
body.mail-assistant-page .mail-ai {
  border: 0; border-radius: 0; box-shadow: none; height: 100%;
  background: var(--sidebar);
}
body.mail-assistant-page .ai-head { background: var(--surface); }

.mcp-dialog { border: 0; padding: 0; background: transparent; max-width: min(440px, calc(100vw - 24px)); }
.mcp-dialog::backdrop { background: rgba(10, 14, 30, 0.55); }
.mcp-dialog-card {
  display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink);
}
.mcp-dialog-card header { display: flex; align-items: center; gap: 8px; }
.mcp-dialog-card h2 { margin: 0; flex: 1; font: 700 18px/1.25 var(--display); }
.mcp-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: min(50vh, 420px); overflow: auto; }
.mcp-history-list li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.mcp-hist-item {
  display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
.mcp-hist-item:hover { border-color: var(--accent); }
.mcp-hist-item b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-hist-item small { color: var(--muted); font-size: 12.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mcp-convert-actions { display: grid; gap: 8px; }
.mcp-convert-dialog { max-width: min(420px, calc(100vw - 24px)); }

body.mail-assistant-page { height: 100%; overflow: hidden; background:
  radial-gradient(120% 72% at 50% -18%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 58%),
  var(--bg); }
body.mail-assistant-page .mail-ai { height: 100%; background: transparent; position: static; width: auto; border: 0; border-radius: 0; box-shadow: none; }
body.mail-assistant-page .ai-close { display: none; }
body.mail-assistant-page .mcp-hint { display: none; }

@media (max-width: 1179px) {
  .mail-app, .mail-app.ai-out { grid-template-columns: 220px minmax(0, 1fr); }
  .mail-ai.mcp-overlay {
    top: 0; right: 0; bottom: 0; width: min(400px, 100%); height: auto; border-radius: 0;
    border-left: 1px solid var(--line); border-right: 0; border-top: 0; border-bottom: 0;
  }
  .ai-toggle { display: inline-grid; }
}
@media (max-width: 800px) {
  .mail-stream.open .mail-read { display: none; }
  body.reading .mail-read { display: block; position: fixed; inset: 0; z-index: 24; background: var(--surface); padding: 14px 18px 30px; border-top: 0; }
  body.reading .back-btn { display: inline-grid; }
  .density button { padding: 5px 6px; }
}
@media (max-width: 680px) {
  .app-nav a { padding: 6px 10px; }
  .page-top > .ghost, .page-tools .ghost { display: none; }
  .mail-app, .mail-app.ai-out { grid-template-columns: 1fr; margin: 0; border-radius: 0; border-width: 1px 0 0; }
  .mail-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; gap: 8px; align-items: center; }
  .mail-side .side-block { display: none; }
  .mail-side .mail-folders-label { display: none; }
  .mail-side .primary { width: auto; }
  .folders { display: flex; overflow-x: auto; width: auto; flex: 1; min-width: 0; }
  .folder { white-space: nowrap; width: auto; }
  .stream-bar { flex-wrap: wrap; }
  .density { order: 3; }
  .density-fovea .msg-row, .mail-app[data-density="fovea"] .msg-row { grid-template-columns: minmax(72px, 34%) minmax(0, 1fr) auto; }
}

/* messages */
.msgr { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; margin: 0;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface); overflow: hidden; }
.msgr-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--sidebar); }
.msgr-side-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px; }
.msgr-side-head h1 { margin: 0; font: 800 20px/1.2 var(--display); }
.tiny-primary { padding: 6px 14px; font-size: 14px; border-radius: 10px; }
.conv-list { list-style: none; margin: 0; padding: 4px 6px; overflow: auto; flex: 1; }
.contacts-block { padding: 12px 14px 14px; max-height: 45%; overflow: auto; }
.add-contact { display: flex; gap: 6px; margin: 8px 0 10px; }
.add-contact input, .add-contact select { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13.5px; }
.people, .decisions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.people li, .decisions li { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.people li > span:first-child, .decisions li > span:first-child { flex: 1; min-width: 0; display: grid; }
.people small, .decisions small { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.msgr-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.conv { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.conv-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.conv-title { flex: 1; min-width: 140px; display: grid; }
.conv-title h2 { margin: 0; font: 700 18px/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-title small { color: var(--faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--sidebar) 88%, transparent);
  border: 1px solid var(--line); box-shadow: var(--edge); }
.tabs button { border: 0; min-height: 44px; padding: 8px 14px; border-radius: 11px; background: none; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), var(--edge); }
.consent-bar { padding: 8px 16px; font-size: 13px; background: var(--hover); color: var(--muted); border-bottom: 1px solid var(--line); }
.consent-bar[data-on="true"] { background: var(--accent-soft); color: var(--accent); }
.bubbles { list-style: none; margin: 0; padding: 16px; flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: min(680px, 88%); padding: 10px 14px; border-radius: 16px; background: var(--bubble); align-self: flex-start; }
.bubble.mine { align-self: flex-end; background: var(--accent-soft); }
.msg-card { position: relative; }
.msgr .bubbles:not(.axon-thread) > .bubble.mine {
  position: relative; align-self: flex-start; margin-left: var(--thread-gutter);
  margin-right: calc(100% - var(--thread-center) + var(--thread-gap)); max-width: 78%;
}
.msgr .bubbles:not(.axon-thread) > .bubble:not(.mine):not(.system) {
  position: relative; align-self: flex-end; margin-left: calc(var(--thread-center) + var(--thread-gap));
  margin-right: var(--thread-gutter); max-width: 78%;
}
.msgr .bubbles:not(.axon-thread) > .bubble.attachment {
  align-self: center; margin-left: var(--thread-gutter); margin-right: var(--thread-gutter); max-width: 86%;
}
.bubble.ai { background: transparent; border: 1px solid var(--line); max-width: min(760px, 96%); }
.bubble.snippet { border-left: 3px solid var(--accent); }
.bubble.private { outline: 1px dashed var(--faint); }
.bubble.system { align-self: center; background: none; padding: 2px 8px; color: var(--faint); font-size: 12.5px; text-align: center; }
.bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.system p { white-space: normal; }
.bubble .md > :first-child { margin-top: 0; }
.bubble .md > :last-child { margin-bottom: 0; }
.bubble.thinking .md::after { content: "Thinking…"; color: var(--faint); }
.b-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; font-size: 12.5px; }
.b-meta b { font-weight: 600; }
.b-meta small { color: var(--faint); }
.b-meta time { color: var(--faint); }
.b-meta :is(.fwd-btn, .rep-btn, .pin-btn) { opacity: 0; transition: opacity 0.15s; }
.b-meta :is(.fwd-btn, .rep-btn, .pin-btn):first-of-type, .b-meta time + :is(.fwd-btn, .rep-btn, .pin-btn) { margin-left: auto; }
.bubble:is(:hover, :focus-within) .b-meta :is(.fwd-btn, .rep-btn, .pin-btn) { opacity: 1; }
@media (hover: none) { .b-meta :is(.fwd-btn, .rep-btn, .pin-btn) { opacity: 1; } }
/* Dark mode: other people's bubbles were the same colour as the page. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bubble:not(.mine):not(.ai):not(.system) { background: color-mix(in srgb, var(--ink) 11%, var(--surface)); } }
:root[data-theme="dark"] .bubble:not(.mine):not(.ai):not(.system) { background: color-mix(in srgb, var(--ink) 11%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bubble.mine { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); } }
:root[data-theme="dark"] .bubble.mine { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
button.file-chip { background: var(--surface); cursor: pointer; }
.conv-compose { border-top: 1px solid var(--line); padding: 10px 16px 12px; }
.targets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 8px; }
.targets .check { font-size: 13.5px; }
.targets select { margin-left: auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 13px; }
.compose-line { display: flex; align-items: flex-end; gap: 8px; }
.compose-line textarea { flex: 1; min-height: 42px; max-height: 180px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); resize: none; outline: 0; }
.compose-line textarea:focus { border-color: var(--accent); }
.compose-attach { flex: none; width: 40px; height: 40px; color: var(--muted); }
.compose-files { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.compose-file { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 12.5px; }
.compose-file.error { border-color: var(--danger); color: var(--danger); }
.compose-file button { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.msgr-scope { display: flex; gap: 4px; padding: 0 12px 10px; }
.msgr-scope-btn { flex: 1; height: 32px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--muted); font: 600 12.5px var(--text); cursor: pointer; }
.msgr-scope-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.msg-row.space b::before { content: none; }
.call-ring { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.call-ring p { margin: 0; flex: 1; font-size: 14px; }
.file-chip.media { flex-direction: column; align-items: stretch; padding: 6px; max-width: min(320px, 100%); }
.file-chip.media img, .file-chip.media video, .dw-media img { display: block; max-width: 100%; max-height: 280px; border-radius: 10px; }
.dw-media { display: block; max-width: min(280px, 100%); }
.space-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.space-link { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--bg); }
.space-link:hover { border-color: var(--accent); }
.space-link small { color: var(--muted); font-size: 12.5px; }
.ax-call { position: fixed; right: 16px; bottom: 88px; z-index: 10050; width: min(360px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.ax-call[hidden] { display: none; }
.ax-call-stage { position: relative; aspect-ratio: 4 / 3; background: #10162A; }
.ax-call-remote, .ax-call-local { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #10162A; }
.ax-call-local { width: 28%; height: auto; inset: auto 10px 10px auto; border-radius: 10px; border: 2px solid rgba(255,255,255,0.35); aspect-ratio: 3 / 4; }
.ax-call-label { position: absolute; left: 10px; top: 10px; margin: 0; padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,0.45); color: #fff; font: 600 12.5px var(--text); }
.ax-call-lock { position: absolute; left: 10px; bottom: 10px; margin: 0; padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,0.45); color: #dff5e6; font: 600 11.5px var(--text); }
.ax-call-bar { display: flex; gap: 8px; justify-content: center; padding: 10px; background: var(--surface); }
.ax-call-btn { min-width: 64px; height: 36px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--ink); font: 600 13px var(--text); cursor: pointer; }
.ax-call-btn[aria-pressed="false"] { opacity: 0.65; }
.ax-call-btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.msgr-info { width: 300px; border-left: 1px solid var(--line); padding: 4px 14px 14px; overflow: auto; }
.msgr-info .side-block.first { border-top: 0; }
.segmented { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--hover); }
.segmented button { flex: 1; border: 0; padding: 7px; border-radius: 9px; background: none; font-weight: 600; font-size: 14px; color: var(--muted); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
#agree[aria-pressed="true"] { color: var(--ok); }
#disagree[aria-pressed="true"] { color: var(--danger); }
.pick-people { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; max-height: 280px; overflow: auto; }
.pick-people small { color: var(--faint); }
.pick-list { margin-top: 8px; }
.pick-btn { justify-content: space-between; border-radius: 12px; }
.pick-btn small { color: var(--faint); }
dialog.viewer { width: min(900px, calc(100% - 24px)); height: min(calc(80 * var(--vh, 1vh)), 900px); }
dialog.viewer[open] { display: flex; flex-direction: column; }
.viewer-head { padding: 12px 16px; margin: 0; }
#viewer-frame { flex: 1; width: 100%; border: 0; border-top: 1px solid var(--line); background: #fff; }
.share-link { font-size: 12.5px; margin-left: 4px; }

@media (max-width: 1100px) {
  .msgr-info { position: fixed; top: 0; right: 0; bottom: 0; z-index: 25; background: var(--surface); box-shadow: var(--shadow); }
}
@media (max-width: 760px) {
  .msgr { grid-template-columns: 1fr; margin: 0; border-radius: 0; border-width: 1px 0 0; }
  .msgr-main { display: none; }
  body.reading .msgr-main { display: flex; position: fixed; inset: 0; z-index: 20; background: var(--surface); }
  body.reading .back-btn { display: inline-grid; }
  .msgr-info { width: 100%; }
  .tabs { order: 3; width: 100%; }
  .tabs button { flex: 1; }
  /* Phone: yours left-of-centre with a left-edge line; incoming right-of-centre with a right-edge line. */
  .msgr .bubbles:not(.axon-thread) > .bubble.mine {
    align-self: flex-start; margin-left: var(--thread-gutter);
    margin-right: calc(100% - var(--thread-center) + var(--thread-gap)); max-width: 78%;
  }
  .msgr .bubbles:not(.axon-thread) > .bubble:not(.mine):not(.system) {
    align-self: flex-end; margin-left: calc(var(--thread-center) + var(--thread-gap));
    margin-right: var(--thread-gutter); max-width: 78%;
  }
  .msgr .bubbles:not(.axon-thread) > .bubble.attachment {
    align-self: center; margin-left: var(--thread-gutter); margin-right: var(--thread-gutter); max-width: 86%;
  }
}

/* billing badges and alerts */
.managed-badge { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
  background: var(--hover); color: var(--muted); }
.managed-badge[data-provider="stripe"] { background: color-mix(in srgb, #635BFF 16%, var(--surface)); color: #635BFF; }
.managed-badge[data-provider="paypal"] { background: color-mix(in srgb, #0070E0 14%, var(--surface)); color: #1E6FC8; }
.managed-badge[data-provider="apple"] { background: var(--ink); color: var(--surface); }
.managed-badge[data-provider="google"] { background: color-mix(in srgb, #1E8E3E 14%, var(--surface)); color: #1E8E3E; }
.managed-badge[data-provider="huawei"] { background: color-mix(in srgb, #CF0A2C 12%, var(--surface)); color: #CF0A2C; }
.store-note { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--hover); font-size: 14px; color: var(--muted); }
.alert-bar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; width: min(720px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 16px; border-radius: 14px; font-size: 14px;
  background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); box-shadow: var(--shadow); }
.alert-bar[data-kind="switched"], .alert-bar[data-kind="ending"] { background: var(--accent-soft); border-color: transparent; }
.alert-bar span { flex: 1; }

/* ------------------------------------------------------------------ privacy and security settings */
.settings-main { width: min(860px, 100%); }
.page-title.left { text-align: left; margin: 16px 0 8px; font: 600 22px/1.2 var(--display); letter-spacing: -0.03em; }
.settings-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.settings-nav a { padding: 6px 12px; border-radius: 99px; background: var(--hover); color: var(--muted); font-size: 13.5px; text-decoration: none; }
.settings-nav a:hover { color: var(--ink); }
.settings-main .panel { scroll-margin-top: 16px; }
.settings-main .field { margin: 10px 0; }
.settings-main .field select, .settings-main .field input, .settings-main textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink); font: inherit; }
.settings-main .switch-row, .settings-main .sec-row { padding: 12px 0; border-top: 1px solid var(--line); }
.settings-main .sec-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.settings-main select { font: inherit; }
.profile-row { display: flex; gap: 16px; align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.avatar.big-avatar { width: 72px; height: 72px; font-size: 28px; border: 0; cursor: pointer; background-size: cover; background-position: center; }
.avatar.has-pic { background-color: var(--line); background-size: cover; background-position: center; color: transparent; }
.avatar.online { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ok); }
.name-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.tier-table { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 13.5px; }
.tier-table .t-row { display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); }
.tier-table .t-row > * { padding: 8px 10px; border-top: 1px solid var(--line); text-align: center; }
.tier-table .t-row:first-child > * { border-top: 0; background: var(--hover); font-weight: 600; color: var(--muted); }
.tier-table .t-row > :first-child { text-align: left; font-weight: 600; }
.tier-table .yes { color: var(--ok); }
.tier-table .no { color: var(--faint); }
.radio-set { border: 0; padding: 0; margin: 6px 0 14px; display: grid; gap: 8px; }
.radio-set legend { font-weight: 600; margin-bottom: 6px; }
.radio-set .check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.radio-set .check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio-set .check span { display: grid; gap: 2px; }
.radio-set small { color: var(--muted); font-size: 13px; }
.json-box.short { width: 100%; min-height: 90px; font-family: var(--text); }
.totp-setup { display: flex; gap: 18px; align-items: flex-start; padding: 14px; margin: 6px 0 10px; border-radius: 14px; background: var(--hover); flex-wrap: wrap; }
.totp-setup img { background: #fff; border-radius: 10px; padding: 6px; }
.mono-key { font-family: var(--mono); font-size: 15px; letter-spacing: 0.05em; word-break: break-all; }
.codes-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; padding: 14px; margin: 8px 0; border: 1px dashed var(--line);
  border-radius: 14px; font-family: var(--mono); font-size: 15px; }
.codes-box p { grid-column: 1 / -1; margin: 0 0 4px; font-family: var(--text); font-size: 13.5px; color: var(--muted); }
.device-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.device-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 14px; }
.danger, .ghost.danger { color: var(--danger); }
.danger-link { color: var(--danger) !important; }
.primary.danger-btn { background: var(--danger); color: #fff; }
.danger-row b { color: var(--danger); }
.delete-form { display: grid; gap: 4px; max-width: 420px; padding: 14px; margin-top: 8px; border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.panel.panic { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.panel.panic p { color: var(--muted); }

/* the app-lock cover */
.lock-cover { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.lock-card { width: min(360px, 100%); padding: 28px 24px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); text-align: center; display: grid; gap: 10px; justify-items: center; }
.lock-card h2 { margin: 6px 0 0; font: 800 22px/1.2 var(--display); }
.lock-card p { margin: 0; color: var(--muted); }
.nk-long-account { overflow-wrap: anywhere; font-family: var(--mono, ui-monospace, monospace); }
.lock-card .glyph { width: 40px; height: 40px; }
body.is-locked > :not(.lock-cover) { visibility: hidden; }

/* ------------------------------------------------------------------ messages: requests, profiles, privacy */
.req-link { display: flex; justify-content: space-between; align-items: center; margin: 2px 10px 4px; padding: 8px 12px; border: 0; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.req-link b { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 12px; text-align: center; }
.req-view { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: auto; }
.req-view .conv-title small { white-space: normal; }
.req-list { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 10px; }
.req-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); display: grid; gap: 6px; }
.req-card.spam { background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.req-top { display: grid; }
.req-top small { color: var(--faint); font-size: 12.5px; }
.req-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.req-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ghost.primary-ish { color: var(--accent); border-color: var(--accent); }
.quarantine { margin: 0 16px 16px; }
.quarantine summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: 6px 0; }
.quarantine .req-list { padding: 8px 0 0; }
.warn-line { margin: 0; padding: 6px 10px; border-radius: 10px; font-size: 13px; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent); overflow-wrap: anywhere; }
.warn-line small { display: block; color: var(--muted); }
.bubble .warn-line { margin-bottom: 6px; }
.fav-label { margin-top: 10px; }
.people li.person { gap: 8px; }
.person-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; }
.person-btn:disabled { cursor: default; }
.person-btn > span:last-child { display: grid; min-width: 0; }
.person-btn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-btn .avatar { width: 28px; height: 28px; font-size: 13px; }
.star { color: #E0A100; }
.mini-icon { font-size: 11px; margin-left: 4px; opacity: 0.75; }
.request-bar { background: var(--accent-soft); color: var(--accent); }
.ttl { color: var(--faint); font-size: 11.5px; }
.seen-mark { display: block; margin-top: 4px; text-align: right; color: var(--faint); font-size: 11.5px; }
.fwd-btn { margin-left: auto; padding: 1px 8px !important; font-size: 11.5px !important; opacity: 0; transition: opacity 0.15s; }
.bubble:hover .fwd-btn, .bubble:focus-within .fwd-btn { opacity: 1; }
@media (hover: none) { .fwd-btn { opacity: 0.7; } }
.risky-link { color: var(--danger); text-decoration: line-through; overflow-wrap: anywhere; }
.bubble a { color: var(--accent); overflow-wrap: anywhere; }
.locked-msg { color: var(--muted); font-style: italic; }
.bubble.filtered > :not(.filtered-cover) { display: none; }
.filtered-cover { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-style: italic; cursor: pointer; padding: 0; }
.link-card { display: flex; gap: 10px; margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); max-width: 420px; }
.link-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.link-card span { display: grid; gap: 2px; min-width: 0; }
.link-card small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.msgr-info .field { display: grid; gap: 4px; margin: 6px 0 10px; font-size: 13px; }
.msgr-info .field span { font-weight: 600; }
.msgr-info select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; }
.msgr-info .switch-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; }
.msgr-info .switch-row b { font-size: 13.5px; }
.msgr-info .switch-row small { font-size: 12px; }
.ask-form { display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ask-form input, .ask-form textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; resize: vertical; }
.ask-form .side-label, .ask-form .side-note { margin: 0; }
.ask-form .dir-results { max-height: 180px; overflow: auto; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--panel, var(--bg)); }
.ask-form .dir-results li { margin: 0; border-bottom: 1px solid var(--line); }
.ask-form .dir-results li:last-child { border-bottom: 0; }
.ask-form .dir-results button { width: 100%; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; }
.ask-form .dir-results button:hover, .ask-form .dir-results button:focus-visible { background: color-mix(in srgb, var(--accent, #5b8cff) 12%, transparent); outline: none; }
.ask-form .dir-results small { color: var(--muted); font-size: 12px; }
.ask-form .dir-results .kind-teams_only small { color: #c47a1a; }
.ask-form .dir-results .kind-axork small { color: var(--accent, #5b8cff); }
#profile-dialog .profile-row { margin: 10px 0 14px; }
#profile-dialog .avatar.big-avatar { cursor: default; }
.pf-handle { margin: 0 0 4px; font-weight: 600; }
#pf-bio { margin: 6px 0 0; }
#pf-form select, #pf-form input[type="text"], #pf-form #pf-nick { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; }
#pf-form .check { display: flex; gap: 8px; align-items: center; margin: 10px 0; font-size: 14px; }
#pf-form .side-note { margin: 4px 0 12px; }
@media (max-width: 640px) {
  .name-grid { grid-template-columns: 1fr; }
  .tier-table { font-size: 12px; }
  .tier-table .t-row { grid-template-columns: 1.2fr repeat(5, minmax(0, 1fr)); }
  .tier-table .t-row > * { padding: 6px 4px; }
  .settings-main .sec-row { flex-direction: column; align-items: stretch; }
  .profile-row { flex-direction: column; }
}

#profile-dialog, #fwd-dialog { padding: 18px 20px 16px; }
#profile-dialog form { padding: 0; }
.name-grid #save-profile { align-self: end; justify-self: start; margin-bottom: 10px; }
.name-grid .wide-cell { align-self: center; }
.msgr-info .danger-link { font-size: 13.5px; text-decoration: none; padding: 4px 0; }
.msgr-info .danger-link:hover { text-decoration: underline; }

.mail-warning { margin: 10px 0; padding: 10px 14px; border-radius: 12px; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); font-size: 14px; }
.mail-warning p { margin: 2px 0; overflow-wrap: anywhere; }
.mail-warning small { display: block; color: var(--muted); }
.privacy-note { margin: 6px 0 10px; }
.file-chip.risky { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.read-files .warn-line { margin-top: 4px; }
.html-tools { display: flex; gap: 14px; flex-wrap: wrap; }
.c-noforward { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
#burner-form select { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.tag.lite { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); color: var(--ok); }

/* legal pages */
.page-main.legal { width: min(820px, 100%); line-height: 1.65; }
.legal h1 { font: 800 34px/1.15 var(--display); margin: 18px 0 6px; }
.legal h2 { font: 700 21px/1.3 var(--display); margin: 34px 0 8px; scroll-margin-top: 16px; }
.legal h3 { margin: 0 0 6px; font-size: 16px; }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal-meta { color: var(--muted); }
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.legal-toc a { padding: 5px 11px; border-radius: 99px; background: var(--hover); color: var(--muted); font-size: 13px; text-decoration: none; }
.plan-terms { display: grid; gap: 12px; }
.plan-term { padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.plan-term ul { margin: 0; }

.terms-dialog { padding: 20px 22px; }
.t-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.t-money div { display: grid; padding: 10px 12px; border-radius: 12px; background: var(--hover); }
.t-money small { color: var(--muted); font-size: 12px; }
.t-money b { font: 700 17px/1.3 var(--display); }
.t-list { margin: 4px 0 10px; padding-left: 20px; font-size: 14px; color: var(--muted); max-height: 220px; overflow: auto; }
.t-list li { margin: 3px 0; }
.t-agree { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 14px; }
.t-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Upgrading mid-cycle (upgrade-choice.js, upgrades.py): the two ways side by side, one column on a phone. */
.up-dialog { max-width: min(860px, calc(100vw - 32px)); }
.up-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 12px 0; }
.up-opt { display: grid; align-content: start; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink); cursor: pointer; min-width: 0; }
.up-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.up-head { display: flex; gap: 8px; align-items: center; min-height: 24px; }
.up-today { font: 700 22px/1.2 var(--display); }
.up-sub { color: var(--muted); font-size: 12px; }
.up-summary { margin: 6px 0; font-size: 14px; }
.up-facts .pf-label { max-width: none; }

.alert-bar[data-kind="credits"] { background: var(--accent-soft); border-color: transparent; }
.alert-bar[data-kind="credits_high"] { background: color-mix(in srgb, #E0A100 16%, var(--surface)); border-color: color-mix(in srgb, #E0A100 40%, transparent); }
.buy-dialog { padding: 18px 20px; }
.buy-packs { display: grid; gap: 8px; margin: 12px 0; }
.buy-pack { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.buy-pack b { flex: 1; }
.buy-pack span { color: var(--muted); }
.buy-or { text-align: center; margin: 6px 0 0; }

.att.in-drive { opacity: 0.6; border-style: dashed; }
.att.in-drive .att-meta { color: var(--accent); }
.file-pill.drive-card { text-decoration: none; color: inherit; border: 1px dashed var(--accent); }
.file-pill.drive-card small { display: block; color: var(--accent); font-size: 11px; }

/* drive */
.drive-main { width: min(900px, 100%); }
.drive-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.drive-upload { cursor: pointer; display: inline-flex; align-items: center; }
.drive-meter { margin: 14px 0 4px; }
.drop-zone { display: none; margin: 12px 0; padding: 28px; border: 2px dashed var(--accent); border-radius: 18px; text-align: center; color: var(--accent); }
.drop-zone.on { display: block; }
.drive-list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.drive-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); flex-wrap: wrap; }
.drive-row.busy { opacity: 0.7; }
.d-name { flex: 1; min-width: 180px; display: grid; }
.d-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-name small { color: var(--muted); font-size: 12.5px; }
.d-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.c-files .in-drive { opacity: 0.7; border-style: dashed; }

.chat-credit { display: flex; align-items: center; gap: 12px; margin: 0 auto 8px; width: min(760px, calc(100% - 32px)); padding: 10px 12px 10px 16px;
  border-radius: 14px; font-size: 14px; background: color-mix(in srgb, #E0A100 14%, var(--surface)); border: 1px solid color-mix(in srgb, #E0A100 40%, transparent); }
.chat-credit span { flex: 1; }
.chat-credit[data-level="95"], .chat-credit[data-level="100"] { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.buy-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin: 10px 0; }
.buy-presets button { display: grid; padding: 8px; border-radius: 12px; font-weight: 700; }
.buy-presets small { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.buy-amount input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; }
.buy-quote { font-weight: 600; margin: 8px 0; }
.buy-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

.topup-row, .auto-row { max-width: 820px; margin: 14px auto 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.topup-row .field input, .auto-fields input { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; width: 100%; }
.topup-actions { display: flex; gap: 8px; margin: 8px 0; }
.auto-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 8px; }
@media (max-width: 560px) { .auto-fields { grid-template-columns: 1fr; } }
.theme { position: relative; margin-left: auto; }
.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 268px;
  padding: 14px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 40;
}
.theme-auto { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.theme-range { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.theme-range input[type="range"] { flex: 1; height: 14px; margin: 0; -webkit-appearance: none; appearance: none; border: 1px solid var(--line);
  border-radius: 999px; background: var(--tint-track, linear-gradient(90deg, #FFFFFF 0%, #F4F4F6 50%, #2A2A2E 50%, #141416 100%)); cursor: pointer; }
.theme-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.theme-range input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent);
  background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.theme-range input[type="range"]::-moz-range-track { background: transparent; }
.theme-range input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-range input[type="range"]:disabled { opacity: 0.55; }
.tint-pick { margin-top: 10px; }
.theme-note { margin: 10px 0 0; font-size: 12px; color: var(--faint); line-height: 1.4; }
.theme { margin-left: 0; } .topbar .theme + .icon-btn { margin-left: 0; }

/* owner: fraud, pool, audit */
.fraud-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.fraud-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.fraud-item.sev-3 { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.fraud-item p { margin: 6px 0; }
.f-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.f-top time { margin-left: auto; color: var(--faint); font-size: 12.5px; }
.f-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pool-balance { font-size: 18px; margin: 8px 0 12px; }
.gov-forms { display: grid; gap: 8px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 140px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; }
.tag.danger { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); color: var(--danger); }
.notice-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 auto 8px; width: min(760px, calc(100% - 32px)); padding: 10px 14px;
  border-radius: 14px; background: var(--accent-soft); font-size: 14px; }
.notice-bar span { flex: 1; }
.notice-bar.warn { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }

/* organization */
.org-main { width: min(1000px, 100%); }
.seat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.seat { display: grid; padding: 12px 14px; border-radius: 14px; background: var(--hover); }
.seat span { color: var(--muted); font-size: 13.5px; }
.add-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; align-items: end; }
.add-grid .primary { margin-bottom: 10px; }
.org-main td select, .org-main td input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; max-width: 130px; }
.org-main td small { display: block; }
.backup-pick { margin: 0; flex-direction: row; align-items: center; gap: 8px; }
.backup-pick select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
@media (max-width: 720px) { .add-grid { grid-template-columns: 1fr; } }

/* Gangspace hub — interactive lounge + phone-style status bar */
.gs-workspace .main { display: flex; flex-direction: column; min-height: 0; position: relative; }
.gs-workspace .main.empty { overflow-y: auto; }
.gs-workspace .gs-empty { flex: 1; display: grid; place-items: center; padding: 24px 16px 48px; overflow: auto; }
.gs-workspace .gs-empty .welcome { display: block; max-width: 640px; margin: 0 auto; text-align: center; }
.gs-workspace .gs-empty .env-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gs-workspace .gs-hub { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr) 240px; overflow: hidden; }
.gs-workspace .gs-rail, .gs-workspace .gs-assets { overflow: auto; padding: 16px 14px; background: color-mix(in srgb, var(--surface) 70%, var(--sidebar)); }
.gs-workspace .gs-rail { border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.gs-workspace .gs-assets { border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.gs-workspace .gs-feed { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 22px 22px 32px; overflow: auto; }
.gs-role { display: inline-flex; align-items: center; margin-left: 8px; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.gs-channels, .gs-members, .gs-inboxes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 3px; }
.gs-channels button { width: 100%; text-align: left; display: grid; gap: 2px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.gs-channels button b { color: var(--ink); font-weight: 600; font-size: 13px; }
.gs-channels button small, .gs-members small { color: var(--muted); font-size: 11px; }
.gs-channels button:hover, .gs-channels button.on { background: var(--accent-soft); color: var(--accent); }
.gs-channels button.on b { color: var(--accent); }
.gs-members li { padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.gs-channel-form { display: flex; gap: 6px; margin: 0 0 12px; padding: 0 4px; }
.gs-channel-form input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; }
.gs-active-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.gs-meter-note { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.gs-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-rail-shortcuts { display: grid; gap: 4px; margin: 0 0 14px; }
.gs-rail-shortcuts button {
  text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: 600 12.5px var(--text); cursor: pointer;
}
.gs-rail-shortcuts button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gs-pulse { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.gs-pulse li { padding: 8px 10px; border-radius: 10px; background: var(--hover); color: var(--muted); font-size: 12px; line-height: 1.4; }


/* ---- Lounge mosaic ---- */
.gs-lounge-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.gs-hello { margin: 0 0 4px; color: var(--muted); font: 600 13px var(--text); }
.gs-lounge-hero h2 { margin: 0; font: 800 clamp(26px, 3vw, 36px)/1.1 var(--display); letter-spacing: -.03em; }
.gs-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gs-mosaic {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px;
}
.gs-card {
  grid-column: span 4; min-height: 148px; padding: 14px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--surface); box-shadow: 0 10px 28px rgba(16,22,42,.05);
  cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display: flex; flex-direction: column; gap: 10px; outline: none;
}
.gs-card:hover, .gs-card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 16px 36px rgba(16,22,42,.1); }
.gs-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.gs-card-wide, .gs-card-drive { grid-column: span 8; }
.gs-card-vault {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #1a1f3d), color-mix(in srgb, #6b7cff 70%, var(--accent)));
  color: #fff; border-color: transparent;
}
.gs-card-vault header small, .gs-card-vault .gs-row small { color: rgba(255,255,255,.78); }
.gs-card-vault .gs-row b { color: #fff; }
.gs-card header { display: flex; align-items: center; gap: 8px; }
.gs-card header b { flex: 1; font: 700 15px var(--text); }
.gs-card header small { color: var(--muted); font-size: 12px; }
.gs-card-ico { font-size: 15px; }
.gs-card-body { display: grid; gap: 6px; }
.gs-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.gs-row b { font-weight: 600; }
.gs-row small { color: var(--muted); }
.gs-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.gs-drive-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.gs-drive-strip.big { flex-wrap: wrap; }
.gs-thumb {
  flex: none; width: 92px; height: 78px; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, #f3e8ff 70%, var(--bg)));
  display: grid; align-content: end; gap: 2px; padding: 8px; text-align: left; cursor: pointer; color: var(--ink); font: inherit;
}
.gs-thumb i { font-style: normal; font-weight: 800; font-size: 12px; color: var(--accent); }
.gs-thumb span { font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-thumb-img { background-size: cover; background-position: center; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.gs-thumb-img span { align-self: end; }
.gs-people-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-people-row.large { gap: 12px; }
.gs-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font: 700 12px var(--text);
}
.gs-people-row.large .gs-avatar {
  width: auto; min-width: 72px; height: auto; padding: 10px; border-radius: 14px; gap: 6px;
}
.gs-people-row.large .gs-avatar small { display: block; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; font-weight: 500; }
.gs-chip {
  display: inline-flex; padding: 7px 10px; border-radius: 999px; background: var(--hover);
  color: var(--ink); text-decoration: none; font: 600 12.5px var(--text); margin: 0 6px 6px 0;
}
.gs-chip:hover { background: var(--accent-soft); color: var(--accent); }
.gs-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.gs-group {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); text-align: left; cursor: pointer; font: inherit; color: var(--ink);
}
.gs-group:hover { border-color: var(--accent); }
.gs-group b { font-size: 13.5px; }
.gs-group small { color: var(--muted); font-size: 11px; }
.gs-card-channel { grid-column: span 4; background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }

.gs-preview-stage {
  margin-top: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
  overflow: hidden; box-shadow: 0 14px 36px rgba(16,22,42,.08);
}
.gs-preview-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 14px 14px 12px; border-bottom: 1px solid var(--line);
}
.gs-preview-head b { display: block; font: 700 16px var(--display); }
.gs-preview-head small { color: var(--muted); font-size: 12.5px; }
.gs-preview-actions { display: flex; align-items: center; gap: 6px; }
.gs-preview-body { padding: 14px; display: grid; gap: 8px; max-height: 280px; overflow: auto; }
.gs-preview-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid transparent; font: inherit; color: var(--ink);
}
.gs-preview-row.btn, .gs-preview-row.linkish { cursor: pointer; text-decoration: none; }
.gs-preview-row:hover { border-color: var(--line); }
.gs-preview-row span { color: var(--muted); font-size: 12.5px; }

.tg-panel { display: grid; gap: 8px; }
.tg-panel .tg-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 1100px) {
  .gs-workspace .gs-hub { grid-template-columns: minmax(0, 1fr) 220px; }
  .gs-workspace .gs-rail { display: none; }
  .gs-card, .gs-card-wide, .gs-card-drive, .gs-card-channel { grid-column: span 6; }
}
@media (max-width: 760px) {
  .gs-workspace .gs-hub { grid-template-columns: 1fr; }
  .gs-workspace .gs-assets { display: none; }
  .gs-card, .gs-card-wide, .gs-card-drive, .gs-card-channel { grid-column: span 12; }
}

/* libraries */
.lib-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 10px 0 4px; }
.lib-bar button { min-width: 0; padding: 7px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; cursor: pointer; }
.lib-bar button:hover { color: var(--ink); border-color: var(--faint); }
.lib-bar button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.env-stage { flex: 1; min-height: 0; overflow: auto; padding: 28px 30px 12px; }
.env-card { max-width: 640px; margin: 0 auto; }
.env-card h2 { margin: 0 0 10px; font: 600 clamp(26px, 3vw, 36px)/1.15 var(--display); letter-spacing: -.03em; }
.env-card p { margin: 0 0 16px; color: var(--muted); max-width: 46em; }
.env-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.env-note, .env-stats { margin: 0; color: var(--muted); font-size: 13.5px; }
.env-stats { display: grid; gap: 8px; list-style: none; padding: 0; max-width: 420px; }
.env-stats li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.env-stats b { color: var(--ink); font-weight: 600; }
.main.env-open .thread { visibility: hidden; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.main.env-open .workspace-apps { display: none; }
.main.env-open .env-stage { display: block; }

.libs { position: relative; display: grid; gap: 6px; margin: 4px 0 8px; }
.lib-switch { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.lib-switch span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.lib-menu { position: absolute; top: 44px; left: 0; right: 0; z-index: 30; display: grid; padding: 6px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow); max-height: 340px; overflow: auto; }
.lib-menu button { display: flex; justify-content: space-between; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.lib-menu button:hover, .lib-menu button.on { background: var(--hover); }
.lib-menu button.on { font-weight: 700; }
.lib-menu button.new { color: var(--accent); }
.lib-menu button.danger { color: var(--danger); }
.lib-menu small { color: var(--faint); }
.lib-filter { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--hover); }
.lib-filter button { flex: 1; border: 0; padding: 4px 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.lib-filter button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.task-add { display: flex; gap: 4px; }
.task-add input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; }
.task-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: 10px; font-size: 14px; }
.task-item:hover { background: var(--hover); }
.task-title { flex: 1; min-width: 0; display: grid; overflow: hidden; }
.task-title small, .lib-tag { color: var(--faint); font-size: 11.5px; }
.lib-tag { display: block; }
.task-check { flex: none; width: 16px; height: 16px; border: 2px solid var(--faint); border-radius: 5px; background: none; cursor: pointer; padding: 0; }
.task-item.doing .task-check { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.task-item.done .task-check { border-color: var(--ok); background: var(--ok); }
.task-item.done .task-title { color: var(--faint); text-decoration: line-through; }
.libs, .libs * { box-sizing: border-box; }
.libs { min-width: 0; max-width: 100%; }
.lib-switch, .lib-filter, .task-add { max-width: 100%; }
.libs { grid-template-columns: minmax(0, 1fr); width: 100%; }
.lib-filter button { min-width: 0; }
.task-add input { width: 0; }

/* vault */
.vault-main { width: min(1100px, 100%); }
.vault-head-actions { display: flex; gap: 8px; align-items: center; }
.vault-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; }
.vault-tools input, .vault-tools select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.vault-tools input { flex: 1; min-width: 200px; }
.view-toggle { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--hover); }
.view-toggle button { border: 0; background: none; padding: 6px 8px; border-radius: 9px; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.view-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); }
.view-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.type-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.type-chips button { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; }
.type-chips button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.type-chips small { color: var(--faint); }
.vault-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px;
  border-radius: 12px; background: var(--sidebar); }
.vault-bar .check { display: flex; gap: 6px; align-items: center; margin-right: auto; font-size: 14px; }
.vault-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vault-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.vault-item.picked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.v-thumb { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--hover); cursor: pointer; display: grid; place-items: center; }
.v-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v-icon { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: 0.03em; }
.v-icon.t-pdf { color: #D64545; } .v-icon.t-sheet { color: #1E9A57; } .v-icon.t-doc { color: #2E6BF0; } .v-icon.t-audio { color: #A048D6; } .v-icon.t-code { color: #C27C0E; }
.v-name { flex: 1; min-width: 0; display: grid; }
.v-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-name small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-actions { display: flex; gap: 6px; }
.vault-list.grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.vault-list.grid .vault-item { position: relative; flex-direction: column; align-items: stretch; padding: 8px; }
.vault-list.grid .v-thumb { width: 100%; height: 140px; }
.vault-list.grid .v-icon { font-size: 22px; }
.vault-list.grid .v-check { position: absolute; top: 12px; left: 12px; z-index: 1; }
.vault-list.grid .v-actions { justify-content: space-between; }
#v-viewer { width: min(1000px, calc(100% - 24px)); }
#v-viewer img { display: block; max-width: 100%; max-height: calc(80 * var(--vh, 1vh)); margin: 0 auto; }
@media (max-width: 640px) { .vault-item .v-actions { display: none; } .vault-list.grid .v-actions { display: flex; } }

/* account menu */
.account-row { display: flex; align-items: center; gap: 4px; }
.account-row .account-btn { flex: 1; min-width: 0; }
.account-btn .tier { color: var(--muted); font-weight: 500; }
.account-btn .chev { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }
.account-menu { position: fixed; z-index: 60; width: min(360px, calc(calc(100 * var(--vw, 1vw)) - 16px)); max-height: calc(calc(100 * var(--vh, 1vh)) - 90px); overflow: auto; padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35);
  transform-origin: 16px 100%; animation: am-bloom 0.22s ease; }
@keyframes am-bloom {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .account-menu { animation: none; } }
.account-menu .am-email { margin: 6px 10px 6px; color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.account-menu .am-card { margin: 4px 4px 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.account-menu .am-tier { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 3px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.account-menu .am-meter { display: grid; gap: 4px; margin: 8px 0 0; }
.account-menu .am-meter span { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); }
.account-menu .am-bar { display: block; height: 6px; border-radius: 99px; background: var(--hover); overflow: hidden; }
.account-menu .am-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); }
.account-menu .am-label { margin: 8px 10px 4px; color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.account-menu .am-idents { display: grid; gap: 4px; margin: 0 4px 8px; }
.account-menu .am-idents button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.account-menu .am-idents button.on { border-color: var(--accent); background: var(--accent-soft); }
.account-menu .am-idents small { margin-left: auto; color: var(--faint); font-size: 11.5px; }
.account-menu .am-audit { list-style: none; margin: 0 4px 8px; padding: 0; display: grid; gap: 4px; max-height: 120px; overflow: auto; }
.account-menu .am-audit li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; color: var(--muted); font-size: 12.5px; }
.account-menu .am-audit time { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.account-menu .am-token { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 8px 10px; border-radius: 10px; background: var(--hover); font-size: 13px; }
.account-menu .am-token code { flex: 1; font-family: var(--mono); font-size: 12.5px; }
.account-menu .am-token .ghost { width: auto; flex: none; padding: 4px 10px; }
.account-menu a, .account-menu > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-decoration: none; text-align: left; cursor: pointer; }
.account-menu a:hover, .account-menu > button:hover, .account-menu a:focus-visible, .account-menu > button:focus-visible { background: var(--hover); outline: 0; }
.account-menu svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.account-menu span { flex: 1; }
.account-menu kbd, .account-menu .am-val { color: var(--faint); font: inherit; font-size: 12.5px; }
.account-menu .am-chev { width: 16px; height: 16px; color: var(--faint); transition: transform 0.15s; }
.account-menu button.open .am-chev { transform: rotate(90deg); }
.account-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.am-sub { display: grid; padding: 2px 0 4px 40px; max-height: 260px; overflow: auto; }
.am-sub a, .am-sub button { padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; text-decoration: none; }
.am-sub a:hover, .am-sub button:hover { background: var(--hover); color: var(--ink); }
.am-sub button.on { color: var(--accent); font-weight: 600; }
.skill-btn.on { color: var(--accent); }

/* settings */
.usage-meters { display: grid; gap: 14px; margin: 10px 0 14px; }
.meter-row { display: grid; gap: 5px; }
.meter-top { display: flex; justify-content: space-between; font-size: 14px; }
.meter-top span, .meter-row small { color: var(--muted); }
.pace { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #E0A100 14%, var(--surface)); font-size: 14px; }
.mem-list { margin: 10px 0; }
.mem-list li > span:first-child b { font-weight: 500; }
.skill-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.skill-item { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; }
.skill-item p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skill-form { display: grid; gap: 8px; margin-top: 8px; }
.skill-form input, .skill-form textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; }
#connectors .sec-row, #plugins .switch-row { padding: 10px 0; border-top: 1px solid var(--line); }

/* help center */
.help-search { width: 100%; box-sizing: border-box; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 15px; }
.help-steps { padding-left: 22px; }
.help-steps li { margin: 8px 0; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin: 8px 0; padding: 0 14px; }
.faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.faq details p { margin: 0 0 12px; color: var(--muted); }
.support-form { display: grid; gap: 4px; max-width: 560px; }
.support-form .field { display: grid; gap: 4px; margin-top: 10px; font-size: 14px; font-weight: 500; }
.support-form input, .support-form select, .support-form textarea, dialog.compose select, dialog.compose textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; }
.support-form .compose-foot .side-note { margin: 0; }
.report-link { background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; padding: 2px 6px; }
.report-link:hover { color: var(--ink); text-decoration: underline; }
#reports .fine, #reports blockquote { text-align: left; }
#reports blockquote { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--line); background: var(--hover); border-radius: 6px; }
#reports .f-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
#reports .fine a { color: var(--accent, inherit); }

/* share sheet (bottom sheet on phones, centered card on larger screens) */
dialog.share-sheet { width: min(440px, calc(100% - 24px)); padding: 10px 20px 22px; border: 0; border-radius: 28px; background: var(--bg); color: var(--ink); box-shadow: var(--shadow); box-sizing: border-box; }
dialog.share-sheet::backdrop { background: rgba(10, 14, 30, 0.45); }
.sheet-grip { width: 40px; height: 5px; border-radius: 9px; background: var(--line); margin: 0 auto 6px; }
.sheet-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 14px; }
.sheet-head h2 { margin: 0; text-align: center; font: 600 18px/1.2 var(--display, inherit); }
.sheet-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.sheet-close svg, .sheet-chip svg, .sheet-opt svg, .sheet-go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sheet-chip { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--hover); font-size: 16px; }
.sheet-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sheet-label { margin: 22px 0 8px 14px; color: var(--muted); font-size: 15px; }
.sheet-options { border-radius: 18px; background: var(--surface); overflow: hidden; }
.sheet-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.sheet-opt + .sheet-opt { position: relative; }
.sheet-opt + .sheet-opt::before { content: ""; position: absolute; top: 0; left: 54px; right: 18px; height: 1px; background: var(--line); }
.sheet-opt span { flex: 1; }
.sheet-opt i { display: none; color: var(--accent, #2f5bff); }
.sheet-opt.on i { display: block; }
.sheet-opt:focus-visible { outline: 2px solid var(--accent, #2f5bff); outline-offset: -2px; }
.sheet-note { margin: 10px 14px 0; color: var(--muted); font-size: 14px; min-height: 1.2em; }
.sheet-extra { margin: 10px 14px 0; font-size: 13px; color: var(--muted); }
.sheet-url { display: flex; gap: 8px; margin-top: 12px; }
.sheet-url input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 13px; }
.sheet-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 26px; padding: 17px; border: 0; border-radius: 99px; background: var(--ink); color: var(--bg); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.sheet-go[hidden] { display: none; }
.sheet-go:disabled { opacity: 0.6; }
@media (max-width: 600px) {
  dialog.share-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 28px 28px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
.share-chat-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; margin-left: auto; }
.share-chat-btn[hidden] { display: none; }
.share-chat-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.share-chat-btn + .theme { margin-left: 0; }
.perm-box { margin: 10px 0 0; padding: 6px 12px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.perm-box legend { padding: 0 6px; font-size: 13px; font-weight: 600; }
.perm-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 14px; cursor: pointer; }
.perm-row + .perm-row, #share-members .perm-row:first-child { border-top: 1px solid var(--line); }
.perm-row input { width: 18px; height: 18px; accent-color: var(--accent, #2f5bff); }
.perm-row input:disabled + span { color: var(--muted); }
.perm-all span { font-weight: 600; }
.perm-warn { margin: 8px 2px; padding: 9px 11px; border-radius: 12px; background: color-mix(in srgb, #f5a524 14%, var(--surface)); font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.invites { margin: 4px 0 10px; }
.invite-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.invite-card { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent, #2f5bff) 40%, var(--line)); border-radius: 14px; background: var(--surface); }
.invite-card small { color: var(--muted); font-size: 12.5px; }
.ghost.tiny.primary-ish { background: var(--accent, #2f5bff); color: #fff; border-color: transparent; }

/* public shared-chat page */
.shared-main { max-width: 780px; }
.shared-head { padding: 18px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.shared-kind { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.shared-head h1 { margin: 6px 0 4px; font: 800 30px/1.15 var(--display); overflow-wrap: anywhere; }
.shared-thread { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.s-msg { display: grid; gap: 6px; min-width: 0; }
.s-msg.user { justify-items: end; }
.s-msg.user .s-body { max-width: 85%; padding: 10px 14px; border-radius: 18px; background: var(--hover); white-space: pre-wrap; overflow-wrap: anywhere; }
.s-msg.assistant .s-body { line-height: 1.6; overflow-wrap: anywhere; }
.s-msg.assistant .s-body pre { overflow-x: auto; }
.s-msg.system { justify-items: center; }
.s-msg.system .s-body { color: var(--muted); font-size: 13px; text-align: center; }
.s-author { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.s-img { max-width: min(100%, 420px); border-radius: 14px; }
.shared-foot { margin: 30px 0 40px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.share-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.share-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.share-item span { flex: 1; min-width: 0; display: grid; }
.share-item small { color: var(--muted); font-size: 12.5px; }
.share-item.revoked, .share-item.expired { opacity: 0.6; }

/* ===== chat extras (same look: tokens, radii and chips as the rest of the chat) ===== */
.actions { flex-wrap: wrap; }
.act.fb-thumb[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.user-acts { display: flex; justify-content: flex-end; gap: 2px; margin-top: -4px; opacity: 0.38; transition: opacity 0.15s; }
.msg-user:hover .user-acts, .msg-user:focus-within .user-acts { opacity: 1; }
@media (pointer: coarse) { .user-acts { opacity: 1; } }
.user-acts .add-file-act { display: none; }
.msg-user.latest .user-acts .add-file-act { display: inline-flex; }
.act.copy-act.copied, .act.copy-act.copied:hover { color: var(--ok, #138a4b); background: color-mix(in srgb, var(--ok, #138a4b) 14%, transparent); cursor: default; opacity: 1; }
.act.copy-act:disabled { opacity: 1; }
.file-x { display: none; place-items: center; width: 20px; height: 20px; margin: 0 -2px 0 2px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); color: var(--ink); cursor: pointer; flex: none; }
.file-x svg { width: 12px; height: 12px; }
.msg-user.latest:hover .file-x, .msg-user.latest:focus-within .file-x { display: inline-grid; }
.msg-user.editing .msg-files { display: none; }
.thumb-wrap { position: relative; display: inline-block; }
.thumb-wrap .file-x { position: absolute; top: 4px; right: 4px; margin: 0; background: color-mix(in srgb, var(--surface) 88%, transparent); }
@media (pointer: coarse) { .msg-user.latest .file-x { display: inline-grid; } }
.edit-box { width: min(640px, 100%); display: grid; gap: 8px; justify-self: end; }
.edit-box textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 18px; background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.edit-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.edit-files .att { width: 200px; }
.edit-bar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.edit-bar .side-note { margin: 0 auto 0 0; }
.edit-bar .edit-add { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; }

/* Message queue: prompts waiting while a reply streams. */
.queue { width: min(768px, 100%); margin: 0 auto 8px; display: grid; gap: 6px; }
.queue-head { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 12.5px; color: var(--muted); }
.queue-head span { margin-right: auto; font-weight: 600; letter-spacing: 0.02em; }
.queue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 38vh; overflow-y: auto; }
.queued { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: start; gap: 6px; padding: 6px 6px 6px 4px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 16px;
  background: color-mix(in srgb, var(--bubble) 62%, transparent); opacity: 0.86; transition: opacity 0.15s, transform 0.15s; }
.queued:hover, .queued:focus-within, .queued.open { opacity: 1; }
.queued.dragging { opacity: 0.45; transform: scale(0.98); }
.q-grip { display: grid; place-items: center; width: 22px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--faint); cursor: grab; }
.q-grip:active { cursor: grabbing; }
.q-grip svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.q-grip:hover, .q-grip:focus-visible { color: var(--ink); background: var(--hover); }
.q-num { display: grid; place-items: center; min-width: 20px; height: 20px; margin-top: 5px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; }
.q-main { display: grid; gap: 6px; min-width: 0; }
.q-files { display: flex; flex-wrap: wrap; gap: 6px; }
.q-files:empty { display: none; }
.q-files .att { width: 190px; padding: 4px 2px 4px 4px; }
.q-files .att .ext, .q-files .att img { width: 28px; height: 28px; }
.q-files .att { grid-template-columns: 28px minmax(0, 1fr) auto; }
.q-bubble { display: block; width: 100%; padding: 5px 4px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left;
  white-space: pre-wrap; overflow-wrap: break-word; cursor: text; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.q-text { display: grid; gap: 6px; }
.q-text textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.q-done { justify-self: end; }
.q-tools { display: flex; gap: 2px; }
.q-tools .icon-btn { width: 30px; height: 30px; border-radius: 10px; }
.q-tools .icon-btn svg { width: 16px; height: 16px; }

/* web sources */
a.cite { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin: 0 1px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; text-decoration: none; vertical-align: 2px; }
.sources { margin-top: 14px; }
.sources-head { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.sources ol { list-style: none; counter-reset: src; display: flex; gap: 8px; overflow-x: auto; padding: 0 0 4px; margin: 0; }
.sources li { counter-increment: src; flex: 0 0 auto; }
.sources a { display: grid; gap: 2px; width: 190px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.sources a:hover { border-color: var(--faint); }
.sources a b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sources a b::before { content: counter(src) "  "; color: var(--accent); }
.sources a small { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* composer additions */
.compare-pick { height: 34px; max-width: 170px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.mic-btn { width: 34px; height: 34px; border-radius: 50%; }
.mic-btn svg { width: 18px; height: 18px; }
.mic-btn.rec { color: #fff; background: var(--danger); animation: mic-pulse 1.2s ease-in-out infinite; }
.mic-btn[aria-pressed="true"]:not(.rec) { color: var(--accent); background: var(--accent-soft); }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mic-btn.rec { animation: none; } }
.temp-btn svg { width: 19px; height: 19px; }
.temp-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.temp-note { margin: 8px auto 0; max-width: 760px; text-align: center; font-size: 12.5px; color: var(--muted); }
body.temp-mode .composer { border-style: dashed; }
@media (max-width: 560px) { .compare-pick { max-width: 120px; } }

/* "/" saved prompts */
.composer { position: relative; }
.slash-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 8px); max-height: 300px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); z-index: 30; }
.slash-head { margin: 4px 10px 6px; font-size: 12px; font-weight: 600; color: var(--faint); }
.slash-menu button { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.slash-menu button.on, .slash-menu button:hover { background: var(--hover); }
.slash-menu small { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* compare */
.msg-compare { position: relative; display: grid; gap: 6px; }
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; transition: grid-template-columns 0.45s ease; }
.cmp-col { display: grid; align-content: start; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); min-width: 0;
  transition: opacity 0.4s ease, transform 0.45s ease, border-color 0.2s; }
.cmp-col.done { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cmp-head { display: flex; align-items: center; gap: 8px; }
.cmp-head .model-label { margin: 0; }
.cmp-tag { padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; }
.cmp-col .body { line-height: 1.6; overflow-wrap: anywhere; }
.cmp-pick { justify-self: start; margin-top: 4px; }
.msg-compare.merging .cmp-grid { grid-template-columns: minmax(0, 1fr); }
.cmp-col.loser { opacity: 0; transform: scale(0.96); position: absolute; pointer-events: none; }
.cmp-col.winner { border-color: var(--accent); }
.cmp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 2px 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.cmp-side { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cmp-side select { min-width: 150px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; }
.cmp-side select:disabled { opacity: 0.6; }
.cmp-vs { color: var(--faint); font-size: 12px; }
.cmp-hint { margin: 0 0 0 auto; }
@media (max-width: 720px) { .cmp-hint { display: none; } }
.cmp-err { color: var(--danger); }
.cmp-note { margin: 0; text-align: center; }
@media (max-width: 720px) { .cmp-grid { grid-template-columns: minmax(0, 1fr); } }

/* canvas cards in messages */
.cv-card { display: flex; align-items: center; gap: 12px; width: min(420px, 100%); margin: 8px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.cv-card:hover { border-color: var(--accent); }
.cv-card svg { width: 26px; height: 26px; flex: none; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cv-card span { display: grid; min-width: 0; }
.cv-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-card small { color: var(--faint); font-size: 12.5px; }
.cv-card.writing { cursor: default; border-style: dashed; }

/* canvas side panel */
.shell.canvas-open { grid-template-columns: 272px minmax(0, 1fr) minmax(380px, 46%); }
.shell.collapsed.canvas-open { grid-template-columns: minmax(0, 1fr) minmax(380px, 50%); }
.canvas-panel { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--surface); }
.canvas-panel[hidden] { display: none; }
.shell.canvas-open .canvas-panel.canvas-pop {
  animation: canvas-pop 0.28s ease-out;
}
@keyframes canvas-pop {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
.cv-layout { display: flex; flex: 1; min-height: 0; }
.cv-timeline { flex: 0 0 168px; overflow: auto; border-right: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cv-timeline button { display: grid; gap: 2px; width: 100%; padding: 8px 9px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font: inherit; font-size: 12.5px; cursor: pointer; }
.cv-timeline button:hover, .cv-timeline button.on { background: var(--hover); }
.cv-timeline button b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cv-timeline button small { color: var(--faint); font-size: 11px; }
.cv-timeline .cv-empty { margin: 10px 6px; color: var(--faint); font-size: 12.5px; }
.cv-hist { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 600; }
.cv-stage { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.cv-diff { flex: 1; margin: 0; padding: 14px 18px; overflow: auto; background: var(--bg); font: 12.5px/1.55 var(--mono); white-space: pre-wrap; }
.cv-diff[hidden] { display: none; }
.cv-scratch { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 10px 12px 12px; gap: 10px; overflow: auto; }
.cv-scratch[hidden] { display: none; }
.cv-scratch > p { margin: 0; font-size: 13.5px; }
.cv-scratch-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 0; flex: 1; }
.cv-scratch-panes section { display: flex; flex-direction: column; min-width: 0; min-height: 140px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.cv-scratch-panes h3 { margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 650; color: var(--muted); }
.cv-scratch-panes pre { flex: 1; margin: 0; padding: 10px 12px; overflow: auto; font: 12.5px/1.5 var(--mono); white-space: pre-wrap; }
.cv-scratch-tools { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) {
  .cv-scratch-panes { grid-template-columns: 1fr; }
}
.cv-diff .add { background: color-mix(in srgb, var(--ok) 16%, transparent); }
.cv-diff .del { background: color-mix(in srgb, var(--danger) 16%, transparent); text-decoration: line-through; }
.cv-diff .meta { color: var(--faint); }
.cv-purge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); font-size: 13px; }
.cv-purge[hidden] { display: none; }
.cv-purge span { flex: 1; min-width: 160px; }
.cv-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cv-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.cv-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px/1.2 var(--display); }
.cv-title select { max-width: 150px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--ink); font: inherit; font-size: 12.5px; }
.cv-title select[hidden] { display: none; }
.cv-tools { display: flex; align-items: center; gap: 4px; }
.cv-mode button { padding: 4px 10px; font-size: 13px; }
.cv-body { flex: 1; overflow: auto; padding: 18px 22px; line-height: 1.65; }
.cv-body[hidden] { display: none; }
.cv-code { margin: 0; padding: 14px; border-radius: 12px; background: var(--bg); font: 13px/1.55 var(--mono); white-space: pre; overflow: auto; }
.cv-editor { flex: 1; margin: 0; padding: 18px 22px; border: 0; outline: 0; resize: none; background: var(--surface); color: var(--ink); font: 14px/1.6 var(--mono); }
.cv-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.cv-frame[hidden], .cv-editor[hidden] { display: none; }
.cv-save { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); }
.cv-save[hidden] { display: none; }
.cv-save .side-note { margin: 0 auto 0 0; }
.cv-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.cv-ask[hidden] { display: none; }
.cv-ask input { min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--ink); font: inherit; }
.cv-sel { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-sel[hidden] { display: none; }
@media (max-width: 860px) {
  .shell.canvas-open, .shell.collapsed.canvas-open { grid-template-columns: minmax(0, 1fr); }
  .canvas-panel { position: fixed; inset: 0; z-index: 60; border-left: 0; padding-bottom: env(safe-area-inset-bottom); }
}

/* Ctrl+K palette */
dialog.palette { width: min(620px, calc(100% - 24px)); margin: calc(12 * var(--vh, 1vh)) auto auto; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog.palette::backdrop { background: rgba(10, 14, 30, 0.4); }
.palette input { width: 100%; box-sizing: border-box; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 16px; outline: 0; }
.palette-list { list-style: none; margin: 0; padding: 6px; max-height: calc(52 * var(--vh, 1vh)); overflow: auto; }
.palette-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.palette-list li.on, .palette-list li:hover { background: var(--hover); }
.palette-list li span { display: grid; min-width: 0; flex: 1; }
.palette-list li b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-list li small { color: var(--faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-list li em { font-style: normal; color: var(--faint); font-size: 12px; }
.palette-list li.empty { color: var(--faint); cursor: default; }
.palette-foot { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; }
.palette-foot kbd { padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px; font: 11px var(--mono); }
.prompt-form { display: grid; gap: 8px; margin-top: 10px; }
.prompt-form input, .prompt-form textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; }
.prompt-form button { justify-self: start; }
@media (max-width: 440px) {
  .composer-bar { gap: 2px; }
  #voice-mode { display: none; }
  .composer-bar .picker-btn { padding-left: 6px; padding-right: 6px; }
}

/* inside the phone apps: store billing only */
.native-app #credits, .native-app .topup-row, .native-app .auto-row, .native-app [data-web-checkout] { display: none !important; }
.native-app .page-top { padding-top: max(12px, env(safe-area-inset-top)); }
/* Google and Microsoft block sign-in inside app web views, so the apps offer email and Apple */
.native-app .provider-btn[data-provider="google"], .native-app .provider-btn[data-provider="microsoft"] { display: none; }
.engine { display: block; color: var(--faint); font-size: 12px; font-weight: 400; }

/* follow-up chips and second opinions */
.followups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.followups button { padding: 7px 13px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.followups button:hover { border-color: var(--accent); color: var(--accent); }
.msg-ai:not(:last-child) .followups { display: none; }
.msg-ai.second-opinion .content { padding-left: 12px; border-left: 3px solid var(--accent-soft); }
.msg-ai.second-opinion .model-label { color: var(--accent); }

/* Drive chat folders */
.chat-folders { margin-top: 26px; }
.chat-folders h2 { font: 700 20px/1.2 var(--display); margin: 0 0 4px; }
.fold { margin: 4px 0 4px 14px; }
#chat-folders > .fold { margin-left: 0; }
.fold > summary { cursor: pointer; padding: 5px 4px; font-weight: 600; color: var(--muted); }
.chat-fold { margin: 6px 0 6px 14px; padding: 4px 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.chat-fold > summary { display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.chat-fold > summary small { color: var(--faint); font-weight: 400; font-size: 12.5px; }
.fold-acts { display: flex; gap: 6px; margin: 4px 0 6px; }
.fold-head { margin: 8px 0 2px; font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; }
.fold-files { list-style: none; margin: 0; padding: 0; }
.fold-files li { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.fold-files small { color: var(--faint); font-size: 12px; }
.mail-toggle { white-space: nowrap; flex: none; }
@media (max-width: 1100px) { .composer-bar .mail-toggle span { display: none; } .composer-bar .mail-toggle { padding: 0 9px; } }

/* ===== in-page docked overlays (Axork Stage Cards + compact docks) ===== */
.pop-row { position: fixed; right: 132px; bottom: 0; z-index: 70; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 12px; pointer-events: none; }
.dock-win { pointer-events: auto; display: flex; flex-direction: column; width: 380px; height: min(560px, calc(calc(100 * var(--vh, 1vh)) - 80px)); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 16px 16px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -8px 32px -8px rgba(23, 32, 54, 0.38); overflow: hidden; }
/* Chatbot and mail: one-third larger than the 380×560 base (507×747). */
.dock-win.bot, .dock-win.mail { width: 507px; height: min(747px, calc(calc(100 * var(--vh, 1vh)) - 80px)); }
/* Messenger Stage Cards: landscape postcard (wider than tall) */
.dock-win.msg { width: 460px; height: min(360px, calc(calc(100 * var(--vh, 1vh)) - 120px)); border-radius: 22px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: 0 18px 50px rgba(16, 22, 42, 0.18); }

/* ---- Stage Cards shell (bottom-center fan deck) ---- */
.ax-stage {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 72; width: min(560px, calc(100vw - 48px));
  display: grid; justify-items: center; gap: 10px; pointer-events: none;
}
.ax-stage[hidden] { display: none !important; }
.ax-stage-badge {
  pointer-events: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow); font: 700 12px var(--text);
}
.ax-stage-badge i { display: grid; place-items: center; color: var(--accent); }
.ax-stage-badge i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ax-stage-badge b {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font: 700 11px var(--text);
}
.ax-stage-deck {
  position: relative; width: 100%; height: min(380px, calc(100vh - 140px));
  pointer-events: none;
}
.ax-stage-deck .ax-stage-card {
  position: absolute; left: 50%; bottom: 0; margin-left: -230px;
  pointer-events: auto; transform-origin: 50% 100%;
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s ease, opacity 0.2s ease;
}
.ax-stage-deck .ax-stage-card.is-front {
  transform: translate(0, 0) scale(1); opacity: 1;
  box-shadow: 0 22px 60px rgba(16, 22, 42, 0.22);
}
.ax-stage-deck .ax-stage-card.is-peek {
  cursor: pointer;
  transform: translate(calc(var(--stage-i) * -42px), calc(var(--stage-i) * -14px)) scale(calc(1 - var(--stage-i) * 0.045));
  opacity: calc(1 - var(--stage-i) * 0.12);
  filter: saturate(0.92);
}
.ax-stage-deck .ax-stage-card.is-peek .dw-list,
.ax-stage-deck .ax-stage-card.is-peek .dw-form,
.ax-stage-deck .ax-stage-card.is-peek .dw-note,
.ax-stage-deck .ax-stage-card.is-peek .dw-tray,
.ax-stage-deck .ax-stage-card.is-peek .dw-teams-pill span,
.ax-stage-deck .ax-stage-card.is-peek .dw-titles small,
.ax-stage-deck .ax-stage-card.is-peek .dw-btn:not(.dw-call):not([data-act="close"]) {
  visibility: hidden;
}
.ax-stage-deck .ax-stage-card.is-peek .dw-head { border-bottom-color: transparent; }
.ax-stage-rail {
  pointer-events: auto; display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(16,22,42,.12);
  backdrop-filter: blur(12px);
}
.ax-stage-rail-btn {
  width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); cursor: pointer;
}
.ax-stage-rail-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ax-stage-rail-btn:hover { background: var(--accent); color: var(--accent-ink); }
.ax-stage-rail-track { display: flex; gap: 6px; align-items: center; padding: 0 8px; }
.ax-stage-rail-track i {
  width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 55%, var(--line));
  display: block;
}
.ax-stage-rail-track i:nth-child(odd) { width: 16px; border-radius: 99px; height: 6px; }
.dw-teams-pill {
  height: 32px; padding: 0 12px 0 10px; border-radius: 999px; border: 0;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #6264A7; color: #fff; font: 700 12.5px var(--text); flex: none;
}
.dw-teams-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dw-teams-pill:hover { filter: brightness(1.06); }
body.dock-stage-on .pop-row-msg { right: 16px; bottom: 18px; }
body.dock-stage-on .dock-bubbles-msg { bottom: 18px; }

/* Layers switcher — tap to bring Chatbot / Group / Chat forward without covering the page */
.ax-layer-bar {
  position: fixed; left: 16px; bottom: 18px; z-index: 74;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-radius: 999px; background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(16,22,42,.14);
  backdrop-filter: blur(12px);
}
.ax-layer-bar[hidden] { display: none !important; }
.ax-layer-label {
  font: 700 11px var(--text); color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; padding: 0 6px;
}
.ax-layer-btn {
  height: 34px; padding: 0 12px 0 10px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: transparent; color: var(--ink); font: 600 12.5px var(--text);
}
.ax-layer-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ax-layer-btn:hover { background: var(--hover); }
.ax-layer-btn.on { background: var(--accent); color: var(--accent-ink); }

/* Compact sizes when Chatbot + Group + Messenger are open together —
   keep a clear page lane in the middle; Layers bar swaps which kind is sharp. */
body.dock-layered .pop-row-bot .dock-win.bot {
  width: 340px; height: min(248px, calc(34 * var(--vh, 1vh)));
  border-radius: 0 0 16px 16px;
}
body.dock-layered .pop-row-msg .dock-pair {
  height: min(280px, calc(38 * var(--vh, 1vh)));
}
body.dock-layered .pop-row-msg .dock-pair .dock-win.grp { width: 300px; }
body.dock-layered .dock-pair.open .dp-side { width: 312px; }
body.dock-layered .dp-side .dock-win.attached { width: 280px; }
body.dock-layered .ax-stage { width: min(400px, calc(100vw - 96px)); bottom: 58px; }
body.dock-layered .ax-stage-deck { height: min(260px, calc(36 * var(--vh, 1vh))); }
body.dock-layered .ax-stage-deck .ax-stage-card {
  width: 380px; height: min(260px, calc(36 * var(--vh, 1vh))); margin-left: -190px;
}
body.dock-layered .layer-back {
  opacity: 0.68; filter: saturate(0.8) brightness(0.98);
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
/* Scale only non-stage docks — Stage Cards keep their fan transforms */
body.dock-layered .layer-back:not(.ax-stage-card) {
  transform: scale(0.94);
  transform-origin: bottom center;
}
body.dock-layered .pop-row-bot .layer-back { transform-origin: top right; }
body.dock-layered .layer-front {
  opacity: 1; filter: none; z-index: 80 !important;
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
body.dock-layered.dock-stage-on .pop-row-msg { bottom: 58px; right: 8px; }
body.dock-layered .dock-bubbles-msg { bottom: 58px; }
body.dock-layered .ax-layer-bar { bottom: 12px; left: 12px; }

@media (max-width: 700px) {
  .ax-stage { left: 0; right: 0; bottom: 0; width: 100%; transform: none; padding: 0; }
  .ax-stage-badge, .ax-stage-rail, .ax-layer-bar { display: none; }
  .ax-stage-deck { height: calc(78 * var(--vh, 1vh)); }
  .ax-stage-deck .ax-stage-card {
    left: 0; margin-left: 0; width: 100%; height: calc(78 * var(--vh, 1vh));
    border-radius: 18px 18px 0 0;
  }
  .ax-stage-deck .ax-stage-card.is-peek { display: none; }
}
.dw-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 18px 10px 12px 14px; border-bottom: 1px solid var(--line); flex: none; cursor: grab; }
.dw-head:active { cursor: grabbing; }
.dw-grab { position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 99px; background: currentColor; opacity: 0.28; pointer-events: none; }
.dock-win.bot .dw-head { background: var(--accent); color: var(--accent-ink); border-bottom-color: transparent; }
.dw-av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
.dock-win.bot .dw-av { background: color-mix(in srgb, var(--accent-ink) 18%, transparent); color: var(--accent-ink); }
.dw-av svg, .dw-btn svg, .dw-send svg, .dock-bubble svg, .dm-av svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dw-titles { display: grid; min-width: 0; flex: 1; }
.dw-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.dw-sub { font-size: 13px; opacity: 0.78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-btn { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.dock-win.msg .dw-btn { color: var(--accent); }
.dock-win.msg .dw-btn.dw-teams-call { color: #6264A7; }
.dock-win.msg .dw-btn.dw-teams-call:hover { background: color-mix(in srgb, #6264A7 14%, transparent); }
.dw-btn:hover { background: var(--hover); }
.dock-win.bot .dw-btn:hover { background: rgba(255, 255, 255, 0.16); }
/* Spacious pop-out chat chrome — larger type, airier bubbles, less cramped composer */
.dw-list { list-style: none; margin: 0; padding: 18px 16px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.dw-msg { display: grid; max-width: 88%; gap: 4px; }
.dw-msg.mine { align-self: flex-end; justify-items: end; }
.dw-msg.theirs { align-self: flex-start; }
.dw-bub { position: relative; padding: 12px 16px; border-radius: 20px; background: var(--bubble); line-height: 1.55; font-size: 16px; overflow-wrap: anywhere; }
.dw-msg.mine .dw-bub { background: var(--accent); color: var(--accent-ink); white-space: pre-wrap; }
.dock-win.bot .dw-msg.theirs { max-width: 100%; }
.dock-win.bot .dw-msg.theirs .dw-bub { background: none; padding: 4px 2px; border-radius: 0; font-size: 16.5px; line-height: 1.58; }
.dw-bub p { margin: 0 0 10px; } .dw-bub p:last-child { margin-bottom: 0; }
.dw-bub pre { overflow-x: auto; font-size: 13.5px; } .dw-bub table { font-size: 13.5px; display: block; overflow-x: auto; }
.dw-bub img { max-width: 100%; border-radius: 14px; display: block; }
.dw-msg.sys { align-self: center; max-width: 100%; } .dw-msg.sys .dw-bub { background: none; color: var(--faint); font-size: 13px; text-align: center; }
.dw-who, .dw-at { font-size: 12.5px; color: var(--faint); padding: 0 8px; }
.dw-empty { margin: auto; color: var(--faint); font-size: 15px; text-align: center; line-height: 1.5; padding: 12px; max-width: 22em; }
.dw-gone { max-width: 16em; }
.dw-err { color: var(--danger); }
.dw-typing { display: inline-flex; gap: 5px; } .dw-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: dw-blink 1.2s infinite; }
.dw-typing i:nth-child(2) { animation-delay: 0.2s; } .dw-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dw-blink { 50% { opacity: 0.25; } }
.dw-note { margin: 0; padding: 8px 14px; font-size: 13.5px; color: var(--danger); border-top: 1px solid var(--line); }
.dw-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.dw-model { flex: 1 0 100%; max-width: 100%; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; }
.dw-model-locked { opacity: 0.92; cursor: default; font-weight: 600; }
.dock-win.relay-dock .dw-head { background: linear-gradient(135deg, var(--accent), var(--accent)); }
.dw-form textarea { flex: 1; min-width: 0; resize: none; max-height: 140px; padding: 12px 16px; border: 0; border-radius: 22px; background: var(--hover); color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.dw-send { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); cursor: pointer; }

/* App dock — circles per application; hover opens a vertical Windows-style window stack */
.dock-bubbles { position: fixed; right: 76px; bottom: 0; z-index: 71; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 8px; }
.dock-bubble { position: relative; height: 48px; display: grid; place-items: center; box-shadow: var(--shadow); }
.dock-bubble .db-open { height: 48px; border: 0; background: var(--surface); color: var(--accent); font: 700 13px var(--text); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.dock-bubble.chip, .dock-bubble.chip .db-open, .dock-bubble.more { width: 48px; height: 48px; border-radius: 50%; justify-content: center; }
.dock-bubble.tab { width: auto; max-width: 176px; border-radius: 12px 12px 0 0; }
.dock-bubble.tab .db-open { width: auto; max-width: 176px; padding: 0 12px 0 8px; border-radius: 12px 12px 0 0; }
.dock-bubble .db-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.dock-bubble .db-face { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.dock-bubble.bot .db-open { background: var(--accent); color: var(--accent-ink); }
.dock-bubble.bot .db-open svg, .dock-bubble.mail .db-open svg, .dock-app .db-open svg { width: 20px; height: 20px; }
.dock-bubble.mail .db-open { background: var(--surface); color: var(--accent); }
.dock-bubble .db-close { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; display: none; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
.dock-bubble .db-close svg { width: 13px; height: 13px; }
.dock-bubble:hover .db-close, .dock-bubble:focus-within .db-close { display: grid; }
.db-dot { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }
.dock-bubble.more { border: 0; background: var(--ink); color: var(--bg); font: 700 14px var(--text); cursor: pointer; }
.dock-app { transition: transform 0.15s ease; }
.dock-app.is-open, .dock-app:hover { transform: translateY(-3px); }
.dock-app-count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 10px var(--text);
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(16,22,42,.2);
}
.dock-app.bot .dock-app-count { background: var(--accent-ink); color: var(--accent); }
.dock-flyout {
  position: fixed; z-index: 95; min-width: 220px; max-width: 280px;
  padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(16,22,42,.22);
  backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 4px;
  animation: dock-fly-in 0.16s ease;
}
@keyframes dock-fly-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dock-flyout-bot { animation-name: dock-fly-in-bot; }
@keyframes dock-fly-in-bot {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dock-flyout-head {
  margin: 2px 8px 6px; font: 700 11px var(--text); color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.dock-flyout-item {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px;
  border: 0; border-radius: 12px; background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}
.dock-flyout-item:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, var(--line)); }
.dock-flyout-item.is-min { opacity: 0.92; }
.dock-flyout-thumb { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.dock-flyout-face {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 12px;
}
.dock-flyout-face svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dock-flyout-copy { display: grid; min-width: 0; }
.dock-flyout-copy b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-flyout-copy small { color: var(--muted); font-size: 11.5px; }
.dock-flyout-x {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%;
  color: var(--faint); opacity: 0;
}
.dock-flyout-item:hover .dock-flyout-x { opacity: 1; }
.dock-flyout-x:hover { background: var(--hover); color: var(--ink); }
.dock-flyout-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* Free desktop windows — drag header, stretch edges, capped max size */
.dock-free {
  position: fixed !important; z-index: 90; margin: 0 !important;
  border-radius: 16px !important; border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 22px 60px rgba(16, 22, 42, 0.28) !important;
  max-width: min(920px, 92vw); max-height: min(780px, 86vh);
  transform: none !important; filter: none !important; opacity: 1 !important;
  pointer-events: auto;
}
.dock-free.dock-pair { border-bottom: 2px solid var(--pair, var(--accent)) !important; display: flex; }
.dock-free.dock-pair .dock-win { height: 100%; }
.dock-free.dock-pair .dock-win.grp { width: auto; flex: 1; min-width: 240px; }
.dock-free .dw-head { cursor: grab; }
.dock-free .dw-head:active { cursor: grabbing; }
.dock-free .dw-grab { opacity: 0.45; }
.dw-rz {
  position: absolute; z-index: 6; background: transparent; touch-action: none;
}
.dock-free .dw-rz { display: block; }
.dock-win:not(.dock-free) .dw-rz,
.dock-pair:not(.dock-free) .dw-rz { display: none; }
.dw-rz-n { top: -3px; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.dw-rz-s { bottom: -3px; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.dw-rz-e { right: -3px; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.dw-rz-w { left: -3px; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.dw-rz-ne { top: -3px; right: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.dw-rz-nw { top: -3px; left: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.dw-rz-se { bottom: -3px; right: -3px; width: 16px; height: 16px; cursor: nwse-resize; }
.dw-rz-sw { bottom: -3px; left: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.dw-rz-se::after {
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px;
  border-right: 2px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--ink) 35%, transparent);
}
@media (max-width: 700px) {
  .dw-rz, .dock-flyout { display: none !important; }
}
.dock-menu { position: fixed; right: 84px; bottom: 16px; z-index: 72; width: 290px; max-height: calc(70 * var(--vh, 1vh)); overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.dm-head { margin: 6px 10px; font-size: 12px; font-weight: 600; color: var(--faint); }
.dm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.dm-item:hover { background: var(--hover); }
.dm-item span:last-child { display: grid; min-width: 0; } .dm-item b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-item small { color: var(--faint); font-size: 12px; }
.dm-av { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 12px; }
.dm-item.bot .dm-av { background: var(--accent); color: var(--accent-ink); }
.popout-btn svg { width: 19px; height: 19px; }
@media (max-width: 700px) {
  .pop-row { right: 0; left: 0; }
  .dock-win, .dock-win.bot, .dock-win.msg, .dock-win.mail { width: calc(100 * var(--vw, 1vw)); height: calc(78 * var(--vh, 1vh)); border-radius: 18px 18px 0 0; }
  .dock-bubbles { bottom: 90px; right: 12px; }
  .dock-has-windows .dock-bubbles { display: none; }
  .dock-bubble, .dock-bubble .db-open { height: 48px; }
}
@media print { .pop-row, .dock-bubbles { display: none; } }

/* two mirrored rows: chatbots drop down from the top right, Messenger rises from the bottom right */
.pop-row.pop-row-bot { top: 0; bottom: auto; align-items: flex-start; }
.pop-row-bot .dock-win.bot { width: 507px; height: min(747px, calc(calc(100 * var(--vh, 1vh)) - 24px)); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 18px 18px; box-shadow: 0 6px 28px -6px rgba(23, 32, 54, 0.32); }
.pop-row-msg { bottom: 0; }
body.dock-split .pop-row-bot .dock-win.bot { height: calc(calc(50 * var(--vh, 1vh)) - 14px); }
body.dock-split .pop-row-msg .dock-win.msg { height: calc(calc(50 * var(--vh, 1vh)) - 14px); }
/* Layered mode wins over half-height split — otherwise the page disappears */
body.dock-layered.dock-split .pop-row-bot .dock-win.bot {
  height: min(248px, calc(34 * var(--vh, 1vh)));
}
body.dock-layered.dock-split .pop-row-msg .dock-win.msg,
body.dock-layered.dock-split .dock-pair {
  height: min(280px, calc(38 * var(--vh, 1vh)));
}
.dock-bubbles-bot { top: 72px; bottom: auto; flex-direction: column; }
.dock-bubbles-msg { right: 76px; bottom: 0; }
.dock-menu.top { top: 72px; bottom: auto; }
@media (max-width: 700px) {
  .pop-row-bot .dock-win.bot { width: calc(100 * var(--vw, 1vw)); height: calc(78 * var(--vh, 1vh)); border-radius: 0 0 18px 18px; }
  .dock-bubbles-bot { top: 64px; bottom: auto; }
}

/* title bar and controls on top, the message box at the bottom */
.pop-row-bot .dock-win.bot { box-shadow: 0 6px 28px -6px rgba(23, 32, 54, 0.32); }

/* + menu, file chips */
.dw-form { position: relative; }
.dw-plus { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.dw-plus svg, .dw-plus-menu svg, .dw-chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dw-plus:hover { background: var(--hover); }
.dw-plus.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dw-plus-menu { position: absolute; left: 10px; bottom: calc(100% + 6px); z-index: 5; min-width: 240px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 2px; }
.dw-plus-menu[hidden] { display: none; }
.dw-plus-menu > button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.dw-plus-menu > button span { flex: 1; }
.dw-plus-menu > button i { font-style: normal; font-size: 12px; color: var(--faint); }
.dw-plus-menu > button[aria-pressed="true"] i { color: var(--accent); font-weight: 600; }
.dw-plus-menu > button:hover { background: var(--hover); }
.dw-emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.dw-emoji button { border: 0; background: none; font-size: 20px; padding: 4px 0; border-radius: 8px; cursor: pointer; }
.dw-emoji button:hover { background: var(--hover); }
.dw-tray { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; flex: none; }
.dw-tray[hidden] { display: none; }
.dw-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 6px 5px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 12.5px; }
.dw-chip b { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-chip small { color: var(--faint); }
.dw-chip.error { border-color: var(--danger); } .dw-chip.error small { color: var(--danger); }
.dw-chip button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; }
.dw-chip button svg { width: 14px; height: 14px; }

/* ===== group pairs: Messenger on the left, Group Chatbot on the right, Axork blue ===== */
.dock-pair { --pair: var(--accent); position: relative; pointer-events: auto; display: flex; align-items: stretch; height: min(560px, calc(calc(100 * var(--vh, 1vh)) - 80px));
  border: 2px solid var(--pair); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--surface); overflow: hidden;
  box-shadow: 0 -8px 32px -8px rgba(23, 32, 54, 0.38); }
body.dock-split .dock-pair { height: calc(calc(50 * var(--vh, 1vh)) - 14px); }
.dp-band { display: none; }
.dock-pair .dock-win { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.dock-pair .dock-win.grp { width: 380px; flex: none; }
/* Peeking + rail is always 32px; Messenger adds 360px when open so the + never tucks away. */
.dp-side { width: 32px; flex: none; overflow: hidden; position: relative; transition: width 0.28s ease; border-right: 1px solid color-mix(in srgb, var(--pair) 40%, var(--line)); }
.dock-pair.open .dp-side { width: 392px; }
.dp-side .dock-win.attached { width: 360px; margin-left: 32px; }
.dp-tab { position: absolute; left: 0; top: 0; bottom: 0; width: 32px; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 18px 0 10px; border: 0; background: color-mix(in srgb, var(--pair) 16%, var(--surface)); color: var(--pair); cursor: pointer; }
.dp-tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dp-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 11px var(--text); letter-spacing: 0.04em; }
.dp-tab span[hidden] { display: none; }
.dock-pair.open .dp-tab { display: flex; background: color-mix(in srgb, var(--pair) 22%, var(--surface)); }
.dock-peek-menu { position: fixed; z-index: 80; width: 248px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 2px; }
.dock-peek-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dock-peek-menu button:hover:not(:disabled) { background: var(--hover); }
.dock-peek-menu button:disabled { opacity: 0.45; cursor: default; }
.dock-peek-menu svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--pair, var(--accent)); }
.dock-peek-menu span { display: grid; min-width: 0; }
.dock-peek-menu b { font-weight: 600; font-size: 13.5px; }
.dock-peek-menu small { color: var(--muted); font-size: 12px; }
.dp-consent { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--pair) 8%, var(--bg)); display: grid; gap: 8px; }
.dp-consent p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.dp-consent p span { display: block; margin-top: 4px; color: var(--muted); }
.dp-consent-link { justify-self: start; color: var(--pair, var(--accent)); font: 600 13px var(--text); text-decoration: none; }
.dp-consent-link:hover { text-decoration: underline; }
/* Vertical member faces sit between the dock row and the + FAB so docks never cover +. */
.dock-faces { position: fixed; right: 16px; bottom: 72px; z-index: 72; display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; pointer-events: none; }
.dock-faces[hidden] { display: none; }
.dock-face { pointer-events: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface); color: var(--accent); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; padding: 0; font: 700 12px var(--text); }
.dock-face:hover { transform: translateY(-1px); }
.dock-face.compose { background: var(--accent); color: var(--accent-ink); }
.dock-face svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.dock-has-pair .dock-bubbles-msg { right: 76px; }
.dw-inbox { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.dw-inbox-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
.dw-inbox-all { margin-left: auto; color: var(--accent); font: 600 13px var(--text); text-decoration: none; }
.dw-inbox-list { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1; display: grid; gap: 2px; align-content: start; }
.dw-inbox-item { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dw-inbox-item:hover { background: var(--hover); }
.dw-inbox-item.unread b { color: var(--accent); }
.dw-inbox-item small, .dw-inbox-item span { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-inbox .dw-empty { padding: 24px 16px; text-align: center; }
.dw-inbox-compose { margin: 0 12px 12px; }
@media (prefers-reduced-motion: reduce) { .dp-side { transition: none; } .dock-face:hover { transform: none; } }
/* title bar on top, message box at the bottom — Messenger wash on the left, solid Axork blue on the right */
.dock-pair .dw-head { padding-top: 12px; }
.dock-pair .dock-win.grp .dw-head { background: var(--pair); color: var(--accent-ink); border-bottom-color: transparent; }
.dock-pair .dock-win.grp .dw-av { background: color-mix(in srgb, var(--accent-ink) 20%, transparent); color: var(--accent-ink); }
.dock-pair .dock-win.grp .dw-btn { color: var(--accent-ink); }
.dock-pair .dock-win.grp .dw-btn:hover { background: color-mix(in srgb, var(--accent-ink) 18%, transparent); }
.dock-pair .dock-win.attached .dw-head { background: color-mix(in srgb, var(--pair) 28%, var(--surface)); border-bottom-color: color-mix(in srgb, var(--pair) 22%, var(--line)); }
.dock-pair .dock-win.attached .dw-av { background: var(--pair); color: var(--accent-ink); }
.dock-pair .dock-win.attached .dw-btn { color: var(--pair); }
.dock-pair .dw-msg.mine .dw-bub { background: var(--pair); color: var(--accent-ink); }
.dock-pair .dw-send { background: var(--pair); color: var(--accent-ink); }
.dock-pair .dw-plus.on { border-color: var(--pair); color: var(--pair); }
.dock-pair .dock-win.grp .dw-msg.ai { max-width: 100%; }
.dock-pair .dock-win.grp .dw-msg.ai .dw-bub { background: none; padding: 2px 0; border-radius: 0; }
.dock-pair .dw-msg.private .dw-bub { outline: 2px dashed color-mix(in srgb, var(--pair) 45%, transparent); outline-offset: 2px; }
.dw-side-btn { width: auto !important; padding: 0 10px; gap: 6px; display: inline-flex !important; align-items: center; border: 1px solid color-mix(in srgb, var(--accent-ink) 45%, transparent) !important; border-radius: 99px !important; position: relative; font: 600 12.5px var(--text); }
.dw-side-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--accent-ink) 22%, transparent) !important; }
.dw-side-btn svg { width: 16px; height: 16px; }
.dw-side-dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--danger); color: #fff; font: 700 11px/18px var(--text); font-style: normal; text-align: center; border: 2px solid var(--pair); }
.dw-row { flex: 1 0 100%; display: flex; gap: 6px; min-width: 0; }
.dw-row .dw-model { flex: 1; min-width: 0; }
.dw-target { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--faint); font: 500 12.5px var(--text); cursor: pointer; flex: none; }
.dw-target svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dw-target[aria-pressed="true"] { background: var(--pair); border-color: var(--pair); color: var(--accent-ink); }
.dw-dual { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); cursor: pointer; padding: 0; }
.dw-dual svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dw-dual[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dw-model-b { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--ink); font: inherit; font-size: 12.5px; }
.dw-dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 340px); }
.dw-dual-col { display: grid; gap: 6px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.dw-dual-col .dw-bub { max-height: 180px; overflow: auto; }
.dw-pick { height: 28px; border: 0; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 600 12px var(--text); cursor: pointer; }
.dw-pick:disabled { opacity: 0.45; cursor: default; }
.dw-pick-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dw-pick-person:hover { background: var(--hover); }
.dw-pick-person span:last-child { display: grid; min-width: 0; }
.dw-pick-person small { color: var(--faint); font-size: 12px; }
.dw-mail-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.dw-mail-form { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; min-height: 0; }
.dw-mail-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.dw-mail-row input, .dw-mail-row select, .dw-mail-form .dw-body, .dw-mail-ask textarea { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; }
.dw-mail-form .dw-body { flex: 1; min-height: 120px; resize: none; }
.dw-mail-actions { display: flex; justify-content: flex-end; }
.dw-mail-send { height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 600 13px var(--text); cursor: pointer; }
.dw-mail-send:disabled { opacity: 0.5; }

/* Gmail-style mail compose toolbox (dock + full Mail dialog) */
.dock-win.mail.compose-mode .dw-head { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
.dock-win.mail.compose-mode .dw-av { background: var(--accent-soft); color: var(--accent); }
.dock-win.mail.compose-mode .dw-btn { color: var(--muted); }
.dock-win.mail.compose-mode .dw-btn:hover { background: var(--hover); }
.dock-win.mail.compose-mode .dw-grab { opacity: 0.2; }
.dock-win.mail.compose-mode .dw-sub { display: none; }
.gmail-compose { gap: 0; padding: 0; background: var(--surface); }
.gmc-row { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); min-height: 40px; font-size: 13.5px; color: var(--muted); }
.gmc-row > span:first-child { width: 44px; flex: none; }
.gmc-row input, .gmc-row select { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; padding: 8px 0; }
.gmc-subject > span { display: none; }
.gmc-subject input { padding: 10px 0; font-size: 14px; }
.gmc-cc-btns { display: flex; gap: 8px; flex: none; }
.gmc-text { border: 0; background: none; color: var(--muted); font: 500 13px var(--text); cursor: pointer; padding: 0; }
.gmc-text:hover { color: var(--accent); }
.gmc-body { flex: 1; min-height: 160px; overflow: auto; padding: 12px 14px; color: var(--ink); font: 14.5px/1.5 var(--text); outline: none; }
.gmc-body:empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; }
.gmc-body img { max-width: 100%; border-radius: 8px; }
.gmc-body blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
.gmc-files { list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); }
.gmc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 12px; }
.gmc-chip b { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmc-chip small { color: var(--faint); }
.gmc-chip button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--faint); display: grid; place-items: center; cursor: pointer; padding: 0; }
.gmc-chip button svg { width: 12px; height: 12px; }
.gmc-format { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 10px 6px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 99px; background: color-mix(in srgb, var(--bg) 80%, var(--surface)); }
.gmc-format select { height: 28px; border: 0; background: transparent; color: var(--ink); font: 12.5px var(--text); max-width: 96px; }
.gmc-ico { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; }
.gmc-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gmc-ico:hover, .gmc-ico[aria-pressed="true"] { background: var(--hover); color: var(--ink); }
.gmc-bar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 8px 10px 10px; border-top: 1px solid var(--line); background: var(--surface); }
.gmc-send-wrap { position: relative; display: flex; margin-right: 6px; }
.gmc-send { height: 36px; padding: 0 16px; border: 0; border-radius: 18px 0 0 18px; background: var(--accent); color: var(--accent-ink); font: 600 13.5px var(--text); cursor: pointer; }
.gmc-send:disabled { opacity: 0.5; }
.gmc-send-more { width: 30px; height: 36px; border: 0; border-left: 1px solid color-mix(in srgb, var(--accent-ink) 28%, transparent); border-radius: 0 18px 18px 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.gmc-send-more svg { width: 16px; height: 16px; }
.gmc-send-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 6; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); display: grid; }
.gmc-send-menu button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.gmc-send-menu button:hover { background: var(--hover); }
.gmc-trash { margin-left: auto; }
.gmc-pop { position: absolute; left: 12px; bottom: calc(100% + 6px); z-index: 6; min-width: 220px; max-width: min(320px, 100%); max-height: 200px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.gmc-emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.gmc-emoji button { border: 0; background: none; font-size: 18px; padding: 4px 0; border-radius: 8px; cursor: pointer; }
.gmc-emoji button:hover { background: var(--hover); }
.gmc-lock { display: grid; gap: 8px; }
.gmc-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.gmc-drive { display: grid; gap: 2px; }
.gmc-drive button { border: 0; background: none; text-align: left; padding: 8px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmc-drive button:hover { background: var(--hover); }
.gmc-drive-empty { margin: 4px; color: var(--faint); font-size: 13px; }
.dw-thread { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: grid; gap: 8px; align-content: start; }
.dw-thread-meta { display: grid; gap: 2px; margin: 0; font-size: 13px; }
.dw-thread-meta small { color: var(--faint); }
.dw-thread-text { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.dw-mail-ask { display: flex; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--line); flex: none; }
.dw-mail-ask textarea { flex: 1; min-width: 0; resize: none; }
.dw-ask-log { list-style: none; margin: 0; padding: 8px 12px; flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.dock-win.mail .dw-head { background: var(--accent); color: var(--accent-ink); border-bottom-color: transparent; }
.dock-win.mail .dw-av { background: color-mix(in srgb, var(--accent-ink) 18%, transparent); color: var(--accent-ink); }
.dock-win.mail .dw-btn:hover { background: rgba(255, 255, 255, 0.16); }
.dw-head .dw-av svg, .dw-target svg { flex: none; }
.dock-bubble.grp .db-open { background: var(--pair, var(--accent)); color: var(--accent-ink); }
.db-badge { position: absolute; left: -3px; bottom: -3px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--pair, var(--accent)); box-shadow: var(--shadow); }
.db-badge svg { width: 14px !important; height: 14px !important; }
.dm-item.grp .dm-av { background: var(--pair, var(--accent)); color: var(--accent-ink); }
/* independent Messenger windows: same blue family as the pair's left pane */
.dock-win.msg:not(.attached) { border-top: 0; }
.dock-win.msg.ax-stage-card .dw-head { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); padding-top: 12px; }
.dock-win.msg.ax-stage-card .dw-grab { display: none; }
.dock-win.msg:not(.attached) .dw-av { background: var(--accent); color: var(--accent-ink); }
.dock-win.msg:not(.attached) .dw-btn { color: var(--accent); }
.dock-win.msg:not(.attached) .dw-send { background: var(--accent); color: var(--accent-ink); }
.dock-win.mail .dw-btn { color: var(--accent-ink); }
@media (max-width: 700px) {
  .dock-pair { width: calc(100 * var(--vw, 1vw)); height: calc(78 * var(--vh, 1vh)); }
  .dock-pair .dock-win.grp { width: 100%; flex: 1; }
  .dp-side { position: absolute; inset: 0 auto 0 0; z-index: 2; background: var(--surface); }
  .dock-pair.open .dp-side { width: 100%; }
  .dp-side .dock-win.attached { width: calc(100% - 32px); }
  .dw-side-btn span { display: none; }
  .dock-faces { display: none; }
}

/* everything rises from the bottom: chatbot, mail, group pairs and Messenger share one row */
.pop-row-msg .dock-win.bot, .pop-row-msg .dock-win.mail { width: 507px; height: min(747px, calc(calc(100 * var(--vh, 1vh)) - 90px)); }
.pop-row-msg .dock-pair { height: min(560px, calc(calc(100 * var(--vh, 1vh)) - 90px)); border: 2px solid var(--pair); border-bottom: 0;
  border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px -8px rgba(23, 32, 54, 0.38); }
.pop-row-msg .dock-pair .dock-win.attached { border-top: 0; }
.dock-menu.top { top: auto; bottom: 16px; }
@media (max-width: 700px) {
  .pop-row-msg .dock-win.bot, .pop-row-msg .dock-win.mail, .pop-row-msg .dock-pair { width: calc(100 * var(--vw, 1vw)); height: calc(78 * var(--vh, 1vh)); }
}

/* owner dashboard: what's left before launch */
.launch-card { display: block; margin: 12px 0 16px; border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.launch-card p { margin: 0 0 6px; }
.launch-card ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.launch-card li.crit { color: var(--ink); }
.launch-card li.crit b { color: var(--danger); }
#ops li.crit b, #ops tr.crit b, #ops td b { color: var(--danger); }
#ops .inline-form input[type="file"] { max-width: 100%; }

/* top-bar Upgrade / Sign up pill */
.upgrade-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 38px; padding: 0 16px 0 12px; border: 1px solid var(--line);
  border-radius: 99px; background: var(--surface); color: var(--accent); font: 600 15px var(--text); text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(23, 32, 54, 0.05), 0 6px 18px -10px rgba(23, 32, 54, 0.3); }
.upgrade-pill[hidden] { display: none; }
.upgrade-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.upgrade-pill:hover { background: var(--accent-soft); }
@media (max-width: 420px) { .upgrade-pill { height: 34px; padding: 0 12px 0 10px; font-size: 14px; } }

/* ===== support chat: aid bubble at the bottom left ===== */
.sp-bubble { position: fixed; left: calc(var(--sp-left, 16px) + env(safe-area-inset-left, 0px)); bottom: calc(var(--sp-bottom, 16px) + env(safe-area-inset-bottom, 0px));
  z-index: 74; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 16px; background: none; cursor: pointer;
  filter: drop-shadow(0 6px 14px rgba(23, 32, 54, 0.28)); transition: transform 0.15s ease; }
.sp-bubble:hover { transform: translateY(-2px); }
.sp-bubble.on { transform: scale(0.94); }
.sp-mark { width: 100%; height: 100%; display: block; }
.sp-mark-bg { fill: var(--accent); }
.sp-mark-a, .sp-mark-b { fill: none; stroke-width: 6; stroke-linecap: round; }
.sp-mark-a { stroke: var(--accent-ink); }
.sp-mark-b { stroke: #A9B5FF; }
.sp-dot { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }
.sp-panel { position: fixed; left: calc(var(--sp-left, 16px) + env(safe-area-inset-left, 0px)); bottom: calc(var(--sp-bottom, 16px) + 64px + env(safe-area-inset-bottom, 0px));
  z-index: 75; width: min(380px, calc(calc(100 * var(--vw, 1vw)) - 32px)); height: min(600px, calc(calc(100 * var(--vh, 1vh)) - var(--sp-bottom, 16px) - 96px)); display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.sp-panel[hidden] { display: none; }
.sp-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; background: var(--accent); color: var(--accent-ink); flex: none; }
.sp-head-mark { width: 34px; height: 34px; flex: none; }
.sp-head .sp-mark-bg { fill: rgba(255, 255, 255, 0.18); }
.sp-titles { display: grid; flex: 1; min-width: 0; }
.sp-titles b { font: 700 15.5px var(--text); }
.sp-titles small { font-size: 12.5px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.sp-x:hover { background: rgba(255, 255, 255, 0.16); }
.sp-x svg, .sp-send svg, .sp-person svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-list { list-style: none; margin: 0; padding: 14px 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.sp-msg { display: grid; gap: 3px; max-width: 86%; }
.sp-msg small { font-size: 11.5px; color: var(--faint); padding: 0 4px; }
.sp-bub { padding: 9px 13px; border-radius: 16px; background: var(--bubble); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sp-bub a { color: inherit; }
.sp-msg.customer { align-self: flex-end; }
.sp-msg.customer .sp-bub { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; }
.sp-msg.ai .sp-bub { border-bottom-left-radius: 6px; }
.sp-msg.agent .sp-bub { background: var(--accent-soft); border-bottom-left-radius: 6px; }
.sp-msg.system { align-self: center; max-width: 100%; text-align: center; }
.sp-msg.system .sp-bub { background: none; padding: 2px 8px; font-size: 12.5px; color: var(--muted); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; flex: none; }
.sp-chips[hidden] { display: none; }
.sp-chips button { padding: 6px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); font: 13px var(--text); cursor: pointer; }
.sp-chips button:hover { border-color: var(--accent); color: var(--accent); }
.sp-actions { display: flex; gap: 8px; padding: 0 12px 8px; flex: none; }
.sp-actions[hidden] { display: none; }
.sp-person, .sp-solved { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  color: var(--ink); font: 500 13px var(--text); cursor: pointer; }
.sp-person { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sp-person[hidden], .sp-solved[hidden] { display: none; }
.sp-email { display: grid; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); flex: none; font-size: 13px; }
.sp-email[hidden] { display: none; }
.sp-email label { display: grid; gap: 6px; color: var(--muted); }
.sp-email input { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 15px; }
.sp-rate { padding: 8px 12px; border-top: 1px solid var(--line); text-align: center; flex: none; }
.sp-rate[hidden] { display: none; }
.sp-rate p { margin: 0 0 4px; font-size: 13.5px; color: var(--muted); }
.sp-stars { display: flex; justify-content: center; gap: 4px; }
.sp-stars button { width: 34px; height: 34px; border: 0; background: none; color: var(--faint); cursor: pointer; border-radius: 8px; }
.sp-stars button:hover, .sp-stars button:hover ~ button { color: var(--faint); }
.sp-stars:hover button { color: #E8A317; }
.sp-stars button:hover ~ button { color: var(--faint); }
.sp-stars svg { width: 24px; height: 24px; fill: currentColor; }
.sp-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); flex: none; }
.sp-form textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 10px 14px; border: 0; border-radius: 20px; background: var(--hover); color: var(--ink); font: 15px var(--text); outline: none; }
.sp-send { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.sp-note { margin: 0; padding: 0 14px 10px; font-size: 12.5px; color: var(--danger); }
@media (max-width: 700px) {
  .sp-bubble { width: 46px; height: 46px; }
  .sp-panel { left: 8px !important; right: 8px; width: auto; height: min(calc(78 * var(--vh, 1vh)), calc(calc(100 * var(--vh, 1vh)) - var(--sp-bottom, 16px) - 80px)); bottom: calc(var(--sp-bottom, 16px) + 56px); }
}
@media print { .sp-bubble, .sp-panel { display: none; } }

/* ===== support desk (agents) ===== */
.desk-page { overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.desk-top { padding-block: 12px; }
.desk-title { display: grid; text-align: center; } .desk-title b { font: 800 18px var(--display); } .desk-title small { color: var(--muted); font-size: 12.5px; }
.desk { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 0; border-top: 1px solid var(--line); }
.desk-queue { display: flex; flex-direction: column; min-height: 0; background: var(--sidebar); border-right: 1px solid var(--line); }
.desk-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
.desk-tabs button { padding: 5px 10px; border: 0; border-radius: 99px; background: none; color: var(--muted); font: 500 13px var(--text); cursor: pointer; }
.desk-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.desk-tabs i { font-style: normal; font-weight: 700; color: var(--accent); margin-left: 2px; }
.desk-search { margin: 0 10px 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; }
.desk-list { list-style: none; margin: 0; padding: 0 6px 12px; overflow-y: auto; flex: 1; }
.desk-list button { display: grid; gap: 3px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.desk-list button:hover { background: var(--hover); } .desk-list button.on { background: var(--surface); box-shadow: var(--shadow); }
.dq-top { display: flex; justify-content: space-between; gap: 8px; } .dq-top b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dq-top small { color: var(--faint); font-size: 12px; flex: none; }
.dq-last { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dq-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.st { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--hover); color: var(--muted); }
.st.waiting { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.st.open { background: var(--accent-soft); color: var(--accent); }
.dq-unread { font-style: normal; margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.desk-none { padding: 24px 10px; color: var(--faint); font-size: 13.5px; text-align: center; }
.desk-convo { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.desk-empty { margin: auto; max-width: 360px; text-align: center; color: var(--muted); }
.desk-chat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.desk-chat[hidden] { display: none; }
.desk-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.desk-chat-head div:first-child { display: grid; min-width: 0; } .desk-chat-head small { color: var(--muted); font-size: 12.5px; }
.desk-chat-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.desk-reason { margin: 0; padding: 8px 16px; font-size: 13px; color: var(--muted); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-bottom: 1px solid var(--line); }
.desk-msgs { list-style: none; margin: 0; padding: 16px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.dm { display: grid; gap: 3px; max-width: 75%; } .dm small { font-size: 11.5px; color: var(--faint); padding: 0 4px; }
.dm-bub { padding: 9px 13px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.dm.agent, .dm.ai, .dm.note { align-self: flex-end; justify-items: end; }
.dm.agent .dm-bub { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.dm.ai .dm-bub { background: var(--accent-soft); border-color: transparent; }
.dm.note .dm-bub { background: color-mix(in srgb, #E8A317 16%, var(--surface)); border-style: dashed; }
.dm.system { align-self: center; max-width: 90%; text-align: center; } .dm.system .dm-bub { background: none; border: 0; color: var(--muted); font-size: 12.5px; padding: 2px; }
.desk-compose { padding: 10px 16px 14px; border-top: 1px solid var(--line); background: var(--surface); display: grid; gap: 8px; }
.desk-compose.note { background: color-mix(in srgb, #E8A317 8%, var(--surface)); }
.desk-compose-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.desk-compose select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); font-size: 13px; }
.desk-compose textarea { width: 100%; resize: vertical; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); font: 15px var(--text); }
.desk-compose-foot { display: flex; justify-content: space-between; align-items: center; }
.desk-customer { overflow-y: auto; padding: 16px; border-left: 1px solid var(--line); background: var(--surface); display: grid; align-content: start; gap: 6px; }
.desk-customer[hidden] { display: none; }
.desk-customer h2 { margin: 0; font: 800 20px var(--display); }
.desk-customer h3 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); }
.desk-customer .fine { margin: 0; font-size: 13px; color: var(--muted); }
.finding { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 6px; display: grid; gap: 4px; justify-items: start; }
.finding p { margin: 0; font-size: 13px; color: var(--muted); }
.finding.l3 { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.finding.l2 { border-color: color-mix(in srgb, #E8A317 55%, transparent); background: color-mix(in srgb, #E8A317 7%, var(--surface)); }
.dc-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13.5px; } .dc-facts dt { color: var(--muted); } .dc-facts dd { margin: 0; }
.dc-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dc-inline { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.dc-inline input, .dc-inline select { flex: 1; min-width: 90px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 13.5px; }
.dc-pay, .dc-trash, .dc-err { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.dc-pay li, .dc-trash li { display: flex; align-items: center; gap: 8px; } .dc-pay li span, .dc-trash li span { flex: 1; min-width: 0; color: var(--muted); }
.dc-err li { display: grid; gap: 2px; padding: 6px 8px; border-radius: 8px; background: var(--hover); } .dc-err small { color: var(--faint); }
.desk-locked { grid-column: 1 / -1; margin: auto; text-align: center; display: grid; gap: 10px; justify-items: center; }
.toast.bad { background: var(--danger); color: #fff; }
@media (max-width: 1100px) { .desk { grid-template-columns: 260px minmax(0, 1fr); } .desk-customer { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); max-height: calc(45 * var(--vh, 1vh)); } .desk-page { overflow: auto; } }
@media (max-width: 700px) { .desk { grid-template-columns: 1fr; } .desk-queue { max-height: calc(40 * var(--vh, 1vh)); } }
.support-cta { margin: 6px 0 14px; }
.desk-customer .fine { text-align: left; }
.desk-compose .segmented button { white-space: nowrap; }

/* ===================================================================== control center (/admin) */
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cc-privacy { display: flex; align-items: center; gap: 8px; }
.cc-privacy svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc-who { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 12px; }
.cc-who small { color: var(--muted); }
.cc-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 18px; border-bottom: 1px solid var(--line); }
.cc-tabs button { border: 0; background: none; padding: 10px 14px; font: 600 14.5px/1 var(--sans, inherit); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.cc-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.cc-tabs i { font-style: normal; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; margin-left: 4px; }
.cc-tabs i:empty { display: none; }
.cc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cc-chip { --c: #5A6478; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-chip { color: color-mix(in srgb, var(--c) 55%, white); } }
:root[data-theme="dark"] .cc-chip { color: color-mix(in srgb, var(--c) 55%, white); }
.cc-tag { font-size: 12.5px; color: var(--muted); }
.cc-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.cc-filters input, .cc-filters select, .cc-form textarea, .cc-form input, .cc-form select, .cc-dlg input, .cc-dlg select, .cc-dlg textarea, .cc-mini input, .cc-mini select, .cc-mini textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; min-width: 0; }
.cc-filters label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cc-filters input[type=search] { width: min(280px, 100%); }
.cc-pager { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.cc-roles, .cc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cc-role { --c: #5A6478; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 14px; padding: 14px 16px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.cc-role header { display: flex; justify-content: space-between; align-items: center; }
.cc-role header b { font: 800 17px/1.2 var(--display); }
.cc-rank { font: 700 13px/1 var(--mono, monospace); padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.cc-role p { margin: 0; font-size: 14px; }
.cc-role details { font-size: 13.5px; margin-top: 4px; }
.cc-role details p { margin: 6px 0 0; color: var(--muted); }
.cc-role footer { margin-top: auto; padding-top: 8px; display: flex; gap: 6px; }
.cc-approvals, .cc-anns, .cc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cc-appr, .cc-ann { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cc-appr small, .cc-ann small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.cc-appr.pending { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cc-ann.warning { border-left: 4px solid #E8590C; } .cc-ann.success { border-left: 4px solid var(--ok); } .cc-ann.info { border-left: 4px solid var(--accent); }
.cc-status { font-size: 12.5px; color: var(--muted); text-transform: capitalize; }
.cc-form { display: grid; gap: 8px; }
.cc-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.cc-row > label, .cc-dlg > label, .cc-mini > label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); flex: 1 1 140px; }
.cc-check { display: flex !important; align-items: center; gap: 6px; font-size: 14px; color: var(--ink) !important; }
.cc-locked { text-align: center; padding: 60px 16px; }
.cc-locked h2 { font: 800 26px/1.2 var(--display); }
dialog.cc-drawer { width: min(820px, calc(100% - 24px)); max-height: calc(calc(100 * var(--vh, 1vh)) - 40px); padding: 22px; overflow: auto; }
.cc-person-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cc-person-head h2 { margin: 0; font: 800 24px/1.2 var(--display); }
.cc-person-head p { margin: 4px 0; }
.cc-person-btns { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
.cc-person-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cc-mini { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.cc-mini.wide { grid-column: 1 / -1; }
.cc-mini h3 { margin: 0; font-size: 14.5px; }
.cc-mini select[multiple] { min-height: 92px; }
.cc-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-checks label { display: flex; align-items: center; gap: 4px; }
.cc-revealed { background: color-mix(in srgb, #F59F00 25%, transparent); padding: 0 4px; border-radius: 4px; }
.cc-viewas { border: 1px dashed var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; background: var(--hover); }
.cc-viewas h3 { margin: 0 0 4px; font-size: 14.5px; }
.cc-viewas p { margin: 6px 0; font-size: 14px; }
.cc-meter { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0; }
.cc-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--muted); margin: 8px 0; text-transform: capitalize; }
.cc-counts b { color: var(--ink); }
.cc-dlg { display: grid; gap: 10px; padding: 22px; }
.cc-dlg h2 { margin: 0; font: 800 20px/1.2 var(--display); }
.cc-dlg p { margin: 0; }
.cc-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
#dlg { width: min(620px, calc(100% - 24px)); max-height: calc(calc(100 * var(--vh, 1vh)) - 40px); overflow: auto; }
.cc-perms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cc-perms fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 0; display: grid; gap: 4px; }
.cc-perms legend { font-weight: 700; font-size: 13px; padding: 0 4px; }
.cc-perms label { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; }
.cc-perms .cc-off { opacity: 0.45; }
.cc-risk { font-size: 11px; font-weight: 700; color: var(--danger); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 760px) { .cc-two, .cc-person-grid, .cc-perms { grid-template-columns: 1fr; } .cc-who small { display: none; } }

/* site-wide announcement bar and personal notices */
.ax-ann { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 7px 44px 7px 16px;
  font-size: 14px; font-weight: 500; background: var(--accent); color: var(--accent-ink); text-align: center; }
.ax-ann.warning { background: #E8590C; color: #fff; } .ax-ann.success { background: #2B8A3E; color: #fff; }
.ax-ann a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ax-ann-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 8px; }
body.has-ann { padding-top: 34px; }
body.has-ann .app, body.has-ann > .shell { height: calc(100% - 34px); }
.ax-notice { position: fixed; top: 50px; left: 50%; transform: translateX(-50%); z-index: 91; width: min(420px, calc(100% - 32px)); display: grid; gap: 6px;
  padding: 16px 18px; border-radius: 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ax-notice b { font: 800 17px/1.25 var(--display); }
.ax-notice p { margin: 0; white-space: pre-wrap; }
.ax-notice small { color: var(--muted); }
.ax-notice .primary { justify-self: end; }
.cc .fine, .cc-drawer .fine, .cc-dlg .fine, .cc-role p { text-align: left; }
.cc-mini > button, .cc-mini .cc-row button { justify-self: start; }
.cc-mini .primary.tiny, .cc-person-grid .primary.tiny { padding: 6px 14px; font-size: 13.5px; border-radius: 10px; }
body.has-ann > .shell { height: calc(calc(100 * var(--vh, 1vh)) - 34px); min-height: 0; }
.cc-dlg > label { flex: none; }
.cc-dlg input:not([type=checkbox]):not([type=color]), .cc-mini input { height: auto; min-height: 0; }
.cc-dlg input[type=color] { width: 54px; height: 38px; padding: 3px; }
.cc-perms fieldset { align-content: start; }
.cc-perms input[type=checkbox], .cc-checks input, .cc-check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; }
@media (max-width: 760px) { .cc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .cc-tabs button { white-space: nowrap; padding: 10px 10px; } }
.size-pick { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.size-pick span { color: var(--muted); margin-right: 4px; }
.size-pick button { border: 1px solid var(--line); background: none; border-radius: 8px; padding: 3px 8px; font-size: 12.5px; cursor: pointer; }
.size-pick button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* + flyout and in-chat Drive picker */
.plus-flyout {
  position: absolute; left: 8px; bottom: calc(100% + 8px); z-index: 40; width: min(360px, calc(100% - 16px));
  max-height: min(70vh, 560px); overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--tint-glass, color-mix(in srgb, var(--surface) 86%, transparent));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow);
  display: grid; gap: 2px;
}
.plus-flyout[hidden] { display: none; }
.fly-sec { margin: 8px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.plus-flyout button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.plus-flyout button:hover, .plus-flyout button:focus-visible { background: var(--hover); }
.plus-flyout button[aria-pressed="true"] { background: var(--accent-soft); }
.plus-flyout svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.plus-flyout span { display: grid; min-width: 0; }
.plus-flyout b { font-weight: 600; }
.plus-flyout small { color: var(--muted); font-size: 12.5px; }
.drive-popover {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 41; max-height: min(56vh, 480px);
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px;
  background: var(--tint-glass, color-mix(in srgb, var(--surface) 90%, transparent));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow);
}
.drive-popover[hidden] { display: none; }
.dp-head { display: flex; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); }
.dp-search { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 0 10px; border-radius: 10px; background: var(--hover); color: var(--faint); }
.dp-search svg { width: 16px; height: 16px; flex: none; }
.dp-search input { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: none; color: var(--ink); font: inherit; outline: 0; }
.dp-head .segmented { display: flex; padding: 2px; border-radius: 10px; background: var(--hover); }
.dp-head .segmented button { width: 32px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); display: grid; place-items: center; }
.dp-head .segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); }
.dp-head .segmented svg { width: 16px; height: 16px; }
.dp-sub { margin: 0; padding: 6px 12px; font-size: 12.5px; color: var(--muted); }
.dp-body { flex: 1; overflow: auto; padding: 8px 10px 12px; }
.dp-body.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dp-body.list { display: grid; gap: 4px; }
.dp-label { grid-column: 1 / -1; margin: 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.dp-tile { display: grid; gap: 4px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.dp-tile:hover { border-color: var(--accent); }
.dp-tile.on { border-color: var(--accent); background: var(--accent-soft); }
.dp-tile img { width: 100%; height: 64px; object-fit: cover; border-radius: 8px; background: var(--hover); }
.dp-badge { display: grid; place-items: center; height: 64px; border-radius: 8px; background: var(--hover); color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.dp-body.list .dp-tile { grid-template-columns: 48px minmax(0, 1fr); align-items: center; }
.dp-body.list .dp-tile img, .dp-body.list .dp-badge { height: 40px; width: 40px; }
.dp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.dp-tile small { color: var(--muted); font-size: 11.5px; }
@media (max-width: 720px) { .dp-body.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mode-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 8px; }
.mode-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.mode-chip[aria-pressed="true"] { border-color: var(--accent); }
.mode-chip span { font-weight: 400; opacity: 0.7; }
.mode-size { min-width: 170px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; }

/* Mail density: Panoramic (72), Focused (48), Fovea (32) */
.density { position: relative; }
.density button { position: relative; z-index: 1; }      /* the label stays above the glow */
.density .dens-glow { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 8px; transition: left 0.22s ease, width 0.22s ease; background: var(--accent-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent); pointer-events: none; }
.density-panoramic .msg-row, .mail-app[data-density="panoramic"] .msg-row { min-height: 72px; padding: 14px 14px 12px; gap: 4px; }
.density-panoramic .row-snippet, .mail-app[data-density="panoramic"] .row-snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.55; }
.density-panoramic .row-chips, .mail-app[data-density="panoramic"] .row-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.density-focused .msg-row, .mail-app[data-density="focused"] .msg-row { min-height: 48px; padding: 8px 12px; }
.density-focused .row-snippet, .mail-app[data-density="focused"] .row-snippet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.density-focused .row-chips, .mail-app[data-density="focused"] .row-chips { display: none; }
.density-focused .row-attach, .mail-app[data-density="focused"] .row-attach { display: inline; color: var(--faint); font-size: 12px; }
.density-fovea .msg-row, .mail-app[data-density="fovea"] .msg-row { min-height: 32px; grid-template-columns: minmax(88px, 150px) minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; font-size: 13px; }
.density-fovea .row-top, .mail-app[data-density="fovea"] .row-top { display: contents; }
.density-fovea .row-subject, .mail-app[data-density="fovea"] .row-subject { font-size: 13px; }
.density-fovea .row-snippet, .density-fovea .row-chips,
.mail-app[data-density="fovea"] .row-snippet, .mail-app[data-density="fovea"] .row-chips { display: none; }
.density-fovea .msg-row.unread .row-top b::before, .mail-app[data-density="fovea"] .msg-row.unread .row-top b::before { margin-right: 5px; }
.mail-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--sidebar); }
.mail-ribbon .rib-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.mail-ribbon .rib-btn:hover:not(:disabled) { background: var(--hover); }
.mail-ribbon .rib-btn:disabled, .mail-ribbon .rib-btn.rib-off { opacity: 0.4; cursor: default; }
.mail-ribbon .rib-btn.on { color: var(--danger, #c0392b); font-weight: 600; }
.mail-ribbon .rib-btn.dragging { opacity: 0.45; }
.mail-ribbon .rib-btn.drop-target { outline: 1px dashed var(--accent); }
.mail-ribbon .rib-btn[hidden] { display: none; }
.mail-ribbon .rib-step { border: 1px solid var(--line); background: var(--surface); }
.mail-ribbon .rib-more { margin-left: auto; }
.msg-row .row-meta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.msg-row.flagged .row-flag { display: inline-flex; width: 12px; height: 12px; color: var(--danger, #c0392b); }
.msg-row .row-flag svg { width: 12px; height: 12px; }
.compose-pop { margin-left: 6px; }
.ribbon-dialog { width: min(460px, calc(100% - 24px)); padding: 16px 18px 14px; }
.ribbon-dialog .compose-head { margin-bottom: 4px; }
.ribbon-tools { display: grid; gap: 4px; max-height: 220px; overflow: auto; margin: 10px 0 14px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.ribbon-tool { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: grab; font-size: 14px; }
.ribbon-tool:hover { background: var(--hover); }
.ribbon-tool small { color: var(--faint); font-size: 11px; }
.ribbon-steps-block { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.ribbon-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ribbon-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--bg); font-size: 13.5px; }
.ribbon-steps li small { color: var(--muted); }
.ribbon-checks { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ribbon-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ribbon-foot { margin-top: 12px; justify-content: space-between; }

/* Drive workspace */
.drive-workspace { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; flex: 1; }
.drive-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.drive-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; }
.drive-crumbs button { border: 0; background: none; color: var(--accent); font: inherit; padding: 2px 4px; border-radius: 6px; }
.drive-crumbs button:hover { background: var(--hover); }
.drive-table { width: 100%; border-collapse: collapse; }
.drive-table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--faint); padding: 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.drive-table td { padding: 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.drive-table tr:hover td { background: var(--hover); }
.drive-table tr.selected td { background: var(--accent-soft); }
.drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.drive-card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
.drive-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.drive-card .dp-badge, .drive-card img { height: 72px; border-radius: 10px; }
.drive-bulk { display: flex; gap: 6px; }

/* Unified pin / speed-dial: always visible at the bottom right */
.omni-fab {
  position: fixed; right: 0; bottom: 0; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)) 0; pointer-events: none;
}
.omni-core { pointer-events: auto; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; }
.omni-core svg { width: 22px; height: 22px; }
.omni-fab.open .omni-core { border-radius: 16px; }
.omni-dial { pointer-events: auto; display: grid; gap: 4px; margin-bottom: 8px; padding: 8px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 16px;
  background: var(--tint-glass, color-mix(in srgb, var(--surface) 72%, transparent)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow); min-width: 240px; }
.omni-dial[hidden] { display: none; }
.omni-dial button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.omni-dial button:hover:not(:disabled) { background: var(--hover); }
.omni-dial button:disabled { opacity: 0.45; cursor: default; }
.omni-dial svg { width: 18px; height: 18px; color: var(--accent); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.omni-dial span { display: grid; min-width: 0; }
.omni-dial b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-dial small { color: var(--muted); font-size: 12px; }
.omni-dial .omni-back { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; margin-bottom: 2px; }
.omni-overlay { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; padding: 16px; background: rgba(10, 14, 30, 0.45); }
.omni-overlay[hidden] { display: none; }
.omni-card { width: min(560px, 100%); max-height: min(80vh, 720px); overflow: auto; padding: 18px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 10px; }
body.has-omni .sp-bubble { display: none !important; }
@media print { .omni-fab, .omni-overlay { display: none; } }

.drift-title-lab { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.drift-title { width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }

.ctx-gauge { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; }
.ctx-gauge[hidden] { display: none; }
.ctx-gauge-bar { display: block; height: 4px; flex: 1; border-radius: 99px; background: color-mix(in srgb, var(--ok) 70%, transparent); }
.ctx-gauge.amber .ctx-gauge-bar { background: #d4a017; }
.ctx-gauge.rose .ctx-gauge-bar { background: color-mix(in srgb, var(--danger) 80%, transparent); }
.ctx-gauge-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.ctx-chips[hidden] { display: none; }
.ctx-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); font-size: 12px; color: var(--ink); }
.ctx-chip.dormant { opacity: 0.55; }
.ctx-chip button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; padding: 0; }
.ctx-chip .pin { color: var(--accent); }
.att.dormant { opacity: 0.55; }
.att-pin { width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.att-pin[aria-pressed="true"] { color: var(--accent); }

.attempt { width: min(640px, 100%); justify-self: end; margin: 0 0 8px; border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--bubble) 40%, transparent); color: var(--muted); font-size: 13px; }
.attempt summary { cursor: pointer; padding: 8px 12px; font-weight: 650; list-style: none; }
.attempt summary::-webkit-details-marker { display: none; }
.attempt .attempt-body { padding: 0 12px 10px; display: grid; gap: 6px; }
.attempt .attempt-prompt { margin: 0; white-space: pre-wrap; color: var(--ink); }
.attempt .attempt-out { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--bg); font: 12.5px/1.45 var(--mono); white-space: pre-wrap; color: var(--muted); }

.q-run { color: var(--accent); }
.q-run svg { width: 16px; height: 16px; }

.cv-hunks { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cv-hunks[hidden] { display: none; }
.cv-hunk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.cv-hunk-spacer { flex: 1; }
.cv-hunk-view { flex: 1; overflow: auto; padding: 10px 12px; display: grid; gap: 10px; }
.cv-hunk { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.cv-hunk.rejected { opacity: 0.55; }
.cv-hunk-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cv-hunk-head span { flex: 1; font: 12px/1.4 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-hunk pre { margin: 0; padding: 8px 10px; font: 12.5px/1.5 var(--mono); white-space: pre-wrap; }
.cv-hunk .add { background: color-mix(in srgb, var(--ok) 16%, transparent); }
.cv-hunk .del { background: color-mix(in srgb, var(--danger) 16%, transparent); text-decoration: line-through; }
.cv-hunk-view.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cv-hunk-view.split .cv-hunk { display: contents; }
.cv-hunk-pane { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.cv-hunk-pane h4 { margin: 0; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cv-hunk-pane pre { margin: 0; padding: 8px 10px; font: 12.5px/1.5 var(--mono); white-space: pre-wrap; min-height: 40px; }

.hs-host { margin-top: 6px; }
.hs-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); border-radius: 99px; background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.hs-pill .hs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); animation: hs-pulse 1.6s ease-out infinite; }
.hs-pill.locked .hs-dot { animation: none; background: var(--muted); }
.hs-pill .hs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.hs-pill .hs-lock { font-size: 13px; }
.hs-pill.hs-flash { outline: 2px solid var(--accent); }
@keyframes hs-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-pill .hs-dot { animation: none; }
}
.dw-head .hs-host { margin-top: 0; flex: none; }
.dw-head .hs-pill { margin-left: 4px; max-width: none; padding: 2px 7px; gap: 4px; }
.dw-head .hs-pill .hs-label { display: none; }
.dock-win.bot .hs-pill, .dock-win.mail .hs-pill {
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent-ink) 35%, transparent);
  color: var(--accent-ink);
}
.dock-win.bot .hs-pill .hs-dot, .dock-win.mail .hs-pill .hs-dot { background: var(--accent-ink); }
.dock-pair .hs-host { display: none; }
.mail-flash { outline: 2px solid var(--accent); }
.dock-win.cal { width: 380px; height: 520px; }
.dock-win.cal .cal-frame { flex: 1; border: 0; width: 100%; height: 100%; background: var(--surface); }
.cal-card { border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 12px 14px; margin-top: 8px; }
.cal-card p { margin: 0 0 8px; }
.cal-card .cal-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-shield { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; cursor: pointer; }
.composer .cal-model { max-width: 140px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; padding: 4px 8px; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--dot, #5A6478); flex: none; }
.dot-synapse { --dot: #2E46F0; }
.dot-pulsar { --dot: #2B8A3E; }
.dot-cortex { --dot: #B26B00; }
.dot-axon { --dot: #7C4DDB; }
.dot-neural { --dot: #C2255C; }
.dot-resting { --dot: #5A6478; }
#loc-ask { border: 0; border-radius: 20px; padding: 22px; max-width: 480px; width: calc(100vw - 32px); background: var(--surface); color: var(--ink); }
#loc-ask::backdrop { background: rgba(16, 22, 42, 0.46); }
#loc-ask h2 { margin: 0 0 8px; }
#loc-ask p { margin: 0 0 10px; }
.msg .cal-card { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.msg .cal-card p { margin: 0; flex: 1; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; list-style: none; margin: 8px 0; padding: 0; font-size: 13px; }

/* ========== Model picker in the chat header ========== */
.model-picker { flex: none; }
.model-picker .picker-btn { gap: 6px; padding: 7px 10px 7px 12px; border-radius: 10px; font-size: 16px; font-weight: 650; color: var(--ink); max-width: min(280px, calc(46 * var(--vw, 1vw))); }
.model-picker .picker-btn svg { color: var(--muted); }
.model-picker .model-menu { width: min(380px, calc(calc(100 * var(--vw, 1vw)) - 24px)); z-index: 40; }
.model-picker + .chat-title { padding-left: 2px; font-size: 14px; color: var(--faint); }
/* An empty chat's "New chat" title used to sit beside the model name. The product
   tabs are inserted between them, so the title stays in the flex line and covers
   Daxolex. Park it off the bar from the desktop breakpoint; a real chat title
   still shows. Phones keep the title in the line so the icon tabs do not collapse. */
@media (min-width: 861px) {
  .main.empty .topbar .chat-title {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
.welcome-sub { font-size: 22px; font-weight: 600; color: var(--ink); }

.mode-chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mode-chip:hover { background: var(--hover); color: var(--ink); }
.mode-chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.composer-bar .tool-chip { display: inline-flex; }
.composer-bar .tool-chip[hidden] { display: none !important; }

@media (max-width: 720px) {
  .composer-bar .tool-chip span { display: none; }
  .model-picker + .chat-title { display: none; }
}

/* ---------------------------------------------------------------- Canvas Lab (/canvas-lab) */
body.page.lab-page .page-main.lab-main { width: min(1320px, 100%); }
.lab-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 14px; }
.lab-head .page-title { margin-top: 18px; }
.lab-tabs { flex-wrap: wrap; }
.lab-tabs button { flex: none; padding: 7px 14px; }
.lab-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.lab-panel { display: flex; flex-direction: column; gap: 12px; }
.lab-panel > .side-note { margin: 0; }
.lab-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lab-bar input:not([type="checkbox"]):not([type="range"]), .lab-bar select {
  flex: 1 1 220px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.lab-bar select { flex: 0 1 260px; }
.lab-spacer { flex: 1; }
.lab-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.lab-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lab-side h2 { margin: 0; font: 700 17px/1.3 var(--display); overflow-wrap: anywhere; }
.lab-side h3 { margin: 10px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.lab-side .side-note { margin: 0; }
.lab-kicker { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.lab-empty { margin: 0; padding: 40px 16px; text-align: center; color: var(--muted); }
.lab-legend { display: inline-flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.lab-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.chat { background: var(--accent); }
.dot.drive { background: var(--ok); }
.dot.vault { background: #E08A1E; }
.lab-page .markdown p { margin: 0 0 8px; }
.lab-page .markdown p:last-child { margin-bottom: 0; }
.lab-page .markdown pre { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bubble); overflow-x: auto; font: 13px/1.5 var(--mono); }
.lab-page .markdown code { font-family: var(--mono); font-size: 0.92em; }
.lab-page .markdown table { border-collapse: collapse; }
.lab-page .markdown th, .lab-page .markdown td { border: 1px solid var(--line); padding: 4px 8px; }

/* Nodes */
.g-stage, .__________cytoscape_container { position: relative; }
.g-stage { height: min(68vh, 640px); min-height: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.g-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.g-links li { display: flex; flex-direction: column; font-size: 14px; overflow-wrap: anywhere; }
.g-links small { color: var(--muted); }

/* Model diffs */
.d-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13px; color: var(--muted); }
.d-rows { display: flex; flex-direction: column; gap: 8px; }
.d-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.d-row.change { grid-template-columns: 1fr 1fr; }
.d-cell { min-width: 0; padding: 12px 14px; border-radius: 12px; overflow-wrap: anywhere; text-align: left; font: inherit; color: inherit; }
.d-row.same .d-cell { background: var(--surface); border: 1px solid var(--line); }
.d-row.change .d-cell { border: 2px dashed var(--line); background: transparent; opacity: 0.6; cursor: pointer; }
.d-row.change .d-cell[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent-soft); opacity: 1; }
.d-merge { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.d-merge-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.d-merge-bar h2 { margin: 0; font: 700 17px var(--display); }
.d-merge textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: 13px/1.5 var(--mono); resize: vertical; }

/* Mail staging */
.s-form label { font-size: 13px; font-weight: 600; color: var(--muted); }
.s-form input:not([type="checkbox"]):not([type="range"]), .s-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.s-form textarea { font: 13px/1.5 var(--mono); resize: vertical; }
.s-form input[type="range"] { width: 100%; accent-color: var(--accent); }
.s-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-split:has(.s-form) { grid-template-columns: 320px minmax(0, 1fr); }
.s-frames { display: grid; grid-template-columns: 1fr; gap: 12px; min-width: 0; }
.s-frames.both { grid-template-columns: 1fr 1fr; }
.s-frame { width: 100%; height: min(72vh, 680px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* Sandbox */
.z-open { cursor: pointer; }
.z-status { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lab-split.z-split { grid-template-columns: minmax(0, 1fr); }
.z-preview .lab-split.z-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.z-editor { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.z-editor .CodeMirror { height: min(64vh, 620px); font: 13px/1.5 var(--mono); background: var(--surface); color: var(--ink); }
.z-editor .CodeMirror-gutters { background: var(--bg); border-right: 1px solid var(--line); }
.z-editor .CodeMirror-linenumber { color: var(--faint); }
.z-editor .CodeMirror-cursor { border-left-color: var(--ink); }
.z-view { min-width: 0; height: min(64vh, 620px); overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* Calendar board */
.b-board { display: grid; grid-template-columns: repeat(8, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.b-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border-radius: var(--radius); background: var(--hover); }
.b-col.inbox { background: var(--accent-soft); }
.b-col.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.b-col h3 { margin: 0; font-size: 13px; font-weight: 700; }
.b-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 120px; flex: 1; }
.b-card { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; padding: 8px 10px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); cursor: grab; font-size: 13.5px; overflow-wrap: anywhere; }
.b-card b { grid-column: 2; font-weight: 600; }
.b-card small { grid-column: 2; color: var(--muted); font-size: 12px; }
.b-card.locked { cursor: default; opacity: 0.75; }
.b-card.sortable-ghost { opacity: 0.4; }
.b-dot { grid-row: 1; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

@media (max-width: 860px) {
  .lab-split, .lab-split:has(.s-form), .z-preview .lab-split.z-split { grid-template-columns: minmax(0, 1fr); }
  .s-frames.both { grid-template-columns: 1fr; }
  .d-row.change { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Axork Player (media-player.js) */
.cv-player { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
.cv-player[hidden] { display: none; }
.cv-player, #lab-player { container-type: inline-size; }
.mp { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 10px; outline: none; color: var(--ink); }
.mp.no-list { grid-template-columns: minmax(0, 1fr); }
.mp.no-list .mp-list { display: none; }
.canvas-panel.cv-playing .cv-timeline { display: none; }
.mp:fullscreen { background: #000; padding: 12px; grid-template-columns: minmax(0, 1fr); align-content: center; }
.mp:fullscreen .mp-list { display: none; }
.mp:fullscreen .mp-stage { height: calc(100vh - 170px); aspect-ratio: auto; }
.mp:fullscreen .mp-now, .mp:fullscreen .mp-seek, .mp:fullscreen .mp-controls { color: #fff; }
.mp-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mp-stage { position: relative; aspect-ratio: 16 / 9; max-height: 62vh; border-radius: 12px; overflow: hidden; background: #000; display: grid; place-items: center; }
.mp-video { width: 100%; height: 100%; object-fit: contain; background: #000; transition: transform 0.2s ease; }
.mp.audio .mp-video { opacity: 0; }
.mp-viz { position: absolute; inset: 18% 6% 8%; width: 88%; height: 74%; }
.mp:not(.audio) .mp-viz { display: none; }
.mp-msg { position: absolute; inset: auto 12px 12px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 13.5px; line-height: 1.4; }
.mp-osd { position: absolute; top: 10px; right: 12px; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font: 600 13px var(--text); font-variant-numeric: tabular-nums; pointer-events: none; }
.mp-stage video::cue { background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 1.05em; }
.mp-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.mp-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mp-info { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-seek { display: flex; align-items: center; gap: 10px; font: 12.5px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-bar { flex: 1; min-width: 0; accent-color: var(--accent); }
.mp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.mp-group { display: flex; align-items: center; gap: 2px; }
.mp-btn { position: relative; display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border: 0; border-radius: 9px; background: none; color: inherit; font: 700 12px var(--text); cursor: pointer; }
.mp-btn:hover { background: var(--hover); }
.mp-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.mp-btn svg { width: 19px; height: 19px; }
.mp-play { min-width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.mp-play:hover { background: var(--accent); filter: brightness(1.08); }
.mp-loop-tag { position: absolute; right: 3px; bottom: 2px; font-size: 9px; }
.mp-speed, .mp-subs { height: 32px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; }
.mp-subs { max-width: 150px; }
.mp-vol { width: 90px; accent-color: var(--accent); }
.mp-vol-pct { min-width: 46px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-file { cursor: pointer; }
.mp-adjust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.mp-adjust label { display: flex; align-items: center; gap: 6px; }
.mp-adjust input[type="range"] { width: 110px; accent-color: var(--accent); }
.mp-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-height: 72vh; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.mp-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mp-filter { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.mp-items { list-style: none; margin: 0; padding: 0; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.mp-item { width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 7px 8px; border: 0; border-radius: 9px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.mp-item:hover { background: var(--hover); }
.mp-item.on { background: var(--accent-soft); color: var(--accent); }
.mp-item .mp-kind { grid-row: span 2; text-align: center; color: var(--muted); }
.mp-item .mp-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-item small { grid-column: 2; font-size: 11.5px; color: var(--muted); }
.mp-list-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.mp-list-note:empty { display: none; }
.ai-video-figure .ai-video-open { margin-top: 6px; }
@container (max-width: 720px) {
  .mp { grid-template-columns: minmax(0, 1fr); }
  .mp-list { max-height: 260px; }
}
@media (max-width: 860px) {
  .mp { grid-template-columns: minmax(0, 1fr); }
  .mp-vol { width: 70px; }
}

/* ---------------------------------------------------------------- File viewer (viewer.js) */
html.vw-open, html.vw-open body { overflow: hidden; }
.vw { position: fixed; inset: 0; z-index: 120; display: grid; padding: 24px; padding: max(24px, env(safe-area-inset-top, 0px)) 24px 24px; }
.vw[hidden] { display: none; }
.vw-scrim { position: absolute; inset: 0; background: rgba(16, 22, 42, 0.46); }
.vw-win { position: relative; min-height: 0; display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.vw-head { flex: none; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.vw-icon { width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.vw-icon.small { width: 28px; height: 28px; border-radius: 8px; }
.vw-icon:hover { background: var(--hover); color: var(--ink); }
.vw-badge { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--hover); color: var(--muted); }
.vw-badge.big { width: 64px; height: 64px; border-radius: 14px; font-size: 15px; }
.vw-badge[data-kind="pdf"], .vw-tile[data-kind="pdf"] { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.vw-badge[data-kind="doc"], .vw-tile[data-kind="doc"] { background: var(--accent-soft); color: var(--accent); }
.vw-badge[data-kind="slides"], .vw-tile[data-kind="slides"] { background: color-mix(in srgb, #d9480f 14%, var(--surface)); color: #b4470c; }
.vw-badge[data-kind="sheet"], .vw-tile[data-kind="sheet"] { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: color-mix(in srgb, var(--ok) 70%, var(--ink)); }
.vw-badge[data-kind="video"], .vw-tile[data-kind="video"], .vw-badge[data-kind="audio"], .vw-tile[data-kind="audio"] { background: var(--accent-soft); color: var(--accent); }
.vw-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 160px; }
.vw-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-spacer { flex: 1 1 0; }
.vw-zoom { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.vw-zoom[hidden], .vw-find[hidden] { display: none; }
.vw-zoom button { min-width: 30px; height: 30px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 17px; cursor: pointer; }
.vw-zoom .vw-fit { font-size: 13px; font-weight: 600; padding: 0 10px; }
.vw-zoom .vw-fit[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.vw-zoom button:hover { background: var(--hover); color: var(--ink); }
.vw-zoom-val { min-width: 46px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vw-find { display: flex; align-items: center; gap: 4px; height: 38px; width: min(300px, 100%); padding: 0 6px 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.vw-find:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.vw-find svg { width: 17px; height: 17px; color: var(--muted); }
.vw-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font-size: 14px; }
.vw-find button { width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.vw-find button:hover { background: var(--hover); color: var(--ink); }
.vw-find button svg { width: 16px; height: 16px; }
.vw-find-count { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vw-actions { display: flex; gap: 6px; align-items: center; }
.vw-tools { position: relative; }
.vw-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 230px; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.vw-menu[hidden] { display: none; }
.vw-menu > a, .vw-menu > button { display: block; padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.vw-menu > a:hover, .vw-menu > button:hover { background: var(--hover); }
.vw-menu > [hidden] { display: none; }

.vw-body { position: relative; flex: 1; min-height: 0; display: flex; }
.vw-left, .vw-right { flex: none; display: flex; flex-direction: column; min-height: 0; }
.vw-left[hidden], .vw-right[hidden], .vw-tab[hidden] { display: none; }
.vw-left { width: 196px; background: var(--sidebar); border-right: 1px solid var(--line); }
.vw-right { width: 300px; background: var(--surface); border-left: 1px solid var(--line); }
.vw-rail-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.vw-left .vw-rail-head { justify-content: space-between; }
.vw-left-title { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.vw-right-title { flex: 1; font-size: 15px; font-weight: 600; }
.vw-seg { display: flex; gap: 4px; padding: 0 12px 10px; }
.vw-seg[hidden] { display: none; }
.vw-seg button, .vw-scopes button { height: 28px; padding: 0 11px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.vw-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); }
.vw-parts { list-style: none; margin: 0; padding: 4px 12px 16px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.vw-parts > li[hidden] { display: none; }
.vw-thumb { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.vw-thumb-img { position: relative; display: block; background: #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(23, 32, 54, 0.2); }
.vw-thumb-img img { width: 100%; height: 100%; display: block; border-radius: 3px; }
.vw-thumb[aria-current="true"] .vw-thumb-img { outline: 3px solid var(--accent); outline-offset: 2px; }
.vw-thumb[aria-current="true"] .vw-thumb-n { color: var(--accent); font-weight: 600; }
.vw-thumb-n { font-size: 12px; }
.vw-thumb-count { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 600; display: grid; place-items: center; box-sizing: border-box; }
.vw-thumb-count[hidden] { display: none; }
.vw-scene { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; text-align: left; cursor: pointer; }
.vw-scene img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #000; }
.vw-scene[aria-current="true"] img { outline: 3px solid var(--accent); outline-offset: 2px; }
.vw-scene[aria-current="true"] { color: var(--accent); font-weight: 600; }
.vw-sheet-tab { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.vw-sheet-tab small { font-size: 12px; font-weight: 400; color: var(--muted); }
.vw-sheet-tab[aria-current="true"] { background: var(--surface); color: var(--accent); }

.vw-tab { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 44px; padding: 14px 0; border: 0; background: var(--sidebar); color: var(--muted); cursor: pointer; }
.vw-tab-left { border-right: 1px solid var(--line); }
.vw-tab-right { width: 56px; background: var(--surface); border-left: 1px solid var(--line); }
.vw-tab svg { width: 16px; height: 16px; }
.vw-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; font-weight: 600; }
.vw-minis { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vw-minis .vw-tile { width: 34px; height: 34px; font-size: 9px; }
.vw-minis small { font-size: 12px; font-weight: 600; }
.vw-tab:hover { color: var(--ink); }

.vw-canvas { position: relative; flex: 1; min-width: 0; overflow: auto; background: var(--bg); outline: none; }
.vw-stage { min-height: 100%; }
.vw-wait { margin: 0; padding: 80px 20px; text-align: center; color: var(--muted); }
.vw-pages { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px 96px; }
.vw-page { position: relative; flex: none; margin: 0; max-width: none; background: #fff; box-shadow: 0 1px 3px rgba(23, 32, 54, 0.16), 0 8px 24px -12px rgba(23, 32, 54, 0.3); }
.vw-page img { width: 100%; height: 100%; display: block; }
.vw-pageno { font-size: 12px; color: var(--muted); }
.vw-hits { position: absolute; inset: 0; pointer-events: none; }
.vw-hit { position: absolute; display: block; background: rgba(255, 214, 0, 0.42); border-radius: 2px; mix-blend-mode: multiply; }
.vw-hit.on { background: rgba(46, 70, 240, 0.4); outline: 2px solid var(--accent); }
.vw-pill { position: sticky; bottom: 18px; left: 0; width: max-content; margin: -64px auto 0; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow); }
.vw-pill[hidden] { display: none; }
.vw-pill button { width: 32px; height: 32px; border: 0; border-radius: 999px; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; }
.vw-pill button svg { width: 16px; height: 16px; }
.vw-pill-val { padding: 0 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vw-toast { position: sticky; bottom: 70px; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 8px 14px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 13.5px; }
.vw-toast[hidden] { display: none; }
.vw-image { min-height: 100%; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.vw-image.fit { height: 100%; }
.vw-image.fit img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; }
.vw-image img { display: block; background: repeating-conic-gradient(#e6e9f0 0% 25%, #fff 0% 50%) 50% / 20px 20px; box-shadow: 0 8px 24px -12px rgba(23, 32, 54, 0.45); }
.vw-media { padding: 20px; max-width: 1100px; margin: 0 auto; }
.vw-media .mp-stage { max-height: calc(100vh - 290px); }
.vw-sheet { padding: 16px; overflow: auto; }
.vw-sheet table { border-collapse: collapse; background: var(--surface); font-size: 13px; font-variant-numeric: tabular-nums; }
.vw-sheet th, .vw-sheet td { border: 1px solid var(--line); padding: 5px 9px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.vw-sheet thead th, .vw-sheet tbody th { position: sticky; background: var(--sidebar); color: var(--muted); font-weight: 600; font-size: 12px; }
.vw-sheet thead th { top: 0; z-index: 1; }
.vw-sheet tbody th { left: 0; }
.vw-note { color: var(--muted); font-size: 13px; }
.vw-text { max-width: 860px; margin: 24px auto; padding: 28px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.vw-code { white-space: pre-wrap; font: 13px/1.55 var(--mono); }
.vw-text.markdown pre { padding: 10px 12px; border-radius: 10px; background: var(--bubble); overflow-x: auto; }
.vw-error { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 80px 20px; text-align: center; color: var(--muted); }

.vw-scopes { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 10px; }
.vw-scopes[hidden] { display: none; }
.vw-scopes button { border-color: var(--line); }
.vw-scopes button[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.vw-filter { margin: 0 12px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 13.5px; }
.vw-shelf { flex: 1; min-height: 0; overflow: auto; padding: 0 12px 16px; }
.vw-shelf-label { margin: 8px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.vw-shelf-label[hidden], .vw-empty[hidden] { display: none; }
.vw-recent, .vw-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vw-recent .vw-file { border: 2px solid var(--accent); background: var(--accent-soft); }
.vw-recent .vw-file small { color: var(--accent); }
.vw-file { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.vw-file:hover { border-color: var(--faint); }
.vw-file.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vw-file-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vw-file-meta b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-file-meta small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-tile { flex: none; width: 54px; height: 54px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: var(--hover); color: var(--muted); font-size: 11px; font-weight: 700; }
.vw-tile.pic { background: var(--bg); }
.vw-tile.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vw-tile.page img { object-fit: contain; background: #fff; }
.vw-empty { color: var(--muted); font-size: 13px; }

/* phones and narrow windows: the side panels slide over the canvas */
.vw.narrow { padding: 0; }
.vw.narrow .vw-win { border-radius: 0; }
.vw.narrow .vw-left, .vw.narrow .vw-right { position: absolute; top: 0; bottom: 0; z-index: 3; box-shadow: var(--shadow); }
.vw.narrow .vw-left { left: 0; }
.vw.narrow .vw-right { right: 0; width: min(320px, 88vw); }
.vw.narrow .vw-tab { width: 36px; }
.vw.narrow .vw-tab-right .vw-minis { display: none; }
.vw.narrow .vw-zoom .vw-fit, .vw.narrow .vw-actions .ghost[data-act="ask"] { display: none; }
.vw.narrow .vw-find { order: 10; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .vw-win { animation: vw-in 0.18s ease-out; }
  @keyframes vw-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
}
.d-view-thumb { display: block; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.link.d-view { text-align: left; }

/* ======================================================================= Mail composer (mail-compose.js) */
dialog.compose.mc[open] { width: min(1360px, calc(100% - 32px)); height: calc(100% - 32px); max-height: none; border-radius: 16px; }
dialog.compose form.mc-form { flex: 1; min-height: 0; max-height: none; display: flex; flex-direction: column; }
.mc-title { background: var(--accent); color: var(--accent-ink); border-bottom: 0 !important; padding: 8px 8px 8px 16px !important; }
.mc-title h2 { flex: 1; color: inherit; }
.mc-title .icon-btn { color: inherit; }
.mc-title .icon-btn:hover, .mc-title .icon-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent-ink) 18%, transparent); }
.mc-tabs { display: flex; gap: 2px; padding: 0 10px; background: var(--bg); }
.mc-tab { height: 34px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: 600 13px var(--text); cursor: pointer; }
.mc-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.mc-ribbon.gmc-format { position: relative; display: block; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--bg); }
.mc-panel { display: flex; align-items: stretch; gap: 0; padding: 6px 8px 0; overflow-x: auto; scrollbar-width: thin; }
.mc-panel[hidden] { display: none; }
.mc-group { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 10px 20px; border-right: 1px solid var(--line); flex: none; }
.mc-group:last-child { border-right: 0; }
.mc-group::after { content: attr(data-label); position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 500 11px var(--text); color: var(--faint); }
.mc-group:not(:has(.mc-row)) { flex-direction: row; align-items: center; }
.mc-row { display: flex; align-items: center; gap: 2px; }
.mc-row select, dialog.mc .mc-row select { height: 28px; max-width: none; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: 12.5px var(--text); padding: 0 4px; }
#mc-font { width: 140px; }
#mc-size { width: 58px; }
.mc-i { position: relative; width: 30px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: 600 13.5px var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; white-space: nowrap; }
.mc-i svg, .mc-big svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-i sub, .mc-i sup { font-size: 9px; }
.mc-i:hover, .mc-big:hover, .mc-style:hover { background: var(--hover); }
.mc-i[aria-pressed="true"], .mc-style[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.mc-swatch { display: flex; flex-direction: column; gap: 1px; }
.mc-swatch span, .mc-swatch svg { width: 16px; height: 16px; line-height: 16px; }
.mc-bar { display: block; width: 16px; height: 3px; border-radius: 2px; background: currentColor; }
.mc-big { min-width: 58px; height: 56px; padding: 4px 6px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: 500 11.5px var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.mc-big svg { width: 22px; height: 22px; color: var(--accent); }
.mc-code-btn b { font: 700 13px/22px var(--mono); color: var(--accent); }
.mc-styles { gap: 6px; }
.mc-style { min-width: 84px; white-space: nowrap; height: 52px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: 500 12.5px var(--text); text-align: left; cursor: pointer; }
.mc-style.h1 { font: 700 15px var(--text); color: var(--accent); }
.mc-style.h2 { font: 700 13.5px var(--text); }
.mc-style.h3 { font: 600 12.5px var(--text); color: var(--muted); }
dialog.mc.mc-simple .mc-group { padding-bottom: 0; }
dialog.mc.mc-simple .mc-group::after { display: none; }
dialog.mc.mc-simple .mc-panel { padding: 4px 8px; }
dialog.mc.mc-simple .mc-group { flex-direction: row; align-items: center; }
dialog.mc.mc-simple .mc-big { min-width: 0; height: 30px; flex-direction: row; font-size: 12.5px; }
dialog.mc.mc-simple .mc-big svg { width: 16px; height: 16px; }
dialog.mc.mc-simple .mc-style { height: 30px; width: auto; }
dialog.mc.mc-simple .mc-style:not(.h1):not([data-mc="paragraph"]) { display: none; }
.mc .gmc-pop { top: 100%; bottom: auto; left: 12px; margin-top: 4px; z-index: 20; max-height: 360px; }
.mc .gmc-pop:not(.mc-pop) { left: auto; right: 12px; }
.mc .gmc-pop.mc-pop { width: max-content; max-width: 340px; max-height: min(560px, 70vh); display: grid; gap: 8px; }
.mc-pop-label { margin: 0; font: 600 12.5px var(--text); color: var(--ink); }
.mc-pop-note { margin: 0; font-size: 12px; color: var(--muted); }
.mc-swatches { display: grid; grid-template-columns: repeat(5, 26px); gap: 6px; }
.mc-sw { width: 26px; height: 26px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 7px; cursor: pointer; padding: 0; }
.mc-sw:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.mc-sw-none, .mc-menu-item { border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 13px var(--text); text-align: left; padding: 7px 10px; cursor: pointer; }
.mc-sw-none:hover, .mc-menu-item:hover { background: var(--hover); }
.mc-menu-item[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.mc-grid { display: grid; grid-template-columns: repeat(8, 18px); gap: 3px; }
.mc-grid button { width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding: 0; cursor: pointer; }
.mc-grid button.on { background: var(--accent-soft); border-color: var(--accent); }
.mc-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mc-themes { display: flex; gap: 8px; }
.mc-theme { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 600 11.5px var(--text); cursor: pointer; }
.mc-theme[aria-pressed="true"] { border: 2px solid var(--accent); padding: 5px; }
.mc-theme span { width: 58px; height: 28px; border: 1px solid; border-radius: 6px; display: grid; place-items: center; }
.mc-theme i { font: 600 12px var(--mono); font-style: normal; }
.mc-heads { display: flex; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.mc-send { flex-direction: column; margin: 0; }
.mc-send .gmc-send { width: 76px; height: 40px; border-radius: 12px 12px 0 0; }
.mc-send .gmc-send-more { width: 76px; height: 22px; border: 0; border-top: 1px solid color-mix(in srgb, var(--accent-ink) 28%, transparent); border-radius: 0 0 12px 12px; }
.mc-send .gmc-send-menu { top: calc(100% + 6px); bottom: auto; z-index: 21; }
.mc-send #c-at { margin-top: 6px; width: 76px; font-size: 11px; }
.mc-fields { flex: 1; min-width: 0; }
.mc-fields .gmc-row { padding: 0; min-height: 34px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.mc-fields .gmc-row > span:first-child { width: 62px; }
.mc-fields .gmc-subject > span { display: block; }
.mc-main { flex: 1; min-height: 0; display: flex; }
.mc-files { width: 240px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: color-mix(in srgb, var(--bg) 70%, var(--line)); border-right: 1px solid var(--line); min-height: 0; }
.mc-files.collapsed { width: 44px; padding: 0; }
.mc-files.collapsed > :not(.mc-rail) { display: none; }
.mc-files-head { display: flex; align-items: center; gap: 8px; }
.mc-files-head b { flex: 1; font-size: 14px; }
.mc-files-head .icon-btn { width: 28px; height: 28px; font-size: 15px; }
.mc-src { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.mc-src button { flex: 1; height: 26px; padding: 0 6px; white-space: nowrap; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 12px var(--text); cursor: pointer; }
.mc-src button[aria-selected="true"] { background: var(--ink); color: var(--surface); }
.mc-src button[hidden] { display: none; }
#mc-files-q { height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: 13px var(--text); }
.mc-file-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; overflow: auto; flex: 1; min-height: 0; align-content: start; }
.mc-file { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); text-align: left; cursor: grab; font: inherit; }
.mc-file:hover { border-color: var(--accent); }
.mc-file.dragging { opacity: 0.5; }
.mc-file { min-width: 0; }
.mc-file-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mc-file-text b, .mc-open b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-file-text small, .mc-open small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-tag { flex: none; min-width: 34px; height: 22px; padding: 0 5px; border-radius: 6px; display: inline-grid; place-items: center; font: 700 10px var(--text); letter-spacing: 0.02em; background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.mc-tag[data-ext="docx"], .mc-tag[data-ext="doc"], .mc-tag[data-ext="odt"], .mc-tag[data-ext="rtf"] { background: #dde2ff; color: #2e46f0; }
.mc-tag[data-ext="xlsx"], .mc-tag[data-ext="xls"], .mc-tag[data-ext="csv"], .mc-tag[data-ext="ods"] { background: #dcf3e5; color: #1e7a45; }
.mc-tag[data-ext="pptx"], .mc-tag[data-ext="ppt"], .mc-tag[data-ext="odp"] { background: #ffe8d6; color: #b4470c; }
.mc-tag[data-ext="pdf"] { background: #fde2e1; color: #c62828; }
.mc-tag[data-ext="html"], .mc-tag[data-ext="htm"] { background: #172036; color: #ffffff; }
.mc-tag[data-ext="py"] { background: #fff4c2; color: #8a6100; }
.mc-tag[data-ext="css"], .mc-tag[data-ext="js"], .mc-tag[data-ext="ts"] { background: #e3e8ff; color: #3b4bc4; }
.mc-tag[data-ext="png"], .mc-tag[data-ext="jpg"], .mc-tag[data-ext="jpeg"], .mc-tag[data-ext="gif"], .mc-tag[data-ext="webp"] { background: #e6dcff; color: #6b3fd4; }
.mc-hint { margin: 0; font-size: 12px; color: var(--muted); }
.mc-rail { width: 44px; height: 100%; border: 0; background: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; cursor: pointer; }
.mc-rail[hidden] { display: none; }
.mc-rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 12.5px var(--text); }
.mc-center { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-write { position: relative; flex: 1; min-height: 0; overflow: auto; background: color-mix(in srgb, var(--bg) 80%, var(--line)); padding: 16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mc-write { background: color-mix(in srgb, var(--surface) 70%, var(--line)); } }
:root[data-theme="dark"] .mc-write { background: color-mix(in srgb, var(--surface) 70%, var(--line)); }
.mc-write[hidden], .mc-edit[hidden] { display: none; }
.mc-paper { max-width: 820px; min-height: 100%; margin: 0 auto; background: var(--surface); border-radius: 4px; box-shadow: 0 1px 3px rgba(23, 32, 54, 0.14); }
.mc-host.gmc-body { padding: 0; min-height: 100%; overflow: visible; }
.mc-doc { position: relative; white-space: pre-wrap; word-wrap: break-word; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.mc-doc [contenteditable="false"] { white-space: normal; }
.mc-doc pre { white-space: pre-wrap; }
.mc-doc img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; }
.mc-doc .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; margin: 0; }
.mc-doc .ProseMirror-gapcursor::after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--ink); animation: mc-cursor 1.1s steps(2, start) infinite; }
@keyframes mc-cursor { to { visibility: hidden; } }
.mc-doc.ProseMirror-hideselection *::selection { background: transparent; }
.mc-doc.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
.mc-doc { min-height: 420px; padding: 28px 44px; outline: none; font: 15px/1.5 var(--text); color: var(--ink); }
.mc-doc > * + * { margin-top: 0; }
.mc-doc p { margin: 0; }
.mc-doc h1 { font: 700 26px/1.25 var(--text); margin: 10px 0 6px; }
.mc-doc h2 { font: 700 20px/1.3 var(--text); margin: 10px 0 4px; }
.mc-doc h3 { font: 600 16.5px/1.35 var(--text); margin: 8px 0 4px; }
.mc-doc ul, .mc-doc ol { margin: 4px 0; padding-left: 26px; }
.mc-doc blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--line); color: var(--muted); }
.mc-doc a { color: var(--accent); }
.mc-doc img { max-width: 100%; height: auto; border-radius: 4px; }
.mc-doc img.ProseMirror-selectednode { outline: 2px solid var(--accent); }
.mc-doc hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.mc-doc mark { border-radius: 2px; padding: 0 1px; color: inherit; }
.mc-doc code { font: 0.9em var(--mono); background: var(--bg); padding: 1px 5px; border-radius: 5px; }
.mc-doc table { border-collapse: collapse; margin: 8px 0; table-layout: fixed; min-width: 50%; }
.mc-doc th, .mc-doc td { border: 1px solid var(--line); padding: 6px 10px; vertical-align: top; min-width: 60px; }
.mc-doc th { background: var(--bg); font-weight: 600; text-align: left; }
.mc-doc .selectedCell { background: var(--accent-soft); }
.mc-doc pre { position: relative; margin: 10px 0; padding: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font: 13.5px/1.65 var(--mono); white-space: pre-wrap; }
.mc-doc pre::before { display: block; padding: 5px 12px; margin-bottom: 10px; border-bottom: 1px solid; font: 600 12px var(--text); content: "Code"; }
.mc-doc pre code { display: block; padding: 0 14px; background: none; font: inherit; border-radius: 0; color: inherit; }
.mc-doc pre:has(+ *) { margin-bottom: 10px; }
.mc-doc p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--faint); pointer-events: none; }
.mc-drop { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(2px); }
.mc-drop[hidden] { display: none; }
.mc-drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--accent); border-radius: 16px; background: color-mix(in srgb, var(--accent-soft) 70%, transparent); color: var(--accent); text-align: center; padding: 12px; }
.mc-drop-zone b { font-size: 16px; }
.mc-drop-zone span { font-size: 13px; color: var(--muted); }
.mc-drop-zone.over { background: var(--accent); color: var(--accent-ink); border-style: solid; }
.mc-drop-zone.over span { color: inherit; }
.mc-attached { width: 268px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-left: 1px solid var(--line); background: var(--surface); min-height: 0; }
.mc-attached.over { background: var(--accent-soft); }
.mc-attached-list.gmc-files { display: grid; gap: 8px; padding: 0; border: 0; overflow: auto; align-content: start; }
.mc-attached-list .gmc-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--surface); }
.mc-attached-list .gmc-chip.edited { border-color: color-mix(in srgb, var(--ok) 60%, var(--line)); }
.mc-attached-list .gmc-chip.edited small { color: #1e7a45; }
.mc-attached-list .mc-tag { min-width: 36px; height: 36px; border-radius: 8px; }
.mc-attached-list .gmc-chip .mc-open { width: auto; height: auto; border-radius: 0; place-items: initial; }
.mc-attached-list .gmc-chip > button:last-child { flex: none; }
.mc-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; color: var(--ink); text-align: left; padding: 0; cursor: pointer; font: inherit; }
.mc-open b, .mc-open small { display: block; max-width: 100%; line-height: 1.35; }
.mc-edit { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mc-mode { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); min-width: 0; }
.mc-mode > * { flex: none; }
.mc-mode .mc-edit-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mc-done { height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 600 13px var(--text); cursor: pointer; width: auto; }
.mc-back { height: 32px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 999px; background: var(--surface); color: var(--accent); font: 600 13px var(--text); cursor: pointer; }
.mc-mode b { font-size: 14px; }
.mc-pill { height: 26px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: var(--surface); display: inline-grid; place-items: center; font: 600 12px var(--text); }
dialog.mc[data-editor="office"] .mc-pill { background: #d9480f; color: #fff; }
.mc-edit-note { font-size: 12.5px; color: var(--muted); }
.mc-grow { flex: 1; }
.mc-code { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #1b2236; color: #e7ebf5; }
.mc-code[hidden], .mc-office[hidden], .mc-preview[hidden], .mc-tb[hidden] { display: none; }
.mc-code[data-theme="day"] { background: #f6f8fb; color: #172036; }
.mc-code-bar { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: #141a2c; border-bottom: 1px solid #2b3452; }
.mc-code-bar select, dialog.mc .mc-code-bar select { height: 28px; padding: 0 6px; border: 1px solid #2b3452; border-radius: 7px; background: #1b2236; color: #e7ebf5; font: 600 12px var(--text); }
.mc-tb { height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #c9d1e3; font: 600 12px var(--text); cursor: pointer; }
.mc-tb:hover { background: #232c48; }
.mc-tb.on, .mc-tb[aria-pressed="true"] { background: #2e46f0; color: #fff; }
.mc-code-main { flex: 1; min-height: 0; display: flex; }
.mc-cm { flex: 1; min-width: 0; display: flex; }
.mc-cm .CodeMirror { flex: 1; height: auto; font: 13.5px/1.7 var(--mono); }
.mc-preview { width: 38%; min-width: 280px; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.mc-preview-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.mc-preview-head b { flex: 1; font-size: 13px; }
.mc-preview-head span { font-size: 11.5px; color: var(--muted); }
.mc-preview iframe { flex: 1; margin: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.mc-code-status { height: 26px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 12px; border-top: 1px solid #2b3452; background: #141a2c; font-size: 11.5px; color: #9aa4bb; }
.mc-office { flex: 1; min-height: 0; display: flex; }
.mc-office > div, .mc-office iframe { flex: 1; width: 100%; height: 100%; border: 0; }
.mc-foot { display: flex; align-items: center; gap: 10px; padding: 4px 12px; border-top: 1px solid var(--line); min-height: 36px; }
.mc-foot .code-msg { flex: 1; margin: 0; }
.mc-foot .gmc-trash { margin-left: auto; }
/* CodeMirror themes for the code editor */
.cm-s-axork-night.CodeMirror { background: #1b2236; color: #e7ebf5; }
.cm-s-axork-night .CodeMirror-gutters { background: #1b2236; border-right: 1px solid #2b3452; }
.cm-s-axork-night .CodeMirror-linenumber { color: #6e7891; }
.cm-s-axork-night .CodeMirror-cursor { border-left-color: #e7ebf5; }
.cm-s-axork-night .CodeMirror-selected, .cm-s-axork-night.CodeMirror-focused .CodeMirror-selected { background: #2b3a66; }
.cm-s-axork-night .CodeMirror-activeline-background { background: #232c48; }
.cm-s-axork-night .cm-keyword { color: #c678dd; } .cm-s-axork-night .cm-tag { color: #e06c75; }
.cm-s-axork-night .cm-attribute, .cm-s-axork-night .cm-number { color: #d19a66; }
.cm-s-axork-night .cm-string { color: #98c379; } .cm-s-axork-night .cm-comment { color: #7f8aa3; font-style: italic; }
.cm-s-axork-night .cm-def, .cm-s-axork-night .cm-variable-2, .cm-s-axork-night .cm-property { color: #61afef; }
.cm-s-axork-night .cm-builtin, .cm-s-axork-night .cm-atom { color: #56b6c2; } .cm-s-axork-night .cm-bracket, .cm-s-axork-night .cm-meta { color: #9aa4bb; }
.cm-s-axork-night .cm-variable, .cm-s-axork-night .cm-operator { color: #e7ebf5; } .cm-s-axork-night .cm-header { color: #e06c75; }
.cm-s-axork-day.CodeMirror { background: #ffffff; color: #172036; }
.cm-s-axork-day .CodeMirror-gutters { background: #f6f8fb; border-right: 1px solid #d3d9e4; }
.cm-s-axork-day .CodeMirror-linenumber { color: #9aa4bb; }
.cm-s-axork-day .cm-keyword { color: #7c3aed; } .cm-s-axork-day .cm-tag { color: #c2410c; }
.cm-s-axork-day .cm-attribute, .cm-s-axork-day .cm-number { color: #b45309; }
.cm-s-axork-day .cm-string { color: #0d7a5f; } .cm-s-axork-day .cm-comment { color: #7f8aa3; font-style: italic; }
.cm-s-axork-day .cm-def, .cm-s-axork-day .cm-variable-2, .cm-s-axork-day .cm-property { color: #2e46f0; }
.mc-code[data-theme="day"] .mc-code-bar, .mc-code[data-theme="day"] .mc-code-status { background: #eef1f6; border-color: #d3d9e4; color: #5a6478; }
.mc-code[data-theme="day"] .mc-code-bar select, dialog.mc .mc-code[data-theme="day"] .mc-code-bar select { background: #fff; color: #172036; border-color: #d3d9e4; }
.mc-code[data-theme="day"] .mc-tb { color: #3b4252; }
.mc-code[data-theme="day"] .mc-tb:hover { background: #dde2ff; }
@media (max-width: 1100px) {
  .mc-attached { width: 220px; }
  .mc-files:not(.collapsed) { width: 210px; }
  .mc-preview { min-width: 220px; }
}
@media (max-width: 760px) {
  dialog.compose.mc[open] { width: 100%; height: 100%; max-width: none; border-radius: 0; }
  .mc-main { flex-direction: column; overflow: auto; }
  .mc-files, .mc-files.collapsed { display: none; }
  .mc-attached { width: auto; border-left: 0; border-top: 1px solid var(--line); flex: none; max-height: 40%; }
  .mc-write { padding: 0; flex: none; min-height: 320px; }
  .mc-paper { border-radius: 0; box-shadow: none; }
  .mc-doc { padding: 14px 16px; min-height: 280px; }
  .mc-heads { padding: 8px 12px; }
  .mc-send .gmc-send { width: 64px; }
  .mc-send .gmc-send-more { width: 64px; }
  .mc-code-main { flex-direction: column; }
  .mc-preview { width: auto; min-width: 0; height: 40%; border-left: 0; border-top: 1px solid var(--line); }
  .mc-edit-note { display: none; }
}
.mc-code-go { height: 34px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 600 13px var(--text); cursor: pointer; }

/* ======================================================================= PDF reader (pdf-reader.js, PDF.js) */
.vw-page .pdf-canvas, .pdf-page .pdf-canvas { position: absolute; left: 0; top: 0; display: block; z-index: 1; }
.vw-page[data-drawn] > img { visibility: hidden; }
.vw-page .vw-hits { z-index: 2; }
.textLayer { position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial; z-index: 3;
  -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: color-mix(in srgb, #2e46f0 30%, transparent); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }
.textLayer .pdf-hit { background: rgba(255, 214, 79, 0.55); border-radius: 2px; }
.textLayer .pdf-hit.on { background: rgba(249, 168, 37, 0.75); outline: 2px solid #f9a825; }
.pdf-reader { position: relative; min-height: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--bg) 70%, var(--line)); }
.pdf-scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pdf-page { position: relative; flex: none; background: #fff; box-shadow: 0 1px 3px rgba(23, 32, 54, 0.18); }
.pdf-msg { margin: 24px; color: var(--muted); text-align: center; }
.pdf-selbar { position: fixed; z-index: 400; display: flex; gap: 2px; padding: 4px; border-radius: 10px; background: #172036; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45); }
.pdf-selbar[hidden] { display: none; }
.pdf-selbar button { height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #fff; font: 600 12.5px var(--text); cursor: pointer; }
.pdf-selbar button:hover { background: rgba(255, 255, 255, 0.14); }
.pdf-selbar button:last-child:not(:first-child) { background: #2e46f0; }

/* ======================================================================= File preview pane (file-preview.js) */
.fp { display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.fp-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.fp-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fp-title b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-title small { font-size: 12px; color: var(--muted); }
.fp-tag { flex: none; min-width: 38px; height: 24px; padding: 0 6px; border-radius: 6px; display: inline-grid; place-items: center; font: 700 10.5px var(--text);
  background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.fp-tag[data-ext="pdf"] { background: #fde2e1; color: #c62828; }
.fp-tag:is([data-ext="docx"], [data-ext="doc"], [data-ext="odt"]) { background: #dde2ff; color: #2e46f0; }
.fp-tag:is([data-ext="xlsx"], [data-ext="xls"], [data-ext="csv"]) { background: #dcf3e5; color: #1e7a45; }
.fp-tag:is([data-ext="pptx"], [data-ext="ppt"]) { background: #ffe8d6; color: #b4470c; }
.fp-tag:is([data-ext="mp4"], [data-ext="webm"], [data-ext="mov"], [data-ext="mkv"], [data-ext="png"], [data-ext="jpg"], [data-ext="jpeg"]) { background: #e6dcff; color: #6b3fd4; }
.fp-icon { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 600 14px var(--text); cursor: pointer; display: grid; place-items: center; }
.fp-icon:hover, .fp-btn:hover { background: var(--hover); }
.fp-tools { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fp-tools[hidden], .fp-acts[hidden] { display: none; }
.fp-zoom { min-width: 44px; text-align: center; font-size: 12.5px; color: var(--muted); }
.fp-btn { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 600 12.5px var(--text); cursor: pointer; }
.fp-page, .fp-count { font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.fp-grow { flex: 1; }
.fp-find { width: 150px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: 12.5px var(--text); }
.fp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; background: color-mix(in srgb, var(--bg) 70%, var(--line)); }
.fp-pdf { flex: 1; min-height: 0; }
.fp-wait { margin: 24px; color: var(--muted); text-align: center; }
.fp-image { padding: 16px; display: grid; place-items: center; }
.fp-image img { max-width: 100%; max-height: 70vh; border-radius: 6px; box-shadow: 0 1px 3px rgba(23, 32, 54, 0.18); }
.fp-media { padding: 12px; }
.fp-text { margin: 0; padding: 16px; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; background: var(--surface); flex: 1; }
.fp-tabs { display: flex; gap: 4px; padding: 8px 10px; flex-wrap: wrap; }
.fp-tabs button { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 12px var(--text); cursor: pointer; }
.fp-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.fp-sheet { overflow: auto; padding: 0 10px 10px; }
.fp-sheet table { border-collapse: collapse; background: var(--surface); font-size: 12.5px; }
.fp-sheet td { border: 1px solid var(--line); padding: 4px 8px; white-space: nowrap; }
.fp-sheet tr:first-child td { background: var(--bg); font-weight: 600; }
.fp-acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line); }
.fp-act { height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 600 12.5px var(--text); cursor: pointer; }
.fp-act.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
dialog.fp-picker { width: min(420px, calc(100% - 24px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog.fp-picker::backdrop { background: rgba(10, 14, 30, 0.4); }
.fp-picker-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.fp-picker-head b { flex: 1; font-size: 15px; }
dialog.fp-picker ul { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; max-height: 60vh; overflow: auto; }
dialog.fp-picker li button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
dialog.fp-picker li button:hover { background: var(--hover); }
dialog.fp-picker li small { color: var(--muted); font-size: 12px; }

/* Drive: list on the left, preview on the right. With the pane open, the pane holds each file's actions. */
.drive-split.open td.d-actions, .drive-split.open th:last-child { display: none; }
.drive-split.open td, .drive-split.open th { white-space: nowrap; }
.drive-split.open td:nth-child(2) { white-space: normal; }
.drive-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.drive-split.open { grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); }
.drive-preview { position: sticky; top: 12px; height: max(480px, calc(100vh - 250px)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.drive-preview[hidden] { display: none; }
.previewing, .drive-card.previewing { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
@media (max-width: 900px) {
  .drive-split.open { grid-template-columns: minmax(0, 1fr); }
  .drive-preview { position: fixed; inset: 0; z-index: 90; height: auto; border-radius: 0; }
}

/* ======================================================================= Editor dialog (file-edit.js) */
dialog.fe { width: min(1280px, calc(100% - 32px)); height: calc(100% - 32px); max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); }
dialog.fe[open] { display: flex; flex-direction: column; }
dialog.fe::backdrop { background: rgba(10, 14, 30, 0.45); }
.fe-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.fe-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
.fe-name { font-size: 14.5px; }
.fe-pill { height: 26px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: var(--surface); display: inline-grid; place-items: center; font: 600 12px var(--text); }
.fe-note, .fe-saved { font-size: 12.5px; color: var(--muted); }
.fe-grow { flex: 1; }
.fe-done { height: 34px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 600 13px var(--text); cursor: pointer; }
.fe-code { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #1b2236; }
.fe-code[hidden], .fe-office[hidden], .fe-preview[hidden], .fe-tb[hidden] { display: none; }
.fe-tools { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: #141a2c; border-bottom: 1px solid #2b3452; }
.fe-tools select, dialog.fe .fe-tools select { height: 28px; padding: 0 6px; border: 1px solid #2b3452; border-radius: 7px; background: #1b2236; color: #e7ebf5; font: 600 12px var(--text); }
.fe-tb { height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #c9d1e3; font: 600 12px var(--text); cursor: pointer; }
.fe-tb[aria-pressed="true"] { background: #2e46f0; color: #fff; }
.fe-main { flex: 1; min-height: 0; display: flex; }
.fe-cm { flex: 1; min-width: 0; display: flex; }
.fe-cm .CodeMirror { flex: 1; height: auto; font: 13.5px/1.7 var(--mono); }
.fe-preview { width: 40%; display: flex; background: var(--bg); border-left: 1px solid var(--line); }
.fe-preview iframe { flex: 1; margin: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.fe-office { flex: 1; min-height: 0; display: flex; }
.fe-office > div, .fe-office iframe { flex: 1; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) {
  dialog.fe { width: 100%; height: 100%; border-radius: 0; }
  .fe-main { flex-direction: column; }
  .fe-preview { width: auto; height: 40%; border-left: 0; border-top: 1px solid var(--line); }
  .fe-note { display: none; }
}

/* ======================================================================= Chat canvas (chat-canvas.js) */
.conv-body { flex: 1; min-height: 0; display: flex; }
.conv-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.conv-canvas { position: relative; width: 460px; flex: none; min-height: 0; display: flex; border-left: 1px solid var(--line); background: var(--bg); }
.conv-canvas[hidden] { display: none; }
.conv-body[data-canvas="full"] .conv-chat { display: none; }
.conv-body[data-canvas="full"] .conv-canvas { flex: 1; width: auto !important; border-left: 0; }
.conv-body[data-canvas="full"] .cc-resize { display: none; }
.cc-resize { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 3; }
.cc-resize::after { content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 44px; margin-top: -22px; border-radius: 2px; background: var(--line); }
.cc-resize:hover::after, .cc-resize:focus-visible::after { background: var(--accent); }
.cc-host { flex: 1; min-width: 0; display: flex; }
.canvas-toggle[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cc { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); }
.cc.off .cc-tools, .cc.off .cc-head .cc-views { display: none; }
.cc-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.cc-title { font-size: 15px; }
.cc-views { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--hover); }
.cc-views button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 600 12.5px var(--text); cursor: pointer; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-views button[hidden] { display: none; }
.cc-views button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.cc-grow { flex: 1; }
.cc-faces { display: flex; }
.cc-face { width: 26px; height: 26px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--surface); color: #fff; font: 700 10.5px var(--text); display: grid; place-items: center; }
.cc-icon { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.cc-icon:hover { background: var(--hover); color: var(--ink); }
.cc-file { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cc-file[hidden], .cc-board[hidden], .cc-add[hidden], .cc-menu[hidden], .cc-file-bar[hidden] { display: none; }
.cc-file-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.cc-file-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cc-file-host > .fp { flex: 1; }
.cc-note { font-size: 12px; color: var(--muted); }
.cc-chip { height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent); font: 600 12.5px var(--text); cursor: pointer; white-space: nowrap; }
.cc-chip:hover { border-color: var(--accent); }
.cc-chip.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cc-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cc-chip[hidden] { display: none; }
.cc-board { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.cc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; }
.cc-filters { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--hover); flex-wrap: wrap; }
.cc-filters button { height: 26px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 600 12px var(--text); cursor: pointer; }
.cc-filters button[aria-pressed="true"] { background: var(--surface); color: var(--ink); }
.cc-ai { position: relative; }
.cc-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; width: 280px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); display: grid; }
.cc-menu button { padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; font: 500 13px var(--text); cursor: pointer; }
.cc-menu button:hover { background: var(--hover); }
.cc-add { display: grid; gap: 8px; margin: 0 12px 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cc-add :is(input, textarea), .cc-inline :is(input, textarea) { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font: 13.5px var(--text); box-sizing: border-box; resize: vertical; }
.cc-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cc-msg { margin: 0 12px; min-height: 0; font-size: 12.5px; color: var(--accent); }
.cc-msg:empty { display: none; }
.cc-cards { padding: 4px 12px 16px; columns: 260px; column-gap: 12px; }
.cc-empty { margin: 24px 4px; color: var(--muted); font-size: 13.5px; column-span: all; }
.cc-card { position: relative; break-inside: avoid; display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cc-card.ai { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cc-card.k-note { background: color-mix(in srgb, #fff4c2 55%, var(--surface)); border-color: color-mix(in srgb, #f0dc8a 70%, var(--line)); }
.cc-card-head { display: flex; align-items: center; gap: 6px; }
.cc-kind { font: 700 10.5px var(--text); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.cc-mini { height: 24px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 600 11.5px var(--text); cursor: pointer; }
.cc-mini:hover { background: var(--hover); color: var(--ink); }
.cc-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.cc-name { font-size: 14.5px; }
.cc-sub { font-size: 12.5px; color: var(--muted); }
.cc-lines { margin: 0; padding-left: 18px; font-size: 13.5px; }
.cc-by, .cc-src { font-size: 11.5px; color: var(--muted); }
.cc-bar { height: 8px; border-radius: 4px; background: var(--hover); overflow: hidden; }
.cc-bar i { display: block; height: 100%; background: var(--ok); }
.cc-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cc-task { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.cc-task input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.cc-task span { flex: 1; }
.cc-task.done span { text-decoration: line-through; color: var(--muted); }
.cc-task small { color: var(--muted); font-size: 11.5px; }
.cc-ava { width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 700 9px var(--text); font-style: normal; display: grid; place-items: center; flex: none; }
.cc-inline { display: flex; gap: 6px; }
.cc-inline.cc-editing { flex-direction: column; }
.cc-option { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 500 13px var(--text); cursor: pointer; overflow: hidden; text-align: left; }
.cc-option span { flex: 1; position: relative; z-index: 1; }
.cc-option b { position: relative; z-index: 1; }
.cc-option i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, #6b3fd4 16%, transparent); }
.cc-option.mine { border: 2px solid var(--accent); }
.cc-when { font-size: 18px; font-weight: 700; }
.cc-filebtn { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.cc-filebtn span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cc-filebtn b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-filebtn small { font-size: 12px; color: var(--accent); }
.cc-quote { margin: 0; padding-left: 12px; border-left: 3px solid var(--accent); font-size: 14px; font-style: italic; }
.cc-code { border-radius: 10px; overflow: hidden; background: #1b2236; color: #e7ebf5; }
.cc-code-head { display: flex; align-items: center; padding: 4px 6px 4px 10px; background: #141a2c; font-size: 12px; }
.cc-code-head b { flex: 1; color: #c9d1e3; }
.cc-code-head .cc-mini { color: #c9d1e3; }
.cc-code pre { margin: 0; padding: 10px 12px; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; max-height: 280px; overflow: auto; }
.cc-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); }
.cc-link small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-looking { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 11px var(--text); }
.cc.compact .cc-cards { columns: 1; }
.cc.compact .cc-tools .cc-filters { display: none; }
/* Smart cards in messages */
.smart-file { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; min-width: 220px; }
.smart-file:hover { border-color: var(--accent); }
.smart-file span:last-child { display: flex; flex-direction: column; min-width: 0; }
.smart-file b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-file small { font-size: 12px; color: var(--accent); }
.smart-board { margin-top: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 12.5px var(--text); cursor: pointer; }
.smart-date { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.smart-date span { padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.msg-code { margin: 6px 0; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--ink) 88%, var(--accent)); color: #e7ebf5; }
.msg-code-head { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: color-mix(in srgb, #141a2c 88%, var(--accent)); font-size: 12px; color: #c9d1e3; }
.msg-code-head b { font-weight: 600; text-transform: lowercase; }
.msg-code-copy { margin-left: auto; min-height: 32px; padding: 4px 10px; border: 0; border-radius: 8px; background: color-mix(in srgb, #fff 12%, transparent); color: #e7ebf5; font: 600 12px var(--text); cursor: pointer; }
.msg-code-copy:hover, .msg-code-copy:focus-visible { background: color-mix(in srgb, #fff 22%, transparent); }
.msg-code pre { margin: 0; padding: 10px 12px; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.pdf-card { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--edge); text-align: left; }
.pdf-card-top { display: flex; align-items: center; gap: 10px; }
.pdf-card .fp-tag { flex: none; }
.pdf-card-top span { display: grid; min-width: 0; flex: 1; }
.pdf-card-top b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-card-top small { font-size: 12px; color: var(--muted); }
.pdf-open { flex: none; min-height: 44px; min-width: 64px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--accent); font: 600 13px var(--text); cursor: pointer; }
.pdf-open:hover, .pdf-open:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.pdf-preview { margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 13px; color: var(--ink); }
.pdf-preview b { display: block; margin-bottom: 4px; }
.pdf-preview ol { margin: 0; padding-left: 1.2em; }
.pdf-more { min-height: 44px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; background: none; color: var(--muted); font: 600 12.5px var(--text); cursor: pointer; width: 100%; }
.pdf-more:hover { color: var(--ink); }
.msg-orig { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
.msg-orig b { font-weight: 600; color: var(--faint); }
.tr-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 99px; font: 600 11px var(--text); color: var(--muted); vertical-align: 1px; }
@media (max-width: 1100px) {
  .conv-body[data-canvas="side"] .conv-chat { display: none; }
  .conv-body[data-canvas="side"] .conv-canvas { flex: 1; width: auto !important; border-left: 0; }
  .conv-body[data-canvas="side"] .cc-resize { display: none; }
}
.ms-terms-row { margin-top: 12px; }

/* ======================================================================= Pop-outs: one frame for every window (dock.js) */
body .pop-row-msg { right: 132px; bottom: 0; gap: 12px; }
body .pop-row .dock-win, body .pop-row .dock-pair {
  height: min(560px, calc(calc(100 * var(--vh, 1vh)) - 72px)) !important; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0;
  background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px -14px rgba(23, 32, 54, 0.35); opacity: 1; transform: none; filter: none; }
body .pop-row .dock-win { width: 360px; }
body .pop-row .dock-win.bot { width: 400px; }
body .pop-row .dock-win.mail { width: 420px; }
body .pop-row .dock-pair .dock-win { height: 100% !important; border: 0; border-radius: 0; box-shadow: none; }
body .pop-row .dock-pair .dock-win.grp { width: 360px; }
body .pop-row .dock-win .dw-head, body .pop-row .dock-win.bot .dw-head, body .pop-row .dock-win.relay-dock .dw-head,
body .pop-row .dock-win.mail .dw-head, body .pop-row .dock-win.cal .dw-head, body .pop-row .dock-win.grp .dw-head {
  min-height: 52px; padding: 8px 6px 8px 12px; gap: 8px; background: var(--surface) !important; color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important; border-radius: 0; }
body .pop-row .dw-head .dw-grab { display: none; }
body .pop-row .dw-av { width: 30px; height: 30px; border-radius: 9px; background: var(--accent) !important; color: #fff !important; font: 700 11.5px var(--text); }
body .pop-row .dw-av svg { width: 16px; height: 16px; }
body .pop-row .dock-win.msg .dw-av { background: #6b3fd4 !important; }
body .pop-row .dock-win.mail .dw-av { background: #172036 !important; }
body .pop-row .dock-win.cal .dw-av { background: #1e7a45 !important; }
body .pop-row .dw-titles b { font-size: 13.5px; }
body .pop-row .dw-titles small { font-size: 11.5px; color: var(--muted) !important; opacity: 1; }
body .pop-row .dw-btn { width: 30px; height: 30px; border-radius: 8px; color: var(--muted) !important; }
body .pop-row .dw-btn:hover { background: var(--hover) !important; color: var(--ink) !important; }
body .pop-row .dw-btn[aria-pressed="true"] { background: var(--accent-soft) !important; color: var(--accent) !important; }
body .pop-row .dw-btn svg { width: 17px; height: 17px; }
body .pop-row .dw-teams-pill { height: 28px; }
body .pop-row .dw-side-btn { width: auto; padding: 0 8px; gap: 4px; border-radius: 8px; font: 600 12px var(--text); }
body .pop-row .dw-side-btn span { display: inline; }
/* Stage Cards and layered mode are retired: nothing overlaps, nothing goes see-through. */
.ax-stage, .ax-layer-bar { display: none !important; }
body.dock-layered .layer-back { opacity: 1 !important; transform: none !important; filter: none !important; }
/* The canvas inside a chat pop-out */
body .pop-row .dock-win.msg.with-canvas { width: calc(360px + 440px); }
body .pop-row .dock-pair.has-canvas .dock-win.grp { width: calc(360px + 440px); }
.dock-win.with-canvas { display: grid !important; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
.dock-win.with-canvas > :not(.dw-canvas) { grid-column: 1; }
.dock-win.with-canvas > .dw-list { min-height: 0; }
.dw-canvas { grid-column: 2; grid-row: 1 / -1; min-height: 0; display: flex; border-left: 1px solid var(--line); }
.dw-canvas > .cc { border-top-right-radius: 14px; }
.dw-file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.dw-file span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dw-file b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-file small { font-size: 11px; color: var(--accent); }
button.dw-media { padding: 0; border: 0; background: none; cursor: pointer; }
@media (max-width: 1100px) {
  body .pop-row .dock-win.msg.with-canvas, body .pop-row .dock-pair.has-canvas .dock-win.grp { width: min(760px, calc(100vw - 24px)); }
  .dock-win.with-canvas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
@media (max-width: 700px) {
  .dock-win.with-canvas { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
  .dock-win.with-canvas > .dw-canvas { position: fixed; inset: 0; z-index: 200; grid-column: 1; border: 0; background: var(--surface); }
}
body .pop-row .dw-head { overflow: hidden; }
body .pop-row .dw-titles { flex: 1; min-width: 56px; overflow: hidden; }
body .pop-row .dw-titles b, body .pop-row .dw-titles small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .pop-row .dw-teams-pill { width: 30px; padding: 0; justify-content: center; border-radius: 8px; flex: none; }
body .pop-row .dw-teams-pill span { display: none; }
body .pop-row .dw-head > :not(.dw-titles):not(.dw-av) { flex: none; }
body .pop-row .dock-win.msg:not(.attached) { width: 380px; }
body .pop-row .dock-win.msg.with-canvas { width: calc(380px + 440px); }
body .pop-row .dock-win .dw-head { gap: 2px; padding-right: 4px; }
body .pop-row .dock-win .dw-head .dw-av { margin-right: 6px; }
body .pop-row .dock-win .dw-head .dw-btn, body .pop-row .dw-teams-pill { width: 27px; height: 27px; }

/* Synaram Spaces header */
.gs-grow { flex: 1; }
.gs-empty-actions { justify-content: center; margin-top: 18px; }

/* ======================================================================= Cookie consent and permission prompts (permissions.js) */
body:has(#ax-consent:not([hidden])) { padding-bottom: calc(min(42vh, 360px) + 24px); }
body:has(#ax-consent:not([hidden])) .page-main,
body:has(#ax-consent:not([hidden])) .plan-grid,
body:has(#ax-consent:not([hidden])) .composer,
body:has(#ax-consent:not([hidden])) .msgr,
body:has(#ax-consent:not([hidden])) .mail-app,
body:has(#ax-consent:not([hidden])) .tx-main,
body:has(#ax-consent:not([hidden])) .cal-app,
body:has(#ax-consent:not([hidden])) .lg-main,
body:has(#ax-consent:not([hidden])) .hs-main,
body:has(#ax-consent:not([hidden])) .gl-main,
body:has(#ax-consent:not([hidden])) .cl-main,
body:has(#ax-consent:not([hidden])) .ns-main,
body:has(#ax-consent:not([hidden])) .ax-cmd,
body:has(#ax-consent:not([hidden])) .place-empty { padding-bottom: calc(min(42vh, 360px) + 24px); }
.ax-consent {
  position: fixed; left: 12px; right: auto; bottom: 12px; z-index: 12000;
  width: min(420px, calc(100% - 24px)); max-width: 420px; margin: 0; padding: 14px 16px;
  border: 1px solid var(--line, #d2d2d7); border-radius: 16px;
  background: var(--surface, #fff); color: var(--ink, #1d1d1f);
  box-shadow: 0 18px 50px rgba(16,22,42,.18);
  display: grid; gap: 10px; font: 400 13.5px/1.45 var(--text, system-ui);
  max-height: min(42vh, 360px); overflow: auto;
}
.ax-consent[hidden] { display: none !important; }
.ax-consent h2 { margin: 0; font: 700 15px/1.2 var(--display, system-ui); }
.ax-consent p { margin: 0; color: var(--muted, #6e6e73); }
.ax-consent a { color: var(--accent, #4A55C8); font-weight: 600; }
.ax-consent-opts { display: grid; gap: 6px; }
.ax-consent-opts label {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start;
  padding: 8px 10px; border: 1px solid var(--line, #e5e5ea); border-radius: 12px; background: var(--bg, #f5f5f7);
}
.ax-consent-opts label small { display: block; color: var(--muted, #6e6e73); font-weight: 400; }
.ax-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ax-consent-actions button {
  min-height: 44px; height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line, #d2d2d7);
  background: var(--bg, #f5f5f7); color: inherit; font: 600 13px var(--text, system-ui); cursor: pointer;
}
.ax-consent-actions .primary {
  background: var(--accent, #4A55C8); border-color: var(--accent, #4A55C8); color: #fff;
}
.ax-perm-dialog::backdrop { background: rgba(16,22,42,.42); }
.ax-perm-dialog {
  border: 1px solid var(--line, #d2d2d7); border-radius: 16px; padding: 18px;
  max-width: min(420px, calc(100vw - 24px)); background: var(--surface, #fff); color: var(--ink, #1d1d1f);
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
}
.ax-perm-dialog h2 { margin: 0 0 8px; font: 700 17px/1.2 var(--display, system-ui); }
.ax-perm-dialog p { margin: 0 0 8px; color: var(--muted, #6e6e73); font: 400 13.5px/1.45 var(--text, system-ui); }
.ax-perm-dialog .ax-consent-actions { margin-top: 12px; }
@media (max-width: 700px) {
  .ax-consent { left: 8px; right: 8px; width: auto; max-width: none; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}
    

/* Messages on a phone: an open chat covers the page header, so its back button, title and Canvas show,
   and the floating quick-actions button steps aside so it doesn't cover Send. */
@media (max-width: 760px) {
  body.reading .msgr-main { z-index: 85; }
  body.reading .omni-fab { display: none; }
  body.reading .conv-head { padding: 8px 10px; gap: 6px; }
  body.reading .conv-head .conv-title { flex: 1; min-width: 0; }
  body.reading .conv-head .conv-title h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
  body.reading .conv-head .conv-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.reading .conv-head .tabs { order: 10; flex-basis: 100%; }
  body.reading .conv-head .tabs button { padding: 6px 8px; font-size: 13px; }
  body.reading .conv-head #head-share, body.reading .conv-head #head-popout { display: none; }
  .conv-body[data-canvas] .conv-canvas { width: auto !important; }
  .conv-body[data-canvas="side"] .conv-chat { display: none; }
  .conv-body[data-canvas="side"] .conv-canvas { flex: 1; border-left: 0; }
  .cc-tools { gap: 4px; }
  .cc-filters { display: none; }
}
.gs-thumb-img { position: relative; overflow: hidden; }
.gs-thumb-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.gs-thumb-img span { position: relative; z-index: 1; }

/* ======================================================================== Axork Chat (axchat.js) */
.model-menu.axc-sheet { max-height: none; }
.axc-sheet { padding: 6px; width: min(400px, calc(calc(100 * var(--vw, 1vw)) - 24px)); }
.axc-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; font-size: 13px; color: var(--muted); }
.axc-head b { color: var(--ink); font-size: 13.5px; letter-spacing: 0.01em; }
.axc-head > span { margin-left: auto; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--hover); }
.axc-back { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); }
.axc-back:hover { background: var(--hover); }
.axc-back svg, .axc-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.menu > button.axc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: start; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
}
.axc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.axc-name { font-weight: 600; font-size: 14.5px; }
.axc-line { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.axc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.axc-chip {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 8px;
  font-size: 11.5px; font-weight: 600; background: var(--hover); color: var(--muted); white-space: nowrap;
}
.axc-chip.extra { background: rgba(217, 119, 6, 0.13); color: #b45309; }
.axc-chip.plan { background: var(--accent-soft); color: var(--accent); }
.axc-chip.rec { background: var(--accent-soft); color: var(--accent); }
.axc-chip.note { background: transparent; border: 1px solid var(--line); font-weight: 500; }
.axc-tick { color: var(--accent); padding-top: 2px; }
.axc-tick svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.axc-row.locked .axc-name, .axc-row.locked .axc-line { opacity: 0.6; }
.axc-row.locked .axc-tick { color: var(--faint); }
/* Locked, not hidden (axchat.locked_card): one short card for what a plan doesn't include. Never sends. */
.axc-lock-card { display: flex; flex-direction: column; gap: 8px; margin: 4px 8px 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.axc-lock-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2; }
.axc-lock-adds { margin: 0; font-size: 14px; line-height: 1.4; }
.axc-lock-plan { margin: 0; font-size: 13px; color: var(--muted); }
.axc-lock-name { font-weight: 600; color: var(--ink); }
.axc-lock-up {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
.axc-lock-note { margin: 0; font-size: 12px; color: var(--faint); }
.axc-row.axc-auto { margin-bottom: 2px; }
.axc-section { margin: 10px 12px 4px; font-size: 12px; font-weight: 600; color: var(--faint); text-transform: lowercase; }
.axc-effort { margin: 6px 4px 2px; padding: 10px 8px 8px; border-top: 1px solid var(--line); }
.axc-effort-head { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 8px; font-size: 13.5px; }
.axc-effort-head span { font-size: 12px; color: var(--muted); }
.axc-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; border-radius: 11px; background: var(--hover); }
.axc-seg button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 0; border-radius: 8px; padding: 6px 4px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600;
}
.axc-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.axc-seg button.locked { opacity: 0.55; }
.axc-seg svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.axc-dot { position: absolute; top: 5px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #d97706; }
.menu > button.axc-more {
  display: flex; justify-content: space-between; margin-top: 4px; padding: 10px 12px; border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px; font-weight: 600; font-size: 14px;
}
.axc-foot { display: block; margin: 2px 8px 6px; padding: 8px 6px 2px; font-size: 12px; color: var(--muted); text-decoration: none; }
.axc-foot:hover { color: var(--accent); }

/* the usage meter under the message box */
.axc-meter { margin: 6px auto 0; width: 100%; max-width: var(--composer-w, 760px); padding: 0 6px; }
.axc-meter-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 2px 4px;
  color: var(--muted); font-size: 12.5px; text-align: left; cursor: pointer; border-radius: 8px;
}
.axc-meter-btn:hover { background: var(--hover); }
.axc-meter-track { position: relative; flex: 0 0 120px; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.axc-meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--accent); transition: width 0.3s ease; }
.axc-meter-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axc-meter-text b { font-weight: 600; color: var(--ink); }
.axc-meter.warn .axc-meter-fill { background: #d97706; }
.axc-meter.warn .axc-meter-text b { color: #b45309; }

/* Steady State (steady_state.py): the meter's one line and Details, the quiet note, the paced-reply chip with its
   retry, the heavy-model chips in the model sheet, the first-activation question, the ask and Exhausted cards and the
   Homeostat panel. Token colours only; every state is words, never colour alone. */
.ss-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 0; padding: 0 10px;
  font-size: 12.5px; color: var(--muted); }
.ss-heavy { font-size: 13px; color: var(--muted); }
.ss-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 0; padding: 8px 10px;
  border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 13px; }
.ss-note span { flex: 1 1 200px; }
.ss-undo { min-height: 24px; padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer; }
.axc-chip.ss-chip { background: var(--accent-soft); color: var(--ink); white-space: normal; }
.axc-chip.ss-warn, .axc-chip.ss-exception { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.axc-chip.ss-wait { background: var(--hover); color: var(--muted); }
.ss-pref { display: grid; gap: 6px; margin: 4px 10px 10px; padding: 10px; border-radius: 12px; background: var(--accent-soft); }
.ss-pref b { font-size: 13.5px; color: var(--ink); }
.ss-pref-opt { display: grid; gap: 2px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ss-pref-opt small { color: var(--muted); font-size: 12px; }
.ss-pref-opt:hover { background: var(--hover); }
.ss-details { text-align: left; }
.ss-details p { margin: 6px 0; }
.ss-details .ss-pace { color: var(--ink); font-weight: 600; }
.ss-forecasts, .ss-routes ul { margin: 4px 0; padding-left: 18px; }
.ss-forecasts li, .ss-routes li { margin: 2px 0; }
.ss-routes p { margin: 8px 0 2px; }
.ss-ask { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ss-ask button, .ss-ask a { min-height: 32px; }
.ss-used-options { margin-top: 8px; }
.ss-used-options a { text-decoration: none; display: inline-flex; align-items: center; }
.ss-next { margin-top: 8px; }
.ss-options { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ss-options li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 12px; }
.ss-options li span { display: grid; gap: 2px; flex: 1 1 200px; }
.ss-options small { color: var(--muted); }
.ss-options button { min-height: 32px; }
/* W8-D: the four-message ceiling card (exactly 4: a yes; over 4: the ways to fit), "Continue answer", the Lite note */
.fit-card .mt-card-title:focus { outline: none; }
.fit-card .mt-card-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fit-options { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.fit-options li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fit-text { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
.fit-text b { color: var(--ink); }
.fit-text small { color: var(--muted); overflow-wrap: anywhere; }
.fit-options button, .fit-foot button { min-height: 32px; }
.fit-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.dw-fit { list-style: none; margin: 6px 0; }
.dw-fit .fit-card { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 10px 12px;
  background: var(--surface); }
.ax-shortened { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ax-shortened .fine { color: var(--muted); margin: 0; }
.ax-shortened button { min-height: 32px; }
.ss-lite-note { display: block; flex-basis: 100%; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 400;
  line-height: 1.45; white-space: normal; }
.fit-card .fine, .ss-exhausted .fine, .video-card .fine, .ax-shortened .fine { text-align: left; }
@media (pointer: coarse) {
  .fit-options button, .fit-foot button, .ax-shortened button { min-height: 44px; }
}
.ss-panel { margin: 14px 0; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.ss-panel h3 { margin: 0 0 8px; }
.ss-auto { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 6px; }
.ss-sub { display: grid; gap: 6px; padding-left: 24px; }
.ss-sub input[type="number"] { max-width: 90px; }
.ss-advanced { margin: 10px 0; }
.ss-advanced summary { cursor: pointer; font-weight: 600; min-height: 24px; }

/* the usage page */
dialog.axc-usage {
  width: min(520px, calc(calc(100 * var(--vw, 1vw)) - 24px)); max-height: calc(calc(100 * var(--vh, 1vh)) - 40px);
  border: 0; border-radius: 20px; padding: 22px 24px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
dialog.axc-usage::backdrop { background: rgba(8, 12, 28, 0.5); }
.axc-u-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.axc-u-head h2 { margin: 0; font-size: 19px; }
.axc-u-head .icon-btn { margin-left: auto; }
.axc-u-row { margin: 0 0 14px; }
.axc-u-row .axc-meter-track { display: block; flex: none; height: 7px; margin: 6px 0 4px; }
.axc-u-top { display: flex; justify-content: space-between; font-size: 14px; }
.axc-u-top span, .axc-u-row small, .axc-u-note { color: var(--muted); font-size: 12.5px; }
dialog.axc-usage h3 { margin: 18px 0 8px; font-size: 14px; }
.axc-u-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.axc-u-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.axc-u-table td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
.axc-u-table td:not(:first-child), .axc-u-table th:not(:first-child) { text-align: right; }
.axc-u-empty { color: var(--muted); text-align: center !important; }
.axc-u-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.axc-u-actions a { text-decoration: none; }

/* "This looks like a new topic" */
.axc-topic {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: var(--composer-w, 760px); margin: 0 auto 8px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
  font-size: 14px;
}
.axc-topic[hidden] { display: none; }
.axc-topic-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.axc-topic-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.axc-topic-text { flex: 1; min-width: 0; }
.axc-topic-text small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axc-topic .ghost, .axc-topic .primary { flex: none; }
.axc-topic-text small.axc-topic-fit { white-space: normal; color: var(--ink); }
.axc-topic-pick { flex: none; max-width: 190px; min-height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; padding: 0 12px; }

/* answer label and versions */
.model-label.axc-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.axc-ver { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.axc-ver .act { padding: 4px; min-width: 0; }
.axc-ver .act:disabled { opacity: 0.35; }
.axc-ver svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .axc-meter-track { flex-basis: 70px; }
  .axc-topic { flex-wrap: wrap; }
  .axc-topic-text { flex-basis: calc(100% - 44px); }
}

/* printable chat (chat-print.html) */
body.cp-page { background: var(--bg); color: var(--ink); margin: 0; }
.cp-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.cp-bar .primary { margin-left: auto; }
.cp-bar a { text-decoration: none; }
.cp-doc { max-width: 760px; margin: 0 auto; padding: 32px 20px 60px; }
.cp-brand { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }
.cp-head h1 { margin: 6px 0 4px; font-size: 26px; line-height: 1.25; }
.cp-meta { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
.cp-list { list-style: none; margin: 0; padding: 0; }
.cp-msg { padding: 14px 0; border-top: 1px solid var(--line); break-inside: avoid-page; }
.cp-who { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cp-user .cp-body { white-space: pre-wrap; font-weight: 500; }
.cp-files { margin: 6px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.cp-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media print {
  .cp-bar { display: none; }
  body.cp-page { background: #fff; color: #000; }
  .cp-doc { padding: 0; max-width: none; }
  .cp-body pre, .cp-body code { background: #f4f4f5 !important; color: #000 !important; }
}

/* chat title menu and project settings */
.chat-title { cursor: pointer; border-radius: 8px; padding: 2px 6px; }
.chat-title:hover { background: var(--hover); }
dialog.axc-project { width: min(560px, calc(calc(100 * var(--vw, 1vw)) - 24px)); padding: 24px; }
dialog.axc-project h2 { margin: 0 0 4px; font-size: 19px; }
.axc-p-lab { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 13.5px; }
.axc-p-lab small { font-weight: 400; color: var(--muted); }
dialog.axc-project textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; resize: vertical; }
.axc-p-files { list-style: none; margin: 0; padding: 4px; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.axc-p-files label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.axc-p-files label:hover { background: var(--hover); }
.axc-p-files label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axc-p-files label small { color: var(--muted); }
.axc-p-files li.axc-u-note { padding: 10px; }
.sheet-days { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 14px; }
.sheet-days[hidden] { display: none; }
.sheet-days select { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--surface); color: var(--ink); font: inherit; }

/* Axork Chat in the chatbot pop-outs */
.dw-pickm {
  display: inline-flex; align-items: center; gap: 4px; max-width: 170px; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 8px 3px 10px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.dw-pickm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-pickm svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.dw-pickm:hover { background: var(--hover); }
.dw-popmenu { position: fixed; z-index: 400; overflow-y: auto; }
.dw-popmenu.dw-sheet { width: min(360px, calc(calc(100 * var(--vw, 1vw)) - 16px)); }
.dw-popmenu > button { font-size: 14px; }
.dw-recent { width: 280px; }
.dw-recent > button span { display: flex; flex-direction: column; min-width: 0; }
.dw-recent > button b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-recent > button small { color: var(--muted); font-size: 12px; }
.dw-recent > button.dw-recent-new b { font-weight: 700; }
.dw-recent-all { display: block; padding: 8px 10px 4px; font-size: 13px; color: var(--accent); text-decoration: none; }
.dock-win .dw-meter { margin: 0; padding: 0 10px 8px; max-width: none; }
.dock-win .dw-meter .axc-meter-track { flex-basis: 64px; }
.dock-win .dw-meter .axc-meter-btn { font-size: 11.5px; }
.dock-win .dw-topic { margin: 0 8px 6px; width: auto; padding: 8px 10px; flex-wrap: wrap; font-size: 13px; box-shadow: none; }
.dock-win .dw-topic .axc-topic-text { flex-basis: calc(100% - 42px); }
.dock-win .dw-who.axc-label { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.dock-win .dw-who .axc-chip { font-size: 10.5px; padding: 0 6px; }
body .pop-row .dock-win.bot.with-canvas { width: calc(400px + 440px); }
.dw-botcanvas { position: relative; flex-direction: column; background: var(--bg); border-top-right-radius: 14px; overflow: hidden; }
.dbc-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.dbc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.dbc-empty { margin: 14px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.dbc-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 10px; background: transparent; padding: 8px; text-align: left; color: var(--ink); }
.dbc-item:hover { background: var(--hover); }
.dbc-item span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dbc-item b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbc-item small { color: var(--muted); font-size: 12px; }
.dbc-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.dbc-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.dbc-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--surface); }
.dbc-view[hidden] { display: none; }
.dbc-view-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.dbc-view-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.dbc-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; font-size: 14px; line-height: 1.55; }
.dbc-body pre { white-space: pre-wrap; font-size: 12.5px; }
.dw-model[hidden] { display: none !important; }
@media (max-width: 640px) {
  .model-menu.axc-sheet, .model-menu.axc-sheet.down { position: fixed; left: 8px; right: 8px; top: 64px; bottom: auto; width: auto; }
}

/* The + tucks into a dot at the edge until you come near it; drag it along either edge */
.omni-fab { transition: bottom .15s ease; }
.omni-fab.left { align-items: flex-start; padding: 0 0 0 12px; }
.omni-fab:not(.left) { padding: 0 12px 0 0; }
.omni-core { touch-action: none; transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease; }
.omni-fab.tucked:not(.near):not(.open) .omni-core { transform: translateX(30px) scale(0.42); opacity: 0.45; box-shadow: none; }
.omni-fab.tucked.left:not(.near):not(.open) .omni-core { transform: translateX(-30px) scale(0.42); }
.omni-fab.dragging .omni-core { cursor: grabbing; transform: scale(1.08); opacity: 0.9; }
.omni-fab.dragging { transition: none; }

/* Spotlight: one search over everything (spotlight.js) */
.spot { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: start center; padding: 10vh 16px 16px; background: rgba(10, 14, 30, 0.42); backdrop-filter: blur(3px); }
.spot[hidden] { display: none; }
.spot-card { width: min(860px, 100%); max-height: min(640px, 80vh); display: flex; flex-direction: column; border-radius: 18px;
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px -12px rgba(0, 0, 0, 0.45); overflow: hidden; border: 1px solid var(--line); }
.spot-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.spot-bar svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; }
.spot-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 18px; }
.spot kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; font-size: 11px; color: var(--muted); font-family: inherit; }
.spot-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; flex: 1; }
.spot-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; border-right: 1px solid var(--line); }
.spot-group { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.spot-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.spot-item[aria-selected="true"] { background: var(--accent-soft); }
.spot-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.spot-text b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--hover); color: var(--accent); }
.spot-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.spot-mail { color: #0f766e; } .spot-fascichat { color: #7c3aed; } .spot-event { color: #15803d; } .spot-person { color: #b45309; } .spot-chat { color: var(--accent); }
.spot-hot { width: 7px; height: 7px; border-radius: 50%; background: #d97706; flex: none; }
.spot-note { padding: 18px 12px; color: var(--muted); font-size: 14px; }
.spot-pane { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 16px; background: var(--bg); }
.spot-p-head { display: flex; gap: 10px; align-items: center; }
.spot-p-head b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.spot-p-head small { color: var(--muted); font-size: 12px; }
.spot-p-body { flex: 1; margin: 12px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.spot-img { display: block; max-width: 100%; max-height: 240px; border-radius: 10px; margin-bottom: 8px; object-fit: contain; }
.spot-turn { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.spot-turn.me { background: var(--accent-soft); border-color: transparent; }
.spot-muted { color: var(--muted); }
.spot-p-act { display: flex; gap: 8px; }
.spot-foot { display: flex; gap: 16px; margin: 0; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.spot-foot span:last-child { margin-left: auto; }
@media (max-width: 720px) {
  .spot { padding-top: 12px; }
  .spot-body { grid-template-columns: 1fr; }
  .spot-pane, .spot-foot { display: none; }
  .spot-list { border-right: 0; }
}

/* ======================================================================== Camrive (drive.js) */
.tx-main { max-width: none !important; padding: 12px 16px 16px !important; }
.tx { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0; height: calc(calc(100 * var(--vh, 1vh)) - 110px); min-height: 480px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.tx.with-info { grid-template-columns: 232px minmax(0, 1fr) 340px; }
.tx-side { overflow-y: auto; padding: 10px 8px 12px; background: var(--bg); border-right: 1px solid var(--line); }
.tx-side-h { display: flex; align-items: center; justify-content: space-between; margin: 12px 8px 4px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.tx-side-note { margin: 4px 10px; font-size: 12px; color: var(--muted); }
.tx-add { border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.tx-add:hover { background: var(--hover); color: var(--ink); }
.tx-place, .tx-send { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 8px; background: transparent; color: var(--ink);
  padding: 6px 8px; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.tx-place:hover, .tx-send:hover { background: var(--hover); }
.tx-place.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tx-place svg, .tx-send svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tx-place span, .tx-send span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-place small { color: var(--faint); font-size: 11.5px; }
.tx-folder[data-depth="0"] { padding-left: 26px; } .tx-folder[data-depth="1"] { padding-left: 40px; } .tx-folder[data-depth="2"] { padding-left: 54px; }
.tx-folder[data-depth="3"] { padding-left: 68px; }
.tx-x { font-style: normal; color: var(--faint); padding: 0 4px; border-radius: 4px; visibility: hidden; }
.tx-place:hover .tx-x { visibility: visible; }
.tx-x:hover { color: var(--danger); }
.tx-send { border: 1px dashed var(--line); margin: 4px 0; color: var(--muted); cursor: default; }
.tx-drop, .tx-send.tx-drop { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft) !important; }
.tx-quota { margin: 14px 8px 0; }
.tx-quota-bar { display: block; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.tx-quota-bar i { display: block; height: 100%; background: var(--accent); }
.tx-quota small { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.tx-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; vertical-align: middle; margin-left: 3px; }
.tx-red { background: #ef4444; } .tx-orange { background: #f97316; } .tx-yellow { background: #eab308; } .tx-green { background: #22c55e; }
.tx-blue { background: #3b82f6; } .tx-purple { background: #a855f7; } .tx-gray { background: #9ca3af; }
.tx-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tx-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tx-bar .icon-btn { width: 30px; height: 30px; }
.tx-bar .icon-btn:disabled { opacity: .35; }
.tx-bar .icon-btn svg, .tx-views svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tx-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; font-weight: 600; font-size: 15px; overflow: hidden; }
.tx-crumbs button { border: 0; background: transparent; color: var(--ink); font: inherit; padding: 3px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.tx-crumbs button:hover { background: var(--hover); }
.tx-crumbs span { color: var(--faint); }
.tx-search { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); width: min(280px, 40vw); }
.tx-search svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; }
.tx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; }
.tx-views { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--hover); }
.tx-views button { display: grid; place-items: center; width: 30px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.tx-views button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
#tx-sort { height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; padding: 0 6px; }
.tx-sel { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--accent-soft); font-size: 13px; flex-wrap: wrap; }
.tx-sel span { color: var(--muted); }
.tx-body { flex: 1; min-height: 0; overflow: auto; padding: 12px; outline: 0; }
.tx-status { margin: 0; padding: 6px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.tx-v-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; align-content: start; }
.tx-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 12px; cursor: default; text-align: center; user-select: none; }
.tx-card:hover { background: var(--hover); }
.tx-card.sel { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.tx-card b { width: 100%; font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-card small { font-size: 11px; color: var(--muted); }
.tx-thumb { display: grid; place-items: center; width: 88px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.tx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tx-fold { color: #3b82f6; border: 0; background: transparent; }
.tx-thumb.tx-fold svg { width: 64px; height: 64px; fill: #bfdbfe; stroke: #3b82f6; stroke-width: 1.2; }
.tx-ext { display: grid; place-items: center; min-width: 44px; height: 30px; padding: 0 6px; border-radius: 7px; font-size: 11px; font-weight: 800;
  letter-spacing: .02em; color: #fff; background: #64748b; }
.tx-k-pdf { background: #dc2626; } .tx-k-doc { background: #2563eb; } .tx-k-sheet { background: #16a34a; } .tx-k-slides { background: #ea580c; }
.tx-k-video { background: #7c3aed; } .tx-k-audio { background: #db2777; } .tx-k-code { background: #0f172a; } .tx-k-archive { background: #a16207; }
.tx-up { opacity: .6; }
.tx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tx-table th { position: sticky; top: -12px; background: var(--surface); text-align: left; font-weight: 600; color: var(--muted); font-size: 12px;
  padding: 6px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.tx-table td { padding: 5px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); white-space: nowrap; }
.tx-table tbody tr:hover { background: var(--hover); }
.tx-table tr.sel { background: var(--accent-soft); }
.tx-name { display: flex; align-items: center; gap: 8px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.tx-where { color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.tx-mini { display: grid; place-items: center; width: 26px; height: 22px; flex: none; border-radius: 5px; overflow: hidden; }
.tx-mini img { width: 100%; height: 100%; object-fit: cover; }
.tx-mini .tx-ext { min-width: 26px; height: 18px; font-size: 7.5px; padding: 0 2px; border-radius: 4px; }
.tx-mini svg { width: 18px; height: 18px; fill: #bfdbfe; stroke: #3b82f6; stroke-width: 1.4; }
.tx-folder-row { cursor: pointer; }
.tx-empty { display: grid; place-items: center; gap: 12px; padding: 48px 20px; text-align: center; color: var(--muted); }
.tx-empty svg { width: 44px; height: 44px; fill: none; stroke: var(--faint); stroke-width: 1.4; }
.tx-empty b, .tx-empty p { margin: 0; color: var(--muted); font: 400 var(--fs-body, 15.5px)/1.45 var(--text); }
.tx-v-columns { padding: 0; }
.tx-cols { display: flex; height: 100%; overflow-x: auto; }
.tx-col { flex: 0 0 240px; overflow-y: auto; border-right: 1px solid var(--line); padding: 6px; }
.tx-col-h { margin: 4px 8px 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-col-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 7px; background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; padding: 5px 8px; text-align: left; cursor: default; }
.tx-col-row span:not(.tx-mini) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-col-row:hover { background: var(--hover); }
.tx-col-row.sel, .tx-col-row.on { background: var(--accent-soft); }
.tx-col-folder { cursor: pointer; }
.tx-col-folder svg { width: 16px; height: 16px; fill: #bfdbfe; stroke: #3b82f6; stroke-width: 1.4; flex: none; }
.tx-col-folder i { font-style: normal; color: var(--faint); }
.tx-map { position: absolute; inset: 0 0 28px 0; }
.tx-body.tx-v-map { position: relative; padding: 0; overflow: hidden; }
.tx-map-key { position: absolute; left: 12px; bottom: 6px; margin: 0; display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); }
.tx-map-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.tx-mk-chat { background: var(--accent); border-radius: 3px !important; } .tx-mk-file { background: #0ea5a3; } .tx-mk-syn { width: 16px !important; height: 0 !important; border-top: 2px dashed #f59e0b; border-radius: 0 !important; }
.tx-info { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); background: var(--bg); }
.tx-info-preview { min-height: 280px; display: flex; }
.tx-info-preview > * { flex: 1; min-width: 0; }
.tx-info-big { display: grid; place-items: center; padding: 30px; }
.tx-meta { padding: 10px 14px 16px; font-size: 13px; }
.tx-meta dl { display: grid; grid-template-columns: 72px 1fr; gap: 4px 10px; margin: 0; }
.tx-meta dt { color: var(--muted); }
.tx-meta dd { margin: 0; overflow-wrap: anywhere; }
.tx-meta-h { margin: 14px 0 6px; font-weight: 600; font-size: 12.5px; }
.tx-meta-h small { color: var(--faint); font-weight: 500; margin-left: 4px; }
.tx-tagpick { display: flex; gap: 6px; flex-wrap: wrap; }
.tx-tagpick .tx-dot { width: 18px; height: 18px; border: 2px solid transparent; cursor: pointer; margin: 0; }
.tx-tagpick .tx-dot.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.tx-related { display: grid; gap: 2px; }
.tx-rel { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: 12.5px;
  padding: 4px 6px; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-rel:hover { background: var(--hover); }
.tx-menu { position: fixed; z-index: 400; min-width: 200px; }
.tx-menu .tx-tagpick { padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
@media (max-width: 900px) {
  .tx, .tx.with-info { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 70vh; }
  .tx-side { display: flex; gap: 4px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px; }
  .tx-side > :not(.tx-place) { display: none; }
  .tx-side .tx-place { width: auto; flex: none; }
  .tx-side .tx-folder { display: none; }
  .tx-info { position: fixed; inset: auto 0 0 0; max-height: 70vh; z-index: 300; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: var(--shadow); }
  .tx-search { width: 100%; order: 10; }
  .tx-v-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
.__________cytoscape_container { position: relative; }
.tx-map.__________cytoscape_container { position: absolute; }
.tx-mk-folder { background: #93c5fd; border-radius: 3px !important; }

/* Beta: no sideways scrolling or clipping on phones, and the + stays inside the screen */
html, body { max-width: 100%; overflow-x: hidden; }
body.page { overflow-x: hidden; }
@media (max-width: 720px) { html, body { width: 100vw; } }
.omni-fab { z-index: 10040; max-width: 100vw; }
.omni-fab .omni-dial { max-width: calc(100vw - 24px); max-height: calc(100vh - 96px); overflow-y: auto; }

/* Blood-Brain Barrier */
.bbb-cover .bbb-form { display: grid; gap: 8px; width: 100%; }
.bbb-cover .bbb-form input { width: 100%; min-height: 40px; padding: 8px 12px; line-height: 1.4; border-radius: 10px; }

/* Dream Cycle card on home */
.dream-card { position: relative; width: min(720px, 100%); margin: 0 auto 18px; padding: 18px 20px; border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface)); border: 1px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 28px var(--accent-soft); animation: dream-glow 4s ease-in-out infinite; }
.dream-card h2 { margin: 6px 0 8px; font-size: 19px; }
.dream-card ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.dream-head { display: flex; justify-content: space-between; align-items: center; }
.dream-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
@keyframes dream-glow { 0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 18px var(--accent-soft); } 50% { box-shadow: 0 0 0 6px var(--accent-soft), 0 0 36px var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .dream-card { animation: none; } }

/* Efferent actions and Reflex Arcs */
.efferent-chip { position: fixed; left: 16px; bottom: 16px; z-index: 10030; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.efferent-panel { position: fixed; left: 16px; bottom: 64px; z-index: 10035; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 96px);
  overflow-y: auto; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.efferent-top { display: flex; justify-content: space-between; align-items: center; }
.efferent-top h2 { margin: 0; font-size: 18px; }
.efferent-panel h3 { margin: 14px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.efferent-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.efferent-row p { margin: 0; }
.efferent-row small { grid-column: 1 / -1; color: var(--muted); }
.efferent-row.handshake p { font-weight: 600; }
.efferent-btns { display: flex; gap: 6px; }
.efferent-arc { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.efferent-arc span { display: grid; gap: 2px; }
.efferent-arc small { color: var(--muted); }

/* The Axork wordmark (home title and the name by the logo) uses Atkinson Hyperlegible; everything else is IBM Plex. */
.axon-lockup-word, .mark-name { font-family: var(--wordmark) !important; font-weight: 700; }

/* Connectome (Synaram Spaces contacts and privacy) */
.cx-app { width: min(1180px, 100%); margin: 0 auto; padding: 20px 16px 48px; box-sizing: border-box; }
.cx-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 14px; }
.cx-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.cx-head h1 { margin: 2px 0; font-size: 32px; }
.cx-sub, .cx-lead { margin: 0; color: var(--muted); }
.cx-lead { margin-bottom: 12px; }
.cx-status { display: grid; gap: 6px; width: min(340px, 100%); padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.cx-status small { color: var(--muted); }
.cx-tabs { display: flex; gap: 4px; margin: 6px 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.cx-tabs button { border: 0; background: none; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.cx-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.cx-add { display: flex; gap: 8px; margin-bottom: 12px; }
.cx-add input { flex: 1; min-width: 0; }
.cx-toolbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.cx-toolbar input[type="search"] { flex: 1 1 200px; }
.cx-toggle { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.cx-count { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cx-grid[data-density="compact"] { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.cx-grid[data-density="cards"] { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.cx-group { grid-column: 1 / -1; margin: 10px 0 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cx-tile { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.cx-tile:hover { border-color: var(--accent); }
.cx-tile.pinned { box-shadow: inset 3px 0 0 var(--accent); }
.cx-grid[data-density="compact"] .cx-tile { padding: 7px 10px; border-radius: 12px; }
.cx-grid[data-density="cards"] .cx-tile { flex-direction: column; text-align: center; padding: 18px 12px; }
.cx-avatar { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.cx-grid[data-density="compact"] .cx-avatar { width: 30px; height: 30px; font-size: 13px; }
.cx-grid[data-density="cards"] .cx-avatar { width: 64px; height: 64px; font-size: 22px; }
.cx-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cx-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); background: #8a93a6; }
.cx-dot.cx-online { background: #1f9d55; }
.cx-dot.cx-away { background: #e0a100; }
.cx-dot.cx-busy { background: #d93a3a; }
.cx-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cx-text b, .cx-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-text small { color: var(--muted); }
.cx-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.cx-tag.muted { background: var(--hover); color: var(--muted); }
.cx-label-blue { border-left: 4px solid #2f6fed; } .cx-label-green { border-left: 4px solid #1f9d55; } .cx-label-amber { border-left: 4px solid #e0a100; }
.cx-label-violet { border-left: 4px solid #7c4dff; } .cx-label-rose { border-left: 4px solid #e0457b; } .cx-label-slate { border-left: 4px solid #64748b; }
.cx-empty { color: var(--muted); list-style: none; }
.cx-rule { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cx-rule > div { display: grid; gap: 2px; }
.cx-rule small { color: var(--muted); }
.cx-rule select { width: 220px; max-width: 50%; }
.cx-sub-rule { padding-left: 18px; }
.cx-people { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; margin: 6px 0; border-radius: 12px; background: var(--hover); }
.cx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.cx-cols h2 { font-size: 20px; margin: 0 0 4px; }
.cx-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; }
.cx-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cx-profile-form { display: grid; gap: 8px; margin-bottom: 14px; }
.cx-checks { display: grid; gap: 6px; }
.cx-check { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.cx-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-row-end { justify-content: flex-end; margin-top: 10px; }
.cx-dialog form { display: grid; gap: 10px; }
.cx-fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.cx-viewas { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 14px; }
.cx-viewas:empty { display: none; }
@media (max-width: 640px) { .cx-rule { flex-direction: column; align-items: stretch; } .cx-rule select { width: 100%; max-width: none; } .cx-head h1 { font-size: 26px; } }

/* Waiting for approval */
.waiting { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px 16px; text-align: center; max-width: 520px; margin: 0 auto; }
.waiting h1 { margin: 12px 0 4px; font-size: 30px; }
.waiting p { margin: 0; color: var(--muted); }
.waiting-actions { display: flex; gap: 10px; margin-top: 16px; }
.cx-app input[type="text"], .cx-app input[type="search"], .cx-app select, .cx-dialog input[type="text"], .cx-dialog select {
  min-height: 38px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; box-sizing: border-box; }
.cx-app select, .cx-dialog select { padding-right: 28px; }
.cx-add input { min-height: 44px; }

/* Plan facts: a label per plan, like US broadband facts */
.facts-section { width: min(1180px, 100%); margin: 36px auto 0; padding: 0 16px; box-sizing: border-box; }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 14px; align-items: start; }
.facts-label { border: 3px solid var(--ink); background: var(--surface); padding: 10px 12px 12px; font-size: 13px; color: var(--ink); }
.facts-label h3 { margin: 0; font-size: 24px; font-weight: 800; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.facts-tag { margin: 4px 0 0; font-weight: 600; }
.facts-head { margin: 8px 0 0; padding-top: 4px; border-top: 8px solid var(--ink); font-weight: 800; font-size: 14px; }
.facts-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid var(--ink); }
.facts-row b { text-align: right; }
.facts-foot { margin: 8px 0 0; padding-top: 6px; border-top: 4px solid var(--ink); font-size: 12px; }

/* Launch boost and the Synaptic Multiplex */
.boost-banner { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-weight: 600; text-align: center; }
.mx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.mx-card { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.mx-card small { color: var(--muted); }
.mx-card input[type="range"] { width: 100%; accent-color: var(--accent); }
.mx-count { font-weight: 600; }
.mx-total { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 12px; }
.mx-total #mx-save { color: var(--muted); }

/* Over capacity */
.cap-banner { position: sticky; top: 0; z-index: 10050; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center;
  padding: 10px 16px; background: #fdecec; color: #8a1c1c; font-weight: 600; text-align: center; }
@media (prefers-color-scheme: dark) { .cap-banner { background: #3a1717; color: #ffd6d6; } }

/* Yearly plan review (Schedule PMI) */
.pmi { width: min(760px, 100%); margin: 0 auto; padding: 24px 16px 48px; box-sizing: border-box; display: grid; gap: 14px; }
.pmi h1 { margin: 0; font-size: 30px; }
.pmi-lead { margin: 0; color: var(--muted); }
.pmi-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.pmi-card h2 { margin: 0 0 10px; font-size: 19px; }
.pmi-table { display: grid; gap: 4px; }
.pmi-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 6px 0; border-top: 1px solid var(--line); }
.pmi-row span:nth-child(2) { color: var(--muted); text-decoration: line-through; }
.pmi-row.less b { color: #b42318; }
.pmi-row.more b { color: #1f7a3d; }
.pmi-options { display: flex; flex-wrap: wrap; gap: 8px; }

/* Owner: April review */
.review-preview { margin: 10px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--hover); }
.review-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.review-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.data b.bad { color: #b42318; }
.data b.good { color: #1f7a3d; }
.tag.warn { background: #fff4e5; color: #8a4b00; }

/* Verify your ID (Stripe Identity) */
.idv-form { display: grid; gap: 6px; width: min(360px, 100%); margin-top: 14px; text-align: left; }
.idv-form input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.idv-how { margin-top: 22px; max-width: 460px; text-align: left; color: var(--muted); font-size: 14px; }
.idv-how summary { cursor: pointer; color: var(--ink); }
.idv-how ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.waiting-actions a.button { display: inline-flex; align-items: center; text-decoration: none; }

/* Welcome wizard: terms, phone code, two-step sign-in */
.terms-points { margin: 6px 0 14px; padding-left: 20px; display: grid; gap: 8px; text-align: left; font-size: 14px; color: var(--ink); max-height: 46vh; overflow: auto; }
.phone-send-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.twofa-choices { display: grid; gap: 10px; margin: 8px 0 12px; }
.totp-qr { display: block; margin: 6px auto; background: #fff; border-radius: 12px; padding: 8px; }
.recovery-codes { font-family: ui-monospace, monospace; font-size: 15px; line-height: 1.7; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; text-align: center; user-select: all; }

/* Forgot password: other ways back in */
.forgot-other { display: grid; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.forgot-other .side-note { margin: 0; }
.forgot-2fa summary { cursor: pointer; color: var(--accent, var(--ink)); padding: 6px 0; }
.forgot-2fa[open] { display: grid; gap: 8px; }

/* Wellbeing: gentle notes and the Nucleus panel */
.wb-note { position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: min(380px, calc(100vw - 32px)); display: grid; gap: 8px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 10px 30px rgb(0 0 0 / 12%); }
.wb-note p { margin: 0; }
.wb-note button { justify-self: end; }
.wb-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 120px; margin: 10px 0 16px; }
.wb-day { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; justify-items: center; gap: 4px; }
.wb-bar { width: 70%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--accent, #5b7cfa) 70%, transparent); }
.wb-day small { color: var(--muted); }
.wb-form { display: grid; gap: 12px; max-width: 460px; }
.wb-quiet { display: flex; flex-wrap: wrap; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 12px; }
.wb-quiet legend { padding: 0 4px; }

/* Welcome: optional profile photo */
.photo-pick { display: grid; justify-items: center; gap: 12px; margin: 10px 0 14px; }
.photo-preview { border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.photo-choose { cursor: pointer; display: inline-flex; align-items: center; }
#photo-skip { display: block; margin: 10px auto 0; }

/* Paid beta spots */
.spots-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 18px;
  padding: 10px 16px; max-width: 760px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: center; }
.spots-bar p { margin: 0; font-weight: 600; }

/* Owner dashboard: Cloud credits notes read left to right like the rest of the table. */
#pools .fine { text-align: left; }
#pools td .ghost { margin: 2px 0; }

/* Brainstem (on-device rewrites) buttons in the composer ribbon */
.mc-txt { height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: 500 12px var(--text); cursor: pointer; }
.mc-txt:hover { background: var(--accent-soft); }

/* Corpus Callosum: a board note being edited live */
.cc-live textarea { width: 100%; min-height: 110px; }
.cc-live-note { flex: 1; font-size: 12px; color: var(--muted); }

/* Synaram: the optional Matrix link */
.mx-form { display: grid; gap: 6px; }
.mx-form input { width: 100%; }

/* The reward moment: one calm card, a single soft glow (none with reduced motion) */
.reward-card { position: relative; width: min(720px, 100%); margin: 0 auto 18px; padding: 16px 20px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--accent); animation: reward-glow 1s ease-out 1; }
.reward-card h2 { margin: 6px 0 6px; font-size: 18px; }
.reward-card p { margin: 0 0 10px; }
@keyframes reward-glow { from { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 10px var(--accent-soft); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .reward-card { animation: none; } }

/* Synaptic Exchange */
.ex-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.ex-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.ex-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ex-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.ex-meta { font-size: 12px; color: var(--muted); }
.ex-text { white-space: pre-wrap; font-size: 12.5px; max-height: 140px; overflow: auto; background: var(--accent-soft); padding: 8px 10px; border-radius: 8px; }
.ex-share { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ex-share { grid-template-columns: auto 1fr 1.4fr auto; } }

/* Synaram Spaces single sign-on (org-sso.js) */
.sso-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.sso-form .row-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
#sso-dns code, #sso-callback { word-break: break-all; }
#sso-enforce-row { margin-top: 12px; }

/* Endocrine broadcasts (admin announcements to inboxes) */
.cc-check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); }
.cc-inbox:not([hidden]) { display: grid; gap: 8px; }

/* Sign-In with Ethereum (wallet.js) */
.provider-btn[hidden] { display: none; }
.provider-wallet { width: 100%; margin-top: 8px; font: inherit; cursor: pointer; }

/* Proprioception (proprioception.js) */
.pr-chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pr-col { flex: 1; display: flex; flex-direction: column-reverse; height: 100%; min-width: 0; }
.pr-col .pr-seg { display: block; width: 100%; }
.pr-col .pr-seg:last-child { border-radius: 3px 3px 0 0; }
.pr-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.pr-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 8px 0; font-size: 13px; color: var(--muted); }
.pr-legend li { display: flex; align-items: center; gap: 6px; }
.pr-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.pr-table { margin-top: 8px; }
.pr-stack { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--line); margin: 10px 0; }
.pr-stack .pr-seg { display: block; height: 100%; }
.pr-soma { background: #2F6FDB; } .pr-synap { background: #0D8F7F; } .pr-myelo { background: #6E8B3D; }
.pr-kortex { background: #7C4DDB; } .pr-tract { background: #B26B00; } .pr-retina { background: #C2417A; }
.pr-kinesis { background: #D2553A; } .pr-other { background: #8A8F98; }
.pr-place-drive { background: #2F6FDB; } .pr-place-chat { background: #0D8F7F; } .pr-place-made { background: #7C4DDB; }
.pr-place-mail { background: #B26B00; }

/* Local folders (local-folders.js) */
.lf-cmd { white-space: pre-wrap; word-break: break-all; font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.lf-browser { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }

/* ======================================================================= The bell (bell.js): top chrome, 44 px, not a floating button */
.ax-bell {
  position: fixed; z-index: 9998; top: 12px; right: max(12px, calc(var(--rail-gutter, 0px) - 44px));
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 0; border: 1px solid var(--line); border-radius: 12px;
  display: grid; place-items: center; background: var(--surface); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow-1), var(--edge); transition: background .12s ease, color .12s ease, box-shadow .12s ease, right .12s ease;
}
/* Undocked: keep the page's right gutter so the bell never paints on titles or cards. */
body:has(.ax-bell:not(.ax-bell-chrome)) { --rail-gutter: max(var(--rail-gutter, 0px), 56px); padding-right: max(var(--rail-gutter), 56px); }
.ax-bell-chrome {
  position: relative; top: auto; right: auto; left: auto; z-index: 4; flex: none;
  border: 0; background: transparent; box-shadow: none; touch-action: manipulation;
}
.ax-bell[hidden] { display: none; }
.ax-bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ax-bell:hover { background: var(--hover); color: var(--ink); }
.ax-bell-chrome:hover { background: var(--hover); }
.ax-bell.on { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ax-bell:focus-visible { outline: none; box-shadow: var(--focus); }
.ax-bell-badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: grid; place-items: center; background: #E41E3F; color: #fff; font: 700 12px/1 var(--text);
  box-shadow: 0 0 0 2px var(--surface);
}
.ax-bell-badge[hidden] { display: none; }
.ax-bell.ping { animation: ax-bell-ring .8s ease; }
@keyframes ax-bell-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .ax-bell.ping { animation: none; } .ax-bell { transition: none; } }

.ax-bell-panel {
  position: fixed; z-index: 9999; width: 380px; max-height: min(620px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08); overflow: hidden;
}
.ax-bell-panel[hidden] { display: none; }
.ax-bell-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 6px; }
.ax-bell-head h2 { margin: 0; font: 700 22px/1.2 var(--text); letter-spacing: -0.01em; }
.ax-bell-link { border: 0; background: none; padding: 4px 6px; border-radius: 6px; color: var(--accent); font: 600 13px var(--text); cursor: pointer; }
.ax-bell-link:hover { background: var(--hover); }
.ax-bell-tabs { display: flex; gap: 6px; padding: 6px 16px 8px; }
.ax-bell-tabs button {
  border: 0; border-radius: 999px; padding: 7px 13px; background: none; color: var(--ink); font: 600 14px var(--text); cursor: pointer;
}
.ax-bell-tabs button:hover { background: var(--hover); }
.ax-bell-tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.ax-bell-list { overflow: auto; padding: 0 8px 8px; }
.ax-bell-list h3 { margin: 6px 8px 4px; font: 700 16px var(--text); }
.ax-bell-item {
  width: 100%; display: grid; grid-template-columns: 52px 1fr 14px; align-items: center; gap: 10px; padding: 8px;
  border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer; font: 14px/1.35 var(--text);
}
.ax-bell-item:hover, .ax-bell-item:focus-visible { background: var(--hover); outline: none; }
.ax-bell-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--accent); }
.ax-bell-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ax-bell-ic[data-kind="mail"] { background: #1877F2; }
.ax-bell-ic[data-kind="chat"] { background: var(--accent); }
.ax-bell-ic[data-kind="cal"] { background: #F02849; }
.ax-bell-ic[data-kind="drive"] { background: #F7B928; }
.ax-bell-ic[data-kind="export"] { background: #45BD62; }
.ax-bell-ic[data-kind="support"] { background: #A033FF; }
.ax-bell-ic[data-kind="security"] { background: #3A3B3C; }
.ax-bell-ic[data-kind="billing"] { background: #0A7CFF; }
.ax-bell-text { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.ax-bell-text b { color: var(--ink); font-weight: 650; }
.ax-bell-text time { display: block; margin-top: 2px; color: var(--faint); font-size: 12.5px; }
.ax-bell-item.unread .ax-bell-text { color: var(--ink); }
.ax-bell-item.unread time { color: var(--accent); font-weight: 650; }
.ax-bell-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.ax-bell-empty { margin: 24px 16px 32px; text-align: center; color: var(--faint); font-size: 14px; }
.ax-bell-foot { border-top: 1px solid var(--line); padding: 6px 10px; text-align: center; }
@media (max-width: 600px) {
  .ax-bell, .ax-bell-chrome { width: 44px; height: 44px; }
  .ax-bell-panel { width: auto; max-height: calc(100vh - 80px); }
}
@media print { .ax-bell, .ax-bell-panel { display: none !important; } }

/* ======================================================================= Export your data (privacy.html, like Google Takeout) */
.takeout { display: grid; gap: 14px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.takeout-head { display: flex; flex-direction: column; gap: 3px; }
.takeout-head b { font-size: 15px; font-weight: 600; }
.takeout-head small { color: var(--muted); font-size: 13px; }
.takeout-state { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: 13.5px; }
.takeout-state[hidden] { display: none; }
.takeout-step { display: grid; gap: 8px; }
.takeout-step h3 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 14px var(--text); }
.takeout-step h3 span {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: 12px;
}
.takeout-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); }
.takeout-parts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.takeout-parts li + li { border-top: 1px solid var(--line); }
.takeout-part { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; }
.takeout-part:hover { background: var(--hover); }
.takeout-part input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.takeout-part span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.takeout-part b { font-size: 14px; font-weight: 600; }
.takeout-part small { color: var(--muted); font-size: 12.5px; }
.takeout-part em { font-style: normal; color: var(--faint); font-size: 12px; white-space: nowrap; }
.takeout-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.takeout-choice { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.takeout-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.takeout-choice input { accent-color: var(--accent); margin: 0; }
.takeout > .primary { justify-self: start; }
@media (max-width: 600px) { .takeout-part { grid-template-columns: 20px 1fr; } .takeout-part em { grid-column: 2; } }

/* ======================================================================= Impulse rates in the model menu, usage card (axchat.js) */
.axc-chip.axc-rate { display: inline-flex; align-items: center; gap: 3px; background: var(--hover); color: var(--ink); font-variant-numeric: tabular-nums; }
.axc-chip.axc-rate svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.axc-chip.axc-rate[data-path="lite"] { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.axc-pop {
  position: fixed; z-index: 9997; padding: 18px 20px 14px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
  animation: axc-pop-in .16s ease-out;
}
@keyframes axc-pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .axc-pop { animation: none; } }
.axc-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: var(--muted); font-size: 14.5px; }
.axc-pop-all { border: 0; background: none; color: var(--ink); font: 600 14px var(--text); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.axc-pop-all:hover { background: var(--hover); }
.axc-pop-row + .axc-pop-row { margin-top: 14px; }
.axc-pop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.axc-pop-top b { font-weight: 500; }
.axc-pop-top span { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.axc-pop-top em { font-style: normal; color: var(--ink); margin-left: 10px; font-variant-numeric: tabular-nums; }
.axc-pop-spikes { list-style: none; margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13.5px; }
.axc-pop-spikes li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; }
.axc-pop-spikes svg { width: 13px; height: 13px; fill: var(--accent); stroke: none; }
.axc-pop-spikes li[data-kind="reflex"] svg { fill: #059669; }
.axc-pop-spikes li[data-kind="cortical"] svg { fill: #7c3aed; }
.axc-pop-spikes span { color: var(--muted); font-variant-numeric: tabular-nums; }
.axc-pop-foot { margin: 12px 0 0; color: var(--faint); font-size: 12px; line-height: 1.4; }
.takeout-q { margin: 6px 0 2px; font-size: 13.5px; font-weight: 600; }
.takeout-col { flex-direction: column; align-items: flex-start; }
.takeout-temp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.takeout-temp .phone-row { display: flex; gap: 6px; flex-wrap: wrap; }
.takeout-temp select, .takeout-temp input { max-width: 220px; }
.takeout-code { display: inline-flex; gap: 6px; }
.takeout-temp .side-note { flex-basis: 100%; }
.takeout-state .takeout-progress-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.takeout-state .takeout-progress-top span { color: var(--muted); }
.takeout-state small { color: var(--muted); }

/* ---- bell: progress ring, Downloads tab */
.ax-bell-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity .2s; }
.ax-bell-ring circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .4s ease; }
.ax-bell.loading .ax-bell-ring { opacity: 1; }
.ax-bell.loading > svg:not(.ax-bell-ring) { color: var(--accent); }
.ax-bell-tabcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; }
.ax-bell-tabcount[hidden] { display: none; }
.ax-dl { display: grid; grid-template-columns: 44px 1fr 32px; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; cursor: pointer; }
.ax-dl:hover, .ax-dl:focus-visible { background: var(--hover); outline: none; }
.ax-dl + .ax-dl { border-top: 1px solid var(--line); }
.ax-dl-ic { width: 40px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.ax-dl-ic[data-kind="export"] { background: rgba(69, 189, 98, 0.15); color: #2f9e4f; }
.ax-dl-ic svg, .ax-dl-x svg, .ax-dl-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ax-dl-text { min-width: 0; display: grid; gap: 2px; }
.ax-dl-text b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-dl-text small { color: var(--muted); font-size: 12.5px; }
.ax-dl[data-status="failed"] small, .ax-dl[data-status="interrupted"] small { color: var(--danger); }
.ax-dl-x { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.ax-dl-x:hover { background: var(--line); color: var(--ink); }
.ax-dl-go { display: grid; place-items: center; color: var(--accent); }

/* ---- axon bars: myelin segments joined at the nodes of Ranvier (export, Downloads, Impulse Pool) */
.axon {
  display: flex; align-items: center; gap: 4px; height: 11px; margin: 7px 0 4px;
  background: linear-gradient(color-mix(in srgb, var(--accent) 30%, var(--line)), color-mix(in srgb, var(--accent) 30%, var(--line))) center / 100% 2px no-repeat;
}
.axon i {
  position: relative; flex: 1; height: 100%; border-radius: 999px; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--accent) 38%, var(--line)); background: var(--surface);
}
.axon i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 0) * 100%); background: var(--accent); }
.axon i.part::before { background: repeating-linear-gradient(135deg, var(--accent) 0 3px, color-mix(in srgb, var(--accent) 55%, var(--surface)) 3px 6px); }
.axon.warn i::before { background: #d97706; }
.axon.full i::before { background: var(--danger); }
.axon-ticks { display: flex; justify-content: space-between; height: 5px; margin: 0 2px; }
.axon-ticks b { width: 1px; background: var(--faint); opacity: .6; }

/* ---- slide-in node banners: "Name · Status" pills with a neuron glyph; swipe or tap x */
.ax-toasts { position: fixed; top: 14px; right: 18px; z-index: 10000; display: grid; gap: 10px; justify-items: end; pointer-events: none; }
.ax-toast {
  --tone: var(--accent); --tone-ink: #fff;
  position: relative; pointer-events: auto; display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px 26px; align-items: center; gap: 10px;
  width: min(380px, calc(100vw - 36px)); min-height: 56px; padding: 9px 10px 9px 12px; border-radius: 999px;
  background: var(--tone); color: var(--tone-ink); box-shadow: 0 10px 28px color-mix(in srgb, var(--tone) 35%, transparent), 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: grab; touch-action: none;
  transform: translateX(calc(100% + 40px)); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.2, .3, 1), opacity .3s ease;
}
.ax-toast[data-tone="relay"] { --tone: #1a73e8; }
.ax-toast[data-tone="dendrite"] { --tone: #0b57d0; }
.ax-toast[data-tone="fascichat"] { --tone: #0f8a7e; }
.ax-toast[data-tone="circadian"] { --tone: #3f3d9e; }
.ax-toast[data-tone="kortex"] { --tone: #6d3fd1; }
.ax-toast[data-tone="tractix"] { --tone: #1e8e3e; }
.ax-toast[data-tone="panic"] { --tone: #a50e0e; }
.ax-toast[data-tone="impulse"] { --tone: #c26401; }
.ax-toast[data-tone="soma"] { --tone: color-mix(in srgb, var(--accent) 10%, var(--surface)); --tone-ink: var(--ink); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ax-toast.in { transform: none; opacity: 1; }
.ax-toast.dragging { transition: none; cursor: grabbing; }
.ax-toast.out-right { transform: translateX(calc(100% + 60px)); opacity: 0; transition: transform .35s ease-in, opacity .3s; }
.ax-toast.out-left { transform: translateX(-120%); opacity: 0; transition: transform .35s ease-in, opacity .3s; }
.ax-toast.out-up { transform: translateY(-140%); opacity: 0; transition: transform .35s ease-in, opacity .3s; }
.ax-toast-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--tone-ink) 18%, transparent); }
.ax-toast-ic svg, .ax-toast-glyph svg, .ax-toast-x svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ax-toast-ic svg { width: 19px; height: 19px; stroke-width: 2; }
.ax-toast-text { min-width: 0; display: grid; gap: 1px; line-height: 1.3; }
.ax-toast-text b { font: 600 15.5px var(--text); letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-toast-text span { font-size: 12.5px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-toast-text .axon { margin: 5px 0 1px; height: 8px; background-image: linear-gradient(color-mix(in srgb, var(--tone-ink) 45%, transparent), color-mix(in srgb, var(--tone-ink) 45%, transparent)); }
.ax-toast-text .axon i { border-color: color-mix(in srgb, var(--tone-ink) 60%, transparent); background: transparent; }
.ax-toast-text .axon i::before { background: var(--tone-ink); }
.ax-toast-glyph { width: 30px; height: 30px; display: grid; place-items: center; opacity: .9; }
.ax-toast-glyph svg { width: 28px; height: 28px; stroke-width: 1.4; }
.ax-toast-x { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--tone-ink) 16%, transparent); color: inherit; cursor: pointer; }
.ax-toast-x svg { width: 13px; height: 13px; stroke-width: 2.4; }
.ax-toast-x:hover { background: color-mix(in srgb, var(--tone-ink) 28%, transparent); }
.ax-toast.quiet { min-height: 46px; padding-block: 6px; }
@media (max-width: 600px) { .ax-toasts { left: 8px; right: 8px; justify-items: stretch; } .ax-toast { width: auto; } }
@media (prefers-reduced-motion: reduce) {
  .ax-toast, .ax-toast.out-right, .ax-toast.out-left, .ax-toast.out-up { transition: opacity .2s; transform: none; }
}
@media print { .ax-toasts { display: none !important; } }
.axc-meter-btn .axon { flex: 0 0 120px; height: 8px; margin: 0; }
.axc-pop .axon { height: 12px; margin-top: 9px; }

/* ---- motion: bars charge node by node, running bars fire, banner glyphs draw in, the bell glows while downloading */
.axon i::before { transition: width .38s cubic-bezier(.3, .9, .4, 1) var(--d, 0ms); }
.axon.now i::before { transition: none; }
.axon.live i.on { animation: ax-fire 1.6s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) + var(--phase, 0ms)); }
@keyframes ax-fire {
  0%, 55%, 100% { box-shadow: 0 0 0 0 transparent; filter: none; }
  20% { box-shadow: 0 0 9px 1px color-mix(in srgb, var(--accent) 65%, transparent); filter: brightness(1.35); }
}
.axon i { transition: transform .15s ease; }
.axon:hover i.on { transform: scaleY(1.18); }
.ax-toast-glyph path, .ax-toast-glyph rect { stroke-dasharray: 70; stroke-dashoffset: 70; }
.ax-toast.in .ax-toast-glyph path, .ax-toast.in .ax-toast-glyph rect { animation: ax-draw 1s ease forwards .25s; }
.ax-toast-glyph circle { transform-box: fill-box; transform-origin: center; animation: ax-soma 1.8s ease-in-out infinite; }
@keyframes ax-draw { to { stroke-dashoffset: 0; } }
@keyframes ax-soma { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.35); } }
.ax-toast-ic { transition: transform .2s ease; }
.ax-toast:hover .ax-toast-ic { transform: scale(1.08) rotate(-6deg); }
.ax-bell.loading::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); animation: ax-halo 1.8s ease-out infinite;
}
@keyframes ax-halo { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .axon i::before { transition: none; }
  .axon.live i.on, .ax-toast-glyph circle, .ax-bell.loading::after { animation: none; }
  .ax-toast-glyph path, .ax-toast-glyph rect { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

/* ---- Sound Lab in the bell */
.ax-bell-head-actions { display: inline-flex; align-items: center; gap: 4px; }
.ax-bell-sound { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--hover); color: var(--ink); cursor: pointer; }
.ax-bell-sound.on { background: var(--accent-soft); color: var(--accent); }
.ax-bell-sound svg, .ax-snd-play svg, .ax-snd-vol svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ax-bell-foot[hidden] { display: none; }
.ax-snd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px 8px; }
.ax-snd-switch { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink); font: 600 13.5px var(--text); cursor: pointer; padding: 4px; }
.ax-snd-switch i { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--line); transition: background .2s; }
.ax-snd-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.ax-snd-switch.on i { background: var(--accent); }
.ax-snd-switch.on i::after { transform: translateX(16px); }
.ax-snd-vol { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.ax-snd-vol input { width: 110px; accent-color: var(--accent); }
.ax-snd-scope { display: block; width: calc(100% - 16px); height: 60px; margin: 0 8px 8px; border-radius: 12px;
  background: linear-gradient(color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px) 0 0 / 100% 15px, color-mix(in srgb, var(--accent) 5%, var(--surface)); border: 1px solid var(--line); }
.ax-snd-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px; }
.ax-snd { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: 13px/1.3 var(--text); transition: border-color .15s, transform .15s; }
.ax-snd:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
.ax-snd b { display: block; font-weight: 600; }
.ax-snd small { color: var(--muted); font-size: 11.5px; }
.ax-snd-play { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.ax-snd-play svg { width: 13px; height: 13px; fill: currentColor; }
.ax-snd.firing .ax-snd-play { animation: ax-snd-fire .7s ease-out; }
@keyframes ax-snd-fire { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.ax-snd-note { margin: 10px 16px 6px; color: var(--faint); font-size: 12px; }
@media (max-width: 600px) { .ax-snd-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ax-snd.firing .ax-snd-play { animation: none; } }

/* ======================================================================= Synaram axon transmission (transmission.js) */
.tx-layer { position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0; transition: opacity .14s ease; overflow: visible; }
.tx-layer.on { opacity: 1; }
.tx-layer.fade { opacity: 0; transition: opacity .4s ease; }
.tx-layer path { fill: none; stroke-linecap: round; }
.tx-fibre { stroke: color-mix(in srgb, var(--accent) 35%, transparent); stroke-width: 2; }
.tx-myelin { stroke: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke-width: 9; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .08)); }
.tx-lit { stroke: var(--accent); stroke-width: 4; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent)); transition: opacity .5s; }
.tx-layer.landed .tx-lit { opacity: .35; }                  /* repolarisation behind the impulse */
.tx-node { fill: var(--surface); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.5; transition: fill .12s, r .12s; }
.tx-node.fire { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.tx-terminal circle { fill: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.tx-layer.landed .tx-terminal circle { fill: var(--accent); }
.tx-halo { fill: color-mix(in srgb, var(--accent) 28%, transparent); animation: tx-halo .5s ease-in-out infinite alternate; }
.tx-core { fill: #fff; stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 8px var(--accent)); }
.tx-in .tx-core { stroke: #00a884; filter: drop-shadow(0 0 8px #00a884); }
.tx-in .tx-lit, .tx-in .tx-node.fire { stroke: #00a884; fill: #00a884; }
.tx-in .tx-lit { fill: none; }
.tx-layer.landed .tx-packet { opacity: 0; transition: opacity .2s; }
@keyframes tx-halo { from { transform: scale(.8); } to { transform: scale(1.15); } }
.tx-ring { fill: none; stroke: var(--accent); stroke-width: 2.5; animation: tx-ring .55s ease-out forwards; }
.tx-ring-1 { animation-delay: .12s; opacity: 0; }
.tx-in .tx-ring { stroke: #00a884; }
@keyframes tx-ring { 0% { r: 4; opacity: .9; } 100% { r: 34; opacity: 0; } }
.tx-spark {
  position: fixed; z-index: 9991; pointer-events: none; transform: translate(-90%, -120%); max-width: 240px; padding: 7px 12px;
  border-radius: 16px 16px 4px 16px; background: var(--accent); color: var(--accent-ink); font: 500 13.5px var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: tx-ignite .42s cubic-bezier(.5, 0, .9, .4) forwards;
}
@keyframes tx-ignite {
  0% { transform: translate(-90%, -120%) scale(1); opacity: 1; filter: brightness(1); }
  35% { filter: brightness(1.6); }
  100% { transform: translate(-50%, -50%) scale(.06); opacity: 0; border-radius: 50%; }
}
.bubbles .tx-hold { visibility: hidden; }
.bubbles .tx-landed { animation: tx-land .5s cubic-bezier(.2, 1.5, .4, 1); position: relative; }
.bubbles .tx-landed::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation: tx-synapse .7s ease-out;
}
@keyframes tx-land { 0% { transform: scale(.72); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: none; } }
@keyframes tx-synapse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .bubbles .tx-landed, .bubbles .tx-landed::after { animation: none; } }
.ax-snd-hum { margin-top: 6px; }

/* ------------------------------------------------------------------ Axork lingo: universal icons (static/lingo.js) */
.app-nav { max-width: min(940px, 100%); }
.app-nav a.lingo { display: inline-flex; align-items: center; gap: 6px; }
.app-nav .lingo-ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.app-nav a[aria-current="page"] .lingo-ico { color: var(--accent); opacity: 1; }
.side-apps .lingo-tag { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.side-apps .lingo-tag + b { margin-left: 6px; }
.page-title.lingo-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-title:not(.left).lingo-title { justify-content: center; }
.page-title .lingo-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-title .lingo-chip { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font: 600 12px/1.4 var(--text); letter-spacing: 0; }
@media (max-width: 700px) { .app-nav .lingo-ico { width: 14px; height: 14px; } }
.lingo-inline { display: inline-flex; align-items: center; gap: 6px; }
.lingo-inline .lingo-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* ------------------------------------------------------------------ Synaptic Pins (static/synpin.js) */
:root { --sp-node: #14B8C8; --sp-sheath: #8C95F6; }
.syn-strip { margin: 0 0 10px; padding: 8px; border-radius: 14px; background: color-mix(in srgb, var(--sp-sheath) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--sp-sheath) 22%, var(--line)); }
.syn-strip[hidden] { display: none; }
.syn-head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 6px 6px; }
.syn-head span { font: 600 11px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.syn-head small { font-size: 11px; color: var(--muted); }
.syn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.syn-list li { position: relative; display: flex; align-items: center; }
.syn-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 7px 30px 7px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.syn-row:hover { background: var(--hover); }
.syn-row .lingo-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.syn-text { min-width: 0; display: grid; }
.syn-text b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-text small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-release { position: absolute; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; opacity: 0; font-size: 12px; }
.syn-list li:hover .syn-release, .syn-release:focus-visible { opacity: 1; }
.syn-release:hover { background: var(--hover); color: var(--ink); }
/* status dots: solid, never red, never counting */
.syn-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--sp-sheath); }
.syn-dot.syn-rest { background: color-mix(in srgb, var(--sp-sheath) 70%, transparent); }
.syn-dot.syn-here { background: var(--sp-node); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-node) 22%, transparent); }
.syn-dot.syn-warming { background: var(--sp-node); animation: syn-breathe 3.2s ease-in-out infinite; }
.syn-dot.syn-warm { background: var(--sp-node); box-shadow: 0 0 8px color-mix(in srgb, var(--sp-node) 70%, transparent); }
@keyframes syn-breathe { 50% { opacity: .35; } }
/* Chiasmar pins: a membrane that charges toward the start */
.syn-ring { --charge: 0deg; width: 14px; height: 14px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--sp-node) var(--charge), color-mix(in srgb, var(--sp-sheath) 25%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 3.5px, #000 4px); mask: radial-gradient(circle, transparent 3.5px, #000 4px); }
.syn-ring.syn-threshold { box-shadow: 0 0 8px color-mix(in srgb, var(--sp-node) 60%, transparent); }
.syn-ring.syn-firing { --charge: 360deg; background: var(--sp-node); animation: syn-breathe 1.6s ease-in-out infinite; }
.syn-ring.syn-spent { --charge: 0deg; opacity: .4; }
.syn-add { width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 7px 8px; border: 1px dashed color-mix(in srgb, var(--sp-sheath) 45%, var(--line));
  border-radius: 10px; background: none; color: var(--ink); font: 500 13px var(--text); cursor: pointer; text-align: left; }
.syn-add:hover:not(:disabled) { background: var(--hover); border-style: solid; }
.syn-add:disabled { opacity: .5; cursor: default; }
.syn-add svg, .syn-nav-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--sp-node); stroke-width: 1.8; stroke-linecap: round; }
.syn-empty { margin: 6px 6px 2px; font-size: 12px; line-height: 1.45; color: var(--muted); }
/* top bar button + popover on pages without the sidebar */
.syn-nav-btn { position: relative; flex: none; width: 36px; height: 36px; margin-left: 6px; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: 50%; background: var(--surface); cursor: pointer; }
.syn-nav-btn:hover, .syn-nav-btn[aria-expanded="true"] { background: var(--hover); }
.syn-nav-btn svg { width: 18px; height: 18px; }
.syn-nav-dot { position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--sp-sheath); }
.syn-nav-dot.warm { background: var(--sp-node); }
.syn-nav-dot[hidden] { display: none; }
.syn-pop { position: fixed; z-index: 9990; width: 340px; max-height: 70vh; overflow: auto; padding: 10px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 18px 50px -12px rgba(15, 20, 50, .3); }
.syn-pop[hidden] { display: none; }
/* the quiet "Where you were" card */
.syn-reentry { position: fixed; z-index: 9980; left: 50%; bottom: 150px; width: min(520px, calc(100vw - 32px)); padding: 12px 14px 12px;
  border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--sp-node) 35%, var(--line)); box-shadow: 0 16px 44px -16px rgba(15, 20, 50, .35);
  opacity: 0; transform: translate(-50%, 10px); transition: opacity .3s, transform .3s; }
.syn-reentry.in { opacity: 1; transform: translate(-50%, 0); }
.syn-reentry header { display: flex; align-items: center; gap: 8px; }
.syn-reentry header .lingo-ico { width: 16px; height: 16px; fill: none; stroke: var(--sp-node); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.syn-reentry header b { font-size: 13px; }
.syn-reentry header span { min-width: 0; flex: 1; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 8px; }
.syn-x:hover { background: var(--hover); }
.syn-reentry p { margin: 8px 0 0; font: 15px/1.5 var(--display); color: var(--ink); }
.syn-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.syn-files button { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 500 12px var(--text); color: var(--ink); cursor: pointer; }
.syn-files button:hover { border-color: var(--sp-node); }
.task-item.potentiated .task-title::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--sp-node); vertical-align: middle; }
.task-item.syn-glow { box-shadow: inset 0 0 0 1.5px var(--sp-node); border-radius: 10px; }
.ax-pin-note { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .syn-dot.syn-warming, .syn-ring.syn-firing { animation: none; } .syn-reentry { transition: none; } }

/* ------------------------------------------------------------------ Chat dropdown + chat transfer (static/chat-transfer.js) */
.xfer-chat-row { position: relative; }
.side-apps .xfer-chat-row > a, .workspace-page .side-apps .xfer-chat-row > a { padding-right: 42px; }
.xfer-caret { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.xfer-caret:hover, .xfer-caret[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.xfer-caret svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.xfer-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.xfer-dot { position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.xfer-dot[hidden] { display: none; }
.xfer-menu { position: fixed; z-index: 9990; width: 320px; max-height: 72vh; overflow: auto; padding: 6px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 18px 50px -12px rgba(15, 20, 50, .3); }
.xfer-menu[hidden] { display: none; }
.xfer-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px; background: none;
  color: var(--ink); font: 500 13.5px var(--text); text-align: left; cursor: pointer; }
.xfer-menu button:hover { background: var(--hover); }
.xfer-menu button[aria-current="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.xfer-menu svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xfer-menu span { min-width: 0; display: grid; }
.xfer-menu button > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xfer-menu small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xfer-menu .xfer-in svg { stroke: var(--accent); }
.xfer-label { margin: 8px 10px 4px; font: 600 10.5px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.xfer-empty { margin: 4px 10px 6px; font-size: 12.5px; color: var(--muted); list-style: none; }
.xfer-sent { margin: 0; padding: 6px 10px; display: grid; font-size: 13px; }
.xfer-sent b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xfer-dialog { width: min(520px, calc(100vw - 32px)); max-height: 86vh; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(15, 20, 50, .45); }
.xfer-dialog::backdrop { background: rgba(10, 14, 30, .35); backdrop-filter: blur(3px); }
.xfer-dialog h2 { margin: 0; font: 600 21px/1.25 var(--display); }
.xfer-sub { margin: 4px 0 14px; font-size: 13px; color: var(--muted); }
.xfer-search, .xfer-note input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); color: var(--ink); font: 14px var(--text); }
.xfer-people { list-style: none; margin: 10px 0; padding: 0; max-height: 240px; overflow: auto; display: grid; gap: 2px; }
.xfer-people button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.xfer-people button:hover { background: var(--hover); }
.xfer-people button[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.xfer-people span:last-child { display: grid; } .xfer-people small { font-size: 12px; color: var(--muted); }
.xfer-av { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent); font: 600 14px var(--text); }
.xfer-note { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.xfer-fine { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.xfer-status { min-height: 1.2em; margin: 10px 0 0; font-size: 13px; }
.xfer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.xfer-actions button { padding: 9px 16px; border-radius: 999px; font: 600 13.5px var(--text); cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.xfer-actions .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.xfer-actions .primary:disabled { opacity: .45; cursor: default; }
.xfer-actions .danger { color: var(--danger); margin-right: auto; }
.xfer-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 12.5px var(--text); color: var(--accent); }
.xfer-kicker svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xfer-quote { margin: 0 0 6px; padding: 8px 12px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--hover); font: 14px/1.5 var(--display); }
.xfer-preview { max-height: 46vh; overflow: auto; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: grid; gap: 10px; }
.xfer-preview[hidden] { display: none; }
.xfer-msg { font-size: 14px; line-height: 1.5; }
.xfer-dl { margin-top: 2px; font-size: 12px; color: var(--accent); text-decoration: none; justify-self: start; }
.xfer-dl:hover, .xfer-dl:focus-visible { text-decoration: underline; }
.xfer-actions .xfer-dl-btn { display: inline-flex; align-items: center; text-decoration: none; }

/* ---- Save a chat offline and restore it (chat-archive.js) and locked chats (chat-lock.js) ---- */
.arc-dialog { width: min(540px, calc(100vw - 32px)); }
.arc-text { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.arc-check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-size: 14px; cursor: pointer; }
.arc-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.arc-check span { display: grid; gap: 2px; }
.arc-check small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.arc-field { display: grid; gap: 4px; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.arc-field[hidden] { display: none; }
.arc-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); color: var(--ink); font: 14px var(--text); }
.arc-empty { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.arc-empty button { margin-left: 4px; }

/* ---- Import a chat from a share link (chat-link-import.js, chat_link_import.py) ---- */
.lki-dialog { width: min(540px, calc(100vw - 32px)); }
.lki-form { display: grid; gap: 0; margin-top: 12px; }
.lki-field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.lki-field input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg);
  color: var(--ink); font: 14px var(--text); }
.lki-card { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px;
  background: var(--bg); display: grid; gap: 6px; }
.lki-card.lki-locked, .lki-card.lki-unreadable, .lki-card.lki-not_share_link, .lki-card.lki-error, .lki-card.lki-rate,
.lki-card.lki-unreachable, .lki-card.lki-too_big, .lki-card.lki-moderation, .lki-card.lki-safety { border-left-color: var(--danger); }
.lki-card.lki-needs_better_model { border-left-color: var(--accent); }
.lki-card.lki-ok { border-left-color: var(--ok); }
.lki-kicker { margin: 0; font: 600 13px var(--text); color: var(--ink); }
.lki-text, .lki-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.lki-note { color: var(--muted); }
.lki-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lki-actions button, .lki-actions a { min-height: 36px; padding: 8px 14px; border-radius: 999px; font: 600 13px var(--text); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
.lki-actions .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.lki-fly .lki-ico { width: 20px; height: 20px; flex: none; border: 1.8px solid currentColor; border-radius: 6px; position: relative; }
.lki-fly .lki-ico::after { content: ""; position: absolute; inset: 5px 4px auto 4px; height: 6px; border: 1.8px solid currentColor; border-top: 0; border-radius: 0 0 4px 4px; }
.model-label.imported-label { color: var(--muted); font-style: italic; }
.chat-list.arc-drop { outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: var(--r); background: var(--accent-tint); }
.arc-card { list-style: none; margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-1), var(--edge); font-size: 14px; line-height: 1.5; }
.arc-head { margin: 0; font-size: 13px; color: var(--muted); }
.arc-kicker { font-weight: 600; color: var(--ink); }
.arc-note { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.arc-files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.arc-file { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.arc-file-head { margin: 0; }
.arc-file-head i { font-style: normal; font-weight: 600; }
.arc-file-head small { color: var(--muted); }
.arc-file-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.arc-file-status { margin: 6px 0 0; min-height: 1.2em; font-size: 13px; color: var(--muted); }
.arc-cands { display: grid; gap: 6px; margin-top: 8px; }
.arc-cands[hidden] { display: none; }
.arc-cand { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.arc-cand.suggested { border-color: var(--accent); background: var(--accent-tint); }
.arc-cand > span:first-child { display: grid; gap: 1px; min-width: 0; }
.arc-cand b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-cand small { font-size: 12.5px; color: var(--muted); }
.arc-cand .arc-why { color: var(--ink); }
.arc-cand-actions { display: flex; gap: 6px; flex: none; }
.arc-help { justify-self: start; }
.clk-methods { display: grid; gap: 4px; }
.clk-pass[hidden] { display: none; }
.clk-warning { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--danger); color: var(--danger); font-size: 13.5px; line-height: 1.45; }
.clk-understood { margin-top: 10px; }
.clk-name-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.clk-screen { list-style: none; display: grid; place-items: center; padding: 24px 0; }
.clk-box { width: min(440px, 100%); padding: 22px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-2), var(--edge); }
.clk-box h2 { margin: 2px 0 0; font: 600 21px/1.25 var(--display); }
.clk-kicker { margin: 0; font: 600 11px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.clk-fine { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.clk-bar { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--accent-tint); font-size: 13px; }
.chat-item.clk-locked > a::after { content: "🔒"; margin-left: 6px; font-size: 11px; opacity: .8; }
@media (max-width: 640px) {
  .arc-cand { flex-direction: column; align-items: stretch; }
  .arc-cand-actions { justify-content: flex-end; }
  .arc-file-actions button, .arc-cand-actions button { min-height: 44px; }
}

.xfer-msg > span { display: block; margin-bottom: 2px; font: 600 11.5px var(--text); color: var(--muted); }
.xfer-msg.user > div { padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.xfer-msg div p { margin: 0 0 6px; }

/* ------------------------------------------------------------------ Homeostat (/settings, static/homeostat.js) */
.hs-main { max-width: 920px; }
.hs-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hs-sub { margin: 2px 0 0; }
.hs-level { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--hover); border: 1px solid var(--line); }
.hs-level button { padding: 7px 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 13px var(--text); cursor: pointer; }
.hs-level button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
body[data-level="advanced"] .hs-level button[data-level="advanced"][aria-checked="true"] { background: var(--ink); color: var(--surface); }
.hs-search { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hs-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.hs-search input { flex: 1; border: 0; outline: 0; background: none; color: var(--ink); font: 15px var(--text); }
.hs-map { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.hs-map a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--hover); color: var(--ink); text-decoration: none; font: 500 13px var(--text); }
.hs-map a b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 11px; }
.hs-layer { margin: 0 0 26px; }
.hs-layer-head { display: flex; gap: 14px; align-items: flex-start; margin: 10px 0 12px; }
.hs-layer-head h2 { margin: 0; font: 600 21px/1.25 var(--display); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hs-layer-head .fine { margin: 4px 0 0; }
.hs-layer-num { margin: 0 0 2px; font: 600 11px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hs-layer-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.hs-layer-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#layer-repair .hs-layer-ico { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
#layer-repair .hs-layer-ico svg { stroke: var(--danger); }
.hs-layer-head .lingo-chip { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font: 600 12px/1.4 var(--text); }
.hs-hidden, body:not([data-level="advanced"]) :is(section, details)[data-level="advanced"] { display: none !important; }
section.panel[data-level="advanced"]::before { content: "Advanced"; float: right; margin: 2px 0 0 8px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--surface); font: 600 10.5px var(--text); letter-spacing: .04em; }
.hs-gate-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 10px; }
.hs-gate { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; min-width: 170px; }
.hs-gate i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.hs-gate.on i { background: #1f9d55; box-shadow: 0 0 0 3px color-mix(in srgb, #1f9d55 22%, transparent); }
.hs-gate span { display: grid; } .hs-gate small { color: var(--muted); font-size: 12.5px; }
.hs-truth { display: grid; gap: 8px; margin: 10px 0; }
.hs-truth-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border-left-width: 4px; }
.hs-truth-row.good { border-left-color: #1f9d55; } .hs-truth-row.mid { border-left-color: #c98a0b; }
.hs-truth-row b { font-size: 14px; } .hs-truth-row span { font-size: 14px; color: var(--muted); line-height: 1.5; }
@media (max-width: 640px) { .hs-truth-row { grid-template-columns: 1fr; gap: 4px; } }
.hs-flow summary { cursor: pointer; font-weight: 600; margin: 8px 0; }
.hs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hs-table th, .hs-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hs-table th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hs-conn { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.hs-conn li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.hs-conn li > span:first-child { flex: 1; display: grid; min-width: 0; } .hs-conn small { color: var(--muted); font-size: 12.5px; }
.hs-pill { padding: 2px 10px; border-radius: 999px; font: 600 12px var(--text); } .hs-pill.ok { background: color-mix(in srgb, #1f9d55 15%, transparent); color: #1f7a45; }
.hs-pill.off { background: var(--hover); color: var(--muted); }
.hs-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: var(--hover); }
.hs-seg button { padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 600 13px var(--text); cursor: pointer; }
.hs-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.hs-erase-note { margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 8%, var(--surface)); font-size: 13.5px; }
.hs-dialog { width: min(560px, calc(100vw - 32px)); max-height: 88vh; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); }
.hs-dialog::backdrop { background: rgba(10, 14, 30, .4); backdrop-filter: blur(3px); }
.hs-dialog h2 { margin: 0 0 8px; font: 600 21px/1.25 var(--display); }
.hs-dialog .field { display: grid; gap: 6px; margin: 12px 0; }
.hs-dialog input:not([type="checkbox"]) { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: 15px var(--text); }
.hs-wide { width: 100%; margin: 6px 0; }
.hs-status { min-height: 1.2em; font-size: 13.5px; color: var(--danger); }
.hs-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hs-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; counter-reset: step; }
.hs-steps li { flex: 1; padding-top: 8px; border-top: 3px solid var(--line); font: 600 11.5px var(--text); color: var(--muted); counter-increment: step; }
.hs-steps li::before { content: counter(step) ". "; }
.hs-steps li.on { border-top-color: var(--danger); color: var(--ink); }
.hs-terms { max-height: 40vh; overflow: auto; padding: 4px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 13.5px; line-height: 1.55; }
.hs-agree { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 13.5px; }
.hs-agree input { margin-top: 3px; }
.hs-test { color: var(--muted); }

/* ===================================================================== Daxolex Mail (daxolex.com) */
/* The front page at daxolex.com (static/daxolex.html). It uses Axork's own colours, fonts and light/dark themes, plus
   the two colours of both marks: periwinkle fibre and cyan nodes. */
.dx-home { --dx-fibre: #8794F6; --dx-fibre-deep: #6E7CEF; --dx-node: #7FDDF3;
  --dx-card: color-mix(in srgb, var(--ink) 3%, var(--bg)); --dx-edge: color-mix(in srgb, var(--ink) 14%, transparent);
  margin: 0; height: auto; min-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); }
html:has(body.dx-home) { height: auto; }
.dx-word { font-family: var(--wordmark); font-weight: 700; letter-spacing: 0.04em; }
.dx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(16px, 4vw, 44px); }
.dx-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 19px; }
.dx-lockup img { width: 36px; height: 36px; }
.dx-top-links { display: flex; align-items: center; gap: 10px; }
.dx-top-links a { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 99px; text-decoration: none; font-weight: 600; font-size: 14px; }
.dx-part { color: var(--muted); border: 1px solid var(--dx-edge); }
.dx-part img { width: 20px; height: 20px; }
.dx-part:hover { color: var(--ink); border-color: var(--dx-fibre); }
.dx-signin { background: var(--dx-card); color: var(--ink); border: 1px solid var(--dx-edge); }
.dx-signin:hover { border-color: var(--dx-fibre); }
.dx-main { flex: 1; width: min(1120px, 100%); margin: 0 auto; padding: 0 clamp(16px, 4vw, 44px) 48px; box-sizing: border-box; }
.dx-hero { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(12px, 3vw, 32px) 0; }
.dx-hero-mark { width: 100%; height: auto; filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--dx-fibre) 22%, transparent)); }
.dx-hero h1 { margin: 0; font-size: clamp(40px, 6vw, 66px); line-height: 1.02; }
.dx-hero h1 .dx-mail { font-family: var(--display); font-weight: 500; color: var(--dx-fibre-deep); }
.dx-lead { margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 32em; }
.dx-note { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--dx-node) 18%, var(--surface)); }
.dx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.dx-btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 99px; text-decoration: none; font-weight: 700; }
.dx-home .primary.dx-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dx-home .primary.dx-btn:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dx-node) 35%, transparent); }
.dx-ghost { border: 1px solid var(--dx-edge); color: var(--ink); background: var(--dx-card); }
.dx-ghost:hover { border-color: var(--dx-fibre); }
.dx-small { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
/* An axon as a divider: myelin segments with a cyan node of Ranvier in every gap. */
.dx-axon { height: 12px; margin: 34px 0 30px; border-radius: 99px;
  background: repeating-linear-gradient(90deg, var(--dx-fibre) 0 88px, var(--bg) 88px 91px, var(--dx-node) 91px 101px, var(--bg) 101px 104px); opacity: 0.85; }
.dx-name h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); }
.dx-sub { margin: 8px 0 18px; color: var(--muted); }
.dx-roots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dx-roots article, .dx-points article { background: var(--dx-card); border: 1px solid var(--dx-edge); border-radius: 18px; padding: 18px 20px; }
.dx-root { margin: 0; font-family: var(--display); font-size: 28px; color: var(--muted); }
.dx-root b { color: var(--dx-fibre-deep); }
.dx-gloss { margin: 6px 0 10px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.dx-does { margin: 0; padding-top: 10px; border-top: 1px dashed var(--dx-edge); line-height: 1.5; }
.dx-mark-note { margin: 16px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 60em; }
.dx-points { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 30px; }
.dx-points h3 { margin: 0 0 6px; font-size: 16px; }
.dx-points h3::before { content: ""; display: inline-block; width: 14px; height: 6px; margin-right: 8px; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(90deg, var(--dx-fibre) 0 55%, var(--dx-node) 55% 100%); }
.dx-points p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 14.5px; }
.dx-foot { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; padding: 20px 16px 28px; color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--dx-edge); }
.dx-foot a { color: var(--muted); }
@media (max-width: 760px) {
  .dx-hero { grid-template-columns: 1fr; text-align: center; }
  .dx-hero-mark { width: min(250px, 66vw); margin: 0 auto; }
  .dx-lead { margin-left: auto; margin-right: auto; }
  .dx-actions { justify-content: center; }
  .dx-roots { grid-template-columns: 1fr; }
  .dx-top-links .dx-part { font-size: 0; gap: 0; padding: 7px 9px; }
}

/* The mail page when it's served on daxolex.com (static/daxolex.js). */
html.daxolex .page-top .mark { gap: 8px; }
html.daxolex .dx-logo { width: 30px; height: 30px; }
html.daxolex .page-top .mark .dx-name { font-family: var(--wordmark) !important; font-weight: 700; letter-spacing: 0.04em; }

/* ===================================================================== Accounts (static/account.js) */
.acc-avatar { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: #fff;
  font-weight: 700; font-size: 13.5px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.acc-avatar.big { width: 42px; height: 42px; font-size: 18px; }
.acc-avatar.huge { width: 84px; height: 84px; font-size: 34px; box-shadow: 0 0 0 3px var(--surface), 0 8px 24px rgba(0, 0, 0, 0.18); }
.acc-face { border: 0; background: none; padding: 2px; border-radius: 50%; cursor: pointer; }
.acc-face:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-menu { position: fixed; z-index: 1200; width: min(320px, calc(100vw - 24px)); padding: 10px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18); }
.acc-head { display: flex; align-items: center; gap: 12px; padding: 6px 6px 10px; }
.acc-head b { display: block; font-size: 15.5px; }
.acc-head small { color: var(--muted); }
.acc-note { margin: 0 0 8px; padding: 9px 11px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  background: color-mix(in srgb, #E0A43A 14%, var(--surface)); border: 1px solid color-mix(in srgb, #E0A43A 40%, transparent); }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.acc-row:hover { background: var(--hover); }
.acc-row small { display: block; color: var(--muted); font-size: 12px; }
.acc-sub { margin: 0 0 4px 12px; padding-left: 8px; border-left: 2px solid var(--line); }
.acc-chev { color: var(--muted); font-size: 18px; transition: transform 0.15s ease; }
[aria-expanded="true"] > .acc-chev { transform: rotate(90deg); }
.acc-toggle { cursor: default; }
.acc-toggle:hover { background: none; }
.acc-switch { position: relative; flex: none; width: 42px; height: 24px; border-radius: 99px; border: 0; background: var(--line); cursor: pointer; padding: 0; }
.acc-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left 0.15s ease; }
.acc-switch[aria-checked="true"] { background: var(--accent); }
.acc-switch[aria-checked="true"] i { left: 21px; }
.acc-link { border: 0; background: none; color: var(--accent); font: inherit; font-size: 12.5px; padding: 0 10px 6px; cursor: pointer; }
.acc-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.acc-out { color: #C2372D; }
.acc-overlay { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
.acc-panel { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px; border-radius: 22px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22); box-sizing: border-box; text-align: center; }
.acc-panel.acc-small { width: min(460px, 100%); text-align: left; }
.acc-panel h2 { margin: 0 0 10px; }
.acc-panel p { line-height: 1.5; }
.acc-fine { color: var(--muted); font-size: 13.5px; }
.acc-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 18px 0 12px; }
.acc-person { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 132px; padding: 14px 8px; border-radius: 18px;
  border: 2px solid transparent; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.acc-person:hover { background: var(--hover); }
.acc-person[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.acc-person b { margin-top: 6px; }
.acc-person small, .acc-person em { color: var(--muted); font-size: 12px; font-style: normal; }
.acc-forget { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  color: var(--muted); font-size: 16px; line-height: 1; opacity: 0; }
.acc-person:hover .acc-forget, .acc-person:focus-within .acc-forget { opacity: 1; }
.acc-forget:hover { background: var(--line); color: var(--ink); }
.acc-default { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: 14px; cursor: pointer; }
.acc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.acc-chooser .acc-actions { justify-content: center; }
.acc-thaw { position: fixed; left: 16px; bottom: 16px; z-index: 900; width: min(330px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16); box-sizing: border-box; }
.acc-thaw b { display: block; }
.acc-thaw > small { color: var(--muted); }
.acc-thaw ul { margin: 8px 0 0; padding-left: 18px; }
.acc-thaw li { margin: 3px 0; }
.acc-thaw li small { color: var(--muted); }
.acc-thaw .acc-actions { margin-top: 8px; }
.acc-pref { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.acc-pref legend { font-weight: 600; margin-bottom: 4px; }

/* The Legal hub (static/legal.html). */
.legal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.legal-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); text-decoration: none; line-height: 1.45; }
.legal-card span { color: var(--muted); font-size: 14px; }
.legal-card:hover { border-color: var(--accent); }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14.5px; line-height: 1.45; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.legal-table th { color: var(--muted); font-weight: 600; }
@media (max-width: 600px) { .legal-table { font-size: 13.5px; } .legal-table th:last-child, .legal-table td:last-child { width: 30%; } }

/* ===================================================================== Daxolex Mail on a phone */
/* One column: folders as a scrolling strip, then the list; an email opens full screen (body.reading). */
@media (max-width: 680px) {
  .mail-page .page-top { flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; }
  .mail-page .page-top .app-nav { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
  .mail-page .page-top .mark { order: 1; }
  .mail-page .page-top .syn-nav-btn { order: 2; margin-left: auto; }
  .mail-page .page-top .page-tools { order: 2; margin-left: 0; gap: 6px; }
  .mail-page .page-top .mcp-topbar { display: none; }        /* Ask (Relay) stays in the mail toolbar */
  .mail-page .page-top .mark { min-width: 0; }
  .mail-app, .mail-app.ai-out, .mail-app.layout-classic, .mail-app[data-layout] {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .mail-app .mail-side { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px 10px;
    overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .mail-app .mail-side > :not(.primary):not(.folders) { display: none; }
  .mail-app .mail-side .primary { flex: none; width: auto; padding: 8px 14px; }
  .mail-app .folders { display: flex; flex-direction: row; gap: 4px; flex: none; width: auto; margin: 0; }
  .mail-app .folder { flex: none; white-space: nowrap; width: auto; padding: 7px 10px; }
  .mail-app .mail-stream { min-width: 0; }
  .mail-app .stream-bar { flex-wrap: wrap; gap: 6px; }
  .mail-app .mail-search { flex: 1 0 100%; }
  .mail-app .mail-layout { display: none; }
  .mail-app .density .dens-label { display: none; }
  .mail-app .mail-quick-filters, .mail-app .mail-ribbon { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mail-app .mail-quick-filters > *, .mail-app .mail-ribbon > * { flex: none; white-space: nowrap; }
  .mail-app .mail-split, .mail-app.layout-classic .mail-split, .mail-app[data-layout] .mail-split { flex-direction: column; }
  body.mail-page .mail-app[data-layout] .mail-stream .mail-split .msg-list {
    flex: 1 1 auto; width: 100%; max-width: none; max-height: none; border-right: 0; }
  body.mail-page .mail-app[data-layout] .mail-stream .mail-split .mail-read { display: none; }
  body.mail-page.reading .mail-app[data-layout] .mail-stream .mail-split .mail-read { display: block; position: fixed; inset: 0; z-index: 70; overflow: auto;
    background: var(--surface); padding: 14px 16px 30px; border: 0; }
  body.mail-page.reading .mail-app .back-btn { display: inline-grid; }
}

/* ===================================================================== Statements (static/statement.js) */
.st-page { --st-fibre: #6E7CEF; --st-node: #2FB9D6; }
.st-main { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; width: min(1180px, 100%); margin: 0 auto; padding: 18px 16px 48px; box-sizing: border-box; }
.st-side h1 { margin: 4px 0 6px; font: 700 26px/1.2 var(--display); }
.st-cycle { color: var(--muted); font-size: 14px; line-height: 1.45; }
.st-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 4px; }
.st-list a { display: block; padding: 9px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; }
.st-list a small { display: block; color: var(--muted); font-weight: 400; font-size: 12.5px; }
.st-list a:hover { background: var(--hover); }
.st-list a.on { background: color-mix(in srgb, var(--st-fibre) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--st-fibre); }
.st-day { margin-top: 14px; font-size: 14px; }
.st-day summary { cursor: pointer; color: var(--accent); }
.st-day p { color: var(--muted); }
.st-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
/* Your bill builder (bill-builder.js, /statements/build): tokens only */
.bb-open { display: block; margin: 6px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; }
.bb-open small { display: block; color: var(--muted); font-weight: 400; font-size: 12.5px; }
.bb-open:hover, .bb-open.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.bb { display: grid; gap: 12px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.bb[hidden] { display: none; }
.bb h2 { margin: 0; font: 700 20px/1.2 var(--display); }
.bb-lead { margin: 0; color: var(--muted); }
.bb-when { display: flex; flex-wrap: wrap; gap: 12px; }
.bb-when label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bb-when select, .bb-when input { min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; }
.bb fieldset { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.bb legend { padding: 0 6px; font-weight: 700; }
.bb-quick { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; font-size: 13.5px; }
.bb-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.bb-check { font-size: 14px; }
.bb-check small { color: var(--muted); font-size: 12px; }
.bb-fixed { opacity: 0.85; }
.bb-none { margin: 0; color: var(--muted); font-size: 14px; }
.bb-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bb-off { opacity: 0.5; }
.st-hint { color: var(--muted); font-size: 13px; }
.st-sheet { background: #fff; color: #172036; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
  padding: clamp(18px, 4vw, 44px); font-size: 14.5px; line-height: 1.5; --muted: #5A6478; --line: #DCE1EC; }
.st-loading { color: var(--muted); }
.st-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding-bottom: 16px;
  border-bottom: 4px solid transparent; border-image: repeating-linear-gradient(90deg, var(--st-fibre) 0 58px, transparent 58px 61px, var(--st-node) 61px 69px, transparent 69px 72px) 4; }
.st-brand { display: flex; align-items: center; gap: 12px; }
.st-brand b { display: block; font-family: var(--wordmark); font-size: 26px; letter-spacing: 0.04em; }
.st-brand span { color: var(--muted); }
.st-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 20px; margin: 0; }
.st-meta dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.st-meta dd { margin: 0; font-weight: 600; }
.st-who { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 16px 0; }
.st-cyclenote { max-width: 300px; color: var(--muted); font-size: 13.5px; }
.st-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 8px; }
.st-tile { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.st-tile span { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.st-tile b { font: 700 24px/1.1 var(--display); }
.st-tile.st-store b { font-size: 17px; line-height: 1.25; }
.st-tile small { color: var(--muted); font-size: 12.5px; }
.st-due { background: linear-gradient(135deg, color-mix(in srgb, var(--st-fibre) 12%, #fff), color-mix(in srgb, var(--st-node) 12%, #fff)); border-color: transparent; }
.st-bar { display: block; height: 7px; border-radius: 99px; background: #EEF1F7; overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: inherit; background: var(--st-fibre); }
.st-bar.st-cyan i { background: var(--st-node); }
.st-up { color: #B5462F; font-weight: 600; }
.st-down { color: #17734B; font-weight: 600; }
.st-flat { color: var(--muted); }
.st-sec { padding: 18px 0 6px; border-top: 1px solid var(--line); margin-top: 14px; break-inside: avoid; }
.st-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 18px/1.3 var(--display); }
.st-sec h2 span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--st-fibre); color: #fff; font: 700 12.5px/1 var(--text); }
.st-sec h3 { margin: 16px 0 8px; font-size: 14.5px; }
.st-table { width: 100%; border-collapse: collapse; }
.st-table th, .st-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.st-table th { color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.st-table tfoot td { font-weight: 700; border-bottom: 0; }
.st-r { text-align: right !important; font-variant-numeric: tabular-nums; }
.st-none, .st-fine { color: var(--muted); }
.st-fine { font-size: 12.5px; }
.st-lead { margin: 0 0 10px; }
.st-rows { display: grid; gap: 7px; }
.st-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 150px; align-items: center; gap: 12px; }
.st-row b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.st-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-split div { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; gap: 10px; align-items: baseline; }
.st-split b { font: 700 22px/1 var(--display); color: var(--st-fibre); }
.st-split div:last-child b { color: var(--st-node); }
.st-split span { color: var(--muted); font-size: 13.5px; }
.st-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid color-mix(in srgb, var(--st-fibre) 35%, #fff); display: grid; gap: 8px; }
.st-timeline li { position: relative; display: grid; grid-template-columns: 64px 76px minmax(0, 1fr); gap: 8px; }
.st-timeline li::before { content: ""; position: absolute; left: -21px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 3px solid var(--st-fibre); }
.st-timeline li.st-k-security::before { border-color: #D06A4C; }
.st-timeline li.st-k-device::before { border-color: var(--st-node); }
.st-timeline li.st-k-plan::before { border-color: var(--accent); }
.st-timeline li.st-k-storage::before { border-color: #2E8C83; }
.st-timeline li.st-k-impulses::before { border-color: #C28A1E; }
.st-timeline time { color: var(--muted); font-variant-numeric: tabular-nums; }
.st-timeline em { font-style: normal; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.st-verdict { font-size: 18px; margin: 0 0 4px; }
.st-advice { border-radius: 14px; }
.st-advice.st-keep .st-verdict b { color: #17734B; }
.st-advice.st-change .st-verdict b { color: var(--st-fibre); }
.st-notice { background: color-mix(in srgb, var(--st-node) 7%, #fff); border-radius: 14px; padding: 16px 18px 8px; border: 1px solid color-mix(in srgb, var(--st-node) 30%, #fff); }
.st-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  .st-main { grid-template-columns: 1fr; }
  .st-glance { grid-template-columns: 1fr 1fr; }
  .st-row { grid-template-columns: 120px minmax(0, 1fr) 110px; }
  .st-split { grid-template-columns: 1fr; }
  .st-meta { grid-template-columns: 1fr 1fr; }
  .st-timeline li { grid-template-columns: 56px minmax(0, 1fr); }
  .st-timeline em { display: none; }
}
@media print {
  @page { size: A4; margin: 12mm; }
  html:has(body.st-page), body.st-page { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  body.st-page { background: #fff !important; display: block !important; }
  body.st-page > :not(.st-main) { display: none !important; }
  .st-main { display: block; padding: 0; width: auto; }
  .st-side, .st-actions, .bb { display: none !important; }
  .st-sheet { border: 0; box-shadow: none; border-radius: 0; padding: 0; font-size: 13.5px; }
  .st-sec { padding-top: 12px; margin-top: 10px; }
  .st-foot { break-inside: avoid; margin-top: 12px; }
  .st-table th, .st-table td { padding: 6px; }
  .st-glance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .st-row { grid-template-columns: 170px minmax(0, 1fr) 150px; }
  .st-split { grid-template-columns: 1fr 1fr; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===================================================================== Neural Gateway (static/gateway.js) */
.gw-main { width: min(1320px, 100%); margin: 0 auto; padding: 16px 16px 40px; box-sizing: border-box; }
.gw-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.gw-head h1 { margin: 0; font: 700 28px/1.2 var(--display); }
.gw-sub, .gw-muted { color: var(--muted); }
.gw-head-tools { display: flex; align-items: center; gap: 12px; }
.gw-live { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); font-weight: 700; font-size: 13.5px; color: var(--muted); }
.gw-live.ok { color: #1F8A5B; border-color: color-mix(in srgb, #1F8A5B 40%, transparent); }
.gw-live.part { color: #B7791F; }
.gw-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; }
.gw-clouds { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px; align-self: start; }
.gw-label { margin: 4px 6px 8px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.gw-clouds ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gw-clouds li > button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px; border: 0;
  border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gw-clouds li > button:hover { background: var(--hover); }
.gw-clouds li > button.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.gw-clouds b { display: block; font-size: 14px; }
.gw-clouds small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-add { width: 100%; margin-top: 8px; }
.gw-auto p { margin: 0 6px 6px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.gw-auto { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.gw-logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; font: 800 11.5px/1 var(--text); flex: none; }
.gw-logo.big { width: 46px; height: 46px; font-size: 14px; border-radius: 13px; }
.gw-k-aws { background: linear-gradient(135deg, #FF9900, #E07B00); }
.gw-k-google { background: conic-gradient(#4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0); }
.gw-k-azure { background: linear-gradient(135deg, #0089D6, #0062A8); }
.gw-k-ibm { background: linear-gradient(135deg, #0F62FE, #001D6C); }
.gw-k-openai_compat { background: linear-gradient(135deg, #374151, #111827); }
.gw-k-anthropic { background: linear-gradient(135deg, #D97757, #B5583C); }
.gw-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #A0A7B5; flex: none; }
.gw-dot.gw-live { background: #22B573; box-shadow: 0 0 0 3px color-mix(in srgb, #22B573 25%, transparent); padding: 0; border: 0; }
.gw-dot.gw-slow { background: #E3A008; }
.gw-dot.gw-down, .gw-dot.gw-failed { background: #E0483A; box-shadow: 0 0 0 3px color-mix(in srgb, #E0483A 25%, transparent); }
.gw-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; min-width: 0; }
.gw-conn-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gw-conn-head h2 { margin: 0; font: 700 21px/1.2 var(--display); }
.gw-conn-head p { margin: 2px 0 0; color: var(--muted); }
.gw-conn-state { margin-left: auto; display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; }
.gw-conn-state small { grid-column: 2; color: var(--muted); }
.gw-conn-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.gw-danger { color: #C2372D !important; }
.gw-creds { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 0 0 14px; }
.gw-creds div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.gw-creds dt { color: var(--muted); font-size: 12px; }
.gw-creds dd { margin: 2px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
.gw-panel h3 { margin: 18px 0 8px; font-size: 16px; }
.gw-panel h3 small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }
.gw-table-wrap { overflow-x: auto; }
.gw-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gw-table th { text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px; border-bottom: 1px solid var(--line); }
.gw-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.gw-table td small { display: block; color: var(--muted); font-size: 12px; }
.gw-check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.gw-engine, .gw-table select { width: 100%; min-width: 150px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.gw-h { white-space: nowrap; }
.gw-h span { margin-left: 6px; text-transform: capitalize; }
.gw-save-row { display: flex; gap: 12px; align-items: center; margin: 12px 0; }
.gw-how { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border: 1px solid var(--line); }
.gw-how summary { cursor: pointer; font-weight: 600; }
.gw-how ol { margin: 8px 0; padding-left: 20px; line-height: 1.55; font-size: 14px; }
.gw-more { margin-top: 10px; }
.gw-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.gw-kinds button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gw-kinds button:hover { border-color: var(--accent); }
.gw-kinds small { color: var(--muted); font-size: 12.5px; }
.gw-form { display: grid; gap: 8px; max-width: 620px; }
.gw-err { color: #C2372D; }
.gw-term-wrap { margin-top: 16px; border-radius: 16px; overflow: hidden; border: 1px solid #1E2433; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); }
.gw-term-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #1A1F2B; color: #9AA4B8; font-size: 12.5px; }
.gw-term-bar span { display: inline-flex; gap: 6px; }
.gw-term-bar span i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.gw-term-bar span i:nth-child(2) { background: #FEBC2E; }
.gw-term-bar span i:nth-child(3) { background: #28C840; }
.gw-term-clear { margin-left: auto; border: 1px solid #39414F; background: none; color: #C5CCDA; border-radius: 8px; padding: 3px 10px; font: inherit; cursor: pointer; }
.gw-term { margin: 0; min-height: 220px; max-height: 360px; overflow: auto; padding: 14px 16px; background: #0D1117; color: #C9D1D9;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; white-space: pre-wrap; }
.gw-l-cmd { color: #79C0FF; }
.gw-l-ok { color: #56D364; font-weight: 700; }
.gw-l-err { color: #FF7B72; font-weight: 700; }
.gw-l-warn { color: #E3B341; }
.gw-events { margin-top: 18px; }
.gw-events h2 { font: 700 18px/1.3 var(--display); }
.gw-events ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.gw-events li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 6px 8px; border-radius: 8px; }
.gw-events time { color: var(--muted); font-variant-numeric: tabular-nums; }
.gw-ev-down { background: color-mix(in srgb, #E0483A 9%, transparent); }
.gw-ev-up { background: color-mix(in srgb, #22B573 9%, transparent); }
.gw-ev-failover { background: color-mix(in srgb, #E3A008 10%, transparent); }
.gw-none { color: var(--muted); padding: 8px; }
@media (max-width: 860px) {
  .gw-grid { grid-template-columns: 1fr; }
  .gw-conn-state { margin-left: 0; }
}
html:has(body.gw-page), body.gw-page { height: auto; min-height: 100%; overflow-y: auto; }
.gw-cap { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.gw-cap-meter { flex: 1 1 220px; display: grid; gap: 4px; }
.gw-cap-meter span:first-child { color: var(--muted); font-size: 12.5px; }
.gw-cap small { flex-basis: 100%; }
.gw-cap .st-bar i { background: var(--accent); }
.gw-cap .st-bar.gw-over i { background: #E0483A; }
.gw-radar { margin: 0 0 14px; padding: 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); }
.gw-radar-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gw-radar-head small { color: var(--muted); }
.gw-radar-head button { margin-left: auto; }
.gw-radar-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.gw-radar-item span:last-child { display: inline-flex; gap: 6px; }
.gw-radar p { margin: 8px 0 0; }

/* ===================================================================== autonortex.com sign-in (static/autonortex.html) */
.ax-cmd { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; box-sizing: border-box;
  background: radial-gradient(circle at 30% 20%, #1B2440, #0D1117 60%); color: #E6EDF3; }
html:has(body.ax-cmd) { height: auto; }
.ax-cmd-card { width: min(440px, 100%); padding: 30px; border-radius: 20px; background: #111827; border: 1px solid #263046; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.ax-cmd-kicker { margin: 0; color: #7FDDF3; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; }
.ax-cmd h1 { margin: 6px 0 4px; font-family: var(--wordmark); font-size: 34px; letter-spacing: 0.08em; }
.ax-cmd-sub { color: #9AA4B8; font-size: 14px; line-height: 1.5; }
.ax-cmd-sub a { color: #7FDDF3; }
.ax-cmd-form { display: grid; gap: 10px; margin-top: 14px; }
.ax-cmd .field span { color: #9AA4B8; }
.ax-cmd .field input { background: #0D1117; color: #E6EDF3; border: 1px solid #30394B; min-height: 44px; }
.ax-cmd .primary, .ax-cmd button.primary { min-height: 44px; min-width: 44px; }
.ax-cmd-err { color: #FF7B72; }
.ax-cmd-note { color: #E3B341; }
.ax-cmd-term { margin: 18px 0 0; padding: 12px; border-radius: 12px; background: #0D1117; color: #8B949E; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
html[data-site="autonortex"] .page-top .mark-name { font-size: 0; }
html[data-site="autonortex"] .page-top .mark-name::after { content: "Autonortex"; font-size: 15px; letter-spacing: 0.01em; }

/* ===================================================================== neurtor.com status (static/status.html) */
.ns-page { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); }
html:has(body.ns-page) { height: auto; }
.ns-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(16px, 4vw, 44px); }
.ns-brand { display: inline-flex; align-items: center; gap: 10px; }
.ns-brand b { font-family: var(--wordmark); letter-spacing: 0.08em; font-size: 19px; }
.ns-brand small { color: var(--muted); }
.ns-main { width: min(760px, 100%); margin: 0 auto; padding: 8px 16px 48px; box-sizing: border-box; }
.ns-overall { padding: 18px 20px; border-radius: 16px; color: #fff; font-size: 19px; background: #8B95A7; }
.ns-overall.ns-operational { background: linear-gradient(135deg, #1F9D63, #22B573); }
.ns-overall.ns-degraded { background: linear-gradient(135deg, #C98A0B, #E3A008); }
.ns-overall.ns-outage { background: linear-gradient(135deg, #C2372D, #E0483A); }
.ns-main h2 { font: 700 18px/1.3 var(--display); margin: 24px 0 8px; }
.ns-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ns-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ns-list li:last-child { border-bottom: 0; }
.ns-list small { display: block; color: var(--muted); font-size: 12.5px; }
.ns-list li > span:last-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ns-list i { width: 10px; height: 10px; border-radius: 50%; background: #A0A7B5; }
.ns-list .ns-operational i { background: #22B573; }
.ns-list .ns-degraded i { background: #E3A008; }
.ns-list .ns-outage i { background: #E0483A; }
.ns-incidents { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ns-incidents time { color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
.ns-fine { margin-top: 24px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ===================================================================== Synaram (static/synaram.js) */
.syn-switch { display: flex; gap: 4px; padding: 6px 16px; border-bottom: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.syn-switch a { padding: 6px 14px; border-radius: 99px; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.syn-switch a:hover { background: var(--hover); color: var(--ink); }
.syn-switch a[aria-current="page"] { background: color-mix(in srgb, #8794F6 16%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, #8794F6 45%, transparent); }
html.synaram .page-top .mark { gap: 8px; }
html.synaram .syn-logo { width: 30px; height: 30px; }
html.synaram .page-top .mark .syn-name { font-family: var(--wordmark) !important; font-weight: 700; letter-spacing: 0.04em; }

/* ---- Axon marks (glyphs.js, owner 26 Oct 2026): the Axon-Glyph Matrix and the Task Matrix are drawn fibre marks, not
   pictographs. Each is an inline SVG (viewBox 24 x 16) of an axon: myelin with white gaps, nodes of Ranvier, and a signal
   dot where something moves. Colour is currentColor from the wrapper's token. The default style is the end frame; the
   animations start from it, so reduced motion (animations off) still shows the end frame. Tokens only. */
.axm { width: 1.5em; height: 1em; display: inline-block; vertical-align: -0.2em; overflow: visible; flex: none; }
.axm line, .axm path, .axm polyline, .axm circle { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.axm .axm-axon { stroke-width: 0.8; opacity: 0.4; }
.axm .axm-myelin { stroke-width: 2.4; }
.axm .axm-node, .axm .axm-core, .axm .axm-dot { fill: currentColor; stroke: none; }
.axm .axm-pulse { stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: axm-pulse 2.4s ease-out infinite; }
.axm .axm-dot { transform: translateX(9px); animation: axm-travel 1.2s linear infinite; }
.axm .axm-ring { stroke-width: 1.6; stroke-dasharray: 23.6 31.4; transform-box: fill-box; transform-origin: center; animation: axm-sweep 1.6s linear infinite; }
.axm .axm-meet { fill: currentColor; stroke-width: 1.2; animation: axm-fill 0.6s ease-out both; }
.axm .axm-close { stroke-width: 1.4; stroke-dasharray: 35.2; stroke-dashoffset: 0; animation: axm-ring-close 0.32s ease-out both; }
.axm .axm-check { stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 0; animation: axm-draw 0.32s ease-out 0.32s both; }
.axm .axm-arc { stroke-dasharray: 1; stroke-dashoffset: 0; animation: axm-draw 0.32s ease-out both; }
.axm .axm-ticks { stroke-width: 1.2; stroke-dasharray: 1 3.4; }
.axm .axm-wave { stroke-width: 1.8; stroke-dasharray: 5 2.4; animation: axm-drift 3s linear infinite; }
.axm .axm-bar { stroke-width: 2; }
.axm .axm-top { animation: axm-shift 1.6s ease-in-out infinite; }
.axm .axm-go { animation: axm-leap 1.1s steps(2, end) infinite; }
.axm .axm-dashed { stroke-dasharray: 1.6 1.6; }
.axm .axm-clock, .axm .axm-hands { stroke-width: 1.2; }
.axm-error .axm-core { animation: axm-crack 1.6s steps(2, end) infinite; }
.axm-later .axm-clock, .axm-blocked .axm-soma { animation: axm-dull 2.4s ease-in-out infinite; }
.axm-skipped { opacity: 0.7; }
@keyframes axm-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes axm-travel { from { transform: translateX(0); } to { transform: translateX(18px); } }
@keyframes axm-sweep { to { transform: rotate(360deg); } }
@keyframes axm-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes axm-ring-close { from { stroke-dashoffset: 35.2; } to { stroke-dashoffset: 0; } }
@keyframes axm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes axm-drift { to { stroke-dashoffset: -7.4; } }
@keyframes axm-shift { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-1px); } }
@keyframes axm-leap { 0% { transform: translateX(-1px); } 50% { transform: translateX(1.5px); } }
@keyframes axm-dull { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes axm-crack { 0% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes axm-land { 0%, 84% { transform: scale(1); } 90% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* The phase wrapper (.axg): the colour of each sign; the mark inherits it. */
.axg { --axg: var(--accent); display: inline-flex; align-items: center; flex: none; color: var(--axg); line-height: 0; }
.axg[data-phase="conduit"] { --axg: var(--cost-2); }
.axg[data-phase="threshold"] { --axg: var(--cost-3); }
.axg[data-phase="junction"], .axg[data-phase="done"] { --axg: var(--ok); }
.status-line.axg-line { gap: 9px; }
.status-line.axg-line .status-text { color: var(--muted); }

/* The sign riding the charge of a running axon bar (answer-progress and the bell share .axon.axg-bar). */
.axon.axg-bar { position: relative; }
.axg-front { --axg: var(--cost-2); position: absolute; top: 50%; left: var(--at, 0%); transform: translate(-50%, -50%); z-index: 1;
  display: inline-flex; align-items: center; padding: 1px 3px; border-radius: 999px; background: var(--surface); color: var(--axg);
  font-size: 11px; line-height: 0; pointer-events: none; transition: left 0.35s ease;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--axg) 35%, transparent), 0 0 6px color-mix(in srgb, var(--axg) 45%, transparent); }
.axg-front[data-phase="threshold"] { --axg: var(--cost-3); }
.axg-front[data-phase="junction"], .axg-front[data-phase="done"] { --axg: var(--ok); }

/* The Task Matrix (glyphs.js TASKS): each task state is a drawn mark in place of a checkbox. The tone sets the colour. */
.axt { --axt: var(--faint); display: inline-flex; align-items: center; gap: 6px; color: var(--axt); white-space: nowrap; }
.axt[data-tone="fire"] { --axt: var(--cost-2); }
.axt[data-tone="ok"] { --axt: var(--ok); }
.axt[data-tone="warn"] { --axt: var(--cost-3); }
.axt[data-tone="bad"] { --axt: var(--danger); }
.axt[data-tone="rest"] { --axt: var(--accent); }
.axt[data-tone="mute"] { --axt: var(--faint); }
.axt-sym { display: inline-flex; align-items: center; line-height: 0; }
.task-check.glyph { width: 46px; min-width: 46px; height: 20px; border: 0; border-radius: 6px; background: none !important; padding: 0 2px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; }
.task-check.glyph:hover { background: var(--hover) !important; }
.task-item.skipped .task-title, .task-item.blocked .task-title { color: var(--faint); }
.task-item.error .task-title { color: var(--danger); }
.axt-pick { position: fixed; z-index: 10050; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 300px; max-width: calc(100vw - 16px);
  padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 18%, transparent); }
.axt-pick button { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.axt-pick button .axt { min-width: 2.6em; justify-content: center; }
.axt-pick button:hover, .axt-pick button:focus-visible { background: var(--hover); outline: none; }
.axt-pick button[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .axm *, .axg-front, .axt-sym, .axt-sym * { animation: none !important; transition: none !important; }
  .axm .axm-dot { transform: translateX(9px); }
  .axm .axm-pulse { opacity: 0; }
}

/* the gateway terminal (a fixed dark palette, like the rest of the terminal): a mark before each line, a live mark while a test runs */
.gw-l .gw-g { display: inline-block; width: 2.4em; text-align: center; }
.gw-l-cmd .gw-g { color: #22d3ee; } .gw-l-info .gw-g { color: #a5b4fc; } .gw-l-ok .gw-g { color: #4ade80; }
.gw-l-warn .gw-g, .gw-l-err .gw-g { color: #fbbf24; }
.gw-term-live .axg[data-phase="spark"] { --axg: #a5b4fc; } .gw-term-live .axg[data-phase="conduit"] { --axg: #22d3ee; }
.gw-term-live .axg[data-phase="threshold"] { --axg: #fbbf24; } .gw-term-live .axg[data-phase="junction"] { --axg: #4ade80; }
.gw-glyph-key { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.gw-glyph-key span { display: inline-flex; align-items: center; gap: 6px; }
/* the Neural Gateway's step list (Task Matrix rows above the terminal) */
.gw-tasks { list-style: none; margin: 0; padding: 10px 14px; display: grid; gap: 4px; background: #0b1020; border-bottom: 1px solid #1e293b;
  font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; color: #cbd5e1; max-height: 260px; overflow: auto; }
.gw-tasks[hidden] { display: none; }
.gw-task { display: grid; grid-template-columns: 4.2em 1fr auto; column-gap: 10px; align-items: baseline; }
.gw-task .axt { justify-content: center; }
.gw-task .axt[data-tone="fire"] { --axt: #22d3ee; } .gw-task .axt[data-tone="ok"] { --axt: #4ade80; }
.gw-task .axt[data-tone="bad"] { --axt: #f87171; } .gw-task .axt[data-tone="warn"] { --axt: #fbbf24; } .gw-task .axt[data-tone="mute"] { --axt: #64748b; }
.gw-task-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-task-detail { grid-column: 2 / 4; color: #fca5a5; font-size: 11.5px; }
.gw-task-skipped .gw-task-detail { color: #94a3b8; }
.gw-task-word { color: #94a3b8; font-size: 11.5px; white-space: nowrap; }
.gw-task-done .gw-task-word { color: #4ade80; } .gw-task-doing .gw-task-word { color: #22d3ee; }

/* ---- storage tiers on /plans (Google One style) and the "how to pay" choice */
.st-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.st-tier { position: relative; display: grid; gap: 6px; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.st-tier:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.st-tier[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.st-tier b { font-size: 14.5px; }
.st-tier-price { font-size: 20px; font-weight: 700; }
.st-tier-price small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.st-tier-tag { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: color-mix(in srgb, var(--ok, #16a34a) 15%, transparent); color: var(--ok, #16a34a); }
.st-actions { display: grid; gap: 10px; }
.st-pay { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); max-width: 720px; }
.st-pay p { margin: 0; }
.st-pay-q { font-weight: 600; }
.st-pay-note, .st-pay-load { color: var(--muted); font-size: 13.5px; }
.st-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 14px; line-height: 1.45; }
.st-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.st-opt input { margin-top: 3px; }
.st-opt em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--accent); margin-left: 6px; }
.st-pay > button { justify-self: start; }

/* ---- Hippocampus storage (/owner/storage) */
.hc-page .gw-logo { background: linear-gradient(135deg, #6366F1, #4338CA); }
.hc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 22px; }
.hc-tile { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hc-tile > span, .hc-places span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hc-tile > b { font-size: 19px; }
.hc-tile small, .hc-places small { color: var(--muted); font-size: 12.5px; }
.hc-places { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.hc-places p { display: grid; gap: 2px; margin: 0; }
.hc-section { margin: 0 0 24px; }
.hc-section h2 { font-size: 18px; margin: 0 0 10px; }
.hc-buckets { display: grid; gap: 10px; }
.hc-bucket { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hc-bucket.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.hc-bucket h3 { margin: 0 0 4px; font-size: 15.5px; }
.hc-bucket p { margin: 2px 0; font-size: 13.5px; }
.hc-badge { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.hc-status { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.hc-status.hc-failed { color: var(--danger, #dc2626); }
.hc-bucket-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.hc-add, .hc-cache { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hc-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.hc-kinds button { display: grid; justify-items: start; gap: 4px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.hc-kinds button[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.hc-kinds small { color: var(--muted); }
.hc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.hc-add > button, .hc-cache > button { justify-self: start; }
.hc-cache { grid-template-columns: minmax(0, 260px) auto; align-items: end; }
.hc-cache .fine { grid-column: 1 / -1; margin: 0; }
#hc-msg.hc-ok { color: var(--ok, #16a34a); }
@media (max-width: 680px) {
  .hc-bucket { grid-template-columns: auto 1fr; }
  .hc-bucket-tools { grid-column: 1 / -1; justify-content: flex-start; }
  .hc-cache { grid-template-columns: 1fr; }
}
.hc-main .fine, .hc-main p { text-align: left; }
.hc-price { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hc-price > button { justify-self: start; }
.hc-price-table td b { font-size: 15px; }

/* ===================================================================== Camrive on camrive.com (static/camrive.js) */
html.camrive .page-top .mark { gap: 8px; }
html.camrive .cam-logo { width: 30px; height: 30px; }
html.camrive .page-top .mark .cam-name { font-family: var(--wordmark) !important; font-weight: 700; letter-spacing: 0.04em; }

/* ===================================================================== Chiasmar on chiasmar.com (static/chiasmar.js) */
html.chiasmar .page-top .mark { gap: 8px; }
html.chiasmar .chi-logo { width: 30px; height: 30px; }
html.chiasmar .page-top .mark .chi-name { font-family: var(--wordmark) !important; font-weight: 700; letter-spacing: 0.04em; }

/* ---- Camrive share link page (/d/<token>, static/share.js) */
.sh-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.sh-top { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.sh-top b { font-family: var(--wordmark); letter-spacing: .05em; }
.sh-top span { color: var(--muted); font-size: 14px; margin-left: 6px; }
.sh-main { flex: 1; display: grid; gap: 18px; justify-items: center; align-content: start; padding: 32px 16px; }
.sh-card { width: min(460px, 100%); padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.sh-card h1 { font-size: 21px; margin: 14px 0 6px; }
.sh-name { margin: 0; font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.sh-size, .sh-note, .sh-load { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.sh-form { display: grid; gap: 12px; }
.sh-form p { margin: 0; }
.sh-err { color: var(--danger, #dc2626); font-size: 14px; }
.sh-dl { display: inline-block; margin-top: 16px; text-decoration: none; }
.sh-view { width: min(1000px, 100%); display: grid; gap: 14px; justify-items: center; user-select: none; -webkit-user-select: none; }
.sh-view img, .sh-view video { max-width: 100%; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.12); background: #fff; }
.sh-view audio { width: min(560px, 100%); }
.sh-foot { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.cam-share { display: grid; gap: 12px; width: min(520px, calc(100vw - 32px)); }
.cam-share fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.cam-share legend { font-weight: 600; margin-bottom: 4px; }
.cam-share textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); }
.cam-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cam-share-link { display: flex; gap: 8px; }
.cam-share-link input { flex: 1; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); }
.cam-share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cam-all-off { justify-self: start; font-size: 13px; }
@media (max-width: 520px) { .cam-share-row { grid-template-columns: 1fr; } }

/* NK-TR-2026-10 Camrive: declining 7-day share bar + ClamAV malware lock overlay */
.cam-exp {
  display: block; width: 100%; max-width: 120px; height: 4px; margin: 4px auto 0;
  border-radius: 999px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden;
}
.cam-exp > i { display: block; height: 100%; background: var(--accent, #4A55C8); border-radius: inherit; }
.cam-exp-wide {
  max-width: none; height: auto; display: grid; gap: 6px; margin: 8px 0 0; padding: 0;
  background: transparent; overflow: visible;
}
.cam-exp-wide > i {
  height: 6px; background: var(--accent, #4A55C8); border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 40%, transparent);
}
.cam-exp-wide > span { font-size: 12.5px; color: var(--muted); }
.tx-thumb { position: relative; }
.cam-malware {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; padding: 6px;
  border-radius: inherit; background: color-mix(in srgb, #b91c1c 78%, transparent); color: #fff;
  text-align: center; pointer-events: none;
}
.cam-malware b { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.cam-malware small { font-size: 10px; opacity: .9; }
.cam-malware-card { outline: 2px solid #b91c1c; outline-offset: -2px; }
.cam-malware-row td { background: color-mix(in srgb, #b91c1c 8%, transparent); }
.cam-malware-row .tx-name { position: relative; }

/* ---- sign-up progress bar (/welcome): Name & age · Username · Phone · Password & two-step · Photo */
.su-progress { display: flex; gap: 6px; list-style: none; margin: 0 auto 16px; padding: 0; width: min(560px, 100%); counter-reset: su; }
.su-progress li { flex: 1; position: relative; padding-top: 12px; font-size: 12px; color: var(--muted); text-align: center; counter-increment: su; }
.su-progress li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 99px; background: var(--line); }
.su-progress li.done::before { background: var(--accent); }
.su-progress li.now { color: var(--ink); font-weight: 600; }
.su-progress li.now::before { background: linear-gradient(90deg, var(--accent) 50%, color-mix(in srgb, var(--accent) 30%, var(--line)) 50%); }
@media (max-width: 480px) { .su-progress li { font-size: 0; } .su-progress li.now { font-size: 12px; } }
.pk-id { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--hover); font: 600 13px/1.4 ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }

/* Homeostat → Billing: account number and billing country */
#acct-number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; color: var(--text); }
.acct-country { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.acct-country select { max-width: 220px; }

/* ===================================================================== neurork.com, the front door (static/neurork.js) */
.nk-apps { max-width: 1040px; margin: 0 auto; padding: 8px 16px 48px; }
.nk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.nk-app { display: grid; justify-items: center; gap: 6px; padding: 22px 12px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel, var(--bg)); color: var(--text); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.nk-app:hover, .nk-app:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(16, 22, 42, 0.12); }
.nk-app img { width: 56px; height: 56px; object-fit: contain; }
.nk-app b { font-family: var(--wordmark); letter-spacing: 0.04em; font-size: 14px; }
.nk-app small { color: var(--muted); font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .nk-app { transition: none; } }

/* Owner dashboard → Ecosystem (static/owner-ecosystem.js) */
.eco-toggle { display: inline-flex; gap: 4px; }
.eco-toggle [aria-checked="true"] { background: var(--accent, #6E7CEF); color: #fff; border-color: transparent; }
.eco-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.eco-providers { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; font-size: 13.5px; }
.eco-ok { color: #2B8A3E; }
.eco-bad { color: #C2255C; }
.eco-security { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.eco-security > div { border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.eco-security b { font-size: 26px; display: block; }
.eco-security small { color: var(--muted); }
.eco-security ul { padding-left: 18px; margin: 8px 0 0; font-size: 13px; }

/* Plans → Your Impulses (static/impulse-wallet.js) */
.iw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
.iw-stats > div { border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.iw-stats b { display: block; font-size: 26px; }
.iw-stats small { color: var(--muted); }
.iw-lots ul { font-size: 13px; padding-left: 18px; }
.iw-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.iw-form { border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 8px; align-content: start; }
.iw-form h3 { margin: 0; font-size: 15px; }

/* Plans → Pathway: the link into Build your plan (/plans/build, static/plans-build.js) */
.cp-sub { font-size: 0.55em; font-weight: 400; color: var(--muted); margin-left: 6px; }
.cp-link { text-align: center; margin: 0; }
.cp-link .primary { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 20px; border-radius: var(--pill); text-decoration: none; }
.plan-card .plan-build { justify-self: center; margin: 0 0 6px; }
.facts-sheet { grid-column: 1 / -1; max-width: 720px; }
.bill-advice .ghost { white-space: nowrap; }

/* Cloudflare Turnstile bot check in the sign-up dialog (static/turnstile.js) */
.turnstile-box { display: flex; justify-content: center; margin: 8px 0; min-height: 65px; }
.turnstile-box[hidden] { display: none; }

/* ===================================================================== Billing centre and desk (billing_core.py) */
.bc-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 12px; }
.bc-tabs a { padding: 6px 10px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.bc-tabs a:hover { background: var(--hover); }
.bc-tabs a.on { background: color-mix(in srgb, var(--st-fibre) 14%, var(--surface)); }
.bc-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.bc-filter .field { margin: 0; }
.bc-filter button { grid-column: 1 / -1; justify-self: start; }
.bc-number { font-variant-numeric: tabular-nums; word-break: break-all; }
.bc-plain { margin: 0; padding-left: 18px; }
.bc-form { display: grid; gap: 10px; max-width: 620px; }
.bc-scopes, .bc-services { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.bc-cases { list-style: none; padding: 0; display: grid; gap: 10px; }
.bc-case { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.bc-case small { color: var(--muted); }
.bc-case-tools { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.bc-log { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; }
/* Address on your bills (bill_address.py, static/bill-address.js): the form, and "Billed to" on statements and invoices. */
.ba-form { max-width: 640px; }
.ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.ba-grid .field { margin: 0; }
.ba-name, .ba-line1, .ba-line2 { grid-column: 1 / -1; }
.ba-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ba-paper { max-width: 320px; }
.ba-paper select { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink);
  padding: 10px 12px; font: inherit; }
.ba-form .fine { text-align: left; margin: 0; }
.hs-bill-address { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
@media (max-width: 560px) { .ba-grid { grid-template-columns: minmax(0, 1fr); } }
.st-billed { min-width: 0; overflow-wrap: anywhere; }
.st-billed-label { color: var(--muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ba-share { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 10px; }
.ba-share input { margin-top: 3px; flex: none; }
.ba-share small { display: block; color: var(--muted); font-size: 12.5px; }
.bd-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; }
.bd-queue { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bd-queue button { width: 100%; text-align: left; }
.bd-queue small { color: var(--muted); }
.bill-record { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 12px; margin: 10px 0; }
.bill-record dt { color: var(--muted); }
.bill-record dd { margin: 0; font-variant-numeric: tabular-nums; word-break: break-all; }
@media (max-width: 900px) { .bd-grid { grid-template-columns: 1fr; } }
@media print { .bc-page .bc-panel:not(#panel-history), .bc-page #bc-banner { display: none !important; } }

/* ===================================================================== Front pages, design B "Clarity" */
/* The signed-out front pages of axork.com (index.html, #ax-front), neurork.com, daxolex.com, synaram.com, camrive.com
   and chiasmar.com. Light ground, plain words, one product preview, three cards. One accent for every site (owner, 27 Oct 2026): the Neurork indigo. */
.cl-home {
  /* Built from the True Tint tokens (theme.js sets --bg, --surface, --ink, --muted, --line on :root), so the page is
     B's light look at the light end of the scale and darkens shade by shade. front-tint.js fine-tunes the accent. */
  --site-accent: #4A55C8; --site-accent-dark: #A5ADFF;
  --cl-bg: color-mix(in srgb, var(--bg) 97%, #2B3592); --cl-surface: var(--surface); --cl-ink: var(--ink); --cl-muted: var(--muted);
  --cl-line: color-mix(in srgb, var(--line) 60%, var(--surface)); --cl-line-soft: color-mix(in srgb, var(--line) 35%, var(--surface));
  --cl-edge: var(--line); --cl-dark: var(--ink); --cl-dark-ink: var(--surface);
  --cl-accent: var(--site-accent); --cl-accent-text: var(--site-accent); --cl-accent-ink: #FFFFFF;
  --cl-soft: color-mix(in srgb, var(--cl-accent) 12%, var(--cl-surface)); --cl-soft-ink: var(--cl-accent-text);
  --cl-panel: color-mix(in srgb, var(--cl-accent) 6%, var(--cl-surface));
  --cl-shadow: 0 20px 50px rgba(21, 23, 42, 0.08);
  margin: 0; min-height: 100vh; height: auto; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column;
  background: var(--cl-bg); color: var(--cl-ink); font: 400 16px/1.5 var(--text); letter-spacing: 0;
}
html:has(body.cl-home) { height: auto; }
/* Before front-tint.js runs (or without it): the dark-ground variant on dark shades. */
[data-shade="dark"] .cl-home { --cl-accent: var(--site-accent-dark); --cl-accent-text: var(--site-accent-dark); --cl-accent-ink: #15172A;
  --cl-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-shade]) .cl-home { --cl-accent: var(--site-accent-dark); --cl-accent-text: var(--site-accent-dark); --cl-accent-ink: #15172A; }
}

.cl-home a { color: var(--cl-accent-text); }
.cl-home a:hover { color: var(--cl-ink); }
.cl-home h1, .cl-home h2, .cl-home h3 { font-family: var(--display); letter-spacing: 0; }
.cl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 16px clamp(16px, 4vw, 40px); background: var(--cl-surface); border-bottom: 1px solid var(--cl-line); }
.cl-home .cl-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--cl-ink); }
.cl-brand img { width: 32px; height: 32px; flex: none; }
.cl-name { font: 600 21px/1.1 var(--display); }
.cl-wordmark { font: 700 20px/1 var(--wordmark); letter-spacing: 0.06em; }
.cl-nav { display: flex; align-items: center; gap: 6px 20px; flex-wrap: wrap; font-size: 15px; }
.cl-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.cl-home .cl-nav .cl-signin { padding: 0 18px; border: 0; border-radius: 10px; background: var(--cl-dark); color: var(--cl-dark-ink); text-decoration: none;
  font: 600 15px/1 var(--text); min-height: 44px; cursor: pointer; }
.cl-home .cl-nav .cl-signin:hover { color: var(--cl-dark-ink); opacity: 0.9; }

.cl-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 64px 24px 48px; display: flex; flex-direction: column; gap: 56px; }
.cl-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.cl-eyebrow { margin: 0; font-size: 14px; font-weight: 600; color: var(--cl-accent-text); }
.cl-hero h1 { margin: 0; max-width: 860px; font-weight: 600; font-size: clamp(36px, 6vw, 56px); line-height: 1.06; }
.cl-lead { margin: 0; max-width: 680px; font-size: clamp(17px, 2.2vw, 19px); line-height: 1.55; color: var(--cl-muted); }
.cl-note { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--cl-soft); color: var(--cl-soft-ink); font-size: 15px; }
.cl-small { margin: 0; font-size: 14px; color: var(--cl-muted); }
.cl-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cl-home .cl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px;
  border: 1px solid var(--cl-edge); background: var(--cl-surface); color: var(--cl-ink); font: 500 16px/1.2 var(--text); text-decoration: none; cursor: pointer; }
.cl-home .cl-btn:hover { color: var(--cl-ink); border-color: var(--cl-ink); }
.cl-home .cl-btn-primary { padding: 0 24px; border-color: var(--cl-accent); background: var(--cl-accent); color: var(--cl-accent-ink); font-weight: 600; }
.cl-home .cl-btn-primary:hover { color: var(--cl-accent-ink); border-color: var(--cl-accent); filter: brightness(0.92); }
.cl-home .cl-btn:disabled { opacity: 0.55; cursor: default; }

/* The product preview: a plain window with a side list and a pane. */
.cl-window { background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: 20px; box-shadow: var(--cl-shadow); overflow: hidden; }
.cl-window-bar { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--cl-line-soft); }
.cl-window-bar span { width: 12px; height: 12px; border-radius: 6px; background: var(--cl-line); }
.cl-window-body { display: flex; flex-wrap: wrap; min-height: 340px; }
.cl-side { flex: 0 1 210px; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-right: 1px solid var(--cl-line-soft); font-size: 14px; color: var(--cl-muted); }
.cl-side strong { color: var(--cl-ink); }
.cl-pane { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; }
.cl-pad { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cl-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--cl-line-soft); font-size: 14px; }
.cl-row > span:not(.cl-chip):not(.cl-time) { color: var(--cl-muted); }
.cl-time { width: 56px; color: var(--cl-muted); font-variant-numeric: tabular-nums; }
.cl-chip { padding: 3px 10px; border-radius: 999px; background: var(--cl-soft); color: var(--cl-soft-ink); font-size: 12px; font-weight: 600; }
.cl-home .cl-chip-risk { background: color-mix(in srgb, var(--danger) 14%, var(--cl-surface)); color: var(--danger); }
.cl-home .cl-chip-urgent { background: #FBEBDD; color: #8F4213; }
[data-shade="dark"] .cl-home .cl-chip-urgent { background: #3A2616; color: #F6C7A3; }
.cl-home .cl-chip-blue { background: #ECEEF7; color: #2B3592; }
[data-shade="dark"] .cl-home .cl-chip-blue { background: #252A48; color: #C9CEFF; }
.cl-bubble { max-width: 420px; padding: 10px 14px; border-radius: 14px; background: var(--cl-soft); color: var(--cl-ink); font-size: 15px; }
.cl-bubble-me { align-self: flex-end; background: var(--cl-accent); color: var(--cl-accent-ink); }
.cl-bubble-ask { align-self: flex-end; }
.cl-answer { max-width: 560px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--cl-ink); }
.cl-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: 13px; color: var(--cl-muted); }
.cl-caption { margin: 0; padding: 0 24px 20px; font-size: 13px; color: var(--cl-muted); }
.cl-files { padding: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cl-file { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--cl-line); border-radius: 12px; font-size: 13px; overflow-wrap: anywhere; }
.cl-thumb { height: 56px; border-radius: 8px; background: color-mix(in srgb, var(--cl-accent) 12%, var(--cl-surface)); }
.cl-thumb-warm { background: color-mix(in srgb, #C98A3A 18%, var(--cl-surface)); }
.cl-thumb-cool { background: color-mix(in srgb, var(--cl-accent) 12%, var(--cl-surface)); }

/* Three feature cards; one column on phones. */
.cl-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cl-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: 16px; }
.cl-card h2, .cl-card h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.25; }
.cl-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--cl-muted); }

.cl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; padding: 24px clamp(16px, 4vw, 40px);
  background: var(--cl-surface); border-top: 1px solid var(--cl-line); font-size: 14px; color: var(--cl-muted); }
.cl-foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cl-foot-links a { display: inline-flex; align-items: center; min-height: 32px; }

/* neurork.com: the app tiles inside the preview (neurork.js fills #nk-grid from /api/neurork). */
.cl-apps { padding: 28px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cl-home .cl-apps .nk-app { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 8px; border: 1px solid var(--cl-line);
  border-radius: 14px; color: var(--cl-ink); text-decoration: none; text-align: center; }
.cl-home .cl-apps a.nk-app:hover { border-color: var(--cl-accent); }
.cl-apps .nk-app img { width: 48px; height: 48px; }
.cl-apps .nk-app b { font-size: 14px; font-weight: 600; }
.cl-apps .nk-app small { font-size: 12px; color: var(--cl-muted); }

/* axork.com signed out (owner, 26 Oct 2026: "as simple as Neurork's homepage"): the top bar, the rail and the composer
   stay as they are; the body is the mark and wordmark over the box, and, signed out on / (app.py data-front, shown by
   static/axork-front.js), the product row and the footer under the composer while the chat is empty. */
.workspace-page #ax-front[hidden], .workspace-page .main:not(.empty) #ax-front { display: none; }
.workspace-page #ax-front.cl-home { position: static; display: flex; flex-direction: column; gap: 12px; min-height: 0; margin-top: auto;
  padding: 28px 0 0; background: transparent; overflow: visible; }
.workspace-page #ax-front .nk-products { padding: 0 16px; }
.workspace-page #ax-front .cl-foot { justify-content: center; align-items: center; text-align: center; gap: 4px 18px; padding: 14px 16px 18px;
  font-size: 13px; background: transparent; border-top: 1px solid var(--cl-line); }
.workspace-page #ax-front .cl-foot-family, .workspace-page #ax-front .cl-foot-legal { flex-basis: auto; order: 0; justify-content: center; font-size: 13px; }
.workspace-page #ax-front .cl-foot-links { justify-content: center; }
.workspace-page #ax-front .cl-foot > span:first-child::after { content: " \00b7"; }
@media (max-width: 640px) { .workspace-page #ax-front .cl-foot > span:first-child { display: none; } }
.cl-plans-wrap { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.cl-plans-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cl-plans-copy h2, .cl-axon h2 { margin: 0; font-size: clamp(26px, 4vw, 32px); font-weight: 600; line-height: 1.2; }
.cl-plans-copy > p, .cl-axon-copy > p:not(.cl-eyebrow) { margin: 0; font-size: 17px; line-height: 1.6; color: var(--cl-muted); }
.cl-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cl-home .cl-plan { display: block; padding: 16px; background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: 14px; color: var(--cl-ink); text-decoration: none; }
.cl-home .cl-plan:hover { border-color: var(--cl-accent); color: var(--cl-ink); }
.cl-home .cl-plan-hi { border: 2px solid var(--cl-accent); padding: 15px; }
.cl-home .cl-plan-axon { background: var(--cl-panel); border: 1px dashed var(--cl-accent); }
.cl-plan p { margin: 6px 0 0; font-size: 14px; color: var(--cl-muted); }
.cl-axon { display: flex; flex-wrap: wrap; gap: 36px; padding: clamp(20px, 4vw, 32px); background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: 20px; }
.cl-axon-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cl-sliders { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.cl-slider { display: flex; flex-direction: column; gap: 4px; }
.cl-slider-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.cl-slider-head small { color: var(--cl-muted); font-size: 14px; }
.cl-slider-head output { font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-slider input[type="range"] { width: 100%; min-height: 32px; margin: 0; accent-color: var(--cl-accent); cursor: pointer; }
.cl-axon-sum { flex: 0 1 320px; min-width: 0; align-self: flex-start; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 16px; background: var(--cl-bg); }
.cl-axon-sum > span { font-size: 15px; }
.cl-axon-sum .cl-small { line-height: 1.5; }
.cl-axon-sum .cl-price { font: 600 40px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.cl-axon-sum .cl-price small { font: 400 16px/1 var(--text); color: var(--cl-muted); }

/* Purchase Facts on the front page: the label itself is drawn by purchase-facts.js (.pf-label, below). */
.pf { flex: 0 1 360px; min-width: 0; margin: 0; }
.pf[hidden] { display: none; }

.cl-home :focus-visible { outline: 3px solid var(--cl-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { html:has(body.cl-home), #ax-front { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .cl-home *, .cl-home *::before, .cl-home *::after { transition: none !important; animation: none !important; } }
@media (max-width: 900px) {
  .cl-features { grid-template-columns: 1fr; }
  .cl-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cl-main { padding: 40px 16px 32px; gap: 40px; }
  .cl-top { padding: 10px 16px; }
  .cl-nav { gap: 0 14px; font-size: 14px; }
  .cl-side { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; border-right: 0; border-bottom: 1px solid var(--cl-line-soft); }
  .cl-side strong { flex-basis: 100%; }
  .cl-pane { flex-basis: 100%; }
  .cl-pad { padding: 16px; }
  .cl-files { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
  .cl-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
  .cl-window-body { min-height: 0; }
  .cl-actions { width: 100%; }
  .cl-actions .cl-btn { flex: 1 1 100%; }
  .cl-axon { gap: 24px; }
  .cl-axon-sum { flex-basis: 100%; }
  .pf { flex-basis: 100%; }
}
/* Taxetal (taxetal.com, static/taxetal.js): tax and revenue dashboards */
.tx-page { background: var(--bg, var(--surface)); }
.tx-signin { width: min(440px, 100%); margin: 8vh auto 0; display: grid; gap: 10px; }
.tx-signin h1 { margin: 0; font: 700 32px/1.2 var(--display); }
.tx-kicker { margin: 0; color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; }
.tx-form { display: grid; gap: 10px; }
.tx-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.tx-filters .field { min-width: 140px; }
.tx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.tx-tabs button { min-height: 44px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.tx-tabs button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.tx-view h2 { margin: 22px 0 8px; font: 700 18px/1.3 var(--display); }
.tx-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 6px 0 12px; }
.tx-inline .field { min-width: 150px; flex: 1 1 150px; }
.tx-inline .tx-wide { flex-basis: 100%; }
.tx-view code { font-size: 12px; }
@media (max-width: 640px) { .tx-filters .field, .tx-inline .field { min-width: 0; flex: 1 1 100%; } }
/* Taxetal dropdowns match its text fields (they were plain browser boxes) */
.tx-page .field select { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink);
  padding: 11px 12px; font: inherit; font-size: 16px; min-height: 46px; text-overflow: ellipsis; }
.tx-page .field select:focus { border-color: var(--accent); }
/* Purchase Facts: a US Nutrition Facts panel. White, black, Helvetica, heavy border, thick rule under the
   title, hairline rules between rows, a thicker rule before the footnote. No brand colour. */
.pf-label { border: 5px solid #000; background: #fff; color: #000; border-radius: 0; box-shadow: none;
  padding: 4px 6px 6px; width: 100%; max-width: none; font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.15;
  margin: 10px 0; text-align: left; box-sizing: border-box; }
.pf-label, .pf-label * { color: #000; background: #fff; border-radius: 0; box-shadow: none;
  font-family: Helvetica, Arial, sans-serif; }
.pf-head { border-bottom: 10px solid #000; padding: 0 0 2px; margin: 0; }
.pf-title { display: block; font-size: 40px; font-weight: 900; letter-spacing: -0.4px; line-height: 0.95; }
.bp-facts-slot .pf-label, #bp-t-facts .pf-label { width: 100%; min-width: 0; }
.pf-serve { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0 2px; }
.pf-what { font-weight: 700; text-align: left; }
.pf-serve-amt { margin-left: auto; text-align: right; font-weight: 700; }
.pf-period { font-weight: 700; }
.pf-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.pf-section { border-bottom: 0; padding: 0; margin: 0; }
.pf-section h4 { margin: 4px 0 0; padding: 0; font-size: 13px; font-weight: 900; letter-spacing: 0; text-align: left; }
.pf-row { display: grid; grid-template-columns: minmax(92px, 46%) minmax(0, 1fr); gap: 8px; border-top: 1px solid #000;
  padding: 2px 0; }
.pf-row > span:first-child { font-weight: 700; text-align: left; }
.pf-row > span:last-child { text-align: right; overflow-wrap: anywhere; font-weight: 400; }
.pf-foot .pf-row:first-child { border-top: 0; }
.pf-foot { border-top: 6px solid #000; margin-top: 3px; padding-top: 1px; font-size: 12px; }
.pf-fine { margin: 3px 0 0; padding-top: 2px; border-top: 1px solid #000; font-size: 11.5px; line-height: 1.3; text-align: left; }
.pf-loading { color: var(--muted); font-size: 13px; }
.pf-toggle { margin-top: 6px; }
.pf-slot[hidden] { display: none; }
@media (max-width: 420px) { .pf-label { max-width: 100%; } }
@media print { .pf-label { break-inside: avoid; border-color: #000; color: #000; } }
.md-code { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.beta-bar form { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===================================================================== W2-6a: suite security, mail, Synaram, storage */
/* Daxolex Mail: on-device rewrite disclosure (mail.html #mc-stem-note) */
.mc-stem-about { font-size: 11px; color: var(--muted); }
.mc-stem-note { position: absolute; top: 100%; left: 0; z-index: 30; width: min(320px, 86vw); margin: 4px 0 0; padding: 10px 12px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  font: 400 12.5px/1.45 var(--text); }
.mc-stem-note[hidden] { display: none; }
/* Synaram: safety numbers (messages.html #safety-dialog) */
.safety-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; }
.safety-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 6px; }
.safety-row.changed { border-color: var(--danger); }
.safety-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.safety-head small { color: var(--muted); }
.safety-row.changed .safety-head small { color: var(--danger); }
.safety-number { font: 600 15px/1.6 var(--mono); letter-spacing: 0.04em; word-spacing: 0.3em; overflow-wrap: anywhere; }
/* Synaram: report from a message request; Teams settings only where the site set Teams up */
.req-report { display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.req-report[hidden], #ms-block[hidden] { display: none; }
/* Camrive share page: report a link */
.sh-report-btn { margin-left: 6px; }
.sh-report { display: grid; gap: 8px; max-width: 360px; margin: 10px auto 0; text-align: left; }
.sh-report[hidden] { display: none; }

/* ===================================================================== Synaram keypad (static/dialpad.js) */
/* Five layouts (a honeycomb, b ring, c rows, d classic grid, the default e Thumb edges). E is the CBA phone keypad:
   1 * # 2 / 3 Call 4 / 5 7 8 6 / wide 9 then 0. Keys are those cutouts, not axon nodes. Message and video sit under
   the sheet. Sizes inside .kp are in cqw of the keypad's own width, so the same markup draws the full keypad and the
   mini previews in the picker. Colours are tokens only: --signal (teal), --signal-soft (a lit key), --signal-ink
   (the call icon) and --violet, solved by theme.js to 4.5:1 at every True Tint shade. */
dialog.compose.dial { width: min(380px, calc(100% - 24px)); max-height: calc(100% - 16px); overflow-y: auto;
  background: transparent; border: 0; box-shadow: none; }
dialog.compose.dial[open] { display: flex; flex-direction: column; align-items: stretch; }
dialog.compose form.dial-form { align-items: center; text-align: center; padding: 14px 16px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-3), var(--edge); }
.dial-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.dial-head h2 { margin: 0 auto 0 0; font: 600 17px/1.2 var(--text); }
.dial-hint { margin: 2px 0 6px; font-size: 13px; color: var(--muted); }
.dial-number { min-height: 44px; width: 100%; font: 500 30px/44px var(--text); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; color: var(--ink); }
.dial-note { min-height: 20px; margin: 2px 0 4px; font-size: 13px; color: var(--muted); }
.dial-request { margin-top: 12px; }
#dial-btn svg circle { fill: currentColor; stroke: none; }
.kp-layout-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.kp-layout-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (pointer: coarse) { .kp-layout-btn { min-height: 44px; } }

.kp-host, .kp-preview { width: 100%; }           /* .kp is size-contained: its box gives it its width */
.kp { container-type: inline-size; box-sizing: border-box; width: 100%; max-width: 330px; margin: 4px auto 0; color: var(--ink); }
.kp-key { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4cqw;
  padding: 0; border: 1.5px solid var(--line); background: var(--bubble); color: var(--ink); font: 600 8.5cqw/1 var(--text);
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.2s; }
.kp-key .kp-d { line-height: 1; color: inherit; }
.kp-key small { font: 600 3cqw/1 var(--text); letter-spacing: 0.14em; color: var(--muted); }
.kp-key[data-key="0"] small { font-size: 3.6cqw; letter-spacing: 0; }
.kp-key:not(.is-lit):hover { background: var(--hover); }
.kp-key.is-press, button.kp-key:active { border-color: var(--signal); }
.kp-key.is-lit { border: 2px solid var(--signal); background: var(--signal-soft); color: var(--ink); }
.kp-key.is-lit .kp-d { color: var(--ink); }
.kp-key.is-lit small { color: var(--muted); }
.kp-key.is-last { box-shadow: 0 0 0 1.2cqw color-mix(in srgb, var(--signal) 30%, transparent); }
.kp-key.is-new { animation: kp-fire 0.45s ease-out; }
@keyframes kp-fire { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 70%, transparent); } }
.kp-key:focus-visible, .kp .dial-act:focus-visible, .kp-tools .dial-act:focus-visible, .kp-layout-btn:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; }

/* Lines: SVG drawn by dialpad.js on the same coordinates as the keys */
.kp-field { position: relative; width: 100%; }
.kp-a .kp-field { aspect-ratio: 330 / 410; }
.kp-b .kp-field { aspect-ratio: 1; }
.kp-field > .kp-key, .kp-field > .kp-call { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.kp-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; pointer-events: none; }
.kp-dendrites path, .kp-b .kp-lines path { stroke: var(--line); stroke-width: 2; }
.kp-path path, .kp-b .kp-lines path.is-lit { stroke: var(--signal); stroke-width: 3; }
.kp-b .kp-lines path.is-last { stroke-width: 4.5; }
.kp-path path.is-new, .kp-b .kp-lines path.is-new { animation: kp-conduct 0.35s ease-out; }
@keyframes kp-conduct { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.kp-ring { stroke: var(--line); stroke-width: 2; stroke-dasharray: 2 7; }

/* The call button: a round soma (A), the ring's cell body (B), a wide synaptic terminal (C), a rounded square (D) */
.kp-call { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 2cqw; padding: 0; border: 0;
  background: var(--signal); color: var(--signal-ink); font: 600 5.2cqw/1 var(--text); cursor: pointer; }
.kp-call svg { width: 9cqw; height: 9cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kp-call:disabled { opacity: 0.45; cursor: default; }
.kp-call.kp-round { width: 24cqw; aspect-ratio: 1; border-radius: 50%; }
.kp-call.kp-squircle { width: 24cqw; aspect-ratio: 1; border-radius: 8cqw; }
.kp-call.kp-cell { flex-direction: column; gap: 0.6cqw; }
.kp-cell .kp-call-word { font-size: 3.4cqw; letter-spacing: 0.04em; }
.kp-call.kp-terminal { flex: 1; height: 19.4cqw; border-radius: 10cqw 3.6cqw 3.6cqw 10cqw; }
.kp-terminal svg { width: 7.3cqw; height: 7.3cqw; }
.kp-icon { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.kp-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kp-icon:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.kp-icon:disabled { opacity: 0.4; cursor: default; }
.kp .kp-icon { width: 14.5cqw; height: 14.5cqw; }
.kp .kp-icon svg { width: 7.8cqw; height: 7.8cqw; }
.kp:not(.kp-mini) .kp-icon { min-width: 44px; min-height: 44px; }
.kp-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 4cqw; padding: 0 6.6cqw; }
.kp-b .kp-actions { justify-content: center; margin-top: 2cqw; }
.kp-c .kp-actions { gap: 4cqw; padding: 0; margin-top: 7cqw; }
.kp-tools { display: flex; justify-content: center; gap: 16px; margin: 14px 0 2px; }
.kp-tools .kp-icon { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-1); }
.kp-tools .kp-icon svg { width: 22px; height: 22px; }

/* B: *, # and delete as pills under the ring */
.kp-pills { display: flex; justify-content: center; gap: 4.8cqw; margin-top: 6cqw; }
.kp-pills .kp-pill { width: 19.4cqw; height: 13.3cqw; border-radius: 6.7cqw; }
.kp-pills .kp-key.kp-pill { font-size: 6.6cqw; }
.kp:not(.kp-mini) .kp-pill { min-height: 44px; }

/* C: rows of nodes with myelin between them */
.kp-axons { display: flex; flex-direction: column; gap: 6.6cqw; margin-top: 2cqw; }
.kp-axon { display: flex; align-items: center; }
.kp-axon .kp-key { flex: none; width: 21.8cqw; aspect-ratio: 1; border-radius: 50%; }
.kp-myelin { flex: 1; height: 6cqw; margin: 0 1.8cqw; border-radius: 3cqw; background: var(--line); transform-origin: left center; }
.kp-myelin.is-lit { background: color-mix(in srgb, var(--signal) 72%, var(--surface)); }
.kp-myelin.is-new { animation: kp-saltate 0.4s ease-out; }
@keyframes kp-saltate { from { transform: scaleX(0.08); } }

/* D: the grid in four layer bands */
.kp-cortex { display: flex; flex-direction: column; gap: 3cqw; }
.kp-band { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw; border-radius: 6.6cqw; background: var(--bubble); }
.kp-layer { flex: none; width: 6.6cqw; font: 600 3cqw/1 var(--text); letter-spacing: 0.08em; color: var(--muted); text-align: center; }
.kp-band-keys { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqw; }
.kp-key.kp-square { height: 20.6cqw; border-radius: 5.4cqw; background: var(--surface); }
.kp-key.kp-square.is-lit { background: var(--signal-soft); }
.kp-d .kp-key.is-last { box-shadow: 0 0 0 1.2cqw color-mix(in srgb, var(--signal) 30%, transparent),
  0 0 5cqw color-mix(in srgb, var(--signal) 45%, transparent); }

/* E: the CBA phone keypad. 1 * # 2 on row one, 3 Call 4, 5 7 8 6, wide 9 then 0. Cutouts, not axon nodes.
   1 3 5 down the left, 2 4 6 down the right, 7 and 8 short between them, Call in the middle. */
.kp-edges { display: grid; grid-template-columns: 1fr 1.13fr 1.13fr 1fr; gap: 3cqw;
  grid-template-areas: "k1 ks kh k2" "k3 call call k4" "k5 k7 k8 k6" "k9 k9 k0 k0"; }
.kp-at-1 { grid-area: k1; } .kp-at-2 { grid-area: k2; } .kp-at-3 { grid-area: k3; } .kp-at-4 { grid-area: k4; }
.kp-at-5 { grid-area: k5; } .kp-at-6 { grid-area: k6; } .kp-at-7 { grid-area: k7; } .kp-at-8 { grid-area: k8; }
.kp-at-9 { grid-area: k9; } .kp-at-0 { grid-area: k0; } .kp-at-star { grid-area: ks; } .kp-at-hash { grid-area: kh; }
.kp-edges > .kp-call { grid-area: call; align-self: center; }
.kp-key.kp-tall { height: 26cqw; border-radius: 5.4cqw; }
.kp-key.kp-short { height: 16cqw; align-self: end; border-radius: 4.4cqw; }
.kp-key.kp-wide { height: 18cqw; border-radius: 5.4cqw; }
.kp-key.kp-small { height: 11cqw; align-self: start; border-radius: 5.5cqw; font-size: 6.6cqw; }
.kp-call.kp-bar { width: 100%; height: 16cqw; border-radius: 8cqw; }
.kp-e .kp-actions { margin-top: 3cqw; }
.kp:not(.kp-mini) .kp-key.kp-small { min-height: 44px; }
/* On a phone E sits on the bottom edge, full width, so the keys stay inside the thumb's reach. */
@media (max-width: 600px) {
  dialog.dial[data-layout="e"] { width: 100%; max-width: 100%; margin: auto 0 0; border: 0; border-radius: 0;
    background: transparent; padding-bottom: env(safe-area-inset-bottom); }
  dialog.dial[data-layout="e"] form.dial-form { border-radius: 24px 24px 0 0; border-bottom: 0; }
  dialog.dial[data-layout="e"] .kp { max-width: 430px; }
}

/* Under the number: A's spike train and D's dots (the country code in violet) */
.kp-trace-host { display: flex; justify-content: center; width: 100%; }
.kp-trace-host[hidden] { display: none; }
.kp-spikes { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 22px; margin: 2px 0; }
.kp-rest, .kp-spike { flex: none; width: 3px; border-radius: 2px; }
.kp-rest { height: 6px; background: var(--line); }
.kp-spike { background: var(--signal); transform-origin: bottom; }
.kp-spike.is-code, .kp-dot.is-code { background: var(--violet); }
.kp-spike.is-new { animation: kp-spike 0.4s ease-out; }
@keyframes kp-spike { 0% { transform: scaleY(0.2); } 60% { transform: scaleY(1.15); } }
.kp-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0; }
.kp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.kp-dot.is-next { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.kp-dot.is-new { animation: kp-dot 0.35s ease-out; }
@keyframes kp-dot { from { transform: scale(0.2); } }
.kp-mini .kp-spikes { height: 7cqw; gap: 1.2cqw; margin: 0 0 2cqw; }
.kp-mini .kp-rest, .kp-mini .kp-spike { width: 1.2cqw; }
.kp-mini .kp-rest { height: 2cqw; }
.kp-mini .kp-dots { gap: 2cqw; margin: 0 0 3cqw; }
.kp-mini .kp-dot { width: 3cqw; height: 3cqw; }
.kp-mini small { display: none; }
.kp-mini .kp-key, .kp-mini .kp-call, .kp-mini .kp-icon { cursor: inherit; }

/* Calm: reduced motion or quiet hours. Nothing moves; the lit state just appears. */
dialog.dial[data-calm="1"] *, .kp-mini, .kp-mini * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .kp, .kp *, .kp-tools *, .kp-sheet * { animation: none !important; transition: none !important; }
}

/* The picker: four live previews as radio cards (the Layout sheet, Homeostat, /welcome, the first-open question) */
dialog.compose.kp-sheet { width: min(480px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; }
.kp-sheet-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.kp-sheet-body h2 { margin: 0 auto 0 0; font: 600 17px/1.25 var(--text); }
.kp-sheet-body .dial-hint { margin: 0; text-align: left; }
.kp-sheet-body .primary.wide { margin-top: 6px; min-height: 44px; }
@media (max-width: 520px) {
  dialog.compose.kp-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; }
}
.kp-picker { min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.kp-picker legend:not(.sr-only) { margin-bottom: 8px; font-weight: 600; }
.kp-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kp-wide .kp-choices { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kp-choice { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1.5px solid var(--line);
  border-radius: 16px; background: var(--bubble); color: var(--ink); text-align: left; cursor: pointer; }
.kp-choice:hover { border-color: var(--faint); }
.kp-choice:has(.kp-choice-input:checked) { border: 2px solid var(--signal); padding: 9.5px; background: var(--signal-soft); }
.kp-choice:has(.kp-choice-input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.kp-choice-input { width: 20px; height: 20px; margin: 0; accent-color: var(--signal); }
.kp-preview { display: block; padding: 8px 6px; border-radius: 12px; background: var(--surface); }
.kp-preview .kp { max-width: 112px; margin: 0 auto; }
.kp-choice-words { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 2px 8px; }
.kp-choice-words b { font: 600 14px/1.3 var(--text); }
.kp-choice-words small { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
#kp-settings-msg { min-height: 20px; }
/* ===== W2-6b: growth, operations and the owner's view (status words, weekly page, cancel reason, takedowns, changelog) ===== */
.ns-overall small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; opacity: 0.92; }
.ns-list .ns-stale i { background: transparent; box-shadow: inset 0 0 0 2px #A0A7B5; }
.why-cancel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.why-cancel p { flex-basis: 100%; margin: 0 0 4px; }
.ch-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; align-items: end; margin: 8px 0 14px; }
.ch-form .ch-wide { grid-column: 1 / -1; }
.ch-form textarea { width: 100%; box-sizing: border-box; }
.ch-gate { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 12px; }
.ch-form [hidden] { display: none; }
.changelog-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.changelog-list li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.changelog-list time { display: block; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.changelog-list p { margin: 4px 0 0; }
@media (max-width: 560px) { .ch-form { grid-template-columns: 1fr; } }

/* Ask Axork in Daxolex Mail (mail-axork.js, mailask.py): shortcuts on an open email, the first-time note, the try-it card,
   and the email chip and price in the chatbot pop-out. Tokens only, so every shade keeps its contrast. */
.mx-ask { text-align: left; margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mx-ask[hidden] { display: none; }
.mx-ask-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mx-ask-head h2 { margin: 0; font: 600 15px/1.3 var(--ui-sans); color: var(--ink); }
.mx-ask-head .fine, .mx-relay { margin: 0; color: var(--muted); font-size: 13px; }
.mx-ask-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.mx-act { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 14px/1.25 var(--ui-sans); text-align: left; cursor: pointer; }
.mx-act:hover { border-color: var(--accent); background: var(--accent-soft); }
.mx-act svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mx-act span { display: grid; }
.mx-act small { color: var(--muted); font-size: 12px; font-weight: 400; }
.mx-relay { text-align: left; }
.mx-relay .link { font-size: 13px; }
.mx-note { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mx-note[hidden] { display: none; }
.mx-note p { margin: 0; flex: 1 1 280px; font-size: 14px; }
.mx-note-off { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; min-height: 24px; }
.mx-note-acts { display: flex; gap: 8px; }
.mx-card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--bubble); color: var(--ink); }
.mx-card p { margin: 0; flex: 1 1 260px; font-size: 14px; }
.mx-card-acts { display: flex; align-items: center; gap: 6px; }
.mx-card-acts .link { font-size: 13px; color: var(--muted); }
.mx-card-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mx-dock { display: grid; gap: 6px; text-align: left; }
.mx-chip { display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; padding: 3px 10px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; }
.mx-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-chip svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mx-dock-price { color: var(--ink); font-size: 13px; }
.mx-dock-note { color: var(--muted); font-size: 12px; }
.mx-chiasmar { display: inline-flex; margin-top: 6px; }
@media (max-width: 560px) { .mx-act { flex: 1 1 100%; } .mx-ask { padding: 10px 12px; } }
@media (pointer: coarse) { .mx-act, .mx-note-acts button { min-height: 44px; } .mx-card-acts .link, .mx-relay .link { min-height: 24px; } }
/* ==========================================================================================================================
   W8-P cost tiers, light to heavy (billing.cost_tier, plans.json message_prices.tiers). The colours are the --cost-1..5
   tokens (theme.js solves them to 4.5:1 at every shade; these are the fallbacks), always with the dots and the tier word.
   .cost-tier[data-tier] is shared: the model sheet, the composer's "Counts as 2 messages", Purchase Facts rows, the Axon
   builder and the Steady State swap chip. */
.cost-tier { color: var(--cost-1); }
.cost-tier[data-tier="2"] { color: var(--cost-2); }
.cost-tier[data-tier="3"] { color: var(--cost-3); }
.cost-tier[data-tier="4"] { color: var(--cost-4); }
.cost-tier[data-tier="5"] { color: var(--cost-5); }
.axc-chip.cost-tier { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid currentColor;
  font-variant-numeric: tabular-nums; }
.axc-chip.axc-rate.cost-tier { background: transparent; }
.axc-chip.axc-rate.cost-tier[data-path="lite"] { color: var(--muted); border-color: var(--line); }
.cost-dots { letter-spacing: -1px; font-size: 0.85em; }
.cost-word { color: inherit; }
.axc-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px auto 0; width: 100%;
  max-width: var(--composer-w, 760px); padding: 0 6px; font-size: 13px; color: var(--muted); }
.axc-steps .axc-chip { font-size: 12.5px; padding: 1px 8px; border-radius: 999px; }
.axc-steps-why { min-width: 0; }
.axc-chip.axc-msgs { background: var(--hover); color: var(--ink); }
.cp-cost { display: block; grid-column: 1 / -1; margin-top: 2px; }
.cp-cost .axc-chip { font-size: 12px; padding: 0 7px; border-radius: 999px; }
@media print { .cost-tier { color: #000 !important; } }
/* ==========================================================================================================================
   chat-interact: Axork Chat interactions (static/chat-interact.js, docs/chat-interactions.md). The tasks pill, split
   checklist, question cards, spec builder, live plan, two options, the "how sure" strip, adjusters and the branch map.
   True Tint tokens only (light and dark follow the shade); calm, short motion that stops under reduced motion.
   ========================================================================================================================== */
.ix-bar { position: relative; width: 100%; max-width: var(--composer-w, 760px); margin: 0 auto 6px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px; padding: 0 6px; }
.ix-bar:empty, .ix-bar:not(:has(> :not([hidden]):not(.sr-only):not(.ix-chips:empty))) { margin: 0; }
.ix-chips { display: contents; }
.ix-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 13px/1.2 var(--ui-sans); box-shadow: var(--shadow); }
.ix-pill:hover { border-color: var(--faint); }
.ix-pill .ix-wait { color: var(--muted); }
.ix-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.ix-pulse.on { background: var(--accent); animation: ix-pulse 1.6s ease-in-out infinite; }
@keyframes ix-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
.ix-task-list { position: absolute; bottom: calc(100% + 6px); left: 6px; right: 6px; z-index: 30; list-style: none; margin: 0; padding: 6px;
  display: grid; gap: 4px; max-height: 50vh; overflow: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); animation: ix-rise .18s ease-out; }
.ix-task { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); }
.ix-task:hover { background: var(--hover); }
.ix-task-main { display: grid; min-width: 0; }
.ix-task-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-task-note { font-size: 12.5px; color: var(--muted); }
.ix-task[data-state="waiting"] .ix-task-note { color: var(--ink); }
.ix-glyph { display: inline-flex; min-width: 28px; justify-content: center; }
.ix-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 13px/1.2 var(--ui-sans); cursor: pointer; }
.ix-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ix-chip small { color: var(--muted); font-weight: 400; }
.ix-chip:hover { border-color: var(--accent); }
.ix-chip.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ix-chip-x { display: inline-flex; border: 0; background: none; color: inherit; padding: 2px; border-radius: 50%; min-width: 24px; min-height: 24px;
  align-items: center; justify-content: center; }
.ix-chip-x svg { width: 14px; height: 14px; }
.ix-split-chip { border-color: var(--accent); animation: ix-rise .2s ease-out; }
.ix-map-btn { margin-left: auto; }
.ix-map-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ix-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; margin: 10px 0;
  display: grid; gap: 10px; animation: ix-rise .22s ease-out; max-width: 100%; }
.ix-bar > .ix-card { position: absolute; bottom: calc(100% + 6px); left: 6px; right: 6px; z-index: 31; box-shadow: var(--shadow); margin: 0; }
.ix-card-head { display: grid; gap: 2px; }
.ix-card h3 { margin: 0; font: 600 17px/1.3 var(--display); }
.ix-eyebrow { margin: 0; font: 600 11.5px/1.3 var(--ui-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.ix-price { font-size: 12.5px; color: var(--muted); margin: 0; }
.ix-note { margin: 0; font-size: 13px; color: var(--muted); }
.ix-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ix-actions .primary, .ix-actions .ghost { min-height: 36px; }
.ix-err { color: var(--danger); }
.ix-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ix-q { animation: ix-in .32s ease-out both; animation-delay: calc(var(--ix-i, 0) * 140ms); }
.ix-q-set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
.ix-q-set legend { font-weight: 600; padding: 0; margin-bottom: 2px; }
.ix-q-hint { color: var(--muted); font-size: 12px; }
.ix-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ix-opt { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); cursor: pointer; transition: border-color .15s, background-color .15s;
  animation: ix-in .26s ease-out both; animation-delay: calc(var(--ix-i, 0) * 50ms); }
.ix-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ix-opt:hover { border-color: var(--faint); }
.ix-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ix-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.ix-opt:has(input:disabled) { cursor: default; opacity: .8; }
.ix-tick { position: relative; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--faint); flex: none; background: var(--surface);
  transition: background-color .15s, border-color .15s; }
.ix-opt input[type="radio"] + .ix-tick { border-radius: 50%; }
.ix-opt input:checked + .ix-tick { background: var(--accent); border-color: var(--accent); }
.ix-opt input:checked + .ix-tick::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid var(--accent-ink);
  border-width: 0 2px 2px 0; transform: rotate(45deg) scale(1); animation: ix-tick .22s ease-out; }
@keyframes ix-tick { from { transform: rotate(45deg) scale(0); } 60% { transform: rotate(45deg) scale(1.2); } to { transform: rotate(45deg) scale(1); } }
.ix-opt-small { min-height: 30px; padding: 3px 10px 3px 8px; font-size: 13px; }
.ix-opt-big { padding: 8px 16px 8px 12px; font-weight: 600; }
.ix-other-in { min-height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--surface); color: var(--ink);
  font: inherit; min-width: min(240px, 100%); flex: 1 1 200px; }
.ix-note-label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.ix-note-in { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.ix-card.answered { opacity: .85; }
.ix-card.answered .ix-eyebrow { color: var(--ok); }
.ix-group { list-style: none; margin: 14px 0 4px; }
.ix-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ix-group-count { font-size: 13px; color: var(--muted); }
.ix-checklist { list-style: none; margin: 8px 0; padding: 10px 12px; display: grid; gap: 4px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); }
.ix-check { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 30px; }
.ix-check-word { font-size: 12.5px; color: var(--muted); }
.ix-check[data-state="done"] > span:nth-child(2) { color: var(--muted); }
.ix-check[data-state="running"] > span:nth-child(2) { font-weight: 600; }
.ix-ticked .ix-glyph { animation: ix-pop .32s ease-out; }
@keyframes ix-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.ix-part-label { margin: 0 0 4px auto; width: max-content; max-width: 100%; font: 600 11.5px/1.3 var(--ui-sans); letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); }
.ix-live-plan { margin: 4px 0 10px; }
.ix-spec-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ix-spec-main { display: grid; gap: 10px; min-width: 0; }
.ix-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; counter-reset: ixstep; }
.ix-steps li { counter-increment: ixstep; }
.ix-step-btn { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; min-height: 30px; padding: 3px 10px;
  font: 500 12.5px/1.2 var(--ui-sans); }
.ix-step-btn::before { content: counter(ixstep) " · "; }
.ix-steps li.on .ix-step-btn { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ix-steps li.done .ix-step-btn { color: var(--ok); }
.ix-steps li.done .ix-step-btn::before { content: "✓ "; }
.ix-spec-step { animation: ix-slide .24s ease-out; }
.ix-spec-preview { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; display: grid; gap: 4px; font-size: 14px; min-width: 0; }
.ix-spec-preview h4 { margin: 0 0 4px; font: 600 15px/1.3 var(--display); }
.ix-prev-k { margin: 6px 0 0; font-weight: 600; font-size: 13px; }
.ix-spec-preview ul { margin: 0; padding-left: 18px; }
.ix-prev-item { animation: ix-in .22s ease-out both; }
.ix-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ix-plan-step { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; min-height: 40px; padding: 2px 6px;
  border-radius: var(--radius-sm); animation: ix-in .26s ease-out both; animation-delay: calc(var(--ix-i, 0) * 80ms); }
.ix-plan-step input { width: 18px; height: 18px; accent-color: var(--accent); }
.ix-plan-step.dropped .ix-plan-text { text-decoration: line-through; color: var(--muted); }
.ix-move { width: 36px; height: 36px; }
.ix-move svg { width: 18px; height: 18px; }
.ix-sure { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 8px 0 2px; padding: 8px 12px; font-size: 13px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--ink); }
.ix-sure small { color: var(--muted); }
.ix-sure-level { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ix-sure-meter { display: inline-flex; gap: 2px; align-items: flex-end; }
.ix-sure-meter i { width: 5px; border-radius: 2px; background: var(--line); }
.ix-sure-meter i:nth-child(1) { height: 7px; } .ix-sure-meter i:nth-child(2) { height: 11px; } .ix-sure-meter i:nth-child(3) { height: 15px; }
.ix-sure-meter i.on { background: var(--accent); }
.ix-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.ix-ab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ix-ab-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); min-width: 0;
  transition: border-color .2s, opacity .2s, transform .2s; animation: ix-in .26s ease-out both; }
.ix-ab-col[data-side="b"] { animation-delay: 80ms; }
.ix-ab-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ix-ab-tag { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-weight: 700; }
.ix-ab-col.picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ix-ab-col.picked .ix-ab-tag { background: var(--accent); color: var(--accent-ink); }
.ix-ab-col.unpicked { opacity: .62; }
.ix-like-row { align-items: center; }
.ix-like-side { font-size: 12.5px; font-weight: 600; min-width: 56px; }
.ix-picked-note { margin-top: 6px; }
.ix-confirm-q { margin: 0; font-weight: 500; }
.ix-summary { display: grid; gap: 6px; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--bubble); max-width: min(560px, 100%);
  margin-left: auto; font-size: 14px; }
.ix-summary dl { margin: 0; display: grid; gap: 4px; }
.ix-summary dt { font-weight: 600; font-size: 13px; }
.ix-summary dd { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.ix-summary ol { margin: 0; padding-left: 18px; }
.ix-built { display: block; }
.ix-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 12.5px; font-weight: 500; }
.ix-tag.strong { background: var(--accent); color: var(--accent-ink); }
.ix-adjust { display: grid; gap: 6px; margin: 6px 0 0; animation: ix-rise .18s ease-out; }
.ix-map { position: fixed; right: 16px; top: calc(var(--chrome-h) + 12px); z-index: 60; width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - var(--chrome-h) - 40px); overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 8px; animation: ix-rise .2s ease-out; }
.ix-map-head { display: flex; justify-content: space-between; align-items: center; }
.ix-map-head h3 { margin: 0; font: 600 16px/1.3 var(--display); }
.ix-map-list { list-style: none; margin: 0; padding: 0 0 0 10px; display: grid; gap: 2px; border-left: 2px solid var(--line); }
.ix-map-node { position: relative; display: grid; gap: 2px; padding: 4px 0 4px 12px; animation: ix-in .22s ease-out both;
  animation-delay: calc(var(--ix-i, 0) * 40ms); }
.ix-map-dot { position: absolute; left: -16px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--faint); }
.ix-map-node.fork .ix-map-dot { border-color: var(--accent); background: var(--accent); }
.ix-map-go { display: flex; gap: 8px; align-items: baseline; text-align: left; border: 0; background: none; color: var(--ink); padding: 6px 4px;
  border-radius: var(--radius-sm); min-height: 36px; font: inherit; }
.ix-map-go:hover { background: var(--hover); }
.ix-map-n { color: var(--muted); font-size: 12px; min-width: 18px; }
.ix-map-meta { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 30px; }
.ix-flash { animation: ix-flash 1.2s ease-out; border-radius: var(--radius); }
@keyframes ix-flash { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@keyframes ix-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ix-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ix-slide { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.ix-askpref { border: 0; margin: 6px 0 0; padding: 6px 10px 2px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ix-askpref legend { font-size: 12px; color: var(--muted); padding: 0; margin-bottom: 4px; }
.ix-askpref small { width: 100%; color: var(--muted); }
.ix-seg { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; cursor: pointer; }
.ix-seg:has(input:checked) { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ix-seg input { accent-color: var(--accent); margin: 0; }
.ix-split-offer ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ix-split-offer li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; }
.ix-split-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700; }
@media (max-width: 640px) {
  .ix-ab, .ix-spec-grid { grid-template-columns: minmax(0, 1fr); }
  .ix-spec-preview { border-left: 0; border-top: 3px solid var(--accent); padding: 10px 0 0; }
  .ix-task-main { grid-column: 2 / -1; }
  .ix-task > button { grid-row: 2; grid-column: 3; }
  .ix-task > button + button { grid-column: 4; }
  .ix-card { padding: 12px; }
  .ix-pill, .ix-chip, .ix-opt, .ix-step-btn, .ix-seg { min-height: 44px; }
  .ix-map { right: 16px; left: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-pulse.on, .ix-card, .ix-q, .ix-opt, .ix-task-list, .ix-split-chip, .ix-ab-col, .ix-spec-step, .ix-prev-item, .ix-plan-step, .ix-map,
  .ix-map-node, .ix-adjust, .ix-ticked .ix-glyph, .ix-flash { animation: none !important; }
  .ix-opt input:checked + .ix-tick::after { animation: none !important; }
  .ix-opt, .ix-tick, .ix-ab-col { transition: none !important; }
}
/* W9-A model add-ons (static/addons.js): the add-on card, the reserve ask, the Billing list and the Homeostat setting. */
.ad-card .fine, .ad-card p, .ad-reserve .fine, .ad-reserve p { text-align: left; }
.ad-list { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.ad-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.ad-tick { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 32px; }
.ad-tick input { width: 18px; height: 18px; accent-color: var(--accent); }
.ad-chip { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-size: 12px; font-weight: 600; }
.ad-how { margin-top: 8px; display: grid; gap: 6px; }
.ad-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-sizes button { min-height: 32px; }
.ad-sizes button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ad-slide { display: grid; gap: 4px; font-size: 13px; }
.ad-slide input { width: 100%; accent-color: var(--accent); }
.ad-break { margin: 0; }
.ad-sum { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.ad-sum p { margin: 2px 0; }
.ad-facts { display: grid; gap: 10px; margin-top: 10px; }
.ad-err { color: var(--danger, #b42318); }
.axc-chip.addon { background: var(--accent-soft); color: var(--accent); }
.axc-chip.grand { background: var(--accent-soft); color: var(--ink); }
.axc-lock-addon { margin-top: 6px; }
.bc-addons { margin-top: 16px; }
.ad-table td, .ad-table th { vertical-align: top; }
.ad-nudge { padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink); }
.ad-setting { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 6px 0 12px; }
.ad-setting label { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.st-labels { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (pointer: coarse) {
  .ad-sizes button, .ad-tick, .ad-setting label, .ad-card .ss-ask > * , .ad-reserve .ss-ask > * { min-height: 44px; }
}
/* Locigram Web (/search, static/search.js): one box, results with a 1-13 · A-D chip. Tokens only. */
.ws-main { width: min(820px, 100%); }
.ws-form { display: flex; gap: 8px; align-items: stretch; margin: 12px 0 8px; }
.ws-box { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); }
.ws-box svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.ws-box input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 10px 0; }
.ws-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ws-form .primary { min-height: 44px; padding: 0 18px; }
.ws-engines { margin: 4px 0 12px; color: var(--muted); }
.ws-overview { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--surface);
  padding: 12px 16px; margin: 0 0 16px; }
.ws-overview h2 { font-size: 15px; margin: 0 0 6px; }
.ws-overview p { margin: 0 0 6px; color: var(--ink); line-height: 1.55; }
.ws-overview p.fine { color: var(--muted); margin: 0; }
.ws-overview[data-state]:not([data-state="ready"]) #ws-ov-text { color: var(--muted); }
.ws-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ws-result { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 14px; overflow-wrap: anywhere; }
.ws-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--muted); }
.ws-n { font-variant-numeric: tabular-nums; color: var(--muted); }
.ws-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 99px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--accent); background: var(--accent-soft); cursor: help; }
.ws-chip[data-track="C"], .ws-chip[data-track="D"] { color: var(--ink); background: var(--hover); }
.ws-domain { color: var(--ink); }
.ws-nudge { padding: 0 6px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); }
.ws-title { font-size: 17px; margin: 6px 0 4px; font-family: var(--text); line-height: 1.35; }
.ws-title a { color: var(--accent); text-decoration: none; }
.ws-title a:hover, .ws-title a:focus-visible { text-decoration: underline; }
.ws-snippet { margin: 0 0 6px; color: var(--ink); line-height: 1.5; }
.ws-found { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.ws-engine { font-size: 12px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.ws-empty { padding: 24px 4px; color: var(--muted); }
.ws-about { margin-top: 24px; color: var(--muted); }
.ws-about summary { cursor: pointer; min-height: 32px; color: var(--ink); }
.ws-about p { line-height: 1.55; }
@media (max-width: 520px) {
  .ws-form { flex-direction: column; }
  .ws-title { font-size: 16px; }
}
/* ==========================================================================================================================
   Accessibility and phone pass (C157-C162). Appended on purpose: earlier rules stay as they are and these win by order or
   by :where() (zero specificity) plus !important only where a component removed something people need. Checked by
   tools/a11y_check.js (axe-core in a real browser) and tests/test_a11y_static.py.
   ========================================================================================================================== */

/* Skip to content (2.4.1): added by theme.js as the first link on the page, shown only while it has focus. */
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 2147483647; transform: translateY(-160%);
  padding: 12px 18px; border-radius: 12px; background: var(--accent); color: var(--accent-ink);
  font: 600 15px/1.2 var(--text); text-decoration: none; box-shadow: var(--shadow);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 2px solid var(--ink); outline-offset: 2px; }
main:focus, [role="main"]:focus { outline: none; }

/* Keyboard focus always shows (2.4.7, 2.4.11), even where a component set outline: none for the mouse. Fields draw the ring
   inside their own edge so a parent with overflow: hidden can't clip it. */
:where(a[href], button, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [role="menuitem"],
  [role="option"], [role="switch"], [role="checkbox"], [role="radio"], input[type="checkbox"], input[type="radio"],
  input[type="range"], input[type="file"]):focus-visible {
  outline: 2px solid var(--accent) !important; outline-offset: 2px !important;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea,
  [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--accent) !important; outline-offset: -2px !important;
}

/* Target size (2.5.8): nothing tappable is smaller than 24 x 24 px. */
:where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { min-height: 24px; }
:where(input[type="checkbox"], input[type="radio"]) { min-width: 18px; min-height: 18px; }
label.check { min-height: 24px; }
:where(button.link, .ghost.tiny, .tx-add, .axc-meter-btn) { min-height: 24px; min-width: 24px; }
.workspace-text-link, .workspace-bottom-note p a, a.ghost.tiny { display: inline-flex; align-items: center; min-height: 24px; }
.conv-list[tabindex] { min-height: 24px; }
/* The tucked Quick actions button stays big enough to hit: 24 px with a mouse, 29 px to tap. */
.omni-fab.tucked:not(.near):not(.open) .omni-core { transform: translateX(28px) scale(0.5); }
.omni-fab.tucked.left:not(.near):not(.open) .omni-core { transform: translateX(-28px) scale(0.5); }
@media (pointer: coarse) {
  .omni-fab.tucked:not(.near):not(.open) .omni-core { transform: translateX(20px) scale(0.6); }
  .omni-fab.tucked.left:not(.near):not(.open) .omni-core { transform: translateX(-20px) scale(0.6); }
}

/* Phones (C160): touch targets reach 44 px. Only one-line controls (no two child elements): a card-like button in a
   scrolling column must keep its own height, since a set min-height lets a flex item shrink below its content. */
@media (pointer: coarse) and (max-width: 600px) {
  :where(button, [role="button"], .btn, a.button, nav a[href], [role="tab"], summary):not(:has(> * + *)) { min-height: 44px; }
  :where(button, [role="button"], nav a[href], [role="tab"]):has(> svg:first-child + :last-child) { min-height: 44px; }  /* icon + word */
  :where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"])) {
    min-height: 44px; }
  :where(button, [role="button"]) { min-width: 44px; }
  :where(input[type="checkbox"], input[type="radio"]) { min-width: 22px; min-height: 22px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: max(16px, 1em) !important; } /* iOS zooms in under 16 px */
}

/* Camrive Places drawer (C137): under 900 px the Places column is a drawer from the left, opened by the Places button. */
.tx-places-btn, .tx-scrim { display: none; }
.tx-places-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 900px) {
  .tx-places-btn { display: inline-flex; align-items: center; gap: 6px; }
  .tx-side {
    display: block; position: fixed; inset: 0 auto 0 0; z-index: 520; width: min(320px, 86vw); padding: 14px 10px 20px;
    overflow-y: auto; border: 0; border-right: 1px solid var(--line); border-radius: 0 18px 18px 0; box-shadow: var(--shadow);
    transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
  }
  .tx-side > :not(.tx-place) { display: block; }
  .tx-side > .tx-side-h, .tx-side > .tx-send { display: flex; }
  .tx-side .tx-place { width: 100%; }
  .tx-side .tx-folder { display: flex; }
  .tx.places-open .tx-side { transform: none; visibility: visible; transition: transform .22s ease; }
  .tx-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 510; background: rgba(0, 0, 0, .35); }
  .tx-empty { grid-column: 1 / -1; }
}
@media (max-width: 900px) and (pointer: coarse) { .tx-side .tx-place, .tx-side .tx-send { min-height: 44px; } }
@media (pointer: coarse) { .tx-x { visibility: visible; } }          /* no hover on touch: show the delete mark */

/* Top bar on phones (C160): the places become icons (the open one keeps its word) so they fit instead of scrolling off
   with cut-off names; each keeps its full name for screen readers and as a tooltip (lingo.js). */
@media (max-width: 600px) {
  .page-top .mark-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app-nav a.lingo:not([aria-current="page"]) { font-size: 0; gap: 0; padding-inline: 9px; justify-content: center; min-width: 40px; }
  .app-nav a.lingo .lingo-ico { width: 19px; height: 19px; }
}

/* Text on a danger fill uses --danger-ink (white on the deep light-mode red, near-black on the soft dark-mode red). */
.primary.danger-btn, .ax-call-btn.danger, .mic-btn.rec, .dw-side-dot, .dq-unread, .toast.bad { color: var(--danger-ink); }
/* Text on an accent fill uses --accent-ink: white on the light-mode blue, dark on the bright dark-mode blue. */
.mail-quick-filters button[aria-pressed="true"] { color: var(--accent-ink); }
/* Links nobody coloured were the browser's #0000EE, unreadable on dark shades: they take the accent. */
:where(a[href]) { color: var(--accent); }

/* Synaram Spaces cards: the title is the card's button (gangspace.js). */
.gs-card-open { all: unset; display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; border-radius: 6px; }
.gs-card-open b { font: inherit; font-weight: 700; }

/* Checkout dialogs on /plans (Plan terms, Before you pay): `dialog.compose { padding: 0 }` beat `.terms-dialog`'s padding,
   so text touched the edges and the Today / Then / Renews tiles ran off on phones. */
dialog.compose.terms-dialog { padding: 20px 22px; }
@media (max-width: 600px) {
  dialog.compose.terms-dialog { padding: 18px 16px; max-height: calc(100% - 24px); overflow-y: auto; }
  dialog.compose.terms-dialog .t-money { gap: 6px; }
  dialog.compose.terms-dialog .t-actions { flex-wrap: wrap; }
}

/* The bell on phones: a little smaller and close to the edge, so it covers less of the page (bell.js). */
@media (max-width: 600px) {
  .ax-bell { width: 46px; height: 46px; }
  .ax-bell svg { width: 22px; height: 22px; }
}

/* Reduced motion (2.3.3, C162): with the system setting on, nothing slides, pulses, flies or glides. Progress still shows
   its value at once; theme.js turns smooth scrolls into jumps. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}

/* ===================================================================== One number, one account (phone_change.py) */
.reclaim-box { display: grid; gap: 8px; margin-top: 12px; }
.reclaim-box[hidden], #phone-code-form[hidden], #phone-reclaim[hidden] { display: none; }
#phone-claims:empty { display: none; }

/* ===================================================================== W3-M2: referral status (C023, settings.js) */
.ref-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.ref-list[hidden] { display: none; }
.ref-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ref-item small { display: block; color: var(--muted); }
.ref-state { flex: none; min-width: 72px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-align: center; color: var(--ink); border: 1px solid var(--line); }
.ref-item[data-state="released"] .ref-state { color: var(--ok); }
.ref-item[data-state="void"] .ref-state, .ref-item[data-state="reversed"] .ref-state { color: var(--danger); }

/* ===================================================================== W3-M1: Your plan on /billing, rights notices (renewals.py) */
.bc-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 16px; margin: 8px 0 14px; }
.bc-plan dt { color: var(--muted); font-size: 13px; }
.bc-plan dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }
.bc-plan-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.bc-plan-actions .ghost { min-height: 44px; }
.bc-cancel { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: var(--surface); }
.bc-cancel[hidden], .bc-plan-actions [hidden] { display: none; }
.bc-rights { margin-top: 18px; }
.bc-rights h3 { margin: 0 0 6px; font-size: 16px; }
.bc-rights ul, .t-rights ul { margin: 0; padding-left: 18px; color: var(--muted); }
.bc-rights li, .t-rights li { margin: 4px 0; }
.t-rights { margin: 10px 0; }
.t-rights b { display: block; margin-bottom: 4px; color: var(--ink); }

/* ===================================================================== W3-U1 screens (U-01 to U-06, OW-12c) */
/* U-02 Daxolex Mail: the new-alias box is one field (name + @domain) that shrinks with the column; Add drops under it
   when the column is too narrow for both. */
#alias-form { flex-wrap: wrap; gap: 6px; }
#alias-form[hidden] { display: none; }
.alias-field { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); overflow: hidden; }
.alias-form .alias-field input { flex: 1 1 auto; width: auto; min-width: 3em; border: 0; border-radius: 0; background: transparent; }
.alias-field #alias-domain { flex: none; padding: 0 8px 0 2px; color: var(--muted); white-space: nowrap; }
.alias-field:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
#alias-form > button { flex: none; margin-left: auto; }
#mail-side-more { display: none; }
@media (max-width: 680px) {
  .mail-app #mail-side-more { display: inline-flex; flex: none; padding: 8px 12px; min-height: 44px; }
  .mail-app.side-open .mail-side { flex-wrap: wrap; overflow: visible; }
  .mail-app.side-open .mail-side > .side-block:not([hidden]) { display: block; flex: 1 0 100%; min-width: 0; }
}

/* U-03 Synaram: the optional Matrix panel is folded until opened. */
.mx-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px;
  cursor: pointer; list-style: none; }
.mx-fold > summary::-webkit-details-marker { display: none; }
.mx-fold > summary::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border: solid currentColor;
  border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.15s; }
.mx-fold[open] > summary::after { transform: rotate(-135deg); }
.mx-fold[open] > summary { margin-bottom: 6px; }

/* OW-12c owner dashboard → Launch switches */
.sw-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sw-row label { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; }
.sw-row input { margin-top: 3px; width: 18px; height: 18px; }
.sw-row span { display: grid; gap: 2px; }
.sw-row small { color: var(--muted); }

/* U-01 Chiasmar: every event shows its title. Long blocks: title, then the start time. Short ones (under 50 minutes):
   one line with the time first, and the whole title in a label under the block on hover or keyboard focus. */
.cal-block { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.cal-block .cal-block-title { order: -1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cal-block .cal-block-when { color: var(--muted); font-size: 11px; }
.cal-block.short { flex-direction: row; align-items: center; gap: 6px; padding: 1px 6px 1px 8px; overflow: visible; white-space: nowrap; }
.cal-block.short .cal-block-title { order: 0; min-width: 0; flex: 1 1 auto; }
.cal-block.short .cal-block-when { flex: none; color: var(--ink); font-weight: 600; font-size: 11px; }
.cal-block.short[data-tip]:hover::after, .cal-block.short[data-tip]:focus::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; width: max-content; max-width: 240px;
  padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: 0 6px 18px rgba(16, 22, 42, 0.18); font-size: 12px; font-weight: 600; white-space: normal; }
.cal-block.short:hover, .cal-block.short:focus { z-index: 4; }
.cal-col:nth-child(n + 15) .cal-block.short[data-tip]::after { left: auto; right: 0; }
.cal-fovea .cal-line-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-pill { cursor: default; }

/* U-04 Camrive: real previews on big tiles (first page of PDFs and documents, the first lines of text and code), with the
   file-type badge in a corner; a preview that can't be made falls back to the badge alone (drive.js). */
.tx-thumb { position: relative; }
.tx-prev { position: absolute; inset: 0; display: block; background: #fff; }
.tx-prev img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tx-prev .tx-ext { position: absolute; right: 4px; bottom: 4px; min-width: 0; height: 18px; padding: 0 5px; border-radius: 5px;
  font-size: 9px; box-shadow: 0 1px 3px rgba(16, 22, 42, 0.25); }
.tx-info-big .tx-prev { position: relative; inset: auto; height: auto; }
.tx-info-big .tx-prev img { height: auto; max-height: 320px; object-fit: contain; }

/* U-06 Chiasmar Axon view: events as coloured segments as long as they last, free time labelled, long free stretches
   folded, and a strip for the next 3 days (calendar.js renderAxon, nextDays). */
.cal-axon-svg .ax-seg { fill: var(--node); fill-opacity: 0.32; stroke: var(--node); stroke-opacity: 0.8; stroke-width: 1.5; }
.cal-axon-svg .ax-meta { font-size: 11.5px; fill: var(--muted); font-family: var(--ui-sans, sans-serif); stroke: none; }
.cal-axon-svg .ax-label { font-weight: 600; }
.cal-axon-svg .ax-free { font-size: 12px; fill: var(--muted); font-style: italic; stroke: none; }
.cal-axon-svg .ax-fold-band { fill: color-mix(in srgb, var(--accent) 6%, transparent); stroke: none; }
.cal-axon-svg .ax-tract-fold { stroke-dasharray: 3 5; }
.cal-axon-svg .ax-fold-mark { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; }
.ax-next { margin: 8px 0 10px; }
.ax-next h3 { margin: 0 0 8px; font-size: 14px; }
.ax-next-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ax-day { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.ax-day:hover { border-color: var(--accent); }
.ax-day b { font-size: 13px; }
.ax-day-sum { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-day-bar { position: relative; display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; }
.ax-day-bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--dot, var(--accent)); }
@media (max-width: 600px) { .ax-next-days { grid-template-columns: minmax(0, 1fr); } }

/* ===================================================================== W3-T1: trust, identity and support
   Support desk reply-by chips, the support promise table, help articles, the passkey never-share note, and the
   data-rights panels (Homeostat and /privacy-desk). Colours are tokens only. */
.st.overdue, .st.urgent { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.sp-promise-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 14.5px; }
.sp-promise-table th, .sp-promise-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sp-promise-table td:last-child { white-space: nowrap; }
.help-articles { display: contents; }
.pk-never-share { font-size: 13px; color: var(--muted); }
.dsr-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.dsr-list li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--hover); }
.dsr-list small { color: var(--muted); }
.dsr-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dsr-form select, .dsr-form input { min-height: 36px; flex: 1 1 180px; }
.dsr-desk { max-width: 1100px; margin: 0 auto; padding: 16px; }
.dsr-desk table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dsr-desk th, .dsr-desk td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dsr-desk .st.due-soon { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 600px) {
  .sp-promise-table td:last-child { white-space: normal; }
  .dsr-desk table, .dsr-desk tbody, .dsr-desk tr, .dsr-desk td { display: block; }
  .dsr-desk thead { display: none; }
  .dsr-desk tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .dsr-desk td { border: 0; padding: 2px 0; }
}

/* ===================================================================== W4-B1: the Breaker box (breakers.py)
   The panel in the Control centre (a box of breaker cards, each with a lever and a lit lamp), the maintenance page, the
   quiet planned-maintenance banner, the owners' "on for others" strip, the chat's maintenance answer and the model
   sheet's chip. Colours are tokens only; motion stops under prefers-reduced-motion. */
.bk-box { display: grid; gap: 10px; }
.bk-state { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--hover); color: var(--ink); }
.bk-state[data-kind="off"] { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.bk-state[data-kind="soon"] { background: var(--accent-soft); color: var(--accent); }
.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.bk-panel { display: grid; gap: 8px; min-width: 0; padding: 14px; border-radius: 18px; border: 2px solid var(--line);
  background: color-mix(in srgb, var(--ink) 10%, var(--surface)); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--ink) 5%, transparent); }
.bk-head { margin: 8px 0 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.bk-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.bk-group { border: 0; margin: 0 0 6px; padding: 0; min-width: 0; }
.bk-group legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 0 4px; }
.bk-breaker { display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 10px 8px; text-align: center;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.bk-breaker[data-state="off"] { border-color: var(--danger); }
.bk-breaker[data-state="scheduled"] { border-color: var(--accent); }
.bk-name { font-size: 13.5px; overflow-wrap: anywhere; }
.bk-line { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.bk-breaker[data-state="off"] .bk-line { color: var(--danger); font-weight: 600; }
.bk-breaker[data-state="scheduled"] .bk-line { color: var(--accent); font-weight: 600; }
.bk-breaker.bk-main { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "sw lamp name edit" "sw lamp line edit";
  justify-items: start; align-items: center; text-align: left; padding: 14px 16px; border-width: 2px; column-gap: 14px; }
.bk-main .bk-name { grid-area: name; font-size: 16px; }
.bk-main .bk-line { grid-area: line; font-size: 13px; }
.bk-main .bk-switch { grid-area: sw; }
.bk-main .bk-lamp { grid-area: lamp; }
.bk-main .bk-edit { grid-area: edit; }
.bk-lock { font-size: 11.5px; color: var(--muted); }
.bk-switch { position: relative; flex: 0 0 auto; width: 36px; height: 54px; min-height: 44px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--ink) 70%, var(--surface)); background: color-mix(in srgb, var(--ink) 85%, var(--surface)); }
.bk-main .bk-switch { width: 46px; height: 68px; }
.bk-switch:disabled { cursor: not-allowed; opacity: .55; }
.bk-lever { position: absolute; left: 3px; right: 3px; height: 44%; border-radius: 5px; top: 3px; background: var(--surface);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 30%, transparent); transition: top .18s ease; }
.bk-switch[aria-checked="false"] .bk-lever { top: calc(56% - 3px); }
.bk-lamp { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.bk-breaker[data-state="off"] .bk-lamp { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.bk-breaker[data-state="scheduled"] .bk-lamp { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bk-side { display: grid; gap: 12px; }
.bk-card { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.bk-card h3 { margin: 0 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bk-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.bk-sum small { color: var(--muted); overflow-wrap: anywhere; }
.bk-tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.bk-tag[data-state="scheduled"] { background: var(--accent-soft); color: var(--accent); }
.bk-dlg .bk-field { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; margin: 0 0 8px; }
.bk-dlg .bk-field legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.bk-dlg input[type="datetime-local"], .bk-dlg select, .bk-dlg textarea { width: 100%; min-height: 36px; font: inherit; }
.bk-err:empty, .bk-preview:empty { display: none; }
@media (max-width: 900px) { .bk-layout { grid-template-columns: minmax(0, 1fr); } .bk-side { order: -1; } }
@media (max-width: 600px) {
  .bk-panel { padding: 10px; }
  .bk-rail { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .bk-breaker.bk-main { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "sw lamp name" "sw lamp line" "edit edit edit"; }
}
@media (pointer: coarse) { .bk-switch { min-width: 44px; } .bk-edit { min-height: 44px; } }

.mt-page { min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--ink); padding: 16px; }
.mt-main { max-width: 520px; width: 100%; text-align: center; display: grid; gap: 10px; justify-items: center; }
.mt-main h1 { font-family: var(--display); font-size: clamp(24px, 6vw, 32px); margin: 8px 0 0; }
.mt-message { font-size: 17px; overflow-wrap: anywhere; white-space: pre-line; margin: 0; }
.mt-back { margin: 0; font-size: 16px; }
.mt-zone, .mt-status { color: var(--muted); font-size: 14px; }
.mt-count { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); }
.mt-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mt-actions .primary, .mt-actions .ghost { min-height: 44px; display: inline-flex; align-items: center; }
.mt-panel { position: relative; width: 64px; height: 88px; border-radius: 12px; border: 2px solid var(--line);
  background: color-mix(in srgb, var(--ink) 85%, var(--surface)); }
.mt-panel .mt-lever { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 32px; border-radius: 6px; background: var(--surface); }
.mt-panel .mt-lamp { position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--danger); animation: mt-blink 2.4s ease-in-out infinite; }
@keyframes mt-blink { 50% { opacity: .35; } }
.mt-bar { position: relative; z-index: 50; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 52px 8px 16px;
  font-size: 14px; background: var(--accent-soft); color: var(--ink); border-bottom: 1px solid var(--line); }
.mt-bar p { margin: 0; flex: 1 1 240px; overflow-wrap: anywhere; }
.mt-bar a { color: var(--accent); font-weight: 600; }
.mt-bar.mt-strip { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.mt-bar-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; }
@media (pointer: coarse) { .mt-bar-x { width: 44px; height: 44px; } }
.msg-maint .mt-card { display: block; max-width: 640px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--surface); }
.msg-maint .mt-card p { margin: 4px 0; overflow-wrap: anywhere; }
.mt-card-title { font-weight: 600; }
.axc-chip.maint { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.ns-maint li b { margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .bk-lever { transition: none; } .mt-panel .mt-lamp { animation: none; } }

/* ============================================================== W4-S1: the full statement, Share with support, early
   statements on the billing desk (statement.js, billing-desk.js). Tokens only, so every shade keeps its contrast. */
.st-view > .st-actions { display: flex; flex-wrap: wrap; }      /* .st-actions is also the storage cards' grid */
.st-view > .st-actions a.button { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.st-view > .st-actions > a, .st-view > .st-actions > button { width: auto; flex: 0 0 auto; }
.st-interim { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--st-fibre) 8%, var(--surface)); color: var(--ink); }
.st-full h3 { margin: 16px 0 6px; font-size: 14px; }
.st-cmp td:first-child { width: 52%; }
.st-days { display: flex; align-items: flex-end; gap: 2px; height: 96px; padding: 4px 0 18px; border-bottom: 1px solid var(--line);
  position: relative; }
.st-dcol { flex: 1 1 0; min-width: 3px; height: 100%; display: flex; align-items: flex-end; gap: 1px; position: relative; }
.st-dcol i { display: block; flex: 1 1 0; min-height: 0; border-radius: 3px 3px 0 0; background: var(--st-fibre); }
.st-dcol i.st-k1 { background: var(--st-node); }
.st-dcol i.st-k2 { background: var(--accent); }
.st-dcol small { position: absolute; left: 0; bottom: -18px; font-size: 11px; color: var(--muted); }
.st-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.st-legend span.st-k0::before, .st-legend span.st-k1::before, .st-legend span.st-k2::before { content: ""; display: inline-block;
  width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; background: var(--st-fibre); }
.st-legend span.st-k1::before { background: var(--st-node); }
.st-legend span.st-k2::before { background: var(--accent); }
.st-events li { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 150px); }
.st-events em { color: var(--muted); font-style: normal; font-size: 12.5px; }
.st-dialog { max-width: 520px; width: calc(100vw - 32px); border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  background: var(--surface); color: var(--ink); }
.st-dialog::backdrop { background: rgba(10, 14, 28, 0.45); }
.st-dialog h2 { margin: 0 0 8px; font-size: 19px; }
.st-share-list { margin: 8px 0 12px; padding-left: 20px; color: var(--muted); }
.st-share-error { color: var(--danger); }
.st-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.bd-early { margin-top: 18px; }
.bd-early-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.bd-early-form .field { min-width: 180px; }
.bd-early-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.bd-early-list li { padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .st-events li { grid-template-columns: 1fr; gap: 2px; }
  .st-days { height: 72px; }
}
@media print {
  .st-dialog, #st-share, #st-share-state { display: none !important; }
  .st-days { break-inside: avoid; }
}

/* ===================================================================== W5-R1: the Neurork Account and its switch */
.cl-foot-legal { flex-basis: 100%; order: 3; font-size: 13px; }
/* The Neurkern wordmark (static/neurkern/, tools/neurkern_mark.py) is kept but shown nowhere since 28 Oct 2026: homepages
   name only their own brand, and no brand is drawn in capitals. */
.acc-back { white-space: nowrap; }
.acc-back-note { margin: 6px 16px 0; font-size: 14px; color: var(--muted); }
.nk-switch { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.nk-switch h3 { margin: 0 0 4px; font-size: 16px; }
.nk-pre { margin-top: 12px; }
.nk-pre-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.nk-checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.nk-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.nk-check span:last-child { display: grid; gap: 2px; }
.nk-check small { color: var(--muted); }
.nk-mark { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.nk-check.ok .nk-mark { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.nk-check.bad .nk-mark { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }

/* ===== W6-A: organisation seats (static/org-seats.js, on /org and the hub's /plans #seats) ===== */
.org-seats-facts { margin: 12px 0; max-width: 520px; }
.org-seats-agree { display: flex; gap: 8px; align-items: center; min-height: 24px; margin: 8px 0; }

/* ===================================================================== W6-B: screens and visible wording */
/* Inline style="" attributes moved here (the CSP refuses them): the suite sidebar and the development portal. */
.workspace-side-links.side-links-end { margin-top: auto; }
.dev-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.dev-actions .btn-link { text-align: center; text-decoration: none; }
/* The owner dashboard's top bar: the section links are one scrollable line that never wraps or pushes "Back to chat"
   off the edge (1024 px and up); on narrower screens they move to a second row of their own, still one line. */
.page-top:has(> .owner-nav) { flex-wrap: nowrap; }
.page-top > .owner-nav {
  display: flex; flex: 1 1 auto; min-width: 0; gap: 16px; padding: 6px 4px;
  overflow-x: auto; white-space: nowrap; scrollbar-width: thin; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.page-top > .owner-nav a { flex: none; padding: 4px 2px; }
.page-top > .owner-back, .page-top > .mark { flex: none; white-space: nowrap; }
@media (max-width: 1023px) {
  .page-top:has(> .owner-nav) { flex-wrap: wrap; row-gap: 4px; }
  .page-top > .owner-nav { display: flex; order: 3; flex: 1 0 100%; }
}
@media (max-width: 640px) {
  .page-top > .owner-back { display: inline-flex; }
}
/* neurork.com's own pages (Plans, Billing, Statements on the hub): the Neurork mark and name instead of Axork's, the
   account's sections instead of the chat nav (omni.js paintHubNav), and only one way back (account.js "Back to <app>"). */
html[data-site="neurork"] .page-top .mark .glyph { background-image: url("neurork/mark.svg"); }
html[data-site="neurork"] .page-top .mark-name { font-size: 0; }
html[data-site="neurork"] .page-top .mark-name::after { content: "Neurork"; font: 700 15px/1 var(--wordmark); letter-spacing: 0.01em; }
html[data-site="neurork"] .page-top .page-tools > a.ghost[href="/"]:not(.acc-back) { display: none; }
.nk-hub-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* neurork.com's front page: Plans and billing, since the hub is where every service is paid for. */
.nk-billing { scroll-margin-top: 80px; }
.nk-billing-title { grid-column: 1 / -1; margin: 0; font-family: var(--display); font-size: 22px; }
a.cl-card.nk-bill-card { color: inherit; text-decoration: none; }
a.cl-card.nk-bill-card:hover h3, a.cl-card.nk-bill-card:focus-visible h3 { text-decoration: underline; }

/* ===================================================================== W7-H: the Neurork family, one order everywhere */
/* The app switcher (static/apps.js): five services and the Neurork Account, the current one marked. */
.nk-launch-btn svg { fill: currentColor; stroke: none; }
.nk-launch { position: fixed; z-index: 1200; width: min(340px, calc(100vw - 24px)); padding: 10px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; box-sizing: border-box; }
.nk-launch[hidden] { display: none; }
.nk-launch-app { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; color: var(--ink);
  text-decoration: none; text-align: center; border: 1px solid transparent; min-height: 44px; }
.nk-launch-app:hover { background: var(--hover); }
.nk-launch-app[aria-current="page"] { border-color: var(--accent); background: var(--hover); }
.nk-launch-app img { width: 32px; height: 32px; object-fit: contain; }
.nk-launch-app b { font-size: 13px; font-weight: 600; }
.nk-launch-app small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.nk-launch-note { grid-column: 1 / -1; margin: 4px 6px 2px; color: var(--muted); font-size: 12px; }
/* Front pages: the family line in the footer, in order, the page you're on marked. */
.cl-foot-family { display: flex; flex-wrap: wrap; gap: 4px 14px; flex-basis: 100%; order: 2; font-size: 14px; }
.cl-foot-family a { display: inline-flex; align-items: center; min-height: 32px; }
.cl-foot-family a[aria-current="page"] { font-weight: 600; text-decoration: none; }
/* neurork.com: the five services as equal cards, the account, billing and status. */
.nk-services, .nk-status { display: grid; gap: 12px; }
.nk-section-title { grid-column: 1 / -1; margin: 0; font-family: var(--display); font-size: 22px; }
.nk-section-lead { margin: 0; color: var(--cl-muted); font-size: 15px; line-height: 1.55; }
.nk-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.nk-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 16px; border: 1px solid var(--cl-line); border-radius: 16px;
  background: var(--cl-surface); color: inherit; text-decoration: none; }
.nk-card:hover, .nk-card:focus-visible { border-color: var(--cl-accent); }
.nk-card img { width: 48px; height: 48px; object-fit: contain; }
.nk-card b { font-size: 17px; font-weight: 600; }
.nk-card small { color: var(--cl-muted); font-size: 12.5px; }
.nk-card span { font-size: 14px; line-height: 1.5; color: var(--cl-muted); }
.nk-status p { margin: 0; color: var(--cl-muted); font-size: 15px; line-height: 1.55; }
@media (max-width: 1000px) { .nk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nk-cards { grid-template-columns: 1fr; } }
/* neurtor.com: a component switched off for work. */
.ns-list .ns-maintenance i { background: #5B6CD6; }
/* The Axork wordmark (owner decision, W7-H): written Axork, like a name, not in capitals. The other services' own
   wordmarks keep their rules (dx-name, syn-name, cam-name, chi-name, and the Neurork and Autonortex ::after names).
   Card codes stay NEURORK and CREDENCODE. The former seller stays AXORK LLC. */
.mark-name { text-transform: none; letter-spacing: 0.01em; }
.cl-home:not(.cl-neurork) .cl-wordmark { letter-spacing: 0.01em; }
/* neurork.com: the four account cards side by side on wide screens. */
@media (min-width: 1001px) { .cl-neurork #features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 561px) and (max-width: 1000px) { .cl-neurork #features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===================================================================== W8-G: Gliaid (gliaid.com, gliaid.py) */
/* Every Gliaid page is a Clarity page (cl-home cl-gliaid) with the one family accent; the portal, the ticket page and
   the console add gl- parts. Colours only from the tokens, so every True Tint shade stays readable. */
.gl-main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 32px clamp(16px, 3vw, 28px) 48px; display: flex;
  flex-direction: column; gap: 24px; }
.gl-main h1 { margin: 0; font: 600 clamp(26px, 4vw, 34px)/1.15 var(--display); }
.gl-main h2 { margin: 0; font: 600 20px/1.25 var(--display); }
.gl-main h3 { margin: 0; font: 600 16px/1.3 var(--text); }
.gl-lead { margin: 0; color: var(--cl-muted); font-size: 16px; line-height: 1.55; max-width: 760px; }
.gl-panel { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--cl-surface); border: 1px solid var(--cl-line);
  border-radius: 16px; min-width: 0; }
.gl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px; align-items: start; }
.gl-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gl-empty { margin: 0; padding: 18px; border: 1px dashed var(--cl-line); border-radius: 12px; color: var(--cl-muted); font-size: 15px; }
.gl-id { font: 600 13px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: normal; word-break: normal; }
.gl-seg { white-space: nowrap; }
.gl-id-big { font-size: clamp(15px, 2.4vw, 19px); }
.gl-muted { color: var(--cl-muted); font-size: 14px; }
.gl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--cl-soft);
  color: var(--cl-soft-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.gl-chip-a { background: color-mix(in srgb, var(--danger) 14%, var(--cl-surface)); color: var(--danger); }
.gl-chip-ok { background: color-mix(in srgb, var(--ok) 14%, var(--cl-surface)); color: var(--ok); }
.gl-chip-plain { background: var(--cl-bg); color: var(--cl-ink); border: 1px solid var(--cl-line); }
.gl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gl-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--cl-line); border-radius: 12px;
  background: var(--cl-surface); }
.cl-home a.gl-item { color: var(--cl-ink); text-decoration: none; }
.cl-home a.gl-item:hover, .gl-item[aria-current="true"] { border-color: var(--cl-accent); }
.gl-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-home .gl-tab { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--cl-line); background: var(--cl-surface);
  color: var(--cl-ink); font: 500 15px/1 var(--text); cursor: pointer; }
.cl-home .gl-tab[aria-selected="true"] { background: var(--cl-accent); border-color: var(--cl-accent); color: var(--cl-accent-ink); }
.gl-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cl-home .gl-door { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--cl-line); border-radius: 14px;
  background: var(--cl-surface); color: var(--cl-ink); text-align: left; font: inherit; cursor: pointer; }
.cl-home .gl-door:hover, .cl-home .gl-door:focus-visible { border-color: var(--cl-accent); }
.gl-door b { font-size: 17px; }
.gl-door span { color: var(--cl-muted); font-size: 14px; line-height: 1.5; }
.gl-form { display: flex; flex-direction: column; gap: 14px; }
.gl-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.gl-field input, .gl-field select, .gl-field textarea { min-height: 44px; padding: 10px 12px; border: 1px solid var(--cl-edge); border-radius: 10px;
  background: var(--cl-surface); color: var(--cl-ink); font: 400 15px/1.4 var(--text); }
.gl-field textarea { min-height: 120px; resize: vertical; }
.gl-field small { font-weight: 400; color: var(--cl-muted); }
.gl-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--cl-muted); }
.gl-steps li[aria-current="step"] { color: var(--cl-ink); font-weight: 600; }
.gl-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cl-home .gl-pick { min-height: 44px; padding: 10px 12px; border: 1px solid var(--cl-line); border-radius: 10px; background: var(--cl-surface);
  color: var(--cl-ink); font: 400 14px/1.35 var(--text); text-align: left; cursor: pointer; }
.cl-home .gl-pick[aria-pressed="true"] { border-color: var(--cl-accent); background: var(--cl-soft); }
.cl-home .gl-pick b { display: block; font-size: 12px; color: var(--cl-accent-text); }
/* The compact new-ticket form: rows in the order of the ID's segments, the live preview above (static/gliaid-form.js). */
.gl-newform { display: flex; flex-direction: column; gap: 14px; }
.gl-idpreview { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px dashed var(--cl-edge); border-radius: 10px;
  background: var(--cl-soft); }
.gl-idpreview small { color: var(--cl-muted); font-size: 13px; }
.gl-field-label { font-size: 14px; font-weight: 600; }
.gl-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.gl-rows > .gl-field { min-width: 0; }
.gl-rows select { width: 100%; }
.gl-lock { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--cl-line);
  border-radius: 10px; font-weight: 400; color: var(--cl-ink); }
.gl-lock b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.gl-sh { margin: 0; }
.gl-sh h3 { margin: 0 0 8px; font-size: 15px; }
@media (max-width: 900px) { .gl-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gl-rows { grid-template-columns: minmax(0, 1fr); } }
.gl-msg { padding: 10px 14px; border-radius: 12px; background: var(--cl-bg); font-size: 15px; line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere; }
.gl-msg-them { background: var(--cl-soft); }
.gl-msg small { display: block; margin-bottom: 4px; color: var(--cl-muted); font-size: 12px; }
.gl-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--cl-line); display: flex; flex-direction: column; gap: 10px; }
.gl-timeline li { position: relative; font-size: 14px; }
.gl-timeline li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 5px;
  background: var(--cl-accent); }
.gl-timeline time { display: block; color: var(--cl-muted); font-size: 12px; }
.gl-banner { padding: 14px 16px; border-radius: 12px; background: var(--cl-soft); color: var(--cl-ink); font-size: 15px; line-height: 1.5; }
.gl-banner b { color: var(--cl-soft-ink); }
.gl-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 14px; }
.gl-kv dt { color: var(--cl-muted); }
.gl-kv dd { margin: 0; overflow-wrap: anywhere; }
.gl-sealed { padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--cl-edge); font-size: 14px; white-space: pre-wrap;
  overflow-wrap: anywhere; }
.gl-sealed-label { font-size: 12px; font-weight: 600; color: var(--cl-muted); }
.gl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-home .gl-btn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--cl-edge); background: var(--cl-surface);
  color: var(--cl-ink); font: 500 14px/1.2 var(--text); cursor: pointer; }
.cl-home .gl-btn-primary { background: var(--cl-accent); border-color: var(--cl-accent); color: var(--cl-accent-ink); font-weight: 600; }
.cl-home .gl-btn:disabled { opacity: 0.5; cursor: default; }
.gl-status { margin: 0; min-height: 20px; font-size: 14px; color: var(--cl-muted); }
.gl-status[data-kind="error"] { color: var(--danger); }
.gl-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.gl-track { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gl-track > h3 { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 2px solid var(--cl-line); }
.cl-home .gl-card { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid var(--cl-line); border-radius: 10px;
  background: var(--cl-surface); color: var(--cl-ink); text-align: left; font: inherit; cursor: pointer; min-width: 0; }
.cl-home .gl-card:hover, .cl-home .gl-card[aria-current="true"] { border-color: var(--cl-accent); }
.gl-card .gl-num { font: 700 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.gl-card small { font-size: 12.5px; color: var(--cl-muted); overflow-wrap: anywhere; }
.gl-hops { display: flex; gap: 4px; }
.gl-hops i { width: 18px; height: 8px; border-radius: 4px; background: var(--cl-line); }
.gl-hops i[data-on="1"] { background: var(--cl-accent); }
.gl-hat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--cl-bg); }
.gl-hat-bar select { min-height: 40px; padding: 0 10px; border: 1px solid var(--cl-edge); border-radius: 10px; background: var(--cl-surface);
  color: var(--cl-ink); font: 500 14px/1 var(--text); }
.gl-sub { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--cl-line); border-radius: 10px; }
.gl-verdicts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 980px) { .gl-grid { grid-template-columns: 1fr; } .gl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gl-cols, .gl-doors { grid-template-columns: 1fr; } .gl-main { padding-top: 20px; } }
/* neurork.com: the Gliaid support tile, apart from the five services. */
.nk-support .nk-support-card { max-width: 520px; }
/* Gliaid: overdue marks (words as well as colour), the separate "Send to CEO" button and its dialog. */
.gl-chip-late { background: var(--danger); color: var(--danger-ink, #FFFFFF); }
.gl-chip-soon { background: color-mix(in srgb, #C98A3A 20%, var(--cl-surface)); color: var(--cl-ink); border: 1px dashed var(--cl-edge); }
.gl-ceo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; border: 2px solid var(--cl-ink); border-radius: 12px; }
.cl-home .gl-btn-ceo { background: var(--cl-ink); border-color: var(--cl-ink); color: var(--cl-surface); font-weight: 700; }
.cl-home .gl-btn-ceo:disabled { opacity: 0.45; }
.gl-dialog { width: min(560px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--cl-line); border-radius: 16px;
  background: var(--cl-surface); color: var(--cl-ink); }
.gl-dialog::backdrop { background: rgba(10, 12, 24, 0.45); }
.gl-dialog fieldset { border: 0; padding: 0; margin: 0; }
/* Owner dashboard → Sent to CEO (static/owner-gliaid.js). */
.ceo-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ceo-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ceo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ceo-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.ceo-chip { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; }
.ceo-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; }
.ceo-kv dt { color: var(--muted); }
.ceo-kv dd { margin: 0; overflow-wrap: anywhere; }
.ceo-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.ceo-form label { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ceo-form textarea { min-height: 64px; }
.cl-home .gl-link { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--cl-accent-text);
  font: 500 14px/1.3 var(--text); text-decoration: underline; cursor: pointer; }
.gl-escalate { padding-top: 6px; border-top: 1px solid var(--cl-line); }
/* ===================================================================== Neurosemble (neurosemble.com, neurosemble.py) */
/* Careers, the applicant portal, self-service, the HR console and Taxetal Payroll are Clarity pages (cl-home
   cl-neurosemble) that reuse Gliaid's gl- parts with the one family accent. Colours only from the tokens. */
.nse-head { display: flex; flex-direction: column; gap: 8px; }
.nse-narrow { max-width: 760px; }
.nse-wide { max-width: 1240px; }
.nse-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.nse-narrow-panel { max-width: 560px; }
.nse-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.nse-filters select, .nse-filters input { width: 100%; }
.nse-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.cl-home a.nse-job-card { height: 100%; }
.nse-job-card b { font-size: 17px; }
.nse-job { display: flex; flex-direction: column; gap: 16px; }
.nse-apply-card { position: sticky; top: 16px; }
.nse-card { display: flex; flex-direction: column; gap: 8px; }
.nse-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.nse-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 15px; line-height: 1.45; }
.nse-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--cl-accent); }
.nse-fieldset { margin: 0; padding: 14px 16px; border: 1px solid var(--cl-line); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.nse-fieldset legend { padding: 0 6px; font-weight: 600; }
.nse-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.nse-reasons, .nse-promises { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.nse-offer { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--cl-accent); border-radius: 12px; }
.nse-mini { padding-top: 6px; border-top: 1px solid var(--cl-line); }
.nse-mini .gl-field textarea { min-height: 80px; }
.nse-mini > .cl-btn, .cl-neurosemble .gl-panel > .cl-btn, .cl-neurosemble .gl-item > .cl-btn, .nse-offer > .cl-btn,
  .cl-neurosemble .gl-panel > .gl-row > .cl-btn { align-self: flex-start; }
.cl-neurosemble .gl-item > .cl-btn, .cl-neurosemble .gl-row > .cl-btn { min-height: 44px; padding: 0 16px; }
.cl-home .nse-rowbtn { width: 100%; text-align: left; font: inherit; color: var(--cl-ink); cursor: pointer; }
.cl-home .nse-rowbtn:hover { border-color: var(--cl-accent); }
.nse-queue { counter-reset: none; }
.nse-scroll { overflow-x: auto; max-width: 100%; }
.nse-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nse-table caption { text-align: left; padding-bottom: 8px; color: var(--cl-muted); }
.nse-table th, .nse-table td { padding: 8px 10px; border-bottom: 1px solid var(--cl-line); text-align: left; vertical-align: top; }
.nse-table th { font-weight: 600; }
.nse-table select { min-height: 36px; }
.nse-dialog { max-width: min(520px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--cl-line); border-radius: 16px;
  background: var(--cl-surface); color: var(--cl-ink); }
.nse-dialog::backdrop { background: color-mix(in srgb, #000000 45%, transparent); }
@media (max-width: 900px) { .nse-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nse-apply-card { position: static; } }
@media (max-width: 600px) { .nse-filters { grid-template-columns: 1fr; } .nse-table { font-size: 13px; }
  .nse-table th, .nse-table td { padding: 6px; } }

/* ===================================================================== Oversight (owner dashboard, oversight.py) */
/* One tab per organisation, "Everything" first. The tabs are one line that scrolls sideways (phones too); each badge
   counts what needs action. Status colours come from the tokens (ok, accent, danger) so every shade keeps 4.5:1. */
.ov-tabs { display: flex; gap: 4px; margin: 8px 0 14px; padding-bottom: 2px; border-bottom: 1px solid var(--line);
  overflow-x: auto; white-space: nowrap; scrollbar-width: thin; overscroll-behavior-x: contain; }
.ov-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font: 600 14px/1.2 var(--text);
  cursor: pointer; }
.ov-tab:hover { color: var(--ink); }
.ov-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.ov-badge { font-style: normal; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.ov-badge:empty { display: none; }
.ov-tab[data-status="critical"] .ov-badge { background: var(--danger); color: var(--danger-ink); }
.ov-panel { display: block; }
.ov-panel:focus-visible { outline-offset: 4px; }
.ov-body > .fine:first-child { margin-top: 0; }
.ov-tag.ov-ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.ov-tag.ov-attention { background: var(--accent-soft); color: var(--accent); }
.ov-tag.ov-critical { background: var(--danger); color: var(--danger-ink); }
.ov-org { background: var(--hover); color: var(--ink); }
.ov-card-name { color: var(--muted); font-size: 13px; }
.ov-need { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.ov-need .f-top, .ov-need .ov-need-text { grid-column: 1; }
.ov-need .ov-open { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 32px; display: inline-flex; align-items: center; }
.ov-need-text { margin: 6px 0 0; }
.ov-need-critical { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.ov-orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ov-org-tile { display: grid; gap: 2px; text-align: left; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line);
  border-left-width: 4px; border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.ov-org-tile:hover { background: var(--hover); }
.ov-org-tile small { color: var(--muted); font-size: 12.5px; }
.ov-org-tile.ov-ok { border-left-color: var(--ok); }
.ov-org-tile.ov-attention { border-left-color: var(--accent); }
.ov-org-tile.ov-critical { border-left-color: var(--danger); }
.ov-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ov-card { padding: 14px 16px; border: 1px solid var(--line); border-top-width: 3px; border-radius: 14px; background: var(--surface); min-width: 0; }
.ov-card.ov-ok { border-top-color: var(--ok); }
.ov-card.ov-attention { border-top-color: var(--accent); }
.ov-card.ov-critical { border-top-color: var(--danger); }
.ov-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-card-head h3 { margin: 0; font-size: 16px; }
.ov-card-head a { margin-left: auto; }
.ov-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 12px; margin: 12px 0 4px; }
.ov-num { min-width: 0; }
.ov-num dt { color: var(--muted); font-size: 12.5px; }
.ov-num dd { margin: 2px 0 0; font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.ov-num dd small { color: var(--muted); font-weight: 500; font-size: 12px; }
.ov-trend { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.ov-gaps { margin-top: 8px; color: var(--muted); font-size: 13px; }
.ov-gaps summary { cursor: pointer; min-height: 24px; }
.ov-gaps ul { margin: 6px 0 0; padding-left: 18px; }
.ov-confirm { display: grid; gap: 10px; justify-items: start; }
@media (max-width: 640px) {
  .ov-cards { grid-template-columns: 1fr; }
  .ov-need { grid-template-columns: 1fr; }
  .ov-need .ov-open { grid-column: 1; grid-row: auto; justify-self: start; min-height: 44px; margin-top: 6px; }
}

/* ===================================================================== Axork Player (media-player.js, docs/media-player.md)
   YouTube/VLC-style controls under the picture: seek bar with buffered range, chapters and hover preview, settings menu,
   subtitles drawn as text, shortcut sheet, theatre and fullscreen. Overlays sit on the black stage, so their ink is light. */
.mp { position: relative; }
.mp .mp-main { position: relative; gap: 6px; }
.mp .mp-stage { touch-action: manipulation; user-select: none; }
.mp .mp-stage:not(.pinch) { touch-action: pan-x pan-y; }
.mp .mp-stage.pinch { touch-action: none; }
.mp .mp-video { width: 100%; height: 100%; max-width: none; transition: none; }
.mp .mp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mp-cues { position: absolute; left: 4%; right: 4%; bottom: 7%; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; text-align: center; }
.mp-cues[data-pos="raised"] { bottom: 20%; }
.mp-cues[data-pos="top"] { bottom: auto; top: 6%; }
.mp-cue span { display: inline-block; white-space: pre-line; padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.72); color: #fff; font: 600 clamp(14px, 2.6cqw, 30px) / 1.3 var(--text); }
.mp .mp-stage { container-type: size; }
.mp-cues[data-size="s"] .mp-cue span { font-size: clamp(12px, 2cqw, 22px); }
.mp-cues[data-size="l"] .mp-cue span { font-size: clamp(17px, 3.4cqw, 40px); }
.mp-cues[data-size="xl"] .mp-cue span { font-size: clamp(20px, 4.4cqw, 52px); }
.mp-cues[data-color="yellow"] .mp-cue span { color: #FFE066; }
.mp-cues[data-color="accent"] .mp-cue span { color: #A5ADFF; }
.mp-cues[data-back="solid"] .mp-cue span { background: #000; }
.mp-cues[data-back="none"] .mp-cue span { background: none; text-shadow: 0 0 3px #000, 0 0 3px #000, 1px 1px 2px #000, -1px -1px 2px #000; }
.mp .mp-msg { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.mp .mp-msg[hidden] { display: none; }
.mp-msg-text { margin: 0; }
.mp-msg-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-msg-acts:empty { display: none; }
.mp-msg .ghost.tiny { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.mp-prog { height: 6px; border-radius: var(--pill); background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.mp-prog-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: #A5ADFF; }
.mp-resume { position: absolute; top: 10px; left: 12px; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.66); color: #fff; font-size: 13px; }
.mp-resume[hidden] { display: none; }
.mp-resume .ghost.tiny { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.mp-seekrow { position: relative; padding: 0 2px; }
.mp-seekbar { position: relative; height: 24px; display: flex; align-items: center; cursor: pointer; touch-action: none; border-radius: var(--r-sm); }
.mp-track { position: relative; flex: 1; height: 4px; border-radius: var(--pill); background: var(--line); }
.mp-seekbar:hover .mp-track, .mp-seekbar:focus-visible .mp-track { height: 6px; }
.mp-bufs, .mp-chaps { position: absolute; inset: 0; }
.mp-buf { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: var(--muted); opacity: 0.45; }
.mp-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--accent); }
.mp-ab-range { position: absolute; top: -3px; bottom: -3px; border-radius: 3px; background: var(--accent-soft); outline: 1px solid var(--accent); }
.mp-ab-range[hidden] { display: none; }
.mp-tick { position: absolute; top: -1px; bottom: -1px; width: 3px; margin-left: -1px; background: var(--surface); }
.mp-knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.mp-peek { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.85); color: #fff; font: 600 12px var(--text); font-variant-numeric: tabular-nums; pointer-events: none; z-index: 3; white-space: nowrap; }
.mp-peek[hidden], .mp-peek-img[hidden] { display: none; }
.mp-peek-img { border-radius: 4px; background-repeat: no-repeat; background-color: #000; }
.mp-peek-chap:empty { display: none; }
.mp .mp-controls { gap: 4px 10px; }
.mp .mp-group { gap: 2px; }
.mp .mp-btn { min-width: 36px; height: 36px; }
.mp .mp-btn:disabled { opacity: 0.4; cursor: default; }
.mp .mp-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mp .mp-btn svg text { font: 700 6.5px var(--text); fill: currentColor; stroke: none; }
.mp .mp-play svg path { fill: currentColor; }
.mp .mp-play { min-width: 42px; height: 42px; }
.mp-clock { font: 13px var(--text); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.mp-clock .mp-time { color: var(--ink); }
.mp-spacer { flex: 1; }
.mp .mp-now { padding: 0 2px; }
.mp-menu, .mp-sheet { position: absolute; right: 0; bottom: 88px; z-index: 5; width: min(470px, 100%); max-height: min(calc(100% - 96px), 560px); overflow: auto; padding: 12px; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--edge), var(--shadow-2); border: 1px solid var(--line); }
.mp-sheet { width: min(560px, 100%); }
.mp-menu[hidden], .mp-sheet[hidden] { display: none; }
.mp-menu-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mp-menu-head .mp-tabs { flex: 1; min-width: 0; flex-wrap: wrap; }
.mp-menu-head .mp-h { flex: 1; }
.mp .mp-x { font-size: 20px; line-height: 1; }
.mp-panel { display: flex; flex-direction: column; gap: 8px; }
.mp-panel[hidden] { display: none; }
.mp-h { margin: 6px 0 0; font: 700 13px var(--text); color: var(--ink); }
.mp-field { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 4px 10px; font-size: 13px; }
.mp-field small { grid-column: 2; color: var(--muted); font-size: 12px; }
.mp-field-name { color: var(--muted); }
.mp-range { width: 100%; accent-color: var(--accent); }
.mp-select, .mp-input { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 13px var(--text); min-width: 0; }
.mp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-goto .mp-input { width: 140px; }
.mp-val { margin: 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.mp-note[hidden] { display: none; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mp-chip { min-width: 44px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink); font: 600 12.5px var(--text); cursor: pointer; }
.mp-chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.mp-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.mp-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.mp-dl, .mp-keys { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.mp-dl dt, .mp-keys dt { color: var(--muted); }
.mp-dl dd, .mp-keys dd { margin: 0; overflow-wrap: anywhere; }
.mp-keys kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); font: 600 12px var(--mono); white-space: nowrap; }
.mp-chap-wrap[hidden] { display: none; }
.mp-chapters { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; }
.mp-chap .mp-kind { font: 11.5px var(--text); font-variant-numeric: tabular-nums; }
.mp-chap { grid-template-columns: 52px minmax(0, 1fr); }
.mp-list .mp-h { margin: 0; }
.mp.wide .mp-stage { max-height: 82vh; }
.vw-media:has(.mp.wide) { max-width: none; }
.mp:fullscreen { display: flex; flex-direction: column; justify-content: center; }
.mp:fullscreen .mp-main { flex: 1; min-height: 0; }
.mp:fullscreen .mp-stage { flex: 1; height: auto; max-height: none; min-height: 0; }
.mp:fullscreen .mp-clock, .mp:fullscreen .mp-clock .mp-time, .mp:fullscreen .mp-btn { color: #fff; }
.mp:fullscreen .mp-play { color: var(--accent-ink); }
.mp:fullscreen .mp-track { background: rgba(255, 255, 255, 0.3); }
@media (pointer: coarse) {
  .mp .mp-btn { min-width: 44px; height: 44px; }
  .mp .mp-play { min-width: 48px; height: 48px; }
  .mp-chip, .mp-select, .mp-input { min-height: 44px; }
  .mp-seekbar { height: 32px; }
}
@media (max-width: 640px) {
  .mp .mp-controls { gap: 2px 4px; }
  .mp .mp-vol, .mp .mp-vol-pct, .mp [data-act="wide"], .mp [data-act="keys"] { display: none; }
  .mp .mp-group { flex-wrap: wrap; }
  .mp .mp-controls { justify-content: space-between; }
  .vw-media { padding: 8px; }
  .mp-clock { order: -1; flex: 1 1 100%; padding: 0 4px; }
  .mp-spacer { display: none; }
  .mp-menu, .mp-sheet { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 75vh; }
  .mp-field { grid-template-columns: minmax(0, 1fr); }
  .mp-field small { grid-column: 1; }
}

/* ===================================================================== The Axon thread (static/axon-thread.js)
   Synaram's default message style and Axork Chat's opt-in one (Homeostat → Synaram). One axon runs down the chat; each
   message is a node on it with its card on a dendrite: yours on one side, theirs on the other, all on one side with a
   side marker when the pane is narrow. A run from one person shares a myelin sheath; a reply branches back up to the
   message it answers (--ax-reach, measured in JS); breaks are nodes of Ranvier. All colours are True Tint tokens. */
.bubbles.axon-thread { container: axthread / inline-size; gap: 0; padding: 8px 16px 18px; }
.axon-thread > li { position: relative; --ax-x: var(--thread-center, 50%); --thread-gap: 28px; --ax-gap: var(--thread-gap); --ax-pad: 14px; --ax-c: var(--accent); }
.axon-thread > .bubble {
  display: flex; align-items: flex-start; align-self: stretch; width: 100%; max-width: none; box-sizing: border-box;
  padding: var(--ax-pad) 0 0; border: 0; border-radius: 0; background: none !important; outline: 0 !important;
}
.axon-thread > .bubble.ax-cont { --ax-pad: 4px; }
/* One spine at --thread-center. You stay on the left of it; the other side stays on the right.
   The inset is the gap beside the card, so the reply line never crosses the words. */
.axon-thread > .bubble:not(.mine) { justify-content: flex-end; padding-left: calc(var(--thread-center) + var(--thread-gap)); }
.axon-thread > .bubble.mine { justify-content: flex-start; padding-right: calc(100% - var(--thread-center) + var(--thread-gap)); }
.axon-thread > .bubble.attachment {
  justify-content: center; padding-left: var(--thread-gutter); padding-right: var(--thread-gutter);
}
.axon-thread > .bubble.attachment .msg-card { width: min(36em, 100%); max-width: min(560px, 100%); }
.axon-thread > .bubble.attachment > .ax-rail,
.axon-thread > .bubble.attachment > .ax-dendrite:not(path),
.axon-thread > .bubble.attachment > .ax-node:not(g) { display: none; }
.axon-thread .ax-s0 { --ax-c: var(--accent); }
.axon-thread .ax-s1 { --ax-c: var(--ok); }
.axon-thread .ax-s2 { --ax-c: var(--cost-5); }
.axon-thread .ax-s3 { --ax-c: var(--cost-4); }
.axon-thread .ax-s4 { --ax-c: var(--cost-3); }
.axon-thread .ax-s5 { --ax-c: var(--cost-2); }
.axon-thread .ax-sai { --ax-c: var(--cost-2); }
.axon-thread .ax-k-ring { --ax-c: var(--ok); }
.axon-thread .ax-k-sys { --ax-c: var(--faint); }

/* the card: text stays on its usual reading grounds */
.axon-thread .msg-card {
  position: relative; min-width: 0; max-width: min(560px, 100%); box-sizing: border-box; padding: 8px 12px; border-radius: 14px;
  background: var(--bubble); border: 1px solid color-mix(in srgb, var(--ax-c) 22%, var(--line));
}
.axon-thread > .bubble.mine .msg-card { background: var(--accent-soft); padding-left: 14px; }
.axon-thread > .bubble:not(.mine):not(.system) .msg-card { padding-right: 14px; }
.axon-thread > .bubble.mine .msg-card::before,
.msgr .bubbles:not(.axon-thread) > .bubble.mine .msg-card::before,
.dw-msg.mine .dw-bub::before {
  content: ""; position: absolute; left: 0; right: auto; top: 0; bottom: 0; width: 2px;
  background: color-mix(in srgb, var(--ax-c, var(--accent)) 72%, var(--line)); border-radius: 2px; pointer-events: none;
}
.axon-thread > .bubble:not(.mine):not(.system) .msg-card::before,
.msgr .bubbles:not(.axon-thread) > .bubble:not(.mine):not(.system) .msg-card::before,
.dw-msg.theirs .dw-bub::before {
  content: ""; position: absolute; left: auto; right: 0; top: 0; bottom: 0; width: 2px;
  background: color-mix(in srgb, var(--ax-c, var(--accent)) 72%, var(--line)); border-radius: 2px; pointer-events: none;
}
.axon-thread > .bubble.ai .msg-card { background: var(--surface); max-width: min(680px, 100%); }
.axon-thread > .bubble.snippet .msg-card { border-left: 3px solid var(--accent); }
.axon-thread > .bubble.private .msg-card { outline: 1px dashed var(--faint); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .axon-thread > .bubble:not(.mine):not(.ai) .msg-card { background: color-mix(in srgb, var(--ink) 11%, var(--surface)); }
  :root:not([data-theme="light"]) .axon-thread > .bubble.mine .msg-card { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
}
:root[data-theme="dark"] .axon-thread > .bubble:not(.mine):not(.ai) .msg-card { background: color-mix(in srgb, var(--ink) 11%, var(--surface)); }
:root[data-theme="dark"] .axon-thread > .bubble.mine .msg-card { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); }

/* the axon: one short stretch per row, so it costs nothing to scroll; the sheath joins a run */
.ax-rail { position: absolute; top: 0; bottom: 0; left: var(--ax-x); width: 2px; transform: translateX(-50%); pointer-events: none;
  background: color-mix(in srgb, var(--faint) 55%, transparent); }
.ax-rail::before, .ax-rail::after { content: ""; position: absolute; left: -3px; width: 8px; display: none;
  background: color-mix(in srgb, var(--ax-c) 34%, transparent); }
.ax-rail::before { top: 0; height: calc(var(--ax-pad) + 10px); }
.ax-rail::after { top: calc(var(--ax-pad) + 10px); bottom: 0; }
.ax-cont > .ax-rail::before, .ax-more > .ax-rail::after { display: block; }
.ax-row:not(.ax-cont) > .ax-rail::after { border-radius: 4px 4px 0 0; }
.ax-cont:not(.ax-more) > .ax-rail::before { border-radius: 0 0 4px 4px; }
.ax-fading > .ax-rail::before, .ax-fading > .ax-rail::after {          /* disappearing messages: a fading segment */
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--ax-c) 34%, transparent) 0 6px, transparent 6px 10px); }
.ax-fading > .ax-rail { opacity: .7; }

/* nodes: a dot for words, squares for files and pictures, a waveform for voice, a ring for calls */
.ax-node:not(g) {
  position: absolute; z-index: 1; left: var(--ax-x); top: calc(var(--ax-pad) + 4px); width: 12px; height: 12px; transform: translateX(-50%);
  box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ax-c); background: var(--ax-c);
  display: grid; place-items: center; color: var(--ax-c); font: 700 11px/1 var(--text); pointer-events: none;
}
.ax-cont .ax-node:not(g) { width: 8px; height: 8px; top: calc(var(--ax-pad) + 6px); }
.ax-node:not(g).ax-named { width: 22px; height: 22px; top: calc(var(--ax-pad) - 1px); background: var(--surface); border-width: 2px; }
.ax-n-media { border-radius: 4px; }
.ax-n-file { border-radius: 1px; width: 12px; height: 14px; }
.ax-n-ai:not(.ax-named) { border-radius: 2px; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; }
.ax-n-wave { width: 24px; height: 14px; border: 0; border-radius: 0;
  background: linear-gradient(var(--ax-c), var(--ax-c)) 0 50% / 2px 5px, linear-gradient(var(--ax-c), var(--ax-c)) 4px 50% / 2px 10px,
    linear-gradient(var(--ax-c), var(--ax-c)) 8px 50% / 2px 14px, linear-gradient(var(--ax-c), var(--ax-c)) 12px 50% / 2px 8px,
    linear-gradient(var(--ax-c), var(--ax-c)) 16px 50% / 2px 12px, linear-gradient(var(--ax-c), var(--ax-c)) 20px 50% / 2px 6px;
  background-repeat: no-repeat; background-color: var(--surface); box-shadow: 0 0 0 2px var(--surface); }
.ax-n-ring { width: 18px; height: 18px; border-width: 3px; background: var(--surface); top: calc(var(--ax-pad) + 1px); }
.ax-n-sys { width: 8px; height: 8px; background: var(--surface); top: calc(var(--ax-pad) + 6px); }
.ax-lock > .ax-node:not(g)::after { content: "🔒"; position: absolute; left: calc(100% + 1px); top: -8px; font-size: 9px; line-height: 1; }
/* your status, on your node: sending (dashed, the spark runs down the line), delivered (filled), seen (lit) */
.axon-thread > .mine.ax-delivered > .ax-node:not(g):not(.ax-n-wave) { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.axon-thread > .mine.ax-read > .ax-node:not(g):not(.ax-n-wave) { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.axon-thread > .ax-sending > .ax-node:not(g):not(.ax-n-wave) { background: var(--surface); border-style: dashed; animation: ax-wait .9s ease-in-out infinite alternate; }
.axon-thread > .ax-sending > .ax-rail::after { display: block; top: 0; left: -2px; width: 6px; height: 14px; border-radius: 3px;
  background: linear-gradient(transparent, var(--accent)); animation: ax-run .7s linear infinite; }
.axon-thread > .ax-ghost .msg-card { opacity: .82; }
.ax-state { font-style: italic; }
.axon-thread > .bubble.thinking > .ax-node:not(g) { animation: ax-wait .9s ease-in-out infinite alternate; }
@keyframes ax-wait { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ax-c) 40%, transparent); } to { box-shadow: 0 0 0 5px transparent; } }
@keyframes ax-run { from { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(calc(var(--ax-pad) + 6px)); opacity: 0; } }

/* dendrites: the bubble-edge line is the join now, so the short stub stays hidden */
.ax-dendrite:not(path) { position: absolute; top: calc(var(--ax-pad) + 9px); height: 2px; width: calc(var(--ax-gap) - 6px); pointer-events: none;
  background: color-mix(in srgb, var(--ax-c) 55%, transparent); display: none; }
.axon-thread > .bubble:not(.mine) > .ax-dendrite:not(path) { left: auto; right: calc(100% - var(--ax-x) + 6px); }
.axon-thread > .bubble.mine > .ax-dendrite:not(path) { right: auto; left: calc(var(--ax-x) + 6px); }

/* system notes and calls: a small pill under their node */
.axon-thread > .bubble.system { justify-content: center; padding: calc(var(--ax-pad) + 22px) 0 0; }
.axon-thread > .bubble.system .msg-card { background: var(--surface) !important; border: 1px dashed var(--line); border-radius: 99px;
  padding: 3px 12px; color: var(--muted); font-size: 12.5px; text-align: center; max-width: min(440px, 100%); }
.axon-thread > .bubble.system.call .msg-card { border-style: solid; border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.axon-thread > .bubble.system > .ax-dendrite:not(path) { display: none; }

/* a reply: a curve in the gap beside the card, between the card and the spine. Not through the words. */
.axon-thread > .ax-has-branch::before {
  content: ""; position: absolute; z-index: 0; top: calc(var(--ax-pad) + 10px - var(--ax-reach, 0px)); height: var(--ax-reach, 0px);
  width: calc(var(--ax-gap) - 12px);
  border: 2px solid color-mix(in srgb, var(--ax-c) 55%, transparent); pointer-events: none; box-sizing: border-box;
}
.axon-thread > .ax-has-branch.mine::before { left: calc(var(--ax-x) - var(--ax-gap) + 6px); right: auto; border-left: 0; border-radius: 0 16px 16px 0; }
.axon-thread > .ax-has-branch:not(.mine)::before { left: auto; right: calc(100% - var(--ax-x) - var(--ax-gap) + 6px); border-right: 0; border-radius: 16px 0 0 16px; }
.axon-thread > .ax-far::before { -webkit-mask-image: linear-gradient(transparent, #000 160px); mask-image: linear-gradient(transparent, #000 160px); }
.ax-quote {
  display: block; width: 100%; box-sizing: border-box; margin: 2px 0 6px; padding: 3px 8px; border: 0; border-left: 3px solid var(--accent);
  border-radius: 4px; background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--muted); font: inherit; font-size: 12.5px;
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.ax-quote b { color: var(--ink); font-weight: 600; }
.ax-quote:disabled { cursor: default; }
.ax-flash .msg-card { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
.reply-chip { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 4px 4px 4px 10px; border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--accent-soft); color: var(--ink); font-size: 13px; }
.reply-chip[hidden] { display: none; }
.reply-chip-words { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-chip-words b { margin-right: 4px; }
.b-meta .msg-acts { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; }
.b-meta .msg-acts > :is(.fwd-btn, .rep-btn, .pin-btn) { margin-left: 0; }
.axon-thread .b-meta .msg-acts {                       /* the thread's cards stay as wide as their words: actions float */
  position: absolute; z-index: 2; top: -15px; right: 8px; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .15s; }
.axon-thread .b-meta .msg-acts > button { opacity: 1; padding: 2px 10px !important; border: 0; }
.axon-thread .msg-card:is(:hover, :focus-within, .ax-open) .b-meta .msg-acts { opacity: 1; pointer-events: auto; }
.axon-thread .ax-cont .b-meta .msg-acts { top: -18px; }
.b-meta .ans-btn { opacity: 0; transition: opacity 0.15s; }
.b-meta time + .ans-btn { margin-left: auto; }
.bubble:is(:hover, :focus-within) .b-meta .ans-btn { opacity: 1; }
@media (hover: none) { .b-meta .ans-btn { opacity: 1; } }
.bubble.filtered .msg-card > :not(.filtered-cover) { display: none; }
.file-chip.voice { display: grid; gap: 4px; }
.file-chip.voice audio { width: min(300px, 100%); }

/* breaks: a new day, or more than an hour, is a node of Ranvier with the time */
.ax-break { display: flex; justify-content: center; padding: 18px 0 4px; }
.ax-break > .ax-rail { background: linear-gradient(color-mix(in srgb, var(--faint) 55%, transparent) 0 22%, transparent 22% 78%,
  color-mix(in srgb, var(--faint) 55%, transparent) 78%); }
.ax-break time { position: relative; z-index: 1; padding: 2px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  color: var(--muted); font-size: 12px; }

/* typing: a soft pulse at the end of the line */
.ax-typing { position: relative; min-height: 34px; list-style: none; --ax-x: var(--thread-center, 50%); }
.bubbles:not(.axon-thread) > .ax-typing { min-height: 0; padding: 2px 4px; }
.bubbles:not(.axon-thread) > .ax-typing :is(.ax-rail, .ax-pulse) { display: none; }
.ax-typing > .ax-rail { bottom: 50%; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.ax-pulse { position: absolute; left: var(--ax-x); top: 12px; width: 10px; height: 10px; transform: translateX(-50%); border-radius: 50%;
  background: var(--accent); animation: ax-pulse 1.4s ease-in-out infinite; }
.axon-thread > .ax-typing small { position: absolute; left: calc(var(--ax-x) + 14px); top: 8px; color: var(--muted); font-size: 12px; }
.bubbles:not(.axon-thread) > .ax-typing small { color: var(--muted); font-size: 12px; }
@keyframes ax-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); transform: translate(-50%, -6px); }
  50% { box-shadow: 0 0 0 7px transparent; transform: translate(-50%, 2px); } }

/* transmission.js in the thread: the card pops in and the node lights, the line itself never moves */
.axon-thread > .tx-hold { visibility: visible; }
.axon-thread > .tx-hold > :is(.msg-card, .ax-node:not(g), .ax-dendrite:not(path)) { visibility: hidden; }
.axon-thread > .tx-landed { animation: none; }
.axon-thread > .tx-landed::after { display: none; }
.axon-thread > .tx-landed .msg-card { animation: tx-land .5s cubic-bezier(.2, 1.5, .4, 1); }
.axon-thread > .tx-landed > .ax-node:not(g) { animation: ax-light .7s ease-out; }
@keyframes ax-light { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ax-c) 70%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

/* a narrow desktop pane (the chat beside Cortivas): keep the centred split, never pin the line to one edge */
@container axthread (max-width: 639px) {
  .axon-thread > li { --thread-gutter: 6%; --ax-gap: 18px; }
  .axon-thread .msg-card { max-width: 100%; }
  .axon-thread > .bubble.system { justify-content: flex-start; padding-top: var(--ax-pad); }
  .axon-thread > .bubble.system .msg-card { border-left-style: solid; text-align: left; border-radius: 12px; }
  .axon-thread > .bubble.system > .ax-dendrite:not(path) { display: block; }
  .ax-break { justify-content: flex-start; }
  .ax-break time { margin-left: 2px; }
}

/* right-to-left chats mirror the thread: yours on the right of the spine, theirs on the left.
   dir on the list (.axon-thread[dir=rtl]) counts too, for Arabic, Hebrew, Persian and Urdu pages. */
:is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > .bubble:not(.mine) { justify-content: flex-start; padding-left: 0; padding-right: calc(100% - var(--ax-x) + var(--ax-gap)); }
:is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > .bubble.mine { justify-content: flex-end; padding-right: 0; padding-left: calc(var(--ax-x) + var(--ax-gap)); }
:is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > .bubble:not(.mine) > .ax-dendrite:not(path) { left: auto; right: calc(100% - var(--ax-x) + 6px); }
:is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > .bubble.mine > .ax-dendrite:not(path) { right: auto; left: calc(var(--ax-x) + 6px); }
:is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > .ax-has-branch.mine::before { right: auto; left: calc(var(--ax-x) + 7px); border-left: 0; border-radius: 0 16px 16px 0; }
:is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > .ax-has-branch:not(.mine)::before { left: auto; right: calc(100% - var(--ax-x) + 7px); border-right: 0; border-radius: 16px 0 0 16px; }
@container axthread (max-width: 639px) {
  :is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > .bubble:not(.mine),
  :is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > .bubble.mine { justify-content: flex-start; padding-right: calc(var(--ax-x) + var(--ax-gap)); padding-left: 0; }
  :is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > .bubble:not(.mine) > .ax-dendrite:not(path),
  :is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > .bubble.mine > .ax-dendrite:not(path) { right: calc(var(--ax-x) + 6px); left: auto; }
  :is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) .msg-card { border-left: 0; border-right: 3px solid var(--ax-c); }
  :is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > li > .ax-rail,
  :is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > li > .ax-node:not(g),
  :is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > li > .ax-collateral { left: auto; right: var(--ax-x); }
}

/* Phone: yours stay left-of-centre (line on the left of your bubble). Theirs stay right-of-centre
   (line on the right of theirs). Documents sit in the middle. Never pin both lines to one edge. */
@media (max-width: 760px) {
  .msgr .axon-thread > li { --thread-gutter: 6%; --thread-gap: 18px; --ax-gap: 18px; }
  .msgr .axon-thread .msg-card { max-width: 100%; }
  .dw-msg.mine {
    align-self: flex-start; justify-items: start;
    margin-left: var(--thread-gutter); margin-right: calc(100% - var(--thread-center) + var(--thread-gap));
  }
  .dw-msg.theirs {
    align-self: flex-end;
    margin-left: calc(var(--thread-center) + var(--thread-gap)); margin-right: var(--thread-gutter);
  }
  .dw-msg:has(.tc) { align-self: center; margin-left: var(--thread-gutter); margin-right: var(--thread-gutter); max-width: 86%; }
}

/* Mood ring, translation, canvas thread label, Axork message actions (not a green chat copy). */
.thread-chrome { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--sidebar) 70%, transparent); }
.thread-chrome[hidden] { display: none; }
.mood-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); font: 600 12.5px var(--text); }
.mood-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--mood, var(--ok)); }
.mood-learn { margin: 10px auto 0; max-width: 28em; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface); color: var(--muted); font-size: 12.5px; text-align: center; }
.mood-legend { margin: 0 16px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--edge); font-size: 12.5px; }
.mood-legend b { display: block; margin-bottom: 6px; }
.mood-keys { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 6px; padding: 0; list-style: none; color: var(--muted); }
.mood-keys li { display: inline-flex; align-items: center; gap: 6px; }
.mood-keys i { width: 8px; height: 8px; border-radius: 50%; }
.mood-keys .m-calm { background: var(--ok); } .mood-chip.m-calm { --mood: var(--ok); }
.mood-keys .m-bright { background: var(--cost-5); } .mood-chip.m-bright { --mood: var(--cost-5); }
.mood-keys .m-focused { background: var(--accent); } .mood-chip.m-focused { --mood: var(--accent); }
.mood-keys .m-tense { background: var(--danger); } .mood-chip.m-tense { --mood: var(--danger); }
.axon-thread[data-mood="calm"] > li > .ax-rail { background: color-mix(in srgb, var(--ok) 55%, transparent); }
.axon-thread[data-mood="bright"] > li > .ax-rail { background: color-mix(in srgb, var(--cost-5) 55%, transparent); }
.axon-thread[data-mood="focused"] > li > .ax-rail { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.axon-thread[data-mood="tense"] > li > .ax-rail { background: color-mix(in srgb, var(--danger) 55%, transparent); }
.ax-menu {
  position: absolute; z-index: 8; top: 28px; right: 8px; min-width: 180px; padding: 6px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-2), var(--edge); display: grid; gap: 2px;
}
.ax-menu[hidden] { display: none; }
.ax-menu button {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: 600 14px var(--text); text-align: left; cursor: pointer;
}
.ax-menu button:hover, .ax-menu button:focus-visible { background: var(--hover); }
.ax-menu .danger { color: var(--danger); }
.ax-menu .ax-menu-more { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; color: var(--muted); }
.msg-acts .more-btn { opacity: 1; }
.compose-hint { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.thread-center-range { margin-top: 8px; }
.thread-center-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* In-thread canvas: PDF/code/file preview, View more, widen, export. Playing video stays on its
   message, centred at bubble width (composer ratio from a 430px phone), never edge-to-edge. */
.tc { display: grid; gap: 8px; width: 100%; max-width: 100%; }
.tc-file { display: flex; align-items: center; gap: 10px; }
.tc-file .fp-tag { flex: none; }
.tc-file-meta { display: grid; min-width: 0; flex: 1; }
.tc-file-meta b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-file-meta small { font-size: 12px; color: var(--muted); }
.tc-open { flex: none; min-height: 44px; min-width: 64px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--bg); color: var(--accent); font: 600 13px var(--text); cursor: pointer; }
.tc-slot { display: none; }
.tc.is-live-home .tc-slot { display: block; height: var(--tc-slot-h, 160px); }
.tc-stage { position: relative; width: 100%; max-width: 100%; border-radius: 12px; overflow: hidden; background: var(--bg); }
.tc-preview { max-height: 7.6em; overflow: hidden; padding: 8px 10px; font-size: 13.5px; line-height: 1.45; }
.tc.is-more .tc-preview { max-height: var(--tc-more-h, 70vh); overflow: auto; }
.tc-doc-title { display: block; margin-bottom: 4px; }
.tc-pre { margin: 0; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.tc-code-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.tc-copy { margin-left: auto; min-height: 32px; padding: 4px 10px; border: 0; border-radius: 8px; background: var(--hover);
  color: var(--ink); font: 600 12px var(--text); cursor: pointer; }
.tc-image, .tc-video { display: block; width: 100%; max-width: 100%; max-height: 220px; object-fit: cover; background: #10162A; border: 0; }
.tc-audio { width: 100%; }
.tc-play { position: absolute; inset: auto auto 10px 10px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 99px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); font: 600 13px var(--text); cursor: pointer; }
.tc-time { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--surface); font: 600 12px var(--text); }
.tc-live-bar { display: none; position: absolute; top: 8px; right: 8px; }
.tc-stage.is-live .tc-live-bar { display: block; }
.tc-lock { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  color: var(--ink); font: 600 12.5px var(--text); cursor: pointer; }
.tc-lock[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.tc-stage.is-live {
  position: fixed; z-index: 36; left: var(--tc-x, 50%); top: var(--tc-y, 20%);
  width: var(--tc-w); height: var(--tc-h); max-width: min(var(--tc-w), calc(100vw - 2 * var(--tc-gutter)));
  margin: 0; border-radius: 14px; box-shadow: var(--shadow); background: #10162A;
}
.tc-stage.is-live .tc-video { max-height: none; height: 100%; object-fit: contain; }
.tc-stage.is-live.is-idle { animation: tc-bounce 0.9s ease-in-out 2; }
@keyframes tc-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-7px); }
  75% { transform: translateY(6px); }
}
.tc.is-wide .tc-stage:not(.is-live) {
  position: fixed; z-index: 34; left: var(--tc-wide-x); top: var(--tc-wide-y);
  width: var(--tc-wide-w); height: var(--tc-wide-h); max-width: calc(100vw - 2 * var(--tc-gutter));
}
.tc.is-full .tc-stage:not(.is-live) {
  position: fixed; z-index: 38; left: var(--tc-gutter); top: var(--tc-gutter);
  width: calc(100vw - 2 * var(--tc-gutter)); height: calc(100vh - 2 * var(--tc-gutter));
  max-width: calc(100vw - 2 * var(--tc-gutter));
}
.tc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tc-export { position: relative; margin-right: auto; }
.tc-export-btn, .tc-more, .tc-widen, .tc-arrow {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  color: var(--ink); font: 600 13px var(--text); cursor: pointer;
}
.tc-export-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 8; min-width: 160px; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); display: grid; }
.tc-export-item { min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; text-align: left;
  font: 600 14px var(--text); cursor: pointer; }
.tc-export-item:hover, .tc-export-item:focus-visible { background: var(--hover); }
@media (prefers-reduced-motion: reduce) {
  .tc-stage.is-live.is-idle { animation: none; }
}

/* Axork Chat uses the same spine as Synaram: you on the left, Corlatra on the right (LTR). */
.messages.axon-thread { container: axthread / inline-size; gap: 0; --ax-x: var(--thread-center, 50%); --ax-gap: 28px; --ax-pad: 14px; }
.messages.axon-thread > .msg { position: relative; display: flex; flex-direction: column; width: 100%; max-width: none;
  padding: var(--ax-pad) 0 4px; background: none; box-sizing: border-box; }
.messages.axon-thread > .msg-user { align-items: flex-start; padding-left: 0; padding-right: calc(100% - var(--ax-x) + var(--ax-gap)); }
.messages.axon-thread > .msg-ai { align-items: flex-end; padding-left: calc(var(--ax-x) + var(--ax-gap)); padding-right: 0; grid-template-columns: none; }
.messages.axon-thread > .msg-ai .avatar-ai { display: none; }
.messages.axon-thread > .msg-user .bubble,
.messages.axon-thread > .msg-ai .content { position: relative; max-width: min(520px, 100%); }
/* Corlatra is a packet on the right of the spine, not a full-width column that leaves the line looking like a right rail. */
.messages.axon-thread > .msg-ai .content {
  align-self: flex-start; width: fit-content; box-sizing: border-box;
  padding: 8px 14px 10px; border-radius: 16px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ax-c, var(--accent)) 28%, var(--line));
}
.messages.axon-thread > .msg-ai .actions { margin-left: 0; flex-wrap: wrap; }
.messages.axon-thread > .msg-ai > .ax-dendrite:not(path) { left: calc(var(--ax-x) + 6px); right: auto; }
.messages.axon-thread > .msg-user > .ax-dendrite:not(path) { right: calc(100% - var(--ax-x) + 6px); left: auto; }
.messages.axon-thread > .msg-ai:has(.body.streaming, .status-line:not([hidden])) > .ax-node:not(g) {
  background: var(--surface); animation: ax-wait .9s ease-in-out infinite alternate; }
.messages.axon-thread .msg-ai .content > .ix-card { position: relative; }
:is([dir="rtl"] .messages.axon-thread, .messages.axon-thread[dir="rtl"]) > .msg-user {
  align-items: flex-end; padding-right: 0; padding-left: calc(var(--ax-x) + var(--ax-gap)); }
:is([dir="rtl"] .messages.axon-thread, .messages.axon-thread[dir="rtl"]) > .msg-ai {
  align-items: flex-start; padding-left: 0; padding-right: calc(100% - var(--ax-x) + var(--ax-gap)); }
:is([dir="rtl"] .messages.axon-thread, .messages.axon-thread[dir="rtl"]) > .msg-ai > .ax-dendrite:not(path) {
  right: calc(100% - var(--ax-x) + 6px); left: auto; }
:is([dir="rtl"] .messages.axon-thread, .messages.axon-thread[dir="rtl"]) > .msg-user > .ax-dendrite:not(path) {
  left: calc(var(--ax-x) + 6px); right: auto; }
@container axthread (max-width: 639px) {
  .messages.axon-thread > .msg { --ax-x: 14px; --ax-gap: 18px; }
  .messages.axon-thread > .msg-user,
  .messages.axon-thread > .msg-ai { align-items: flex-start; padding-left: calc(var(--ax-x) + var(--ax-gap)); padding-right: 0; }
  .messages.axon-thread > .msg-user > .ax-dendrite:not(path),
  .messages.axon-thread > .msg-ai > .ax-dendrite:not(path) { left: calc(var(--ax-x) + 6px); right: auto; }
  :is([dir="rtl"] .messages.axon-thread, .messages.axon-thread[dir="rtl"]) > .msg-user,
  :is([dir="rtl"] .messages.axon-thread, .messages.axon-thread[dir="rtl"]) > .msg-ai {
    align-items: flex-start; padding-right: calc(var(--ax-x) + var(--ax-gap)); padding-left: 0; }
  :is([dir="rtl"] .messages.axon-thread, .messages.axon-thread[dir="rtl"]) > .msg-user > .ax-dendrite:not(path),
  :is([dir="rtl"] .messages.axon-thread, .messages.axon-thread[dir="rtl"]) > .msg-ai > .ax-dendrite:not(path) {
    right: calc(var(--ax-x) + 6px); left: auto; }
}

/* The reply link: a coloured collateral on the spine from this node up to the node it answers.
   Folding tucks that line to a tick. The quote inside the packet can stay; the line is the link. */
.axon-thread > .ax-has-branch:has(> .ax-collateral)::before { content: none; }
/* The reply link (owner, 1 Nov 2026: "the connection points need to be polished"): one smooth bracket beside the spine,
   from the reply's node up to the node it answers, in the replier's colour. Its two ends run level into the nodes and
   tuck under them (the nodes sit above it), so no stub crosses a node and nothing sticks out on the far side.
   Synaram and Axork Chat draw the same one; under 640 px, where the spine is near the left edge, it opens to the right. */
.axon-thread > .ax-has-branch:not(.ax-folded)::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; box-sizing: border-box;
  top: calc(var(--ax-pad, 14px) + 9px - var(--ax-reach, 0px)); height: calc(var(--ax-reach, 0px) + 2px);
  left: calc(var(--ax-x) - 18px); right: auto; width: 18px;
  border: 2px solid color-mix(in srgb, var(--ax-c, var(--accent)) 75%, transparent); border-right: 0; border-radius: 12px 0 0 12px;
}
.axon-thread > .ax-has-branch:not(.ax-folded) > .ax-collateral { visibility: hidden; }
.axon-thread > .ax-has-branch > .ax-node:not(g) { z-index: 2; }
@container axthread (max-width: 639px) {
  .axon-thread > .ax-has-branch:not(.ax-folded)::before {
    left: var(--ax-x); width: min(14px, calc(var(--ax-gap, 18px) - 4px));
    border-right: 2px solid color-mix(in srgb, var(--ax-c, var(--accent)) 75%, transparent); border-left: 0; border-radius: 0 12px 12px 0;
  }
}
.ax-collateral {
  position: absolute; z-index: 4; left: var(--ax-x); width: 3px; margin-left: -1.5px;
  top: calc(var(--ax-pad, 14px) + 10px - var(--ax-reach, 0px)); height: var(--ax-reach, 0px);
  background: var(--ax-c, var(--accent)); border-radius: 2px; pointer-events: none;
}
.ax-collateral::before, .ax-collateral::after {
  content: ""; position: absolute; height: 3px; width: min(16px, calc(var(--ax-gap, 28px) - 10px));
  background: var(--ax-c, var(--accent));
}
.ax-to-mine > .ax-collateral::before { top: -1px; right: 0; }
.ax-row:not(.ax-to-mine) > .ax-collateral::before { top: -1px; left: 0; }
.mine > .ax-collateral::after, .msg-user > .ax-collateral::after { bottom: -1px; right: 0; }
.ax-row:not(.mine):not(.msg-user) > .ax-collateral::after { bottom: -1px; left: 0; }
.ax-folded > .ax-collateral { top: calc(var(--ax-pad, 14px) + 4px); height: 12px; width: 3px; pointer-events: auto; cursor: pointer; }
@container axthread (max-width: 639px) {
  .ax-collateral::before, .ax-collateral::after { left: 0; right: auto; }
  :is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > li > .ax-rail,
  :is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > li > .ax-node:not(g) { transform: translateX(50%); }
  :is([dir="rtl"] .axon-thread, .axon-thread[dir="rtl"]) > li > .ax-collateral { margin-left: 0; margin-right: -1.5px; }
}
.ax-folded > .ax-collateral::before { content: none; }
.ax-folded > .ax-collateral::after { width: 8px; bottom: 4px; }
.ax-fold {
  display: inline-flex; align-items: center; min-height: 28px; margin-top: 4px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted);
  font: 600 12px/1 var(--text); cursor: pointer;
}
.ax-fold:hover, .ax-fold:focus-visible { color: var(--ink); border-color: var(--accent); }

/* Hover lifts one bubble and keeps Reply on it. A mouse drag is not a slide. */
@media (hover: hover) and (pointer: fine) {
  .axon-thread > .ax-row:hover { z-index: 3; }
  .axon-thread > .bubble:hover > .msg-card,
  .messages.axon-thread > .msg:hover > .bubble,
  .messages.axon-thread > .msg:hover > .content {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
  }
}

/* Myelin: older turns are one line on the spine. The live end stays open. */
.axon-thread > .ax-myelin > .msg-card,
.messages.axon-thread > .ax-myelin > .bubble,
.messages.axon-thread > .ax-myelin > .content {
  display: flex; align-items: baseline; gap: 8px; max-height: 2.4em; overflow: hidden; cursor: pointer;
}
.axon-thread > .ax-myelin .b-body,
.messages.axon-thread > .ax-myelin .body,
.messages.axon-thread > .ax-myelin .bubble-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.axon-thread > .ax-myelin .pdf-packet,
.axon-thread > .ax-myelin .msg-code,
.messages.axon-thread > .ax-myelin .msg-files,
.messages.axon-thread > .ax-myelin .actions,
.axon-thread > .ax-myelin .msg-acts { display: none; }

/* Spine whisper: the chatbot cannot read this chat. Not a bubble. */
.ax-whisper {
  position: relative; list-style: none; display: flex; justify-content: center; padding: 10px 0 2px;
  color: var(--muted); font-size: 12.5px;
}
.ax-whisper p { position: relative; z-index: 1; margin: 0; padding: 1px 10px; background: var(--bg); }

/* A pinned decision: one node, inbound marks from the people here. */
.ax-converge { justify-content: center; padding-top: 18px; }
.ax-converge .msg-card { text-align: center; font-size: 13px; }
.ax-converge p { margin: 0; }
.ax-inbound { display: inline-flex; gap: 4px; margin-top: 4px; }
.ax-in { width: 8px; height: 8px; border-radius: 50%; background: var(--ax-c, var(--accent)); }

/* A packet can hold prose, a PDF card and a code block together. */
.pdf-packet { display: grid; gap: 6px; margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pdf-packet-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pdf-mark { flex: none; padding: 3px 6px; border-radius: 4px; background: var(--danger); color: var(--surface); font: 700 11px/1 var(--text); }
.pdf-packet-head span:last-child { min-width: 0; display: grid; }
.pdf-packet-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-packet-head small, .msg-code-head b { color: var(--muted); font-size: 12px; font-weight: 600; }
.pdf-preview { min-height: 72px; max-height: 160px; overflow: hidden; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.pdf-preview .pdf-canvas { display: block; width: 100%; height: auto; }
.pdf-packet-acts { display: flex; gap: 8px; }
.msg-code { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.msg-code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.msg-code pre { margin: 0; padding: 8px 10px; overflow: auto; font: 13px/1.45 var(--ui-mono, ui-monospace, monospace); }

/* The message column ends before the right dock. The bell lives in the top bar on these pages. */
:root { --dock-gutter: 76px; }
body.msgr-page .msgr-main,
body.workspace-page .main,
.dw-list.axon-thread { padding-right: var(--dock-gutter); box-sizing: border-box; }
/* Phones: one pop-out at a time and no dock column, so the chat uses the whole width (pre-launch pass, 1 Nov 2026). */
@media (max-width: 699px) { :root { --dock-gutter: 0px; } }
.ax-bell.ax-bell-parked {
  position: relative; top: auto; right: auto; left: auto; width: 40px; height: 40px; z-index: 2;
  box-shadow: none; cursor: pointer;
}
.ax-bell.ax-bell-parked svg { width: 20px; height: 20px; }

/* List: a spine mark. Active is a little stronger. Unread is one dot, not a pile of badges. */
.msgr-page .conv-list .msg-row { position: relative; padding-left: 18px; }
.msgr-page .conv-list .msg-row::before {
  content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--faint) 80%, transparent);
}
.msgr-page .conv-list .msg-row.active::before { width: 3px; background: var(--accent); }
.msgr-page .conv-list .msg-row.unread::after {
  content: ""; position: absolute; left: 3px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.msgr-page .conv-list .msg-row.unread .row-top b::before { content: none; }
.chat-list .chat-item { position: relative; }
.chat-list .chat-item::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--faint) 70%, transparent);
}
.chat-list .chat-item.active::before { width: 3px; background: var(--accent); }

/* Pop-out threads use the phone spine: one side, the link still drawn. */
.dw-list.axon-thread { --ax-x: 14px; --ax-gap: 16px; --ax-pad: 8px; gap: 0; }
.dw-list.axon-thread > .dw-msg { position: relative; max-width: none; width: 100%; padding: 8px 0 4px 28px; box-sizing: border-box; }
.dw-list.axon-thread > .dw-msg.mine { --ax-c: var(--accent); }
.dw-list.axon-thread > .dw-msg > .ax-dendrite:not(path) { left: calc(var(--ax-x) + 6px); right: auto; }
.dw-list.axon-thread > .ax-row > .ax-collateral::before,
.dw-list.axon-thread > .ax-row > .ax-collateral::after { left: 0; right: auto; }
.dw-list.axon-thread[dir="rtl"] > .dw-msg { padding-left: 0; padding-right: 28px; }
.dw-list.axon-thread[dir="rtl"] > li > .ax-rail,
.dw-list.axon-thread[dir="rtl"] > li > .ax-node:not(g) { left: auto; right: var(--ax-x); transform: translateX(50%); }
.dw-list.axon-thread[dir="rtl"] > .dw-msg > .ax-dendrite:not(path) { right: calc(var(--ax-x) + 6px); left: auto; }
.dw-list.axon-thread[dir="rtl"] > li > .ax-collateral { left: auto; right: var(--ax-x); margin-left: 0; margin-right: -1.5px; }
.dw-list.axon-thread[dir="rtl"] > .ax-row > .ax-collateral::before,
.dw-list.axon-thread[dir="rtl"] > .ax-row > .ax-collateral::after { right: 0; left: auto; }

@media (prefers-reduced-motion: reduce) {
  .axon-thread *, .axon-thread *::before, .axon-thread *::after, .axon-thread > li::before, .axon-thread > li::after {
    animation: none !important; transition: none !important; }
}

/* The workforce register (static/workforce.js): owner dashboard → Workforce, Control centre → HR. */
.wf-root { display: flex; flex-direction: column; gap: 16px; }
.wf-root h3 { margin: 0 0 8px; font-size: 16px; }
.wf-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.wf-field { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; min-width: 0; }
.wf-field input, .wf-field select { min-height: 36px; }
.wf-num { font-family: var(--ui-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
.wf-mine, .wf-events { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.wf-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-say { padding: 8px 12px; border-radius: 8px; background: var(--accent-soft, transparent); color: var(--ink); }
.wf-say[data-kind="error"] { color: var(--danger); }
.wf-explain summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.wf-explain dl { margin-top: 8px; }

/* Staff perks counts (staff-perks.js): numbers only, in the HR tab and the owner's Workforce panel. */
.wf-counts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin: 6px 0 0; font-size: 14px; }
.wf-counts dt { color: var(--muted); }
.wf-counts dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------------------------------------------------------------------------------------------------------------------
   Locigram (locigram-box.js, locigram.js, docs/search.md "The Locigram box"): the search box, its picture-in-picture
   card, the mouth, the ecosystem rail and locigram.com's own page. Colours are tokens only (4.5:1 at every shade). */
.lgb-host { position: relative; }
.lgb { display: flex; width: 100%; }
.lgb-box { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); color: var(--ink); }
.lgb-box svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.lgb-box input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; padding: 10px 0; }
.lgb-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* neurork.com's hero: a square cut-out field, like a search engine's home. */
.nk-search { width: min(680px, 100%); display: flex; flex-direction: column; gap: 10px; margin-top: 6px; text-align: left; }
.cl-home .lgb-box { min-height: 60px; padding: 0 18px; border: 2px solid var(--cl-edge); border-radius: 4px; background: var(--cl-surface);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06); }
.cl-home .lgb-box input { font-size: 19px; }
.cl-home .lgb-box:focus-within { border-color: var(--cl-accent); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06), 0 0 0 3px var(--cl-soft); }
/* The card: a miniature of the results page. A real link; the whole card is the target. */
.lgb-card { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow); text-decoration: none; cursor: pointer; }
.lgb-card[hidden] { display: none; }
.lgb-card:hover, .lgb-card:focus-visible { border-color: var(--accent); }
.lgb-card-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.lgb-card-head img { width: 20px; height: 20px; }
.lgb-card-head b { color: var(--ink); }
.lgb-card-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgb-card-q::before { content: "“"; } .lgb-card-q::after { content: "”"; }
.lgb-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lgb-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; font-size: 14px; }
.lgb-line-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgb-line-sub { grid-column: 2; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgb-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 22px; padding: 0 6px; border-radius: 99px;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); background: var(--accent-soft); }
.lgb-chip[data-track="C"], .lgb-chip[data-track="D"] { color: var(--ink); background: var(--hover); }
.lgb-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--hover); color: var(--accent); }
.lgb-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lgb-mail { color: var(--cost-2); } .lgb-fascichat { color: var(--cost-5); } .lgb-event { color: var(--cost-1); } .lgb-person { color: var(--cost-3); }
.lgb-card-note { font-size: 13px; color: var(--muted); }
.lgb-card-foot { font-size: 13px; font-weight: 600; color: var(--accent); }
/* The mouth: a full-screen layer clipped to the card, opened by Web Animations; the page behind steps back. */
.lgb-mouth { position: fixed; inset: 0; z-index: 10090; display: grid; place-items: center; background: var(--surface); clip-path: inset(40% 40% round 18px); }
.lgb-mouth-inner img { width: 56px; height: 56px; opacity: 0.9; }
body.lgb-yawning > :not(.lgb-mouth):not(.skip-link) { transition: opacity 0.5s ease, transform 0.6s ease; opacity: 0.35; transform: scale(0.97); transform-origin: 50% 40%; }
/* In every app's top bar. */
.lgb-top { flex: 1 1 260px; max-width: 420px; min-width: 0; }
.topbar .lgb-top { flex: 0 1 320px; margin-right: 6px; }
.lgb-top .lgb-box { min-height: 36px; border-radius: 10px; }
.lgb-top .lgb-box input { font-size: 14px; padding: 6px 0; }
.lgb-mini { display: none; }
@media (max-width: 760px) {
  .lgb-top { flex: 0 0 auto; }
  .lgb-top .lgb, .lgb-top .lgb-card { display: none; }
  .lgb-mini { display: inline-grid; }
}
/* Universal Locigram control: icon in the top bar, or the Axork left-panel row. Opens a pop, does not leave the page. */
.lgb-seek-host { position: relative; flex: none; }
.lgb-seek { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); }
.lgb-seek.on, .lgb-seek[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); }
.lgb-seek svg, .lgb-seek-row svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lgb-seek-row {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 8px; margin: 4px 0;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer;
}
.lgb-seek-row.on, .lgb-seek-row[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.lgb-seek-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.lgb-seek-row.on .lgb-seek-ico { background: var(--accent); color: var(--accent-ink); }
.lgb-seek-row b { display: block; font-size: 13.5px; font-weight: 600; }
.lgb-seek-row small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.lgb-pop {
  position: absolute; z-index: 70; width: min(440px, calc(100vw - 32px));
  background: var(--glass-opaque); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-3), var(--edge); overflow: hidden;
}
.lgb-pop[hidden] { display: none; }
.lgb-pop-top { top: calc(100% + 8px); right: 0; }
.lgb-pop-side { top: 0; left: calc(100% + 8px); }
.lgb-pop header { display: flex; align-items: baseline; gap: 8px; padding: 14px 14px 0; }
.lgb-pop header b { font-size: 16px; }
.lgb-pop header small { color: var(--muted); }
.lgb-scope { margin: 10px 12px 0; }
.lgb-scope-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--accent); background: var(--accent-soft); color: var(--ink); text-align: left; cursor: pointer;
}
.lgb-scope-btn b { display: block; font-size: 14px; }
.lgb-scope-btn small { color: var(--muted); font-size: 12px; }
.lgb-scope-btn .lgb-chev { margin-left: auto; color: var(--accent); width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.lgb-scope-menu { margin-top: 6px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.lgb-scope-menu[hidden] { display: none; }
.lgb-scope-opt { display: flex; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.lgb-scope-opt.on { background: var(--surface); box-shadow: var(--shadow-1), var(--edge); }
.lgb-dot { width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--accent); flex: none; }
.lgb-scope-opt.on .lgb-dot { background: var(--accent); box-shadow: inset 0 0 0 3px var(--accent-ink); }
.lgb-scope-opt b { display: block; font-size: 14px; }
.lgb-scope-opt small { color: var(--muted); font-size: 12.5px; }
.lgb-web { display: block; margin: 4px 8px 6px; color: var(--accent); font-size: 13px; font-weight: 600; }
.lgb-field {
  margin: 10px 12px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--muted);
}
.lgb-field svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.lgb-field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; }
.lgb-hits { padding: 0 8px 8px; max-height: 240px; overflow: auto; }
.lgb-hits h3 { margin: 8px 8px 2px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.lgb-hit { display: block; padding: 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.lgb-hit:hover, .lgb-hit:focus-visible { background: var(--surface); }
.lgb-hit b { display: block; font-size: 14px; }
.lgb-hit small { color: var(--muted); }
.lgb-pop-foot { display: flex; justify-content: space-between; padding: 8px 14px 12px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; }
.lgb-pop-foot a { color: var(--accent); font-weight: 600; }
.page-tools .lgb-seek-host { order: 8; }
.page-tools .acc-face { order: 9; }
.page-tools .nk-launch-btn { order: 7; }
.page-tools .icon-btn, .page-tools .lgb-seek { width: 44px; height: 44px; }

/* Axon strand: chat toolbox. Pop out and Alerts stay visible. */
.axon-strand {
  display: flex; align-items: center; gap: 0; height: 40px; padding: 0 10px 0 12px; margin-left: auto;
  border-radius: 14px; border: 1px solid var(--line); background: var(--glass-opaque);
  box-shadow: var(--shadow-1), var(--edge);
}
.axon-strand .axon-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); margin-right: 10px; }
.axon-bead { display: flex; align-items: center; gap: 6px; background: transparent; border: 0; color: inherit; padding: 0; cursor: pointer; }
.axon-bead > b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.axon-node {
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--bg);
  color: var(--accent); display: grid; place-items: center; position: relative; flex: none;
}
.axon-node svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.axon-gap { width: 18px; height: 2px; margin: 0 6px; background: var(--accent); flex: none; }
.workspace-page .topbar .app-nav { flex: 1 1 280px; max-width: min(560px, 42%); min-width: 0; }
/* Wide enough for Corlatra through Daxolex. The 42% cap clipped Daxolex under
   "New chat". Phones keep the scrolling icon tabs. */
@media (min-width: 861px) {
  .workspace-page .topbar .app-nav {
    flex: 1 0 24rem;
    min-width: 0;
    max-width: min(45rem, 100%);
  }
}
@media (max-width: 1100px) {
  .axon-bead > b, .axon-strand .axon-tag { display: none; }
  .axon-gap { width: 10px; margin: 0 4px; }
}

.lgb-mail-all { margin-left: 8px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.lgb-mail-all:hover { border-color: var(--accent); }
/* The ecosystem rail: left on desktop, a bottom bar on phones. */
.lgb-rail { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; }
.lgb-rail[hidden] { display: none; }
.lgb-rail-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 72px; min-height: 64px;
  padding: 8px 6px; border-radius: 12px; color: var(--ink); text-decoration: none; text-align: center; }
.lgb-rail-app img { width: 28px; height: 28px; object-fit: contain; }
.lgb-rail-app b { font-size: 12px; font-weight: 600; }
.lgb-rail-app small { font-size: 11px; color: var(--muted); }
.lgb-rail-app:hover { background: var(--hover); }
.lgb-rail-app[aria-current="page"] { background: var(--accent-soft); }
.lgb-rail-account { margin-top: auto; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; padding-top: 12px; }
.lgb-count { position: absolute; top: 4px; right: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
/* Images and Videos: a grid of cards; News and Journals: lists with their own meta line (search.js). */
.ws-results.ws-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ws-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.ws-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-sm, 8px); background: var(--hover); overflow: hidden; color: var(--muted); font-size: 13px; text-align: center; }
.ws-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-thumb a { display: block; width: 100%; height: 100%; }
.ws-duration { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: var(--ink); color: var(--surface); font-size: 12px; font-variant-numeric: tabular-nums; }
.ws-card .ws-title { font-size: 14.5px; margin: 0; overflow-wrap: anywhere; }
.ws-card .ws-meta { font-size: 12.5px; }
.ws-licence { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink); font-size: 12px; }
.ws-licence a { color: inherit; text-decoration: none; }
.ws-licence a:hover, .ws-licence a:focus-visible { text-decoration: underline; }
.ws-source { color: var(--muted); font-size: 12.5px; }
.ws-source a { color: var(--accent); }
.ws-outlet { color: var(--ink); font-weight: 600; }
.ws-when { color: var(--muted); }
.ws-country { color: var(--muted); font-size: 0.85em; letter-spacing: 0.04em; }
.ws-authors { margin: 0 0 4px; color: var(--ink); font-size: 14px; }
.ws-paper-links { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; }
.ws-paper-links a { color: var(--accent); }
.ws-cite { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.ws-cite-out { margin: 8px 0 0; overflow-wrap: anywhere; }
.ws-premium { margin: -6px 0 12px; color: var(--muted); }
/* The AI ladder (search_ai.py): the Better search switch, its price card and the premium marks. Tokens only. */
.ws-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 12px; }
.ws-ai-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.ws-ai-toggle.is-locked { color: var(--muted); }
.ws-ai-line { color: var(--muted); }
.ws-ai-why { background: none; border: 0; padding: 0; min-height: 24px; color: var(--accent); cursor: pointer; text-decoration: underline; }
.ws-ai-why-text { flex-basis: 100%; margin: 0; color: var(--muted); }
.ws-ai-card { flex-basis: 100%; border: 1px solid var(--edge, var(--line)); border-radius: var(--r-3, 12px); padding: 12px 14px;
  background: var(--surface); box-shadow: var(--shadow-1, none); }
.ws-ai-card h3 { margin: 0 0 4px; font-size: 15px; }
.ws-ai-card p { margin: 0 0 6px; color: var(--ink); }
.ws-ai-card-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ws-ov-tier { margin: -4px 0 6px !important; color: var(--accent) !important; font-weight: 600; }
.ws-overview[data-tier="paid"] { border-left-color: var(--violet, var(--accent)); }
.ws-followups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ws-followup { min-height: 28px; }
.ws-rerank { padding: 0 6px; border: 1px solid var(--violet, var(--accent)); border-radius: 6px; color: var(--violet, var(--accent)); font-size: 11px; }
@media (max-width: 760px) {
  .ws-results.ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ws-card .ws-title { font-size: 14px; }
}
.lgs-group { margin: 14px 0; }
.lgs-group-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; color: var(--muted); font-family: var(--text); }
.lgs-group-title svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lgs-group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lgs-item-link { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.lgs-item-link:hover, .lgs-item-link:focus-visible { border-color: var(--accent); }
.lgs-item-link small { color: var(--muted); }
.lgs-open { font-size: 12px; font-weight: 600; color: var(--accent); }
.lgs-things-empty { padding: 20px 4px; color: var(--muted); display: grid; gap: 10px; justify-items: start; }
.lg-frame > .lg-rail { border-right: 1px solid var(--line); }
.lg-frame:has(> .lg-rail:not([hidden])) { grid-template-columns: 96px minmax(0, 1fr); }
@media (max-width: 760px) {
  .lg-frame > .lg-rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 50; flex-direction: row; justify-content: space-around; gap: 0;
    min-height: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
  .lgb-rail-app { min-width: 56px; min-height: 56px; padding: 6px 2px; }
  .lgb-rail-app small { display: none; }
  .lgb-rail-account { margin-top: 0; border-top: 0; padding-top: 6px; }
  .lg-frame:has(> .lg-rail:not([hidden])) { grid-template-columns: 1fr; padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  body.lgb-yawning > :not(.lgb-mouth):not(.skip-link) { transition: none; opacity: 1; transform: none; }
}

/* ===================================================================================================================
   Look and feel: the "Apple x Fluent" GUI (docs/design.md). Tokens are at the top of this file; theme.js repaints them per
   shade. This section is the stage, the rail and the shared components; it is appended so it wins by order.
   ========================================================================================================================== */

/* The Mica stage: the page is a soft tinted gradient, never flat. Quiet Google-like fronts (.cl-quiet, .nk-plain),
   maintenance and share pages paint their own ground. Signed-in Gliaid / Neurosemble / Neurork apps, Neurtor status
   and the rest of the hosts keep the mica wash. */
body, body.page, body.mail-page, body.workspace-page,
body.cl-home:not(.cl-quiet):not(.nk-plain), body.ns-page { background-image: var(--mica); background-attachment: fixed; }
body.cl-quiet, body.nk-plain, body.mt-page, body.sh-page { background-image: none; }
/* Numbers that are compared (Impulses, prices, counts) line up. */
.num, .tabular, .axc-rate, .plan-price b, .meter-label, .kpi b, .axc-pop-top em, .st-main td.num { font-variant-numeric: tabular-nums; }

/* ---- The product capsule (omni.js paintRail, docs/design.md). Painted only with <html data-rail> (features.py new_gui,
   on by default); shown from 900 px. A short icon pill on the right edge, about half the viewport tall and centred.
   Icons only; no Neurork N. The everyday word is a tooltip. axork.com keeps named product tabs in the top bar; other
   product sites hide those tabs because the capsule is the switcher. The page always reserves --rail-gutter on the
   right and reflows (shell, Synaram, mail, cards) so the capsule and any floating bell never paint on words. */
.rail { display: none; }
.nav-title { display: none; }
.nav-search { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.nav-search:empty { display: none; }
@media (min-width: 900px) {
  body.has-rail {
    --rail-gutter: var(--rail-w);
    padding-right: var(--rail-gutter);
  }
  /* Flex/grid min-size:auto was letting panes grow into the padding and sit under the fixed capsule. */
  body.has-rail > *,
  body.has-rail .shell,
  body.has-rail .msgr,
  body.has-rail .mail-app,
  body.has-rail .page-main,
  body.has-rail .main,
  body.has-rail .cal-app,
  body.has-rail .cal-board,
  body.has-rail .lg-frame,
  body.has-rail .page-top {
    min-width: 0;
    max-width: 100%;
  }
  body.has-rail .shell,
  body.has-rail .msgr,
  body.has-rail .mail-app { width: 100%; }
  body.has-rail .rail {
    position: fixed; top: 50%; right: 12px; transform: translateY(-50%); z-index: 45;
    height: 50vh; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 6px; border-radius: 28px;
    background: color-mix(in srgb, var(--sidebar) 96%, transparent); border: 1px solid var(--line);
    box-shadow: var(--shadow-2), var(--edge);
  }
  /* The capsule is where you go, the top bar is what you do here (owner, 1 Nov 2026): nothing in the bar repeats it. */
  body.has-rail .app-nav[aria-label="Sections"],
  body.has-rail .page-top .nk-launch-btn,
  body.has-rail .topbar .nk-launch-btn { display: none; }
  /* The Impulses meter already opens Plans; the Plans button beside it is the same link twice. */
  /* Every app's own tools come first; then the shared set, in one order on every app: Pinned, search, bell,
     Impulses, account. Pinned sits outside .page-tools, so it moves right beside them instead of floating mid-bar. */
  body.has-rail .page-top > .syn-nav-btn { margin-left: auto; }
  body.has-rail .page-tools .lgb-seek-host { order: 1; }
  body.has-rail .page-tools .ax-bell { order: 2; }
  body.has-rail .page-tools .impulse-bank { order: 3; }
  body.has-rail .page-tools .acc-face { order: 9; }
  /* The top bar runs the full width; only the content below steps aside for the capsule (no empty strip on top). */
  body.has-rail > .page-top { max-width: none; margin-right: calc(-1 * var(--rail-gutter)); }
  body.has-rail .lg-frame > .lg-rail,
  body.has-rail .lg-frame > .lgb-rail { display: none; }
  body.has-rail .lg-frame,
  body.has-rail .lg-frame:has(> .lg-rail:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  body.has-rail .page-top .nav-title { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; }
  body.has-rail .side-apps a[href="/locgram"], body.has-rail .side-apps a[href="/mail"],
  body.has-rail .side-apps a[href="/drive"], body.has-rail .side-apps a[href="/messages"], body.has-rail .side-apps a[href="/calendar"] { display: none; }
}
.nav-title b { font: 600 var(--fs-bar)/1.2 var(--text); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.nav-title small { font-size: var(--fs-small); color: var(--muted); }
/* The capsule holds product icons only. The Neurork N is not on it. */
.rail-list { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.rail-item {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: var(--muted); text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.rail-item:hover { background: var(--hover); color: var(--ink); }
.rail-item[aria-current="page"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1), var(--edge); }
.rail-item[aria-current="page"]::after { content: ""; position: absolute; right: 2px; top: 12px; width: 3px; height: 16px; border-radius: 3px; background: var(--accent); }
.rail-item .lingo-ico, .rail-item > svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-space { display: none; }
.rail-mark { display: none; }
.rail-tip {
  position: absolute; right: 48px; left: auto; top: 50%; transform: translateY(-50%); z-index: 46; display: none; align-items: baseline; gap: 6px;
  white-space: nowrap; padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2), var(--edge); color: var(--ink); font: 500 var(--fs-small)/1.3 var(--text); pointer-events: none;
}
.rail-tip b { font-weight: 600; }
.rail-tip small { color: var(--muted); font-size: var(--fs-meta); }
.rail-item:hover .rail-tip, .rail-item:focus-visible .rail-tip { display: inline-flex; }

/* ---- Surfaces. Three layers, back to front: the Mica stage, acrylic panes (--glass with blur: list panes, command bars,
   the composer, the Ask Axork strip) and opaque cards (--surface). Every raised surface gets --edge and a 1 px line. Blur
   is decoration: each pane reads without it. Flyouts and menus are --glass-opaque so text never bleeds through them. */
.acrylic, .glass-pane { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }

/* Command bars (Fluent) wearing frosted glass (Apple): the page's top bar, the chat's top bar, Camrive's toolbar, Mail's
   list bar and the calendar bar. Icons in the accent, text in ink, the 1 px line beneath. */
.page-top, .topbar, .tx-bar, .cal-bar, .mail-stream > .stream-bar, .msgr-side-head, .vw-head {
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.page-top { border-bottom: 1px solid var(--line); box-shadow: none; }
.topbar { border-bottom: 1px solid var(--line); min-height: 56px; position: relative; z-index: 3; }
.main.empty .topbar { border-bottom-color: transparent; }
.page-top .ghost, .topbar .ghost { border-radius: 10px; }
.page-top .icon-btn, .topbar .icon-btn {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
}

/* List panes: the second pane of the three-pane shape (rail · list · content). */
.sidebar, .mail-side, .msgr-side, .tx-side, .st-side { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.mail-app { background: transparent; }
.mail-app .mail-side { background: var(--glass); }
.mail-read, .msgr-main { background: var(--surface); }
/* List rows: 12 px radius, the open one a surface card with the resting shadow and a 3 px accent mark (Fluent). */
.chat-item, .msg-row, .folder { border-radius: var(--r); transition: background var(--t-fast) var(--ease); }
.chat-item.active { background: var(--surface); box-shadow: var(--shadow-1), var(--edge); }
.mail-app .msg-row.active, .msg-row.active { background: var(--surface); box-shadow: var(--shadow-1), var(--edge); position: relative; }
.mail-app .msg-row.active::before { content: ""; position: absolute; left: -2px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--accent); }
.folder.active { background: var(--surface); box-shadow: var(--shadow-1), var(--edge); font-weight: 600; }
.folder.active svg { color: var(--accent); }

/* Cards: 16 px, the resting shadow and the edge highlight. Panels are the Homeostat's and the dashboards' sections. */
.panel, .usage-panel, .card, .plan-card, .pack-card, .kpi, .intro-card, .cc-card, .mx-card, .cal-card, .gw-clouds, .st-tile, .drift-card, .hs-conn li, .hs-gate {
  border-radius: var(--r-lg); box-shadow: var(--shadow-1), var(--edge); border: 1px solid var(--line);
}
.panel, .usage-panel { border-radius: var(--r-xl); }
.plan-card { border-radius: var(--r-xl); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.plan-card.highlight { border: 1px solid var(--accent); padding: 22px 20px 20px; box-shadow: 0 0 0 1px var(--accent), var(--shadow-2); }
.plan-card.current { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.plan-card h3 { font-weight: 600; }
.plan-price b { font-weight: 600; letter-spacing: -0.02em; }
.plan-flag { font-weight: 700; font-size: 11.5px; }
.kpi b, .usage-head h2 { font-weight: 600; }
.panel h2 { font-weight: 600; }
.page-title { font-weight: 600; letter-spacing: -0.01em; }
.eyebrow, .group-label, .hs-layer-num, .tx-side-h, .side-label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.eyebrow { color: var(--accent); }

/* Chips: the everyday-word chip and plain tags share one pill. */
.lingo-chip, .lingo-tag, .workspace-nav-tag { border-radius: var(--pill); }

/* Menus and flyouts: opaque glass, the flyout shadow, 16 px, a 200 ms fade and 4 px rise that settles once. */
@keyframes ax-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ax-rise-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu, .theme-menu, .account-menu, .nk-launch, .axc-pop, .dock-flyout, .slash-menu, .omni-dial {
  background: var(--glass-opaque); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3), var(--edge);
  animation: ax-rise var(--t) var(--ease) both;
}
.menu.down, .model-menu.down, .theme-menu, .account-menu, .nk-launch { animation-name: ax-rise-down; }
.menu > button, .theme-menu label, .account-menu button { border-radius: var(--r-sm); }
/* The model sheet (axchat.js) on desktop: a Fluent flyout in Apple glass, 420 px, anchored under the model pill with a
   notch; rows are 10 px, the chosen one a surface card. The phone sheet keeps its place (fixed, full width) with the tokens. */
.model-menu.axc-sheet { padding: 8px; border-radius: var(--r-lg); }
@media (min-width: 900px) {
  .model-picker .model-menu.axc-sheet { width: min(420px, calc(calc(100 * var(--vw, 1vw)) - 24px)); }
  .model-menu.axc-sheet.down::before {
    content: ""; position: absolute; left: 40px; top: -7px; width: 12px; height: 12px; background: var(--glass-opaque);
    border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg);
  }
}
.menu > button.axc-row { border-radius: 10px; transition: background var(--t-fast) var(--ease); }
.menu > button.axc-row[aria-checked="true"], .menu > button.axc-row.on { background: var(--surface); box-shadow: var(--shadow-1), var(--edge); }
.axc-effort { border-top: 1px solid var(--line); }
.axc-lock-card { border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1), var(--edge); }

/* Dialogs and sheets: 20 px, the flyout shadow, a 320 ms rise. The sign-in dialog is one of these. */
.dialog, .hs-dialog, dialog.compose, .vw-win {
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-3), var(--edge);
}
.dialog[open], .hs-dialog[open] { animation: ax-rise var(--t-slow) var(--ease) both; }
.dialog::backdrop, .hs-dialog::backdrop, dialog.compose::backdrop, .lightbox::backdrop { background: rgba(8, 12, 28, 0.45); backdrop-filter: blur(3px); }
.field input, .field select, .field textarea, .hs-dialog input:not([type="checkbox"]), .search-box input, .vw-find { border-radius: 10px; }
.provider-btn { border-radius: 10px; box-shadow: var(--shadow-1), var(--edge); }

/* The composer (chat): frosted, 20 px, the floating shadow; the focus edge is the accent. */
.composer {
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-xl); box-shadow: var(--shadow-2), var(--edge); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.composer:focus-within { border-color: var(--accent); }
.mode-chip, .mail-toggle { border-radius: var(--pill); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.mode-chip.on, .mail-toggle[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.msg-user .bubble { border-radius: 18px 18px 6px 18px; }

/* The Ask Axork strip in Daxolex Mail (mail-axork.js): an accent wash under the reading pane's bar; its actions are
   frosted pills with the price beside the words. Nothing else about it changes. */
.mx-ask { background: var(--accent-tint); border-radius: var(--r-lg); border-color: color-mix(in srgb, var(--accent) 20%, var(--line)); }
.mx-ask .ghost { background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-1); }

/* Segmented control (Fluent structure, Apple feel): one .seg block, and the same look on the controls that already
   are one: Basic/Advanced (.hs-level), the Homeostat's choices (.hs-seg), the sheet's Effort and Tone (.axc-seg),
   Mail's Classic/Split/List (.mail-layout) and density (.density), the calendar views (.cal-views), the chat list's
   filter (.lib-filter), the page size and tint picks (.size-pick, .tint-pick). The chosen piece is a surface thumb. */
.seg, .hs-level, .hs-seg, .axc-seg, .mail-layout, .density, .lib-filter, .size-pick, .tint-pick {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--hover); border: 1px solid var(--line);
}
.axc-seg { display: grid; }
.lib-filter { display: flex; }
.size-pick, .tint-pick { border: 0; border-radius: 0; background: none; padding: 0; gap: 4px; flex-wrap: wrap; }
.size-pick span, .tint-pick span { margin-right: 4px; }
.seg button, .hs-level button, .hs-seg button, .axc-seg button, .mail-layout button, .density button, .lib-filter button, .size-pick button, .tint-pick button {
  min-height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 13px/1 var(--text); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.size-pick button, .tint-pick button { border: 1px solid var(--line); min-height: 28px; padding: 0 9px; font-size: 12.5px; }
.density button { min-height: 26px; padding: 0 9px; font-size: 12.5px; }
.mail-layout button { min-height: 26px; padding: 0 10px; font-size: 12.5px; }
.seg button[aria-checked="true"], .seg button[aria-pressed="true"], .seg button[aria-selected="true"], .hs-level button[aria-checked="true"], .hs-seg button[aria-checked="true"],
.axc-seg button[aria-checked="true"], .mail-layout button[aria-pressed="true"], .density button[aria-pressed="true"], .lib-filter button[aria-pressed="true"],
.cal-views button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), var(--edge); }
.size-pick button[aria-pressed="true"], .tint-pick button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: none; }
.mail-layout button[aria-pressed="true"] { color: var(--accent); }
.density button[aria-pressed="true"] { color: var(--accent); }
.density .dens-glow { display: none; }
body[data-level="advanced"] .hs-level button[data-level="advanced"][aria-checked="true"] { background: var(--ink); color: var(--surface); }
.seg.pill, .seg.pill button { border-radius: var(--pill); }

/* The Homeostat (/settings): the layer map becomes tiles with the layer number, the name and the everyday word; the
   Basic/Advanced control is the segmented control above. */
.hs-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--s3); margin: 0 0 var(--s5); }
.hs-map a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 96px; padding: var(--s4);
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1), var(--edge); color: var(--ink); font: 600 15px/1.25 var(--text); text-decoration: none;
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hs-map a:hover { border-color: var(--accent); box-shadow: var(--shadow-2), var(--edge); color: var(--ink); }
.hs-map a b { width: 26px; height: 26px; font-size: 12.5px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.hs-map a::after { content: "Layer"; order: -1; font: 600 11px/1 var(--text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.hs-map a:first-child::after { content: "Everyday"; }
.hs-map a:first-child b { display: none; }
.hs-search { border-radius: var(--r); background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-1); }
.hs-layer-ico { border-radius: var(--r); }
section.panel[data-level="advanced"]::before { background: var(--hover); color: var(--muted); }

/* Buttons: the primary keeps its pill; secondary buttons go to 10 px; small chips stay pills. */
.ghost:not(.tiny) { border-radius: 10px; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.read-actions .ghost, .stream-bar .ghost, .mx-ask .ghost, .cal-bar .ghost, .cal-views button, .ghost.tiny, .tx-place.ghost { border-radius: var(--pill); }
.primary { transition: filter var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.primary:hover:not(:disabled) { filter: brightness(1.06); }
.icon-btn { transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }

/* Progress: the meter is a soft track with the accent (axon bars keep their nodes). */
.meter { background: var(--line-strong); }

/* The viewer (viewer.js) and the Canvas Player (media-player.js): chrome only. The window is a sheet, its head a
   command bar; nothing inside the stage or the controls' behaviour changes. */
.vw-scrim { background: rgba(10, 14, 30, 0.45); backdrop-filter: blur(3px); }
.vw-head { border-bottom: 1px solid var(--line); }
.vw-icon, .vw-badge, .mp-btn { border-radius: var(--r-sm); }
.vw-zoom, .vw-find { border-color: var(--line-strong); }
.mp-stage { border-radius: var(--r); }

/* Front pages (design B "Clarity"): the same depth tokens; their cl- classes and layout stay as they are. */
.cl-home { --cl-shadow: var(--shadow-2); }
.cl-card, .gl-panel, .gl-item { box-shadow: var(--shadow-1), var(--edge); }
.cl-window { box-shadow: var(--shadow-3), var(--edge); }
.cl-top { position: sticky; top: 0; z-index: 20; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }

/* Statements, Taxetal, the owner dashboard and the Control centre read the same tokens through .panel, .kpi, .card,
   .cc-card and .st-tile above; the statement sheet keeps its paper look (it is also the PDF). */
.gw-live, .hs-pill, .tag { border-radius: var(--pill); }

/* Purchase Facts labels (.pf-*) are never restyled: plain black and white, like a nutrition label. */

/* Motion: things move once and settle. Hover 120 ms, flyouts 200 ms, sheets 320 ms (the tokens above). Under
   prefers-reduced-motion the global rule in the Accessibility section turns every animation and transition off. */

/* Mail's message list is the list pane of the three-pane shape: acrylic in every shade. (The same selectors as the
   Classic layout's own rules, so this wins by order; the old light ground lost to them in dark mode.) */
.mail-app.layout-classic .mail-stream.open .msg-list, .mail-app[data-layout="classic"] .mail-stream.open .msg-list,
.mail-app.layout-classic .mail-stream .msg-list, .mail-app[data-layout="classic"] .mail-stream .msg-list,
.mail-app .msg-list { background: var(--glass); }
/* The sheet's Effort and Tone pieces stay inside their cells on a phone. */
.axc-seg button { padding: 0 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Found by tools/a11y_check.js on the new look (pre-existing colours and sizes, fixed with tokens): the Stripe badge,
   the statement section numbers, the Axon-Glyph conduit colour, the CSV and slides kind badges, and a few 24 px targets. */
.managed-badge[data-provider="stripe"] { background: var(--accent-soft); color: var(--accent); }
.st-sec h2 span { background: var(--accent); color: var(--accent-ink); }
.tx-k-sheet { background: #15803D; } .tx-k-slides { background: #C2410C; }
.side-plus { width: 24px; height: 24px; }
a.lingo-inline { min-height: 24px; }
button:has(> .axt), .axt-pick button { min-height: 24px; }
.st-main td a, .st-list a { display: inline-flex; align-items: center; min-height: 24px; }
select#st-day { min-width: 44px; }

/* Axon progress (answers) */
/* static/answer-progress.js + progress.py: the axon bar under a loading answer. Myelin segments (.axp-seg, one per
   phase, flex-grown by its share of the bar) joined at the nodes of Ranvier (.axp-node: Sending, Thinking, Answer
   arriving, Done), the current sign riding the charge front (.axp-front), then "38%", the phase word and the ETA.
   Colours are the existing tokens; the phase sets --axp through data-phase. Reduced motion: no transitions. */
.axp { --axp: var(--accent); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 8px; max-width: 560px;
  font-size: 13px; color: var(--muted); }
.axp[data-phase="conduit"] { --axp: var(--cost-2); }
.axp[data-phase="spark"] { --axp: var(--accent); }
.axp[data-phase="threshold"] { --axp: var(--cost-3); }
.axp[data-phase="junction"], .axp[data-phase="done"] { --axp: var(--ok, #16a34a); }
.axp-track { position: relative; display: flex; align-items: center; flex: 1 1 180px; min-width: 150px; height: 12px;
  background: linear-gradient(color-mix(in srgb, var(--axp) 30%, var(--line)), color-mix(in srgb, var(--axp) 30%, var(--line))) center / 100% 2px no-repeat; }
.axp-seg { position: relative; flex: var(--w, 1) 1 0; height: 9px; margin: 0 2px; border-radius: 999px; overflow: hidden; min-width: 8px;
  border: 1.5px solid color-mix(in srgb, var(--axp) 38%, var(--line)); background: var(--surface); }
.axp-seg::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 0) * 100%); background: var(--axp); }
.axp-seg.part::before { background: repeating-linear-gradient(135deg, var(--axp) 0 3px, color-mix(in srgb, var(--axp) 55%, var(--surface)) 3px 6px); }
.axp-node { flex: none; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--axp) 50%, var(--line)); }
.axp-node.lit { background: var(--axp); border-color: var(--axp); }
.axp-end.lit { box-shadow: 0 0 0 2px color-mix(in srgb, var(--axp) 30%, transparent); }
.axp-front { position: absolute; top: 50%; left: var(--at, 0%); transform: translate(-50%, -50%); z-index: 1; padding: 0 3px;
  border-radius: 999px; background: var(--surface); color: var(--axp); font-size: 10px; font-weight: 700; line-height: 13px; white-space: nowrap;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--axp) 35%, transparent), 0 0 6px color-mix(in srgb, var(--axp) 45%, transparent); pointer-events: none; }
.axp-text { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.axp-pct { color: var(--ink); font-weight: 700; min-width: 3ch; }
.axp-phase { color: var(--ink); }
.axp-eta { color: var(--muted); }
.axp-eta[hidden] { display: none; }
.axp-done .axp-phase { color: var(--axp); }
.axp-slot:empty { display: none; }
.dw-msg .axp { margin: 4px 0 2px; font-size: 12px; max-width: none; }
.cmp-col .axp { max-width: none; }
.axp-seg::before { transition: width .35s cubic-bezier(.3, .9, .4, 1); }
.axp-front { transition: left .35s ease; }
.axp:not(.axp-done) .axp-seg.on:not(.part) { animation: ax-fire 1.6s ease-in-out infinite; }
.axp:not(.axp-done) .axp-front { animation: axm-land 1.2s ease-out infinite; }
.axp-done { opacity: 0; transition: opacity .6s ease .6s; }
@media (max-width: 480px) {
  .axp { gap: 4px 8px; font-size: 12px; }
  .axp-track { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .axp-seg::before, .axp-front, .axp-done { transition: none; }
  .axp .axp-seg.on, .axp .axp-front { animation: none; }
  .axp-done { opacity: 1; }
}

/* Upload state (composer chips) */
/* static/upload-state.js: the status strip inside a file chip (.att in the chat composer, .dw-chip and .gmc-chip in the
   pop-outs) while a file is attached. Uploading: a small axon bar and a whole percentage; "Taking longer" and
   "Checking": a sign and a word, no number; ready: beside the chip, fading over 1.2 s, then only the plain chip;
   problem:, the server's reason, Retry and Remove (44 px on touch screens). Colours are the tokens only.
   Reduced motion: the check is shown 1.2 s with no animation. */
.upst { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--muted); }
.upst:empty, .upst[data-upst=""] { display: none; }
.upst-bar.axon { flex: 1 1 60px; min-width: 60px; height: 9px; margin: 0; }
.upst-pct { flex: none; min-width: 3.5ch; text-align: right; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.upst-sign { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.upst-sym { font-weight: 700; letter-spacing: 0.02em; }
.upst-word { color: var(--ink); }
.upst[data-upst="longer"] .upst-sym { color: var(--ink); }
.upst[data-upst="checking"] .upst-sym { color: var(--accent); }
.upst[data-upst="ready"] { color: var(--ok); font-size: 15px; animation: upst-fade 1.2s ease forwards; pointer-events: none; }
.upst[data-upst="ready"] .upst-sym { font-weight: 800; }
.upst[data-upst="problem"] { flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; color: var(--danger); }
.upst-why { display: flex; align-items: flex-start; gap: 6px; min-width: 0; flex: 1 1 100%; }
.upst-why .upst-sign, .upst-why .upst-sym { flex: none; }
.upst-reason { min-width: 0; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.upst-acts { display: flex; gap: 6px; }
.upst-act { min-height: 28px; min-width: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink); font: 500 12px/1 var(--text); cursor: pointer; }
.upst-act:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.upst-retry { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); color: var(--accent); }
.upst-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.att .upst { grid-column: 1 / -1; }
.att .upst[data-upst="ready"] { grid-column: auto; position: absolute; right: 60px; top: 50%; transform: translateY(-50%); padding: 0 4px; border-radius: 6px; background: var(--surface); }
.att[data-upst="problem"] { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.dw-chip, .gmc-chip { position: relative; }
.dw-chip small:empty, .gmc-chip small:empty { display: none; }
.dw-chip .upst, .gmc-chip .upst { flex: 1 1 auto; }
.dw-chip[data-upst="problem"], .gmc-chip[data-upst="problem"] { flex-wrap: wrap; border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.dw-chip[data-upst="problem"] .upst, .gmc-chip[data-upst="problem"] .upst { flex-basis: 100%; }
.dw-chip .upst[data-upst="ready"], .gmc-chip .upst[data-upst="ready"] { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); }
/* Duplicates before upload: the in-composer card above the tray ("You've already uploaded this file"). */
.dup-card { flex: none; align-self: flex-start; margin: 0 0 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; max-width: 560px; text-align: left;
  border: 1px solid var(--edge, var(--line)); border-radius: var(--r-3, 14px); background: var(--surface); box-shadow: var(--shadow-1, none); }
.dup-card p { margin: 0; }
.dup-title { font-weight: 600; color: var(--ink); }
.dup-title:focus { outline: none; }
.dup-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dup-where { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.dup-ask { color: var(--ink); font-size: 13.5px; }
.dup-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dup-foot button { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 500 13.5px/1 var(--text); cursor: pointer; }
.dup-foot .dup-yes { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (pointer: coarse) { .dup-foot button { min-height: 44px; } }
@keyframes upst-fade { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }
@media (pointer: coarse) { .upst-act { min-height: 44px; min-width: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .upst[data-upst="ready"] { animation: none; opacity: 1; }
  .upst-bar.axon i::before { transition: none; }
}

/* ===================================================================== neurork.com's home: "like Google, nothing else" */
/* Owner's instruction: the Neurork mark and wordmark centred, the Locigram box under it, a Sign in link (or your face
   and the account's sections) in the top-right corner, and a one-line footer with the family and the legal line. Every
   colour is a Clarity token (--cl-*), so the True Tint shades and dark mode come for free (static/front-tint.js). */
body.nk-plain { min-height: 100vh; min-height: 100dvh; }
.nk-plain .nk-corner { position: relative; z-index: 70; display: flex; justify-content: flex-end; align-items: center; gap: 12px;
  min-height: 72px; padding: 12px clamp(16px, 3vw, 28px); box-sizing: border-box; }
.nk-plain .nk-corner > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cl-ink); text-decoration: none; font: 500 15px/1 var(--text); }
.nk-plain .nk-face { position: relative; }
.nk-plain .nk-face[hidden], .nk-plain .nk-face-menu[hidden], .nk-plain #nk-top-signin[hidden] { display: none; }
.nk-plain .nk-face-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--cl-accent); color: var(--cl-accent-ink); font: 600 18px/1 var(--text); cursor: pointer; }
.nk-plain .nk-face-btn:hover { filter: brightness(0.92); }
.nk-plain .nk-face-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px; border: 1px solid var(--cl-line); border-radius: 14px; background: var(--cl-surface); box-shadow: var(--cl-shadow); }
.nk-plain .nk-face-name { margin: 0; padding: 8px 12px 10px; font-size: 13px; color: var(--cl-muted); border-bottom: 1px solid var(--cl-line); }
.nk-plain .nk-face-menu a, .nk-plain .nk-face-menu button { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--cl-ink); font: 500 15px/1.2 var(--text); text-decoration: none; text-align: left; cursor: pointer; }
.nk-plain .nk-face-menu a:hover, .nk-plain .nk-face-menu button:hover { background: var(--cl-soft); color: var(--cl-ink); }
.nk-plain .nk-home { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 0 16px 12vh; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.nk-plain .nk-logo { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; color: var(--cl-ink); }
.nk-plain .nk-logo img { width: clamp(64px, 18vw, 88px); height: auto; aspect-ratio: 1; }
.nk-plain .nk-logo .cl-wordmark { font-size: clamp(34px, 9vw, 54px); letter-spacing: 0.08em; }
.nk-plain .nk-search { width: 100%; margin: 0; }
.nk-plain .cl-foot { justify-content: center; align-items: center; text-align: center; gap: 4px 18px; padding: 14px 16px 18px; font-size: 13px; }
.nk-plain .cl-foot-links { justify-content: center; }
@media (max-width: 640px) {
  .nk-plain .nk-corner { min-height: 64px; }
  .nk-plain .nk-home { padding-bottom: 8vh; gap: 24px; }
}

/* Owner dashboard → Monthly AI budget (owner-ai-budget.js) */
.aib-words { margin: 6px 0 10px; font-weight: 600; }
.aib-numbers { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 20px; }
.aib-numbers li, .aib-grid li { display: flex; justify-content: space-between; gap: 12px; }
.aib-numbers b, .aib-grid b { font-weight: 500; color: var(--muted); }
.aib-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 28px; margin-top: 10px; }
.aib-grid h3 { margin-bottom: 4px; }
.aib-spark { max-width: 420px; }
.aib-spark svg { width: 100%; height: auto; display: block; }
.aib-col { fill: var(--accent); opacity: 0.55; }
.aib-col.now { opacity: 1; }
.aib-col.over { fill: var(--danger); }
.aib-cap { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 2; }
.aib-label { fill: var(--muted); font-size: 11px; }
.aib-form { display: grid; gap: 8px; margin-top: 14px; max-width: 560px; }
.aib-form .check { display: flex; gap: 8px; align-items: flex-start; }
#aib-state[data-state="hard"], #aib-state[data-state="soft"] { background: var(--accent-soft); color: var(--danger); }
#aib-state[data-state="ok"] { background: var(--accent-soft); color: var(--ok); }

/* Owner dashboard → Sign-up limits (owner-limits.js, freeseats.py) */
.lim-now { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 20px; }
.lim-now li { display: flex; justify-content: space-between; gap: 12px; }
.lim-now b { font-weight: 500; color: var(--muted); }
.lim-form { display: grid; gap: 14px; max-width: 640px; }
.lim-field { display: grid; gap: 6px; }
.lim-field label small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.lim-step { display: flex; align-items: stretch; gap: 6px; }
.lim-step input { font-size: 1.4rem; font-weight: 600; width: 10ch; text-align: center; }
.lim-step button { min-width: 44px; font-size: 1.2rem; }
.lim-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lim-chips .chip { border: 1px solid var(--edge); border-radius: 999px; background: var(--surface); color: var(--ink); padding: 4px 12px; min-height: 32px; font: inherit; cursor: pointer; }
.lim-chips .chip:hover { border-color: var(--accent); color: var(--accent); }
.lim-says { margin: 0; font-weight: 600; }
#lim-state[data-full="1"] { background: var(--accent-soft); color: var(--danger); }

/* Owner dashboard → Correspondence addresses (owner-correspondence.js, correspondence.py) */
.cor-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; }
.cor-item { border: 1px solid var(--edge); border-radius: var(--r-lg); padding: 10px 12px; background: var(--surface); }
.cor-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cor-tools { margin-left: auto; display: flex; gap: 6px; }
.cor-lines { margin: 6px 0; line-height: 1.45; }
.cor-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cor-facts b { font-weight: 500; color: var(--muted); margin-right: 6px; }
.cor-conflicts { margin: 8px 0; padding: 8px 12px 8px 28px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--danger); }
.cor-form { display: grid; gap: 10px; margin: 12px 0; max-width: 720px; }
.cor-set { border: 1px solid var(--edge); border-radius: var(--r-lg); padding: 8px 12px; margin: 0; }
.cor-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; }
.cor-groups { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cor-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 16px; max-height: 260px; overflow: auto; padding: 4px 0; }
.cor-form .check, .cor-countries .check, .cor-checks .check { display: flex; gap: 8px; align-items: center; }
.cor-actions, .cor-try { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.cor-answer { margin: 8px 0 0; font-weight: 600; }

/* =====================================================================================================================
   Bound backups (iOS layout): /backup, static/backup.js, vault_backup.py, docs/vault-backup.md.
   A large title, an iOS-style nav bar, the shared .seg control, inset grouped lists, step nodes and a bottom sheet.
   Tokens only; the page keeps a 16 px gutter at phone width.
   ===================================================================================================================== */
body.ios-page { background: var(--bg); }
.ios-nav { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 44px; padding: env(safe-area-inset-top) 16px 0; background: var(--glass-strong, var(--surface));
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid var(--line); }
.ios-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--accent); text-decoration: none; font-size: 17px; }
.ios-chev { width: 10px; height: 10px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); margin-right: 2px; }
.ios-nav-title { font-weight: 600; font-size: 17px; color: var(--ink); }
.ios-main { max-width: 640px; margin: 0 auto; padding: 8px 16px calc(32px + env(safe-area-inset-bottom)); }
.ios-large { margin: 8px 0 4px; font: 700 34px/1.15 var(--text); letter-spacing: -0.02em; color: var(--ink); }
.ios-lede { margin: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.ios-seg { display: flex; margin: 0 0 8px; }
.ios-seg button { flex: 1; min-height: 36px; }
.ios-seg-small { margin-top: 12px; }
.ios-head { margin: 24px 16px 6px; font: 400 13px/1.3 var(--text); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ios-group { list-style: none; margin: 0; padding: 0; border-radius: 12px; background: var(--surface); overflow: hidden; }
.ios-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; font-size: 17px; color: var(--ink); }
.ios-row + .ios-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--line); }
.ios-value { margin-left: auto; color: var(--muted); text-align: right; }
.ios-foot { margin: 6px 16px 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.ios-field input { flex: 1; min-width: 0; min-height: 28px; border: 0; background: transparent; color: var(--ink); font: 17px var(--text); }
.ios-field input:focus-visible { outline: none; }
.ios-file { cursor: pointer; color: var(--accent); }
.ios-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* Steps: an open node waiting, a filled node now, a ticked node done */
.ios-steps .ios-node { flex: none; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--faint); }
.ios-steps [data-state="now"] .ios-node { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--surface); background: var(--accent); }
.ios-steps [data-state="done"] .ios-node { border-color: var(--ok); background: var(--ok); position: relative; }
.ios-steps [data-state="done"] .ios-node::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px;
  border-right: 2px solid var(--surface); border-bottom: 2px solid var(--surface); transform: rotate(45deg); }
.ios-steps [data-state="next"] { color: var(--muted); }
.ios-steps [data-state="now"] { font-weight: 600; }
.ios-card { margin-top: 24px; padding: 16px; border-radius: 12px; background: var(--surface); }
.ios-card h3 { margin: 0 0 4px; font: 600 20px/1.25 var(--text); color: var(--ink); }
.ios-card .ios-foot { margin: 4px 0 12px; }
.ios-card .ios-group { background: var(--bg); margin-bottom: 12px; }
.ios-card[data-ok="1"] h3 { color: var(--ok); }
.ios-card[data-ok="0"] h3 { color: var(--danger); }
.ios-button { display: block; width: 100%; min-height: 50px; margin-top: 16px; border: 0; border-radius: 12px; background: var(--accent);
  color: var(--accent-ink); font: 600 17px var(--text); cursor: pointer; }
.ios-button:disabled { opacity: 0.5; cursor: default; }
.ios-plain { display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 0; background: transparent; color: var(--accent); font: 17px var(--text); cursor: pointer; }
.ios-error { margin: 8px 0 0; color: var(--danger); font-size: 15px; }
.ios-sheet-back { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, var(--ink) 35%, transparent); }
.ios-sheet { width: 100%; max-width: 640px; box-sizing: border-box; padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 14px 14px 0 0; background: var(--bg); box-shadow: var(--shadow-3); }
.ios-sheet h2 { margin: 8px 0 4px; font: 600 20px var(--text); color: var(--ink); text-align: center; }
.ios-sheet .ios-foot { text-align: center; margin: 0 0 16px; }
.ios-grabber { display: block; width: 36px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: var(--faint); }
@media (prefers-reduced-motion: no-preference) { .ios-sheet { animation: ios-rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); } }
@keyframes ios-rise { from { transform: translateY(100%); } }

/* ===================================================================== Brand fit (owner, 27 Oct 2026)
   The brand stands once, on the left (the product mark on the far right is gone). So the mark is bigger, the name wears the
   one family accent, the bar has a thin accent edge, and the hero sits on a soft wash of the same accent, so each page takes its
   look from its own logo. Tokens only (--cl-accent* come from front-tint.js, which keeps them at 4.5:1 on every shade). */
.cl-home .cl-top { padding-block: 12px; border-bottom: 1px solid var(--line); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--cl-accent, var(--accent)) 16%, transparent); }
.cl-home .cl-brand { gap: 12px; }
.cl-home .cl-brand img { width: 40px; height: 40px; }
.cl-home .cl-name { font-size: 24px; color: var(--cl-accent-text, var(--ink)); }
.cl-home .cl-hero { background: radial-gradient(70% 95% at 50% 0, color-mix(in srgb, var(--cl-accent, var(--accent)) 13%, transparent), transparent 76%); border-radius: 28px; padding-block: clamp(28px, 6vh, 64px) 20px; }
.cl-home .cl-eyebrow { padding: 4px 14px; border-radius: 999px; background: var(--cl-soft, var(--accent-soft)); }
.cl-home .cl-card { border-top: 3px solid color-mix(in srgb, var(--cl-accent, var(--accent)) 55%, transparent); }

/* ===================================================================== Weather and sun times, Region and measurements
   (owner, 27 Oct 2026; static/weather.js, static/region-panel.js, docs/weather.md). Tokens only: the one indigo accent, the
   glass/edge/shadow tokens, no colours of their own. Reduced motion: nothing here animates. */
.wx-host { min-width: 0; }
.wx-host[hidden] { display: none; }
.wx { position: relative; display: grid; gap: var(--s1); padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--glass); box-shadow: var(--shadow-1), var(--edge); color: var(--ink); font-size: var(--fs-small); text-align: left; }
.wx-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); min-width: 0; }
.wx-svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wx-temp { font: 700 var(--fs-bar)/1 var(--text); }
.wx-cond, .wx-hl, .wx-wind, .wx-len { color: var(--muted); }
.wx-sun { color: var(--ink); font-weight: 600; }
.wx-src, .wx-priv, .wx-note, .wx-example { margin: 0; color: var(--muted); font-size: var(--fs-meta); }
.wx-place { margin-left: auto; min-height: 28px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink); font: 600 var(--fs-meta)/1 var(--text); cursor: pointer; }
.wx-place::after { content: "\25BE"; margin-left: 6px; color: var(--muted); }
.wx-on, .wx-no, .wx-again, .wx-mine, .wx-off { min-height: 30px; }
.wx-pop { display: grid; gap: var(--s2); margin-top: var(--s2); padding: var(--s3); border-radius: var(--r); background: var(--glass-opaque); box-shadow: var(--shadow-2), var(--edge); }
.wx-pop[hidden] { display: none; }
.wx-label { display: grid; gap: var(--s1); color: var(--muted); font-size: var(--fs-meta); }
.wx-search { min-height: 36px; padding: 0 var(--s3); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; }
.wx-results { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.wx-result { width: 100%; min-height: 36px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.wx-result:hover { background: var(--hover); }
.wx-ask { display: grid; gap: var(--s2); margin-top: var(--s2); padding: var(--s3); border-radius: var(--r); background: var(--accent-soft); }
.wx-q { margin: 0; font-weight: 600; }
.wx-radio { display: flex; align-items: center; gap: var(--s2); min-height: 28px; cursor: pointer; }
.wx-units, .wx-mine, .wx-off { justify-self: start; }
.wx-svg, .wx-place, .wx-result { transition: none; }
.cal-weather .wx-pop { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; min-width: 260px; }
.cal-bar:has(.cal-weather) { position: relative; z-index: 6; }   /* the bar's glass makes its own layer: lift it so the place flyout covers the board */
.cal-weather { position: relative; z-index: 30; min-width: 0; flex: 1 1 280px; max-width: 520px; }
.cal-weather .wx { padding: 4px var(--s3); font-size: var(--fs-meta); }
.cal-weather .wx-svg { width: 22px; height: 22px; }
.wx-ask .primary { justify-self: start; min-width: 96px; }
@media (max-width: 640px) {
  .wx-place { margin-left: 0; }
  .cal-weather { flex-basis: 100%; max-width: none; }
}

/* Region and time · Weather and sun · Calendar: the two-pane settings panel (Homeostat → Basics, /settings/region). */
.rp { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "cats pane" "foot foot"; gap: var(--s4) var(--s5); }
.rp-cats { grid-area: cats; display: grid; align-content: start; gap: 2px; margin: 0; padding: 0; list-style: none; border-right: 1px solid var(--line); padding-right: var(--s3); }
.rp-cats button { width: 100%; min-height: 36px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: 600 var(--fs-row)/1.2 var(--text); text-align: left; cursor: pointer; }
.rp-cats button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.rp-cat-select { display: none; grid-area: cats; min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; }
.rp-pane { grid-area: pane; min-width: 0; }
.rp-pane h3 { margin: 0 0 var(--s3); font: 600 var(--fs-pane)/1.2 var(--display); }
.rp-fields { display: grid; gap: var(--s4); max-width: 520px; }
.rp-field { display: grid; gap: var(--s1); }
.rp-field label, .rp-label { font-weight: 600; font-size: var(--fs-row); }
.rp-field select { min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; max-width: 100%; }
.rp-example, .rp-zone, .rp-value { margin: 0; color: var(--muted); font-size: var(--fs-meta); }
.rp-value { color: var(--ink); font-size: var(--fs-row); }
.rp-wx { position: relative; }
.rp-wx .wx-pop { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; }
.rp-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.rp-dirty { margin: 0 auto 0 0; color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 720px) {
  .rp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cats" "pane" "foot"; }
  .rp-cats { display: none; }
  .rp-cat-select { display: block; }
}

/* Chat rows: rest on one and it lifts, with the models that answered in it */
.chat-item { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.chat-item.lifted { transform: translateY(-2px); background: var(--surface); box-shadow: var(--shadow-2), var(--edge); }
.chat-model-tip {
  position: fixed; z-index: 60; display: grid; gap: 2px; max-width: 260px; padding: 8px 12px; border-radius: var(--r);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2), var(--edge); pointer-events: none;
}
.chat-model-tip small { color: var(--muted); font-size: var(--fs-xs, 12px); }
@media (prefers-reduced-motion: reduce) { .chat-item, .chat-item.lifted { transition: none; transform: none; } }

/* Reply to a message (swipe, button, R): quote chip above the box, quote block in the sent bubble */
.msg-user, .msg-ai { touch-action: pan-y pinch-zoom; position: relative; transition: transform var(--t) var(--ease); }
.msg-user.swiping, .msg-ai.swiping, .axon-thread > .bubble.swiping { transform: translateX(var(--swipe-x, 0px)); transition: none; }
.msg-user.no-spring, .msg-ai.no-spring { transition: none; }
.msg-user:focus-visible, .msg-ai:focus-visible { border-radius: var(--r); }
.swipe-reply { position: absolute; left: -44px; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center;
  border-radius: var(--pill); background: var(--accent-soft); color: var(--accent); opacity: 0; pointer-events: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.swipe-reply.ready { background: var(--accent); color: var(--accent-ink); }
.swipe-reply .reply-glyph { width: 20px; height: 20px; }
.reply-glyph { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reply-glyph .reply-node { fill: currentColor; stroke: none; }
.act.reply-act svg { width: 16px; height: 16px; }
.reply-chip { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); padding: 6px 6px 6px var(--s3);
  border-radius: var(--r); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); color: var(--ink); min-width: 0; }
.reply-chip-text { display: flex; align-items: center; gap: var(--s2); flex: 1; min-width: 0; font-size: 13px; }
.reply-chip-text svg { color: var(--accent); }
.reply-chip-text strong { flex: none; font-weight: 600; }
.reply-chip-text span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.reply-chip-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--pill); background: transparent; color: var(--muted); cursor: pointer; }
.reply-chip-x:hover { background: var(--hover); color: var(--ink); }
.reply-chip-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.reply-quote { display: block; margin: 0 0 6px; padding: 4px 10px; border-radius: var(--r-sm); background: var(--hover);
  box-shadow: inset 3px 0 0 var(--accent); font-size: 13px; color: var(--muted); white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reply-quote strong { display: block; color: var(--ink); font-weight: 600; }
@media (pointer: coarse) {
  .act.reply-act { min-height: 44px; min-width: 44px; justify-content: center; }
  .reply-chip-x { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-user, .msg-ai, .swipe-reply { transition: none; }
}

/* The sheet's Tone row has three buttons: share the width by count, so "Parasympathetic" is never cut off */
.axc-seg { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.axc-seg button { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .actions .act.reply-act span { display: none; }      /* icon only: the answer's row stays on one line */
}
@media (max-width: 640px) {
  /* The top bar on a phone: Share is its icon, the pop-out window (a desktop thing) is hidden, so nothing runs off the edge */
  .main .topbar { padding-inline: 6px !important; gap: 0 !important; }
  .topbar .share-chat-btn { padding: 0; min-width: 44px; justify-content: center; margin-left: auto; }
  .topbar .share-chat-btn span { display: none; }
  .topbar #popout-chat { display: none; }
  .topbar .lgb-top { margin-right: 0; }
  .topbar .picker-btn { padding-inline: 6px; }
}

/* Axork Chat, plain like ChatGPT (owner, 28 Oct 2026): no services row, no family footer, no rail on the chat page;
   one quiet line under the box for signed-out visitors. */
.workspace-page #ax-front .ax-front-note { margin: 0; padding: 12px 16px 18px; text-align: center; color: var(--muted); font-size: 13px; }
.workspace-page #ax-front .ax-front-note a { color: inherit; text-decoration: underline; }

/* Axork Chat, plain like ChatGPT: the small details (owner, 28 Oct 2026). No quick-actions button tucked at the edge,
   no "Workspace" heading, "Home" tag or everyday-word chips in the sidebar, the Chat ▾ only on hover or focus, no
   blurred band under the top bar on an empty chat, a lighter phone top bar, and on a phone the greeting in the middle
   with the box at the bottom. */
.workspace-page .omni-fab { display: none; }
.workspace-page .side-apps .workspace-nav-tag, .workspace-page .side-apps .lingo-tag { display: none; }
.workspace-page .workspace-label:not(.workspace-history-label) { display: none; }
.workspace-page .xfer-chat-row .xfer-caret { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.workspace-page .xfer-chat-row:hover .xfer-caret, .workspace-page .xfer-chat-row:focus-within .xfer-caret,
.workspace-page .xfer-caret[aria-expanded="true"], .workspace-page .xfer-caret:has(.xfer-dot:not([hidden])) { opacity: 1; }
.workspace-page .main.empty .topbar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 640px) {
  .workspace-page #cv-toggle, .workspace-page .topbar #theme { display: none; }
  .workspace-page .topbar { gap: 4px; padding-inline: 8px; }
  .workspace-page .main.empty #thread { flex: 1 1 auto; display: flex; align-items: center; }
  .workspace-page .main.empty #thread > .column { width: 100%; }
  .workspace-page .main.empty #ax-front { margin-top: 0; }
  .workspace-page #ax-front .ax-front-note { padding: 6px 16px 14px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .workspace-page .xfer-chat-row .xfer-caret { transition: none; } }

/* Reply to a message in the pop-outs (dock.js, chat-reply.js): the same chip, quote block, swipe hint and glyph as the
   chat page; the Reply button sits under the bubble and shows on hover or focus (always on touch screens). */
.dw-msg[data-reply] { touch-action: pan-y pinch-zoom; position: relative; transition: transform var(--t) var(--ease); }
.dw-msg[data-reply].swiping { transform: translateX(var(--swipe-x, 0px)); transition: none; }
.dw-msg[data-reply].no-spring { transition: none; }
.dw-msg[data-reply]:focus-visible { border-radius: var(--r); }
.dw-msg .swipe-reply { left: -38px; width: 32px; height: 32px; margin-top: -16px; }
.dw-msg .swipe-reply .reply-glyph { width: 18px; height: 18px; }
.dw-msg .dw-reply { justify-self: start; padding: 2px 6px; font-size: 12px; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.dw-msg.mine .dw-reply { justify-self: end; }
.dw-msg:hover .dw-reply, .dw-msg:focus-within .dw-reply, .dw-msg:focus .dw-reply { opacity: 1; }
.dw-msg .reply-quote { margin-bottom: 6px; white-space: normal; }
.dw-msg.mine .dw-bub .reply-quote { background: color-mix(in srgb, var(--accent-ink) 16%, transparent); color: inherit;
  box-shadow: inset 3px 0 0 var(--accent-ink); }
.dw-msg.mine .dw-bub .reply-quote strong { color: inherit; }
.dw-form .reply-chip, .dw-mail-ask .reply-chip { flex: 1 0 100%; width: 100%; margin: 0 0 6px; }
.dw-mail-ask:has(.reply-chip) { flex-wrap: wrap; }
@media (hover: none) { .dw-msg .dw-reply { opacity: 1; } .dw-msg .dw-reply span { display: none; } }
@media (pointer: coarse) { .dw-msg .dw-reply { min-height: 44px; min-width: 44px; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .dw-msg[data-reply], .dw-msg .swipe-reply, .dw-msg .dw-reply { transition: none; } }

/* Checkout result (/checkout/result, checkout.js, checkout_result.py): one card for Payment complete, processing,
   didn't go through and cancelled. The drawn mark takes its colour from the tone (tokens only); glyph animations
   stop under reduced motion like everywhere else. */
.ck-main { width: min(620px, 100%); margin: 0 auto; padding: 40px 16px 64px; box-sizing: border-box; }
.ck-card { --ck: var(--accent); display: grid; gap: var(--s3, 12px); padding: 28px 28px 24px; border-radius: var(--r-lg, 18px);
  box-shadow: var(--shadow-1); border: 1px solid var(--edge, var(--line)); }
.ck-card .eyebrow { margin: 0; }
.ck-card h1 { margin: 0; font-family: var(--display); font-size: clamp(26px, 5vw, 34px); line-height: 1.15; color: var(--ink); }
.ck-card h1:focus { outline: none; }
.ck-card h1:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 4px; border-radius: 6px; }
.ck-mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%;
  color: var(--ck); background: color-mix(in srgb, var(--ck) 12%, transparent); font-size: 30px; line-height: 0; }
.ck-mark[data-tone="ok"] { --ck: var(--ok); }
.ck-mark[data-tone="warn"] { --ck: var(--cost-3); }
.ck-mark[data-tone="bad"] { --ck: var(--danger); }
.ck-mark[data-tone="mute"] { --ck: var(--muted); }
.ck-lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.ck-facts { margin: 6px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ck-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ck-facts dt { color: var(--muted); }
.ck-facts dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ck-actions a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.ck-fine { margin: 0; }
@media (max-width: 480px) {
  .ck-main { padding: 20px 16px 48px; }
  .ck-card { padding: 22px 18px 20px; }
  .ck-actions a { flex: 1 1 100%; }
}

/* ---- Share-link import in batches (chat-link-import.js): the progress card's axon bar and the paused state ---- */
.lki-card .lki-bar { margin: 4px 0 2px; }
.lki-card.lki-running, .lki-card.lki-working { border-left-color: var(--accent); }
.lki-card.lki-paused { border-left-color: var(--accent); }
.lki-card.lki-done { border-left-color: var(--ok); }
.lki-card.lki-failed { border-left-color: var(--danger); }
.lki-actions .lki-link { color: var(--accent); }

/* Capsule lock (omni.js dockRail): default locked. Unlocked tucks to a short right-edge strip; hover reflows the page.
   The page keeps a right gutter in every state so the strip, the open pill and any floating bell never cover words. */
.rail-lock, .rail-edge { display: none; }
@media (min-width: 900px) {
  .rail-lock { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--line);
    border-radius: 12px; background: var(--surface); color: var(--muted); cursor: pointer; }
  .rail-lock:hover { background: var(--hover); color: var(--ink); }
  .rail-lock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .rail-lock .shackle { transform: translate(4px, -1px); transform-origin: 16px 11px; transition: transform var(--t-fast) var(--ease); }
  .rail-lock[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
  .rail-lock[aria-pressed="true"] .shackle { transform: none; }
  body.has-rail.rail-dock { transition: padding-right var(--t) var(--ease); }
  body.has-rail.rail-dock .rail { transition: width var(--t) var(--ease), right var(--t) var(--ease), padding var(--t) var(--ease), box-shadow var(--t) var(--ease); }
  body.has-rail.rail-dock.rail-locked, body.has-rail.rail-dock.rail-open {
    --rail-gutter: var(--rail-w);
    padding-right: var(--rail-gutter);
  }
  body.has-rail.rail-dock:not(.rail-locked):not(.rail-open) {
    --rail-gutter: 16px;
    padding-right: var(--rail-gutter);
  }
  body.has-rail.rail-dock:not(.rail-locked):not(.rail-open) .rail {
    width: 10px; right: 0; padding: 12px 0; border-radius: 12px 0 0 12px; overflow: hidden;
    background: color-mix(in srgb, var(--sidebar) 98%, transparent);
  }
  body.has-rail.rail-dock:not(.rail-locked):not(.rail-open) .rail-list { display: none; }
  body.has-rail.rail-dock:not(.rail-locked):not(.rail-open) .rail-lock { width: 8px; height: 8px; border: 0; background: transparent; color: var(--muted); }
  body.has-rail.rail-dock:not(.rail-locked) .rail-edge { display: block; position: fixed; right: 0; left: auto; top: 25vh; bottom: 25vh; width: 16px; z-index: 44; }
}
@media (min-width: 900px) and (hover: none) {
  .rail-lock { display: grid; }
  .rail-edge { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.has-rail.rail-dock, body.has-rail.rail-dock .rail, .rail-lock .shackle { transition: none; }
}

/* ===================================================================== Plain, settled homepages (owner, 28 Oct 2026)
   "Just have the company's name that it is and the logo somewhere" and "make the website look as if it's been there forever,
   just no one used it, so don't try to sell it". The front pages of Daxolex Mail, Camrive, Synaram, Chiasmar, Gliaid and
   Neurosemble (.cl-quiet): the bar keeps the mark and name and Sign in, the main is the mark, the name, one plain line and
   the one action, the footer is Terms and Privacy. No accent edge, no washes, no cards. Tokens only. */
.cl-quiet .cl-top { box-shadow: none; }
.cl-quiet .cl-name { color: var(--cl-ink, var(--ink)); }
.cl-main.cl-still { justify-content: center; align-items: center; text-align: center; gap: 14px; max-width: 680px; padding: 32px 16px 12vh; }
.cl-still-title { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; color: var(--cl-ink, var(--ink));
  font: 600 clamp(32px, 8vw, 46px)/1.1 var(--display); }
.cl-still-title img { width: clamp(64px, 16vw, 88px); height: auto; aspect-ratio: 1; }
.cl-still-title .cl-wordmark { font-size: inherit; }
.cl-still-line { margin: 0 0 6px; color: var(--cl-muted, var(--muted)); font-size: 17px; }
.cl-still-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cl-main.cl-still-list { justify-content: flex-start; max-width: 980px; padding-bottom: 48px; }
.cl-still-list .nse-roles { width: 100%; text-align: left; margin-top: 18px; }
.cl-quiet .cl-foot { justify-content: center; gap: 4px 18px; padding: 14px 16px 18px; font-size: 13px; }
.cl-quiet .cl-foot-links { justify-content: center; }

/* ===================================================================== locigram.com, simple like Google (owner, 28 Oct 2026:
   "Literally fix Locigram to make sense"). body[data-view="front"]: only the mark, the name, one rounded box (584 px at most)
   and Search, centred a little above the middle, Sign in in the corner and Terms · Privacy at the bottom. data-view="results":
   the same bar is one slim row (small mark and name, the box, Sign in), then one line of plain text tabs with an underline
   under the chosen one (sideways scroll on a phone, never a wrap) and a results column of about 650 px under the box.
   The shared product capsule may sit on the right. Tokens only. */
body.lgs-page { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); background-image: none; }   /* unsigned Google look */
body.has-rail.lgs-page { background-image: var(--mica); background-attachment: fixed; }
.lgs-page .page-top.lgs-top { position: relative; flex: none; display: flex; align-items: center; gap: 12px 20px; padding: 12px 24px;
  background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.lgs-brand { margin: 0; flex: none; font: inherit; }
.lgs-home { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.lgs-home img { width: 30px; height: 30px; }
.lgs-name { font: 600 22px/1 var(--display); letter-spacing: -0.01em; }
.lgs-page .lgs-form { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 692px; margin: 0; }
.lgs-page .lgs-box { flex: 1; min-height: 46px; padding: 0 6px 0 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface);
  box-shadow: none; }
.lgs-page .lgs-box:hover { box-shadow: var(--shadow-1); }
.lgs-page .lgs-box:focus-within { border-color: var(--accent); box-shadow: var(--shadow-1); }
.lgs-page .lgs-box input { font-size: 16px; }
.lgs-page .lgs-box input:focus, .lgs-page .lgs-box input:focus-visible { outline: none !important; box-shadow: none; }   /* the box draws the ring */
.lgs-page .lgs-box:focus-within { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
/* locigram.com names only Locigram: no app switcher, no quick-actions button (omni.js, apps.js); the bell waits for results. */
.lgs-page .nk-launch-btn, .lgs-page .omni-fab { display: none !important; }
.lgs-page .lgs-box input::-webkit-search-cancel-button { display: none; }
.lgs-clear { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; }
.lgs-clear[hidden] { display: none; }
.lgs-clear:hover { background: var(--hover); color: var(--ink); }
.lgs-clear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lgs-go { flex: none; min-height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink); font: 500 14px/1 var(--text); cursor: pointer; }
.lgs-go:hover { border-color: var(--muted); }
.lgs-page .page-top.lgs-top > .page-tools { flex: none; min-width: max-content; overflow: visible; margin-left: auto; }
.lgs-signin { min-height: 40px; }
.lgs-page .page-tools .lgs-signin:not([hidden]) { display: inline-flex; align-items: center; }   /* Sign in stays on a phone too */
.lgs-page .lgs-stage { flex: 1; width: 100%; max-width: none; margin: 0; padding: 0 24px 40px calc(24px + 30px + 10px + 20px + 120px); box-sizing: border-box; }
.lgs-page .lgs-stage > * { max-width: 652px; }
.lgs-page .lgs-stage { text-align: left; }
.lgs-page .lgs-stage > .lgs-segments { max-width: 760px; }
.lgs-page #lgs-web[data-tab="images"], .lgs-page #lgs-web[data-tab="videos"] { max-width: 1040px; }   /* pictures use the width */
.lgs-foot { display: flex; justify-content: center; gap: 18px; padding: 14px 16px 18px; font-size: 13px; color: var(--muted); }
.lgs-foot nav { display: flex; gap: 18px; }
.lgs-foot a { color: var(--muted); text-decoration: none; }
.lgs-foot a:hover, .lgs-foot a:focus-visible { color: var(--ink); text-decoration: underline; }

/* The front: one centred column a little above the middle; nothing else on the page. */
.lgs-page[data-view="front"] .lgs-stage, .lgs-page[data-view="front"] .ax-bell { display: none; }
.lgs-page[data-view="front"] .page-top.lgs-top { flex: 1; flex-direction: column; justify-content: center; gap: 28px; padding: 72px 16px 18vh;
  border-bottom: 0; }
.lgs-page[data-view="front"] .page-tools { position: absolute; top: 14px; right: 20px; margin: 0; }
.lgs-page[data-view="front"] .lgs-home { flex-direction: column; gap: 14px; }
.lgs-page[data-view="front"] .lgs-home img { width: clamp(64px, 16vw, 92px); height: auto; aspect-ratio: 1; }
.lgs-page[data-view="front"] .lgs-name { font-size: clamp(36px, 9vw, 52px); }
.lgs-page[data-view="front"] .lgs-form { flex: none; flex-direction: column; gap: 22px; max-width: 584px; }
.lgs-page[data-view="front"] .lgs-box { width: 100%; box-sizing: border-box; min-height: 50px; }

/* Results: the tabs, then the list. */
.lgs-page .seg.lgs-segments { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0 0 18px; padding: 0; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; background: none; overflow-x: auto; scrollbar-width: none; }
.lgs-page .seg.lgs-segments::-webkit-scrollbar { display: none; }
.lgs-page .seg.lgs-segments button { flex: none; min-height: 44px; padding: 0 12px; border-radius: 0; border-bottom: 3px solid transparent;
  background: none; box-shadow: none; color: var(--muted); font: 500 14px/1 var(--text); }
.lgs-page .seg.lgs-segments button[hidden] { display: none; }
.lgs-page .seg.lgs-segments button:hover { color: var(--ink); }
.lgs-page .seg.lgs-segments button[aria-selected="true"] { background: none; box-shadow: none; color: var(--accent); border-bottom-color: var(--accent); }
.lgs-page .ws-results:not(.ws-grid) { gap: 26px; }
.lgs-page .ws-results:not(.ws-grid) .ws-result { padding: 0; border: 0; border-radius: 0; background: none; }
.lgs-page .ws-meta { gap: 4px 8px; font-size: 13px; }
.lgs-page .ws-domain, .lgs-page .ws-outlet { color: var(--ink); font-weight: 400; }
.lgs-page .ws-chip { min-height: 18px; padding: 0 6px; font-size: 11px; font-weight: 600; }
.lgs-page .ws-n { display: none; }
.lgs-page #lgs-web:has(.ws-overview:not([hidden])[data-state="ready"]) .ws-n { display: inline; font-size: 12px; }
.lgs-page .ws-title { margin: 4px 0 4px; font-size: 19px; font-weight: 400; line-height: 1.3; }
.lgs-page .ws-snippet { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: var(--muted);
  font-size: 14px; line-height: 1.55; }
.lgs-page .ws-overview { margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lgs-page .ws-overview h2 { margin: 0 0 6px; font: 600 14px/1.2 var(--text); color: var(--muted); }
.lgs-page .ws-empty, .lgs-page #ws-banner { color: var(--ink); font-size: 15px; }
.lgs-page .ws-empty p { margin: 0; }
.lgs-end { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; margin-top: 28px; font-size: 13px; color: var(--muted); }
.lgs-end .ws-engines, .lgs-end .ws-premium { margin: 0; }
.lgs-page .ws-about { margin: 0; color: var(--muted); }
.lgs-page .ws-about summary { min-height: 32px; display: inline-flex; align-items: center; color: var(--muted); font-size: 13px; }
.lgs-page .lgs-item-link { padding: 0; border: 0; background: none; }
.lgs-page .lgs-group-list { gap: 16px; }
.lgs-page .lgs-item-link b { color: var(--accent); font-weight: 400; font-size: 17px; }
.lgs-page #lgs-things-intro { margin: 0 0 12px; color: var(--muted); text-align: left; }
@media (max-width: 1100px) {
  .lgs-page .lgs-stage { padding-left: 24px; }
}
@media (max-width: 760px) {
  .lgs-page .page-top.lgs-top { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .lgs-page[data-view="results"] .lgs-form { order: 3; flex: 1 1 100%; flex-direction: row; max-width: none; }
  .lgs-page[data-view="results"] .lgs-go { display: none; }
  .lgs-page[data-view="front"] .page-top.lgs-top { padding: 64px 16px 14vh; }
  .lgs-page[data-view="front"] .page-tools { top: 10px; right: 12px; }
  .lgs-page .lgs-stage { padding: 0 16px 32px; }
  .lgs-page[data-view="results"] .lgs-name { font-size: 20px; }
  .lgs-page .seg.lgs-segments { margin: 0 -16px 16px; padding: 0 8px; }
  .lgs-page .ws-title { font-size: 17px; }
}
.lgs-page .ws-results.ws-grid .ws-card { padding: 0; border: 0; background: none; box-shadow: none; }

/* Plain words (owner, 28 Oct 2026): a neural name keeps its place, the everyday word sits small beside it
   (lingo.js data-term, the model sheet, the Settings map); the temporary chat button names itself when on;
   neurtor's calm "Status checks start at launch." line. */
.lingo-word { margin-left: 6px; color: var(--muted); font: 500 0.78em/1.2 var(--text); letter-spacing: 0; text-transform: none; }
.hs-map a > span { display: inline-flex; align-items: center; gap: 8px; }
.hs-map-sub { color: var(--muted); font: 500 13px/1.3 var(--text); }
.axc-name .axc-plain { margin-left: 6px; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.axc-seg button:has(.axc-neural) { display: inline-flex; flex-direction: column; justify-content: center; height: auto; min-height: 40px;
  padding: 4px 6px; line-height: 1.15; white-space: normal; }
.axc-seg button .axc-neural { color: var(--muted); font-weight: 500; font-size: 10.5px; }
.temp-btn { gap: 6px; }
.temp-btn .temp-word { display: none; font: 600 13px/1 var(--text); }
.temp-btn[aria-pressed="true"] { display: inline-flex; align-items: center; width: auto; padding: 0 10px; }
.temp-btn[aria-pressed="true"] .temp-word { display: inline; }
.ns-overall.ns-calm { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.ns-list li.ns-unmonitored > span:last-child, .ns-list li.ns-unknown > span:last-child { color: var(--muted); font-weight: 500; }
.ns-list li.ns-unmonitored i, .ns-list li.ns-unknown i { display: none; }

#wallet-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
#wallet-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; font-family: var(--mono, ui-monospace, monospace); font-size: 14px; }

/* Locigram history and the explicit filter (owner, 30 Oct 2026) */
.lgs-hist-switches { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); margin: 0 0 var(--s2, 8px); }
.lgs-hist-list { list-style: none; margin: 0 0 var(--s3, 12px); padding: 0; }
.lgs-hist-item { display: flex; align-items: center; gap: var(--s3, 12px); padding: 6px 0; border-bottom: 1px solid var(--edge); }
.lgs-hist-item .link-btn { flex: 1; text-align: left; overflow-wrap: anywhere; }
.ws-safe { margin: 0; color: var(--muted); }
.lgs-hist-item .link-btn { background: none; border: 0; padding: 4px 0; color: var(--accent); font: inherit; cursor: pointer; }
.lgs-hist-item .link-btn:hover { text-decoration: underline; }
.lgs-hist-keep { display: flex; align-items: center; gap: var(--s2, 8px); margin: 0 0 var(--s2, 8px); }
.lgs-hist-keep select { font: inherit; padding: 4px 8px; border: 1px solid var(--edge); border-radius: var(--r-2, 8px); background: var(--card, transparent); color: inherit; }

/* Locigram sources: drop-down, reader, Corlatra, bookmarks (locigram-reader.js) */
.ws-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4, 16px); align-items: start; }
.ws-split:has(.ws-reader:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); }
.ws-reader { position: sticky; top: 72px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; padding: var(--s3, 12px) var(--s4, 16px); border: 1px solid var(--edge); border-radius: var(--r-3, 12px); background: var(--card); box-shadow: var(--shadow-2); }
.ws-reader.is-locked { border-color: var(--accent); }
.ws-rd-head, .ws-cl-head { display: flex; justify-content: space-between; gap: var(--s3, 12px); align-items: flex-start; }
.ws-rd-head h2, .ws-cl-head h2 { margin: 0 0 2px; font-size: var(--fs-3, 1.05rem); }
.ws-rd-tools { display: flex; gap: var(--s2, 8px); flex-wrap: wrap; justify-content: flex-end; }
.ws-rd-text { flex: 1; min-height: 8rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; padding: var(--s2, 8px) 0; }
.ws-rd-text mark, .ws-drop-text mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.ws-rd-text mark.is-flash { outline: 2px solid var(--accent); }
.ws-rd-actions, .ws-drop-actions { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); align-items: center; margin-top: var(--s2, 8px); }
.ws-drop { margin: var(--s2, 8px) 0 var(--s3, 12px); padding: var(--s2, 8px) var(--s3, 12px); border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 var(--r-2, 8px) var(--r-2, 8px) 0; }
.ws-drop-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; max-height: 11rem; overflow: auto; }
.ws-drop-hint { margin-left: auto; }
.ws-result mark.qw { background: transparent; color: inherit; }
.ws-result.is-hot mark.qw, .ws-result.is-lit mark.qw { background: var(--accent-soft); border-radius: 3px; }
.ws-result.is-lit { outline: 1px solid var(--edge); border-radius: var(--r-2, 8px); }
.ws-save { margin-left: auto; padding: 2px 4px; border: 0; background: none; color: var(--muted); cursor: pointer; opacity: 0; border-radius: var(--r-1, 6px); }
.ws-save svg { width: 18px; height: 18px; display: block; }
.ws-result:hover .ws-save, .ws-result:focus-within .ws-save, .ws-save[aria-pressed="true"], .ws-save:focus-visible { opacity: 1; }
.ws-save[aria-pressed="true"] { color: var(--accent); }
@media (hover: none) { .ws-save { opacity: 1; } }
.ws-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 8px 14px; border-radius: var(--r-2, 8px); background: var(--card); border: 1px solid var(--edge); box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; z-index: 60; }
.ws-toast.is-on { opacity: 1; }
.lgs-bm-list { list-style: none; margin: 0; padding: 0; }
.lgs-bm-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px var(--s3, 12px); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--edge); }
.lgs-bm-item .lgs-bm-host { grid-column: 1 / -1; }
.lgs-bm-item a { overflow-wrap: anywhere; }
.lgs-set-row { margin: 0 0 var(--s4, 16px); }
.lgs-set-row select { font: inherit; padding: 4px 8px; border: 1px solid var(--edge); border-radius: var(--r-2, 8px); background: var(--card); color: inherit; }
.ws-corlatra { position: fixed; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 640px); display: flex; flex-direction: column; gap: var(--s2, 8px); padding: var(--s3, 12px) var(--s4, 16px); border: 1px solid var(--edge); border-radius: var(--r-3, 12px); background: var(--card); box-shadow: var(--shadow-3, var(--shadow-2)); z-index: 50; }
.ws-cl-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; min-height: 4rem; }
.ws-cl-q { align-self: flex-end; margin: 0; padding: 6px 10px; border-radius: var(--r-2, 8px); background: var(--accent-soft); max-width: 90%; overflow-wrap: anywhere; }
.ws-cl-a { margin: 0; padding: 6px 10px; border-radius: var(--r-2, 8px); border: 1px solid var(--edge); max-width: 95%; white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-cl-a.is-error { color: var(--danger-ink, inherit); }
.ws-cl-save { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); align-items: center; }
.ws-cl-save select { font: inherit; padding: 3px 6px; border: 1px solid var(--edge); border-radius: var(--r-2, 8px); background: var(--card); color: inherit; max-width: 12rem; }
.ws-cl-form { display: flex; gap: var(--s2, 8px); align-items: flex-end; }
.ws-cl-form textarea { flex: 1; font: inherit; resize: none; padding: 6px 8px; border: 1px solid var(--edge); border-radius: var(--r-2, 8px); background: var(--card); color: inherit; }
@media (max-width: 900px) {
  .ws-split:has(.ws-reader:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .ws-reader { position: sticky; top: auto; bottom: 0; order: -1; max-height: 45vh; }
  .ws-corlatra { right: 8px; left: 8px; bottom: 8px; width: auto; }
}
@media (prefers-reduced-motion: no-preference) { .ws-result mark.qw { transition: background .25s; } }
.ws-rd-head .fine, .ws-cl-head .fine, .ws-drop-hint { text-align: left; margin: 0; }
.ws-rd-tools button, .ws-cl-head button { white-space: nowrap; }
.ws-rd-tools { flex-direction: column; align-items: flex-end; }
.ws-corlatra { right: 96px; }
@media (max-width: 900px) { .ws-corlatra { right: 8px; } }

/* Maps (maps.js, maps.py) */
.maps-page .maps-app { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: calc(100vh - 64px); min-height: 480px; }
.maps-side { overflow: auto; padding: var(--s3, 12px) var(--s4, 16px); border-right: 1px solid var(--edge); background: var(--card); }
.maps-stage { position: relative; min-width: 0; }
.maps-stage .maps-map { position: absolute; inset: 0; width: auto; height: auto; }
.maps-map.is-street { cursor: crosshair; }
.maps-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: var(--s2, 8px); align-items: center; padding: 6px 8px; border: 1px solid var(--edge); border-radius: var(--r-3, 12px); background: var(--card); box-shadow: var(--shadow-1); z-index: 2; }
.maps-tools select { font: inherit; padding: 3px 6px; border: 1px solid var(--edge); border-radius: var(--r-2, 8px); background: var(--card); color: inherit; }
.maps-search { display: flex; gap: var(--s2, 8px); margin: var(--s3, 12px) 0; }
.maps-search input, .maps-stop input, .maps-when select, .maps-when input { flex: 1; font: inherit; padding: 6px 10px; border: 1px solid var(--edge); border-radius: var(--r-2, 8px); background: var(--card); color: inherit; min-width: 0; }
.maps-list { list-style: none; margin: 0; padding: 0; }
.maps-result { padding: 6px 0; border-bottom: 1px solid var(--edge); }
.maps-result-btn, .maps-step-btn, .maps-sug-btn { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.maps-result-btn:hover b, .maps-step-btn:hover { color: var(--accent); }
.maps-card { margin-top: var(--s3, 12px); padding: var(--s3, 12px); border: 1px solid var(--edge); border-radius: var(--r-3, 12px); box-shadow: var(--shadow-1); }
.maps-card h2 { margin: 0 0 2px; font-size: var(--fs-3, 1.05rem); }
.maps-quick { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); margin-bottom: var(--s3, 12px); }
.maps-quick:empty { display: none; }
.maps-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maps-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); margin: var(--s2, 8px) 0; }
.maps-fuel { margin: var(--s2, 8px) 0; }
.maps-fuel input { width: 6rem; max-width: 100%; }
.maps-credits { margin: var(--s3, 12px) var(--s4, 16px); font-size: var(--fs-1, 0.85rem); }
.maps-credits summary { cursor: pointer; }
#mp-suggest { list-style: none; margin: 0 0 var(--s2, 8px); padding: 0; }
.maps-card select, .maps-card input[type=text], #mp-history select { max-width: 100%; }
.maps-actions { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); align-items: center; margin: var(--s2, 8px) 0; }
.maps-stop { position: relative; display: flex; gap: var(--s2, 8px); align-items: center; margin-bottom: var(--s2, 8px); flex-wrap: wrap; }
.maps-stop-label { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink, var(--card)); font-size: .75rem; font-weight: 600; }
.maps-sug { position: absolute; top: 100%; left: 30px; right: 0; z-index: 5; margin: 2px 0 0; padding: 4px 8px; list-style: none; border: 1px solid var(--edge); border-radius: var(--r-2, 8px); background: var(--card); box-shadow: var(--shadow-2); }
.maps-modes { margin: var(--s2, 8px) 0; }
.maps-avoid { border: 0; padding: 0; margin: var(--s2, 8px) 0; display: flex; flex-wrap: wrap; gap: var(--s3, 12px); }
.maps-when { display: flex; gap: var(--s2, 8px); margin: var(--s2, 8px) 0; }
.maps-route { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-top: var(--s2, 8px); padding: 8px 10px; border: 1px solid var(--edge); border-radius: var(--r-2, 8px); background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.maps-route[aria-pressed="true"] { border-color: var(--accent); box-shadow: var(--shadow-1); }
.maps-steps { list-style: decimal; margin: var(--s3, 12px) 0 0 1.2em; padding: 0; }
.maps-step { padding: 2px 0; }
.maps-step .fine { display: block; }
.maps-pinlist h3 { margin: var(--s3, 12px) 0 2px; font-size: var(--fs-2, .95rem); }
.maps-marker { width: 22px; height: 22px; margin-top: -11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); border: 2px solid var(--card); box-shadow: var(--shadow-2); display: grid; place-items: center; color: var(--accent-ink, var(--card)); font-size: .7rem; font-weight: 700; }
.maps-marker.is-stop { transform: none; border-radius: 50%; }
.maps-marker.is-me { transform: none; border-radius: 50%; background: var(--ok, var(--accent)); }
.maps-marker.is-street { transform: rotate(var(--heading, 0deg)); border-radius: 50% 50% 0 50%; background: var(--ok, var(--accent)); }
.maps-street { position: absolute; left: 12px; bottom: 12px; width: min(520px, calc(100% - 24px)); padding: var(--s2, 8px) var(--s3, 12px); border: 1px solid var(--edge); border-radius: var(--r-3, 12px); background: var(--card); box-shadow: var(--shadow-3, var(--shadow-2)); z-index: 3; }
.maps-street-head { display: flex; justify-content: space-between; gap: var(--s3, 12px); align-items: flex-start; }
.maps-street-view { width: 100%; aspect-ratio: 16 / 9; margin: var(--s2, 8px) 0; border-radius: var(--r-2, 8px); background-color: var(--edge); background-repeat: no-repeat; touch-action: pan-y; cursor: grab; }
@media (max-width: 800px) {
  .maps-page .maps-app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 46vh) minmax(0, 1fr); height: calc(100vh - 56px); }
  .maps-side { border-right: 0; border-top: 1px solid var(--edge); order: 2; }
}
.maps-street, .maps-tools, .maps-sug { background-image: linear-gradient(var(--card), var(--card)), linear-gradient(Canvas, Canvas); }
.maps-step { display: flex; justify-content: space-between; gap: var(--s3, 12px); align-items: baseline; }
.maps-step .fine, .maps-card .fine, .maps-street-head .fine, .maps-route .fine { text-align: left; margin: 0; }
.maps-step-btn { width: auto; }
.maps-note { margin: 6px 0 0; font-size: var(--fs-1, 13px); color: var(--muted); }

/* Explore plans (plans.html #explore): one card per plan, a coloured rail down the left edge (the rail is decoration, never text) */
.explore { margin-top: var(--s6); }
.explore-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.xp-card { background: var(--surface); color: var(--ink); border: 1px solid var(--edge); border-left: 10px solid var(--rail, var(--accent));
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 4px); display: grid; gap: var(--s3); align-content: start; }
.xp-card h3 { margin: 0; font: 800 22px/1.2 var(--display); }
.xp-price { margin: 0; font-weight: 700; }
.xp-rows { margin: 0; display: grid; gap: 8px; font-size: 14.5px; }
.xp-rows dt { font-weight: 700; }
.xp-rows dd { margin: 0 0 4px; }
.xp-no { color: var(--muted); }
.xp-foot { margin: 0; color: var(--muted); font-size: 12.5px; }

/* Mail AI pass (mail_pass.py): without Mail AI on the plan (and no pass) Relay and Ask Axork aren't drawn at all. */
html[data-mail-ai="0"] #mcp-topbar,
html[data-mail-ai="0"] #ai-toggle,
html[data-mail-ai="0"] #mail-ai,
html[data-mail-ai="0"] #mcp-edge,
html[data-mail-ai="0"] #ai-away,
html[data-mail-ai="0"] #read-ask { display: none !important; }
.mp-card .mp-price { font-weight: 600; margin: var(--s2, 8px) 0; }
.mp-card .mp-facts { margin: var(--s2, 8px) 0; }

/* ===================================================================== Synaram everyday (static/synaram-social.js)
   Reactions, polls, pinned messages, search inside one chat, @mentions, group admin and invite links. Tokens only. */
.syr-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.syr-react { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 8px; border: 1px solid var(--line);
  border-radius: 99px; background: var(--surface); color: var(--ink); font: 600 12.5px/1 var(--text); cursor: pointer; }
.syr-react.mine { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.syr-react:hover, .syr-react:focus-visible { border-color: var(--accent); }
.syr-emoji { font-size: 15px; line-height: 1; }
.syr-picker { position: absolute; z-index: 30; display: flex; flex-wrap: wrap; gap: 2px; max-width: 280px; padding: 4px;
  border-radius: 99px; background: var(--glass-opaque, var(--surface)); box-shadow: var(--shadow-2), var(--edge); }
.syr-pick { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 20px; cursor: pointer; }
.syr-pick:hover, .syr-pick:focus-visible { background: var(--hover); }
.syr-more { font: 600 16px/1 var(--text); color: var(--muted); }
.msg-acts { position: relative; }
.bubble.syr-mentioned > .msg-card { box-shadow: inset 3px 0 0 var(--accent), var(--shadow-1); }
.bubble.syr-flash > .msg-card { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .bubble.syr-flash > .msg-card { transition: outline-color var(--t) var(--ease); } }

.syr-poll { display: grid; gap: 6px; min-width: min(260px, 70vw); }
.syr-poll-q { margin: 0; font-weight: 600; }
.syr-poll-kind, .syr-poll-foot { color: var(--muted); font-size: var(--fs-meta, 12px); }
.syr-poll-opts { display: grid; gap: 4px; }
.syr-opt { position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-sm, 8px); background: var(--surface); color: var(--ink); font: inherit;
  text-align: left; cursor: pointer; }
.syr-opt.mine { border-color: var(--accent); }
.syr-bar { position: absolute; inset: 0 auto 0 0; width: var(--syr-pct, 0%); background: var(--accent-soft); pointer-events: none; }
.syr-opt-label { position: relative; flex: 1; }
.syr-opt-n { position: relative; color: var(--muted); font-weight: 600; }
.syr-opt.mine .syr-opt-n { color: var(--accent); }

.syr-pins { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.syr-pin-go { display: grid; flex: 1; min-width: 0; gap: 1px; padding: 2px 0 2px 10px; border: 0; border-left: 3px solid var(--accent);
  background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.syr-pin-go b { color: var(--accent); font-size: 12px; }
.syr-pin-go span { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.syr-search { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.syr-search input { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--r-sm, 8px);
  background: var(--surface); color: var(--ink); font: inherit; }
.syr-results { grid-column: 1 / -1; max-height: 40vh; margin: 0; padding: 0; overflow: auto; list-style: none; }
.syr-hit { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-sm, 8px);
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.syr-hit:hover, .syr-hit:focus-visible { background: var(--hover); }
.syr-hit time { color: var(--muted); font-size: 12px; }
.syr-hit span { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.syr-none { padding: 8px; color: var(--muted); font-size: 13px; }

.syr-mention-pop { position: absolute; bottom: 100%; left: 48px; z-index: 30; min-width: 220px; margin: 0 0 6px; padding: 4px; list-style: none;
  border-radius: var(--r, 12px); background: var(--glass-opaque, var(--surface)); box-shadow: var(--shadow-2), var(--edge); }
.syr-mention-pop[hidden] { display: none; }
.syr-mention-pop li { display: grid; gap: 1px; padding: 6px 10px; border-radius: var(--r-sm, 8px); cursor: pointer; }
.syr-mention-pop li.on, .syr-mention-pop li:hover { background: var(--accent-soft); }
.syr-mention-pop small { color: var(--muted); }
.compose-line { position: relative; }

.syr-earlier { display: block; margin: 8px auto; }
.syr-dialog { max-width: min(440px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: var(--r, 12px); background: var(--surface);
  color: var(--ink); box-shadow: var(--shadow-3); }
.syr-dialog::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.syr-dialog h3 { margin: 0 0 12px; }
.syr-poll-form, .syr-poll-inputs { display: grid; gap: 10px; }
.syr-field { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.syr-field input, .syr-field select { min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--r-sm, 8px); background: var(--surface); color: var(--ink); font: inherit; font-weight: 400; }
.syr-dialog-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.syr-admin .syr-admins, .syr-links, .syr-asking { display: grid; gap: 6px; margin: 6px 0; padding: 0; list-style: none; }
.syr-admins li, .syr-links li, .syr-asking li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.syr-admins li span, .syr-links li span, .syr-asking li span { flex: 1; min-width: 0; }
.syr-link-out { display: grid; gap: 6px; margin: 6px 0; }
.syr-link { width: 100%; min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm, 8px);
  background: var(--surface); color: var(--ink); font: 12.5px/1 var(--mono, monospace); }

/* End-to-end files in Synaram (e2ee.js sendFile / openFile). */
.e2f { display: grid; gap: 6px; justify-items: start; }
.e2f-line { margin: 0; }
.e2f-line small { color: var(--muted); }
.e2f-img { display: block; max-width: min(320px, 100%); max-height: 320px; border-radius: var(--r-sm, 8px); }
.e2f audio { width: min(300px, 100%); }

/* ===================================================================== Axon thread, polished (owner, 1 Nov 2026)
   Owner's screenshots: one thin line down the middle; other people's cards on the LEFT, yours on the RIGHT, each
   hugging the line and joined to its node by a short line at the card's vertical centre; even space between cards; a
   reply is a bracket on the LEFT of the line from node to node. Phones (pane under 640 px): the line near the left edge,
   every card on its right, joined the same way, with a coloured edge on the card's left. No sheath band over the line,
   no edge bars on the far side of a card, no lock emoji on the nodes (the chat header says it's end-to-end).
   This block replaces the older layout rules above for Synaram's thread (.bubbles.axon-thread). */
html .bubbles.axon-thread > li {
  --ax-gap: 34px; --ax-pad: 12px; --ax-node: 12px;
  padding-top: var(--ax-pad); padding-bottom: var(--ax-pad);
}
html .bubbles.axon-thread > li.ax-cont { --ax-pad: 6px; }
/* sides: theirs left of the line, yours right of it, both hugging the line */
html .bubbles.axon-thread > .bubble:not(.mine):not(.system) {
  justify-content: flex-end; padding-left: 0; padding-right: calc(100% - var(--ax-x) + var(--ax-gap));
}
html .bubbles.axon-thread > .bubble.mine:not(.system) {
  justify-content: flex-start; padding-right: 0; padding-left: calc(var(--ax-x) + var(--ax-gap));
}
html .bubbles.axon-thread > .bubble:not(.system) .msg-card { max-width: min(560px, calc(100% - 8px)); }
/* files and pictures follow the same rule as words: no card across the line */
html .bubbles.axon-thread > .bubble.attachment > .ax-rail,
html .bubbles.axon-thread > .bubble.attachment > .ax-node:not(g),
html .bubbles.axon-thread > .bubble.attachment > .ax-dendrite:not(path) { display: block; }
html .bubbles.axon-thread > .bubble.attachment .msg-card { width: auto; max-width: min(420px, calc(100% - 8px)); }
/* one thin, continuous line: no sheath band */
html .bubbles.axon-thread > li > .ax-rail { width: 2px; background: color-mix(in srgb, var(--faint) 60%, transparent); }
html .bubbles.axon-thread > li > .ax-rail::before,
html .bubbles.axon-thread > li > .ax-rail::after { display: none; }
/* the node sits at the card's vertical centre; the short line runs from the node to the card */
html .bubbles.axon-thread > li > .ax-node:not(g) {
  top: calc(50% - var(--ax-node) / 2); width: var(--ax-node); height: var(--ax-node); z-index: 2;
  box-shadow: 0 0 0 3px var(--bg, var(--surface));
}
html .bubbles.axon-thread > li.ax-cont > .ax-node:not(g) { --ax-node: 8px; }
html .bubbles.axon-thread > li > .ax-node:not(g).ax-named { --ax-node: 22px; }
html .bubbles.axon-thread > li > .ax-n-wave:not(g) { top: calc(50% - 7px); }
html .bubbles.axon-thread > .bubble:not(.system) > .ax-dendrite:not(path) {
  display: block; top: calc(50% - 1px); height: 2px; width: calc(var(--ax-gap) - 6px); z-index: 1;
  background: color-mix(in srgb, var(--ax-c) 60%, transparent);
}
html .bubbles.axon-thread > .bubble:not(.mine):not(.system) > .ax-dendrite:not(path) { left: auto; right: calc(100% - var(--ax-x) + 6px); }
html .bubbles.axon-thread > .bubble.mine:not(.system) > .ax-dendrite:not(path) { right: auto; left: calc(var(--ax-x) + 6px); }
/* no edge bars on the far side of a card, no lock emoji beside the node */
html .bubbles.axon-thread > .bubble .msg-card::before { content: none !important; display: none !important; }
html .bubbles.axon-thread > .bubble .msg-card { padding-left: 12px; padding-right: 12px; }
html .bubbles.axon-thread > .ax-lock > .ax-node:not(g)::after { content: none; }
/* system notes and calls: a pill on the line, the line passing behind it */
html .bubbles.axon-thread > .bubble.system { justify-content: center; padding: calc(var(--ax-pad) + 4px) 0; }
html .bubbles.axon-thread > .bubble.system > .ax-node:not(g) { display: none; }
html .bubbles.axon-thread > .bubble.system .msg-card { position: relative; z-index: 2; }
/* a reply: one bracket on the LEFT of the line, from its node up to the node it answers */
html .bubbles.axon-thread > .ax-has-branch:not(.ax-folded)::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; box-sizing: border-box;
  top: calc(50% - var(--ax-reach, 0px) - 1px); height: calc(var(--ax-reach, 0px) + 2px);
  left: calc(var(--ax-x) - 20px); right: auto; width: 20px;
  border: 2px solid color-mix(in srgb, var(--ax-c, var(--accent)) 75%, transparent); border-right: 0; border-radius: 12px 0 0 12px;
}
html .bubbles.axon-thread > .ax-has-branch > .ax-collateral { display: none; }
html .bubbles.axon-thread > .ax-has-branch.ax-folded > .ax-collateral { display: block; top: calc(50% - 6px); }

/* phones and narrow panes: the line near the left edge, every card on its right */
@container axthread (max-width: 639px) {
  html .bubbles.axon-thread > li { --ax-x: 30px; --ax-gap: 26px; }
  html .bubbles.axon-thread > .bubble:not(.system),
  html .bubbles.axon-thread > .bubble.mine:not(.system),
  html .bubbles.axon-thread > .bubble:not(.mine):not(.system) {
    justify-content: flex-start; padding-right: 0; padding-left: calc(var(--ax-x) + var(--ax-gap));
  }
  html .bubbles.axon-thread > .bubble:not(.system) > .ax-dendrite:not(path),
  html .bubbles.axon-thread > .bubble:not(.mine):not(.system) > .ax-dendrite:not(path) { right: auto; left: calc(var(--ax-x) + 6px); }
  html .bubbles.axon-thread > .bubble:not(.system) .msg-card { border-left: 3px solid var(--ax-c); max-width: 100%; }
  html .bubbles.axon-thread > li > .ax-rail,
  html .bubbles.axon-thread > li > .ax-node:not(g) { left: var(--ax-x); right: auto; transform: translateX(-50%); }
  html .bubbles.axon-thread > .bubble.system { justify-content: flex-start; padding-left: calc(var(--ax-x) - 14px); }
  html .bubbles.axon-thread .syr-poll { min-width: 0; }
  html .bubbles.axon-thread > .bubble:not(.system) .msg-card { min-width: 0; overflow-wrap: anywhere; }
}

/* ===================================================================== Axon thread, polished: Axork Chat and pop-outs
   (owner, 1 Nov 2026: "the dock pop-outs and Axork Chat don't yet use the polished thread fix"). The same rules as
   Synaram's polished block above: one thin line; the other side's cards (Corlatra's answers) on the LEFT, yours on the
   RIGHT, each hugging the line and joined to its node by a short line level with the node; even space between cards;
   a reply is one bracket on the LEFT of the line, node to node; no sheath band. A long answer keeps its node level with
   its first lines (--ax-node-y: at most 120 px down) so the join stays in view. Narrow panes and the pop-outs: the line
   near the left edge, every card on its right with a coloured edge. Right-to-left pages keep their mirrored rules. */
html:not([dir="rtl"]) .messages.axon-thread:not([dir="rtl"]) > .msg {
  --ax-gap: 34px; --ax-pad: 12px; --ax-node: 12px; --ax-node-y: min(50%, 120px);
  padding-top: var(--ax-pad); padding-bottom: var(--ax-pad);
}
html:not([dir="rtl"]) .messages.axon-thread:not([dir="rtl"]) > .msg-ai {
  align-items: flex-end; padding-left: 0; padding-right: calc(100% - var(--ax-x) + var(--ax-gap));
}
html:not([dir="rtl"]) .messages.axon-thread:not([dir="rtl"]) > .msg-ai > .content { align-self: flex-end; }
html:not([dir="rtl"]) .messages.axon-thread:not([dir="rtl"]) > .msg-user {
  align-items: flex-start; padding-right: 0; padding-left: calc(var(--ax-x) + var(--ax-gap));
}
html .messages.axon-thread > .msg > .ax-rail { width: 2px; background: color-mix(in srgb, var(--faint) 60%, transparent); }
html .messages.axon-thread > .msg > .ax-rail::before,
html .messages.axon-thread > .msg > .ax-rail::after { display: none; }
html .messages.axon-thread > .msg > .ax-node:not(g) {
  top: calc(var(--ax-node-y) - var(--ax-node) / 2); z-index: 2; box-shadow: 0 0 0 3px var(--bg, var(--surface));
}
html .messages.axon-thread > .msg > .ax-node:not(g):not(.ax-n-ai) { width: var(--ax-node); height: var(--ax-node); }
html .messages.axon-thread > .msg > .ax-node:not(g).ax-named { --ax-node: 22px; }
html .messages.axon-thread > .msg > .ax-dendrite:not(path) {
  display: block; top: calc(var(--ax-node-y) - 1px); height: 2px; width: calc(var(--ax-gap) - 6px); z-index: 1;
  background: color-mix(in srgb, var(--ax-c) 60%, transparent);
}
html:not([dir="rtl"]) .messages.axon-thread:not([dir="rtl"]) > .msg-ai > .ax-dendrite:not(path) { left: auto; right: calc(100% - var(--ax-x) + 6px); }
html:not([dir="rtl"]) .messages.axon-thread:not([dir="rtl"]) > .msg-user > .ax-dendrite:not(path) { right: auto; left: calc(var(--ax-x) + 6px); }
html:not([dir="rtl"]) .messages.axon-thread:not([dir="rtl"]) > .ax-has-branch:is(.mine, :not(.mine)):not(.ax-folded)::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; box-sizing: border-box;
  top: calc(var(--ax-node-y) - var(--ax-reach, 0px) - 1px); height: calc(var(--ax-reach, 0px) + 2px);
  left: calc(var(--ax-x) - 20px); right: auto; width: 20px;
  border: 2px solid color-mix(in srgb, var(--ax-c, var(--accent)) 75%, transparent); border-right: 0; border-radius: 12px 0 0 12px;
}
html .messages.axon-thread > .ax-has-branch > .ax-collateral { display: none; }
html .messages.axon-thread > .ax-has-branch.ax-folded > .ax-collateral { display: block; top: calc(var(--ax-node-y) - 6px); }
@container axthread (max-width: 639px) {
  html:not([dir="rtl"]) .messages.axon-thread:not([dir="rtl"]) > .msg { --ax-x: 30px; --ax-gap: 26px; }
  html:not([dir="rtl"]) .messages.axon-thread:not([dir="rtl"]) > :is(.msg-ai, .msg-user) {
    align-items: flex-start; padding-right: 0; padding-left: calc(var(--ax-x) + var(--ax-gap));
  }
  html:not([dir="rtl"]) .messages.axon-thread:not([dir="rtl"]) > .msg-ai > .content { align-self: flex-start; }
  html:not([dir="rtl"]) .messages.axon-thread:not([dir="rtl"]) > :is(.msg-ai, .msg-user) > .ax-dendrite:not(path) { right: auto; left: calc(var(--ax-x) + 6px); }
  html .messages.axon-thread > .msg-user .bubble,
  html .messages.axon-thread > .msg-ai > .content { border-left: 3px solid var(--ax-c); max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
}

/* the pop-outs: the phone layout of the same thread */
html .dw-list.axon-thread > .dw-msg {
  --ax-x: 14px; --ax-gap: 22px; --ax-pad: 10px; --ax-node: 10px; --ax-node-y: min(50%, 80px);
  padding: var(--ax-pad) 0 var(--ax-pad) calc(var(--ax-x) + var(--ax-gap));
}
html .dw-list.axon-thread > .dw-msg > .ax-rail { width: 2px; background: color-mix(in srgb, var(--faint) 60%, transparent); }
html .dw-list.axon-thread > .dw-msg > .ax-rail::before,
html .dw-list.axon-thread > .dw-msg > .ax-rail::after { display: none; }
html .dw-list.axon-thread > .dw-msg > .ax-node:not(g) {
  top: calc(var(--ax-node-y) - var(--ax-node) / 2); z-index: 2; box-shadow: 0 0 0 3px var(--surface);
}
html .dw-list.axon-thread > .dw-msg > .ax-node:not(g):not(.ax-n-ai) { width: var(--ax-node); height: var(--ax-node); }
html .dw-list.axon-thread > .dw-msg > .ax-dendrite:not(path) {
  display: block; top: calc(var(--ax-node-y) - 1px); height: 2px; width: calc(var(--ax-gap) - 6px); z-index: 1;
  left: calc(var(--ax-x) + 6px); right: auto; background: color-mix(in srgb, var(--ax-c) 60%, transparent);
}
html .dw-list.axon-thread > .dw-msg:not(.sys) > .dw-bub { border-left: 3px solid var(--ax-c); overflow-wrap: anywhere; }
html .dw-list.axon-thread > .dw-msg > .dw-bub::before { content: none; display: none; }
html .dw-list.axon-thread > .dw-msg.theirs:not(.sys) > .dw-bub {
  padding: 8px 12px; border-radius: 14px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ax-c, var(--accent)) 28%, var(--line)); border-left: 3px solid var(--ax-c);
}
html .dw-list.axon-thread:not([dir="rtl"]) > .ax-has-branch:is(.mine, :not(.mine)):not(.ax-folded)::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; box-sizing: border-box;
  top: calc(var(--ax-node-y) - var(--ax-reach, 0px) - 1px); height: calc(var(--ax-reach, 0px) + 2px);
  left: calc(var(--ax-x) - 12px); right: auto; width: 12px;
  border: 2px solid color-mix(in srgb, var(--ax-c, var(--accent)) 75%, transparent); border-right: 0; border-radius: 10px 0 0 10px;
}
html .dw-list.axon-thread > .ax-has-branch > .ax-collateral { display: none; }

/* Axork Chat on a phone (pre-launch pass, 1 Nov 2026): the chat page has no services row (owner, 28 Oct 2026); the
   places live in the side menu, so the top bar keeps the menu, the model, the bell, New chat and Sign up only. */
@media (max-width: 899px) {
  body.workspace-page header.topbar .app-nav { display: none; }
  body.workspace-page header.topbar .chat-title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 520px) {
  body.workspace-page header.topbar .chat-title { display: none; }
  body.workspace-page header.topbar .picker-btn { max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.workspace-page header.topbar { gap: 4px; }
}

/* Notches and the Dynamic Island (owner, 1 Nov 2026): the page draws edge to edge (viewport-fit=cover), so the chat's
   top bar and its side menu step in (the message box's .dock already does) by each phone's own safe area. env() is 0 where there is no notch,
   so every phone gets exactly its own spacing (iPhone Dynamic Island, Android camera holes, landscape side insets). */
body.workspace-page header.topbar {
  padding-top: max(6px, env(safe-area-inset-top, 0px));
  padding-left: max(6px, env(safe-area-inset-left, 0px));
  padding-right: max(6px, env(safe-area-inset-right, 0px));
}
body.workspace-page .sidebar { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Control room (/owner/control): program keys, a test, then turn on. */
.cr-main { max-width: 1100px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }
.cr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.cr-head h1 { margin: 0 0 var(--s2); }
.cr-sub { margin: 0; max-width: 62ch; color: var(--muted, inherit); }
.cr-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr); gap: var(--s5); align-items: start; }
.cr-group { margin: var(--s5) 0 var(--s3); font-size: 1rem; }
.cr-card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); background: var(--surface); padding: var(--s4); margin-bottom: var(--s4); }
.cr-card h3 { margin: 0 0 var(--s2); }
.pay-main { max-width: 640px; margin: 0 auto; padding: var(--s6) var(--s4); }
.pay-sub { color: var(--muted, inherit); }
.pay-list { list-style: none; margin: var(--s4) 0; padding: 0; display: grid; gap: var(--s2); }
.pay-co { display: grid; gap: 2px; padding: var(--s3) var(--s4); min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; }
.pay-co span { color: var(--muted, inherit); font-size: var(--fs-meta, .875rem); }
.cr-tools { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; margin-bottom: var(--s3); grid-column: 1 / -1; }
.cr-summary { flex: 1 1 100%; margin: 0; color: var(--muted, inherit); }
.cr-find { flex: 1 1 260px; margin: 0; }
.cr-show { flex: 0 1 200px; margin: 0; }
details.cr-card { padding: 0; margin-bottom: var(--s2); }
details.cr-card > :not(summary) { margin-left: var(--s4); margin-right: var(--s4); }
details.cr-card[open] { padding-bottom: var(--s4); }
.cr-sum { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); min-height: 44px; cursor: pointer; list-style: none; }
.cr-sum::-webkit-details-marker { display: none; }
.cr-sum::before { content: "›"; display: inline-block; width: 1em; color: var(--muted, inherit); transition: transform 120ms; }
details[open] > .cr-sum::before { transform: rotate(90deg); }
.cr-sum h3 { margin: 0; font-size: 1rem; flex: 1 1 auto; min-width: 0; }
.cr-sum .cr-status { margin: 0; font-size: .875rem; }
.cr-last4 { font-family: ui-monospace, monospace; font-size: .8125rem; color: var(--muted, inherit); }
.cr-blurb, .cr-note, .cr-warn { margin: 0 0 var(--s3); }
.cr-status { margin: 0 0 var(--s3); font-weight: 600; }
.cr-status[data-status="failed"], .cr-warn { color: var(--danger); }
.cr-status[data-status="on"], .cr-status[data-status="ready"] { color: var(--ok, inherit); }
.cr-card .field { margin-bottom: var(--s3); }
.cr-opt, .cr-hint { color: var(--muted, inherit); font-weight: 400; }
.cr-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.cr-actions button { min-height: 44px; }
.cr-how { margin: var(--s3) 0 0; padding-left: 1.2em; }
.cr-how li { margin: 0 0 var(--s2); }
.cr-desk { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); background: var(--surface); padding: var(--s4); position: sticky; top: var(--s4); }
.cr-desk h2 { margin: 0 0 var(--s2); }
.cr-log { list-style: none; margin: var(--s3) 0; padding: 0; max-height: 320px; overflow: auto; }
.cr-log li { margin: 0 0 var(--s3); }
.cr-log p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cr-once { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s4); background: var(--surface); }
.cr-secret { display: block; margin: var(--s2) 0; overflow-wrap: anywhere; font-family: ui-monospace, monospace; }
@media (max-width: 900px) {
  .cr-layout { grid-template-columns: 1fr; }
  .cr-desk { position: static; }
}

/* ===================================================================== Build your plan (static/plans-build.js, /plans/build)
   Four starting cards, then one priced card per step down the left; the Plan Facts sheet, the price and the button stay
   pinned on the right (>= 900 px). On a phone the steps stack and a sticky bar at the bottom holds the price and
   "See the label", which slides the sheet up as a native dialog. Tokens only; prices come from the server. */
.bp-section { padding-bottom: 96px; scroll-margin-top: 72px; }
.bp-section > .anchor { display: block; position: relative; top: -72px; }
.bp-section > .page-sub { text-align: left; margin-inline: 0; max-width: 65ch; }
.bp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--s5); align-items: start; }
.bp-layout[hidden] { display: none; }
.bp-steps { display: grid; gap: var(--s6); min-width: 0; }
.bp-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.bp-step legend, .bp-legend { margin: 0 0 var(--s1); padding: 0; font: 700 var(--fs-pane)/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.bp-why { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--fs-row); }
.bp-sublead { margin: var(--s4) 0 var(--s2); font-weight: 600; font-size: var(--fs-row); }
.bp-sublead small { font-weight: 400; color: var(--muted); margin-left: var(--s1); }
.bp-note { margin: var(--s3) 0 0; color: var(--faint); font-size: var(--fs-small); }
.bp-note a { color: var(--accent); }
.bp-starts, .bp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
.bp-starts { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.bp-cards[hidden] { display: none; }
.bp-start, .bp-card { display: grid; gap: var(--s1); align-content: start; min-height: 44px; padding: var(--s3) var(--s4);
  border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); font: inherit;
  text-align: left; cursor: pointer; box-shadow: var(--shadow-1), var(--edge); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.bp-start:hover, .bp-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.bp-start[aria-checked="true"], .bp-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint), var(--edge); }
.bp-start-name { font-size: var(--fs-bar); }
.bp-start-tag, .bp-start-lines small { color: var(--muted); font-size: var(--fs-meta); }
.bp-start-price { font-weight: 600; font-size: var(--fs-row); }
.bp-start-lines { display: grid; gap: 2px; margin-top: var(--s1); }
.bp-card-label { font-size: var(--fs-row); }
.bp-delta { font-weight: 600; font-size: var(--fs-small); color: var(--accent); }
.bp-card[aria-checked="true"] .bp-delta, .bp-quietcard .bp-delta { color: var(--ink); }
.bp-card-line { color: var(--muted); font-size: var(--fs-meta); line-height: 1.35; }
.bp-same { margin: var(--s3) 0 0; font-weight: 600; color: var(--ink); }
.bp-same[hidden] { display: none; }
.bp-fams, .bp-efforts { display: grid; grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr); gap: var(--s1) var(--s3);
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.bp-fams dt, .bp-efforts dt { font-size: var(--fs-row); padding: var(--s1) 0; }
.bp-fams dt small, .bp-efforts dt small { color: var(--muted); font-weight: 400; }
.bp-fams dd, .bp-efforts dd { margin: 0; padding: var(--s1) 0; display: grid; gap: 2px; font-size: var(--fs-row); border-bottom: 1px solid var(--line); }
.bp-fams dd:last-of-type, .bp-efforts dd:last-of-type { border-bottom: 0; }
.bp-fam-price { color: var(--muted); font-size: var(--fs-meta); }
.bp-fam-off { color: var(--faint); font-size: var(--fs-meta); }
.bp-fams .bp-off, .bp-efforts .bp-off { opacity: 0.6; }
.bp-quiet { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2); }
.bp-quietcard { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--surface); }
.bp-quietcard small { color: var(--muted); font-size: var(--fs-meta); }
.bp-also { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); font-size: var(--fs-row); }
.bp-also a { color: var(--accent); }
.bp-rail { position: sticky; top: var(--s5); display: grid; gap: var(--s3); min-width: 0; }
.bp-sheet { min-width: 0; }
.bp-pricebox { margin: var(--s2) 0 0; display: flex; align-items: baseline; gap: var(--s2); }
.bp-pricebox b { font-size: var(--fs-title); line-height: 1; font-variant-numeric: tabular-nums; }
.bp-pricebox span { color: var(--muted); }
.bp-pot { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.bp-rail .bp-note { margin: 0; }
.bp-rail > .primary { min-height: 44px; }
.bp-rail .fine { margin: 0; text-align: left; min-height: 1em; }
.bp-facts-slot { min-width: 0; }
.bp-bar { display: none; }
.bp-sheetdlg { width: min(100%, 560px); max-width: 100%; margin: auto auto 0; padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
  max-height: 88dvh; overflow: auto; box-sizing: border-box; transform: translateY(100%); transition: transform var(--t) var(--ease); }
.bp-sheetdlg[open] { transform: none; }
.bp-sheetdlg::backdrop { background: color-mix(in srgb, var(--ink) 40%, transparent); }
.bp-sheetdlg-head { display: flex; justify-content: flex-end; margin-bottom: var(--s2); }
.bp-sheetdlg-head button { min-height: 44px; min-width: 44px; }
@media (max-width: 899px) {
  .bp-layout { grid-template-columns: 1fr; }
  .bp-rail { position: static; }
  .bp-sheet#bp-sheet { display: none; }                /* the phone reads the sheet from the bar's "See the label" */
  .bp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center;
    gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s4); padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom));
    background: var(--glass-opaque); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--line); box-shadow: var(--shadow-2); }
  .bp-bar[hidden] { display: none; }
  .bp-bar-price { min-height: 44px; padding: 0 var(--s2); border: 0; background: none; color: var(--ink); font: 700 var(--fs-bar)/1 var(--text); cursor: pointer; text-align: left; }
  .bp-bar .primary { min-height: 44px; }
}

/* ===================================================================== Plan Facts sheet (static/plan-sheet.js; owner, 2 Nov 2026)
   A rounded card with a coloured spine on the left (one data colour per plan family, --plan-*; the eyebrow, the name set
   vertically, a tagline) and a white nutrition-style panel on the right: "Plan Facts", the price, thick rules, rows label
   left and value right, the About rows, then the fine print. Like Purchase Facts the panel is black on white whatever
   the shade; the spine's colour is the plan's, never the accent. */
.ps-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); overflow: hidden; border-radius: var(--r-xl);
  border: 3px solid var(--plan-colour, var(--plan-pulse)); background: color-mix(in srgb, var(--plan-colour, var(--plan-pulse)) 10%, var(--ps-paper));
  color: var(--ps-line); font-family: var(--text); }
.ps-card[data-plan="pulse"] { --plan-colour: var(--plan-pulse); }
.ps-card[data-plan="resting"] { --plan-colour: var(--plan-resting); }
.ps-card[data-plan="basal"] { --plan-colour: var(--plan-basal); }
.ps-card[data-plan="myelin"] { --plan-colour: var(--plan-myelin); }
.ps-card[data-plan="plexus"] { --plan-colour: var(--plan-plexus); }
.ps-spine { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s3); padding: var(--s4) var(--s3); background: var(--plan-colour); color: var(--plan-ink); min-width: 0; }
.ps-spine p { margin: 0; color: var(--plan-ink); }
.ps-eyebrow { font-size: var(--fs-eyebrow); letter-spacing: 0.04em; }
.ps-name { justify-self: center; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 800 34px/1 var(--display); letter-spacing: -0.02em; }
.ps-tagline { font-size: var(--fs-meta); line-height: 1.3; }
.ps-panel { margin: var(--s3); padding: var(--s3) var(--s4); background: var(--ps-paper); color: var(--ps-line); border: 2px solid var(--ps-line); border-radius: 6px; min-width: 0; }
.ps-panel * { color: var(--ps-line); }
.ps-heading { margin: 0; font: 800 30px/1.05 var(--display); letter-spacing: -0.02em; }
.ps-sub { margin: 2px 0 var(--s2); font-size: var(--fs-meta); }
.ps-price { margin: 0 0 var(--s2); display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.ps-amount { font: 800 32px/1 var(--display); font-variant-numeric: tabular-nums; }
.ps-cadence { font-size: var(--fs-small); }
hr.ps-rule { margin: var(--s2) 0; border: 0; border-top: 6px solid var(--ps-line); }
hr.ps-rule-thin { border-top-width: 2px; }
.ps-rows, .ps-about { margin: 0; }
.ps-row { display: grid; grid-template-columns: minmax(96px, 42%) minmax(0, 1fr); gap: var(--s2); padding: 5px 0; border-top: 1px solid var(--ps-line); font-size: var(--fs-small); line-height: 1.3; }
.ps-rows .ps-row:first-child, .ps-about .ps-row:first-child { border-top: 0; }
.ps-row dt { margin: 0; }
.ps-row dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ps-row.ps-bold dt, .ps-row.ps-bold dd { font-weight: 700; }
.ps-about:empty { display: none; }
.ps-about + .ps-fine { border-top: 6px solid var(--ps-line); }
.ps-fine { margin-top: var(--s2); padding-top: var(--s2); display: grid; gap: var(--s1); }
.ps-fine p { margin: 0; font-size: 11.5px; line-height: 1.35; }
@media (max-width: 480px) {
  .ps-card { grid-template-columns: 64px minmax(0, 1fr); }
  .ps-spine { padding: var(--s3) var(--s2); }
  .ps-name { font-size: 26px; }
  .ps-eyebrow { font-size: 10px; }
  .ps-panel { margin: var(--s2); padding: var(--s2) var(--s3); }
  .ps-heading { font-size: 24px; }
}

/* Locigram: a "near me" search puts the places line first and plain (locgram_web `local`) */
.ws-maps-local { font-weight: 600; }
.ws-maps-local a { font-size: 1.05em; }

/* Locigram's front view stays the mark and the box: the quick-actions + shows once results are up (omni.js) */
body.lgs-page[data-view="front"] .omni-fab { display: none; }

/* Locigram Maps: Maps is part of Locigram, so its bar wears Locigram's mark (owner, 3 Nov 2026), and the layer tools sit on
   an opaque ground so "Standard", Traffic and the rest read on a light or dark map at every shade */
.maps-page .maps-mark img { width: 28px; height: 28px; flex: none; }
.maps-page .maps-tools, .maps-page .maps-tools select, .maps-page .maps-tools button { background-color: var(--bg); background-image: none; color: var(--ink); }
.maps-page .maps-tools select option { background-color: var(--bg); color: var(--ink); }

/* Locigram preview: the "Open in another tab" link sits on the accent fill, so its words take the ink for fills. */
.ws-drop a.primary, .ws-reader a.primary { display: inline-flex; align-items: center; color: var(--accent-ink); text-decoration: none; padding: 6px 14px; }

/* Choose your country (/countries, static/countries.js) */
.countries-page .co-list { list-style: none; padding: 0; margin: 0 0 var(--s5, 24px); display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; }
.countries-page .co-link { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--r-2, 8px); text-decoration: none; color: var(--ink); min-height: 44px; }
.countries-page .co-link:hover, .countries-page .co-link:focus-visible { background: var(--accent-soft); }
.countries-page .co-link[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--accent); }
.countries-page .co-name { font-weight: 600; }
.countries-page .co-native { color: var(--muted); font-size: 0.9em; }
.countries-page .co-off { color: var(--muted); }

/* Locigram: the Google card (locigram_google.py, static/search.js googleCard) */
.ws-google { border: 1px solid var(--edge, var(--line)); border-radius: var(--r-3, 12px); padding: 12px 16px; margin: 0 0 16px; background: var(--card, var(--bg)); }
.ws-google-head { font-size: 1rem; margin: 0 0 6px; }
.ws-google-answer p { margin: 0 0 6px; line-height: 1.5; }
.ws-google-sources { margin: 6px 0; padding-left: 20px; font-size: 0.9em; }
.ws-google-chip { display: block; width: 100%; height: 64px; border: 0; margin-top: 6px; }

/* Locigram search tools (static/locigram-tools.js) */
.lgs-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--card, var(--bg)); border: 1px solid var(--edge, var(--line)); border-radius: var(--r-3, 12px); box-shadow: var(--shadow-2, none); }
.lgs-suggest-item { padding: 8px 14px; cursor: pointer; color: var(--ink); }
.lgs-suggest-item:hover, .lgs-suggest-item[aria-selected="true"] { background: var(--accent-soft); }
.lgs-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 12px; }
.lgs-ops-tip { color: var(--muted); }
.lgs-instant { border: 1px solid var(--edge, var(--line)); border-radius: var(--r-3, 12px); padding: 12px 16px; margin: 0 0 14px; }
.lgs-instant-answer { font-size: 1.8rem; margin: 2px 0 0; color: var(--ink); }
.lgs-spell { margin: 0 0 12px; }
.lgs-panel { border: 1px solid var(--edge, var(--line)); border-radius: var(--r-3, 12px); padding: 12px 16px; margin: 0 0 16px; }
.lgs-panel-title { font-size: 1.15rem; margin: 0 0 2px; }
.lgs-panel-text { line-height: 1.5; margin: 8px 0; }
.lgs-related { margin: 20px 0; }
.lgs-related-title { font-size: 1rem; margin: 0 0 8px; }
.lgs-related-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.lgs-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ws-form { position: relative; }
.lgs-instant, .lgs-panel { border-color: var(--line); background: transparent; }
.lgs-instant p, .lgs-panel p, .lgs-spell { text-align: left; }
.lgs-instant .fine { margin: 0; }
.lgs-filter[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.ws-boosted { border-left: 3px solid var(--accent); padding-left: 10px; }
.lgs-rules-list { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.lgs-set-h { font-size: 1rem; margin: 0 0 4px; }

/* A username held for this account (name_holds.py): shown, greyed out, not editable. */
input.is-locked { color: var(--muted); border-style: dashed; cursor: not-allowed; }