/* First-run "make it yours" setup, plus the accord-style and reset controls in Appearance. */

.appearance-setup {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  display: none; grid-template-rows: auto 1fr auto; overflow: auto; overscroll-behavior: contain;
  background: var(--glow-background, none) var(--bg-main, Canvas); color: var(--ink);
  isolation: isolate;
}
.appearance-setup[open] { display: grid; animation: setup-fade .5s ease both; }
/* The page behind a full-screen dialog should not scroll or show its own scrollbar. */
html:has(.appearance-setup[open]), html:has(.site-tour[open]) { overflow: hidden; }
.appearance-setup::backdrop { background: var(--bg-main, Canvas); backdrop-filter: none; -webkit-backdrop-filter: none; }

.setup-aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.setup-aurora i { position: absolute; width: 56vmax; height: 56vmax; border-radius: 50%; filter: blur(70px); opacity: .38; background: radial-gradient(circle, var(--accent-color, var(--pigment, #5b62aa)), transparent 68%); animation: setup-drift 16s ease-in-out infinite alternate; }
.setup-aurora i:nth-child(1) { left: -18vmax; top: -22vmax; }
.setup-aurora i:nth-child(2) { right: -22vmax; bottom: -24vmax; animation-duration: 21s; animation-delay: -6s; opacity: .3; }
.setup-aurora i:nth-child(3) { left: 32%; top: 38%; width: 34vmax; height: 34vmax; animation-duration: 25s; animation-delay: -11s; opacity: .2; }

.setup-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 4vw, 40px); }
.setup-progress { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.setup-progress li { width: 28px; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 16%, transparent); transition: background-color .3s, width .3s; }
.setup-progress li.is-done { background: color-mix(in srgb, var(--accent-color, var(--ink)) 60%, transparent); }
.setup-progress li.is-current { width: 44px; background: var(--accent-color, var(--ink)); }
.setup-skip, .setup-back {
  min-height: 44px; padding: 8px 14px; border: 0; border-radius: 99px; background: transparent; color: var(--muted);
  font: inherit; font-size: .875rem; cursor: pointer;
}
.setup-skip:hover, .setup-back:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }

.setup-stage { display: grid; align-items: center; justify-items: center; padding: 8px clamp(16px, 4vw, 40px) 24px; }
.setup-step { width: min(780px, 100%); display: grid; gap: 14px; animation: setup-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.setup-eyebrow { margin: 0; font-size: .75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-color, var(--muted)); }
.setup-title { margin: 0; font: 400 clamp(1.9rem, 5.2vw, 3.2rem)/1.08 var(--studio-serif, Georgia, serif); letter-spacing: -.015em; color: var(--ink); outline: none; }
.setup-label { margin: 10px 0 0; font-size: .8125rem; font-weight: 650; color: var(--ink); }
.setup-sub { margin: 0; max-width: 54ch; font-size: 1.0625rem; line-height: 1.55; color: var(--muted); }

.setup-welcome { display: grid; gap: 14px; justify-items: center; text-align: center; }
.setup-welcome .setup-title { max-width: 16ch; }
.setup-line { display: inline-block; animation: setup-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.setup-line:nth-child(1) { animation-delay: .5s; }
.setup-line:nth-child(2) { animation-delay: .95s; }
.setup-welcome .setup-eyebrow { animation: setup-rise .8s ease .3s both; }
.setup-welcome .setup-sub { animation: setup-rise .8s ease 1.4s both; }
.setup-welcome .setup-summary { animation: setup-rise .8s ease .9s both; }
.setup-summary { margin: 0; padding: 8px 18px; border-radius: 99px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-card, transparent) 80%, transparent); font-weight: 600; }

/* A bloom of rings around a glowing bottle-drop. */
.setup-mark { position: relative; width: 132px; height: 132px; margin-bottom: 34px; }
.setup-mark i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent-color, var(--ink)); opacity: 0; animation: setup-ring 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.setup-mark i:nth-child(2) { animation-delay: 1.2s; }
.setup-mark i:nth-child(3) { animation-delay: 2.4s; }
.setup-mark b { position: absolute; inset: 38px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 55%, var(--accent-color, #5b62aa)), var(--accent-color, #5b62aa) 62%); box-shadow: 0 0 44px color-mix(in srgb, var(--accent-color, #5b62aa) 70%, transparent); animation: setup-pop .9s cubic-bezier(.3, 1.5, .5, 1) both, setup-breathe 4s ease-in-out 1s infinite; }
.setup-mark-done i { animation-iteration-count: 2; }

.setup-grid { display: grid; gap: 12px; }
.setup-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.setup-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-grid-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.setup-choice {
  display: grid; gap: 6px; align-content: start; justify-items: start; min-width: 0; min-height: 56px; padding: 14px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--bg-card, transparent) 82%, transparent);
  color: var(--ink); font: inherit; text-align: start; cursor: pointer;
  transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s;
  animation: setup-rise .55s cubic-bezier(.2, .8, .2, 1) both;
}
.setup-grid > :nth-child(2) { animation-delay: .05s; } .setup-grid > :nth-child(3) { animation-delay: .1s; }
.setup-grid > :nth-child(4) { animation-delay: .15s; } .setup-grid > :nth-child(n+5) { animation-delay: .2s; }
.setup-choice:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-color, var(--ink)) 60%, var(--line)); }
.setup-choice:focus-visible, .setup-skip:focus-visible, .setup-back:focus-visible, .setup-next:focus-visible { outline: 2px solid var(--accent-color, currentColor); outline-offset: 3px; }
.setup-choice[aria-pressed="true"] { border-color: var(--accent-color, var(--ink)); background: var(--tint, color-mix(in srgb, var(--accent-color) 14%, transparent)); box-shadow: inset 0 0 0 1px var(--accent-color, var(--ink)), 0 10px 30px -14px var(--accent-color, transparent); }
.setup-choice-name { font-size: .95rem; font-weight: 650; }
.setup-choice-hint { font-size: .8125rem; line-height: 1.4; color: var(--muted); }
.setup-swatch { grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }
.setup-swatch .palette-swatch { flex: none; width: 22px; height: 22px; }

.setup-sample { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.setup-sample-mode { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; height: 52px; padding: 6px; }
.setup-sample-mode i { border-radius: 5px; }
.setup-sample-mode[data-sample-mode="dark"] { background: #14141f; } .setup-sample-mode[data-sample-mode="dark"] i { background: #2a2a40; }
.setup-sample-mode[data-sample-mode="light"] { background: #f7f5f0; } .setup-sample-mode[data-sample-mode="light"] i { background: #e2ded4; }
.setup-sample-mode[data-sample-mode="palette"] { background: linear-gradient(90deg, #14141f 50%, #f7f5f0 50%); }
.setup-sample-mode[data-sample-mode="palette"] i { background: color-mix(in srgb, var(--accent-color, #5b62aa) 60%, #888); }
.setup-sample-accords { padding: 10px; min-height: 84px; display: grid; align-content: center; background: color-mix(in srgb, var(--bg-main, transparent) 70%, transparent); }
.setup-preview-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.setup-preview-chips em { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); font-style: normal; font-size: .75rem; background: var(--bg-card, transparent); }
.setup-preview-bars { gap: 3px; }
.setup-preview-bars .accord-bar { min-height: 22px; padding: 2px 8px; font-size: .75rem; animation: none; }

.setup-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px clamp(16px, 4vw, 40px) calc(22px + env(safe-area-inset-bottom)); }
.setup-actions [hidden] { display: none; }
.setup-next {
  margin-inline-start: auto; min-height: 48px; padding: 10px 28px; border: 0; border-radius: 99px;
  background: var(--ink); color: var(--bg-main, Canvas); font: inherit; font-weight: 650; cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.setup-next:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -12px var(--accent-color, #000); }
.appearance-setup[data-step="welcome"] .setup-actions { animation: setup-rise .8s ease 1.8s both; }

@keyframes setup-fade { from { opacity: 0; } }
@keyframes setup-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes setup-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes setup-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes setup-breathe { 50% { transform: scale(1.06); } }
@keyframes setup-ring { 0% { opacity: .75; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes setup-drift { to { transform: translate(8vmax, 6vmax) scale(1.12); } }

@media (max-width: 640px) {
  .setup-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .setup-grid-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .setup-sample-mode { height: 38px; }
  .setup-progress li { width: 18px; } .setup-progress li.is-current { width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .appearance-setup *, .appearance-setup { animation: none !important; transition: none !important; }
}
html[data-motion="off"] .appearance-setup, html[data-motion="off"] .appearance-setup * { animation: none !important; transition: none !important; }

/* Appearance dialog: accord style choice and footer. */
.accord-style-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1, 6px); }
.appearance-controls .accord-style-options button { display: grid; gap: 4px; justify-items: start; padding: 8px; text-align: start; }
.accord-style-sample { display: grid; align-content: center; width: 100%; box-sizing: border-box; min-height: 74px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg-main, transparent) 70%, transparent); }
.accord-style-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.accord-style-chips em { padding: 4px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-card, transparent); color: var(--ink); font-style: normal; font-size: .75rem; font-weight: 600; }
.accord-style-bars { gap: 3px; margin: 0; padding: 0; list-style: none; display: grid; }
.accord-style-bars .accord-bar { min-height: 20px; padding: 1px 8px; font-size: .72rem; animation: none; }
.accord-style-name { font-weight: 650; }
.accord-style-hint { color: var(--muted); font-size: .72rem; }
.appearance-footer { display: flex; flex-wrap: wrap; gap: var(--space-1, 6px); justify-content: flex-end; padding-block-start: var(--space-2, 12px); border-block-start: 1px solid var(--line); }

/* Required accord choice: "Recommended" marker, explanation, and the disabled Continue state. */
.recommended-badge { display: inline-block; margin-inline-start: 8px; padding: 2px 9px; border-radius: 99px; vertical-align: 2px; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--accent-color, #5b62aa) 22%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent-color, #5b62aa) 60%, transparent); }
.setup-note { margin: 4px 0 0; max-width: 62ch; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.setup-need { margin: 0; min-height: 1.3em; font-size: .875rem; font-weight: 600; color: var(--accent-color, var(--ink)); }
.setup-next:disabled { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }
.appearance-setup[data-plan="accords"] .setup-progress, .appearance-setup[data-plan="accords"] .setup-back { display: none; }
.appearance-setup[data-plan="accords"] .setup-stage { align-items: center; }
.accord-style-note { margin: 0 0 8px; font-size: .75rem; line-height: 1.45; color: var(--muted); }
.appearance-controls .accord-style-options button .recommended-badge { margin-inline-start: 6px; font-size: .625rem; padding: 1px 7px; }