/* =================================================================
   EXPEDITION STATUS STRIP — region A

   A one-line-per-party readout of everything the player has in the
   field, sitting under the profile card, resource chips and rank bars
   in .top-left-hud. Shown only while the sector map is open, and only
   while at least one party is out — see expeditionStatus.js and
   docs/EXPEDITION-STATUS.md.

   CHROME. Deliberately identical to .player-progress directly above it
   (same fill, same gold hairline, same radius, same blur): these are
   two blocks of the same status column and any divergence would only
   read as one of them being broken.

   WIDTH (docs/HUD-LAYOUT.md §1, region A is left 0 to 340px, and §6's
   clear-centre-stage figure is driven by that cap). This block sets no
   width of its own — .top-left-hud is a flex column with the default
   align-items: stretch, so the block takes whatever width the widest
   sibling already established, and region A does not grow by a pixel
   horizontally. The max-width below is a ceiling, not a size: it exists
   so that a long payload number can never be the thing that widens the
   corner. It tracks .player-progress's 240/210 exactly.

   HEIGHT. This is the dimension that does move. Measured stack with the
   strip present and three parties out:
     16 anchor + 42 profile + 3 + 28 resources + 3 + 42 progress + 3
     + ~103 this block = ~240px from the viewport top, against region A's
   nominal 160px bound. That bound is exceeded only while a party is
   actually in the field AND the sector map is open; the base view and an
   idle army both give the space straight back. Against §6's hard rule
   the cost is small — on a 900px-tall desktop viewport the clear centre
   band goes 656px (72.9%) -> 616px (68.4%), and on a 412x870 phone
   696px (80%) -> 640px (73.6%) — both far above the 50% floor. A fourth
   party scrolls the list rather than growing the block.

   TYPE (docs/TYPE-LEGIBILITY.md). Nothing here renders below --text-xs
   (12px), including the timers and the troop counts, which are exactly
   the "stat key / caption / timer" class rule 1 names. Phase is never
   expressed with opacity (rule: see the 1.61:1 finding) — it is carried
   by icon shape, by hue, and by where the fill sits between the two
   segment marks.
   ================================================================= */

.expedition-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 240px;
    min-width: 0;
    padding: 5px 8px;
    background: rgba(26, 39, 68, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
}

/* The module toggles this. Kept local as well as global so the block is
   never briefly visible before base.css's utility class is parsed. */
.expedition-status.hidden {
    display: none;
}

/* -----------------------------------------------------------------
   Header — the "how many troops are out" line
   ----------------------------------------------------------------- */

.xs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.xs-title {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    line-height: 1.2;
    font-weight: var(--font-bold);
    /* Rule 5: caps plus tracking needs the size, so the tracking is the
       thing that gives — 0.04em, matching .pp-key. */
    letter-spacing: 0.04em;
    color: var(--color-accent-gold);
}

.xs-count {
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    line-height: 1.2;
    /* --color-text-secondary, never --color-text-muted: muted measures
       4.03:1 on this fill and this is a persistent readout. */
    color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------
   The list
   ----------------------------------------------------------------- */

.xs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Four or more parties scroll instead of growing region A. The cap is
   three rows plus their two gaps: 3 x 22px + 2 x 4px. */
.xs-list.xs-scrolls {
    max-height: 74px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* A thin, unobtrusive scrollbar — the list is 220px wide and a
       platform-default bar would eat the clock column. */
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.35) transparent;
}

.xs-list.xs-scrolls::-webkit-scrollbar { width: 4px; }
.xs-list.xs-scrolls::-webkit-scrollbar-track { background: transparent; }
.xs-list.xs-scrolls::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.35);
    border-radius: 2px;
}

/* -----------------------------------------------------------------
   One party

   Grid rather than flex so the five cells line up column-for-column
   down the list — a ragged clock column is the fastest way to make
   three timers look like one number.

     [dir icon] [troops] [resource] [payload .......] [clock]
     [ track spanning the full width ..................... ]
   ----------------------------------------------------------------- */

