/* =====================================================================
   AEQUA — chrome.css
   The shared shell for EVERY page: header, sub-nav, footer, skip link,
   colour-mode toggle, the Level instrument and page transitions.
   Every class is prefixed ae- and every token --ae-, so it can sit on
   top of a page with its own stylesheet (the Rules Navigator) without
   either one repainting the other.
   ===================================================================== */

/* ---------- tokens (light default; dark from OS or saved choice) ---------- */
:root{
  --ae-ground:#EDEEF0; --ae-surface:#F6F7F8; --ae-panel:#FFFFFF; --ae-glass:rgba(237,238,240,.84);
  --ae-ink:#101317; --ae-soft:#4F565F; --ae-faint:#5F666F;
  --ae-rule:#D3D7DC; --ae-hair:#E2E5E9; --ae-track:#DDE1E6;
  --ae-brass:#8A6A1F; --ae-brass-ink:#7C5D16; --ae-brass-tint:rgba(138,106,31,.10); --ae-brass-line:rgba(138,106,31,.55);
  --ae-on-brass:#FFFDF7; --ae-glow:rgba(138,106,31,.28);
  --ae-vial:linear-gradient(180deg,rgba(138,106,31,.10),rgba(255,255,255,.65) 38%,rgba(138,106,31,.06) 70%,rgba(138,106,31,.14)),#EEF0F2;
  --ae-settle:cubic-bezier(.18,1.04,.32,1); --ae-calm:cubic-bezier(.22,.8,.24,1);
  --ae-sans:"Chivo","Helvetica Neue",Arial,sans-serif;
  --ae-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ae-max:1200px; --ae-pad:clamp(20px,4vw,40px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]){
    --ae-ground:#0D0F12; --ae-surface:#15181C; --ae-panel:#111418; --ae-glass:rgba(13,15,18,.8);
    --ae-ink:#EDF0F3; --ae-soft:#A3ABB5; --ae-faint:#8D96A2;
    --ae-rule:#2B3139; --ae-hair:#1C2026; --ae-track:#22272E;
    --ae-brass:#D0A64F; --ae-brass-ink:#DDB868; --ae-brass-tint:rgba(208,166,79,.12); --ae-brass-line:rgba(208,166,79,.6);
    --ae-on-brass:#14100A; --ae-glow:rgba(208,166,79,.35);
    --ae-vial:linear-gradient(180deg,rgba(208,166,79,.08),rgba(255,255,255,.06) 38%,rgba(208,166,79,.05) 70%,rgba(208,166,79,.12)),#0A0C0F;
  }
}
:root[data-mode="dark"]{
  --ae-ground:#0D0F12; --ae-surface:#15181C; --ae-panel:#111418; --ae-glass:rgba(13,15,18,.8);
  --ae-ink:#EDF0F3; --ae-soft:#A3ABB5; --ae-faint:#8D96A2;
  --ae-rule:#2B3139; --ae-hair:#1C2026; --ae-track:#22272E;
  --ae-brass:#D0A64F; --ae-brass-ink:#DDB868; --ae-brass-tint:rgba(208,166,79,.12); --ae-brass-line:rgba(208,166,79,.6);
  --ae-on-brass:#14100A; --ae-glow:rgba(208,166,79,.35);
  --ae-vial:linear-gradient(180deg,rgba(208,166,79,.08),rgba(255,255,255,.06) 38%,rgba(208,166,79,.05) 70%,rgba(208,166,79,.12)),#0A0C0F;
}

/* ---------- skip link ---------- */
.ae-skip{position:fixed;top:12px;left:-9999px;z-index:300;background:var(--ae-ink);color:var(--ae-ground);padding:10px 16px;border-radius:4px;font:600 15px/1.2 var(--ae-sans);text-decoration:none;}
.ae-skip:focus,.ae-skip:focus-visible{left:12px;}

