/* ملتقى الصحة المالية 2026 | shared design system (public pages + server pages).
   OWNER: public builder. Rationale and token table: notes/public.md.
   Bump the ?v= on every <link> to this file when you change it (assets cache for 7 days). */

@font-face{font-family:'Readex';src:url('/assets/fonts/readex-pro.woff2') format('woff2');font-weight:160 700;font-style:normal;font-display:swap}
@font-face{font-family:'Alexandria';src:url('/assets/fonts/alexandria.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* brand (sampled from the approved logo) */
  --navy-900:#002F5F;--blue-700:#0C5490;--ocean-600:#00789C;--turquoise-400:#00C0E4;
  --teal-400:#3CB4B4;--mint-200:#90D8D8;--mint-50:#EEF8F8;
  /* ink */
  --ink:#15314F;--ink-2:#2C4A66;--ink-3:#4A6178;--accent-ink:#006F8F;
  /* surfaces */
  --paper:#FFFFFF;--sky-50:#F4F8FB;--sky-100:#E8F1F8;--line:#D6E3EE;--line-2:#C3D5E4;--field:#6E87A0;
  /* states */
  --danger:#B42318;--danger-50:#FEF3F2;--ok:#0B6B5D;--warn:#8A5300;--warn-50:#FFF6E5;
  --focus:#0C5490;
  /* type */
  --font:'Readex',Tahoma,'Segoe UI','Noto Sans Arabic',sans-serif;
  --font-display:'Alexandria','Readex',Tahoma,'Segoe UI','Noto Sans Arabic',sans-serif;
  --t-xs:13px;--t-sm:15px;--t-md:17px;--t-lg:20px;--t-xl:24px;--t-2xl:30px;--t-3xl:38px;--t-4xl:48px;
  /* space */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;
  /* shape */
  --r-sm:6px;--r-md:12px;
  --tap:48px;
  --pulse:url('/assets/pulse.svg');
}

/* ---------- reset + base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--t-md);line-height:1.75;color:var(--ink);background:var(--sky-50);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
html[lang=en] body{line-height:1.6}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{color:var(--navy-900);font-weight:600;line-height:1.35;text-wrap:balance}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--blue-700);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
[tabindex="-1"]:focus{outline:none}

/* ---------- language: both live in the page, html[lang] shows one ---------- */
html[lang=ar] .l-en,html[lang=en] .l-ar{display:none!important}

/* ---------- helpers ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ltr{direction:ltr;unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.muted{color:var(--ink-3)}
.skip{position:absolute;inset-inline-start:var(--s-4);top:-80px;z-index:50;background:var(--navy-900);color:#fff;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);text-decoration:none}
.skip:focus{top:var(--s-3)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:560px;margin:0 auto;padding:0 var(--s-4)}
.wrap-wide{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--s-4)}
@media (min-width:600px){.wrap,.wrap-wide{padding:0 var(--s-5)}}

/* ---------- top bar ---------- */
.top{background:var(--paper);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:64px;padding-top:var(--s-2);padding-bottom:var(--s-2)}
.top-brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;color:var(--navy-900);min-width:0}
.top-brand img{height:40px;width:auto}
.top-brand .nm{font-weight:600;font-size:var(--t-sm);line-height:1.35}
.top-host{height:44px;width:auto}
.lang-btn{flex:0 0 auto;min-height:var(--tap);min-width:var(--tap);padding:0 var(--s-4);background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r-sm);color:var(--navy-900);font-size:var(--t-sm);font-weight:500;line-height:1}
.lang-btn:hover{border-color:var(--blue-700);color:var(--blue-700)}

/* ---------- headings ---------- */
.kicker{color:var(--accent-ink);font-size:var(--t-sm);font-weight:500}
.page-title{font-size:var(--t-2xl);margin-top:var(--s-1)}
.lede{color:var(--ink-2);margin-top:var(--s-2)}
@media (min-width:600px){.page-title{font-size:var(--t-3xl)}}

