/* scicalc.css — loaded via zMeta.zBrush: [scicalc] -> /styles/scicalc.css
   Teaching goal: style zOS's OWN generated classes (zDialog-*, zForm-control,
   zBtn-*) instead of fighting them, then layer app-specific classes
   (zSciCalc-*, set via _zClass in the .zolo) for anything bespoke.

   Design language: one calculator CHASSIS — dark indigo page, a single
   rounded panel holding display + keys (no visible "form"), purple accents.
   The zDialog underneath is untouched; the form chrome (title, field label)
   is simply hidden so the display and keys read as one instrument. */

:root {
    --sci-page: #14122b;
    --sci-chassis: #1e1b3a;
    --sci-panel-line: rgba(196, 181, 253, 0.18);
    --sci-display: #0d0b1e;
    --sci-ink: #f4f5f8;
    --sci-key-bg: #f8f8fc;
    --sci-key-ink: #1c2033;
    --sci-accent: #7c5cd9;
    --sci-accent-soft: rgba(124, 92, 217, 0.25);
    --sci-fn-bg: #2a2650;
    --sci-fn-ink: #c4b5fd;
    --sci-radius: 18px;
}

/* Page canvas: the deep indigo the cover art lives on. */
body {
    background: var(--sci-page);
}

#zVaF-content {
    max-width: 380px;
    margin: 40px auto;
    padding: 0 16px;
}

#zVaF-content > h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #c4b5fd;
    letter-spacing: 0.01em;
}

/* Chassis: the zDialog card becomes the calculator body — the keypad slot
   (a sibling) is pulled up flush against it so card + keys read as ONE
   instrument, not a form with buttons under it. */
.zDialog-container {
    background: var(--sci-chassis);
    border-radius: var(--sci-radius) var(--sci-radius) 0 0;
    box-shadow: none;
    border: 1px solid var(--sci-panel-line);
    border-bottom: none;
}

.zSciCalc-keypad {
    background: var(--sci-chassis);
    border: 1px solid var(--sci-panel-line);
    border-top: none;
    border-radius: 0 0 var(--sci-radius) var(--sci-radius);
    padding: 0 20px 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Form chrome off: a calculator has no card title or field caption. The
   zDialog still OWNS the input + submit wiring — we only mute its dressing. */
.zDialog-title,
.zDialog-container label {
    display: none;
}

/* The expression field IS the calculator display: near-black, monospace,
   right-aligned, LCD-large. `_zClass` on a zDialog field forwards straight
   to the rendered <input> (FormRenderer._createInput), so we hook the
   author-chosen class directly. */
.zDialog-container .zSciCalc-expr {
    font-family: "SF Mono", "Fira Code", ui-monospace, Menlo, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    text-align: right;
    color: var(--sci-ink) !important;
    background: var(--sci-display) !important;
    border: 1px solid rgba(196, 181, 253, 0.25) !important;
    padding: 20px 16px !important;
    border-radius: 12px !important;
}

.zDialog-container .zSciCalc-expr::placeholder {
    color: rgba(244, 245, 248, 0.35);
}

/* Evaluate (relabeled from "Submit" by scicalc.js): the wide purple bar the
   cover promises. The keypad's "=" clicks this same button — one submit path. */
.zDialog-actions .zBtn,
.zDialog-container button[type="submit"] {
    width: 100%;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--sci-accent);
    border: none;
    color: #ffffff;
}

.zDialog-container button[type="submit"]:hover {
    background: #8d6ee8;
}

/* Toggle: chassis chrome, not a "key" — full-width quiet row. */
.zSciCalc-toggle {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 9px 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sci-fn-ink);
    background: transparent;
    border: 1px dashed var(--sci-panel-line);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.zSciCalc-toggle:hover {
    background: var(--sci-accent-soft);
}

/* Keypad: CSS grid is the right tool for a fixed-column button matrix —
   sizing rides the container, not each button. */
.zSciCalc-keypad-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px;
}

/* An author rule setting `display` always beats the UA's `[hidden] { display:
   none }` default (origin precedence, not specificity) — so toggling the
   `hidden` attribute needs its OWN rule here, or it silently does nothing. */
.zSciCalc-keypad-grid[hidden] {
    display: none;
}

.zSciCalc-key {
    padding: 15px 0;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: "SF Mono", "Fira Code", ui-monospace, Menlo, monospace;
    color: var(--sci-key-ink);
    border: none;
    border-radius: 12px;
    background: var(--sci-key-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.15s ease, filter 0.15s ease;
}

.zSciCalc-key:hover {
    filter: brightness(1.06);
}

.zSciCalc-key:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Semantic color coding — operators vs functions vs digits — teaches how
   :is()/attribute-free grouping can style a dynamically-built button set
   without adding a class per key from JS. Scoped to .zSciCalc-keypad-basic
   so the scientific panel's OWN tint (below) always wins there, regardless
   of which keys happen to share a data-key value (e.g. sqrt( in both). */
.zSciCalc-keypad-basic .zSciCalc-key:is([data-key="/"], [data-key="*"], [data-key="-"], [data-key="+"], [data-key="="]) {
    background: var(--sci-accent);
    color: #ffffff;
}

.zSciCalc-keypad-basic .zSciCalc-key:is([data-key="("], [data-key=")"], [data-key="C"], [data-key="sqrt("]) {
    background: var(--sci-fn-bg);
    color: var(--sci-fn-ink);
}

/* The scientific panel is a distinct modifier class (not data-key) since its
   buttons share labels with nothing else — one rule tints the whole panel. */
.zSciCalc-key--sci {
    background: var(--sci-fn-bg);
    color: var(--sci-fn-ink);
    font-size: 0.9rem;
}

/* History echo: the plugin's "expr = result" return renders here (the
   dialog's own feedback slot); the display above shows just the result
   (mirrored by scicalc.js), so this line reads as the tape. */
.zDialog-feedback {
    margin-top: 10px;
    font-family: "SF Mono", "Fira Code", ui-monospace, Menlo, monospace;
    color: var(--sci-fn-ink);
}

@media (max-width: 420px) {
    #zVaF-content {
        margin: 20px auto;
    }
    .zSciCalc-key {
        padding: 13px 0;
        font-size: 0.95rem;
    }
}