/* VAAL's mobile library. Loaded after legacy route styles; no global-site tokens. */
:root {
  color-scheme: light;
  --bg: #f4f8fb;
  --surface: #ffffff;
  --soft: #e7f0f7;
  --line: #d5e2ec;
  --text: #182f47;
  --muted: #52677c;
  --gold: #205c91;
  --ink: #182f47;
  --cream: #edf5fb;
  --radius: 16px;
}
body { background: var(--bg); }
body, input, button, select, textarea { letter-spacing: 0; }
h1, h2, h3 { letter-spacing: -.025em; }
input, select, textarea { color-scheme: light; background: var(--surface); color: var(--text); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.detail-copy .lead, .shop-detail .lead { color: var(--text); }
.tag { border-color: #a9c0d2; background: var(--soft); }
.discovery-strip > a:last-child { color: #fff; }
.discovery-strip > a:last-child:after { background: rgba(13,39,60,.78); }
.event-hero:after { background: linear-gradient(90deg,rgba(13,39,60,.94),rgba(13,39,60,.24)); }
.event-hero .tag { color: #fff; background: #19334dcc; border-color: #a9c0d2; }
.catalog-shelves { display: grid; gap: 32px; }
.chips { margin-right: 0; max-width: 100%; padding-right: 2px; }
.catalog-shelf { min-width: 0; }
.catalog-shelf .section-heading { margin-top: 0; }
.catalog-shelf .catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.catalog-shelf .card-copy h3 { min-height: 0; }
.catalog-grid .card-copy { display: flex; flex-direction: column; }
.catalog-grid .card-copy .card-bottom { margin-top: auto; }
.catalog-grid .card-copy p { margin-bottom: 18px; }
.catalog-grid .format-tag { background: #19334deb; padding: 4px 7px; border-radius: 5px; }
.astro-layout ::selection { background: #c9e4fa; color: var(--ink); }
.astro-layout input { caret-color: var(--gold); accent-color: var(--gold); }
.astro-preview-topics span, .aspect-connector { border-color: #a9c0d2; }
.aspect-connector { background: #a9c0d2; }
.reading-contents .text-link:hover { color: #17466f; }
.reading-contents .text-link:focus-visible, .reading-section:focus-visible { outline-color: var(--gold); }
.astro-actions .button:hover { border-color: var(--gold); }
::selection { background: #c9e4fa; color: var(--ink); }
.skip { color: #fff; }
* { scrollbar-color: #9bbbd4 var(--bg); scrollbar-width: thin; }
.sidebar { top: 0; background: var(--surface); padding-top: 36px; }
.sidebar nav a.active { background: var(--soft); color: var(--gold); }
.sidebar-bottom p { color: var(--muted); }
.brand img, .mobile-brand img { background: #18334d; border-radius: 12px; padding: 5px; }
.topbar { background: var(--surface); height: 84px; }
.desktop-greeting small { display: block; margin-top: 4px; }
.balance-pill { border-color: var(--line); background: var(--soft); color: var(--gold); }
.avatar, .profile-avatar { background: var(--soft); color: var(--gold); }
main { padding-top: 32px; }
.welcome { margin-bottom: 26px; }
.welcome h1 { font-size: clamp(28px, 3vw, 40px); font-weight: 650; }
.welcome p { font-size: 14px; }
.hero { min-height: 420px; background: #193d56; color: #fff; }
.hero:after { background: linear-gradient(90deg, rgba(13,39,60,.86), rgba(13,39,60,.14)), linear-gradient(0deg,rgba(13,39,60,.5),transparent 65%); }
.hero h2 { font-weight: 600; }
.hero em { color: #c5e6ff; }
.hero p { color: #f3f8fc; font-size: 14px; }
.hero .primary, .club-band .primary, .event-hero .primary { background: #fff; color: #193f62; }
.hero .primary:hover, .club-band .primary:hover, .event-hero .primary:hover { background: #e7f2fa; }
.photo-caption { color: #eef6fb; }
.feature { background: #dcecf8; }
.feature-logo { filter: brightness(.35); }
.feature .text-link { color: var(--gold); }
.feature p { font-size: 13px; }
.button { border-radius: 12px; min-height: 48px; font-size: 14px; gap: 12px; }
.button.primary { background: var(--gold); color: #fff; }
.button.primary:hover { background: #17466f; }
.hero .button.primary, .club-band .button.primary, .event-hero .button.primary { background: #fff; color: #193f62; }
.button.secondary:hover { background: #dceaf5; }
.round-button { background: var(--surface); border-color: var(--line); }
.quick-paths { gap: 12px; }
.quick-paths a { background: #e3eef6; color: var(--text); padding: 18px; font-size: 13px; }
.quick-paths a:hover { background: #d6e7f3; }
.section-heading { margin-top: 44px; }
.section-heading p, .card-copy p { font-size: 13px; }
.card-copy { padding: 20px; }
.card-copy h3 { font-size: 18px; }
.card-copy > .muted { font-size: 12px; }
.card-bottom strong { font-size: 14px; }
.save-button { color: #fff; background: #19334dd9; }
.save-button.saved { color: #c5e6ff; }
.save-button.saved .icon { fill: #c5e6ff; }
.club-band, .event-hero, .recorded-card, .day-hero { color: #fff; }
.club-band:after { background: linear-gradient(90deg,rgba(15,41,56,.94),rgba(15,41,56,.12)); }
.club-band p { color: #edf5fa; font-size: 14px; }
.recorded-card:after { background: linear-gradient(0deg,#132d45 2%,#132d45db 35%,#132d4500 100%); }
.recorded-card > div > span:last-child { color: #d0e9fc; }
.recorded-card .tag { color: #fff; border-color: #d5e9f5; }
.free-slide, .shop-editorial { background: #deedf8; }
.free-slide .button, .shop-editorial .button { background: var(--gold); color: #fff; }
.shop-editorial > img { background: transparent; }
.search-box, .filter-saved, .chip, .format-option { background: var(--surface); border-color: var(--line); }
.chip.selected, .format-option.selected, .filter-saved.selected { background: var(--soft); color: var(--gold); }
.shop-shelf .section-heading h2 { font-weight: 650; }
.shop-card h2 { font-weight: 600; }
.shop-card p { font-size: 13px; }
.shop-image { background: var(--soft); border-radius: 16px; }
.adult-cover { background: var(--soft); color: var(--text); border-color: var(--line); }
.shop-image .concept-label { background: #19334deb; color: #fff; }
.simple-cta, .notice, .profile-summary, .wallet-card { background: var(--soft); color: var(--text); border-color: var(--line); }
.profile-links a, .useful-links a { background: var(--surface); }
.studio-entry { border-color: var(--line); }
.astro-heading > p, .birth-intro p, .birth-dst, .astro-demo-note, .astro-saved-list article > span { color: var(--muted); }
.astro-input, .astro-empty { background: var(--surface); color: var(--text); }
.astro-empty { background: #deedf8; }
.astro-result { background: var(--surface); color: var(--text); }
.birth-person, .reading-section, .reading-contents, .calculation, .calculation td, .calculation th, .astro-saved-list article, .planet-positions { border-color: var(--line); }
.birth-person input, .birth-person select, #astro-copy-text { background: var(--bg); color: var(--text); border-color: #a9c0d2; color-scheme: light; }
.birth-person input::placeholder { color: var(--muted); }
.birth-person legend > span, .calculation summary, .reading-contents .text-link { color: var(--gold); }
.reading-note, .reading-section .aspect-caption, .astro-result header > p, .chart-people small, .planet-positions dt, .aspect-planets small, .synastry-figure figcaption p { color: var(--muted); }
.planet-picker button { border-color: var(--line); color: var(--text); }
.planet-picker button[aria-pressed=true] { background: var(--gold); color: #fff; border-color: var(--gold); }
.planet-picker button:hover { border-color: var(--gold); }
.synastry-figure .synastry-wheel { background: #19334d; }
.synastry-wheel .chart-centre { fill: #19334d; }
.synastry-wheel .synastry-aspect.is-related, .synastry-wheel .centre-glyph { stroke: #a5d5fa; color: #a5d5fa; }
.synastry-wheel .synastry-point > circle { fill: #a5d5fa; stroke: #19334d; }
.person-swatch { background: #205c91; }
.person-swatch.person-1 { background: #7390aa; outline-color: #7390aa; }
.astro-layout input:focus-visible, .astro-layout select:focus-visible, .astro-layout summary:focus-visible, .planet-picker button:focus-visible { outline-color: var(--gold); }
.astro-actions .button { min-height: 76px; }
.astro-result:focus { outline-color: var(--gold); }
.astro-hero .astro-heading > .astro-demo-note { color: var(--muted); }
.footnote { color: var(--muted); }
#toast { background: #19334d; color: #fff; }
@media(max-width:960px) {
  .bottom-nav { background: #fff; border: 0; border-top: 1px solid var(--line); border-radius: 0; left: 0; right: 0; bottom: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 4px; }
  .bottom-nav a { color: var(--muted); padding: 8px 2px; min-height: 56px; border-radius: 12px; font-weight: 550; }
  .bottom-nav a.active { background: var(--soft); color: var(--gold); }
  .footnote { padding-bottom: 112px; }
}
@media(max-width:800px) {
  .topbar { height: 76px; }
  main { padding: 26px 20px 28px; }
  .hero-grid { grid-template-columns: 1fr; }
  .feature { margin-top: 16px; }
  .catalog-shelf .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:560px) {
  .topbar { padding: 0 20px; height: 72px; }
  .mobile-brand { font-size: 14px; }
  .balance-pill { font-size: 11px; padding: 9px 11px; }
  .welcome h1 { font-size: 29px; max-width: 260px; }
  .welcome p { font-size: 13px; }
  .hero { min-height: 350px; }
  .hero-copy { padding: 30px 24px; }
  .hero h2 { font-size: clamp(24px, 7.7vw, 32px); }
  .hero p { font-size: 14px; }
  .hero .button { font-size: 14px; min-height: 48px; }
  .feature { min-height: 236px; }
  .feature-copy h2 { font-size: 23px; }
  .feature-copy p { font-size: 13px; }
  .quick-paths { grid-template-columns: 1fr; gap: 8px; }
  .quick-paths a { padding: 14px 18px; font-size: 14px; }
  .section-heading { gap: 12px; align-items: flex-start; }
  .section-heading h2 { font-size: 24px; }
  .section-heading .text-link { font-size: 12px; }
  .shop-shelf .shop-card { grid-template-columns: 120px minmax(0,1fr); gap: 16px; }
  .shop-shelf .shop-card h2 { font-size: 17px; }
  .shop-shelf .shop-card p { font-size: 13px; }
  .shop-shelf .shop-actions .button { font-size: 12px; min-height: 44px; }
  .astro-input, .astro-result, .astro-empty { padding: 22px; }
  .catalog-grid, .catalog-shelf .catalog-grid { grid-template-columns: 1fr; }
  .catalog-grid .product-card { display: grid; grid-template-columns: 116px minmax(0,1fr); }
  .catalog-grid .card-picture { height: 100%; min-height: 180px; }
  .catalog-grid .card-copy { padding: 16px; }
  .catalog-grid .card-copy h3 { font-size: 16px; line-height: 1.4; min-height: 0; }
  .catalog-grid .card-copy > .muted { font-size: 11px; }
  .catalog-grid .card-copy p { font-size: 12px; min-height: 0; margin-bottom: 16px; }
  .catalog-grid .card-bottom strong { font-size: 12px; }
  .catalog-grid .save-button { left: 76px; right: auto; }
  .catalog-grid .format-tag { font-size: 9px; left: 8px; right: 8px; width: max-content; max-width: 100px; }
  .catalog-shelves { gap: 36px; }
}
/* Relationship editorial artwork: decorative, never a computed chart. */
.relationship-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; overflow: hidden; background: #e7f0f7; border-radius: 28px; padding: 48px; isolation: isolate; }
.relationship-hero-art { position: absolute; right: 0; bottom: 0; width: 65%; height: 100%; object-fit: cover; object-position: 70% center; z-index: -1; mask-image: linear-gradient(to right, transparent, black 24%); }
.relationship-hero .astro-heading { grid-column: 1; position: relative; }
.relationship-hero .astro-heading h1 { max-width: 7em; font-size: clamp(36px,5vw,62px); line-height: 1.04; letter-spacing: -.04em; }
.relationship-hero .astro-heading > p { max-width: 26ch; }
.relationship-hero .button { box-shadow: 0 8px 20px #205c9125; }
.relationship-entry { overflow: hidden; }
.relationship-entry-art { width: 88px; height: 88px; object-fit: cover; object-position: 75% center; border-radius: 18px; flex-shrink: 0; }
.relationship-hero .button:focus-visible, .relationship-entry:focus-visible { outline: 3px solid #205c91; outline-offset: 5px; }
@media (max-width: 600px) {
  .relationship-hero { display: flex; flex-direction: column; padding: 0 24px 28px; min-height: 0; border-radius: 24px; }
  .relationship-hero-art { position: relative; order: 0; width: calc(100% + 48px); max-width: none; height: clamp(140px,38vw,210px); margin: 0 -24px 12px; object-position: 65% 42%; mask-image: linear-gradient(to bottom, black 82%, transparent); }
  .relationship-hero .astro-heading { order: 1; }
  .relationship-hero .astro-heading h1 { max-width: none; font-size: clamp(28px,8vw,38px); margin-top: 8px; }
  .relationship-hero .astro-heading > p { max-width: none; }
  .relationship-hero .button { width: 100%; justify-content: space-between; }
  .relationship-entry-art { width: 64px; height: 76px; }
}
@media(max-width:350px) {
  main { padding-inline: 16px; }
  .balance-pill { font-size: 10px; }
  .shop-shelf .shop-card { grid-template-columns: 1fr; }
  .bottom-nav a { font-size: 9px; }
  .catalog-grid .product-card { grid-template-columns: 96px minmax(0,1fr); }
  .catalog-grid .save-button { left: 56px; }
  .catalog-grid .format-tag { max-width: 80px; }
}