/* LJ-252 (Lee t122u): bottom section nav + pull-cord theme switch.
   Copied from codetestr.co.uk/apple.html (.page-nav, .pull-cord rules incl. the later
   override layers), adapted to leej.uk tokens. Position changes requested by Lee:
   nav centred at the bottom; cord hangs 32px from the right edge at every size. */

/* ===== Bottom section nav ===== */
.page-nav{position:fixed;z-index:1050;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(11,13,20,.58);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 40px rgba(0,0,0,.35);
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .2s ease}
.page-nav .icon-button{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:var(--ink);text-decoration:none;cursor:pointer;
  transition:color .2s ease,background-color .2s ease,transform .2s ease}
.page-nav .icon-button svg{width:18px;height:18px;display:block}
.page-nav .icon-button:active{transform:scale(.92)}
.page-nav .icon-button:focus-visible,.page-nav-label:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.page-nav .icon-button[aria-disabled="true"]{opacity:.38;pointer-events:none}
.page-nav-label{max-width:110px;padding-inline:7px;overflow:hidden;color:rgba(255,255,255,.78);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;border-radius:8px}
[data-theme="light"] .page-nav{border-color:rgba(17,18,24,.08);background:rgba(255,255,255,.72);box-shadow:inset 0 1px rgba(255,255,255,.9),0 12px 40px rgba(30,28,50,.1)}
[data-theme="light"] .page-nav .icon-button{background:rgba(17,18,24,.05)}
[data-theme="light"] .page-nav-label{color:var(--mut)}
/* adaptive tone from the colour behind (apple.html "Adaptive section nav") */
html body .page-nav[data-tone="dark"]{border-color:rgba(255,255,255,.18);background:rgba(14,15,19,.58);box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 40px rgba(0,0,0,.35)}
html body .page-nav[data-tone="dark"] .icon-button{background:rgba(255,255,255,.1);color:#fff}
html body .page-nav[data-tone="dark"] .icon-button:hover{background:rgba(255,255,255,.2)}
html body .page-nav[data-tone="dark"] .page-nav-label{color:rgba(255,255,255,.86)}
html body .page-nav[data-tone="light"]{border-color:rgba(17,18,24,.14);background:rgba(255,255,255,.74);box-shadow:inset 0 1px rgba(255,255,255,.9),0 12px 40px rgba(30,28,50,.12)}
html body .page-nav[data-tone="light"] .icon-button{background:rgba(17,18,24,.07);color:#111218}
html body .page-nav[data-tone="light"] .icon-button:hover{background:rgba(17,18,24,.14)}
html body .page-nav[data-tone="light"] .page-nav-label{color:#34363d}
@media (max-width:760px){.page-nav{bottom:max(12px,env(safe-area-inset-bottom))}.page-nav-label{max-width:96px}}
/* keep page content clear of the nav; lift the chat button above it on phones */
body.has-page-nav{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
@media (max-width:560px){body.has-page-nav .fab{bottom:calc(76px + env(safe-area-inset-bottom))}body.has-page-nav .fab-panel{bottom:calc(140px + env(safe-area-inset-bottom))}}

/* ===== Pull cord theme switch ===== */
:root{--cord-mount:#8d919c;--cord-line:#d4d5da;--cord-pill:#2b2e36;--cord-pill-border:#9a9eaa;--cord-grip:#b4b8c2}
[data-theme="light"]{--cord-mount:#5f636d;--cord-line:#3a3d45;--cord-pill:#ffffff;--cord-pill-border:#5f636d;--cord-grip:#5f636d}
/* Box is 240px wide, the cord hangs at x=200 and the 22px pill spans x=189..211, so the
   pill's right edge sits 29px inside the box. right:3px puts that edge 32px from the
   viewport edge. max() only moves it if a landscape notch inset is wider than 32px. */
.pull-cord{position:fixed;z-index:1001;top:68px;right:calc(max(32px,env(safe-area-inset-right)) - 29px);width:240px;height:300px;transition:opacity 200ms ease;pointer-events:none;user-select:none;-webkit-user-select:none}
.pull-cord-mount{position:absolute;top:0;left:200px;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%)}
.pull-cord-mount i:first-child{display:block;width:20px;height:6px;border-radius:0 0 2px 2px;background:var(--cord-mount)}
.pull-cord-mount i:last-child{display:block;width:8px;height:4px;margin-top:-.5px;border-radius:0 0 999px 999px;background:var(--cord-mount)}
.pull-cord svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--cord-line)}
.pull-cord.is-hidden{opacity:0}
.pull-cord.is-hidden .pull-cord-handle{pointer-events:none}
.pull-cord-handle{position:absolute;top:62px;left:200px;margin-left:-25px;padding:12px 14px 16px;border:0;background:none;cursor:grab;pointer-events:auto;touch-action:none;transform-origin:50% 12px;outline:none}
.pull-cord-handle:active{cursor:grabbing}
.pull-cord-pill{position:relative;width:22px;height:60px;display:block;border:1.5px solid var(--cord-pill-border);border-radius:999px;background:var(--cord-pill);box-shadow:0 6px 16px rgba(0,0,0,.28);transition:background 300ms ease,border-color 300ms ease}
[data-theme="light"] .pull-cord-pill{box-shadow:0 6px 16px rgba(30,28,50,.16)}
.pull-cord-handle:focus-visible .pull-cord-pill{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--b)}
.pull-cord-grip{position:absolute;inset:17px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.pull-cord-grip i{display:block;width:11px;height:1.5px;border-radius:999px;background:var(--cord-grip);transition:background 300ms ease}
.pull-cord-shine{position:absolute;top:6px;bottom:6px;left:3px;width:1.5px;border-radius:999px;background:rgba(255,255,255,.22)}
[data-theme="light"] .pull-cord-shine{background:transparent}
.pull-cord-tip{position:absolute;top:22px;right:44px;display:flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid #e5e5e5;border-radius:999px;background:#fff;color:#0a0a0a;font-size:10px;font-weight:500;letter-spacing:.03em;white-space:nowrap;opacity:0;transform:translateX(-10px) scale(.9);transition:opacity 180ms cubic-bezier(.25,1,.5,1),transform 180ms cubic-bezier(.25,1,.5,1);pointer-events:none}
.pull-cord-tip small{font-size:9px;opacity:.6}
.pull-cord.is-hover:not(.is-dragging) .pull-cord-tip,.pull-cord-handle:focus-visible .pull-cord-tip{opacity:1;transform:none}
[data-theme="light"] .pull-cord-tip{border-color:#404040;background:#171717;color:#fff}
@media (prefers-reduced-motion:reduce){.page-nav,.page-nav .icon-button,.pull-cord,.pull-cord-pill,.pull-cord-tip{transition:none}}
@media print{.page-nav,.pull-cord{display:none!important}}