/* CCC Subcontracts: the app's design system (UX overhaul, Task 2). Phone first, RTL, brand tokens only.
   Order: fonts, tokens, base, shell, layout, lists, status, tabs/chips/search, contract card, lifecycle/stepper,
   forms, combobox, buttons, alerts/empty, login, legacy (old class names until Tasks 3-6 replace those pages). */

@font-face{font-family:Tajawal;font-weight:400;font-display:swap;src:url(/static/fonts/Tajawal-400.ttf) format("truetype")}
@font-face{font-family:Tajawal;font-weight:500;font-display:swap;src:url(/static/fonts/Tajawal-500.ttf) format("truetype")}
@font-face{font-family:Tajawal;font-weight:700;font-display:swap;src:url(/static/fonts/Tajawal-700.ttf) format("truetype")}
@font-face{font-family:Tajawal;font-weight:800;font-display:swap;src:url(/static/fonts/Tajawal-800.ttf) format("truetype")}

:root{
  --navy:#0B2545;--navy-2:#143A6B;--parchment:#F5F0E8;--sand:#C9A876;--terra:#A64B2A;
  --graphite:#1F2937;--ink-2:#4B5563;--line:#D9DEE4;--surface:#fff;
  --ok:#1F7A4D;--ok-bg:#E6F4EC;--warn:#8A5A00;--warn-bg:#FFF4D6;--orange:#B4530A;--orange-bg:#FFEBDD;
  --danger:var(--terra);--danger-bg:#FBEAE4;--info:var(--navy);--info-bg:#E8EEF7;--neutral-bg:#EEF1F4;
  --line-strong:#8A909A;   /* ink-2 at 65% on white: control borders reach 3:1 (WCAG 1.4.11) */
  --r-1:8px;--r-2:12px;--r-pill:999px;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --tap:48px;--t-sm:14px;--t-md:16px;--t-lg:18px;--t-xl:22px;--top-h:56px;
  --shadow:0 2px 4px rgb(11 37 69 / .06),0 8px 24px rgb(11 37 69 / .12);
  color-scheme:light;
}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 16px)}
html:has(.sticky-actions){scroll-padding-bottom:110px}   /* focused fields never hide under the bar */
body{margin:0;min-height:100dvh;font-family:Tajawal,system-ui,sans-serif;font-size:var(--t-md);line-height:1.5;background:var(--parchment);color:var(--graphite);-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.js [data-nojs],html:not(.js) [data-js]{display:none!important}   /* the "js" class is set inline in <head> */
h1,h2,h3{color:var(--navy);line-height:1.3;text-wrap:balance}
h1{font-size:var(--t-xl);font-weight:800;margin:var(--s-2) 0 var(--s-4)}
h2{font-size:var(--t-lg);font-weight:700;margin:0 0 var(--s-3)}
h3{font-size:var(--t-md);font-weight:700;margin:var(--s-4) 0 var(--s-2)}
p{margin:0 0 var(--s-3)}
a{color:var(--navy);text-underline-offset:3px}
img{max-width:100%}
:focus-visible{outline:3px solid var(--navy-2);outline-offset:2px}
a,button,label,summary,select,input,textarea{touch-action:manipulation}
.icon{display:inline-block;width:20px;height:20px;flex-shrink:0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;z-index:100;inset-inline-start:8px;top:-80px;padding:12px 16px;border-radius:var(--r-1);background:var(--navy);color:#fff}
.skip:focus{top:8px}
.muted{color:var(--ink-2)}
.page-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:calc(-1 * var(--s-3)) 0 var(--s-4);color:var(--ink-2)}
.note{white-space:pre-line}
bdi,.who{unicode-bidi:plaintext}   /* Airtable names such as "Marota Apt." keep their punctuation in place */
.num,.money .num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}

/* ---- shell: sticky app bar ---- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s-2);min-height:var(--top-h);
  padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));
  background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;flex-shrink:0;min-height:44px;padding-inline:4px}
.brand img{display:block;height:28px;width:auto}
.top-back{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:var(--r-1);color:var(--navy)}
.top-title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700;color:var(--navy)}
@media (max-width:480px){.top:has(.top-back) .who{display:none}}   /* a back arrow + logo + title + name do not fit a phone: the name goes (it is on the projects page) */
@media (max-width:480px){.top-user:has([href="/users"]) .who{display:none}}   /* the admin's three buttons leave his name no room on a phone: "N…" helps no one */
.top-user{display:flex;align-items:center;gap:2px;flex-shrink:1;min-width:0;max-width:45%}
.top-user form{margin:0}
.who{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--t-sm);color:var(--ink-2)}

/* ---- layout ---- */
.wrap{max-width:720px;margin:0 auto;padding:var(--s-4) max(16px,env(safe-area-inset-right)) var(--s-6) max(16px,env(safe-area-inset-left))}
body.has-sticky .wrap,body:has(.sticky-actions) .wrap{padding-bottom:calc(var(--tap) + 56px + env(safe-area-inset-bottom))}
.stack{display:flex;flex-direction:column;gap:var(--s-4)}
.stack>*{margin:0}
.card{margin:0 0 var(--s-4);padding:var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2)}
.card-title{margin:0 0 var(--s-1);font-size:var(--t-lg);font-weight:700;color:var(--navy)}
.card-sub{margin:0 0 var(--s-3);font-size:var(--t-sm);color:var(--ink-2)}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin:0 0 var(--s-4)}
@media (min-width:600px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:72px;padding:var(--s-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);color:var(--graphite);text-decoration:none}
.kpi-n{font-size:var(--t-xl);font-weight:800;line-height:1.2;color:var(--navy);font-variant-numeric:tabular-nums}
.kpi-l{font-size:var(--t-sm);color:var(--ink-2)}
.kpi-warn{background:var(--warn-bg);border-color:var(--warn)}
.kpi-warn .kpi-n{color:var(--warn)}

/* ---- lists: tappable rows and register lines ---- */
.list{margin:0 0 var(--s-4);padding:0;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.item{display:flex;align-items:center;gap:var(--s-3);min-height:56px;margin:0 0 var(--s-2);padding:var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);color:var(--graphite);text-decoration:none}
.list>.item,.list>li>.item{margin:0;border:0;border-radius:0}
.list>.item+.item,.list>li+li>.item{border-top:1px solid var(--line)}
.item-main{flex:1;min-width:0;overflow-wrap:anywhere}
.item-meta,.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;font-size:var(--t-sm);color:var(--ink-2)}
a.item::after{content:"";flex-shrink:0;width:8px;height:8px;margin-inline-start:4px;border-left:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg)}   /* RTL "forward" chevron */
.line{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) 0;border-top:1px solid var(--line)}
.line>:last-child{flex:1;min-width:0;overflow-wrap:anywhere}
.line>.dot{margin-top:7px}
.line:target{background:var(--info-bg);box-shadow:0 0 0 8px var(--info-bg);border-radius:4px}
.pill,.badge{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 8px;border-radius:var(--r-pill);background:var(--neutral-bg);color:var(--graphite);font-size:var(--t-sm);font-weight:500;white-space:nowrap}
.pill.grey,.badge.grey{background:var(--surface);border:1px dashed var(--ink-2);color:var(--ink-2)}

/* ---- status: pill with text, 10 px dot beside text; colour is never the only signal ---- */
.st{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--neutral-bg);color:var(--ink-2);font-size:var(--t-sm);font-weight:700;white-space:nowrap;text-decoration:none}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-open,.st-sentback{background:var(--danger-bg);color:var(--danger)}
.st-attention,.st-review{background:var(--warn-bg);color:var(--warn)}
.st-draft{background:var(--info-bg);color:var(--info)}
.st-approved{background:var(--orange-bg);color:color-mix(in srgb,var(--orange) 85%,#000)}   /* 4.5:1 on its tint */
.st-signed,.st-active{background:var(--ok-bg);color:var(--ok)}
.st-na,.st-unknown,.st-cancelled,.st-closed{background:var(--neutral-bg);color:var(--ink-2)}
.dot{display:inline-block;flex-shrink:0;width:10px;height:10px;border-radius:50%;background:var(--ink-2)}
.dot-open,.dot-sentback{background:var(--danger)}
.dot-attention,.dot-review{background:var(--warn)}
.dot-draft{background:var(--surface);box-shadow:inset 0 0 0 2px var(--info)}
.dot-approved{background:var(--orange)}
.dot-signed,.dot-active{background:var(--ok)}
.dot-na{background:var(--graphite)}
.dot-unknown,.dot-cancelled,.dot-closed{background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink-2)}

/* ---- tabs, filter chips, list search ---- */
.tabs{display:flex;gap:4px;margin:0 0 var(--s-4);padding:4px;background:var(--neutral-bg);border-radius:var(--r-2);overflow-x:auto;scrollbar-width:none}
html:not(.js) .tabs{display:none}   /* without JS every panel shows, stacked, with its own h2 */
.tab{flex:1 0 auto;min-height:44px;padding:0 var(--s-3);border:0;border-radius:var(--r-1);background:transparent;color:var(--ink-2);font-family:inherit;font-size:var(--t-md);font-weight:500;white-space:nowrap;cursor:pointer}
.tab[aria-selected=true]{background:var(--surface);color:var(--navy);font-weight:700;box-shadow:0 1px 3px rgb(11 37 69 / .18)}
.js [data-tabs] .panel>h2:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.panel+.panel{margin-top:var(--s-6)}
.js [data-tabs]>.panel{margin-top:0}   /* with JS one panel shows at a time: no gap above the second or third */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-3)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--graphite);font-family:inherit;font-size:var(--t-sm);font-weight:500;cursor:pointer}
.sortbar{align-items:center}.sort-l{font-size:var(--t-sm);color:var(--ink-2);margin-inline-end:2px}a.chip{text-decoration:none}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.chip.on::before,.seg-opt:has(:checked)::before,.seg-opt.on::before{content:"";width:5px;height:10px;margin-top:-3px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}   /* tick */
.search{position:relative;display:block;margin:0 0 var(--s-3)}
.search>.icon{position:absolute;inset-inline-start:14px;top:14px;color:var(--ink-2);pointer-events:none}
.search>input{padding-inline-start:44px}

