/* Vital website: extras for the newer free tools and knowledge-base articles.
   Loaded after style.css on those pages only. Uses the same color tokens, so light and dark follow the page. No inline styles are
   needed anywhere (the CSP forbids them); the macro bar and the plate diagram are sized from the script through the CSS object model. */

/* ---------- Form controls the base sheet does not style ---------- */

.field input[type="date"],
.field input[type="text"] {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--danger);
}

.field-sub {
  margin: 10px 0 0;
}

.seg-wrap span {
  min-width: 48px;
  justify-content: center;
}

.seg input:disabled + span {
  opacity: 0.5;
}

.opt-block {
  margin: 0 0 18px;
}

.opt-block summary {
  cursor: pointer;
  font-weight: 700;
  padding: 6px 0;
}

/* ---------- Results ---------- */

.macros.two {
  grid-template-columns: repeat(2, 1fr);
}

.macros .macro {
  min-width: 0;
}

.result-line {
  margin: 8px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-2);
}

.verdict {
  margin: 4px 0 6px;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.side-list {
  margin: 4px 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.math-line {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.stackbar {
  display: flex;
  height: 18px;
  margin: 14px 0 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}

.stackbar i {
  display: block;
  min-width: 0;
  flex: 0 1 0%;
}

.stackbar .sb-protein { background: var(--protein); }
.stackbar .sb-fat { background: var(--fat); }
.stackbar .sb-carbs { background: var(--carbs); }

.level {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 14px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}

.level::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-3);
}

.level-steady::before { background: var(--ok); }
.level-gradual::before { background: var(--accent); }
.level-slow::before { background: var(--text-3); }
.level-aggressive::before { background: var(--danger); }

.tight table {
  min-width: 0;
}

.tight th,
.tight td {
  padding: 10px 8px;
}

/* ---------- Barbell diagram (decorative; the text list beside it is the answer) ---------- */

.rack {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 12px 0 14px;
  min-height: 150px;
  padding: 0 0 0 18px;
  overflow-x: auto;
}

.rack::before {
  content: "";
  flex: 0 0 auto;
  width: 36px;
  height: 14px;
  margin-left: -18px;
  margin-right: 4px;
  border-radius: 7px 0 0 7px;
  background: var(--border-strong);
}

.rack::after {
  content: "";
  flex: 1 0 24px;
  height: 14px;
  background: var(--border-strong);
}

.plate {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  border-radius: 6px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: 0.78rem;
  font-weight: 800;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
}

.plate-r0 { height: 140px; }
.plate-r1 { height: 124px; }
.plate-r2 { height: 108px; }
.plate-r3 { height: 92px; }
.plate-r4 { height: 78px; }
.plate-r5 { height: 66px; }
.plate-r6 { height: 56px; }
.plate-r7 { height: 48px; }

/* ---------- Articles ---------- */

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-3);
  font-size: 0.92rem;
}

.article-meta li {
  margin: 0;
}

.doc .key-points {
  margin: 0 0 28px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  max-width: 72ch;
}

.doc .key-points h2 {
  margin: 0 0 8px;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.doc .key-points ul {
  margin: 0;
}

.doc .less-sure {
  margin: 38px 0 8px;
  padding: 6px 22px 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--fat);
  border-radius: var(--radius-sm);
  background: var(--surface);
  max-width: 72ch;
}

.doc .less-sure h2 {
  margin-top: 16px;
}

.doc .worked {
  margin: 22px 0;
  padding: 4px 22px 10px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  max-width: 72ch;
}

.doc .worked h3 {
  margin-top: 14px;
}

.doc .worked p,
.doc .worked li {
  color: var(--text);
}

.doc .read-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 0;
  list-style: none;
}

.doc .read-more li {
  margin: 0;
}


.pace-table th:first-child,
.pace-table td:first-child {
  white-space: nowrap;
}