/* ==========================================================================
   wiki.libreportal.org — what a guide page needs on top of the website.

   Loaded after the website's own stylesheet (assets/site/style.css, passed
   through from site/src/assets/style.css), so the topbar, footer, colours,
   aurora and glass cards are the website's. Only reading furniture lives here:
   the three-column shell, sidebar, contents, callouts, steps, code, figures,
   tables, app pages, search, and the light theme.
   ========================================================================== */

:root{
  --wiki-top:60px;
  --wiki-side:272px;
  --wiki-toc:224px;
  --wiki-measure:54rem;
  --read:rgba(255,255,255,.86);          /* body text: a touch brighter than --text-secondary */
  --panel:rgba(9,14,30,.58);             /* behind the reading column */
  --panel-border:rgba(255,255,255,.08);
  --code-bg:rgba(255,255,255,.08);
  --pre-bg:#0a1122;
  --pre-text:#e6f3ff;
  --link:#5fe0ff;
  --ok:#3ddc97; --ok-rgb:61,220,151;
  --warn:#ffc24b; --warn-rgb:255,194,75;
  --bad:#ff7a70; --bad-rgb:255,122,112;
  --violet:#a99bff; --violet-rgb:169,155,255;
}

/* ---------- light: the WebUI's Light theme, carried over ------------------ */
[data-theme="light"]{
  --gradient-from:#f5f7fb; --gradient-mid:#eaf1fa; --gradient-to:#e3edf7;
  --surface-solid:#f5f7fb; --surface-bg-solid:#ffffff;
  --accent:#0a8fc2; --accent-hover:#077aa6; --accent-rgb:10,143,194; --accent-soft:rgba(10,143,194,.10);
  --text-primary:#14202e; --text-secondary:#3b4757; --text-muted:#5b6675; --text-faint:#6f7a88;
  --text-on-accent:#ffffff; --text-rgb:20,32,46;
  --border:#d8dee6; --border-strong:#c3ccd6; --border-subtle:#e6ebf1;
  --card-bg:linear-gradient(155deg,#ffffff 0%,#f6fbfe 100%);
  --card-border:#dbe2ea;
  --card-shadow:0 1px 3px rgba(20,32,46,.06),0 6px 18px rgba(20,32,46,.05);
  --card-shadow-hover:0 10px 28px rgba(10,143,194,.14),0 2px 8px rgba(20,32,46,.08);
  --topbar-bg:rgb(255,255,255);
  --console-bg:#f1f4f8;
  --read:#243142;
  --panel:rgba(255,255,255,.78);
  --panel-border:#e3e8ee;
  --code-bg:#eef2f6;
  --link:#0877a6;
  --ok:#16955f; --ok-rgb:22,149,95;
  --warn:#a86a00; --warn-rgb:214,140,0;
  --bad:#c92a37; --bad-rgb:201,42,55;
  --violet:#5b48d6; --violet-rgb:91,72,214;
}
[data-theme="light"] body{background:transparent}
[data-theme="light"] .cosmos::before,[data-theme="light"] .cosmos::after{opacity:.28}
[data-theme="light"] .stars{display:none}
[data-theme="light"] .grad{background:linear-gradient(100deg,#0a8fc2,#0aa6d6 55%,#2b6fd6);-webkit-background-clip:text;background-clip:text}
[data-theme="light"] footer{background:rgba(255,255,255,.7)}
[data-theme="light"] .tb-cta:hover{background:var(--accent-hover)}
[data-theme="light"] .app-ico{background:#fff}

/* ---------- page frame ---------------------------------------------------- */
body.wiki{line-height:1.65}
body.wiki .cosmos{opacity:.72}
.skip{position:absolute;left:-999px;top:8px;z-index:2000;background:var(--accent);color:var(--text-on-accent);padding:8px 14px;border-radius:8px;font-weight:700}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.wiki-topbar{gap:16px}
.wiki-badge{display:inline-flex;align-items:center;gap:6px;height:40px;box-sizing:border-box;padding:0 12px;border-radius:8px;text-decoration:none;font-size:.82rem;font-weight:700;color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.4);background:var(--accent-soft);white-space:nowrap}
.wiki-badge svg{width:16px;height:16px;flex:0 0 auto}
.wiki-search-btn{display:flex;align-items:center;gap:10px;flex:0 1 380px;margin-left:auto;min-width:0;height:40px;padding:0 12px;
  border-radius:10px;border:1px solid var(--border);background:rgba(var(--text-rgb),.05);color:var(--text-muted);
  font:inherit;font-size:.9rem;cursor:pointer;transition:border-color .2s,background .2s}
.wiki-search-btn:hover{border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--text-rgb),.08);color:var(--text-primary)}
.wiki-search-btn svg{width:17px;height:17px;flex:0 0 auto}
.wiki-search-btn .label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
kbd,.shortcut{font-family:var(--font-mono);font-size:.74rem;padding:1px 7px;border-radius:6px;border:1px solid var(--border);
  border-bottom-width:2px;background:rgba(var(--text-rgb),.06);color:var(--text-secondary)}
.wiki-controls{flex:0 0 auto}
.theme-toggle{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border);
  background:rgba(var(--text-rgb),.05);color:var(--text-secondary);cursor:pointer}
.theme-toggle:hover{color:var(--text-primary);border-color:rgba(var(--accent-rgb),.5)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .i-moon{display:none}
[data-theme="light"] .theme-toggle .i-sun{display:none}
[data-theme="light"] .theme-toggle .i-moon{display:block}

.wiki-shell{display:grid;grid-template-columns:var(--wiki-side) minmax(0,1fr) var(--wiki-toc);
  max-width:var(--maxw);margin:0 auto;padding:var(--wiki-top) var(--gutter) 0;min-height:100vh;position:relative;z-index:1}

/* ---------- sidebar ------------------------------------------------------- */
.wiki-sidebar{position:sticky;top:var(--wiki-top);height:calc(100vh - var(--wiki-top));overflow-y:auto;
  padding:26px 14px 40px 22px;border-right:1px solid var(--border-subtle);scrollbar-width:thin}
.side-nav{font-size:.93rem}
.side-home{margin-bottom:10px;text-decoration:none}
.side-section{margin-bottom:6px}
.side-section>summary{list-style:none;cursor:pointer;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);padding:12px 10px 6px;display:flex;align-items:center;justify-content:space-between}
.side-section>summary::-webkit-details-marker,.side-group>summary::-webkit-details-marker{display:none}
.side-section>summary::after,.side-group>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .2s;opacity:.7;margin-right:4px}
.side-section[open]>summary::after,.side-group[open]>summary::after{transform:rotate(45deg)}
.side-nav ul{list-style:none}
.side-nav li a,.side-home{display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 10px;border-radius:8px;color:var(--text-muted);
  text-decoration:none;line-height:1.35;transition:background .15s,color .15s}
