/* BeOS windows and widgets for the tools and cards (ADR-0001, ADR-0004). Load it after every other
   stylesheet on the page, so the widgets win over older per-tool control styles. */

/* Theme tokens. The theme picks dark mode with body.dark-theme, or with the OS setting unless the
   visitor chose light; the two dark blocks must stay identical (tests/beos-controls.test.js). */
body {
    --beos-panel: #d8d8d8;
    --beos-face: #e8e8e8;
    --beos-face-down: #c8c8c8;
    --beos-hi: #ffffff;
    --beos-lo: #9a9a9a;
    --beos-edge: #6b6b6b;
    --beos-field: #ffffff;
    --beos-text: #1a1a1a;
    --beos-dim: #4d4d4d;
    --beos-focus: #2f5fe0;
}

body.dark-theme {
    --beos-panel: #1e1f22;
    --beos-face: #35363b;
    --beos-face-down: #26272b;
    --beos-hi: #4a4b50;
    --beos-lo: #0b0b0c;
    --beos-edge: #75767b;
    --beos-field: #141517;
    --beos-text: #e4e4ea;
    --beos-dim: #a9a9b3;
    --beos-focus: #ffcc00;
}

@media (prefers-color-scheme: dark) {
    body:not(.light-theme) {
        --beos-panel: #1e1f22;
        --beos-face: #35363b;
        --beos-face-down: #26272b;
        --beos-hi: #4a4b50;
        --beos-lo: #0b0b0c;
        --beos-edge: #75767b;
        --beos-field: #141517;
        --beos-text: #e4e4ea;
        --beos-dim: #a9a9b3;
        --beos-focus: #ffcc00;
    }
}

/* A window with its yellow tab sitting on the top edge. The window sets its own border; the tab
   sits above the 2px top border whatever the window's padding. */
.beos-window {
    --tab-h: 1.75rem;
    position: relative;
    margin-top: var(--tab-h);
    border-top-width: 2px;
}

.beos-window > .term-bar {
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: calc(100% + 2px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    height: var(--tab-h);
}

.term-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    height: 100%;
    padding: 0 0.5rem;
    background: #ffcc00;
    border-top: 1px solid #fff2a8;
    border-left: 1px solid #fff2a8;
    border-right: 1px solid #b38f00;
}

.term-close,
.term-zoom {
    position: relative;
    flex-shrink: 0;
    width: 0.7rem;
    height: 0.7rem;
    background: #ffe066;
    border: 1px solid #806600;
}

.term-zoom::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 55%;
    height: 55%;
    border: 1px solid #806600;
}

.term-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1a1400;
}

/* A tool is a BeOS window: grey panel, bevelled frame. */
.tool-container.beos-window {
    /* Older per-tool rules use the theme's colours; inside a tool they resolve to the checked palette. */
    --color: var(--beos-text);
    --color-secondary: var(--beos-dim);
    --border-color: var(--beos-edge);
    --background: var(--beos-field);
    --background-secondary: var(--beos-face);
    margin-top: calc(var(--tab-h) + 1.5rem);
    color: var(--beos-text);
    background: var(--beos-panel);
    border: 1px solid var(--beos-edge);
    border-top-width: 2px;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 var(--beos-hi), inset -1px -1px 0 var(--beos-lo);
}

.tool-container.beos-window.fullscreen {
    top: var(--tab-h);
    margin: 0;
}

.tool-container :is(label, legend, h3, h4, output) {
    color: var(--beos-text);
}

/* Buttons: raised, sunk when pressed; the primary button has the outer ring of a default button.
   Preview content drawn as buttons keeps its own look. */
.tool-container button:not(.flex-item, .swatch-color, .delete-keyframe) {
    font: inherit;
    color: var(--beos-text);
    background: var(--beos-face);
    border: 1px solid var(--beos-edge);
    border-radius: 3px;
    box-shadow: inset 1px 1px 0 var(--beos-hi), inset -1px -1px 0 var(--beos-lo);
    cursor: pointer;
}

.tool-container button:not(.flex-item, .swatch-color, .delete-keyframe):hover:not(:disabled) {
    background: color-mix(in srgb, var(--beos-face) 85%, var(--beos-hi));
}

.tool-container button:not(.flex-item, .swatch-color, .delete-keyframe):active:not(:disabled) {
    background: var(--beos-face-down);
    box-shadow: inset 1px 1px 0 var(--beos-lo), inset -1px -1px 0 var(--beos-hi);
}

.tool-container button.primary {
    outline: 2px solid var(--beos-edge);
    outline-offset: 1px;
}

