/* CIDA Egypt — application styles.
 * Consumes the Phase 1 tokens. Uses LOGICAL properties throughout so RTL is
 * correct by construction rather than by a mirrored stylesheet.
 */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

.wrap { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }

.skip-link {
  position: absolute; inset-block-start: -3rem; inset-inline-start: 1rem;
  background: var(--surface-raised); color: var(--text-primary);
  padding: 0.6rem 1rem; z-index: 100; transition: inset-block-start var(--dur-quick) var(--ease-out);
}
.skip-link:focus { inset-block-start: 1rem; }

/* ---- header ---- */
.site-header { border-block-end: 1px solid var(--border); }
.site-header__inner { display: flex; align-items: center; gap: 2rem; padding-block: 1rem; }
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.brand__seal { flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-display); font-size: var(--text-heading-3); letter-spacing: var(--tracking-display); }
.brand__country { color: var(--accent); }
.brand__descriptor { font-size: var(--text-caption); color: var(--text-tertiary); }

.site-nav { margin-inline-start: auto; }
.site-nav__list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; }

/* 44px is the tap target, not the text. inline-flex + min-block-size gives the
   whole strip the height without opening a gap in the bar. */
.site-nav a {
  display: inline-flex; align-items: center; min-block-size: 44px;
  color: var(--text-secondary); text-decoration: none;
}
.site-nav a:hover { color: var(--text-primary); }

/* The current section reads as current WITHOUT relying on colour: a gold rule
   under the label carries it for anyone who cannot separate the two greys. */
.site-nav a[aria-current] {
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 0 var(--gold-metal);
}

/* ---- mobile menu ----
 *
 * The collapsed layout exists ONLY under [data-collapsible], which the inline
 * script in partials/header.php sets. With scripting blocked neither the
 * attribute nor the button appears, and the bar degrades to a wrapping row of
 * links — usable rather than merely present. That is also why nothing here
 * hides the list on a plain `@media` alone: it would hide links that no button
 * can bring back.
 */
.site-nav__toggle {
  display: inline-flex; align-items: center; gap: .6rem;
  min-block-size: 44px; min-inline-size: 44px; padding-inline: .875rem;
  margin-inline-start: auto;
  font: inherit; font-size: var(--text-body-sm);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-strong);
  cursor: pointer;
}
.site-nav__toggle[hidden] { display: none; }
.site-nav__toggle:hover { color: var(--text-primary); border-color: var(--accent); }

/* Above the breakpoint the bar IS the menu. The script un-hides the button
   unconditionally — it cannot know the viewport will change — so hiding it
   here keeps one rule responsible for the answer. */
@media (min-width: 60rem) {
  .site-nav__toggle { display: none; }
}

/* Three bars from one element: the box is the middle rule, the two ends are
   box-shadows. No extra markup for a decoration. */
.site-nav__bars, .site-nav__bars::before, .site-nav__bars::after {
  display: block; inline-size: 18px; block-size: 2px;
  background: currentColor;
}
.site-nav__bars { position: relative; }
.site-nav__bars::before, .site-nav__bars::after { content: ""; position: absolute; inset-inline: 0; }
.site-nav__bars::before { inset-block-start: -6px; }
.site-nav__bars::after { inset-block-start: 6px; }

@media (max-width: 59.999rem) {
  .site-header__inner { flex-wrap: wrap; gap: 1rem; }
  .brand { margin-inline-end: auto; }
  /* Arabic runs ~1.2x the Latin character count, so the descriptor is the
     first thing to overflow a phone. */
  .brand__descriptor { max-inline-size: 22ch; }

  /* Order is set here rather than in the source, because the source order is
     what a screen reader and the tab sequence follow: brand, button, menu,
     language. Visually the language selector sits beside the button. */
  .site-nav__toggle { order: 2; }
  .lang { order: 3; }
  .site-nav { order: 4; }

  .site-nav[data-collapsible] {
    flex-basis: 100%;
    margin-inline-start: 0;
    /* display:none, not visibility/height: a closed menu must be out of the
       tab order, and a hidden-but-focusable link is the classic way a keyboard
       visitor ends up typing into something they cannot see. */
    display: none;
    background: var(--surface-overlay);
    border: 1px solid var(--border);
    padding: .25rem 1rem;
  }
  .site-nav[data-collapsible][data-open] { display: block; }
  .site-nav[data-collapsible] .site-nav__list { display: grid; gap: 0; }
  .site-nav[data-collapsible] .site-nav__list a {
    display: flex; min-block-size: 48px; inline-size: 100%;
    border-block-end: 1px solid var(--border);
  }
  .site-nav[data-collapsible] .site-nav__list li:last-child a { border-block-end: 0; }
  .site-nav[data-collapsible] a[aria-current] {
    box-shadow: none;
    border-inline-start: 2px solid var(--gold-metal);
    padding-inline-start: .75rem;
  }
}