/* ---------- header ---------- */
.ae-head{position:sticky;top:0;z-index:60;background:var(--ae-glass);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--ae-hair);font-family:var(--ae-sans);view-transition-name:ae-head;}
@media (prefers-reduced-transparency:reduce){.ae-head{background:var(--ae-ground);}}
.ae-head-in{max-width:var(--ae-max);margin:0 auto;padding:12px var(--ae-pad);display:flex;align-items:center;gap:20px;min-height:64px;}
.ae-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ae-ink);text-decoration:none;font-weight:800;font-size:18px;letter-spacing:-.02em;view-transition-name:ae-brand;}
.ae-brand:hover{text-decoration:none;}
.ae-mark{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ae-brass);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--ae-brass-ink);line-height:1;transition:transform .7s var(--ae-settle),box-shadow .4s var(--ae-calm);}
.ae-brand:hover .ae-mark{transform:rotate(-9deg);box-shadow:0 0 0 4px var(--ae-brass-tint);}
.ae-nav{display:flex;align-items:center;gap:4px;margin-left:auto;}
.ae-nav a{color:var(--ae-soft);text-decoration:none;font-size:15px;font-weight:600;padding:8px 12px;border-radius:6px;position:relative;}
.ae-nav a:hover{color:var(--ae-ink);background:var(--ae-brass-tint);text-decoration:none;}
.ae-nav a[aria-current="page"]{color:var(--ae-ink);}
.ae-nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1.5px;background:var(--ae-brass);}
.ae-modes{display:inline-flex;border:1px solid var(--ae-rule);border-radius:6px;padding:2px;margin-left:8px;}
.ae-modes button{appearance:none;border:0;background:transparent;color:var(--ae-soft);font:600 13px/1 var(--ae-sans);padding:7px 10px;border-radius:4px;cursor:pointer;min-height:28px;}
.ae-modes button[aria-pressed="true"]{background:var(--ae-surface);color:var(--ae-ink);box-shadow:0 0 0 1px var(--ae-rule);}
.ae-cta{display:inline-flex;align-items:center;gap:8px;margin-left:8px;min-height:40px;padding:9px 16px;border-radius:6px;background:var(--ae-brass);color:var(--ae-on-brass);font:700 15px/1.2 var(--ae-sans);text-decoration:none;transition:background-color .25s var(--ae-calm),transform .35s var(--ae-settle);}
.ae-cta:hover{background:var(--ae-brass-ink);text-decoration:none;transform:translateY(-1px);}
.ae-menu{display:none;appearance:none;background:transparent;border:1px solid var(--ae-rule);color:var(--ae-ink);border-radius:6px;font:600 15px/1 var(--ae-sans);padding:10px 14px;min-height:44px;cursor:pointer;margin-left:auto;}
.ae-head :focus-visible,.ae-foot :focus-visible,.ae-sub :focus-visible{outline:2px solid var(--ae-brass-ink);outline-offset:3px;}
@media (max-width:980px){
  .ae-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--ae-surface);border-bottom:1px solid var(--ae-rule);padding:8px var(--ae-pad) 16px;}
  .ae-nav.open{display:flex;}
  .ae-nav a{padding:14px 4px;border-bottom:1px solid var(--ae-hair);border-radius:0;font-size:17px;}
  .ae-nav a[aria-current="page"]::after{display:none;}
  .ae-nav .ae-modes{margin:14px 0 0;align-self:flex-start;}
  .ae-menu{display:inline-flex;}
}
@media (max-width:420px){.ae-cta{display:none;}}
html:not(.js) .ae-nav{position:static;display:flex;flex-wrap:wrap;border:0;padding:0;background:none;}
html:not(.js) .ae-menu{display:none;}

/* ---------- sub-nav (a page's own sections, under the header) ---------- */
.ae-sub{position:sticky;top:64px;z-index:55;background:var(--ae-glass);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--ae-hair);font-family:var(--ae-sans);}
.ae-sub-in{max-width:var(--ae-max);margin:0 auto;padding:0 var(--ae-pad);display:flex;align-items:center;gap:6px;min-height:46px;overflow-x:auto;scrollbar-width:none;}
.ae-sub-in::-webkit-scrollbar{display:none;}
.ae-sub-title{font:600 12px/1 var(--ae-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ae-faint);white-space:nowrap;margin-right:10px;display:inline-flex;align-items:center;gap:10px;}
.ae-sub-title::before{content:"";width:16px;height:1.5px;background:var(--ae-brass);}
.ae-sub a{font-size:14px;font-weight:600;color:var(--ae-soft);text-decoration:none;padding:7px 10px;border-radius:6px;white-space:nowrap;}
.ae-sub a:hover{color:var(--ae-ink);background:var(--ae-brass-tint);}
.ae-sub a.on{color:var(--ae-ink);box-shadow:inset 0 -1.5px 0 var(--ae-brass);border-radius:0;}

/* ---------- scroll-linked datum line (fx-scroll; CSS scroll timelines) ---------- */
.ae-progress{display:none;position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--ae-brass);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    html.fx-scroll .ae-progress{display:block;animation:ae-progress linear both;animation-timeline:scroll(root block);}
  }
}
@keyframes ae-progress{to{transform:scaleX(1);}}

