/* Birth chart reader (sections/claude-birth-chart.liquid). Every rule is scoped to .ahc.
   Sizes are in px because the theme sets 1rem = 10px. Fonts and buttons come from the theme. */
.ahc {
  --ahc-ink: rgb(var(--color-foreground, 37, 37, 37));
  --ahc-text: rgba(var(--color-foreground, 37, 37, 37), 0.8);
  --ahc-muted: rgba(var(--color-foreground, 37, 37, 37), 0.62);
  --ahc-line: rgba(var(--color-foreground, 37, 37, 37), 0.14);
  --ahc-card: rgba(255, 255, 255, 0.45);
  --ahc-field: rgba(255, 255, 255, 0.7);
  --ahc-accent: #531A1C;
  display: grid; gap: 64px; color: var(--ahc-text);
}
.ahc[hidden], .ahc [hidden] { display: none !important }
.ahc-after { display: grid; gap: 64px }
.ahc h1, .ahc h2, .ahc h3 { color: var(--ahc-ink); margin: 0; line-height: 1.2; text-wrap: balance }
.ahc .ahc-title { font-size: clamp(32px, 4.6vw, 44px) }
.ahc .ahc-title em { color: var(--ahc-accent) }
.ahc h2 { font-size: clamp(24px, 2.8vw, 30px) }
.ahc h3 { font-size: 21px }
.ahc p { margin: 0 }
.ahc a { color: inherit }
.ahc-eyebrow { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ahc-muted) }
.ahc-tier { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ahc-accent) }
.ahc-lede { color: var(--ahc-muted); max-width: 46ch }
.ahc-hint { font-size: 13px; color: var(--ahc-muted); line-height: 1.5 }
.ahc-hint:empty { display: none }
.ahc-stack { display: grid; gap: 8px }
.ahc-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }

/* Form + wheel */
/* One centred column: the form, then (after Reveal) the turning wheel and the results below it. */
.ahc-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; width: 100%; max-width: 640px; justify-self: center }
.ahc-hero-copy { display: grid; gap: 22px }
.ahc-birth, .ahc-mini-form { display: grid; gap: 14px }
.ahc-birth { background: var(--ahc-card); border: 1px solid var(--ahc-line); padding: 24px; border-radius: 12px }
.ahc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.ahc label { display: grid; gap: 5px; font-size: 13px; color: var(--ahc-muted); letter-spacing: 0.4px }
.ahc input, .ahc select { font: inherit; font-size: 16px; color: var(--ahc-ink); background: var(--ahc-field); border: 1px solid var(--ahc-line);
  border-radius: 7px; padding: 10px 12px; width: 100%; min-width: 0; min-height: 44px; box-shadow: none }
.ahc input:focus-visible, .ahc select:focus-visible, .ahc button:focus-visible, .ahc a:focus-visible { outline: 2px solid var(--ahc-accent); outline-offset: 2px }
.ahc input:disabled { opacity: 0.5 }
.ahc label.ahc-check { display: flex; align-items: center; gap: 8px; color: var(--ahc-ink); font-size: 14px }
.ahc-check input { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none }
.ahc .button { margin: 0 }
.ahc .button:disabled { opacity: 0.5; cursor: progress }
/* Birth date as day / month / year lists */
.ahc-row-date { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) }
.ahc-date { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 6px }
.ahc-date select { padding-left: 8px; padding-right: 4px }
/* Birthplace suggestions */
.ahc-combo { position: relative; display: block }
.ahc-sugg { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid var(--ahc-line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); max-height: 320px; overflow-y: auto }
.ahc-sugg li { display: grid; gap: 1px; padding: 9px 10px; border-radius: 6px; cursor: pointer; color: var(--ahc-ink); font-size: 15px; letter-spacing: 0; line-height: 1.3 }
.ahc-sugg li span { font-size: 12px; color: var(--ahc-muted) }
.ahc-sugg li b { font-weight: 600 }
.ahc-sugg li[aria-selected="true"], .ahc-sugg li[data-i]:hover { background: rgba(83, 26, 28, 0.08) }
.ahc-sugg .ahc-sugg-none { cursor: default; font-size: 13px; color: var(--ahc-muted) }
.ahc-credit { font-size: 11px }
.ahc-wheel-card { display: grid; gap: 10px; justify-items: center }
.ahc-wheel-card svg { width: 100%; max-width: 540px; height: auto }
.ahc-wheel-cap { font-size: 13px; color: var(--ahc-muted); text-align: center }
.ahc-result > .ahc-wheel-card svg { max-width: 560px }

