:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #000000;
  background: #4b4b4b;
  font-size: 16px;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #4b4b4b;
}

button, input, select {
  font: inherit;
}

.password-gate {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: none;
  place-items: center;
  padding: 1.5rem;
  background: #fcfbfa;
}

.password-gate[hidden] {
  display: none;
}

.password-gate-mark {
  justify-self: start;
  width: clamp(5.5rem, 8vw, 8rem);
  height: auto;
  margin-bottom: 0.75rem;
  background: #363636;
}

.password-gate-pending .password-gate {
  display: grid;
}

.password-gate-pending .app-shell,
.password-gate-pending .glossary-fab,
.password-gate-pending .print-fiche,
.password-gate-pending .print-profile,
.password-gate-pending [data-password-protected] {
  visibility: hidden;
}

.password-gate-card {
  display: grid;
  width: min(100%, 25rem);
  gap: 0.75rem;
}

.password-gate-kicker {
  margin: 0 0 0.25rem;
  color: #617068;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.password-gate-card h1,
.password-gate-card p {
  margin-top: 0;
}

.password-gate-card h1 {
  margin-bottom: 0.5rem;
}

.password-gate-card input {
  width: 100%;
  border: 1px solid #b7bdb8;
  border-radius: 0.25rem;
  padding: 0.8rem 0.9rem;
}

.password-gate-card button {
  justify-self: start;
  border: 0;
  border-radius: 0.25rem;
  background: #009b54;
  color: #ffffff;
  padding: 0.8rem 1rem;
  cursor: pointer;
}

.password-gate-error {
  min-height: 1.5rem;
  margin-bottom: 0;
  color: #a52626;
}

.app-shell {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0;
}

.hero {
  display: grid;
  overflow: hidden;
  border-radius: 0;
  background: #363636;
  color: #ffffff;
  box-shadow: 0 24px 72px rgba(75, 71, 67, 0.08);
}

.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.4vw, 1.35rem);
  color: #f1ce71;
  font-size: 1.2rem;
}

.hero .eyebrow span {
  transform: translateY(calc(clamp(0.75rem, 1.5vw, 1.5rem) + 6px));
  white-space: nowrap;
}

.hero-mark {
  display: block;
  flex: 0 0 clamp(3.1625rem, 5.75vw, 5.4625rem);
  width: clamp(3.1625rem, 5.75vw, 5.4625rem);
  aspect-ratio: 1 / 1;
  background: url('access-study-mark-grey-128.png') center / contain no-repeat;
  transform: translateX(6px);
}

.hero-mark:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
  padding: clamp(0.75rem, 1.5vw, 1.5rem) 2rem;
}

.hero-main {
  display: grid;
  gap: 1rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.75rem;
  font-weight: 700;
  color: #009b54;
  margin: 0;
}

/* ONE CONTINUOUS CURVE, NO BREAKPOINT (K, 2026-09-12).
 *
 * This was two rules: a base `clamp(2.5rem, 4vw, 4.75rem)` and a `min-width: 1101px` override of
 * `clamp(2.25rem, 3.6vw, 4.3rem)`. They did not meet. At a 1100px viewport the title rendered at
 * 44px and at 1101px it dropped to 39.6px, so widening the window made the heading jump SMALLER
 * before it resumed growing. A single clamp cannot do that to itself, which is why the override
 * is gone rather than merely retuned.
 *
 * THE CAP IS SET BY THE ONE-LINE FIT, NOT BY TASTE. The measure above is the binding constraint:
 * at FullHD the hero's left column offers 877px, so `max-width` holds the title to 820px. Set in
 * the fallback stack's Segoe UI Bold, "Access to the Profession Study" needs 989px at the old
 * 68.8px cap - it wrapped on every 1920px desktop. It fits at 57.5px and below; the 3.375rem cap
 * here renders it at 776px, leaving room for Inter, which is the first font named and is wider.
 *
 * 3.06vw is 15% below the 3.6vw it replaces, so the 1500px design width goes 54px -> 45.9px.
 * The 2.5rem floor is the one the old base rule already had, so nothing below 1307px changes. */
.hero h1 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(2.5rem, 3.06vw, 3.375rem);
  line-height: 1;
  /* Where it still wraps - a band around 1100px, where the left column is narrower than the text
   * - break the two lines evenly instead of leaving "Study" alone on the second. Ignored by
   * browsers that do not know it, which simply get today's greedy break. */
  text-wrap: balance;
}

.hero-copy {
  margin: 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.hero-study-areas {
  display: grid;
  gap: 0.85rem;
  width: 69%;
  justify-self: center;
}

/* Top bar in the yellow square: three plain links and a 3x3-dot menu that rolls down the same
 * three items. The links are placeholders for now (dead ends). */
.hero-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}

.hero-topbar-links {
  display: contents;
}

.hero-topbar-link,
.hero-topbar-link:visited {
  display: inline-block;
  color: #000000;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease, transform 160ms ease;
}

.hero-topbar-link:hover,
.hero-topbar-link:focus-visible {
  color: #007f45;
  text-decoration: none;
  transform: translateY(-2px);
}

.hero-menu {
  position: relative;
}

.hero-menu-button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-menu-button:focus-visible {
  outline: 2px solid #363636;
  outline-offset: 3px;
}

.hero-menu-dots {
  display: block;
  width: 21px;
  height: 21px;
  background-image: radial-gradient(circle, #363636 2.2px, transparent 2.6px);
  background-size: 7px 7px;
  background-position: 0 0;
}

.hero-menu-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 11rem;
  padding: 0.5rem 1.25rem;
  background: #fcfbfa;
  box-shadow: 0 14px 40px rgba(75, 71, 67, 0.16);
}

.hero-menu-panel[hidden] {
  display: none;
}

.hero-menu-panel .hero-topbar-link {
  padding: 0.75rem 0;
  border-bottom: 1px solid #d8d2c6;
  white-space: nowrap;
}

.hero-menu-panel .hero-topbar-link:last-child {
  border-bottom: 0;
}

.hero-areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hero-areas li {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  border: 0;
  border-radius: 0;
  background: #f1ce71;
  color: #000000;
  cursor: help;
  transition: background 160ms ease;
}

.hero-areas li:hover {
  z-index: 10;
  background: #d7ad3f;
}

.hero-areas li:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.hero-area-number {
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.14em;
}

.hero-area-name {
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  font-weight: 700;
  line-height: 1.22;
}

.hero-area-tooltip {
  position: absolute;
  bottom: calc(100% + 0.65rem);
  left: 50%;
  z-index: 30;
  width: min(16rem, calc(100vw - 3rem));
  padding: 0.85rem 0.95rem;
  visibility: hidden;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
  color: #000000;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, 0.4rem);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.hero-areas li:hover .hero-area-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

.hero-areas li:nth-child(-n + 2) .hero-area-tooltip {
  top: calc(100% + 0.65rem);
  bottom: auto;
  transform: translate(-50%, -0.4rem);
}

.hero-areas li:nth-child(-n + 2):hover .hero-area-tooltip {
  transform: translate(-50%, 0);
}

.hero-notice {
  display: block;
  border-radius: 0;
  padding: 0.85rem 2rem;
  border: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
}

.hero-notice-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 clamp(2rem, 4vw, 4rem);
  margin: 0;
  color: inherit;
}

.hero-notice-meta span {
  font-weight: 600;
}

.hero-notice-meta a {
  color: inherit;
  text-decoration: none;
}

.hero-notice-meta a:hover,
.hero-notice-meta a:focus-visible {
  color: #ffffff;
}

.panel {
  margin-top: 1.75rem;
  padding: 1.5rem;
  border-radius: 0;
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(75, 71, 67, 0.06);
}

/* Main page: sections sit grey-on-grey directly on the page ground — no white card boxes. The
 * floating country selector is the one card that stays white. Inner labels and content keep
 * their own styling. */
/* Two greys, as in the reference: the page ground stays the lighter grey, sections carry a
 * slightly deeper warm grey instead of white cards. The grey runs as one continuous field from
 * the hero's lower edge to the footer's upper edge: section gaps become internal padding rather
 * than margins, so no page ground shows between them. */
.app-shell .panel:not(.controls) {
  margin-top: 0;
  padding-top: 1.75rem;
  background: #f0ede6;
  box-shadow: none;
}

.app-shell .site-footer {
  margin-top: 0;
}

/* Subpages: fields connect into one continuous surface from the green header to the footer — the
 * former inter-panel gap becomes internal padding. Panels keep their own colours (white, and the
 * light-yellow "How to read" fields). */
.glossary-shell .panel {
  margin-top: 0;
  padding-top: 1.75rem;
  background: #f0ede6;
  box-shadow: none;
}

.glossary-shell .site-footer {
  margin-top: 0;
}

.app-shell .about-study::after {
  display: none;
}

/* The area switch sits low, its rule acting as the division line directly above the
 * Observations header: extra room above the tabs, almost none below. */
.app-shell .panel.area-tabs-panel {
  padding-top: 3rem;
  padding-bottom: 0;
}

.app-shell .panel.table-panel {
  padding-top: 1rem;
}

.controls {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
}

/* Country profiles: the selector has no hero to float across — the page opens on the standard
 * green sub-page header — so it stops being a white card straddling an edge and joins the grey
 * field like every other section. It is set DOWN from the header by its own top padding rather
 * than pulled up over it, which is what the negative margins below 1101px+ are for on the
 * landing page. Specificity, not order, beats the floating rule further down the file. */
.profiles-shell .panel.controls {
  width: auto;
  margin: 0;
  padding-top: 3rem;
  background: #f0ede6;
  box-shadow: none;
}

@media (min-width: 1101px) {
  /* The same 3.5% alignment lines every other grey section on the page sits on. */
  .profiles-shell .panel.controls {
    padding-right: calc(min(100vw, 1500px) * 0.035);
    padding-left: calc(min(100vw, 1500px) * 0.035);
  }
}

.about-study {
  position: relative;
  border-left: 0;
  background: #f1ce71;
}

.about-study::after {
  position: absolute;
  right: 0;
  bottom: var(--about-zigzag-bottom, -1.2rem);
  left: 0;
  height: var(--about-zigzag-height, 1.2rem);
  background: #f1ce71;
  clip-path: var(--about-zigzag-path, polygon(0 0));
  content: '';
  pointer-events: none;
}

.about-study-content {
  width: 100%;
}

.about-study h2 {
  margin: 0 0 1.5rem;
  padding: 0;
  background: transparent;
  font-size: 1.7rem;
}

.about-study p {
  margin: 0;
  color: #293e35;
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: justify;
}

.about-study p + p {
  margin-top: 0.85rem;
}

.about-study p:last-child {
  margin-top: 0.85rem;
  margin-bottom: 1.7em;
  font-weight: 700;
  font-size: 1.25rem;
}

/* Study in numbers: a rule-framed strip of figures above the call to action. */
.about-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  /* Asymmetric: full space above, none below — the card field that follows carries the rest. */
  margin: 1.25rem 0 0;
  padding: 0.7rem 0;
  border-top: 1px solid #b8b2a6;
  border-bottom: 1px solid #b8b2a6;
}

.about-stat {
  display: grid;
  gap: 0.2rem;
}

.about-stat-label {
  color: #000000;
  font-size: 1rem;
  font-weight: 750;
}

.about-stat-value {
  margin: 0;
  color: #000000;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Narrow screens: the strip becomes a tidy grid of smaller figures instead of a wrapping row —
 * three columns on tablets, two on phones. */
@media (max-width: 900px) {
  .about-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }

  .about-stat-label {
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .about-stat-value {
    font-size: 1.3rem;
  }
}

@media (max-width: 560px) {
  .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The closing line doubles as the way in: clicking it rolls down the country selector. Styled as
 * text, no underline — the pointer alone signals it. */
.about-study-cta {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.control-group {
  display: grid;
  gap: 0.5rem;
}

.control-group label {
  font-weight: 700;
}

.control-group input,
.control-group select {
  width: 100%;
  min-height: 3rem;
  border: 1px solid #b7bdb8;
  border-radius: 0;
  padding: 0.9rem 1rem;
  background: #fcfbfa;
}

@keyframes country-prompt-text-blink {
  0%,
  100% {
    color: #000000;
  }

  50% {
    color: transparent;
  }
}

#countrySelect.prompt-attention-blink {
  animation: country-prompt-text-blink 600ms ease-in-out 2s 3;
}

@media (prefers-reduced-motion: reduce) {
  #countrySelect.prompt-attention-blink {
    animation: none;
  }
}

/* Area switch: a tab row on a hairline rule; the active tab carries a gold underline that overlays
 * the rule. Numbers are muted, names bold. */
.area-tabs-panel {
  padding-bottom: 0;
}

/* Four equal columns: each tab owns a quarter of the strip, so the active underline is exactly
 * one quarter wide and the labels start on the same grid lines. */
.area-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  column-gap: 1.5rem;
  border-bottom: 1px solid #d8d2c6;
}

.area-tab {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.7rem;
  width: 100%;
  margin-bottom: -1px;
  text-align: left;
  padding: 0.5rem 0 0.4rem;
  border: 0;
  border-bottom: 24px solid transparent;
  background: none;
  color: #000000;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}

.area-tab:hover,
.area-tab:focus-visible {
  border-bottom-color: #e8d9a6;
}

.area-tab.active {
  border-bottom-color: #d7ad3f;
}

.area-tab-number {
  white-space: nowrap;
  color: #8a8478;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Country block: name with code · group beside it, a rule, then a labelled "Regulatory model" row. */
.country-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #d8d2c6;
}

.country-title-row h2 {
  margin: 0;
  font-size: clamp(2.1rem, 3.4vw, 3.4rem);
  line-height: 1;
}

.country-title-meta {
  margin: 0;
  color: #000000;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.country-meta-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: start;
}

/* Same voice as an indicator name in the observations table ("Governing law"). */
.country-meta-label {
  color: #000000;
  font-size: 1.1rem;
  font-weight: 750;
  line-height: 1.6;
}

.country-meta-value {
  margin: 0;
  color: #000000;
  font-size: 1.1rem;
  line-height: 1.6;
}

.country-meta-value p {
  margin: 0 0 0.5rem;
}

.country-meta-value p:last-child {
  margin-bottom: 0;
}

/* Generated profile summary: full width beneath the model row, in the smaller hint size. */
.country-profile-summary {
  color: #293e35;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.country-profile-summary p {
  margin: 0 0 0.45rem;
}

.country-profile-summary p:last-child {
  margin-bottom: 0;
}

/* Side selector: a white card with one row per destination (sub-national record, comparative
 * findings). Rows are separated by hairlines; a hidden row simply leaves the card shorter. */
.summary-nav {
  display: grid;
  align-content: start;
  /* The text block was raised 10px; the card sits 5px below its former position. */
  margin-top: 15px;
  padding: 0.5rem 1.5rem;
  background: #fcfbfa;
  box-shadow: 0 14px 40px rgba(75, 71, 67, 0.06);
}

.summary-nav-link,
.summary-nav-link:visited {
  display: block;
  padding: 1.04rem 0;
  border-bottom: 1px solid #d8d2c6;
  color: #000000;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 160ms ease;
}

.summary-nav-link:last-child {
  border-bottom: 0;
}

.summary-nav-icon {
  flex: 0 0 auto;
  margin-left: 0.75rem;
  vertical-align: -0.2em;
}

/* The two print actions are buttons in the same list; strip the button chrome so they read as rows. */
button.summary-nav-link {
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.summary-nav-link[hidden] {
  display: none;
}

.summary-nav-link:hover,
.summary-nav-link:focus-visible {
  color: #009b54;
}

@keyframes subnational-button-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

.summary-nav-link.attention-blink {
  animation: subnational-button-blink 600ms ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
  .summary-nav-link.attention-blink {
    animation: none;
  }
}

/* Mobile: the four tabs stack, each on its own hairline; the active one carries the gold line. */
@media (max-width: 720px) {
  .area-tabs {
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 0;
  }

  .area-tab {
    margin-bottom: 0;
    padding: 0.85rem 0;
    border-bottom: 1px solid #d8d2c6;
    font-size: 1.1rem;
    white-space: normal;
  }

  .area-tab.active {
    border-bottom: 6px solid #d7ad3f;
  }
}

.country-summary {
  background: #ffffff;
}

.country-summary-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.36fr);
  gap: 3rem;
  align-items: start;
}

.country-summary-copy {
  min-width: 0;
}

.country-summary .detail-head {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}

.country-summary h2 {
  margin: 0.25rem 0 0;
}

.area-label {
  display: inline-flex;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background: #f1ce71;
  color: #000000;
  font-weight: 700;
  white-space: nowrap;
}

.indicator-name,
.indicator-qualifier {
  display: block;
}

.indicator-name {
  color: #000000;
  font-weight: 750;
}

.indicator-qualifier {
  margin-top: 0.3rem;
  color: #707070;
  font-size: 0.78rem;
  line-height: 1.35;
}

