/* SwitchPoint brand stylesheet, v1 (8 October 2026)
   Reference implementation of the approved look. Light and dark follow the
   device setting. Nothing here loads from a third party: fonts are local files. */

/* ---------- Fonts (self-hosted, SIL Open Font Licence 1.1) ---------- */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/barlow-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/barlow-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/literata-latin-500-normal.woff2') format('woff2');
}

/* ---------- Tokens: light ---------- */
:root {
  color-scheme: light dark;

  --sp-font-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --sp-font-display: 'Literata', Georgia, 'Times New Roman', serif;

  --sp-bg: #F6F2EA;
  --sp-surface: #FFFFFF;
  --sp-text: #2B2A26;
  --sp-text-muted: #5A564C;
  --sp-heading: #1F3A2B;
  --sp-accent: #24402F;
  --sp-on-accent: #F6F2EA;
  --sp-tint: #E3EBE1;
  --sp-badge: #E3EBE1;
  --sp-outline: #6F8074;
  --sp-card-border: #D5DDD3;
  --sp-hairline: #E6E1D6;
  --sp-field: #F6F2EA;
  --sp-gold: #D6BB80;

  --sp-support: #8C3B2A;
  --sp-on-support: #FFFFFF;

  --sp-band: linear-gradient(155deg, #1B3426 0%, #2A4F3B 100%);
  --sp-welcome: linear-gradient(165deg, #183024 0%, #2A4F3B 100%);
  --sp-on-band: #F6F2EA;
  --sp-on-band-muted: #C9D8CB;
  --sp-band-track: rgba(246, 242, 234, 0.24);
  --sp-contour-opacity: 0.13;

  --sp-button: linear-gradient(180deg, #2E5540 0%, #21402F 100%);
  --sp-on-button: #F6F2EA;

  --sp-orb-halo: #2E5540;
  --sp-orb-core: radial-gradient(circle at 34% 28%, #6FA283 0%, #2E5540 48%, #1B3426 100%);
  --sp-orb-glow: 0 4px 10px rgba(27, 52, 38, 0.35);
  --sp-on-orb: #F6F2EA;
  --sp-hero-halo: #D9E7DA;
  --sp-hero-core: radial-gradient(circle at 34% 28%, #F6FAF4 0%, #BFD6C2 44%, #7FA88C 100%);
  --sp-hero-glow: 0 0 44px rgba(191, 214, 194, 0.4), 0 12px 28px rgba(10, 24, 16, 0.4);

  --sp-shadow-answer: 0 1px 2px rgba(27, 52, 38, 0.07), 0 3px 10px rgba(27, 52, 38, 0.06);
  --sp-shadow-card: 0 2px 4px rgba(27, 52, 38, 0.06), 0 14px 32px rgba(27, 52, 38, 0.14);
  --sp-shadow-sheet: 0 -6px 24px rgba(27, 52, 38, 0.12);
  --sp-shadow-welcome-sheet: 0 -12px 40px rgba(10, 24, 16, 0.38);
  --sp-shadow-band: 0 10px 28px rgba(27, 52, 38, 0.24);
  --sp-shadow-button: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px rgba(27, 52, 38, 0.3);
  --sp-shadow-support: 0 4px 10px rgba(140, 59, 42, 0.26);
  --sp-sheet-edge: transparent;

  --sp-radius-answer: 14px;
  --sp-radius-card: 22px;
  --sp-radius-sheet: 24px;
  --sp-radius-band: 28px;
  --sp-radius-welcome: 30px;
}

/* ---------- Tokens: dark (follows the device setting) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --sp-bg: #101512;
    --sp-surface: #1B231E;
    --sp-text: #ECE7DC;
    --sp-text-muted: #B4AE9F;
    --sp-heading: #E4EFE5;
    --sp-accent: #A8C8AE;
    --sp-on-accent: #101512;
    --sp-tint: #263A2D;
    --sp-badge: #2A3A30;
    --sp-outline: #7C8F81;
    --sp-card-border: #2C3930;
    --sp-hairline: #2C3930;
    --sp-field: #101512;

    --sp-support: #B5553F;

    --sp-band: linear-gradient(155deg, #1D3023 0%, #2A4636 100%);
    --sp-welcome: linear-gradient(165deg, #0E1511 0%, #1E3226 100%);
    --sp-on-band: #ECE7DC;
    --sp-band-track: rgba(236, 231, 220, 0.2);
    --sp-contour-opacity: 0.1;

    --sp-button: linear-gradient(180deg, #B7D3BC 0%, #9BBDA2 100%);
    --sp-on-button: #101512;

    --sp-orb-halo: #A8C8AE;
    --sp-orb-core: radial-gradient(circle at 34% 28%, #E4F2E6 0%, #A8C8AE 46%, #6C9778 100%);
    --sp-orb-glow: 0 0 18px rgba(168, 200, 174, 0.35);
    --sp-on-orb: #101512;
    --sp-hero-halo: #A8C8AE;
    --sp-hero-core: radial-gradient(circle at 34% 28%, #E4F2E6 0%, #A8C8AE 46%, #6C9778 100%);
    --sp-hero-glow: 0 0 44px rgba(168, 200, 174, 0.35), 0 12px 28px rgba(0, 0, 0, 0.5);

    --sp-shadow-answer: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.3);
    --sp-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 32px rgba(0, 0, 0, 0.45);
    --sp-shadow-sheet: 0 -8px 28px rgba(0, 0, 0, 0.45);
    --sp-shadow-welcome-sheet: 0 -12px 40px rgba(0, 0, 0, 0.5);
    --sp-shadow-band: 0 10px 28px rgba(0, 0, 0, 0.45);
    --sp-shadow-button: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 18px rgba(0, 0, 0, 0.4);
    --sp-shadow-support: 0 4px 12px rgba(0, 0, 0, 0.4);
    --sp-sheet-edge: #2C3930;
  }
}

/* ---------- Base ---------- */
.sp, .sp * { box-sizing: border-box; }
.sp {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: var(--sp-font-body);
  font-size: 1.0625rem;          /* 17px, scales with the user's text size */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
.sp button, .sp input { font-family: inherit; }
.sp :focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 3px; }
.sp-band :focus-visible, .sp--welcome > .sp-brand :focus-visible { outline-color: var(--sp-on-band); }

.sp-display { margin: 0; font-family: var(--sp-font-display); font-weight: 500; }
.sp-muted { color: var(--sp-text-muted); }
.sp-small { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--sp-text-muted); }
.sp-link { padding: 12px 6px; color: var(--sp-accent); font-size: 1rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sp-brand { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.16em; }

/* ---------- Header band ---------- */
.sp-band {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 0 0 var(--sp-radius-band) var(--sp-radius-band);
  background: var(--sp-band);
  box-shadow: var(--sp-shadow-band);
  color: var(--sp-on-band);
}
.sp-band--flat { border-radius: 0; box-shadow: none; }          /* result screen: the card overlaps it */
.sp-band__inner { position: relative; padding: 14px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.sp-band--flat .sp-band__inner { padding: 28px 22px 72px; gap: 10px; }
.sp-band__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-band__skip { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--sp-on-band); font-size: 1rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sp-band__meta { font-size: 0.9375rem; color: var(--sp-on-band-muted); }
.sp-band__question { margin: 2px 0 0; font-family: var(--sp-font-display); font-size: 1.5625rem; font-weight: 500; line-height: 1.28; }
.sp-band__title { margin: 0; font-family: var(--sp-font-display); font-size: 2.5rem; font-weight: 500; line-height: 1.1; }
.sp-rule { width: 44px; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--sp-gold); }

/* Contour lines: decorative, drawn with the text colour of the band */
.sp-contours { position: absolute; right: -96px; top: -118px; width: 320px; height: 320px; color: var(--sp-on-band); opacity: var(--sp-contour-opacity); pointer-events: none; }
.sp-contours--welcome { left: 50%; top: 50%; right: auto; width: 600px; height: 600px; transform: translate(-50%, -50%); opacity: calc(var(--sp-contour-opacity) - 0.01); }

/* Progress: nine dashes, like a road's centre line */
.sp-progress { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; margin: 0 0 8px; padding: 0; list-style: none; }
.sp-progress > * { height: 5px; border-radius: 3px; background: var(--sp-band-track); }
.sp-progress > .is-done { background: var(--sp-gold); }

/* ---------- Answers ---------- */
.sp-answers { padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.sp-answer {
  min-height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 9px;
  border: 1px solid var(--sp-card-border);
  border-radius: var(--sp-radius-answer);
  background: var(--sp-surface);
  box-shadow: var(--sp-shadow-answer);
  color: var(--sp-text);
  font-size: inherit;
  text-align: left;
}
.sp-answer__letter { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sp-badge); color: var(--sp-accent); font-size: 0.9375rem; font-weight: 600; }
.sp-answer__text { flex-grow: 1; }
.sp-answer__tick { display: none; width: 20px; height: 20px; flex-shrink: 0; color: var(--sp-accent); }
/* Chosen answer: tint, thicker outline, filled badge and a tick, so colour is never the only signal */
.sp-answer[aria-pressed="true"] { border: 2px solid var(--sp-accent); padding: 5px 11px 5px 8px; background: var(--sp-tint); font-weight: 600; }
.sp-answer[aria-pressed="true"] .sp-answer__letter { background: var(--sp-accent); color: var(--sp-on-accent); }
.sp-answer[aria-pressed="true"] .sp-answer__tick { display: block; }

/* ---------- Bottom sheet: status strip above Support ---------- */
.sp-sheet {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding: 12px 18px max(14px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--sp-sheet-edge);
  border-radius: var(--sp-radius-sheet) var(--sp-radius-sheet) 0 0;
  background: var(--sp-surface);
  box-shadow: var(--sp-shadow-sheet);
}
.sp-sheet__divider { height: 1px; background: var(--sp-hairline); }
.sp-footer { display: flex; align-items: center; justify-content: space-between; }
.sp-footer--plain { margin-top: auto; padding: 0 22px max(14px, env(safe-area-inset-bottom)); }

.sp-status { display: flex; align-items: center; gap: 14px; }
.sp-status__label { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--sp-accent); }
.sp-status__hint { font-size: 0.9375rem; line-height: 1.3; color: var(--sp-text-muted); }

/* ---------- Orb ----------
   data-state: reading | listening | hearing | got | paused
   The orb is decoration (aria-hidden). The words beside it carry the meaning.
   "listening" and "hearing" may only be shown while the microphone is really open. */
.sp-orb { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.sp-orb__halo, .sp-orb__ring, .sp-orb__core, .sp-orb__icon { position: absolute; border-radius: 50%; }
.sp-orb__halo { inset: 0; background: var(--sp-orb-halo); opacity: 0.15; }
.sp-orb__ring { inset: 0; border: 2px solid var(--sp-orb-halo); opacity: 0; }
.sp-orb__core { inset: 20%; background: var(--sp-orb-core); box-shadow: var(--sp-orb-glow); }
.sp-orb__icon { inset: 20%; display: none; align-items: center; justify-content: center; color: var(--sp-on-orb); }
.sp-orb__icon svg { width: 52%; height: 52%; }

.sp-orb[data-state="listening"] .sp-orb__halo { animation: sp-breathe 4s ease-in-out infinite; }
.sp-orb[data-state="listening"] .sp-orb__core { animation: sp-core 4s ease-in-out infinite; }
.sp-orb[data-state="reading"] .sp-orb__halo { opacity: 0.09; }
.sp-orb[data-state="reading"] .sp-orb__ring { animation: sp-ripple 2.6s ease-out infinite; }
.sp-orb[data-state="reading"] .sp-orb__ring + .sp-orb__ring { animation-delay: 1.3s; }
.sp-orb[data-state="hearing"] .sp-orb__halo { opacity: 0.24; animation: sp-voice 2s ease-in-out infinite; }
.sp-orb[data-state="got"] .sp-orb__icon--tick { display: flex; }
.sp-orb[data-state="paused"] .sp-orb__halo, .sp-orb[data-state="paused"] .sp-orb__core { opacity: 0; }
.sp-orb[data-state="paused"] .sp-orb__icon--paused { display: flex; inset: 12%; border: 2px solid var(--sp-outline); background: var(--sp-bg); color: var(--sp-text-muted); }

.sp-orb--hero { width: 132px; height: 132px; }
.sp-orb--hero .sp-orb__halo { background: var(--sp-hero-halo); opacity: 0.14; animation: sp-breathe 5s ease-in-out infinite; }
.sp-orb--hero .sp-orb__core { inset: 23%; background: var(--sp-hero-core); box-shadow: var(--sp-hero-glow); animation: sp-core 5s ease-in-out infinite; }

@keyframes sp-breathe { 0%, 100% { transform: scale(0.8); opacity: 0.1; } 50% { transform: scale(1.04); opacity: 0.26; } }
@keyframes sp-core { 0%, 100% { transform: scale(0.95); } 50% { transform: scale(1.04); } }
@keyframes sp-ripple { 0% { transform: scale(0.55); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes sp-voice { 0%, 100% { transform: scale(0.86); } 18% { transform: scale(1.08); } 36% { transform: scale(0.95); } 54% { transform: scale(1.14); } 72% { transform: scale(1); } 88% { transform: scale(1.07); } }

/* People who ask their phone to reduce motion get a still orb; the words still change. */
@media (prefers-reduced-motion: reduce) {
  .sp-orb__halo, .sp-orb__ring, .sp-orb__core { animation: none !important; }
}

/* ---------- Buttons ---------- */
.sp-button { min-height: 58px; width: 100%; padding: 0 24px; border: 0; border-radius: 29px; background: var(--sp-button); box-shadow: var(--sp-shadow-button); color: var(--sp-on-button); font-size: 1.125rem; font-weight: 600; }
.sp-button--round { width: 50px; height: 50px; min-height: 0; flex-shrink: 0; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sp-button--round svg { width: 20px; height: 20px; }
.sp-button--outline { min-height: 44px; width: auto; padding: 0 16px; border: 1.5px solid var(--sp-accent); border-radius: 22px; background: transparent; box-shadow: none; color: var(--sp-accent); font-size: 1rem; }
.sp-support { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 0; border-radius: 22px; background: var(--sp-support); box-shadow: var(--sp-shadow-support); color: var(--sp-on-support); font-size: 1rem; font-weight: 600; text-decoration: none; }
.sp-support svg { width: 16px; height: 16px; }

/* ---------- Cards and input ---------- */
.sp-card { margin: 14px 18px 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--sp-sheet-edge); border-radius: var(--sp-radius-card); background: var(--sp-surface); box-shadow: var(--sp-shadow-answer); }
.sp-card--raised { margin-top: -48px; position: relative; padding: 20px 20px 18px; gap: 18px; box-shadow: var(--sp-shadow-card); }
.sp-card__text { margin: 0; font-size: 1.125rem; line-height: 1.55; }
.sp-player { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--sp-hairline); }
.sp-player__text { flex-grow: 1; min-width: 0; }
.sp-label { padding-left: 4px; color: var(--sp-accent); font-size: 1rem; font-weight: 600; }
.sp-field { display: flex; align-items: center; gap: 8px; }
.sp-input { flex-grow: 1; min-width: 0; min-height: 50px; padding: 0 18px; border: 1.5px solid var(--sp-outline); border-radius: 25px; background: var(--sp-field); color: var(--sp-text); font-size: inherit; }
.sp-input::placeholder { color: var(--sp-text-muted); opacity: 1; }

/* ---------- Welcome ---------- */
.sp--welcome { position: relative; overflow: hidden; background: var(--sp-welcome); color: var(--sp-on-band); }
.sp--welcome > .sp-brand { position: relative; padding: 28px 22px 0; }
.sp-hero { position: relative; flex-grow: 1; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.sp-welcome-sheet { position: relative; padding: 28px 24px max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; border-top: 1px solid var(--sp-sheet-edge); border-radius: var(--sp-radius-welcome) var(--sp-radius-welcome) 0 0; background: var(--sp-bg); box-shadow: var(--sp-shadow-welcome-sheet); color: var(--sp-text); }
.sp-welcome-sheet__title { margin: 0; font-family: var(--sp-font-display); font-size: 1.875rem; font-weight: 500; line-height: 1.18; color: var(--sp-heading); }
.sp-welcome-sheet .sp-footer { padding-top: 10px; border-top: 1px solid var(--sp-hairline); }
.sp-ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 1.125rem; line-height: 1.3; }
.sp-ticks li { display: flex; align-items: center; gap: 12px; }
.sp-ticks li::before { content: ''; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--sp-badge) center / 14px 14px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324402F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  .sp-welcome-sheet { background: var(--sp-surface); }
  .sp-ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8C8AE' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
}