/* Masar core base: typography and components shared by every Masar site (masar-core/base.css). Needs tokens.css and /fonts/fonts.css. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--font);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-kerning:normal}
::selection{background:var(--teal-soft);color:var(--ink)}
img,svg,video{max-width:100%}
:lang(ar),[dir=rtl]{line-height:1.8}
h1,h2,h3{font-weight:600;line-height:var(--lh-tight);letter-spacing:-.015em;margin:0 0 var(--s3);text-wrap:balance}
h1{font-size:var(--fs-2xl);letter-spacing:-.025em} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-l);letter-spacing:-.01em}
p{margin:0 0 var(--s4);text-wrap:pretty} a{color:var(--teal);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 6px color-mix(in srgb,var(--teal) 18%,transparent)}
.skip{position:absolute;inset-inline-start:var(--s4);top:-60px;background:var(--ink);color:var(--paper);padding:var(--s2) var(--s4);border-radius:var(--r-s);z-index:1000}
.skip:focus{top:var(--s2)}
main:focus{outline:none}
.wrap{width:min(var(--wrap),100% - 2*var(--s4));margin-inline:auto}
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:var(--s4);min-height:60px}
.brand{display:inline-flex;align-items:center;min-height:var(--tap);gap:var(--s3);font-weight:600;color:var(--ink);text-decoration:none;font-size:1.05rem}
.brand svg,.brand .mk{width:34px;height:34px;flex:none}
.lk{display:inline-flex;align-items:center;gap:10px;font-size:1.05rem;line-height:1}.lk b{font-weight:600;letter-spacing:-.01em}.lk i{width:1.5px;height:1.25em;background:var(--line);border-radius:1px}.lk span{font-weight:400}
.brand small{font-weight:400;color:var(--muted);font-size:.8rem}
.grow{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:46px;padding:0 22px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 1rem/1 var(--font);text-decoration:none;cursor:pointer;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.btn:hover{box-shadow:var(--sh-1);transform:translateY(-1px);border-color:color-mix(in srgb,var(--teal) 40%,var(--line))}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn[aria-busy=true]{position:relative;color:transparent;pointer-events:none}
.btn[aria-busy=true]::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-color:var(--teal-ink) transparent var(--teal-ink) transparent;animation:m-spin .8s linear infinite}
.btn.primary{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
.btn.primary:hover{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 90%,var(--ink))}
.btn.ghost{background:transparent}
.btn.saffron{background:var(--saffron);border-color:var(--saffron);color:var(--saffron-ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s5);box-shadow:var(--sh-1)}
.eyebrow{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:var(--s3)}
.prose{max-width:720px;margin-inline:auto;padding:var(--s6) 0 var(--s7)}
.prose h2{margin-top:var(--s6);font-size:1.4rem} .prose ul{padding-inline-start:1.2em} .prose li{margin-bottom:var(--s2)}
.notice{border-inline-start:4px solid var(--saffron);background:var(--surface);padding:var(--s4) var(--s5);border-radius:var(--r-m);box-shadow:var(--sh-1);margin:var(--s5) 0}
.field{display:block;margin-bottom:var(--s4)} .field span{display:block;font-weight:500;margin-bottom:var(--s2);font-size:.95rem}
.field input,.field textarea,.field select{width:100%;min-height:var(--tap);padding:13px 14px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--paper);color:var(--ink);font:400 1rem var(--font);transition:border-color var(--dur-2) var(--ease)}
.field input:hover,.field textarea:hover,.field select:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
.field [aria-invalid=true]{border-color:var(--bad)}
.field .hint{display:block;margin-top:var(--s2);font-size:var(--fs-xs);color:var(--muted)}
.field .err{display:block;margin-top:var(--s2);font-size:var(--fs-s);color:var(--bad)}
.field textarea{min-height:140px;resize:vertical}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.m-foot{border-top:1px solid var(--line);margin-top:var(--s7);padding:var(--s5) 0 var(--s6);font-size:.88rem;color:var(--muted)}
.m-foot .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center;justify-content:space-between}
.m-foot nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.m-foot a{color:var(--muted);text-decoration:none}.m-foot a:hover{color:var(--ink);text-decoration:underline}
.m-foot b{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.topbar .btn{min-height:40px;padding:0 16px;font-size:.92rem;white-space:nowrap;flex:none}
.topbar .brand{min-width:0;white-space:nowrap}.topbar .brand>span:not(.lk){overflow:hidden;text-overflow:ellipsis}
.wide{display:none}@media (min-width:560px){.wide{display:inline}}

/* ---- states: empty, loading, error, success (use these classes, do not invent new ones) ---- */
.m-empty{text-align:center;padding:var(--s6) var(--s5);color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-l)}
.m-empty b{display:block;color:var(--ink);font-size:var(--fs-l);margin-bottom:var(--s2)}
.m-alert{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4) var(--s5);border-radius:var(--r-m);border:1px solid var(--line);border-inline-start-width:4px;background:var(--surface)}
.m-alert.err{border-inline-start-color:var(--bad)}.m-alert.ok{border-inline-start-color:var(--good)}.m-alert.warn{border-inline-start-color:var(--warn)}
.m-skel{display:block;border-radius:var(--r-s);background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:m-shimmer 1.4s linear infinite;min-height:1em}
@keyframes m-spin{to{transform:rotate(360deg)}}
@keyframes m-shimmer{to{background-position:-200% 0}}
@keyframes m-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.m-rise{animation:m-rise var(--dur-3) var(--ease) both}.m-rise:nth-child(2){animation-delay:.06s}.m-rise:nth-child(3){animation-delay:.12s}}
/* ---- 404 / error page ---- */
.m-404{min-height:60vh;display:grid;place-items:center;text-align:center;padding:var(--s7) 0}
.m-404 .code{font-size:clamp(4rem,16vw,8rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--teal);margin:0 0 var(--s3)}
.m-404 p{color:var(--muted);max-width:44ch;margin-inline:auto}
.m-404 .cta{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s5)}
/* ---- touch targets: 44px minimum on phones and touch screens ---- */
@media (max-width:640px),(pointer:coarse){
  .topbar .btn{min-height:var(--tap)}
  .m-foot nav{gap:0 var(--s2)}
  .m-foot a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s2)}
  .prose a{padding-block:2px}
}
@media (forced-colors:active){.btn{border:2px solid ButtonText}.btn.primary{background:Highlight;color:HighlightText}}
/* ---- print: legal pages and documents print clean on A4 ---- */
@media print{
  :root{--paper:#fff;--surface:#fff;--ink:#000;--muted:#333;--line:#999}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5}
  .topbar,.skip,.m-foot nav,.btn,.mf,[data-masar-family],.cta{display:none!important}
  .m-foot{border-top:1px solid #999;margin-top:24pt;padding:8pt 0}
  .wrap,.prose{width:auto;max-width:none;margin:0;padding:0}
  .prose a{color:#000;text-decoration:underline}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#333;word-break:break-all}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  p,li,.notice{orphans:3;widows:3;break-inside:avoid}
  .notice{box-shadow:none;border:1px solid #999;border-inline-start:4px solid #000}
  @page{margin:18mm 16mm}
}