/* ─── SmartWiki: the wiki itself ─────────────────────────────────
   Three columns — navigation, the page, "On this page" — that collapse to
   one on phones. Every colour, font and radius comes from tokens set by
   js/theme.js from the wiki's own theme, so no two wikis need their own CSS. */

body { background: var(--bg); }
body.wk-loading .wk-layout, body.wk-loading .wk-top-actions, body.wk-loading .wk-search-trigger { visibility: hidden; }

.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ─── Topbar ─── */
.wk-top {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.wk-nav-toggle { display: none; }
.wk-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
.wk-brand-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); font-size: 32px; overflow: hidden; }
.wk-brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-search-trigger {
  display: flex; align-items: center; gap: 8px; width: min(420px, 38vw); height: 36px; margin-left: 24px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-subtle);
  cursor: pointer; font-size: 14px; transition: border-color var(--t-fast);
}
.wk-search-trigger:hover { border-color: var(--border-strong); }
.wk-search-ico svg { width: 16px; height: 16px; display: block; }
.wk-search-label { flex: 1; text-align: left; }
.wk-top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }

.wk-edit-banner {
  position: sticky; top: var(--topbar-h); z-index: 25; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; font-size: 13px; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); border-bottom: 1px solid var(--border);
}
.wk-edit-banner svg { width: 15px; height: 15px; }
.wk-banner-short { display: none; }

/* ─── Layout ─── */
.wk-layout {
  display: grid; grid-template-columns: 280px minmax(0, 1fr) 232px;
  max-width: 1480px; margin: 0 auto; min-height: calc(100vh - var(--topbar-h));
}
body.editing .wk-layout { grid-template-columns: 300px minmax(0, 1fr); }
body.editing .wk-toc { display: none; }

/* ─── Sidebar ─── */
.wk-side {
  position: sticky; top: var(--topbar-h); align-self: start; height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--side-bg); border-right: 1px solid var(--border);
}
body.editing .wk-side { top: calc(var(--topbar-h) + 34px); height: calc(100vh - var(--topbar-h) - 34px); }
.wk-side-head { display: none; }
.wk-more { display: none; }
.wk-side-back {
  flex: none; display: flex; align-items: center; gap: 8px; margin: 12px 12px 0; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-muted); font: 600 13px/1.2 var(--font-ui); text-decoration: none;
}
.wk-side-back:hover { color: var(--accent-ink); border-color: var(--accent); }
.wk-side-back svg { width: 15px; height: 15px; flex: none; }
.wk-side-back small { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--text-subtle); }
.wk-side-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 12px 4px; }
.wk-side-tools .btn { flex: 1 1 auto; padding: 0 8px; }
.wk-tree { flex: 1; overflow-y: auto; padding: 12px 10px 24px; overscroll-behavior: contain; }
.wk-side-foot { padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-subtle); }
.wk-side-foot a { color: var(--text-subtle); }

.wk-tree ul { list-style: none; margin: 0; padding: 0; }
.wk-tree ul ul { padding-left: 10px; margin-left: 13px; border-left: 1px solid var(--border); }   /* guide line under the parent's chevron */
.wk-home-link { margin-bottom: 6px; }
.wk-home-link .wk-item > a { padding-left: 5px; gap: 11px; }   /* icon in the chevron column, label with the others */
.wk-item { position: relative; display: flex; align-items: center; min-height: 30px; border-radius: var(--radius-sm); }
.wk-item > a, .wk-item > .wk-sec-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  color: var(--text-muted); text-decoration: none; font-size: 14px; line-height: 1.35; border-radius: var(--radius-sm);
  border: 0; background: none; text-align: left; cursor: pointer;
}
.wk-item > a:hover { color: var(--text); background: var(--surface-2); }
.wk-item .wk-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-item .wk-emoji { flex: none; width: 18px; text-align: center; }
.wk-item > a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.wk-item > a svg { width: 16px; height: 16px; flex: none; }
.wk-twisty {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-left: 2px; border: 0; background: none;
  color: var(--text-subtle); border-radius: 4px; cursor: pointer;
}
.wk-twisty:hover { background: var(--surface-3); color: var(--text); }
.wk-twisty svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
[aria-expanded="true"] > .wk-twisty svg, .wk-twisty[aria-expanded="true"] svg { transform: rotate(90deg); }
.wk-twisty-spacer { flex: none; width: 24px; }
li.collapsed > ul { display: none; }

/* Top-level sections: the strongest rung of the tree — small caps in the
   body text colour, chevron centred on the same axis as the page twisties
   and label aligned with the page labels below it. */
.wk-section { margin-top: 20px; }
.wk-section:first-child { margin-top: 4px; }
.wk-item > .wk-sec-btn {
  gap: 12px; padding: 6px 8px 6px 7px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text);
}
.wk-item > .wk-sec-btn:hover { color: var(--accent-ink); }
.wk-item > .wk-sec-btn svg { width: 12px; height: 12px; color: var(--text-subtle); transition: transform var(--t-fast); }
.wk-section:not(.collapsed) > .wk-item > .wk-sec-btn svg { transform: rotate(90deg); }
.wk-tree .wk-section > ul { padding-left: 0; margin-left: 0; border-left: 0; }   /* a section's pages sit flush under its heading */

