/* PF Structure Calculator — module-specific styles.
   Uses shared design tokens (tokens.css). Loaded globally from index.html,
   scoped by the pf-calculator-only class names below. */

/* Labeled section divider */
.divider-labeled {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 20px;
}
.divider-labeled-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.divider-labeled-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

/* Small uppercase label above tables / milestone rows */
.table-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 22px 0 10px;
}

/* Slider current-value chip inside the field label */
.field-label-val {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 500;
}

/* Right-align numeric table cells */
.data-table th.num,
.data-table td.num { text-align: right; }

/* Highlighted result / corpus card (the "12% PF" side) */
.result-card--highlight {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-glow);
}

/* Corpus card meta rows */
.corpus-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.corpus-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.corpus-meta-key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  min-width: 0;
  flex: 1 1 auto;
}
.corpus-meta-val {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

/* Milestone strip */
.milestone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.milestone-card {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  text-align: center;
}
.milestone-year {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.milestone-a { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); }
.milestone-b { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--warning); }
.milestone-sep { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); margin: 2px 0; }

/* Verdict-box accent variants */
.verdict-box--gold { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.verdict-box--gold .verdict-icon { color: var(--warning); }
.verdict-box--green { border-color: color-mix(in srgb, var(--positive) 40%, transparent); }
.verdict-box--green .verdict-icon { color: var(--positive); }

@media (max-width: 380px) {
  .corpus-meta-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .corpus-meta-val { text-align: left; white-space: normal; word-break: break-word; }
}