/* ============================================================
   TAARA — style.css · cosmic dark · DESIGN.md v1.0
   Tokens in :root are the only raw color values in this file.
   Logical properties only (RTL-ready).
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---------- Background layers ---------- */
  --bg-base:        #0d0b1e;   /* app canvas (handoff-fixed) */
  --bg-raised:      #16132b;   /* cards, tab bar, top bar */
  --bg-overlay:     #1f1b38;   /* sheets, modals, menus */
  --bg-input:       #131028;   /* text fields, search */
  --bg-bubble-user: #221c45;   /* chat: user message pill */
  --bg-scrim:       rgba(5, 4, 12, 0.60); /* behind sheets/modals */

  /* ---------- Gold scale ---------- */
  --gold:          #e8b662;    /* accent (handoff-fixed): links, active tab, primary buttons */
  --gold-hover:    #f2c87e;    /* hover/focus tint of gold surfaces */
  --gold-pressed:  #c9973f;    /* pressed state of gold surfaces */
  --gold-muted:    rgba(232, 182, 98, 0.14); /* selected-row fill, chip fill, badge fill */
  --gold-hairline: rgba(232, 182, 98, 0.28); /* decorative rules, card sheen borders */
  --on-gold:       #1f1505;    /* text/icons on gold fills (9.68:1 on --gold) */

  /* ---------- Text hierarchy ---------- */
  --text-hi:       #f0ecfb;    /* primary: headings, body, values */
  --text-mid:      #b8b0d4;    /* secondary: supporting copy, labels */
  --text-low:      #8a82a8;    /* tertiary: metadata, placeholders, inactive tabs */
  --text-disabled: rgba(240, 236, 251, 0.38); /* disabled only — never for readable content */

  /* ---------- Semantic ---------- */
  --success: #7fd8ab;
  --error:   #f0a1a1;
  --info:    #9db6f5;
  --warning: #e8b662;          /* gold doubles as warning; pair with an icon, never color alone */
  --error-bg:   rgba(240, 161, 161, 0.12);
  --success-bg: rgba(127, 216, 171, 0.12);

  /* ---------- Border / divider ---------- */
  --border:  #2a2547;          /* input borders, card outlines */
  --divider: #211d3d;          /* list separators, section rules */

  /* ---------- Gradients ---------- */
  --grad-cosmic: linear-gradient(180deg, #1a1535 0%, #0d0b1e 100%);
      /* hero card + onboarding backdrop */
  --grad-gold: linear-gradient(135deg, #f2c87e 0%, #d9a24a 100%);
      /* primary CTA fill, score-ring stroke */
  --grad-sheen: radial-gradient(120% 80% at 50% 0%,
      rgba(232,182,98,0.08) 0%, rgba(232,182,98,0) 60%);
      /* subtle top glow layered over --bg-raised on the hero card */

  /* ---------- Spacing (4/8 scale) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---------- Radius ---------- */
  --r-sm: 8px;    /* chips, small inputs */
  --r-md: 12px;   /* buttons, inputs, list cards */
  --r-lg: 16px;   /* content cards */
  --r-xl: 20px;   /* hero card, sheets (top corners) */
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-sheet: 0 -8px 32px rgba(0,0,0,0.55);

  /* ---------- Motion ---------- */
  --t-fast: 120ms;  /* state changes: hover, press, toggle */
  --t-base: 160ms;  /* page transitions, sheet/menu open */
  --t-slow: 200ms;  /* card reveal, ring sweep — the ceiling */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --max-w: 430px;     /* content column; centered on wider screens */
  --gutter: 16px;     /* screen edge padding (use padding-inline) */
  --top-h: 56px;      /* top bar height */
  --tab-h: 64px;      /* tab bar height, + env(safe-area-inset-bottom) */
  --touch: 44px;      /* minimum hit target */

  /* ---------- Type ---------- */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Noto Sans", sans-serif;
  --fs-display-1: 32px; --lh-display-1: 38px;
  --fs-display-2: 26px; --lh-display-2: 32px;
  --fs-title:     22px; --lh-title:     28px;
  --fs-heading:   17px; --lh-heading:   24px;
  --fs-serif-body:18px; --lh-serif-body:30px;
  --fs-body:      16px; --lh-body:      24px;
  --fs-sm:        14px; --lh-sm:        20px;
  --fs-caption:   12px; --lh-caption:   16px;
  --fs-overline:  11px; --lh-overline:  16px;
}

/* ---------- Self-hosted Fraunces (latin, 72pt optical) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin-400italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

/* The `hidden` attribute must always win: component rules below set
   display (flex / inline-flex) and would otherwise override the UA rule,
   showing the solar banner, a blank Stripe button or PRO badges that the
   app has explicitly hidden. */
[hidden] { display: none !important; }

body {
  background: var(--bg-base);
  color: var(--text-hi);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
input, select, textarea { font-family: inherit; }
a { color: var(--gold); }

.icon { display: inline-block; vertical-align: middle; flex: none; }

/* Type levels */
.display-1 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-display-1); line-height: var(--lh-display-1); letter-spacing: -0.01em; }
.display-2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-display-2); line-height: var(--lh-display-2); letter-spacing: -0.01em; }
.title     { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-title); }
.heading   { font-weight: 600; font-size: var(--fs-heading); line-height: var(--lh-heading); }
.serif-body { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-serif-body); line-height: var(--lh-serif-body); }
.body      { font-size: var(--fs-body); line-height: var(--lh-body); }
.small     { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.caption   { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: 0.01em; }
.overline  { font-weight: 600; font-size: var(--fs-overline); line-height: var(--lh-overline); letter-spacing: 0.08em; text-transform: uppercase; }
.serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.text-mid { color: var(--text-mid); }
.text-low { color: var(--text-low); }
.prose p { margin-block: 0 var(--sp-4); white-space: pre-line; }
.prose p:last-child { margin-block-end: 0; }
/* Long unbroken words (names, emails, places) wrap instead of overflowing. */
.display-1, .display-2, .title, .heading, .serif-body, .row-title, .msg-user,
.msg-taara, .g-name, .you-row .heading, .born-line, .mirror-text { overflow-wrap: anywhere; }
.tnum { font-variant-numeric: tabular-nums; }

/* Focus */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* ============================================================
   Starfield (fixed, behind everything)
   ============================================================ */
.starfield { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.app { position: relative; z-index: 1; }
.stars { position: absolute; top: 0; left: 0; border-radius: 50%; background: transparent; }
.s1 { width: 1px;   height: 1px;   animation: drift 240s linear infinite; }
.s2 { width: 1.5px; height: 1.5px; animation: drift 180s linear infinite; }
.s3 { width: 2px;   height: 2px;   animation: drift 120s linear infinite, twinkle 7s ease-in-out infinite; }
@keyframes drift   { from { transform: translateY(0); } to { transform: translateY(-2000px); } }
@keyframes twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ============================================================
   App shell
   ============================================================ */
.app {
  max-width: var(--max-w);
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100dvh;
}
.screen {
  display: flow-root;   /* contain the first child's top margin (no dark band above cosmic screens) */
  padding-inline: var(--gutter);
  padding-block-end: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 32px);
  min-height: 100vh;
  min-height: 100dvh;
}
.screen--cosmic { background: var(--grad-cosmic); }
.screen--bare { padding-block-end: var(--sp-8); } /* auth: no tab bar */

/* Screen transitions (tabs are peers: fade/rise only).
   At rest the transform must be `none`, not translateY(0): any transform
   makes the screen the containing block of its position:fixed children, so
   the chat composer and its pinned ethics line would scroll away with the
   thread instead of staying above the tab bar. */
.screen { opacity: 0; transform: translateY(8px); }
.screen.in { opacity: 1; transform: none; transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.screen.out { opacity: 0; transform: none; transition: opacity 80ms linear; }
/* The chat screen fades only. Even DURING the rise its transform makes the
   screen the containing block of the fixed composer dock, so with a long
   thread the composer + pinned ethics line sat below the fold for the whole
   transition, then jumped into place. */
.screen.chat-screen, .screen.chat-screen.in, .screen.chat-screen.out { transform: none; }

/* Card reveal */
.reveal { opacity: 0; transform: translateY(6px); }
.reveal.in { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-body);
  border-radius: var(--r-md);
  min-height: 52px; padding-inline: var(--sp-5);
  position: relative;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  user-select: none;
}
.btn:active { transform: scale(0.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--grad-gold); color: var(--on-gold); }
.btn--primary:hover { box-shadow: inset 0 0 0 999px rgba(255,255,255,0.08); }
.btn--primary:active { background: var(--gold-pressed); box-shadow: none; }

.btn--secondary { background: transparent; border: 1px solid var(--gold-hairline); color: var(--gold); }
.btn--secondary:hover { border-color: var(--gold); }

.btn--ghost { background: transparent; color: var(--gold); min-height: 44px; font-size: 15px; }
/* inline ghost links align their text with the content edge, like a link */
.btn--ghost:not(.btn--block) { padding-inline: 0; min-width: var(--touch); justify-content: flex-start; }
.btn--destructive { background: transparent; color: var(--error); min-height: 44px; font-size: 15px; }

.btn--chip {
  background: var(--gold-muted); color: var(--gold);
  font-size: var(--fs-sm); min-height: 36px; padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
}
.btn--chip::after { content: ""; position: absolute; inset-block: -4px; inset-inline: 0; } /* 44px hit */

/* Button spinner (800ms loop — exempt from motion ceiling) */
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid currentColor; border-inline-start-color: transparent;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.loading .btn-label { visibility: hidden; }
.btn.loading .spinner { position: absolute; }
.btn .spinner { display: none; }
.btn.loading .spinner { display: block; }

/* ============================================================
   Inputs
   ============================================================ */
.field { margin-block-end: var(--sp-4); }
.field-label {
  display: block; font-size: var(--fs-caption); line-height: var(--lh-caption);
  color: var(--text-mid); margin-block-end: 6px;
}
.input, .select {
  width: 100%; min-height: 56px;
  background: var(--bg-input); color: var(--text-hi);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding-inline: var(--sp-4);
  font-size: 16px; line-height: var(--lh-body);
  transition: border-color var(--t-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-low); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); }
