/*
  AICalc for the web. Every style here mirrors one in the Windows app (src/AICalc/App.xaml and the
  views' XAML), so the two look the same: sizes are WPF's (1 device-independent pixel = 1 CSS px)
  and every colour is a variable generated from the skins in src/AICalc/Services/Skins.Palettes.cs
  (css/theme.css).
  A change to a style there should be made here too, and the other way round.
*/

:root {
    /* Compact size (Settings): everything drawn at 80%, like the Windows app's ZoomScale */
    --zoom: 1;
    --ui-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --lcd-font: Bahnschrift, "DIN Alternate", "DIN 2014", "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
}

/* ------------------------------------------------------------------ skin touches (Skins.Wpf.cs: LcdFont, LcdTextEffect, scan lines) */

:root.compact { --zoom: 0.8; zoom: 0.8; }

/* Terminal: a computer font on the display, and faint scan lines across it */
:root[data-skin="terminal"] { --lcd-font: "Cascadia Mono", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace; }
:root[data-skin="terminal"][data-theme] {
    --Lcd: repeating-linear-gradient(180deg, rgba(120, 255, 150, 0.1) 0 1px, transparent 1px 3px), var(--LcdTop);
}

/* Neon and Terminal: a soft glow behind the numbers, like light from a screen */
:root[data-skin="neon"] { --lcd-glow: 0 0 7px color-mix(in srgb, var(--LcdInk) 75%, transparent); }
:root[data-skin="terminal"] { --lcd-glow: 0 0 4px color-mix(in srgb, var(--LcdInk) 75%, transparent); }

/* Changing skin or light/dark fades from the old look (MainWindow.ApplyLook) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; animation-timing-function: ease-in-out; }

/* ------------------------------------------------------------------ high contrast (ThemeManager.BuildHighContrast) */

@media (forced-colors: active) {
    :root, :root[data-theme] {
        --WindowBrush: Canvas; --PanelBrush: Canvas; --CardBrush: Canvas; --PopupBrush: Canvas;
        --TextBrush: CanvasText; --MutedTextBrush: CanvasText; --HintTextBrush: CanvasText;
        --AccentBrush: LinkText; --AccentLightBrush: Highlight; --TipTextBrush: HighlightText;
        --ErrorBackBrush: Canvas; --ErrorTextBrush: CanvasText;
        --FunctionKeyBrush: Canvas; --KeyBorderBrush: CanvasText; --Gold: LinkText;
        --ScrollTrackBrush: ButtonFace; --ScrollThumbBrush: ButtonText;
        --Lcd: Canvas; --LcdInk: CanvasText; --LcdMutedInk: CanvasText; --LcdBorderBrush: CanvasText;
        --DarkKey: ButtonFace; --LightKey: ButtonFace; --ComboBackBrush: ButtonFace;
        --SecondKey: Highlight; --SecondKeyOn: Highlight;
        --KeyTextBrush: ButtonText; --DigitKeyTextBrush: ButtonText;
        --OnLitTextBrush: HighlightText; --SelectedTextBrush: HighlightText; --KeyAccentTextBrush: ButtonText;
    }
}

/* ------------------------------------------------------------------ page and window */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--WindowBrush);
    color: var(--TextBrush);
    font-family: var(--ui-font);
    font-size: 12px;
    -webkit-text-size-adjust: 100%;
}

button, input, textarea { font: inherit; color: inherit; }

/*
  The window: 400 × 720 by default on Windows; here it fills the browser. Like the Windows app
  (MainWindow.KeepInProportion), the calculator may get a little wider or a lot taller than that but no
  further: beyond width = 0.62 × height, or height = width ÷ 0.42, it stays centred with the window colour around it.
*/
#app {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvh / var(--zoom));
}
.window {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: calc(100dvh / var(--zoom) * 0.62);
    height: calc(100vh / var(--zoom));
    height: min(calc(100dvh / var(--zoom)), calc(100vw / var(--zoom) / 0.42));
    min-height: 500px;
    padding: 10px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    user-select: none;
    -webkit-user-select: none;
}

