/* Shared row tracks keep headings, central visuals and upper metric rules aligned. */
.refined-02.symmetry { grid-template-rows:auto minmax(0,1fr) auto; row-gap:0; }
.refined-02.symmetry > .refined-compute,
.refined-02.symmetry > .refined-git.w-02 { display:grid; grid-row:1 / 4; grid-template-rows:subgrid; row-gap:0; padding-block:2rem; }
.refined-02.symmetry > .refined-compute { grid-column:1; }
.refined-02.symmetry > .refined-git.w-02 { grid-column:2; container-type:normal; }
.symmetry .r2-heading, .symmetry .g-heading { align-self:start; }
.refined-02.symmetry .g-heading { display:block; text-align:right; }
.refined-02.symmetry .g-heading > span { display:block; }
.refined-02.symmetry .g-heading h3 { margin:.85rem 0 0; }
.refined-02.symmetry .r2-principal { min-height:0; padding:1.2rem 0; }
.refined-02.symmetry .g-map { container-type:size; height:100%; min-height:0; padding-block:1.1rem; box-sizing:border-box; }
.refined-02.symmetry .g-map .h-grid,
.refined-02.symmetry .h-readout { width:min(100%,420px,calc((100cqh - 1.8rem) * 2)); }
.refined-02.symmetry .h-readout { text-align:right; margin:.6rem 0 0; }
.refined-02.symmetry .r2-pair { margin:0; border-bottom:0; padding:1.3rem 0 0; align-self:stretch; }
.refined-02.symmetry .s-summary { display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1px solid #d9d7cb; padding:1.3rem 0 0; }
.refined-02.symmetry .g-totals { display:contents; border:0; padding:0; margin:0; }
.refined-02.symmetry .g-totals > div { padding:.1rem clamp(.6rem,1.6vw,1.5rem) 0; border:0; }
.refined-02.symmetry .g-totals > div + div,
.refined-02.symmetry .s-summary > .g-source { border-left:1px solid #d9d7cb; }
.refined-02.symmetry .s-summary > .g-source { padding:.1rem clamp(.6rem,1.6vw,1.5rem) 0; align-self:stretch; }
.refined-02.symmetry .s-summary .h-source { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.refined-02.symmetry .s-summary [data-mk] { font-size:min(2.5rem,var(--support-value)); height:var(--support-value); display:flex; align-items:center; }
.refined-02.symmetry .g-totals dd { line-height:1; }
/* 01: understated insets echo the two columns on the compute side. */
/* 02: each metric occupies the center of an equal column. */
.refined-02.s-02 .r2-pair > div,
.refined-02.s-02 .g-totals > div { align-items:center; text-align:center; }
.refined-02.s-02 .s-summary .h-source { align-items:center; }
/* 03: shared horizontal rhythm, open space instead of internal rules. */
.refined-02.s-03 .r2-pair > div + div,
.refined-02.s-03 .g-totals > div + div,
.refined-02.s-03 .s-summary > .g-source { border-left:0; }
.refined-02.s-03 .r2-pair > div,
.refined-02.s-03 .g-totals > div { align-items:center; text-align:center; }
.refined-02.s-03 .s-summary .h-source { align-items:center; }
.refined-02.s-03 .g-map .h-grid { gap:5px; border-radius:0; }
.refined-02.s-03 .h-day { border-radius:0; }
/* 04: short separators and a tighter field make a quieter, precise composition. */
.refined-02.s-04 .r2-pair > div + div,
.refined-02.s-04 .g-totals > div + div,
.refined-02.s-04 .s-summary > .g-source { border-left:0; position:relative; }
.refined-02.s-04 .r2-pair > div + div::before,
.refined-02.s-04 .g-totals > div + div::before,
.refined-02.s-04 .s-summary > .g-source::before { content:""; position:absolute; left:0; top:0; height:2.9rem; width:1px; background:#d9d7cb; }
.refined-02.s-04 .r2-pair > div + div::before { background:#373733; }
.refined-02.s-04 .g-map .h-grid { gap:2px; }
.refined-02.s-04 .h-day { border-radius:1px; }
@media(max-width:820px) {
 .refined-02.symmetry { grid-template-rows:minmax(min-content,1fr) minmax(390px,1fr); }
 .refined-02.symmetry > .refined-compute,
 .refined-02.symmetry > .refined-git.w-02 { grid-column:1; grid-template-rows:auto minmax(0,1fr) auto; }
 .refined-02.symmetry > .refined-compute { grid-row:1; }
 .refined-02.symmetry > .refined-git.w-02 { grid-row:2; }
}
@media(max-width:440px) {
 .refined-02.symmetry .s-summary { grid-template-columns:1.1fr .8fr 1fr; }
 .refined-02.symmetry .g-totals > div,
 .refined-02.symmetry .s-summary > .g-source { padding-inline:.5rem; }
 .refined-02.symmetry .h-source em { white-space:nowrap; }
 .refined-02.s-03 .g-map .h-grid { gap:3px; }
}

.refined-02.symmetry .g-heading h3 { font-size:clamp(1.25rem,2vw,1.9rem); }

/* Selected Centered layout: lower the shared metrics and loosen the token caption. */
.refined-02.symmetry.s-02 > .refined-compute,
.refined-02.symmetry.s-02 > .refined-git.w-02 { padding-bottom:.9rem; }
.refined-02.symmetry.s-02 .r2-token-value > span { margin-top:1.35rem; }

.refined-02.s-02 .h-day[data-date="2026-05-31"] { position:relative; display:grid; place-items:center; }
.refined-02.s-02 .h-day[data-date="2026-05-31"]::after { content:"X"; color:#ffd45a; font:700 clamp(10px,1vw,16px)/1 var(--sans); text-shadow:0 1px 2px #6b5018; pointer-events:none; }

/* Latest Centered composition: inline footer labels and aligned principal visuals. */
.refined-02.symmetry.s-02 > .refined-compute,
.refined-02.symmetry.s-02 > .refined-git.w-02 { padding-bottom:.4rem; }
.refined-02.s-02 .g-totals > div { flex-direction:row; align-items:baseline; justify-content:center; gap:.5rem; padding:1.1rem .3rem 0; }
.refined-02.s-02 .g-totals dt { margin:0; color:#393a32; }
.refined-02.s-02 .s-summary > .g-source { display:flex; align-items:center; justify-content:center; padding-inline:.3rem; }
.refined-02.s-02 .s-summary .h-source { flex-direction:row; align-items:center; gap:.6rem; }
.refined-02.s-02 .h-source em { color:#393a32; }
.refined-02.s-02 .g-map { justify-content:flex-start; padding-top:var(--heatmap-top-inset,1.1rem); }
@media(max-width:1080px) {
 .refined-02.s-02 .g-totals > div { flex-wrap:wrap; align-content:center; padding-top:0; gap:.2rem .35rem; }
}
@media(max-width:820px) {
 .refined-02.s-02 .g-map { justify-content:center; padding-top:1.1rem; }
}

.refined-02.s-02 .g-map .h-grid,
.refined-02.s-02 .h-readout { width:var(--heatmap-field-width,min(100%,420px)); }
.refined-02.s-02 .s-summary { position:relative; }
.refined-02.s-02 .g-totals > div,
.refined-02.s-02 .s-summary > .g-source { align-self:center; padding:0 .3rem; border-left:0; }
.refined-02.s-02 .s-summary::before,
.refined-02.s-02 .s-summary::after { content:""; position:absolute; width:1px; background:#d9d7cb; top:1.3rem; bottom:0; pointer-events:none; }
.refined-02.s-02 .s-summary::before { left:33.333%; }
.refined-02.s-02 .s-summary::after { left:66.666%; }
@media(max-width:440px) {
 .refined-02.s-02 .s-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .refined-02.s-02 .s-summary .h-source { flex-wrap:wrap; justify-content:center; gap:.25rem; }
}