/*
 * TraceCalorie website (TM-161) — NOT IN DESIGN. The prototype has no website; these pages are built only
 * from its Nocturne + «Hoja» pieces (design/TraceMeal v2.dc.html):
 *   - palette «Hoja», dark and light: palette() lines 962–966, switched with prefers-color-scheme;
 *   - page ground: the onboarding glow, radial sectionGlow at 85% 0% fading at 70 % (line 405);
 *   - kicker 11 px uppercase .1em accentText and title weight 500 (lines 25–29);
 *   - links accentText, hover pressed (line 17);
 *   - Nocturne: Inter 400/500 only, h1 letter-spacing −0.015em, radius-lg 14 px cards, radius-md 8 px
 *     outline buttons (.btn-primary), .tag-outline, fading .hr rules, focus ring 2 px accent;
 *   - landing (TM-154): numbered steps = the 22 px accent-ring numbers of «Cómo probarlo» (lines 32–34).
 * One stylesheet, no inline styles and no scripts: the CSP is `style-src 'self'`, `script-src 'none'`.
 *
 * Inter is SUBSET to the site's Latin text (web/scripts/fonts.mjs, TM-154 AC 4: < 150 KB per page); the
 * `unicode-range` below is the script's SUBSET_RANGES, so any other character uses the system font.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+20-7E, U+A0-FF, U+152-153, U+2009-200A, U+2010-2027, U+202F, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+2248, U+2264-2265;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500.woff2') format('woff2');
  unicode-range: U+20-7E, U+A0-FF, U+152-153, U+2009-200A, U+2010-2027, U+202F, U+2030, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+2248, U+2264-2265;
}

/* «Hoja» light — palette('Claro'), line 964. */
:root {
  color-scheme: light dark;
  --bg: #eff4f0;
  --surface: #fafcfa;
  --surface2: #e2e8e3;
  --line: #cfd4cf;
  --text: #222623;
  --textSoft: #393f3a;
  --muted: #565d57;
  --accent: #2e7d31;
  --accentText: #2e7d31;
  --pressed: #0f6518;
  --sectionGlow: #d3f2d2;
  --radius-md: 8px;
  --radius-lg: 14px;
}

/* «Hoja» dark — palette('Oscuro'), line 965. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131914;
    --surface: #202521;
    --surface2: #2a2e2b;
    --line: #3a3e3b;
    --text: #e9ece9;
    --textSoft: #cfd6d0;
    --muted: #a5ada6;
    --accent: #81e081;
    --accentText: #b7edb5;
    --pressed: #95e994;
    --sectionGlow: #1d521f;
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  /* line 405: radial-gradient(500px 400px at 85% 0%, var(--tm-sectionGlow), transparent 70%), var(--tm-bg) */
  background:
    radial-gradient(500px 400px at 85% 0%, var(--sectionGlow), transparent 70%) no-repeat,
    var(--bg);
  color: var(--textSoft);
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--accentText);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--pressed);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

strong {
  font-weight: 500;
  color: var(--text);
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

/* ── header ── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 0 40px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

/* The mark of TM-153 (docs/BRAND.md): one colour, accent, with its 6 px glow at 45 % (line 85). */
.mark {
  width: 28px;
  height: 28px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent));
  flex: none;
}

/* Wordmark: Inter 500, −0.01em, «Trace» in accent, «Calorie» in text (docs/BRAND.md). */
.wordmark {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.wordmark-trace {
  color: var(--accent);
}

.lang-jump {
  display: flex;
  gap: 4px;
}

.lang-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  /* textSoft, not muted: these links sit on the glow, where dark muted falls to 4.0:1 (TM-154 AC 4). */
  color: var(--textSoft);
  font-size: 14px;
  text-decoration: none;
}

.lang-jump a:hover {
  color: var(--accentText);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ── type ── */

.kicker {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accentText);
}

h1,
h2,
h3 {
  font-weight: 500;
  color: var(--text);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h1 {
  margin: 0 0 12px;
  font-size: 40px;
}

h2 {
  margin: 40px 0 8px;
  font-size: 20px;
  letter-spacing: -0.01em;
}

h3 {
  margin: 28px 0 6px;
  font-size: 16px;
  letter-spacing: 0;
}

p,
ul,
ol {
  margin: 0 0 12px;
}

ul,
ol {
  padding-left: 22px;
}

li + li {
  margin-top: 6px;
}

/* A kicker sits directly on its title (prototype lines 25–28: 8 px gap). */
.kicker + h1,
.kicker + h2 {
  margin-top: 0;
}

.lead {
  font-size: 18px;
  color: var(--textSoft);
  max-width: 60ch;
}

.meta {
  font-size: 13px;
  color: var(--muted);
}

.note {
  font-size: 14px;
  color: var(--muted);
}

/* Nocturne .tag-outline: the interim badge of the legal pages («Borrador» / "Draft"). */
.tag {
  display: inline-flex;
  align-items: center;
  margin: 0 0 12px;
  padding: 3px 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accentText);
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ── language sections ── */

.lang-section {
  scroll-margin-top: 24px;
}

.shared-section > div + div {
  margin-top: 48px;
}

/* Nocturne .hr: rules fade to transparent at both ends. */
.hr {
  height: 1px;
  border: 0;
  margin: 56px 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--line) 48px,
    var(--line) calc(100% - 48px),
    transparent
  );
}

/* ── cards, buttons, lists ── */

.card {
  margin: 16px 0;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.card > :last-child {
  margin-bottom: 0;
}

/* Nocturne .btn.btn-primary: outline in accent, no fill. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  color: var(--accentText);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.btn:hover {
  color: var(--accentText);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.btn:active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.link-list li + li {
  margin-top: 8px;
}

.link-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.link-list a:hover {
  background: var(--surface2);
  color: var(--text);
}

.link-list .link-hint {
  color: var(--muted);
  font-size: 14px;
}

.steps li::marker {
  color: var(--accentText);
}

/* FAQ: <details> needs no script. */
.faq {
  margin: 8px 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.faq summary {
  cursor: pointer;
  padding: 14px 18px;
  color: var(--text);
  font-weight: 500;
  list-style-position: inside;
}

.faq summary::marker {
  color: var(--accentText);
}

.faq[open] summary {
  padding-bottom: 6px;
}

.faq > :not(summary) {
  margin: 0;
  padding: 0 18px 16px;
}

/* ── landing (TM-154) ── */

.hero {
  padding-bottom: 8px;
}

/* Store badge slots: outline placeholders until the listings exist (docs/web.md § Store badges). When a
   listing is live its <li> holds the store's official badge as a link (.store-link). */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.store-badges li + li {
  margin-top: 0;
}

.store-badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  line-height: 1.25;
}

.store-badge-kicker {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.store-badge-name {
  color: var(--text);
  font-weight: 500;
}

.store-link {
  display: inline-flex;
  border-radius: var(--radius-md);
}

.store-link img {
  display: block;
  height: 48px;
  width: auto;
}

/* Screenshot slot (TM-155 images, docs/web.md § Screenshots): a row that scrolls sideways on phones. */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 200px);
  gap: 12px;
  overflow-x: auto;
  list-style: none;
  padding: 0 0 8px;
  margin: 32px 0 0;
}

.shots li + li {
  margin-top: 0;
}

.shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.block {
  margin-top: 56px;
}

.block > .kicker {
  margin-top: 0;
}

.block > h2 {
  margin-top: 0;
  font-size: 28px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 20px 0 0;
}

.grid > .card {
  margin: 0;
}

/* Three statements read better as one column than as a 2 + 1 grid. */
.grid.stack {
  grid-template-columns: 1fr;
}

.card h3 {
  margin: 0 0 6px;
}

/* The Premium card: accent outline, as Nocturne's outline buttons. */
.card-accent {
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Prototype «Cómo probarlo» (lines 32–34): 22 px numbers in a 1 px accent ring, 12 px gap. */
.numbered {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

.numbered li {
  counter-increment: step;
  display: flex;
  gap: 12px;
}

.numbered li + li {
  margin-top: 10px;
}

.numbered li::before {
  content: counter(step);
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--accentText);
  font-size: 12px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

.check-list li {
  position: relative;
  padding-left: 22px;
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--accent);
}

/* ── footer ── */

.site-footer {
  margin-top: 72px;
  font-size: 13px;
  color: var(--muted);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 12px;
}

.site-footer a {
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--accentText);
}

@media (max-width: 480px) {
  .page {
    padding: 16px 16px 48px;
  }

  .site-header {
    padding-bottom: 28px;
  }

  h1 {
    font-size: 28px;
  }

  .block > h2 {
    font-size: 22px;
  }

  .lead {
    font-size: 16px;
  }

  .link-list a {
    flex-direction: column;
    gap: 2px;
  }
}

/* A list inside an FAQ answer keeps its markers inside the card. */
.faq > ul {
  padding-left: 40px;
}

/* Inside a card the list sits under its h3, with room before the note. */
.card .check-list {
  margin: 8px 0 12px;
}