/**
 * Base roles — the three lobes, what they are for, and what changing costs.
 *
 * Tokens only, nothing below `--text-xs` (the 12px floor,
 * `docs/TYPE-LEGIBILITY.md` rule 1). The senior engineer shipped 9.3px labels
 * in the expedition panel against that same document, so it is asserted by
 * `roles-surface.test.js` rather than remembered.
 *
 * ## The two things the layout has to carry
 *
 * **A lobe is a 44px target.** Assignment is a swap, so the player taps two of
 * them; a row that is merely tall enough to read is not tall enough to hit.
 * WCAG 2.5.5 AA, the same `--touch-target` every other control in regions A–D
 * uses.
 *
 * **Shared structures get their own block, not a footnote.** A role is a
 * category and 7.6% of 2x2 seats cover two lobes, so those buildings have no
 * single role. The block is styled as a statement rather than small print:
 * a player choosing which third to make offensive is entitled to know which
 * of their buildings will not take the bonus whichever way they choose.
 *
 * Colour: the role palette is `LobeRoles.LOOK` and is applied inline from
 * there, not here — one place for an appearance the art lane owns, the same
 * arrangement `ShieldLook` already has. **Nothing in this file names a role
 * colour**, and `roles-surface.test.js` asserts that.
 */

/* =================================================================
   THE LEAD — what state the surface is in, said once
   ================================================================= */

.rp-lead {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 4px 4px 10px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-primary-700);
    background: rgba(26, 39, 68, 0.5);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.rp-lead small {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.45;
    font-weight: var(--font-normal);
    color: var(--color-text-secondary);
}

/* "Not available" is a stated absence and reads as information, not alarm. */
.rp-lead-dark {
    border-color: var(--color-primary-600);
}

/* An arrangement that breaks the bijection. Loud, because the server and the
   client disagree about the rule and the player should not be the one to find
   that out by noticing their bonus is wrong. */
.rp-lead-bad {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(220, 38, 38, 0.08);
    color: var(--color-accent-red-light);
}

/* =================================================================
   THE THREE LOBES
   ================================================================= */

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

.rp-lobe {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* The swap gesture's target. Two of these get tapped in sequence. */
    min-height: var(--touch-target);
    padding: 8px 10px;
    background: rgba(26, 39, 68, 0.35);
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.rp-lobe:hover {
    border-color: var(--color-primary-500);
}

/* The first of the two taps. It has to be unmistakable, because the second tap
   commits to a priced change — a player who has forgotten which one they
   picked is one tap from a dialog they did not mean to open. */
.rp-lobe.is-picked {
    border-color: var(--color-accent-gold);
    background: rgba(212, 175, 55, 0.10);
}

.rp-lobe:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}

.rp-glyph {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    /* The role's shape, carried alongside its colour. Hue is never the only
       channel — BASE_RELATION's rule, and three roles told apart by colour
       alone fail a greyscale screenshot and the common deficiency at once. */
    font-size: var(--text-lg);
    line-height: 1;
}

.rp-lobe-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

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

.rp-role {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
}

.rp-count {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    line-height: 1.3;
    color: var(--color-text-secondary);
}

/* =================================================================
   SHARED STRUCTURES — the honesty block
   ================================================================= */

