/* HearingDB v236 — public-site consistency layer.
   Loaded after page-specific styles so shared public primitives resolve the
   small visual differences accumulated across older page generations without
   flattening page-specific layouts. */

:root {
  --public-wide: 1720px;
  --public-content: 1380px;
  --public-reading: 1040px;
  --public-section-gap: clamp(24px, 3vw, 42px);
  --public-hero-min: clamp(180px, 18vw, 270px);
  --public-hero-pad: clamp(24px, 3.2vw, 48px);
  --public-hero-title: clamp(3rem, 6vw, 7rem);
  --public-kicker-size: 0.72rem;
  --public-control-height: 52px;
  --public-gradient: linear-gradient(100deg, rgba(232, 73, 89, .98), rgba(200, 213, 232, .88) 50%, rgba(23, 107, 255, .98));
  --surface-subtle: var(--card-subtle);
  --border-subtle: var(--border);
}

/* Shared vertical rhythm ------------------------------------------------ */
body:not(.page-admin) .page-container {
  padding-top: clamp(18px, 2vw, 30px);
  padding-bottom: clamp(58px, 6vw, 88px);
}

.page-home .page-container,
.page-database-modern .page-container,
.page-compare-modern .page-container {
  padding-top: 0;
}

.page-home .page-container {
  padding-bottom: clamp(54px, 6vw, 88px);
}

/* Shared catalogue / reference width. */
.page-brands .catalogue-page,
.page-brand-models .catalogue-page,
.page-latest .catalogue-page,
.page-nhs .catalogue-page,
.page-favourites .catalogue-page,
.page-apps .app-catalogue,
.page-accessories .accessory-catalogue,
.page-receivers .receiver-catalogue,
.page-documentation .documentation-catalogue,
.page-information .company-catalogue,
.page-information .company-profile,
.page-information .about-page,
.page-learning .learning-page {
  width: min(100%, var(--public-wide));
  margin-inline: auto;
}

/* Shared catalogue hero language -------------------------------------- */
.page-brands .catalogue-hero,
.page-brand-models .catalogue-hero,
.page-latest .catalogue-hero,
.page-nhs .catalogue-hero,
.page-favourites .catalogue-hero,
.page-apps .app-catalogue__hero,
.page-accessories .accessory-catalogue__hero,
.page-receivers .receiver-catalogue__hero,
.page-documentation .documentation-hero,
.page-compare-modern .compare-page-heading,
.page-awards .awards-hero,
.page-notifications .clinician-notifications-head,
.page-cpd .cpd-hero {
  position: relative;
  min-height: var(--public-hero-min);
  padding: var(--public-hero-pad);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0;
  color: #fff;
  background: var(--public-gradient);
  box-shadow: none;
  isolation: isolate;
}

.page-brands .catalogue-hero::after,
.page-brand-models .catalogue-hero::after,
.page-latest .catalogue-hero::after,
.page-nhs .catalogue-hero::after,
.page-favourites .catalogue-hero::after,
.page-apps .app-catalogue__hero::after,
.page-accessories .accessory-catalogue__hero::after,
.page-receivers .receiver-catalogue__hero::after,
.page-documentation .documentation-hero::after,
.page-compare-modern .compare-page-heading::after,
.page-awards .awards-hero::after,
.page-notifications .clinician-notifications-head::after,
.page-cpd .cpd-hero::after {
  position: absolute;
  right: -5%;
  bottom: -126%;
  z-index: 0;
  width: min(50vw, 650px);
  aspect-ratio: 1;
  border: clamp(40px, 5vw, 74px) solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transition: transform 700ms var(--ease-spring), border-color var(--motion-standard) ease;
}

.page-brands .catalogue-hero:hover::after,
.page-brand-models .catalogue-hero:hover::after,
.page-latest .catalogue-hero:hover::after,
.page-nhs .catalogue-hero:hover::after,
.page-favourites .catalogue-hero:hover::after,
.page-apps .app-catalogue__hero:hover::after,
.page-accessories .accessory-catalogue__hero:hover::after,
.page-receivers .receiver-catalogue__hero:hover::after,
.page-documentation .documentation-hero:hover::after,
.page-compare-modern .compare-page-heading:hover::after,
.page-awards .awards-hero:hover::after,
.page-notifications .clinician-notifications-head:hover::after,
.page-cpd .cpd-hero:hover::after {
  border-color: rgba(255, 255, 255, .12);
  transform: translate(-3%, -4%) scale(1.035);
}

.page-awards .awards-hero > *,
.page-notifications .clinician-notifications-head > *,
.page-cpd .cpd-hero > * {
  position: relative;
  z-index: 1;
}

.page-brands .catalogue-hero h1,
.page-brand-models .catalogue-hero h1,
.page-latest .catalogue-hero h1,
.page-nhs .catalogue-hero h1,
.page-favourites .catalogue-hero h1,
.page-apps .app-catalogue__hero h1,
.page-accessories .accessory-catalogue__hero h1,
.page-receivers .receiver-catalogue__hero h1,
.page-documentation .documentation-hero h1,
.page-compare-modern .compare-page-heading h1,
.page-awards .awards-hero h1,
.page-notifications .clinician-notifications-head h1,
.page-cpd .cpd-hero h1 {
  margin: 0;
  color: #fff;
  font-size: var(--public-hero-title);
  font-weight: 790;
  letter-spacing: -.075em;
  line-height: .9;
  text-wrap: balance;
}

.page-brands .catalogue-kicker,
.page-brand-models .catalogue-kicker,
.page-latest .catalogue-kicker,
.page-nhs .catalogue-kicker,
.page-favourites .catalogue-kicker,
.page-apps .app-kicker,
.page-accessories .accessory-kicker,
.page-receivers .receiver-kicker,
.page-documentation .documentation-kicker,
.page-compare-modern .compare-kicker,
.page-awards .awards-eyebrow,
.page-notifications .eyebrow,
.page-cpd .cpd-hero__kicker {
  display: block;
  width: auto;
  min-height: 0;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, .82);
  background: transparent;
  font-size: var(--public-kicker-size);
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 1;
}

.page-favourites .clinician-library-intro,
.page-compare-modern .compare-page-heading p,
.page-awards .awards-hero > p:last-child,
.page-notifications .clinician-notifications-head p,
.page-cpd .cpd-hero p {
  max-width: 760px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: .96rem;
  line-height: 1.55;
}

/* Larger editorial heroes keep their richer composition, but use the same
   heading scale/rhythm as the catalogue rather than feeling like another site. */
.page-information .information-hero,
.page-learning .learning-hero {
  background: var(--public-gradient);
  border-radius: 0;
  box-shadow: none;
}

.page-information .information-hero h1,
.page-learning .learning-hero h1 {
  font-size: clamp(3.2rem, 6.2vw, 7rem);
  line-height: .9;
}

/* Tools and controls --------------------------------------------------- */
.page-apps .app-search input,
.page-accessories .accessory-search input,
.page-receivers .receiver-search input,
.page-documentation .documentation-tools input,
.page-documentation .documentation-tools select,
.page-compare-modern .compare-search input,
.page-cpd .cpd-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.page-cpd .cpd-field select,
.page-cpd .cpd-field textarea,
.auth-page input {
  width: 100%;
  min-height: var(--public-control-height);
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  outline: 0;
  color: var(--text-strong);
  background: #fff;
  box-shadow: none;
}

.page-cpd .cpd-field textarea {
  min-height: 132px;
  padding-block: 12px;
}

.page-apps .app-search input:focus,
.page-accessories .accessory-search input:focus,
.page-receivers .receiver-search input:focus,
.page-documentation .documentation-tools input:focus,
.page-documentation .documentation-tools select:focus,
.page-compare-modern .compare-search input:focus,
.page-cpd .cpd-field input:focus,
.page-cpd .cpd-field select:focus,
.page-cpd .cpd-field textarea:focus,
.auth-page input:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

/* Shared flat panel treatment ----------------------------------------- */
.page-awards .award-body-section,
.page-cpd .cpd-stat,
.page-cpd .cpd-section,
.page-cpd .cpd-ai,
.page-cpd .cpd-ai-result,
.page-cpd .cpd-suggested-card,
.page-cpd .cpd-approved-card,
.page-cpd .cpd-evidence-item,
.page-cpd .cpd-evidence-upload-row,
.page-cpd .cpd-registration-card,
.page-notifications .notification-list,
.auth-card {
  border-radius: 0;
  box-shadow: none;
}

.page-cpd .cpd-shell {
  width: min(100%, var(--public-content));
  margin-inline: auto;
  gap: var(--public-section-gap);
}

.page-cpd .cpd-stat-grid {
  gap: 12px;
}

.page-cpd .cpd-stat,
.page-cpd .cpd-section {
  border-color: var(--border);
}

.page-cpd .cpd-section__head {
  min-height: 60px;
  padding: 16px 20px;
  border-bottom-color: var(--border);
  background: var(--surface-subtle);
}

.page-cpd .cpd-section__head h2 {
  font-size: 1.08rem;
  letter-spacing: -.02em;
}

.page-cpd .cpd-stat__label,
.page-cpd .cpd-stat__meta,
.page-cpd .cpd-help {
  color: var(--muted);
}

.page-cpd .cpd-stat__value,
.page-cpd .cpd-entry__title,
.page-cpd .cpd-field label,
.page-cpd .cpd-field > span,
.page-cpd .cpd-ai__title,
.page-cpd .cpd-evidence-item__copy strong {
  color: var(--text-strong);
}

.page-cpd .cpd-primary,
.page-cpd .cpd-secondary,
.page-cpd .cpd-link-button,
.page-cpd .cpd-ai__buttons button,
.page-cpd .cpd-suggested-card__actions button,
.page-cpd .cpd-approved-card__actions button,
.page-cpd .cpd-approved-card__actions a,
.page-cpd .cpd-evidence-remove-row,
.page-cpd button.cpd-registration-check[type="submit"] {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.page-cpd .cpd-primary {
  border: 1px solid var(--text-strong);
  color: #fff !important;
  background: var(--text-strong);
}

.page-cpd .cpd-primary:hover {
  color: #fff !important;
  border-color: var(--primary);
  background: var(--primary);
}

.page-cpd .cpd-hero .cpd-primary {
  border-color: #fff;
  color: var(--text-strong) !important;
  background: #fff;
}

.page-cpd .cpd-hero .cpd-primary:hover {
  color: #fff !important;
  border-color: var(--text-strong);
  background: var(--text-strong);
}

.page-cpd .cpd-secondary {
  border: 1px solid rgba(255,255,255,.66);
  color: #fff !important;
  background: transparent;
}

.page-cpd .cpd-secondary:hover {
  color: var(--text-strong) !important;
  border-color: #fff;
  background: #fff;
}

/* Awards --------------------------------------------------------------- */
.page-awards .awards-page {
  display: grid;
  width: min(100%, var(--public-content));
  max-width: none;
  margin: 0 auto;
  padding: 0;
  gap: var(--public-section-gap);
  color: var(--text-strong);
}

.page-awards .awards-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: none;
  margin: 0;
}

.page-awards .award-body-stack {
  gap: 20px;
}

.page-awards .award-body-section {
  padding: 22px;
  border-color: var(--border);
}

.page-awards .award-body-heading p {
  color: var(--muted);
}

.page-awards .award-catalogue-card,
.page-awards .award-catalogue-art {
  border-color: var(--border);
  background: #fff;
}

.page-awards .award-model-links a {
  color: var(--text-strong);
  border-color: var(--border);
}

.page-awards .award-model-links a:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* Notifications -------------------------------------------------------- */
.page-notifications .clinician-notifications-page {
  display: grid;
  width: min(100%, var(--public-reading));
  max-width: none;
  margin: 0 auto;
  padding: 0;
  gap: 28px;
}

