/* ==========================================================================
   NorthLedger — shared styles for legal pages (privacy.html, terms.html)
   Tokens mirror index.html.
   ========================================================================== */
:root{
  --bg:#FBFCFD;
  --surface:#F5F8FA;
  --surface-2:#E9EFF4;
  --text:#0D1720;
  --text-2:#2C3E4D;
  --muted:#5C6B78;
  --border:#E3EAEF;
  --border-hover:#C4D1DB;
  --white:#FFFFFF;

  --cta:#0B5D7A;
  --cta-hover:#084A62;
  --accent:#C0702F;

  --dark:#0C1620;
  --dark-deep:#070F17;
  --dark-line:#1E3040;
  --dark-line-2:#2B4257;
  --on-dark:#E8EFF5;
  --on-dark-2:#A7BCCC;
  --on-dark-3:#8AA0B2;
  --pri-lt:#5AB4D1;

  --r:9px;
  --r-sm:6px;
  --r-lg:16px;
  --r-pill:100px;

  --sh-sm:0 1px 2px rgba(13,23,32,.035), 0 8px 20px -10px rgba(13,23,32,.09);
  --sh-md:0 2px 6px rgba(13,23,32,.04), 0 18px 38px -18px rgba(13,23,32,.15);

  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --pad-x:clamp(20px,4.6vw,44px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
svg{max-width:100%;display:block}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--cta);outline-offset:3px;border-radius:2px}
.site-header :focus-visible,.site-footer :focus-visible{outline-color:var(--pri-lt)}
::selection{background:rgba(11,93,122,.22);color:var(--text)}
.site-header ::selection,.site-footer ::selection{background:rgba(90,180,209,.3);color:#fff}

.skip-link{
  position:absolute;left:12px;top:-64px;z-index:200;
  display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;
  background:var(--cta);color:#fff;border-radius:var(--r);
  font-size:.92rem;font-weight:600;text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:12px}

/* viewport-fit=cover is set, so the page must handle the insets itself —
   otherwise text runs under the notch when a phone is held in landscape. */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;
  padding-left:max(var(--pad-x),env(safe-area-inset-left,0px));
  padding-right:max(var(--pad-x),env(safe-area-inset-right,0px))}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:70;
  background:rgba(7,15,23,.86);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex;align-items:center;gap:20px;min-height:70px}
.brand{display:flex;align-items:center;flex-shrink:0;min-height:44px;text-decoration:none}
/* The plate — see the same block in index.html. Two densities, one rule, no glyph. */
.brand-name{
  font-size:1.03rem;font-weight:600;letter-spacing:.022em;line-height:1;display:block;
  color:var(--on-dark);text-transform:uppercase;white-space:nowrap;
  padding-bottom:6px;border-bottom:1px solid rgba(232,239,245,.22);
}
.brand-name i{font-style:normal;font-weight:300;color:var(--on-dark-2)}
.brand-sub{font-size:.56rem;font-weight:500;letter-spacing:.185em;text-transform:uppercase;color:var(--on-dark-3);line-height:1.3;display:block;margin-top:6px}
.h-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.h-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 13px;
  font-size:.92rem;font-weight:500;color:var(--on-dark-2);border-radius:var(--r);text-decoration:none;
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.h-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.h-nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.09)}

/* ---------- draft banner ---------- */
.draft{
  background:rgba(192,112,47,.13);
  border-bottom:1px solid rgba(192,112,47,.45);
  padding-block:14px;
}
.draft-inner{display:flex;gap:12px;align-items:flex-start;max-width:104ch}
.draft svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;color:#8A4E1C}
.draft p{font-size:.87rem;line-height:1.55;color:#4E2C0E}
.draft strong{font-weight:600}

/* ---------- page head ---------- */
.page-head{padding-block:clamp(44px,5vw,72px) clamp(28px,3vw,40px);border-bottom:1px solid var(--border)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cta);margin-bottom:16px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:currentColor;flex-shrink:0}
.page-head h1{
  font-size:clamp(1.95rem,4vw,3rem);line-height:1.06;letter-spacing:-0.022em;font-weight:600;
  text-wrap:balance;max-width:20ch;
}
.meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px}
.meta div{min-width:0}
.meta dt{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.meta dd{font-size:.9rem;font-family:var(--mono);color:var(--text-2)}

/* ---------- body layout ---------- */
.doc{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(30px,5vw,72px);
  padding-block:clamp(40px,4.5vw,64px) clamp(60px,7vw,104px);align-items:start}
.toc{position:sticky;top:100px}
.toc p{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--border)}
/* block, not flex: a flex anchor inflates the TOC's min-content width and
   blows out the grid track on narrow screens. Padding gives the 44px target. */