/* Below this the lockup is seal + wordmark only. The descriptor is a third
   line of small type and is what breaks the header first; the horizontal
   lockup itself stays intact, which is what brand/BRAND.md actually requires. */
@media (max-width: 26rem) {
  .brand__descriptor { display: none; }
  .site-nav__toggle-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-nav__toggle { padding-inline: 0; justify-content: center; }
}

/* Language selector.
 *
 * A <details> dropdown. The previous build put all four labels inline in the
 * chrome as CSS-masked SVGs — four languages competing for attention on every
 * page, and an implementation nobody could read the accessibility of at a
 * glance. A selector states the current language and offers the rest on
 * request, which is how a visitor actually thinks about it.
 *
 * Items are LIVE text. The non-Latin native names are scoped to system font
 * families below, so opening the menu on an English page does not pull the
 * Arabic webfont — the one real constraint the old SVG approach existed for.
 */
.lang__menu { position: relative; }
.lang__menu > summary { list-style: none; cursor: pointer; }
.lang__menu > summary::-webkit-details-marker { display: none; }

.lang__button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  block-size: 40px;
  padding-inline: .75rem .625rem;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  background: transparent;
  transition: border-color .16s var(--ease-out, ease), color .16s var(--ease-out, ease);
}
.lang__menu > summary:hover .lang__button { border-color: var(--accent); color: var(--text-primary); }
.lang__menu > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.lang__code {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
}
.lang__name {
  font-size: var(--text-body-sm);
  font-family: ui-sans-serif, system-ui, sans-serif; /* never the locale webfont */
}
.lang__chevron { transition: rotate .2s var(--ease-out, ease); }
.lang__menu[open] .lang__chevron { rotate: 180deg; }

/* Open panel: anchored inline-end, so it opens inward in LTR and RTL alike. */
.lang__list {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  min-inline-size: 13.5rem;
  margin: 0;
  padding-block: .375rem;
  list-style: none;
  background: var(--surface-overlay);
  border: 1px solid var(--border-strong);
  border-block-start: 2px solid var(--gold-metal); /* the one jewel */
  box-shadow: 0 16px 48px rgb(0 0 0 / .55);
  animation: lang-in .18s var(--ease-out, ease);
}
@keyframes lang-in { from { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .lang__list { animation: none; } }

.lang__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-block-size: 44px;            /* touch target */
  padding: .6875rem 1rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: background-color .16s var(--ease-out, ease);
}
.lang__item:hover, .lang__item:focus-visible { background: var(--surface-inset); }
.lang__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

.lang__item-code {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: var(--tracking-caps);
  direction: ltr;                  /* Latin codes stay Latin-ordered in RTL */
  min-inline-size: 2ch;
}
.lang__item-name { font-family: ui-sans-serif, system-ui, sans-serif; }

/* The current language: a struck gold rule, and it reads strongest. */
.lang__item[aria-current] {
  border-inline-start: 2px solid var(--gold-metal);
  padding-inline-start: calc(1rem - 2px);
}
.lang__item[aria-current] .lang__item-code { color: var(--accent); }

/* ---- hero ---- */
.hero { padding-block: clamp(3rem, 8vw, 7rem); }
.hero h1 { font-size: var(--text-display-2); margin-block: 0.5rem 1rem; max-inline-size: 20ch; }
.hero__lede { font-size: var(--text-body-lg); color: var(--text-secondary); max-inline-size: 55ch; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-block-start: 2rem; }

.btn {
  display: inline-block; padding: 0.75rem 1.5rem;
  border: 1px solid var(--border-strong); color: var(--text-primary);
  text-decoration: none; font-family: var(--font-ui); font-weight: 500;
  transition: background-color var(--dur-quick) var(--ease-out);
}
.btn:hover { background: var(--surface-raised); }
.btn--primary { background: var(--gold-metal); border-color: var(--gold-metal); color: var(--on-gold); }
.btn--primary:hover { background: var(--gold-400); border-color: var(--gold-400); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- sections ---- */
.sectors { padding-block: 3rem; border-block-start: 1px solid var(--border); }
.sectors__list { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); list-style: none; padding: 0; }

/* ---- content ---- */
[data-surface="register"] { background: var(--surface); color: var(--text-primary); }
.content { padding-block: 3rem; }
.prose { max-inline-size: 68ch; }
.prose p { margin-block: 0 1.25em; }

.breadcrumbs ol { display: flex; gap: 0.5rem; list-style: none; padding: 0; font-size: var(--text-caption); }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; color: var(--text-tertiary); }

/* ---- verify ---- */
.verify, .verify-result, .error-page { padding-block: 3rem; }
.verify__form { display: grid; gap: 0.75rem; max-inline-size: 28rem; margin-block-start: 2rem; }
.verify__form input, .verify__form select {
  padding: 0.7rem; border: 1px solid var(--border-strong);
  background: var(--surface-raised); color: var(--text-primary); font: inherit;
}
.verify__form button { padding: 0.75rem; border: 0; background: var(--gold-metal); color: var(--on-gold); font: inherit; font-weight: 600; cursor: pointer; }

/* Status carries an icon shape AND a text label — never colour alone. */
.status { display: flex; align-items: center; gap: 0.6rem; font-size: var(--text-body-lg); }
.status__icon { font-size: 1.4em; line-height: 1; }
.status--valid { color: var(--state-success); }
.status--invalid { color: var(--state-danger); }

.verify-result__detail { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin-block-start: 1.5rem; }
.verify-result__detail dt { color: var(--text-tertiary); font-size: var(--text-body-sm); }
.verify-result__detail dd { margin: 0; }

/* ---- footer ----
 *
 * The footer carries the site index. `services` is published with in_nav=0 and
 * has no place in the header; without these columns it would have no inbound
 * link anywhere on the site, which is a page that exists and cannot be found.
 */
.site-footer { border-block-start: 1px solid var(--border); padding-block: 2.5rem 2rem; margin-block-start: 4rem; }

.site-footer__nav {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-block-end: 2.5rem;
}
.site-footer__heading {
  font-size: var(--text-caption); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-tertiary);
  font-weight: 600; margin-block: 0 .75rem;
}
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links a {
  display: flex; align-items: center; min-block-size: 44px;
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--text-body-sm);
}
.site-footer__links a:hover { color: var(--text-primary); text-decoration: underline; }

.site-footer__legal-block { border-block-start: 1px solid var(--border); padding-block-start: 1.5rem; }
.site-footer__legal { font-size: var(--text-body-sm); color: var(--text-secondary); margin-block: 0 0.5rem; }
.site-footer__endorsement { font-size: var(--text-body-sm); color: var(--text-secondary); margin-block: 0 0.5rem; }
.site-footer__copyright { font-size: var(--text-caption); color: var(--text-tertiary); margin: 0; }

/* ---- intake ---- */
.apply { padding-block: 3rem; }
.apply__routes { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-block-start: 2rem; }
/* border-strong, not border: this outline IS the clickable target. Nothing
   else marks where the card begins, so it is a UI component boundary under
   WCAG 1.4.11 and needs 3:1 — the decorative divider token is 1.4:1. */
.apply__routes a { display: block; border: 1px solid var(--border-strong); padding: 1.25rem; text-decoration: none; color: inherit; transition: border-color var(--dur-quick) var(--ease-out); }
.apply__routes a:hover { border-color: var(--accent); }
.apply__routes h2 { font-size: var(--text-heading-3); margin-block: 0 .4rem; }
.apply__routes p { color: var(--text-secondary); font-size: var(--text-body-sm); margin: 0; }
.apply__form { display: grid; gap: 1.25rem; max-inline-size: 40rem; margin-block-start: 2rem; }
.apply__ref { font-size: var(--text-heading-2); margin-block: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { color: var(--text-secondary); font-size: var(--text-body-sm); }
.field input, .field textarea, .field select { padding: .65rem; border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--text-primary); font: inherit; }
.field input[aria-invalid], .field textarea[aria-invalid] { border-color: var(--state-danger); }
.field__error { color: var(--state-danger); font-size: var(--text-caption); margin: 0; }
.field--check label { display: flex; gap: .6rem; align-items: start; color: var(--text-primary); }
.form-error { border-inline-start: 3px solid var(--state-danger); padding: .7rem 1rem; color: var(--state-danger); }
.lede { color: var(--text-secondary); font-size: var(--text-body-lg); max-inline-size: 60ch; }

/* The intake and enquiry forms shipped their submit button unstyled — a
   browser-default control at the end of a designed form, and on a phone a
   target smaller than a fingertip. One rule, both forms. */
.apply__form button, .contact__form button {
  justify-self: start;
  min-block-size: 44px; padding: .75rem 1.75rem;
  border: 1px solid var(--gold-metal); background: var(--gold-metal); color: var(--on-gold);
  font: inherit; font-weight: 600; cursor: pointer;
}
.apply__form button:hover, .contact__form button:hover {
  background: var(--gold-400); border-color: var(--gold-400);
}
.verify__form button { min-block-size: 44px; }

/* ---- contact ---- */
.contact .prose { margin-block-end: 3rem; }
.contact__privacy { color: var(--text-tertiary); font-size: var(--text-caption); margin: 0; max-inline-size: 60ch; }
.contact__sent {
  border-inline-start: 3px solid var(--state-success);
  padding: 1.25rem 1.5rem; margin-block-start: 2rem; max-inline-size: 60ch;
}
.contact__sent h2 { margin-block: 0 .5rem; font-size: var(--text-heading-3); color: var(--state-success); }
.contact__sent p { margin: 0; color: var(--text-secondary); }

/* ---- consent ----
 * Anchored to the bottom of the viewport, above the cinematic layers but never
 * covering the skip link. Accept and refuse are the same element with the same
 * weight: a refusal that is visually cheaper than acceptance is not a choice.
 */
.consent { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 90; background: var(--surface-raised); border-block-start: 1px solid var(--border-strong); box-shadow: 0 -1rem 3rem rgb(0 0 0 / .35); }
.consent[hidden] { display: none; }
.consent__inner { max-inline-size: 60rem; margin-inline: auto; padding: 1.5rem 1.5rem 1.75rem; max-block-size: 80vh; overflow-y: auto; }
.consent__heading { font-family: var(--font-display); font-size: var(--text-heading-3); margin-block: 0 .5rem; }
.consent__heading:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.consent__intro { color: var(--text-secondary); font-size: var(--text-body-sm); margin-block: 0 1.25rem; max-inline-size: 70ch; }

.consent__categories { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.consent__toggle { display: flex; gap: .6rem; align-items: center; font-weight: 600; }
.consent__desc { color: var(--text-secondary); font-size: var(--text-body-sm); margin-block: .35rem 0; }
.consent__vendors { list-style: none; padding: 0; margin-block-start: .5rem; font-size: var(--text-caption); color: var(--text-tertiary); display: grid; gap: .3rem; }
.consent__vendors a { color: var(--accent); text-decoration: none; }

.consent__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.consent__btn { font: inherit; font-weight: 600; padding: .7rem 1.4rem; min-inline-size: 11rem; border: 1px solid var(--gold-metal); background: var(--gold-metal); color: var(--on-gold); cursor: pointer; }
.consent__btn:hover { background: var(--gold-400); border-color: var(--gold-400); }
.consent__btn--quiet { background: none; color: var(--text-primary); border-color: var(--border-strong); }
.consent__btn--quiet:hover { background: var(--surface-sunken); border-color: var(--border-strong); }
.consent__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.consent__note { color: var(--text-tertiary); font-size: var(--text-caption); margin-block: 1rem 0; }

.consent-open { background: none; border: 0; padding: 0; font: inherit; font-size: var(--text-caption); color: var(--text-tertiary); text-decoration: underline; cursor: pointer; }
.consent-open:hover { color: var(--text-secondary); }

/* ---- portal ----
 * A signed-in area, not a showcase. Legible, dense, no motion: someone is here
 * to check an expiry date, not to be impressed.
 */
.portal { padding-block: 2.5rem 5rem; }
.portal h1 { font-family: var(--font-display); font-size: var(--text-heading-1); margin-block: 0 1.5rem; }
.portal h2 { font-size: var(--text-heading-3); margin-block: 2.5rem 1rem; }
.portal-empty { color: var(--text-secondary); }
.portal-hint { display: block; color: var(--text-tertiary); font-size: var(--text-caption); }

.portal-nav { border-block-end: 1px solid var(--border); background: var(--surface-raised); }
.portal-nav__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: .75rem; flex-wrap: wrap; }
.portal-nav__links { list-style: none; display: flex; gap: 1.25rem; padding: 0; margin: 0; }
.portal-nav__links a { color: var(--text-secondary); text-decoration: none; }
.portal-nav__links a:hover { color: var(--text-primary); }
.portal-nav__account { margin-inline-start: auto; display: flex; align-items: center; gap: 1rem; }
.portal-nav__who { font-size: var(--text-caption); color: var(--text-tertiary); }
.portal-nav__signout { background: none; border: 1px solid var(--border-strong); color: var(--text-secondary); font: inherit; font-size: var(--text-caption); padding: .3rem .8rem; cursor: pointer; }
.portal-nav__signout:hover { background: var(--surface-sunken); color: var(--text-primary); }

