/**
 * Base layout + shared components. mvp- BEM naming, tokens only —
 * no raw colors, fonts, px spacing, or shadows in this file.
 */

/* ---- Reset-lite & page ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-label);
    font-family: var(--font-sans);
    font-feature-settings: var(--font-features-text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
}

h1,
h2,
h3,
h4 {
    color: var(--color-heading);
    font-weight: var(--font-weight-heading);
    margin: 0 0 var(--space-md);
}

h3,
h4 {
    font-weight: var(--font-weight-body);
}

h1 {
    font-size: var(--font-size-h2);
    letter-spacing: var(--tracking-h2);
    line-height: var(--line-height-heading);
}

h2 {
    font-size: var(--font-size-h3);
    letter-spacing: var(--tracking-h3);
    line-height: var(--line-height-subheading);
}

h3 {
    font-size: var(--font-size-h4);
    letter-spacing: var(--tracking-h4);
    line-height: var(--line-height-heading);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-hover);
}

code,
pre {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-mono);
    line-height: var(--line-height-code);
}

/* ---- Layout ---- */
/* The [hidden] attribute always wins — any class that sets display would
 * otherwise silently defeat it (this bug shipped three times: gate rows,
 * the Next strip, and all seven report tab panels rendering stacked). */
[hidden] {
    display: none !important;
}

.mvp-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Workspace pages (project cockpit) get a wider canvas; prose inside is
 * still capped at a reading measure by the page's own styles. */
.mvp-container--wide {
    max-width: var(--container-wide);
}

.mvp-main {
    padding: var(--space-xl) 0 var(--space-3xl);
}

/* ---- Navigation ---- */
.mvp-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
    border-bottom: var(--space-1) solid var(--color-border);
    backdrop-filter: blur(12px);
}

.mvp-nav__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    height: var(--nav-height);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.mvp-nav__brand {
    color: var(--color-heading);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--tracking-h4);
    margin-right: var(--space-md);
}

.mvp-nav__brand:hover {
    color: var(--color-primary);
}

.mvp-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
}

.mvp-nav__link {
    color: var(--color-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
    padding: var(--space-sm) var(--space-10);
    border-radius: var(--radius-lg);
}

.mvp-nav__link:hover {
    color: var(--color-primary);
    background: var(--color-primary-tint);
}

.mvp-nav__link--active {
    color: var(--color-primary);
}

.mvp-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ---- Buttons ---- */
.mvp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    background: var(--color-primary);
    color: var(--color-bg);
    border: var(--space-1) solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    font-feature-settings: var(--font-features-text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mvp-btn:hover {
    background: var(--color-primary-hover);
    color: var(--color-bg);
}

.mvp-btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.mvp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mvp-btn--ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-border-purple);
}

.mvp-btn--ghost:hover {
    background: var(--color-primary-tint);
    color: var(--color-primary);
}

.mvp-btn--danger {
    background: transparent;
    color: var(--color-error);
    border-color: var(--color-error-border);
}

.mvp-btn--danger:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.mvp-btn--sm {
    font-size: var(--font-size-sm);
    padding: var(--space-6) var(--space-12);
}

/* ---- Gate bar (shared: project page + report page) ------------------
 * The single pending decision. Choose first (proceed / kill), give the
 * one-line reason after — mvp-project.js / mvp-report.js reveal the form. */
.mvp-gate {
    margin-top: var(--space-lg);
    border: var(--space-1) solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    padding: var(--space-12) var(--space-md);
}

