/* Results view: headline, metric cards, breakdown stacks, footprint squares, tips. */

.view-results { padding-bottom: 24px; }
.results-head { margin-bottom: 28px; }
.results-head h2 { font-size: clamp(36px, 5vw, 56px); }
.results-head h2:focus { outline: none; }
.results-lead { margin: 14px 0 0; font-size: clamp(18px, 2vw, 22px); color: var(--text-muted); max-width: 32em; }

.section-title { font-size: 26px; margin: 0 0 16px; }
.metric-cards, .breakdown, .footprint, .tips { margin-bottom: 40px; }

/* ---------- Metric cards ---------- */
.metric-cards { display: grid; gap: 16px; }
.metric-card {
    --zone: var(--zone-good);
    position: relative;
    padding: 22px 22px 18px;
    border-radius: var(--radius-l);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.metric-card[data-zone="mid"] { --zone: var(--zone-mid); }
.metric-card[data-zone="high"] { --zone: var(--zone-high); }
.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--zone);
}
.metric-title { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.metric-big { margin: 6px 0 4px; }
.metric-value { font-family: var(--font-display); font-size: clamp(44px, 6vw, 64px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-unit { font-size: 16px; color: var(--text-muted); }
.zone-badge { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 18px; padding: 5px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; background: color-mix(in oklab, var(--zone) 14%, transparent); color: color-mix(in oklab, var(--zone), var(--text) 35%); }
.zone-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zone); box-shadow: 0 0 0 0 var(--zone); animation: pulse 2.4s ease-out infinite; }

.compare { display: grid; gap: 8px; }
.compare-row { display: grid; grid-template-columns: minmax(130px, 34%) 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.compare-label { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.compare-label .info-btn { width: 22px; height: 22px; font-size: 12px; }
.compare-track { height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.compare-bar { display: block; height: 100%; border-radius: inherit; background: color-mix(in oklab, var(--text) 35%, transparent); transform-origin: left; }
.compare-num { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.compare-none { grid-column: 2 / -1; font-size: 13px; color: var(--text-muted); font-style: italic; }
.is-you .compare-label { color: var(--text); font-weight: 700; }
.is-you .compare-track { height: 16px; }
.is-you .compare-bar { background: var(--zone); }

/* ---------- Breakdown ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0 0 18px; list-style: none; font-size: 14px; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend li::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--cat); }
.cat-bustad { --cat: var(--cat-bustad); }
.cat-mat { --cat: var(--cat-mat); }
.cat-transport { --cat: var(--cat-transport); }
.cat-fritid { --cat: var(--cat-fritid); }

.stack-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.stack-label { font-size: 14px; font-weight: 600; }
.stack { display: flex; gap: 3px; height: 34px; }
.stack-seg { flex-basis: 0; min-width: 6px; background: var(--cat); transform-origin: left; }
.stack-seg:first-child { border-radius: 10px 0 0 10px; }
.stack-seg:last-child { border-radius: 0 10px 10px 0; }
.stack-seg:only-child { border-radius: 10px; }

.details-table { margin-top: 18px; border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-1); }
.details-table summary { padding: 14px 18px; font-weight: 600; cursor: pointer; }
.details-table[open] summary { border-bottom: 1px solid var(--line); }
.details-table table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.details-table th, .details-table td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--line); }
.details-table th:first-child { text-align: left; }
.details-table tfoot { font-weight: 700; }
.details-table tr:last-child > * { border-bottom: 0; }
.details-table small { font-weight: 400; color: var(--text-muted); }

/* ---------- Footprint squares ---------- */
.footprint-lead { margin: -4px 0 20px; font-size: 17px; }
.squares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; }
.square { margin: 0; display: grid; gap: 10px; text-align: center; font-size: 13px; color: var(--text-muted); }
.square strong { color: var(--text); font-size: 15px; }
.square-frame { position: relative; aspect-ratio: 1; display: flex; align-items: flex-end; justify-content: center; border-bottom: 2px solid var(--line); }
.square-box { display: block; border-radius: 6px; transform-origin: bottom center; }
.is-you .square-box { background: var(--accent); box-shadow: 0 10px 30px color-mix(in oklab, var(--accent) 35%, transparent); }
.is-good .square-box { background: var(--zone-good); }
.is-avg .square-box { background: color-mix(in oklab, var(--text) 30%, transparent); }
.footnote { margin: 12px 0 0; font-size: 12px; color: var(--text-muted); }

/* ---------- Tips ---------- */
.tip-list { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.tip {
    position: relative;
    padding: 18px 20px 18px 56px;
    border-radius: var(--radius-m);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    font-size: 15px;
}
.tip::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 20px;
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 4px;
    background: var(--cat);
    transform: rotate(-45deg);
}
.tip table { border-collapse: collapse; width: 100% !important; margin-top: 10px; font-size: 13px; }
.tip td { border: 1px solid var(--line) !important; padding: 4px 6px; width: auto !important; }

.results-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--zone) 60%, transparent); }
    70%, 100% { box-shadow: 0 0 0 8px transparent; }
}

@media (max-width: 560px) {
    .compare-row { grid-template-columns: 1fr auto; }
    .compare-track { grid-column: 1 / -1; grid-row: 2; }
    .squares { gap: 8px; }
    .stack-row { grid-template-columns: 70px 1fr; }
}