/* Companion panel (scope: .xc). Self-contained so it can sit in another host's side panel or frame: it needs only the
   shared tokens (/static/clockworks.css) and works from 320px wide. Status is always icon + word + colour; amber
   "needs a look" is the strongest state (red is never used for the product's own judgements). */
.xc { --xc-pad: var(--sp-4); position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface); border-left: 1px solid var(--border); font-size: var(--fs-sm); line-height: 1.45; color: var(--text); }
.xc-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-2) 0 var(--xc-pad);
  border-bottom: 1px solid var(--border-soft); background: var(--surface-2); }
.xc-brand { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: 700; min-width: 0; }
.xc-mark { width: 22px; height: 22px; border-radius: 5px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; flex: none; }
.xc-mark svg { width: 14px; height: 14px; }
.xc-sub { font-weight: 500; color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; }
.xc-tab { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 32px; min-height: 32px; justify-content: center; border-radius: var(--r-sm);
  color: var(--text-2); text-decoration: none; padding: 0 var(--sp-2); }
.xc-tab:hover { background: var(--surface-3); color: var(--text); }
.xc-tab-ico { width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); margin-left: -3px; }
.xc-tab-name { display: none; }
.xc-badge { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: var(--r-pill); background: var(--look-solid); color: var(--on-look-solid);
  font-size: var(--fs-xs); font-weight: 700; padding: 0 .35rem; font-variant-numeric: tabular-nums; }
.xc-body { overflow: auto; padding: var(--sp-3) var(--xc-pad) var(--sp-4); min-height: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.xc-body[hidden] { display: none; }

/* collapsed: a slim vertical tab with the count */
.xc--collapsed { grid-template-rows: 1fr; }
.xc--collapsed .xc-bar { flex-direction: column; justify-content: flex-start; padding: var(--sp-2) 0; min-height: 0; height: 100%; border-bottom: 0; }
.xc--collapsed .xc-brand { display: none; }
.xc--collapsed .xc-tab { flex-direction: column; padding: var(--sp-2) 0; width: 100%; height: 100%; justify-content: flex-start; gap: var(--sp-3); border-radius: 0; }
.xc--collapsed .xc-tab-ico { transform: rotate(-135deg); margin: 0; }
.xc--collapsed .xc-tab-name { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 600; color: var(--text); letter-spacing: .02em; }

/* origin, notes, summary */
.xc-origin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.xc-origin-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; padding: 1px var(--sp-2); border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); text-transform: uppercase; letter-spacing: .04em; }
.xc-origin-chip--ai_scribe { background: var(--surface-3); border-color: var(--border-strong); }
.xc-muted { color: var(--text-2); font-size: var(--fs-xs); }
.xc-note { display: flex; gap: var(--sp-2); align-items: baseline; margin: 0; font-size: var(--fs-sm); border: 1px solid var(--border-soft); border-left: 3px solid var(--info-fg);
  background: var(--info-bg); color: var(--info-fg); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); }
.xc-note--warn { border-left-color: var(--look-line); background: var(--look-bg); color: var(--look); }
.xc-summary { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.xc-summary strong { color: var(--text); }
.xc-empty { border: 1px dashed var(--border); border-radius: var(--r-md); padding: var(--sp-3); }
.xc-empty p { margin: 0 0 var(--sp-1); }

/* finding cards */
.xc-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.xc-finding { border: 1px solid var(--border-soft); border-left: 3px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); background: var(--surface); }
.xc-finding--needs_look { border-left-color: var(--look-line); }
.xc-finding--agrees, .xc-finding--consistent { border-left-color: var(--agree); }
.xc-finding--could_not_check { border-left-style: dashed; border-left-color: var(--nocheck); }
.xc-finding--not_assessable { border-left-style: dashed; }
.xc-finding--active { outline: 2px solid var(--focus); outline-offset: 1px; }
.xc-head { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; margin: 0 0 var(--sp-2); }
.xc-topic { font-size: var(--fs-xs); color: var(--text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.xc-sentence { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); line-height: 1.5; font-variant-numeric: tabular-nums; }
.xc-sentence q { font-style: italic; }
.xc-links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-sm); }
.xc-links a { display: inline-flex; gap: 4px; align-items: center; min-height: 24px; font-weight: 500; }
.xc-status { display: inline-flex; gap: .3rem; align-items: center; font-weight: 600; font-size: var(--fs-xs); border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-pill); padding: 1px var(--sp-2); white-space: nowrap; line-height: 1.5; color: var(--text); }
.xc-status--needs_look { color: var(--look); background: var(--look-bg); border-color: var(--look-line); }
.xc-status--agrees, .xc-status--consistent { color: var(--agree); background: var(--agree-bg); border-color: color-mix(in srgb, var(--agree) 45%, transparent); }
.xc-status--could_not_check, .xc-status--read_yourself { color: var(--nocheck); background: var(--nocheck-bg); border-style: dashed; border-color: var(--nocheck); }
.xc-status--not_assessable { color: var(--na); border-style: dashed; }
.xc-more > summary { font-size: var(--fs-sm); }
.xc-more[open] { display: grid; gap: var(--sp-2); }
.xc-more-lead { margin: 0; }
.xc-more .cw-group { margin: 0; }
.xc-more .cw-group > summary { font-size: var(--fs-sm); flex-wrap: wrap; }
.xc-more .cw-group-body { padding: 0 var(--sp-2) var(--sp-2); }
.xc-alt { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: var(--text-2); }
.xc-head .cw-chip { font-size: var(--fs-xs); min-height: 22px; }
.xc-head .cw-badge { font-size: var(--fs-xs); }
.xc-cite { margin-top: var(--sp-2); border-top: 1px dashed var(--border-soft); padding-top: var(--sp-1); }
.xc-cite > summary { cursor: pointer; color: var(--link); font-size: var(--fs-xs); font-weight: 600; list-style: none; display: inline-flex; gap: var(--sp-1); align-items: center; min-height: 24px; }
.xc-cite > summary::-webkit-details-marker { display: none; }
.xc-cite > summary::before { content: ""; width: .35rem; height: .35rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .14s var(--ease); }
.xc-cite[open] > summary::before { transform: rotate(45deg); }
.xc-cite .cw-cite-card { margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); }
.xc-cite .cw-cite-card h3 { font-size: var(--fs-sm); }
.xc-cite .cw-cite-card cite { font-style: normal; }
.xc-cite .cw-cite-quote q { quotes: none; }
.xc-cite .cw-cite-src + .cw-cite-src { margin-top: var(--sp-1); }
.xc-dismiss { gap: var(--sp-2); font-size: var(--fs-xs); }
.xc-dismiss select, .xc-dismiss input { width: 100%; font-size: var(--fs-sm); }

/* details disclosure */
.xc-details { border-top: 1px solid var(--border-soft); padding-top: var(--sp-2); }
.xc-details > summary { cursor: pointer; color: var(--link); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 28px; }
.xc-details > summary::-webkit-details-marker { display: none; }
.xc-details > summary::before { content: ""; width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .14s var(--ease); }
.xc-details[open] > summary::before { transform: rotate(45deg); }
.xc-details-body { padding-top: var(--sp-2); }
.xc-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: var(--sp-2) 0 var(--sp-1); }
.xc-tight { margin: 0 0 var(--sp-2); padding-left: 1.1rem; font-size: var(--fs-xs); }
.xc-tight li { margin: 2px 0; }
.xc-rules code { font-size: .95em; }
.xc-foot { margin: auto 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--border-soft); font-size: var(--fs-xs); color: var(--text-2); }

/* standalone page (host side panel or frame) */
.xc-standalone { background: var(--surface); }
.xc-standalone main { max-width: none; padding: 0; }
.xc-standalone .xc { border-left: 0; min-height: calc(100vh - 22px); }
.xc-demo { margin: 0; padding: 2px var(--sp-4); background: var(--risk-bg); color: var(--risk-fg); font-size: var(--fs-xs); font-weight: 600; }
@media (max-width: 360px) { .xc { --xc-pad: var(--sp-3); } .xc-sub { display: none; } }
@media (forced-colors: active) { .xc-status, .xc-finding, .xc-badge, .xc-origin-chip { border: 1px solid CanvasText; } }
@media print { .xc-links, .xc-tab { display: none !important; } .xc-details > * { display: block; } }
.xc-more > summary::after { content: none; display: none; }       /* the nav menu's chevron (cw-more) is not wanted here */
.xc-more > summary { min-height: 28px; padding: var(--sp-1) 0; background: none; color: var(--link); }