/* =================================================================
   GATHERING PANEL

   Built on the shared region-D chrome in hudPanels.css and reusing
   .queue-track / .queue-fill / .queue-remaining / .queue-cancel for
   expeditions in flight, so a party walking home is visually the same
   object as a building going up.

   TYPE (docs/TYPE-LEGIBILITY.md): nothing here renders below --text-xs
   (12px) and the quiet tier is --color-text-secondary, never
   --color-text-muted (4.03:1 on this panel). The three fixed-width chips
   — .gp-phase, .gp-recalled, .gp-depleted — were 7.7-8px caps, so each
   grew or was allowed to wrap rather than being kept small to fit.
   ================================================================= */

/* See the matching note in research.css: the shell (.hud-panel) owns the
   height budget now, the body just scrolls inside it. A vh cap here could
   exceed the shell's cap and push the panel over the action bar. */
#gather-panel .hp-body {
    max-height: none;
}

/* -----------------------------------------------------------------
   The node being targeted
   ----------------------------------------------------------------- */

.gp-target {
    margin: 2px 4px 10px;
    padding: 9px 11px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-left-width: 3px;
    border-radius: 6px;
    background: rgba(212, 175, 55, 0.05);
}

/* The left edge carries the resource colour, matching the HUD chips and
   the node's own art on the map. */
.gp-res-gold      { border-left-color: var(--color-accent-gold); }
.gp-res-energy    { border-left-color: var(--color-accent-cyan); }
.gp-res-materials { border-left-color: #8b7355; }

.gp-target-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 8px;
}

.gp-target-name {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: 0.95rem;
    text-transform: capitalize;
}

/* "STRIPPED — recovering" is 20 characters; at 12px it no longer shares a
   line with the deposit name on a 390px sheet, which is why .gp-target-head
   above now wraps instead of squeezing one of the two. */
.gp-depleted {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.4px;
    color: var(--color-accent-red-light, #f87171);
}

.gp-target-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 5px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.gp-target-stats b {
    color: var(--color-text-primary);
    font-weight: var(--font-semibold);
}

/* -----------------------------------------------------------------
   Section headings
   ----------------------------------------------------------------- */

.gp-section-head {
    padding: 6px 10px 4px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 1.1px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid rgba(26, 39, 68, 0.9);
}

.gp-unit + .gp-unit,
.gp-run + .gp-run {
    border-top: 1px solid rgba(26, 39, 68, 0.55);
    border-radius: 0;
}

/* -----------------------------------------------------------------
   Unit steppers
   ----------------------------------------------------------------- */

.gp-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.gp-step {
    width: 28px;
    height: 28px;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-primary);
    background: rgba(26, 39, 68, 0.9);
    border: 1px solid var(--color-primary-700);
    border-radius: 4px;
    cursor: pointer;
}

.gp-step:hover:not(:disabled) {
    border-color: var(--color-accent-gold);
}

/* 0.35 took the +/- glyph to 3.04:1 — a stepper whose limit you can only
   discover by pressing it. 0.5 still reads as unavailable and keeps the
   glyph at 4.7:1. */
.gp-step:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gp-count {
    min-width: 24px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: 0.9rem;
}

/* -----------------------------------------------------------------
   Trip summary and send
   ----------------------------------------------------------------- */

.gp-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 4px 6px;
    padding: 8px 10px;
    background: rgba(56, 182, 196, 0.06);
    border: 1px solid rgba(56, 182, 196, 0.25);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.gp-summary b {
    color: var(--color-accent-cyan);
    font-weight: var(--font-semibold);
}