/* Text fields and text areas: sunken. */
.tool-container :is(input[type="text"], input[type="number"], input[type="search"], input:not([type]), textarea) {
    font-family: inherit;
    color: var(--beos-text);
    background: var(--beos-field);
    border: 1px solid var(--beos-edge) !important;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 var(--beos-lo), inset -1px -1px 0 var(--beos-hi);
}

.tool-container :is(input, textarea)::placeholder {
    color: var(--beos-dim);
}

/* Menu fields: raised, with BeOS's small down-pointing triangle. */
.tool-container select {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: var(--beos-text);
    background-color: var(--beos-face);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--beos-text) 50%),
        linear-gradient(135deg, var(--beos-text) 50%, transparent 50%);
    background-position: right 0.9rem center, right 0.55rem center;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
    padding-right: 1.75rem;
    border: 1px solid var(--beos-edge);
    border-radius: 0;
    box-shadow: inset 1px 1px 0 var(--beos-hi), inset -1px -1px 0 var(--beos-lo);
    cursor: pointer;
}

.tool-container select option {
    color: var(--beos-text);
    background: var(--beos-field);
}

/* Checkboxes, and the tools' toggle switches drawn as checkboxes: a sunken square with an X. */
.tool-container input[type="checkbox"]:not(.tool-toggle input),
.tool-container.beos-window .tool-toggle .toggle-slider {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    background: var(--beos-field);
    border: 1px solid var(--beos-edge);
    border-radius: 0;
    box-shadow: inset 1px 1px 0 var(--beos-lo);
}

.tool-container.beos-window .tool-toggle .toggle-slider::before {
    content: none;
}

.tool-container input[type="checkbox"]:not(.tool-toggle input):checked,
.tool-container.beos-window .tool-toggle input:checked + .toggle-slider {
    background-color: var(--beos-field);
    background-image:
        linear-gradient(45deg, transparent 45%, var(--beos-text) 45% 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, var(--beos-text) 45% 55%, transparent 55%);
}

/* Sliders: a sunken groove filled up to a raised thumb. beos-slider.js keeps --fill current. */
.tool-container input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    height: 8px;
    background: linear-gradient(var(--beos-focus), var(--beos-focus)) 0 / var(--fill, 0%) 100% no-repeat, var(--beos-field);
    border: 1px solid var(--beos-edge);
    border-radius: 0;
    box-shadow: inset 1px 1px 0 var(--beos-lo);
    accent-color: var(--beos-focus);
}

.tool-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 20px;
    background: var(--beos-face);
    border: 1px solid var(--beos-edge);
    border-radius: 0;
    box-shadow: inset 1px 1px 0 var(--beos-hi), inset -1px -1px 0 var(--beos-lo);
    cursor: pointer;
}

.tool-container input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 18px;
    background: var(--beos-face);
    border: 1px solid var(--beos-edge);
    border-radius: 0;
    box-shadow: inset 1px 1px 0 var(--beos-hi), inset -1px -1px 0 var(--beos-lo);
    cursor: pointer;
}

/* Colour wells: a sunken frame around the colour. */
.tool-container input[type="color"] {
    padding: 2px;
    background: var(--beos-field);
    border: 1px solid var(--beos-edge);
    border-radius: 0;
    box-shadow: inset 1px 1px 0 var(--beos-lo);
    cursor: pointer;
}

.tool-container input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.tool-container input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 0;
}

.tool-container input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 0;
}

/* Focus: BeOS draws keyboard focus in its navigation colour. */
.tool-container :is(button, select, input, textarea):focus-visible,
.tool-container :is(input[type="text"], input[type="number"], input[type="search"], input:not([type]), textarea):focus,
.tool-container.beos-window .tool-toggle input:focus-visible + .toggle-slider {
    outline: 2px solid var(--beos-focus);
    outline-offset: 1px;
}

.tool-container :is(button, select, input, textarea):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Generated code shown in the panel: a sunken, readable field. */
.tool-container pre.code-output {
    padding: 0.75rem 1rem;
    color: var(--beos-text);
    background: var(--beos-field);
    border: 1px solid var(--beos-edge);
    border-radius: 0;
    box-shadow: inset 1px 1px 0 var(--beos-lo);
}

.tool-container pre.code-output code {
    color: inherit;
    background: none;
}

/* Alerts: a raised note with a coloured edge. */
.tool-container .tool-alert {
    color: var(--beos-text);
    background: var(--beos-face);
    border: 1px solid var(--beos-edge);
    border-left: 6px solid #ffcc00;
    border-radius: 0;
}

.tool-container .tool-alert.error {
    border-left-color: #d64545;
}