/*
 * The report page, over the site's own stylesheet (UX specification §H; restyle of 2026-09-18).
 *
 * A second file, and the only one on the site: `styles.css` is the product's visual system and
 * every page pays for all of it, while these are components no page but the report has. The flow
 * pages are held to 100 KB including their assets (`apps/web/test/page-weight.test.ts`) and sat
 * twelve bytes under it, so a report's worth of components on the shared sheet is paid for by
 * someone waiting on a search result. Tokens, type and every shared component stay in
 * `styles.css`, which this file is loaded after and never repeats.
 *
 * The page is a piece of editorial work and not a data dump, so it is built in three movements: the
 * head says what was read and in whose voice, the summary says what is on the point, and the cards
 * say it in full. The icons carry the subject of a category and never its level — a wave says
 * "flood", not "danger" — because a state that a colour or a shape could carry alone is a state a
 * reader can misread.
 */

/*
 * The ground each state is written on. Declared here and not with the site's tokens because only
 * the report writes on them, and the flow pages are held to a budget that counts every byte of
 * every stylesheet they pull in.
 *
 * Six states, one rule: warm means a source reports something, cool or neutral means it does not.
 * Amber for a reading — a significant flag and a flag present share that ground and are told apart
 * by their ink — slate for an area covered with nothing flagged, plum for a scenario, stone for a
 * context measurement, grey for no data. The saturation is low and even and the lightness the same
 * across all of them, so no state looks graver than another: they are different kinds of answer,
 * not degrees of one.
 *
 * Nothing is green. aa88220 asked for "not green, neutral" on "nessuna segnalazione"; slate keeps
 * the substance of that — it informs and does not reassure — and departs from the letter of
 * "neutral" by the operator's decision of 2026-09-18.
 *
 * The word and the mark still carry the state, so black and white loses nothing. Every pair clears
 * 4.5:1: 6.4, 5.4, 7.2, 7.4, 6.9 and 4.9 in light, 5.0 to 9.1 in dark.
 */
:root {
  --brick-line: #9e2b1b;
  --amber-soft: #fbf3e3;
  --amber-line: #b8730a;
  --slate: #3f4f66;
  --slate-soft: #eaeff5;
  --slate-line: #7089ad;
  --plum: #5a4560;
  --plum-soft: #f2ecf4;
  --plum-line: #8b6f96;
  --stone: #55504a;
  --stone-soft: #f1eee7;
  --stone-line: #a2988a;
  --grey-soft: #eeeeea;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --brick-line: #e07a64;
    --amber-soft: #332a18;
    --amber-line: #e0a44a;
    --slate: #a9c0dc;
    --slate-soft: #1c2531;
    --slate-line: #a9c0dc;
    --plum: #cfb6d8;
    --plum-soft: #2a2130;
    --plum-line: #cfb6d8;
    --stone: #cdc3b2;
    --stone-soft: #262219;
    --stone-line: #cdc3b2;
    --grey-soft: #23241f;
  }
}

:root[data-theme='dark'] {
  --brick-line: #e07a64;
  --amber-soft: #332a18;
  --amber-line: #e0a44a;
  --slate: #a9c0dc;
  --slate-soft: #1c2531;
  --slate-line: #a9c0dc;
  --plum: #cfb6d8;
  --plum-soft: #2a2130;
  --plum-line: #cfb6d8;
  --stone: #cdc3b2;
  --stone-soft: #262219;
  --stone-line: #cdc3b2;
  --grey-soft: #23241f;
}

/* A heading with its icon: the icon is the accent, the word is the heading. */
.report-summary h2,
.report-section h2,
.things-to-know h3,
.parcel-box h2 {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.report-summary h2 .icon,
.report-section h2 .icon,
.things-to-know h3 .icon,
.parcel-box h2 .icon {
  color: var(--accent);
  flex: none;
}

/* How many databases were read on this point, under the coordinates. */
.report-datasets {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s3) 0 var(--s2);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-2);
}

.report-datasets .icon {
  color: var(--accent);
  flex: none;
}

