style.css

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

/* Atman — Linguistic Demo · Gradio 6 stylesheet.
 *
 * Load like this:
 *     with open(_HERE / "style.css") as f:
 *         css = f.read()
 *     with gr.Blocks(title="...", theme=theme, css=css) as demo:
 *
 * Selectors target Gradio 6 rendered DOM. Where the class name moved between
 * minor versions (e.g. .block / .gr-block, .gr-button-primary / button.primary)
 * we list both so the rule still bites.
 */

/* ── Root: font, page bg, smoothing ──────────────────────────────────── */
body, html { overflow-x: hidden !important; }
.gradio-container {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-feature-settings: "ss01", "cv02", "cv11";  /* Inter numeral variants */
    -webkit-font-smoothing: antialiased;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    margin: 0 auto !important;
}
.gradio-container, .gradio-container * { letter-spacing: -0.003em; }

/* ── Header row (#atman-header-row — lang pill, sits ABOVE hero) ─────── */
#atman-header-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 16px 24px 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#atman-header-row > .block,
#atman-header-row > .gr-block,
#atman-header-row > .form,
#atman-header-row > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

/* ── Hero column (#atman-hero — wraps H1 + header_md) ────────────────── */
#atman-hero { padding: 32px 0 16px; text-align: center; }

/* Strip card chrome from descriptive Markdown blocks inside hero */
#atman-hero > .block,
#atman-hero > .gr-block,
#atman-hero .markdown,
#atman-hero > div > .markdown {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* The H1 lives inside the first gr.Markdown — target its rendered h1 */
#atman-hero .gr-block:first-child h1,
#atman-hero .markdown h1,
#atman-hero h1 {
    font-size: clamp(34px, 4.6vw, 50px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
    margin: 0 auto 18px !important;
    background: linear-gradient(120deg, #4F46E5 0%, #8B5CF6 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
    display: inline-block !important;
}

/* The blurb (#atman-header-md) — neutral grey, larger line-height */
#atman-header-md, #atman-header-md p {
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: #64748B !important;
    max-width: 720px;
    margin: 0 auto !important;
}
:is(.dark, html.dark, body.dark) #atman-header-md,
:is(.dark, html.dark, body.dark) #atman-header-md p { color: #94A3B8 !important; }

#atman-header-md em {
    color: var(--body-text-color-subdued, #94A3B8) !important;
    display: block !important; margin-top: 10px;
    font-size: 14px !important; font-style: italic !important;
}

/* Strong contrast for bold/emph text — uses Gradio theme var so it auto-swaps
   between light and dark mode without relying on .dark/html.dark selectors. */
.atman-emph,
#atman-header-md b,
#atman-header-md strong,
#atman-header-md [class*="bold"] {
    color: var(--body-text-color, #F8FAFC) !important;
    font-weight: 700 !important;
}

