style.css

/* ============================================================
   Vibe Calculator — Stylesheet
   Palette:
     page bg     #e5dfd3
     content bg  #f6f1e8
     panels      #fcfaf6
     primary     #1f1f1f
     secondary   #5f584f
     labels      #7a736a
     borders     #d8d1c7
     accent      #c96f4d
   ============================================================ */

/* ----- Force light everywhere ----- */
:root,
:root[data-theme="dark"],
.dark,
[data-theme="dark"],
[class*="dark"] {
    --body-background-fill: #e5dfd3 !important;
    --background-fill-primary: #e5dfd3 !important;
    --background-fill-secondary: #fcfaf6 !important;
    --neutral-950: #1f1f1f !important;
    --neutral-900: #1f1f1f !important;
    --neutral-800: #5f584f !important;
    --neutral-700: #5f584f !important;
    --block-label-text-color: #7a736a !important;
    --body-text-color: #1f1f1f !important;
    --input-background-fill: #fcfaf6 !important;
    color-scheme: light !important;
}

/* ----- Page background (outer area only) ----- */
html, body {
    background: #e5dfd3 !important;
    background-color: #e5dfd3 !important;
}

/* Gradio app wrapper — also outer */
gradio-app {
    background: #e5dfd3 !important;
    background-color: #e5dfd3 !important;
}

/* ----- Centered content column — the reading surface ----- */
.gradio-container {
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2.5rem 3rem !important;
    font-family: Georgia, Charter, serif !important;
    background: #f6f1e8 !important;
    background-color: #f6f1e8 !important;
    border-left: 1px solid #d8d1c7 !important;
    border-right: 1px solid #d8d1c7 !important;
    min-height: 100vh !important;
}

/* ----- Everything INSIDE the container: transparent, no borders, no shadows ----- */
.gradio-container *,
.gradio-container .main,
.gradio-container .app,
.gradio-container .wrap,
.gradio-container .contain,
.gradio-container [class*="svelte"],
.gr-panel, .gr-box, .gr-form, .gr-block, .gr-padded,
.gr-group, .block, .form, .panel,
[class*="block"], [class*="panel"], [class*="wrapper"],
[class*="group"], [class*="form"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.row, [class*="row"], .gap, [class*="gap"] {
    background: transparent !important;
    box-shadow: none !important;
}

/* ----- Restore borders on text/number inputs ----- */
.gradio-container input,
.gradio-container input[type="text"],
.gradio-container input[type="number"],
.gradio-container textarea {
    border: 1px solid #d8d1c7 !important;
    background: #fcfaf6 !important;
    background-color: #fcfaf6 !important;
}

/* ----- Dropdowns: single border on the clickable element only ----- */
#model-dropdown input,
#operator-dropdown input {
    border: 1px solid #d8d1c7 !important;
    background: #fcfaf6 !important;
    background-color: #fcfaf6 !important;
    border-radius: 3px !important;
}

/* Dropdown open menu */
.gradio-container ul[role="listbox"] {
    background: #fcfaf6 !important;
    background-color: #fcfaf6 !important;
    border: 1px solid #d8d1c7 !important;
}

.gradio-container ul[role="listbox"] li {
    background: #fcfaf6 !important;
    color: #1f1f1f !important;
}

.gradio-container ul[role="listbox"] li:hover,
.gradio-container ul[role="listbox"] li[aria-selected="true"] {
    background: #ede6d9 !important;
}

footer { display: none !important; }

/* ----- Title ----- */
#title-text {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #1f1f1f !important;
    font-family: Georgia, Charter, serif !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

/* ----- Subtitle ----- */
#subtitle-text {
    font-style: italic !important;
    color: #5f584f !important;
    font-size: 1rem !important;
    text-align: center !important;
    line-height: 1.65 !important;
    margin-top: 0.3rem !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ----- Divider ----- */
#divider {
    border: none !important;
    border-top: 1px solid #d8d1c7 !important;
    margin: 1.5rem 0 !important;
    background: transparent !important;
}

/* ----- ALL labels — target every Gradio label selector ----- */
label,
label span,
.label-wrap,
.label-wrap span,
.gr-input-label,
[data-testid="label"],
[data-testid="block-info"],
[data-testid="block-title"],
span[data-testid="block-info"],
.svelte-jdcl7l,
.block-info {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #5f584f !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* ----- Input fields ----- */
input,
input[type="text"],
input[type="number"],
textarea,
.gr-input {
    background: #fcfaf6 !important;
    border: 1px solid #d8d1c7 !important;
    border-radius: 3px !important;
    font-family: "JetBrains Mono", Menlo, Consolas, monospace !important;
    font-size: 1.05rem !important;
    color: #1f1f1f !important;
    padding: 0.5rem 0.75rem !important;
    box-shadow: none !important;
}

/* ----- Dropdowns (handled in restore block above) ----- */

/* ----- Expression display ----- */
#expression-display,
#expression-display textarea,
#expression-display input,
#expression-display [class*="wrap"] {
    text-align: center !important;
    font-family: "JetBrains Mono", Menlo, Consolas, monospace !important;
    font-size: 1.1rem !important;
    color: #5f584f !important;
    background: transparent !important;
    border: none !important;
    padding: 0.5rem !important;
    min-height: auto !important;
    box-shadow: none !important;
}

