/* ─────────────────────────────────────────────────────────────
   Anvil Training Club
   Dark-first, three colours, hard edges. FUNCTION FIRST.
   Every value comes from the brand spec; nothing is hard-coded
   in a component.
   ───────────────────────────────────────────────────────────── */
:root {
  --black: #000000;
  --white: #FFFFFF;
  --grey:  #808080;

  --error:   #E5484D;
  --warning: #D9A038;
  --success: #3FB27F;

  --font-display: "Bebas Neue", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 2px;
  --r-md: 4px;

  --s-xs: 4px;  --s-sm: 8px;  --s-md: 16px;
  --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px; --s-3xl: 64px;

  --line: #2A2A2A;          /* a hairline that reads on black without
                               becoming a fourth brand colour */

  /* On a white card the palette has to invert. These are black at reduced
     opacity rather than new greys, so the three-colour rule holds: the spec
     allows white surfaces but forbids extra shades. */
  --line-ink:  rgba(0, 0, 0, .15);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 84px;            /* room for the fixed nav */
}

/* ── type ─────────────────────────────────────────────────── */
h1, h2, h3, .display, .metric {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0;
}
h1 { font-size: 34px; line-height: 1.02; }
h2 { font-size: 24px; line-height: 1.06; }
h3 { font-size: 19px; line-height: 1.1; }
.metric { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }

p { margin: 0 0 var(--s-md); }
.body { font-size: 15px; }
.muted { color: var(--grey); }
.label {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grey);
}
a { color: var(--white); }

/* ── shell ────────────────────────────────────────────────── */
.wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--s-md); }

header.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-md); padding: var(--s-md) 0 var(--s-sm);
  border-bottom: 1px solid var(--line);
}
.mark {
  font-family: var(--font-display); font-size: 22px; letter-spacing: .06em;
  text-decoration: none; color: var(--white);
}
.mark span { color: var(--grey); }

/* ── the week strip ───────────────────────────────────────── */
.weekbar { padding: var(--s-md) 0 var(--s-sm); }
.weekbar-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-sm);
}
.weekbar-head .today { font-size: 14px; color: var(--grey); }
.days { display: flex; align-items: stretch; gap: var(--s-xs); }
.days .arrow {
  flex: 0 0 28px; display: flex; align-items: center; justify-content: center;
  color: var(--grey); text-decoration: none; font-size: 20px; line-height: 1;
  border: 0; background: none;
}
.days .arrow:hover { color: var(--white); }
.day {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: var(--s-sm) 0; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-md);
  min-height: 56px; justify-content: center;
}
.day .dow {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--grey);
}
.day .dnum {
  font-family: var(--font-display); font-size: 22px; line-height: 1;
  color: var(--white); font-variant-numeric: tabular-nums;
}
.day.is-on { border-color: var(--white); }
.day.is-today .dow { color: var(--white); }
.day.has-work::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--white); margin-top: 2px;
}
.day.is-done::after { background: var(--success); }
.day.is-empty .dnum { color: var(--grey); }

/* ── cards ────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-md); margin-bottom: var(--s-md);
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-sm); margin-bottom: var(--s-sm);
}
.tag {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--grey);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 2px 6px; white-space: nowrap;
}
.tag.strong { color: var(--white); border-color: var(--grey); }

pre.work {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; margin: 0;
}
.rx {
  font-family: var(--font-display); font-size: 20px; letter-spacing: .02em;
  text-transform: uppercase; margin: 0 0 var(--s-sm);
}

/* ── scale picker ─────────────────────────────────────────── */
.scale { margin-top: var(--s-md); }
.scale > input { position: absolute; opacity: 0; pointer-events: none; }
.scale-seg { display: flex; border: 1px solid var(--line); border-radius: var(--r-md); }
.scale-seg label {
  flex: 1; text-align: center; padding: 10px 4px; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--grey); min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.scale .s1:checked ~ .scale-seg .l1,
.scale .s2:checked ~ .scale-seg .l2,
.scale .s3:checked ~ .scale-seg .l3 {
  background: var(--white); color: var(--black);
}
.scale .pane { display: none; padding-top: var(--s-sm); }
.scale .s1:checked ~ .p1,
.scale .s2:checked ~ .p2,
.scale .s3:checked ~ .p3 { display: block; }
.scale ul { list-style: none; margin: 0; padding: 0; }
.scale li {
  display: flex; justify-content: space-between; gap: var(--s-md);
  padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.scale li:first-child { border-top: 0; }
.scale li .m { color: var(--grey); }

/* ── buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-lg); border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  border: 1px solid var(--white); background: var(--white);
  color: var(--black); text-decoration: none;
}
.btn.secondary { background: var(--black); color: var(--white); }
.btn.block { width: 100%; }
.btn:disabled { border-color: var(--grey); background: var(--grey); color: var(--black); }

/* ── forms ────────────────────────────────────────────────── */
label.field { display: block; margin: var(--s-md) 0 var(--s-xs); }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  background: var(--black); color: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 16px;
}
input:focus, select:focus, textarea:focus { border-color: var(--white); outline: none; }
input:disabled { color: var(--grey); }
textarea { min-height: 96px; line-height: 1.5; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); }

/* ── stars ────────────────────────────────────────────────── */
.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.stars input { position: absolute; opacity: 0; pointer-events: none; }
.stars label {
  font-size: 30px; line-height: 1; cursor: pointer; color: var(--line);
  padding: 0 2px; min-width: 34px; text-align: center;
}
.stars input:checked ~ label,
.stars label:hover, .stars label:hover ~ label { color: var(--white); }

/* ── bottom nav ───────────────────────────────────────────── */
nav.bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--black); border-top: 1px solid var(--line);
  display: flex; padding-bottom: env(safe-area-inset-bottom);
}
nav.bottom a {
  flex: 1; text-align: center; padding: 12px 4px 14px; text-decoration: none;
  color: var(--grey); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; min-height: 56px;
  border-top: 2px solid transparent;
}
nav.bottom a.on { color: var(--white); border-top-color: var(--white); }

/* ── flashes ──────────────────────────────────────────────── */
.flash {
  border: 1px solid var(--line); border-left-width: 3px;
  padding: var(--s-sm) var(--s-md); margin: var(--s-md) 0; font-size: 14px;
}
.flash.error { border-left-color: var(--error); }
.flash.success { border-left-color: var(--success); }

.empty { padding: var(--s-2xl) 0; text-align: center; color: var(--grey); }
.buildbar { padding: var(--s-lg) 0; color: var(--grey); font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ── the workout itself, inverted ───────────────────────────
   A block is the thing you read mid-session, often outdoors and
   often in sunlight. Black on white is the more legible way round,
   and it separates the training from the app around it. Everything
   else — nav, forms, the log — stays on black.

   Inside a white card every piece of text is black: #808080 on white
   is 3.9:1 and fails AA at body size, and the brand rule is that
   white surfaces carry black for anything essential. The one
   reversal is the selected scale, which becomes the black chip.
   ───────────────────────────────────────────────────────────── */
.card.workblock {
  background: var(--white); color: var(--black);
  border-color: var(--white);
}
.card.workblock .muted { color: var(--black); }
.card.workblock .tag,
.card.workblock .tag.strong { color: var(--black); border-color: var(--black); }
.card.workblock .scale-seg { border-color: var(--black); }
.card.workblock .scale-seg label { color: var(--black); }
.card.workblock .scale .s1:checked ~ .scale-seg .l1,
.card.workblock .scale .s2:checked ~ .scale-seg .l2,
.card.workblock .scale .s3:checked ~ .scale-seg .l3 {
  background: var(--black); color: var(--white);
}
/* the only place a lighter rule is right: stacked movement lines would
   read as a table if every divider were full black */
.card.workblock .scale li { border-top-color: var(--line-ink); }
.card.workblock .scale li .m { color: var(--black); }


/* ── landing ───────────────────────────────────────────────
   The page has one job: sign in. The hero says whose app this is
   in one glance and then gets out of the way — it is a band, not
   a full screen, so the form is reachable without scrolling on a
   phone. The scrim is for legibility over a photograph, not
   decoration; the brand's no-gradient rule is about ornament.
   ───────────────────────────────────────────────────────────── */
.hero {
  position: relative; margin: 0 calc(-1 * var(--s-md)) var(--s-xl);
  height: 46vh; min-height: 260px; max-height: 420px; overflow: hidden;
  background: var(--black);
}
.hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.06);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 55%, var(--black) 100%);
}
.hero-mark {
  position: absolute; left: var(--s-md); right: var(--s-md); bottom: var(--s-lg);
  z-index: 1;
}
.hero-mark img { display: block; width: 62%; max-width: 260px; height: auto; }
.hero-sub {
  margin: var(--s-xs) 0 0; font-family: var(--font-display);
  font-size: 20px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey);
}
.signin-head { margin: 0 0 var(--s-md); }

@media (min-width: 700px) {
  .hero { height: 40vh; }
  .hero-mark img { max-width: 300px; }
}