/* ---- contract card ---- */
.contract-card{display:block;color:inherit;text-decoration:none}
.cc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-2)}
.cc-title{margin:0;font-size:var(--t-lg);font-weight:700;color:var(--navy);overflow-wrap:anywhere}
.cc-sub,.cc-codes,.cc-date{margin:2px 0 0;font-size:var(--t-sm);color:var(--ink-2)}
.money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin:var(--s-3) 0;padding:var(--s-3) var(--s-3);background:var(--parchment);border-radius:var(--r-1)}
.money>div{min-width:0}
.money dt,.money .lbl{font-size:var(--t-sm);color:var(--ink-2)}
.money dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.money dd,.money .num{text-align:right}   /* RTL start, under its label */
.alert-inline{display:flex;align-items:flex-start;gap:6px;margin-top:var(--s-2);padding:6px 10px;border-radius:var(--r-1);background:var(--warn-bg);color:var(--warn);font-size:var(--t-sm);font-weight:500}
.alert-inline .icon{width:18px;height:18px;margin-top:1px}
progress{display:block;width:100%;height:8px;border:0;border-radius:var(--r-pill);overflow:hidden;background:var(--neutral-bg);accent-color:var(--ok);appearance:none}
progress::-webkit-progress-bar{background:var(--neutral-bg)}
progress::-webkit-progress-value{background:var(--ok)}
progress::-moz-progress-bar{background:var(--ok)}
table.pay{width:100%;margin-top:var(--s-2);border-collapse:collapse;font-size:var(--t-sm)}
table.pay td,table.pay th{padding:8px 4px;border-top:1px solid var(--line);vertical-align:top;text-align:start}
table.pay td.n{white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}