/*
 * The two voices, stated once before anything is read: our reading on sand behind a dashed rule,
 * the source's value on white behind a solid one. The same pair as every box below, so the grounds
 * are learnt here and recognised everywhere else.
 */
.report-voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s2);
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
}

.report-voices .voice {
  padding: var(--s2) var(--s3);
  font-size: var(--t-micro);
  color: var(--ink-2);
  line-height: 1.4;
}

.report-voices .voice-synthesis {
  background: var(--sabbia);
  border: 1.5px dashed var(--accent);
  border-radius: 6px;
}

.report-voices .voice-source {
  background: var(--surface);
  border: 1px solid #c9c7c1;
  border-radius: 2px;
}

/* The overview sentence as figures: the count, what it counts, and which categories it counted. */
.summary-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s2);
  margin: var(--s3) 0 var(--s5);
  padding: 0;
  list-style: none;
}

.summary-counters .counter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius);
}

.summary-counters .counter-toRead {
  border-top-color: var(--accent);
}

.summary-counters .counter-unavailable {
  border-top-color: var(--line-strong);
}

.counter-figure {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.counter-label {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--ink-2);
}

.counter-categories {
  font-size: var(--t-micro);
  color: var(--ink-3);
}

/*
 * What to know about this point: our reading, so it sits on the synthesis ground, labelled, with
 * the source named under every entry. As many entries as there are readings — the heading promises
 * no number, because a number would have to be met by leaving a reading out.
 */
.things-to-know {
  margin: 0 0 var(--s5);
  padding: var(--s4);
  background: var(--sabbia);
  border: 1.5px dashed var(--accent);
  border-radius: 6px;
}

.things-to-know h3 {
  margin: 0 0 var(--s1);
}

.things-lead {
  margin: 0 0 var(--s3);
  max-width: var(--measure);
}

.things-list {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: thing;
}

.things-list .thing {
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.things-list .thing-relevant {
  border-left-color: var(--brick-line);
}

.things-list .thing-present {
  border-left-color: var(--amber-line);
}

.thing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s1);
}

.thing-head .icon {
  color: var(--accent);
  flex: none;
}

.thing-head a {
  font-weight: 700;
  color: var(--ink);
}

.thing-head .level {
  font-size: var(--t-micro);
}

.thing-lead {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 600;
}

.thing-detail {
  margin: var(--s1) 0 0;
  font-size: var(--t-small);
  color: var(--ink-2);
  max-width: var(--measure);
}

.thing-source {
  margin: var(--s2) 0 0;
}

/*
 * The level as a pill, on the ground its state is written on.
 *
 * Only on the report, which is why it is here: the level is the one thing a reader looks for on
 * every card and in every row, and a word in colour is harder to find than a word on a ground. The
 * mark and the word are unchanged and are what carry the state — the ground repeats them, and a
 * printer with no colours loses nothing.
 *
 * Six grounds, one rule: warm where a source reports something, cool or neutral where it does not.
 * Same lightness and the same low saturation across all six, so none of them reads as graver than
 * another — they are different kinds of answer, not degrees of one.
 */
.report-summary .level,
.category-card .level,
.things-list .level {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 3px var(--s2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--grey-soft);
  color: var(--ink-3);
  font-size: var(--t-small);
}

/*
 * A significant flag is written on the ground of a flag present, not on one of its own (operator,
 * 2026-09-18): the two are the same kind of answer — a source reports something here — and the ink
 * and the outline are what tell them apart. On this ground the brick ink clears 6.8:1 in light and
 * 4.8:1 in dark.
 */
.report-summary .level-relevant,
.category-card .level-relevant,
.things-list .level-relevant {
  background: var(--amber-soft);
  border-color: var(--brick-line);
  color: var(--brick);
}

.report-summary .level-present,
.category-card .level-present,
.things-list .level-present {
  background: var(--amber-soft);
  border-color: var(--amber-line);
  /* Not --amber: 3.5:1 on this ground, where --warn clears 5.4:1. */
  color: var(--warn);
}

.report-summary .level-none,
.category-card .level-none,
.things-list .level-none {
  background: var(--slate-soft);
  border-color: var(--slate-line);
  color: var(--slate);
}

.report-summary .level-scenario,
.category-card .level-scenario,
.things-list .level-scenario {
  background: var(--plum-soft);
  border-color: var(--plum-line);
  color: var(--plum);
}

.report-summary .level-context,
.category-card .level-context,
.things-list .level-context {
  background: var(--stone-soft);
  border-color: var(--stone-line);
  color: var(--stone);
}

.report-summary .level-unavailable,
.category-card .level-unavailable,
.things-list .level-unavailable {
  background: var(--grey-soft);
  border-color: var(--line-strong);
  color: var(--ink-3);
}

/*
 * The counters take the grounds of the pills, one state each. The first counts the readings to go
 * through — a significant flag and a flag present together — and stays amber: it counts readings to
 * do, not how grave they are.
 */
.summary-counters .counter-toRead {
  background: var(--amber-soft);
  border-color: var(--amber-line);
  border-top-color: var(--amber-line);
}

.summary-counters .counter-toRead .counter-figure,
.summary-counters .counter-toRead .counter-label {
  color: var(--warn);
}

.summary-counters .counter-none {
  background: var(--slate-soft);
  border-color: var(--slate-line);
  border-top-color: var(--slate-line);
}

.summary-counters .counter-none .counter-figure,
.summary-counters .counter-none .counter-label {
  color: var(--slate);
}

.summary-counters .counter-scenario {
  background: var(--plum-soft);
  border-color: var(--plum-line);
  border-top-color: var(--plum-line);
}

.summary-counters .counter-scenario .counter-figure,
.summary-counters .counter-scenario .counter-label {
  color: var(--plum);
}

.summary-counters .counter-context {
  background: var(--stone-soft);
  border-color: var(--stone-line);
  border-top-color: var(--stone-line);
}

.summary-counters .counter-context .counter-figure,
.summary-counters .counter-context .counter-label {
  color: var(--stone);
}

.summary-counters .counter-unavailable {
  background: var(--grey-soft);
  border-color: var(--line-strong);
  border-top-color: var(--line-strong);
}

.summary-counters .counter-unavailable .counter-figure,
.summary-counters .counter-unavailable .counter-label {
  color: var(--ink-3);
}

/* The state chip on a card head, on the same scale as the level it repeats. */
.chip-relevant {
  background: var(--amber-soft);
  border-color: var(--brick-line);
  color: var(--brick);
}

.chip-present {
  background: var(--amber-soft);
  border-color: var(--amber-line);
  color: var(--warn);
}

.chip-none {
  background: var(--slate-soft);
  border-color: var(--slate-line);
  color: var(--slate);
}

.chip-scenario {
  background: var(--plum-soft);
  border-color: var(--plum-line);
  color: var(--plum);
}

.chip-context {
  background: var(--stone-soft);
  border-color: var(--stone-line);
  color: var(--stone);
}

.chip-unavailable {
  background: var(--grey-soft);
  border-color: var(--line-strong);
  color: var(--ink-3);
}

/* The two notes of a reading: what the class measures, and what it does not. */
.synthesis-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
}

.synthesis-note .icon {
  flex: none;
  margin-top: 2px;
}

.note-meaning .icon {
  color: var(--ink-3);
}

.note-caution .icon {
  color: var(--warn);
}

/* The summary table, read as a table: a row per category, the two voices side by side. */
.summary-table thead th {
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  vertical-align: bottom;
  border-bottom: 1px solid var(--line-strong);
}

.summary-table thead th:first-child {
  border-top-left-radius: var(--radius);
}

.summary-table thead th:last-child {
  border-top-right-radius: var(--radius);
}

.summary-table tbody th,
.summary-table tbody td {
  vertical-align: top;
  border-top: 1px solid var(--line);
}

.summary-table tbody tr:first-child th,
.summary-table tbody tr:first-child td {
  border-top: 0;
}

.summary-category a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration-color: var(--line-strong);
}

.summary-category .icon {
  color: var(--accent);
  flex: none;
}

/*
 * In the table the pill sits on its own line above the phrase, and is as wide as its words.
 * `display: block` put it there and stretched it across the cell, which read as a filled bar.
 */
.summary-table .summary-synthesis .level {
  font-weight: 600;
}

.summary-table .summary-synthesis .level + .summary-phrase {
  margin-top: var(--s1);
}

.summary-precision-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: var(--s1) 0 0;
  max-width: var(--measure);
}

.summary-precision-hint .icon {
  color: var(--ink-3);
  flex: none;
}

/* The card head: the subject's icon, the category, then its state and its scale. */
.card-head {
  align-items: center;
}

.card-head .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

.card-head h2 {
  margin-right: auto;
}

.chip-precision {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}

.chip-precision .icon {
  color: var(--ink-3);
}

@media (max-width: 48rem) {
  .summary-counters {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }

  .summary-table tbody th,
  .summary-table tbody td {
    border-top: 0;
  }

  .card-head .card-icon {
    width: 1.9rem;
    height: 1.9rem;
  }
}

/*
 * ─── At a glance, then click, then open (2026-09-21) ─────────────────────────────────────────────
 *
 * The page reads in three steps. At a glance: the summary, and one map with the point on it. Click:
 * the reader turns on the layers they want. Open: one category at a time, in full. So the summary
 * table folds, the map is one instrument — the list of layers beside the frame — and every card is
 * a row that opens in place, one open at a time.
 */

/* The table the closed cards repeat row by row: whole, folded, one click away. */
.summary-all {
  margin: 0;
}

.summary-all > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  cursor: pointer;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--accent);
  list-style: none;
}

.summary-all > summary::-webkit-details-marker {
  display: none;
}

.summary-all > summary::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}

.summary-all[open] > summary::before {
  transform: rotate(45deg);
}

.summary-all[open] > summary {
  margin-bottom: var(--s2);
}

/*
 * The first screen says what was read and what came out of it, and the map follows at once: the
 * things to know side by side on a wide screen, the parcel as a note under the point rather than a
 * panel. Every word of both is still here.
 */
@media (min-width: 64rem) {
  .things-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.things-list .thing-detail {
  font-size: var(--t-micro);
  line-height: 1.45;
}

.report-head .parcel-box {
  margin: var(--s3) 0 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  background: transparent;
}

.report-head .parcel-box h2 {
  margin: 0 0 var(--s1);
  font-size: var(--t-small);
}

.report-head .parcel-box .source-sentence {
  font-size: var(--t-small);
  max-width: none;
}

.report-head .parcel-box .micro {
  margin: 0;
}

/* ─── The map ─── */

.report-map {
  margin: var(--s6) 0 var(--s6);
  scroll-margin-top: calc(var(--header-h, 57px) + var(--s3));
}

.report-map h2 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s1);
}

.report-map h2 .icon {
  color: var(--accent);
  flex: none;
}

.report-map-lead {
  margin: 0 0 var(--s4);
  color: var(--ink-2);
  font-size: var(--t-small);
  max-width: var(--measure);
}

/*
 * One instrument: the list of layers and the frame side by side, under one border, and the legend
 * of whatever is on under both.
 */
.report-map-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  grid-template-areas:
    'panel map'
    'legend legend';
  align-items: stretch;
}

.map-layers {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: var(--s3) var(--s2) var(--s3) var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}

.map-layers-title {
  float: left;
  width: 100%;
  margin: 0 0 var(--s2);
  padding: 0 var(--s1);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.map-layer-list {
  clear: both;
  flex: 1 1 auto;
  min-height: 0;
  max-height: clamp(24rem, 62vh, 34rem);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.layer-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s2);
  border-radius: var(--radius-sm);
}

.layer-option input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.layer-option input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.layer-option label {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--s2);
  min-width: 0;
  padding: var(--s1) 0;
  font-size: var(--t-small);
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
}

.layer-option label .icon {
  flex: none;
  color: var(--accent);
}

/* A basis of zero: a long name wraps within its own column instead of pushing the icon aside. */
.layer-name {
  flex: 1 1 0;
  min-width: 0;
}

/* The strip stays on the line of its name; only the note of a greyed row goes under it. */
.layer-option:not(.is-unavailable) label {
  flex-wrap: nowrap;
}

.layer-option:hover {
  background: var(--surface-2);
}

.layer-option:has(input:checked) {
  background: var(--accent-soft);
}

.layer-option:has(input:checked) .layer-name {
  font-weight: 650;
}

/* The colours the layer paints, as a strip: the same composited fills as its legend. */
.layer-ramp {
  display: inline-flex;
  flex: none;
  width: 2.4rem;
  height: 0.55rem;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}

.layer-ramp span {
  flex: 1 1 0;
}

/*
 * A category the map cannot draw: listed, in grey, disabled, and saying so in words — a greyed box
 * alone would leave a reader wondering whether it is broken.
 */
.layer-option.is-unavailable label {
  color: var(--ink-3);
  cursor: not-allowed;
}

.layer-option.is-unavailable label .icon {
  color: var(--ink-3);
}

.layer-option.is-unavailable input {
  cursor: not-allowed;
}

.layer-option.is-unavailable:hover {
  background: none;
}

/*
 * No data for this point: a disabled box, grey type, and a note with an empty hatched swatch in
 * place of the colours the layer would have — so the row reads as "nothing here", not only as
 * "cannot be drawn".
 */
.no-data-mark {
  display: inline-block;
  width: 0.9rem;
  height: 0.55rem;
  margin-right: var(--s1);
  vertical-align: middle;
  border: 1px dashed var(--ink-3);
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, transparent 0 2px, var(--line-strong) 2px 3px);
}

.layer-note-no-data {
  font-style: normal;
  font-weight: 600;
}

.layer-note {
  flex: 1 0 100%;
  font-size: var(--t-micro);
  font-style: italic;
  color: var(--ink-3);
  padding-left: calc(18px + var(--s2));
}

.map-clear {
  align-self: flex-start;
  margin: var(--s2) 0 0 var(--s2);
  padding: var(--s1) 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-micro);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.map-layers-toggle {
  display: none;
}

.report-map-figure {
  grid-area: map;
  min-width: 0;
  margin: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.report-map-figure .map-frame {
  height: clamp(24rem, 62vh, 34rem);
}

.report-map-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--line);
}

.map-key {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-weight: 600;
  color: var(--ink-2);
}

.map-key .swatch {
  transform: none;
}

/* The legend of every layer that is on, each under its category's name. */
.map-legend {
  grid-area: legend;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--s4) var(--s5);
  margin: var(--s4) 0 0;
}

.map-legend > h3 {
  grid-column: 1 / -1;
  margin: 0 0 calc(-1 * var(--s2));
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.legend-block {
  min-width: 0;
  padding-top: var(--s2);
  border-top: 2px solid var(--ink);
}

.legend-block h4 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s1);
  font-size: var(--t-body);
}

.legend-block h4 .icon {
  color: var(--accent);
  flex: none;
}

.legend-layer + .legend-layer {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.legend-source {
  margin: 0 0 var(--s2);
  color: var(--ink-3);
}

.legend-layer ul {
  display: grid;
  gap: var(--s1);
  margin: 0 0 var(--s2);
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
}

.legend-layer li {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}

/* The dashed circle in the ink of the page, so the dark theme draws it too. */
.legend-layer .swatch-radius {
  border-color: var(--ink) !important;
}

.legend-note,
.legend-licence {
  margin: 0 0 var(--s1);
  color: var(--ink-2);
}

.legend-failed {
  margin: var(--s1) 0 0;
  color: var(--warn);
  font-weight: 600;
}

@media (max-width: 47.99rem) {
  /* The map first and the whole width of the screen; the list folds under a button below it. */
  .report-map-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'map'
      'panel'
      'legend';
  }

  .report-map-figure {
    border-radius: var(--radius);
  }

  .report-map-figure .map-frame {
    height: min(60vh, 24rem);
    min-height: 17rem;
  }

  .map-layers {
    margin-top: var(--s3);
    padding: var(--s2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  /* The button carries the title on a phone: one line, not two. */
  .map-layers-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .map-layers-toggle:not([hidden]) {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    min-height: 44px;
    padding: 0 var(--s2);
    background: none;
    border: 0;
    font: inherit;
    font-weight: 650;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }

  .map-layers-toggle .icon {
    margin-left: auto;
    transform: rotate(90deg);
    transition: transform 0.18s ease;
  }

  .map-layers-toggle[aria-expanded='true'] .icon {
    transform: rotate(-90deg);
  }

  .map-layers-count:not(:empty) {
    padding: 1px var(--s2);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--t-micro);
  }

  .map-layer-list {
    max-height: none;
    overflow: visible;
    padding-top: var(--s1);
  }

  .layer-option {
    min-height: 44px;
  }
}

@media (min-width: 30rem) and (max-width: 47.99rem) {
  .map-layer-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s2);
  }
}

