/* ============================================================================
 * Snap Permit AI — frontend.css v1.0.2
 * Premium polish: black primary button text, layered shadows, theme-overrides.
 * WCAG AA contrast. LVHA order. No emoji glyphs.
 * Brand: primary green #0F9B4C, dark green #0A6F36, accent blue #1258C2.
 * ========================================================================= */

:root {
    --spai-primary:        #0F9B4C;
    --spai-primary-light:  #14B85B;
    --spai-primary-dark:   #0A6F36;
    --spai-primary-darker: #074D26;
    --spai-accent:         #1258C2;
    --spai-accent-dark:    #0E3F8C;
    --spai-warn:           #E8A838;
    --spai-warn-dark:      #B07F1E;
    --spai-danger:         #C92020;
    --spai-danger-dark:    #8B1414;

    /* Neutrals */
    --spai-bg:        #FFFFFF;
    --spai-bg-alt:    #F8FAFC;
    --spai-bg-soft:   #F1F5F9;
    --spai-text:      #0F172A;        /* near-black */
    --spai-text-soft: #334155;
    --spai-text-muted:#64748B;
    --spai-border:    #E2E8F0;
    --spai-border-strong: #CBD5E1;

    /* Dark theme (countdown screen) */
    --spai-night:      #0B1D3A;
    --spai-night-2:    #0F2849;
    --spai-night-3:    #1A3563;
    --spai-night-glow: rgba(20, 184, 91, 0.45);

    /* Shape */
    --spai-radius:    14px;
    --spai-radius-sm: 10px;
    --spai-radius-xs: 6px;

    /* Shadows (layered) */
    --spai-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.05);
    --spai-shadow:     0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
    --spai-shadow-md:  0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 20px rgba(15, 23, 42, 0.08);
    --spai-shadow-lg:  0 10px 15px rgba(15, 23, 42, 0.06), 0 20px 40px rgba(15, 23, 42, 0.12);
    --spai-shadow-glow: 0 0 0 4px rgba(15, 155, 76, 0.15);

    /* Transition */
    --spai-tx: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
 * Root container - resets and base typography
 * ========================================================================= */
.spai-root,
.spai-root * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.spai-root {
    color: var(--spai-text);
    line-height: 1.55;
    font-size: 1rem;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -0.005em;
}

/* ============================================================================
 * Header + step indicator
 * ========================================================================= */
.spai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.spai-brand-mini {
    font-weight: 700;
    color: var(--spai-text);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.spai-steps {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.spai-step-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    background: var(--spai-bg-alt);
    border: 1.5px solid var(--spai-border);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--spai-text-muted);
    font-weight: 600;
    transition: all var(--spai-tx);
}

.spai-step-dot.is-on {
    background: var(--spai-primary);
    background-image: linear-gradient(135deg, var(--spai-primary-light) 0%, var(--spai-primary) 100%);
    border-color: var(--spai-primary-dark);
    color: #052914;
    box-shadow: 0 2px 8px rgba(15, 155, 76, 0.3);
}

.spai-step-num {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--spai-border);
    color: var(--spai-text-muted);
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.spai-step-dot.is-on .spai-step-num {
    background: rgba(255, 255, 255, 0.95);
    color: var(--spai-primary-dark);
}

/* ============================================================================
 * Cards
 * ========================================================================= */
.spai-card {
    background: var(--spai-bg) !important;
    border: 1px solid var(--spai-border);
    border-radius: var(--spai-radius);
    box-shadow: var(--spai-shadow);
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: box-shadow var(--spai-tx);
}

.spai-card:hover {
    box-shadow: var(--spai-shadow-md);
}

.spai-card-title {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    color: var(--spai-text) !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.spai-card-body {
    display: grid;
    gap: 1.25rem;
}

.spai-help {
    color: var(--spai-text-soft) !important;
    font-size: 0.925rem;
    margin: 0 0 0.75rem;
    line-height: 1.6;
}

/* ============================================================================
 * Form fields
 * ========================================================================= */
.spai-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.spai-field-label {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--spai-text) !important;
    letter-spacing: 0.01em;
}

.spai-root .spai-field input,
.spai-root .spai-field select,
.spai-root .spai-field textarea {
    width: 100%;
    padding: 0.85rem 1rem !important;
    font: inherit !important;
    font-size: 1rem !important;
    color: var(--spai-text) !important;
    background: var(--spai-bg) !important;
    border: 1.5px solid var(--spai-border-strong) !important;
    border-radius: var(--spai-radius-sm) !important;
    transition: border-color var(--spai-tx), box-shadow var(--spai-tx);
    box-shadow: var(--spai-shadow-sm);
}

.spai-root .spai-field input::placeholder,
.spai-root .spai-field textarea::placeholder {
    color: var(--spai-text-muted) !important;
    opacity: 1;
}

.spai-root .spai-field input:hover,
.spai-root .spai-field select:hover,
.spai-root .spai-field textarea:hover {
    border-color: var(--spai-text-muted) !important;
}

.spai-root .spai-field input:focus,
.spai-root .spai-field select:focus,
.spai-root .spai-field textarea:focus {
    outline: none !important;
    border-color: var(--spai-primary) !important;
    box-shadow: var(--spai-shadow-glow);
}

/* File drop zone */
.spai-drop {
    position: relative;
    border: 2px dashed var(--spai-border-strong);
    background: var(--spai-bg-alt);
    border-radius: var(--spai-radius);
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--spai-text-soft) !important;
    cursor: pointer;
    transition: all var(--spai-tx);
    font-weight: 600;
}

.spai-drop:hover {
    border-color: var(--spai-primary);
    background: rgba(15, 155, 76, 0.04);
    color: var(--spai-text) !important;
    transform: translateY(-1px);
    box-shadow: var(--spai-shadow);
}

