/* ══════════════════════════════════════════════════════════════
   SpiritsToday Driver Workflow + Evidence primitives
   Source of truth for the at-the-door capture surface, the agency
   review dialog, and the 5 shared workflow primitives.

   Consumed by: SpiritsToday.Client (web) and SpiritsToday.Maui
   via <link href="_content/SpiritsToday.UI/css/workflow.css" />.

   Design contract:
   - docs/superpowers/spikes/assets/2026-05-08-DriverWorkflow-design-diff.html
   - docs/superpowers/spikes/assets/2026-05-08-PodDetailDialog-design-diff.html
   ══════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    /* Brand */
    --st-crimson: #9b1b30;
    --st-crimson-darken: #7a1525;
    --st-crimson-dim: #fbeaee;
    --st-amber: #92710a;
    --st-amber-border: rgba(146, 113, 10, .28);

    /* Neutrals / paper */
    --st-bg-paper: #ece8df;
    --st-bg-card: #fffdf8;
    --st-divider: #e0dbd3;
    --st-border-form: #c8bfb3;
    --st-border-corner: #a89f93;
    --st-text-primary: #1a1a1a;
    --st-text-secondary: #5c5347;
    --st-text-tertiary: #7a6e5d;

    /* Status palette (warm, not Material) */
    --st-success: #4a7c59;
    --st-success-dim: #eef3ed;
    --st-info: #7a6e5d;
    --st-info-dim: #f4efe6;
    --st-warning-dim: #fdf4e3;

    /* Typography */
    --st-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --st-font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

    /* Geometry */
    --st-radius-sm: 6px;
    --st-radius-md: 10px;
    --st-radius-lg: 14px;
}

/* ══════════════════════════════════════════════════════════════
   01 · Status pill
   Replaces inline MudChip Severity treatments. One height, one type.
   ══════════════════════════════════════════════════════════════ */
.st-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px 0 8px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-family: var(--st-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

    .st-pill::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

    .st-pill.no-dot::before { display: none; }

    .st-pill.info {
        background: var(--st-info-dim);
        color: var(--st-info);
        border-color: rgba(122,110,93,.22);
    }

    .st-pill.success {
        background: var(--st-success-dim);
        color: var(--st-success);
        border-color: rgba(74,124,89,.22);
    }

    .st-pill.warning {
        background: var(--st-warning-dim);
        color: var(--st-amber);
        border-color: var(--st-amber-border);
    }

    .st-pill.error {
        background: var(--st-crimson-dim);
        color: var(--st-crimson);
        border-color: rgba(155,27,48,.22);
    }

    .st-pill.muted {
        background: #f4efe6;
        color: var(--st-text-secondary);
        border-color: var(--st-divider);
    }

/* ══════════════════════════════════════════════════════════════
   02 · Sticky action bar
   Paper bar with crimson primary CTA + corner-notch accent.
   ══════════════════════════════════════════════════════════════ */
.st-sticky-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 16px;
    background: var(--st-bg-card);
    border-top: 1px solid var(--st-divider);
    box-shadow: 0 -1px 0 rgba(155,27,48,0.08);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    z-index: 10;
}

    .st-sticky-bar::before {
        /* corner-notch, top-right */
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 14px;
        height: 14px;
        background: var(--st-bg-paper);
        clip-path: polygon(100% 0, 100% 100%, 0 0);
    }

    .st-sticky-bar .tallies {
        display: flex;
        gap: 14px;
        align-items: center;
    }

@media (max-width: 600px) {
    .st-sticky-bar {
        position: fixed;
        margin: 0;
        border-radius: 0;
        padding: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════
   03 · State-decorated row
   Universal row primitive: left accent stripe + monospace seq number.
   Replaces three inconsistent treatments (border tint, avatar, chip).
   ══════════════════════════════════════════════════════════════ */
.st-state-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 15px;
    background: var(--st-bg-card);
    border: 1px solid var(--st-divider);
    border-radius: var(--st-radius-sm);
    font-size: 13.5px;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, background .2s;
}

    .st-state-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--st-divider);
    }

    .st-state-row.pending::before { background: var(--st-divider); }
    .st-state-row.loaded { background: var(--st-success-dim); }
    .st-state-row.loaded::before { background: var(--st-success); }
    .st-state-row.deferred { background: var(--st-info-dim); }
    .st-state-row.deferred::before { background: var(--st-info); }
    .st-state-row.delivered { background: var(--st-success-dim); }
    .st-state-row.delivered::before { background: var(--st-success); }
    .st-state-row.returned::before { background: var(--st-amber); }
    .st-state-row.skipped { opacity: 0.65; }
    .st-state-row.skipped::before { background: var(--st-text-tertiary); }
    .st-state-row.error::before { background: var(--st-crimson); }

    .st-state-row .seq {
        font-family: var(--st-font-mono);
        font-size: 11px;
        font-weight: 600;
        color: var(--st-text-secondary);
        min-width: 22px;
        letter-spacing: 0.5px;
    }

    .st-state-row .seq.success { color: var(--st-success); }
    .st-state-row .grow { flex: 1; min-width: 0; }
    .st-state-row .title { font-weight: 600; font-size: 14px; }
    .st-state-row .detail { color: var(--st-text-secondary); font-size: 12.5px; margin-top: 2px; }
    .st-state-row .detail .num { font-family: var(--st-font-mono); color: var(--st-text-primary); font-weight: 500; }
    .st-state-row .detail .sep { color: var(--st-divider); margin: 0 4px; }

/* ══════════════════════════════════════════════════════════════
   04 · Completion card
   Paper card with corner notches + monospace eyebrow + dashed-rule
   tally row. Replaces the glossy green gradient cards.
   ══════════════════════════════════════════════════════════════ */
