/* ═══════════════════════════════════════════════════════════════════════════
   journal-shell.css — the ORIGINAL sidebar (semicircle + wheel, airbrushed
   category emblems), mobile drawer, reading bar, theme/language swaps and the
   category wash, lifted verbatim from shapes-skin.css + soft-glass.css so the
   journal pages keep them without loading those whole skins.
   Driven by shapes-fx.js (html.os-semi) and soft-fx.js (html.sg-wheel).
   Load before journal.css.
   ═══════════════════════════════════════════════════════════════════════════ */
body.jr{
  --os-cobalt:#1E4F8F;--os-sky:#8DB6E2;--os-navy:#12294A;
  --sg-warm:#C7434B;--sg-warm-2:#E0666C;--sg-warm-deep:#8E1F2A;
  --sg-hi:rgba(255,255,255,.92);--sg-lo:rgba(24,44,78,.18);--sg-lo2:rgba(24,44,78,.10);
  --sg-rim:inset 0 1px 0 rgba(255,255,255,.75);
  --sg-ease:cubic-bezier(.16,1,.3,1);--sg-spring:cubic-bezier(.3,1.45,.5,1);
  --sg-raise-xs:-2px -2px 5px var(--sg-hi),2px 3px 6px var(--sg-lo);
  --sg-press-sm:inset 2px 2px 4px var(--sg-lo),inset -2px -2px 4px var(--sg-hi);
}
body.jr.dark{
  --sg-hi:rgba(120,162,218,.10);--sg-lo:rgba(0,0,0,.55);--sg-lo2:rgba(0,0,0,.32);
  --sg-rim:inset 0 1px 0 rgba(170,200,240,.10);--sg-warm:#D9545B;--sg-warm-2:#EE7A7F;
}
/* soft-fx.js decorations that belong to the old skin, not the shell */
body.jr .sg-fabric,body.jr .sg-grain,body.jr .sg-sky,body.jr .sg-icons,body.jr .sg-mote,body.jr .sg-cloth,body.jr .sg-vitals{display:none!important}
/* ---- from shapes-skin semicircle ---- */
/* ══ Semicircle sidebar (desktops with a pointer) ═════════════════════════════
   Replaces gold-blue's 56px icon rail. At rest only a small frosted half-disc
   peeks from the middle of the left edge; hovering it — or anywhere along the
   left edge (shapes-fx.js adds a hot strip) — blooms it into a full
   semicircle that condenses out of a fog: a feathered radial mask whose
   radius (--os-fog) animates, over a blurred backdrop, while the rows sharpen
   in. clip-path tracks the same circle, so a closed sidebar never eats clicks
   meant for the page. Gated on html.os-semi, which only the script sets —
   no script, and the old rail is untouched. */
@property --os-fog{syntax:'<length>';inherits:false;initial-value:40px}

