/* ==========================================================================
   KAGU — app.css : mise en page du mockup (index.html). Mobile d'abord.
   ========================================================================== */

.skip { position: absolute; left: var(--s-3); top: -4rem; z-index: 200; padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--ink); color: var(--on-ink); font-weight: 650; text-decoration: none; transition: top var(--d-fast) var(--ease-out); }
.skip:focus { top: var(--s-3); }

/* ---- En-tête ---------------------------------------------------------------- */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in oklch, var(--paper) 88%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1.5px solid transparent; transition: border-color var(--d-base) var(--ease-out); }
.top.is-scrolled { border-bottom-color: var(--line); }
.top__in { max-width: var(--maxw); margin: 0 auto; padding: var(--s-2) var(--gutter); min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.top__actions { display: flex; align-items: center; gap: var(--s-2); }
.top__count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem; border-radius: 99px; background: var(--ink); color: var(--on-ink); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; }
.top__actions .btn span:not(.top__count) { display: none; }
.top__actions .btn { padding: 0 var(--s-3); min-width: var(--hit); }
@media (min-width: 560px) { .top__actions .btn span:not(.top__count) { display: inline; } .top__actions .btn { padding: 0 var(--s-4); } }

/* ---- Mise en page générale ---------------------------------------------------- */
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) var(--s-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.intro { padding-top: var(--s-5); display: grid; gap: var(--s-3); max-width: 46rem; }
.intro__title { font-size: clamp(2.6rem, 1.2rem + 7vw, 4.75rem); }
.intro__lead { color: var(--muted); max-width: 38rem; }
.results { min-width: 0; scroll-margin-top: 4.5rem; }

@media (min-width: 1024px) {
  .shell { grid-template-columns: 392px minmax(0, 1fr); grid-template-areas: "tool intro" "tool results"; column-gap: var(--s-7); row-gap: var(--s-5); align-items: start; padding-top: var(--s-2); }
  .intro { grid-area: intro; padding-top: var(--s-5); max-width: 52rem; }
  .intro__title { font-size: clamp(3.2rem, 2rem + 3vw, 5.5rem); }
  .tool { grid-area: tool; position: sticky; top: 72px; max-height: calc(100dvh - 88px); overflow-y: auto; overflow-x: hidden; padding: 4px 6px 4px 2px; margin: -4px -6px -4px -2px; scrollbar-width: thin; scrollbar-color: var(--sunk-2) transparent; }
  .results { grid-area: results; }
}
@media (min-width: 1440px) { .shell { grid-template-columns: 432px minmax(0, 1fr); } }

/* ---- Scène : la niche --------------------------------------------------------- */
.tool { display: grid; gap: var(--s-4); align-content: start; }
.stage { background: var(--ink); border-radius: var(--r-l); padding: var(--s-3); display: grid; gap: var(--s-2); }
.stage__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) 0; color: var(--on-ink-muted); }
.stage__readout { color: var(--on-ink); }
.stage__field { position: relative; display: grid; place-items: center; height: clamp(200px, 56vw, 270px); border-radius: var(--r-m); background: var(--ink-2); overflow: hidden; }
.niche { position: relative; border-radius: 10px; background: var(--ink-deep); box-shadow: var(--recess-dark); flex: none; }
.niche__in { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.niche.is-open-w .niche__in { -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }
.niche.is-open-h .niche__in { -webkit-mask-image: linear-gradient(to top, #000 78%, transparent); mask-image: linear-gradient(to top, #000 78%, transparent); }
.niche__piece { position: absolute; left: 0; bottom: 0; will-change: transform; }
.niche__piece .art { width: 100%; height: 100%; }
.niche__gap { position: absolute; background: var(--vide); opacity: 0.9; pointer-events: none; }
.niche__gap--r { top: 0; right: 0; bottom: 0; }
.niche__gap--t { top: 0; left: 0; }
.niche__grip { position: absolute; z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; touch-action: none; -webkit-tap-highlight-color: transparent; }
.niche__grip span { display: block; border-radius: 99px; background: var(--on-ink); box-shadow: 0 0 0 3px var(--ink-2); transition: transform var(--d-base) var(--ease-dock); }
.niche__grip--r { right: -22px; top: 50%; margin-top: -22px; cursor: ew-resize; }
.niche__grip--r span { width: 8px; height: 36px; }
.niche__grip--t { top: -22px; left: 50%; margin-left: -22px; cursor: ns-resize; }
.niche__grip--t span { width: 36px; height: 8px; }
.niche__grip:hover span, .niche.is-drag .niche__grip span { transform: scale(1.18); }
.niche__grip:focus-visible { outline: none; }
.niche__grip:focus-visible span { outline: 3px solid var(--vide); outline-offset: 3px; }

.stage__foot { display: grid; grid-template-columns: var(--hit) minmax(0, 1fr) var(--hit); align-items: center; gap: var(--s-2); }
.stage__cap { display: grid; gap: 2px; text-align: center; min-width: 0; }
.stage__name { font-family: var(--font-display); font-weight: 650; font-stretch: 90%; font-size: 1.15rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage__gap { font-size: var(--fs-small); color: var(--on-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Panneau de contrôles ----------------------------------------------------- */
.panel { display: grid; gap: var(--s-4); }
.dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.dim { padding: 10px; }
.dim__foot { display: flex; }
.dim .switch { padding-left: 0.1rem; margin-left: -0.1rem; }
.window { font-size: var(--fs-small); color: var(--muted); min-height: 2.6em; text-wrap: pretty; }
.window b { color: var(--ink); font-weight: 650; font-family: var(--font-mono); font-size: 0.92em; white-space: nowrap; }
.presets { display: grid; gap: var(--s-2); }
.presets__row { display: flex; gap: var(--s-2); overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
.presets__row::-webkit-scrollbar { display: none; }
.presets__row .chip { scroll-snap-align: start; }
@media (min-width: 1024px) { .presets__row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.photo-cta { justify-content: flex-start; padding-left: var(--s-4); }

/* ---- Résultats ------------------------------------------------------------------ */
.results__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.results__title { display: flex; align-items: baseline; gap: 0.3em; flex-wrap: wrap; }
.results__num { font-variant-numeric: tabular-nums; min-width: 1ch; }
.results__sub { margin-top: var(--s-2); max-width: 36rem; }
.sort { display: grid; gap: 4px; }
.sort__box { position: relative; display: block; }
.sort select { appearance: none; -webkit-appearance: none; min-height: var(--hit); padding: 0 2.4rem 0 var(--s-4); border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface); font-weight: 600; font-size: var(--fs-small); cursor: pointer; transition: border-color var(--d-fast) var(--ease-out); }
.sort select:hover { border-color: var(--ink); }
.sort .icon { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); pointer-events: none; }

.filters { display: flex; gap: var(--s-2); overflow-x: auto; margin: 0 calc(var(--gutter) * -1) var(--s-4); padding: 2px var(--gutter) 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .filters { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; } }

.ctx { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); border-radius: var(--r-m); background: var(--sunk); box-shadow: var(--recess); }
.ctx__pal { display: flex; }
.ctx__pal .dot { width: 22px; height: 22px; margin-left: -6px; box-shadow: 0 0 0 2px var(--sunk), inset 0 0 0 1px oklch(0.2 0.04 195 / 0.2); }
.ctx__pal .dot:first-child { margin-left: 0; }
.ctx__chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.ctx .chip { min-height: 36px; padding: 0 var(--s-3); }
.ctx .chip .icon { width: 1em; height: 1em; }
@media (pointer: coarse) { .ctx .chip { min-height: var(--hit); } }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: var(--s-4); } }
.grid > li { min-width: 0; }

.card__main { display: block; width: 100%; padding: 0; border: 0; background: transparent; border-radius: var(--r-l); text-align: left; color: inherit; -webkit-tap-highlight-color: transparent; }
.card__main:focus-visible { outline-offset: 2px; border-radius: var(--r-l); }
.card .plate { transition: background-color var(--d-base) var(--ease-out); }
.card .plate svg.art { transition: transform var(--d-base) var(--ease-out); transform-origin: 50% 100%; }
@media (hover: hover) { .card:hover .plate { background: var(--sunk-2); } .card:hover .plate svg.art { transform: translateY(-3px) scale(1.02); } }
.card__body { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-4); }
.card__name { display: block; font-family: var(--font-display); font-weight: 650; font-stretch: 90%; font-size: 1.1rem; line-height: 1.12; letter-spacing: -0.005em; text-wrap: balance; }
.card__price { font-family: var(--font-display); font-weight: 700; font-stretch: 85%; font-size: 1.15rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.card__meta { font-size: var(--fs-small); color: var(--muted); line-height: 1.3; }
.card__dims { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink); letter-spacing: 0; white-space: nowrap; }
.card__mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.mini { display: grid; gap: 3px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; }
.mini__bar { height: 5px; border-radius: 99px; background: var(--sunk-2); overflow: hidden; }
.mini__bar i { display: block; height: 100%; border-radius: 99px; background: var(--ink); transform-origin: left; transform: scaleX(var(--fill, 0)); transition: transform var(--d-slow) var(--ease-out); }
.mini.is-free { opacity: 0.4; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 24px; margin-top: 2px; }
.plate__tag { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 3px 9px; border-radius: 99px; background: var(--ink); color: var(--on-ink); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.03em; white-space: nowrap; }
.card__sw { display: flex; align-items: center; }
.card__sw .dot { margin-left: -4px; width: 16px; height: 16px; box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 1px oklch(0.2 0.04 195 / 0.2); }
.card__sw .dot:first-child { margin-left: 0; }
.card__accord { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 99px; background: var(--sunk); white-space: nowrap; }
.card__sizes { font-size: 0.72rem; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.card.is-current .plate { box-shadow: inset 0 0 0 2.5px var(--ink); }
@supports (content-visibility: auto) { .grid > li { content-visibility: auto; contain-intrinsic-size: auto 330px; } }

/* ---- Bouton flottant « aller aux résultats » (mobile) ---------------------------- */
.jump { position: fixed; z-index: 45; right: var(--gutter); bottom: max(1rem, env(safe-area-inset-bottom)); transform: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-5) 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-weight: 650; box-shadow: var(--lift); transition: transform var(--d-slow) var(--ease-dock), opacity var(--d-base) var(--ease-out), background-color var(--d-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.jump:hover { background: var(--ink-3); }
.jump.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (min-width: 1024px) { .jump { display: none !important; } }

/* ---- Pied de page ------------------------------------------------------------------ */
.foot { border-top: 1.5px solid var(--line); background: var(--surface); }
.foot__in { max-width: var(--maxw); margin: 0 auto; padding: var(--s-6) var(--gutter) calc(var(--s-8) + 1rem); display: grid; gap: var(--s-3); justify-items: start; }
.foot p { max-width: 46rem; }
@media (min-width: 1024px) { .foot__in { padding-bottom: var(--s-7); } }

/* ---- Feuilles (fiche, photo, favoris) ------------------------------------------------ */
.sheet { position: fixed; inset: 0; width: 100%; max-width: none; max-height: none; height: auto; margin: auto 0 0 0; border-radius: var(--r-l) var(--r-l) 0 0; overflow: hidden; }
.sheet__panel { display: flex; flex-direction: column; max-height: 94dvh; transform: translateY(100%); opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; }
.sheet:not([open]) { display: none; }
.sheet__bar { position: relative; display: flex; justify-content: flex-end; align-items: center; padding: var(--s-2) var(--s-3) 0; flex: none; }
.sheet__bar--wide { justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-2) var(--s-5); align-items: flex-start; }
.sheet__grab { position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 99px; background: var(--sunk-2); }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2) var(--s-5) var(--s-6); flex: 1; min-height: 0; }
body.has-sheet { overflow: hidden; }
.sheet--photo { height: 100dvh; border-radius: 0; }
.sheet--photo .sheet__panel { max-height: 100dvh; height: 100dvh; }
.sheet .steps { padding: 0 var(--s-5) var(--s-3); }

@media (min-width: 900px) {
  .sheet { margin: auto; inset: 0; width: min(1040px, calc(100vw - 3rem)); height: fit-content; max-height: calc(100dvh - 3rem); border-radius: var(--r-l); }
  .sheet__panel { transform: translateY(28px) scale(0.98); opacity: 0; max-height: calc(100dvh - 3rem); }
  .sheet.is-open .sheet__panel { transform: none; opacity: 1; }
  .sheet__grab { display: none; }
  .sheet--photo { height: fit-content; border-radius: var(--r-l); width: min(1080px, calc(100vw - 3rem)); }
  .sheet--photo .sheet__panel { height: auto; max-height: calc(100dvh - 3rem); }
  .sheet--favs { width: min(560px, calc(100vw - 3rem)); }
}

/* ---- Fiche meuble ---------------------------------------------------------------------- */
.det { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .det { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; } .det__view { position: sticky; top: 0; } }
.det__view { display: grid; gap: var(--s-2); }
.det__stage { padding: var(--s-3); border-radius: var(--r-l); background: var(--ink); display: grid; gap: var(--s-2); }
.det__field { height: clamp(220px, 60vw, 340px); border-radius: var(--r-m); background: var(--ink-2); display: grid; place-items: center; overflow: hidden; }
.det__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-small); color: var(--on-ink-muted); padding: 0 var(--s-2) var(--s-1); }
.det__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; background: var(--vide); }
.det__legend i.is-ink { background: var(--sunk-2); }
.det__info { display: grid; gap: var(--s-4); align-content: start; }
.det__head { display: grid; gap: var(--s-2); }
.det__price { font-family: var(--font-display); font-weight: 750; font-stretch: 80%; font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.det__price small { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500; color: var(--muted); margin-left: 0.4em; font-stretch: 100%; }
.det h3 { margin-bottom: var(--s-2); }
.det__block { display: grid; gap: var(--s-2); }
.det__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.det__sw { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.det__fit { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-m); background: var(--sunk); box-shadow: var(--recess); }
.fit-row { display: grid; gap: 6px; }
.fit-row__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); font-size: var(--fs-small); }
.fit-row__top b { font-weight: 650; }
.fit-row__top span { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.fit-row .gauge__bar { height: 8px; background: var(--surface); }
.det__specs { display: grid; gap: 0; font-size: var(--fs-small); }
.det__specs div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-3); padding: 9px 0; border-top: 1.5px solid var(--line); }
.det__specs dt { color: var(--muted); }
.det__specs dd { font-weight: 550; }
.det__cta { display: grid; gap: var(--s-2); }
@media (min-width: 480px) { .det__cta { grid-template-columns: 1fr auto; } }
.det__note { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-small); color: var(--muted); }
.det__note .icon { margin-top: 0.15em; }

