/* ============================================================
   aqua.css — OpusJake Aqua-Indigo system
   Shared retro-Apple (Mac OS Aqua) primitives for all public
   surfaces. Linked as /aqua.css from app.html, /r/, /newsletter,
   /blog and the static generators. Page-level layout stays in
   each surface's own <style> block.
   ============================================================ */

/* ---- fonts ---- */
@font-face{font-family:'Pixeboy';src:url('/fonts/pixeboy.ttf') format('truetype');font-display:block}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-Medium.ttf') format('truetype');font-weight:500 600;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

/* ---- tokens ---- */
:root{
  --accent:#4b4aef; --accent-deep:#3a39d6; --accent-line:#2d2cc0;
  --bg:#fafaf7; --text:#1f1d3a; --text-soft:#4a4870; --muted:#8f8cb8;
  --hairline:rgba(80,78,120,.14);
  --font-ui:'Inter',-apple-system,'SF Pro Text',system-ui,sans-serif;
  /* Instrument Sans is the reference design's UI face. It dresses the menubar
     and the homepage hero; every other surface stays on Inter. */
  --font-ui-alt:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
  --font-pixel:'Pixeboy','Silkscreen',ui-monospace,monospace;
  --track-1:-.02em; --track-2:-.03em;
  --r-pill:999px; --r-win:8px; --r-card:12px; --r-field:9px; --r-screen:6px;
  --shadow-float:0 10px 24px rgba(31,29,58,.12);
  --shadow-win:0 10px 24px rgba(31,29,58,.14), 0 30px 60px -30px rgba(31,29,58,.25);
  --etch-light:0 1px 1px rgba(255,255,255,.8);
  --etch-dark:0 -1px 1px rgba(20,18,120,.45);
}

/* ---- gel buttons ---- */
.gel{appearance:none;cursor:pointer;text-decoration:none;position:relative;isolation:isolate;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 24px;border-radius:var(--r-pill);
  font:500 16px/1 var(--font-ui);letter-spacing:-.01em;
  border:1px solid transparent;box-shadow:var(--shadow-float);
  transition:opacity .12s ease,transform .12s ease}
.gel::after{content:"";position:absolute;left:6%;right:6%;top:3px;height:44%;border-radius:var(--r-pill);
  background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.05));pointer-events:none} /* gloss cap */
/* .gel sets display, which outranks the UA's [hidden]{display:none}. Without
   this, any .gel carrying the hidden attribute still paints — which is how the
   scale modal ended up showing back / next / submit all at once. */
.gel[hidden]{display:none}
.gel:hover{opacity:.88}
.gel:active{transform:scale(.97)}
.gel:disabled{opacity:.55;cursor:default;transform:none}
.gel-sm{height:36px;padding:0 16px;font-size:14.5px}
.gel-indigo{color:#fff;text-shadow:var(--etch-dark);border-color:var(--accent-line);
  background:linear-gradient(180deg,#9d9cff 0%,#6c6bf7 42%,var(--accent) 55%,var(--accent-deep) 100%)}
.gel-neutral{color:var(--text);text-shadow:var(--etch-light);border-color:#b7b4c9;
  background:linear-gradient(180deg,#fdfdff 0%,#efeef6 45%,#e2e0ec 55%,#eae8f3 100%)}
.gel-green{color:#fff;text-shadow:0 -1px 1px rgba(10,80,30,.4);border-color:#178c3e;
  background:linear-gradient(180deg,#8ce9a4 0%,#46cf6c 48%,#28c840 60%,#1ea349 100%)}
.gel-dark{color:#fff;text-shadow:0 -1px 1px rgba(0,0,0,.6);border-color:#000;
  background:linear-gradient(180deg,#6a6a78 0%,#3a3a44 50%,#1c1c22 100%)}

/* ---- aqua window ---- */
.aqua-win{position:relative;border-radius:var(--r-win);overflow:hidden;border:1px solid transparent;
  background:linear-gradient(#fdfdff,#fdfdff) padding-box,
    linear-gradient(180deg,rgba(31,29,58,.5),rgba(31,29,58,.16) 12%,rgba(31,29,58,.3)) border-box;
  box-shadow:var(--shadow-win)}
.aqua-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:linear-gradient(90deg,#d6d5dc,#f2f1f6 50%,#d6d5dc); /* brushed-metal sweep */
  border-bottom:1px solid rgba(31,29,58,.16);box-shadow:inset 0 1px 1px rgba(255,255,255,.85)}
.aqua-bar .t{flex:1;text-align:center;font:600 10.5px/1 var(--font-mono);letter-spacing:.14em;
  color:var(--text-soft);text-transform:lowercase;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin:0 10px;text-shadow:0 1px 1px rgba(255,255,255,.8)}
.aqua-lights{display:flex;gap:6px}
.aqua-lights span{width:12px;height:12px;border-radius:50%;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -2px 3px rgba(0,0,0,.25),0 1px 1px rgba(255,255,255,.7)}
.aqua-lights .l-r{background:radial-gradient(circle at 35% 30%,#ffb3ad,#ff5f57 60%,#d94540)}
.aqua-lights .l-y{background:radial-gradient(circle at 35% 30%,#ffe3a6,#febc2e 60%,#dfa11f)}
.aqua-lights .l-g{background:radial-gradient(circle at 35% 30%,#a9f7b8,#28c840 60%,#1f9e35)}
.aqua-caption{margin-top:10px;text-align:center;font:400 12px/1.4 var(--font-ui);
  color:rgba(31,29,58,.4);text-shadow:0 1px 1px rgba(255,255,255,.8)}

/* ---- glassy card ---- */
.aqua-card{border-radius:var(--r-card);border:1px solid rgba(80,78,120,.16);
  background:linear-gradient(180deg,#ffffff,#f4f3fa);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.4),
    0 10px 24px -14px rgba(31,29,58,.18);
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
a.aqua-card:hover,button.aqua-card:hover{border-color:var(--accent);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 12px 28px -12px rgba(75,74,239,.35)}
a.aqua-card:active,button.aqua-card:active{transform:scale(.985)}

/* ---- type ---- */
.eyebrow-mono{font:600 10px/1 var(--font-mono);letter-spacing:.28em;color:var(--accent);text-transform:uppercase}
.hl{font:500 clamp(24px,3.2vw,30px)/1.18 var(--font-ui);letter-spacing:var(--track-2);color:var(--text)}
.body-ui{font:400 15px/1.6 var(--font-ui);letter-spacing:var(--track-1);color:var(--text-soft)}
.link-accent{font:500 14px/1 var(--font-ui);letter-spacing:var(--track-1);color:var(--accent);text-decoration:none}
.link-accent:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- fields ---- */
.aqua-field{appearance:none;outline:none;width:100%;
  font:400 15px/1.4 var(--font-ui);letter-spacing:var(--track-1);color:var(--text);
  padding:10px 14px;border-radius:var(--r-field);background:#fff;border:1px solid rgba(80,78,120,.28);
  box-shadow:inset 0 2px 3px rgba(31,29,58,.08),0 1px 0 rgba(255,255,255,.8);
  transition:border-color .12s ease,box-shadow .12s ease}
.aqua-field:focus{border-color:var(--accent);
  box-shadow:inset 0 2px 3px rgba(31,29,58,.06),0 0 0 3.5px rgba(75,74,239,.28)} /* Aqua focus halo */

/* ---- status / faq ---- */
.status-mono{display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--font-mono);
  letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.status-mono .dot{width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#a9f7b8,#28c840 65%);box-shadow:0 0 6px #28c84088}
.aqua-faq details{border-radius:var(--r-card);border:1px solid rgba(80,78,120,.16);
  background:linear-gradient(180deg,#fff,#f6f5fb);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 6px 16px -12px rgba(31,29,58,.2)}
.aqua-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 18px;font:500 15px/1.35 var(--font-ui);letter-spacing:var(--track-1);color:var(--text)}
.aqua-faq summary::-webkit-details-marker{display:none}
.aqua-faq summary::after{content:"+";font:500 18px/1 var(--font-ui);color:var(--muted);transition:transform .12s ease}
.aqua-faq details[open] summary::after{content:"–";color:var(--accent)}
.aqua-faq .ans{padding:0 18px 16px;font:400 14px/1.6 var(--font-ui);letter-spacing:var(--track-1);color:var(--text-soft)}

/* ---- menubar ----
   Metrics are the design-shotgun variant E header verbatim: 52px tall, 18px
   gap, 24px side padding, Instrument Sans nav items at 14.5px/-.01em, neutral
   gel CTA. Position stays fixed (not sticky) because the homepage hero is a
   fixed scroll-scrub layer that the bar has to float over. */
#nav.menubar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:18px;
  height:52px;padding:0 24px;background:rgba(250,250,247,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(31,29,58,.09);font-family:var(--font-ui-alt);user-select:none}
.menubar .brand{font:700 16px/1 var(--font-pixel);letter-spacing:.06em;color:var(--text)}
.menubar .tabs{display:flex;gap:2px}
.menubar .tab{appearance:none;background:none;border:0;cursor:pointer;
  font:500 14.5px/1 var(--font-ui-alt);letter-spacing:-.01em;color:#6f6d8a;
  padding:8px 11px;border-radius:6px;text-transform:lowercase;transition:color .12s ease,background .12s ease}
.menubar .tab:hover{color:var(--text);background:rgba(31,29,58,.07)}
.menubar .tab:active{transform:scale(.97)}
.menubar .tab.is-active{color:var(--text);background:rgba(31,29,58,.07)}
.menubar .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.menubar .clock{font:500 13px/1 var(--font-ui-alt);font-variant-numeric:tabular-nums;color:#6f6d8a}
#nav.menubar .gel{font-family:var(--font-ui-alt)}
@media (max-width:640px){
  .menubar{gap:10px;padding:0 16px}
  .menubar .clock{display:none}
  /* Variant E drops the section links here, and the arithmetic backs it up:
     brand + three tabs + the CTA overrun a 360px viewport by 40px. The tabs
     stay in the DOM so the hero's "browse resources" button can still click
     one to scrub the page. */
  .menubar .tabs{display:none}
}