/* Native cross-document view transitions for MPA navigation.
   Chrome 126+/Safari 18.2+ animate; Firefox ignores and snaps (graceful). */
@view-transition {
    navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

html, body {
    height: 100%;
}

/* Quiet console: one family, 1px lines, ink for primary actions. Matches the
   evidence monitor (monitor.css) so every page speaks the same vocabulary. */
:root {
    --app-line: #e0dfd9;
    --app-line-strong: #c6c5be;
}
.dark-mode {
    --app-line: #2c2e33;
    --app-line-strong: #3e4148;
}

/* ===== Typography ===== */
body,
.v-application,
.v-btn,
.v-chip,
.v-label,
.v-field__input,
.v-list-item-title,
.v-card-title,
.v-toolbar-title {
    font-family: 'Inter', system-ui, sans-serif !important;
}

.v-card-title,
.v-toolbar-title,
.text-headline-small, .text-title-large, .text-title-medium {
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

.v-btn {
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* Disabled reads as unavailable, not as a grey primary (same as monitor .btn). */
.v-btn.v-btn--disabled {
    background: transparent !important;
    border: 1px dashed var(--app-line-strong) !important;
    color: rgba(var(--v-theme-on-surface), 0.55) !important;
    opacity: 1 !important;
}

.v-btn.v-btn--disabled > .v-btn__overlay {
    opacity: 0 !important;
}

/* Buttons beside a text field sit on its centre line, not its top edge. */
.d-flex > .v-btn {
    align-self: center;
}

/* ===== Surfaces ===== */
.v-card {
    border: 1px solid var(--app-line) !important;
}

.v-card > .v-toolbar {
    border-bottom: 1px solid var(--app-line);
}

.v-btn--variant-outlined,
.v-btn--variant-tonal {
    border: 1px solid var(--app-line-strong) !important;
}

.v-btn--variant-tonal > .v-btn__overlay {
    opacity: 0;
}

.v-btn--variant-tonal:hover > .v-btn__overlay {
    opacity: 0.06;
}

/* ===== Inputs ===== */
.v-field--focused .v-field__outline {
    --v-field-border-opacity: 1;
}

/* ===== Data Table ===== */
.v-data-table th {
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--app-line-strong) !important;
}

.v-data-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* ===== Chips ===== */
.v-chip {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

/* ===== Overlays ===== */
.v-overlay__content > .v-card,
.v-snackbar__wrapper {
    border: 1px solid var(--app-line-strong) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

/* ===== Scrollbars ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

/* ===== Links ===== */
/* Vuetify 4 ships its styles in cascade layers, so these unlayered rules win
   over any Vuetify rule regardless of specificity. Exclude components that
   render as an anchor (`v-btn` with href, list items) or their own text colour
   is replaced by this one. */
a:not(.v-btn, .v-list-item, .v-tab, .v-chip) {
    color: rgb(var(--v-theme-primary));
    transition: opacity 0.15s;
}

a:not(.v-btn, .v-list-item, .v-tab, .v-chip):hover {
    opacity: 0.8;
}

/* Sheet columns (components/SheetColumns.js), on Add evidence and the evidence page.
   A suggestion from header words and value shapes is neutral; only one from the
   embedding model is agent violet. */
.sheet-cols { min-width: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.sheet-cols .muted { color: var(--ink-3); }
.sheet-cols > header { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: var(--raise); border-bottom: 1px solid var(--line); font-size: 12.5px; }
.sheet-cols .says { padding: 10px 12px; font-size: 13px; color: var(--ink-2); margin: 0; max-width: 90ch; }
.sheet-cols .says + .says { padding-top: 0; }
.sheet-cols .scroll { overflow-x: auto; }
.sheet-cols table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.sheet-cols th, .sheet-cols td { padding: 6px 10px; border-top: 1px solid var(--line); text-align: start; vertical-align: top; white-space: nowrap; }
.sheet-cols thead th { font-weight: 600; background: var(--panel); }
.sheet-cols .map td { background: var(--raise); }
.sheet-cols .map .v-select { min-width: 150px; }
.sheet-cols .map .v-field { font-size: 12.5px; }
.sheet-cols .note { font-size: 11.5px; display: flex; gap: 4px; align-items: flex-start; margin-top: 3px; white-space: normal; max-width: 220px; color: var(--ink-2); }
.sheet-cols .note .ti { margin-top: 1px; flex: none; }
.sheet-cols .note.sug { color: var(--agent); }
.sheet-cols .note.due { color: var(--due); }
.sheet-cols .ign { color: var(--ink-3); text-decoration: line-through; }
.sheet-cols .blank { color: var(--ink-3); font-style: italic; }
.sheet-cols footer { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--line); }
.sheet-cols .err { color: var(--negative); }
.sheet-cols .ds { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 12px 10px; }
.sheet-cols .ds .v-select, .sheet-cols .ds .v-text-field { max-width: 280px; min-width: 200px; }

/* What happens next (components/SourceSteps.js): one row per step, the icon and the
   word carry the state, colour only repeats it. */
.steps { padding: 12px; }
.steps > header { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.steps h3 { font-size: 13px; margin: 0; font-weight: 650; }
.steps .muted { color: var(--ink-3); font-size: 12px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; font-size: 13px; }
.steps li > .ti { margin-top: 2px; font-size: 15px; color: var(--ink-3); }
.steps .st-word { font-size: 12px; color: var(--ink-3); }
.steps .st-says { font-size: 12.5px; color: var(--ink-2); max-width: 70ch; }
.steps .st-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.steps .sheet-cols { margin-top: 8px; }
.steps .st-done > .ti { color: var(--ink); }
.steps .st-running > .ti, .steps .st-running .st-word { color: var(--agent); }
.steps .st-you > .ti, .steps .st-you .st-word, .steps .st-model > .ti, .steps .st-model .st-word { color: var(--due); }
.steps .st-failed > .ti, .steps .st-failed .st-word { color: var(--negative); }
.steps .st-later, .steps .st-skipped { color: var(--ink-3); }
.steps .st-skipped strong { font-weight: 500; }