/* ═══════════════════════════════════════
   WOBAZI — Type and button system, for every page (loaded last by views/partials/head.ejs and
   app/index.html, so it wins). Bump ?v= in both on every change.

   One scale, six roles, told apart by size, weight and ink rather than by colour:
     page     the one heading of a page           --t-page, 700, ink 1
     section  a section or card heading           --t-section, 700, ink 1
     title    a named thing inside a section      --t-title, 600, ink 1
     body     sentences                           --t-body, 400, ink 2
     caption  notes, dates, secondary facts       --t-small, 400, ink 3
     label    a small tag above a value           --t-label, 600, caps and tracking, ink 3
   Gold is for buttons and selected states, not for headings. Thai and Chinese have no capitals,
   so labels drop the tracking there.

   Buttons fit their text and never span the whole row. Rows in a list (menu links, accordions,
   date cells, answer choices) are not buttons in this sense and stay full width.

   Spacing: every card uses --pad-card on both sides, so text lines up from card to card, and a
   scrollbar never takes width from one side only.
═══════════════════════════════════════ */

:root {
  --t-page: clamp(28px, 6vw, 40px);
  --t-section: 21px;
  --t-title: 17px;
  --t-body: 15px;
  --t-small: 13px;
  --t-label: 11px;
  --t-track: 0.12em;
  --auth-max: 300px;
  --pad-card: 16px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
}
@media (min-width: 768px) { :root { --pad-card: 20px; } }
html[data-lang="th"], html[data-lang="zh"] { --t-track: 0.02em; }

/* ── page ── */
.seo-main h1, .legal-hero h1, .notfound-main h1, .pr-hero h1, .rel-invite-title, .rel-archetype-name, .path-page-title {
  font-size: var(--t-page); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text);
}

/* The content pages set these on the elements themselves, so only !important reaches them. */
.seo-main .about-hero h1, .seo-main h1 { font-size: var(--t-page) !important; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text) !important; }

