/* Asteria Final shared utility — italic gold accent for reading titles. */
.rv-it{font-style:italic;color:var(--accent-gold);}

/* ---------------------------------------------------------------------------
   Action buttons — use on <a> or <button> for primary CTAs (not plain text
   hyperlinks). Keep mid-prose "read more" links as plain anchors.
   --------------------------------------------------------------------------- */
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-medium, 500);
  letter-spacing: var(--track-wide, 0.14em);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  border-radius: var(--radius-md, 4px);
  border: 0.5px solid transparent;
  padding: 0.7rem 1.15rem;
  min-height: 2.6rem;
  cursor: pointer;
  transition:
    background var(--duration-fast, 120ms) var(--ease-out, ease),
    color var(--duration-fast, 120ms) var(--ease-out, ease),
    border-color var(--duration-fast, 120ms) var(--ease-out, ease),
    opacity var(--duration-fast, 120ms) var(--ease-out, ease);
}
a.btn:focus-visible,
button.btn:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}
a.btn-primary,
button.btn-primary {
  color: var(--bg-deep);
  background: var(--accent-gold);
  border-color: var(--accent-gold);
}
a.btn-primary:hover,
button.btn-primary:hover {
  opacity: 0.9;
}
a.btn-secondary,
button.btn-secondary {
  color: var(--accent-gold);
  background: transparent;
  border-color: var(--accent-gold);
}
a.btn-secondary:hover,
button.btn-secondary:hover {
  background: var(--accent-gold-soft, rgba(201, 168, 107, 0.12));
}
a.btn-ghost,
button.btn-ghost {
  color: var(--ink-secondary);
  background: var(--bg-surface, transparent);
  border-color: var(--ink-quaternary);
}
a.btn-ghost:hover,
button.btn-ghost:hover {
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  align-items: center;
  margin: var(--space-4, 1rem) 0;
}
.btn-row-center {
  justify-content: center;
}
/* Compact mid-page CTAs (after a section, not hero) */
a.btn-sm,
button.btn-sm {
  min-height: 2.2rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.68rem;
}

/* Asteria Final shared utility — top-corner brackets on a relative box.
   Apply to any container that wants the 17th-century instrument-plate
   framing (top-left + top-right gilt corners). Previously this 8-line
   block was hand-rolled in ~7 modules; now any element with the class
   inherits the framing. For full 4-corner brackets, also add explicit
   span markers (.rv-brackets-bl + .rv-brackets-br). */
.rv-brackets{position:relative;}
.rv-brackets::before,
.rv-brackets::after{content:"";position:absolute;
  width:12px;height:12px;pointer-events:none;}
.rv-brackets::before{top:6px;left:6px;
  border-top:1px solid var(--accent-gold);
  border-left:1px solid var(--accent-gold);}
.rv-brackets::after{top:6px;right:6px;
  border-top:1px solid var(--accent-gold);
  border-right:1px solid var(--accent-gold);}
.rv-brackets-bl,.rv-brackets-br{position:absolute;
  width:12px;height:12px;pointer-events:none;}
.rv-brackets-bl{bottom:6px;left:6px;
  border-bottom:1px solid var(--accent-gold);
  border-left:1px solid var(--accent-gold);}
.rv-brackets-br{bottom:6px;right:6px;
  border-bottom:1px solid var(--accent-gold);
  border-right:1px solid var(--accent-gold);}

/* Asteria Final shared utility — Storymaker-voice empty states. Every
   silence in the app is a reading: when there is nothing to show, the
   voice reads the nothing. Two render flavors: a bracketed card frame
   (.rv-empty) and inline prose (.rv-empty-inline). */
.rv-empty{padding:2rem 1.6rem 1.7rem;text-align:center;
  border:1px solid var(--ink-quaternary);border-radius:3px;
  background:linear-gradient(155deg,rgba(245,243,240,.03),rgba(0,0,0,.18));
  position:relative;}
.rv-empty-mark{font-family:var(--font-display);font-size:1.45rem;
  line-height:1;color:var(--accent-gold);margin:0 auto .75rem;
  opacity:0.92;}
.rv-empty-head{font-family:var(--font-display);
  font-weight:var(--weight-regular);
  font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.3;
  color:var(--ink-primary);margin:0 auto .9rem;max-width:34ch;}
.rv-empty-body{font-size:.88rem;line-height:1.65;
  color:var(--ink-secondary);max-width:44ch;margin:0 auto;}
