/*
    Effect Weaver UI library - styles (see UI.md for the documentation).

    Theme tokens (set by Ew.Theme.Apply, or override them in your own css):
        --ew-bg, --ew-fg, --ew-accent1, --ew-accent2     The 4 base colors
        --ew-sans, --ew-mono, --ew-serif                 Font families
        --ew-size, --ew-mono-size, --ew-serif-size       Font sizes
        --ew-sans-weight, --ew-head-weight               Font weights
    Everything else is computed from them below (intermediate colors use color-mix).
    Sizing: --ew-touch is the minimal height of interactive controls (touch targets), --ew-radius the corner radius.
*/

@font-face {
    font-family: "Barlow";
    src: url(fonts/Barlow-Regular.woff2) format("woff2");
    font-weight: 400;
    font-display: block;
}

@font-face {
    font-family: "Barlow";
    src: url(fonts/Barlow-Medium.woff2) format("woff2");
    font-weight: 500;
    font-display: block;
}

@font-face {
    font-family: "Saira Semi Condensed";
    src: url(fonts/SairaSemiCondensed-SemiBold.woff2) format("woff2");
    font-weight: 600;
    font-display: block;
}

:root {
    /* Base (the dark theme, also used before a theme is applied) */
    --ew-bg: #1D2A33;
    --ew-fg: #F5F7F9;
    --ew-accent1: #E46CA8;
    --ew-accent2: #4FC9E0;
    --ew-sans: Barlow, "Segoe UI", system-ui, sans-serif;
    --ew-head: "Saira Semi Condensed", Barlow, "Segoe UI", sans-serif;
    --ew-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
    --ew-serif: Georgia, "Times New Roman", serif;
    --ew-size: 15px;
    --ew-mono-size: 13px;
    --ew-serif-size: 16px;
    --ew-sans-weight: 400;
    --ew-head-weight: 600;
    --ew-touch: 44px;
    --ew-radius: 8px;
    --ew-gap: 8px;
    --ew-speed: 160ms;
    /* Computed intermediates */
    --ew-bg-1: color-mix(in oklab, var(--ew-bg), var(--ew-fg) 4%);
    --ew-bg-2: color-mix(in oklab, var(--ew-bg), var(--ew-fg) 8%);
    --ew-bg-3: color-mix(in oklab, var(--ew-bg), var(--ew-fg) 14%);
    --ew-bg-inset: color-mix(in oklab, var(--ew-bg), black 22%);
    --ew-line: color-mix(in oklab, var(--ew-bg), var(--ew-fg) 22%);
    --ew-line-strong: color-mix(in oklab, var(--ew-bg), var(--ew-fg) 38%);
    --ew-muted: color-mix(in oklab, var(--ew-fg), var(--ew-bg) 35%);
    --ew-faint: color-mix(in oklab, var(--ew-fg), var(--ew-bg) 58%);
    --ew-accent1-soft: color-mix(in srgb, var(--ew-accent1) 20%, transparent);
    --ew-accent2-soft: color-mix(in srgb, var(--ew-accent2) 20%, transparent);
    --ew-accent1-fg: color-mix(in oklab, var(--ew-accent1), var(--ew-fg) 30%);
    --ew-on-accent: var(--ew-bg);
    --ew-danger: color-mix(in oklab, #ff4d4d, var(--ew-fg) 10%);
    --ew-danger-soft: color-mix(in srgb, #ff4d4d 22%, transparent);
    --ew-shadow: 0 8px 28px color-mix(in srgb, black 45%, transparent);
    color-scheme: dark;
}

:root[data-ew-scheme="light"] {
    color-scheme: light;
    --ew-bg-inset: color-mix(in oklab, var(--ew-bg), var(--ew-fg) 6%);
    --ew-on-accent: #fff;
    --ew-shadow: 0 8px 28px color-mix(in srgb, black 18%, transparent);
}

.ew-root, .ew-root * {
    box-sizing: border-box;
}

.ew-root {
    margin: 0;
    background: var(--ew-bg);
    color: var(--ew-fg);
    font-family: var(--ew-sans);
    font-size: var(--ew-size);
    font-weight: var(--ew-sans-weight);
    -webkit-tap-highlight-color: transparent;
}

.ew-mono {
    font-family: var(--ew-mono);
    font-size: var(--ew-mono-size);
}

.ew-serif {
    font-family: var(--ew-serif);
    font-size: var(--ew-serif-size);
}

.ew-head {
    font-family: var(--ew-head);
    font-weight: var(--ew-head-weight);
    letter-spacing: 0.02em;
}

.ew-muted {
    color: var(--ew-muted);
}

.ew-noselect {
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- Icons ---------- */

.ew-icon {
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    flex: none;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* ---------- Buttons ---------- */

.ew-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--ew-touch);
    min-width: var(--ew-touch);
    padding: 0 14px;
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    background: var(--ew-bg-2);
    color: var(--ew-fg);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: background var(--ew-speed), border-color var(--ew-speed), color var(--ew-speed), transform 80ms;
    white-space: nowrap;
}

.ew-button:focus-visible, .ew-focusable:focus-visible {
    outline: 2px solid var(--ew-accent2);
    outline-offset: 2px;
}

@media (hover: hover) {
    .ew-button:hover:not(:disabled) {
        background: var(--ew-bg-3);
        border-color: var(--ew-line-strong);
    }
}

.ew-button:active:not(:disabled), .ew-button.ew-pressing {
    transform: scale(0.96);
}

.ew-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.ew-button.ew-icon-only {
    padding: 0;
}

.ew-button.ew-small {
    min-height: calc(var(--ew-touch) * 0.75);
    min-width: calc(var(--ew-touch) * 0.75);
    padding: 0 10px;
    font-size: 0.9em;
}

.ew-button.ew-small.ew-icon-only {
    padding: 0;
}

.ew-button.ew-primary {
    background: var(--ew-accent1);
    border-color: var(--ew-accent1);
    color: var(--ew-on-accent);
}

.ew-button.ew-accent {
    background: var(--ew-accent2);
    border-color: var(--ew-accent2);
    color: var(--ew-on-accent);
}

.ew-button.ew-ghost {
    background: transparent;
    border-color: transparent;
}

.ew-button.ew-danger {
    background: var(--ew-danger-soft);
    border-color: var(--ew-danger);
    color: var(--ew-fg);
}

/* Toggle buttons (Pressable: true) */
.ew-button[aria-pressed="true"] {
    background: var(--ew-accent1-soft);
    border-color: var(--ew-accent1);
    color: var(--ew-fg);
}

.ew-button.ew-accent2[aria-pressed="true"] {
    background: var(--ew-accent2-soft);
    border-color: var(--ew-accent2);
}

.ew-button.ew-danger[aria-pressed="true"] {
    background: var(--ew-danger);
    color: #fff;
}

/* ---------- Frame (Ew.Frame): a group of controls, the title sits in the top border ---------- */

.ew-frame {
    position: relative;
    min-width: 0;
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    padding: 9px 6px 5px;
    margin-top: 7px;
}

.ew-frame-title {
    position: absolute;
    top: -8px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 0 6px;
    background: var(--ew-frame-bg, var(--ew-bg));
    color: var(--ew-muted);
    font-family: var(--ew-head);
    font-weight: 600;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.ew-frame-body {
    min-width: 0;
}

/* ---------- Switch (Ew.Toggle) ---------- */

.ew-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--ew-touch);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.ew-toggle-track {
    position: relative;
    width: 50px;
    height: 28px;
    border-radius: 14px;
    background: var(--ew-bg-inset);
    border: 1px solid var(--ew-line);
    transition: background var(--ew-speed), border-color var(--ew-speed);
    flex: none;
}

.ew-toggle-track::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ew-muted);
    transition: transform var(--ew-speed), background var(--ew-speed);
}

