/*
 * Windows 95 / MS Paint chrome.
 *
 * The bevels are the whole visual system: every raised surface is a 2px border
 * of white/grey/black in a fixed order, and every pressed surface inverts it.
 * Getting that one detail right is what makes the rest read as authentic.
 */

:root {
    --chrome: #c0c0c0;
    --chrome-light: #ffffff;
    --chrome-mid: #dfdfdf;
    --chrome-shadow: #808080;
    --chrome-dark: #000000;
    --titlebar: #000080;
    --titlebar-text: #ffffff;
    --canvas: #ffffff;
    --ink: #000000;
    --alert: #aa0000;

    /* 11px Tahoma is the actual Windows 95 UI metric, not an approximation. */
    --ui-font: Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif;
    --ui-size: 11px;
}

* { box-sizing: border-box; }

/* Author styles beat the UA sheet at equal specificity, so any rule setting
 * `display` silently defeats the hidden attribute. This keeps hidden meaning
 * hidden for .dialog-backdrop, .menu-dropdown and .menu-item alike. */
[hidden] { display: none !important; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    /* The Win95 desktop teal, so the window reads as a window. */
    background: #008080;
    font-family: var(--ui-font);
    font-size: var(--ui-size);
    color: var(--ink);
    -webkit-font-smoothing: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Raised and pressed are used everywhere; defined once. */
.raised {
    border-top: 1px solid var(--chrome-light);
    border-left: 1px solid var(--chrome-light);
    border-right: 1px solid var(--chrome-dark);
    border-bottom: 1px solid var(--chrome-dark);
    box-shadow: inset -1px -1px 0 var(--chrome-shadow), inset 1px 1px 0 var(--chrome-mid);
}

.sunken {
    border-top: 1px solid var(--chrome-shadow);
    border-left: 1px solid var(--chrome-shadow);
    border-right: 1px solid var(--chrome-light);
    border-bottom: 1px solid var(--chrome-light);
    box-shadow: inset 1px 1px 0 var(--chrome-dark);
}

.window {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--chrome);
    border-top: 2px solid var(--chrome-light);
    border-left: 2px solid var(--chrome-light);
    border-right: 2px solid var(--chrome-dark);
    border-bottom: 2px solid var(--chrome-dark);
}

/* --- title bar --- */

.titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 2px 2px 4px;
    margin: 2px;
    background: var(--titlebar);
    color: var(--titlebar-text);
    font-weight: bold;
    flex: 0 0 auto;
}

.titlebar-text {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.titlebar-icon { font-size: 12px; }

.titlebar-buttons { display: flex; gap: 2px; }

.titlebar-button {
    width: 18px;
    height: 16px;
    display: grid;
    place-items: center;
    background: var(--chrome);
    color: var(--ink);
    font-size: 9px;
    font-family: var(--ui-font);
    border-top: 1px solid var(--chrome-light);
    border-left: 1px solid var(--chrome-light);
    border-right: 1px solid var(--chrome-dark);
    border-bottom: 1px solid var(--chrome-dark);
}

/* --- menu bar --- */

.menubar {
    position: relative;
    display: flex;
    gap: 2px;
    padding: 1px 2px 2px;
    flex: 0 0 auto;
    z-index: 20;
}

.menu-trigger {
    font: inherit;
    background: none;
    border: 1px solid transparent;
    padding: 2px 7px;
    cursor: default;
    color: var(--ink);
}

.menu-trigger:hover,
.menu-trigger[aria-expanded="true"] {
    background: var(--titlebar);
    color: var(--titlebar-text);
}

.menu-dropdown {
    position: absolute;
    top: 100%;
    left: 2px;
    min-width: 170px;
    padding: 2px;
    background: var(--chrome);
    border-top: 1px solid var(--chrome-light);
    border-left: 1px solid var(--chrome-light);
    border-right: 1px solid var(--chrome-dark);
    border-bottom: 1px solid var(--chrome-dark);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35), inset -1px -1px 0 var(--chrome-shadow);
}

#helpMenu { left: 44px; }

.menu-item {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    padding: 4px 8px;
    cursor: default;
    color: var(--ink);
}

.menu-item:hover:not(.menu-item-disabled) {
    background: var(--titlebar);
    color: var(--titlebar-text);
}

.menu-item-disabled { color: var(--chrome-shadow); }

.menu-hint { color: var(--chrome-shadow); }
.menu-item:hover .menu-hint { color: var(--chrome-mid); }

.menu-separator {
    height: 1px;
    margin: 3px 2px;
    border-top: 1px solid var(--chrome-shadow);
    border-bottom: 1px solid var(--chrome-light);
}

/* --- workspace --- */

.workspace {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    padding: 0 2px;
    gap: 2px;
}

.toolbox {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 54px;
}




.size-picker {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px;
    background: var(--chrome);
    border-top: 1px solid var(--chrome-shadow);
    border-left: 1px solid var(--chrome-shadow);
    border-right: 1px solid var(--chrome-light);
    border-bottom: 1px solid var(--chrome-light);
}

.size {
    display: grid;
    place-items: center;
    height: 18px;
    background: var(--canvas);
    border: 0;
    cursor: default;
}

.size i {
    display: block;
    width: 70%;
    background: var(--ink);
    border-radius: 1px;
}

.size[aria-checked="true"] { background: var(--titlebar); }
.size[aria-checked="true"] i { background: var(--titlebar-text); }

.canvas-frame {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    background: var(--canvas);
    border-top: 1px solid var(--chrome-shadow);
    border-left: 1px solid var(--chrome-shadow);
    border-right: 1px solid var(--chrome-light);
    border-bottom: 1px solid var(--chrome-light);
    box-shadow: inset 1px 1px 0 var(--chrome-dark);
    overflow: hidden;
}

#mainCanvas {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--canvas);
    cursor: crosshair;
    touch-action: none;
}

/* --- palette --- */

.palette-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 2px;
}

.current-color {
    padding: 3px;
    background: var(--chrome);
    border-top: 1px solid var(--chrome-shadow);
    border-left: 1px solid var(--chrome-shadow);
    border-right: 1px solid var(--chrome-light);
    border-bottom: 1px solid var(--chrome-light);
}

.current-color-swatch {
    display: block;
    width: 24px;
    height: 24px;
    background: #000;
    border: 1px solid var(--chrome-dark);
}

.palette {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: 1px;
}

.swatch {
    width: 16px;
    height: 16px;
    padding: 0;
    cursor: default;
    border-top: 1px solid var(--chrome-shadow);
    border-left: 1px solid var(--chrome-shadow);
    border-right: 1px solid var(--chrome-light);
    border-bottom: 1px solid var(--chrome-light);
}

.swatch[aria-checked="true"] { outline: 2px solid var(--titlebar); outline-offset: -1px; }

/* --- status bar --- */

.statusbar {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    padding: 2px;
}

.status-cell {
    padding: 2px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid var(--chrome-shadow);
    border-left: 1px solid var(--chrome-shadow);
    border-right: 1px solid var(--chrome-light);
    border-bottom: 1px solid var(--chrome-light);
}

.status-grow { flex: 1 1 auto; min-width: 0; }

.status-disconnected { color: var(--alert); font-weight: bold; }

/* --- notifications --- */

.notification-area {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    pointer-events: none;
}

.notification {
    padding: 4px 10px;
    background: var(--chrome);
    border-top: 1px solid var(--chrome-light);
    border-left: 1px solid var(--chrome-light);
    border-right: 1px solid var(--chrome-dark);
    border-bottom: 1px solid var(--chrome-dark);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.15s;
}

.notification.visible { opacity: 1; }
.notification.error { color: var(--alert); font-weight: bold; }

/* --- dialog --- */

.dialog-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.25);
    z-index: 40;
    padding: 16px;
}

.dialog {
    width: min(360px, 100%);
    background: var(--chrome);
    border-top: 2px solid var(--chrome-light);
    border-left: 2px solid var(--chrome-light);
    border-right: 2px solid var(--chrome-dark);
    border-bottom: 2px solid var(--chrome-dark);
}

.dialog-body { padding: 12px; }
.dialog-body p { margin: 0 0 10px; line-height: 1.5; }

.button {
    font: inherit;
    min-width: 76px;
    padding: 5px 12px;
    background: var(--chrome);
    color: var(--ink);
    cursor: default;
    border-top: 1px solid var(--chrome-light);
    border-left: 1px solid var(--chrome-light);
    border-right: 1px solid var(--chrome-dark);
    border-bottom: 1px solid var(--chrome-dark);
    box-shadow: inset -1px -1px 0 var(--chrome-shadow);
}

.button:active {
    border-top: 1px solid var(--chrome-shadow);
    border-left: 1px solid var(--chrome-shadow);
    border-right: 1px solid var(--chrome-light);
    border-bottom: 1px solid var(--chrome-light);
    box-shadow: none;
}

/* Keyboard users get the dotted Win95 focus ring; pointer users get nothing. */
:focus { outline: none; }
:focus-visible { outline: 1px dotted var(--ink); outline-offset: -3px; }

/* --- phones: the toolbox moves under the thumb --- */

@media (max-width: 640px), (pointer: coarse) and (max-width: 900px) {
    .workspace { flex-direction: column-reverse; }

    .toolbox {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 8px;
        width: auto;
        padding: 4px 0 2px;
    }




    .size-picker { flex-direction: row; align-items: center; }
    .size { width: 34px; height: 34px; }

    .palette { grid-template-rows: repeat(2, 1fr); flex: 1 1 auto; }
    .swatch { width: 100%; min-width: 22px; height: 22px; }
    .palette-bar { gap: 4px; }

    /* Two cells is all that fits; the rest lives in the About dialog. */
    #fadeStatus, .status-grow { display: none; }
}

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