/* Feishu / Lark Docs–style wiki shell. Original design.
   Neutrals are warm so the shell and the notes' own paper (#f7f6f2 / #161614) read as one surface.
   One accent (Lark-like blue) for selection and focus; eight calm series hues give pages their identity. */
:root {
  --lw: 264px; --rw: 240px;
  --tb-h: 48px;       /* top bar: both panels start directly under it, pinned or peeking */
  --gut: 32px;        /* window edge → note: the card's 8px inset plus the air between a pinned panel and the note */
  /* motion: exponential ease-outs only (no bounce, no elastic) */
  --e-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --e-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --e-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* stacking: one semantic scale, low to high */
  --z-raised: 5;      /* in-flow controls that overlap a neighbour (resize handles) */
  --z-edge: 20;       /* edge handles */
  --z-bar: 30;        /* the full-width top bar */
  --z-backdrop: 40;   /* scrims behind drawers and sheets */
  --z-sheet: 50;      /* mobile drawer, outline popover / sheet */
  --z-peek: 60;       /* the panel cards (pinned or peeking), floating over the page */
  --z-grip: 62;       /* resize grips on a pinned card's inner edge */
  --z-edge-top: 65;   /* edge handle stays clickable (to pin) above its own peek */
  --z-chrome: 70;     /* selection pill */
  --z-modal-backdrop: 80;
  --z-modal: 81;      /* shortcuts sheet */
  --z-dropdown: 90;   /* menus */
  --z-toast: 100;
  --z-tooltip: 110;
  --z-drag: 120;      /* resize shield: above everything while a drag is live */
}
:root[data-theme="light"] {
  --paper: #f7f6f2;
  --panel: #fbfaf8;
  --raised: #ffffff;
  --line: #e8e6e0;
  --guide: #e3e1da;
  --text: #1f2329;
  --text-2: #5d6168;
  --text-3: #92948f;
  --hover: rgba(45, 40, 25, 0.05);
  --press: rgba(45, 40, 25, 0.09);
  --chip: rgba(45, 40, 25, 0.055);
  --accent: #3370ff;
  --accent-text: #2a5ad6;
  --tint: rgba(51, 112, 255, 0.08);
  --tint-2: rgba(51, 112, 255, 0.14);
  --hit: rgba(255, 196, 0, 0.38);
  --danger: #cf3f37;
  --shadow: 0 1px 2px rgba(40, 35, 20, 0.08), 0 4px 8px rgba(40, 35, 20, 0.09);
  --scrim: rgba(30, 28, 22, 0.28);
  --skel: #ecebe6;
  --tip-bg: #2a2a28; --tip-fg: #f4f3ef; --tip-key: rgba(255, 255, 255, 0.14);
  --mix: 13%;
  /* series hues: muted, distinct, AA-ish on paper */
  --h0: #3d6fd9; --h1: #1b8783; --h2: #3f8a4d; --h3: #b2771a; --h4: #c9622e; --h5: #c24e70; --h6: #7a5bc8; --h7: #56657c;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #161614;
  --panel: #1c1c1a;
  --raised: #252523;
  --line: #2c2c29;
  --guide: #31312e;
  --text: #e8e6e1;
  --text-2: #a9a7a1;
  --text-3: #75736e;
  --hover: rgba(255, 252, 240, 0.05);
  --press: rgba(255, 252, 240, 0.09);
  --chip: rgba(255, 252, 240, 0.06);
  --accent: #5b8cff;
  --accent-text: #8fb1ff;
  --tint: rgba(91, 140, 255, 0.12);
  --tint-2: rgba(91, 140, 255, 0.2);
  --hit: rgba(255, 196, 0, 0.3);
  --danger: #f08178;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.4);
  --scrim: rgba(0, 0, 0, 0.5);
  --skel: #222220;
  --tip-bg: #3a3a37; --tip-fg: #f4f3ef; --tip-key: rgba(255, 255, 255, 0.12);
  --mix: 20%;
  --h0: #86a9ff; --h1: #5cc4bf; --h2: #82c98f; --h3: #e2b25a; --h4: #f19b68; --h5: #ef8eab; --h6: #b39bf2; --h7: #a3b2c7;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--paper); color: var(--text);
  font: 13.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft JhengHei", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
svg { width: 16px; height: 16px; flex: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
[hidden] { display: none !important; }
kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px;
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-2);
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 var(--line);
}
/* anything carrying a series hue: icon in the hue, soft fill from the same hue */
.hued { color: var(--hue); --ifill: color-mix(in srgb, var(--hue) var(--mix), transparent); }

.app { display: flex; height: 100%; }