.ew-toggle[aria-checked="true"] .ew-toggle-track {
    background: var(--ew-accent1-soft);
    border-color: var(--ew-accent1);
}

.ew-toggle[aria-checked="true"] .ew-toggle-track::after {
    transform: translateX(22px);
    background: var(--ew-accent1);
}

.ew-toggle:focus-visible {
    outline: none;
}

.ew-toggle:focus-visible .ew-toggle-track {
    outline: 2px solid var(--ew-accent2);
    outline-offset: 2px;
}

/* ---------- Slider (Ew.Slider) ---------- */

.ew-slider {
    /* Room for the thumb at both ends (it is centered on the value) */
    padding: 0 14px;
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--ew-touch);
    min-width: 60px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    outline: none;
    --ew-slider-color: var(--ew-accent1);
}

.ew-slider.ew-accent2 {
    --ew-slider-color: var(--ew-accent2);
}

.ew-slider-track {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--ew-bg-inset);
    border: 1px solid var(--ew-line);
}

.ew-slider-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    background: var(--ew-slider-color);
    opacity: 0.75;
}

.ew-slider-thumb {
    position: absolute;
    top: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: var(--ew-fg);
    border: 3px solid var(--ew-slider-color);
    box-shadow: 0 1px 4px color-mix(in srgb, black 40%, transparent);
    transition: transform 80ms;
}

