/* Conventions a visitor brings from the sites they already use
   (`docs/conventions.md`): header search, the phone tab bar, the heart,
   "Show more", reviews with their spread, the business-card details.
   Tokens only; no colour literals (`test_frontend_policy`). */

:root {
  --tab-bar-height: 3.75rem;
}

/* Header search: a wide pill with the magnifier inside and a clickable
   submit (NN/g: a field, at least 27 characters). From lg it takes the free
   space between the sections and the actions; on phones it is its own row. */
.portal-navbar-search {
  align-items: center;
  flex: 1 1 auto;
  max-width: 36rem;
  position: relative;
}

@media (min-width: 992px) {
  .portal-navbar-search {
    margin-inline: 1rem;
    min-width: 18rem;
  }
}

/* Phones: the search and the finder share the row under the logo. */
.portal-navbar-quick {
  align-items: center;
  display: flex;
  flex: 1 0 100%;
  gap: 0.5rem;
  margin-block: 0.25rem 0.5rem;
}

.portal-navbar-search--mobile {
  display: flex;
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

.portal-navbar-search .form-control {
  background: var(--color-surface-strong);
  border-color: var(--border);
  border-radius: var(--radius-pill);
  min-height: 3rem;
  padding-inline: 2.75rem 3rem;
}

.portal-navbar-search .form-control:focus {
  background: var(--surface);
}

.portal-navbar-search-icon {
  color: var(--color-text-muted);
  inset-inline-start: 1rem;
  pointer-events: none;
  position: absolute;
}

/* Tonal, like the finder beside it: the bar is on every page, so nothing in
   it is filled (Von Restorff, `docs/conventions.md`). Enter submits anyway;
   the circle is there to be found, not to shout. */
.portal-navbar-search-submit {
  align-items: center;
  background: var(--color-brand-soft);
  border: 0;
  border-radius: 50%;
  color: var(--color-brand);
  display: inline-flex;
  /* 44px, inside a 48px field (Fitts's Law). */
  height: 2.75rem;
  inset-inline-end: 0.125rem;
  justify-content: center;
  position: absolute;
  width: 2.75rem;
}

.portal-navbar-search-submit:hover,
.portal-navbar-search-submit:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}


/* The phone's bottom navigation: five labelled destinations. */
.tab-bar {
  background: var(--color-surface);
  bottom: 0;
  box-shadow: var(--shadow-raised-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  inset-inline: 0;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  z-index: 1031;
}

.tab-bar-link {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  font-size: var(--text-2xs);
  font-weight: 600;
  gap: 0.25rem;
  justify-content: center;
  min-height: var(--tab-bar-height);
  text-decoration: none;
}

.tab-bar-link i {
  font-size: var(--text-lg);
}

.tab-bar-link.is-active {
  color: var(--accent-primary);
}

@media (max-width: 991.98px) {
  /* Room for the tab bar, and everything fixed to the bottom sits above it. */
  .public-marketplace .portal-layout {
    padding-bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
  }

  .public-marketplace .mobile-action-bar {
    bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
    padding-bottom: 0.75rem;
  }

  .public-marketplace .request-notice {
    --request-notice-offset: var(--tab-bar-height);
  }
}

/* The heart. It sits above the card's stretched link. */
.save-toggle {
  align-items: center;
  background: transparent;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.75rem;
  justify-content: center;
  margin-inline-start: auto;
  position: relative;
  width: 2.75rem;
  z-index: 3;
  border: 0;
}

/* A borderless icon button: the heart is the signifier, and pointing at it
   gives it a shape (`docs/aesthetic.md`, round 3). */
.save-toggle:hover,
.save-toggle:focus-visible {
  background: var(--color-brand-soft);
  color: var(--accent-primary);
}

.save-toggle[aria-pressed="true"] {
  color: var(--accent-primary);
}

/* "Show more", with the count it has reached and the way back. */
.show-more {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.show-more-status {
  color: var(--color-text-muted);
  margin: 0;
}

.show-more-button {
  min-height: 3rem;
  min-width: 12rem;
}

/* The next page is on its way: the button dims and stops taking taps, so a
   second tap never asks twice. No transition -- on most connections the page
   lands before one would show; a slower one gets the busy ring after
   `--motion-base` (`base.css`, "Waiting"). */
.show-more-button.htmx-request {
  cursor: progress;
  opacity: var(--loading-opacity);
  pointer-events: none;
}

.show-more-end {
  color: var(--color-text);
  font-weight: 600;
}

/* The price where the decision is made. */
.entity-price {
  font-size: var(--text-lg);
  margin-top: 0.5rem;
}

.mobile-action-bar__price {
  align-self: center;
  flex: 0 0 auto;
  font-size: 1rem;
  margin-inline-end: 0.25rem;
}

/* A vacancy's subjects under its title, each a link to the subject's page,
   and its closed state as plain words in the How to apply card. */
.vacancy-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.vacancy-subjects a {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  min-height: 2.75rem;
}

.vacancy-closed {
  font-weight: 700;
}

/* "Closes in N days" is the one fact with a time limit: brand-coloured, and
   said in words, never by colour alone. */
.profile-facts .vacancy-closing {
  color: var(--color-brand);
}

/* Reviews: the average, the spread, the latest few. */
.review-summary {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  margin-block: 2rem;
  padding: 1.25rem;
}

.review-summary__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.review-summary__body {
  display: grid;
  gap: 1rem 2rem;
}

@media (min-width: 576px) {
  .review-summary__body {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.review-summary__score {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
}

.review-summary .review-summary__average {
  font-size: 2.5rem;
  line-height: 1;
}

.review-summary .review-score {
  color: var(--color-rating);
}

.review-bars {
  display: grid;
  gap: 0.25rem;
}

.review-bar {
  align-items: center;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2rem;
}

.review-bar__meter {
  height: 0.6rem;
  width: 100%;
}

.review-bar__count {
  color: var(--color-text-muted);
  text-align: end;
}

.review-list {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

/* The branch's contact card on a group page: one icon column. A link row
   (call, Telegram, route) and a plain row (the address, "Online") share the
   same inset and gap, so every icon sits in the same 1.25rem slot and every
   text starts at the same x. Link rows are one line and centre; a plain row
   may wrap, so it aligns to its first line, padded to where that line sits
   in a centred 44px row. */
.center-contact-links li {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  min-height: 2.75rem;
}

.center-contact-links li > a {
  align-items: center;
  display: inline-flex;
  gap: 0.75rem;
  min-height: 2.75rem;
}

.center-contact-links li:not(:has(> a)) {
  padding: 0.5rem 0.5rem 0.25rem;
}

.center-contact-links li:not(:has(> a)) > i {
  margin-top: 0.2em;
}

/* Quick filters above the results, hh- and OLX-style: one horizontal row
   that scrolls on a phone rather than wrapping into a wall. */
.quick-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}

.quick-filters .filter-chip {
  flex: 0 0 auto;
  min-height: 2.5rem;
  text-decoration: none;
  white-space: nowrap;
}

.quick-filters .filter-chip.active {
  background: var(--color-brand-soft);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: 600;
}

/* Filter options as 44px rows with a box you can hit, not bare inputs. */
.listing-filter-section__body label {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  min-height: 2.75rem;
}

/* A group's heading inside a filter (subjects under their categories): the
   shared `.group-label` look, not a 44px option row. Django renders it as a
   label with no `for`. */
.listing-filter-section__body label:not([for]) {
  color: var(--text-muted);
  cursor: default;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
  min-height: 0;
  text-transform: uppercase;
}

.listing-filter-section__body input[type="checkbox"] {
  accent-color: var(--accent-primary);
  flex: 0 0 auto;
  height: 1.25rem;
  width: 1.25rem;
}

.listing-filter-more {
  font-weight: 600;
  padding-inline: 0;
  text-align: start;
}

/* Profiles -----------------------------------------------------------------
   One layout for brand, centre, teacher and group pages, the one LinkedIn,
   Facebook and Google Business Profile share: a cover in the brand's tone,
   the logo or photo overlapping its lower edge, name, headline and a meta
   row, the actions on the right, then a section strip that sticks under the
   header. Main column and sidebar below. */

.profile-header {
  background: var(--surface);
  border-radius: var(--radius-card);
  margin-bottom: 1.5rem;
}

.profile-cover {
  aspect-ratio: 6 / 1;
  background:
    radial-gradient(circle at 85% 20%, var(--identity-border) 0 18%, transparent 19%),
    radial-gradient(circle at 70% 120%, var(--identity-border) 0 22%, transparent 23%),
    linear-gradient(120deg, var(--identity-start), var(--identity-end));
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  display: block;
  min-height: 5.5rem;
  width: 100%;
}

.profile-header-body {
  --profile-avatar-size: 6rem;
  align-items: start;
  display: grid;
  gap: 0.75rem 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 1rem 1rem;
}

@media (min-width: 768px) {
  .profile-header-body {
    --profile-avatar-size: 8rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0 1.5rem 1.25rem;
  }
}

.profile-avatar {
  align-items: center;
  background: var(--surface);
  border: 4px solid var(--surface);
  border-radius: var(--radius-md);
  display: inline-flex;
  font-size: calc(var(--profile-avatar-size) * 0.4);
  font-weight: 700;
  height: var(--profile-avatar-size);
  justify-content: center;
  margin-top: calc(var(--profile-avatar-size) / -2);
  overflow: hidden;
  width: var(--profile-avatar-size);
}

.profile-avatar img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.profile-avatar--round {
  border-radius: 50%;
}

img.profile-avatar--round {
  object-fit: cover;
}

.profile-identity {
  min-width: 0;
  padding-top: 0.5rem;
}

.profile-kicker {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.profile-kicker a {
  align-items: center;
  color: inherit;
  display: inline-flex;
  min-height: 2.75rem;
}

.profile-kicker {
  margin-bottom: 0;
}

.profile-name {
  font-size: var(--text-title);
  line-height: 1.15;
  margin-bottom: 0.25rem;
  overflow-wrap: anywhere;
}

.profile-headline {
  font-size: var(--text-md);
  margin-bottom: 0.25rem;
  max-width: 48rem;
}

.profile-meta {
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: 0 0.5rem;
  margin-bottom: 0.25rem;
}

.profile-meta:empty {
  display: none;
}

.profile-meta span + span::before {
  content: "·";
  margin-inline-end: 0.5rem;
}

.profile-identity .center-profile-courses {
  margin-top: 0.75rem;
}

.profile-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

@media (min-width: 768px) {
  .profile-actions {
    justify-content: flex-end;
    padding-top: 1rem;
  }
}

.profile-actions:empty {
  display: none;
}

/* A course's key facts, one strip under its name (Coursera). */
.profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

@media (min-width: 768px) {
  .profile-facts {
    padding-inline: 1.5rem;
  }
}

.profile-facts li {
  align-items: center;
  display: inline-flex;
  font-weight: 600;
  gap: 0.5rem;
}

.profile-facts i {
  color: var(--accent-primary);
}

/* The section strip: anchors to what this page has. It follows the header
   rather than living inside it, because a sticky element only sticks within
   its parent -- inside the header it scrolled away with it. */
.profile-header:has(+ .profile-sections) {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

.profile-sections {
  background: var(--surface);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0 0.5rem;
  position: sticky;
  scrollbar-width: none;
  top: var(--sticky-top);
  z-index: 5;
}

@media (min-width: 768px) {
  .profile-sections {
    padding-inline: 1rem;
  }
}

.profile-sections a {
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  flex: 0 0 auto;
  font-weight: 600;
  padding: 0.75rem 0.75rem;
  text-decoration: none;
}

.profile-sections a:hover,
.profile-sections a[aria-current="true"] {
  border-bottom-color: var(--accent-primary);
  color: var(--text);
}

.profile-page [id] {
  scroll-margin-top: 8rem;
}

@media (min-width: 992px) {
  .profile-sidebar {
    position: sticky;
    top: calc(var(--sticky-top) + 4rem);
  }

  .profile-sidebar .center-action-rail {
    position: static;
  }
}

.profile-price-card .entity-price strong {
  font-size: 1.75rem;
}

.profile-price-card__action .btn {
  width: 100%;
}

/* One filled action per screen (Von Restorff, `docs/conventions.md`). From
   lg the price card repeats a group's or vacancy's action; it is outlined
   while the header's filled copy is on screen and fills once that has
   scrolled away (`initRailAction`, `portal.js`), as the phone's action bar
   appears only then. */
.public-marketplace .profile-price-card__action:not(.is-lead) .btn-primary {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--color-brand);
  --bs-btn-hover-bg: var(--color-brand);
  --bs-btn-hover-color: var(--color-on-brand);
}

/* Below lg the price card is not shown, so the price sits right above the
   action it pays for, in the cards' price type. */
.profile-price {
  margin: 0.75rem 0 0;
}

.detail-list--grid {
  display: grid;
  gap: 0.75rem 1.5rem;
}

@media (min-width: 576px) {
  .detail-list--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones -------------------------------------------------------------------
   Most visitors arrive on a phone, so below lg the portal follows the phone's
   own conventions (Apple HIG, Material 3, the hh/OLX/Uzum apps): bars and
   floating buttons in a frosted material, a header that steps aside while
   reading, one search per page, the first results above the fold, and the
   16px-gutter spacing scale from `tokens.css`. `docs/ux.md` has the rules. */

@media (max-width: 991.98px) {
  /* Bars in material: what scrolls beneath shows through, blurred. */
  .public-marketplace .portal-navbar,
  .tab-bar,
  .public-marketplace .mobile-action-bar {
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    background: var(--material-bg-solid);
  }

  .public-marketplace .portal-navbar {
    transition: transform var(--motion-base) var(--motion-ease);
  }

  .public-marketplace .portal-navbar.is-hidden {
    transform: translateY(-100%);
  }

  /* A listing has its own search, and so do the home hero, beside its
     Find a course, and the search page: one box and one filled action per
     screen, as in the hh app. */
  .public-marketplace:has(.marketplace-listing) .portal-navbar-quick,
  .public-marketplace:has(.landing-actions) .portal-navbar-quick,
  .public-marketplace:has(.site-search) .portal-navbar-quick {
    display: none;
  }

  /* Tab bar: the active tab's icon in a soft pill, as in Material 3. */
  .tab-bar {
    border-top-color: var(--material-border);
  }

  .tab-bar-link i {
    align-items: center;
    border-radius: var(--radius-pill);
    display: inline-flex;
    height: 1.75rem;
    justify-content: center;
    width: 3.25rem;
  }

  .tab-bar-link.is-active i {
    background: var(--color-brand-soft);
  }

  /* The filters panel spans the screen under the search row: a sheet-like
     panel, as the hh and OLX apps open theirs. */
  .listing-filter-panel {
    max-height: 70vh;
    width: calc(100vw - 2rem);
  }

  /* Listings: the first results above the fold. */
  .marketplace-listing .page-breadcrumb-row {
    display: none;
  }

  .marketplace-listing-header {
    margin-bottom: 0.75rem;
  }

  .marketplace-listing-header h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .marketplace-listing-header .lead {
    font-size: var(--text-md);
    margin-top: 0.25rem;
  }

  .hub-pulse {
    background: none;
    font-size: var(--text-sm);
    margin-bottom: 0.5rem;
    padding: 0;
  }

  .hub-pulse-line {
    color: var(--color-text-muted);
    margin: 0;
  }

  .hub-pulse-new {
    display: none;
  }

  /* The listing's search stays in reach under the header while scrolling. */
  .marketplace-results-column > .listing-local-search {
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    background: var(--material-bg-solid);
    margin-inline: -1rem;
    padding: 0.5rem 1rem;
    position: sticky;
    top: var(--sticky-top);
    transition: top var(--motion-base) var(--motion-ease);
    z-index: 1010;
  }

  .listing-results-toolbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.75rem;
    min-height: 2.5rem;
  }

  /* Overrides the template's `mt-3` utility, which is itself !important. */
  .marketplace-results .marketplace-card-grid {
    margin-top: 0.5rem !important;
  }

  .listing-results-toolbar h2 {
    color: var(--color-text-muted);
    font-size: var(--text-md);
    font-weight: 600;
    white-space: nowrap;
  }

  /* Sort as a compact chip; the native picker is the phone's own sheet. */
  .listing-results-toolbar .listing-results-actions,
  .listing-results-toolbar .listing-results-actions .form-select {
    width: auto;
  }

  .listing-results-toolbar .listing-results-actions {
    margin-inline-start: auto;
  }

  /* 16px: iOS zooms the page into any field set smaller when it is focused. */
  .listing-results-toolbar .form-select {
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    min-height: 2.5rem;
    min-width: 0;
  }

  .marketplace-card-grid {
    gap: 0.75rem;
  }

  /* Profiles: edge to edge like an app screen, a shorter header, actions
     as a row of equal buttons. */
  .profile-header,
  .profile-sections {
    border-inline: 0;
    border-radius: 0;
    margin-inline: -1rem;
  }

  .profile-cover {
    border-radius: 0;
  }

  .profile-header-body {
    --profile-avatar-size: 4.75rem;
    gap: 0.5rem;
  }

  .profile-cover {
    aspect-ratio: 4 / 1;
    min-height: 4rem;
  }

  .profile-identity {
    padding-top: 0;
  }

  .profile-headline {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .profile-identity .center-profile-courses {
    margin-top: 0.5rem;
  }

  .profile-identity .center-profile-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .profile-identity .center-profile-chips li {
    flex: 0 0 auto;
  }

  /* The primary action on its own row, the rest as equal buttons below it,
     like the action row of a place on 2GIS or Google Maps. */
  .profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.25rem;
  }

  .profile-actions > * {
    flex: 1 1 0;
  }

  /* Leaves room for the heart beside it, so the heart never takes a row. */
  .profile-actions > .btn-primary:first-child {
    flex-basis: calc(100% - 3.25rem);
  }

  .profile-actions .btn {
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: 0.5rem;
  }

  .profile-actions .save-toggle {
    flex: 0 0 2.75rem;
    height: 2.75rem;
    margin: 0;
  }

  .profile-facts {
    flex-wrap: nowrap;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .profile-sections {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--color-text) 1rem, var(--color-text) calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, var(--color-text) 1rem, var(--color-text) calc(100% - 1.5rem), transparent);
    transition: top var(--motion-base) var(--motion-ease);
  }

  .profile-sections a {
    min-height: 3rem;
    padding-block: 0.75rem;
  }

  .profile-page .center-section {
    padding-block: 1.5rem;
  }

  .profile-page .center-detail__layout {
    --bs-gutter-y: 0.5rem;
  }

  .detail-list--grid {
    gap: 0.5rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-list--grid > div {
    padding-block: 0.5rem;
  }

  .review-summary {
    margin-block: 1.5rem;
    padding: 1rem;
  }

  .review-summary .review-summary__average {
    font-size: 2rem;
  }

  /* Feed: one scrolling row of filters, then posts edge to edge, as in
     LinkedIn's app. */
  .feed-filters {
    flex-wrap: nowrap;
    margin-inline: -1rem;
    overflow-x: auto;
    padding-inline: 1rem;
    scrollbar-width: none;
  }

  .feed-filters .filter-chip {
    flex: 0 0 auto;
  }

  .landing-feed .feed-list {
    gap: var(--space-2);
    margin-inline: -1rem;
  }

  .feed-post {
    border-radius: 0;
    padding: var(--space-4);
  }

  .feed-post-avatar {
    height: 2.75rem;
    width: 2.75rem;
  }

  /* Home hero: less chrome around the same three steps. */
  .marketplace-hero {
    gap: 1.25rem;
  }

  .marketplace-hero h1 {
    font-size: var(--text-title);
    margin-bottom: 0.75rem;
  }

  .landing-proof {
    flex-wrap: nowrap;
    font-size: var(--text-sm);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
}

@media (max-width: 991.98px) and (prefers-reduced-transparency: reduce) {
  .public-marketplace .portal-navbar,
  .tab-bar,
  .public-marketplace .mobile-action-bar,
  .marketplace-results-column > .listing-local-search {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--color-surface);
  }
}

/* Fitts's Law ---------------------------------------------------------------
   The time to hit a target grows with its distance and shrinks with its size,
   so the targets that make a lead are the biggest and closest ones, and no
   target a finger uses is under 44px (`docs/conventions.md`, "Fitts's Law"). */

/* Hidden from people, still in the form for bots to fill. */
.lead-honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

/* The Request button on a course card sits above the card's own link. */
.card-request {
  margin-top: 0.75rem;
  min-height: 2.75rem;
  position: relative;
  width: 100%;
  z-index: 2;
}

.quick-filters .filter-chip,
.listing-results-toolbar .form-select,
.page-share-button {
  min-height: 2.75rem;
}

.page-share-button {
  min-width: 2.75rem;
}

/* Send request is the sheet's one filled action, as tall as the fields above
   it and the Telegram alternative below it, so the alternative is never the
   bigger button (Von Restorff, `docs/conventions.md`). */
.enrollment-footer .btn {
  min-height: var(--field-height);
}

@media (max-width: 575.98px) {
  /* The request sheet: Send request pinned where the thumb already is. */
  .modal-fullscreen-sm-down .enrollment-footer {
    background: var(--color-surface);
    bottom: 0;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
    position: sticky;
    z-index: 2;
  }

  .enrollment-footer .btn-primary {
    flex: 1 1 auto;
  }
}

/* The contact rail's links (route, vacancies, social icons): 44px rows. */
.center-action-rail__section a:not(.btn) {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
  min-height: 2.75rem;
}