/* ---- lifecycle (contract status) and stepper (builder): circles joined by a line ---- */
.lifecycle,.stepper{display:flex;margin:0 0 var(--s-4);padding:0;list-style:none}
.lifecycle>li,.stepper>li{position:relative;flex:1 1 0;min-width:0;text-align:center;font-size:var(--t-sm);line-height:1.3;color:var(--ink-2)}
.lifecycle>li+li::before,.stepper>li+li::before{content:"";position:absolute;z-index:0;top:13px;inset-inline-start:-50%;width:100%;height:2px;background:var(--line)}
.lifecycle>li{display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-end;gap:6px}
.lifecycle>li::after{content:"";position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);color:#fff;font-weight:800}
.lifecycle>li.done::after{background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--ok)}
.lifecycle>li.current{color:var(--navy);font-weight:700}
.lifecycle>li.current::after{background:var(--navy);border-color:var(--navy);box-shadow:0 0 0 4px var(--info-bg)}
.lifecycle>li.danger{color:var(--danger);font-weight:700}
.lifecycle>li.danger::after{content:"!";background:var(--danger);border-color:var(--danger)}
.lifecycle>li:is(.done,.current,.danger)::before{background:var(--ok)}
.stepper>li>*{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;color:inherit;text-decoration:none}
.stepper-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);font-weight:700}
.stepper-n .icon{width:16px;height:16px;stroke-width:3}
.stepper .done .stepper-n,.stepper .current .stepper-n{background:var(--navy);border-color:var(--navy);color:#fff}
.stepper .current{color:var(--navy);font-weight:700}
.stepper .current .stepper-n{box-shadow:0 0 0 4px var(--info-bg)}
.stepper a .stepper-l{text-decoration:underline;text-underline-offset:3px}
.stepper>li:is(.done,.current)::before{background:var(--navy)}

/* ---- forms ---- */
fieldset{min-width:0;margin:0;padding:0;border:0}
legend{padding:0}
.field{margin:0 0 var(--s-4)}
.field>label,.field>legend,.field>.label{display:block;margin:0 0 6px;font-weight:500;color:var(--graphite)}
input:where(:not([type=checkbox],[type=radio],[type=file],[type=hidden],[type=range])),select,textarea{display:block;width:100%;min-height:var(--tap);margin:0;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-1);background-color:var(--surface);color:var(--graphite);font-family:inherit;font-size:16px;line-height:1.4}
select{appearance:none;padding-inline-end:40px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 12px center/18px}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--navy)}
input:disabled,select:disabled,textarea:disabled{background-color:var(--neutral-bg);color:var(--ink-2);cursor:not-allowed}
[aria-invalid=true],.field:has(.error) :is(input,select,textarea){border-color:var(--danger)}
input[type=checkbox],input[type=radio]{width:22px;height:22px;margin:0;flex-shrink:0;accent-color:var(--navy)}
.help{display:block;margin:6px 0 0;font-size:var(--t-sm);color:var(--ink-2)}
.error{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:var(--t-sm);font-weight:500;color:var(--danger)}
.error .icon{width:18px;height:18px;margin-top:1px}
.inline-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-3)}
@media (max-width:339px){.inline-2{grid-template-columns:1fr}}
.check{display:flex;align-items:flex-start;gap:var(--s-3);min-height:var(--tap);padding:var(--s-3) 0;cursor:pointer}
.check+.check{border-top:1px solid var(--line)}
.check>input{margin-top:1px}
.check>:not(input){flex:1;min-width:0;overflow-wrap:anywhere}
.check:has(input:disabled){cursor:default}
.seg{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;border:0}
.seg-opt{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-1);background:var(--surface);font-weight:500;cursor:pointer}
.seg-opt>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}   /* still focusable */
.seg-opt:has(:checked),.seg-opt.on{background:var(--navy);border-color:var(--navy);color:#fff}
.seg-opt:has(:focus-visible){outline:3px solid var(--navy-2);outline-offset:2px}
.seg-opt:has(:disabled){opacity:.5;cursor:not-allowed}
.disclosure{margin:0 0 var(--s-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2)}
.disclosure>summary{display:flex;align-items:center;gap:var(--s-2);min-height:var(--tap);padding:var(--s-2) var(--s-4);font-weight:700;color:var(--navy);list-style:none;cursor:pointer}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary::after{content:"";flex-shrink:0;width:8px;height:8px;margin-inline-start:auto;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.disclosure[open]>summary::after{transform:rotate(135deg)}
.disclosure>summary~*{margin-inline:var(--s-4)}
.disclosure>summary~*:last-child{margin-bottom:var(--s-4)}
/* .disclosure.inline: a small toggle under a tick row (step 2's "تعديل" of a typed line), no card chrome, in line with the row's text */
.disclosure.inline{margin:calc(-1 * var(--s-2)) 0 var(--s-2);margin-inline-start:calc(22px + var(--s-3));background:none;border:0;border-radius:0}
.disclosure.inline>summary{display:inline-flex;min-height:44px;padding:0 2px;font-size:var(--t-sm);font-weight:500}
.disclosure.inline>summary::after{margin-inline-start:2px}
.disclosure.inline>summary .icon{width:18px;height:18px}
.disclosure.inline>summary~*{margin-inline:0}
.disclosure.inline>summary~*:last-child{margin-bottom:var(--s-2)}
.disclosure.inline+.check{border-top:1px solid var(--line)}   /* .check+.check's rule, across the box */
.pay-rows{display:flex;flex-direction:column;gap:var(--s-2);margin:0 0 var(--s-3)}
.pay-row{display:flex;align-items:center;gap:var(--s-2)}
.pay-row>input:first-child{flex:0 0 88px;width:88px;text-align:center}
.pay-row>input:not(:first-child){flex:1;min-width:0}
.pay-sum{margin:0 0 var(--s-3);font-weight:700}
.pay-sum.ok{color:var(--ok)}
.pay-sum.bad{color:var(--danger)}
.code-chip{margin:0 0 var(--s-2);padding:var(--s-3);background:var(--parchment);border:1px solid var(--line);border-radius:var(--r-2)}
.code-chip-head{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-2);font-weight:700}
.code-chip-head>:first-child{flex:1;min-width:0;overflow-wrap:anywhere}

/* ---- combobox (built by app.js from select[data-combo]; the select stays, hidden, and is what posts) ---- */
.combo-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.combo{position:relative;scroll-margin-top:calc(var(--top-h) + 16px)}
.combo>.icon{position:absolute;inset-inline-start:14px;top:14px;color:var(--ink-2);pointer-events:none}
.combo .combo-input{padding-inline-start:44px;padding-inline-end:48px;text-overflow:ellipsis}
.combo-clear{position:absolute;inset-inline-end:2px;top:2px;color:var(--ink-2)}
.combo-list{position:absolute;z-index:30;inset-inline:0;top:calc(100% + 4px);max-height:40vh;margin:0;padding:4px;list-style:none;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-2);box-shadow:var(--shadow)}
.combo.up .combo-list{top:auto;bottom:calc(100% + 4px)}
.combo-opt{display:flex;flex-direction:column;justify-content:center;min-height:var(--tap);padding:8px 12px;border-radius:var(--r-1);cursor:pointer;overflow-wrap:anywhere}
.combo-opt[aria-selected=true]{background:var(--info-bg);font-weight:700;box-shadow:inset -3px 0 0 var(--navy)}   /* bar on the RTL start side */
.combo-opt.active{outline:2px solid var(--navy-2);outline-offset:-2px}
.combo-sub{font-size:var(--t-sm);font-weight:400;color:var(--ink-2)}
.combo-empty{padding:12px;font-size:var(--t-sm);color:var(--ink-2)}

/* ---- buttons (each variant stands alone: class="btn-primary" needs no "btn") ---- */
.btn,.btn-primary,.btn-danger,.btn-ghost{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);padding:0 var(--s-5);border:1px solid var(--navy);border-radius:var(--r-1);background:var(--surface);color:var(--navy);font-family:inherit;font-size:var(--t-md);font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s,opacity .15s}
.btn-primary{background:var(--navy);color:#fff}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-1);background:transparent;color:var(--navy);cursor:pointer}
.btn-icon .icon{width:22px;height:22px}
.btn-block{display:flex;width:100%}
:is(.btn,.btn-primary,.btn-danger,.btn-ghost,.btn-icon):active{transform:translateY(1px)}
:is(.btn,.btn-primary,.btn-danger,.btn-ghost,.btn-icon):disabled,[aria-disabled=true]{opacity:.5;cursor:not-allowed}
[aria-busy=true]{cursor:progress}
button[aria-busy=true]:disabled{opacity:.75}
button[aria-busy=true]::after{content:"";width:16px;height:16px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (hover:hover){
  :is(.btn,.btn-ghost,.btn-icon,.top-back,.chip):hover,a.item:hover,a.kpi:hover,.combo-opt:hover{background-color:var(--neutral-bg)}
  .btn-primary:hover{background:var(--navy-2)}
  .btn-danger:hover{background:var(--danger-bg)}
  .chip.on:hover{background:var(--navy-2)}
}
.sticky-actions{position:fixed;z-index:20;inset-inline:0;bottom:0;display:flex;gap:var(--s-2);
  padding:var(--s-3) max(16px,calc((100% - 720px) / 2 + 16px)) calc(var(--s-3) + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgb(11 37 69 / .06)}
.sticky-actions>*{flex:1 1 0;min-width:0}
.sticky-actions>.btn-primary,.sticky-actions>form{flex-grow:2}
.sticky-actions form{display:flex;margin:0}
.sticky-actions form>*{flex:1}

/* ---- alerts and empty states ---- */
.alert{display:flex;align-items:flex-start;gap:var(--s-3);margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-inline-start-width:4px;border-radius:var(--r-2);background:var(--surface)}
.alert>.icon{margin-top:2px}
.alert>:not(.icon){flex:1;min-width:0;margin:0}
.alert p{margin:0 0 4px}
.alert p:last-child{margin:0}
.alert-warn{background:var(--warn-bg);border-color:var(--warn)}
.alert-error{background:var(--danger-bg);border-color:var(--danger)}
.alert-ok{background:var(--ok-bg);border-color:var(--ok)}
.alert-info{background:var(--info-bg);border-color:var(--info)}
.alert-warn>.icon{color:var(--warn)}
.alert-error>.icon{color:var(--danger)}
.alert-ok>.icon{color:var(--ok)}
.alert-info>.icon{color:var(--info)}
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);padding:var(--s-6) var(--s-4);text-align:center;color:var(--ink-2)}
.empty>.icon{width:56px;height:56px;padding:14px;border-radius:50%;background:var(--neutral-bg)}
.empty>p,.empty>h1{max-width:36ch;margin:0}

/* ---- login ---- */
.page-login .top{display:none}
.login{max-width:400px;margin:max(24px,8vh) auto 0;padding:var(--s-5)}
.login-logo{display:block;height:64px;width:auto;margin:0 auto var(--s-4)}
.login-app{margin:0;text-align:center;color:var(--ink-2)}
.login h1{text-align:center}

/* ---- projects list and project hub (Task 3) ---- */
.stack>.card{margin:0}   /* the stack's gap spaces its cards */
a.card{transition:border-color .15s,background-color .15s}
a.card:active{background-color:var(--neutral-bg)}
.proj{display:block;color:inherit;text-decoration:none}
.proj-head{display:flex;align-items:center;gap:var(--s-2)}
.proj-head>.cc-title{flex:1;min-width:0}
.proj-head::after{content:"";flex-shrink:0;width:8px;height:8px;margin-inline-start:4px;border-left:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-1);margin:var(--s-3) 0 0}
.tiles>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:center;min-width:0;padding:var(--s-2) 2px;border-radius:var(--r-1);background:var(--parchment);text-align:center}
.tiles dt{font-size:var(--t-sm);line-height:1.25;color:var(--ink-2)}
.tiles dd{margin:0;font-size:var(--t-lg);font-weight:800;line-height:1.3;color:var(--navy);font-variant-numeric:tabular-nums}
.tiles>.warn{background:var(--warn-bg)}
.tiles>.warn dd{color:var(--warn)}
.cc-name{min-width:0}
.cc-date{display:flex;flex-wrap:wrap;gap:4px 12px}
.cc-who{display:inline-flex;align-items:center;gap:4px}
.cc-who .icon{width:16px;height:16px}
.money dd .lbl{display:block;font-weight:400}
.contract-card progress{margin:calc(-1 * var(--s-1)) 0 var(--s-3)}
a.st{position:relative}
a.st::after{content:"";position:absolute;inset:-10px -2px}   /* a 44 px tall tap area around the 24 px pill */
.reg-text{margin:0}
.reg-holders{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.reg-edit{margin:2px 0 0;border:0;background:none}   /* a small toggle under the row; its forms open in a tinted box */
.reg-edit>summary{display:inline-flex;min-height:44px;padding:0 2px;font-size:var(--t-sm);font-weight:500}
.reg-edit>summary::after{margin-inline-start:2px}
.reg-edit .icon{width:18px;height:18px}
.disclosure.reg-edit>summary~*{margin:0}
.reg-forms{padding:var(--s-3);background:var(--parchment);border-radius:var(--r-1)}
.reg-forms .field{margin-bottom:var(--s-2)}
.reg-forms form+form,.reg-forms form+.help{margin-top:var(--s-3)}
.kept{margin:0;padding-inline-start:20px}
.item-main>.st{margin-inline-end:6px}
.att-title{font-weight:700}
.queue h2{display:flex;align-items:center;gap:var(--s-2)}
@media (hover:hover){a.card:hover{border-color:var(--navy)}}

/* ---- applicability page (Task 4): trades tree section → group → code, and the rows by cost line ---- */
.tree-title{flex:1;min-width:0;overflow-wrap:anywhere}
.tree-count{flex-shrink:0;gap:4px}   /* "3 مختار": a flex badge drops the space between its number and word */
.tree-h{margin:var(--s-3) 0 0;padding:0;font-size:var(--t-sm);font-weight:700;color:var(--ink-2)}
.tree-group+.tree-group{margin-top:var(--s-3)}   /* no rule here: a fieldset draws its legend inside its top border */
.tree-group>.check:last-child{padding-bottom:0}

/* ---- draft and contract pages (Task 5): facts list, button row, upload steps, danger zone ---- */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.facts{margin:0}
.facts>div{display:grid;grid-template-columns:minmax(84px,30%) minmax(0,1fr);gap:var(--s-3);padding:var(--s-2) 0;border-top:1px solid var(--line)}
.facts>div:first-child{border-top:0;padding-top:0}
:is(table.pay,.facts)+.facts>div:first-child{border-top:1px solid var(--line);padding-top:var(--s-2)}   /* one list split by the payments table */
.facts dt{font-size:var(--t-sm);color:var(--ink-2)}
.facts dd{margin:0;overflow-wrap:anywhere}
.facts dd .lbl{display:block;font-size:var(--t-sm);color:var(--ink-2)}
.code-list{margin:0;padding:0;list-style:none}
.code-list>li+li{margin-top:2px}
.page-codes{margin:calc(-1 * var(--s-2)) 0 var(--s-4);font-size:var(--t-sm);color:var(--ink-2)}
.card>a.item{margin:var(--s-3) 0 0;border-color:transparent;background:var(--parchment)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.btn-row>*{flex:1 1 auto}
.btn-row:not(.card .btn-row){margin:0 0 var(--s-4)}
.alert ul{margin:0 0 4px;padding-inline-start:20px}
.howto{margin:0;padding-inline-start:22px}
.howto>li+li{margin-top:var(--s-4)}
.howto>li::marker{font-weight:800;color:var(--navy)}
.howto p{margin:0 0 var(--s-2)}
.file-pick,.field>label.file-pick{position:relative;display:flex;margin:0;align-items:center;justify-content:center;gap:var(--s-2);min-height:72px;padding:var(--s-3);border:2px dashed var(--line-strong);border-radius:var(--r-2);background:var(--parchment);color:var(--navy);font-weight:700;text-align:center;cursor:pointer}
.file-pick>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}   /* the browser's own (English) button stays hidden under the Arabic label */
.file-pick:has(:focus-visible){outline:3px solid var(--navy-2);outline-offset:2px}
.field>label.file-pick:has([aria-invalid=true]){border-color:var(--danger)}
.file-chosen{margin:6px 0 0;font-weight:500;overflow-wrap:anywhere}
.file-chosen:empty{display:none}
.danger-zone{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line)}
.danger-zone>h2{color:var(--danger)}
.user-meta>:not(:first-child)::before{content:"·";margin-inline-end:8px}   /* username · role · projects */
.reset-card{margin-top:var(--s-6)}   /* the users page: the temporary-password form sits apart from the user's «حفظ» */
.card>progress{margin:var(--s-3) 0 var(--s-1)}