.top-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 6px;
}

.mode-host {
    flex: 1;
    min-height: 0;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.muted { color: var(--MutedTextBrush); font-size: 12.5px; }

/* ------------------------------------------------------------------ scrollbars: slim, as in App.xaml */

/* A thin bar that only shows while the pointer is over the scrolling area, and widens (gold) when you reach for it */
.scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.scroll:hover { scrollbar-color: var(--ScrollThumbBrush) transparent; }
.scroll::-webkit-scrollbar { width: 8px; height: 0; }
.scroll::-webkit-scrollbar-track { background: transparent; margin: 2px 0; }
.scroll::-webkit-scrollbar-thumb { background-color: transparent; border-left: 4px solid transparent; background-clip: padding-box; border-radius: 3px; }
.scroll:hover::-webkit-scrollbar-thumb { background-color: var(--ScrollThumbBrush); }
.scroll::-webkit-scrollbar-thumb:hover, .scroll::-webkit-scrollbar-thumb:active { border-left-width: 1px; background-color: var(--Gold); }

/* ------------------------------------------------------------------ mode switch (SegmentTrack + ModeTab) */

.track {
    display: inline-flex;
    flex-wrap: nowrap;
    background: var(--FunctionKeyBrush);
    border-radius: 7px;
    padding: 3px;
    align-self: flex-start;
    min-width: 0;
}

.tab {
    appearance: none;
    border: 0;
    margin: 0;
    background: transparent;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 17px;
    color: var(--MutedTextBrush);
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}
.tab:hover { color: var(--TextBrush); }
.tab[aria-checked="true"] { background: var(--SecondKey); color: var(--SelectedTextBrush); font-weight: 600; }

/* Underline tabs for a choice inside a mode (SubTab) */
.subtabs { display: flex; margin: 0 0 8px 2px; }
.subtab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 3px 2px;
    margin: 0 16px 0 0;
    font-size: 12.5px;
    color: var(--MutedTextBrush);
    cursor: pointer;
}
.subtab:hover { color: var(--TextBrush); }
.subtab[aria-checked="true"] { border-bottom-color: var(--AccentBrush); color: var(--AccentBrush); font-weight: 600; }

/* ------------------------------------------------------------------ keys (KeyButton and friends) */

.key {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--KeyTextBrush);
    font-family: var(--ui-font);
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* The gold second-function label above the key */
.key > .tag {
    height: 14px;
    flex: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--Gold);
    font-size: 10px;
    font-weight: 600;
    line-height: 13px;
    white-space: nowrap;
    overflow: hidden;
}

.key > .face {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px 3px 3px 3px;
    border: 1px solid var(--KeyBorderBrush);
    border-radius: 7px;
    background: var(--DarkKey);
    line-height: 1.2;
    white-space: nowrap;
}

/* White overlay on hover and press */
.key > .face::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 7px;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}
.key:not(:disabled):hover > .face::after { opacity: 0.08; }
.key:not(:disabled):active > .face::after { opacity: 0.2; }
/* Keys dip when pressed */
.key:not(:disabled):active { transform: scale(0.96, 0.94); }
/* A typed key lights up its on-screen key (Views/KeyFlash) */
.key.flash > .face::after { animation: key-flash 0.26s linear; }
@keyframes key-flash { from { opacity: 0.3; } to { opacity: 0; } }
.key:disabled { opacity: 0.35; cursor: default; }

