/* Shared foundation for the Spanish term library and metric guides.
   Load after each page's content styles so its navigation and rhythm stay aligned. */
.metric-page {
  --metric-paper: #fafafa;
  --metric-ink: #242424;
  --metric-muted: #686868;
  --metric-line: #dfdfdf;
  --metric-accent: #bb3036;
  --metric-accent-soft: #f8e9e7;
  --metric-accent-line: #e6b5b0;
  --metric-soft: #f1f1f1;
  --metric-surface: #ffffff;
  --tm-ink: var(--metric-ink);
  --tm-muted: var(--metric-muted);
  --tm-line: var(--metric-line);
  --if-muted: var(--metric-muted);
  --if-accent: var(--metric-accent);
  --paper: var(--metric-paper);
  --ink: var(--metric-ink);
  --muted: var(--metric-muted);
  --line: var(--metric-line);
  --red: var(--metric-accent);
  background: var(--metric-paper);
  color: var(--metric-ink);
  font-variant-numeric: tabular-nums;
}
.metric-page .shell { width: min(calc(100% - 64px), 1100px); }
.metric-page :is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--metric-ink); outline-offset: 4px; }
.metric-page section[id] { scroll-margin-top: 24px; }
.metric-page .metric-header { background: var(--metric-paper); border-bottom: 1px solid var(--metric-line); }
.metric-page .metric-nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.metric-page .metric-nav .brand { flex: 0 0 auto; gap: 12px; }
.metric-page .metric-nav .brand__badge { width: 40px; height: 43px; flex: 0 0 40px; }
.metric-page .metric-nav .brand__badge::before { display: block; z-index: 0; }
.metric-page .metric-nav .brand__badge img { width: 40px; height: 43px; object-fit: contain; position: relative; z-index: 1; }
.metric-page .metric-nav .brand__type { font-size: 22px; }
.metric-page .metric-nav nav { font-size: 14px; }
.metric-page .metric-nav nav a { display: inline-flex; align-items: center; gap: 10px; padding-block: 14px; }
.metric-page .metric-nav nav span { color: var(--metric-accent); font-size: 22px; }
.metric-page :is(.metric-nav, .metric-footer, .metric-breadcrumb) a:hover { color: var(--metric-accent); }
.metric-page .metric-breadcrumb { padding-block: 24px 28px; font-size: 13px; line-height: 20px; color: var(--metric-muted); }
.metric-breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 0; }
.metric-breadcrumb li { display: inline-flex; align-items: center; }
.metric-breadcrumb li+li::before { content: "/"; color: #929292; margin-inline: 12px; }
.metric-breadcrumb [aria-current=page] { color: var(--metric-ink); font-weight: 550; }
.metric-page .metric-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; padding-block: 0 36px; }
.metric-page .metric-hero h1 { font-size: clamp(42px, 4.5vw, 62px); font-weight: 750; line-height: 1.04; letter-spacing: -.05em; margin: 0; }
.metric-page .metric-hero h1 :is(em, span) { color: var(--metric-ink); font-style: normal; }
.metric-page .metric-hero .metric-lead { max-width: 690px; font-size: 18px; line-height: 1.55; color: var(--metric-muted); margin: 22px 0 0!important; }
.metric-page .metric-hero .button { margin-top: 22px; }
.metric-page .tss-reference { width: 100%; padding: 24px; justify-self: stretch; transform: none; background: var(--metric-surface); border: 1px solid var(--metric-line); border-radius: 12px; margin-top: 0; }
.metric-page .metric-footer { border-top: 1px solid var(--metric-line); padding-block: 23px; }
.metric-page .metric-footer>.shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.metric-page .metric-footer .brand__type { font-size: 18px; }
.metric-page .metric-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; font-size: 12px; color: var(--metric-muted); }
.metric-page.library-page main { padding-block: 0 44px; }
.metric-page .library-intro { margin-bottom: 36px; }
.metric-page .library-intro h1 { font-size: clamp(42px, 4.5vw, 62px); }

