/* ═════════════════════════════════════════════════════════════════
   dataroom.css — DataRoom (public/tools/dataroom.js, #view-dataroom, classes dr-…). 13 Oct 2026.
   The layout is the final mock-up Ava approved on 12/10: the list of rooms, Create New DataRoom in four steps, one room.
   Colours and fonts are the Platform's own tokens (--e-…). Every rule starts with #view-dataroom, for the reason given at
   the top of tools.css: index.html already styles .rk .note, .chip, .row and more.
   ═════════════════════════════════════════════════════════════════ */
#view-dataroom{
  --dr-surface:#fff; --dr-mist:var(--e-card); --dr-mist2:var(--e-inset);
  --dr-heading:var(--e-ink); --dr-body:var(--e-ink); --dr-muted:var(--e-ink3);
  --dr-rule:var(--e-line); --dr-rule2:#dfe2e8;
  --dr-accent:var(--e-accent); --dr-tint:var(--e-accent-soft);
  --dr-urgent:#561f19; --dr-urgent-tint:#f7ecea;
}
#view-dataroom *,#view-dataroom *::before,#view-dataroom *::after{box-sizing:border-box}
#view-dataroom .dr-top{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;align-items:flex-end}
#view-dataroom .dr-ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
#view-dataroom .dr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 20px;border-radius:999px;border:1px solid var(--dr-heading);background:var(--dr-heading);color:#fff;font:500 13px var(--e-sans);cursor:pointer;text-align:center}
#view-dataroom .dr-btn:hover{opacity:.9}
#view-dataroom .dr-btn.out{background:transparent;color:var(--dr-heading);border-color:var(--dr-rule2)}
#view-dataroom .dr-btn.out:hover{background:var(--dr-mist)}
#view-dataroom .dr-btn.s{height:32px;padding:0 14px;font-size:12px}
#view-dataroom .dr-btn[disabled]{opacity:.45;cursor:not-allowed}
#view-dataroom .dr-link{background:none;border:0;padding:0;color:var(--dr-heading);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font:inherit;font-size:13px;cursor:pointer;text-align:left}
#view-dataroom .dr-link.red{color:var(--dr-urgent)}
#view-dataroom .dr-links{display:flex;gap:6px 16px;flex-wrap:wrap;margin:8px 0 0}
#view-dataroom .dr-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin:0 0 10px;color:var(--dr-muted);font:400 13px var(--e-sans);cursor:pointer}
#view-dataroom .dr-label{font:600 10px/1.4 var(--e-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dr-accent);margin:0}
#view-dataroom .dr-h2{font:400 clamp(28px,3.4vw,38px)/1.1 var(--e-didone);color:var(--dr-heading);margin:6px 0 0}
#view-dataroom .dr-h3{font:400 22px/1.2 var(--e-didone);color:var(--dr-heading);margin:0 0 6px}
#view-dataroom .dr-h3.line{display:flex;align-items:center;gap:14px}
#view-dataroom .dr-h3.line::after{content:"";flex:1;height:1px;background:var(--dr-rule2)}
#view-dataroom .dr-title2{font:400 20px var(--e-didone);margin:0 0 6px}
#view-dataroom .dr-sub{font:400 14px/1.5 var(--e-sans);color:var(--dr-muted);margin:6px 0 0}
#view-dataroom .dr-lead{font:400 15px/1.6 var(--e-serif);color:var(--dr-body);margin:10px 0 16px;max-width:46em}
#view-dataroom .dr-muted{color:var(--dr-muted);font:400 13px/1.5 var(--e-sans)}
#view-dataroom .dr-panel{background:var(--dr-surface);border:1px solid var(--dr-rule);border-radius:12px;overflow:hidden}
#view-dataroom .dr-pad{padding:18px 20px}
#view-dataroom .dr-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
#view-dataroom .dr-two.wide{grid-template-columns:minmax(0,1.9fr) minmax(240px,1fr)}
#view-dataroom .dr-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:18px;margin-top:18px;align-items:start}
#view-dataroom .dr-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:14px}
#view-dataroom label{display:block;font:500 12px var(--e-sans);color:var(--dr-muted)}
#view-dataroom .dr-input{display:block;width:100%;margin-top:4px;border:1px solid var(--dr-rule2);border-radius:6px;background:var(--dr-surface);padding:9px 11px;font:400 14px var(--e-sans);color:var(--dr-heading)}
#view-dataroom textarea.dr-input{resize:vertical;font-family:var(--e-serif);font-size:15px;line-height:1.5}
#view-dataroom .dr-steps{display:flex;gap:4px 18px;flex-wrap:wrap;margin:14px 0 18px;font:400 13px var(--e-sans);color:var(--dr-muted);border-bottom:1px solid var(--dr-rule);padding-bottom:8px}
#view-dataroom .dr-steps .on{color:var(--dr-heading);font-weight:600}
#view-dataroom .dr-steps .done{color:var(--dr-accent)}
#view-dataroom .dr-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
#view-dataroom .dr-alert{background:var(--dr-urgent-tint);color:var(--dr-urgent);border-radius:6px;padding:12px 16px;margin:14px 0;font:400 14px/1.5 var(--e-sans)}
#view-dataroom .dr-alert.soft{background:var(--dr-tint);color:var(--dr-heading)}

