/* comb — the pages of Beeons, in the Beeons "look beyond" language (as the Beeons site and hive): pure black and white
   surfaces, hairlines, glass pills, and the brand colours (blue, violet, yellow) only as soft glows. Compact: a work tool,
   with a comfortable reading width for documents. Light and dark themes (html[data-theme], set before the first paint by
   js/theme.js). No inline style anywhere (strict CSP). Overflow rule: every grid/flex child that holds text gets
   min-width: 0, titles truncate with a title tooltip, wide content (tables, boards, calendars) scrolls in its own frame.
   Editor styles (Tiptap content, menus, carets) are in frontend/src/style.css. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-latin-wght-normal-7660bd9909fb097989b19471a75f1b7a.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-latin-wght-normal-928f4210aa4859fcfdb853d2c6329589.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal-79936b18df9f734fb6b0a256b20d36b4.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-500-normal-b1c8a895f5fd3fe6cbf5b4cf95c58d87.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Brand palette: light only, never surfaces */
  --beeons-blue: #0A65E7; --beeons-violet: #8A2AE3; --beeons-yellow: #FFD600;
  --radius: 14px; --radius-sm: 10px;
  --sidebar-w: 224px; --topbar-h: 48px; --doc: 760px; --pad: 20px;
  --head: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --body: "Jost", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
@media (min-width: 720px) { :root { --pad: 40px; } }
@media (min-width: 1200px) { :root { --sidebar-w: 264px; } }
:root, [data-theme="dark"] {
  --ink: #000; --panel: #0A0A0A; --panel-2: #111111; --panel-3: #1A1A1A;
  --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .18);
  --text: #F1F7FE; --muted: #A1A4A5; --faint: #8A8D90;
  --fg: #FFFFFF; --on-fg: #000000; --fg-hover: #E8E8E8; --tint: 255, 255, 255;
  --header-bg: rgba(0, 0, 0, .66); --tile-top: #1A1A1A; --tile-bottom: #050505; --heading-end: rgba(255, 255, 255, .58);
  /* Meaning colours (text >= 4.5:1 on the surfaces) */
  --ok: #4ADE80; --ko: #FF8A7A; --warn: #FFC34D;
  --link: #8FB8FF; --code: #FF9EB0; --mention: #8FB8FF; --mention-bg: rgba(10, 101, 231, .18); --select-bg: rgba(10, 101, 231, .22);
  --glow-a: rgba(138, 42, 227, .20); --glow-b: rgba(10, 101, 231, .20); --glow-c: rgba(255, 214, 0, .06); --nav-glow: .24;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .9); --scrim: rgba(0, 0, 0, .6);
  /* Option chips: tinted surface + light text */
  --chip-gray: #2A2A2A; --chip-blue: #12305E; --chip-green: #133D29; --chip-yellow: #453A00; --chip-orange: #512B0C;
  --chip-red: #561923; --chip-violet: #3A1863; --chip-pink: #551744; --chip-text: #F1F7FE;
  /* People colours (avatars, presence, carets): pastels on dark, black label */
  --c0: #FFD600; --c1: #8FB8FF; --c2: #C9A0FF; --c3: #7EE2B8; --c4: #FFB27A; --on-c: #000;
  color-scheme: dark;
}
[data-theme="light"] {
  --ink: #FFFFFF; --panel: #F7F8F9; --panel-2: #F0F1F3; --panel-3: #E7E9EC;
  --line: rgba(0, 0, 0, .09); --line-strong: rgba(0, 0, 0, .16);
  --text: #0F0B0A; --muted: #5B6168; --faint: #6B7178;
  --fg: #000000; --on-fg: #FFFFFF; --fg-hover: #222222; --tint: 0, 0, 0;
  --header-bg: rgba(255, 255, 255, .76); --tile-top: #FFFFFF; --tile-bottom: #ECEDEF; --heading-end: rgba(15, 11, 10, .62);
  --ok: #157F3D; --ko: #C2332B; --warn: #8F6200;
  --link: #0A58CC; --code: #B4234A; --mention: #0A58CC; --mention-bg: rgba(10, 101, 231, .10); --select-bg: rgba(10, 101, 231, .14);
  --glow-a: rgba(138, 42, 227, .10); --glow-b: rgba(10, 101, 231, .10); --glow-c: rgba(255, 214, 0, .12); --nav-glow: .1;
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, .28); --scrim: rgba(15, 11, 10, .35);
  --chip-gray: #E7E9EC; --chip-blue: #DCE8FC; --chip-green: #DDF3E5; --chip-yellow: #FFF3B8; --chip-orange: #FFE4D2;
  --chip-red: #FCDCDA; --chip-violet: #EEDFFC; --chip-pink: #FBDDF0; --chip-text: #0F0B0A;
  /* People colours on white: deep tones (caret >= 3:1), white label */
  --c0: #7A5400; --c1: #0A58CC; --c2: #7A22CC; --c3: #157F3D; --c4: #B5470B; --on-c: #FFF;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 .9375rem/1.5 var(--body); -webkit-font-smoothing: antialiased;
  isolation: isolate; overflow-x: clip; }
