/* ============================================================
   AggieQuant v2.0 Terminal — Stitch design system
   Bloomberg-Terminal density × Linear-workspace ergonomics
   ============================================================ */

:root {
    --sv-bg:                #07090f;
    --sv-bg-soft:           #0a0f1a;
    --sv-card:              #0d1220;
    --sv-card-glass:        rgba(13, 18, 32, 0.55);
    --sv-elev:              #141b2d;
    --sv-border:            #1c253d;
    --sv-border-strong:     #2a3553;

    --sv-maroon:            #9b1f34;
    --sv-maroon-bright:     #ae2e40;
    --sv-maroon-soft:       rgba(155, 31, 52, 0.12);
    --sv-maroon-glow:       0 0 18px rgba(155, 31, 52, 0.4);

    --sv-teal:              #2ec4b6;
    --sv-teal-bright:       #4fdbcc;
    --sv-teal-soft:         rgba(46, 196, 182, 0.10);

    --sv-cyan:              #4dd4ff;
    --sv-amber:             #f2b84b;
    --sv-green:             #4dd4ff;
    --sv-red:               #ffb4ab;

    --sv-text:              #f5dddd;
    --sv-text-strong:       #ffffff;
    --sv-text-mid:          #cbd5e1;
    --sv-text-dim:          #94a3b8;
    --sv-text-faint:        #475569;

    --sv-font-h:            'Outfit', system-ui, sans-serif;
    --sv-font-body:         'Inter', system-ui, sans-serif;
    --sv-font-mono:         'JetBrains Mono', ui-monospace, monospace;

    --sv-gutter:            12px;
    --sv-page-pad:          24px;
    --sv-radius:            4px;
    --sv-radius-sm:         2px;
    --sv-radius-lg:         8px;

    --sv-nav-h:             40px;
    --sv-tx:                150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset overrides for stitch shell --- */
html, body { background-color: var(--sv-bg); }
body.tv-shell {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--sv-font-body);
    color: var(--sv-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
body.tv-shell::selection,
body.tv-shell *::selection { background: var(--sv-teal); color: #00201d; }

/* Hide old app-shell scaffolding if a JS render is delayed */
body.tv-shell .app-sidebar,
body.tv-shell .sidebar-toggle,
body.tv-shell .app-topbar { display: none !important; }
body.tv-shell .app-shell { display: block !important; }
body.tv-shell .app-main { margin-left: 0 !important; }
body.tv-shell .page-inner { padding: 0 !important; }
body.tv-shell .blob { display: none !important; } /* remove gradient orbs */

/* ----------------- Top Nav ----------------- */
.tv-nav {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--sv-nav-h);
    z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px;
    background: rgba(7, 9, 15, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--sv-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    font-family: var(--sv-font-mono);
}
.tv-nav-left, .tv-nav-right {
    display: flex; align-items: center; gap: 16px;
    height: 100%;
}
.tv-brand {
    font-family: var(--sv-font-mono);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sv-text-strong);
    text-decoration: none;
}
.tv-brand .tv-brand-mark { color: var(--sv-maroon); }
.tv-nav-links { display: flex; height: 100%; }
.tv-nav-link {
    display: flex; align-items: center;
    height: 100%;
    padding: 0 12px;
    font-family: var(--sv-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sv-text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--sv-tx), background var(--sv-tx);
}
.tv-nav-link:hover { color: var(--sv-text-strong); background: var(--sv-elev); }
.tv-nav-link.active {
    color: var(--sv-text-strong);
    border-bottom-color: var(--sv-maroon);
}
.tv-cmdk {
    display: none;
    align-items: center; gap: 8px;
    padding: 4px 10px;
    background: var(--sv-elev);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    font-family: var(--sv-font-mono);
    font-size: 11px;
    color: var(--sv-text-dim);
    cursor: pointer;
    transition: border-color var(--sv-tx), color var(--sv-tx);
}
.tv-cmdk:hover { border-color: var(--sv-teal); color: var(--sv-text-strong); }
.tv-cmdk kbd {
    font-family: var(--sv-font-mono);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--sv-border);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 10px;
}
@media (min-width: 1024px) { .tv-cmdk { display: inline-flex; } }
.tv-status {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--sv-font-mono);
    font-size: 11px;
    color: var(--sv-teal);
}
.tv-status::before {
    content: ''; width: 7px; height: 7px;
    border-radius: 50%; background: var(--sv-teal);
    animation: tv-pulse 2.4s ease-in-out infinite;
}
@keyframes tv-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46,196,182,0.6); }
    50% { opacity: 0.55; box-shadow: 0 0 0 5px rgba(46,196,182,0); }
}
.tv-clock {
    font-family: var(--sv-font-mono);
    font-size: 11px;
    color: var(--sv-text-dim);
    padding-left: 12px;
    border-left: 1px solid var(--sv-border);
}
.tv-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    color: var(--sv-text-faint);
    background: transparent;
    border: none; border-radius: var(--sv-radius);
    cursor: pointer;
    transition: all var(--sv-tx);
}
.tv-icon-btn:hover { color: var(--sv-text-strong); background: var(--sv-elev); }
.tv-login-btn {
    font-family: var(--sv-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sv-maroon-bright);
    background: transparent;
    border: none; padding: 0 12px; height: 100%;
    cursor: pointer;
    transition: background var(--sv-tx);
    text-decoration: none; display: inline-flex; align-items: center;
}
.tv-login-btn:hover { background: var(--sv-elev); color: var(--sv-text-strong); }
.tv-nav-mobile { display: none; }
@media (max-width: 768px) {
    .tv-nav-links { display: none; }
    .tv-status, .tv-clock, .tv-cmdk { display: none; }
    .tv-nav-mobile { display: inline-flex; }
}