/* Gold ring shown only when moving around with the keyboard (KeyFocusRing) */
.key:focus { outline: none; }
.key:focus-visible::before,
.tab:focus-visible, .subtab:focus-visible, .segment:focus-visible, .lcd-icon:focus-visible,
.history-item:focus-visible, .ask-example:focus-visible, .combo-box:focus-visible, .menu-item:focus-visible {
    outline: 2px solid var(--Gold);
    outline-offset: -2px;
}
.key:focus-visible::before {
    content: "";
    position: absolute;
    inset: 0 1px 1px 1px;
    border-radius: 8px;
    outline-offset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Grey key: digits and the main (TVM) keys */
.key.digit { color: var(--DigitKeyTextBrush); font-size: 20px; }
.key.digit > .face { background: var(--LightKey); }
.key.equals { font-size: 24px; }

/* Olive key that lights up while on (2ND, hyp) */
.key.second { color: var(--SelectedTextBrush); }
.key.second > .face { background: var(--SecondKey); }
.key.on { color: var(--OnLitTextBrush); }
.key.on > .face { background: var(--SecondKeyOn); }

/* Flat text key for the memory strip */
.key.memory { color: var(--MutedTextBrush); font-size: 13px; font-weight: 600; height: 28px; }
.key.memory > .face { background: transparent; border-color: transparent; }

/* CPT next to a worksheet box */
.key.cpt { width: 48px; height: 32px; margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--KeyAccentTextBrush); }

/* The ⋯ menu key */
.menu-button { width: 44px; height: 34px; flex: none; font-size: 17px; color: var(--KeyAccentTextBrush); }

/* A keypad: equal rows and columns filling the space (UniformGrid) */
.pad {
    flex: 1;
    min-height: 0;
    display: grid;
}

/* ------------------------------------------------------------------ calculator body and LCD */

.calc-body {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--PanelBrush);
    border-radius: 10px;
    padding: 8px 8px 6px 8px;
}

.lcd {
    position: relative;
    flex: none;
    background: var(--Lcd);
    border: 1px solid var(--LcdBorderBrush);
    border-radius: 6px;
    padding: 5px 10px 6px 10px;
    color: var(--LcdInk);
    font-family: var(--lcd-font);
}
.simple-lcd { margin-bottom: 8px; }

