/* Layout: two panes on desktop (list | editor); on phones the list and editor swap in place. */
:root {
  --bg: #f4f4f4;
  --panel: #ffffff;
  --ink: #111111;
  --muted: #6e6e6e;
  --line: #e2e2e2;
  --accent: #111111;
  --on-accent: #ffffff;
  --accent-soft: rgba(0, 0, 0, .05);
  --danger: #b3261e;
  --warn: #9a9a9a;
  /* Liquid glass: translucent fill, bright rim, soft drop shadow over two still, blurred colour washes. */
  --glass: rgba(255, 255, 255, .42);
  --glass-strong: rgba(255, 255, 255, .78);
  --rim: rgba(255, 255, 255, .85);
  --rim-low: rgba(0, 0, 0, .06);
  --shadow: 0 10px 40px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
  --blob: rgba(0, 0, 0, .22);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --font-display: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --font-body: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
/* data-mode is set by the head script: the system's choice, or the one picked in Settings. */
:root[data-mode="dark"] {
  --bg: #000000; --panel: #0e0e0e; --ink: #f0f0f0; --muted: #8c8c8c; --line: #262626;
  --accent: #f0f0f0; --on-accent: #000000; --accent-soft: rgba(255,255,255,.07); --danger: #ef7a6e; --warn: #6e6e6e;
  --glass: rgba(22, 22, 22, .42); --glass-strong: rgba(30, 30, 30, .78);
  --rim: rgba(255, 255, 255, .14); --rim-low: rgba(255, 255, 255, .04);
  --shadow: 0 10px 40px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
  --blob: rgba(255, 255, 255, .16);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font-body);
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-tap-highlight-color: transparent;
}
body::before, body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%;
  width: 55vmax; height: 55vmax; filter: blur(60px);
  background: radial-gradient(circle at 50% 50%, var(--blob), transparent 65%);
}
/* Still on purpose: moving them made every glass panel redo its backdrop blur each frame (≈30 % CPU when idle). */
body::before { top: -20vmax; left: -15vmax; }
body::after { bottom: -25vmax; right: -20vmax; }
[hidden] { display: none !important; }
.glass {
  position: relative; isolation: isolate;
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--rim-low); border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-low), var(--shadow);
}
/* Registered as not inherited, so moving the pointer restyles only the glass itself, not the whole document
   inside a pane (an inherited custom property changes the style of every element below it). */
@property --mx { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --my { syntax: "<length-percentage>"; inherits: false; initial-value: -40%; }
/* A soft highlight that follows the pointer across glass surfaces. */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  --mx: inherit; --my: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), var(--rim), transparent 45%);
  opacity: 0; transition: opacity .4s ease;
}
.glass:hover::after { opacity: .35; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app {
  --side: 320px;
  height: 100%; margin: 0 auto; position: relative;
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: 12px;
}
/* Sidebar width handle, in the gap between the sidebar and the panes (out of the grid flow). */
.divider.side-handle { position: absolute; top: 0; bottom: 0; left: var(--side); width: 12px; cursor: col-resize; }
.side-handle::before { width: 3px; height: 40px; }
.side-handle:focus-visible::before { opacity: .5; }
/* Split panes: a tree of .split boxes; each divider can be dragged (double-click resets it to half). */
.workspace { min-width: 0; min-height: 0; display: flex; }
.split { display: flex; min-width: 0; min-height: 0; }
.split.row { flex-direction: row; }
.split.col { flex-direction: column; }
.split > * { min-width: 0; min-height: 0; }
.divider { flex: none; position: relative; z-index: 2; touch-action: none; }
.split.row > .divider { width: 12px; cursor: col-resize; }
.split.col > .divider { height: 12px; cursor: row-resize; }
.divider::before {
  content: ""; position: absolute; inset: 0; margin: auto; border-radius: 999px; background: var(--ink);
  opacity: 0; transition: opacity .2s, transform .35s var(--spring);
}
.split.row > .divider::before { width: 3px; height: 40px; }
.split.col > .divider::before { height: 3px; width: 40px; }
.divider:hover::before { opacity: .35; transform: scale(1.3); }
body.resizing { user-select: none; -webkit-user-select: none; }
body.resizing-row { cursor: col-resize; }
body.resizing-col { cursor: row-resize; }
body.resizing iframe, body.resizing video { pointer-events: none; }
body.resizing .divider:hover::before { opacity: .6; }
.workspace[data-multi="false"] .p-close { display: none; }
.workspace[data-multi="true"] .editor.focused { box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent), var(--shadow); }
.workspace[data-multi="true"] .editor:not(.focused) .ebar { opacity: .6; }
.editor .ebar { transition: opacity .25s; }
.ghost.icon { padding: 6px; display: inline-grid; place-items: center; }
.ghost.icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.p-hint {
  position: absolute; z-index: 5; pointer-events: none; inset: 8px; border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 8%, transparent); border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent);
  transition: inset .2s var(--ease);
}
.p-hint[data-zone="left"] { inset: 8px 50% 8px 8px; }
.p-hint[data-zone="right"] { inset: 8px 8px 8px 50%; }
.p-hint[data-zone="top"] { inset: 8px 8px 50% 8px; }
.p-hint[data-zone="bottom"] { inset: 50% 8px 8px 8px; }
/* Mermaid: a light card, diagram colours from these variables (see MERMAID_CSS in app.js). */
.md-body {
  --mm-node: color-mix(in srgb, var(--ink) 5%, var(--panel));
  --mm-border: color-mix(in srgb, var(--ink) 24%, transparent);
  --mm-line: color-mix(in srgb, var(--ink) 45%, transparent);
  --mm-label-bg: var(--panel);
  --mm-cluster: color-mix(in srgb, var(--ink) 3%, var(--panel));
}
.mermaid-box {
  margin: 0 0 1.2em; padding: 22px 18px; overflow-x: auto; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--rim);
}
.mermaid-box svg { height: auto; }
.mermaid-box svg .node { transition: opacity .2s; }
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.listpane { padding: 14px 10px 10px; }

.brand { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin: 0; letter-spacing: 0.02em; }
.brand.big { font-size: 40px; }
.sync { font-family: var(--font-mono); font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.sync[data-s="ok"] .dot { background: var(--accent); }
.sync[data-s="saving"] .dot { background: var(--warn); }
.sync[data-s="err"] .dot { background: var(--danger); }

.tools { display: flex; gap: 6px; margin: 0 4px 10px; }
input[type="search"], input[type="email"], input[type="password"] {
  min-width: 0; padding: 9px 14px; border: 1px solid var(--rim-low); border-radius: 999px;
  background: var(--glass-strong); color: var(--ink); font: inherit; font-size: 16px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); transition: box-shadow .25s var(--ease), background .25s;
}
input[type="search"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
}
.search { flex: 1; }
/* The clear button: the browser's own is a blue ✕ in Chrome; this one takes the theme's muted ink. */
.search::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-left: 6px; cursor: pointer; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search::-webkit-search-cancel-button:hover { background: var(--ink); }
/* Sort: an icon button with the native picker laid over it, so phones get their own menu. */
.sort-btn { position: relative; }
.sort-btn select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.btn-primary {
  border: 0; border-radius: 999px; padding: 9px 18px; background: var(--accent); color: var(--on-accent); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 14px rgba(0, 0, 0, .18);
}
.btn-primary:disabled { opacity: .5; cursor: default; }
.wide { width: 100%; }