/* IF content shares neutral surfaces and spacing with TSS. */
.metric-page .if-dashboard { width: 100%; padding: 24px; border: 1px solid var(--metric-line); border-radius: 12px; background: var(--metric-surface); color: var(--metric-ink); box-shadow: none; }
.metric-page .if-dashboard figcaption { font-size: 13px; font-weight: 550; color: var(--metric-muted); }
.metric-page .if-dashboard__value { gap: 14px; margin-top: 14px; }
.metric-page .if-dashboard__value>span { font-size: 80px; font-weight: 650; line-height: 1.08; }
.metric-page .if-dashboard__value strong { font-size: 23px; font-weight: 600; color: var(--metric-ink); }
.metric-page .if-dashboard__value small { color: var(--metric-muted); }
.metric-page .if-dashboard__meaning { color: var(--metric-muted); font-size: 12px; }
.metric-page .if-dashboard__meaning strong { color: var(--metric-ink); }
.metric-page .if-hero-chart { margin-block: 17px; }
.metric-page .if-dashboard__stats { padding-top: 14px; border-color: var(--metric-line); grid-template-columns: 1fr 25px 1fr; }
.metric-page .if-dashboard__stats :is(div>span, small) { color: var(--metric-muted); }
.metric-page .if-dashboard__stats strong { font-size: 23px; font-weight: 550; }
.metric-page .if-division { color: var(--metric-muted); }
.metric-page .if-index { gap: 14px 30px; padding-block: 18px; font-size: 13px; border-color: var(--metric-line); }
.metric-page.if-page h2 { font-size: 28px; line-height: 1.12; font-weight: 650; letter-spacing: -.035em; }
.metric-page .if-section { padding-block: 36px; }
.metric-page .if-section-heading h2 { margin-bottom: 15px; }
.metric-page .if-section-heading>p:last-child { font-size: 15px; line-height: 1.65; }
.metric-page .if-formula { margin-top: 26px; }
.metric-page .if-formula>div { border-color: var(--metric-line); padding-top: 20px; }
.metric-page .if-formula__symbol { font-size: 47px; font-weight: 650; margin-bottom: 15px; }
.metric-page .if-formula__operator { color: var(--metric-muted); }
.metric-page .if-formula p strong { color: var(--metric-ink); }
.metric-page .if-lab { background: transparent; color: var(--metric-ink); padding-block: 36px; border-block: 1px solid var(--metric-line); }
.metric-page .if-lab__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; }
.metric-page .if-lab h2 { margin-bottom: 15px; }
.metric-page .if-lab__controls>p { color: var(--metric-muted); font-size: 15px; max-width: 540px; }
.metric-page .if-slider { margin-top: 25px; }
.metric-page .if-slider output { font-weight: 550; color: var(--metric-ink); }
.metric-page .if-slider :is(output span, p) { color: var(--metric-muted); }
.metric-page .if-slider input { accent-color: var(--metric-accent); }
.metric-page .if-presets { margin-top: 22px; }
.metric-page .if-presets>span { color: var(--metric-muted); }
.metric-page .if-presets button { color: var(--metric-ink); border-color: var(--metric-line); border-radius: 100px; padding-inline: 16px; }
.metric-page .if-presets button:is(:hover,[aria-pressed=true]) { background: var(--metric-accent-soft); border-color: var(--metric-accent-line); color: var(--metric-accent); }
.metric-page .if-result { padding: 25px 26px 22px; background: var(--metric-surface); color: var(--metric-ink); border: 1px solid var(--metric-line); border-radius: 12px; text-align: left; }
.metric-page .if-result__label { color: var(--metric-muted); font-size: 13px; font-weight: 550; }
.metric-page .if-result__number { font-size: 96px; font-weight: 650; line-height: 1.05; margin-block: 20px 18px; }
.metric-page .if-result__equation { color: var(--metric-muted); font-size: 14px; }
.metric-page .if-ruler { margin-block: 30px 22px; }
.metric-page .if-ruler__track { background: linear-gradient(to right,#f5ded9,#df8d80 45%,var(--metric-accent) 66%,#732b32); }
.metric-page #if-marker { background: var(--metric-ink); box-shadow: 0 0 0 3px var(--metric-surface); }
.metric-page .if-ruler__labels { color: var(--metric-muted); }
.metric-page .if-result__interpretation { font-size: 14px; line-height: 1.6; }
.metric-page .if-result__interpretation strong { font-size: 21px; font-weight: 550; }
.metric-page .if-result__context { color: var(--metric-muted); font-size: 12px; margin-top: 14px!important; }
.metric-page .if-noscript { color: var(--metric-muted); }
.metric-page .if-section-heading--split { gap: 44px; }
.metric-page .if-power-card { padding: 24px; border-color: var(--metric-line); background: white; border-radius: 16px; }
.metric-page .if-power-card--variable { background: var(--metric-surface); border-color: var(--metric-line); }
.metric-page .if-power-card h3 { font-size: 22px; font-weight: 600; }
.metric-page .if-chart-grid { stroke: var(--metric-line); }
.metric-page .if-chart-label { fill: var(--metric-muted); }
/* Color carries the data; chart grids and surrounding surfaces stay neutral. */
.metric-page .metric-chart-line { stroke: var(--metric-accent); }
.metric-page .metric-chart-area { fill: var(--metric-accent); fill-opacity: .12; }
.metric-page .metric-chart-stop { stop-color: var(--metric-accent); }
.metric-page .if-power-stats,.metric-page .if-power-stats div+div { border-color: var(--metric-line); }
.metric-page .if-context-section { padding-block: 36px; background: var(--metric-soft); }
.metric-page .if-context-grid,.metric-page .if-practice { gap: 44px; }
.metric-page .if-context-grid h2 { margin-bottom: 15px; }
.metric-page .if-duration-track { background: #e5e5e5; }
.metric-page .if-duration-track>span { background: var(--metric-accent); }
.metric-page .if-practice>p { font-size: 15px; line-height: 1.65; }
.metric-page .if-faq { max-width: none; padding-block: 0 30px; }
.metric-page .if-faq h2 { margin-bottom: 22px; }
.metric-page .if-faq summary { font-size: 14px; padding-block: 19px; }
.metric-page .if-faq details p { font-size: 14px; line-height: 1.75; padding-bottom: 24px; }

@media(max-width:950px) {
  .metric-page .metric-hero,.metric-page .if-lab__grid { grid-template-columns: minmax(0,1fr) 290px; gap: 28px; }
  .metric-page .if-dashboard { padding: 21px; }
  .metric-page .if-dashboard__value>span { font-size: 70px; }
  .metric-page .if-dashboard__value strong { font-size: 21px; }
  .metric-page .if-dashboard__stats div>span { font-size: 10px; }
  .metric-page .if-result__number { font-size: 82px; }
}
@media(max-width:700px) {
  .metric-page .shell { width: calc(100% - 36px); }
  .metric-page .metric-nav { min-height: 68px; gap: 16px; }
  .metric-page .metric-nav .brand { gap: 10px; }
  .metric-page .metric-nav .brand__badge { width: 32px; height: 35px; flex-basis: 32px; }
  .metric-page .metric-nav .brand__badge img { width: 32px; height: 35px; }
  .metric-page .metric-nav .brand__type { font-size: 19px; }
  .metric-page .metric-nav nav { font-size: 12px; }
  .metric-page .metric-nav nav a { gap: 8px; }
  .metric-page .metric-nav nav span { font-size: 20px; }
  .metric-page .metric-breadcrumb { padding-block: 20px 24px; font-size: 12px; }
  .metric-breadcrumb li+li::before { margin-inline: 10px; }
  .metric-page .metric-hero { grid-template-columns: 1fr; gap: 24px; padding-block: 0 27px; }
  .metric-page .metric-hero h1 { font-size: 42px; line-height: 1.04; }
  .metric-page .metric-hero .metric-lead { font-size: 15px; line-height: 1.55; margin-top: 18px!important; max-width: none; }
  .metric-page .metric-hero .button { margin-top: 20px; }
  .metric-page .if-hero__copy { max-width: none; }
  .metric-page .if-dashboard { max-width: none; padding: 22px; }
  .metric-page .if-dashboard__value>span { font-size: 80px; }
  .metric-page .if-hero-chart { max-height: 150px; }
  .metric-page .tss-reference { justify-self: stretch; width: 100%; margin-top: 0; padding: 14px 16px; border-radius: 10px; display: flex; align-items: center; gap: 13px; }
  .metric-page .tss-reference>p { display: none; }
  .metric-page .tss-reference-number { margin: 0; gap: 4px; }
  .metric-page .tss-reference strong { font-size: 36px; }
  .metric-page .tss-reference-number>span { font-size: 12px; }
  .metric-page .tss-reference-bottom { margin: 0; border-left: 1px solid var(--metric-line); padding-left: 13px; gap: 8px; flex: 1; }
  .metric-page .tss-reference-bottom>span { font-size: 12px; }
  .metric-page .tss-reference-bottom>span br { display: none; }
  .metric-page .tss-reference svg { width: 25px; height: 25px; flex-shrink: 0; }
  .metric-page .tss-reference small { font-size: 9px; margin: 0; max-width: 65px; line-height: 1.3; }
  .metric-page .if-index { grid-template-columns: 1fr 1fr; gap: 13px 18px; font-size: 12px; padding-block: 17px; }
  .metric-page.if-page h2 { font-size: 25px; }
  .metric-page .if-section,.metric-page .if-lab,.metric-page .if-context-section { padding-block: 27px; }
  .metric-page .if-formula { margin-top: 22px; }
  .metric-page .if-formula__symbol { font-size: 40px; }
  .metric-page .if-formula__operator { padding: 6px 0; }
  .metric-page .if-formula__result { background: var(--metric-soft); }
  .metric-page .if-lab__grid { grid-template-columns: 1fr; gap: 24px; }
  .metric-page .if-result { max-width: none; padding: 23px; }
  .metric-page .if-result__number { font-size: 86px; }
  .metric-page .if-section-heading--split,.metric-page .if-context-grid,.metric-page .if-practice { gap: 24px; }
  .metric-page .if-section-heading--split>p:last-child { max-width: none; }
  .metric-page .if-faq { padding-block: 0 27px; }
  .metric-page .if-faq summary { font-size: 13px; padding-block: 17px; }
  .metric-page .if-faq details p { font-size: 13px; }
  .metric-page .metric-footer>.shell { flex-wrap: wrap; gap: 18px; }
  .metric-page .metric-footer .brand__type { font-size: 17px; }
  .metric-page .metric-footer nav { gap: 12px 22px; }
  .metric-page.library-page main { padding-bottom: 27px; }
  .metric-page .library-intro { margin-bottom: 27px; }
  .metric-page .library-intro h1 { font-size: 42px; }
}
@media(max-width:350px) {
  .metric-page .shell { width: calc(100% - 28px); }
  .metric-page .metric-nav .brand__type { font-size: 17px; }
  .metric-page .metric-nav nav { font-size: 11px; }
  .metric-page .metric-hero h1,.metric-page .library-intro h1 { font-size: 38px; }
  .metric-page .if-dashboard { padding: 20px; }
  .metric-page .if-dashboard__value>span { font-size: 72px; }
}

/* Centered text tabs; a small brush-like underline carries the selection. */
.metric-page .tss-methods {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 560px);
  gap: 18px;
  padding: 0;
  margin: 0 auto 34px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.metric-page .tss-methods button {
  position: relative;
  min-width: 0;
  min-height: 52px;
  padding: 12px 6px 18px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--metric-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  box-shadow: none;
  transition: color .15s;
}
.metric-page .tss-methods button:hover { background: transparent; color: var(--metric-ink); }
.metric-page .tss-methods button[aria-pressed=true] {
  background: transparent;
  color: var(--metric-ink);
  font-weight: 650;
  box-shadow: none;
}
.metric-page .tss-method-label { position: relative; }
.metric-page .tss-method-label::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -10px;
  height: 5px;
  border-radius: 65% 40% 55% 35%;
  background: var(--metric-accent);
  opacity: 0;
  transform: scaleX(.65) rotate(-2deg);
  transition: transform .16s;
}
.metric-page .tss-methods button[aria-pressed=true] .tss-method-label::after {
  opacity: 1;
  transform: scaleX(1) rotate(-2deg);
}
.metric-page .tss-methods button:focus-visible { z-index: 1; outline-offset: 2px; }
.metric-page .tss-reference strong { font-size: 68px; }
.metric-page .tss-reference-bottom>span { font-size: 15px; }
.metric-page .tss-reference small { color: var(--metric-muted); }
.metric-page .tss-result {
  background: var(--metric-surface);
  border: 1px solid var(--metric-line);
  border-radius: 12px;
  color: var(--metric-ink);
}
.metric-page .tss-result-method,.metric-page .tss-result-note { color: var(--metric-muted); }
.metric-page .tss-result-math { border-color: var(--metric-line); }
.metric-page .tss-result[data-state=missing] { background: var(--metric-soft); color: var(--metric-muted); }
.metric-page .tss-slider { background: linear-gradient(to right,var(--metric-accent) 0%,var(--metric-accent) var(--fill,40%),#dedede var(--fill,40%),#dedede 100%); }
.metric-page .tss-slider::-webkit-slider-thumb { background: var(--metric-accent); border-color: var(--metric-paper); box-shadow: 0 0 0 1px var(--metric-accent); }
.metric-page .tss-slider::-moz-range-thumb { background: var(--metric-accent); border-color: var(--metric-paper); box-shadow: 0 0 0 1px var(--metric-accent); }
.metric-page .tss-input-wrap,.metric-page .tss-field select,.metric-page .tss-zone-table input { border-color: var(--metric-line); }
.metric-page .tss-zone-switch button[aria-pressed=true] { background: var(--metric-ink); border-color: var(--metric-ink); color: white; }
.metric-page .tss-zone-actions button { background: var(--metric-soft); }
.metric-page .tss-rpe-heading strong { color: var(--metric-accent); }
.metric-page .tss-rpe-options button { background: color-mix(in srgb,var(--metric-accent) var(--rpe-tint,15%),white); border: 1px solid transparent; color: var(--metric-ink); transition: background .15s, border-color .15s, color .15s; }
/* A single color family conveys effort without turning the scale into a rainbow. */
.metric-page [data-rpe="1"] { --rpe-tint: 5%; }
.metric-page [data-rpe="2"] { --rpe-tint: 9%; }
.metric-page [data-rpe="3"] { --rpe-tint: 13%; }
.metric-page [data-rpe="4"] { --rpe-tint: 17%; }
.metric-page [data-rpe="5"] { --rpe-tint: 21%; }
.metric-page [data-rpe="6"] { --rpe-tint: 25%; }
.metric-page [data-rpe="7"] { --rpe-tint: 29%; }
.metric-page [data-rpe="8"] { --rpe-tint: 33%; }
.metric-page [data-rpe="9"] { --rpe-tint: 37%; }
.metric-page [data-rpe="10"] { --rpe-tint: 41%; }
.metric-page .tss-rpe-options button:hover { border-color: var(--metric-accent); }
.metric-page .tss-rpe-options button[aria-pressed=true] { background: var(--metric-accent); border-color: var(--metric-accent); color: white; transform: none; }
.metric-page .tss-zones-visual { background: var(--metric-soft); border-radius: 12px; }
.metric-page .tss-zone-scale>span { background: #e0e0e0; color: #636363; }
.metric-page .tss-zone-scale>.is-current { background: var(--metric-accent); color: white; box-shadow: none; }
.metric-page .tss-zone-takeaway { border-color: var(--metric-line); }
.metric-page .tss-zone-takeaway>strong { color: var(--metric-ink); }
.metric-page .tss-rates { background: var(--metric-soft); }
.metric-page .if-formula__result .if-formula__symbol,.metric-page .if-power-card--variable .if-power-stats div:last-child strong { color: var(--metric-ink); }
.metric-page .library-intro h1 span { color: var(--metric-ink); }
.metric-page .library-term-symbol { background: var(--metric-soft); color: var(--metric-ink); border: 1px solid var(--metric-line); border-radius: 12px; }
.metric-page .library-term:hover { background: #f3f3f3; }
.metric-page .library-term-arrow { color: var(--metric-muted); }
.metric-page.if-page .button--red { background: var(--metric-ink); }
@media(max-width:700px) {
  .metric-page .tss-methods { gap: 10px; margin-bottom: 27px; }
  .metric-page .tss-methods button { font-size: 15px; padding-inline: 4px; }
  .metric-page .tss-reference strong { font-size: 36px; }
  .metric-page .tss-reference-bottom>span { font-size: 12px; }
  .metric-page .tss-result[data-long-score=true] .tss-result-math { border-color: var(--metric-line); }
}
@media(max-width:380px) {
  .metric-page .tss-methods { gap: 4px; }
  .metric-page .tss-methods button { font-size: 13px; padding-inline: 0; }
  .metric-page .tss-method-label::after { left: 0; right: 0; }
}

@media(prefers-reduced-motion:reduce) {
  .metric-page .tss-method-label::after { transition: none; }
}