/* /compound — scoped; load with job.css */
body.compound {
  --cmp-nominal: #0f766e;
  --cmp-real: #2563eb;
  --cmp-contrib: #94a3b8;
}

body.compound .cmp-meters { display: grid; gap: .65rem; margin: 1rem 0 1.5rem; }
body.compound .cmp-meter { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr 2.5rem; gap: .5rem; align-items: center; font-size: .92rem; }
body.compound .cmp-meter .bar { height: .55rem; background: color-mix(in srgb, var(--accent, #0f766e) 12%, transparent); border-radius: 999px; overflow: hidden; }
body.compound .cmp-meter .bar i { display: block; height: 100%; background: var(--accent, #0f766e); border-radius: inherit; }
body.compound .cmp-meter b { text-align: right; font-variant-numeric: tabular-nums; }

body.compound .cmp-list { margin: 0 0 1.5rem; padding-left: 1.15rem; }
body.compound .cmp-list li { margin: .45rem 0; }
body.compound .cmp-steps { margin: 0 0 1.5rem; padding-left: 1.2rem; }
body.compound .cmp-steps .hint { color: var(--muted, #334155); font-size: .9rem; }

body.compound .cmp-calc-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 860px) {
  body.compound .cmp-calc-grid { grid-template-columns: 1fr; }
}

body.compound .cmp-form {
  display: grid;
  gap: .75rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--accent, #0f766e) 6%, transparent);
  border-radius: 12px;
}
body.compound .cmp-form label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; }
body.compound .cmp-form input {
  font: inherit;
  padding: .55rem .7rem;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 8px;
  background: #fff;
}
body.compound .cmp-form button { margin-top: .25rem; justify-self: start; }

body.compound .cmp-chart { width: 100%; height: auto; display: block; background: #fff; border-radius: 12px; overflow: visible; }
body.compound .cmp-grid { stroke: #e2e8f0; stroke-width: 1; }
body.compound .cmp-line { stroke-width: 2.5; fill: none; }
body.compound .cmp-line.nominal { stroke: var(--cmp-nominal); }
body.compound .cmp-line.real { stroke: var(--cmp-real); }
body.compound .cmp-line.contrib { stroke: var(--cmp-contrib); stroke-dasharray: 4 3; }
body.compound .cmp-axis { fill: #334155; font-size: 11px; font-family: inherit; }

body.compound .cmp-kpis {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
body.compound .cmp-kpis li {
  padding: .75rem .9rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #0f766e) 8%, transparent);
}
body.compound .cmp-kpis span { display: block; font-size: .8rem; color: var(--muted, #334155); }
body.compound .cmp-kpis strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

body.compound .cmp-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: .85rem; font-size: .85rem; }
body.compound .cmp-legend span::before {
  content: '';
  display: inline-block;
  width: .75rem;
  height: .2rem;
  margin-right: .4rem;
  vertical-align: middle;
  border-radius: 2px;
}
body.compound .cmp-legend .nominal::before { background: var(--cmp-nominal); }
body.compound .cmp-legend .real::before { background: var(--cmp-real); }
body.compound .cmp-legend .contrib::before { background: var(--cmp-contrib); }

body.compound .timeline { list-style: none; padding: 0; margin: 0 0 1.5rem; }
body.compound .timeline li { padding: .65rem 0 .65rem 1rem; border-left: 2px solid color-mix(in srgb, var(--accent, #0f766e) 40%, transparent); margin-left: .25rem; }
body.compound .timeline time { display: block; font-size: .8rem; color: var(--muted, #334155); font-weight: 600; }

body.compound .cmp-scenarios { margin: 0 0 1.75rem; }
body.compound .cmp-scenarios h2 { margin-bottom: .35rem; }
body.compound .cmp-scenarios .sub { color: var(--muted, #334155); margin: 0 0 1rem; max-width: 42rem; }
body.compound .cmp-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .75rem;
}
body.compound .cmp-scenario {
  display: grid;
  gap: .35rem;
  text-align: left;
  font: inherit;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent, #0f766e) 22%, transparent);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  color: inherit;
}
body.compound .cmp-scenario:hover,
body.compound .cmp-scenario:focus-visible {
  border-color: var(--accent, #0f766e);
  outline: none;
}
body.compound .cmp-scenario strong { font-size: .98rem; }
body.compound .cmp-scenario span { font-size: .85rem; color: var(--muted, #334155); line-height: 1.35; }
body.compound .cmp-scenario em { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--accent, #0f766e); }

/* Signature: money bridge + shareable calc */
body.compound .cmp-money-bridge {
  margin: 0 0 1.25rem;
  padding: 0.95rem 1.1rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #0f766e 28%, #e2e8f0);
  background: color-mix(in srgb, #0f766e 8%, #fff);
  max-width: 64ch;
}
body.compound .cmp-money-bridge strong { display: block; margin-bottom: 0.35rem; }
body.compound .cmp-money-bridge p { margin: 0 0 0.5rem; }
body.compound .cmp-form .veh-cta.ghost {
  background: transparent; border: 1px solid #0f766e; color: #0f766e; margin-left: 0.4rem;
}
body.compound #cmp-share-hint { margin: 0.45rem 0 0; font-size: 0.85rem; color: #334155; }


.cmp-ab-lab,.cmp-goal{margin:1.5rem 0}
.cmp-ab-grid{display:grid;gap:1rem;grid-template-columns:minmax(220px,320px) 1fr}
.cmp-ab-label{font-weight:600;margin:0 0 .5rem}
.cmp-goal-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end}
@media (max-width:800px){.cmp-ab-grid{grid-template-columns:1fr}}


body.compound .cmp-amort{margin:1.5rem 0}
body.compound .cmp-amort table{width:100%;border-collapse:collapse;font-size:.92rem}
body.compound .cmp-amort th,body.compound .cmp-amort td{text-align:right;padding:.35rem .45rem;border-bottom:1px solid color-mix(in oklab,CanvasText 12%,transparent)}
body.compound .cmp-amort th:first-child,body.compound .cmp-amort td:first-child{text-align:left}
body.compound .cmp-amort tr.is-goal{background:color-mix(in oklab,CanvasText 8%,transparent);font-weight:700}
@media print {
  body.compound.cmp-printing-amort header,body.compound.cmp-printing-amort footer,body.compound.cmp-printing-amort .ad-unit,body.compound.cmp-printing-amort .cmp-calc,body.compound.cmp-printing-amort .cmp-ab-lab,body.compound.cmp-printing-amort .cmp-goal,body.compound.cmp-printing-amort [data-cmp-print-amort]{display:none!important}
}

/* P3 embed box on calculator */
.compound .cmp-embed-box textarea.embed-code { width: 100%; font-family: ui-monospace, monospace; font-size: .82rem; }
.compound.cmp-embed-mini .cmp-calc-grid { display: grid; gap: 12px; }

/* ===== VISUAL-DIFF WAVE: growth instrument ===== */
body.compound .tl-vd-instrument { margin:0 0 1.35rem; padding:1rem 1.1rem 1.2rem; border-radius:18px; border:1px solid color-mix(in srgb, #0f172a 18%, #e2e8f0); background:linear-gradient(180deg, color-mix(in srgb, #0f766e 8%, #fff), #fff 42%), #fff; box-shadow:0 18px 40px -28px rgba(15,23,42,.45); }
body.compound .tl-vd-instrument-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 .85rem; }
body.compound .tl-vd-instrument-head h2 { margin:0; font-size:1.08rem; letter-spacing:-.02em; }
body.compound .tl-vd-instrument-head .hint { margin:0; max-width:42rem; }
body.compound.calc-page .cmp-calc-grid > .cmp-form { position:sticky; top:72px; z-index:3; border:1px solid color-mix(in srgb, #0f766e 30%, #e2e8f0); background:linear-gradient(165deg, #0f172a 0%, #134e4a 100%); color:#ecfdf5; box-shadow:0 16px 36px -22px rgba(15,23,42,.55); }
body.compound.calc-page .cmp-calc-grid > .cmp-form label { color:#ccfbf1; }
body.compound.calc-page .cmp-calc-grid > .cmp-form input { background:#f8fafc; color:#0f172a; border-color:transparent; }
body.compound.calc-page .cmp-out { padding:12px; border-radius:14px; border:1px solid #e2e8f0; background:#fff; }
body.compound .cmp-chart { min-height:220px; border:1px solid #e2e8f0; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
body.compound .tl-vd-curve-title { margin:0 0 .55rem; font-size:.92rem; font-weight:800; color:#0f766e; }
@media (max-width:860px) {
  body.compound.calc-page .cmp-calc-grid > .cmp-form { position:static; }
}
body.compound .cmp-kpis span, body.compound .cmp-scenarios .sub, body.compound .timeline time { color: #334155; }
body.compound .cmp-scenario span { color: #374151; }
body.compound .tl-vd-instrument { border-color: rgba(15,23,42,.14); }

/* ===== HUB VISUAL POLISH 2026-09-17: contrast + At-a-Glance / Explore ===== */
/* Aligns with src/data/_hub-visual-polish.json (ui-modern tokens). App-scoped so
 * we do not churn global style.css. Specificity beats ui-modern for these nodes. */
body.compound {
  --ink: #0c1220;
  --ink2: #1a2332;
  --muted: #334155;
  --tl-muted: #334155;
  --tl-explore-min: 168px;
  --tl-glance-min: 158px;
}
body.compound .appname,
body.compound .crumbs a,
body.compound .crumbs span { color: #374151; }
body.compound .hint,
body.compound .sub,
body.compound .stat-note { color: var(--ink2); }
body.compound .tl-viz-kicker,
body.compound .tl-viz-cap { color: #334155; }
body.compound .tl-viz-hint { color: #374151; }
body.compound .tl-viz-packs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tl-explore-min), 1fr));
  gap: 10px;
  align-items: stretch;
}
body.compound .tl-viz-pack {
  grid-column: span 1 !important;
  min-height: 52px;
  padding: 12px 14px;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, .09);
  background: #fff;
  color: #111827;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: var(--tl-shadow, 0 1px 2px rgba(17, 24, 39, .04), 0 4px 16px rgba(17, 24, 39, .05));
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}
body.compound .tl-viz-pack .tl-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #334155;
  opacity: .92;
}
body.compound .tl-viz-pack .tl-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
}
body.compound .tl-viz-pack > span:not(.tl-dot):not(.tl-preview-pop) {
  min-width: 0;
}
body.compound .tl-viz-pack:hover,
body.compound .tl-viz-pack.is-on {
  border-color: color-mix(in srgb, var(--accent, var(--tl-accent, #03C75A)) 42%, #e2e8f0);
  background: #fff;
  text-decoration: none;
  box-shadow: var(--tl-elev, 0 4px 8px rgba(17, 24, 39, .04), 0 16px 40px rgba(17, 24, 39, .08));
  transform: translateY(-1px);
}
body.compound .tl-viz-shell:has(input[value="compact"]:checked) .tl-viz-packs {
  --tl-explore-min: 140px;
  gap: 8px;
}
body.compound .tl-viz-shell:has(input[value="compact"]:checked) .tl-viz-pack {
  min-height: 40px;
  padding: 8px 10px;
  font-size: .8rem;
}
body.compound .tl-viz-panel {
  border-color: rgba(17, 24, 39, .09);
  box-shadow: var(--tl-shadow, 0 1px 2px rgba(17, 24, 39, .04));
}
body.compound .tl-explore-chip,
body.compound .pill,
body.compound a.chip {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
@media (prefers-reduced-motion: reduce) {
  body.compound .tl-viz-pack:hover,
  body.compound .tl-viz-pack.is-on { transform: none; }
}

/* P4-POLISH-2026-09-18 */
body.compound{--cmp-contrib:#334155}
body.compound .cmp-axis{fill:#1f2937}
body.compound .cmp-chart{overflow:visible;background:#fff}
body.compound .cmp-kpis span,body.compound .cmp-amort,body.compound .cmp-amort .hint{color:#1f2937}
body.compound .tl-viz-pack{white-space:normal!important;height:auto!important;align-items:center}
body.compound .tl-viz-pack>span:not(.tl-dot):not(.tl-preview-pop){display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal!important;line-height:1.25;text-overflow:unset!important}
body.compound .p3-tool,body.compound .p3-card,body.compound .p3-out{color:#111827}
body.compound .p3-card{background:#fff}
body.compound .p3-form label,body.compound .p3-checks label{color:#1f2937}

/* P5-POLISH-2026-09-19 */
body.compound .cmp-legend{color:#111827;font-weight:650}
body.compound .job-card h3,body.compound .card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.25}
body.compound .card .sub{color:#1f2937}

/* P6-POLISH-2026-09-19 — goal-seek labels stay near-black */
body.compound .cmp-goal,
body.compound .cmp-goal label,
body.compound .cmp-ab-lab,
body.compound #cmp-goal-out,
body.compound #cmp-share-hint { color: #111827; }
body.compound .cmp-goal input,
body.compound #cmp-goal-target { color: #111827; background: #fff; }

/* MOBILE-390 2026-09-20 — growth chart scrolls inside, meters fit. */
@media (max-width: 430px) {
  html[lang] body.compound,
  html[lang] body.compound :where(p, li, h1, h2, h3, .sub, .lede, label, figcaption) {
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    -webkit-hyphens: none;
  }
  html[lang] body.compound #cmp-chart,
  html[lang] body.compound .cmp-out,
  html[lang] body.compound .cmp-ab-grid,
  html[lang] body.compound figure {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    box-sizing: border-box;
    contain: inline-size;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  html[lang] body.compound .cmp-ab-grid { grid-template-columns: minmax(0, 1fr); }
  html[lang] body.compound .cmp-chart {
    width: 560px;
    min-width: 560px;
    max-width: none;
    height: auto;
  }
  html[lang] body.compound .cmp-meters { max-width: 100%; overflow-x: hidden; }
  html[lang] body.compound .cmp-meter {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1.15fr) minmax(3.25rem, 1fr) 2.35rem;
  }
  html[lang] body.compound .cmp-meter > :first-child {
    min-width: 0;
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  html[lang] body.compound .tl-heat--scores,
  html[lang] body.compound .tl-viz-hbars {
    overflow-x: hidden;
    max-width: 100%;
  }
  html[lang] body.compound .tl-heat-score,
  html[lang] body.compound .tl-viz-hbar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1.15fr) minmax(3.25rem, 1fr) 2.35rem;
  }
  html[lang] body.compound .tl-heat-score-lab,
  html[lang] body.compound .tl-viz-hbar-lab {
    white-space: normal;
    min-width: 0;
    max-width: 100%;
  }
  html[lang] body.compound button,
  html[lang] body.compound select,
  html[lang] body.compound input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  html[lang] body.compound .pill {
    min-height: 44px;
    box-sizing: border-box;
  }
}