/* Sub-sections: same rhythm as a page, a touch more weight than one and a
   lot less than the section heading above them. */
.wk-subsection > .wk-item > a { color: var(--text); font-weight: 500; }
.wk-subsection > ul > .wk-tree-empty { padding: 4px 8px; font-size: 12.5px; }

/* Edit affordances in the tree */
.wk-item-actions { display: none; gap: 2px; padding-right: 2px; }
body.editing .wk-item:hover .wk-item-actions, body.editing .wk-item:focus-within .wk-item-actions { display: flex; }
@media (hover: none) { body.editing .wk-item-actions { display: flex; } }
.wk-item-actions .icon-btn { width: 26px; height: 26px; }
.wk-item-actions .icon-btn svg { width: 15px; height: 15px; }
/* The drag handle: a 16×22 box centred on the row, like the twisty next to
   it, so the dots sit on the same line as the chevron and the label. Quiet
   until the row is hovered. */
.wk-grip { display: none; flex: none; place-items: center; width: 16px; height: 22px; color: var(--text-subtle); cursor: grab; opacity: .45; transition: opacity var(--t-fast); }
.wk-grip svg { display: block; width: 14px; height: 14px; }
body.editing .wk-grip { display: grid; }
.wk-item:hover > .wk-grip, .wk-item:focus-within > .wk-grip { opacity: 1; }
/* The grip widens every row by 16px: keep the guide lines under the chevrons. */
body.editing .wk-tree ul ul { margin-left: 29px; }
body.editing .wk-tree .wk-section > ul { margin-left: 0; }
body.editing .wk-home-link .wk-item::before { content: ""; flex: none; width: 16px; }   /* where the grip is on every other row */
.wk-item.dragging { opacity: .45; }
.wk-item.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.wk-item.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.wk-item.drop-inside { background: var(--accent-soft); outline: 1px dashed var(--accent); }
.wk-tree-empty { padding: 12px 8px; font-size: 13px; color: var(--text-subtle); }
.wk-rename { flex: 1; min-width: 0; height: 28px; padding: 2px 8px; font-size: 14px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); }

/* ─── Main column ─── */
.wk-main { min-width: 0; outline: none; }
.wk-article { max-width: var(--content-width); margin: 0 auto; padding: 36px 40px 96px; }
.wk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 12px; font-size: 13px; color: var(--text-subtle); }
.wk-crumbs a { color: var(--text-subtle); text-decoration: none; }
.wk-crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.wk-crumbs svg { width: 12px; height: 12px; }
.wk-title { margin: 0; font-family: var(--font-heading); font-size: clamp(28px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.wk-title .wk-emoji { margin-right: 10px; }
.wk-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 28px; font-size: 13px; color: var(--text-subtle); }
.wk-meta span { display: inline-flex; align-items: center; gap: 5px; }
.wk-meta svg { width: 14px; height: 14px; }
.wk-meta { align-items: center; }
.wk-meta-home { justify-content: flex-end; margin: -24px 0 20px; }
.wk-page-actions { margin-left: auto; gap: 2px !important; }
.wk-action {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: none;
  color: var(--text-subtle); font: 500 12.5px/1 var(--font-ui); cursor: pointer;
}
.wk-action:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.wk-print-source { display: none; }

/* ─── Languages (AI translations) ─── */
.wk-meta .wk-lang { gap: 2px; padding: 2px 2px 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.wk-lang > svg { margin-right: 2px; color: var(--text-subtle); }
.wk-lang button {
  height: 24px; padding: 0 10px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--text-muted); font: 500 12.5px/1 var(--font-ui);
}
.wk-lang button:hover { color: var(--text); background: var(--surface-2); }
.wk-lang button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.wk-lang-menu svg:last-child { width: 12px; height: 12px; }
.wk-translated {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -14px 0 24px; padding: 9px 12px;
  border-radius: var(--radius-sm); background: var(--accent-softer); color: var(--text-muted); font-size: 13px; line-height: 1.45;
}
.wk-translated > svg { width: 15px; height: 15px; flex: none; color: var(--accent-ink); }
.wk-translated > span { flex: 1 1 240px; }
.wk-translated.outdated { background: var(--danger-soft); }
.wk-translated.outdated > svg { color: var(--danger); }
.wk-link-btn { padding: 0; border: 0; background: none; color: var(--accent-ink); font: 600 13px/1.45 var(--font-ui); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wk-translate-btn svg { color: var(--accent-ink); }

.tr-lede { margin: 0 0 14px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.tr-orig { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; color: var(--text-subtle); }
.tr-orig svg { width: 14px; height: 14px; }
.tr-orig strong { color: var(--text); }
.tr-empty { margin: 0 0 16px; padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; font-size: 13.5px; color: var(--text-subtle); }
.tr-list { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.tr-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 8px 8px 14px; }
.tr-list li + li { border-top: 1px solid var(--border); }
.tr-name { font-weight: 600; font-size: 14.5px; color: var(--text); }
.tr-badge { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); font-size: 11.5px; font-weight: 600; }
.tr-badge.outdated { background: var(--danger-soft); color: var(--danger); }
.tr-list small { color: var(--text-subtle); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tr-actions .icon-btn svg { width: 16px; height: 16px; }
.tr-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tr-add label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.tr-add .select { flex: 1 1 200px; width: auto; }

/* The outline, folded into the article when the right rail is hidden. */
.wk-toc-inline { display: none; margin: -12px 0 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.wk-toc-inline summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none;
  font: 600 13.5px/1.2 var(--font-ui); color: var(--text-muted);
}
.wk-toc-inline summary::-webkit-details-marker { display: none; }
.wk-toc-inline summary svg { width: 15px; height: 15px; }
.wk-toc-inline summary svg:last-child { margin-left: auto; transition: transform var(--t-fast, 150ms); }
.wk-toc-inline[open] summary svg:last-child { transform: rotate(180deg); }
.wk-toc-inline .count { font-weight: 500; color: var(--text-subtle); }
.wk-toc-inline ul { list-style: none; margin: 0; padding: 4px 14px 12px; border-top: 1px solid var(--border); }
.wk-toc-inline a { display: block; padding: 5px 0; font-size: 14px; color: var(--text-muted); text-decoration: none; }
.wk-toc-inline a:hover { color: var(--accent-ink); }
.wk-toc-inline a.lvl-3 { padding-left: 16px; }

/* ─── Rendered Markdown (the output of HyperText.renderMarkdown) ─── */
.wk-prose { font-family: var(--font-body); font-size: 16.5px; line-height: 1.72; color: var(--text); overflow-wrap: break-word; }
.wk-prose > * { margin: 0 0 1.05em; }
.wk-prose > *:last-child { margin-bottom: 0; }
.wk-prose h1, .wk-prose h2, .wk-prose h3, .wk-prose h4, .wk-prose h5, .wk-prose h6 {
  position: relative; font-family: var(--font-heading); line-height: 1.3; letter-spacing: -0.015em; font-weight: 650;
  scroll-margin-top: calc(var(--topbar-h) + 24px);
}
.wk-prose h1 { font-size: 1.75em; margin-top: 1.6em; }
.wk-prose h2 { font-size: 1.42em; margin-top: 1.9em; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
.wk-prose h3 { font-size: 1.17em; margin-top: 1.6em; }
.wk-prose h4, .wk-prose h5, .wk-prose h6 { font-size: 1em; margin-top: 1.4em; }
.wk-prose > h1:first-child, .wk-prose > h2:first-child, .wk-prose > h3:first-child { margin-top: 0; }
.wk-anchor { position: absolute; left: -1.1em; padding-right: .3em; color: var(--text-subtle); text-decoration: none; opacity: 0; font-weight: 400; }
.wk-prose :is(h1, h2, h3, h4):hover .wk-anchor, .wk-anchor:focus { opacity: 1; }
.wk-prose a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.wk-prose a:hover { text-decoration-thickness: 2px; }
.wk-prose strong { font-weight: 650; }
.wk-prose ul, .wk-prose ol { padding-left: 1.5em; }
.wk-prose li { margin: .3em 0; }
.wk-prose li::marker { color: var(--text-subtle); }
.wk-prose li.ht-task { list-style: none; margin-left: -1.5em; display: flex; flex-wrap: wrap; gap: 0 .55em; align-items: baseline; }
.wk-prose li.ht-task input { accent-color: var(--accent); margin: 0; transform: translateY(2px); }
.wk-prose li.ht-task > span { flex: 1; }
.wk-prose li.ht-task.done > span { color: var(--text-subtle); text-decoration: line-through; }
.wk-prose li > ul, .wk-prose li > ol { margin: .3em 0 0; }
.wk-prose li.ht-task > ul, .wk-prose li.ht-task > ol { flex-basis: 100%; padding-left: 3em; }
.wk-prose blockquote { margin-left: 0; padding: .1em 0 .1em 1.1em; border-left: 3px solid var(--border-strong); color: var(--text-muted); }
.wk-prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.4em 0; }
.wk-prose code { font-family: var(--font-mono); font-size: .86em; padding: .15em .4em; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.wk-prose pre {
  position: relative; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto;
}
.wk-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
/* Syntax tokens from HyperText's renderer — the same pairs the editor preview uses. */
.wk-prose .ht-tok-kw, .wk-prose .ht-tok-tag, .wk-prose .ht-tok-var, .wk-prose .ht-tok-key, .wk-prose .ht-tok-attr { color: var(--accent-ink); }
.wk-prose .ht-tok-str, .wk-prose .ht-tok-ins { color: var(--success); }
.wk-prose .ht-tok-num, .wk-prose .ht-tok-lit, .wk-prose .ht-tok-del { color: var(--danger); }
.wk-prose .ht-tok-com { color: var(--text-subtle); font-style: italic; }
.wk-prose .ht-tok-fn { font-weight: 600; }
.wk-prose pre[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 6px; right: 44px; font: 600 10.5px/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle);
}
.wk-copy { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; opacity: 0; background: var(--surface); border: 1px solid var(--border); }
.wk-prose pre:hover .wk-copy, .wk-copy:focus-visible { opacity: 1; }
@media (hover: none) { .wk-copy { opacity: 1; } }
.wk-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); cursor: zoom-in; }
.wk-prose p img { display: inline-block; vertical-align: middle; }
.wk-prose figure { margin-left: 0; margin-right: 0; }
.wk-prose figure img { margin: 0 auto; border: 1px solid var(--border); }
.wk-prose figcaption { margin-top: .6em; text-align: center; font-family: var(--font-ui); font-size: 13px; color: var(--text-subtle); }
.wk-prose .ht-table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.wk-prose table { width: 100%; border-collapse: collapse; font-size: .92em; }
.wk-prose th, .wk-prose td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.wk-prose th + th, .wk-prose td + td { border-left: 1px solid var(--border); }
.wk-prose tbody tr:last-child td { border-bottom: 0; }
.wk-prose th { background: var(--surface-2); font-weight: 650; font-family: var(--font-ui); }
.wk-prose .ht-callout {
  --c: var(--accent); --c-soft: var(--accent-softer); --c-ink: var(--accent-ink);
  padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--border)); border-left: 4px solid var(--c);
  border-radius: var(--radius); background: var(--c-soft);
}
.wk-prose .ht-callout > * { margin: 0 0 .6em; }
.wk-prose .ht-callout > *:last-child { margin-bottom: 0; }
.wk-prose .ht-callout-title { font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--c-ink); letter-spacing: .01em; }
.wk-prose .ht-callout[data-kind="tip"] { --c: #1E8E54; --c-soft: color-mix(in srgb, #1E8E54 8%, var(--surface)); --c-ink: #17693F; }
.wk-prose .ht-callout[data-kind="warning"] { --c: #C27803; --c-soft: color-mix(in srgb, #C27803 9%, var(--surface)); --c-ink: #8A5402; }
.wk-prose .ht-callout[data-kind="caution"] { --c: #C62828; --c-soft: color-mix(in srgb, #C62828 8%, var(--surface)); --c-ink: #A21F1F; }
.wk-prose .ht-callout[data-kind="important"] { --c: #7C3AED; --c-soft: color-mix(in srgb, #7C3AED 8%, var(--surface)); --c-ink: #6026C9; }
[data-theme="dark"] .wk-prose .ht-callout[data-kind="tip"] { --c-ink: #7EDCA6; }
[data-theme="dark"] .wk-prose .ht-callout[data-kind="warning"] { --c-ink: #F5C06A; }
[data-theme="dark"] .wk-prose .ht-callout[data-kind="caution"] { --c-ink: #F59C9C; }
[data-theme="dark"] .wk-prose .ht-callout[data-kind="important"] { --c-ink: #C4A6FB; }
.wk-prose .ht-empty { color: var(--text-subtle); font-style: italic; }

/* ─── Landing page ─── */
.wk-hero { position: relative; margin: 0 0 36px; padding: 44px 40px; border-radius: var(--radius-lg); overflow: hidden; }
[data-hero="gradient"] .wk-hero { background: var(--hero-gradient); color: #fff; }
[data-hero="gradient"] .wk-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 45%), radial-gradient(circle at 10% 110%, rgba(0,0,0,.18), transparent 50%);
}
[data-hero="solid"] .wk-hero { background: var(--accent-soft); }
[data-hero="minimal"] .wk-hero { padding: 12px 0 8px; border-radius: 0; border-bottom: 1px solid var(--border); padding-bottom: 28px; }
.wk-hero > * { position: relative; z-index: 1; }
.wk-hero-icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; overflow: hidden;
  border-radius: var(--radius-lg); font-size: 64px; background: var(--accent-soft); color: var(--accent-ink);
}
[data-hero="gradient"] .wk-hero-icon { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
[data-hero="solid"] .wk-hero-icon { background: var(--surface); }
.wk-hero h1 { margin: 0; font-family: var(--font-heading); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 750; }
[data-hero="solid"] .wk-hero h1 { color: var(--accent-ink); }
.wk-hero p { margin: 12px 0 0; max-width: 60ch; font-family: var(--font-body); font-size: 18px; line-height: 1.55; opacity: .92; }
[data-hero="solid"] .wk-hero p, [data-hero="minimal"] .wk-hero p { color: var(--text-muted); opacity: 1; }
.wk-hero-search {
  display: flex; align-items: center; gap: 10px; width: min(520px, 100%); height: 48px; margin-top: 24px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-subtle);
  font-size: 15px; cursor: text; box-shadow: var(--shadow-pop); text-align: left;
}
.wk-hero-search svg { width: 18px; height: 18px; }
.wk-hero-search .kbd { margin-left: auto; }

.wk-eyebrow { margin: 44px 0 14px; font: 700 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--text-subtle); }
.wk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.wk-card {
  display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.wk-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-pop); }
.wk-card h3 { margin: 0 0 4px; font-family: var(--font-heading); font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.wk-card h3 a { color: var(--text); text-decoration: none; }
.wk-card h3 a::after { content: ""; position: absolute; inset: 0; }
.wk-card.linked { position: relative; }
.wk-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wk-card li a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--accent-ink); text-decoration: none; }
.wk-card li a:hover { text-decoration: underline; }
.wk-card li a svg { width: 14px; height: 14px; }
.wk-card .more { font-size: 13px; color: var(--text-subtle); }
.wk-card p { margin: 0; font-size: 14px; color: var(--text-muted); }
.wk-card-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); }
.wk-card-mark svg { width: 16px; height: 16px; }
/* Section cards hold links of their own, so only their title is the target. */
.wk-card:not(.linked) h3 a::after { content: none; }
.wk-card:not(.linked) h3 a:hover { color: var(--accent-ink); }
.wk-card li a.is-folder { color: var(--text); font-weight: 600; }
.wk-card li a.is-folder svg { color: var(--accent-ink); }
.wk-card a.more { display: inline-block; margin-top: 6px; text-decoration: none; }
.wk-card a.more:hover { color: var(--accent-ink); text-decoration: underline; }

/* ─── Links between pages ─── */
.wk-backlinks { margin-top: 40px; }
.wk-backlinks .wk-eyebrow { margin-top: 0; }
.wk-backlinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wk-backlinks a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text); font-size: 14px; text-decoration: none;
}
.wk-backlinks a:hover { border-color: var(--accent); color: var(--accent-ink); }
.wk-backlink-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; }
.wk-backlink-mark svg, .wk-backlink-mark .ico { width: 13px; height: 13px; }
.wk-prose a.wk-link-broken { color: var(--danger); text-decoration-style: wavy; text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.wk-broken-chip { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 35%, var(--border)) !important; }