.field.error .input, .field.error .select { border-color: var(--error); }
.field-msg {
  display: none; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-caption); line-height: var(--lh-caption);
  color: var(--error); margin-block-start: 6px;
}
.field.error .field-msg { display: flex; }
.field-help { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-low); margin-block-start: 6px; }

.input--search { padding-inline-start: 44px; }
.search-wrap { position: relative; }
.search-wrap .icon-search {
  position: absolute; inset-inline-start: var(--sp-3); inset-block-start: 50%;
  transform: translateY(-50%); color: var(--text-low); pointer-events: none;
}

.select { appearance: none; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; inset-inline-end: var(--sp-4); inset-block-start: 50%;
  width: 8px; height: 8px; border-inline-end: 1.5px solid; border-block-end: 1.5px solid;
  color: var(--text-low); transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.textarea {
  width: 100%; background: var(--bg-input); color: var(--text-hi);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding-block: 10px; padding-inline: var(--sp-4);
  font-size: 16px; line-height: var(--lh-body);
  resize: none; min-height: 44px; max-height: 108px;
  transition: border-color var(--t-fast) var(--ease);
}

/* Checkbox row */
.check-row {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--touch); cursor: pointer;
  font-size: var(--fs-body); color: var(--text-hi);
}
.card .check-row { margin-block-end: var(--sp-3); }   /* partner form: same rhythm as .field */
.check-row input[type="checkbox"] {
  appearance: none; width: 22px; height: 22px; margin: 0; flex: none;
  border: 1.5px solid var(--border); border-radius: 6px; background: var(--bg-input);
  display: grid; place-content: center; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.check-row input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
/* a tick box shows the same 2px gold ring as every other control (the
   text-field rule above turns the outline off for inputs) */
.check-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.check-row input[type="checkbox"]:checked::after {
  content: ""; width: 10px; height: 6px;
  border-inline-start: 2px solid var(--on-gold); border-block-end: 2px solid var(--on-gold);
  transform: rotate(-45deg) translateY(-1px);
}

/* ============================================================
   Segmented toggle (Western / Vedic)
   ============================================================ */
.seg {
  position: relative; display: flex; height: 44px; padding: 4px;
  background: var(--bg-input); border-radius: var(--r-pill);
}
.seg-ind {
  position: absolute; inset-block: 4px; inline-size: calc(50% - 4px);
  inset-inline-start: 4px;
  background: var(--bg-overlay); border: 1px solid var(--gold-hairline);
  border-radius: var(--r-pill);
  transition: transform var(--t-base) var(--ease);
}
.seg[data-active="1"] .seg-ind { transform: translateX(100%); }
[dir="rtl"] .seg[data-active="1"] .seg-ind { transform: translateX(-100%); }
.seg-btn {
  position: relative; z-index: 1; flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  font-weight: 600; font-size: var(--fs-sm); color: var(--text-mid);
  border-radius: var(--r-pill); min-height: 36px;
  transition: color var(--t-base) var(--ease);
}
.seg-btn::after { content: ""; position: absolute; inset-block: -4px; inset-inline: 0; } /* 44px hit */
.seg-btn[aria-selected="true"] { color: var(--gold); }
.seg-btn .icon { width: 12px; height: 12px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
  margin-block-end: var(--sp-4);
}
.card--hero {
  background: var(--grad-sheen), var(--bg-raised);
  border: 1px solid var(--gold-hairline);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-2);
}
.kicker { display: block; color: var(--text-low); margin-block-end: var(--sp-2); }