.ew-slider.ew-dragging .ew-slider-thumb {
    transform: scale(1.15);
}

.ew-slider:focus-visible .ew-slider-thumb {
    outline: 2px solid var(--ew-accent2);
    outline-offset: 2px;
}

.ew-slider.ew-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Vertical: fills its container's height, min at the bottom */
.ew-slider.ew-vertical {
    padding: 14px 0;
    flex-direction: column;
    min-height: 60px;
    min-width: var(--ew-touch);
    height: 100%;
}

.ew-slider.ew-vertical .ew-slider-track {
    width: 8px;
    height: auto;
    flex: 1;
}

.ew-slider.ew-vertical .ew-slider-fill {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
}

.ew-slider.ew-vertical .ew-slider-thumb {
    top: auto;
    left: 50%;
    margin: 0 0 -13px -13px;
}

/* Fader style (crossfader): a wide rectangular cap */
.ew-slider.ew-fader .ew-slider-thumb {
    width: 58px;
    height: 30px;
    margin: -15px 0 0 -29px;
    border-radius: 6px;
    background: linear-gradient(var(--ew-bg-3), var(--ew-bg-2));
    border: 1px solid var(--ew-line-strong);
}

.ew-slider.ew-fader .ew-slider-thumb::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 3px;
    bottom: 3px;
    width: 3px;
    margin-left: -1.5px;
    background: var(--ew-slider-color);
    border-radius: 2px;
}

.ew-slider.ew-fader.ew-vertical {
    padding: 30px 0;
}

.ew-slider.ew-fader:not(.ew-vertical) {
    padding: 0 30px;
}

.ew-slider.ew-fader.ew-vertical .ew-slider-thumb {
    width: 30px;
    height: 58px;
    margin: 0 0 -29px -15px;
}

.ew-slider.ew-fader.ew-vertical .ew-slider-thumb::after {
    left: 3px;
    right: 3px;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 3px;
    margin: -1.5px 0 0 0;
}

.ew-slider.ew-fader .ew-slider-fill {
    display: none;
}

/* Center mark (Ew.Slider Center option) */
.ew-slider-mark {
    position: absolute;
    background: var(--ew-line-strong);
}

.ew-slider:not(.ew-vertical) .ew-slider-mark {
    top: -6px;
    bottom: -6px;
    width: 2px;
    margin-left: -1px;
}

.ew-slider.ew-vertical .ew-slider-mark {
    left: -6px;
    right: -6px;
    height: 2px;
    margin-bottom: -1px;
}

/* ---------- Number box (Ew.NumberBox) and text inputs ---------- */

.ew-input {
    min-height: calc(var(--ew-touch) * 0.8);
    padding: 0 10px;
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    background: var(--ew-bg-inset);
    color: var(--ew-fg);
    font: inherit;
    min-width: 0;
}

.ew-input:focus {
    outline: none;
    border-color: var(--ew-accent2);
}

.ew-number {
    width: 5.5em;
    text-align: right;
    font-family: var(--ew-mono);
    font-size: var(--ew-mono-size);
}

/* ---------- Select (Ew.Select) ---------- */