/* the list */
#view-dataroom .dr-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0 12px}
#view-dataroom .dr-chips{display:flex;gap:8px;flex-wrap:wrap}
#view-dataroom .dr-fchip{border:1px solid var(--dr-rule2);background:transparent;border-radius:999px;padding:6px 14px;font:400 13px var(--e-sans);color:var(--dr-heading);cursor:pointer}
#view-dataroom .dr-fchip span{color:var(--dr-muted);margin-left:4px}
#view-dataroom .dr-fchip.on{background:var(--dr-heading);color:#fff;border-color:var(--dr-heading)}
#view-dataroom .dr-fchip.on span{color:#fff}
#view-dataroom .dr-search{min-width:240px;border:1px solid var(--dr-rule2);border-radius:999px;padding:8px 14px;font:400 13.5px var(--e-sans);background:var(--dr-surface)}
#view-dataroom .dr-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.8fr) minmax(0,2fr) minmax(0,1fr) 110px;gap:14px;align-items:start;width:100%;padding:14px 18px;border:0;border-top:1px solid var(--dr-rule);background:none;text-align:left;font:400 13.5px/1.4 var(--e-sans);color:var(--dr-body);cursor:pointer}
#view-dataroom button.dr-row:hover{background:var(--dr-mist)}
#view-dataroom .dr-row.dr-head{cursor:default;border-top:0;background:var(--dr-mist2);font:600 10px var(--e-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dr-muted)}
#view-dataroom .dr-row i{display:block;font-style:normal;color:var(--dr-muted);font-size:12px}
#view-dataroom .dr-c1 b{display:block;font:400 17px/1.25 var(--e-didone);color:var(--dr-heading)}
#view-dataroom .dr-mchip{display:inline-block;margin:0 6px 4px 0;padding:3px 9px;border:1px solid var(--dr-rule2);border-radius:999px;font-size:12px}
#view-dataroom .dr-mchip b{font-weight:600}