/* ─── A section's own page (edit view) ─── */
.wk-section-edit { display: grid; gap: 16px; }
.wk-section-lede { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.wk-section-lede svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent-ink); }
.wk-section-lede strong { display: block; margin-top: 4px; color: var(--text); font-weight: 600; }
.wk-section-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-section-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.wk-section-list li + li { border-top: 1px solid var(--border); }
.wk-section-list a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text); text-decoration: none; font-size: 14.5px; }
.wk-section-list a:hover { background: var(--surface-2); color: var(--accent-ink); }
.wk-section-list svg, .wk-section-list .ico { width: 16px; height: 16px; color: var(--text-subtle); }

/* ─── Import Markdown ─── */
.imp-drop {
  display: grid; justify-items: center; gap: 8px; margin-bottom: 18px; padding: 28px 20px; text-align: center;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text-muted);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.imp-drop.over { border-color: var(--accent); background: var(--accent-softer); }
.imp-drop > svg { width: 30px; height: 30px; color: var(--accent-ink); }
.imp-drop strong { color: var(--text); font-size: 15px; }
.imp-drop span { max-width: 52ch; font-size: 13px; line-height: 1.5; }
.imp-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.imp-pick label { cursor: pointer; }
.imp-error { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: 14px; }
.imp-busy { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 160px; color: var(--text-muted); }
.imp-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: imp-spin .8s linear infinite; }
@keyframes imp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .imp-spinner { animation: none; } }
.imp-summary { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 15px; }
.imp-summary svg { width: 18px; height: 18px; color: var(--success); flex: none; }
.imp-keep { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; font-size: 14px; }
.imp-tree { max-height: 320px; overflow: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.imp-tree ul { list-style: none; margin: 0; padding: 0; }
.imp-tree ul ul { margin-left: 9px; padding-left: 14px; border-left: 1px solid var(--border); }
.imp-node { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 14px; }
.imp-node svg { width: 15px; height: 15px; flex: none; color: var(--text-subtle); }
.imp-node.section { font-weight: 600; }
.imp-node.section svg { color: var(--accent-ink); }
.imp-node small { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.imp-notes { margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.imp-notes summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.imp-notes summary svg { width: 15px; height: 15px; color: var(--danger); }
.imp-notes ul { margin: 8px 0 0; padding-left: 18px; }
.imp-progress { min-height: 140px; display: grid; align-content: center; gap: 10px; }
.imp-progress p { margin: 0; text-align: center; color: var(--text-muted); }
.imp-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.imp-bar span { display: block; height: 100%; background: var(--accent); transition: width var(--t-fast); }

.wk-welcome { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 24px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent-softer); }
.wk-welcome svg { width: 22px; height: 22px; color: var(--accent-ink); flex: none; margin-top: 2px; }
.wk-welcome strong { display: block; margin-bottom: 2px; }
.wk-welcome p { margin: 0; color: var(--text-muted); font-size: 14px; }
.wk-welcome .icon-btn { margin-left: auto; }

.wk-empty { padding: 28px; text-align: center; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-muted); }
.wk-empty p { margin: 0 0 14px; }

/* ─── Page footer: meta + previous / next ─── */
.wk-children { margin-top: 36px; }
.wk-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); }
.wk-pager a {
  display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--text); transition: border-color var(--t-fast);
}
.wk-pager a:hover { border-color: var(--accent); }
.wk-pager small { font-size: 12.5px; color: var(--text-subtle); display: inline-flex; gap: 4px; align-items: center; }
.wk-pager small svg { width: 13px; height: 13px; }
.wk-pager strong { color: var(--accent-ink); font-family: var(--font-heading); font-weight: 600; }
.wk-pager .next { text-align: right; grid-column: 2; }
.wk-pager .next small { justify-content: flex-end; }