.xs-run {
    display: grid;
    grid-template-columns: 13px auto 13px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 5px;
    row-gap: 3px;
    width: 100%;
    min-width: 0;
    /* Deliberately borderless and unfilled: three of these stacked with
       their own boxes inside a box reads as clutter at this size. The
       resource hue on the left icon is the only per-row decoration. */
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.xs-run:hover .xs-troops,
.xs-run:hover .xs-load {
    color: var(--color-accent-gold-light);
}

.xs-run:focus-visible {
    outline: 2px solid var(--color-accent-cyan);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Direction of travel. All three icons are in the DOM and this picks
   one, so a party changing phase is an attribute flip rather than a DOM
   swap under the player's finger. */
.xs-dir {
    display: block;
    width: 13px;
    height: 13px;
    line-height: 0;
}

.xs-i {
    display: none;
    width: 13px;
    height: 13px;
}

.xs-run[data-phase="outbound"]  .xs-i-out  { display: block; }
.xs-run[data-phase="gathering"] .xs-i-dig  { display: block; }
.xs-run[data-phase="returning"] .xs-i-home { display: block; }

/* Phase colour, the second of the three phase signals. Gold marching
   out, cyan working, green coming home — the same three the expedition
   panel's OUT / DIG / HOME chips already use, so the two surfaces agree. */
.xs-run[data-phase="outbound"]  .xs-dir { color: var(--color-accent-gold); }
.xs-run[data-phase="gathering"] .xs-dir { color: var(--color-accent-cyan); }
.xs-run[data-phase="returning"] .xs-dir { color: var(--color-accent-green-light); }

/* A recalled party is walking home under orders, not finishing a job.
   Red overrides the phase hue on the arrow only — the payload still
   reads normally, because what they kept is the thing the player is
   checking. Never signalled with opacity. */
.xs-run[data-recalled] .xs-dir { color: var(--color-accent-red-light); }

.xs-troops {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    line-height: 1.2;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.xs-res {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.xs-res-gold      .xs-res { color: var(--color-accent-gold); }
.xs-res-energy    .xs-res { color: var(--color-accent-cyan); }
.xs-res-materials .xs-res { color: #a68a63; }

.xs-load {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    line-height: 1.2;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* The one clock on the row: whatever leg the party is in right now.
   Never two. See the header comment in expeditionStatus.js. */
.xs-clock {
    flex-shrink: 0;
    text-align: right;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    line-height: 1.2;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
   The track

   Spans the whole round trip, departure to home, with a hairline where
   marching stops and another where digging stops. That is how march
   time and gather time stay on screen without a second countdown: a
   long walk to a short dig looks different from a short walk to a long
   one, and where the fill sits says which leg you are watching.
   ----------------------------------------------------------------- */

.xs-track {
    grid-column: 1 / -1;
    position: relative;
    display: block;
    height: 4px;
    min-width: 0;
    background: rgba(10, 15, 26, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.xs-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    /* Above the fill, so the leg boundaries stay visible as the bar
       passes them rather than being swallowed. */
    z-index: 1;
    background: rgba(10, 15, 26, 0.85);
}

.xs-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 1px;
    transition: width var(--transition-slow);
}

/* Third phase signal: the fill takes the colour of the leg in progress,
   so a glance at the bar alone still answers "doing what". */
.xs-run[data-phase="outbound"] .xs-fill {
    background: linear-gradient(90deg, var(--color-accent-gold-dark), var(--color-accent-gold));
}

.xs-run[data-phase="gathering"] .xs-fill {
    background: linear-gradient(90deg, var(--color-accent-cyan), var(--color-accent-cyan-light));
}

.xs-run[data-phase="returning"] .xs-fill {
    background: linear-gradient(90deg, var(--color-accent-cyan), var(--color-accent-green-light));
}

.xs-run[data-recalled] .xs-fill {
    background: linear-gradient(90deg, var(--color-accent-red), var(--color-accent-red-light));
}

/* -----------------------------------------------------------------
   Breakpoints (docs/HUD-LAYOUT.md §3 — 1024 and 640, no others)
   ----------------------------------------------------------------- */

@media (max-width: 1024px) {
    .expedition-status {
        max-width: 210px;
        padding: 4px 6px;
    }
    /* Type does not step down here. The 12px floor holds at every
       breakpoint; only widths move. */
}

@media (max-width: 640px) {
    /* Region A is 56% of the viewport on phones and .player-progress
       fills it, so the cap comes off and this block follows the corner
       rather than under-filling it. */
    .expedition-status {
        max-width: 100%;
        gap: 3px;
    }

    .xs-list { gap: 3px; }
    .xs-list.xs-scrolls { max-height: 72px; }
}

/* -----------------------------------------------------------------
   Reduced motion (docs/HUD-LAYOUT.md §7)

   The countdowns keep ticking — a clock that has stopped counting is a
   broken clock, not a calmer one. Only the interpolated bar growth is
   dropped, so the fill jumps to its new width on each tick instead of
   sliding.
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .xs-fill {
        transition: none;
    }
}