/* ---------- top bar: spans the window; brand · where you are · page tools ----------
   It floats over the note (the note runs up to y=0 while reading) and fades and lifts away while reading
   downward, returning on any scroll up or when the pointer reaches the top. Fading it gives the reader the
   strip back; only opacity/transform change, so nothing moves. */
.topbar {
  --lo: calc(var(--lw) + var(--gut)); --bw: max(var(--lo), 150px); /* 150px: room for "Gloss 箋 / w." while the tree is closed */
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-bar); height: var(--tb-h);
  display: flex; align-items: center; gap: 8px; padding-right: 10px;
  background: var(--paper); border-bottom: 1px solid transparent;
  transition: opacity .2s var(--e-quart), transform .2s var(--e-quart), border-color .2s var(--e-quart), visibility 0s;
}
.left-closed .topbar { --lo: 0px; }
.bar-hidden .topbar {
  opacity: 0; transform: translateY(-10px); pointer-events: none; visibility: hidden;
  transition: opacity .15s var(--e-quart), transform .15s var(--e-quart), visibility 0s .15s;
}
/* no rule under the bar, scrolled or not: like the pinned panels it is set off by the paper alone (owner, 2026-10-29) */
/* the brand sits over the tree when it's pinned, so the tree and the brand share one column */
.tb-brand { flex: none; width: var(--bw); padding-left: 20px; display: flex; align-items: center; } /* = card inset + header padding */


/* ---------- shared bits ---------- */
.ib {
  position: relative; width: 28px; height: 28px; display: inline-grid; place-items: center; flex: none;
  border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; list-style: none;
  transition: background-color .12s, color .12s;
}
.ib::-webkit-details-marker { display: none; }
.ib:hover { background: var(--hover); color: var(--text); }
.ib:active { background: var(--press); }
.pane-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.pane-title .muted { font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 11.5px; }

/* styled tooltip (one floating element, positioned by app.js so panels with overflow:hidden can't clip it) */
.tip {
  position: fixed; z-index: var(--z-tooltip); left: 0; top: 0; display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px; max-width: min(360px, calc(100vw - 16px));
  background: var(--tip-bg); color: var(--tip-fg); box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  font-size: 12px; line-height: 1.4; pointer-events: none; animation: tip-in .12s var(--e-quart);
}
.tip span { overflow: hidden; text-overflow: ellipsis; }
.tip .keys-row { display: inline-flex; gap: 3px; flex: none; }
.tip kbd { background: var(--tip-key); color: var(--tip-fg); box-shadow: none; min-width: 18px; height: 18px; font-size: 10.5px; }
@keyframes tip-in { from { opacity: 0; transform: translateY(-2px); } }
/* page titles in the sidebar: a bubble past the sidebar edge, its notch pointing back at the row */
.tip.tip-side { max-width: min(480px, calc(100vw - 16px)); padding: 8px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); animation-name: tip-side-in; animation-duration: .14s; }
.tip.tip-side::before { content: ""; position: absolute; left: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left: 0; border-right-color: var(--tip-bg); }
.tip.tip-side.glide { transition: top .14s var(--e-quart); }
@keyframes tip-side-in { from { opacity: 0; transform: translateX(-6px) scale(.96); } }

/* ---------- panels: one card per side, pinned or peeking ----------
   Pinned and peeking are the same box in the same place: 8px in from its window edge, from 8px under the top bar
   to 8px above the bottom. Pinning only moves the doc aside (its margin animates) so the box never moves;
   collapsed, it is parked off-screen and the edge handle brings it back as a peek (motion in app.js, WAAPI).
   Only a peek looks like a card (panel surface + shadow), because it floats over the note. Pinned, the box takes
   the paper and drops the shadow: two raised cards walled the note in and read as squeezing it (owner,
   2026-10-29), so a pinned panel is set off by air (--gut) instead. */
.side { position: relative; flex: none; width: var(--lw); overflow: hidden; background: var(--panel); }
.side-inner { width: var(--lw); height: 100%; display: flex; flex-direction: column; }
@media (min-width: 769px) {
  .side {
    position: fixed; z-index: var(--z-peek); top: calc(var(--tb-h) + 8px); left: 8px; bottom: 8px;
    border-radius: 10px; box-shadow: var(--shadow);
    transition: background-color .2s var(--e-quart), box-shadow .2s var(--e-quart);
  }
  :root:not(.left-closed) .side { background: var(--paper); box-shadow: none; }
  /* parked off-screen while collapsed: a hidden card keeps no on-screen box */
  .left-closed .side { visibility: hidden; transform: translateX(calc(-100% - 16px)); }
  .left-closed.peek-left .side { visibility: visible; transform: none; }
}

