/* theme.css — MONARCH light mode. Load AFTER the page's other stylesheets (theme.js sets <html data-theme>).
 *
 * Why an inverted-lightness theme rather than a second colour palette: the terminal's look lives in ~2,400 colour
 * values across style.css, script.js and the engines' own files (many written straight into the page by JavaScript),
 * so a light palette made of variables alone would leave white-on-white and black-on-black islands. Inverting
 * lightness and rotating the hue back by 180° flips every one of them consistently:
 *   near-black backgrounds -> near-white       white text -> near-black
 *   gold / green / red keep their hue, but become the deeper shades that read on white
 * Photos, logos, video and the Vetiva trade button are flipped back so they keep their true colours (add
 * data-theme-keep to any other element that must not change). Pages with a hand-made light palette (<html data-theme-native>: ARENA, NGX Engine, Quant
 * Engine) use that palette instead and are not inverted.
 */

/* ── the light theme ────────────────────────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"]:not([data-theme-native]) {
    /* invert lightness, rotate hue back, then restore the colour that inversion washes out (saturate) and a touch of
       contrast so mid-greys stay legible on white */
    filter: invert(1) hue-rotate(180deg) saturate(1.6) contrast(1.06);
    /* the canvas behind the page (overscroll, short pages) is not filtered: give it the light colour directly */
    background-color: #fafafa;
}
/* keep true colours: undo the page filter on these (applied in reverse order, so they come out unchanged) */
html[data-theme="light"]:not([data-theme-native]) :is(img, picture, video, iframe, object, embed, [data-theme-keep],
                                                    .trade-button-compact) {
    filter: contrast(0.9434) saturate(0.625) hue-rotate(-180deg) invert(1);   /* the exact reverse of the page filter */
}
/* an image inside a kept element is already right: don't flip it twice */
html[data-theme="light"]:not([data-theme-native]) [data-theme-keep] :is(img, picture, video, iframe) {
    filter: none;
}
/* glows and drop shadows invert into pale halos on white: soften them in light mode */
html[data-theme="light"]:not([data-theme-native]) .plexus-title {
    text-shadow: none;
}

/* ── the switch itself ─────────────────────────────────────────────────────────────────────────────────────────── */
.monarch-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #D4AF37;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.monarch-theme-toggle:hover {
    background: rgba(212, 175, 55, 0.12);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
    color: #E8C558;
}
.monarch-theme-toggle:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 2px;
}
.monarch-theme-toggle .mtt-icon {
    font-size: 13px;
    line-height: 1;
}
.monarch-theme-toggle.floating {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 2147483000;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(4px);
}
/* on the pages with their own light palette the switch follows that palette */
html[data-theme="light"][data-theme-native] .monarch-theme-toggle {
    color: #6b5410;
    border-color: rgba(107, 84, 16, 0.45);
}
html[data-theme="light"][data-theme-native] .monarch-theme-toggle.floating {
    background: rgba(255, 255, 255, 0.9);
}
@media (max-width: 720px) {
    .monarch-theme-toggle .mtt-label { display: none; }
    .monarch-theme-toggle { padding: 8px 10px; }
}
@media print {
    .monarch-theme-toggle { display: none; }
}

/* ── the header toolbar: one height, one rhythm ──────────────────────────────────────────────────────────────────────
   Ask MONARCH (key action, outlined) · History (icon) · Trade (the only filled button) | theme (icon) · Sign out (icon)
   Every control is 32px tall, on one line; the trade label stays short (the full sentence is its tooltip) so the row
   never reflows when the ticker changes. */
.command-bar-right {
    gap: 8px;
}
.command-bar-right .ask-monarch-button,
.command-bar-right .ask-monarch-input,
.command-bar-right .trade-button-compact,
.command-bar-right .tb-icon {
    height: 32px;
    box-sizing: border-box;
    margin: 0;
}
.command-bar-right .ask-monarch-button,
.command-bar-right .trade-button-compact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
}
.command-bar-right .trade-button-compact {
    background: #1e6b2a;
    border: 1px solid #2e7d32;
    box-shadow: none;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.command-bar-right .trade-button-compact:hover {
    background: #25803a;
    box-shadow: none;
}
.command-bar-right .tb-icon,
.command-bar-right .askh-btn.tb-icon {
    width: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: #D4AF37;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 4px;
    font-size: 0;
    cursor: pointer;
    box-shadow: none;
    flex: 0 0 auto;
}
.command-bar-right .tb-icon:hover,
.command-bar-right .tb-icon:focus-visible,
.command-bar-right .askh-btn.tb-icon:hover {
    color: #E8C558;
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: none;
    outline: none;
}
.command-bar-right .tb-icon svg {
    display: block;
}
/* a thin rule between the actions and the account controls */
.command-bar-right .tb-divider {
    position: relative;
    margin-left: 9px;
}
.command-bar-right .tb-divider::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 7px;
    bottom: 7px;
    width: 1px;
    background: rgba(212, 175, 55, 0.25);
}