.st-completion-card {
    background: var(--st-bg-card);
    border: 1.5px solid var(--st-border-form);
    border-radius: var(--st-radius-sm);
    padding: 28px 28px 24px;
    position: relative;
    overflow: hidden;
}

    .st-completion-card::before,
    .st-completion-card::after,
    .st-completion-card .c3,
    .st-completion-card .c4 {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: var(--st-border-corner);
    }

    .st-completion-card::before { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
    .st-completion-card::after { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
    .st-completion-card .c3 { bottom: 0; left: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }
    .st-completion-card .c4 { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

    .st-completion-card .eyebrow {
        font-family: var(--st-font-mono);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--st-success);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .st-completion-card .eyebrow::before {
        content: "";
        width: 16px;
        height: 1px;
        background: currentColor;
    }

    .st-completion-card h3 {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.4px;
        margin: 0 0 16px;
    }

    .st-completion-card .tallies {
        display: flex;
        gap: 22px;
        margin-bottom: 22px;
        padding: 14px 0;
        border-top: 1px dashed var(--st-divider);
        border-bottom: 1px dashed var(--st-divider);
    }

    .st-completion-card .tallies .t .n {
        font-family: var(--st-font-mono);
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: var(--st-text-primary);
        line-height: 1;
    }

    .st-completion-card .tallies .t .k {
        font-family: var(--st-font-mono);
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--st-text-tertiary);
        margin-top: 6px;
    }

    .st-completion-card .tallies .t.success .n { color: var(--st-success); }
    .st-completion-card .tallies .t.warning .n { color: var(--st-amber); }

    /* Muted variant — DriveStep "All Stops Complete" no-tallies version */
    .st-completion-card.muted { padding: 20px 24px; }
    .st-completion-card.muted h3 { font-size: 18px; margin-bottom: 0; }
    .st-completion-card.muted .tallies { display: none; }

/* ══════════════════════════════════════════════════════════════
   05 · Alert banner
   Warm-palette banner with left accent stripe; replaces MudAlert.
   ══════════════════════════════════════════════════════════════ */
.st-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--st-radius-sm);
    border: 1px solid transparent;
    font-size: 13px;
    position: relative;
}

    .st-alert::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: currentColor;
        border-radius: var(--st-radius-sm) 0 0 var(--st-radius-sm);
    }

    .st-alert .ic {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .st-alert .body {
        color: var(--st-text-primary);
        font-weight: 500;
    }

    .st-alert .body .sub {
        color: var(--st-text-secondary);
        font-weight: 400;
        font-size: 12px;
        display: block;
        margin-top: 1px;
    }

    .st-alert.success { background: var(--st-success-dim); color: var(--st-success); border-color: rgba(74,124,89,.18); }
    .st-alert.warning { background: var(--st-warning-dim); color: var(--st-amber); border-color: var(--st-amber-border); }
    .st-alert.info { background: var(--st-info-dim); color: var(--st-info); border-color: rgba(122,110,93,.18); }
    .st-alert.error { background: var(--st-crimson-dim); color: var(--st-crimson); border-color: rgba(155,27,48,.22); }

/* ══════════════════════════════════════════════════════════════
   Buttons (used in sticky bar + completion card actions)
   ══════════════════════════════════════════════════════════════ */
.st-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--st-radius-md);
    font-family: var(--st-font-sans);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    border: 1px solid transparent;
}

    .st-btn.primary { background: var(--st-crimson); color: #fff; }
    .st-btn.primary:hover { background: var(--st-crimson-darken); }
    .st-btn.secondary { background: #fff; color: var(--st-crimson); border-color: var(--st-crimson); }
    .st-btn.ghost { background: transparent; color: var(--st-text-secondary); }
    .st-btn.lg { padding: 12px 22px; font-size: 14px; }

/* ══════════════════════════════════════════════════════════════
   Evidence card primitives
   Used by both at-the-door capture (driver, write mode) and
   PodDetailDialog (agency, read mode). One visual contract.
   ══════════════════════════════════════════════════════════════ */
.evidence-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

    /* 4-card variant when MethodOfPayment == Check */
    .evidence-row.with-check {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

@media (max-width: 1100px) {
    .evidence-row,
    .evidence-row.with-check {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .evidence-row,
    .evidence-row.with-check {
        grid-template-columns: 1fr;
    }
}

.evidence-card {
    background: #fff;
    border: 1px solid var(--st-divider);
    border-radius: var(--st-radius-md);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

    /* Top accent stripe — color is per-kind */
    .evidence-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--accent, var(--st-text-tertiary));
        z-index: 2;
    }

    .evidence-card.kind-product { --accent: var(--st-text-tertiary); }
    .evidence-card.kind-signed { --accent: #5b4a7c; }
    .evidence-card.kind-gps.state-verified { --accent: var(--st-success); }
    .evidence-card.kind-gps.state-warning { --accent: var(--st-amber); }
    .evidence-card.kind-gps.state-error { --accent: var(--st-crimson); }
    .evidence-card.kind-check { --accent: var(--st-amber); }
    .evidence-card.kind-check.state-verified { --accent: var(--st-success); }
    .evidence-card.kind-check.state-warning { --accent: var(--st-amber); }

    /* Pulse animation on the card that's next to capture */
    .evidence-card.pulsing {
        animation: pulseAttn 2.6s ease-in-out infinite;
    }

@keyframes pulseAttn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(146,113,10,0); }
    50% { box-shadow: 0 0 0 5px rgba(146,113,10,.12); }
}

.evidence-head {
    display: flex;
    align-items: center;
    padding: 11px 14px 9px;
    border-bottom: 1px solid #f0ebe4;
    gap: 10px;
    min-height: 44px;
}

    .evidence-head .lbl {
        font-family: var(--st-font-mono);
        font-size: 10px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--st-text-tertiary);
    }

    .evidence-head .verify-tag {
        margin-left: auto;
        font-family: var(--st-font-mono);
        font-size: 10px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 4px;
        letter-spacing: 0.4px;
    }

.verify-tag.ok {
    background: var(--st-success-dim);
    color: var(--st-success);
    border: 1px solid rgba(74,124,89,.22);
}

.verify-tag.outside,
.verify-tag.warning {
    background: var(--st-warning-dim);
    color: var(--st-amber);
    border: 1px solid var(--st-amber-border);
}

.verify-tag.error {
    background: var(--st-crimson-dim);
    color: var(--st-crimson);
    border: 1px solid rgba(155,27,48,.22);
}

/* Evidence body — image, placeholder, or pending state */
.evidence-body {
    flex: 1;
    background: #1a1a1a;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    position: relative;
}

    .evidence-body.empty,
    .evidence-body.pending {
        background: #f8f6f3;
        color: var(--st-text-tertiary);
    }

    .evidence-body img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-height: 280px;
    }

    .evidence-body .placeholder {
        text-align: center;
        font-family: var(--st-font-mono);
        font-size: 11px;
        letter-spacing: 0.5px;
        padding: 16px;
    }

    .evidence-body .timestamp-overlay {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-family: var(--st-font-mono);
        font-size: 10.5px;
        font-weight: 600;
        background: rgba(0,0,0,.7);
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
    }

/* Capture-mode tap target hint */
.evidence-body.tappable {
    cursor: pointer;
}

    .evidence-body.tappable:hover { filter: brightness(1.05); }