.lcd-expr-row { position: relative; min-height: 22px; }
.lcd-expr {
    min-height: 19px;
    margin-left: 28px;
    font-size: 14px;
    line-height: 19px;
    text-align: right;
    color: var(--LcdMutedInk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.simple-lcd .lcd-expr { padding-top: 2px; }

/* A number that shrinks to fit (Viewbox StretchDirection="DownOnly"); see fit() in app.js */
.fit {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    min-width: 0;
}
.fit > * { flex: none; transform-origin: right center; white-space: nowrap; }

.lcd-display { font-weight: 600; line-height: 1.2; color: var(--LcdInk); text-shadow: var(--lcd-glow, none); }

/* Small status words on the LCD (2ND, HYP, DEG, M...) */
.lcd-flags {
    display: flex;
    flex-wrap: wrap;
    height: 16px;
    overflow: hidden;
    font-family: var(--ui-font);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 16px;
}
.lcd-flags > span { margin-right: 8px; }

/* Tiny icon key that sits on the LCD (history) */
.lcd-icon {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 2px 4px;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--LcdMutedInk);
    cursor: pointer;
}
.lcd-icon:hover { color: var(--LcdInk); }
.simple-lcd .lcd-icon { left: 10px; top: 5px; }
.lcd-icon-right { left: auto; right: 6px; top: 3px; }

.sci-lcd .lcd-expr { margin-left: 0; }

/* Area under the LCD that the history panel slides over */
.pad-area {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.memory-strip {
    flex: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 4px 0 2px 0;
}

/* ------------------------------------------------------------------ financial keypad */

.keypad-line { display: flex; align-items: center; height: 50px; }
.keypad-label { display: flex; align-items: center; flex: none; font-size: 20px; font-weight: 600; white-space: nowrap; }
.computed-mark { font-family: var(--ui-font); font-size: 12px; margin: 0 0 8px 3px; }
.keypad-line .fit { flex: 1; height: 50px; margin-left: 8px; }

.keypad-hint {
    flex: none;
    min-height: 30px;
    margin: 5px 2px 2px 2px;
    color: var(--HintTextBrush);
    font-size: 11.5px;
    line-height: 15px;
}

/* ------------------------------------------------------------------ financial worksheets */

.financial { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.worksheets-body { padding: 10px 4px 6px 10px; }

.combo { position: relative; flex: none; margin-right: 6px; }
.combo-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0 14px 0 12px;
    background: var(--ComboBackBrush);
    border: 1px solid var(--KeyBorderBrush);
    border-radius: 7px;
    color: var(--TextBrush);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.combo-box:hover { border-color: var(--Gold); }
.combo-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-chevron { display: flex; color: var(--Gold); margin-left: 12px; }
.combo-popup {
    position: absolute;
    z-index: 32;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 3px;
    max-height: 33vh;
    overflow-y: auto;
    padding: 3px;
    background: var(--PopupBrush);
    border: 1px solid var(--KeyBorderBrush);
    border-radius: 7px;
    font-size: 14px;
    animation: fade-in 0.15s ease-out;
}
.combo-item { padding: 7px 10px; border-radius: 5px; color: var(--TextBrush); cursor: pointer; }
.combo-item.highlight { background: var(--AccentLightBrush); }
.combo-item.selected { color: var(--Gold); font-weight: 600; }

.worksheet { flex: 1; min-height: 0; overflow-y: auto; margin-top: 8px; }
.worksheet-inner { display: flex; flex-direction: column; margin: 0 6px 12px 2px; }

.ws-description { font-size: 13px; line-height: 1.33; color: var(--TextBrush); }
.ws-tip, .ws-error { border-radius: 6px; padding: 7px 10px; margin-top: 8px; line-height: 1.33; }
.ws-tip { background: var(--AccentLightBrush); color: var(--TipTextBrush); font-size: 12px; }
.ws-error { background: var(--ErrorBackBrush); color: var(--ErrorTextBrush); font-size: 12.5px; }

/* The full-width Clear worksheet key */
.clear-sheet { display: flex; align-items: center; font-size: 15px; font-weight: 600; }
.clear-sheet-icon { display: flex; margin-right: 8px; color: var(--KeyAccentTextBrush); }

.caption { font-size: 11.5px; line-height: 1.33; color: var(--MutedTextBrush); }

.ws-option { margin-top: 10px; }
.ws-option .caption { margin-bottom: 3px; }
.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    background: var(--FunctionKeyBrush);
    border-radius: 7px;
    padding: 3px;
}
.segment {
    appearance: none;
    border: 0;
    margin: 0;
    background: transparent;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12.5px;
    color: var(--MutedTextBrush);
    cursor: pointer;
}
.segment:hover { color: var(--TextBrush); }
.segment[aria-checked="true"] { background: var(--SecondKey); color: var(--SelectedTextBrush); font-weight: 600; }

.ws-fields { margin-top: 8px; }
.field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 138px 54px;
    align-items: center;
    margin: 4px 0;
}
.ws-label { margin-right: 8px; }
.ws-name { font-size: 14px; font-weight: 600; color: var(--TextBrush); }

/* Number box; changes colour after CPT, like the "*" marker on the keypad display */
.field-box {
    width: 100%;
    min-width: 0;
    height: 32px;
    margin: 0;
    padding: 0 6px;
    background: var(--Lcd);
    color: var(--LcdInk);
    caret-color: var(--LcdInk);
    border: 1px solid var(--LcdBorderBrush);
    border-radius: 5px;
    font-family: var(--lcd-font);
    font-size: 15px;
    text-align: right;
    user-select: text;
    -webkit-user-select: text;
}
.field-box:focus { outline: none; border-color: var(--AccentBrush); box-shadow: 0 0 0 0.5px var(--AccentBrush); }
.field-box.computed { background: var(--SecondKeyOn); color: var(--OnLitTextBrush); font-weight: 600; }
.date-box { font-family: var(--ui-font); font-size: 13px; text-align: left; }

.ws-rows-head, .ws-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 64px 34px;
    align-items: center;
}
.ws-rows-head { margin: 12px 0 2px 0; }
.ws-rows-head .caption { margin: 0 4px; }
.ws-row { margin: 3px 0; }
.ws-row .field-box { width: auto; margin-right: 4px; }
.ws-row-label { font-size: 14px; font-weight: 600; color: var(--TextBrush); }

.section-header { margin: 14px 0 4px 0; font-size: 12px; font-weight: 600; color: var(--MutedTextBrush); }

.card {
    background: var(--CardBrush);
    border: 1px solid var(--KeyBorderBrush);
    border-radius: 8px;
    padding: 8px 12px;
}

.result-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin: 4px 0;
}
.result-value {
    max-width: 230px;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    color: var(--AccentBrush);
    overflow-wrap: anywhere;
    user-select: text;
    -webkit-user-select: text;
}

.schedule { padding: 6px 8px; }
.schedule-head, .schedule-row { display: grid; font-size: 11.5px; text-align: right; }
/* Both reserve the scrollbar's width, so the header lines up with the rows */
.schedule-head { margin: 0 0 4px 0; overflow-y: hidden; scrollbar-gutter: stable; font-weight: 600; color: var(--MutedTextBrush); }
.schedule-rows { max-height: 260px; overflow-y: scroll; scrollbar-gutter: stable; }
.schedule-row { height: 17px; line-height: 15px; padding: 1px 0; color: var(--TextBrush); user-select: text; -webkit-user-select: text; }

/* ------------------------------------------------------------------ history panel */

.history {
    position: absolute;
    inset: 0 3px 3px 3px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: var(--CardBrush);
    border: 1px solid var(--KeyBorderBrush);
    border-radius: 8px;
    padding: 8px 10px;
}
.sci-area > .history { top: 4px; }
.history-head { display: flex; align-items: center; justify-content: space-between; flex: none; }
.history-title { font-size: 15px; font-weight: 600; color: var(--TextBrush); }
.history-buttons { display: flex; }
.history-empty { margin: 16px 0 0 0; font-size: 13px; color: var(--MutedTextBrush); }
.history-list { flex: 1; min-height: 0; overflow-y: auto; margin-top: 8px; }
.history-item { padding: 6px 8px; border-radius: 6px; cursor: pointer; text-align: right; }
.history-item:hover { background: var(--AccentLightBrush); }
.history-expr { font-size: 12.5px; color: var(--MutedTextBrush); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-shown { font-family: var(--lcd-font); font-size: 20px; font-weight: 600; color: var(--TextBrush); }

/* ------------------------------------------------------------------ pop-up menus */

.popup-catcher { position: fixed; inset: 0; z-index: 30; }

.menu {
    position: fixed;
    z-index: 31;
    visibility: hidden;
    padding: 4px 3px;
    background: var(--PopupBrush);
    color: var(--TextBrush);
    border: 1px solid var(--KeyBorderBrush);
    border-radius: 9px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    font-size: 13.5px;
    user-select: none;
}
.menu:focus { outline: none; }
.menu-item {
    display: flex;
    align-items: center;
    width: calc(100% - 4px);
    margin: 1px 2px;
    padding: 7px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--TextBrush);
    text-align: left;
    cursor: pointer;
}
.menu-item:not(:disabled):hover, .menu-item:not(:disabled):focus { background: var(--CardBrush); outline: none; }
.menu-item:disabled { opacity: 0.45; cursor: default; }
.menu-header { flex: 1; min-width: 150px; white-space: nowrap; }
.menu-gesture { margin-left: 24px; white-space: nowrap; font-size: 12px; color: var(--MutedTextBrush); }
.menu-separator { height: 1px; margin: 4px 10px; background: var(--KeyBorderBrush); }

/* ------------------------------------------------------------------ settings (SettingsView.xaml) */