.row-card {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 64px; width: 100%; text-align: start;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-md); padding-inline: var(--sp-4); padding-block: var(--sp-2);
  transition: background-color var(--t-fast) var(--ease);
  margin-block-end: var(--sp-2);
}
.row-card:active { background: var(--bg-overlay); }
.row-card .icon-lead { width: 24px; height: 24px; color: var(--text-mid); }
.row-card .row-main { flex: 1 1 auto; min-width: 4.5em; display: flex; flex-direction: column; }
.row-card .row-title { font-weight: 600; font-size: var(--fs-heading); line-height: var(--lh-heading); color: var(--text-hi); }
.row-card .row-sub { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-low); overflow-wrap: anywhere; }
.row-card .row-value { flex: 0 1 auto; color: var(--text-mid); font-size: var(--fs-sm); min-width: 0; overflow-wrap: anywhere; text-align: end; }
.row-card .row-value.gold { color: var(--gold); font-weight: 600; }
.row-card .icon-chev { width: 20px; height: 20px; color: var(--text-low); }

/* ============================================================
   Chips & badges
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding-inline: var(--sp-3);
  background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-mid);
  white-space: nowrap;
}
.chip .icon { width: 14px; height: 14px; }
.chip { max-width: 100%; }
/* sentence chips (free-message counter, weekly ready time) wrap rather than overflow */
.chip--counter { white-space: normal; height: auto; min-height: 28px; padding-block: var(--sp-1); text-align: center; }
.chip--counter.zero { color: var(--gold); }
.badge-pro {
  display: inline-flex; align-items: center;
  background: var(--gold-muted); color: var(--gold);
  font-weight: 600; font-size: var(--fs-overline); line-height: var(--lh-overline);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding-block: 4px; padding-inline: 8px; border-radius: var(--r-sm);
}

/* ============================================================
   Tab bar
   ============================================================ */
.tab-bar {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 10;
  background: var(--bg-raised);
  border-block-start: 1px solid var(--divider);
  padding-block-end: env(safe-area-inset-bottom, 0px);
}
.tab-bar-inner {
  display: flex; height: var(--tab-h);
  max-width: var(--max-w); margin-inline: auto;
  position: relative;
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-low); position: relative;
  transition: color var(--t-base) var(--ease);
}
.tab .icon { width: 24px; height: 24px; }
.tab-label { font-size: var(--fs-overline); line-height: 14px; }
.tab[aria-current="page"] { color: var(--gold); }
.tab-ind {
  position: absolute; inset-block-start: 0;
  width: 20px; height: 3px; border-radius: var(--r-pill);
  background: var(--gold);
  transition: inset-inline-start var(--t-base) var(--ease);
}

/* ============================================================
   Sheets
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 20;
  background: var(--bg-scrim);
  opacity: 0; transition: opacity var(--t-base) linear;
}
.scrim.in { opacity: 1; }
.sheet {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 21;
  max-width: var(--max-w); margin-inline: auto;
  background: var(--bg-overlay);
  border-start-start-radius: var(--r-xl); border-start-end-radius: var(--r-xl);
  box-shadow: var(--shadow-sheet);
  padding: var(--sp-6);
  padding-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  max-height: 86vh; max-height: 86dvh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease-out);
}
.sheet.in { transform: translateY(0); }
.sheet:focus, .sheet:focus-visible { outline: none; } /* the dialog container takes focus; its controls show the ring */
.sheet-grabber {
  width: 36px; height: 4px; border-radius: var(--r-pill);
  background: var(--border); margin-inline: auto; margin-block: 0 var(--sp-3);
  margin-block-start: calc(-1 * var(--sp-3));
}

/* ============================================================
   Toast
   ============================================================ */
.toast-root {
  position: fixed; inset-inline: 0; z-index: 30;
  inset-block-end: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + var(--sp-3));
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--sp-2);
  max-width: calc(100% - 32px);
  background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--r-md);
  padding-block: 12px; padding-inline: 16px;
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-hi);
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.toast.in { opacity: 1; transform: translateY(0); }
.toast .icon-err { width: 16px; height: 16px; color: var(--error); }
.toast .icon-gold { width: 16px; height: 16px; color: var(--gold); }
.toast-action { color: var(--gold); font-weight: 600; margin-inline-start: var(--sp-2); min-height: var(--touch); display: inline-flex; align-items: center; }