.ew-select {
    justify-content: space-between;
    min-width: 120px;
    font-weight: 400;
}

.ew-select .ew-icon {
    width: 1em;
    height: 1em;
    opacity: 0.7;
}

/* ---------- Color swatch (Ew.ColorPicker) ---------- */

.ew-swatch {
    width: calc(var(--ew-touch) * 1.4);
    padding: 4px;
}

.ew-swatch-color {
    display: block;
    width: 100%;
    height: 100%;
    min-height: calc(var(--ew-touch) - 10px);
    border-radius: calc(var(--ew-radius) - 3px);
    border: 1px solid color-mix(in srgb, black 30%, transparent);
}

.ew-cp {
    display: grid;
    grid-template-columns: 220px 36px;
    gap: 12px;
    padding: 12px;
}

.ew-cp-sv {
    position: relative;
    width: 220px;
    height: 160px;
    border-radius: 6px;
    touch-action: none;
    cursor: crosshair;
    background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
}

.ew-cp-hue {
    position: relative;
    height: 160px;
    border-radius: 6px;
    touch-action: none;
    cursor: pointer;
    background: linear-gradient(to bottom, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.ew-cp-dot {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #000, 0 1px 4px #000;
    pointer-events: none;
}

.ew-cp-bar {
    position: absolute;
    left: -4px;
    right: -4px;
    height: 8px;
    margin-top: -4px;
    border-radius: 3px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #000;
    pointer-events: none;
}

.ew-cp-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: center;
}

.ew-cp-row .ew-input {
    flex: 1;
    font-family: var(--ew-mono);
}

.ew-cp-intensity {
    grid-column: 1 / -1;
}

/* ---------- Popups, menus ---------- */

.ew-layer {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.ew-layer.ew-dim {
    background: color-mix(in srgb, black 45%, transparent);
    animation: ew-fade-in var(--ew-speed);
}

.ew-popup {
    position: fixed;
    z-index: 1001;
    min-width: 160px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: auto;
    background: var(--ew-bg-1);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    box-shadow: var(--ew-shadow);
    animation: ew-pop-in var(--ew-speed) ease-out;
    overscroll-behavior: contain;
}

.ew-menu {
    display: flex;
    flex-direction: column;
    padding: 6px;
}

.ew-menu-title {
    padding: 8px 12px 4px;
    color: var(--ew-muted);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ew-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--ew-touch);
    padding: 0 14px;
    border: 0;
    border-radius: calc(var(--ew-radius) - 2px);
    background: transparent;
    color: var(--ew-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.ew-menu-item:focus-visible {
    outline: 2px solid var(--ew-accent2);
    outline-offset: -2px;
}

@media (hover: hover) {
    .ew-menu-item:hover:not(:disabled) {
        background: var(--ew-bg-3);
    }
}

.ew-menu-item:active:not(:disabled) {
    background: var(--ew-accent1-soft);
}

.ew-menu-item:disabled {
    opacity: 0.4;
    cursor: default;
}

.ew-menu-item.ew-checked {
    color: var(--ew-accent1);
}

.ew-menu-item.ew-danger {
    color: var(--ew-danger);
}

.ew-menu-item .ew-menu-text {
    flex: 1;
}

.ew-menu-item .ew-menu-hint {
    color: var(--ew-faint);
    font-size: 0.85em;
}

.ew-menu-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--ew-line);
}

/* ---------- Dialogs ---------- */

.ew-dialog {
    position: fixed;
    z-index: 1001;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--ew-bg-1);
    border: 1px solid var(--ew-line);
    border-radius: calc(var(--ew-radius) + 4px);
    box-shadow: var(--ew-shadow);
    animation: ew-fade-in var(--ew-speed);
}

.ew-dialog.ew-wide {
    width: min(1100px, calc(100vw - 32px));
    height: calc(100vh - 64px);
}

.ew-dialog-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 12px 20px;
    border-bottom: 1px solid var(--ew-line);
    font-family: var(--ew-head);
    font-weight: var(--ew-head-weight);
    font-size: 1.2em;
}

.ew-dialog-head .ew-dialog-title {
    flex: 1;
}

.ew-dialog-body {
    padding: 16px 20px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.ew-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--ew-line);
}

.ew-dialog-body .ew-input {
    width: 100%;
}

/* ---------- Toasts ---------- */

.ew-toasts {
    position: fixed;
    z-index: 1100;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.ew-toast {
    padding: 10px 18px;
    border-radius: var(--ew-radius);
    background: var(--ew-bg-3);
    border: 1px solid var(--ew-line-strong);
    box-shadow: var(--ew-shadow);
    animation: ew-pop-in var(--ew-speed) ease-out;
    transition: opacity 300ms;
}

.ew-toast.ew-error {
    border-color: var(--ew-danger);
    background: color-mix(in oklab, var(--ew-bg-3), #ff4d4d 18%);
}

.ew-toast.ew-ok {
    border-color: var(--ew-accent2);
}

.ew-toast.ew-hide {
    opacity: 0;
}

/* ---------- Pager (Ew.Pager): a horizontal strip scrolled by pages, no scroll bar ---------- */

.ew-pager {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    min-width: 0;
}

.ew-pager-content {
    display: flex;
    height: 100%;
    width: max-content;
    min-width: 100%;
    transition: transform 360ms cubic-bezier(0.22, 0.8, 0.3, 1);
    will-change: transform;
}

.ew-pager.ew-dragging .ew-pager-content {
    transition: none;
}

/* ---------- Property editor (Ew.PropertyEditor) ---------- */

.ew-props {
    display: grid;
    grid-template-columns: minmax(90px, max-content) 1fr;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
}

.ew-prop-label {
    color: var(--ew-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
    user-select: none;
    -webkit-user-select: none;
}

.ew-prop-label.ew-modified {
    color: var(--ew-accent1-fg);
}

.ew-prop-value {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ew-prop-value .ew-slider {
    flex: 1;
}

.ew-prop-vec {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ew-prop-vec-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ew-prop-vec-row .ew-prop-comp {
    flex: none;
    width: 2.4em;
    text-align: right;
    color: var(--ew-faint);
    font-size: 0.85em;
}

/* ResetButtons: the reset to default button of a row (dimmed at the default) */
.ew-prop-reset {
    flex: none;
}

.ew-prop-reset.ew-at-default {
    opacity: 0.3;
}

/* Named components (Descs): name and description above the slider */
.ew-prop-vec-named {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ew-prop-vec-named + .ew-prop-vec-named {
    margin-top: 6px;
}

.ew-prop-vec-name {
    font-size: 0.9em;
    font-weight: 600;
}

.ew-prop-vec-desc {
    color: var(--ew-faint);
    font-size: 0.8em;
}

.ew-prop-group {
    grid-column: 1 / -1;
    padding: 12px 0 2px;
    color: var(--ew-faint);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--ew-line);
    margin-bottom: 4px;
}

/* ---------- Misc ---------- */

.ew-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ew-bg-3);
    color: var(--ew-muted);
    font-size: 0.8em;
}

.ew-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--ew-line);
    background: var(--ew-bg-2);
    color: var(--ew-muted);
    font: inherit;
    font-size: 0.9em;
    cursor: pointer;
    touch-action: manipulation;
}

.ew-chip[aria-pressed="true"] {
    border-color: var(--ew-accent2);
    background: var(--ew-accent2-soft);
    color: var(--ew-fg);
}

.ew-scroll {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ew-line) transparent;
}

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

@keyframes ew-pop-in {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ew-root * {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}

/* Disabled property rows (Ew.PropertyEditor.SetEnabled) */
.ew-prop-value.ew-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.ew-prop-label.ew-disabled {
    opacity: 0.5;
}

/* ---------- Tabs (Ew.Tabs) ---------- */

.ew-tabs {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.ew-tabs-head {
    display: flex;
    align-items: stretch;
    flex: none;
    min-width: 0;
    border-bottom: 1px solid var(--ew-line);
    background: var(--ew-bg-1);
}

.ew-tabs-strip {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.ew-tabs-strip::-webkit-scrollbar {
    display: none;
}

.ew-tabs-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    padding: 0 4px;
}

.ew-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    max-width: 260px;
    min-height: calc(var(--ew-touch) * 0.8);
    padding: 0 6px 0 12px;
    border-right: 1px solid var(--ew-line);
    color: var(--ew-muted);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    position: relative;
}

.ew-tab:not(:has(.ew-tab-close)) {
    padding-right: 12px;
}

.ew-tab .ew-icon {
    width: 1.1em;
    height: 1.1em;
}

.ew-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ew-tab.ew-active {
    background: var(--ew-bg);
    color: var(--ew-fg);
}

.ew-tab.ew-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--ew-accent1);
}

