/* ──────────────────────────────────────────────────────────────────
 * Sutra app-specific overrides. Brand baseline + chrome are owned by
 * @genesis/ui (tokens.css + payer-audit.css) — this file adds only the
 * portal's own layout (graph canvas, node panel, learning/doc cards).
 *
 * SPACING SCALE (8px base). Use these everywhere for a consistent vertical
 * rhythm instead of ad-hoc pixel values.
 * ────────────────────────────────────────────────────────────────── */
:root {
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px;
    --card-pad: var(--s-5);
    --stack: var(--s-5);            /* gap between top-level cards */
}

.app-main { padding: var(--s-6) var(--s-6) var(--s-7); display: flex; flex-direction: column; gap: var(--stack); }

/* vertical stack utility — content is wrapped in one div, so the wrapper (not .app-main) must own the
 * inter-card rhythm. Any page that wraps its cards in a single container gets consistent gaps. */
.stack { display: flex; flex-direction: column; gap: var(--stack); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); align-items: stretch; }
.kpi-grid > * { height: 100%; }   /* equal-height cards regardless of trend/badge */

/* ── dashboard ── */
.home-search__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--az-on-surface-variant); margin-bottom: var(--s-3); }
.home-search__row { display: flex; gap: var(--s-3); align-items: center; }
.home-search__row .az-input { flex: 1; height: 44px; font-size: 15px; }
.home-results { margin-top: var(--s-4); }
.home-results__meta { font-size: 12px; color: var(--az-on-surface-variant); margin-bottom: var(--s-2); }
.home-results__list { list-style: none; padding: 0; margin: 0; }
.home-results__list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--az-radius-md,6px); cursor: pointer; }
.home-results__list li:hover { background: rgba(77,18,157,.05); }
.home-results__title { font-size: 14px; color: var(--az-on-surface); }
.home-results__kind { font-size: 11px; color: var(--az-on-surface-variant); text-transform: uppercase; letter-spacing: .04em; }
.home-cols { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .home-cols { grid-template-columns: 1fr; } }
.breakdown { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.breakdown li { display: grid; grid-template-columns: 120px 1fr 36px; align-items: center; gap: var(--s-3); font-size: 13px; }
.breakdown__name { color: var(--az-on-surface); white-space: nowrap; }
.breakdown__bar { height: 8px; background: rgba(77,18,157,.10); border-radius: 999px; overflow: hidden; }
.breakdown__bar i { display: block; height: 100%; background: var(--az-primary, #4d129d); border-radius: 999px; }
.breakdown__count { text-align: right; color: var(--az-on-surface-variant); font-variant-numeric: tabular-nums; }

/* ── login / form primitives (from the @genesis/ui recipe) ── */
.az-login-column { width: 100%; max-width: 360px; }
.az-input {
    width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px;
    border: 1px solid var(--az-outline-variant); border-radius: var(--az-radius-md, 6px);
    background: var(--az-surface); color: var(--az-on-surface); font: 400 14px var(--az-font-body);
}
.az-input:focus { outline: 2px solid var(--az-primary); outline-offset: -1px; border-color: var(--az-primary); }
.az-banner { padding: 10px 14px; border-radius: var(--az-radius-md, 6px); font-size: 14px; margin: 0 0 12px; }
.az-banner--error { background: #fdecee; color: #7a0d18; border: 1px solid #f5c2c7; }
.az-ms-sso-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px;
    border: 1px solid var(--az-outline-variant); border-radius: var(--az-radius-md, 6px);
    background: var(--az-surface); color: var(--az-on-surface); font: 500 14px var(--az-font-body);
    text-decoration: none; cursor: pointer;
}
.az-ms-sso-btn:hover { background: var(--gn-primary-light, #ede4fa); }
.az-section-title { font-size: var(--az-body-md, 15px); font-weight: 600; color: var(--az-on-surface); margin: 0 0 var(--s-3); letter-spacing: .01em; }

/* ── mind-map ── */
.graph-wrap { position: relative; display: flex; gap: 0; }
.graph-canvas {
    flex: 1; height: calc(100vh - 190px); min-height: 480px;
    border: 1px solid var(--az-outline-variant); border-radius: var(--az-radius-md, 8px);
    background: #fff; overflow: hidden;
}
.graph-loading { display: grid; place-items: center; height: 100%; color: var(--az-on-surface-variant); font-size: 14px; }
.graph-hint { position: absolute; left: 16px; bottom: 16px; z-index: 5; background: rgba(31,4,72,.82); color: #f3ecff; font-size: 12px; padding: 6px 12px; border-radius: 999px; display: flex; align-items: center; gap: 8px; }
.graph-hint__load { background: var(--az-primary, #4d129d); color: #fff; border: 0; border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.graph-hint__load:hover { background: var(--az-primary-light, #731ee3); }
.graph-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--az-on-surface-variant); text-transform: capitalize; }
.legend-chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.node-panel {
    width: 380px; margin-left: 16px; padding: 20px; position: relative;
    height: calc(100vh - 190px); overflow-y: auto;
    border: 1px solid var(--az-outline-variant); border-radius: var(--az-radius-md, 8px); background: var(--az-surface);
}
.node-panel h2 { margin: 6px 0 4px; font-size: 20px; font-weight: 600; }
.node-panel__meta { font-size: 12px; color: var(--az-on-surface-variant); }
.node-panel__actions { margin-top: 12px; }
.node-panel__close { position: absolute; top: 12px; right: 12px; border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--az-on-surface-variant); }
.node-timeline { list-style: none; padding: 0; margin: 8px 0 0; }
.node-timeline li { font-size: 12px; color: var(--az-on-surface-variant); padding: 4px 0; border-bottom: 1px solid var(--az-outline-variant); }

/* ── learning loop + doc cards ── */
.learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-4); }
.learn-card {
    padding: var(--card-pad); border: 1px solid var(--az-outline-variant);
    border-radius: var(--az-radius-md, 8px); background: var(--az-surface);
}
/* automatic vertical rhythm INSIDE cards — kills the ad-hoc inline margins */
.learn-card > :first-child { margin-top: 0; }
.learn-card > :last-child { margin-bottom: 0; }
.learn-card h2 { margin: var(--s-5) 0 var(--s-3); }
.learn-card h2:first-child { margin-top: 0; }
.learn-card p { margin: 0 0 var(--s-3); line-height: 1.6; }
.learn-card p:last-child { margin-bottom: 0; }
.board-ok { color: #2e7d46; font-size: 14px; }
.board-bad { color: #b3261e; font-size: 14px; }
.fail-log { background: #1f0448; color: #f3ecff; padding: 12px; border-radius: 6px; font-size: 12px; overflow-x: auto; max-height: 220px; }
.fb-stream { list-style: none; padding: 0; margin: 0; }
.fb-stream li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--az-outline-variant); font-size: 13px; }
.fb-pill { font-size: 14px; }
.fb-title { color: var(--az-on-surface-variant); }

/* ── code blocks (mcp console) ── */
.ai-output { background: var(--az-surface); border: 1px solid var(--az-outline-variant); border-radius: var(--az-radius-md, 6px); padding: 16px; line-height: 1.55; }
.code-block { background: #1f0448; color: #f3ecff; padding: 16px; border-radius: 8px; font: 400 13px/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; overflow-x: auto; }
.code-wrap { position: relative; }
.copy-btn { position: absolute; top: 10px; right: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.copy-mini { border: 1px solid var(--az-outline-variant); background: var(--az-surface); border-radius: 5px; padding: 1px 8px; font-size: 11px; cursor: pointer; margin-left: 8px; }

/* MCP docs — wrapper uses .stack; tabs belong to the panel below them, so pull the next (visible) card
 * up to sit ~8px under the tabs instead of a full --stack gap. */
.mcp-doc .mcp-tabs { margin-bottom: calc(var(--s-2) - var(--stack)); }
.mcp-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: 0; }
.mcp-tabs button { border: 1px solid var(--az-outline-variant); background: var(--az-surface); color: var(--az-on-surface-variant); border-radius: 999px; padding: var(--s-2) var(--s-4); font-size: 13px; cursor: pointer; transition: background .12s, color .12s; }
.mcp-tabs button:hover { border-color: var(--az-primary, #4d129d); color: var(--az-on-surface); }
.mcp-tabs button.on { background: var(--az-primary, #4d129d); color: #fff; border-color: var(--az-primary, #4d129d); }
.mcp-facts { width: 100%; border-collapse: collapse; margin-top: var(--s-4); }
.mcp-facts td { padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--az-outline-variant); font-size: 13px; line-height: 1.5; vertical-align: top; }
.mcp-facts tr:last-child td { border-bottom: 0; }
.mcp-facts td:first-child { color: var(--az-on-surface-variant); width: 240px; white-space: nowrap; }
.mcp-steps, .mcp-trouble { line-height: 1.7; font-size: 14px; max-width: 78ch; padding-left: var(--s-5); margin: 0; }
.mcp-steps li, .mcp-trouble li { margin: var(--s-2) 0; }
.mcp-tools { width: 100%; border-collapse: collapse; font-size: 13px; }
.mcp-tools th { text-align: left; color: var(--az-on-surface-variant); font-weight: 500; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--az-outline-variant); }
.mcp-tools td { padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--az-outline-variant); vertical-align: top; line-height: 1.45; }
.mcp-tools tr:last-child td { border-bottom: 0; }
.mcp-tools tbody tr:hover td, .mcp-tools tbody tr:hover td { background: rgba(77,18,157,.03); }
code { background: rgba(77,18,157,.08); padding: 1px 6px; border-radius: 4px; font: 400 12.5px ui-monospace, Menlo, monospace; white-space: nowrap; }
.code-block { white-space: pre; }