/* ==========================================================================
   SOMANOTES — VERIFICATION CHIP STYLES
   ==========================================================================

   Location:  /static/css/verification-chips.css
   Component: static/js/components/verification-chip.js

   ARCHITECTURE: Inline pill/badge component for showing verification state of
   clinical actions — "dose verified", "problem approved", "lint passed", etc.
   WHY: Unified visual language for attestation states across transfer center,
   problem approval modal, and linter results. Namespaced under
   `.verification-chip` to avoid conflicts with existing badge/pill styles.

   Design DNA: Follows Phosphor Theatre terminal theme (terminal-core.css).
   Uses --term-* tokens when available, with hardcoded fallbacks for contexts
   outside the terminal theme (e.g., standalone test pages).

   States:  pending | verified | failed | revoked
   ========================================================================== */


/* --------------------------------------------------------------------------
   §1  BASE CHIP
   -------------------------------------------------------------------------- */

.verification-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-family: var(--term-font-mono, 'JetBrains Mono', 'Fira Code', 'Consolas', monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
    border: 1px solid var(--term-border-default, #2A2720);
    border-radius: 4px;
    background: var(--term-bg-surface, #13120F);
    color: var(--term-fg-secondary, #A09888);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition:
        border-color 200ms ease,
        background 200ms ease,
        color 200ms ease,
        box-shadow 200ms ease,
        opacity 200ms ease;
    position: relative;
    vertical-align: middle;
}

/* Status icon — CSS-only via ::before pseudo-element */
.verification-chip::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition:
        background 200ms ease,
        box-shadow 200ms ease;
}


/* --------------------------------------------------------------------------
   §2  STATE: PENDING — muted/neutral, awaiting action
   -------------------------------------------------------------------------- */

.verification-chip--pending {
    border-color: var(--term-border-default, #2A2720);
    background: var(--term-bg-surface, #13120F);
    color: var(--term-fg-muted, #8A8278);
}

.verification-chip--pending::before {
    background: var(--term-fg-muted, #8A8278);
    opacity: 0.5;
}

.verification-chip--pending:hover {
    border-color: var(--term-accent-dim, rgba(0, 255, 208, 0.40));
    color: var(--term-fg-secondary, #A09888);
    box-shadow:
        0 0 4px rgba(0, 255, 208, 0.08),
        0 0 12px rgba(0, 255, 208, 0.03);
}

.verification-chip--pending:focus-visible {
    outline: 2px solid var(--term-accent, #00FFD0);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   §3  STATE: VERIFIED — green border, checkmark, subtle glow
   -------------------------------------------------------------------------- */

.verification-chip--verified {
    border-color: var(--term-status-ready, #22C55E);
    background: rgba(34, 197, 94, 0.08);
    color: var(--term-status-ready, #22C55E);
}

.verification-chip--verified::before {
    /* CSS checkmark: small filled circle with inner check shape */
    background: var(--term-status-ready, #22C55E);
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.40);
}

.verification-chip--verified:hover {
    border-color: var(--term-status-ready, #22C55E);
    box-shadow:
        0 0 4px rgba(34, 197, 94, 0.25),
        0 0 12px rgba(34, 197, 94, 0.10);
}

.verification-chip--verified:focus-visible {
    outline: 2px solid var(--term-status-ready, #22C55E);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   §4  STATE: FAILED — red/amber border, X indicator
   -------------------------------------------------------------------------- */

.verification-chip--failed {
    border-color: var(--term-status-error, #EF4444);
    background: rgba(239, 68, 68, 0.08);
    color: var(--term-status-error, #EF4444);
}

.verification-chip--failed::before {
    background: var(--term-status-error, #EF4444);
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.40);
    /* Square shape for X/fail indicator */
    border-radius: 2px;
}

.verification-chip--failed:hover {
    border-color: var(--term-status-error, #EF4444);
    box-shadow:
        0 0 4px rgba(239, 68, 68, 0.25),
        0 0 12px rgba(239, 68, 68, 0.10);
}

.verification-chip--failed:focus-visible {
    outline: 2px solid var(--term-status-error, #EF4444);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   §5  STATE: REVOKED — dimmed, strikethrough
   -------------------------------------------------------------------------- */

.verification-chip--revoked {
    border-color: var(--term-border-subtle, #1E1C18);
    background: var(--term-bg-void, #0C0B0A);
    color: var(--term-fg-muted, #8A8278);
    opacity: 0.55;
    text-decoration: line-through;
    cursor: default;
}

.verification-chip--revoked::before {
    background: var(--term-fg-muted, #8A8278);
    opacity: 0.3;
}

.verification-chip--revoked:hover {
    /* Minimal hover effect — revoked chips are inert */
    opacity: 0.7;
}


/* --------------------------------------------------------------------------
   §6  CHIP LABEL — inner text span (for strikethrough targeting)
   -------------------------------------------------------------------------- */

.verification-chip__label {
    /* WHY: Separate span allows strikethrough on text without hitting the icon */
    display: inline;
}


/* --------------------------------------------------------------------------
   §7  CHIP GROUP — container for multiple chips
   -------------------------------------------------------------------------- */

.verification-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Summary counter — "3/5 verified" badge shown alongside chip groups */
.verification-chip-group__summary {
    font-family: var(--term-font-mono, 'JetBrains Mono', 'Fira Code', 'Consolas', monospace);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--term-fg-muted, #8A8278);
    padding: 2px 8px;
    border: 1px solid var(--term-border-subtle, #1E1C18);
    border-radius: 4px;
    background: var(--term-bg-void, #0C0B0A);
    white-space: nowrap;
    transition:
        border-color 200ms ease,
        color 200ms ease;
}

/* All-verified state for summary */
.verification-chip-group__summary--complete {
    border-color: var(--term-status-ready, #22C55E);
    color: var(--term-status-ready, #22C55E);
    box-shadow:
        0 0 4px rgba(34, 197, 94, 0.15),
        0 0 8px rgba(34, 197, 94, 0.05);
}


/* --------------------------------------------------------------------------
   §8  ACCESSIBILITY — reduced motion, high contrast
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .verification-chip,
    .verification-chip::before,
    .verification-chip-group__summary {
        transition: none;
    }
}

@media (prefers-contrast: more) {
    .verification-chip {
        border-width: 2px;
    }

    .verification-chip--verified {
        background: rgba(34, 197, 94, 0.15);
    }

    .verification-chip--failed {
        background: rgba(239, 68, 68, 0.15);
    }

    .verification-chip--revoked {
        opacity: 0.75;
    }
}


/* --------------------------------------------------------------------------
   §9  LINT CHIP CONTAINER — inline in rail review footer
   -------------------------------------------------------------------------- */

.lint-chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

/* Compact sizing when inside review footer */
.rail-review-footer-left .lint-chip-container .verification-chip {
    font-size: 10px;
    padding: 2px 6px;
}

.rail-review-footer-left .lint-chip-container .verification-chip::before {
    width: 6px;
    height: 6px;
}

.rail-review-footer-left .lint-chip-container .verification-chip-group__summary {
    font-size: 9px;
    padding: 1px 6px;
}


/* --------------------------------------------------------------------------
   §10  ATTESTATION DISCLOSURE — AI provenance badge after signing
   -------------------------------------------------------------------------- */

.attestation-disclosure {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-top: 8px;
    font-family: var(--term-font-mono, 'JetBrains Mono', 'Fira Code', 'Consolas', monospace);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--term-success, #22C55E);
    border: 1px solid rgba(34, 197, 94, 0.30);
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.06);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attestation-disclosure i {
    font-size: 14px;
    flex-shrink: 0;
}

.attestation-disclosure-sep {
    color: var(--term-fg-muted, #8A8278);
    opacity: 0.6;
}

/* Inside the review footer — full width */
.rail-review-footer .attestation-disclosure {
    width: 100%;
    box-sizing: border-box;
}

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

@media (prefers-contrast: more) {
    .attestation-disclosure {
        border-width: 2px;
        background: rgba(34, 197, 94, 0.12);
    }
}