/* CiviqPass shared styles: fonts, design tokens, base chrome (header, wordmark lockup, language and theme switches, buttons, footer, stamp). Served at /cq.css, linked from every page.
   Source of truth: Brand & Design, DESIGN-civiqpass.md and tokens.css (RES-1301, RES-1324). Colours are tokens only: pages use var(--cq-*), never a raw hex.
   Logical properties only (margin-inline-start, inset-inline-end, text-align:start): RTL is a mirror, not a patch. No third-party request: every font is a file under /fonts/. */

/* Fonts: self-hosted, font-display swap. Body = IBM Plex Sans 400/600 (Latin) and IBM Plex Sans Arabic 400/600 (Arabic letters only).
   Display = Readex Pro 600/700 (Latin) and "Readex Pro Arabic" 600/700 (Arabic): two family names so a page in Arabic fetches the Arabic file only. The browser downloads a file only when a character in its unicode-range is drawn. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/readex-pro-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/readex-pro-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro Arabic";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/readex-pro-arabic-600-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/readex-pro-arabic-700-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* Tokens, light */
:root{
  color-scheme:light;
  --cq-ground:#F1F5F2;--cq-surface:#FFFFFF;--cq-ink:#10302E;--cq-muted:#4A605E;--cq-teal:#1F5C57;
  --cq-action:#3730C9;--cq-on-action:#FFFFFF;--cq-action-hover:#2B25A3;--cq-action-active:#221D88;
  --cq-right:#2E7D4F;--cq-wrong:#A63A2B;--cq-partial:#F2C14E;--cq-on-partial:#10302E;
  --cq-tint:#D3E2DE;--cq-wash:#E5EEEA;--cq-line:#CBD8D4;--cq-focus:#3730C9;
  --cq-on-teal:#FFFFFF; /* text on a teal band: white on #1F5C57 is 7.70; in dark the teal is light, so the text is the dark ground (9.61) */
  --cq-font:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cq-font-display:"Readex Pro","Readex Pro Arabic","IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --cq-fs-xs:.875rem;--cq-fs-sm:.9375rem;--cq-fs-body:1.0625rem;--cq-fs-lg:1.25rem;--cq-fs-h3:1.375rem;--cq-fs-h2:1.75rem;--cq-fs-h1:2.125rem;--cq-fs-num:3.5rem;
  --cq-lh-body:1.55;--cq-lh-head:1.15;
  --cq-s1:4px;--cq-s2:8px;--cq-s3:12px;--cq-s4:16px;--cq-s5:24px;--cq-s6:32px;--cq-s7:48px;--cq-s8:64px;--cq-s9:96px;
  --cq-r:6px;--cq-r-stamp:999px;--cq-bw:1px;--cq-bw-input:2px;--cq-target:44px;--cq-target-primary:52px;--cq-measure:38rem;--cq-wrap:72rem;
  --cq-dur-fast:120ms;--cq-dur-stamp:240ms;
}
@media (min-width:64em){:root{--cq-fs-body:1.125rem;--cq-fs-h1:3.25rem;--cq-fs-h2:2.125rem;--cq-fs-h3:1.5rem;--cq-fs-num:5rem}}
/* Arabic: sized up, taller lines, no letter-spacing, no italics. Arabic letters are drawn in the device's own Arabic face (Tahoma, Geeza Pro, system-ui): the Arabic web faces cost 1 to 5 s of style and layout on a phone (RES-1557, QA r1 on RES-1468), so /ar/ missed LCP 2.5 s. Latin runs inside Arabic text (CCSE, CiviqPass) keep Plex Sans and Readex Pro Latin. The Arabic @font-face rules below stay for the share-card canvas, which loads them on demand and never on first paint. */
:lang(ar){
  --cq-lh-body:1.8;--cq-lh-head:1.4;
  --cq-fs-xs:.9375rem;--cq-fs-sm:1rem;--cq-fs-body:1.1875rem;--cq-fs-lg:1.375rem;--cq-fs-h3:1.5rem;--cq-fs-h2:1.875rem;--cq-fs-h1:2.25rem;
  --cq-font:"IBM Plex Sans",Tahoma,"Geeza Pro",system-ui,sans-serif;
  --cq-font-display:"Readex Pro",Tahoma,"Geeza Pro",system-ui,sans-serif;
  letter-spacing:0;
}
@media (min-width:64em){:lang(ar){--cq-fs-body:1.25rem;--cq-fs-h1:3rem;--cq-fs-h2:2.25rem;--cq-fs-h3:1.625rem}}
/* Tokens, dark: follows the browser unless the visitor has clicked the switch (then [data-theme] wins). The two blocks below are the same list; test_s2.py checks they match. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --cq-ground:#0D1F1E;--cq-surface:#152B29;--cq-ink:#E7F0ED;--cq-muted:#9DB5B1;--cq-teal:#7FD1C6;
    --cq-action:#A9A6FF;--cq-on-action:#0D1F1E;--cq-action-hover:#BDBAFF;--cq-action-active:#CFCDFF;
    --cq-right:#7FD6A0;--cq-wrong:#FF9C8C;--cq-partial:#F2C14E;--cq-on-partial:#0D1F1E;
    --cq-tint:#28433F;--cq-wash:#1B3532;--cq-line:#2B4744;--cq-focus:#A9A6FF;--cq-on-teal:#0D1F1E;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --cq-ground:#0D1F1E;--cq-surface:#152B29;--cq-ink:#E7F0ED;--cq-muted:#9DB5B1;--cq-teal:#7FD1C6;
  --cq-action:#A9A6FF;--cq-on-action:#0D1F1E;--cq-action-hover:#BDBAFF;--cq-action-active:#CFCDFF;
  --cq-right:#7FD6A0;--cq-wrong:#FF9C8C;--cq-partial:#F2C14E;--cq-on-partial:#0D1F1E;
  --cq-tint:#28433F;--cq-wash:#1B3532;--cq-line:#2B4744;--cq-focus:#A9A6FF;--cq-on-teal:#0D1F1E;
}
@media (prefers-reduced-motion:reduce){:root{--cq-dur-fast:0ms;--cq-dur-stamp:0ms}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cq-ground);color:var(--cq-ink);font-family:var(--cq-font);font-size:var(--cq-fs-body);line-height:var(--cq-lh-body)}
b,strong{font-weight:600}
h1,h2,h3{margin:0}
h1,h2{font-family:var(--cq-font-display);font-weight:700;text-wrap:balance}
h1{font-size:var(--cq-fs-h1);line-height:var(--cq-lh-head);letter-spacing:-.01em}
:lang(ar) h1{letter-spacing:0}
h2{font-size:var(--cq-fs-h2);line-height:var(--cq-lh-head)}
h3{font-size:var(--cq-fs-h3);line-height:var(--cq-lh-head);font-weight:600}
a{color:var(--cq-action)}
a:hover{color:var(--cq-action-hover)}
:focus-visible{outline:3px solid var(--cq-focus);outline-offset:2px;border-radius:var(--cq-r)}
[hidden]{display:none!important}
.wrap{max-inline-size:var(--cq-wrap);margin-inline:auto;padding-inline:var(--cq-s4)}
@media (min-width:64em){.wrap{padding-inline:var(--cq-s6)}}
.small{font-size:var(--cq-fs-sm);color:var(--cq-muted)}
.xs{font-size:var(--cq-fs-xs);color:var(--cq-muted)}
.num{font-variant-numeric:tabular-nums;font-weight:600}
.sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.icon{inline-size:1.25em;block-size:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .flip{transform:scaleX(-1)}

/* Header: the Q mark and the wordmark (Readex Pro 700, live text) as one lockup, then language and theme switches */
header.top{border-block-end:var(--cq-bw) solid var(--cq-line);background:var(--cq-ground)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--cq-s3);min-block-size:64px}
.brand{display:inline-flex;align-items:center;gap:var(--cq-s2);min-block-size:var(--cq-target);color:var(--cq-ink);text-decoration:none;font-family:var(--cq-font-display);font-weight:700;font-size:1.25rem;line-height:1;letter-spacing:-.01em}
.brand:hover{color:var(--cq-ink)}
.brand svg{inline-size:28px;block-size:28px;flex:none}
.tools{display:flex;align-items:center;gap:var(--cq-s1)}
.lang{display:flex;gap:0} /* four languages (RES-1529): the Arabic header at 390 px was 1 px too wide with a 2 px gap */
.lang button,.lang a{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--cq-target);min-block-size:var(--cq-target);padding:0 6px;background:none;color:var(--cq-ink);text-decoration:none;font:inherit;font-size:var(--cq-fs-sm);font-weight:400;line-height:1;border:var(--cq-bw-input) solid transparent;border-radius:var(--cq-r);cursor:pointer}
.lang button:hover,.lang a:hover{background:var(--cq-wash);color:var(--cq-ink)}
.lang button[aria-pressed=true],.lang a[aria-current]{border-color:var(--cq-teal);font-weight:600}
.lang [lang=ar]{font-family:system-ui,"Geeza Pro","Segoe UI",Tahoma,sans-serif} /* the label is one short word: a system face, so an English page never downloads the Arabic font for it */
.theme-sw{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--cq-target);block-size:var(--cq-target);padding:0;background:none;color:var(--cq-ink);border:var(--cq-bw-input) solid transparent;border-radius:var(--cq-r);cursor:pointer}
.theme-sw:hover{background:var(--cq-wash)}
.theme-sw[aria-pressed=true]{border-color:var(--cq-teal)}
.theme-sw svg{inline-size:22px;block-size:22px;stroke:currentColor;fill:none;stroke-width:2}
/* RES-1557: the header (mark, wordmark, four language buttons, theme switch) was 10 px wider than a 375 px phone in every language and 2 px over at 390 in Arabic. Under 26em the buttons are 36 px wide (still 44 px tall), the wordmark 18 px; under about 330 px the row wraps instead of scrolling sideways. */
@media (max-width:26em){header.top .wrap{gap:var(--cq-s2);flex-wrap:wrap}.lang button,.lang a{min-inline-size:36px;padding:0 3px}.theme-sw{inline-size:36px}.brand{font-size:1.125rem}.tools{gap:0}}
.theme-sw svg path{fill:currentColor;stroke:none}

/* Buttons: ONE filled action per screen state */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--cq-s2);min-block-size:var(--cq-target-primary);padding:var(--cq-s3) var(--cq-s5);background:var(--cq-action);color:var(--cq-on-action);border:var(--cq-bw-input) solid var(--cq-action);border-radius:var(--cq-r);font:inherit;font-weight:600;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;transition:background-color var(--cq-dur-fast)}
.btn:hover{background:var(--cq-action-hover);border-color:var(--cq-action-hover);color:var(--cq-on-action)}
.btn:active{background:var(--cq-action-active);border-color:var(--cq-action-active)}
.btn[disabled],.btn[aria-disabled=true]{background:var(--cq-wash);border-color:var(--cq-teal);color:var(--cq-muted);cursor:not-allowed}
.btn.ghost,.btn-2{background:var(--cq-surface);color:var(--cq-ink);border-color:var(--cq-teal)}
.btn.ghost:hover,.btn-2:hover{background:var(--cq-wash);border-color:var(--cq-teal);color:var(--cq-ink)}
.link{display:inline-flex;align-items:center;gap:var(--cq-s2);min-block-size:var(--cq-target);color:var(--cq-action);font-weight:600;text-decoration:underline;text-underline-offset:.2em}

/* Footer */
footer{border-block-start:var(--cq-bw) solid var(--cq-line);padding-block:var(--cq-s6) var(--cq-s7);color:var(--cq-muted);font-size:var(--cq-fs-sm)}
footer p{margin:0 0 var(--cq-s2);max-inline-size:50em}
footer nav{display:flex;flex-wrap:wrap;gap:0 var(--cq-s4);margin-block-end:var(--cq-s3)}
footer nav a{display:inline-flex;align-items:center;min-block-size:var(--cq-target);color:var(--cq-ink);white-space:pre-wrap}  /* flex items drop the edge spaces of a loose text run next to a bdi: pre-wrap keeps them (RES-1540) */