/* ---- builder steps (Task 6): code chips, payment rows, summary cards ---- */
.default-btn{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}   /* Enter in a field saves, never resets */
.pick-row{display:grid;gap:var(--s-2)}
.code-chips{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-3)}
.code-chips:empty{display:none}
.code-chips>.code-chip{margin:0}
.code-chip .seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}   /* the same 2-2-1 layout whichever is ticked */
.code-chip .seg-opt{padding:6px 10px;font-size:var(--t-sm)}
.code-chip .seg-opt:last-of-type:nth-of-type(odd){grid-column:1 / -1}   /* the 5th type spans both columns */
.chip-msg{margin-top:var(--s-2);color:var(--warn);font-weight:500}
.sticky-actions>:is(.btn,.btn-primary,.btn-danger){padding-inline:var(--s-3)}   /* "التالي: القيمة والدفعات" on one line at 375 px */
#codes-help:empty{display:none}
#usd-preview:empty{display:none}
.pay-head{display:flex;gap:var(--s-2);margin:0 0 4px;padding-inline-end:52px;font-size:var(--t-sm);color:var(--ink-2)}   /* over the inputs, not the remove button */
.pay-head>:first-child{flex:0 0 88px;text-align:center}
.pay-row{align-items:flex-start}
.pay-row>textarea{flex:1;min-width:0;min-height:var(--tap);resize:none;overflow:hidden}
.pay-desc>textarea{flex:none;width:100%;min-height:var(--tap);resize:none;overflow:hidden}   /* in a column: its own height, grown by app.js */
.pay-desc{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pay-amt{font-size:var(--t-sm);color:var(--ink-2);min-height:1.2em}   /* the row's share of the value, live (app.js) */
.pay-amt .num{font-weight:700;color:var(--ink)}   /* grows with the label (app.js): a long label stays readable */
.card>.field:last-child,.card>.inline-2:last-child>.field,.card>.card-sub:last-child{margin-bottom:0}
.pay-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);margin:0 0 var(--s-2)}
.pay-foot>.pay-sum{margin:0}
#fill-shape{margin:0 0 var(--s-3)}
.pay-foot>.btn-ghost{padding:0 var(--s-3)}
/* step 3's unit-rate items (beside .pay-row): on a phone the description and the remove button on the first line, unit,
   quantity and rate under it, the head one legend line above (the inputs carry placeholders too); from 600 px one line
   per item under column heads. */