.list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; -webkit-overflow-scrolling: touch; }
li.empty { color: var(--muted); padding: 24px 12px; line-height: 1.6; }
li.empty strong { color: var(--ink); display: block; font-family: var(--font-display); font-size: 19px; margin-bottom: 4px; }
/* Bottom of the sidebar: a row of tools, then the app's name with sync state and counts, and Settings. */
.dock { flex: none; display: flex; justify-content: space-around; gap: 2px; padding: 8px 2px 2px; margin-top: 6px; border-top: 1px solid var(--rim-low); }
.dock .ghost.icon { width: 36px; height: 36px; padding: 0; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.dock .ghost.icon:hover { color: var(--ink); }
.dock .ghost.icon svg, .foot .gear svg { width: 18px; height: 18px; stroke-linejoin: round; }
.foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 2px 0 8px; }
.vault { flex: 1; min-width: 0; }
.vault .brand { font-size: 22px; line-height: 1.25; }
.vault p { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
.vault .counts { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault .counts:not(:empty)::before { content: "·"; margin-right: 6px; }
.foot .gear { flex: none; width: 40px; height: 40px; padding: 0; color: color-mix(in srgb, var(--ink) 70%, transparent); }

.editor { overflow: hidden; }
.ebar { display: flex; align-items: center; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--rim-low); background: var(--glass-strong); }
.p-acts, .p-extra { display: contents; }
.ebar .p-back, .ebar .p-more, .p-info { display: none; }   /* phone-only: the sidebar button and the ⋯ menu */
.ebar .p-nav { width: 28px; padding: 6px 0; }
.ebar .p-nav:disabled { opacity: .3; pointer-events: none; }
.ebar .meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.ghost { border: 1px solid transparent; background: transparent; border-radius: 999px; padding: 6px 12px; color: var(--muted); }
.ghost:hover { background: var(--accent-soft); color: var(--ink); }
.ghost.small { padding: 3px 8px; font-size: 12px; }
/* Text buttons in a pane's bar sit at the size of its icons, evenly spaced, so the row reads as one toolbar. */
.ebar .ghost:not(.icon) { padding: 5px 10px; font-size: 13px; line-height: 18px; }
.ebar .ghost { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.ebar .ghost:hover { color: var(--ink); }
.ebar .meta { margin-right: 4px; }
/* Edit / Web / Download show their names; in a narrow pane (a split, or a phone) only their icons. */
.pane.editor { container: pane / inline-size; }
.ebar .ico { display: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.p-edit .tick, .p-edit.on .pen { display: none; }
.p-edit:disabled { opacity: .55; cursor: progress; }
.p-edit.on .tick { display: inline; }
@container pane (max-width: 480px) {
  .ebar :is(.p-edit, .p-web, .p-dl, .p-del) { padding: 6px; display: inline-grid; place-items: center; }
  .ebar :is(.p-edit, .p-web, .p-dl, .p-del) .ico { display: block; }
  .ebar :is(.p-edit, .p-web, .p-dl, .p-del) .lbl { display: none; }
}
@container pane (max-width: 340px) {   /* a third of a laptop screen: tighter, so all seven controls fit */
  .ebar { padding: 8px; gap: 1px; }
  .ebar .ghost.icon, .ebar :is(.p-edit, .p-web, .p-dl, .p-del) { padding: 4px; }
  :root[data-style="blocks"] .ebar .ghost { padding: 2px; border-width: 2px; }
}
.ghost.danger:hover, .ghost.danger.armed { color: var(--danger); border-color: var(--danger); }
.back { display: none; }
textarea {
  flex: 1; width: 100%; border: 0; resize: none; background: transparent; color: var(--ink);
  padding: 22px 24px; font: calc(var(--doc-size, 16px) + 1px)/1.75 var(--font-body); outline: none;
}
.placeholder { flex: 1; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 24px; line-height: 1.7; }
.placeholder b { font-family: var(--font-display); font-size: 22px; color: var(--ink); display: block; }
.placeholder span { display: block; }
@media (max-width: 720px) { .placeholder .ph-split { display: none; } }   /* phones have no split panes */
.note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; padding: 8px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); }
.note[data-kind="err"] { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.note:not([hidden]) { cursor: pointer; }

/* File tree: folders open in place as drawers, with indent guides. */
.tree { display: flex; flex-direction: column; padding-bottom: 12px; }
.tree-row {
  --depth: 0;
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; text-align: left;
  border: 0; background: transparent; border-radius: 10px;
  padding: 6px 8px 6px calc(8px + var(--depth) * 12px); font-size: 14px; line-height: 1.4;
}
.tree-row:hover { background: var(--accent-soft); }
.tree-file { padding-left: calc(8px + var(--depth) * 12px + 18px); color: color-mix(in srgb, var(--ink) 78%, transparent); align-items: flex-start; }
.tree-file.shown { color: var(--ink); }
.tree-file[aria-current="true"] { background: var(--ink); color: var(--bg); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.tree-folder { font-weight: 600; color: var(--ink); }
.tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* File names wrap in full: similar names often differ only at the end. */
.tree-file .tree-name { white-space: normal; overflow-wrap: anywhere; }
.tree-file .tree-meta { margin-top: 2px; }
.tree-count, .tree-meta { flex: none; font: 11px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.tree-meta { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-file[aria-current="true"] .tree-meta { color: inherit; opacity: .7; }
.chev { flex: none; width: 12px; height: 12px; position: relative; }
.chev::before {
  content: ""; position: absolute; left: 3px; top: 2px; width: 5px; height: 5px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform .2s ease;
}
.tree-folder[aria-expanded="true"] .chev::before { transform: translate(-1px, 1px) rotate(45deg); }
.drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s cubic-bezier(.2, .7, .2, 1); }
.drawer.open { grid-template-rows: 1fr; }
/* Rows keep the full width (so highlights are never clipped); the indent guide is drawn under them. */
.drawer-inner {
  --depth: 0;
  position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  opacity: 0; transition: opacity .2s ease;
}
.drawer-inner::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: calc(13.5px + var(--depth) * 12px);
  width: 1px; background: var(--line); pointer-events: none;
}
.drawer.open > .drawer-inner { opacity: 1; }
.drawer-inner > * { position: relative; }   /* rows paint over the guide line */
.fileview { flex: 1; min-height: 0; display: flex; position: relative; }
.fileview > .preview { min-width: 0; }
/* Outline: a column beside the text in wide panes, a floating panel over it in narrow ones.
   Width comes from --toc-w (dragged with the grip on its left edge). */
.toc {
  --toc-pad: 8px;
  flex: 0 0 var(--toc-w, 240px); min-height: 0; position: relative;
  margin: 10px 10px 10px 0; padding: 12px 0 6px; border-radius: 16px;
  display: flex; flex-direction: column;
  animation: rise .28s cubic-bezier(.2, .7, .2, 1) both;
}
.toc[hidden] { display: none; }
.toc-grip { position: absolute; z-index: 2; left: -7px; top: 14px; bottom: 14px; width: 12px; cursor: col-resize; touch-action: none; }
.toc-grip::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 3px; height: 36px; border-radius: 999px;
  background: var(--ink); opacity: 0; transition: opacity .2s, transform .35s var(--spring);
}
.toc-grip:hover::before, body.resizing .toc-grip::before { opacity: .35; transform: scaleY(1.3); }
.toc.overlay .toc-grip { display: none; }
.toc-head { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 16px; height: 24px; }
.toc-title { font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.toc-count {
  font: 10.5px var(--font-mono); color: var(--muted); padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); font-variant-numeric: tabular-nums;
}
.toc-close {
  all: unset; cursor: pointer; margin-left: auto; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; color: var(--muted);
}
.toc-close svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.toc-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.toc-bar { flex: none; height: 2px; margin: 9px 16px 6px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.toc-bar > i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .12s linear; }
.toc-list {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; position: relative;
  padding: 6px var(--toc-pad) 14px; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 18px), transparent);
}
.toc-ink {
  position: absolute; left: calc(var(--toc-pad) + 2px); top: 0; width: 2px; height: 0; border-radius: 2px;
  background: var(--accent); pointer-events: none; z-index: 1;
  transition: transform .28s var(--spring), height .28s var(--spring);
}
.toc-list button {
  --lvl: 0;
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: block; width: 100%; flex-shrink: 0;
  padding: 5px 10px 5px calc(14px + var(--lvl) * 13px); border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--ink) 62%, transparent);
  transition: background .15s, color .15s;
}
/* Long headings stop at two lines. The clamp sits on an inner span: a button's own box ignores -webkit-box. */
.toc-list button > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.toc-list button[data-lvl="0"] { --lvl: 0; font-weight: 600; color: color-mix(in srgb, var(--ink) 85%, transparent); margin-top: 4px; }
.toc-list button[data-lvl="0"]:first-of-type { margin-top: 0; }
.toc-list button[data-lvl="1"] { --lvl: 1; }
.toc-list button[data-lvl="2"] { --lvl: 2; font-size: 12px; }
.toc-list button[data-lvl="3"] { --lvl: 3; font-size: 12px; color: var(--muted); }
/* indent guides for nested headings */
.toc-list button:not([data-lvl="0"])::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(9px + (var(--lvl) - 1) * 13px);
  width: 1px; background: var(--line);
}
.toc-list button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.toc-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.toc-list button[aria-current] { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.toc-list button[data-lvl]:not([data-lvl="0"])[aria-current] { font-weight: 550; }
.toc.overlay {
  position: absolute; z-index: 5; top: 8px; right: 8px; bottom: 8px; width: min(var(--toc-w, 240px) + 40px, calc(100% - 48px)); margin: 0;
  box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--panel) 96%, transparent);   /* nested glass does not blur the text under it */
}
.p-outline[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }
@media (prefers-reduced-motion: reduce) { .toc-ink, .toc-bar > i { transition: none; } }
.preview { flex: 1; min-height: 0; display: grid; place-items: center; background: transparent; overflow: auto; }
.preview img, .preview video { max-width: 100%; max-height: 100%; object-fit: contain; }
.preview iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.preview pre { align-self: stretch; justify-self: stretch; margin: 0; padding: 18px; white-space: pre-wrap; word-break: break-word; font: 13px/1.6 var(--font-mono); }
.preview .big-ext { font: 600 28px var(--font-mono); color: var(--accent); text-transform: uppercase; }
.preview.doc { display: block; }
.md-body { width: 100%; min-width: 0; justify-self: stretch; align-self: start; margin: 0; padding: 24px 32px 48px; font-size: var(--doc-size, 16px); line-height: 1.8; overflow-wrap: break-word; }
/* 文档版式 · 居中: a reading column about 46 characters of body text wide, centred in the pane; the editor's text too. */
:root[data-width="center"] .md-body { max-width: calc(46 * var(--doc-size, 16px) + 64px); justify-self: center; margin-inline: auto; }
:root[data-width="center"] .p-ta { padding-inline: max(24px, calc(50% - 23 * var(--doc-size, 16px))); }
/* Above the text: the title, then the front matter as a card of properties (folds away like a details box). */
.md-head { margin-bottom: 26px; }
.md-body .md-title { font-size: 2em; line-height: 1.25; margin: 0 0 14px; overflow-wrap: anywhere; }
.md-props > summary {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: .95em; user-select: none; -webkit-user-select: none;
}
.md-props > summary::-webkit-details-marker { display: none; }
.md-props > summary::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.md-props:not([open]) > summary::after { transform: translate(-1px, 2px) rotate(-45deg); }
.md-prop-list { display: grid; grid-template-columns: fit-content(42%) minmax(0, 1fr); margin: 0; padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.md-prop { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 16px; padding: 7px 8px; font-size: .92em; line-height: 1.55; }
.md-prop dt { display: flex; align-items: center; gap: 9px; min-width: 0; height: 1.55em; color: var(--muted); }
.md-prop dt svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.md-prop dt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Long text stops at three lines; a tap shows the rest. */
.md-prop dd.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; cursor: pointer; }
.md-prop dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 6px; }
/* A tag too long for the column ends in … (the full text is in its tooltip) instead of folding into a two-line pill. */
.md-chip, .md-tag { padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-tag { border: 0; font: inherit; line-height: inherit; background: var(--accent-soft); color: var(--accent); }
.md-tag:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.md-body h1, .md-body h2, .md-body h3, .md-body h4 { font-family: var(--font-display); line-height: 1.35; text-wrap: balance; margin: 1.6em 0 .6em; }
.md-body h1 { font-size: 1.7em; } .md-body h2 { font-size: 1.4em; } .md-body h3 { font-size: 1.18em; }
.md-head h1:first-child, .md-body > div > :first-child { margin-top: 0; }
.md-body p, .md-body ul, .md-body ol, .md-body blockquote, .md-body table, .md-body pre { margin: 0 0 1em; }
.md-body ul { padding-left: 1.4em; }
.md-body ol { padding-left: 2em; }   /* room for "10." without the number hanging out of the column */
.md-body li + li { margin-top: .25em; }
/* - [ ] tasks: the box stands in for the bullet, in the style's colour */
.md-body li:has(> input[type=checkbox]) { list-style: none; }
.md-body li > input[type=checkbox] { appearance: none; position: relative; display: inline-block; width: .95em; height: .95em; margin: 0 .45em 0 -1.35em;
  vertical-align: -.12em; border: 1.5px solid var(--muted); border-radius: .25em; background: none; }
.md-body li > input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.md-body li > input[type=checkbox]:checked::before { content: ""; position: absolute; left: 50%; top: 42%; width: .48em; height: .26em;
  border: solid var(--on-accent); border-width: 0 0 2px 2px; transform: translate(-50%, -50%) rotate(-45deg); }
.md-body .math-nb { white-space: nowrap; }   /* a formula keeps the punctuation after it on its line */
.md-body li:has(> input[type=checkbox]:checked) { color: var(--muted); }
.md-body a { color: var(--accent); }
.md-body img { display: block; max-width: 100%; height: auto; margin: 1em auto; border-radius: 6px; }
.md-body blockquote > :last-child, .md-body li > :last-child:not(ul, ol) { margin-bottom: 0; }   /* even space above and below the text */
.md-body blockquote { padding: .6em 1em; border-left: 3px solid var(--accent); color: var(--muted); background: var(--bg); border-radius: 0 6px 6px 0; }
.md-body code { font: .88em var(--font-mono); background: color-mix(in srgb, var(--ink) 7%, transparent); padding: .12em .35em; border-radius: 4px; }
.md-body pre { background: var(--bg); padding: 14px 16px; border-radius: 8px; overflow-x: auto; white-space: pre; }
.md-body pre code { background: none; padding: 0; font-size: 13px; line-height: 1.6; }
.md-body table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .92em; }
.md-body th, .md-body td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.md-body th { background: var(--bg); }
.md-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.md-body .math-block { overflow-x: auto; overflow-y: hidden; margin: 0 0 1em; }
.md-body .katex { font-size: 1.05em; }
.md-missing { color: var(--muted); font-size: 13px; }
.md-body mark { background: color-mix(in srgb, #ffd54a 45%, transparent); color: inherit; padding: 0 .15em; border-radius: 3px; }
.md-body .wikilink.missing { color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

.ghost.bordered { border-color: var(--rim-low); background: var(--glass-strong); color: var(--ink); padding: 9px 16px; box-shadow: inset 0 1px 0 var(--rim); }
.dropzone {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dropzone div { border: 1.5px dashed var(--accent); border-radius: 28px; padding: 48px 64px; color: var(--accent); font-size: 18px; font-weight: 600; background: var(--glass-strong); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

.auth { min-height: 100%; display: grid; place-items: center; }
.card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 8px; padding: 32px 28px; }
.card label { font-size: 13px; color: var(--muted); margin-top: 6px; }
.card .btn-primary { margin-top: 12px; }
.lede { color: var(--muted); margin: 4px 0 12px; line-height: 1.6; text-wrap: balance; }

/* Motion */
@keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.tree-row, .ghost, .btn-primary { transition: background .2s, color .2s, box-shadow .25s, transform .35s var(--spring), opacity .2s; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 22px rgba(0, 0, 0, .22); }
.btn-primary:active, .ghost:active, .tree-row:active { transform: scale(.96); transition-duration: .08s; }
.tree-row:hover { transform: translateX(2px); }
/* Rows inside a drawer cascade in when it opens. */
.drawer.opening > .drawer-inner > * { animation: rise .34s var(--ease) both; }
.drawer.open > .drawer-inner > :nth-child(2) { animation-delay: .02s; }
.drawer.open > .drawer-inner > :nth-child(3) { animation-delay: .04s; }
.drawer.open > .drawer-inner > :nth-child(4) { animation-delay: .06s; }
.drawer.open > .drawer-inner > :nth-child(5) { animation-delay: .08s; }
.drawer.open > .drawer-inner > :nth-child(6) { animation-delay: .10s; }
.drawer.open > .drawer-inner > :nth-child(n+7) { animation-delay: .12s; }
.app:not([hidden]) .listpane { animation: rise .55s var(--ease) both; }
.editor.fresh { animation: pop .45s var(--spring) both; }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.preview > *, #ta:not([hidden]), .placeholder > div { animation: rise .32s cubic-bezier(.2, .7, .2, 1) both; }
.sync[data-s="saving"] .dot { animation: breathe 1.1s ease-in-out infinite; }
.dropzone:not([hidden]) { animation: fade .15s ease; }
.dropzone div { animation: rise .25s ease both; }
.note:not([hidden]) { animation: fade .25s ease; }
.auth .card { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.p-dl, .p-web { text-decoration: none; }

/* Relationship graph */
.preview > .graph { position: relative; align-self: stretch; justify-self: stretch; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.graph-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.graph-tools { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; gap: 6px; }
.graph-tools .ghost.bordered.small { padding: 4px 10px; font-size: 12px; }
.graph-legend { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 1px; max-width: 46%; max-height: calc(100% - 64px); overflow-y: auto; padding: 4px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 82%, transparent); }
.graph-legend button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.graph-legend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.graph-legend-fold { display: flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 12px !important; font-weight: 600 !important; color: var(--ink) !important; }
.graph-legend-fold svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.graph-legend.folded .graph-legend-fold svg { transform: rotate(-90deg); }
.graph-legend.folded .graph-legend-row, .graph-legend.folded .graph-legend-all { display: none; }
.graph-legend-all { padding: 2px 8px; font-size: 11px !important; color: var(--muted) !important; }
.graph-legend-all:hover { color: var(--ink) !important; }
.graph-legend-row { display: flex; align-items: center; border-radius: 6px; color: var(--muted); font-size: 12px; }
.graph-legend-row:hover, .graph-legend-row.on { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.graph-legend-row.off { opacity: .45; }
.graph-legend-row .box { flex: none; display: grid; place-items: center; padding: 3px 2px 3px 8px; }
.graph-legend-row .box i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid transparent; box-sizing: content-box; }
.graph-legend-row.off .box i { background: none !important; border-color: currentColor; width: 6px; height: 6px; }
.graph-legend-row .name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 3px 4px; text-align: left; }
.graph-legend-row .name span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-legend-row .name em { font-style: normal; opacity: .6; font-variant-numeric: tabular-nums; }
.graph-legend-row .only { padding: 3px 8px 3px 2px; font-size: 11px !important; color: var(--muted) !important; visibility: hidden; }
.graph-legend-row:hover .only { visibility: visible; }
.graph-legend-row .only:hover { color: var(--ink) !important; text-decoration: underline; }
@media (hover: none) { .graph-legend-row .only { visibility: visible; } }
:root[data-style="blocks"] .graph-legend-row .box i { border-radius: 0; }
.graph-tools .ghost.bordered.small.on { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.graph-forces { position: absolute; top: 46px; right: 10px; z-index: 2; width: 220px; max-width: calc(100% - 20px); padding: 10px 12px 12px; border: 1px solid var(--line, color-mix(in srgb, var(--ink) 14%, transparent)); border-radius: 10px; background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); font-size: 12px; color: var(--ink); }
.graph-forces[hidden] { display: none; }
.graph-forces-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.graph-forces-head.gap { margin-top: 14px; }
.graph-switch { display: flex !important; justify-content: space-between; align-items: center; margin-top: 8px; color: var(--muted); cursor: pointer; }
.graph-switch input { margin: 0; accent-color: var(--ink); }
.graph-forces-head button { padding: 2px 8px; font-size: 11px; color: var(--muted); }
.graph-forces label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; margin-top: 8px; color: var(--muted); }
.graph-forces output { font-variant-numeric: tabular-nums; color: var(--ink); }
.graph-forces input[type="range"] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--ink); }
.graph-search { position: absolute; top: 10px; left: 10px; z-index: 1; width: 200px; max-width: calc(100% - 230px); min-width: 110px; box-sizing: border-box; padding: 5px 10px; border: 1px solid var(--line, color-mix(in srgb, var(--ink) 14%, transparent)); border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); font: inherit; font-size: 12px; outline: none; }
.graph-search:focus { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.graph-search.none { border-color: #e15759; }
:root[data-style="blocks"] .graph-search { border-radius: 0; }
.graph-forces label[hidden] { display: none; }
.graph-seg-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--muted); }
.graph-seg { display: flex; padding: 2px; border-radius: 7px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.graph-seg button { padding: 2px 9px; border: 0; border-radius: 5px; background: none; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.graph-seg button[aria-checked="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.graph-forces { max-height: calc(100% - 56px); overflow-y: auto; box-sizing: border-box; }
.graph-cg { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.graph-cg-empty { margin: 0; color: var(--muted); font-size: 11px; }
.graph-cg-row { display: flex; align-items: center; gap: 6px; }
.graph-cg-row input[type="color"] { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.graph-cg-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.graph-cg-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.graph-cg-row input[type="text"] { flex: 1; min-width: 0; padding: 3px 7px; border: 1px solid var(--line, color-mix(in srgb, var(--ink) 14%, transparent)); border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 12px; outline: none; }
.graph-cg-row input[type="text"]:focus { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.graph-cg-row button { flex: none; padding: 0 6px; font-size: 14px; color: var(--muted); }
.graph-legend.has-cg > div:nth-child(2) { padding-bottom: 3px; margin-bottom: 3px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.graph-legend.folded > div:nth-child(2) { display: none; }
.graph-unpin { display: block; width: 100%; margin-top: 12px; padding: 4px 8px; font-size: 11px; color: var(--muted); text-align: center; }
.graph-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); pointer-events: none; }
/* How each style draws the graph (read by graph.js). */
:root[data-style="paper"] .graph { --g-node: #8b5e34; --g-edge: rgba(139, 94, 52, .35); --g-edge-w: 1.2; }
:root[data-style="terminal"] .graph { --g-node: #4ade80; --g-edge: rgba(74, 222, 128, .35); --g-glow: 8; --g-palette: #4ade80, #22d3ee, #facc15, #f472b6, #a78bfa, #fb923c, #f87171, #38bdf8, #a3e635, #e879f9; }
:root[data-style="blocks"] .graph { --g-node: #5b9e32; --g-edge: #4f4f4f; --g-edge-w: 3; --g-shape: square; --g-outline: #1e1e1e; }

/* Loading skeleton: shimmering lines shaped like a document (title, paragraph, short line…). */
.skeleton { align-self: start; justify-self: stretch; display: grid; gap: 12px; padding: 28px 32px; animation: fade .3s ease both; }
.skeleton i {
  display: block; height: 11px; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent-soft) 20%, color-mix(in srgb, var(--ink) 9%, transparent) 50%, var(--accent-soft) 80%);
  background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton i:nth-child(1) { height: 22px; width: 55%; margin-bottom: 10px; }
.skeleton i:nth-child(2) { width: 30%; height: 9px; margin-bottom: 14px; }
.skeleton i:nth-child(3), .skeleton i:nth-child(7) { width: 96%; }
.skeleton i:nth-child(4), .skeleton i:nth-child(8) { width: 88%; }
.skeleton i:nth-child(5) { width: 92%; }
.skeleton i:nth-child(6) { width: 64%; margin-bottom: 14px; }
.skeleton i:nth-child(9) { width: 40%; }
.skeleton i:nth-child(odd) { animation-delay: .08s; }
.skeleton.media i { width: 100%; height: min(calc(60vh / var(--z, 1)), 480px); border-radius: 12px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (max-width: 720px) { .skeleton { padding: 18px 16px; } }

/* Link to the published blog page, under the post title. */
.md-web {
  display: block; width: fit-content; margin: -4px 0 14px; max-width: 100%;
  font: 12px var(--font-mono); color: var(--muted); text-decoration: none; overflow-wrap: anywhere;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.md-web::after { content: " ↗"; font-family: var(--font-body); }
.md-web:hover { color: var(--ink); border-bottom-color: var(--line); }

/* New version deployed: a pill at the bottom of the window. */
.update-toast {
  position: fixed; z-index: 50; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: max(18px, env(safe-area-inset-bottom, 0px));
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink); background: var(--glass-strong);
  animation: rise .35s var(--spring) both;
}
.update-toast[hidden] { display: none; }
.update-toast:hover { background: var(--panel); }

/* ===================== Styles =====================
   html[data-style] picks one (saved per device, applied before first paint by the script in index.html).
   No attribute: liquid glass, following the system's light/dark. The others fix their own colours. */

/* ---- 纸张: warm paper, serif text, no glass ---- */
:root[data-style="paper"] {
  --bg: #efe8da; --panel: #fbf7ef; --ink: #2b2520; --muted: #8a7d6b; --line: #e2d8c5;
  --accent: #8b5e34; --on-accent: #fffaf0; --accent-soft: rgba(139, 94, 52, .09); --danger: #a33a2a; --warn: #b39a74;
  --glass: rgba(251, 247, 239, .88); --glass-strong: #fffaf2; --rim: rgba(255, 255, 255, .7); --rim-low: rgba(80, 60, 30, .1);
  --shadow: 0 1px 0 rgba(80, 60, 30, .06), 0 8px 24px rgba(80, 60, 30, .08); --blob: rgba(190, 150, 90, .16);
  --font-body: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  color-scheme: light;
}
:root[data-style="paper"] .glass { -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 14px; }
:root[data-style="paper"] body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(120, 90, 40, .05) 1px, transparent 1px); background-size: 4px 4px;
}
:root[data-style="paper"] .md-body { font-size: calc(var(--doc-size, 16px) + 1px); line-height: 1.9; }
:root[data-style="paper"] .md-body blockquote { font-style: italic; }

/* ---- 终端: green phosphor on black, monospace ---- */
:root[data-style="terminal"] {
  --bg: #050805; --panel: #0a110a; --ink: #b8f5b0; --muted: #5f8f5a; --line: #173017;
  --accent: #4ade80; --on-accent: #031203; --accent-soft: rgba(74, 222, 128, .1); --danger: #ff6b5b; --warn: #c9b458;
  --glass: rgba(8, 16, 8, .82); --glass-strong: rgba(10, 22, 10, .95); --rim: rgba(74, 222, 128, .18); --rim-low: rgba(74, 222, 128, .14);
  --shadow: 0 0 0 1px rgba(74, 222, 128, .06), 0 0 30px rgba(74, 222, 128, .05); --blob: rgba(74, 222, 128, .1);
  --font-display: ui-monospace, "SF Mono", Menlo, monospace; --font-body: ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace;
  color-scheme: dark;
}
:root[data-style="terminal"] .glass { border-radius: 6px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-style="terminal"] body { text-shadow: 0 0 6px rgba(74, 222, 128, .25); }
:root[data-style="terminal"] body::after {   /* faint scanlines instead of the second blob */
  inset: 0; width: auto; height: auto; border-radius: 0; filter: none; animation: none; z-index: 100; opacity: .5;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .18) 2px 3px);
}
:root[data-style="terminal"] .ghost, :root[data-style="terminal"] .btn-primary,
:root[data-style="terminal"] input:is([type="search"], [type="email"], [type="password"]), :root[data-style="terminal"] .tree-row, :root[data-style="terminal"] .toc-list button, :root[data-style="terminal"] .note { border-radius: 4px; }
:root[data-style="terminal"] .md-body h1::before { content: "# "; color: var(--muted); }
:root[data-style="terminal"] .md-body h2::before { content: "## "; color: var(--muted); }
:root[data-style="terminal"] .md-body h3::before { content: "### "; color: var(--muted); }
:root[data-style="terminal"] .md-body h4::before { content: "#### "; color: var(--muted); }
/* Monospace list numbers are wide: "10. " needs about 4ch, or the numbers stick out past the text (off the screen on a phone). */
:root[data-style="terminal"] .md-body ol { padding-left: 4ch; }
/* Code, quotes and table headers took --bg, which is the same near-black as the page, so they didn't show as blocks. */
:root[data-style="terminal"] .md-body :is(pre, code, blockquote, th) { background: color-mix(in srgb, var(--accent) 7%, transparent); }
:root[data-style="terminal"] .md-body pre { border: 1px solid var(--line); border-radius: 4px; }
:root[data-style="terminal"] .md-body pre code { background: none; }
:root[data-style="terminal"] .md-body blockquote { border-radius: 0 4px 4px 0; }

/* ---- 方块: a blocky, pixel-art world — sky, grass and dirt, stone panels, chunky bevels ---- */
:root[data-style="blocks"] {
  --bg: #8fcdf6; --panel: #c6c6c6; --ink: #1e1e1e; --muted: #4f4f4f; --line: #8b8b8b;
  --accent: #5b9e32; --on-accent: #ffffff; --accent-soft: rgba(255, 255, 255, .35); --danger: #b02e26; --warn: #e0a22b;
  --glass: #c6c6c6; --glass-strong: #d9d9d9; --rim: #ffffff; --rim-low: #555555;
  --shadow: none; --blob: transparent;
  --px: 3px;   /* one "pixel" of the bevels */
  --bevel: inset var(--px) var(--px) 0 rgba(255, 255, 255, .75), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 rgba(0, 0, 0, .35);
  --slot: inset var(--px) var(--px) 0 rgba(0, 0, 0, .45), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 rgba(255, 255, 255, .55);
  --font-pixel: "Pixelify Sans", "DotGothic16", "PingFang SC", monospace;
  --font-display: var(--font-pixel); --font-body: "DotGothic16", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color-scheme: light;
}
:root[data-style="blocks"] body { background: linear-gradient(#6fbdf3, #b5e0fb 75%) fixed; }
/* a strip of grass on dirt along the bottom, in 8px blocks */
:root[data-style="blocks"] body::after {
  display: block; inset: auto 0 0 0; width: auto; height: 40px; border-radius: 0; filter: none; animation: none;
  background:
    linear-gradient(#6cb33f 0 8px, #4f8a2b 8px 12px, transparent 12px),
    repeating-conic-gradient(#8a5a35 0 25%, #7a4f2e 0 50%) 0 0 / 16px 16px;
}
/* one blocky cloud drifting across the sky */
:root[data-style="blocks"] body::before {
  display: block; top: 70px; left: 0; width: 16px; height: 16px; border-radius: 0; filter: none;
  background: #fff; opacity: .9;
  box-shadow: 16px 0 #fff, 32px 0 #fff, 48px 0 #fff, 64px 0 #fff, 16px -16px #fff, 32px -16px #fff, 48px -16px #fff,
    160px 40px #fff, 176px 40px #fff, 192px 40px #fff, 176px 24px #fff;
  animation: cloud 140s linear infinite;
}
@keyframes cloud { from { transform: translateX(-260px); } to { transform: translateX(110vw); } }
:root[data-style="blocks"] .glass {
  border-radius: 0; border: var(--px) solid #1e1e1e; background: var(--panel);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--bevel), 0 6px 0 rgba(0, 0, 0, .25);
}
:root[data-style="blocks"] .glass::after { display: none; }
:root[data-style="blocks"] .ebar { background: #b4b4b4; border-bottom: var(--px) solid #8b8b8b; }
:root[data-style="blocks"] .brand, :root[data-style="blocks"] .md-body h1, :root[data-style="blocks"] .md-body h2,
:root[data-style="blocks"] .md-body h3 { font-family: var(--font-pixel); letter-spacing: .02em; }
:root[data-style="blocks"] .brand { color: #fff; text-shadow: 3px 3px 0 #3f3f3f; }
/* buttons are blocks: grass on top for the main one, stone for the rest; pressing pushes them in */
:root[data-style="blocks"] .btn-primary, :root[data-style="blocks"] .ghost.bordered, :root[data-style="blocks"] .ghost {
  border-radius: 0; border: var(--px) solid #1e1e1e; font-family: var(--font-pixel);
}
:root[data-style="blocks"] .btn-primary {
  background: linear-gradient(#79c05a 0 30%, #5b9e32 30% 100%); color: #fff; text-shadow: 2px 2px 0 #2d5a12;
  box-shadow: var(--bevel);
}
:root[data-style="blocks"] .ghost.bordered, :root[data-style="blocks"] .ghost { background: #a8a8a8; color: #1e1e1e; box-shadow: var(--bevel); }
:root[data-style="blocks"] .ghost.icon { padding: 4px; }
:root[data-style="blocks"] .ghost:hover, :root[data-style="blocks"] .ghost.bordered:hover { background: #bdbdbd; outline: 2px solid #fff; outline-offset: -5px; }
:root[data-style="blocks"] .btn-primary:active, :root[data-style="blocks"] .ghost:active { box-shadow: var(--slot); transform: none; }
:root[data-style="blocks"] input[type="search"], :root[data-style="blocks"] input[type="email"], :root[data-style="blocks"] input[type="password"] {
  border-radius: 0; border: var(--px) solid #1e1e1e; background: #000; color: #fff; box-shadow: none; font-family: var(--font-body);
}
:root[data-style="blocks"] input::placeholder { color: #a0a0a0; }
/* the file tree reads like an inventory: hover outlines a slot, the open file is a dark slot */
:root[data-style="blocks"] :is(.tree-row, .note) { border-radius: 0; }
:root[data-style="blocks"] .tree-row:hover { background: rgba(255, 255, 255, .45); transform: none; }
:root[data-style="blocks"] .tree-file[aria-current="true"] { background: #8b8b8b; color: #fff; box-shadow: var(--slot); text-shadow: 2px 2px 0 #3f3f3f; }
:root[data-style="blocks"] .chev::before { border-color: #1e1e1e; border-width: 0 3px 3px 0; }
:root[data-style="blocks"] .drawer-inner::before { width: 3px; background: #8b8b8b; }
/* the document is a sheet of paper inside the stone frame */
:root[data-style="blocks"] .preview.doc { background: #f4efe2; box-shadow: var(--slot); margin: 8px; }
:root[data-style="blocks"] .md-body { --mm-node: #ffffff; --mm-border: #1e1e1e; --mm-cluster: #e9e2cf; }
:root[data-style="blocks"] .md-body pre, :root[data-style="blocks"] .md-body code { border-radius: 0; background: #2b2b2b; color: #e6e6e6; }
:root[data-style="blocks"] .md-body blockquote { border-radius: 0; border-left: 6px solid var(--accent); background: #e9e2cf; }
:root[data-style="blocks"] :is(.md-tag, .md-chip, .md-prop-list) { border-radius: 0; }
:root[data-style="blocks"] .md-prop-list { background: #e9e2cf; box-shadow: var(--slot); }
:root[data-style="terminal"] :is(.md-tag, .md-chip, .md-prop-list) { border-radius: 4px; }
/* grass green is too light for text on the cream page, so links and tags take a deeper green */
:root[data-style="blocks"] .md-tag, :root[data-style="blocks"] .md-body a, :root[data-style="blocks"] .md-web { color: #2f6b12; }
:root[data-style="blocks"] .toc-list button, :root[data-style="blocks"] .toc-count { border-radius: 0; }
:root[data-style="blocks"] .toc-ink { width: 4px; border-radius: 0; }
:root[data-style="blocks"] .toc-bar { height: 6px; border-radius: 0; background: #555; box-shadow: var(--slot); }
:root[data-style="blocks"] .toc-bar > i { background: linear-gradient(#8ee05a, #5b9e32); }   /* an experience bar */
:root[data-style="blocks"] .divider::before { border-radius: 0; width: 6px; }
:root[data-style="blocks"] ::-webkit-scrollbar { width: 12px; height: 12px; }
:root[data-style="blocks"] ::-webkit-scrollbar-thumb { background: #8b8b8b; border: 3px solid #c6c6c6; box-shadow: inset 2px 2px 0 #bdbdbd, inset -2px -2px 0 #555; }
:root[data-style="blocks"] .update-toast { border-radius: 0; border: var(--px) solid #1e1e1e; background: #3f3f3f; color: #ffff55; font-family: var(--font-pixel); }

/* ---- the other half of each style: dark paper, light terminal, blocks at night ---- */
:root[data-style="paper"][data-mode="dark"] {
  --bg: #1b1713; --panel: #241f1a; --ink: #e9dfcd; --muted: #9c8d76; --line: #3a3229;
  --accent: #d19a5e; --on-accent: #1b1713; --accent-soft: rgba(209, 154, 94, .12); --danger: #e2806f; --warn: #a08a68;
  --glass: rgba(36, 31, 26, .92); --glass-strong: #2a241e; --rim: rgba(255, 240, 210, .07); --rim-low: rgba(255, 240, 210, .09);
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); --blob: rgba(209, 154, 94, .07);
  color-scheme: dark;
}
:root[data-style="paper"][data-mode="dark"] body { background-image: radial-gradient(rgba(255, 230, 190, .035) 1px, transparent 1px); }
:root[data-style="paper"][data-mode="dark"] .graph { --g-node: #d19a5e; --g-edge: rgba(209, 154, 94, .3); }

:root[data-style="terminal"][data-mode="light"] {
  --bg: #e9f1e6; --panel: #f6faf4; --ink: #12401f; --muted: #557a5c; --line: #cfe0cb;
  --accent: #15803d; --on-accent: #f0fdf4; --accent-soft: rgba(21, 128, 61, .1); --danger: #c0392b; --warn: #8a7a2a;
  --glass: rgba(246, 250, 244, .86); --glass-strong: rgba(250, 253, 249, .97); --rim: rgba(21, 128, 61, .22); --rim-low: rgba(21, 128, 61, .16);
  --shadow: 0 0 0 1px rgba(21, 128, 61, .06), 0 6px 20px rgba(21, 90, 40, .07); --blob: rgba(21, 128, 61, .08);
  color-scheme: light;
}
:root[data-style="terminal"][data-mode="light"] body { text-shadow: none; }
:root[data-style="terminal"][data-mode="light"] body::after { background: repeating-linear-gradient(transparent 0 2px, rgba(21, 90, 40, .05) 2px 3px); }
:root[data-style="terminal"][data-mode="light"] .graph { --g-node: #15803d; --g-edge: rgba(21, 128, 61, .3); --g-glow: 0; --g-palette: initial; }

:root[data-style="blocks"][data-mode="dark"] {
  --bg: #0d1733; --panel: #4a4a52; --ink: #ececec; --muted: #cacad1; --line: #6a6a72;
  --accent: #5b9e32; --accent-soft: rgba(255, 255, 255, .12);
  --glass: #4a4a52; --glass-strong: #5a5a62; --rim: #7c7c84; --rim-low: #222226;
  --bevel: inset var(--px) var(--px) 0 rgba(255, 255, 255, .22), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 rgba(0, 0, 0, .45);
  --slot: inset var(--px) var(--px) 0 rgba(0, 0, 0, .55), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 rgba(255, 255, 255, .18);
  color-scheme: dark;
}
:root[data-style="blocks"][data-mode="dark"] body { background: linear-gradient(#070d22, #1d2c5a 75%) fixed; }
/* grass by night, and a square moon with a few stars instead of the cloud */
:root[data-style="blocks"][data-mode="dark"] body::after {
  background:
    linear-gradient(#3d6e25 0 8px, #2c5219 8px 12px, transparent 12px),
    repeating-conic-gradient(#5a3a22 0 25%, #4d311d 0 50%) 0 0 / 16px 16px;
}
:root[data-style="blocks"][data-mode="dark"] body::before {
  top: 56px; left: auto; right: 12vw; width: 32px; height: 32px; background: #f3f1cf; opacity: 1; animation: none;
  box-shadow: inset -8px -8px 0 #d8d4a6, -38vw 30px 0 -13px #fff, -60vw 70px 0 -13px #fff, -22vw 110px 0 -14px #fff,
    -75vw 18px 0 -14px #fff, -48vw 150px 0 -14px #fff, 4vw 120px 0 -13px #fff;
}
:root[data-style="blocks"][data-mode="dark"] .ebar { background: #3f3f46; border-bottom-color: #2a2a2e; }
:root[data-style="blocks"][data-mode="dark"] .ghost.bordered, :root[data-style="blocks"][data-mode="dark"] .ghost { background: #5f5f68; color: #ececec; }
:root[data-style="blocks"][data-mode="dark"] .ghost:hover, :root[data-style="blocks"][data-mode="dark"] .ghost.bordered:hover { background: #6f6f78; }
:root[data-style="blocks"][data-mode="dark"] .tree-row:hover { background: rgba(255, 255, 255, .12); }
:root[data-style="blocks"][data-mode="dark"] .tree-file[aria-current="true"] { background: #2c2c31; }
:root[data-style="blocks"][data-mode="dark"] .chev::before { border-color: #ececec; }
:root[data-style="blocks"][data-mode="dark"] .drawer-inner::before { background: #6a6a72; }
:root[data-style="blocks"][data-mode="dark"] .preview.doc { background: #2e2e34; }
:root[data-style="blocks"][data-mode="dark"] .md-body { --mm-node: #3a3a41; --mm-border: #ececec; --mm-cluster: #34343a; }
:root[data-style="blocks"][data-mode="dark"] .md-body pre, :root[data-style="blocks"][data-mode="dark"] .md-body code { background: #1c1c20; }
:root[data-style="blocks"][data-mode="dark"] .md-body blockquote { background: #38383f; }
:root[data-style="blocks"][data-mode="dark"] ::-webkit-scrollbar-thumb { border-color: #4a4a52; box-shadow: inset 2px 2px 0 #7c7c84, inset -2px -2px 0 #2a2a2e; }
:root[data-style="blocks"][data-mode="dark"] .md-prop-list { background: #38383f; }
:root[data-style="blocks"][data-mode="dark"] .md-tag, :root[data-style="blocks"][data-mode="dark"] .md-body a,
:root[data-style="blocks"][data-mode="dark"] .md-web { color: #9be36d; }
:root[data-style="blocks"][data-mode="dark"] .graph { --g-edge: #a0a0a8; --g-outline: #111; }

/* ===================== Settings ===================== */
.settings {
  width: min(560px, calc(100vw / var(--z, 1) - 32px)); max-height: min(720px, calc(100dvh / var(--z, 1) - 48px)); padding: 0; margin: auto;
  border: 0; border-radius: 22px; color: var(--ink); background: var(--glass-strong); overflow: hidden;
  flex-direction: column;
}
.settings[open] { display: flex; animation: rise .3s var(--spring) both; }
.settings::backdrop { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.set-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px 22px; border-bottom: 1px solid var(--rim-low); }
.set-head h2 { margin: 0; font: 600 20px var(--font-display); }
.set-body { overflow-y: auto; padding: 6px 22px 22px; overscroll-behavior: contain; }
.set-body section { padding: 14px 0 4px; }
.set-body section + section { border-top: 1px solid var(--rim-low); }
.set-body h3 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14px; }
.set-row > span { min-width: 0; }
.set-row b { font-weight: 600; }
.local-list { list-style: none; margin: 0 0 6px; padding: 0; }
.local-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.local-list li button { flex: none; }
.local-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.set-row small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.set-row > button { flex-shrink: 0; white-space: nowrap; }
label.set-row { cursor: pointer; }
.ai-form { display: grid; gap: 8px; padding: 4px 0 8px; }
.ai-form label { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.ai-form :is(input, select) { min-width: 0; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 13px var(--font-body); outline: none; }
.ai-form :is(input, select):focus { border-color: var(--accent); }
.ai-form input[readonly] { color: var(--muted); }
.ai-bar { display: flex; align-items: center; gap: 12px; }
.ai-bar small { flex: 1; font-size: 12px; color: var(--muted); }
.ai-bar small.bad { color: var(--danger); }
.ai-bar .btn-primary { padding: 10px 18px; font-size: 12px; }   /* the same height as the buttons beside it */
@media (max-width: 720px) { .ai-form :is(input, select) { font-size: 16px; } }

.set-styles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 6px; }
.set-styles button {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  padding: 10px; border-radius: 14px; border: 1.5px solid var(--rim-low); font-size: 13px; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.set-styles button:hover { background: var(--accent-soft); }
.set-styles button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-styles button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.set-styles .swatch { width: 100%; height: 40px; margin-bottom: 4px; }
.set-styles small { font-size: 11px; color: var(--muted); line-height: 1.35; }
@media (max-width: 520px) { .set-styles { grid-template-columns: repeat(2, 1fr); } }

/* 界面大小: a slider and its value, which resets to 100 % when clicked. */
.zoom-ctl { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.zoom-ctl input { width: 140px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.zoom-ctl input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 999px; }
@media (max-width: 720px) { .zoom-ctl input { width: 110px; } }
.zoom-ctl button { all: unset; min-width: 42px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
.zoom-ctl button:disabled { color: var(--muted); cursor: default; }
.zoom-ctl button:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }
.seg { display: inline-flex; flex-shrink: 0; padding: 3px; border-radius: 999px; background: var(--accent-soft); }
.seg button { all: unset; cursor: pointer; padding: 4px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); }
.seg button[aria-checked="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.seg button:focus-visible { outline: 2px solid var(--accent); }

.switch {
  appearance: none; flex-shrink: 0; position: relative; width: 42px; height: 24px; margin: 0; border-radius: 999px;
  background: var(--line); cursor: pointer; transition: background .2s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--spring);
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); background: var(--on-accent); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.swatch { flex: none; width: 34px; height: 24px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .12); }
.swatch.glass-sw { background: linear-gradient(135deg, #f4f4f4 50%, #111 50%); }
.swatch.paper-sw { background: linear-gradient(#fbf7ef 60%, #8b5e34 60%); }
.swatch.terminal-sw { background: #050805; box-shadow: inset 0 0 0 5px #050805, inset 0 0 0 7px #4ade80; }
.swatch.blocks-sw { border-radius: 0; background: linear-gradient(#79c05a 0 35%, #8a5a35 35%); image-rendering: pixelated; }

@media (max-width: 560px) {
  .settings { width: calc(100vw / var(--z, 1)); max-width: none; max-height: none; height: calc(100dvh / var(--z, 1)); margin: 0; border-radius: 0; }
  .set-head { padding-top: max(16px, env(safe-area-inset-top)); }
  .set-body { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}
:root[data-style="blocks"] .settings { border-radius: 0; box-shadow: var(--bevel), 0 0 0 var(--px) #1e1e1e; }
:root[data-style="blocks"] .set-styles button, :root[data-style="blocks"] .seg,
:root[data-style="blocks"] .seg button, :root[data-style="blocks"] .switch, :root[data-style="blocks"] .switch::after { border-radius: 0; }
:root[data-style="blocks"] .set-head h2 { font-family: var(--font-pixel); }
:root[data-style="terminal"] .settings, :root[data-style="terminal"] .set-styles button { border-radius: 6px; }

/* ===================== Assistant (public/agent.js) =====================
   A panel along the right edge; the panes make room for it. On phones it is a sheet from the bottom. */
:root { --agent-w: 380px; }
.agent {
  position: fixed; z-index: 30; top: max(12px, env(safe-area-inset-top, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px));
  right: max(16px, env(safe-area-inset-right, 0px)); width: var(--agent-w);
  display: flex; flex-direction: column; overflow: hidden; background: var(--glass-strong); animation: rise .3s var(--spring) both;
}
:root.agent-open .app { margin-right: calc(var(--agent-w) + 12px); }
/* The Mac app's top 28 px are its title bar: the window buttons and a strip that drags the window, so a click
   there never reaches the page. Panels pinned to the top of the window start below it, as the panes do. */
@media (min-width: 721px) { html.mac-app:not(.fullscreen) .agent { top: 32px; } }
@media (max-width: 720px) { html.mac-app:not(.fullscreen) .listpane { padding-top: 42px; } }
.ag-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 18px; border-bottom: 1px solid var(--rim-low); }
.ag-head b { flex: 1; font: 600 16px var(--font-display); }
.ag-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; font-size: 14px; }
.ag-empty { color: var(--muted); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: auto 0; padding: 12px 8px 24px; }
.ag-empty h3 { margin: 4px 0 0; color: var(--ink); font: 600 17px var(--font-display); }
.ag-empty p { margin: 0 0 10px; line-height: 1.6; font-size: 13px; max-width: 30em; }
.ag-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ag-mark svg { width: 22px; height: 22px; fill: currentColor; }
.ag-sugs { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ag-sug { width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font: 13px/1.4 var(--font-body); cursor: pointer; transition: background .15s, border-color .15s; }
.ag-sug:hover { background: var(--accent-soft); border-color: transparent; }
.ag-user { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--accent); color: var(--on-accent); white-space: pre-wrap; overflow-wrap: anywhere; }
.ag-bot { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ag-text { line-height: 1.7; overflow-wrap: anywhere; }
.ag-text > :first-child { margin-top: 0; } .ag-text > :last-child { margin-bottom: 0; }
.ag-text p { margin: .55em 0; }
.ag-text :is(h1, h2, h3, h4, h5, h6) { margin: 1em 0 .4em; line-height: 1.35; font-weight: 650; }
.ag-text h1 { font-size: 1.3em; } .ag-text h2 { font-size: 1.18em; } .ag-text h3 { font-size: 1.07em; } .ag-text :is(h4, h5, h6) { font-size: 1em; }
.ag-text :is(ul, ol) { padding-left: 1.4em; margin: .5em 0; }
.ag-text li { margin: .2em 0; } .ag-text li > :is(p, ul, ol) { margin: .2em 0; }
.ag-text li::marker { color: var(--muted); }
.ag-text li:has(> input[type=checkbox]) { list-style: none; margin-left: -1.3em; }
.ag-text strong { font-weight: 650; color: var(--ink); }
.ag-text a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.ag-text a:hover { border-bottom-color: var(--accent); }
.ag-text code { font: .88em var(--font-mono); background: var(--accent-soft); padding: .1em .35em; border-radius: 4px; }
.ag-text pre { overflow-x: auto; background: color-mix(in srgb, var(--ink) 5%, var(--panel)); border: 1px solid var(--line); padding: 10px 12px; border-radius: 8px; margin: .6em 0; line-height: 1.5; }
.ag-text pre code { background: none; padding: 0; border-radius: 0; font-size: 12.5px; white-space: pre; }
.ag-text blockquote { margin: .6em 0; padding: .1em 0 .1em .9em; border-left: 3px solid var(--line); color: var(--muted); }
.ag-text hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.ag-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: .6em 0; font-size: .93em; }
.ag-text :is(th, td) { border: 1px solid var(--line); padding: 4px 9px; text-align: left; vertical-align: top; }
.ag-text th { background: var(--accent-soft); font-weight: 600; }
.ag-text img { max-width: 100%; border-radius: 6px; }
.ag-text .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
/* The caret at the end of the answer while it is being written. */
.ag-caret { display: inline-block; width: .5em; height: 1.05em; margin-left: 2px; vertical-align: -.15em; border-radius: 1px; background: var(--accent); animation: ag-blink 1s steps(1) infinite; }
@keyframes ag-blink { 50% { opacity: 0; } }
/* Waiting for the model's first word. */
.ag-wait { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.ag-wait > span:last-child { background: linear-gradient(90deg, var(--muted) 30%, var(--ink) 50%, var(--muted) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ag-shine 1.8s linear infinite; }
@keyframes ag-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ag-dots { display: inline-flex; align-items: center; gap: 3px; height: 14px; }
.ag-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: ag-dot 1.2s ease-in-out infinite; }
.ag-dots i:nth-child(2) { animation-delay: .15s; } .ag-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ag-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* What the model thought: a fold above the answer. */
.ag-think { font-size: 12.5px; color: var(--muted); }
.ag-think summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; padding: 2px 0; user-select: none; }
.ag-think summary::-webkit-details-marker { display: none; }
.ag-think summary::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l1.3 3.4 3.4 1.3-3.4 1.3L8 11.2 6.7 7.8 3.3 6.5l3.4-1.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l1.3 3.4 3.4 1.3-3.4 1.3L8 11.2 6.7 7.8 3.3 6.5l3.4-1.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ag-think summary::after { content: ""; width: 5px; height: 5px; margin-left: 1px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .2s var(--ease); }
.ag-think[open] summary::after { transform: translateY(-2px) rotate(45deg); }
.ag-think summary:hover { color: var(--ink); }
.ag-think.live summary::before { background: var(--accent); animation: ag-pulse 1.4s ease-in-out infinite; }
.ag-think.live summary > span { background: linear-gradient(90deg, var(--muted) 30%, var(--ink) 50%, var(--muted) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ag-shine 1.8s linear infinite; }
@keyframes ag-pulse { 50% { opacity: .35; transform: scale(.85); } }
.ag-think-body { margin: 4px 0 2px 6px; padding: 2px 0 2px 12px; border-left: 2px solid var(--line); white-space: pre-wrap; line-height: 1.6; max-height: 220px; overflow-y: auto; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .ag-caret, .ag-dots i, .ag-wait > span:last-child, .ag-think.live summary::before, .ag-think.live summary > span { animation: none; }
  .ag-wait > span:last-child, .ag-think.live summary > span { color: var(--muted); background: none; }
}
.ag-chip { align-self: flex-start; max-width: 100%; font-size: 12px; color: var(--muted); padding: 2px 10px; border-radius: 999px; background: var(--accent-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-chip.bad { color: var(--danger); }
.agent.busy .ag-bot:last-child .ag-chip:last-of-type::after { content: " …"; }
.ag-err { margin: 0; color: var(--danger); font-size: 13px; }
.ag-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.ag-card-head { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--line); min-width: 0; }
.ag-card-name { color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.ag-card-name:hover { text-decoration: underline; }
.ag-sum { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ag-card.settled:not(.unfold) .ag-diff { display: none; }
.ag-card.settled:not(.unfold) .ag-card-bar { border-top: 0; }
.ag-card.ok .ag-done::before { content: "✓ "; color: #2da44e; font-weight: 700; }
.ag-diff { max-height: 320px; overflow: auto; font: 12px/1.55 var(--font-mono); padding: 6px 0; }
.ag-diff > div { padding: 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ag-diff .add { background: color-mix(in srgb, #2da44e 16%, transparent); }
.ag-diff .add::before { content: "+ "; color: #2da44e; }
.ag-diff .del { background: color-mix(in srgb, #cf222e 14%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, #cf222e 50%, transparent); }
.ag-diff .del::before { content: "− "; color: #cf222e; }
.ag-diff .ctx { color: var(--muted); }
.ag-diff .ctx::before { content: "  "; }
.ag-gap { color: var(--muted); font-style: italic; text-align: center; }
.ag-card-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); }
.ag-card-bar .ag-done { color: var(--muted); font-size: 13px; flex: 1; }
.ag-card .ag-err { padding: 0 12px 8px; }
.ag-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--rim-low); }
.ag-form textarea { flex: 1; resize: none; min-height: 38px; max-height: 160px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: 14px/1.4 var(--font-body); outline: none; }
.ag-form textarea:focus { border-color: var(--accent); }
.ag-form button { height: 38px; }
.ag-form .btn-primary { padding: 0 16px; font-size: 14px; }
@media (max-width: 720px) {
  .agent { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: calc(78dvh / var(--z, 1)); border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); animation: sheet .3s var(--ease) both; }
  :root.agent-open .app { margin-right: 0; }
  .ag-form textarea { font-size: 16px; }   /* iOS zooms into smaller inputs */
}
/* What the assistant just showed: a heading in a document, a row in the sidebar. */
.ag-flash { animation: ag-flash 2.2s var(--ease) 1; border-radius: 6px; }
@keyframes ag-flash { 0%, 30% { background: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background: transparent; } }
@keyframes sheet { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
:root[data-style="blocks"] .agent { border-radius: 0; }
:root:is([data-style="terminal"], [data-style="swiss"], [data-style="eink"], [data-style="blueprint"]) :is(.ag-card, .ag-user, .ag-form textarea) { border-radius: 4px; }

/* ===================== Phones =====================
   The open document fills the screen with its buttons floating over the top of it. The sidebar is a drawer
   that slides in from the left (☐ button, or a swipe from the edge) and pushes the document aside. */
.scrim { display: none; }
@media (max-width: 720px) {
  html, body { overflow: hidden; }   /* the pushed-aside document must not widen the page */
  .app { grid-template-columns: minmax(0, 1fr); }
  .side-handle { display: none; }
  .p-split-r, .p-split-d, .p-close { display: none !important; }
  .listpane {
    position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: min(calc(86vw / var(--z, 1)), 360px);
    padding: max(14px, calc(env(safe-area-inset-top, 0px) + 8px)) 10px max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    border-left: 0; border-radius: 0 24px 24px 0; background: var(--glass-strong);
    transform: translateX(-104%); visibility: hidden; transition: transform .32s var(--ease), visibility 0s .32s;
  }
  .app:not([hidden]) .listpane { animation: none; }
  .app[data-view="list"] .listpane { transform: none; visibility: visible; transition: transform .32s var(--ease); }
  .workspace { transition: transform .32s var(--ease); }
  .app[data-view="list"] .workspace { transform: translateX(min(calc(86vw / var(--z, 1)), 360px)); }
  .scrim { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; transition: opacity .32s; }
  .app[data-view="list"] .scrim { opacity: 1; pointer-events: auto; }
  .tree-row { font-size: 16px; padding-top: 9px; padding-bottom: 9px; }
  .tree-row:hover { transform: none; }
  .dock .ghost.icon { width: 44px; height: 44px; }
  .dock .ghost.icon svg { width: 21px; height: 21px; }

  /* The editor runs edge to edge, so text keeps one small gutter. */
  .editor {
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    border-left: 0; border-right: 0; border-radius: 0; box-shadow: none;
  }
  :root .app .pane.editor > .ebar {
    position: absolute; z-index: 6; top: 0; left: 0; right: 0; gap: 8px;
    padding: 6px max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    background: none; border: 0; pointer-events: none;
  }
  .ebar > *, .ebar .p-acts > * { pointer-events: auto; }
  .ebar .meta, .ebar .p-nav { display: none; }
  .ebar .p-back, .p-acts {
    background: var(--glass-strong); border: 1px solid var(--rim-low);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: inset 0 1px 0 var(--rim), 0 4px 18px rgba(0, 0, 0, .1);
  }
  .ebar .p-back { display: inline-grid; width: 46px; height: 46px; padding: 0; border-radius: 50%; color: var(--ink); }
  .p-acts { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; padding: 3px; border-radius: 999px; pointer-events: none; }
  .editor.empty .p-acts { display: none; }
  .ebar .p-acts :is(.ghost.icon, .p-edit) { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; color: var(--ink); }
  .ebar :is(.p-back, .p-acts) svg, :root .ebar .p-acts .ico { width: 20px; height: 20px; }
  .p-acts .p-more { display: inline-grid; }
  .p-acts .p-extra {
    display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; max-width: calc(100vw / var(--z, 1) - 32px);
    flex-direction: column; padding: 6px; border-radius: 16px; border: 1px solid var(--rim-low);
    background: var(--panel); box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
  }
  .p-acts.menu .p-extra { display: flex; animation: rise .2s var(--ease) both; }
  .p-acts.menu .p-more { background: var(--accent-soft); }
  .p-info:not(:empty) { display: block; padding: 6px 10px 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font: 11px/1.5 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
  :root .ebar .p-extra :is(.p-web, .p-dl, .p-del) { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; font-size: 15px; color: var(--ink); }
  :root .ebar .p-extra :is(.p-web, .p-dl, .p-del)[hidden] { display: none; }
  :root .ebar .p-extra :is(.p-web, .p-dl, .p-del) .ico { display: block; width: 18px; height: 18px; }
  :root .ebar .p-extra :is(.p-web, .p-dl, .p-del) .lbl { display: inline; }
  /* Room at the top for the floating buttons. */
  .md-body { padding: 70px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
  .preview:not(.doc) { padding-top: 58px; }
  textarea { padding: 70px 16px 18px; }
  .placeholder { padding-top: 64px; }
  .toc.overlay { top: 60px; }
  :root[data-style="blocks"] .preview.doc { margin-top: 60px; }
  :root[data-style="blocks"] .preview.doc .md-body { padding-top: 18px; }
  :root[data-style="blocks"] .p-acts { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 4px; padding: 0; }
  :root[data-style="blocks"] .p-acts .p-extra { border-radius: 0; border: var(--px) solid #1e1e1e; box-shadow: var(--bevel); }
  :root[data-style="blocks"] .p-acts .p-extra .ghost { border: 0; box-shadow: none; background: none; }
  :root[data-style="terminal"] :is(.p-acts, .p-acts .p-extra) { border-radius: 6px; }
  :root[data-style="terminal"] .ebar .p-back { border-radius: 6px; }
  /* Square styles: the ⋯ group matches the square sidebar button beside it. */
  :root[data-style="swiss"] :is(.p-acts, .p-acts .p-extra) { border-radius: 0; }
  :root[data-style="blueprint"] :is(.p-acts, .p-acts .p-extra) { border-radius: 2px; }
  :root[data-style="paper"] .ebar :is(.p-back, .p-acts) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Right-click menu in a document (ctxmenu.js). */
.cm { position: fixed; z-index: 200; min-width: 190px; padding: 5px; border-radius: 12px; background: var(--glass-strong); display: grid; gap: 1px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18), 0 0 0 1px var(--line); animation: fade .12s ease; }
.cm-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 6px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--ink); font: 13px var(--font-body); text-align: left; cursor: default; }
.cm-item small { color: var(--muted); font-size: 12px; }
.cm-item:not(:disabled):hover, .cm-item:not(:disabled):focus-visible { background: var(--accent); color: var(--on-accent); outline: none; }
.cm-item:not(:disabled):hover small { color: inherit; opacity: .8; }
.cm-item:disabled { color: var(--muted); opacity: .55; }
.cm-sep { height: 1px; margin: 4px 8px; background: var(--line); }
/* The passage attached to the next message, and in a sent one. */
.ag-quote { display: flex; align-items: flex-start; gap: 6px; margin: 0 12px; padding: 8px 6px 8px 10px; border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--accent-soft); }
.ag-quote blockquote { flex: 1; margin: 0; max-height: 84px; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--muted); white-space: pre-wrap; }
.ag-cite { margin: 0 0 6px; padding-left: 8px; border-left: 2px solid currentColor; opacity: .75; font-size: 12.5px; white-space: pre-wrap; }

/* Settings → Assistant → thinking effort: a liquid-glass switch (the other styles restyle it in themes.css). A glass lens slides to the chosen level; each
   level shows how hard the model thinks as four bars, and the lens glows warmer the higher it goes. The switch
   pops in again with each service or model, its levels following one by one. */
.ai-effort { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.effort-seg {
  --level: 0;
  position: relative; display: flex; gap: 2px; padding: 4px; min-width: 0; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--rim-low);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 -1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .06);
}
.effort-seg button {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px 5px; border: 0; border-radius: 12px; background: none; color: var(--muted);
  font: 12px var(--font-body); cursor: pointer; white-space: nowrap; transition: color .25s;
}
.effort-seg button > span:last-child { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.effort-seg button:hover { color: var(--ink); }
.effort-seg button[aria-checked=true] { color: var(--eff-on, var(--ink)); font-weight: 600; }
.effort-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.effort-bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.effort-bars i { width: 3px; border-radius: 1.5px; background: currentColor; opacity: .2; transition: opacity .3s, background .3s, transform .4s var(--spring); }
.effort-bars i:nth-child(1) { height: 5px; } .effort-bars i:nth-child(2) { height: 6.5px; } .effort-bars i:nth-child(3) { height: 9px; } .effort-bars i:nth-child(4) { height: 12px; }
.effort-bars i.on { opacity: .55; }
.effort-bars.auto i { opacity: .45; background: none; box-shadow: inset 0 0 0 1px currentColor; }
[aria-checked=true] .effort-bars i.on { opacity: 1; background: var(--eff-bar, var(--accent)); transform: scaleY(1.08); transform-origin: bottom; }
/* The lens: brighter glass with a rim highlight, refracting a tint of the accent that deepens with the level. */
.effort-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 12px; pointer-events: none;
  background:
    radial-gradient(120% 90% at 30% 0%, var(--rim), transparent 60%),
    linear-gradient(180deg, var(--glass-strong), color-mix(in srgb, var(--accent) calc(6% + var(--level) * 16%), var(--glass-strong)));
  -webkit-backdrop-filter: blur(8px) saturate(2); backdrop-filter: blur(8px) saturate(2);
  border: 1px solid var(--rim);
  box-shadow: inset 0 1px 1px var(--rim), inset 0 -2px 4px rgba(0, 0, 0, .05),
    0 4px 14px color-mix(in srgb, var(--accent) calc(10% + var(--level) * 30%), transparent);
  transition: transform .45s var(--spring), width .45s var(--spring), box-shadow .4s, background .4s;
}
/* Squash and settle like a drop of liquid as the lens moves. */
.effort-thumb.wobble { animation: effort-wobble .55s var(--spring); }
@keyframes effort-wobble { 0% { scale: 1 1; } 30% { scale: 1.12 .86; } 60% { scale: .96 1.05; } 100% { scale: 1 1; } }
.ai-effort.pop .effort-seg { animation: effort-pop .5s var(--spring) both; transform-origin: left center; }
.ai-effort.pop .effort-seg button { animation: effort-in .4s var(--spring) both; animation-delay: calc(80ms + var(--i, 0) * 50ms); }
@keyframes effort-pop { from { opacity: 0; transform: scale(.9) translateY(-6px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes effort-in { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .effort-thumb { transition: none; }
  .effort-thumb.wobble, .ai-effort.pop :is(.effort-seg, .effort-seg button) { animation: none; }
}

/* Settings → Assistant → model: suggestions as you type, in a panel that drops from the field. It takes the
   style's own surface, line and accent, so it follows whichever style is on. */
.combo { position: relative; display: block; min-width: 0; }
.combo > input { width: 100%; box-sizing: border-box; }
.suggest {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  display: block; padding: 5px; border-radius: 14px; border: 1px solid var(--rim-low);
  background: var(--panel);   /* solid: nested glass does not blur the rows under it */
  box-shadow: inset 0 1px 0 var(--rim), 0 12px 30px rgba(0, 0, 0, .14);
  transform-origin: top center;
}
.suggest[hidden] { display: none; }
.suggest.pop { animation: sug-drop .32s var(--spring) both; }
.suggest.pop .sug { animation: sug-in .28s var(--spring) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes sug-drop { from { opacity: 0; transform: translateY(-6px) scaleY(.92); } to { opacity: 1; transform: none; } }
@keyframes sug-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sug { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; cursor: pointer; color: var(--ink); font-size: 13px; }
.sug b { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug mark { background: none; color: var(--accent); font-weight: 700; }
.sug small { flex: none; font-size: 11px; color: var(--muted); padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); }
.sug[aria-selected=true] { background: var(--accent); color: var(--on-accent); }
.sug[aria-selected=true] :is(mark, small) { color: inherit; }
.sug[aria-selected=true] small { background: color-mix(in srgb, var(--on-accent) 18%, transparent); }
@media (prefers-reduced-motion: reduce) { .suggest.pop, .suggest.pop .sug { animation: none; } }
.ai-form label:has(.combo) { position: relative; z-index: 6; }   /* the suggestions lie over the rows below */