/* ============================================================================
   Outreach Lifecycle Components
   ----------------------------------------------------------------------------
   Shared components for lifecycle-staged rule pages. Built for the outreach
   rule catalog, but named generically so other pages can reuse them.

   Palette is the app's own (color_palette.css / buttons.css):
     ink    #1E2027   brand green #91E18A   tertiary blue #57B1FF
     grey   #626470   grey light  #E0E7F5   alert green   #739c39
   The green-to-blue gradient is the TrackFlo signature lifted from
   .btn-trackflo-fancy; it marks the selected stage and nothing else.

   NOTE: #91E18A and #57B1FF are light. They are used as FILLS and BORDERS
   only — never as text on white, where neither clears WCAG AA. Green text
   uses the darker #739c39, which is what the app's green-alert-text-color is.

   Components:
     .stage-strip / .stage-cell     segmented stage picker
     .rule-row / .when-gutter       timed record row with a leading time column
     .channel-chain / .channel-step escalation sequence
     .status-led                    on/off indicator
     .segment-strip                 accented sub-row
   ============================================================================ */

:root {
    --ol-ink: #1E2027;
    --ol-brand: #91E18A;
    --ol-blue: #57B1FF;
    --ol-grey: #626470;
    --ol-grey-light: #E0E7F5;
    --ol-green-text: #739c39;
    --ol-line: #DFE3E8;
    --ol-well: #F7F9FA;
}

/* Typography note: this page sets no font-family. No other stylesheet in the app
   does either, so everything here inherits Bootstrap's body stack and matches the
   rest of TrackFlo. Numeric runs get font-variant-numeric: tabular-nums instead,
   which is what the monospace stack was actually there for — column alignment —
   without swapping the typeface. The one deliberate exception is the raw JSON in
   .segment-strip__filter, which uses Bootstrap's own .font-monospace stack because
   it is literal code, matching the JSON textareas in the edit modal. */


/* ── Stage strip ─────────────────────────────────────────────────────────────
   Segmented picker for an ordered set of stages. Cells are <button> so they
   are keyboard reachable; selection is carried by aria-pressed, not a class,
   so the accessible state and the visual state can never drift apart. */

.stage-strip {
    display: flex;
    border: 1px solid var(--ol-line);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.stage-cell {
    flex: 1 1 0;
    position: relative;
    border: 0;
    border-right: 1px solid var(--ol-line);
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    padding: 11px 13px;
    cursor: pointer;
    transition: background-color .1s ease;
}

.stage-cell:last-child { border-right: 0; }
.stage-cell:hover { background: var(--ol-well); }

.stage-cell[aria-pressed="true"] {
    background: var(--ol-ink);
    color: #fff;
}

/* The TrackFlo gradient marks the selected stage — the one flourish on the page. */
.stage-cell[aria-pressed="true"]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(to left, var(--ol-brand), var(--ol-blue));
}

.stage-cell:focus-visible {
    outline: 2px solid var(--ol-blue);
    outline-offset: -2px;
}

.stage-cell__name {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.012em;
}

.stage-cell__meta {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--ol-grey);
    font-variant-numeric: tabular-nums;
}

.stage-cell[aria-pressed="true"] .stage-cell__meta { color: var(--ol-grey-light); }


/* ── Stage caption ───────────────────────────────────────────────────────── */

.stage-caption {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ol-line);
}

.stage-caption h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.stage-caption p {
    margin: 0;
    font-size: 15px;
    color: var(--ol-grey);
}


/* ── Rule row + time gutter ──────────────────────────────────────────────────
   Two columns: when it fires, then what it does. The time is the lead datum
   because "when does it reach out?" is the first question anyone asks. */

.rule-row {
    display: grid;
    grid-template-columns: 124px 1fr;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--ol-line);
    border-radius: 4px;
}

.when-gutter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 14px 12px;
    background: var(--ol-well);
    border-right: 1px solid var(--ol-line);
}

.when-gutter__value {
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ol-ink);
    font-variant-numeric: tabular-nums;
}

/* Segments on one rule timed differently collapse to a span ('4-2h'), which
   needs more glyphs than a single value fits at full size. */
.when-gutter__value--range {
    font-size: 17px;
    letter-spacing: -.015em;
}

/* Rules with no timer (they fire on an event, not a clock) say so rather than
   showing a fabricated number or an empty cell. */
.when-gutter__value--none {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ol-grey);
}

.when-gutter__label {
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ol-grey);
}

.rule-row__body { padding: 14px 16px; }

.rule-row__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rule-row__name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.014em;
}

.rule-row__desc {
    margin: 5px 0 0;
    max-width: 64ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ol-grey);
}

.rule-row__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--ol-line);
}

.rule-row__stat {
    font-size: 13.5px;
    color: var(--ol-grey);
    font-variant-numeric: tabular-nums;
}

.rule-row__stat b {
    font-weight: 700;
    color: var(--ol-ink);
}


/* ── Channel chain ───────────────────────────────────────────────────────────
   The escalation sequence. Step contents come from the app's existing
   RECIPIENT_LABELS and MODALITY_ICONS, so channel colour stays defined in one
   place (catalog.py) rather than being duplicated here. */

.channel-chain {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 11px;
}

.channel-step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 600;
    background: var(--ol-well);
    border: 1px solid var(--ol-line);
    border-radius: 3px;
}

.channel-step__time {
    font-size: 12px;
    color: var(--ol-grey);
    font-variant-numeric: tabular-nums;
}

.channel-step__off {
    font-size: 12px;
    font-weight: 700;
    color: #D2222D;
}

.channel-chain__tick {
    color: var(--ol-grey);
    opacity: .5;
    font-size: 13px;
}


/* ── Status LED ──────────────────────────────────────────────────────────────
   Encodes state in form as well as colour-adjacent text, so it survives a
   colourblind read. Green text uses #739c39, not the light brand green. */

.status-led {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    background: #B6BFC5;
}

.status-led--on {
    background: var(--ol-green-text);
    box-shadow: 0 0 0 3.5px rgba(115, 156, 57, .18);
}

.status-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ol-grey);
}


/* ── Segment strip ───────────────────────────────────────────────────────── */

.segment-strip {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 11px;
    padding: 9px 12px;
    background: var(--ol-well);
    border: 1px solid var(--ol-line);
    border-left: 3px solid var(--ol-brand);
    border-radius: 3px;
}

.segment-strip__name {
    font-size: 15px;
    font-weight: 700;
}

/* Literal JSON, so it stays monospace — but on Bootstrap's stack (the same one
   .font-monospace and the edit modal's JSON textareas use), not a local one. */
.segment-strip__filter {
    font-family: var(--bs-font-monospace);
    font-size: 12.5px;
    color: var(--ol-grey);
    overflow-wrap: anywhere;
}

.segment-strip__actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}


/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .stage-strip { flex-wrap: wrap; }
    .stage-cell { flex: 1 1 40%; }

    .rule-row { grid-template-columns: 1fr; }

    .when-gutter {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        border-right: 0;
        border-bottom: 1px solid var(--ol-line);
    }
}

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