/* Certifications (certifications.js): the picker in the masthead and the Certifications page. The app's own tokens
   (app.css), so light and dark follow the theme. */
.certpick { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.certpick:empty { display: none; }
.certpick label { color: var(--muted); font-weight: 600; }
.certpick select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); max-width: 100%; min-width: 0; }
.certpick .cp-empty { margin: 0; }
.certpick .cp-empty a { color: var(--accent); font-weight: 600; }
.cf-scroll { max-width: 900px; overflow-x: auto; }
.cf-form { display: grid; gap: 12px; max-width: 460px; margin: 0 0 24px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.cf-field { display: grid; gap: 4px; }
.cf-field[hidden] { display: none; }
.cf-field label { font-size: 13px; color: var(--muted); }
.cf-field select, .cf-field input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); min-width: 0; width: 100%; box-sizing: border-box; }
.cf-form .row { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-form .err:empty { display: none; }
@media (max-width: 720px) { .certpick { width: 100%; } .certpick select { flex: 1 1 auto; } }
/* A phone: the picker shares the brand's row (the brand is short there), its label stays for screen readers only, so the
   masthead stays compact. */
@media (max-width: 600px) {
  .brand-product { display: none; } /* the wordmark stays; the brand link keeps its full accessible name */
  .certpick { flex: 1 1 150px; width: auto; min-width: 0; gap: 0; }
  .certpick label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .certpick select { flex: 1 1 auto; width: 100%; }
  .certpick .cp-empty { font-size: 12px; line-height: 1.25; }
}