/* Result */
.ahc-result { display: grid; gap: 32px; scroll-margin-top: 90px }
.ahc-result-head { display: grid; gap: 10px; border-top: 1px solid var(--ahc-line); padding-top: 28px }
.ahc-notices { display: grid; gap: 8px }
.ahc-notice { border-left: 3px solid var(--ahc-accent); padding: 10px 14px; font-size: 14px; background: var(--ahc-card); border-radius: 0 7px 7px 0 }
.ahc-big3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.ahc-b3 { background: var(--ahc-card); padding: 20px; display: grid; gap: 4px; align-content: start; border: 1px solid var(--ahc-line); border-radius: 12px }
.ahc-b3 img { width: 44px; height: 44px; mix-blend-mode: multiply }
.ahc-b3 .ahc-sign { font-family: var(--font-heading-family, serif); font-size: 26px; color: var(--ahc-ink) }
.ahc-b3 .ahc-deg { font-size: 12px; color: var(--ahc-muted) }
.ahc-b3 .ahc-note { font-size: 13px; color: var(--ahc-muted); line-height: 1.45 }

.ahc-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start }
.ahc-reading { display: grid; gap: 22px; max-width: 66ch }
.ahc-reading .ahc-headline { font-family: var(--font-heading-family, serif); font-style: italic; color: var(--ahc-accent); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.3 }
.ahc-reading section { display: grid; gap: 8px }
.ahc-reading p + p { margin-top: 6px }
.ahc-thinking { font-style: italic; font-size: 14px; color: var(--ahc-muted) }
/* Email gate under the free part of a reading */
.ahc-gate { display: grid; gap: 12px; background: var(--ahc-card); border: 1px solid var(--ahc-line); border-top: 3px solid var(--ahc-accent);
  border-radius: 12px; padding: 22px; max-width: 560px }
.ahc-gate p { color: var(--ahc-text) }
.ahc label.ahc-consent { align-items: flex-start; font-size: 13px; line-height: 1.45 }
.ahc-consent input { margin-top: 1px }
.ahc-side { display: grid; gap: 24px }
.ahc-scroll { overflow-x: auto }
.ahc-place { width: 100%; border-collapse: collapse; font-size: 14px; border: 0 }
.ahc-place th { text-align: left; font-weight: 400; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ahc-muted); padding: 6px 4px; border: 0; border-bottom: 1px solid var(--ahc-line) }
.ahc-place td { padding: 8px 4px; border: 0; border-bottom: 1px solid var(--ahc-line); font-variant-numeric: tabular-nums; color: var(--ahc-ink); vertical-align: top; text-align: left }
.ahc-place td.g { color: var(--ahc-accent); width: 1.6em; font-size: 17px }
.ahc-place td.m { font-size: 13px; white-space: nowrap }
.ahc-place .sub { display: block; font-size: 12px; color: var(--ahc-muted); line-height: 1.35; margin-top: 1px }
.ahc-pairs { list-style: none; margin: 0; padding: 0; display: grid; font-size: 14px }
.ahc-pairs li { padding: 7px 0; border-bottom: 1px solid var(--ahc-line) }
.ahc-pairs b { color: var(--ahc-ink) }

/* Print */
.ahc-print { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center;
  background: var(--ahc-card); border: 1px solid var(--ahc-line); padding: clamp(18px, 4vw, 44px); border-radius: 12px; scroll-margin-top: 90px }
