/* ==========================================================================
   Centaur7 tokens — THE one place a color value may be written as hex.
   Layer 1 re-skins Bitting; layer 2 holds what Bitting does not own.
   ========================================================================== */
:root {
    /* -- layer 1: Bitting overrides ------------------------------------- */
    --bitting-primary: #0b0b60;      /* ink navy: line work, actions        */
    --bitting-secondary: #0b0b60;
    --bitting-info: #9ed9df;         /* ice: the circle                     */
    --bitting-danger: #c50000;       /* text-safe red                       */
    --bitting-positive: #0b0b60;
    --bitting-negative: #ed0101;

    /* The machine half's typeface, set deliberately: the platform's native
       UI face. Same stack as Bitting's default, declared here so the choice
       is explicit and owned by this site, not inherited by accident. */
    --bitting-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Bitting's default anchor is intentionally dense for dashboards. This is
       a reading site, so its one scale input gets a browser-readable floor. */
    --bitting-md: clamp(16px, 15.2px + 0.25vw, 18px);

    /* == THE CENTAUR7 BRAND ==========================================
       Three colors, taken from the logo. Nothing else is a brand color. */
    --c7-ink: #0b0b60;               /* 1. Ink navy: the line work        */
    --c7-ice: #9ed9df;               /* 2. Ice: the circle                */
    --c7-flame: #ed0101;             /* 3. Flame: the arrow's fire        */

    /* Two fonts. Nothing else sets a family. */
    --c7-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;  /* 1. human half  */
    --c7-font-ui: var(--bitting-font-family);                          /* 2. machine half */

    /* -- derived, not brand: variants the three above require to work -- */
    --c7-canvas: #ffffff;            /* the page the brand sits on        */
    --c7-ink-flat: #000057;          /* the logo's own flat fill          */
    --c7-ice-wash: #eaf6f8;          /* ice at 12% for washes             */
    --c7-red-text: #c50000;          /* flame darkened to 4.5:1 for text  */
    --c7-measure: 68ch;              /* prose line-length cap             */
    --c7-touch-target: 2.75rem;       /* WCAG-sized interactive floor      */
    --c7-pill-radius: 100vmax;
}

/* == NOT CENTAUR7 =====================================================
   Accent colors borrowed from each featured project's own brand, used
   only to identify that project on its card and case study. They are
   deliberately outside the brand block above and are not documented in
   the style guide, which covers the Centaur7 system alone. */
:root {
    --c7-chip-sting: #fdb827;        /* Sting Coverage gold      */
    --c7-chip-dollop: #f5efe2;       /* Dollop newsprint cream   */
    --c7-chip-bitting: #6c5ce7;      /* Bitting violet           */
}

.c7-site-nav {
    display: flex;
    align-items: center;
    gap: var(--bitting-md);
    padding: var(--bitting-md) 0;
}

.c7-nav-brand {
    display: flex;
    align-items: center;
    gap: var(--bitting-qtr-md);
    color: var(--c7-ink);
    font-family: var(--c7-font-display);
    font-size: var(--bitting-lg);
    font-weight: 600;
    text-decoration: none;
}

.c7-nav-links {
    display: flex;
    align-items: center;
    gap: var(--bitting-sm);
    margin-left: auto;
}

.c7-nav-toggle {
    display: none;
    margin-left: auto;
    min-height: var(--c7-touch-target);
    padding: var(--bitting-xs) var(--bitting-sm);
    border: var(--bitting-border-width) solid var(--c7-ink);
    border-radius: var(--c7-pill-radius);
    background: var(--c7-canvas);
    color: var(--c7-ink);
    font: inherit;
    font-weight: var(--bitting-font-weight-bold);
}

.c7-nav-toggle[aria-expanded="true"] { background: var(--c7-ice-wash); }

/* Section rhythm: every section divider (a Bitting section header) sits two
   ExtraLarge steps below whatever precedes it. Pages add no ad-hoc margins. */
main .bitting-section-header {
    margin-top: calc(var(--bitting-xl) * 2);
}

