/* Notion-style design tokens (the same as the other apps). Tailwind reads these through @theme in index.php. */
:root {
    color-scheme: light;

    --bg: #ffffff;
    --ink: #37352f;
    --ink-2: rgba(55, 53, 47, 0.65);
    --ink-3: rgba(55, 53, 47, 0.4);
    --line: rgba(55, 53, 47, 0.09);
    --hover: rgba(55, 53, 47, 0.06);
    --accent: #2383e2;
    --danger: #d44c47;
    --good: #448361;
    --skeleton: rgba(55, 53, 47, 0.07);

    --menu-shadow: rgba(15, 15, 15, 0.05) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 3px 6px, rgba(15, 15, 15, 0.2) 0 9px 24px;

    --gray-bg: #e3e2e0;   --gray-ink: #32302c;   --gray-dot: #91918e;
    --blue-bg: #d3e5ef;   --blue-ink: #183347;   --blue-dot: #5b97bd;
    --green-bg: #dbeddb;  --green-ink: #1c3829;  --green-dot: #6c9b7d;
    --yellow-bg: #fdecc8; --yellow-ink: #402c1b; --yellow-dot: #cb9433;
    --red-bg: #ffe2dd;    --red-ink: #5d1715;    --red-dot: #e16f64;
    --purple-bg: #e8deee; --purple-ink: #412454; --purple-dot: #9a6dd7;
    --orange-bg: #fadec9; --orange-ink: #49290e; --orange-dot: #d9730d;
    --pink-bg: #f5e0e9;   --pink-ink: #4c2337;   --pink-dot: #c14c8a;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --bg: #191919;
        --ink: rgba(255, 255, 255, 0.81);
        --ink-2: rgba(255, 255, 255, 0.46);
        --ink-3: rgba(255, 255, 255, 0.28);
        --line: rgba(255, 255, 255, 0.094);
        --hover: rgba(255, 255, 255, 0.055);
        --danger: #ff7369;
        --good: #5bb37f;
        --skeleton: rgba(255, 255, 255, 0.07);

        --menu-shadow: rgba(255, 255, 255, 0.094) 0 0 0 1px, rgba(0, 0, 0, 0.5) 0 9px 24px;

        --gray-bg: #373737;   --gray-ink: rgba(255, 255, 255, 0.81); --gray-dot: #7f7f7f;
        --blue-bg: #28456c;   --blue-ink: rgba(255, 255, 255, 0.81); --blue-dot: #4f8fd6;
        --green-bg: #2b593f;  --green-ink: rgba(255, 255, 255, 0.81); --green-dot: #4f9768;
        --yellow-bg: #89632a; --yellow-ink: rgba(255, 255, 255, 0.81); --yellow-dot: #c19138;
        --red-bg: #6e3630;    --red-ink: rgba(255, 255, 255, 0.81); --red-dot: #d1584b;
        --purple-bg: #492f64; --purple-ink: rgba(255, 255, 255, 0.81); --purple-dot: #9d68d3;
        --orange-bg: #854c1d; --orange-ink: rgba(255, 255, 255, 0.81); --orange-dot: #d27b2d;
        --pink-bg: #69314c;   --pink-ink: rgba(255, 255, 255, 0.81); --pink-dot: #d15796;
    }
}

body {
    background: var(--bg);
    color: var(--ink);
    /* Keep content clear of the notch in landscape (viewport-fit=cover) */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Rows and buttons show their own pressed state instead of the grey tap flash */
    -webkit-tap-highlight-color: transparent;
}

/* Native dropdown lists: the selects are transparent with grey text, and their options would inherit that, which
   leaves them faint or invisible on the list's own background (Windows, dark mode). Give the list solid colours. */
select option,
select optgroup {
    background-color: var(--bg);
    color: var(--ink);
}


/* ---------- Screenshot editor ---------- */

button {
    cursor: pointer;
}

button:disabled {
    cursor: default;
    opacity: 0.35;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The page is the app: a top bar, then the editor filling the rest of the screen */
html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Nothing to edit yet: the whole screen is for adding a screenshot (the tools and settings come with it) */
.no-image .needs-image,
.no-image #tools,
.no-image #panel,
.no-image #panel-resize {
    display: none !important;
}

.bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--ink-2);
}

/* the stylesheet's display beats Tailwind's hidden, so say it here (the Share button where sharing can't work) */
.bar-btn.hidden {
    display: none;
}

.bar-btn:hover:not(:disabled) {
    background: var(--hover);
    color: var(--ink);
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.primary-btn:hover {
    filter: brightness(0.94);
}

.plain-btn {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
}

.plain-btn:hover {
    background: var(--hover);
}

.tool-select {
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
}

/* ----- Layout: tools | picture | settings ----- */
#editor {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 280px;
    flex: 1;
    min-height: 0;
    border-top: 1px solid var(--line);
}

#tools {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
    overflow-y: auto;
    border-right: 1px solid var(--line);
}

.tool {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--ink-2);
}

.tool:hover {
    background: var(--hover);
    color: var(--ink);
}

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

.tool-gap {
    flex-shrink: 0;
    width: 24px;
    height: 1px;
    margin: 4px 0;
    background: var(--line);
}

/* phones only: opens / closes the settings under the picture */
#panel-toggle {
    display: none;
}

/* The picture's area: grey, so a white screenshot and a transparent background both stand out */
#stage-wrap {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
}

/* scrolls when the picture is zoomed in; its content is centred with margins (not align-items), so that all of a
   bigger picture can be scrolled to */
#stage {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 24px;
    overflow: auto;
    background: var(--hover);
}

#canvas-wrap {
    position: relative;
    flex-shrink: 0;
    margin: auto;
    line-height: 0;
}

#canvas.can-pan {
    cursor: grab;
}

#zoom-bar {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 8px;
    background: var(--bg);
    box-shadow: var(--menu-shadow);
    font-size: 13px;
}

#zoom-bar button {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

#zoom-bar button:hover:not(:disabled) {
    background: var(--hover);
    color: var(--ink);
}

/* Looks: chips to tap; your own have a × */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 13px;
}

button.chip:hover,
.chip.mine:hover {
    background: var(--hover);
}

.chip[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.chips.hidden {
    display: none;
}

.chip.mine {
    padding-right: 2px;
}

.chip-x {
    width: 22px;
    height: 22px;
    margin-left: 4px;
    border-radius: 50%;
    color: var(--ink-3);
    line-height: 1;
}

.chip-x:hover {
    background: var(--hover);
    color: var(--danger);
}

/* a screenshot's chip can be dragged along the row to change the order */
#slots .chip {
    touch-action: pan-y;
    cursor: grab;
}

.chip.is-dragging {
    position: relative;
    z-index: 1;
    background: var(--bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: grabbing;
}

/* Layers: a row per item, the top one first, the screenshot itself last */
.fold-head {
    margin-bottom: 0 !important;
}

.fold {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
}

.fold::before {
    content: "";
    border: 4px solid transparent;
    border-left-color: currentColor;
    margin-right: -4px;
    transition: transform 0.12s;
}

.fold[aria-expanded="true"]::before {
    transform: translate(-2px, 2px) rotate(90deg);
}

.layers {
    max-height: 264px;
    margin: 0 -6px;
    overflow-y: auto;
}

.layers:empty {
    display: none;
}

.layer {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 0 2px 0 0;
    border-radius: 6px;
    border-top: 2px solid transparent;
    cursor: default;
    user-select: none;
}

.layer:not(.is-base):hover {
    background: var(--hover);
}

.layer[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.layer.is-dragging {
    opacity: 0.4;
}

.layer.drop-before {
    border-top-color: var(--accent);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.layers.is-sorting .layer {
    cursor: grabbing;
}

.layer svg {
    width: 16px;
    height: 16px;
}

.layer-grip {
    display: grid;
    place-items: center;
    flex: none;
    width: 18px;
    height: 100%;
    color: var(--ink-3);
    cursor: grab;
    touch-action: none;
}

.layer-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    font-size: 14px;
    line-height: 1;
}

.layer.is-base .layer-icon {
    color: var(--ink-3);
}

.layer-name {
    flex: 1;
    min-width: 0;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layer-name.hidden {
    display: none;
}

.layer.is-base .layer-name {
    color: var(--ink-2);
}

.layer.is-hidden .layer-name,
.layer.is-hidden .layer-icon {
    opacity: 0.4;
}

.layer-rename {
    flex: 1;
    min-width: 0;
    height: 24px;
    margin: 0 2px;
    padding: 0 4px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--bg);
    color: var(--ink);
    font-size: 13px;
}

.layer-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    color: var(--ink-3);
}

.layer-btn:hover {
    background: var(--hover);
    color: var(--ink);
}

.layer-btn[aria-pressed="true"] {
    color: var(--accent);
}

.layer-btn[data-act="delete"]:hover {
    color: var(--danger);
}

/* a group: its own row, its items indented under it (and folded away with its arrow) */
.layer.hidden {
    display: none;
}

.layer.in-group {
    padding-left: 14px;
}

.layer.is-group .layer-name {
    font-weight: 600;
}

.layer-fold::before {
    content: "";
    border: 4px solid transparent;
    border-left-color: currentColor;
    margin-left: 4px;
}

.layer-fold[aria-expanded="true"]::before {
    margin: 4px 0 0;
    border-color: transparent;
    border-top-color: currentColor;
}

/* "layer or replace?" for a pasted or dropped picture */
.ask {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.4);
}

.ask.hidden {
    display: none;
}

.ask-box {
    display: grid;
    gap: 8px;
    width: min(320px, 100%);
    padding: 18px;
    border-radius: 12px;
    background: var(--bg);
    box-shadow: var(--menu-shadow);
    font-size: 14px;
}

.ask-box h2 {
    font-size: 16px;
    font-weight: 600;
}

.ask-box p {
    margin-bottom: 6px;
    color: var(--ink-2);
}

.ask-box .plain-btn {
    height: 36px;
}

.plain-btn.is-main {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
}

.plain-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.layer-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
}

.field.first {
    margin-top: 0;
}

/* checks behind the canvas show where the picture is see-through */
#canvas {
    display: block;
    border-radius: 2px;
    background: repeating-conic-gradient(rgba(128, 128, 128, 0.18) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px;
    touch-action: none;
}

/* see-through: the words are drawn on the picture as you type, this box only shows the cursor (openText()) */
#text-edit {
    position: absolute;
    color: transparent;
    min-width: 40px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    outline: 1px dashed var(--accent);
    outline-offset: 3px;
    background: transparent;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 600;
    line-height: 1.25;
    white-space: pre;
    resize: none;
}

.dropzone {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(420px, 100%);
    padding: 36px 20px;
    border: 2px dashed var(--ink-3);
    border-radius: 12px;
    background: var(--bg);
    color: var(--ink);
    text-align: center;
}

.dropzone.hidden {
    display: none;
}

.dropzone svg {
    color: var(--ink-3);
}

#drop-hint {
    position: absolute;
    inset: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--accent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    color: var(--accent);
    font-weight: 600;
    pointer-events: none;
}

#drop-hint.hidden {
    display: none;
}

/* ----- Settings ----- */
#panel {
    overflow-y: auto;
    border-left: 1px solid var(--line);
    font-size: 13px;
}

/* Three tabs over the sections; a section shows on its own tab, and Crop takes the whole panel */
#panel-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg);
}

#panel-tabs {
    display: flex;
    padding: 0 8px;
    border-bottom: 1px solid var(--line);
}

/* wide screens: put the sidebar away (and bring it back from the picture's corner), drag its edge for its width */
#panel-tabs .panel-hide {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    margin-left: 4px;
    color: var(--ink-3);
}

#panel-show {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg);
    box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, 0.08);
    color: var(--ink-2);
}

#panel-show:hover {
    color: var(--ink);
}

#panel-resize,
#sheet-grip {
    display: none;
}

@media (min-width: 768px) {
    #editor {
        position: relative;
        grid-template-columns: 52px minmax(0, 1fr) var(--panel-w, clamp(300px, 28vw, 400px));
    }

    #editor.panel-hidden {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    #editor.panel-hidden #panel,
    #editor.panel-hidden #panel-resize {
        display: none;
    }

    body:not(.no-image) #editor.panel-hidden #panel-show {
        display: grid;
    }

    #panel-resize {
        position: absolute;
        top: 0;
        right: calc(var(--panel-w, clamp(300px, 28vw, 400px)) - 3px);
        bottom: 0;
        z-index: 6;
        display: block;
        width: 7px;
        cursor: col-resize;
        touch-action: none;
    }

    #panel-resize:hover,
    #panel-resize.is-dragging {
        background: color-mix(in srgb, var(--accent) 35%, transparent);
    }
}

/* why something is greyed out */
.note {
    margin-top: 8px;
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.35;
}

.note.hidden {
    display: none;
}

.slider-value {
    float: right;
    color: var(--ink-2);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* frames: a drawing over a name, four to a row */
#frames {
    grid-template-columns: repeat(4, 1fr);
}

#frames button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 50px;
    font-size: 11px;
}

#frames svg {
    width: 20px;
    height: 20px;
}

.chip-name {
    display: inline-flex;
    align-items: center;
}

/* a look's tiny picture on its chip */
.look-dot {
    display: grid;
    place-items: center;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0 6px 0 -4px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.35);
}

.look-dot.is-none {
    background: repeating-conic-gradient(rgba(128, 128, 128, 0.35) 0% 25%, transparent 0% 50%) 50% / 8px 8px;
}

.look-dot i {
    width: 10px;
    height: 7px;
    border-radius: 1.5px;
    background: #ffffff;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

.look-dot i.is-dark {
    background: #2b2b2e;
}

.look-dot i.is-device {
    width: 6px;
    height: 11px;
    border: 1px solid #111111;
}

.look-dot i.is-post {
    width: 10px;
    height: 11px;
}

#panel-tabs button {
    flex: 1;
    height: 38px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
}

#panel-tabs button:hover {
    color: var(--ink);
}

#panel-tabs button[aria-selected="true"] {
    border-bottom-color: var(--accent);
    color: var(--ink);
}

#panel[data-tab="draw"] .panel-section[data-tab]:not([data-tab="draw"]),
#panel[data-tab="design"] .panel-section[data-tab]:not([data-tab="design"]),
#panel[data-tab="export"] .panel-section[data-tab]:not([data-tab="export"]),
#panel.is-crop .panel-section[data-tab],
#panel.is-crop #panel-tabs,
body.no-image #panel-tabs {
    display: none;
}

/* what a folded section has set, beside its name */
.fold-body {
    margin-top: 8px;
}

.fold-note {
    flex: 1;
    min-width: 0;
    margin-left: 8px;
    overflow: hidden;
    color: var(--ink-3);
    font-weight: 400;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fold[aria-expanded="true"] .fold-note {
    display: none;
}

.panel-section[data-fold] {
    padding-top: 10px;
    padding-bottom: 10px;
}

.panel-section[data-fold] .fold {
    min-height: 24px;
}

.panel-section[data-fold] .fold-body {
    padding-bottom: 6px;
}

/* the tool's or the picked item's own choices: a block that is always there */
#item-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.panel-section h2.item-title {
    margin-bottom: 4px;
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.export-actions {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.export-actions .primary-btn,
.export-actions .plain-btn {
    width: 100%;
    height: 36px;
}

.panel-section {
    padding: 14px 14px 16px;
    border-bottom: 1px solid var(--line);
}

.panel-section h2 {
    margin-bottom: 8px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 500;
}

.swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.swatch {
    position: relative;
    aspect-ratio: 1;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.35);
}

.swatch.round {
    border-radius: 50%;
}

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

/* the screenshot itself, blurred: a soft blend stands for it */
.swatch.is-blur {
    background: radial-gradient(circle at 30% 30%, #9db8ff, transparent 60%), radial-gradient(circle at 75% 70%, #ffb3d1, transparent 60%), #d9d2f0;
}

/* your own picture: an icon over the file box */
.swatch.is-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--ink-2);
    cursor: pointer;
}

.swatch.is-picture input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.swatch.is-none {
    background: repeating-conic-gradient(rgba(128, 128, 128, 0.35) 0% 25%, transparent 0% 50%) 0 0 / 10px 10px;
}

/* the last swatch is "any colour": the browser's colour box under a rainbow */
.swatch.custom {
    overflow: hidden;
    background: conic-gradient(#f44, #fc4, #4d4, #4cf, #55f, #f4f, #f44);
}

.swatch.custom input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.segmented {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: var(--hover);
}

.segmented.wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.segmented button {
    flex: 1;
    height: 28px;
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 13px;
    white-space: nowrap;
}

.segmented button:disabled {
    opacity: 0.4;
}

.segmented button[aria-checked="true"] {
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, 0.08);
}

#colors {
    grid-template-columns: repeat(9, 1fr);
}

/* the empty page: last time's work, kept in this browser */
.resume {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 380px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    text-align: left;
}

.resume > div {
    flex: 1;
}

.resume.hidden {
    display: none;
}

/* under the colours: the recent ones, the hex box, the screen picker */
.color-more {
    display: flex;
    gap: 8px;
    align-items: center;
}

.recent-colors {
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 0;
}

.recent-colors .swatch {
    width: 22px;
    flex: none;
}

.color-hex {
    width: 84px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink);
    font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#color-drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    color: var(--ink-2);
}

#color-drop.hidden {
    display: none;
}

/* a text's letters: four typefaces in a row, then line-up and bold */
#fonts {
    grid-template-columns: repeat(4, 1fr);
}

.words-row {
    display: flex;
    gap: 8px;
}

.words-row .segmented {
    flex: 1;
}

.segmented button svg {
    margin: 0 auto;
}

#bold-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    padding: 0;
    color: var(--ink-2);
}

#bold-btn[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

.emoji-grid button {
    aspect-ratio: 1;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
}

.emoji-grid button:hover {
    background: var(--hover);
}

#stamps canvas {
    width: 32px;
    height: 32px;
    margin: auto;
}

.emoji-grid button[aria-checked="true"] {
    background: var(--hover);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.item-actions svg {
    width: 16px;
    height: 16px;
    margin: 0 auto;
}

.item-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 12px;
}

.item-actions.hidden {
    display: none;
}

/* Small menus: the shapes button's tools, Clear / Start over */
.menu {
    position: fixed;
    z-index: 30;
    min-width: 200px;
    padding: 4px;
    border-radius: 8px;
    background: var(--bg);
    box-shadow: var(--menu-shadow);
    font-size: 14px;
}

.menu.hidden {
    display: none;
}

#reset-menu {
    position: absolute;
    top: 36px;
    right: 0;
    width: 260px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border-radius: 6px;
    text-align: left;
}

.menu-item:hover,
.menu-item:focus-visible {
    background: var(--hover);
}

.menu-item[aria-checked="true"] {
    color: var(--accent);
}

.menu-item kbd {
    color: var(--ink-3);
    font-family: inherit;
    font-size: 12px;
}

/* the shapes button opens a menu: a small corner mark says so */
.tool-group {
    position: relative;
}

.tool-group::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    border: 3px solid transparent;
    border-right-color: currentColor;
    border-bottom-color: currentColor;
    opacity: 0.6;
}

/* The social post's boxes */
.field {
    display: block;
    margin-top: 10px;
    color: var(--ink-2);
    font-size: 12px;
}

.field input,
.field textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
}

.field textarea {
    resize: vertical;
}

.check.hidden,
.field.hidden {
    display: none;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    accent-color: var(--accent);
}

.slider {
    display: block;
    color: var(--ink-2);
    font-size: 12px;
}

.slider.hidden {
    display: none;
}

.slider + .slider {
    margin-top: 12px;
}

.slider input {
    display: block;
    width: 100%;
    margin-top: 6px;
    accent-color: var(--accent);
}

.slider input:disabled {
    opacity: 0.35;
}

.toast {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    z-index: 40;
    max-width: calc(100vw - 32px);
    padding: 8px 14px;
    transform: translateX(-50%);
    border-radius: 8px;
    background: #2f2f2f;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.toast.hidden {
    display: none;
}

/* ----- Phones: the picture on top, the tools in a row you can swipe, the settings in a sheet under them ----- */
@media (max-width: 767px) {
    #editor {
        display: flex;
        flex-direction: column;
    }

    #stage-wrap {
        flex: 1;
        order: 1;
    }

    #stage {
        padding: 12px;
    }

    .chip {
        height: 34px;
        font-size: 14px;
    }

    #tools {
        flex-direction: row;
        order: 2;
        gap: 4px;
        padding: 6px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        border-top: 1px solid var(--line);
        border-right: 0;
        scrollbar-width: none;
    }

    .tool {
        width: 42px;
        height: 42px;
    }

    .tool-gap {
        width: 1px;
        height: 24px;
        margin: 0 4px;
    }

    #panel-toggle {
        display: inline-flex;
    }

    /* nothing open yet: the whole screen is for adding a screenshot */
    .no-image #tools,
    .no-image #panel,
    .no-image .needs-image {
        display: none;
    }

    /* the whole picture is in view: pinch to zoom in, and the zoom buttons come once it is */
    #zoom-bar.is-fit,
    #item-block.is-idle {
        display: none;
    }

    #zoom-bar {
        right: 8px;
        bottom: 8px;
        opacity: 0.92;
    }

    /* the tools row fades at an edge that has more tools past it */
    #tools.more-right {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }

    #tools.more-left {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
    }

    #tools.more-left.more-right {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    }

    /* the settings sheet: the bar on top is dragged to make it taller or shorter */
    #sheet-grip {
        display: block;
        width: 100%;
        height: 32px;
        cursor: ns-resize;
        touch-action: none;
    }

    #sheet-grip::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto;
        border-radius: 2px;
        background: var(--ink-3);
        transform: translateY(12px);
    }

    #panel-tabs .panel-hide {
        display: none;
    }

    #panel-tabs button {
        height: 44px;
        font-size: 14px;
    }

    .panel-section[data-fold] .fold {
        min-height: 36px;
        font-size: 13px;
    }

    #frames button {
        height: 58px;
        font-size: 12px;
    }

    #panel.is-sized {
        height: var(--sheet-h);
        max-height: none;
    }

    #stage.bar-room {
        padding-top: calc(12px + 44px);
    }

    /* the picture can't use all the stage: the sheet takes the rest, at a set height so picking things doesn't move the picture (app.js: fitSheet) */
    #panel.is-fitted {
        height: calc(34dvh + var(--sheet-extra, 0px));
        max-height: none;
    }

    #panel {
        order: 3;
        height: 34dvh;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    #panel.is-closed {
        display: none;
    }

    .swatch {
        min-height: 30px;
    }

    .segmented button,
    .plain-btn,
    .tool-select {
        height: 36px;
        font-size: 14px;
    }

    /* 16px, or an iPhone zooms into the box */
    .field input,
    .field textarea {
        font-size: 16px;
    }

    .emoji-grid button {
        font-size: 22px;
    }

    .layer {
        height: 40px;
    }

    .layer-btn {
        width: 32px;
        height: 32px;
    }

    .layer-grip {
        width: 28px;
    }

    .layer-rename {
        height: 30px;
        font-size: 16px;
    }

}

/* a narrow phone: Copy is on the Export tab, so the top bar keeps room for the name */
@media (max-width: 400px) {
    #copy-btn {
        display: none;
    }
}

/* the layout in use */
#layouts .chip.is-on {
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- Round 12: desktop ---------- */

/* Top bar: the name and opening on the left, undo / redo / clear in the middle, getting it out on the right */
#topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
    #topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    #topbar .bar-end {
        justify-self: end;
    }

    .no-image #editor {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* a top-bar button with its name beside the icon (Copy; Open on a wide screen) */
.bar-btn svg {
    flex: none;
}

.bar-btn.is-wide {
    width: auto;
    gap: 6px;
    padding: 0 8px;
}

@media (min-width: 1024px) {
    #new-btn {
        width: auto;
        gap: 6px;
        padding: 0 8px;
    }
}

.bar-sep {
    flex: none;
    width: 1px;
    height: 18px;
    margin: 0 6px;
    background: var(--line);
}

#topbar nav .bar-btn {
    flex: none;
}

/* Download with its ▾: one button in two parts */
.split {
    display: flex;
}

.split-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.split-more {
    padding: 0 7px;
    margin-left: 1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#download-menu {
    position: absolute;
    top: 38px;
    right: 0;
    width: 240px;
    padding: 6px 8px 4px;
}

.menu-label {
    margin: 6px 0 4px;
    color: var(--ink-2);
    font-size: 12px;
}

.menu-note {
    margin: 8px 0 4px;
    color: var(--ink-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

#download-menu .menu-item {
    margin: 2px -4px 0;
    width: calc(100% + 8px);
    font-size: 13px;
}

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

.menu-item:disabled {
    opacity: 0.4;
    pointer-events: none;
}

#ctx-menu {
    min-width: 230px;
    font-size: 13px;
}

#ctx-menu .menu-item {
    padding: 5px 8px;
}

#ctx-menu kbd {
    margin-left: auto;
}

/* the empty page */
.dropzone {
    width: min(480px, 100%);
    padding: 44px 24px;
}

.empty-keys {
    margin-top: 6px;
    color: var(--ink-2);
    font-size: 12px;
}

kbd {
    font-family: inherit;
}

.empty-keys kbd,
.keys-list kbd {
    display: inline-block;
    min-width: 20px;
    padding: 0 5px;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--ink);
    font-size: 11px;
    line-height: 17px;
    text-align: center;
}

/* Zoom bar: fit, actual pixels, the download's size */
.zoom-sep {
    width: 1px;
    height: 16px;
    margin: 0 4px;
    background: var(--line);
}

#zoom-size {
    padding: 0 8px 0 4px;
    color: var(--ink-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Tooltips of our own (quicker than the browser's), with the key beside the name */
.tip {
    position: fixed;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 280px;
    padding: 5px 8px;
    border-radius: 6px;
    background: #2f2f2f;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.3;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tip.hidden {
    display: none;
}

.tip kbd {
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 11px;
    line-height: 17px;
    white-space: nowrap;
}

/* The picked item's bar, over it on the picture */
#float-bar {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg);
    box-shadow: var(--menu-shadow);
}

#float-bar.hidden {
    display: none;
}

/* phones: along the top of the picture's space, centred */
#float-bar.is-docked {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

#float-bar > button,
.fb-sizes button {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    border-radius: 7px;
    color: var(--ink-2);
}

#float-bar > button:hover,
.fb-sizes button:hover {
    background: var(--hover);
    color: var(--ink);
}

#float-bar svg {
    width: 16px;
    height: 16px;
}

#float-bar .fb-danger:hover {
    color: var(--danger);
}

.fb-color i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.4);
}

.fb-sizes {
    display: flex;
    gap: 1px;
}

.fb-sizes button {
    min-width: 26px;
}

.fb-sizes i {
    border-radius: 50%;
    background: currentColor;
}

.fb-sizes [data-size="s"] i { width: 4px; height: 4px; }
.fb-sizes [data-size="m"] i { width: 7px; height: 7px; }
.fb-sizes [data-size="l"] i { width: 11px; height: 11px; }

.fb-sizes button[aria-checked="true"] {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

#float-bar > .fb-text {
    padding: 0 8px;
    font-size: 12px;
    white-space: nowrap;
}

#float-bar > .fb-text.hidden {
    display: none;
}

.fb-sep {
    width: 1px;
    height: 18px;
    margin: 0 3px;
    background: var(--line);
}

.fb-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    display: grid;
    grid-template-columns: repeat(8, 24px);
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    background: var(--bg);
    box-shadow: var(--menu-shadow);
}

.fb-pop.is-up {
    top: auto;
    bottom: calc(100% + 6px);
}

.fb-pop.hidden {
    display: none;
}

.fb-pop button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.35);
}

.fb-pop button[aria-checked="true"] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The Design tab: a row of icons, one per section, under the tabs */
#design-nav {
    display: none;
    gap: 1px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--line);
}

#panel[data-tab="design"]:not(.is-crop) #design-nav {
    display: flex;
}

#design-nav button {
    display: grid;
    flex: 1;
    place-items: center;
    min-width: 0;
    height: 28px;
    border-radius: 6px;
    color: var(--ink-2);
}

#design-nav button:hover {
    background: var(--hover);
    color: var(--ink);
}

#design-nav button.is-here {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

#design-nav svg {
    width: 16px;
    height: 16px;
}

#design-nav .nav-gap {
    flex: none;
    width: 1px;
    margin: 4px 2px;
    background: var(--line);
}

/* Choices shown as small drawings, like the frames: frame style, lean, kind of shadow */
.pics {
    display: grid !important;
    gap: 2px;
}

#frame-style {
    grid-template-columns: repeat(4, 1fr);
}

#tilt {
    grid-template-columns: repeat(5, 1fr);
}

#shadow-kind {
    grid-template-columns: repeat(3, 1fr);
}

.pics button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 48px;
    font-size: 11px;
}

.pics svg {
    width: 20px;
    height: 20px;
}

.pics.hidden {
    display: none !important;
}

/* Looks and layouts: a small picture of each, drawn from your own screenshot */
.look-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.look-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 0;
    color: var(--ink-2);
    font-size: 12px;
    text-align: left;
}

.look-pic {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 8px;
    background: repeating-conic-gradient(rgba(128, 128, 128, 0.14) 0% 25%, transparent 0% 50%) 0 0 / 10px 10px;
    box-shadow: inset 0 0 0 1px var(--line);
}

.look-pic canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.look-pic .look-dot {
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 8px;
}

.look-card:hover .look-pic {
    box-shadow: inset 0 0 0 1px var(--ink-3);
}

.look-card[aria-pressed="true"] .look-pic,
.look-card.is-on .look-pic {
    box-shadow: 0 0 0 2px var(--accent);
}

.look-card[aria-pressed="true"],
.look-card.is-on {
    color: var(--accent);
    font-weight: 600;
}

.look-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.look-mine {
    position: relative;
    display: grid;
}

.look-mine .chip-x {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
    background: var(--bg);
    box-shadow: 0 0 0 1px var(--line);
    opacity: 0;
}

.look-mine:hover .chip-x,
.look-mine .chip-x:focus-visible {
    opacity: 1;
}

/* Keyboard shortcuts */
.keys-box {
    width: min(640px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

.keys-list {
    columns: 2 240px;
    column-gap: 28px;
    margin-top: 4px;
}

.keys-list h3 {
    margin: 10px 0 4px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    break-after: avoid;
}

.keys-list p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 13px;
    break-inside: avoid;
}

.keys-list p span:last-child {
    display: flex;
    flex: none;
    gap: 3px;
}

/* phones keep what they had: no floating bar, no extra zoom buttons, no Add or ▾ in the top bar (the sheet has them) */
@media (max-width: 767px) {
    .split-main {
        border-radius: 6px;
    }

    #float-bar:not(.is-docked),
    .zoom-wide,
    .zoom-sep,
    #keys-btn,
    #add-btn,
    #download-more {
        display: none !important;
    }

    .look-grid {
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    }
}

/* touch screens: the right-click menu (a long press) without the keyboard's shortcuts */
@media (pointer: coarse) {
    #ctx-menu kbd {
        display: none;
    }
}

/* ---------- Round 14: phones ---------- */

/* phone-only words and pictures */
.tool-name,
.nav-name,
#tool-hint,
.phone-only,
#reset-btn .icon-phone {
    display: none;
}

/* the empty page's two buttons side by side, the same height */
#empty .primary-btn,
#empty .plain-btn {
    height: 36px;
    font-size: 14px;
}

@media (max-width: 767px) {
    /* a short name under each tool */
    .tool {
        flex-direction: column;
        gap: 2px;
        width: 50px;
        height: 50px;
    }

    .tool-name {
        display: block;
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }

    #empty .primary-btn,
    #empty .plain-btn {
        height: 40px;
        padding: 0 16px;
        font-size: 15px;
    }

    /* the top bar: name … undo redo … copy share ⋯ download (clear is in the ⋯, away from undo) */
    #topbar {
        justify-content: flex-start;
        gap: 4px;
    }

    #topbar .bar-mid,
    #topbar .bar-end {
        display: contents;
    }

    #undo-btn,
    #copy-btn {
        margin-left: auto;
    }

    #reset-wrap {
        order: 2;
    }

    #topbar .split {
        order: 3;
    }

    #reset-btn .icon-wide {
        display: none;
    }

    #reset-btn .icon-phone,
    .phone-only {
        display: flex;
    }

    .phone-only:disabled {
        opacity: 0.4;
    }

    /* the Draw tab starts with one line on what is in hand; with nothing to colour, no colours */
    #tool-hint {
        display: block;
        margin-bottom: 10px;
        color: var(--ink-2);
        font-size: 13px;
    }

    #tool-hint b {
        color: var(--ink);
        font-weight: 600;
    }

    #tool-hint b:empty {
        display: none;
    }

    #draw-section.is-idle #style-block,
    #item-title,
    #item-hint {
        display: none;
    }

    /* the Design tab's sections as a sideways row of names */
    #panel[data-tab="design"]:not(.is-crop) #design-nav {
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    #design-nav button {
        display: inline-flex;
        flex: none;
        gap: 6px;
        align-items: center;
        height: 34px;
        padding: 0 10px;
        border-radius: 17px;
        font-size: 13px;
    }

    #design-nav .nav-name {
        display: inline;
        white-space: nowrap;
    }
}

/* Capture screen: the seconds left before the picture is taken */
#capture-count {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 45;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    pointer-events: none;
}

#capture-count.hidden {
    display: none;
}

/* Stitch: a wider box with the joined picture in it */
.ask-box.stitch-box {
    width: min(440px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

#stitch-preview {
    display: block;
    max-width: 100%;
    max-height: 46dvh;
    margin: 4px auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-2, var(--hover));
}

#stitch-joins .slider {
    margin-top: 6px;
}

/* links to the guide: on the empty page and under the shortcuts */
.empty-keys a,
.keys-guide {
    color: var(--accent);
}

.keys-guide {
    display: block;
    margin-top: 12px;
    font-size: 13px;
}