/* =================================================================
   ATTACK STATUS STRIP: region A, under the expedition strip.

   The chrome, the track and the type are the expedition strip's
   (.expedition-status / .xs-*, expeditionStatus.css): two blocks of
   the same status column. Only the row's cells differ:

     [dir icon] [target · lobe .......] [phase word] [clock]
     [ track: the outbound leg, then the whole trip ........ ]

   Phase is carried by the icon, the WORD and the hue, never by hue
   alone. Nothing here is under --text-xs.
   ================================================================= */

.as-head { align-items: center; }

/* The shared 44px .hp-help tap target, in a 15px head: the circle sits
   in line, and the target spills over the block's padding. */
.as-help { margin: -14px -12px -14px auto; }

.as-run {
    grid-template-columns: 13px minmax(0, 1fr) auto auto;
}

/* A wiped-out column has nothing to centre on: a div, not a button. */
div.as-run { cursor: default; }

/* The NAME gives way, never the hexagon: "Survivor01 · NW" squeezed by a
   long phase word read "Survivor01 · …" (seen live at 412px). */
.as-target {
    display: flex;
    min-width: 0;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: 1.2;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.as-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-lobe {
    flex-shrink: 0;
    font-weight: normal;
    color: var(--color-text-secondary);
}

.as-word {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.as-run[data-phase="marching"]  .xs-i-out,
.as-run[data-phase="fire"]      .xs-i-hit,
.as-run[data-phase="combat"]    .xs-i-hit,
.as-run[data-phase="returning"] .xs-i-home,
.as-run[data-phase="wiped"]     .xs-i-hit { display: block; }

.as-run[data-phase="marching"]  :is(.xs-dir, .as-word) { color: var(--color-accent-gold); }
.as-run[data-phase="fire"]      :is(.xs-dir, .as-word) { color: var(--color-accent-red-light); }
.as-run[data-phase="combat"]    :is(.xs-dir, .as-word) { color: var(--color-accent-red-light); }
.as-run[data-phase="returning"] :is(.xs-dir, .as-word) { color: var(--color-accent-green-light); }
.as-run[data-phase="wiped"]     :is(.xs-dir, .as-word) { color: var(--color-text-secondary); }

.as-run[data-phase="marching"] .xs-fill {
    background: linear-gradient(90deg, var(--color-accent-gold-dark), var(--color-accent-gold));
}
.as-run[data-phase="fire"] .xs-fill,
.as-run[data-phase="combat"] .xs-fill {
    background: linear-gradient(90deg, var(--color-accent-red), var(--color-accent-red-light));
}
.as-run[data-phase="returning"] .xs-fill {
    background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-green-light));
}
.as-run[data-phase="wiped"] .xs-fill { background: var(--color-text-secondary); }