.country-meta {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.country-meta p {
  min-width: 0;
  margin: 0;
  color: #293e35;
}

.country-meta code {
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.dashboard-section-label {
  font-size: 1.2rem;
  font-weight: 700;
}

/* Data summary: no cards — figures and provenance sit on the grey field under a thin rule, in the
 * same voice as the observations table (bold indicator-style labels, plain values). */
.summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3.5rem;
}

.stat-card {
  padding: 0;
  border: 0;
  background: none;
}

.stat-card .label {
  margin: 0;
  color: #000000;
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.stat-number {
  margin: 0.2rem 0 0;
  color: #000000;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.table-panel {
  overflow: hidden;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.table-header .label {
  margin: 0 0 0.25rem;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.table-action {
  width: 16rem;
  background: #ffffff;
  font-weight: 700;
  transition: border-color 160ms ease, color 160ms ease;
}

/* Print buttons on the findings and sub-national pages: a white row-button with the printer icon,
 * the same voice as the print rows in the country card. */
.print-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.5rem;
  border: 0;
  border-radius: 0;
  background: #fcfbfa;
  box-shadow: 0 14px 40px rgba(75, 71, 67, 0.06);
  color: #000000;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease;
}

.print-button:hover,
.print-button:focus-visible {
  color: #009b54;
}

.print-button-icon {
  flex: 0 0 auto;
}

/* Comparative-sources selector: a square box that fills dark green when on, label beside it. */
.sources-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  color: #000000;
  -webkit-user-select: none;
  user-select: none;
}

.sources-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sources-toggle-box {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #363636;
  background: #fcfbfa;
  box-shadow: inset 0 0 0 3px #fcfbfa;
  transition: background 160ms ease;
}

.sources-toggle input:checked + .sources-toggle-box {
  background: #363636;
}

.sources-toggle input:focus-visible + .sources-toggle-box {
  outline: 2px solid #009b54;
  outline-offset: 3px;
}

.table-action:hover,
.table-action:focus-visible {
  border-color: #007f45;
  background: #ffffff;
  color: #007f45;
}

.hint {
  margin: 0;
  color: #293e35;
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #009b54;
  background: #ffffff;
  color: #000000;
  padding: 0.85rem 1rem;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
}

/* Long-measure prose is justified with hyphenation; tables, cards and rows stay ragged-right.
 * Below tablet width the columns are too narrow to justify cleanly, so it falls back to left. */
.about-study p,
.findings-about p,
.explanatory-note p,
.explanatory-notes-intro,
.glossary-intro {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media (max-width: 900px) {
  .about-study p,
  .findings-about p,
  .explanatory-note p,
  .explanatory-notes-intro,
  .glossary-intro {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

/* "How to read this page" panels (findings, charts, sub-national): one shared text rhythm. */
.findings-about p {
  max-width: none;
  margin: 0 0 10px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #000;
}

.findings-about p:last-child {
  margin-bottom: 8px;
}

.findings-about-title {
  margin: 0 0 10px;
}

/* "How to read this page / these charts" panels share the back-button's pale yellow. */
.panel.findings-about {
  background: #fff8d9;
}

.back-button {
  background: #fff8d9;
  font-weight: 700;
  white-space: nowrap;
  transition: background 160ms ease, transform 160ms ease;
}

.back-button:hover,
.back-button:focus-visible {
  background: #f1ce71;
  color: #000000;
  transform: translateY(-2px);
}

.glossary-fab {
  position: fixed;
  right: max(1.5rem, calc((100vw - 1500px) / 2 + 1.5rem));
  bottom: 3rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100vw - 2rem);
  padding: 0.95rem 1rem;
  border: 1px solid #ffc62c;
  border-radius: 999px;
  background: #ffc62c;
  box-shadow: 0 12px 32px rgba(75, 71, 67, 0.2);
  color: #000000;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.glossary-fab:hover,
.glossary-fab:focus-visible {
  background: #ffc62c;
  box-shadow: 0 16px 36px rgba(75, 71, 67, 0.26);
  transform: translateY(-2px);
}

@media (min-width: 1040px) {
  .glossary-fab {
    right: max(2.75rem, calc((100vw - 1500px) / 2 + 2.75rem));
    bottom: calc(3rem - 15px);
    width: calc((min(100vw, 1500px) - 8.5rem) / 5);
    max-width: none;
  }
}

.table-wrapper {
  overflow-x: auto;
  margin-top: 1.25rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

#dataTable {
  table-layout: fixed;
}

/* 2026-08-16: table cells default to vertical-align: middle. On a short row that is invisible; on a
   tall one — a fully-researched statutory cell running 20+ lines — it centres the indicator label,
   the area chip, the sources and the confidence chips several hundred pixels BELOW the top of the
   value text. A reader scrolling into such a row meets an unlabelled wall of prose with no visible
   indicator, no source and no grade, which is how SK Area 1 "Practice protection and reserved acts"
   was reported as a blank row. The effect scales with depth, so the best-evidenced cells were the
   least legible. `.glossary-table` already sets this; #dataTable never did. */
#dataTable th,
#dataTable td {
  vertical-align: top;
}

.data-col-indicator {
  width: 18%;
}

.data-col-value {
  width: 51.26%;
}

.data-col-confidence {
  width: 13.0625rem;
}

#dataTable th:last-child {
  white-space: nowrap;
}

.data-col-sources {
  width: 15.94%;
}

th, td {
  text-align: left;
  padding: 1rem 1rem;
  border-bottom: 1px solid #eee7df;
}

/* Observations table: the header sits on the grey field, framed by a thin rule above and below. */
#dataTable thead th {
  background: transparent;
  border-top: 1px solid #363636;
  border-bottom: 1px solid #b8b2a6;
}

th {
  font-weight: 700;
  background: #fcfbfa;
}

td code {
  color: #000000;
}

#dataTable td:nth-child(4),
#dataTable td:nth-child(5) {
  overflow-wrap: anywhere;
}

.confidence-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
}

#dataTable .confidence-stack {
  align-items: stretch;
}

#dataTable .confidence-chip,
#dataTable .evidence-chip,
#dataTable .derivation-chip {
  width: 100%;
  border-radius: 0;
}

.confidence-chip {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-weight: 700;
}

.evidence-chip {
  display: inline-flex;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}

.evidence-primary {
  background: #f5f2ec;
  color: #000000;
}

.evidence-corroborated {
  background: #363636;
  color: #ffffff;
}

.evidence-secondary {
  background: #f1ce71;
  color: #000000;
}

.evidence-voluntary {
  background: #eee7df;
  color: #000000;
}

/* The composition behind the headline percentage. Black, smaller, no fill — a stat card that shows
   only a percentage asks to be trusted; this lets it be checked against the table below it. */
.stat-detail {
  color: #000000;
  font-size: 0.82rem;
  margin: 0.15rem 0 0;
}

/* Taxonomy v1.2. Sits under an indicator's definition where the data cannot carry a cross-country
   comparison. Black text, no fill, a rule on the leading edge only — the warning has to survive a
   black-and-white print, and colour is not available to carry it. */
.indicator-not-comparative {
  color: #000000;
  border-left: 2px solid #000000;
  padding-left: 0.7rem;
  margin: 0.6rem 0 0;
}

/* Record-of-absence chip (public-voice pass, 2026-09-03): the two Area 2 indicators that record what
   an authority publishes rather than a comparable figure. Outline only, no fill – it marks a kind of
   indicator, not a grade of evidence, so it must not borrow an evidence colour. */
.indicator-absence-chip {
  background: transparent;
  border: 1px solid #000000;
  color: #000000;
  margin: 0.15rem 0 0;
  margin-right: 0.4rem;
}

/* Evidence status v2.5: the same regulatory fact of absence, but affirmatively established by an
   authoritative source rather than asserted by a voluntary body. Kept in the voluntary chip family
   (same fill) and separated by a solid border, never by hue — the chip text carries the meaning and
   the distinction must survive a black-and-white print. */
.evidence-voluntary-confirmed {
  background: #eee7df;
  color: #000000;
  border: 1px solid #000000;
}

/* Gap-confirmed: researched, no primary instrument exists -> Phase 3 target.
   Distinct from evidence-neutral so a declared gap never reads as "unclassified".
   Added 2026-08-04 (verification pass, Batch 10). Palette per 07_report/style/. */
.evidence-gap-confirmed {
  background: #ffffff;
  color: #293e35;
  border: 1px dashed #92a69f;
}

/* No national instrument - competence is sub-national. Added 2026-08-20 (K).
   A finding about the state, NOT a gap in the research: the national figure cannot exist
   because the instruments sit one level down, so there is nothing national to find and no
   national body to ask. Absence family (solid), deliberately not the gap family
   (.evidence-gap-confirmed, dashed) - a dashed border says "still looking", false here.

   REWEIGHTED 2026-08-22 (K): was `3px double`. A double border cannot render below 3px, so the
   rule that separated this chip from .evidence-voluntary-confirmed also made it three times the
   weight of every other chip on the page - and in the table, where a chip is set to full width
   with square corners, it became a heavy framed box that pulled the eye to whichever row happened
   to be sub-national. The separation is now carried by FILL VALUE at the same 1px weight: paper
   for "nothing regulates this anywhere", white for "nothing NATIONAL regulates this". Value
   survives a black-and-white print exactly as a border style does, and it costs no weight. */