.item-rows{display:flex;flex-direction:column;gap:var(--s-3);margin:0 0 var(--s-3)}
.item-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 44px;gap:var(--s-2);align-items:start}
.item-row>:nth-child(1){grid-area:1/1/2/4}
.item-row>:nth-child(2){grid-area:2/1}
.item-row>:nth-child(3){grid-area:2/2}
.item-row>:nth-child(4){grid-area:2/3/3/5}
.item-row>:nth-child(5){grid-area:1/4}
.item-row+.item-row{padding-top:var(--s-3);border-top:1px solid var(--line)}
.item-row>select{padding-inline-end:28px;background-position:left 6px center}   /* «ساعة عمل» fits a phone's third */
.item-head{margin:0 0 6px;font-size:var(--t-sm);color:var(--ink-2)}
.item-head>:not(:first-child)::before{content:" · "}
@media (min-width:600px){
  .item-head,.item-row{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)) 44px;gap:var(--s-2)}
  .item-head{margin-bottom:4px}
  .item-head>:not(:first-child)::before{content:none}
  .item-row>:nth-child(n){grid-area:auto}
  .item-row+.item-row{padding-top:0;border-top:0}
}
.field>label.check{display:flex;margin:0;font-weight:400}   /* «بلا كفالة» under the months: a tick row, not a field label */
.card-edit{flex-shrink:0;min-height:44px;padding:0 var(--s-2);font-size:var(--t-sm)}

/* ---- progress order and code explainers (Task 8) ---- */
/* The hub's progress bar: one tile per stage (scope → drafting → review → signing), a 4 px segment on top coloured by
   its state, the state also told by the circle (check when done, filled while in progress) and the detail line, never
   by colour alone. 2×2 on phones (reading order: right, left, then the next row), 4 across from 421 px. */