.toc a{
  display:block;padding:12px 0;min-height:44px;
  font-size:.87rem;line-height:1.4;color:var(--text-2);text-decoration:none;
  transition:color .16s var(--ease);
}
.toc a:hover{color:var(--cta)}
.toc ol{counter-reset:t}
.toc li{counter-increment:t}
.toc a::before{content:counter(t) ". ";font-family:var(--mono);font-size:.78rem;color:var(--muted)}

/* summary box */
.summary{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  padding:clamp(20px,2.4vw,28px);margin-bottom:clamp(34px,4vw,48px);
}
.summary h2{font-size:1.06rem;letter-spacing:-0.014em;margin-bottom:14px}
.summary ul{display:grid;gap:11px}
.summary li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;line-height:1.55;color:var(--text-2)}
.summary svg{width:15px;height:15px;flex-shrink:0;margin-top:4px;color:var(--cta)}
.summary .foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:.85rem;color:var(--muted);line-height:1.55}

/* sections */
.sec{padding-bottom:clamp(30px,3.4vw,44px);counter-increment:sec;scroll-margin-top:100px}
.sec:last-child{padding-bottom:0}
.sec h2{
  font-size:clamp(1.12rem,1.7vw,1.32rem);letter-spacing:-0.016em;line-height:1.3;
  margin-bottom:14px;display:flex;gap:12px;align-items:baseline;
}
.sec h2 .n{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--cta);flex-shrink:0}
.sec h3{font-size:1rem;letter-spacing:-0.014em;margin:22px 0 8px}
.sec p{font-size:.97rem;line-height:1.68;color:var(--text-2);max-width:74ch}
.sec p + p{margin-top:13px}
.sec ul.bul,.sec ol.num{margin-top:13px;display:grid;gap:9px;max-width:74ch}
.sec ul.bul li{position:relative;padding-left:20px;font-size:.95rem;line-height:1.6;color:var(--text-2)}
.sec ul.bul li::before{content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;border-radius:50%;background:#A6B7C2}
.sec ol.num{counter-reset:n}
.sec ol.num li{position:relative;padding-left:26px;font-size:.95rem;line-height:1.6;color:var(--text-2);counter-increment:n}
.sec ol.num li::before{content:counter(n) ".";position:absolute;left:0;top:0;font-family:var(--mono);font-size:.82rem;color:var(--muted)}
.sec strong{color:var(--text);font-weight:600}
.sec a{color:var(--cta);text-decoration:underline;text-underline-offset:2px}
.sec a:hover{color:var(--cta-hover)}

/* callout */
.note{
  margin-top:16px;padding:15px 17px;background:var(--white);
  border:1px solid var(--border);border-left:3px solid var(--cta);border-radius:var(--r);max-width:74ch;
}
.note p{font-size:.9rem;line-height:1.6;color:var(--text-2)}
.note.warn{border-left-color:var(--accent);background:rgba(192,112,47,.06)}

/* data table */
.tbl{margin-top:16px;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;max-width:74ch;box-shadow:var(--sh-sm)}
.tbl div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border-bottom:1px solid var(--border)}
.tbl div:last-child{border-bottom:0}
.tbl dt{padding:13px 16px;font-size:.88rem;font-weight:600;background:var(--surface);border-right:1px solid var(--border)}
.tbl dd{padding:13px 16px;font-size:.9rem;color:var(--text-2);line-height:1.55}

/* placeholder token — must be impossible to ship by accident */
/* must wrap: long placeholders otherwise force horizontal overflow on mobile */
.ph{
  display:inline;font-family:var(--mono);font-size:.85em;
  background:rgba(192,112,47,.2);border:1px dashed rgba(192,112,47,.75);
  border-radius:var(--r-sm);padding:1px 6px;color:#4E2C0E;
  white-space:normal;overflow-wrap:anywhere;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---------- footer ---------- */
.site-footer{background:var(--dark-deep);color:var(--on-dark-2);border-top:1px solid var(--dark-line);padding-block:46px 40px}
.foot-top{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start;margin-bottom:30px}
.foot-nav{display:flex;flex-wrap:wrap;gap:2px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:.9rem;color:var(--on-dark-2);
  border-radius:var(--r);text-decoration:none;transition:color .18s var(--ease),background-color .18s var(--ease)}
.foot-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.foot-legal{padding-top:26px;border-top:1px solid var(--dark-line);display:grid;gap:14px}
.foot-legal p{font-size:.83rem;line-height:1.6;color:var(--on-dark-3);max-width:104ch}

/* ---------- responsive ---------- */
@media (max-width:960px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track floors at the item's min-content
     width and causes horizontal overflow on narrow screens. */
  .doc{grid-template-columns:minmax(0,1fr);gap:32px}
  .toc{position:static;top:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px}
  .toc p{border-bottom-color:var(--border)}
  .toc ol{columns:2;column-gap:24px}
}
@media (max-width:720px){
  body{font-size:16.5px}
  html{scroll-padding-top:84px}
  .header-inner{min-height:62px}
  .toc ol{columns:1}
  .tbl div{grid-template-columns:1fr}
  .tbl dt{border-right:0;border-bottom:1px solid var(--border)}
  .foot-top{flex-direction:column;gap:16px}
  .meta{gap:14px 20px}
}
/* brand + 3 nav links exceed the line below ~560px, so the header wraps
   to two rows instead of overflowing. */
@media (max-width:560px){
  .header-inner{flex-wrap:wrap;gap:2px 16px;padding-block:8px;min-height:0}
  .h-nav{margin-left:-13px;width:100%}
  .h-nav a{padding:0 13px;font-size:.88rem;min-height:44px}
}
@media (max-width:430px){
  .brand-sub{font-size:.52rem;letter-spacing:.14em}
  .brand-name{font-size:.97rem;padding-bottom:5px}
  .h-nav a{padding:0 10px;font-size:.85rem}
}

/* ==========================================================================
   Print — legal pages get printed and filed; make that produce a clean document
   ========================================================================== */
@media print{
  .site-header,.skip-link,.toc{display:none!important}
  body{font-size:10.5pt;line-height:1.5;background:#fff;color:#000}
  .wrap{max-width:none;padding-inline:0}
  .doc{display:block;padding-block:0}
  .draft{background:none!important;border:1.5pt solid #000;padding:10pt;margin-bottom:14pt}
  .draft p{color:#000!important}
  .draft svg{display:none}
  .page-head{padding-block:0 12pt}
  .page-head h1{font-size:20pt;max-width:none}
  .meta{gap:6pt 18pt}
  .meta dd{font-size:9pt}
  .summary{background:none!important;border:0.75pt solid #666;break-inside:avoid}
  .sec{break-inside:avoid;padding-bottom:12pt}
  .sec h2{font-size:12pt;break-after:avoid}
  .sec p,.sec li{font-size:10.5pt;max-width:none}
  .note{background:none!important;border:0.75pt solid #666;border-left-width:2.5pt;break-inside:avoid}
  .tbl{break-inside:avoid;border-color:#666}
  .tbl dt{background:none!important;border-color:#666}
  /* placeholders must remain conspicuous on paper, where colour may be lost */
  .ph{background:none!important;border:1pt dashed #000;color:#000!important;font-weight:600}
  .site-footer{background:none!important;color:#000;border-top:0.75pt solid #666;padding-block:12pt 0}
  .foot-nav,.foot-top .brand{display:none}
  .foot-legal{border-top:0}
  .foot-legal p{color:#000!important;font-size:8.5pt}
}