/* Wikinest workspace. Root rules are scoped to .uwapp-root.uwapp-wikinest (the body carries the app class too).
   Light and dark tokens follow html[data-theme] / prefers-color-scheme. CSP: no inline styles, only CSSOM. */
.uwapp-root.uwapp-wikinest {
  --wn-bg: #f3f5f8; --wn-surface: #ffffff; --wn-surface-2: #eef1f6; --wn-side: #f7f8fb; --wn-ink: #182131; --wn-muted: #4c5669;
  --wn-line: #d6dbe4; --wn-control: #6c778b; --wn-accent: #0f6b63; --wn-accent-ink: #0b5952; --wn-on-accent: #ffffff;
  --wn-warn: #a3271b; --wn-focus: #b45309; --wn-ok: #0d5a2e; --wn-hl: #fff1b8; --wn-hl-line: #c99a00;
  --wn-ins: #d5f3df; --wn-ins-ink: #0b4a26; --wn-del: #fde0dd; --wn-del-ink: #7c1a12;
  --wn-pi-bg: #e8f1fd; --wn-pi: #2f6fd0; --wn-ps-bg: #e5f5eb; --wn-ps: #1c7c45; --wn-pw-bg: #fff4d4; --wn-pw: #946000; --wn-pe-bg: #fde8e6; --wn-pe: #b42318;
  --wn-code-bg: #f4f6fa; --tk-kw: #7a2bc4; --tk-str: #0b6e38; --tk-num: #9a4700; --tk-com: #5f6878; --tk-lit: #a8154a; --tk-tag: #1f4fbf; --tk-attr: #8a3b0c; --tk-prop: #1f4fbf;
  background: var(--wn-bg); color: var(--wn-ink); color-scheme: light;
}
:root[data-theme="dark"] .uwapp-root.uwapp-wikinest {
  --wn-bg: #10141b; --wn-surface: #181e27; --wn-surface-2: #232b37; --wn-side: #141922; --wn-ink: #ecf0f5; --wn-muted: #b4bdcb;
  --wn-line: #344052; --wn-control: #8693a8; --wn-accent: #6fd1c4; --wn-accent-ink: #9fe3da; --wn-on-accent: #062a26;
  --wn-warn: #ffb3a8; --wn-focus: #fbbf24; --wn-ok: #9be3b5; --wn-hl: #4d3f0a; --wn-hl-line: #e8c34a;
  --wn-ins: #12402a; --wn-ins-ink: #c4f2d4; --wn-del: #4a1c18; --wn-del-ink: #ffd3cc;
  --wn-pi-bg: #13263d; --wn-pi: #7fb0f5; --wn-ps-bg: #12301f; --wn-ps: #7fd6a1; --wn-pw-bg: #352a0c; --wn-pw: #f2c14e; --wn-pe-bg: #3c1714; --wn-pe: #ff9c90;
  --wn-code-bg: #1d242f; --tk-kw: #d6a7ff; --tk-str: #8fe3a8; --tk-num: #ffc58f; --tk-com: #a3acb9; --tk-lit: #ff9ec4; --tk-tag: #9cc2ff; --tk-attr: #ffb98a; --tk-prop: #9cc2ff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .uwapp-root.uwapp-wikinest {
    --wn-bg: #10141b; --wn-surface: #181e27; --wn-surface-2: #232b37; --wn-side: #141922; --wn-ink: #ecf0f5; --wn-muted: #b4bdcb;
    --wn-line: #344052; --wn-control: #8693a8; --wn-accent: #6fd1c4; --wn-accent-ink: #9fe3da; --wn-on-accent: #062a26;
    --wn-warn: #ffb3a8; --wn-focus: #fbbf24; --wn-ok: #9be3b5; --wn-hl: #4d3f0a; --wn-hl-line: #e8c34a;
    --wn-ins: #12402a; --wn-ins-ink: #c4f2d4; --wn-del: #4a1c18; --wn-del-ink: #ffd3cc;
    --wn-pi-bg: #13263d; --wn-pi: #7fb0f5; --wn-ps-bg: #12301f; --wn-ps: #7fd6a1; --wn-pw-bg: #352a0c; --wn-pw: #f2c14e; --wn-pe-bg: #3c1714; --wn-pe: #ff9c90;
    --wn-code-bg: #1d242f; --tk-kw: #d6a7ff; --tk-str: #8fe3a8; --tk-num: #ffc58f; --tk-com: #a3acb9; --tk-lit: #ff9ec4; --tk-tag: #9cc2ff; --tk-attr: #ffb98a; --tk-prop: #9cc2ff;
    color-scheme: dark;
  }
}
/* dialogs live inside .wn-app, so they inherit the tokens above */

