/* ============================================================================
   finperiti — Petrol & Teal design system
   Palette, type and rules per docs/brand.html (Colour System v1.0).
   One petrol anchor, one jewel-teal spark; distinctiveness from restraint.
   ========================================================================== */
:root {
    /* Core palette */
    --ink: #08191C;          /* dark backgrounds & primary body text */
    --petrol: #0E4F5E;       /* primary brand — buttons, headings, surfaces */
    --petrol-400: #3C7D8A;
    --petrol-600: #0C4351;
    --petrol-700: #0A3742;
    --petrol-50: #E7EEF0;
    --teal: #0E9F90;         /* the spark — accents, charts (needs dark text) */
    --teal-deep: #0B7E72;    /* AA-on-white teal — links, labels, badges */
    --teal-50: #E2F7F3;
    --steel: #5B6B7C;        /* secondary text, borders, muted UI */
    --mist: #EAF0F1;         /* light surfaces, section bands */
    --bright: #5DE6D2;       /* dark-background accent only (eyebrows on ink) */
    --evergreen: #1C7A5B;    /* success only */
    --coral: #E0A48A;        /* caution only */

    /* Semantic tokens */
    --bg: #F4F8F8;
    --panel: #ffffff;
    --ink-soft: #2b3f43;
    --muted: #5B6B7C;
    --line: #DCE6E7;
    --line-soft: #E8EEEF;
    --brand: var(--petrol);
    --brand-ink: var(--petrol-700);
    --accent: var(--teal);
    --link: var(--teal-deep);
    --ok: #1C7A5B;
    --warn: #8a3f22;         /* readable coral-brown for caution text */
    --warn-fill: rgba(224, 164, 138, .22);
    --error: #C0271D;

    /* Signature gradients — hero panels & dividers only, never button fills */
    --grad-brand: linear-gradient(135deg, #0E4F5E 0%, #0B7E72 100%);
    --grad-spectrum: linear-gradient(90deg, #08191C, #0E4F5E, #0E9F90, #5DE6D2);

    /* Radii */
    --r-chip: 8px;
    --r-control: 10px;
    --r-card: 16px;
    --r-pill: 999px;
    --radius: 16px;

    --shadow-sm: 0 1px 2px rgba(8,25,28,.05), 0 1px 3px rgba(8,25,28,.05);
    --shadow-md: 0 10px 28px rgba(8,25,28,.10);
    --shadow-lg: 0 28px 64px rgba(8,25,28,.16);
    --maxw: 1120px;

    --font-sans: "Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--petrol-700); }
h1, h2, h3, h4 { line-height: 1.2; }
code, .mono { font-family: var(--font-mono); }
::selection { background: rgba(14,159,144,.22); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
/* FocusOnNavigate (Routes.razor) moves focus to the page <h1> after each
   navigation for screen-reader users; hide the visible ring on that
   programmatic focus. Real interactive elements keep their focus outline. */
h1:focus, h1:focus-visible { outline: none; }
hr { border: none; height: 1px; background: var(--line); margin: 1.5rem 0; }

/* ============================ Buttons ============================ */
.btn, .btn-primary {
    display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
    border: 1px solid var(--petrol); background: var(--petrol); color: #fff;
    padding: .62rem 1.2rem; border-radius: var(--r-control); font: inherit; font-weight: 700;
    letter-spacing: -.005em; cursor: pointer; text-decoration: none;
    transition: transform .06s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
    box-shadow: var(--shadow-sm);
}
.btn:hover, .btn-primary:hover { background: var(--petrol-700); border-color: var(--petrol-700); color: #fff; box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
.btn-secondary { background: #fff; color: var(--petrol); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--petrol-50); color: var(--petrol-700); border-color: var(--petrol-400); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn-ghost:hover { background: rgba(14,79,94,.08); color: var(--petrol); box-shadow: none; }
.btn-danger { background: #fff; color: var(--error); border-color: #f0c9c6; box-shadow: var(--shadow-sm); }
.btn-danger:hover { background: #fcefee; color: var(--error); }
.btn-lg { padding: .85rem 1.6rem; font-size: 1.02rem; border-radius: 12px; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-block { width: 100%; }

/* ============================ Brand lockup ============================ */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 800; color: var(--petrol); letter-spacing: -.02em; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-tag {
    font-family: var(--font-mono); font-size: .64rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: .18em; color: var(--steel); border-left: 1px solid var(--line);
    padding-left: .6rem; align-self: center; white-space: nowrap;
}

/* The portal's brand lockup (logo + gradient product chip + descriptor) on marketing surfaces. */
.mk-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.mk-brand .brandtop { display: flex; align-items: center; gap: .55rem; }
.mk-brand .chip { font-weight: 800; color: #fff; background: var(--grad-brand); border-radius: 7px; padding: 3px 9px; font-size: 1rem; letter-spacing: -.01em; line-height: 1; box-shadow: 0 3px 10px rgba(11,126,114,.25); }
.mk-brand .pt { font-family: var(--font-mono); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; color: var(--steel); }
.mk-footer .mk-brand .pt { color: #7e9698; }

/* ============================ Marketing ============================ */
.mk { min-height: 100vh; display: flex; flex-direction: column; }
.mk-nav {
    position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px);
    background: rgba(244,248,248,.82); border-bottom: 1px solid var(--line);
}
.mk-nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-spectrum); }
.mk-nav-inner { max-width: var(--maxw); margin: 0 auto; padding: .8rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
.mk-links { display: flex; gap: 1.5rem; margin-left: auto; align-items: center; }
.mk-links a { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .92rem; }
.mk-links a:hover { color: var(--petrol); }
.mk-links .btn { color: #fff; }
.mk-links .btn-secondary { color: var(--petrol); }

/* Mobile menu (CSS-only): a visually-hidden checkbox toggles the links; the hamburger label is the
   visible control. No JS — works under static server rendering. Hidden on desktop. */
.mk-nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mk-burger { display: none; margin-left: auto; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px; border-radius: var(--r-control); cursor: pointer; }
.mk-burger span { display: block; height: 2px; border-radius: 2px; background: var(--petrol); transition: transform .15s ease, opacity .15s ease; }
.mk-nav-toggle:focus-visible ~ .mk-burger { outline: 2px solid var(--teal); outline-offset: 2px; }

@media (max-width: 768px) {
    .mk-nav-inner { flex-wrap: wrap; gap: .5rem 1rem; }
    .mk-burger { display: flex; }
    .mk-links { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .15rem; margin-left: 0; padding-top: .4rem; }
    .mk-nav-toggle:checked ~ .mk-links { display: flex; }
    .mk-links a { padding: .75rem .35rem; border-bottom: 1px solid var(--line-soft); }
    .mk-links .btn, .mk-links .btn-secondary { width: 100%; justify-content: center; padding: .75rem 1rem !important; border-bottom: none; margin-top: .35rem; }
    .mk-nav-toggle:checked ~ .mk-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mk-nav-toggle:checked ~ .mk-burger span:nth-child(2) { opacity: 0; }
    .mk-nav-toggle:checked ~ .mk-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Hero — light treatment used by sub-pages */
.hero { max-width: var(--maxw); margin: 0 auto; padding: 4.5rem 1.5rem 3rem; text-align: center; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); margin: 0 0 1.1rem; letter-spacing: -.03em; font-weight: 800; color: var(--petrol); }
.hero h1 .grad {
    background: linear-gradient(120deg, var(--teal-deep), var(--teal));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 1.18rem; color: var(--steel); max-width: 700px; margin: 0 auto 2rem; }
.hero .cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.trustline { color: var(--steel); font-size: .85rem; margin-top: 1.6rem; }
.trustline .mono, .trustline code { color: var(--teal-deep); }

/* Eyebrow — mono label, no pill (per brand book) */
.eyebrow {
    display: inline-block; font-family: var(--font-mono); text-transform: uppercase;
    letter-spacing: .2em; font-size: .72rem; font-weight: 500; color: var(--teal-deep);
    margin-bottom: 1.1rem;
}

/* Hero band — the signature petrol→teal gradient panel (home) */
.hero-band { position: relative; overflow: hidden; background: var(--grad-brand); color: #fff; isolation: isolate; }
.hero-band::before {
    content: ""; position: absolute; z-index: -1; top: -40%; right: -10%; width: 60%; height: 160%;
    background: radial-gradient(closest-side, rgba(93,230,210,.35), transparent 70%);
    pointer-events: none;
}
.hero-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad-spectrum); }
.hero-band .hero { padding-top: 5rem; padding-bottom: 4.5rem; }
.hero-band h1 { color: #fff; }
.hero-band h1 .grad { color: var(--bright); -webkit-text-fill-color: var(--bright); background: none; }
.hero-band .eyebrow { color: var(--bright); }
.hero-band p.lead { color: #d6ebe9; }
.hero-band .trustline { color: rgba(214,235,233,.85); }
.hero-band .trustline .mono, .hero-band .trustline code { color: var(--bright); }
.hero-band .btn { background: #fff; color: var(--petrol); border-color: #fff; }
.hero-band .btn:hover { background: var(--mist); color: var(--petrol-700); border-color: var(--mist); }
.hero-band .btn-secondary { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); box-shadow: none; }
.hero-band .btn-secondary:hover { background: rgba(255,255,255,.16); color: #fff; border-color: #fff; }

.section { max-width: var(--maxw); margin: 0 auto; padding: 4rem 1.5rem; }
.section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); text-align: center; margin: 0 0 .65rem; letter-spacing: -.02em; color: var(--petrol); font-weight: 800; }
.section .sub { text-align: center; color: var(--steel); max-width: 640px; margin: 0 auto 2.75rem; font-size: 1.05rem; }
.section.alt { background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: none; }
.section.alt > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } }

.feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #BFE0DB; }
.feature .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; color: var(--teal-deep); background: linear-gradient(135deg, var(--teal-50), var(--petrol-50)); margin-bottom: 1.05rem; }
.feature h3 { margin: 0 0 .45rem; font-size: 1.12rem; color: var(--petrol); }
.feature p { margin: 0; color: var(--steel); font-size: .95rem; }
.feature code { background: var(--mist); padding: .05rem .35rem; border-radius: 5px; font-size: .85em; color: var(--petrol-700); }

.steps { counter-reset: step; max-width: 720px; margin: 0 auto; }
.step { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.4rem; }
.step .n { counter-increment: step; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--petrol); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--font-mono); box-shadow: var(--shadow-sm); }
.step .n::before { content: counter(step); }
.step h3 { margin: .35rem 0 .25rem; font-size: 1.08rem; color: var(--petrol); }
.step p { margin: 0; color: var(--steel); }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 880px) { .price-grid { grid-template-columns: 1fr; } }
.price { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.85rem; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.price.popular { border-color: var(--teal); box-shadow: var(--shadow-md); position: relative; }
.price.popular::after { content: "Best value"; position: absolute; top: -.7rem; right: 1.25rem; background: var(--teal-deep); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .7rem; border-radius: var(--r-pill); }
.price h3 { margin: 0 0 .25rem; color: var(--petrol); }
.price .amount { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-mono); color: var(--ink); }
.price .per { color: var(--steel); font-size: .9rem; }
.price ul { list-style: none; padding: 0; margin: 1.3rem 0; color: var(--ink-soft); font-size: .93rem; }
.price ul li { padding: .4rem 0; border-bottom: 1px dashed var(--line); }
.price ul li::before { content: "\2713"; color: var(--evergreen); font-weight: 800; margin-right: .55rem; }   /* ✓ escaped per ai/encoding-safe-glyphs.md */
.price .foot { margin-top: auto; }

.mk-footer { margin-top: auto; background: var(--ink); color: #9fb3b5; padding: 3rem 1.5rem 2.5rem; position: relative; }
.mk-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-spectrum); }
.mk-footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; }
.mk-footer a { color: #b9cccd; text-decoration: none; display: block; padding: .22rem 0; font-size: .9rem; }
.mk-footer a:hover { color: #fff; }
.mk-footer h4 { color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; font-family: var(--font-mono); font-weight: 500; margin: 0 0 .7rem; }
.mk-footer .brand-tag { color: #7e9698; border-color: rgba(255,255,255,.18); }

/* ============================ App shell ============================ */
/* Regime workspace shell per docs/iq-regime-workspace.html: dark teal sidebar with the brand lockup,
   the regime selector, an icon nav with counts, and a breadcrumb topbar with the credit chip. */
:root {
    --side: #0b232a; --side-2: #0d2a30; --side-line: #1c3d43; --side-text: #bcd3d3; --side-muted: #6f8c8e;
}
.app { display: grid; grid-template-columns: 255px 1fr; min-height: 100vh; }
.side { background: var(--side); border-right: 1px solid var(--side-line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: visible; }
.sidetop { display: flex; align-items: flex-start; justify-content: space-between; }
.sidebody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.side .nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.side .burger { display: none; margin: 1rem 1rem 0 0; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px; border-radius: var(--r-control); cursor: pointer; }
.side .burger span { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .15s ease, opacity .15s ease; }
.side .nav-toggle:focus-visible ~ .sidetop .burger { outline: 2px solid var(--teal); outline-offset: 2px; }
.side .brand { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.3rem 1.25rem 1rem; }
.side .brandtop { display: flex; align-items: center; gap: .7rem; }
.side .brand .logo { height: 42px; width: auto; display: block; }
.side .brand .chip { font-weight: 800; color: #fff; background: var(--grad-brand); border-radius: 8px; padding: 4px 11px; font-size: 1.15rem; letter-spacing: -.01em; line-height: 1; box-shadow: 0 3px 10px rgba(11,126,114,.35); }
.side .brand .pt { font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--side-muted); }

/* Regime selector — a CSS-only <details> dropdown; each option is a form-post to /app/switch-regime. */
.regsel { position: relative; margin: .2rem .9rem .35rem; }
.regselbtn { width: 100%; display: flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.05); border: 1px solid var(--side-line); border-radius: 11px; padding: .6rem .7rem; cursor: pointer; text-align: left; font-family: inherit; list-style: none; }
.regselbtn::-webkit-details-marker { display: none; }
.regselbtn:hover { border-color: var(--teal-deep); background: rgba(255,255,255,.08); }
.rdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rdot.s-live { background: var(--evergreen); } .rdot.s-beta { background: var(--teal); } .rdot.s-plan { background: var(--steel); }
.regselbtn .rinfo, .regopt .rinfo { min-width: 0; flex: 1; }
.regselbtn .rinfo b { color: #fff; font-size: .92rem; font-weight: 700; display: block; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regselbtn .rinfo span { color: var(--side-muted); font-size: .72rem; font-family: var(--font-mono); }
.regselbtn .chev { color: var(--side-muted); transition: transform .2s; flex: none; }
.regsel[open] .regselbtn .chev { transform: rotate(180deg); }
.regmenu { position: absolute; left: 0; right: 0; top: calc(100% - .2rem); background: var(--side-2); border: 1px solid var(--side-line); border-radius: 12px; box-shadow: 0 24px 54px rgba(0,0,0,.55); padding: .4rem; z-index: 50; }
.regmenu .mhd { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--side-muted); padding: .35rem .5rem .3rem; }
.regmenu form { margin: 0; }
.regopt { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 9px; cursor: pointer; width: 100%; border: 0; background: none; text-align: left; font-family: inherit; }
.regopt:hover { background: rgba(255,255,255,.06); }
.regopt.sel { background: rgba(14,159,144,.16); }
.regopt b { color: #fff; font-size: .86rem; display: block; line-height: 1.15; font-weight: 700; }
.regopt .rinfo span { color: var(--side-muted); font-size: .7rem; font-family: var(--font-mono); }
.regopt .mstat { margin-left: auto; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; }
.mstat.s-live { background: rgba(28,122,91,.2); color: #7fe0bb; } .mstat.s-beta { background: rgba(14,159,144,.2); color: var(--bright); } .mstat.s-plan { background: rgba(255,255,255,.08); color: var(--side-muted); }

.navgroup { padding: .4rem .75rem; overflow-y: auto; display: flex; flex-direction: column; gap: .1rem; }
.navgroup .navitem { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 9px; color: var(--side-text); font-size: .9rem; font-weight: 500; cursor: pointer; text-decoration: none; position: relative; }
.navgroup .navitem .ic { width: 17px; height: 17px; flex: none; opacity: .85; stroke: currentColor; fill: none; stroke-width: 1.7; }
.navgroup .navitem:hover { background: rgba(255,255,255,.05); color: #fff; }
.navgroup .navitem.active { background: rgba(14,159,144,.16); color: #fff; }
.navgroup .navitem.active::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--bright); }
.navgroup .navitem .count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; background: rgba(255,255,255,.08); color: var(--side-text); padding: 1px 6px; border-radius: 999px; }
.navgroup .navrow { display: flex; gap: .2rem; padding-bottom: .55rem; border-bottom: 1px solid var(--side-line); margin-bottom: .5rem; }
.navgroup .navrow .navitem { flex: 1; min-width: 0; padding: .5rem .45rem; font-size: .82rem; gap: .45rem; }
.navgroup .navsep { border: none; height: 1px; background: var(--side-line); margin: .15rem .4rem .5rem; }
.navgroup.navbottom { overflow-y: visible; padding-bottom: 0; }
.side .spacer, .sidebody .spacer { flex: 1; }
.userchip { display: flex; align-items: center; gap: .65rem; margin: .5rem .9rem 1rem; padding: .55rem .6rem; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid var(--side-line); }
.userchip .av { width: 30px; height: 30px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .78rem; flex: none; }
.userchip .who { min-width: 0; }
.userchip .who b { color: #fff; font-size: .82rem; display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip .who span { color: var(--side-muted); font-size: .72rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .8rem; padding: .7rem 1.4rem; }
.crumb { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muted); min-width: 0; }
.crumb b { color: var(--petrol); font-weight: 700; }
.crumb .sep { opacity: .5; }
.topbar .grow { flex: 1; }
.creditchip { display: inline-flex; align-items: center; gap: .45rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .85rem; font-size: .82rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; text-decoration: none; }
.creditchip:hover { border-color: var(--teal-deep); color: var(--ink-soft); }
.creditchip .dia { color: var(--teal-deep); font-size: .7rem; }
.creditchip b { color: var(--petrol); font-family: var(--font-mono); }
.creditchip.low { border-color: #f0c9c6; background: #fdecea; }
.creditchip.low b { color: var(--error); }
.content { padding: 1.6rem 1.6rem 3rem; max-width: 1120px; width: 100%; margin: 0 auto; }
/* Mobile: the sidebar collapses to a compact sticky brand bar; the burger (CSS-only checkbox
   disclosure, same mechanism as the marketing nav) reveals the regime selector + nav + user chip. */
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .side { position: sticky; top: 0; z-index: 60; height: auto; border-right: 0; border-bottom: 1px solid var(--side-line); }
    .side .burger { display: flex; }
    .side .brand { padding: .7rem 1rem .7rem; gap: .25rem; }
    .side .brand .logo { height: 30px; }
    .side .brand .chip { font-size: .95rem; padding: 3px 9px; }
    .sidebody { display: none; padding-bottom: .5rem; }
    .side .nav-toggle:checked ~ .sidebody { display: flex; }
    .side .nav-toggle:checked ~ .sidetop .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .side .nav-toggle:checked ~ .sidetop .burger span:nth-child(2) { opacity: 0; }
    .side .nav-toggle:checked ~ .sidetop .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .sidebody .spacer { display: none; }
    .topbar { position: static; flex-wrap: wrap; row-gap: .5rem; padding: .75rem 1rem; }
    .org-switch select { max-width: 160px; }
    .content { padding: 1.1rem; }
}
@media (max-width: 480px) {
    .kpis { grid-template-columns: 1fr; }
    .reghero { padding: 1.2rem 1.2rem; }
    .content { padding: .85rem; }
}
/* KPI tiles grouped into one card: tiles lose their own chrome and share hairline dividers. */
.kpicard { padding: .5rem .6rem; }
.kpicard .kpis { margin-bottom: 0; gap: 0; }
.kpicard .kpi, .kpicard a.kpi { border: 0; box-shadow: none; border-radius: 10px; padding: .7rem 1.1rem; }
.kpicard .kpi + .kpi { border-left: 1px solid var(--line-soft); border-radius: 0 10px 10px 0; }
.kpicard a.kpi:hover { background: var(--mist); }
@media (max-width: 760px) {
    .kpicard .kpi + .kpi { border-left: 0; }
    .kpicard .kpi:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

/* Import cards: two side-by-side cards whose inner rows (title / note / controls / button) align via
   subgrid, so the "Choose file" buttons sit on one line even though only the XML card has a selector.
   @supports-guarded — older browsers get the plain stacked card. */
.import-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.15rem; }
@media (max-width: 880px) { .import-cards { grid-template-columns: 1fr; } }
@supports (grid-template-rows: subgrid) {
    .import-cards { grid-template-rows: auto auto auto auto; }
    .import-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: .8rem; align-content: start; margin-bottom: 0; }
    .import-card .card-head { margin-bottom: 0; }
    .import-card .upload { justify-self: start; align-self: end; }
}
.ifield { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--steel); }
.ifield select { font-size: .92rem; }

.org-switch select { border: 1px solid var(--line); border-radius: var(--r-control); padding: .42rem .65rem; font: inherit; background: #fff; max-width: 220px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; font-family: var(--font-mono); }

/* ============================ Workspace page chrome ============================ */
/* Page header, regime hero, KPI tiles, capability pipeline and jurisdiction cards — the building
   blocks of the regime workspace pages (see docs/iq-regime-workspace.html). */
.pagehead { margin-bottom: 1.2rem; }
.pagehead .eyebrow { margin-bottom: 0; font-size: 11px; letter-spacing: .18em; }
.pagehead h1 { font-size: 1.6rem; color: var(--petrol); font-weight: 800; margin: .15rem 0 .25rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pagehead h1 .mono { font-size: .8rem; color: var(--teal-deep); background: var(--mist); padding: 2px 7px; border-radius: 6px; }
.pagehead p { color: var(--ink-soft); margin: 0; max-width: 75ch; }

.reghero { background: var(--grad-brand); color: #fff; border-radius: 16px; padding: 1.6rem 1.7rem; display: flex; justify-content: space-between; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; box-shadow: var(--shadow-md); margin-bottom: 1.4rem; }
.reghero .eyebrow { color: var(--bright); margin-bottom: 0; }
.reghero h1 { color: #fff; font-size: 1.75rem; margin: .25rem 0 .45rem; display: flex; align-items: center; gap: .7rem; font-weight: 800; flex-wrap: wrap; }
.reghero p { color: #dbeceb; margin: 0; font-size: .88rem; }
.reghero > div { min-width: 0; flex: 1; }
.hbadge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; background: rgba(255,255,255,.2); color: #fff; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.rh-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.reghero .btn { background: #fff; color: var(--petrol); border-color: #fff; font-weight: 700; }
.reghero .btn:hover { background: var(--mist); color: var(--petrol-700); border-color: var(--mist); }
.reghero .btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.65); }
.reghero .btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 1.4rem; }
@media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; } }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); }
.kpi .lab { font-size: .78rem; color: var(--muted); font-weight: 600; }
.kpi .num { font-size: 1.9rem; font-weight: 800; color: var(--petrol); letter-spacing: -.02em; margin: .25rem 0 .1rem; line-height: 1; font-family: var(--font-mono); }
.kpi .sub { font-size: .76rem; color: var(--muted); }
.kpi .sub .warn { color: var(--warn); font-weight: 700; }
a.kpi { text-decoration: none; display: block; }
a.kpi:hover { border-color: var(--teal-deep); }

.cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; } }