/* ---------- footer ---------- */
.ae-foot{border-top:1px solid var(--ae-rule);padding:40px 0 48px;font:400 14.5px/1.6 var(--ae-sans);color:var(--ae-soft);background:var(--ae-ground);}
.ae-foot-grid{max-width:var(--ae-max);margin:0 auto;padding:0 var(--ae-pad);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 48px;}
.ae-foot p{margin:12px 0 0;}
.ae-foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:flex-end;align-content:start;}
.ae-foot-links a{color:var(--ae-soft);text-decoration:none;font-weight:600;}
.ae-foot-links a:hover{color:var(--ae-ink);text-decoration:underline;}
.ae-foot-legal{grid-column:1/-1;border-top:1px solid var(--ae-hair);padding-top:20px;font-size:13.5px;color:var(--ae-faint);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;}
@media (max-width:760px){.ae-foot-grid{grid-template-columns:minmax(0,1fr);}.ae-foot-links{justify-content:flex-start;}}

/* ---------- the Level instrument ---------- */
.ae-level{--deg:0;--x:0px;display:flex;align-items:center;gap:18px;font-family:var(--ae-mono);color:var(--ae-faint);user-select:none;}
.ae-level-k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.ae-level-body{flex:1;min-width:0;transform:rotate(calc(var(--deg) * .22deg));transform-origin:50% 50%;will-change:transform;}
.ae-level-vial{position:relative;height:26px;isolation:isolate;border-radius:999px;background:var(--ae-vial);border:1px solid var(--ae-rule);box-shadow:inset 0 2px 6px rgba(0,0,0,.18),inset 0 -1px 0 rgba(255,255,255,.25);overflow:hidden;}
.ae-level-vial::before,.ae-level-vial::after{content:"";position:absolute;top:5px;bottom:5px;width:1.5px;background:var(--ae-brass);opacity:.9;z-index:2;}
.ae-level-vial::before{left:calc(50% - 46px);} .ae-level-vial::after{left:calc(50% + 44.5px);}
.ae-level-bubble{position:absolute;top:5px;left:calc(50% - 38px);width:76px;height:14px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--ae-brass) 70%,#fff),var(--ae-brass) 60%);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 18px var(--ae-glow);transform:translateX(var(--x));will-change:transform;z-index:1;}
@supports not (background:color-mix(in srgb,red,blue)){.ae-level-bubble{background:var(--ae-brass);}}
.ae-level-bubble::after{content:"";position:absolute;left:12px;right:28px;top:2px;height:3px;border-radius:999px;background:rgba(255,255,255,.55);}
.ae-level-ticks{height:10px;margin-top:6px;background:repeating-linear-gradient(90deg,var(--ae-rule) 0 1px,transparent 1px 12px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);position:relative;}
.ae-level-ticks::after{content:"";position:absolute;left:calc(50% - .75px);top:-2px;width:1.5px;height:14px;background:var(--ae-brass);}
.ae-level-read{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:92px;}
.ae-level-deg{font-size:22px;font-weight:600;color:var(--ae-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1;}
.ae-level-state{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ae-faint);transition:color .4s var(--ae-calm);}
.ae-level.is-level .ae-level-deg{color:var(--ae-brass-ink);}
.ae-level.is-level .ae-level-state{color:var(--ae-brass-ink);}
.ae-level.is-level .ae-level-bubble{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 26px var(--ae-glow),0 0 0 6px var(--ae-brass-tint);}
.ae-level--lg .ae-level-vial{height:34px;} .ae-level--lg .ae-level-bubble{top:7px;height:18px;width:96px;left:calc(50% - 48px);}
.ae-level--lg .ae-level-vial::before{left:calc(50% - 56px);} .ae-level--lg .ae-level-vial::after{left:calc(50% + 54.5px);}
.ae-level--lg .ae-level-deg{font-size:28px;}
@media (max-width:560px){.ae-level{gap:12px}.ae-level-k{display:none}.ae-level-read{min-width:72px}.ae-level-deg{font-size:18px}}

