/* ============================================================
   DeepWaterLabs — unified stylesheet
   Single source of truth for both the home page and research
   articles. Page-specific rules are scoped under .home / .article
   so element selectors (section, h1, h2, .card …) never collide.
   ============================================================ */

/* ---- design tokens (brand palette = the logo colours) ---- */
:root{
  --bg:#0a0f17; --bg2:#0d1320; --panel:#121a28; --panel2:#18222f;
  --ink:#eaf1f9; --muted:#93a3ba; --line:#223044;
  --accent:#37b6e9; --accent2:#39e0c8;
  --green:#3ddc91; --amber:#f7c948; --red:#f4737b;
  /* research dossier semantic tokens */
  --apex:#3ddc91; --ghl:#37b6e9; --hydros:#f7c948; --redsea:#f4737b; --diy:#b78bf5;
  /* layout */
  --maxw:1120px; --header-h:59px;
}

/* ---- base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:22px;padding-right:22px}

/* ============================================================
   SITE CHROME — header, footer, buttons (shared by every page)
   ============================================================ */
header.site{position:sticky;top:0;z-index:20;background:rgba(10,15,23,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{max-width:var(--maxw);margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.brand .mark{display:block;width:30px;height:30px;flex:0 0 auto;margin-right:11px}
.brand b{color:var(--accent2)}
.nav .links{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nav .links a{color:var(--muted);font-size:14px;padding:7px 12px;border-radius:8px;border:1px solid transparent}
.nav .links a:hover{color:var(--ink);background:var(--panel);border-color:var(--line)}
.nav .links a.current{color:var(--ink);background:var(--panel);border-color:var(--line)}
.nav .links .soon{color:var(--muted);font-size:14px;padding:7px 12px;opacity:.55;cursor:default}
.nav .links .soon .badge{font-size:9px;vertical-align:super;margin-left:4px;color:var(--accent);letter-spacing:.05em}

/* language switcher */
.langsw{display:flex;gap:4px;align-items:center;margin-left:6px}
.langsw a{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--muted);padding:5px 8px;border-radius:7px;border:1px solid transparent}
.langsw a:hover{color:var(--ink);border-color:var(--line)}
.langsw a.active{color:var(--ink);background:var(--panel);border-color:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:11px;font-weight:600;font-size:15px;border:1px solid transparent;transition:.15s}
.btn.primary{background:linear-gradient(100deg,var(--accent),#2f9fd6);color:#04222e;box-shadow:0 6px 24px rgba(55,182,233,.25)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--panel);border-color:#2e4561}

/* footer */
footer.site{border-top:1px solid var(--line);background:var(--bg2);padding:38px 0 50px;margin-top:30px}
footer.site .foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
footer.site .foot .muted{color:var(--muted);font-size:13px;max-width:46ch}
footer.site .foot a{color:var(--muted);font-size:14px;display:block;padding:3px 0}
footer.site .foot a:hover{color:var(--ink)}
footer.site .foot a.soon{opacity:.55;cursor:default}
footer.site .brand{margin-bottom:10px}
footer.site .disc{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);color:#65748b;font-size:12px}

/* ============================================================
   HOME PAGE  (scoped .home)
   ============================================================ */
.home .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(1100px 460px at 75% -10%, rgba(55,182,233,.16), transparent 60%),
             radial-gradient(900px 420px at 10% 0%, rgba(57,224,200,.10), transparent 55%),
             linear-gradient(180deg,var(--bg2),var(--bg))}
.home .hero .wrap{padding:74px 22px 60px;position:relative}
/* decorative brand illustration filling the right side on wide screens */
@media(min-width:1024px){
  .home .hero .wrap{
    background:url('/assets/img/hero.svg') no-repeat;
    background-position:right -20px center;
    background-size:460px auto;
  }
}
.home .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:rgba(55,182,233,.08);border:1px solid rgba(55,182,233,.25);padding:5px 12px;border-radius:20px}
.home h1{font-size:46px;line-height:1.08;margin:20px 0 16px;letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.home h1 .grad{background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.home .lede{font-size:19px;color:var(--muted);max-width:60ch;margin:0 0 28px}
.home .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.home .stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:40px;color:var(--muted);font-size:13.5px}
.home .stats b{display:block;color:var(--ink);font-size:23px;font-weight:700;letter-spacing:-.01em}
.home section{padding-top:64px;padding-bottom:64px}
.home .kicker{color:var(--accent2);font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.home h2{font-size:28px;margin:8px 0 6px;letter-spacing:-.01em}
.home .sub{color:var(--muted);max-width:62ch}
.home .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
@media(max-width:880px){.home .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.home .grid{grid-template-columns:1fr}}
.home .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;position:relative}
.home .card .ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(55,182,233,.1);border:1px solid rgba(55,182,233,.2);margin-bottom:12px;font-size:18px}
.home .card h3{font-size:16px;margin:0 0 6px}
.home .card p{font-size:13.5px;color:var(--muted);margin:0}
.home .tag{position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:6px;text-transform:uppercase}
.home .tag.live{color:var(--green);background:rgba(61,220,145,.1);border:1px solid rgba(61,220,145,.3)}
.home .tag.soon{color:var(--amber);background:rgba(247,201,72,.08);border:1px solid rgba(247,201,72,.25)}
.home .feat{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:0;overflow:hidden;display:grid;grid-template-columns:1.3fr 1fr}
@media(max-width:820px){.home .feat{grid-template-columns:1fr}}
.home .feat .body{padding:34px}
.home .feat .label{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.home .feat h3{font-size:26px;margin:10px 0 12px;line-height:1.2;letter-spacing:-.01em}
.home .feat p{color:var(--muted);margin:0 0 18px}
.home .chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}
.home .chip{font-size:12px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);padding:4px 10px;border-radius:20px}
.home .feat .side{background:
    radial-gradient(420px 300px at 70% 20%, rgba(57,224,200,.14), transparent 60%),
    linear-gradient(160deg,#0e1a26,#0a121c);border-left:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;padding:24px}
@media(max-width:820px){.home .feat .side{border-left:0;border-top:1px solid var(--line);min-height:160px}}
.home .depthcard{width:100%;max-width:280px;border:1px solid var(--line);border-radius:12px;background:rgba(10,16,24,.6);padding:16px;font-size:12px;color:var(--muted)}
.home .depthcard .row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:6px 0;border-bottom:1px solid var(--line)}
.home .depthcard .row:last-child{border-bottom:0}
.home .depthcard .row b{color:var(--ink);font-weight:600;text-align:right;white-space:nowrap}
.home .dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.home .method{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
@media(max-width:880px){.home .method{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.home .method{grid-template-columns:1fr}}
.home .mstep{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--panel)}
.home .mstep .n{font-size:12px;color:var(--accent);font-weight:700}
.home .mstep h4{margin:6px 0 5px;font-size:15px}
.home .mstep p{margin:0;font-size:13px;color:var(--muted)}

/* ============================================================
   RESEARCH ARTICLE  (scoped .article + article chrome)
   ============================================================ */
.article{padding-bottom:90px}
.article-hero{padding:54px 0 26px;border-bottom:1px solid var(--line)}
.article-hero .kicker{color:var(--accent);font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px}
.article-hero h1{font-size:33px;line-height:1.18;margin:0 0 14px;letter-spacing:-.01em}
.article-hero .sub{color:var(--muted);font-size:16.5px;max-width:840px}
.article-hero .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.article-hero .meta span{background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-size:12px;padding:4px 11px;border-radius:20px}

/* secondary sticky table-of-contents — tucks under the site header */
nav.toc{position:sticky;top:var(--header-h);z-index:10;background:rgba(13,17,24,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);margin:0 -22px;padding:11px 22px;display:flex;flex-wrap:wrap;gap:5px}
nav.toc a{color:var(--muted);text-decoration:none;font-size:12.5px;padding:6px 11px;border-radius:8px;border:1px solid transparent;white-space:nowrap;transition:.15s}
nav.toc a:hover{color:var(--ink);border-color:var(--line);background:var(--panel)}
nav.toc a.active{color:var(--ink);background:var(--panel);border-color:var(--accent)}
.toclabel{color:#5b6678;font-size:11px;align-self:center;margin-right:2px;padding-left:4px}

/* article typography */
.article section{padding-top:14px}
.article h2{font-size:24px;margin:54px 0 4px;letter-spacing:-.01em}
.article h2 .num{display:inline-block;min-width:34px;color:var(--accent);font-variant-numeric:tabular-nums}
.article .h2sub{color:var(--muted);margin:2px 0 18px 34px;font-size:15px}
.article h3{font-size:18px;margin:30px 0 10px}
.article h4{font-size:13px;margin:16px 0 6px;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.article p{margin:11px 0}
.article .lead{color:var(--muted);font-size:16px}
.article .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:18px 0}

/* dossier */
.dossier{background:var(--panel);border:1px solid var(--line);border-left-width:4px;border-radius:14px;padding:22px 24px;margin:22px 0}
.dossier.apex{border-left-color:var(--apex)} .dossier.ghl{border-left-color:var(--ghl)}
.dossier.hydros{border-left-color:var(--hydros)} .dossier.redsea{border-left-color:var(--redsea)} .dossier.diy{border-left-color:var(--diy)}
.dhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.dhead .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.dhead h3{margin:0;font-size:21px}
.dpos{color:var(--muted);font-size:14.5px;margin:2px 0 14px}
.prof{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 4px}
@media(max-width:760px){.prof{grid-template-columns:1fr}}
.prof p{margin:5px 0;font-size:14.5px}
.block-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:20px 0 8px;display:flex;align-items:center;gap:8px}
.block-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* pro / con */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:11px;overflow:hidden;margin:6px 0}
@media(max-width:680px){.pc{grid-template-columns:1fr}}
.pc .col{padding:13px 16px}
.pc .pro{background:rgba(61,220,145,.05);border-right:1px solid var(--line)}
.pc .con{background:rgba(244,115,123,.05)}
@media(max-width:680px){.pc .pro{border-right:0;border-bottom:1px solid var(--line)}}
.pc h5{margin:0 0 8px;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.pc .pro h5{color:var(--green)} .pc .con h5{color:var(--red)}
.pc ul{margin:0;padding-left:2px;list-style:none}
.pc li{padding:5px 0 5px 20px;position:relative;font-size:14px;line-height:1.55}
.pc .pro li::before{content:"+";position:absolute;left:2px;color:var(--green);font-weight:700}
.pc .con li::before{content:"–";position:absolute;left:4px;color:var(--red);font-weight:700}

/* compatibility list */
.compat{margin:6px 0}
.crow{display:grid;grid-template-columns:170px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.crow:last-child{border-bottom:0}
@media(max-width:620px){.crow{grid-template-columns:1fr;gap:2px}}
.crow .ck{color:var(--muted);font-weight:600}

/* tables */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.8px}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--panel2);font-weight:600}
tbody tr:nth-child(odd){background:rgba(255,255,255,.012)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}

/* status glyph colours */
.y{color:var(--green);font-weight:600} .pp{color:var(--amber);font-weight:600} .n{color:var(--red);font-weight:600}

/* pills */
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:6px;border:1px solid;letter-spacing:.02em}
.pill.top{color:var(--green);border-color:#1f6b4f;background:#0f241c}
.pill.ok{color:var(--accent);border-color:#23507f;background:#0e1f33}
.pill.niche{color:var(--amber);border-color:#7a5b14;background:#241d0e}
.pill.avoid{color:var(--red);border-color:#7a2a2a;background:#241212}

/* callouts */
.callout{border-left:3px solid var(--accent);background:var(--panel2);padding:13px 17px;border-radius:0 11px 11px 0;margin:18px 0;font-size:14.5px}
.callout.warn{border-left-color:var(--amber)} .callout.danger{border-left-color:var(--red)}

/* misc article elements */
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted);margin:8px 0 4px}
a.ref{color:var(--accent);text-decoration:none;border-bottom:1px dotted #3a536f} a.ref:hover{border-bottom-style:solid}
.small{font-size:13px;color:var(--muted)}
code{background:var(--panel2);padding:1px 6px;border-radius:5px;font-size:13px;color:#bcdcff;overflow-wrap:anywhere}
.reco{background:linear-gradient(180deg,#12203a,#121726);border:1px solid #284468}
.dwl-intro{background:linear-gradient(180deg,#12203a,#121726);border:1px solid #284468;border-radius:14px;padding:18px 22px;margin:18px 0 4px}
.dwl-intro h4{margin:0 0 12px;font-size:13px;color:#39e0c8;text-transform:uppercase;letter-spacing:.05em}
.dwl-introgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.dwl-introgrid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.dwl-introgrid{grid-template-columns:1fr}}
.dwl-introgrid div{font-size:13.5px;color:var(--muted);line-height:1.5}
.dwl-introgrid b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
.dwl-introgrid .nbr{white-space:nowrap}
.article-sources{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

/* ---- reading UX layer (progress bar + back-to-top) ---- */
#dwl-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:40;transition:width .12s ease-out}
#dwl-top{position:fixed;right:20px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s,transform .15s,border-color .15s;z-index:30;box-shadow:0 8px 26px rgba(0,0,0,.45)}
#dwl-top:hover{transform:translateY(-2px);border-color:var(--accent)}

/* ---- article structure helpers (applied by site.js) ---- */
/* one compatibility item per line */
.crow .ci{display:block;padding:1px 0}
/* Pro/Con labels each start their own line */
.article td .pcl{display:inline-block;margin-top:7px}

/* ---- abbreviation glossary tooltips ---- */
.ab{border-bottom:1px dotted var(--muted);cursor:help;outline:none}
.ab:hover,.ab:focus,.ab.on{color:var(--ink);border-bottom-color:var(--accent)}
@media(hover:none){.ab{border-bottom-style:dashed}}
#dwl-tip{position:fixed;z-index:200;left:0;top:0;max-width:300px;
  background:var(--panel2);color:var(--ink);border:1px solid #2e4561;border-radius:9px;padding:9px 12px;
  font:400 12.5px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:0;text-transform:none;white-space:normal;box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none}
#dwl-tip.on{opacity:1;visibility:visible}

/* ---- hamburger + off-canvas drawer (base; activated ≤760px) ---- */
.navtoggle{display:none;flex:0 0 auto;width:42px;height:36px;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer}
.navtoggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
header.site.nav-open .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
header.site.nav-open .navtoggle span:nth-child(2){opacity:0}
header.site.nav-open .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.navscrim{display:none}
html.nav-lock{overflow:hidden}

/* ============================================================
   MOBILE (≤760px) — hamburger + side drawer; readable tables
   ============================================================ */
@media(max-width:760px){
  .wrap{padding-left:16px;padding-right:16px}

  /* drop backdrop-filter on mobile: a filtered ancestor becomes the containing
     block for the fixed drawer/scrim, which would trap them inside the header */
  header.site{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}

  /* compact sticky header: brand (left) + hamburger (right) */
  .nav{padding:11px 16px;gap:12px;justify-content:space-between}
  .brand{font-size:16px}
  .brand .mark{width:26px;height:26px;margin-right:8px}
  .navtoggle{display:inline-flex}

  /* nav links → off-canvas side drawer */
  .nav .links{
    position:fixed;top:0;right:0;bottom:0;width:min(82vw,320px);margin:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--bg2);border-left:1px solid var(--line);
    padding:74px 16px 28px;transform:translateX(102%);transition:transform .25s ease;
    z-index:60;overflow-y:auto;box-shadow:-14px 0 44px rgba(0,0,0,.55)}
  header.site.nav-open .links{transform:translateX(0)}
  .nav .links a,.nav .links .soon{display:block;width:100%;font-size:16px;padding:12px 10px;border:0;border-radius:8px}
  .nav .links a:hover,.nav .links a.current{background:var(--panel);color:var(--ink)}
  .nav .links .soon{opacity:.6}
  .langsw{margin:16px 0 0;gap:6px}
  .langsw a{font-size:14px;padding:8px 13px}

  /* backdrop behind the drawer */
  .navscrim{display:block;position:fixed;inset:0;background:rgba(5,8,13,.55);opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:55}
  header.site.nav-open .navscrim{opacity:1;visibility:visible}

  /* article TOC: single swipeable row under the compact header */
  nav.toc{top:52px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px;padding:9px 16px;margin:0 -16px}
  nav.toc::-webkit-scrollbar{height:0}
  .toclabel{display:none}

  /* tighter content */
  .home .hero .wrap{padding:48px 16px 40px}
  .home h1{font-size:34px}
  .article{padding-bottom:60px}
  .article-hero{padding:36px 0 20px}
  .article-hero h1{font-size:26px}
  .article h2{font-size:21px;margin:40px 0 4px}

  /* wide tables → labelled cards (no horizontal scroll, nothing off-screen) */
  .scroll{overflow:visible;border:0;border-radius:0}
  .scroll table{min-width:0;width:100%;margin:14px 0;font-size:14px}
  .scroll thead{display:none}
  .scroll tbody,.scroll tr,.scroll td{display:block;width:auto}
  .scroll tbody tr,.scroll tbody tr:nth-child(odd){background:var(--panel);border:1px solid var(--line);border-radius:12px;margin:0 0 12px;padding:2px 14px 10px}
  .scroll td{border:0;border-top:1px solid var(--line);padding:9px 0 9px 42%;position:relative;line-height:1.5;overflow-wrap:anywhere}
  .crow{overflow-wrap:anywhere}
  .scroll td::before{content:attr(data-label);position:absolute;left:0;top:9px;width:38%;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;line-height:1.4}
  .scroll td:first-child{border-top:0;display:block;padding:12px 0 8px;font-weight:700;font-size:15.5px;color:var(--ink)}
  .scroll td:first-child::before{display:none}
  .scroll td[colspan]{padding:9px 0}
  .scroll td[colspan]::before{display:none}
}
@media(max-width:460px){
  .article-hero h1{font-size:23px}
}