/* ============================================================
   aiact.css — Part-2 (AI Act learner) per-screen styles.
   Sits ON TOP of shell.css — re-declares NOTHING shell owns
   (palette vars, .phone-vp frame, .scr/.scrbody, .hdr, .toast,
   home tiles, responsive). Prebuild decision #7.
   Screens: entry (two doors) → list (Full / Essentials) →
   unit renderer (8 beats) + diagram lightbox.
   ============================================================ */

/* statute-excerpt palette (only tokens shell does not define) */
:root{
  --stbg:#faf6ec; --stline:#e7dcc4; --stink:#5f4c1c;
}

/* progress bar inside the shared indigo sub-header */
.hdr .prog{height:5px;background:rgba(255,255,255,.22);border-radius:3px;margin-top:.65rem;overflow:hidden}
.hdr .prog i{display:block;height:100%;background:var(--camel);border-radius:3px;transition:width .2s}
.hdr .cont{font-size:.78rem;opacity:.9;margin-top:.4rem;font-weight:700}

/* ---------- ENTRY (two doors + continue + reference) ---------- */
.entry{padding:1.1rem 1.15rem 1.3rem;display:flex;flex-direction:column;gap:.75rem}
.door{border:1px solid var(--line-2);border-radius:15px;background:var(--paper);padding:.95rem 1rem;cursor:pointer;text-align:left;font-family:inherit;transition:.16s;width:100%}
.door:hover{border-color:var(--indigo);box-shadow:0 10px 22px -16px rgba(56,56,136,.5)}
.door__top{display:flex;align-items:baseline;gap:.55rem}
.door__ttl{font-size:1.12rem;font-weight:800;color:var(--navy)}
.door__cnt{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--indigo);border-radius:20px;padding:.14rem .55rem}
.door--full .door__cnt{background:var(--camel);color:var(--navy)}
.door__body{margin:.45rem 0 0;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.door__go{margin-top:.55rem;font-size:.8rem;font-weight:700;color:var(--indigo)}
.contx{border:1px dashed var(--line-2);border-radius:13px;background:var(--paper-2);padding:.8rem 1rem;cursor:pointer;font-family:inherit;text-align:left;display:flex;align-items:center;gap:.75rem;transition:.16s;width:100%}
.contx:hover{border-color:var(--indigo)}
.contx .ic{font-size:1.2rem}
.contx b{color:var(--navy);font-weight:700;font-size:.92rem}
.contx small{display:block;color:var(--ink-3);font-size:.78rem;margin-top:.12rem}
.refrow{border:1px dashed var(--line-2);border-radius:13px;background:var(--paper);padding:.8rem 1rem;cursor:pointer;font-family:inherit;text-align:left;display:flex;align-items:center;gap:.75rem;color:var(--ink-2);transition:.16s;width:100%}
.refrow:hover{border-color:var(--indigo);color:var(--indigo)}
.refrow b{font-size:.9rem;font-weight:700}
.refrow small{color:var(--ink-3);font-weight:500}

/* ---------- LIST ---------- */
.inpath{padding:.6rem 1.1rem;background:var(--camel-tint);border-bottom:1px solid var(--stline);font-size:.8rem;color:var(--conf);font-weight:700}
.phaseh{padding:.85rem 1.1rem .35rem;display:flex;align-items:baseline;gap:.55rem}
.phaseh .no{width:20px;height:20px;border-radius:50%;background:var(--indigo);color:#fff;font-size:.66rem;font-weight:700;display:grid;place-items:center;flex:0 0 auto}
.phaseh .pl{font-size:.9rem;font-weight:800;color:var(--navy)}
.phaseh .ar{font-size:.7rem;color:var(--ink-3);margin-left:auto}
.urow{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.1rem;cursor:pointer;border-bottom:1px solid var(--line);font-family:inherit;text-align:left;width:100%;background:var(--paper)}
.urow:hover{background:var(--paper-2)}
.urow .sq{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line-2);display:grid;place-items:center;font-size:.82rem;font-weight:700;color:var(--ink-2)}
.urow.done .sq{background:var(--okbg);border-color:#bfe0cd;color:var(--ok)}
.urow .tx{flex:1;min-width:0}
.urow .tt{font-size:.96rem;color:var(--ink);line-height:1.3}
.urow .badges{display:flex;gap:.4rem;margin-top:.25rem;flex-wrap:wrap;align-items:center}
.b-ess{font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--conf);background:var(--camel-tint);border:1px solid #e4d6bc;border-radius:5px;padding:.08rem .4rem}
.b-npath{font-size:.66rem;font-weight:700;color:var(--ink-3)}
.urow .go{flex:0 0 auto;color:var(--line-2);font-size:1.25rem}
.urow:hover .go{color:var(--indigo)}

/* ---------- UNIT (8 beats) ---------- */
.body-u{padding:.8rem .85rem 1rem}
.beat{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:.6rem;overflow:hidden}
.lab{font-size:.68rem;font-weight:800;letter-spacing:.04em;color:var(--amber);text-transform:uppercase;display:flex;align-items:center;gap:.5rem;padding:.7rem .8rem;cursor:pointer;user-select:none}
.lab .n{background:var(--indigo);color:#fff;width:19px;height:19px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.64rem;font-weight:800}
.lab .nm{color:var(--navy);font-weight:800;font-size:.72rem}
.lab .chev{margin-left:auto;transition:transform .15s;color:var(--ink-3);font-size:.78rem}
.beat.collapsed .chev{transform:rotate(-90deg)}
.bbody{padding:0 .8rem .8rem}
.beat.collapsed .bbody{display:none}
.t{font-size:.92rem;color:#33424f;line-height:1.62}
.t + .t{margin-top:.6rem}
.t strong,.t b{color:var(--navy)}
.t em{color:var(--amber);font-style:italic}
.statute{margin-top:.65rem;background:var(--stbg);border:1px solid var(--stline);border-left:4px solid var(--amber);border-radius:9px;padding:.7rem .75rem}
.statute .sh{display:flex;align-items:center;gap:.5rem}
.statute .art{font-size:.8rem;font-weight:800;color:var(--stink)}
.statute .badge{margin-left:auto;font-size:.56rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:#efe4c8;color:var(--conf);border-radius:5px;padding:.14rem .45rem}
.statute .quote{font-size:.9rem;line-height:1.64;color:#2f2a1c;margin-top:.55rem;font-family:Georgia,'Times New Roman',serif}
.statute .quote b{color:var(--conf)}
.statute .attr{font-size:.66rem;color:#9a8a63;margin-top:.6rem;line-height:1.5;border-top:1px dashed var(--stline);padding-top:.5rem}
.statute.pending .quote{font-family:var(--sans);color:var(--ink-3);font-style:italic}
.linkr{display:inline-flex;align-items:center;gap:.45rem;color:var(--navy);font-size:.84rem;font-weight:700;text-decoration:none;border:1px solid var(--line-2);border-radius:9px;padding:.6rem .8rem;margin-top:.65rem;background:var(--paper-2)}
.linkr small{font-weight:600;color:var(--ink-3);font-size:.7rem}
.reveal{cursor:pointer;display:inline-block;font-size:.8rem;font-weight:800;color:var(--amber);border:1px dashed var(--amber);border-radius:8px;padding:.55rem .8rem;margin-top:.55rem;background:none;font-family:inherit}
.answer{display:none;margin-top:.6rem;background:var(--paper-2);border:1px solid var(--line);border-radius:9px;padding:.65rem .75rem;font-size:.9rem;color:#33455a;line-height:1.6}
.answer.show{display:block}
.answer strong{color:var(--navy)}
.qh{font-size:.94rem;font-weight:700;color:var(--ink);margin:.15rem 0;line-height:1.35}
figure{margin:.7rem 0 .1rem;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);padding:.6rem;position:relative;cursor:zoom-in}
figure .zoomhint{position:absolute;top:.5rem;right:.55rem;font-size:.62rem;font-weight:800;color:var(--indigo);background:var(--indigo-tint);border:1px solid #d6d3ec;border-radius:6px;padding:.15rem .45rem;pointer-events:none}
figcaption{font-size:.66rem;color:var(--ink-3);text-align:center;margin-top:.4rem}
.opts{margin-top:.2rem}
.opt{border:1.4px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:.9rem;margin-top:.5rem;color:#33424f;display:flex;align-items:center;gap:.6rem;cursor:pointer}
.opt:hover{border-color:var(--line-2)}
.opt .k{font-weight:800;width:16px;flex:none;text-transform:uppercase}
.opt .mk{margin-left:auto;font-weight:900;opacity:0;font-size:1.05rem}
.answered .opt{cursor:default}
.opt.wrong{border-color:#e6c2c2;background:var(--nobg);color:#7a3a3a}
.opt.right{border-color:#bfe0cd;background:var(--okbg);color:#245a3d;font-weight:600}
.opt.wrong .mk{color:var(--no);opacity:1}
.opt.right .mk{color:var(--ok);opacity:1}
.fb{display:none;margin-top:.65rem;border-left:3px solid var(--indigo);background:var(--paper-2);border-radius:0 9px 9px 0;padding:.65rem .75rem}
.fb.show{display:block}
.fl{font-size:.64rem;font-weight:800;letter-spacing:.05em;color:var(--indigo);text-transform:uppercase;display:flex;align-items:center;gap:.45rem}
.fl .n{background:var(--indigo);color:#fff;width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem}
.cites{display:flex;flex-direction:column;gap:.35rem;margin-top:.6rem}
.cite{font-size:.72rem;color:#41506a;background:var(--indigo-tint);border:1px solid #dbd8ee;border-radius:6px;padding:.35rem .55rem;line-height:1.4}
.cite b{color:var(--navy)}
.cite i{color:var(--ink-3);font-style:normal}
.cite.am{background:var(--camel-tint);border-color:#e4d6bc}
.cite .amtag{display:inline-block;margin-left:.35rem;font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--conf)}
.deeper .drow{display:flex;gap:.6rem;margin-top:.6rem}
.deeper .ic{font-size:1rem;line-height:1.3}
.deeper .rt{font-size:.86rem;color:#33424f;line-height:1.55}
.deeper .rt b{color:var(--navy)}
.deeper .rt em{color:var(--amber);font-style:italic}
.ufoot{flex:0 0 auto;border-top:1px solid var(--line);padding:.7rem .85rem;background:var(--paper-2)}
.cta{background:var(--indigo);color:#fff;text-align:center;border-radius:11px;padding:.75rem;font-size:.9rem;font-weight:800;cursor:pointer;border:none;width:100%;font-family:inherit}
.cta:hover{background:#30306f}
.cta.done{background:var(--okbg);color:var(--ok);cursor:default}

/* ---------- diagram theming (diagrams.js `dg-*`, brand-mapped) ---------- */
.dg{display:block;width:100%;height:auto}
.dg-t{font:600 13px var(--sans);fill:var(--ink)}
.dg-m{font:600 10px var(--sans);fill:var(--ink-3)}
text.dg-kick{fill:var(--indigo);font-weight:700;letter-spacing:.05em}
text.dg-cap{fill:var(--ink-3);font-style:italic}
.dg-l{stroke:var(--line-2)}
.dg-hair{stroke:var(--line);stroke-width:1}
.dg-a{fill:none;stroke:var(--ink-3);stroke-width:1.4}
.dg-b{fill:var(--paper-2);stroke:var(--line-2)}
.dg-b.dg-mid{fill:var(--camel-tint);stroke:#e4d6bc}
.dg-b.dg-key{fill:var(--indigo-tint);stroke:#d6d3ec}
.dg-n.dg-off{fill:var(--line-2)}
.dg-n.dg-mid{fill:var(--camel)}
.dg-n.dg-key{fill:var(--indigo)}
text.dg-nt{fill:#fff;text-anchor:middle;font-weight:700;font-size:10px}
text.dg-off{fill:var(--ink-3)}
text.dg-t.dg-mid{fill:var(--ink);font-weight:700}
text.dg-m.dg-mid{fill:var(--ink-2)}
text.dg-key{fill:var(--indigo);font-weight:700}

/* ---------- diagram lightbox (tap to enlarge) ---------- */
.lb{position:absolute;inset:0;background:rgba(20,16,32,.86);z-index:30;display:none;flex-direction:column;padding:1.1rem}
.lb.show{display:flex}
.lb__bar{display:flex;justify-content:space-between;align-items:center;color:#fff;margin-bottom:.7rem}
.lb__ttl{font-size:.82rem;font-weight:700;opacity:.9}
.lb__x{background:rgba(255,255,255,.18);border:none;color:#fff;font-size:1.1rem;font-weight:800;border-radius:9px;width:38px;height:38px;cursor:pointer}
.lb__stage{flex:1;min-height:0;background:#fff;border-radius:14px;padding:1rem;display:flex;align-items:center;justify-content:center;overflow:auto}
.lb__stage svg{width:100%;height:auto;max-width:none}
.lb__hint{color:#d8d3e6;font-size:.72rem;text-align:center;margin-top:.7rem}