.rp-note {
    margin: 10px 4px 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.rp-note-howto {
    color: var(--color-text-secondary);
}

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

/* The citadel: in all three lobes by design, fixed, and role-less. A different
   category from a structure that happens to straddle, and shown as one. */
.rp-note-citadel {
    padding: 8px 10px;
    margin: 12px 4px 0;
    border-left: 2px solid var(--color-bond-paper, #ece7da);
    background: linear-gradient(90deg,
        rgba(236, 229, 211, 0.07) 0%, rgba(236, 229, 211, 0) 42%);
    color: var(--color-text-secondary);
}

.rp-note-citadel strong {
    color: var(--color-bond-paper, #ece7da);
}

.rp-shared {
    margin: 12px 4px 4px;
    padding-top: 10px;
    border-top: 1px solid var(--color-primary-700);
}

.rp-note-shared strong {
    color: var(--color-accent-orange);
}

.rp-shared-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-shared-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 4px;
    background: rgba(234, 88, 12, 0.07);
    font-size: var(--text-xs);
    line-height: 1.35;
}

.rp-shared-name {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    min-width: 0;
}

.rp-shared-where {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-accent-orange);
}

/* =================================================================
   CHANGING A ROLE
   ================================================================= */

.rp-swap {
    margin: 12px 4px 4px;
    padding-top: 10px;
    border-top: 1px solid var(--color-primary-700);
}

.rp-swap-targets {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.rp-target {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--touch-target);
    padding: 0 10px;
    background: none;
    border: 1px solid var(--color-primary-600);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.rp-target:hover {
    color: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
}

/* The spend ladder. Every row is the SERVER's cost and the SERVER's duration —
   this stylesheet lays them out and nothing here knows what they are. */
.rp-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rp-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: var(--touch-target);
    padding: 8px 10px;
    background: rgba(26, 39, 68, 0.35);
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    cursor: pointer;
}

.rp-option:hover {
    border-color: var(--color-accent-gold);
}

.rp-option-cost {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    color: var(--color-accent-gold);
}

.rp-option-time {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-accent-cyan);
}

/* A change already under way. Roles are fixed while it runs, so this replaces
   the swap controls rather than sitting beside them disabled — a disabled
   control with no explanation is the thing a player taps twice. */
.rp-pending {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 12px 4px 4px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(6, 182, 212, 0.45);
    background: rgba(6, 182, 212, 0.08);
}

.rp-pending-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-accent-cyan);
}

