/* assets/css/devaluations.css — /devaluations/ hub + per-programme page.
   BEM prefix dv-*. No hex literals outside var(--token, #fallback) (css-hex-guard). */

.dv-hero { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.dv-hero__eyebrow { display: block; font: 600 12px/1.4 var(--mm-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--mm-accent, #FF6810); margin-bottom: 8px; }
.dv-hero__stamp { font: 400 13px/1.5 var(--mm-font-body); color: var(--mm-fg-muted, #4b5563); margin-top: 8px; }
.dv-hero__feeds { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.dv-hero__feeds a { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.4 var(--mm-font-body); color: var(--mm-navy, #0E1F3B); text-decoration: none; border: 1px solid var(--mm-border, #E2E5EA); border-radius: 8px; padding: 6px 12px; }
.dv-hero__feeds svg { width: 16px; height: 16px; }

/* Explicit icon sizing: mm_render_svg_icon() emits the raw SVG source with no
   width/height attribute (house convention leaves sizing entirely to CSS), so
   every class it is called with here needs its own rule rather than relying
   on a container descendant selector. Covers the RSS/JSON feed links above
   and the share button below. */
.dv-icon { width: 16px; height: 16px; flex-shrink: 0; }

.dv-upcoming { margin: 28px 0; }
.dv-upcoming__track { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.dv-upcoming__card { scroll-snap-align: start; flex: 0 0 240px; border: 1px solid var(--mm-border, #E2E5EA); border-radius: 12px; padding: 14px 16px; background: var(--mm-bg-surface, #fff); }
.dv-upcoming__card img { height: 20px; margin-bottom: 8px; }
.dv-upcoming__card .dv-days { font: 600 12px/1.4 var(--mm-font-body); color: var(--mm-accent, #FF6810); }
.dv-upcoming__empty { padding: 18px; text-align: center; color: var(--mm-fg-muted, #4b5563); border: 1px dashed var(--mm-border, #E2E5EA); border-radius: 12px; }

.dv-filter-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0; }
.dv-filter-form select { font: 400 14px/1.4 var(--mm-font-body); padding: 6px 10px; border: 1px solid var(--mm-border, #E2E5EA); border-radius: 8px; }
.dv-filter-form button { font: 500 14px/1.4 var(--mm-font-body); }

.dv-timeline__month { font: 600 14px/1.4 var(--mm-font-body); color: var(--mm-navy, #0E1F3B); margin: 24px 0 10px; }
.dv-row { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--mm-border, #E2E5EA); }
.dv-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dv-row__logo { height: 18px; }
.dv-row__programme { font: 600 14px/1.4 var(--mm-font-body); }
.dv-row__dates { font: 400 13px/1.4 var(--mm-font-body); color: var(--mm-fg-muted, #4b5563); }
.dv-row__summary { font: 400 15px/1.55 var(--mm-font-body); }
.dv-row__source { font: 400 13px/1.4 var(--mm-font-body); color: var(--mm-fg-muted, #4b5563); }

.dv-badge { display: inline-block; font: 600 11px/1.4 var(--mm-font-body); text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; }
.dv-badge--minor { background: var(--mm-navy-50, #F1F3F7); color: var(--mm-navy-500, #5C6981); }
.dv-badge--moderate { background: var(--mm-accent-tint, #FFE8D6); color: var(--mm-accent, #FF6810); }
.dv-badge--major { background: var(--mm-pace-ruby-paper, #F8DAD4); color: var(--mm-pace-ruby, #B53A2B); }
.dv-badge--enhancement { background: var(--mm-pace-on-track-paper, #DBF1E3); color: var(--mm-success, #057A4A); }

.dv-answer { max-width: 760px; margin: 0 auto 24px; padding: 18px 22px; background: var(--mm-bg-alt, #FAF6EF); border-left: 4px solid var(--mm-accent, #FF6810); border-radius: 0 10px 10px 0; font: 400 16px/1.7 var(--mm-font-body); }
.dv-empty { padding: 24px; text-align: center; color: var(--mm-fg-muted, #4b5563); border: 1px dashed var(--mm-border, #E2E5EA); border-radius: 12px; margin: 20px 0; }
.dv-share-btn { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.4 var(--mm-font-body); border: 1px solid var(--mm-border, #E2E5EA); border-radius: 8px; padding: 6px 12px; background: none; cursor: pointer; }

/* Report-a-change form (Task 6). .v2-policy-cta itself is styled by
   design-v2/shell.css, which this standalone public page does not load, so
   .dv-report scopes a light self-contained background here rather than
   depending on the v2 shell's dark-navy card treatment. */
.dv-report { background: var(--mm-bg-alt, #FAF6EF); color: inherit; }
.dv-report .v2-policy-cta__lede,
.dv-report .v2-policy-cta__copy { color: inherit; }
.dv-report-form { max-width: 480px; }
.dv-report-form__row { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.dv-report-form__row label { font: 600 13px/1.4 var(--mm-font-body); }
.dv-report-form__row input,
.dv-report-form__row select,
.dv-report-form__row textarea {
  font: 400 14px/1.4 var(--mm-font-body);
  padding: 8px 10px;
  border: 1px solid var(--mm-border, #E2E5EA);
  border-radius: 8px;
  background: var(--mm-bg-surface, #fff);
  color: inherit;
}
.dv-report-form__row textarea { resize: vertical; }
/* Honeypot: off-screen, not display:none — a naive bot's blind form-filler
   still finds it in the DOM; a real user (and any assistive tech) never
   sees or reaches it (aria-hidden + tabindex="-1" on the field itself). */
.dv-report-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dv-report-form__actions { margin: 4px 0 0; }
.dv-report-form__status { min-height: 1.4em; font: 400 13px/1.4 var(--mm-font-body); margin: 10px 0 0; }

/* Value-history chart (Task 10). Server-rendered inline SVG; .dv-chart__tooltip
   is progressive enhancement only, appended by assets/js/devaluations-chart.js
   and inert (no markup, nothing shown) with JavaScript disabled. */
.dv-chart { margin: 24px 0; position: relative; }
.dv-chart__svg { width: 100%; height: auto; }
.dv-chart__tooltip { position: absolute; pointer-events: none; background: var(--mm-navy, #0E1F3B); color: #fff; font: 500 12px/1.4 var(--mm-font-body); padding: 4px 8px; border-radius: 6px; transform: translate(-50%, -100%); white-space: nowrap; }