/**
 * The shield — purchase surface and own-shield indicator. War 2050 v1.
 *
 * v1 is TIME REMAINING, not art. `docs/SHIELD-DEMO-PATH.md` §1 defers the
 * sci-fi dome to v2 on the grounds that the thing worth judging first is the
 * purchase decision, so everything here is type and layout rather than effect.
 *
 * Two visual jobs, and the second is the one that matters:
 *
 *   1. The indicator says how long you are safe for, in region A, next to the
 *      rest of your own state.
 *   2. **The forfeiture is the loudest thing in a tier row that has one.** A
 *      30-day cap with no refunds means a player can lose paid-for hours by
 *      confirming, and this is the only place that is said before it happens.
 *
 * Tokens only, per `docs/TYPE-LEGIBILITY.md` — nothing below `--text-xs`,
 * which is the 12px floor and not the small end of a ramp. The expedition
 * panel once shipped 9.3px labels against that same document.
 *
 * Colour: the forfeiture uses the danger red that already means loss in this
 * HUD rather than a new hue, and the shield's own state uses cyan, which is
 * already the "your own progress" colour on the rank bar. Deliberately NOT
 * gold — gold is the War Bond and resource colour, and a shield is not a
 * currency. Deliberately not green: green is a resource too, and
 * `BASE_RELATION`'s researched decision keeps the red/green axis out of
 * anything load-bearing because red-green deficiency is the common form.
 */

/* =================================================================
   REGION A — THE OWN-SHIELD INDICATOR

   Sits under the life bar inside .top-left-hud. It is the sixth block in
   region A and `--region-a-reserve` accounts for it; see the note there,
   because that token is region D's ceiling.

   Hidden entirely when there is no shield. A permanent "NOT SHIELDED"
   chip would be chrome reporting an absence, in the region that is
   tightest on a phone.
   ================================================================= */

.shield-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 4px 8px;
    background: rgba(26, 39, 68, 0.95);
    border: 1px solid rgba(6, 182, 212, 0.45);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
    /* Tappable, and it has to look it — the life bar's lesson, where the only
       route to a panel was a div with cursor:pointer and nothing a phone
       player could see. */
    cursor: pointer;
    text-align: left;
    /* 44px hit area (WCAG 2.5.5, HUD-LAYOUT.md §7) without the block itself
       growing to 44px and taking that height out of region A. */
    position: relative;
}

.shield-indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: max(100%, var(--touch-target));
    transform: translateY(-50%);
    z-index: 0;
}

.shield-indicator:hover {
    border-color: var(--color-accent-cyan);
}

.shield-indicator:focus-visible {
    outline: 2px solid var(--color-accent-cyan);
    outline-offset: 2px;
}

.si-label {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    line-height: 1.2;
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    color: var(--color-accent-cyan);
}

.si-time {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    line-height: 1.2;
    color: var(--color-text-primary);
    /* The number a player checks at a glance before deciding whether to log
       off. It carries its own separation because region A floats over a canvas
       whose brightness changes as they pan. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

/* =================================================================
   REGION D — THE PANEL
   The .hud-panel shell supplies geometry; only contents live here.
   ================================================================= */

/* ---------- What you hold now ---------- */

.sh-held {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    margin: 4px 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-primary-700);
    background: rgba(26, 39, 68, 0.5);
}

.sh-held-active {
    border-color: rgba(6, 182, 212, 0.45);
    background: rgba(6, 182, 212, 0.08);
}

.sh-held-label {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    line-height: 1.2;
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.sh-held-active .sh-held-label {
    color: var(--color-accent-cyan);
}

.sh-held-time {
    font-family: var(--font-display);
    /* The largest number on the surface, because it is the one the player
       opened it to read. */
    font-size: var(--text-2xl);
    line-height: 1.1;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.sh-held-note {
    margin: 2px 0 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* ---------- The ladder ---------- */

.sh-tiers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 4px;
}

.sh-tier {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    background: rgba(26, 39, 68, 0.35);
}

/* A term that would lose the player time is marked on the row itself, not
   only inside its ledger — the row is what gets scanned, and the ledger is
   what gets read after the row has been chosen. */
.sh-tier-forfeits {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(220, 38, 38, 0.06);
}

.sh-tier-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.sh-tier-span {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
}

.sh-tier-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-base);
    color: var(--color-accent-gold);
}

.sh-tier-unit {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    line-height: 1.2;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* A term the server priced but did not preview. Styled as a stated refusal
   rather than as a disabled row with no explanation: the player can see a
   price and needs to know why they cannot spend it. */
.sh-tier-blocked {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--color-accent-orange);
}