.progress{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin:0 0 var(--s-4);padding:0;list-style:none}
@media (min-width:421px){.progress{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pstage{display:flex;min-width:0}
.pstage>a{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;align-items:center;gap:4px var(--s-2);min-height:44px;padding:var(--s-2) 10px 10px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--line);border-radius:var(--r-1);color:var(--graphite);text-decoration:none}
.pstage-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);color:var(--ink-2);font-size:var(--t-sm);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.pstage-n .icon{width:14px;height:14px;stroke-width:3}
.pstage-l{min-width:0;font-size:var(--t-sm);font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.pstage-detail{grid-column:1 / -1;min-width:0;font-size:var(--t-sm);line-height:1.35;color:var(--ink-2);overflow-wrap:anywhere}
.is-done>a{border-top-color:var(--ok)}
.is-done .pstage-n{background:var(--ok);border-color:var(--ok);color:#fff}
.is-doing>a{border-top-color:var(--navy)}
.is-doing .pstage-n{background:var(--navy);border-color:var(--navy);color:#fff}
.is-doing .pstage-l{color:var(--navy)}
.is-doing .pstage-detail{color:var(--graphite);font-weight:500}
.is-todo .pstage-l{color:var(--ink-2)}
.pstage>a[aria-current=step]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}   /* the first unfinished stage: where the work is */
@media (hover:hover){.pstage>a:hover{background:var(--neutral-bg)}}
.tab-help{margin:0 0 var(--s-3);font-size:var(--t-sm);color:var(--ink-2)}
/* the contracts tab's legend: the four steps a contract goes through, each dot in its status pill's colour */
.legend{margin:0 0 var(--s-3);padding:var(--s-2) var(--s-3) var(--s-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-1)}
.legend>figcaption{margin:0 0 var(--s-2);font-size:var(--t-sm);font-weight:700;color:var(--ink-2)}
.lifecycle-mini{margin:0}
.lifecycle-mini>li{gap:4px;color:var(--graphite)}
.lifecycle-mini>li::after{width:14px;height:14px;border:0}
.lifecycle-mini>li+li::before{top:6px}
.lifecycle-mini>.lc-draft::after{background:var(--info)}
.lifecycle-mini>.lc-review::after{background:var(--warn)}
.lifecycle-mini>.lc-approved::after{background:var(--orange)}
.lifecycle-mini>.lc-signed::after{background:var(--ok)}
/* contract card: its codes explained, one per line; its next step as the card's footer */
.cc-codes{margin:var(--s-2) 0 0;padding:0;list-style:none;line-height:1.4}
.cc-codes>li+li{margin-top:2px}
.cc-next{display:flex;align-items:center;gap:4px;min-height:44px;margin:var(--s-3) calc(-1 * var(--s-4)) calc(-1 * var(--s-4));padding:var(--s-2) var(--s-4);border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--navy)}
.cc-next-l{color:var(--ink-2)}
.cc-next>.icon{width:18px;height:18px;margin-inline-start:auto;color:var(--ink-2)}
/* projects list: where the project stands, under its name (text + icon) */
.stage-line{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:var(--t-sm);font-weight:500;color:var(--ink-2)}
.stage-line .icon{width:16px;height:16px}
.stage-line.is-todo{color:var(--info)}
.stage-line.is-open{color:var(--warn)}
.stage-line.is-done{color:var(--ok)}
/* attention items and builder step 2: a code explained on its own line */
.att-codes{flex-direction:column;align-items:flex-start;gap:2px}
.meta>.code-label{flex-basis:100%}
#digit-help{margin:var(--s-3) 0 0}
.digit-pair{white-space:nowrap}
.facts dd>.code-list>li+li{margin-top:6px}   /* a long explained code wraps: keep the next one apart */
.typed-line{padding:var(--s-3) 0;border-top:1px solid var(--line)}   /* the reviewer's card: one form per typed clause */
.typed-orig{margin:0 0 var(--s-2);color:var(--ink-2);overflow-wrap:anywhere}
.typed-orig .lbl{font-weight:700}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---- legacy: old class names still used by draft/step1-4 until Tasks 5-6 rewrite them.
   :where() keeps these at zero specificity so they never beat the components above. Delete with those pages. ---- */
:where(form,.card,.pair,fieldset)>label:not([class]){display:block;margin-bottom:12px;font-weight:500}
label:not([class])>:is(input,select,textarea){margin-top:4px;font-weight:400}
:where(button:not([class]),button.primary,button.danger,.btn.primary){display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 18px;border:1px solid var(--navy);border-radius:var(--r-1);background:var(--surface);color:var(--navy);font-family:inherit;font-size:var(--t-md);font-weight:700;cursor:pointer}
:where(button.primary){background:var(--navy);color:#fff}
.btn.primary{background:var(--navy);color:#fff}
:where(button.danger){border-color:var(--danger);color:var(--danger)}
:where(button.link){min-height:44px;padding:4px;border:0;background:none;color:var(--danger);font-family:inherit;font-size:var(--t-md);cursor:pointer}
:where(.hint){display:block;font-size:var(--t-sm);color:var(--ink-2)}
:where(.err){margin:-6px 0 12px;font-size:var(--t-sm);font-weight:500;color:var(--danger)}
:where(.actions){display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
:where(.actions form){margin:0}
:where(.pair){display:flex;gap:var(--s-2)}
:where(.pair>label){flex:1;min-width:0}
:where(.default-btn){position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}   /* Enter saves, never resets */
:where(.code-row){display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
:where(details:not(.disclosure)){margin-bottom:12px}
:where(details:not(.disclosure)>summary){min-height:44px;padding:10px 0;color:var(--navy);font-weight:700;cursor:pointer}
:where(label.file){position:relative;overflow:hidden;margin:0}
:where(label.file input){position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
:where(.fname){min-height:1.4em;margin:6px 0}
:where(a.back,.sum a,.warn a){color:var(--navy)}
.card.warn{border-color:var(--danger)}
:where(.warn p,.sum p){margin:6px 0}

/* ---- inspection app: its pages are also English, left to right (the contracts app is right to left only) ---- */
[dir=ltr] .top-back .icon{transform:scaleX(-1)}   /* icons.svg draws "back" pointing right, as Arabic reads */
[dir=ltr] a.item::after{transform:rotate(-135deg)}   /* the forward chevron: Arabic's points left, English's right */
[dir=ltr] select{background-position:right 12px center}   /* a select's arrow sits at the end, as its padding does */
[dir=ltr] .item-row>select{background-position:right 6px center}