/* =========================================================================
   Console components — reusable page/section styles.
   Loaded once in base.html so every screen shares the same component vocabulary (DRY).
   All page-specific CSS lives here, never inline in templates.
   ========================================================================= */

/* Shell ------------------------------------------------------------------ */
.app--bare { grid-template-columns: 1fr; }

/* Form fields inside cards (settings + registry forms) ------------------- */
.card form input:not([type=checkbox]):not([type=radio]),
.card form select {
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  width: 100%;
}

/* Get started — phase banner + setup checklist + runtime loop ------------ */
.phases { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--rule); border-radius:var(--radius-md); overflow:hidden; background:var(--cream-50); }
.phase { padding:16px 20px; border-right:1px solid var(--rule-subtle); display:flex; align-items:center; gap:12px; }
.phase:last-child { border-right:none; }
.phase.is-on { background:var(--folio-green-100); }
.phase__n { width:30px;height:30px;border-radius:50%;border:1.5px solid var(--rule-strong);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;color:var(--fg-2);flex:0 0 auto; }
.phase.is-on .phase__n { border-color:var(--folio-green-700); color:var(--folio-green-900); background:var(--cream-50); }
.phase__t { font-family:var(--font-display); font-size:15px; font-weight:500; color:var(--ink-900); }
.phase__c { font-size:11.5px; color:var(--fg-3); margin-top:1px; }

.setupcard { display:grid; grid-template-columns:46px 1fr auto; gap:18px; align-items:center; padding:18px 20px; }
.snode { width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto; }
.snode.done { background:var(--folio-green-100); border:1.5px solid var(--folio-green-700); }
.snode.done [data-lucide] { color:var(--folio-green-700); }
.snode.todo { background:var(--parchment-100); border:1.5px solid var(--parchment-700); }
.snode.todo [data-lucide] { color:var(--parchment-700); }

/* Audit ledger — verification strip + hash-chain rail -------------------- */
.verify { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; border:1px solid var(--rule); border-radius:var(--radius-md); overflow:hidden; background:var(--cream-50); }
.verify > div { padding:16px 20px; border-right:1px solid var(--rule-subtle); }
.verify > div:last-child { border-right:none; }

.ledger { border:1px solid var(--rule); border-radius:var(--radius-md); overflow:hidden; background:var(--cream-50); margin-top:16px; }
.ledger__head { display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--rule); background:var(--cream-100); }

.lrow { display:grid; grid-template-columns: 34px 120px 1fr 96px; align-items:center; gap:14px; padding:0 18px 0 0; border-bottom:1px solid var(--rule-subtle); transition:background var(--dur-hover) var(--ease); }
.lrow:hover { background:var(--cream-100); }
.lrow:last-child { border-bottom:none; }
.rail { position:relative; align-self:stretch; min-height:52px; }
.rail::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1.5px; background:var(--rule); transform:translateX(-50%); }
.rail__node { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:var(--cream-50); border:2px solid var(--ink-300); z-index:1; }
.lrow:first-child .rail::before { top:50%; }
.lrow:last-child .rail::before { bottom:50%; }
.rail__node.is-ctrl { border-color:var(--folio-green-700); }
.rail__node.is-stop { border-color:var(--bindery-red-500); background:var(--bindery-red-500); }
.seqcell { font-family:var(--font-mono); }
.hashchip { font-family:var(--font-mono); font-size:11px; color:var(--fg-3); }
.evt { font-family:var(--font-mono); font-size:11px; letter-spacing:0.02em; color:var(--fg-3); }