/* Bootstrap paints links its own blue; every link rides the ink token. */
a { color: var(--c7-ink); }

/* Bitting's icons are fixed-color illustrations, and a few are drawn in white
   or pale grey for dark surfaces: on this canvas they read as blank. A CSS
   fill outranks the SVG presentation attribute, so wrapping a header in this
   class repaints that icon onto a brand color. Multi-color icons that already
   read well are left alone; they are part of what Bitting shows off. */
.c7-icon-ink svg path,
.c7-icon-ink svg rect,
.c7-icon-ink svg circle,
.c7-icon-ink svg polygon { fill: var(--c7-ink); }

.c7-icon-ice svg path,
.c7-icon-ice svg rect,
.c7-icon-ice svg circle,
.c7-icon-ice svg polygon { fill: var(--c7-ice); }

/* Bootstrap paints <code> pink by default; keep it on the palette. */
code {
    color: var(--c7-red-text);
    background: var(--c7-ice-wash);
    padding: 0 0.25em;
    border-radius: 4px;
}

/* Bitting's own brand spec: the wordmark is "Bitting" set bold in the system
   font, primary color, tight letter spacing (see the Bitting style guide). */
.c7-bitting-wordmark {
    font-family: var(--bitting-font-family);
    font-weight: var(--bitting-font-weight-heavy);
    font-size: var(--bitting-xl);
    letter-spacing: var(--bitting-letter-spacing-tight);
    color: var(--bitting-primary);
}

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-var.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-italic-var.woff2') format('woff2');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}

/* The page inherits the scale anchor. Without this, anything not explicitly
   sized falls back to the browser's 16px, which sits off Bitting's phi scale
   entirely and outranks a Large section title at small viewports. Every size
   on the site is now --bitting-md or a phi step from it. */
html, body {
    background: var(--c7-canvas);
    color: var(--c7-ink);
    font-family: var(--bitting-font-family);
    font-size: var(--bitting-md);
    margin: 0;
}

/* The human half: display serif for headlines and story prose. */
h1, h2, h3, .c7-prose {
    font-family: var(--c7-font-display);
    color: var(--c7-ink);
}

/* Bitting's phi scale tops out at --bitting-xl; there is no --bitting-xxl.
   h1 takes one more phi step up rather than inventing a parallel size token. */
h1 { font-size: calc(var(--bitting-xl) * var(--bitting-phi)); line-height: 1.05; margin: 0; }

/* FocusOnNavigate moves screen-reader focus to the new page heading. It is not
   an interactive focus state, so it should not paint a control-style ring. */
h1[tabindex="-1"]:focus { outline: none; }

/* Prose inherits --bitting-md from body; it only caps measure and opens
   up the leading for reading. */
.c7-prose {
    max-width: var(--c7-measure);
    line-height: 1.6;
}

.c7-colophon {
    margin-top: 0;
}

.c7-colophon section {
    line-height: 1.65;
}

.c7-colophon section > p,
.c7-colophon section > ul {
    max-width: var(--c7-measure);
}

.c7-colophon p {
    margin: 0;
}

.c7-colophon section > p:first-of-type {
    margin-top: var(--bitting-md);
}

.c7-colophon p + p {
    margin-top: var(--bitting-md);
}

.c7-plain-list {
    line-height: 1.55;
    margin: var(--bitting-md) 0 0;
    max-width: var(--c7-measure);
    padding-left: var(--bitting-lg);
}

.c7-colophon .c7-plain-list {
    margin-top: var(--bitting-md);
}

.c7-plain-list li + li {
    margin-top: var(--bitting-sm);
}

.c7-about-intro {
    margin-top: var(--bitting-xl);
}

.c7-about-portrait {
    border-radius: var(--bitting-sm);
    display: block;
    height: auto;
    width: 100%;
}

/* BittingChartHeader predates the package's viewport-aware tooltip option.
   Its question mark sits at the right edge, so anchor the bubble there too. */
.c7-tooltip-right .bitting-tooltip {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

/* EscapeClipping tooltips are fixed-position and receive their coordinates on
   hover. Before that (and after mouseout), collapse their hidden geometry so
   it cannot enlarge the page's scrollable canvas. */
.bitting-tooltip-fixed:not([style*="visibility: visible"]) {
    left: 0 !important;
    max-width: 0 !important;
    overflow: hidden;
    transform: none !important;
}

/* Brand lockup: the mark sits left of two stacked lines, the same shape as
   BittingIconLockup (icon left, superscript over subscript) with the logo
   standing in for the icon. */
.c7-lockup {
    display: flex;
    align-items: center;
    gap: var(--bitting-md);
    padding: var(--bitting-xl) 0;
}

.c7-lockup__mark {
    width: clamp(96px, 13vw, 168px);
    height: auto;
    flex: 0 0 auto;
}

.c7-lockup__lines {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    min-width: 0;
}

.c7-prose a {
    color: var(--c7-ink);
    text-decoration-color: var(--c7-flame);
    text-decoration-thickness: 2px;
}

/* The style guide adds only explanatory layout and live token specimens.
   Every visible surface and control inside it remains a Bitting component. */
.c7-style-hero { padding: var(--bitting-xl) 0 var(--bitting-lg); }

.c7-style-kicker {
    color: var(--c7-red-text);
    font-size: var(--bitting-sm);
    font-weight: var(--bitting-font-weight-bold);
}

.c7-contract-list {
    margin: var(--bitting-sm) 0 0;
    padding-left: var(--bitting-lg);
}

.c7-contract-list li + li { margin-top: var(--bitting-xs); }

.c7-copy-grid {
    display: grid;
    gap: var(--bitting-lg);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c7-copy-stack {
    display: grid;
    gap: var(--bitting-md);
}

.c7-copy-item h3 {
    font-family: var(--bitting-font-family);
    font-size: var(--bitting-md);
    font-weight: var(--bitting-font-weight-heavy);
    line-height: 1.25;
    margin: 0 0 var(--bitting-xs);
}

.c7-copy-item p {
    line-height: 1.5;
    margin: 0;
}

.c7-case-study-story > p {
    color: var(--c7-ink);
    font-family: var(--c7-font-display);
    line-height: 1.6;
    margin: var(--bitting-md) 0 0;
    max-width: var(--c7-measure);
}

.c7-swatch {
    aspect-ratio: 2 / 1;
    border: var(--bitting-border-width) solid var(--c7-ice);
    border-radius: var(--bitting-sm);
    width: 100%;
}

.c7-space-block {
    background: var(--c7-ice);
    border-radius: var(--bitting-xs);
    flex: 0 0 auto;
}

a:focus-visible, button:focus-visible {
    outline: var(--bitting-focus-width) solid var(--c7-ink);
    outline-offset: var(--bitting-focus-offset);
}

@media (max-width: 991.98px) {
    .c7-site-nav { flex-wrap: wrap; }
    .c7-nav-toggle { display: inline-flex; align-items: center; }
    .c7-nav-links {
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--bitting-xs);
        margin-left: 0;
        width: 100%;
    }
    .c7-nav-links.is-open { display: grid; }
    .c7-nav-links .bitting-pill-link { justify-content: center; text-align: center; }
}

@media (max-width: 575.98px) {
    .c7-lockup { align-items: flex-start; }
    .c7-lockup__mark { width: calc(var(--bitting-xl) * 3.5); }
    .bitting-section-header__title,
    .bitting-section-header__title .flex-centered { min-width: 0; }
    .bitting-section-header__title .flex-centered > div:last-child {
        min-width: 0;
        white-space: normal !important;
    }
    .c7-copy-grid { grid-template-columns: 1fr; }
}

.c7-skip-link {
    position: absolute;
    left: -9999px;
    background: var(--c7-ink);
    color: var(--c7-canvas);
    padding: var(--bitting-sm);
    z-index: 1000;
}
.c7-skip-link:focus { left: var(--bitting-sm); top: var(--bitting-sm); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Blazor error UI (kept from template, tokenized) */
#blazor-error-ui {
    background: var(--c7-ice-wash);
    color: var(--c7-ink);
    bottom: 0; left: 0; right: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }