/* nurse.jelia.nyc — Wound Care Clinical Reference
   Mobile-first. Bedside-legible. Dark by default, light on request. */

:root{
  --bg:#0c1116; --bg2:#131a22; --card:#161f29; --line:#243141;
  --ink:#e8eef5; --ink2:#a6b6c8; --ink3:#7089a3;
  --accent:#2ee6a8; --accent2:#38bdf8; --warn:#fbbf24; --danger:#f87171;
  --strong:#34d399; --mod:#60a5fa; --weak:#fbbf24; --hype:#f87171;
  --r:14px; --mw:1180px;
  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --f-ser:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
:root[data-theme="light"]{
  /* two shades darker than the original near-white, so text stops glaring
     and cards separate from the page. Cards stay lighter than the page. */
  --bg:#c9d4e0; --bg2:#bac7d6; --card:#e6edf5; --line:#9db0c5;
  --ink:#0d1722; --ink2:#33465c; --ink3:#5a7590;
  --accent:#0d8f68; --accent2:#0369a1;
  --strong:#0f7a4f; --mod:#1d5fa8; --weak:#9a6400; --hype:#b3261e; --danger:#b3261e; --warn:#9a6400;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.62 var(--f-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- masthead ---------- */
.top{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.top-in{max-width:var(--mw);margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;gap:.75rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);min-width:0}
.mark{width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  background:linear-gradient(140deg,var(--accent),var(--accent2));
  display:grid;place-items:center;color:#05121a;font-weight:800;font-size:1rem}
.brand b{font-size:1.02rem;letter-spacing:-.2px;white-space:nowrap}
.brand span{display:block;font-size:.7rem;color:var(--ink3);letter-spacing:.09em;text-transform:uppercase}
.top-sp{flex:1}
.iconbtn{background:var(--bg2);border:1px solid var(--line);color:var(--ink2);
  border-radius:10px;padding:.45rem .6rem;font-size:.95rem;cursor:pointer;line-height:1}
.iconbtn:active{transform:scale(.94)}

/* ---------- search ---------- */
.searchwrap{max-width:var(--mw);margin:0 auto;padding:0 1rem .7rem}
.search{width:100%;padding:.7rem .9rem;border-radius:11px;border:1px solid var(--line);
  background:var(--bg2);color:var(--ink);font-size:1rem;font-family:inherit}
.search::placeholder{color:var(--ink3)}
.search:focus{outline:none;border-color:var(--accent2)}

/* ---------- section nav ---------- */
.nav{border-bottom:1px solid var(--line);background:var(--bg2)}
.nav-in{max-width:var(--mw);margin:0 auto;display:flex;gap:.4rem;overflow-x:auto;
  padding:.55rem 1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-in::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;padding:.4rem .75rem;border-radius:999px;font-size:.83rem;
  text-decoration:none;color:var(--ink2);border:1px solid var(--line);white-space:nowrap}
.nav a.on,.nav a:hover{background:var(--accent);color:#06131b;border-color:transparent;font-weight:600}

/* ---------- hero ---------- */
.hero{max-width:var(--mw);margin:0 auto;padding:1.6rem 1rem .4rem}
.hero h1{font:700 clamp(1.6rem,6vw,2.6rem)/1.12 var(--f-ser);margin:0 0 .5rem;letter-spacing:-.5px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{color:var(--ink2);margin:0 0 1rem;max-width:62ch;font-size:1.02rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:.6rem;margin:1rem 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.8rem}
.stat b{display:block;font:700 1.5rem/1 var(--f-sans);color:var(--accent)}
.stat span{font-size:.74rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}

/* ---------- disclaimer ---------- */
.disc{max-width:var(--mw);margin:0 auto 1.2rem;padding:0 1rem}
.disc div{background:color-mix(in srgb,var(--warn) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);
  border-left:4px solid var(--warn);border-radius:10px;padding:.8rem .95rem;font-size:.88rem;color:var(--ink2)}
.disc b{color:var(--ink)}

/* ---------- sections ---------- */
main{max-width:var(--mw);margin:0 auto;padding:0 1rem 4rem}
section{scroll-margin-top:120px;margin:0 0 2.4rem}
.sec-h{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .3rem;padding-top:1rem;flex-wrap:wrap}
.sec-h h2{font:700 clamp(1.25rem,4.4vw,1.7rem)/1.2 var(--f-ser);margin:0;letter-spacing:-.3px}
.sec-h .n{font-size:.72rem;color:var(--accent);font-weight:700;letter-spacing:.14em}
.sec-sub{color:var(--ink3);font-size:.9rem;margin:0 0 1rem;max-width:70ch}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem;margin:0 0 .85rem}
.card h3{margin:0 0 .5rem;font-size:1.04rem;letter-spacing:-.2px;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.card p{margin:0 0 .6rem;color:var(--ink2);font-size:.95rem}
.card p:last-child{margin-bottom:0}
.card ul{margin:.2rem 0 .6rem;padding-left:1.15rem;color:var(--ink2);font-size:.94rem}
.card li{margin:.28rem 0}
.card li strong,.card p strong{color:var(--ink)}

/* collapsible */
details.card>summary{cursor:pointer;list-style:none;font-weight:650;font-size:1.02rem;
  display:flex;align-items:center;gap:.55rem;color:var(--ink)}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:"+";margin-left:auto;color:var(--accent);font-size:1.3rem;line-height:1}
details.card[open]>summary::after{content:"–"}
details.card>summary+*{margin-top:.8rem}

/* ---------- badges ---------- */
.b{display:inline-block;padding:.13rem .5rem;border-radius:999px;font-size:.68rem;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.b-strong{background:color-mix(in srgb,var(--strong) 20%,transparent);color:var(--strong)}
.b-mod{background:color-mix(in srgb,var(--mod) 20%,transparent);color:var(--mod)}
.b-weak{background:color-mix(in srgb,var(--weak) 20%,transparent);color:var(--weak)}
.b-hype{background:color-mix(in srgb,var(--hype) 20%,transparent);color:var(--hype)}
.b-stop{background:color-mix(in srgb,var(--danger) 22%,transparent);color:var(--danger)}

/* ---------- stop box ---------- */
.stop{background:color-mix(in srgb,var(--danger) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 38%,transparent);
  border-left:4px solid var(--danger);border-radius:10px;padding:.85rem .95rem;margin:.7rem 0}
.stop b{color:var(--danger);display:block;margin-bottom:.3rem;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.07em}
.stop p,.stop li{color:var(--ink2);font-size:.93rem;margin:.25rem 0}

/* ---------- tables ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.6rem 0;
  border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.88rem}
th,td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg2);color:var(--ink);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0}
td{color:var(--ink2)}
tr:last-child td{border-bottom:none}
td strong{color:var(--ink)}
.scroll-hint{font-size:.74rem;color:var(--ink3);margin:-.35rem 0 .7rem}

/* ---------- quiz ---------- */
.quiz{background:linear-gradient(150deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);padding:1.1rem}
.qmeta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem}
.qq{font-size:1.06rem;font-weight:650;margin:.4rem 0 .9rem;line-height:1.42}
.opt{display:block;width:100%;text-align:left;background:var(--bg2);color:var(--ink);
  border:1px solid var(--line);border-radius:11px;padding:.75rem .9rem;margin:0 0 .5rem;
  font:inherit;font-size:.95rem;cursor:pointer;transition:.12s}
.opt:hover{border-color:var(--accent2)}
.opt.right{background:color-mix(in srgb,var(--strong) 18%,transparent);border-color:var(--strong)}
.opt.wrong{background:color-mix(in srgb,var(--danger) 15%,transparent);border-color:var(--danger)}
.opt:disabled{cursor:default}
.exp{background:var(--bg2);border-left:3px solid var(--accent);border-radius:8px;
  padding:.75rem .9rem;font-size:.9rem;color:var(--ink2);margin:.6rem 0 0}
.qbar{display:flex;gap:.6rem;align-items:center;margin-top:.9rem;flex-wrap:wrap}
.btn{background:var(--accent);color:#06131b;border:none;border-radius:10px;
  padding:.6rem 1.05rem;font:inherit;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink2);border:1px solid var(--line)}
.btn:active{transform:scale(.97)}
.score{margin-left:auto;font-size:.88rem;color:var(--ink3)}
.score b{color:var(--accent)}

/* ---------- misc ---------- */
.pill{display:inline-block;background:var(--bg2);border:1px solid var(--line);
  border-radius:999px;padding:.2rem .6rem;font-size:.75rem;color:var(--ink3);margin:0 .3rem .3rem 0}
.src{font-size:.78rem;color:var(--ink3);margin-top:.5rem;border-top:1px dashed var(--line);padding-top:.5rem}
.src a{color:var(--accent2);text-decoration:none}
.hidden{display:none !important}
.foot{border-top:1px solid var(--line);background:var(--bg2);margin-top:2rem}
.foot-in{max-width:var(--mw);margin:0 auto;padding:1.6rem 1rem;color:var(--ink3);font-size:.84rem}
.foot b{color:var(--ink2)}
.toplink{position:fixed;right:1rem;bottom:1rem;z-index:70;background:var(--accent);color:#06131b;
  border:none;border-radius:50%;width:46px;height:46px;font-size:1.15rem;cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.4);display:none}
.toplink.show{display:block}

@media(min-width:760px){
  body{font-size:16.5px}
  .card{padding:1.15rem 1.25rem}
  table{min-width:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- stat tiles as links ---------- */
a.stat{display:block;text-decoration:none;transition:.15s;position:relative}
a.stat::after{content:"›";position:absolute;top:.6rem;right:.75rem;color:var(--ink3);
  font-size:1.1rem;line-height:1;transition:.15s}
a.stat:hover,a.stat:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
a.stat:hover::after,a.stat:focus-visible::after{color:var(--accent);transform:translateX(3px)}
a.stat:active{transform:translateY(0)}

/* ---------- domain grid ---------- */
.domains{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:.55rem;margin:.2rem 0 1.4rem;scroll-margin-top:120px}
.domains a{display:block;text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;transition:.15s}
.domains a b{display:block;color:var(--ink);font-size:.92rem;letter-spacing:-.15px}
.domains a span{display:block;color:var(--ink3);font-size:.73rem;margin-top:.15rem;line-height:1.35}
.domains a:hover,.domains a:focus-visible{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--card));transform:translateY(-2px)}
.domains a:active{transform:translateY(0)}

/* ---------- mobile section menu ----------
   Two lessons combined: a wrapped menu eats the whole phone screen, but a
   horizontal swipe strip hides everything past the fold with no affordance.
   So on phones the nav is COLLAPSED by default and expands to show all. */
.navtoggle{display:none}
@media(max-width:759px){
  .navtoggle{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    background:var(--bg2);border:none;border-top:1px solid var(--line);
    color:var(--ink);font:inherit;font-weight:650;font-size:.9rem;
    padding:.7rem 1rem;cursor:pointer
  }
  .navtoggle i{font-style:normal;color:var(--accent);transition:transform .18s;font-size:1rem}
  .navtoggle[aria-expanded="true"] i{transform:rotate(180deg)}
  .nav-in{
    display:none;                /* collapsed by default — saves screen */
    flex-wrap:wrap;              /* when open, show EVERY section, nothing hidden */
    overflow-x:visible;
    gap:.4rem;padding:.2rem 1rem .8rem;
    max-height:52vh;overflow-y:auto;
  }
  .nav-in.open{display:flex}
  .nav a{font-size:.86rem;padding:.45rem .8rem}
}

/* ---------- nav group labels ---------- */
.navgroup{
  flex:0 0 auto;display:inline-flex;align-items:center;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);padding:0 .35rem 0 .55rem;white-space:nowrap;opacity:.85
}
.navgroup:not(:first-child){border-left:1px solid var(--line);margin-left:.3rem}
@media(max-width:759px){
  .navgroup{width:100%;padding:.5rem .1rem .15rem;border-left:none!important;margin-left:0!important;
    color:var(--accent);opacity:1}
}

/* ---------- search result counter ---------- */
.scount{margin-top:.45rem;font-size:.8rem;color:var(--accent);font-weight:650;letter-spacing:.01em}