/**
 * Hawkes' Impossible Portraits — Scene Selector styles.
 *
 * SIBLING to configurator.css (enqueued as a dependency — see
 * hac_hip_scene_selector_enqueue_assets()), exactly like hac-tl-archetype-selector.css.
 * Every color / font / radius / shadow is a shared var(--hac-*) token defined in
 * configurator.css's .hac-configurator — nothing here hardcodes a hex or forks the
 * palette, so HIP shares ONE visual identity with the Art Pack Configurator and Three
 * Lives (dark app canvas, gold, Cinzel/EB Garamond). The scene cards reuse the shared
 * .hac-card / .hac-grid / .hac-card__thumb-* system as-is; the classes below only ADD
 * the HIP-specific chrome (step nav, household/occasion pickers, scene cart rail).
 */

.hac-hip-selector {
    --hip-gap: 16px;
}

/* Center the app content within the .hac-configurator dark canvas (mirrors .hac-layout). */
.hac-hip-steps,
.hac-hip-layout {
    max-width: var(--global-content-width, 1100px);
    margin-left: auto;
    margin-right: auto;
}

/* Step nav */
.hac-hip-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--hip-gap);
    border-bottom: 1px solid var(--hac-border);
    padding-bottom: 12px;
}
.hac-hip-step-tab {
    font-family: var(--hac-font-body);
    background: none;
    border: 1px solid var(--hac-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 14px;
    cursor: pointer;
    color: var(--hac-text-muted);
    transition: border-color var(--hac-transition), color var(--hac-transition);
}
.hac-hip-step-tab:hover { border-color: var(--hac-border-strong); color: var(--hac-text); }
.hac-hip-step-tab.is-active {
    border-color: var(--hac-gold);
    color: var(--hac-gold);
    font-weight: 600;
}

/* Selected scenes get a full-width workspace above the browsing grid. */
.hac-hip-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.hac-hip-layout > * { min-width: 0; }
.hac-hip-cart { order: -1; }

/* Neal 2026-10-02: md heading above the scenes (md=legacy-accolades). */
.hac-hip-step__heading {
    text-align: center;
    color: var(--hac-text);
}

.hac-hip-step__intro {
    font-family: var(--hac-font-body);
    font-size: 16px;
    margin: 0 0 var(--hip-gap);
    color: var(--hac-text);
}

/* Household / occasion pickers — dark cards on the shared surface tokens */
.hac-hip-shape-grid,
.hac-hip-occasion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.hac-hip-shape-card,
.hac-hip-occasion-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    font-family: var(--hac-font-body);
    color: var(--hac-text);
    background: var(--hac-bg-card);
    border: 1px solid var(--hac-border);
    border-radius: var(--hac-radius-lg);
    padding: 14px;
    cursor: pointer;
    transition: border-color var(--hac-transition), box-shadow var(--hac-transition);
}
.hac-hip-shape-card:hover,
.hac-hip-occasion-card:hover { border-color: var(--hac-border-strong); }
.hac-hip-shape-card.is-selected,
.hac-hip-occasion-card.is-selected {
    border-color: var(--hac-gold);
    box-shadow: 0 0 0 1px var(--hac-gold-deep), var(--hac-shadow-card);
}
.hac-hip-shape-card__label { font-weight: 600; color: var(--hac-text); }
.hac-hip-shape-card__meta { font-size: 13px; color: var(--hac-text-muted); }
/* Wrap household labels at word boundaries, including after slashes. */
#hac-hip-scene-selector .hac-hip-shape-card__label,
#hac-hip-scene-selector .hac-hip-shape-card__meta {
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}
.hac-hip-occasion-card { font-weight: 600; }

/* Scene grid card note (shares the shared .hac-card title styling for the title itself) */
.hac-hip-scene-card__note {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--hac-text-subtle);
    font-style: italic;
}

/* Scene cards REUSE the shared .hac-card / .hac-card__thumb-* system (the JS renders
   the same markup as hac-tl-archetype-selector.js). Only HIP addition: a tighter grid
   that mirrors .hac-tl-grid. Border, hover shadow, and the gold selected ring all come
   from the shared .hac-card. */
.hac-grid.hac-hip-scene-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* Selected-scene workspace — reuses the shared raised-panel styling. */
.hac-hip-cart {
    background: var(--hac-bg-raised);
    border: 1px solid var(--hac-border);
    border-radius: var(--hac-radius-lg);
    padding: 16px;
    position: static;
    font-family: var(--hac-font-body);
    color: var(--hac-text);
}
.hac-hip-cart__title {
    margin: 0 0 12px;
    font-family: var(--hac-font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hac-gold);
}
.hac-hip-cart__empty { color: var(--hac-text-muted); font-size: 14px; margin: 0; }
.hac-hip-cart__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hac-hip-cart__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--hac-border);
    border-radius: var(--hac-radius);
    font-size: 14px;
}
.hac-hip-cart__item-title { min-width: 0; overflow-wrap: anywhere; }
.hac-hip-cart__remove { flex-shrink: 0; }
.hac-hip-cart__order { min-width: 0; }
.hac-hip-cart__order input,
.hac-hip-cart__order button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.hac-hip-cart__order input { display: block; margin-top: 6px; }
.hac-hip-cart__order button { white-space: normal; overflow-wrap: anywhere; }
.hac-hip-cart__remove {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--hac-text-muted);
    cursor: pointer;
    padding: 0 4px;
}
.hac-hip-cart__remove:hover { color: var(--hac-crimson); }

.hac-hip-cart__item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hac-hip-cart__order { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.hac-hip-cart__order-btn { font-size: 13px; padding: 6px 10px; }
.hac-hip-cart__sku {
    font-family: var(--hac-font-body);
    border: 1px solid var(--hac-gold);
    background: none;
    color: var(--hac-gold);
    border-radius: var(--hac-radius);
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background var(--hac-transition), color var(--hac-transition);
}
.hac-hip-cart__sku:hover { background: var(--hac-gold); color: var(--hac-bg); }
.hac-hip-cart__hint { font-size: 12px; color: var(--hac-text-muted); }

.hac-hip-empty {
    color: var(--hac-text-muted);
    padding: 24px 0;
    text-align: center;
}

/* Keep picker text readable when theme button interaction styles apply.
   The selector ID scopes this override to HIP; selection uses the gold border. */
#hac-hip-scene-selector .hac-hip-shape-card:is(:hover, :focus, :active, .is-selected),
#hac-hip-scene-selector .hac-hip-occasion-card:is(:hover, :focus, :active, .is-selected) {
    background: var(--hac-bg-card);
    color: var(--hac-text);
}
#hac-hip-scene-selector .hac-hip-shape-card:focus-visible,
#hac-hip-scene-selector .hac-hip-occasion-card:focus-visible {
    outline: 2px solid var(--hac-gold);
    outline-offset: 3px;
}

/* Number-entry household shape (Neal 2026-10-11): number fields, per-occasion scene counts, Choose / Request. */
.hac-hip-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 12px;
}
.hac-hip-counts__field,
.hac-hip-request__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--hac-font-body);
    font-size: 14px;
    color: var(--hac-text);
}
.hac-hip-counts__field { flex: 1 1 160px; }
.hac-hip-counts__label { font-weight: 600; }
.hac-hip-counts__input,
.hac-hip-request__select,
.hac-hip-request__email {
    box-sizing: border-box;
    width: 100%;
    max-width: 12rem;
    padding: 8px 10px;
    font-family: var(--hac-font-body);
    font-size: 16px;
    color: var(--hac-text);
    background: var(--hac-bg-card);
    border: 1px solid var(--hac-border-strong);
    border-radius: var(--hac-radius);
}
.hac-hip-request__select,
.hac-hip-request__email { max-width: 22rem; }
.hac-hip-counts__input:focus-visible,
.hac-hip-request__select:focus-visible,
.hac-hip-request__email:focus-visible {
    outline: 2px solid var(--hac-gold);
    outline-offset: 2px;
}
.hac-hip-counts__message {
    min-height: 1.4em;
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--hac-text-muted);
}
.hac-hip-counts-table {
    width: 100%;
    max-width: 32rem;
    margin: 0 0 16px;
    border-collapse: collapse;
    font-family: var(--hac-font-body);
    color: var(--hac-text);
}
.hac-hip-counts-table th,
.hac-hip-counts-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--hac-border);
}
.hac-hip-counts-table th { font-size: 13px; font-weight: 600; color: var(--hac-text-muted); }
.hac-hip-counts-table .hac-hip-counts-table__count { text-align: right; font-variant-numeric: tabular-nums; }
.hac-hip-counts-table tr.no-scenes td { color: var(--hac-text-muted); }
/* Scoped by ID so the theme's button styling does not turn the occasion link into a pill. */
#hac-hip-scene-selector .hac-hip-counts-table__occasion {
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    color: var(--hac-gold);
    text-decoration: underline;
    cursor: pointer;
}
.hac-hip-counts__choose { margin: 0 0 24px; }
.hac-hip-request {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--hac-border);
}
.hac-hip-request:empty { display: none; }
.hac-hip-request__title {
    margin: 0;
    font-family: var(--hac-font-heading);
    font-size: 15px;
    color: var(--hac-gold);
}
.hac-hip-request__intro,
.hac-hip-request__status { margin: 0; font-size: 14px; color: var(--hac-text-muted); }
.hac-hip-request__send { align-self: flex-start; }

/* LA-PM Master info (Neal 2026-10-18): "i" bottom-left on the scene picture (zoom button top-left, check top-right)
   and a narrow window built on the zoom viewer's dialog classes (hac-hip-portrait-zoom.css). */
.hac-configurator .hac-hip-master-info-btn {
    position: absolute; bottom: 10px; left: 10px; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-height: 44px; padding: 0;
    border: 1px solid var(--hac-gold); border-radius: 50%;
    color: var(--hac-gold); background: rgb(28 28 28 / 94%);
    box-shadow: 0 2px 8px rgb(0 0 0 / 45%); cursor: pointer;
    font-family: var(--hac-font-heading); font-size: 22px; font-weight: 700; font-style: italic; line-height: 1;
}
.hac-configurator .hac-hip-master-info-btn:hover { color: var(--hac-bg); background: var(--hac-gold); }
.hac-configurator .hac-hip-master-info-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hac-configurator .hac-hip-master-dialog { width: min(480px, calc(100vw - 24px)); }
.hac-hip-master-dialog__facts {
    display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0 0;
}
.hac-hip-master-dialog__facts dt { font-weight: 600; color: var(--hac-gold); }
.hac-hip-master-dialog__facts dd { margin: 0; }
.hac-hip-master-dialog__count { margin: 16px 0 0; font-style: italic; color: var(--hac-text-muted); }