/* The Meeting screen's other three tabs: Summary (with the to-dos first), Ask and
   Pipeline. Loaded by the two pages that can show them, beside meeting.css.

   Three of the mock's class names are renamed here because they already mean something
   else in this codebase (plan 019, "rename colliding class names"): the stage table's
   `.sh`/`.sr` would have collided with `.sr`, which is the visually-hidden helper in
   base.css and is on every strip in the app; `.cost` is the dashboard's, so the summary
   header block is `.money`. `.small` would have been a fourth, so the small print is
   `.tiny`. */

.tiny{font-size:12px;line-height:17px;font-weight:300}

/* ------------------------------------------------- the marks a model may write */
/* Answers and summaries arrive with `**bold**`, `- ` bullets and inline `code` in them.
   `md.js` escapes the whole string and then re-introduces exactly six marks, so these
   are the only tags that can appear inside a `.md` block -- and they are styled here,
   once, because the Summary and the Ask tab are the only two places a model's own words
   are printed. Bold is 500, not the browser's 700: 700 does not exist in this type
   scale and would read as a different font. */
.md>*+*{margin-top:10px}
.md ul,.md ol{margin:0;padding-left:20px;display:grid;gap:6px}
.md li::marker{color:var(--ink-2)}
.md strong,.pts strong,.td .txt strong{font-weight:500}
.md code,.pts code,.td .txt code{font-family:var(--mono);font-size:.88em;
  background:var(--glass-2);border:1px solid var(--line);border-radius:var(--r-1);
  padding:0 4px}

/* =============================================================== summary tab */
.sum{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:var(--sp-6);align-items:start}
.sumcol{min-width:0;max-width:72ch;display:grid;gap:var(--sp-5);justify-items:start}
.sumbody{display:grid;gap:28px;width:100%}
.abstract{font:300 17px/28px var(--sans);letter-spacing:-.005em;max-width:68ch}

/* The mock's top-right `.cost`, fed by summary_meta rather than by the whole pipeline. */
.money{display:grid;gap:2px;justify-items:start}
.money b{font:500 18px/22px var(--sans);letter-spacing:-.02em}
.money span{font-size:11px;line-height:15px;color:var(--ink-2)}

.sec{display:grid;gap:10px;width:100%}
.sech{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.sech h3{font:500 13px/18px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2)}
.sech .muted{font-size:12px;line-height:17px;font-weight:300}
.pts{margin:0;padding-left:18px;display:grid;gap:8px;font:300 15px/23px var(--sans)}
.pts li::marker{color:var(--ink-2)}
.pts .due{font-style:normal;font-weight:400;color:var(--ink-2)}

/* --------------------------------------------------------------- the to-dos */
/* The list; `.td` below is a row. Named in the plural because R2e's dashboard
   already has a `.todo`, and both stylesheets are on every page. */
.todos{display:grid;gap:2px;width:100%}
.td{display:grid;grid-template-columns:18px 78px minmax(0,1fr) auto;gap:var(--sp-3);
  align-items:start;padding:8px 10px;margin-inline:-10px;border-radius:var(--r-3);
  font:300 15px/22px var(--sans);transition:background var(--t) var(--ease)}
.td:hover{background:var(--glass-2)}
.td input[type="checkbox"]{appearance:none;width:16px;height:16px;margin:3px 0 0;
  border:1px solid var(--line-2);border-radius:5px;background:var(--surface);display:grid;
  place-items:center;cursor:pointer;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.td input[type="checkbox"]::after{content:"";width:8px;height:5px;border:1.5px solid var(--paper);
  border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0;
  transition:opacity var(--t) var(--ease)}
.td input[type="checkbox"]:checked{background:var(--ink);border-color:var(--ink)}
.td input[type="checkbox"]:checked::after{opacity:1}
.td .k{font:500 10px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);margin-top:3px;white-space:nowrap}
.td .txt{min-width:0;cursor:pointer;overflow-wrap:break-word}
.td .txt b{font-weight:500;color:var(--h,var(--ink))}
.td:has(input:checked) .txt{color:var(--ink-2);text-decoration:line-through;
  text-decoration-color:var(--line-2)}
.td .tdend{display:flex;align-items:center;gap:var(--sp-2);margin-top:2px;flex-wrap:wrap;
  justify-content:flex-end}
.td .due{font-style:normal;font:400 12px/17px var(--sans);color:var(--ink-2);white-space:nowrap}
/* The one semantic colour on this tab: a date that has been and gone. */
.td .due.warn{color:var(--rec-t)}
.td .due.soon{color:var(--accent-t)}
.td.stale{opacity:.6}
.td.stale .txt{text-decoration:line-through;text-decoration-color:var(--line-2)}
.tdgrp{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-4) 0 var(--sp-1);margin-top:var(--sp-1);border-top:1px solid var(--line)}
.tdgrp .muted{font-size:12px;line-height:17px;font-weight:300}