.side-nav .ico{width:17px;height:17px;flex:0 0 auto;opacity:.7}
.side-nav a.is-current .ico,.side-nav a:hover .ico{opacity:1;color:var(--accent)}
.side-nav li a:hover,.side-home:hover{background:rgba(var(--text-rgb),.06);color:var(--text-primary)}
.side-nav a.is-current{background:var(--accent-fill);color:#fff;font-weight:600}
.side-nav a.is-current .ico{color:#fff;opacity:1}
.side-nav a.is-current .stub-dot{background:#fff}
.side-home{background:rgba(var(--text-rgb),.14);border:1px solid rgba(var(--text-rgb),.32);color:var(--text-secondary);font-weight:600}
.side-home.is-current{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.side-home.is-current .ico{color:#fff;opacity:1}
.side-head{display:none}
.side-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;color:var(--text-muted)}
.side-group>summary:hover{background:rgba(var(--text-rgb),.06);color:var(--text-primary)}
.side-group>summary .n{margin-left:auto;font-family:var(--font-mono);font-size:.7rem;color:var(--text-faint)}
.side-group>ul{margin:2px 0 6px 12px;padding-left:8px;border-left:1px solid var(--border-subtle)}
.stub-dot{width:6px;height:6px;border-radius:50%;background:rgba(var(--warn-rgb),.8);margin-left:auto;flex:0 0 auto}
.side-foot{margin-top:22px;padding:14px 10px 0;border-top:1px solid var(--border-subtle);font-size:.85rem}
.side-foot a{color:var(--text-faint);text-decoration:none}
.side-foot a:hover{color:var(--accent)}
.sidebar-scrim{display:none}

/* ---------- main column --------------------------------------------------- */
.wiki-main{min-width:0;padding:30px 24px 70px}
.crumbs{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--text-faint);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--text-muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{opacity:.5}
.wiki-article{max-width:var(--wiki-measure);background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;
  padding:clamp(22px,4vw,46px) clamp(18px,4.2vw,52px) clamp(26px,4vw,50px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wiki-head{margin-bottom:46px}
.wiki-head h1{max-width:none;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.1;letter-spacing:-.025em;font-weight:800;color:var(--text-primary)}
.wiki-article .wiki-lede{font-size:clamp(1.05rem,1.8vw,1.18rem);color:var(--text-secondary);margin-top:24px;line-height:1.6;max-width:60ch}

/* prose */
.wiki-article h2{font-size:clamp(1.35rem,2.4vw,1.62rem);line-height:1.25;letter-spacing:-.015em;font-weight:750;color:var(--text-primary);
  margin:48px 0 14px;padding-top:22px;border-top:1px solid var(--border-subtle);scroll-margin-top:calc(var(--wiki-top) + 18px)}
.wiki-article h3{font-size:1.14rem;font-weight:700;color:var(--text-primary);margin:32px 0 10px;scroll-margin-top:calc(var(--wiki-top) + 18px)}
.wiki-article h4{font-size:1rem;font-weight:700;color:var(--text-primary);margin:24px 0 8px}
.wiki-head+h2,.toc-mobile+h2,.wiki-article>h2:first-child,.handwritten>h2:first-child{border-top:0;padding-top:0;margin-top:12px}
.wiki-article>h2:first-child{margin-top:0}
.h-anchor{margin-left:.45em;color:var(--text-faint);text-decoration:none;opacity:0;font-weight:400;transition:opacity .15s}
h2:hover .h-anchor,h3:hover .h-anchor,.h-anchor:focus{opacity:1}
.wiki-article p,.wiki-article li{color:var(--read);font-size:1.03rem;line-height:1.75}
.wiki-article p{margin:0 0 16px}
.wiki-article ul,.wiki-article ol{margin:0 0 18px 1.3em}
.wiki-article li{margin-bottom:7px;padding-left:.2em}
.wiki-article li>ul,.wiki-article li>ol{margin-top:6px;margin-bottom:6px}
.wiki-article strong{color:var(--text-primary);font-weight:700}
.wiki-article a{color:var(--link);text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.4);text-underline-offset:3px;text-decoration-thickness:1px}
.wiki-article a:hover{text-decoration-color:currentColor}
.wiki-article hr{border:0;border-top:1px solid var(--border-subtle);margin:36px 0}
.wiki-article blockquote{margin:0 0 18px;padding:4px 0 4px 18px;border-left:3px solid var(--border-strong);color:var(--text-secondary)}
.wiki-article :not(pre)>code{font-family:var(--font-mono);font-size:.86em;padding:.14em .42em;border-radius:6px;background:var(--code-bg);
  color:var(--text-primary);border:1px solid var(--border-subtle);overflow-wrap:anywhere}
.ui-label{font-weight:650;color:var(--text-primary);padding:.05em .45em;border-radius:6px;border:1px solid var(--border);background:rgba(var(--text-rgb),.05);white-space:nowrap;font-size:.95em}
.todo{display:inline-block;font-family:var(--font-mono);font-size:.78rem;color:var(--warn);border:1px dashed rgba(var(--warn-rgb),.6);border-radius:6px;padding:1px 7px}

/* code blocks: always the terminal look, in both themes */
.wiki-article pre{position:relative;margin:0 0 20px;background:var(--pre-bg);color:var(--pre-text);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:16px 18px;overflow-x:auto;font-size:.88rem;line-height:1.6;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.wiki-article pre code{font-family:var(--font-mono);background:none;border:0;padding:0;color:inherit;white-space:pre}
.wiki-article pre.has-copy{padding-right:78px}
.code-copy{position:absolute;top:10px;right:10px;font:600 .74rem var(--font-sans);color:#0a1426;background:#00d4ff;border:0;border-radius:7px;
  padding:5px 10px;cursor:pointer;opacity:.9;transition:opacity .15s,background .2s}
.code-copy:hover{opacity:1;background:#22dbff}
.code-copy.done{background:#28a745;color:#fff}

/* tables scroll on their own rather than widening the page */
.wiki-article table{display:block;overflow-x:auto;border-collapse:collapse;margin:0 0 22px;font-size:.94rem;max-width:100%}
.wiki-article th,.wiki-article td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border-subtle);vertical-align:top;color:var(--read)}
.wiki-article th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-weight:600;white-space:nowrap}
.wiki-article tbody tr:hover td{background:rgba(var(--text-rgb),.03)}

/* callouts */
.callout{--c:var(--accent-rgb);margin:0 0 22px;padding:16px 18px 4px 18px;border-radius:12px;border:1px solid rgba(var(--c),.32);
  background:linear-gradient(135deg,rgba(var(--c),.12),rgba(var(--c),.04));border-left:4px solid rgba(var(--c),.85)}
.callout-title{font-weight:750;color:var(--text-primary);margin:0 0 6px!important;display:flex;align-items:center;gap:8px;font-size:.98rem}
.callout-title::before{content:"i";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 .74rem var(--font-mono);
  background:rgba(var(--c),.9);color:#0a1426;flex:0 0 auto}
.callout p,.callout li{font-size:.98rem}
.callout-tip{--c:var(--ok-rgb)} .callout-tip .callout-title::before{content:"✓"}
.callout-warning{--c:var(--warn-rgb)} .callout-warning .callout-title::before{content:"!"}
.callout-danger{--c:var(--bad-rgb)} .callout-danger .callout-title::before{content:"!";color:#fff}
.callout-why{--c:var(--violet-rgb)} .callout-why .callout-title::before{content:"?";color:#fff}
.callout-stub{--c:var(--warn-rgb);border-style:dashed;border-left-style:solid}
.callout-stub .callout-title::before{content:"✎"}

/* numbered steps */
.steps>ol{list-style:none;margin:6px 0 24px;padding:0;counter-reset:step}
.steps>ol>li{counter-increment:step;position:relative;padding:0 0 18px 50px;margin:0}
.steps>ol>li::before{content:counter(step);position:absolute;left:0;top:-1px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font:700 .9rem var(--font-mono);color:var(--accent);background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.45)}
.steps>ol>li::after{content:"";position:absolute;left:15.5px;top:36px;bottom:4px;width:1px;background:linear-gradient(rgba(var(--accent-rgb),.45),rgba(var(--accent-rgb),.05))}
.steps>ol>li:last-child::after{display:none}
.steps>ol>li>p:first-child{margin-top:2px}
.steps>ol>li>strong:first-child,.steps>ol>li>p:first-child>strong:first-child{color:var(--text-primary)}

/* screenshots */
.shot{margin:6px 0 26px}
.shot-frame{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:0 12px 36px rgba(0,0,0,.35);background:#0b1224;line-height:0}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{font-size:.88rem;color:var(--text-muted);margin-top:10px;line-height:1.5;padding-left:2px}
.figure-phone{max-width:340px;margin-inline:auto}
.figure-phone .shot-frame{border-radius:22px}
.figure-phone figcaption{text-align:center}
.shot-pair{display:grid;grid-template-columns:1.8fr 1fr;gap:18px;align-items:start}
.shot-pair .figure-phone{max-width:none}
[data-theme="light"] .shot-frame{box-shadow:0 8px 26px rgba(20,32,46,.14)}

/* contents */
.wiki-toc{position:sticky;top:var(--wiki-top);height:calc(100vh - var(--wiki-top));overflow-y:auto;padding:34px 16px 30px 8px;font-size:.85rem}
.toc-title{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px}
.wiki-toc ol,.toc-mobile ol{list-style:none;border-left:1px solid var(--border-subtle);margin:0;padding:0}
.wiki-toc a,.toc-mobile a{display:block;padding:5px 12px;margin-left:-1px;border-left:2px solid transparent;color:var(--text-muted);text-decoration:none;line-height:1.35}
.wiki-toc a:hover{color:var(--text-primary)}
.wiki-toc a.active{color:var(--accent);border-left-color:var(--accent)}
.wiki-toc .toc-l3 a,.toc-mobile .toc-l3 a{padding-left:24px;font-size:.95em}
.toc-mobile{display:none;margin:0 0 26px;border:1px solid var(--border);border-radius:12px;background:rgba(var(--text-rgb),.03)}
.toc-mobile summary{cursor:pointer;padding:12px 16px;font-weight:650;color:var(--text-secondary);font-size:.94rem}
.toc-mobile ol{margin:0 16px 14px}
.wiki-article .toc-mobile li{margin:0;padding:0;font-size:.95rem}

/* previous / next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:var(--wiki-measure);margin-top:22px}
.pager a{display:flex;flex-direction:column;gap:3px;padding:16px 20px;border-radius:14px;text-decoration:none;transition:border-color .2s,transform .2s}
.pager a:hover{border-color:rgba(var(--accent-rgb),.5);transform:translateY(-2px)}
.pager span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.pager b{color:var(--text-primary);font-weight:650}
.pager-next{text-align:right;grid-column:2}

/* cards used on the home page and section indexes */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px;margin:6px 0 26px}
.link-card{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:14px;text-decoration:none!important;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.link-card:hover{border-color:rgba(var(--accent-rgb),.5);transform:translateY(-3px);box-shadow:var(--card-shadow-hover)}
.link-card b{color:var(--text-primary);font-size:1.02rem}
.link-card span{color:var(--text-secondary);font-size:.92rem;line-height:1.5}
.link-card .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.3);margin-bottom:6px}
.link-card .ico svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.7}

/* ---------- home ----------------------------------------------------------- */
.wiki-home .wiki-shell{grid-template-columns:var(--wiki-side) minmax(0,1fr)}
.wiki-home .wiki-toc{display:none}
.home-hero{text-align:left;padding:18px 0 30px;max-width:var(--wiki-measure)}
.home-hero h1{max-width:none;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.04;letter-spacing:-.03em;font-weight:800;color:var(--text-primary)}
.home-hero p{color:var(--text-secondary);font-size:clamp(1.05rem,1.9vw,1.2rem);margin-top:16px;max-width:56ch;line-height:1.6}
.home-search{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;margin-top:26px;height:54px;padding:0 18px;border-radius:14px;
  border:1px solid rgba(var(--accent-rgb),.45);background:var(--panel);color:var(--text-muted);font:inherit;font-size:1rem;cursor:pointer;
  box-shadow:0 0 0 6px rgba(var(--accent-rgb),.08);transition:box-shadow .2s,border-color .2s}
.home-search:hover{box-shadow:0 0 0 8px rgba(var(--accent-rgb),.14);border-color:var(--accent);color:var(--text-primary)}
.home-search svg{width:20px;height:20px;stroke:var(--accent)}
.home-search .label{flex:1;text-align:left}
.home-main{max-width:980px}
.home-main .wiki-article{max-width:none}
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:4px 0 30px}
.path-card{position:relative;padding:22px 20px 18px;border-radius:16px;text-decoration:none!important;display:flex;flex-direction:column;gap:8px;transition:transform .25s,border-color .25s,box-shadow .25s}
.path-card:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.5);box-shadow:var(--card-shadow-hover)}
.path-card .num{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.path-card b{font-size:1.15rem;color:var(--text-primary);line-height:1.25}
.path-card span{font-size:.94rem;color:var(--text-secondary);line-height:1.5}
.app-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:10px;margin:6px 0 16px}
.app-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none!important;transition:border-color .2s,transform .2s}
.app-chip:hover{border-color:rgba(var(--accent-rgb),.5);transform:translateY(-2px)}
.app-chip img{width:30px;height:30px;border-radius:8px;padding:4px;background:rgba(255,255,255,.06);border:1px solid var(--border-subtle);flex:0 0 auto}
.app-chip b{color:var(--text-primary);font-size:.94rem;font-weight:650;line-height:1.2;display:block}
.app-chip small{color:var(--text-faint);font-size:.76rem;display:block;line-height:1.3}

/* ---------- guide page title tile ----------------------------------------- */
.page-hero{display:flex;gap:16px;align-items:center}
.page-hero h1{margin:0}
.page-ico{width:48px;height:48px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--border-subtle);color:var(--accent)}
.page-ico .ico{width:24px;height:24px}

