/* VELORA GEM AND JEWELRY: Gem Discovery Tools page.
   Mobile-first. Uses the shared --tgs-* tokens with fallbacks, so the page also works on its own.
   Breakpoints: 480, 768, 1024 (min-width). Nothing here forces styles with important flags or restyles the shared header or footer. */

body.page-tools {
  --tg-v950: var(--tgs-violet-950, #150A2E);
  --tg-v900: var(--tgs-violet-900, #2A0F5C);
  --tg-v800: var(--tgs-violet-800, #3B0A7A);
  --tg-v700: var(--tgs-violet-700, #5B21B6);
  --tg-v600: var(--tgs-violet-600, #7C3AED);
  --tg-orchid: var(--tgs-orchid, #C084FC);
  --tg-v200: var(--tgs-violet-200, #DDD6FE);
  --tg-v100: var(--tgs-violet-100, #EDE9FE);
  --tg-v50: var(--tgs-violet-50, #F6F2FF);
  --tg-bg: var(--tgs-bg, #FAF8FF);
  --tg-ink: var(--tgs-ink, #1B1030);
  --tg-muted: var(--tgs-muted, #6B6485);
  --tg-line: var(--tgs-line, #E7E0F7);
  --tg-gold: var(--tgs-gold, #C9A24B);
  --tg-r-sm: var(--tgs-r-sm, .75rem);
  --tg-r-md: var(--tgs-r-md, 1.25rem);
  --tg-r-lg: var(--tgs-r-lg, 1.75rem);
  --tg-shadow-sm: var(--tgs-shadow-sm, 0 6px 20px rgba(91, 33, 182, .08));
  --tg-shadow-md: var(--tgs-shadow-md, 0 20px 60px rgba(91, 33, 182, .14));
  --tg-ease: var(--tgs-ease, cubic-bezier(.22, 1, .36, 1));
  --tg-gutter: var(--tgs-gutter, clamp(1rem, 4vw, 2rem));
  --tg-tap: var(--tgs-tap, 2.75rem);
  --tg-step-0: var(--tgs-step-0, clamp(1rem, .96rem + .2vw, 1.125rem));
  --tg-step-1: var(--tgs-step-1, clamp(1.25rem, 1.15rem + .5vw, 1.5rem));
  --tg-step-2: var(--tgs-step-2, clamp(1.6rem, 1.4rem + 1vw, 2.25rem));
  --tg-step-3: var(--tgs-step-3, clamp(2rem, 1.6rem + 2vw, 3.5rem));
  --tg-step-4: var(--tgs-step-4, clamp(2.5rem, 1.8rem + 3.5vw, 5.5rem));
  --tg-head: var(--tgs-font-head, 'Cormorant Garamond', Georgia, serif);
  --tg-body: var(--tgs-font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  margin: 0;
  background: var(--tg-bg);
  color: var(--tg-ink);
  font-family: var(--tg-body);
  font-size: 1rem;
  line-height: 1.6;
}
.page-tools *, .page-tools *::before, .page-tools *::after { box-sizing: border-box; }
.page-tools [hidden] { display: none; }
.page-tools :focus-visible { outline: 3px solid var(--tg-v600); outline-offset: 3px; }
.page-tools .tg-hero :focus-visible, .page-tools .tg-closing :focus-visible, .page-tools .tg-names-band :focus-visible { outline-color: var(--tg-orchid); }
.tg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tg-wrap { width: min(calc(100% - 2 * var(--tg-gutter)), 80rem); margin-inline: auto; }

/* Type: resets use :where() so they never out-rank a component class */
.page-tools :where(h1, h2, h3, p) { margin: 0; }
.page-tools :where(h1, h2, h3) { font-family: var(--tg-head); font-weight: 500; line-height: 1.08; color: var(--tg-ink); text-wrap: balance; }
body.page-tools h1 { font-size: var(--tg-step-4); }
body.page-tools h2 { font-size: var(--tg-step-3); }
body.page-tools h3 { font-size: var(--tg-step-1); }
.page-tools em { font-style: italic; padding-inline-end: .08em; color: var(--tg-v700); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .page-tools em {
    background: linear-gradient(90deg, var(--tg-v800), var(--tg-v600));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  }
  .page-tools .tg-hero em, .page-tools .tg-closing em, .page-tools .tg-pro-card em {
    background-image: linear-gradient(90deg, var(--tg-v100), var(--tg-orchid));
  }
}
.tg-kicker { margin: 0 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tg-v700); }

/* Buttons */
.tg-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tg-tap);
  padding: .75rem 1.4rem; border: 1px solid transparent; border-radius: var(--tg-r-sm);
  font: 600 1rem/1.2 var(--tg-body); text-align: center; text-decoration: none; cursor: pointer;
}
.tg-button-primary { background: linear-gradient(135deg, var(--tg-v800), var(--tg-v700) 60%, #6D28D9); color: #fff; box-shadow: 0 10px 28px rgba(91, 33, 182, .25); }
.tg-button-light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); color: #fff; }
.tg-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.tg-actions .tg-button { flex: 1 1 100%; }

/* Hero and closing (shared dark image sections) */
.tg-hero, .tg-closing { position: relative; isolation: isolate; overflow: hidden; background: var(--tg-v950); color: #fff; }
.tg-hero { padding-block: clamp(3.5rem, 10vw, 7rem); }
.tg-closing { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.tg-hero-image, .tg-closing-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tg-hero::before, .tg-closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 10, 46, .86), rgba(42, 15, 92, .9)); }
.tg-hero-inner > *, .tg-closing-inner > * { max-width: 42rem; }
.page-tools .tg-hero h1, .page-tools .tg-closing h2, .page-tools .tg-pro-card h2 { color: #fff; }
.page-tools .tg-hero .tg-kicker, .page-tools .tg-closing .tg-kicker, .page-tools .tg-pro-card .tg-kicker { color: var(--tg-v200); }
.tg-lead { margin-top: 1.25rem; font-size: var(--tg-step-0); color: rgba(255, 255, 255, .9); }
.tg-closing p:not(.tg-kicker) { margin-top: 1rem; font-size: var(--tg-step-0); color: rgba(255, 255, 255, .9); }
.tg-hairline { display: block; width: 4.5rem; height: 1px; margin: 1.75rem 0; background: var(--tg-gold); }
.tg-closing .tg-actions { margin-top: 1.75rem; }
.tg-facets { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tg-facet { position: absolute; width: clamp(3rem, 9vw, 7rem); fill: none; stroke: rgba(221, 214, 254, .4); stroke-width: 1.2; transform: rotate(var(--r, 0deg)); }
.tg-facet-1 { --r: 12deg; top: 6%; right: 6%; }
.tg-facet-2 { --r: -14deg; top: 58%; right: 20%; width: clamp(2.25rem, 6vw, 4.5rem); }
.tg-facet-3, .tg-facet-4, .tg-facet-5 { display: none; }

/* Tool navigation chips */
.tg-chips-wrap { background: #fff; border-bottom: 1px solid var(--tg-line); }
.tg-chips { display: flex; gap: .5rem; margin: 0 -.5rem; padding: .75rem .5rem; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.tg-chips li { flex: none; }
.tg-chip {
  display: inline-flex; align-items: center; min-height: var(--tg-tap); padding: .5rem 1rem; border: 1px solid var(--tg-line);
  border-radius: 999px; background: var(--tg-v50); color: var(--tg-v800); font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}

/* Progress */
.tg-progress { background: #fff; border-bottom: 1px solid var(--tg-line); }
.tg-progress-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-block: 1.25rem; }
.tg-ring {
  --progress-angle: 0deg; position: relative; flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: conic-gradient(var(--tg-v600) var(--progress-angle), var(--tg-v100) 0); font-size: .875rem; font-weight: 700; color: var(--tg-v800);
}
.tg-ring::before { content: ""; position: absolute; inset: .3rem; border-radius: 50%; background: #fff; }
.tg-ring span { position: relative; }
.tg-progress-copy { min-width: 0; flex: 1 1 12rem; }
.tg-progress-title { font-weight: 700; color: var(--tg-ink); }
.tg-progress-copy p:last-child { font-size: .9375rem; color: var(--tg-muted); }
.tg-progress-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.tg-progress-cta p { font-weight: 600; color: var(--tg-ink); }

/* Tools */
.tg-tools { padding-block: clamp(3rem, 7vw, 6rem); }
.tg-heading { max-width: 42rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.tg-heading p:last-child { margin-top: .75rem; color: var(--tg-muted); }
.tg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.tg-tool {
  min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.25rem, 3vw, 1.75rem); scroll-margin-top: 6rem;
  background: #fff; border: 1px solid var(--tg-line); border-radius: var(--tg-r-md); box-shadow: var(--tg-shadow-sm);
}
.tg-tool-head { display: flex; align-items: center; gap: .75rem; }
.tg-icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .9rem; background: var(--tg-v50); color: var(--tg-v700); }
.tg-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tg-tool-intro { color: var(--tg-muted); }
.tg-form { display: grid; gap: .5rem; }
.tg-question { display: grid; gap: .5rem; margin-bottom: .25rem; }
.tg-form label { font-size: .9375rem; font-weight: 600; color: var(--tg-ink); }
.tg-form label:not(:first-child) { margin-top: .5rem; }
.tg-form select, .tg-form input {
  width: 100%; min-width: 0; min-height: 3rem; padding: .7rem .9rem; border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm);
  background-color: #fff; color: var(--tg-ink); font: inherit; font-size: 1rem; line-height: 1.3;
}
.tg-form select {
  appearance: none; padding-inline-end: 2.5rem; background-repeat: no-repeat; background-position: right .9rem center; background-size: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B21B6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.tg-form .tg-button { width: 100%; margin-top: .5rem; }
.tg-note { font-size: .875rem; color: var(--tg-muted); }
.tg-static-note { margin-top: .25rem; }
.tg-quiz-progress { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--tg-muted); }
.tg-track { flex: 1; display: block; height: .5rem; border-radius: 999px; background: var(--tg-v100); overflow: hidden; }
.tg-fill { display: block; height: 100%; background: var(--tg-v600); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.tg-noscript { font-size: .875rem; color: var(--tg-muted); }

/* Results */
.tg-result { display: none; padding: 1.1rem 1.25rem; border: 1px solid var(--tg-v200); border-radius: var(--tg-r-sm); background: linear-gradient(160deg, var(--tg-v50), #fff); }
.tg-result.show { display: block; }
.tg-result[data-state="notice"] { border-style: dashed; }
.tg-result > * + * { margin-top: .75rem; }
.tg-result-title { font-family: var(--tg-head); font-size: var(--tg-step-1); font-weight: 600; line-height: 1.2; color: var(--tg-ink); }
.tg-result-label { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-muted); }
.tg-stones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tg-pill { padding: .4rem .85rem; border: 1px solid var(--tg-v200); border-radius: 999px; background: #fff; color: var(--tg-v800); font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.tg-lucky-number { display: flex; align-items: baseline; gap: .75rem; }
.tg-lucky-number span { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-muted); }
.tg-lucky-number strong { font-family: var(--tg-head); font-size: var(--tg-step-3); font-weight: 600; line-height: 1; color: var(--tg-v700); }
.tg-result .tg-result-cta { width: 100%; margin-top: 1rem; }
.tg-colour-head { display: flex; align-items: center; gap: .75rem; }
.tg-orb {
  --orb: var(--tg-v600); flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 38%), var(--orb);
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .18), 0 6px 16px rgba(21, 10, 46, .18);
}
.tg-orb[data-colour="Blue"] { --orb: #2F5BD8; }
.tg-orb[data-colour="Yellow"] { --orb: #E9B517; }
.tg-orb[data-colour="Pink"] { --orb: #EC5FA3; }
.tg-orb[data-colour="Red"] { --orb: #C81E3A; }
.tg-orb[data-colour="Green"] { --orb: #0E9F6E; }
.tg-orb[data-colour="White"] { --orb: #E9E4F4; }
.tg-orb[data-colour="Orange"] { --orb: #EE8123; }
.tg-orb[data-colour="Purple"] { --orb: #7C3AED; }
.tg-orb[data-colour="Black"] { --orb: #221C33; }

/* Names band */
.tg-names-band { padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--tg-v950); color: #fff; text-align: center; }
.tg-names-title { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tg-v200); }
.tg-names { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-family: var(--tg-head); font-size: var(--tg-step-1); }
.tg-names li + li::before { content: "\00B7"; content: "\00B7" / ""; margin-inline-end: 1.25rem; color: var(--tg-gold); }

/* About */
.tg-honesty { padding-block: clamp(3rem, 7vw, 6rem); background: #fff; }
.tg-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.tg-point { min-width: 0; padding: 1.5rem; border: 1px solid var(--tg-line); border-radius: var(--tg-r-md); background: var(--tg-bg); }
.tg-point::before { content: ""; display: block; width: 2.5rem; height: 1px; margin-bottom: 1rem; background: var(--tg-gold); }
.tg-point p { margin-top: .6rem; color: var(--tg-muted); }

/* Calculator link */
.tg-pro { padding-block: clamp(2.5rem, 6vw, 5rem); }
.tg-pro-card { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--tg-r-lg); background: linear-gradient(160deg, var(--tg-v950), var(--tg-v900) 60%, #4C1D95); color: #fff; box-shadow: var(--tg-shadow-md); }
.tg-pro-card > div { min-width: 0; }
.tg-pro-card p:not(.tg-kicker) { margin-top: .75rem; color: rgba(255, 255, 255, .88); }
.tg-pro-card .tg-button { justify-self: start; }

/* 480 */
@media (min-width: 480px) {
  .tg-actions .tg-button { flex: 0 1 auto; }
  .tg-form .tg-button, .tg-result .tg-result-cta { width: auto; }
  .tg-form .tg-button { justify-self: start; }
}

/* 768 */
@media (min-width: 768px) {
  .tg-hero::before, .tg-closing::before { background: linear-gradient(105deg, rgba(21, 10, 46, .93) 0%, rgba(42, 15, 92, .8) 55%, rgba(76, 29, 149, .5) 100%); }
  .tg-facet-3, .tg-facet-4, .tg-facet-5 { display: block; }
  .tg-facet-1 { top: 10%; right: 8%; }
  .tg-facet-2 { top: 50%; right: 24%; }
  .tg-facet-3 { --r: 8deg; bottom: 8%; right: 7%; width: clamp(3rem, 7vw, 5.5rem); }
  .tg-facet-4 { --r: -6deg; top: 14%; right: 33%; width: clamp(1.75rem, 4vw, 3rem); }
  .tg-facet-5 { --r: 20deg; bottom: 18%; right: 38%; width: clamp(1.75rem, 4vw, 3rem); }
  .tg-chips { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 0; padding-inline: 0; }
  .tg-progress-cta { margin-inline-start: auto; }
  .tg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .tg-tool-match { grid-column: 1 / -1; }
  .tg-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .tg-pro-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
  .tg-pro-card .tg-button { justify-self: end; }
}

/* 1024 */
@media (min-width: 1024px) {
  .tg-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; }
  .tg-tool-birth, .tg-tool-lucky, .tg-tool-match { grid-column: span 2; }
  .tg-tool-quiz, .tg-tool-colour { grid-column: span 3; }
}

/* Hover only where hover exists */
@media (hover: hover) {
  .tg-button { transition: transform .35s var(--tg-ease), box-shadow .35s var(--tg-ease), background-color .2s; }
  .tg-button:hover { transform: translateY(-2px); }
  .tg-button-primary:hover { box-shadow: 0 16px 36px rgba(91, 33, 182, .35); }
  .tg-button-light:hover { background: rgba(255, 255, 255, .22); }
  .tg-chip { transition: background-color .2s, border-color .2s; }
  .tg-chip:hover { background: var(--tg-v100); border-color: var(--tg-v200); }
  .tg-tool { transition: transform .5s var(--tg-ease), box-shadow .5s var(--tg-ease); }
  .tg-tool:hover { transform: translateY(-3px); box-shadow: var(--tg-shadow-md); }
}

/* Motion: only transform and opacity, and only when the visitor has not asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tgRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes tgFloat { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-12px) rotate(var(--r, 0deg)); } }
  .tg-result.show { animation: tgRise .45s var(--tg-ease) both; }
  .tg-fill { transition: transform .4s var(--tg-ease); }
  .tg-facet { animation: tgFloat 9s ease-in-out infinite; }
  .tg-facet-2 { animation-duration: 11s; animation-delay: -3s; }
  .tg-facet-3 { animation-duration: 13s; animation-delay: -6s; }
  .tg-facet-4 { animation-duration: 10s; animation-delay: -2s; }
  .tg-facet-5 { animation-duration: 12s; animation-delay: -8s; }
  body.tg-reveal-ready .tg-tool { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--tg-ease), transform .6s var(--tg-ease); }
  body.tg-reveal-ready .tg-tool.is-in { opacity: 1; transform: none; }
}