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

.runrow { display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
.runstep { flex:1; min-width:120px; position:relative; padding:14px 12px; text-align:center; }
.runstep::before { content:""; position:absolute; top:25px; left:-50%; width:100%; height:1.5px; background:var(--rule); }
.runstep:first-child::before { display:none; }
.runstep__n { width:22px;height:22px;border-radius:50%;margin:0 auto 8px;background:var(--cream-100);border:1.5px solid var(--rule-strong);display:flex;align-items:center;justify-content:center;position:relative;z-index:2; }
.runstep__n [data-lucide] { width:11px;height:11px;color:var(--fg-2); }
.runstep__t { font-size:11.5px; color:var(--fg-2); line-height:1.3; }

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

/* Intents — 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); }

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