/*
 * Minecraft Texture Maker - page styles, modeled on minecraft.net:
 * Noto Sans text, pixel-font headings, warm off-black backgrounds, square corners,
 * and chunky "3D" buttons/panels made with inset light (top) and dark (bottom) edges.
 */

/* ---------- Fonts ---------- */
@font-face {
    font-family: "Minecraft Ten";
    src: url("fonts/MinecraftTen-VGORe.ttf") format("truetype");
    font-display: swap;
    /* The font file reserves empty space under its capital letters, which made titles sit too low.
       These overrides make the text box exactly as tall as the letters, so they center properly. */
    ascent-override: 73%;
    descent-override: 0%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Mojangles"; /* by Olek Molek, see fonts/mojangles-readme.txt and mojangles-license.txt */
    src: url("fonts/mojangles.otf") format("opentype");
    font-display: swap;
}

/* ---------- Color and font tokens (values measured from minecraft.net) ---------- */
:root {
    --page-background: #171615;     /* off-black sections */
    --panel-background: #262423;    /* header, cards, inputs */
    --raised-background: #3d3938;   /* article cards, accordion bars */
    --raised-highlight: #6b6562;    /* light bevel edge */
    --bevel-dark: #000000;          /* dark bevel edge */
    --input-border: #898481;
    --text: #ede5e2;
    --text-muted: #aba09c;
    --text-soft: #d0c5c0;
    --green: #3c8527;
    --green-light: #52a535;
    --green-dark: #2a641c;
    --green-text: #6cc349;
    --gold: #ffa41f;
    --gold-light: #ffd953;
    --gold-dark: #ff791a;
    --error: #ff6b5e;
    --checker-one: #ffffff;
    --checker-two: #cccccc;
    /* Pixel fonts from app/fonts. Characters a font doesn't have (like % or ×) fall back to Noto Sans. */
    --font-title: "Minecraft Ten", "Noto Sans", sans-serif;   /* titles: app name, panel names, section names */
    --font-small: "Mojangles", "Noto Sans", sans-serif;       /* small pixel text: status numbers, captions */
    /* Pixel fonts look sharpest at these sizes: Mojangles 12 or 16px; Minecraft Ten 16, 20 or 24px. */
    --font-text: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bevel-size: 4px;
}

* { box-sizing: border-box; }

/* Make the "hidden" attribute win over display rules below. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--page-background);
    color: var(--text);
    font: 14px/1.45 var(--font-text);
    overflow: hidden; /* the page never scrolls; only the knob panel (and left column if needed) does */
}

/* ---------- App frame: header, toolbar, workspace, status bar ---------- */
.app {
    display: grid;
    grid-template-rows: 58px auto minmax(0, 1fr) 30px;
    height: 100vh;
}

.menu-bar {
    display: flex; align-items: center; gap: 14px; padding: 0 20px;
    background: var(--panel-background);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
    position: relative; z-index: 1;
}
/* Small grass-block icon drawn with CSS */
.app-icon {
    width: 26px; height: 26px; flex-shrink: 0;
    background:
        linear-gradient(#5aa83a 0 38%, #3c8527 38% 50%, transparent 50%),
        #8b5a2b;
    box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.35), inset 3px 3px 0 rgba(255, 255, 255, 0.18);
}
.app-title { font-family: var(--font-title); font-size: 24px; text-transform: uppercase; color: #ffffff; line-height: 1; }

/* "Open Image" looks like minecraft.net's green outline button */
.menu-button {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
    border: 2px solid var(--green); color: var(--green-text);
    font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
}
.menu-button:hover, .menu-button:focus-visible { background: rgba(60, 133, 39, 0.15); outline: none; }

.options-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 20px; background: var(--page-background);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}
.option-field { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--text-soft); }
.option-label { font-weight: 600; font-size: 13px; color: var(--text-soft); }
.bar-divider { width: 2px; height: 26px; background: var(--raised-background); }
.bar-spacer { flex: 1; }
#filename-input { width: 190px; }

.workspace {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    gap: 12px; padding: 12px; min-height: 0;
}

.status-bar {
    display: flex; align-items: center; gap: 12px; padding: 0 20px;
    background: var(--panel-background); box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.25);
    color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden;
}
#status-zoom, #texture-stats { font-family: var(--font-small); font-size: 12px; color: var(--text-soft); }
.status-divider { width: 2px; height: 14px; background: var(--raised-background); }
#status-message { overflow: hidden; text-overflow: ellipsis; }
#status-message.error { color: var(--error); }

/* ---------- Form controls (minecraft.net input style) ---------- */
input[type="text"], input[type="number"], input[type="email"], input[type="password"], .dialog-form input, select {
    background: var(--panel-background); color: var(--text);
    border: 2px solid var(--input-border); border-radius: 0;
    box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.5);
    padding: 5px 8px 3px; font: inherit; font-size: 13px; height: 34px; min-width: 0;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, .dialog-form input:focus, select:focus { outline: none; border-color: var(--text); }
select { cursor: pointer; }
input[type="checkbox"] { accent-color: var(--green); width: 16px; height: 16px; margin: 0; cursor: pointer; }
button { font: inherit; cursor: pointer; }

/* Chunky 3D buttons: light edge on top, dark edge on the bottom */
.bar-button, .accent-button {
    height: 36px; padding: 0 16px; border: 2px solid #000000; border-radius: 0;
    font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em;
}
.bar-button {
    background: var(--raised-background); color: var(--text);
    box-shadow: inset 0 -4px 0 #262423, inset 0 4px 0 var(--raised-highlight);
}
.bar-button:hover { background: #4a4543; }
.accent-button {
    background: var(--green); color: #ffffff;
    box-shadow: inset 0 -4px 0 var(--green-dark), inset 0 4px 0 var(--green-light);
}
.accent-button:hover { background: #46992e; }
.bar-button:active, .accent-button:active { box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.35); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.segmented { display: inline-flex; border: 2px solid #000000; }
.segmented button {
    height: 32px; padding: 0 12px; border: none; background: var(--raised-background); color: var(--text);
    font-weight: 700; font-size: 12px; text-transform: uppercase;
    box-shadow: inset 0 -3px 0 #262423, inset 0 3px 0 var(--raised-highlight);
}
.segmented button + button { border-left: 2px solid #000000; }
.segmented button:hover { background: #4a4543; }
.segmented button.active {
    background: var(--green); color: #ffffff;
    box-shadow: inset 0 -3px 0 var(--green-dark), inset 0 3px 0 var(--green-light);
}

.full-width { width: 100%; }
.muted { color: var(--text-muted); font-size: 12px; margin: 10px 0 0; }

/* ---------- Cards (side columns and canvas area) ---------- */
.side-column { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.right-column { overflow: hidden; }

/* Panels use minecraft.net's bevel: light top/left edge, black bottom/right edge */
.panel {
    background: var(--panel-background); flex-shrink: 0;
    box-shadow:
        inset 0 var(--bevel-size) 0 var(--raised-background),
        inset var(--bevel-size) 0 0 var(--raised-background),
        inset 0 calc(-1 * var(--bevel-size)) 0 var(--bevel-dark),
        inset calc(-1 * var(--bevel-size)) 0 0 var(--bevel-dark);
}
.panel-tabs { padding: 14px 16px 0; }
/* Panel titles: plain gray block-font text */
.panel-tab {
    display: inline-block; color: var(--text-soft);
    font-family: var(--font-title); font-size: 16px; line-height: 1.3; text-transform: uppercase;
}
.panel-body { padding: 12px 16px 16px; }

/* Only the knob list scrolls, so the canvas always stays visible. */
.knobs-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.knobs-panel .panel-tabs { padding-bottom: 12px; }
.knob-scroll {
    flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 12px 16px;
    margin: 0 var(--bevel-size) var(--bevel-size) var(--bevel-size);
    background: #1f1d1c;
    box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.5); /* sunken edge so it's clear the list scrolls under it */
}

/* Blocky scrollbars */
.side-column::-webkit-scrollbar, .knob-scroll::-webkit-scrollbar { width: 12px; }
.side-column::-webkit-scrollbar-thumb, .knob-scroll::-webkit-scrollbar-thumb {
    background: var(--raised-highlight); border: 2px solid #000000;
    box-shadow: inset 2px 2px 0 #8f8783, inset -2px -2px 0 #4a4543;
}
.side-column::-webkit-scrollbar-track, .knob-scroll::-webkit-scrollbar-track { background: var(--page-background); }

/* ---------- Source panel ---------- */
.drop-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 130px; padding: 10px; text-align: center; cursor: pointer;
    background: var(--page-background); border: 2px dashed var(--input-border);
}
.drop-zone:hover, .drop-zone.dragging, .drop-zone:focus-visible { border-color: var(--green-text); outline: none; }
.drop-zone-text { display: flex; flex-direction: column; gap: 2px; }
.drop-zone-text strong { font-family: var(--font-title); font-weight: 400; font-size: 16px; color: #ffffff; text-transform: uppercase; }
.drop-zone-text span { color: var(--text-muted); font-size: 12px; }
.drop-zone.has-image .drop-zone-text strong { display: none; }
.source-preview { width: 100%; display: flex; justify-content: center; }
.source-preview img { max-width: 100%; max-height: 170px; display: block; }
/* Minecraft-style uploads are shown big with sharp pixels. */
.source-preview img.pixel-art { width: 128px; height: 128px; max-height: none; image-rendering: pixelated; }

/* Shape mode: the 3D shape, turned by dragging (it replaces the drop zone) */
.shape-view { background: var(--page-background); border: 2px solid var(--input-border); }
.shape-view canvas { display: block; width: 100%; aspect-ratio: 1; cursor: grab; touch-action: none; }
.shape-view canvas:active { cursor: grabbing; }

/* ---------- Checkerboard / preview backgrounds ---------- */
.checker-background {
    background-color: var(--checker-one);
    background-image:
        linear-gradient(45deg, var(--checker-two) 25%, transparent 25%, transparent 75%, var(--checker-two) 75%),
        linear-gradient(45deg, var(--checker-two) 25%, transparent 25%, transparent 75%, var(--checker-two) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}
.big-preview.background-slot { background: #8b8b8b; }
.big-preview.background-dark { background: #1b1b1b; }
.big-preview.background-light { background: #f2f2f2; }

/* ---------- Center canvas area ---------- */
.canvas-area { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.document-tabs { flex-shrink: 0; padding: 14px 16px 0; }
.document-tab {
    display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-title); font-size: 16px; line-height: 1.3; text-transform: uppercase;
    color: var(--text-soft);
}

/* The stage is a size container so the canvas can fit both its width and height. */
.stage { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; padding: 20px 28px 28px; }
/* --preview-count (set by ui.js) = how many textures are shown side by side (Ore mode shows 2). */
.big-preview {
    position: relative; aspect-ratio: var(--preview-count, 1) / 1;
    width: min(100cqw, calc(100cqh * var(--preview-count, 1)));
    /* Framed like a Minecraft inventory slot: dark top/left, light bottom/right */
    box-shadow: 0 0 0 4px #000000, -4px -4px 0 4px #373737, 4px 4px 0 4px #8f8783;
}
.big-preview canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.empty-message {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 20px;
    font-family: var(--font-title); font-size: 20px; text-transform: uppercase; text-align: center;
    color: #6b6562; pointer-events: none;
}

/* ---------- Navigator panel ---------- */
.pixelated { image-rendering: pixelated; display: block; }
.scale-2 { width: 32px; height: 32px; }
.scale-3 { width: 48px; height: 48px; }
.scale-4 { width: 64px; height: 64px; }

.small-previews { display: flex; gap: 16px; align-items: flex-end; justify-content: center; margin-bottom: 12px; }
.small-previews figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.small-previews figcaption { font-family: var(--font-small); font-size: 12px; color: var(--text-muted); }

/* Minecraft inventory look: light grey panel with a sunken slot */
.inventory-mock { background: #c6c6c6; padding: 5px; box-shadow: inset 2px 2px 0 #ffffff, inset -2px -2px 0 #555555; }
.inventory-slot {
    width: 54px; height: 54px; background: #8b8b8b; display: flex; align-items: center; justify-content: center;
    border-top: 3px solid #373737; border-left: 3px solid #373737; border-bottom: 3px solid #ffffff; border-right: 3px solid #ffffff;
}

/* ---------- Vanilla item picker (search box with a drop-down list) ---------- */
.reference-picker { position: relative; }
#compare-search { padding-left: 10px; }
.picker-options {
    position: fixed; z-index: 50; margin: 0; padding: 4px 0; list-style: none; overflow-y: auto;
    background: var(--panel-background); border: 2px solid #000000;
    box-shadow: inset 0 4px 0 var(--raised-background), 0 6px 0 rgba(0, 0, 0, 0.35);
}
.picker-options::-webkit-scrollbar { width: 12px; }
.picker-options::-webkit-scrollbar-thumb {
    background: var(--raised-highlight); border: 2px solid #000000;
    box-shadow: inset 2px 2px 0 #8f8783, inset -2px -2px 0 #4a4543;
}
.picker-options::-webkit-scrollbar-track { background: var(--page-background); }
.picker-heading { padding: 8px 10px 2px; font-family: var(--font-small); font-size: 12px; color: var(--text-muted); }
.picker-empty { padding: 10px; font-family: var(--font-text); font-size: 13px; }
.picker-option { display: flex; align-items: center; gap: 10px; padding: 3px 10px; cursor: pointer; font-size: 13px; }
.picker-option img, .picker-thumbnail-placeholder { width: 32px; height: 32px; flex-shrink: 0; image-rendering: pixelated; }
/* Animated block textures are tall strips of frames: show only the first frame. */
.picker-option img { object-fit: cover; object-position: top; }
.picker-option:hover, .picker-option.highlighted { background: var(--raised-background); }
.picker-option.current { color: var(--green-text); font-weight: 700; }
.picker-option.current::after { content: "¹3"; margin-left: auto; color: var(--green-text); } /* check mark */

/* ---------- Swatches panel ---------- */
.palette-swatches { display: flex; flex-wrap: wrap; gap: 4px; min-height: 24px; }
.palette-swatch { width: 24px; height: 24px; border: 2px solid #000000; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.25), inset -2px -2px 0 rgba(0, 0, 0, 0.25); }

/* ---------- Knobs (Properties panel) ---------- */
.knob-group { margin-bottom: 10px; }
/* Group titles are raised bars like minecraft.net's accordion toggles */
.knob-group summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: var(--raised-background); color: #ffffff;
    font-family: var(--font-title); font-size: 16px; text-transform: uppercase;
    box-shadow: inset 0 4px 0 var(--raised-highlight), inset -4px 0 0 var(--raised-highlight), inset 0 -4px 0 #000000;
}
.knob-group summary::-webkit-details-marker { display: none; }
.knob-group summary::before { content: "+"; width: 12px; font-size: 18px; color: var(--green-text); }
.knob-group[open] summary::before { content: "\2212"; } /* minus sign */
.knob-group summary:hover { background: #4a4543; }

.knob { padding: 10px 4px 4px; }
.knob-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.knob-label { font-weight: 600; font-size: 13px; color: var(--text); cursor: default; user-select: none; }
.knob-value { width: 68px; text-align: right; height: 30px; }
.knob select { width: 100%; margin-top: 6px; }
/* Color knob: a swatch button that opens the browser's color picker */
.knob-color { width: 68px; height: 30px; padding: 2px; border: 2px solid var(--input-border); background: var(--panel-background); cursor: pointer; }
.knob-checkbox { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; cursor: pointer; }
.seed-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.seed-row input[type="range"] { flex: 1; }
.seed-row .bar-button { height: 30px; padding: 0 10px; font-size: 11px; }

/* Minecraft options-menu slider: dark track with a grey block handle */
input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 6px 0 0;
    background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 10px; background: #000000; border: 2px solid var(--input-border);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 22px; margin-top: -8px; border-radius: 0;
    background: #c6c6c6; border: 2px solid #000000;
    box-shadow: inset 2px 2px 0 #ffffff, inset -2px -2px 0 #555555;
}
input[type="range"]::-moz-range-track { height: 6px; background: #000000; border: 2px solid var(--input-border); }
input[type="range"]::-moz-range-thumb {
    width: 8px; height: 18px; border-radius: 0; background: #c6c6c6; border: 2px solid #000000;
    box-shadow: inset 2px 2px 0 #ffffff, inset -2px -2px 0 #555555;
}
input[type="range"]:focus { outline: none; }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { border-color: #ffffff; }


/* ---------- Mode tabs (Item / Block / Ore) in the top bar ---------- */
.mode-tabs { display: inline-flex; border: 2px solid #000000; margin-left: 10px; }
.mode-tabs button {
    height: 34px; padding: 0 16px; border: none; background: var(--raised-background); color: var(--text);
    font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em;
    box-shadow: inset 0 -4px 0 #262423, inset 0 4px 0 var(--raised-highlight);
}
.mode-tabs button + button { border-left: 2px solid #000000; }
.mode-tabs button:hover { background: #4a4543; }
.mode-tabs button.active {
    background: var(--green); color: #ffffff;
    box-shadow: inset 0 -4px 0 var(--green-dark), inset 0 4px 0 var(--green-light);
}

/* ---------- "Minecraft texture detected" notice ---------- */
.notice {
    display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 12px;
    background: rgba(60, 133, 39, 0.15); border: 2px solid var(--green); font-size: 12px; color: var(--text-soft);
}
.notice strong { color: var(--green-text); font-size: 13px; }
.notice .knob-checkbox { font-size: 12px; }
#use-item-button { margin-top: 10px; height: auto; min-height: 34px; padding: 8px 10px; font-size: 11px; line-height: 1.3; white-space: normal; }

/* Knobs that don't apply to a kept-as-is Minecraft texture */
.knob-inactive { opacity: 0.35; }
.knob-inactive .knob-label { text-decoration: line-through; }
.knob-notice {
    margin: 10px 16px 0; padding: 8px 10px; font-size: 12px; color: var(--text-soft);
    background: rgba(60, 133, 39, 0.15); border: 2px solid var(--green);
}

/* ---------- Inventory slot previews ---------- */
.slot-row { align-items: flex-start; flex-wrap: wrap; }
.output-slots { display: flex; gap: 16px; }
.slot-canvas { width: 48px; height: 48px; display: block; image-rendering: pixelated; }
/* Texture knobs: search box plus an optional Upload button */
.texture-knob-row { display: flex; gap: 6px; margin-top: 6px; }
.texture-knob-input { flex: 1; min-width: 0; }
.upload-button { height: 34px; padding: 0 10px; font-size: 11px; }
/* The uploaded image being borrowed from, with its remove button in the corner */
.upload-preview { position: relative; flex: none; width: 34px; height: 34px; background: var(--page-background); border: 2px solid var(--input-border); }
.upload-preview img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.upload-remove {
    position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font: 700 13px/1 var(--font-text); color: #ffffff; cursor: pointer;
    background: #a8322a; border: 2px solid #000000;
}
.upload-remove:hover, .upload-remove:focus-visible { background: var(--error); outline: none; }

/* The 3D views can be rotated by dragging */
.big-preview.rotatable canvas { cursor: grab; touch-action: none; }
.big-preview.rotatable canvas:active { cursor: grabbing; }

/* ---------- Small screens: stack everything and let the page scroll ---------- */
@media (max-width: 900px) {
    body { overflow: auto; }
    .app { height: auto; grid-template-rows: auto auto auto auto; }
    .workspace { grid-template-columns: 1fr; }
    .stage { height: 80vw; }
    .right-column, .knobs-panel, .knob-scroll { overflow: visible; }
}

/* ==================== Home screen: make something new + your designs ==================== */
.home { height: 100vh; overflow-y: auto; display: flex; flex-direction: column; } /* the home screen scrolls (the editor doesn't) */
.home-bar { min-height: 58px; position: sticky; top: 0; z-index: 3; }
.account-bar { display: flex; align-items: center; gap: 10px; }
.account-name { font-weight: 700; color: var(--text-soft); }
.home-content { width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 24px 40px; flex: 1; }
.home-section { margin-bottom: 36px; }
.home-heading { margin: 0 0 14px; font-family: var(--font-title); font-weight: 400; font-size: 24px; text-transform: uppercase; color: #ffffff; }
.home-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.home-heading-row .home-heading { margin: 0; }
.home-note { margin: -6px 0 14px; color: var(--text-muted); }
.home-message { margin: 0 0 22px; padding: 10px 14px; background: var(--raised-background); border-left: 4px solid var(--green-text); }
.home-message.error { border-left-color: var(--error); }

/* "Make something new" tiles: raised cards like minecraft.net */
.create-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.create-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 16px 18px;
    text-align: left; color: var(--text); background: var(--panel-background); border: 2px solid #000000;
    box-shadow: inset 0 4px 0 var(--raised-highlight), inset 0 -4px 0 #000000;
}
.create-tile:hover, .create-tile:focus-visible { background: var(--raised-background); outline: none; }
.create-tile img { width: 48px; height: 48px; image-rendering: pixelated; }
.create-tile strong { font-family: var(--font-title); font-weight: 400; font-size: 18px; text-transform: uppercase; color: #ffffff; }
.create-tile span { color: var(--text-muted); font-size: 13px; }

/* Design cards */
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.designs-empty { grid-column: 1 / -1; margin: 0; color: var(--text-muted); }
.design-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--panel-background); border: 2px solid #000000; }
.design-preview { display: block; width: 100%; aspect-ratio: 1; padding: 10%; border: 2px solid #000000; }
.design-preview img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.design-preview:focus-visible { outline: 2px solid var(--green-text); }
.design-name { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.design-name-edit { width: 100%; margin-top: 2px; }
.design-details { margin: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.design-actions { display: flex; gap: 6px; margin-top: 4px; }
.design-actions .accent-button, .design-actions .bar-button { height: 32px; padding: 0 10px; font-size: 11px; }
.design-actions > .accent-button { flex: 1; }
.card-menu { position: relative; }
.card-menu-button { font-size: 16px !important; }
.card-menu-list {
    position: absolute; right: 0; bottom: calc(100% + 4px); z-index: 5; min-width: 180px;
    display: flex; flex-direction: column; background: var(--panel-background);
    border: 2px solid var(--input-border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.card-menu-item { padding: 9px 12px; text-align: left; background: none; border: 0; color: var(--text); font-size: 13px; }
.card-menu-item:hover, .card-menu-item:focus-visible { background: var(--raised-background); outline: none; }

.home-footer { padding: 18px 24px 22px; text-align: center; color: var(--text-muted); font-size: 11px; border-top: 2px solid var(--raised-background); }
.home-footer p { margin: 4px auto; max-width: 760px; }

/* ==================== Editor top bar: home button, design name, save status ==================== */
.home-button { display: flex; align-items: center; gap: 12px; padding: 6px 4px; background: none; border: 0; }
.home-button:hover .app-title, .home-button:focus-visible .app-title { color: var(--green-text); }
.home-button:focus-visible { outline: none; }
.design-name-input { width: 230px; font-weight: 700; }
.design-kind { font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.save-status { max-width: 300px; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save-status.error { color: var(--error); }

/* ==================== Dialogs: account, pick one of your items ==================== */
.dialog {
    width: min(420px, calc(100vw - 32px)); padding: 26px 26px 22px;
    background: var(--panel-background); color: var(--text); border: 2px solid #000000;
    box-shadow: inset 0 4px 0 var(--raised-highlight), 0 20px 50px rgba(0, 0, 0, 0.6);
}
#choose-item-dialog { width: min(640px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
.dialog-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; padding: 0; background: none; border: 0; color: var(--text-muted); font-size: 26px; line-height: 1; }
.dialog-close:hover, .dialog-close:focus-visible { color: #ffffff; outline: none; }
.dialog-title { margin: 0 0 12px; font-family: var(--font-title); font-weight: 400; font-size: 22px; text-transform: uppercase; color: #ffffff; }
.dialog-text { margin: 0 0 14px; color: var(--text-soft); }
.dialog-form { display: flex; flex-direction: column; gap: 12px; }
.dialog-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; }
.dialog-form .accent-button { height: 40px; margin-top: 4px; }
.dialog-form .code-input { height: 48px; font-size: 24px; letter-spacing: 8px; text-align: center; }
.form-error { margin: 0; color: var(--error); font-weight: 600; }
.form-note { margin: 0; color: var(--green-text); }
.form-note:empty { display: none; }
.dialog-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.link-button { padding: 0; background: none; border: 0; color: var(--green-text); font-size: 13px; font-weight: 600; text-decoration: underline; }
.choose-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; }
.choose-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: var(--page-background); border: 2px solid #000000; color: var(--text); font-size: 12px; }
.choose-item:hover, .choose-item:focus-visible { border-color: var(--green-text); outline: none; }
.choose-item img { width: 64px; height: 64px; image-rendering: pixelated; }

/* Phones: a tighter header and page edges, so the title and buttons don't wrap */
.app-title, .account-bar button, .account-name { white-space: nowrap; }
@media (max-width: 600px) {
    .home-bar { gap: 10px; padding: 0 16px; }
    .home-bar .app-title { font-size: 17px; }
    .home-bar .app-icon { width: 22px; height: 22px; }
    .account-bar { gap: 6px; }
    .account-bar .bar-button, .account-bar .accent-button { height: 32px; padding: 0 10px; font-size: 11px; }
    .account-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
    .home-content { padding: 20px 16px 32px; }
}

/* ==================== Live checks in the sign-up and new-password forms ==================== */
.dialog-form .field-check { margin: -6px 0 0; min-height: 0; font-size: 12px; color: var(--text-muted); }
.dialog-form .field-check:empty { display: none; }
.dialog-form .field-check.ok { color: var(--green-text); }
.dialog-form .field-check.bad { color: var(--error); }

/* Strength bar: empty, then red (too weak), green (strong), bright green (very strong) */
.password-meter { display: flex; align-items: center; gap: 10px; margin-top: -4px; }
.meter-track { flex: 1; height: 8px; background: var(--page-background); border: 2px solid #000000; }
.meter-fill { width: 0; height: 100%; transition: width 0.15s, background-color 0.15s; }
.password-meter[data-level="too-weak"] .meter-fill { width: 33%; background: var(--error); }
.password-meter[data-level="strong"] .meter-fill { width: 70%; background: var(--green); }
.password-meter[data-level="very-strong"] .meter-fill { width: 100%; background: var(--green-text); }
.meter-label { min-width: 84px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); text-align: right; }
.password-meter[data-level="too-weak"] .meter-label { color: var(--error); }
.password-meter[data-level="strong"] .meter-label, .password-meter[data-level="very-strong"] .meter-label { color: var(--green-text); }

/* Requirement list: a dot until it's met, then a green check (red once you've typed and it isn't) */
.password-requirements { margin: -2px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12px; color: var(--text-muted); }
.password-requirements li { position: relative; padding-left: 18px; }
.password-requirements li::before { content: "\2022"; position: absolute; left: 4px; }
.password-requirements li.met { color: var(--green-text); }
.password-requirements li.met::before { content: "\2713"; left: 2px; }
.password-requirements li.unmet { color: var(--error); }
.password-requirements li.unmet::before { content: "\2717"; left: 2px; }