.portal-facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem; margin-block-end: 2rem; font-size: var(--text-body-sm); }
.portal-facts dt { color: var(--text-tertiary); }
.portal-facts dd { margin: 0; }

/* Renewal warning. Deliberately the loudest thing on the page — a lapsed TSP
   registration costs the whole eight-step procedure again. */
.portal-alert { border: 1px solid var(--state-warning); border-inline-start-width: 3px; padding: 1.25rem 1.5rem; margin-block-end: 2.5rem; }
.portal-alert h2 { margin-block: 0 .5rem; color: var(--state-warning); font-size: var(--text-heading-3); }
.portal-alert__list { list-style: none; padding: 0; display: grid; gap: .5rem; margin-block: 1rem; font-size: var(--text-body-sm); }

.portal-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); margin-block-end: 2rem; }
.portal-table th, .portal-table td { text-align: start; padding: .6rem .7rem; border-block-end: 1px solid var(--border); vertical-align: top; }
.portal-table th { color: var(--text-tertiary); font-weight: 500; }
.portal-table__actions a { display: block; color: var(--accent); text-decoration: none; white-space: nowrap; }
.portal-records__kind { font-size: var(--text-body-lg); margin-block: 1.5rem .5rem; text-transform: capitalize; }
.is-valid { color: var(--state-success); }
.is-invalid { color: var(--state-danger); }

.portal-auth { max-inline-size: 26rem; margin-inline: auto; padding-block: 4rem 6rem; }
.portal-auth h1 { font-family: var(--font-display); font-size: var(--text-heading-2); margin-block: 0 .75rem; }
.portal-auth__intro { color: var(--text-secondary); font-size: var(--text-body-sm); }
.portal-auth__form { display: grid; gap: 1rem; margin-block: 1.5rem; }
.portal-auth__links { font-size: var(--text-body-sm); }
.portal-auth__links a { color: var(--accent); }
.portal-auth__note { color: var(--text-tertiary); font-size: var(--text-caption); border-block-start: 1px solid var(--border); padding-block-start: 1rem; margin-block-start: 2rem; }
.portal-flash { border-inline-start: 3px solid var(--accent); padding: .6rem 1rem; font-size: var(--text-body-sm); }
.portal-flash--success { border-color: var(--state-success); color: var(--state-success); }
.portal-flash--error { border-color: var(--state-danger); color: var(--state-danger); }

/* ---- printable statement ---- */
.statement__actions { display: flex; gap: 1rem; align-items: center; margin-block-end: 2rem; }
.statement__sheet { border: 1px solid var(--border-strong); padding: 3rem; max-inline-size: 46rem; }
.statement__head { text-align: center; border-block-end: 1px solid var(--border); padding-block-end: 1.5rem; margin-block-end: 2rem; }
.statement__org { font-size: var(--text-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin-block: .75rem 0; }
.statement__title { font-family: var(--font-display); font-size: var(--text-heading-2); margin-block: .5rem 0; }
.statement__facts { display: grid; grid-template-columns: auto 1fr; gap: .75rem 2rem; }
.statement__facts dt { color: var(--text-tertiary); font-size: var(--text-body-sm); }
.statement__facts dd { margin: 0; }
.statement__foot { border-block-start: 1px solid var(--border); margin-block-start: 2.5rem; padding-block-start: 1.5rem; }
.statement__verify { font-size: var(--text-body-sm); }
.statement__note { color: var(--text-secondary); font-size: var(--text-caption); max-inline-size: 60ch; }
.statement__printed { color: var(--text-tertiary); font-size: var(--text-caption); }

@media print {
  .no-print, .site-header, .site-footer, .portal-nav, #ambient, #glow, #vignette, #grain, #progress { display: none !important; }
  .statement__sheet { border: 0; padding: 0; }
  /* The verification URL must survive printing — it is the whole point of the
     sheet. Colours are forced because a printer default of "no backgrounds"
     would otherwise drop the status colour entirely. */
  .statement__verify { font-weight: 600; }
  .is-valid, .is-invalid { color: #000 !important; }
}