/* Niskus VALOR — the device baseline, loaded last by every page: the same behaviour on a laptop, an iPhone (Safari)
   and an Android phone (Chrome). Element selectors only — no class names, so nothing collides with a page's own CSS.
   Page-specific phone fixes stay in each page's stylesheet. Checked by test/devices.test.js; a new page links it last
   in its <head>. */

/* Text keeps the size the page sets when a phone is turned sideways (iOS would otherwise enlarge it). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* A soft brand-teal flash on tap instead of the grey box mobile browsers draw. */
a, button, summary, label, select, [role="tab"] { -webkit-tap-highlight-color: rgba(31, 122, 117, .18); }

/* Drop-down lists are easy to read in every browser (Chrome, Edge, Firefox, Safari): never under 14px on a laptop (16px
   on phones and touch screens, below), a line height that does not clip the text in Firefox, and a comfortable height.
   The open list is always dark text on white — Chrome and Edge on Windows and Firefox draw it with the page's own
   colours, so a select styled light-on-dark would otherwise open as white text on white. */
select { font-size: max(14px, 1em) !important; line-height: 1.3; min-height: 34px; text-overflow: ellipsis; overflow: hidden; } /* overflow: Safari lets a long chosen option spill out and widen the page on a phone */
select:disabled { opacity: .7; }
option, optgroup { color: #10212B; background-color: #FFFFFF; }
optgroup { font-weight: 700; font-style: normal; }
option { font-weight: 400; }

/* Active buttons answer the pointer: an outline pops up at the edge with a soft green glow (mouse or trackpad only —
   never on touch; disabled buttons stay still). Buttons, button-styled links and tabs on every page. */
@media (hover: hover) and (pointer: fine) {
  button, a[class*="btn"], input[type="submit"], input[type="button"], [role="button"], [role="tab"] { transition: box-shadow .16s ease, outline-color .16s ease; }
  button:not(:disabled):not([aria-disabled="true"]):hover, a[class*="btn"]:not([aria-disabled="true"]):hover, input[type="submit"]:not(:disabled):hover,
  input[type="button"]:not(:disabled):hover, [role="button"]:not([aria-disabled="true"]):hover, [role="tab"]:not([aria-disabled="true"]):hover {
    outline: 2px solid #2FA36B; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(47, 163, 107, .16), 0 0 16px 2px rgba(47, 163, 107, .5) !important; }
}

/* Keyboard focus is always visible (B5, 18 Oct 2026): a teal-dark ring (6.8:1 on paper) with a white halo, so it also
   shows on the dark ink headers, where teal-dark alone is only 2.2:1. Keyboard focus only (:focus-visible); the pairs are
   checked by tools/contrast.js. */
:root { --focus: #155E5A; --focus-halo: #FFFFFF; }
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-halo); }

/* Phones and tablets (a narrow screen or a touch screen as the main pointer). */
@media (max-width: 820px), (pointer: coarse) {
  /* iPhones zoom the whole page when a form field under 16px is focused — every field is 16px here. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  select, textarea { font-size: 16px !important; }
  /* Drop-down lists are a comfortable height to tap. */
  select { min-height: 32px; }
  /* "Show more" disclosures are easy to tap. */
  summary { padding-top: 6px; padding-bottom: 6px; }
}