/* Approvals — master-detail inbox + decision pane ----------------------- */
.approvals { display:grid; grid-template-columns: 340px 1fr; gap:0; border:1px solid var(--rule); border-radius:var(--radius-md); overflow:hidden; background:var(--cream-50); }
.inbox { border-right:1px solid var(--rule); display:flex; flex-direction:column; min-width:0; }
.inbox__tabs { display:flex; gap:2px; padding:10px 12px; border-bottom:1px solid var(--rule-subtle); background:var(--cream-100); }
.itab { font-size:12.5px; padding:5px 10px; border-radius:var(--radius-md); color:var(--fg-2); cursor:pointer; }
.itab.is-on { background:var(--folio-green-100); color:var(--folio-green-900); font-weight:500; }
.itab .c { font-family:var(--font-mono); font-size:10.5px; color:var(--fg-3); margin-left:5px; }
.qrow { display:block; padding:14px 16px; border-bottom:1px solid var(--rule-subtle); color:inherit; cursor:pointer; transition:background var(--dur-hover) var(--ease); text-decoration:none; }
.qrow:hover { background:var(--cream-100); }
.qrow.is-sel { background:var(--folio-green-100); box-shadow: inset 2px 0 0 var(--folio-green-700); }
.detail { padding:0; min-width:0; }
.dpad { padding:22px 26px; }
.tl { position:relative; padding-left:22px; }
.tl::before { content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1.5px; background:var(--rule); }
.tl__i { position:relative; padding:6px 0; }
.tl__i::before { content:""; position:absolute; left:-21px; top:10px; width:9px; height:9px; border-radius:50%; background:var(--cream-50); border:2px solid var(--folio-green-700); }
.tl__i.is-wait::before { background:var(--parchment-700); border-color:var(--parchment-700); }

/* Security alerts — isolation banner + summary strip + alert rows --------- */
.isobanner { display:flex; align-items:center; gap:14px; padding:14px 18px; border:1px solid rgba(47,217,138,0.3); background:rgba(47,217,138,0.06); border-radius:var(--radius-md); }
.alstrip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--rule); border-radius:var(--radius-md); overflow:hidden; background:var(--cream-50); }
.alstrip > div { padding:14px 18px; border-right:1px solid var(--rule-subtle); }
.alstrip > div:last-child { border-right:none; }
.alnum { font-family:var(--font-display); font-size:24px; letter-spacing:-0.03em; font-weight:500; }
.arow { padding:16px 18px; border-bottom:1px solid var(--rule-subtle); display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
.arow:last-child { border-bottom:none; }
.arow.is-ack { opacity:0.62; }

/* Actions — lifecycle state filter chips -------------------------------- */
.statebar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.stchip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--rule); border-radius:var(--radius-md); background:var(--cream-50); font-size:12.5px; color:var(--fg-2); cursor:pointer; text-decoration:none; }
.stchip:hover { border-color:var(--rule-strong); }
.stchip.is-on { background:var(--folio-green-100); color:var(--folio-green-900); border-color:rgba(47,217,138,0.32); }
.stchip .n { font-family:var(--font-mono); font-size:11px; color:var(--fg-3); }
.stchip.is-on .n { color:var(--folio-green-900); }
.stchip .status { padding:0; background:none; border:none; }
[data-href] { cursor:pointer; }

/* Reporting — deterministic pipeline + framework pack cards -------------- */
.pipe { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; }
.pipe .s { background:var(--cream-200); border:1px solid var(--rule-subtle); padding:4px 9px; border-radius:var(--radius-sm); color:var(--ink-700); }
.pipe .s.seal { background:var(--folio-green-100); border-color:rgba(47,217,138,0.3); color:var(--folio-green-900); }
.packs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pack { border:1px solid var(--rule); border-radius:var(--radius-md); background:var(--cream-50); padding:16px 18px; transition:border-color var(--dur-hover) var(--ease); }
.pack:hover { border-color:var(--rule-strong); }
.pack__name { font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--ink-900); }
.pack__code { font-family:var(--font-mono); font-size:10.5px; color:var(--fg-3); letter-spacing:0.04em; margin-top:2px; }

/* Tools registry — model flow chips ------------------------------------- */
.flow { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; color:var(--fg-3); flex-wrap:wrap; }
.flow .b { background:var(--cream-200); border:1px solid var(--rule-subtle); padding:2px 8px; border-radius:var(--radius-sm); color:var(--ink-700); }

/* Generic summary strip — N equal metric cells (governance, tools, etc.) -- */
.statstrip { display:grid; border:1px solid var(--rule); border-radius:var(--radius-md); overflow:hidden; background:var(--cream-50); }
.statstrip > div { padding:14px 18px; border-right:1px solid var(--rule-subtle); }
.statstrip > div:last-child { border-right:none; }
.statstrip__n { font-family:var(--font-display); font-size:24px; letter-spacing:-0.03em; font-weight:500; color:var(--ink-900); line-height:1; }
.statstrip__n.is-stop { color:var(--bindery-red-700); }
.statstrip__n.is-wait { color:var(--parchment-700); }
.statstrip--3 { grid-template-columns:repeat(3,1fr); }
.statstrip--4 { grid-template-columns:repeat(4,1fr); }
.statstrip--5 { grid-template-columns:repeat(5,1fr); }

