:root {
    --gold: #c8a24a;
    --gold-bright: #e3c069;
    --ink: #1c1a17;
    --ink-soft: #2a2723;
    --paper: #ffffff;
    --paper-alt: #f7f4ee;
    --text: #24211d;
    --text-muted: #6b6459;
    --border: #e3ddd1;
    --up: #4ac08a;
    --down: #e2725b;
    --max-width: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: "Work Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0 0 0.6em; }

/* Blazor's FocusOnNavigate moves focus to the h1 on every navigation. It is
   not interactive, so the ring is noise; real controls keep theirs. */
h1:focus, h1:focus-visible { outline: none; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: #8a6a1f; }

code {
    font-family: Consolas, "Courier New", monospace;
    background: var(--paper-alt);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }
.container.narrow { max-width: 760px; }

/* Spot ticker */
.spot-ticker {
    /* Slim accent bar above the strip, the way the trade sites mark the top
       of the page. Gold rather than APMEX's red - it is our accent colour. */
    border-top: 4px solid var(--gold);
    background: #2c4250;
    color: #f1eee7;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.spot-ticker-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    /* Wider than the content column: four metals plus the charts link do not
       fit 1080px, and a clipped PALLADIUM reads as a bug. */
    max-width: 1400px;
}

.spot-loading { color: #9a9285; }

.spot-list {
    display: flex;
    align-items: center;
    /* Spread the four metals across the full strip instead of bunching them
       left with dead space before the charts link. gap is the floor, not the
       actual spacing, and it is what applies once the strip starts scrolling. */
    justify-content: space-between;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Four metals do not fit a phone; scroll the strip rather than wrap it.
       min-width: 0 is load-bearing - without it this flex item sizes to its
       content, overflow-x never engages, and the whole page scrolls sideways. */
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.spot-list::-webkit-scrollbar { display: none; }

.spot-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    white-space: nowrap;
}

.spot-metal { font-weight: 700; letter-spacing: 0.08em; }
.spot-price { font-weight: 600; }
.spot-change { display: inline-flex; align-items: baseline; gap: 0.25rem; }
.spot-arrow { font-size: 0.7em; }
.spot-change.is-up, .spot-percent.is-up { color: var(--up); }
.spot-change.is-down, .spot-percent.is-down { color: var(--down); }

.spot-charts {
    color: #f1eee7;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.spot-charts:hover { color: var(--gold-bright); }

/* Announcement banner */
.announcement {
    background: var(--gold);
    color: #2b2410;
}

.announcement-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    flex-wrap: wrap;
    text-align: center;
}

.announcement-text { margin: 0; font-size: 1rem; font-weight: 600; }
.announcement-sep { margin: 0 0.5rem; font-weight: 700; }

.announcement-link {
    color: #2b2410;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.announcement-link:hover { text-decoration: underline; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .spot-ticker-inner { gap: 0.75rem; }
    .spot-list { gap: 1.25rem; }
    .spot-charts { font-size: 0.7rem; }
}

/* Header */
/* White band between the gold banner and the dark hero, matching the
   ticker -> banner -> white header -> hero rhythm on the reference. */
.site-header {
    background: var(--paper);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }

/* Filled rather than outlined now the header is white: gold text on white is
   about 2.3:1 and fails AA, gold-on-ink inside the disc clears it comfortably. */
.brand-mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    background: var(--gold);
    border-radius: 50%;
    color: var(--ink);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-size: 1.35rem; font-weight: 700; }
/* Darkened gold: the --gold swatch is a background colour and only reaches
   2.3:1 as text on white. This tone is the same hue at ~4.9:1. */
.brand-tagline { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8a6a1f; }

.header-right { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.header-contact { display: flex; gap: 1.25rem; }
.header-contact a { color: var(--text); text-decoration: none; font-weight: 600; }
.header-contact a:hover { color: #8a6a1f; }

/* Account menu */
.account-menu { position: relative; }

/* Sits on the white header band, so it follows the same contrast rule as
   .header-contact and .brand-tagline: --gold as text on white is ~2.3:1 and
   fails AA, so text uses the darkened tone and gold is kept for the border. */
.account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
}

.account-trigger:hover { border-color: var(--gold); color: #8a6a1f; }
.account-trigger[aria-expanded="true"] { border-color: var(--gold); }
.account-icon { color: #8a6a1f; font-size: 0.7em; }
.account-caret { font-size: 0.7em; }

/* Sits under the panel and over everything else, so a click anywhere outside
   closes the menu without a document-level JS listener. */
.account-backdrop { position: fixed; inset: 0; z-index: 20; }

.account-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 21;
    min-width: 16rem;
    background: var(--paper);
    color: var(--text);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    text-align: left;
}

.account-panel-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
}

.account-greeting { font-weight: 700; }
.account-email { font-size: 0.8rem; color: var(--text-muted); word-break: break-all; }

.account-links { display: flex; flex-direction: column; padding: 0.35rem 0; }

.account-links a {
    color: var(--text);
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-size: 0.92rem;
}

.account-links a:hover { background: var(--paper-alt); color: #8a6a1f; }

.account-panel-foot { border-top: 1px solid var(--border); padding: 0.7rem 1rem; }
.account-panel-actions { display: flex; flex-direction: column; gap: 0.5rem; border-top: 0; }

.btn-compact { padding: 0.5rem 1rem; font-size: 0.9rem; text-align: center; }

.btn-outline-dark {
    display: inline-block;
    border: 2px solid var(--gold);
    border-radius: 2px;
    color: #8a6a1f;
    font-weight: 600;
    text-decoration: none;
}

.btn-outline-dark:hover { background: var(--paper-alt); }

.account-signout {
    background: none;
    border: 0;
    color: #8a6a1f;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
}

.account-signout:hover { text-decoration: underline; }

/* Forms */
.form-column { max-width: 26rem; }
.field { display: block; margin-bottom: 1rem; }
.field-label { display: block; font-weight: 600; margin-bottom: 0.3rem; }

.field input {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    font: inherit;
    background: var(--paper);
    color: var(--text);
}

.field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.validation-message { color: #b23b22; font-size: 0.85rem; display: block; margin-top: 0.25rem; }
.form-aside { font-size: 0.9rem; margin-top: 1rem; }

.notice {
    background: #fdf6e3;
    border-left: 3px solid var(--gold);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .header-right { gap: 0.75rem; width: 100%; justify-content: space-between; }
    .account-panel { right: auto; left: 0; }
}

/* Hero */
.hero {
    background: linear-gradient(160deg, var(--ink) 0%, var(--ink-soft) 100%);
    color: #f6f2e8;
    padding: clamp(3rem, 8vw, 5.5rem) 0;
    text-align: center;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    color: var(--gold);
    margin-bottom: 1rem;
}

.hero-sub { font-size: clamp(1.1rem, 2.5vw, 1.4rem); color: var(--gold-bright); margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.btn-gold, .btn-outline {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: 2px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--gold);
}

.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn-outline { color: var(--gold-bright); }
.btn-outline:hover { background: rgba(200, 162, 74, 0.15); }

/* Sections */
.section { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.section-alt { background: var(--paper-alt); }
.lead { font-weight: 600; font-size: 1.1rem; }
.muted { color: var(--text-muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

.card {
    background: var(--paper);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    padding: 1.5rem;
}

/* minmax(0, 1fr) rather than 1fr: a 40-char commit SHA is one unbreakable
   token, and a bare 1fr track refuses to shrink below it - which pushed the
   whole page sideways on a phone. */
dl.hours, dl.build-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 1.25rem; margin: 0; }
dl.hours dt, dl.build-info dt { font-weight: 600; }
dl.hours dd, dl.build-info dd { margin: 0; color: var(--text-muted); min-width: 0; }
dl.build-info dd code { word-break: break-all; }

/* Footer */
.site-footer { background: var(--ink); color: #cfc7b6; font-size: 0.9rem; }
.footer-inner { padding-top: 1.5rem; padding-bottom: 1.5rem; text-align: center; }
.footer-inner p { margin: 0.25rem 0; }

/* Blazor boot + error UI */
.loading-progress { position: fixed; display: block; width: 8rem; height: 8rem; top: calc(50vh - 4rem); left: calc(50vw - 4rem); }
.loading-progress circle { fill: none; stroke: #e3ddd1; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--gold); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: 600; inset: calc(50vh - 3.25rem) 0 auto 0.2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui {
    background: #ffe8b3;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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; }