/* The corner menu — Satyartha's selected 13A (day) / 13B (night), 2026-10-04. Revised on
   his phone review 2026-10-06: bottom-RIGHT for right thumbs, no visible words, no backdrop,
   four circles equally spaced on a quarter circle over a softly blurred page.
   (Ask, Library, Book, Account.)
   Loaded after library-design.css and the inline styles, and every rule is scoped to
   #corner-menu or #jbtn, so these win over the older menu rules without editing them.
   Local colours only: nothing here touches the approved ambient palette or the CALM block.

   Geometry: the fan's origin is the launcher's centre. --x/--y are each circle's centre
   from that origin at full size; --k scales the whole fan on narrow or short screens.
   Motion: transitions, not keyframes, so a close that interrupts an opening reverses
   from wherever it is instead of jumping. nav.js adds .corner-in one frame after unhiding. */

#corner-menu,#jbtn{
  --k:1;--d:56px;
  --veil:rgba(16,11,7,.22);
  --label:#EFE3D5;--glyph:#F6E9DA;--ring:rgba(240,214,186,.2);
  --circle-shadow:0 5px 16px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08);
  --c-ask:#5E4A3D;--c-library:#86603F;--c-journal:#95584A;--c-account:#A87A70;
  --launch:#B9492F;--launch-ring:#8E3420;--launch-ink:#FCEDE0;
  --open-ease:cubic-bezier(.22,.9,.3,1);--close-ease:cubic-bezier(.4,0,.7,1);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme=dark]) #corner-menu,:root:not([data-theme=dark]) #jbtn{
    --veil:rgba(250,246,238,.24);
    --label:#2F241B;--glyph:#4A3326;--ring:rgba(90,60,40,.2);
    --circle-shadow:0 5px 14px rgba(96,62,38,.16),inset 0 1px 0 rgba(255,255,255,.45);
    --c-ask:#FBF3E8;--c-library:#EFC08E;--c-journal:#D3876F;--c-account:#E7AEA0;
    --launch:#B3472F;--launch-ring:#8E3420;--launch-ink:#FDF1E6;
  }
}
:root[data-theme=light] #corner-menu,:root[data-theme=light] #jbtn{
  --veil:rgba(250,246,238,.24);
  --label:#2F241B;--glyph:#4A3326;--ring:rgba(90,60,40,.2);
  --circle-shadow:0 5px 14px rgba(96,62,38,.16),inset 0 1px 0 rgba(255,255,255,.45);
  --c-ask:#FBF3E8;--c-library:#EFC08E;--c-journal:#D3876F;--c-account:#E7AEA0;
  --launch:#B3472F;--launch-ring:#8E3420;--launch-ink:#FDF1E6;
}
/* Narrow phones and short (landscape) screens keep the same arrangement, a little smaller. */
@media (max-width:360px){#corner-menu,#jbtn{--k:.88;--d:52px}}
@media (max-width:300px),(max-height:520px){#corner-menu,#jbtn{--k:.78;--d:46px}}

/* ---- the launcher: a small floating circle; × on terracotta while open ---- */
#jbtn.corner-launcher{left:auto;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));
  width:48px;height:48px;padding:0;border:0;background:transparent!important;box-shadow:none!important;
  display:grid;place-items:center;transform:none}
#jbtn.corner-launcher[hidden]{display:none}
#jbtn .corner-mark{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--card);color:var(--accent);border:1px solid var(--accent-border);box-shadow:0 3px 15px rgba(0,0,0,.14);
  font-size:21px;line-height:1;opacity:1;transform:none;
  transition:width .36s var(--open-ease),height .36s var(--open-ease),background-color .36s ease,
    border-color .36s ease,color .36s ease,box-shadow .36s ease,opacity .36s ease}
#jbtn .corner-mark::after{content:none}
#jbtn .corner-glyph,#jbtn .corner-x{grid-area:1/1;display:block;transition:opacity .3s ease,transform .36s var(--open-ease)}
/* The standard three-line menu mark (Satyartha chose it 2026-10-06 from three rounds of
   options, design/_mocks/menu-launcher-options-3.html #1; ✦ read as Gemini, four dots as odd). */
#jbtn .corner-glyph{width:22px;height:22px}
#jbtn .corner-x{width:25px;height:25px;opacity:0;transform:rotate(-90deg) scale(.6)}
/* Reading an answer or a chapter: a quieter mark, the same 48px touch area. */
#jbtn.corner-launcher:active .corner-mark{transform:scale(.92)}
body.corner-open #jbtn .corner-mark{width:calc(var(--d) + 4px);height:calc(var(--d) + 4px);font-size:21px;opacity:1;background:var(--launch);
  border-color:var(--launch-ring);color:var(--launch-ink);box-shadow:0 6px 18px rgba(80,24,10,.32)}