@media (hover:hover) and (min-width:901px){
  html.os-semi{--os-semi-r:min(46vh,400px)}
  html.os-semi .page-wrapper{margin-left:0}
  html.os-semi .sidebar.sidebar{
    --os-fog:40px;
    top:calc(50vh - var(--os-semi-r));bottom:auto;left:0;
    width:var(--os-semi-r)!important;height:calc(var(--os-semi-r) * 2);
    padding:calc(var(--os-semi-r) * .22) 0;
    z-index:210;
    overflow-x:hidden;overflow-y:auto;scrollbar-width:none;
    border:0;border-radius:0;box-shadow:none!important;
    --os-semi-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5 10.5 8 5 13.5' fill='none' stroke='%231E4F8F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --os-semi-body:radial-gradient(circle at 0 50%,
      color-mix(in srgb,var(--os-sky) 30%,var(--surface)) 0,
      color-mix(in srgb,var(--surface) 90%,transparent) 40px,
      color-mix(in srgb,var(--surface) 78%,transparent) 62%,
      color-mix(in srgb,var(--os-sky) 22%,transparent) 100%);
    /* layers: the peek's chevron · a hairline arc that grows with the fog ·
       the frosted body. Backgrounds stay put while the rows scroll. */
    background:
      var(--os-semi-chev) 9px 50% / 16px 16px no-repeat,
      radial-gradient(circle at 0 50%,transparent calc(var(--os-fog) * .86),
        color-mix(in srgb,var(--accent) 55%,transparent) calc(var(--os-fog) * .86 + 1px),
        transparent calc(var(--os-fog) * .86 + 3px)),
      var(--os-semi-body);
    -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
    -webkit-mask-image:radial-gradient(circle at 0 50%,#000 calc(var(--os-fog) * .74),rgba(0,0,0,.6) calc(var(--os-fog) * .9),transparent var(--os-fog));
            mask-image:radial-gradient(circle at 0 50%,#000 calc(var(--os-fog) * .74),rgba(0,0,0,.6) calc(var(--os-fog) * .9),transparent var(--os-fog));
    clip-path:circle(calc(var(--os-fog) + 2px) at 0 50%);
    transition:--os-fog .75s cubic-bezier(.2,.8,.2,1),transform .3s;
  }
  html.os-semi .sidebar.sidebar::-webkit-scrollbar{display:none}
  html.os-semi body.dark .sidebar.sidebar{
    --os-semi-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5 10.5 8 5 13.5' fill='none' stroke='%238DB6E2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --os-semi-body:radial-gradient(circle at 0 50%,
      color-mix(in srgb,var(--os-cobalt) 55%,var(--surface)) 0,
      color-mix(in srgb,var(--surface) 88%,transparent) 40px,
      color-mix(in srgb,var(--surface) 72%,transparent) 62%,
      color-mix(in srgb,var(--os-cobalt) 34%,transparent) 100%);
  }
  html.os-semi .sidebar.sidebar.os-open,
  html.os-semi .sidebar.sidebar:focus-within{--os-fog:var(--os-semi-r);--os-semi-chev:none}

  /* Rows: hidden in the fog at rest, condensing in once it opens. */
  html.os-semi .sidebar.sidebar > *{
    opacity:0;filter:blur(9px);
    transition:opacity .3s ease,filter .4s ease;
  }
  html.os-semi .sidebar.os-open > *,
  html.os-semi .sidebar:focus-within > *{
    opacity:1;filter:blur(0);
    transition:opacity .5s ease .16s,filter .6s cubic-bezier(.2,.8,.2,1) .16s;
  }
  /* The rail's rest-state hiding no longer applies — the fog does that now. */
  html.os-semi .sidebar .logo-text,
  html.os-semi .sidebar .part-name,
  html.os-semi .sidebar .part-caret{display:block}
  html.os-semi .sidebar .sidebar-group.part:not(.collapsed) > .part-body{display:block}
  html.os-semi .sidebar .sidebar-logo{justify-content:flex-start;padding:.35rem .9rem .6rem;border-bottom:0}
  html.os-semi .sidebar .part-toggle{justify-content:flex-start;padding:.42rem .6rem}
  html.os-semi .sidebar .part-icon{width:1.25rem;font-size:1rem}
  html.os-semi .sidebar .part-toggle,
  html.os-semi .sidebar .sidebar-link,
  html.os-semi .sidebar .sidebar-label,
  html.os-semi .sidebar .sidebar-logo{font-family:var(--jr-text,inherit)!important}
  html.os-semi .sidebar .part-toggle{color:var(--jr-ink)!important}
  html.os-semi .sidebar .sidebar-link{color:var(--jr-ink2)!important}
  html.os-semi .sidebar .sidebar-link:hover{color:var(--jr-ink)!important}
  html.os-semi .sidebar .sidebar-label{color:var(--jr-ink3)!important}
  body.dark .sidebar .part-toggle{color:var(--jr-gold-hi)!important}
  body.dark .sidebar .sidebar-link{color:var(--jr-rule)!important}
  body.dark .sidebar .sidebar-link:hover{color:#fff!important}
  body.dark .sidebar .sidebar-label{color:var(--jr-rule2)!important}
  /* Rows bow along the arc: shapes-fx.js sets each row's --os-arc-x/-o. */
  html.os-semi .sidebar .sidebar-logo,
  html.os-semi .sidebar .part-toggle,
  html.os-semi .sidebar .sidebar-link,
  html.os-semi .sidebar .sidebar-label{
    width:min(232px,64%);
    transform:translateX(var(--os-arc-x,0px));
    opacity:var(--os-arc-o,1);
    transition:transform .14s linear,opacity .14s linear,background .14s,color .14s;
  }
  html.os-semi .sidebar .sidebar-link:hover{transform:translateX(calc(var(--os-arc-x,0px) + 4px))}

  /* The hot edge: a full-height strip that opens the semicircle from anywhere
     along the left edge, not just the peek. */
  html.os-semi .os-semi-edge{position:fixed;left:0;top:0;width:10px;height:100vh;z-index:205}
}
html:not(.os-semi) .os-semi-edge{display:none}

@media (prefers-reduced-motion:reduce){
  html.os-semi .sidebar.sidebar,html.os-semi .sidebar.sidebar > *{transition:none!important;filter:none}
}

/* ---- from emblem pill ---- */
/* top-bar category pills carry the sidebar's airbrushed emblems, small */
.sec-ico.sg-emb-sm{display:inline-flex;width:22px;height:22px;margin:-3px 0}
.sec-ico.sg-emb-sm svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px rgba(6,16,34,.25))}
/* ---- from semicircle glass ---- */
/* ── Semicircle rail: re-glazed as liquid glass ────────────────────────────── */
html.os-semi .sidebar.sidebar{
  --os-semi-body:radial-gradient(circle at 0 50%,rgba(236,241,247,.66) 0,rgba(226,233,242,.56) 72%,rgba(214,224,236,.5) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(1.8)!important;backdrop-filter:blur(24px) saturate(1.8)!important;
}
body.dark .sidebar.sidebar{
  --os-semi-body:radial-gradient(circle at 0 50%,rgba(22,40,68,.66) 0,rgba(15,28,49,.6) 72%,rgba(12,22,40,.55) 100%);
}
html.os-semi .sidebar .sidebar-link{border-radius:999px!important}
html.os-semi .sidebar .sidebar-link.active{background:var(--surface)!important;box-shadow:var(--sg-raise-xs),var(--sg-rim)!important}
html.os-semi:not(.sg-wheel) .sidebar .sidebar-link.active::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--sg-warm);box-shadow:0 0 8px var(--sg-warm)}
.sidebar-link{position:relative}
.sidebar-link.active,body.lin-v2 .sidebar-link.active{box-shadow:none}

