/* Workspace foundations */
:root { color-scheme: light; --ui-bg:#fafcfb; --ui-surface:#fff; --ui-sidebar:#f0f4f2; --ui-soft:#eef3f1; --ui-ink:#1c302c; --ui-muted:#657a73; --ui-line:#dce6e1; --ui-accent:#15765e; --ui-tint:#e2f2ea; --ui-hover:#f4f9f6; --ui-button:#17785f; --ui-button-text:#fff; --ui-hero:#e9f4ed; --ui-shadow:0 4px 20px #1d3d2d05; --sidebar-width:242px; --footer-height:72px; }
.dark { color-scheme:dark; --ui-bg:#101516; --ui-surface:#182022; --ui-sidebar:#141b1c; --ui-soft:#202b2d; --ui-ink:#e7efeb; --ui-muted:#9aada5; --ui-line:#2d3b3c; --ui-accent:#82d7b5; --ui-tint:#233b33; --ui-hover:#1c2828; --ui-button:#9be0bf; --ui-button-text:#132c23; --ui-hero:#1b3029; --ui-shadow:none; }
* { box-sizing:border-box; }
html { scroll-padding-top:100px; }
body { background:var(--ui-bg)!important; color:var(--ui-ink)!important; font-family:'Segoe UI Variable','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif!important; font-size:15px; line-height:1.6; letter-spacing:-.012em; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
a,button { transition:color .16s,background-color .16s,border-color .16s,box-shadow .16s; }
button { cursor:pointer; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--ui-accent); outline-offset:4px; }
svg { flex-shrink:0; }
[hidden] { display:none!important; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:100; padding:12px 20px; border-radius:8px; background:var(--ui-ink); color:var(--ui-bg); }
.skip-link:focus { top:12px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--ui-muted); font-size:10px; line-height:1.5; letter-spacing:.13em; font-weight:650; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ui-accent); flex-shrink:0; }
.icon-button { display:inline-grid; place-items:center; width:38px; height:38px; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-surface); color:var(--ui-muted); flex-shrink:0; }
.icon-button:hover { color:var(--ui-accent); background:var(--ui-tint); }
.icon-button svg { width:18px; height:18px; }
.ui-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:11px 18px; border:1px solid transparent; border-radius:9px; font-size:13px; font-weight:600; line-height:1.5; text-decoration:none; cursor:pointer; white-space:nowrap; }
.ui-button-primary { color:var(--ui-button-text); background:var(--ui-button); box-shadow:0 2px 3px #0001; }
.ui-button-primary:hover { filter:brightness(.94); }
.ui-button-secondary { color:var(--ui-ink); background:var(--ui-surface); border-color:var(--ui-line); }
.ui-button-secondary:hover { background:var(--ui-soft); }
/* Sidebar and header */
.workspace-sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar-width); display:flex; flex-direction:column; padding:30px 20px 0; background:var(--ui-sidebar); border-right:1px solid var(--ui-line); z-index:50; overflow-y:auto; }
.wiki-brand { display:flex; align-items:center; gap:11px; min-width:0; font-size:18px; line-height:1.3; letter-spacing:-.045em; color:var(--ui-ink); font-weight:700; text-decoration:none; }
.wiki-brand > span:last-child { overflow-wrap:anywhere; }
.wiki-brand img,.brand-symbol { width:36px; height:36px; object-fit:contain; flex-shrink:0; }
.brand-symbol { display:grid; place-items:center; border-radius:10px; color:var(--ui-accent); background:var(--ui-tint); }
.brand-symbol svg { width:23px; height:23px; }
.wiki-brand small { display:block; margin-top:6px; font-size:8px; font-weight:500; letter-spacing:.1em; color:var(--ui-muted); }
.workspace-label { display:flex; gap:10px; align-items:center; margin:36px 0 30px; padding:13px 10px; border:1px solid var(--ui-line); border-radius:10px; font-size:12px; font-weight:600; background:var(--ui-surface); }
.workspace-label small { display:block; margin-top:3px; font-size:9px; font-weight:400; color:var(--ui-muted); }
.workspace-avatar { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; background:var(--ui-tint); color:var(--ui-accent); font-weight:600; }
.nav-label { margin:0 12px 12px; font-size:9px; }
.workspace-nav { display:flex; flex-direction:column; gap:6px; }
.workspace-nav > a { display:flex; align-items:center; gap:12px; min-height:44px; padding:10px 13px; border-radius:8px; color:var(--ui-muted); font-size:13px; font-weight:500; }
.workspace-nav > a:hover { background:var(--ui-soft); color:var(--ui-ink); }
.workspace-nav > a[aria-current="page"] { background:var(--ui-tint); color:var(--ui-accent); font-weight:650; }
.workspace-nav svg { width:18px; height:18px; }
.workspace-nav kbd { margin-left:auto; font-size:9px; font-weight:400; opacity:.7; }
.sidebar-bottom { margin-top:auto; padding-top:50px; }
.sidebar-note { padding:18px 16px; border:1px solid var(--ui-line); border-radius:12px; background:var(--ui-surface); }
.note-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--ui-tint); color:var(--ui-accent); margin-bottom:14px; }
.note-icon svg { width:18px; height:18px; }
.sidebar-note h2 { font-size:13px; line-height:1.6; font-weight:600; }
.sidebar-note p { margin:7px 0 14px; font-size:11px; line-height:1.8; color:var(--ui-muted); }
.sidebar-note a { display:flex; justify-content:space-between; color:var(--ui-accent); font-size:11px; font-weight:600; }
.sidebar-signature { display:flex; align-items:center; justify-content:center; gap:7px; height:var(--footer-height); margin:0; border-top:1px solid transparent; font-size:10px; line-height:16px; color:var(--ui-muted); }
.workspace-body { display:flex; flex-direction:column; min-height:100vh; margin-left:var(--sidebar-width); min-width:0; }
.site-header { position:sticky; top:0; z-index:40; background:var(--ui-bg); border-bottom:1px solid var(--ui-line); }
.header-inner { height:78px; padding:0 42px; display:flex; align-items:center; gap:26px; }
.header-location { display:flex; gap:12px; font-size:12px; color:var(--ui-muted); white-space:nowrap; }
.header-location strong { font-weight:500; color:var(--ui-ink); }
.shell-search { width:290px; margin-left:auto; min-width:0; }
.shell-search > div { position:relative; }
.shell-search input { width:100%; height:39px; border:1px solid var(--ui-line); border-radius:9px; padding:0 64px 0 36px; font-size:12px; background:var(--ui-surface); color:var(--ui-ink); }
.shell-search input::placeholder { color:var(--ui-muted); }
.search-icon { display:flex; position:absolute; top:11px; left:12px; color:var(--ui-muted); pointer-events:none; }
.search-icon svg { width:16px; height:16px; }
.shell-search kbd { position:absolute; right:9px; top:10px; padding:0 4px; border:1px solid var(--ui-line); border-radius:4px; color:var(--ui-muted); font-size:9px; pointer-events:none; }
.search-menu { position:absolute; top:calc(100% + 8px); width:100%; z-index:60; background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:10px; box-shadow:0 15px 35px #0002; overflow:hidden; }
.search-menu-label { padding:10px 14px; font-size:11px; color:var(--ui-muted); border-bottom:1px solid var(--ui-line); }
.search-menu button { font-size:12px; }
.search-menu button > span:last-child { max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.header-actions { display:flex; align-items:center; gap:17px; flex-shrink:0; font-size:12px; }
.header-actions .ui-button { padding:9px 14px; font-size:12px; }
.account-link { color:var(--ui-muted); }
.account-link:hover { color:var(--ui-accent); }
.account-avatar { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--ui-line); background:var(--ui-tint); color:var(--ui-accent); border-radius:50%; }
.account-avatar svg { width:18px; height:18px; }
.theme-light,.dark .theme-dark { display:none; }
.dark .theme-light { display:block; }
.mobile-menu,.sidebar-close,.navigation-backdrop { display:none; }
.site-main { flex:1; width:100%; max-width:1320px!important; padding:42px 48px 64px!important; margin-inline:auto; min-width:0; animation:none!important; }
.site-footer { border-top:1px solid var(--ui-line); margin:0 48px; }
.site-footer > div { display:flex; justify-content:space-between; align-items:center; gap:18px; min-height:calc(var(--footer-height) - 1px); padding:18px 0; font-size:10px; line-height:16px; color:var(--ui-muted); }
.site-footer nav { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.site-footer nav > span { padding-left:18px; border-left:1px solid var(--ui-line); }
.site-footer a:hover { color:var(--ui-accent); }
/* Library hero */
.library-heading { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:40px 42px; border:1px solid var(--ui-line); border-radius:20px; background:var(--ui-hero); margin-bottom:38px; overflow:hidden; min-height:310px; }
.hero-copy { position:relative; z-index:1; }
.library-heading .eyebrow { font-size:9px; color:var(--ui-accent); margin-bottom:20px; }
.library-heading h1 { font-size:clamp(30px,3.3vw,46px); font-weight:600; line-height:1.15; letter-spacing:-.055em; }
.library-heading h1 > span { color:var(--ui-accent); }
.page-description { font-size:14px; line-height:1.8; color:var(--ui-muted); margin-top:17px; }
.hero-actions { display:flex; align-items:center; gap:22px; margin-top:26px; }
.hero-text-link { display:inline-flex; gap:10px; font-size:12px; font-weight:500; color:var(--ui-ink); }
.hero-text-link:hover { color:var(--ui-accent); }
.hero-art { position:relative; width:260px; height:260px; flex-shrink:0; }
.art-orbit { position:absolute; inset:0; border:1px solid var(--ui-accent); opacity:.13; border-radius:50%; }
.orbit-two { inset:25px; }
.art-note { position:absolute; width:140px; height:174px; border:1px solid var(--ui-line); border-radius:14px; padding:22px; box-shadow:0 12px 25px #102b2012; background:var(--ui-surface); }
.note-back { left:76px; top:29px; transform:rotate(14deg); background:var(--ui-tint); }
.note-front { top:48px; left:35px; transform:rotate(-10deg); }
.art-note > svg { color:var(--ui-accent); width:30px; height:30px; margin-bottom:23px; }
.art-note > span { display:block; height:4px; border-radius:4px; background:var(--ui-line); margin-bottom:9px; }
.art-note > span:nth-of-type(2) { width:70%; }
.art-note i { display:block; margin-top:15px; font-size:8px; font-style:normal; color:var(--ui-muted); }
.art-star { position:absolute; right:21px; top:145px; font-size:60px; line-height:1; color:var(--ui-accent); transform:rotate(15deg); }
.art-label { position:absolute; bottom:-4px; left:45px; display:flex; gap:7px; align-items:center; white-space:nowrap; border:1px solid var(--ui-line); border-radius:20px; padding:7px 12px; background:var(--ui-surface); color:var(--ui-muted); font-size:9px; }
/* Library filters, cards, and list */
.library-layout { display:block; }
.library-topics { display:flex; flex-direction:column; gap:14px; margin-bottom:32px; }
.library-topics > .eyebrow { font-size:9px; }
.topic-list { display:flex; flex-wrap:wrap; gap:8px; }
.topic-link { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--ui-line); border-radius:7px; font-size:12px; color:var(--ui-muted); background:var(--ui-surface); overflow-wrap:anywhere; }
.topic-link:hover { background:var(--ui-soft); color:var(--ui-ink); }
.topic-link.is-active { border-color:var(--ui-accent); color:var(--ui-accent); background:var(--ui-tint); }
.topic-dot { display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.library-content { min-width:0; scroll-margin-top:100px; }
.library-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:22px; }
.library-title { display:flex; align-items:center; gap:10px; }
.library-title h2 { font-size:21px; letter-spacing:-.035em; font-weight:600; }
.count-badge { padding:2px 8px; border:1px solid var(--ui-line); border-radius:6px; background:var(--ui-soft); color:var(--ui-muted); font-size:10px; }
.library-controls { display:flex; align-items:center; gap:12px; }
.view-switch { display:flex; padding:3px; gap:2px; border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-soft); }
.view-switch button { display:grid; place-items:center; width:30px; height:29px; border-radius:5px; color:var(--ui-muted); }
.view-switch button[aria-pressed="true"] { background:var(--ui-surface); color:var(--ui-accent); box-shadow:0 1px 3px #0001; }
.view-switch svg { width:15px; height:15px; }
.sort-control select { background:var(--ui-surface); border:1px solid var(--ui-line); color:var(--ui-muted); border-radius:8px; padding:9px 26px 9px 11px; font-size:11px; cursor:pointer; }
.page-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.page-row { display:flex; flex-direction:column; align-items:flex-start; position:relative; gap:16px; min-width:0; padding:23px; border:1px solid var(--ui-line); border-radius:13px; background:var(--ui-surface); box-shadow:var(--ui-shadow); transition:border-color .18s,background-color .18s,box-shadow .18s; }
.page-row:hover,.page-row:focus-within { border-color:var(--ui-accent); background:var(--ui-hover); box-shadow:0 6px 22px #1743310b; }
.page-icon { display:grid; place-items:center; width:39px; height:39px; border-radius:10px; color:var(--ui-accent); background:var(--ui-tint); }
.page-icon svg { width:20px; height:20px; }
.page-row:nth-child(3n+2) .page-icon { background:#f4eeda; color:#897334; }
.dark .page-row:nth-child(3n+2) .page-icon { background:#363324; color:#d2bd7c; }
.page-row:nth-child(3n+3) .page-icon { background:#e9eaf7; color:#73709b; }
.dark .page-row:nth-child(3n+3) .page-icon { background:#2d2c3f; color:#b2aee0; }
.page-summary { width:100%; min-width:0; flex:1; }
.page-summary h3 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:16px; line-height:1.5; font-weight:600; letter-spacing:-.025em; }
.page-summary h3 a { color:var(--ui-ink); overflow-wrap:anywhere; }
.page-summary h3 a:hover { color:var(--ui-accent); }
.page-slug { font-size:10px; color:var(--ui-muted); margin-top:6px; overflow-wrap:anywhere; }
.page-topics { display:flex; flex-wrap:wrap; gap:5px; margin-top:15px; }
.page-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:5px; color:var(--ui-muted); background:var(--ui-soft); font-size:10px; overflow-wrap:anywhere; }
.page-tag:hover { color:var(--ui-accent); background:var(--ui-tint); }
.locked-label { font-size:9px; color:var(--ui-muted); border:1px solid var(--ui-line); border-radius:5px; padding:1px 5px; font-weight:400; }
.page-updated { display:flex; flex-wrap:wrap; gap:5px; border-top:1px solid var(--ui-line); width:100%; padding-top:15px; font-size:10px; color:var(--ui-muted); }
.page-arrow { position:absolute; top:23px; right:23px; color:var(--ui-muted); font-size:18px; }
.page-list[data-view="list"] { grid-template-columns:1fr; gap:10px; }
.page-list[data-view="list"] .page-row { flex-direction:row; align-items:center; gap:18px; padding:20px 24px; }
.page-list[data-view="list"] .page-icon { flex-shrink:0; }
.page-list[data-view="list"] .page-summary { width:auto; }
.page-list[data-view="list"] .page-topics { margin-top:8px; }
.page-list[data-view="list"] .page-updated { width:auto; border:0; padding:0; flex-shrink:0; flex-direction:column; text-align:right; margin-right:28px; }
.page-list[data-view="list"] .page-arrow { top:50%; transform:translateY(-50%); }
.library-end { text-align:center; font-size:11px; color:var(--ui-muted); padding-top:26px; }
.active-filter { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:20px; padding:13px 16px; border-radius:9px; background:var(--ui-tint); color:var(--ui-accent); font-size:12px; overflow-wrap:anywhere; }
.active-filter a { margin-left:auto; text-decoration:underline; }
.library-empty { padding:65px 24px; text-align:center; border:1px dashed var(--ui-line); border-radius:14px; background:var(--ui-surface); }
.empty-symbol { font-size:42px; color:var(--ui-accent); }
.library-empty h3 { font-size:23px; font-weight:600; letter-spacing:-.035em; margin:12px 0; }
.library-empty p { font-size:14px; color:var(--ui-muted); margin-bottom:24px; }
/* Article reading experience */
.site-main :is(h1,h2,h3).text-transparent { background:none!important; color:var(--ui-ink)!important; -webkit-text-fill-color:var(--ui-ink); }
.site-main h1 { letter-spacing:-.045em; }
.site-main > .animate-fade-in { animation:none!important; }
.wiki-page > nav { font-size:12px; }
.wiki-page > nav ol { flex-wrap:wrap; gap:5px; }
.article-eyebrow { padding-top:8px; margin-bottom:16px!important; }
.article-heading { padding-bottom:32px; border-bottom:1px solid var(--ui-line); margin-top:0!important; display:flex; align-items:flex-start; }
.article-heading h1 { font-size:clamp(32px,3.3vw,46px); font-weight:600; line-height:1.2; overflow-wrap:anywhere; }
.article-heading > div:first-child { flex:1; min-width:0; }
.article-heading > div:first-child > div:first-child { flex-wrap:wrap; }
.article-actions { flex-wrap:wrap; justify-content:flex-end; max-width:40%; }
.article-actions :is(a,button,span) { border-radius:8px; }
.wiki-page .article-meta { gap:10px; margin-top:20px; }
.wiki-page .article-meta > span { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--ui-line); border-radius:7px; color:var(--ui-muted); background:var(--ui-surface); font-size:11px; line-height:1.5; min-width:0; max-width:100%; overflow-wrap:anywhere; }
.article-meta > span svg { color:var(--ui-muted); }
.wiki-layout { gap:40px; align-items:flex-start; }
#article-content { order:0; min-width:0; width:100%; padding:15px 0 35px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--ui-ink); font-size:16px; line-height:1.9; overflow-wrap:anywhere; }
#article-content > :first-child,#article-content > [hidden]:first-child + * { margin-top:0; }
#article-content :is(h1,h2,h3,h4,h5,h6) { letter-spacing:-.035em; scroll-margin-top:110px; color:var(--ui-ink); }
#article-content h2 { font-size:25px; font-weight:600; margin-top:2em; border-color:var(--ui-line); padding-bottom:.5em; }
#article-content h3 { font-size:20px; font-weight:600; }
#article-content a { color:var(--ui-accent); text-decoration-color:var(--ui-line); text-underline-offset:4px; }
#article-content a:hover { text-decoration-color:var(--ui-accent); }
#article-content pre { max-width:100%; border-radius:10px; }
#article-content pre code { background:transparent!important; }
#article-content img { border-radius:12px; }
#article-content table { display:block; overflow-x:auto; max-width:100%; }
#article-content blockquote { border-left:3px solid var(--ui-accent); background:var(--ui-soft); color:var(--ui-muted); font-weight:400; border-radius:0 8px 8px 0; }
#toc-sidebar { order:1; width:212px; }
#toc-sidebar > div { border:1px solid var(--ui-line); background:var(--ui-surface); border-radius:12px; padding:20px; box-shadow:none; }
#toc-sidebar h3 { display:flex; align-items:center; gap:10px; font-size:10px; line-height:1.5; text-transform:uppercase; letter-spacing:.09em; }
#toc-sidebar > div > div:first-child { margin-bottom:18px; }
.toc-nav { border-left:1px solid var(--ui-line); margin-left:5px; }
.toc-nav a { font-size:12px; padding-block:7px; }
#toc-toggle { order:-2; }
@media(min-width:1024px) { #toc-sidebar { top:108px!important; max-height:calc(100vh - 140px)!important; } }
/* Search */
.search-heading { margin-bottom:28px; }
.search-heading h1 { margin-top:12px; font-size:40px; font-weight:600; letter-spacing:-.045em; }
.search-form { margin:24px 0 30px; max-width:740px; }
.search-form > div { display:flex; position:relative; gap:10px; }
.search-form input { min-width:0; flex:1; border:1px solid var(--ui-line); border-radius:10px; padding:14px 17px; font-size:15px; background:var(--ui-surface); color:var(--ui-ink); }
.search-form .search-menu { top:calc(100% + 8px); }
.search-results { display:flex; flex-direction:column; gap:14px; }
.search-results .page-row { flex-direction:row; align-items:flex-start; padding:26px; gap:20px; }
.search-results .page-icon { flex-shrink:0; }
.search-results .page-updated { width:auto; border:0; flex-shrink:0; padding-top:0; margin:5px 22px 0 0; }
.search-snippet { margin-top:13px; font-size:14px; line-height:1.8; color:var(--ui-muted); }
/* Consistent forms and dialogs */
.site-main :is(button,a)[class*="bg-gradient"] { background-image:none!important; background-color:var(--ui-button)!important; color:var(--ui-button-text)!important; box-shadow:none!important; }
.site-main :is(div,section,article)[class*="rounded-2xl"] { border-radius:13px; }
.site-main :is(input,textarea,select)[class*="rounded-xl"] { border-radius:9px; }
.site-main :is(input,textarea,select):focus { --tw-ring-color:transparent; border-color:var(--ui-accent); }
.site-main input.flex-1 { min-width:0; }
.site-main [class*="shadow-"] { box-shadow:none!important; }
.site-main .dark\:text-gray-500 { color:var(--ui-muted); }
.auth-page { padding:12px 0 30px; }
.auth-page > div:first-child > div:first-child { width:54px; height:54px; margin-bottom:20px; border-radius:15px; background:var(--ui-tint); color:var(--ui-accent); }
.auth-page > div:first-child > div:first-child svg { width:26px; height:26px; color:var(--ui-accent); }
.auth-page > div:nth-child(2) { padding:30px; box-shadow:var(--ui-shadow); }
.auth-page h1 { font-size:32px; font-weight:600; }
.editor-page > div:first-child h1 { font-size:36px; }
.editor-page textarea { min-height:450px; line-height:1.8; }
.editor-page > form > div:last-child { position:sticky; bottom:0; z-index:10; padding:17px 0; background:var(--ui-bg); border-top:1px solid var(--ui-line); }
.create-dialog { width:min(490px,calc(100% - 32px)); max-height:calc(100dvh - 40px); margin:auto; border:1px solid var(--ui-line); border-radius:18px; padding:30px; color:var(--ui-ink); background:var(--ui-surface); box-shadow:0 24px 80px #0004; }
.create-dialog::backdrop { background:#0b1715aa; backdrop-filter:blur(4px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.create-dialog h2 { font-size:29px; font-weight:600; letter-spacing:-.045em; }
.create-form { display:flex; flex-direction:column; margin-top:26px; }
.create-form label { font-size:13px; font-weight:500; margin-bottom:9px; }
.create-form input { width:100%; border:1px solid var(--ui-line); background:var(--ui-bg); color:var(--ui-ink); border-radius:9px; padding:12px 13px; font-size:14px; margin-bottom:22px; }
.create-form input:last-of-type { margin-bottom:8px; }
.optional,.field-hint { font-weight:400; color:var(--ui-muted); }
.field-hint { font-size:11px; line-height:1.7; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:27px; }
/* Responsive workspace */
@media(max-width:1250px) { :root { --sidebar-width:220px; } .workspace-sidebar { padding-inline:16px; } .header-location > span { display:none; } .header-inner { padding-inline:28px; gap:20px; } .site-main { padding-inline:30px!important; } .site-footer { margin-inline:30px; } .page-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero-art { transform:scale(.85); width:220px; margin-right:-10px; } .library-heading { padding:34px; } .hero-actions { gap:16px; } .wiki-layout { gap:30px; } }
@media(max-width:1023px) { .workspace-sidebar { transform:translateX(-100%); transition:transform .2s; width:260px; } .workspace-sidebar.is-open { transform:translateX(0); } .workspace-body { margin-left:0; } .mobile-menu,.sidebar-close { display:inline-grid; } .sidebar-close { position:absolute; right:12px; top:83px; background:var(--ui-sidebar); border-color:transparent; } .workspace-label { margin-top:55px; } .navigation-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:45; background:#07120fc0; } .header-location { display:none; } .header-inner { height:74px; gap:16px; } .shell-search { margin-left:0; width:auto; flex:1; max-width:400px; } .header-actions { margin-left:auto; } #toc-sidebar { order:-1; width:100%; } .wiki-layout { gap:22px; } .article-actions { max-width:50%; } }
@media(max-width:639px) { .header-inner { height:auto; min-height:70px; padding:14px 18px; flex-wrap:wrap; gap:13px; } .shell-search { order:3; flex-basis:100%; max-width:none; } .header-actions { gap:14px; } .site-main { padding:28px 20px 42px!important; } .site-footer { margin-inline:20px; } .site-footer > div { flex-direction:column; align-items:flex-start; gap:12px; } .site-footer nav { gap:13px; font-size:9px; } .site-footer nav > span { padding-left:13px; } .library-heading { padding:28px 24px; min-height:0; margin-bottom:28px; border-radius:15px; } .hero-art { display:none; } .library-heading h1 { font-size:36px; } .library-heading .eyebrow { font-size:8px; letter-spacing:.1em; } .page-description { font-size:13px; } .hero-actions { flex-wrap:wrap; gap:18px; } .hero-text-link { font-size:11px; } .page-list { grid-template-columns:1fr; gap:12px; } .library-toolbar { gap:14px; } .library-title h2 { font-size:20px; } .library-controls { gap:8px; } .sort-control select { max-width:152px; font-size:10px; padding-left:8px; } .view-switch button { width:26px; } .page-row { padding:22px; } .page-list[data-view="list"] .page-row { padding:17px; gap:13px; } .page-list[data-view="list"] .page-updated { display:none; } .page-list[data-view="list"] .page-summary { margin-right:15px; } .page-summary h3 { font-size:16px; } .article-heading { flex-direction:column; gap:22px; padding-bottom:25px; } .article-heading h1 { font-size:37px; } .article-actions { justify-content:flex-start; max-width:100%; } .wiki-page .article-meta { margin-top:17px; gap:9px; } #article-content { padding-top:3px; font-size:15px; line-height:1.85; } #article-content h2 { font-size:23px; } #article-content :is(h1,h2,h3,h4,h5,h6) { scroll-margin-top:155px; } .search-heading h1 { font-size:32px; } .search-results .page-row { gap:14px; padding:20px; } .search-results .page-updated { display:none; } .search-form input { width:100%; font-size:13px; padding:12px; } .search-form .ui-button { padding:10px 13px; } .auth-page > div:nth-child(2) { padding:23px; } .site-main .flex:has(> input[type="email"]) { flex-wrap:wrap; } .site-main .flex > input[type="email"] { flex-basis:100%; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
.mobile-brand { display:none; color:var(--ui-accent); flex-shrink:0; }
.mobile-brand img,.mobile-brand svg { width:28px; height:28px; object-fit:contain; }
@media(max-width:1023px) { .mobile-brand { display:block; } }
@media(max-width:359px) { .header-actions { gap:10px; } .header-actions .account-link { display:none; } }
/* Article attachments */
.article-body { order:0; flex:1; min-width:0; width:100%; }
.attachment-action { display:inline-flex; align-items:center; padding:7px 11px; border:1px solid var(--ui-line); background:var(--ui-tint); color:var(--ui-accent); font-size:12px; border-radius:8px; }
.attachment-action:hover { background:var(--ui-soft); }
.attachment-panel { margin-top:20px; padding:26px 0; border-top:1px solid var(--ui-line); scroll-margin-top:105px; }
.attachment-heading { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.attachment-heading .eyebrow { font-size:9px; margin-bottom:9px; }
.attachment-heading h2 { display:flex; align-items:center; gap:10px; font-size:23px; font-weight:600; letter-spacing:-.035em; }
.attachment-caption,.attachment-empty { color:var(--ui-muted); font-size:12px; }
.attachment-list { display:flex; flex-direction:column; gap:9px; padding:0; list-style:none; }
.attachment-row { display:flex; align-items:center; gap:13px; padding:16px; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-surface); }
.attachment-kind { display:grid; place-items:center; min-width:43px; min-height:43px; padding:6px; border-radius:8px; background:var(--ui-tint); color:var(--ui-accent); font-size:9px; font-weight:650; flex-shrink:0; max-width:70px; overflow-wrap:anywhere; }
.attachment-info { min-width:0; flex:1; }
.attachment-info > a { color:var(--ui-ink); font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.attachment-info > a:hover { color:var(--ui-accent); text-decoration:underline; text-underline-offset:3px; }
.attachment-info p { margin-top:4px; font-size:10px; color:var(--ui-muted); overflow-wrap:anywhere; }
.attachment-info p span { padding-inline:4px; }
.attachment-row form { flex-shrink:0; }
.attachment-row .icon-button { width:32px; height:34px; border-color:transparent; }
.attachment-row .icon-button svg { width:16px; height:16px; }
.attachment-remove:hover { color:#c64848; background:var(--ui-soft); }
.attachment-uploader { margin-top:20px; border:1px dashed var(--ui-line); border-radius:11px; padding:16px 18px; }
.attachment-uploader summary { cursor:pointer; color:var(--ui-accent); font-size:13px; font-weight:500; }
.attachment-uploader form { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.attachment-uploader label { font-size:12px; color:var(--ui-ink); }
.attachment-uploader input[type="file"] { width:100%; min-width:0; padding:10px; border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-surface); color:var(--ui-muted); font-size:12px; }
.attachment-uploader input::file-selector-button { border:0; border-radius:5px; padding:7px 10px; margin-right:12px; background:var(--ui-tint); color:var(--ui-accent); cursor:pointer; font:inherit; }
.attachment-upload-footer { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:5px; }
.attachment-upload-footer p { font-size:10px; line-height:1.8; color:var(--ui-muted); }
.attachment-upload-footer button:disabled { opacity:.6; cursor:wait; }
.editor-attachment-link { font-size:13px; color:var(--ui-accent); }
@media(max-width:639px) { .attachment-panel { scroll-margin-top:155px; } .attachment-row { padding:12px; gap:9px; } .attachment-caption { display:none; } .attachment-info > a { font-size:13px; } .attachment-upload-footer { flex-direction:column; align-items:flex-start; gap:14px; } .attachment-kind { min-width:34px; min-height:38px; } .attachment-row .icon-button { width:28px; } }

/* One language selector in the header; native details keeps it usable without JS. */
.language-switcher { position:relative; flex:0 0 auto; font-size:12px; line-height:1.4; color:var(--ui-ink); }
.language-switcher > summary { display:flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 11px; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-surface); cursor:pointer; list-style:none; white-space:nowrap; font-weight:500; user-select:none; }
.language-switcher > summary::marker { content:""; }
.language-switcher > summary::-webkit-details-marker { display:none; }
.language-switcher > summary:hover,.language-switcher[open] > summary { color:var(--ui-accent); background:var(--ui-tint); }
.language-globe { width:17px; height:17px; color:var(--ui-muted); }
.language-chevron { width:13px; height:13px; color:var(--ui-muted); transition:transform .16s; }
.language-switcher[open] .language-chevron { transform:rotate(180deg); }
.language-code { display:none; text-transform:uppercase; letter-spacing:.04em; }
.language-switcher > nav { position:absolute; top:calc(100% + 8px); right:0; width:180px; max-width:calc(100vw - 36px); padding:5px; border:1px solid var(--ui-line); border-radius:12px; background:var(--ui-surface); box-shadow:0 12px 30px #0003; z-index:60; }
.language-switcher > nav a { display:flex; align-items:center; justify-content:space-between; min-height:40px; padding:9px 11px; gap:14px; border-radius:7px; color:var(--ui-ink); text-decoration:none; white-space:nowrap; }
.language-switcher > nav a:hover,.language-switcher > nav a[aria-current] { background:var(--ui-tint); color:var(--ui-accent); }
.language-check { width:15px; height:15px; }
.translation-source a { color:var(--ui-accent); }
@media (max-width:1250px) { .language-switcher .language-name { display:none; } .language-switcher .language-code { display:inline; } }
@media (max-width:767px) { .language-switcher > summary { gap:6px; padding-inline:9px; } .header-inner { gap:10px; } }
@media (max-width:639px) { .mobile-brand { display:none; } .language-switcher { margin-left:auto; } .language-switcher > nav { left:0; right:auto; } .header-actions { margin-left:0; gap:10px; } .header-actions .ui-button { padding-inline:10px; } }
@media (max-width:359px) { .header-actions .account-link { display:none; } }

/* Import articles from the active language's Markdown directory. */
.markdown-import { padding:24px; border:1px solid var(--ui-line); border-radius:14px; background:var(--ui-surface); }
.markdown-import-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.markdown-import-heading > div { min-width:0; }
.markdown-import h2 { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:17px; font-weight:600; }
.markdown-import h2 span { padding:3px 8px; border-radius:6px; background:var(--ui-tint); color:var(--ui-accent); font-size:11px; font-weight:500; }
.markdown-import p { margin-top:8px; max-width:65ch; font-size:12px; line-height:1.8; color:var(--ui-muted); }
.markdown-import form { flex-shrink:0; }
.markdown-import button:disabled { opacity:.65; cursor:wait; }
.markdown-import-directory { display:flex; align-items:baseline; gap:12px; margin-top:18px; font-size:11px; color:var(--ui-muted); }
.markdown-import code { overflow-wrap:anywhere; font-size:11px; }
.markdown-import-directory code { color:var(--ui-ink); }
.markdown-import-report { margin-top:20px; padding-top:18px; border-top:1px solid var(--ui-line); font-size:12px; }
.markdown-import-report > strong { font-size:13px; font-weight:600; }
.markdown-import-counts { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:10px; color:var(--ui-muted); }
.markdown-import-counts b { color:var(--ui-accent); font-weight:600; }
.markdown-import details { margin-top:15px; }
.markdown-import summary { cursor:pointer; color:var(--ui-accent); }
.markdown-import ul { list-style:none; margin-top:12px; padding:0; }
.markdown-import li { display:flex; flex-wrap:wrap; gap:5px 16px; padding:8px 0; color:var(--ui-muted); }
.markdown-import li code { color:var(--ui-ink); }
@media(max-width:767px) { .markdown-import { padding:20px; } .markdown-import-heading { align-items:flex-start; flex-direction:column; gap:16px; } .markdown-import-directory { flex-direction:column; gap:5px; } }