/* ─── The sections, one open at a time ─── */

/*
 * A list of rows rather than a stack of boxes: a hairline between them, the whole row the thing to
 * click, and the row that is open the one with a ground behind its title.
 */
.category-card,
.report-section:has(> .fold) {
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.category-card + .report-section:has(> .fold) {
  margin-top: var(--s6);
  border-top: 1px solid var(--line);
}

.fold > summary.card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    'icon title level chevron'
    '. glance glance .'
    '. meta meta .';
  align-items: center;
  gap: var(--s1) var(--s3);
  margin: 0;
  padding: var(--s3) var(--s2);
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.fold > summary.card-head::-webkit-details-marker {
  display: none;
}

/* The site's own disclosure mark is replaced by the chevron at the end of the row. */
.fold > summary.card-head::before {
  content: none;
}

.fold > summary.card-head:hover {
  background: var(--surface-2);
}

.fold > summary.card-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fold[open] > summary.card-head {
  background: var(--surface-2);
}

.fold > summary .card-icon {
  grid-area: icon;
}

.fold > summary h2 {
  grid-area: title;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}

.fold > summary > .level {
  grid-area: level;
  justify-self: end;
}

.card-chevron {
  grid-area: chevron;
  display: inline-flex;
  color: var(--ink-3);
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}

.fold[open] > summary .card-chevron {
  transform: rotate(-90deg);
}

.card-glance {
  grid-area: glance;
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.45;
}

.card-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  font-size: var(--t-micro);
}

/* A long precision wraps rather than pushing the page sideways on a phone. */
.card-meta .chip {
  max-width: 100%;
  white-space: normal;
}

.card-source {
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.card-source-name {
  font-weight: 600;
}

.card-quote {
  font-family: var(--mono);
  color: var(--ink-2);
}

.card-quote.is-computed,
.card-note {
  font-family: var(--font);
  color: var(--ink-2);
}

.fold-body {
  padding: var(--s2) var(--s2) var(--s5) calc(2.25rem + var(--s3) + var(--s2));
}

.fold-body > :last-child {
  margin-bottom: 0;
}

/* Where the map used to be: the way to this category's layer on the report map. */
.card-map-link {
  margin: 0 0 var(--s3);
}

.card-map-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  font-weight: 600;
  color: var(--accent);
}

.card-map-link.is-unavailable {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink-3);
  font-style: italic;
}