/* ---- from swaps ---- */
/* ── Theme + language swaps (soft-fx.js → view transition) ───────────────── */
@property --sg-r{syntax:'<length>';inherits:true;initial-value:0px}
html.sg-vt-theme::view-transition-old(root),html.sg-vt-theme::view-transition-new(root),
html.sg-vt-lang::view-transition-old(root),html.sg-vt-lang::view-transition-new(root){mix-blend-mode:normal}
html.sg-vt-theme::view-transition-old(root){animation:sg-theme-old .75s cubic-bezier(.5,0,.3,1) both}
html.sg-vt-theme::view-transition-new(root){animation:sg-theme-wipe .75s cubic-bezier(.55,0,.25,1) both;
  -webkit-mask-image:radial-gradient(circle at var(--sg-tx,90%) var(--sg-ty,0),#000 calc(var(--sg-r) - 110px),transparent var(--sg-r));
          mask-image:radial-gradient(circle at var(--sg-tx,90%) var(--sg-ty,0),#000 calc(var(--sg-r) - 110px),transparent var(--sg-r))}
@keyframes sg-theme-wipe{from{--sg-r:0px}to{--sg-r:var(--sg-tr,2400px)}}
@keyframes sg-theme-old{to{filter:blur(5px)}}
html.sg-vt-lang::view-transition-old(root){animation:sg-lang-out .24s cubic-bezier(.4,0,1,1) both}
html.sg-vt-lang::view-transition-new(root){animation:sg-lang-in .5s var(--sg-ease) .08s both}
@keyframes sg-lang-out{to{opacity:0;filter:blur(9px);transform:translateY(-5px)}}
@keyframes sg-lang-in{from{opacity:0;filter:blur(11px);transform:translateY(7px)}}
/* during a swap the top bar is part of the page, not pinned above it */
html.sg-vt-theme body.lin-v2 .lin-topbar,html.sg-vt-lang body.lin-v2 .lin-topbar,
html.sg-leaving body.lin-v2 .lin-topbar,html.sg-catgo body.lin-v2 .lin-topbar{view-transition-name:none}
/* fallback where view transitions don't exist: an overlay does the same job */
.sg-swap{position:fixed;inset:0;z-index:2147483300;pointer-events:none}
.sg-swap-theme{clip-path:circle(0 at var(--sg-tx,90%) var(--sg-ty,0));
  transition:clip-path .44s cubic-bezier(.55,0,.25,1),opacity .45s var(--sg-ease)}
.sg-swap-theme.go{clip-path:circle(var(--sg-tr,2400px) at var(--sg-tx,90%) var(--sg-ty,0))}
.sg-swap-lang{background:var(--bg);opacity:0;transition:opacity .22s ease-in}
.sg-swap-lang.go{opacity:.92}
.sg-swap.done{opacity:0;transition:opacity .45s var(--sg-ease)}

/* the sky that rides the theme wipe (soft-fx.js sky()) — its own transition
   layer, so it animates live above the old/new snapshots */
@property --sg-rr{syntax:'<length>';inherits:false;initial-value:0px}
.sg-sky{position:fixed;inset:0;z-index:2147483400;pointer-events:none;overflow:hidden;contain:strict;view-transition-name:sg-sky}
::view-transition-group(sg-sky){animation:none;z-index:10}
::view-transition-new(sg-sky){animation:none}
.sg-sky > *{position:absolute;display:block}
.sg-sky-ring{inset:0;--rc:141,182,226;animation:sg-ring .75s cubic-bezier(.55,0,.25,1) both;
  background:radial-gradient(circle at var(--x) var(--y),transparent calc(var(--sg-rr) - 90px),rgba(var(--rc),.10) calc(var(--sg-rr) - 46px),rgba(var(--rc),.55) calc(var(--sg-rr) - 26px),rgba(var(--rc),.12) calc(var(--sg-rr) - 10px),transparent var(--sg-rr))}
.sg-sky-day .sg-sky-ring{--rc:255,205,120}
@keyframes sg-ring{from{--sg-rr:0px;opacity:1}85%{opacity:1}to{--sg-rr:var(--R);opacity:0}}
.sg-star{border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(196,218,255,.85);opacity:0;animation:sg-star 1.5s ease-out both}
@keyframes sg-star{0%{opacity:0;transform:scale(0)}22%{opacity:1;transform:scale(1.7)}42%{opacity:.45;transform:scale(1)}62%{opacity:1}100%{opacity:0;transform:scale(.8)}}
.sg-mote{border-radius:50%;background:#FFE3A3;box-shadow:0 0 8px 2px rgba(255,210,130,.7);opacity:0;animation:sg-mote 1.7s cubic-bezier(.3,.6,.3,1) both}
@keyframes sg-mote{0%{opacity:0;transform:translateY(8px) scale(.4)}25%{opacity:.95;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(calc(var(--dr) * -1)) scale(.6)}}
.sg-moon{left:var(--x);top:var(--y);width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  box-shadow:inset -14px 9px 0 0 #EAF1FB;filter:drop-shadow(0 0 16px rgba(170,200,240,.75));animation:sg-moon 1.9s cubic-bezier(.2,.7,.3,1) both}
@keyframes sg-moon{0%{transform:translate(0,0) scale(.2) rotate(-50deg);opacity:0}16%{opacity:1}
  70%{transform:translate(var(--mx),var(--my)) scale(1.35) rotate(8deg);opacity:1}100%{transform:translate(calc(var(--mx) * 1.2),calc(var(--my) * 1.2)) scale(1.2) rotate(14deg);opacity:0}}
.sg-sun{left:var(--x);top:var(--y);width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
  background:radial-gradient(circle,#FFF8E1 0 28%,#FFD27A 52%,rgba(255,190,90,0) 72%);animation:sg-sun 1.7s cubic-bezier(.2,.7,.3,1) both}
.sg-sun i{position:absolute;inset:-64px;border-radius:50%;display:block;
  background:repeating-conic-gradient(from 0deg,rgba(255,212,130,.5) 0 4deg,transparent 4deg 20deg);
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 68%);mask-image:radial-gradient(circle,#000 18%,transparent 68%);animation:sg-rays 1.7s linear both}
@keyframes sg-sun{0%{transform:scale(0);opacity:0}18%{opacity:1;transform:scale(1.3)}
  65%{transform:translate(var(--mx),var(--my)) scale(1.6);opacity:.95}100%{transform:translate(calc(var(--mx) * 1.2),calc(var(--my) * 1.2)) scale(1.4);opacity:0}}
@keyframes sg-rays{to{transform:rotate(80deg)}}
.sg-glare{inset:-20%;opacity:0;animation:sg-glare 1.3s .12s cubic-bezier(.3,.6,.3,1) both;
  background:linear-gradient(115deg,transparent 36%,rgba(255,232,190,.28) 47%,rgba(255,250,235,.42) 50%,rgba(255,232,190,.24) 53%,transparent 64%)}
@keyframes sg-glare{0%{transform:translateX(55%);opacity:0}20%{opacity:1}100%{transform:translateX(-55%);opacity:0}}
#darkToggle.sg-tg-spin{animation:sg-tg-spin .8s cubic-bezier(.3,1.4,.5,1)}
@keyframes sg-tg-spin{0%{transform:rotate(0) scale(1)}35%{transform:rotate(200deg) scale(.8)}100%{transform:rotate(360deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.sg-sky{display:none}}

/* ---- from catwash ---- */
/* ── Switching category: a wash in its ink, its emblem, its name ─────────────
   html.sg-catgo::before is the same wash painted before first paint (head
   script), so there's never a frame of the new page before the wash. */
html{--sg-wash-base:#E4E9F0;--sg-wash-ink:#1E4F8F;--sg-wash-text:#0E1E33}
html.os-dk{--sg-wash-base:#0B1628;--sg-wash-text:#EEF3F9}
html[data-sg-cat=knowledge],.sg-catwash[data-cat=knowledge]{--sg-wash-ink:#2A63AB}
html[data-sg-cat=infirmary],.sg-catwash[data-cat=infirmary]{--sg-wash-ink:#C23A43}
html[data-sg-cat=social],.sg-catwash[data-cat=social]{--sg-wash-ink:#4F8BD0}
html[data-sg-cat=dev],.sg-catwash[data-cat=dev]{--sg-wash-ink:#6A7788}
html.sg-catgo::before,.sg-catwash{
  background:
    radial-gradient(70% 60% at 50% 44%,color-mix(in srgb,var(--sg-wash-ink) 34%,var(--sg-wash-base)) 0%,transparent 70%),
    radial-gradient(120% 90% at 50% 110%,color-mix(in srgb,var(--sg-wash-ink) 16%,var(--sg-wash-base)),var(--sg-wash-base) 70%)}
html.sg-catgo::before{content:"";position:fixed;inset:0;z-index:2147482995}
.sg-catwash{position:fixed;inset:0;z-index:2147482995;display:flex;will-change:opacity,transform;align-items:center;justify-content:center;
  pointer-events:none;color:var(--sg-wash-text)}
.sg-cw-in{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.sg-cw-emb{width:132px;filter:drop-shadow(0 14px 24px color-mix(in srgb,var(--sg-wash-ink) 40%,transparent))}
.sg-cw-emb svg{width:100%;height:auto;display:block}
.sg-cw-name{font-family:var(--font-heading,inherit);font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.sg-cw-sub{font-size:.66rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.55}
/* leaving: the wash fogs in over the old page */
.sg-catwash.sg-cw-enter{animation:sg-cw-enter .34s cubic-bezier(.3,.6,.3,1) both}
.sg-catwash.sg-cw-enter .sg-cw-in{animation:sg-cw-rise .5s var(--sg-ease) .06s both}
@keyframes sg-cw-enter{from{opacity:0}}
@keyframes sg-cw-rise{from{opacity:0;transform:translateY(14px) scale(.9);filter:blur(8px)}}
/* arriving: the wash lifts off like mist while the page clears underneath */
.sg-catwash.sg-cw-out{animation:sg-cw-out .75s cubic-bezier(.4,0,.2,1) both}
.sg-catwash.sg-cw-out .sg-cw-in{animation:sg-cw-float .75s cubic-bezier(.4,0,.2,1) both}
@keyframes sg-cw-out{to{opacity:0;transform:scale(1.04)}}
@keyframes sg-cw-float{to{transform:translateY(-18px) scale(1.06);filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){
  html.sg-lf::after,html.sg-lf-hand::after{display:none}
  html.sg-catgo::before,.sg-catwash{display:none}
}

/* UI never underlines on hover — links styled as buttons, chips, tabs, cards, nav */
a[class]:hover,a[class]:focus-visible,button:hover,.sidebar-link:hover,.sec-pill:hover,.lin-tab:hover,
.qo-btn:hover,.btn-login:hover,.fork-card:hover,.fork-card *:hover,.ch-card:hover,.ch-card *:hover,
header a:hover,.lin-topbar a:hover,.landing-nav a:hover,.log-item:hover,.lin-study-item:hover{text-decoration:none!important}

/* ---- from wheel ---- */
/* ── Sidebar wheel (soft-fx.js adds html.sg-wheel and the per-row vars) ─────
   Rows are ribbons: a band pressed out of the glass that reaches the curve of
   the semicircle at its height (--sg-w) and ends in a folded twist, like the
   bands of the impossible shapes. Each category has its own ink. */
@media (hover:hover) and (min-width:901px){
  html.os-semi.sg-wheel .sidebar.sidebar{
    padding:calc(var(--os-semi-r) - 26px) 0!important;
    scroll-snap-type:y proximity;
    overscroll-behavior:contain;
  }
  html.os-semi.sg-wheel .sidebar .sidebar-group.part > .part-body{display:block!important;max-height:none!important;overflow:visible!important}
  html.os-semi.sg-wheel .sidebar .part-caret,
  html.os-semi.sg-wheel .sidebar .sg-emb ~ .part-icon{display:none!important}
  /* the same gap between every category */
  html.os-semi.sg-wheel .sidebar .sidebar-group.part{margin:0 0 30px!important;padding:0!important;border:0!important}
  html.os-semi.sg-wheel .sidebar .sidebar-group.part:last-child{margin-bottom:0!important}
  .sidebar .sg-cat-knowledge{--sg-ink:#1E4F8F;--sg-ink-2:#3A78C2;--sg-ink-d:#12294A}
  .sidebar .sg-cat-infirmary{--sg-ink:#B3323A;--sg-ink-2:#D4555C;--sg-ink-d:#7A1822}
  .sidebar .sg-cat-social{--sg-ink:#3A78C2;--sg-ink-2:#8DB6E2;--sg-ink-d:#1E4F8F}
  .sidebar .sg-cat-dev{--sg-ink:#5E6B7B;--sg-ink-2:#8593A5;--sg-ink-d:#3B4553}
  body.dark .sidebar .sg-cat-knowledge{--sg-ink:#3A78C2;--sg-ink-2:#8DB6E2}
  body.dark .sidebar .sg-cat-social{--sg-ink:#8DB6E2;--sg-ink-2:#C3DAF1;--sg-ink-d:#3A78C2}

  /* every wheel row: width from the arc, tilt + fade from the centre line */
  html.os-semi.sg-wheel .sidebar .sidebar-logo,
  html.os-semi.sg-wheel .sidebar .part-toggle,
  html.os-semi.sg-wheel .sidebar .sidebar-link,
  html.os-semi.sg-wheel .sidebar .sidebar-label{
    width:var(--sg-w,220px)!important;max-width:none!important;box-sizing:border-box;
    transform-origin:0 50%;
    transform:perspective(640px) rotateX(var(--sg-rx,0deg)) scale(var(--sg-s,1))!important;
    opacity:var(--sg-o,1)!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    scroll-snap-align:center;
    transition:background .25s,color .2s,box-shadow .25s!important;
  }
  /* category head: the emblem + name, no band */
  html.os-semi.sg-wheel .sidebar .part-toggle{
    display:flex!important;align-items:center;gap:.55rem;height:44px;padding:0 0 0 14px!important;
    background:none!important;box-shadow:none!important;cursor:default;
    font-size:.72rem!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sg-ink,var(--text))!important}
  body.dark .sidebar .part-toggle{color:var(--sg-ink-2,var(--text))!important}
  .sidebar .sg-emb{flex:none;width:34px;height:34px;display:block;filter:drop-shadow(0 3px 5px rgba(6,16,34,.25))}
  .sidebar .sg-emb svg{width:100%;height:100%;display:block}
  html.os-semi.sg-wheel .sidebar .sidebar-label{
    height:26px;display:flex!important;align-items:flex-end;padding:0 0 3px 22px!important;margin:6px 0 0!important;
    font-size:.64rem!important;letter-spacing:.16em;text-transform:uppercase;color:var(--text3)!important;background:none!important}

  /* the ribbon */
  html.os-semi.sg-wheel .sidebar .sidebar-link{
    position:relative;display:flex!important;align-items:center;height:36px;margin:6px 0!important;
    padding:0 34px 0 20px!important;border-radius:0!important;
    font-size:.84rem!important;color:var(--text)!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),
      linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--sg-ink,var(--accent)) 10%,var(--surface)) 22px)!important;
    clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);
  }
  body.dark.dark .sidebar .sidebar-link{background:
      linear-gradient(180deg,rgba(170,200,240,.10),rgba(170,200,240,0) 55%),
      linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--sg-ink,var(--accent)) 22%,var(--surface)) 22px)!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sub{padding-left:32px!important}
  /* the fold: the band twists away at its end, showing its other face */
  html.os-semi.sg-wheel .sidebar .sidebar-link::after{
    content:"";position:absolute;top:0;bottom:0;right:0;width:30px;pointer-events:none;
    background:linear-gradient(180deg,var(--sg-ink-2,var(--accent)),var(--sg-ink,var(--accent)));
    clip-path:polygon(62% 0,100% 0,54% 100%,16% 100%);
    opacity:.9;transition:width .3s var(--sg-ease),opacity .2s;
  }
  /* hover: the ribbon is pressed into the glass; the fold opens a little */
  html.os-semi.sg-wheel .sidebar .sidebar-link:hover{
    background:
      linear-gradient(180deg,rgba(6,16,34,.10),rgba(6,16,34,0) 60%),
      linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--sg-ink,var(--accent)) 20%,var(--surface)) 22px)!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link:hover::after{width:40px;opacity:1}
  /* the page you are on: the ribbon takes its category's ink */
  html.os-semi.sg-wheel .sidebar .sidebar-link.active,
  html.os-semi.sg-wheel .sidebar .sidebar-link.on{
    color:#fff!important;font-weight:700;
    background:
      linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),
      linear-gradient(90deg,transparent 0,var(--sg-ink,var(--accent)) 22px)!important;
    box-shadow:none!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.active::after,
  html.os-semi.sg-wheel .sidebar .sidebar-link.on::after{background:linear-gradient(180deg,var(--sg-ink-d,#0A1A2E),var(--sg-ink,var(--accent)));opacity:1}
  html.os-semi.sg-wheel .sidebar .sidebar-link.active::before{display:none}
  html.os-semi.sg-wheel .sidebar .sidebar-logo{height:44px;padding-left:14px!important}
  /* chapter sub-tabs hang off their parent ribbon: a thread runs down from it
     and each chapter is a slimmer, lighter ribbon tied onto the thread */
  html.os-semi.sg-wheel .sidebar .sb-subtabs{position:relative;margin:-2px 0 8px 22px;padding-left:0}
  html.os-semi.sg-wheel .sidebar .sb-subtabs::before{content:"";position:absolute;left:4px;top:0;bottom:16px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--sg-ink,var(--accent)),color-mix(in srgb,var(--sg-ink,var(--accent)) 25%,transparent))}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub{
    width:calc(var(--sg-w,220px) - 22px)!important;height:28px;margin:4px 0!important;padding:0 28px 0 22px!important;
    font-size:.76rem!important;color:var(--text2,var(--text))!important;
    background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--sg-ink,var(--accent)) 6%,var(--surface)) 18px)!important}
  body.dark.dark .sidebar .sidebar-link.sb-sub{background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--sg-ink,var(--accent)) 13%,var(--surface)) 18px)!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub::before{content:"";position:absolute;left:5px;top:50%;width:11px;height:2px;margin-top:-1px;border-radius:2px;
    background:color-mix(in srgb,var(--sg-ink,var(--accent)) 60%,transparent);display:block!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub::after{width:18px;opacity:.55}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub:hover{color:var(--text)!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub.on{color:#fff!important;
    background:linear-gradient(90deg,transparent 0,var(--sg-ink,var(--accent)) 18px)!important}
  html.os-semi.sg-wheel .sidebar .sidebar-link.sb-sub.on::before{background:var(--sg-ink,var(--accent));width:14px}
}
/* sub-tabs outside the wheel (phones, the drawer): an indented tree */
.sidebar .sb-subtabs{margin:.1rem 0 .35rem 1.6rem;border-left:2px solid color-mix(in srgb,var(--accent,#2A63AB) 35%,transparent);padding-left:.15rem}
.sidebar .sb-subtabs .sidebar-link.sb-sub{font-size:.78rem;padding-top:.32rem;padding-bottom:.32rem}
.sidebar .sidebar-group.part.open > .part-body{max-height:2000px}

/* ---- from mobile nav ---- */
/* ── Mobile sidebar (soft-fx.js mobileNav) ──────────────────────────────────
   Below 1025px the rail is an off-canvas drawer. A soft menu pill in the top
   bar opens it; the drawer glides in over a frosted scrim, its rows float in
   one after another, and a thumb can pull it out from the left edge or push
   it back. The inline toggle and draft.js's backdrop stay out of the way. */
.sg-menu,.sg-menu-x,.sg-scrim{display:none}
@media (max-width:1024px){
  html.sg-mnav .sg-menu{display:inline-flex;flex:0 0 36px;order:-3;width:36px;height:36px;margin:0 4px 0 0;padding:0;border:0;border-radius:12px;
    position:relative;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding-left:10px;cursor:pointer;
    background:var(--surface);color:var(--text);box-shadow:var(--sg-raise-xs),var(--sg-rim);-webkit-tap-highlight-color:transparent;
    transition:transform .3s var(--sg-ease),box-shadow .3s var(--sg-ease)}
  html.sg-mnav .sg-menu i{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transition:width .35s var(--sg-ease)}
  html.sg-mnav .sg-menu i:nth-child(2){width:10px}
  html.sg-mnav .sg-menu i:nth-child(3){width:13px}
  html.sg-mnav .sg-menu:hover i{width:16px}
  html.sg-mnav .sg-menu:active{transform:scale(.94);box-shadow:var(--sg-press-sm)}
  html.sg-mnav .sg-menu.sg-menu-float{position:fixed;top:10px;left:10px;z-index:1100}
  html.sg-mnav .sidebar.sidebar{z-index:1200!important;border-radius:0 26px 26px 0!important;
    transition:transform .5s cubic-bezier(.2,.85,.25,1),box-shadow .5s!important}
  html.sg-mnav .sidebar.sidebar.open{box-shadow:18px 0 48px rgba(8,14,24,.28)!important}
  html.sg-nav-drag .sidebar.sidebar{transition:none!important}
  html.sg-mnav .sidebar .sg-menu-x{display:block;position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;padding:0;border:0;border-radius:50%;cursor:pointer;
    background:var(--surface);box-shadow:var(--sg-raise-xs),var(--sg-rim);color:var(--text2,var(--text));-webkit-tap-highlight-color:transparent}
  html.sg-mnav .sidebar .sg-menu-x i{position:absolute;left:11px;top:17px;width:14px;height:2px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
  html.sg-mnav .sidebar .sg-menu-x i + i{transform:rotate(-45deg)}
  html.sg-mnav .sidebar .sg-menu-x:active{transform:scale(.92)}
  html.sg-mnav .sidebar.sidebar{padding-top:62px!important}
  html.sg-mnav .sg-scrim{display:block;position:fixed;inset:0;z-index:1190;opacity:0;pointer-events:none;
    background:rgba(8,14,24,.34);-webkit-backdrop-filter:blur(6px) saturate(1.15);backdrop-filter:blur(6px) saturate(1.15);transition:opacity .45s var(--sg-ease)}
  html.sg-nav-open .sg-scrim{opacity:1;pointer-events:auto}
  html.sg-nav-drag .sg-scrim{transition:none}
  html.sg-nav-open,html.sg-nav-open body{overflow:hidden!important}
  html.sg-mnav .sm-backdrop{display:none!important}
  html.sg-mnav .sidebar.sidebar{width:min(86vw,320px)!important}
  html.sg-mnav .sidebar .sidebar-link{white-space:normal!important;height:auto!important;min-height:36px;line-height:1.3!important;padding-top:6px!important;padding-bottom:6px!important}
  html.sg-mnav .sidebar .sidebar-label .vi-ico{margin-right:7px}
  /* the category pills, carried in from the hidden top-bar switcher */
  html.sg-mnav .sidebar .sg-dsec{position:absolute;top:12px;left:12px;right:60px;display:flex;gap:6px;z-index:2}
  html.sg-mnav .sidebar .sg-dsec .sec-pill{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    height:44px;padding:3px 2px 2px;border-radius:14px;text-decoration:none!important;color:var(--text2,var(--text));
    background:var(--surface);box-shadow:var(--sg-raise-xs),var(--sg-rim);transition:transform .25s var(--sg-ease),box-shadow .25s var(--sg-ease)}
  html.sg-mnav .sidebar .sg-dsec .sec-pill.active{box-shadow:var(--sg-press-sm);color:var(--accent,var(--text))}
  html.sg-mnav .sidebar .sg-dsec .sec-pill:active{transform:scale(.95)}
  html.sg-mnav .sidebar .sg-dsec .sec-ico{width:22px;height:22px;display:block;margin:0}
  html.sg-mnav .sidebar .sg-dsec .sec-ico svg{width:100%;height:100%;display:block}
  html.sg-mnav .sidebar .sg-dsec .sec-pill-label{display:block;font-size:.6rem;line-height:1.1;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  html.sg-mnav .sidebar.sidebar{padding-top:70px!important}
  html.sg-mnav .sidebar .sg-menu-x{top:16px}
  html.sg-nav-open .sidebar .sg-dsec .sec-pill{animation:sgNavIn .5s var(--sg-ease) backwards}
  html.sg-nav-open .sidebar .sg-dsec .sec-pill:nth-child(2){animation-delay:.05s}
  html.sg-nav-open .sidebar .sg-dsec .sec-pill:nth-child(3){animation-delay:.1s}
  html.sg-nav-open .sidebar :is(.sidebar-logo,.part-toggle,.sidebar-label,.sidebar-link){
    animation:sgNavIn .5s var(--sg-ease) backwards;animation-delay:calc(var(--sg-i,0) * 22ms + 90ms)}
}
@keyframes sgNavIn{from{opacity:0;transform:translateX(-22px);filter:blur(3px)}}
@media (prefers-reduced-motion:reduce){html.sg-nav-open .sidebar *{animation:none!important}}

/* ---- from reading bar ---- */
/* ── Reading bar, in detail (soft-fx.js readBar) ────────────────────────────
   Ticks for every section (current one pulses, read ones turn green; hover
   for the name, click to jump), and a chip over the bead with the section,
   the percentage and the time left. Only the ticks take the pointer. */
.sg-read-ticks{position:absolute;inset:0;pointer-events:none}
.sg-read-ticks i{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:auto;cursor:pointer;
  background:var(--surface);box-shadow:var(--sg-raise-xs),inset 0 0 0 1.5px color-mix(in srgb,var(--text3,#8593A5) 55%,transparent);
  transition:transform .3s var(--sg-ease),background .3s,box-shadow .3s}
.sg-read-ticks i::before{content:"";position:absolute;inset:-7px}                /* a bigger hit area than the dot */
.sg-read-ticks i.past{box-shadow:var(--sg-raise-xs),inset 0 0 0 1.5px var(--accent)}
.sg-read-ticks i.read{background:var(--green,#1F8A5B);box-shadow:0 0 8px color-mix(in srgb,var(--green,#1F8A5B) 60%,transparent)}
.sg-read-ticks i.cur{transform:scale(1.45);box-shadow:var(--sg-raise-xs),inset 0 0 0 2px var(--sg-warm,#E0626A);animation:sg-tick 1.8s ease-in-out infinite}
.sg-read-ticks i:hover{transform:scale(1.7)}
@keyframes sg-tick{50%{box-shadow:var(--sg-raise-xs),inset 0 0 0 2px var(--sg-warm,#E0626A),0 0 0 5px color-mix(in srgb,var(--sg-warm,#E0626A) 18%,transparent)}}
.sg-read-chip{position:absolute;top:14px;left:var(--cx,0%);transform:translate(-50%,-4px);display:flex;align-items:center;gap:.45rem;max-width:min(520px,80vw);
  padding:.32rem .7rem;border-radius:99px;font-size:.72rem;line-height:1.2;white-space:nowrap;color:var(--text2,var(--text));
  background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--sg-raise-xs),var(--sg-rim);
  opacity:0;pointer-events:none;transition:opacity .35s var(--sg-ease),transform .35s var(--sg-ease),left .12s linear}
.sg-read.talk .sg-read-chip{opacity:1;transform:translate(-50%,0)}
.sg-rc-sec{font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}
.sg-rc-t{overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:600;color:var(--text)}
.sg-rc-meta{font-variant-numeric:tabular-nums;color:var(--text3,var(--text2))}
.sg-read.end .sg-rc-meta{color:var(--green,#1F8A5B);font-weight:700}
.sg-read-tip{position:absolute;top:-30px;transform:translateX(-50%);padding:.25rem .6rem;border-radius:9px;font-size:.7rem;white-space:nowrap;color:#fff;background:rgba(14,30,51,.9);
  opacity:0;pointer-events:none;transition:opacity .2s}
.sg-read.tipping .sg-read-tip{opacity:1}
.sg-read.tipping .sg-read-chip{opacity:0}
@media (max-width:640px){.sg-read-ticks i{width:6px;height:6px;margin:-3px 0 0 -3px}.sg-read-chip{font-size:.66rem;max-width:88vw}.sg-rc-t{max-width:40vw}}
@media (prefers-reduced-motion:reduce){.sg-read-ticks i.cur{animation:none}}
.fc-progress span.done{background:var(--green,#3dd68c)}/* ---- from soft-glass reading bar base ---- */
html.sg-read-on #readingBar{display:none!important}
.sg-read{--p:0;position:fixed;left:18px;right:18px;top:6px;height:6px;border-radius:99px;z-index:501;pointer-events:none;
  background:var(--surface2);box-shadow:inset 1px 1px 3px var(--sg-lo),inset -1px -1px 2px var(--sg-hi);
  opacity:0;transform:translateY(-4px);transition:opacity .5s var(--sg-ease),transform .5s var(--sg-ease)}
.sg-read.on{opacity:1;transform:none}
.sg-read-fill{position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--sg-warm) 45%,var(--surface)),var(--sg-warm-2) 55%,var(--sg-warm));
  clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0 round 99px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.sg-read-bead{position:absolute;top:50%;left:calc(var(--p) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--surface);box-shadow:var(--sg-raise-xs),0 0 0 2px var(--sg-warm),0 0 12px color-mix(in srgb,var(--sg-warm) 60%,transparent);
  transition:box-shadow .4s var(--sg-ease),scale .4s var(--sg-spring)}
.sg-read-bead::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--sg-warm);opacity:.85}
.sg-read.end .sg-read-bead{scale:1.2;box-shadow:var(--sg-raise-xs),0 0 0 2px var(--green),0 0 14px color-mix(in srgb,var(--green) 70%,transparent)}
.sg-read.end .sg-read-bead::after{background:var(--green)}
@media (max-width:640px){.sg-read{left:12px;right:12px;height:5px}.sg-read-bead{width:12px;height:12px;margin:-6px 0 0 -6px}}
@media print{.sg-read{display:none}}