/* ── Hero inline-SVG diagram (#atman-hero-diagram-wrap > .atman-hero-diagram) ── */
#atman-hero-diagram-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.atman-hero-diagram {
    max-width: 100%;
    width: 100%;
    margin: 36px auto 0;
    padding: 22px;
    background: var(--block-background-fill, #13131F) !important;
    border: 1px solid var(--block-border-color, #1F2937) !important;
    border-radius: 14px;
    box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,0.30));
    color: var(--body-text-color-subdued, #94A3B8);
}
.atman-hero-diagram svg { display: block; width: 100%; height: auto; }
.atman-hero-diagram-caption {
    font: 500 11px/1 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-top: 14px;
    text-align: center;
}
:is(.dark, html.dark, body.dark) .atman-hero-diagram-caption { color: #64748B; }

/* Language radio pill — sits in its own row above hero, no absolute position */
#atman-lang {
    background: #FFFFFF; border: 1px solid #E5E7EB;
    border-radius: 999px; padding: 3px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    min-width: 0 !important; width: auto !important;
}
.dark #atman-lang { background: #13131F; border-color: #1F2937; }
#atman-lang label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important; letter-spacing: 0.03em !important;
    padding: 7px 14px !important; border-radius: 999px !important;
    border: none !important; background: transparent !important;
    color: #64748B !important; margin: 0 !important; cursor: pointer;
}
#atman-lang label.selected,
#atman-lang label:has(input:checked) {
    background: #4F46E5 !important; color: #FFFFFF !important;
}
.dark #atman-lang label:has(input:checked) { background: #6366F1 !important; }
#atman-lang input[type="radio"] { display: none !important; }
#atman-lang > .label,
#atman-lang > div > .block-label,
#atman-lang > div > .block-info { display: none !important; }
#atman-lang .form, #atman-lang .wrap, #atman-lang .options {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ── Warmup row (#atman-warmup-row) ──────────────────────────────────── */
#atman-warmup-row {
    margin: 8px 0 24px !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
}
#atman-warmup-btn {
    background: transparent !important;
    color: #4F46E5 !important;
    border: 1px solid #4F46E5 !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-weight: 500 !important;
    height: auto !important;
    min-height: 0 !important;
}
.dark #atman-warmup-btn {
    color: #A5B4FC !important;
    border-color: #6366F1 !important;
}
#atman-warmup-btn:hover { background: rgba(79,70,229,0.08) !important; }
.dark #atman-warmup-btn:hover { background: rgba(99,102,241,0.12) !important; }

/* Status Textbox — strip textarea chrome, render as inline info pill */
#atman-warmup-log textarea {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font: 500 13px/1.4 'Inter', sans-serif !important;
    color: #0F172A !important;
    resize: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.dark #atman-warmup-log textarea { color: #E2E8F0 !important; }
#atman-warmup-log {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
}
#atman-warmup-log > .block-label {
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 11px !important;
    color: #64748B !important;
    background: transparent !important;
    padding: 0 12px 0 0 !important;
    margin: 0 !important;
    border-right: 1px solid #E5E7EB !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 100%;
}
.dark #atman-warmup-log > .block-label {
    color: #94A3B8 !important;
    border-right-color: #1F2937 !important;
}

/* ── Tabs (.tabs > .tab-nav) ─────────────────────────────────────────── */
.tabs > .tab-nav {
    border-bottom: 1px solid #E5E7EB !important;
    gap: 4px !important;
    padding: 0 4px !important;
}
.dark .tabs > .tab-nav { border-bottom-color: #1F2937 !important; }
.tabs > .tab-nav button {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748B !important;
    transition: color .15s, border-color .15s;
}
.tabs > .tab-nav button:hover { color: #0F172A !important; }
.dark .tabs > .tab-nav button:hover { color: #E2E8F0 !important; }
.tabs > .tab-nav button.selected,
.tabs > .tab-nav button[aria-selected="true"] {
    color: #4F46E5 !important;
    border-bottom-color: #4F46E5 !important;
    font-weight: 600 !important;
}
.dark .tabs > .tab-nav button.selected,
.dark .tabs > .tab-nav button[aria-selected="true"] {
    color: #818CF8 !important;
    border-bottom-color: #6366F1 !important;
}
.tabs > .tabitem,
.tabs .tabitem-content { padding: 32px 0 !important; }

/* ── About-this-tab accordions (.atman-about-accordion) ──────────────── */
.atman-about-accordion,
.gr-accordion.atman-about-accordion {
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Target the exact Gradio accordion content panel (display:none → block on open) */
.atman-about-accordion [data-testid="accordion-content"] {
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Constrain the Gradio column wrapper inside the content panel */
.atman-about-accordion [data-testid="accordion-content"] > .column,
.atman-about-accordion .column {
    max-width: 100% !important;
    overflow: hidden !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* Constrain inner block wrappers */
.atman-about-accordion .block,
.atman-about-accordion .wrap,
.atman-about-accordion .html-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* Prevent long prose lines from pushing layout */
.atman-about-accordion .prose,
.atman-about-accordion .markdown,
.atman-about-accordion p,
.atman-about-accordion li,
.atman-about-accordion pre {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}
.dark .atman-about-accordion,
html.dark .atman-about-accordion {
    border-color: #1F2937 !important;
    background: #13131F !important;
}
html.dark .atman-about-accordion .markdown,
html.dark .atman-about-accordion p,
html.dark .atman-about-accordion li { color: #94A3B8 !important; }
html.dark .atman-about-accordion b,
html.dark .atman-about-accordion strong { color: #E2E8F0 !important; }
html.dark .atman-about-accordion summary,
html.dark .atman-about-accordion > .label-wrap { color: #E2E8F0 !important; }
html.dark .atman-about-accordion blockquote { background: rgba(99,102,241,0.10) !important; }
.atman-about-accordion summary,
.atman-about-accordion > .label-wrap,
.atman-about-accordion > button {
    padding: 7px 12px !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    min-height: 34px !important;
    color: var(--body-text-color, #0F172A) !important;
    cursor: pointer;
}
.atman-about-accordion summary svg,
.atman-about-accordion .label-wrap svg {
    color: #4F46E5 !important;
    width: 14px !important;
    height: 14px !important;
    transition: transform .18s ease;
}
.atman-about-accordion[open] summary svg,
.atman-about-accordion.open .label-wrap svg { transform: rotate(90deg); }
.atman-about-accordion > div:not(.label-wrap),
.atman-about-accordion .accordion-content {
    padding: 4px 12px 12px 28px !important;
}
.atman-about-accordion .markdown,
.atman-about-accordion p,
.atman-about-accordion li {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--body-text-color-subdued, #475569) !important;
}

.atman-about-accordion b,
.atman-about-accordion strong,
.atman-about-accordion [class*="bold"] {
    color: var(--body-text-color, #F8FAFC) !important;
    font-weight: 700 !important;
}

.atman-about-accordion blockquote {
    margin: 14px 0 0 !important;
    padding: 12px 16px !important;
    border-left: 2px solid #4F46E5 !important;
    background: rgba(79,70,229,0.06) !important;
    border-radius: 0 6px 6px 0 !important;
    font-size: 13px !important;
    color: #1E293B !important;
}
:is(.dark, html.dark, body.dark) .atman-about-accordion blockquote {
    background: rgba(99,102,241,0.12) !important;
    color: #E2E8F0 !important;
}

/* Kill nested .block chrome inside accordions — single container, no doubled rims */
.atman-about-accordion .block,
.atman-about-accordion .gr-block,
.atman-about-accordion .markdown,
.atman-about-accordion .html,
.atman-about-accordion .prose {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ── Dropdowns (preset selectors) ────────────────────────────────────── */
.gr-dropdown, .gradio-dropdown, .dropdown {
    padding: 12px 14px !important;
    border-radius: 8px !important;
    border: 1px solid #E5E7EB !important;
    background: #FFFFFF !important;
    transition: border-color .15s, box-shadow .15s;
}
.dark .gr-dropdown,
.dark .gradio-dropdown,
.dark .dropdown {
    border-color: #1F2937 !important;
    background: #13131F !important;
}
.gr-dropdown:focus-within,
.gradio-dropdown:focus-within,
.dropdown:focus-within {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.28) !important;
    outline: none !important;
}
.dark .gr-dropdown:focus-within,
.dark .dropdown:focus-within {
    border-color: #6366F1 !important;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.36) !important;
}
.gr-dropdown ul li,
.gradio-dropdown ul li,
.dropdown ul li {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
    font-size: 13px !important;
}

/* ── Result blocks (every Textbox/Markdown/JSON/etc) ─────────────────── */
.block, .gr-block {
    border-radius: 12px !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
    padding: 20px 22px !important;
}
.dark .block, .dark .gr-block {
    border-color: #1F2937 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* Block labels float ABOVE the block card — only for top-level blocks, not inside report group */
.gradio-container .block:has([data-testid="block-label"]):not(.atman-report-group *):not(.atman-about-accordion):not(.atman-about-accordion *) {
    position: relative !important;
    overflow: visible !important;
    margin-top: 26px !important;
}
/* Kill block-labels inside the report group — no floating artifacts */
.atman-report-group [data-testid="block-label"],
.atman-report-group .block-label {
    display: none !important;
}
/* Label: position above the border, text-only */
.gradio-container [data-testid="block-label"],
.gradio-container .block > .block-label,
.gradio-container .block > label.block-label {
    position: absolute !important;
    top: -20px !important;
    left: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--body-text-color-subdued, #64748B) !important;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}
/* Kill SVG/icon artifact — text label only */
.gradio-container [data-testid="block-label"] > span,
.gradio-container [data-testid="block-label"] svg {
    display: none !important;
}

/* HighlightedText — Gradio 6 actual svelte class names */
/* Reorder: text first, legend second (DOM has legend before textfield) */
.atman-highlight .container.svelte-1akrbo3 {
    display: flex !important;
    flex-direction: column !important;
}
/* Text block floats to top */
.atman-highlight .textfield.svelte-1akrbo3 {
    order: 1 !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
}
/* Token pill */
.atman-highlight .token.svelte-1akrbo3 {
    border-radius: 4px !important;
    padding: 1px 6px !important;
    font-size: 13.5px !important;
    box-shadow: none !important;
}
/* Legend moves to bottom with separator */
.atman-highlight .legend.svelte-1akrbo3 {
    order: 2 !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--block-border-color, #2D2F3E) !important;
}
/* Legend chips — keep inline background-color (set by Gradio), just tighten appearance */
.atman-highlight .legend-item.svelte-1akrbo3 {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--body-text-color) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    cursor: default !important;
}

/* ── gr.JSON output (replaces gr.Label for classification) ───────────── */
.json-holder,
.gr-json,
[data-testid="json"] {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 16px 18px !important;
    color: #0F172A !important;
}
.dark .json-holder,
.dark .gr-json,
.dark [data-testid="json"] {
    background: #0F0F1B !important;
    border-color: #1F2937 !important;
    color: #E2E8F0 !important;
}
/* react-json-tree node colours */
.json-holder .object-key,
.json-holder [class*="object-key"] { color: #64748B !important; }
.dark .json-holder .object-key { color: #94A3B8 !important; }
.json-holder .string,
.json-holder [class*="string-value"] { color: #059669 !important; }
.dark .json-holder .string { color: #10B981 !important; }
.json-holder .number { color: #F59E0B !important; }
.json-holder .punctuation,
.json-holder span[role="presentation"] { color: #94A3B8 !important; }

/* ── Dataframe (Relations tab) ───────────────────────────────────────── */
.gr-dataframe table {
    border-collapse: separate !important;
    border-spacing: 0;
}
.gr-dataframe th {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    font-weight: 500;
    color: #64748B !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid #E5E7EB !important;
}
.dark .gr-dataframe th {
    background: #0F0F1B !important;
    color: #94A3B8 !important;
    border-bottom-color: #1F2937 !important;
}
.gr-dataframe td {
    font-size: 13px;
    padding: 10px 14px !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.gr-button,
button.lg,
button.primary,
button.secondary {
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 7px 18px !important;
    min-height: 36px !important;
    letter-spacing: -0.005em !important;
    transition: background .18s, box-shadow .18s, transform .05s !important;
}
.gr-button:active, button.lg:active { transform: translateY(1px); }

.gr-button-primary,
button.primary,
[data-variant="primary"] {
    background: #4F46E5 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
}
.dark .gr-button-primary,
.dark button.primary,
.dark [data-variant="primary"] { background: #6366F1 !important; }
.gr-button-primary:hover,
button.primary:hover {
    background: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 100%) !important;
    box-shadow: 0 2px 8px rgba(79,70,229,0.18) !important;
}
.dark .gr-button-primary:hover,
.dark button.primary:hover {
    background: linear-gradient(135deg, #6366F1 0%, #A78BFA 100%) !important;
    box-shadow: 0 2px 12px rgba(99,102,241,0.24) !important;
}
.gr-button-secondary,
button.secondary {
    background: transparent !important;
    border: 1px solid #4F46E5 !important;
    color: #4F46E5 !important;
}
.dark .gr-button-secondary,
.dark button.secondary {
    border-color: #6366F1 !important;
    color: #A5B4FC !important;
}
.gr-button-secondary:hover,
button.secondary:hover { background: rgba(79,70,229,0.08) !important; }
.dark .gr-button-secondary:hover { background: rgba(99,102,241,0.12) !important; }

/* ── Detailed Analysis Report group (.atman-report-group) ────────────── */
.atman-report-group,
.atman-report-group.generating,
.atman-report-group[data-loading],
.atman-report-group:has(.generating) {
    padding: 22px !important;
    border: 1px solid var(--block-border-color, #1F2937) !important;
    border-radius: 12px !important;
    background: var(--block-background-fill, #13131F) !important;
    box-shadow: var(--shadow-card, none) !important;
}
/* Kill loading shimmer overlay on the group */
.atman-report-group::before,
.atman-report-group::after {
    display: none !important;
}
/* The parent .block wrapper around our Group — make it transparent so we
   don't get a doubled card frame (Gradio adds its own block chrome). */
.gradio-container > * .block:has(> .atman-report-group),
.gradio-container .block:has(.atman-report-group) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* The Group's inner .styler div gets --form-background-fill from Gradio — make transparent */
.atman-report-group > .styler,
.atman-report-group .styler.svelte-1p9262q {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* Kill nested .block chrome inside the report group — single card, no doubled rims. */
.atman-report-group .block,
.atman-report-group .gr-block,
.atman-report-group .styler > .block,
.atman-report-group .markdown,
.atman-report-group .prose {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    min-height: 0 !important;
}
.atman-report-group .block.padded,
.atman-report-group .styler > .block.padded {
    padding: 0 !important;
    margin: 0 !important;
}
/* Kill scrollbars on every Markdown subsection inside the report group */
.atman-report-group .atman-sec-hdr,
.atman-report-group .atman-sec-body,
.atman-report-group .atman-sec-hdr *,
.atman-report-group .atman-sec-body * {
    overflow: visible !important;
    max-height: none !important;
}
/* Same fix globally for any block-level markdown */
.gradio-container .markdown,
.gradio-container .prose,
.gradio-container .md {
    overflow: visible !important;
    max-height: none !important;
}

.atman-report-group h3,
.atman-report-group > .markdown:first-child h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 14px !important;
    color: var(--body-text-color) !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--block-border-color) !important;
}

/* Section-header markdown elements (a_boundary_hdr, a_divergence_hdr, a_meta_hdr) */
.atman-report-group .atman-sec-hdr,
.atman-report-group .atman-sec-hdr p {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--body-text-color-subdued, #64748B) !important;
    margin: 10px 0 2px !important;
    line-height: 1.3 !important;
}

.atman-report-group .atman-sec-body,
.atman-report-group .atman-sec-body p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--body-text-color, #E2E8F0) !important;
    margin: 0 !important;
}

.atman-meta-block,
.atman-report-group .atman-sec-body.atman-meta-block,
.atman-report-group .atman-sec-body.atman-meta-block p {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    color: var(--body-text-color-subdued, #94A3B8) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
}

/* ── gr.Code (JSON output) — flat <pre> on block background ──────────── */
/* Outer wrapper takes the theme background — CodeMirror internals are
   transparent so they can't override with their own injected styles. */
.atman-json-code {
    background: var(--block-background-fill, #1e1e2e) !important;
    border: 1px solid var(--block-border-color, #E5E7EB) !important;
    border-radius: 8px !important;
}
.atman-json-code > .block {
    background: transparent !important;
    border: none !important;
}
.atman-json-code .codemirror-wrapper,
.atman-json-code .code-wrap,
.atman-json-code .cm-editor,
.atman-json-code .cm-scroller,
.atman-json-code .cm-content,
.atman-json-code .cm-gutters,
.atman-json-code pre {
    background: transparent !important;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--body-text-color, #E2E8F0) !important;
}

/* Hide all chrome inside gr.Code: line numbers, copy/fullscreen buttons,
   language tag, internal block label (we use the wrapper block-label only) */
.atman-json-code .cm-gutters,
.atman-json-code .cm-lineNumbers,
.atman-json-code .cm-foldGutter,
.atman-json-code button,
.atman-json-code .copy-button,
.atman-json-code [aria-label*="opy"],
.atman-json-code [aria-label*="ull"],
.atman-json-code [aria-label*="creen"],
.atman-json-code .language-select,
.atman-json-code [data-testid="code-language"] {
    display: none !important;
}

/* String values green, keys muted grey */
.atman-json-code .cm-string,
.atman-json-code .token.string,
.atman-json-code .hljs-string { color: #059669 !important; }
:is(.dark, html.dark, body.dark) .atman-json-code .cm-string,
:is(.dark, html.dark, body.dark) .atman-json-code .token.string,
:is(.dark, html.dark, body.dark) .atman-json-code .hljs-string { color: #10B981 !important; }
.atman-json-code .cm-property,
.atman-json-code .token.property,
.atman-json-code .hljs-attr { color: #64748B !important; }
:is(.dark, html.dark, body.dark) .atman-json-code .cm-property,
:is(.dark, html.dark, body.dark) .atman-json-code .token.property,
:is(.dark, html.dark, body.dark) .atman-json-code .hljs-attr { color: #94A3B8 !important; }

/* ── Generic meta-text markdown (k_meta, r_meta, af_meta) ────────────── */
.atman-meta p, .atman-meta {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #94A3B8 !important;
    letter-spacing: 0.02em !important;
}
.dark .atman-meta p, .dark .atman-meta { color: #64748B !important; }

/* ── Tab intro markdown (optional, for any tab-top description) ──────── */
.tab-intro p, .tab-intro {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #64748B !important;
    max-width: 720px;
}
.dark .tab-intro p, .dark .tab-intro { color: #94A3B8 !important; }
.tab-intro b { color: #0F172A !important; font-weight: 600 !important; }
.dark .tab-intro b { color: #E2E8F0 !important; }

/* ── Whitespace rhythm — tight, just enough to keep block borders distinct ── */
.gradio-container .gr-form > * + * { margin-top: 6px !important; }
.gradio-container > .block + .block,
.gradio-container > .gr-form + .gr-form { margin-top: 8px !important; }
.gradio-container .row,
.gradio-container .gr-row { gap: 16px !important; }
.gradio-container .column,
.gradio-container .gr-column { gap: 6px !important; }
.tabs > .tabitem,
.tabs .tabitem-content { padding: 12px 0 !important; }
.atman-about-accordion { margin-bottom: 10px !important; }
#atman-hero + * { margin-top: 4px !important; }

/* ── Kill empty-state placeholders (aa / </> icons) ─────────────────────
   Gradio 6 scopes .empty with a svelte hash (.empty.svelte-v95lt3 { display: flex })
   which beats a plain attribute selector. Must include the scoped class OR
   use !important on a more specific rule. Belt-and-suspenders: all known forms. */
div[aria-label="Empty value"],
div[aria-label="Empty value"].svelte-v95lt3,
.empty.svelte-v95lt3,
.gradio-container .empty,
.gradio-container [class*="empty-state"],
.gradio-container .empty-holder {
    display: none !important;
}

/* ── Footer (gr.HTML #atman-footer) ──────────────────────────────────── */
#atman-footer {
    text-align: center;
    padding: 32px 0 24px;
    border-top: 1px solid #E5E7EB;
    margin-top: 48px;
    font-size: 13px;
    color: #94A3B8;
}
.dark #atman-footer {
    border-top-color: #1F2937;
    color: #64748B;
}
#atman-footer a {
    color: #4F46E5;
    text-decoration: none;
    font-weight: 500;
}
.dark #atman-footer a { color: #818CF8; }
#atman-footer a:hover { text-decoration: underline; }
#atman-footer em {
    font-style: italic;
    color: #94A3B8;
    display: block;
    max-width: 560px;
    margin: 0 auto 8px;
}
.dark #atman-footer em { color: #64748B; }
#atman-footer .atman-privacy {
    display: block;
    max-width: 640px;
    margin: 14px auto 16px;
    font-size: 11px;
    line-height: 1.5;
    color: #B0B8C4;
    opacity: 0.85;
}
.dark #atman-footer .atman-privacy { color: #475569; }


/* ─────────────────────────────────────────────────────────────────────────
 * Pair diagram (.apd-*)  —  used inside About accordions per tab.
 * Mirrors the full architecture diagram, one row per tab.
 * ───────────────────────────────────────────────────────────────────────── */

.apd-pair {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    gap: 0;
    align-items: stretch;
    margin: 4px 0 18px;
    max-width: 720px;
}

.apd-card {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 12px 14px 12px 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    display: flex;
    align-items: center;
}
.dark .apd-card {
    background: linear-gradient(180deg, #131826 0%, #0F1421 100%);
    border-color: #2B3447;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.03) inset;
}

.apd-stripe {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 10px 0 0 10px;
}
.apd-left  .apd-stripe { background: #4F46E5; box-shadow: 0 0 12px rgba(79,70,229,0.35); }
.apd-right .apd-stripe { background: #8B5CF6; box-shadow: 0 0 12px rgba(139,92,246,0.35); }
.dark .apd-left  .apd-stripe { background: #6366F1; box-shadow: 0 0 12px rgba(99,102,241,0.45); }
.dark .apd-right .apd-stripe { background: #A78BFA; box-shadow: 0 0 12px rgba(167,139,250,0.45); }

.apd-card-body { width: 100%; }

.apd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.apd-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.dark .apd-name { color: #F3F4F6; }

.apd-sub {
    margin-top: 4px;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 11px;
    color: #64748B;
    letter-spacing: 0.01em;
}
.dark .apd-sub { color: #9CA3AF; }

.apd-tag {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 10px;
    color: #64748B;
    padding: 2px 6px;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    background: #FFFFFF;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.dark .apd-tag {
    color: #6B7280;
    border-color: #2B3447;
    background: rgba(255,255,255,0.02);
}

.apd-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 4px;
}
.apd-arrow-line {
    flex: 1 1 auto;
    height: 2px;
    background: linear-gradient(90deg, #6366F1 0%, #A855F7 100%);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(139,92,246,0.25);
    margin-right: -1px;
}
.dark .apd-arrow-line {
    background: linear-gradient(90deg, #818CF8 0%, #C084FC 100%);
    box-shadow: 0 0 10px rgba(167,139,250,0.40);
}
.apd-arrow-head {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #A855F7;
    flex-shrink: 0;
}
.dark .apd-arrow-head { border-left-color: #C084FC; }

/* Responsive: stack on narrow viewports */
@media (max-width: 640px) {
    .apd-pair {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .apd-arrow {
        transform: rotate(90deg);
        width: 56px;
        height: 16px;
        margin: 0 auto;
    }
}