/* 题目单 covers: the square cover wrapper and its render-time theme mask, the procedural preset
   art, and the cover editor dialog. Companion of static/js/favorites-cover.js.

   Tokens: favorites.css defines --fav-* on .fav-scope and remaps them per theme. Every var() here
   carries a fallback (and the editor resolves its own --favc-* layer per theme below), so this file
   also renders correctly when it is loaded on its own.
   Taste: hairlines, 12px radii, no hover lift, no heavy shadows. Warm paper is the default theme. */

/* ------------------------------------------------------------------ cover wrapper + theme mask */

.fav-cover {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: 1 / 1;
    border-radius: var(--fav-radius, 12px);
    background: var(--fav-page, #f4f5f7);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%);
}

/* An inset shadow on the wrapper paints underneath its children, so the same hairline is repeated
   on a layer above them; otherwise a photo would cover it and pale pictures would lose their edge. */
.fav-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%);
    pointer-events: none;
}

.fav-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The mask is non-destructive: the stored picture stays neutral and follows whatever theme the
   reader switches to. Photo covers only; preset art is already drawn in theme colours. */
.fav-cover[data-kind="image"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
}

body.skin-warm-paper .fav-cover[data-kind="image"]::after {
    background:
        linear-gradient(135deg, rgb(188 81 67 / 7%) 0%, rgb(188 81 67 / 0%) 58%),
        rgb(243 233 220 / 8%);
    mix-blend-mode: multiply;
}

body.style-liquid-glass .fav-cover[data-kind="image"]::after {
    background: linear-gradient(180deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 5%) 30%, rgb(255 255 255 / 0%) 54%);
}

body.theme-dark .fav-cover,
body.theme-dark .fav-cover::before {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
}

body.theme-dark .fav-cover[data-kind="image"]::after {
    background: rgb(0 0 0 / 10%);
}

body.theme-dark.style-liquid-glass .fav-cover[data-kind="image"]::after {
    background:
        linear-gradient(180deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 0%) 46%),
        rgb(0 0 0 / 10%);
}

/* ------------------------------------------------------------------ preset art */

.fav-cover-art {
    --fav-art-field: hsl(var(--fav-hue, 42) 30% 91%);
    --fav-art-ink: hsl(var(--fav-hue, 42) 32% 34%);
    --fav-art-wash: 0.09;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    /* Lets the art adapt to its own rendered size (tile vs. 48px picker row), see below. */
    container-type: inline-size;
    background: var(--fav-art-field);
    color: var(--fav-art-ink);
    line-height: 0;
}

body.skin-warm-paper .fav-cover-art {
    --fav-art-field: hsl(var(--fav-hue, 42) 26% 90%);
    --fav-art-ink: hsl(var(--fav-hue, 42) 30% 32%);
}

body.style-liquid-glass .fav-cover-art {
    --fav-art-field: hsl(var(--fav-hue, 42) 44% 93%);
    --fav-art-ink: hsl(var(--fav-hue, 42) 38% 36%);
}

body.theme-dark .fav-cover-art {
    --fav-art-field: hsl(var(--fav-hue, 42) 18% 24%);
    --fav-art-ink: hsl(var(--fav-hue, 42) 35% 80%);
    --fav-art-wash: 0.12;
}

body.theme-dark.style-liquid-glass .fav-cover-art {
    --fav-art-field: hsl(var(--fav-hue, 42) 24% 27%);
    --fav-art-ink: hsl(var(--fav-hue, 42) 42% 84%);
}

.fav-art {
    display: block;
    width: 100%;
    height: 100%;
    shape-rendering: geometricPrecision;
}

.fav-art-field {
    fill: var(--fav-art-field);
    fill-opacity: 1;
}

