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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }

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

:focus-visible { outline: 2px solid var(--water-1); outline-offset: 3px; }

/* Header: title on the left, quiet search on the right. */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 0 8px;
}
.top-tools { display: flex; align-items: center; gap: 20px; }

/* Language switch: two quiet letters pairs, the active one in ink. */
.lang { display: flex; gap: 2px; }
.lang button {
  padding: 4px 6px; border-radius: 6px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--muted);
  transition: color var(--mid) var(--ease), background-color var(--mid) var(--ease);
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { color: var(--ink); background: var(--wash); }

.brand { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }

@media (max-width: 560px) {
  .top-tools { gap: 10px; }
  .top { padding: 18px 0 10px; }
  .search input { width: 96px; font-size: 16px; } /* 16px stops iOS from zooming into the field */
  .search input:focus { width: 150px; }
}

.search input {
  width: 180px;
  border: 0; border-bottom: 1px solid var(--hairline);
  padding: 6px 0; background: transparent;
  font: inherit; color: var(--ink); outline: none;
  transition: border-color var(--mid) var(--ease), width var(--mid) var(--ease);
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--ink); width: 240px; }
.search input::-webkit-search-cancel-button { display: none; }

/* The stage makes room for the dossier on wide screens instead of hiding under it. */
.stage {
  padding: 0 var(--gutter) 24px;
  transition: padding-right var(--slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* Watermark: a quiet link in the bottom-right corner, above the dossier column. */
.watermark {
  position: fixed; right: 14px; bottom: 10px; z-index: 20;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 11.5px; letter-spacing: 0.01em;
  color: var(--muted); text-decoration: none;
  transition: color var(--mid) var(--ease);
}
.watermark:hover { color: var(--water-1); }
/* phones: hide it while the dossier sheet covers the bottom of the screen */
@media (max-width: 700px) {
  .app.is-open ~ .watermark { opacity: 0; pointer-events: none; }
}