/* Status badges (mono pills with a leading dot) */
.badge.b-live, .badge.b-beta, .badge.b-plan, .badge.b-due, .badge.b-info { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; font-weight: 500; white-space: nowrap; }
.badge.b-live::before, .badge.b-beta::before, .badge.b-plan::before, .badge.b-due::before, .badge.b-info::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none !important; }
.b-live { background: rgba(28,122,91,.15); color: var(--evergreen); }
.b-beta { background: rgba(14,159,144,.16); color: var(--teal-deep); }
.b-plan { background: rgba(91,107,124,.16); color: var(--steel); }
.b-due { background: var(--warn-fill); color: var(--warn); }
.b-info { background: rgba(14,79,94,.14); color: var(--petrol); }
.pill { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; background: var(--mist); color: var(--ink-soft); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.flag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: #fff; background: var(--steel); border-radius: 5px; padding: 1px 6px; letter-spacing: .03em; }
.flag.eu { background: var(--petrol); } .flag.us { background: #3B4551; }

.rowlist { display: flex; flex-direction: column; }
.lrow { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
.lrow:last-child { border-bottom: 0; }
.lrow .rt { min-width: 0; }
.lrow .rt b { font-size: .9rem; font-weight: 700; color: var(--ink); display: block; }
.lrow .rt span { font-size: .78rem; color: var(--muted); }
.lrow .rr { margin-left: auto; text-align: right; white-space: nowrap; }
.lrow .rr .d { font-size: .78rem; color: var(--muted); display: block; margin-top: 3px; }

/* Capability pipeline (the five value stages) */
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
@media (max-width: 900px) { .pipeline { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 560px) { .pipeline { grid-template-columns: 1fr; } }
.stage { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.05rem; box-shadow: var(--shadow-sm); }
a.stage { display: block; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
a.stage:hover { transform: translateY(-2px); border-color: var(--teal-deep); box-shadow: var(--shadow-md); color: inherit; }
/* \203A = › (single right angle quote). Escaped per ai/encoding-safe-glyphs.md: raw non-ASCII in a
   stylesheet renders as mojibake ("›") for any consumer that decodes the file as Windows-1252. */
.stage:not(:last-child)::after { content: "\203A"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); color: var(--teal-deep); font-size: 1.5rem; font-weight: 700; z-index: 1; }
@media (max-width: 900px) { .stage::after { display: none; } }
.stage .snum { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: .12em; }
.stage .sicon { width: 36px; height: 36px; border-radius: 11px; background: var(--mist); display: grid; place-items: center; color: var(--petrol); margin: .45rem 0 .55rem; }
.stage .sicon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.stage .stitle { font-weight: 800; font-size: .95rem; color: var(--petrol); display: flex; align-items: center; gap: .4rem; }
.stage .stext { font-size: .78rem; color: var(--ink-soft); margin: .3rem 0 .7rem; line-height: 1.45; }
.stage .capmark-on { color: var(--evergreen); font-weight: 800; }
.stage .capmark-off { color: var(--muted); }
.scost { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--teal-deep); background: rgba(14,159,144,.1); padding: 2px 8px; border-radius: 6px; display: inline-block; }
.scost.free { color: var(--evergreen); background: rgba(28,122,91,.12); }
.scost.soon { color: var(--steel); background: rgba(91,107,124,.12); text-transform: uppercase; letter-spacing: .04em; }

/* A not-yet-available stage: muted and inert (no hover lift, no pointer). */
.stage-soon { opacity: .62; cursor: default; }
.stage-soon .sicon { color: var(--steel); }

/* Subgrid: every stage shares the same five internal rows (number / icon / title / text / cost), so
   the cards line up regardless of how long each stage's text runs. Older browsers keep the plain
   block layout above. */
@supports (grid-template-rows: subgrid) {
    .pipeline { grid-template-rows: repeat(5, auto); }
    /* .pipeline .stage out-specifies a.stage's display:block so anchors stay on the subgrid. */
    .pipeline .stage { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: .35rem; align-content: start; }
    .stage .sicon { margin: .15rem 0; }
    .stage .stext { margin: 0 0 .35rem; }
    .stage .scost { justify-self: start; align-self: end; }
}

/* Jurisdiction cards */
.jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.jcard { border: 1px solid var(--line); border-radius: 11px; padding: .7rem .8rem; background: var(--panel); }
.jcard .jn { font-weight: 700; font-size: .88rem; color: var(--ink); display: flex; align-items: center; gap: .4rem; }
.jcard .jp { font-size: .72rem; color: var(--muted); font-family: var(--font-mono); margin-top: .35rem; display: flex; align-items: center; gap: .35rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--evergreen); } .dot.warn { background: var(--coral); } .dot.beta { background: var(--teal); }

.callout { font-size: .8rem; color: var(--muted); margin-top: 1.4rem; padding: .8rem 1rem; border-left: 3px solid var(--teal-deep); background: var(--mist); border-radius: 0 10px 10px 0; }

/* ============================ Generic UI ============================ */
h1 { font-size: 1.7rem; margin: .1rem 0 .4rem; letter-spacing: -.02em; color: var(--ink); font-weight: 800; }
h2 { font-size: 1.12rem; margin: 0 0 .75rem; color: var(--petrol); font-weight: 700; }
h3 { color: var(--petrol); }
.note { color: var(--steel); font-size: .92rem; }
.muted { color: var(--steel); }
.lead { font-size: 1.05rem; color: var(--steel); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.35rem 1.45rem; margin-bottom: 1.15rem; box-shadow: var(--shadow-sm); }
.card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.card-head h2 { margin: 0; }
.card-head .actions { margin-left: auto; display: flex; gap: .5rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.15rem 1.3rem; box-shadow: var(--shadow-sm); }
.stat .v { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-mono); color: var(--petrol); }
.stat .l { color: var(--steel); font-size: .85rem; }

.field { display: grid; grid-template-columns: 260px 1fr; gap: .75rem; align-items: center; margin-bottom: .6rem; }
.field > label { color: var(--steel); font-size: .9rem; }
.field .q { color: var(--teal-deep); font-weight: 700; margin-right: .35rem; font-family: var(--font-mono); }
.field.invalid input, .field.invalid select,
.grouptable td.invalid input, .grouptable td.invalid select { border-color: var(--error); background: #fdecea; }
.field-hint { color: var(--error); font-size: .8rem; margin-top: .3rem; }
@media (max-width: 620px) { .field { grid-template-columns: 1fr; } }

.info { position: relative; display: inline-flex; margin-left: .4rem; color: var(--teal-deep); cursor: help; font-size: .85rem; user-select: none; }
.info .tip { position: absolute; left: 1.2rem; top: -.3rem; z-index: 20; width: max-content; max-width: min(520px, 88vw); white-space: pre-wrap; background: var(--ink); color: #eaf1f1; padding: .55rem .7rem; border-radius: var(--r-chip); font-size: .8rem; line-height: 1.45; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: opacity .12s ease; font-family: var(--font-mono); tab-size: 2; }
.info:hover .tip, .info:focus .tip { opacity: 1; visibility: visible; }

input, select, textarea {
    width: 100%; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: var(--r-control);
    font: inherit; background: #fff; color: var(--ink);
}
input[type=checkbox] { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
label.inline { display: inline-flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--steel); }

.upload { cursor: pointer; }
.upload input[hidden] { display: none; }
.status-error { color: var(--error); font-weight: 600; }
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; align-items: center; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .58rem .65rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
th { color: var(--steel); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
tbody tr:hover { background: #f3f9f8; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

.grouptable { margin: .5rem 0 1rem; overflow-x: auto; }
.grouptable h3 { font-size: .95rem; margin: .3rem 0; color: var(--teal-deep); }
.grouptable th { font-size: .78rem; vertical-align: bottom; }
.grouptable td.rowlabel { color: var(--steel); font-size: .82rem; white-space: nowrap; }
.grouptable input, .grouptable select { min-width: 90px; }

/* On small screens, let a wide data table scroll within its card instead of overflowing the page.
   Scoped to direct children of .card so the editor's repeating .grouptable (which scrolls itself and
   hosts the field tooltips) is unaffected. */
@media (max-width: 700px) {
    .card > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .62rem; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; }
.badge-ok { background: rgba(28,122,91,.13); color: var(--evergreen); }
.badge-err { background: rgba(192,39,29,.1); color: var(--error); }
.badge-warn { background: var(--warn-fill); color: var(--warn); }
.badge-info { background: rgba(14,79,94,.1); color: var(--petrol); }
.badge-muted { background: var(--mist); color: var(--steel); }

.validation { font-size: .92rem; }
.validation .ok, .ok { color: var(--evergreen); font-weight: 600; }
.msg { display: flex; gap: .5rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.msg .tag { font-weight: 700; min-width: 3rem; font-family: var(--font-mono); }
.msg.error .tag { color: var(--error); }
.msg.warn .tag { color: var(--warn); }

pre.xml { background: var(--ink); color: #cfe1de; padding: 1rem; border-radius: var(--r-card); overflow: auto; font-size: .82rem; max-height: 460px; font-family: var(--font-mono); }
.delta-up { color: var(--evergreen); font-weight: 600; } .delta-down { color: var(--error); font-weight: 600; }
.swing td { background: rgba(224,164,138,.14); }

.empty { text-align: center; padding: 3rem 1rem; color: var(--steel); }
.empty .ic { font-size: 2.5rem; opacity: .5; margin-bottom: .5rem; }

.alert { padding: .85rem 1.05rem; border-radius: var(--r-control); margin-bottom: 1rem; font-size: .92rem; }
.alert-error { background: #fcefee; color: var(--error); border: 1px solid #f3cdc9; }
.alert-ok { background: #e9f7f0; color: var(--evergreen); border: 1px solid #bfe6d2; }
.alert-info { background: var(--teal-50); color: var(--petrol-700); border: 1px solid #c4e6e0; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--warn-fill); color: var(--warn); padding: .75rem 1rem; box-shadow: 0 -1px 4px rgba(0,0,0,.1); z-index: 100; }
#blazor-error-ui .reload, #blazor-error-ui .dismiss { cursor: pointer; margin-left: 1rem; text-decoration: underline; }