/* ============================================================
   Skeletons
   ============================================================ */
.skel {
  position: relative; overflow: hidden;
  background: var(--bg-overlay); border-radius: var(--r-sm);
  min-height: 14px;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-line { height: 14px; margin-block-end: var(--sp-3); }
.skel-row { height: 56px; border-radius: var(--r-md); margin-block-end: var(--sp-2); }

/* ============================================================
   Ethics footer
   ============================================================ */
.ethics {
  font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: 0.01em;
  color: var(--text-low);
  border-block-start: 1px solid var(--divider);
  padding-block-start: var(--sp-3);
  margin-block-start: var(--sp-4);
}
.ethics--bare { border-block-start: none; padding-block-start: 0; margin-block-start: 0; text-align: center; }

/* ============================================================
   Offline banner
   ============================================================ */
.offline-banner {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 15;
  height: 32px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-overlay); border-block-end: 1px solid var(--divider);
  font-size: var(--fs-caption); color: var(--text-mid);
  transform: translateY(-100%);
  transition: transform var(--t-base) var(--ease-out);
}
.offline-banner.in { transform: translateY(0); }

/* Site-wide announcement from /admin (dismissible, in the content column) */
.announce-banner {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  max-width: var(--max-w); margin: var(--sp-3) auto 0; padding: var(--sp-3) var(--sp-4);
  width: calc(100% - 2 * var(--gutter));
  background: var(--bg-overlay); border: 1px solid var(--gold-hairline); border-radius: var(--r-md);
  color: var(--text-hi); position: relative; z-index: 5;
}
.announce-banner[hidden] { display: none; }
.announce-banner.is-important { border-color: var(--error); background: var(--error-bg); }
.announce-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.announce-title { display: block; font-size: var(--fs-sm); }
.announce-body { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-mid); white-space: pre-wrap; }
.announce-close {
  background: transparent; border: 0; color: var(--text-mid); font-size: 22px; line-height: 1;
  min-width: 44px; min-height: 44px; margin: -10px -12px -10px 0; cursor: pointer;
}

/* ============================================================
   Auth screen
   ============================================================ */
.auth-wrap {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100dvh;
  padding-block: var(--sp-10);
}
.auth-brand { text-align: center; margin-block-end: var(--sp-8); }
.wordmark {
  font-family: var(--font-serif); font-weight: 600; font-size: 40px; line-height: 48px;
  color: var(--text-hi); display: inline-flex; align-items: baseline;
}
.wordmark .icon { width: 16px; height: 16px; color: var(--gold); margin-inline-start: 4px; align-self: flex-start; margin-block-start: 6px; }
.auth-tagline { color: var(--text-mid); font-size: var(--fs-sm); margin-block-start: var(--sp-1); }
.auth-card { margin-block-end: var(--sp-4); }
.auth-actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-block-start: var(--sp-5); }
.auth-actions .auth-forgot { align-self: center; justify-content: center; padding-inline: var(--sp-2); }

/* D10 consent tick: the label wraps over lines, the box stays at the top */
.consent-field { margin-block: var(--sp-1) 0; }
.consent-row { align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-mid); }
.consent-row input[type="checkbox"] { margin-block-start: 1px; }
.consent-text { flex: 1 1 auto; min-width: 0; padding-block: var(--sp-1); }
.consent-text a, .legal-link { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.consent-field.error .check-row input[type="checkbox"] { border-color: var(--error); }
/* a check-row inside a .field shows its error line under the row */
.field .check-row + .field-msg { margin-block-start: 0; }

/* D5 recovery code + forgot password */
.recovery-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.recovery-icon { width: 28px; height: 28px; color: var(--gold); }
.recovery-body { margin-block-start: calc(-1 * var(--sp-2)); }
.recovery-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 20px; line-height: 30px; letter-spacing: 0.06em; text-align: center;
  color: var(--text-hi); background: var(--bg-input);
  border: 1px solid var(--gold-hairline); border-radius: var(--r-md);
  padding-block: var(--sp-4); padding-inline: var(--sp-3);
  overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}
.recovery-code .code-half { display: inline-block; }
.recovery-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.recovery-actions .btn { min-height: var(--touch); padding-inline: var(--sp-2); font-size: var(--fs-sm); }
.recovery-card .check-row { font-size: var(--fs-sm); }
.recover-body { margin-block: var(--sp-2) var(--sp-5); }
.recover-code-input { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: 0.04em; }

/* consent prompt + AI notice sheets */
.legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-block: var(--sp-4); font-size: var(--fs-sm); }
.legal-links a { min-height: var(--touch); display: inline-flex; align-items: center; }
.consent-sheet .btn + .btn, .ai-notice .btn + .btn { margin-block-start: var(--sp-2); }
.ai-notice-list { margin-block: var(--sp-3); margin-inline: 0; padding-inline-start: var(--sp-5); color: var(--text-hi); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.ai-notice-list li { margin-block-end: var(--sp-2); }
.ai-notice-never { margin-block-end: var(--sp-2); }
.ai-notice .ai-notice-policy { display: inline-flex; align-items: center; min-height: var(--touch); font-size: var(--fs-sm); margin-block-end: var(--sp-3); }

/* ============================================================
   Onboarding
   ============================================================ */
.onboard-head { margin-block: var(--sp-8) var(--sp-6); }
.onboard-q { margin-block: var(--sp-6) var(--sp-3); }
.geo-results { list-style: none; margin: 0; padding: 0; }
.geo-results li { margin-block-end: var(--sp-2); }
.geo-opt {
  display: block; width: 100%; text-align: start;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-md);
  padding-block: var(--sp-3); padding-inline: var(--sp-4);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.geo-opt:hover, .geo-opt:focus-visible { border-color: var(--gold-hairline); }
.geo-opt[aria-selected="true"] { background: var(--gold-muted); border-color: var(--gold-hairline); }
.geo-opt .g-name { display: block; font-weight: 600; font-size: var(--fs-heading); line-height: var(--lh-heading); color: var(--text-hi); }
.geo-opt .g-sub { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-low); }
.geo-note { color: var(--text-low); font-size: var(--fs-sm); padding-block: var(--sp-2); }
.coords-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.manual-block { margin-block-start: var(--sp-3); }
.picked-chip { margin-block-start: var(--sp-2); }
/* a long place label wraps inside its chip instead of running off-screen */
.picked-chip .chip { white-space: normal; height: auto; min-height: 28px; padding-block: var(--sp-1); max-width: 100%; overflow-wrap: anywhere; }