.spai-drop svg {
    display: block;
    margin: 0 auto 0.5rem;
    color: var(--spai-primary);
    width: 32px;
    height: 32px;
}

.spai-drop span { display: block; }

.spai-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.spai-file-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: grid;
    gap: 0.4rem;
}

.spai-file-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.9rem;
    background: var(--spai-bg-alt);
    border: 1px solid var(--spai-border);
    border-radius: var(--spai-radius-sm);
    font-size: 0.9rem;
    color: var(--spai-text) !important;
}

/* ============================================================================
 * Buttons — HIGH specificity + !important to override any theme defaults
 * ========================================================================= */
.spai-root .spai-btn,
.spai-root button.spai-btn,
.spai-root a.spai-btn,
.spai-root input.spai-btn,
button.spai-btn,
a.spai-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.8rem 1.6rem !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    border-radius: var(--spai-radius-sm) !important;
    border: 1.5px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all var(--spai-tx) !important;
    min-height: 46px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    letter-spacing: 0.005em !important;
    box-shadow: var(--spai-shadow-sm) !important;
    user-select: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.spai-root .spai-btn:focus-visible {
    outline: 3px solid var(--spai-primary-light) !important;
    outline-offset: 2px !important;
}

/* PRIMARY (green, black text) — the marquee CTA */
.spai-root .spai-btn-primary,
.spai-root button.spai-btn-primary,
.spai-root a.spai-btn-primary,
.spai-root .spai-btn-primary:link,
.spai-root .spai-btn-primary:visited,
button.spai-btn-primary,
a.spai-btn-primary {
    background: var(--spai-primary) !important;
    background-image: linear-gradient(180deg, var(--spai-primary-light) 0%, var(--spai-primary) 100%) !important;
    color: #052914 !important;
    border-color: var(--spai-primary-dark) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 2px 4px rgba(15, 155, 76, 0.2),
        0 4px 12px rgba(15, 155, 76, 0.18) !important;
}

.spai-root .spai-btn-primary:hover,
.spai-root .spai-btn-primary:focus,
button.spai-btn-primary:hover,
a.spai-btn-primary:hover {
    background-image: linear-gradient(180deg, #1AC966 0%, #0DB055 100%) !important;
    color: #052914 !important;
    border-color: var(--spai-primary-darker) !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 4px 8px rgba(15, 155, 76, 0.3),
        0 8px 20px rgba(15, 155, 76, 0.25) !important;
}

.spai-root .spai-btn-primary:active,
button.spai-btn-primary:active,
a.spai-btn-primary:active {
    transform: translateY(0) !important;
    background-image: linear-gradient(180deg, var(--spai-primary) 0%, var(--spai-primary-dark) 100%) !important;
    color: #052914 !important;
    box-shadow:
        0 2px 4px rgba(15, 155, 76, 0.3) inset,
        0 1px 2px rgba(15, 155, 76, 0.2) !important;
}

/* GHOST (outlined) */
.spai-root .spai-btn-ghost,
.spai-root button.spai-btn-ghost,
.spai-root a.spai-btn-ghost,
.spai-root .spai-btn-ghost:link,
.spai-root .spai-btn-ghost:visited,
button.spai-btn-ghost,
a.spai-btn-ghost {
    background: var(--spai-bg) !important;
    background-image: none !important;
    color: var(--spai-text) !important;
    border-color: var(--spai-border-strong) !important;
    text-shadow: none !important;
}

.spai-root .spai-btn-ghost:hover,
.spai-root .spai-btn-ghost:focus,
button.spai-btn-ghost:hover,
a.spai-btn-ghost:hover {
    background: var(--spai-bg-alt) !important;
    color: var(--spai-text) !important;
    border-color: var(--spai-text-muted) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--spai-shadow) !important;
}

.spai-root .spai-btn-ghost:active,
button.spai-btn-ghost:active,
a.spai-btn-ghost:active {
    transform: translateY(0) !important;
    background: var(--spai-bg-soft) !important;
}

/* WARN (orange, dark text) */
.spai-root .spai-btn-warn,
.spai-root button.spai-btn-warn,
.spai-root a.spai-btn-warn,
.spai-root .spai-btn-warn:link,
.spai-root .spai-btn-warn:visited,
button.spai-btn-warn,
a.spai-btn-warn {
    background: var(--spai-warn) !important;
    background-image: linear-gradient(180deg, #F2B649 0%, var(--spai-warn) 100%) !important;
    color: #2A1A03 !important;
    border-color: var(--spai-warn-dark) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 2px 4px rgba(232, 168, 56, 0.25) !important;
}

.spai-root .spai-btn-warn:hover,
.spai-root .spai-btn-warn:focus,
button.spai-btn-warn:hover,
a.spai-btn-warn:hover {
    background-image: linear-gradient(180deg, #F5C25C 0%, #DC9A2A 100%) !important;
    color: #2A1A03 !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 6px 16px rgba(232, 168, 56, 0.3) !important;
}

/* DANGER (red, white text - red+black is unreadable, white is correct) */
.spai-root .spai-btn-danger,
.spai-root button.spai-btn-danger,
.spai-root a.spai-btn-danger,
.spai-root .spai-btn-danger:link,
.spai-root .spai-btn-danger:visited,
button.spai-btn-danger,
a.spai-btn-danger {
    background: var(--spai-danger) !important;
    background-image: linear-gradient(180deg, #E13838 0%, var(--spai-danger) 100%) !important;
    color: #FFFFFF !important;
    border-color: var(--spai-danger-dark) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 2px 4px rgba(201, 32, 32, 0.25) !important;
}

.spai-root .spai-btn-danger:hover,
.spai-root .spai-btn-danger:focus,
button.spai-btn-danger:hover,
a.spai-btn-danger:hover {
    background-image: linear-gradient(180deg, #EE4848 0%, #A81818 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 6px 16px rgba(201, 32, 32, 0.35) !important;
}

.spai-root .spai-btn[disabled],
button.spai-btn[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.spai-root .spai-btn-link,
.spai-root button.spai-btn-link {
    background: transparent !important;
    border: none !important;
    color: var(--spai-accent) !important;
    cursor: pointer !important;
    font: inherit !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    padding: 0.25rem 0.5rem !important;
    box-shadow: none !important;
    min-height: auto !important;
}

.spai-root .spai-btn-link:hover {
    color: var(--spai-accent-dark) !important;
    background: rgba(18, 88, 194, 0.06) !important;
    border-radius: 4px !important;
}

.spai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    justify-content: flex-end;
}

/* ============================================================================
 * Live permit screen (the marketing moment)
 * ========================================================================= */
.spai-permit-screen {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 2fr;
    gap: 2rem;
    background: linear-gradient(135deg, var(--spai-night) 0%, var(--spai-night-2) 60%, var(--spai-night-3) 100%);
    border-radius: var(--spai-radius);
    padding: 2.5rem;
    color: #E2E8F0;
    box-shadow: var(--spai-shadow-lg);
    position: relative;
    overflow: hidden;
}

.spai-permit-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top right, rgba(18, 88, 194, 0.3), transparent 60%),
        radial-gradient(ellipse at bottom left, var(--spai-night-glow), transparent 50%);
    pointer-events: none;
}

.spai-screen-left,
.spai-screen-right {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .spai-permit-screen {
        grid-template-columns: 1fr;
        padding: 1.5rem;
        gap: 1.25rem;
    }
}

/* Stage list (dark theme) */
.spai-stage-list {
    list-style: none;
    padding: 1.25rem;
    margin: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--spai-radius);
    backdrop-filter: blur(8px);
}

.spai-stage-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: background var(--spai-tx);
}

.spai-stage-item:last-child { border-bottom: none; }

.spai-stage-item.is-complete {
    background: rgba(15, 155, 76, 0.04);
}

.spai-stage-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.spai-stage-item.is-complete .spai-stage-icon {
    background: rgba(15, 155, 76, 0.22);
    color: var(--spai-primary-light);
    border-color: rgba(15, 155, 76, 0.4);
    box-shadow: 0 0 12px rgba(15, 155, 76, 0.25);
}

.spai-stage-item.result-fail .spai-stage-icon {
    background: rgba(201, 32, 32, 0.22);
    color: #FF7A7A;
    border-color: rgba(255, 122, 122, 0.4);
}

.spai-stage-item.result-flag .spai-stage-icon {
    background: rgba(232, 168, 56, 0.22);
    color: var(--spai-warn);
    border-color: rgba(232, 168, 56, 0.4);
}

.spai-stage-item.is-in_progress .spai-stage-icon {
    background: rgba(18, 88, 194, 0.22);
    color: #7BB8FF;
    border-color: rgba(123, 184, 255, 0.4);
}

.spai-spin { animation: spai-spin 1s linear infinite; }
@keyframes spai-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.spai-stage-text { flex: 1; min-width: 0; }

.spai-stage-num {
    font-weight: 700;
    font-size: 0.95rem;
    color: #F1F5F9;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.spai-stage-status {
    font-size: 0.75rem;
    color: var(--spai-primary-light);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
}

.spai-stage-item.is-pending .spai-stage-status { color: rgba(255, 255, 255, 0.4); }
.spai-stage-item.result-fail .spai-stage-status { color: #FF7A7A; }
.spai-stage-item.result-flag .spai-stage-status { color: var(--spai-warn); }

/* Timer */
.spai-timer-box {
    text-align: right;
    margin-bottom: 1.75rem;
}

.spai-timer-label {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.spai-timer {
    display: inline-block;
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--spai-primary-light);
    background: rgba(15, 155, 76, 0.1);
    border: 1.5px solid rgba(15, 155, 76, 0.35);
    border-radius: 12px;
    padding: 0.4rem 1.25rem;
    letter-spacing: 0.1em;
    box-shadow:
        0 0 40px rgba(15, 155, 76, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-shadow: 0 0 20px rgba(20, 184, 91, 0.5);
}

/* Result */
.spai-result-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7BB8FF;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.spai-result-headline {
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 0.95;
    margin-bottom: 1rem;
    color: #fff;
}

.spai-result-headline.is-pass {
    color: var(--spai-primary-light);
    text-shadow:
        0 0 40px rgba(20, 184, 91, 0.6),
        0 0 80px rgba(20, 184, 91, 0.3);
}

.spai-result-headline.is-flag {
    color: var(--spai-warn);
    text-shadow: 0 0 30px rgba(232, 168, 56, 0.4);
}

.spai-result-headline.is-fail {
    color: #FF7A7A;
    text-shadow: 0 0 30px rgba(255, 122, 122, 0.4);
}

.spai-result-meta {
    color: #E2E8F0;
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.spai-result-meta strong {
    color: var(--spai-primary-light);
    font-weight: 800;
}

.spai-result-summary {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.spai-result-footer { margin-top: 1.75rem; }
.spai-result-actions { margin-bottom: 0.85rem; }

.spai-disclaimer {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.5;
}

/* ============================================================================
 * Track / dashboard / examiner
 * ========================================================================= */
.spai-track-form {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.spai-root .spai-track-form input {
    flex: 1;
    padding: 0.85rem 1rem !important;
    font: inherit !important;
    font-size: 1rem !important;
    border: 1.5px solid var(--spai-border-strong) !important;
    border-radius: var(--spai-radius-sm) !important;
    color: var(--spai-text) !important;
    background: var(--spai-bg) !important;
    box-shadow: var(--spai-shadow-sm);
}

.spai-root .spai-track-form input:focus {
    outline: none !important;
    border-color: var(--spai-primary) !important;
    box-shadow: var(--spai-shadow-glow);
}

.spai-track-detail {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--spai-border);
}

.spai-track-detail h2 {
    margin: 0 0 1rem;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--spai-text) !important;
    font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
    letter-spacing: 0.02em;
}

.spai-dl {
    display: grid;
    grid-template-columns: minmax(150px, max-content) 1fr;
    gap: 0.6rem 1.5rem;
    margin: 1rem 0;
}

.spai-dl dt {
    font-weight: 700;
    color: var(--spai-text-muted) !important;
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.spai-dl dd {
    margin: 0;
    color: var(--spai-text) !important;
    font-weight: 500;
}

.spai-track-summary {
    background: var(--spai-bg-alt);
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--spai-primary);
    border-radius: var(--spai-radius-sm);
    color: var(--spai-text) !important;
    margin: 1rem 0;
    line-height: 1.6;
}

.spai-stage-list-compact {
    background: var(--spai-bg-alt);
    margin-top: 1rem;
    border: 1px solid var(--spai-border);
}

.spai-stage-list-compact .spai-stage-item {
    border-bottom-color: var(--spai-border);
}

.spai-stage-list-compact .spai-stage-item:hover {
    background: rgba(15, 155, 76, 0.03);
}

.spai-stage-list-compact .spai-stage-num {
    color: var(--spai-text);
}

.spai-stage-list-compact .spai-stage-status {
    color: var(--spai-primary-dark);
}

.spai-stage-list-compact .spai-stage-item.is-pending .spai-stage-status {
    color: var(--spai-text-muted);
}

.spai-stage-list-compact .spai-stage-item.is-complete .spai-stage-icon {
    background: rgba(15, 155, 76, 0.12);
    color: var(--spai-primary-dark);
    box-shadow: none;
}

.spai-stage-list-compact .spai-stage-item.result-fail .spai-stage-icon {
    background: rgba(201, 32, 32, 0.1);
    color: var(--spai-danger);
}

.spai-stage-list-compact .spai-stage-item.result-flag .spai-stage-icon {
    background: rgba(232, 168, 56, 0.15);
    color: var(--spai-warn-dark);
}

/* Dashboard */
.spai-dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.spai-dash-head h1 {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--spai-text) !important;
    letter-spacing: -0.02em;
}

.spai-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--spai-bg);
    border-radius: var(--spai-radius);
    overflow: hidden;
    box-shadow: var(--spai-shadow);
    border: 1px solid var(--spai-border);
}

.spai-table th,
.spai-table td {
    text-align: left;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--spai-border);
    color: var(--spai-text) !important;
}

.spai-table tr:last-child td {
    border-bottom: none;
}

.spai-table tr:hover td {
    background: var(--spai-bg-alt);
}

.spai-table th {
    background: var(--spai-bg-alt);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--spai-text-muted) !important;
    font-weight: 700;
}

.spai-table td strong {
    font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
    color: var(--spai-primary-dark);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

/* Pills */
.spai-pill {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: var(--spai-bg-soft);
    color: var(--spai-text) !important;
    border: 1px solid var(--spai-border);
    white-space: nowrap;
    text-transform: uppercase;
}

.pill-pass,
.pill-approved {
    background: rgba(15, 155, 76, 0.12);
    color: #0A4A24 !important;
    border-color: rgba(15, 155, 76, 0.3);
}

.pill-flag,
.pill-awaiting_examiner,
.pill-screening,
.pill-changes_requested {
    background: rgba(232, 168, 56, 0.18);
    color: #6E4A05 !important;
    border-color: rgba(232, 168, 56, 0.4);
}

.pill-fail,
.pill-denied,
.pill-denied_pending_review {
    background: rgba(201, 32, 32, 0.1);
    color: #8B1414 !important;
    border-color: rgba(201, 32, 32, 0.25);
}

/* Examiner cards */
.spai-exam-card {
    padding: 1.5rem;
    border-left: 4px solid var(--spai-border-strong);
    transition: border-color var(--spai-tx);
}

.spai-exam-card:hover {
    border-left-color: var(--spai-primary);
}

.spai-exam-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.spai-exam-permit {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--spai-text) !important;
    font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
    letter-spacing: 0.02em;
}

.spai-exam-meta {
    color: var(--spai-text-soft) !important;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.spai-exam-summary {
    background: var(--spai-bg-alt);
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--spai-primary);
    border-radius: var(--spai-radius-xs);
    margin: 0.75rem 0 1rem;
    font-size: 0.9rem;
    color: var(--spai-text) !important;
    line-height: 1.55;
}

.spai-root .spai-exam-notes {
    width: 100%;
    padding: 0.75rem 1rem !important;
    border: 1.5px solid var(--spai-border-strong) !important;
    border-radius: var(--spai-radius-sm) !important;
    font: inherit !important;
    font-size: 0.95rem !important;
    color: var(--spai-text) !important;
    background: var(--spai-bg) !important;
    resize: vertical !important;
}

.spai-root .spai-exam-notes:focus {
    outline: none !important;
    border-color: var(--spai-primary) !important;
    box-shadow: var(--spai-shadow-glow);
}

/* ============================================================================
 * Auth, notices, modal
 * ========================================================================= */
.spai-auth-wrap {
    max-width: 440px;
    margin: 2.5rem auto;
    background: var(--spai-bg);
    padding: 2.5rem;
    border-radius: var(--spai-radius);
    border: 1px solid var(--spai-border);
    box-shadow: var(--spai-shadow-md);
}

.spai-auth-title {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--spai-text) !important;
    letter-spacing: -0.02em;
}

.spai-auth-foot {
    text-align: center;
    margin-top: 1.25rem;
    color: var(--spai-text-muted);
    font-size: 0.9rem;
}

.spai-notice {
    padding: 1rem 1.25rem;
    border-radius: var(--spai-radius-sm);
    margin: 1rem 0;
    font-size: 0.95rem;
    color: var(--spai-text) !important;
    line-height: 1.5;
}

.spai-notice-info {
    background: rgba(18, 88, 194, 0.08);
    border-left: 4px solid var(--spai-accent);
}

.spai-notice-err {
    background: rgba(201, 32, 32, 0.08);
    border-left: 4px solid var(--spai-danger);
    color: var(--spai-danger-dark) !important;
}

.spai-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--spai-text-muted) !important;
    background: var(--spai-bg-alt);
    border: 1px dashed var(--spai-border-strong);
    border-radius: var(--spai-radius);
    font-size: 1rem;
    font-weight: 500;
}

.spai-loading {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--spai-text-muted) !important;
    font-size: 0.95rem;
    font-weight: 600;
}

.spai-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 1rem;
    overflow: hidden;
    animation: spai-fade-in 0.2s ease-out;
}

@keyframes spai-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.spai-modal {
    background: var(--spai-bg);
    border-radius: var(--spai-radius);
    max-width: 500px;
    width: 100%;
    padding: 1.75rem;
    box-shadow: var(--spai-shadow-lg);
    animation: spai-modal-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes spai-modal-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.spai-modal-title {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--spai-text) !important;
    letter-spacing: -0.01em;
}

.spai-modal-body {
    margin: 0 0 0.75rem;
    color: var(--spai-text-soft) !important;
}

.spai-modal-url {
    background: var(--spai-bg-soft);
    padding: 0.75rem 1rem;
    border-radius: var(--spai-radius-sm);
    font-family: 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
    font-size: 0.85rem;
    word-break: break-all;
    color: var(--spai-text) !important;
    margin: 0 0 1.25rem;
    border: 1px solid var(--spai-border);
}

.spai-modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

/* ============================================================================
 * Responsive
 * ========================================================================= */
@media (max-width: 768px) {
    .spai-card { padding: 1.5rem; }
    .spai-table { font-size: 0.9rem; }
    .spai-table th, .spai-table td { padding: 0.75rem 0.85rem; }
}

@media (max-width: 600px) {
    .spai-card { padding: 1.25rem; }
    .spai-actions { justify-content: stretch; }
    .spai-root .spai-actions .spai-btn { flex: 1 1 auto !important; }
    .spai-dl { grid-template-columns: 1fr; gap: 0.25rem 0; }
    .spai-dl dt { margin-top: 0.5rem; }
    .spai-dash-head { flex-direction: column; align-items: stretch; }
    .spai-track-form { flex-direction: column; }
    .spai-step-label { display: none; }
    .spai-step-dot { padding: 0.5rem; }
}

/* ============================================================================
 * AI Permit Assistant — Floating chat panel
 * ========================================================================= */
.spai-assistant-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99998;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.85rem 1.4rem 0.85rem 1.1rem !important;
    background: var(--spai-primary) !important;
    background-image: linear-gradient(135deg, var(--spai-primary-light) 0%, var(--spai-primary) 50%, var(--spai-primary-dark) 100%) !important;
    color: #052914 !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    box-shadow:
        0 4px 12px rgba(15, 155, 76, 0.4),
        0 12px 30px rgba(15, 155, 76, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transition: all var(--spai-tx) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.spai-assistant-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 6px 16px rgba(15, 155, 76, 0.5),
        0 16px 40px rgba(15, 155, 76, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.spai-assistant-btn.is-active {
    background-image: linear-gradient(135deg, var(--spai-primary-dark) 0%, var(--spai-primary-darker) 100%) !important;
    color: #ffffff !important;
}

.spai-assistant-btn-label {
    font-weight: 800;
}

.spai-assistant-pulse {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid var(--spai-primary-light);
    pointer-events: none;
    animation: spai-pulse 2.5s ease-out infinite;
}

@keyframes spai-pulse {
    0%   { transform: scale(1);    opacity: 0.55; }
    100% { transform: scale(1.45); opacity: 0; }
}

.spai-assistant-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: min(420px, calc(100vw - 48px));
    height: min(640px, calc(100vh - 120px));
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.18),
        0 28px 64px rgba(15, 23, 42, 0.2);
    border: 1px solid var(--spai-border);
    display: flex;
    flex-direction: column;
    z-index: 99999;
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    pointer-events: none;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.spai-assistant-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.spai-assistant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, var(--spai-night) 0%, var(--spai-night-2) 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.spai-assistant-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top right, rgba(20, 184, 91, 0.25), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(18, 88, 194, 0.15), transparent 60%);
    pointer-events: none;
}

.spai-assistant-head-l {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.spai-assistant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--spai-primary-light) 0%, var(--spai-primary) 100%);
    color: #052914;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 8px rgba(15, 155, 76, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.spai-assistant-title {
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    letter-spacing: -0.01em;
}

.spai-assistant-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 1px;
}

.spai-assistant-close {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background var(--spai-tx) !important;
    padding: 0 !important;
    font-weight: 400 !important;
    min-height: auto !important;
    position: relative;
    z-index: 1;
}

.spai-assistant-close:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

.spai-assistant-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--spai-bg-alt);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    scroll-behavior: smooth;
}

.spai-msg {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    animation: spai-msg-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes spai-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.spai-msg-user {
    flex-direction: row-reverse;
}

.spai-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--spai-primary-light) 0%, var(--spai-primary) 100%);
    color: #052914;
    font-weight: 900;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 3px rgba(15, 155, 76, 0.3);
}

.spai-msg-content {
    max-width: 78%;
    padding: 0.7rem 1rem;
    border-radius: 16px;
    font-size: 0.92rem;
    line-height: 1.5;
    background: #fff;
    color: var(--spai-text);
    border: 1px solid var(--spai-border);
    box-shadow: var(--spai-shadow-sm);
}

.spai-msg-user .spai-msg-content {
    background: var(--spai-primary);
    background-image: linear-gradient(135deg, var(--spai-primary-light) 0%, var(--spai-primary) 100%);
    color: #052914;
    border-color: var(--spai-primary-dark);
    border-bottom-right-radius: 4px;
    font-weight: 500;
}

.spai-msg-assistant .spai-msg-content {
    border-bottom-left-radius: 4px;
}

.spai-msg-content p { margin: 0 0 0.6rem; }
.spai-msg-content p:last-child { margin-bottom: 0; }
.spai-msg-content strong { font-weight: 800; color: var(--spai-primary-dark); }
.spai-msg-content ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.spai-msg-content li { margin: 0.2rem 0; }

.spai-typing {
    display: inline-flex;
    gap: 4px;
    padding: 0.25rem 0;
}

.spai-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--spai-text-muted);
    animation: spai-typing 1.4s infinite ease-in-out;
}

.spai-typing span:nth-child(2) { animation-delay: 0.2s; }
.spai-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes spai-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

.spai-assistant-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem 0.4rem;
    background: var(--spai-bg-alt);
    border-top: 1px solid var(--spai-border);
}

.spai-assistant-chip {
    background: #fff !important;
    color: var(--spai-text) !important;
    border: 1.5px solid var(--spai-border-strong) !important;
    border-radius: 999px !important;
    padding: 0.45rem 0.95rem !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--spai-tx) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: auto !important;
    line-height: 1.2 !important;
}

.spai-assistant-chip:hover {
    background: var(--spai-primary) !important;
    color: #052914 !important;
    border-color: var(--spai-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 155, 76, 0.25);
}

.spai-assistant-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border-top: 1px solid var(--spai-border);
}

.spai-root .spai-assistant-form input,
.spai-assistant-form input {
    flex: 1;
    padding: 0.7rem 0.9rem !important;
    font: inherit !important;
    font-size: 0.95rem !important;
    border: 1.5px solid var(--spai-border-strong) !important;
    border-radius: 10px !important;
    color: var(--spai-text) !important;
    background: var(--spai-bg-alt) !important;
    transition: all var(--spai-tx) !important;
}

.spai-assistant-form input:focus {
    outline: none !important;
    border-color: var(--spai-primary) !important;
    background: #fff !important;
    box-shadow: var(--spai-shadow-glow);
}

.spai-assistant-send {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: var(--spai-primary) !important;
    background-image: linear-gradient(135deg, var(--spai-primary-light) 0%, var(--spai-primary) 100%) !important;
    color: #052914 !important;
    border: 1.5px solid var(--spai-primary-dark) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--spai-tx) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: auto !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(15, 155, 76, 0.25) !important;
}

.spai-assistant-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 155, 76, 0.35) !important;
}

@media (max-width: 600px) {
    .spai-assistant-panel {
        bottom: 0;
        right: 0;
        left: 0;
        width: auto;
        height: 85vh;
        border-radius: 18px 18px 0 0;
    }
    .spai-assistant-btn { bottom: 16px; right: 16px; }
    .spai-assistant-btn-label { display: none; }
    .spai-assistant-btn { padding: 0.85rem !important; }
}

/* ============================================================================
 * Inspections (track page)
 * ========================================================================= */
.spai-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--spai-text);
    margin: 1.5rem 0 0.75rem;
    letter-spacing: -0.01em;
}

.spai-inspections {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--spai-border);
}

.spai-inspection-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.spai-inspection-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--spai-bg-alt);
    border: 1px solid var(--spai-border);
    border-radius: var(--spai-radius-sm);
    border-left: 4px solid var(--spai-border-strong);
    transition: all var(--spai-tx);
}

.spai-inspection-item:hover {
    box-shadow: var(--spai-shadow);
    transform: translateY(-1px);
}

.spai-inspection-item.is-passed { border-left-color: var(--spai-primary); }
.spai-inspection-item.is-failed { border-left-color: var(--spai-danger); }
.spai-inspection-item.is-scheduled { border-left-color: var(--spai-accent); }

.spai-inspection-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--spai-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--spai-shadow-sm);
}

.spai-inspection-item.is-passed .spai-inspection-icon { color: var(--spai-primary); background: rgba(15, 155, 76, 0.1); }
.spai-inspection-item.is-failed .spai-inspection-icon { color: var(--spai-danger); background: rgba(201, 32, 32, 0.1); }
.spai-inspection-item.is-scheduled .spai-inspection-icon { color: var(--spai-accent); background: rgba(18, 88, 194, 0.1); }

.spai-inspection-meta { flex: 1; min-width: 0; }
.spai-inspection-type { font-weight: 800; color: var(--spai-text); font-size: 0.95rem; }
.spai-inspection-date { font-size: 0.85rem; color: var(--spai-text-muted); margin-top: 0.15rem; }
.spai-inspection-inspector { font-size: 0.825rem; color: var(--spai-text-soft); margin-top: 0.15rem; }
.spai-inspection-result {
    font-size: 0.875rem;
    color: var(--spai-text);
    margin-top: 0.4rem;
    padding: 0.45rem 0.7rem;
    background: rgba(15, 155, 76, 0.05);
    border-radius: 6px;
    border-left: 2px solid var(--spai-primary);
}

