/* Premium details — September 27, 2026 (qa/PREMIUM-FIXES-2026-09-27.md).
 * The welcome privacy line and Looks to try, the Save states, the tap-to-find ring, comparison guidance,
 * messages that drop in from the top when the photo is small, and a few large-text adjustments.
 * Colors, radii, shadows and timing come from the tokens in styles.css and motion.css. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Welcome: a quiet, tappable privacy promise under the photo buttons ---- */
.privacy-line {
  display: flex; width: fit-content; align-items: center; gap: 8px; min-height: 44px; margin: 12px auto 0; padding: 6px 12px 6px 10px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--taupe);
  font-size: calc(13px * var(--ts, 1)); font-weight: 500; line-height: 1.35; text-align: left;
}
.privacy-line svg { width: 18px; height: 18px; flex: none; color: var(--rose); stroke-width: 1.6; }
.privacy-line .privacy-chevron { width: 14px; height: 14px; color: var(--taupe); opacity: .7; margin-left: -2px; }
.privacy-line:hover { background: rgb(var(--blush-rgb) / .55); color: var(--ink); }
body[data-screen='editor'] .privacy-line { display: none; }
@media (min-width: 960px) { body[data-screen='welcome'] .privacy-line { margin-left: -10px; } }

/* ---- Welcome: Looks to try, an editorial row under the preview film ---- */
body[data-screen='welcome'] .inspiration {
  width: min(100%, 1050px); margin: 18px auto 0; padding: 26px 0 6px;
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body[data-screen='welcome'] .inspiration .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 2px 16px; text-align: left; }
body[data-screen='welcome'] .inspiration .section-heading .eyebrow { margin-bottom: 8px; color: var(--rose); font-size: calc(12px * var(--ts, 1)); letter-spacing: 1.8px; }
body[data-screen='welcome'] .inspiration h2 { font-size: calc(30px * var(--ts-display, 1)); line-height: 1.05; }
body[data-screen='welcome'] .inspiration .section-heading > p { display: block; margin: 0 0 3px; font-size: calc(13px * var(--ts, 1)); line-height: 1.4; color: var(--taupe); text-align: right; max-width: 180px; }
body[data-screen='welcome'] .look-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
body[data-screen='welcome'] .look-card { display: flex; flex-direction: column; min-width: 0; padding: 0; text-align: left; color: var(--ink); background: none; border: 0; }
body[data-screen='welcome'] .look-art { height: 168px; border-radius: var(--radius-m); border: 1px solid #ffffffb5; box-shadow: var(--shadow-soft); }
body[data-screen='welcome'] .look-art canvas { width: 38px; height: 70px; }
body[data-screen='welcome'] .look-card small { margin: 12px 2px 4px; font-size: calc(11px * var(--ts, 1)); font-weight: 600; letter-spacing: 1.2px; line-height: 1.35; color: var(--rose); }
body[data-screen='welcome'] .look-card strong { margin: 0 2px; font-family: var(--serif); font-size: calc(21px * var(--ts, 1)); font-weight: 600; line-height: 1.1; letter-spacing: -.1px; }
body[data-screen='welcome'] .look-card:hover .look-art { box-shadow: var(--shadow-float); }
body[data-screen='welcome'] .look-card:focus-visible { outline: none; }
body[data-screen='welcome'] .look-card:focus-visible .look-art { outline: 3px solid var(--plum); outline-offset: 3px; }
@media (max-width: 959px) {
  /* Phones and tablets: one row that scrolls sideways and snaps card by card, edge to edge. */
  body[data-screen='welcome'] .inspiration { padding-top: 22px; }
  body[data-screen='welcome'] .look-grid {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 14px;
    margin: 0 -14px; padding: 2px 14px 14px; scrollbar-width: none;
  }
  body[data-screen='welcome'] .look-grid::-webkit-scrollbar { display: none; }
  body[data-screen='welcome'] .look-card { flex: 0 0 156px; scroll-snap-align: start; }
  body[data-screen='welcome'] .look-art { height: 176px; }
}
@media (max-width: 360px) {
  body[data-screen='welcome'] .look-grid { margin: 0 -10px; padding-left: 10px; padding-right: 10px; scroll-padding: 0 10px; }
  body[data-screen='welcome'] .inspiration .section-heading > p { display: none; }
}

/* ---- Welcome: the footer closes the page with the brand and the privacy promise ---- */
body[data-screen='welcome'] footer {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(100%, 1050px);
  margin: 26px auto 0; padding: 22px 0 max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  font-size: calc(13px * var(--ts, 1)); color: var(--taupe); text-align: center;
}
body[data-screen='welcome'] footer img { width: 26px; height: 26px; opacity: .9; }
body[data-screen='welcome'] footer button { margin: 0; min-height: 44px; font-size: calc(13px * var(--ts, 1)) !important; font-weight: 600; color: var(--rose); }

/* ---- Messages drop in from the top when the photo is too short to share ---- */
#toast.toast-top { transform: translate(-50%, -14px) scale(.96); }
#toast.toast-top.visible { transform: translate(-50%, 0) scale(1); }
body[data-screen] #toast.toast-top { box-shadow: var(--shadow-float); }

/* ---- Save: Save look, Saving…, Saved (filled heart), Save changes ---- */
body[data-screen='editor'] #saveProject { transition: scale var(--t-spring-press) var(--spring-press), background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
body[data-screen='editor'] #saveProject svg path { transition: fill var(--t-base) var(--ease-out); }
body[data-screen='editor'] #saveProject[data-state='saved'] { background: var(--blush); color: var(--plum); border-color: transparent; }
body[data-screen='editor'] #saveProject[data-state='saved'] svg path { fill: currentColor; }
body[data-screen='editor'] #saveProject[data-state='saving'] svg { animation: save-beat 900ms var(--ease-in-out) infinite; }
/* Waiting for nails: clearly inactive, not a faded plum. */
body[data-screen='editor'] #saveProject:disabled:not([data-state='saving']) { opacity: 1; background: var(--linen); color: rgb(var(--taupe-rgb) / .78); border-color: transparent; }
body[data-screen='editor'] #saveProject[data-state='saving']:disabled { opacity: 1; }
@keyframes save-beat { 0%, 100% { scale: 1; } 40% { scale: 1.16; } 60% { scale: .98; } }

/* ---- Tap a missed nail: the ring where the finger landed ---- */
.find-ring {
  position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none;
  transform: scale(calc(1 / var(--zoom, 1)));
}
.find-ring i {
  position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(var(--plum-rgb) / .28), inset 0 0 0 1px rgb(var(--plum-rgb) / .18);
  background: radial-gradient(circle, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 70%);
}
.find-ring span {
  position: absolute; left: 50%; top: 40px; translate: -50% 0; white-space: nowrap; padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgb(var(--plum-rgb) / .9); color: #fff; font-size: calc(13px * var(--ts, 1)); font-weight: 600; line-height: 1.2;
  box-shadow: var(--shadow-soft);
}
.find-ring.is-looking i { animation: find-in 420ms var(--spring-pop) both, find-breathe 1.3s var(--ease-in-out) 420ms infinite; }
.find-ring.is-looking span { animation: find-label 320ms var(--ease-out) 120ms both; }
.find-ring.is-found i { animation: find-bloom 560ms var(--ease-out) forwards; }
.find-ring.is-found span, .find-ring.is-missed span, .find-ring.is-leaving span { animation: find-out 220ms var(--ease-in) forwards; }
.find-ring.is-missed i { animation: find-shake 420ms var(--ease-out), find-out 260ms var(--ease-in) 380ms forwards; }
.find-ring.is-leaving i { animation: find-out 260ms var(--ease-in) forwards; }
@keyframes find-in { from { opacity: 0; scale: .55; } to { opacity: 1; scale: 1; } }
@keyframes find-breathe { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.1; opacity: .78; } }
@keyframes find-label { from { opacity: 0; translate: -50% -4px; } to { opacity: 1; translate: -50% 0; } }
@keyframes find-bloom { 0% { scale: 1; opacity: 1; } 100% { scale: 1.7; opacity: 0; border-width: 1px; } }
@keyframes find-shake { 0%, 100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 5px; } 60% { translate: -3px; } 80% { translate: 2px; } }
@keyframes find-out { to { opacity: 0; } }