/* ----- Result panels ----- */
.result-panel {
    border: 1.5px solid #d8d1c7 !important;
    border-radius: 4px !important;
    background: #fcfaf6 !important;
    padding: 2rem 1.75rem !important;
    text-align: center !important;
    min-height: 170px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.result-panel .panel-label {
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #7a736a !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

.result-panel .result-number {
    font-family: "JetBrains Mono", Menlo, Consolas, monospace !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1f1f1f !important;
    word-break: break-all !important;
    line-height: 1.3 !important;
}

.result-panel .result-meta {
    font-size: 0.75rem !important;
    color: #7a736a !important;
    margin-top: 1rem !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0.01em !important;
}

/* Standalone sub-box rendered below each result panel.
   LLM side carries the model's reported confidence; calculator side
   carries "Deterministic". The visual symmetry is intentional —
   the asymmetry is in the content, not the layout. */
.result-sub-box {
    border: 1.5px solid #d8d1c7 !important;
    border-radius: 4px !important;
    background: #fcfaf6 !important;
    padding: 0.8rem 1rem !important;
    margin-top: 0.6rem !important;
    text-align: center !important;
    font-family: "JetBrains Mono", Menlo, Consolas, monospace !important;
    font-size: 0.88rem !important;
    color: #5f584f !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ----- Status message — the verdict line ("Off by N", "Correct, this time") -----
   This is the punchline of the comparison, so it carries real weight: roughly
   two-thirds the size of the result numbers. Italic preserved for the dry register. */
#status-message,
#status-message textarea,
#status-message input,
#status-message [class*="wrap"] {
    text-align: center !important;
    font-style: italic !important;
    color: #3a3632 !important;
    font-size: 1.3rem !important;
    background: transparent !important;
    border: none !important;
    min-height: auto !important;
    box-shadow: none !important;
    margin: 1.3rem 0 0.5rem 0 !important;
    padding: 0.5rem 0 !important;
    letter-spacing: 0.02em !important;
}

/* ----- Method note ----- */
#method-note {
    text-align: center !important;
    font-size: 0.78rem !important;
    color: #7a736a !important;
    margin-top: 1.5rem !important;
    line-height: 1.6 !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ----- Compare button ----- */
.gradio-container button.primary,
.gradio-container button[variant="primary"],
.gradio-container .gr-button.primary,
.gradio-container .gr-button-primary,
.gradio-container button.primary[type="button"] {
    background: #c96f4d !important;
    background-color: #c96f4d !important;
    color: #ffffff !important;
    border: 1px solid #c96f4d !important;
    border-radius: 3px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    padding: 0.6rem 1.8rem !important;
    box-shadow: none !important;
}

.gradio-container button.primary:hover,
.gradio-container button[variant="primary"]:hover,
.gradio-container .gr-button.primary:hover,
.gradio-container .gr-button-primary:hover {
    background: #a8553a !important;
    background-color: #a8553a !important;
    color: #ffffff !important;
}

/* ----- Secondary button ----- */
.gradio-container button.secondary,
.gradio-container button[variant="secondary"],
.gradio-container .gr-button.secondary,
.gradio-container .gr-button-secondary {
    background: transparent !important;
    background-color: transparent !important;
    color: #5f584f !important;
    border: 1px solid #d8d1c7 !important;
    border-radius: 3px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.03em !important;
    padding: 0.55rem 1.4rem !important;
    box-shadow: none !important;
}

.gradio-container button.secondary:hover,
.gradio-container button[variant="secondary"]:hover,
.gradio-container .gr-button.secondary:hover,
.gradio-container .gr-button-secondary:hover {
    background: #ede6d9 !important;
    background-color: #ede6d9 !important;
}

/* ----- Results HTML containers ----- */
#llm-result, #calc-result {
    min-height: 0 !important;
    background: transparent !important;
}

#llm-result .prose, #calc-result .prose {
    font-size: inherit !important;
}

/* ----- Remove default Gradio block padding ----- */
.gr-block, .gr-padded {
    padding: 0 !important;
}

/* ----- Mobile ----- */
@media (max-width: 640px) {
    .gradio-container {
        padding: 1.5rem 1rem !important;
        border-left: none !important;
        border-right: none !important;
    }
    #title-text { font-size: 1.6rem !important; }
    .result-panel .result-number { font-size: 1.5rem !important; }
    .result-panel { padding: 1.5rem 1.25rem !important; }
    .result-sub-box {
        font-size: 0.78rem !important;
        padding: 0.7rem 0.5rem !important;
    }
    #status-message,
    #status-message textarea,
    #status-message input,
    #status-message [class*="wrap"] {
        font-size: 1.15rem !important;
    }
}