/* one header for both cards: the panel's tabs / title on the left, a single pin toggle on the right */
.card-head { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 12px; flex: none; }
/* the pin: an outlined pin while the card only peeks, filled once it is pinned */
.pin { color: var(--text-3); }
.pin[aria-pressed="true"] { color: var(--text-2); --ifill: currentColor; }
.side-head .brand, .side-head .xs-sep, .side-head .xsite { display: none; }
.side-head .tabs { flex: 1; }
.brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.space-name { font-size: 14px; font-weight: 650; letter-spacing: .01em; }
.tb-brand .brand { flex: none; }
/* Site switch, shared with wickend.dev's top bar (owner 2026-10-30): "this site / other site". The other site is only
   its logo ("w.") until hovered or focused, then grows rightward into "wickend.dev →"; the logo never moves.
   Width animates via grid 0fr → 1fr, so no text is measured. */
.xs-sep { color: var(--text-3); font-weight: 300; font-size: 17px; margin: 0 1px 0 4px; }
.xsite { --ease: cubic-bezier(0.22, 1, 0.36, 1); display: inline-flex; align-items: center; height: 28px; padding: 0 7px; border-radius: 6px;
  color: var(--text); font-size: 14px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: background-color .2s var(--ease); }
.xsite:hover, .xsite:focus-visible { background: var(--hover); }
.xsite .acc { color: #0066cc; }
:root[data-theme="dark"] .xsite .acc { color: #5b9dff; }
.xsite .dim { color: var(--text-3); font-weight: 500; }
.xsite .xl { display: inline-grid; grid-template-columns: 0fr; opacity: 0; transition: grid-template-columns .26s var(--ease), opacity .2s var(--ease); }
.xsite .xl > span { overflow: hidden; min-width: 0; }
.xsite .xl.post > span { padding-left: 6px; color: var(--text-3); font-weight: 400; }
.xsite:hover .xl, .xsite:focus-visible .xl { grid-template-columns: 1fr; opacity: 1; }
/* the favicon mark itself, so the title and the browser tab show one logo */
.seal { display: block; width: 22px; height: 22px; flex: none; }
.tabs { display: flex; gap: 2px; }
.tab[aria-selected="true"] { color: var(--accent-text); background: var(--tint); }
.head-sep { width: 1px; height: 16px; background: var(--line); margin: 0 2px; }

.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane > .pane-title { padding: 10px 16px 6px; }

/* tree */
.tree { flex: 1; overflow-y: auto; padding: 0 8px 16px; overscroll-behavior: contain; }
.tree ul { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; align-items: center; gap: 7px; width: 100%; min-height: 30px; padding: 0 8px 0 4px; margin: 1px 0;
  border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer;
  color: var(--text-2); text-decoration: none; font-size: 13.5px;
}
.row:hover { background: var(--hover); color: var(--text); }
.row:active { background: var(--press); }
.row > svg { color: var(--text-3); }
.row > svg.hued { color: var(--hue); }
.row .lbl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row .t1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .cnt { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.row .chev { width: 14px; height: 14px; color: var(--text-3); transition: transform .15s var(--e-quart); }
.row[aria-expanded="true"] .chev { transform: rotate(90deg); }
.row .sp { width: 14px; flex: none; }
.grp-row { color: var(--text); font-weight: 500; }
.grp-row.muted { color: var(--text-2); font-weight: 400; }
.children { position: relative; }
.children::before { content: ""; position: absolute; left: 11px; top: 2px; bottom: 2px; width: 1px; background: var(--guide); }
.children .row { padding-left: 22px; }
.page-row.cur { background: var(--tint); color: var(--accent-text); }
.page-row.cur .t1 { font-weight: 500; }
.page-row.cur .rdate { color: color-mix(in srgb, var(--accent-text) 70%, var(--text-3)); }
/* flat list (Group by: None): no spacer, no guides */
.row.flat { padding-left: 8px; }
.row .rdate { flex: none; padding-left: 8px; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* sort & group */
.pages-title { justify-content: flex-start; min-height: 24px; }
.pages-title > span:first-child { flex: none; }
.sg-btn { width: 24px; height: 24px; margin: -4px -6px -4px auto; flex: none; }
.sg-btn svg { width: 15px; height: 15px; }
.sg-btn.on { color: var(--accent-text); background: var(--tint); }
.sg-btn + .sg-btn { margin-left: 2px; }
.sg-active {
  display: inline-flex; align-items: center; gap: 1px; min-width: 0; margin-left: auto;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3);
}
.sg-active:not([hidden]) + .sg-btn { margin-left: 4px; }
.sg-active span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu {
  position: fixed; z-index: var(--z-dropdown); left: 0; top: 0; width: 216px; padding: 6px;
  border-radius: 8px; background: var(--raised); box-shadow: var(--shadow); animation: tip-in .12s var(--e-quart);
}
.menu-label { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.mitem {
  display: flex; align-items: center; gap: 9px; width: 100%; height: 30px; padding: 0 8px 0 10px;
  border: 0; border-radius: 6px; background: none; color: var(--text-2); font-size: 13px; text-align: left; cursor: pointer;
}
.mitem span { flex: 1; }
.mitem svg { color: var(--text-3); }
.mitem:hover, .mitem:focus { background: var(--hover); color: var(--text); outline: none; }
.mitem:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.mitem .ck { width: 14px; height: 14px; color: var(--accent-text); visibility: hidden; }
.mitem[aria-checked="true"] { color: var(--text); }
.mitem[aria-checked="true"] .ck { visibility: visible; }
.tree-group { padding: 12px 8px 4px; }
.empty { padding: 24px 16px; text-align: center; color: var(--text-3); font-size: 12.5px; line-height: 1.6; }

/* search */
.sbox {
  display: flex; align-items: center; gap: 1px; margin: 2px 12px 8px; height: 30px; padding: 0 3px 0 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--raised);
  transition: border-color .12s, box-shadow .12s;
}
.sbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
.sbox input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 13px; }
.sbox input::placeholder { color: var(--text-3); }
.tg {
  position: relative; width: 24px; height: 22px; display: grid; place-items: center; flex: none;
  border: 1px solid transparent; border-radius: 4px; background: none; color: var(--text-3); cursor: pointer;
}
.tg:hover { background: var(--hover); color: var(--text); }
.tg[aria-pressed="true"] { color: var(--accent-text); background: var(--tint); border-color: var(--tint-2); }
.s-summary { padding: 0 16px 6px; font-size: 12px; color: var(--text-3); }
.s-summary:empty { display: none; }
.s-summary.err { color: var(--danger); }
.results { flex: 1; overflow-y: auto; padding: 0 8px 20px; overscroll-behavior: contain; }
.s-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px 0; text-align: center; color: var(--text-3); font-size: 12.5px; line-height: 1.55; }
.s-empty .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--chip); color: var(--text-3); }
.s-empty .ico svg { width: 20px; height: 20px; }
.s-empty b { color: var(--text-2); font-weight: 500; word-break: break-word; }
.rg-head { color: var(--text); }
.rg-head .badge {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; display: inline-grid; place-items: center; flex: none;
  font-size: 11px; color: var(--text-2); background: var(--chip); font-variant-numeric: tabular-nums;
}
.rg ul { list-style: none; margin: 0 0 4px; padding: 0; position: relative; }
.rg ul::before { content: ""; position: absolute; left: 11px; top: 2px; bottom: 2px; width: 1px; background: var(--guide); }
.hit {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 4px 8px 4px 22px; margin: 1px 0; border-radius: 6px; color: var(--text-2);
  font-size: 12.5px; line-height: 1.5;
}
.hit span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.hit:hover { background: var(--hover); color: var(--text); }
.hit[aria-current="true"] { background: var(--tint); color: var(--text); }
.hit mark { background: var(--hit); color: var(--text); border-radius: 2px; padding: 0 1px; }
.more { display: block; margin: 2px 0 6px 22px; padding: 4px 8px; border: 0; border-radius: 6px; background: none; color: var(--accent-text); font-size: 12px; cursor: pointer; }
.more:hover { background: var(--tint); }


