/* e'thix — question cards, additions (facts.js): big yes/no, «السؤال ٢ من ٥», the source of a value being confirmed,
   a document's proposal with «أكّد» / «ليس صحيحًا», the Hijri line and Hijri entry, and the card's navigation.
   Loaded after casefile.css (which holds the cards' base look); only what the new parts need, in the same tokens.
   Mobile first: every control is at least 44 px tall and nothing needs a horizontal scroll at 320 px. */

/* Yes / no: two big buttons side by side — a thumb's answer, not a small radio */
.fq-yn .fq-opt-t{min-height:52px;font-size:16px;font-weight:700;border-radius:14px}
.fq-field.fq-t-boolean .fq-opts{gap:10px}

/* «السؤال ٢ من ٥» — and under it the counter's own bar (N20 polish: the file's count is a line of its own, not this bar) */
.fq-qnum{margin:0;font-size:12.5px;font-weight:700;color:var(--gold-text)}
.fq-qnum + .fq-steps{margin-top:-4px}
.fq-progress-line{display:flex;align-items:center;gap:6px;margin:0}
.fq-progress-line .i{flex:none;width:14px;height:14px;color:var(--ok)}

/* the source of the value on file, and the words it was read from */
.fq-src{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;font-size:13px;color:var(--ink-2,var(--ink));overflow-wrap:anywhere}
.fq-src-q,.fq-doc-quote{margin:0;padding:6px 10px;border-inline-start:3px solid var(--accent-b);border-radius:6px;font-size:13px;line-height:1.7;
  color:var(--ink);background:color-mix(in srgb,var(--accent-a) 8%,var(--surface));overflow-wrap:anywhere;white-space:pre-wrap}

/* a value proposed from the customer's document */
.fq-doc{display:grid;gap:8px;padding:10px 12px;border-radius:var(--r-sm,12px);border:1px dashed color-mix(in srgb,var(--accent-b) 55%,var(--line));
  background:color-mix(in srgb,var(--accent-a) 6%,var(--surface))}
.fq-doc-h{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:700;color:var(--ink)}
.fq-doc-h svg{width:16px;height:16px;flex:none}
.fq-doc-src{margin:0;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
/* W3 PK-W3-1: «ص ٣» beside a document source opens that page in the viewer, the words marked */
.fq-src .dv-link,.fq-doc-src .dv-link{margin-inline-start:6px;vertical-align:baseline}
@media (pointer:coarse){.fq-page{min-height:32px}}
.fq-doc-name{font-weight:600;color:var(--ink)}
.fq-nowrap{white-space:nowrap}
.fq-doc-val{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;font-size:14px;overflow-wrap:anywhere}
.fq-doc-opts{display:flex;flex-wrap:wrap;gap:8px}
.fq-doc-opt{position:relative;display:flex;flex:1 1 120px;min-width:0;cursor:pointer}
.fq-doc-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fq-doc-t{display:flex;align-items:center;justify-content:center;flex:1;min-height:48px;padding:8px 14px;border-radius:13px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:15px;font-weight:700;text-align:center;transition:border-color var(--t),background-color var(--t),color var(--t)}
.fq-doc-confirm input:checked + .fq-doc-t{border-color:transparent;background:var(--g-accent);color:var(--on-accent)}
.fq-doc-reject input:checked + .fq-doc-t{border-color:var(--danger,#b42318);color:var(--danger,#b42318);background:color-mix(in srgb,var(--danger,#b42318) 8%,var(--surface))}
.fq-doc-opt input:focus-visible + .fq-doc-t{outline:2px solid var(--accent-c);outline-offset:2px}
.fq-doc-opt input:disabled + .fq-doc-t{opacity:.45;cursor:default}
.fq-doc-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}

/* the Hijri line under a date, and the Hijri entry */
.fq-hijri{font-size:12.5px;color:var(--ink);font-weight:600}
.fq-hij{font-size:13px}
.fq-hij-s{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--gold-text);font-weight:600}
.fq-hij-s:focus-visible{outline:2px solid var(--accent-c);outline-offset:2px;border-radius:6px}
.fq-hij-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1.3fr);gap:8px;margin:4px 0 8px}
.fq-hij-f{display:grid;gap:4px;min-width:0}
.fq-hij-l{font-size:12px;font-weight:600;color:var(--muted)}
.fq-hij-n,.fq-hij-m{min-height:44px;min-width:0;width:100%}
.fq-hij-err:empty{display:none}

