/* Pelank OneRM – Clean cohesive stylesheet
   - Heart-Age-like outer frame
   - 8px radius everywhere
   - Single visible box for NUMBER inputs
   ========================================================================== */

.pelank-1rm {
  /* Design tokens */
  --orm-bg: #ffffff;
  --orm-card: #fafafa;
  --orm-text: #0f172a;
  --orm-muted: #475569;
  --orm-muted-2: #6b7280;
  --orm-border: #e5e7eb;
  --orm-soft-border: #d0f2df;

  --orm-primary: #10b981;
  --orm-primary-ink: #065f46;
  --orm-accent: #06b6d4;
  --orm-danger: #ef4444;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Unified radii (all 8px) */
  --radius-sm: 8px;
  --radius: 8px;
  --radius-lg: 8px;

  --shadow-card: 0 1px 2px rgba(15, 23, 42, .04);
  --focus: 0 0 0 3px rgba(16, 185, 129, .25);

  color: var(--orm-text);
  background: var(--orm-bg);
  border: 1.5px solid var(--orm-soft-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  line-height: 1.55;
}

/* Header */
.pelank-1rm__header { text-align: start; }

.pelank-1rm__title {
  margin: 0 0 var(--space-2);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.pelank-1rm__subtext {
  margin: 0;
  font-size: .95rem;
  color: var(--orm-muted);
  text-align: center;
}

.pelank-1rm__divider {
  height: 1px;
  border-radius: 1px;
  background: #10b981;
  margin-block: var(--space-4) var(--space-5);
}

/* Form layout */
.pelank-1rm__row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pelank-1rm__row { grid-template-columns: 1fr 1fr; }
}

.pelank-1rm__grid-2 {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pelank-1rm__grid-2 { grid-template-columns: 1fr 1fr; }
}

/* Field blocks */
.pelank-1rm__field,
.pelank-1rm__subfield {
  display: block;
  background: #fff;
  border: 1px solid var(--orm-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

/* If a field contains a number input -> remove the parent box (single visible border) */
.pelank-1rm .pelank-1rm__field:has(.pelank-1rm__input[type="number"]),
.pelank-1rm .pelank-1rm__subfield:has(.pelank-1rm__input[type="number"]) {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Labels / help */
.pelank-1rm__label,
.pelank-1rm__sublabel {
  display: block;
  font-weight: 600;
  margin-block-end: var(--space-2);
  color: var(--orm-text);
}

.pelank-1rm__help,
.pelank-1rm__note {
  display: block;
  font-size: .85rem;
  color: var(--orm-muted-2);
  margin-block-start: var(--space-1);
}

/* Inputs (incl. number) */
.pelank-1rm__input,
.pelank-1rm__select {
  inline-size: 100%;
  padding: 10px 12px;
  border: 1px solid var(--orm-border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.pelank-1rm__input::placeholder { color: #94a3b8; opacity: 1; }

.pelank-1rm__input:focus,
.pelank-1rm__select:focus {
  outline: none;
  border-color: var(--orm-primary);
  box-shadow: var(--focus);
}

/* Number inputs – remove spinners */
.pelank-1rm input[type=number]::-webkit-outer-spin-button,
.pelank-1rm input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pelank-1rm input[type=number] { -moz-appearance: textfield; }

/* Radio chips (unit/effort) */
.pelank-1rm__radio-group {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-start: var(--space-2);
}

.pelank-1rm__radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  border: 1px solid var(--orm-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.pelank-1rm__radio:hover { box-shadow: var(--shadow-card); }
.pelank-1rm__radio:focus-within { box-shadow: var(--focus); }

.pelank-1rm__radio input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.pelank-1rm__radio span {
  font-weight: 600;
  color: var(--orm-muted-2);
}

.pelank-1rm__radio input:checked + span { color: var(--orm-primary-ink); }

.pelank-1rm__radio input:checked + span::before {
  content: "";
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  margin-inline-end: 6px;
  border-radius: 999px;
  background: var(--orm-primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

/* Actions */
.pelank-1rm__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  margin-block-start: var(--space-3);
}

.pelank-1rm__btn,
.pelank-1rm__btn-outline {
  border: 1px solid #d1d5db;
  padding: 9px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  background: #fff;
  color: #111827;
  font-weight: 700;
  transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.pelank-1rm__btn:hover,
.pelank-1rm__btn-outline:hover { box-shadow: var(--shadow-card); }

.pelank-1rm__btn:active,
.pelank-1rm__btn-outline:active { transform: translateY(1px); }

.pelank-1rm__btn:focus-visible,
.pelank-1rm__btn-outline:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.pelank-1rm__btn {
  background: var(--orm-primary);
  border-color: var(--orm-primary);
  color: #fff;
}

.pelank-1rm__btn-outline {
  background: #fff;
  border-color: var(--orm-border);
}

/* Error / Toast */
.pelank-1rm__error {
  margin-block-start: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #b91c1c;
  border-radius: var(--radius);
}

.pelank-1rm__toast {
  margin-block-start: var(--space-2);
  color: var(--orm-primary-ink);
  font-weight: 700;
}

/* Tabs */
.pelank-1rm__tabs { margin-block-start: var(--space-4); }

.pelank-1rm__tablist {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2);
  background: var(--orm-card);
  border: 1px solid var(--orm-border);
  border-radius: var(--radius);
}

.pelank-1rm__tab {
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pelank-1rm__tab:hover { background: #ffffff; border-color: var(--orm-border); }
.pelank-1rm__tab:focus-visible { outline: none; box-shadow: var(--focus); }

.pelank-1rm__tab[aria-selected="true"],
.pelank-1rm__tab.pelank-1rm__tab--active {
  background: var(--orm-primary);
  color: #fff;
  border-color: var(--orm-primary);
}

/* Panels */
.pelank-1rm__panel {
  margin-block-start: var(--space-3);
  padding: var(--space-4);
  background: var(--orm-card);
  border: 1px solid var(--orm-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

[role="tabpanel"][hidden] { display: none !important; }

.pelank-1rm__section-title {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
  font-weight: 700;
}

/* KPI cards */
.pelank-1rm__kpis {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pelank-1rm__kpis { grid-template-columns: repeat(3, 1fr); }
}

.pelank-1rm__kpi {
  background: #fff;
  border: 1px solid var(--orm-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.pelank-1rm__kpi-label { color: var(--orm-muted); margin: 0 0 var(--space-1); }
.pelank-1rm__kpi-value { font-size: 1.3rem; font-weight: 800; }

/* Lists */
.pelank-1rm__list { margin: 0; padding-inline-start: 18px; }
.pelank-1rm__list li { margin-block: var(--space-1); }

/* Table */
.pelank-1rm__table-wrap {
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid var(--orm-border);
  background: #fff;
}

.pelank-1rm__table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.pelank-1rm__table-cap {
  text-align: start;
  padding: var(--space-3);
  color: var(--orm-muted);
  font-weight: 600;
}

.pelank-1rm__table thead th {
  background: var(--orm-card);
  padding: 10px 12px;
  border-block-end: 1px solid var(--orm-border);
  text-align: start;
  white-space: nowrap;
}

.pelank-1rm__table tbody td {
  padding: 10px 12px;
  border-block-end: 1px dashed var(--orm-border);
  text-align: start;
  white-space: nowrap;
}

.pelank-1rm__table tbody tr:hover { background: #fcfcfc; }

/* Controls section inside panels */
.pelank-1rm__controls {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-block-end: var(--space-3);
}

@media (min-width: 640px) {
  .pelank-1rm__controls { grid-template-columns: 1fr 1fr; }
}

/* Noscript */
.pelank-1rm__noscript {
  display: block;
  margin-block-start: var(--space-3);
  color: var(--orm-danger);
  font-weight: 700;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pelank-1rm * { transition: none !important; animation: none !important; }
}

/* Print */
@media print {
  .pelank-1rm { border: none; padding: 0; }
  .pelank-1rm__tablist,
  .pelank-1rm__actions { display: none !important; }
  .pelank-1rm__panel { background: #fff; box-shadow: none; }
  .pelank-1rm,
  .pelank-1rm * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-variant-numeric: tabular-nums;
  }
}

/* Single visible box ONLY for number inputs (keeps 8px) */
.pelank-1rm .pelank-1rm__input[type="number"] {
  border: 1px solid var(--orm-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  padding: 10px 12px !important;
}

/* Label/help spacing when parent field box is removed for number inputs */
.pelank-1rm .pelank-1rm__label,
.pelank-1rm .pelank-1rm__sublabel { margin-bottom: 6px; }

.pelank-1rm .pelank-1rm__help { margin-top: 6px; }

/* Divider between form actions and results */
.pelank-1rm__tabs {
  position: relative;
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
}

.pelank-1rm__tabs::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 1px;
  border-radius: 1px;
  background: #10b981;
}