.gp-send {
    display: block;
    width: calc(100% - 8px);
    margin: 0 4px 6px;
    padding: 10px;
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: var(--color-primary-900, #0a0f1a);
    background: var(--color-accent-gold);
    border: 1px solid var(--color-accent-gold);
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.gp-send:hover:not(:disabled) { filter: brightness(1.12); }

/* "Deposit stripped" / "Send expedition" with no party chosen. Disabled or
   not, this is the line that says why the trip cannot leave, so it is
   readable rather than muted (4.03:1 before). */
.gp-send:disabled {
    color: var(--color-text-secondary);
    background: transparent;
    border-color: rgba(148, 163, 184, 0.45);
    cursor: not-allowed;
}

/* -----------------------------------------------------------------
   Expeditions in flight
   ----------------------------------------------------------------- */

/* OUT / DIG / HOME. Widened from 38px to 46px: four 12px Orbitron caps
   measure ~35px and the chip needs its border and a little air. */
.gp-phase {
    flex-shrink: 0;
    width: 46px;
    text-align: center;
    padding: 3px 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.4px;
    border: 1px solid currentColor;
    border-radius: 3px;
}

.gp-phase-outbound  { color: var(--color-accent-gold); }
.gp-phase-gathering { color: var(--color-accent-cyan); }
.gp-phase-returning { color: var(--color-accent-green-light); }

@media (max-width: 600px) {
    .gp-summary { flex-direction: column; gap: 3px; }
    .gp-target-stats { gap: 8px; }
}

/* -----------------------------------------------------------------
   Recall controls

   Two ways home. "Withdraw" keeps the load and is the default-looking
   action; "Run" dumps it and is styled as the emergency option, because
   that is when a player reaches for it.
   ----------------------------------------------------------------- */

.gp-recall-group {
    display: flex;
    flex-direction: column;
    /* Was 3px. One of these two buttons keeps the load and the other throws it
       away permanently, and three pixels is inside the error radius of a thumb
       — measured accuracy is about 7mm at the centre of a screen and worse at
       the edges. Destructive commands get physical separation from the command
       they are most likely to be mistaken for. */
    gap: 8px;
    flex-shrink: 0;
}

.gp-recall {
    min-width: 74px;
    padding: 5px 8px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    letter-spacing: 0.3px;
    border-radius: 3px;
    cursor: pointer;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.gp-recall-carry {
    color: var(--color-text-secondary);
    border: 1px solid var(--color-primary-700);
}

.gp-recall-carry:hover {
    color: var(--color-text-primary);
    border-color: var(--color-accent-cyan);
}

.gp-recall-fast {
    color: var(--color-accent-red-light, #f87171);
    border: 1px solid rgba(248, 113, 113, 0.5);
}

.gp-recall-fast:hover {
    color: var(--color-primary-900, #0a0f1a);
    background: var(--color-accent-red-light, #f87171);
    border-color: var(--color-accent-red-light, #f87171);
}

/* "FALLING BACK" / "RUNNING". Two words at 12px will not fit one 74px line,
   so it wraps to two rather than shrinking — this is the chip that says the
   party is abandoning the haul. */
.gp-recalled {
    flex-shrink: 0;
    min-width: 74px;
    text-align: center;
    padding: 5px 6px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.3px;
    line-height: 1.25;
    color: var(--color-accent-red-light, #f87171);
    border: 1px solid currentColor;
    border-radius: 3px;
}

@media (max-width: 600px) {
    .gp-recall { min-width: 60px; }
    .gp-recalled { min-width: 60px; }

}

/* Two stacked buttons at ~26px each, one of which dumps the whole haul,
   is the easiest mis-tap in the HUD. Raised to the §7 minimum wherever
   the pointer is a fingertip (see the matching note in research.css);
   the row grows to ~91px, which the panel absorbs by scrolling. */
@media (pointer: coarse) {
    .gp-recall { min-height: var(--touch-target); }
}

/* Who is already on a deposit. Sits under the name rather than beside it: the
   line names players, so it has no bounded width and would push the richness
   and yield figures off a 390px screen if it shared their row. */
/* --tactical-gold is not a token this codebase defines — it was always
   resolving to the #f4d03f fallback, which is --color-accent-gold-light.
   Named properly, and the 0.9 alpha dropped: the colour is already the
   right weight without knocking 10% off its contrast. */
.gp-occupied {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--color-accent-gold-light, #f4d03f);
}

/* --- filling a party without forty taps --------------------------------- */

.gp-step-max,
.gp-step-enough {
    /* Wider than the +/- steppers because they carry a word, not a glyph.
       Same height so the stepper row does not grow. */
    width: auto;
    padding: 0 8px;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
}

/* ENOUGH is the considered choice and MAX the blunt one, so ENOUGH leads --
   it sits to the LEFT and carries the accent. A player who wants to clear a
   node should land on it first; MAX stays for when you want the whole
   garrison out regardless. */
.gp-step-enough {
    border-color: var(--color-accent, #f4d03f);
    color: var(--color-accent, #f4d03f);
}

.gp-step-enough:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-accent, #f4d03f) 18%, transparent);
}

.gp-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.gp-all {
    padding: 4px 10px;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.06em;
    color: var(--color-accent-gold);
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    /* 44px would push the section head taller than the rows it labels; this
       is a convenience duplicate of per-stack MAX, which is full height. */
    min-height: 28px;
}

.gp-all:hover {
    background: rgba(212, 175, 55, 0.25);
}