/* 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. */

/* ── ProCreate chrome (design contract: Mockups About tab) ───────────────
 * Dark quiet chrome holds the tools; the stage below stays paper. Scoped to
 * this system only — the global pageframe is untouched. Tokens only. */
body[data-system="ethikit"] .ui-pageframe-header {
    background: var(--ui-gray-900);
    border-bottom: var(--ui-border-w, 1px) solid var(--ui-gray-700);
}
body[data-system="ethikit"] .ui-pageframe-title    { color: var(--ui-gray-50); }
body[data-system="ethikit"] .ui-pageframe-subtitle { color: var(--ui-gray-400); }
body[data-system="ethikit"] .ui-pageframe-brand-mark {
    color: var(--ui-primary-400);
    text-shadow: 0 0 12px color-mix(in srgb, var(--ui-primary-400) 70%, transparent);
}
body[data-system="ethikit"] .ui-pageframe-actions,
body[data-system="ethikit"] .ui-pageframe-actions .ui-btn,
body[data-system="ethikit"] .ui-pageframe-burger { color: var(--ui-gray-300); }
/* pill tabs — desktop treatment only; the ≤640 collapsed burger dropdown
 * keeps the frame's own panel styling (mockup gotcha: unscoped pills blob). */
@media (min-width: 641px) {
    body[data-system="ethikit"] .ui-pageframe-tabs .ui-tabs {
        background: color-mix(in srgb, var(--ui-gray-50) 8%, transparent);
        border-radius: var(--ui-radius-full);
        padding: calc(var(--ui-space-1, 0.25rem) / 2);
        border: none;
    }
    body[data-system="ethikit"] .ui-pageframe-tabs .ui-tabs-head {
        border: none;
        border-radius: var(--ui-radius-full);
        color: var(--ui-gray-300);
    }
    body[data-system="ethikit"] .ui-pageframe-tabs .ui-tabs-head.ui-active {
        background: var(--ui-primary-50);
        color: var(--ui-gray-900);
        box-shadow: var(--ui-shadow-sm);
        border-bottom: none;
    }
}

/* Paper documents read in a serif (protocol text, letters, record titles). */
body[data-system="ethikit"] .eth-letter,
body[data-system="ethikit"] .eth-rechead-title { font-family: var(--eth-serif); }

/* 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-board-wrap { height: 52vh; flex: 0 0 auto; }
}

/* ── 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; }

/* P1 (E4) — selected-row detail pane beside reference lists (Institutions). */
.eth-detail-pane { flex: 0 0 300px; min-width: 0; }
@media (max-width: 900px) { .eth-detail-pane { flex: 1 1 100%; } }

/* ── Pipeline lane board (Overview hero — design contract: Mockups About) ──
 * Dark steering surface; one lane per lifecycle status; cards carry only what
 * triage needs (risk dot · ref · title · pathway chip · age). Tokens only. */
/* ── Staged application wizard (user ruling: a real editor, not a cramped
 *    schema accordion). Wide stages, quiet stepper, room to write. ────────── */
.eth-wizard { display: flex; flex-direction: column; min-width: 0; }
.eth-wizard .ui-stepper { display: flex; flex-wrap: wrap; gap: var(--ui-space-1, 0.25rem);
    padding: var(--ui-space-2, 0.5rem) 0 var(--ui-space-3, 0.75rem);
    border-bottom: var(--ui-border-w, 1px) solid var(--ui-gray-100);
    margin-bottom: var(--ui-space-3, 0.75rem); }
.eth-wizard .ui-stepper-step { font-size: var(--ui-text-xs); color: var(--ui-fg-muted);
    padding: 0.3em 0.9em; border-radius: var(--ui-radius-full);
    background: var(--ui-gray-100); white-space: nowrap; }
.eth-wizard .ui-stepper-step.ui-active { background: var(--ui-primary); color: var(--ui-primary-50); font-weight: 600; }
.eth-wizard .ui-stepper-step.ui-stepper-done { background: var(--ui-primary-100); color: var(--ui-primary-700); }
.eth-wizard .ui-wizard-body { flex: 1; min-height: 0; }
.eth-wizard .ui-wizard-body .ui-form { max-width: 46rem; }
.eth-wizard .ui-wizard-body textarea.ui-input { min-height: 7.5rem; }
.eth-wizard .ui-wizard-footer { display: flex; justify-content: flex-end; gap: var(--ui-space-2, 0.5rem);
    padding-top: var(--ui-space-3, 0.75rem); margin-top: var(--ui-space-2, 0.5rem);
    border-top: var(--ui-border-w, 1px) solid var(--ui-gray-100); }
.ui-modal .eth-wizard { width: min(44rem, 86vw); }

/* Paper board (user ruling 2026-07-25: no dark board — light surface, quiet). */
.eth-board-wrap { background: var(--ui-gray-100); }
.eth-new-app { width: 100%; justify-content: center; margin-bottom: var(--ui-space-2, 0.5rem); }
.eth-lane-refuse { outline: 2px solid var(--ui-danger); outline-offset: -2px; }
.eth-rail-brief .eth-paper { box-shadow: var(--ui-shadow-sm); }
.eth-board { display: flex; gap: var(--ui-space-3, 0.75rem); overflow-x: auto; overflow-y: hidden; }
.eth-lane { flex: 0 0 14.5rem; display: flex; flex-direction: column; min-height: 0;
    background: var(--ui-bg-muted); border: var(--ui-border-w, 1px) solid var(--ui-border);
    border-radius: var(--ui-radius-xl); }
.eth-lane-head { display: flex; align-items: center; gap: var(--ui-space-2, 0.5rem);
    padding: var(--ui-space-2, 0.5rem) var(--ui-space-3, 0.75rem);
    border-bottom: var(--ui-border-w, 1px) solid var(--ui-border); }
.eth-lane-tick { width: 1.3rem; height: 3px; border-radius: var(--ui-radius-full); flex: 0 0 auto;
    background: var(--ui-gray-500); /* fallback for out-of-registry lanes */ }
.eth-tick-draft            { background: var(--ui-gray-500); }
.eth-tick-submitted        { background: var(--ui-info); }
.eth-tick-screening        { background: var(--ui-warning); }
.eth-tick-in_review        { background: var(--ui-primary-300); }
.eth-tick-pending_decision { background: var(--ui-primary-400); }
.eth-tick-approved         { background: var(--ui-primary); }
.eth-tick-rejected         { background: var(--ui-danger); }
.eth-lane-head h3 { margin: 0; flex: 1; font-size: var(--ui-text-xs); font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-fg); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.eth-lane-n { font-size: var(--ui-text-xs); color: var(--ui-fg-muted);
    background: var(--ui-bg); padding: 0.1em 0.7em; border-radius: var(--ui-radius-full); }
.eth-lane-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--ui-space-2, 0.5rem);
    display: flex; flex-direction: column; gap: var(--ui-space-2, 0.5rem); }
.eth-card-k { background: var(--ui-bg); border: var(--ui-border-w, 1px) solid var(--ui-border);
    border-radius: var(--ui-radius-lg); padding: var(--ui-space-2, 0.5rem) var(--ui-space-3, 0.75rem);
    cursor: pointer; transition: transform var(--ui-transition-fast), border-color var(--ui-transition-fast); }
.eth-card-k:hover, .eth-card-k.ui-active { transform: translateY(-2px); border-color: var(--ui-primary-400); }
.eth-card-ref { display: flex; align-items: center; gap: var(--ui-space-2, 0.5rem);
    font-size: var(--ui-text-xs); letter-spacing: 0.08em; color: var(--ui-fg-muted); }
.eth-risk { width: 0.5rem; height: 0.5rem; border-radius: var(--ui-radius-full); flex: 0 0 auto; }
.eth-risk-lo { background: var(--ui-success); }
.eth-risk-md { background: var(--ui-warning); }
.eth-risk-hi { background: var(--ui-danger); }
.eth-card-k h4 { margin: 0.3em 0 0.5em; font-size: var(--ui-text-sm); font-weight: 500;
    line-height: 1.35; color: var(--ui-fg); }
.eth-card-foot { display: flex; align-items: center; gap: var(--ui-space-1, 0.25rem); }
.eth-chip { font-size: var(--ui-text-xs); font-weight: 500; white-space: nowrap;
    padding: 0.15em 0.75em; border-radius: var(--ui-radius-full);
    background: var(--ui-bg-muted); color: var(--ui-fg-muted); max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; }
.eth-card-age { margin-left: auto; font-size: var(--ui-text-xs); color: var(--ui-fg-muted); white-space: nowrap; }

/* ── Committee vote ring (Decision console — the vote lands in the ring) ── */
.eth-ring { width: 11rem; height: 11rem; position: relative; flex: 0 0 auto; align-self: center; }
.eth-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.eth-ring circle { fill: none; stroke-width: 14; stroke-linecap: round; }
.eth-ring-track   { stroke: var(--ui-gray-200); }
.eth-ring-for     { stroke: var(--ui-primary); }
.eth-ring-revise  { stroke: var(--ui-warning); }
.eth-ring-against { stroke: var(--ui-danger); }
.eth-ring-abstain { stroke: var(--ui-gray-400); }
.eth-ring-centre { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; }
.eth-ring-centre b { font-size: var(--ui-text-2xl, 1.5rem); font-weight: 700; color: var(--ui-fg); }
.eth-ring-centre small { font-size: var(--ui-text-xs); letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ui-fg-muted); margin-top: 0.2em; }

/* ── Paper application brief (the protocol reads as a document) ──────────── */
.eth-paper { background: var(--ui-gray-50, var(--ui-bg)); border: var(--ui-border-w, 1px) solid var(--ui-border);
    border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-md); }
.eth-paper-ref { font-size: var(--ui-text-xs); letter-spacing: 0.12em; color: var(--ui-fg-muted); }
.eth-chip-paper { font-size: var(--ui-text-xs); color: var(--ui-fg-muted);
    background: var(--ui-bg-muted); padding: 0.15em 0.75em; border-radius: var(--ui-radius-full); }
.eth-paper-title { font-family: var(--eth-serif); font-weight: 600;
    font-size: calc(var(--ui-text-lg, 1.1rem) * 1.15); line-height: 1.3; color: var(--ui-fg); }
.eth-facts { display: flex; gap: var(--ui-space-2, 0.5rem); flex-wrap: wrap; }
.eth-fact { flex: 1 1 8rem; background: var(--ui-bg); border: var(--ui-border-w, 1px) solid var(--ui-border);
    border-radius: var(--ui-radius-lg); padding: var(--ui-space-2, 0.5rem) var(--ui-space-3, 0.75rem); min-width: 0; }
.eth-fact-k { font-size: var(--ui-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-fg-muted); }
.eth-fact-v { font-size: var(--ui-text-sm); font-weight: 600; margin-top: 0.15em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eth-paper-h { font-size: var(--ui-text-xs); font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--ui-primary); }
.eth-paper-p { font-family: var(--eth-serif); font-size: var(--ui-text-base, 0.95rem);
    line-height: 1.65; color: var(--ui-gray-800); }