/* Action detail — lifecycle stepper + panels + signed credential card ---- */
.steps { display:grid; grid-template-columns:repeat(6,1fr); gap:0; }
.step { position:relative; padding:0 10px; text-align:center; }
.step__node { width:30px; height:30px; border-radius:50%; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; background:var(--cream-100); border:1.5px solid var(--rule-strong); position:relative; z-index:2; }
.step__node [data-lucide] { width:15px; height:15px; color:var(--fg-3); }
.step::before { content:""; position:absolute; top:15px; left:-50%; width:100%; height:1.5px; background:var(--rule); z-index:1; }
.step:first-child::before { display:none; }
.step--done .step__node { background:var(--folio-green-100); border-color:var(--folio-green-700); }
.step--done .step__node [data-lucide] { color:var(--folio-green-700); }
.step--current .step__node { background:var(--parchment-100); border-color:var(--parchment-700); }
.step--current .step__node [data-lucide] { color:var(--parchment-700); }
.step--stop .step__node { background:color-mix(in srgb,var(--bindery-red-500) 14%,transparent); border-color:var(--bindery-red-500); }
.step--stop .step__node [data-lucide] { color:var(--bindery-red-500); }
.step--done::before, .step--current::before { background:var(--folio-green-700); }
.step--stop::before { background:var(--bindery-red-500); }
.step__name { font-family:var(--font-display); font-size:13px; font-weight:500; color:var(--ink-900); }
.step__who { font-family:var(--font-mono); font-size:10px; color:var(--fg-3); margin-top:3px; line-height:1.4; }

.kv { display:grid; grid-template-columns:150px 1fr; gap:9px 16px; font-size:13px; }
.kv dt { font-family:var(--font-mono); font-size:11px; color:var(--fg-3); text-transform:uppercase; letter-spacing:0.04em; padding-top:2px; }
.kv dd { margin:0; color:var(--ink-900); }
.panel { border:1px solid var(--rule-subtle); border-radius:var(--radius-md); background:var(--cream-50); overflow:hidden; }
.panel__h { display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--rule-subtle); font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-3); }
.panel__h [data-lucide] { width:14px; height:14px; }
.panel__b { padding:14px 16px; }
.cred { background:var(--cream-100); border:1px solid rgba(47,217,138,0.3); border-radius:var(--radius-md); padding:30px 16px 14px; position:relative; }
.cred__seal { position:absolute; top:12px; right:14px; display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; color:var(--folio-green-900); }
.cred dl { display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin:0; }
.cred dt { font-family:var(--font-mono); font-size:11px; color:var(--fg-3); }
.cred dd { margin:0; font-family:var(--font-mono); font-size:12px; color:var(--ink-900); word-break:break-all; }
.sig { font-family:var(--font-mono); font-size:11px; color:var(--folio-green-900); background:var(--folio-green-100); padding:6px 8px; border-radius:var(--radius-sm); word-break:break-all; line-height:1.5; }

/* Scrollable checkbox group for multi-select setup fields (token scopes, action
   types, webhook event types) — pick from seeded values, plus a custom text box. */
.checkbox-scroll { max-height:160px; overflow-y:auto; border:1px solid var(--rule-subtle); border-radius:var(--radius-sm); padding:8px 10px; font-size:13px; }