.sh-buy {
    width: 100%;
    min-height: var(--touch-target);
}

.sh-buy[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- The server's preview ---------- */

.sh-preview {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 8px;
    border-radius: 4px;
    background: rgba(10, 15, 26, 0.6);
}

.sh-preview-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--text-xs);
    line-height: 1.35;
}

.sh-preview-line dt {
    color: var(--color-text-muted);
    min-width: 0;
}

.sh-preview-line dd {
    margin: 0;
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
    color: var(--color-text-secondary);
}

/* THE LINE THIS WHOLE SURFACE EXISTS FOR. A 30-day cap plus no refunds means
   the overflow is destroyed on purchase, and before this existed it was
   destroyed silently. It gets the danger colour and the weight. */
.sh-preview-lost dt,
.sh-preview-lost dd {
    color: var(--color-accent-red-light);
    font-weight: var(--font-bold);
}

.sh-lost-bonds {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    color: var(--color-accent-red-light);
}

.sh-preview-total dt,
.sh-preview-total dd {
    color: var(--color-text-primary);
    font-weight: var(--font-semibold);
}

/* ---------- The standing conditions ---------- */

.sh-terms {
    margin: 12px 4px 4px;
    padding-top: 10px;
    border-top: 1px solid var(--color-primary-700);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.sh-terms strong {
    color: var(--color-accent-red-light);
}

/* =================================================================
   THE CONFIRM DIALOG'S SECOND LEDGER
   rentConfirm.js renders these; the bond ledger's own rules are in
   components.css. Only the grant block is new.
   ================================================================= */

.rc-grant {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-primary-700);
}

.rc-grant-losing {
    /* The dialog is the last screen before the charge. A ledger that is about
       to destroy paid-for time does not look like the one above it. */
    border-top-color: rgba(239, 68, 68, 0.45);
}

.rc-forfeit dt,
.rc-forfeit .rc-forfeit-value {
    color: var(--color-accent-red-light);
    font-weight: var(--font-bold);
}

.rc-forfeit-bonds {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    color: var(--color-accent-red-light);
}

.rc-forfeit-warn {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-accent-red-light);
}

.rc-forfeit-warn strong {
    color: var(--color-text-primary);
}

/* =================================================================
   REDUCED MOTION (HUD-LAYOUT.md §7)
   Nothing here animates, so there is nothing to switch off — stated
   rather than silently absent, since three of four HUD stylesheets
   shipped motion with no opt-out and that is why the rule exists.
   ================================================================= */

/* =================================================================
   THE CONFIRM DIALOG'S REARRANGEMENT BLOCK

   `rentConfirm.js` renders this for any caller passing `rearrange`.
   The roles surface is the first, and the rule it exists for is
   `LOBE-ROLES-DECISIONS-01.md` §5: show a rearrangement rather than a
   selection, and show what is given up.

   Styled here rather than in roles.css because the block belongs to
   the DIALOG, which is shared — the next thing that rearranges a fixed
   set gets it for free, and a copy in roles.css would be a second
   place for the same rules to live.
   ================================================================= */

.rc-rearrange {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-primary-700);
}

.rc-rearrange-head {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    line-height: 1.2;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.rc-moves {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rc-move {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr auto 1fr auto;
    gap: 8px;
    align-items: baseline;
    padding: 6px 8px;
    border-radius: 4px;
    border-left: 2px solid transparent;
    font-size: var(--text-xs);
    line-height: 1.35;
}

/* Changed and held, both positively marked. A held row dimmed toward
   invisibility would be the opposite of the point: the untouched third of the
   base is part of what the player is agreeing to, and TYPE-LEGIBILITY rule 2
   forbids opacity as a state channel anyway. */
.rc-move.is-changed {
    border-left-color: var(--color-accent-gold);
    background: rgba(212, 175, 55, 0.08);
}

.rc-move.is-held {
    border-left-color: var(--color-primary-600);
    background: rgba(26, 39, 68, 0.35);
}

.rc-move-label {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* The role being given up on this row. Struck, so which of the two is leaving
   needs no caption. */
.rc-move-from {
    font-family: var(--font-heading);
    text-decoration: line-through;
    color: var(--color-text-muted);
    min-width: 0;
}

.rc-move.is-held .rc-move-from {
    text-decoration: none;
    color: var(--color-text-secondary);
}

.rc-move-arrow {
    color: var(--color-text-muted);
}

.rc-move-to {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    min-width: 0;
}

/* What moving this row costs. The forfeiture colour, because it is the same
   class of statement — a real loss that nothing else on the dialog mentions. */
.rc-move-cost {
    text-align: right;
    font-family: var(--font-mono, monospace);
    color: var(--color-accent-orange);
}