/*
  PlanWorkouts — "Field Manual" design system.
  Grounded in the dataset's own visual grammar: grayscale anatomical
  diagrams with one muscle highlighted in red. That red mark is the
  only accent color in this system, and it is used the same way here
  as it is in the illustrations — to mark the one active/target thing,
  never as decoration. Everything else is ink, paper, and hairlines,
  like a printed instruction manual or equipment manifest.
*/

:root {
  --ink: #14181a;
  --ink-dim: #5b6660;
  --paper: #f1f2ec;
  --paper-raised: #ffffff;
  --steel: #aeb5aa;
  --steel-dim: #dde0d8;
  --signal: #ff3b2f;
  --signal-ink: #ffffff;
  --radius: 3px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #edeee8;
    --ink-dim: #9aa39a;
    --paper: #14171a;
    --paper-raised: #1b1f22;
    --steel: #3a4038;
    --steel-dim: #24282a;
    --signal: #ff5647;
    --signal-ink: #14171a;
  }
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
}

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

a { color: var(--ink); text-decoration-color: var(--steel); text-underline-offset: 3px; }
a:hover { color: var(--signal); text-decoration-color: var(--signal); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
img { max-width: 100%; height: auto; display: block; }

.signal { color: var(--signal); }

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--steel-dim);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand .mark {
  width: 10px;
  height: 10px;
  background: var(--signal);
  flex-shrink: 0;
}
.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}
.main-nav a {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.main-nav a:hover { color: var(--signal); }

.language-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--steel);
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--paper-raised);
}
.language-selector select {
  border: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 4px 6px;
  min-width: 110px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  accent-color: var(--signal);
}
.language-selector select option {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
}
.language-selector select:focus {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- hero ---------- */

.hero {
  border-bottom: 1px solid var(--steel-dim);
  padding: 64px 0 0;
  background-image:
    linear-gradient(var(--steel-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel-dim) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
}
.hero-inner {
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 18px;
}
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 20px;
  max-width: 14ch;
}
.hero .lead {
  max-width: 46ch;
  margin: 0 0 28px;
}
.lead { color: var(--ink-dim); font-size: 1.02rem; }

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 13px 22px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.92rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--signal); color: var(--signal-ink); }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.92rem;
  border: 1px solid var(--steel);
  cursor: pointer;
  text-decoration: none;
}
.btn-outline:hover { border-color: var(--signal); color: var(--signal); }

.manifest {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--steel-dim);
  margin: 40px 0 0;
}
.manifest div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 18px 16px 0;
  border-left: 1px solid var(--steel-dim);
  padding-left: 18px;
}
.manifest div:first-child { border-left: none; padding-left: 0; }
.manifest dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 4px;
}
.manifest dd {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- sections ---------- */

.section { padding: 48px 0; }
.section h2, main h2 {
  font-size: 1.1rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 32px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--steel-dim);
}
.section:first-of-type h2 { margin-top: 0; }

/* ---------- hub grid (category / equipment tiles) ---------- */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.hub-card {
  background: var(--paper-raised);
  border: 1px solid var(--steel);
  padding: 12px 10px;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hub-card:hover {
  background: var(--paper);
  border-color: var(--signal);
}
.hub-card img {
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0;
  filter: grayscale(1);
}
.hub-card:hover img { filter: grayscale(0); }
.hub-title {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
}
.hub-count {
  display: block;
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  margin-top: 3px;
}

.section-sub {
  color: var(--ink-dim);
  font-size: 0.92rem;
  margin: -10px 0 16px;
  max-width: 60ch;
}

/* ---------- collapsible "show more" (equipment, etc.) ---------- */

.equipment-more,
.pb-equipment-more {
  margin-top: 10px;
}
.equipment-more summary,
.pb-equipment-more summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 8px 2px;
}
.equipment-more summary::-webkit-details-marker,
.pb-equipment-more summary::-webkit-details-marker { display: none; }
.equipment-more summary::before,
.pb-equipment-more summary::before {
  content: "+";
  color: var(--signal);
  font-weight: 700;
}
.equipment-more[open] summary::before,
.pb-equipment-more[open] summary::before { content: "\2212"; }
.equipment-more summary:hover,
.pb-equipment-more summary:hover { color: var(--signal); }
.equipment-more .hub-grid-more { margin-top: 10px; }
.pb-equipment-more .chip-row { margin-top: 10px; }

/* ---------- card grid (exercise listing cards) ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 10px;
  margin: 20px 0;
}
.card {
  background: var(--paper-raised);
  border: 1px solid var(--steel-dim);
  border-top: 2px solid var(--steel-dim);
  padding: 14px;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease;
}
.card:hover { border-top-color: var(--signal); }
.card img { align-self: center; filter: grayscale(0.4); }
.card:hover img { filter: grayscale(0); }
.card-title { font-weight: 700; font-size: 0.88rem; line-height: 1.3; }
.card-meta {
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

/* ---------- breadcrumb ---------- */

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  margin: 20px 0 4px;
}
.breadcrumb a { color: var(--ink-dim); }

main .wrap > h1 { margin-top: 10px; }
main h1 {
  font-size: clamp(1.6rem, 3.6vw, 2.1rem);
  letter-spacing: -0.01em;
  margin: 6px 0 12px;
  font-weight: 800;
}

/* ---------- exercise detail page ---------- */

.exercise .eyebrow { margin-top: 20px; }

.exercise-lead {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--ink-dim);
  max-width: none;
  width: 100%;
  margin: 4px 0 0;
}

.exercise-grid {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 8px;
}
.exercise-intro h1 {
  margin-top: 0;
}
.exercise-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--paper-raised);
  border: 1px solid var(--steel-dim);
  padding: 14px;
}
.exercise-media img {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
}
.expand-gif-btn {
  margin-top: 16px;
  width: 100%;
}
.expand-gif-btn button {
  width: 100%;
}
.media-credit {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-dim);
  margin: 10px 0 0;
  text-align: center;
}
.exercise-intro {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--steel-dim);
  border-left: 1px solid var(--steel-dim);
}
.specs > div {
  border-right: 1px solid var(--steel-dim);
  border-bottom: 1px solid var(--steel-dim);
  padding: 10px 16px;
}
.specs dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 3px;
}
.specs dd { margin: 0; font-weight: 700; font-size: 0.92rem; }
.specs dd a { text-decoration: none; }
.specs dd a:hover { text-decoration: underline; }

.share-btn { margin-top: 16px; padding: 9px 16px; font-size: 0.82rem; }

/* ---------- FAQ ---------- */

.faq { margin: 0; border-top: 1px solid var(--steel-dim); }
.faq-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--steel-dim);
}
.faq-item dt {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 6px;
}
.faq-item dd {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.92rem;
}

.instructions {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--steel-dim);
}
.instructions li {
  counter-increment: step;
  position: relative;
  padding: 16px 0 16px 52px;
  border-bottom: 1px solid var(--steel-dim);
}
.instructions li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--signal);
}

/* ---------- search / browse controls ---------- */

.search-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.search-controls input, .search-controls select {
  padding: 11px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--steel);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 0.92rem;
  font-family: var(--font-mono);
}
.search-controls input { flex: 1; min-width: 220px; }

#load-more {
  display: block;
  margin: 24px auto;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--steel);
}
#load-more:hover { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }

/* ---------- plan builder ---------- */

.plan-builder {
  background: var(--paper-raised);
  border: 1px solid var(--steel-dim);
  padding: 24px;
}
.pb-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.pb-sub {
  color: var(--ink-dim);
  font-size: 0.88rem;
  margin: 0 0 20px;
}
.pb-row {
  display: grid;
  grid-template-columns: 140px minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--steel-dim);
}
.pb-row label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  justify-self: start;
  text-align: left;
}
.pb-row select {
  padding: 7px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--steel);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  width: 100%;
  min-width: 0;
}
.expand-gif-btn {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}
.expand-gif-btn button {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  cursor: pointer;
}
.expand-gif-btn button:hover {
  border-color: var(--signal);
  color: var(--signal);
}
.gif-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 26, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}
.gif-modal {
  max-width: min(100%, 860px);
  width: 100%;
  max-height: min(100%, 90vh);
  position: relative;
}
.gif-modal img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--steel);
  border-radius: 8px;
}
.gif-modal-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--steel);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 1.15rem;
  cursor: pointer;
  line-height: 1;
}
.pb-equipment {
  border: none;
  border-top: 1px solid var(--steel-dim);
  padding: 12px 0 4px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.pb-equipment legend {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0;
  margin-bottom: 6px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--steel);
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.chip:hover { border-color: var(--signal); }
.chip[aria-pressed="true"] {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}
.pb-submit {
  width: 100%;
  margin-top: 18px;
  text-align: center;
}

#pb-output { padding: 48px 0 8px; border-top: 1px solid var(--steel-dim); margin-top: 0; }
#pb-output h2 {
  border: none;
  padding: 0;
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  text-transform: none;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pb-day { margin-top: 32px; }
.pb-day h3 {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
  color: var(--signal);
}
.pb-disclaimer {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--steel-dim);
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--steel-dim);
  padding: 32px 0;
  margin-top: 48px;
  color: var(--ink-dim);
  font-size: 0.82rem;
  font-family: var(--font-mono);
}
.site-footer a { color: var(--ink-dim); }
.site-footer p { margin: 5px 0; }
.footer-fine { opacity: 0.75; font-size: 0.76rem; }

/* ---------- cookie consent banner ---------- */

.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--paper-raised);
  border-top: 1px solid var(--steel-dim);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
}
.cookie-consent-inner {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-consent-inner p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-dim);
  max-width: 62ch;
  flex: 1;
  min-width: 220px;
}
.cookie-consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-consent-actions .btn,
.cookie-consent-actions .btn-outline { padding: 10px 16px; font-size: 0.85rem; }

@media (max-width: 640px) {
  .cookie-consent-inner { padding: 14px 20px; }
  .cookie-consent-actions { width: 100%; }
  .cookie-consent-actions .btn,
  .cookie-consent-actions .btn-outline { flex: 1; }
}

@media (max-width: 860px) {
  .header-inner { justify-content: center; }
  .main-nav { justify-content: center; }
  .language-selector { width: 100%; justify-content: center; }
  .pb-row { grid-template-columns: 1fr; align-items: stretch; }
  .pb-row label { justify-self: start; text-align: left; }
  .pb-row select { width: 100%; min-width: 0; }
  .pb-equipment { gap: 12px; }
  .plan-builder { padding: 20px; }
  .manifest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manifest div:nth-child(2) { border-left: 1px solid var(--steel-dim); }
  .manifest div:nth-child(odd) { border-left: none; padding-left: 0; }
}

@media (max-width: 640px) {
  .main-nav a { margin-left: 0; font-size: 0.72rem; }
  .main-nav { gap: 10px; }
  .manifest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manifest div:nth-child(2) { border-left: 1px solid var(--steel-dim); }
  .manifest div:nth-child(odd) { border-left: none; padding-left: 0; }
  .hero { background-size: 22px 22px; padding-top: 40px; }
  .hero-inner { gap: 28px; }
  .hero h1 { max-width: 100%; }
  .hero .lead { max-width: 100%; }
  .pb-row { padding: 10px 0 0; }
  .pb-row select { font-size: 0.96rem; }
  .pb-submit { margin-top: 20px; }
  .hub-grid { gap: 12px; }
  .site-footer { padding: 24px 0; }
  .section { padding: 36px 0; }
  .wrap { padding: 0 16px; }
}