/* Page-specific styles for figures.html ("Where our figures come from") and
   the private figures report built beside it (both by sitebuild/figures.js).
   Shared layout, colours and components live in brand-shared.css. The hero
   and section spacing match privacy.html and about.html. */
  .page-hero{
    padding: 56px 0 8px;
  }
  .page-hero h1{
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 700;
    color: var(--navy-deep);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
  }
  .page-hero .lead{
    color: var(--slate);
    font-size: 16.5px;
    max-width: 680px;
  }
  .page-hero .updated{
    margin-top: 14px;
    font-size: 13px;
    color: var(--slate);
  }

  .page-section{ padding: 34px 0; }
  .page-section + .page-section{ border-top: 1px solid var(--line); }
  .page-section:last-child{ padding-bottom: 64px; }
  .page-section h2{
    font-size: 21px;
    font-weight: 700;
    color: var(--navy-deep);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }
  .page-section p{
    color: var(--slate);
    font-size: 15.5px;
    max-width: 680px;
    margin-bottom: 12px;
  }
  .page-section p:last-child{ margin-bottom: 0; }
  :is(.page-hero, .page-section) a{
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  :is(.page-hero, .page-section) a:hover{ color: var(--brown); }
  :is(.page-hero, .page-section) code{
    font-size: .92em;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 4px;
    overflow-wrap: anywhere;
  }

  /* One card per set of figures: its name, then label and value pairs that
     sit side by side on a wide screen and stack on a phone. */
  .fig-list{
    display: grid;
    gap: 16px;
    max-width: 820px;
  }
  .fig-item{
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 20px;
    background: #fff;
  }
  .fig-item h3{
    font-size: 17px;
    font-weight: 700;
    color: var(--navy-deep);
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .fig-facts div{
    display: grid;
    grid-template-columns: 9.5em minmax(0, 1fr);
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid var(--line);
  }
  .fig-facts dt{
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
  }
  .fig-facts dd{
    font-size: 15px;
    color: var(--slate);
    overflow-wrap: anywhere;
  }
  .fig-facts dd.fig-none{ font-style: italic; }
  .fig-next{
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--brown);
  }
  @media (max-width: 560px){
    .fig-item{ padding: 16px; }
    .fig-facts div{ grid-template-columns: minmax(0, 1fr); gap: 2px; }
  }

  /* The private report's status badges, and a check that left something
     open. */
  .fig-badge{
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
  }
  .fig-badge.is-ok{ background: #e6f4ee; color: #0b6b4f; }
  .fig-badge.is-due{ background: #fbf0e3; color: #8a4b1f; }
  .fig-badge.is-late{ background: #fbe7e3; color: #b4341f; }
  .fig-facts dd.is-warn{ color: #8a4b1f; font-style: normal; }

  /* The private report: years in titles (a badge on its own line) and each
     calculator's version history, folded away. */
  .fig-badge.fig-badge-block{ margin-left: 0; white-space: normal; }
  .fig-item h3 a{ color: inherit; text-decoration: none; }
  .fig-item h3 a:hover{ text-decoration: underline; }
  .fig-history-list{ display: grid; gap: 10px; max-width: 820px; }
  .fig-history{
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 12px 20px;
  }
  .fig-history summary{
    cursor: pointer;
    font-size: 16px;
    color: var(--navy-deep);
  }
  .fig-vnow{ margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--slate); }
  .fig-history ul{ list-style: none; margin: 10px 0 2px; padding: 0; }
  .fig-history li{
    padding: 8px 0;
    border-top: 1px solid var(--line);
    font-size: 15px;
    color: var(--slate);
  }
  .fig-v{ font-weight: 700; color: var(--navy-deep); }
  .fig-vdate{ font-size: 13.5px; color: var(--ink); margin: 0 4px; }
  @media (max-width: 560px){ .fig-history{ padding: 12px 16px; } }

  /* The card providers, one by one, under the card rules on the private
     report. */
  .fig-providers{
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 12px 20px;
  }
  .fig-providers summary{ cursor: pointer; color: var(--navy-deep); }
  .fig-providers ul{ list-style: none; margin: 10px 0 2px; padding: 0; }
  .fig-providers li{ padding: 8px 0; border-top: 1px solid var(--line); color: var(--slate); }
  .fig-providers summary{ font-size: 15px; }
  .fig-providers-note{ margin: 10px 0 0; font-size: 14px; color: var(--slate); }
  .fig-providers li{ font-size: 14.5px; line-height: 1.6; }
  @media (max-width: 560px){ .fig-providers{ padding: 12px 16px; } }
  .fig-providers li .fig-badge{ margin-left: 4px; }
  .fig-provider-kind{ color: var(--ink); }
  .fig-providers a{ color: var(--navy); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }