/* MILH — shared stylesheet for the policy / support pages.
   The landing page inlines everything because it is one giant file; these are
   small documents, so they share one cached stylesheet and one set of fonts. */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fraunces-400.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fraunces-600.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/inter-600.woff2) format('woff2')}

:root{
  --bg:#F6F1E7; --surface:#FBF8F1; --ink:#2C231E; --ink-soft:#5a4d44;
  --line:#E1D7C4; --accent:#B4633A; --pal-red:#CE1126; --pal-green:#1a6b3c;
  --maxw:44rem; --gutter:clamp(20px,5vw,48px);
  --shadow:0 1px 2px rgba(44,35,30,.04),0 8px 30px rgba(44,35,30,.07);
}
:root[data-theme="dark"]{
  --bg:#0B2027; --surface:#0F2A33; --ink:#EDE6D6; --ink-soft:#A9B3AE;
  --line:#1d4351; --accent:#D9834F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 34px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(1rem,.97rem + .15vw,1.075rem); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- header ---------- */
.doc-head{border-bottom:1px solid var(--line);background:var(--surface)}
.doc-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.05rem;max-width:64rem}
.brand{display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none;color:var(--ink);
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.3rem;letter-spacing:.02em}
.brand .ar{font-size:1rem;color:var(--ink-soft)}
.flag-tri{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:9px solid var(--pal-red);display:inline-block;translate:0 1px}
.back{text-decoration:none;color:var(--ink-soft);font-size:.925rem;font-weight:500}
.back:hover{color:var(--accent)}

/* ---------- document body ---------- */
main{padding-block:clamp(2.25rem,6vw,4rem) clamp(3rem,8vw,5rem)}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin:0 0 .6rem}
h1{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.12;letter-spacing:-.015em;
  font-size:clamp(2rem,1.5rem + 2.2vw,3rem);margin:0 0 .5rem}
.updated{color:var(--ink-soft);font-size:.9rem;margin:0 0 2.5rem;
  padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
h2{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.25;
  font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem);margin:2.75rem 0 .75rem}
h3{font-size:1.05rem;font-weight:600;margin:1.75rem 0 .5rem}
p,li{color:var(--ink-soft)}
p{margin:0 0 1.1rem}
ul,ol{margin:0 0 1.1rem;padding-left:1.35rem}
li{margin-bottom:.45rem}
strong{color:var(--ink);font-weight:600}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* the one fact a reader is usually looking for, pulled out of the prose */
.key{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;padding:1.1rem 1.25rem;margin:0 0 2rem;box-shadow:var(--shadow)}
.key p{margin:0;color:var(--ink)}
.key p + p{margin-top:.6rem}

table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.95rem}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);color:var(--ink-soft)}
th{color:var(--ink);font-weight:600;white-space:nowrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- footer ---------- */
.doc-foot{border-top:1px solid var(--line);background:var(--surface);
  padding-block:2rem;margin-top:auto;font-size:.925rem}
.doc-foot .wrap{max-width:64rem}
.doc-foot nav{display:flex;flex-wrap:wrap;gap:.6rem 1.35rem;margin-bottom:1.1rem}
.doc-foot nav a{color:var(--ink-soft);text-decoration:none;font-weight:500}
.doc-foot nav a:hover,.doc-foot nav a[aria-current]{color:var(--accent)}
.doc-foot small{color:var(--ink-soft);display:block}

body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}