/* ----------------- Page shell ----------------- */
.tv-main {
    flex: 1;
    width: 100%;
    padding-top: calc(var(--sv-nav-h) + 32px);
    padding-bottom: 64px;
    padding-left: var(--sv-page-pad);
    padding-right: var(--sv-page-pad);
    box-sizing: border-box;
}
.tv-main--narrow { max-width: 1000px; margin: 0 auto; }
.tv-main--wide   { max-width: 1400px; margin: 0 auto; }
.tv-main--full   { max-width: none; }

/* ----------------- Footer ----------------- */
.tv-footer {
    width: 100%;
    padding: 8px 16px;
    background: var(--sv-bg);
    border-top: 1px solid var(--sv-border);
    margin-top: auto;
    font-family: var(--sv-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.tv-footer-row {
    display: flex; flex-direction: column;
    gap: 8px;
    align-items: center; justify-content: space-between;
}
@media (min-width: 768px) { .tv-footer-row { flex-direction: row; } }
.tv-footer-copy { color: var(--sv-maroon); font-weight: 700; }
.tv-footer-links { display: flex; gap: 16px; }
.tv-footer-link { color: var(--sv-text-faint); text-decoration: none; transition: color var(--sv-tx); }
.tv-footer-link:hover { color: var(--sv-teal); }

/* ----------------- Page header ----------------- */
.tv-page-header {
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sv-border);
}
.tv-page-eyebrow {
    font-family: var(--sv-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sv-teal);
    margin-bottom: 8px;
}
.tv-page-title {
    font-family: var(--sv-font-h);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--sv-text-strong);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.tv-page-title .tv-sep { color: var(--sv-text-faint); font-weight: 400; }
.tv-page-sub {
    font-family: var(--sv-font-body);
    font-size: 14px;
    color: var(--sv-text-dim);
    max-width: 64ch;
    line-height: 1.55;
}

/* ----------------- Section header ----------------- */
.tv-section-header {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--sv-border);
}
.tv-section-icon {
    width: 16px; height: 16px;
    color: var(--sv-teal);
    flex-shrink: 0;
}
.tv-section-title {
    font-family: var(--sv-font-h);
    font-size: 18px;
    font-weight: 500;
    color: var(--sv-text-mid);
    letter-spacing: -0.01em;
    margin: 0;
}
.tv-section-num { color: var(--sv-text-faint); font-family: var(--sv-font-mono); font-size: 14px; margin-right: 4px; }

/* ----------------- Cards ----------------- */
.tv-card {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    overflow: hidden;
    transition: border-color var(--sv-tx);
}
.tv-card--glass {
    background: var(--sv-card-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.tv-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--sv-border);
    background: rgba(13,18,32,0.4);
}
.tv-card-title {
    font-family: var(--sv-font-h);
    font-size: 16px;
    font-weight: 500;
    color: var(--sv-text);
    margin: 0;
}
.tv-card-title--mono {
    font-family: var(--sv-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sv-text-dim);
}
.tv-card-body { padding: 16px; }
.tv-card-actions { display: flex; gap: 8px; opacity: 0; transition: opacity var(--sv-tx); }
.tv-card:hover .tv-card-actions { opacity: 1; }

/* ----------------- Buttons ----------------- */
.tv-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    font-family: var(--sv-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--sv-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--sv-tx);
    text-decoration: none;
    line-height: 1;
}
.tv-btn:active { transform: scale(0.98); }
.tv-btn-primary {
    background: var(--sv-maroon);
    color: var(--sv-text-strong);
    box-shadow: 0 0 15px rgba(155,31,52,0.4);
}
.tv-btn-primary:hover { background: var(--sv-maroon-bright); box-shadow: 0 0 22px rgba(155,31,52,0.6); }
.tv-btn-ghost {
    background: transparent;
    color: var(--sv-teal-bright);
    border-color: var(--sv-teal);
}
.tv-btn-ghost:hover { background: var(--sv-teal-soft); color: var(--sv-text-strong); }
.tv-btn-quiet {
    background: var(--sv-elev);
    color: var(--sv-text-mid);
    border-color: var(--sv-border);
}
.tv-btn-quiet:hover { border-color: var(--sv-teal); color: var(--sv-text-strong); }

/* ----------------- Inputs ----------------- */
.tv-field { display: flex; flex-direction: column; gap: 4px; }
.tv-label {
    font-family: var(--sv-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--sv-text-dim);
    text-transform: uppercase;
}
.tv-input, .tv-select, .tv-textarea {
    font-family: var(--sv-font-mono);
    font-size: 12px;
    color: var(--sv-text);
    background: var(--sv-bg);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    padding: 8px 12px;
    transition: border-color var(--sv-tx), box-shadow var(--sv-tx);
    width: 100%;
    box-sizing: border-box;
}
.tv-input:focus, .tv-select:focus, .tv-textarea:focus {
    outline: none;
    border-color: var(--sv-teal);
    box-shadow: inset 0 0 0 1px var(--sv-teal);
}
.tv-input::placeholder, .tv-textarea::placeholder { color: var(--sv-text-faint); }
.tv-textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

/* ----------------- Track / option cards (radio) ----------------- */
.tv-option-card {
    position: relative;
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px;
    background: rgba(13,18,32,0.4);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    cursor: pointer;
    transition: all var(--sv-tx);
}
.tv-option-card:hover {
    border-color: var(--sv-teal-bright);
    background: rgba(20,27,45,0.6);
}
.tv-option-card input[type="radio"], .tv-option-card input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.tv-option-card input:checked ~ .tv-option-card-body,
.tv-option-card.is-active {
    /* applied via parent */
}
.tv-option-card:has(input:checked) {
    border-color: var(--sv-teal);
    background: var(--sv-teal-soft);
}
.tv-option-radio {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1px solid var(--sv-text-faint);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color var(--sv-tx);
}
.tv-option-radio::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--sv-teal); opacity: 0; transition: opacity var(--sv-tx);
}
.tv-option-card:has(input:checked) .tv-option-radio { border-color: var(--sv-teal); }
.tv-option-card:has(input:checked) .tv-option-radio::after { opacity: 1; }
.tv-option-title {
    font-family: var(--sv-font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--sv-text-strong);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tv-option-desc {
    font-family: var(--sv-font-body);
    font-size: 12px;
    line-height: 1.45;
    color: var(--sv-text-dim);
    margin: 0;
}
.tv-option-icon { color: var(--sv-text-faint); transition: color var(--sv-tx); width: 18px; height: 18px; }
.tv-option-card:hover .tv-option-icon { color: var(--sv-teal-bright); }
.tv-option-card:has(input:checked) .tv-option-icon { color: var(--sv-teal); }

/* ----------------- Skill chips (checkbox) ----------------- */
.tv-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    font-family: var(--sv-font-mono);
    font-size: 12px;
    color: var(--sv-text-mid);
    cursor: pointer;
    user-select: none;
    transition: all var(--sv-tx);
}
.tv-chip:hover { border-color: var(--sv-teal-bright); color: var(--sv-teal-bright); }
.tv-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tv-chip:has(input:checked) {
    border-color: var(--sv-teal);
    background: var(--sv-teal-soft);
    color: var(--sv-teal-bright);
}

/* Status chips (pills) */
.tv-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-family: var(--sv-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tv-pill--open    { color: var(--sv-cyan);  background: rgba(77,212,255,0.10); }
.tv-pill--soon    { color: var(--sv-red);   background: rgba(255,180,171,0.10); }
.tv-pill--closed  { color: var(--sv-text-faint); background: rgba(148,163,184,0.10); }
.tv-pill--active  { color: var(--sv-text-strong); background: var(--sv-maroon); }
.tv-pill--locked  { color: var(--sv-text-faint); background: rgba(255,255,255,0.04); }

/* ----------------- Tables ----------------- */
.tv-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sv-font-mono);
    font-size: 13px;
}
.tv-table thead th {
    text-align: left;
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sv-text-dim);
    border-bottom: 1px solid var(--sv-border);
    background: rgba(13,18,32,0.4);
}
.tv-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--sv-border);
    color: var(--sv-text);
    line-height: 1.2;
}
.tv-table tbody tr { transition: background var(--sv-tx); }
.tv-table tbody tr:hover { background: var(--sv-teal-soft); }

/* ----------------- Bento grid ----------------- */
.tv-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sv-gutter);
}
@media (max-width: 768px) { .tv-bento { grid-template-columns: 1fr; } }

/* ----------------- Terminal pane ----------------- */
.tv-terminal {
    background: #000;
    border: 1px solid var(--sv-border);
    border-radius: 0;
    padding: 16px;
    font-family: var(--sv-font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--sv-cyan);
    overflow: auto;
}
.tv-terminal-line { display: flex; justify-content: space-between; padding: 2px 0; }
.tv-signal-up   { color: var(--sv-cyan); }
.tv-signal-down { color: var(--sv-red); }

/* Scrollbars (4px) */
.tv-shell ::-webkit-scrollbar { width: 4px; height: 4px; }
.tv-shell ::-webkit-scrollbar-track { background: var(--sv-bg); }
.tv-shell ::-webkit-scrollbar-thumb { background: var(--sv-border); border-radius: 2px; }
.tv-shell ::-webkit-scrollbar-thumb:hover { background: var(--sv-teal); }

/* ----------------- Decorative glows for hero panels ----------------- */
.tv-glow-maroon, .tv-glow-teal { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(70px); }
.tv-glow-maroon { background: rgba(155, 31, 52, 0.12); }
.tv-glow-teal   { background: rgba(46, 196, 182, 0.10); }

/* ----------------- Utility ----------------- */
.tv-mono { font-family: var(--sv-font-mono); }
.tv-h    { font-family: var(--sv-font-h); }
.tv-muted { color: var(--sv-text-dim); }
.tv-faint { color: var(--sv-text-faint); }
.tv-cap  { text-transform: uppercase; letter-spacing: 0.08em; }
.tv-divider { height: 1px; background: var(--sv-border); margin: 24px 0; }

/* Section spacing */
.tv-stack > * + * { margin-top: 32px; }
.tv-stack-sm > * + * { margin-top: 16px; }

/* Lane / 3-card grid */
.tv-grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .tv-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.tv-grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .tv-grid-2 { grid-template-columns: repeat(2, 1fr); } }
.tv-grid-4 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .tv-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tv-grid-4 { grid-template-columns: repeat(4, 1fr); } }