/* 15W9.1 — shared gate visual vocabulary (GATE_STEP_VISIBILITY design §2).
   One language for gate KIND + STATE across builder / workflow / timeline / trackers.
   Config mode colours by Blocking/Advisory; Outcome mode by latest logged outcome.
   Tokens only (design-language + tables rules): no hex, no px font-sizes, color-mix tints
   so both themes resolve automatically. */

/* --- Kind glyph (standalone, e.g. GateConfigEditor list rows) ------------- */
.aim-gate-kind { font-size: var(--text-sm); }
.aim-gate-kind--deliverable { color: var(--brand-on-surface); }
.aim-gate-kind--approval    { color: var(--ok); }
.aim-gate-kind--criteria    { color: var(--brand-on-surface); }
.aim-gate-kind--readiness   { color: var(--warn); }
.aim-gate-kind--commercial  { color: color-mix(in srgb, var(--ok) 70%, var(--brand-primary)); }
.aim-gate-kind--unknown     { color: var(--ink-faint); }

/* --- Chip (one gate) ------------------------------------------------------ */
.aim-gate-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: var(--radius-sm);
    border: var(--border-1) solid var(--line);
    background: var(--raised);
    color: var(--ink-muted);
    font-size: var(--text-xs);
    line-height: 1;
}

/* --- Staged chip: the gate wears its STAGE's identity ---------------------
   James, 2026-09-05: "the gates need to have the same icons as the workflow." A gate used to be a
   24px monochrome square carrying one of five generic glyphs, sitting beside stage bars with rich
   semantic icons and their own colours — two visual languages on one canvas.

   When the caller supplies the stage identity the chip grows one step (24 -> 28px, the AIM
   standard button step), tints itself with the stage's colour token, leads with the KIND glyph and
   badges the STAGE in the corner so both facts still survive. (Lead/badge were the other way round
   until 2026-09-07 — see the note further down.)

   --gate-stage-colour is set inline by GateChip as var(--stage-<hue>-<variant>), so it follows the
   theme; there is no hex anywhere in this path. */
.aim-gate-chip--staged {
    /* Declared here, not left to a var() fallback: CSS06 requires every consumed token to be
       DEFINED somewhere, and its failure message is explicit that masking it with a fallback is
       the CSS01 violation the rule exists to prevent. GateChip sets this inline per chip
       (--gate-stage-colour: var(--stage-<hue>-<variant>)); inline beats a class, so this value is
       the neutral default for a stage that has no colour — the 15W8 uncoded templates. */
    --gate-stage-colour: var(--line-strong);

    width: 1.75rem;
    height: 1.75rem;
    position: relative;
    border-color: color-mix(in srgb, var(--gate-stage-colour) 45%, transparent);
    background: color-mix(in srgb, var(--gate-stage-colour) 12%, var(--raised));
    color: color-mix(in srgb, var(--gate-stage-colour) 70%, var(--ink));
}

/* ⚠ THE TWO GLYPHS SWAPPED ROLES 2026-09-07 (James: "the icons are reversed ... should be inverse,
   with the helicopter being in the bubble"). The kind now LEADS and the stage rides in the corner.

   Why the first arrangement failed: every gate on a stage shares that stage's icon, so a strip of
   four Capture gates rendered four helicopters at full size and five near-identical corner specks.
   The glyph carrying the most ink was the one fact every chip in the row agreed on. Lead with what
   DIFFERS between neighbours; badge what they share. The stage tint on the chip body already says
   "these belong to Capture", and the stage bubble in the header says it once, properly. */
.aim-gate-chip__kind { font-size: var(--text-xs); }

/* The stage badge overlaps the bottom-right corner. It keeps its own ring in the surface colour so
   it reads as a separate mark rather than as part of the kind glyph. */
.aim-gate-chip__stage {
    position: absolute;
    right: -2px;
    bottom: -2px;
    font-size: 0.5rem;
    line-height: 1;
    padding: 1px;
    border-radius: var(--radius-full);
    background: var(--raised);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gate-stage-colour) 45%, transparent);
}

/* State still wins over stage identity: a BLOCKING gate must not be softened into decoration by
   its stage colour. Blocking keeps the danger-tinted border; the stage tint stays as the fill. */
.aim-gate-chip--staged.aim-gate-chip--cfg-blocking {
    border-color: color-mix(in srgb, var(--bad) 45%, transparent);
}
.aim-gate-chip--staged.aim-gate-chip--blocking-fail {
    border-color: color-mix(in srgb, var(--bad) 48%, transparent);
}

button.aim-gate-chip {
    cursor: pointer;
    transition: transform var(--duration-200) var(--ease-in-out), box-shadow var(--duration-200) var(--ease-in-out);
}
button.aim-gate-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--lift-1);
}

/* Config mode — emphasis by mode, no outcome colour. */
.aim-gate-chip--cfg-blocking {
    border-color: color-mix(in srgb, var(--bad) 45%, transparent);
    color: color-mix(in srgb, var(--bad) 62%, var(--ink));
    background: color-mix(in srgb, var(--bad) 10%, var(--raised));
}
.aim-gate-chip--cfg-advisory {
    border-color: var(--line);
    color: var(--ink-faint);
    background: var(--ground);
}

/* Outcome mode — coloured by the latest logged outcome. */
.aim-gate-chip--pass {
    border-color: color-mix(in srgb, var(--ok) 40%, transparent);
    color: color-mix(in srgb, var(--ok) 60%, var(--ink));
    background: color-mix(in srgb, var(--ok) 12%, var(--raised));
}
.aim-gate-chip--advisory-fail {
    border-color: color-mix(in srgb, var(--warn) 42%, transparent);
    color: color-mix(in srgb, var(--warn) 62%, var(--ink));
    background: color-mix(in srgb, var(--warn) 12%, var(--raised));
}
.aim-gate-chip--blocking-fail {
    border-color: color-mix(in srgb, var(--bad) 48%, transparent);
    color: color-mix(in srgb, var(--bad) 64%, var(--ink));
    background: color-mix(in srgb, var(--bad) 14%, var(--raised));
}
.aim-gate-chip--overridden {
    border-color: color-mix(in srgb, var(--brand-border-on-surface) 40%, transparent);
    color: color-mix(in srgb, var(--action) 60%, var(--ink));
    background: color-mix(in srgb, var(--action) 10%, var(--raised));
}
/* not-armed / not-evaluated — first-class HOLLOW states (audit §2.2: never fake a Pass). */
.aim-gate-chip--not-armed {
    border-style: dashed;
    border-color: var(--line-strong);
    color: var(--ink-faint);
    background: var(--ground);
}
.aim-gate-chip--not-evaluated {
    border-style: dashed;
    border-color: var(--line);
    color: var(--ink-faint);
    background: transparent;
}

/* --- Strip (per-stage row) ------------------------------------------------ */
.aim-gate-strip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.aim-gate-strip__overflow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.5rem;
    padding: 0 4px;
    border-radius: var(--radius-sm);
    background: var(--ground);
    color: var(--ink-muted);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* --- Billing point badge (distinct from the Commercial kind icon) --------- */
.aim-billing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    border: var(--border-1) solid color-mix(in srgb, var(--ok) 35%, transparent);
    background: color-mix(in srgb, var(--ok) 10%, var(--raised));
    color: color-mix(in srgb, var(--ok) 66%, var(--ink));
    font-size: var(--text-xs);
}

/* --- Handover pill -------------------------------------------------------- */
.aim-handover-pill {
    display: inline-flex;
    align-items: center;
    /* 2026-09-11 — carried over from the retired WorkflowSection copy (.wf-hs-pill): labels
       vary in width ("Pending" / "Submitted" / "Accepted"), so the pill holds a floor width
       and centres, or it shifts whatever sits to its right in a header row. */
    min-width: 8ch;
    justify-content: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
}
.aim-handover-pill--success {
    background: color-mix(in srgb, var(--ok) 15%, var(--raised));
    color: color-mix(in srgb, var(--ok) 60%, var(--ink));
}
.aim-handover-pill--info {
    background: color-mix(in srgb, var(--action) 14%, var(--raised));
    color: color-mix(in srgb, var(--action) 60%, var(--ink));
}
.aim-handover-pill--warning {
    background: color-mix(in srgb, var(--warn) 15%, var(--raised));
    color: color-mix(in srgb, var(--warn) 62%, var(--ink));
}
.aim-handover-pill--danger {
    background: color-mix(in srgb, var(--bad) 15%, var(--raised));
    color: color-mix(in srgb, var(--bad) 62%, var(--ink));
}
.aim-handover-pill--neutral {
    background: var(--ground);
    color: var(--ink-muted);
}