/* The iPhone app's look, for every page of the site but the homepage.
 *
 * Each value here is traceable to the app's Swift source, and should stay so:
 * colours to `Palette.brassAndInk` resolved through `Palette.with(.brass)`
 * (the metal's accent replaces the palette's own brass, as the app does),
 * type to `FontSet.nativeSky`, cards and labels to `BirthChartView` and
 * `PlateLabel` in `Theme.swift`, the metal to `MetalFinish` and `Brass`.
 *
 * These are only the defaults before any script runs. chart/src/appearance.js
 * overwrites every token here from the visitor's Appearance choice, so a page
 * that loads it follows the app's other palettes, metals, and faces too. The
 * homepage is the exception and keeps the app's welcome-screen night.
 */

:root{
  /* Palette.brassAndInk, with the brass metal's accent. */
  --night: #14100A;
  --ground: #14100A;
  --panel: #1B1206;
  --ink: #EDE0C0;
  --muted: #9A8A66;
  --brass: #B08C3F;
  --bright: #F0D493;
  --resist: #F3E6C4;
  --rule: rgba(176,140,63,0.3);
  --danger: #d4775f;
  --glow: rgba(176,140,63,0.14);
  --stars: 0;
  --instrument: #14100A;
  --fused: #F0D493;
  --flow: #F3E6C4;
  --friction: #d4775f;
  --fire: #DD6440;

  /* FontSet.nativeSky: New York over San Francisco over Menlo, and the
     nearest thing a Windows or Android device already carries. */
  --font-display: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  /* The metal buttons' engraved labels keep Spectral, the site's serif from
     before it took the app's type, whichever type set Appearance has chosen. */
  --font-button: "Spectral", Georgia, "Times New Roman", serif;

  /* The polished brass ramp (MetalFinish.brass, Brass.polished). */
  --metal: linear-gradient(180deg, #6D5424 0%, #C9A24C 6%, #FDF1CD 14%, #F0D493 24%, #C9A24C 40%, #B08C3F 66%, #6D5424 82%, #B08C3F 89%, #F0D493 95%, #3D2F14 100%);
  --metal-wear: none;
  --on-metal: #1A1408;
  --engrave: 0 1px 0 rgba(253,241,205,0.6);
  --metal-lift: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.35), inset 1px 0 0 rgba(255,255,255,.14), inset -1px 0 0 rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.45);

  /* Layout.swift */
  --readable: 680px;
  --form: 620px;
  --gallery: 820px;
  --wheel: 560px;

  color-scheme: dark;
}

html{ background: var(--ground); }
body{
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* The site's old night sky. Pages still carrying the element keep working;
   it just isn't drawn. */
.stars{ display: none !important; }

h1, h2, h3, .display{ font-family: var(--font-display); color: var(--resist); font-weight: 600; }
a{ color: var(--bright); }

/* `PlateLabel`: small semibold capitals in brass, tracked 1.6pt. */
.plate-label,
h1.plate-label, h2.plate-label, h3.plate-label, p.plate-label{
  margin: 0; line-height: 1.3;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--brass);
}

/* The app's card: panel fill, 10pt corners, a quarter-strength brass rule. */
.card{
  background: var(--panel); border: 1px solid rgba(176,140,63,0.25);
  border-radius: 10px; padding: 14px;
}
.card.featured{ border-color: rgba(221,100,64,0.32); } /* "Your Whole Chart": fire at .32 */
.card > :first-child{ margin-top: 0; }
.card > :last-child{ margin-bottom: 0; }

/* Morgan's standing rule: every button sits on a plate. Inside one, --panel
   turns to the ground colour, so fields and rows still stand out from it.
   (Set on the children, not the plate, or the plate itself loses its fill.) */
.plate{
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 12px; padding: clamp(16px, 3vw, 22px);
}
.plate > *{ --panel: var(--ground); }
.plate > :first-child{ margin-top: 0; }
.plate > :last-child{ margin-bottom: 0; }

.muted{ color: var(--muted); }

/* Metal buttons: the app's `wornBrassButton` + `brassBevel` + engraved label. */
.metal-button{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-button); font-size: 16px; font-weight: 600;
  letter-spacing: clamp(.06em, .3vw, .14em); text-transform: uppercase;
  padding: 11px clamp(16px, 5vw, 22px); border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  text-align: center;
  /* One line, always: /assets/fit-buttons.js letters a label smaller when it
     would not otherwise fit the room its button has. */
  white-space: nowrap; max-width: 100%;
  background: var(--metal-wear) center / cover no-repeat, var(--metal);
  color: var(--on-metal); text-shadow: var(--engrave); box-shadow: var(--metal-lift);
  text-decoration: none;
}
.metal-button:active{ filter: brightness(.93); }

/* A button given emphasis sits in the app's filigree frame (app/src/filigree.js,
   mode "button"), which pads this holder to clear its own metal. */
/* The install guide's one-tap Install (chart/src/install-guide.js), struck in
   the chosen metal on every page that shows the guide. :root outranks the
   guide's own flat fallback. */
:root .ig-actions .ig-go{
  background: var(--metal-wear) center / cover no-repeat, var(--metal);
  color: var(--on-metal); text-shadow: var(--engrave); box-shadow: var(--metal-lift);
  border-color: transparent; font-family: var(--font-button); font-size: 16px; font-weight: 600;
  letter-spacing: clamp(.06em, .3vw, .14em); text-transform: uppercase; white-space: nowrap;
}
:root .ig-actions .ig-go:active{ filter: brightness(.93); }
.framed-button{ position: relative; display: inline-flex; max-width: 100%; vertical-align: middle; }
.framed-button > .metal-button{ position: relative; z-index: 1; }
/* A whole plate in the filigree, its contents kept above the metal. */
.framed-plate{ position: relative; }
.framed-plate > :not(.filigree){ position: relative; z-index: 1; }
.filigree{ position: absolute; inset: -6px; pointer-events: none; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; }
.quiet-button{
  font-family: var(--font-body); font-size: 15px; padding: 10px clamp(12px, 4vw, 16px); border-radius: 8px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer;
  white-space: nowrap; max-width: 100%;
}

/* The inline navigation title the app's screens carry (17pt semibold). */
.nav-bar{
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 44px; padding: env(safe-area-inset-top, 0px) 12px 0;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.nav-bar .title{ grid-column: 2; font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; }
.nav-bar .leading{ grid-column: 1; display: flex; gap: 4px; }
.nav-bar .trailing{ grid-column: 3; display: flex; gap: 4px; justify-content: flex-end; }
.nav-bar button, .nav-bar a.icon{
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; color: var(--bright); cursor: pointer; padding: 0;
}
.nav-bar svg{ width: 22px; height: 22px; }

/* The system tab bar, tinted with the palette's bright brass. */
.tab-bar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 6px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  border-top: 0.5px solid rgba(255,255,255,0.08);
}
.tab-bar a{
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #8E8E93; text-decoration: none; font-family: var(--font-body);
  font-size: 10px; font-weight: 500; padding: 2px 0; position: relative;
}
.tab-bar a[aria-current="page"]{ color: var(--bright); }
.tab-bar svg{ width: 26px; height: 26px; }
.tab-bar .badge{
  position: absolute; top: -4px; left: 52%; padding: 1px 6px; border-radius: 8px;
  font-size: 9.5px; font-weight: 600; background: var(--metal); color: var(--on-metal);
}

/* A segmented control, as `Picker(.segmented)` draws one on a dark ground. */
.segmented{
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  padding: 2px; border-radius: 9px; background: rgba(118,118,128,0.24);
}
.segmented button{
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink);
  background: none; border: 0; border-radius: 7px; padding: 6px 10px; cursor: pointer;
}
.segmented button[aria-selected="true"]{ background: rgba(99,99,102,0.9); font-weight: 600; }

/* Readable columns, Layout.readable and friends. */
.readable{ max-width: var(--readable); margin-inline: auto; }
.screen{ padding: 20px; max-width: var(--readable); margin-inline: auto; }

@media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto !important; } }

/* ---------- pages (site-pages) ----------
 * The pages around the web app: /chart/, /prints/,
 * /privacy/, /support/ and /order/thank-you/. Each carries `class="page"` on
 * its body, so nothing here reaches the homepage or /app/. Sizes are the
 * app's own: a screen's padding and its 22pt VStack spacing from
 * BirthChartView, section titles at displayFont(20) as SettingsView sets
 * them, row text at bodyFont(15) and prose at 14, notes at 12 and 11.
 */
.page *, .page *::before, .page *::after{ box-sizing: border-box; }
.page{ font-synthesis-weight: none; }
.page :focus-visible{ outline: 2px solid var(--bright); outline-offset: 2px; }
.page main{ max-width: var(--readable); margin-inline: auto; padding: 20px 20px 56px; }
.page main.form-width{ max-width: calc(var(--form) + 44px); padding-inline: 22px; }
.page main.gallery-width{ max-width: calc(var(--gallery) + 32px); padding-inline: 16px; }
:where(.page) p{ margin: 0; }
:where(.page) p + p{ margin-top: 10px; }
.page main > * + *{ margin-top: 22px; }
.page main > p + p{ margin-top: 12px; }
.page main > .visually-hidden:first-child + *,
.page main > :is(h2, h3) + *{ margin-top: 0; }
.page main > .dates + *{ margin-top: 10px; }
.page main > h2 + h3{ margin-top: 12px; }

/* The plate's own fill is the palette's panel, and only what sits inside it
   turns to the ground. Declaring --panel on the plate itself made its own
   background resolve to the ground, so a plate showed as an outline only. */
.page .plate{ --panel: inherit; }
.page .plate > *{ --panel: var(--ground); }

/* The back control the app's navigation stack gives every pushed screen:
   a chevron and the name of where it goes, in the bar's tint. */