/* ---- Comparison: what to do next, in the bar instead of over the photo ---- */
body[data-screen='editor'] .comparison-bar > p.comparison-hint {
  display: block; margin: 6px 6px 1px; min-height: 1.35em; text-align: center;
  font-size: calc(13px * var(--ts, 1)); line-height: 1.35; color: var(--taupe);
}

/* ---- Large text: keep controls whole when the reader's text size is up ---- */
html[data-text-size='xlarge'] body[data-screen='editor'] .preview-top .quiet-button { white-space: nowrap; }
html[data-text-size='xlarge'] body[data-screen='editor'] #toggleOutlines,
html[data-text-size='xlarge'] body[data-screen='editor'] .compare { padding-left: 11px; padding-right: 11px; }

@media (prefers-reduced-motion: reduce) {
  .find-ring.is-looking i, .find-ring.is-looking span { animation: none; }
  .find-ring.is-found i, .find-ring.is-missed i { animation: find-out 180ms linear forwards; }
  body[data-screen='editor'] #saveProject[data-state='saving'] svg { animation: none; }
  #toast.toast-top, #toast.toast-top.visible { transform: translate(-50%, 0); }
}

/* ---- Nail tech card: the color in words leads; the code follows, quieter ---- */
.tech-list span .tech-code { display: inline; margin: 0; font-size: inherit; color: inherit; opacity: .72; }