/* Navy theme, test. Loaded after the base styles on every page.
   The base tokens are remapped: --white is the page ground, --ink the text. */
:root{
  --white:#0a1730; --paper:#11244a; --ink:#f4f7fc; --muted:#a9b6cf;
  --blue:#ff5a3c; --red:#ff5a3c; --black:#071126; --navy:#0e1f42;
  --raise:#18305e; --line:rgba(244,247,252,.16); --coral-hi:#ff7a61;
  color-scheme:dark;
}
html,body{background:var(--white)}
body{margin:0}

/* buttons */
.btn{color:var(--white)}
.btn:hover{background:var(--coral-hi)}
.btn.ink{background:var(--ink);color:var(--white)}
.btn.ink:hover{background:#dbe3f2}
.hero .btn{animation:btnbeat 2.4s var(--ease) 2s infinite}
@keyframes btnbeat{0%,14%,100%{scale:1}5%{scale:1.03}9%{scale:.995}}

/* top bar */
header{background:rgba(10,23,48,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.mnav a{border-bottom-color:var(--line)}
.js .mnav:not([hidden]){border-color:var(--line)}

/* hero */
.hero,.page-hero{background:radial-gradient(90% 90% at 78% 40%,#1b3a73 0%,rgba(27,58,115,0) 62%),var(--white)}
.pulse .flat{stroke:rgba(244,247,252,.14)}
.pulse .spark{fill:none;stroke:#fff;stroke-width:7;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:90 1000;opacity:0;animation:spark 2.4s linear 1.6s infinite}
@keyframes spark{from{stroke-dashoffset:1090;opacity:.95}to{stroke-dashoffset:0;opacity:.95}}
@media (prefers-reduced-motion:reduce){.pulse .spark{display:none}}

/* chapters */
.defib{background:var(--navy);color:var(--ink)}
.branches{background:var(--paper);color:var(--ink)}
.process,.field.black{background:var(--black);color:var(--ink)}
.about{background:var(--white)}
.contact,.field.navy{background:var(--navy);color:var(--ink)}
.field.blue{background:var(--paper);color:var(--ink)}
footer{background:var(--black);color:var(--ink);border-top:1px solid var(--line)}
footer .mail:hover{color:var(--red)}

/* branch plate */
.tabs button,.tabs button:hover,.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button{color:var(--muted)}
.tabs button:hover,.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]{text-decoration-color:var(--red)}
.tabs button[aria-selected="true"] img{outline-color:var(--red)}
.cells a:first-child{background:var(--red);color:var(--white)}
.cells a:first-child:hover{background:var(--coral-hi)}
.cells a:last-child,.cells a:nth-child(2){background:var(--raise);color:var(--ink)}
.cells a:last-child:hover,.cells a:nth-child(2):hover{background:var(--ink);color:var(--white)}
.cells .lt{color:var(--ink)!important}
.seg button{border-color:var(--ink);color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.lvbox,.plate .shot{background:var(--white)}
.lvnote{color:var(--muted)}

/* process bar */
.stagebar .s1{background:var(--red);color:var(--white)}
.stagebar .s2{background:var(--raise);color:var(--ink)}
.stagebar .s3{background:var(--ink);color:var(--white)}
@media (max-width:860px){
  .stagetext .t1{background:var(--red);color:var(--white)}
  .stagetext .t2{background:var(--raise);color:var(--ink)}
  .stagetext .t3{background:var(--ink);color:var(--white)}
}

/* marked words */
.mk.b{background:var(--raise);color:var(--ink)}
.mk.r{background:var(--red);color:var(--white)}
.mk.k{background:var(--ink);color:var(--white)}

/* phone frame stays dark */
.phone{background:#050b1a;box-shadow:0 0 0 1px var(--line)}

/* tiles on sub pages */
.cellgrid .c1{background:var(--red);color:var(--white)}
.cellgrid .c2,.black .cellgrid .c2{background:var(--raise);color:var(--ink)}
.cellgrid .c3{background:var(--ink);color:var(--white)}
.cellgrid .c4{background:var(--paper);color:var(--ink)}
.cellgrid .c5{background:var(--navy);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.pains > div:nth-child(1){background:var(--raise);color:var(--ink)}
.pains > div:nth-child(2){background:var(--paper);color:var(--ink)}
.pains > div:nth-child(3){background:var(--red);color:var(--white)}
.pairs .pv{background:var(--white);color:var(--ink)}
.pairs .pn{background:var(--raise);color:var(--ink)}
.weak li,.weak li:last-child{border-color:var(--line)}

/* form */
form{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
form input,form textarea{background:var(--white);color:var(--ink);border:1px solid var(--line);transition:border-color .2s}
form input:focus,form textarea:focus{border-color:var(--red);outline:none}
form input::placeholder,form textarea::placeholder{color:var(--muted);opacity:1}

/* EKG monitor in the puls-check */
.monitor{position:relative;height:clamp(120px,15vw,210px);margin-bottom:clamp(40px,5vw,72px);overflow:hidden;background-color:var(--black);box-shadow:inset 0 0 0 1px var(--line);
  background-image:linear-gradient(rgba(244,247,252,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(244,247,252,.06) 1px,transparent 1px);background-size:28px 28px}
.monitor canvas{position:absolute;inset:0;width:100%;height:100%;display:block}