.preview-site {
    margin: 0;
    color: var(--color-ink);
    background: linear-gradient(180deg, #fffdf7 0, var(--color-paper) 420px);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
}

.preview-site :where(header, main, footer, nav, aside, div, ul, ol, li, form, label, input, button, a, span, p, h1, h2, img) {
    box-sizing: border-box;
}

.preview-site :where(a, button, input) {
    -webkit-tap-highlight-color: rgb(46 93 62 / 15%);
}

.page-wrap {
    inline-size: calc(100% - var(--page-gutter) * 2);
    max-inline-size: var(--page-width);
    margin-inline: auto;
}

.site-header {
    border-block-start: 4px solid var(--color-action);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
}

.site-header__inner {
    display: grid;
    grid-template-columns: minmax(44px, 1fr) minmax(44px, auto);
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding-block: var(--space-4);
}

.site-brand {
    display: flex;
    align-items: center;
    inline-size: 100%;
    max-inline-size: 200px;
    min-inline-size: 44px;
    min-block-size: 44px;
    border-radius: var(--radius-control);
}

.site-brand__image {
    display: block;
    inline-size: 100%;
    max-inline-size: 200px;
    block-size: auto;
}

.primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-action);
    border-radius: var(--radius-control);
    color: var(--color-surface);
    background: var(--color-action);
    font: 700 15px/1.4 var(--font-body);
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.primary-action:hover {
    border-color: var(--color-action-hover);
    background: var(--color-action-hover);
}

.site-search {
    grid-column: 1 / -1;
    min-inline-size: 0;
    margin: 0;
}

.site-search__label {
    display: block;
    margin-block-end: var(--space-1);
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.site-search__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.site-search__input {
    flex: 1 1 160px;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 44px;
    padding: 10px 12px;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    color: var(--color-ink);
    background: var(--color-surface);
    font: 400 16px/1.4 var(--font-body);
}

.site-search__input::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.page-main {
    padding-block: var(--space-5) 64px;
}

.page-title {
    margin: 0 0 var(--space-4);
    color: var(--color-action);
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.page-title::after {
    display: block;
    inline-size: 48px;
    block-size: 3px;
    margin-block-start: var(--space-3);
    border-radius: 2px;
    background: var(--color-gold);
    content: "";
}

.mini-grid,
.browse-grid {
    display: grid;
    align-items: start;
    grid-auto-flow: row;
    padding: 0;
    list-style: none;
}

.mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-6);
}

.mini-grid--new {
    margin-block: var(--space-6) 0;
}

.home-latest-painted {
    margin-block-start: var(--space-7);
}

.home-latest-painted .mini-grid {
    margin-block-end: var(--space-3);
}

.browse-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5) var(--grid-gap);
    margin: var(--space-5) 0 0;
}

.mini-grid__item,
.browse-grid__item {
    min-inline-size: 0;
    margin: 0;
}

.art-card {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-ink);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.art-card:hover {
    border-color: var(--color-action);
    box-shadow: var(--shadow-card-hover);
}

.art-card__art {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
    padding-block: var(--space-3);
}

.art-card__image {
    display: block;
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
    object-fit: contain;
    object-position: center;
}

/* Keep the recorded thumbnail boxes; fit the bitmap, never stretch or crop it. */
.art-card__image[width="300"][height="250"] {
    inline-size: 300px;
    block-size: 250px;
}

.art-card__image[width="140"][height="116"] {
    inline-size: 140px;
    block-size: 116px;
}

.art-card__image[width="300"][height="50"] {
    inline-size: 300px;
    block-size: 50px;
}

.art-card__image[width="122"][height="100"] {
    inline-size: 122px;
    block-size: 100px;
}

.art-card__caption {
    display: block;
    padding: 14px 16px 16px;
    border-block-start: 1px solid var(--color-border);
    border-end-start-radius: 13px;
    border-end-end-radius: 13px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.art-card--strip {
    box-shadow: none;
}

.art-card--strip .art-card__caption {
    color: var(--color-action);
    background: var(--color-leaf);
}

.art-card--featured .art-card__caption {
    padding: 10px 10px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.breadcrumb {
    margin-block: 0 var(--space-4);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
    max-inline-size: 100%;
}

.breadcrumb__link,
.breadcrumb__current {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-block: var(--space-2);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.breadcrumb__link {
    min-inline-size: 44px;
}

.breadcrumb__link {
    color: var(--color-action);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.breadcrumb__link:hover {
    text-decoration-thickness: 2px;
}

.breadcrumb__current,
.breadcrumb__separator {
    color: var(--color-muted);
}

.breadcrumb__separator {
    flex: 0 0 auto;
}

.promo-stub {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px dashed var(--color-border);
    border-inline-start: 3px solid var(--color-gold);
    border-radius: var(--radius-control);
    background: rgb(231 189 72 / 6%);
}

.promo-stub__label {
    flex: 1 1 auto;
    min-inline-size: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.promo-stub__placeholder {
    flex: 0 0 40px;
    block-size: 40px;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}

.page-description {
    max-inline-size: 72ch;
    margin-block-start: var(--space-7);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
    font-size: 17px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.page-description h2,
.home-latest-painted__heading {
    margin: 0 0 var(--space-4);
    color: var(--color-ink);
    font-family: var(--font-heading);
    font-size: clamp(23px, 2.6vw, 28px);
    line-height: 1.3;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.back-link-row {
    margin-block: var(--space-5);
}

.back-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    color: var(--color-action);
    background: var(--color-surface);
    text-decoration: none;
}

.back-link:hover {
    background: var(--color-leaf);
}

.back-link__image {
    display: block;
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
    object-fit: contain;
}

.back-link__label {
    min-inline-size: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pagination {
    margin-block: var(--space-5);
}

.pagination__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination__link,
.pagination__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    color: var(--color-action);
    background: var(--color-surface);
    font-weight: 700;
    text-decoration: none;
}

.pagination__link:hover {
    background: var(--color-leaf);
}

.pagination__current {
    border-color: var(--color-action);
    color: var(--color-surface);
    background: var(--color-action);
}

.site-footer {
    border-block-start: 1px solid var(--color-border);
    background: rgb(255 255 255 / 60%);
}

.site-footer__inner {
    padding-block: var(--space-5) var(--space-6);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.site-footer__links li {
    min-inline-size: 0;
    max-inline-size: 100%;
}

.site-footer__links a,
.home-latest-painted__link {
    display: inline-flex;
    align-items: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: 100%;
    padding-block: var(--space-2);
    color: var(--color-action);
    font-size: 15px;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.site-footer__links a:hover,
.home-latest-painted__link:hover {
    text-decoration-thickness: 2px;
}

.site-footer__copyright {
    max-inline-size: 80ch;
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

/* Keyboard focus keeps its contrast halo even while a link is hovered. */
.preview-site :where(a, input, button):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px var(--color-surface);
}

@media (min-width: 360px) {
    :root {
        --page-gutter: 16px;
    }
}

@media (min-width: 680px) {
    .browse-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mini-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 720px) {
    :root {
        --page-gutter: 24px;
    }

    .site-header__inner {
        grid-template-columns: minmax(44px, 1fr) minmax(44px, auto) minmax(220px, 320px);
        gap: var(--space-5);
        padding-block: var(--space-5);
    }

    .site-search {
        grid-column: auto;
    }

    .page-main {
        padding-block-start: var(--space-6);
    }
}

@media (min-width: 1020px) {
    .browse-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .primary-action,
    .art-card {
        transition: none;
    }
}

@media (forced-colors: active) {
    .art-card,
    .primary-action,
    .back-link,
    .pagination__link,
    .pagination__current,
    .site-search__input {
        border: 1px solid CanvasText;
    }

    .preview-site :where(a, input, button):focus-visible {
        outline-color: Highlight;
        box-shadow: none;
    }
}

/* Pagesake promotion: local image detail, shared green-and-paper styling. */
.pagesake-promo {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block: var(--space-5);
    padding: clamp(16px, 2.5vw, 24px);
    border: 1px solid var(--color-border);
    border-block-start: 3px solid var(--color-gold);
    border-radius: var(--radius-card);
    color: var(--color-ink);
    background: linear-gradient(125deg, var(--color-leaf), var(--color-paper));
    box-shadow: var(--shadow-card);
}

.pagesake-promo :where(div, span, p, h2, a, button, img, dialog, svg) {
    box-sizing: border-box;
    min-inline-size: 0;
}

.pagesake-promo .pagesake-promo__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    color: var(--color-action);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pagesake-promo .pagesake-promo__label::before {
    flex: 0 0 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--color-action);
    content: "";
}

.pagesake-promo .pagesake-promo__inner {
    display: grid;
    align-items: center;
    gap: var(--space-5);
}

.pagesake-promo .pagesake-promo__story {
    display: grid;
    grid-template-columns: minmax(0, 3fr) auto minmax(60px, 1.1fr);
    align-items: center;
    gap: clamp(6px, 1.1vw, 12px);
    inline-size: 100%;
    max-inline-size: 460px;
    margin-inline: auto;
}

.pagesake-promo .pagesake-promo__inputs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: clamp(4px, 0.8vw, 8px);
}

.pagesake-promo .pagesake-promo__detail {
    display: flex;
    align-items: center;
    inline-size: 100%;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-action);
    background: var(--color-surface);
    box-shadow: 0 3px 7px rgb(43 48 41 / 8%);
    text-decoration: none;
    cursor: zoom-in;
}

.pagesake-promo .pagesake-promo__detail--book {
    border-color: var(--color-control-border);
    padding: 6px;
    box-shadow: 3px 4px 0 var(--color-border), 0 4px 10px rgb(43 48 41 / 8%);
}

.pagesake-promo .pagesake-promo__detail:hover {
    border-color: var(--color-action);
    background: var(--color-leaf);
}

.pagesake-promo .pagesake-promo__frame {
    display: block;
    inline-size: 100%;
    aspect-ratio: 5 / 4;
}

.pagesake-promo .pagesake-promo__frame--book {
    aspect-ratio: 3 / 4;
}

.pagesake-promo .pagesake-promo__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    object-position: center;
}

.pagesake-promo .pagesake-promo__arrow {
    color: var(--color-action);
    font-size: clamp(18px, 2.4vw, 28px);
    line-height: 1;
}

.pagesake-promo .pagesake-promo__copy {
    max-inline-size: 48ch;
    margin-inline: auto;
}

.pagesake-promo .pagesake-promo__headline {
    margin: 0 0 var(--space-2);
    color: var(--color-action);
    font-family: var(--font-heading);
    font-size: clamp(20px, 2.2vw, 25px);
    line-height: 1.25;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.pagesake-promo .pagesake-promo__body {
    margin: 0 0 var(--space-4);
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.pagesake-promo .pagesake-promo__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-action);
    border-radius: var(--radius-control);
    color: var(--color-surface);
    background: var(--color-action);
    font: 700 15px/1.4 var(--font-body);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pagesake-promo .pagesake-promo__cta:hover {
    border-color: var(--color-action-hover);
    background: var(--color-action-hover);
}

.pagesake-promo .pagesake-promo__cta svg {
    flex: 0 0 18px;
    inline-size: 18px;
    block-size: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagesake-promo .pagesake-promo__dialog {
    inline-size: min(900px, calc(100% - 32px));
    max-inline-size: 900px;
    max-block-size: calc(100vh - 32px);
    max-block-size: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-card);
    color: var(--color-ink);
    background: var(--color-paper);
    box-shadow: 0 18px 70px rgb(43 48 41 / 25%);
    overflow: auto;
    overscroll-behavior: contain;
}

.pagesake-promo .pagesake-promo__dialog::backdrop {
    background: rgb(43 48 41 / 65%);
}

.pagesake-promo .pagesake-promo__panel {
    display: grid;
    gap: var(--space-3);
    padding: clamp(12px, 2.5vw, 24px);
}

.pagesake-promo .pagesake-promo__dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.pagesake-promo .pagesake-promo__dialog-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pagesake-promo .pagesake-promo__close {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 10px;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    color: var(--color-action);
    background: var(--color-surface);
    cursor: pointer;
}

.pagesake-promo .pagesake-promo__close:hover {
    background: var(--color-leaf);
}

.pagesake-promo .pagesake-promo__close svg {
    inline-size: 22px;
    block-size: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.pagesake-promo .pagesake-promo__large-image {
    display: block;
    inline-size: 100%;
    block-size: min(60vh, 640px);
    block-size: min(60dvh, 640px);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    object-fit: contain;
    object-position: center;
}

.pagesake-promo .pagesake-promo__caption {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pagesake-promo :where(a, button):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px var(--color-surface);
}

@media (min-width: 840px) {
    .pagesake-promo .pagesake-promo__inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--space-6);
    }

    .pagesake-promo .pagesake-promo__copy {
        margin-inline: 0;
    }
}

@media (forced-colors: active) {
    .pagesake-promo,
    .pagesake-promo :where(a, button, dialog) {
        border-color: CanvasText;
    }

    .pagesake-promo :where(a, button):focus-visible {
        outline-color: Highlight;
        box-shadow: none;
    }
}
/* End Pagesake promotion. */

/* Local coloring workspace. Existing page/layout/focus rules stay unchanged. */
.paint-editor {
    --paint-clear-ink: #87463c;
    --paint-clear-paper: #fff3ed;
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.paint-editor :where(div, dialog, canvas, button, input, label, output, span, svg) {
    box-sizing: border-box;
}

.paint-editor .paint-editor__controls,
.paint-editor .paint-editor__workarea {
    min-inline-size: 0;
    max-inline-size: 100%;
}

.paint-editor .paint-editor__controls {
    border-block-end: 1px solid var(--color-border);
}

.paint-editor .paint-editor__view-controls {
    padding: var(--space-2) var(--space-3);
    background: var(--color-leaf);
    font-size: 14px;
}

.paint-editor .paint-editor__toolbar,
.paint-editor .paint-editor__colorbar,
.paint-editor .paint-editor__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.paint-editor .paint-editor__toolbar,
.paint-editor .paint-editor__colorbar {
    border-block-end: 1px solid var(--color-border);
}

.paint-editor .paint-editor__group,
.paint-editor .paint-editor__settings,
.paint-editor .paint-editor__zoom,
.paint-editor .paint-editor__view-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    min-inline-size: 0;
    max-inline-size: 100%;
}

.paint-editor .paint-editor__group,
.paint-editor .paint-editor__zoom,
.paint-editor .paint-editor__palette {
    position: relative;
}

.paint-editor .paint-editor__tool-flow,
.paint-editor .paint-editor__zoom {
    inline-size: 100%;
}

.paint-editor .paint-editor__hint {
    display: flex;
    min-inline-size: 0;
    max-inline-size: 100%;
}

.paint-editor .paint-editor__button,
.paint-editor .paint-editor__swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: 100%;
    padding: 8px;
    border: 1px solid var(--color-control-border);
    border-radius: 8px;
    color: var(--color-ink);
    background: var(--color-surface);
    font: 700 14px/1.4 var(--font-body);
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.paint-editor .paint-editor__button--icon {
    flex: 0 0 44px;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
}

.paint-editor .paint-editor__button > span {
    min-inline-size: 0;
}

.paint-editor .paint-editor__button svg {
    flex: 0 0 20px;
    inline-size: 20px;
    block-size: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Duplicate visual help only: full aria-labels remain available without CSS.
   Anchor to the enclosing group, not the tiny button, to stay inside the rail.
   The native hidden attribute is overridden only for fine hover or keyboard
   focus; touch focus cannot leave a sticky label over adjacent controls. */
.paint-editor .paint-editor__tooltip {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 4;
    inline-size: max-content;
    max-inline-size: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-action);
    border-radius: 6px;
    color: var(--color-surface);
    background: var(--color-action);
    box-shadow: 0 3px 10px rgb(43 48 41 / 14%);
    font: 400 12px/1.45 var(--font-body);
    text-align: start;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.paint-editor .paint-editor__button:focus-visible:not(:disabled) + .paint-editor__tooltip[hidden],
.paint-editor .paint-editor__swatch--custom:focus-visible:not(:disabled) + .paint-editor__tooltip[hidden] {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .paint-editor .paint-editor__hint:hover > .paint-editor__button:not(:disabled) + .paint-editor__tooltip[hidden],
    .paint-editor .paint-editor__hint:hover > .paint-editor__swatch--custom:not(:disabled) + .paint-editor__tooltip[hidden] {
        display: block;
    }
}

.paint-editor .paint-editor__button:hover:not(:disabled) {
    border-color: var(--color-action);
    background: var(--color-leaf);
}

.paint-editor .paint-editor__button--clear:not(:disabled) {
    color: var(--paint-clear-ink);
}

.paint-editor .paint-editor__button--clear:hover:not(:disabled) {
    border-color: var(--paint-clear-ink);
    background: var(--paint-clear-paper);
}

.paint-editor .paint-editor__button[aria-pressed="true"],
.paint-editor .paint-editor__button--primary {
    border-color: var(--color-action);
    color: var(--color-surface);
    background: var(--color-action);
}

.paint-editor .paint-editor__button[data-editor-tool][aria-pressed="true"] {
    border-width: 2px;
    padding: 7px;
}

.paint-editor .paint-editor__button[data-editor-tool][aria-pressed="true"]::after {
    position: absolute;
    inset-block-start: 1px;
    inset-inline-end: 1px;
    inline-size: 12px;
    block-size: 12px;
    border-radius: 50%;
    color: var(--color-action);
    background: var(--color-surface);
    font: 700 10px/12px var(--font-body);
    content: "✓";
}

.paint-editor .paint-editor__button[aria-pressed="true"]:hover:not(:disabled),
.paint-editor .paint-editor__button--primary:hover:not(:disabled) {
    border-color: var(--color-action-hover);
    background: var(--color-action-hover);
}

/* A short press response complements hover without moving targets or focus. */
.paint-editor .paint-editor__button[data-editor-tool],
.paint-editor .paint-editor__swatch {
    transition: background-color 90ms ease-out, border-color 90ms ease-out;
}

.paint-editor .paint-editor__button[data-editor-tool]:active:not(:disabled),
.paint-editor .paint-editor__swatch:active:not(:disabled) {
    border-color: var(--color-action-hover);
    background: var(--color-border);
}

.paint-editor .paint-editor__button[data-editor-tool][aria-pressed="true"]:active:not(:disabled) {
    border-color: var(--color-ink);
    background: var(--color-ink);
}

.paint-editor .paint-editor__button:disabled,
.paint-editor .paint-editor__swatch:disabled {
    border-color: var(--color-border);
    color: var(--color-muted);
    background: var(--color-leaf);
    cursor: not-allowed;
}

.paint-editor .paint-editor__palette {
    display: flex;
    flex: 1 1 428px;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-inline-size: 0;
}

.paint-editor .paint-editor__swatch {
    position: relative;
    flex: 0 0 44px;
    padding: 8px;
}

.paint-editor .paint-editor__swatch span {
    inline-size: 26px;
    block-size: 26px;
    border-radius: 50%;
    background: var(--paint-swatch);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 16%);
}

.paint-editor .paint-editor__swatch--custom {
    inline-size: 92px;
    flex: 0 0 92px;
}

.paint-editor .paint-editor__swatch--custom > span {
    position: absolute;
    inset: 6px;
    inline-size: auto;
    block-size: auto;
    border-radius: 5px;
    background: linear-gradient(100deg, #ff5567, #ffc84a 22%, #9ed251 42%, #33c5c3 60%, #697bea 78%, #d466d4);
}

.paint-editor .paint-editor__swatch--custom svg {
    position: relative;
    inline-size: 26px;
    block-size: 26px;
    padding: 4px;
    border-radius: 50%;
    background: var(--color-surface);
    stroke: var(--color-ink);
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    pointer-events: none;
}

.paint-editor .paint-editor__swatch[aria-pressed="true"] {
    border: 2px solid var(--color-action);
    padding: 7px;
}

.paint-editor .paint-editor__swatch[aria-pressed="true"]::after {
    position: absolute;
    inset-block-start: 1px;
    inset-inline-end: 1px;
    inline-size: 18px;
    block-size: 18px;
    border: 1px solid var(--color-action);
    border-radius: 50%;
    color: var(--color-action);
    background: var(--color-surface);
    font: 700 13px/16px var(--font-body);
    content: "✓";
}

.paint-editor .paint-editor__settings {
    flex: 1 1 272px;
    gap: var(--space-2);
}

.paint-editor .paint-editor__color-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    max-inline-size: 100%;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.paint-editor .paint-editor__color-label input {
    flex: 0 0 52px;
    inline-size: 52px;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 4px;
    border: 1px solid var(--color-control-border);
    border-radius: 8px;
    background: var(--color-surface);
    cursor: pointer;
}

.paint-editor .paint-editor__size {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    flex: 1 1 168px;
    min-inline-size: 0;
    max-inline-size: 280px;
    font-size: 14px;
}

.paint-editor .paint-editor__size label {
    flex: 0 1 auto;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

.paint-editor .paint-editor__size input {
    flex: 1 1 88px;
    inline-size: 88px;
    min-inline-size: 44px;
    min-block-size: 44px;
    margin: 0;
    accent-color: var(--color-action);
    cursor: pointer;
}

.paint-editor .paint-editor__confirmation {
    margin: var(--space-3) var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    background: var(--color-leaf);
}

.paint-editor .paint-editor__confirmation p {
    margin: 0 0 var(--space-2);
    overflow-wrap: anywhere;
}

.paint-editor .paint-editor__confirmation button {
    margin-block: var(--space-1);
}

.paint-editor .paint-editor__viewport {
    min-inline-size: 0;
    min-block-size: 180px;
    max-block-size: min(72vh, 800px);
    padding: var(--space-4);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-control-border) var(--color-leaf);
    background: linear-gradient(145deg, var(--color-leaf), var(--color-paper));
}

.paint-editor .paint-editor__sheet {
    position: relative;
    inline-size: min(100%, var(--paint-display-width, 800px));
    margin-inline: auto;
    background: var(--color-surface);
    box-shadow: 0 2px 12px rgb(43 48 41 / 8%), 0 0 0 1px var(--color-border);
}

.paint-editor[data-zoomed="true"] .paint-editor__sheet {
    inline-size: var(--paint-display-width);
}

.paint-editor .paint-editor__canvas {
    display: block;
    inline-size: 100%;
    block-size: auto;
    background: var(--color-surface);
    touch-action: none;
    cursor: crosshair;
}

/* Old composite pixels fade away; the committed drawing stays stationary. */
.paint-editor .paint-editor__feedback {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    animation: paint-editor-fill-reveal 170ms ease-out both;
}

@keyframes paint-editor-fill-reveal {
    from { opacity: 1; }
    to { opacity: 0; }
}

.paint-editor[data-tool="pan"] .paint-editor__viewport {
    touch-action: none;
    cursor: grab;
}

.paint-editor[data-tool="pan"] .paint-editor__canvas {
    cursor: grab;
}

.paint-editor[data-panning="true"] .paint-editor__viewport,
.paint-editor[data-panning="true"] .paint-editor__canvas {
    cursor: grabbing;
}

.paint-editor .paint-editor__cursor {
    position: absolute;
    inline-size: 16px;
    block-size: 16px;
    border: 2px solid #111111;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #ffffff;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.paint-editor .paint-editor__zoom output {
    min-inline-size: 5ch;
    color: var(--color-muted);
    font-size: 13px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.paint-editor .paint-editor__notes {
    padding: 0 var(--space-3) var(--space-3);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.paint-editor .paint-editor__status {
    min-block-size: 1.55em;
    margin: 0;
    color: var(--color-action);
    font-weight: 700;
}

.paint-editor .paint-editor__help,
.paint-editor .paint-editor__pan-help {
    max-inline-size: 76ch;
    margin: var(--space-2) 0 0;
    color: var(--color-muted);
}

.paint-editor .paint-editor__pan-help {
    font-size: 13px;
}

.paint-editor .paint-editor__workspace-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: 44px;
    padding: var(--space-1) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.paint-editor .paint-editor__tool-feedback-slot {
    position: relative;
    flex: 1;
    min-inline-size: 0;
    block-size: 32px;
}

.paint-editor .paint-editor__tool-feedback {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    max-inline-size: 100%;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-leaf);
    color: var(--color-ink);
    line-height: 1.2;
    overflow-wrap: anywhere;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.paint-editor .paint-editor__tool-feedback[data-visible="true"] {
    opacity: 1;
}

.paint-editor .paint-editor__color-dialog {
    inline-size: min(360px, calc(100% - 24px));
    max-inline-size: calc(100% - 24px);
    max-block-size: calc(100% - 32px);
    margin: auto;
    padding: var(--space-4);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-card);
}

.paint-editor .paint-editor__color-dialog::backdrop {
    background: rgb(20 40 32 / 38%);
}

.paint-editor .paint-editor__color-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.paint-editor .paint-editor__color-heading h2 {
    min-inline-size: 0;
    margin: 0;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.paint-editor .paint-editor__color-preview {
    flex: 0 0 52px;
    block-size: 44px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--paint-preview, #c500ff);
}

.paint-editor .paint-editor__color-current {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block: var(--space-3);
    font-size: 13px;
    color: var(--color-muted);
}

.paint-editor .paint-editor__color-current output {
    color: var(--color-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.paint-editor .paint-editor__color-channel label {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: 700;
}

.paint-editor .paint-editor__color-channel output {
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
}

.paint-editor .paint-editor__color-range {
    appearance: none;
    inline-size: 100%;
    min-inline-size: 44px;
    min-block-size: 44px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    accent-color: var(--color-ink);
}

.paint-editor .paint-editor__color-range--hue {
    --paint-range-track: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.paint-editor .paint-editor__color-range--saturation {
    --paint-range-track: linear-gradient(90deg, var(--paint-sat-start), var(--paint-sat-end));
}

.paint-editor .paint-editor__color-range--lightness {
    --paint-range-track: linear-gradient(90deg, #000, var(--paint-light-mid), #fff);
}

.paint-editor .paint-editor__color-range::-webkit-slider-runnable-track {
    block-size: 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--paint-range-track);
}

.paint-editor .paint-editor__color-range::-moz-range-track {
    block-size: 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--paint-range-track);
}

.paint-editor .paint-editor__color-range::-webkit-slider-thumb {
    appearance: none;
    inline-size: 24px;
    block-size: 24px;
    margin-block-start: -7px;
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    background: var(--paint-preview);
    box-shadow: 0 0 0 1px var(--color-ink);
}

.paint-editor .paint-editor__color-range::-moz-range-thumb {
    inline-size: 20px;
    block-size: 20px;
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    background: var(--paint-preview);
    box-shadow: 0 0 0 1px var(--color-ink);
}

.paint-editor .paint-editor__color-help {
    margin-block: var(--space-2) var(--space-3);
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.5;
}

.paint-editor .paint-editor__color-done {
    inline-size: 100%;
}

.paint-editor :where(button, input, canvas):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px var(--color-surface);
}

.paint-editor .paint-editor__button:focus-visible {
    z-index: 2;
}

.paint-editor:fullscreen {
    margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-radius: 0;
    overflow: auto;
    background: var(--color-paper);
}

/* Legacy vertical artwork has a right rail; mobile keeps tools above the sheet. */
@media (min-width: 900px) {
    .paint-editor[data-orientation="portrait"] .paint-editor__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 248px;
        grid-template-areas: "workarea controls";
        align-items: start;
    }

    .paint-editor[data-orientation="portrait"] .paint-editor__controls {
        grid-area: controls;
        border-block-end: 0;
        border-inline-start: 1px solid var(--color-border);
    }

    .paint-editor[data-orientation="portrait"] .paint-editor__workarea {
        grid-area: workarea;
    }

    .paint-editor[data-orientation="portrait"] .paint-editor__toolbar,
    .paint-editor[data-orientation="portrait"] .paint-editor__colorbar {
        flex-direction: column;
        align-items: stretch;
    }

    .paint-editor[data-orientation="portrait"] .paint-editor__palette,
    .paint-editor[data-orientation="portrait"] .paint-editor__settings {
        flex-basis: auto;
    }
}

@media (max-width: 420px) {
    .paint-editor .paint-editor__toolbar,
    .paint-editor .paint-editor__colorbar,
    .paint-editor .paint-editor__actions {
        padding: var(--space-2);
    }

    .paint-editor .paint-editor__view-controls {
        padding-inline: var(--space-2);
    }

    .paint-editor .paint-editor__notes {
        padding-inline: var(--space-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .paint-editor .paint-editor__button,
    .paint-editor .paint-editor__button[data-editor-tool],
    .paint-editor .paint-editor__swatch {
        transition: none;
    }

    .paint-editor .paint-editor__feedback {
        animation: none;
        opacity: 0;
    }

    .paint-editor .paint-editor__tool-feedback {
        transition: none;
    }
}

@media (forced-colors: active) {
    .paint-editor .paint-editor__button,
    .paint-editor .paint-editor__swatch,
    .paint-editor .paint-editor__sheet,
    .paint-editor .paint-editor__tooltip {
        border-color: CanvasText;
    }

    .paint-editor .paint-editor__tooltip {
        color: CanvasText;
        background: Canvas;
        box-shadow: none;
    }

    .paint-editor .paint-editor__swatch span {
        forced-color-adjust: none;
    }

    .paint-editor .paint-editor__button[aria-pressed="true"],
    .paint-editor .paint-editor__swatch[aria-pressed="true"] {
        outline: 2px solid Highlight;
    }

    .paint-editor :where(button, input, canvas):focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 4px;
    }

    .paint-editor .paint-editor__color-range {
        appearance: auto;
    }
}

/* Expanded page wrappers; no existing screen-layout or editor rules change. */
.drawing-page,
.search-results,
.print-page {
    min-inline-size: 0;
    max-inline-size: 100%;
}

.drawing-page .drawing-page__description {
    max-inline-size: 72ch;
    margin-block: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
    font-size: 17px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.drawing-page .drawing-page__description h2 {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: clamp(23px, 2.6vw, 28px);
    line-height: 1.3;
}

.drawing-page .drawing-page__description p {
    margin: 0;
    white-space: pre-line;
}

.drawing-page .drawing-page__related {
    margin-block: var(--space-6);
}

.drawing-page .drawing-page__fallback-image {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    margin-inline: auto;
    object-fit: contain;
}

.search-results .search-results__summary {
    margin: 0 0 var(--space-4);
    color: var(--color-muted);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.search-results .search-results__more {
    margin-block: var(--space-5) 0;
    text-align: center;
}

.search-results .search-results__more-button:disabled {
    color: var(--color-muted);
    border-color: var(--color-border);
    background: var(--color-leaf);
    cursor: wait;
}

.search-results .search-results__status {
    min-block-size: 1.55em;
    margin: var(--space-3) 0 0;
    color: var(--color-muted);
    font-size: 15px;
    text-align: center;
    overflow-wrap: anywhere;
}

.print-page .print-page__controls {
    margin-block-end: var(--space-5);
}

.print-page .print-page__worksheet {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.print-page .print-page__image {
    display: block;
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
    margin-inline: auto;
    object-fit: contain;
}

/* Opt in through the new worksheet marker, without changing body markup. */
@media print {
    .preview-site:has(.print-page) {
        color: #000000;
        background: #ffffff;
    }

    .preview-site:has(.print-page) .site-header,
    .preview-site:has(.print-page) .site-footer,
    .preview-site:has(.print-page) .integration-manifest,
    .print-page .print-page__controls {
        display: none;
    }

    .preview-site:has(.print-page) .page-main {
        inline-size: 100%;
        max-inline-size: none;
        margin: 0;
        padding: 0;
    }

    .print-page .print-page__worksheet {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
    }

    .print-page .print-page__image {
        max-block-size: calc(100vh - 24mm);
        max-inline-size: 100%;
    }
}

/* Saved preview: private page wrapper only. */
.saved-preview .saved-preview__bar {
    border-block-start: 3px solid var(--color-action);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
}

.saved-preview .saved-preview__bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    min-block-size: 64px;
    padding-block: var(--space-2);
}

.saved-preview .saved-preview__label {
    min-inline-size: 0;
    color: var(--color-action);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.saved-preview .saved-preview__home {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-action);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.saved-preview .saved-preview__home > span:last-child {
    min-inline-size: 0;
}

.saved-preview .saved-preview__home:hover {
    border-color: var(--color-action);
    background: var(--color-leaf);
}

.saved-preview .saved-preview__main {
    min-inline-size: 0;
    padding-block: var(--space-5) var(--space-7);
}

.saved-preview .saved-preview__intro {
    display: grid;
    gap: var(--space-2);
    min-inline-size: 0;
}

.saved-preview .saved-preview__title {
    margin: 0;
    color: var(--color-action);
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.saved-preview .saved-preview__expiry {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.saved-preview .saved-preview__note {
    max-inline-size: 80ch;
    margin: var(--space-1) 0 0;
    padding: var(--space-2) var(--space-3);
    border-inline-start: 2px solid var(--color-action);
    color: var(--color-muted);
    background: var(--color-leaf);
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.saved-preview .saved-preview__fallback {
    margin: var(--space-5) 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

.saved-preview .saved-preview__fallback-image {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
    object-fit: contain;
}

.saved-preview .saved-preview__reference {
    margin: var(--space-4) 0 0;
    color: var(--color-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

@media (forced-colors: active) {
    .saved-preview .saved-preview__bar,
    .saved-preview .saved-preview__home,
    .saved-preview .saved-preview__note,
    .saved-preview .saved-preview__fallback {
        border-color: CanvasText;
    }
}
/* End saved preview. */

/* Browser email: optional editor strip and dialog only. */
/* Browser-email polish: persistent footer result only. */
.paint-editor .browser-email__result {
    margin: 0 var(--space-3) var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-leaf);
    color: var(--color-muted);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.paint-editor .browser-email__result > p {
    margin: 0;
}

.paint-editor .browser-email__result-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
}

.paint-editor .browser-email__result-links[hidden] {
    display: none;
}

.paint-editor .browser-email__result-links a {
    display: inline-flex;
    align-items: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    color: var(--color-action);
    overflow-wrap: anywhere;
}

.paint-editor .browser-email__result-links a:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

@media (forced-colors: active) {
    .paint-editor .browser-email__result {
        border-color: CanvasText;
    }
}
/* End browser-email polish footer result. */

.paint-editor .browser-email-dialog {
    box-sizing: border-box;
    inline-size: min(620px, calc(100% - 24px));
    max-inline-size: calc(100% - 24px);
    min-inline-size: 0;
    max-block-size: calc(100vh - 32px);
    max-block-size: calc(100dvh - 32px);
    margin: auto;
    padding: 24px;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-block-start: 3px solid var(--color-action);
    border-radius: var(--radius-card);
    color: var(--color-ink);
    background: var(--color-paper);
    box-shadow: 0 8px 28px rgb(43 48 41 / 8%);
    font: 400 14px/1.55 var(--font-body);
    overflow-wrap: anywhere;
}

.paint-editor .browser-email-dialog :where(div, p, h2, h3, fieldset, input, textarea, button, span, svg, a) {
    box-sizing: border-box;
    min-inline-size: 0;
}

.paint-editor .browser-email-dialog::backdrop {
    background: rgb(20 40 32 / 38%);
}

.paint-editor .browser-email-dialog--inline {
    display: block;
    position: static;
    margin-block: var(--space-4);
}

.paint-editor .browser-email-dialog[hidden] {
    display: none;
}

.paint-editor .browser-email-dialog .browser-email__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-block-end: 16px;
}

.paint-editor .browser-email-dialog .browser-email__heading {
    flex: 1 1 180px;
}

.paint-editor .browser-email-dialog .send-email-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    block-size: 44px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-action);
    background: var(--color-leaf);
}

.paint-editor .browser-email-dialog .send-email-panel__icon svg {
    inline-size: 24px;
    block-size: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.paint-editor .browser-email-dialog .send-email-panel__title {
    margin: 0 0 4px;
    color: var(--color-action);
    font: 700 23px/1.2 var(--font-heading);
}

.paint-editor .browser-email-dialog .send-email-panel__intro {
    margin: 0;
    color: var(--color-muted);
}

.paint-editor .browser-email-dialog .send-email-panel__availability {
    margin: 0 0 20px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-action);
    background: var(--color-leaf);
    font-weight: 700;
}

.paint-editor .browser-email-dialog .browser-email__close,
.paint-editor .browser-email-dialog .browser-email__secondary {
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-control-border);
    border-radius: 8px;
    color: var(--color-ink);
    background: var(--color-surface);
    font: 700 14px/1.4 var(--font-body);
    overflow-wrap: anywhere;
    cursor: pointer;
}

.paint-editor .browser-email-dialog .browser-email__close {
    margin-inline-start: auto;
}

.paint-editor .browser-email-dialog .browser-email__secondary:disabled {
    color: var(--color-muted);
    background: var(--color-leaf);
    cursor: not-allowed;
}

.paint-editor .browser-email-dialog .browser-email__public {
    margin-block: 0 var(--space-2);
    padding-inline-start: var(--space-3);
    border-inline-start: 2px solid var(--color-action);
    color: var(--color-ink);
}

.paint-editor .browser-email-dialog .send-email-panel__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.paint-editor .browser-email-dialog .send-email-panel__fieldset legend {
    max-inline-size: 100%;
    padding: 0;
    margin-block-end: 12px;
    font-weight: 700;
}

.paint-editor .browser-email-dialog .send-email-panel__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.paint-editor .browser-email-dialog .send-email-panel__field label {
    display: block;
    margin-block-end: 6px;
    font-weight: 700;
    line-height: 1.45;
}

.paint-editor .browser-email-dialog .send-email-panel__requirement {
    margin-inline-start: 6px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 400;
}

.paint-editor .browser-email-dialog .send-email-panel__input,
.paint-editor .browser-email-dialog .send-email-panel__submit {
    inline-size: 100%;
    min-inline-size: 44px;
    min-block-size: 48px;
    max-inline-size: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-control-border);
    border-radius: 8px;
    color: var(--color-ink);
    background: var(--color-surface);
    font: inherit;
    font-size: 16px;
}

.paint-editor .browser-email-dialog .send-email-panel__message {
    display: block;
    min-block-size: 132px;
    resize: vertical;
}

.paint-editor .browser-email-dialog .send-email-panel__input[readonly],
.paint-editor .browser-email-dialog .send-email-panel__input:disabled {
    opacity: 1;
    color: var(--color-muted);
    -webkit-text-fill-color: var(--color-muted);
    background: var(--color-leaf);
}

.paint-editor .browser-email-dialog .send-email-panel__submit {
    font-weight: 700;
    color: var(--color-surface);
    background: var(--color-action);
}

.paint-editor .browser-email-dialog .send-email-panel__submit:disabled {
    color: var(--color-action);
    background: #e2eadf;
    cursor: not-allowed;
}

.paint-editor .browser-email-dialog .send-email-panel__hint,
.paint-editor .browser-email-dialog .send-email-panel__field-error {
    margin: 6px 0 0;
    font-size: 12px;
}

.paint-editor .browser-email-dialog .send-email-panel__hint,
.paint-editor .browser-email-dialog .send-email-panel__capture {
    color: var(--color-muted);
}

.paint-editor .browser-email-dialog .send-email-panel__capture {
    margin: 12px 0 0;
    font-size: 13px;
}

.paint-editor .browser-email-dialog .send-email-panel__errors,
.paint-editor .browser-email-dialog .send-email-panel__status {
    margin: 16px 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.paint-editor .browser-email-dialog .send-email-panel__errors {
    border-inline-start: 3px solid #914437;
}

.paint-editor .browser-email-dialog .send-email-panel__errors h3 {
    margin: 0;
    font-size: 14px;
}

.paint-editor .browser-email-dialog .send-email-panel__field-error {
    color: #914437;
}

.paint-editor .browser-email-dialog .send-email-panel__input[aria-invalid="true"] {
    border-width: 2px;
    border-color: #914437;
}

.paint-editor .browser-email-dialog .browser-email__state,
.paint-editor .browser-email-dialog .browser-email__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
}

.paint-editor .browser-email-dialog .browser-email__state > p {
    flex: 1 1 240px;
}

.paint-editor .browser-email-dialog .browser-email__actions > button {
    flex: 1 1 180px;
}

.paint-editor .browser-email-dialog .browser-email__links {
    padding-inline-start: var(--space-4);
}

.paint-editor .browser-email-dialog .browser-email__links a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--color-action);
    overflow-wrap: anywhere;
}

.paint-editor .browser-email-dialog :where(input, textarea, button, a, [tabindex="-1"]):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

@media (min-width: 681px) {
    .paint-editor .browser-email-dialog .send-email-panel__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .paint-editor .browser-email-dialog .send-email-panel__field--wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .paint-editor .browser-email-dialog {
        padding: 16px;
    }
}

@media (forced-colors: active) {
    .paint-editor .browser-email-dialog,
    .paint-editor .browser-email-dialog .browser-email__close,
    .paint-editor .browser-email-dialog .browser-email__secondary,
    .paint-editor .browser-email-dialog .browser-email__public,
    .paint-editor .browser-email-dialog .send-email-panel__input,
    .paint-editor .browser-email-dialog .send-email-panel__submit,
    .paint-editor .browser-email-dialog .send-email-panel__errors {
        border-color: CanvasText;
    }

    .paint-editor .browser-email-dialog :where(input, textarea, button, a, [tabindex="-1"]):focus-visible {
        outline-color: Highlight;
    }
}

@media print {
    .paint-editor .browser-email-dialog,
    .paint-editor .paint-editor__actions [data-browser-email-open],
    .paint-editor .browser-email__result {
        display: none;
    }
}
/* End browser email. */

/* Anonymous email: verification only; reuse the accepted dialog and controls. */
.paint-editor .anonymous-email__verification {
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border);
}
.paint-editor .anonymous-email__verification h3 {
    margin: 0;
    font: 700 16px/1.4 var(--font-body);
}
.paint-editor .anonymous-email__verification button {
    margin-block-start: 12px;
}
.paint-editor .anonymous-email__widget {
    inline-size: 150px;
    min-block-size: 140px;
    margin-block-start: 12px;
}
.paint-editor .anonymous-email__widget[hidden] {
    display: none;
}
@media print {
    .paint-editor [data-anonymous-email-open] {
        display: none;
    }
}
/* End anonymous email. */