/* ---------- app pages ----------------------------------------------------- */
.app-hero{display:flex;gap:20px;align-items:flex-start}
.app-hero .app-ico{width:72px;height:72px;border-radius:18px;padding:10px}
.app-hero h1{margin-top:2px}
.app-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);color:var(--text-muted);background:rgba(var(--text-rgb),.04);text-decoration:none!important}
a.tag:hover{border-color:var(--accent);color:var(--accent)}
.tag-accent{color:var(--accent);border-color:rgba(var(--accent-rgb),.4);background:var(--accent-soft)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:12px;margin:4px 0 26px}
.fact{padding:14px 16px;border-radius:12px;border:1px solid var(--border-subtle);background:rgba(var(--text-rgb),.035)}
.fact dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:5px}
.fact dd{color:var(--text-primary);font-size:.95rem;line-height:1.45;font-weight:600}
.fact dd code{white-space:nowrap}
.fact dd small{display:block;font-weight:400;color:var(--text-muted);font-size:.85rem;margin-top:3px}
.tool-list{display:grid;gap:12px;margin:6px 0 24px}
.tool{padding:16px 18px;border-radius:12px;border:1px solid var(--border-subtle);background:rgba(var(--text-rgb),.03)}
.tool-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tool-head b{color:var(--text-primary);font-size:1rem}
.tool-ico{font-size:1.1rem;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:rgba(var(--text-rgb),.06)}
.tool p{margin:8px 0 0!important;font-size:.96rem!important}
.tool .fields{margin-top:8px;font-size:.86rem;color:var(--text-muted)}
.tag-danger{color:var(--bad);border-color:rgba(var(--bad-rgb),.45)}
.works{list-style:none;margin:6px 0 24px!important;display:grid;gap:10px}
.works li{padding:14px 16px!important;border-radius:12px;border:1px solid var(--border-subtle);background:rgba(var(--text-rgb),.03);margin:0!important}
.works li b{color:var(--text-primary)}
.works .with{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.handwritten{margin-top:8px}
.generated-note{font-size:.86rem!important;color:var(--text-faint)!important;margin-top:30px!important;border-top:1px solid var(--border-subtle);padding-top:16px}

/* apps index */
.cat-block{margin-bottom:12px}
.app-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;margin:6px 0 26px}
.app-row{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;text-decoration:none!important;transition:border-color .2s,transform .2s}
.app-row:hover{border-color:rgba(var(--accent-rgb),.5);transform:translateY(-2px)}
.app-row img{width:40px;height:40px;border-radius:10px;padding:5px;background:rgba(255,255,255,.06);border:1px solid var(--border-subtle);flex:0 0 auto}
.app-row b{color:var(--text-primary);display:block;font-size:1rem;line-height:1.25}
.app-row span{color:var(--text-secondary);font-size:.88rem;line-height:1.45;display:block;margin-top:2px}

/* ---------- search -------------------------------------------------------- */
.search-modal{position:fixed;inset:0;z-index:3000;display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px}
.search-modal[hidden]{display:none}
.search-backdrop{position:absolute;inset:0;background:rgba(3,7,18,.62);backdrop-filter:blur(4px)}
[data-theme="light"] .search-backdrop{background:rgba(20,32,46,.28)}
.search-panel{position:relative;width:min(720px,100%);max-height:80vh;overflow:auto;border-radius:18px;padding:18px 20px 12px;background:var(--surface-bg-solid)}
.search-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.search-head .eyebrow{margin:0}
.search-close{font:600 .74rem var(--font-mono);color:var(--text-muted);background:rgba(var(--text-rgb),.06);border:1px solid var(--border);border-radius:7px;padding:4px 9px;cursor:pointer}
.search-foot{font-size:.78rem;color:var(--text-faint);margin-top:10px;text-align:right}
.search-ui{--pagefind-ui-scale:.9;--pagefind-ui-primary:var(--accent);--pagefind-ui-text:var(--text-primary);--pagefind-ui-background:var(--surface-bg-solid);
  --pagefind-ui-border:var(--border);--pagefind-ui-tag:rgba(var(--text-rgb),.08);--pagefind-ui-border-width:1px;--pagefind-ui-border-radius:10px;
  --pagefind-ui-font:var(--font-sans)}
.search-ui .pagefind-ui__result-excerpt{color:var(--text-secondary)}
.search-ui .pagefind-ui__search-input{color:var(--text-primary);background:rgba(var(--text-rgb),.04);font-weight:500}
.search-ui .pagefind-ui__search-input::placeholder{color:var(--text-faint);opacity:1}
.search-ui .pagefind-ui__search-clear{color:var(--text-muted);background:transparent;font:600 .8rem var(--font-sans);border:0}
.search-ui .pagefind-ui__result-link{color:var(--text-primary)}
.search-ui .pagefind-ui__result-link:hover{color:var(--accent)}
.search-ui .pagefind-ui__message{color:var(--text-secondary)}
.search-ui .pagefind-ui__button{color:var(--text-primary);background:rgba(var(--text-rgb),.06);border-color:var(--border)}
.search-ui mark{background:rgba(var(--accent-rgb),.25);color:var(--text-primary);border-radius:3px;padding:0 2px}
.search-loading{color:var(--text-muted);font-size:.95rem;padding:14px 4px}

