/* AIS Insights base styles: typography, layout primitives and the small shared
 * components (labels, buttons, chips, fields, focus). Page and card styles build on
 * these. Every value comes from tokens.css.
 */

/* --- reset ------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--f-sans);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* --- typography -------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  color: var(--c-navy);
}

/* long words (German compounds, URLs in titles) break rather than push the page wide */
h1,
h2,
h3,
h4,
p,
li,
dd,
dt {
  overflow-wrap: break-word;
}

/* Headings break between words, never inside one. Hyphenating them below 700 px, meant
   for German compounds, split ordinary words on phones ("mat-ter", "ex-ist"); a word
   too long for the column still wraps by the overflow-wrap above. */
@media (max-width: 699px) {
  h1,
  h2,
  h3 {
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  /* German (a German heading, or German text inside one) hyphenates again: its compounds
     ("Nachhaltigkeitsberichterstattung") are wider than a phone. Only words of ten
     letters or more, with four at least on either side of the break. English inside a
     German heading (a fallback) stays whole. */
  :is(h1, h2, h3):lang(de),
  :is(h1, h2, h3) :lang(de) {
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 10 4 4;
  }

  :is(h1, h2, h3) :not(:lang(de)) {
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
}

h3 {
  font-size: var(--fs-h3);
}

p {
  margin: 0 0 var(--s-4);
}

a {
  color: var(--c-navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--c-navy-hover);
  text-decoration-color: var(--c-gold);
}

em,
i {
  font-style: italic;
}

::selection {
  background: var(--c-sand);
  color: var(--c-ink);
}

/* --- focus ------------------------------------------------------------------- */

/* One visible ring everywhere: 2 px navy, 2 px away (handoff, Barrierefreiheit). */
:focus-visible {
  outline: var(--focus-width) solid var(--c-focus);
  outline-offset: var(--focus-offset);
}

/* the browser's own audio player keeps focus on its inner controls */
audio:focus-within {
  outline: var(--focus-width) solid var(--c-focus);
  outline-offset: var(--focus-offset);
}

.on-navy :focus-visible {
  outline-color: var(--c-focus-on-navy);
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: var(--s-2);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-navy);
  color: var(--c-white);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: var(--c-white);
}

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

/* --- layout ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--text {
  max-width: calc(var(--container-text) + 2 * var(--gutter));
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: var(--s-7);
}

.rule-top {
  border-top: var(--rule) solid var(--c-line);
}

/* --- labels ------------------------------------------------------------------ */

.label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font: var(--fw-bold) var(--fs-label) / 1.2 var(--f-sans);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-dark);
}

.label--lg {
  font-size: var(--fs-label-lg);
}

.on-navy .label {
  color: var(--c-gold-light);
}

/* the gold square used as a bullet beside labels and trust points */
.marker::before,
.label--marker::before {
  content: "";
  flex: none;
  width: var(--marker);
  height: var(--marker);
  background: var(--c-gold);
}

/* Spaced capitals break Arabic letter joining and mean nothing in Devanagari, Japanese
   or Chinese; labels in those scripts are set plainly. The label's own language decides:
   ":lang(ar) .label" matched every label under <html lang="ar">, the English interface
   (lang="en" on header, main, footer) included. */
.label:lang(ar),
.label:lang(hi),
.label:lang(ja),
.label:lang(zh) {
  letter-spacing: 0;
  text-transform: none;
}

.beta {
  display: inline-block;
  padding: 1px var(--s-1);
  font: var(--fw-bold) var(--fs-label) / 1.4 var(--f-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-gold-dark);
  border: var(--rule) solid var(--c-gold);
  vertical-align: middle;
}

/* --- buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 10px 20px;
  font: var(--fw-bold) var(--fs-button) / 1.1 var(--f-sans);
  text-decoration: none;
  border: var(--rule) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.btn--primary {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

.btn--primary:hover {
  background: var(--c-navy-hover);
  border-color: var(--c-navy-hover);
  color: var(--c-white);
}

.btn--accent {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink);
}

.btn--accent:hover {
  background: var(--c-gold-light);
  border-color: var(--c-gold-light);
  color: var(--c-ink);
}

.btn--outline {
  background: transparent;
  border-color: var(--c-navy);
  color: var(--c-navy);
}

.btn--outline:hover {
  background: var(--c-navy);
  color: var(--c-white);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* --- chips and tags ---------------------------------------------------------- */

/* Role chips, topic buttons, quick topics: one shape. Active is navy. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 8px 16px;
  background: var(--c-paper);
  border: var(--rule) solid var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-navy);
  font: var(--fw-semibold) var(--fs-meta) / 1.2 var(--f-sans);
  text-decoration: none;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--c-navy);
  color: var(--c-navy);
}

.chip[aria-pressed="true"],
.chip[aria-current="true"],
.chip.is-active {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

.chip--sand {
  background: var(--c-sand);
  border-color: var(--c-sand);
}

/* The topic label inside a card: not interactive. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--c-sand);
  color: var(--c-navy);
  font: var(--fw-semibold) var(--fs-small) / 1.3 var(--f-sans);
}

.tag i,
.chip i {
  font-size: 0.95em;
}

/* --- form fields ------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field__label {
  font: var(--fw-bold) var(--fs-label) / 1.2 var(--f-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.field__hint {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--c-muted);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  background: var(--c-paper);
  border: var(--rule) solid var(--c-field-line);
  border-radius: var(--radius);
  color: var(--c-ink);
  font-size: var(--fs-body);
}

/* Our own select in every browser (decision 62). Safari, on a Mac and on an iPhone, drew
   its native box at 26-28 px whatever the min-height; without its appearance a select
   takes the tap height and the padding like the other fields. */
.select {
  min-width: 0;
  max-width: 100%;
  padding-inline-end: 40px;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
  /* A chosen name longer than the box stops at its edge ("…" where the browser draws
     one). Safari passed the whole name on as overflow: with a long outlet chosen and
     Refine open, the page scrolled sideways. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* :dir(), not [dir="rtl"] above it: the nearest direction counts, and an Arabic page whose
   interface is English runs left to right inside <html dir="rtl"> (decision 66) */
.select:dir(rtl) {
  background-position: left 16px center;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--c-placeholder);
  opacity: 1;
}

/* a step darker than the resting border (decision 19), never lighter */
.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--c-navy);
}

/* --- small shared pieces ----------------------------------------------------- */

.muted {
  color: var(--c-muted);
}

.error-text {
  color: var(--c-error);
}

.approved {
  color: var(--c-green);
}

.list-plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Text that stays in English inside a page in another language: titles, authors,
   outlet names. It keeps its own direction so it does not reorder inside Arabic. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Where the interface itself runs right to left (Arabic once its interface is live), text
   in it that is not Arabic (an English fallback, a language's own name) takes its
   direction from its own first letter, so it keeps its punctuation where it belongs
   (".Search" otherwise) while the layout mirrors. Arabic is marked lang="ar" and keeps
   its order, even when it begins with "AI". While a right-to-left language has no live
   interface, <body> and the chrome say dir="ltr" (layout.py, decision 66): the English
   runs left to right as a whole and this does not apply. */
[dir="rtl"] > body:not([dir="ltr"]) :where(header, main, footer) :where(*):not(:lang(ar)) {
  unicode-bidi: plaintext;
}