.fav-art-motif {
    fill: none;
    stroke: var(--fav-art-ink);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fav-art-motif .fav-art-dash {
    stroke-dasharray: 3 4.5;
}

.fav-art-motif .fav-art-tint {
    fill: var(--fav-art-ink);
    fill-opacity: var(--fav-art-wash);
    stroke: none;
}

.fav-art-motif .fav-art-tinted {
    fill: var(--fav-art-ink);
    fill-opacity: var(--fav-art-wash);
}

.fav-art-motif .fav-art-solid {
    fill: var(--fav-art-ink);
    stroke: none;
}

/* Field-coloured fill: hides the guide lines that pass behind a shape (pendulum bobs). */
.fav-art-motif .fav-art-knock {
    fill: var(--fav-art-field);
}

.fav-art-motif .fav-art-glyph {
    fill: var(--fav-art-ink);
    stroke: none;
    font: 400 54px/1 "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
}

.fav-art-label {
    fill: var(--fav-art-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.fav-art-code {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    fill-opacity: 0.72;
}

.fav-art-name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Small renders (picker rows, the editor's preset grid): type would be illegible, so the label
   goes and the motif is re-centred, enlarged and drawn with a heavier line to stay crisp at 48px. */
@container (max-width: 131px) {
    .fav-art-label {
        display: none;
    }

    .fav-art-motif {
        stroke-width: 3;
        transform: translate(100px, 100px) scale(1.34) translate(-100px, -82px);
    }
}

/* ------------------------------------------------------------------ editor: tokens */

.fav-cover-editor {
    --favc-surface: var(--fav-surface, #ffffff);
    --favc-page: var(--fav-page, #f6f7f9);
    --favc-ink: var(--fav-ink, #1f2937);
    --favc-muted: var(--fav-muted, #6b7280);
    --favc-line: var(--fav-line, #e5e7eb);
    --favc-line-strong: #d1d5db;
    --favc-accent: var(--fav-accent, #ff4b4b);
    --favc-accent-ink: var(--fav-accent-ink, #ffffff);
    --favc-tint: var(--fav-tint, #fff1f1);
    --favc-radius: var(--fav-radius, 12px);
    --favc-danger: #b42318;
    --favc-danger-tint: #fef3f2;
    --favc-backdrop: rgb(15 23 42 / 40%);
    --favc-shadow: 0 16px 48px rgb(15 23 42 / 14%), 0 2px 8px rgb(15 23 42 / 5%);
}

body.skin-warm-paper[class] .fav-cover-editor {
    --favc-surface: var(--fav-surface, var(--warm-panel-surface, #ffffff));
    --favc-page: var(--fav-page, var(--warm-page, #f7f6f2));
    --favc-ink: var(--fav-ink, var(--warm-ink, #292a2e));
    --favc-muted: var(--fav-muted, var(--warm-muted, #868681));
    --favc-line: var(--fav-line, var(--warm-border, #e3e3dc));
    --favc-line-strong: #d6d5ce;
    --favc-accent: var(--fav-accent, var(--warm-accent, #bc5143));
    --favc-tint: var(--fav-tint, var(--warm-panel-tint, #f8eeea));
    --favc-backdrop: rgb(44 43 38 / 36%);
    --favc-shadow: 0 16px 48px rgb(47 46 36 / 12%), 0 2px 8px rgb(47 46 36 / 4%);
}

body.style-liquid-glass .fav-cover-editor {
    --favc-surface: var(--fav-surface, var(--glass-fill-strong, rgba(255, 255, 255, 0.7)));
    --favc-page: var(--fav-page, rgba(255, 255, 255, 0.42));
    --favc-line: var(--fav-line, var(--glass-border, rgba(255, 255, 255, 0.6)));
    --favc-line-strong: rgb(100 116 139 / 32%);
    --favc-shadow: var(--glass-shadow, 0 10px 34px rgba(31, 38, 135, 0.1)), var(--glass-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.85));
}

body.theme-dark .fav-cover-editor {
    --favc-surface: var(--fav-surface, var(--dark-surface, #202020));
    --favc-page: var(--fav-page, var(--dark-app-bg, #171717));
    --favc-ink: var(--fav-ink, var(--dark-text, #f2f2f2));
    --favc-muted: var(--fav-muted, var(--dark-muted, #9a9a9a));
    --favc-line: var(--fav-line, var(--dark-border, #3a3a3a));
    --favc-line-strong: #4b4b4b;
    --favc-accent: var(--fav-accent, #ff6b6b);
    --favc-tint: var(--fav-tint, #3b272d);
    --favc-danger: #ffa198;
    --favc-danger-tint: rgb(255 107 107 / 12%);
    --favc-backdrop: rgb(0 0 0 / 56%);
    --favc-shadow: 0 16px 48px rgb(0 0 0 / 45%), 0 2px 8px rgb(0 0 0 / 30%);
}

/* Warm Paper dark: the --fav-* tokens already carry the dark palette; only the editor's own literals need twins. */
body.skin-warm-paper.theme-dark[class] .fav-cover-editor {
    --favc-line-strong: #565c64;
    --favc-danger: #e37b70;
    --favc-danger-tint: rgb(227 123 112 / 12%);
    --favc-backdrop: rgb(0 0 0 / 56%);
    --favc-shadow: 0 16px 48px rgb(0 0 0 / 36%), 0 2px 8px rgb(0 0 0 / 12%);
}

body.theme-dark.style-liquid-glass .fav-cover-editor {
    --favc-surface: var(--fav-surface, var(--glass-fill-strong, rgba(40, 40, 46, 0.72)));
    --favc-page: var(--fav-page, rgba(255, 255, 255, 0.06));
    --favc-line: var(--fav-line, var(--glass-border, rgba(255, 255, 255, 0.14)));
    --favc-line-strong: rgb(255 255 255 / 22%);
}

/* Phones never run liquid glass; classic there already wears the warm workspace palette. */
@media (max-width: 767px) {
    body.style-default:not(.skin-warm-paper) .fav-cover-editor {
        --favc-surface: var(--fav-surface, var(--workspace-surface, #ffffff));
        --favc-page: var(--fav-page, var(--workspace-page, #f7f6f2));
        --favc-ink: var(--fav-ink, var(--workspace-ink, #20252b));
        --favc-muted: var(--fav-muted, var(--workspace-muted, #777975));
        --favc-line: var(--fav-line, var(--workspace-border, #e3e3dc));
        --favc-accent: var(--fav-accent, var(--workspace-accent, #c6493f));
        --favc-tint: var(--fav-tint, var(--workspace-tint, #f8eeeb));
    }
}

/* ------------------------------------------------------------------ editor: shell */

.fav-cover-editor {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--favc-ink);
    font: 500 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

/* Class rules above would otherwise out-rank the UA / preflight [hidden] rule. */
.fav-cover-editor[hidden],
.fav-cover-editor [hidden] {
    display: none !important;
}

.fav-ce-backdrop {
    position: absolute;
    inset: 0;
    background: var(--favc-backdrop);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.fav-ce-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    max-height: min(720px, calc(100dvh - 48px));
    overflow: hidden;
    border: 1px solid var(--favc-line);
    border-radius: 14px;
    background: var(--favc-surface);
    box-shadow: var(--favc-shadow);
    color-scheme: light;
    outline: none;
}

body.theme-dark .fav-ce-panel {
    color-scheme: dark;
}

body.style-liquid-glass .fav-ce-panel {
    -webkit-backdrop-filter: var(--glass-blur, blur(20px) saturate(180%));
    backdrop-filter: var(--glass-blur, blur(20px) saturate(180%));
}

.fav-ce-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 0;
}

.fav-ce-heading {
    min-width: 0;
}

.fav-ce-title {
    margin: 0;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: var(--favc-ink);
}

.fav-ce-listname {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--favc-muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-ce-icon-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--favc-muted);
    cursor: pointer;
    transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}

.fav-ce-icon-btn:hover {
    background: var(--favc-page);
    color: var(--favc-ink);
}

.fav-ce-zoom .fav-ce-icon-btn {
    border-color: var(--favc-line);
}

.fav-ce-tabs {
    display: flex;
    gap: 4px;
    margin-top: 10px;
    padding: 0 20px;
    border-bottom: 1px solid var(--favc-line);
}

.fav-ce-tab {
    margin: 0 0 -1px;
    padding: 8px 12px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--favc-muted);
    font: inherit;
    font-weight: 550;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.16s, border-color 0.16s;
}

.fav-ce-tab:first-child {
    margin-left: -12px;
}

.fav-ce-tab:hover {
    color: var(--favc-ink);
}

.fav-ce-tab[aria-selected="true"] {
    border-bottom-color: var(--favc-accent);
    color: var(--favc-accent);
}

.fav-ce-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 20px 20px;
}

/* ------------------------------------------------------------------ editor: preset grid */

.fav-ce-group-title {
    margin: 0 0 10px;
    color: var(--favc-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.fav-ce-presets + .fav-ce-group-title {
    margin-top: 22px;
}

.fav-ce-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 16px 14px;
}

.fav-ce-preset {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--favc-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fav-ce-preset-cover {
    width: 100%;
    border-radius: 10px;
    transition: box-shadow 0.16s;
}

.fav-ce-preset:hover .fav-ce-preset-cover {
    box-shadow: 0 0 0 1px var(--favc-line-strong);
}

/* The ring marks the cover in use / about to be saved: a surface-coloured gap, then the accent. */
.fav-ce-preset[aria-pressed="true"] .fav-ce-preset-cover {
    box-shadow: 0 0 0 2px var(--favc-surface), 0 0 0 4px var(--favc-accent);
}

.fav-ce-preset[aria-pressed="true"] {
    color: var(--favc-ink);
}

.fav-ce-preset-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* ------------------------------------------------------------------ editor: upload + crop */

.fav-ce-pane {
    position: relative;
}

/* Visually hidden but still focusable, so the keyboard reaches the picker through the label. */
.fav-ce-file {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.fav-ce-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 264px;
    padding: 28px 24px;
    border: 1px dashed var(--favc-line-strong);
    border-radius: var(--favc-radius);
    background: var(--favc-page);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.16s, border-color 0.16s;
}

.fav-ce-drop:hover,
.fav-cover-editor.is-file-over .fav-ce-drop {
    border-color: var(--favc-accent);
    background: var(--favc-tint);
}

.fav-ce-drop-icon {
    display: inline-flex;
    margin-bottom: 4px;
    color: var(--favc-accent);
}

.fav-ce-drop-title {
    color: var(--favc-ink);
    font-size: 15px;
    font-weight: 600;
}

.fav-ce-drop-hint {
    color: var(--favc-muted);
    font-size: 12.5px;
}

/* While a picture is being read and decoded. */
.fav-ce-pane.is-loading :is(.fav-ce-drop, .fav-ce-crop) {
    opacity: 0.6;
    pointer-events: none;
}

.fav-ce-crop {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.fav-ce-stage {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--favc-radius);
    background: #ffffff;
    outline: none;
    cursor: grab;
    /* The square owns every gesture inside it: pan, pinch and wheel must not scroll the sheet. */
    touch-action: none;
}

.fav-ce-stage.is-dragging {
    cursor: grabbing;
}

.fav-ce-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
    pointer-events: none;
}

.fav-ce-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Rule-of-thirds guide, only while the picture is being moved. */
.fav-ce-thirds {
    position: absolute;
    inset: 0;
    opacity: 0;
    filter: drop-shadow(0 0 0.5px rgb(0 0 0 / 50%));
    pointer-events: none;
    transition: opacity 0.16s;
}

.fav-ce-thirds::before,
.fav-ce-thirds::after {
    content: "";
    position: absolute;
    border: 0 solid rgb(255 255 255 / 78%);
}

.fav-ce-thirds::before {
    top: 0;
    bottom: 0;
    left: 33.333%;
    right: 33.333%;
    border-width: 0 1px;
}

.fav-ce-thirds::after {
    left: 0;
    right: 0;
    top: 33.333%;
    bottom: 33.333%;
    border-width: 1px 0;
}

.fav-ce-stage.is-dragging .fav-ce-thirds {
    opacity: 1;
}

.fav-ce-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.fav-ce-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Scoped with the element name so it out-ranks app.css's "body.theme-dark input" paint. */
.fav-cover-editor input.fav-ce-range {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    accent-color: var(--favc-accent);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.fav-cover-editor input.fav-ce-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: var(--favc-line-strong);
}

.fav-cover-editor input.fav-ce-range::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border: 0;
    border-radius: 50%;
    background: var(--favc-accent);
    -webkit-appearance: none;
    appearance: none;
}

.fav-cover-editor input.fav-ce-range::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--favc-line-strong);
}

.fav-cover-editor input.fav-ce-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: var(--favc-accent);
}

.fav-ce-label {
    margin: 6px 0 -2px;
    color: var(--favc-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.fav-ce-styles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
}

.fav-ce-style {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--favc-muted);
    font: inherit;
    cursor: pointer;
}

.fav-ce-style-thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--favc-page);
    box-shadow: 0 0 0 1px var(--favc-line);
    transition: box-shadow 0.16s;
}

.fav-ce-style:hover .fav-ce-style-thumb {
    box-shadow: 0 0 0 1px var(--favc-line-strong);
}

.fav-ce-style[aria-pressed="true"] .fav-ce-style-thumb {
    box-shadow: 0 0 0 2px var(--favc-surface), 0 0 0 4px var(--favc-accent);
}

.fav-ce-style[aria-pressed="true"] {
    color: var(--favc-ink);
}

.fav-ce-style-name {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-ce-link {
    align-self: flex-start;
    margin: 2px 0 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--favc-accent);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.fav-ce-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fav-ce-error {
    margin: 14px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--favc-danger-tint);
    color: var(--favc-danger);
    font-size: 13px;
    line-height: 1.45;
}

/* ------------------------------------------------------------------ editor: footer + buttons */

.fav-ce-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--favc-line);
}

.fav-ce-note {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--favc-muted);
    font-size: 12px;
    line-height: 1.45;
}

.fav-ce-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.fav-ce-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--favc-line-strong);
    border-radius: 8px;
    background: var(--favc-surface);
    color: var(--favc-ink);
    font: inherit;
    font-weight: 550;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.16s, border-color 0.16s, filter 0.16s;
}

.fav-ce-btn:hover {
    background: var(--favc-page);
}

.fav-ce-btn-primary {
    border-color: var(--favc-accent);
    background: var(--favc-accent);
    color: var(--favc-accent-ink);
}

.fav-ce-btn-primary:hover {
    background: var(--favc-accent);
    filter: brightness(0.93);
}

.fav-ce-btn:disabled {
    cursor: default;
    filter: none;
    opacity: 0.6;
}

/* One focus ring for every control; the second declaration softens it where color-mix exists. */
.fav-cover-editor :is(button, .fav-ce-stage):focus-visible,
.fav-ce-file:focus-visible + .fav-ce-pick .fav-ce-drop,
.fav-cover-editor input.fav-ce-range:focus-visible {
    outline: 2px solid var(--favc-accent);
    outline: 2px solid color-mix(in srgb, var(--favc-accent) 62%, transparent);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------ editor: phone bottom sheet */

@media (max-width: 767px) {
    .fav-cover-editor {
        align-items: flex-end;
        padding: 0;
    }

    .fav-ce-panel {
        width: 100%;
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
    }

    .fav-ce-head,
    .fav-ce-tabs,
    .fav-ce-body,
    .fav-ce-foot {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .fav-ce-presets {
        grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
        gap: 14px 12px;
    }

    .fav-ce-drop {
        min-height: 200px;
    }

    .fav-ce-crop {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    /* Keep the whole tool strip on screen with the square on short phones. */
    .fav-ce-stage {
        max-width: min(340px, 44vh);
        max-width: min(340px, 44dvh);
        margin: 0 auto;
    }

    .fav-ce-styles {
        display: flex;
        gap: 10px;
        margin: 0 -16px;
        padding: 4px 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .fav-ce-styles::-webkit-scrollbar {
        display: none;
    }

    .fav-ce-style {
        flex: 0 0 64px;
    }

    .fav-ce-icon-btn {
        width: 40px;
        height: 40px;
    }

    .fav-ce-link {
        align-self: center;
        padding: 8px 0;
    }

    .fav-ce-foot {
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .fav-ce-note {
        flex-basis: 100%;
    }

    .fav-ce-actions {
        flex: 1 1 100%;
    }

    .fav-ce-btn {
        flex: 1 1 0;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fav-cover-editor *,
    .fav-ce-preset-cover {
        transition: none !important;
    }
}