/* Base, type and layout helpers. */
/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:calc(var(--safe-t) + 72px);scroll-padding-bottom:calc(var(--nav-h) + var(--safe-b) + 16px)}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-3);line-height:var(--lh-b);font-weight:var(--fw-1);font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit;margin:0}
button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
a,summary,label[for],select,[role=button],[role=tab],[role=switch]{cursor:pointer}
button:disabled,input:disabled,select:disabled{cursor:not-allowed}
img{max-width:100%}
svg{flex-shrink:0}
input,textarea,select{min-width:0}
input::placeholder,textarea::placeholder{color:var(--ink-3);font-weight:var(--fw-1);opacity:1}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--blue-100);color:var(--ink)}
[hidden]{display:none!important}
summary{list-style:none}summary::-webkit-details-marker{display:none}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- type ---------- */
.h1,.h2,.big,.huge,.code{margin:0}
.h1{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-6);line-height:var(--lh-d);letter-spacing:var(--tr-d);word-spacing:.08em;color:var(--ink)}
.h1.sm{font-size:var(--fs-5)}
.h1.xl{font-size:var(--fs-6)}
.h2{font-family:var(--font);font-size:var(--fs-4);font-weight:var(--fw-2);line-height:var(--lh-t);letter-spacing:var(--tr-t);color:var(--ink)}
.h1.light,.h2.light{color:var(--on-navy)}
.p{margin:0;color:var(--ink-2)}
.mute{color:var(--ink-3)}
.sm{font-size:var(--fs-2)}
strong.lg,b.lg{font-size:var(--fs-4);line-height:var(--lh-t)}
.b{font-weight:var(--fw-2)}
.nowrap,.nw{white-space:nowrap}
.center{text-align:center;justify-content:center}
.warn{color:var(--warn)}
.lab{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin:var(--s-2) 0 0;font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:var(--tr-l);text-transform:uppercase;line-height:var(--lh-t);color:var(--ink-3)}
.lab>span:last-child:not(:first-child){text-transform:none;letter-spacing:0;white-space:nowrap}
.lab-l,.lab-g,.lab-c,.acc-t,.grp-l,.nav-t,.g2-k,.bt-k,.tour-n{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:var(--tr-l);text-transform:uppercase;line-height:var(--lh-t);color:var(--ink-3)}
.lab-g{color:var(--accent-ink)}.lab-c{color:var(--warn)}.lab-l{color:var(--on-navy-2)}
[dir=rtl] .lab,[dir=rtl] .lab-l,[dir=rtl] .lab-g,[dir=rtl] .lab-c,[dir=rtl] .acc-t,[dir=rtl] .grp-l,[dir=rtl] .nav-t,[dir=rtl] .g2-k,[dir=rtl] .bt-k,[dir=rtl] .stat-l{text-transform:none}
/* numbers that matter: condensed display, tabular */
.big,.huge,.stat-v,.num,.kpi b,.acq-v,.ms-v,.ssn-big,.code,.clock{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);line-height:var(--lh-d);letter-spacing:var(--tr-d);font-variant-numeric:tabular-nums lining-nums}
.huge{font-size:var(--fs-6)}
.big{font-size:var(--fs-5)}
.huge small,.big small,.stat-v small,.kpi b small,.ms-v small,.ssn-big small{font-family:var(--font);font-variation-settings:normal;font-stretch:100%;font-size:var(--fs-2);font-weight:var(--fw-2);letter-spacing:0;color:var(--ink-3);margin-inline-start:var(--s-1)}
/* a count "of" a total (9/12, 0/3) reads left to right in Arabic too */
[dir=rtl] .ms-v,[dir=rtl] .ssn-big{direction:ltr;unicode-bidi:isolate;text-align:right}
.code{font-size:var(--fs-5);letter-spacing:.06em;white-space:nowrap}
.clock{font-size:var(--fs-4);color:var(--accent-ink)}
[dir=rtl] .h1,[dir=rtl] .huge,[dir=rtl] .big,[dir=rtl] .stat-v{text-transform:none}

/* ---------- layout helpers ---------- */
/* a header row: the title keeps its words together; a note or controls that do not fit beside it move under it */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-1) var(--s-3);min-width:0}
.top>strong:first-child{flex-shrink:0;max-width:100%}
.top.end{align-items:flex-end}
.top.sm{font-size:var(--fs-2)}
.top>span:last-child:not(:first-child),.top>small:last-child:not(:first-child){text-align:end}
.grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* inside a column a line break would only add an empty line */
.grow>br{display:none}
.two{display:flex;gap:var(--s-2)}.two>*{flex:1}
.stack{display:flex;flex-direction:column;gap:var(--s-3)}.stack.tight{gap:var(--s-2)}
.g2,.g3,.g4,.g5{display:grid;gap:var(--s-3)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
/* two text fields side by side clip their values on a phone: stack them */
@media (max-width:480px){.g2:has(>.field+.field){grid-template-columns:minmax(0,1fr)}}
@media (max-width:999px){.g5{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--s-4)}}
@media (max-width:699px){.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-4)}.g3:has(>.card),.g3.w3{grid-template-columns:minmax(0,1fr)}}
.span2{grid-column:span 2}
.g2>*,.g3>*,.g4>*,.g5>*,.stack>*,.two>*{min-width:0}
.row-card,.card.row-card{display:flex;flex-direction:row;align-items:center;gap:var(--s-3)}
.row-actions{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.row-actions.nw{flex-wrap:nowrap;flex-shrink:0}
.right-num{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.right-num small{font-size:var(--fs-1);font-weight:var(--fw-2)}
.right-num small.good,.good{color:var(--ok)}.right-num small.bad,.bad{color:var(--bad)}
.vsep{width:1px;align-self:stretch;background:var(--line)}
.or{display:flex;align-items:center;gap:var(--s-3);color:var(--ink-3);font-size:var(--fs-2)}.or span{flex:1;height:1px;background:var(--line-2)}

/* display titles break into balanced lines, never a lone word on the last line */
.h1,.h2,.th-title,.rp-h h2{text-wrap:balance}
/* phone numbers, codes and amounts typed in Arabic layouts keep their left-to-right order */
[dir=rtl] input[type=tel],[dir=rtl] input[inputmode=tel],[dir=rtl] input[type=email],[dir=rtl] input[inputmode=numeric],[dir=rtl] input[inputmode=decimal]{direction:ltr;text-align:right}
/* text people wrote (notes, requests, bios) takes its direction from its own first letters, so English punctuation stays put in Arabic */
[dir=rtl] [data-notr]{unicode-bidi:plaintext}
/* one title size per level: a page with a Back link (a sub-page) uses the smaller title, a tab's root page the large one */
.scr:has(>.back,>.top>.back) .h1{font-size:var(--fs-5)}
.measure{max-width:75ch}
/* tabular figures where numbers line up (not on all text: in Inter they widen the hyphen, "Al - Harbi") */
:is(td.num,th.num,.tbl td.num,input[inputmode=decimal],input[inputmode=numeric],.otp,.sr-n,.num,.hc-num,.huge,.big,.stat-v,.stat-s,time,.clock,.kpi b,.rank-v,.lg-cnt,.tt-pk,.pace-n,.ins-v,.right-num,.delta,.tg-v,.hb-v,.bar-v,.cmp){font-variant-numeric:tabular-nums}
/* the condensed display face has a very narrow space: "SAR 3,044" would read as one word */
.stat-v,.hc-num,.huge,.big,.kpi b,.live-strip dd{word-spacing:.14em}