/* ─── Table of contents ─── */
.wk-toc { position: sticky; top: var(--topbar-h); align-self: start; max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 40px 20px 24px 8px; }
.wk-toc h2 { margin: 0 0 10px; font: 700 11.5px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--text-subtle); }
.wk-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.wk-toc a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.4; color: var(--text-subtle); text-decoration: none; }
.wk-toc a:hover { color: var(--text); }
.wk-toc a.lvl-3 { padding-left: 24px; }
.wk-toc a.active { color: var(--accent-ink); border-left-color: var(--accent); font-weight: 600; }

/* ─── Editing ─── */
.wk-edit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.wk-edit-head:not(.has-icon) { flex-direction: column; align-items: stretch; gap: 2px; }
/* No icon yet: a quiet, labelled "Add icon" button above the title. */
.wk-page-icon.empty {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-subtle); font-size: 13px; font-weight: 500; cursor: pointer;
}
.wk-page-icon.empty:hover, .wk-page-icon.empty[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.wk-page-icon.empty svg { width: 16px; height: 16px; }
/* With an icon: the icon itself, left of the title; click to change. */
.wk-page-icon:not(.empty) {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0; font-size: 52px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-ink);
  transition: border-color var(--t-fast);
}
.wk-page-icon:not(.empty):hover, .wk-page-icon[aria-expanded="true"] { border-color: var(--accent); }

/* Page glyphs wherever a page shows its icon */
.wk-emoji .wiki-icon-svg { width: 16px; height: 16px; display: inline-block; }
.wk-item .wk-emoji { color: var(--text-subtle); }
.wk-item > a[aria-current="page"] .wk-emoji { color: inherit; }
.wk-title .wk-emoji .wiki-icon-svg { width: .85em; height: .85em; vertical-align: -0.08em; color: var(--accent-ink); }
.wk-title .wk-emoji > svg { width: .8em; height: .8em; vertical-align: -0.06em; color: var(--accent-ink); }
.wk-card-mark { font-size: 30px; }
.wk-card-mark .ico { width: 16px; height: 16px; }

.icon-popover { width: 320px; padding: 10px; }
.icon-popover .icon-grid { grid-template-columns: repeat(7, 1fr); font-size: 38px; }

/* ─── AI page generation ─── */
.wk-ai-btn svg { color: var(--accent-ink); }
.ai-nokey { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0 8px; }
.ai-nokey > svg { width: 28px; height: 28px; flex: none; color: var(--accent-ink); }
.ai-nokey p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }
.ai-foot { align-items: center; flex-wrap: wrap; }
.ai-provider { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 12.5px; color: var(--text-subtle); }
.ai-provider svg { width: 14px; height: 14px; color: var(--accent-ink); }
.ai-status { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13.5px; font-weight: 500; color: var(--text-muted); }
.ai-status.error { color: var(--danger); }
.ai-preview {
  max-height: 56vh; overflow-y: auto; padding: 20px 24px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); overscroll-behavior: contain;
}
.ai-preview .wk-title { font-size: 26px; margin-bottom: 14px; }
.ai-preview .wk-prose { font-size: 15px; }
.ai-preview .wk-prose:empty::before { content: "…"; color: var(--text-subtle); }
.wk-title-input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 4px 0; outline: none;
  font-family: var(--font-heading); font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.025em; color: var(--text);
}
.wk-title-input::placeholder { color: var(--text-subtle); opacity: .6; }
/* Save state · a short hint · one action on the right, all on one centre line. */
.wk-edit-note { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; min-height: 30px; margin: 0 0 18px; font-size: 13px; line-height: 1.4; color: var(--text-subtle); }
.wk-edit-note > span { display: inline-flex; align-items: center; gap: 6px; }
.wk-edit-note code { font-size: 12.5px; }
.wk-note-btn { margin-left: auto; }
.wk-home-mark { cursor: default; }
.wk-home-mark:hover { border-color: transparent !important; }
.wk-home-mark svg { width: 26px; height: 26px; }
.wk-save { display: inline-flex; align-items: center; gap: 6px; }
.wk-save::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.wk-save[data-state="saved"]::before { background: var(--success); }
.wk-save[data-state="saving"]::before, .wk-save[data-state="dirty"]::before { background: var(--accent); }
.wk-save[data-state="error"] { color: var(--danger); }
.wk-save[data-state="error"]::before { background: var(--danger); }
.wk-editor {
  display: block; min-height: 60vh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  --ht-color-bg: var(--surface-2); --ht-color-surface: var(--surface); --ht-color-text: var(--text);
  --ht-color-text-muted: var(--text-subtle); --ht-color-accent: var(--accent); --ht-color-accent-ink: var(--accent-ink);
  --ht-color-accent-soft: var(--accent-soft); --ht-color-border: var(--border); --ht-color-border-strong: var(--border-strong);
  --ht-color-success: var(--success); --ht-color-danger: var(--danger);
  --ht-font-family: var(--font-body); --ht-font-family-ui: var(--font-ui); --ht-font-family-mono: var(--font-mono);
  --ht-font-size-base: 16px; --ht-radius: var(--radius); --ht-max-width: none;
}
.wk-editor hypertext-editor { min-height: 60vh; }

/* ─── Search palette ─── */
.wk-palette-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; animation: fade-in var(--t-panel); }
.wk-palette {
  width: min(640px, 100%); max-height: 72vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); animation: pop-in var(--t-panel);
}
.wk-palette-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.wk-palette-input svg { width: 20px; height: 20px; color: var(--text-subtle); }
.wk-palette-input input { flex: 1; height: 56px; border: 0; outline: none; background: transparent; font-size: 17px; color: var(--text); }
.wk-results { overflow-y: auto; padding: 8px; }
.wk-result {
  display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); cursor: pointer;
}
.wk-result[aria-selected="true"], .wk-result:hover { background: var(--accent-soft); }
.wk-result-path { font-size: 12px; color: var(--text-subtle); }
.wk-result-title { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.wk-result-title svg { width: 15px; height: 15px; color: var(--text-subtle); flex: none; }
.wk-result-snippet { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.wk-result mark { background: color-mix(in srgb, var(--accent) 24%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.wk-palette-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 14px; }
.wk-palette-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-subtle); }

/* ─── Lightbox ─── */
.wk-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(8, 10, 14, .88); cursor: zoom-out; animation: fade-in var(--t-panel); }
.wk-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); box-shadow: var(--shadow-float); }

/* ─── Standalone states (not found / no access) ─── */
.wk-state { max-width: 460px; margin: 12vh auto; text-align: center; padding: 0 16px; }
.wk-state .mark { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 18px; }
.wk-state .mark svg { width: 30px; height: 30px; }
.wk-state h1 { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.02em; }
.wk-state p { color: var(--text-muted); margin: 0 0 20px; }

/* ─── People dialog ─── */
.people-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.people-list li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.people-list li:last-child { border-bottom: 0; }
.avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; font-size: 12.5px; font-weight: 700; color: #fff; }
.people-list .who { flex: 1; min-width: 0; display: grid; }
.people-list .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.people-list .who small { color: var(--text-subtle); font-size: 12px; }
.people-list .select { width: auto; min-height: 32px; padding: 4px 8px; font-size: 13px; }
.invite-row { display: flex; gap: 8px; }
.invite-row .input { flex: 1; }
.invite-row .select { width: auto; }
.visibility { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.visibility svg { width: 20px; height: 20px; color: var(--accent-ink); flex: none; }
.visibility div { flex: 1; display: grid; gap: 2px; }
.visibility small { color: var(--text-subtle); font-size: 12.5px; }
.linkbox { display: flex; gap: 8px; margin-bottom: 18px; }
.linkbox .input { flex: 1; font-size: 13px; color: var(--text-muted); }
.danger-zone { margin-top: 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); border-radius: var(--radius); display: flex; gap: 12px; align-items: center; }
.danger-zone div { flex: 1; font-size: 13.5px; color: var(--text-muted); }
.danger-zone strong { display: block; color: var(--text); }
.settings-tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--border); }
.settings-tabs button { border: 0; background: none; padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--text-subtle); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.settings-tabs button[aria-selected="true"] { color: var(--accent-ink); border-color: var(--accent); }