/* Developer quickstart code snippets (get-started page). */
.codeblock { background:var(--ink-900,#10110f); color:var(--cream-50,#f5f3ec); font-family:var(--font-mono); font-size:12px; line-height:1.5; padding:12px 14px; border-radius:var(--radius-md); overflow-x:auto; white-space:pre; margin:4px 0 10px; border:1px solid var(--rule-subtle); }

/* Policy console — component classes replacing former inline styles. */
.pol-tabnav { padding: 6px; margin-bottom: 16px; }
.pol-row-hl { background: var(--cream-100); }
.pol-empty-p18 { padding: 18px; }
.pol-empty-p20 { padding: 20px; }
.pol-pack-body { max-width: 62ch; }
.pol-mt3 { margin-top: 3px; }
.pol-disabled { opacity: .55; }
.pol-sim-cases { margin: 8px 0; }
.pol-minw64 { min-width: 64px; }
.pol-minw150 { min-width: 150px; }
.pol-minw200 { min-width: 200px; }
.pol-minw220 { min-width: 220px; }
.pol-minw280 { min-width: 280px; }
.pol-minw320 { min-width: 320px; }
.pol-maxw200 { max-width: 200px; }
.pol-w80 { width: 80px; }
.pol-w90 { width: 90px; }
.pol-w110 { width: 110px; }
.pol-pointer { cursor: pointer; }

/* Approvals inbox — component classes replacing former inline styles. */
.apv-dpad-head { border-bottom: 1px solid var(--rule-subtle); background: var(--cream-100); }
.apv-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink-900); margin: 0; letter-spacing: -0.01em; }
.apv-dpad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.apv-col { gap: 20px; }
.apv-dpad-bar { border-top: 1px solid var(--rule-subtle); background: var(--cream-100); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.apv-decide-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; width: 100%; }
.apv-dpad-empty { text-align: center; padding: 60px 26px; }
.apv-rationale-cell { font-size: 12px; max-width: 340px; }
.apv-error-wrap { padding: 12px 16px; }
.apv-qrow-link { display: block; text-decoration: none; color: inherit; }
.apv-inline-form { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.apv-empty-state { padding: 28px; text-align: center; }
.apv-empty-icon { width: 24px; height: 24px; }

/* Action detail — component classes replacing former inline styles. */
.adt-row-meta { margin: 8px 0; }
.adt-card-steps { padding: 22px 24px; }
.adt-main-grid { grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 16px; }
.adt-col { gap: 16px; }
.adt-eval-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule-subtle); }
.adt-token-chip { font-size: 10px; }
.adt-constraints-sep { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule-subtle); }
.adt-obs-kv { grid-template-columns: 130px 1fr; }
.adt-ledger-link { color: inherit; }

/* Profile detail. */
.pfd-main-grid { grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 16px; }
.pfd-main-grid .stack { gap: 16px; }
.pfd-tl-row { align-items: baseline; gap: 8px; }
.pfd-tl-row > span:first-child { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Oversight — component classes replacing former inline styles. */
.ovs-verify-status { font-size: 13px; padding: 4px 12px 4px 9px; }
.ovs-metric-val { font-size: 26px; letter-spacing: -0.02em; }
.ovs-ledger-label { margin-left: 10px; }
.ovs-ledger-empty { padding: 24px; text-align: center; }
.ovs-banner-icon { flex: 0 0 auto; }

/* Actions list — component classes replacing former inline styles. */
.int-banner-icon { flex: 0 0 auto; }
.int-empty-cell { padding: 24px 18px; }

/* Home (org list) — component classes replacing former inline styles. */
.home-brandmark { width: 30px; height: 30px; color: var(--folio-green-700); filter: drop-shadow(0 0 10px rgba(47,217,138,0.35)); }
.home-brandword { font-size: 20px; }
.home-brandtag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.home-org-card { display: flex; align-items: center; gap: 14px; }
.home-empty-card { text-align: center; padding: 40px; }
.home-empty-msg { margin: 12px 0 16px; }

/* Dashboard — component classes replacing former inline styles. */
.dash-posture-grid { display: grid; grid-template-columns: 300px 1fr; }
.dash-posture-left { padding: 20px 22px; border-right: 1px solid var(--rule-subtle); background: var(--cream-100); }
.dash-posture-right { padding: 16px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; align-self: center; }
.dash-status-lg { font-size: 13px; padding: 4px 12px 4px 9px; }
.dash-posture-blockers { margin: 12px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--fg-2); line-height: 1.6; }
.dash-posture-note { font-size: 12.5px; color: var(--fg-2); margin: 12px 0 0; line-height: 1.5; }
.dash-posture-row { padding: 7px 0; border-bottom: 1px solid var(--rule-subtle); }
.dash-posture-row--last { border-bottom: none; }
.dash-grid-flow { grid-template-columns: 1.3fr 1fr; }
.dash-meter-bar { display: flex; height: 38px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--rule-subtle); }
.dash-flow-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 18px; }
.dash-dot { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.dash-dot--ok { background: var(--folio-green-700); }
.dash-dot--wait { background: var(--parchment-700); }
.dash-dot--gold { background: #C39A52; }
.dash-dot--stop { background: var(--bindery-red-500); }
.dash-hairline-spacer { margin: 18px 0 14px; }
.dash-empty-center { padding: 18px 0; text-align: center; }
.dash-empty-lg { padding: 22px 18px; text-align: center; }
.dash-empty-sm { padding: 22px; text-align: center; }
.dash-empty-alerts { padding: 18px; }
.dash-queue-item { color: inherit; }
.dash-seq-col { width: 1px; }
.dash-sidebar-stack { gap: 16px; }
.dash-alert-row { padding: 12px 18px; border-bottom: 1px solid var(--rule-subtle); }
.dash-ledger-row { padding: 6px 0; border-bottom: 1px solid var(--rule-subtle); }
.dash-ledger-row--last { border-bottom: none; }

/* Developer guide — component classes replacing former inline styles. */
.docs-ul { font-size: 12.5px; line-height: 1.8; padding-left: 18px; }
.snode.docs-snode-sm { width: 26px; height: 26px; }

/* Get started — component classes replacing former inline styles. */
.gs-card--accent { border-color: var(--accent); }
.gs-intro { max-width: 64ch; }
.gs-setupcard--ruled { border-bottom: 1px solid var(--rule-subtle); }
.gs-list { padding-left: 18px; }

/* Step-up enrollment — component classes replacing former inline styles. */
.su-enroll { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.su-snode--lg { width: 42px; height: 42px; }
.su-card-head--pb12 { padding: 0 0 12px; }
.su-secret-block { display: block; padding: 10px; background: var(--cream-100); border-radius: var(--radius-md); word-break: break-all; }
.su-break-all { word-break: break-all; }
.su-grid--gap16-start { gap: 16px; align-items: start; }
.su-h3-tight { margin: 0 0 4px; }
.su-code-input { font-family: var(--font-mono); letter-spacing: 0.3em; text-align: center; font-size: 18px; }
.su-btn-centered { justify-content: center; }
.su-h3-wide { margin: 0 0 12px; }
.su-rule-top { padding-top: 12px; border-top: 1px solid var(--rule-subtle); }

/* API keys — component classes replacing former inline styles. */
.key-issued { border-color: var(--green); }
.key-secret-block { display: block; padding: 10px; background: var(--bg); border-radius: 7px; word-break: break-all; }
.key-input--md { padding: 8px; border: 1px solid var(--line); border-radius: 7px; min-width: 240px; }
.key-input--sm { padding: 8px; border: 1px solid var(--line); border-radius: 7px; width: 120px; }
.key-scope-label { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; }
.key-scope-check { margin-top: 3px; }

/* Approval authority — component classes replacing former inline styles. */
.aag-check-label { display: block; font-weight: 400; }
.aag-input--amount { max-width: 140px; }
.aag-input--currency { max-width: 90px; }

/* Reporting — component classes replacing former inline styles. */
.rpt-pipe-card { padding: 14px 20px; }
.rpt-head--pb14 { padding: 0 0 14px; }
.rpt-empty-cell { padding: 24px; text-align: center; }

/* Security alerts — component classes replacing former inline styles. */
.alr-noshrink { flex: 0 0 auto; }
.alr-empty { padding: 26px; text-align: center; }

/* Resource pools — component classes replacing former inline styles. */
.rsp-input--unit { max-width: 200px; }

/* Members — component classes replacing former inline styles. */
.mbr-input--md { padding: 8px; border: 1px solid var(--line); border-radius: 7px; min-width: 240px; }

/* Org create — component classes replacing former inline styles. */
.orgn-card { max-width: 480px; margin: 32px auto; }
.orgn-input { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 7px; }
.orgn-cancel { margin-left: 8px; }

/* Suspended — component classes replacing former inline styles. */
.susp-card { max-width: 520px; margin: 40px auto; text-align: center; padding: 40px; }
.susp-title { margin: 14px 0 6px; }

/* Settings nav — component classes replacing former inline styles. */
.setn-navcard { padding: 6px; margin-bottom: 20px; }

/* App shell — component classes replacing former inline styles. */
.app-page--narrow { max-width: 760px; }
.side-settings-btn { padding: 6px; margin: 0; }