/* ===========================================================================
   Crest — shared page chrome (header, theme toggle, footer)
   Production authority for the site chrome consumed by every Crest page:
   crest.html, invoice.html, my-invoices.html, and guides/*. The docs mirror
   is docs/design-system/styles/components.css (Hosted header + Footer band
   sections); scripts/check-crest-product-system.py enforces parity.
   Load this BEFORE the page's inline <style> so page-local token values win.
   =========================================================================== */
:root {
    --ink: #171c27;
    --muted: #5f6875;
    --quiet: #8a929c;
    --paper: #f3f4ef;
    --panel: #fffdf7;
    --line: #d8d0bf;
    --navy: #202c4c;
    --gold: #c89d48;
    --teal: #1f8a80;
    --teal-soft: #c8e5df;
    --teal-strong: #12645d;
    --panel-soft: rgba(255, 250, 240, 0.88);
    --focus-ring: rgba(31, 138, 128, 0.42);
    --grid-max: 1180px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
    --ink: #f2eee6;
    --muted: #b8c0b5;
    --quiet: #879182;
    --paper: #10130f;
    --panel: #191e18;
    --line: #344033;
    --navy: #f4e8d2;
    --gold: #d9b45a;
    --teal: #5bc3b8;
    --teal-soft: #1f4842;
    --teal-strong: #7ee0d7;
    --panel-soft: rgba(25, 30, 24, 0.9);
    --focus-ring: rgba(91, 195, 184, 0.48);
}

/* ---- Header ------------------------------------------------------------- */
/* Sticky everywhere (alinafamily standard): the bar pins to the viewport top
   and the blurred panel keeps the page legible as it scrolls underneath. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 86%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.topbar-inner {
    width: min(var(--grid-max), calc(100% - clamp(22px, 4vw, 32px)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: clamp(42px, 5vw, 50px) minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(8px, 1.3vw, 12px);
    row-gap: 0;
    min-height: 58px;
    padding: 4px 0;
}

.brand-mark {
    display: flex;
    grid-row: 1 / span 2;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: clamp(42px, 5vw, 50px);
    min-height: clamp(42px, 5vw, 50px);
    border-radius: 999px;
    text-decoration: none;
}

.brand-mark img {
    width: clamp(38px, 4.6vw, 44px);
    height: clamp(38px, 4.6vw, 44px);
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fffdf7;
}

.brand-mark:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.topbar-identity {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px clamp(8px, 1.8vw, 14px);
    min-width: 0;
    min-height: 28px;
}

.topbar-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--navy);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.topbar-title-medium,
.topbar-title-short {
    display: none;
}

/* The identity is a link home (crest-invoice.com), like the alinafamily
   avatar + name pair. Inherits the navy title color; teal on hover. */
.topbar-home {
    color: inherit;
    text-decoration: none;
}

.topbar-home:hover {
    color: var(--teal-strong);
}

.topbar-home:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Actions live in their own column spanning both rows, vertically centred
   against the brand mark (not against either text row). */
.topbar-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.topbar-nav {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 clamp(14px, 2.2vw, 26px);
    min-height: 34px;
    font-size: 14px;
    font-weight: 700;
}

.topbar-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: var(--muted);
    text-decoration: none;
}

.topbar-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    background: var(--teal);
    opacity: 0;
    transform: translateY(3px);
}

.topbar-nav a:hover,
.topbar-nav a:focus-visible,
.topbar-nav a.is-active {
    color: var(--ink);
}

.topbar-nav a:hover::after,
.topbar-nav a:focus-visible::after,
.topbar-nav a.is-active::after {
    opacity: 1;
    transform: translateY(0);
}

.topbar-nav a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Single-icon theme toggle: shows the scheme you would SWITCH TO (moon on
   light, sun on dark). Rectangular 8px control chip — the shared anatomy for
   compact header controls (upcoming language picker, currency-style selects):
   34px square, 1px --line border, --panel-soft fill. Never pill-shaped. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--quiet);
    cursor: pointer;
}

.theme-toggle:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--teal-soft) 40%, transparent);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.theme-icon-sun {
    display: none;
}

html[data-theme="dark"] .theme-icon-sun {
    display: block;
}

html[data-theme="dark"] .theme-icon-moon {
    display: none;
}

.topbar-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--teal-strong) 40%, transparent);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--teal-strong);
    font-family: var(--body);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.topbar-cta:hover,
.topbar-cta:focus-visible {
    background: color-mix(in srgb, var(--teal-soft) 60%, transparent);
}

.topbar-cta:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .topbar-nav a,
    .topbar-nav a::after,
    .topbar-home,
    .topbar-cta {
        transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
    }

    .theme-toggle {
        transition: color 0.18s ease, background 0.18s ease;
    }
}

@media (max-width: 760px) {
    .topbar-title-full {
        display: none;
    }

    .topbar-title-medium {
        display: inline;
    }
}

@media (max-width: 500px) {
    .brand-mark,
    .topbar-actions {
        grid-row: 1;
    }

    .topbar-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .topbar-nav::-webkit-scrollbar {
        display: none;
    }

    .topbar-nav a {
        flex: 0 0 auto;
    }

    .topbar-title-medium {
        display: none;
    }

    .topbar-title-short {
        display: inline;
    }

    .topbar-cta {
        padding: 0 8px;
    }
}

/* ---- Footer --------------------------------------------------------------- */
footer {
    margin-top: var(--space-5);
    background: var(--navy);
    color: var(--paper);
    font-size: 13.5px;
    line-height: 1.55;
}

.footer-inner {
    width: min(var(--grid-max), calc(100% - clamp(22px, 4vw, 32px)));
    margin: 0 auto;
    padding: var(--space-4) 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.footer-identity {
    margin: 0;
}

footer a {
    color: inherit;
    text-decoration-color: currentColor;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-weight: 700;
}

.footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
}

/* ---- Print safety: chrome never prints -------------------------------- */
@media print {
    .topbar,
    footer {
        display: none !important;
    }
}