@media (max-width: 47.99rem) {
  .fold > summary.card-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'icon title chevron'
      '. level .'
      '. glance .'
      '. meta .';
    padding: var(--s3) var(--s1);
    column-gap: var(--s2);
  }

  .fold > summary > .level {
    justify-self: start;
  }

  .fold-body {
    padding: var(--s1) 0 var(--s5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .summary-all > summary::before,
  .card-chevron,
  .map-layers-toggle .icon {
    transition: none;
  }
}

@media print {
  .report-map,
  .report-nav {
    display: none;
  }

  .fold-body {
    padding-left: 0;
  }
}

/* ─── Il report riorganizzato (ADR 0035) ─────────────────────────────── */

/*
 * Three lines on how the report is read, before the report. Neutral ground on purpose: the sand of
 * a reading and the white of a source are what these three lines are about, and a box that wore
 * either of them would be the first thing to contradict them.
 */
.how-to-read {
  margin: 0 0 var(--s5);
  padding: var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.how-to-read h2 {
  display: flex;
  gap: var(--s2);
  align-items: center;
  margin: 0 0 var(--s3);
  font-size: var(--t-h3);
}

.how-to-read ul {
  margin: 0 0 var(--s3);
  padding-left: var(--s4);
}

.how-to-read li + li {
  margin-top: var(--s1);
}

/* The table is no longer behind a fold, so it needs a heading of its own. */
.summary-table-title {
  margin: var(--s5) 0 var(--s2);
  font-size: var(--t-h3);
  font-weight: 600;
}

/* A part gathers its categories under one heading: the hazards, the land around, the climate. */
.report-part {
  margin: var(--s7) 0 0;
  scroll-margin-top: 4rem;
}

.part-title {
  margin: 0 0 var(--s1);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--line-strong);
  font-size: var(--t-h2);
}

.part-lead {
  max-width: var(--measure);
  margin: 0 0 var(--s5);
  color: var(--ink-2);
}

/* The question is the title; the category's own name and the dataset sit under it, small. */
.card-subject {
  display: block;
  margin-top: var(--s1);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Where a source has nothing for the point: one line each, not a card each. */
.no-data-title {
  margin: var(--s5) 0 var(--s1);
  font-size: var(--t-h3);
}

.no-data-lead {
  max-width: var(--measure);
  margin: 0 0 var(--s3);
}

.no-data-list {
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.no-data-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  align-items: baseline;
  padding: var(--s2) var(--s3);
  scroll-margin-top: 4rem;
}

.no-data-row + .no-data-row {
  border-top: 1px solid var(--line);
}

.no-data-name {
  font-weight: 600;
}

.no-data-source {
  margin-left: auto;
  color: var(--ink-3);
}

/*
 * The bar on two levels: each part, then its categories under it. It stays one horizontal strip —
 * the report is read on a phone as often as not — so the second level is a row of its own inside
 * the group rather than an indent nobody would see.
 */
.report-nav .nav-group {
  display: flex;
  flex-direction: column;
  /* The part's chip is as wide as its name, not as wide as the row of categories under it. */
  align-items: flex-start;
  gap: var(--s1);
}

.report-nav .nav-group > ul {
  gap: var(--s1);
}

.report-nav .nav-part {
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
}

.report-nav .nav-group > ul a {
  min-height: 28px;
  font-size: var(--t-micro);
}

/*
 * The lines under a record, behind a panel for the sources whose lists are long (ADR 0035,
 * 30/09). The summary carries the same accent as the other folds on the card, so it reads as
 * something to open; the count beside it says what is inside before it is opened.
 *
 * The site's `details` carries a rule along its top, which here fell between a record and its own
 * lines and read as a separator from the record below: the panel belongs to the line above it.
 */
.source-lines-fold {
  border-top: 0;
  padding-top: 0;
  margin: var(--s1) 0 0 1.6rem;
}

.source-lines-fold > summary {
  color: var(--accent);
  font-weight: 400;
}

.source-lines-fold > summary::before {
  border-right-color: var(--accent);
  border-bottom-color: var(--accent);
}

.source-lines-fold > summary:hover {
  color: var(--ink);
}

.source-lines-fold > *:not(summary) {
  margin-top: var(--s1);
}

.source-lines-name {
  font-style: italic;
}

.source-lines-count {
  color: var(--ink-3);
}

/*
 * One numbered line per record, its other declarations indented under it (operator, 23/09/2026).
 * These live here and not on the shared sheet: only the report has records, and the flow pages are
 * held to 100 KB with their assets (ADR 0035).
 */
.source-records {
  margin: 0;
  padding: 0;
  list-style: none;
}

.source-record + .source-record {
  margin-top: 0.35rem;
}

.source-record-number {
  font-weight: 600;
}

.source-earlier {
  margin: 0.35rem 0 0 1.6rem;
}

.source-earlier-label {
  margin: 0;
  font-style: italic;
}

.source-measurements {
  margin: 0.1rem 0 0;
  padding-left: 1.4rem;
  list-style: disc;
}

.source-measurements li {
  margin: 0;
}