/**
 * core-style-step.css — the customer Style step, its preview pill and the
 * step-tab dots (D54 PR 3), and its picture tiles with their Details panel
 * (D55).
 *
 * Core_Style_Step renders the tiles; core-style-apply.js adds the pill inside
 * the preview (`[data-preview]`) and the dots inside the step tabs. Theme
 * tokens only; no new colour pairing — a picked card takes an Ink border and ring,
 * the pill is Pebble with Ink text, and the accent appears only in the
 * configurator's own focus ring. The pill's Save as new style panel (PR 4,
 * core-style-pill.js) is Paper with Ink text, the configurator popover's
 * chrome.
 */

/* ===== Style step: cards ===== */

.core-style-step__group {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-11);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--ink-muted);
}

/* "Manage your styles" (or "Sign in to …") under Your styles — a small text
   link to My account → My styles. */
.core-style-step__manage {
    margin: var(--sp-2) 0 var(--sp-4);
    font-size: var(--fs-12);
}

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

.core-style-step__manage a {
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.core-style-step__manage a:hover {
    color: var(--ink);
}

/* The start row (D55): "Create a style" and "Start without a style" as two
   compact cards above the picture grids, so every picture is a style. */
.core-style-step__start {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-5);
}

.core-style-step__start > * {
    flex: 1 1 0;
    min-width: 180px;
}

/* Picture tiles: two per row at every width, so the picture is large enough
   to judge the style by (maintainer, 2026-09-28 — was three). More styles add
   rows; the step scrolls like any other. */
.core-style-step__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
}

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

/* ===== A style tile =====
   The radio card fills the tile; the Details toggle is its sibling (a
   button can't hold a button), pinned over the card's summary row. */

.core-style-tile {
    position: relative;
    display: flex;
    min-width: 0;
}

.core-style-card {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "pic  pic"
        "name price"
        "sub  sub";
    align-content: start;
    width: 100%;
    min-width: 0;
    padding: 0 0 var(--sp-2);
    border: 1px solid var(--rule-interactive);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease);
}

/* Hover darkens the border only — the card stays Paper, so no new
   text/background pairing. */
.core-style-card:hover {
    border-color: var(--ink-soft);
}

/* Chosen (§7.28, ruled 2026-09-29): a plain 2px Ink border, no ring — the
   one "chosen" look. The padding gives back the extra 1px on every side so
   the card's contents don't shift when it is picked. */
.core-style-card[aria-checked="true"] {
    border: 2px solid var(--ink);
    padding: 0 0 calc(var(--sp-2) - 1px);
}

.core-style-card:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* The 4:3 picture (Core_Saved_Style_Picture). A style without one shows its
   material sample. */
.core-style-card__pic {
    grid-area: pic;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--paper-soft);
    border-bottom: 1px solid var(--rule);
}

/* A stored picture fills the frame (it is captured at 4:3). */
.core-style-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No picture: the front material fills the frame, the carcass material a
   small chip bottom-right (maintainer's option B, like a §7.8 sample). */
.core-style-card__sample {
    position: absolute;
    inset: 0;
}

.core-style-card__chip {
    position: absolute;
    right: var(--sp-2);
    bottom: var(--sp-2);
    width: 22px;
    height: 22px;
    border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
    border-radius: var(--r-xs);
}

/* The name wraps rather than truncates — it is what the customer picks by. */
.core-style-card__name {
    grid-area: name;
    min-width: 0;
    padding: var(--sp-2) var(--sp-2) 0;
    font-size: var(--fs-13);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* One line; Details holds the rest. Room is kept on the right for the
   Details toggle pinned over it. */
.core-style-card__sub {
    grid-area: sub;
    min-width: 0;
    padding: 2px 64px 0 var(--sp-2);
    overflow: hidden;
    font-size: var(--fs-11);
    line-height: 1.35;
    color: var(--ink-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The price difference against the unit as it stands (core-style-prices.js
   appends it to the card): right of the name, in Ink Muted (§7.8). */
.core-style-card__price {
    grid-area: price;
    padding: var(--sp-2) var(--sp-2) 0 var(--sp-1);
    font-size: var(--fs-12);
    line-height: 1.3;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* "Details ⌄": a quiet text disclosure, not an action — no border or fill. */
.core-style-tile__details {
    position: absolute;
    right: 1px;
    bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--sp-1) var(--sp-2);
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-12);
    line-height: 1.35;
    cursor: pointer;
}

.core-style-tile__details:hover,
.core-style-tile__details[aria-expanded="true"] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

.core-style-tile__chevron {
    box-sizing: border-box;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease);
}

.core-style-tile__details[aria-expanded="true"] .core-style-tile__chevron {
    margin-top: 2px;
    transform: rotate(-135deg);
}

/* ===== Details panel (core-style-details.js) =====
   §7.20's opened panel: a sunken card spanning the whole grid, under the
   tile's row. On Pebble every key steps up to Ink Soft. */

.core-style-details {
    position: relative;
    grid-column: 1 / -1;
    padding: var(--sp-4);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper-soft);
    color: var(--ink);
}

.core-style-details__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.core-style-details__name {
    font-size: var(--fs-16);
    line-height: 1.3;
}

/* The box's rows left, the fronts' right; one column at phone width. */
.core-style-details__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-6);
}

@media (max-width: 480px) {
    .core-style-details__cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

.core-style-details__list {
    display: grid;
    align-content: start;
    gap: var(--sp-3);
    margin: 0;
}

.core-style-details__label {
    margin: 0 0 2px;
    font-size: var(--fs-12);
    line-height: 1.35;
    color: var(--ink-soft);
}

.core-style-details__value {
    margin: 0;
}

.core-style-details__line {
    display: block;
    font-size: var(--fs-13);
    line-height: 1.45;
}

/* A line with a material swatch sits beside the 36px chip, centred on it. */
.core-style-details__line:has(> .core-style-details__chip) {
    display: flex;
    align-items: center;
    margin-block: var(--sp-1);
}

.core-style-details__line--sub {
    font-size: var(--fs-12);
    color: var(--ink-soft);
}

/* The chip is a button: it opens the swatch popover, where the sample is
   shown large. A magnifier appears on hover and focus (the Materials page's
   .mat-swatch). */
.core-style-details__chip {
    position: relative;
    display: inline-block;
    flex: none;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    margin: 0 var(--sp-2) 0 0;
    padding: 0;
    border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
    border-radius: var(--r-sm);
    cursor: zoom-in;
}

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

.core-style-details__chip[aria-expanded="true"] {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.core-style-details__zoom {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: var(--r-xs);
    background: color-mix(in oklch, var(--paper) 88%, transparent);
    color: var(--ink);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
}

.core-style-details__chip:hover .core-style-details__zoom,
.core-style-details__chip:focus-visible .core-style-details__zoom,
.core-style-details__chip[aria-expanded="true"] .core-style-details__zoom {
    opacity: 1;
}

/* The popover floats over the panel (chrome from core-modal's
   .core-popover); core-style-details.js sets left/top from the chip. */
.core-style-swatch-pop {
    position: absolute;
    z-index: var(--z-raised);
    box-sizing: border-box;
    width: 200px;
    padding: var(--sp-2);
}

.core-style-swatch-pop__sample {
    display: block;
    height: 160px;
    border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
    border-radius: var(--r-sm);
}

.core-style-swatch-pop__name {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-13);
    line-height: 1.45;
}

/* ===== The start row's two compact cards ===== */

.core-style-card--blank,
.core-style-create {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    padding: var(--sp-3);
    border: 1px solid var(--rule-interactive);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink);
}

.core-style-card--blank {
    width: auto;
}

/* "Create a style" makes something rather than picks it: a dashed border
   and a plus in place of a picture. */
.core-style-create {
    border-style: dashed;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease);
}

.core-style-create:hover {
    border-color: var(--ink-soft);
    color: var(--ink);
}

.core-style-create:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.core-style-create__plus,
.core-style-card__blank-box {
    box-sizing: border-box;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-xs);
}

.core-style-create__plus {
    background: var(--paper-soft);
    font-size: var(--fs-18);
    line-height: 1;
    color: var(--ink-soft);
}

/* An empty frame: a unit with nothing chosen for it yet. */
.core-style-card__blank-box {
    border: 1.5px solid var(--rule-interactive);
}

.core-style-card__text,
.core-style-create__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.core-style-card--blank .core-style-card__name,
.core-style-create__name {
    padding: 0;
    font-size: var(--fs-13);
    line-height: 1.3;
    white-space: normal;
}

.core-style-card--blank .core-style-card__sub,
.core-style-create__sub {
    padding: 0;
    font-size: var(--fs-11);
    line-height: 1.35;
    color: var(--ink-muted);
    white-space: normal;
}

.core-style-step__error {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-13);
    color: var(--ink);
}

/* ===== Switch confirm =====
   Under the grid of the card that opened it (core-style-confirm.js): Paper
   with a Rule Strong hairline, the pill's joined 32px buttons below. */

.core-style-confirm {
    margin: var(--sp-2) 0 var(--sp-4);
    padding: var(--sp-3);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-size: var(--fs-13);
    color: var(--ink);
}

.core-style-confirm__text {
    margin: 0;
    line-height: 1.45;
}

.core-style-confirm__name {
    font-weight: var(--fw-semibold);
}

.core-style-confirm__actions {
    display: flex;
    margin-top: var(--sp-3);
}

.core-style-confirm__actions .core-style-pill__btn:first-child {
    border-left: 0;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
}

/* ===== Preview pill =====
   Inside .config-preview (already position: relative in core-stepper.css),
   on the same --z-raised tier as the preview's toolbars. Its buttons sit
   flush inside it the way the preview tools strip's sections do. */

.core-style-pill {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: var(--z-raised);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    max-width: calc(100% - 20px);
    min-height: var(--h-btn-sm);
    padding: 0 0 0 var(--sp-3);
    background: var(--paper-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
    font-size: var(--fs-13);
    color: var(--ink-soft);
}

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

.core-style-pill__text {
    align-self: center;
    padding: var(--sp-1) var(--sp-3) var(--sp-1) 0;
    line-height: 1.35;
}

.core-style-pill__name {
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-normal);
    color: var(--ink);
}

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

/* Every configurator button is 32px (--h-btn-sm). Flat Pebble sections with
   a Paper hairline between them and the outer right corners rounded — the
   preview tools strip's grammar (core-configurator.css), states included. */
.core-style-pill__btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: var(--h-btn-sm);
    padding: 0 var(--sp-3);
    border: 0;
    border-left: 1px solid var(--paper);
    border-radius: 0;
    background: var(--paper-soft);
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-13);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}

.core-style-pill__btn:last-of-type {
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.core-style-pill__btn:hover {
    background: var(--paper-sunk);
    color: var(--ink);
}

.core-style-pill__btn:active {
    transform: translateY(1px);
}

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

/* A disabled pill button (an update in flight) keeps its colours — no new
   pairing — and stops answering the pointer. */
.core-style-pill__btn:disabled {
    cursor: default;
    transform: none;
}

/* A failed update: its own row under the pill's line, Ink as the step's
   load error is. */
.core-style-pill__error {
    order: 1;
    flex-basis: 100%;
    padding: 0 var(--sp-3) var(--sp-1) 0;
    line-height: 1.35;
    color: var(--ink);
}

/* ===== Save as new style panel =====
   Inside the preview, bottom-left, just above the pill (core-style-pill.js
   sets `bottom` from the pill's height; the fallback clears a one-line
   pill). Paper, a Rule Strong hairline and the raised shadow rung. */

.core-style-save-panel {
    position: absolute;
    left: 10px;
    bottom: calc(10px + var(--h-btn-sm) + var(--sp-2));
    z-index: var(--z-raised);
    box-sizing: border-box;
    width: 280px;
    max-width: calc(100% - 20px);
    margin: 0;
    padding: var(--sp-3);
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-2);
    font-size: var(--fs-13);
    color: var(--ink);
}

.core-style-save-panel__label {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-13);
    color: var(--ink-soft);
}

.core-style-save-panel .core-input {
    width: 100%;
}

.core-style-save-panel__error {
    display: block;
    margin-top: var(--sp-2);
    line-height: 1.35;
    color: var(--ink);
}

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

/* Save · Cancel: the pill's own strip, flush and joined. */
.core-style-save-panel__actions {
    display: flex;
    margin-top: var(--sp-3);
}

.core-style-save-panel__actions .core-style-pill__btn:first-child {
    border-left: 0;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
}

/* ===== Step-tab dot ===== */

.core-step-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink);
    pointer-events: none;
}