/* ==========================================================================
   MULK — Area Foundation System
   Mobile-first, RTL, field-optimised. No framework.
   ========================================================================== */

:root{
  /* ------------------------------------------------------------------
     Palette — a land-registry instrument, not a consumer app.
     The old sheet ran seven independent hues at once (teal, gold, green,
     red, amber, blue, purple) and read as noise. This is ONE brand hue,
     ONE warm accent used sparingly, and semantic colours that are muted
     derivatives shown as thin marks — never as large fills.
     ------------------------------------------------------------------ */
  --brand:#0E4A44;  --brand-d:#0A3835; --brand-l:#E4EFED; --brand-t:#0C403B;
  --accent:#A8763E; --accent-l:#F8F2E8;                 /* brass: one accent, used rarely */

  --bg:#EEF2F1; --surface:#FFFFFF; --surface-2:#F7FAF9;
  --ink:#0B1A18; --ink-2:#37504C; --muted:#6C817E;
  --line:#DCE6E4; --line-2:#EBF1F0; --line-3:#F3F7F6;

  --ok:#1E7A52;  --ok-l:#E7F3ED;
  --bad:#A83A2E; --bad-l:#FAEDEB;
  --warn:#8A5A16; --warn-l:#FAF3E7;
  --info:#1B5E8A; --info-l:#E9F1F7;
  --purple:#55477E; --purple-l:#EEEBF6;

  /* border tints — one named edge per semantic family, so a hover state can
     never invent a colour that is almost but not quite one already in use */
  --edge:#C8D8D5; --edge-ok:#C6E0D3; --edge-bad:#EBCBC6; --edge-warn:#E4D5BC;
  --ok-d:#186541; --muted-2:#93A6A3;

  /* radii climb in even steps so nothing looks accidental */
  --r-sm:7px; --r:11px; --r-lg:16px; --r-xl:22px;

  /* shadows are tinted with the brand hue instead of neutral black */
  --sh-1:0 1px 2px rgba(11,26,24,.045);
  --sh-2:0 3px 12px rgba(11,26,24,.06), 0 1px 2px rgba(11,26,24,.04);
  --sh-3:0 16px 40px rgba(11,26,24,.13), 0 2px 6px rgba(11,26,24,.05);
  --ring:0 0 0 3px rgba(14,74,68,.16);

  --nav-h:58px; --bottom-h:62px; --side-w:248px;
  --measure:74ch;                    /* comfortable reading width for RTL prose */

  /* Two roles from the families that are actually installed on field devices —
     no web fonts, because the phones work on patchy 3G. Personality comes from
     weight, size and spacing rather than a downloaded face. */
  --f: "Noto Naskh Arabic","IBM Plex Sans Arabic","Rabar","Segoe UI",Tahoma,system-ui,-apple-system,sans-serif;
  --f-display: "Noto Kufi Arabic","Rabar","Segoe UI",Tahoma,system-ui,sans-serif;
  --f-mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
  font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--bottom-h) + env(safe-area-inset-bottom));
}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.3;font-weight:700;font-family:var(--f-display);
  letter-spacing:-.15px;color:var(--ink)}
h1{font-size:1.36rem} h2{font-size:1.12rem} h3{font-size:1rem} h4{font-size:.92rem}
/* every figure in this app is data: keep digits aligned and Latin */
.mono,.coord,input[type=number],input[type=tel],.qv-time,.qv-dur,
.sh-count,.sec-count,.ph-pct,.stat b{font-variant-numeric:tabular-nums lining-nums}

/* one icon family, one alignment rule */
.ic{flex:none;display:inline-block;vertical-align:-.18em}
.btn .ic,.chipbtn .ic,.icon-btn .ic,.q-add-open .ic{margin:0}
p{margin:0 0 .8em}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;direction:ltr;unicode-bidi:isolate;display:inline-block}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.tiny{font-size:.75rem}
.strong{font-weight:700}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hidden,[hidden]{display:none !important}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:8px;top:8px;background:#fff;padding:8px;z-index:999;border-radius:8px}

/* ------------------------------------------------------------------ topbar */
.topbar{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:linear-gradient(180deg,var(--brand) 0%,var(--brand-d) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
  color:#fff;box-shadow:var(--sh-2);
}
.topbar .brand{display:flex;flex-direction:column;color:#fff;text-decoration:none;line-height:1.15;min-width:0}
.brand-mark{font-weight:800;letter-spacing:2px;font-size:1.05rem}
.brand-sub{font-size:.68rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.icon-btn{background:rgba(255,255,255,.14);border:0;color:#fff;width:38px;height:38px;border-radius:10px;font-size:18px;cursor:pointer;flex:none}
.icon-btn:active{background:rgba(255,255,255,.28)}
.lang-switch{display:flex;background:rgba(255,255,255,.14);border-radius:9px;overflow:hidden}
.lang-switch a{color:#fff;font-size:.7rem;padding:6px 8px;text-decoration:none;font-weight:700;opacity:.75}
.lang-switch a.on{background:rgba(255,255,255,.28);opacity:1}
.user-chip{display:flex;align-items:center;gap:7px}
.avatar{width:31px;height:31px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}
.uname{font-size:.8rem;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------------------------ shell */
.shell{display:flex;min-height:calc(100vh - var(--nav-h))}
.sidebar{
  position:fixed;top:var(--nav-h);bottom:0;inset-inline-start:0;width:var(--side-w);
  background:var(--surface);border-inline-end:1px solid var(--line);
  transform:translateX(100%);transition:transform .22s ease;z-index:55;overflow-y:auto;padding:12px 0;
}
html[dir=rtl] .sidebar{transform:translateX(100%)}
/* the RTL parking rule above outranks a plain .sidebar.open — tie the
   specificity so opening the drawer always wins (v2.0 nav fix) */
.sidebar.open,
html[dir=rtl] .sidebar.open{transform:translateX(0)}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li.sep{font-size:.7rem;color:var(--muted);padding:14px 18px 6px;font-weight:700;letter-spacing:.5px}
.sidebar a{display:flex;align-items:center;gap:11px;padding:11px 18px;color:var(--ink-2);font-size:.9rem;font-weight:600}
.sidebar a:hover{background:var(--surface-2);text-decoration:none}
.sidebar a.on{background:var(--brand-l);color:var(--brand-t);border-inline-start:3px solid var(--brand)}
/* nav items are icon + label on one baseline, in both directions */
.sidebar a,.bottomnav a{gap:11px}
.sidebar a .ic{opacity:.7} .sidebar a.on .ic{opacity:1}
.bottomnav a{gap:3px}
.bottomnav a .ic{opacity:.75} .bottomnav a.on .ic{opacity:1}
.icon-btn .ic{display:block}
.sidebar a i{font-style:normal;width:20px;text-align:center;opacity:.75}
.sidebar-scrim{position:fixed;inset:var(--nav-h) 0 0;background:rgba(9,20,19,.4);z-index:54;display:none}
.sidebar-scrim.on{display:block}
.main{flex:1;min-width:0;padding:14px 12px 24px;max-width:1400px;margin:0 auto;width:100%}

/* ------------------------------------------------------------------ bottom nav */
.bottomnav{
  position:fixed;bottom:0;inset-inline:0;height:calc(var(--bottom-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--surface);border-top:1px solid var(--line);
  display:flex;z-index:58;box-shadow:0 -2px 12px rgba(16,32,30,.06);
}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:.66rem;font-weight:600;text-decoration:none}
.bottomnav a i{font-style:normal;font-size:1.1rem;line-height:1}
.bottomnav a.on{color:var(--brand)}

/* ------------------------------------------------------------------ cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1);margin-bottom:14px}
.card h2,.card h3{font-family:var(--f-display)}
.card.pad-0{padding:0;overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.card-h h2,.card-h h3{margin:0}
.card-h .spacer{margin-inline-start:auto}
.page-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.page-head .spacer{margin-inline-start:auto}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;margin-bottom:16px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh-1);position:relative;overflow:hidden}
.stat b{display:block;font-size:1.6rem;font-weight:800;line-height:1.1;color:var(--brand-t)}
.stat span{font-size:.78rem;color:var(--muted);font-weight:600}
.stat::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--brand)}
.stat.a::after{background:var(--accent)} .stat.a b{color:var(--accent)}
.stat.g::after{background:var(--ok)} .stat.g b{color:var(--ok)}
.stat.b::after{background:var(--info)} .stat.b b{color:var(--info)}
.stat.w::after{background:var(--warn)} .stat.w b{color:var(--warn)}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--brand);color:#fff;border:1px solid var(--brand);
  border-radius:var(--r);padding:11px 18px;font:inherit;font-weight:700;font-size:.92rem;
  cursor:pointer;text-decoration:none;min-height:44px;transition:.15s;
}
.btn:hover{background:var(--brand-d);border-color:var(--brand-d);text-decoration:none;color:#fff}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--ink-2);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--brand);color:var(--brand-t)}
.btn.danger{background:var(--surface);color:var(--bad);border-color:var(--edge-bad)}
.btn.danger:hover{background:var(--bad-l);border-color:var(--bad)}
/* every button is icon + label on one baseline, in either direction */
.btn,.chipbtn,.q-add-open{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--f);line-height:1.2}
.btn:focus-visible,.chipbtn:focus-visible,.icon-btn:focus-visible,
.q-add-open:focus-visible,.choice input:focus-visible+.ch-txt{outline:2px solid var(--brand);outline-offset:2px}
.btn.accent{background:var(--accent);border-color:var(--accent)}
.btn.accent:hover{background:var(--accent);border-color:var(--accent)}
.btn.danger{background:var(--bad);border-color:var(--bad)}
.btn.danger:hover{background:var(--bad);border-color:var(--bad)}
.btn.sm{padding:7px 12px;min-height:36px;font-size:.82rem;border-radius:9px}
.btn.block{display:flex;width:100%}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}
.badge-gray{background:var(--line-2);color:var(--ink-2)}
.badge-blue{background:var(--info-l);color:var(--info)}
.badge-green{background:var(--ok-l);color:var(--ok)}
.badge{font-weight:700;letter-spacing:.1px}
.badge-purple{background:var(--purple-l);color:var(--purple)}
.badge-amber{background:var(--warn-l);color:var(--warn)}
.badge-red{background:var(--bad-l);color:var(--bad)}

/* ------------------------------------------------------------------ forms */
.field{display:grid;gap:6px;margin-bottom:14px}
.field > label,.lbl{font-weight:700;font-size:.88rem;color:var(--ink-2)}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],
input[type=date],input[type=time],input[type=search],input[type=url],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:.95rem;background:var(--surface);color:var(--ink);min-height:44px;
}
textarea{min-height:88px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
input[type=number]{direction:ltr;text-align:start}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:left 16px top 50%,left 11px top 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-start:34px}
html[dir=rtl] select{background-position:left 16px top 50%,left 11px top 50%}
.grid2{display:grid;grid-template-columns:1fr;gap:0 14px}
.grid3{display:grid;grid-template-columns:1fr;gap:0 14px}
.inline-note{font-size:.78rem;color:var(--muted)}
.req{color:var(--bad)}

.alert{padding:12px 14px;border-radius:var(--r);margin-bottom:14px;font-size:.88rem;border:1px solid transparent}
.alert.ok{background:var(--ok-l);color:var(--ok);border-color:var(--edge-ok)}
.alert.err{background:var(--bad-l);color:var(--bad);border-color:var(--edge-bad)}
.alert.warn{background:var(--warn-l);color:var(--warn);border-color:var(--edge-warn)}
.alert.info{background:var(--info-l);color:var(--info);border-color:var(--info-l)}

/* choice buttons (yes/no/unknown, rating, trend...)
   Selected state is a solid fill — never a thin border. */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:11px 16px;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);cursor:pointer;font-weight:700;font-size:.88rem;color:var(--ink);
  min-height:48px;min-width:64px;transition:.14s;user-select:none;text-align:center;
}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice input:focus-visible+.ch-txt{outline:2px solid var(--brand);outline-offset:4px;border-radius:4px}
.choice:hover{border-color:var(--brand);background:var(--brand-l);color:var(--brand-t)}
.choice{font-family:var(--f);transition:background .12s,border-color .12s,color .12s}
.choice.on{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 2px 9px rgba(15,118,110,.3);transform:translateY(-1px)}
.choice.on.yes{background:var(--ok);border-color:var(--ok);box-shadow:0 2px 8px rgba(30,122,82,.28)}
.choice.on.no{background:var(--bad);border-color:var(--bad);box-shadow:0 2px 9px rgba(192,38,38,.28)}
.choice.on.unknown{background:var(--muted);border-color:var(--muted);box-shadow:none}
.choice input:disabled+.ch-txt{opacity:.55}
/* large touch targets for the most common question type */
.choices.big{gap:9px}
.choices.big .choice{flex:1 1 30%;min-width:104px;min-height:54px;font-size:.94rem}
.choices.rating{gap:7px}
.choices.rating .choice{flex:1 1 0;min-width:52px;font-size:1.1rem}
.choices.rating .choice.on{background:var(--accent);border-color:var(--accent);box-shadow:0 2px 9px rgba(180,136,74,.32)}

/* ------------------------------------------------------------------ tables */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem;background:var(--surface);min-width:640px}
table.tbl th,table.tbl td{padding:11px 12px;text-align:start;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl th{background:var(--surface-2);font-weight:700;color:var(--ink-2);font-size:.8rem;white-space:nowrap;position:sticky;top:0;z-index:2}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl td.actions{white-space:nowrap}
.empty{padding:36px 16px;text-align:center;color:var(--muted)}
.empty .big{font-size:2rem;display:block;margin-bottom:8px;opacity:.4}

/* ------------------------------------------------------------------ progress */
.progress{height:6px;background:var(--line-2);border-radius:999px;overflow:hidden;display:flex}
.progress i{display:block;height:100%;transition:width .4s}
.progress .p-ans{background:var(--ok)}
.progress .p-unk{background:var(--muted-2)}
.prog-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.76rem;color:var(--muted);margin-top:6px}
.prog-legend b{color:var(--ink)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-inline-end:4px}
.dot.ans{background:var(--ok)} .dot.unk{background:var(--muted-2)} .dot.non{background:var(--line)}

/* ------------------------------------------------------------------ tabs */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:10px 14px;font-size:.86rem;font-weight:700;color:var(--muted);white-space:nowrap;border-bottom:3px solid transparent;text-decoration:none}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}

/* ------------------------------------------------------------------ form page (v1.1)
   One continuous vertical form. Sections are separators, not steps. */
.formpage{max-width:980px;margin:0 auto}

/* --- profile completion hero (compact) */
.profile-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:13px 15px;box-shadow:var(--sh-1);margin-bottom:12px}
.ph-top{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.ph-label{display:block;font-size:.76rem;color:var(--muted);font-weight:600;letter-spacing:.2px}
.ph-pct{display:block;font-size:1.12rem;font-weight:800;color:var(--ink);margin-top:1px}
.ph-chips{display:flex;gap:6px;flex-wrap:wrap}
.pchip{font-size:.74rem;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.pchip b{font-size:.82rem}
.pchip.ans{background:var(--ok-l);color:var(--ok);border-color:var(--edge-ok)}
.pchip.unk{background:var(--line-2);color:var(--ink-2);border-color:var(--line)}
.pchip.non{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.ph-foot{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:.78rem}
.ph-foot a{color:var(--muted);text-decoration:none;font-weight:600}
.ph-foot a b{color:var(--brand-t)}
.ph-foot a:hover{color:var(--brand)}

/* --- visit info: collapsible, always single column on mobile */
.visit-card{padding:0;margin-bottom:12px}
.visit-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:13px 15px;font-size:.9rem;user-select:none}
.visit-card>summary::-webkit-details-marker{display:none}
.vs-title{font-weight:800;white-space:nowrap}
.vs-sum{color:var(--muted);font-size:.79rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.vs-caret{color:var(--muted);transition:transform .18s;flex:none}
.visit-card[open]>summary .vs-caret{transform:rotate(180deg)}
.visit-card[open]>summary{border-bottom:1px solid var(--line-2)}
.visit-card[open]>summary .vs-sum{display:none}
.visit-card .vstack,.visit-card .btn-row{padding:0 15px}
.visit-card .vstack{padding-top:12px}
.visit-card .btn-row{padding-bottom:14px}

/* --- vertical field stack: one field under another, always */
.vstack{display:grid;grid-template-columns:1fr;gap:0}

/* --- sticky toolbar: search/filters + section jump */
.formbar{position:sticky;top:var(--nav-h);z-index:35;background:var(--bg);
  padding:6px 0 4px;margin:0 0 8px;border-bottom:1px solid var(--line)}
.formbar .filterbar{margin-bottom:6px;gap:6px}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filterbar input[type=search]{flex:1;min-width:150px}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:600;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;min-height:44px}
.chk input{width:18px;height:18px;accent-color:var(--brand);min-height:0}
.chk:has(input:checked){border-color:var(--brand);background:var(--brand-l);color:var(--brand-t)}
/* the toolbar is sticky, so on a phone it must stay short:
   search on its own row, the two filters sharing the next row. */
.formbar .filterbar input[type=search]{flex:1 1 100%;min-height:40px;font-size:.86rem}
.formbar .filterbar .chk{flex:1 1 calc(50% - 3px);justify-content:center;min-height:38px;
  padding:6px 8px;font-size:.76rem;gap:5px;white-space:nowrap;overflow:hidden}
.formbar .filterbar .chk input{width:16px;height:16px}
.formbar .filterbar #clearFilters{flex:1 1 100%;min-height:34px}

/* --- section jump strip (scrolls, never switches) */
.secnav{overflow:hidden}
.secnav ol{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:12px}
.secnav ol::-webkit-scrollbar{display:none}
.secnav li a{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;
  font-size:.75rem;font-weight:700;color:var(--ink-2);white-space:nowrap;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);transition:.14s}
.secnav li a .n{opacity:.6;font-size:.7rem;font-weight:800}
.secnav li a .sec-count{opacity:.85;font-variant-numeric:tabular-nums}
.secnav li a.partial{border-color:var(--brand-l);background:var(--brand-l);color:var(--brand-t)}
.secnav li a.full{border-color:var(--edge-ok);background:var(--ok-l);color:var(--ok)}
.secnav li a.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 2px 7px rgba(15,118,110,.28)}
.secnav li a.on .n,.secnav li a.on .sec-count{opacity:.85}

/* --- section separator header */
.qsection{margin-bottom:16px;scroll-margin-top:calc(var(--nav-h) + 120px)}
.sec-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap;position:relative;
  background:transparent;border:0;border-bottom:1.5px solid var(--brand);
  border-radius:0;padding:14px 2px 8px;margin:6px 0 10px;box-shadow:none}
.sec-head.partial{border-bottom-color:var(--brand)}
.sec-head.full{border-bottom-color:var(--ok)}
.sec-head.empty{border-bottom-color:var(--line)}
.sh-no{flex:none;font-family:var(--f-mono);font-size:.8rem;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.5px}
.sec-head.partial .sh-no{color:var(--brand)}
.sec-head.full .sh-no{color:var(--ok)}
.sh-title{min-width:0}
.sh-title b{display:block;font-family:var(--f-display);font-size:.98rem;font-weight:700;line-height:1.3}
.sh-title i{display:block;font-style:normal;font-size:.85rem;color:var(--ink-2)}
.sh-count{font-size:.78rem;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sec-head.full .sh-count{color:var(--ok)}
.sh-bar{position:absolute;inset-inline:0;bottom:-1.5px;height:1.5px;background:transparent;
  border-end-start-radius:var(--r-lg);border-end-end-radius:var(--r-lg);overflow:hidden}
.sh-bar i{display:block;height:100%;background:var(--brand);transition:width .35s}
.sec-head.full .sh-bar i{background:var(--ok)}

/* --- question card */
/* The signature of the whole application: a surveyor's field-book margin.
   A hairline rail on the reading edge carries the entire answered/unanswered
   signal, so the card body itself can stay pure white and quiet. */
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px 13px 14px;margin-bottom:7px;box-shadow:none;position:relative;
  scroll-margin-top:calc(var(--nav-h) + 120px);transition:border-color .18s,box-shadow .18s}
.q::before{content:"";position:absolute;inset-block:9px;inset-inline-start:-1px;width:3px;
  border-radius:0 3px 3px 0;background:var(--line);transition:background .18s}
html[dir=rtl] .q::before{border-radius:3px 0 0 3px}
.q.answered::before{background:var(--ok)}
.q.unknown::before{background:var(--muted-2)}
.q.blank::before{background:var(--line)}
.q.is-dirty::before{background:var(--warn)}
.q.core{border-color:var(--edge-warn)}
.q.core::after{content:"";position:absolute;inset-block-start:-1px;inset-inline:14px auto;
  width:26px;height:2px;background:var(--accent);border-radius:0 0 2px 2px}
.q:hover{border-color:var(--edge)}
.q.just-saved{box-shadow:0 0 0 2px rgba(30,122,82,.22)}
.q.hidden-cond{display:none}
.q.flash-target{box-shadow:0 0 0 3px rgba(14,74,68,.28)}
.q-head{display:flex;gap:11px;align-items:flex-start;margin-bottom:10px}
/* the number is set like a ledger entry, not boxed in a chip */
.q-no{flex:none;min-width:26px;text-align:center;color:var(--muted);font-family:var(--f-mono);
  font-size:.78rem;font-weight:600;letter-spacing:.3px;padding-top:2px;
  font-variant-numeric:tabular-nums}
.q.answered .q-no{color:var(--ok)}
.q.core .q-no{color:var(--accent)}
.q-text{flex:1;min-width:0}
.q-ar{font-weight:600;font-size:.95rem;display:block;line-height:1.6;color:var(--ink)}
.q-ck{color:var(--muted);font-size:.83rem;display:block;line-height:1.5}
.q-hint{color:var(--muted);font-size:.77rem;display:block;margin-top:4px;padding-inline-start:9px;
  border-inline-start:2px solid var(--line-2);line-height:1.5}
.q-flags{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px;align-items:center}
/* the answered/unanswered state is a single glyph, and it disappears entirely
   while the question is still blank — the border and the counters already say it */
.q-state-badge{flex:none;width:19px;height:19px;padding:0;border-radius:50%;display:grid;place-items:center;
  font-size:.72rem;line-height:1;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.q.blank .q-state-badge{display:none}
.q.answered .q-state-badge{background:var(--ok);color:#fff;border-color:var(--ok)}
.q.unknown .q-state-badge{background:var(--line-2);color:var(--ink-2);border-color:var(--line)}
/* a blank card with no other flag should not reserve an empty row */
.q.blank .q-flags:not(:has(.badge:not(.q-state-badge))){display:none}
.q-body{margin-inline-start:0}
.mt8{margin-top:8px}

/* --- completed inputs must LOOK completed */
.q input[type=text],.q input[type=tel],.q input[type=number],.q textarea{width:100%}
/* NOTE: must be element-qualified. The base control rule uses input[type="text"],
   specificity (0,1,1), which would otherwise outrank a bare [data-filled] (0,1,0). */
input[data-filled],textarea[data-filled],select[data-filled]{
  background-color:var(--surface);border-color:var(--edge-ok);
  box-shadow:inset 3px 0 0 var(--ok);font-weight:600}
html[dir=rtl] input[data-filled],html[dir=rtl] textarea[data-filled],html[dir=rtl] select[data-filled]{
  box-shadow:inset -3px 0 0 var(--ok)}
input[data-filled]:focus,textarea[data-filled]:focus,select[data-filled]:focus{box-shadow:var(--ring)}

/* --- choice buttons: the selected state must be unmistakable */
.q-extras{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chipbtn{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
  font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;padding:0 12px;border-radius:999px;
  min-height:36px;transition:.14s}
.chipbtn:hover{border-color:var(--brand);color:var(--brand-t);background:var(--surface)}
/* an untouched extras chip stays quiet so 200 cards do not shout */
.q-extras .chipbtn:not(.has){background:transparent;border-color:var(--line-2);color:var(--muted)}
.q-extras .chipbtn:not(.has):hover{border-color:var(--brand);color:var(--brand-t)}
.chipbtn.has{background:var(--brand-l);border-color:var(--edge);color:var(--brand-t)}
.chipbtn .ic{opacity:.7}
.chipbtn.has .ic{opacity:1}
/* the notes chip state is data, not text: CSS decides which marks are shown */
.toggle-note .ic-mic{display:none}
.toggle-note[data-note="voice"] .ic-note{display:none}
.toggle-note[data-note="voice"] .ic-mic,
.toggle-note[data-note="both"] .ic-mic{display:inline-block}
.linkbtn{background:none;border:0;color:var(--brand);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;padding:4px 2px}
.linkbtn:hover{text-decoration:underline}
.q-note,.q-source{margin-top:9px;padding:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.q-note textarea{background:var(--surface)}

/* ---------------------------------------------------------------- voice note (v1.2)
   One state visible at a time, driven only by [data-status] so form.js never has
   to juggle hidden attributes. Logical properties keep it correct in RTL. */
.q-voice{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.q-voice .qv-state{display:none;gap:8px;align-items:center;flex-wrap:wrap}
.q-voice[data-status="empty"]   .qv-idle,
.q-voice[data-status="arming"]  .qv-idle,
.q-voice[data-status="recording"] .qv-live{display:flex}
.q-voice[data-status="preview"]   .qv-preview,
.q-voice[data-status="uploading"] .qv-preview,
.q-voice[data-status="pending"]   .qv-preview,
.q-voice[data-status="error"]     .qv-preview,
.q-voice[data-status="saved"]     .qv-saved{display:block}

.qv-hint{font-size:.72rem;color:var(--muted);font-weight:600}
.qv-time{font-size:.9rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--bad);min-width:44px}
.qv-live-lbl{font-size:.78rem;font-weight:700;color:var(--bad)}
.qv-live{background:var(--bad-l);border:1px solid var(--edge-bad);border-radius:var(--r);padding:9px 11px}
.qv-dot{width:10px;height:10px;border-radius:50%;background:var(--bad);flex:none;animation:qvpulse 1s infinite}
@keyframes qvpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}

.qv-player{width:100%;height:40px;display:block;margin:4px 0 9px;border-radius:999px}
.qv-actions{display:flex;gap:6px;flex-wrap:wrap}
.qv-head{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.qv-badge{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--ok);background:var(--ok-l);border:1px solid var(--edge-ok);border-radius:999px;padding:4px 11px}
.qv-dur{font-size:.76rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.q-voice[data-status="uploading"] .qv-actions{opacity:.5;pointer-events:none}

.chipbtn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.chipbtn.ok:hover{background:var(--ok-d);border-color:var(--ok-d);color:#fff}
.chipbtn.danger{background:var(--surface);border-color:var(--edge-bad);color:var(--bad)}
.chipbtn.danger:hover{background:var(--bad-l);border-color:var(--bad)}
.chipbtn:disabled{opacity:.55;cursor:default}

.qv-msg{margin:6px 0 0;font-size:.76rem;font-weight:600;color:var(--muted);line-height:1.5}
.qv-msg:empty{display:none}
.qv-msg.err{color:var(--bad)}
.qv-msg.warn{color:var(--warn)}

@media (max-width:480px){
  .qv-actions .chipbtn{flex:1 1 auto;text-align:center}
  .qv-live{width:100%}
}
@media print{.q-voice .qv-actions,.q-voice .qv-idle,.q-voice .qv-live{display:none!important}}

/* ---------------------------------------------------------------- add a question (v1.2) */
.q-add{margin:2px 0 4px}
.q-add-open{width:100%;background:transparent;border:1px dashed var(--edge);color:var(--muted);
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;padding:11px;border-radius:var(--r);
  min-height:46px;transition:.15s}
.q-add-open:hover{border-color:var(--brand);border-style:solid;color:var(--brand-t);background:var(--surface)}
.qadd-panel{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--brand);
  border-radius:var(--r);padding:15px;margin-top:6px;box-shadow:var(--sh-2)}
.qadd-head{display:flex;gap:8px;align-items:baseline;margin-bottom:9px}
.qadd-head b{font-family:var(--f-display);font-size:.95rem;color:var(--brand-t)}
.qadd-panel .field{margin-bottom:9px}
.qadd-row{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.qadd-note{margin:2px 0 10px;line-height:1.6}
.qadd-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.qadd-msg{font-size:.78rem;font-weight:700;color:var(--muted)}
.qadd-msg.err{color:var(--bad)} .qadd-msg.ok{color:var(--ok)}
.q-del-question{padding:7px 10px}
@media (max-width:480px){.qadd-row{grid-template-columns:1fr}}
@media print{.q-add,.qadd-panel{display:none!important}}
.q-source .vstack{gap:0}
/* five stacked fields made an opened card very tall — pair them up when there is room */
@media (min-width:560px){
  .q-source .srcgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
  .q-source .srcgrid .field{margin-bottom:8px}
}
.lbl{display:block;font-size:.76rem;font-weight:700;color:var(--muted);margin-bottom:5px}

.unit-tag{display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-size:.76rem;color:var(--muted);margin-inline-start:6px}
.input-affix{display:flex;gap:6px;align-items:stretch}
.input-affix input{flex:1;min-width:0}
.input-affix .suffix{display:grid;place-items:center;padding:0 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);font-size:.82rem;color:var(--muted);white-space:nowrap}
.input-affix select{max-width:110px;flex:none}

.savebar{
  position:sticky;bottom:calc(var(--bottom-h) + 6px);z-index:40;margin-top:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:9px 12px;box-shadow:var(--sh-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.savebar .status{font-size:.8rem;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.savebar .status.saving{color:var(--info)}
.savebar .status.saved{color:var(--ok)}
.savebar .status.dirty{color:var(--warn)}
.savebar .status.offline{color:var(--warn)}
.savebar .status.error{color:var(--bad)}
.savebar .spacer{margin-inline-start:auto}
.savebar .btn{white-space:nowrap}
@media (max-width:719px){
  .secnav li a{padding:7px 9px;font-size:.73rem;max-width:210px;overflow:hidden;text-overflow:ellipsis}
  .savebar{gap:6px;padding:8px 10px}
  .savebar .status{flex:1 1 100%;font-size:.75rem}
  .savebar .btn{flex:0 0 auto;font-size:.8rem;padding:9px 12px;min-height:42px}
  .savebar .btn.accent{flex:1;min-width:0}
  /* the phone already has a bottom nav and natural scrolling — the
     back-to-top button would push the actions onto a third row */
  .savebar #backTop{display:none}
  .hide-sm{display:none}
  .sh-title b{font-size:.94rem}
  .q{padding:12px}
}

/* ------------------------------------------------------------------ map */
.map{height:320px;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;background:var(--line-2)}
.map.tall{height:min(70vh,560px)}
.map.mini{height:220px}
.gps-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.coord{font-family:ui-monospace,Menlo,Consolas,monospace;direction:ltr;font-size:.8rem;background:var(--surface-2);border:1px solid var(--line);padding:7px 11px;border-radius:9px}

/* ------------------------------------------------------------------ modal */
.modal{position:fixed;inset:0;background:rgba(9,20,19,.55);z-index:100;display:none;align-items:flex-end;justify-content:center;padding:0}
.modal.on{display:flex}
.modal-box{background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;width:100%;max-width:720px;max-height:92vh;overflow-y:auto;padding:18px 16px calc(22px + env(safe-area-inset-bottom));box-shadow:var(--sh-3)}
.modal-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;position:sticky;top:-18px;background:var(--surface);padding-top:4px;z-index:2}
.modal-h h3{margin:0}
.modal-h .close{margin-inline-start:auto;background:none;border:0;font-size:26px;cursor:pointer;color:var(--muted);line-height:1}
.grabber{width:44px;height:4px;background:var(--line);border-radius:99px;margin:0 auto 12px}

/* ------------------------------------------------------------------ toast */
.toast{position:fixed;bottom:calc(var(--bottom-h) + 18px);inset-inline:16px;z-index:200;background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r);font-size:.88rem;box-shadow:var(--sh-3);text-align:center}
.toast.ok{background:var(--ok)} .toast.err{background:var(--bad)}
.toast{font-weight:600;letter-spacing:.1px}

/* ------------------------------------------------------------------ login */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:20px;background:linear-gradient(155deg,#0E4A44 0%,#0A3835 52%,#071F1D 100%)}
.login-card{background:#fff;border-radius:var(--r-xl);padding:30px 24px;width:100%;max-width:400px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.login-logo{width:66px;height:66px;border-radius:20px;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;display:grid;place-items:center;font-weight:800;letter-spacing:2px;margin:0 auto 14px;font-size:1.1rem}

/* ------------------------------------------------------------------ misc lists */
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.88rem}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0;font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.rule{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.rule .n{flex:none;width:28px;height:28px;border-radius:8px;background:var(--brand-l);color:var(--brand-t);display:grid;place-items:center;font-weight:800;font-size:.78rem}
.rule .b{white-space:pre-line;font-size:.88rem}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:9px}
.thumbs a{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--surface-2)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* ------------------------------------------------------------------ desktop */
@media (min-width:720px){
  body{font-size:15.5px;padding-bottom:0}
  .grid2{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:repeat(3,1fr)}
  /* never more than two columns, and only where there is real room */
  .visit-card .vstack{grid-template-columns:1fr 1fr;column-gap:14px}
  .q-source .vstack{grid-template-columns:1fr 1fr;column-gap:14px}
  .modal{align-items:center;padding:20px}
  .modal-box{border-radius:var(--r-xl);max-height:88vh}
  .map{height:400px}
}
@media (min-width:1000px){
  .bottomnav{display:none}
  .menu-toggle{display:none}
  /* html[dir=rtl] .sidebar (0,2,1) would keep the off-canvas transform and push
     the docked sidebar past the right screen edge — the dir-qualified rule below
     restores the desktop dock (v2.0 nav fix) */
  .sidebar,
  html[dir=rtl] .sidebar{transform:none;position:sticky;height:calc(100vh - var(--nav-h));top:var(--nav-h)}
  .sidebar-scrim{display:none !important}
  .main{padding:20px 24px 40px}
  .savebar{bottom:14px}
  .formbar{padding-top:10px}
  .uname{max-width:200px}
}

/* ------------------------------------------------------------------ tablet
   An iPad in portrait is 768px: wide enough that phone layout wastes half the
   screen and Arabic lines run far past a comfortable measure, but narrower than
   the 1000px where the sidebar docks. This layer is that gap. */
@media (min-width:768px) and (max-width:999px){
  body{font-size:16px}
  .main{padding:22px 26px calc(var(--bottom-h) + 30px)}
  /* cap the reading measure, but let the form breathe wider than prose */
  .formpage,.card,.page-head{max-width:820px;margin-inline:auto}
  .q-text{max-width:var(--measure)}

  /* two columns wherever the content is a list of short fields */
  .grid2{grid-template-columns:1fr 1fr}
  .visit-card .vstack,.q-source .srcgrid{grid-template-columns:1fr 1fr;column-gap:16px}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
  .qadd-panel{max-width:820px;margin-inline:auto}

  /* the toolbar has room for one row instead of two stacked ones */
  .formbar .filterbar{flex-wrap:nowrap;align-items:stretch}
  .formbar .filterbar input[type=search]{flex:1 1 auto;min-width:0}
  .formbar .filterbar .chk{flex:0 0 auto;padding:6px 14px}
  .secnav li a{font-size:.78rem;padding:7px 12px}

  /* a floating pill reads as a tablet control, not a stretched phone bar */
  .bottomnav{inset-inline:auto;left:50%;transform:translateX(-50%);width:min(520px,92%);
    border-radius:999px;border:1px solid var(--line);bottom:10px;
    box-shadow:var(--sh-3);height:56px;padding-bottom:0}
  body{padding-bottom:calc(var(--bottom-h) + 22px + env(safe-area-inset-bottom))}
  .savebar{inset-inline:auto;left:50%;transform:translateX(-50%);width:min(760px,94%);
    bottom:calc(56px + 22px)}
  .toast{inset-inline:auto;left:50%;transform:translateX(-50%);width:min(520px,92%);
    bottom:calc(56px + 90px)}
  .modal{align-items:center;padding:24px}
  .modal-box{border-radius:var(--r-xl);max-height:86vh}
  .map{height:420px}
  .q{padding:15px 17px}
  .thumbs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* iPad landscape and desktop: the sidebar docks, so keep the form readable
   rather than letting a single question stretch across 1400px */
@media (min-width:1000px){
  .formpage{max-width:940px}
  .q-text{max-width:var(--measure)}
  .savebar{max-width:940px;margin-inline:auto}
}

/* pointer-quality: hover effects belong to a mouse, bigger targets to a finger */
@media (hover:none){
  .q:hover{border-color:var(--line)}
  .chipbtn,.q-add-open{min-height:42px}
  .choice{min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ------------------------------------------------------------------ print */
@media print{
  .topbar,.sidebar,.bottomnav,.savebar,.tabs,.btn,.filterbar,.formbar,.secnav,.no-print,.sidebar-scrim{display:none !important}
  body{background:#fff;padding:0;font-size:11.5pt}
  .main{padding:0;max-width:none}
  .card,.q{box-shadow:none;border:1px solid #ccc;break-inside:avoid;page-break-inside:avoid;margin-bottom:6px;padding:8px}
  .print-head{display:block !important;border-bottom:2px solid #000;margin-bottom:12px;padding-bottom:8px}
  a{color:#000;text-decoration:none}
  table.tbl{min-width:0;font-size:9.5pt}
  .q-no{border:1px solid #999;background:#fff !important;color:#000 !important}
}
.print-head{display:none}

/* ---------------------------------------------------- admin additions */
.badge-teal{background:var(--brand-l);color:var(--brand-t)}
.sep-line{border:0;border-top:1px solid var(--line);margin:18px 0 12px}
.danger-h{color:var(--bad);margin:0 0 4px;font-size:.95rem}
.danger-t{color:var(--bad)}
.rule-edit{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.rule-edit .n{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-l);color:var(--brand-t);font-weight:800;font-size:.8rem}
.rule-edit textarea{flex:1;min-height:52px}
.rule-edit .btn{flex:none;align-self:center}
form.inline{display:inline}
@media(max-width:640px){
  .rule-edit{flex-wrap:wrap}
  .rule-edit textarea{width:100%;flex-basis:100%}
}


/* ================================================================== v2.0 */
/* profile-type badges, read-only banner, price summary, valuation, files */

.ptype{display:inline-flex;align-items:center;gap:6px}
.readonly-banner{
  display:flex;align-items:center;gap:10px;background:var(--warn-l,#fdf6e3);
  border:1px solid var(--warn,#b45309);color:var(--ink-2);border-radius:var(--r-lg);
  padding:10px 14px;margin-bottom:14px;font-size:.88rem;font-weight:600}
.readonly-banner .ic{color:var(--warn,#b45309)}

.psum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.psum{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh-1)}
.psum h4{margin:0 0 8px;font-size:.92rem;color:var(--brand-t);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.psum .nums{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;text-align:center}
.psum .nums b{display:block;font-size:1.02rem}
.psum .nums span{font-size:.7rem;color:var(--muted)}
.psum .meta{margin-top:8px;font-size:.74rem;color:var(--muted);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.psum .excluded{margin-top:6px;font-size:.72rem;color:var(--warn,#b45309)}

.val-table{width:100%;border-collapse:collapse;font-size:.9rem}
.val-table td{padding:9px 6px;border-bottom:1px solid var(--line-2)}
.val-table td.amt{text-align:end;font-family:ui-monospace,Menlo,Consolas,monospace;direction:ltr;white-space:nowrap}
.val-table tr.total td{border-top:2px solid var(--ink);border-bottom:0;font-weight:800;font-size:1.05rem}
.val-up{color:var(--ok)} .val-down{color:var(--bad)}
.val-disclaimer{font-size:.78rem;color:var(--muted);border-inline-start:3px solid var(--accent);padding-inline-start:10px;margin:12px 0}

.factor-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;margin-bottom:12px;background:var(--surface)}
.factor-card .fhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.factor-card .fhead b{font-size:.95rem}
.factor-scope{font-size:.7rem}

.file-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line-2)}
.file-row .ficon{flex:none;width:40px;height:40px;border-radius:10px;background:var(--brand-l);color:var(--brand-t);display:grid;place-items:center;font-size:.66rem;font-weight:800;text-transform:uppercase}
.file-row .fmeta{flex:1;min-width:0}
.file-row .fmeta .ft{font-weight:700}
.file-row .fmeta .fd{font-size:.78rem;color:var(--muted);margin-top:2px}
.file-row .fvers{font-size:.72rem;color:var(--muted);margin-top:4px}
.file-row .facts{display:flex;gap:6px;flex:none;flex-wrap:wrap}

.badge-increase{background:#e8f6ee;color:var(--ok)}
.badge-decrease{background:#fdecec;color:var(--bad)}

.assign-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:.76rem;font-weight:600}

.q-override-flag{font-size:.68rem;color:var(--warn,#b45309);font-weight:700}

@media (max-width:719px){
  .psum .nums b{font-size:.9rem}
  .file-row{flex-wrap:wrap}
  .file-row .facts{width:100%}
}
@media print{
  .val-table td{padding:5px 4px;font-size:10pt}
  .psum{break-inside:avoid;page-break-inside:avoid}
}