.rp-pending-time {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.1;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

/* =================================================================
   REDUCED MOTION (HUD-LAYOUT.md §7)
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
    .rp-lobe,
    .rp-option,
    .rp-target {
        transition: none;
    }
}

/* =================================================================
   THE PROPOSED REARRANGEMENT — all three rows, before and after

   `LOBE-ROLES-DECISIONS-01.md` §5: the surface shows a rearrangement
   rather than a selection, and shows what is given up.

   So the UNCHANGED row is styled as deliberately present rather than
   dimmed to the edge of visibility. It is not secondary information —
   it is a third of the player's base that this change does not touch,
   and the whole reason the display is a rearrangement is that they can
   see all of it at once. Opacity is also forbidden as a state channel
   by TYPE-LEGIBILITY rule 2, and a greyed row would be exactly that.
   ================================================================= */

.rp-proposal {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    background: rgba(10, 15, 26, 0.6);
}

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

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

.rp-move {
    display: grid;
    /* Label, the before/after pair, then what it costs. The columns are fixed
       so the arrows line up down the block: three rows whose arrows wander are
       three statements rather than one table, and the player is comparing. */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    align-items: baseline;
    padding: 6px 8px;
    border-radius: 4px;
    border-left: 2px solid transparent;
}

/* A row that moves. Marked on the left edge as well as by its arrow, so the
   two changed rows are findable without reading — hue is never the only
   channel, and here neither is a glyph. */
.rp-move.is-changed {
    border-left-color: var(--color-accent-gold);
    background: rgba(212, 175, 55, 0.08);
}

/* A row that stays. Present, legible, and visibly not moving. */
.rp-move.is-held {
    border-left-color: var(--color-primary-600);
    background: rgba(26, 39, 68, 0.3);
}

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

.rp-move-roles {
    display: flex;
    align-items: baseline;
    gap: 6px;
    grid-column: 1;
    min-width: 0;
}

.rp-move-from {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    /* What is being GIVEN UP on this row. Struck through, because a role the
       lobe is losing read in plain text alongside the one it gains is two
       roles with no indication which is which. */
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.rp-move.is-held .rp-move-from {
    /* Nothing is lost on a row that does not move, so nothing is struck. */
    text-decoration: none;
    color: var(--color-text-secondary);
}

.rp-move-arrow {
    flex-shrink: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

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

/* What the row gives up, in structures. The forfeiture warning's colour,
   because it is the same kind of statement: a real loss that nothing else on
   screen would mention. */
.rp-move-cost {
    grid-column: 2;
    grid-row: 1 / span 2;
    text-align: right;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    line-height: 1.35;
    color: var(--color-accent-orange);
}

.rp-note-unaffected {
    margin-top: 8px;
    color: var(--color-text-muted);
}

/* =================================================================
   THE SPEND, AS A SCALE

   The quotes are samples along a continuous curve, not tiers, so the
   ends are named and the rows are ordered slowest-first. A tier list
   would imply there are only four choices and that the gaps between
   them mean something.
   ================================================================= */

.rp-scale {
    margin-top: 10px;
}

.rp-scale-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

/* The immediate end. Marked because it is what a defender reaches for under
   pressure, and so the one most worth being certain about before paying. */
.rp-option.is-instant {
    border-color: rgba(6, 182, 212, 0.5);
    background: rgba(6, 182, 212, 0.08);
}

.rp-option.is-instant .rp-option-time {
    font-weight: var(--font-bold);
    color: var(--color-accent-cyan);
}

/* The caveat that rides with instant. Not small print: it is the one thing a
   player might be buying instant FOR, and it does not do it. */
.rp-note-launch {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 2px solid var(--color-accent-cyan);
    background: rgba(6, 182, 212, 0.06);
    color: var(--color-text-secondary);
}

.rp-cancel {
    width: 100%;
    min-height: var(--touch-target);
    margin-top: 10px;
    background: none;
    border: 1px solid var(--color-primary-600);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.rp-cancel:hover {
    color: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
}

/* =================================================================
   THE CITADEL'S FIXED NOTE

   Replaces the move button rather than disabling it. A disabled
   control says "this might work later"; the Citadel's seat is the one
   position that shares all three hexagons evenly and it is inside the
   reserved band, so a player who moved it could not put it back. The
   sentence is the answer to "why is there no button", given before
   they go looking.
   ================================================================= */

.bp-move-fixed {
    display: block;
    padding: 8px 10px;
    border-left: 2px solid var(--color-bond-paper, #ece7da);
    background: linear-gradient(90deg,
        rgba(236, 229, 211, 0.07) 0%, rgba(236, 229, 211, 0) 42%);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* =================================================================
   UNDER ATTACK — THE REFUSAL, BEFORE THE CONTROL

   Said before the button, never after it. The same discipline as the
   shield's forfeiture warning: a player should never press a thing and
   then be told why it could not work.

   Styled as a STATED CONDITION rather than as an error. It is neither a
   fault nor a permanent state, and the danger red that means "you are
   about to lose something" would be wrong twice over — nothing is being
   lost here, and the condition clears on its own. Orange is the colour
   this HUD already uses for a term the server priced but will not sell,
   which is the nearest existing meaning: a refusal with a reason.
   ================================================================= */

.rp-held {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 4px 10px;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(249, 115, 22, 0.45);
    background: rgba(249, 115, 22, 0.08);
}

.rp-held-head {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    line-height: 1.2;
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-orange);
}

/* A PRICE LIST, NOT A DISABLED BUTTON.

   A disabled button is a refusal located at the button, which is the
   thing being ruled out. This is the same row with no control in it at
   all: no pointer, no hover, nothing to press, and no 44px hit area to
   imply one. It carries the prices because what a rearrangement costs is
   information the player came for, and there is no reason to withhold it
   while they are held. */
.rp-option-static {
    cursor: default;
    opacity: 0.72;
}

.rp-option-static:hover {
    border-color: var(--color-primary-700);
    background: rgba(26, 39, 68, 0.35);
}

/* =================================================================
   FIRST ASSIGNMENT — free, all three at once

   Three rows, one per hexagon, each offering the three roles. The chosen
   role is marked by an outline AND aria-pressed AND its glyph, never by
   colour alone. Every button is a full 44px target.
   ================================================================= */

.rp-first {
    margin: 10px 4px 4px;
    padding: 12px;
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    background: rgba(26, 39, 68, 0.35);
}

.rp-first-head {
    margin: 0 0 8px;
    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);
}

.rp-first-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.rp-first-lobe {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    color: var(--color-text-primary);
}

.rp-first-roles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.rp-first-role {
    min-height: var(--touch-target);
    padding: 4px 6px;
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    background: rgba(10, 15, 26, 0.6);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.rp-first-role.is-on {
    color: var(--color-text-primary);
    border-color: var(--color-accent-cyan);
    box-shadow: inset 0 0 0 2px var(--color-accent-cyan);
}

.rp-first-go {
    width: 100%;
    min-height: var(--touch-target);
    margin-top: 4px;
}