/* K-SIDE eCRF stylesheet.
 *
 * Lifted VERBATIM from the sponsor-approved prototype (Wagtail page 654,
 * lines 7-114). Do not restyle, rename or "tidy" anything in this block: the
 * interface was reviewed and signed off by Takeda in two rounds during June
 * 2026, and tests/test_ui_parity.py fails if these rules drift.
 *
 * Additions required by the production system - which the prototype only
 * stubbed out - live in ecrf-app.css and reuse these same custom properties
 * and class names.
 */
  :root{
    --takeda:#e1261c; --takeda-d:#b51a12; --ink:#1d2733; --muted:#6b7785;
    --line:#dfe4ea; --bg:#f4f6f9; --card:#fff; --ok:#16895a;
    --new:#0b6bcb; --newbg:#e6f0fb; --reqs:#e1261c; --excl:#b51a12; --exclbg:#fdecea;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;line-height:1.45}
  header.top{background:#fff;border-bottom:3px solid var(--takeda);padding:14px 22px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
  header.top .logo{font-weight:800;color:var(--takeda);font-size:20px;letter-spacing:.5px}
  header.top .sub{color:var(--muted);font-size:12.5px}
  header.top .right{margin-left:auto;display:flex;align-items:center;gap:12px}
  .langsw{display:flex;border:1px solid var(--line);border-radius:20px;overflow:hidden;font-size:12.5px;font-weight:600}
  .langsw button{border:none;background:#fff;color:var(--muted);padding:5px 13px;cursor:pointer}
  .langsw button.on{background:var(--takeda);color:#fff}
  .verchip{background:#eef1f5;color:var(--muted);padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}
  .wrap{display:flex;min-height:calc(100vh - 56px)}
  nav.side{width:280px;background:#fff;border-right:1px solid var(--line);padding:14px 0;position:sticky;top:56px;height:calc(100vh - 56px);overflow:auto;flex:none}
  nav.side .grp{padding:8px 18px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
  nav.side a{display:flex;gap:8px;align-items:center;padding:7px 18px;color:var(--ink);text-decoration:none;font-size:13px;border-left:3px solid transparent}
  nav.side a:hover{background:var(--bg)}
  nav.side a.active{background:var(--newbg);border-left-color:var(--takeda);font-weight:600}
  nav.side a .fid{font-family:monospace;color:var(--muted);font-size:11px;min-width:30px}
  main{flex:1;padding:24px 30px;max-width:980px}
  .formhead{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
  .formhead h1{font-size:21px;margin:0}
  .formhead .pfx{font-family:monospace;background:#eef1f5;padding:2px 8px;border-radius:5px;color:var(--muted);font-size:13px}
  .formhead .rep{font-size:11.5px;background:#f0ebff;color:#5b3fb0;border:1px solid #ddd1ff;padding:2px 8px;border-radius:10px;font-weight:600}
  .desc{color:var(--muted);margin:0 0 14px;font-size:13px}
  .reviewbar{background:#fff;border:1px solid var(--line);border-left:4px solid var(--takeda);border-radius:8px;padding:9px 14px;margin-bottom:16px;font-size:12.5px;color:var(--muted)}
  .note-ctx{background:#eef7f0;border:1px solid #cde8d6;border-left:4px solid var(--ok);border-radius:8px;padding:9px 13px;font-size:12.5px;color:#155e3f;margin-bottom:14px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 20px 16px;margin-bottom:18px;box-shadow:0 1px 2px rgba(20,30,50,.04)}
  .sec{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--takeda);font-weight:700;margin:16px 0 4px;padding-bottom:5px;border-bottom:1px solid #f0e3e2;display:flex;align-items:center}
  .row{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start;padding:9px 0;border-bottom:1px solid #f1f4f7}
  .row:last-child{border-bottom:none}
  .lbl{font-size:13px}
  .lbl .l2{display:block;color:var(--muted);font-size:11.5px;font-style:italic}
  .lbl .fid{font-family:monospace;font-size:10.5px;color:#9aa6b2}
  .req{color:var(--reqs);font-weight:700;margin-left:3px}
  .cond{color:#9a6b00;font-weight:700;margin-left:3px;font-size:11px;vertical-align:middle}
  .field input,.field select{width:100%;max-width:360px;padding:7px 9px;border:1px solid #cfd6de;border-radius:6px;font-size:13px;background:#fff;font-family:inherit}
  .field input[readonly]{background:#f4f6f9;color:#5a6675}
  .field .hint{font-size:11.5px;color:var(--muted);margin-top:3px}
  .multi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:600px}
  .multi label{display:flex;gap:9px;align-items:flex-start;background:#f7f9fb;border:1px solid #e2e8ef;border-radius:8px;padding:9px 12px;font-size:12.5px;line-height:1.35;cursor:pointer;transition:background .12s,border-color .12s}
  .multi label:hover{background:#eef3f8;border-color:#c9d6e2}
  .multi input{margin:1px 0 0;flex:none;width:15px;height:15px;cursor:pointer}
  .multi label:has(input:checked){background:#e6f0fb;border-color:#9cc1ec;color:#0b3e73}
  .excl-banner{display:none;background:var(--exclbg);border:1px solid #f3b9b3;border-left:4px solid var(--excl);color:var(--excl);padding:10px 14px;border-radius:8px;margin:10px 0;font-weight:600;font-size:13px}
  .computed{display:inline-block;background:#eef7f0;border:1px solid #cde8d6;color:#0d6b45;padding:6px 12px;border-radius:6px;font-weight:600;font-family:monospace;font-size:13px}
  .repeat-bar{display:flex;align-items:center;gap:10px;margin:6px 0 2px;color:var(--muted);font-size:12.5px}
  .repeat-bar .add{margin-left:auto;background:var(--takeda);color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer}
  footer{padding:18px 30px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);background:#fff}
  /* comments */
  .cmt-btn{cursor:pointer;border:none;background:#eef1f5;color:#6b7785;border-radius:14px;font-size:11px;padding:1px 8px;margin-left:8px;vertical-align:middle;font-weight:600;white-space:nowrap}
  .cmt-btn:hover{background:var(--newbg);color:var(--new)}
  .cmt-btn.has{background:var(--takeda);color:#fff}
  .sec .cmt-btn{margin-left:auto}
  #cmtbar{position:fixed;top:0;right:0;bottom:0;width:0;background:#fff;border-left:1px solid var(--line);box-shadow:-4px 0 18px rgba(20,30,50,.08);z-index:60;transition:width .18s;overflow:hidden}
  #cmtbar.open{width:380px}
  #cmtbar .inner{width:380px;height:100%;display:flex;flex-direction:column}
  #cmtbar .ch{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
  #cmtbar .ch b{font-size:14px}
  #cmtbar .ch .x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;border:none;background:none}
  #cmtbar .ctx{padding:10px 16px;background:var(--newbg);font-size:12px;color:var(--new);border-bottom:1px solid var(--line)}
  #cmtbar .ctx .fid{font-family:monospace;color:#7a8693;font-size:11px}
  #cmtbar .list{flex:1;overflow:auto;padding:8px 16px}
  #cmtbar .c{border-bottom:1px dashed var(--line);padding:10px 0}
  #cmtbar .c .m{font-size:12px;color:var(--muted);margin-bottom:3px}
  #cmtbar .c .m b{color:var(--ink)}
  #cmtbar .c .t{font-size:13.5px;white-space:pre-wrap}
  #cmtbar .c .del{color:var(--takeda);font-size:11px;cursor:pointer;margin-left:6px}
  #cmtbar .empty{color:var(--muted);font-size:13px;font-style:italic;padding:14px 0}
  #cmtbar .form{border-top:1px solid var(--line);padding:12px 16px;background:#fafbfc}
  #cmtbar textarea{width:100%;border:1px solid #cfd6de;border-radius:8px;padding:9px;font:inherit;font-size:13px;min-height:64px;resize:vertical}
  #cmtbar .frow{display:flex;align-items:center;gap:8px;margin-top:8px}
  #cmtbar .as{font-size:11.5px;color:var(--muted)}
  #cmtbar .as a{color:var(--new);cursor:pointer;text-decoration:underline}
  #cmtbar .send{margin-left:auto;background:var(--takeda);color:#fff;border:none;padding:8px 14px;border-radius:7px;font-weight:600;font-size:13px;cursor:pointer}
  #cmtbar .send[disabled]{opacity:.5}
  #cmtfab{position:fixed;right:18px;bottom:18px;z-index:55;background:var(--takeda);color:#fff;border:none;border-radius:24px;padding:11px 18px;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 4px 14px rgba(225,38,28,.35)}
  #cmtfab .n{background:#fff;color:var(--takeda);border-radius:12px;padding:0 7px;margin-left:6px;font-size:12px}
  /* AI paste prototype */
  .paste-btn{cursor:pointer;border:1px solid #cfe0f5;background:var(--newbg);color:var(--new);border-radius:14px;font-size:12px;padding:4px 12px;font-weight:600}
  .paste-btn:hover{background:#d8e7fb}
  .modal-bg{position:fixed;inset:0;background:rgba(20,30,50,.45);z-index:70;display:none;align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto}
  .modal-bg.open{display:flex}
  .modal{background:#fff;border-radius:12px;max-width:680px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.25)}
  .modal .mh{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
  .modal .mh b{font-size:16px}.modal .mh .x{margin-left:auto;border:none;background:none;font-size:22px;cursor:pointer;color:var(--muted)}
  .modal .mb{padding:16px 20px}
  .modal .intro{font-size:13px;color:var(--muted);margin:0 0 12px}
  .modal textarea{width:100%;min-height:170px;border:1px solid #cfd6de;border-radius:8px;padding:11px;font:inherit;font-size:13px;resize:vertical}
  .modal .demo-note{background:#fff7e6;border:1px solid #ffe2a8;border-radius:8px;padding:9px 12px;font-size:12px;color:#8a6400;margin-top:12px}
  .modal .mf{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}
  .modal .mf .sample{margin-right:auto;color:var(--new);cursor:pointer;font-size:12.5px;text-decoration:underline}
  .modal .go{background:var(--takeda);color:#fff;border:none;padding:9px 16px;border-radius:8px;font-weight:600;cursor:pointer}
  .modal .cancel{background:#eef1f5;border:none;padding:9px 14px;border-radius:8px;cursor:pointer}
  .row.ai-sug{background:#fffaf0;outline:2px solid #ffe2a8;outline-offset:-2px;border-radius:6px}
  .ai-chip{display:inline-flex;gap:7px;align-items:center;margin-top:6px;font-size:11px;background:#fff7e6;border:1px solid #ffe2a8;color:#8a6400;border-radius:12px;padding:2px 4px 2px 9px;max-width:380px}
  .ai-chip .conf{font-weight:700}
  .ai-chip .src{color:#9a7b3a;font-style:italic;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ai-chip button{border:none;background:#fff;border-radius:10px;cursor:pointer;font-size:12px;width:22px;height:20px;line-height:1}
  .ai-chip .ok{color:var(--ok)} .ai-chip .no{color:var(--takeda)}
  .ai-banner{background:#fff7e6;border:1px solid #ffe2a8;border-left:4px solid #e0a800;border-radius:8px;padding:9px 13px;font-size:12.5px;color:#8a6400;margin-bottom:14px;display:none;align-items:center;gap:12px}
  .ai-banner.show{display:flex}
  .ai-banner .all{margin-left:auto;background:var(--ok);color:#fff;border:none;padding:5px 12px;border-radius:7px;font-weight:600;cursor:pointer;font-size:12px}