/**
 * Raids — the launch view and the operations log. War 2050.
 *
 * Tokens only, nothing below `--text-xs` (the 12px floor), 44px touch
 * targets on every control. Outcome colour is never the only channel: every
 * outcome row carries its word ("Won", "Lost", "Held by a shield") as well as
 * its edge colour, because red-green is the common colour deficiency.
 */

.ra-target {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    margin: 4px 4px 10px;
    border: 1px solid rgba(var(--rel-enemy-rgb), 0.4);
    border-radius: 6px;
    background: rgba(var(--rel-enemy-rgb), 0.06);
}

.ra-target-name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.ra-target-meta,
.ra-row-meta,
.ra-unit-avail {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--color-text-muted);
}

.ra-step {
    margin: 12px 4px 6px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.ra-lobes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0 4px;
}

.ra-lobe {
    min-height: var(--touch-target);
    padding: 6px;
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    background: rgba(26, 39, 68, 0.35);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    color: var(--color-text-primary);
    cursor: pointer;
}

.ra-lobe.is-picked {
    border-color: var(--color-accent-orange);
    background: rgba(249, 115, 22, 0.14);
    /* A second channel besides colour: the picked hexagon is outlined thicker. */
    box-shadow: inset 0 0 0 2px var(--color-accent-orange);
}

.ra-units {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}

.ra-unit {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    grid-template-areas:
        "name dec n inc all"
        "avail dec n inc all";
    align-items: center;
    column-gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    background: rgba(26, 39, 68, 0.35);
}

.ra-unit-name { grid-area: name; font-size: var(--text-sm); color: var(--color-text-primary); }
.ra-unit-avail { grid-area: avail; }
.ra-unit-n {
    grid-area: n;
    min-width: 2ch;
    text-align: center;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.ra-step-btn,
.ra-all {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    background: rgba(10, 15, 26, 0.6);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    cursor: pointer;
}
.ra-step-btn[data-dec] { grid-area: dec; }
.ra-step-btn[data-inc] { grid-area: inc; }
.ra-all { grid-area: all; font-size: var(--text-xs); }

.ra-step-btn[disabled],
.ra-all[disabled],
.ra-launch[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.ra-consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 12px 4px 0;
    padding: 10px;
    border: 1px solid rgba(6, 182, 212, 0.45);
    border-radius: 6px;
    background: rgba(6, 182, 212, 0.08);
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.ra-consent input {
    min-width: 20px;
    min-height: 20px;
    margin-top: 2px;
}

.ra-launch {
    width: calc(100% - 8px);
    min-height: var(--touch-target);
    margin: 14px 4px 4px;
}

.ra-note {
    margin: 6px 4px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.ra-note-bad { color: var(--color-accent-orange); }

.ra-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 4px 6px;
    padding: 8px 10px;
    border: 1px solid var(--color-primary-700);
    border-left-width: 4px;
    border-radius: 6px;
    background: rgba(26, 39, 68, 0.35);
}

.ra-row-head {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.ra-won { border-left-color: var(--color-accent-gold); }
.ra-lost { border-left-color: var(--rel-enemy); }
.ra-draw { border-left-color: var(--color-text-muted); }
/* A shield that held is the shield's colour, so it reads as the dome. */
.ra-held { border-left-color: var(--color-accent-cyan); }
.ra-unknown { border-left-color: var(--color-accent-orange); border-style: dashed; }

/* =================================================================
   THE DEFENDER'S NOTICE — canonical surface for `underAttack`

   A red outline around the whole screen edge for as long as the state
   lasts, plus a modal once when it begins. The outline replaced a banner
   that sat over the HUD. It never takes a tap, and it is inset by the
   safe-area insets so a notch or home indicator cannot hide it. Red because
   being attacked is the one state on this HUD that is a loss in progress;
   the modal's words and the outline's screen-reader text carry it too, so
   colour is never the only channel.
   ================================================================= */

.attack-border {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    right: env(safe-area-inset-right, 0px);
    bottom: env(safe-area-inset-bottom, 0px);
    left: env(safe-area-inset-left, 0px);
    z-index: calc(var(--z-notification) - 10);
    border: 3px solid rgba(var(--rel-enemy-rgb), 0.85);
    /* The steady glow, which is also the reduced-motion rendering. */
    box-shadow:
        inset 0 0 18px 4px rgba(var(--rel-enemy-rgb), 0.45),
        0 0 12px 2px rgba(var(--rel-enemy-rgb), 0.35);
    pointer-events: none;
}

.attack-border.hidden { display: none; }

.ab-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    html:not(.reduce-motion) .attack-border:not(.hidden) {
        animation: ab-pulse 2s ease-in-out infinite;
    }
}

@keyframes ab-pulse {
    0%, 100% {
        border-color: rgba(var(--rel-enemy-rgb), 0.55);
        box-shadow:
            inset 0 0 10px 2px rgba(var(--rel-enemy-rgb), 0.25),
            0 0 6px 1px rgba(var(--rel-enemy-rgb), 0.2);
    }
    50% {
        border-color: rgba(254, 202, 202, 0.95);
        box-shadow:
            inset 0 0 28px 8px rgba(var(--rel-enemy-rgb), 0.6),
            0 0 18px 4px rgba(var(--rel-enemy-rgb), 0.5);
    }
}

/* The modal, once per attack. Sits on .popup-overlay / .popup-content. */
.am-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-color: rgba(var(--rel-enemy-rgb), 0.8);
    box-shadow: 0 0 40px rgba(var(--rel-enemy-rgb), 0.3);
    text-align: center;
}

/* The title and its info button on one line; the title stays centred. */
.am-head {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.am-head .hp-help {
    position: absolute;
    right: -10px;
}

.am-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fecaca;
}

.am-body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-primary);
}

