/* ============================================================
   Shared stylesheet for ABSN deep-dive study pages.
   One file for every NG page instead of 14 KB inlined per page.
   Jewel tones, background photo visible, ADHD-friendly spacing.
   ============================================================ */
:root{
  --amethyst:157,92,255; --sapphire:47,107,255; --emerald:18,184,134;
  --teal:0,194,199;      --topaz:255,194,51;    --ruby:255,59,107;
  --garnet:192,34,85;    --citrine:255,138,61;
  --line:rgba(255,255,255,.30);
  --ink:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.62 "Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
 color:var(--ink);background-color:#0b1020;
 background-image:radial-gradient(1100px 620px at 12% -5%,rgba(157,92,255,.34),transparent 62%),
   radial-gradient(900px 560px at 92% 8%,rgba(0,194,199,.24),transparent 60%),
   linear-gradient(180deg,#0b1020,#141a38 48%,#0a0f1f);
 background-attachment:fixed}
.wrap{max-width:1040px;margin:0 auto;padding:18px 15px 90px}

h1{font-size:clamp(1.6rem,6vw,2.3rem);line-height:1.12;margin:6px 0 4px;letter-spacing:-.02em}
.sub{font-size:1.02rem;color:#e9dcff;margin:0 0 18px;max-width:64ch}
.ngid{display:inline-block;font:900 .72rem ui-monospace,Consolas,monospace;
 background:rgba(0,0,0,.60);border:1px solid var(--line);border-radius:999px;
 padding:4px 11px;margin-bottom:8px;letter-spacing:.06em;color:#fff}

/* ---- sections ---- */
section{margin:0 0 16px;border-radius:18px;overflow:hidden;border:1px solid var(--line);
 box-shadow:0 8px 26px rgba(0,0,0,.36)}
section>h2{margin:0;padding:14px 17px;font-size:1.05rem;font-weight:900;letter-spacing:.02em;
 background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.42)),rgba(var(--j,157,92,255),.72);
 display:flex;gap:9px;align-items:center}
section>.inner{padding:15px 15px 18px;background:rgba(8,13,30,.72);color:#fff}
h3{font-size:1.0rem;margin:16px 0 8px;display:flex;gap:8px;align-items:center;line-height:1.35}
h3:first-child{margin-top:2px}

/* ---- cards ---- */
.card{--j:118,28,255;--ja:.92;background:rgba(var(--j),var(--ja));
 border:1px solid rgba(255,255,255,.28);border-left:5px solid rgba(255,255,255,.55);
 border-radius:15px;padding:13px 15px;margin:0 0 11px}
.card p{margin:0 0 8px;font-size:.95rem}
.card p:last-child{margin:0}
.card ul{margin:3px 0 6px;padding-left:19px}
.card li{margin:0 0 5px;font-size:.94rem;line-height:1.5}
.ruby{--j:200,0,49}     .sapphire{--j:2,75,255}   .garnet{--j:184,33,82}

/* Warm jewels render as bright panels, so they take the dark ink set. Cool jewels
   are deepened instead and keep white. Split by luminance: at one alpha with one
   ink the mid-tones cleared neither threshold, so the jewels moved, not just the ink. */
.emerald{--j:19,190,138}  .teal{--j:0,194,199}  .citrine{--j:255,138,61}
.topaz{--j:255,194,51}
.card.emerald,.card.teal,.card.citrine,.card.topaz{color:#141018;border-left-color:rgba(0,0,0,.42)}
:where(.card.emerald) b,:where(.card.teal) b,:where(.card.citrine) b,:where(.card.topaz) b,
:where(.card.emerald) strong,:where(.card.teal) strong,:where(.card.citrine) strong,:where(.card.topaz) strong{color:#000}
:where(.card.emerald) i,:where(.card.teal) i,:where(.card.citrine) i,:where(.card.topaz) i,
:where(.card.emerald) em,:where(.card.teal) em,:where(.card.citrine) em,:where(.card.topaz) em{color:#0b241c}
/* Links inside the dark jewel cards had no colour rule at all, so they fell back to the browser's #0000EE — near-invisible on sapphire and ruby (1.2:1). Gold reads at 6:1 or better on every dark card; the light cards below keep their dark ink. */
:where(section,.card) a{color:#ffd76a;text-decoration-thickness:2px;text-underline-offset:3px}
:where(section,.card) a:hover,:where(section,.card) a:focus-visible{color:#fff}
:where(.card.emerald) a,:where(.card.teal) a,:where(.card.citrine) a,:where(.card.topaz) a{color:#2f0d5c}

/* ---- tables ---- */
.tw{overflow-x:auto;margin:0 0 12px;border-radius:14px;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:440px;font-size:.92rem;background:rgba(0,0,0,.60);color:#fff}
th,td{padding:9px 11px;text-align:left;border-bottom:1px solid rgba(255,255,255,.15);vertical-align:top}
th{background:rgba(255,255,255,.13);font-weight:900;font-size:.81rem;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:none}
td b{color:#ffe9a8}
td.hot{background:rgba(255,59,107,.20)} td.cool{background:rgba(47,107,255,.20)}
td.good{background:rgba(18,184,134,.20)}

/* ---- flow ---- */
.flow{display:flex;flex-wrap:wrap;margin:0 0 12px}
.step{flex:1 1 130px;min-width:120px;background:rgba(0,0,0,.60);border:1px solid var(--line);
 border-radius:13px;padding:10px 11px;font-size:.86rem;line-height:1.42;position:relative;margin:0 15px 9px 0;color:#fff}
.step:last-child{margin-right:0}
.step::after{content:"\2192";position:absolute;right:-14px;top:50%;transform:translateY(-50%);
 font-size:1.1rem;font-weight:900;color:#ffd76a}
.step:last-child::after{content:""}
.step b{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:#ffd76a;margin-bottom:3px}

/* ---- scale ---- */
.scale{margin:0 0 12px}
.scale .lbl{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;font-weight:800;margin-bottom:5px}
.track{display:flex;height:26px;border-radius:9px;overflow:hidden;border:1px solid var(--line);
 font:800 .72rem "Segoe UI",system-ui,sans-serif}
.track span{display:flex;align-items:center;justify-content:center;padding:0 5px;text-align:center;
 text-shadow:0 1px 2px rgba(0,0,0,.65)}
.lo{background:rgba(47,107,255,.85)} .ok{background:rgba(18,184,134,.85)}
.hi{background:rgba(255,59,107,.99);color:#231a02} .warn{background:rgba(255,138,61,.85);color:#231a02}

/* ---- inline emphasis ---- */
mark{background:rgba(255,194,51,.92);color:#241a02;padding:1px 6px;border-radius:6px;font-weight:800}
.never{text-decoration:underline wavy rgba(255,59,107,.95);text-underline-offset:4px;font-weight:800}
.mono,code{font:800 .95em ui-monospace,Consolas,monospace;background:rgba(0,0,0,.75);
 padding:2px 7px;border-radius:7px;white-space:nowrap;color:#fff}
.big{display:block;font:900 clamp(1.45rem,5vw,1.95rem)/1.08 "Segoe UI",system-ui,sans-serif;
 margin:2px 0 5px;font-variant-numeric:tabular-nums}
.grid2{display:grid;grid-template-columns:1fr;gap:11px}
@media(min-width:760px){.grid2{grid-template-columns:1fr 1fr}.grid2>.card{margin-bottom:0}}

/* ---- source line ---- */
.src{font-size:.83rem;color:#cdbfe8;border-top:1px solid var(--line);margin-top:22px;padding-top:14px}
.src a{color:#ffd76a}
@media print{body{background:#fff;color:#000}section{break-inside:avoid}}

/* ============================================================
   LEGIBILITY LAYER  -  larger, wider, more spacing, more contrast
   ============================================================ */
body{font-family:Verdana,"Segoe UI",Tahoma,system-ui,sans-serif;
  font-size:18px;line-height:1.72;letter-spacing:.012em}
.wrap{max-width:1100px;padding:20px 17px 100px}

h1{font-size:clamp(1.9rem,6.5vw,2.7rem);line-height:1.18;margin:8px 0 8px}
.sub{font-size:1.14rem;line-height:1.7;margin:0 0 24px;max-width:60ch}
.ngid{font-size:.82rem;padding:6px 14px;letter-spacing:.08em}

section{margin:0 0 22px;border-radius:20px}
section>h2{font-size:1.3rem;padding:18px 22px;line-height:1.35;gap:11px}
section>.inner{padding:20px 20px 24px}
h3{font-size:1.24rem;line-height:1.4;margin:24px 0 12px}

.card{padding:19px 21px;margin:0 0 15px;border-left-width:7px;border-radius:17px;
  box-shadow:0 9px 26px rgba(0,0,0,.42)}
.card p{font-size:1.1rem;line-height:1.78;margin:0 0 12px}
.card li{font-size:1.08rem;line-height:1.72;margin:0 0 10px}
.card ul{padding-left:24px;margin:6px 0 10px}
.card{background:rgba(var(--j),.80)}
.topaz{background:rgba(255,194,51,.92);color:#1a1200}

table{font-size:1.06rem;min-width:520px;background:rgba(0,0,0,.72);color:#fff}
th{font-size:.98rem;padding:14px 16px;letter-spacing:.05em;background:rgba(255,255,255,.20)}
td{padding:14px 16px;line-height:1.62}

.step{font-size:1.02rem;line-height:1.6;padding:14px 15px;min-width:150px;
  background:rgba(0,0,0,.72);color:#fff}
.step b{font-size:.88rem;margin-bottom:5px}
.track{height:34px;font-size:.86rem}
.scale .lbl{font-size:1rem;margin-bottom:7px}

mark{padding:3px 8px;font-size:1.05em;line-height:1.9}
.mono,code{font-size:1.02em;padding:3px 9px}
.never{text-underline-offset:6px;text-decoration-thickness:2px}
b,strong{font-weight:800}
.big{font-size:clamp(2rem,6vw,2.7rem);line-height:1.1}
.src{font-size:.98rem;line-height:1.7;padding-top:18px;margin-top:30px}

#absnNav a{font-size:.95rem;padding:11px 16px}

@media (max-width:620px){
  body{font-size:17px}
  table{min-width:420px}
  .card{padding:16px 17px}
  section>h2{font-size:1.16rem;padding:15px 17px}
}

/* ============================================================
   MEASURE
   On a wide monitor these lines ran to ~96 characters. Past about
   85 the eye loses its place returning to the next line - that
   costs a fast reader speed and a struggling reader the line, so
   capping the measure helps both. Only text is constrained;
   tables, flows and scales keep their full width.
   ============================================================ */
.card p, .card li, .step, section > .inner > p{max-width:72ch}

/* the never-do rule is pale pink for a dark card; on a bright one it needs the dark
   form. This one keeps its specificity: .vnever is a leaf, not a container, so it
   has to beat .vbrief .vnever rather than lose to a nested panel. */
.card.topaz .never,.card.topaz .vnever,.vcard.topaz .never,.vcard.topaz .vnever,.vbrief .vcard.topaz .vnever,.vbrief .vcard.topaz .never,.card.teal .never,.card.teal .vnever,.vcard.teal .never,.vcard.teal .vnever,.vbrief .vcard.teal .vnever,.vbrief .vcard.teal .never,.card.citrine .never,.card.citrine .vnever,.vcard.citrine .never,.vcard.citrine .vnever,.vbrief .vcard.citrine .vnever,.vbrief .vcard.citrine .never,.card.emerald .never,.card.emerald .vnever,.vcard.emerald .never,.vcard.emerald .vnever,.vbrief .vcard.emerald .vnever,.vbrief .vcard.emerald .never{color:#4a0010;background:rgba(255,59,107,.98)}
section[style*="--topaz"] .card .never,section[style*="--topaz"] .card .vnever,section[style*="--teal"] .card .never,section[style*="--teal"] .card .vnever,section[style*="--citrine"] .card .never,section[style*="--citrine"] .card .vnever,section[style*="--emerald"] .card .never,section[style*="--emerald"] .card .vnever{color:#4a0010;background:rgba(255,59,107,.98)}

/* Nephrotic, Glomerulonephritis, Hyperaldosteronism: the words here are long
   and the screen may be narrow and magnified. Let them break rather than
   push the page sideways. */
h1,h2,h3,h4,h5,h6,figcaption,th,td,summary,label,.mttl,.ignm{overflow-wrap:break-word}