/* ============================================================
   DocLight · style.css
   Design language: minimal cards + soft shadows + high-contrast typography, light/dark themes
   ============================================================ */

/* ---------- Theme variables ---------- */
.theme-light {
  color-scheme: light;
  --bg: #f6f7f9;
  --bg-elev: #ffffff;
  --bg-inset: #eef0f4;
  --bg-hover: rgba(20, 22, 40, .05);
  --border: #e6e8ef;
  --border-strong: #d4d7e2;
  --text: #1d1f27;
  --text-2: #565b6e;
  --text-3: #9197ab;
  --accent: #5457cf;
  --accent-hover: #4447bd;
  --accent-soft: rgba(84, 87, 207, .10);
  --accent-ink: #ffffff;
  --accent-line: rgba(84, 87, 207, .38);
  --accent-soft-u: rgba(84, 87, 207, .55);
  --danger: #d5484c;
  --danger-soft: rgba(213, 72, 76, .1);
  --code-bg: #eceef4;
  --code-ink: #343a56;
  --pre-bg: #f0f2f7;
  --pre-ink: #293047;
  --shadow-sm: 0 1px 2px rgba(18, 20, 35, .05);
  --shadow-md: 0 6px 24px -8px rgba(18, 20, 35, .14);
  --shadow-lg: 0 20px 50px -12px rgba(18, 20, 35, .25);
  --scrim: rgba(15, 16, 26, .42);
  --topbar-bg: rgba(255, 255, 255, .78);
}

.theme-dark {
  color-scheme: dark;
  --bg: #0f1116;
  --bg-elev: #16181f;
  --bg-inset: #1d2029;
  --bg-hover: rgba(220, 225, 255, .06);
  --border: #23252f;
  --border-strong: #30333f;
  --text: #e6e8f0;
  --text-2: #a2a7ba;
  --text-3: #7b8299;
  --accent: #8386ff;
  --accent-hover: #999cff;
  --accent-soft: rgba(131, 134, 255, .14);
  --accent-ink: #101120;
  --accent-line: rgba(131, 134, 255, .4);
  --accent-soft-u: rgba(131, 134, 255, .6);
  --danger: #ff7074;
  --danger-soft: rgba(255, 112, 116, .13);
  --code-bg: #22252f;
  --code-ink: #c9cdf2;
  --pre-bg: #101218;
  --pre-ink: #ccd1ee;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, .55);
  --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, .7);
  --scrim: rgba(0, 0, 0, .58);
  --topbar-bg: rgba(17, 19, 26, .78);
}

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

html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei",
    Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}
::selection { background: var(--accent-soft); }
html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

kbd {
  font-family: inherit;
  font-size: .74em;
  padding: .12em .45em;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-inset);
  color: var(--text-2);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Text inputs already style their own focus (border color / caret), so they are exempt from the global outline to avoid a double ring */
input[type="text"], input[type="search"], input[type="password"],
.modal input, #title-input, #editor, .modal select { outline: none !important; }
button { font: inherit; cursor: pointer; }

/* Critical fix: the hidden attribute must beat any author display rule */
[hidden] { display: none !important; }

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

/* ---------- Layout skeleton ---------- */
#layout { display: flex; height: calc(100vh - 57px); height: calc(100dvh - 57px); }

/* ---------- Top bar ---------- */
#topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  height: 57px;
  padding: 0 clamp(10px, 2vw, 22px);
  background: var(--topbar-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border);
  transition: background-color .25s ease;
}
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-right { display: flex; align-items: center; gap: 8px; }
.cluster { display: flex; align-items: center; gap: 8px; animation: fadein .18s ease; }

.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand-mark {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, #6a6dff, #494bc9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 6px rgba(84,87,207,.35);
  position: relative;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 6px 5px auto 5px; height: 2.6px; border-radius: 2px;
  background:
    linear-gradient(#fff 0 0) top/100% 100% no-repeat,
    linear-gradient(#fff 0 0) center/70% 100% no-repeat,
    linear-gradient(#fff 0 0) bottom/45% 100% no-repeat;
  box-shadow: 0 0 0 transparent;
  opacity: .95;
  background-position: 0 0, 0 130%, 0 260%;
  background-size: 100% 32%, 70% 32%, 45% 32%;
}
.brand-name { font-weight: 700; letter-spacing: -.015em; font-size: 16.5px; }

.crumb {
  font-size: 13px; color: var(--text-3);
  padding-left: 12px; border-left: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw;
}

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  font-weight: 550; font-size: 13.5px;
  white-space: nowrap;
  transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  user-select: none;
}
.btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(.97); }
.btn kbd { pointer-events: none; }

.btn-primary {
  background: var(--accent); border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 3px 10px -2px rgba(84, 87, 207, .45), inset 0 1px 0 rgba(255,255,255,.18);
}
.theme-dark .btn-primary { box-shadow: 0 3px 12px -2px rgba(131,134,255,.35); }
.btn-primary:hover { background: var(--accent-hover); border-color: transparent; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); box-shadow: none; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border: none; border-radius: 9px;
  background: transparent; color: var(--text-2);
  transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }

/* A manual theme choice should remain distinct from the system-following state. */
html[data-theme-pref="light"] #btn-theme,
html[data-theme-pref="dark"] #btn-theme {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.pill {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: #e3a04a; padding: 3px 9px; border-radius: 99px;
  background: rgba(227, 160, 74, .12);
  animation: fadein .2s ease;
}
@keyframes fadein { from { opacity: 0; transform: translateY(-3px);} to { opacity: 1; transform: none;} }

/* ---------- Dropdown menus ---------- */
.dropdown-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 168px; z-index: 60;
  padding: 5px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: pop .16s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop { from { opacity: 0; transform: scale(.92) translateY(-4px);} to { opacity: 1; transform: none;} }
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 8px 11px;
  border: none; border-radius: 8px;
  background: transparent; color: var(--text);
  font-size: 13.5px; text-align: left;
}
.menu-item:hover { background: var(--bg-hover); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-soft); }
.menu-item .ck { visibility: hidden; color: var(--accent); flex: none; }
.menu-item[aria-checked="true"] { color: var(--accent); font-weight: 600; }
.menu-item[aria-checked="true"] .ck { visibility: visible; }

/* ---------- Sidebar ---------- */
#sidebar {
  width: 272px; flex: none;
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  transition: background-color .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.side-head { padding: 14px 14px 10px; display: grid; gap: 10px; }
#search {
  width: 100%; padding: 10px 14px;
  font: inherit; font-size: 14px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1.5px solid var(--border); border-radius: 11px;
  outline: none;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
#search:focus { border-color: var(--accent); background: var(--bg-elev); box-shadow: 0 0 0 3px var(--accent-soft); }
#search::placeholder { color: var(--text-3); }
#search::placeholder { color: var(--text-3); }

.btn-new { justify-content: center; background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.btn-new:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

#page-list { flex: 1; overflow-y: auto; padding: 4px 10px 14px; }
.page-item {
  display: block; width: 100%;
  padding: 9px 12px; margin-bottom: 2px;
  border: none; border-radius: 10px;
  background: transparent; color: var(--text-2);
  text-align: left; text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
  position: relative;
}
.page-item .t {
  display: block; font-size: 13.8px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-item .s { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.page-item:hover { background: var(--bg-hover); }
.page-item.active { background: var(--accent-soft); }
.page-item.active::before {
  content: ""; position: absolute; left: 0; top: 22%;
  height: 56%; width: 3px; border-radius: 3px; background: var(--accent);
}
.page-item.active .t { color: var(--accent); font-weight: 600; }

.side-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-3);
}

.list-empty { padding: 18px 14px; font-size: 13px; color: var(--text-3); text-align: center; }

/* ---------- Main area ---------- */
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* flex column: keeps the filing footer pinned to the bottom when content is shorter than one screen (see .site-footer margin-top:auto) */
.scroll-area { flex: 1; overflow-y: auto; scroll-behavior: smooth; display: flex; flex-direction: column; }

/* Note: width:100% must be explicit here, and .container must not be globally
   capped with max-width. The parent .scroll-area is a flex column, and an
   ancestor's auto margin cancels the flex cross-axis stretch — with only
   `max-width: 800px; margin: 0 auto` the width collapses to fit-content
   (300px in practice), shrinking the "Spaces" heading into the middle and
   narrowing the card grid. Setting width:100% pins the width so the heading
   stays left and the grid fills the row.
   The reading view is the exception: its cap is applied only to
   .article.is-reading (see below) with an explicit width. */
.container {
  width: 100%;
  padding: clamp(22px, 4vw, 46px) clamp(18px, 4.5vw, 40px) 90px;
}

/* ---------- Reading-view width: capped by default, draggable on desktop ---------- */
/* Full width for "space overview / space index / editor" is the intent of the new
   layout, but body text at 150+ characters per line is hard to read, so
   .article.is-reading alone is capped and centered. Width has a single source of
   truth in --reading-w on the root element, written by app.ts on drag/reset and
   persisted to localStorage; the CSS min() is the last safety net against
   overflowing the visible area once the window narrows. */
.article.is-reading {
  position: relative;
  width: 100%;
  max-width: min(var(--reading-w, 760px), calc(100% - 24px));
  margin-inline: auto;
  transition: max-width .16s ease;
}
/* The drag handle hugs the right edge of the text column and follows width changes; transitions are disabled while dragging or it would lag behind the cursor */
body.reading-resizing .article.is-reading { transition: none; }
.reading-handle {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 18px;
  transform: translateX(50%);
  display: flex; align-items: center; justify-content: center;
  cursor: col-resize;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  color: var(--text-3);
}
.reading-handle::before {
  content: '';
  width: 4px; height: 96px; max-height: 60%;
  border-radius: 99px;
  background: currentColor;
  opacity: .28;
  transition: opacity .15s ease, background-color .15s ease, height .15s ease;
}
.reading-handle:hover::before,
.reading-handle:focus-visible::before { opacity: 1; background: var(--accent); height: 150px; }
body.reading-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
/* A narrow single-column layout is already tight enough; capping adds nothing but eats the 24px of breathing room */
@media (max-width: 900px) {
  .article.is-reading { max-width: 100%; }
  .reading-handle { display: none; }
}
/* Touch screens have no mouse, so this handle is neither visible nor useful */
@media (hover: none) {
  .reading-handle { display: none; }
}

/* ---------- Article typography (reading view) ---------- */
.article { animation: rise .3s cubic-bezier(.2,.8,.25,1); }
@keyframes rise { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none;} }

.meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-bottom: 8px;
  font-size: 12.5px; color: var(--text-3);
}
.meta-row .sep { opacity: .5; }
.slug-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 1.5px 8px; border-radius: 99px;
  color: var(--text-2);
}
.article > h1:first-of-type { margin-top: 2px; }

.article h1, .article h2, .article h3, #editor h1, #editor h2, #editor h3 {
  line-height: 1.32; letter-spacing: -.02em; font-weight: 700;
  scroll-margin-top: 110px;
}
h1 { font-size: clamp(1.65rem, 3.4vw, 2.1rem); margin: 1.15em 0 .55em; }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.55rem); margin: 1.8em 0 .55em; padding-top: .35em; }
h3 { font-size: 1.13rem; margin: 1.5em 0 .4em; }
p { margin: .85em 0; color: var(--text); }
.article a, #editor a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.article a:hover, #editor a:hover { text-decoration-color: var(--accent); }

ul, ol { padding-left: 1.45em; margin: .8em 0; }
li { margin: .34em 0; }
li::marker { color: var(--accent); }

blockquote {
  margin: 1.2em 0; padding: .8em 1.15em;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--accent-soft);
  color: var(--text-2);
}
blockquote p { margin: .25em 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "JetBrains Mono", monospace;
  font-size: .86em;
  background: var(--code-bg); color: var(--code-ink);
  padding: .16em .42em; border-radius: 6px;
}
pre {
  background: var(--pre-bg); color: var(--pre-ink);
  padding: 16px 18px; border-radius: 12px;
  overflow-x: auto;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  line-height: 1.68;
}
pre code { background: none; color: inherit; padding: 0; font-size: 13px; }

hr { border: none; border-top: 1px solid var(--border); margin: 2.4em 0; }
img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow-md); }
s, del, strike { color: var(--text-3); }
u { text-decoration-color: var(--accent-soft-u); text-underline-offset: 3px; }

.heading-anchor {
  margin-left: .45em;
  color: var(--text-3);
  text-decoration: none;
  opacity: 0; transition: opacity .15s ease;
  font-weight: 400; font-size: .82em;
}
h2:hover .heading-anchor, h3:hover .heading-anchor { opacity: 1; }
.heading-anchor:hover { color: var(--accent); opacity: 1; }

/* ---------- Edit view ---------- */
.edit-wrap { animation: fadein .2s ease; }
#title-input {
  width: 100%;
  font: inherit;
  font-size: clamp(1.5rem, 3.2vw, 1.95rem);
  font-weight: 700; letter-spacing: -.02em;
  color: var(--text);
  background: transparent;
  border: none; outline: none;
  padding: 2px 0 10px;
  border-bottom: 1.5px dashed var(--border-strong);
  margin-bottom: 18px;
  transition: border-color .2s ease;
}
#title-input:focus { border-bottom-color: var(--accent); }
#title-input::placeholder { color: var(--text-3); font-weight: 600; }

#editor {
  min-height: 56vh;
  outline: none;
  caret-color: var(--accent);
}
#editor:empty::before, #editor p:only-child:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  pointer-events: none;
}

/* Markdown source surface: shares the visual editor's metrics so hot-switching does not
   jump. Monospace and a real scrollbar (content may be long and lines must not wrap away). */
.source-editor {
  display: block; width: 100%; min-height: 56vh;
  font: 14px/1.75 ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 16px 18px;
  outline: none; resize: vertical;
  tab-size: 2;
  caret-color: var(--accent);
  transition: border-color .2s ease, background-color .25s ease;
}
.source-editor:focus { border-color: var(--accent); }
.source-editor::placeholder { color: var(--text-3); }

.edit-hint { font-size: 12.5px; color: var(--text-3); margin-top: 26px; }

/* ---------- Edit-mode segmented control ---------- */
.seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.seg-btn {
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-2);
  background: transparent; border: none; border-radius: 7px;
  padding: 4px 10px; cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.is-on { color: var(--accent); background: var(--accent-soft); }

/* ---------- Toolbar ---------- */
#toolbar-wrap {
  position: sticky; top: 0; z-index: 30;
  /* The toolbar box shrinks to its buttons and centers itself, so no dead width is left
     inside the box. The wrap keeps the container padding so the box never touches the
     viewport edges. */
  padding: 10px clamp(18px, 4.5vw, 40px) 4px;
  background: linear-gradient(var(--bg) 62%, transparent);
}
#toolbar {
  display: flex; align-items: center; gap: 2px;
  width: fit-content; max-width: 100%;
  margin-inline: auto;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: var(--shadow-md);
  overflow-x: auto; scrollbar-width: none;
  animation: rise .25s cubic-bezier(.2,.8,.25,1);
}
#toolbar::-webkit-scrollbar { display: none; }
.tbtn {
  flex: none;
  display: inline-grid; place-items: center;
  min-width: 33px; height: 33px; padding: 0 7px;
  border: none; border-radius: 8px;
  background: transparent; color: var(--text-2);
  font-size: 14px; line-height: 1;
  transition: background-color .12s ease, color .12s ease;
}
.tbtn.b b, .tbtn.b i, .tbtn.b u, .tbtn.b s { font-size: 14.5px; }
.tbtn.mono { font-size: 12px; font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.tbtn:hover { background: var(--bg-hover); color: var(--text); }
.tbtn.active { background: var(--accent-soft); color: var(--accent); }
.tsep { width: 1px; height: 19px; margin: 0 6px; flex: none; background: var(--border); }

/* ---------- Empty state ---------- */
.empty {
  text-align: center; padding-top: 12vh;
  animation: rise .35s cubic-bezier(.2,.8,.25,1);
}
.empty h2 { margin: 18px 0 6px; font-size: 1.25rem; }
.empty p { color: var(--text-3); margin: 0 0 22px; }
.e-card { fill: var(--bg-elev); stroke: var(--border-strong); stroke-width: 2; }
.e-line { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; fill: none; opacity: .55; }

/* ---------- Scrim / drawer / modal / toasts ---------- */
#scrim { position: fixed; inset: 57px 0 0 0; background: var(--scrim); z-index: 29; animation: fadein .2s ease; border: 0; }

.modal-root { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--scrim); backdrop-filter: blur(3px); animation: fadein .18s ease; }
.modal {
  position: relative; width: min(420px, 100%);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 22px;
  animation: pop .2s cubic-bezier(.2,.9,.3,1.2);
}
.modal h3 { margin: 0 0 6px; font-size: 16.5px; }
.modal .desc { margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); }
#search, .modal input, .modal select {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  font: inherit; font-size: 15px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.theme-dark #search,
.theme-dark .modal input, .theme-dark .modal select {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
#search { padding: 10px 14px; }
#search:hover, .modal input:hover, .modal select:hover { border-color: var(--border-strong); }
#search::placeholder, .modal input::placeholder { color: var(--text-3); }
#search:focus, .modal input:focus, .modal select:focus {
  border-color: var(--accent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.modal input { padding: 12px 14px; margin-bottom: 16px; }
.modal input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; }
.btn-danger { background: var(--danger); border-color: transparent; color: #fff; }
.btn-danger:hover { filter: brightness(1.08); border-color: transparent; }

#toasts {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 99; display: grid; gap: 8px; justify-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  background: var(--text); color: var(--bg-elev);
  font-size: 13.5px; font-weight: 550;
  padding: 10px 18px; border-radius: 99px;
  box-shadow: var(--shadow-lg);
  animation: toastin .3s cubic-bezier(.2,.9,.3,1.2);
}
.toast.out { animation: toastout .25s ease forwards; }
@keyframes toastin { from { opacity: 0; transform: translateY(14px) scale(.94);} to { opacity: 1; transform: none;} }
@keyframes toastout { to { opacity: 0; transform: translateY(10px) scale(.96);} }

/* ---------- Filing number (page bottom) ---------- */
/* Injected by the server from DOCLIGHT_* environment variables; the whole block
   is absent when unconfigured (renderFooter returns an empty string). It works
   with the .scroll-area flex column: the footer sticks to the bottom when content
   is shorter than one screen and follows the body naturally when it is longer.
   Offsetting .container's bottom padding with a negative margin would also "look
   right", but in the empty state (no .container) it pushes the footer against the
   buttons. */
.site-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 14px;
  margin-top: auto;
  padding: 10px clamp(18px, 4.5vw, 40px) 26px;
  font-size: 12.5px; line-height: 1.7;
  color: var(--text-3);
  text-align: center;
}
.sf-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* The filing number is legally mandated public information; links use --text-2 rather than the fainter --text-3 to stay readable */
.sf-link {
  color: var(--text-2);
  text-decoration: none;
  transition: color .15s ease;
}
.sf-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* The footer badge is an image, so it must opt out of the article-level `img` decorations
   (border-radius/box-shadow) that would clip and ring a 16px icon. */
.sf-badge { flex: none; width: 16px; height: 16px; object-fit: contain; border-radius: 0; box-shadow: none; }
/* Client-side stand-in shown only when the official image fails to load; it follows the theme. */
svg.sf-badge { color: var(--text-3); }
.sf-link:hover svg.sf-badge { color: currentColor; }

/* ---------- Responsive ---------- */
#btn-menu { display: none; }
@media (max-width: 900px) {
  #btn-menu { display: inline-grid; }
  #layout { height: calc(100vh - 53px); height: calc(100dvh - 53px); }
  #sidebar {
    position: fixed; top: 53px; bottom: 0; left: 0; z-index: 30;
    transform: translateX(-102%);
    box-shadow: var(--shadow-lg);
    width: 280px;
  }
  body.side-open #sidebar { transform: none; }
  #topbar { height: 53px; }
  .crumb { display: none; }
  .cluster .btn { padding: 8px 11px; }
  #cluster-edit kbd { display: none; }
  /* The edit cluster gains the mode toggle; tighten it so the topbar never overflows. */
  #cluster-edit { gap: 6px; }
  #cluster-edit .seg-btn { padding: 3px 7px; font-size: 12px; }
  .container { padding-bottom: 60px; }
}

