/* Scoped, mobile-first report. Brand palette matches TPP's shared typography. */
.tpp-perf { --perf-ink:var(--tpp-site-ink,#182e3b); --perf-muted:var(--tpp-site-text,#526570); --perf-accent:var(--tpp-site-accent,#d8242f); width:100%; min-width:0; border:1px solid #dce5e8; border-radius:20px; background:#f4f7f7; color:var(--perf-ink); overflow:hidden; text-align:left; font-family:Inter,Arial,sans-serif; box-shadow:0 12px 36px #182e3b08; }
.tpp-perf,.tpp-perf * { box-sizing:border-box; }
.tpp-perf :is(h3,h4,p,ul) { margin:0; padding:0; }
.tpp-perf .tpp-perf-header { display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:14px; padding:22px 18px; background:linear-gradient(115deg,#182e3b,#294650); border-bottom:3px solid var(--perf-accent); }
.tpp-perf .tpp-perf-symbol { display:flex; align-items:center; justify-content:center; width:40px; height:44px; border-radius:12px; background:#ffffff12; color:#ff7b85; }
.tpp-perf-symbol svg { width:25px; height:25px; }
.tpp-perf .tpp-perf-brand h3 { color:#fff; font-size:18px; line-height:1.4; font-weight:650; letter-spacing:-.35px; overflow-wrap:anywhere; }
.tpp-perf .tpp-perf-brand p { margin-top:5px; font-size:12px; line-height:1.6; color:#d6e0e5; }
.tpp-perf .tpp-perf-period { grid-column:2; justify-self:start; padding:6px 12px; border:1px solid #ffffff36; border-radius:30px; color:#fff; background:#ffffff09; font-size:12px; line-height:1.6; font-weight:550; }
.tpp-perf .tpp-perf-body { padding:14px; }
.tpp-perf .tpp-perf-kpis,.tpp-perf .tpp-perf-panels { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.tpp-perf .tpp-perf-panels { margin-top:14px; }
.tpp-perf .tpp-perf-kpi { position:relative; isolation:isolate; min-width:0; overflow:hidden; padding:23px; border:1px solid #e1e8eb; border-radius:15px; background:#fff; }
.tpp-perf .tpp-perf-kpi::before { content:''; position:absolute; z-index:-1; right:-16px; top:-25px; width:95px; height:95px; border-radius:50%; background:#fbf0f1; }
.tpp-perf .tpp-perf-kpi::after { content:''; position:absolute; z-index:-1; right:28px; bottom:-22px; width:64px; height:64px; border:12px solid #fcf4f5; border-radius:50%; }
.tpp-perf .tpp-perf-hours::before { background:#eff4f5; }
.tpp-perf .tpp-perf-hours::after { border-color:#f1f6f6; }
.tpp-perf .tpp-perf-kpi h4 { max-width:95%; color:var(--perf-muted); font-size:11px; line-height:1.6; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.tpp-perf .tpp-perf-value { margin:10px 0 7px; color:var(--perf-ink); font-size:clamp(38px,7vw,52px); line-height:1.1; font-weight:700; letter-spacing:-1.8px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.tpp-perf .tpp-perf-note { color:var(--perf-muted); font-size:12px; line-height:1.6; }
.tpp-perf .tpp-perf-panel { min-width:0; padding:22px 14px; border:1px solid #e1e8eb; border-radius:15px; background:#fff; }
.tpp-perf .tpp-perf-panel-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
.tpp-perf .tpp-perf-panel-head h4 { color:var(--perf-ink); font-size:15px; line-height:1.5; font-weight:650; letter-spacing:-.3px; }
.tpp-perf .tpp-perf-panel-head > span { color:var(--perf-muted); font-size:10px; line-height:1.5; font-weight:650; letter-spacing:.35px; text-transform:uppercase; }
.tpp-perf .tpp-perf-pyramid { display:flex; flex-direction:column; align-items:center; gap:4px; margin:26px 0 18px; list-style:none; }
.tpp-perf .tpp-perf-pyramid li { display:flex; align-items:center; justify-content:center; gap:4px; width:var(--tier-width); min-width:110px; max-width:100%; min-height:32px; padding:7px 8px; border:0; border-radius:5px; background:var(--tier-color); color:var(--tier-text); font-size:11px; line-height:1.5; text-align:center; font-weight:650; overflow-wrap:anywhere; }
.tpp-perf-pyramid li strong { flex-shrink:0; font:inherit; font-variant-numeric:tabular-nums; }
.tpp-perf .tpp-perf-observation { display:flex; justify-content:space-between; align-items:center; gap:14px; border-top:1px solid #e3eaed; padding-top:17px; color:var(--perf-muted); font-size:12px; line-height:1.6; }
.tpp-perf-observation strong { color:var(--perf-ink); text-align:right; }
.tpp-perf .tpp-perf-chart { display:grid; grid-template-columns:repeat(var(--month-count),minmax(0,1fr)); gap:4px; margin-top:24px; padding:0 4px; border-left:1px solid #e1e8eb; border-bottom:1px solid #e1e8eb; background:repeating-linear-gradient(to top,transparent 0,transparent 47px,#f0f3f4 47px,#f0f3f4 48px); }
.tpp-perf .tpp-perf-month { min-width:0; }
.tpp-perf .tpp-perf-track { display:flex; align-items:flex-end; height:190px; }
.tpp-perf .tpp-perf-bar { display:block; width:100%; border-radius:5px 5px 0 0; background:linear-gradient(#87a2ab,#426571); }
.tpp-perf .tpp-perf-month:last-child .tpp-perf-bar { background:linear-gradient(#e15a63,var(--perf-accent)); }
.tpp-perf .tpp-perf-month-label { display:block; margin:0 -2px; padding-block:8px; text-align:center; color:var(--perf-muted); font-size:9px; line-height:1.5; font-weight:550; overflow-wrap:anywhere; }
.tpp-perf .tpp-perf-chart-note { margin-top:13px; color:var(--perf-muted); font-size:11px; line-height:1.6; }
.tpp-perf .tpp-perf-data { margin-top:8px; color:var(--perf-muted); font-size:12px; }
.tpp-perf .tpp-perf-data summary { cursor:pointer; min-height:44px; padding:13px 0; font-weight:550; color:var(--perf-ink); }
.tpp-perf .tpp-perf-data summary:focus-visible { outline:2px solid var(--perf-accent); outline-offset:3px; }
.tpp-perf .tpp-perf-data table { width:100%; border-collapse:collapse; margin:0; font-size:12px; }
.tpp-perf .tpp-perf-data caption { padding-block:8px; text-align:left; color:var(--perf-ink); }
.tpp-perf .tpp-perf-data :is(th,td) { padding:8px; border:1px solid #dce5e8; text-align:left; overflow-wrap:anywhere; }
.tpp-perf .tpp-perf-data :is(th,td):last-child { text-align:right; }
@media(min-width:600px) {
 .tpp-perf { border-radius:24px; }
 .tpp-perf .tpp-perf-header { grid-template-columns:48px minmax(0,1fr) auto; gap:16px; padding:26px; }
 .tpp-perf .tpp-perf-symbol { width:48px; height:48px; }
 .tpp-perf .tpp-perf-period { grid-column:auto; white-space:nowrap; }
 .tpp-perf .tpp-perf-body { padding:24px; }
 .tpp-perf .tpp-perf-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
 .tpp-perf .tpp-perf-kpi { padding:26px; min-height:166px; border-radius:19px; }
 .tpp-perf .tpp-perf-panels { gap:18px; margin-top:18px; }
 .tpp-perf .tpp-perf-panel { padding:26px; border-radius:19px; }
 .tpp-perf .tpp-perf-chart { gap:9px; padding-inline:9px; }
 .tpp-perf .tpp-perf-track { height:216px; }
 .tpp-perf .tpp-perf-month-label { font-size:11px; }
 .tpp-perf .tpp-perf-pyramid li { font-size:12px; }
}
@media(min-width:1000px) {
 .tpp-perf .tpp-perf-panels { grid-template-columns:minmax(0,.6fr) minmax(0,1fr); }
 .tpp-perf .tpp-perf-brand h3 { font-size:20px; }
 .tpp-perf .tpp-perf-statistics { display:flex; flex-direction:column; }
 .tpp-perf .tpp-perf-pyramid { margin-block:29px 20px; }
 .tpp-perf .tpp-perf-observation { margin-top:auto; }
}
/* Short phone viewports need readable month labels, not twelve cramped columns. */
.tpp-perf .tpp-perf-bar { height:var(--bar-level); }
@media(max-width:599px) {
 .tpp-perf .tpp-perf-chart { display:flex; flex-direction:column; gap:10px; padding:0; border:0; background:none; }
 .tpp-perf .tpp-perf-month { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:10px; }
 .tpp-perf .tpp-perf-track { grid-area:1 / 2; display:block; height:14px; border-radius:4px; background:#f3f6f7; }
 .tpp-perf .tpp-perf-bar { width:var(--bar-level); height:100%; border-radius:4px; background:linear-gradient(90deg,#426571,#87a2ab); }
 .tpp-perf .tpp-perf-month:last-child .tpp-perf-bar { background:linear-gradient(90deg,var(--perf-accent),#e15a63); }
 .tpp-perf .tpp-perf-month-label { grid-area:1 / 1; margin:0; padding:0; font-size:11px; line-height:1.5; text-align:left; }
}