/*
  view-corpus styles — the Corpus Editor, folded into the shell (Phase 2).
  Corpus-editor-specific rules only; the generic base (:root, body, button,
  input, a) and the standalone topbar/login are dropped — tms.css supplies
  them. The corpus's own custom properties are re-scoped to #view-corpus and
  mapped onto the shell palette (accent = --blue #1a5fb4), so the editor picks
  up the PC-parity tokens automatically.

  SCOPING RULE (P2.1): this sheet is loaded document-wide by BOTH hosts, and the
  PC shell owns a lot of markup that reuses these class names. Any selector
  whose class/id the host also uses on its OWN chrome must be scoped to
  #view-corpus, or it restyles that chrome uninvited. Deliberate exceptions:
  `.hide` is a document-wide utility both hosts depend on (the shared audit
  surface alone relies on it 9 times), and `.row` is layout-only. Verified
  empirically — see developer/tests/e2e/css_bleed_guard.cjs. */
#view-corpus{--accent:var(--blue);--accent-soft:#eaf1fb;--bg:#fff;--line2:#eef0f3;
  --radius:8px;--shadow:0 1px 3px rgba(20,30,50,.07),0 1px 2px rgba(20,30,50,.04);
  flex-direction:column}
/* toolbar */
#toolbar{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--panel);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
#toolbar select#corpus-sel{width:auto;min-width:240px;font-weight:600}
#toolbar .spacer{flex:1}
#wsc-msg{font-size:12.5px;color:var(--mut)}

/* split master-detail */
#split{flex:1;min-height:0;display:flex}
#list-pane{width:360px;min-width:280px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel)}
#list-head{padding:12px 14px;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:8px}
#list-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#list-filters label{font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:5px;white-space:nowrap}
#list-filters select{width:auto;padding:5px 8px;font-size:12.5px}
#term-list{flex:1;overflow:auto;padding:6px}
.term-item{display:block;width:100%;text-align:left;border:1px solid transparent;background:none;
  border-radius:10px;padding:9px 11px;margin-bottom:2px}
.term-item:hover{background:var(--accent-soft);border-color:transparent}
.term-item.sel{background:var(--accent-soft);border-color:#cfe0f7}
.term-item .ti-en{font-weight:600}
.term-item .ti-sub{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:3px}
.count-note{padding:6px 14px;font-size:12px;color:var(--mut);border-bottom:1px solid var(--line2)}

/* detail pane */
#detail-pane{flex:1;min-width:0;overflow:auto;padding:22px 26px}
#detail-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--mut)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px;max-width:860px}
.card h2{margin:0 0 2px;font-size:20px}
.card h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut)}
/* Scoped to the host: .field is the PC shell's own form idiom too (32 sites
   across 13 dialogs, Corpus Builder and Stage 3), and unscoped these overrode
   its label metrics. See the header note. */
#view-corpus .field{margin-bottom:12px}
#view-corpus .field label{display:block;font-size:12.5px;color:var(--mut);margin-bottom:4px}
.row{display:flex;gap:12px;flex-wrap:wrap}
#view-corpus .row > .field{flex:1;min-width:200px}
.detail-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;max-width:860px}
.detail-head h2{margin:0;font-size:22px}

/* chips & badges */
.chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;border:1px solid}
.chip.unreviewed{color:#6b7280;border-color:#d6dae0;background:#f3f4f6}
.chip.under_review{color:#b7791f;border-color:#ecd9b0;background:#fdf6e7}
.chip.finalized{color:#1e8e3e;border-color:#bfe3c8;background:#eaf7ee}
.tag{display:inline-block;font-size:11px;color:var(--mut);background:#f3f4f6;border:1px solid var(--line);
  border-radius:6px;padding:1px 7px}
.tag.bib{color:#166534;background:#dcfce7;border-color:#bbf7d0}
.warn{color:var(--red);font-size:11px}
.lockmark{color:var(--amber);font-size:11.5px}
/* Scoped: bare `details` reached every disclosure widget in the host document
   (the PC's Stage-2/Stage-3 panels, dlg-admin and the shared audit's #summary),
   replacing the native marker and adding padding they never asked for. */
#view-corpus details{border-top:1px solid var(--line2);padding:10px 0 2px}
#view-corpus details > summary{cursor:pointer;font-weight:600;font-size:13px;list-style:none}
#view-corpus details > summary::-webkit-details-marker{display:none}
#view-corpus details > summary::before{content:"▸ ";color:var(--accent)}
#view-corpus details[open] > summary::before{content:"▾ "}
.evi{margin:8px 0}
.bar{background:#eef0f3;height:6px;border-radius:4px;max-width:240px;margin-top:3px}
.bar > i{display:block;background:var(--accent);height:6px;border-radius:4px}
.ex{font-size:12px;color:var(--mut);margin:2px 0 2px 10px}
.recs{list-style:none;margin:6px 0;padding:0}
.recs li{padding:7px 0;border-bottom:1px solid var(--line2)}
.cmt{font-size:13px;margin:6px 0}
.cmt .meta{font-size:11px;color:var(--mut)}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.hide{display:none!important}

/* two-column detail: main content + a narrow discussion rail */
.detail-grid{display:flex;gap:18px;align-items:flex-start;max-width:1220px}
.detail-main{flex:1;min-width:0}
.detail-main .card{max-width:none}
.detail-side{width:312px;flex:none}
.detail-side .card{margin-bottom:0;position:sticky;top:0}

/* merged renderings + evidence — a large [+] expands each rendering's evidence */
.rend{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:#fff}
.rend.is-primary{border-color:#cfe0f7;background:#f8fbff}
.rend.is-obs{background:#fbfbf9;border-style:dashed}
.rend-head{display:flex;align-items:center;gap:9px;padding:7px 10px;flex-wrap:wrap}
.rend-caret{border:1px solid #cfe0f7;background:var(--accent-soft);color:var(--accent);font-size:19px;font-weight:700;
  line-height:1;width:30px;height:30px;flex:none;border-radius:8px;cursor:pointer;padding:0}
.rend-caret:hover{background:#dbe8fa}
.rend-word{font-size:15px;font-weight:700}
.rend-role{width:auto;padding:3px 6px;font-size:12px;flex:none}
.rend-acts{display:flex;gap:4px;margin-left:auto}
.rend-acts button{padding:3px 8px;font-size:12px}
.rend-evi{padding:5px 12px 12px 49px;border-top:1px solid var(--line2);font-size:12.5px}
.rend-evi .why{color:var(--mut);margin:4px 0}
.flowhint{font-size:12px;color:var(--mut);background:#f3f6fb;border:1px solid #dbe6f6;border-radius:8px;padding:6px 10px;margin:0 0 12px;max-width:1220px}

@media (max-width:980px){
  .detail-grid{flex-direction:column}
  .detail-side{width:auto;align-self:stretch}
  .detail-side .card{position:static}
}

/* tablet: a touch narrower list so the detail pane keeps room */
@media (max-width:1024px){ #list-pane{width:280px;min-width:240px} }
/* phones + tablet-portrait: stack the panes, full-width controls */
@media (max-width:860px){
  #split{flex-direction:column}
  #list-pane{width:auto;min-width:0;max-height:40vh;border-right:none;border-bottom:1px solid var(--line)}
  #detail-pane{padding:14px}
  #detail-pane .card{padding:12px}
  .detail-head h2{font-size:18px}
  #toolbar{padding:10px 12px}
}