.page-notifications .clinician-notifications-head {
  align-items: end;
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.page-notifications .clinician-notifications-head .btn {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.72);
  color: var(--text-strong) !important;
  background: #fff !important;
}

.page-notifications .notification-section {
  margin-top: 0;
}

.page-notifications .notification-section__head,
.page-notifications .notification-section > h2 {
  margin-bottom: 10px;
}

.page-notifications .notification-card {
  transition: background var(--motion-fast) ease, padding-left var(--motion-fast) ease;
}

/* Empty states --------------------------------------------------------- */
.catalogue-empty,
.documentation-empty,
.app-catalogue__empty,
.accessory-catalogue__empty,
.receiver-catalogue__empty,
.awards-empty,
.page-cpd .cpd-empty,
.auth-empty {
  padding: 32px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: 0;
  color: var(--muted);
  background: #fff;
  box-shadow: none;
  text-align: center;
}

/* Authentication / simple system pages -------------------------------- */
.auth-page {
  display: grid;
  width: min(100%, 820px);
  margin: 0 auto;
  gap: 18px;
}

.auth-card {
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
}

.auth-card__head {
  padding: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}

.auth-kicker {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.auth-card h1 {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(2.1rem, 5vw, 4rem);
  font-weight: 790;
  letter-spacing: -.06em;
  line-height: .95;
}

.auth-card__head p:last-child {
  max-width: 650px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.58;
}

.auth-card__body {
  display: grid;
  padding: clamp(22px, 3vw, 34px);
  gap: 18px;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-field {
  display: grid;
  gap: 7px;
}

.auth-field > span:first-child {
  color: var(--text-strong);
  font-size: .86rem;
  font-weight: 800;
}

.auth-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.auth-help,
.auth-switch {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}

.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--text-strong);
  border-radius: 0;
  color: #fff;
  background: var(--text-strong);
  font-weight: 850;
}

.auth-submit:hover {
  border-color: var(--primary);
  background: var(--primary);
}

.auth-switch {
  margin: 0;
  text-align: center;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.not-found-actions .btn {
  min-height: 44px;
}

/* Small-screen consistency -------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --public-hero-min: 165px;
    --public-hero-pad: 22px 18px;
    --public-hero-title: clamp(2.7rem, 13vw, 4.4rem);
  }

  body:not(.page-admin) .page-container {
    padding-top: 14px;
    padding-bottom: 54px;
  }

  .page-notifications .clinician-notifications-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-notifications .clinician-notifications-head .btn {
    width: 100%;
  }

  .page-awards .award-body-section {
    padding: 18px;
  }

  .page-cpd .cpd-actions {
    display: grid;
  }

  .page-cpd .cpd-actions a,
  .page-cpd .cpd-actions button {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .auth-name-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-brands .catalogue-hero::after,
  .page-brand-models .catalogue-hero::after,
  .page-latest .catalogue-hero::after,
  .page-nhs .catalogue-hero::after,
  .page-favourites .catalogue-hero::after,
  .page-apps .app-catalogue__hero::after,
  .page-accessories .accessory-catalogue__hero::after,
  .page-receivers .receiver-catalogue__hero::after,
  .page-documentation .documentation-hero::after,
  .page-compare-modern .compare-page-heading::after,
  .page-awards .awards-hero::after,
  .page-notifications .clinician-notifications-head::after,
  .page-cpd .cpd-hero::after {
    transition: none;
  }
}

/* CPD no longer needs the old global compatibility sheet for its public pages. */
.page-cpd .card {
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--border);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.page-cpd button[type="submit"]:not(.cpd-registration-check):not(.cpd-link-button):not(.cpd-evidence-action),
.page-cpd .cpd-entry__actions button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--text-strong);
  border-radius: 0;
  color: #fff;
  background: var(--text-strong);
  box-shadow: none;
  font-weight: 800;
}

.page-cpd button[type="submit"]:not(.cpd-registration-check):not(.cpd-link-button):not(.cpd-evidence-action):hover,
.page-cpd .cpd-entry__actions button[type="submit"]:hover {
  border-color: var(--primary);
  background: var(--primary);
  transform: none;
}

/* Cross-catalogue card details ---------------------------------------- */
.page-apps .app-card__body h2,
.page-accessories .accessory-card__body h2,
.page-receivers .receiver-family-card__body h2 {
  font-size: clamp(1.3rem, 1.8vw, 2rem);
  line-height: 1;
}

.page-accessories .accessory-card > a {
  grid-template-rows: minmax(225px, .92fr) auto;
}

.page-accessories .accessory-card__media {
  min-height: 225px;
}

.page-apps .app-manufacturer-filters button,
.page-receivers .receiver-brand-filters button,
.page-accessories .accessory-category-filters button,
.page-accessories .accessory-manufacturer-filters button {
  min-height: 50px;
  padding-inline: 16px;
  font-size: .78rem;
  font-weight: 800;
}

.page-accessories .accessory-card__arrow {
  opacity: 0;
  transform: translate(-6px, 6px);
}

.page-accessories .accessory-card:hover .accessory-card__arrow,
.page-accessories .accessory-card:focus-within .accessory-card__arrow {
  opacity: 1;
  transform: translate(0, 0);
}

/* Detail-page navigation uses one shared compact treatment. */
.app-back-link,
.app-edit-link,
.receiver-back-link,
.receiver-edit-link,
.information-back-link,
.information-external-link,
.accessory-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-strong);
  background: #fff;
  font-size: .78rem;
  font-weight: 800;
}

.app-back-link:hover,
.app-edit-link:hover,
.receiver-back-link:hover,
.receiver-edit-link:hover,
.information-back-link:hover,
.information-external-link:hover,
.accessory-back-link:hover {
  color: #fff;
  border-color: var(--text-strong);
  background: var(--text-strong);
}

.page-app-detail .app-detail__identity,
.page-receiver-detail .receiver-detail__identity,
.page-information .company-profile__identity {
  background: var(--public-gradient);
}

.page-information .company-profile__identity h1 {
  font-size: clamp(3rem, 6vw, 6.8rem);
  line-height: .9;
}

.page-cpd .cpd-account-card > h1,
.page-cpd .cpd-account-card > h2 {
  margin: 0 0 18px;
  color: var(--text-strong);
  font-size: 1.35rem;
  letter-spacing: -.025em;
}

@media (max-width: 720px) {
  .page-accessories .accessory-card__arrow,
  .page-apps .app-card__arrow,
  .page-receivers .receiver-family-card__arrow {
    opacity: 1;
    transform: none;
  }
}

.page-cpd .cpd-section--padded {
  padding: 20px;
}

.page-cpd .cpd-actions--flush {
  margin-top: 0;
}

.page-cpd .cpd-section__head select {
  min-height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text-strong);
  background: #fff;
  font-weight: 750;
}

.page-cpd .cpd-entry__actions a,
.page-cpd .cpd-evidence-item__actions a,
.page-cpd .cpd-learning-row > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--border);
  color: var(--text-strong);
  background: #fff;
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
}

.page-cpd .cpd-entry__actions a:hover,
.page-cpd .cpd-evidence-item__actions a:hover,
.page-cpd .cpd-learning-row > a:hover {
  color: #fff;
  border-color: var(--text-strong);
  background: var(--text-strong);
}

.page-cpd .cpd-entry__actions button[type="submit"] {
  color: var(--danger);
  border-color: rgba(201, 54, 73, .28);
  background: #fff;
}

.page-cpd .cpd-entry__actions button[type="submit"]:hover {
  color: #fff;
  border-color: var(--danger);
  background: var(--danger);
}

.page-compare-modern .compare-workspace {
  width: min(100%, calc(var(--public-wide) + (var(--content-gutter) * 2)));
  padding-inline: var(--content-gutter);
}

.page-cpd .cpd-warning {
  border-radius: 0;
}

.page-notifications .clinician-notifications-head .btn:hover {
  color: #fff !important;
  border-color: var(--text-strong);
  background: var(--text-strong) !important;
  transform: none;
}