/* ---------------------------------------------------------------- the topics */
.topics{display:grid;gap:6px;width:100%;min-width:0}
.tbar{display:flex;height:8px;gap:2px;min-width:0}
.tbar i{flex:var(--f,1);min-width:2px;background:var(--h,var(--ink-3));opacity:.75;border-radius:2px}
.tlabels{display:flex;gap:2px;min-width:0}
.tlabels button{all:unset;cursor:pointer;flex:var(--f,1);min-width:0;padding:2px 0;
  font:400 12px/17px var(--sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;border-radius:var(--r-1);transition:color var(--t) var(--ease)}
.tlabels button:hover{color:var(--accent-t)}
.tlabels em{font-style:normal;font-size:11px;color:var(--ink-2);margin-left:5px}

/* ------------------------------------------------------ versions + regenerate */
.sumside{position:sticky;top:calc(var(--appbar-h) + var(--sp-5));display:grid;gap:var(--sp-2);
  padding:14px;border-radius:var(--r-4);min-width:0}
.vers{display:grid;gap:2px}
.ver{all:unset;cursor:pointer;display:grid;gap:2px;padding:8px 10px;border-radius:var(--r-2);
  font-size:13px;transition:background var(--t) var(--ease)}
.ver:hover{background:var(--glass-2)}
.ver .mono{font-size:11px;color:var(--ink-2)}
.ver.cur{background:var(--surface);box-shadow:inset 0 1px 0 var(--hl),var(--shadow)}
.verview{display:grid;gap:var(--sp-3);max-height:52vh;overflow:auto}
.verview .sumbody{gap:18px}
.regen{display:grid;gap:var(--sp-2);margin-top:var(--sp-3);justify-items:start}
.regen .seg{width:100%}
.regen .btn{width:100%}
.est{font-size:11px;line-height:16px;color:var(--ink-2)}

/* =================================================================== ask tab */
.ask{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:var(--sp-6);align-items:start}
.askcol{min-width:0;max-width:72ch;display:grid;gap:22px;justify-items:stretch}
.scope{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.qa{display:grid;gap:10px;min-width:0}
.qa .q{font:500 17px/26px var(--sans);letter-spacing:-.01em;overflow-wrap:break-word}
.qa .a{display:grid;gap:8px;min-width:0}
.qa .a p{font:300 16px/26px var(--sans);overflow-wrap:break-word}
.qa.pending .a{opacity:.7}
.cites{display:flex;flex-wrap:wrap;gap:6px}
.cite{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;
  font-size:11px;line-height:16px;padding:1px 7px;border-radius:5px;border:1px solid var(--line);
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.cite::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--h,var(--ink-3));
  margin-right:6px;flex:none}
.cite:hover{border-color:var(--accent);color:var(--accent-t)}
/* A citation of another recording is a link, and says so with an arrow. */
.cite.other::after{content:"↗";margin-left:5px;opacity:.7}
.afoot{display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  font-size:11px;line-height:16px;color:var(--ink-2)}
.askbox{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px 6px 14px;
  border-radius:var(--r-4)}
.askin{all:unset;flex:1;min-width:0;font:300 15px/22px var(--sans);color:var(--ink);
  max-height:120px;overflow:auto;resize:none}
.askin::placeholder{color:var(--ink-2)}
.sugg{display:flex;gap:6px;flex-wrap:wrap}
.asknote{position:sticky;top:calc(var(--appbar-h) + var(--sp-5));display:grid;gap:var(--sp-2);
  padding:14px;border-radius:var(--r-4);min-width:0}
.asknote p{color:var(--ink-2)}
/* The scope dialog's own list. `.pick`/`.picklist` were taken twice over -- by R2b's
   rows and by R2e's merge dialog -- and every page loads all three stylesheets. */
.scopelist{display:grid;gap:1px;max-height:48vh;overflow:auto}
.scopepick{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:var(--sp-2);align-items:center;
  padding:6px 8px;border-radius:var(--r-2);font-size:13px;cursor:pointer}
.scopepick:hover{background:var(--glass-2)}
.scopepick .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scopepick .mono{font-size:11px;white-space:nowrap}

/* ============================================================== pipeline tab */
.pipe{max-width:980px;display:grid;gap:var(--sp-4)}
.pipetop{display:grid;grid-template-columns:repeat(4,auto) minmax(0,1fr);gap:var(--sp-3) 28px;
  align-items:end;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pipe .stat{display:grid;gap:2px;min-width:0}
.pipe .stat b{font-size:22px;line-height:26px;font-weight:500;letter-spacing:-.02em}
.pipe .stat span{font-size:12px;line-height:17px;color:var(--ink-2)}
.pbar{display:flex;height:8px;gap:2px;align-self:center;min-width:0}
.pbar i{flex:var(--f,1);min-width:2px;background:var(--h,var(--ink-3));opacity:.75;border-radius:2px}
.piperow{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.pipe .bad{color:var(--rec-t)}

.stagewrap{display:grid;gap:var(--sp-2)}
.stages{border-radius:var(--r-4);overflow:hidden;min-width:0}
.sthead,.strow{display:grid;
  grid-template-columns:96px minmax(0,1.1fr) 76px 64px minmax(0,1.5fr) 84px;
  gap:14px;align-items:center;padding:0 14px;min-height:40px}
.sthead{font:500 11px/14px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:1px solid var(--line)}
.strow{border-top:1px solid var(--line);font-size:13px;padding-block:8px}
.strow:first-of-type{border-top:0}
.sthead .r,.strow .r{text-align:right}
.strow .stname{font-weight:500}
.strow .muted,.strow .ok{font-weight:300;min-width:0;overflow-wrap:break-word}
.strow .rend{display:flex;justify-content:flex-end}
.strow .chip{height:22px;font-size:11px}
.strow details{min-width:0}
.strow details>summary{cursor:pointer;color:var(--rec-t);overflow-wrap:break-word}
.strow details pre{margin:6px 0 0;font-size:11px;line-height:16px;color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto}

/* the re-run menu: wider than the export menu, and anchored to its left edge */
.menu.rerun .pop{left:0;right:auto;width:min(340px,calc(100vw - 2*var(--gutter)));
  gap:var(--sp-2);padding:var(--sp-3)}
.menu.rerun>summary::marker{content:""}
.stagepick{display:flex;flex-wrap:wrap;gap:5px}
.picks{display:grid;gap:var(--sp-2)}
.pickrow{display:grid;gap:5px}
.pickrow select.field{height:32px;font-size:13px;padding-inline:8px}
.reasons{display:grid;gap:4px;padding:var(--sp-2) 10px;border-radius:var(--r-2);
  background:var(--glass-2);border:1px solid var(--line)}
.reasons p{color:var(--ink-2)}

.uploads{display:grid;gap:var(--sp-2)}
.segs{display:flex;flex-wrap:wrap;gap:6px}
.segs span{font-size:11px;line-height:16px;color:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-2);padding:3px 8px;background:var(--glass-2)}
.phone{display:grid;gap:var(--sp-2)}
.phone .facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-2)}

/* ============================================================ narrow layouts */
@media (max-width:1100px){
  .sum,.ask{grid-template-columns:minmax(0,1fr)}
  .sumside,.asknote{position:static;width:100%;max-width:72ch}
}
@media (max-width:800px){
  .pipetop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pbar{grid-column:1/-1}
  .sthead{display:none}
  .strow{grid-template-columns:96px minmax(0,1fr);gap:4px 10px;padding-block:10px}
  .sthead .r,.strow .r{text-align:left}
  .strow .rend{justify-content:flex-start}
}
@media (max-width:700px){
  .td{grid-template-columns:18px minmax(0,1fr);gap:8px var(--sp-2)}
  .td .k{grid-column:2;margin-top:0}
  .td .txt{grid-column:2}
  .td .tdend{grid-column:2;justify-content:flex-start}
  .abstract{font-size:16px;line-height:26px}
  .qa .q{font-size:16px;line-height:24px}
  .qa .a p{font-size:15px;line-height:24px}
}

/* Touch targets below 700 px; the policy is in styles/components.css. The to-do box
   keeps its 16 px square -- drawn by a ::before now, so the 40 px the finger gets is
   the input itself and the tick still lands on the square. */
@media (max-width:699px){
  .tl{min-height:40px;display:inline-flex;align-items:center}
  .tlabels button{min-height:40px}
  .askin{min-height:40px}
  .cite{min-height:40px}
  .td{grid-template-columns:40px minmax(0,1fr)}
  .td input[type="checkbox"]{position:relative;width:40px;height:40px;margin:0;
    border:0;background:none;border-radius:var(--r-2)}
  .td input[type="checkbox"]::before{content:"";position:absolute;inset:12px;
    border:1px solid var(--line-2);border-radius:5px;background:var(--surface)}
  .td input[type="checkbox"]:checked{background:none}
  .td input[type="checkbox"]:checked::before{background:var(--ink);border-color:var(--ink)}
  .td input[type="checkbox"]::after{position:relative;z-index:1}
}