/* Shared components. One place per chip, button, card and dialog. Hue = state only. */

/* ---- buttons ---- */
.btn {
  height: var(--control-h); padding: 0 var(--sp-4); border-radius: var(--r-2);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: var(--t-sm-strong); display: inline-flex; align-items: center; gap: var(--sp-2);
}
.btn:hover { background: var(--surface-2); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: default; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--danger-text); border-color: var(--danger); }
.btn.danger:hover { background: var(--rejected-bg); }
.btn.sm { height: var(--control-h-sm); padding: 0 var(--sp-3); font: var(--t-label); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn .kbd {
  margin-left: var(--sp-1); padding: 0 var(--sp-1); border-radius: var(--r-1);
  background: var(--surface-2); color: var(--ink-3); font: var(--t-label);
  border: 1px solid var(--line);
}
.btn.primary .kbd { background: rgba(255,255,255,0.18); color: var(--on-accent); border-color: transparent; }
.linkbtn { background: none; border: none; color: var(--link); padding: 0; font: inherit; }
.linkbtn:hover { text-decoration: underline; }

/* ---- chips ---- */
.chip {
  height: var(--chip-h); padding: 0 var(--sp-2); border-radius: var(--r-1);
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font: var(--t-label); white-space: nowrap;
}
.chip .ic { width: 16px; height: 16px; }
.chip.neutral { background: var(--neutral-bg); color: var(--neutral-ink); }
.chip.pill { border-radius: var(--r-pill); padding: 0 var(--sp-3); }
.state-decision  { background: var(--decision-bg);  color: var(--decision-ink); }
.state-trusted   { background: var(--trusted-bg);   color: var(--trusted-ink); }
.state-published { background: var(--published-bg); color: var(--published-ink); }
.state-rejected  { background: var(--rejected-bg);  color: var(--rejected-ink); }
.state-escalated { background: var(--escalated-bg); color: var(--escalated-ink); }
.state-running   { background: var(--running-bg);   color: var(--running-ink); }
.state-known     { background: var(--neutral-bg);   color: var(--neutral-ink); }

/* ---- trust bars (four, filled left to right) ---- */
.bars { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.bars .bar { width: 5px; height: 14px; border-radius: 1px; background: var(--bar-empty); }
.bars .bar.on { background: var(--bar-fill); }
/* WPUX.4 finding 23: the glyph carries a visible "n/4" so a reader never meets an unlabelled bar. */
.bars .bars-count { margin-left: 4px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---- cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  padding: var(--card-pad);
}
.card + .card { margin-top: var(--sp-4); }
/* cards that sit side by side in a grid never take the stacking margin (it pushed them out of line) */
.home-readouts > .card, .home-lower > .card, .start-cards > .card { margin-top: 0; }
.card-title { font: var(--t-h2); margin-bottom: var(--sp-2); }

/* ---- screen head ---- */
.screen-head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.screen-head .grow { flex: 1 1 auto; min-width: 0; }
.screen-head h1 { font: var(--t-h1); }
.helper { font: var(--t-sm); color: var(--ink-3); margin-top: 2px; }
.state-sentence { font: var(--t-body); margin: 0 0 var(--sp-3); }

/* ---- info / glossary popover ---- */
.info-btn {
  width: 16px; height: 16px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-3); font: 600 10px/14px var(--font-sans);
  display: inline-grid; place-items: center; padding: 0; vertical-align: middle;
}
.popover {
  position: fixed; z-index: var(--z-popover); max-width: 320px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  box-shadow: var(--e-1); padding: var(--sp-3); font: var(--t-sm); color: var(--ink-2);
}
.popover .term { font: var(--t-sm-strong); color: var(--ink); display: block; margin-bottom: 2px; }
.popover .code { color: var(--ink-3); font: var(--t-label); }

/* ---- readout cards (Home) ---- */
.home-readouts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6);
}
.readout { min-height: 140px; display: flex; flex-direction: column; gap: var(--sp-1); }
.readout .caption { font: var(--t-label); color: var(--ink-2); text-transform: none; display: flex; align-items: center; gap: 6px; }
.readout .num { font: var(--t-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.readout .num .of { font: var(--t-h2); color: var(--ink-2); }
.readout .sub { font: var(--t-sm); color: var(--ink-2); }
.readout .act { margin-top: auto; padding-top: var(--sp-3); display: flex; gap: var(--sp-2); align-items: center; }
.worth-row { display: flex; flex-direction: column; padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.worth-row:first-child { border-top: none; }
.worth-row .v { font: var(--t-body-strong); }
.worth-row .src { font: var(--t-caption); color: var(--ink-3); }
.worth-row.unmeasured .v { color: var(--ink-3); font: var(--t-body); }

/* ---- tabs ---- */
.tablist { display: flex; gap: var(--sp-1); flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: none; padding: var(--sp-2) var(--sp-3);
  color: var(--ink-2); font: var(--t-sm-strong); border-bottom: 2px solid transparent;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab .count { color: var(--ink-3); font: var(--t-label); margin-left: var(--sp-1); }
.tab-remaining { margin-left: auto; align-self: center; font: var(--t-sm); color: var(--ink-3); padding-right: var(--sp-2); }
.tablist + .filters { margin-top: var(--sp-3); }
.unit-note { margin-top: var(--sp-2); }
.unit-note + .filters { margin-top: var(--sp-3); }

/* ---- master-detail (Review) ---- */
.master-detail { display: grid; grid-template-columns: var(--list-w) 1fr; gap: var(--sp-4); align-items: start; }
.list { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--surface); }
.list-row {
  width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1); position: relative;
}
.list-row:hover { background: var(--surface-2); }
.list-row[aria-selected="true"] { background: var(--sel-bg); }
.list-row[aria-selected="true"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
}
.list-row .name { font: var(--t-body-strong); }
.list-row .meta { font: var(--t-caption); color: var(--ink-3); }
.list-row .chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: 2px; }

.detail { min-width: 0; }
.detail .title-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.detail .state-sentence { font: var(--t-body); margin: var(--sp-2) 0; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-4); margin: var(--sp-4) 0; }
.facts .k { font: var(--t-label); color: var(--ink-3); }
.facts .v { font: var(--t-sm); }
.links-table { width: 100%; border-collapse: collapse; font: var(--t-sm); }
.links-table th { text-align: left; font: var(--t-label); color: var(--ink-3); padding: var(--sp-1); }
.links-table td { padding: var(--sp-1); border-top: 1px solid var(--line); vertical-align: top; }

