/* Target Heart Rate Zone Calculator — content styles.
   Prefix: --hr-  /  .hr-

   Reference point: a 5-row training zone table, since the whole point is
   seeing all 5 zones together to pick a target for a specific workout —
   not a single hero number. A small summary row above it surfaces the two
   intermediate figures (max HR, HRR) that the table is built from.

   THIS FILE STYLES THE CONTENT AREA ONLY. Chrome is owned by chrome.css. */

:root {
  --hr-surface: #ffffff;
  --hr-panel:   #f5f6f4;
  --hr-line:    #dee2dc;
  --hr-text:    #141813;
  --hr-muted:   #5c6459;
  --hr-bad:     #b3261e;
}

.hr-wrap {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ── Input panel ─────────────────────────────────────────────────────────── */

.hr-panel {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--hr-line);
  border-radius: 2px;
  background: var(--hr-surface);
}

.hr-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

@media (max-width: 24rem) {
  .hr-field-grid { grid-template-columns: 1fr; }
}

.hr-field {
  display: grid;
  gap: 0.375rem;
}

.hr-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hr-muted);
}

.hr-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--hr-text);
  background: var(--hr-surface);
  border: 1px solid var(--hr-line);
  border-radius: 2px;
}

.hr-field input:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: -1px;
}

.hr-error {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--hr-bad);
  background: rgba(179, 38, 30, 0.06);
  border: 1px solid var(--hr-bad);
  border-radius: 2px;
}

.hr-presets {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--hr-line);
  padding-top: 0.875rem;
}

.hr-preset-lbl {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hr-muted);
}

.hr-chip {
  padding: 0.3125rem 0.75rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hr-text);
  background: var(--hr-panel);
  border: 1px solid var(--hr-line);
  border-radius: 2px;
  cursor: pointer;
}

.hr-chip:hover {
  border-color: var(--tf-accent);
  color: var(--tf-accent);
}

/* ── Primary action button ──────────────────────────────────────────────── */

.hr-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tf-accent-ink);
  background: var(--tf-accent);
  border: 1px solid var(--tf-accent);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 1.5rem;
}

.hr-btn:hover  { background: var(--tf-accent-hover);  border-color: var(--tf-accent-hover); }
.hr-btn:active { background: var(--tf-accent-active); border-color: var(--tf-accent-active); }

.hr-btn:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

/* ── Summary row ─────────────────────────────────────────────────────────── */

.hr-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (max-width: 22rem) {
  .hr-summary-grid { grid-template-columns: 1fr; }
}

.hr-summary-metric {
  padding: 0.875rem 0.75rem;
  border: 1px solid var(--hr-line);
  border-radius: 2px;
  background: var(--hr-panel);
  text-align: center;
}

.hr-summary-label {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  color: var(--hr-muted);
}

.hr-summary-value {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tf-accent);
}

/* ── Zones table ─────────────────────────────────────────────────────────── */

.hr-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hr-line);
  border-radius: 2px;
  margin-bottom: 1rem;
}

.hr-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--hr-surface);
}

.hr-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hr-muted);
  background: var(--hr-panel);
  border-bottom: 1px solid var(--hr-line);
}

.hr-table td {
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--hr-line);
  vertical-align: top;
}

.hr-table tbody tr:last-child td { border-bottom: none; }

.hr-zone-name-cell {
  font-weight: 700;
  color: var(--hr-text);
  white-space: nowrap;
}

.hr-zone-range-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--tf-accent);
  white-space: nowrap;
}

.hr-zone-purpose-cell {
  color: var(--hr-muted);
}

.hr-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--hr-muted);
}

/* ── Ad slots ───────────────────────────────────────────────────────────── */

.hr-ad {
  min-height: 280px;
  margin: 2rem auto 0;
  max-width: 42rem;
  padding-inline: 1.5rem;
}

@media (max-width: 26rem) {
  .hr-wrap,
  .hr-ad { padding-inline: 1rem; }
  .hr-panel { padding: 1.25rem; }
}

/* tf:dark-palette — generated by migrate_chrome.py */
/* Neutrals inherit the shared chrome tokens so all tools share one
   ground; brand hues are kept and lightened, never inverted. */
[data-theme="dark"] {
  --hr-surface: var(--tf-surface);
  --hr-panel: var(--tf-surface);
  --hr-line: var(--tf-rule);
  --hr-text: var(--tf-ink);
  --hr-muted: var(--tf-ink-soft);
  --hr-bad: #da8581;
}