/* ---------- the pulse (motif): masked from /assets/pulse.svg, tinted by background-color ---------- */
.pulse-rule{display:block;height:3px;margin:var(--s-5) 0;background:var(--turquoise-400);color:var(--turquoise-400)}
.pulse,.pulse-rule,.progress-pulse{position:relative}
@supports ((-webkit-mask-image:url(x.svg)) or (mask-image:url(x.svg))){
  .pulse{display:block;width:76px;height:32px;background-color:currentColor;
    -webkit-mask:var(--pulse) center/contain no-repeat;mask:var(--pulse) center/contain no-repeat}
  /* flat line + the heartbeat near the start side, one masked element. Geometry from pulse.svg
     (164.44 x 69.39, flat at y 40.26, stroke 9): at 20px tall the glyph is 47.4px wide, its flat sits at
     11.6px and its stroke is 2.6px, so the two side bands are 2.6px high at top 9.5px and join seamlessly. */
  .pulse-rule{height:20px;background:currentColor;
    -webkit-mask:linear-gradient(#000,#000) left 0 top 9.5px/calc(100% - 71px) 2.6px no-repeat,var(--pulse) right 24px top 0/47.4px 20px no-repeat,linear-gradient(#000,#000) right 0 top 9.5px/25px 2.6px no-repeat;
    mask:linear-gradient(#000,#000) left 0 top 9.5px/calc(100% - 71px) 2.6px no-repeat,var(--pulse) right 24px top 0/47.4px 20px no-repeat,linear-gradient(#000,#000) right 0 top 9.5px/25px 2.6px no-repeat}
  html[dir=ltr] .pulse-rule{
    -webkit-mask:linear-gradient(#000,#000) right 0 top 9.5px/calc(100% - 71px) 2.6px no-repeat,var(--pulse) left 24px top 0/47.4px 20px no-repeat,linear-gradient(#000,#000) left 0 top 9.5px/25px 2.6px no-repeat;
    mask:linear-gradient(#000,#000) right 0 top 9.5px/calc(100% - 71px) 2.6px no-repeat,var(--pulse) left 24px top 0/47.4px 20px no-repeat,linear-gradient(#000,#000) left 0 top 9.5px/25px 2.6px no-repeat}
  /* loading: a bright blip travels along the line */
  .pulse.is-live{background-color:transparent;background-image:linear-gradient(90deg,currentColor 0,currentColor 38%,#fff 50%,currentColor 62%,currentColor 100%);
    background-size:300% 100%;animation:blip 1.4s linear infinite}
}
@keyframes blip{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-5)}
@media (min-width:600px){.card{padding:var(--s-6)}}
.card-title{font-size:var(--t-xl)}
.card-sub{color:var(--ink-3);font-size:var(--t-sm);margin-top:var(--s-1)}

/* ---------- forms ---------- */
.field{margin-top:var(--s-5)}
.field:first-child{margin-top:0}
.label{display:block;font-weight:500;color:var(--navy-900);margin-bottom:var(--s-2);line-height:1.5}
.label .opt{font-weight:400;color:var(--ink-3);font-size:var(--t-sm);margin-inline-start:var(--s-1)}
.hint{display:block;color:var(--ink-3);font-size:var(--t-sm);margin-top:calc(var(--s-1) * -1);margin-bottom:var(--s-2);line-height:1.6}
.input,.select,.textarea{display:block;width:100%;min-height:52px;padding:var(--s-3) var(--s-4);background:var(--paper);
  border:1.5px solid var(--field);border-radius:var(--r-sm);font-size:var(--t-md);line-height:1.5;color:var(--ink);
  -webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.textarea{min-height:140px;resize:vertical}
.select{padding-inline-end:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23002F5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px 8px;background-repeat:no-repeat;background-position:left 16px center}
html[dir=ltr] .select{background-position:right 16px center}
.input::placeholder,.textarea::placeholder{color:#61768C;opacity:1}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-2)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue-700);box-shadow:0 0 0 3px rgba(12,84,144,.18);outline:none}
.input[dir=ltr]{text-align:left}
html[dir=rtl] .input[dir=ltr]::placeholder{text-align:right}
.input[aria-invalid=true],.select[aria-invalid=true],.textarea[aria-invalid=true]{border-color:var(--danger);border-width:2px}
.field-error{display:flex;gap:var(--s-2);align-items:flex-start;color:var(--danger);font-size:var(--t-sm);font-weight:500;margin-top:var(--s-2);line-height:1.6}
.field-error::before{content:"!";flex:0 0 20px;height:20px;margin-top:2px;border-radius:50%;background:var(--danger);color:#fff;font-size:13px;font-weight:700;line-height:20px;text-align:center}
.counter{display:block;text-align:end;color:var(--ink-3);font-size:var(--t-xs);margin-top:var(--s-1)}
.counter.over{color:var(--danger);font-weight:600}

/* choice tiles (radio). The input stays in the accessibility tree: never display:none it. */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.choices.three{grid-template-columns:repeat(3,1fr)}
.choice{position:relative}
.choice.wide{grid-column:1 / -1}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choice label{display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:52px;padding:var(--s-2) var(--s-3);text-align:center;
  background:var(--paper);border:1.5px solid var(--field);border-radius:var(--r-sm);cursor:pointer;font-weight:500;line-height:1.35;
  transition:border-color .15s,background-color .15s,color .15s}
.choice label:hover{border-color:var(--field)}
.choice input:checked+label{border-color:var(--blue-700);background:#EAF3FB;color:var(--navy-900);box-shadow:inset 0 0 0 1px var(--blue-700)}
.choice input:checked+label::before{content:"";flex:0 0 auto;width:8px;height:14px;margin-top:-3px;border:solid var(--blue-700);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.choice input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);padding:var(--s-2) var(--s-5);
  border:1.5px solid transparent;border-radius:var(--r-sm);font-size:var(--t-md);font-weight:600;line-height:1.3;text-align:center;text-decoration:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s,color .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled=true]{cursor:default;opacity:.7;transform:none}
.btn-primary{background:var(--navy-900);color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
.btn-primary:hover{background:#0A3D74}
.btn-secondary{background:var(--paper);color:var(--navy-900);border-color:var(--navy-900)}
.btn-secondary:hover{background:#EAF3FB}
.btn-quiet{background:var(--sky-100);color:var(--navy-900)}
.btn-quiet:hover{background:#DCE9F4}
.btn-link{min-height:var(--tap);padding:0 var(--s-1);background:none;border:0;color:var(--blue-700);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.btn-block{display:flex;width:100%}
/* the three flows keep the colour of their QR poster: register navy, questions ocean, survey mint */
.btn-q{background:var(--ocean-600);color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.btn-q:hover{background:#006A8A}
.btn-s{background:var(--mint-200);color:#0A4F45;box-shadow:inset 0 -2px 0 rgba(10,79,69,.25)}
.btn-s:hover{background:#82D0D0}
.btn .ic{flex:0 0 auto;width:26px;height:26px}
.btn-lg{min-height:56px;font-size:var(--t-lg)}
.btn .pulse{width:44px;height:16px;color:var(--turquoise-400)}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.btn-row .btn{padding-left:var(--s-2);padding-right:var(--s-2)}

/* ---------- messages ---------- */
.err-summary{border:2px solid var(--danger);border-inline-start-width:6px;border-radius:var(--r-sm);background:var(--danger-50);padding:var(--s-4);margin-bottom:var(--s-5)}
.err-summary:focus{outline:none;box-shadow:0 0 0 3px rgba(180,35,24,.25)}
.err-summary.warn{border-color:var(--warn);background:var(--warn-50)}
.err-summary.warn h2,.err-summary.warn li,.err-summary.warn a{color:var(--warn)}
.err-summary h2{color:var(--danger);font-size:var(--t-md);font-weight:600}
.err-summary ul{margin-top:var(--s-2)}
.err-summary li+li{margin-top:var(--s-1)}
.err-summary a{color:var(--danger);font-weight:500}
.notice{border:1px solid var(--line);border-inline-start:4px solid var(--blue-700);border-radius:var(--r-sm);background:var(--paper);padding:var(--s-3) var(--s-4);line-height:1.65}
.notice.ok{border-color:#B9E2DA;border-inline-start-color:var(--ok);background:var(--mint-50);color:var(--ok)}
.notice.warn{border-color:#F1D9A8;border-inline-start-color:var(--warn);background:var(--warn-50);color:var(--warn)}
.notice.bad{border-color:#F4C7C3;border-inline-start-color:var(--danger);background:var(--danger-50);color:var(--danger)}
.notice b{font-weight:600}

/* role chip (not a pill) */
.chip{display:inline-flex;align-items:center;gap:var(--s-2);padding:2px var(--s-3);border-radius:var(--r-sm);background:var(--mint-50);
  border:1px solid #BFE3E3;color:var(--ok);font-size:var(--t-sm);font-weight:500;line-height:1.8}

/* ---------- saved ticket (device recovery) ---------- */
.saved{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--paper);border:1px solid var(--line);
  border-inline-start:4px solid var(--turquoise-400);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);min-height:64px}
.saved:hover{border-color:var(--blue-700)}
.saved .s-txt{flex:1;min-width:0;line-height:1.5}
.saved .s-name{display:block;font-weight:600;color:var(--navy-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[dir=ltr] .saved .s-name{text-align:left}
.saved .s-meta{display:block;font-size:var(--t-sm);color:var(--ink-3)}
.saved .s-go{flex:0 0 auto;font-weight:600;color:var(--blue-700);font-size:var(--t-sm)}
.saved+.saved{margin-top:var(--s-2)}

/* survey promotion card (mint = the survey's colour everywhere) */
.promo{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4);background:var(--mint-50);border:2px solid var(--teal-400);border-radius:var(--r-md);text-decoration:none;color:#0A4F45}
.promo:hover{background:#E2F4F4}
.promo-ic{flex:0 0 44px;width:44px;height:44px;color:var(--ok)}
.promo-t{flex:1;line-height:1.45}
.promo-t b{display:block;font-weight:600;font-size:var(--t-md)}
.promo-t small{display:block;font-size:var(--t-sm);color:var(--ink-2);margin-top:2px}

/* ---------- partners strip ---------- */
.partners{display:flex;align-items:center;justify-content:center;gap:var(--s-6);flex-wrap:wrap}
.partners figure{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.partners figcaption{font-size:var(--t-xs);color:var(--ink-3)}
.partners img{height:52px;width:auto}
.foot{border-top:1px solid var(--line);background:var(--paper);padding:var(--s-6) 0;margin-top:var(--s-7)}
.foot-note{text-align:center;color:var(--ink-3);font-size:var(--t-xs);margin-top:var(--s-5)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  body{background:#fff}
  .top,.foot,.no-print{display:none!important}
}