/* Atoms. Every top-level class here has a spec block in ../design.md. */

/* Read aloud, never drawn. Used by the subscribe field's label and the
   footer's heading. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--control-h);
  padding: 0 var(--s-5);   /* no vertical padding: the 48 height and centring set it, so a 1px border does not push the label */
  border: var(--hairline) solid var(--m-900);
  border-radius: var(--radius);
  background-color: var(--m-700);
  background-image: linear-gradient(180deg, var(--m-700), var(--m-800));
  box-shadow: inset 0 1px 0 var(--btn-hi), 0 1px 0 var(--m-900), var(--btn-contact);
  color: var(--g-0);
  font: inherit;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  letter-spacing: var(--tracking-ui);
  font-weight: var(--w-regular);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow var(--dur-press) var(--ease-press), transform var(--dur-press) var(--ease-press);
}
/* Nothing changes colour on hover, the way the reference does it; the contact
   shadow deepens instead, so the label's contrast never moves. */
.btn:hover { box-shadow: inset 0 1px 0 var(--btn-hi), 0 1px 0 var(--m-900), var(--btn-contact-hover); }
.btn:active { transform: var(--btn-press); box-shadow: inset 0 1px 0 var(--btn-hi-press); }
.btn:focus-visible { outline: var(--focus-ring) solid var(--m-700); outline-offset: var(--focus-gap); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background-image: none;
  background-color: var(--g-100);
  border-color: transparent;
  box-shadow: none;
  color: var(--g-500);
  cursor: not-allowed;
}
.btn svg { width: var(--icon-glyph); height: var(--icon-glyph); }

.btn-quiet {
  background-color: var(--g-0);
  background-image: linear-gradient(180deg, var(--g-0), var(--g-100));
  border-color: var(--g-200);
  box-shadow: inset 0 1px 0 var(--btn-hi-light), 0 1px 0 var(--btn-edge), var(--btn-contact);
  color: var(--g-900);
}
.btn-quiet:hover { box-shadow: inset 0 1px 0 var(--btn-hi-light), 0 1px 0 var(--btn-edge), var(--btn-contact-hover); }
.btn-quiet:active { transform: var(--btn-press); box-shadow: var(--btn-press-light); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--g-500);
  font-size: 0;   /* icon only; the UA default of 13.33px would otherwise render as a fourth size */
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--g-50); color: var(--g-900); }
.icon-btn:active { background: var(--g-100); }
.icon-btn:focus-visible { outline: var(--focus-ring) solid var(--m-700); outline-offset: var(--focus-gap); }
.icon-btn svg { width: var(--icon-glyph); height: var(--icon-glyph); }

.display {
  margin: 0;
  font-size: var(--t-display-lg);
  line-height: var(--lh-display);
  font-family: "Almarai", "Geist", system-ui, sans-serif;
  letter-spacing: var(--tracking-display);
  font-weight: var(--w-regular);
  color: var(--g-900);
  max-width: var(--measure-display);
  text-wrap: balance;
}

.lede {
  margin: 0;
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  letter-spacing: var(--tracking-lede);
  color: var(--g-600);
  max-width: var(--measure-lede);
  text-wrap: pretty;
}

.figure {
  font-size: var(--t-lede);
  line-height: var(--lh-figure);
  letter-spacing: var(--tracking-lede);
  color: var(--g-900);
}

.meta {
  margin: 0;
  font-size: var(--t-ui);
  line-height: var(--lh-meta);
  color: var(--g-500);
}

.split {
  position: relative;
  display: inline-flex;
  border-radius: var(--radius);
  box-shadow: var(--split-edge);
  transition: box-shadow var(--dur-press) var(--ease-press);
}
.split:hover { box-shadow: inset 0 1px 0 var(--btn-hi-light), 0 0 0 var(--hairline) var(--g-200), 0 1px 0 var(--hairline) var(--btn-edge), var(--btn-contact-hover); }
.split-label {
  display: inline-flex;
  align-items: center;
  height: var(--control-h);
  padding: 0 var(--s-4);
  border-radius: var(--radius) 0 0 var(--radius);
  background-color: var(--g-0);
  background-image: linear-gradient(180deg, var(--g-0), var(--g-100));
  color: var(--g-900);
  line-height: var(--lh-ui);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.split-label:hover { background-image: linear-gradient(180deg, var(--g-0), var(--g-50)); }
.split-label:active { background-image: none; background-color: var(--g-100); box-shadow: var(--btn-press-light); }
.split-label:focus-visible { position: relative; z-index: 1; outline: var(--focus-ring) solid var(--m-700); outline-offset: var(--focus-gap); }

.split-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--split-toggle-w);
  height: var(--control-h);
  padding: 0;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: var(--g-0);
  background-image: linear-gradient(180deg, var(--g-0), var(--g-100));
  color: var(--g-900);
  box-shadow: inset var(--hairline) 0 0 var(--g-200);
  font-size: 0;   /* icon only; keeps the UA 13.33px out of the type scale */
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.split-toggle:hover,
.split-toggle[aria-expanded="true"] { background-image: linear-gradient(180deg, var(--g-0), var(--g-50)); }
.split-toggle:active { background-image: none; background-color: var(--g-100); box-shadow: inset var(--hairline) 0 0 var(--g-200), var(--btn-press-light); }
.split-toggle:focus-visible { position: relative; z-index: 1; outline: var(--focus-ring) solid var(--m-700); outline-offset: var(--focus-gap); }
.split-toggle svg { width: var(--icon-glyph); height: var(--icon-glyph); transition: transform var(--dur-base) var(--ease-out); }
.split-toggle[aria-expanded="true"] svg { transform: var(--turn-half); }

.menu {
  position: absolute;
  top: calc(100% + var(--s-2));
  right: 0;
  z-index: var(--z-menu);
  min-width: var(--menu-min-w);
  margin: 0;
  padding: var(--s-1);
  list-style: none;
  border-radius: var(--radius);
  background: var(--g-0);
  box-shadow: var(--shadow-menu);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@starting-style {
  .menu { opacity: 0; transform: var(--menu-enter); }
}

.menu-item {
  display: flex;
  align-items: center;
  height: var(--menu-item-h);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-inner);
  color: var(--g-900);
  line-height: var(--lh-ui);
  text-decoration: none;
  white-space: nowrap;
}
.menu-item:hover { background: var(--g-50); }
.menu-item:focus-visible { outline: var(--focus-ring) solid var(--m-700); outline-offset: 0; background: var(--g-50); }

.section-title {
  margin: 0;
  font-family: "Almarai", "Geist", system-ui, sans-serif;
  font-size: var(--t-display-lg);
  line-height: var(--lh-display);
  font-weight: var(--w-regular);
  color: var(--g-900);
  text-wrap: balance;
}

.pointer {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.pointer-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pointer-icon);
  height: var(--pointer-icon);
  padding: 0;
  border-radius: 50%;
  background: var(--g-0);
  color: var(--m-700);
  box-shadow: var(--shadow-icon);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.pointer-icon svg { width: var(--icon-glyph); height: var(--icon-glyph); }
.pointer:hover .pointer-icon { background: var(--m-700); color: var(--g-0); }

.pointer-title {
  margin: 0;
  font-size: var(--t-lede);
  line-height: var(--lh-title);
  font-weight: var(--w-regular);
  color: var(--g-900);
  text-wrap: balance;
}

.pointer-body {
  margin: var(--s-1) 0 0;
  font-size: var(--t-ui);
  line-height: var(--lh-meta);
  color: var(--g-600);
  text-wrap: balance;
}

.card-lead {
  padding: var(--s-6);
  border-radius: var(--radius);
  background: var(--m-50);
}

.card {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border-radius: var(--radius);
  background: var(--g-50);
}

.card-title {
  margin: 0;
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  font-weight: var(--w-regular);
  color: var(--g-900);
  text-wrap: balance;
}

.card-body {
  margin: var(--s-2) 0 0;
  max-width: var(--measure-card);
  font-size: var(--t-ui);
  line-height: var(--lh-meta);
  color: var(--g-600);
  text-wrap: pretty;
}

.stat-num {
  font-size: var(--t-display-lg);
  line-height: var(--lh-display);
  font-weight: var(--w-regular);
  color: var(--g-900);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  border-radius: var(--s-1);
  color: var(--m-800);   /* --m-700 measures 4.48:1 on the --g-50 cards; one step darker clears 4.5 on every ground */
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  text-decoration: underline;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: var(--s-1);
  transition: color var(--dur-fast) var(--ease-out);
}
.text-link svg { width: var(--icon-glyph); height: var(--icon-glyph); transition: transform var(--dur-base) var(--ease-out); }
.text-link:hover { color: var(--m-900); }
.text-link:hover svg { transform: translateX(var(--s-1)); }
.text-link:focus-visible { outline: var(--focus-ring) solid var(--m-700); outline-offset: var(--focus-gap); }

@media (prefers-reduced-motion: reduce) {
  .menu,
  .split-toggle svg,
  .text-link svg,
  .btn,
  .split { transition: none; }
  /* The press still drops its shadow layers, which is the state change; it just
     does not travel. */
  .btn:active,
  .btn-quiet:active { transform: none; }
}

@media (max-width: 560px) {
  .display,
  .section-title,
  .stat-num { font-size: var(--t-display-sm); }
}