.evidence-subnational {
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}

.evidence-neutral {
  background: #e9e9e9;
  color: #293e35;
}

.source-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.source-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #009b54;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.source-placeholder {
  color: #707070;
  font-style: italic;
}

.badge-high {
  background: #363636;
  color: #ffffff;
}

.badge-medium {
  background: #f1ce71;
  color: #000000;
}

.badge-low {
  background: #eee7df;
  color: #000000;
}

.badge-gap {
  background: #e9e9e9;
  color: #293e35;
}

/* Analytical/summary rows carry no confidence grade of their own: they summarise
   rows that do. Previously these fell through to .badge-gap and read as missing
   evidence. Added 2026-08-04 (verification pass, Batch 10); renamed from
   .badge-derived at schema v2.3, when `derivation` made "derived" mean something
   else entirely. */
.badge-ungraded {
  background: #ffffff;
  color: #5c6b64;
  border: 1px solid #d8d2c9;
  font-style: italic;
}

/* Derivation (schema v2.3) — a SEPARATE axis from confidence. Deliberately quiet:
   these values are not weaker, they are ours. A dashed edge reads as "our line, not
   the instrument's" without implying doubt, and both variants stay legible in B/W
   print per the study's visual identity. `stated` gets no chip at all. */
.derivation-chip {
  display: inline-flex;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: #ffffff;
  color: #4a5a52;
  border: 1px dashed #b9c4be;
}

.derivation-characterised {
  font-style: italic;
}

.data-summary-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
  gap: 1.25rem 3rem;
  align-items: start;
}

/* A thin rule across both columns closes the observations table above. */
.data-summary-panel::before {
  grid-column: 1 / -1;
  border-top: 1px solid #b8b2a6;
  content: '';
}

.data-summary-note {
  margin: 0;
  color: #293e35;
  font-size: 0.95rem;
  line-height: 1.55;
}

.data-summary-details {
  display: grid;
  gap: 0.5rem;
  color: #293e35;
  font-size: 0.95rem;
}

.data-dossier {
  min-width: 0;
  margin: 0;
  color: #293e35;
}

.data-dossier code {
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.data-updated {
  margin: 0;
  color: #293e35;
}

.site-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.75rem;
  padding: 1.5rem 2rem;
  background: #363636;
  color: rgba(255, 255, 255, 0.78);
}

.site-footer p {
  margin: 0;
}

.site-footer-title {
  margin-bottom: 0.25rem !important;
  color: #ffffff;
  font-weight: 700;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.site-footer-links a {
  color: #ffffff;
  text-decoration: none;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
  color: #f2d879;
}

.glossary-shell {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0;
}

.glossary-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.25rem;
  grid-template-rows: auto auto;
  column-gap: 2rem;
  align-items: start;
  padding: 2rem;
  background: #363636;
  color: #ffffff;
}

.glossary-header .back-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  width: 9.25rem;
  aspect-ratio: 1;
  margin: 0;
  border-color: #009b54;
  background: #fff8d9;
  color: #000000;
  text-align: center;
  white-space: nowrap;
}

.glossary-header .back-button:hover,
.glossary-header .back-button:focus-visible {
  background: #f1ce71;
  color: #000000;
}

.glossary-header .eyebrow {
  color: #f1ce71;
}

.glossary-header h1 {
  grid-column: 1;
  grid-row: 1;
  margin: 0.4rem 0 0;
  /* Scaled with the hero (K, 2026-09-12): the vw coefficient and the cap are both 15% below the
   * `clamp(2.25rem, 4vw, 4rem)` they replace, so a subpage title keeps exactly the size relation
   * to the home page's that it had before. Without this the subpage headings would have ended up
   * LARGER than the hero they sit under - the hero's cap came down to 3.375rem and this one was
   * 4rem. The 2.25rem floor is untouched, so nothing below a 1059px viewport changes.
   *
   * `text-wrap: balance` is for the phone, where "Comparative findings" is the one title wider
   * than its column: it breaks the two lines evenly instead of stranding a word. Browsers that do
   * not know the property get today's greedy break. */
  font-size: clamp(2.25rem, 3.4vw, 3.4rem);
  line-height: 1;
  text-wrap: balance;
}

/* On the sub-national page the h1 becomes "<Country> · Sub-national record"; the page kind stays
 * in the heading but a step smaller than the country name. */
.subnational-title-kind {
  font-size: 0.55em;
}

.glossary-intro {
  grid-column: 1;
  grid-row: 2;
  max-width: 760px;
  margin: 1.25rem 0 0;
  color: #ffffff;
  font-size: 1.02rem;
}

/* Sub-page header carrying the study mark (charts, findings, glossary, sub-national, explanatory
 * notes). Mark and heading share the first row on one bottom edge; the intro runs below from the
 * mark's left edge; the square "Back to study" button keeps the right-hand column. Padding mirrors
 * the index hero so the mark lands in the same spot: below 1100px the hero-content padding, on
 * desktop the hero-main padding. The mark's 6px nudge is folded into the left padding (the
 * transform is dropped) so the intro can share the mark's left edge. */
.mark-header {
  position: relative;
  /* The third track only reserves room for the full-height square on the right; the button itself
   * is positioned against the header's edges. */
  grid-template-columns: clamp(3.1625rem, 5.75vw, 5.4625rem) minmax(0, 1fr) 14rem;
  grid-template-rows: auto auto;
  column-gap: clamp(0.85rem, 1.4vw, 1.35rem);
  row-gap: 0;
  align-items: end;
  padding-top: clamp(0.75rem, 1.5vw, 1.5rem);
  padding-left: calc(2rem + 6px);
}

@media (min-width: 1101px) {
  /* Doubled selector so this wins over the later desktop `.glossary-header` alignment rule. */
  .glossary-header.mark-header {
    padding-top: clamp(0.5rem, 1.1vw, 1.1rem);
    padding-left: calc(min(100vw, 1500px) * 0.035 + 6px);
  }
}

.mark-header .header-mark {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  transform: none;
}

.mark-header h1 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
}

/* The intro runs the width of the green band. `max-width: 760px` on the shared rule was set for a
 * header without a mark, and here it left the sentence stopping short of half the field. The right
 * margin is not a value to pick: the header's third track already reserves 14rem for the back
 * button, and the intro spans tracks 1-2, so it ends clear of the square with the column gap
 * beyond it. On narrow screens that third track is gone and the button drops below the text, so
 * the same span becomes the full width. */
.mark-header .glossary-intro {
  grid-column: 1 / 3;
  grid-row: 2;
  max-width: none;
  margin-top: 1.25rem;
}

/* "Back to study" as a square the full height of the header, flush with its top, right and
 * bottom edges, in the hero's area yellow with the same hover darkening. */
.mark-header .back-button {
  /* No grid placement: an absolutely positioned grid child with a grid area is positioned
   * against that area, not the header box. */
  grid-column: auto;
  grid-row: auto;
  position: absolute;
  top: 0;
  right: 0;
  align-self: auto;
  justify-self: auto;
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 1.25rem;
  border: 0;
  background: #f1ce71;
  color: #000000;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  font-weight: 700;
  line-height: 1.22;
  white-space: normal;
  transition: background 160ms ease;
}

.mark-header .back-button:hover,
.mark-header .back-button:focus-visible {
  background: #d7ad3f;
  color: #000000;
  transform: none;
}

.mark-header .back-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -6px;
}

.explanatory-notes-content {
  display: grid;
  gap: 2rem;
}

.explanatory-notes-content h2,
.explanatory-note h3 {
  margin: 0;
}

/* The Confidence section heading takes the same light rule the notes below it use. */
.explanatory-notes-content .indicator-notes-header {
  padding-top: 1.5rem;
  border-top: 1px solid #e0dbd2;
}

.explanatory-notes-intro {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #52635b;
}

.explanatory-note {
  display: grid;
  gap: 0.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0dbd2;
}

.explanatory-note p {
  max-width: none;
  margin: 0;
  text-align: justify;
}

.explanatory-note .confidence-chip,
.explanatory-note .evidence-chip,
.explanatory-note .derivation-chip {
  font-size: 0.82rem;
  padding: 0.18rem 0.55rem;
  border-radius: 0;
  vertical-align: middle;
}

.indicator-notes-section {
  display: grid;
  gap: 1.5rem;
}

.indicator-notes-header {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.5fr);
  gap: 2rem;
  align-items: end;
}

.indicator-notes-header .label {
  margin: 0 0 0.35rem;
  color: #009b54;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.indicator-notes-header h2 {
  margin: 0 0 0.65rem;
}

.explanatory-notes-header {
  grid-template-columns: 1fr;
}

.indicator-notes-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.75fr) auto;
  gap: 1rem;
  align-items: end;
}