.am-never-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.am-never-row input {
    min-width: 20px;
    min-height: 20px;
}

.am-ack {
    min-height: var(--touch-target);
}

/* RELATION TAGS (palette C, variables.css --rel-*): the relation in a word
   and an icon, not just a hue, on the HTML surfaces that name a player. The
   enemy's is the same red and cross the map draws. */
.rel-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}
.rel-tag.rel-enemy { color: var(--rel-enemy); box-shadow: 0 0 0 1px var(--rel-casing); }
.rel-tag.rel-enemy::before { content: '\2715'; font-size: 0.9em; }

/* The target's shield: the shield's own colour, so the panel and the dome on
   the map read as one thing. */
.ra-note-shield {
    padding: 8px 10px;
    border: 1px solid rgba(6, 182, 212, 0.45);
    border-radius: 6px;
    background: rgba(6, 182, 212, 0.08);
    color: var(--color-text-primary);
}

/* Unit health (v2): a type still healing, in words and digits. Brighter
   than the free count beside it, because it changes the decision. */
.ra-unit-hp { color: var(--color-text-secondary); }

/* =================================================================
   BATTLE REPORT — inside the raid panel (battleReport.js)

   The Operations rows that have a report are buttons now; the headline
   takes the same outcome hues as the rows, so a report reads as the row
   it opened from. Numbers are tabular so columns line up. Nothing is
   carried by colour alone: every state has its word.
   ================================================================= */

button.ra-row {
    width: calc(100% - 8px);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
button.ra-row:focus-visible { outline: 2px solid var(--color-accent-cyan); outline-offset: 2px; }
.ra-open {
    float: right;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-accent-gold);
}

.ra-back {
    margin: 0 4px 8px;
    min-height: var(--touch-target);
    padding: 0 10px;
    background: none;
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    color: var(--color-accent-gold);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    cursor: pointer;
}

.br { display: grid; gap: 8px; margin: 0 4px; }

.br-head {
    padding: 10px 12px;
    border: 1px solid var(--color-primary-700);
    border-left: 4px solid var(--color-text-muted);
    border-radius: 6px;
    background: rgba(26, 39, 68, 0.45);
    display: grid;
    gap: 4px;
}
.br-head.br-won { border-left-color: var(--color-accent-gold); }
.br-head.br-lost { border-left-color: var(--rel-enemy); }
.br-head.br-held { border-left-color: var(--color-accent-cyan); }
.br-head.br-unknown { border-left-color: var(--color-accent-orange); border-left-style: dashed; }

.br-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.br-word {
    font-family: var(--font-display);
    font-size: var(--text-base);
    letter-spacing: 0.06em;
    color: var(--color-text-primary);
}
.br-won .br-word { color: var(--color-accent-gold-light); }
.br-lost .br-word { color: var(--rel-enemy-hot); }
.br-when, .br-luck {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.br-who { margin: 0; font-size: var(--text-sm); color: var(--color-text-primary); }
.br-breach { margin: 0; font-size: var(--text-sm); color: var(--color-accent-orange); }
.br-note { margin: 0; font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-secondary); }

.br-sec {
    padding: 8px 10px;
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    background: rgba(26, 39, 68, 0.3);
    display: grid;
    gap: 6px;
    min-width: 0;
}
.br-h {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--color-accent-gold);
    text-transform: uppercase;
}

.br-eff-head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-sm); }
.br-eff {
    position: relative;
    height: 10px;
    border-radius: 3px;
    background: rgba(10, 15, 26, 0.9);
    overflow: hidden;
}
.br-band { position: absolute; top: 0; bottom: 0; left: 0; }
.br-band-def { background: rgba(212, 175, 55, 0.35); }
.br-band-draw { background: rgba(169, 179, 196, 0.25); }
.br-band-atk { background: rgba(var(--rel-enemy-rgb), 0.35); }
.br-eff-mark {
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 3px;
    margin-left: -1.5px;
    background: var(--color-text-primary);
    box-shadow: 0 0 0 1px rgba(10, 15, 26, 0.9);
}

.br-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.br-table th {
    text-align: right;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: normal;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    padding: 0 0 4px 8px;
}
.br-table th:first-child { text-align: left; padding-left: 0; color: var(--color-accent-gold); text-transform: uppercase; }
.br-table td { text-align: right; padding: 3px 0 3px 8px; color: var(--color-text-primary); }
.br-table td:first-child { text-align: left; padding-left: 0; }
.br-sub td { font-size: var(--text-xs); color: var(--color-text-secondary); padding-top: 0; }
.br-sub td:first-child { padding-left: 14px; }
.br-cond { font-size: var(--text-xs); }
.br-cond-wounded { color: var(--color-accent-orange); }
.br-cond-battered { color: var(--rel-enemy-hot); }

.br-loot { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--text-sm); }
.br-res strong { font-variant-numeric: tabular-nums; }

.br-why summary {
    cursor: pointer;
    min-height: var(--touch-target);
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--color-accent-gold);
}
.br-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--text-sm); }
.br-dl dt { color: var(--color-text-secondary); }
.br-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }