/* ============================================================
   TitleTown · Slip Analyzer — page styles
   v0.18.2 — Universal Slip Import / transcript review
   ------------------------------------------------------------
   All classes prefixed sa-* to avoid collision with the global
   styles.css. Inherits typography (Inter Tight + JetBrains Mono),
   color tokens, and spacing scale from the main stylesheet.

   If a token below resolves to its fallback (right side of
   var(--..., fallback)), that means styles.css doesn't define
   that token — fallback is the editorial-terminal default
   matched to the existing palette in index.html.

   v0.18.20.1 (SA #AY) — --accent and --accent-hover were never defined
   in any stylesheet the page loads, so all 57 var(--accent, #5DE0AC)
   read their fallback, which equals --accent-pos (#5DE0AC in styles.css
   and terminal-mint). They now read var(--accent-pos), the defined
   token, so a retune of --accent-pos reaches this page. The two hover
   fallbacks are plain #75E4BE: no hover token exists. Rendered colours
   are unchanged. Two literals remain in version-named appends (idle
   v0.18.10.7: --accent, #5DE0AC; status v0.16.83: --accent, #6cf08e, a
   different green), which are cached immutable: they change at their
   next mint, not in place.
   ============================================================ */

/* ---- subtitle under page title ---- */
.sa-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #6a6a6a);
    margin-top: 4px;
}

/* ---- staleness / error banner ---- */
.sa-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--warn, #f0a86c);
    border-left-width: 3px;
    background: rgba(240, 168, 108, 0.06);
    border-radius: 2px;
}
.sa-banner-error {
    border-color: var(--danger, #f06c6c);
    background: rgba(240, 108, 108, 0.06);
}
.sa-banner-mark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--warn, #f0a86c);
    color: #0a0a0a;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.sa-banner-error .sa-banner-mark { background: var(--danger, #f06c6c); }
.sa-banner-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text, #d4d4d4);
}
.sa-banner-text code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 2px;
}

/* ---- input card ---- */
.sa-input-card {
    margin: 20px 0;
    padding: 16px;
    border: 1px solid var(--border, #1f1f1f);
    background: var(--surface, #0f0f0f);
    border-radius: 2px;
}
.sa-input-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sa-input-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted, #6a6a6a);
    font-weight: 600;
}
.sa-input-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-dim, #4a4a4a);
}
.sa-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    background: var(--bg, #0a0a0a);
    border: 1px solid var(--border, #1f1f1f);
    color: var(--text, #d4d4d4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.55;
    border-radius: 2px;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
    transition: border-color 120ms ease;
}
.sa-textarea:focus {
    border-color: var(--accent-pos);
}
.sa-textarea::placeholder {
    color: var(--text-dim, #3a3a3a);
}

.sa-input-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.sa-line-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted, #6a6a6a);
    margin-right: auto;
}

/* ---- buttons ---- */
.sa-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 9px 16px;
    border: 1px solid var(--border, #1f1f1f);
    background: transparent;
    color: var(--text, #d4d4d4);
    cursor: pointer;
    border-radius: 2px;
    transition: all 120ms ease;
}
.sa-btn:hover:not(:disabled) {
    border-color: var(--text-muted, #6a6a6a);
}
.sa-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.sa-btn-primary {
    background: var(--accent-pos);
    color: #0a0a0a;
    border-color: var(--accent-pos);
}
.sa-btn-primary:hover:not(:disabled) {
    background: #75E4BE;   /* hover mint: styles.css has no hover token (SA #AY) */
    border-color: #75E4BE;   /* hover mint: styles.css has no hover token (SA #AY) */
}
.sa-btn-secondary { /* default styled */ }
.sa-btn-ghost {
    border-color: transparent;
    color: var(--text-muted, #6a6a6a);
    padding: 6px 10px;
    font-size: 10px;
}
.sa-btn-ghost:hover:not(:disabled) {
    color: var(--accent-pos);
    border-color: var(--accent-pos);
}

/* ---- skipped notes ---- */
.sa-skipped {
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--border, #1f1f1f);
    border-left: 3px solid var(--warn, #f0a86c);
    background: rgba(240, 168, 108, 0.04);
    border-radius: 2px;
}
.sa-skipped-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.sa-skipped-mark {
    font-family: 'JetBrains Mono', monospace;
    color: var(--warn, #f0a86c);
    font-weight: 700;
}
.sa-skipped-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text, #d4d4d4);
}
.sa-skipped-list {
    margin: 0;
    padding-left: 22px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted, #9a9a9a);
}
.sa-skipped-list li { margin-bottom: 2px; }

/* ---- results section ---- */
.sa-results {
    margin: 24px 0;
}
.sa-results-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.sa-results-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text, #f0f0f0);
}
.sa-results-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted, #6a6a6a);
    letter-spacing: 0.04em;
}

/* ---- table ---- */
.sa-table {
    border: 1px solid var(--border, #1f1f1f);
    border-radius: 2px;
    overflow: hidden;
    background: var(--surface, #0f0f0f);
}
.sa-row {
    display: grid;
    grid-template-columns: 32px minmax(180px, 2fr) 80px 64px 60px 80px 80px 80px 80px 110px;
    align-items: center;
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border, #1f1f1f);
}
.sa-row:last-child { border-bottom: none; }
.sa-row-header {
    background: var(--surface-elevated, #131313);
    color: var(--text-muted, #6a6a6a);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    padding-top: 12px;
    padding-bottom: 12px;
    position: sticky;
    top: 0;
    z-index: 1;
}
.sa-row-data {
    cursor: pointer;
    transition: background 100ms ease;
}
.sa-row-data:hover {
    background: rgba(255, 255, 255, 0.02);
}
.sa-row-expanded {
    background: rgba(108, 240, 142, 0.025);
}

.sa-cell { padding: 0 6px; }
.sa-cell-toggle {
    color: var(--text-muted, #6a6a6a);
    font-size: 10px;
    text-align: center;
}
.sa-chevron {
    display: inline-block;
    transition: transform 120ms ease;
}
.sa-cell-player {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sa-player-name {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    color: var(--text, #f0f0f0);
}
.sa-player-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted, #6a6a6a);
    letter-spacing: 0.04em;
}
.sa-cell-stat {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--text, #d4d4d4);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sa-cell-line,
.sa-cell-side,
.sa-cell-window {
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
}
.sa-cell-side { color: var(--text-muted, #9a9a9a); font-size: 11px; }

.sa-flag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 2px;
    font-weight: 700;
}
.sa-flag-demon  { background: rgba(240, 108, 108, 0.18); color: #ff8484; }
.sa-flag-goblin { background: rgba(108, 168, 240, 0.18); color: #84b4ff; }

/* ---- window cells ---- */
.sa-win-frac {
    font-weight: 600;
    color: var(--text, #d4d4d4);
}
.sa-win-pct {
    display: block;
    font-size: 10px;
    color: var(--text-muted, #6a6a6a);
    margin-top: 1px;
}
.sa-win-empty {
    color: var(--text-dim, #3a3a3a);
}

/* ---- verdict cell colors ---- */
.sa-cell-verdict {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-align: right;
    padding: 4px 8px;
    border-radius: 2px;
}
.sa-verdict-hammer  { color: var(--accent-pos); background: rgba(108, 240, 142, 0.08); }
.sa-verdict-lean    { color: var(--warn, #f0a86c); background: rgba(240, 168, 108, 0.08); }
.sa-verdict-neutral { color: var(--text-muted, #9a9a9a); }
.sa-verdict-avoid   { color: var(--danger, #f06c6c); background: rgba(240, 108, 108, 0.08); }
.sa-verdict-no_data { color: var(--text-dim, #5a5a5a); font-style: italic; }

/* ---- expandable detail ---- */
.sa-detail {
    background: var(--bg, #0a0a0a);
    padding: 16px 20px 16px 44px;
    border-bottom: 1px solid var(--border, #1f1f1f);
    border-left: 3px solid var(--accent-pos);
}
.sa-row-group:has(.sa-row-data:not(.sa-row-expanded)) .sa-detail {
    /* fallback for browsers without :has — JS sets hidden attribute too */
}
.sa-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 2fr;
    gap: 16px 24px;
    margin-bottom: 12px;
}
.sa-detail-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sa-detail-block-wide {
    grid-column: span 1;
}
.sa-detail-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim, #5a5a5a);
}
.sa-detail-value {
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    color: var(--text, #d4d4d4);
}
.sa-detail-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--text-muted, #b0b0b0);
}

.sa-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.sa-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text, #d4d4d4);
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid var(--text-muted, #6a6a6a);
    border-radius: 0 2px 2px 0;
}
.sa-note-quiet {
    color: var(--text-muted, #9a9a9a);
    font-size: 12px;
}
.sa-note-warn {
    border-left-color: var(--warn, #f0a86c);
    background: rgba(240, 168, 108, 0.05);
}
.sa-note-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-right: 8px;
    color: var(--text-muted, #6a6a6a);
}

.sa-detail-actions {
    display: flex;
    justify-content: flex-end;
}

/* ---- empty state ---- */
.sa-empty {
    margin: 40px 0;
    padding: 48px 24px;
    text-align: center;
    border: 1px dashed var(--border, #1f1f1f);
    border-radius: 2px;
    color: var(--text-muted, #6a6a6a);
}
.sa-empty-mark {
    font-family: 'JetBrains Mono', monospace;
    font-size: 36px;
    color: var(--text-dim, #3a3a3a);
    margin-bottom: 12px;
}
.sa-empty-text {
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    color: var(--text, #d4d4d4);
    margin-bottom: 6px;
}
.sa-empty-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6a6a6a);
}

/* ---- Deep Dive panel ---- */
.sa-panel {
    position: fixed;
    inset: 0;
    z-index: 100;
}
.sa-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    cursor: pointer;
}
.sa-panel-body {
    position: absolute;
    top: 0;
    right: 0;
    width: min(520px, 100%);
    height: 100%;
    background: var(--surface, #0f0f0f);
    border-left: 1px solid var(--border, #1f1f1f);
    display: flex;
    flex-direction: column;
    animation: sa-slide-in 200ms ease-out;
}
@keyframes sa-slide-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.sa-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border, #1f1f1f);
    gap: 12px;
}
.sa-panel-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sa-panel-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-pos);
}
.sa-panel-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--text, #f0f0f0);
    word-break: break-word;
}
.sa-panel-close {
    background: none;
    border: none;
    color: var(--text-muted, #6a6a6a);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 120ms ease;
}
.sa-panel-close:hover { color: var(--text, #f0f0f0); }
.sa-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px 24px;
}
.sa-panel-placeholder {
    text-align: center;
    color: var(--text-muted, #6a6a6a);
}
.sa-panel-placeholder-mark {
    font-family: 'JetBrains Mono', monospace;
    font-size: 48px;
    color: var(--text-dim, #3a3a3a);
    margin-bottom: 16px;
}
.sa-panel-placeholder-text {
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    color: var(--text, #d4d4d4);
    margin-bottom: 10px;
}
.sa-panel-placeholder-sub {
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted, #9a9a9a);
    max-width: 360px;
    margin: 0 auto;
}

body.sa-panel-open { overflow: hidden; }

/* ---- responsive: cramped layout below 900px ---- */
@media (max-width: 900px) {
    .sa-row {
        grid-template-columns: 28px minmax(140px, 1.6fr) 64px 56px 50px 60px 60px 60px 60px 90px;
        font-size: 12px;
        padding: 9px 8px;
    }
    .sa-detail {
        padding: 14px 12px 14px 32px;
    }
    .sa-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   v0.14.7 — Image upload mode + shared player avatar UX
   ------------------------------------------------------------
   Adds: mode tabs, drop zone, OCR pipeline panel, headshot
   circles, team chips, verify badge. Headshot + chip are added
   to the SHARED row render so paste mode inherits them too.
   ============================================================ */

/* ---- mode tabs ---- */
.sa-mode-tabs {
    display: flex;
    gap: 8px;
    margin: 16px 0 0;
}
.sa-mode-tab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 9px 16px;
    border: 1px solid var(--border, #1f1f1f);
    background: transparent;
    color: var(--text-muted, #6a6a6a);
    cursor: pointer;
    border-radius: 2px;
    transition: all 120ms ease;
}
.sa-mode-tab:hover {
    border-color: var(--text-muted, #6a6a6a);
    color: var(--text, #d4d4d4);
}
.sa-mode-tab.sa-tab-active {
    border-color: var(--accent-pos);
    color: var(--accent-pos);
    background: rgba(108, 240, 142, 0.08);
}

/* ---- upload card ---- */
.sa-upload-card {
    margin-top: 8px;
}

/* ---- drop zone ---- */
.sa-dropzone {
    margin-top: 4px;
    padding: 56px 24px;
    border: 1.5px dashed var(--border, #1f1f1f);
    border-radius: 2px;
    text-align: center;
    background: var(--bg, #0a0a0a);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
    outline: none;
}
.sa-dropzone:hover,
.sa-dropzone:focus {
    border-color: var(--text-muted, #6a6a6a);
}
.sa-dropzone.sa-dropzone-active {
    border-style: solid;
    border-width: 2px;
    border-color: var(--accent-pos);
    background: rgba(108, 240, 142, 0.04);
    box-shadow: 0 0 0 4px rgba(108, 240, 142, 0.05);
}
.sa-dropzone-icon {
    font-family: 'JetBrains Mono', monospace;
    font-size: 38px;
    color: var(--text-dim, #3a3a3a);
    line-height: 1;
    margin-bottom: 14px;
}
.sa-dropzone.sa-dropzone-active .sa-dropzone-icon {
    color: var(--accent-pos);
}
.sa-dropzone-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--text, #d4d4d4);
    margin-bottom: 4px;
}
.sa-dropzone-sub {
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--text-muted, #6a6a6a);
    margin-bottom: 16px;
}
.sa-dropzone-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-dim, #4a4a4a);
}

/* ---- OCR pipeline panel ---- */
.sa-upload-pipeline {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--surface-elevated, #131313);
    border: 1px solid var(--border, #1f1f1f);
    border-radius: 2px;
}
.sa-upload-pipeline-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sa-upload-pipeline-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text, #d4d4d4);
    flex: 0 0 auto;
    min-width: 220px;
}
.sa-upload-pipeline-track {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}
.sa-upload-pipeline-bar {
    height: 100%;
    width: 0%;
    background: var(--warn, #f0a86c);
    transition: width 220ms ease;
}
.sa-upload-status {
    margin-top: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-muted, #9a9a9a);
}
.sa-upload-status[data-kind="ok"]    { color: var(--accent-pos); }
.sa-upload-status[data-kind="error"] { color: var(--danger, #f06c6c); }
.sa-upload-status[data-kind="busy"]  { color: var(--warn, #f0a86c); }

/* ---- player avatar (shared between paste + image modes) ---- */
.sa-player-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.sa-headshot {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-elevated, #131313);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--text, #d4d4d4);
    border: 1px solid var(--border, #1f1f1f);
}
.sa-headshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.sa-headshot-fallback {
    /* When img fails, the parent gets this class and only initials remain */
}
.sa-player-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* ---- team chip in player meta row ---- */
.sa-player-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sa-team-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px 1px 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted, #b0b0b0);
}
.sa-team-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}
.sa-player-matchup {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted, #6a6a6a);
    letter-spacing: 0.04em;
}

/* v0.14.17 — Game date/time pill next to matchup. Slightly more muted than
   the matchup pill so the visual hierarchy stays:
       PLAYER NAME (loudest) → TEAM CHIP → MATCHUP → DATE/TIME (quietest)
   Sourced from bookContext.commence_time (captured at slip-save time in
   v0.14.16). Helps visually verify which game a pick belongs to during
   manual grading. Skipped entirely when commence_time is missing — no
   placeholder rendered. */
.sa-player-gametime {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted, #6a6a6a);
    opacity: 0.72;
    letter-spacing: 0.04em;
    margin-left: 4px;
}

/* ---- VERIFY badge for low-OCR-confidence rows ---- */
.sa-verify-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    background: rgba(240, 168, 108, 0.14);
    color: var(--warn, #f0a86c);
    border: 1px solid rgba(240, 168, 108, 0.32);
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    vertical-align: 1px;
}

/* ============================================================
   Team color tokens — drives both team chip color AND
   headshot-fallback background. Add a new entry here when:
   - A new NBA/WNBA team enters the league (Portland Fire, Toronto
     Tempo are already in the WNBA map below)
   - A team rebrands and changes primary colors
   ============================================================ */

/* ---- NBA ---- */
.sa-team-default { color: #888; background: rgba(255, 255, 255, 0.03); }

.sa-team-atl { color: #E03A3E; }
.sa-team-bos { color: #007A33; }
.sa-team-bkn { color: #ffffff; }
.sa-team-cha { color: #1D1160; }
.sa-team-chi { color: #CE1141; }
.sa-team-cle { color: #6F263D; }
.sa-team-dal { color: #00538C; }
.sa-team-den { color: #0E2240; }
.sa-team-det { color: #C8102E; }
.sa-team-gsw { color: #1D428A; }
.sa-team-hou { color: #CE1141; }
.sa-team-ind { color: #FDBB30; }
.sa-team-lac { color: #C8102E; }
.sa-team-lal { color: #552583; }
.sa-team-mem { color: #5D76A9; }
.sa-team-mia { color: #98002E; }
.sa-team-mil { color: #00471B; }
.sa-team-min { color: #0C2340; }
.sa-team-nop { color: #0C2340; }
.sa-team-nyk { color: #006BB6; }
.sa-team-okc { color: #007AC1; }
.sa-team-orl { color: #0077C0; }
.sa-team-phi { color: #006BB6; }
.sa-team-phx { color: #E56020; }
.sa-team-por { color: #E03A3E; }
.sa-team-sac { color: #5A2D81; }
.sa-team-sas { color: #C4CED4; }
.sa-team-tor { color: #CE1141; }
.sa-team-uta { color: #002B5C; }
.sa-team-was { color: #E31837; }

/* ---- WNBA ---- */
.sa-team-atl-wnba,
.sa-team-atlanta { color: #E03A3E; }
.sa-team-chi-wnba { color: #418FDE; }
.sa-team-conn { color: #F6635C; }
.sa-team-ind-wnba { color: #FDB927; }
.sa-team-lva { color: #BAC3C9; }
.sa-team-min-wnba { color: #79BC43; }
.sa-team-nyl,
.sa-team-ny { color: #6ECEB2; }
.sa-team-pdx,
.sa-team-por-wnba { color: #C8102E; }
.sa-team-phx-wnba { color: #CB6015; }
.sa-team-sea { color: #2C5234; }
.sa-team-was-wnba { color: #E03A3E; }
.sa-team-dal-wnba { color: #C4D600; }
.sa-team-gsv,
.sa-team-gsw-wnba { color: #FDB927; }
.sa-team-tor-wnba { color: #CE1141; }

/* ---- responsive ---- */
@media (max-width: 900px) {
    .sa-headshot { width: 28px; height: 28px; }
    .sa-mode-tab { padding: 7px 12px; font-size: 10px; }
    .sa-dropzone { padding: 40px 16px; }
    .sa-dropzone-icon { font-size: 28px; }
}

/* ============================================================
   v0.14.8 — Page chrome redesign (Path A: matches locked mockup)
   ------------------------------------------------------------
   Overrides + additions for the hero/pipeline/dropzone/empty-state
   layout. The v0.14.7 block above stays for team color tokens,
   headshot styles, team chips, VERIFY badge — those are unchanged.
   What changes here: hero replaces the small slate-header reuse,
   pipeline bar promoted to top-of-page, dropzone scaled up, mode
   tabs restyled for the new hierarchy, empty state copy + sizing.
   ============================================================ */

/* ---- hero (replaces .slate-header reuse) ---- */
.sa-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin: 32px 0 24px;
    padding: 0;
    flex-wrap: wrap;
}
/* v0.16.41.6 — title typography removed; owned by .tt-hero-title in
   styles.css (Tier 3 canon). This rule was winning the cascade tie after
   the flow append's shrink and re-exposed the pre-flow 84px/Inter Tight
   spec. Layout props only below. */
.sa-hero-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.sa-hero-tagline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6a6a6a);
    text-align: right;
    text-transform: uppercase;
    flex: 0 1 360px;
    align-self: flex-end;
    padding-bottom: 18px;
}

/* ---- top-of-page OCR pipeline bar (promoted out of upload card) ---- */
.sa-pipeline {
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--bg, #0a0a0a);
    border: 1px solid var(--warn, #f0a86c);
    border-radius: 2px;
}
.sa-pipeline-track {
    height: 3px;
    width: 100%;
    background: rgba(240, 168, 108, 0.12);
    border-radius: 2px;
    overflow: hidden;
}
.sa-pipeline-bar {
    height: 100%;
    width: 0%;
    background: var(--warn, #f0a86c);
    transition: width 220ms ease;
}
.sa-pipeline-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.sa-pipeline-label {
    color: var(--text, #d4d4d4);
}
.sa-pipeline-status {
    color: var(--text-muted, #9a9a9a);
}
.sa-pipeline-status[data-kind="ok"]    { color: var(--accent-pos); }
.sa-pipeline-status[data-kind="error"] { color: var(--danger, #f06c6c); }
.sa-pipeline-status[data-kind="busy"]  { color: var(--warn, #f0a86c); }

/* ---- mode tabs (override v0.14.7 — slightly tighter for new hierarchy) ---- */
.sa-mode-tabs {
    margin: 8px 0 14px;
}
.sa-mode-tab {
    padding: 10px 18px;
    font-size: 11px;
    letter-spacing: 0.12em;
}

/* ---- upload card + drop zone (override v0.14.7 — bigger, card-style chrome) ---- */
.sa-upload-card {
    margin-top: 0;
    padding: 18px 18px 22px;
    background: var(--bg, #0a0a0a);
    border: 1px solid var(--border, #1f1f1f);
    border-radius: 2px;
}
.sa-upload-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.10em;
}
.sa-upload-card-label {
    color: var(--text-muted, #9a9a9a);
    text-transform: uppercase;
}
.sa-upload-card-hint {
    color: var(--text-dim, #5a5a5a);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
}

.sa-dropzone {
    padding: 76px 24px;
    border: 1.5px dashed var(--border, #2a2a2a);
    border-radius: 2px;
    background: transparent;
}
.sa-dropzone-icon {
    color: var(--text-dim, #4a4a4a);
    margin-bottom: 22px;
    line-height: 0;
}
.sa-dropzone-icon svg {
    display: block;
    margin: 0 auto;
}
.sa-dropzone.sa-dropzone-active .sa-dropzone-icon {
    color: var(--accent-pos);
}
.sa-dropzone-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text, #d4d4d4);
    margin-bottom: 6px;
}
.sa-dropzone-sub {
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    color: var(--text-muted, #6a6a6a);
    margin-bottom: 22px;
}
.sa-dropzone-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.10em;
    color: var(--text-dim, #4a4a4a);
}

/* ---- empty state (override — sized for the new hierarchy) ---- */
.sa-empty {
    margin-top: 24px;
    padding: 80px 24px;
    border: 1.5px dashed var(--border, #1f1f1f);
    border-radius: 2px;
    text-align: center;
    background: transparent;
}
.sa-empty-mark {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    color: var(--text-dim, #3a3a3a);
    line-height: 1;
    margin-bottom: 16px;
}
.sa-empty-text {
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    color: var(--text, #d4d4d4);
    font-weight: 500;
    margin-bottom: 4px;
}
.sa-empty-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6a6a6a);
}

/* ---- footer (mocks: TitleTown · Slip Analyzer / N log rows · M props) ---- */
.sa-footer {
    margin-top: 40px;
    padding: 18px 0;
    border-top: 1px solid var(--border, #1f1f1f);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted, #6a6a6a);
    letter-spacing: 0.04em;
}

/* ---- responsive overrides ---- */
@media (max-width: 900px) {
    .sa-hero {
        flex-direction: column;
        gap: 12px;
        margin: 24px 0 16px;
    }
    .sa-hero-tagline {
        text-align: left;
        flex: 1 1 auto;
        padding-bottom: 0;
    }
    .sa-dropzone {
        padding: 48px 18px;
    }
    .sa-empty {
        padding: 56px 20px;
    }
}
@media (max-width: 600px) {
}

/* ============================================================
   v0.14.10 — Slip-level summary, DNP badge, line-movement note
   ============================================================ */

/* --- Slip summary (item 1) --- */
.sa-slip-summary {
    margin: 20px 0 18px;
    padding: 18px 20px;
    border: 1px solid var(--sa-border, rgba(255,255,255,0.06));
    border-radius: 6px;
    background: var(--sa-surface-1, rgba(255,255,255,0.02));
}
.sa-slip-summary[hidden] {
    display: none;
}
.sa-slip-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.sa-slip-title {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
}
.sa-slip-tally {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--sa-text-mute, #888780);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.sa-slip-tally-hammer  { color: var(--sa-verdict-hammer, #6BD58A); }
.sa-slip-tally-lean    { color: var(--sa-verdict-lean, #9BD58A); }
.sa-slip-tally-neutral { color: var(--sa-text-mute, #888780); }
.sa-slip-tally-fade    { color: var(--sa-verdict-fade, #D58A8A); }
.sa-slip-tally-no_data { color: var(--sa-text-mute, #888780); }

.sa-slip-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sa-slip-stats-flat {
    grid-template-columns: repeat(3, 1fr);
}
.sa-slip-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sa-slip-stat-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--sa-text-mute, #888780);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sa-slip-stat-value {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--sa-text, #f5f3eb);
}
.sa-slip-ev-pos { color: var(--sa-verdict-hammer, #6BD58A); }
.sa-slip-ev-neg { color: var(--sa-verdict-fade, #D58A8A); }
.sa-slip-ev-flat { color: var(--sa-text-mute, #888780); }

.sa-slip-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--sa-text-mute, #888780);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sa-slip-note {
    margin-top: 12px;
    padding: 8px 10px;
    border-left: 2px solid var(--sa-border, rgba(255,255,255,0.06));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--sa-text-mute, #888780);
}

@media (max-width: 720px) {
    .sa-slip-stats,
    .sa-slip-stats-flat {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- DNP badge (item 5) --- */
.sa-dnp-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #D5A56B;
    border: 1px solid #D5A56B66;
    border-radius: 3px;
    vertical-align: 2px;
}

/* ============================================================
   v0.14.12 — Heat-map cells, signal compression chips,
   visual polish (hero shrink, hammer accent, details affordance,
   pp-delta emphasis, line-context inline, verdict marker dots)
   ============================================================ */

/* ---- v0.14.12 item 14 — Heat-map tinting on hit-rate window cells ----
   Tints the L5/L10/L20/SEASON cells based on hit-rate banding.
   Thresholds: ≥75% green, 46-74% neutral wash, ≤45% red.
   Uses production verdict palette (#5DE0AC mint / #f06c6c red)
   so heat-map cells match HAMMER and AVOID verdict pills.
   Three intensity tiers within each band (lo/mid/hi) so a 5/5
   reads slightly hotter than an 18/20 — see fmtWin() in JS. */
.sa-cell-window.sa-heat-hot-hi  { background: rgba(108, 240, 142, 0.18); }
.sa-cell-window.sa-heat-hot-mid { background: rgba(108, 240, 142, 0.14); }
.sa-cell-window.sa-heat-hot-lo  { background: rgba(108, 240, 142, 0.10); }
.sa-cell-window.sa-heat-mid     { background: rgba(255, 255, 255, 0.04); }
.sa-cell-window.sa-heat-cold-lo  { background: rgba(240, 108, 108, 0.10); }
.sa-cell-window.sa-heat-cold-mid { background: rgba(240, 108, 108, 0.14); }
.sa-cell-window.sa-heat-cold-hi  { background: rgba(240, 108, 108, 0.18); }

/* Heat-map legend strip below the table */
.sa-heatmap-legend {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sa-border, rgba(255,255,255,0.06));
    display: flex;
    gap: 16px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--sa-text-mute, #888780);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-wrap: wrap;
}
.sa-heatmap-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: -1px;
    margin-right: 6px;
    border-radius: 2px;
}
.sa-heatmap-legend-swatch-hot  { background: rgba(108, 240, 142, 0.18); }
.sa-heatmap-legend-swatch-mid  { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255,255,255,0.08); }
.sa-heatmap-legend-swatch-cold { background: rgba(240, 108, 108, 0.18); }

/* ---- v0.14.18 — Download share-card button + window picker ----
   DOWNLOAD button sits right-aligned on the legend row (alongside the
   HOT/MID/COLD swatches). Click expands the picker panel below the legend
   with 4 window buttons. Click a window button → renders one TitleTown
   PNG per pick and triggers downloads. */
.sa-download-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
    color: #b8b6b0;
    cursor: pointer;
    border-radius: 2px;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.sa-download-toggle:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f0eee6;
}
.sa-download-toggle:focus-visible {
    outline: 1px solid rgba(108, 240, 142, 0.5);
    outline-offset: 1px;
}
.sa-download-toggle-chev {
    transition: transform 160ms ease-out;
}
.sa-download-toggle[data-expanded="true"] .sa-download-toggle-chev {
    transform: rotate(180deg);
}

/* Window picker panel — sibling of the legend, hidden by default */
.sa-download-picker {
    display: none;
    margin-top: 6px;
    padding: 10px 0 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.sa-download-picker[data-expanded="true"] {
    display: block;
}
.sa-download-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.sa-download-picker-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sa-download-picker-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #6a6a6a;
    margin-right: 4px;
}
.sa-download-window-btn {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
    color: #b8b6b0;
    cursor: pointer;
    border-radius: 2px;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.sa-download-window-btn:hover:not(:disabled) {
    background: rgba(108, 240, 142, 0.06);
    border-color: rgba(108, 240, 142, 0.4);
    color: var(--accent-pos);
}
.sa-download-window-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.sa-download-picker-hint {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #6a6a6a;
}

/* ---- v0.14.12 chips — signal compression (HOT/COLD/EV+/EV-/LINE↑/LINE↓) ----
   Stacked under the verdict pill in the same VERDICT cell.
   Smaller and more muted than the verdict pill itself so the
   verdict still reads as the primary signal. */
.sa-cell-verdict {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.sa-verdict-pill {
    /* The verdict text itself, separated from the cell so chips can
       render below it. Inherits the cell's background/color from
       sa-verdict-hammer/lean/neutral/avoid/no_data. */
    display: inline-block;
}
.sa-chip-row {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.sa-chip {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    line-height: 1.4;
}
.sa-chip-hot   { background: rgba(108, 240, 142, 0.10); color: var(--accent-pos); }
.sa-chip-cold  { background: rgba(240, 108, 108, 0.10); color: var(--danger, #f06c6c); }
.sa-chip-evpos { background: rgba(108, 240, 142, 0.10); color: var(--accent-pos); }
.sa-chip-evneg { background: rgba(240, 108, 108, 0.10); color: var(--danger, #f06c6c); }
.sa-chip-lineup   { background: rgba(108, 240, 142, 0.10); color: var(--accent-pos); }
.sa-chip-linedown { background: rgba(240, 108, 108, 0.10); color: var(--danger, #f06c6c); }

/* ---- v0.14.12 item 2 RETIRED at v0.16.41.6 — the 56px !important
   shrink predates the flow shell; title typography is now owned by
   .tt-hero-title in styles.css (Tier 3 canon). Rule removed. ---- */


/* ---- v0.14.12 item 13 — HAMMER row left-border accent stripe ----
   Visual emphasis on the strongest picks. 3px green stripe on
   left edge of the row when verdict is HAMMER. Applied to the
   data row only, not the expanded detail panel. */
.sa-row-data.sa-row-hammer {
    border-left: 3px solid var(--accent-pos);
    padding-left: calc(var(--sa-row-padding, 12px) - 3px);
}

/* ---- v0.14.12 item 11 — Caret → "DETAILS" on hover ----
   Replace the ▶/▼ caret with the word DETAILS when the user
   hovers a collapsed row. Keeps the chevron as the always-visible
   visual signal but offers a more discoverable affordance. */
.sa-cell-toggle {
    width: 60px !important;
    transition: width 0.15s ease;
}
.sa-row-data:hover .sa-chevron {
    display: none;
}
.sa-row-data:hover .sa-cell-toggle::after {
    content: 'DETAILS';
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--text-muted, #888780);
    text-transform: uppercase;
}
.sa-row-data.sa-row-expanded:hover .sa-cell-toggle::after {
    /* When already expanded, just keep showing the chevron — no
       point in offering DETAILS again. */
    content: '';
}
.sa-row-data.sa-row-expanded:hover .sa-chevron {
    display: inline;
}

/* ---- v0.14.12 item 9 — Bold/color the +21.6pp delta in BREAK-EVEN/LEG ----
   The slip-summary BREAK-EVEN/LEG stat already calls out the
   delta between geo-mean and break-even. Make the delta itself
   visually pop so it reads as the answer to "are you above water." */
.sa-be-delta-pos { color: var(--accent-pos); font-weight: 600; }
.sa-be-delta-neg { color: var(--danger, #f06c6c); font-weight: 600; }

/* ---- v0.14.12 item 10 — Per-pick verdict micro-marker dots in slip tally ----
   Adds a small colored dot before each tally count so the
   HAMMER · LEAN · NEUTRAL · AVOID counter reads as a visual
   distribution at a glance, not just text. */
.sa-slip-tally-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: 1px;
}
.sa-slip-tally-dot-hammer  { background: var(--accent-pos); }
.sa-slip-tally-dot-lean    { background: var(--warn, #f0a86c); }
.sa-slip-tally-dot-neutral { background: var(--text-muted, #6a6a6a); }
.sa-slip-tally-dot-avoid   { background: var(--danger, #f06c6c); }
.sa-slip-tally-dot-no_data { background: var(--text-dim, #3a3a3a); }

/* ---- v0.14.12 item 15 — Line context under LINE column ----
   Adds a small mono sub-line below the line value showing
   "vs proj X.X" and/or "↓ X.X from open" when data is present.
   Pulls from bookContext (season_avg, open_line_num, prop_line_move). */
.sa-line-context {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    color: var(--text-muted, #6a6a6a);
    margin-top: 2px;
    line-height: 1.3;
    letter-spacing: 0.02em;
}
.sa-line-context-up   { color: var(--accent-pos); }
.sa-line-context-down { color: var(--danger, #f06c6c); }

/* ---- v0.14.12 — Tagline opacity bump (was too faint at 0.4) ---- */
.sa-hero-tagline {
    opacity: 0.65 !important;
}

/* ---- v0.14.12 — Slip-summary card contrast bump ----
   Slightly elevate the summary card from the page background so
   it reads as a primary surface. Also tightens the inner border. */
.sa-slip-summary {
    background: rgba(255, 255, 255, 0.025) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ============================================================
   v0.14.12.1 — Hotfix bundle (production review of v0.14.12)
   8 polish issues caught after first live render:
   1. DETAILS clipping — column too narrow (60px) + text overlapping headshot
   2. Verdict cell background bleeding across chip stack
   3. Faint matchup text (DET@CLE etc)
   4. Faint SIDE column (header + MORE/LESS values)
   5. Faint hit-rate % sub-labels on tinted heat-map cells
   6. Faint NEUTRAL verdict label
   7. Goblin tier color blue → lime green (was demon-adjacent blue)
   8. Demon stays red (already correct, no change)
   ============================================================ */

/* ---- 1. DETAILS toggle column: widen + position outside the row content ----
   Bumps from 60px → 80px so the word DETAILS doesn't clip to "DETAIL".
   The override is set with !important to win against v0.14.12's own
   width override. */
.sa-cell-toggle {
    width: 80px !important;
}
.sa-row-data:hover .sa-cell-toggle::after {
    /* Slightly brighter text color so the affordance reads more clearly. */
    color: var(--text, #b8b6b0) !important;
}

/* ---- 2. Verdict-cell background bleed fix ----
   v0.14.12 moved the verdict label into a flex column inside the cell so
   chips could stack below. As a side effect, the cell-level background
   tint (rgba green/red wash) extended across the chip area. Move the
   background from the cell onto the .sa-verdict-pill itself so chips
   render on the row's normal background, cleanly separated from the
   verdict's tinted pill. Requires removing the cell-level background
   on the four verdict classes. */
.sa-verdict-hammer  { background: transparent !important; }
.sa-verdict-lean    { background: transparent !important; }
.sa-verdict-avoid   { background: transparent !important; }
.sa-verdict-no_data { background: transparent !important; }

/* Pill itself now carries the tinted background. Padding matches the
   prior cell-level padding so the visual size is unchanged. */
.sa-cell-verdict .sa-verdict-pill {
    padding: 4px 8px;
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
}
.sa-verdict-hammer .sa-verdict-pill  { color: var(--accent-pos); background: rgba(108, 240, 142, 0.14); }
.sa-verdict-lean .sa-verdict-pill    { color: var(--warn, #f0a86c); background: rgba(240, 168, 108, 0.14); }
.sa-verdict-neutral .sa-verdict-pill { color: var(--text, #d4d4d4); background: rgba(255, 255, 255, 0.05); }
.sa-verdict-avoid .sa-verdict-pill   { color: var(--danger, #f06c6c); background: rgba(240, 108, 108, 0.14); }
.sa-verdict-no_data .sa-verdict-pill { color: var(--text-dim, #5a5a5a); background: rgba(255, 255, 255, 0.03); font-style: italic; }

/* ---- 3. Matchup text — bump brightness ----
   DET@CLE / OKC@LAL / etc. were rendering at #6a6a6a (--text-muted),
   barely visible against #0a0a0a row background. Bump to #b8b6b0 to
   match the other secondary text on the page. */
.sa-player-matchup {
    color: #b8b6b0 !important;
}

/* v0.14.17 — Gametime pill stays one tier dimmer than matchup so the
   visual hierarchy reads as: MATCHUP (loud) → DATETIME (quiet). Without
   this override, gametime inherits the base #6a6a6a (effective #4d4d4d
   with opacity) which is too dim against #0a0a0a. */
.sa-player-gametime {
    color: #8a8884 !important;
    opacity: 1 !important;
}

/* ---- 4. SIDE column visibility ----
   Both the column header (MORE/LESS values) and the SIDE values were
   rendering at #6a6a6a, nearly invisible on the dark row background.
   Bump value cell to #b8b6b0; column header relies on the existing
   row-header color which gets the same treatment further down. */
.sa-cell-side {
    color: #b8b6b0 !important;
    font-weight: 500;
}

/* ---- 5. Heat-map % sub-label visibility ----
   When .sa-win-pct sits inside a .sa-heat-* tinted cell, the muted gray
   color (#6a6a6a) has too low contrast against the green/red wash. Bump
   to a brighter neutral that reads on both the green and red tints. */
.sa-cell-window .sa-win-pct {
    color: #b8b6b0;
}

/* Within the colored bands, slightly increase opacity again so the
   percentage stays readable specifically against the strongest tints. */
.sa-heat-hot-hi .sa-win-pct,
.sa-heat-cold-hi .sa-win-pct {
    color: #c8c6c0;
}

/* ---- 6. NEUTRAL verdict label brightness ----
   The neutral verdict was rendering at #9a9a9a — readable on a plain
   row but too faint relative to the other verdict labels (HAMMER green,
   AVOID red, LEAN orange). Bump the pill text color and add a subtle
   neutral-tinted background so it reads as a real verdict, not as a
   dimmed label. (Background applied via .sa-verdict-neutral .sa-verdict-pill
   above; this just bumps the text color.) */
.sa-verdict-neutral .sa-verdict-pill {
    color: var(--text, #d4d4d4);
}

/* ---- 7. Goblin tier color: blue → lime green ----
   Production demand: goblin = green, demon = red. Demon was already
   red in v0.14.12 so no change there. Goblin was incorrectly using a
   blue palette (#84b4ff), adjacent to PrizePicks UI colors but wrong
   for tier semantics. Switching to the same lime green as HAMMER and
   the heat-map hot tints. */
.sa-flag-goblin {
    background: rgba(108, 240, 142, 0.18) !important;
    color: var(--accent-pos) !important;
}

/* (Demon stays red — explicitly redeclared so this hotfix is the
   single source of truth for tier colors going forward.) */
.sa-flag-demon {
    background: rgba(240, 108, 108, 0.18) !important;
    color: var(--danger, #f06c6c) !important;
}

/* ---- Bonus: row-header text brightness ----
   Column labels (PLAYER, STAT, LINE, SIDE, L5/L10/L20/SEASON, VERDICT)
   were rendering at the same too-faint color as the cell values. Bump
   the row-header to ensure column labels read clearly against the dark
   surface. */
.sa-row-header .sa-cell {
    color: #888780;
}

/* ============================================================
   v0.14.12.2 — DETAILS hover affordance fix
   ------------------------------------------------------------
   Root cause of v0.14.12 + v0.14.12.1 failure: the row uses
   `grid-template-columns: 32px ...`, so the toggle column is
   pinned at 32px regardless of `.sa-cell-toggle { width: 80px }`.
   Grid columns are sized by parent template, child `width` is
   ignored. That's why "DETAILS" text overflowed into the
   adjacent headshot column on hover.

   Fix: the chevron stays in the 32px column. The DETAILS text
   floats out via `position: absolute` so it can extend leftward
   into the row's left padding gutter without forcing column
   resize. Row gets `position: relative` to anchor it.
   ============================================================ */

.sa-row-data {
    /* Anchor for the absolutely-positioned DETAILS pseudo-element. */
    position: relative;
}

/* Reset the dead 80px override from v0.14.12.1 — it never worked
   (grid template wins) and the comment was misleading. */
.sa-cell-toggle {
    width: auto !important;
}

/* Hide the chevron on hover (already in v0.14.12; restated here so
   this block is the canonical source for hover behavior). */
.sa-row-data:hover .sa-chevron {
    display: none;
}
.sa-row-data.sa-row-expanded:hover .sa-chevron {
    display: inline;
}

/* DETAILS pseudo-element — absolutely positioned to the left of
   the chevron column. Lives in the row's left padding (12px) plus
   any HAMMER-stripe offset. Floats above the chevron column. */
.sa-row-data:hover .sa-cell-toggle::after {
    content: 'DETAILS';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--text, #b8b6b0);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 2;
    background: var(--bg, #0a0a0a);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Suppress DETAILS when the row is already expanded — no point in
   offering DETAILS again, just keep the chevron visible. */
.sa-row-data.sa-row-expanded:hover .sa-cell-toggle::after {
    content: '';
    background: transparent;
}

/* HAMMER rows have a 3px green stripe on the left edge — push the
   DETAILS text inward by that amount so it doesn't sit on the stripe. */
.sa-row-data.sa-row-hammer:hover .sa-cell-toggle::after {
    left: 17px;
}

/* ============================================================
   v0.14.12.3 — DETAILS hover affordance REMOVED
   ------------------------------------------------------------
   The DETAILS hover text shipped in v0.14.12 (item 11) and the
   v0.14.12.1 / v0.14.12.2 reposition attempts all introduced
   visual issues (chevron clipping, overlap with headshot, gutter
   clutter on hammer rows). Removing entirely. The chevron alone
   carries enough affordance — clicking the row toggles the
   detail panel, no extra UI hint needed.

   This block neutralizes the v0.14.12 / .12.1 / .12.2 ::after
   rules. Chevron stays visible on hover (override the prior
   `display: none`) and the ::after content is empty.
   ============================================================ */

.sa-row-data:hover .sa-chevron {
    display: inline !important;
}
.sa-row-data:hover .sa-cell-toggle::after {
    content: none !important;
    display: none !important;
}
.sa-row-data.sa-row-hammer:hover .sa-cell-toggle::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   v0.14.13 — Slip history UI
   ------------------------------------------------------------
   - .sa-history-idle: container for Recent Slips panel + Weekly
     Record card, visible only when no analysis is showing
   - .sa-recent-slips: full-panel list (last 5)
   - .sa-recent-strip: compact pill row below results header
   - .sa-bottom-line-verdict: STRONG/POSITIVE/NEUTRAL/NEGATIVE/AVOID
     pill in the analysis header
   - .sa-reanalyze-btn: re-analyze button next to results-meta
   - .sa-snapshot-banner: shown when slip loaded from history
   ============================================================ */

/* ---- Idle-state container (Recent Slips + Weekly Record) ---- */
.sa-history-idle {
    margin: 24px 0 8px;
}
.sa-history-idle[hidden] { display: none; }
.sa-history-idle-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}
@media (max-width: 720px) {
    .sa-history-idle-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Recent Slips full panel ---- */
.sa-recent-slips {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 14px 16px;
}
.sa-recent-slips-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sa-recent-slips-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-muted, #888780);
    text-transform: uppercase;
}
.sa-recent-slips-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--text-dim, #6a6a6a);
}
.sa-recent-slips-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sa-recent-slips-empty {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted, #888780);
    padding: 8px 0;
}

/* Recent slip row (full-panel item) */
.sa-recent-slip-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    color: var(--text, #d4d4d4);
    font-family: inherit;
    font-size: 12px;
    transition: background 100ms ease;
}
.sa-recent-slip-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}
.sa-recent-slip-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text, #d4d4d4);
}
.sa-recent-slip-ago {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted, #888780);
    letter-spacing: 0.04em;
}

/* ---- Weekly Record card ---- */
.sa-weekly-record {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 14px 16px;
}
.sa-weekly-record-header {
    margin-bottom: 12px;
}
.sa-weekly-record-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-muted, #888780);
    text-transform: uppercase;
}
.sa-weekly-record-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sa-weekly-record-empty {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted, #888780);
    padding: 8px 0;
}
.sa-weekly-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sa-weekly-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--text-dim, #6a6a6a);
    text-transform: uppercase;
}
.sa-weekly-stat-value {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text, #d4d4d4);
}

/* ---- Bottom-line verdict (in analysis header) ---- */
.sa-results-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.sa-bottom-line-verdict {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sa-bottom-line-verdict[hidden] { display: none; }
.sa-bottom-line-label { font-weight: 700; }
.sa-bottom-line-ev    { font-weight: 500; opacity: 0.95; }

/* Bottom-line color tokens — also used by recent-slips pills */
.sa-bl-strong   { background: rgba(108, 240, 142, 0.18); color: var(--accent-pos); }
.sa-bl-positive { background: rgba(108, 240, 142, 0.10); color: var(--accent-pos); }
.sa-bl-neutral  { background: rgba(255, 255, 255, 0.05); color: var(--text, #d4d4d4); }
.sa-bl-negative { background: rgba(240, 168, 108, 0.14); color: var(--warn, #f0a86c); }
.sa-bl-avoid    { background: rgba(240, 108, 108, 0.18); color: var(--danger, #f06c6c); }
.sa-bl-no_data  { background: rgba(255, 255, 255, 0.03); color: var(--text-dim, #5a5a5a); font-style: italic; }

/* Bottom-line pill flavor used inside recent-slip rows (smaller) */
.sa-recent-slip-row .sa-bottom-line {
    padding: 2px 7px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ---- Re-analyze button ---- */
.sa-reanalyze-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    color: var(--text, #d4d4d4);
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.sa-reanalyze-btn[hidden] { display: none; }
.sa-reanalyze-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}
.sa-reanalyze-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sa-reanalyze-icon {
    display: inline-block;
    font-size: 12px;
    transition: transform 200ms ease;
}
.sa-reanalyze-busy .sa-reanalyze-icon {
    animation: sa-reanalyze-spin 0.8s linear infinite;
}
@keyframes sa-reanalyze-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- Compact recent-slips strip (during analysis) ---- */
.sa-recent-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.015);
    border-radius: 4px;
    flex-wrap: wrap;
}
.sa-recent-strip[hidden] { display: none; }
.sa-recent-strip-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-dim, #6a6a6a);
    text-transform: uppercase;
    margin-right: 4px;
}
.sa-recent-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: filter 100ms ease;
}
.sa-recent-pill:hover {
    filter: brightness(1.2);
}

/* ---- Snapshot replay banner ---- */
.sa-snapshot-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 16px;
    padding: 8px 12px;
    background: rgba(108, 168, 240, 0.06);
    border: 1px solid rgba(108, 168, 240, 0.18);
    border-radius: 4px;
    flex-wrap: wrap;
}
.sa-snapshot-banner[hidden] { display: none; }
.sa-snapshot-banner-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: #84b4ff;
    text-transform: uppercase;
    font-weight: 700;
}
.sa-snapshot-banner-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text, #d4d4d4);
    flex: 1;
}
.sa-snapshot-refresh-btn {
    background: rgba(108, 168, 240, 0.10);
    border: 1px solid rgba(108, 168, 240, 0.28);
    border-radius: 3px;
    padding: 4px 10px;
    color: #84b4ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 100ms ease;
}
.sa-snapshot-refresh-btn:hover {
    background: rgba(108, 168, 240, 0.18);
}

/* ============================================================
   v0.14.14 — Slip thumbnail (item 6) + 3-segment OCR conf bar
   (item 7) + slip image modal
   ------------------------------------------------------------
   - .sa-slip-thumb: small portrait button next to Analysis title
   - .sa-confbar: 3-segment stacked bar in the OCR pipeline panel
   - .sa-image-modal: full-size slip image overlay
   ============================================================ */

/* ---- Slip "View Slip" button (v0.14.16.3) ----
   v0.14.14 introduced a small portrait thumbnail next to the Analysis title
   (.sa-slip-thumb). After the v0.14.15 layout consolidation, that placement
   orphaned visually — it floated in dead space mid-page with no anchor to
   surrounding elements. v0.14.16.3 relocates it to the mode-tabs row as a
   labeled button on the right edge, matching the mode-tab visual language.
   The modal it opens (.sa-image-modal, defined below) is unchanged.

   The button is right-aligned via margin-left: auto in the flex parent.
   Styled to MATCH .sa-mode-tab (same outline / muted color), but with an
   image icon prefix to differentiate it from the mode toggles. */
.sa-view-slip-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 9px 14px;
    border: 1px solid var(--border, #1f1f1f);
    background: transparent;
    color: var(--text-muted, #6a6a6a);
    cursor: pointer;
    border-radius: 2px;
    transition: all 120ms ease;
}
.sa-view-slip-btn[hidden] { display: none; }
.sa-view-slip-btn:hover {
    border-color: rgba(108, 240, 142, 0.35);
    color: var(--accent-pos);
}
.sa-view-slip-btn:focus-visible {
    outline: 1px solid var(--accent-pos);
    outline-offset: 2px;
}
.sa-view-slip-icon {
    display: block;
    flex-shrink: 0;
    color: currentColor;
}
.sa-view-slip-label {
    line-height: 1;
}

/* (Deprecated v0.14.16.3) — .sa-slip-thumb rules retained intentionally
   for backward compatibility on any cached/stale page state where the
   thumb element might still exist. New DOM has the button removed.
   The .sa-slip-thumb-img rule remains; it's reused by the image modal
   for thumbnail-derived previews if/when feature work calls for it.
   Safe to delete in a future cleanup pass. */

/* Results header needs to handle the new thumb element next to the title */
.sa-results-header {
    align-items: center;
}

/* ---- 3-segment OCR confidence bar ---- */
.sa-confbar {
    margin-top: 10px;
}
.sa-confbar[hidden] { display: none; }
.sa-confbar-track {
    display: flex;
    gap: 4px;
    height: 6px;
    margin-bottom: 6px;
}
.sa-confbar-seg {
    height: 100%;
    border-radius: 2px;
    transition: flex 250ms ease;
    min-width: 4px;
}
.sa-confbar-seg[data-tone="good"] { background: var(--accent-pos); }
.sa-confbar-seg[data-tone="mid"]  { background: var(--warn, #f0a86c); }
.sa-confbar-seg[data-tone="bad"]  { background: var(--danger, #f06c6c); }
.sa-confbar-seg[data-tone="none"] { background: rgba(255, 255, 255, 0.08); }
.sa-confbar-labels {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.05em;
    color: var(--text-dim, #6a6a6a);
}
.sa-confbar-label {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
}
.sa-confbar-label-name {
    color: var(--text-muted, #888780);
}
.sa-confbar-label-value {
    color: var(--text, #d4d4d4);
    font-weight: 500;
}

/* ---- Slip image modal ---- */
.sa-image-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sa-image-modal[hidden] { display: none; }
.sa-image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.sa-image-modal-body {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: transparent;
    z-index: 1;
}
.sa-image-modal-img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.sa-image-modal-close {
    position: absolute;
    top: -36px;
    right: 0;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    color: var(--text, #d4d4d4);
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 100ms ease;
}
.sa-image-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   v0.14.15 — Save/Compare/Edit affordances + grading + calibration
   ------------------------------------------------------------
   New surfaces:
   - .sa-recent-slips-actions / .sa-recent-slips-compare-btn — COMPARE
     toggle in Recent Slips header
   - .sa-recent-slips-body row checkboxes + pin marker (in compare mode
     + after-pin display states)
   - .sa-compare-bar — selection action bar above Recent Slips body
   - .sa-history-idle-right-stack — Weekly Record + Calibration stacked
     in the right column
   - .sa-calibration-card — calibration tracker (last 30 days)
   - .sa-slip-modal — slip detail modal with pick list + actions
   - .sa-slip-modal-pick — per-pick row with grade buttons + remove btn
   - .sa-compare-modal — side-by-side stat-strip compare view
   ============================================================ */

/* ---- Recent Slips: COMPARE toggle in header ---- */
.sa-recent-slips-actions {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.sa-recent-slips-compare-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    color: var(--text-muted, #888780);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    cursor: pointer;
    transition: border-color 100ms ease, color 100ms ease;
}
.sa-recent-slips-compare-btn:hover {
    border-color: rgba(255, 255, 255, 0.20);
    color: var(--text, #d4d4d4);
}
.sa-recent-slips-compare-btn[aria-pressed="true"] {
    border-color: var(--accent-pos);
    color: var(--accent-pos);
    background: rgba(108, 240, 142, 0.06);
}

/* ---- Compare action bar (visible when compare mode active) ---- */
.sa-compare-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    margin: 8px 0;
    background: rgba(108, 240, 142, 0.04);
    border: 1px solid rgba(108, 240, 142, 0.18);
    border-radius: 3px;
}
.sa-compare-bar[hidden] { display: none; }
.sa-compare-bar-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--accent-pos);
}
.sa-compare-bar-actions {
    display: flex;
    gap: 6px;
}
.sa-compare-bar-cancel,
.sa-compare-bar-go {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 3px;
    color: var(--text, #d4d4d4);
    font-family: inherit;
    font-size: 11px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.sa-compare-bar-go {
    border-color: var(--accent-pos);
    color: var(--accent-pos);
}
.sa-compare-bar-go:hover:not(:disabled) {
    background: rgba(108, 240, 142, 0.10);
}
.sa-compare-bar-go:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.sa-compare-bar-cancel:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* ---- Recent slip row in compare mode: show checkbox affordance ---- */
.sa-recent-slip-row[data-compare-mode="true"] {
    padding-left: 32px;
    position: relative;
}
.sa-recent-slip-row .sa-recent-slip-check {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    background: transparent;
    display: none;
}
.sa-recent-slip-row[data-compare-mode="true"] .sa-recent-slip-check {
    display: inline-block;
}
.sa-recent-slip-row[data-selected="true"] .sa-recent-slip-check {
    background: var(--accent-pos);
    border-color: var(--accent-pos);
}
.sa-recent-slip-row[data-selected="true"] .sa-recent-slip-check::after {
    content: '✓';
    color: #0a0a0a;
    font-size: 11px;
    line-height: 14px;
    display: block;
    text-align: center;
    font-weight: 700;
}

/* Pin marker on Recent Slip rows (when pinned) — small ◆ to the left of the meta */
.sa-recent-slip-row .sa-recent-slip-pinmark {
    display: none;
    color: var(--accent-pos);
    margin-right: 2px;
    font-size: 9px;
}
.sa-recent-slip-row[data-pinned="true"] .sa-recent-slip-pinmark {
    display: inline;
}

/* User-labeled slips: show label instead of "Np mixed" */
.sa-recent-slip-row .sa-recent-slip-label-text {
    color: var(--text, #d4d4d4);
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

/* ---- Right column: vertical stack of Weekly Record + Calibration ---- */
.sa-history-idle-right-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- Calibration card ---- */
.sa-calibration-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 14px 16px;
}
.sa-calibration-header {
    margin-bottom: 12px;
}
.sa-calibration-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-muted, #888780);
    text-transform: uppercase;
}
.sa-calibration-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sa-calibration-empty {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted, #888780);
    line-height: 1.55;
}
.sa-calibration-empty-hint {
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-dim, #6a6a6a);
    line-height: 1.55;
}
.sa-calibration-overall {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sa-calibration-overall-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--text-dim, #6a6a6a);
    text-transform: uppercase;
}
.sa-calibration-overall-value {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text, #d4d4d4);
}
.sa-calibration-overall-detail {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted, #888780);
    margin-top: 2px;
}
.sa-calibration-tiers {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sa-calibration-tier {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 8px;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
}
.sa-calibration-tier-label {
    color: var(--text-muted, #888780);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}
.sa-calibration-tier-label[data-tier="HAMMER"]  { color: var(--accent-pos); }
.sa-calibration-tier-label[data-tier="LEAN"]    { color: var(--accent-pos); opacity: 0.75; }
.sa-calibration-tier-label[data-tier="NEUTRAL"] { color: var(--text-muted, #888780); }
.sa-calibration-tier-label[data-tier="AVOID"]   { color: var(--danger, #f06c6c); }
.sa-calibration-tier-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.sa-calibration-tier-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent-pos);
    transition: width 200ms ease;
}
.sa-calibration-tier-bar-fill[data-tone="bad"] {
    background: var(--danger, #f06c6c);
}
.sa-calibration-tier-bar-fill[data-tone="mid"] {
    background: var(--warn, #f0a86c);
}
.sa-calibration-tier-stat {
    color: var(--text, #d4d4d4);
    font-weight: 500;
    min-width: 64px;
    text-align: right;
}

/* ---- Slip detail modal ---- */
.sa-slip-modal {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sa-slip-modal[hidden] { display: none; }
.sa-slip-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.sa-slip-modal-body {
    position: relative;
    width: 560px;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
    z-index: 1;
}
.sa-slip-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sa-slip-modal-title-block {
    flex: 1;
    min-width: 0;
}
.sa-slip-modal-title-input {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text, #d4d4d4);
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    padding: 2px 6px;
    margin-left: -6px;
    border-radius: 3px;
    transition: border-color 100ms ease, background 100ms ease;
}
.sa-slip-modal-title-input:hover {
    border-color: rgba(255, 255, 255, 0.10);
}
.sa-slip-modal-title-input:focus {
    outline: none;
    border-color: var(--accent-pos);
    background: rgba(108, 240, 142, 0.04);
}
.sa-slip-modal-title {
    margin: 0;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text, #d4d4d4);
}
.sa-slip-modal-meta {
    margin-top: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--text-muted, #888780);
}
.sa-slip-modal-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    color: var(--text, #d4d4d4);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 100ms ease;
}
.sa-slip-modal-close:hover {
    background: rgba(255, 255, 255, 0.10);
}
.sa-slip-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
}
.sa-slip-modal-summary {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sa-slip-modal-picks-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 10px 0 8px;
}
.sa-slip-modal-picks-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-muted, #888780);
    text-transform: uppercase;
}
.sa-slip-modal-picks-actions {
    display: flex;
    gap: 6px;
}
.sa-slip-modal-edit-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    color: var(--text-muted, #888780);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    cursor: pointer;
    text-transform: uppercase;
    transition: border-color 100ms ease, color 100ms ease;
}
.sa-slip-modal-edit-btn:hover {
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text, #d4d4d4);
}
.sa-slip-modal-edit-btn[aria-pressed="true"] {
    border-color: var(--accent-pos);
    color: var(--accent-pos);
    background: rgba(108, 240, 142, 0.06);
}
.sa-slip-modal-edit-btn[aria-pressed="true"] .sa-slip-modal-edit-label::after {
    content: " — done";
}

/* Per-pick row inside slip detail modal */
.sa-slip-modal-picks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sa-slip-modal-pick {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}
.sa-slip-modal-pick-info {
    min-width: 0;
}
.sa-slip-modal-pick-name {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text, #d4d4d4);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sa-slip-modal-pick-prop {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted, #888780);
}
/* v0.14.17 — Game date/time in the modal pick row. Sits inline after the
   verdict pill on the prop line: "PTS 19.5 MORE [HAMMER] · Mon 8:00 PM ET".
   Slightly dimmer than the surrounding prop text to stay subordinate. */
.sa-slip-modal-pick-gametime {
    display: inline-block;
    margin-left: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--text-dim, #6a6a6a);
    letter-spacing: 0.04em;
}
.sa-slip-modal-pick-prop-verdict {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 9px;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.sa-slip-modal-pick-prop-verdict[data-verdict="HAMMER"]  { background: rgba(108, 240, 142, 0.18); color: var(--accent-pos); }
.sa-slip-modal-pick-prop-verdict[data-verdict="LEAN"]    { background: rgba(108, 240, 142, 0.10); color: var(--accent-pos); }
.sa-slip-modal-pick-prop-verdict[data-verdict="NEUTRAL"] { background: rgba(255, 255, 255, 0.05); color: var(--text, #d4d4d4); }
.sa-slip-modal-pick-prop-verdict[data-verdict="AVOID"]   { background: rgba(240, 108, 108, 0.16); color: var(--danger, #f06c6c); }

/* Grade buttons (W / L / P) per pick */
.sa-slip-modal-pick-grade {
    display: flex;
    gap: 3px;
}
.sa-slip-modal-pick-grade-btn {
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    color: var(--text-muted, #888780);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
}
.sa-slip-modal-pick-grade-btn:hover {
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text, #d4d4d4);
}
.sa-slip-modal-pick-grade-btn[data-grade="win"][aria-pressed="true"] {
    background: var(--accent-pos);
    border-color: var(--accent-pos);
    color: #0a0a0a;
}
.sa-slip-modal-pick-grade-btn[data-grade="loss"][aria-pressed="true"] {
    background: var(--danger, #f06c6c);
    border-color: var(--danger, #f06c6c);
    color: #0a0a0a;
}
.sa-slip-modal-pick-grade-btn[data-grade="push"][aria-pressed="true"] {
    background: var(--text-muted, #888780);
    border-color: var(--text-muted, #888780);
    color: #0a0a0a;
}

/* Remove pick button — only visible in edit mode */
.sa-slip-modal-pick-remove {
    display: none;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid rgba(240, 108, 108, 0.30);
    border-radius: 3px;
    color: var(--danger, #f06c6c);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 100ms ease;
}
.sa-slip-modal-pick-remove:hover {
    background: rgba(240, 108, 108, 0.10);
}
.sa-slip-modal-picks[data-edit-mode="true"] .sa-slip-modal-pick-remove {
    display: block;
}
.sa-slip-modal-picks[data-edit-mode="true"] .sa-slip-modal-pick-grade {
    display: none;
}

/* Note textarea */
.sa-slip-modal-note-block {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sa-slip-modal-note-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-muted, #888780);
    text-transform: uppercase;
}
.sa-slip-modal-note-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: var(--text, #d4d4d4);
    font-family: inherit;
    font-size: 12px;
    padding: 8px 10px;
    resize: vertical;
    min-height: 50px;
    transition: border-color 100ms ease;
}
.sa-slip-modal-note-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.20);
}

/* Modal footer with pin / delete / replay */
.sa-slip-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}
.sa-slip-modal-footer-left,
.sa-slip-modal-footer-right {
    display: flex;
    gap: 8px;
}
.sa-slip-modal-pin-btn,
.sa-slip-modal-delete-btn,
.sa-slip-modal-replay-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    color: var(--text, #d4d4d4);
    font-family: inherit;
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.sa-slip-modal-pin-btn:hover,
.sa-slip-modal-replay-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}
.sa-slip-modal-pin-btn[aria-pressed="true"] {
    color: var(--accent-pos);
    border-color: var(--accent-pos);
    background: rgba(108, 240, 142, 0.06);
}
.sa-slip-modal-pin-btn[aria-pressed="true"] .sa-slip-modal-pin-icon::before {
    content: '◆';
}
.sa-slip-modal-pin-btn .sa-slip-modal-pin-icon::before {
    content: '◇';
}
.sa-slip-modal-delete-btn {
    color: var(--danger, #f06c6c);
    border-color: rgba(240, 108, 108, 0.22);
}
.sa-slip-modal-delete-btn:hover {
    background: rgba(240, 108, 108, 0.08);
    border-color: rgba(240, 108, 108, 0.35);
}
.sa-slip-modal-replay-btn {
    background: rgba(108, 240, 142, 0.10);
    border-color: rgba(108, 240, 142, 0.30);
    color: var(--accent-pos);
}
.sa-slip-modal-replay-btn:hover {
    background: rgba(108, 240, 142, 0.18);
    border-color: var(--accent-pos);
}

/* ---- Compare modal (stat-strip side-by-side) ---- */
.sa-compare-modal-body {
    width: 760px;
    max-width: 94vw;
}
.sa-compare-modal-content {
    padding: 16px 18px;
}
.sa-compare-grid {
    display: grid;
    grid-template-columns: 140px repeat(var(--compare-slip-count, 2), 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}
.sa-compare-cell {
    background: #0d0d0d;
    padding: 10px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text, #d4d4d4);
}
.sa-compare-cell-header {
    background: rgba(255, 255, 255, 0.02);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-muted, #888780);
    text-transform: uppercase;
    font-weight: 600;
}
.sa-compare-cell-rowlabel {
    background: rgba(255, 255, 255, 0.02);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--text-dim, #6a6a6a);
    text-transform: uppercase;
}
.sa-compare-cell .sa-bottom-line {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ============================================================
   v0.14.16 — Auto-grading
   ------------------------------------------------------------
   New surfaces:
   - .sa-calibration-actions — wrapper inside calibration card for
     the auto-grade button + result message
   - .sa-autograde-btn — "Auto-grade pending picks" button
   - .sa-autograde-result — toast-style status line after a run
   - .sa-slip-modal-pick-grade-btn[data-grade="ungradable"] — fourth
     grade state for the slip-detail modal (—). Greyed-out visually,
     same activation pattern as W/L/P.
   ============================================================ */

.sa-calibration-actions {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sa-autograde-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: rgba(108, 240, 142, 0.06);
    border: 1px solid rgba(108, 240, 142, 0.22);
    border-radius: 3px;
    color: var(--accent-pos);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 7px 10px;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.sa-autograde-btn:hover:not(:disabled) {
    background: rgba(108, 240, 142, 0.12);
    border-color: rgba(108, 240, 142, 0.40);
}
.sa-autograde-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sa-autograde-btn.sa-autograde-busy .sa-autograde-btn-icon {
    animation: sa-autograde-spin 0.8s linear infinite;
    display: inline-block;
}
.sa-autograde-btn-icon {
    font-size: 13px;
    line-height: 1;
}
@keyframes sa-autograde-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.sa-autograde-result {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted, #888780);
    line-height: 1.4;
    padding: 4px 0;
}
.sa-autograde-result[hidden] {
    display: none;
}

/* Fourth grade state — ungradable (—) inside slip detail modal pick rows */
.sa-slip-modal-pick-grade-btn[data-grade="ungradable"][aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-muted, #888780);
}


/* ============================================================
   v0.18.2 — Universal Slip Import / transcript review
   ============================================================ */
.sa-transcript-card { margin-top: 0; }
.sa-transcript-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sa-transcript-sport-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--text-dim, #5a5a5a);
}
.sa-transcript-sport,
.sa-import-grid select,
.sa-import-grid input {
    background: var(--bg, #0a0a0a);
    border: 1px solid var(--border, #2a2a2a);
    color: var(--text, #d4d4d4);
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 8px 9px;
    outline: none;
}
.sa-transcript-sport:focus,
.sa-import-grid select:focus,
.sa-import-grid input:focus { border-color: var(--accent-pos); }
.sa-transcript-toolbar .sa-line-count { margin-left: auto; margin-right: 0; }
.sa-transcript-textarea { min-height: 240px; }
.sa-transcript-status {
    margin-right: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted, #6a6a6a);
}
.sa-transcript-status[data-kind="busy"], .sa-transcript-status[data-kind="warn"] { color: var(--warn, #f0a86c); }
.sa-transcript-status[data-kind="ok"] { color: var(--accent-pos); }
.sa-transcript-status[data-kind="error"] { color: var(--danger, #f06c6c); }

.sa-import-review {
    margin: 16px 0 24px;
    border: 1px solid var(--border, #242424);
    background: var(--surface, #0f0f0f);
    border-radius: 2px;
    overflow: hidden;
}
.sa-import-review[hidden] { display: none !important; }
.sa-import-review-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border, #242424);
}
.sa-import-review-sub {
    margin-top: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted, #6a6a6a);
    letter-spacing: .05em;
}
.sa-import-review-summary { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.sa-import-summary-total, .sa-import-summary-warn, .sa-import-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: .08em;
    padding: 4px 7px;
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 100px;
}
.sa-import-summary-total { color: var(--text, #d4d4d4); }
.sa-import-summary-warn { color: var(--warn, #f0a86c); }
.sa-import-status-ready { color: var(--accent-pos); border-color: rgba(93,224,172,.35); }
.sa-import-status-review { color: var(--warn, #f0a86c); border-color: rgba(240,168,108,.35); }
.sa-import-status-blocked { color: var(--danger, #f06c6c); border-color: rgba(240,108,108,.35); }
.sa-import-claim-warnings {
    padding: 10px 18px;
    border-bottom: 1px solid rgba(240,168,108,.22);
    background: rgba(240,168,108,.05);
    color: var(--warn, #f0a86c);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    line-height: 1.5;
}
.sa-import-review-body { display: flex; flex-direction: column; }
.sa-import-leg { padding: 16px 18px; border-bottom: 1px solid var(--border, #202020); }
.sa-import-leg[data-status="REVIEW"] { box-shadow: inset 3px 0 0 var(--warn, #f0a86c); }
.sa-import-leg[data-status="BLOCKED"] { box-shadow: inset 3px 0 0 var(--danger, #f06c6c); }
.sa-import-leg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sa-import-leg-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted, #6a6a6a); letter-spacing: .1em; }
.sa-import-source {
    margin-bottom: 12px;
    padding: 8px 10px;
    background: rgba(255,255,255,.02);
    border-left: 2px solid var(--border, #333);
    color: var(--text-muted, #9a9a9a);
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    line-height: 1.45;
}
.sa-import-grid { display: grid; grid-template-columns: 1.35fr 1.15fr 1fr; gap: 14px; }
.sa-import-grid label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sa-import-grid label > span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--text-dim, #5a5a5a);
    letter-spacing: .1em;
}
.sa-import-grid small { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-muted, #6a6a6a); }
.sa-import-raw-market { min-height: 16px; font-size: 11px; color: var(--text-muted, #9a9a9a); }
.sa-import-condition-row { display: grid; grid-template-columns: 80px 1fr; gap: 6px; }
.sa-import-leg-foot { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; }
.sa-import-warning, .sa-import-ok, .sa-import-suggest {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: .04em;
}
.sa-import-warning { color: var(--warn, #f0a86c); }
.sa-import-ok { color: var(--text-dim, #5a5a5a); }
.sa-import-suggest {
    border: 1px solid rgba(93,224,172,.35);
    color: var(--accent-pos);
    background: rgba(93,224,172,.06);
    border-radius: 2px;
    padding: 5px 8px;
    cursor: pointer;
}
.sa-import-review-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; }

@media (max-width: 900px) {
    .sa-import-review-head { align-items: flex-start; flex-direction: column; }
    .sa-import-review-summary { justify-content: flex-start; }
    .sa-import-grid { grid-template-columns: 1fr; }
    .sa-transcript-toolbar { flex-wrap: wrap; }
    .sa-transcript-toolbar .sa-line-count { width: 100%; margin-left: 0; }
}