/* CO₂ Calculator screens · layout. Visual values come from tokens.css through components.css roles. */

.skip { position: absolute; left: var(--space-16); top: -80px; z-index: 60; }
.skip:focus { top: var(--space-16); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); padding: var(--inset-8) var(--space-16); border-radius: var(--shape-s); }
main:focus { outline: none; }
main.is-entering { animation: page-in var(--dur-400) var(--ease-spatial-soft); }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }

.wrap { max-width: var(--content-max); margin: 0 auto; padding-inline: var(--space-40); position: relative; }
.page { padding-top: var(--space-40); padding-bottom: var(--space-96); }
.page-title { font: var(--headline-l); letter-spacing: var(--tracking-headline); }
.page-lede { font: var(--body-l); color: var(--on-surface-hero-variant); margin-top: var(--space-16); max-width: 60ch; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--inset-12); }
.row { display: flex; flex-wrap: wrap; gap: var(--inset-8); }
.grid-gap { display: grid; gap: var(--space-16); }
.appbar__center .stepper[hidden] { display: none; }
.appbar { transition: box-shadow var(--dur-250) var(--ease-effects); }
body.scrolled .appbar { box-shadow: 0 1px 0 var(--md-surface-container-high); }

/* ---------- Hero with the mint wash, wave and leaves ---------- */
.hero, .page-hero, .report-hero { position: relative; background: var(--surface-hero); overflow: hidden; margin-top: calc(var(--bar-h) * -1); padding-top: var(--bar-h); }
.hero__inner { padding-top: var(--space-96); padding-bottom: 160px; display: grid; justify-items: center; text-align: center; }
.hero__inner .kicker { margin-bottom: var(--space-24); }
.hero__title { font: var(--display-l); letter-spacing: var(--tracking-display); color: var(--on-surface-hero); max-width: 15ch; }
.hero__lede { font: var(--title-l); font-family: var(--font-text); font-weight: 400; color: var(--on-surface-hero-variant); max-width: 46ch; margin: var(--space-24) 0 var(--space-40); }
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 96px; }
.hero__leaves { position: absolute; inset: 0; pointer-events: none; }
.hero__leaf { position: absolute; width: 96px; height: 96px; }
.hero__leaf--a { left: 8%; top: 28%; transform: rotate(-12deg); }
.hero__leaf--b { right: 9%; top: 18%; width: 72px; height: 72px; transform: rotate(28deg) scaleX(-1); }
.hero__leaf--c { right: 18%; bottom: 22%; width: 48px; height: 48px; transform: rotate(-40deg); opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .hero__leaf { animation: drift 9s var(--ease-effects) infinite alternate; }
  .hero__leaf--b { animation-delay: -3s; }
  .hero__leaf--c { animation-delay: -6s; }
}
@keyframes drift { to { translate: 0 -10px; rotate: 6deg; } }

/* ---------- Landing: access cards ---------- */
.access { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24); margin-top: var(--space-16); z-index: 1; }
.access__card { display: grid; gap: var(--space-16); align-content: start; padding: var(--space-40); border-radius: var(--shape-xl); background: var(--md-surface-container-lowest); box-shadow: var(--elev-card), var(--elev-2); }
.access__card--pick { background: var(--md-primary-soft); box-shadow: inset 0 0 0 2px var(--md-primary), var(--elev-2); }
.access__card--pick .tile-icon, .access__card--pick .chip { background: var(--md-surface-container-lowest); }
.access__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--inset-8); }
.access__card .btn { justify-self: start; margin-top: var(--inset-8); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--inset-12); font: var(--body-l); }
.ticks li { display: flex; align-items: center; gap: var(--inset-12); }
.ticks .icon { color: var(--md-primary-text); }
.ticks--no { color: var(--md-on-surface-variant); }
.ticks--no .icon { color: var(--md-on-surface-muted); }

/* How it works */
.how { padding: var(--space-96) 0; }
.how__kicker, .how__title { text-align: center; }
.how__title { font: var(--display-s); letter-spacing: var(--tracking-display); margin: var(--space-16) 0 var(--space-64); }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.how__step { display: grid; gap: var(--inset-8); align-content: start; padding: var(--space-24); border-radius: var(--shape-xl); background: var(--md-surface-container-lowest); box-shadow: var(--elev-card); }
.how__art { width: 100%; height: auto; margin-bottom: var(--space-16); }
.how__art .h-bg { fill: var(--md-primary-soft); }
.how__art .h-card { fill: var(--md-surface-container-lowest); }
.how__art .h-card--on { fill: var(--md-primary-container); }
.how__art .h-dot { fill: var(--md-primary); }
.how__art .h-bar { fill: var(--md-primary-container); }
.how__art .h-bar--on { fill: var(--md-primary); }
.how__art .h-ring { fill: none; stroke: var(--md-surface-container-lowest); stroke-width: 14; }
.how__art .h-ring--on { stroke: var(--md-primary); transform: rotate(-90deg); transform-origin: 58px 56px; }
.how__n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--md-primary); color: var(--md-on-primary); font: var(--label-l); margin-bottom: var(--inset-8); }

.foot { background: var(--md-surface-container); margin-top: var(--space-40); }
.foot__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding-top: var(--space-40); padding-bottom: var(--space-40); }

/* ---------- Page hero (sectors, states) ---------- */
.page-hero__inner { padding-top: var(--space-64); padding-bottom: var(--space-40); display: grid; justify-items: center; text-align: center; }
.page-hero__inner .kicker { margin-bottom: var(--space-16); }
.page-hero__inner .page-title { font: var(--display-m); letter-spacing: var(--tracking-display); max-width: 20ch; }
.page-hero--full { min-height: calc(100vh - 0px); display: grid; align-items: center; }
.art-slot svg { width: 200px; height: 150px; }

/* Sectors */
.sector-grid { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }

/* Action bar */
.action-bar { display: flex; align-items: center; gap: var(--space-16); margin-top: var(--space-40); }
.action-bar__hint { margin-left: auto; text-align: right; }

/* ---------- Data entry ---------- */
.entry { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-40); align-items: start; }
.entry__nav.card--low { background: var(--md-surface-container-lowest); box-shadow: var(--elev-card); }
.entry__nav { position: sticky; top: calc(var(--bar-h) + var(--space-16)); display: grid; gap: var(--space-16); }
.entry__progress { display: grid; gap: var(--inset-8); }
.entry__progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--inset-8); }
.entry__save { justify-self: start; }
.entry__main { min-width: 0; display: grid; gap: var(--space-24); }
.entry__main .action-bar { margin-top: 0; }
.form-card__head { display: flex; gap: var(--space-24); align-items: flex-start; margin-bottom: var(--space-40); }
.tile-icon--lg { width: 64px; height: 64px; border-radius: var(--shape-l); }
.tile-icon--lg .icon { font-size: 32px; }
.form-card__titlerow { display: flex; align-items: center; gap: var(--inset-12); flex-wrap: wrap; }
.form-card__titles p { margin-top: var(--inset-8); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }
.form-grid .span-2 { grid-column: 1 / -1; }
.saved { display: inline-flex; align-items: center; gap: var(--inset-4); font: var(--label-m); letter-spacing: var(--tracking-label); color: var(--md-primary-text); opacity: 0; transform: translateY(4px); transition: opacity var(--dur-250) var(--ease-effects), transform var(--dur-400) var(--ease-spatial); }
.saved.is-on { opacity: 1; transform: none; }
.saved .icon { font-size: 18px; }

/* ---------- Report ---------- */
.report-hero__inner { padding-top: var(--space-40); padding-bottom: var(--space-40); }
.report-hero__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap; margin-bottom: var(--space-40); }
.total { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-40); align-items: center; box-shadow: var(--elev-2); }
.total__main { display: grid; gap: var(--space-16); }
.total__big { font: var(--display-xl); letter-spacing: var(--tracking-display); display: flex; align-items: baseline; gap: var(--inset-12); flex-wrap: wrap; color: var(--md-on-surface); }
.total__unit { font: var(--title-l); color: var(--md-on-surface-variant); }
.total__eq { display: grid; gap: var(--inset-8); align-content: center; padding: var(--space-24); border-radius: var(--shape-l); background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.total__eq .tile-icon { background: var(--md-surface-container-lowest); color: var(--md-tertiary); margin-bottom: var(--inset-8); }
.total__eq .meta { color: var(--md-on-tertiary-container); }

.report { padding-top: var(--space-24); }
#r-guest { margin-bottom: var(--space-24); }
.report__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }
.report__wide { grid-column: 1 / -1; }
.card__tools { margin-left: auto; }
.report__note { display: flex; align-items: center; gap: var(--inset-8); margin-top: var(--space-24); }
.loading__label { display: flex; align-items: center; gap: var(--inset-8); margin-bottom: var(--space-24); color: var(--md-primary-text); }
@media (prefers-reduced-motion: no-preference) { .loading__label .icon { animation: spin 1s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Scope bar */
.report-hero .hero__leaf--b { top: auto; bottom: 12%; right: 2%; }
.report-hero .hero__leaf--c { right: auto; left: 3%; bottom: 40%; }
.scopebar { display: flex; gap: 4px; height: 56px; }
.scopebar span.on-light { color: var(--md-on-surface); }
.scopebar span { min-width: 6px; border-radius: var(--shape-s); transform-origin: left; display: flex; align-items: center; padding: 0 var(--inset-12); font: var(--label-l); color: var(--md-on-primary); white-space: nowrap; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .scopebar span { animation: grow var(--dur-600) var(--ease-spatial-soft) both; } .scopebar span:nth-child(2) { animation-delay: 80ms; } .scopebar span:nth-child(3) { animation-delay: 160ms; } }
@keyframes grow { from { transform: scaleX(0); } }
.scope-legend { list-style: none; margin: var(--space-24) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.scope-legend li { display: grid; grid-template-columns: auto 1fr; gap: var(--inset-4) var(--inset-12); align-items: start; }
.scope-legend .swatch { margin-top: 4px; }
.scope-legend b { font: var(--title-m); }
.scope-legend .v { grid-column: 2; font: var(--headline-s); letter-spacing: var(--tracking-headline); }
.scope-legend .d { grid-column: 2; font: var(--body-s); color: var(--md-on-surface-muted); }

/* Donut */
.donut-wrap { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-24); align-items: center; }
.donut { width: 200px; height: 200px; }
.donut circle { fill: none; stroke-width: 28; }
.donut .seg { transition: stroke-dasharray var(--dur-600) var(--ease-spatial-soft), opacity var(--dur-150) var(--ease-effects); }
.donut:hover .seg:not(:hover) { opacity: .5; }
.donut__total { font: var(--headline-s); fill: var(--md-on-surface); }
.donut__cap { font: var(--body-s); fill: var(--md-on-surface-muted); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--inset-12); }
.donut-legend li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--inset-12); align-items: center; font: var(--body-m); }
.donut-legend .num { font: var(--title-s); }
.donut-legend small { display: block; font: var(--body-s); color: var(--md-on-surface-muted); }

/* Compare */
.compare { display: grid; gap: var(--space-24); }
.cmp { display: grid; gap: var(--inset-8); }
.cmp__row { display: flex; justify-content: space-between; font: var(--label-l); }
.cmp__track { height: 16px; border-radius: var(--shape-full); background: var(--viz-track); overflow: hidden; }
.cmp__fill { height: 100%; border-radius: inherit; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) { .cmp__fill { animation: grow var(--dur-600) var(--ease-spatial-soft) both; } }
.compare__note { margin-top: var(--space-16); }

/* Data quality */
.quality__row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-24); align-items: center; }
.quality__bar { display: flex; gap: 4px; height: 16px; }
.quality__bar span { border-radius: var(--shape-full); }

/* Action cards */
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }
.act { display: grid; gap: var(--space-16); align-content: start; padding: var(--space-24); border-radius: var(--shape-l); background: var(--md-surface-container-low); }
.act .act__effect { font: var(--headline-m); letter-spacing: var(--tracking-headline); color: var(--md-primary-text); }
.act .act__effect small { font: var(--body-m); color: var(--md-on-surface-variant); }
.act p { font: var(--body-m); color: var(--md-on-surface-variant); }
.act .chip { justify-self: start; }

/* What if */
.whatif__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-24); flex-wrap: wrap; margin-bottom: var(--space-24); }
.whatif__result { display: grid; justify-items: end; gap: var(--inset-4); }
.whatif__big { font: var(--display-s); letter-spacing: var(--tracking-display); }
.whatif__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--inset-8); }
.whatif__list label { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-24); border-radius: var(--shape-m); background: var(--md-surface-container-lowest); cursor: pointer; }
.whatif__list .w-name { flex: 1; font: var(--title-m); }
.whatif__list .w-name small { display: block; font: var(--body-s); color: var(--md-on-surface-muted); }
.whatif__list .w-eff { font: var(--title-s); color: var(--md-primary-text); white-space: nowrap; }

.tip { position: fixed; z-index: 70; pointer-events: none; padding: var(--inset-8) var(--inset-12); border-radius: var(--shape-s); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); font: var(--body-s); box-shadow: var(--elev-2); white-space: nowrap; }
.snack-host { position: fixed; left: 50%; bottom: var(--space-24); transform: translateX(-50%); z-index: 80; width: min(calc(100% - 32px), 480px); }