.action-footer {
  position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line);
  margin-top: var(--sp-4); padding: var(--sp-3) 0; display: flex; gap: var(--sp-2); flex-wrap: wrap;
}
.action-footer .danger-group { margin-left: auto; display: flex; gap: var(--sp-2); }
.blocked-line { font: var(--t-sm); color: var(--ink-3); padding: var(--sp-3) 0; }

/* ---- disclosure ---- */
details.disclosure { margin-top: var(--sp-3); }
details.disclosure > summary { font: var(--t-label); color: var(--link); cursor: pointer; list-style: none; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: "▸ "; color: var(--ink-3); }
details.disclosure[open] > summary::before { content: "▾ "; }

/* ---- code block ---- */
.codeblock {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--sp-3); font: var(--t-code); overflow-x: auto; margin-top: var(--sp-2);
}
.codeblock .line { display: flex; gap: var(--sp-3); white-space: pre-wrap; word-break: break-word; }
.codeblock .ln { color: var(--ink-3); user-select: none; flex: 0 0 auto; min-width: 3ch; text-align: right; white-space: nowrap; }
.codeblock .hl { background: var(--code-hl-bg); border-radius: var(--r-1); }
.caption { font: var(--t-caption); color: var(--ink-3); }

/* ---- drawer (non-modal dialog) ---- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: var(--drawer-w); max-width: 100vw;
  margin: 0; border: none; border-left: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--e-2); z-index: var(--z-drawer); padding: 0; color: var(--ink);
  display: flex; flex-direction: column;
}
.drawer::backdrop { background: transparent; }
.drawer-head { padding: var(--sp-4) var(--sp-4) 0; border-bottom: 1px solid var(--line); position: relative; }
.drawer-head .title-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.drawer-head .title { padding-right: var(--sp-8); }
.drawer-head .close { position: absolute; top: var(--sp-2); right: var(--sp-2); }
.drawer-head .tablist { border-bottom: none; margin: 0 calc(-1 * var(--sp-3)); }
[tabindex="-1"]:focus-visible { outline: none; }
.drawer-head .title { font: var(--t-h3); margin: var(--sp-1) 0; }
.drawer-body { padding: var(--sp-4); overflow-y: auto; flex: 1 1 auto; }
@media (max-width: 900px) { .drawer { width: 100vw; } }

/* ---- dialog (modal) ---- */
dialog.modal {
  border: none; border-radius: var(--r-3); padding: 0; max-width: 520px; width: calc(100vw - 32px);
  background: var(--surface); color: var(--ink); box-shadow: var(--e-2);
}
dialog.modal::backdrop { background: var(--scrim); }
.modal-head { padding: var(--sp-4) var(--sp-4) 0; font: var(--t-h3); }
.modal-body { padding: var(--sp-3) var(--sp-4); }
.modal-body p { font: var(--t-body); color: var(--ink-2); }
.modal-body ul.consequences { margin: var(--sp-2) 0; padding-left: var(--sp-4); list-style: disc; font: var(--t-sm); color: var(--ink-2); }
.modal-foot { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; gap: var(--sp-2); justify-content: flex-end; }
.field label { font: var(--t-label); color: var(--ink-3); display: block; margin-bottom: var(--sp-1); }
.field textarea, .field input, .field select {
  width: 100%; font: var(--t-body); padding: var(--sp-2); border-radius: var(--r-2);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
.field .counter { font: var(--t-caption); color: var(--ink-3); text-align: right; }

/* ---- toast ---- */
.toasts {
  position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2); align-items: center;
}
.toast {
  max-width: 360px; background: var(--toast-bg); color: var(--toast-ink);
  border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4); box-shadow: var(--e-2);
  display: flex; align-items: center; gap: var(--sp-3); font: var(--t-sm);
}
.toast .undo { color: var(--toast-link); background: none; border: none; font: var(--t-sm-strong); }
.toast.danger { background: var(--danger); color: var(--on-danger); }
.toast .code { background: rgba(255,255,255,0.18); border-radius: var(--r-1); padding: 0 var(--sp-1); }

/* ---- tables ---- */
.dtable { width: 100%; border-collapse: collapse; font: var(--t-sm); }
.dtable th { text-align: left; font: var(--t-label); color: var(--ink-3); padding: var(--sp-2); border-bottom: 1px solid var(--line); }
.dtable td { padding: var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.dtable .sub { font: var(--t-caption); color: var(--ink-3); }
.pager { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); font: var(--t-sm); color: var(--ink-2); }

/* ---- state panels ---- */
.state-panel {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--ink-2);
}
.state-panel .ic { width: 28px; height: 28px; color: var(--ink-3); }
.state-panel .msg { font: var(--t-body); }
.skeleton {
  background: var(--surface-2); border-radius: var(--r-2);
  animation: shimmer 1.2s infinite; min-height: 16px;
}
@keyframes shimmer { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---- dock internals ---- */
.dock-head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-2); }
.dock-head .title { font: var(--t-h3); flex: 1 1 auto; }
.dock-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.dock-foot { border-top: 1px solid var(--line); padding: var(--sp-3); }
.starter {
  width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: var(--sp-2) var(--sp-3); font: var(--t-sm); color: var(--ink);
}
.starter:hover { background: var(--sel-bg); }
.cop-role-line { font: var(--t-sm); color: var(--ink-3); }
.cop-msg { border-radius: var(--r-2); padding: var(--sp-2) var(--sp-3); font: var(--t-sm); }
.cop-msg.q { background: var(--sel-bg); align-self: flex-end; max-width: 85%; }
.cop-msg.a { background: var(--surface-2); max-width: 95%; }
.cop-standing { font: var(--t-caption); color: var(--ink-3); border-top: 1px solid var(--line); padding-top: var(--sp-2); }