/* Platform element defaults leak into app workspaces: reset them at zero specificity. */
:where(.wn-app, .wn-dialog) button { font: inherit; font-size: .9rem; font-weight: 600; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; width: auto; min-height: 0; margin: 0; }
:where(.wn-app, .wn-dialog) button:hover { background: none; }
:where(.wn-app, .wn-dialog) :is(input, select, textarea) { font: inherit; color: var(--wn-ink); background: var(--wn-surface); border: 1px solid var(--wn-control); border-radius: 8px; width: auto; margin: 0; padding: .3rem .5rem; min-height: 34px; box-sizing: border-box; max-width: 100%; }
:where(.wn-app, .wn-dialog) table { border-collapse: collapse; width: 100%; margin: 0; font-size: .9rem; }
:where(.wn-app, .wn-dialog) :is(th, td) { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--wn-line); vertical-align: top; }
:where(.wn-app, .wn-dialog) thead th { background: var(--wn-surface-2); color: var(--wn-ink); }
:where(.wn-app, .wn-dialog) kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; padding: 1px 6px; border: 1px solid var(--wn-control); border-bottom-width: 2px; border-radius: 5px; background: var(--wn-surface-2); color: var(--wn-ink); white-space: nowrap; }
:where(.wn-app, .wn-dialog) a { color: var(--wn-accent-ink); }
:where(.wn-app, .wn-dialog) :is(code, pre) { background: var(--wn-code-bg); color: var(--wn-ink); border-radius: 5px; }
:where(.wn-app, .wn-dialog) code { padding: 0 .25em; font-size: .9em; }
:where(.wn-app, .wn-dialog) pre { padding: .6rem .8rem; overflow: auto; max-width: 100%; margin: 0; }
:where(.wn-app, .wn-dialog) fieldset { border: 1px solid var(--wn-line); border-radius: 10px; padding: .5rem .7rem; margin: 0 0 .7rem; min-width: 0; }
:where(.wn-app, .wn-dialog) legend { font-weight: 700; font-size: .88rem; padding: 0 .3rem; }
:where(.wn-app, .wn-dialog) blockquote { margin: .6rem 0; padding: .2rem .9rem; border-inline-start: 4px solid var(--wn-line); color: var(--wn-muted); }
:where(.wn-app, .wn-dialog) mark { background: var(--wn-hl); color: var(--wn-ink); }
:where(.wn-app, .wn-dialog) h3 { font-size: 1rem; margin: 1rem 0 .4rem; }

.wn-app { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; background: var(--wn-bg); color: var(--wn-ink); }
.wn-app :focus-visible, .wn-dialog :focus-visible { outline: 3px solid var(--wn-focus); outline-offset: 2px; }
.wn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wn-spacer { flex: 1; min-width: 0; }
.wn-hint { color: var(--wn-muted); font-size: .84rem; margin: .25rem 0 .5rem; }
.wn-muted { color: var(--wn-muted); font-size: .88rem; }
.wn-note { font-size: .9rem; background: var(--wn-surface-2); border-radius: 8px; padding: .5rem .7rem; margin: .5rem 0; }
.wn-note-ok { background: var(--wn-ps-bg); border-inline-start: 4px solid var(--wn-ps); }
.wn-note-warn { background: var(--wn-pw-bg); border-inline-start: 4px solid var(--wn-pw); }
.wn-error { color: var(--wn-warn); font-weight: 600; font-size: .88rem; margin: .2rem 0; }
.wn-error:empty { display: none; }
.wn-wide { width: 100%; box-sizing: border-box; }
.wn-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.wn-row { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.wn-wrap { flex-wrap: wrap; align-items: flex-end; }
.wn-badge { display: inline-block; margin-inline-start: .4rem; padding: 0 .4rem; border-radius: 999px; background: var(--wn-accent); color: var(--wn-on-accent); font-size: .74rem; font-weight: 700; }

/* ---------- buttons */
.wn-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: .3rem .7rem; border: 1px solid var(--wn-control); border-radius: 8px; background: var(--wn-surface); color: var(--wn-ink); font-size: .86rem; white-space: nowrap; }
.wn-btn:hover:not([disabled]) { background: var(--wn-surface-2); }
.wn-btn[disabled] { opacity: .55; cursor: not-allowed; }
.wn-btn[aria-pressed="true"] { border-color: var(--wn-accent); box-shadow: inset 0 0 0 1px var(--wn-accent); }
.wn-btn-primary, :is(.wn-app, .wn-dialog) button[type=submit].wn-btn-primary { background: var(--wn-accent); border-color: var(--wn-accent); color: var(--wn-on-accent); }
.wn-btn-primary:hover:not([disabled]), :is(.wn-app, .wn-dialog) button[type=submit].wn-btn-primary:hover:not([disabled]) { background: var(--wn-accent-ink); border-color: var(--wn-accent-ink); color: var(--wn-on-accent); }
.wn-icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 8px; color: var(--wn-ink); flex: none; }
.wn-icon-btn:hover:not([disabled]) { background: var(--wn-surface-2); border-color: var(--wn-line); }
.wn-link-btn { color: var(--wn-accent-ink); text-decoration: underline; font-weight: 600; font-size: .84rem; }

