/* ===========================================================================
   Tiao landing page
   Plain CSS. No build step, no external fonts, no CDNs.
   Theme tokens come from the app's Default palette
   (app/src/main/java/fyi/jachowski/tiao/ui/theme/ThemePalette.kt), so the site
   matches the app. Text pairs below are chosen for WCAG AA (>= 4.5:1).
   =========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, p, ul, ol, figure { margin: 0; }

ul, ol { padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Theme tokens --------------------------------------------------------
   Light is the default set on :root. Dark arrives from exactly one of two
   places: the system preference (a visitor who has not chosen) or an explicit
   data-theme="dark" (a stored choice). A stored data-theme="light" excludes the
   system-dark branch, so the :root light values apply. With no stored choice,
   main.js deliberately leaves data-theme off, so the media query keeps driving
   and the page follows the OS live. */
:root {
  color-scheme: light;

  --bg: #FFFBFE;
  --bg-alt: #F4EFF4;
  --surface: #FFFFFF;
  --surface-2: #F2EDF3;
  --text: #1C1B1F;
  --text-muted: #49454F;
  --border: #DAD3DE;
  --primary: #0E7C86;
  --on-primary: #FFFFFF;
  --primary-soft: #DDF3F4;
  --chip-ink: #0A5C63;
  --secondary: #FFC857;
  --tertiary: #7D5260;
  --focus: #0E7C86;
  --shadow: 0 1px 2px rgba(28, 27, 31, .10), 0 10px 30px rgba(28, 27, 31, .08);

  /* phone mockup */
  --phone-frame: #1C1B1F;
  --phone-bg: #FFFFFF;
  --phone-card: #F1ECF2;
  --phone-on: #1C1B1F;
  --phone-muted: #5A5560;
  --phone-accent: #0E7C86;
  --phone-bar: #E7E0EC;

  /* brand mark */
  --brand-bg: #0E7C86;
  --brand-sun: #FFC857;
  --brand-line: #FFFBFE;

  --wrap: 1120px;
  --radius: 18px;
  --radius-sm: 12px;
}

/* --- Dark theme: system default ------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #1C1B1F;
    --bg-alt: #171618;
    --surface: #242327;
    --surface-2: #2C2B30;
    --text: #E6E1E5;
    --text-muted: #CAC4D0;
    --border: #49454F;
    --primary: #6FD3DC;
    --on-primary: #00363B;
    --primary-soft: #10383D;
    --chip-ink: #6FD3DC;
    --secondary: #FFC857;
    --tertiary: #EFB8C8;
    --focus: #6FD3DC;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 34px rgba(0, 0, 0, .45);

    --phone-frame: #0B0A0C;
    --phone-bg: #121114;
    --phone-card: #2A292E;
    --phone-on: #E6E1E5;
    --phone-muted: #B7B1BC;
    --phone-accent: #6FD3DC;
    --phone-bar: #313035;

    --brand-bg: #6FD3DC;
    --brand-sun: #FFC857;
    --brand-line: #1C1B1F;
  }
}

/* --- Explicit choice: forced dark (forced light is just the :root default) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1C1B1F;
  --bg-alt: #171618;
  --surface: #242327;
  --surface-2: #2C2B30;
  --text: #E6E1E5;
  --text-muted: #CAC4D0;
  --border: #49454F;
  --primary: #6FD3DC;
  --on-primary: #00363B;
  --primary-soft: #10383D;
  --chip-ink: #6FD3DC;
  --secondary: #FFC857;
  --tertiary: #EFB8C8;
  --focus: #6FD3DC;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 34px rgba(0, 0, 0, .45);
  --phone-frame: #0B0A0C;
  --phone-bg: #121114;
  --phone-card: #2A292E;
  --phone-on: #E6E1E5;
  --phone-muted: #B7B1BC;
  --phone-accent: #6FD3DC;
  --phone-bar: #313035;
  --brand-bg: #6FD3DC;
  --brand-sun: #FFC857;
  --brand-line: #1C1B1F;
}

/* --- Base ---------------------------------------------------------------- */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Noto Sans Thai", sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.1rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 0 0 10px 10px;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg); /* fallback for engines without color-mix() */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  padding: 0.5rem 0.25rem;
  margin-left: -0.25rem;
}
.brand__name { font-size: 1.15rem; letter-spacing: -0.02em; }
.brand__thai { color: var(--text-muted); font-weight: 500; font-size: 0.95rem; }
.brand__mark { border-radius: 8px; }

.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; gap: 0.25rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); }

.theme-toggle {
  /* Hidden until main.js runs (the inline head script adds .js) so a
     JavaScript-off visitor never sees an inert control. */
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  flex: none;
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle__icon { grid-area: 1 / 1; }
/* Show only the icon for the mode you can switch TO. Light (the :root default)
   shows the moon; any dark context shows the sun. */
.theme-toggle__icon--sun { display: none; }
.theme-toggle__icon--moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle__icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
}

.eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chip-ink);
  background: var(--primary-soft);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}

.hero h1 {
  font-size: clamp(1.9rem, 1.3rem + 3.2vw, 3.15rem);
  font-weight: 800;
  max-width: 20ch;
}

.hero__lede {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--text-muted);
  max-width: 52ch;
}

.download { margin-top: 1.8rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border);
}
.btn[aria-disabled="false"]:hover { filter: brightness(1.06); }

.hero__note {
  margin-top: 0.8rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 46ch;
}

/* --- Phone mockup -------------------------------------------------------- */
.hero__art { display: flex; justify-content: center; }
.phone {
  width: min(280px, 78vw);
  border-radius: 38px;
  padding: 10px;
  background: var(--phone-frame);
  box-shadow: var(--shadow);
}
.phone__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}
.mock-title { font: 700 22px system-ui, sans-serif; }
.mock-label { font: 500 12px system-ui, sans-serif; }
.mock-amount { font: 800 34px system-ui, sans-serif; }
.mock-amount-sm { font: 700 15px system-ui, sans-serif; }
.mock-row { font: 600 15px system-ui, sans-serif; }

/* Theme colours for the mockup/logo SVGs via CSS classes. Keeping them here
   (rather than fill="var(--…)"/stroke="var(--…)" presentation attributes)
   because var() in presentation attributes is not reliable across browsers. */
.phone-fill-bg { fill: var(--phone-bg); }
.phone-fill-card { fill: var(--phone-card); }
.phone-fill-on { fill: var(--phone-on); }
.phone-fill-muted { fill: var(--phone-muted); }
.phone-fill-accent { fill: var(--phone-accent); }
.phone-fill-bar { fill: var(--phone-bar); }
.phone-stroke-accent { stroke: var(--phone-accent); }
.brand-fill-bg { fill: var(--brand-bg); }
.brand-fill-sun { fill: var(--brand-sun); }
.brand-stroke-line { stroke: var(--brand-line); }

/* --- Sections ------------------------------------------------------------ */
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--alt { background: var(--bg-alt); }

.section h2 { margin-bottom: 0.6rem; }
.section__lede {
  color: var(--text-muted);
  max-width: 60ch;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* --- Feature cards ------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--chip-ink);
  margin-bottom: 0.9rem;
}
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--text-muted); }

.tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chip-ink);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

/* --- Theme swatches ------------------------------------------------------ */
.swatches {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 560px) { .swatches { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .swatches { grid-template-columns: repeat(4, 1fr); } }

.swatch {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem;
}
.swatch__dots { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
.swatch__dots span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border);
}
.swatch h3 { margin-bottom: 0.25rem; }
.swatch p { color: var(--text-muted); font-size: 0.95rem; }

/* --- Steps --------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  counter-reset: step;
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
  margin-bottom: 0.8rem;
}
.step h3 { margin-bottom: 0.35rem; }
.step p { color: var(--text-muted); }

/* --- Download ------------------------------------------------------------ */
.download-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  box-shadow: var(--shadow);
  max-width: 760px;
}

.download-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}
.download-card__btn { flex: none; /* Tall enough for the enabled label to wrap to two lines at 320px, so the button height (and the layout below it) is the same before and after the details load. */ min-height: 3.8rem; }
.download-card__icon { flex: none; }
.download-card__hint {
  color: var(--text-muted);
  font-size: 0.95rem;
  min-height: 1.5em;
  margin: 0;
}

.download-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.5rem;
  margin: 1.2rem 0 0;
}
@media (min-width: 560px) {
  .download-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.download-meta__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem;
}
.download-meta dt {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.download-meta dd { margin: 0; font-weight: 600; text-align: right; }

.download-hash { display: grid; gap: 0.5rem; margin-top: 1.2rem; }
.download-hash__label {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.download-hash__value {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  /* Reserve room for the loaded hash so filling it in does not move the copy
     button; narrow screens wrap the 64 hex characters over more lines. */
  min-height: 2.6rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  color: var(--text);
}
@media (max-width: 480px) {
  .download-hash__value { min-height: 5.4rem; }
}
.download-hash__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.download-hash__status { color: var(--text-muted); font-size: 0.9rem; min-height: 1.2em; }

.btn--small {
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--small:hover:not(:disabled) { background: var(--surface); }
.btn--small:disabled { cursor: not-allowed; color: var(--text-muted); }

.download-steps { margin-top: 1.4rem; }
.download-steps summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.5rem 0;
}
.download-steps ol {
  list-style: decimal;
  padding-left: 1.3rem;
  margin-top: 0.6rem;
  display: grid;
  gap: 0.5rem;
}
.download-steps li { color: var(--text-muted); }
.download-steps code,
.download-noscript code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.download-noscript { margin-top: 1rem; color: var(--text-muted); max-width: 60ch; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: clamp(2rem, 5vw, 3rem) 0;
  background: var(--bg-alt);
}
.site-footer__inner { display: grid; gap: 0.9rem; max-width: 70ch; }
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}
.site-footer__note { color: var(--text-muted); font-size: 0.95rem; }
.site-footer__meta { color: var(--text-muted); font-size: 0.85rem; }

/* --- Narrow phones (320px) ----------------------------------------------- */
@media (max-width: 600px) {
  /* Header wraps to two rows: brand + toggle, then the nav underneath, so the
     nav never pushes the page wider than the viewport. */
  .site-header__inner { flex-wrap: wrap; row-gap: 0; padding-block: 0.35rem; }
  .brand { margin-inline-end: auto; }
  .site-nav { order: 3; width: 100%; margin-inline-start: 0; }
  .site-nav ul { justify-content: flex-start; }
  .theme-toggle { margin-inline-start: auto; }
}

@media (max-width: 380px) {
  .brand__thai { display: none; }
  .site-nav a { padding: 0 0.6rem; }
  .phone { width: min(260px, 82vw); }
}