/* ─── Responsive ─── */
@media (max-width: 1199px) {
  .wk-layout { grid-template-columns: 272px minmax(0, 1fr); }
  .wk-toc { display: none; }
  .wk-toc-inline { display: block; }
}
@media (max-width: 900px) {
  .wk-layout, body.editing .wk-layout { grid-template-columns: minmax(0, 1fr); }
  .wk-nav-toggle { display: inline-flex; }
  .wk-side, body.editing .wk-side {
    position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; height: 100vh; width: min(320px, 86vw);
    transform: translateX(-102%); transition: transform var(--t-panel); box-shadow: var(--shadow-float);
  }
  body.nav-open .wk-side { transform: none; }
  /* The drawer covers the top bar, so it carries its own name and close button. */
  .wk-side-head { display: flex; flex: none; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 8px 0 14px; border-bottom: 1px solid var(--border); }
  .wk-side-head .wk-brand-icon { width: 28px; height: 28px; font-size: 28px; }
  .wk-side-name { flex: 1; min-width: 0; font: 700 15px/1.2 var(--font-heading); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wk-scrim { position: fixed; inset: 0; z-index: 35; background: var(--scrim); }
  .wk-scrim[hidden] { display: none; }
  .wk-article { padding: 24px 20px 80px; }
  .wk-search-trigger { width: auto; margin-left: auto; }
  .wk-search-label, .wk-search-trigger .kbd { display: none; }
  .wk-top-actions { margin-left: 0; }
  .wk-hero { padding: 32px 24px; }
  .wk-anchor { display: none; }
}
/* Phones: the wiki's name gets the room; secondary actions go behind ⋯. */
@media (max-width: 640px) {
  .wk-top { gap: 4px; padding: 0 6px 0 4px; }
  .wk-brand { flex: 1; gap: 8px; }
  .wk-brand-icon { width: 28px; height: 28px; font-size: 28px; }
  /* Long names wrap onto a second line instead of losing their end. */
  .wk-brand-name {
    font-size: 15px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .wk-top button, .wk-top a { -webkit-tap-highlight-color: transparent; }
  .wk-top .icon-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
  .wk-search-trigger { margin-left: 0; width: 36px; height: 36px; justify-content: center; padding: 0; border-color: transparent; background: none; color: var(--text-muted); }
  .wk-top-actions { gap: 2px; }
  #shareBtn, #settingsBtn, #themeToggle { display: none !important; }
  .wk-more { display: inline-flex; }
  #editBtn { width: 34px; padding: 0; }
  #editBtn span { display: none; }
  .wk-banner-long { display: none; }
  .wk-banner-short { display: inline; }
}
@media (max-width: 560px) {
  .wk-pager { grid-template-columns: 1fr; }
  .wk-pager .next { grid-column: 1; }
  .wk-prose { font-size: 16px; }
}

/* ─── Print / PDF: the page, nothing else ───
   js/wiki/export.js switches a dark reader to the light palette, marks outside
   links with data-print-href and fills .wk-print-source before printing. */
@media print {
  @page { margin: 16mm 15mm 18mm; }
  html, body { background: #fff !important; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wk-top, .wk-side, .wk-scrim, .wk-toc, .wk-toc-inline, .wk-edit-banner, .wk-pager, .wk-copy, .wk-anchor,
  .wk-page-actions, .wk-lang, .wk-lang-menu, .wk-link-btn, .wk-meta-home, .toasts, .wk-hero-search, .wk-welcome, .skip-link, .wk-lightbox { display: none !important; }
  .wk-layout { display: block; }
  .wk-article { max-width: none; padding: 0; }
  .wk-meta { margin-bottom: 20px; }
  .wk-prose { font-size: 11pt; line-height: 1.6; }
  .wk-prose a { color: inherit; }
  .wk-prose a[data-print-href]::after { content: " (" attr(data-print-href) ")"; font-size: .85em; color: var(--text-subtle); word-break: break-all; }
  /* Nothing may be cut at the paper's edge. */
  .wk-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; font-size: 9pt; }
  .wk-prose pre[data-lang]::before { right: 12px; }
  .wk-prose .ht-table { overflow: visible; }
  .wk-prose img { cursor: auto; max-height: 190mm; object-fit: contain; }
  .wk-prose pre, .wk-prose figure, .wk-prose img, .wk-prose tr, .wk-prose blockquote, .wk-prose .ht-callout, .wk-card { break-inside: avoid; }
  .wk-title, .wk-prose h1, .wk-prose h2, .wk-prose h3, .wk-prose h4 { break-after: avoid; }
  [data-hero] .wk-hero { background: none !important; color: var(--text); padding: 0 0 16px; border-radius: 0; border-bottom: 1px solid var(--border); }
  .wk-hero::after { display: none !important; }
  .wk-hero h1 { color: var(--text) !important; font-size: 26pt; }
  .wk-hero p { color: var(--text-muted) !important; opacity: 1; }
  .wk-hero-icon { background: var(--accent-soft) !important; color: var(--accent-ink) !important; box-shadow: none !important; }
  .wk-print-source { display: block; margin: 32px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font: 9pt/1.4 var(--font-ui); color: var(--text-subtle); overflow-wrap: anywhere; }
}