/* Carry the homepage's quieter UI into the color and typography editors.
   Keep customer colors, type specimens, live artwork and printed guides intact. */
@media screen {
    main.color-palette-page .color-palette-section-heading p,
    main.color-palette-page .color-palette-marketing-heading p {
        color: #625e6b;
        font-size: 16px;
        line-height: 1.75;
    }
    main.color-palette-page .color-palette-marketing-heading > span { color: #625e6b; font-size: 12px; }
    main.color-palette-page .color-palette-board { border-color: #e5e4eb; border-radius: 20px; }
    main.color-palette-page .color-palette-board-toolbar { border-color: #e5e4eb; }
    main.color-palette-page .color-palette-board-toolbar p,
    main.color-palette-page .color-palette-board-toolbar p > span { color: #625e6b; font-size: 12px; }
    main.color-palette-page .color-palette-board-download { min-height: 44px; font-size: 14px !important; }
    main.color-palette-page .color-palette-board-download:not(:hover):not(:focus-visible) { border-color: #e5e4eb; }
    main.color-palette-page .color-palette-segmented { border-color: #e5e4eb; border-radius: 12px; background: #f7f7fa; }
    main.color-palette-page .color-palette-segmented button { border-radius: 9px; min-height: 36px; font-size: 13px; }
    main.color-palette-page .color-palette-segmented button:not([aria-pressed="true"]) { color: #625e6b; }
    main.color-palette-page .color-palette-segmented button[aria-pressed="true"] { box-shadow: none; }
    main.color-palette-page .color-palette-website .bt-annotated-guide-card { border-color: #e5e4eb; border-radius: 20px; }
    main.color-palette-page .color-palette-website .bt-annotation-stage { background: #f7f7fa; border-radius: 20px 20px 0 0; }
    main.color-palette-page .color-palette-website .bt-annotation-surface { border-color: #e5e4eb; box-shadow: none; }
    main.color-palette-page .color-preview-toolbar { border-color: #e5e4eb; }
    main.color-palette-page .color-palette-website .color-preview-roles-toggle { min-height: 44px; font-size: 14px; }
    main.color-palette-page .color-preview-extra-roles { background: #f7f7fa; border-radius: 0 0 20px 20px; }
    main.color-palette-page .color-role-note-description { color: #625e6b; font-size: 12px; }
    main.color-palette-page .color-palette-marketing-section { border-color: #e5e4eb; background: #f7f7fa; }
    main.color-palette-page .color-palette-marketing-grid article { min-height: 0; border-color: #e5e4eb; border-radius: 16px; background: #fff; }
    main.color-palette-page .color-palette-marketing-grid p,
    main.color-palette-page .color-palette-faq-list details p { color: #625e6b; font-size: 15px; line-height: 1.75; }
    main.color-palette-page .color-palette-faq-list details { border-color: #e5e4eb; }
    main.color-palette-page .color-palette-faq-list summary { font-size: 16px; }
    main.color-palette-page .color-prompt-island {
        border-color: #e5e4eb;
        border-radius: 20px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 12px 36px -20px #25212e38;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    main.color-palette-page .color-prompt-island:focus-within,
    main.color-palette-page .color-prompt-island.is-engaged { border-color: #bca7f3; background: #fff; }
    main.color-palette-page .color-prompt-island.is-dragging { border-color: #6b39f4; background: #f8f5ff; }
    main.color-palette-page .color-prompt-form textarea[data-color-prompt]::placeholder { color: #746e7d; }
    main.color-palette-page .color-prompt-controls .color-prompt-discovery { color: #625e6b; font-size: 12px; }
    main.color-palette-page .color-prompt-controls .color-prompt-use-palette,
    main.color-palette-page .color-prompt-controls .color-prompt-submit { min-height: 44px; font-size: 13px; }
    main.color-palette-page .color-prompt-save-state { font-size: 12px; }
    main.color-palette-page .color-prompt-mode { color: #625e6b; font-size: 12px; }
    main.color-palette-page .color-palette-modal-panel > p { color: #625e6b; font-size: 15px; line-height: 1.65; }
    main.color-palette-page .color-palette-download-options small { color: #625e6b; font-size: 13px; }

    /* The outer editor is explicit: .bt-page is also used by customer previews. */
    main.bt-page[data-brand-typography] .bt-intro > p { color: #625e6b; font-size: 16px; line-height: 1.75; }
    main.bt-page[data-brand-typography] .bt-intro-meta { color: #625e6b; font-size: 12px; }
    main.bt-page[data-brand-typography] .bt-setup { border-color: #e5e4eb; border-radius: 20px; box-shadow: none; }
    main.bt-page[data-brand-typography] .bt-setup.is-floating { box-shadow: 0 12px 36px -20px #25212e38; }
    main.bt-page[data-brand-typography] .bt-font-trigger { border-radius: 10px; padding-block: 7px; }
    main.bt-page[data-brand-typography] .bt-font-trigger .bt-label { color: #625e6b; font-size: 12px; }
    main.bt-page[data-brand-typography] .bt-font-hint { color: #625e6b; }
    main.bt-page[data-brand-typography] .bt-setup-actions,
    main.bt-page[data-brand-typography] .bt-rules-panel { border-color: #e5e4eb; }
    main.bt-page[data-brand-typography] .bt-button { min-height: 44px; font-size: 14px; }
    main.bt-page[data-brand-typography] .bt-button-secondary:not(:hover):not(:focus-visible) { border-color: #e5e4eb; color: #625e6b; }
    main.bt-page[data-brand-typography] .bt-rules-heading,
    main.bt-page[data-brand-typography] .bt-rules-heading > span:last-child,
    main.bt-page[data-brand-typography] .bt-label,
    main.bt-page[data-brand-typography] .bt-help { color: #625e6b; font-size: 12px; line-height: 1.6; }
    main.bt-page[data-brand-typography] :is(.bt-rules-panel, .bt-font-dialog, .bt-connect-panel) :is(input[type="text"], input[type="number"], select) {
        font-size: 14px;
        min-height: 42px;
        border-radius: 10px;
    }
    main.bt-page[data-brand-typography] .bt-font-menu,
    main.bt-page[data-brand-typography] .bt-font-dialog { border-color: #e5e4eb; border-radius: 20px; box-shadow: 0 16px 48px -24px #25212e50; }
    main.bt-page[data-brand-typography] .bt-font-search { border-radius: 10px; }
    main.bt-page[data-brand-typography] .bt-font-search:not(:focus-within) { border-color: #e5e4eb; }
    main.bt-page[data-brand-typography] .bt-font-search input[type="text"] { min-height: 42px; font-size: 16px; }
    main.bt-page[data-brand-typography] .bt-font-manage { font-size: 13px !important; color: #625e6b; min-height: 44px; }
    main.bt-page[data-brand-typography] .bt-font-option { border-radius: 10px; }
    main.bt-page[data-brand-typography] .bt-font-option-meta,
    main.bt-page[data-brand-typography] .bt-font-option-meta > span,
    main.bt-page[data-brand-typography] .bt-font-group-label,
    main.bt-page[data-brand-typography] .bt-font-menu-status { color: #625e6b; font-size: 12px; }
    main.bt-page[data-brand-typography] .bt-check { color: #625e6b; font-size: 13px; }
    main.bt-page[data-brand-typography] .bt-font-menu-heading .bt-eyebrow,
    main.bt-page[data-brand-typography] .bt-section-heading .bt-eyebrow,
    main.bt-page[data-brand-typography] .bt-specimen .bt-eyebrow { color: #625e6b; font-size: 12px; letter-spacing: .8px; }
    main.bt-page[data-brand-typography] .bt-font-dialog p,
    main.bt-page[data-brand-typography] .bt-font-instructions p,
    main.bt-page[data-brand-typography] .bt-section-description,
    main.bt-page[data-brand-typography] .bt-annotated-social-heading p { color: #625e6b; font-size: 14px; line-height: 1.75; }
    main.bt-page[data-brand-typography] .bt-font-file { font-size: 14px; border-color: #cbc7d5; background: #fdfdfe; }
    main.bt-page[data-brand-typography] .bt-font-file span,
    main.bt-page[data-brand-typography] .bt-font-library-row small { color: #625e6b; font-size: 12px; }
    main.bt-page[data-brand-typography] .bt-font-file input { font-size: 13px; }
    main.bt-page[data-brand-typography] .bt-specimen { border-color: #e5e4eb; border-radius: 16px; }
    main.bt-page[data-brand-typography] .bt-specimen-footer { flex-wrap: wrap; border-color: #e5e4eb; }
    main.bt-page[data-brand-typography] .bt-specimen-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
    main.bt-page[data-brand-typography] .bt-specimen-footer span { color: #625e6b; font-size: 12px; }
    main.bt-page[data-brand-typography] .bt-font-instructions > summary,
    main.bt-page[data-brand-typography] .bt-usage-notes > summary { color: #625e6b; font-size: 14px; min-height: 44px; }
    main.bt-page[data-brand-typography] .bt-muted,
    main.bt-page[data-brand-typography] .bt-bottom-note p { color: #625e6b; font-size: 13px; }
    main.bt-page[data-brand-typography] .bt-annotated-guide-card { border-color: #e5e4eb; border-radius: 20px; }
    main.bt-page[data-brand-typography] .bt-annotation-stage { background: #f7f7fa; }
    main.bt-page[data-brand-typography] .bt-annotation-surface { border-color: #e5e4eb; box-shadow: none; }
    main.bt-page[data-brand-typography] .bt-annotated-guide-footer { border-color: #e5e4eb; }

    /* Annotation controls belong to the editor, not to the previewed artwork. */
    :is(main.bt-page[data-brand-typography], main.color-palette-page .color-palette-website) .bt-annotation-stage:not(.is-compact) .bt-annotation > summary {
        border-radius: 12px;
        box-shadow: none;
        font-size: 12px;
        color: #625e6b;
    }
    :is(main.bt-page[data-brand-typography], main.color-palette-page .color-palette-website) .bt-annotation:not([open]) > summary:not(:hover) { border-color: #e5e4eb; }
    :is(main.bt-page[data-brand-typography], main.color-palette-page .color-palette-website) .bt-annotation-family,
    :is(main.bt-page[data-brand-typography], main.color-palette-page .color-palette-website) .bt-annotation > summary > [data-annotation-value="size"] { color: #625e6b; font-size: 12px; }

    @media (max-width: 767px) {
        main.color-palette-page .color-palette-marketing-section,
        main.color-palette-page .color-palette-faq-section { padding-block: 56px; }
        main.color-palette-page .color-palette-marketing-heading { margin-bottom: 28px; }
        main.color-palette-page .color-palette-marketing-grid { gap: 16px; }
        main.color-palette-page .color-palette-marketing-grid article { padding: 24px; }
        main.color-palette-page .color-palette-marketing-grid h3 { margin-top: 20px; }
        main.color-palette-page .color-palette-section-heading p,
        main.color-palette-page .color-palette-marketing-heading p { font-size: 15px; }
        main.color-palette-page .color-palette-board { padding: 18px; border-radius: 16px; }
        main.color-palette-page .color-palette-board-toolbar { margin-bottom: 20px; padding-bottom: 16px; }
        main.color-palette-page .color-palette-board-actions { gap: 8px; }
        main.color-palette-page .color-palette-segmented button { padding-inline: 12px; }
        main.color-palette-page .color-prompt-island,
        main.color-palette-page .color-prompt-island:focus-within,
        main.color-palette-page .color-prompt-island.is-engaged { border: 0; border-top: 1px solid #e5e4eb; border-radius: 0; background: #fff; box-shadow: 0 -8px 24px -20px #25212e38; }
        main.color-palette-page .color-prompt-island.is-dragging { border-top-color: #6b39f4; background: #f8f5ff; }
    }

    @media (max-width: 600px) {
        main.bt-page[data-brand-typography] { padding-top: 52px; }
        main.bt-page[data-brand-typography] .bt-intro { margin-bottom: 28px; }
        main.bt-page[data-brand-typography] .bt-intro > p { font-size: 15px; }
        main.bt-page[data-brand-typography] .bt-intro-meta { gap: 6px 12px; margin-top: 16px; }
        main.bt-page[data-brand-typography] .bt-setup { border-radius: 16px; }
        main.bt-page[data-brand-typography] .bt-font-grid { padding: 6px; }
        main.bt-page[data-brand-typography] .bt-font-trigger { flex-basis: 156px; }
        main.bt-page[data-brand-typography] .bt-setup-actions { gap: 8px; padding: 8px 10px; }
        main.bt-page[data-brand-typography] .bt-rules-row :is(input, select),
        main.bt-page[data-brand-typography] .bt-font-dialog :is(input[type="text"], select),
        main.bt-page[data-brand-typography] .bt-connect-panel select { font-size: 16px; }
        main.bt-page[data-brand-typography] .bt-section:not(#bt-website) { margin-top: 44px; }
        main.bt-page[data-brand-typography] .bt-section-heading { gap: 12px; margin-bottom: 20px; }
        main.bt-page[data-brand-typography] .bt-bottom-note { padding-top: 40px; gap: 16px; }
        main.bt-page[data-brand-typography] .bt-annotated-guide-footer { padding: 0 16px 16px; }
    }
}