/*
 * FlowLens shared frontend shell.
 *
 * Phase 4.0B establishes reusable visual primitives only.
 * Page-specific behaviour belongs to the page or module that consumes them.
 */

:root {
    color-scheme: dark;

    --fl-bg: #0f172a;
    --fl-surface: #172033;
    --fl-surface-raised: #1e293b;
    --fl-surface-muted: #111827;
    --fl-border: #334155;
    --fl-border-strong: #475569;

    --fl-text: #f8fafc;
    --fl-text-soft: #e2e8f0;
    --fl-text-muted: #94a3b8;
    --fl-text-subtle: #64748b;

    --fl-accent: #38bdf8;
    --fl-accent-strong: #0ea5e9;

    --fl-success: #34d399;
    --fl-warning: #fbbf24;
    --fl-error: #f87171;

    --fl-radius-sm: 0.375rem;
    --fl-radius-md: 0.625rem;
    --fl-radius-lg: 0.875rem;

    --fl-shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.28);

    --fl-content-width: 1280px;
    --fl-space-1: 0.25rem;
    --fl-space-2: 0.5rem;
    --fl-space-3: 0.75rem;
    --fl-space-4: 1rem;
    --fl-space-5: 1.5rem;
    --fl-space-6: 2rem;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--fl-bg);
    color: var(--fl-text);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fl-bg);
    color: var(--fl-text);
    line-height: 1.5;
}

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

a:hover,
a:focus-visible {
    color: var(--fl-text);
}

.fl-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.fl-shell {
    width: min(100% - 2rem, var(--fl-content-width));
    margin-inline: auto;
}

.fl-header {
    border-bottom: 1px solid var(--fl-border);
    background: rgba(15, 23, 42, 0.96);
}

.fl-header__inner {
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fl-space-5);
}

.fl-brand {
    color: var(--fl-text);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.fl-brand__accent {
    color: var(--fl-accent);
}

.fl-nav {
    display: flex;
    align-items: center;
    gap: var(--fl-space-2);
    flex-wrap: wrap;
}

.fl-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 var(--fl-space-3);
    border-radius: var(--fl-radius-sm);
    color: var(--fl-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.fl-nav__link:hover,
.fl-nav__link:focus-visible,
.fl-nav__link[aria-current="page"] {
    color: var(--fl-text);
    background: var(--fl-surface-raised);
}

.fl-main {
    flex: 1;
    padding-block: var(--fl-space-6);
}

.fl-page-header {
    margin-bottom: var(--fl-space-6);
}

.fl-page-title {
    margin: 0;
    color: var(--fl-text);
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    line-height: 1.15;
    font-weight: 700;
}

.fl-page-subtitle {
    margin: var(--fl-space-3) 0 0;
    max-width: 52rem;
    color: var(--fl-text-muted);
    font-size: 1rem;
}

.fl-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--fl-space-4);
}

.fl-span-12 {
    grid-column: span 12;
}

.fl-span-8 {
    grid-column: span 8;
}

.fl-span-6 {
    grid-column: span 6;
}

.fl-span-4 {
    grid-column: span 4;
}

.fl-panel {
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-panel);
    padding: var(--fl-space-5);
}

.fl-panel__title {
    margin: 0 0 var(--fl-space-4);
    color: var(--fl-text);
    font-size: 1.05rem;
    font-weight: 600;
}

.fl-panel__subtitle {
    margin: calc(-1 * var(--fl-space-2)) 0 var(--fl-space-4);
    color: var(--fl-text-muted);
    font-size: 0.85rem;
}

.fl-card-link {
    display: block;
    height: 100%;
    color: inherit;
}

.fl-card-link:hover .fl-panel,
.fl-card-link:focus-visible .fl-panel {
    border-color: var(--fl-border-strong);
}

.fl-metric {
    display: flex;
    flex-direction: column;
    gap: var(--fl-space-1);
}

.fl-metric__label {
    color: var(--fl-text-muted);
    font-size: 0.8rem;
}

.fl-metric__value {
    color: var(--fl-text);
    font-size: 1.5rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.fl-status {
    display: inline-flex;
    align-items: center;
    gap: var(--fl-space-2);
    width: fit-content;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--fl-border);
    border-radius: 999px;
    color: var(--fl-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.fl-status--success {
    color: var(--fl-success);
}

.fl-status--warning {
    color: var(--fl-warning);
}

.fl-status--error {
    color: var(--fl-error);
}

.fl-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0 var(--fl-space-4);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    background: var(--fl-surface-raised);
    color: var(--fl-text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.fl-button:hover,
.fl-button:focus-visible {
    border-color: var(--fl-accent);
}

.fl-button--primary {
    background: var(--fl-accent-strong);
    border-color: var(--fl-accent-strong);
    color: #ffffff;
}

.fl-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.fl-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--fl-text);
    font-size: 0.9rem;
}

.fl-table th {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--fl-border);
    color: var(--fl-text-muted);
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.fl-table td {
    padding: 0.7rem;
    border-bottom: 1px solid var(--fl-border);
    vertical-align: top;
}

.fl-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fl-state {
    padding: var(--fl-space-5);
    border: 1px dashed var(--fl-border);
    border-radius: var(--fl-radius-md);
    color: var(--fl-text-muted);
    text-align: center;
}

.fl-state--error {
    color: var(--fl-error);
}

.fl-footer {
    margin-top: auto;
    padding-block: var(--fl-space-5);
    border-top: 1px solid var(--fl-border);
    color: var(--fl-text-subtle);
    font-size: 0.8rem;
}

@media (max-width: 860px) {
    .fl-header__inner {
        align-items: flex-start;
        flex-direction: column;
        padding-block: var(--fl-space-4);
    }

    .fl-nav {
        width: 100%;
    }

    .fl-span-8,
    .fl-span-6,
    .fl-span-4 {
        grid-column: span 12;
    }
}

@media (max-width: 560px) {
    .fl-shell {
        width: min(100% - 1rem, var(--fl-content-width));
    }

    .fl-main {
        padding-block: var(--fl-space-5);
    }

    .fl-panel {
        padding: var(--fl-space-4);
    }

    .fl-nav__link {
        padding-inline: var(--fl-space-2);
        font-size: 0.85rem;
    }
}

/* Phase 4.0C — MRBE landing page primitives */

.fl-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--fl-space-6); }
.fl-eyebrow { margin:0 0 var(--fl-space-2); color:var(--fl-accent); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.fl-hero__status { display:flex; flex-direction:column; align-items:flex-end; gap:var(--fl-space-2); min-width:15rem; }
.fl-hero__meta,.fl-note { color:var(--fl-text-subtle); font-size:.8rem; }
.fl-panel__body { margin:0 0 var(--fl-space-5); color:var(--fl-text-muted); }
.fl-section { margin-top:3rem; }
.fl-section-title { margin:0; color:var(--fl-text); font-size:1.35rem; }
.fl-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--fl-space-4); }
.fl-section-heading--page { margin-bottom:var(--fl-space-4); }
.fl-metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--fl-space-4); margin-bottom:var(--fl-space-4); }
.fl-metric__value--compact { font-size:1.1rem; }
.fl-definition-list { display:grid; gap:var(--fl-space-3); margin:0; }
.fl-definition-list div { display:flex; justify-content:space-between; gap:var(--fl-space-4); padding-top:var(--fl-space-3); border-top:1px solid var(--fl-border); }
.fl-definition-list dt { color:var(--fl-text-muted); font-size:.8rem; }
.fl-definition-list dd { margin:0; color:var(--fl-text-soft); font-size:.85rem; font-weight:600; }
.fl-feature-list { display:flex; flex-wrap:wrap; gap:var(--fl-space-2); }
.fl-feature-list span { padding:.35rem .55rem; border:1px solid var(--fl-border); border-radius:var(--fl-radius-sm); color:var(--fl-text-soft); background:var(--fl-surface-muted); font-size:.8rem; }
.fl-span-3 { grid-column:span 3; }
.fl-capability-card { display:flex; flex-direction:column; min-height:12rem; }
.fl-capability-card__label { color:var(--fl-accent); font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.fl-capability-card strong { margin-top:var(--fl-space-2); color:var(--fl-text); }
.fl-capability-card p { flex:1; margin:var(--fl-space-3) 0 var(--fl-space-4); color:var(--fl-text-muted); font-size:.9rem; }
.fl-module-card { display:flex; align-items:center; justify-content:space-between; gap:var(--fl-space-6); }
.fl-module-card h3 { margin:var(--fl-space-2) 0; color:var(--fl-text); font-size:1.1rem; }
.fl-module-card p { margin:0; max-width:48rem; color:var(--fl-text-muted); }
.fl-module-card__action { flex:0 0 auto; color:var(--fl-accent); font-weight:600; }

@media (max-width:980px) { .fl-span-3 { grid-column:span 6; } }
@media (max-width:700px) {
    .fl-hero,.fl-module-card { align-items:flex-start; flex-direction:column; }
    .fl-hero__status { align-items:flex-start; min-width:0; }
    .fl-metric-grid { grid-template-columns:1fr; }
    .fl-span-3 { grid-column:span 12; }
}