/* starmap.css - Honey Finch star-map builder section styles.
   Transplant of the judge-approved local mock (brain/notebook/starmap/judge-rounds.md,
   design FROZEN at round 15). Classes/ids prefixed sm- throughout to avoid colliding
   with theme defaults or other sections on the same page. The mocks top <header>
   (hf-topbar) is NOT ported - the theme owns page header/nav. The mocks navy
   <footer class="hf-trustbar"> IS ported (as .sm-trustbar) - it is PART of the
   frozen section design, rendered above the themes own site footer, not
   page-footer chrome. Drift-fix pass 2026-07-06: theme typography/button resets
   were bleeding into this section; every text element below now hard-locks
   font-family/size/weight so no theme utility class can override it. */

.sm-root {
  --sm-navy: #12213d;
  --sm-cream: #ffffff;
  --sm-paper: #ffffff;
  --sm-ink: #1a1a1a;
  --sm-muted: #767676;
  --sm-line: #d8d8d4;
  --sm-green: #3a9c50;
  --sm-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sm-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  background: var(--sm-cream);
  color: var(--sm-ink);
  font-family: var(--sm-sans);
  -webkit-font-smoothing: antialiased;
}
/* Theme-bleed lock (fix 1): the Craft theme applies its own serif to headings,
   buttons and labels via broad selectors that outrank a bare class here. Force
   sans + normal line-height on every descendant of the section; only .sm-h1
   opts back into the serif display face (matches the frozen mock). Kept to
   font-family/line-height/text-transform only - never fights layout props. */
.sm-root, .sm-root * {
  font-family: var(--sm-sans) !important;
}
.sm-root .sm-h1 {
  font-family: var(--sm-serif) !important;
}
.sm-root * { box-sizing: border-box; }
.sm-root button {
  padding: 0;
  border-radius: 0;
  font-weight: 300;
  color: rgb(18, 24, 36);
  background-color: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.sm-root span { font-weight: 300; color: rgb(107, 114, 128); }
.sm-root p { margin: 0; }
.sm-hidden { display: none !important; }

/* live preview stage */
.sm-preview-stage {
  background: linear-gradient(180deg, #eceef0 0%, #e3e5e8 100%);
  padding: 4.6rem 2rem;
  display: flex;
  justify-content: center;
}
.sm-frame {
  width: 100%;
  max-width: 24rem;
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.18) 100%),
    var(--sm-frame-bg, var(--sm-navy));
  border-radius: 0.15rem;
  box-shadow:
    0 2.2rem 3rem -1.2rem rgba(0,0,0,0.35),
    0 0.4rem 0.8rem -0.2rem rgba(0,0,0,0.2);
  padding: 1.6rem;
  transition: background 0.25s ease;
}
.sm-frame-inner {
  height: 100%;
  border: 1px solid rgba(255,255,255,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.2rem 1.6rem;
}
#sm-celestial-map {
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.85);
  position: relative;
  transition: border-color 0.2s ease;
}
/* MAP STYLE ring states (2026-07-06): ring-dark/ring-line keep a hairline ring, coloured
   to sit against their own chart background; disc-white/disc-dark have no ring at all -
   toggled by JS (state.mapStyle) alongside the actual chart redraw, never CSS-only. */
#sm-celestial-map.sm-ring-off { border-color: transparent; }
#sm-celestial-map.sm-ring-on[data-sm-ring-tone="dark"] { border-color: rgba(255,255,255,0.85); }
#sm-celestial-map.sm-ring-on[data-sm-ring-tone="light"] { border-color: rgba(18,33,61,0.65); }
#sm-celestial-map::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(0,0,0,0.0) 45%, rgba(0,0,0,0.16) 100%);
  pointer-events: none;
}
#sm-celestial-map svg { width: 100%; height: 100%; display: block; }
#sm-celestial-map canvas { width: 100% !important; height: 100% !important; display: block; }
#sm-celestial-map text[class^="constname"] { display: none !important; }
.sm-caption {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: #fff;
  text-align: center;
  font-family: var(--sm-sans);
}
.sm-caption span { font-size: 0.62rem; letter-spacing: 0.08em; opacity: 0.85; color: #fff; font-weight: 400; text-transform: uppercase; }
.sm-cap-title { font-weight: 500; margin-bottom: 0.3rem; font-size: 0.66rem; text-transform: uppercase; }

/* step nav */
.sm-steps {
  display: flex;
  justify-content: space-between;
  padding: 1.8rem 2rem 0;
  background: var(--sm-cream);
  font-size: 1.4rem;
}
.sm-steps .sm-step { color: var(--sm-muted); font-weight: 300; }
.sm-steps .sm-step.sm-active { color: var(--sm-navy); font-weight: 400; }

/* panel */
.sm-panel { padding: 1.6rem 2rem 4rem; background: var(--sm-cream); }
.sm-h1 {
  font-family: var(--sm-serif) !important;
  font-weight: 400 !important;
  font-size: 2.4rem !important;
  line-height: 1.2;
  margin: 0.6rem 0 1.4rem;
}
.sm-sub { font-family: var(--sm-sans) !important; font-size: 1.5rem !important; font-weight: 400 !important; color: var(--sm-muted); margin: -0.6rem 0 1.8rem; line-height: 1.4; }

.sm-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}
.sm-from { font-size: 1.4rem; font-weight: 400; color: rgb(18, 24, 36); margin: 0; }
.sm-from strong { font-weight: 700; }
.sm-stock { color: var(--sm-green); font-size: 1.4rem; display: flex; align-items: center; gap: 0.5rem; }
.sm-stock .sm-dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--sm-green); display: inline-block; }

.sm-label {
  font-family: var(--sm-sans) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: rgb(10, 14, 21) !important;
  text-decoration: none !important;
  margin: 0;
  line-height: 1.3;
}
.sm-label .sm-optional { font-weight: 400; color: var(--sm-muted); }
.sm-swatches, .sm-tiles, .sm-pills, .sm-price-row, .sm-date-row, .sm-size-list, .sm-frame-upsell, .sm-field-wrap, .sm-advanced { margin-bottom: 2rem; }
.sm-pills-elements { margin-bottom: 0.8rem; display: flex; gap: 0.8rem; background: #eceef0; padding: 1.2rem; border-radius: 0.6rem; }
.sm-pills-elements .sm-pill { flex: 1; }
.sm-pills-elements .sm-pill.sm-active { font-weight: 400; }
.sm-label + * { margin-top: 1rem; }
.sm-tier-group + .sm-label, .sm-swatches + .sm-label, .sm-tiles + .sm-label,
.sm-pills-elements + .sm-label { margin-top: 2.6rem; }

/* swatches */
.sm-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  background: #eceef0;
  padding: 1.2rem;
  border-radius: 0.4rem;
}
.sm-swatch {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  padding: 1.1rem 0.9rem; /* Malcolm 07-06: selected card read cramped — give the label air */
  font-family: var(--sm-sans) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: var(--sm-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.sm-swatch.sm-active { background: var(--sm-paper); border: 1.5px solid var(--sm-ink) !important; border-radius: 0.4rem !important; }
.sm-root .sm-swatches button.sm-swatch .sm-swatch-name,
.sm-root .sm-swatches .sm-swatch .sm-swatch-name {
  color: var(--sm-muted) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  line-height: 1.35;
  text-align: center;
}
.sm-root .sm-swatches button.sm-swatch.sm-active .sm-swatch-name,
.sm-root .sm-swatches .sm-swatch.sm-active .sm-swatch-name {
  color: rgb(18, 24, 36) !important;
  text-decoration: none !important;
}
.sm-swatch .sm-swatch-dot { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--sm-c); display: block; border: 1px solid rgba(0,0,0,0.08); }

/* tiles: map style / theme */
.sm-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  background: #eceef0;
  padding: 1.2rem;
  border-radius: 0.4rem;
}
.sm-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-tile {
  aspect-ratio: 1 / 1;
  background: var(--sm-paper);
  border: 1px solid var(--sm-line);
  border-radius: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.6rem;
}
.sm-tile.sm-active { border: 1.5px solid var(--sm-ink) !important; border-radius: 0.4rem !important; }

/* tactile pick feedback (2026-07-06): ~200ms scale/pulse on whatever tile/swatch/pill was
   just picked - fixes "no feedback animation to confirm what you picked worked" (Malcolm).
   Same class is reused across every picker group (style/theme/elements/layout/swatch/
   format/print-type/size) so the feel is one consistent language site-wide. */