/* ---------- toolbar and menus */
.wn-toolbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; padding: .35rem .8rem; background: var(--wn-surface); border-bottom: 1px solid var(--wn-line); }
.wn-tb-group { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; min-width: 0; }
.wn-menu-wrap { position: relative; }
.wn-menu-btn { display: inline-flex; align-items: center; gap: .2rem; min-height: 34px; padding: .3rem .55rem; border-radius: 8px; color: var(--wn-ink); }
.wn-menu-btn:hover, .wn-menu-btn[aria-expanded="true"] { background: var(--wn-surface-2); }
.wn-menu { position: fixed; z-index: 40; min-width: 15rem; max-width: min(24rem, 94vw); max-height: calc(100dvh - 12px); overflow-y: auto; padding: .3rem; background: var(--wn-surface); color: var(--wn-ink); border: 1px solid var(--wn-control); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / .25); }
.wn-menu[hidden] { display: none; }
.wn-menu-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; min-height: 32px; padding: .35rem .6rem; border-radius: 6px; text-align: start; font-weight: 500; color: var(--wn-ink); }
.wn-menu-item:hover, .wn-menu-item:focus { background: var(--wn-surface-2); }
.wn-menu-item[aria-disabled="true"] { color: var(--wn-muted); cursor: not-allowed; }
.wn-menu-key { color: var(--wn-muted); font-size: .78rem; font-weight: 600; }
.wn-menu-sep { height: 1px; margin: .3rem .2rem; background: var(--wn-line); }
.wn-search-wrap { position: relative; display: flex; align-items: center; color: var(--wn-muted); }
.wn-search-wrap svg { position: absolute; inset-inline-start: .55rem; pointer-events: none; }
:where(.wn-app) .wn-search { width: 15rem; max-width: 46vw; padding-inline-start: 1.9rem; }
.wn-side-toggle { display: none; }
.wn-banner { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .5rem .9rem; background: #fff4cc; color: #3d2f00; border-bottom: 1px solid #e3c766; font-weight: 600; }
:root[data-theme="dark"] .wn-banner { background: #3a3110; color: #fdf1c4; border-color: #6b5a1c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wn-banner { background: #3a3110; color: #fdf1c4; border-color: #6b5a1c; } }
.wn-banner[hidden] { display: none; }

/* ---------- body: sidebar + page */
.wn-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); }
.wn-side { min-height: 0; overflow-y: auto; background: var(--wn-side); border-inline-end: 1px solid var(--wn-line); padding: .7rem .6rem 1.5rem; }
.wn-main { min-height: 0; min-width: 0; overflow-y: auto; position: relative; }
.wn-main:focus { outline: none; }
.wn-picker-label { display: block; font-size: .78rem; font-weight: 700; color: var(--wn-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.wn-picker-row { display: flex; gap: .3rem; align-items: center; }
:where(.wn-app) .wn-space-select { flex: 1; min-width: 0; }
.wn-space-head { display: flex; gap: .6rem; align-items: center; margin: .8rem 0 .2rem; }
.wn-space-badge { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; color: #ffffff; font-weight: 800; font-size: .8rem; background: var(--sc, #0f6b63); flex: none; }
.wn-c-teal { --sc: #0f6b63; } .wn-c-blue { --sc: #1d5fbf; } .wn-c-indigo { --sc: #4b3fbf; } .wn-c-plum { --sc: #7a2f8f; } .wn-c-rose { --sc: #a3264f; } .wn-c-rust { --sc: #9c4512; } .wn-c-olive { --sc: #5c5a0f; } .wn-c-slate { --sc: #3d4a5c; }
.wn-space-meta { min-width: 0; }
.wn-space-name { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.wn-space-sub, .wn-space-role { margin: 0; font-size: .8rem; color: var(--wn-muted); }
.wn-space-role { margin: .2rem 0 .4rem; }
.wn-tree-head { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; }
.wn-side-h { font-size: .78rem; font-weight: 700; color: var(--wn-muted); text-transform: uppercase; letter-spacing: .04em; margin: .9rem 0 .3rem; }
.wn-tree-head .wn-side-h { margin: 0; }
.wn-tree, .wn-reflist { list-style: none; margin: 0; padding: 0; }
.wn-ti { --depth: 0; border-radius: 7px; outline-offset: -2px; }
.wn-ti-row { display: flex; align-items: center; gap: .3rem; min-height: 32px; padding: .1rem .3rem; padding-inline-start: calc(.2rem + var(--depth) * 1rem); border-radius: 7px; cursor: pointer; color: var(--wn-ink); }
.wn-ti-row:hover { background: var(--wn-surface-2); }
.wn-ti-cur > .wn-ti-row { background: var(--wn-surface); box-shadow: inset 3px 0 0 var(--wn-accent); font-weight: 700; }
[dir="rtl"] .wn-ti-cur > .wn-ti-row { box-shadow: inset -3px 0 0 var(--wn-accent); }
.wn-ti-tog { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--wn-muted); border-radius: 4px; }
.wn-ti-tog:hover { background: var(--wn-line); }
.wn-ti-leaf { visibility: hidden; }
.wn-ti-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.3; }
.wn-grip { display: inline-grid; place-items: center; width: 22px; height: 26px; color: var(--wn-muted); cursor: grab; touch-action: none; opacity: .55; flex: none; }
.wn-ti-row:hover .wn-grip { opacity: 1; }
.wn-ti-lifted > .wn-ti-row { outline: 2px dashed var(--wn-accent); background: var(--wn-surface); }
.wn-ti-dragging { opacity: .45; }
.wn-drop-before > .wn-ti-row { box-shadow: inset 0 3px 0 var(--wn-accent); }
.wn-drop-after > .wn-ti-row { box-shadow: inset 0 -3px 0 var(--wn-accent); }
.wn-drop-in > .wn-ti-row { outline: 2px solid var(--wn-accent); }
.wn-ghost { position: fixed; z-index: 60; pointer-events: none; padding: .3rem .6rem; border-radius: 8px; background: var(--wn-accent, #0f6b63); color: #ffffff; font-weight: 700; font-size: .85rem; box-shadow: 0 8px 20px rgb(0 0 0 / .3); }
.wn-ref { display: flex; flex-direction: column; padding: .3rem .4rem; border-radius: 7px; text-decoration: none; color: var(--wn-ink); }
.wn-ref:hover { background: var(--wn-surface-2); }
.wn-ref-title { font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.wn-ref-space { font-size: .76rem; color: var(--wn-muted); }

/* ---------- page */
.wn-page, .wn-editor { position: relative; max-width: 58rem; margin: 0 auto; padding: 1.2rem 1.6rem 3rem; }
.wn-empty { max-width: 40rem; margin: 3rem auto; padding: 0 1.2rem; }
.wn-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem; margin: 0 0 .6rem; padding: 0; font-size: .85rem; }
.wn-crumbs li + li::before { content: '/'; color: var(--wn-muted); margin-inline-end: .2rem; }
.wn-crumbs a { color: var(--wn-muted); }
.wn-crumbs-plain { color: var(--wn-muted); font-size: .85rem; margin: 0 0 .6rem; }
.wn-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 1rem; }
.wn-page-title { margin: 0; font-size: 2rem; line-height: 1.2; overflow-wrap: anywhere; min-width: 0; }
.wn-page-title:focus { outline: none; }
.wn-page-title:focus-visible { outline: 3px solid var(--wn-focus); }
.wn-page-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.wn-meta { color: var(--wn-muted); font-size: .85rem; margin: .4rem 0; }
.wn-labels { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: .3rem 0 .8rem; }
.wn-label { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 999px; background: var(--wn-surface-2); color: var(--wn-ink); font-size: .8rem; font-weight: 600; border: 1px solid var(--wn-line); }
button.wn-label:hover { border-color: var(--wn-accent); }
.wn-sel-btn { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 8px; background: var(--wn-accent); color: var(--wn-on-accent); box-shadow: 0 6px 18px rgb(0 0 0 / .25); }
.wn-sel-btn[hidden] { display: none; }

/* ---------- rendered Markdown */
.wn-prose { line-height: 1.65; font-size: 1rem; overflow-wrap: anywhere; }
.wn-prose > :first-child { margin-top: .6rem; }
.wn-prose :is(h1, h2, h3, h4, h5, h6) { line-height: 1.25; margin: 1.4em 0 .5em; scroll-margin-top: 1rem; }
.wn-prose h1 { font-size: 1.6rem; } .wn-prose h2 { font-size: 1.35rem; padding-bottom: .2rem; border-bottom: 1px solid var(--wn-line); } .wn-prose h3 { font-size: 1.15rem; }
.wn-prose :is(p, ul, ol) { margin: .6em 0; }
.wn-prose :is(ul, ol) { padding-inline-start: 1.6rem; }
.wn-prose img { max-width: 100%; height: auto; border-radius: 6px; }
.wn-prose hr { border: 0; border-top: 1px solid var(--wn-line); margin: 1.4rem 0; }
.wn-prose del { color: var(--wn-muted); }
.wn-table-wrap { overflow-x: auto; margin: .8rem 0; border: 1px solid var(--wn-line); border-radius: 8px; }
.wn-table-wrap table { min-width: 24rem; }
.wn-table-wrap :is(th, td) { border-inline-end: 1px solid var(--wn-line); }
.wn-al-center { text-align: center; } .wn-al-right { text-align: end; }
.wn-code { margin: .8rem 0; border: 1px solid var(--wn-line); border-radius: 8px; background: var(--wn-code-bg); overflow: hidden; }
.wn-code-bar { display: flex; justify-content: space-between; align-items: center; padding: .2rem .5rem .2rem .8rem; font-size: .76rem; color: var(--wn-muted); border-bottom: 1px solid var(--wn-line); font-weight: 700; }
.wn-copy { font-size: .78rem; padding: .15rem .5rem; border: 1px solid var(--wn-line); border-radius: 6px; color: var(--wn-ink); }
.wn-code pre { border-radius: 0; font-size: .86rem; line-height: 1.5; }
.wn-code code { background: none; padding: 0; }
.wn-tok-kw { color: var(--tk-kw); } .wn-tok-str { color: var(--tk-str); } .wn-tok-num { color: var(--tk-num); } .wn-tok-com { color: var(--tk-com); font-style: italic; } .wn-tok-lit { color: var(--tk-lit); } .wn-tok-tag { color: var(--tk-tag); } .wn-tok-attr { color: var(--tk-attr); } .wn-tok-prop { color: var(--tk-prop); }
.wn-panel { margin: .9rem 0; padding: .5rem .9rem; border-radius: 8px; border-inline-start: 5px solid var(--pc); background: var(--pb); color: var(--wn-ink); }
.wn-panel > :last-child { margin-bottom: .3rem; }
.wn-panel-title { margin: .25rem 0; font-weight: 700; }
.wn-panel-kind { color: var(--wn-ink); }
.wn-panel-info { --pc: var(--wn-pi); --pb: var(--wn-pi-bg); } .wn-panel-success { --pc: var(--wn-ps); --pb: var(--wn-ps-bg); } .wn-panel-warning { --pc: var(--wn-pw); --pb: var(--wn-pw-bg); } .wn-panel-error { --pc: var(--wn-pe); --pb: var(--wn-pe-bg); }
.wn-expand { margin: .8rem 0; border: 1px solid var(--wn-line); border-radius: 8px; padding: .4rem .8rem; background: var(--wn-surface); }
.wn-expand summary { cursor: pointer; font-weight: 700; min-height: 28px; }
.wn-status { display: inline-block; padding: .05rem .45rem; border-radius: 4px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; vertical-align: .08em; background: #e1e5eb; color: #1c2533; }
.wn-status-blue { background: #d6e6ff; color: #113a78; } .wn-status-green { background: #d2f2dd; color: #0b4f28; } .wn-status-yellow { background: #fff0b8; color: #553f00; } .wn-status-red { background: #ffd9d4; color: #85170f; } .wn-status-purple { background: #e8d9ff; color: #461c85; }
.wn-mention { padding: 0 .4rem; border-radius: 999px; background: var(--wn-surface-2); border: 1px solid var(--wn-line); font-weight: 600; white-space: nowrap; }
.wn-date { padding: 0 .35rem; border-radius: 5px; background: var(--wn-surface-2); border: 1px solid var(--wn-line); white-space: nowrap; }
.wn-pagelink { font-weight: 600; }
.wn-pagelink.wn-missing { color: var(--wn-warn); text-decoration-style: dashed; }
.wn-tasks { list-style: none; padding-inline-start: .3rem !important; }
.wn-task { display: flex; align-items: flex-start; gap: .4rem; }
.wn-check { flex: none; display: inline-block; width: 1.05rem; height: 1.05rem; margin-top: .25rem; border: 2px solid var(--wn-control); border-radius: 4px; background: var(--wn-surface); }
.wn-check-btn { padding: 0; cursor: pointer; }
.wn-done > .wn-check { background: var(--wn-accent); border-color: var(--wn-accent); position: relative; }
.wn-done > .wn-check::after { content: ''; position: absolute; inset-inline-start: .27rem; top: .05rem; width: .25rem; height: .5rem; border: solid var(--wn-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wn-done > .wn-task-body { text-decoration: line-through; color: var(--wn-muted); }
.wn-toc { display: inline-block; min-width: 15rem; max-width: 100%; margin: .6rem 0; padding: .4rem 1rem .5rem; border-radius: 8px; background: var(--wn-surface-2); }
.wn-toc-title { margin: .2rem 0; font-weight: 800; }
.wn-toc ol { margin: .1rem 0; padding-inline-start: 1.1rem; }
.wn-children { padding-inline-start: 1.2rem; }
.wn-children-empty { color: var(--wn-muted); font-style: italic; }
.wn-embed { margin: .8rem 0; }
.wn-embed-card { display: flex; flex-direction: column; gap: .15rem; max-width: 34rem; padding: .7rem .9rem; border: 1px solid var(--wn-line); border-inline-start: 5px solid var(--wn-accent); border-radius: 10px; background: var(--wn-surface); color: var(--wn-ink); text-decoration: none; }
.wn-embed-card:hover { border-color: var(--wn-accent); }
.wn-embed-app { font-size: .78rem; font-weight: 700; color: var(--wn-muted); }
.wn-embed-title { font-weight: 700; color: var(--wn-accent-ink); text-decoration: underline; }
.wn-embed-facts { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .8rem; color: var(--wn-muted); }
.wn-img-missing { display: inline-block; padding: .3rem .6rem; border: 1px dashed var(--wn-control); border-radius: 6px; color: var(--wn-muted); font-size: .85rem; }
.wn-cmark { background: var(--wn-hl); border-bottom: 2px solid var(--wn-hl-line); color: var(--wn-ink); }
.wn-cnum { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; margin: 0 .15rem; padding: 0 .25rem; border-radius: 999px; background: var(--wn-accent); color: var(--wn-on-accent); font-size: .72rem; font-weight: 800; vertical-align: .1em; }
.wn-cnum-static { margin-inline-end: .35rem; }

/* ---------- comments */
.wn-comments { margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--wn-line); }
.wn-comments h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.wn-comments h2:focus { outline: none; }
.wn-comments-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.wn-comment { padding: .6rem .8rem; border: 1px solid var(--wn-line); border-radius: 10px; background: var(--wn-surface); }
.wn-comment:focus { outline: 3px solid var(--wn-focus); }
.wn-comment-head { margin: 0 0 .3rem; font-size: .85rem; color: var(--wn-muted); display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
.wn-comment-head strong { color: var(--wn-ink); }
.wn-comment-body { margin: .2rem 0 .4rem; white-space: pre-wrap; }
.wn-comment-quote { margin: .2rem 0 .4rem !important; font-style: italic; background: var(--wn-hl); color: var(--wn-ink) !important; border-color: var(--wn-hl-line) !important; border-radius: 4px; }
.wn-comment-form { display: flex; flex-direction: column; gap: .3rem; max-width: 40rem; }

/* ---------- editor */
.wn-editor { max-width: none; padding: .8rem 1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; min-height: 100%; box-sizing: border-box; }
:where(.wn-app) .wn-ed-title { width: 100%; font-size: 1.5rem; font-weight: 800; padding: .3rem .6rem; }
.wn-ed-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; position: sticky; top: 0; z-index: 3; background: var(--wn-bg); padding: .25rem 0; }
.wn-ed-toolbar { display: flex; flex-wrap: wrap; gap: .25rem .5rem; min-width: 0; }
.wn-tb-group { display: flex; flex-wrap: wrap; gap: .1rem; padding-inline-end: .4rem; border-inline-end: 1px solid var(--wn-line); }
.wn-ed-toolbar .wn-tb-group:last-child { border: 0; }
.wn-tb-btn { display: inline-grid !important; place-items: center; width: 34px; height: 34px; border-radius: 7px; color: var(--wn-ink); border: 1px solid transparent; }
.wn-tb-btn:hover { background: var(--wn-surface-2) !important; border-color: var(--wn-line); }
.wn-seg-group { display: flex; border: 1px solid var(--wn-control); border-radius: 8px; overflow: hidden; }
.wn-seg { padding: .3rem .6rem !important; min-height: 32px; font-size: .82rem !important; border-radius: 0 !important; color: var(--wn-ink); }
.wn-seg[aria-pressed="true"] { background: var(--wn-accent) !important; color: var(--wn-on-accent); }
.wn-ed-panes { flex: 1; display: grid; gap: .7rem; min-height: 26rem; }
.wn-mode-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wn-mode-write, .wn-mode-preview { grid-template-columns: minmax(0, 1fr); }
.wn-mode-write .wn-ed-preview, .wn-mode-preview .wn-ed-srcwrap { display: none; }
.wn-ed-srcwrap { display: flex; min-height: 0; }
:where(.wn-app) .wn-ed-src { flex: 1; width: 100%; min-height: 26rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.55; padding: .7rem .8rem; tab-size: 2; }
.wn-ed-preview { min-height: 26rem; max-height: 70vh; overflow-y: auto; padding: .2rem 1rem; border: 1px solid var(--wn-line); border-radius: 8px; background: var(--wn-surface); }
.wn-ed-foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
:where(.wn-app) .wn-ed-labels { flex: 1 1 14rem; } :where(.wn-app) .wn-ed-note { flex: 2 1 18rem; }
.wn-ed-actions { display: flex; gap: .4rem; margin-inline-start: auto; }
.wn-live { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 8px; background: var(--wn-pw-bg); border-inline-start: 4px solid var(--wn-pw); font-weight: 600; }
.wn-ac { position: fixed; z-index: 50; list-style: none; margin: 0; padding: .25rem; min-width: 14rem; max-width: 22rem; max-height: 14rem; overflow-y: auto; background: var(--wn-surface); color: var(--wn-ink); border: 1px solid var(--wn-control); border-radius: 8px; box-shadow: 0 10px 26px rgb(0 0 0 / .25); }
.wn-ac[hidden] { display: none; }
.wn-ac-item { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem .5rem; border-radius: 6px; cursor: pointer; font-size: .88rem; }
.wn-ac-item[aria-selected="true"] { background: var(--wn-accent); color: var(--wn-on-accent); }
.wn-ac-hint { opacity: .85; font-size: .78rem; }
.wn-mirror { position: absolute; top: 0; left: -9999px; visibility: hidden; overflow-wrap: break-word; white-space: pre-wrap; }

/* ---------- status bar */
.wn-statusbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 34px; padding: .2rem .8rem; background: var(--wn-surface); border-top: 1px solid var(--wn-line); }
.wn-status-text { margin: 0; font-size: .84rem; color: var(--wn-muted); min-width: 0; overflow-wrap: anywhere; }
.wn-chipbox { flex: none; }

/* ---------- dialogs */
.wn-dialog { width: min(36rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border: 1px solid var(--wn-control); border-radius: 14px; background: var(--wn-surface); color: var(--wn-ink); box-shadow: 0 24px 60px rgb(0 0 0 / .35); }
.wn-dialog-wide { width: min(64rem, calc(100vw - 1.5rem)); }
.wn-dialog::backdrop { background: rgb(10 14 24 / .55); }
.wn-dialog-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem .5rem; background: var(--wn-surface); border-bottom: 1px solid var(--wn-line); }
.wn-dialog-head h2 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.wn-dialog-lede { margin: .5rem 0 0; padding: 0 1rem; color: var(--wn-muted); font-size: .9rem; }
.wn-dialog-body { padding: .6rem 1rem 1rem; }
.wn-dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.wn-form { display: flex; flex-direction: column; gap: .55rem; }
.wn-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.wn-field-label { font-weight: 700; font-size: .88rem; }
.wn-check-row { display: flex; align-items: center; gap: .45rem; }
:where(.wn-dialog) .wn-check-row input { min-height: 0; width: 1.1rem; height: 1.1rem; }
.wn-pick { list-style: none; margin: .4rem 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.wn-pick-item { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; text-align: start; padding: .5rem .7rem; border: 1px solid var(--wn-line); border-radius: 9px; background: var(--wn-surface); color: var(--wn-ink); }
.wn-pick-item:hover { border-color: var(--wn-accent); background: var(--wn-surface-2); }
.wn-pick-name { font-weight: 700; overflow-wrap: anywhere; }
.wn-pick-meta { font-size: .82rem; color: var(--wn-muted); font-weight: 500; }
.wn-pick-snip { font-size: .84rem; color: var(--wn-ink); font-weight: 400; overflow-wrap: anywhere; }
.wn-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .45rem; }
.wn-tpl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .45rem; padding: .5rem .6rem; border: 1px solid var(--wn-line); border-radius: 9px; cursor: pointer; }
.wn-tpl:has(input:checked) { border-color: var(--wn-accent); box-shadow: inset 0 0 0 1px var(--wn-accent); background: var(--wn-surface-2); }
.wn-tpl input { grid-row: span 2; margin-top: .2rem; min-height: 0; }
.wn-tpl-name { font-weight: 700; }
.wn-tpl-desc { font-size: .8rem; color: var(--wn-muted); }
.wn-table-scroll { overflow: auto; max-width: 100%; border: 1px solid var(--wn-line); border-radius: 8px; }
.wn-diff { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; table-layout: fixed; min-width: 40rem; }
.wn-diff td { white-space: pre-wrap; overflow-wrap: anywhere; padding: 2px 6px; border-bottom: 0; }
.wn-diff .wn-dn { width: 2.6rem; color: var(--wn-muted); text-align: end; user-select: none; }
.wn-d-del .wn-dl, .wn-d-chg .wn-dl { background: var(--wn-del); color: var(--wn-del-ink); }
.wn-d-ins .wn-dr, .wn-d-chg .wn-dr { background: var(--wn-ins); color: var(--wn-ins-ink); }
.wn-diff del { background: color-mix(in srgb, var(--wn-del-ink) 22%, transparent); color: var(--wn-del-ink); text-decoration: line-through; }
.wn-diff ins { background: color-mix(in srgb, var(--wn-ins-ink) 22%, transparent); color: var(--wn-ins-ink); text-decoration: underline; }
.wn-diff-sum { font-weight: 600; }
.wn-d-fold td { text-align: center; color: var(--wn-muted); background: var(--wn-surface-2); font-style: italic; }
.wn-versions { font-size: .88rem; padding-inline-start: 1.4rem; }
.wn-dl { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .25rem .9rem; margin: 0; }
.wn-dl dt { font-weight: 700; } .wn-dl dd { margin: 0; overflow-wrap: anywhere; }
.wn-perm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .8rem; padding: .35rem 0; border-bottom: 1px solid var(--wn-line); }
.wn-perm-row:last-child { border-bottom: 0; }
.wn-perm-who { display: flex; flex-direction: column; font-weight: 700; }
.wn-perm-who .wn-hint { margin: 0; font-weight: 500; }
.wn-role { display: inline-block; padding: 0 .45rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--wn-surface-2); border: 1px solid var(--wn-line); }
.wn-role-admin { border-color: var(--wn-accent); }
.wn-role-none { color: var(--wn-warn); }
.wn-warn-list { margin: .5rem 0; padding-inline-start: 1.2rem; color: var(--wn-warn); font-size: .86rem; }
.wn-warn-list:empty { display: none; }
.wn-results .wn-pick { max-height: 60vh; overflow-y: auto; }

/* ---------- narrow screens */
@media (max-width: 860px) {
  .wn-body { grid-template-columns: minmax(0, 1fr); }
  .wn-side { position: fixed; z-index: 30; inset-block: 0; inset-inline-start: 0; width: min(20rem, 88vw); visibility: hidden; transform: translateX(-105%); transition: transform .18s ease, visibility .18s; box-shadow: 0 0 40px rgb(0 0 0 / .3); }
  [dir="rtl"] .wn-side { transform: translateX(105%); }
  .wn-side-open .wn-side { visibility: visible; transform: none; }
  .wn-side-toggle { display: inline-flex; }
  .wn-page { padding: 1rem .9rem 2.5rem; }
  .wn-page-title { font-size: 1.55rem; }
  .wn-mode-split { grid-template-columns: minmax(0, 1fr); }
  .wn-mode-split .wn-ed-preview { display: none; }
  :where(.wn-app) .wn-search { width: 10rem; }
}
@media (max-width: 480px) {
  .wn-toolbar { padding: .3rem .4rem; gap: .25rem .4rem; }
  .wn-search-wrap { flex: 1 1 100%; }
  :where(.wn-app) .wn-search { width: 100%; max-width: none; }
  .wn-ed-actions { margin-inline-start: 0; }
  .wn-statusbar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .wn-side { transition: none; } }
@media print {
  .wn-toolbar, .wn-side, .wn-statusbar, .wn-page-actions, .wn-comments form, .wn-sel-btn, .wn-copy { display: none !important; }
  .wn-body { display: block; }
}