/* Gold and silver rate pages — the metal-specific presentation only.
   The generic components these pages also use (.tool-header,
   .tool-link, .cms-sidebar, .search-input, the FAQ accordion) are
   core components in style.css; they were defined here until the design
   system was extracted, which meant they existed only while a rate
   module was enabled and owned the route. */

/* Rate cards grid */
.rate-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

/* A grid item's min-width defaults to `auto`, which resolves to its MIN-CONTENT
   width -- so a track written as `1fr` refuses to shrink below the widest thing
   inside it. The rate tables set `white-space: nowrap` on every figure cell
   (.data-table--figures, style.css), giving them a min-content width of ~570px;
   the track grew to match, and the whole PAGE scrolled sideways on a phone
   while the .data-table-scroll wrapper sat at its content width and never
   scrolled at all.

   `min-width: 0` lets the track shrink to the column, which puts the overflow
   back where the wrapper can take it. Same fix .main-content already carries
   (style.css) for the page column one level up. */
.rate-cards-grid > * {
    min-width: 0;
}

/* Rate rows */

/* ------------------------------------------------------------------
   Stacked ruled tables (gold city pages)

   Scoped as a modifier on purpose: .rate-cards-grid and .rate-row above
   are shared with the silver city page, which still renders one price
   per row as a list of separate pills. Neither is touched here, and the
   gold page no longer uses .rate-row at all -- it renders real <table>
   markup, so the column labels are genuine <th scope="col"> headers
   rather than styled divs.

   Layout: one full-width column -- the weight table, then history BELOW
   it -- each carrying Gram/Date + 24K + 22K + 18K.
   ------------------------------------------------------------------ */
.rate-cards-grid--stack {
    grid-template-columns: 1fr;
}

/* A heading plus its table, with NO card around them. .rate-card's padding,
   border and shadow used to wrap a table that already draws its own border, so
   each table sat in a box inside a box and lost width to two sets of padding.
   The grid above still supplies the gap between blocks. */
.rate-cards-grid--stack .rate-block h2 {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
    color: var(--gray-900);
    font-weight: 600;
}

/* The rate tables are .data-table (style.css) — one shared component, so
   nothing about borders, header band, zebra or surface is re-declared here.
   This block previously carried its own copy of all of it, painted from the
   GREY ramp: the header band used --gray-50, which is the page background
   itself, so on the paper themes the header was invisible and the cells had
   no surface behind them at all.

   What stays below is only what is genuinely rate-specific. */

/* Where the non-24K figures come from. Quiet, but present. */
.rate-note {
    margin: 0.75rem 0 2rem;
    color: var(--gray-600);
    font-size: 0.8125rem;
}

/* Four karat columns on a narrow phone: tighten the cell padding rather than
   letting the table scroll immediately. It still scrolls past that (the
   .data-table-scroll wrapper) — the TABLE scrolls, never the page.
   That last sentence was aspirational until the `min-width: 0` above: the
   padding here narrows the table, but it cannot narrow it to 360px, and
   without a shrinkable track the page scrolled instead of the wrapper. */
@media (max-width: 480px) {
    .rate-cards-grid--stack .data-table th,
    .rate-cards-grid--stack .data-table td {
        padding: 0.75rem 0.625rem;
    }
}

/* The city picker's search field is .search-input, a core component
   (the rate_city_picker in rate-component.php emits it, this sheet
   styles it). The .search-results / .search-result-item dropdown that
   used to be declared here was dead weight: that markup is emitted only
   by the homepage and the calculators index, neither of which loads this
   stylesheet. The picker's own results are .ratecard-options, above. */

/* The city link grid is core's .pairs-grid with the .pairs-grid--dense
   modifier, opted into from the markup. */

/* Collapsed tail of the city list. The hub shows the popular cities, then the
   first few rows of the rest; everything beyond that lives in this native
   <details>. No JS involved: the app's CSP is script-src 'self' 'nonce-…', so a
   scripted button would need a nonce and would stop working with JS disabled.
   Both labels ship in the DOM and the [open] rules below swap them. */
.city-expander {
    margin-bottom: 2rem;
    text-align: center;   /* centres the inline-flex summary */
}

.city-expander summary {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    color: var(--gray-800);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, color 0.15s ease;
    /* Drop the default disclosure triangle so it reads as a button. */
    list-style: none;
}

.city-expander summary::-webkit-details-marker {
    display: none;
}

.city-expander summary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* State-aware label: one of the two spans is always hidden. */
.city-expander[open] .city-expander-more,
.city-expander:not([open]) .city-expander-less {
    display: none;
}

.city-expander[open] summary {
    margin-bottom: 1rem;
}

/* The cards themselves stay left-aligned; only the control is centred. */
.city-expander .pairs-grid {
    text-align: left;
    margin-top: 1rem;
}

/* Article typography comes from style.css (.about-section); section headings
   from .tools-section. No generic .main-content element reset — it used to
   hijack the shared article styles on every page that loaded this file. */
.main-content .section-description {
    color: var(--gray-700);
    margin-bottom: 1.5rem;
    margin-top: 0;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0 2rem 0;
}

.feature {
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
}

.feature h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
}

.feature p {
    color: var(--gray-700);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

/* The FAQ accordion is a core component (style.css). This file carried a
   byte-identical copy of all 16 of its rules. */

/* Responsive adjustments */
@media (max-width: 1200px) {

    .rate-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {

    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* .content-with-sidebar / .sidebar collapse handled centrally in style.css */
    .rate-cards-grid {
        grid-template-columns: 1fr;
    }

}

/* ==================================================================
   Rate card + city picker — THIS module's component styling.
   Emitted by the module's own rate-component.php; the styling travels
   with the emitter, per the ownership rule.
   ================================================================== */

/* --- Rate card ---------------------------------------------------
   A toolbar (date · metal · city picker) above a row of price tiles.

   Emitted by this module's rate-component.php (the prefixed rate_card
   and city-picker helpers), so this module styles it. The component has
   crossed the core/module boundary twice: it moved INTO core's
   stylesheet when core's helpers emitted it, and moved back here when
   the helpers became module code — both times following the same rule,
   whoever emits the markup owns the styling.

   The picker deliberately reuses the core .search-input field
   rather than restyling a second search control.
   ------------------------------------------------------------------ */
.ratecard {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
    overflow: visible;
}

.ratecard-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0.5rem 0.5rem 0 0;
}

.ratecard-date {
    font-size: 0.875rem;
    color: var(--gray-700);
    font-weight: 500;
}

/* Metal segments. The inactive-but-unavailable state is a <span>, not a
   link — see the note in rate_card(). */
.ratecard-metals {
    display: flex;
    gap: 0.25rem;
    padding: 0.1875rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
}

.ratecard-metal {
    padding: 0.3125rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ratecard-metal:hover {
    background: var(--gray-50);
    color: var(--primary);
}

.ratecard-metal.is-active {
    background: var(--primary);
    color: white;
}

.ratecard-metal.is-disabled {
    color: var(--gray-500);
    cursor: default;
}

/* City trigger — a link to the hub until city-switcher.js upgrades it. */
.ratecard-picker {
    position: relative;
    margin-left: auto;
}

.ratecard-city {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.875rem;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ratecard-city:hover {
    border-color: var(--gray-500);
}

.ratecard-city:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-glow);
}

.ratecard-city-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--gray-500);
    transition: transform 0.15s ease;
}

.ratecard-city[aria-expanded="true"] .ratecard-city-caret {
    transform: rotate(180deg);
}

.ratecard-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: min(20rem, calc(100vw - 2.5rem));
    padding: 0.875rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
}

.ratecard-panel[hidden] {
    display: none;
}

/* Inline shape (the hubs): the panel is the page content, not an overlay, and
   the search field is full width — searching for a city IS the hub's primary
   action, so it keeps the affordance the old hand-rolled box had. */
.ratecard-picker--inline {
    position: static;
    margin-left: 0;
}

.ratecard-picker--inline .ratecard-panel {
    position: static;
    width: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.ratecard-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.9375rem;
}

.ratecard-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

.ratecard-chips:empty {
    margin-top: 0;
}

.ratecard-chip {
    padding: 0.3125rem 0.625rem;
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    font-size: 0.8125rem;
    color: var(--gray-700);
    text-decoration: none;
    transition: all 0.15s ease;
}

.ratecard-chip:hover,
.ratecard-chip:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    outline: none;
}

.ratecard-options {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    max-height: 15rem;
    overflow-y: auto;
}

.ratecard-options:empty {
    margin-top: 0;
}

.ratecard-option {
    display: block;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    color: var(--gray-800);
    text-decoration: none;
}

.ratecard-option:hover,
.ratecard-option:focus-visible {
    background: var(--gray-50);
    color: var(--primary);
    outline: none;
}

.ratecard-option.is-current {
    font-weight: 600;
    color: var(--primary);
}

.ratecard-empty,
.ratecard-status {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* The status line is for screen readers; the visible "no matches" copy is
   .ratecard-empty. Clipped rather than display:none so it is still read. */
.ratecard-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Tiles. The lead tile (24K gold, per-gram silver) is tinted; the rest sit
   beside it, separated by rules rather than gaps so the row reads as one
   card. */
.ratecard-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.ratecard-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    border-right: 1px solid var(--gray-200);
}

.ratecard-tile:last-child {
    border-right: none;
}

/* --primary-tint (accent mixed 8% into white), NOT --primary-light: the latter
   is a lighter BLUE, so the accent-coloured figure sat blue-on-blue and the
   label and per-10g note went to grey-on-blue. The tint is the token meant for
   an accented surface, and it follows the active theme the same way. */
.ratecard-tile--lead {
    background: var(--primary-tint);
}

.ratecard-tile-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ratecard-tile-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.15;
}

.ratecard-tile--lead .ratecard-tile-value {
    color: var(--primary);
}

.ratecard-tile-unit {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
    margin-left: 0.25rem;
}

.ratecard-tile-note {
    font-size: 0.8125rem;
    color: var(--gray-600);
}

@media (max-width: 640px) {
    .ratecard-toolbar {
        gap: 0.5rem;
    }

    .ratecard-picker {
        margin-left: 0;
        width: 100%;
    }

    .ratecard-city {
        width: 100%;
        justify-content: space-between;
    }

    .ratecard-panel {
        width: 100%;
    }

    .ratecard-tiles {
        grid-template-columns: 1fr;
    }

    .ratecard-tile {
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
    }

    .ratecard-tile:last-child {
        border-bottom: none;
    }

    .ratecard-tile-value {
        font-size: 1.5rem;
    }
}

/* --- Rate delta --------------------------------------------------
   Emitted by the rate_card in rate-component.php, so this module styles it,
   for the same reason as the rate card above. */
.rate-change {
    font-size: 0.8125rem;
    margin-left: 0.25rem;
}

.rate-change--up {
    color: var(--rate-up);
}

.rate-change--down {
    color: var(--rate-down);
}

.rate-change--flat {
    color: var(--gray-500);
}