/* ============================================================
   Today
   ============================================================ */
.today-head { margin-block-start: var(--sp-6); margin-block-end: var(--sp-5); }
.chips-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.hero-title-row { display: flex; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-4); }
.hero-title-row .icon { width: 20px; height: 20px; color: var(--gold); }
.gen-status { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-low); font-size: var(--fs-caption); margin-block-start: var(--sp-3); }
/* .transit-note: one rule only (the hr.divider-h before it is the divider) -- see WEDGE block */
.teaser-preview { position: relative; color: var(--text-mid); max-height: 48px; overflow: hidden; margin-block: var(--sp-2) var(--sp-3); }
.teaser-preview::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 48px;
  background: linear-gradient(180deg, transparent, var(--bg-raised));
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.err-inline { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; color: var(--text-mid); }

/* ============================================================
   Chart
   ============================================================ */
.chart-head { margin-block-start: var(--sp-6); margin-block-end: var(--sp-4); }
.born-line { color: var(--text-mid); margin-block-start: var(--sp-2); font-size: var(--fs-serif-body); }
.solar-banner {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  background: var(--gold-muted); border: 1px solid var(--gold-hairline); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin-block-end: var(--sp-4);
  font-size: var(--fs-sm); color: var(--text-mid);
}
.solar-banner .icon { width: 16px; height: 16px; color: var(--gold); margin-block-start: 2px; }
.seg-wrap { margin-block-end: var(--sp-4); }
.big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-block-end: var(--sp-4); }
.big3-card {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-md);
  padding-block: var(--sp-3); padding-inline: var(--sp-2); text-align: center; min-width: 0;
}
.big3-card .icon { width: 24px; height: 24px; color: var(--gold); margin-block-end: var(--sp-1); }
.big3-label { color: var(--text-low); display: block; }
/* Heading 17 at phone width; eases down on very narrow screens so the
   longest sign ("Sagittarius") never clips, and wraps rather than clip. */
.big3-value { font-weight: 600; font-size: clamp(14px, 4.4vw, var(--fs-heading)); line-height: var(--lh-heading); color: var(--text-hi); overflow-wrap: anywhere; }
.big3-note { font-size: var(--fs-caption); color: var(--text-low); }

.planet-table { width: 100%; }
.planet-row {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding-block: var(--sp-1);
  border-block-end: 1px solid var(--divider);
}
.planet-row:last-child { border-block-end: none; }
.planet-row .icon-planet { width: 20px; height: 20px; color: var(--text-mid); }
.planet-row .p-name { flex: 1; font-size: var(--fs-sm); color: var(--text-hi); display: flex; align-items: center; gap: var(--sp-2); }
.planet-row .p-sign { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-mid); }
.planet-row .p-sign .icon { width: 20px; height: 20px; }
.planet-row .p-deg { font-size: var(--fs-caption); color: var(--text-low); font-variant-numeric: tabular-nums; min-inline-size: 48px; text-align: end; }
.planet-main { flex: 1; min-width: 0; }
.planet-sub { font-size: var(--fs-caption); color: var(--text-low); padding-inline-start: 32px; margin-block-start: -2px; padding-block-end: var(--sp-1); }
.badge-r {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; border-radius: 4px;
  background: var(--gold-muted); color: var(--gold);
  font-size: 10px; font-weight: 600;
}

/* ============================================================
   Chat
   ============================================================ */
.chat-screen { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.chat-scroll { flex: 1; }
.chat-hello { text-align: center; padding-block: var(--sp-10) var(--sp-6); }
.chat-hello .icon { width: 32px; height: 32px; color: var(--gold); }
.chat-hello h2 { margin-block: var(--sp-3) var(--sp-1); }
.suggest-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-block-start: var(--sp-5); }
.suggest-chip {
  display: inline-flex; align-items: center;
  min-height: 36px; padding-inline: var(--sp-3);
  background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-caption); color: var(--text-mid);
  position: relative;
  transition: border-color var(--t-fast) var(--ease);
}
/* under Taara's opener (hello hidden) the chips align with her text column */
.chat-hello[hidden] ~ .suggest-row { justify-content: flex-start; padding-inline-start: 28px; margin-block-start: 0; }
.suggest-chip:hover { border-color: var(--gold-hairline); }
.suggest-chip::after { content: ""; position: absolute; inset-block: -4px; inset-inline: 0; }

.msg-user {
  white-space: pre-line;  /* the user's own line breaks survive */
  margin-inline-start: auto; max-width: 75%; width: fit-content;
  background: var(--bg-bubble-user);
  border-radius: var(--r-lg);
  border-end-end-radius: var(--r-sm);
  padding-block: 10px; padding-inline: 14px;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-hi);
  margin-block: var(--sp-4) var(--sp-4);
  overflow-wrap: break-word;
}
.msg-taara {
  position: relative;
  padding-inline-start: 28px;
  margin-block: var(--sp-5);
  font-family: var(--font-serif); font-size: var(--fs-serif-body); line-height: var(--lh-serif-body);
  color: var(--text-hi);
  overflow-wrap: break-word;
}
.msg-taara .spark {
  position: absolute; inset-inline-start: 0; inset-block-start: 6px;
  width: 16px; height: 16px; color: var(--gold);
}
.msg-divider { border: none; border-block-start: 1px solid var(--divider); margin-block: var(--sp-5); }
.typing { display: inline-flex; gap: 5px; align-items: center; min-height: 30px; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0.3;
  animation: tpulse 900ms linear infinite;
}
.typing i:nth-child(2) { animation-delay: 150ms; }
.typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes tpulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.stream-err {
  display: flex; align-items: center; gap: var(--sp-1);
  min-height: var(--touch); margin-block-start: var(--sp-1);
  font-family: var(--font-sans); font-size: var(--fs-caption); line-height: var(--lh-caption);
  color: var(--error); text-align: start;
}
.stream-err .icon { width: 14px; height: 14px; }

.composer-dock {
  position: fixed; inset-inline: 0; z-index: 9;
  inset-block-end: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-base);
  border-block-start: 1px solid var(--divider);
}
.composer-inner {
  max-width: var(--max-w); margin-inline: auto;
  padding-inline: var(--gutter); padding-block: var(--sp-2) var(--sp-3);
}
.composer-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-block-end: var(--sp-2); }
.composer-row { display: flex; align-items: flex-end; gap: var(--sp-2); }
.composer-row .textarea { flex: 1; }
.send-btn {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%; background: var(--grad-gold); color: var(--on-gold);
  display: grid; place-content: center;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.send-btn:active { transform: scale(0.98); }
.send-btn[disabled] { background: var(--bg-overlay); color: var(--text-low); pointer-events: none; }
.send-btn .icon { width: 20px; height: 20px; }
.chat-pad { padding-block-end: 184px; } /* room above composer dock */
.prose-stream { display: block; }
.prose-stream p { margin-block: 0 var(--sp-4); white-space: pre-line; }
.prose-stream p:last-child { margin-block-end: 0; }

/* ============================================================
   Match
   ============================================================ */
.match-head { margin-block-start: var(--sp-6); margin-block-end: var(--sp-4); }
.you-row { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-2); }
.you-row .label { color: var(--text-low); }
.divider-h { border: none; border-block-start: 1px solid var(--divider); margin-block: var(--sp-3); }
/* form-level error (match read failed): colour + icon + text, never colour alone */
.form-err {
  display: flex; align-items: flex-start; gap: var(--sp-1);
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--error);
  margin-block: 0 var(--sp-3);
}
.form-err .icon { margin-block-start: 1px; }
.ring-wrap { display: flex; flex-direction: column; align-items: center; padding-block: var(--sp-6); }
.ring-box { position: relative; width: 180px; height: 180px; }
.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.ring-score { font-family: var(--font-serif); font-weight: 700; font-size: 40px; line-height: 44px; color: var(--text-hi); }
.ring-sub { font-size: var(--fs-caption); color: var(--text-low); }
.verdict { color: var(--text-mid); text-align: center; margin-block-start: var(--sp-4); font-size: var(--fs-serif-body); }
/* Harmony / Friction / Advice subheads in the synastry reading (sans Heading) */
.prose .report-sub { font-family: var(--font-sans); color: var(--text-hi); margin-block: var(--sp-5) var(--sp-1); }
.prose .report-sub:first-child { margin-block-start: 0; }
.aspect-line { display: flex; justify-content: space-between; gap: var(--sp-2); padding-block: 6px; border-block-end: 1px solid var(--divider); font-size: var(--fs-sm); color: var(--text-mid); }
.aspect-line:last-child { border-block-end: none; }
.aspect-line .a-pair { color: var(--text-hi); }

/* ============================================================
   Settings
   ============================================================ */
.settings-section { margin-block-end: var(--sp-6); }
.settings-section > .overline { display: block; color: var(--text-low); margin-block-end: var(--sp-2); }
.version-line { text-align: center; color: var(--text-low); font-size: var(--fs-caption); margin-block: var(--sp-6); }
.settings-section > .caption { margin-block-end: var(--sp-3); }   /* the keys note above its field */
.key-row { margin-block-end: var(--sp-4); }
.key-row .key-grid { display: flex; gap: var(--sp-2); }
.key-row .key-grid .input { flex: 1; min-height: 44px; min-width: 0; }
.key-row .key-grid .btn { min-height: 44px; }
.key-unused { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.key-unused .btn--ghost { flex: none; }

/* a row that opens a page (Terms) looks like every other row */
a.row-card { color: inherit; text-decoration: none; }
a.btn { text-decoration: none; }
/* "Create your recovery code": gold-highlighted until it exists */
.row-card--attention { border-color: var(--gold-hairline); background: var(--gold-muted); }
.row-card--attention .row-title { color: var(--gold); }
.form-sheet .field { margin-block-start: var(--sp-4); }
.form-sheet .btn--primary { margin-block-start: var(--sp-2); }
/* an informational line where the promo error would sit (promos off) */
.field-msg.is-info { color: var(--text-mid); }

/* Match: permission tick above the Read button; result actions */
.permission-field .check-row { font-size: var(--fs-sm); line-height: var(--lh-sm); align-items: flex-start; margin-block-end: 0; }
.permission-field .check-row input[type="checkbox"] { margin-block-start: 1px; }
.permission-field.error .check-row input[type="checkbox"] { border-color: var(--error); }
.match-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); }

/* D9: the daily AI limit, said in the thread */
.chat-limit-note { margin-block: var(--sp-4); font-family: var(--font-sans); }

/* ============================================================
   Paywall sheet
   ============================================================ */
.paywall-spark { display: block; margin-inline: auto; width: 28px; height: 28px; color: var(--gold); }
.paywall-title { text-align: center; margin-block: var(--sp-3) var(--sp-2); }
.paywall-price { text-align: center; margin-block-end: var(--sp-5); }
.paywall-price .price {
  font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-display-2); line-height: var(--lh-display-2);
  color: var(--text-hi);
}
.paywall-price .per { color: var(--text-mid); font-size: var(--fs-sm); }
.pw-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.pw-list li { display: flex; gap: var(--sp-3); align-items: flex-start; padding-block: var(--sp-2); }
.pw-list .icon { width: 20px; height: 20px; color: var(--gold); margin-block-start: 2px; }
.pw-feature { font-weight: 600; font-size: 15px; line-height: 22px; color: var(--text-hi); }
.pw-free { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-low); }
.pw-promo { margin-block-start: var(--sp-4); }
.pw-promo .promo-grid { display: flex; gap: var(--sp-2); }
.pw-promo .promo-grid .input { flex: 1; }
.pw-note { text-align: center; color: var(--text-low); font-size: var(--fs-caption); line-height: var(--lh-caption); margin-block-start: var(--sp-4); }
.pw-ethics { margin-block-start: var(--sp-1); }

/* ============================================================
   WEDGE: receipts, reveal interstitial, pending weekly, renewal card
   ============================================================ */
/* W1 placement receipts: a caption-sized citation under each paragraph */
.receipt {
  font-family: var(--font-sans);
  font-size: var(--fs-caption); line-height: var(--lh-caption);
  color: var(--text-low);
  margin-block: calc(-1 * var(--sp-3)) var(--sp-4);
}
/* BRAND 1.2: the brand star marks every citation line (receipt, mirror) */
.receipt .receipt-star, .mirror-cite .receipt-star {
  width: 12px; height: 12px; color: var(--gold);
  vertical-align: -1px; margin-inline-end: 6px;
}
.transit-note { color: var(--text-mid); margin-block: 0; }

/* W2 Three Mirrors interstitial */
.reveal-screen .reveal-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-4); padding-block: var(--sp-10);
}
.reveal-spark { width: 32px; height: 32px; color: var(--gold); }
.mirrors { display: flex; flex-direction: column; gap: var(--sp-5); margin-block: var(--sp-4); }
.mirror-text { margin: 0; }
.mirror-cite { margin: var(--sp-1) 0 0; }
.reveal-how { margin-block: var(--sp-2) var(--sp-4); }

/* W4 ready-tonight pending state */
.weekly-pending { margin-block: var(--sp-2) var(--sp-3); }
.weekly-countdown { color: var(--text-low); margin-inline-start: var(--sp-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the weekly body sits a beat below its title, like the hero's prose */
.weekly-body { margin-block-start: var(--sp-3); }
/* the fixed offline banner (32px) never covers the Today date line */
body.is-offline .today-head { padding-block-start: 32px; }

/* "How we compute this" line under readings (COMPETITIVE gap #10) */
.how-line { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-low); margin-block: var(--sp-2) 0; }

/* Account deletion confirm sheet */
.delete-sheet .input { margin-block: var(--sp-3) var(--sp-2); }
.delete-sheet .field-msg { display: none; }
.delete-sheet .field-msg.show { display: flex; }

/* W5 renewal-honesty card + paywall lines */
.renew-card { margin-block-end: var(--sp-4); }
.renew-actions { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.pw-renews { text-align: center; margin-block: calc(-1 * var(--sp-2)) var(--sp-2); }
.pw-ledger { text-align: center; margin-block: 0 var(--sp-4); }

/* ============================================================
   Legal round 1: notice, disclaimer, AI labels, complaints
   (plan 5.3). Same tokens; logical properties only.
   ============================================================ */
/* T-05 short notice (sign-up; collapsed in the consent prompt) */
.notice-slot { margin-block: var(--sp-1) var(--sp-4); }
.notice {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md);
  padding-block: var(--sp-3); padding-inline: var(--sp-4);
}
.notice-title { margin-block-end: var(--sp-2); }
.notice-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); line-height: var(--lh-caption); }
.notice-table th {
  text-align: start; color: var(--text-low); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: var(--fs-overline);
  padding-block: 0 var(--sp-1); padding-inline: 0 var(--sp-2);
}
.notice-table td {
  vertical-align: top; color: var(--text-mid);
  padding-block: var(--sp-2); padding-inline: 0 var(--sp-2);
  border-block-start: 1px solid var(--divider); overflow-wrap: anywhere;
}
.notice-table td:first-child { color: var(--text-hi); }
/* a phone-width table reads as stacked rows: "Why: ..." under the data */
@media (max-width: 520px) {
  .notice-table thead { display: none; }
  .notice-table tr { display: block; border-block-start: 1px solid var(--divider); padding-block: var(--sp-2); }
  .notice-table td { display: block; border: none; padding-block: 1px; padding-inline: 0; }
  .notice-table td + td::before { content: attr(data-label) ": "; color: var(--text-low); }
}
.notice-withdraw { margin-block: var(--sp-3) 0; }
.notice-links { margin-block: var(--sp-2) 0; align-items: center; }
.notice-hindi-toggle {
  color: var(--gold); text-decoration: underline; text-underline-offset: 2px;
  min-height: var(--touch); display: inline-flex; align-items: center; font-size: var(--fs-sm);
}
.hindi-summary {
  margin-block-start: var(--sp-3); padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--divider);
  font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", var(--font-sans);
}
.hindi-summary h3 { margin-block-end: var(--sp-2); }
.hindi-summary p { font-size: var(--fs-sm); line-height: 22px; color: var(--text-mid); margin-block: 0 var(--sp-2); }
.hindi-summary strong { color: var(--text-hi); }
.notice-toggle {
  display: flex; align-items: center; width: 100%; min-height: var(--touch);
  color: var(--gold); font-weight: 600; font-size: var(--fs-sm); text-align: start;
  text-decoration: underline; text-underline-offset: 2px;
}
.notice-collapsible { margin-block: var(--sp-3); }
.notice-collapsible .notice { margin-block-start: var(--sp-2); }
.notice-collapsible .notice-title { display: none; }   /* the toggle already names it */

/* T-13 disclaimer: a quiet note card (onboarding, reveal, paywall) */
.note-card {
  background: var(--gold-muted); border: 1px solid var(--gold-hairline); border-radius: var(--r-md);
  padding-block: var(--sp-3); padding-inline: var(--sp-4); margin-block: 0 var(--sp-4);
  font-size: var(--fs-caption); line-height: 18px; color: var(--text-mid);
}
.onboard-head + .note-card { margin-block-start: calc(-1 * var(--sp-2)); }

/* C9: "AI-generated" label + Report link under every AI text */
.ai-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-block-start: var(--sp-3);
  font-family: var(--font-sans);
}
.ai-label {
  display: inline-flex; align-items: center; height: 22px; padding-inline: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-overline); line-height: var(--lh-overline); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-low);
}
/* plan 5.3: the safety label reads "Safety message" exactly as written */
.ai-label--safety { border-color: var(--gold-hairline); color: var(--gold); text-transform: none; letter-spacing: normal; }
.report-link {
  position: relative; min-height: 32px; display: inline-flex; align-items: center;
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-low);
  text-decoration: underline; text-underline-offset: 2px;
}
.report-link::after { content: ""; position: absolute; inset-block: -6px; inset-inline: -6px; } /* 44px hit */
.report-link:hover { color: var(--gold); }
.msg-taara .ai-row { margin-block-start: var(--sp-2); }
.mirror .ai-row { margin-block-start: var(--sp-2); }
.chat-ai-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-block: var(--sp-4) 0; color: var(--text-low);
  font-size: var(--fs-caption); line-height: var(--lh-caption); text-align: center;
}
.chat-ai-note .icon { color: var(--gold); width: 12px; height: 12px; }

/* complaint sheet, acknowledgement, ticket lists */
.textarea--box { border-radius: var(--r-md); min-height: 120px; max-height: 280px; resize: vertical; }
.complaint-counter { display: block; text-align: end; }
.complaint-ref {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); margin-block-start: var(--sp-4);
}
.complaint-excerpt { max-height: 120px; overflow: auto; white-space: pre-line; margin: 0; }
.hp-field { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.complaint-ticket {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: var(--fs-title); line-height: var(--lh-title); color: var(--gold);
  text-align: center; margin-block: var(--sp-2) var(--sp-3); letter-spacing: 0.04em;
}
.complaint-ack { margin-block-end: var(--sp-4); }
.complaint-copy, .ticket-card {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4); margin-block-end: var(--sp-3);
}
.complaint-text-copy, .ticket-text { white-space: pre-line; overflow-wrap: anywhere; margin-block: var(--sp-2) 0; }
.complaint-ack-view .btn + .btn, .complaint-sheet .btn + .btn, .nominee-sheet .btn + .btn { margin-block-start: var(--sp-2); }
.kv-line { margin-block: var(--sp-1) 0; color: var(--text-mid); overflow-wrap: anywhere; }
.kv-label { color: var(--text-low); }
.ticket-list { margin-block: var(--sp-3) var(--sp-4); }
.ticket-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-block-end: var(--sp-2); width: 100%; text-align: start;
}
.ticket-num { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--fs-sm); color: var(--text-hi); margin-inline-end: auto; }
.status-chip { height: 24px; }
.status-chip.status-resolved, .status-chip.status-closed { color: var(--success); }
.status-chip.status-in_progress { color: var(--info); }
.ticket-answer { margin-block-start: var(--sp-3); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--divider); }
.ticket-toggle { min-height: var(--touch); }
.admin-ticket.is-overdue { border-color: var(--error); }
.overdue-chip { color: var(--error); border-color: var(--error); height: 24px; }
.ticket-detail { margin-block-start: var(--sp-3); }
.ticket-detail .field { margin-block-start: var(--sp-3); }
.admin-back { margin-block-end: var(--sp-2); gap: var(--sp-1); }

/* adults-only / region screen */
.gate-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.gate-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-block-start: var(--sp-2); }

/* C8 paywall: terms before payment, the pending price, the way out */
.pw-terms { text-align: center; margin-block: 0 var(--sp-2); }
.pw-disclaimer { margin-block: var(--sp-2) var(--sp-4); }
.pw-pending { text-align: center; margin-block: 0 var(--sp-3); }
.pw-refund { text-align: center; margin-block: var(--sp-3) 0; }
.pw-links { justify-content: center; margin-block: var(--sp-1) var(--sp-2); }
.pw-dismiss { margin-block-start: var(--sp-2); justify-content: center; }

/* ============================================================
   Fatal error
   ============================================================ */
.fatal {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4); text-align: center; padding-inline: var(--sp-8);
}
.fatal .icon { width: 48px; height: 48px; color: var(--text-low); }

/* ============================================================
   RTL + locale typography (DESIGN 10)
   ============================================================ */
[dir="rtl"] .icon-directional { transform: scaleX(-1); }
/* The ar locale swaps the type tokens in one place (DESIGN 10.5). Fraunces
   stays first for Latin glyphs; Arabic glyphs fall through to an
   Arabic-capable family (system-installed: the CSP allows self-hosted
   fonts only, so nothing is fetched). */
:root:lang(ar) {
  --font-serif: "Fraunces", "Noto Naskh Arabic", "Amiri", "Traditional Arabic", Georgia, serif;
  --font-sans: "Noto Sans Arabic", "Segoe UI", Tahoma, -apple-system, Roboto, "Noto Sans", sans-serif;
}
/* Arabic is cursive: tracking breaks its letter joins. */
:root:lang(ar) .overline, :root:lang(ar) .caption, :root:lang(ar) .ethics,
:root:lang(ar) .badge-pro, :root:lang(ar) .display-1, :root:lang(ar) .display-2 { letter-spacing: 0; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .stars { animation: none !important; } /* static stars stay visible */
  .skel::after { animation: none !important; }
  .typing i { animation: none !important; opacity: 0.7; }
  .spinner { animation: none !important; }
}

/* T-08: the one-time DPDP notice */
.dpdp-heading { margin-block: var(--sp-4) var(--sp-2); }
.dpdp-rights .dpdp-right { min-height: var(--touch); padding-inline: var(--sp-2); }
.dpdp-officer p { margin-block: 0 var(--sp-1); }