/**
 * core-style-save.css — "Save this look as a style" in the Review your design
 * dialog (D54 PR 4).
 *
 * core-style-save.js inserts the block (or the single "Style: …" line) above
 * the approval modal's own checkbox. The toggle matches that checkbox's layout
 * (core-approval-modal.css, `.core-approval-modal__checkbox`) so the two read
 * as one list. Theme tokens only; no new colour pairing — Ink, Ink Soft and
 * Ink Muted on the modal's Paper.
 */

.core-style-save,
.core-style-save__match {
    margin: 0 0 var(--sp-3);
}

/* Same shape as the modal's own checkbox row. */
.core-style-save__toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-13);
    color: var(--ink);
    cursor: pointer;
    line-height: 1.4;
}

.core-style-save__toggle input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.core-style-save__help {
    max-width: 60ch;
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-12);
    line-height: 1.5;
    color: var(--ink-soft);
}

.core-style-save__fields {
    margin-top: var(--sp-2);
}

.core-style-save__fields[hidden] {
    display: none;
}

.core-style-save__fields label {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-12);
    color: var(--ink);
}

.core-style-save__fields .core-input {
    width: 100%;
    box-sizing: border-box;
}

.core-style-save__summary {
    margin: var(--sp-1) 0 0;
    font-family: var(--font-sans);
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-normal);
    color: var(--ink-muted);
}

.core-style-save__summary:empty {
    display: none;
}

.core-style-save__match {
    font-size: var(--fs-13);
    color: var(--ink-soft);
}

.core-style-save__name {
    color: var(--ink);
}