/* ---------- Print ---------- */
@media print {
  #topbar, #sidebar, #toolbar-wrap, #edit-wrap, #toasts, #modal-root, #scrim, .meta-row, .site-footer { display: none !important; }
  #layout, .scroll-area { height: auto; overflow: visible; }
  body { background: #fff; }
  /* Paper width is fixed, so both the cap and the drag handle are meaningless: body text must fill the printable area.
     The selector must match .article.is-reading in specificity; a bare .article would lose to it. */
  .article.is-reading { max-width: none; }
  .reading-handle { display: none !important; }
}

/* ---------- Tree sidebar / breadcrumb / space cards ---------- */
.tree-row { display: flex; align-items: stretch; }
.caret {
  width: 20px; flex: none; margin-left: 6px;
  border: none; border-radius: 8px; background: none; color: var(--text-3);
  display: grid; place-items: center; cursor: pointer;
}
.caret:hover { color: var(--text); background: var(--bg-hover); }
.caret svg { transition: transform .16s ease; }
.caret.open svg { transform: rotate(90deg); }
.page-item { flex: 1; min-width: 0; }

.crumbs { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .cur { color: var(--text-2); font-weight: 600; }
.heading-anchor svg { vertical-align: -2px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 20px; }
.card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 14px;
  text-decoration: none; color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card .t { font-weight: 650; font-size: 15px; }
.card .s { font-size: 12px; color: var(--text-3); }
.overview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.overview-head h1 { margin: 0; }

.modal select {
  padding: 12px 40px 12px 14px; margin-bottom: 16px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%239197ab' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
}
.modal select option { background: var(--bg-elev); color: var(--text); }
.modal select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- Sidebar inline quick actions (revealed on hover, Yuque-style) ---------- */
.row-actions { display: none; align-items: center; gap: 1px; margin-right: 6px; }
.tree-row:hover .row-actions,
.tree-row.is-active .row-actions,
.space-row:hover .row-actions,
.space-row.is-active .row-actions { display: inline-flex; }
/* Space rows stretch their children, so the actions need their own centering */
.space-row .row-actions { align-self: center; }
.ra-btn {
  width: 24px; height: 24px; flex: none;
  border: none; border-radius: 6px; background: none; color: var(--text-3);
  display: grid; place-items: center; cursor: pointer;
}
.ra-btn:hover { background: var(--bg-hover); color: var(--text); }
.tree-row .page-item { padding-right: 6px; }
.row-menu { position: fixed; right: auto; z-index: 70; } /* Must cancel .menu's right:0; otherwise inline left+right both apply and stretch the menu full width */
@media (hover: none) {
  /* Touch devices have no hover to reveal these actions, so they must stay
     permanently visible. Dimming them with opacity:.55 multiplied an already
     dark --text-3 (about #3f4350 effectively in dark mode, roughly 1.9:1) —
     below the 3:1 minimum for non-text UI, which made them nearly invisible on
     phones. Use the solid --text-2 instead, without stacking transparency. */
  .row-actions { display: inline-flex; }
  .ra-btn { color: var(--text-2); }
  .tree-row.is-active .ra-btn { color: var(--text); }
}

/* ---------- Space model: sidebar sections / space index page ---------- */
.space-row {
  display: flex; align-items: stretch;
  padding: 10px 6px 4px;
}
.space-row .space-title {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6px 10px;
  border-radius: 10px;
  text-decoration: none; color: var(--text);
  transition: background-color .12s ease;
}
.space-row .space-title:hover { background: var(--bg-hover); }
.space-row .space-title .t {
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-3); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.space-row .space-title .s { display: none; }
.space-row.is-active .space-title .t { color: var(--accent); }
.space-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.space-head h1 { margin: 0; }
.space-desc { color: var(--text-2); margin: 8px 0 0; font-size: 14px; }
.space-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 8px; }
/* The order picker sits with the actions but reads as a setting, not a button. */
.sort-pick {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-2);
}
.sort-pick select {
  font: inherit; color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 5px 8px; cursor: pointer;
}
.sort-pick select:hover { border-color: var(--accent); }
.sort-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.danger-text { color: var(--danger); }
.danger-text:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.card .d { font-size: 13px; color: var(--text-2); }