/* ---- Favoris ------------------------------------------------------------------------------ */
.fav-list { display: grid; gap: var(--s-3); }
.fav { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2); border-radius: var(--r-m); background: var(--surface); }
.fav .plate { border-radius: var(--r-s); padding: 8% 8% 14%; }
.fav__txt { display: grid; gap: 2px; min-width: 0; }
.fav__name { font-family: var(--font-display); font-weight: 650; font-stretch: 90%; line-height: 1.15; }

/* ---- Parcours photo ------------------------------------------------------------------------- */
.drop { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-6) var(--s-5); border-radius: var(--r-l); background: var(--sunk); box-shadow: var(--recess); text-align: center; transition: background-color var(--d-base) var(--ease-out), outline-color var(--d-base) var(--ease-out); outline: 3px dashed transparent; outline-offset: -10px; }
.drop.is-over { background: var(--sunk-2); outline-color: var(--ink); }
.drop__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--ink); color: var(--on-ink); }
.drop__ico .icon { width: 28px; height: 28px; }
.drop h3 { max-width: 20ch; }
.drop p { max-width: 36ch; }
.samples { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.samples__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.sample { position: relative; display: grid; gap: var(--s-2); padding: 0 0 var(--s-3); border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); text-align: left; overflow: hidden; transition: border-color var(--d-fast) var(--ease-out), transform var(--d-instant) var(--ease-out); }
.sample:hover { border-color: var(--ink); }
.sample:active { transform: scale(0.98); }
.sample img { width: 100%; height: clamp(110px, 22vw, 170px); object-fit: contain; background: var(--sunk); }
.sample span { padding: 0 var(--s-3); font-weight: 650; font-size: var(--fs-small); }
.p-err { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--alert-soft); color: var(--alert); font-size: var(--fs-small); font-weight: 600; }

.scan-wrap { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .scan-wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
.shot { position: relative; border-radius: var(--r-l); overflow: hidden; background: var(--ink); }
.shot img { width: 100%; height: auto; max-height: 56dvh; object-fit: contain; margin: 0 auto; }
.shot__scan { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.shot__line { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--on-ink); box-shadow: 0 0 28px 8px oklch(1 0 0 / 0.45); animation: scan 1.5s var(--ease-inout) infinite alternate; }
.shot__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, oklch(0.2 0.045 195 / 0.25)); }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(var(--sh, 300px)); } }
.ring { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid var(--on-ink); background: var(--c); box-shadow: 0 0 0 2px oklch(0.2 0.045 195 / 0.5); animation: ring var(--d-dock) var(--ease-dock) both; animation-delay: var(--dl, 0ms); }
@keyframes ring { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.checks { display: grid; gap: var(--s-3); }
.checks li { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; color: var(--muted); transition: color var(--d-base) var(--ease-out); }
.checks .tick { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; transition: background-color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); }
.checks .tick .icon { width: 14px; height: 14px; opacity: 0; transform: scale(0.4); transition: opacity var(--d-fast) var(--ease-out), transform var(--d-base) var(--ease-dock); }
.checks li.is-on { color: var(--ink); }
.checks li.is-done { color: var(--ink); }
.checks li.is-done .tick { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.checks li.is-done .tick .icon { opacity: 1; transform: none; }
.checks li.is-on:not(.is-done) .tick { border-color: var(--ink); animation: pulse 0.9s var(--ease-inout) infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 0 5px var(--sunk-2); } }

.p-res { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .p-res { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-6); align-items: start; } .p-res__photo { position: sticky; top: 0; } }
.p-res__photo { display: grid; gap: var(--s-3); }
.palbar { display: flex; height: 44px; border-radius: var(--r-s); overflow: hidden; box-shadow: inset 0 0 0 1px oklch(0.2 0.04 195 / 0.15); }
.palbar i { flex: var(--share) 1 0; background: var(--c); transform-origin: left; animation: grow var(--d-slow) var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes grow { from { transform: scaleX(0); } }
.palnames { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.03em; }
.p-res__col { display: grid; gap: var(--s-5); }
.p-sec { display: grid; gap: var(--s-3); }
.p-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.vibes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.style-list { display: grid; gap: var(--s-2); }
.style-card { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2); border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); text-align: left; transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out), transform var(--d-instant) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.style-card:hover { border-color: var(--ink); background: var(--sunk); }
.style-card:active { transform: scale(0.985); }
.style-card .plate { border-radius: var(--r-s); padding: 8% 8% 14%; }
.style-card__txt { display: grid; gap: 2px; min-width: 0; }
.style-card__name { font-family: var(--font-display); font-weight: 700; font-stretch: 85%; font-size: 1.2rem; line-height: 1.1; }
.style-card__blurb { font-size: var(--fs-small); color: var(--muted); line-height: 1.3; }
.style-card__side { display: grid; justify-items: end; gap: 6px; }
.style-card__pct { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.04em; }
.style-card__check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
.style-card__check .icon { width: 14px; height: 14px; opacity: 0; transform: scale(0.4); transition: opacity var(--d-fast) var(--ease-out), transform var(--d-base) var(--ease-dock); }
.style-card[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.style-card[aria-pressed="true"]:hover { background: var(--surface); }
.style-card[aria-pressed="true"] .style-card__check { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.style-card[aria-pressed="true"] .style-card__check .icon { opacity: 1; transform: none; }
.tints { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-1); }
.tint { display: grid; justify-items: center; gap: 0; width: 76px; padding: 0 0 6px; border: 0; border-radius: var(--r-s); background: transparent; font-size: 0.72rem; font-weight: 600; text-align: center; line-height: 1.15; color: var(--ink); }
.tint:hover { background: var(--sunk); }
.tint .swatch { pointer-events: none; }
.p-foot { position: sticky; bottom: 0; z-index: 5; grid-template-columns: auto minmax(0, 1fr); display: grid; gap: var(--s-2); margin: var(--s-5) calc(var(--s-5) * -1) calc(var(--s-6) * -1); padding: var(--s-3) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom)); background: color-mix(in oklch, var(--paper) 97%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1.5px solid var(--line); }
@media (max-width: 479px) { .again-txt { display: none; } .p-foot #again { padding: 0; width: var(--hit-lg); } }
.p-note { font-size: var(--fs-micro); color: var(--muted); text-align: center; }

@media (max-width: 380px) {
  .style-card { grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s-2); }
  .sheet__body, .sheet .steps { padding-left: var(--s-4); padding-right: var(--s-4); }
  .p-foot { margin-left: calc(var(--s-4) * -1); margin-right: calc(var(--s-4) * -1); padding-left: var(--s-4); padding-right: var(--s-4); }
}

.intro__line { display: block; }

@media (min-width: 1024px) {
  .stage__field { height: clamp(180px, 27vh, 280px); }
  .photo-cta { order: -1; }
  .presets__row { flex-wrap: nowrap; overflow-x: auto; margin: 0 -2px; padding: 2px 2px 4px; scrollbar-width: none; }
}