/* ── section ── */
.seo-main .about-section h2, .seo-main h2 { font-size: var(--t-section) !important; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--text) !important; }
.seo-main h2, .legal-body h2, .pr-compare h2, .pr-redeem h2, .section-head h3, .section-head > span:first-child, .path-head {
  font-size: var(--t-section); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--text);
}
.feat-copy h2, .splash-bazi h2, .splash-faq h2 { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.section-head { align-items: center; flex-wrap: wrap; gap: 2px 10px; margin-bottom: 18px; } /* section titles get air below; .section's own margin gives the room above */
.path-head { margin-bottom: 14px; }

/* ── title ── */
.seo-main .about-section h3, .seo-main h3 { font-size: var(--t-title) !important; font-weight: 600; line-height: 1.3; color: var(--text) !important; }
.seo-main h3, .legal-body h3, .pr-card-name, .forecast-label, .path-month strong, .path-pillar-text strong {
  font-size: var(--t-title); font-weight: 600; line-height: 1.3; color: var(--text);
}
.path-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.path-lens-name { font-size: 16px; }

.soul-name { font-size: var(--t-title); font-weight: 600; line-height: 1.3; }
.soul-note { font-size: 14px; line-height: 1.5; color: var(--m8); }
.path-card .soul-tag { display: none; } /* the card's heading already says it */

/* ── body ── */
.seo-main:not(.pr):not(.notfound-main) > * p, .legal-body p, .legal-body li, .path-text, .path-month span:last-child,
.daily-msg, .you-hero-reading, .yy-summary, .birthplace-interact, .noble-animals, .noble-extra {
  font-size: var(--t-body); font-weight: 400; line-height: 1.6; color: var(--m8);
}

/* ── caption ── */
.section-sub, .path-note, .chart-basis, .pd-custom-note, .love-sublabel, .forecast-sublabel, .rel-profile-sub,
.daily-power-next, .cal-picks-sub, .decade-note-text {
  font-size: var(--t-small); font-weight: 400; line-height: 1.45; color: var(--m6); letter-spacing: 0;
}

/* ── label ── */
.path-eyebrow, .path-kv-label, .path-stat-label, .path-month-name, .path-pillar-label, .hc-today-lbl, .daily-kicker, .daily-score-label,
.aspect-name, .forecast-score-pct, .pick-dow, .cd-dow, .cd-mon, .outfit-month-label, .forecast-year-badge {
  font-size: var(--t-label); font-weight: 600; line-height: 1.3; letter-spacing: var(--t-track); text-transform: uppercase; color: var(--m6);
}

/* Nothing that has to be read goes below 11px. */
.compat-chip-years, .love-soul-year, .soul-years, .outfit-avoid, .crystal-carry-badge, .pillar-stem-name, .luck-years { font-size: 11px; }

/* ── Buttons fit their text ── */
.btn-primary.btn-full, .btn-secondary.btn-full, .celeb-confirm .btn-full, .rel-incoming-card .btn-primary.btn-full {
  display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; justify-content: center; text-align: center;
}
html .pr-btn, .tap-actions-link, .drawer-cta, .uname-gate .rel-link-btn {
  display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; justify-content: center;
}
.splash-new-btn { width: auto; }
.tip-close { width: fit-content; max-width: calc(100% - 48px); margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }

/* ── Today: neutral cards, so the day's score and Do / Avoid / Watch carry the colour ── */
.hero-compact { background: var(--bg-card); }
.hero-compact .hero-bg, .daily-fortune-bg { display: none; }
.daily-fortune-card { background: var(--bg-card); border: 0; }
.hc-inner { padding: 20px; }
.hc-left { gap: 12px; }
.hc-profile-chip:empty { display: none; }
.hc-msg { font-size: 16px; line-height: 1.5; color: var(--text); }

.hc-bullets, #actions-preview-list { display: grid; gap: 10px; margin-top: 4px; }
.hc-bullet {
  flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px;
  border-radius: var(--radius-sm); font-size: var(--t-body); line-height: 1.55; color: var(--m8);
  --tone: #4ade80; --tone-ink: #4ade80;
  background: color-mix(in srgb, var(--tone) 8%, transparent);
}
.hc-bullet-key {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 20%, transparent); color: var(--tone-ink);
  font-size: 13px; font-weight: 800; letter-spacing: var(--t-track); line-height: 1.3;
}
.hc-bullet-key::before { font-size: 12px; font-weight: 800; }
.hc-bullet:nth-last-child(3) .hc-bullet-key::before { content: '✓'; }
.hc-bullet:nth-last-child(2) { --tone: #f87171; --tone-ink: #fca5a5; }
.hc-bullet:nth-last-child(2) .hc-bullet-key::before { content: '✕'; }
.hc-bullet:nth-last-child(1) { --tone: #f59e0b; --tone-ink: #fcd34d; }
.hc-bullet:nth-last-child(1) .hc-bullet-key::before { content: '◉'; }
body.light-mode .hc-bullet { --tone: #15803d; --tone-ink: #15803d; }
body.light-mode .hc-bullet:nth-last-child(2) { --tone: #b91c1c; --tone-ink: #b91c1c; }
body.light-mode .hc-bullet:nth-last-child(1) { --tone: #b45309; --tone-ink: #b45309; }
.hc-bullet-note { grid-column: 1 / -1; padding: 0; background: none; }
@media (min-width: 720px) {
  .hc-bullets, #actions-preview-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Top 3 Actions on the full site's Today: the same three blocks as the Action Plan. */
.actions-preview-top { margin-bottom: 12px; }
#actions-preview-list + .tap-actions-link { margin-top: 16px; }

/* ── A card whose job is one action: centred, on a soft gold wash ── */
.path-next, .rel-card.rel-empty {
  text-align: center; border: 0;
  background: radial-gradient(120% 150% at 50% 0%, var(--gold-dim), transparent 72%), var(--bg-card);
}
.path-next { padding-top: 22px; padding-bottom: 22px; }
.path-next .path-eyebrow { justify-content: center; margin-bottom: 12px; }

/* ── Even sides: one inner padding for every card ── */
.hc-inner { padding: var(--pad-card); }
.path-card, .career-card, .kua-card, .lucky-num-card, .power-days-card, .rel-card, .rel-profile-wrap, .yinyang-card, .insight-card,
.ritual-step, .soul-card, .crystal-card, .food-power-card, .love-soul-card, .hc-bullet, .daily-top, .daily-msg,
.forecast-top, .forecast-aspects, .forecast-sparkline, .forecast-insight, .love-top, .love-desc, .love-matches {
  padding-left: var(--pad-card); padding-right: var(--pad-card);
}
.path-card .soul-card { padding-left: 0; padding-right: 0; }
.daily-bar-track, .daily-power, .love-archetype { margin-left: var(--pad-card); margin-right: var(--pad-card); }
.love-months-strip { padding-left: var(--pad-card); padding-right: var(--pad-card); }
.daily-score-wrap { text-align: right; }
.daily-score-label { margin-right: calc(var(--t-track) * -1); }

/* A scrollbar must not take width from one side only. The app's scrolling area hides its own, so
   the header and the cards share the same edges; plain pages reserve the same room on both sides. */
.scroll-body { scrollbar-width: none; }
.scroll-body::-webkit-scrollbar { display: none; }
html:not(:has(#results)) { scrollbar-gutter: stable both-edges; }

/* ── No long lines: on wide screens a stack of sentences becomes columns, and body copy stops at
   a readable width. Phones keep one column. ── */
.daily-msg, .love-desc, .hc-msg, .you-hero-reading, .yy-summary, .forecast-insight, .love-matches > p, .birthplace-interact, .cal-note, .path-text, .path-note, .noble-lead, .noble-qm, .ritual-step-text { max-width: 64ch; }
@media (min-width: 768px) {
  .insight-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .insight-cards > * { margin: 0; }
  .crystals-card, .love-soul-cards, .ritual-card, .soul-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .crystals-card > *, .love-soul-cards > *, .ritual-card > *, .soul-grid > * { margin: 0; min-width: 0; }
  .path-under-4, .path-under-3, .path-gods, .path-chips { display: grid; column-gap: 28px; }
  .path-under-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .path-under-3, .path-gods, .path-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .path-under .path-lens-row { padding: 12px 0 0; border-top: 0; }
  .path-under { border-top: 1px solid var(--border); }
  .path-card > .path-under:first-child { border-top: 0; }
  .path-card > .path-under:first-child .path-lens-row { padding-top: 0; }
  .path-fs-stars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Gentler corners. The --radius-* tokens above cover most cards; these set their own numbers.
   Pills and circles stay round. ── */
.gyro-stat, .feat-card, .splash-bazi, .splash-faq, .drawer-card, .ma-intro, .ma-why, .ma-chart-wrap, .ma-house, .ma-cta,
.seo-main .about-section, .legal-body { border-radius: var(--radius-lg); }
.share-oracle-box, .love-month-tile, .love-soul-card, .oracle-msg, .oracle-typing, .oracle-error-msg, .oracle-input, .bazi-mean, .drawer-list,
.city-suggest, .now-overlay, .viral-preview, .acc-card, .sl-card img, .seo-main .about-callout, .rel-share-story img,
.rel-share-story .skel-story, .rel-type-seg { border-radius: var(--radius-md); }
.share-fortune-cell, .viral-caption, .cd-cell, .pd-select, .pick-col, .cd-date, .sk-pick-btn, .share-kit-toast,
.rel-work-item, .rel-fun-tile, .set-group { border-radius: var(--radius-sm); }
.tip-sheet, .viral-sheet, #portal .shelf-sheet, .gyro-stat::before { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.bazi-callout { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ── Power Season: five seasons on one row. Narrow screens scroll sideways, bar and all. ── */
.season-bar, .season-body { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.season-vibe { font-size: 12px; }
.season-name { font-size: 11px; }
@media (max-width: 639px) {
  .season-card { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .season-card::-webkit-scrollbar { display: none; }
  .season-bar, .season-body { width: 580px; }
}

/* ── No coloured bars on the left edge of cards. Some are set in the markup, hence !important. ── */
.love-soul-card, .today-actions-card, .outfit-el-tip, .food-power-card, .crystal-card, .ritual-step, .about-rs-step, .rel-friction-card, .rel-profile-wrap {
  border-left-width: 1px !important; border-left-color: var(--border) !important;
}
.orc-callout, .orc-month-now, .cal-clash-note, .about-callout, .bazi-callout, .rel-watch, .legal-note, .ma-quote { border-left: 0 !important; }
.cal-clash-note, .about-callout, .bazi-callout, .about-rs-step { border-radius: var(--radius-sm); }
.legal-note, .ma-quote { padding-left: 0; }

/* ── Power Days: pick a subject or write your own ── */
.pd-choose { display: flex; flex-direction: column; gap: 10px; }
.pd-choose .pd-ask { flex-direction: column; align-items: stretch; gap: 8px; }
.pd-choose .pd-select-wrap { flex: none; max-width: none; }
.pd-choose .pd-custom { margin-top: 0; }
.pd-or { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: var(--t-track); text-transform: uppercase; color: var(--m5); }
.pd-or::before, .pd-or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
@media (min-width: 768px) {
  .pd-choose { flex-direction: row; align-items: flex-start; gap: 14px; }
  .pd-choose .pd-ask { flex: none; width: 240px; gap: 6px; }
  .pd-or { flex: none; min-height: 44px; margin-top: 22px; }
  .pd-or::before, .pd-or::after { display: none; }
  .pd-choose .pd-custom { flex: 1; min-width: 0; margin-top: 22px; }
}

/* The picks are the answer: a heading with room above, separated from the controls. */
.cal-picks { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.cal-picks-sub { font-size: var(--t-title); font-weight: 600; line-height: 1.35; color: var(--text); margin-bottom: 4px; }

/* ── Desktop tab row: the Oracle sits at the far right, in its own moving colours. (The phone's
   bottom nav keeps it in the centre as the orb.) ── */
.tab-bar-inner #tab-btn-you { order: 1; }
.tab-bar-inner #tab-btn-today { order: 2; }
.tab-bar-inner #tab-btn-actions { order: 3; }
.tab-bar-inner #tab-btn-relationships { order: 4; }
.tab-bar-inner #tab-btn-oracle { order: 5; }
#tab-btn-oracle {
  background: linear-gradient(90deg, #7c3aed, #db2777, #2563eb, #7c3aed) 0 0 / 300% 100%;
  color: #fff; font-weight: 700; box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
  animation: wzOracleFlow 6s linear infinite;
}
#tab-btn-oracle:hover { color: #fff; filter: brightness(1.08); }
#tab-btn-oracle.active { color: #fff; box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(168, 85, 247, 0.5); }
@keyframes wzOracleFlow { to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { #tab-btn-oracle { animation: none; } }