/* Toerdle site — Kreide und Eisen, shared by every page.
 *
 * The app's look on the web: a concrete floor, chalk cards, ink text, system type in compressed
 * and condensed widths, and color only where it measures something. Every value below is a role
 * from design/palette.md (light by default, dark under [data-theme="dark"] from the menu switch); pages use the roles,
 * never a raw color. Motion mirrors ToerdlePremium.Iron. Same-origin only: the CSP allows no
 * external hosts, and the fonts are the visitor's own system fonts.
 */

:root {
  color-scheme: light;

  /* Kreide und Eisen */
  --iron-floor: #EBEBE7;
  --iron-chalk: #FFFFFF;
  --iron-ink: #0D0D0D;
  --iron-action-ink: #FFFFFF;
  --iron-muted: #5A5A55;
  --iron-line: #CFCFC9;
  --iron-plate-red: #D1202F;
  --iron-plate-blue: #1F56C4;
  --iron-plate-yellow: #F0B400;
  --iron-plate-green: #1E8C45;
  --iron-plate-white: #FAFAF7;
  --iron-steel: #9C9C97;
  --iron-bar: #75756F;
  --iron-plate-edge: #0D0D0D;
  --iron-plate-print: #FFFFFF;
  --iron-stack-plate: #C4C4BE;
  --iron-dust: #9E9E98;
  --iron-you: #1F56C4;
  --iron-week-quest: #1E8C45;
  --iron-month: #F0B400;
  --iron-print: #FFFFFF;
  --iron-print-month: #0D0D0D;
  --iron-code-ink: #0D0D0D;
  --iron-code-paper: #FFFFFF;

  /* The bottom menu, used for the top navigation pill */
  --nav-bar: #FFFFFF;
  --nav-plate: #EBEBEB;

  /* Macros */
  --macro-protein: #0A5FFF;
  --macro-carbs: #40C96A;
  --macro-fat: #FFA70A;

  /* Metrics */
  --metric-calories: #E9650C;
  --metric-steps: #1976D2;
  --metric-water: #008C85;
  --metric-training: #D72664;
  --metric-burnt: #D83C2D;
  --metric-sleep: #863BD9;

  --warning-mark: #A86A00;

  /* Type: SF Pro on Apple platforms (font-stretch drives its width axis), condensed system
   * faces elsewhere. Compressed = wdth 47 + Black (1000), condensed = wdth 60 + Heavy (870). */
  --font-narrow: -apple-system, BlinkMacSystemFont, Bahnschrift, "Roboto Condensed", sans-serif-condensed, "Arial Narrow", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Corners (design-language section 9) */
  --r-chip: 14px;
  --r-card: 16px;
  --r-button: 18px;
  --r-hero: 20px;
  --r-sheet: 28px;

  --gutter: 16px;
  --shell: 1200px;
  --section: clamp(88px, 11vw, 152px);

  /* Motion: ToerdlePremium.Iron. Springs as linear() from response and damping. */
  --ease-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-value: cubic-bezier(0.25, 0.9, 0.3, 1);
  --ease-fall: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-scene: linear(0, 0.042, 0.14, 0.261, 0.386, 0.504, 0.608, 0.697, 0.771, 0.83, 0.876, 0.911, 0.938, 0.958, 0.973, 0.983, 0.99, 0.995, 0.998, 1);
  --ease-plate: linear(0, 0.088, 0.285, 0.51, 0.716, 0.877, 0.988, 1.052, 1.08, 1.082, 1.071, 1.053, 1.034, 1.018, 1.006, 0.999, 0.994, 0.993, 0.993, 0.995, 0.996, 0.998, 0.999, 1);
  --ease-pin: linear(0, 0.066, 0.215, 0.393, 0.565, 0.715, 0.833, 0.919, 0.978, 1.013, 1.032, 1.038, 1.037, 1.032, 1.026, 1.019, 1.013, 1.008, 1.004, 1.001, 1);
  --dur-scene: 550ms;
  --dur-value: 220ms;
  --dur-plate: 600ms;
  --dur-press: 120ms;
  --dur-fall: 420ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --iron-floor: #0E0E0E;
  --iron-chalk: #1C1C1C;
  --iron-ink: #F6F6F2;
  --iron-action-ink: #0D0D0D;
  --iron-muted: #A5A59F;
  --iron-line: #343434;
  --iron-plate-red: #E8414D;
  --iron-plate-blue: #4B7CE6;
  --iron-plate-yellow: #F5C531;
  --iron-plate-green: #36AE62;
  --iron-plate-white: #E9E9E4;
  --iron-steel: #8C8C87;
  --iron-bar: #B3B3AD;
  --iron-stack-plate: #3A3A38;
  --iron-dust: #F6F6F2;
  --iron-you: #4B7CE6;
  --iron-week-quest: #36AE62;
  --iron-month: #F5C531;
  --iron-print: #0D0D0D;

  --nav-bar: #000000;
  --nav-plate: #262626;

  --macro-protein: #6B9EFF;
  --macro-carbs: #5CD180;
  --macro-fat: #FFBD47;

  --metric-calories: #FF7A1F;
  --metric-steps: #1F8CFA;
  --metric-water: #1AC7B8;
  --metric-training: #FA477A;
  --metric-burnt: #FF4C3D;
  --metric-sleep: #9E47FA;

  --warning-mark: #FFFF00;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--iron-floor);
  color: var(--iron-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
::selection { background: var(--iron-ink); color: var(--iron-action-ink); }
:focus-visible { outline: 2px solid var(--iron-ink); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 300;
  padding: 12px 16px; border-radius: var(--r-chip);
  background: var(--iron-ink); color: var(--iron-action-ink);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 16px; }

.shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; }
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* ---------- Type ---------- */
.t-compressed, .display, .h-section, .figure {
  font-family: var(--font-narrow);
  font-weight: 1000;
  font-stretch: 47%;
  letter-spacing: 0;
  line-height: 0.92;
  text-wrap: balance;
}
.display { font-size: clamp(48px, 11vw, 112px); line-height: 0.92; }
.h-section { font-size: clamp(36px, 5.6vw, 64px); line-height: 0.98; }
.h-sub {
  font-family: var(--font-narrow);
  font-weight: 870; font-stretch: 60%;
  font-size: clamp(22px, 2.4vw, 26px); line-height: 1.1;
}
.label {
  font-family: var(--font-narrow);
  font-weight: 760; font-stretch: 60%;
  font-size: 20px; line-height: 1.15;
}
/* Section label: footnote heavy, capitals, tracking 0.8, muted */
.eyebrow {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 860; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--iron-muted);
}
.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--iron-muted); max-width: 40em; }
.muted { color: var(--iron-muted); }
.figure { font-size: 92px; font-variant-numeric: tabular-nums; line-height: 0.9; }
.figure--second { font-size: 56px; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  --h: 64px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 26px;
  border-radius: var(--r-button);
  border: 1px solid transparent;
  font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%;
  font-size: 22px; line-height: 1; letter-spacing: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-press) ease-out, opacity var(--dur-press) ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.btn:active { transform: scale(0.96); opacity: 0.85; }
.btn--ink { background: var(--iron-ink); color: var(--iron-action-ink); }
.btn--chalk { background: var(--iron-chalk); color: var(--iron-ink); border-color: var(--iron-line); }
.btn--sm { --h: 44px; padding: 0 16px; font-size: 18px; border-radius: var(--r-chip); }
.btn--block { width: 100%; }
@media (hover: hover) {
  .btn--ink:hover { opacity: 0.9; }
  .btn--chalk:hover { border-color: var(--iron-ink); }
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border-radius: var(--r-chip);
  background: var(--iron-chalk); color: var(--iron-ink);
  border: 1px solid var(--iron-line);
  font-family: var(--font-narrow); font-weight: 760; font-stretch: 60%; font-size: 19px; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-value) var(--ease-value), color var(--dur-value) var(--ease-value),
              border-color var(--dur-value) var(--ease-value), transform var(--dur-press) ease-out;
  -webkit-tap-highlight-color: transparent;
}
.chip:active { transform: scale(0.96); opacity: 0.85; }
.chip.is-on, .chip[aria-selected="true"], .chip[aria-pressed="true"] {
  background: var(--iron-ink); color: var(--iron-action-ink); border-color: var(--iron-ink);
}
.chip svg { width: 22px; height: 22px; fill: currentColor; flex: none; }

/* ---------- Surfaces ---------- */
.card {
  background: var(--iron-chalk);
  border-radius: var(--r-card);
  padding: 22px;
}
.card--line { border: 1px solid var(--iron-line); }
.card--hero { border-radius: var(--r-hero); padding: clamp(22px, 3vw, 36px); }
.card--dashed { background: transparent; border: 1.5px dashed var(--iron-line); }
.ink-block { background: var(--iron-ink); color: var(--iron-action-ink); border-radius: var(--r-hero); }
.ink-block .muted, .ink-block .eyebrow { color: var(--iron-action-ink); opacity: 0.72; }

/* Day cell: Workouts' strip */
.day {
  display: grid; place-items: center; gap: 2px;
  min-height: 56px; padding: 6px 0;
  border-radius: var(--r-chip);
  background: var(--iron-chalk); border: 1px solid var(--iron-line);
  font-family: var(--font-narrow); font-stretch: 60%; line-height: 1;
}
.day small { font-size: 12px; font-weight: 760; color: var(--iron-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.day b { font-size: 20px; font-weight: 870; font-variant-numeric: tabular-nums; }
.day.is-today { border: 2px solid var(--iron-ink); }
.day.is-on { background: var(--iron-ink); color: var(--iron-action-ink); border-color: var(--iron-ink); }
.day.is-on small { color: var(--iron-action-ink); opacity: 0.7; }

/* Macro strip: one bar split by share of the kcal */
.macro-strip { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; }
.macro-strip i { display: block; height: 100%; }
.macro-strip .p { background: var(--macro-protein); }
.macro-strip .c { background: var(--macro-carbs); }
.macro-strip .f { background: var(--macro-fat); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot--protein { background: var(--macro-protein); }
.dot--carbs { background: var(--macro-carbs); }
.dot--fat { background: var(--macro-fat); }

/* ---------- Bullets ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.2em;
  width: 18px; height: 18px; border-radius: 6px; background: var(--iron-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='6'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.ticks li::after {
  content: ""; position: absolute; left: 5px; top: calc(0.2em + 4px);
  width: 8px; height: 5px; border-left: 2px solid var(--iron-action-ink); border-bottom: 2px solid var(--iron-action-ink);
  transform: rotate(-45deg) translate(-1px, 2px);
}

/* ---------- Nav: the app's bottom menu as a top pill ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  padding: 12px var(--gutter) 0;
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  max-width: var(--shell); margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 8px 8px 14px;
  background: var(--nav-bar);
  border: 1px solid var(--iron-line);
  border-radius: 22px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand span { font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%; font-size: 30px; line-height: 1; }
.nav__links { display: none; align-items: center; gap: 2px; }
.nav__links a {
  padding: 10px 14px; border-radius: var(--r-chip);
  color: var(--iron-muted); text-decoration: none;
  font-family: var(--font-narrow); font-weight: 760; font-stretch: 60%; font-size: 18px; line-height: 1;
  transition: background-color var(--dur-value) var(--ease-value), color var(--dur-value) var(--ease-value);
}
.nav__links a:hover { color: var(--iron-ink); }
.nav__links a.is-here, .nav__links a[aria-current="page"] { background: var(--nav-plate); color: var(--iron-ink); }
.nav__menu {
  display: inline-grid; place-content: center; gap: 5px;
  width: 44px; height: 44px; border-radius: var(--r-chip);
  background: var(--iron-chalk); border: 1px solid var(--iron-line); color: var(--iron-ink);
  cursor: pointer; padding: 0;
}
.nav__menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-value) var(--ease-value); }
.nav__menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav__mobile {
  pointer-events: auto;
  max-width: var(--shell); margin: 8px auto 0;
  display: grid; gap: 8px; padding: 8px;
  background: var(--nav-bar); border: 1px solid var(--iron-line); border-radius: 22px;
}
.nav__mobile a {
  display: flex; align-items: center; min-height: 52px; padding: 0 16px;
  border-radius: var(--r-card); background: var(--iron-chalk);
  font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 22px; text-decoration: none;
}
[data-theme="dark"] .nav__mobile a { background: var(--iron-chalk); }

/* Light/dark switch: an icon button in the pill on wide screens, a switch row in the phone menu */
.theme-btn {
  display: none; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-chip);
  background: transparent; color: var(--iron-muted); cursor: pointer;
  transition: background-color var(--dur-value) var(--ease-value), color var(--dur-value) var(--ease-value);
}
.theme-btn:hover { color: var(--iron-ink); background: var(--nav-plate); }
.theme-btn svg { width: 22px; height: 22px; }
.theme-btn .i-sun, [data-theme="dark"] .theme-btn .i-moon { display: none; }
[data-theme="dark"] .theme-btn .i-sun { display: block; }
.nav__pill--solo .theme-btn { display: inline-grid; }
.theme-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 52px; padding: 0 12px 0 16px; border: 0;
  border-radius: var(--r-card); background: var(--iron-chalk); color: var(--iron-ink);
  font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 22px; text-align: left;
  cursor: pointer;
}
.theme-row__track {
  position: relative; flex: none; width: 52px; height: 32px; border-radius: 16px;
  background: var(--iron-line);
  transition: background-color var(--dur-value) var(--ease-value);
}
.theme-row__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--iron-chalk);
  transition: transform var(--dur-value) var(--ease-value), background-color var(--dur-value) var(--ease-value);
}
.theme-row[aria-checked="true"] .theme-row__track { background: var(--iron-ink); }
.theme-row[aria-checked="true"] .theme-row__track::after { transform: translateX(20px); background: var(--iron-action-ink); }
.nav__cta-short { display: inline; }
.nav__cta-long { display: none; }
@media (min-width: 960px) {
  .theme-btn { display: inline-grid; }
  .nav__links { display: flex; }
  .nav__menu { display: none; }
  .nav__mobile { display: none !important; }
  .nav__cta-short { display: none; }
  .nav__cta-long { display: inline; }
}

/* ---------- Footer ---------- */
.footer { padding: clamp(64px, 9vw, 120px) 0 40px; }
.footer__top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-bottom: 40px; border-bottom: 1px solid var(--iron-line);
}
.footer__big { font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%; font-size: clamp(44px, 8vw, 88px); line-height: 0.92; }
.footer__grid { display: grid; gap: 32px; padding: 40px 0; grid-template-columns: 1fr; }
.footer__brand p { margin-top: 14px; color: var(--iron-muted); max-width: 34em; font-size: 15px; }
.footer__links { display: grid; gap: 10px; align-content: start; }
.footer__links strong { font-size: 13px; font-weight: 860; text-transform: uppercase; letter-spacing: 0.8px; color: var(--iron-muted); margin-bottom: 4px; }
.footer__links a { text-decoration: none; font-size: 16px; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--iron-line); color: var(--iron-muted); font-size: 14px; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }

/* ---------- Reveal (driven by JS; without JS everything shows) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--ease-enter), transform 500ms var(--ease-enter);
  transition-delay: var(--delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; }
  .js .reveal.is-in { transition: opacity 240ms linear; transition-delay: 0ms; }
  .btn:active, .chip:active { transform: none; }
}