/* ---------------------------------------------------------------------------
   styles — the workspace app (index.html + app.js, editor.js, database.js,
   ws-util.js). Light, Notion-like. No build step.

   Layout: body is a full-height flex column. The shared dark top bar
   (mm-nav.css) sits first, then #app fills the rest: sidebar | main. Only
   .content scrolls for documents; database pages pin their header and let
   the view body scroll, because the table view is virtualised and measures
   its own scroller.

   Floating things (popovers, the selection toolbar, toasts, the side peek)
   are position: fixed. ws-util/editor place them from getBoundingClientRect,
   i.e. viewport coordinates.

   Features added later (permissions, share links, uploads) style themselves
   in features.css; keep this file to what the base app renders.
--------------------------------------------------------------------------- */

:root {
  --text: #37352f;
  --muted: #787774;
  --faint: #9b9a97;
  --ph: #c3c2bf;
  --border: #e9e9e7;
  --border-strong: rgba(55, 53, 47, .16);
  --hover: rgba(55, 53, 47, .06);
  --hover-2: rgba(55, 53, 47, .1);
  --side-bg: #f7f7f5;
  --soft-bg: #f7f6f3;
  --accent: #2383e2;
  --accent-hover: #0f72d0;
  --accent-soft: rgba(35, 131, 226, .12);
  --danger: #e03e3e;
  --mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  --shadow-pop: rgba(15, 15, 15, .05) 0 0 0 1px, rgba(15, 15, 15, .1) 0 3px 6px, rgba(15, 15, 15, .2) 0 9px 24px;
  --shadow-card: rgba(15, 15, 15, .1) 0 0 0 1px, rgba(15, 15, 15, .08) 0 2px 4px;
  --side-w: 250px;
  --nav-h: 48px;
  --pad-x: 96px;
}

/* ---- option colours (Notion's light palette) ------------------------------
   One class sets four variables; pills, swatches and board columns each read
   the ones they need, so a .c-* class means the same colour everywhere. */
.c-default { --opt-bg: rgba(227, 226, 224, .5); --opt-fg: #32302c; --opt-dot: #a3a29e; --opt-col: #f7f7f5; }
.c-gray    { --opt-bg: #e3e2e0; --opt-fg: #32302c; --opt-dot: #91918e; --opt-col: #f8f8f7; }
.c-brown   { --opt-bg: #eee0da; --opt-fg: #442a1e; --opt-dot: #a27763; --opt-col: #faf6f5; }
.c-orange  { --opt-bg: #fadec9; --opt-fg: #49290e; --opt-dot: #cc782f; --opt-col: #fcf5f2; }
.c-yellow  { --opt-bg: #fdecc8; --opt-fg: #402c1b; --opt-dot: #cb912f; --opt-col: #faf7ed; }
.c-green   { --opt-bg: #dbeddb; --opt-fg: #1c3829; --opt-dot: #448361; --opt-col: #f4f8f3; }
.c-blue    { --opt-bg: #d3e5ef; --opt-fg: #183347; --opt-dot: #337ea9; --opt-col: #f1f8fb; }
.c-purple  { --opt-bg: #e8deee; --opt-fg: #412454; --opt-dot: #9065b0; --opt-col: #f9f6fc; }
.c-pink    { --opt-bg: #f5e0e9; --opt-fg: #4c2337; --opt-dot: #c14c8a; --opt-col: #fbf5fb; }
.c-red     { --opt-bg: #ffe2dd; --opt-fg: #5d1715; --opt-dot: #d44c47; --opt-col: #fdf5f3; }

/* ---- base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

.hidden { display: none !important; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #fff;
  color: var(--text);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
body.resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }

::selection { background: rgba(35, 131, 226, .28); }

button, input, select, textarea { font-family: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
input[type="checkbox"] { accent-color: var(--accent); }
:focus-visible { outline: 2px solid rgba(35, 131, 226, .55); outline-offset: 1px; }
[contenteditable]:focus-visible { outline: none; }

.muted { color: var(--muted); }
.grow { flex: 1 1 auto; min-width: 0; }
.tick { color: var(--accent); font-size: 13px; flex: none; }
.count { color: var(--faint); font-size: 13px; }
.hint { font-size: 12px; color: var(--faint); line-height: 1.45; }
.sentinel { height: 1px; flex: none; grid-column: 1 / -1; }

/* thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(55, 53, 47, .2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(55, 53, 47, .18); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(55, 53, 47, .32); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- shared top bar: flush, full width, above the app ---------------------- */
#nav.nav {
  flex: none;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #30363d;
  position: relative;
  z-index: 40;
}
@media (min-width: 801px) {
  #nav.nav { height: var(--nav-h); flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
}

/* ---- buttons and inputs ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--side-bg); }
.btn:active { background: #efefed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.small { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 5px; }
.btn:disabled { opacity: .5; cursor: default; }

/* Quiet toolbar button: topbar, peek bar, database tools, calendar nav. */
.tb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tb:hover { background: var(--hover); color: var(--text); }
.tb:active { background: var(--hover-2); }
.tb.on { color: var(--accent); }

.inp {
  display: block;
  width: 100%;
  height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: rgba(242, 241, 238, .6);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.inp::placeholder { color: var(--faint); }
.inp:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(35, 131, 226, .15); }
.inp:disabled { opacity: .6; }
select.inp { padding-right: 6px; cursor: pointer; background-color: #fff; }
input[type="search"].inp::-webkit-search-cancel-button { cursor: pointer; }

.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 500; }
.field > span { padding-left: 2px; }

.x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 1px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  opacity: .55;
  cursor: pointer;
}
.x:hover { opacity: 1; background: rgba(55, 53, 47, .08); }

/* ---- sign in / fatal ----------------------------------------------------------- */
.login-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--side-bg);
}
.login-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 15, 15, .04), 0 8px 28px rgba(15, 15, 15, .06);
}
.login-brand { text-align: center; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.login-brand span { color: var(--accent); font-weight: 400; }
.login-sub { margin: -10px 0 6px; text-align: center; color: var(--muted); font-size: 14px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.login-card input {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: rgba(242, 241, 238, .6);
  color: var(--text);
  font-size: 15px;
  outline: none;
}
.login-card input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(35, 131, 226, .15); }
.login-card .btn { height: 36px; margin-top: 4px; font-size: 14px; }
.login-card .err { margin: 0; color: var(--danger); font-size: 13px; text-align: center; }
.login-card .err:empty { display: none; }
#fatal-msg { margin: 0; text-align: center; color: var(--muted); }

/* ---- app shell ------------------------------------------------------------------- */
.app { flex: 1; min-height: 0; display: flex; position: relative; }

.sidebar {
  width: var(--side-w);
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--side-bg);
  border-right: 1px solid var(--border);
  font-size: 14px;
  color: #5f5e5b;
  padding-bottom: 8px;
}
.drawer-backdrop { display: none; }

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

.topbar {
  flex: none;
  height: 45px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #fff;
}
.menu-btn { display: none; font-size: 18px; }
#page-menu { font-size: 20px; letter-spacing: 1px; }

.crumbs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
}
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 240px;
  height: 26px;
  padding: 0 6px;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
}
.crumb:hover { background: var(--hover); }
.crumb:last-child { flex-shrink: 0; max-width: 320px; }
.crumb-i { flex: none; font-size: 15px; }
.crumb-t { overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { flex: none; color: var(--ph); padding: 0 1px; }

.save-ind { flex: none; font-size: 12px; color: var(--faint); white-space: nowrap; }
.save-ind:empty { display: none; }
.save-ind.busy { color: var(--muted); }
.save-ind.bad { color: var(--danger); font-weight: 500; }

.content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.content > * { flex: none; }

/* ---- sidebar ----------------------------------------------------------------------- */
.sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 6px;
}
.sb-ws { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-close { display: none; }
.sb-close, .sb-add, .tcaret, .tadd {
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--faint);
  line-height: 1;
  cursor: pointer;
}
.sb-close { width: 28px; height: 28px; font-size: 22px; }
.sb-close:hover, .sb-add:hover, .tcaret:hover, .tadd:hover { background: var(--hover-2); color: var(--text); }

.sb-searchwrap { padding: 4px 10px 6px; }
.sb-search { height: 30px; background: rgba(55, 53, 47, .06); border-color: transparent; }

.sb-results { display: flex; flex-direction: column; gap: 1px; padding: 0 6px 8px; }
.sb-result {
  display: block;
  padding: 6px 8px;
  border-radius: 5px;
  color: var(--text);
  text-decoration: none;
}
.sb-result:hover { background: var(--hover); }
.sr-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-parent { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-snip {
  font-size: 12px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-note { padding: 6px 14px; color: var(--faint); font-size: 13px; }

.sb-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
}
.sb-add { display: inline-flex; width: 22px; height: 22px; font-size: 16px; opacity: 0; transition: opacity .12s; }
.sb-section:hover .sb-add { opacity: 1; }

.tree { display: flex; flex-direction: column; padding: 0 6px; }
.trow {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding-right: 4px;
  border-radius: 5px;
  color: #5f5e5b;
  cursor: pointer;
}
.trow:hover { background: var(--hover); }
.trow.active { background: var(--hover-2); color: var(--text); font-weight: 500; }
.tcaret { display: inline-flex; width: 20px; height: 20px; font-size: 13px; transition: transform .15s, background .12s; }
.tcaret.open { transform: rotate(90deg); }
.tcaret.none { visibility: hidden; }
.tlink {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.ticon { flex: none; width: 20px; text-align: center; font-size: 15px; line-height: 1; }
.ttitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttitle.muted { color: var(--faint); }
.tadd { display: inline-flex; width: 22px; height: 22px; font-size: 16px; opacity: 0; transition: opacity .12s; }
.trow:hover .tadd { opacity: 1; }

.sb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 30px;
  margin: 1px 6px;
  padding: 0 8px 0 6px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: #5f5e5b;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.sb-item:hover { background: var(--hover); color: var(--text); }
.sb-ico { width: 22px; text-align: center; color: var(--faint); font-size: 15px; }
.sidebar > .grow { flex: 1 0 16px; }

/* ---- page states ----------------------------------------------------------------------- */
.page-loading { padding: 18vh 24px 0; text-align: center; color: var(--faint); font-size: 14px; }
.page-missing { max-width: 460px; margin: 16vh auto 0; padding: 0 24px; text-align: center; }
.page-missing h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.page-missing p { margin: 0 0 20px; }
.peek .page-missing { margin-top: 10vh; color: var(--muted); }

.trash-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: #eb5757;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.trash-banner .btn { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.trash-banner .btn:hover { background: rgba(255, 255, 255, .15); }

/* ---- page shell -------------------------------------------------------------------------- */
.page { width: 100%; padding-bottom: 0; }
.cover {
  height: 30vh;
  min-height: 140px;
  max-height: 280px;
  background: #f1f1ef center / cover no-repeat;
}
.doc {
  width: 100%;
  max-width: calc(900px + 2 * var(--pad-x));
  margin: 0 auto;
  padding: 0 var(--pad-x);
  font-size: 16px;
}
.page.k-doc .doc, .page.k-row .doc { padding-bottom: 12vh; }

.page-head { position: relative; padding-top: 72px; margin-bottom: 10px; }
.cover + .doc .page-head, .cover + .db-head .page-head { padding-top: 0; }
.icon-row { display: flex; align-items: flex-end; min-height: 0; }
.page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin: 0 0 8px -4px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 64px;
  line-height: 1;
  cursor: pointer;
}
.page-icon:hover { background: var(--hover); }
.cover + .doc .page-icon, .cover + .db-head .page-icon { margin-top: -40px; position: relative; }
.add-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  margin: 0 0 6px -6px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--faint);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .12s;
}
.add-icon:hover { background: var(--hover); color: var(--muted); }
.page-head:hover .add-icon, .add-icon:focus-visible { opacity: 1; }
.page-title {
  position: relative;
  margin: 0;
  padding: 3px 2px;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.page-title.empty::before {
  content: attr(data-ph);
  position: absolute;
  left: 2px;
  top: 3px;
  color: #e1e1df;
  pointer-events: none;
}

/* Database page: header pinned, the view body takes what's left and scrolls. */
.page.k-db { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.page.k-db > * { flex: none; }
.db-head { padding: 0 var(--pad-x); }
.db-head .page-head { padding-top: 40px; }
.db-head .page-title { font-size: 32px; }
.db-head .page-icon { width: 60px; height: 60px; font-size: 48px; }
.page.k-db > .db-host {
  flex: 1 1 auto;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad-x);
}

/* ---- row page / peek: property list ------------------------------------------------------ */
.prop-list { display: flex; flex-direction: column; gap: 1px; margin: 12px 0 4px; font-size: 14px; }
.prop-row { display: flex; align-items: flex-start; min-height: 34px; }
.prop-name {
  flex: none;
  width: 170px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  border-radius: 4px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ti { flex: none; width: 16px; text-align: center; color: var(--faint); font-size: 13px; line-height: 1; }
.prop-val {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  word-break: break-word;
}
.prop-val:hover { background: var(--hover); }
.prop-val.ro { cursor: default; }
.prop-val.ro:hover { background: none; }
.prop-val .v-pills { flex-wrap: wrap; }
.prop-val .v-text { white-space: normal; }
.empty-val { color: var(--ph); }
.add-prop-btn {
  align-self: flex-start;
  margin-top: 2px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--faint);
  font-size: 14px;
  cursor: pointer;
}
.add-prop-btn:hover { background: var(--hover); color: var(--muted); }
.row-sep { height: 1px; background: var(--border); margin: 14px 0 22px; }

/* ---- property values ---------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: 20px;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--opt-bg, rgba(227, 226, 224, .5));
  color: var(--opt-fg, #32302c);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: none;
}
.pill.status { border-radius: 10px; padding: 0 8px 0 7px; }
.pill.status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--opt-dot, #a3a29e);
}
.pill .x { width: 16px; height: 16px; font-size: 13px; margin-right: -3px; }

.v-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.v-icon { flex: none; line-height: 1; }
.title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.title-text.muted { color: var(--faint); font-weight: 400; }
.v-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.v-num { font-variant-numeric: tabular-nums; }
.v-pills { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.v-date { white-space: nowrap; }
.v-check { display: inline-flex; align-items: center; }
.v-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.v-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(55, 53, 47, .35);
  text-underline-offset: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.v-link:hover { text-decoration-color: currentColor; }
.v-muted { color: var(--muted); white-space: nowrap; }
.v-formula { white-space: nowrap; }
.v-formula.muted { color: var(--faint); }
.v-formula.neg { color: #d44c47; }

.rel-chip, .file-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  height: 20px;
  padding: 0 6px;
  border-radius: 3px;
  background: rgba(55, 53, 47, .06);
  color: var(--text);
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  flex: none;
}
a.rel-chip:hover, a.file-chip:hover { background: rgba(55, 53, 47, .12); }
.rel-chip .ptitle { overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid rgba(55, 53, 47, .2); line-height: 1.25; }
.ptitle.missing { color: var(--faint); font-style: italic; }

.person { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; flex: none; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e3e2e0;
  color: #55534e;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
}

/* ---- popovers, menus, prompts -------------------------------------------------------------- */
.popover {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  min-width: 180px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 6px;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  animation: pop-in .1s ease-out;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.popover.wide { min-width: 300px; }
.popover:has(> .cell-edit) { padding: 0; min-width: 0; border-radius: 4px; animation: none; overflow: visible; }

.menu { display: flex; flex-direction: column; min-width: 200px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover, .menu-item.active { background: var(--hover); }
.menu-item.active .mi-label { font-weight: 500; }
.menu-item.danger, .menu-item.danger .mi-icon { color: var(--danger); }
.menu-item.danger:hover { background: rgba(224, 62, 62, .08); }
.menu-item:disabled { opacity: .4; cursor: default; background: none; }
.mi-icon { flex: none; width: 20px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1; }
.mi-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-hint { flex: none; color: var(--faint); font-size: 12px; }
.menu-sep { height: 1px; margin: 6px -6px; background: var(--border); flex: none; }
.menu-head { padding: 6px 8px 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.menu-foot { margin: 4px -6px -6px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--faint); line-height: 1.4; }
.menu-pad { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 6px; }
.menu-pad .menu-pad { padding: 0; }

/* slash menu: icons in little tiles, like Notion */
.menu.slash { width: 270px; }
.popover:has(> .menu.slash) { max-height: min(360px, calc(100vh - 16px)); }
.menu.slash .menu-item { min-height: 40px; gap: 10px; }
.menu.slash .mi-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.ask { display: flex; flex-direction: column; gap: 8px; width: 300px; max-width: 100%; padding: 4px; margin: 0; }
.ask-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.ask .btn { align-self: flex-end; }

.emoji-pick { display: flex; flex-direction: column; gap: 8px; width: 310px; max-width: 100%; padding: 4px; }
.emoji-pick form { margin: 0; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji {
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.emoji:hover { background: var(--hover-2); }
.emoji-pick > .btn { align-self: flex-start; }

/* pickers: options, relation, people, files, page picker */
.picker { display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.popover.wide .picker { width: 320px; max-width: 100%; }
.picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-radius: 4px;
  background: rgba(242, 241, 238, .7);
}
.picker-chips .person { background: rgba(55, 53, 47, .06); border-radius: 10px; padding: 0 4px 0 2px; height: 22px; }
.picker-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; margin: 0 -2px; }
.picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker-item:hover, .picker-item.active { background: var(--hover); }
.picker-item.create { color: var(--muted); }
.picker-item .grow { overflow: hidden; text-overflow: ellipsis; }
.picker-group { padding: 8px 8px 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.picker-empty, .picker-note { padding: 8px; color: var(--faint); font-size: 13px; white-space: normal; }
.opt-more {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
}
.picker-item:hover .opt-more, .picker-item.active .opt-more { opacity: 1; }
.opt-more:hover { background: var(--hover-2); }

.opt-menu { display: flex; flex-direction: column; gap: 2px; width: 220px; }
.opt-menu > .inp { margin-bottom: 4px; }
.color-list { display: flex; flex-direction: column; }
.color-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  padding: 3px 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.color-item:hover { background: var(--hover); }
.color-item.on::after { content: "✓"; margin-left: auto; color: var(--accent); font-size: 13px; }
.swatch {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--opt-bg);
  box-shadow: inset 0 0 0 1px rgba(15, 15, 15, .08);
}
.opt-editor { display: flex; flex-direction: column; gap: 1px; width: 300px; max-width: 100%; }
.opt-add { display: flex; gap: 6px; margin: 6px 0 0; }
.opt-add .inp { flex: 1; height: 28px; }

.date-pick { display: flex; flex-direction: column; gap: 10px; width: 270px; max-width: 100%; padding: 4px; }
.dp-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.dp-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; }
.dp-check input { margin: 0; width: 15px; height: 15px; }
.dp-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 2px; }

.files-list { display: flex; flex-direction: column; gap: 1px; }
.file-row { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 6px 2px 8px; border-radius: 4px; }
.file-row:hover { background: var(--hover); }
.file-row a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.file-row a:hover { text-decoration: underline; }
.files-add { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 6px; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--border); }
.files-add .inp { height: 28px; }

.picker > .menu-head + .inp, .trash-box > .inp { margin-bottom: 2px; }

/* trash */
.trash-box { display: flex; flex-direction: column; gap: 6px; width: 380px; max-width: 100%; }
.trash-list { display: flex; flex-direction: column; max-height: 380px; overflow-y: auto; }
.trash-item { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 4px 2px 8px; border-radius: 4px; }
.trash-item:hover { background: var(--hover); }
.trash-item a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.trash-item .muted { flex: none; font-size: 12px; color: var(--faint); }

/* in-place cell editors (popover laid over the cell) */
.cell-edit .inp { border-radius: 4px; background: #fff; border-color: var(--accent); box-shadow: var(--shadow-pop); }
.cell-edit .cell-inp { height: 34px; }
.cell-rich {
  height: auto;
  min-height: 34px;
  max-width: min(480px, calc(100vw - 16px));
  max-height: 320px;
  overflow: auto;
  padding: 6px 10px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* schema / view forms */
.add-prop, .add-view { display: flex; flex-direction: column; gap: 10px; width: 280px; max-width: 100%; padding: 4px; margin: 0; }
.add-prop .btn, .add-view .btn { align-self: flex-end; }
.view-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.vt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 11.5px;
  cursor: pointer;
}
.vt span { font-size: 18px; line-height: 1; }
.vt:hover { background: var(--side-bg); }
.vt.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.filter-box { display: flex; flex-direction: column; gap: 6px; width: 560px; max-width: 100%; }
.filter-row { display: flex; align-items: center; gap: 6px; }
.filter-row > .inp, .filter-row > .fv-date { flex: 1 1 0; min-width: 0; height: 30px; }
.filter-row > span:empty { flex: 1 1 0; }
.filter-row .inp { height: 30px; font-size: 13px; }
.fr-lead { flex: none; width: 64px; font-size: 13px; color: var(--muted); padding-left: 4px; }
.fr-lead .inp.mode { width: 64px; padding: 0 4px; }
.fv-date { display: flex; align-items: center; gap: 8px; }
.fv-date .inp { flex: 1; min-width: 0; }
.fv-date .dp-check { flex: none; font-size: 12px; }
.filter-row .x { width: 24px; height: 24px; font-size: 16px; }

.add-line {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  flex: none;
}
.add-line:hover { background: var(--hover); color: var(--text); }

.props-box { display: flex; flex-direction: column; width: 290px; max-width: 100%; }
.prop-toggle { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 6px 2px 8px; border-radius: 4px; }
.prop-toggle:hover { background: var(--hover); }
.prop-toggle.fixed { color: var(--muted); }
.prop-toggle.fixed:hover { background: none; }
.prop-toggle .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-toggle .muted { font-size: 12px; color: var(--faint); }
.prop-toggle input { margin: 0 2px 0 4px; width: 15px; height: 15px; cursor: pointer; }
.mv {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
}
.prop-toggle:hover .mv { opacity: 1; }
.mv:hover { background: var(--hover-2); color: var(--text); }
.mv:disabled { visibility: hidden; }

.cal-pop { display: flex; flex-direction: column; gap: 4px; width: 250px; max-height: 360px; overflow-y: auto; padding: 0 2px 2px; }

/* ---- selection toolbar ------------------------------------------------------------------- */
.sel-toolbar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1100;
  display: flex;
  gap: 1px;
  padding: 3px;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--shadow-pop);
}
.sel-toolbar button {
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.sel-toolbar button:hover { background: var(--hover); }
.sel-toolbar button.on { color: var(--accent); background: var(--accent-soft); }
.sel-toolbar .b { font-weight: 700; }
.sel-toolbar .i { font-style: italic; font-family: Georgia, serif; }
.sel-toolbar .u { text-decoration: underline; }
.sel-toolbar .s { text-decoration: line-through; }
.sel-toolbar .c { font-family: var(--mono); font-size: 12px; }

/* ---- toasts -------------------------------------------------------------------------------- */
#toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.toast {
  pointer-events: auto;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: 8px;
  background: #2f2f2f;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(15, 15, 15, .25);
  word-break: break-word;
  animation: toast-in .18s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- side peek ------------------------------------------------------------------------------ */
.peek {
  position: fixed;
  top: var(--nav-h);
  right: 0;
  bottom: 0;
  z-index: 60;
  width: max(50vw, 520px);
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: rgba(15, 15, 15, .06) 0 0 0 1px, rgba(15, 15, 15, .12) -8px 0 32px;
  transform: translateX(104%);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.peek.in { transform: none; }
.peek-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 46px;
  padding: 0 10px;
  border-bottom: 1px solid transparent;
}
.peek-bar > .tb:first-child { font-size: 18px; }
.peek-more { font-size: 18px; letter-spacing: 1px; }
.peek-body { flex: 1; min-height: 0; overflow-y: auto; }
.peek .doc.peek-doc { max-width: none; padding: 0 56px 12vh; }
.peek .page-head { padding-top: 28px; }
.peek .page-title { font-size: 32px; }
.peek .page-icon { width: 60px; height: 60px; font-size: 48px; }

/* ---- block editor ------------------------------------------------------------------------- */
.editor { position: relative; padding-left: 2px; }
.blocks { display: flex; flex-direction: column; }
.editor-tail { min-height: 120px; cursor: text; }
.peek .editor-tail { min-height: 80px; }

.blk { position: relative; margin: 1px 0; }
.blk.dragging { opacity: .35; }
.blk-row { display: flex; align-items: flex-start; margin-left: -24px; }
.blk-handle {
  flex: none;
  width: 22px;
  height: 24px;
  margin: 3px 2px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: rgba(55, 53, 47, .35);
  font-size: 15px;
  letter-spacing: -5px;
  padding-right: 5px;
  cursor: grab;
  opacity: 0;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity .1s;
}
.blk-row:hover > .blk-handle { opacity: 1; }
.blk-handle:hover { background: var(--hover-2); color: var(--muted); }
.blk-handle:active { cursor: grabbing; }

.blk-body { flex: 1; min-width: 0; padding: 3px 0; }
.blk-text {
  position: relative;
  min-height: 1.5em;
  padding: 0 2px;
  line-height: 1.5;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  caret-color: var(--text);
}
.blk-text.empty::before, .blk-cap.empty::before {
  content: attr(data-ph);
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--ph);
  pointer-events: none;
  white-space: nowrap;
}
/* Plain paragraphs only show "Type '/' for commands" on the focused line. */
.t-paragraph > .blk-row .blk-text.empty:not(:focus)::before { content: none; }
.blk-cap.empty:not(:focus)::before { content: none; }
.media:hover .blk-cap.empty::before { content: attr(data-ph); }

.blk-children { padding-left: 24px; }

/* inline formatting inside editable text and rich values */
[data-edit] a, .v-text a, .cell-rich a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(55, 53, 47, .4);
  text-underline-offset: 2px;
  cursor: pointer;
}
[data-edit] code, .v-text code, .cell-rich code {
  padding: .15em .35em;
  border-radius: 4px;
  background: rgba(135, 131, 120, .15);
  color: #eb5757;
  font-family: var(--mono);
  font-size: 85%;
}

/* headings */
.blk.t-heading_1 { margin-top: 30px; }
.blk.t-heading_2 { margin-top: 22px; }
.blk.t-heading_3 { margin-top: 14px; }
.blocks > .blk:first-child, .column > .blk:first-child { margin-top: 1px; }
.t-heading_1 > .blk-row .blk-text { font-size: 1.875em; font-weight: 700; line-height: 1.3; }
.t-heading_2 > .blk-row .blk-text { font-size: 1.5em; font-weight: 600; line-height: 1.3; }
.t-heading_3 > .blk-row .blk-text { font-size: 1.25em; font-weight: 600; line-height: 1.3; }
.t-heading_1 > .blk-row > .blk-handle { margin-top: 10px; }
.t-heading_2 > .blk-row > .blk-handle { margin-top: 7px; }
.t-heading_3 > .blk-row > .blk-handle { margin-top: 5px; }

/* lists, to-dos, toggles */
.with-mark { display: flex; align-items: flex-start; }
.with-mark > .blk-text { flex: 1; min-width: 0; }
.mark {
  flex: none;
  min-width: 24px;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.mark.bullet { font-size: 1.15em; line-height: 1; height: calc(1.5em / 1.15); }
.mark.num { justify-content: flex-start; padding: 0 4px 0 3px; font-variant-numeric: tabular-nums; }
.todo-cb { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.with-mark.done > .blk-text { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(55, 53, 47, .3); }
.mark.caret {
  width: 24px;
  height: 24px;
  margin-right: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: transform .15s, background .12s;
}
.mark.caret:hover { background: var(--hover-2); }
.mark.caret.open { transform: rotate(90deg); }
.toggle-empty { padding: 3px 2px; color: var(--faint); font-size: .93em; cursor: pointer; }
.toggle-empty:hover { color: var(--muted); }

/* quote */
.t-quote > .blk-row > .blk-body { margin: 2px 0; padding: 1px 14px; border-left: 3px solid currentColor; }
.t-quote > .blk-row .blk-text { font-size: 1.07em; }
.t-quote > .blk-row .blk-text.empty::before { left: 2px; }

/* callout */
.blk-body.callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0;
  padding: 14px 16px 14px 12px;
  border-radius: 6px;
  background: #f1f1ef;
}
.blk-body.callout > .blk-text { flex: 1; min-width: 0; }
.callout-icon {
  flex: none;
  width: 26px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.callout-icon:hover { background: var(--hover-2); }

/* code */
.blk-body.code {
  position: relative;
  margin: 4px 0;
  padding: 8px 0 0;
  border-radius: 6px;
  background: var(--soft-bg);
}
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 2px; font-family: var(--sans); }
.code-lang, .code-copy {
  height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.code-lang:hover, .code-copy:hover { background: var(--hover-2); }
.code-copy { opacity: 0; transition: opacity .12s; }
.blk-body.code:hover .code-copy { opacity: 1; }
.blk-body.code > .blk-text {
  padding: 8px 18px 18px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
  word-break: normal;
}
.blk-body.code > .blk-text.empty::before { left: 18px; top: 8px; }

/* divider */
.blk-body.divider { padding: 11px 2px; cursor: default; }
.blk-body.divider hr { margin: 0; border: 0; border-top: 1px solid var(--border-strong); }

/* image / video */
figure.blk-body.media { margin: 6px 0; }
.media img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.media video { display: block; width: 100%; max-height: 70vh; border-radius: 4px; background: #000; }
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; background: #000; }
.video-poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 16px;
  border: 0;
  border-radius: 4px;
  background: #1f1f1f linear-gradient(135deg, #2b2b2b, #161616);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.video-poster .play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-size: 26px;
  transition: background .15s, transform .15s;
}
.video-poster:hover .play { background: rgba(255, 255, 255, .26); transform: scale(1.05); }
.video-poster span:last-child { max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .65; }
.media-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 4px;
  background: #f2f1ee;
  color: var(--muted);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.media-empty:hover { background: #ebeae6; }
.blk-cap {
  position: relative;
  min-height: 1.4em;
  padding: 6px 2px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}
.blk-cap.empty::before { top: 6px; }

/* bookmark */
a.bookmark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  transition: background .12s;
}
a.bookmark:hover { background: var(--side-bg); }
.media a.bookmark { flex-direction: row; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.bm-host { font-size: 14px; font-weight: 500; }
.bm-url { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* simple table block */
.table-blk { margin: 4px 0; }
.table-blk .tbl-scroll { overflow-x: auto; padding-bottom: 2px; }
table.simple { border-collapse: collapse; font-size: 14px; line-height: 1.45; }
table.simple td, table.simple th {
  min-width: 120px;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}
table.simple.has-head tr:first-child > * { background: var(--soft-bg); font-weight: 600; }
table.simple td:focus, table.simple th:focus { box-shadow: inset 0 0 0 2px rgba(35, 131, 226, .45); }
.tbl-tools { display: flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity .12s; }
.table-blk:hover .tbl-tools, .table-blk:focus-within .tbl-tools { opacity: 1; }
.tbl-tools button {
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--faint);
  font-size: 12px;
  cursor: pointer;
}
.tbl-tools button:hover { background: var(--hover); color: var(--text); }

/* columns */
.blk-body.columns { display: flex; gap: 46px; padding: 0; }
.column { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }

/* child pages and links */
a.pagelink {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -2px;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  line-height: 1.5;
}
a.pagelink:hover { background: var(--hover); }
a.pagelink .ptitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid rgba(55, 53, 47, .16);
}
.pl-arrow { color: var(--muted); font-weight: 400; }
.unsupported { padding: 6px 8px; border-radius: 4px; background: var(--side-bg); color: var(--faint); font-size: 13px; }

.drop-line {
  position: absolute;
  display: none;
  height: 3px;
  border-radius: 2px;
  background: rgba(35, 131, 226, .55);
  pointer-events: none;
  z-index: 5;
}

/* ---- database view ----------------------------------------------------------------------- */
.dbv { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; font-size: 14px; }
.dbv-bar {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px 12px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  border-bottom: 1px solid var(--border);
}
.view-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 260px; overflow-x: auto; scrollbar-width: none; }
.view-tabs::-webkit-scrollbar { display: none; }
.view-tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.view-tab::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  background: transparent;
}
.view-tab:hover { color: var(--text); }
.view-tab:hover::before {
  content: "";
  position: absolute;
  inset: 5px 0;
  border-radius: 4px;
  background: var(--hover);
  z-index: -1;
}
.view-tab { z-index: 0; }
.view-tab.on { color: var(--text); font-weight: 500; }
.view-tab.on::after { background: var(--text); }
.vi { font-size: 13px; color: var(--faint); font-weight: 400; }
.view-tab.on .vi { color: var(--muted); }
.view-add {
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.view-add:hover { background: var(--hover); color: var(--text); }
.dbv-tools { flex: none; display: flex; align-items: center; gap: 2px; padding: 4px 0 6px; margin-left: auto; }
.dbv-tools > * { flex: none; }
.db-search { width: 160px; height: 28px; margin-right: 4px; font-size: 13px; }
.dbv-tools .btn.primary { margin-left: 6px; }

.dbv-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
.dbv-loading, .dbv-error { padding: 28px 4px; color: var(--faint); }
.dbv-error { color: var(--danger); }
.dbv-empty { padding: 48px 16px; text-align: center; color: var(--muted); }
.pick-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }

/* table */
.dbv-body > .tbl-scroll { flex: 1 1 auto; min-height: 160px; overflow: auto; overscroll-behavior: contain; }
.tbl { position: relative; min-width: 100%; }
.thead {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  height: 34px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.th {
  position: relative;
  flex: none;
  height: 33px;
  border-right: 1px solid var(--border);
}
.th.gutter { width: 32px; border-right: 0; }
.th.add { width: 40px; border-right: 0; }
.th:nth-last-child(2) { border-right: 0; }
.th-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.th-btn:hover { background: var(--hover); }
.th.add .th-btn { justify-content: center; color: var(--faint); font-size: 18px; }
.th-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resize { position: absolute; top: 0; right: -3px; bottom: 0; z-index: 2; width: 6px; cursor: col-resize; }
.resize:hover, body.resizing .resize:active { background: rgba(35, 131, 226, .45); }

.tbody { position: relative; }
.tr {
  position: absolute;
  left: 0;
  right: 0;
  height: 34px;
  display: flex;
  border-bottom: 1px solid var(--border);
}
.tr:hover { background: rgba(55, 53, 47, .025); }
.td {
  position: relative;
  flex: none;
  height: 33px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-right: 1px solid var(--border);
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.td:last-child { border-right: 0; }
.td:not(.gutter):hover { background: var(--hover); }
.td.gutter { width: 32px; padding: 0; justify-content: center; border-right: 0; cursor: default; }
.td.gutter:hover { background: none; }
.td .v-pills { flex-wrap: nowrap; overflow: hidden; }
.td.t-number, .td.t-rollup { justify-content: flex-end; }
.td.t-title { padding-right: 64px; }
.td.t-title .title-text { cursor: pointer; }
.td.t-title .title-text:hover { text-decoration: underline; text-decoration-color: rgba(55, 53, 47, .4); text-underline-offset: 2px; }
.td.t-checkbox { cursor: pointer; }
.td.t-unique_id, .td.t-created_time, .td.t-last_edited_time, .td.t-formula, .td.t-rollup { cursor: default; }
.row-handle {
  width: 20px;
  height: 24px;
  padding: 0 3px 0 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: rgba(55, 53, 47, .35);
  font-size: 14px;
  letter-spacing: -5px;
  padding-right: 5px;
  cursor: pointer;
  opacity: 0;
}
.tr:hover .row-handle { opacity: 1; }
.row-handle:hover { background: var(--hover-2); color: var(--muted); }
.open-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 15, 15, .06);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
}
.tr:hover .open-btn { opacity: 1; }
.open-btn:hover { background: var(--side-bg); color: var(--text); }
.tbl-new {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 0 0 40px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--faint);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.tbl-new:hover { background: var(--hover); color: var(--muted); }
.tbl-foot { flex: none; padding: 8px 4px 10px; font-size: 12px; color: var(--faint); }

/* cards: shared by board, gallery (list items are flat rows) */
.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--shadow-card);
  font-size: 14px;
  cursor: pointer;
  min-width: 0;
  transition: background .1s;
}
.card:hover { background: #fafaf9; }
.card.dragging { opacity: .4; }
.card-title { display: flex; align-items: flex-start; gap: 6px; font-weight: 500; line-height: 1.4; word-break: break-word; }
.card-title .muted { color: var(--faint); font-weight: 400; }
.card-prop { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12.5px; line-height: 1.4; overflow: hidden; }
.card-prop .v-pills { flex-wrap: wrap; }
.card-prop .pill, .card-prop .rel-chip, .card-prop .file-chip { font-size: 12px; height: 19px; line-height: 19px; }
.card-prop .v-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--muted); }
.card-prop .v-date, .card-prop .v-muted, .card-prop .v-formula { color: var(--muted); }

/* board */
.board-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 0 12px; overscroll-behavior: contain; }
.board { display: flex; align-items: flex-start; gap: 12px; width: max-content; min-width: 100%; }
.board-col {
  flex: none;
  width: 264px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 6px 4px;
  border-radius: 8px;
  background: var(--opt-col, #f7f7f5);
  transition: box-shadow .12s;
}
.board-col.drop-on { box-shadow: inset 0 0 0 2px rgba(35, 131, 226, .5); }
.board-head { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px; }
.board-cards { display: flex; flex-direction: column; gap: 6px; }
.board-col > .add-line { color: var(--faint); }

/* calendar */
.cal { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding-bottom: 12px; }
.cal-head { flex: none; display: flex; align-items: center; gap: 2px; padding: 10px 0 8px; }
.cal-title { font-size: 16px; font-weight: 600; }
.cal-head .tb { font-size: 14px; }
.cal-head .tb:first-of-type, .cal-head .tb:last-of-type { font-size: 20px; }
.cal-grid {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(120px, auto);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.cal-grid > .cal-dow { height: 32px; }
.cal-grid { grid-template-rows: 32px; }
.cal-dow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
.cal-day {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 5px 6px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
.cal-day:hover { background: rgba(55, 53, 47, .02); }
.cal-day.out { background: #fbfbfa; }
.cal-day.out .cal-num { color: var(--ph); }
.cal-day.drop-on { background: rgba(35, 131, 226, .08); }
.cal-num {
  align-self: flex-end;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.cal-day.today .cal-num { background: #eb5757; color: #fff; font-weight: 600; }
.cal-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--shadow-card);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.cal-chip:hover { background: #fafaf9; }
.cal-chip > span:not(.cal-time) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cal-chip .muted { color: var(--faint); font-weight: 400; }
.cal-time { flex: none; color: var(--faint); font-size: 11.5px; font-weight: 400; }
.cal-more {
  align-self: flex-start;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.cal-more:hover { background: var(--hover); color: var(--text); }
.cal-pop .cal-chip { flex: none; }

/* list */
.list-view { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 0 12px; overscroll-behavior: contain; }
.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  cursor: pointer;
}
.list-item:hover { background: var(--hover); }
.list-item .card-title { flex: 1 1 auto; min-width: 120px; overflow: hidden; }
.list-item .card-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .card-prop { flex: 0 1 auto; max-width: 220px; font-size: 13px; white-space: nowrap; }
.list-item .card-prop .v-pills { flex-wrap: nowrap; overflow: hidden; }
.list-item .card-prop .v-text { -webkit-line-clamp: 1; white-space: nowrap; display: block; text-overflow: ellipsis; }
.list-view > .add-line { margin-top: 2px; color: var(--faint); }

/* gallery */
.gallery-view { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 2px 16px; overscroll-behavior: contain; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card.gcard { min-height: 140px; padding: 0 0 12px; gap: 6px; overflow: hidden; }
/* A preview strip, as Notion's gallery cards have; there are no page covers yet. */
.card.gcard::before {
  content: "";
  flex: none;
  height: 52px;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #f4f3f0, #ecebe7);
  border-bottom: 1px solid var(--border);
}
.card.gcard > * { margin: 0 12px; }
.card.gcard .card-title { font-size: 14.5px; }
.gnew {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  background: none;
  color: var(--faint);
  font-size: 14px;
  cursor: pointer;
}
.gnew:hover { background: var(--hover); color: var(--muted); }

/* ---- touch: show what hover would reveal ---------------------------------------------------- */
@media (hover: none) {
  .add-icon, .tadd, .sb-add, .opt-more, .mv, .code-copy, .tbl-tools { opacity: 1; }
  .row-handle { opacity: .6; }
  .open-btn { display: none; }
  .td.t-title { padding-right: 8px; }
  .blk-handle { opacity: .3; }
}

/* ---- narrower desktop ---------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --pad-x: 56px; }
}

/* ---- mobile ----------------------------------------------------------------------------------- */
@media (max-width: 800px) {
  :root { --pad-x: 22px; }
  body { font-size: 15px; }

  .menu-btn { display: inline-flex; }
  .topbar { height: 44px; padding: 0 6px 0 4px; gap: 4px; }
  .crumb { max-width: 140px; }
  .crumb:last-child { max-width: 200px; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 80;
    width: min(300px, 86vw);
    transform: translateX(-102%);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1);
  }
  body.drawer-open .sidebar { transform: none; box-shadow: rgba(15, 15, 15, .2) 0 0 32px; }
  body.drawer-open .drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 75;
    background: rgba(15, 15, 15, .35);
    animation: fade-in .2s ease-out;
  }
  .sb-close { display: inline-flex; }
  .trow, .sb-item { height: 36px; }

  .page-head { padding-top: 32px; }
  .page-title { font-size: 30px; }
  .page-icon { width: 60px; height: 60px; font-size: 48px; }
  .db-head .page-head { padding-top: 20px; }
  .db-head .page-title { font-size: 26px; }
  .doc { font-size: 16px; }
  .blk-children { padding-left: 18px; }
  .blk-body.columns { flex-direction: column; gap: 0; }
  .cover { height: 22vh; min-height: 110px; }

  .prop-name { width: 118px; }

  .peek { top: 0; width: 100vw; box-shadow: none; }
  .cal-more { padding: 0 2px; font-size: 11px; }
  .peek .doc.peek-doc { padding: 0 22px 12vh; }
  .peek .page-title { font-size: 26px; }

  .dbv-bar { align-items: stretch; }
  .view-tabs { flex-basis: 100%; }
  .dbv-tools { margin-left: 0; width: 100%; flex-wrap: wrap; row-gap: 6px; }
  .dbv-tools > .db-search { width: auto; flex: 1 1 120px; min-width: 100px; }
  .page.k-db > .db-host { min-height: 60vh; }

  .board-col { width: 240px; }
  .cal-grid { grid-auto-rows: minmax(84px, auto); }
  .cal-dow { justify-content: center; padding: 0 2px; font-size: 11px; }
  .cal-day { padding: 2px 2px 4px; }
  .cal-num { min-width: 20px; height: 20px; font-size: 12px; padding: 0 4px; }
  .cal-chip { height: 20px; padding: 0 4px; font-size: 11px; }
  .cal-time { display: none; }
  .list-item .card-prop:nth-of-type(n + 3) { display: none; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

  .filter-box { width: calc(100vw - 32px); }
  .filter-row { flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .filter-row > .inp, .filter-row > .fv-date { flex: 1 1 40%; }
  .trash-box, .opt-editor, .props-box { width: calc(100vw - 32px); }
  .popover.wide .picker { width: calc(100vw - 32px); }
  #toasts { bottom: 16px; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

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