/* List filters and "Eligible for me" (the lists), "Jobs for you" (the home page) — docs/modules/lists.md.
   Mobile first; fits 320 px. Nothing moves when the scripts run: the switch row and the "Jobs for you" list keep
   their height. */

/* The filter form: the search box, then a <details> panel */
.lf-form {
  display: grid;
  gap: var(--space-2);
}
.lf-search {
  display: flex;
  gap: var(--space-2);
}
.lf-search .input {
  flex: 1 1 auto;
  min-width: 0;
}
.search-form .lf-search {
  position: relative; /* the search page's suggestions open under the box, not under the panel */
}
.lf-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.lf-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.lf-summary::-webkit-details-marker {
  display: none;
}
.lf-chevron {
  margin-left: auto;
  transition: transform var(--duration-fast) var(--ease);
}
.lf-panel[open] > .lf-summary {
  border-bottom: 1px solid var(--border);
}
.lf-panel[open] .lf-chevron {
  transform: rotate(180deg);
}
.lf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
}
.lf-grid .field + .field {
  margin-top: 0;
}
.lf-range {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.lf-range legend {
  margin-bottom: var(--space-2);
  padding: 0;
}
.lf-range-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.lf-range-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.lf-range-field .input {
  min-width: 0;
}
.lf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}
@media (min-width: 560px) {
  .lf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .lf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lf-range {
    grid-column: span 2;
  }
}

/* Organisation and exam pages (docs/modules/discovery.md): the head, and an exam's posts by recruitment cycle */
.lf-head {
  display: grid;
  gap: var(--space-2);
}
.lf-head-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.lf-head-title h1 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.lf-head-logo {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.lf-head-about,
.lf-head-holder {
  margin: 0;
  max-width: 72ch;
}
.lf-head-facts,
.lf-head-socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lf-head-facts li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  min-height: 44px;
  overflow-wrap: anywhere;
}
.lf-head-facts a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
}
.lf-head-socials {
  gap: var(--space-2);
}
.lf-head-socials .chip {
  min-height: 44px;
}
.lf-head-label {
  color: var(--text-muted);
}
.lf-series + .lf-series {
  margin-top: var(--space-4);
}
.lf-series-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}
.lf-series:not(:has(.post-item:not([hidden]))) {
  display: none; /* "Eligible for me" hid every post of this cycle */
}

/* "Eligible for me": the link and the switch share one cell, so the row keeps its height whichever is shown */
.lf-elig {
  display: grid;
  align-items: center;
  min-height: 2.75rem;
}
.lf-elig-off,
.lf-elig-on {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
}
.lf-elig-off {
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
}
.lf-elig-on {
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
.lf-elig[data-lf-state="link"] .lf-elig-on,
.lf-elig[data-lf-state="switch"] .lf-elig-off {
  visibility: hidden; /* still takes its place: the row is as tall as the taller of the two */
}
/* The switch was left on: the list is filtered before it is seen (switch.js); shown anyway if the script never runs */
[data-lf-pending] .lf-items {
  visibility: hidden;
  animation: lf-reveal 0s linear 4s forwards;
}
@keyframes lf-reveal {
  to {
    visibility: visible;
  }
}
.lf-elig .switch {
  min-height: 44px;
  font-weight: 600;
}
.lf-elig-note .btn {
  margin-left: var(--space-2);
}

/* "Jobs for you" on the home page: the invitation, or (a profile on this device) a reserved list of five jobs */
.jfy-invite {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}
.jfy-invite p {
  margin: 0;
}
.jfy-area {
  display: none;
}
.jfy[data-jfy-profile] .jfy-invite {
  display: none;
}
.jfy[data-jfy-profile] .jfy-area {
  display: flex;
  flex-direction: column;
  min-height: calc(5 * 3.75rem + 3.25rem); /* five jobs and a link of up to two lines */
}
/* Preferred states or departments in the profile (marked before the paint): the switch row is reserved too */
.jfy-pref {
  display: none;
  margin: 0;
}
.jfy[data-jfy-profile][data-jfy-pref] .jfy-area {
  min-height: calc(5 * 3.75rem + 3.25rem + 3rem);
}
.jfy[data-jfy-pref] .jfy-pref {
  display: flex;
  align-items: center;
  min-height: 3rem; /* a label of up to two lines */
}
.jfy-status {
  margin: 0;
}
.jfy-status:empty {
  display: none;
}
.jfy-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jfy-item {
  display: grid;
  align-content: center;
  gap: 2px;
  height: 3.75rem;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.jfy-item-title {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jfy-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.jfy-item-meta > :last-child { /* the organisation: shortened with "…" on a phone instead of being cut off */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jfy-more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  min-height: 2.75rem;
  margin-top: auto; /* at the bottom of the reserved area from the start: it does not move when the jobs arrive */
  font-weight: 600;
}
.jfy-more span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}