/* footer sits under the shell */
.wiki-footer{margin-top:0;position:relative;z-index:1}
.wiki-footer .foot-col a .ico{width:16px;height:16px;flex:0 0 auto;opacity:.7}
.wiki-footer .foot-col a:hover .ico{opacity:1}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1240px){
  .wiki-shell{grid-template-columns:var(--wiki-side) minmax(0,1fr)}
  .wiki-toc{display:none}
  .toc-mobile{display:block}
}
@media (max-width:1000px){
  .wiki-shell,.wiki-home .wiki-shell{grid-template-columns:minmax(0,1fr)}
  .wiki-main{padding-inline:0}
  .wiki-topbar .mobile-menu-toggle{display:flex;align-items:center}
  .wiki-sidebar{position:fixed;top:var(--wiki-top);left:0;bottom:0;height:auto;width:min(88vw,360px);z-index:1100;
    background:var(--surface-bg-solid);border-right:1px solid var(--border);box-shadow:8px 0 30px rgba(0,0,0,.35);
    transform:translateX(-105%);visibility:hidden;transition:transform .3s ease,visibility .3s ease;padding:16px}
  body.menu-open .wiki-sidebar{transform:none;visibility:visible}
  /* The shell is its own layer (z-index:1) and the footer comes after it, so
     lift the whole shell while the menu is open or the footer paints over it. */
  body.menu-open .wiki-shell{z-index:1100}
  /* ...but keep the top bar above that lifted shell, or the shell (which starts at
     the top of the page) swallows every tap on Menu, search and the theme switch. */
  body.menu-open .topbar{z-index:1200}
  /* Lock the page behind the drawer: it keeps its scroll position and the drawer
     scrolls on its own, without handing the rest of its scroll to the page. */
  html.menu-open,html.menu-open body{overflow:hidden}
  .wiki-sidebar{overscroll-behavior:contain}
  .sidebar-scrim{display:block;position:fixed;inset:var(--wiki-top) 0 0 0;background:rgba(3,7,18,.55);backdrop-filter:blur(2px);z-index:1050;opacity:0;pointer-events:none;transition:opacity .25s}
  body.menu-open .sidebar-scrim{opacity:1;pointer-events:auto}
  .side-head{display:flex;align-items:center;justify-content:space-between;padding:0 2px 12px;margin-bottom:8px;border-bottom:1px solid rgba(var(--text-rgb),.12)}
  .side-head-title{font-weight:700;font-size:1rem}
  .side-close{display:grid;place-items:center;width:36px;height:36px;padding:0;cursor:pointer;color:var(--text-primary);
    background:rgba(var(--text-rgb),.14);border:1px solid rgba(var(--text-rgb),.32);border-radius:8px}
  .side-close:hover{background:rgba(var(--text-rgb),.26)}
  .side-close svg{width:18px;height:18px}
  .path-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .hide-sm{display:none!important}
  .wiki-search-btn{flex:0 0 40px;width:40px;padding:0;justify-content:center;margin-left:auto}
  .wiki-search-btn .label,.wiki-search-btn .shortcut,.home-search .shortcut{display:none}
  .home-search{height:auto;min-height:54px;padding:10px 16px}
  .wiki-topbar{gap:8px}
  .wiki-main{padding:18px 0 50px}
  .wiki-article{border-radius:14px;padding:22px 16px 26px}
  .wiki-article p,.wiki-article li{font-size:1rem;line-height:1.7}
  .pager{grid-template-columns:1fr}
  .pager-next{grid-column:auto}
  .app-hero{gap:14px}
  .page-hero{gap:12px}
  .page-ico{width:40px;height:40px;border-radius:10px}
  .page-ico .ico{width:20px;height:20px}
  .app-hero .app-ico{width:56px;height:56px;border-radius:14px;padding:8px}
  .shot-pair{grid-template-columns:1fr}
  .steps>ol>li{padding-left:44px}
  .wiki-article pre{font-size:.82rem;padding:14px}
  .wiki-article pre.has-copy{padding-top:44px;padding-right:14px}
}
@media (max-width:400px){
  .topbar .wordmark{font-size:1rem}
}
@media print{
  .topbar,.wiki-sidebar,.wiki-toc,.pager,footer,.cosmos,.stars,.search-modal,.code-copy{display:none!important}
  .wiki-shell{display:block;padding:0}
  .wiki-article{border:0;background:none;padding:0}
}

/* advanced (optional command-line) sections */
.advanced{margin:0 0 22px;border:1px dashed var(--border,rgba(128,128,128,.4));border-radius:12px;background:rgba(128,128,128,.05)}
.advanced>summary{cursor:pointer;padding:11px 16px;font-size:.94rem;color:var(--text-secondary,inherit);list-style:none;display:flex;align-items:center;gap:10px}
.advanced>summary::-webkit-details-marker{display:none}
.advanced>summary::after{content:"+";margin-left:auto;font:700 1rem var(--font-mono,monospace);opacity:.6}
.advanced[open]>summary::after{content:"\2212"}
.advanced-tag{font:700 .68rem var(--font-mono,monospace);text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:6px;background:rgba(var(--accent-rgb),.15);color:var(--text-primary,inherit)}
.advanced-body{padding:2px 16px 4px;border-top:1px dashed var(--border,rgba(128,128,128,.4))}
.advanced-body>:first-child{margin-top:14px}
.advanced-help{font-size:.88rem;opacity:.8}

