/* Vista experimental features — scoped to #tab-vista */
#tab-vista .sidebar-status-chip {
        display: flex; align-items: center; gap: 8px;
        padding: 8px 12px; background: #f8f9fa; border: 1px solid #e8eaed;
        border-radius: 6px; font-size: 12px; font-weight: 500; color: #5f6368;
    }
#tab-vista .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; flex-shrink: 0; }
#tab-vista .status-dot.live { background: #1e8e3e; }
#tab-vista .status-dot.stale { background: #ea8600; }
#tab-vista .status-dot.error { background: #c5221f; }
#tab-vista .sidebar-refresh-btn {
        margin-left: auto; background: none; border: none; color: #1a73e8;
        font-size: 12px; cursor: pointer; padding: 0; font-family: inherit; font-weight: 600;
    }
#tab-vista .sidebar-refresh-btn:hover { text-decoration: underline; }

#tab-vista .page-title { margin-bottom: 28px; }
#tab-vista .page-title h1 { font-size: 28px; font-weight: 400; color: #202124; margin: 0 0 4px 0; letter-spacing: -0.01em; }
#tab-vista .page-title p { font-size: 14px; color: #5f6368; margin: 0; }

#tab-vista .vista-panel { display: none; }
#tab-vista .vista-panel.active { display: block; }

#tab-vista .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

#tab-vista .steez-section { padding: 24px; border: 1px solid #e8eaed; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
#tab-vista .steez-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
#tab-vista .steez-title { font-size: 16px; font-weight: 600; color: #202124; margin: 0; letter-spacing: -0.01em; }
#tab-vista .steez-cumulative { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
#tab-vista .steez-total-value { font-size: 48px; font-weight: 300; color: #1a73e8; line-height: 1; }
#tab-vista .steez-total-label { font-size: 13px; color: #5f6368; }

#tab-vista .steez-pods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; }
#tab-vista .steez-pod-card { padding: 16px; border: 1px solid #e8eaed; border-radius: 10px; background: #f8f9fa; }
#tab-vista .steez-pod-card.steez-pod-warn { border-color: #ea8600; background: #fff8e1; }
#tab-vista .steez-pod-card.steez-pod-ok { border-color: #1e8e3e; background: #f0faf4; }
#tab-vista .steez-pod-name { font-size: 13px; font-weight: 600; color: #5f6368; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
#tab-vista .steez-pod-score { font-size: 28px; font-weight: 300; color: #202124; line-height: 1; }
#tab-vista .steez-pod-pct { font-size: 12px; color: #5f6368; margin-top: 2px; }
#tab-vista .steez-pod-warn .steez-pod-score { color: #ea8600; }
#tab-vista .steez-pod-ok  .steez-pod-score { color: #1e8e3e; }

#tab-vista .steez-warnings { margin-bottom: 20px; }
#tab-vista .steez-warn-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: #fff3e0; border: 1px solid #ffcc02; border-radius: 6px; margin-bottom: 8px; font-size: 13px; color: #6d3a00; }
#tab-vista .steez-warn-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

#tab-vista .steez-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
#tab-vista .steez-table th { background: #f8f9fa; padding: 8px 10px; text-align: left; border-bottom: 2px solid #e8eaed; font-weight: 600; color: #5f6368; white-space: nowrap; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
#tab-vista .steez-table td { padding: 8px 10px; border-bottom: 1px solid #f1f3f4; }
#tab-vista .steez-table tr:hover td { background: #f8f9fa; }
#tab-vista .steez-table td.steez-name-cell { font-weight: 500; }
#tab-vista .steez-pillar { font-size: 12px; color: #5f6368; }
#tab-vista .steez-score-cell { font-weight: 600; color: #1a73e8; }

#tab-vista .steez-atrisk-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e8eaed; }
#tab-vista .steez-atrisk-title { font-size: 14px; font-weight: 600; color: #202124; margin-bottom: 12px; }
#tab-vista .steez-atrisk-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f8f9fa; border: 1px solid #e8eaed; border-radius: 8px; margin-bottom: 8px; font-size: 13px; flex-wrap: wrap; }
#tab-vista .steez-atrisk-name { font-weight: 500; min-width: 160px; }
#tab-vista .steez-atrisk-score { color: #5f6368; }
#tab-vista .steez-atrisk-drop { font-weight: 600; }
#tab-vista .steez-atrisk-drop.drop-ok { color: #1e8e3e; }
#tab-vista .steez-atrisk-drop.drop-warn { color: #ea8600; }
#tab-vista .steez-atrisk-drop.drop-critical { color: #c5221f; }
#tab-vista .steez-threshold-note { font-size: 12px; color: #9aa0a6; margin-top: 12px; }

#tab-vista .empty-state { color: #9aa0a6; font-size: 13px; padding: 8px 0 16px 0; }

#tab-vista .error-banner {
        padding: 12px 16px; background: #fce8e6; border: 1px solid #f5c6c6;
        border-radius: 8px; font-size: 13px; color: #c5221f;
        margin-bottom: 24px; display: none;
    }

    /* Civic */

#tab-vista .ab-plan-tabs {
        display: flex; gap: 4px; flex-wrap: wrap;
        border-bottom: 1px solid #e8eaed; margin-bottom: 24px;
    }
#tab-vista .ab-plan-tab {
        padding: 8px 16px; border: none; background: none; cursor: pointer;
        font-size: 13px; font-weight: 500; color: #5f6368;
        border-bottom: 3px solid transparent; margin-bottom: -1px;
        border-radius: 0; font-family: inherit;
    }
#tab-vista .ab-plan-tab:hover { color: #202124; }
#tab-vista .ab-plan-tab.active { color: #1a73e8; border-bottom-color: #1a73e8; }
#tab-vista .ab-plan-tab:disabled { opacity: 0.35; cursor: default; }

#tab-vista .relay-tab {
        padding: 8px 18px; border: none; background: none; cursor: pointer;
        font-size: 13px; font-weight: 500; color: #5f6368;
        border-bottom: 2px solid transparent; margin-bottom: -1px;
        border-radius: 0; font-family: inherit; transition: color 0.15s;
    }
#tab-vista .relay-tab:hover { color: #202124; }
#tab-vista .relay-tab.active { color: #202124; border-bottom-color: #202124; }

#tab-vista .ab-board-wrap { max-width: 680px; }
#tab-vista .ab-empty { color: #9aa0a6; font-size: 14px; padding: 32px 0; }
#tab-vista .ab-roles-block {
        padding: 12px 16px; background: #f8f9fa; border: 1px solid #e8eaed;
        border-radius: 8px; font-size: 13px; line-height: 1.8; margin-bottom: 20px;
    }
#tab-vista .ab-roles-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #5f6368; display: block; margin-bottom: 4px; }
#tab-vista .ab-pod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
#tab-vista .ab-pod-label {
        font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
        color: #5f6368; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #e8eaed;
    }
#tab-vista .ab-pod-label-gap { margin-top: 18px; }
#tab-vista .ab-room-line { font-size: 13px; line-height: 1.9; color: #202124; display: flex; align-items: center; gap: 6px; }
#tab-vista .ab-room-line.empty-room { color: #bdc1c6; }
#tab-vista .ab-device-badge {
        font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
        padding: 1px 5px; border-radius: 3px;
        background: #e8f0fe; color: #1a73e8;
    }
#tab-vista .ab-device-badge.beh { background: #fce8e6; color: #c5221f; }
#tab-vista .ab-roster-block {
        padding: 10px 14px; background: #f8f9fa; border: 1px solid #e8eaed;
        border-radius: 6px; margin-top: 12px; font-size: 13px; line-height: 1.8;
    }
