/* =============================================================
   Theme picker (tier tabs + labeled 3×3 grid) — shared by /create
   + /stickers. Rendered by templates/partials/theme_picker.html;
   behavior in static/js/theme-picker.js.

   Layout: compact tier-tab track → one tier's 3×3 grid → CTA.
   There is no pick panel / summary strip — the card label and the
   coral selection ring are the entire selection UI.

   Every rule is scoped under .theme-picker — the legacy .theme-grid /
   .theme-card / .theme-img rules in style.css (still used by
   /coastal) and any page-local ones must not leak in, so properties
   they set (animation, aspect-ratio, sheen pseudo-elements, hover
   transforms) are explicitly reset here.

   Selection ring shows for BOTH selection classes: .selected
   (/create app.js) and .sel (/stickers inline JS).
   ============================================================= */

.theme-picker{container-type:inline-size;container-name:picker;display:block;font-family:'Nunito Sans','Nunito',sans-serif;color:#3D3229;}

/* ---------------- tier tabs (segmented pill track) ----------------
   Two jobs beyond "show the tiers":
   1. Breathing room off the panel head. The picker's own top padding is
      owned by each page's container rule (.step-card .theme-picker on
      /stickers, at higher specificity), so the gap has to live on the
      track itself — margin-top, not the picker's padding.
   2. Read as ONE group selector with THREE separate options. The track is
      recessed (inset shadow) so the active white pill reads as raised; a
      hairline divider separates adjacent INACTIVE tabs so "Classics
      Occasions" can't scan as a single phrase; and the active tab carries
      a coral ring on top of the white pill so it is unmistakable.
   Width is tight here — the /create desktop column renders a ~217px track
   whose three labels already fill it — so every separation cue below is
   deliberately zero-width (inset shadow, absolutely-positioned hairline,
   ring drawn with box-shadow). Do not add horizontal padding/letter-spacing
   to .tier-tab without re-checking /create at 1440px. */
.theme-picker .tier-tabs{display:flex;width:100%;gap:4px;margin-top:14px;padding:3px;background:var(--color-cream-dark,#F5EDE8);border-radius:999px;box-shadow:inset 0 1px 2px rgba(61,50,41,.07);}
.theme-picker .tier-tab{position:relative;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;min-height:32px;border:0;border-radius:999px;background:transparent;cursor:pointer;font:700 13px/1 'Nunito Sans','Nunito',sans-serif;color:#6B5D52;transition:background .15s,color .15s,box-shadow .15s;}
/* Divider lives in the 4px flex gap (left:-2.5px), so it costs no layout
   width. Suppressed on either side of the active pill, which separates
   its neighbours by itself. */
.theme-picker .tier-tab + .tier-tab::before{content:'';position:absolute;left:-2.5px;top:8px;bottom:8px;width:1px;border-radius:1px;background:rgba(61,50,41,.18);}
.theme-picker .tier-tab.is-active::before,
.theme-picker .tier-tab.is-active + .tier-tab::before{content:none;}
.theme-picker .tier-tab:hover:not(.is-active){color:#3D3229;background:rgba(255,255,255,.62);}
.theme-picker .tier-tab:active:not(.is-active){background:rgba(255,255,255,.85);}
.theme-picker .tier-tab.is-active{background:#fff;color:#E8785A;font-weight:800;box-shadow:0 0 0 1px rgba(232,120,90,.38),0 2px 4px rgba(61,50,41,.14);}
.theme-picker .tier-dot{display:none;width:6px;height:6px;border-radius:999px;background:#E8785A;}
.theme-picker .tier-tab.has-sel:not(.is-active) .tier-dot{display:inline-block;}

/* ---------------- theme grid ---------------- */
.theme-picker .theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0;padding:0;}

/* One tier on screen at a time. All 27 cards are in the DOM; the grid's
   data-open-tier attribute picks the visible nine (hidden cards create no
   grid tracks, so every tier lands as the same-height 3×3). */
.theme-picker .theme-grid .theme-card{display:none;}
.theme-picker .theme-grid[data-open-tier="classics"] .theme-card[data-tier="classics"],
.theme-picker .theme-grid[data-open-tier="occasions"] .theme-card[data-tier="occasions"],
.theme-picker .theme-grid[data-open-tier="family"] .theme-card[data-tier="family"]{display:block;}

/* ---------------- theme card ----------------
   Sand shell wrapping a white art plate + white label strip. Explicitly
   resets everything the legacy style.css .theme-card rules set.
   display is owned exclusively by the data-open-tier show/hide pair above —
   do not set it here (a higher-specificity display would unhide all 27). */
.theme-picker .theme-card{position:relative;width:100%;height:auto;aspect-ratio:auto;margin:0;padding:0;overflow:visible;cursor:pointer;background:#EFE9E3;border:1px solid #E4DDD5;border-radius:16px;color:#3D3229;box-shadow:0 1px 3px rgba(61,50,41,.10);transform:none;rotate:none;animation:none;transition:translate .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s cubic-bezier(.34,1.56,.64,1);}
.theme-picker .theme-card::before,.theme-picker .theme-card::after{content:none;}
.theme-picker .theme-card:hover{translate:0 -3px;transform:none;box-shadow:0 8px 20px rgba(61,50,41,.16);}
.theme-picker .theme-card:active{translate:0 1px;transform:none;box-shadow:0 1px 3px rgba(61,50,41,.10);}
.theme-picker .theme-card.sel,.theme-picker .theme-card.selected{border-color:#E4DDD5;border-width:1px;transform:none;}

.theme-picker .theme-card-shell{display:flex;flex-direction:column;height:100%;border-radius:inherit;overflow:hidden;animation:tpWobble 5.4s ease-in-out infinite;}
.theme-picker .theme-card:nth-child(2n) .theme-card-shell{animation-delay:-1.8s;}
.theme-picker .theme-card:nth-child(3n) .theme-card-shell{animation-delay:-3.6s;}
.theme-picker .theme-card:hover .theme-card-shell,
.theme-picker .theme-card.sel .theme-card-shell,
.theme-picker .theme-card.selected .theme-card-shell{animation:none;}
@keyframes tpWobble{0%,100%{transform:rotate(0deg);}25%{transform:rotate(.7deg);}75%{transform:rotate(-.7deg);}}

.theme-picker .theme-plate{display:block;position:relative;padding:8px 8px 6px;}
/* No plate behind the art: the mascot webps are fully transparent, so they sit
   directly on the card's sand shell. object-fit:contain (not cover) so a
   transparent mascot is never cropped by the square. */
/* The art renders 10% larger than the layout box it occupies: width 110%
   with a -5% margin on all four sides. Percentage margins (top/bottom
   included) resolve against the containing block's WIDTH, so the margin box
   is exactly 100% × 100% of the plate's content box — .theme-plate and
   .theme-card keep their existing dimensions at every breakpoint, and the
   grid never reflows. Scaling this way (rather than trimming .theme-plate
   padding) is the only option that stays a constant +10% across the whole
   67px–221px card-width range, since the plate padding is a fixed 8/8/6px.
   The 5% that spills past the plate padding can never clip artwork: all 27
   mascot webps carry >=5.25% empty alpha inset on every side, and the spill
   is 4.55% of the rendered image (5% of the smaller layout box).
   max-width:none is load-bearing: /stickers ships a global `img{max-width:100%}`
   reset, which clamps the 110% back to 100% while the negative margins still
   apply — the art ends up its old size AND pushed off-centre. */
.theme-picker .theme-img{display:block;width:110%;max-width:none;height:auto;margin:-5%;aspect-ratio:1/1;object-fit:contain;background:transparent;border-radius:0;box-shadow:none;transform:none;transition:none;}
/* style.css's legacy `.theme-card:nth-child(1) .theme-img, .theme-card:nth-child(7)
   .theme-img {width:90%}` is specificity (0,3,0) and outranks the rule above on
   /create, which loads style.css too — it was already shrinking Royalty and Boss
   to 90% before this change. Restate the width at (0,4,0) so all nine cards in a
   tier grow together. (:nth-child counts all 27 server-rendered cards, so this
   only ever hits those two.) */
.theme-picker .theme-grid .theme-card:nth-child(1) .theme-img,
.theme-picker .theme-grid .theme-card:nth-child(7) .theme-img{width:110%;object-position:center;}
.theme-picker .theme-card:hover .theme-img,.theme-picker .theme-card.selected .theme-img{transform:none;}
.theme-picker .theme-name{display:block;margin-top:auto;padding:8px 5px;text-align:center;background:#fff;border-top:1px solid #EDE7E0;font:800 12px/1.25 'Nunito Sans','Nunito',sans-serif;letter-spacing:-.01em;color:#3D3229;}

/* Selected ring — border color + glow only; card size never changes. */
.theme-picker .theme-ring{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;border:2px solid #E8785A;box-shadow:0 0 0 4px rgba(232,120,90,.15),0 8px 20px rgba(232,120,90,.28);transition:opacity .15s;}
.theme-picker .theme-card.sel .theme-ring,.theme-picker .theme-card.selected .theme-ring{opacity:1;}

/* Initials fallback — broken mascot image or a theme shipped before its art. */
.theme-picker .theme-plate.img-broken .theme-img{display:none;}
.theme-picker .theme-plate.img-broken::after{content:attr(data-initials);display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;background:transparent;font:800 28px/1 'Nunito Sans','Nunito',sans-serif;color:#C4B5A9;letter-spacing:.02em;}

/* ---------------- CTA (static, below the grid) ---------------- */
.theme-picker .pick-cta{margin-top:16px;display:flex;flex-direction:column;align-items:stretch;gap:8px;}
/* White label on the brand orange #ffb048 with its brand ledge #e89530 — both
   are palette tokens (--pq-orange / --pq-ledge), so the CTA's colour is exactly
   what it has always been. White on #ffb048 measures only 1.82:1, so legibility
   comes from a tight warm-dark halo on the glyphs rather than from darkening the
   fill: the halo gives every stroke a hard edge, which is what the eye actually
   reads at 19px/900 uppercase. A darker #e89530 fill was tried (2.39:1) and
   rejected — it read as too dark and drifted the CTA off its brand colour.
   Still short of WCAG AA large-text (3:1); no orange light enough to read as
   this brand's CTA can clear 3:1 against white, so this is a deliberate
   brand-over-ratio call, logged in the handoff.
   Disabled does NOT go white: white at any opacity over a washed-out orange
   is unreadable. It gets a solid pale-orange tint with muted warm-brown text
   (4.35:1) instead, which also makes ready-vs-not-ready a colour cue.
   /create's loading state is a disabled button, so .btn-loader stays dark. */
.theme-picker .btn-make-stickers{position:relative;width:100%;max-width:none;height:auto;min-height:50px;padding:0 16px;border:none;border-radius:999px;background:#ffb048;color:#fff;text-shadow:0 1px 2px rgba(120,62,0,.75),0 0 6px rgba(120,62,0,.5);box-shadow:0 4px 0 #e89530;font-family:'Nunito Sans','Nunito',sans-serif;font-size:19px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:filter .15s,transform .15s,box-shadow .15s;}
.theme-picker .btn-make-stickers:hover:not(:disabled){background:#ffb048;filter:brightness(.97);transform:translateY(-1px);box-shadow:0 5px 0 #e89530;}
.theme-picker .btn-make-stickers:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 #e89530;filter:none;}
.theme-picker .btn-make-stickers:disabled{background:#FFE0B3;color:#7A6552;text-shadow:none;opacity:1;box-shadow:none;cursor:not-allowed;transform:none;}
.theme-picker .btn-make-stickers .btn-loader{border-color:rgba(61,50,41,.25);border-top-color:#3D3229;}
.theme-picker .status-text{text-align:center;margin:0;}

/* ---------------- focus ---------------- */
.theme-picker .tier-tab:focus-visible,.theme-picker .theme-card:focus-visible{outline:3px solid rgba(232,120,90,.55);outline-offset:2px;}

/* Wide containers (e.g. /create if its step-2 section ever widens):
   roomier grid, slightly larger labels. */
@container picker (min-width:720px){
  .theme-picker .tier-tabs{margin-top:16px;}
  .theme-picker .theme-grid{gap:12px;}
  .theme-picker .theme-name{font-size:13px;padding:9px 6px;}
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .theme-picker .theme-card,.theme-picker .theme-card-shell,.theme-picker .theme-ring,.theme-picker .tier-tab,.theme-picker .btn-make-stickers{animation:none!important;transition:none!important;}
}