/* the current page keeps its accent fill under the pointer */
.side-nav li a.is-current:hover,.side-nav a.side-home.is-current:hover{background:var(--accent-fill-hover);color:#fff}

/* one control height across the guide's bar: logo, menu, Guide, search, theme, links, Install — all 40px at every width */
.wiki-topbar .mobile-menu-toggle,.wiki-topbar .wiki-badge,.wiki-topbar .wiki-search-btn,.wiki-topbar .theme-toggle,
.wiki-topbar .tb-cta,.wiki-topbar .tb-ghost{height:40px;min-height:40px;box-sizing:border-box}
.wiki-topbar .tb-cta,.wiki-topbar .tb-ghost{flex-direction:row;justify-content:center;gap:6px;width:auto;flex:0 0 auto;padding:0 16px;font-size:.85rem;font-weight:700;line-height:1.2}
.wiki-topbar .tb-ghost{background:rgba(var(--text-rgb),.05);border:1px solid var(--border)}
.wiki-topbar .tb-cta svg,.wiki-topbar .tb-ghost svg{display:block;width:15px;height:15px}
.wiki-topbar .theme-toggle{border-radius:8px}
/* Phones: the brand pill keeps just the mark, and Support is the heart on its own. */
@media (max-width:560px){.wiki-topbar .wordmark{display:none}.wiki-topbar .sponsor-pill{width:40px;padding:0;justify-content:center}.wiki-topbar .sponsor-pill .sp-label{display:none}}
.wiki-topbar .mobile-menu-toggle{width:40px;padding:0}

/* privacy verdicts (src/apps/privacy.njk, the app pages' "Privacy and security") */
.tag.verdict{text-transform:none;letter-spacing:.02em;font-family:inherit;font-size:.78rem;font-weight:650;color:var(--text-primary);white-space:nowrap}
.tag.verdict::before{margin-right:6px;font-weight:800}
.tag.verdict-green{border-color:rgba(var(--ok-rgb),.6);background:rgba(var(--ok-rgb),.16)} .tag.verdict-green::before{content:"✓"}
.tag.verdict-amber{border-color:rgba(var(--warn-rgb),.65);background:rgba(var(--warn-rgb),.16)} .tag.verdict-amber::before{content:"!"}
.tag.verdict-red{border-color:rgba(var(--bad-rgb),.65);background:rgba(var(--bad-rgb),.16)} .tag.verdict-red::before{content:"✕"}

/* ---------- phone-app privacy listing (src/_includes/phone-privacy.njk) ----
   A summary card with tick chips, then one card per section: a grid of
   anti-features, icon rows for permissions, connections and storage. */
.wiki-article .pv{display:grid;gap:14px;margin:0 0 40px}
.wiki-article .pv>*,.wiki-article .pv p,.wiki-article .pv ul,.wiki-article .pv div{margin:0}
.pv-card{padding:16px 18px;border-radius:16px;border:1px solid var(--card-border,var(--panel-border));background:var(--card-bg,var(--panel));box-shadow:var(--card-shadow,none)}
.pv-hero{border-color:rgba(var(--accent-rgb),.42);background:linear-gradient(135deg,rgba(var(--accent-rgb),.15),rgba(var(--violet-rgb),.08))}
.pv-hero-top{display:flex;align-items:center;gap:14px}
.pv-tile{flex:0 0 auto;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#00b8e6,#6d5bf6)}
.pv-tile svg{width:27px;height:27px}
.wiki-article .pv .pv-sum{font-weight:750;font-size:1.06rem;line-height:1.35;color:var(--text-primary)}
.wiki-article .pv .pv-meta{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.88rem;color:var(--text-muted)}
.pv-badge{padding:2px 9px;border-radius:99px;font:700 .72rem var(--font-mono);color:var(--accent);background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.35)}
.wiki-article .pv .pv-chips{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.wiki-article .pv .pv-chips li{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 13px 6px 9px;border-radius:99px;font-weight:700;font-size:.86rem;color:var(--ok);background:rgba(var(--ok-rgb),.14)}
.pv-chips svg,.pv-grid svg{width:15px;height:15px;flex:0 0 auto}
.wiki-article .pv .pv-sec{display:grid;gap:8px;margin:8px 0 0;padding:0}
.wiki-article .pv .pv-title{display:flex;align-items:center;gap:8px;margin-top:0;padding:0 4px;font:700 .72rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.pv-title svg{width:16px;height:16px;color:var(--accent)}
.pv-tag{margin-left:auto;padding:2px 9px;border-radius:7px;font:700 .72rem var(--font-body,inherit);letter-spacing:0;text-transform:none}
.pv-tag-green{color:var(--ok);background:rgba(var(--ok-rgb),.15)}
.wiki-article .pv .pv-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 18px}
.wiki-article .pv .pv-grid li{display:flex;align-items:center;gap:8px;margin:0;font-size:.94rem;color:var(--text-primary)}
.pv-grid svg{color:var(--ok)}
.wiki-article .pv .pv-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-subtle);font-size:.9rem;color:var(--text-muted)}
.pv-note strong{color:var(--text-primary)}
.wiki-article .pv .pv-group{margin:2px 0 10px;font:700 .68rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.pv-group:not(:first-child){margin-top:20px!important}
.pv-row{display:flex;align-items:flex-start;gap:13px;padding:11px 0;border-top:1px solid var(--border-subtle)}
.pv-row:first-child,.pv-group+.pv-row{border-top:0;padding-top:0}
.pv-row:last-child{padding-bottom:0}
.pv-row>div{min-width:0}
.pv-row strong{display:block;color:var(--text-primary);font-size:.96rem;line-height:1.35}
.pv-row span:not(.pv-ico){display:block;margin-top:2px;color:var(--text-muted);font-size:.9rem;line-height:1.5}
.pv-ico{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;--t:var(--accent-rgb);color:rgb(var(--t));background:rgba(var(--t),.14)}
.pv-ico svg{width:18px;height:18px}
.pv-green{--t:var(--ok-rgb)} .pv-violet{--t:var(--violet-rgb)} .pv-cyan{--t:var(--accent-rgb)}
.pv-pill{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:5px 12px 5px 9px;border-radius:99px;font-style:normal;font-size:.84rem;font-weight:700;color:var(--text-muted);background:rgba(var(--text-rgb),.07)}
.pv-pill svg{width:14px;height:14px}
.pv-link{color:var(--accent);background:var(--accent-soft);text-decoration:none}
.pv-link:hover{background:rgba(var(--accent-rgb),.2)}
.pv-foot .pv-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px}
.pv-foot .pv-pill{margin-top:0}
.pv-src{font:.82rem var(--font-mono);color:var(--text-muted);overflow-wrap:anywhere}
.wiki-article .pv .pv-ver{margin-top:12px;font-size:.84rem;color:var(--text-faint)}
@media (max-width:560px){.pv-card{padding:14px}.pv-hero-top{align-items:flex-start}.pv-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* the Backup Server diagram: a wide drawing, and a stacked one for narrow screens */
.dg-wide{overflow-x:auto}
.dg-narrow{display:none}
@media (max-width:600px){.dg-wide{display:none}.dg-narrow{display:block}}
/* Sponsor: the same pill, neutral, with a pink heart. */
.wiki-topbar .sponsor-pill{color:var(--text-primary);border-color:rgba(var(--text-rgb),.32);background:rgba(var(--text-rgb),.14)}
.wiki-topbar .sponsor-pill svg{color:#f472b6}
.wiki-topbar .sponsor-pill:hover{background:rgba(var(--text-rgb),.26)}

/* Shared header: on a wide screen the contents are already beside the page, so the burger and the
   "other site" link in the drawer are for narrower ones. */
.wiki-sidebar .drawer-source{margin-bottom:6px}
@media (min-width:1001px){
  .hdr-menu{display:none}
  .wiki-sidebar .drawer-other,.wiki-sidebar .drawer-source{display:none}
}

/* ---------- sections: folded sidebar, topic blocks, section pages ---------- */
.side-section>summary{gap:8px;justify-content:flex-start}
.side-section>summary span{flex:1}
.side-section>summary .ico{width:15px;height:15px;opacity:.7}
.side-section>summary::after{margin-left:auto}
.side-section[open]>summary{color:var(--text-secondary)}
.side-link{display:flex;align-items:center;gap:8px;margin:2px 0 6px;padding:12px 10px 6px;text-decoration:none;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.side-link .ico{width:15px;height:15px;opacity:.7}
.side-link:hover,.side-link.is-current{color:var(--accent)}
.tile{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.3);margin-bottom:6px}
.tile svg{width:18px;height:18px;color:var(--accent)}
.link-card span:not(.tile){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* the home page: one large block per section, each with its own drawing */
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:16px;margin:8px 0 34px}
.topic-card{position:relative;display:flex;min-height:176px;border-radius:18px;overflow:hidden;text-decoration:none!important;isolation:isolate;
  color:#fff;border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(120% 140% at 100% 0%,#1d4f9a 0%,#12306a 38%,#0a1634 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(8,20,50,.28);transition:transform .25s,border-color .25s,box-shadow .25s}
.topic-card:hover{transform:translateY(-4px);border-color:rgba(95,224,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 32px rgba(8,20,50,.4)}
.topic-card:focus-visible{outline:2px solid #5fe0ff;outline-offset:3px}
.topic-art{position:absolute;inset:0;z-index:-1;opacity:.95}
.topic-art svg{width:100%;height:100%;display:block}
.topic-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,22,52,.92) 0%,rgba(10,22,52,.78) 42%,rgba(10,22,52,0) 78%)}
.topic-body{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:18px 20px;max-width:68%}
.topic-body .tile{background:rgba(95,224,255,.14);border-color:rgba(95,224,255,.4);margin-bottom:auto}
.topic-body .tile svg{color:#5fe0ff}
.topic-body b{font-size:1.12rem;line-height:1.25;color:#fff}
.topic-line{font-size:.88rem;line-height:1.45;color:rgba(235,244,255,.86)}
@media (max-width:560px){.topic-body{max-width:78%}.topic-art::after{background:linear-gradient(90deg,rgba(10,22,52,.95) 0%,rgba(10,22,52,.8) 55%,rgba(10,22,52,.25) 100%)}}
@media (prefers-reduced-motion:reduce){.topic-card{transition:none}.topic-card:hover{transform:none}}

/* readable section titles, 44px tap rows, and art that never sits under the text */
.side-section>summary,.side-link{font-family:var(--font-sans);font-size:.93rem;letter-spacing:0;text-transform:none;font-weight:650;
  color:var(--text-primary);min-height:44px;padding:8px 10px;margin:0}
.side-section>summary .ico,.side-link .ico{width:17px;height:17px;opacity:.85;flex:0 0 auto}
.side-section[open]>summary{color:var(--text-primary)}
.side-link:hover,.side-link.is-current{color:var(--accent)}
.side-section>summary:hover,.side-link:hover{background:rgba(var(--text-rgb),.06);border-radius:8px}
.side-nav li a,.side-group>summary{min-height:44px}
.topic-art{left:34%;opacity:1}
.topic-art::after{background:linear-gradient(90deg,#0a1634 0%,rgba(10,22,52,.92) 22%,rgba(10,22,52,0) 70%)}
.topic-body{max-width:60%}
@media (max-width:560px){.topic-body{max-width:68%}.topic-art::after{background:linear-gradient(90deg,#0a1634 0%,rgba(10,22,52,.94) 45%,rgba(10,22,52,.1) 100%)}}
/* one continuous block: the art has no background of its own, it fades in from the right via a mask */
.topic-art::after{content:none;background:none}
.topic-art{-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 12%,#000 62%);mask-image:linear-gradient(90deg,transparent 0%,transparent 12%,#000 62%)}

/* pages with no table of contents use the full width; section pages use the dark blocks */
@media (min-width:1001px){
  .wiki-shell.no-toc{grid-template-columns:var(--wiki-side) minmax(0,1fr)}
  .no-toc .wiki-toc{display:none}
  .no-toc .wiki-article{max-width:none}
}
.land-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:6px 0 28px}
@media (min-width:700px){.land-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1250px){.land-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.topic-sm{min-height:132px;border-radius:16px}
.topic-sm .topic-body{max-width:none;width:100%;padding:16px 18px;gap:4px}
.topic-sm .topic-line{max-width:72%}
.topic-sm b{max-width:72%}
.topic-sm .tile{margin-bottom:8px}
.topic-icon{left:auto;width:42%;display:grid;place-items:center;-webkit-mask-image:none;mask-image:none;opacity:1}
.topic-icon svg{width:84px;height:84px;color:#5fe0ff;opacity:.3;stroke-width:1.3;margin-left:auto;margin-right:18px}
.topic-card .tile{background:rgba(95,224,255,.14);border-color:rgba(95,224,255,.4)}
.topic-sm .topic-line,.topic-sm b{max-width:none}
.topic-icon{inset:12px 14px auto auto;width:auto;height:auto;display:block}
.topic-icon svg{width:60px;height:60px;margin:0;opacity:.35}
.topic-sm .topic-body{justify-content:flex-start}
.topic-sm .topic-body .tile{margin-bottom:8px}

/* ==========================================================================
   Wide screens, the sidebar as a navy glass panel, 4-column section pages.
   ========================================================================== */
:root{--maxw:1760px;--wiki-side:300px}
.wiki-article:not(.wide){margin-inline:auto}
.home-main{max-width:none}
.home-hero{max-width:var(--wiki-measure)}
.wiki-shell.no-toc .wiki-article.wide{max-width:none}
@media (min-width:1001px){.wiki-shell.no-toc .wiki-article:not(.wide){max-width:var(--wiki-measure)}}
@media (min-width:1650px){.land-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1900px){.topic-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}}

/* the panel: always dark navy glass, like the topic blocks, in both themes */
.wiki-sidebar{border-right:0;padding:22px 6px 24px 0;overflow:visible;height:auto;align-self:start}
.side-nav{--sn-text:#eef4ff;--sn-muted:rgba(226,236,255,.82);--sn-line:rgba(95,224,255,.24);--sn-cy:#5fe0ff;
  position:relative;font-size:.93rem;color:var(--sn-text);padding:12px 10px 10px;border-radius:20px;
  background:radial-gradient(130% 90% at 100% 0%,#1b4a92 0%,#102a5c 36%,#0a1634 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(95,224,255,.05),0 10px 34px rgba(8,20,50,.34),0 0 44px rgba(46,140,255,.12);
  max-height:calc(100vh - var(--wiki-top) - 48px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(95,224,255,.55) rgba(255,255,255,.06)}
.side-nav::-webkit-scrollbar{width:10px}
.side-nav::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:10px;margin:14px 0}
.side-nav::-webkit-scrollbar-thumb{background:rgba(95,224,255,.55);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
.wiki-sidebar{position:sticky;top:calc(var(--wiki-top) + 14px)}
.side-nav a,.side-nav summary{color:var(--sn-muted)}
.side-home{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff!important;font-weight:650;margin-bottom:8px;min-height:44px}
.side-home .ico{color:var(--sn-cy);opacity:1}
.side-home:hover{background:rgba(95,224,255,.14)}
.side-home.is-current{background:rgba(95,224,255,.22);border-color:rgba(95,224,255,.6)}
.side-home.is-current .ico{color:#fff}
.side-nav .side-section>summary,.side-nav .side-link{display:flex;align-items:center;gap:11px;min-height:46px;margin:2px 0;padding:6px 10px 6px 8px;border-radius:12px;
  font-family:var(--font-sans);font-size:.95rem;font-weight:650;letter-spacing:0;text-transform:none;color:var(--sn-text);text-decoration:none;cursor:pointer}
.side-nav .side-section>summary::after,.side-nav .side-group>summary::after{color:var(--sn-muted);margin-left:auto}
.side-nav .side-section>summary:hover,.side-nav .side-link:hover{background:rgba(255,255,255,.08);color:#fff}
.chip{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:rgba(95,224,255,.12);border:1px solid rgba(95,224,255,.34)}
.chip svg,.side-nav .chip .ico{width:16px;height:16px;color:var(--sn-cy);opacity:1}
.chip-sm{width:24px;height:24px;border-radius:7px}
.chip-sm svg{width:13px;height:13px}
.side-section[open]>summary .chip,.side-link.is-current .chip{background:rgba(95,224,255,.24);border-color:var(--sn-cy)}
.side-section.is-here>summary{color:var(--sn-cy);background:rgba(95,224,255,.1)}
.side-link.is-current{color:var(--sn-cy);background:rgba(95,224,255,.1)}
.side-section>ul{margin:2px 0 8px 22px;padding-left:10px;border-left:1px solid var(--sn-line)}
.side-nav li a{min-height:44px;padding:6px 10px;border-radius:10px;color:var(--sn-muted)}
.side-nav li a:hover{background:rgba(255,255,255,.08);color:#fff}
.side-nav li a .ico{color:var(--sn-cy);opacity:.75}
.side-nav li a.is-current{background:linear-gradient(90deg,rgba(95,224,255,.26),rgba(95,224,255,.1));color:#fff;font-weight:650;box-shadow:inset 3px 0 0 var(--sn-cy)}
.side-nav li a.is-current .ico{color:var(--sn-cy);opacity:1}
.side-group>summary{color:var(--sn-text);min-height:44px;border-radius:10px;font-weight:600;gap:9px}
.side-group>summary:hover{background:rgba(255,255,255,.08);color:#fff}
.side-group>summary .n{color:var(--sn-muted);margin-left:auto;margin-right:6px}
.side-group>ul{border-left:1px solid var(--sn-line);margin:2px 0 6px 20px}
.side-foot{border-top:1px solid rgba(255,255,255,.12);margin-top:10px}
.side-foot a{color:var(--sn-muted)}
.side-foot a:hover{color:var(--sn-cy)}
@media (max-width:1000px){
  .wiki-sidebar{position:fixed;top:var(--wiki-top);padding:16px;overflow-y:auto}
  .side-nav{max-height:none;overflow:visible}
}
.side-nav .chip{flex:0 0 30px}.side-nav .chip-sm{flex-basis:24px}
.side-nav .chip{position:relative;display:block}.side-nav .chip svg{position:absolute;inset:0;margin:auto;display:block;width:16px;height:16px}.side-nav .chip-sm svg{width:13px;height:13px}

/* even blocks: one-line titles, two-line text, art faded in behind on the right */
.topic-body,.topic-sm .topic-body{max-width:none;width:100%}
.topic-body b,.topic-sm b{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topic-line,.topic-sm .topic-line{max-width:none;min-height:2.9em;text-shadow:0 1px 8px rgba(8,16,40,.85)}
.topic-art{left:30%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,rgba(0,0,0,.9) 82%);mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,rgba(0,0,0,.9) 82%)}
.topic-sm .topic-body{padding:16px 18px 14px}
.topic-sm{min-height:140px}
.topic-card:not(.topic-sm){min-height:168px}
.topic-sm .topic-art{left:44%;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 18%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,transparent 18%,#000 70%)}
.topic-card:not(.topic-sm) .topic-art{opacity:.8}
.wiki-home .wiki-shell.no-toc .wiki-article{max-width:none;margin-inline:0}
.topic-card:not(.topic-sm) .topic-art{opacity:.62}
/* section-page scenes live in the top right, above the title and text, so no line crosses a letter */
.topic-sm .topic-art{left:auto;right:12px;top:6px;bottom:auto;width:44%;height:40%;opacity:.8;-webkit-mask-image:none;mask-image:none}
.topic-sm .topic-art svg{width:100%;height:100%}

/* section pages, final: text on the left, a large scene on the right, never overlapping */
.land-grid{grid-template-columns:1fr}
@media (min-width:700px){.land-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1500px){.land-grid{grid-template-columns:repeat(3,minmax(0,500px))}}
.topic-sm{min-height:156px}
.topic-sm .topic-art{left:auto;right:0;top:0;bottom:0;width:40%;height:auto;opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%);mask-image:linear-gradient(90deg,transparent 0%,#000 32%)}
.topic-sm .topic-art svg{width:100%;height:100%}
.topic-sm .topic-body{max-width:62%;width:auto;padding:16px 8px 14px 18px}
.topic-sm .topic-body b{max-width:140%;position:relative}
.topic-sm .topic-line{font-size:.86rem;text-shadow:none}
@media (max-width:699px){.topic-sm .topic-art{width:36%}.topic-sm .topic-body{max-width:66%}}

/* ---------- next steps, the apps index and the app hero ------------------- */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wiki-article.wide{max-width:none}
.next-steps{margin:34px auto 6px;max-width:var(--wiki-measure)}
.next-steps h2{font-size:1.3rem;letter-spacing:-.01em;margin:0 0 14px;color:var(--text-primary)}
.next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:14px}
.next-grid .topic-sm{min-height:140px}
.is-app .tile img,.app-grid .tile img{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.94);padding:3px;display:block}
.tile:has(>img){width:40px;height:40px;background:rgba(255,255,255,.12)}
.tile>img{width:30px!important;height:30px!important}
/* the apps index */
.app-filter{display:grid;gap:12px;margin:8px 0 22px}
.app-find input{width:100%;max-width:560px;height:48px;padding:0 16px;border-radius:12px;border:1px solid rgba(var(--accent-rgb),.4);background:var(--panel);color:var(--text-primary);font:inherit;font-size:1rem}
.app-find input:focus{outline:2px solid var(--accent);outline-offset:2px}
.app-cats{display:flex;flex-wrap:wrap;gap:8px}
.chip-link{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:rgba(var(--text-rgb),.05);
  color:var(--text-secondary);font:inherit;font-size:.86rem;font-weight:600;text-decoration:none;cursor:pointer}
a.chip-link:hover,button.chip-link:hover{border-color:var(--accent);color:var(--accent)}
.chip-link.is-main{background:var(--accent-fill,var(--accent));border-color:transparent;color:#fff}
.app-none{color:var(--text-muted)}
.app-grid{margin-bottom:10px}
.topic-art svg{display:block}
svg.topic-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.is-app svg.topic-art,.is-app .topic-art{opacity:.55}
.is-app .topic-body .tile{margin-bottom:8px}
.app-grid .topic-card{min-height:132px}
/* the hero block at the top of an app page */
.app-hero-block{position:relative;isolation:isolate;display:flex;gap:20px;align-items:center;min-height:170px;padding:22px 26px;border-radius:20px;overflow:hidden;color:#fff;
  border:1px solid rgba(255,255,255,.14);background:radial-gradient(130% 150% at 100% 0%,#1d4f9a 0%,#12306a 38%,#0a1634 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px rgba(8,20,50,.3)}
.app-hero-block .topic-art{position:absolute;inset:0 0 0 52%;z-index:-1;opacity:.85;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%)}
.app-hero-block .topic-art svg{width:100%;height:100%}
.app-logo{width:84px;height:84px;flex:0 0 auto;border-radius:20px;padding:12px;background:rgba(255,255,255,.95);box-shadow:0 4px 16px rgba(0,0,0,.25)}
.app-hero-text{min-width:0;max-width:56%}
.app-hero-text h1{color:#fff;font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.1;margin:0}
.app-oneline{color:rgba(235,244,255,.9);margin:8px 0 12px;font-size:1rem;line-height:1.45}
.app-chips{display:flex;flex-wrap:wrap;gap:8px}
.app-hero-block .chip-link{min-height:30px;padding:0 12px;font-size:.78rem;color:#eaf4ff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.app-hero-block .chip-link.is-main{background:rgba(95,224,255,.22);border-color:rgba(95,224,255,.6);color:#fff}
.app-hero-block a.chip-link:hover{border-color:#5fe0ff;color:#5fe0ff}
@media (max-width:699px){.app-hero-block{flex-direction:column;align-items:flex-start;padding:18px}.app-hero-text{max-width:none}.app-hero-block .topic-art{inset:0 0 0 40%;opacity:.4}}
.wiki-article .app-hero-block .app-oneline{color:rgba(235,244,255,.92)}
.wiki-article .app-hero-block h1{color:#fff}
@media (min-width:700px){.app-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}}
.pager{max-width:var(--wiki-measure);margin-inline:auto;margin-top:26px}
.wiki-main:has(.wiki-article.wide) .pager,.wiki-main:has(.wiki-article.wide) .next-steps{max-width:none}

/* "On this page": a lighter glass panel, readable and in sentence case */
.wiki-toc{height:auto;max-height:calc(100vh - var(--wiki-top) - 48px);align-self:start;top:calc(var(--wiki-top) + 14px);margin-top:14px;overflow-y:auto;
  padding:14px 12px 12px;border-radius:16px;font-size:.88rem;scrollbar-width:thin;scrollbar-color:rgba(95,224,255,.5) transparent;
  background:linear-gradient(165deg,rgba(24,58,116,.86),rgba(10,24,56,.9));border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 22px rgba(8,20,50,.22)}
.wiki-toc:empty{display:none}
.wiki-toc .toc-title{font-family:var(--font-sans);font-size:.95rem;letter-spacing:0;text-transform:none;font-weight:700;color:#fff;margin:2px 4px 8px}
.wiki-toc ol{border-left:1px solid rgba(95,224,255,.22);margin-left:6px}
.wiki-toc a{color:rgba(226,236,255,.84);padding:7px 12px;border-left:2px solid transparent;border-radius:0 8px 8px 0}
.wiki-toc a:hover{color:#fff;background:rgba(255,255,255,.07)}
.wiki-toc a.active{color:#5fe0ff;border-left-color:#5fe0ff;background:rgba(95,224,255,.1);font-weight:650}

/* ==========================================================================
   NIGHT GLASS. Dark is the main look: a deep navy-to-purple page like the
   LibrePortal app, dark glass panels, soft light text, cyan links. Light stays
   an option: cool grey, white glass, with the blocks and the sidebar staying
   navy as the feature pieces. The Website's own pages are unchanged; all of
   this lives in the wiki's stylesheet.
   ========================================================================== */
:root:not([data-theme="light"]){
  --gradient-from:#0e0c2c; --gradient-mid:#1d1850; --gradient-to:#0a3566; --surface-solid:#090a20;
  --topbar-bg:rgba(12,16,44,.8);
  --panel:rgba(15,19,52,.64); --panel-border:rgba(255,255,255,.11);
  --read:#e8eeff; --link:#72e8ff; --text-faint:rgba(226,236,255,.62);
}
:root:not([data-theme="light"]) .cosmos{
  background:
    radial-gradient(ellipse 60% 46% at 88% 2%, rgba(6,98,140,.85) 0%, transparent 62%),
    radial-gradient(ellipse 70% 60% at 6% 58%, rgba(52,34,120,.9) 0%, transparent 66%),
    radial-gradient(ellipse 55% 40% at 70% 96%, rgba(10,10,38,.9) 0%, transparent 70%),
    linear-gradient(165deg,#0f0e30 0%,#181446 46%,#0a0a24 100%)}
:root:not([data-theme="light"]) .cosmos::before{opacity:.35}
:root:not([data-theme="light"]) .cosmos::after{opacity:.4}
/* the top bar: dark glass, like the sidebar */
.topbar{background:var(--topbar-bg);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,.1)}
/* the reading panel */
.wiki-article{background:var(--panel);border:1px solid var(--panel-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 40px rgba(4,6,24,.3)}
:root:not([data-theme="light"]) .wiki-article{color:var(--read)}
:root:not([data-theme="light"]) .wiki-article :is(p,li,dd,td) a:not([class]){color:var(--link);text-decoration:underline;text-decoration-color:rgba(114,232,255,.5);text-underline-offset:3px}
:root:not([data-theme="light"]) .wiki-article :is(p,li,dd,td) a:not([class]):hover{text-decoration-color:var(--link)}
:root:not([data-theme="light"]) .wiki-article code:not(pre code){background:rgba(255,255,255,.1);color:#f1f5ff}
.wiki-article th{font-family:var(--font-sans);font-size:.86rem;letter-spacing:0;text-transform:none;font-weight:700;color:var(--text-secondary)}
:root:not([data-theme="light"]) .wiki-article table tr{border-color:rgba(255,255,255,.1)}
:root:not([data-theme="light"]) .callout{background:linear-gradient(135deg,rgba(var(--c),.16),rgba(var(--c),.07));border-color:rgba(var(--c),.45)}
:root:not([data-theme="light"]) .search-panel{background:linear-gradient(160deg,#16255a,#0b1233);border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 70px rgba(0,0,0,.5)}
:root:not([data-theme="light"]) .search-backdrop{background:rgba(4,6,24,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* light: cool grey, white glass, navy feature pieces */
[data-theme="light"]{--text-faint:#5c6776;--panel:rgba(255,255,255,.86);--panel-border:#d4dce8;--topbar-bg:rgba(255,255,255,.86)}
[data-theme="light"] .cosmos{background:radial-gradient(ellipse 70% 50% at 12% 0%,#f7f9fc 0%,transparent 70%),radial-gradient(ellipse 60% 50% at 95% 100%,#d7e2f1 0%,transparent 70%),linear-gradient(180deg,#e9eef5,#dde5ef)}
[data-theme="light"] .cosmos::before,[data-theme="light"] .cosmos::after{display:none}
[data-theme="light"] .topbar{border-bottom-color:#d4dce8}
[data-theme="light"] .wiki-article{box-shadow:0 1px 2px rgba(20,32,46,.05),0 12px 34px rgba(30,50,90,.1)}
/* Next steps live inside the reading panel */
.wiki-article .next-steps{max-width:none;margin:40px 0 0;padding-top:26px;border-top:1px solid var(--border-subtle);container-type:inline-size}
.wiki-article .next-steps h2{font-size:1.2rem;margin:0 0 14px}
.next-grid{grid-template-columns:1fr}
.next-grid .topic-sm{min-height:150px}
.next-grid .topic-sm .topic-body{max-width:66%}
.next-grid .topic-sm b{max-width:none;overflow:visible;font-size:1rem}
@container (min-width:560px){.next-grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:700px){.next-grid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Previous / Next: two slim dark blocks with arrows, as wide as the reading panel */
.pager{max-width:var(--wiki-measure);margin:18px auto 0;gap:12px}
.pager a{flex-direction:column;justify-content:center;min-height:68px;padding:12px 18px;border-radius:14px;position:relative;color:#fff;
  border:1px solid rgba(255,255,255,.14);background:radial-gradient(130% 160% at 100% 0%,#1b4a92 0%,#102a5c 40%,#0a1634 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 20px rgba(8,20,50,.28)}
.pager a:hover{border-color:rgba(95,224,255,.6);transform:translateY(-2px)}
.pager span{color:rgba(226,236,255,.78);font-family:var(--font-sans);font-size:.78rem;letter-spacing:0;text-transform:none;font-weight:600}
.pager b{color:#fff;font-size:1rem}
.pager-prev{padding-left:46px!important}.pager-next{padding-right:46px!important}
.pager-prev::before,.pager-next::after{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:#5fe0ff;font-weight:700}
.pager-prev::before{content:"←";left:16px}.pager-next::after{content:"→";right:16px}
.wiki-article .next-steps{border-top:0;padding-top:0;margin-top:34px}
.wiki-article .next-steps h2{border-top:0;padding-top:0;margin-top:0}
:root:not([data-theme="light"]) .cosmos{
  background:
    radial-gradient(ellipse 55% 42% at 90% 0%, rgba(8,92,134,.8) 0%, transparent 62%),
    radial-gradient(ellipse 75% 65% at 4% 62%, rgba(78,48,168,.92) 0%, transparent 68%),
    radial-gradient(ellipse 60% 45% at 60% 100%, rgba(40,22,96,.8) 0%, transparent 70%),
    linear-gradient(165deg,#120e36 0%,#1b1550 46%,#0a0a26 100%)}
:root:not([data-theme="light"]) .cosmos::before{opacity:.18}
:root:not([data-theme="light"]) .cosmos::after{opacity:.24}
.next-grid .topic-sm .topic-art{width:32%}.next-grid .topic-sm .topic-body{max-width:70%}

/* ---- night glass, round two ------------------------------------------------ */
/* 1. home blocks: text on the left ~60%, the scene large on the right, nothing under a letter */
.topic-card:not(.topic-sm) .topic-art{left:auto;right:0;top:0;bottom:0;width:40%;opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%);mask-image:linear-gradient(90deg,transparent 0%,#000 32%)}
.topic-card:not(.topic-sm) .topic-art svg{width:100%;height:100%}
.topic-card:not(.topic-sm) .topic-body{max-width:62%;width:auto;padding:18px 8px 16px 20px}
.topic-card:not(.topic-sm) .topic-body b{max-width:140%;position:relative}
.topic-card:not(.topic-sm) .topic-line{text-shadow:none;min-height:0}
@media (max-width:560px){.topic-card:not(.topic-sm) .topic-art{width:36%}.topic-card:not(.topic-sm) .topic-body{max-width:66%}}
/* 2. Next steps: where a block is too narrow for the scene to sit clear of the text, the scene goes */
.next-grid .topic-sm{container-type:inline-size}
@container (max-width:300px){
  .next-grid .topic-art{display:none}
  .next-grid .topic-body{max-width:none!important}
}
/* 3. Previous / Next live inside the reading panel, under Next steps */
.wiki-article .pager{max-width:none;margin:22px 0 0;padding-top:0}
/* 4. At a glance: readable labels, glass boxes */
.fact dt{font-family:var(--font-sans);font-size:.86rem;letter-spacing:0;text-transform:none;font-weight:650;color:var(--text-secondary)}
:root:not([data-theme="light"]) .fact{background:linear-gradient(160deg,rgba(28,62,122,.5),rgba(10,24,56,.55));border-color:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
[data-theme="light"] .fact{background:rgba(255,255,255,.92);border-color:#d4dce8;box-shadow:0 1px 2px rgba(20,32,46,.05)}
/* 5. kickers: sentence case, normal font, readable size */
.eyebrow,.wiki-home .eyebrow,.search-head .eyebrow{font-family:var(--font-sans);font-size:.95rem;letter-spacing:0;text-transform:none;font-weight:650}
.path-card .num{font-family:var(--font-sans);font-size:.9rem;letter-spacing:0;text-transform:none;font-weight:700}
.crumbs{font-family:var(--font-sans);font-size:.88rem;letter-spacing:0}
.tag{font-family:var(--font-sans);font-size:.8rem;letter-spacing:0;text-transform:none;font-weight:650}
.advanced-tag{font:700 .8rem var(--font-sans);text-transform:none;letter-spacing:0}
.wiki-article .pv .pv-group{font:700 .82rem var(--font-sans);letter-spacing:0;text-transform:none}
.wiki-article .pv .pv-title{font:700 .9rem var(--font-sans);letter-spacing:0;text-transform:none}

/* ---- the standard block, every card (owner 2026-10-27) ---------------------- */
/* one big, quiet drawing across the right of the card, faded in behind the text,
   the same on the home page, section pages, Next steps and the apps index */
.topic-card .topic-art,.topic-sm .topic-art,.next-grid .topic-sm .topic-art,.topic-card:not(.topic-sm) .topic-art{
  display:block;inset:0 0 0 30%;left:30%;right:0;top:0;bottom:0;width:auto;height:auto;opacity:.62;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,rgba(0,0,0,.9) 82%);mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,rgba(0,0,0,.9) 82%)}
.topic-card .topic-art svg{width:100%;height:100%}
.topic-card .topic-body,.topic-sm .topic-body,.next-grid .topic-sm .topic-body,.topic-card:not(.topic-sm) .topic-body{max-width:none!important;width:100%;padding:18px 20px 16px}
.topic-card .topic-body b,.topic-sm .topic-body b,.topic-card:not(.topic-sm) .topic-body b{max-width:100%}
.topic-card .topic-line,.topic-sm .topic-line,.topic-card:not(.topic-sm) .topic-line{text-shadow:0 1px 8px rgba(8,16,40,.85)}

/* ---------- section cards: every part of a guide page in its own glass card ------------------
   The page header, the intro and each section share one card look: same radius, border, padding. */
.wiki-article.has-cards{background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;display:grid;gap:16px}
.wiki-article.has-cards>*{margin-top:0;margin-bottom:0}
.wiki-article.has-cards .wiki-head,.wiki-card{position:relative;border-radius:18px;border:1px solid var(--panel-border);background:var(--panel);
  padding:clamp(20px,3.4vw,32px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.wiki-article.has-cards .wiki-head{margin:0}
.wiki-card h2{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:0;border:0;font-size:clamp(1.25rem,2.3vw,1.5rem)}
.wiki-card h2::before{content:"";flex:0 0 auto;width:5px;height:1.15em;border-radius:3px;background:linear-gradient(180deg,#5fe0ff,#1557b8)}
.wiki-card>*:last-child{margin-bottom:0}
.wiki-card-intro{border-color:rgba(var(--accent-rgb),.28)}
.wiki-card-intro p{font-size:1.06rem}
.wiki-card>h3:first-of-type{margin-top:8px}
/* numbered lists inside a card read as steps */
.wiki-card>ol{list-style:none;margin:6px 0 4px;padding:0;counter-reset:step}
.wiki-card>ol>li{counter-increment:step;position:relative;padding:14px 16px 14px 62px;margin:0 0 10px;min-height:52px;border-radius:14px;
  border:1px solid var(--border-subtle);background:rgba(var(--text-rgb),.03)}
.wiki-card>ol>li:last-child{margin-bottom:0}
.wiki-card>ol>li::before{content:counter(step);position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font:700 .92rem var(--font-mono);color:#fff;background:linear-gradient(135deg,#0b7fb0,#1557b8);box-shadow:0 4px 12px rgba(8,90,160,.3)}
.wiki-card>ol>li p:last-child{margin-bottom:0}
.wiki-card>ul{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:8px}
.wiki-card>ul>li{position:relative;margin:0;padding:10px 14px 10px 38px;border-radius:12px;border:1px solid var(--border-subtle);background:rgba(var(--text-rgb),.03)}
.wiki-card>ul>li::before{content:"";position:absolute;left:15px;top:1.05em;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#5fe0ff,#1557b8)}
.wiki-card pre,.wiki-card table{max-width:100%}
.wiki-card .callout:last-child{margin-bottom:0}
/* one button system for the guide's own buttons */
.wiki-article a.btn,.wiki-article a.tb-cta,.wiki-article a.tb-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;
  border-radius:12px;font-weight:700;font-size:.95rem;text-decoration:none;color:#fff;box-sizing:border-box}
.wiki-article a.btn-ghost,.wiki-article a.tb-ghost{background:linear-gradient(160deg,rgba(29,79,154,.55),rgba(10,22,52,.75));border:1px solid rgba(255,255,255,.14)}
.wiki-article a.btn,.wiki-article a.tb-cta{background:linear-gradient(135deg,#0b7fb0,#1557b8);border:1px solid rgba(95,224,255,.55);box-shadow:0 6px 18px rgba(8,90,160,.3)}
@media (max-width:760px){
  .wiki-main{padding:18px 16px 50px}
  .wiki-card>ol>li{padding:12px 12px 12px 54px}
  .wiki-card>ol>li::before{left:12px;top:12px}
  .wiki-article.has-cards{gap:14px}
}
.wiki-article.has-cards .wiki-head>*:last-child{margin-bottom:0}
.wiki-card>ol{margin-bottom:18px}
.wiki-card>ol:last-child{margin-bottom:0}