/*
  OrbiVigil — commune fire-danger pages (/risque/).
  Loaded after /styles.css and scoped to the .ov-* classes this template adds;
  it overrides nothing the shared stylesheet defines. Same tokens, same
  restraint: no gradients, no colour that is not carrying information.

  Generated pages: scripts/build_commune_pages.ts.
*/

/* Commune facts line under the H1 — metadata register, not body copy. */
.ov-facts {
  margin-top: var(--space-3, 12px);
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/*
  The danger ladder. The one memorable element on the page, and it earns the
  space by encoding the thing the page exists to explain: the Météo des forêts
  scale has exactly four steps, they are ordinal, and the level applies to a
  whole département. Four equal segments — equal because the scale says nothing
  about how much worse 4 is than 3, and inventing that gradient would be a
  claim we cannot source.
*/
.ov-ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin: var(--space-4, 16px) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--border);
}

.ov-ladder li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1.3;
}

.ov-ladder b {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

/*
  Only danger.js sets this, and only from the live bulletin. A page served
  without JavaScript shows the scale with no step marked — which is honest:
  the HTML itself does not know today's level and must not pretend to.
*/
.ov-ladder li[data-current='true'] {
  background: var(--accent);
  color: var(--accent-foreground);
  box-shadow: inset 0 0 0 2px var(--ring);
}

.ov-ladder li[data-current='true'] b {
  color: var(--accent-foreground);
}

.ov-live {
  margin-top: var(--space-3, 12px);
  font-size: 0.9375rem;
}

/* Set by danger.js when the bulletin is unavailable or flagged stale. */
.ov-live[data-state='stale'] {
  color: var(--muted-foreground);
}

/*
  The caveats under the ladder. Their own class rather than the shared
  .tier-note, which is sized for the inside of a card: read outside one, at
  card size, these run together into grey mass — and the sentence that says
  "this level is departmental, not communal" is the one sentence on the page
  that must not be skimmable.
*/
.ov-note {
  max-width: 68ch;
  margin-top: var(--space-4, 16px);
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ov-note strong {
  color: var(--foreground);
}

.ov-src {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

/* Département index: hundreds of commune links, read by scanning. */
.ov-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px 24px;
  margin: var(--space-4, 16px) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.ov-index a {
  display: block;
  padding: 4px 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ov-index a:hover,
.ov-index a:focus-visible {
  border-bottom-color: var(--border);
}

@media (max-width: 600px) {
  .ov-ladder {
    grid-template-columns: repeat(2, 1fr);
  }
}