@charset "UTF-8";
/* ============================================================================
   Standard 595 — global stylesheet
   Implements the Swiss Federal Administration design system, revision 2 (flat).

   One file for every language variant of the site. Nothing in here is
   language-specific: no copy, no locale-dependent widths, no directional
   assumptions beyond the logical properties already used (padding-inline,
   margin-inline, border-inline). Adding a locale means adding HTML, not CSS.

   Contents
     1  Tokens                    §1.1
     2  Typography                §1.3
     3  Focus, icons              §1.7 §1.8
     4  Layout                    §2
     5  Components                §3
     6  Footer                    §3.28
     7  Print
   ========================================================================== */

/* ============================================================================
   §1.1 TOKENS
   ========================================================================== */
:root {
  /* Brand — primary (Swiss red). Accent + action only. */
  --color-primary-50:  #ffedee;
  --color-primary-100: #fae1e2;
  --color-primary-200: #ffccce;
  --color-primary-300: #fa9da1;
  --color-primary-400: #fc656b;
  --color-primary-500: #e53940;
  --color-primary-600: #d8232a;
  --color-primary-700: #bf1f25;
  --color-primary-800: #99191e;
  --color-primary-900: #801519;

  /* Neutral grey — footer and chrome. Grey, not blue. */
  --color-gray-50:  #f7f7f8;
  --color-gray-100: #eeeeef;
  --color-gray-200: #e2e2e4;
  --color-gray-300: #cacacd;
  --color-gray-400: #9b9b9f;
  --color-gray-500: #6f6f74;
  --color-gray-600: #55555a;
  --color-gray-700: #414146;
  --color-gray-800: #33333a;
  --color-gray-900: #232328;

  /* Brand — secondary (slate). Surfaces, tints. */
  --color-secondary-50:  #f0f4f7;
  --color-secondary-100: #dfe4e9;
  --color-secondary-200: #acb4bd;
  --color-secondary-300: #828e9a;
  --color-secondary-400: #596978;
  --color-secondary-500: #46596b;
  --color-secondary-600: #2f4356;
  --color-secondary-700: #263645;
  --color-secondary-800: #1c2834;
  --color-secondary-900: #131b22;

  /* Neutral / text */
  --color-text-50:  #f9fafb;
  --color-text-100: #f3f4f6;
  --color-text-200: #e5e7eb;
  --color-text-300: #d1d5db;
  --color-text-400: #9ca3af;
  --color-text-500: #6b7280;
  --color-text-600: #4b5563;
  --color-text-700: #374151;
  --color-text-800: #1f2937;
  --color-text-900: #111827;

  /* Spacing scale */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-7: 1.75rem; --space-8: 2rem;
  --space-10: 2.5rem; --space-12: 3rem;   --space-14: 3.5rem; --space-16: 4rem;
  --space-20: 5rem;   --space-24: 6rem;

  /* Layout */
  --container-max: 1360px;
  --gutter: 1.25rem;
  --section-py: 4rem;
  --section-py-half: 2rem;
  --rhythm: 1.5rem;
  --rhythm-heading: 3rem;

  /* Forms */
  --input-min-height: 44px;
  --input-min-height-2xl: 48px;

  /* Focus */
  --color-focus: #8655f6;
  --color-focus-negative: #c4b5fd;

  /* Elevation — flat. Two values only. */
  --shadow-none: none;
  --shadow-overlay: 0 1px 2px rgba(19,27,34,.08), 0 12px 32px -12px rgba(19,27,34,.22);

  /* Hairlines */
  --border-hairline:      1px solid var(--color-secondary-200);
  --border-hairline-soft: 1px solid var(--color-secondary-100);
  --border-hairline-dark: 1px solid var(--color-gray-700);
  --border-strong:        1px solid var(--color-text-800);

  /* Radius */
  --radius-none: 0;
  --radius-input: .0625rem;
  --radius-btn: .125rem;
  --radius-panel: .1875rem;
  --radius-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --duration-fast: .15s;
  --duration-base: .2s;
  --duration-slow: .3s;
  --duration-page: .7s;
}
@media (min-width:480px)  { :root { --gutter:1.75rem; } }
@media (min-width:640px)  { :root { --gutter:2.25rem; } }
@media (min-width:1024px) { :root { --gutter:2.5rem; --section-py:5rem; --section-py-half:2.5rem;
                                    --rhythm:1.75rem; --rhythm-heading:3.5rem; } }
@media (min-width:1280px) { :root { --gutter:3rem; } }
@media (min-width:1920px) { :root { --gutter:4rem; --container-max:1440px;
                                    --section-py:6rem; --section-py-half:3rem; } }

/* ============================================================================
   §1.3 TYPOGRAPHY  — Noto Sans as four families, weight always 400
   ========================================================================== */
@font-face { font-family: Font-Regular; font-style: normal; font-display: swap;
             src: local("Noto Sans"), local("NotoSans-Regular"), local("Helvetica Neue"), local("Arial"); }
@font-face { font-family: Font-Bold; font-style: normal; font-weight: 400; font-display: swap;
             src: local("Noto Sans Bold"), local("NotoSans-Bold"), local("Helvetica Neue Bold"), local("Arial Bold"); }
@font-face { font-family: Fallback-font; src: local("Verdana"); ascent-override: 95%; line-gap-override: 25%; }

*, *::before, *::after { box-sizing: border-box; }
html { font-family: Font-Regular, Hind, Fallback-font, system-ui, sans-serif;
       -webkit-font-smoothing: antialiased; word-spacing: .0625em; text-size-adjust: 100%;
       overflow-y: scroll; scroll-padding-top: var(--space-6); }
body { font-family: inherit; color: var(--color-text-800); line-height: 1.6; margin: 0; font-size: 1rem;
       background: #fff; }
@media (min-width:1280px) { body { font-size: 1.0625rem; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

b, strong, .font--bold, .text--bold { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight: 400; }
em, i { font-style: italic; }
img { max-width: 100%; }
p { margin: 0; }
ul, ol { margin: 0; }

.h1,.h2,.h3,.h4,.h5 { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight: 400;
                      color: var(--color-text-900); overflow-wrap: break-word; text-wrap: balance; }
.h1 { font-size: 2rem;     line-height:1.15; letter-spacing:-.015em; margin: 0 0 var(--space-4); }
.h2 { font-size: 1.375rem; line-height:1.2;  letter-spacing:-.01em;  margin: var(--rhythm-heading) 0 var(--space-4); }
.h3 { font-size: 1.25rem;  line-height:1.25; margin: var(--space-10) 0 var(--space-3); }
.h4 { font-size: 1.125rem; line-height:1.35; margin: var(--space-8)  0 var(--space-2); }
.h5 { font-size: 1rem;     line-height:1.5;  margin: var(--space-6)  0 var(--space-2); color: var(--color-text-700); }
@media (min-width:1024px) { .h2 { font-size:1.625rem; } .h3 { font-size:1.375rem; } }
@media (min-width:1280px) { .h2 { font-size:2rem; }     .h3 { font-size:1.5rem; } .h4 { font-size:1.25rem; } }
:is(.h1,.h2,.h3,.h4,.h5):first-child { margin-top: 0; }

.text--sm { font-size:.875rem; }
.text--xs { font-size:.8125rem; }
.text--lg { font-size:1.125rem; }
.color--light { color: var(--color-text-500); }
.color--default { color: var(--color-text-800); }
.bg--white { background:#fff; }
.bg--secondary-50 { background: var(--color-secondary-50); }
.bg--gray-800 { background: var(--color-gray-800); }

/* Links */
a { color: var(--color-primary-600); text-decoration: none;
    transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
.link, main p a, main li a, main td a, main th a, main dd a {
  color: var(--color-primary-600); border-bottom: 1px solid var(--color-primary-200); }
.link:hover, main p a:hover, main li a:hover, main td a:hover, main th a:hover,
.link:focus, main p a:focus, main li a:focus, main td a:focus {
  color: var(--color-primary-800); border-bottom-color: currentcolor; }
.link--external::after { content:"↗"; margin-left:.2em; font-size:.85em; }

/* Lists */
.list--default { padding-left: 1.15em; }
.list--default > li { margin-top: var(--space-2); }
.list--default > li::marker { color: var(--color-secondary-300); }
.list--ordered { padding-left: 1.35em; }
.list--ordered > li { margin-top: var(--space-3); }
.list--ordered > li::marker { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif;
                              color: var(--color-primary-600); }
.list--bare { list-style: none; padding-left: 0; }
.list--loose > li { margin-top: var(--space-3); }

/* Meta info */
.meta-info { display:flex; flex-wrap:wrap; gap: var(--space-2) var(--space-4); margin:0; padding:0; list-style:none; }
.meta-info__item { color: var(--color-text-500); font-size:.875rem; letter-spacing:.01em; }
.meta-info__item + .meta-info__item { position:relative; padding-left: var(--space-4); }
.meta-info__item + .meta-info__item::before { content:""; position:absolute; left:0; top:.55em; width:1px; height:.9em;
                                              background: var(--color-secondary-200); }

/* §1.7 Focus */
:focus { outline: 2px solid transparent; }
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; z-index: 10;
                 box-shadow: 0 0 0 2px var(--color-focus); }
.top-bar :focus-visible, #main-footer :focus-visible { box-shadow: 0 0 0 2px var(--color-focus-negative); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
           clip-path: inset(50%); white-space:nowrap; border:0; }

/* §1.8 Icons */
.icon { flex-shrink:0; width:auto; stroke-width:.3px; fill: currentcolor; }
.icon--sm { height:.75rem; } .icon--base { height:1rem; } .icon--md { height:1.25rem; }
.icon--lg { height:1.5rem; } .icon--xl { height:1.75rem; }
@media (min-width:768px) { .icon--md { height:1.5rem; } .icon--lg { height:1.75rem; } .icon--xl { height:2rem; } }

/* ============================================================================
   §2 LAYOUT
   ========================================================================== */
.container { width:100%; max-width: var(--container-max); margin-inline:auto; overflow-x:clip;
             padding-inline: var(--gutter); }
.container--wide { max-width:none; }
.container--flex { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); }
.container--grid { display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); }

.gap--responsive { gap: var(--space-5); }
@media (min-width:640px)  { .gap--responsive { gap: var(--space-7); } }
@media (min-width:1024px) { .gap--responsive { gap: var(--space-10); } }
@media (min-width:1280px) { .gap--responsive { gap: var(--space-12); } }

.container__full        { grid-column: span 12; }
.container__center--xs  { grid-column: span 12; }
.container__aside       { grid-column: span 12; }
.container__main        { grid-column: span 12; min-width: 0; }
@media (min-width:768px) {
  .container__aside { grid-column: 1 / span 4; }
  .container__main  { grid-column: 5 / span 8; }
}
@media (min-width:1024px) {
  .container__center--xs { grid-column: 2 / span 10; }
  .container__aside { grid-column: 1 / span 3; }
  .container__main  { grid-column: 4 / span 9; }
}
@media (min-width:1280px) {
  .container__center--xs { grid-column: 3 / span 8; }
  .container__aside { grid-column: 1 / span 3; }
  .container__main  { grid-column: 4 / span 8; }
}
.container__main, .container__center--xs { max-width: 78ch; }
.container__main > .table-wrapper,
.container__main > .grid,
.container__main > figure,
.container__main > .ratio { max-width: none; width: 100%; }
.container__aside > * { margin-bottom: var(--space-8); }
.container__aside > :last-child { margin-bottom: 0; }

/* §2.3 Section */
.section { width:100%; }
.section--default, .section[class*="bg--"] { padding-block: var(--section-py); }
.section--py-half { padding-block: var(--section-py-half); }
.section--default + .section--default { padding-top: 0; }
.section[class*="bg--"] + .section[class*="bg--"] { padding-top: var(--section-py); }
.section__title { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
                  line-height:1.2; letter-spacing:-.01em; margin:0 0 var(--space-8); font-size:1.375rem; }
@media (min-width:1024px) { .section__title { font-size:1.625rem; } }
@media (min-width:1280px) { .section__title { font-size:2rem; margin-bottom: var(--space-10); } }
.section__subtitle { color: var(--color-text-600); max-width:68ch; font-size:1.125rem;
                     margin: calc(var(--space-8) * -1 + var(--space-3)) 0 var(--space-8); }
.section__action { display:flex; justify-content:flex-start; margin-top: var(--space-8); }

/* §2.4 Vertical rhythm */
.vertical-spacing > *            { margin-top: var(--rhythm); }
.vertical-spacing > :first-child { margin-top: 0; }
.vertical-spacing > :last-child  { margin-bottom: 0; }
.vertical-spacing > :is(h2,.h2)        { margin-top: var(--rhythm-heading); }
.vertical-spacing > :is(h3,.h3)        { margin-top: var(--space-10); }
.vertical-spacing > :is(h4,h5,.h4,.h5) { margin-top: var(--space-8); }
.vertical-spacing > :is(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5) + * { margin-top: var(--space-4); }
.vertical-spacing > :is(h2,.h2) + :is(h3,.h3) { margin-top: var(--space-6); }
.vertical-spacing > p + p,
.vertical-spacing > :is(p,ul,ol) + :is(p,ul,ol) { margin-top: var(--space-4); }
.vertical-spacing > :is(.table-wrapper,figure,.grid,.accordion,.notification,.box,.ratio) { margin-top: var(--rhythm); }

/* Separator */
.separator { height:1px; border:0; background: var(--color-secondary-200); margin: 0; }

/* §3.32 Sticky */
.sticky { position: sticky; }
.sticky--top { top: var(--space-8); }

/* ============================================================================
   §3.1 BUTTON
   ========================================================================== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
       min-height: var(--input-min-height); padding-inline: var(--space-5);
       border-radius: var(--radius-btn); border:1px solid transparent; cursor:pointer;
       font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
       font-size:1rem; line-height:1.25; text-align:center; box-shadow: var(--shadow-none);
       transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease),
                   border-color var(--duration-fast) var(--ease); }
.btn--sm { min-height:2.25rem; padding-inline: var(--space-4); font-size:.875rem; }
.btn--lg { min-height:3.25rem; padding-inline: var(--space-8); }
.btn--outline { border-color: var(--color-primary-600); color: var(--color-primary-600); background:#fff; }
.btn--outline:hover, .btn--outline:focus { border-color: var(--color-primary-700);
                                           background: var(--color-primary-50); color: var(--color-primary-800); }
.btn--filled { background: var(--color-primary-600); border-color: var(--color-primary-600); color:#fff; }
.btn--filled:hover, .btn--filled:focus { background: var(--color-primary-700); border-color: var(--color-primary-700); }
.btn--bare { background:transparent; border-color:transparent; color: var(--color-primary-600);
             padding-inline: var(--space-2); }
.btn--bare:hover, .btn--bare:focus { color: var(--color-primary-800); }
.btn--icon-right .btn__icon { order: 2; }
.btn__icon { transition: transform var(--duration-base) var(--ease); }
.btn--icon-right:hover .btn__icon { transform: translateX(3px); }

/* ============================================================================
   §3.3 BADGE
   ========================================================================== */
.badge { display:inline-flex; align-items:center; gap: var(--space-1);
         padding: .125rem var(--space-3); border-radius: var(--radius-full);
         font-size:.8125rem; line-height:1.6; letter-spacing:.01em;
         font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400; }
.badge--warning { background:#ffedd5; color:#9a3412; }
.badge--info    { background:#dbeafe; color:#1e40af; }
.badge--error   { background: var(--color-primary-100); color: var(--color-primary-800); }
.badge--gray    { background: var(--color-secondary-100); color: var(--color-text-800); }
.badge--success { background:#d1fae5; color:#065f46; }

/* ============================================================================
   §3.4 CARD — flat
   ========================================================================== */
.card { display:flex; flex-direction:column; height:100%; background:#fff; box-shadow: var(--shadow-none); }
.card--default { border: var(--border-hairline); }
.card__content { display:flex; flex-direction:column; justify-content:space-between; height:100%; background:#fff; }
.card__header  { display:flex; align-items:center; gap: var(--space-3);
                 padding: var(--space-4) var(--space-6);
                 background: var(--color-secondary-50); border-bottom: var(--border-hairline); }
.card__body    { padding: var(--space-6); }
.card__body > * + * { margin-top: var(--space-3); }
.card__title   { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
                 line-height:1.3; letter-spacing:-.005em; color: var(--color-text-900); font-size:1.125rem;
                 text-wrap: balance; transition: color var(--duration-base) var(--ease); }
.card__title > :is(h2,h3,h4,h5,.h2,.h3,.h4,.h5) { margin: 0; }
.card__title a { color: inherit; border-bottom: 0; }
.card__description { color: var(--color-text-600); }
.card__footer  { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4);
                 margin-top:auto; padding: var(--space-4) var(--space-6); border-top: var(--border-hairline-soft); }
.card__footer__info { color: var(--color-text-500); font-size:.875rem; }
.card--clickable { position:relative; cursor:pointer;
                   transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); }
.card--clickable:hover, .card--clickable:focus-within { border-color: var(--color-secondary-400);
                                                        background: var(--color-secondary-50); }
.card--clickable:hover .card__content, .card--clickable:focus-within .card__content { background: transparent; }
.card--clickable:hover .card__title { color: var(--color-primary-700); }
.card--clickable a::after { content:""; position:absolute; inset:0; }
.card--clickable a { border-bottom:0; }

.grid { display:grid; }
.grid--responsive-cols-2 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid--responsive-cols-3 { grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width:768px) {
  .grid--responsive-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--responsive-cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:1280px) { .grid--responsive-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ============================================================================
   §3.5 ACCORDION
   ========================================================================== */
.accordion { padding-left:0; list-style:none; margin:0; }
.accordion__item { list-style:none; border-top: var(--border-hairline); margin-top:0 !important; }
.accordion__item:last-of-type { border-bottom: var(--border-hairline); }
.accordion__button { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4);
                     width:100%; padding: var(--space-4) 0; background:none; border:0; cursor:pointer;
                     text-align:left; color: var(--color-text-900);
                     font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
                     font-size:1.0625rem; line-height:1.4;
                     transition: color var(--duration-fast) var(--ease); }
.accordion__button:hover { color: var(--color-primary-700); }
.accordion__arrow { transition: transform var(--duration-base) var(--ease); color: var(--color-secondary-400); }
.accordion__button[aria-expanded="true"] .accordion__arrow { transform: rotate(180deg); color: var(--color-primary-600); }
.accordion__drawer { display:none; }
.accordion__drawer.is-open { display:block; }
.accordion__content { padding: 0 0 var(--space-6); color: var(--color-text-700); max-width:72ch; }
.accordion__content > * + * { margin-top: var(--space-4); }

/* ============================================================================
   §3.6 DOWNLOAD ITEM
   ========================================================================== */
.download-item { display:flex; gap: var(--space-4); align-items:flex-start;
                 padding: var(--space-4) 0; border-bottom: var(--border-hairline-soft); }
.download-item:first-of-type { border-top: var(--border-hairline-soft); }
.download-item__icon { color: var(--color-primary-600); margin-top:.15rem; }
.download-item__title { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
                        color: var(--color-text-900); border-bottom:0; }
.download-item a.download-item__title:hover { color: var(--color-primary-700); }
.download-item__meta { color: var(--color-text-500); font-size:.875rem; margin-top: var(--space-1); }

/* ============================================================================
   §3.8 NOTIFICATION — flat
   ========================================================================== */
.notification { display:flex; gap: var(--space-3); padding: var(--space-4) var(--space-5);
                border-radius: var(--radius-panel); box-shadow: var(--shadow-none); }
.notification__icon { flex-shrink:0; margin-top:.15rem; }
.notification__title { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
                       margin-bottom: var(--space-1); }
.notification__content > * + * { margin-top: var(--space-2); }
.notification--info    { background:#eff6ff; color:#1d4ed8; }
.notification--warning { background:#fff7ed; color:#9a3412; }
.notification--error   { background: var(--color-primary-50); color: var(--color-primary-800); }
.notification--hint    { background: var(--color-secondary-50); color: var(--color-text-700); }
.notification a { color: currentcolor; border-bottom:1px solid currentcolor; }

/* ============================================================================
   §3.12 TABLE — rule-based, flat
   ========================================================================== */
.table-wrapper { overflow-x:auto; width:100%;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 2.5rem 100% no-repeat,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right / 2.5rem 100% no-repeat;
  background-attachment: local, local; }
table, .table { width:100%; border-collapse:collapse; border:0; box-shadow: var(--shadow-none);
                text-align:left; font-variant-numeric: tabular-nums; font-size:1rem; line-height:1.55;
                border-top: var(--border-strong); }
caption { display:none; caption-side:bottom; padding-top: var(--space-3);
          color: var(--color-text-500); font-size:.875rem; text-align:left; white-space:pre-line; }
.table--caption caption { display: table-caption; }
thead { background: transparent; }
thead th { padding: var(--space-3) var(--space-4); text-align:left; vertical-align:bottom;
           font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
           color: var(--color-text-900); font-size:.9375rem; letter-spacing:.005em;
           border-bottom: var(--border-strong); white-space:nowrap; }
thead th:first-child { padding-left:0; }
thead th:last-child  { padding-right:0; }
tbody td, tbody th, tfoot td, tfoot th { padding: var(--space-4); vertical-align: top; color: var(--color-text-700); }
tbody td:first-child, tbody th:first-child, tfoot td:first-child { padding-left:0; }
tbody td:last-child,  tbody th:last-child,  tfoot td:last-child  { padding-right:0; }
tbody tr { border-bottom: var(--border-hairline); }
tbody tr:last-child { border-bottom: var(--border-strong); }
tbody th { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
           text-align:left; color: var(--color-text-900); }
tbody td:first-child { color: var(--color-text-900); }
tbody tr:hover { background: var(--color-secondary-50); }
tbody p + p { margin-top: var(--space-2); }
.table--zebra tbody tr { border-bottom:0; }
.table--zebra tbody tr:nth-child(2n) { background: var(--color-secondary-50); }
.table--zebra tbody tr:hover { background: var(--color-secondary-100); }
.table--fixed { table-layout: fixed; }
.table--bordered td, .table--bordered th { border-right: var(--border-hairline-soft); }
.table--bordered td:last-child, .table--bordered th:last-child { border-right:0; }
/* Column width utilities — column sizing is layout, so it belongs here and not
   in the markup. Each locale reuses the same table with its own translated copy. */
.table__col--date     { width: 9rem; }
.table__col--position { width: 7rem; }
.table__col--version  { width: 7rem; }
.table__cell--numeric { text-align:right; }
.table__cell--nowrap  { white-space:nowrap; }
.table__cell--shrink  { width:1%; white-space:nowrap; }
.table__cell--muted   { color: var(--color-text-500); }
.table__lead { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
               color: var(--color-text-900); }
@media (max-width:767px) {
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td, .table--stack th { display:block; width:100%; }
  .table--stack { display:flex; flex-direction:column; }
  .table--stack tbody { order:1; }
  .table--caption.table--stack caption { display:block; order:2; padding-top: var(--space-3); }
  .table--stack thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path: inset(50%); }
  .table--stack tbody tr { padding-block: var(--space-4); border-bottom: var(--border-hairline); }
  .table--stack tbody tr:hover { background: transparent; }
  .table--stack tbody td, .table--stack tbody th { padding:0 0 var(--space-3); }
  .table--stack tbody td:last-child { padding-bottom:0; }
  .table--stack tbody td::before { content: attr(data-label); display:block;
    font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
    font-size:.8125rem; letter-spacing:.02em; color: var(--color-text-500); }
}

/* ============================================================================
   §3.16 MENU + TOC
   ========================================================================== */
.menu { list-style:none; margin:0; padding:0; }
.menu__item { position:relative; display:flex; align-items:center; justify-content:space-between;
              padding: var(--space-3) var(--space-4); cursor:pointer;
              transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); }
.menu__item--active::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
                             background: var(--color-primary-500); }

.toc { font-size:.9375rem; line-height:1.4; }
.toc__title { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
              font-size:.8125rem; text-transform:uppercase; letter-spacing:.08em; color: var(--color-text-500);
              padding-bottom: var(--space-3); margin:0; border-bottom: var(--border-hairline); }
.toc__group { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
              font-size:.8125rem; color: var(--color-text-500); margin: var(--space-5) 0 var(--space-1); }
.toc__group:first-of-type { margin-top: var(--space-4); }
.toc .menu { border-left: 2px solid var(--color-secondary-100); }
.menu__item--toc { display:block; padding: var(--space-2) var(--space-4); color: var(--color-text-600);
                   border-bottom:0; }
.menu__item--toc:hover { background:transparent; color: var(--color-primary-600);
                         box-shadow: inset 2px 0 0 var(--color-secondary-400); }
.menu__item--toc.menu__item--active { color: var(--color-text-900);
                                      font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400; }
.menu__item--toc.menu__item--active::after { left:-2px; width:2px; }
@media (min-width:768px) {
  .toc.sticky--top { max-height: calc(100vh - var(--space-16)); overflow-y:auto; overscroll-behavior:contain; }
}
@media (max-width:767px) {
  .toc { border: var(--border-hairline); padding: var(--space-4); }
  .toc .menu { border-left:0; }
  .menu__item--toc { padding-inline:0; }
  .menu__item--toc.menu__item--active::after { display:none; }
}

/* ============================================================================
   §3.17 HERO — full-width band, 12-column headline
   ========================================================================== */
.hero { width:100%; background: var(--color-secondary-50); border-bottom: var(--border-hairline);
        box-shadow: var(--shadow-none);
        padding-top: var(--space-10); padding-bottom: var(--space-10); }
@media (min-width:1024px) { .hero { padding-top: var(--space-14); padding-bottom: var(--space-14); } }
@media (min-width:1920px) { .hero { padding-top: var(--space-16); padding-bottom: var(--space-16); } }
.hero--plain { background:#fff; }
.hero__content > * { margin:0; }
.hero__content > .meta-info { margin-bottom: var(--space-3); }
.hero__content > .hero__title { margin-bottom: var(--space-4); }
.hero__content > .hero__description { max-width: 68ch; }
.hero__cta { display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-3) var(--space-4);
             margin-top: var(--space-8); }
@media (min-width:1024px) { .hero__cta { margin-top: var(--space-10); } }
.hero__cta .btn { margin:0; }
.hero__content > :last-child { margin-bottom:0; }
.hero__title { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
               line-height:1.12; letter-spacing:-.02em; color: var(--color-text-900);
               font-size:2rem; overflow-wrap:break-word; text-wrap:balance; max-width:22ch; }
@media (min-width:1024px) { .hero__title { font-size:2.75rem; } }
@media (min-width:1280px) { .hero__title { font-size:3.25rem; max-width:26ch; } }
@media (min-width:1920px) { .hero__title { font-size:3.75rem; } }
.hero__description { font-size:1.125rem; line-height:1.55; color: var(--color-text-600); }
@media (min-width:1280px) { .hero__description { font-size:1.3125rem; } }
.hero__eyebrow { display:inline-flex; align-items:center; gap: var(--space-2);
                 font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
                 font-size:.8125rem; text-transform:uppercase; letter-spacing:.1em;
                 color: var(--color-primary-700); }

/* ============================================================================
   §3.24 SKIP TO CONTENT · §3.23 BACK TO TOP
   ========================================================================== */
.skip-to-content { position:absolute; left: var(--space-4); top:-100%; z-index:2000;
                   padding: var(--space-3) var(--space-5); background:#fff; color: var(--color-primary-600);
                   box-shadow: var(--shadow-overlay); border-radius: var(--radius-btn); }
.skip-to-content:focus { top: var(--space-3); }

.back-to-top-wrapper { position:fixed; right: var(--space-5); bottom: var(--space-5); z-index:900;
                       opacity:0; visibility:hidden; transition: opacity var(--duration-slow) var(--ease),
                       visibility var(--duration-slow) var(--ease); }
.back-to-top-wrapper.is-visible { opacity:1; visibility:visible; }
.back-to-top-btn { display:inline-flex; align-items:center; justify-content:center;
                   width:2.75rem; height:2.75rem; border-radius: var(--radius-btn);
                   box-shadow: var(--shadow-none); border:1px solid var(--color-secondary-200);
                   background:#fff; color: var(--color-text-700); cursor:pointer;
                   transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); }
.back-to-top-btn:hover { border-color: var(--color-secondary-400); background: var(--color-secondary-50);
                         color: var(--color-primary-700); }
.back-to-top-btn__icon { transform: rotate(180deg); }

/* ============================================================================
   §3.26 HEADER CHROME — one full-width band
   ========================================================================== */
#main-header { background:#fff; }
.top-header { position:relative; background:#fff; font-size:.875rem;
              border-bottom: var(--border-hairline-soft); padding-block: var(--space-3); }
@media (min-width:768px)  { .top-header { padding-block: var(--space-4); } }
@media (min-width:1024px) { .top-header { padding-block: var(--space-5); font-size:1rem; } }
.top-header__right { display:flex; align-items:center; gap: var(--space-2); }
.logo { display:flex; align-items:center; gap:0; color: var(--color-text-900); }
.logo__mark { display:flex; align-items:center; justify-content:center; flex-shrink:0;
               height:30px; padding-inline:.4rem; background: var(--color-primary-600); color:#fff;
               font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
               font-size:.9375rem; letter-spacing:.04em; line-height:1; }
.logo__separator { width:1px; align-self:stretch; margin-inline: var(--space-4); background: var(--color-text-300); }
.logo__name { display:flex; flex-direction:column; line-height:1.25; }
.logo__accronym { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400; }
.logo__title { color: var(--color-text-600); font-size:.8125rem; }
@media (max-width:639px) { .logo__title { display:none; } }

.navigation-bar { width:100%; background:#fff; border-bottom: var(--border-hairline-soft); }
.main-navigation { display:none; position:relative; margin-left: calc(var(--space-4) * -1); }
@media (min-width:768px) { .main-navigation--desktop { display:flex; height:3.5rem; } }
@media (min-width:1024px) { .main-navigation--desktop { height:4rem; } }
.main-navigation ul { display:flex; align-items:stretch; height:100%; list-style:none; margin:0; padding:0; }
.main-navigation > ul > li > a { position:relative; display:flex; align-items:center; height:100%;
                                 padding-inline: var(--space-4); line-height:1.25; white-space:nowrap;
                                 color: var(--color-text-800);
                                 transition: color var(--duration-fast) var(--ease); }
.main-navigation > ul > li > a::after { content:""; position:absolute; left: var(--space-4); right: var(--space-4);
                                        bottom:0; height:3px; transition: background-color var(--duration-fast) var(--ease); }
.main-navigation > ul > li > a:hover { color: var(--color-primary-600); }
.main-navigation > ul > li > a.active { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400; }
.main-navigation > ul > li > a.active::after,
.main-navigation > ul > li > a:hover::after { background: var(--color-primary-500); }

.main-navigation--mobile { display:none; border-bottom: var(--border-hairline-soft); background:#fff; }
.main-navigation--mobile.is-open { display:block; }
@media (min-width:768px) { .main-navigation--mobile, .main-navigation--mobile.is-open { display:none; } }
.main-navigation--mobile .menu__item { border-bottom: var(--border-hairline-soft); color: var(--color-text-800);
                                       padding-inline: 0; }
.main-navigation--mobile li:last-child .menu__item { border-bottom:0; }

.burger { display:inline-flex; align-items:center; justify-content:center;
          width:2.75rem; height:2.75rem; background:none; border:0; cursor:pointer; }
@media (min-width:768px) { .burger { display:none; } }
.burger__icon { display:flex; flex-direction:column; gap:5px; width:20px; }
.burger__bar { display:block; height:2px; width:100%; background: var(--color-text-800);
               transition: transform var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease); }
.burger--is-open .burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger--is-open .burger__bar:nth-child(2) { opacity:0; }
.burger--is-open .burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* §3.27 Language switcher */
/* The nav-row instance is the desktop one; the logo-row instance carries --mobile.
   Both stay in the DOM and in sync so every locale renders the same switcher. */
.language-switcher { display:flex; align-items:center; position:relative; }
.language-switcher--nav { display:none; }
.language-switcher select { appearance:none; background:transparent; border:0; cursor:pointer;
                            width:4.25em; padding:.5rem 1.6rem .5rem .25rem; color: var(--color-text-800);
                            font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
                            text-transform:uppercase; letter-spacing:.02em; font-size:.9375rem;
                            transition: color var(--duration-fast) var(--ease); }
@media (min-width:1024px) { .language-switcher select { width:4.75em; padding-left:.5rem; } }
.language-switcher .select__icon { position:absolute; right:0; pointer-events:none;
                                   color: var(--color-text-600); display:flex; }
.language-switcher select:hover, .language-switcher select:focus { color: var(--color-primary-600); }

/* §3.15 Breadcrumb */
.breadcrumb-navigation { border-bottom: var(--border-hairline); background:#fff; }
.breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap: var(--space-2);
              padding-block: var(--space-3); font-size:.875rem; list-style:none; }
.breadcrumb li { display:flex; align-items:center; gap: var(--space-2); color: var(--color-text-500); }
.breadcrumb a { color: var(--color-text-600); }
.breadcrumb a:hover { color: var(--color-primary-600); }
.breadcrumb__sep { color: var(--color-secondary-300); }
.breadcrumb [aria-current="page"] { color: var(--color-text-800); }

/* ============================================================================
   §3.31 BOX
   ========================================================================== */
.box { background: var(--color-secondary-50); padding: var(--space-5); }
@media (min-width:1024px) { .box { padding: var(--space-6); } }
@media (min-width:1280px) { .box { padding: var(--space-8); } }
.box > :first-child { margin-top:0; }
.box > :last-child { margin-bottom:0; }
.box > * + * { margin-top: var(--space-3); }
.box--accent { border-left: 3px solid var(--color-primary-500); }
.box--quiet { background: transparent; border: var(--border-hairline); }

/* Definition list (§5.18) */
.definition-list { margin:0; }
.definition-list dt { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400;
                      color: var(--color-text-900); padding-top: var(--space-4);
                      border-top: var(--border-hairline-soft); }
.definition-list dt:first-of-type { border-top:0; padding-top:0; }
.definition-list dd { margin: var(--space-1) 0 var(--space-4); color: var(--color-text-700); }
.definition-list dd:last-of-type { margin-bottom:0; }

/* ============================================================================
   §3.28 FOOTER — one flat grey
   ========================================================================== */
.footer { background: var(--color-gray-800); color:#fff; box-shadow: var(--shadow-none);
          font-size:.9375rem; line-height:1.5; }
.footer__inner { display:flex; flex-direction:column; gap: var(--space-6); padding-block: var(--space-10); }
@media (min-width:768px) {
  .footer__inner { flex-direction:row; flex-wrap:wrap; align-items:baseline;
                   justify-content:space-between; gap: var(--space-6) var(--space-10);
                   padding-block: var(--space-12); }
}
.footer__brand { display:flex; flex-direction:column; gap: var(--space-1); }
.footer__org { font-family: Font-Bold, Hind, Fallback-font, system-ui, sans-serif; font-weight:400; color:#fff; }
.footer__note { color: var(--color-gray-300); }
.footer__nav { flex:1 1 auto; }
.footer__list { display:flex; flex-wrap:wrap; gap: var(--space-2) var(--space-6); list-style:none; margin:0; padding:0; }
@media (min-width:768px) { .footer__list { justify-content:flex-end; } }
.footer__link { display:inline-flex; align-items:center; gap: var(--space-2);
                min-height: var(--input-min-height); padding-block: var(--space-2);
                color:#fff; border-bottom:1px solid transparent;
                transition: border-color var(--duration-fast) var(--ease); }
.footer__link:hover, .footer__link:focus { color:#fff; border-bottom-color: currentcolor; }
.footer__legal { flex:1 0 100%; margin:0; padding-top: var(--space-6);
                 border-top: var(--border-hairline-dark); color: var(--color-gray-300); font-size:.875rem; }

/* ============================================================================
   PRINT
   ========================================================================== */
@media print {
  html { font-size:13px !important; }
  #main-footer, .top-bar, .toc, .back-to-top-wrapper, .navigation-bar, .breadcrumb-navigation,
  .hero__cta, .burger, .language-switcher { display:none !important; }
  .hero { background:#fff; }
  .container__main { max-width:none; }
  .accordion__drawer { display:block !important; }
  table, p, ul { break-inside: avoid; }
}