/* ABOM site theme — "Proofon" glass edition.
   Loaded AFTER each page's inline styles, so these rules win at equal
   specificity. One file re-skins all six pages: light glass gradient,
   DM Sans, coral highlight (#ff5a54), teal primary (#0891b2), mint
   accent (#00c896). Dark ink-teal is kept for code blocks, tables, the
   problem strip, and the footer as contrast anchors.
   Remove this <link> from a page to fall back to the deep-ocean theme. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

:root{
  /* palette remap — every page reads these tokens */
  --navy:#04303c;            /* deep ink-teal: code, tables, footer */
  --navy2:#075063;
  --teal:#077a96;            /* primary / links (AA on white + white-on-it) */
  --seafoam:#00c896;
  --mint:#00c896;            /* checkmarks, positive accents */
  --coral:#ff5a54;           /* highlight / CTA fills */
  --coral-hl:#f5443d;        /* large-text coral (AA-large on paper) */
  --coral-text:#c73a33;      /* small-text coral (AA on paper) */
  --ice:#d7edf3;             /* on-dark secondary text */
  --paper:#f3fafb;
  --card:#ffffff;
  --ink:#022932;
  --slate:#04566b;
  --line:#c9e7ee;
  --shadow:0 10px 30px rgba(4,80,96,.10);
  --shadow-sm:0 2px 10px rgba(4,80,96,.07);
}

/* gradient lives on html (the canvas background): it covers the full scroll
   height with no background-attachment:fixed, which breaks compositing under
   backdrop-filter and paints black in some Chrome capture paths */