/* The readiness stamp (js: /cq-stamp.js). Colours come from the tokens, so one drawing serves light and dark. No per-block pass marker: the pass line is 15 of 25 in total. */
.stamp-wrap{border-radius:var(--cq-r-stamp);line-height:0}
.stamp-wrap svg{display:block;max-inline-size:100%;block-size:auto}
.cq-stamp .cqs-edge{fill:none;stroke:var(--cq-teal)}
.cq-stamp .cqs-track{fill:var(--cq-tint);stroke:var(--cq-teal);stroke-width:1.5}
.cq-stamp .cqs-fill{fill:var(--cq-teal);stroke:var(--cq-teal);stroke-width:1.5;stroke-linejoin:round}
.cq-stamp .cqs-num{fill:var(--cq-ink);font-family:var(--cq-font-display);font-variant-numeric:tabular-nums}
.cq-stamp .cqs-lbl{fill:var(--cq-teal);font-family:var(--cq-font)}
@media (prefers-reduced-motion:no-preference){.stamp-land svg{animation:cq-land var(--cq-dur-stamp) ease-out 1}}
@keyframes cq-land{from{opacity:0;transform:scale(1.07) rotate(-3deg)}to{opacity:1;transform:none}}
button.link{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:inherit}.sharebox{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cq-s3) var(--cq-s5);margin:var(--cq-s4) 0 0}
.cq-offer{background:var(--cq-wash);border:var(--cq-bw-input) solid var(--cq-teal);border-radius:var(--cq-r);padding:var(--cq-s4) var(--cq-s5);margin-block:var(--cq-s6)}.cq-offer[hidden]{display:none}
.cq-offer h2{font-size:var(--cq-fs-h3);margin:0 0 var(--cq-s2)}.cq-offer ul{padding-inline-start:1.2em;margin-block:var(--cq-s3)}.cq-offer p{margin-block:var(--cq-s2)}
.cq-offer-route{font-size:var(--cq-fs-sm)}.cq-offer .cta{inline-size:100%;justify-content:center;text-align:center}@media (min-width:40em){.cq-offer .cta{inline-size:auto}}
.cta.cta-quiet{background:var(--cq-surface);color:var(--cq-action);border:var(--cq-bw-input) solid var(--cq-action)}.cta.cta-quiet:hover{background:var(--cq-wash);color:var(--cq-action-hover)}
.cq-plan .cta{justify-content:center;text-align:center;inline-size:100%;box-sizing:border-box}

/* One header row from 64em (RES-3723): the home's second row (Your file, Guides, DELE) sits on the brand row, after the wordmark, instead of a row of its own. Below 64em it stays a second row. */
@media (min-width:64em){header.top{position:relative}header.top .subnav{position:absolute;inset-block-start:0;inset-inline:0;border-block-start:0;pointer-events:none}header.top .subnav .wrap{min-block-size:64px;align-items:center;justify-content:flex-start;gap:var(--cq-s5);padding-inline-start:calc(var(--cq-s6) + 11.5rem)}header.top .subnav a{pointer-events:auto}}