/* creating */
#view-dataroom .dr-pick{display:block;width:100%;text-align:left;padding:9px 12px;margin-top:6px;border:1px solid var(--dr-rule);border-radius:6px;background:none;cursor:pointer;font:400 14px var(--e-sans)}
#view-dataroom .dr-pick:hover,#view-dataroom .dr-pick.on{background:var(--dr-mist)}
#view-dataroom .dr-pick i{display:block;font-style:normal;font-size:12px;color:var(--dr-muted)}
#view-dataroom .dr-checks{display:grid;gap:4px}
#view-dataroom .dr-chk{display:flex;align-items:center;gap:8px;font:400 14px var(--e-sans);color:var(--dr-heading)}
#view-dataroom .dr-chk input{width:18px;height:18px}
#view-dataroom .dr-chk.big input{width:22px;height:22px}
#view-dataroom .dr-mgr{border:1px solid var(--dr-rule);border-radius:12px;background:var(--dr-surface);margin-bottom:14px;overflow:hidden}
#view-dataroom .dr-mgr.on .dr-mh{background:var(--dr-mist2)}
#view-dataroom .dr-mgr.off{opacity:.65}
#view-dataroom .dr-mh{display:flex;gap:14px;align-items:center;padding:14px 18px}
#view-dataroom .dr-mh>div:nth-child(2){flex:1}
#view-dataroom .dr-box{width:22px;height:22px;border:1px solid var(--dr-rule2);border-radius:3px;display:inline-block}
#view-dataroom .dr-stagepick{display:flex;align-items:center;gap:8px;font:400 13px var(--e-sans);white-space:nowrap}
#view-dataroom .dr-stagepick .dr-input{margin:0;width:auto}
#view-dataroom .dr-drow{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(170px,220px);gap:12px;align-items:center;padding:10px 18px;border-top:1px solid var(--dr-rule)}
#view-dataroom .dr-drow .dr-input{margin:0}
#view-dataroom .dr-dn b{display:block;font:400 16px/1.3 var(--e-didone);color:var(--dr-heading)}
#view-dataroom .dr-dn i{font:400 12px var(--e-sans);font-style:normal;color:var(--dr-muted)}
#view-dataroom .dr-dfoot{padding:10px 18px;border-top:1px solid var(--dr-rule);font:400 12.5px var(--e-sans);color:var(--dr-muted)}
#view-dataroom .dr-side{position:sticky;top:12px}
#view-dataroom .dr-side dl,#view-dataroom .dr-dl{margin:10px 0}
#view-dataroom .dr-side dt,#view-dataroom .dr-dl dt{font:600 10px var(--e-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dr-muted);margin-top:10px}
#view-dataroom .dr-side dd,#view-dataroom .dr-dl dd{margin:2px 0 0;font:400 14px/1.4 var(--e-sans);color:var(--dr-heading)}
#view-dataroom .dr-sum{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--dr-rule);font:400 13.5px var(--e-sans)}
#view-dataroom .dr-opt{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--dr-rule)}
#view-dataroom .dr-opt b{display:block;font:500 14px var(--e-sans);color:var(--dr-heading)}
#view-dataroom .dr-opt i{font:400 12px var(--e-sans);font-style:normal;color:var(--dr-muted)}
#view-dataroom .dr-seg{display:inline-flex;border:1px solid var(--dr-rule2);border-radius:999px;overflow:hidden;flex:none}
#view-dataroom .dr-seg button{background:none;border:0;padding:7px 14px;font:400 12.5px var(--e-sans);cursor:pointer;color:var(--dr-heading)}
#view-dataroom .dr-seg button.on{background:var(--dr-heading);color:#fff}
#view-dataroom .dr-ordrow{display:grid;grid-template-columns:28px minmax(0,1fr) 64px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--dr-rule)}
#view-dataroom .dr-ordn{font:400 20px var(--e-didone);color:var(--dr-accent)}
#view-dataroom .dr-ordrow b{font:400 15px var(--e-serif)}
#view-dataroom .dr-ordrow .dr-input{margin-top:4px;font-size:13px}
#view-dataroom .dr-upd button{border:1px solid var(--dr-rule2);background:none;border-radius:4px;width:28px;height:28px;cursor:pointer}
#view-dataroom .dr-upd button[disabled]{opacity:.3;cursor:default}
#view-dataroom .dr-quote{font:italic 400 15px/1.6 var(--e-serif);color:var(--dr-body);margin:4px 0 0;white-space:pre-wrap}
#view-dataroom .dr-lrow{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;padding:8px 0}
#view-dataroom code{font:400 12px/1.5 ui-monospace,Menlo,monospace;background:var(--dr-mist2);padding:3px 8px;border-radius:4px;overflow-wrap:anywhere}

/* one room */
#view-dataroom .dr-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:18px 0}
#view-dataroom .dr-kpi span{font:600 10px var(--e-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dr-muted)}
#view-dataroom .dr-kpi b{display:block;font:400 44px/1.1 var(--e-didone);color:var(--dr-urgent);margin:4px 0}
#view-dataroom .dr-kpi p{margin:0;font:400 12.5px/1.4 var(--e-sans);color:var(--dr-muted)}
#view-dataroom .dr-mpanel{margin-bottom:18px}
#view-dataroom .dr-stages{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
#view-dataroom .dr-stage{border:1px solid var(--dr-rule2);background:var(--dr-surface);padding:7px 12px;border-radius:2px;font:500 13px var(--e-sans);cursor:pointer;text-align:left;min-width:104px}
#view-dataroom .dr-stage i{display:block;font:600 9px var(--e-sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--dr-muted)}
#view-dataroom .dr-stage.done{background:var(--dr-mist)}
#view-dataroom .dr-stage.now{background:var(--dr-mist2);border-color:var(--dr-heading)}
#view-dataroom .dr-stage.now i{color:var(--dr-accent)}
#view-dataroom .dr-move{border:1px solid var(--dr-urgent);border-radius:4px;padding:12px 14px;margin-top:12px;font:400 13.5px var(--e-sans);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#view-dataroom .dr-tw{overflow-x:auto}
#view-dataroom .dr-t{width:100%;border-collapse:collapse;font:400 13.5px var(--e-sans)}
#view-dataroom .dr-t th{background:var(--dr-mist2);text-align:left;padding:9px 14px;font:600 10px var(--e-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dr-muted)}
#view-dataroom .dr-t td{padding:11px 14px;border-top:1px solid var(--dr-rule);vertical-align:top}
#view-dataroom .dr-t td b{font:400 16px var(--e-didone);color:var(--dr-heading)}
#view-dataroom .dr-pill{display:inline-block;padding:3px 9px;border:1px solid var(--dr-rule2);border-radius:999px;font:500 10.5px var(--e-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--dr-muted)}
#view-dataroom .dr-pill.on{background:var(--dr-heading);color:#fff;border-color:var(--dr-heading)}
#view-dataroom .dr-act{display:grid;grid-template-columns:20px 78px minmax(0,1fr);gap:10px;padding:11px 0;border-top:1px solid var(--dr-rule);font:400 13.5px/1.4 var(--e-sans)}
#view-dataroom .dr-act .dr-ico{color:var(--dr-muted);margin-top:2px}
#view-dataroom .dr-actd{color:var(--dr-muted);font-size:12px}
#view-dataroom .dr-act b{font:400 15px var(--e-didone);color:var(--dr-heading)}
#view-dataroom .dr-act i{display:block;font-style:normal;color:var(--dr-muted);font-size:12.5px;overflow-wrap:anywhere}
#view-dataroom .dr-q{border-top:1px solid var(--dr-rule);padding:12px 0}
#view-dataroom .dr-q p{margin:4px 0}
#view-dataroom .dr-ans{margin:8px 0 0;padding-left:12px;border-left:2px solid var(--dr-tint)}
#view-dataroom .dr-ml{border-top:1px solid var(--dr-rule);padding:10px 0}

/* a phone: one column, and a tap is 44px tall */
@media (max-width:820px){
  #view-dataroom .dr-two,#view-dataroom .dr-two.wide,#view-dataroom .dr-cols{grid-template-columns:minmax(0,1fr)}
  #view-dataroom .dr-grid2{grid-template-columns:minmax(0,1fr)}
  #view-dataroom .dr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #view-dataroom .dr-row.dr-head{display:none}
  #view-dataroom .dr-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 16px}
  #view-dataroom .dr-drow{grid-template-columns:28px minmax(0,1fr)}
  #view-dataroom .dr-drow .dr-input{grid-column:2}
  #view-dataroom .dr-side{position:static}
  #view-dataroom .dr-btn,#view-dataroom .dr-fchip,#view-dataroom .dr-stage,#view-dataroom .dr-seg button{min-height:44px}
  #view-dataroom .dr-search{width:100%}
  #view-dataroom .dr-mh{flex-wrap:wrap}
}
/* Ava 21/10: no rooms yet = one sentence and one button */
#view-dataroom .dr-empty{text-align:center;padding:56px 16px 64px;background:var(--dr-surface);border:1px solid var(--dr-rule);border-radius:12px}
#view-dataroom .dr-empty .dr-h2{margin:0 0 8px}
#view-dataroom .dr-empty .dr-muted{max-width:46ch;margin:0 auto 18px}