/* Glazing Performance Calculator (open-data beta): page styles. site.css tokens only, so light and dark both work.
   The first block is copied from the live glazing page (our own code); the rest is new for the beta. */

/* ── From tools/glazing-performance/ ── */
.gl-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem 0.1rem; margin-bottom: 0.9rem; background: var(--surface); }
.gl-card h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 0 0 0.6rem; font-weight: 650; display: flex; justify-content: space-between; }
.gl-card.gap { background: var(--surface-2); }
.check-line { display: flex; gap: 0.5rem; align-items: center; font-size: 0.88rem; color: var(--text-2); margin: -0.2rem 0 0.8rem; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-top: 0.9rem; }
@media (max-width: 520px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--surface); padding: 0.7rem 0.8rem; }
.kpi b { display: block; font-family: var(--mono); font-size: 1.25rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.kpi span { font-size: 0.78rem; color: var(--muted); }
.xsec svg { display: block; width: 100%; height: auto; }
.xsec { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.4rem; }
svg .lbl { fill: var(--text-2); font: 500 13px var(--font); }
svg .lbl-s { fill: var(--muted); font: 500 11px var(--font); }
svg .lbl-t { fill: var(--c2); font: 600 12px var(--font); }
svg .glass { fill: var(--c6); fill-opacity: 0.18; stroke: var(--c6); stroke-width: 1.2; }
svg .gapf { fill: var(--surface-2); }
svg .vac { fill: var(--c4); fill-opacity: 0.08; }
svg .coat { stroke: var(--c4); stroke-width: 4; }
svg .pillar { fill: var(--muted); }
svg .sun { stroke: var(--c2); stroke-width: 2; fill: none; }
svg .sunh { fill: var(--c2); }
.swatches { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.9rem; }
.sw { display: flex; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: var(--text-2); }
.sw i { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border-strong); display: inline-block; }
.imp-list { list-style: none; padding: 0; margin: 0.8rem 0 0; font-size: 0.88rem; }
.imp-list li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0; border-top: 1px solid var(--border); color: var(--text-2); }
.imp-list b { color: var(--text); font-weight: 600; }
.imp-msg { font-size: 0.85rem; margin-top: 0.5rem; }
.imp-msg.bad { color: var(--danger); } .imp-msg.ok { color: var(--ok); }

/* ── New for the beta ── */
.gl-sec { margin-top: 1.5rem; }
.gl-prose { margin-top: 3rem; }
.gl-plot-hint { margin: 0.4rem 0 0; }
.gl-btn-row { margin-top: 0.7rem; }
.imp-note { margin: 0 0 0.7rem; color: var(--text-2); font-size: 0.94rem; }
.imp-list li > span { min-width: 0; overflow-wrap: anywhere; }
.imp-list small { display: block; color: var(--muted); }
.pane-info { font-size: 0.82rem; color: var(--text-2); margin: -0.3rem 0 0.7rem; overflow-wrap: anywhere; }
.gl-open-err { margin: 0 0 0.9rem; }
.kpi small { display: block; font-size: 0.78rem; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0.1rem 0 0.15rem; }
.gl-notes { font-size: 0.85rem; color: var(--text-2); margin-top: 0.8rem; }
.gl-notes p { margin: 0 0 0.25rem; }
.gl-notes:empty { display: none; }
.cmp-wrap { overflow-x: auto; margin-top: 0.9rem; max-width: 100%; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
table.cmp caption { text-align: left; font-size: 0.8rem; color: var(--muted); padding: 0 0 0.35rem; caption-side: top; }
table.cmp th, table.cmp td { padding: 0.35rem 0.55rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.cmp th { text-align: left; font-weight: 600; color: var(--text); }
table.cmp tbody th { font-weight: 500; color: var(--text-2); }
table.cmp td { text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 0.82rem; }
table.cmp thead th { text-align: right; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
table.cmp thead th:first-child { text-align: left; }
table.cmp td small, table.cmp th small { display: block; font-size: 0.74rem; }
table.cmp th small { color: var(--muted); font-weight: 400; }
.s-ok { color: var(--ok); }
.s-warn { color: var(--warn); }
.s-bad { color: var(--danger); }
.s-info { color: var(--muted); }
.attrib { font-size: 0.78rem; color: var(--muted); border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 0.6rem; overflow-wrap: anywhere; }
.attrib:empty { display: none; }
.attrib p { margin: 0 0 0.5rem; }
.sw-group { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.sw-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 650; min-width: 5.5rem; }
.cmp-src { font-size: 0.88rem; color: var(--text-2); }
.cmp-src p { margin: 0 0 0.4rem; }
.cmp-color { font-size: 0.86rem; color: var(--text-2); margin-top: 0.9rem; }
.cmp-color .swatches { margin-top: 0.5rem; }
.cmp-color blockquote { margin: 0.6rem 0 0; padding-left: 0.8rem; border-left: 3px solid var(--border); }
.stack-bar { display: block; width: 100%; height: auto; margin: 0.3rem 0 0.6rem; }
.stack-bar text { fill: var(--text-2); font: 500 10px var(--font); }
.stack-bar .glass { fill: var(--c6); fill-opacity: 0.18; stroke: var(--c6); }
.coat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.coat-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem; background: var(--surface); min-width: 0; }
.coat-card h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.coat-card p { font-size: 0.86rem; color: var(--text-2); margin: 0.4rem 0; }
.coat-card table.cmp td { font-size: 0.8rem; }
.mat-list { font-size: 0.85rem; color: var(--text-2); padding-left: 1.2rem; overflow-wrap: anywhere; }
.mat-list li { margin-bottom: 0.35rem; }
.st-summary { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 0.6rem 0; font-size: 0.88rem; color: var(--text-2); }
.st-groups { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.st-groups > li { border-top: 1px solid var(--border); padding: 0.45rem 0; }
.st-groups summary { cursor: pointer; font-size: 0.9rem; }
.st-groups summary b { font-weight: 600; }
.gl-credits p { font-size: 0.9rem; color: var(--text-2); overflow-wrap: anywhere; }
.muted { color: var(--muted); }

/* Phones: the cross-section (viewBox 480 wide) is drawn at about 0.6 scale, so its labels get larger font sizes in
   SVG units to stay about 8.5 to 9 px on screen; the comparison tables get tighter cells so the Δ column fits. */
@media (max-width: 520px) {
    svg .lbl { font-size: 15px; }
    svg .lbl-s { font-size: 15px; }
    svg .lbl-t { font-size: 14px; }   /* larger would collide on narrow triples */
    table.cmp th, table.cmp td { padding: 0.3rem 0.3rem; }
    table.cmp td { font-size: 0.76rem; }
    table.cmp tbody th { font-size: 0.8rem; }
}