@keyframes sm-pulse-kf { 0% { transform: scale(1); } 40% { transform: scale(0.94); } 100% { transform: scale(1); } }
.sm-pulse { animation: sm-pulse-kf 200ms ease; }
@media (prefers-reduced-motion: reduce) {
  .sm-pulse { animation: none; }
}
.sm-tile-name { font-family: var(--sm-sans) !important; font-size: 1.1rem !important; font-weight: 400 !important; color: var(--sm-muted) !important; text-decoration: none !important; }
.sm-tile.sm-active .sm-tile-name { color: rgb(18, 24, 36); }
.sm-tile.sm-dark { background: var(--sm-navy); }
.sm-tile.sm-light { background: var(--sm-paper); }
.sm-style-svg { width: 78%; height: auto; display: block; }
.sm-theme-img { width: 88%; max-width: 88%; height: auto; display: block; border-radius: 50%; }

/* theme tiles: reference ghosts unselected options directly on the grey panel, no card */
.sm-tile.sm-theme { background: transparent; border: 1px solid transparent; }
.sm-tile.sm-theme.sm-active { background: var(--sm-paper); border: 1.5px solid var(--sm-ink) !important; border-radius: 0.4rem !important; }
.sm-tile.sm-theme .sm-theme-img { opacity: 0.95; }
.sm-tile.sm-theme.sm-active .sm-theme-img { opacity: 1; }

/* pills */
.sm-pills { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.sm-pill {
  padding: 0 1.2rem;
  border-radius: 0.4rem;
  border: 1px solid var(--sm-line);
  background: var(--sm-paper);
  color: var(--sm-ink) !important;
  text-decoration: none !important;
  font-family: var(--sm-sans) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  min-height: 4rem;
  min-width: 6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sm-pill.sm-active { border: 1.5px solid var(--sm-ink) !important; border-radius: 0.4rem !important; background: var(--sm-paper); color: var(--sm-ink); font-weight: 500 !important; }

/* format / print-type tier rows */
.sm-tier-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  background: #eceef0;
  padding: 1.2rem;
  border-radius: 0.4rem;
}
.sm-tier-btn {
  min-height: 4.8rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  font-family: var(--sm-sans) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: var(--sm-muted) !important;
  text-decoration: none !important;
  cursor: pointer;
}
.sm-tier-btn.sm-active { background: var(--sm-paper); border: 1.5px solid var(--sm-ink) !important; border-radius: 0.4rem !important; font-weight: 500 !important; color: var(--sm-ink) !important; }

/* CTA (fix 2: pill lost to theme button reset - scoped chain + !important
   on the load-bearing visual props only; layout/spacing stays unforced) */
.sm-root .sm-panel button.sm-cta,
.sm-root .sm-panel .sm-cta {
  display: block;
  width: 100%;
  padding: 1.6rem;
  margin-top: 1.6rem;
  border: none !important;
  border-radius: 5.2rem !important;
  background: var(--sm-green) !important;
  color: #fff !important;
  font-family: var(--sm-sans) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.sm-root .sm-panel button.sm-cta:hover,
.sm-root .sm-panel .sm-cta:hover {
  background: var(--sm-green) !important;
  color: #fff !important;
}
.sm-root .sm-panel button.sm-cta-ghost,
.sm-root .sm-panel .sm-cta-ghost {
  display: block;
  width: 100%;
  padding: 1.6rem;
  margin-top: 2.8rem;
  border: 1px solid var(--sm-ink) !important;
  border-radius: 5.2rem !important;
  background: transparent !important;
  color: var(--sm-ink) !important;
  font-family: var(--sm-sans) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  cursor: pointer;
}
.sm-step-nav { display: flex; gap: 1rem; }
.sm-step-nav .sm-cta, .sm-step-nav .sm-cta-ghost { margin-top: 1.6rem; }

/* step 2 fields */
.sm-field-wrap { position: relative; }
.sm-input, .sm-select, .sm-textarea {
  width: 100%;
  padding: 1.3rem 1.4rem;
  font-size: 1.5rem;
  border: 1px solid var(--sm-ink);
  border-radius: 0.4rem;
  font-family: var(--sm-sans);
  background: var(--sm-paper);
}
.sm-textarea { min-height: 8rem; resize: vertical; }
.sm-date-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.sm-suggest {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--sm-paper);
  border: 1px solid var(--sm-line);
  border-top: none;
  border-radius: 0 0 0.4rem 0.4rem;
  z-index: 5;
  display: none;
}
.sm-field-wrap:focus-within .sm-suggest { display: block; }
.sm-sug { padding: 1.1rem 1.4rem; font-size: 1.4rem; cursor: pointer; }
.sm-sug:hover { background: var(--sm-cream); }
.sm-advanced-toggle {
  background: none; border: none; padding: 0;
  font-size: 1.3rem; color: var(--sm-muted); margin-top: 1rem; cursor: pointer;
}
.sm-advanced { margin-top: 1rem; }

/* step 3 */
.sm-size-list { display: flex; flex-direction: column; gap: 0.8rem; }
.sm-size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--sm-line);
  border-radius: 0.4rem;
  font-size: 1.5rem;
  cursor: pointer;
}
.sm-size-row.sm-active { border: 1.5px solid var(--sm-ink) !important; border-radius: 0.4rem !important; }
.sm-size-row input { margin-right: 1rem; }
.sm-size-name, .sm-size-price { color: var(--sm-ink); font-weight: 400; }
.sm-size-price { font-weight: 600; }
.sm-frame-upsell { border: 1px solid var(--sm-line); border-radius: 0.4rem; padding: 1.4rem 1.6rem; }
.sm-frame-row { display: flex; align-items: flex-start; gap: 1.2rem; cursor: pointer; }
.sm-frame-copy { display: flex; flex-direction: column; gap: 0.3rem; font-size: 1.4rem; }
.sm-frame-copy small { color: var(--sm-muted); font-size: 1.2rem; }
.sm-blurb { font-size: 1.3rem; color: var(--sm-muted); line-height: 1.5; margin: 1.8rem 0; }
.sm-buybox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  border-top: 1px solid var(--sm-line);
  padding-top: 1.6rem;
}
.sm-buybox-total { display: flex; flex-direction: column; font-size: 1.3rem; color: var(--sm-muted); }
.sm-buybox-total span { color: var(--sm-muted); }
.sm-buybox-total strong { font-size: 2.2rem; color: var(--sm-ink); }
.sm-cta-buy { margin-top: 0; flex: 1; }

/* trust strip (fix 3: this navy block is PART of the section per the frozen
   mock - it renders above the theme's own footer, it is not footer chrome.
   1:1 port of .hf-trustbar/.hf-trust-* from the mock, sm- prefixed). */
.sm-trustbar {
  background: #0e1626;
  color: #fff;
  padding: 2.4rem 2rem 3.2rem;
  text-align: center;
}
.sm-trust-chat, .sm-trust-save { color: #fff !important; }
.sm-trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.3rem;
  margin-bottom: 2rem;
}
.sm-brand-badge {
  width: 5.2rem; height: 5.2rem;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sm-brand-badge img { width: 78%; height: auto; display: block; }
.sm-rating-word { font-family: var(--sm-sans) !important; font-size: 1.8rem !important; font-weight: 700 !important; display: block; color: #fff !important; }
.sm-stars-native { display: flex; justify-content: center; gap: 0.3rem; margin: 0.8rem 0; }
.sm-star-native {
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  line-height: 1;
  color: #45495a;
}
.sm-star-native.sm-full { color: #f5a623; }
.sm-star-native.sm-partial .sm-star-svg { width: 2.2rem; height: 2.2rem; display: block; }
.sm-rating-count { font-family: var(--sm-sans) !important; font-size: 1.3rem !important; font-weight: 400 !important; color: #cfd3da !important; }
.sm-trust-icons p {
  text-align: start;
  font-family: var(--sm-sans) !important;
  font-weight: 300 !important;
  font-size: 1.3rem !important;
  color: rgb(251, 251, 252) !important;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.sm-trust-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
  font-size: 1.3rem;
  color: rgb(251, 251, 252);
}
.sm-trust-ico { width: 1.8rem; height: 1.8rem; flex: none; }
.sm-trust-chat, .sm-trust-save {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sm-sans) !important;
  font-size: 1.3rem !important;
  color: #fff !important;
}

@media (min-width: 700px) {
  .sm-preview-stage { position: sticky; top: 0; z-index: 3; }
}

/* delta fix: .sm-active border was overridden on style tiles; outline reads on light AND dark */
.sm-root .sm-tiles .sm-tile.sm-active { outline: 2px solid #1a1a1a !important; outline-offset: -2px; }
.sm-root .sm-tiles .sm-tile.sm-dark.sm-active { outline: 2px solid #ffffff !important; }