.ahc-poster { display: grid; justify-items: center; gap: 8px }
.ahc-poster img, .ahc-pair-print img { width: 100%; height: auto; display: block; border-radius: 2px }
.ahc-poster img { max-width: 420px }
.ahc-print-copy { display: grid; gap: 18px }
.ahc-why { font-style: italic; color: var(--ahc-muted) }
.ahc-swatches { display: flex; gap: 10px; flex-wrap: wrap }
.ahc-sw { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; outline: 1px solid var(--ahc-line); cursor: pointer; padding: 0 }
.ahc-sw[aria-pressed="true"] { outline: 2px solid var(--ahc-ink); outline-offset: 2px }
.ahc-sw.best::after { content: "★"; position: absolute; top: -6px; right: -6px; font-size: 11px; line-height: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--ahc-accent); color: #fff }
.ahc-made { display: grid; border-top: 1px solid var(--ahc-line); margin: 0; padding: 0; list-style: none }
.ahc-made li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--ahc-line); font-size: 14px }
.ahc-made li span:first-child { color: var(--ahc-muted) }
.ahc-made li span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere }
.ahc-price { font-family: var(--font-heading-family, serif); font-size: 23px; color: var(--ahc-ink) }

/* Pair */
.ahc-pair { display: grid; gap: 28px; border-top: 1px solid var(--ahc-line); padding-top: 28px; scroll-margin-top: 90px }
.ahc-pair-head { display: grid; gap: 10px; max-width: 62ch }
.ahc-pair-panel { display: grid; gap: 22px }
.ahc-pair-panel > .ahc-result-head { border-top: 0; padding-top: 0 }
.ahc-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--ahc-card); border: 1px solid var(--ahc-line); border-radius: 99px; justify-self: start; flex-wrap: wrap }
.ahc-seg button { font: inherit; letter-spacing: 0.6px; border: 0; background: transparent; color: var(--ahc-ink); padding: 7px 18px; border-radius: 99px; cursor: pointer; min-height: 36px }
.ahc-seg button[aria-checked="true"] { background: var(--ahc-accent); color: #fff }
.ahc-pair-card { background: var(--ahc-card); border: 1px solid var(--ahc-line); border-radius: 12px; padding: 22px; display: grid; gap: 14px; max-width: 560px }
.ahc-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px }
.ahc-duo-col { background: var(--ahc-card); border: 1px solid var(--ahc-line); border-radius: 12px; padding: 18px; display: grid; gap: 8px; justify-items: center; text-align: center }
.ahc-duo-col svg { width: 100%; max-width: 220px; height: auto }
.ahc-duo-col p { font-size: 14px }
.ahc-pair-print { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 36px; align-items: center;
  background: var(--ahc-card); border: 1px solid var(--ahc-line); border-radius: 12px; padding: clamp(18px, 3vw, 32px) }

/* Share */
.ahc-share { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center }
.ahc-story svg { width: 210px; height: auto; border-radius: 10px; display: block; border: 1px solid var(--ahc-line) }
.ahc-share-copy { display: grid; gap: 14px }
.ahc-story { display: grid; gap: 12px; justify-items: center; max-width: 320px }
.ahc-share-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center }
.ahc .ahc-sbtn { font: inherit; font-size: 13px; letter-spacing: 0.3px; line-height: 1; display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px;
  border-radius: 99px; border: 1px solid var(--ahc-line); background: var(--ahc-field); color: var(--ahc-ink); text-decoration: none; cursor: pointer }
.ahc .ahc-sbtn:hover { border-color: var(--ahc-ink) }
.ahc .ahc-sbtn-whatsapp { flex-basis: 100%; justify-content: center; min-height: 44px; font-size: 15px; background: #1F8A4C; border-color: #1F8A4C; color: #fff }
.ahc .ahc-sbtn-whatsapp:hover { background: #18703D; border-color: #18703D }
.ahc-sharepage { display: grid; gap: 12px; background: var(--ahc-card); border: 1px solid var(--ahc-line); border-radius: 12px; padding: 20px; margin-top: 8px }
.ahc-sharepage p { color: var(--ahc-text); font-size: 14px }
.ahc-linkrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px }
.ahc-linkrow input { font-size: 14px }
.ahc-linkbtn { font: inherit; font-size: 13px; background: none; border: 0; padding: 4px 0; color: var(--ahc-muted); text-decoration: underline; cursor: pointer; justify-self: start }

/* Shared chart page (?chart=…) */
.ahc-shared { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 44px; align-items: start;
  border-bottom: 1px solid var(--ahc-line); padding-bottom: 48px }
.ahc-shared-copy { display: grid; gap: 18px }
.ahc-shared .ahc-b3 { padding: 14px }
.ahc-shared .ahc-b3 .ahc-note, .ahc-shared .ahc-b3 .ahc-deg { display: none }

@media (max-width: 860px) {
  .ahc-hero, .ahc-cols, .ahc-print, .ahc-pair-print, .ahc-share, .ahc-shared { grid-template-columns: minmax(0, 1fr) }
  .ahc-shared .ahc-wheel-card svg { max-width: 420px }
  .ahc-shared .ahc-wheel-card { order: -1 }
  .ahc-story { justify-self: center }
}
@media (max-width: 520px) {
  .ahc-row, .ahc-row-date, .ahc-big3 { grid-template-columns: minmax(0, 1fr) }
  .ahc-duo { gap: 10px }
  .ahc-duo-col { padding: 12px 8px }
  .ahc-duo-col h3 { font-size: 18px }
  .ahc-duo-col p { font-size: 12px }
  .ahc-shared .ahc-big3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
  .ahc-shared .ahc-b3 { padding: 10px }
  .ahc-shared .ahc-b3 .ahc-sign { font-size: 19px }
  .ahc-birth { padding: 18px }
}

/* Who it is for (top of the form) */
.ahc-who { display: grid; gap: 8px }
.ahc-who-label { font-size: 13px; color: var(--ahc-muted); letter-spacing: 0.4px }
.ahc-who .ahc-seg { display: flex; justify-self: stretch; border-radius: 22px }
.ahc-who .ahc-seg button { flex: 1 1 auto; padding: 7px 12px }
.ahc-invite button:hover { background: rgba(83, 26, 28, 0.08) }
.ahc .ahc-person-h { font-size: 18px; padding-top: 4px }
.ahc-person2 { display: grid; gap: 14px; border-top: 1px solid var(--ahc-line); padding-top: 16px }

/* Turning wheel while the chart is worked out */
.ahc-loading { display: grid; justify-items: center; gap: 18px; padding: 8px 0 24px; width: 100%; max-width: 640px; justify-self: center }
.ahc-loading svg { width: min(300px, 74vw); height: auto }
.ahc-loading g { transform-box: view-box; transform-origin: 260px 260px }
.ahc-spin { animation: ahc-turn 28s linear infinite }
.ahc-spin-rev { animation: ahc-turn 9s linear infinite reverse }
.ahc-load-msg { font-family: var(--font-heading-family, serif); font-style: italic; font-size: 19px; color: var(--ahc-accent); text-align: center; min-height: 1.4em }
@keyframes ahc-turn { to { transform: rotate(360deg) } }
/* The finished wheel turns into place */
.ahc svg.ahc-reveal { animation: ahc-settle 1.8s cubic-bezier(0.16, 0.8, 0.24, 1) both }
@keyframes ahc-settle { from { opacity: 0; transform: rotate(-70deg) scale(0.92) } to { opacity: 1; transform: none } }
.ahc-result > .ahc-wheel-card, .ahc-duo { animation: ahc-fade 0.6s ease-out both }
@keyframes ahc-fade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
/* Small turning ring next to "Writing your reading…" */
.ahc-thinking { display: flex; align-items: center; gap: 10px }
.ahc-thinking::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px dashed var(--ahc-accent); animation: ahc-turn 4s linear infinite }

/* Shared page for two people */
.ahc-shared.ahc-shared-pair { grid-template-columns: minmax(0, 1fr) }
.ahc-shared-pair .ahc-duo { max-width: 640px }

@media (prefers-reduced-motion: reduce) {
  .ahc-spin, .ahc-spin-rev, .ahc svg.ahc-reveal, .ahc-result > .ahc-wheel-card, .ahc-duo, .ahc-thinking::before { animation: none }
}

/* Email first (8 Nov 2026) */
.ahc-mail { display: grid; gap: 12px; border-top: 1px solid var(--ahc-line); padding-top: 16px }
.ahc-mail-fields { display: grid; gap: 12px }
.ahc-mail .ahc-hint { margin: 0 }
.ahc .ahc-link { background: none; border: 0; padding: 0; min-height: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer }