/* Top bar — Confluence placement, our identity (black logo + wordmark, gradient-underline nav,
   centred search, visitors, flags). Every control here is --h-ctl tall. */
.topbar{position:sticky;top:0;z-index:50;height:var(--h-topbar);display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-6);background:var(--color-white,#fff);border-bottom:1px solid rgba(0,0,0,.08);font-size:var(--fs-ui);color:var(--color-gray-700,#666)}
.topbar a{text-decoration:none;color:inherit}
.topbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--h-ctl);height:var(--h-ctl);border:0;border-radius:var(--r-2);background:none;color:var(--color-gray-800,#444);cursor:pointer}
.topbar-btn:hover,.topbar-avatar:hover{background:var(--c-surface-hover)}
.topbar-btn svg{width:20px;height:20px}
.topbar-dd.topbar-menu{display:none}
.topbar .logo{display:flex;align-items:flex-end;gap:.6rem;height:100%}
.topbar .logo-img{height:40px;width:auto;filter:brightness(0);margin-bottom:10px}
.topbar .logo-text{display:flex;flex-direction:column;line-height:1;margin-bottom:12px}
.topbar .logo-sub{font-size:.72rem;font-weight:600;color:var(--color-gray-900,#222);letter-spacing:1.5px;text-transform:uppercase}
.topbar .logo-main{font-size:1.35rem;font-weight:700;color:var(--color-text,#222);letter-spacing:-.3px}
.topbar .nav{display:flex;align-items:center;gap:2rem;margin-left:var(--s-8);height:100%}
.topbar .nav a{position:relative;display:inline-flex;align-items:center;height:100%;font-size:1.05rem;font-weight:500;color:var(--color-gray-800,#444);transition:color var(--d-slow) ease}
.topbar .nav a::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%) scaleX(0);width:100%;height:3px;background:var(--gradient-underline,var(--color-primary,#c0392b));border-radius:2px 2px 0 0;transition:transform var(--d-slow) ease}
.topbar .nav a:hover,.topbar .nav a.active{color:var(--color-primary,#c0392b)}
.topbar .nav a:hover::before,.topbar .nav a.active::before{transform:translateX(-50%) scaleX(1)}
.topbar-right{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;font-size:.8rem}
/* The search box is the field itself — typing in it drops results underneath.
   flex-basis 0 with grow lets it take whatever the bar has left instead of holding
   420px and pushing the controls off the edge. */
.topbar-search{position:relative;flex:1 1 0;min-width:0;max-width:420px;
    display:flex;align-items:center;gap:var(--s-2);height:var(--h-ctl);
    margin:0 auto;padding:0 var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-ctl);
    background:var(--c-surface);color:var(--c-text-subtlest);font:inherit;font-size:var(--fs-ui);
    transition:background var(--d-fast),border-color var(--d-fast),box-shadow var(--d-fast)}
.topbar-search:hover{background:var(--c-surface-hover);border-color:var(--c-border-bold)}
.topbar-search:focus-within{background:#fff;border-color:var(--c-link);box-shadow:0 0 0 3px rgba(29,122,252,.16)}
.topbar-search > svg{width:16px;height:16px;flex:none}
.topbar-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--fs-ui);
    color:var(--c-text);outline:0;padding:0}
.topbar-search input::placeholder{color:var(--c-text-subtlest)}
.topbar-search input::-webkit-search-cancel-button{appearance:none}
.search-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;max-height:min(60vh,460px);
    overflow-y:auto;padding:var(--s-1);background:var(--c-surface-raised);border:1px solid var(--c-border);
    border-radius:var(--r-2);box-shadow:var(--sh-overlay)}
.search-drop a{display:grid;grid-template-columns:1fr auto;gap:0 var(--s-2);padding:var(--s-2) var(--s-3);
    border-radius:var(--r-1);color:var(--c-text);text-decoration:none}
.search-drop a:hover,.search-drop a.on{background:var(--c-surface-hover)}
.search-hit-title{font-weight:600;font-size:var(--fs-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-hit-cat{font-size:11px;font-weight:600;color:var(--c-text-subtlest);white-space:nowrap;align-self:center}
.search-hit-summary{grid-column:1/-1;margin-top:2px;font-size:12.5px;color:var(--c-text-subtle);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-empty{margin:0;padding:var(--s-4);text-align:center;font-size:var(--fs-ui);color:var(--c-text-subtle)}
/* Visitors — the week's line is the figure; today's count sits at its end and the total
   rides quietly beside it. It links to the observatory strip on home. */
.topbar-visitors{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--h-ctl);
    padding:0 var(--s-3) 0 var(--s-2);margin-right:var(--s-1);border-radius:var(--r-ctl);
    background:var(--s-row);white-space:nowrap;cursor:default}
.topbar-visitors .visitor-sparkline{flex:none;width:64px;height:20px;overflow:visible}
.sparkline-area{fill:var(--s-blue);opacity:.12}
.sparkline-line{fill:none;stroke:var(--s-blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sparkline-dot{fill:var(--s-blue)}
.v-today{display:flex;align-items:baseline;gap:3px;line-height:1}
.v-today b{font-size:13.5px;font-weight:700;color:var(--s-text);font-variant-numeric:tabular-nums}
.v-today i{font-size:10.5px;font-style:normal;font-weight:600;color:var(--s-faint)}
.v-total{padding-left:var(--s-2);border-left:1px solid #DDE1E6;font-size:11.5px;font-weight:600;
    color:var(--s-faint);font-variant-numeric:tabular-nums}
.topbar-user{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--h-ctl);
    padding:0 var(--s-2) 0 3px;border-radius:var(--r-ctl);transition:background var(--d-fast)}
.topbar-user:hover{background:var(--c-surface-hover)}
.topbar-avatar{display:inline-flex;width:26px;height:26px;flex:none;border-radius:50%;overflow:hidden;
    background:var(--color-gray-100,#f5f5f5);color:var(--color-primary,#c0392b);
    align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-ui)}
.topbar-avatar img{width:100%;height:100%;object-fit:cover}
.topbar-user-name{font-weight:600;color:var(--c-text);white-space:nowrap}
.topbar-badge{padding:1px 6px;border-radius:var(--r-pill);font-size:10px;font-weight:700;letter-spacing:.02em;
    background:var(--c-accent-gray-bg);color:var(--c-accent-gray)}
.topbar-badge.admin{background:var(--c-accent-purple-bg);color:var(--c-accent-purple)}
.topbar-badge.staff{background:var(--c-accent-blue-bg);color:var(--c-accent-blue)}
.btn-login{display:inline-flex;align-items:center;gap:6px;height:var(--h-ctl);padding:0 var(--s-3);border-radius:var(--r-ctl);background:var(--color-gray-100,#f5f5f5);font-weight:600;font-size:var(--fs-ui);color:var(--color-gray-800,#444)}
.btn-login svg{width:15px;height:15px}
.btn-login:hover{background:var(--c-surface-hover)}
.topbar-dd{position:relative;height:100%;display:flex;align-items:center}
.topbar-dd-menu{display:none;position:absolute;top:100%;left:0;min-width:190px;padding:var(--s-1);margin-top:-6px;background:#fff;border-radius:var(--r-2);box-shadow:var(--sh-overlay);z-index:60;font-size:var(--fs-ui)}
.topbar-dd-menu.right{left:auto;right:0}
.topbar-dd:hover .topbar-dd-menu,.topbar-dd.open .topbar-dd-menu{display:block}
/* a click opens the admin grid and it stays until you click away or press Esc; hovering
   into it still works. It used to open on focus-within too, so a click left it open for good. */
.topbar-dd-menu a{display:flex;align-items:center;gap:var(--s-2);height:34px;padding:0 var(--s-3);border-radius:var(--r-1);color:var(--color-gray-800,#444);white-space:nowrap;font-size:var(--fs-ui);font-weight:500}
.topbar-dd-menu a:hover{background:var(--c-surface-hover);color:var(--color-primary,#c0392b)}
.topbar-dd-menu a svg{width:16px;height:16px;color:var(--c-text-subtle)}
.topbar-dd-menu hr{border:0;border-top:1px solid var(--c-border);margin:var(--s-1) 0}
/* the admin menu is a grid of icons, not a list — two rows of the tools you reach for */
@media (max-width:1279px){.topbar-visitors{display:none}}
@media (max-width:1150px){.topbar .nav{gap:1.25rem;margin-left:var(--s-5)}.topbar .nav a{font-size:1rem}}
@media (max-width:1023px){.topbar-user-name,.topbar-badge,.search-hint{display:none}}
/* the field keeps shrinking rather than snapping back to an icon, so it stays typeable */
@media (max-width:760px){.topbar-search{max-width:none}
    .search-drop{position:fixed;top:calc(var(--h-topbar) + 6px);left:var(--s-2);right:var(--s-2)}}
@media (max-width:640px){
    .page-cover{height:112px}
    .sky-object{width:56px;height:56px;right:var(--s-4)}
    .sky-object::before{width:120px;height:120px}
}
@media (max-width:1023px){
    .topbar{padding:0 var(--s-3);gap:var(--s-2)}
    /* the nav moves into the hamburger here; without it those links were unreachable */
    .topbar-dd.topbar-menu{display:flex}
    .topbar .nav,.topbar-visitors{display:none}
    .topbar .logo-img{height:32px;margin-bottom:8px} .topbar .logo-text{margin-bottom:9px} .topbar .logo-main{font-size:1.1rem}
}
@media (max-width:560px){.topbar .logo-sub{display:none}.topbar .logo-text{margin-bottom:10px}}
/* the wordmark costs 146px, which left the search field 57px wide — the mark alone identifies us */
@media (max-width:420px){.topbar .logo-text{display:none}.topbar-search{min-width:120px}}

/* Shell layout (tree | content | aside). Values come from tokens.css. */
.shell{display:flex;min-height:calc(100vh - var(--h-topbar));background:var(--c-surface)}
.tree{width:var(--w-tree);flex:none;position:sticky;top:var(--h-topbar);height:calc(100vh - var(--h-topbar));display:flex;flex-direction:column;border-right:1px solid var(--c-border);background:var(--c-surface)}
.tree-backdrop{display:none}
.tree-expand{display:none;position:fixed;left:var(--s-2);top:calc(var(--h-topbar) + var(--s-2));z-index:40;width:32px;height:32px;border:1px solid var(--c-border);border-radius:var(--r-1);background:var(--c-surface);color:var(--c-text-subtle);cursor:pointer;align-items:center;justify-content:center}
.tree-expand i{width:18px;height:18px}
/* Contents collapses by sliding out to the left (no reflow inside it), and the expand button
   fades in where it went. body.tree-ready gates the motion so a page that loads collapsed
   does not play the slide. */
body.tree-collapsed .tree{margin-left:calc(-1 * var(--w-tree));opacity:0;visibility:hidden;pointer-events:none}
body.tree-ready .tree{transition:width var(--d-base) var(--t-ease),margin-left .26s cubic-bezier(.2,.8,.2,1),opacity .18s ease,visibility 0s linear .26s}
body.tree-ready:not(.tree-collapsed) .tree{transition-delay:0s,0s,.06s,0s}
body.tree-collapsed .tree-expand{display:inline-flex;animation:tree-expand-in .22s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes tree-expand-in{from{opacity:0;transform:translateX(-6px)}}
.shell{overflow-x:clip}
.shell-main{flex:1;min-width:0;display:flex;justify-content:safe center;gap:var(--s-6)}
.shell-content{flex:0 1 var(--w-content);min-width:0;max-width:100%;padding:var(--s-6) var(--s-6) var(--s-12)}
.shell-content.wide{flex-basis:1100px}
.page-title{font-size:32px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--c-text);margin:0}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1);font-size:var(--fs-ui);color:var(--c-text-subtle)}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{color:var(--c-link);text-decoration:underline}
.breadcrumb-sep{color:var(--c-text-subtlest)}
.page-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);font-size:var(--fs-ui);color:var(--c-text-subtle);padding-bottom:var(--s-5);border-bottom:1px solid var(--c-border);margin-bottom:var(--s-8)}
.page-author{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--c-text);font-weight:600}
.page-author img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.page-meta .separator{color:var(--c-border-bold)}
.page-meta i{width:14px;height:14px;vertical-align:-2px;margin-right:3px}

@media (max-width:1023px){
    .tree{position:fixed;left:0;top:var(--h-topbar);z-index:45;transform:translateX(-100%);transition:transform var(--d-base);box-shadow:var(--sh-overlay)}
    body.tree-open .tree{transform:none}
    body.tree-open .tree-backdrop{display:block;position:fixed;inset:var(--h-topbar) 0 0 0;background:rgba(0,0,0,.35);z-index:44}
    .tree-collapse{display:none!important}
    .tree-expand{display:inline-flex;top:auto;bottom:var(--s-4);left:var(--s-4);width:40px;height:40px;border-radius:50%;box-shadow:var(--sh-overlay)}
    .shell-content,.shell-content.wide{flex-basis:100%;padding:var(--s-6) var(--s-4) var(--s-10)}
}

/* Reader TOC rail — a progress spine beside the article. Each heading is a node on a line:
   the ones you have read are filled, the one you are in is blue and wider, the rest hollow.
   The rail follows along and scrolls itself to keep the current heading in view. */
.toc-rail{display:none;width:250px;flex:none;position:sticky;top:calc(var(--h-topbar) + var(--s-6));
    align-self:flex-start;max-height:calc(100vh - var(--h-topbar) - var(--s-10));
    margin:var(--s-6) var(--s-6) 0 0;font-size:13px;color:var(--s-sub);
    display:none;flex-direction:column;gap:10px}
.toc-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px}
.toc-head span:first-child{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--s-faint)}
.toc-pct{font-size:11.5px;font-weight:700;color:var(--s-faint);font-variant-numeric:tabular-nums;transition:color .2s ease}
.toc-pct.on{color:var(--s-blue)}
.toc{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding-right:4px}
.toc::-webkit-scrollbar{width:6px}
.toc::-webkit-scrollbar-thumb{background:#E2E6EA;border-radius:99px}
.toc ul{list-style:none;margin:0;padding:0}
/* the spine: one line down the list, nodes on it */
.toc > div > ul{position:relative;padding-left:14px}
.toc > div > ul::before{content:'';position:absolute;left:3px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--s-line)}
.toc li{position:relative}
.toc > div > ul > li > a::before{content:'';position:absolute;left:-14px;top:11px;width:8px;height:8px;
    border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #DDE1E6;
    transition:box-shadow .16s ease,background .16s ease,transform .16s cubic-bezier(.2,.8,.2,1)}
.toc > div > ul > li > a.passed::before{background:#C9D3DE;box-shadow:inset 0 0 0 2px #C9D3DE}
.toc > div > ul > li > a.active::before{background:var(--s-blue);box-shadow:inset 0 0 0 2px var(--s-blue),0 0 0 3px var(--s-blue-bg);transform:scale(1.1)}
.toc ul ul{padding-left:12px;margin:2px 0 4px}
.toc a{display:block;padding:5px 8px;border-radius:8px;color:#4E5968;text-decoration:none;line-height:1.45;
    transition:background .1s ease-out,color .1s ease-out}
.toc ul ul a{font-size:12.5px;color:var(--s-faint)}
.toc a:hover{background:var(--s-row);color:var(--s-text)}
.toc a.active{color:var(--s-blue);font-weight:700}
.toc ul ul a.active{color:var(--s-blue)}
.toc a.passed{color:var(--s-faint)}
.toc-top{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;height:30px;padding:0 10px;
    border:0;border-radius:8px;background:none;color:var(--s-faint);font:inherit;font-size:12.5px;font-weight:600;
    cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s ease,background .1s ease-out,color .1s ease-out}
.toc-top.on{opacity:1;pointer-events:auto}
.toc-top:hover{background:var(--s-row);color:var(--s-text)}
.toc-top svg{width:14px;height:14px}
/* the rail needs its own column: from 1440px, or from 1200px once Contents is folded away */
@media (min-width:1440px){.toc-rail{display:flex}}
@media (min-width:1200px){body.tree-collapsed .toc-rail{display:flex}}
@media (prefers-reduced-motion:reduce){.toc a,.toc > div > ul > li > a::before{transition:none}}

/* ---------------------------------------------------------------------------
   Page cover — the blog's night sky, committed to as a real chapter opener.
   Breadcrumb, title and byline all live on the sky; the category mark is the
   body floating in it, so each section of the knowledge base gets its own sky.
---------------------------------------------------------------------------- */
.page-cover{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
    min-height:236px;padding:var(--s-6) 190px var(--s-5) var(--s-6);margin:0 0 var(--s-4);
    border-radius:16px;overflow:hidden;isolation:isolate;
    background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 46%,var(--sky-3) 78%,var(--sky-4) 100%);
    --sky-1:#0B1030; --sky-2:#1D2260; --sky-3:#3A3C86; --sky-4:#6B5AA6}
.page-cover[data-cat^="02"]{--sky-1:#061726;--sky-2:#0F3557;--sky-3:#1F5D8C;--sky-4:#3D87B8}
.page-cover[data-cat^="03"]{--sky-1:#150C33;--sky-2:#2E1F63;--sky-3:#523A96;--sky-4:#8467C4}
.page-cover[data-cat^="04"]{--sky-1:#032023;--sky-2:#0A4249;--sky-3:#12707A;--sky-4:#2AA39B}
.page-cover[data-cat^="05"]{--sky-1:#231407;--sky-2:#4C2C12;--sky-3:#8A5525;--sky-4:#C1873F}
.page-cover[data-cat^="06"]{--sky-1:#041D13;--sky-2:#0C412E;--sky-3:#177049;--sky-4:#2FA36B}
.page-cover[data-cat^="07"]{--sky-1:#0B0F16;--sky-2:#1B2434;--sky-3:#38455F;--sky-4:#5E6E90}
.page-cover[data-cat^="08"]{--sky-1:#210B12;--sky-2:#4A1926;--sky-3:#7E3143;--sky-4:#B05468}

.sky{position:absolute;inset:0;z-index:-1}
.stars{position:absolute;inset:0;background-repeat:repeat}
.stars-far{opacity:.55;background-size:420px 236px;background-image:
    radial-gradient(1px 1px at 40px 60px,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 150px 130px,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 260px 40px,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 350px 170px,rgba(255,255,255,.45),transparent)}
.stars-mid{opacity:.8;background-size:640px 236px;background-image:
    radial-gradient(1.4px 1.4px at 90px 34px,rgba(255,255,255,.9),transparent),
    radial-gradient(1.3px 1.3px at 240px 96px,rgba(255,255,255,.75),transparent),
    radial-gradient(1.4px 1.4px at 430px 52px,rgba(255,255,255,.85),transparent),
    radial-gradient(1.2px 1.2px at 570px 128px,rgba(255,255,255,.7),transparent)}
.stars-near{background-size:880px 236px;background-image:
    radial-gradient(1.9px 1.9px at 60px 44px,#fff,transparent),
    radial-gradient(1.7px 1.7px at 330px 26px,#fff,transparent),
    radial-gradient(2px 2px at 520px 92px,#fff,transparent),
    radial-gradient(1.7px 1.7px at 780px 58px,#fff,transparent);
    animation:skyTwinkle 6s ease-in-out infinite}
.haze{position:absolute;left:0;right:0;bottom:0;height:60%;
    background:radial-gradient(125% 100% at 50% 122%,rgba(255,214,160,.30) 0%,rgba(255,190,140,.10) 42%,transparent 68%)}
.firefly{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFE9A8;box-shadow:0 0 8px 2px rgba(255,233,168,.7)}
.firefly-1{top:64%;left:26%;animation:skyGlow 6s ease-in-out infinite}
.firefly-2{top:44%;left:52%;animation:skyGlow 7.5s ease-in-out infinite 1.1s}
.firefly-3{top:74%;left:68%;animation:skyGlow 6.8s ease-in-out infinite 2.2s}

.sky-object{position:absolute;top:72px;right:58px;width:88px;height:88px;display:grid;place-items:center;
    animation:skyFloat 8s ease-in-out infinite}
.sky-object::before{content:'';position:absolute;width:230px;height:230px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,238,198,.22) 0%,rgba(255,226,170,.08) 44%,transparent 68%)}
.sky-object img{position:relative;width:100%;height:100%;object-fit:contain;
    filter:drop-shadow(0 16px 24px rgba(0,0,0,.55)) drop-shadow(0 3px 5px rgba(0,0,0,.35))}
/* no mark for this section? the moon takes the stage instead */
.sky-object.is-moon::after{content:'';position:relative;width:62px;height:62px;border-radius:50%;
    background:radial-gradient(circle at 35% 32%,#FFFDF2 0%,#FFE9A8 55%,#F3C969 100%);
    box-shadow:0 0 22px rgba(255,214,120,.5),0 0 56px rgba(255,214,120,.2)}

.page-cover .breadcrumb{position:absolute;top:calc(var(--s-4) + 7px);left:var(--s-6);right:200px;
    color:rgba(255,255,255,.78);font-weight:500}
.page-cover .breadcrumb a{color:inherit}
.page-cover .breadcrumb a:hover{color:#fff;text-decoration:underline}
.page-cover .breadcrumb-sep{color:rgba(255,255,255,.42)}

.page-cover .page-title{margin:0 0 var(--s-3);color:#fff;font-size:32px;font-weight:600;line-height:1.25;
    letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.page-cover .page-meta{padding:0;margin:0;border:0;color:rgba(255,255,255,.78);gap:var(--s-2) var(--s-3)}
.page-cover .page-meta > span,.page-cover .page-meta .post-date,.page-cover .page-meta .post-reading-time,
.page-cover .page-meta .post-views{color:rgba(255,255,255,.78)}
.page-cover .page-meta .separator{color:rgba(255,255,255,.38)}
.page-cover .page-author{color:#fff}
/* page actions — top-right of the cover, like Confluence's page header */
.page-actions{position:absolute;top:var(--s-4);right:var(--s-4);z-index:5;display:flex;gap:6px}
@media (max-width:860px){
    /* the cover is short here and the action row landed on top of the breadcrumb */
    .page-actions{position:static;margin:0 0 var(--s-2);flex-wrap:wrap;justify-content:flex-start}
    .page-cover{padding-right:var(--s-6)}
}

.cover-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--s-3);border:1px solid rgba(255,255,255,.28);
    border-radius:9px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
    backdrop-filter:blur(6px);transition:background var(--d-fast) ease,transform var(--d-fast) ease}
.cover-btn:hover{background:rgba(255,255,255,.26)}
.cover-btn:active{transform:scale(.96)}
.cover-btn svg{width:15px;height:15px}
.cover-btn.icon{padding:0;width:32px;justify-content:center}
.cover-btn.on{background:rgba(255,255,255,.34);border-color:rgba(255,255,255,.5)}
.cover-btn.danger:hover{background:rgba(224,49,49,.85);border-color:rgba(224,49,49,.9)}
/* the page's other actions, named rather than guessed from an icon */
.cover-more{position:relative}
.cover-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:212px;padding:6px;
    background:#fff;border:1px solid var(--s-line);border-radius:12px;box-shadow:0 12px 32px rgba(9,30,66,.16);
    animation:cover-menu-in .14s cubic-bezier(.2,.8,.2,1) both}
@keyframes cover-menu-in{from{opacity:0;transform:translateY(-4px)}}
.cover-menu[hidden]{display:none}
.cover-menu button,.cover-menu a{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;
    border:0;border-radius:8px;background:none;color:var(--s-text);font:inherit;font-size:13px;font-weight:600;
    text-align:left;text-decoration:none;cursor:pointer;transition:background .1s ease-out,color .1s ease-out}
.cover-menu button:hover,.cover-menu a:hover{background:var(--s-row)}
.cover-menu svg{width:16px;height:16px;color:var(--s-faint);flex:none}
.cover-menu button:hover svg,.cover-menu a:hover svg{color:var(--s-sub)}
.cover-menu .danger{color:#E03131}
.cover-menu .danger:hover{background:#FFF0F1}
.cover-menu .danger svg{color:#E03131}
.cover-menu hr{border:0;border-top:1px solid var(--s-line);margin:5px 4px}
.cover-menu-on{margin-left:auto;padding:1px 6px;border-radius:5px;background:var(--s-row);color:var(--s-faint);font-size:11px}
.cover-btn.copied{background:rgba(43,175,101,.85);border-color:rgba(43,175,101,.9)}

.page-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s-8)}

@keyframes skyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes skyTwinkle{0%,100%{opacity:.9}50%{opacity:.55}}
@keyframes skyGlow{0%,100%{opacity:.25;transform:translate(0,0)}30%{opacity:1;transform:translate(10px,-12px)}60%{opacity:.5;transform:translate(-7px,-6px)}}
@media (prefers-reduced-motion:reduce){.sky *,.sky-object{animation:none!important}}

@media (max-width:860px){
    .page-cover{min-height:200px;padding:var(--s-5) var(--s-5) var(--s-4);border-radius:12px}
    .page-cover .breadcrumb{left:var(--s-5);right:var(--s-5)}
    .sky-object{width:64px;height:64px;top:auto;bottom:auto;right:var(--s-5)}
    .sky-object::before{width:150px;height:150px}
    .page-cover .page-title{font-size:26px}
}

/* ---- list & category pages: same language as the post cover ---- */
.list-cover{min-height:190px;padding:var(--s-6) 170px var(--s-5) var(--s-6)}
.list-cover .sky-object{top:38px;right:52px;width:76px;height:76px}
.list-cover .sky-object::before{width:190px;height:190px}
.list-cover .page-title{font-size:30px}
.list-cover .page-meta{color:rgba(255,255,255,.75)}
.list-cover .page-meta span{color:inherit}
.list-cover .page-meta .separator{color:rgba(255,255,255,.38)}

.list-bar{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-6) 0 var(--s-3)}
.list-count{margin-right:auto;font-size:13px;font-weight:600;color:var(--c-text-subtle)}
/* segmented group: the shell is --h-ctl tall, each segment --h-ctl-inner, like every other control */
.list-sort{display:flex;align-items:center;gap:2px;height:var(--h-ctl);padding:3px;
    border-radius:var(--r-ctl);background:var(--s-row)}
.list-sort a{display:inline-flex;align-items:center;height:var(--h-ctl-inner);padding:0 12px;
    border-radius:var(--r-ctl-inner);font-size:13px;font-weight:600;color:var(--s-sub);text-decoration:none;
    transition:background var(--d-fast) cubic-bezier(.2,.8,.2,1),color var(--d-fast)}
.list-sort a:hover{color:var(--s-text)}
.list-sort a.active{background:#fff;color:var(--s-blue);box-shadow:var(--s-rest)}
.list-view{display:flex;align-items:center;gap:2px;height:var(--h-ctl);padding:3px;
    border-radius:var(--r-ctl);background:var(--s-row)}
.list-view button{display:inline-flex;align-items:center;justify-content:center;width:30px;
    height:var(--h-ctl-inner);border:0;border-radius:var(--r-ctl-inner);
    background:none;color:var(--s-sub);cursor:pointer;transition:background var(--d-fast) cubic-bezier(.2,.8,.2,1),color var(--d-fast)}
.list-view button:hover{color:var(--s-text)}
.list-view button.active{background:#fff;color:var(--s-blue);box-shadow:var(--s-rest)}
.list-view svg{width:15px;height:15px}

/* cards pick up the same surface treatment as the tree and TOC rail */
.post-list.home-cards-list .home-card,.home-cards-grid .home-card{border-radius:14px;transition:transform var(--d-base) cubic-bezier(.2,.8,.2,1),box-shadow var(--d-base)}
.post-list.home-cards-list .home-card:hover,.home-cards-grid .home-card:hover{transform:translateY(-2px);box-shadow:var(--s-lift)}
@media (max-width:860px){
    .list-cover{min-height:150px;padding:var(--s-5) var(--s-5) var(--s-4)}
    .list-cover .sky-object{width:54px;height:54px;right:var(--s-4)}
    .list-cover .page-title{font-size:24px}
    .list-bar{flex-wrap:wrap}
    .list-count{margin-right:0;width:100%}
}
/* .topbar-dd:hover .topbar-dd-menu{display:block} outranks .topbar-grid, so the grid opened as a column */
/* All Posts has no category, so it fell back to home's night palette and read as home again.
   It gets the small hours: deep teal, the last of the stars. */
.list-cover[data-cat=""]{--sky-1:#041A22;--sky-2:#0A3A46;--sky-3:#136B74;--sky-4:#2FA097}
.list-cover[data-cat=""] .sky-object.is-moon::after{background:radial-gradient(circle at 35% 32%,#F4FFFB 0%,#BFEFE4 55%,#7FD1C4 100%);
    box-shadow:0 0 22px rgba(150,230,215,.45),0 0 56px rgba(150,230,215,.18)}

/* the Hobby menu: two rows with an icon tile and a line under each name. Written against
   .topbar .nav a, which otherwise styles these like the top-level links (full height, underline). */
.topbar .nav .hobby-menu{left:50%;transform:translateX(-50%);min-width:212px;padding:6px;margin-top:-4px;border:1px solid var(--s-line);border-radius:12px;
    box-shadow:0 12px 32px rgba(9,30,66,.12);animation:menu-in .14s cubic-bezier(.2,.8,.2,1) both}
@keyframes menu-in{from{opacity:0;transform:translateX(-50%) translateY(-4px)}}
.topbar .nav .hobby-menu a{display:flex;align-items:center;gap:10px;height:auto;padding:7px 8px;border-radius:8px;font-size:13px;font-weight:600;color:var(--s-text);transition:background .1s ease-out}
.topbar .nav .hobby-menu a::before{display:none}
.topbar .nav .hobby-menu a:hover{background:var(--s-row);color:var(--s-text)}
.topbar .nav .hobby-menu a.on{color:var(--s-blue)}
.topbar .nav .hobby-menu a.on svg{background:var(--s-blue-bg);color:var(--s-blue)}
.topbar .nav .hobby-menu svg{flex:none;width:30px;height:30px;padding:7px;box-sizing:border-box;border-radius:8px;background:var(--s-row);color:var(--s-sub)}
.topbar .nav .hobby-menu span{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.topbar .nav .hobby-menu small{font-size:11.5px;font-weight:500;color:var(--s-faint)}
@media (prefers-reduced-motion:reduce){.topbar .nav .hobby-menu{animation:none}}

/* The admin links, laid in the bar: two rows of six small tiles, no button and no menu.
   Each is one click; the name shows as the browser's own tooltip. */
.topbar-apps{display:grid;grid-template-columns:repeat(6,26px);grid-auto-rows:25px;gap:3px;
    margin-right:var(--s-2);flex:none}
.topbar-apps a{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;
    color:var(--s-faint);transition:background .1s ease-out,color .1s ease-out}
.topbar-apps a:hover{background:var(--s-blue-bg);color:var(--s-blue)}
.topbar-apps svg{width:15px;height:15px}
@media (max-width:1279px){.topbar-apps{display:none}}