/* skin-preview.css - KEEP IN SYNC: index.html SKIN CSS block (search that file for the same
   banner). Copied verbatim - same selectors, same html.skin-<name> gating - so skin-maker.html's
   live preview renders identically to the real app for whatever pieces are currently loaded.
   Piece bytes never enter this file as text; --skin-<name> is always a blob: URL set from JS.
   NORMAL pieces first, then the generic hover-brightness filter, then ACTIVATED (.on) pieces
   LAST so :active/.btn-pressed/:checked/:focus beat :hover when both apply at once. */

html.skin-window body {
    background: var(--skin-window) center / cover no-repeat fixed;
}

html.skin-panel .panel {
    background-color: transparent;
    border-style: solid; border-color: transparent;
    border-radius: 0; box-shadow: none;
    border-image: var(--skin-panel) 24 24 24 24 fill / 12px stretch;
}
html.skin-panel-header .panel-header {
    background-color: transparent;
    border-style: solid; border-color: transparent;
    border-bottom: none;
    border-radius: 0; box-shadow: none;
    border-image: var(--skin-panel-header) 16 24 16 24 fill / 8px 12px 8px 12px stretch;
}
html.skin-modal .modal-box {
    background-color: transparent;
    border-style: solid; border-color: transparent;
    border-radius: 0; box-shadow: none;
    border-image: var(--skin-modal) 24 24 24 24 fill / 12px stretch;
}
html.skin-modal-header .modal-header {
    background-color: transparent;
    border-style: solid; border-color: transparent;
    border-bottom: none;
    border-radius: 0; box-shadow: none;
    border-image: var(--skin-modal-header) 16 24 16 24 fill / 8px 12px 8px 12px stretch;
}

html.skin-button button:not(.btn-accent):not(.btn-red):not(.panel-btn):not(.close-btn) {
    background-color: transparent;
    border-style: solid; border-color: transparent;
    border-radius: 0; box-shadow: none;
    border-image: var(--skin-button) 16 16 16 16 fill / 8px stretch;
}
html.skin-button-accent .btn-accent {
    background-color: transparent;
    border-style: solid; border-color: transparent;
    border-radius: 0; box-shadow: none;
    border-image: var(--skin-button-accent) 16 16 16 16 fill / 8px stretch;
}
html.skin-button-danger .btn-red {
    background-color: transparent;
    border-style: solid; border-color: transparent;
    border-radius: 0; box-shadow: none;
    border-image: var(--skin-button-danger) 16 16 16 16 fill / 8px stretch;
}
html.skin-button-small .panel-btn, html.skin-button-small .close-btn {
    background-color: transparent;
    background-image: var(--skin-button-small);
    background-size: 100% 100%;
    border-style: solid; border-color: transparent;
    border-radius: 0; box-shadow: none;
}
html.skin-field input[type="number"], html.skin-field input[type="text"], html.skin-field select {
    background-color: transparent;
    border-style: solid; border-color: transparent;
    border-radius: 0; box-shadow: none;
    border-image: var(--skin-field) 12 12 12 12 fill / 6px stretch;
}
html.skin-switch .switch .slider {
    background-color: transparent;
    background-image: var(--skin-switch);
    background-size: 100% 100%;
    border-radius: 0;
}
html.skin-switch-knob .switch .slider::before {
    background-color: transparent;
    background-image: var(--skin-switch-knob);
    background-size: 100% 100%;
    border-radius: 0;
}
html.skin-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin: 0;
    background-color: transparent;
    background-image: var(--skin-radio);
    background-size: 100% 100%;
}
html.skin-scroll-track ::-webkit-scrollbar-track {
    background-image: var(--skin-scroll-track);
    background-size: 100% 100%;
}
html.skin-scroll-thumb ::-webkit-scrollbar-thumb {
    background-image: var(--skin-scroll-thumb);
    background-size: 100% 100%;
    border-radius: 0;
}

/* Generic hover: no drawn hover pieces any more, just brightness on whatever piece is showing.
   Excludes .btn-pressed, which keeps its own existing hover rule instead of brightening. */
html.skin-button button:not(.btn-accent):not(.btn-red):not(.panel-btn):not(.close-btn):hover:not(:disabled):not(.btn-pressed) {
    filter: brightness(1.12);
    color: var(--text-color);
}
html.skin-button-accent .btn-accent:hover:not(:disabled):not(.btn-pressed) {
    filter: brightness(1.12);
    color: var(--on-accent);
}
html.skin-button-danger .btn-red:hover:not(:disabled):not(.btn-pressed) {
    filter: brightness(1.12);
    color: var(--text-color);
}
html.skin-button-small .panel-btn:hover, html.skin-button-small .close-btn:hover {
    filter: brightness(1.12);
}
html.skin-field input[type="number"]:hover, html.skin-field input[type="text"]:hover, html.skin-field select:hover {
    filter: brightness(1.12);
}
html.skin-switch .switch:hover .slider {
    filter: brightness(1.12);
}
html.skin-radio input[type="radio"]:hover {
    filter: brightness(1.12);
}
html.skin-scroll-thumb ::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.12);
}

/* ACTIVATED (.on) pieces - pressed / on / focused. Placed LAST so :active, .btn-pressed,
   :checked and :focus beat the hover filter above. */
html.skin-button-on button:not(.btn-accent):not(.btn-red):not(.panel-btn):not(.close-btn):active:not(:disabled),
html.skin-button-on button:not(.btn-accent):not(.btn-red):not(.panel-btn):not(.close-btn).btn-pressed {
    border-image: var(--skin-button-on) 16 16 16 16 fill / 8px stretch;
    box-shadow: none; filter: none;
    color: var(--text-color);
}
html.skin-button-accent-on .btn-accent:active:not(:disabled),
html.skin-button-accent-on .btn-accent.btn-pressed {
    border-image: var(--skin-button-accent-on) 16 16 16 16 fill / 8px stretch;
    box-shadow: none; filter: none;
    color: var(--on-accent);
}
html.skin-button-danger-on .btn-red:active:not(:disabled),
html.skin-button-danger-on .btn-red.btn-pressed {
    border-image: var(--skin-button-danger-on) 16 16 16 16 fill / 8px stretch;
    box-shadow: none; filter: none;
    color: var(--text-color);
}
html.skin-button-small-on .panel-btn:active, html.skin-button-small-on .close-btn:active {
    background-image: var(--skin-button-small-on);
    background-size: 100% 100%;
}
html.skin-field-on input[type="number"]:focus, html.skin-field-on input[type="text"]:focus, html.skin-field-on select:focus {
    border-image: var(--skin-field-on) 12 12 12 12 fill / 6px stretch;
    outline: none;
}
html.skin-switch-on .switch input:checked + .slider {
    background-image: var(--skin-switch-on);
    background-size: 100% 100%;
}
html.skin-switch-knob-on .switch input:checked + .slider::before {
    background-image: var(--skin-switch-knob-on);
    background-size: 100% 100%;
}
html.skin-radio-on input[type="radio"]:checked {
    background-image: var(--skin-radio-on);
    background-size: 100% 100%;
}
html.skin-scroll-thumb-on ::-webkit-scrollbar-thumb:active {
    background-image: var(--skin-scroll-thumb-on);
    background-size: 100% 100%;
}