/* navigation between the questions: «السابق» / «التالي» */
.fq-nav{display:flex;flex-wrap:wrap;gap:8px}

@media (max-width:480px){
  .fq-nav{flex:1 1 100%}
  .fq-nav > .b{flex:1 1 0}
  .fq-hij-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fq-hij-month{grid-column:1 / -1;grid-row:1}
}
@media (max-width:380px){
  .fq-doc-opt{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .fq-doc-t{transition:none}
}
html.hc .fq-doc,html.hc .fq-doc-t{border-color:var(--ink)}
@media (forced-colors:active){
  .fq-doc-opt input:checked + .fq-doc-t{forced-color-adjust:none;background:Highlight;color:HighlightText;border:2px solid Highlight}
  .fq-doc-opt input:focus-visible + .fq-doc-t{outline:2px solid CanvasText}
}

/* ─── wave 2 (DOC-CASE UI): «أشرح بكلامي», keys 1–9, «عرفتها الآن», years + months, the quote check, the discrepancy ─── */

/* C5: «أشرح بكلامي» — an answer that does not fit the card goes into the composer; the card stays */
.fq-explain{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 2px;border:0;background:none;color:var(--gold-text);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;justify-self:start;text-align:start}
.fq-explain svg{width:16px;height:16px;flex:none}
.fq-explain:hover span{text-decoration:underline}
.fq-explain:focus-visible{outline:2px solid var(--accent-c);outline-offset:2px;border-radius:6px}

/* C5: the key that picks an option, shown only where there is a keyboard (empty alternative text: never read aloud) */
@media (hover:hover) and (pointer:fine){
  .fq-opt-t[data-key]::before,.fq-doc-t[data-key]::before{content:attr(data-key) / "";display:inline-grid;place-items:center;min-width:18px;height:18px;
    margin-inline-end:8px;padding:0 4px;border-radius:5px;border:1px solid currentColor;font-size:11px;font-weight:700;opacity:.6}
}

/* C1: answered «لا أعرف» before — and «عرفتها الآن» */
.fq-declined{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 10px;border-radius:10px;
  background:color-mix(in srgb,var(--ink) 4%,var(--surface))}
.fq-declined-t{margin:0;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.fq-known{min-height:44px}

/* C3: years / months / days — three number fields under the length of time */
.fq-dur{display:grid;gap:4px;margin-top:6px}
.fq-dur-cap{margin:0;font-size:12.5px;font-weight:600;color:var(--muted)}
.fq-dur-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fq-dur-f{display:grid;gap:4px;min-width:0}
.fq-dur-l{font-size:12px;font-weight:600;color:var(--muted)}
.fq-dur-n{min-height:44px;min-width:0;width:100%;text-align:center}
.fq-dur-err{margin:0;font-size:12.5px;font-weight:600;color:var(--danger,#b42318)}
.fq-dur-err:empty{display:none}

/* D6: «✓ النص موجود في ص ٢» — or why it is not said */
.fq-verify{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:12.5px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.fq-verify svg{width:15px;height:15px;flex:none}
.fq-verify.is-found{color:var(--ok,#067647);font-weight:700}
.fq-verify.is-missing{color:var(--danger,#b42318);font-weight:600}
.fq-verify .dv-link{margin-inline-start:2px}

/* D7: the file says one thing, the document another — side by side, then «أيهما الصحيح؟» */
.fq-disc{display:grid;gap:10px;padding:10px 12px;border-radius:var(--r-sm,12px);border:1px solid color-mix(in srgb,var(--warn,#b54708) 45%,var(--line));
  background:color-mix(in srgb,var(--warn,#b54708) 6%,var(--surface))}
.fq-disc-h{display:flex;align-items:center;gap:6px;margin:0;font-size:13.5px;font-weight:700;color:var(--ink)}
.fq-disc-h svg{width:16px;height:16px;flex:none;color:var(--warn,#b54708)}
.fq-disc-sides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.fq-disc-side{display:grid;align-content:start;gap:6px;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.fq-disc-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;font-size:14px;overflow-wrap:anywhere}
.fq-disc-o-mine input:checked + .fq-doc-t,.fq-disc-o-doc input:checked + .fq-doc-t{border-color:transparent;background:var(--g-accent);color:var(--on-accent)}
@media (max-width:560px){.fq-disc-sides{grid-template-columns:minmax(0,1fr)}}
html.hc .fq-disc,html.hc .fq-disc-side{border-color:var(--ink)}
@media (forced-colors:active){
  .fq-disc-o-mine input:checked + .fq-doc-t,.fq-disc-o-doc input:checked + .fq-doc-t{forced-color-adjust:none;background:Highlight;color:HighlightText;border:2px solid Highlight}
}

/* D4: one document of the case — what the file took from it, «افتح», «احذف» in two steps */
.fq-docrow{display:grid;gap:8px;margin-top:6px}
.fq-docrow-h{margin:0;font-size:12.5px;font-weight:700;color:var(--muted)}
.fq-docrow-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.fq-docrow-i{display:grid;gap:2px;min-width:0;padding:6px 8px;border-radius:8px;background:color-mix(in srgb,var(--ink) 3%,var(--surface))}
.fq-docrow-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin:0;font-size:13.5px;overflow-wrap:anywhere}
.fq-docrow-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:12px;color:var(--muted)}
.fq-docrow-tag{padding:1px 8px;border-radius:999px;border:1px dashed var(--line);font-weight:600}
.fq-docrow-tag.ok{border-style:solid;color:var(--ok,#067647)}
.fq-docrow-none{margin:0;font-size:13px;color:var(--muted)}
/* N20 caseflow (D2): what the document says that the file already holds */
.fq-docrow-i.is-match{background:color-mix(in srgb,var(--ok,#067647) 6%,var(--surface))}
.fq-docrow-acts{display:flex;flex-wrap:wrap;gap:8px}
.fq-docrow-acts .b{min-height:44px}
.fq-docrow-sure{display:grid;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--danger,#b42318) 40%,var(--line))}
.fq-docrow-sure[hidden],.fq-docrow-del[hidden]{display:none}
.fq-docrow-says{margin:0;font-size:13px;line-height:1.7;color:var(--ink);overflow-wrap:anywhere}
html.hc .fq-docrow-sure,html.hc .fq-docrow-tag{border-color:var(--ink)}
/* wave r3: the ONE confirm card — «هل فهمنا وقائعك صحيحاً؟», each fact a row with its value and «صحّح» */
.fq-cfa{display:grid;gap:10px}
.fq-cfa-why{margin:0;font-size:13px;line-height:1.7;color:var(--muted,var(--ink))}
.fq-cfa-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fq-cfa-row{display:grid;gap:8px;padding:9px 12px;border-radius:var(--r-sm,10px);border:1px solid var(--line)}
.fq-cfa-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;min-width:0}
.fq-cfa-v{overflow-wrap:anywhere}
.fq-cfa-fix{margin-inline-start:auto;min-height:44px}
.fq-cfa-fix[hidden]{display:none}
html.hc .fq-cfa-row{border-color:var(--ink)}

/* N20 (P2): a document's «افتح» is a button like «احذف» beside it — the page-viewer link's pill metrics made it a
   cramped circle */
.fq-docrow-acts{align-items:center}
.fq-docrow-acts .fq-docrow-open{min-height:var(--b-h,34px);padding:0 14px;border-radius:10px;gap:6px;justify-content:center;font-size:13px}
@media (pointer:coarse){.fq-docrow-acts .fq-docrow-open{min-height:44px}}