/* Shared stylesheet for the AS21990 policy pages.
 *
 * Tokens are copied from index.html deliberately rather than shared, because
 * index.html must stay a single self-contained file with no external CSS. If
 * you change the palette there, change it here too.
 *
 * Three theme states, not two: bare :root is the complete light palette, and
 * both dark blocks redefine tokens only. A colour declared only inside a media
 * or [data-theme] block never applies in the un-stamped default state.
 */

:root{
  --paper:#F5F4F0; --surface:#FFFFFF; --surface-2:#EBE8DF;
  --ink:#17150F; --ink-2:#4C4739; --ink-3:#7C765F;
  --rule:#DCD8CA; --rule-strong:#C3BDA9;
  --accent:#966D14; --accent-line:#C99A26; --accent-soft:#F4E9C9;
  --warn:#8A5F0C; --warn-soft:#F7E9C6;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --wrap:760px;
  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem; --s5:3rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131211; --surface:#1B1A17; --surface-2:#242219;
    --ink:#F3F0E7; --ink-2:#B6B09D; --ink-3:#847E6C;
    --rule:#2F2C24; --rule-strong:#453F32;
    --accent:#E6BA55; --accent-line:#8A6D1F; --accent-soft:#33290F;
    --warn:#DCA93F; --warn-soft:#2C220C;
  }
}
:root[data-theme="dark"]{
  --paper:#131211; --surface:#1B1A17; --surface-2:#242219;
  --ink:#F3F0E7; --ink-2:#B6B09D; --ink-3:#847E6C;
  --rule:#2F2C24; --rule-strong:#453F32;
  --accent:#E6BA55; --accent-line:#8A6D1F; --accent-soft:#33290F;
  --warn:#DCA93F; --warn-soft:#2C220C;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem)}
a{color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent-line); outline-offset:2px; border-radius:2px}
.mono,code{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
code{font-size:.875em; background:var(--surface-2); padding:.1rem .35rem; border-radius:3px}

/* masthead ---------------------------------------------------------------- */
.masthead{border-bottom:1px solid var(--rule); background:var(--paper)}
.masthead .wrap{display:flex; align-items:center; gap:var(--s3); min-height:64px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit; margin-right:auto}
.mark{display:block; line-height:0}
.mark img{width:150px; height:auto; display:block}
.mark .on-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mark .on-light{display:none}
  :root:not([data-theme="light"]) .mark .on-dark{display:block}
}
:root[data-theme="dark"] .mark .on-light{display:none}
:root[data-theme="dark"] .mark .on-dark{display:block}
.brand-as{
  font-family:var(--f-display); font-weight:700; font-size:1rem; letter-spacing:-.01em;
  border-left:1px solid var(--rule-strong); padding-left:.75rem;
}
.brand-as span{display:block; font-family:var(--f-body); font-weight:400; font-size:.6875rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); line-height:1.4}
.masthead nav a{font-size:.8125rem; font-weight:500; color:var(--ink-2); text-decoration:none}
.masthead nav a:hover{color:var(--ink)}

/* document ---------------------------------------------------------------- */
main{padding-block:var(--s5) var(--s4)}
.eyebrow{
  font-family:var(--f-mono); font-size:.75rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:.6rem;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--accent-line); opacity:.45}
h1{font-family:var(--f-display); font-weight:700; font-size:clamp(1.9rem,5.5vw,2.6rem);
  line-height:1.06; letter-spacing:-.025em; margin:1rem 0 .5rem; text-wrap:balance}
.subtitle{color:var(--ink-2); font-size:1.0625rem}
h2{font-family:var(--f-display); font-weight:700; font-size:1.25rem; letter-spacing:-.015em;
  margin:var(--s4) 0 .6rem; text-wrap:balance}
h3{font-family:var(--f-display); font-weight:600; font-size:1rem; margin:var(--s3) 0 .4rem}
p{margin:0 0 .9rem}
ul,ol{margin:0 0 .9rem; padding-left:1.3rem}
li{margin-block:.35rem}
strong{font-weight:600}
hr{border:0; border-top:1px solid var(--rule); margin:var(--s4) 0}

.scroller{overflow-x:auto; border:1px solid var(--rule); border-radius:4px;
  background:var(--surface); margin-bottom:.9rem}
table{border-collapse:collapse; width:100%; min-width:420px; font-size:.9375rem}
th,td{text-align:left; padding:.6rem .85rem; border-bottom:1px solid var(--rule); vertical-align:top}
thead th{font-family:var(--f-body); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}

.callout{border-left:3px solid var(--accent-line); background:var(--accent-soft);
  padding:.85rem 1rem; border-radius:0 4px 4px 0; margin-bottom:.9rem}
.callout p:last-child{margin-bottom:0}

/* footer ------------------------------------------------------------------ */
footer{border-top:1px solid var(--rule); padding-block:var(--s3) var(--s5); margin-top:var(--s5)}
footer .wrap{display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.75rem; color:var(--ink-3)}
footer a{color:var(--ink-2)}