html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Global (un-isolated) styling for Blazor's unhandled-error bar. The framework toggles this element's
   inline display on/off via blazor.web.js; it must be hidden by default. The matching rule shipped only
   in MainLayout.razor.css, which is CSS-isolated (scoped to a [b-xxxxx] attribute) and therefore never
   matched the #blazor-error-ui rendered inside CodexLayout — leaving the bar permanently visible on every
   Codex screen. Defining it here (global stylesheet) covers BOTH layouts. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- WPB dashboard ---- */
.muted { color: #6c757d; font-size: 0.9rem; }
.label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }

.page-head { display: flex; align-items: baseline; gap: 1rem; }
.page-head h1 { margin: 0; }

.banner { padding: .6rem .8rem; border-radius: 6px; margin: .5rem 0; }
.banner.error { background: #fdecea; color: #b32121; border: 1px solid #f5c6cb; }

.badge { font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; }
.badge-on { background: #e6f4ea; color: #1e7e34; }
.badge-off { background: #ececec; color: #777; }

.bot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; margin-top: 1rem; }
.bot-card { border: 1px solid #e3e3e3; border-left: 4px solid #ccc; border-radius: 8px; padding: .8rem; background: #fff; }
.bot-card.on { border-left-color: #1e7e34; }
.bot-card.off { opacity: .7; }
.bot-card-head { display: flex; justify-content: space-between; align-items: center; }
.bot-name { font-weight: 600; font-size: 1.05rem; }
.bot-meta { color: #555; font-size: .85rem; margin: .2rem 0 .5rem; }
.bot-activity { margin-bottom: .4rem; }
.bot-reason { background: #f6f8fa; border-radius: 6px; padding: .4rem .5rem; }
.bot-reason span:last-child { font-style: italic; }
.bot-updated { margin-top: .4rem; font-size: .72rem; }

.filters { display: flex; gap: .4rem; margin: .6rem 0 1rem; }
.chip { border: 1px solid #ccc; background: #fff; border-radius: 999px; padding: .25rem .8rem; cursor: pointer; font-size: .85rem; }
.chip.active { background: #1b6ec2; color: #fff; border-color: #1861ac; }

.decisions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.decision { border: 1px solid #e3e3e3; border-left: 4px solid #ccc; border-radius: 8px; padding: .6rem .8rem; background: #fff; }
.decision.guild { border-left-color: #b8860b; }
.decision.individual { border-left-color: #1b6ec2; }
.decision-top { display: flex; align-items: center; gap: .6rem; }
.scope-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .45rem; border-radius: 4px; }
.tag-guild { background: #fff3cd; color: #856404; }
.tag-indiv { background: #e7f1fb; color: #1861ac; }
.subject { font-weight: 600; }
.time { margin-left: auto; }
.decision-text { margin: .3rem 0; }
.decision-reason { font-size: .9rem; color: #444; }
.decision-reason .label { display: inline; margin-right: .3rem; }

.home-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.home-card { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: inherit;
    border: 1px solid #e3e3e3; border-radius: 8px; padding: 1rem; min-width: 260px; background: #fff; }
.home-card:hover { border-color: #1b6ec2; }
.home-card-title { font-weight: 600; font-size: 1.1rem; color: #1b6ec2; }

/* ====================================================================== */
/* STORMWIND CODEX design system (extracted from the Figma export).        */
/* Tokens: docs/codex-design-tokens.md. Used by the 5 drill-down screens.  */
/* ====================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
    /* gilt ramp */
    --cx-gilt-bright: #f0c662; --cx-gilt: #e0a526; --cx-gilt-dim: #b9892a; --cx-gilt-deep: #b07d1f;
    /* parchment / cream text, descending */
    --cx-cream: #f7e9c2; --cx-cream-hi: #ffeec2; --cx-head: #ecd9a8; --cx-body: #cdb88c;
    --cx-muted: #a98c5a; --cx-dim: #8a6f3e; --cx-dimmer: #7e6536; --cx-faint: #5e4d2c;
    /* borders, descending */
    --cx-bd: #6b5320; --cx-bd-2: #5a4519; --cx-bd-3: #4a3a1a; --cx-bd-4: #3d2f17; --cx-bd-5: #2e2410;
    /* surfaces */
    --cx-card: linear-gradient(180deg,#221a11,#191209);
    --cx-page: radial-gradient(135% 120% at 50% -12%, #2b1e14 0%, #170f08 58%, #100a06 100%);
    --cx-hero: radial-gradient(120% 160% at 12% 0%, #312413 0%, #1d1409 62%);
    /* factions + status */
    --cx-horde: #cf6b4a; --cx-horde-hi: #e08a6a; --cx-alliance: #6f9fd8; --cx-alliance-hi: #7fa8e0;
    --cx-green: #79c267; --cx-green-hi: #7fcf6b; --cx-red: #dd8a6a;
    /* provenance */
    --cx-ai: #c7a4ec; --cx-rule: #8fb0d4;
}

.codex { min-height: 100vh; background: var(--cx-page); font-family: 'EB Garamond', serif; color: var(--cx-body); padding: 0 0 48px; }
.codex-shell { max-width: 1680px; margin: 0 auto; padding: 0 32px; }
.codex a { color: inherit; text-decoration: none; }

@keyframes wpbPulse { 0%,100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 9px 2px currentColor; } }
@keyframes giltGlow { 0%,100% { box-shadow: 0 0 0 1px rgba(224,165,38,.45), 0 0 24px rgba(224,165,38,.12); } 50% { box-shadow: 0 0 0 1px rgba(224,165,38,.7), 0 0 34px rgba(224,165,38,.24); } }

.cx-display { font-family: 'Cinzel', serif; }
.cx-cream { color: var(--cx-cream); }

/* top bar (full gilt) */
.cx-topbar { display: flex; align-items: center; gap: 26px; padding: 18px 4px 16px; border-bottom: 1px solid var(--cx-bd);
    box-shadow: 0 1px 0 rgba(224,165,38,.18), 0 2px 0 rgba(224,165,38,.06); }
.cx-logo { width: 30px; height: 30px; transform: rotate(45deg); background: linear-gradient(135deg,#f0d28f,#b07d1f);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 0 16px rgba(224,165,38,.45); }
.cx-logo > i { width: 11px; height: 11px; transform: rotate(45deg); background: #160e08; display: block; }
.cx-wordmark { font: 700 18px 'Cinzel', serif; color: #f3e3b6; letter-spacing: .08em; }
.cx-vrule { width: 1px; height: 26px; background: linear-gradient(180deg,transparent,var(--cx-bd),transparent); flex: none; }

/* breadcrumb */
.cx-crumbs { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.cx-crumb { font: 500 13px 'Cinzel', serif; letter-spacing: .08em; color: var(--cx-dimmer); }
.cx-crumb.active { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid #7a5e22; border-radius: 3px;
    background: rgba(224,165,38,.1); color: #f3e3b6; font-weight: 600; }
.cx-crumb.active > .d { width: 7px; height: 7px; transform: rotate(45deg); background: var(--cx-gilt); box-shadow: 0 0 7px rgba(224,165,38,.6); }
a.cx-crumb:hover { color: var(--cx-horde-hi); }
.cx-sep { color: var(--cx-bd); font-size: 13px; }

/* search */
.cx-search { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--cx-bd-2); border-radius: 3px;
    background: linear-gradient(180deg,#221a11,#191209); width: 300px; flex: none; color: var(--cx-dimmer); font: italic 400 14px 'EB Garamond', serif; }
.cx-search .k { margin-left: auto; font: 600 10px 'Cinzel', serif; letter-spacing: .1em; color: var(--cx-faint); border: 1px solid var(--cx-bd-3); border-radius: 2px; padding: 1px 5px; }

/* interactive global character search (BotSearch) */
.cx-search-box { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    border: 1px solid var(--cx-bd-2); border-radius: 3px; background: linear-gradient(180deg,#221a11,#191209);
    width: 300px; flex: none; }
.cx-search-box:focus-within { border-color: #7a5e22; box-shadow: 0 0 0 1px rgba(224,165,38,.25); }
.cx-search-icon { color: var(--cx-gilt-dim); flex: none; }
.cx-search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--cx-body); font: 400 14px 'EB Garamond', serif; }
.cx-search-input::placeholder { color: var(--cx-dimmer); font-style: italic; }
.cx-search-box .k { font: 600 10px 'Cinzel', serif; letter-spacing: .1em; color: var(--cx-faint);
    border: 1px solid var(--cx-bd-3); border-radius: 2px; padding: 1px 5px; flex: none; }
.cx-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1100;
    background: linear-gradient(180deg,#221a11,#160f07); border: 1px solid var(--cx-bd-2); border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0,0,0,.5); overflow: hidden; }
.cx-search-empty { padding: 12px 14px; font: italic 400 13px 'EB Garamond', serif; color: var(--cx-dimmer); }
.cx-search-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-decoration: none;
    border-bottom: 1px solid var(--cx-bd-5); }
.cx-search-row:last-child { border-bottom: none; }
.cx-search-row:hover, .cx-search-row.active { background: rgba(224,165,38,.08); }
.cx-search-name { font: 600 14px 'EB Garamond', serif; color: var(--cx-head); }
.cx-search-meta { font: 400 12px 'EB Garamond', serif; color: var(--cx-dimmer); }
.cx-search-dot { width: 7px; height: 7px; border-radius: 99px; margin-left: auto; flex: none; }

/* section heads */
.cx-section { display: flex; align-items: center; gap: 14px; margin: 30px 0 16px; }
.cx-section > .d { width: 9px; height: 9px; transform: rotate(45deg); background: var(--cx-gilt); box-shadow: 0 0 8px rgba(224,165,38,.5); flex: none; }
.cx-section > h2 { font: 600 14px 'Cinzel', serif; letter-spacing: .18em; color: var(--cx-head); white-space: nowrap; margin: 0; }
.cx-section > .rule { flex: 1; height: 1px; background: linear-gradient(90deg,var(--cx-gilt-dim),rgba(185,137,42,0)); }
.cx-section > .note { font: italic 400 13px 'EB Garamond', serif; color: var(--cx-dimmer); }

/* hero band (double-framed) */
.cx-hero { position: relative; margin-top: 24px; padding: 24px 30px; border: 1px solid var(--cx-bd); border-radius: 5px; background: var(--cx-hero);
    box-shadow: inset 0 0 0 1px rgba(224,165,38,.12), inset 0 1px 0 rgba(240,210,143,.18), 0 18px 40px -22px rgba(0,0,0,.7); }
.cx-hero::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(185,137,42,.28); border-radius: 3px; pointer-events: none; }
.cx-hero-row { display: flex; align-items: center; gap: 30px; position: relative; flex-wrap: wrap; }
.cx-kicker { font: 600 11px 'Cinzel', serif; letter-spacing: .14em; color: var(--cx-dim); }
.cx-stat-big { font: 700 46px 'Cinzel', serif; color: var(--cx-cream-hi); line-height: 1; text-shadow: 0 0 20px rgba(224,165,38,.35); }

/* cards with corner ticks */
.cx-card { position: relative; background: var(--cx-card); border: 1px solid var(--cx-bd-3); border-radius: 4px; padding: 16px 17px; display: block; }
.cx-card.tick::before, .cx-card.tick::after { content: ''; position: absolute; width: 10px; height: 10px; opacity: .6; }
.cx-card.tick::before { top: 7px; left: 7px; border-top: 1px solid var(--cx-gilt-dim); border-left: 1px solid var(--cx-gilt-dim); }
.cx-card.tick::after { bottom: 7px; right: 7px; border-bottom: 1px solid var(--cx-gilt-dim); border-right: 1px solid var(--cx-gilt-dim); }
a.cx-card:hover { border-color: #7a5e22; }
.cx-card.flagship { border-color: #7a5e22; background: radial-gradient(130% 130% at 50% 0%, #34260f 0%, #1f1509 66%); animation: giltGlow 3.6s ease-in-out infinite; overflow: hidden; }
.cx-card-label { font: 600 11px 'Cinzel', serif; letter-spacing: .12em; color: var(--cx-dim); }
.cx-card-num { font: 700 44px 'Cinzel', serif; color: var(--cx-cream); line-height: 1; margin-top: 8px; text-shadow: 0 0 16px rgba(224,165,38,.18); }
.cx-card-sub { font: italic 400 13px 'EB Garamond', serif; color: var(--cx-muted); margin-top: 9px; }

.cx-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1.35fr 1fr; gap: 16px; }
.cx-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.cx-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cx-grid-main { display: grid; grid-template-columns: 1fr 544px; gap: 26px; align-items: start; margin-top: 30px; }
@media (max-width: 1340px) { .cx-grid-main { grid-template-columns: 1fr; } .cx-grid-4, .cx-grid-3, .cx-grid-2 { grid-template-columns: 1fr 1fr; } }

/* constraint/policy chips (Bot directive) + filter chips (Cohort) */
.cx-chip { font: 500 11.5px 'EB Garamond', serif; color: var(--cx-body); background: rgba(224,165,38,.08);
    border: 1px solid var(--cx-bd-4); border-radius: 99px; padding: 3px 11px; white-space: nowrap; text-decoration: none; }
a.cx-chip:hover { border-color: #7a5e22; color: var(--cx-head); }
a.cx-chip.active { background: linear-gradient(180deg,#e6b94a,#b07d1f); color: #160e08; border-color: #b07d1f; font-weight: 600; }

/* God Controls (OverrideConsole) */
.cx-god-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 1100px) { .cx-god-grid { grid-template-columns: 1fr; } }
.cx-god-cell { border: 1px solid var(--cx-bd-5); border-radius: 4px; padding: 13px 14px; background: rgba(0,0,0,.12); }
.cx-input { background: #1a130a; border: 1px solid var(--cx-bd-3); border-radius: 3px; color: var(--cx-body);
    font: 400 13px 'EB Garamond', serif; padding: 5px 9px; outline: none; }
.cx-input:focus { border-color: #7a5e22; }
.cx-btn { font: 600 11px 'Cinzel', serif; letter-spacing: .06em; padding: 6px 12px; border-radius: 3px; cursor: pointer;
    border: 1px solid var(--cx-bd-3); background: #221a11; color: var(--cx-body); }
.cx-btn:hover { border-color: #7a5e22; color: var(--cx-head); }
.cx-btn-ok { background: linear-gradient(180deg,#3a6b2f,#234a1b); color: #eaf6e4; border-color: #2f5a23; }
.cx-btn-warn { background: linear-gradient(180deg,#7a5e22,#5a4318); color: #f6ead0; border-color: #7a5e22; }
.cx-btn-danger { background: linear-gradient(180deg,#8a3220,#5e2014); color: #f6dcd4; border-color: #8a3220; }

/* cohort roster list */
.cx-roster { display: flex; flex-direction: column; gap: 6px; }
.cx-roster-row { display: flex; align-items: center; gap: 14px; padding: 11px 16px; text-decoration: none;
    background: var(--cx-card); border: 1px solid var(--cx-bd-3); border-radius: 4px; }
.cx-roster-row:hover { border-color: #7a5e22; background: rgba(224,165,38,.05); }
.cx-roster-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.cx-roster-name { font: 600 15px 'EB Garamond', serif; color: var(--cx-head); min-width: 150px; }
.cx-roster-meta { font: 400 13px 'EB Garamond', serif; color: var(--cx-muted); min-width: 200px; }
.cx-roster-zone { font: 400 13px 'EB Garamond', serif; color: var(--cx-dimmer); flex: 1; }
.cx-roster-faction { font: 600 12px 'Cinzel', serif; letter-spacing: .06em; margin-left: auto; }

/* fleet roster grid (Bots) — responsive card wall over the /api/bots snapshot */
.cx-fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 14px; }
.cx-fleet-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 15px; }
.cx-fleet-head { display: flex; align-items: center; gap: 10px; }
.cx-fleet-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.cx-fleet-dot.on { background: var(--cx-green-hi); color: var(--cx-green-hi); animation: wpbPulse 1.6s infinite; }
.cx-fleet-dot.off { background: var(--cx-dim); }
.cx-fleet-name { font: 600 16px 'EB Garamond', serif; color: var(--cx-head); }
.cx-fleet-lvl { margin-left: auto; font: 700 13px 'Cinzel', serif; color: var(--cx-gilt-bright); }
.cx-fleet-meta { font: 400 13px 'EB Garamond', serif; color: var(--cx-muted); }
.cx-fleet-act { font: 500 13.5px 'EB Garamond', serif; color: var(--cx-body); }
.cx-fleet-reason { font: italic 400 13px 'EB Garamond', serif; color: var(--cx-dimmer); }
.cx-fleet-foot { margin-top: 2px; font: 400 11.5px 'EB Garamond', serif; color: var(--cx-faint); }
.cx-fleet-state.on { color: var(--cx-green-hi); }
.cx-fleet-state.off { color: var(--cx-dim); }

/* Bot stat grid (STR/AGI/CRIT/…) */
.cx-statgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px 8px; padding-top: 12px; border-top: 1px solid var(--cx-bd-5); }

/* faction balance bar */
.cx-bar { display: flex; height: 10px; border-radius: 2px; overflow: hidden; border: 1px solid var(--cx-bd-4); margin-top: 9px; }
.cx-bar .horde { background: linear-gradient(90deg,#7a2417,#cf6b4a); }
.cx-bar .alliance { background: linear-gradient(90deg,#2f5489,#6f9fd8); }

/* level histogram */
.cx-histo { display: flex; align-items: flex-end; gap: 2px; height: 60px; }
.cx-histo > .bar { flex: 1; border-radius: 1px; min-height: 2px; }

/* zone density rows */
.cx-zone { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.cx-zone .track { flex: 1; height: 8px; border: 1px solid var(--cx-bd-4); border-radius: 2px; overflow: hidden; }
.cx-zone .fill { height: 100%; background: linear-gradient(90deg,var(--cx-gilt-deep),var(--cx-gilt)); }
.cx-zone .name { width: 120px; font: 500 13px 'EB Garamond', serif; color: var(--cx-body); }
.cx-zone .n { width: 28px; text-align: right; font: 600 13px 'Cinzel', serif; color: var(--cx-cream); }

/* Wowhead tooltip overlay readability (#P4 separate ask): the widget's default tooltip renders faint/low-
   contrast over the dark Codex theme. Force an opaque dark backing + bright text + a gilt border + high z-index
   so item/spell/quest tooltips are legible. The widget injects #wowhead-tooltip (and .wowhead-tooltip). */
#wowhead-tooltip,
.wowhead-tooltip {
    background: #120c06 !important;
    opacity: 1 !important;
    border: 1px solid var(--cx-gilt-deep, #8a6d1f) !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.75) !important;
    color: #e8ddc4 !important;
    z-index: 99999 !important;
    padding: 6px 8px !important;
}
#wowhead-tooltip th, #wowhead-tooltip td, #wowhead-tooltip b, #wowhead-tooltip span,
.wowhead-tooltip th, .wowhead-tooltip td, .wowhead-tooltip b, .wowhead-tooltip span {
    text-shadow: none !important;
}

/* decision feed */
.cx-feed { display: flex; flex-direction: column; gap: 10px; }
.cx-feed-row { position: relative; background: var(--cx-card); border: 1px solid var(--cx-bd-3); border-radius: 4px; padding: 12px 14px; }
.cx-feed-top { display: flex; align-items: center; gap: 10px; }
.cx-prov { font: 600 10px 'Cinzel', serif; letter-spacing: .1em; padding: 2px 7px; border-radius: 3px; border: 1px solid; }
.cx-prov.ai { color: var(--cx-ai); border-color: rgba(176,139,224,.45); background: rgba(176,139,224,.09); }
.cx-prov.rule { color: var(--cx-rule); border-color: rgba(143,176,212,.4); background: rgba(143,176,212,.07); }
.cx-prov.verified { color: var(--cx-gilt-bright); border-color: rgba(224,165,38,.5); background: rgba(224,165,38,.1); }
.cx-tok { margin-left: auto; font: 600 12px 'Cinzel', serif; }
.cx-feed-subject { font: 600 14px 'EB Garamond', serif; color: var(--cx-head); }
a.cx-feed-subject-link { text-decoration: none; cursor: pointer; }
a.cx-feed-subject-link:hover { color: var(--cx-gilt-bright); text-decoration: underline; }
.cx-feed-decision { font: 500 14px 'EB Garamond', serif; color: var(--cx-body); margin: 5px 0 3px; }
.cx-feed-reason { font: italic 400 13px 'EB Garamond', serif; color: var(--cx-muted); }
.cx-feed-time { font: 400 12px 'EB Garamond', serif; color: var(--cx-faint); }

/* columnar decision feed (wide screens: Decisions/Faction/Group/Guild) — the design's
   ACTOR · ACTION · REASON · SOURCE · TOKENS · TIME table. Realm's narrow rail keeps the row cards above. */
.cx-feedtable-card { padding: 6px 0; }
.cx-feedtable { display: flex; flex-direction: column; }
.cx-feedtable-head, .cx-feedtable-row { display: grid; grid-template-columns: 200px 184px 1fr 84px 64px 68px; gap: 12px; align-items: center; padding: 0 14px; }
.cx-feedtable-head { height: 30px; font: 600 10px 'Cinzel', serif; letter-spacing: .12em; color: var(--cx-dim); border-bottom: 1px solid var(--cx-bd-4); }
.cx-feedtable-head .r, .cx-feedtable-row .r { text-align: right; }
.cx-feedtable-row { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--cx-bd-5); }
.cx-feedtable-row:last-child { border-bottom: none; }
.cx-feedtable-row.ai { background: rgba(224,165,38,.045); }
.cx-ft-actor { font: 600 13.5px 'EB Garamond', serif; color: var(--cx-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.cx-ft-actor { text-decoration: none; }
a.cx-ft-actor:hover { color: var(--cx-gilt-bright); }
.cx-ft-action { font: 500 13.5px 'EB Garamond', serif; color: var(--cx-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-ft-reason { font: italic 400 13px 'EB Garamond', serif; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-ft-tok { font: 600 12px 'Cinzel', serif; color: var(--cx-dimmer); }
.cx-ft-time { font: 400 12px 'EB Garamond', serif; color: var(--cx-faint); }

/* cohort lens chips (scope grammar) */
.cx-lenses { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cx-lens { font: 600 11px 'Cinzel', serif; letter-spacing: .08em; padding: 5px 12px; border: 1px solid var(--cx-bd-3); border-radius: 3px;
    background: var(--cx-card); color: var(--cx-dim); cursor: pointer; }
.cx-lens.active { border-color: var(--cx-gilt); color: var(--cx-cream); background: rgba(224,165,38,.1); }
.cx-lens:hover { border-color: #7a5e22; }

.cx-empty { padding: 24px; text-align: center; font: italic 400 14px 'EB Garamond', serif; color: var(--cx-dimmer); border: 1px dashed var(--cx-bd-3); border-radius: 4px; }
.cx-banner-error { padding: 12px 16px; border: 1px solid #6e2f1d; border-radius: 4px; background: rgba(207,107,74,.1); color: var(--cx-horde-hi); margin: 12px 0; }

/* ====================================================================== */
/* DATA-REALITY & STATES system (design "Patterns" page). Readiness tiers, */
/* the reusable sparse-data states, and freshness pills. Used everywhere.  */
/* ====================================================================== */
@keyframes wpbShimmer { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }

/* readiness-tier chip — every panel header wears one. T = R1 (live) / R2 (derived) / R3 (staged). */
.cx-tier { font: 700 9px 'Cinzel', serif; letter-spacing: .08em; border: 1px solid; border-radius: 3px; padding: 2px 8px; white-space: nowrap; flex: none; }
.cx-tier.r1 { color: #9fe08a; border-color: #2f5a2a; background: rgba(121,194,103,.1); }
.cx-tier.r2 { color: #f0c662; border-color: #7a5e22; background: rgba(224,165,38,.1); }
.cx-tier.r3 { color: #8fb0d4; border-color: #35506e; background: rgba(143,176,212,.1); }

/* loading skeleton (shimmer) */
.cx-skel { display: flex; flex-direction: column; gap: 11px; }
.cx-skel-row { display: flex; align-items: center; gap: 10px; }
.cx-skel-bar { height: 9px; border-radius: 2px; background: linear-gradient(90deg,#241b10,#3a2c17,#241b10); background-size: 200% 100%; animation: wpbShimmer 1.6s linear infinite; }
.cx-skel-d { width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; flex: none; background: linear-gradient(90deg,#241b10,#3a2c17,#241b10); background-size: 200% 100%; animation: wpbShimmer 1.6s linear infinite; }

/* awaiting telemetry — an R3 panel whose feed hasn't started (dashed-blue hatch) */
.cx-awaiting { position: relative; min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 20px 16px;
    border: 1px dashed #35506e; border-radius: 4px; background: repeating-linear-gradient(135deg, #161d28 0 9px, #131922 9px 18px); }
.cx-awaiting .ic { width: 26px; height: 26px; transform: rotate(45deg); border: 1px dashed #35506e; display: flex; align-items: center; justify-content: center; }
.cx-awaiting .ic > span { transform: rotate(-45deg); color: #6f86a8; font-size: 13px; }
.cx-awaiting .t { font: 600 14px 'EB Garamond', serif; color: #8fb0d4; }
.cx-awaiting .n { font: italic 400 12px 'EB Garamond', serif; color: #6f86a8; line-height: 1.4; max-width: 320px; }

/* content-level error (in-panel; the browser #blazor-error-ui stays hidden) */
.cx-error-panel { position: relative; border: 1px solid #6e2f1d; border-radius: 4px; background: radial-gradient(130% 150% at 50% 0%, #2c1410 0%, #1a0d09 70%); padding: 15px 18px; }
.cx-error-panel .row { display: flex; align-items: center; gap: 12px; }
.cx-error-panel .ic { width: 30px; height: 30px; transform: rotate(45deg); border: 1px solid #a8451f; background: rgba(207,74,50,.12); display: flex; align-items: center; justify-content: center; flex: none; }
.cx-error-panel .ic > span { transform: rotate(-45deg); color: var(--cx-horde-hi); font-size: 16px; }
.cx-error-panel .t { font: 600 14.5px 'EB Garamond', serif; color: #f0b89a; }
.cx-error-panel .n { font: italic 400 12.5px 'EB Garamond', serif; color: var(--cx-muted); margin-top: 2px; }
.cx-error-panel .retry { font: 600 10px 'Cinzel', serif; letter-spacing: .06em; color: var(--cx-horde-hi); border: 1px solid #6e2f1d; border-radius: 2px; padding: 5px 11px; flex: none; cursor: pointer; background: none; }
.cx-error-panel .retry:hover { background: rgba(207,107,74,.1); }

/* freshness pills — every value declares LIVE / LAST-KNOWN / PROJECTED */
.cx-fresh { display: inline-flex; align-items: center; gap: 7px; }
.cx-fresh .dot { width: 6px; height: 6px; border-radius: 99px; flex: none; }
.cx-fresh .lab { font: 600 9px 'Cinzel', serif; letter-spacing: .08em; }
.cx-fresh.live .dot { background: var(--cx-green-hi); color: var(--cx-green-hi); animation: wpbPulse 1.6s infinite; }
.cx-fresh.live .lab { color: #9fe08a; }
.cx-fresh.last .dot { background: var(--cx-muted); }
.cx-fresh.last .lab { color: var(--cx-muted); }
.cx-fresh.proj .dot { background: var(--cx-ai); }
.cx-fresh.proj .lab { color: var(--cx-ai); }

/* cohort lens tabs (label + live count + active glow) */
.cx-lenstabs { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-lenstab { cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid var(--cx-bd-3); border-radius: 3px; background: var(--cx-card); }
.cx-lenstab:hover { filter: brightness(1.1); }
.cx-lenstab > .d { width: 8px; height: 8px; transform: rotate(45deg); flex: none; }
.cx-lenstab > .l { font: 600 12px 'Cinzel', serif; letter-spacing: .06em; color: var(--cx-muted); }
.cx-lenstab > .c { font: 700 12px 'EB Garamond', serif; color: var(--cx-dimmer); font-variant-numeric: tabular-nums; }
.cx-lenstab.active { border-color: #7a5e22; background: rgba(224,165,38,.12); box-shadow: 0 0 14px -4px rgba(224,165,38,.5); }
.cx-lenstab.active > .l { color: var(--cx-cream); }
.cx-lenstab.active > .c { color: var(--cx-gilt-bright); }

/* form primitives (Settings selector cards + labels + save row) */
.cx-flabel { font: 600 11px 'Cinzel', serif; letter-spacing: .1em; color: var(--cx-dim); }
.cx-optrow { display: flex; gap: 8px; margin-top: 9px; }
.cx-opt { flex: 1; cursor: pointer; padding: 11px 14px; border: 1px solid var(--cx-bd-3); border-radius: 3px; background: rgba(0,0,0,.18); text-align: center; }
.cx-opt:hover { filter: brightness(1.1); }
.cx-opt.active { border-color: #7a5e22; background: rgba(224,165,38,.12); }
.cx-opt .nm { font: 600 14px 'EB Garamond', serif; color: var(--cx-body); }
.cx-opt.active .nm { color: var(--cx-cream-hi); }
.cx-opt .sub { font: italic 400 11px 'EB Garamond', serif; color: var(--cx-dimmer); margin-top: 2px; }
.cx-saverow { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--cx-bd-5); }
.cx-btn-save { cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 22px; border-radius: 3px; border: 1px solid #7a5e22;
    background: linear-gradient(180deg,#e6b94a,#b07d1f); color: #160e08; font: 700 13px 'Cinzel', serif; letter-spacing: .08em; box-shadow: 0 2px 10px -2px rgba(224,165,38,.5); }
.cx-btn-save:hover { filter: brightness(1.07); }
.cx-spin { width: 13px; height: 13px; border-radius: 99px; border: 2px solid rgba(22,14,8,.35); border-top-color: #160e08; animation: wpbSpin .7s linear infinite; flex: none; }
@keyframes wpbSpin { to { transform: rotate(360deg); } }
.cx-saved { display: flex; align-items: center; gap: 7px; font: 600 13px 'EB Garamond', serif; color: var(--cx-green-hi); }
.cx-savefail { display: flex; align-items: center; gap: 7px; font: 600 13px 'EB Garamond', serif; color: var(--cx-horde-hi); }

/* cohort roster table (CHARACTER · CLASS · ROLE · MEMBERSHIP · DOING NOW · ▸) */
.cx-rt { position: relative; background: linear-gradient(180deg,#211910,#171008); border: 1px solid var(--cx-bd-3); border-radius: 4px; overflow: hidden; }
.cx-rt-head, .cx-rt-row { display: grid; grid-template-columns: 1.25fr 1fr 104px 1.2fr 1.4fr 18px; gap: 14px; padding: 11px 20px; align-items: center; }
.cx-rt-head { border-bottom: 1px solid var(--cx-bd-4); background: rgba(224,165,38,.04); }
.cx-rt-head span { font: 600 10px 'Cinzel', serif; letter-spacing: .12em; color: var(--cx-dim); }
.cx-rt-row { border-bottom: 1px solid #241b10; text-decoration: none; }
.cx-rt-row:last-child { border-bottom: none; }
.cx-rt-row:hover { background: rgba(224,165,38,.04); }
.cx-role { font: 600 10px 'Cinzel', serif; letter-spacing: .04em; border: 1px solid; border-radius: 2px; padding: 2px 8px; white-space: nowrap; }
.cx-mtag { font: 600 9px 'Cinzel', serif; letter-spacing: .04em; border: 1px solid; border-radius: 2px; padding: 2px 7px; white-space: nowrap; }
.cx-lenscap { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 18px; border: 1px solid var(--cx-bd-3); border-radius: 3px; background: rgba(224,165,38,.04); }

/* gameplan chat (Discuss) */
@keyframes wpbBlink { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.cx-blink { width: 6px; height: 6px; border-radius: 99px; background: var(--cx-ai); animation: wpbBlink 1s infinite; flex: none; }
.cx-btn-send { cursor: pointer; padding: 9px 18px; border-radius: 3px; border: 1px solid #4a3a5a; background: linear-gradient(180deg,#b08be0,#7a55b0); color: #1a1024; font: 700 12px 'Cinzel', serif; letter-spacing: .06em; box-shadow: 0 2px 10px -2px rgba(176,139,224,.5); flex: none; }
.cx-btn-send:hover { filter: brightness(1.08); }
.cx-btn-send:disabled { opacity: .5; cursor: default; }
button.cx-chip { cursor: pointer; font-family: inherit; }
button.cx-chip:disabled { opacity: .5; cursor: default; }
button.cx-lens { cursor: pointer; font-family: 'Cinzel', serif; }