/* =================================================================
   WAR BONDS STORE

   A region-D panel. The shell (.hud-panel, .hp-header, .hp-body) is
   hudPanels.css; only the store's own contents are here.

   Every size in this file respects the 12px floor in
   docs/TYPE-LEGIBILITY.md rule 1 — this is a price list, and a price
   the player has to squint at is the worst possible thing to shrink.
   ================================================================= */

.st-balance {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: var(--radius-md);
}

.st-balance-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

/* The largest bond figure in the game, so the one that most needed to stop
   being gold — it is a count of bonds held, not of gold held. The gold that
   remains in this panel is chrome (the rule on the notice, a selected pack's
   border, the footer link), not a quantity, and stays. */
.st-balance-value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-bond-paper, #ece7da);
    line-height: 1.1;
}

.st-balance-note {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* The unavailability notice.
   Styled as information, deliberately NOT as an error or a warning: red or
   amber here would read as "something went wrong with your purchase", which is
   precisely the impression a storefront must never give when the truth is
   "this is not built yet". Neutral surface, gold rule, plain sentence. */
.st-closed {
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    background: var(--color-primary-800);
    border-left: 3px solid var(--color-accent-gold);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.st-closed strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-primary);
    font-weight: var(--font-semibold);
}

.st-packs {
    display: grid;
    gap: var(--space-2);
}

/* A pack is a button because it is selectable, and selection is the one real
   interaction on this screen. It carries no purchase affordance — no cart, no
   "Buy" — so nothing here promises a transaction. */
.st-pack {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name  price"
        "bonds days"
        "bonus days";
    gap: 2px var(--space-3);
    width: 100%;
    padding: var(--space-3);
    text-align: left;
    background: var(--color-primary-700);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.st-pack:hover {
    background: var(--color-primary-600);
    border-color: rgba(212, 175, 55, 0.45);
}

.st-pack-selected {
    border-color: var(--color-accent-gold);
    background: var(--color-primary-600);
}

.st-pack-name {
    grid-area: name;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.st-pack-bonds {
    grid-area: bonds;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    /* Paper, not gold. Gold is the gold resource, and a bond count drawn in it
       reads as a gold count — the confusion the bond palette ends. */
    color: var(--color-bond-paper, #ece7da);
}

.st-pack-bonds em {
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    color: var(--color-text-secondary);
}

.st-pack-bonus {
    grid-area: bonus;
    font-size: var(--text-xs);
    color: var(--color-accent-green-light);
}

.st-pack-bonus-none {
    color: var(--color-text-muted);
}

.st-pack-price {
    grid-area: price;
    align-self: start;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    text-align: right;
}

.st-pack-days {
    grid-area: days;
    align-self: end;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-align: right;
}

.st-foot {
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.st-foot a {
    color: var(--color-accent-gold);
    text-decoration: underline;
}

@media (max-width: 640px) {
    /* The price column stops earning its width on a phone: the pack collapses
       to a single column so the price sits under the name rather than being
       squeezed against it. */
    .st-pack {
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "bonds"
            "bonus"
            "price"
            "days";
    }

    .st-pack-price,
    .st-pack-days {
        text-align: left;
    }
}

/* --- test-mode checkout ------------------------------------------------
   Only present while STORE_MOCK_CHECKOUT is set on the server. */

.st-test {
    border-left-color: var(--color-accent-cyan);
}

.st-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px var(--space-3);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-primary-700);
    border-radius: var(--radius-md);
}

.st-summary-name {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.st-summary-bonds {
    font-size: var(--text-xs);
    color: var(--color-bond-paper, #ece7da);
}

.st-summary-price {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.st-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.st-field-wide { grid-column: 1 / -1; }

.st-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.st-field span {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

/* Readonly, and it should look it: a field the player cannot edit must not
   invite them to try. Default cursor, no focus ring, dimmed surface. */
.st-field input {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background: var(--color-primary-800);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: var(--radius-sm);
    cursor: default;
    pointer-events: none;
}

.st-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

.st-actions .btn { flex: 1 1 auto; }

.st-receipt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    margin-bottom: var(--space-4);
    text-align: center;
    background: rgba(5, 150, 105, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: var(--radius-md);
}

.st-receipt-tick {
    font-size: 2rem;
    line-height: 1;
    color: var(--color-accent-green-light);
}

.st-receipt strong {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
}

.st-receipt-line {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.st-receipt-bonds {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-bond-paper, #ece7da);
}

.st-receipt-note {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .st-summary-price { grid-row: auto; grid-column: 1; }
}

/* --- The cancellation-right waiver -------------------------------------
   A condition of sale, so it is drawn as a condition: bond-paper stock, the
   same treatment the storefront already uses to say "this is a document".
   It is not a disclaimer set in grey at the foot of the page — the buyer has
   to read it to know what the tick means, and the Pay button does not enable
   until they tick it. */
.st-waiver {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--color-bond-paper);
    color: var(--color-bond-ink);
    border: 1px solid var(--color-bond-ink);
    border-radius: var(--radius-sm);
}

.st-waiver-title {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-bond-ink);
}

.st-waiver-line {
    font-size: var(--text-xs);
    line-height: 1.5;
    margin: 0 0 var(--space-2);
}

.st-waiver-line:last-of-type {
    margin-bottom: var(--space-3);
}

/* The consent itself reads as the instrument it is: ruled off, bolder than
   the explanation above it, and a 44px row so the whole line is the target. */
.st-waiver-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: var(--touch-target);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-bond-ink);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1.45;
    cursor: pointer;
}

.st-waiver-consent input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--color-bond-ink);
}

.st-waiver-pending {
    margin-top: var(--space-4);
    padding: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
}