style.css

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --rln-bg: #F2F3EF;
    --rln-ink: #15181A;
    --rln-ink-soft: #4A5056;
    --rln-accent: #9A6B12;
    --rln-accent-soft: #F0E6CC;
    --rln-pass: #2E6E49;
    --rln-pass-bg: #E3EFE7;
    --rln-fail: #9B3A2C;
    --rln-fail-bg: #F5E6E2;
    --rln-line: rgba(21, 24, 26, 0.14);
    --rln-card-bg: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
    :root {
        --rln-bg: #15171A;
        --rln-ink: #E9EAE6;
        --rln-ink-soft: #A8ADB2;
        --rln-accent: #D4A62A;
        --rln-accent-soft: #332A12;
        --rln-pass: #6FC797;
        --rln-pass-bg: #1B2B21;
        --rln-fail: #E08A79;
        --rln-fail-bg: #2E1D19;
        --rln-line: rgba(233, 234, 230, 0.16);
        --rln-card-bg: #1C1F23;
    }
}

body, .gradio-container {
    background: var(--rln-bg) !important;
    color: var(--rln-ink) !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* Headline -- the one place type carries personality. No italic/bold single-word accenting. */
.gradio-container h1 {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--rln-ink) !important;
    border-bottom: 3px solid var(--rln-accent);
    padding-bottom: 0.4em;
    margin-bottom: 0.6em !important;
    max-width: 70ch;
}

.gradio-container h2, .gradio-container h3 {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    font-weight: 500 !important;
    color: var(--rln-ink) !important;
}

.gradio-container p, .gradio-container li {
    max-width: 78ch;
    color: var(--rln-ink) !important;
    line-height: 1.55;
}
.gradio-container em { color: var(--rln-ink-soft); }

/* Verdicts are the actual data of this page -- rendered as compact monospace badges,
   not plain colored text, since that's what they functionally are: a pass/fail stamp. */
.verdict-pass, .verdict-fail {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-block;
}
.verdict-pass { color: var(--rln-pass); background: var(--rln-pass-bg); }
.verdict-fail { color: var(--rln-fail); background: var(--rln-fail-bg); }

/* Example cards: a left accent flag, not a uniform rounded-corner-plus-shadow SaaS card.
   Flat, paper-like -- no drop shadow. */
.example-card {
    background: var(--rln-card-bg);
    border: 1px solid var(--rln-line);
    border-left: 4px solid var(--rln-accent);
    border-radius: 2px;
    padding: 14px 18px;
    margin-bottom: 14px;
}
.example-card p strong { font-family: 'Space Grotesk', sans-serif; font-weight: 500; }

.example-card table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95em;
}
.example-card th, .example-card td {
    border: 1px solid var(--rln-line);
    padding: 9px 11px;
    text-align: left;
    vertical-align: top;
}
.example-card th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8em;
    font-weight: 600;
    color: var(--rln-ink-soft);
    background: transparent;
    border-bottom: 2px solid var(--rln-line);
}
.example-card td:first-child { font-weight: 600; white-space: nowrap; }

/* Scorecard tables (plain markdown "|" tables, not the HTML ones above) get the same
   monospace-header, hairline-rule treatment for consistency. */
.gradio-container table:not(.example-card table) th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8em;
    color: var(--rln-ink-soft);
    border-bottom: 2px solid var(--rln-line) !important;
}
.gradio-container table:not(.example-card table) td,
.gradio-container table:not(.example-card table) th {
    border-color: var(--rln-line) !important;
}

/* Stage note: a margin-note callout, accent rule on the left, not a flat grey box. */
.stage-note {
    background: var(--rln-accent-soft);
    border-left: 3px solid var(--rln-accent);
    border-radius: 2px;
    padding: 12px 16px;
    margin-top: 10px;
    color: var(--rln-ink) !important;
    font-size: 0.95em;
}

/* Tab navigation: a baseline rule turns loose text into a cohesive strip; generous padding 
   and a soft accent-tinted hover/selected state give it real button affordance, reusing the 
   same --rln-accent-soft token as the stage-note callout so "active/highlighted" reads as 
   one consistent idea across the page. */
.tab-nav {
    border-bottom: 1px solid var(--rln-line) !important;
    gap: 2px;
}

.tab-nav button {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 0.93em;
    color: var(--rln-ink-soft) !important;
    padding: 10px 16px !important;
    border-radius: 4px 4px 0 0;
    border-bottom: 3px solid transparent !important;
    background: transparent;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Shared hover and keyboard focus-visible affordance */
.tab-nav button:hover,
.tab-nav button:focus-visible {
    color: var(--rln-ink) !important;
    background: var(--rln-accent-soft) !important;
    outline: none; /* replaced by custom token styling for a cohesive look */
}

/* Active / Selected tab state */
.tab-nav button.selected {
    color: var(--rln-ink) !important;
    font-weight: 500 !important;
    background: var(--rln-accent-soft) !important;
    border-bottom-color: var(--rln-accent) !important;
}