/* Dashboard for the Egyptian ID reading (see result.js). Uses the page's colour variables; adds the grade colours. */
:root {
  --g-sure:#1a7f37; --g-sure-bg:#e6f4ea; --g-check:#8a5a00; --g-check-bg:#fff3d1; --g-problem:#b42318; --g-problem-bg:#fde8e6; --g-none:#5b6573; --g-none-bg:#eceff3;
  --c1:#6c5ce7; --c2:#1f6feb; --c3:#0b8f8f; --c4:#c2410c; --c5:#7a7f89;
  --panel:#fff; --panel2:#f6f7f9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --g-sure:#56d364; --g-sure-bg:#12301b; --g-check:#e8b93a; --g-check-bg:#3a2f0b; --g-problem:#ff8a80; --g-problem-bg:#41191a; --g-none:#a5afbd; --g-none-bg:#242b34;
    --c1:#a29bfe; --c2:#58a6ff; --c3:#4fd1c5; --c4:#fb923c; --c5:#9aa4b2;
    --panel:#1b2028; --panel2:#151a21;
  }
}
.dash { display:flex; flex-direction:column; gap:12px; }
.bi { display:inline-flex; flex-direction:column; line-height:1.2; }
.bi .ar { font-size:.95em; font-weight:600; text-align:left; }
.bi .en { font-size:.78em; color:var(--muted); }
.print-only { display:none; }

/* summary */
.summary { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--panel2); border-inline-start:6px solid var(--g-none); }
.summary.v-sure { border-inline-start-color:var(--g-sure); } .summary.v-check { border-inline-start-color:var(--g-check); } .summary.v-problem { border-inline-start-color:var(--g-problem); }
.sumtop { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; }
.sumtext .big .ar { font-size:1.15rem; } .sumtext .big .en { font-size:.9rem; }
.faces { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.face { display:inline-flex; gap:6px; align-items:center; padding:3px 10px; border-radius:999px; border:1px solid var(--line); font-size:.85rem; }
.face.yes { background:var(--g-sure-bg); border-color:transparent; } .face.no { color:var(--muted); }
.actions { display:flex; gap:6px; flex-wrap:wrap; }
button.act { padding:6px 12px; }
.meter { display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--line); margin:12px 0 6px; gap:2px; }
.meter .seg { min-width:6px; } .seg.g-sure { background:var(--g-sure); } .seg.g-check { background:var(--g-check); } .seg.g-problem { background:var(--g-problem); } .seg.g-none { background:var(--g-none); }
.counts { display:flex; gap:14px; flex-wrap:wrap; }
.cnt { display:inline-flex; gap:6px; align-items:center; font-size:.85rem; }
.cnt b { font-size:1.05rem; min-width:1ch; } .cnt.g-sure b { color:var(--g-sure); } .cnt.g-check b { color:var(--g-check); } .cnt.g-problem b { color:var(--g-problem); } .cnt.g-none b { color:var(--g-none); }

/* panels */
.grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:680px) { .grid { grid-template-columns:1fr 1fr; } .panel-identity, .panel-checks { grid-column:1 / -1; } }
.panel { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--panel); min-width:0; }
.panel h3 { margin:0 0 8px; font-size:1rem; padding-bottom:6px; border-bottom:1px solid var(--line); }
.placeholder { color:var(--muted); padding:14px 4px; text-align:center; border:1px dashed var(--line); border-radius:8px; }
.idphoto { float:inline-end; width:96px; border-radius:8px; border:1px solid var(--line); margin:0 0 8px 10px; }
.panel-identity::after { content:""; display:block; clear:both; }

/* a field */
.fld { position:relative; padding:7px 0; border-bottom:1px solid var(--line); } .fld:last-child { border-bottom:none; }
.fld .lbl { margin-bottom:2px; }
.fld .val { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.fld .v { font-size:1.08rem; font-weight:600; overflow-wrap:anywhere; } .fld .v.empty { color:var(--muted); font-weight:400; }
.fld .v.mono, .digits { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.04em; }
.nameinput { flex:1 1 220px; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--fg); font:inherit; font-size:1.2rem; }
.fld .note { margin-top:3px; font-size:.82rem; color:var(--muted); }
.fld.g-problem .note, .fld.g-check .note { color:var(--fg); }
.facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:0 14px; margin-top:4px; }
.fld.compact { padding:6px 0 6px 0; } .fld.compact .v { font-size:1rem; } .fld.compact .val { gap:6px; }
.alts { display:flex; gap:6px; flex-wrap:wrap; margin-top:5px; }
button.alt { padding:3px 10px; font-size:.95rem; border-radius:999px; }
button.cp { position:absolute; top:6px; inset-inline-end:0; padding:4px 7px; line-height:0; border-radius:6px; opacity:.7; }
button.cp:hover { opacity:1; } button.cp.done { color:var(--g-sure); opacity:1; } button.cp.done svg { display:none; } button.cp.done::after { content:"✓"; line-height:1; font-size:.9rem; }
button.act.done { border-color:var(--g-sure); } button.act.done::after { content:" ✓"; color:var(--g-sure); }
button.cp.inline { position:static; margin-inline-start:auto; }
.fld:has(button.cp:not(.inline)) .lbl { padding-inline-end:38px; }
.chip { display:inline-flex; gap:5px; align-items:center; padding:2px 9px; border-radius:999px; font-size:.78rem; white-space:nowrap; }
.chip .ic { font-weight:700; } .chip .ar { font-weight:600; } .chip .en { opacity:.85; }
.chip.g-sure { background:var(--g-sure-bg); color:var(--g-sure); } .chip.g-check { background:var(--g-check-bg); color:var(--g-check); }
.chip.g-problem { background:var(--g-problem-bg); color:var(--g-problem); } .chip.g-none { background:var(--g-none-bg); color:var(--g-none); } .chip.na { color:var(--muted); padding:2px 6px; }
.fld.g-problem { border-inline-start:4px solid var(--g-problem); padding-inline-start:8px; } .fld.g-check { border-inline-start:4px solid var(--g-check); padding-inline-start:8px; }
.fld.g-sure { border-inline-start:4px solid var(--g-sure); padding-inline-start:8px; } .fld.g-none { border-inline-start:4px solid var(--g-none); padding-inline-start:8px; }
.pill { display:inline-flex; gap:5px; padding:2px 9px; border-radius:6px; font-size:.78rem; font-weight:600; }
.pill.st-valid { background:var(--g-sure-bg); color:var(--g-sure); } .pill.st-expired { background:var(--g-problem-bg); color:var(--g-problem); }

/* the number, drawn in groups */
.numgraphic { margin:6px 0 4px; }
.digits { display:flex; gap:10px; flex-wrap:nowrap; justify-content:flex-start; }
.grp { display:flex; gap:2px; padding-bottom:5px; border-bottom:4px solid var(--c5); }
.grp-c { border-color:var(--c1); } .grp-d { border-color:var(--c2); } .grp-g { border-color:var(--c3); } .grp-s { border-color:var(--c4); } .grp-k { border-color:var(--c5); }
.dg { display:inline-flex; align-items:center; justify-content:center; width:1.55rem; height:2.1rem; border:1px solid var(--line); border-radius:6px; background:var(--panel2); font-size:1.05rem; font-weight:700; }
.digits.g-problem .dg { border-color:var(--g-problem); } .digits.g-check .dg { border-color:var(--g-check); } .digits.g-sure .dg { border-color:var(--g-sure); }
.legend { display:grid; grid-template-columns:1fr; gap:6px 24px; margin-top:10px; font-size:.82rem; }
@media (min-width:560px) { .legend { grid-template-columns:1fr 1fr; } }
.lg { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:8px; align-items:center; }
.lg .dot { width:10px; height:10px; border-radius:3px; flex:none; background:var(--c5); }
.lg-c .dot { background:var(--c1); } .lg-d .dot { background:var(--c2); } .lg-g .dot { background:var(--c3); } .lg-s .dot { background:var(--c4); }
.lg .mean { font-weight:700; text-align:end; white-space:nowrap; }
@media (max-width:420px) { .digits { gap:8px 5px; flex-wrap:wrap; } .dg { width:1.2rem; height:1.85rem; font-size:.9rem; } .grp { gap:1px; } .idphoto { width:78px; } }

/* checks */
ul.checks { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.ck { display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:8px; background:var(--panel2); }
.ck .ic { flex:none; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; }
.ck-ok .ic { background:var(--g-sure-bg); color:var(--g-sure); } .ck-warn .ic { background:var(--g-check-bg); color:var(--g-check); } .ck-bad .ic { background:var(--g-problem-bg); color:var(--g-problem); }
.ck-bad { outline:2px solid var(--g-problem); } .ck .note { font-size:.82rem; color:var(--muted); margin-top:2px; }

details.notes, details.printed { margin-top:6px; } details.printed pre { margin:4px 0 0; }
.feedback { margin-top:6px; }

/* print: the dashboard only, on white, without buttons */
@media print {
  body { background:#fff !important; color:#000 !important; }
  .no-print, #out > .no-print, button, .feedback, details.notes > summary { display:none !important; }
  main { max-width:none; padding:0; } #out { border:none !important; padding:0 !important; box-shadow:none !important; }
  .print-only { display:block; font-weight:600; margin-bottom:6px; }
  .panel, .summary, .ck { break-inside:avoid; }
  .grid { grid-template-columns:1fr 1fr; } .panel-identity, .panel-checks { grid-column:1 / -1; }
  details > *:not(summary) { display:block; }
}