/* Sunrise's visual design, "Morning": navy ink on pale blue and white, airmail red and blue as accents, pill buttons
 * and soft shapes. Dark text on light surfaces (easier for older eyes than light-on-dark), body and secondary text at
 * 7:1 contrast or better, 19px text, Atkinson Hyperlegible Next throughout. Scoped to :root so it overrides the base
 * layer at the end of application.css. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  --ink: #1b2a4e;         /* 14.1:1 on white */
  --muted: #45506a;       /* 8.1:1 on white, 7.2:1 on paper */
  --paper: #eef2f8;
  --surface: #ffffff;
  --surface-2: #e4ebf7;
  --line: #c9d3e3;
  --green: #1b2a4e;
  --accent: #c8323c;      /* airmail red: the sun, never text */
  --red-text: #94212a;    /* 7.4:1 on paper, for small labels */
  --airmail-blue: #2a56b8;
  --link: #22479a;        /* 8.6:1 on white */
  --sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  & body.sunrise-app { font: 19px/1.6 var(--sans); background: var(--paper); color: var(--ink); }
  & .sunrise-app h1, & .sunrise-app h2, & .sunrise-app h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
  & .sunrise-app :focus-visible { outline: 3px solid var(--airmail-blue); outline-offset: 3px; }
  & .sunrise-app .link, & .hero-secondary, & .preview-link, & .sunrise-app main a:not(.btn) { color: var(--link); text-decoration-thickness: 1.5px; }
  & .sunrise-app .text-muted, & .sunrise-app .lede, & .sunrise-app .helper-text, & .sunrise-app .option-sub, & .companion-label { color: var(--muted); }

  /* Masthead: plain white */
  & .site-header { position: relative; max-width: none; padding: 1.45rem max(2rem, calc((100% - 1136px) / 2)) 1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
  & .brand { font: 700 1.55rem/1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
  /* A half sun rising over the horizon, rays and all */
  & .brand-sun { width: 1.75em; height: auto; }
  & .site-nav { gap: .35rem; }
  & .site-nav a { color: var(--ink); font-size: 1rem; font-weight: 600; padding: .5rem 1rem; border-radius: 999px; }
  & .site-nav a:hover, & .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: none; background: var(--surface-2); }

  & .sunrise-app .page { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 20px 44px -30px #1b2a4e59; }
  & .sunrise-app .page > h1 { font-size: clamp(2.2rem, 4vw, 2.8rem); }
  & .eyebrow { color: var(--red-text); letter-spacing: .1em; }
  & .sunrise-app .field-group legend, & .sunrise-app .page h2.section-title { font: 700 1.1rem/1.4 var(--sans); color: var(--ink); }

  & .sunrise-app .btn { border-radius: 999px; font: 700 1.05rem/1.5 var(--sans); padding: .75rem 1.6rem; }
  & .sunrise-app .btn-primary, & .sunrise-app .btn-call { background: var(--ink); color: #fff; }
  & .sunrise-app .btn-primary:hover, & .sunrise-app .btn-call:hover { background: var(--airmail-blue); box-shadow: 0 0 0 6px #2a56b81f; }
  & .sunrise-app .btn-secondary { background: var(--surface); border: 1.5px solid var(--ink); color: var(--ink); }
  & .sunrise-app .btn-danger { background: #a3262f; color: #fff; }
  & .sunrise-app .text-input { background: var(--surface); border: 1.5px solid #8e9bb3; border-radius: 16px; color: var(--ink); }
  & .sunrise-app .text-input::placeholder { color: #5d6882; }
  & .sunrise-app .text-input:focus { outline: 3px solid var(--airmail-blue); outline-offset: 1px; border-color: var(--airmail-blue); }
  & .sunrise-app input[type="checkbox"], & .sunrise-app input[type="radio"] { accent-color: var(--ink); }
  & .sunrise-app .option-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; }
  & .sunrise-app .option-card:hover { border-color: #8e9bb3; }
  & .sunrise-app .option-card:has(:checked) { background: var(--surface-2); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  & .sunrise-app .option-title { font-weight: 700; }
  & .sunrise-app .consent-box { background: var(--paper); border: 0; border-radius: 20px; color: var(--ink); }
  & .sunrise-app .alert { border-radius: 16px; }
  & .sunrise-app .alert-success { color: #17452d; background: #e0f0e6; }
  & .sunrise-app .alert-error { color: #8a1f28; background: #fbe6e7; }
  & .sunrise-app .alert-warning { color: #5e430c; background: #fbefd2; }
  & .sunrise-app .session-list li, & .sunrise-app .settings-list li, & .sunrise-app .settings-list { border-color: var(--line); }
  & .sunrise-app .settings-list li:hover { background: var(--surface-2); }
  & .sunrise-app .session-list li p { margin: 0; }
  & .sunrise-app .session-list li p + p { margin-top: .2rem; }
  & .sunrise-app .danger-zone { background: #fdf1f1; border-color: #ecc2c5; }
  & .sunrise-app .danger-zone p { color: #6e2a2f; }
  & .sunrise-app .btn-secondary:hover { background: var(--surface-2); border-color: var(--ink); }
  & .sunrise-app .plan-card { background: var(--surface-2); border: 0; border-radius: 24px; }
  & .sunrise-app .plan-price { font: 700 3rem/1.1 var(--sans); letter-spacing: -.03em; }
  & .sunrise-app .call-page { background: var(--surface); }

  /* Landing: a pale morning sky behind the hero */
  & .sunrise-app .container:has(.landing) { margin-top: 0; }
  & .sunrise-app .landing-hero { padding: 4.5rem 0 4rem; margin-bottom: 3rem; border-radius: 0; background: none; }
  & body.sunrise-app:has(.landing) { background: radial-gradient(1000px 520px at 72% 520px, #ffffff, transparent 70%) no-repeat, var(--paper); }
  & .sunrise-app .landing-hero h1 { font-size: clamp(2.8rem, 5vw, 4.4rem); letter-spacing: -.035em; line-height: 1.04; }
  & .landing-hero h1 em { font-style: normal; color: var(--airmail-blue); font-weight: 700; }
  & .sunrise-app .landing-lede { color: var(--muted); font-size: 1.22rem; }
  & .hero-preview { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 30px 70px -34px #1b2a4e66; }
  & .preview-sun { background: var(--surface-2); padding: 6px; }
  & .preview-bubble { background: var(--surface-2); border-radius: 20px 20px 20px 6px; color: var(--ink); }
  & .preview-user { background: var(--ink); color: #fff; border-radius: 20px 20px 6px 20px; }
  & .preview-heading span:not(.preview-sun), & .preview-time, & .hero-note { color: var(--muted); }
  & .section-intro, & .companion-card p, & .landing-points p { color: var(--muted); }
  & .sunrise-app .companion-card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; }
  & .sunrise-app .landing-points { border: 0; gap: 1rem; }
  & .sunrise-app .landing-points > div { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 1.75rem; }
  & .sunrise-app .landing-footer { color: var(--muted); }

  /* Conversation: her words in navy ink, the companion's on pale blue */
  & .sunrise-app .conversation-header, & .sunrise-app .composer-dock { background: var(--surface); border-color: var(--line); }
  /* Messages scrolled up under the sticky header fade out, so there's visibly more above */
  & .sunrise-app .conversation-header::after { content: ""; position: absolute; top: calc(100% + 1px); left: 0; right: 0; height: 3rem; background: linear-gradient(var(--surface), transparent); opacity: 0; pointer-events: none; transition: opacity .2s; }
  & .sunrise-app .conversation-header { transition: box-shadow .2s; }
  & .sunrise-app .has-hidden-above .conversation-header { box-shadow: 0 10px 14px -12px rgb(27 42 78 / .45); }
  & .sunrise-app .has-hidden-above .conversation-header::after { opacity: 1; }
  & .sunrise-app .day-separator { color: var(--muted); }
  & .sunrise-app .day-separator::before, & .sunrise-app .day-separator::after { border-color: var(--line); }
  & .sunrise-app .bubble { font-size: 1.1rem; padding: .95rem 1.25rem; border-radius: 22px; }
  & .sunrise-app .message-assistant .bubble { background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 6px; }
  & .sunrise-app .message-user .bubble { background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
  & .sunrise-app .message-meta { color: var(--muted); font-size: .8rem; }
  & .sunrise-app .history mark, & .search-results mark { background: #ffe08a; color: var(--ink); }
  & .sunrise-app .earlier-link a { border-color: var(--line); color: var(--link); }
  & .sunrise-app .earlier-link a:hover, & .sunrise-app .password-toggle:hover { background: var(--surface-2); }
  & .sunrise-app .password-toggle { color: var(--link); }

  @media (max-width: 760px) {
    & .site-header { padding: 1.3rem 1.25rem .9rem; }
    & .sunrise-app .landing-hero { padding: 2.5rem 0; }
    & .sunrise-app .page { border-radius: 22px; }
  }
  @media (max-width: 480px) {
    /* The conversation fills the phone screen instead of sitting on a card */
    & .sunrise-app .conversation-page { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
    & .sunrise-app .conversation-header, & .sunrise-app .composer-dock { background: var(--paper); }
    & .sunrise-app .conversation-header::after { background: linear-gradient(var(--paper), transparent); }
    & .sunrise-app .message-assistant .bubble { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
    & .sunrise-app .composer-input { background: var(--surface); }
  }
}