a { color: var(--text); text-underline-offset: 3px; text-decoration-color: rgba(var(--tint), .35); }
a:hover { color: var(--fg); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--head); line-height: 1.2; letter-spacing: -.015em; color: var(--fg); }
p { margin: 0 0 .75em; }
strong { font-weight: 600; }
img, svg { max-width: 100%; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.muted { color: var(--muted); } .small { font-size: .8125rem; }
.ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { color: var(--muted); font-size: .875rem; padding: 6px 0; margin: 0; }
.lead { color: var(--muted); font-size: .95rem; max-width: 62ch; }
.lead .ico { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; }
.eyebrow { font: 400 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
kbd { font: 500 .64rem/1 var(--mono); border: 1px solid var(--line-strong); border-radius: 5px; padding: 3px 5px; color: var(--muted); background: rgba(var(--tint), .04); }
[hidden] { display: none !important; }
.ico { display: block; width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
  font: 500 .66rem/1 var(--mono); letter-spacing: 0; text-transform: none; background: rgba(var(--tint), .1); color: var(--muted); vertical-align: middle; flex-shrink: 0; }
[data-theme="dark"] .theme-icon-moon, [data-theme="light"] .theme-icon-sun { display: none; }
.theme-toggle span { display: contents; }
::selection { background: var(--select-bg); }

/* ---------- App layout ---------- */
/* Faint brand glow in the top right corner of every screen */
body.app::before { content: ""; position: fixed; z-index: -1; pointer-events: none; top: -35vh; right: -25vw; width: 80vw; height: 85vh;
  background: radial-gradient(40% 42% at 62% 42%, var(--glow-a), transparent 70%), radial-gradient(36% 38% at 36% 56%, var(--glow-b), transparent 70%),
    radial-gradient(22% 24% at 52% 82%, var(--glow-c), transparent 70%); }
body.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.main { min-width: 0; display: flex; flex-direction: column; }

/* Sidebar: off-canvas drawer below 900px, narrower from 900 to 1199px, full from 1200px */
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(288px, 86vw); display: flex; flex-direction: column; gap: 2px;
  padding: 10px 8px 8px; background: var(--ink); border-right: 1px solid var(--line); overflow: hidden;
  transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility .22s; }
.sidebar.open { transform: none; visibility: visible; box-shadow: var(--shadow); }
body.app:has(.sidebar.open)::after { content: ""; position: fixed; inset: 0; z-index: 45; background: var(--scrim); backdrop-filter: blur(2px); }
@media (min-width: 900px) {
  body.app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: 100vh; width: auto; z-index: 20; transform: none; visibility: visible; transition: none; box-shadow: none;
    background: linear-gradient(180deg, rgba(var(--tint), .025), transparent 40%), var(--ink); }
  .menu-btn { display: none !important; }
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 8px 8px; min-width: 0; }
.logo, .auth-logo { display: flex; align-items: center; gap: 9px; color: var(--fg); text-decoration: none; font: 800 1.25rem/1 var(--head); letter-spacing: -.035em; margin: 0; }
.logo:hover { color: var(--fg); }
.logo-mark { width: 22px; height: 25px; color: var(--fg); flex-shrink: 0; filter: drop-shadow(0 4px 14px rgba(10, 101, 231, .45)) drop-shadow(0 2px 10px rgba(138, 42, 227, .35)); }
.to-hive { display: inline-flex; align-items: center; gap: 4px; font: 500 .68rem/1 var(--mono); color: var(--muted); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 8px; background: rgba(var(--tint), .04); }
.to-hive .ico { width: 11px; height: 11px; }
.to-hive:hover { color: var(--fg); border-color: rgba(var(--tint), .3); }
.side-search { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 6px 8px 6px 10px; margin-bottom: 4px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(var(--tint), .05); color: var(--muted); font: inherit; font-size: .875rem; cursor: pointer; text-align: left; }
.side-search .ico { width: 16px; height: 16px; }
.side-search kbd { margin-left: auto; }
.side-search:hover { color: var(--fg); border-color: var(--line-strong); }
.side-actions { display: grid; gap: 1px; }
.side-action { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 5px 10px; border-radius: 10px;
  color: var(--muted); background: none; border: 0; font: inherit; font-size: .875rem; text-decoration: none; cursor: pointer; text-align: left; min-width: 0; }
.side-action .ico { width: 17px; height: 17px; }
.side-action:hover { background: rgba(var(--tint), .06); color: var(--fg); }
.side-action.active { color: var(--fg); background: rgba(var(--tint), .07); box-shadow: inset 0 0 0 1px var(--line); }
.side-action.active::before, .tree-item.current > .tree-row::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 160% at 0% 50%, rgba(10, 101, 231, var(--nav-glow)), transparent 65%), radial-gradient(70% 140% at 100% 50%, rgba(138, 42, 227, calc(var(--nav-glow) * .6)), transparent 70%); }
.side-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px 8px; scrollbar-width: thin; }
.side-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 14px 0 3px; padding: 0 2px 0 10px; min-height: 24px;
  font: 500 .64rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.side-title-label { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side-title-label .ico { width: 13px; height: 13px; }
.side-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; border: 0; background: none;
  color: var(--muted); cursor: pointer; padding: 0; flex-shrink: 0; }
.side-add .ico { width: 14px; height: 14px; }
.side-add:hover { background: rgba(var(--tint), .08); color: var(--fg); }
.side-empty { color: var(--faint); font-size: .78rem; padding: 2px 10px 2px 34px; margin: 0; list-style: none; }
.tree .side-empty { padding-left: 30px; }

/* Page tree */
.tree { list-style: none; margin: 0; padding: 0; }
.tree .tree { padding-left: 12px; margin-left: 10px; border-left: 1px solid var(--line); }
.tree-row { position: relative; display: flex; align-items: center; gap: 0; min-height: 30px; border-radius: 9px; padding-right: 2px; min-width: 0; }
.tree-row:hover { background: rgba(var(--tint), .06); }
.tree-item.current > .tree-row { background: rgba(var(--tint), .07); box-shadow: inset 0 0 0 1px var(--line); }
.tree-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 26px; flex-shrink: 0; background: none; border: 0;
  color: var(--faint); cursor: pointer; border-radius: 6px; padding: 0; }
.tree-toggle .ico { width: 13px; height: 13px; transition: transform .15s; }
.tree-toggle[aria-expanded="true"] .ico { transform: rotate(90deg); }
.tree-toggle:hover { color: var(--fg); background: rgba(var(--tint), .08); }
.tree-toggle.empty { opacity: .35; }
.tree-link { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 4px 2px; color: var(--muted); text-decoration: none; font-size: .86rem; }
.tree-item.current > .tree-row .tree-link, .tree-link:hover { color: var(--fg); }
.tree-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; font-size: .95rem; line-height: 1; }
.tree-icon .ico { width: 15px; height: 15px; }
.tree-add { position: relative; display: inline-flex; align-items: center; justify-content: center; opacity: 0; background: none; border: 0; color: var(--muted);
  cursor: pointer; width: 24px; height: 24px; border-radius: 7px; padding: 0; flex-shrink: 0; }
.tree-add .ico { width: 14px; height: 14px; }
.tree-row:hover .tree-add, .tree-add:focus-visible { opacity: 1; }
@media (hover: none) { .tree-add { opacity: .7; } }
.tree-add:hover { background: rgba(var(--tint), .1); color: var(--fg); }
.drop-inside { outline: 1px dashed var(--fg); }
.drop-before { box-shadow: inset 0 2px 0 var(--beeons-blue) !important; }
.drop-after { box-shadow: inset 0 -2px 0 var(--beeons-blue) !important; }

.sidebar-foot { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.foot-links { display: flex; gap: 2px; justify-content: space-between; padding: 0 2px; }
.side-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 0; background: none;
  color: var(--muted); cursor: pointer; padding: 0; text-decoration: none; flex-shrink: 0; }
.side-icon .ico { width: 17px; height: 17px; }
.side-icon:hover, .side-icon.active { background: rgba(var(--tint), .08); color: var(--fg); }
.me { display: flex; align-items: center; gap: 8px; padding: 4px 2px 0 8px; min-width: 0; }
.me-name { flex: 1; min-width: 0; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me form { margin: 0; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 6px; height: var(--topbar-h); padding: 0 10px;
  background: var(--header-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .topbar { padding: 0 16px; gap: 8px; } }
.topbar-title { margin: 0; font: 600 .875rem/1 var(--head); color: var(--muted); }
@media (min-width: 900px) { .topbar-title { display: none; } .topbar:not(:has(.crumbs)) { display: none; } }
.crumbs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; font-size: .84rem; color: var(--muted); overflow: hidden; white-space: nowrap; }
.crumbs a { min-width: 0; max-width: 22ch; flex: 0 1 auto; color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis;
  padding: 4px 6px; border-radius: 7px; }
.crumbs a:last-of-type { max-width: none; flex-shrink: 1; color: var(--text); }
.crumbs a:hover { color: var(--fg); background: rgba(var(--tint), .06); }
.crumb-sep { display: inline-flex; flex-shrink: 0; color: var(--faint); }
.crumb-sep .ico { width: 12px; height: 12px; }
/* Narrow screens: only the current page in the breadcrumb */
@media (max-width: 719.98px) { .crumbs a:not(:last-of-type), .crumb-sep { display: none; } }
.topbar-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; }
@media (min-width: 720px) { .topbar-tools { gap: 4px; } }
.save-status { display: inline-flex; align-items: center; gap: 6px; font: 400 .7rem/1 var(--mono); color: var(--muted); white-space: nowrap; margin-right: 4px; }
.save-status:empty { display: none; }
.save-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.save-status[data-state="saving"]::before, .save-status[data-state="connecting"]::before { background: var(--warn); }
.save-status[data-state="offline"] { color: var(--ko); }
.save-status[data-state="offline"]::before { background: var(--ko); }
/* Status: text hidden (still read aloud) below 1100px, only the coloured dot stays */
@media (max-width: 1099.98px) {
  .save-status { width: 18px; height: 18px; justify-content: center; overflow: hidden; color: transparent !important; margin: 0; }
  .save-status::before { margin: 0 5px; }
}
.badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center;
  font: 500 .6rem/1 var(--mono); background: var(--fg); color: var(--on-fg); border-radius: 999px; box-shadow: 0 0 0 2px var(--ink); }

/* ---------- Buttons and forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--fg); background: var(--fg); color: var(--on-fg); font: 500 .875rem/1 var(--body); text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background .15s, box-shadow .15s, border-color .15s; min-width: 0; }
.btn .ico { width: 16px; height: 16px; }
.btn:hover { color: var(--on-fg); background: var(--fg-hover); box-shadow: 0 0 0 4px rgba(var(--tint), .08); }
.btn-glass, .btn-ghost { background: rgba(var(--tint), .08); color: var(--text); border-color: var(--line-strong); backdrop-filter: blur(8px); }
.btn-glass:hover, .btn-ghost:hover { background: rgba(var(--tint), .15); color: var(--fg); }
.btn-primary { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }
.btn-danger, .danger { color: var(--ko) !important; }
.btn-sm { min-height: 32px; padding: 5px 12px; font-size: .8125rem; }
.btn-lg { min-height: 44px; padding: 10px 20px; font-size: .95rem; }
.btn-block { width: 100%; }
.btn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 0;
  background: none; color: var(--muted); cursor: pointer; padding: 0; flex-shrink: 0; text-decoration: none; transition: background .15s, color .15s; }
.icon-btn:hover { background: rgba(var(--tint), .08); color: var(--fg); }
.icon-btn-sm { width: 28px; height: 28px; } .icon-btn-sm .ico { width: 15px; height: 15px; }
.fav-btn[aria-pressed="true"] { color: var(--beeons-yellow); }
.fav-btn[aria-pressed="true"] .ico { fill: currentColor; filter: drop-shadow(0 0 8px rgba(255, 214, 0, .45)); }
[data-theme="light"] .fav-btn[aria-pressed="true"] { color: #8F6200; }
.tool-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
  background: none; color: var(--muted); font: inherit; font-size: .8125rem; cursor: pointer; white-space: nowrap; }
.tool-btn .ico { width: 15px; height: 15px; }
.tool-btn:hover { background: rgba(var(--tint), .07); color: var(--fg); }
.tool-btn.on { color: var(--fg); border-color: var(--line-strong); background: rgba(var(--tint), .06); }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mini-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 3px 8px; border-radius: 999px; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; }
.mini-btn .ico { width: 14px; height: 14px; }
.mini-btn:hover { background: rgba(var(--tint), .08); color: var(--fg); }
.mini-btn.danger:hover { background: rgba(255, 138, 122, .12); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 14px; }
input, select, textarea { font: inherit; font-size: .875rem; color: var(--text); background: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 6px 10px; min-height: 34px; max-width: 100%; min-width: 0; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%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 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(var(--tint), .12); }
input[type="checkbox"] { min-height: 0; width: 16px; height: 16px; accent-color: var(--fg); }
.field { display: grid; gap: 5px; margin: 10px 0; }
.field label { font-size: .8125rem; font-weight: 600; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .875rem; }
.checks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.copy { width: 100%; font-family: var(--mono); font-size: .75rem; }
.flash { border-radius: 10px; padding: 9px 12px; border: 1px solid; margin: 0; font-size: .875rem; }
.flash-ok { background: rgba(74, 222, 128, .08); border-color: rgba(74, 222, 128, .35); }
.flash-ko { background: rgba(255, 138, 122, .08); border-color: rgba(255, 138, 122, .4); }

/* ---------- Popovers, dialogs, panels, toasts (always above the content) ---------- */
.menu-popover { position: relative; }
.menu-popover summary { list-style: none; cursor: pointer; }
.menu-popover summary::-webkit-details-marker { display: none; }
.popover-body { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 240px; max-width: calc(100vw - 20px); max-height: calc(100vh - 80px);
  overflow-y: auto; background: var(--ink); border: 1px solid var(--line-strong); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); display: grid; gap: 1px; }
.view-tabs .popover-body { left: 0; right: auto; min-width: 190px; }
.popover-body button, .popover-body a { display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 0; color: var(--text);
  font: inherit; font-size: .84rem; padding: 7px 10px; border-radius: 9px; cursor: pointer; text-decoration: none; min-width: 0; }
.popover-body .ico { width: 16px; height: 16px; color: var(--muted); }
.popover-body button:hover, .popover-body a:hover { background: rgba(var(--tint), .07); color: var(--fg); }
.popover-body button:hover .ico, .popover-body a:hover .ico { color: var(--fg); }
.popover-body .danger .ico { color: var(--ko); }
.popover-body hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; width: auto; }
dialog { color: var(--text); }
dialog::backdrop { background: var(--scrim); backdrop-filter: blur(6px); }
.dialog { background: var(--ink); border: 1px solid var(--line-strong); border-radius: 20px; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px);
  padding: 18px 20px 20px; box-shadow: var(--shadow), 0 40px 120px -50px rgba(10, 101, 231, .35); overflow-y: auto; }
.dialog[open] { animation: dialog-in .2s cubic-bezier(.22, .61, .36, 1); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.dialog-sm { width: min(420px, calc(100vw - 24px)); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dialog-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font: 700 1.1rem/1.25 var(--head); letter-spacing: -.02em; min-width: 0; }
.dialog-head h2 .ico { width: 18px; height: 18px; color: var(--muted); }
.dialog h3 { font: 600 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.side-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); z-index: 55; background: var(--ink); border-left: 1px solid var(--line-strong);
  padding: 12px 16px 20px; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow); }
/* From 720px the panel opens below the top bar, so its actions (comments, versions, share) stay reachable */
@media (min-width: 720px) { .side-panel { top: var(--topbar-h); z-index: 25; } }
.side-panel .dialog-head { position: sticky; top: -12px; z-index: 1; background: var(--ink); margin: -12px -16px 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 24px); }
.toast { margin: 0; background: var(--fg); color: var(--on-fg); border-radius: 999px; padding: 9px 16px; font-size: .84rem; box-shadow: var(--shadow); text-align: center; }
.toast-ko { background: var(--ko); color: var(--ink); }
.palette { background: var(--ink); border: 1px solid var(--line-strong); border-radius: 20px; width: min(640px, calc(100vw - 24px)); padding: 0; margin-top: 12vh;
  box-shadow: var(--shadow), 0 40px 120px -50px rgba(138, 42, 227, .4); }