/* Auth dialog */
.dialog--form { text-align: left; }
.dialog--form .dialog__title, .dialog--form > img { text-align: center; margin-left: auto; margin-right: auto; display: block; }
.dialog .perks { list-style: none; padding: 0; margin: var(--space-24) 0; display: grid; gap: var(--inset-12); text-align: left; font: var(--body-m); }
.dialog .perks li { display: flex; gap: var(--inset-12); align-items: flex-start; }
.dialog .perks .icon { color: var(--md-primary-text); }
.dialog__stack { display: grid; gap: var(--inset-8); margin-top: var(--space-24); }
.dialog__stack .btn { width: 100%; }
.dialog__fields { display: grid; gap: var(--space-16); margin-top: var(--space-24); }
.dialog .segmented { display: flex; margin-top: var(--space-16); }
.dialog .segmented button { flex: 1; justify-content: center; }
.user-chip { display: inline-flex; align-items: center; gap: var(--inset-8); height: 40px; padding: 0 var(--space-16) 0 var(--inset-4); border-radius: var(--shape-full); background: var(--md-secondary-container); color: var(--md-on-secondary-container); font: var(--label-l); border: 0; cursor: pointer; }
.user-chip b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--md-primary); color: var(--md-on-primary); font: var(--label-l); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .wrap { padding-inline: var(--space-24); }
  .entry { grid-template-columns: 1fr; gap: var(--space-24); }
  .entry__nav { position: static; }
  .sections { display: flex; overflow-x: auto; gap: var(--inset-8); scrollbar-width: none; }
  .sections li { flex: none; }
  .sections button { width: auto; min-height: 56px; background: var(--md-surface-container-lowest); }
  .sector-grid, .actions { grid-template-columns: repeat(2, 1fr); }
  .how__steps { grid-template-columns: 1fr; }
  .total { grid-template-columns: 1fr; }
  .hero__title { font: var(--display-m); letter-spacing: var(--tracking-display); }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  :root { --bar-h: 64px; }
  .hide-sm { display: none; }
  .appbar__center .stepper { display: none; }
  .wrap { padding-inline: var(--space-16); }
  .page { padding-top: var(--space-24); padding-bottom: 136px; }
  .page-title, .page-hero__inner .page-title { font: var(--headline-l); letter-spacing: var(--tracking-headline); }
  .hero__inner { padding-top: var(--space-64); padding-bottom: 128px; }
  .hero__title { font: var(--display-s-alt); }
  .hero__lede { font: var(--body-l); margin: var(--space-16) 0 var(--space-40); }
  .hero__inner .btn { width: 100%; }
  .hero__leaf--a { left: -16px; top: 12%; width: 64px; height: 64px; }
  .hero__leaf--b { right: -8px; top: 8%; width: 48px; height: 48px; }
  .hero__leaf--c { display: none; }
  .access, .how__steps, .sector-grid, .form-grid, .report__grid, .actions, .scope-legend { grid-template-columns: 1fr; }
  .access { margin-top: var(--space-16); }
  .access__card { padding: var(--space-24); }
  .access__card .btn, .btn-group .btn { justify-self: stretch; width: 100%; }
  .btn-group { width: 100%; flex-direction: column; }
  .how { padding: var(--space-64) 0; }
  .how__title { font: var(--headline-l); margin-bottom: var(--space-40); }
  .page-hero__inner { padding-top: var(--space-40); padding-bottom: var(--space-24); }
  .card--xl { padding: var(--space-24); }
  .form-card__head { gap: var(--space-16); margin-bottom: var(--space-24); }
  .tile-icon--lg { width: 48px; height: 48px; }
  .foot__inner { flex-direction: column; align-items: flex-start; }
  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: var(--space-16);
    background: var(--md-surface-container-lowest); box-shadow: var(--elev-3);
    display: grid; grid-template-columns: auto 1fr; gap: var(--inset-8);
  }
  .action-bar .btn--filled { width: 100%; }
  .action-bar__hint { display: none; }
  .total__big { font: var(--display-l); }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .donut-legend { width: 100%; }
  .quality__row { grid-template-columns: 1fr; }
  .whatif__result { justify-items: start; }
  .whatif__list label { padding: var(--space-16); }
  .card__head { flex-wrap: wrap; }
}

/* ---------- My reports ---------- */
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap; padding-top: var(--space-64); padding-bottom: var(--space-40); }
.dash { display: grid; gap: var(--space-24); padding-top: var(--space-24); }
.dash__head { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--space-16); }
.good { color: var(--md-success); display: inline-flex; align-items: center; gap: var(--inset-4); font-weight: 600; }
.bad { color: var(--md-error); display: inline-flex; align-items: center; gap: var(--inset-4); font-weight: 600; }
.reps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-16); }
.rep { display: grid; grid-template-columns: 180px 1fr auto auto; gap: var(--space-24); align-items: center; padding: var(--space-24); border-radius: var(--shape-l); background: var(--md-surface-container-lowest); box-shadow: var(--elev-card); transition: transform var(--dur-400) var(--ease-spatial), box-shadow var(--dur-250) var(--ease-effects); }
.rep:hover { box-shadow: var(--elev-card), var(--elev-2); transform: translateY(-2px); }
.rep__year { display: grid; gap: var(--inset-8); justify-items: start; }
.rep__y { font: var(--display-s); letter-spacing: var(--tracking-display); }
.rep__body { display: grid; gap: var(--inset-4); min-width: 0; }
.rep__bar { margin-top: var(--inset-8); max-width: 320px; }
.rep__fig { display: grid; justify-items: end; gap: var(--inset-4); text-align: right; }
.rep__t { font: var(--headline-s); letter-spacing: var(--tracking-headline); }
.rep__act { display: flex; align-items: center; gap: var(--inset-8); }
.yoy__bars { display: grid; gap: var(--inset-12); margin-bottom: var(--space-24); }
.yoy__row { display: grid; grid-template-columns: 56px 1fr 96px 72px; gap: var(--space-16); align-items: center; }
.yoy__row > :nth-child(3), .yoy__row > :nth-child(4) { text-align: right; justify-self: end; }
.yoy__track { height: 24px; border-radius: var(--shape-full); background: var(--viz-track); overflow: hidden; }
.yoy__fill { display: block; height: 100%; border-radius: inherit; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) { .yoy__fill { animation: grow var(--dur-600) var(--ease-spatial-soft) both; } }
.yoy__table { background: var(--md-surface-container-low); border-radius: var(--shape-m); }
.years { border: 0; padding: 0; margin: var(--space-24) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--inset-8); }
.years legend { margin-bottom: var(--inset-8); }
.year { position: relative; display: grid; justify-items: center; gap: var(--inset-4); padding: var(--space-16) var(--inset-8); border-radius: var(--shape-m); background: var(--md-surface-container-lowest); cursor: pointer; font: var(--title-l); transition: background-color var(--dur-250) var(--ease-effects), transform var(--dur-400) var(--ease-spatial); }
.year small { font: var(--body-s); color: var(--md-on-surface-muted); }
.year input { position: absolute; opacity: 0; }
.year:has(input:checked) { background: var(--md-primary-soft); box-shadow: inset 0 0 0 2px var(--md-primary); }
.year:has(input:focus-visible) { outline: 3px solid var(--md-primary); outline-offset: 3px; }
.year:active { transform: scale(.96); }
.copy { display: flex; gap: var(--space-16); align-items: center; margin-top: var(--space-24); padding: var(--space-16); border-radius: var(--shape-m); background: var(--md-surface-container-lowest); cursor: pointer; text-align: left; }
.btn--danger { background: var(--md-error); color: var(--md-on-error); }
@media (max-width: 1024px) {
  .rep { grid-template-columns: 140px 1fr; }
  .rep__fig { justify-items: start; text-align: left; }
  .rep__act { justify-content: flex-end; }
}
@media (max-width: 640px) {
  .dash-hero { padding-top: var(--space-40); padding-bottom: var(--space-24); }
  .dash-hero .btn { width: 100%; }
  .rep { grid-template-columns: 1fr; gap: var(--space-16); }
  .rep__year { display: flex; align-items: center; justify-content: space-between; }
  .rep__act .btn--filled, .rep__act .btn--outlined { flex: 1; }
  .yoy__row { grid-template-columns: 44px 1fr auto; }
  .yoy__row > :nth-child(4) { grid-column: 3; }
  .yoy__table th, .yoy__table td { padding: 0 var(--inset-8); }
}

/* ---------- Main navigation ---------- */
.topnav { display: flex; gap: var(--inset-4); }
.topnav[hidden] { display: none; }
.topnav a { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--space-16); border-radius: var(--shape-full); font: var(--label-l); letter-spacing: var(--tracking-label); color: var(--md-on-surface-variant); text-decoration: none; transition: background-color var(--dur-150) var(--ease-effects), color var(--dur-150) var(--ease-effects); }
.topnav a:hover { background: var(--md-surface-container-high); color: var(--md-on-surface); }
.topnav a[aria-current="page"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.menu-btn { display: none; }
.mnav { position: fixed; top: var(--bar-h); left: 0; right: 0; z-index: 19; display: grid; gap: var(--inset-4); padding: var(--inset-8) var(--space-16) var(--space-24); background: var(--md-surface-container-lowest); box-shadow: var(--elev-3); border-radius: 0 0 var(--shape-xl) var(--shape-xl); animation: menu-in var(--dur-400) var(--ease-spatial-soft); }
.mnav[hidden] { display: none; }
.mnav a { display: flex; align-items: center; gap: var(--inset-12); min-height: 56px; padding: 0 var(--space-16); border-radius: var(--shape-m); font: var(--title-m); color: var(--md-on-surface); text-decoration: none; }
.mnav a .icon { color: var(--md-primary-text); }
.mnav a[aria-current="page"] { background: var(--md-secondary-container); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
.foot__nav { display: flex; gap: var(--space-24); }
.foot__nav a { font: var(--label-l); color: var(--md-on-surface-variant); text-decoration: none; }
.foot__nav a:hover { color: var(--md-primary-text); text-decoration: underline; }

/* ---------- Info pages: Partners, Methodology, FAQ ---------- */
.info { display: grid; gap: var(--space-40); padding-top: var(--space-24); }
.info--narrow { max-width: 880px; }
.info__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }
.info__grid--3 { grid-template-columns: repeat(3, 1fr); }
.info__card { display: grid; gap: var(--space-16); align-content: start; padding: var(--space-40); }
.info__card .tile-icon { margin-bottom: var(--inset-8); }
.info__title { font: var(--headline-m); letter-spacing: var(--tracking-headline); margin-bottom: calc(var(--space-16) * -1); }
.info__band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-24); flex-wrap: wrap; margin-bottom: var(--space-40); }
.info__band-head > div { display: grid; gap: var(--inset-8); max-width: 60ch; }
.info__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
.info__list li { display: flex; gap: var(--space-16); padding: var(--space-24); border-radius: var(--shape-l); background: var(--md-surface-container-low); }
.info__list li > .icon { color: var(--md-primary-text); }
.info__list p { margin-top: var(--inset-4); }
.scopes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.scopes .card { display: grid; gap: var(--space-16); align-content: start; }
.scopes__n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: var(--title-m); color: var(--md-on-primary); }
.scopes__n--light { color: var(--md-on-surface); }
.info__std { display: flex; justify-content: space-between; align-items: center; gap: var(--space-24); flex-wrap: wrap; }
.info__std > div:first-child { display: grid; gap: var(--inset-4); }
.faq { display: grid; gap: var(--inset-8); }
.faq details { border-radius: var(--shape-l); background: var(--md-surface-container-lowest); box-shadow: var(--elev-card); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-24); font: var(--title-m); border-radius: var(--shape-l); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "expand_more"; font-family: "Material Symbols Rounded"; font-size: 24px; color: var(--md-on-surface-variant); transition: transform var(--dur-400) var(--ease-spatial); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { background: var(--md-surface-container-low); }
.faq details p { padding: 0 var(--space-24) var(--space-24); color: var(--md-on-surface-variant); max-width: 70ch; }
@media (max-width: 1024px) {
  .topnav { display: none; }
  .menu-btn { display: inline-grid; }
  .info__grid--3, .scopes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .info__grid, .info__list { grid-template-columns: 1fr; }
  .info__card { padding: var(--space-24); }
  .info__band-head .btn, .info__std .btn { width: 100%; }
  .foot__nav { flex-wrap: wrap; gap: var(--space-16); }
}

/* Original copy additions */
.entry__intro { display: grid; gap: var(--inset-4); }
.r-done { margin-bottom: var(--space-16); }
.r-sub { margin-top: var(--inset-8); }
.r-status { display: flex; align-items: center; gap: var(--inset-12); flex-wrap: wrap; }
.access__card > .t-title-m { margin-top: calc(var(--inset-8) * -1); }
/* On phones the snackbar sits above the fixed action bar, never on top of Next */
@media (max-width: 640px) { body:has(.action-bar) .snack-host { bottom: calc(var(--space-16) + 80px); } }