/* ---------- resize grips: on a pinned card's inner edge ---------- */
.rz {
  /* 11px hit area: a real pointer missed the 7px one in testing; the visible line stays 2px.
     Inset from the card's rounded corners top and bottom. */
  position: fixed; z-index: var(--z-grip); top: calc(var(--tb-h) + 18px); bottom: 18px; width: 11px; display: none;
  cursor: col-resize; touch-action: none; outline: none;
}
.rz::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; border-radius: 1px; transform: translateX(-50%);
  background: var(--accent); opacity: 0; transition: opacity .15s var(--e-quart) .08s;
}
.rz:hover::after, .rz.drag::after, .rz:focus-visible::after { opacity: 1; }
@media (min-width: 769px) { #rz-left { display: block; left: calc(8px + var(--lw) - 5.5px); } }
@media (min-width: 1280px) { #rz-right { display: block; right: calc(8px + var(--rw) - 5.5px); } }
.left-closed #rz-left, .right-closed #rz-right, .no-outline #rz-right { display: none !important; }
/* while dragging: no width animation. The shield (.rz-shield) keeps the note from swallowing pointer events.
   Do NOT toggle pointer-events on the iframe: Chrome keeps stale compositor hit-test data afterwards, so wheel
   events reach the note but never scroll it (found 2026-10-28: "after resizing, the content can't scroll"). */
.resizing .side, .resizing .side-inner, .resizing .outline, .resizing .outline-inner, .resizing .doc { transition: none !important; }
.rz-shield { position: fixed; inset: 0; z-index: var(--z-drag); cursor: col-resize; touch-action: none; }
.resizing, .resizing * { cursor: col-resize !important; user-select: none; }

/* ---------- center: document ----------
   Pinning a panel doesn't move the note (owner 2026-10-30): the note stays centred in the window and a pinned
   panel sits in the margin beside it. Only when the window is too narrow for the 720px column plus that panel
   does the note step aside, by exactly as much as the panel would otherwise cover (--ml / --mr). */
:root { --ml: 0px; --mr: 0px; }
@media (min-width: 769px) {
  :root:not(.left-closed) { --ml: max(0px, calc(2 * (var(--lw) + var(--gut)) + 720px - 100vw)); }
}
@media (min-width: 1280px) {
  :root:not(.right-closed):not(.no-outline) { --mr: max(0px, calc(2 * (var(--rw) + var(--gut)) + 720px - 100vw)); }
}
.doc {
  margin-left: var(--ml); margin-right: var(--mr);
  flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--paper);
  /* the note runs up to y=0 under the floating bar; its own header (mountHead in app.js) leaves room for the bar */
  /* on a narrow window, pinning glides the doc aside (220ms, quint); unpinning gives the room back a little faster (165ms, quart) */
  transition-property: margin-left, margin-right;
  transition-duration: var(--ml-t, .22s), var(--mr-t, .22s);
  transition-timing-function: var(--ml-e, var(--e-quint)), var(--mr-e, var(--e-quint));
}
.left-closed { --ml-t: .165s; --ml-e: var(--e-quart); }
.right-closed { --mr-t: .165s; --mr-e: var(--e-quart); }
/* the eyebrow lines up with the note's text column wherever the panels are */
.bar-label {
  flex: 1; min-width: 0; position: relative; height: 20px;
  /* 8px is the top bar's own gap after the brand */
  margin-left: max(4px, calc(var(--ml) - var(--bw) - 8px + max(24px, (100vw - var(--ml) - var(--mr) - 720px) / 2 + 24px)));
}
.eyebrow, .mini-title {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden;
  transition: opacity .2s, transform .2s;
}
.eyebrow, .eyebrow-m { font-size: 12.5px; color: var(--text-3); }
.eyebrow svg, .eyebrow-m svg { width: 14px; height: 14px; }
.eyebrow .ser, .eyebrow-m .ser { color: var(--text-2); }
.eyebrow .dot, .eyebrow-m .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; flex: none; }
.eyebrow .ser, .mini-title { overflow: hidden; text-overflow: ellipsis; }
.eyebrow-m { display: none; }
.mini-title { display: block; line-height: 20px; font-size: 13.5px; font-weight: 600; color: var(--text); opacity: 0; transform: translateY(4px); pointer-events: none; }