.palette-box { display: grid; }
.palette-field { display: flex; align-items: center; gap: 10px; padding: 4px 16px; border-bottom: 1px solid var(--line); }
.palette-field > .ico { color: var(--muted); }
.palette-field input { flex: 1; border: 0; border-radius: 0; font-size: 1rem; padding: 12px 0; background: transparent; min-height: 48px; }
.palette-field input:focus { box-shadow: none; }
.palette-results { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.palette-results button { display: flex; gap: 11px; align-items: flex-start; width: 100%; background: none; border: 0; color: var(--text); text-align: left;
  padding: 8px 10px; border-radius: 11px; font: inherit; font-size: .875rem; cursor: pointer; min-width: 0; }
.palette-results button > span:last-child { min-width: 0; flex: 1; }
.palette-results strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-results li.selected button, .palette-results button:hover { background: rgba(var(--tint), .08); }
.palette-results small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: .78rem; }
.palette-empty { color: var(--muted); padding: 12px; font-size: .875rem; list-style: none; }
.palette-hint { margin: 0; padding: 9px 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: .74rem; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

/* ---------- Page ---------- */
.cover { position: relative; height: clamp(120px, 22vw, 200px); background: var(--panel-2); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.cover-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-change { position: absolute; right: 16px; bottom: 12px; opacity: 0; }
.cover:hover .cover-change, .cover-change:focus-visible { opacity: 1; }
@media (hover: none) { .cover-change { opacity: 1; } }
.gradient-honey { background: linear-gradient(120deg, #FFD600, #FF9E00); }
.gradient-night { background: linear-gradient(120deg, #0F0B0A, #0A65E7); }
.gradient-violet { background: linear-gradient(120deg, #8A2AE3, #0A65E7); }
.gradient-blue { background: linear-gradient(120deg, #0A65E7, #5BC8FF); }
.gradient-dawn { background: linear-gradient(120deg, #8A2AE3, #FF7A8A, #FFD600); }
.gradient-forest { background: linear-gradient(120deg, #0F3D2E, #3DDC84); }
.gradient-none { background: radial-gradient(60% 120% at 20% 0%, rgba(10, 101, 231, .35), transparent 70%), radial-gradient(60% 120% at 90% 0%, rgba(138, 42, 227, .3), transparent 70%), var(--panel-3); }
.page { width: 100%; max-width: calc(var(--doc) + 2 * var(--pad)); margin: 0 auto; padding: 22px var(--pad) 120px; min-width: 0; }
.page-wide { max-width: calc(1100px + 2 * var(--pad)); }
.page.full-width { max-width: none; }
.page-meta { margin-top: 4px; min-width: 0; }
.page-icon { font-size: 3rem; line-height: 1; background: none; border: 0; padding: 6px; border-radius: 14px; cursor: pointer; color: inherit; }
.page-icon:hover:not(:disabled) { background: rgba(var(--tint), .06); }
.cover + .page .page-icon { margin-top: -50px; background: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.page-icon.no-icon { display: none; }
.page-icon:disabled { cursor: default; }
.page-tools { display: flex; flex-wrap: wrap; gap: 4px; opacity: 0; transition: opacity .15s; min-height: 30px; margin-left: -10px; }
.page-meta:hover .page-tools, .page-tools:focus-within, .page:focus-within .page-tools { opacity: 1; }
@media (hover: none) { .page-tools { opacity: 1; } }
.page-title, .page-title-static { display: block; width: 100%; font: 800 clamp(1.85rem, 3.6vw, 2.6rem)/1.12 var(--head); letter-spacing: -.035em; color: var(--fg);
  background: none; border: 0; padding: 0 0 .06em; margin: 4px 0 16px; resize: none; overflow: hidden; overflow-wrap: anywhere; min-height: 0; border-radius: 0; }
.page-title-static { background: linear-gradient(180deg, var(--fg) 35%, var(--heading-end)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-title:focus { box-shadow: none; }
.page-title::placeholder { color: var(--faint); }
.fallback { display: none; }
.no-js .fallback { display: block; }
.banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 9px var(--pad); font-size: .875rem;
  background: rgba(255, 138, 122, .08); border-bottom: 1px solid rgba(255, 138, 122, .35); }
.banner > .ico { color: var(--ko); }
.banner-text { flex: 1 1 200px; min-width: 0; }
.block-title { display: flex; align-items: center; gap: 8px; font: 500 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; }
.block-title .ico { width: 14px; height: 14px; }
.subpages { border-top: 1px solid var(--line); margin-top: 32px; }
.subpage-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.subpage-list a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; color: var(--text); text-decoration: none; min-width: 0;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--tint), .03), rgba(var(--tint), .01)); font-size: .875rem; }
.subpage-list a:hover { border-color: var(--line-strong); color: var(--fg); }
.pg-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; font-size: 1rem; line-height: 1; color: var(--muted); }
.pg-icon .ico { width: 16px; height: 16px; }
.presence { display: flex; align-items: center; margin-right: 4px; }
.presence-dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font: 700 .6rem/1 var(--head);
  color: var(--on-c); background: var(--c0); box-shadow: 0 0 0 2px var(--ink); margin-left: -6px; }
.presence-dot:first-child { margin-left: 0; }
.presence-dot[data-colour="1"] { background: var(--c1); } .presence-dot[data-colour="2"] { background: var(--c2); }
.presence-dot[data-colour="3"] { background: var(--c3); } .presence-dot[data-colour="4"] { background: var(--c4); }
@media (max-width: 559.98px) { .presence { display: none !important; } }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font: 700 .62rem/1 var(--head);
  color: #000; flex-shrink: 0; background: #FFD600; box-shadow: 0 0 0 1px var(--line-strong); }
.avatar-sm { width: 28px; height: 28px; }
.avatar-c1 { background: #8FB8FF; } .avatar-c2 { background: #C9A0FF; } .avatar-c3 { background: #7EE2B8; } .avatar-c4 { background: #FFB27A; }

/* Read-only rendering (public link, print, no JavaScript): same look as the editor */
.prose { overflow-wrap: anywhere; font-size: 1rem; line-height: 1.7; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--fg); letter-spacing: -.025em; font-weight: 700; }
.prose h2 { font-size: 1.5rem; margin: 1.6em 0 .4em; } .prose h3 { font-size: 1.22rem; margin: 1.4em 0 .3em; } .prose h4 { font-size: 1.05rem; margin: 1.2em 0 .3em; }
.prose p { margin: .35em 0; }
.prose a { color: var(--link); }
.prose blockquote { margin: .6em 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--fg); color: var(--text); }
.prose pre { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font: .84rem/1.6 var(--mono); }
.prose code { font: .86em var(--mono); background: rgba(var(--tint), .08); border-radius: 5px; padding: 1px 5px; color: var(--code); }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line-strong); margin: 1.4em 0; }
.prose img { max-width: 100%; border-radius: 12px; }
.prose figure { margin: 1em 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.prose th, .prose td { border: 1px solid var(--line-strong); padding: 6px 10px; text-align: left; vertical-align: top; }
.prose th { background: rgba(var(--tint), .04); font-weight: 600; }
.prose .tasks { list-style: none; padding-left: 0; }
.prose .task { display: flex; gap: 8px; } .prose .task.done { color: var(--muted); text-decoration: line-through; }
.callout { display: flex; gap: 12px; background: linear-gradient(180deg, rgba(var(--tint), .05), rgba(var(--tint), .02)); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; margin: .6em 0; }
.callout-icon { font-size: 1.15rem; line-height: 1.5; }
.page-link a, .file-link a { display: inline-flex; gap: 8px; align-items: center; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); }
.mention { color: var(--mention); background: var(--mention-bg); border-radius: 5px; padding: 0 4px; font-weight: 500; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.public { min-height: 100vh; background:
  radial-gradient(50% 40% at 85% 0%, var(--glow-a), transparent 70%), radial-gradient(40% 30% at 10% 0%, var(--glow-b), transparent 70%), var(--ink); }
.public-page { padding-top: 64px; }
.public-icon { font-size: 3rem; margin: 0; line-height: 1; }
.public-foot { display: flex; align-items: center; gap: 8px; margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--line); font: 400 .72rem/1 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.public-foot .logo-mark { width: 14px; height: 16px; }
@media print {
  :root, [data-theme] { --ink: #fff; --text: #111; --fg: #000; --muted: #444; --line: #ccc; --line-strong: #bbb; --panel: #f3f3f3; --tint: 0, 0, 0; --link: #111; --code: #111; }
  body, .public { background: #fff; color: #111; }
  .page-title-static { color: #000; background: none; -webkit-text-fill-color: #000; }
  .page { max-width: none; padding: 0; }
  .public-foot { display: none; }
  a { color: #111; }
}

/* ---------- Home, search, templates, trash ---------- */
.home-block { margin-bottom: 28px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.card { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; padding: 50px 14px 14px; border-radius: var(--radius); overflow: hidden;
  color: var(--text); text-decoration: none; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--tint), .035), rgba(var(--tint), .01));
  transition: border-color .2s, transform .2s, box-shadow .2s; }
.card:hover { color: var(--fg); border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 24px 50px -30px rgba(10, 101, 231, .5); }
.card-cover { position: absolute; inset: 0 0 auto 0; height: 34px; opacity: .9; }
.card .pg-icon { position: absolute; top: 18px; left: 12px; width: 34px; height: 34px; border-radius: 10px; font-size: 1.25rem; color: var(--fg);
  background: linear-gradient(180deg, var(--tile-top), var(--tile-bottom)); border: 1px solid var(--line-strong); }
.card-title { font: 600 .92rem/1.3 var(--head); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.card-meta { display: flex; align-items: center; gap: 5px; font: 400 .7rem/1 var(--mono); color: var(--muted); }
.card-meta .ico { width: 12px; height: 12px; }
.template-list { display: flex; flex-wrap: wrap; gap: 8px; }
.template-list .btn { max-width: 100%; }
.search-form { display: flex; gap: 8px; margin-bottom: 18px; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-field > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search-field input { width: 100%; min-height: 38px; padding-left: 38px; border-radius: 999px; background: rgba(var(--tint), .05); }
.result-count { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8125rem; }
.hits { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.hit { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border-radius: 12px; color: var(--text); text-decoration: none; min-width: 0; flex: 1;
  border: 1px solid transparent; }
.hit:hover { background: rgba(var(--tint), .05); border-color: var(--line); color: var(--fg); }
.hit .pg-icon { margin-top: 1px; }
.hit-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.hit-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: .8125rem; }
.hit-snippet .ico { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; }
.hit-date { font: 400 .72rem/1.4 var(--mono); }
.row-with-action { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* ---------- Sharing, comments, versions (content built by the browser code) ---------- */
.share-scope { display: flex; align-items: flex-start; gap: 10px; background: rgba(var(--tint), .04); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; font-size: .875rem; }
.share-scope .ico { width: 17px; height: 17px; margin-top: 2px; color: var(--muted); }
.share-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; } .share-add select:first-child { flex: 1 1 180px; }
.share-list, .version-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 0; }
.share-list li, .version-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.share-list li > span, .version-list li > span { min-width: 0; overflow: hidden; }
.share-list small, .version-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.version-list small { font-family: var(--mono); font-size: .7rem; }
.share-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.share-public { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--line); }
.share-public .actions { justify-content: flex-start; }
.thread { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 12px 0; background: linear-gradient(180deg, rgba(var(--tint), .03), transparent); }
.thread.resolved { opacity: .6; }
.comment { display: flex; gap: 10px; margin-bottom: 8px; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0; font-size: .84rem; }
.comment-when { font: 400 .68rem/1 var(--mono); color: var(--muted); }
.comment-text { margin: 2px 0; font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-actions, .thread-actions { display: flex; gap: 2px; margin-left: -8px; }
.comment-form { display: grid; gap: 8px; margin: 8px 0; } .comment-form textarea { width: 100%; resize: vertical; }
.comment-form .btn { justify-self: end; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; margin-bottom: 12px; }
.emoji-grid button { font-size: 1.25rem; background: none; border: 0; border-radius: 10px; padding: 6px; cursor: pointer; line-height: 1; }
.emoji-grid button:hover { background: rgba(var(--tint), .08); }
.cover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cover-swatch { height: 56px; border-radius: 12px; border: 1px solid var(--line-strong); cursor: pointer; }
.cover-swatch:hover { box-shadow: 0 0 0 3px rgba(var(--tint), .2); }

/* ---------- Databases ---------- */
.db-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; border-bottom: 1px solid var(--line);
  margin-bottom: 14px; padding-bottom: 6px; min-width: 0; }
.view-tabs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.view-tabs > a { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 11px; max-width: 220px; border-radius: 999px;
  color: var(--muted); text-decoration: none; font-size: .84rem; border: 1px solid transparent; }
.view-tabs > a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-tabs > a .ico { width: 15px; height: 15px; }
.view-tabs > a:hover { color: var(--fg); background: rgba(var(--tint), .06); }
.view-tabs > a[aria-current="page"] { color: var(--fg); background: rgba(var(--tint), .08); border-color: var(--line-strong); }
.tab-add { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 10px; border-radius: 999px; color: var(--muted); font-size: .8125rem; }
.tab-add .ico { width: 14px; height: 14px; }
.tab-add:hover { color: var(--fg); background: rgba(var(--tint), .06); }
.db-tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 719.98px) {
  .db-tools .btn-label, .share-btn .btn-label, .tab-add .btn-label, .row-with-action .btn-label, .search-form .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .share-btn, .row-with-action .btn, .search-form .btn { width: 34px; padding: 0; }
  .share-btn { border-color: transparent; background: none; }
}
@media (max-width: 1023.98px) { .share-btn .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .share-btn { width: 34px; padding: 0; } }
.db-frame { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(var(--tint), .025), transparent 120px); }
.table-wrap.db-frame { overflow: auto; overscroll-behavior-x: contain; }
.db-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .84rem; }
.db-table th, .db-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; text-align: left; vertical-align: top; min-width: 150px; max-width: 360px; }
.db-table th { background: rgba(var(--tint), .03); }
.db-table th:last-child, .db-table td:last-child { border-right: 0; min-width: 44px; width: 44px; }
.db-table tbody tr:last-child td { border-bottom: 0; }
.db-table td:first-child, .db-table th:first-child { min-width: 240px; }
.db-table tbody tr:hover td { background: rgba(var(--tint), .025); }
.db-table .add-col { text-align: center; vertical-align: middle; }
.prop-head { display: flex; align-items: center; gap: 7px; width: 100%; background: none; border: 0; color: var(--muted); font: 500 .78rem/1 var(--body);
  padding: 9px 10px; cursor: pointer; text-align: left; min-width: 0; }
.prop-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-head .ico { width: 14px; height: 14px; color: var(--faint); }
.prop-head:hover:not(:disabled) { color: var(--fg); }
.prop-head:disabled { cursor: default; }
.cell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 36px; padding: 6px 10px; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.cell:hover { background: rgba(var(--tint), .04); }
.cell:focus-visible { outline-offset: -2px; }
.cell-title { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; font-weight: 600; color: var(--text); text-decoration: none; }
.cell-title:hover { color: var(--fg); text-decoration: underline; }
.cell-title .pg-icon { width: 18px; height: 18px; }
.cell-title .pg-icon .ico { width: 14px; height: 14px; }
.cell-mono { font: 400 .78rem/1.4 var(--mono); color: var(--text); }
.cell-url { color: var(--link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.add-row-inline { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 34px; padding: 6px 12px; background: none; border: 0; border-top: 1px solid var(--line);
  color: var(--muted); font: inherit; font-size: .8125rem; cursor: pointer; text-align: left; }
.add-row-inline .ico { width: 14px; height: 14px; }
.add-row-inline:hover { color: var(--fg); background: rgba(var(--tint), .04); }
.table-wrap .empty { padding: 12px; }
tr.dragging, .db-card.dragging, li.dragging { opacity: .4; }
.chip { display: inline-block; max-width: 100%; font-size: .75rem; line-height: 1.5; border-radius: 6px; padding: 1px 8px; background: var(--chip-gray); color: var(--chip-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-gray { background: var(--chip-gray); } .chip-blue { background: var(--chip-blue); } .chip-green { background: var(--chip-green); } .chip-yellow { background: var(--chip-yellow); }
.chip-orange { background: var(--chip-orange); } .chip-red { background: var(--chip-red); } .chip-violet { background: var(--chip-violet); } .chip-pink { background: var(--chip-pink); }
.check-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong); color: transparent; }
.check-mark .ico { width: 13px; height: 13px; stroke-width: 2.6; }
.check-mark.on { background: var(--fg); border-color: var(--fg); color: var(--on-fg); }
.db-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 280px); gap: 12px; overflow-x: auto; align-items: start; padding-bottom: 12px;
  overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.db-board > .empty { grid-column: 1 / -1; }
.db-column { display: grid; gap: 6px; min-width: 0; padding: 8px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--tint), .035), rgba(var(--tint), .01)); scroll-snap-align: start; }
.db-column-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 4px 4px; font-size: .84rem; min-width: 0; }
.db-cards { display: grid; gap: 6px; min-height: 40px; border-radius: 10px; }
.db-cards.over { outline: 1px dashed var(--fg); outline-offset: 2px; }
.db-card { display: grid; gap: 5px; min-width: 0; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--line); background: var(--ink); cursor: grab;
  transition: border-color .15s, box-shadow .15s; }
.db-card:hover { border-color: var(--line-strong); box-shadow: 0 14px 30px -20px rgba(10, 101, 231, .55); }
.db-card .cell { min-height: 0; padding: 0; font-size: .8125rem; }
.db-card .cell:hover { background: none; }
.db-card-title { display: flex; gap: 6px; align-items: baseline; min-width: 0; color: var(--text); text-decoration: none; font-weight: 600; font-size: .875rem; overflow-wrap: anywhere; }
.db-card-title:hover { color: var(--fg); text-decoration: underline; }
.db-column .add-row-inline { border-top: 0; border-radius: 10px; padding: 5px 8px; }
.db-calendar { min-width: 0; }
.month-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.month-bar h2 { margin: 0; font: 700 1.05rem/1.2 var(--head); letter-spacing: -.02em; text-transform: capitalize; min-width: 150px; text-align: center; }
.calendar-frame { overflow-x: auto; overscroll-behavior-x: contain; }
.calendar { width: 100%; min-width: 680px; border-collapse: collapse; table-layout: fixed; }
.calendar th { font: 500 .66rem/1 var(--mono); letter-spacing: .1em; color: var(--muted); padding: 8px; text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.calendar td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 104px; vertical-align: top; padding: 4px; min-width: 0; overflow: hidden; }
.calendar td:last-child { border-right: 0; } .calendar tr:last-child td { border-bottom: 0; }
.calendar td.out { background: rgba(var(--tint), .02); color: var(--faint); }
.calendar td.today .day-number { background: var(--fg); color: var(--on-fg); border-radius: 50%; box-shadow: 0 0 14px rgba(10, 101, 231, .55); }
.day-head { display: flex; justify-content: space-between; align-items: center; }
.day-number { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; font: 500 .72rem/1 var(--mono); }
.day-add { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; opacity: 0; background: none; border: 0; color: var(--muted);
  cursor: pointer; border-radius: 7px; padding: 0; }
.day-add .ico { width: 13px; height: 13px; }
td:hover .day-add, .day-add:focus-visible { opacity: 1; }
@media (hover: none) { .day-add { opacity: .7; } }
.day-add:hover { background: rgba(var(--tint), .1); color: var(--fg); }
.day-item { display: block; font-size: .75rem; background: rgba(var(--tint), .07); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; margin-top: 3px;
  color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-item:hover { border-color: var(--line-strong); color: var(--fg); }
.db-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.db-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.db-list li:last-child { border-bottom: 0; }
.db-list li:hover { background: rgba(var(--tint), .03); }
.db-list li.empty { color: var(--muted); }
.db-list-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 200px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .875rem; }
.db-list-title:hover { color: var(--fg); }
.db-list-props { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.db-list-props .cell { min-height: 0; padding: 0 4px; }
.cell-popover { position: absolute; z-index: 60; width: 280px; max-width: calc(100vw - 16px); background: var(--ink); border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 10px; box-shadow: var(--shadow); display: grid; gap: 8px; }
.cell-popover input, .cell-popover select { width: 100%; }
.cell-popover .actions { margin-top: 0; }
.option-list { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.option { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; text-align: left; padding: 5px 6px; border-radius: 8px;
  cursor: pointer; color: var(--text); font: inherit; min-width: 0; }
.option .ico { width: 14px; height: 14px; }
.option:hover, .option.on { background: rgba(var(--tint), .07); }
.config-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.config-row select, .config-row input { flex: 1 1 110px; }
.row-props { margin: -4px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.row-in { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .8125rem; margin-bottom: 6px; }
.row-in .ico { width: 14px; height: 14px; }
.props { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); gap: 0 12px; margin: 0; }
.props dt { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .84rem; padding: 7px 0; min-width: 0; }
.props dt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.props dt .ico { width: 14px; height: 14px; color: var(--faint); }
.props dd { margin: 0; min-width: 0; }
@media (max-width: 479.98px) { .props { grid-template-columns: minmax(0, 1fr); } .props dt { padding-bottom: 0; } }

/* ---------- Login and errors ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; background:
  radial-gradient(50% 50% at 80% 5%, rgba(138, 42, 227, .28), transparent 70%), radial-gradient(45% 45% at 5% 100%, rgba(10, 101, 231, .24), transparent 70%),
  radial-gradient(25% 25% at 50% 60%, rgba(255, 214, 0, .06), transparent 70%), var(--ink); }
[data-theme="light"] .auth { background: radial-gradient(50% 50% at 80% 5%, rgba(138, 42, 227, .12), transparent 70%),
  radial-gradient(45% 45% at 5% 100%, rgba(10, 101, 231, .12), transparent 70%), var(--ink); }
.auth-box { width: 100%; max-width: 420px; border: 1px solid var(--line-strong); border-radius: 24px; padding: 32px 28px; display: grid; gap: 14px;
  background: linear-gradient(180deg, rgba(var(--tint), .06), rgba(var(--tint), .015)); backdrop-filter: blur(12px);
  box-shadow: 0 40px 120px -40px rgba(10, 101, 231, .45), 0 30px 100px -50px rgba(138, 42, 227, .55); }
.auth-box h1 { margin: 0; font: 800 clamp(1.7rem, 5vw, 2.2rem)/1.1 var(--head); letter-spacing: -.035em; padding-bottom: .06em;
  background: linear-gradient(180deg, var(--fg) 35%, var(--heading-end)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-box p { margin: 0; }
.auth-logo { margin-bottom: 6px; }
.auth-logo .logo-mark { width: 28px; height: 32px; }
.auth-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8125rem; }
.auth-note .ico { width: 14px; height: 14px; }

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

/* Project pages and dev spaces: small flags above the title, and a code icon in the sidebar */
.page-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.flag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(var(--tint), .06); color: var(--muted); font: 500 .68rem/1 var(--mono); }
.flag .ico { width: 13px; height: 13px; }
.flag-dev { color: var(--text); border-color: var(--line-strong); }
.tree-flag { display: inline-flex; color: var(--faint); flex-shrink: 0; }
.tree-flag .ico { width: 13px; height: 13px; }
.checks-list { display: grid; gap: 6px; max-height: 50vh; overflow: auto; margin: 10px 0; }
.checks-list label { display: flex; align-items: center; gap: 8px; font-size: .875rem; }