.mvp-gate__row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.mvp-gate__kicker {
    color: var(--color-body);
    font-family: var(--font-mono);
    font-size: var(--font-size-badge);
    font-weight: var(--font-weight-mono-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.mvp-gate__question {
    color: var(--color-heading);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
}

.mvp-gate__hint {
    color: var(--color-body);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
}

.mvp-gate__actions {
    display: flex;
    gap: var(--space-sm);
    margin-left: auto;
}

.mvp-gate__form .mvp-input {
    flex: 1;
    min-width: 240px;
    font-size: var(--font-size-sm);
    padding: var(--space-6) var(--space-10);
}

/* Form wrapper that must render as an inline button (e.g. nav logout) */
.mvp-inline-form {
    display: inline;
    margin: 0;
}

/* ---- Cards ---- */
.mvp-card {
    background: var(--color-surface);
    border: var(--space-1) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.mvp-card--elevated {
    box-shadow: var(--shadow-elevated);
}

.mvp-card__title {
    font-size: var(--font-size-h4);
    letter-spacing: var(--tracking-h4);
    color: var(--color-heading);
    margin: 0 0 var(--space-md);
}

/* ---- Forms ---- */
.mvp-field {
    margin-bottom: var(--space-md);
}

.mvp-field__label {
    display: block;
    color: var(--color-label);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
}

.mvp-field__hint {
    color: var(--color-body);
    font-size: var(--font-size-caption);
    margin-top: var(--space-xs);
}

.mvp-input,
.mvp-textarea,
.mvp-select {
    width: 100%;
    background: var(--color-surface);
    border: var(--space-1) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-12);
    color: var(--color-heading);
    font-family: var(--font-sans);
    font-feature-settings: var(--font-features-text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
}

.mvp-input::placeholder,
.mvp-textarea::placeholder {
    color: var(--color-body);
}

.mvp-input:focus,
.mvp-textarea:focus,
.mvp-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.mvp-input--error,
.mvp-textarea--error {
    border-color: var(--color-error);
}

.mvp-textarea {
    resize: vertical;
    min-height: calc(var(--space-3xl) + var(--space-xl));
}

/* ---- Alerts ---- */
.mvp-alert {
    border: var(--space-1) solid var(--color-info-border);
    background: var(--color-info-bg);
    color: var(--color-info);
    border-radius: var(--radius-sm);
    padding: var(--space-12) var(--space-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

.mvp-alert--success {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.mvp-alert--error {
    border-color: var(--color-error-border);
    background: var(--color-error-bg);
    color: var(--color-error);
}

.mvp-alert--warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

/* ---- Badges ---- */
.mvp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--color-surface);
    color: var(--color-heading);
    border: var(--space-1) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-6);
    font-size: var(--font-size-badge);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    white-space: nowrap;
}

.mvp-badge--success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}

.mvp-badge--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning-border);
}

.mvp-badge--error {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: var(--color-error-border);
}

.mvp-badge--purple {
    background: var(--color-primary-tint);
    color: var(--color-primary);
    border-color: var(--color-border-soft-purple);
}

/* ---- Auth pages ---- */
.mvp-auth {
    max-width: calc(var(--container-max) / 2.5);
    margin: var(--space-3xl) auto;
    padding: 0 var(--space-lg);
}

.mvp-auth__card {
    background: var(--color-surface);
    border: var(--space-1) solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elevated);
    padding: var(--space-xl);
}

.mvp-auth__title {
    font-size: var(--font-size-h3);
    letter-spacing: var(--tracking-h3);
    margin-bottom: var(--space-lg);
}

.mvp-auth__footer {
    margin-top: var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--color-body);
}

/* ---- Footer ---- */
.mvp-footer {
    border-top: var(--space-1) solid var(--color-border);
    padding: var(--space-lg) 0;
    color: var(--color-body);
    font-size: var(--font-size-caption);
}

/* ---- Utilities ---- */
.mvp-u-tnum {
    font-feature-settings: var(--font-features-tnum);
    letter-spacing: var(--tracking-tnum);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .mvp-container,
    .mvp-nav__inner {
        padding: 0 var(--space-md);
    }

    .mvp-main {
        padding: var(--space-lg) 0 var(--space-2xl);
    }

    .mvp-auth {
        margin: var(--space-xl) auto;
    }

    .mvp-auth__card {
        padding: var(--space-lg);
    }
}