/* glass: a highlight along the top and darker end-caps, like a real vial */
.ae-level-vial > .ae-level-bubble ~ i{display:none;}
.ae-level-body{position:relative;}
.ae-level-vial{background-clip:padding-box;}
.ae-level-body::before{content:"";position:absolute;left:14px;right:14px;top:3px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);z-index:3;pointer-events:none;opacity:.8;}
.ae-level-vial{box-shadow:inset 10px 0 12px -10px rgba(0,0,0,.35),inset -10px 0 12px -10px rgba(0,0,0,.35),inset 0 2px 6px rgba(0,0,0,.16),inset 0 -1px 0 rgba(255,255,255,.25);}
/* reaching level: one brass pulse */
@media (prefers-reduced-motion:no-preference){
  .ae-level.lock .ae-level-bubble{animation:ae-lock .9s var(--ae-calm);}
  .ae-level.lock .ae-level-deg{animation:ae-lock-t .9s var(--ae-calm);}
}
@keyframes ae-lock{0%{box-shadow:0 0 0 0 var(--ae-glow),0 0 18px var(--ae-glow);}60%{box-shadow:0 0 0 10px rgba(0,0,0,0),0 0 30px var(--ae-glow);}100%{box-shadow:0 0 0 6px var(--ae-brass-tint),0 0 26px var(--ae-glow);}}
@keyframes ae-lock-t{0%{transform:scale(1.08);}100%{transform:none;}}

/* mini level docked in the header (fx-dock) */
.ae-mini{display:none;}
html.fx-dock .ae-mini{display:block;width:170px;margin-left:18px;opacity:0;transform:translateY(-4px);transition:opacity .45s var(--ae-calm),transform .6s var(--ae-settle);pointer-events:none;}
html.fx-dock.ae-docked .ae-mini{opacity:1;transform:none;}
.ae-level--mini{gap:10px;}
.ae-level--mini .ae-level-vial{height:14px;}
.ae-level--mini .ae-level-bubble{top:3px;height:6px;width:30px;left:calc(50% - 15px);box-shadow:0 0 8px var(--ae-glow);}
.ae-level--mini .ae-level-bubble::after{display:none;}
.ae-level--mini .ae-level-vial::before{left:calc(50% - 19px);top:2px;bottom:2px;width:1px;} .ae-level--mini .ae-level-vial::after{left:calc(50% + 18px);top:2px;bottom:2px;width:1px;}
.ae-level--mini .ae-level-body::before{display:none;}
.ae-level--mini .ae-level-read{min-width:44px;}
.ae-level--mini .ae-level-deg{font-size:12px;}
.ae-level--mini .ae-level-body{transform:rotate(calc(var(--deg) * .5deg));}
@media (max-width:1100px){html.fx-dock .ae-mini{width:120px;margin-left:12px;}}
@media (max-width:560px){html.fx-dock .ae-mini{display:none;}}

/* ---------- page transitions (cross-document View Transitions) ---------- */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:ae-vt-out .22s var(--ae-calm) both;}
::view-transition-new(root){animation:ae-vt-in .38s var(--ae-settle) both;}
@keyframes ae-vt-out{to{opacity:0;transform:translateY(-6px);}}
@keyframes ae-vt-in{from{opacity:0;transform:translateY(10px);}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none;}}

/* ---------- effects lab panel (localhost only; see fx.js) ---------- */
.ae-lab-btn{position:fixed;left:16px;bottom:16px;z-index:400;appearance:none;border:1px solid var(--ae-rule);background:var(--ae-panel);color:var(--ae-ink);font:600 13px/1 var(--ae-sans);padding:10px 14px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.18);cursor:pointer;display:inline-flex;gap:8px;align-items:center;}
.ae-lab-btn::before{content:"";width:14px;height:1.5px;background:var(--ae-brass);}
.ae-lab{position:fixed;left:16px;bottom:64px;z-index:400;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 100px);overflow:auto;background:var(--ae-panel);color:var(--ae-ink);border:1px solid var(--ae-rule);border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);font:400 14px/1.45 var(--ae-sans);padding:16px;}
.ae-lab[hidden]{display:none;}
.ae-lab h2{font:800 17px/1.2 var(--ae-sans);letter-spacing:-.01em;margin:0 0 4px;color:var(--ae-ink);}
.ae-lab p.ae-lab-note{margin:0 0 12px;color:var(--ae-soft);font-size:13px;}
.ae-lab label{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--ae-hair);cursor:pointer;}
.ae-lab input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ae-brass);}
.ae-lab b{display:block;font-weight:700;}
.ae-lab small{display:block;color:var(--ae-soft);font-size:12.5px;}
.ae-lab small i{font-style:normal;color:var(--ae-brass-ink);font-weight:600;}
.ae-lab-row{display:flex;gap:8px;margin-top:12px;}
.ae-lab-row button{appearance:none;border:1px solid var(--ae-rule);background:var(--ae-surface);color:var(--ae-ink);font:600 13px/1 var(--ae-sans);padding:9px 12px;border-radius:6px;cursor:pointer;}