.toolbar { display: flex; align-items: center; gap: 2px; flex: none; }
.toolbar .ib { width: 30px; height: 30px; color: var(--text-2); }
.toolbar .ib:hover { color: var(--text); }
.toolbar .ib[aria-pressed="true"], #more-btn[aria-expanded="true"] { background: var(--tint); color: var(--accent-text); }
/* version: segmented control */
.ver { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 2px; margin-right: 6px; border-radius: 7px; background: var(--chip); }
.ver .seg {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 0; border-radius: 5px;
  background: none; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background-color .12s, color .12s, box-shadow .12s;
}
.ver .seg svg { width: 14px; height: 14px; flex: none; }
.ver .seg:hover { color: var(--text); }
.ver .seg[aria-checked="true"] { background: var(--raised); color: var(--text); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .06); }
.ver .seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ver .seg[aria-disabled="true"] { color: var(--text-3); opacity: .55; cursor: default; }
.ver .seg[aria-disabled="true"]:hover { color: var(--text-3); }


/* the header is rendered here but shown inside the note (mountHead copies it there), so it scrolls with the text */
.head-body { display: none; }
.doc-inner { min-height: 0; overflow: hidden; width: 100%; max-width: 720px; margin: 0 auto; padding: 0 24px; }
.doc-top { display: none; }
.head-body h1 { margin: 0; font-size: 24px; line-height: 1.35; font-weight: 650; letter-spacing: .005em; max-width: 30em; }
.lede { margin: 6px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.6; max-width: 60em; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.meta .mi { display: inline-flex; align-items: center; gap: 5px; }
.meta .mi svg { width: 14px; height: 14px; color: var(--text-3); }
.meta .mi.depth svg { color: var(--hue); --ifill: color-mix(in srgb, var(--hue) var(--mix), transparent); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px 0 6px; border-radius: 6px; font-size: 12px; background: var(--chip); color: var(--text-2); white-space: nowrap; }
.chip svg { width: 12px; height: 12px; color: var(--text-3); }
.rels { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rels:empty { display: none; }
.rel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--text-3); }
.rel-k { display: inline-flex; align-items: center; gap: 5px; min-width: 88px; }
.rel-k svg { width: 14px; height: 14px; }
.mention {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 26px;
  padding: 2px 8px 2px 6px; border-radius: 6px; text-decoration: none; color: var(--text);
  background: var(--chip); transition: background-color .12s, color .12s;
}
.mention:hover { background: var(--tint); color: var(--accent-text); }
.mention svg { width: 14px; height: 14px; }
.mention span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* folded header (note scrolled): one slim bar with the title */
.condensed .eyebrow { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.condensed .mini-title { opacity: 1; transform: none; }

.frame-wrap { flex: 1; min-height: 0; position: relative; background: var(--paper); }
.frame-wrap iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; display: block; background: var(--paper); opacity: 0; transition: opacity .2s var(--e-quart); }
.frame-wrap iframe.incoming { z-index: 0; }
.frame-wrap.ready iframe { opacity: 1; }
.frame-skel { position: absolute; inset: 0; max-width: 720px; margin: 0 auto; padding: calc(var(--tb-h) + 16px) 24px 16px; display: flex; flex-direction: column; gap: 14px; }
.frame-wrap.ready .frame-skel { display: none; }
.frame-skel i { display: block; height: 12px; border-radius: 4px; background: var(--skel); animation: pulse 1.2s var(--e-quart) infinite; }
.frame-skel i:nth-child(1) { width: 56%; height: 20px; }
.frame-skel i:nth-child(2) { width: 88%; }
.frame-skel i:nth-child(3) { width: 80%; }
.frame-skel i:nth-child(4) { width: 66%; }
@keyframes pulse { 50% { opacity: .5; } }

/* ---------- right: outline ---------- */
.outline { position: relative; flex: none; width: var(--rw); overflow: hidden; background: var(--panel); }
.outline-inner { position: absolute; top: 0; bottom: 0; right: 0; width: var(--rw); display: flex; flex-direction: column; }
#outline-btn { display: none; }
@media (min-width: 1280px) {
  .outline {
    position: fixed; z-index: var(--z-peek); top: calc(var(--tb-h) + 8px); right: 8px; bottom: 8px;
    border-radius: 10px; box-shadow: var(--shadow);
    transition: background-color .2s var(--e-quart), box-shadow .2s var(--e-quart);
  }
  :root:not(.right-closed):not(.no-outline) .outline { background: var(--paper); box-shadow: none; }
  .right-closed .outline { visibility: hidden; transform: translateX(calc(100% + 16px)); }
  .right-closed.peek-right .outline { visibility: visible; transform: none; }
}
.outline-head { padding-left: 16px; }
.outline-head .pane-title { flex: 1; }
.o-pct { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.o-bar { height: 2px; margin: -4px 16px 6px; border-radius: 1px; background: var(--line); overflow: hidden; flex: none; }
.o-bar i { display: block; height: 100%; width: 0; background: var(--accent); opacity: .7; transition: width .15s linear; }
#outline-close { display: none; }
.outline-list { list-style: none; margin: 4px 0 0; padding: 0 12px 20px 10px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.outline-list button {
  position: relative; display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 4px 8px 4px 10px; border-radius: 6px; color: var(--text-2); font-size: 12.5px; line-height: 1.5;
}
.outline-list button span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.outline-list .l3 button { padding-left: 22px; font-size: 12px; color: var(--text-3); }
.outline-list button:hover { background: var(--hover); color: var(--text); }
/* active section: one highlight block for the whole list (with its leading dot) that glides to the active
   entry and takes its size (placeMark in app.js) */
.outline-list { position: relative; }
.outline-list li:not(.o-mark) { position: relative; z-index: 1; }
.outline-list button { transition: color .15s var(--e-quart), background-color .12s; }
.outline-list button[aria-current="true"]:hover { background: none; }
.o-mark {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 6px; background: var(--hover);
  pointer-events: none; opacity: 0;
  transition: transform .2s var(--e-quart), width .2s var(--e-quart), height .2s var(--e-quart), opacity .15s;
}
.o-mark::before {
  content: ""; position: absolute; left: 1px; top: calc(4px + .75em - 2.5px); width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent); font-size: 12.5px;
}
.o-mark.on { opacity: 1; }
.o-mark.still { transition: none; }
.outline-list button[aria-current="true"] { color: var(--accent-text); }
.outline-empty { padding: 4px 10px; font-size: 12px; color: var(--text-3); line-height: 1.6; }

/* over file:// the note's headings are unreadable, so there is no outline to show */
.no-outline .outline, .no-outline #outline-btn { display: none !important; }

.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-backdrop); }
.only-mobile, .only-mobile-block { display: none !important; }

/* ---------- shortcuts sheet ---------- */
.keys-scrim { z-index: var(--z-modal-backdrop); }
.keys {
  position: fixed; z-index: var(--z-modal); top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 32px)); padding: 6px 6px 10px; border-radius: 10px;
  background: var(--raised); box-shadow: var(--shadow);
}
.keys-head { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px 0 12px; font-size: 14px; font-weight: 600; }
.keys-head span:nth-child(2) { flex: 1; }
.keys-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--tint); color: var(--accent-text); }
.keys dl { margin: 0; padding: 2px 6px 0; }
.keys dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 0 6px; border-top: 1px solid var(--line); }
.keys dl > div:first-child { border-top: 0; }
.keys dt { color: var(--text-2); font-size: 13px; }
.keys dd { margin: 0; display: inline-flex; align-items: center; gap: 4px; }
.keys .or { font-size: 11.5px; color: var(--text-3); margin: 0 3px; }

/* ---------- share: selection pill + toast ---------- */
.sel-pill {
  position: fixed; z-index: var(--z-chrome); left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 10px; border: 0; border-radius: 15px; cursor: pointer;
  background: var(--tip-bg); color: var(--tip-fg); font-size: 12.5px; font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2); animation: tip-in .12s var(--e-quart);
}
.sel-pill svg { width: 14px; height: 14px; }
.sel-pill:hover { filter: brightness(1.15); }
.toast {
  position: fixed; z-index: var(--z-toast); left: 50%; bottom: 28px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  padding: 9px 14px; border-radius: 10px; background: var(--tip-bg); color: var(--tip-fg);
  font-size: 13px; box-shadow: 0 4px 8px rgba(0, 0, 0, .2); animation: toast-in .18s var(--e-quart);
}
.toast svg { width: 15px; height: 15px; flex: none; color: #7ee0a1; }
.toast.warn svg { color: #ffcf5c; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }

/* ---------- edge handles (one component, mirrored) ----------
   app.js writes --near (0 at 160px away … 1 on the handle, eased) and --dy (vertical drift toward the pointer).
   Every visual reaction below is a function of those two, so the handle responds continuously, never on a threshold. */
.edge-handle {
  --near: 0; --dy: 0px; --rest: .4; --dir: 1;
  position: fixed; z-index: var(--z-edge); top: calc(50% - 40px); width: 24px; height: 80px;
  display: none; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-2);
  opacity: calc(var(--rest) + var(--near) * (1 - var(--rest)));
  transform: translateY(var(--dy));
  transition: opacity .1s var(--e-quart);
}
.edge-handle[data-side="left"] { left: 0; }
/* inset from the window edge so it never sits on the note's overlay scrollbar */
.edge-handle[data-side="right"] { right: 14px; --dir: -1; }
.edge-handle:focus-visible { outline: none; }
.edge-handle:focus-visible .eh-rail { box-shadow: 0 0 0 2px var(--accent); }
@media (min-width: 769px) { .left-closed #expand-left { display: block; } }
@media (min-width: 1280px) { .right-closed #expand-right { display: block; } }
.no-outline #expand-right { display: none !important; }
/* while its panel peeks, the handle steps out of sight but stays on top, so clicking where it was pins the panel */
.peek-left #expand-left, .peek-right #expand-right { z-index: var(--z-edge-top); opacity: 0; transition-duration: .08s; }
.eh-rail, .eh-chev, .eh-label { position: absolute; top: 50%; pointer-events: none; }
.eh-label { display: none; }

/* calm: a slim pill on a rail, a faint chevron appears as you near it; gentle drift */
.eh-rail {
  width: 6px; height: 44px; margin-top: -22px; border-radius: 3px;
  background: color-mix(in srgb, var(--text-2) calc(var(--near) * 100%), var(--text-3));
  transform: translateX(calc(var(--near) * 3px * var(--dir))) scale(calc(1 + var(--near) * .34), calc(1 + var(--near) * .16));
}
[data-side="left"] .eh-rail { left: 4px; transform-origin: left center; }
[data-side="right"] .eh-rail { right: 4px; transform-origin: right center; }
/* the chevron is faintly there at rest, so the right pill never reads as a scrollbar thumb */
.eh-chev { width: 12px; height: 12px; margin-top: -6px; opacity: calc(.4 + var(--near) * .6); }
[data-side="left"] .eh-chev { left: 13px; transform: translateX(calc(var(--near) * 2px - 2px)); }
[data-side="right"] .eh-chev { right: 13px; transform: translateX(calc(2px - var(--near) * 2px)) scaleX(-1); }

/* ---------- medium: outline becomes a popover ---------- */
@media (max-width: 1279px) {
  #rz-right { display: none; }
  .outline, .right-closed .outline {
    position: fixed; top: calc(var(--tb-h) + 4px); right: 12px; bottom: auto; z-index: var(--z-sheet); width: 288px; max-height: min(70vh, 560px);
    border: 0; border-radius: 8px; box-shadow: var(--shadow); background: var(--raised); display: none;
  }
  .outline.open { display: block; }
  #outline-btn { display: inline-grid; }
  .outline-inner { position: static; width: auto; max-height: inherit; }
  .o-bar { margin: -4px 16px 6px; }
  #pin-right { display: none; }
  #outline-close { display: inline-grid; }
}

/* ---------- mobile ---------- */
@media (max-width: 768px) {
  .only-mobile { display: inline-grid !important; }
  .only-mobile-block { display: block !important; }
  .only-wide { display: none !important; }
  .side, .left-closed .side {
    position: fixed; z-index: var(--z-sheet); top: 0; bottom: 0; left: 0; width: min(86vw, 320px);
    transform: translateX(-100%); visibility: hidden; transition: transform .165s var(--e-quart), visibility .165s;
    border-right: 0;
  }
  .side.open { transform: none; visibility: visible; box-shadow: var(--shadow); transition-duration: .22s; }
  .side-inner, .left-closed .side .side-inner { width: 100%; opacity: 1; visibility: inherit; }
  .side-head { height: 56px; padding: 0 8px 0 16px; }
  .ib { width: 40px; height: 40px; }
  .row { min-height: 40px; font-size: 14px; }
  .sg-btn { width: 40px; height: 40px; margin: -10px -12px -10px 0; }
  .sg-btn + .sg-btn { margin-left: 12px; }
  .menu { width: min(260px, calc(100vw - 16px)); }
  .mitem { height: 42px; font-size: 14px; }
  .sbox { height: 40px; }
  .tg { width: 34px; height: 32px; }
  .hit { padding-top: 9px; padding-bottom: 9px; font-size: 13.5px; }
  .more { min-height: 40px; }
  :root { --tb-h: 52px; }
  .topbar { padding: 0 4px; gap: 2px; }
  .tb-brand { display: none; }
  .bar-label { margin-left: 4px; }
  .side-head .brand { display: flex; flex: none; }
  .side-head .xs-sep { display: inline; }
  .side-head .xsite { display: inline-flex; margin-right: auto; }
  .side-head .tabs { flex: none; }
  .toolbar .ib { width: 40px; height: 40px; }
  .ver { height: 36px; }
  .ver .seg { height: 32px; padding: 0 10px; }
  .only-mobile-flex { display: flex !important; }
  .mitem kbd { display: none; }
  .head-body { padding: 2px 0 12px; }
  .eyebrow { display: none; }
  .eyebrow-m { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
  .doc-top { display: flex; margin-bottom: 6px; }
  .head-body h1 { font-size: 20px; }
  .lede { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .meta { gap: 6px 12px; }
  .rel-k { min-width: 0; }
  .mention { min-height: 32px; }
  .outline, .right-closed .outline {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; z-index: var(--z-sheet); max-height: 72vh;
    border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom);
  }
  .outline-inner { max-height: 72vh; }
  .outline-inner::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto 0; flex: none; }
  .outline-list button { padding-top: 9px; padding-bottom: 9px; font-size: 14px; }
  .outline-list .l3 button { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* the owner reads with Reduce Motion on and still asked for the outline glide (2026-10-29) */
  .o-mark:not(.still) { transition: transform .2s var(--e-quart), width .2s var(--e-quart), height .2s var(--e-quart), opacity .15s !important; }
  /* and asked for the site switch to animate too (2026-10-30) */
  .xsite { transition: background-color .2s var(--ease) !important; }
  .xsite .xl { transition: grid-template-columns .26s var(--ease), opacity .2s var(--ease) !important; }
  /* and the sidebar title bubble (2026-10-30) */
  .tip.tip-side { animation: tip-side-in .14s var(--e-quart) !important; }
  .tip.tip-side.glide { transition: top .14s var(--e-quart) !important; }
}