/* ============================================================
   ScoreIndexer — Calculator Widget & Result Component Styles
   ============================================================ */

/* --- Calculator Container & Grid --------------------------- */
.calc-container {
  display: grid;
  gap: var(--sp-6);
  margin-block: var(--sp-6);
}

@media (min-width: 840px) {
  .calc-container {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
  }
}

.calc-card {
  background: var(--c-surface);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.calc-card--hero {
  border-top: 4px solid var(--c-accent);
}

.calc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
}

.calc-card__head h2,
.calc-card__head h3 {
  font-size: var(--fs-md);
  margin: 0;
  color: var(--c-ink);
}

/* --- Quick Presets & Action Bar ---------------------------- */
.presets-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.preset-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-preset {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.btn-preset:hover {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  color: var(--c-accent-dark);
}

/* --- Form Fields & Segmented Control ----------------------- */
.calc-form {
  display: grid;
  gap: var(--sp-4);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-3);
}

.form-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: var(--fw-normal);
}

.form-input,
.form-select {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  transition: all var(--dur-fast) ease;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-glow);
}

.form-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input-suffix {
  position: absolute;
  right: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-muted);
  pointer-events: none;
}

/* Unit Segmented Control */
.segmented-control {
  display: inline-flex;
  background: var(--c-bg-alt);
  border-radius: var(--r-pill);
  padding: 3px;
  border: 1px solid var(--c-line);
}

.segmented-control label {
  padding: 4px 14px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-soft);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
}

.segmented-control input[type="radio"] {
  display: none;
}

.segmented-control input[type="radio"]:checked + label {
  background: #ffffff;
  color: var(--c-accent-dark);
  box-shadow: var(--shadow-sm);
}

/* --- Dynamic Result Card ---------------------------------- */
.result-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--c-bg-alt) 100%);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}

.result-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.result-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

.result-main {
  text-align: center;
  padding: var(--sp-5) var(--sp-3);
  background: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.result-main__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-semibold);
  color: var(--c-muted);
  margin-bottom: var(--sp-1);
}

.result-main__value {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: var(--fw-bold);
  color: var(--c-accent-dark);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
}

.result-main__sub {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  margin-top: var(--sp-2);
}

/* Breakdown Grid */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.result-stat {
  background: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}

.result-stat__label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-bottom: 2px;
}

.result-stat__value {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  font-feature-settings: "tnum";
}

/* Result Actions */
.result-actions {
  display: flex;
  gap: var(--sp-2);
}

.result-actions .btn {
  flex: 1;
}

.copy-feedback {
  font-size: var(--fs-xs);
  color: var(--c-ok);
  text-align: center;
  margin-top: var(--sp-2);
  display: none;
}

.copy-feedback.show {
  display: block;
  animation: fadeIn 0.2s ease;
}

/* --- Interactive Multi-Score Grid (Golf Handicap) ---------- */
.score-inputs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.score-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.score-chip input {
  width: 100%;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: 8px 4px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

.score-chip.is-counting input {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  color: var(--c-accent-dark);
}

.score-chip .score-chip__num {
  font-size: 10px;
  color: var(--c-muted);
  margin-bottom: 2px;
}

/* --- Pace Split Dynamic Table ------------------------------ */
.split-table {
  width: 100%;
  font-size: var(--fs-xs);
  border-collapse: collapse;
  margin-top: var(--sp-4);
}

.split-table th,
.split-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
}

.split-table th {
  background: var(--c-bg-alt);
  font-weight: var(--fw-semibold);
}

.split-table td.split-time {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
}

/* --- Slider Controls (Riegel exponent, format allowance) --- */
.range-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.range-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--c-accent);
}

.range-val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  min-width: 44px;
  text-align: right;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}