.ew-tab:focus-visible {
    outline: 2px solid var(--ew-accent2);
    outline-offset: -2px;
}

@media (hover: hover) {
    .ew-tab:hover:not(.ew-active) {
        background: var(--ew-bg-2);
        color: var(--ew-fg);
    }
}

.ew-tab-dirty {
    color: var(--ew-accent1);
    font-size: 0.8em;
}

.ew-tab-badge {
    min-width: 1.5em;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ew-bg-3);
    color: var(--ew-fg);
    font-size: 0.75em;
    text-align: center;
}

.ew-tab-badge.ew-error {
    background: var(--ew-danger);
    color: #fff;
}

.ew-tab-badge.ew-ok {
    background: var(--ew-accent2-soft);
}

.ew-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
}

.ew-tab-close .ew-icon {
    width: 14px;
    height: 14px;
}

.ew-tab-close:hover {
    opacity: 1;
    background: var(--ew-bg-3);
}

.ew-tabs-body {
    position: relative;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.ew-tabs-body > .ew-tab-content {
    position: absolute;
    inset: 0;
}

.ew-tab-content[hidden] {
    display: none !important;
}

.ew-tabs-small .ew-tab {
    min-height: calc(var(--ew-touch) * 0.7);
    font-size: 0.9em;
}

/* ---------- Split (Ew.Split) ---------- */

.ew-split {
    display: flex;
    min-width: 0;
    min-height: 0;
}

.ew-split-h {
    flex-direction: row;
}

.ew-split-v {
    flex-direction: column;
}

.ew-split-pane {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ew-split-pane[hidden], .ew-split-bar[hidden] {
    display: none !important;
}

.ew-split-bar {
    flex: none;
    position: relative;
    background: var(--ew-line);
    touch-action: none;
    z-index: 2;
}

.ew-split-h > .ew-split-bar {
    width: 1px;
    cursor: col-resize;
}

.ew-split-v > .ew-split-bar {
    height: 1px;
    cursor: row-resize;
}

/* A wider invisible grab area */
.ew-split-bar::before {
    content: "";
    position: absolute;
    inset: -4px;
}

.ew-split-bar:hover, .ew-split-dragging > .ew-split-bar {
    background: var(--ew-accent2);
}

.ew-split-dragging {
    user-select: none;
    -webkit-user-select: none;
}

.ew-split-dragging iframe, .ew-split-dragging canvas {
    pointer-events: none;
}

/* ---------- Code editor (Ew.CodeEditor, ew-code.js) ---------- */

.ew-code {
    --ew-code-lh: 20px;
    --ew-code-bg: var(--ew-bg-inset);
    --ew-code-c: color-mix(in oklab, var(--ew-fg), var(--ew-bg) 50%);
    --ew-code-k: var(--ew-accent1);
    --ew-code-t: var(--ew-accent2);
    --ew-code-f: color-mix(in oklab, var(--ew-accent2), #9be7a0 55%);
    --ew-code-v: color-mix(in oklab, #ffb454, var(--ew-fg) 15%);
    --ew-code-n: color-mix(in oklab, #f0a868, var(--ew-fg) 25%);
    --ew-code-p: color-mix(in oklab, #c792ea, var(--ew-fg) 15%);
    --ew-code-s: #f4c542;
    --ew-code-sc: #4fd8b0;
    --ew-code-u: color-mix(in oklab, #82aaff, var(--ew-fg) 25%);
    --ew-code-m: color-mix(in oklab, #ff9cac, var(--ew-fg) 30%);
    --ew-code-o: color-mix(in oklab, var(--ew-fg), var(--ew-bg) 20%);
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--ew-code-bg);
    color: var(--ew-fg);
    font-family: var(--ew-mono);
    font-size: var(--ew-mono-size);
    line-height: var(--ew-code-lh);
}

:root[data-ew-scheme="light"] .ew-code {
    --ew-code-f: color-mix(in oklab, var(--ew-accent2), #1b7f3a 55%);
    --ew-code-v: #a35a00;
    --ew-code-n: #b4530a;
    --ew-code-p: #7a3db8;
    --ew-code-s: #9a6400;
    --ew-code-sc: #0f7b5f;
    --ew-code-u: #2f5fb3;
    --ew-code-m: #b02a4a;
}

.ew-code-gutter {
    position: relative;
    flex: none;
    width: 50px;
    overflow: hidden;
    border-right: 1px solid var(--ew-line);
    background: var(--ew-bg-1);
    color: var(--ew-faint);
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

.ew-code-gutter-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.ew-code-num {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--ew-code-lh);
    padding: 0 10px 0 14px;
    text-align: right;
}

.ew-code-num.ew-cur {
    color: var(--ew-fg);
}

.ew-code-num.ew-error::before, .ew-code-num.ew-warning::before {
    content: "";
    position: absolute;
    left: 4px;
    top: calc(var(--ew-code-lh) / 2 - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ew-danger);
}

.ew-code-num.ew-warning::before {
    background: #e0a030;
}

.ew-code-num.ew-error {
    color: var(--ew-danger);
    cursor: pointer;
}

.ew-code-main {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ew-code-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 6px 12px 40vh 10px;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: transparent;
    caret-color: var(--ew-fg);
    font: inherit;
    line-height: var(--ew-code-lh);
    letter-spacing: 0;
    tab-size: 4;
    white-space: pre;
    overflow: auto;
    z-index: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--ew-line-strong) transparent;
}

.ew-code-input::selection {
    background: color-mix(in srgb, var(--ew-accent2) 32%, transparent);
    color: transparent;
}

.ew-code-input::placeholder {
    color: var(--ew-faint);
}

.ew-code-readonly .ew-code-input {
    caret-color: transparent;
}

.ew-code-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    white-space: pre;
    tab-size: 4;
    pointer-events: none;
    will-change: transform;
}

.ew-code-measure {
    position: absolute;
    visibility: hidden;
    white-space: pre;
    left: 0;
    top: 0;
}

.ew-code-line {
    position: absolute;
    height: var(--ew-code-lh);
}

.ew-code-cur, .ew-code-mark {
    position: absolute;
    left: 0;
    width: 100000px;
    height: var(--ew-code-lh);
    background: color-mix(in srgb, var(--ew-fg) 6%, transparent);
}

.ew-code-cur.ew-blur {
    background: color-mix(in srgb, var(--ew-fg) 3%, transparent);
}

.ew-code-mark.ew-error {
    background: color-mix(in srgb, var(--ew-danger) 16%, transparent);
}

.ew-code-mark.ew-warning {
    background: color-mix(in srgb, #e0a030 14%, transparent);
}

.ew-code-msg {
    position: absolute;
    height: var(--ew-code-lh);
    padding: 0 8px;
    border-radius: 4px;
    color: var(--ew-danger);
    font-family: var(--ew-sans);
    font-size: 0.92em;
    opacity: 0.9;
}

.ew-code-msg.ew-warning {
    color: #e0a030;
}

.ew-code-match, .ew-code-bracket {
    position: absolute;
    height: var(--ew-code-lh);
    border-radius: 2px;
}

.ew-code-match {
    background: color-mix(in srgb, #ffd866 28%, transparent);
}

.ew-code-match.ew-current {
    background: color-mix(in srgb, #ffd866 50%, transparent);
    outline: 1px solid #ffd866;
}

.ew-code-bracket {
    outline: 1px solid var(--ew-line-strong);
    background: color-mix(in srgb, var(--ew-accent2) 18%, transparent);
}

.ew-code-bracket.ew-unmatched {
    outline-color: var(--ew-danger);
    background: var(--ew-danger-soft);
}

.ew-code .c { color: var(--ew-code-c); font-style: italic; }
.ew-code .k { color: var(--ew-code-k); }
.ew-code .t { color: var(--ew-code-t); }
.ew-code .f { color: var(--ew-code-f); }
.ew-code .v { color: var(--ew-code-v); }
.ew-code .n { color: var(--ew-code-n); }
.ew-code .p { color: var(--ew-code-p); }
.ew-code .s { color: var(--ew-code-s); font-weight: 600; }
.ew-code .sc { color: var(--ew-code-sc); font-weight: 600; }
.ew-code .sx { color: var(--ew-code-s); text-decoration: wavy underline var(--ew-danger); text-underline-offset: 3px; }
.ew-code .u { color: var(--ew-code-u); }
.ew-code .m { color: var(--ew-code-m); }
.ew-code .o { color: var(--ew-code-o); }
.ew-code .q { color: var(--ew-code-n); }
.ew-code .h { color: var(--ew-code-k); font-weight: 600; }
.ew-code .b { font-weight: 700; }
.ew-code .i { font-style: italic; }
.ew-code .l { color: var(--ew-code-t); }

/* Find / replace bar */
.ew-code-find {
    position: absolute;
    top: 4px;
    right: 18px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--ew-line-strong);
    border-radius: var(--ew-radius);
    background: var(--ew-bg-2);
    box-shadow: var(--ew-shadow);
    font-family: var(--ew-sans);
    font-size: var(--ew-size);
    line-height: normal;
}

.ew-code-find[hidden], .ew-code-find-row[hidden] {
    display: none;
}

.ew-code-find-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ew-code-find-input {
    width: 220px;
    min-height: 30px;
    font-family: var(--ew-mono);
    font-size: var(--ew-mono-size);
}

.ew-code-find-input.ew-invalid {
    border-color: var(--ew-danger);
}

.ew-code-find .ew-button.ew-small {
    min-height: 30px;
    min-width: 30px;
    padding: 0 6px;
}

.ew-code-find-opt {
    font-family: var(--ew-mono);
    font-size: 0.8em !important;
}

.ew-code-find-count {
    min-width: 70px;
    padding: 0 6px;
    color: var(--ew-muted);
    font-size: 0.85em;
    text-align: center;
    white-space: nowrap;
}

/* Completion list */
.ew-code-complete {
    position: absolute;
    z-index: 6;
    min-width: 220px;
    max-width: 520px;
    max-height: 260px;
    padding: 3px;
    border: 1px solid var(--ew-line-strong);
    border-radius: 6px;
    background: var(--ew-bg-2);
    box-shadow: var(--ew-shadow);
}

.ew-code-complete[hidden] {
    display: none;
}

.ew-code-complete-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.ew-code-complete-item.ew-active {
    background: var(--ew-accent2-soft);
}

.ew-code-complete-text {
    flex: none;
}

.ew-code-complete-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ew-muted);
    font-size: 0.9em;
}

.ew-code-ck {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: var(--ew-bg-3);
    color: var(--ew-muted);
    font-family: var(--ew-sans);
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

.ew-ck-keyword { color: var(--ew-code-k); }
.ew-ck-type { color: var(--ew-code-t); }
.ew-ck-function { color: var(--ew-code-f); }
.ew-ck-variable { color: var(--ew-code-v); }
.ew-ck-snippet { color: var(--ew-code-s); }
.ew-ck-constant { color: var(--ew-code-sc); }
.ew-ck-directive { color: var(--ew-code-p); }

/* Hover information (CodeEditor option Hover) */
.ew-code-hover {
    position: absolute;
    z-index: 7;
    max-width: min(620px, 90%);
    max-height: 340px;
    padding: 8px 10px;
    border: 1px solid var(--ew-line-strong);
    border-radius: 6px;
    background: var(--ew-bg-2);
    box-shadow: var(--ew-shadow);
    font-family: var(--ew-sans);
    font-size: var(--ew-size);
    line-height: 1.4;
}

.ew-code-hover[hidden] {
    display: none;
}