/* ethikit.css — EthiKit system LAYOUT classes (desktop-instrument chrome).
 * Distinct from ethikit.theme.css (variables only). These are the dense
 * pane/toolbar/status-bar shapes the design contract calls for (design/
 * design-principles.md §0, micro-patterns 2–4). Candidates for promotion
 * into class.ui.css once shared across systems. Tokens only — no hardcoded
 * palette hexes. */

/* Metric bar — text-first metrics row, hairline below, dense padding. */
body[data-system="ethikit"] .eth-metricbar {
    padding: 6px 12px;
    border-bottom: 1px solid var(--ui-gray-200, #e5e7eb);
    min-height: 34px;
}

/* Status bar — 24px strip at the bottom edge: counts, sync, selection. */
body[data-system="ethikit"] .eth-statusbar {
    height: 24px;
    padding: 0 12px;
    border-top: 1px solid var(--ui-gray-200, #e5e7eb);
    font-size: 11px;
    color: var(--ui-text-muted, #6b7280);
    background: var(--ui-gray-50, #f9fafb);
    flex: 0 0 auto;
}
body[data-system="ethikit"] .eth-statusbar .ui-text-sm { font-size: 11px; }

/* Workflow transition bar — hairline strip above the reading-pane editor that
   carries the guarded next-state action buttons. */
body[data-system="ethikit"] .eth-transitionbar {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ui-gray-200, #e5e7eb);
    background: var(--ui-gray-50, #f9fafb);
    flex: 0 0 auto;
}
/* Committee vote-tally strip below the transition bar. */
body[data-system="ethikit"] .eth-votetally {
    padding: 6px 10px;
    border-bottom: 1px solid var(--ui-gray-200, #e5e7eb);
    flex: 0 0 auto;
}
body[data-system="ethikit"] .eth-votetally:empty { display: none; }

/* Record header — reference + title + assignment line + status pill. */
body[data-system="ethikit"] .eth-recheadbar { flex: 0 0 auto; }
body[data-system="ethikit"] .eth-recheadbar:empty { display: none; }
body[data-system="ethikit"] .eth-rechead { padding: 10px 12px; border-bottom: 1px solid var(--ui-gray-200, #e5e7eb); background: #fff; }
body[data-system="ethikit"] .eth-rechead-ref { font-size: 12px; font-weight: 700; color: var(--ui-primary, #4f46e5); letter-spacing: .02em; white-space: nowrap; }
body[data-system="ethikit"] .eth-rechead-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-system="ethikit"] .eth-pill { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; color: #fff; }
body[data-system="ethikit"] .eth-pill-draft { background: #9ca3af; }
body[data-system="ethikit"] .eth-pill-submitted { background: #3b82f6; }
body[data-system="ethikit"] .eth-pill-screening { background: #6366f1; }
body[data-system="ethikit"] .eth-pill-in_review { background: #f59e0b; }
body[data-system="ethikit"] .eth-pill-pending_decision { background: #f97316; }
body[data-system="ethikit"] .eth-pill-approved { background: #10b981; }
body[data-system="ethikit"] .eth-pill-rejected { background: #dc2626; }
body[data-system="ethikit"] .eth-pill-revision_requested { background: #a855f7; }

/* Work-surface fill (design §4) — make the tab stage a flex column that owns
 * the vertical space the document-flow sticky footer already claims, so panes
 * stretch instead of leaving a white gulf. Scoped to this system only — does
 * NOT change the global pageframe (sticky-footer model preserved). */
body[data-system="ethikit"] .ui-pageframe-body  { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body[data-system="ethikit"] .ui-pageframe-stage { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body[data-system="ethikit"] .ui-pageframe-stage > * { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body[data-system="ethikit"] .ui-control-stage   { flex: 1 1 auto; min-height: 0; }
/* Kanban fills its pane (the central element dominates the stage, §3/§4). */
body[data-system="ethikit"] .ui-pageframe-stage .ui-kanban { height: 100%; min-height: 0; }
body[data-system="ethikit"] .ui-pageframe-stage .ui-kanban-board,
body[data-system="ethikit"] .ui-pageframe-stage .ui-kanban-col,
body[data-system="ethikit"] .ui-pageframe-stage .ui-kanban-column { min-height: 0; }

/* Decision-letter preview — a calm document surface inside the reading pane. */
body[data-system="ethikit"] .eth-letter {
    border: 1px solid var(--ui-gray-200, #e5e7eb);
    border-radius: var(--ui-radius-md, 6px);
    background: #fff;
    line-height: 1.55;
    font-size: var(--ui-text-sm, 0.85rem);
    max-width: 70ch;
}
body[data-system="ethikit"] .eth-letter p { margin: 0 0 8px; }

/* ── Review console — dense 3-column review station ─────────────────────── */
.eth-review-console { gap: 0; }
.eth-rc-col { flex: 1 1 0; min-width: 0; border-left: var(--ui-border-width) solid var(--ui-border); }
.eth-rc-col:first-child { border-left: 0; }
.eth-rc-queue { flex: 0 0 280px; }
.eth-suggest-card { border: var(--ui-border-width) solid var(--ui-border); border-radius: var(--ui-radius-md);
    padding: var(--ui-space-2); background: var(--ui-bg-elev); }
.eth-pill-ghost { background: transparent !important; color: var(--ui-fg-muted) !important;
    border: 1px dashed var(--ui-border); }
/* ── Overview — pipeline distribution + dense breakdown rail ────────────── */
.eth-overview-rail { flex: 0 0 320px; border-left: var(--ui-border-width) solid var(--ui-border); }
/* Phone: stack the split, give the chart a definite height (a fixed-width flex
   rail won't reflow on its own). */
@media (max-width: 640px) {
    .eth-overview-split { flex-direction: column; overflow: auto; }
    .eth-overview-split > * { flex: 0 0 auto; }
    .eth-overview-rail { border-left: none; border-top: var(--ui-border-width) solid var(--ui-border); }
    .eth-pipeline { height: 42vh; }
}

/* ── Conflict-of-interest suggestion card (Phase 1) ─────────────────────── */
.eth-suggest-coi { border-color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 6%, var(--ui-bg-elev)); }

/* ── Reviewer workbench (Phase 2) ───────────────────────────────────────── */
.eth-wb-row { display: flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-2);
    border-bottom: var(--ui-border-width) solid var(--ui-border); cursor: pointer; }
.eth-wb-row.ui-active { background: color-mix(in srgb, var(--ui-primary) 8%, transparent); }
.eth-rubric-row .eth-score { min-width: 30px; padding-left: 0; padding-right: 0; }
.eth-radar { width: 100%; max-width: 460px; }

/* ── /documentSystem — embedded doc screenshots + references ────────────── */
.eth-doc-fig { margin: var(--ui-space-3) 0 0; }
.eth-doc-img { width: 100%; max-width: 920px; display: block; border: var(--ui-border-width) solid var(--ui-border); border-radius: var(--ui-radius-md); }
.eth-refs li { margin-bottom: 4px; }