html{background:linear-gradient(135deg,#f3fafb 0%,#e6faf5 55%,#fff3f3 100%);min-height:100%}
body{
  font-family:"DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:transparent;
  color:var(--ink);
}

/* --- nav: white glass, dark text ------------------------------------------ */
nav{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(8,145,178,.14);
}
nav .brand{color:var(--ink)}
.navlinks a{color:var(--slate)}
.navlinks a:hover{color:var(--ink)}
.navlinks a.active{color:var(--ink)}
nav .btn.ghost{background:rgba(255,255,255,.7);color:var(--ink);border:1px solid #abdae5}
nav .btn.ghost:hover{background:#ffffff;box-shadow:var(--shadow-sm)}
/* the shield mark: coral chip, white shield */
.brand svg rect{fill:var(--coral)}
.brand svg path{stroke:#ffffff}

/* --- hero: light, dark text, soft coral/mint glows ------------------------- */
header.hero, .hero{
  background:
    radial-gradient(55% 75% at 88% -12%, rgba(255,90,84,.12), transparent 62%),
    radial-gradient(48% 65% at 6% 112%, rgba(0,200,150,.14), transparent 65%);
  color:var(--ink);
}
.hero:after{display:none}
.hero h1, header.hero h1{color:var(--ink)}
.hero h1 .hl{color:var(--coral-hl)}
.hero p, .hero p.sub, header.hero p{color:var(--slate)}
.hero .eyebrow, header.hero .eyebrow{color:var(--coral-text)}
/* inline white <b> tags written for the dark hero */
.hero b[style], header.hero b[style]{color:var(--ink) !important}
/* .hero .chip specificity so this beats spec.html's scoped `.hero .chip`
   rule (which sets light-on-dark colors meant for the old dark hero) */
.chip, .hero .chip, header.hero .chip{background:rgba(255,255,255,.66);border:1px solid #cfe9ef;color:var(--slate)}
.chip b, .hero .chip b, header.hero .chip b{color:var(--coral-text)}
.install{background:var(--navy);border-color:rgba(4,48,60,.35)}

/* --- buttons: coral CTA ----------------------------------------------------- */
.btn{background:var(--coral);color:#26120f}
.btn:hover{box-shadow:0 8px 22px rgba(255,90,84,.35)}
.btn.dark{background:var(--teal);color:#ffffff}
.btn.dark:hover{box-shadow:0 6px 18px rgba(8,145,178,.35)}
.btn.ghost{background:rgba(255,255,255,.7);color:var(--ink);border:1px solid #abdae5}
.btn.ghost:hover{background:#ffffff;box-shadow:none}
.btn.subtle{background:#e9f7fa;color:var(--teal);border:1px solid var(--line)}
.btn.subtle:hover{background:#dcf1f6}

/* --- accents + tinted panels (old #E8F2F1 family) --------------------------- */
.eyebrow{color:var(--coral-text)}
.sec-tint{background:rgba(230,250,245,.65)}
.toc a{background:#e9f7fa;border-color:var(--line)}
.toc a:hover{background:#dcf1f6}
.acard .ic{background:#e9f7f4}
.maps .reg{background:#e9f7fa;border-color:var(--line)}
.mnum{background:#e9f7fa}
.what{background:#eafaf5;border-color:#cdeee2}
.usage{background:#eafaf5;border-color:#cdeee2}
.cta{background:#eafaf5;border-color:#cdeee2}

/* --- dark contrast anchors: code, dialogs, tables --------------------------- */
.code{border-color:#0b3844}
.code .bar{background:#06333f;border-bottom-color:#0b4552}
.out{border-color:#0b3844}
.out .bar{background:#06333f;border-bottom-color:#0b4552}
.modal .dialog{border-color:#0b3844}
.modal .mbar{background:#06333f;border-bottom-color:#0b4552}
.modal .mfoot{background:#06333f;border-top-color:#0b4552}

/* --- footer: deep ink-teal --------------------------------------------------- */
footer .muted, footer .dis, footer .disclaimer{color:#8fc0cd}

/* --- motion: floating gradient blobs (as on the draft), terminal, reveals --- */
.hero{position:relative;overflow:hidden}
.aurora{position:absolute;inset:0;pointer-events:none;z-index:0}
/* soft, blurred blobs that gently float — the draft's calm "eg-blob" effect:
   a small translate + slight scale on a 9s ease-in-out loop, staggered */
.aurora i{position:absolute;border-radius:50%;filter:blur(72px);opacity:.6;will-change:transform;
  animation:blob 9s ease-in-out infinite}
.aurora i:nth-child(1){width:480px;height:480px;right:-110px;top:-150px;background:rgba(255,90,84,.30)}
.aurora i:nth-child(2){width:420px;height:420px;left:-120px;bottom:-170px;background:rgba(0,200,150,.30);animation-delay:-3s}
.aurora i:nth-child(3){width:320px;height:320px;left:42%;top:28%;background:rgba(8,145,178,.18);animation-delay:-6s}
@keyframes blob{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(14px,-20px) scale(1.08)}
}

/* hero two-column: copy left, live terminal right */
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:center}
@media(max-width:1020px){.hero-grid{grid-template-columns:1fr;gap:30px}}

.term{background:var(--navy);border:1px solid #0b3844;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(4,48,60,.28)}
.term .tbar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#06333f;border-bottom:1px solid #0b4552}
.term .tbar i{width:11px;height:11px;border-radius:50%;display:block}
.term .tbar i.r{background:#ff5f57}.term .tbar i.y{background:#febc2e}.term .tbar i.g{background:#28c840}
.term .tbar span{margin-left:8px;color:#6f9aa8;font-size:12.5px;font-family:ui-monospace,monospace}
.term pre{margin:0;padding:16px 18px;min-height:238px;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.85;color:#cfe8ec;white-space:pre-wrap;word-break:break-word}
.term .tp{color:#7fe3c8}          /* typed prompt */
.term .ok{color:#4ee6b8;font-weight:700}
.term .deny{color:#ff8a76;font-weight:700}
.term .warn{color:#ffcf6b}
.term .dim{color:#6f9aa8}
.term .cur{display:inline-block;width:7px;height:13px;margin-left:2px;background:#7fe3c8;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* scroll reveals (class added by JS so no-JS stays fully visible) */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .aurora i,.term .cur{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}