@font-face { font-family: 'Plex Arabic'; font-weight: 400; font-display: swap; src: url(fonts/plex-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; font-display: swap; src: url(fonts/plex-arabic-600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Plex Arabic'; font-weight: 400; font-display: swap; src: url(fonts/plex-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; font-display: swap; src: url(fonts/plex-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }

:root {
  --ground: #F4F7F9; --surface: #FFFFFF; --ink: #1A1A1F; --muted: #566070; --line: #D6DDE4; --line-strong: #AEB8C3;
  --accent: #B5D8E8; --accent-ink: #1F5873; --accent-soft: #E3F1F7;
  --lav: #C9B6E4; --lav-soft: #EFE8F8; --peach: #FFCBA4; --peach-soft: #FFEBDD; --pink: #F5C4D9;
  --r: 6px; --gap: 16px;
  --font: 'Plex Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'SFMono-Regular', monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121317; --surface: #1A1A1F; --ink: #EEF1F4; --muted: #A3ACB8; --line: #2E333B; --line-strong: #49515C;
    --accent: #2C5568; --accent-ink: #B5D8E8; --accent-soft: #1D2B33; --lav: #4A3C61; --lav-soft: #241F2E;
    --peach: #8A5E4C; --peach-soft: #2E2226; --pink: #5E3446; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #121317; --surface: #1A1A1F; --ink: #EEF1F4; --muted: #A3ACB8; --line: #2E333B; --line-strong: #49515C;
  --accent: #2C5568; --accent-ink: #B5D8E8; --accent-soft: #1D2B33; --lav: #4A3C61; --lav-soft: #241F2E;
  --peach: #8A5E4C; --peach-soft: #2E2226; --pink: #5E3446; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--ink); }
input, textarea { caret-color: var(--accent-ink); }
html { scrollbar-color: var(--line-strong) var(--ground); }
.ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.mono, .kpi .v, .hbar .n, .field.num, .qn { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: 12px; direction: ltr; unicode-bidi: isolate; }
.en { direction: ltr; unicode-bidi: isolate; color: var(--muted); font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- shell ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.bar { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--line); }
.bar-row { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.bar h1 { font-size: 19px; font-weight: 600; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn { min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--r); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; font: inherit; }
.iconbtn:hover { border-color: var(--line-strong); }
.saved { font-size: 12px; color: var(--muted); white-space: nowrap; }

.tabs { display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px solid var(--line); margin-inline: -16px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: none; padding: 10px 0; min-height: 44px; justify-content: center; cursor: pointer; border-bottom: 3px solid transparent; color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 6px; }
.tab[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent-ink); font-weight: 600; }
.tab .tick { width: 12px; height: 12px; border: 1.5px solid var(--line-strong); border-radius: 2px; }
.tab .tick.done { background: var(--accent-ink); border-color: var(--accent-ink); }
.tab .tick.part { background: linear-gradient(135deg, var(--accent-ink) 50%, transparent 50%); border-color: var(--accent-ink); }

main { padding: 8px 0 120px; }
.foot { position: fixed; bottom: 0; inset-inline: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); z-index: 10; }
.foot .wrap { display: flex; gap: 10px; }
.btn { min-height: 48px; padding: 0 18px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent-ink); color: #fff; border-color: var(--accent-ink); }
:root[data-theme="dark"] .btn.primary { color: #10161A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #10161A; } }
.btn.grow { flex: 1; }
.btn.danger { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.btn.quiet { border-color: transparent; background: transparent; font-weight: 400; color: var(--muted); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- section + questions ---------- */
.sec-head { padding: 18px 0 6px; }
.sec-head h2 { font-size: 24px; line-height: 1.3; margin: 0; font-weight: 600; }
.sec-head .en { font-size: 13px; }
.banner { margin: 12px 0; padding: 12px 14px; border-radius: var(--r); background: var(--peach-soft); border: 1px solid var(--peach); font-size: 14px; }
.q { padding: 16px 0; border-bottom: 1px solid var(--line); }
.q:last-child { border-bottom: 0; }
.q-text { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.qn { color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.q-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 10px; }
.q-meta .mono { color: var(--muted); }
.req { color: var(--accent-ink); font-weight: 600; margin-inline-start: 4px; }
.hint { font-size: 13px; color: var(--muted); margin: -4px 0 10px; }
.q.missing .q-text::after { content: '  — مطلوب'; color: var(--muted); font-weight: 400; font-size: 13px; }
.q.missing { background: var(--peach-soft); border-radius: var(--r); padding-inline: 12px; }

.opts { display: grid; gap: 8px; }
.opts.row { grid-auto-flow: column; grid-auto-columns: 1fr; }
.opts.grid2, .opts.row.grid2, .opts.row.keep.grid2 { grid-template-columns: 1fr 1fr; grid-auto-flow: row; grid-auto-columns: auto; }
.opts.num { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
.opt { min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); text-align: start; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.35; }
.opts.row .opt, .opts.num .opt { justify-content: center; text-align: center; padding: 8px 6px; }
@media (hover: hover) { .opt:hover { border-color: var(--ink); } }
.opt[aria-checked="true"], .opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.opt .box { width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 3px; flex: 0 0 auto; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.opt[aria-pressed="true"] .box { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.dkrow { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.dk { min-height: 44px; padding: 0 16px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: transparent; font-size: 13px; color: var(--muted); cursor: pointer; }
.dk[aria-pressed="true"] { background: var(--peach-soft); border: 1px solid var(--ink); color: var(--ink); }

.field { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
textarea.field { min-height: 96px; resize: vertical; }
.field.num { max-width: 160px; direction: ltr; text-align: center; font-variant-numeric: tabular-nums; }
.field.invalid { border-color: var(--ink); background: var(--peach-soft); }
.durrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.durrow .opts.row { flex: 1; min-width: 220px; }
.calc { font-size: 13px; color: var(--muted); margin-top: 6px; }
.other { margin-top: 8px; }

.script { margin: 12px 0 4px; padding: 12px 14px; background: var(--accent-soft); border-radius: var(--r); font-size: 16px; border: 1px solid var(--accent); }
.script::before { content: 'يُقرأ على المشارك'; display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

/* ---------- modality matrix (signature) ---------- */
.mx-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 8px; flex-wrap: wrap; }
.mx { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: clip; }
.mx-row { border-bottom: 1px solid var(--line); }
.mx-row:last-child { border-bottom: 0; }
.mx-main { display: flex; align-items: center; gap: 10px; padding: 12px; width: 100%; min-height: 52px; border: 0; background: var(--surface); color: inherit; font: inherit; text-align: start; position: sticky; top: var(--bar-h, 104px); z-index: 2; }
.mx-row.s-done .mx-main { cursor: pointer; position: static; }
.mx-row.s-done .mx-main:hover { background: var(--accent-soft); }
.mx-main .tick { flex: 0 0 auto; width: 14px; height: 14px; border: 1.5px solid var(--line-strong); border-radius: 3px; }
.mx-main .tick.done { background: var(--accent-ink); border-color: var(--accent-ink); }
.mx-main .tick.part { background: linear-gradient(135deg, var(--accent-ink) 50%, transparent 50%); border-color: var(--accent-ink); }
.mx-sum { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.mx-chev { color: var(--muted); transition: transform 150ms ease-out; }
.mx-chev.open { transform: rotate(180deg); }
.mx-label { flex: 1; font-size: 15px; line-height: 1.4; }
.mx-label .tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--lav-soft); color: var(--ink); margin-inline-start: 6px; vertical-align: middle; }
.yn { display: flex; gap: 6px; }
.yn .opt { min-width: 56px; min-height: 44px; justify-content: center; padding: 6px 8px; }
.mx-detail { padding: 4px 12px 14px; display: grid; gap: 12px; background: var(--surface); border-top: 1px dashed var(--line); }
.mx-attr { display: grid; gap: 6px; }
.mx-attr .lbl { font-size: 13px; color: var(--muted); }
.mx-attr .opts { gap: 6px; }
.mx-attr .opt { min-height: 48px; font-size: 14px; padding: 6px 8px; }
.mx-attr.missing .lbl { color: var(--ink); font-weight: 600; }
.mx-attr.missing .lbl::after { content: ' — مطلوب'; font-weight: 400; color: var(--muted); }

/* ---------- derived chips ---------- */
.derived { margin: 16px 0 0; padding: 12px; border-radius: var(--r); background: var(--lav-soft); border: 1px solid var(--lav); }
.derived h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; padding: 4px 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--lav); }
.chip b { font-weight: 600; }

/* ---------- lists, home, cards ---------- */
.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin: 12px 0; }
.block h2 { font-size: 18px; margin: 0 0 10px; font-weight: 600; }
.block h2 .en { display: block; font-weight: 400; font-size: 12px; }
.tablewrap { overflow-x: auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 16px; }
.kpi { padding: 12px 0; border-top: 1px solid var(--line); }
.kpi .v { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi .l { font-size: 13px; color: var(--muted); }
.meter { height: 8px; background: var(--ground); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.meter > i { display: block; height: 100%; background: var(--accent-ink); }
.hbar { display: grid; grid-template-columns: minmax(110px, 40%) 1fr 48px; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.hbar .track { height: 10px; background: var(--ground); border-radius: 2px; overflow: hidden; }
.hbar .track i { display: block; height: 100%; background: var(--accent); }
.hbar .track i:not([style*="width:0%"]) { box-shadow: inset 2px 0 0 var(--accent-ink); }
.hbar .n { text-align: end; font-variant-numeric: tabular-nums; direction: ltr; }
.nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.nav-grid .btn { min-height: 64px; flex-direction: column; gap: 2px; }
.nav-grid .btn .en { font-weight: 400; }
.nav-grid .wide { grid-column: 1 / -1; }

.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; text-decoration: none; color: inherit; }
.li:last-child { border-bottom: 0; }
.li:hover { background: var(--accent-soft); }
.li .main { flex: 1; min-width: 0; }
.li .t { font-weight: 600; }
.li .s { font-size: 13px; color: var(--muted); }
.status { font-size: 12px; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--line-strong); white-space: nowrap; }
.status.complete { background: var(--accent); border-color: var(--accent-ink); }
.status.draft { background: var(--peach-soft); border-color: var(--peach); }
.searchrow { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.searchrow .field { flex: 1; min-width: 160px; }
.searchrow select.field { flex: 0 0 auto; width: auto; }

/* readable case sheet */
.sheet .sec { margin: 18px 0 6px; font-size: 15px; font-weight: 600; border-bottom: 2px solid var(--accent-ink); padding-bottom: 4px; }
.qa { display: grid; grid-template-columns: 1fr minmax(120px, 42%); gap: 4px 14px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.qa .a { font-weight: 600; }
.qa .a.na { color: var(--muted); font-weight: 400; }
.qa .mono { grid-column: 1 / -1; margin-top: -2px; color: var(--muted); }
.mxs { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.mxs th, .mxs td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: start; vertical-align: top; }
.mxs th { color: var(--muted); font-weight: 400; }

.dialog-back { position: fixed; inset: 0; background: rgba(26,26,31,.45); z-index: 50; display: grid; place-items: end center; }
.dialog { background: var(--surface); width: 100%; max-width: 760px; border-radius: 10px 10px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; }
.dialog h2 { margin: 0 0 12px; font-size: 18px; }
.dialog .actions { display: flex; gap: 10px; margin-top: 16px; }
.miss-list { margin: 0; padding: 0; list-style: none; }
.miss-list button { width: 100%; text-align: start; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 10px 4px; cursor: pointer; }
.miss-list .sec-l { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-inline-end: 8px; }

#toast { position: fixed; bottom: 90px; inset-inline: 16px; margin: 0 auto; max-width: 520px; background: var(--ink); color: var(--surface); padding: 12px 14px; border-radius: var(--r); z-index: 60; font-size: 14px; }

.formrow { display: grid; gap: 6px; margin: 10px 0; }
.formrow > label { font-size: 14px; font-weight: 600; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent-ink); }
.exp-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.exp-row:last-child { border-bottom: 0; }
.exp-row .d { flex: 1; }
.exp-row .d .t { font-weight: 600; }
.exp-row .d .s { font-size: 13px; color: var(--muted); }
.exp-row .btn { min-width: 108px; }

@media (max-width: 420px) {
  .opts.row { grid-auto-flow: row; grid-auto-columns: auto; }
  .opts.row.keep { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .qa { grid-template-columns: 1fr; }
  .mx-main { flex-wrap: wrap; }
  .yn { width: 100%; }
  .yn .opt { flex: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .mx-detail { animation: open 150ms ease-out; }
  @keyframes open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ---------- paper form & print ---------- */
.paper { background: #fff; color: #000; }
.paper .pq { padding: 8px 0; border-bottom: 1px solid #ccc; break-inside: avoid; font-size: 13px; }
.paper .pq .qt { font-weight: 600; }
.paper .po { display: inline-block; margin-inline-end: 14px; white-space: nowrap; }
.paper .po::before { content: '\25A1  '; }
.paper h2 { font-size: 16px; margin: 18px 0 4px; border-bottom: 2px solid #000; }
.paper table { width: 100%; border-collapse: collapse; font-size: 12px; }
.paper td, .paper th { border: 1px solid #999; padding: 4px; text-align: center; }
.paper td:first-child { text-align: start; }
@media print {
  .bar, .foot, .noprint, #toast { display: none !important; }
  body, html { background: #fff; }
  main { padding: 0; }
  .wrap { max-width: none; }
  .block, .list { border: 0; }
  .sheet-case { break-after: page; }
}

/* ---------- polish 1.2.1 ---------- */
body:not(.researcher) .rv-only { display: none !important; }
.prog { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.iconbtn.on { background: var(--accent-soft); border-color: var(--accent-ink); color: var(--ink); }
.action { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--peach-soft); color: var(--ink); font-size: 14px; font-weight: 600; }
.resume { margin: 16px 0 4px; }
.resume h2 { font-size: 14px; color: var(--muted); font-weight: 600; margin: 0 0 6px; }
.resume .li { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 8px; background: var(--surface); }
.resume .li:last-child { border-bottom: 1px solid var(--line); }
details.block > summary { cursor: pointer; font-size: 16px; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
details.block > summary .en { font-weight: 400; flex-basis: 100%; }
details.block > summary { list-style: none; }
details.block > summary::-webkit-details-marker { display: none; }
.sum-chev { color: var(--muted); display: inline-flex; transition: transform 150ms ease-out; }
details[open] > summary .sum-chev { transform: rotate(180deg); }

/* ---------- 1.2.2 ---------- */
p, .hint, .small, li { text-wrap: pretty; }
h1, h2, h3, .q-text, .sec-head h2 { text-wrap: balance; }
.iconbtn { gap: 4px; }
.iconlbl { font-size: 12px; font-weight: 600; }
.formerr { margin: 8px 0 0; padding: 8px 10px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--peach-soft); color: var(--ink); font-size: 14px; }
.formerr:empty { display: none; }
.opt.dkopt { border-style: dashed; color: var(--muted); font-size: 13px; }
.opt.dkopt[aria-checked="true"] { color: var(--ink); background: var(--peach-soft); border-style: solid; border-color: var(--ink); box-shadow: none; }
.opts.grid2 .dkopt { grid-column: 1 / -1; min-height: 44px; }
.mx-attr { scroll-margin-top: calc(var(--bar-h, 104px) + 64px); }
.mx-main { transition: background-color 400ms ease-out; }
.mx-main.flash { background: var(--accent-soft); }
.gap { margin-inline-start: 0; margin-right: 8px; }   /* page is RTL; a <bdi> of Latin text is LTR inside, so name the physical side */