#tab-vista .ab-roster-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #5f6368; display: block; margin-bottom: 2px; }
#tab-vista .ab-suggest-note {
        margin-top: 28px; padding: 12px 16px; background: #fff8e1;
        border: 1px solid #ffcc02; border-radius: 6px; font-size: 13px; color: #6d3a00;
    }

    @media (max-width: 900px) {
        .two-col { grid-template-columns: 1fr; }
        .ab-pod-grid { grid-template-columns: 1fr; }
    }

    .civic-controls {
        margin-top: 32px; padding-top: 28px;
        border-top: 1px solid #e8eaed;
        max-width: 680px;
    }
    .civic-controls-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 24px;
    }
    .civic-section-label {
        font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
        text-transform: uppercase; color: #5f6368;
    }
    .civic-session-status {
        font-size: 12px; color: #9aa0a6;
    }
    .civic-session-status.open { color: #1e8e3e; font-weight: 600; }
    .civic-session-status.closed { color: #9aa0a6; }

    .civic-btn-start {
        padding: 9px 20px; border: none; border-radius: 6px;
        font-size: 13px; font-weight: 600; cursor: pointer;
        font-family: inherit; transition: background 0.15s;
        background: #1a73e8; color: #fff;
    }
    .civic-btn-start:hover { background: #1557b0; }
    .civic-btn-stop {
        padding: 9px 20px; border: none; border-radius: 6px;
        font-size: 13px; font-weight: 600; cursor: pointer;
        font-family: inherit; transition: background 0.15s;
        background: #fce8e6; color: #c5221f;
    }
    .civic-btn-stop:hover { background: #f5c6c6; }
    .civic-btn-reset {
        padding: 9px 20px; border: none; border-radius: 6px;
        font-size: 13px; font-weight: 600; cursor: pointer;
        font-family: inherit; transition: background 0.15s;
        background: #f8f9fa; color: #202124; border: 1px solid #dfe1e5;
    }
    .civic-btn-reset:hover { background: #e8eaed; }
    .civic-btn-disabled {
        padding: 9px 20px; border: none; border-radius: 6px;
        font-size: 13px; font-weight: 600;
        font-family: inherit; background: #f1f3f4; color: #bdc1c6; cursor: default;
    }

    .civic-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }

    .civic-chart-wrap {
        background: #f8f9fa; border: 1px solid #e8eaed;
        border-radius: 8px; padding: 16px;
    }
    .civic-chart-title {
        font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
        text-transform: uppercase; color: #5f6368; margin-bottom: 14px;
    }
    .civic-bar-group { display: flex; flex-direction: column; gap: 10px; }
    .civic-bar-row { display: flex; align-items: center; gap: 10px; }
    .civic-bar-label {
        font-size: 12px; font-weight: 600; width: 28px;
        text-align: right; color: #5f6368; flex-shrink: 0;
    }
    .civic-bar-track {
        flex: 1; background: #e8eaed; border-radius: 4px; height: 22px;
        overflow: hidden; position: relative;
    }
    .civic-bar-fill {
        height: 100%; border-radius: 4px;
        transition: width 0.4s ease;
    }
    .civic-bar-fill.yes { background: #1e8e3e; }
    .civic-bar-fill.no  { background: #c5221f; }
    .civic-bar-count {
        font-size: 12px; font-weight: 700; width: 22px;
        text-align: left; color: #202124; flex-shrink: 0;
    }
    .civic-bar-empty { font-size: 13px; color: #9aa0a6; padding: 4px 0; }

    .civic-comments-wrap {
        background: #f8f9fa; border: 1px solid #e8eaed;
        border-radius: 8px; padding: 16px;
        display: flex; flex-direction: column;
    }
    .civic-comments-title {
        font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
        text-transform: uppercase; color: #5f6368; margin-bottom: 12px;
        flex-shrink: 0;
    }
    .civic-comments-list {
        overflow-y: auto; max-height: 180px;
        display: flex; flex-direction: column; gap: 10px;
    }
    .civic-comment-item {
        padding: 8px 10px; background: #fff; border: 1px solid #e8eaed;
        border-radius: 6px;
    }
    .civic-comment-name {
        font-size: 11px; font-weight: 700; color: #5f6368;
        text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px;
    }
    .civic-comment-text { font-size: 13px; color: #202124; line-height: 1.5; }
    .civic-comments-empty { font-size: 13px; color: #9aa0a6; }

    .sc-upload-zone {
        border: 2px dashed #dadce0; border-radius: 10px;
        padding: 32px 24px; text-align: center; cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
        background: #fff;
    }
    .sc-upload-zone:hover, .sc-upload-zone.drag-over { border-color: #1a73e8; background: #e8f0fe; }
    .sc-upload-zone svg { color: #9aa0a6; margin-bottom: 12px; }
    .sc-upload-label { font-size: 14px; font-weight: 500; color: #5f6368; margin-bottom: 4px; }
    .sc-upload-sub { font-size: 12px; color: #9aa0a6; }
    .sc-upload-filename { font-size: 13px; font-weight: 600; color: #1a73e8; margin-top: 10px; }

    .sc-controls { display: flex; align-items: flex-end; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
    .sc-field { display: flex; flex-direction: column; gap: 5px; }
    .sc-label { font-size: 12px; font-weight: 600; color: #5f6368; text-transform: uppercase; letter-spacing: 0.04em; }
    .sc-input {
        padding: 9px 12px; border: 1px solid #dadce0; border-radius: 6px;
        font-size: 14px; font-family: inherit; color: #202124; outline: none;
        transition: border-color 0.15s;
    }
    .sc-input:focus { border-color: #1a73e8; }
    .sc-run-btn {
        padding: 9px 20px; background: #1a73e8; color: #fff;
        border: none; border-radius: 6px; font-size: 14px; font-weight: 500;
        font-family: inherit; cursor: pointer; white-space: nowrap;
        transition: background 0.15s;
    }
    .sc-run-btn:hover { background: #1557b0; }
    .sc-run-btn:disabled { background: #dadce0; color: #9aa0a6; cursor: default; }
    .sc-clear-btn {
        padding: 9px 20px; background: #fff; color: #5f6368;
        border: 1px solid #dadce0; border-radius: 6px; font-size: 14px; font-weight: 500;
        font-family: inherit; cursor: pointer; white-space: nowrap;
        transition: background 0.15s, border-color 0.15s;
    }
    .sc-clear-btn:hover { background: #f1f3f4; border-color: #bdc1c6; }

    .sc-loading { display: flex; align-items: center; gap: 10px; padding: 20px 0; font-size: 14px; color: #5f6368; }
    .sc-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a73e8; border-radius: 50%; animation: sc-spin 0.7s linear infinite; flex-shrink: 0; }
    @keyframes sc-spin { to { transform: rotate(360deg); } }

    .sc-error { padding: 14px 16px; background: #fce8e6; border: 1px solid #f5c6c3; border-radius: 8px; font-size: 13px; color: #c5221f; margin-top: 16px; }

    .sc-results { margin-top: 28px; }
    .sc-day-label { font-size: 11px; font-weight: 700; color: #9aa0a6; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
    .sc-day-block { margin-bottom: 32px; }
    .sc-day-heading { font-size: 18px; font-weight: 600; color: #202124; margin-bottom: 4px; }
    .sc-day-date { font-size: 13px; color: #5f6368; margin-bottom: 16px; }
    .sc-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .sc-shift-col { background: #fff; border: 1px solid #e8eaed; border-radius: 10px; padding: 20px; }
    .sc-shift-heading { font-size: 13px; font-weight: 700; color: #5f6368; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #f1f3f4; }

    .sc-tier { margin-bottom: 16px; }
    .sc-tier:last-child { margin-bottom: 0; }
    .sc-tier-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
    .sc-tier-label::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .sc-tier.tier-high .sc-tier-label { color: #1e8e3e; }
    .sc-tier.tier-high .sc-tier-label::before { background: #1e8e3e; }
    .sc-tier.tier-medium .sc-tier-label { color: #ea8600; }
    .sc-tier.tier-medium .sc-tier-label::before { background: #ea8600; }
    .sc-tier.tier-low .sc-tier-label { color: #9aa0a6; }
    .sc-tier.tier-low .sc-tier-label::before { background: #9aa0a6; }
    .sc-tier.tier-not .sc-tier-label { color: #c5221f; }
    .sc-tier.tier-not .sc-tier-label::before { background: #c5221f; }
    .sc-tier.tier-unscheduled .sc-tier-label { color: #5f6368; }
    .sc-tier.tier-unscheduled .sc-tier-label::before { background: #5f6368; }
    .sc-tier.tier-unclear .sc-tier-label { color: #8430ce; }
    .sc-tier.tier-unclear .sc-tier-label::before { background: #8430ce; }

    .sc-name-row { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; border-bottom: 1px solid #f8f9fa; font-size: 13px; }
    .sc-name-row:last-child { border-bottom: none; }
    .sc-name { font-weight: 500; color: #202124; }
    .sc-code { font-size: 11px; color: #9aa0a6; font-family: monospace; }
    .sc-flag { font-size: 11px; color: #ea8600; font-weight: 600; }
    .sc-tier-empty { font-size: 12px; color: #bdc1c6; padding: 2px 0; }

    .sc-disclaimer { margin-top: 24px; padding: 12px 16px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e8eaed; font-size: 12px; color: #80868b; display: flex; align-items: flex-start; gap: 8px; }

    .slipstream-card { background: #fff; border: 1px solid #e8eaed; border-radius: 12px; padding: 28px 32px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
    .slipstream-legend { display: flex; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
    .slipstream-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5f6368; font-weight: 500; }
    .slipstream-legend-swatch { width: 28px; height: 3px; border-radius: 2px; flex-shrink: 0; }
    .slipstream-legend-swatch.dashed { background: none; border-top: 2.5px dashed; }
    .slipstream-chart-wrap { position: relative; width: 100%; }
    .slipstream-summary-row { display: flex; gap: 32px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #f1f3f4; flex-wrap: wrap; }
    .slipstream-stat { display: flex; flex-direction: column; gap: 2px; }
    .slipstream-stat-value { font-size: 32px; font-weight: 300; color: #202124; line-height: 1; }
    .slipstream-stat-value.accent { color: #1a73e8; }
    .slipstream-stat-label { font-size: 12px; color: #80868b; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
    .slipstream-annotation { font-size: 11px; color: #9aa0a6; font-style: italic; margin-top: 2px; }
#tab-vista .vista-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 20px;
}
#tab-vista .vista-subnav {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid #e8eaed; flex: 1; min-width: 0;
}
#tab-vista .vista-subtab {
    padding: 10px 16px; border: none; background: none; cursor: pointer;
    font-size: 17px; font-weight: 500; color: #5f6368;
    border-radius: 0; font-family: inherit; white-space: nowrap;
    text-decoration: none;
    text-underline-offset: 3px;
}
#tab-vista .vista-subtab:hover,
#tab-vista .vista-subtab.active {
    color: #202124;
    text-decoration: underline;
    text-decoration-color: #202124;
    text-decoration-thickness: 1px;
}
#tab-vista .vista-subtab.active { font-weight: 600; }
#tab-vista .vista-status-row { flex-shrink: 0; }

/* Keep VISTA navigation visible when embedded in MiCA shell. */
body.sara-mica-embed #tab-vista .vista-header {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #f1f3f4;
    padding-top: 4px;
}