.pill-passed    { background: rgba(15, 155, 76, 0.15); color: #0A4A24 !important; border-color: rgba(15, 155, 76, 0.3); }
.pill-failed    { background: rgba(201, 32, 32, 0.12); color: #8B1414 !important; border-color: rgba(201, 32, 32, 0.3); }
.pill-scheduled { background: rgba(18, 88, 194, 0.12); color: #0E3F8C !important; border-color: rgba(18, 88, 194, 0.3); }
.pill-reschedule{ background: rgba(232, 168, 56, 0.18); color: #6E4A05 !important; border-color: rgba(232, 168, 56, 0.4); }

/* ============================================================================
 * Public comments
 * ========================================================================= */
.spai-comments {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.spai-comments-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
}

.spai-comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.65rem;
}

.spai-comment-item {
    padding: 1rem 1.25rem;
    background: var(--spai-bg);
    border: 1px solid var(--spai-border);
    border-left: 4px solid var(--spai-border-strong);
    border-radius: var(--spai-radius-sm);
    box-shadow: var(--spai-shadow-sm);
}

.spai-comment-item.sentiment-support { border-left-color: var(--spai-primary); }
.spai-comment-item.sentiment-oppose  { border-left-color: var(--spai-danger); }
.spai-comment-item.sentiment-question { border-left-color: var(--spai-warn); }

.spai-comment-top {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 0.5rem; flex-wrap: wrap;
}

.spai-comment-name { font-weight: 700; color: var(--spai-text); }
.spai-comment-text { margin: 0 0 0.4rem; color: var(--spai-text-soft); line-height: 1.5; }
.spai-comment-date { font-size: 0.8rem; color: var(--spai-text-muted); }

.spai-comment-form {
    padding: 1.25rem !important;
    background: var(--spai-bg-alt) !important;
    border: 1px solid var(--spai-border);
}

.spai-comment-form h4 {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--spai-text);
}

.spai-root .spai-comment-input,
.spai-comment-input {
    width: 100%;
    padding: 0.7rem 0.9rem !important;
    margin-bottom: 0.6rem;
    border: 1.5px solid var(--spai-border-strong) !important;
    border-radius: var(--spai-radius-sm) !important;
    font: inherit !important;
    font-size: 0.95rem !important;
    color: var(--spai-text) !important;
    background: #fff !important;
}

.spai-comment-input:focus {
    outline: none !important;
    border-color: var(--spai-primary) !important;
    box-shadow: var(--spai-shadow-glow);
}

.spai-sentiment-pick {
    display: flex; gap: 1rem; flex-wrap: wrap;
    margin: 0.5rem 0 0.85rem;
}

.spai-sentiment-opt {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.9rem; font-weight: 600;
    cursor: pointer;
    color: var(--spai-text);
}

.spai-sentiment-opt input { accent-color: var(--spai-primary); }

/* -----------------------------------------------------------------------------
   v1.3.0 — Fee payment + official document cards (track view)
----------------------------------------------------------------------------- */
.spai-pay-card {
    background: var(--spai-bg-alt);
    border: 1px solid var(--spai-border);
    border-left: 4px solid var(--spai-warn);
    border-radius: var(--spai-radius-sm);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}
.spai-pay-card h3 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    color: var(--spai-text);
}
.spai-pay-card p {
    margin: 0 0 .75rem;
    color: var(--spai-text-soft);
    line-height: 1.55;
}
.spai-pay-card .spai-pay-offline {
    background: var(--spai-bg-soft);
    border-radius: var(--spai-radius-xs);
    padding: .6rem .8rem;
    color: var(--spai-text);
}
.spai-doc-card {
    border-left-color: var(--spai-primary);
}
.spai-doc-card .spai-btn svg {
    vertical-align: -3px;
    margin-right: .3rem;
}

/* -----------------------------------------------------------------------------
   v1.4.0 — Resubmission, diff panel, renewal, slot scheduler
----------------------------------------------------------------------------- */
.spai-resubmit-card { border-left-color: var(--spai-accent); }
.spai-resubmit-label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    color: var(--spai-text-soft);
    margin: .6rem 0 .25rem;
}
.spai-resubmit-card .spai-comment-input,
.spai-slot-scheduler .spai-comment-input {
    width: 100%;
    margin-bottom: .25rem;
}
.spai-resubmit-card input[type="file"] {
    display: block;
    margin: .25rem 0 .9rem;
}

.spai-diff-panel { margin: 1rem 0; }
.spai-diff-fields {
    list-style: none;
    padding: 0;
    margin: 0 0 .6rem;
    font-size: .85rem;
    color: var(--spai-text-soft);
}
.spai-diff-fields li {
    padding: .25rem .5rem;
    background: var(--spai-bg-soft);
    border-radius: var(--spai-radius-xs);
    margin-bottom: .25rem;
}
.spai-diff-list { list-style: none; padding: 0; margin: 0; }
.spai-diff-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem .6rem;
    border-left: 4px solid var(--spai-border-strong);
    background: var(--spai-bg-alt);
    border-radius: var(--spai-radius-xs);
    margin-bottom: .3rem;
    font-size: .88rem;
}
.spai-diff-item.is-improved  { border-left-color: var(--spai-primary); }
.spai-diff-item.is-regressed { border-left-color: var(--spai-danger); }
.spai-diff-item.is-changed   { border-left-color: var(--spai-warn); }
.spai-diff-stage { font-weight: 600; color: var(--spai-text); }
.spai-diff-vals  { color: var(--spai-text-soft); white-space: nowrap; }
.spai-diff-overall {
    font-weight: 700;
    color: var(--spai-text);
    margin: .5rem 0 0;
}

.spai-slot-scheduler { margin-top: 1rem; }
.spai-slot-scheduler h4 { margin: 0 0 .5rem; }

/* -----------------------------------------------------------------------------
   v1.5.0 — GIS parcel chip, measurements panel
----------------------------------------------------------------------------- */
.spai-parcel-chip {
    display: block;
    font-size: .82rem;
    margin-top: .35rem;
    color: var(--spai-text-muted);
    min-height: 1.1em;
}
.spai-parcel-chip.is-found {
    color: var(--spai-primary-dark);
    font-weight: 600;
}
.spai-parcel-chip.is-found svg { vertical-align: -2px; margin-right: .2rem; }
.spai-parcel-chip.is-missing { color: var(--spai-warn-dark); }

.spai-gis-line {
    font-size: .85rem;
    font-weight: 600;
    color: var(--spai-primary-dark);
    background: var(--spai-bg-soft);
    border-radius: var(--spai-radius-xs);
    padding: .45rem .7rem;
    margin: .5rem 0;
}

.spai-measure-panel { margin: 1rem 0; }
.spai-measure-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: .4rem;
}
.spai-measure-item {
    background: var(--spai-bg-alt);
    border: 1px solid var(--spai-border);
    border-left: 4px solid var(--spai-border-strong);
    border-radius: var(--spai-radius-xs);
    padding: .5rem .65rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.spai-measure-item.conf-high   { border-left-color: var(--spai-primary); }
.spai-measure-item.conf-medium { border-left-color: var(--spai-warn); }
.spai-measure-item.conf-low    { border-left-color: var(--spai-border-strong); }
.spai-measure-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--spai-text-muted); }
.spai-measure-val   { font-size: 1.05rem; font-weight: 700; color: var(--spai-text); }
.spai-measure-conf  { font-size: .72rem; color: var(--spai-text-muted); }
.spai-measure-note  { font-size: .8rem; color: var(--spai-text-muted); margin: .5rem 0 0; line-height: 1.5; }

/* -----------------------------------------------------------------------------
   v1.6.0 — Inspector mobile view, department board, contractor line
----------------------------------------------------------------------------- */
.spai-contractor-warn { color: var(--spai-warn-dark); }

.spai-dept-board { margin: .75rem 0; }
.spai-dept-list { list-style: none; padding: 0; margin: 0; }
.spai-dept-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .45rem .6rem;
    background: var(--spai-bg-alt);
    border: 1px solid var(--spai-border);
    border-radius: var(--spai-radius-xs);
    margin-bottom: .3rem;
}
.spai-dept-name { font-weight: 600; color: var(--spai-text); }

.spai-insp-card { margin-bottom: 1rem; }
.spai-insp-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: .35rem;
}
.spai-insp-when { font-weight: 700; color: var(--spai-accent-dark); }
.spai-insp-addr { margin: .15rem 0; font-size: 1.15rem; }
.spai-insp-meta { color: var(--spai-text-soft); margin: .15rem 0 .5rem; font-size: .9rem; }
.spai-insp-links a { font-weight: 600; }
.spai-insp-open, .spai-insp-submit {
    width: 100%;
    padding: .85rem 1rem;
    font-size: 1.05rem; /* large touch targets in the field */
}
.spai-insp-form { margin-top: .75rem; }
.spai-insp-seg {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .4rem;
    margin-bottom: .6rem;
}
.spai-seg-btn {
    padding: .8rem .5rem;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid var(--spai-border-strong);
    border-radius: var(--spai-radius-xs);
    background: var(--spai-bg);
    color: var(--spai-text-soft);
    cursor: pointer;
}
.spai-seg-btn.is-active {
    background: var(--spai-primary);
    border-color: var(--spai-primary-dark);
    color: #FFFFFF;
}
.spai-insp-form .spai-comment-input { width: 100%; margin-bottom: .5rem; }
.spai-insp-form input[type="file"] { display: block; margin: .25rem 0 .75rem; }
.spai-sig-pad {
    display: block;
    width: 100%;
    height: 150px;
    border: 2px dashed var(--spai-border-strong);
    border-radius: var(--spai-radius-xs);
    background: var(--spai-bg);
    touch-action: none;
    margin-bottom: .25rem;
}
.spai-insp-form .spai-btn-link { display: inline-block; margin-bottom: .75rem; }

/* -----------------------------------------------------------------------------
   v1.7.0 — Feasibility checker + activity map
----------------------------------------------------------------------------- */
.spai-feas-sub { color: var(--spai-text-soft); line-height: 1.55; margin: .25rem 0 1rem; }
.spai-feas .spai-comment-input { width: 100%; margin-bottom: .25rem; }
.spai-feas-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.spai-feas-btn { width: 100%; padding: .85rem; font-size: 1.05rem; margin-top: .75rem; }
.spai-feas-note { color: var(--spai-warn-dark); font-size: .85rem; }
.spai-feas-out { margin-top: 1.25rem; }
.spai-feas-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .6rem;
    margin: .75rem 0 1rem;
}
.spai-feas-stat {
    background: var(--spai-bg-alt);
    border: 1px solid var(--spai-border);
    border-top: 4px solid var(--spai-primary);
    border-radius: var(--spai-radius-sm);
    padding: .75rem .9rem;
}
.spai-feas-stat-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--spai-text-muted);
}
.spai-feas-stat-val { font-size: 1.35rem; font-weight: 800; color: var(--spai-text); margin: .15rem 0; }
.spai-feas-stat-note { font-size: .75rem; color: var(--spai-text-muted); line-height: 1.4; }
.spai-feas-rules { list-style: none; padding: 0; margin: 0 0 .75rem; }
.spai-feas-rule {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--spai-border);
    font-size: .9rem;
}
.spai-feas-rule-label { color: var(--spai-text-soft); }
.spai-feas-rule-val { font-weight: 700; color: var(--spai-text); white-space: nowrap; }
.spai-feas-cta {
    background: var(--spai-bg-soft);
    border-radius: var(--spai-radius-sm);
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
}
.spai-feas-cta p { margin: 0 0 .75rem; color: var(--spai-text-soft); }

.spai-activity-map {
    height: 480px;
    border-radius: var(--spai-radius-sm);
    border: 1px solid var(--spai-border);
    margin: .75rem 0 .35rem;
    z-index: 1;
}
.spai-map-legend { font-size: .85rem; color: var(--spai-text-soft); margin: 0 0 1rem; }
.spai-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    vertical-align: -1px;
}
@media (max-width: 600px) {
    .spai-feas-row { grid-template-columns: 1fr; }
    .spai-activity-map { height: 340px; }
}