body.corner-open #jbtn .corner-glyph{opacity:0;transform:rotate(90deg) scale(.6)}
body.corner-open #jbtn .corner-x{opacity:1;transform:none}
#jbtn.corner-launcher:focus-visible{outline:none}
#jbtn.corner-launcher:focus-visible .corner-mark{outline:2px solid var(--accent);outline-offset:4px}

/* ---- the veil: the page softens slightly; the menu above it stays crisp ----
   The blur lives on a full-screen ::before rather than on #corner-menu itself, so the menu
   never becomes a backdrop root for anything layered inside it later. */
#corner-menu{position:fixed;inset:0;z-index:81;animation:none;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;overscroll-behavior:contain;touch-action:none}
#corner-menu::before{content:'';position:absolute;inset:0;background:transparent;pointer-events:none;
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
  transition:background-color .22s var(--close-ease),backdrop-filter .22s var(--close-ease),-webkit-backdrop-filter .22s var(--close-ease)}
#corner-menu[hidden]{display:none}
#corner-menu.corner-in::before{background:var(--veil);-webkit-backdrop-filter:blur(2.4px);backdrop-filter:blur(2.4px);
  transition-duration:.42s;transition-timing-function:ease}
#corner-menu:not(.corner-in){pointer-events:none}
/* Pause-reading sits directly above the launcher, both under the right thumb (Satyartha,
   2026-10-06). Centred on the launcher's 40px axis, 12px above its 48px touch area. The open
   fan's nearest circle starts 147px up, so the two never meet. */
#listen-float.listen-float{left:auto;right:calc(17px + env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom))}

/* ---- the fan: its origin is the launcher's centre ---- */
#corner-menu .corner-fan{position:absolute;left:auto;right:calc(40px + env(safe-area-inset-right));bottom:calc(40px + env(safe-area-inset-bottom));
  width:0;height:0;color:var(--label);font:400 16px/1.3 ui-serif,Georgia,"Times New Roman",serif}
/* No backdrop behind the circles any more (2026-10-06): with no words to pad, the circles
   float directly over the softly blurred page. library-design.css still carries the first
   menu's backdrop rule, so it is switched off here explicitly. */
#corner-menu .corner-fan::before{content:none;display:none}

/* ---- the four destinations ---- */
/* --x is measured LEFTWARD from the launcher's centre now that the fan opens to the left. */
#corner-menu .corner-destination{position:absolute;left:auto;right:calc(var(--x) * var(--k));bottom:calc(var(--y) * var(--k));
  width:var(--d);height:var(--d);margin:0 calc(var(--d) / -2) calc(var(--d) / -2) 0;padding:0;
  display:grid;place-items:center;border-radius:50%;border:1px solid var(--ring);background:var(--circle);color:var(--glyph);
  box-shadow:var(--circle-shadow);cursor:pointer;touch-action:manipulation;animation:none;filter:none;
  opacity:0;transform:translate(calc(var(--x) * var(--k)),calc(var(--y) * var(--k))) scale(.4);
  transition:transform .2s var(--close-ease),opacity .18s var(--close-ease);transition-delay:var(--out)}
#corner-menu.corner-in .corner-destination{opacity:1;transform:none;
  transition:transform .38s var(--open-ease),opacity .26s ease;transition-delay:var(--in)}
/* Equally spaced on one quarter circle, radius 135px around the launcher: 90°, 60°, 30°, 0°
   (Satyartha, 2026-10-06: no words, so the circles can sit evenly). Neighbours are 70px
   apart centre to centre, a 14px gap between 56px circles. */
#corner-menu .corner-destination[data-corner=ask]{--x:0px;--y:135px;--circle:var(--c-ask);--in:0s;--out:.03s}
#corner-menu .corner-destination[data-corner=library]{--x:67.5px;--y:116.9px;--circle:var(--c-library);--in:.025s;--out:.02s}
#corner-menu .corner-destination[data-corner=journal]{--x:116.9px;--y:67.5px;--circle:var(--c-journal);--in:.05s;--out:.01s}
#corner-menu .corner-destination[data-corner=account]{--x:135px;--y:0px;--circle:var(--c-account);--in:.075s;--out:0s}
#corner-menu .corner-symbol{display:block;width:calc(var(--d) * .46);height:calc(var(--d) * .46);margin:0;font-size:0}
#corner-menu .corner-destination:active{filter:brightness(1.06)}
#corner-menu .corner-destination:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* No visible words (Satyartha, 2026-10-06: the icons explain themselves; onboarding will
   name them). The label stays in the button for screen readers, drawn nowhere. */
#corner-menu .corner-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  #jbtn .corner-mark,#jbtn .corner-mark > *{transition:none}
  #corner-menu::before,#corner-menu.corner-in::before{transition:background-color .12s linear}
  #corner-menu .corner-destination,#corner-menu.corner-in .corner-destination{transform:none;transition:opacity .12s linear;transition-delay:0s}
}