.nav-bar a.back{
  display: inline-flex; align-items: center; gap: 3px; height: 44px; min-width: 0;
  padding-right: 6px; color: var(--bright); text-decoration: none;
  font-family: var(--font-body); font-size: 17px;
}
.nav-bar a.back svg{ width: 12px; height: 20px; flex: none; }
.nav-bar a.back span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page .nav-bar .title{ text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw; }

.visually-hidden{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* BirthChartView's header: one muted line, centered. */
.page .intro{ text-align: center; color: var(--muted); font-size: 14px; line-height: 1.45; max-width: 46ch; margin-inline: auto; }
.page .intro .plate-label{ display: block; margin-bottom: 8px; }
.page .note{ color: var(--muted); font-size: 12px; line-height: 1.45; }
.page .note.center{ text-align: center; }
.page .prose{ font-size: 14px; line-height: 1.55; }
.page .muted-prose{ font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Section titles as Settings sets them: the display face at 20, in resist,
   regular weight (the app's displayFont default). */
.page h2, .page .section-title{
  font-family: var(--font-display); font-size: 20px; font-weight: 400;
  line-height: 1.25; color: var(--resist); margin: 0 0 6px; text-wrap: balance;
}
.page h3{
  font-family: var(--font-display); font-size: 17px; font-weight: 400;
  line-height: 1.3; color: var(--resist); margin: 22px 0 6px; text-wrap: balance;
}
/* A heading that is a plate label stays one: PlateLabel, whatever element. */
.page .plate-label{
  font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 1.4;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--brass);
}
.page .divider{ border: 0; border-top: 1px solid rgba(176,140,63,0.25); margin-block: 24px 0; }
.page .plate h2{ margin-bottom: 6px; }
.page .plate > p{ font-size: 13px; color: var(--muted); line-height: 1.5; }
.page .plate > * + *{ margin-top: 12px; }

/* Messages: the app's notes in fire for what went wrong, brass for news. */
.page .problem, .page .said{
  background: var(--panel); border: 1px solid rgba(176,140,63,0.4);
  border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.45;
}
.page .problem{ border-color: rgba(221,100,64,0.55); }

/* Fields, as BirthDetailsForm draws them: the ground inside a 6pt corner
   and a 0.4 brass rule, the entered text in resist. */
.page input:not([type=radio]):not([type=checkbox]), .page select{
  font-family: var(--font-body); font-size: 16px; color: var(--resist);
  background: var(--ground); border: 1px solid rgba(176,140,63,0.4);
  border-radius: 6px; padding: 9px; min-width: 0; max-width: 100%;
}
.page input:invalid{ border-color: rgba(221,100,64,0.55); }
.page input[type=radio]{ accent-color: var(--brass); margin: 0; flex: none; }

/* A labelled row, label leading and control trailing, as a Form row is. */
.page .form-row{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 12px; font-size: 14px; color: var(--ink);
}
.page .form-row > :last-child{ margin-left: auto; }
.page .form-col{ display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink); }

/* Full-width metal, as "Cast My Chart" and "Subscribe" are struck. */
.page .metal-button.wide{ display: flex; width: 100%; padding-block: 12px; }
.page .metal-button:disabled{ opacity: .55; cursor: default; }
.page .metal-button{ text-align: center; }
.page .quiet-button{ font-size: 13px; color: var(--brass); }
.page .text-link{
  font-family: var(--font-body); font-size: 13px; color: var(--muted); background: none;
  border: 0; padding: 0; text-decoration: underline; cursor: pointer;
}

/* The app's selectable row (Paywall's tier rows, Settings' profile rows). */
.page .row-card{
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px;
  background: var(--panel); border: 1px solid rgba(176,140,63,0.25);
  border-radius: 10px; padding: 12px; font-size: 15px; color: var(--ink);
}
.page .row-card .trailing{ margin-left: auto; font-variant-numeric: tabular-nums; }
.page .row-card .sub{ display: block; font-size: 11px; color: var(--bright); }
.page .row-card:has(input:checked){ border-color: var(--bright); box-shadow: inset 0 0 0 1px var(--bright); }

/* A contact card: plate label over the address. */
.page .contact .plate-label{ display: block; margin-bottom: 4px; }
.page .contact a{ font-size: 17px; overflow-wrap: anywhere; }

/* The reading pages: the policy and support, as the app's detail screens
   read, prose in the body face at 15 and titles in the display face. */
.page.reading main{ font-size: 15px; line-height: 1.6; }
.page.reading h2{ font-size: 22px; margin: 34px 0 8px; padding-top: 24px; border-top: 1px solid rgba(176,140,63,0.25); }
.page.reading .card p{ font-size: 15px; }
.page .dates{ font-size: 12px; color: var(--muted); }

.page footer{
  margin-top: 40px; padding-top: 16px; border-top: 1px solid rgba(176,140,63,0.2);
  color: var(--muted); font-size: 12px; line-height: 1.6; text-align: center;
}
.page footer a{ color: var(--brass); }
.page footer p{ margin-top: 6px; }