.indicator-clear-button {
  min-height: 3rem;
  white-space: nowrap;
}

.indicator-notes-status {
  display: flex;
  justify-content: flex-end;
  min-height: 1.5rem;
}

.indicator-notes-results {
  display: grid;
  gap: 2.5rem;
}

.indicator-area-group {
  display: grid;
  gap: 1.25rem;
  scroll-margin-top: 1rem;
}

.indicator-area-group + .indicator-area-group {
  padding-top: 2.5rem;
  border-top: 1px solid #b7bdb8;
}

.indicator-area-number {
  margin-right: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.indicator-area-heading {
  display: block;
}

.indicator-area-heading h3 {
  margin: 0.65rem 0 0.3rem;
  color: #000000;
  font-size: 1.35rem;
}

.indicator-area-summary {
  display: block;
  color: #52635b;
  font-size: 0.92rem;
}

.indicator-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.indicator-note-card {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  border: 1px solid #e0dbd2;
  background: #fcfbfa;
}

.indicator-note-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: start;
  justify-content: space-between;
}

.indicator-note-card h3,
.indicator-note-card p {
  margin: 0;
}

.indicator-note-card h3 {
  max-width: 70%;
  color: #000000;
  font-size: 1rem;
  line-height: 1.3;
}

.indicator-note-card p {
  color: #293e35;
  font-size: 0.92rem;
  line-height: 1.45;
}

.indicator-coverage {
  color: #707070;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}




.indicator-notes-empty {
  border: 1px solid #e0dbd2;
  background: #fcfbfa;
}

@media (max-width: 840px) {
  .indicator-notes-header,
  .indicator-notes-controls {
    grid-template-columns: 1fr;
  }

  .indicator-clear-button {
    width: 100%;
  }

  .indicator-note-grid {
    grid-template-columns: 1fr;
  }

  .indicator-note-card h3 {
    max-width: none;
  }
}

.glossary-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(190px, 0.75fr)) auto;
  gap: 1rem;
}

.glossary-clear-button {
  align-self: end;
  min-height: 3rem;
}

.glossary-results-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
  justify-content: space-between;
}

.glossary-results-head .label {
  margin: 0 0 0.25rem;
  color: #009b54;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.glossary-results-head h2,
.glossary-count {
  margin: 0;
}

.glossary-count {
  color: #293e35;
  font-weight: 700;
}

.glossary-table-wrapper {
  margin-top: 1.5rem;
}

.glossary-table {
  min-width: 980px;
}

.glossary-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.glossary-table th,
.glossary-table td {
  vertical-align: top;
}

.glossary-table th:first-child {
  width: 13%;
}

.glossary-table th:nth-child(2) {
  width: 17%;
}

.glossary-table th:nth-child(3),
.glossary-table th:nth-child(4) {
  width: 27%;
}

.glossary-table th:last-child {
  width: 16%;
}

/* Plain type, as in the terms table beside it: the abbreviation is the first cell of its row, so
 * the column position already says what it is and the pill only decorated it. */
.glossary-abbreviation {
  font-weight: 700;
  white-space: nowrap;
}

.glossary-country-code {
  display: block;
  margin-top: 0.25rem;
  color: #009b54;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.glossary-name strong,
.glossary-note,
.glossary-status {
  display: block;
}

.glossary-note {
  margin-top: 0.35rem;
  color: #707070;
  font-size: 0.85rem;
}

.glossary-status {
  width: fit-content;
  margin-top: 0.5rem;
  padding-left: 0.55rem;
  border-left: 3px solid #f35959;
  color: #293e35;
  font-size: 0.78rem;
  font-weight: 700;
}

.glossary-empty {
  padding: 2.5rem 1rem;
  color: #707070;
  text-align: center;
}

.print-fiche {
  display: none;
}

@media (min-width: 1101px) and (max-width: 1600px) {
  .hero .eyebrow {
    gap: clamp(0.75rem, 1.2vw, 1.2rem);
    font-size: clamp(0.85rem, 1.2vw, 1.2rem);
    letter-spacing: clamp(0.14em, 0.2vw, 0.24em);
  }
}

/* Desktop hero: the yellow study-area block runs flush to the hero's top, right and bottom edges,
 * spanning both the content row and the attribution row. hero-content dissolves into the hero grid
 * so its two children can sit in different rows; its padding moves onto hero-main. */
@media (min-width: 1101px) {
  .hero {
    /* Fixed 500px column and 500px height: the block is exactly 500 x 500 and the hero's height
     * is pinned to it, so the two bottoms always meet. Rows: text, then the remainder for the credits. */
    grid-template-columns: minmax(0, 1fr) 500px;
    grid-template-rows: auto minmax(0, 1fr);
    height: 500px;
    overflow: visible;
  }

  .hero-content {
    display: contents;
  }

  /* Left padding lines the hero text up with the floating selector's left edge: the selector is
   * 92% of the shell width and centered, so its edge sits 4% of the hero's width in. The hero's
   * width is the full shell width (max 1500px). */
  .hero-main {
    grid-column: 1;
    grid-row: 1;
    align-content: start;
    padding: clamp(0.5rem, 1.1vw, 1.1rem) 2rem;
    padding-left: calc(min(100vw, 1500px) * 0.035);
    gap: 0.85rem;
  }

  .hero h1,
  .hero-copy {
    transform: translateY(0.8rem);
  }

  /* Plain block, not a grid: as a stretched grid item the square's width was being derived from
   * its stretched height via aspect-ratio, overflowing the column on the right. */
  .hero-study-areas {
    position: relative;
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    height: 100%;
  }

  /* The top bar overlays the square's top padding, on the same 3.5% side insets as the rows. */
  .hero-topbar {
    position: absolute;
    top: 1.1rem;
    right: calc(min(100vw, 1500px) * 0.035);
    /* +1.25rem = the rows' own left padding, so SIGN IN starts under "Area 1". */
    left: calc(min(100vw, 1500px) * 0.035 + 1.25rem);
    z-index: 15;
  }

  .hero-notice {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    padding-left: calc(min(100vw, 1500px) * 0.035);
    /* Clears the floating selector, which overlaps the hero's bottom 2.75rem. */
    padding-bottom: 4rem;
    transform: translateY(-0.8rem);
  }

  /* Exact square driven by the column width: the hero keeps its content height and the square,
   * flush with the hero's top and right edges, runs past its bottom edge. */
  .hero-areas {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, auto);
    align-content: start;
    row-gap: 0;
    /* Side padding matches the selector's 4%-of-shell inset: the rows' right edge lines up with
     * the selector's right edge, and the equal left padding centres the block in the square. */
    padding: clamp(2.2rem, 3.2vw, 3.7rem)
      calc(min(100vw, 1500px) * 0.035)
      clamp(2.25rem, 3.5vw, 3.75rem);
    background: #f1ce71;
  }

  .hero-areas li {
    aspect-ratio: auto;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.2rem 1.25rem;
  }

  .hero-areas li + li {
    border-top: 1px solid #b8901f;
  }

  /* The country selector floats: narrower than the shell, pulled up so it cuts across the hero's
   * bottom edge and over the descending yellow square. */
  /* Negative bottom margin cancels the card's protrusion below the hero, so the grey field of the
   * next section starts exactly at the hero's lower edge and the card floats over both. */
  .panel.controls {
    width: 93%;
    margin: -2.75rem auto -3.5rem;
    box-shadow: 0 18px 48px rgba(75, 71, 67, 0.16);
  }

  /* Every grey section on the main page keeps its content on the shared 4% alignment lines. */
  .app-shell .panel:not(.controls) {
    padding-right: calc(min(100vw, 1500px) * 0.035);
    padding-left: calc(min(100vw, 1500px) * 0.035);
  }

  .app-shell .panel.country-summary {
    padding-top: calc(7.5rem - 10px);
  }

  /* The text column's right edge meets the hero's green/yellow boundary. Green is 1.3/(1.3+0.72)
   * = 64.36% of the hero width; inside a panel inset 3.5% each side that is (64.36-3.5)/93 of
   * the content width. */
  .country-summary-overview {
    /* Text column ends at the green/yellow boundary: hero width minus the 500px square, minus
     * the panel's 3.5% left inset (hero width = min(100vw, 1500px)). */
    grid-template-columns: calc(min(100vw, 1500px) * 0.965 - 500px) minmax(0, 1fr);
  }

  .app-shell .panel.about-study {
    padding-top: 7.5rem;
  }

  /* Subpages (findings, glossary, charts, sub-national, explanatory notes): header text and panel
   * content sit on the same 3.5% alignment lines as the main page. */
  .glossary-header,
  .glossary-shell .panel,
  .site-footer {
    padding-right: calc(min(100vw, 1500px) * 0.035);
    padding-left: calc(min(100vw, 1500px) * 0.035);
  }
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 1.75rem;
  }

  /* Keep the space above the selector inside the hero's dark background. */
  .hero + .panel.controls {
    margin-top: 0;
  }

  .hero-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero .eyebrow span {
    white-space: normal;
  }

  /* Below the split the top bar leaves the yellow square and drops onto the hero's own ground,
   * where the square's dark ink is unreadable and the dot menu -- drawn in that same ground
   * colour -- vanishes outright. Both go light here. The dropdown keeps the dark ink: it carries
   * its own pale panel, and the descendant selectors below outrank these on specificity, so the
   * panel is unaffected wherever it opens. */
  .hero-topbar-link,
  .hero-topbar-link:visited {
    color: #ffffff;
  }

  .hero-topbar-link:hover,
  .hero-topbar-link:focus-visible {
    color: #f2d879;
  }

  .hero-menu-dots {
    background-image: radial-gradient(circle, #ffffff 2.2px, transparent 2.6px);
  }

  .hero-menu-button:focus-visible {
    outline-color: #ffffff;
  }

  .hero-menu-panel .hero-topbar-link,
  .hero-menu-panel .hero-topbar-link:visited {
    color: #000000;
  }

  .hero-menu-panel .hero-topbar-link:hover,
  .hero-menu-panel .hero-topbar-link:focus-visible {
    color: #007f45;
  }

  .hero-areas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-study-areas {
    width: 100%;
  }
}

/* The 4-across band is the ONE state where the areas sit side by side, so its separators run
 * vertically. The range is bounded on both sides on purpose: above 1101px the areas stack inside
 * the yellow square and the rule there is a border-top, below 721px they stack again as full-width
 * bars -- a border-left in either state would draw a stray line down one edge of every card. Same
 * 1px #b8901f as the stacked separator, so the two states read as the same device turned 90 degrees. */
@media (min-width: 721px) and (max-width: 1100px) {
  .hero-areas li + li {
    border-left: 1px solid #b8901f;
  }
}

@media (max-width: 720px) {
  .country-summary-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .country-meta-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero .eyebrow {
    gap: 0.8rem;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
  }

  .hero .eyebrow span {
    transform: translateY(6px);
    white-space: normal;
  }

  .hero-mark {
    flex-basis: 2.875rem;
    width: 2.875rem;
  }

  .hero-content {
    gap: 2rem;
    padding: 2.5rem 1.5rem;
  }

  .hero-notice {
    padding: 1rem 1.5rem;
  }

  .glossary-fab {
    right: 2.25rem;
    bottom: 2rem;
    max-width: calc(100vw - 4.5rem);
    padding: 0.675rem 0.8625rem;
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .data-summary-panel {
    grid-template-columns: 1fr;
  }

  .site-footer {
    flex-direction: column;
    padding: 1.5rem;
  }

  .table-actions,
  .table-action {
    width: 100%;
  }

  .hero-areas {
    grid-template-columns: 1fr;
  }

  .hero-areas li {
    aspect-ratio: auto;
    height: 3.75rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
    min-height: 3.75rem;
    padding: 0 1rem;
  }

  /* Stacked again at this width, so the separator lies back down -- same 1px #b8901f as the other
   * two states. The fixed 3.75rem height absorbs it under border-box, so the bars do not grow. */
  .hero-areas li + li {
    border-top: 1px solid #b8901f;
  }

  .hero-area-number {
    flex: 0 0 4rem;
  }

  .hero-areas li:nth-child(3) .hero-area-name,
  .hero-areas li:nth-child(4) .hero-area-name {
    margin-block: auto;
  }

  .hero-notice-meta {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .hero-notice-meta::before,
  .hero-notice-meta::after {
    display: none;
  }

  .hero-notice-meta span + span {
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
  }

  .hero-notice-meta span:nth-child(2),
  .hero-notice-meta span:last-child {
    justify-self: start;
    text-align: left;
  }

  .glossary-header {
    display: block;
    padding: 1.5rem;
  }

  .glossary-header .back-button {
    width: auto;
    aspect-ratio: auto;
    margin-bottom: 2rem;
  }

  .mark-header {
    display: grid;
    grid-template-columns: 2.875rem minmax(0, 1fr);
    column-gap: 0.85rem;
    padding: 1.5rem;
    padding-top: 2.5rem;
    padding-left: calc(1.5rem + 6px);
  }

  /* Narrow screens: a full-width yellow bar below the text instead of the flush square. */
  .mark-header .back-button {
    position: static;
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: stretch;
    aspect-ratio: auto;
    margin-top: 1.5rem;
    margin-bottom: 0;
    padding: 0.85rem 1rem;
  }

  .glossary-controls {
    grid-template-columns: 1fr;
  }

  .table-panel .table-wrapper {
    min-width: 100%;
    overflow-x: visible;
  }

  #dataTable {
    min-width: 0;
    table-layout: auto;
  }

  #dataTable colgroup,
  #dataTable thead {
    display: none;
  }

  #dataTable tbody,
  #dataTable tr,
  #dataTable td {
    display: block;
    width: 100%;
  }

  #dataTable tr {
    padding: 1.25rem 0;
    border-bottom: 1px solid #d8d2c9;
  }

  #dataTable tr:first-child {
    padding-top: 0;
  }

  #dataTable td {
    padding: 0;
    border-bottom: 0;
  }

  #dataTable td + td {
    margin-top: 1rem;
  }

  #dataTable td::before {
    display: block;
    margin-bottom: 0.35rem;
    color: #707070;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  #dataTable td:nth-child(1)::before {
    content: 'Indicator / detail';
  }

  #dataTable td:nth-child(3)::before {
    content: 'Value';
  }

  #dataTable td:nth-child(4)::before {
    content: 'Sources';
  }

  #dataTable td:nth-child(5)::before {
    content: 'Confidence / Evidence';
  }

  #dataTable td:only-child::before {
    content: none;
  }
}

@media print {
  .mark-header .header-mark,
  .mark-header .back-button {
    display: none !important;
  }

  /* The page margin is what gives EVERY sheet its top and bottom band - element padding only applies
     once, at the start and end of the flow, which is why page 2 previously began 12pt from the paper
     edge with the area rule sitting on the trim. Left/right stay 0 so .print-fiche keeps governing the
     15mm text column. Page 1 is unchanged: 15mm margin + 10mm padding = the 25mm it started at. */
  @page {
    size: A4 portrait;
    margin: 15mm 0 12mm;
  }

  html,
  body {
    width: 210mm;
    margin: 0 !important;
    background: #ffffff !important;
  }

  body {
    color: #000000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .app-shell {
    display: none !important;
  }

  .glossary-fab {
    display: none !important;
  }

  /* TWO-PAGE FICHE (K, 2026-08-11). Was `height: 297mm` + `overflow: hidden`, which held while each
     area showed 3-4 findings. When the caps rose to 8/6/6/8 at taxonomy v1.4 the 28 findings no longer
     fitted, and because the sheet was fixed and clipped, area blocks COLLIDED rather than flowing.
     `min-height` lets the fiche run to a second sheet; `1fr` resolves to minmax(auto, 1fr) so the area
     grid can never be squeezed below its content, yet still absorbs slack on a short country so the
     footer sits at the foot of page 1. `break-inside: avoid` on .fiche-area and .fiche-finding keeps
     blocks whole across the break.
     NOTE — repeating the badge/rules/footer on page 2 was attempted with position:fixed and with
     @page margins; BOTH FAILED in the actual print path (fixed elements did not repeat at all, and a
     negative margin pulled the masthead outside the page box, where print clips it). If it is wanted,
     the reliable technique is a <table> with <thead>/<tfoot>, which browsers repeat natively - that
     needs a markup change in index.html, not CSS alone. */
  .print-fiche {
    display: grid !important;
    grid-template-rows: auto auto 1fr auto;
    width: 210mm;
    /* 297mm less the 15mm and 12mm page margins: the height of ONE content box. Leaving it at 297mm
       would overflow every fiche onto a second sheet even when the content fits. */
    min-height: 270mm;
    padding: 10mm 15mm 0;
    background: #ffffff;
  }




  .fiche-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28mm;
    gap: 8mm;
    align-items: end;
    padding-bottom: 5mm;
    border-bottom: 2.2mm solid #363636;
  }

  .fiche-kicker {
    margin: 0 0 3mm;
    color: #009b54;
    font-size: 9.75pt;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .fiche-header h1 {
    margin: 0;
    color: #000000;
    font-size: 30pt;
    line-height: 0.98;
    letter-spacing: -0.025em;
  }

  .fiche-country-code {
    display: grid;
    place-items: center;
    width: 28mm;
    height: 28mm;
    background: #f1ce71;
    color: #000000;
    font-size: 21pt;
    font-weight: 800;
    letter-spacing: 0.05em;
  }

  .fiche-summary {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 8mm;
    padding: 4mm 0 4.5mm;
  }

  .fiche-meta-label,
  .fiche-meta-value {
    margin: 0;
  }

  .fiche-meta-label {
    margin-bottom: 1.2mm;
    color: #009b54;
    font-size: 6.8pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .fiche-meta-value {
    color: #000000;
    font-size: 9pt;
    font-weight: 650;
    line-height: 1.25;
  }

  .fiche-area-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 3mm 0 2mm;
  }

  /* Page 2 onwards begins below the running badge and rules; the first area on a continuation page
     would otherwise start under them. The margin is harmless on page 1 because the header and meta
     block already push the grid past this point. */
  .fiche-area {
    margin-top: 0;
  }

  .fiche-area {
    display: grid;
    grid-template-columns: 37mm minmax(0, 1fr);
    gap: 5mm;
    min-width: 0;
    min-height: 0;
    padding: 4.6mm 0 2.6mm;
    /* KEEP break-inside: avoid. Removing it (attempted 2026-08-18) is what produced the collision K
       photographed: Area 3 and Area 4 printed ON TOP OF EACH OTHER on page 2. This block is a grid
       whose findings child is another grid, and Chrome does not fragment nested grid/flex across a
       page boundary — it overlays the continuation instead. The original comment on this file said
       as much about the fixed-height era; the lesson is the same with a flowing sheet. An area that
       does not fit must MOVE, not split, and the fix for an area that is too tall to move is to put
       less in it — which is what FICHE_CHARS_PER_SLOT does. */
    break-inside: avoid;
    page-break-inside: avoid;
    border-top: 1.3mm solid #009b54;
  }

  .fiche-area:nth-child(even) {
    border-top-color: #f1ce71;
  }

  .fiche-area:last-child {
    padding-bottom: 0;
  }

  .fiche-area-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    margin: 0;
  }

  .fiche-area-number {
    display: none;
  }

  .fiche-area-header p,
  .fiche-area-header h2 {
    margin: 0;
  }

  .fiche-area-header p {
    margin-bottom: 0.8mm;
    color: #009b54;
    font-size: 6.5pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .fiche-area-header h2 {
    color: #000000;
    font-size: 10.5pt;
    line-height: 1.12;
  }

  .fiche-findings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.2mm 5mm;
    align-content: start;
    margin: 0;
  }

  /* Added with the two-page fiche (2026-08-11): a single finding must never be split by the page
     break, or a label lands at the foot of page 1 and its value at the head of page 2. */
  .fiche-finding {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .fiche-finding {
    min-width: 0;
  }

  .fiche-finding dt,
  .fiche-finding dd {
    margin: 0;
  }

  .fiche-finding dt {
    margin-bottom: 0.8mm;
    color: #000000;
    font-size: 7pt;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  .fiche-finding dd {
    color: #293e35;
    font-size: 7.8pt;
    line-height: 1.23;
  }

  .fiche-confidence {
    display: inline-flex;
    align-items: center;
    margin-top: 0.7mm;
    color: #293e35;
    font-size: 6.5pt;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .fiche-confidence::before {
    width: 2.2mm;
    height: 2.2mm;
    margin-right: 1.5mm;
    background: #b7bdb8;
    content: '';
  }

  .fiche-confidence-high::before {
    background: #009b54;
  }

  .fiche-confidence-medium::before {
    background: #f1ce71;
  }

  .fiche-confidence-low::before {
    box-shadow: inset 0 0 0 0.3mm #f35959;
    background: #ffffff;
  }

  /* An absence the record STATES is not weak evidence, and this used to share Low's hollow red
     marker - which read as "shaky" about a finding. Hollow grey keeps the "nothing filled in here"
     shape without making a claim about the strength of what stands behind it. Renamed from
     .fiche-confidence-gap on 2026-08-22, when the gap family stopped being a confidence grade. */
  .fiche-confidence-absence::before {
    box-shadow: inset 0 0 0 0.3mm #8d968f;
    background: #ffffff;
  }

  .fiche-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: #707070;
    font-size: 8pt;
    font-style: italic;
  }

  /* With a flowing fiche the footer follows the content rather than being pinned to the bottom of a
     fixed page; on a one-page country it still lands at the foot because of .print-fiche min-height. */
  .fiche-footer {
    margin-top: 3mm;
    padding-top: 3.5mm;
    border-top: 0.2mm solid #363636;
  }

  .fiche-footer p {
    margin: 0;
    font-size: 6.5pt;
    line-height: 1.3;
  }

  /* Opens the closing block: snapshot note first, disclaimer under it, footer rule below both. */
  .fiche-data-note {
    margin: 14mm 0 0;
    color: #293e35;
    font-size: 6.5pt;
    line-height: 1.3;
  }

  .fiche-credit {
    display: flex;
    justify-content: space-between;
    gap: 6mm;
    color: #000000;
    font-weight: 700;
  }

  /* One omission notice per area, and it closes the area. `grid-column: 2` pins it to the second
     column instead of letting auto-placement drop it wherever the next free cell happens to be —
     it appeared above the findings it was describing on odd counts. `align-self: end` sits it at the
     foot of its row so it reads as the last line of the section. */
  .fiche-more {
    margin: 0.7mm 0 0;
    color: #707070;
    font-size: 6.2pt;
    font-style: italic;
    line-height: 1.25;
  }

  .fiche-area-more {
    grid-column: 2;
    align-self: end;
    margin-top: 2.4mm;
  }

  /* ------------------------------------------------------------------------------------------
     FULL COUNTRY PROFILE (2026-08-18). Single column at 8.6pt: this is a reading document a national
     body works through line by line, not a dashboard. The masthead lives in <thead>, which the
     browser repeats on every sheet — the one technique that survives the print path, per the note on
     the fiche above.
     ------------------------------------------------------------------------------------------ */
  body[data-print-mode="profile"] .print-fiche {
    display: none !important;
  }

  body[data-print-mode="profile"] .print-profile {
    display: block !important;
  }

  body[data-print-mode="subnational-profile"] .glossary-shell {
    display: none !important;
  }

  body[data-print-mode="subnational-profile"] .print-profile {
    display: block !important;
  }

  .print-profile {
    width: 210mm;
    padding: 0 15mm;
    background: #ffffff;
  }

  /* RESET WHAT THE SCREEN TABLE RULES IMPOSE (K, 2026-08-18). The dashboard's global rules are not
     scoped to #dataTable, so this document inherited all three of them and I only overrode padding
     and alignment — I styled what I added and left what I inherited:
       table { min-width: 780px }               -> 780px is ~206mm inside a 180mm text column, so the
                                                   masthead ran off the right edge and clipped
                                                   "Italy IT" and "Implemented by ISKA".
       th { background: #f5f2ec }               -> the grey shade behind the running header.
       th, td { border-bottom: 1px solid #eee7df } -> the grey rule under the header, under the title
                                                   block, and under the footer on every sheet.
     The only rules this document draws are its own: the dark masthead rule and the green area rule. */
  .profile-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  .profile-table td,
  .profile-table th {
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    vertical-align: top;
  }

  /* thead repeats on every page; the rule under it is what tells a reader that page 4 is still the
     same country. */
  .profile-running {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6mm;
    margin-bottom: 3.4mm;
    padding-bottom: 1.8mm;
    border-bottom: 0.7mm solid #363636;
  }

  .profile-running p {
    margin: 0;
  }

  .profile-running-study {
    color: #009b54;
    font-size: 6.8pt;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .profile-running-country {
    color: #000000;
    font-size: 8pt;
    font-weight: 750;
  }

  .profile-running-foot {
    display: block;
    margin-top: 2.5mm;
    padding-top: 1.6mm;
    border-top: 0.2mm solid #363636;
  }

  .profile-running-foot p {
    margin: 0;
    color: #293e35;
    font-size: 5.9pt;
    line-height: 1.2;
  }

  .profile-credit {
    display: flex;
    justify-content: space-between;
    gap: 6mm;
    font-weight: 700;
    white-space: nowrap;
  }

  .profile-title h1 {
    margin: 2mm 0 1.5mm;
    color: #000000;
    font-size: 26pt;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .profile-lede {
    margin: 0 0 3.5mm;
    max-width: 145mm;
    color: #293e35;
    font-size: 8.4pt;
    line-height: 1.3;
  }

  /* Not four equal columns: the regulatory model is a sentence and the other three are a word or a
     number each, so equal shares squeezed it into a nine-line ribbon. */
  .profile-meta {
    display: grid;
    grid-template-columns: 0.62fr 1.9fr 0.5fr 0.78fr;
    gap: 5mm;
    padding-bottom: 2mm;
  }

  .profile-meta-label {
    margin: 0 0 0.8mm;
    color: #009b54;
    font-size: 6.4pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .profile-meta-value {
    margin: 0;
    color: #000000;
    font-size: 8.4pt;
    font-weight: 650;
    line-height: 1.25;
  }

  .subnational-profile-meta {
    grid-template-columns: 0.8fr 1.9fr 0.55fr 0.8fr;
  }

  .print-subnational-profile .profile-observation-batch-start td {
    padding-top: 2.2mm;
  }

  .print-subnational-profile .profile-observation-batch-start td::before {
    display: block;
    width: 33.333%;
    margin: 0 0 2.2mm;
    border-top: 0.25pt solid #009b54;
    content: '';
  }

  /* An area heading alone at the foot of a page is the print equivalent of a broken sentence. */
  .profile-area-head {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
  }

  .profile-area-head p,
  .profile-area-head h2 {
    margin: 0;
  }

  .profile-area-kicker {
    margin-top: 5mm !important;
    padding-top: 2.4mm;
    border-top: 1.1mm solid #009b54;
    color: #009b54;
    font-size: 6.4pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .profile-area-head h2 {
    margin: 0.9mm 0 1.5mm !important;
    color: #000000;
    font-size: 12pt;
    line-height: 1.1;
  }

  /* Observations may break across sheets. Holding each one whole left a quarter of a page blank in
     front of every long value, and unlike the fiche there is no nested grid here to fragment badly —
     a table row of block prose breaks cleanly. A broken PAGE is readable; a broken SENTENCE is not,
     and only the second is forbidden. The heading is pinned to its value and no line sits alone. */
  .profile-observation {
    padding-bottom: 2.6mm;
    orphans: 3;
    widows: 3;
  }

  .profile-indicator {
    break-after: avoid;
    page-break-after: avoid;
    margin: 2.6mm 0 1mm;
    color: #000000;
    font-size: 8.2pt;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .profile-qualifier {
    font-weight: 600;
    text-transform: none;
  }

  .profile-value {
    margin: 0 0 1.2mm;
    max-width: 168mm;
    color: #1b1b1b;
    font-size: 8.6pt;
    line-height: 1.35;
    orphans: 3;
    widows: 3;
  }

  .profile-sources {
    margin: 0.9mm 0 0;
    color: #3f4f47;
    font-size: 6.8pt;
    line-height: 1.3;
  }

  .profile-source-label {
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .profile-empty {
    margin: 2mm 0 0;
    color: #707070;
    font-size: 8pt;
    font-style: italic;
  }

  .profile-register {
    display: block;
    padding: 1.5mm 0 2.6mm;
  }

  .profile-source-entry {
    margin: 0 0 1.6mm;
    color: #293e35;
    font-size: 7pt;
    line-height: 1.3;
    break-inside: avoid;
  }

  .profile-source-id {
    font-weight: 750;
  }

  .profile-source-url {
    display: block;
    color: #3f4f47;
    font-size: 6.4pt;
    word-break: break-all;
  }

  /* Legal small print shared by both print documents; wording mirrors Terms of use §2. The link
     survives into a Save-as-PDF, which is why it is a real anchor and not a bare filename. */
  .print-disclaimer {
    margin: 0;
    color: #707070;
    font-size: 5.8pt;
    line-height: 1.3;
  }

  .print-disclaimer a {
    color: inherit;
    text-decoration: underline;
  }

  .fiche-disclaimer {
    margin-top: 1.4mm;
  }

  /* The 14mm padding is the empty band separating the closing block from the last content row. */
  /* The printed profile is national only; this row states that a sub-national record exists and
     how many rows it holds, so an omission never reads as an absence. Added 2026-08-20. */
  .profile-subnational-note {
    display: block;
    padding-top: 4mm;
  }

  .profile-subnational-note td {
    border-top: 0.3pt solid rgba(75, 71, 67, 0.35);
    padding-top: 2mm;
    font-size: 6.4pt;
    line-height: 1.35;
    color: #293e35;
  }

  .profile-disclaimer {
    display: block;
    padding-top: 14mm;
  }

  .profile-disclaimer .print-disclaimer {
    margin-top: 1.2mm;
  }

  .profile-foot-note {
    margin: 0;
    color: #293e35;
    font-size: 5.9pt;
    line-height: 1.2;
  }
}

/* The profile sheet is a print-only document and must never enter the dashboard flow. This rule sits
   OUTSIDE the print block on purpose: a display rule written only inside @media print leaves the
   element visible on screen. */
.print-profile {
  display: none;
}

/* Gap where the authoritative source IS in hand and simply omits the datum (schema v2.4).
   Distinguished from .evidence-gap-confirmed because the Phase 3 action differs: write to
   the body, rather than keep searching. Solid border, not dashed — the source is not in doubt. */
.evidence-gap-silent {
  background: #ffffff;
  color: #4a5a52;
  border: 1px solid #c9d2cc;
}

/* ---------------------------------------------------------------------------------------------
   Sub-national record (subnational.html) — added 2026-08-20.

   The visual job of this page is to look adjacent to the dashboard but not identical to it. These
   observations carry no confidence grade and no evidence status, so nothing here may borrow the
   confidence chrome (pills, coverage bars) that signals a graded value elsewhere. The statement
   panel is the one loud element on the page, because the reader has to know what tier they are in
   before they read a number.
   --------------------------------------------------------------------------------------------- */

.subnational-shell {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0;
}

.subnational-statement,
.glossary-shell .panel.subnational-statement {
  position: relative;
  width: 100%;
  background: #fff8d9;
}

.subnational-country-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.subnational-country {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(75, 71, 67, 0.18);
  text-decoration: none;
  color: #000000;
  background: #ffffff;
}

.subnational-country:hover,
.subnational-country:focus-visible {
  border-color: #009b54;
  background: #f7fbf9;
}

.subnational-country.active {
  background: #363636;
  color: #ffffff;
  border-color: #363636;
}

.subnational-country-name {
  font-weight: 600;
}

.subnational-country-count {
  font-size: 0.82rem;
  color: #617068;
}

.subnational-country.active .subnational-country-count {
  color: #f1ce71;
}

.subnational-area h2 {
  margin: 0.65rem 0 0.3rem;
  color: #000000;
  font-size: 1.35rem;
}

.subnational-print-action {
  margin-top: 1.5rem;
}

/* No rule under the last row of an area table: the table simply ends. */
.subnational-area tbody tr:last-child td {
  border-bottom: 0;
}

.subnational-area table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 1rem;
}

.subnational-col-indicator { width: 13%; }
.subnational-col-subunit { width: 16%; }
.subnational-col-value { width: 47%; }
.subnational-col-sources { width: 24%; }

.subnational-area td {
  overflow-wrap: anywhere;
}

.subnational-area th,
.subnational-area td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(75, 71, 67, 0.12);
}

/* Same header treatment as the observations table on the country page: plain bold labels on the
 * grey field, a dark rule above and a muted rule below. */
.subnational-area thead th {
  background: transparent;
  border-top: 1px solid #363636;
  border-bottom: 1px solid #b8b2a6;
}

/* A merged sub-national row carries one block per specifier (see mergeSameSourceRows in
   subnational.js): Austria's four Oberoesterreich fee reliefs are one chamber's position, not four
   answers. The blocks need separating from each other but must not open a gap above the first or
   below the last, or a merged cell sits taller than its neighbours in the same row. */
.subnational-part {
  margin: 0 0 0.6em 0;
}
.subnational-part:last-child {
  margin-bottom: 0;
}
.subnational-part-label {
  white-space: nowrap;
}

.subnational-coverage {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: #617068;
  font-variant-numeric: tabular-nums;
}

.subnational-coverage.is-complete {
  color: #009b54;
  font-weight: 600;
}

.subnational-unit {
  font-weight: 600;
  white-space: normal;
}

.visually-hidden-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Glossary — the terms half. The abbreviations are collected and the terms are authored, but a
 * reader looking up an unfamiliar word does not know which of the two it is, so both are set as
 * the same table with the same legend. Only the column widths differ: a definition needs room, an
 * abbreviation does not. */
/* ALL THREE columns are named, not two. The abbreviations table sets its widths by column
 * position for five columns, and `th:last-child` there is its Type column at 16% — which lands on
 * the DEFINITION here, the third and last. Constraining only Term and Category left Definition
 * pinned at 16% and Term free to absorb everything else, which is how a 17-word term column ended
 * up wider than the definitions it labels. The definition is what a reader came for; it takes the
 * width. */
.glossary-terms-table th:first-child {
  width: 16%;
}

.glossary-terms-table th:nth-child(2) {
  width: 12%;
}

.glossary-terms-table th:last-child {
  width: 72%;
}

.glossary-term-name {
  font-weight: 700;
}

.glossary-term-alias {
  font-weight: 400;
}

.glossary-term-note {
  font-style: italic;
}