/* ===========================================================================
   CASEFILE — the theme.

   A reading room after hours. Somebody is going through a 40-page tender the
   night before the pre-bid meeting, and the two things they need are a long
   comfortable measure for the document and an answer panel that does not
   compete with it.

   - Deep ink-green ground with warm parchment text. Not black: a long reading
     session on pure black at 15px is genuinely tiring, and the green shifts
     the whole thing away from every other dark screen in this suite.
   - The document is set in a serif at a real reading size with a 66-character
     measure. It is the only thing on screen allowed to look like prose.
   - Gold is reserved entirely for citations. A gold number in the answer and
     a gold rule beside the clause are the same object, and clicking one moves
     to the other.
   - The risk read uses three temperatures and no icons. A clause is a clause;
     a warning triangle beside a payment term is theatre.
   =========================================================================== */
:root{
  --bg:#101915;
  --bg-2:#16221D;
  --panel:#1A2823;
  --panel-2:#20302A;
  --line:rgba(226,214,186,.13);
  --line-2:rgba(226,214,186,.26);
  --ink:#EFE7D6;
  --ink-2:#BFB6A2;
  --mut:#908E7E;
  --gold:#D8A73E;
  --gold-soft:rgba(216,167,62,.14);
  --grn:#6FCF97;
  --amb:#E8B44A;
  --red:#E4756B;
  --ui:var(--f-text);
  --txt:var(--f-serif);
  --mono:var(--f-data);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;
  color:var(--ink);font:15px/1.6 var(--ui);
  /* GROUND: a lamp on a desk at eleven at night. Warm light falling from the
     upper left across a cool ink-green room, over a 26px horizontal rule at
     1.6% that reads as the ruled pad the tender is lying on. */
  background:
    radial-gradient(52% 44% at 18% -4%,rgba(216,167,62,.075),transparent 62%),
    repeating-linear-gradient(0deg,rgba(239,231,214,.016) 0 1px,transparent 1px 26px),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}

#room{flex:1;min-height:0;display:flex;flex-direction:column}

/* ------------------------------------------------------------------- head */
.hd{
  flex:none;display:flex;align-items:center;gap:16px;padding:12px 22px;
  border-bottom:1px solid var(--line);background:var(--bg-2);
}
.hd .t{min-width:0}
.hd .t b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em}
.hd .t span{font-size:12.5px;color:var(--mut)}
.hd .r{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pill2{
  font:650 11.5px var(--ui);padding:5px 11px;border-radius:14px;
  border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap;
}
.pill2.hot{border-color:var(--red);color:var(--red)}
.pill2.warm{border-color:var(--amb);color:var(--amb)}

/* ------------------------------------------------------------------ split */
.split{flex:1;min-height:0;display:grid;grid-template-columns:1fr 452px}
.split>*{min-width:0}

/* ------------------------------------------------------------- the document */
.doc{overflow-y:auto;padding:26px 0 60px;background:var(--bg)}
.docin{max-width:720px;margin:0 auto;padding:0 30px}
.dochead{border-bottom:1px solid var(--line-2);padding-bottom:16px;margin-bottom:22px}
.dochead h1{margin:0 0 5px;font:600 23px/1.25 var(--txt);letter-spacing:-.01em}
.dochead p{margin:0;font-size:12.5px;color:var(--mut)}
.cl{
  display:grid;grid-template-columns:52px 1fr;gap:16px;padding:13px 0 13px 0;
  border-left:2px solid transparent;padding-left:14px;margin-left:-16px;
  scroll-margin-top:20px;
}
.cl .no{font:700 12.5px var(--mono);color:var(--mut);padding-top:3px;
  font-variant-numeric:tabular-nums}
.cl .tx{font:400 16px/1.72 var(--txt);color:var(--ink-2)}
.cl .tx b{color:var(--ink);font-weight:600}
.cl.lit{border-left-color:var(--gold);background:var(--gold-soft)}
.cl.lit .no{color:var(--gold)}
.cl.lit .tx{color:var(--ink)}
.cl.risk .no::after{content:"";display:block;width:7px;height:7px;border-radius:50%;
  margin-top:7px;background:var(--amb)}
.cl.risk-hi .no::after{background:var(--red)}
.sect{
  font:650 11px var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);margin:26px 0 4px;padding-left:14px;
}

/* ------------------------------------------------------------------ aside */
.aside{border-left:1px solid var(--line);display:flex;flex-direction:column;
  background:var(--panel);min-height:0}
.tabs{flex:none;display:flex;border-bottom:1px solid var(--line)}
.tabs button{
  flex:1;padding:12px 8px;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--mut);font-size:13px;font-weight:600;cursor:pointer;
}
.tabs button[aria-selected=true]{color:var(--gold);border-bottom-color:var(--gold)}
.tabs button:hover{color:var(--ink)}
.pane{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 20px}

/* ---- ask ---- */
.asked{
  font:600 15px/1.5 var(--ui);margin:0 0 4px;color:var(--ink);
}
.turn{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.turn:last-child{border-bottom:0}
.ans{font:400 15px/1.7 var(--txt);color:var(--ink-2);margin:10px 0 0}
.ans b{color:var(--ink);font-weight:600}
.cite{
  display:inline-block;font:700 11px var(--mono);color:var(--gold);
  background:var(--gold-soft);border:1px solid rgba(216,167,62,.34);
  border-radius:4px;padding:0 5px;margin:0 2px;cursor:pointer;vertical-align:1px;
}
.cite:hover{background:rgba(216,167,62,.28)}
.srcs{margin:12px 0 0;padding:0;list-style:none}
.srcs li{
  font-size:12.5px;color:var(--mut);padding:6px 0 6px 12px;
  border-left:1px solid var(--line-2);cursor:pointer;line-height:1.5;
}
.srcs li:hover{border-left-color:var(--gold);color:var(--ink-2)}
.srcs li b{color:var(--gold);font-family:var(--mono);font-size:11.5px;font-weight:700}
.nohit{
  padding:12px 14px;border-left:2px solid var(--amb);background:rgba(232,180,74,.09);
  font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:10px 0 0;
}
.nohit b{color:var(--amb);display:block;margin-bottom:3px}

.askbox{flex:none;border-top:1px solid var(--line);padding:13px 18px 16px;
  background:var(--panel-2)}
.askbox .row{display:flex;gap:9px}
.askbox input{
  flex:1;min-width:0;height:42px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--bg-2);padding:0 13px;font-size:14px;
}
.askbox input:focus{outline:0;border-color:var(--gold)}
.askbox button{
  height:42px;padding:0 17px;border:0;border-radius:8px;background:var(--gold);
  color:#181206;font-weight:700;cursor:pointer;font-size:13.5px;
}
.askbox button:disabled{background:var(--panel);color:var(--mut);cursor:default}
.sugg{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.sugg button{
  background:none;border:1px solid var(--line-2);color:var(--ink-2);border-radius:14px;
  padding:5px 11px;font-size:12px;cursor:pointer;text-align:left;
}
.sugg button:hover{border-color:var(--gold);color:var(--gold)}

/* ---- risk ---- */
.rk{border:1px solid var(--line);border-radius:9px;margin-bottom:12px;overflow:hidden}
.rk .rh{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;
  background:var(--panel-2)}
.rk .rh b{font-size:13.5px;font-weight:650;flex:1;min-width:0}
.rk .rh .lv{
  font:700 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;flex:none;
}
.lv-hi{background:rgba(228,117,107,.16);color:var(--red)}
.lv-md{background:rgba(232,180,74,.16);color:var(--amb)}
.lv-ok{background:rgba(111,207,151,.14);color:var(--grn)}
.rk .rb{padding:12px 13px;font-size:13px;line-height:1.65;color:var(--ink-2)}
.rk .rb p{margin:0 0 9px}
.rk .rb p:last-child{margin:0}
.rk .rb .ask{color:var(--ink);font-weight:600}
.rk .rb .q{
  display:block;margin-top:9px;padding:10px 12px;background:var(--bg-2);
  border-left:2px solid var(--gold);font:400 13.5px/1.6 var(--txt);color:var(--ink);
}

.sum{
  padding:13px 15px;border:1px solid var(--line-2);border-radius:9px;
  margin-bottom:16px;background:var(--panel-2);
}
.sum .big{font:700 30px/1 var(--mono);letter-spacing:-.03em}
.sum .big.hot{color:var(--red)}
.sum p{margin:8px 0 0;font-size:12.5px;color:var(--mut);line-height:1.5}

.foot{
  flex:none;padding:11px 22px;border-top:1px solid var(--line);background:var(--bg-2);
  font-size:11.5px;color:var(--mut);line-height:1.5;
}
.foot b{color:var(--ink-2)}

@media(max-width:1060px){
  body{height:auto;overflow:auto;display:block}
  #room{height:auto}
  .split{grid-template-columns:1fr}
  .aside{border-left:0;border-top:1px solid var(--line)}
  .pane{max-height:none}
  .doc{max-height:none}
  .askbox{position:sticky;bottom:0}
}
@media(max-width:600px){
  .docin{padding:0 16px}
  .hd{flex-wrap:wrap;padding:11px 15px}
  .hd .r{margin-left:0;width:100%}
  .cl{grid-template-columns:40px 1fr;gap:11px}
  .cl .tx{font-size:15.5px}
}