.rv-empty-cta{display:inline-block;margin-top:1.3rem;
  font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-gold);text-decoration:none;
  border:1px solid var(--ink-quaternary);border-radius:2px;
  padding:.55rem .9rem;transition:all .25s var(--ease-out);
  background:rgba(0,0,0,.2);}
.rv-empty-cta:hover{color:var(--bg-deep);
  background:var(--accent-gold);border-color:var(--accent-gold);}
.rv-empty-inline{padding:1.1rem 0;}
.rv-empty-inline .rv-empty-mark{margin:0 0 .45rem;font-size:1.2rem;
  text-align:left;}
.rv-empty-inline-head{font-family:var(--font-display);
  font-weight:var(--weight-regular);
  font-size:1.15rem;line-height:1.35;
  color:var(--ink-primary);margin:0 0 .5rem;}
.rv-empty-inline-body{font-size:.86rem;line-height:1.6;
  color:var(--ink-secondary);margin:0;}
.rv-empty-inline-cta{font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.08em;color:var(--accent-gold);
  text-decoration:none;border-bottom:1px dotted var(--accent-gold);
  padding-bottom:1px;margin-left:.25rem;}
.rv-empty-inline-cta:hover{color:var(--ink-primary);
  border-bottom-color:var(--ink-primary);}

/* Compact page note under heroes: one line, expand for more. */
.rmw{margin:var(--space-3) 0 var(--space-5);max-width:52ch;
  border:0.5px solid var(--ink-quaternary);border-radius:var(--radius-md);
  background:var(--bg-surface);padding:0;}
.rmw-sum{list-style:none;cursor:pointer;padding:var(--space-3) var(--space-4);
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-secondary);display:flex;align-items:center;gap:var(--space-2);
  min-height:40px;}
.rmw-sum::-webkit-details-marker{display:none;}
.rmw-sum::marker{content:"";}
.rmw-sum::before{content:"i";flex:none;width:1.1em;height:1.1em;
  border:0.5px solid var(--accent-gold);border-radius:50%;
  color:var(--accent-gold);font-size:9px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:0;text-transform:none;line-height:1;}
.rmw[open] > .rmw-sum{color:var(--accent-gold);
  border-bottom:0.5px solid var(--ink-quaternary);}
.rmw-body{padding:var(--space-3) var(--space-4) var(--space-4);
  font-size:var(--text-sm);line-height:1.55;color:var(--ink-secondary);}
.rmw-body p{margin:0 0 var(--space-2);}
.rmw-body p:last-child{margin:0;}
.rmw-body a{color:var(--accent-gold);text-decoration:none;}
.rmw-body a:hover{text-decoration:underline;}
.rmw-line{margin:var(--space-3) 0 var(--space-4);max-width:52ch;
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-tertiary);line-height:1.5;}

/* Calibration divider — hairline + mono section label + ruler ticks. */
.rv-calib{position:relative;margin:var(--space-8) 0 var(--space-5);
  height:28px;display:flex;align-items:center;justify-content:center;}
.rv-calib::before{content:"";position:absolute;left:0;right:0;top:50%;
  height:0.5px;background:var(--ink-quaternary);transform:translateY(-50%);}
.rv-calib-label{position:relative;z-index:1;padding:0 var(--space-4);
  font-family:var(--font-mono);font-size:9px;letter-spacing:var(--track-widest);
  text-transform:uppercase;color:var(--ink-tertiary);
  background:var(--bg-deep);}
.rv-calib-tick{position:absolute;top:50%;width:0.5px;height:9px;
  background:var(--ink-quaternary);transform:translateY(-50%);z-index:0;}
.rv-calib-tick-25{left:25%;}
.rv-calib-tick-50{left:50%;}
.rv-calib-tick-75{left:75%;}

/* Pull quote — one strongest sentence per section (Cormorant italic gold). */
.rv-pull{font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.08rem,1.8vw,1.28rem);line-height:1.48;
  color:var(--accent-gold);margin:0 0 var(--space-5);max-width:52ch;}

/* ============================================================================
   astrochart — design tokens
   ----------------------------------------------------------------------------
   The complete token vocabulary for the interactive birth chart visual layer.

   This file defines:
     1. Structural tokens (typography, spacing, radius, shadow, motion,
        chart geometry) — these never change between themes.
     2. The :root colour set, which defaults to the "midnight" theme so the
        product renders correctly even before themes.css loads or if no
        [data-theme] attribute is present.

   Theme overrides live in themes.css. Load order: tokens.css → themes.css.

   Aesthetic: editorial (Kinfolk / Cereal / Apartamento) crossed with
   cartographic instrument design (17th-c. celestial atlases). Restrained.
   Tactile. Every line earns its place.
   ============================================================================ */

:root {
  /* --------------------------------------------------------------------------
     COLOUR — default theme: midnight
     Mirrored verbatim in themes.css [data-theme="midnight"]. Kept here so the
     chart is never unstyled. themes.css is the source of truth for switching.
     -------------------------------------------------------------------------- */

  /* Backgrounds — deep to elevated, a quiet three-step recession */
  --bg-deep: #0a0a0f;
  --bg-surface: #15151f;
  --bg-elevated: #1f1f2c;

  /* Ink — text and lines, four-step hierarchy from foreground to faint */
  --ink-primary: #f5f3f0;
  --ink-secondary: #a7a5a0;
  --ink-tertiary: #6b6a66;
  --ink-quaternary: #3d3c3a;

  /* Accent — a single restrained gold, plus a soft wash for fills/halos */
  --accent-gold: #c9a86b;
  --accent-gold-soft: rgba(201, 168, 107, 0.25);

  /* Elements — the four classical elements; drive sign tints + sections */
  --fire: #d4634a;   /* terracotta */
  --earth: #7a8e5e;  /* sage */
  --air: #c9a86b;    /* gold */
  --water: #4a7a9c;  /* deep teal */

  /* Aspects — relationship lines drawn across the chart core */
  --aspect-harmonious: #7a8e5e;             /* trine, sextile */
  --aspect-dynamic: #d4634a;                /* square, opposition */
  --aspect-neutral: #f5f3f0;                /* conjunction */
  --aspect-minor: rgba(167, 165, 160, 0.5);
  --aspect-harmonic: rgba(201, 168, 107, 0.4);

  /* States — feedback, validation, system messaging */
  --state-success: #7a8e5e;
  --state-warning: #c9a86b;
  --state-error: #d4634a;
  --state-info: #4a7a9c;

  /* --------------------------------------------------------------------------
     ASPECT STROKE PATTERNS
     Themed alongside colour. In midnight/parchment, aspect TYPE is carried by
     colour, so most lines stay solid and patterns merely add texture. In the
     monochrome theme these become the *primary* differentiator (see themes.css).
     Values are SVG stroke-dasharray strings; `none` renders solid.
     -------------------------------------------------------------------------- */
  --aspect-dash-harmonious: none;
  --aspect-dash-dynamic: none;
  --aspect-dash-neutral: none;
  --aspect-dash-minor: 2 4;
  --aspect-dash-harmonic: 7 5;

  /* ==========================================================================
     STRUCTURAL TOKENS — identical across all themes
     ========================================================================== */

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------------------------- */

  /* Families — display serif for headings/glyphic numerals, neutral sans for
     body, mono for coordinates, ephemeris data and degree readouts */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — modular, ratio 1.250 (major third), base 16px */
  --text-xs: 0.64rem;    /* 10.24px — micro labels, tick annotations */
  --text-sm: 0.8rem;     /* 12.8px  — captions, metadata */
  --text-base: 1rem;     /* 16px    — body */
  --text-md: 1.25rem;    /* 20px    — lead paragraphs, sub-headings */
  --text-lg: 1.563rem;   /* 25px    — section headings */
  --text-xl: 1.953rem;   /* 31.25px — page headings */
  --text-2xl: 2.441rem;  /* 39px    — display */
  --text-3xl: 3.052rem;  /* 48.83px — hero display */

  /* Weights — Instrument Serif is a single-weight display face (Regular
     only); Mona Sans is the variable workhorse and carries 300-600 with
     its `wdth,wght` axes. */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-loose: 1.85;

  /* Letter-spacing / tracking */
  --track-tight: -0.02em;
  --track-normal: 0;
  --track-wide: 0.05em;
  --track-wider: 0.1em;
  --track-widest: 0.2em;  /* small caps, eyebrow labels */

  /* --------------------------------------------------------------------------
     SPACING — 4px base, geometric progression
     -------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* --------------------------------------------------------------------------
     RADIUS
     -------------------------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     SHADOW — used sparingly; the system reads as printed, not glassy
     -------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.35);

  /* --------------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------------- */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-deliberate: 1000ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-anticipate: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* --------------------------------------------------------------------------
     CHART GEOMETRY
     The chart is drawn into a 1000×1000 SVG viewBox, centred at (500, 500).
     Ring radii are expressed two ways: as a percentage (for documentation and
     CSS sizing) and the percentage itself is what render code multiplies by
     the 1000-unit viewBox. e.g. 49% → radius 490 units.
     -------------------------------------------------------------------------- */
  --chart-size: clamp(320px, 90vw, 800px);

  /* Stroke weights — four-step line hierarchy, the cartographer's pen set */
  --chart-stroke-fine: 0.5px;
  --chart-stroke-base: 1px;
  --chart-stroke-emphasis: 1.5px;
  --chart-stroke-bold: 2px;

  /* Ring radii — percentage of the 1000-unit viewBox half-width */
  --ring-metadata-outer: 49%;
  --ring-metadata-inner: 47%;
  --ring-zodiac-outer: 47%;
  --ring-zodiac-inner: 40.5%;
  --ring-ticks-outer: 40.5%;
  --ring-ticks-inner: 39.5%;
  --ring-houses-outer: 39.5%;
  --ring-houses-inner: 31%;
  --ring-points-outer: 31%;
  --ring-points-inner: 22%;
  --ring-aspects-outer: 22%;
  --ring-center: 8%;
}

/* Honour the user's reduced-motion preference — collapse every duration to a
   near-instant value so transitions still fire (state stays correct) without
   animating. Easing curves are left intact; they are inert without duration. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-slower: 1ms;
    --duration-deliberate: 1ms;
  }
}

/* Instant press feedback — every control answers the moment it is pressed,
   including on touch, where there is no hover state to lean on. No transition
   is declared, so the response is immediate and existing transitions on these
   elements are left untouched. */
button:active,
summary:active,
[role="button"]:active,
a.nav-link:active,
a.ref-card:active,
a.feat-card:active,
a.gl-card:active,
a.gl-result:active,
a.ov-nav-link:active {
  transform: scale(0.97);
  opacity: 0.72;
}

/* ============================================================================
   MOBILE A11Y BASELINE
   ----------------------------------------------------------------------------
   These rules apply globally on small viewports (≤720px wide). They fix three
   mobile-specific issues that would otherwise dog every form and chrome
   control in the app:

   1. iOS Safari auto-zooms ANY input/select/textarea under 16px on focus.
      Bumping to 16px at the input level prevents that jarring zoom-in
      without forcing desktop typography to grow.

   2. Apple's HIG and the WCAG 2.5.5 (AAA) baseline call for a 44×44 px
      minimum tap target. The desktop chrome controls (lunation badge,
      theme switcher, tweaks trigger, nav hamburger,
      device badge) all run smaller for visual density — they get
      expanded to a 44px hit area on touch without changing their
      visible size.

   3. Safe-area insets — the topbar / footer / drawer respect the iPhone
      notch + home-indicator when installed as a PWA
      (apple-mobile-web-app-status-bar-style: black-translucent makes the
      status bar overlay the topbar).
   ============================================================================ */

@media (max-width: 720px) {
  /* iOS zoom-on-focus fix — every form input renders at the readability
     floor, then individual pages can still down-size labels and helper
     text. Targeted at the elements that trigger the zoom (text-style
     inputs, select, textarea); checkboxes / radios are unaffected. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px;
  }

  /* 44px tap-target floor for the chrome strip. The visible button stays
     the same size (border + padding unchanged) — we just guarantee the
     touch hit-rectangle. */
  .nav-toggle,
  .lun-badge,
  .theme-switcher,
  .tweaks-trigger,
  .account-link,
  .nav-menu-summary,
  .rising-modal-close,
  .panel-pull-tab {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Safe-area-inset support — applies at every viewport, not just mobile,
   because installed PWAs on iPad / Android tablets also notch. */
.topbar {
  padding-left: max(var(--space-6), env(safe-area-inset-left));
  padding-right: max(var(--space-6), env(safe-area-inset-right));
  padding-top: max(var(--space-4), env(safe-area-inset-top));
}
.footer-inner {
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  padding-left: max(var(--space-6), env(safe-area-inset-left));
  padding-right: max(var(--space-6), env(safe-area-inset-right));
}