/* OneRing default theme — a quiet, sumi-e reading room.
   Neutral paper, charcoal ink, vermilion seal accents, serif for headings and
   prose, sans for chrome and dense data. Every color is a custom
   property; personal CSS (/-/style) overrides freely. */

:root {
  --bg: #fbfaf7;
  --bg-alt: #f2f0eb;
  --fg: #292825;
  --fg-muted: #716e67;
  --line: #dedbd3;
  --accent: #922f25;
  --accent-soft: #f4e7e2;
  --missing: #49627b;
  --red: #922f25;
  --red-soft: #f4e7e2;
  --mark: #ece8d9;
  --code-bg: #f2f0eb;
  --sidebar-bg: #f6f4ef;
  --editor-paper: #ffffff;
  --editor-ink: #292825;
  --shadow: 0 1px 2px rgba(36,35,32,.07);

  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1d1b; --bg-alt: #262522; --fg: #e9e7e0; --fg-muted: #a19d92;
    --line: #3b3934; --accent: #d27663; --accent-soft: #3d2925; --missing: #91a9c3;
    --red: #d27663; --red-soft: #3d2925; --mark: #464335;
    --code-bg: #262522; --sidebar-bg: #22211f; --shadow: 0 1px 3px rgba(0,0,0,.35);
  }
}
:root[data-theme="light"] {
  --bg: #fbfaf7; --bg-alt: #f2f0eb; --fg: #292825; --fg-muted: #716e67;
  --line: #dedbd3; --accent: #922f25; --accent-soft: #f4e7e2; --missing: #49627b;
  --red: #922f25; --red-soft: #f4e7e2; --mark: #ece8d9;
  --code-bg: #f2f0eb; --sidebar-bg: #f6f4ef; --shadow: 0 1px 2px rgba(36,35,32,.07);
}
:root[data-theme="dark"] {
  --bg: #1d1d1b; --bg-alt: #262522; --fg: #e9e7e0; --fg-muted: #a19d92;
  --line: #3b3934; --accent: #d27663; --accent-soft: #3d2925; --missing: #91a9c3;
  --red: #d27663; --red-soft: #3d2925; --mark: #464335;
  --code-bg: #262522; --sidebar-bg: #22211f; --shadow: 0 1px 3px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--bg); color: var(--fg);
  font: 15px/1.5 var(--font-sans);
  display: flex;
}
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: currentColor; }
code, pre, kbd, .css-editor, #editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}

/* ---- sidebar ---- */
.sidebar {
  width: 240px; flex: none; padding: 14px 16px 10px;
  background: var(--sidebar-bg); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand a {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-serif); font-size: 20px; font-weight: 600;
  letter-spacing: -.01em; color: var(--fg); border-bottom: none;
}
.brand a:hover { color: var(--accent); }
.ring-icon { color: var(--accent); flex-shrink: 0; }
.searchbox input {
  width: 100%; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--fg); font-size: 13px; font-family: var(--font-sans);
}
.searchbox input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.sidebar h3 {
  margin: 0 0 3px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}
.sidebar nav ul { list-style: none; margin: 0; padding: 0; }
.sidebar nav li { margin: 0; }
.sidebar nav a {
  display: block; padding: 2px 6px; margin-left: -6px; border-radius: 5px; border-bottom: none;
  color: var(--fg); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar nav a:hover { background: var(--accent-soft); }
.sidebar nav a.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tree details { margin-left: 2px; }
.tree details > ul { margin-left: 12px; border-left: 1px solid var(--line); padding-left: 6px; }
.tree summary {
  cursor: pointer; font-size: 13.5px; padding: 2px 0; color: var(--fg-muted);
  list-style-position: outside;
}
.tree summary:hover { color: var(--fg); }
.tree summary .tree-folder { color: var(--fg-muted); border-bottom: none; }
.tree summary .tree-folder:hover { color: var(--accent); border-bottom: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sidebar-foot { margin-top: auto; font-size: 12px; color: var(--fg-muted); border-top: 1px solid var(--line); padding-top: 8px; }
.sidebar-foot p { margin: 4px 0; }
.sidebar-foot a { border-bottom: none; }
.sidebar-foot a:hover { border-bottom: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.userline { display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }
#nav-btn { display: none; }

/* ---- main column ---- */
main { flex: 1; min-width: 0; padding: 0 40px 40px; }
main.solo { display: grid; place-items: center; padding: 20px; }
.topbar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: 13px; min-height: 38px;
}
.crumbs a { color: var(--fg-muted); border-bottom: none; }
.crumbs a:hover { color: var(--fg); border-bottom: 1px solid currentColor; }
.crumbs .sep { color: var(--line); margin: 0 4px; }
.actions { display: flex; gap: 14px; white-space: nowrap; }
.actions a { border-bottom: none; }
.actions a:hover { border-bottom: 1px solid currentColor; }
.page-access-button { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; padding: 2px 4px; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; }
.topbar .page-access-button + .actions { margin-left: 8px; }
.access-key { color: var(--fg-muted); font: 500 10.5px/1.3 var(--font-sans); letter-spacing: .015em; }
.access-values { display: inline-flex; align-items: center; gap: 3px; }
.access-values::before, .access-values::after { color: var(--line); font: 12px/1 var(--font-sans); }
.access-values::before { content: "("; }
.access-values::after { content: ")"; }
.access-pill { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-alt); color: var(--fg-muted); font: 600 10.5px/1.3 var(--font-sans); white-space: nowrap; }
.page-access-button:hover .access-pill { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.access-denied-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--red-soft); }
.access-inline { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.permission-dialog form { gap: 8px; padding: 16px; }
.permission-heading { display: flex; align-items: baseline; gap: 10px; }
.permission-heading p { margin: 0; font-size: 12px; }
.permission-users { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 0; }
.permission-dialog .permission-user, .permission-dialog .permission-everyone {
  display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0;
  padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-alt);
}
.permission-dialog .permission-everyone { font-weight: 600; }
.permission-user span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.permission-user small { margin-left: auto; color: var(--fg-muted); white-space: nowrap; font-size: 10.5px; }
.permission-dialog input[type="checkbox"] { flex: none; margin: 0; padding: 0; }
.permission-source, .permission-retention { margin: 0; font-size: 11.5px; line-height: 1.35; }
.permission-source { padding: 6px 8px; border-left: 2px solid var(--line); background: var(--bg-alt); }
.restricted-page { max-width: 680px; }
.sidebar a.locked::after { content: " · locked"; color: var(--fg-muted); font-size: 10px; font-weight: 400; }
.admin-page section { margin-top: 28px; }
.admin-users { display: grid; gap: 8px; }
.admin-user-row { display: grid; grid-template-columns: minmax(110px,.7fr) minmax(190px,1.4fr) auto auto auto auto; align-items: end; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-alt); }
.admin-user-row label, .admin-add-user label, .admin-path-rule label { margin: 0; }
.admin-user-row details { font-size: 12px; }
.admin-add-user, .admin-path-rule { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.admin-add-user h3 { flex-basis: 100%; margin: 0; }
.admin-path-rule fieldset { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 4px 0; }
@media (max-width: 850px) { .admin-user-row { grid-template-columns: 1fr; align-items: stretch; } }
kbd {
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  padding: 0 4px; font-size: 10.5px; color: var(--fg-muted); background: var(--bg-alt);
}

/* ---- article / rendered markdown ---- */
.page { max-width: 50rem; }
.pagetitle {
  font-family: var(--font-serif); font-size: 27px; font-weight: 600;
  letter-spacing: -.01em; margin: 14px 0 10px; line-height: 1.2;
}
.pagetitle em { font-style: normal; color: var(--accent); }
.body { overflow-wrap: break-word; }
.body h1, .body h2, .body h3 { font-family: var(--font-serif); font-weight: 600; }
.body h1 { font-size: 23px; margin: 24px 0 8px; }
.body h2 { font-size: 19px; margin: 22px 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.body h3 { font-size: 16px; margin: 18px 0 4px; }
.body h4, .body h5, .body h6 { font-size: 13px; margin: 14px 0 3px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); }
.body p, .body ul, .body ol { margin: 0 0 11px; }
.body ul, .body ol { padding-left: 24px; }
.body li > ul, .body li > ol { margin-bottom: 0; }
.body blockquote {
  margin: 0 0 11px; padding: 1px 0 1px 16px; border-left: 2px solid var(--accent);
  color: var(--fg-muted); font-family: var(--font-serif); font-style: italic;
}
.body code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
.body pre { background: var(--code-bg); padding: 10px 12px; border-radius: 8px; overflow-x: auto; }
.body pre code { background: none; padding: 0; }
.body img { max-width: 100%; border-radius: 6px; }
.body hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.body table { border-collapse: collapse; margin: 0 0 12px; font-size: 13.5px; }
.body th, .body td { padding: 4px 10px; border: 1px solid var(--line); text-align: left; }
.body th { background: var(--bg-alt); font-weight: 600; }
.body mark, mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }
.body .task-list-item { list-style: none; margin-left: -20px; }

/* ---- attachments gallery ---- */
.attachments { clear: both; margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line); }
.attachments h2 { font-family: var(--font-serif); font-size: 18px; margin: 0 0 10px; }
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; }
.attachment-card { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-alt); color: var(--fg); }
.attachment-card:hover { border-color: var(--accent); }
.attachment-card img { display: block; width: 100%; height: 105px; object-fit: cover; border-radius: 0; }
.attachment-card span { display: block; padding: 5px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.attachment-card .attachment-document { display: grid; place-items: center; height: 105px; border-bottom: 1px solid var(--line); color: var(--accent); font: 600 22px/1 var(--font-serif); letter-spacing: .08em; }

a.wikilink.missing { color: var(--missing); }
a.wikilink.missing:hover { border-bottom-style: dashed; }

/* ---- family trees ---- */
.family-tree-wrap { max-width: 100%; overflow-x: auto; margin: 0 0 14px; padding: 8px 0; }
.family-tree { display: block; min-width: 420px; width: 100%; height: auto; font-family: var(--font-sans); }
.family-tree-parent { fill: none; stroke: var(--line); stroke-width: 1.5; }
.family-tree-partner { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.family-tree-person rect { fill: var(--bg-alt); stroke: var(--fg-muted); stroke-width: 1; }
.family-tree a .family-tree-person rect { stroke: var(--accent); }
.family-tree a:hover .family-tree-person rect { fill: var(--accent-soft); }
.family-tree-name { fill: var(--fg); font-size: 12px; font-weight: 600; text-anchor: middle; }
.family-tree-note { fill: var(--fg-muted); font-size: 10px; text-anchor: middle; }
.family-tree-error { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--red); background: var(--red-soft); color: var(--red); }
.family-tree-error ul { margin: 4px 0 0; padding-left: 20px; }

/* ---- infobox ---- */
.infobox {
  float: right; margin: 0 0 12px 20px; max-width: 260px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12.5px; box-shadow: var(--shadow);
}
.infobox table { border-collapse: collapse; width: 100%; }
.infobox caption {
  font-family: var(--font-serif); font-weight: 600; font-size: 14.5px;
  padding: 9px 10px 5px; text-align: left; caption-side: top;
}
.infobox th, .infobox td { padding: 3px 10px; vertical-align: top; text-align: left; border-top: 1px solid var(--line); }
.infobox th { color: var(--fg-muted); font-weight: 600; white-space: nowrap; }
.infobox-preview { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin-bottom: 10px; font-size: 12.5px; }
.infobox-preview .kv { margin-right: 12px; }

/* ---- footer link sections ---- */
.linkfoot {
  display: flex; gap: 28px; flex-wrap: wrap; max-width: 50rem;
  margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 13px;
}
.linkfoot h4 { margin: 0 0 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--fg-muted); font-weight: 600; }
.linkfoot ul { list-style: none; margin: 0; padding: 0; }
.linkfoot li { padding: 1px 0; }
.editline { color: var(--fg-muted); font-size: 12.5px; margin-top: 18px; }
.editline a { border-bottom: none; }
.editline a:hover { border-bottom: 1px solid currentColor; }

/* ---- editor ---- */
.editor-page { max-width: none; }
.editor-mode-picker { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--fg-muted); font-size: 12.5px; }
.editor-mode-picker button { padding: 3px 9px; font-size: 12px; }
.editor-mode-picker button.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.draft-notice { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--mark); font-size: 13px; }
.draft-notice[hidden] { display: none; }
.draft-actions { display: flex; gap: 6px; flex: none; }
.draft-actions button { padding: 4px 9px; font-size: 12px; }
.editor-split { display: flex; gap: 14px; height: calc(100vh - 220px); min-height: 320px; }
.editor-pane { flex: 1; min-width: 0; }
.editor-split.mode-focus .editor-pane { flex-basis: 100%; }
.editor-split.mode-focus .preview-pane { display: none; }
.editor-split.mode-rich .preview-pane { display: none; }
#editor {
  width: 100%; height: 100%; resize: none; padding: 12px 14px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg);
  tab-size: 4;
}
#editor:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#editor.dragover { outline: 2px dashed var(--accent); outline-offset: -2px; }
.rich-workspace { position: relative; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--editor-paper); box-shadow: 0 2px 10px rgba(36,35,32,.06); }
.rich-workspace[hidden] { display: none; }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 7px; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.rich-toolbar button { padding: 3px 8px; font-size: 12px; }
.rich-toolbar button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.rich-details-panel { padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.rich-details-panel summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }
.rich-details-panel .muted { margin: 7px 0; font-size: 12px; }
.rich-details-panel .button { margin-top: 7px; }
.rich-editor {
  --bg: var(--editor-paper); --bg-alt: #f3f1ec; --fg: var(--editor-ink);
  --fg-muted: #716e67; --line: #dedbd3;
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; outline: none;
  background: var(--bg); color: var(--fg); caret-color: var(--accent);
}
.rich-editor:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.rich-editor:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.rich-editor .ProseMirror { min-height: 100%; outline: none; }
.rich-editor .ProseMirror > :first-child { margin-top: 0; }
.rich-editor .ProseMirror > :last-child { margin-bottom: 0; }
.rich-editor .is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--fg-muted); pointer-events: none; }
.rich-editor ul[data-type="taskList"] { list-style: none; padding-left: 3px; }
.rich-editor ul[data-type="taskList"] li { display: flex; gap: 7px; align-items: flex-start; }
.rich-editor ul[data-type="taskList"] li > label { padding-top: 2px; }
.rich-editor ul[data-type="taskList"] li > div { flex: 1; min-width: 0; }
.rich-editor img.ProseMirror-selectednode, .rich-editor table.ProseMirror-selectednode { outline: 2px solid var(--accent); outline-offset: 2px; }
.structured-wikilink { display: inline; padding: 1px 3px; border-radius: 3px; background: var(--accent-soft); color: var(--accent); cursor: default; }
.structured-wikilink.ProseMirror-selectednode { outline: 1px solid var(--accent); }
.rich-editor pre:has(code.language-family-tree) { position: relative; padding-top: 31px; border: 1px dashed var(--missing); background: var(--accent-soft); }
.rich-editor pre:has(code.language-family-tree)::before { content: "Family tree · structured source"; position: absolute; top: 6px; left: 10px; color: var(--missing); font: 600 11px/1.4 var(--font-sans); letter-spacing: .03em; }
.rich-editor > :first-child { margin-top: 0; }
.rich-editor > :last-child { margin-bottom: 0; }
.rich-editor .protected-block { padding: 10px 12px; border: 1px dashed var(--missing); border-radius: 6px; background: var(--accent-soft); color: var(--fg-muted); font: 12px/1.4 ui-monospace, monospace; white-space: pre-wrap; }
.rich-editor .rich-infobox { float: right; width: min(240px, 42%); margin: 0 0 14px 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-alt); color: var(--fg-muted); font-size: 12px; }
.rich-editor .rich-infobox strong { display: block; color: var(--fg); font-family: var(--font-serif); font-size: 14px; margin-bottom: 5px; }
.rich-editor .rich-infobox span { display: block; padding-top: 2px; }
.rich-editor input.rich-task { appearance: none; width: 15px; height: 15px; vertical-align: -2px; margin: 0 6px 0 0; border: 1px solid var(--fg-muted); border-radius: 3px; background: var(--bg); cursor: pointer; }
.rich-editor input.rich-task:checked { background: var(--accent); border-color: var(--accent); }
.rich-editor input.rich-task:checked::after { content: "✓"; display: block; color: var(--bg); font-size: 12px; line-height: 13px; text-align: center; }
.editor-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--fg); box-shadow: var(--shadow); }
.editor-dialog::backdrop { background: rgba(25,24,22,.35); }
.editor-dialog form, .editor-dialog .dialog-panel { display: flex; flex-direction: column; gap: 11px; padding: 18px; }
.editor-dialog h2 { margin: 0; font-family: var(--font-serif); font-size: 20px; }
.editor-dialog label { display: flex; flex-direction: column; gap: 4px; color: var(--fg-muted); font-size: 12.5px; }
.editor-dialog input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--fg); font: inherit; }
.editor-dialog select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--fg); font: inherit; }
.editor-dialog menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 4px 0 0; }
.folder-picker { padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-alt); }
.folder-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg-muted); font-size: 12.5px; }
.folder-picker-head button { padding: 3px 7px; font-size: 12px; }
.folder-current { margin: 6px 0; color: var(--accent); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.folder-list { display: grid; gap: 3px; max-height: 150px; overflow-y: auto; }
.folder-list button { display: block; width: 100%; padding: 5px 7px; text-align: left; border-color: transparent; background: var(--bg); }
.folder-list button:hover { border-color: var(--line); background: var(--accent-soft); }
.folder-empty { margin: 2px 0; color: var(--fg-muted); font-size: 12px; }
.dialog-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-fields { display: flex; flex-direction: column; gap: 7px; }
.info-row { display: grid; grid-template-columns: minmax(90px, .6fr) 1.4fr auto; gap: 6px; align-items: end; }
.info-row button { padding: 6px 9px; color: var(--red); }
.template-picker { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-alt); }
.template-picker h2 { margin: 0; font-family: var(--font-serif); font-size: 17px; }
.template-picker p { margin: 2px 0 9px; font-size: 12.5px; }
.template-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.template-grid button { padding: 5px 9px; font-size: 12.5px; }
.link-picker-results { display: grid; gap: 4px; max-height: 180px; overflow-y: auto; }
.link-picker-results button { display: block; width: 100%; padding: 6px 8px; text-align: left; }
.link-picker-results small { display: block; color: var(--fg-muted); }
.preview-pane {
  overflow-y: auto; padding: 12px 14px; border: 1px dashed var(--line);
  border-radius: 8px; background: var(--bg-alt);
}
.editor-bar { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.editor-bar input[type=text] {
  flex: 1; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--fg); font-family: var(--font-sans);
}
.css-editor { width: 100%; height: 50vh; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); resize: vertical; }
.pushright { margin-left: auto; }
.edit-note-button { flex: none; color: var(--fg-muted); }
.edit-note-button.has-note { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.editor-status { flex: none; max-width: 14rem; color: var(--fg-muted); font-size: 11.5px; white-space: nowrap; }
.editor-status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--fg-muted); }
.editor-status[data-state="saved"]::before { background: #617d57; }
.editor-status[data-state="saving"]::before { background: var(--missing); animation: status-pulse 1s infinite alternate; }
.editor-status[data-state="changed"]::before, .editor-status[data-state="local"]::before { background: #b27a32; }
.editor-status[data-state="error"] { color: var(--red); }
.editor-status[data-state="error"]::before { background: var(--red); }
@keyframes status-pulse { to { opacity: .25; } }
.editor-more { position: relative; flex: none; }
.editor-more > summary { padding: 6px 9px; border-radius: 6px; color: var(--fg-muted); cursor: pointer; font-size: 12px; list-style: none; }
.editor-more > summary::-webkit-details-marker { display: none; }
.editor-more > summary::after { content: " ···"; }
.editor-more[open] > summary { background: var(--bg-alt); color: var(--fg); }
.editor-more > div { position: absolute; right: 0; bottom: calc(100% + 5px); z-index: 6; display: grid; gap: 3px; min-width: 150px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); box-shadow: var(--shadow); }
.editor-more > div button { width: 100%; padding: 6px 8px; text-align: left; white-space: nowrap; }
.block-tools { display: none; align-items: center; gap: 4px; padding: 5px 8px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--missing) 6%, var(--bg-alt)); color: var(--fg-muted); font-size: 11px; overflow-x: auto; }
.block-tools span { margin-right: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.block-tools button { flex: none; padding: 3px 6px; font-size: 11px; }
.rich-workspace.editing-table .table-tools { display: flex; }
.slash-menu { position: absolute; z-index: 12; width: min(310px, calc(100% - 16px)); max-height: 290px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); box-shadow: 0 8px 28px rgba(25,24,22,.18); }
.slash-menu[hidden] { display: none; }
.slash-menu button { display: grid; width: 100%; padding: 7px 9px; border-color: transparent; background: transparent; text-align: left; }
.slash-menu button:hover, .slash-menu button.selected { border-color: transparent; background: var(--accent-soft); }
.slash-menu strong { color: var(--fg); font-size: 13px; }
.slash-menu small { color: var(--fg-muted); font-size: 11px; }

/* ---- profile ---- */
.profile-page { max-width: 68rem; }
.profile-sections { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr); gap: 18px; align-items: start; }
.profile-section { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-alt); }
.profile-section h2 { margin: 0; font: 600 19px/1.3 var(--font-serif); }
.profile-section > .muted { margin: 3px 0 12px; font-size: 12.5px; }
.profile-section.narrow-form { max-width: none; }
.profile-style .css-editor { height: 320px; min-height: 180px; background: var(--bg); }
.profile-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

/* ---- calendar ---- */
.calendar-page { max-width: 92rem; }
.calendar-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 10px; }
.calendar-heading .pagetitle { margin-bottom: 2px; }
.calendar-heading p { margin: 0; }
.calendar-nav { display: flex; gap: 6px; }
.calendar-nav .button { min-width: 38px; padding: 5px 10px; text-align: center; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 9px 0 14px; color: var(--fg-muted); font-size: 12px; }
.calendar-legend span, .calendar-legend label { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend label { cursor: pointer; }
.calendar-legend label.disabled { opacity: .48; }
.calendar-legend label.disabled span { text-decoration: line-through; }
.calendar-legend input[type=checkbox] { width: 14px; height: 14px; margin: 0; accent-color: var(--event-color); }
.calendar-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--event-color); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.calendar-source-save { padding: 2px 8px; font-size: 11px; }
.calendar-source-help { margin: -9px 0 13px; font-size: 11px; }
.calendar-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.calendar-month { min-width: 0; }
.calendar-month h2 { margin: 0 0 7px; font: 600 18px/1.25 var(--font-serif); text-align: center; }
.calendar-month.focus-month h2 { color: var(--accent); }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { color: var(--fg-muted); font-size: 9px; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.calendar-weekdays span { padding: 2px 0 5px; }
.calendar-grid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--line); gap: 1px; }
.calendar-day { min-height: 88px; min-width: 0; padding: 4px; background: var(--bg); overflow: hidden; }
.calendar-day.empty { background: var(--bg-alt); opacity: .45; }
.calendar-day > time { display: grid; place-items: center; width: 22px; height: 22px; margin: 0 0 2px auto; color: var(--fg-muted); font-size: 11px; border-radius: 50%; }
.calendar-day.today { position: relative; background: color-mix(in srgb, var(--accent-soft) 40%, var(--bg)); box-shadow: inset 0 0 0 1px var(--accent); }
.calendar-day.today > time { color: var(--bg); background: var(--accent); font-weight: 700; }
.calendar-day.past:not(.today) > time { opacity: .55; }
.calendar-day-events { display: grid; gap: 2px; }
.calendar-event { display: block; width: 100%; min-width: 0; padding: 2px 3px 2px 5px; border: 0; border-left: 3px solid var(--event-color); border-radius: 2px; background: color-mix(in srgb, var(--event-color) 9%, var(--bg)); color: var(--fg); font-size: 9.5px; line-height: 1.25; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
button.calendar-event:hover { color: var(--accent); border-bottom: 0; background: color-mix(in srgb, var(--event-color) 16%, var(--bg)); }
.calendar-event small { margin-right: 3px; color: var(--fg-muted); font-size: 8.5px; }
.calendar-event.past { opacity: .5; }
.calendar-event.completed { text-decoration: line-through; opacity: .5; }
.calendar-agenda { margin-top: 22px; max-width: 52rem; }
.calendar-agenda h2 { margin: 0 0 8px; font: 600 18px/1.3 var(--font-serif); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.calendar-agenda ol { list-style: none; margin: 0; padding: 0; }
.calendar-agenda li { display: grid; grid-template-columns: 5px 1fr; gap: 9px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.calendar-agenda li > i { width: 4px; border-radius: 2px; background: var(--event-color); }
.calendar-agenda li > span { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.calendar-agenda time, .calendar-agenda small { color: var(--fg-muted); font-size: 11px; }
.calendar-agenda li.past { opacity: .52; }
.calendar-agenda li.completed .calendar-agenda-event { text-decoration: line-through; }
.calendar-agenda .calendar-agenda-event { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-align: left; }
.calendar-agenda .calendar-agenda-event:hover { border-bottom: 1px solid currentColor; }
.calendar-past-events { margin-top: 10px; }
.calendar-past-events summary { width: fit-content; padding: 5px 8px; border-radius: 5px; color: var(--fg-muted); cursor: pointer; font-size: 12.5px; }
.calendar-past-events summary:hover { color: var(--accent); background: var(--bg-alt); }
.calendar-past-events[open] summary { margin-bottom: 4px; }
.calendar-dialog-heading { display: flex; align-items: flex-start; gap: 10px; }
.calendar-dialog-heading > i { width: 10px; height: 34px; flex: none; border-radius: 5px; background: var(--accent); }
.calendar-dialog-heading h2 { margin: 0; }
.calendar-dialog-heading p { margin: 1px 0 0; font-size: 12px; }
.calendar-event-dialog dl { display: grid; gap: 7px; margin: 2px 0; }
.calendar-event-dialog dl > div { display: grid; grid-template-columns: 4rem 1fr; gap: 8px; }
.calendar-event-dialog [hidden] { display: none; }
.calendar-event-dialog dt { color: var(--fg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.calendar-event-dialog dd { margin: 0; }
.calendar-dialog-details { margin: 3px 0; padding-top: 9px; border-top: 1px solid var(--line); white-space: pre-line; }

button, .button {
  font: inherit; font-family: var(--font-sans); font-size: 13.5px; padding: 6px 14px;
  border-radius: 6px; cursor: pointer; border: 1px solid var(--line);
  background: var(--bg-alt); color: var(--fg); display: inline-block;
}
a.button { border-bottom: none; }
a.button:hover { border-bottom: none; }
button:hover, .button:hover { border-color: var(--fg-muted); }
.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.primary:hover { border-color: var(--accent); filter: brightness(1.08); }
.danger { color: var(--red); background: none; border-color: transparent; }
.danger:hover { background: var(--red-soft); border-color: transparent; }
.linklike {
  border: none; background: none; padding: 0; color: var(--accent);
  cursor: pointer; font: inherit; font-size: inherit; border-bottom: 1px solid transparent;
}
.linklike:hover { border-bottom-color: currentColor; }
form.inline { display: inline; }

/* ---- listings (history, changes) ---- */
.listing { border-collapse: collapse; width: 100%; max-width: 60rem; font-size: 13.5px; }
.listing th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 600; }
.listing th, .listing td { padding: 4px 12px 4px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.listing .files a { margin-right: 8px; font-size: 12.5px; }
.dayhead { font-family: var(--font-serif); font-weight: 600; margin: 20px 0 6px; font-size: 14px; color: var(--fg-muted); }
.nowrap { white-space: nowrap; }

/* ---- search ---- */
.results { list-style: none; padding: 0; max-width: 50rem; }
.results li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.results .hit { font-family: var(--font-serif); font-size: 16px; font-weight: 600; margin-right: 8px; border-bottom: none; }
.results .hit:hover { border-bottom: 1px solid currentColor; }
.snippet { margin: 3px 0 0; font-size: 13px; color: var(--fg-muted); }

/* ---- health ---- */
.health-cols { display: flex; gap: 40px; flex-wrap: wrap; }
.health-cols section { flex: 1; min-width: 280px; }

/* ---- diff ---- */
.diff {
  background: var(--code-bg); padding: 10px 12px; border-radius: 8px; overflow-x: auto;
  font-size: 12.5px; line-height: 1.5; max-width: 60rem;
}
.diff-add { color: #4f6b4a; background: rgba(90,120,70,.10); display: inline-block; width: 100%; }
.diff-del { color: #8f4a3a; background: rgba(143,74,58,.10); display: inline-block; width: 100%; }
.diff-hunk { color: var(--accent); }
.diff-file, .diff-meta { color: var(--fg-muted); }
:root[data-theme="dark"] .diff-add { color: #8fae82; }
:root[data-theme="dark"] .diff-del { color: #c98a72; }

/* ---- banners, login, misc ---- */
.banner { padding: 10px 14px; border-radius: 8px; margin: 10px 0; font-size: 13.5px; }
.banner.warn { background: var(--mark); border: 1px solid rgba(0,0,0,.08); }
.banner.error { background: var(--red-soft); color: var(--red); }
.banner details { margin-top: 6px; }
.banner pre { background: var(--bg); padding: 8px; border-radius: 6px; overflow-x: auto; }

.narrow-form { max-width: 32rem; }
.narrow-form form { display: flex; flex-direction: column; gap: 12px; }
.narrow-form label { font-size: 12.5px; color: var(--fg-muted); display: flex; flex-direction: column; gap: 4px; }
.narrow-form input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); font: inherit; }
.notice, .error { padding: 9px 12px; border-radius: 6px; font-size: 13.5px; }
.notice { background: var(--mark); }
.error { background: var(--red-soft); color: var(--red); }

.login-card { width: 320px; text-align: center; }
.login-card h1 {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-weight: 600; font-size: 30px;
  letter-spacing: -.01em; color: var(--fg); margin-bottom: 2px;
}
.login-card h1 .ring-icon { font-size: 34px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; text-align: left; }
.login-card label { font-size: 12.5px; color: var(--fg-muted); display: flex; flex-direction: column; gap: 4px; }
.login-card input {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--fg); font-size: 15px; font-family: var(--font-sans);
}

.muted { color: var(--fg-muted); }
.hint { font-size: 12.5px; }

::selection { background: var(--accent-soft); }
mark { padding: 0 1px; }

/* ---- print ---- */
@media print {
  .sidebar, .topbar, .editline, .linkfoot, #nav-btn { display: none !important; }
  main { padding: 0; }
  body { font-size: 12px; }
}

/* ---- small screens ---- */
@media (max-width: 900px) {
  #nav-btn {
    display: block; position: fixed; top: 8px; left: 10px; z-index: 20;
    background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
    padding: 4px 10px; font-size: 16px;
  }
  .sidebar {
    position: fixed; z-index: 10; top: 0; bottom: 0; height: 100dvh;
    padding-top: 52px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateX(-100%); transition: transform .15s ease;
    box-shadow: var(--shadow); width: min(300px, 88vw); overscroll-behavior: contain;
  }
  body.nav-open .sidebar { transform: none; }
  main { padding: 0 12px 20px; }
  .topbar { padding: 8px 0 8px 48px; align-items: center; }
  .actions { gap: 4px; }
  .actions a, .actions .linklike { min-height: 38px; padding: 7px 6px; }
  .actions kbd { display: none; }
  body.editing-active main { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  body.editing-active .topbar .actions { display: none; }
  .editor-page .pagetitle { min-height: 34px; margin: 5px 0 7px; padding-left: 42px; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
  .editor-page > .hint { display: none; }
  .editor-mode-picker { overflow-x: auto; margin-bottom: 6px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .editor-mode-picker span { flex: none; }
  .editor-mode-picker button { min-height: 36px; white-space: nowrap; }
  .editor-split { flex-direction: column; height: auto; min-height: 0; }
  .editor-split.mode-rich, .editor-split.mode-focus { height: clamp(320px, calc(100dvh - 180px), 720px); min-height: 0; }
  #editor { height: 52dvh; min-height: 360px; padding: 12px; font-size: 16px; }
  .preview-pane { max-height: 42dvh; }
  .rich-toolbar { flex-wrap: nowrap; overflow-x: auto; padding: 5px 6px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .rich-toolbar, .block-tools { scrollbar-width: none; }
  .rich-toolbar::-webkit-scrollbar, .block-tools::-webkit-scrollbar { display: none; }
  .rich-toolbar button { flex: none; min-width: 40px; min-height: 40px; padding: 5px 8px; scroll-snap-align: start; }
  .rich-details-panel { max-height: 48%; overflow-y: auto; padding: 7px 10px; }
  .rich-editor { padding: 14px 12px max(24px, env(safe-area-inset-bottom)); font-size: 16px; overscroll-behavior: contain; }
  .rich-editor .rich-infobox { float: none; width: auto; margin: 0 0 12px; }
  .editor-page .editor-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; flex-wrap: wrap; gap: 5px 7px; margin: 0; padding: 5px 12px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 96%, transparent); border-top: 1px solid var(--line); box-shadow: 0 -5px 16px rgba(36,35,32,.11); backdrop-filter: blur(8px); }
  .editor-status { order: -1; flex-basis: 100%; max-width: none; min-height: 18px; }
  .editor-bar button, .editor-bar .button { min-height: 36px; padding: 6px 10px; }
  .editor-bar .pushright { margin-left: 0; }
  .editor-more { margin-left: auto; }
  .editor-more > summary { min-height: 36px; padding: 7px 8px; }
  .slash-menu { position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: min(55dvh, 430px); border-radius: 12px; padding: 8px; }
  .slash-menu button { padding: 10px 11px; }
  .draft-notice { align-items: flex-start; flex-direction: column; }
  .dialog-columns { grid-template-columns: 1fr; }
  .editor-dialog { width: calc(100vw - 20px); }
  .editor-dialog input, .editor-dialog select { min-height: 42px; font-size: 16px; }
  .edit-message-dialog[open] { position: fixed; inset: auto 10px calc(10px + env(safe-area-inset-bottom)); width: auto; max-width: none; margin: 0; border-radius: 12px; }
  .permission-dialog input[type="checkbox"] { min-height: 0; width: 18px; height: 18px; }
  .permission-users { grid-template-columns: 1fr; }
  .profile-sections { grid-template-columns: 1fr; gap: 12px; }
  .profile-section { padding: 13px; }
  .profile-style .css-editor { height: 42dvh; min-height: 240px; font-size: 16px; }
  .calendar-heading { align-items: flex-start; }
  .calendar-heading .muted { display: none; }
  .calendar-months { display: block; }
  .calendar-month:not(.focus-month) { display: none; }
  .calendar-day { min-height: 58px; padding: 3px; }
  .calendar-day > time { width: 20px; height: 20px; font-size: 11px; }
  .calendar-event { padding-left: 3px; border-left-width: 2px; font-size: 0; min-height: 7px; }
  .calendar-event small { display: none; }
  .calendar-agenda { margin-top: 18px; }
  .calendar-agenda li { padding: 9px 2px; }
  .calendar-agenda li > span { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .calendar-agenda li > span small { grid-column: 2; }
  .infobox { float: none; margin: 0 0 12px; max-width: none; }
}