.settings { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.settings-head { display: flex; flex-direction: column; margin: 0 0 8px 2px; flex: none; }
.settings-title { font-size: 20px; font-weight: 600; color: var(--TextBrush); }
.settings-back { display: flex; align-items: center; gap: 8px; padding: 0 14px 0 12px; }
.settings-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.settings-inner { display: flex; flex-direction: column; align-items: flex-start; margin: 4px 8px 16px 2px; }
.settings-inner > div[role="radiogroup"]:not(.track) { align-self: stretch; }
.settings-section { font-size: 15px; font-weight: 600; color: var(--TextBrush); }
.settings-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--MutedTextBrush); }
.settings-note { font-size: 12.5px; margin-top: 6px; color: var(--HintTextBrush); line-height: 1.33; }
.high-contrast-note { display: none; }
@media (forced-colors: active) { .high-contrast-note { display: block; } }
.settings-about { font-size: 13px; margin-top: 8px; color: var(--TextBrush); }
.settings-about + .settings-about { margin-top: 4px; }
.settings-about a { color: var(--AccentBrush); }

/* A skin card: a mini calculator in the skin's colours, its name and a few words */
.skin-card {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 8px 0;
    padding: 10px;
    background: var(--CardBrush);
    border: 1px solid var(--KeyBorderBrush);
    border-radius: 10px;
    color: var(--TextBrush);
    text-align: left;
    cursor: pointer;
}
.skin-card:hover { border-color: var(--MutedTextBrush); }
.skin-card[aria-checked="true"] { border: 2px solid var(--AccentBrush); padding: 9px; }
.skin-card:focus-visible { outline: 2px solid var(--Gold); outline-offset: 1px; }
.skin-mini { flex: none; display: flex; flex-direction: column; width: 84px; padding: 5px; border-radius: 7px; }
.skin-mini-lcd { height: 20px; padding: 0 4px; border-radius: 3px; text-align: right; font-family: var(--lcd-font); font-size: 12px; line-height: 20px; }
.skin-mini-keys { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); height: 30px; margin-top: 5px; }
.skin-mini-keys > span { margin: 1.5px; border-radius: 2px; }
.skin-mini-gold { height: 2px; margin: 3px 18px 0 18px; border-radius: 1px; }
.skin-text { flex: 1; display: flex; flex-direction: column; margin-left: 12px; }
.skin-name { font-size: 15px; font-weight: 600; }
.skin-description { font-size: 12.5px; margin-top: 2px; color: var(--MutedTextBrush); line-height: 1.33; }
.skin-tick { width: 18px; margin: 0 2px 0 8px; display: flex; color: var(--AccentBrush); }

/* ------------------------------------------------------------------ help (HelpWindow.xaml) */

.dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.45);
    animation: fade-in 0.15s ease-out;
}
.dialog {
    display: flex;
    flex-direction: column;
    width: 460px;
    max-width: 100%;
    height: 640px;
    max-height: 100%;
    background: var(--WindowBrush);
    border: 1px solid var(--KeyBorderBrush);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.dialog-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    height: 32px;
    padding-left: 12px;
    font-size: 12px;
    color: var(--TextBrush);
}
.dialog-close {
    width: 46px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--TextBrush);
    font-size: 13px;
    cursor: pointer;
}
.dialog-close:hover { background: #c42b1c; color: #fff; }
.help-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 12px 12px 12px; }
.help-scroll { flex: 1; min-height: 0; overflow-y: auto; margin-top: 10px; padding-right: 8px; }
.help-section { margin-bottom: 14px; }
.help-section-title { font-size: 15px; font-weight: 600; color: var(--TextBrush); }
.help-intro { font-size: 12.5px; margin-top: 3px; color: var(--MutedTextBrush); line-height: 1.33; }
.help-items { margin-top: 6px; }
.help-item { background: var(--CardBrush); border-radius: 6px; padding: 6px 10px; margin: 2px 0; user-select: text; -webkit-user-select: text; }
.help-keys { font-family: var(--lcd-font); font-size: 13.5px; font-weight: 600; color: var(--AccentBrush); white-space: pre-wrap; }
.help-what { font-size: 12.5px; margin-top: 1px; color: var(--TextBrush); line-height: 1.33; }
.help-footer { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--MutedTextBrush); }
.help-footer a { color: var(--AccentBrush); }

/* ------------------------------------------------------------------ Ask (AskView.xaml) */

.ask { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ask-head { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin: 0 0 6px 2px; }
.ask-title { font-size: 16px; font-weight: 600; color: var(--TextBrush); }
.ask-confirm {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 4px 0 10px;
    background: var(--CardBrush);
    border: 1px solid var(--AccentBrush);
    border-radius: 8px;
}
.ask-confirm-text { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.ask-intro { margin: 0 6px 0 2px; }
.ask-example {
    display: block;
    width: 100%;
    margin: 0 0 6px 0;
    padding: 7px 10px;
    background: var(--CardBrush);
    border: 1px solid var(--KeyBorderBrush);
    border-radius: 8px;
    color: var(--TextBrush);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.ask-example:hover { border-color: var(--AccentBrush); }
.ask-turns { margin-right: 6px; }
.ask-turn { display: flex; flex-direction: column; margin-bottom: 12px; }
.ask-question {
    align-self: flex-end;
    max-width: 300px;
    margin: 0 0 6px 40px;
    padding: 7px 11px;
    background: var(--SecondKey);
    color: var(--SelectedTextBrush);
    border-radius: 12px 12px 3px 12px;
    font-size: 13.5px;
    overflow-wrap: anywhere;
    user-select: text;
    -webkit-user-select: text;
}
.ask-answer {
    display: flex;
    flex-direction: column;
    margin-right: 24px;
    padding: 8px 10px;
    background: var(--PanelBrush);
    border-radius: 12px 12px 12px 3px;
    user-select: text;
    -webkit-user-select: text;
}
.ask-status { font-size: 13.5px; color: var(--HintTextBrush); white-space: pre-wrap; }
/* Three dots that pulse in turn while the answer is being worked out */
.thinking { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.thinking > i { width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--AccentBrush); opacity: 0.25; animation: thinking 1.2s infinite; }
.thinking > i:nth-child(2) { animation-delay: 0.2s; }
.thinking > i:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinking { 0%, 50%, 100% { opacity: 0.25; } 25% { opacity: 1; } }
.ask-summary { margin-top: 2px; }
.ask-lcd { margin-top: 6px; }
.ask-answer-label { font-family: var(--ui-font); font-size: 11.5px; font-weight: 600; color: var(--LcdMutedInk); }
.ask-answer-text { font-size: 26px; text-align: right; color: var(--LcdInk); overflow-wrap: anywhere; text-shadow: var(--lcd-glow, none); }
.ask-answer-note { font-family: var(--ui-font); font-size: 11.5px; text-align: right; color: var(--LcdMutedInk); }
.ask-details { font-size: 12px; margin-top: 6px; }
.ask-input { display: flex; margin-top: 8px; }
.ask-box {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    max-height: 120px;
    padding: 9px 9px 8px 10px;
    resize: none;
    overflow-y: auto;
    background: var(--ComboBackBrush);
    color: var(--TextBrush);
    caret-color: var(--TextBrush);
    border: 1px solid var(--KeyBorderBrush);
    border-radius: 8px;
    font-size: 14px;
    line-height: 19px;
    user-select: text;
    -webkit-user-select: text;
}
.ask-box::placeholder { color: var(--MutedTextBrush); opacity: 0.75; }
.ask-box:focus { outline: none; border-color: var(--AccentBrush); box-shadow: 0 0 0 0.5px var(--AccentBrush); }
.ask-footer { font-size: 11px; margin: 6px 0 0 2px; opacity: 0.85; }

/* ------------------------------------------------------------------ loading and errors */

.loading .tab { cursor: default; }
.loading-bar {
    height: 3px;
    margin: 18px 30%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--Gold) var(--blazor-load-percentage, 0%), var(--FunctionKeyBrush) 0);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 10px 16px;
    background: var(--ErrorBackBrush);
    color: var(--ErrorTextBrush);
    font-size: 13px;
}
#blazor-error-ui a { color: inherit; font-weight: 600; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }