/* legal.css — standalone content pages (disclaimer, privacy, about).

   The task spec linked these pages to "style.css", which does not exist in
   this project; they would have rendered as unstyled black-on-white. This is
   that stylesheet, using the same palette as the apps so the pages read as
   part of the product rather than as something bolted on for a reviewer.

   Self-contained on purpose: these pages must render correctly even if every
   other asset fails, because they are what an AdSense reviewer and a
   regulator look at. */

:root{
  --bg:#070b14; --card:#101a2c; --card2:#0c1524;
  --line:#1d2c44; --line2:#2a3d5c;
  --text:#e9eef7; --muted:#a8b6cc; --muted2:#8496b0;
  --accent:#35E08D; --accent-2:#2dd4bf; --warn:#fbbf24;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f4f6fb; --card:#ffffff; --card2:#f7f9fc;
    --line:#dfe5ef; --line2:#c9d6e6;
    --text:#0d1526; --muted:#41526b; --muted2:#5a6c88;
    --accent:#0B6E42; --accent-2:#0e6b7a; --warn:#8a5300;
  }
}
:root[data-theme="light"]{
  --bg:#f4f6fb; --card:#ffffff; --card2:#f7f9fc;
  --line:#dfe5ef; --line2:#c9d6e6;
  --text:#0d1526; --muted:#41526b; --muted2:#5a6c88;
  --accent:#0B6E42; --accent-2:#0e6b7a; --warn:#8a5300;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
.legal-container{max-width:74ch; margin:0 auto; padding:40px 22px 72px}

.eyebrow{
  font:700 11px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
h1{font-size:clamp(27px,4.6vw,36px); line-height:1.15; letter-spacing:-.02em; margin:0 0 10px; text-wrap:balance}
.updated{color:var(--muted2); font-size:13px; margin:0 0 30px}
h2{font-size:19px; line-height:1.3; letter-spacing:-.01em; margin:36px 0 10px; text-wrap:balance}
h3{font-size:16px; margin:24px 0 8px}
p,li{color:var(--muted); text-wrap:pretty}
p{margin:0 0 15px}
ul,ol{margin:0 0 15px; padding-left:22px}
li{margin-bottom:9px}
strong{color:var(--text); font-weight:700}
a{color:var(--accent-2)}
a:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:3px}
code{font:500 13.5px/1 var(--mono); background:var(--card2); border:1px solid var(--line); padding:2px 5px; border-radius:5px}

.callout{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--warn);
  border-radius:0 12px 12px 0; padding:18px 20px; margin:22px 0;
}
.callout p:last-child{margin-bottom:0}
.callout.key{border-left-color:var(--accent)}

.meta{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin:20px 0;
}
.meta dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 18px}
.meta dt{font:700 11px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted2)}
.meta dd{margin:0; color:var(--text); font-size:15px}

.backlink{margin-top:40px; padding-top:18px; border-top:1px solid var(--line)}
.backlink a{font-weight:600; text-decoration:none}
.backlink a:hover{text-decoration:underline}

/* Shared page footer, also used on the app pages. */
.icu-legal-foot{
  border-top:1px solid var(--line); margin-top:34px; padding:20px 16px 40px;
  text-align:center; font-size:13px; color:var(--muted2); line-height:1.7;
}
.icu-legal-foot a{color:var(--muted); text-decoration:none; margin:0 7px; white-space:nowrap}
/* The footer link row had no break opportunity in it. The anchors are written
   with no whitespace between them — </a><span class="rule">·</span><a> — and
   each anchor is nowrap, so the browser saw one unbreakable run and pushed the
   page 134 px wider than the phone it was on. Every legal page scrolled
   sideways because of it.
   Laying the row out as a wrapping flex line gives each link its own break
   point while keeping each link itself intact. :has() means the copyright
   paragraph above is untouched, and a browser too old for :has() simply keeps
   today's behaviour rather than getting something worse. */
.icu-legal-foot p:has(a){
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:0 2px; margin-left:auto; margin-right:auto; max-width:100%;
}
.icu-legal-foot a:hover{color:var(--text); text-decoration:underline}
.icu-legal-foot .rule{color:var(--line2)}

@media print{
  body{background:#fff; color:#000}
  .backlink,.icu-legal-foot{display:none}
  a{color:#000; text-decoration:underline}
  @page{margin:14mm}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}

/* ==========================================================================
   Ad slots — bedside-safe layout
   Loaded on every page that carries advertising. The container reserves its
   height before the ad arrives so nothing below it moves; [hidden] collapses
   it completely when there is no ad to show (subscriber, gate, blocker, or
   no configured slot).
   ========================================================================== */
.ad-slot-container{
  margin:32px auto; padding:12px; max-width:728px;
  min-height:120px;                 /* reserved — this is what stops the shift */
  background:var(--card2, #f8fafc);
  border:1px solid var(--line, #e2e8f0);
  border-radius:10px; text-align:center; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  contain:layout;                   /* an oversized ad cannot reflow the page */
  overflow:hidden;
}
.ad-slot-container[hidden]{display:none !important}
.ad-slot-caption{
  display:block; font-size:11px; font-weight:600;
  color:var(--muted2, #94a3b8); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:8px;
}
.ad-slot-container .adsbygoogle{display:block; width:100%}

/* Hard guard, rule 1: an ad must never end up inside a calculator, a result
   panel, a dose row, or the drawer a pathway opens into. If one is ever
   nested there by mistake, it does not render. */
:is(.calc,.calc-body,.tool,.tool-main,.result,.results,.dose,.dose-row,
    .drawer,.spec-panel,.sec-b,.step,.fld,form) .ad-slot-container{
  display:none !important;
}

/* Never on paper. */
@media print{
  .ad-slot-container,.adsbygoogle{display:none !important}
}

/* The colleagues roster on about.html.
   A list, not a grid of avatars: these are eleven names and their institutions,
   and the page should read as a record rather than a marketing wall. The name
   leads, the place sits under it in the muted tone the rest of the page uses
   for secondary text, and the degree — where one was given — is a quiet chip
   so a reader can see at a glance which entries carry a qualification and
   which are only a name and a place. */
.roster{list-style:none;padding:0;margin:18px 0 14px;
        display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.roster li{padding:12px 14px;border:1px solid var(--edge,#e3e8ee);border-radius:10px;
           background:var(--card,#fff);display:flex;flex-direction:column;gap:3px}
.roster li b{font-weight:600;font-size:15px}
.roster li span{font-size:13.5px;color:var(--muted,#5b6b7c)}
.roster li .deg{display:inline-block;width:fit-content;margin-top:5px;padding:2px 8px;
                border:1px solid var(--edge,#e3e8ee);border-radius:999px;font-size:12px}
.roster-note{font-size:14px;color:var(--muted,#5b6b7c)}
@media print{.roster{grid-template-columns:1fr 1fr}}