/**
 * AbayaFemme Community — `mon-espace`.
 *
 * The member area's own stylesheet, written from zero against mockup `preference_Page.png` and
 * loaded only on `/communaute/mon-espace/…`. It is a second file rather than 900 more lines in
 * `community.css` for two reasons: that file is 9 000 lines shared by every public community
 * surface, and a rebuild of the account had no business editing the hub, the archives and the
 * profiles on its way past.
 *
 * FOUR RULES
 *
 * 1. **Everything is a token declared once on `.afm`, and every token falls back to a literal.** On
 *    this store the theme has already declared `--af-*`, so the account inherits the shop's
 *    palette, spacing and type automatically; on any other theme the fallbacks take over and the
 *    module still looks finished. Same contract as `community.css`, deliberately.
 * 2. **Nothing outside `.afm` is styled.** The site header, navigation and footer are untouched.
 * 3. **The current state is a surface, hover is a colour.** They are never the same treatment,
 *    because a member whose pointer is in the navigation column must still be able to see where she
 *    is.
 * 4. **Every interactive control is at least 44px tall.** This account is used one-handed, on a
 *    phone, in the evening — which is the whole premise of the project.
 *
 * WHY THE LENGTHS ARE IN PIXELS
 *
 * `rem` resolves against the *root* font size, and WoodMart sets `html { font-size: 14px }` through
 * `--wd-text-font-size`. Every length in this file was drawn at a 16px base, so on this store the
 * whole account rendered at 87.5% of its design: a 240px navigation column arriving as 210px, a
 * 96px avatar as 84px, and a photograph target squeezed to 113px with "Changer la photo" wrapping
 * onto two lines. There is no way to rebase `rem` for one subtree — it is root-relative by
 * definition — and moving the root is not this module's business, so the module states its own
 * lengths. `community.css` made the same call one line in, with `.afc { font-size: 16px }`.
 */

.afm {
  /* --- Ink ----------------------------------------------------------------
   * Contrast verified on --afm-page (#faf7f2):
   *   ink        #24231f  16.1:1
   *   ink-soft   #625f58   6.0:1  AA at every size used here
   *   ink-faint  #736f67   4.5:1  AA at every size used here
   * ---------------------------------------------------------------------- */
  --afm-ink: var(--af-color-ink, #24231f);
  --afm-ink-soft: var(--af-color-ink-muted, #625f58);
  --afm-ink-faint: var(--af-color-ink-faint, #736f67);

  --afm-accent: var(--af-color-olive-800, #4d4c38);
  --afm-accent-deep: var(--af-color-olive-900, #3f3f2f);
  --afm-accent-soft: var(--af-color-olive-600, #6d6b50);

  --afm-page: var(--af-color-ivory, #faf7f2);
  --afm-band: var(--af-color-cream, #f5efe8);
  --afm-card: var(--af-color-white, #fff);
  --afm-sunken: var(--af-color-cream, #f5efe8);
  --afm-sand: var(--af-color-sand, #eadfd2);

  --afm-line: var(--af-color-border, #e6dfd7);
  --afm-line-soft: var(--af-color-olive-100, #efeee6);
  --afm-line-strong: var(--af-color-border-strong, #cfc5ba);

  --afm-good: var(--af-color-success, #39704d);
  --afm-warn: var(--af-color-warning, #9a6429);
  --afm-bad: var(--af-color-danger, #a43f3f);
  --afm-focus: var(--af-color-focus, #245fb8);
  --afm-whatsapp: #25d366;

  --afm-display: var(--af-font-display, "Bodoni Moda", Didot, Georgia, serif);
  --afm-ui: var(--af-font-ui, "Jost", system-ui, -apple-system, sans-serif);

  /* --- Layout -------------------------------------------------------------
   * The gutter is the site header's, to the pixel, so the greeting avatar starts on the same
   * vertical line as the wordmark above it. Community pages use a narrower one and the
   * misalignment is visible the moment you look for it.
   * ---------------------------------------------------------------------- */
  /*
   * The same measure the rest of the community uses (`--afc-wrap`), not a narrower one.
   *
   * 1520px looked reasonable in isolation and was wrong beside everything else: on a 1920 screen the
   * account sat in a 1520px column with 200px of empty ivory down each side, while `/communaute/
   * cercles/` next door ran to within a gutter of the viewport. Two adjacent pages of the same
   * product measured differently is the single loudest "unfinished" signal a site can send, and it
   * is what made a three-column layout read as a narrow one.
   */
  --afm-max: 1800px;
  --afm-gutter: clamp(24px, 3.25vw, 72px);
  --afm-gap: clamp(28px, 2.6vw, 48px);
  --afm-side: 240px;
  --afm-rail: 312px;

  --afm-radius: 14px;
  --afm-radius-sm: 10px;
  --afm-radius-pill: 999px;

  --afm-shadow: 0 1px 2px rgb(45 37 30 / 4%);
  --afm-shadow-lift: 0 12px 32px rgb(45 37 30 / 8%);

  --afm-fast: var(--af-duration-fast, 160ms);
  --afm-ease: var(--af-ease, cubic-bezier(0.2, 0, 0.2, 1));

  background: var(--afm-page);
  color: var(--afm-ink);
  font-family: var(--afm-ui);
  font-size: 16px;
  line-height: 1.6;
}

.afm *,
.afm *::before,
.afm *::after {
  box-sizing: border-box;
}

.afm-wrap {
  width: 100%;
  max-width: var(--afm-max);
  margin-inline: auto;
  padding-inline: var(--afm-gutter);
}

/* Visually hidden, still read aloud. Used for the count badges' "dans Messages" and for the
 * unread marks, which are otherwise a coloured dot with no name. */
.afm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.afm :focus-visible {
  outline: 2px solid var(--afm-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* The icon set draws as outlines. Every path in `Icons` is stroked with no `fill` attribute, and an
 * SVG with neither defaults to a solid shape — without this rule the whole set renders as blobs. */
.afm .afc-icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* WoodMart gives every `li` a bottom margin, which turns any flex row into a staircase. */
.afm ul li,
.afm ol li {
  margin-bottom: 0;
}

.afm ul,
.afm ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Themes commonly capitalise headings, which is wrong in French: it produces
 * "Confort & Sécurité". Ours carry the capitalisation the copy was written with. */
.afm :is(h1, h2, h3, h4, legend, label) {
  text-transform: none;
  font-variant-caps: normal;
}

/* ==========================================================================
 * The masthead
 *
 * Ivory rather than the olive band the public surfaces use, and no illustration. See
 * `parts/area-mast.php` for why: this is the top of a workspace, not the entrance to a page, and
 * the illustrated hero was putting 380px of scenery above every control in the account.
 * ========================================================================== */

.afm-mast {
  position: relative;
  background:
    radial-gradient(120% 140% at 12% 0%, rgb(255 255 255 / 80%) 0%, rgb(255 255 255 / 0%) 62%),
    linear-gradient(180deg, var(--afm-band) 0%, var(--afm-page) 100%);
  border-bottom: 1px solid var(--afm-line);
}

.afm-mast__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
  padding-block: clamp(28px, 3.5vw, 44px);
}

.afm-mast__identity {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  min-width: 0;
}

.afm-mast__avatar {
  flex: none;
  display: block;
  width: clamp(68px, 6vw, 88px);
  height: clamp(68px, 6vw, 88px);
}

/*
 * Sizing an avatar takes a rule of its own, and it is not obvious why.
 *
 * `Members::avatar()` returns `<span class="afc-avatar" style="--afc-avatar-size:112px">` — the size
 * travels as an inline custom property, and an inline declaration beats any stylesheet, so setting
 * `--afc-avatar-size` here would have no effect at all. The width and the height are therefore set
 * directly, which does win, and the ring is put on the wrapper rather than on the image because the
 * fallback avatar is an inline SVG and has no `<img>` to hang it on.
 */
.afm-mast__avatar .afc-avatar,
.afm-mast__avatar :is(img, .avatar) {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* A ring rather than a border: the avatar is a photograph on a warm ground, and a hard 1px line
   * against it reads as a cut-out. */
  box-shadow: 0 0 0 1px var(--afm-line), 0 0 0 5px var(--afm-page);
}

.afm-mast__text {
  min-width: 0;
}

.afm-mast__eyebrow {
  display: flex;
  align-items: center;
  gap: 6.4px;
  margin: 0 0 5.6px;
  color: var(--afm-ink-soft);
  font-size: 15px;
  letter-spacing: 0.01em;
}

.afm-mast__eyebrow .afc-icon {
  width: 0.95em;
  height: 0.95em;
  color: var(--afm-accent-soft);
}

.afm-mast__title {
  margin: 0;
  color: var(--afm-ink);
  font-family: var(--afm-display);
  font-size: clamp(37.6px, 4.2vw, 56px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.afm-mast__lede {
  margin: 8.8px 0 0;
  max-width: 46ch;
  color: var(--afm-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.afm-mast__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
 * Buttons
 * ========================================================================== */

.afm .afm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8.8px;
  min-height: var(--af-control-height, 3rem);
  padding: var(--af-control-padding, 0 1.75rem);
  border: 1px solid var(--afm-line-strong);
  border-radius: var(--af-control-radius, 0);
  background: var(--afm-card);
  color: var(--afm-ink);
  font-family: var(--af-font-ui, inherit);
  font-size: var(--af-control-size, 0.75rem);
  font-weight: var(--af-control-weight, 500);
  letter-spacing: var(--af-control-tracking, 0.14em);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--afm-fast) var(--afm-ease), color var(--afm-fast) var(--afm-ease),
    border-color var(--afm-fast) var(--afm-ease);
}

.afm .afm-btn .afc-icon {
  width: 1.15em;
  height: 1.15em;
}

/* The label is an element rather than a bare text node so that a button can put its icon on either
 * side — the primary actions carry it after the words, the quiet ones before — without the markup
 * having to guess where a text node sits. */
.afm-btn__label {
  display: inline-block;
}

.afm .afm-btn:hover,
.afm .afm-btn:focus-visible {
  border-color: var(--afm-accent);
  background: var(--afm-sunken);
}

.afm .afm-btn--primary {
  border-color: var(--afm-accent);
  background: var(--afm-accent);
  color: #fff;
}

.afm .afm-btn--primary:hover,
.afm .afm-btn--primary:focus-visible {
  border-color: var(--afm-accent-deep);
  background: var(--afm-accent-deep);
  color: #fff;
}

.afm .afm-btn--quiet {
  border-color: var(--afm-line);
  background: transparent;
}

.afm .afm-btn--large {
  min-height: var(--af-control-height-lg, 3.5rem);
  padding: var(--af-control-padding-lg, 0 2.25rem);
}

.afm .afm-btn--block {
  width: 100%;
}

/* ==========================================================================
 * The three-column shell
 *
 * 240px of navigation, the panel, 312px of preview. The proportions are the mockup's: the
 * navigation is a list of short labels and gets exactly the width they need, the preview is a
 * profile card and gets the width a profile card wants, and everything left over goes to the thing
 * she came to do.
 * ========================================================================== */

.afm-shell {
  display: grid;
  grid-template-columns: var(--afm-side) minmax(0, 1fr) var(--afm-rail);
  align-items: start;
  gap: var(--afm-gap);
  padding-block: clamp(28px, 3vw, 44px) clamp(48px, 6vw, 80px);
}

.afm-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* The messenger needs both of its panes, so it takes the whole width and the navigation goes
 * horizontal above it. Same navigation, same order, same counts — laid out sideways, which is what
 * it already does on a phone. */
.afm-shell--wide {
  grid-template-columns: minmax(0, 1fr);
}

.afm-shell--wide .afm-side {
  display: block;
}

/*
 * The messenger keeps the navigation column and takes the rest.
 *
 * The first attempt laid the navigation out sideways above a full-bleed messenger, and it was worse
 * on both counts: three groups spread across 1500px with a hand-span of ivory between them, and a
 * screen that no longer looked like the other six. Dropping only the preview column gives the
 * messenger about 1030px at 1440 — comfortably enough for its three panes — and leaves the account
 * reading as one place.
 */
.afm-shell--wide {
  grid-template-columns: var(--afm-side) minmax(0, 1fr);
}

/* ==========================================================================
 * The navigation column
 * ========================================================================== */

.afm-side {
  position: sticky;
  top: calc(var(--wd-sticky-nav-height, 0px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.afm-nav__group + .afm-nav__group {
  margin-top: 24px;
}

.afm-nav__heading {
  margin: 0 0 8px;
  padding-inline: 13.6px;
  color: var(--afm-ink-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.afm-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.afm .afm-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 13.6px;
  border-radius: var(--afm-radius-sm);
  color: var(--afm-ink);
  font-size: 15px;
  text-decoration: none;
  transition: background var(--afm-fast) var(--afm-ease), color var(--afm-fast) var(--afm-ease);
}

.afm .afm-nav__link:hover {
  background: rgb(77 76 56 / 6%);
  color: var(--afm-accent-deep);
}

/*
 * The current row: a filled sand surface and a rule down its left edge, with the label in a heavier
 * weight. Three signals rather than one, because hover is also a colour and the two have to be
 * distinguishable while the pointer is in the column. The rule is a pseudo-element inset from the
 * radius so it follows the rounded corner instead of cutting across it.
 */
.afm .afm-nav__link.is-current {
  background: var(--afm-sand);
  color: var(--afm-accent-deep);
  font-weight: 500;
}

.afm .afm-nav__link.is-current::before {
  content: "";
  position: absolute;
  inset-block: 5.6px;
  left: 0;
  width: 3px;
  border-radius: var(--afm-radius-pill);
  background: var(--afm-accent);
}

.afm-nav__icon {
  display: inline-flex;
  color: var(--afm-ink-soft);
}

.afm-nav__icon .afc-icon {
  width: 18.4px;
  height: 18.4px;
}

.afm-nav__link.is-current .afm-nav__icon {
  color: var(--afm-accent);
}

.afm-nav__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A filled disc, not an outlined pill: the count is the one thing in this column that has to be
 * legible out of the corner of the eye. Zero is never rendered — see `area-nav.php`. */
.afm-nav__count {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22.4px;
  height: 22.4px;
  padding-inline: 5.6px;
  border-radius: var(--afm-radius-pill);
  background: var(--afm-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* --- The two cards under the column -------------------------------------- */

.afm-promo {
  padding: 21.6px 20px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius);
  background: var(--afm-card);
  text-align: center;
}

.afm-promo__icon {
  display: inline-flex;
  color: var(--afm-accent-soft);
}

.afm-promo__icon .afc-icon {
  width: 29.6px;
  height: 29.6px;
  stroke-width: 1.3;
}

.afm-promo__icon--round {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--afm-line);
  border-radius: 50%;
  background: var(--afm-sunken);
}

.afm-promo__icon--round .afc-icon {
  width: 19.2px;
  height: 19.2px;
}

.afm-promo__title {
  margin: 10.4px 0 4.8px;
  font-family: var(--afm-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.afm-promo__text {
  margin: 0;
  color: var(--afm-ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

.afm .afm-promo__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14.4px;
  border-top: 1px solid var(--afm-line-soft);
  width: 100%;
  color: var(--afm-ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--afm-fast) var(--afm-ease);
}

.afm .afm-promo__link:hover {
  color: var(--afm-accent);
}

.afm .afm-promo__link .afc-icon {
  width: 1.1em;
  height: 1.1em;
}

.afm-promo--help {
  text-align: left;
}

.afm-promo__head {
  display: flex;
  align-items: flex-start;
  gap: 13.6px;
}

.afm-promo--help .afm-promo__title {
  margin-top: 0;
  font-size: 18px;
}

/* ==========================================================================
 * Cards and numbered sections
 * ========================================================================== */

.afm-card {
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius);
  background: var(--afm-card);
  box-shadow: var(--afm-shadow);
}

.afm-section {
  padding: clamp(21.6px, 2.2vw, 29.6px);
}

.afm-section__head {
  display: flex;
  align-items: flex-start;
  gap: 14.4px;
  margin-bottom: 21.6px;
}

/*
 * The step number. A settings page of five equal white rectangles has no beginning, and the numbers
 * are how the eye finds one — set in the display face, in a sand disc, quiet enough that they order
 * the page without competing with the headings they sit beside.
 */
.afm-section__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2.4px;
  border-radius: 50%;
  background: var(--afm-sand);
  color: var(--afm-accent-deep);
  font-family: var(--afm-display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.afm-section__head h2 {
  margin: 0;
  font-family: var(--afm-display);
  font-size: clamp(22.4px, 1.9vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.afm-section__head p {
  margin: 4.8px 0 0;
  color: var(--afm-ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

/* ==========================================================================
 * Form fields
 * ========================================================================== */

.afm-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.afm-field {
  display: block;
  margin: 0 0 18.4px;
}

.afm-field:last-child {
  margin-bottom: 0;
}

.afm .afm-label,
.afm .afm-row__label {
  display: block;
  margin-bottom: 7.2px;
  color: var(--afm-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.afm .afm-help {
  display: block;
  margin-top: 6.4px;
  color: var(--afm-ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

/*
 * One control shape for every input, select and textarea on the page.
 *
 * `font: inherit` is load-bearing: browsers set form controls in the system UI face at 13px, and a
 * premium account whose fields are Segoe UI while its labels are Jost reads as a form bolted onto a
 * website. The 16px minimum is what stops iOS zooming the viewport on focus.
 */
.afm .afm-field input[type="text"],
.afm .afm-field input[type="email"],
.afm .afm-field input[type="url"],
.afm .afm-field textarea,
.afm .afm-select select,
.afm .afm-appeal textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-sm);
  background: var(--afm-card);
  color: var(--afm-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--afm-fast) var(--afm-ease), box-shadow var(--afm-fast) var(--afm-ease);
}

.afm .afm-field textarea,
.afm .afm-appeal textarea {
  min-height: 112px;
  resize: vertical;
}

.afm .afm-field :is(input, textarea)::placeholder {
  color: var(--afm-ink-faint);
}

.afm .afm-field :is(input, textarea):focus,
.afm .afm-select select:focus,
.afm .afm-appeal textarea:focus {
  border-color: var(--afm-accent-soft);
  box-shadow: 0 0 0 3px rgb(77 76 56 / 10%);
  outline: none;
}

/* The chevron is ours, drawn on top of a select whose own arrow is switched off — a native arrow is
 * a different shape in every browser and none of them match the icon set. */
.afm-select {
  position: relative;
  display: block;
}

.afm .afm-select select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
}

.afm-select .afc-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16.8px;
  height: 16.8px;
  transform: translateY(-50%);
  color: var(--afm-ink-soft);
  pointer-events: none;
}

/* --- The identity block --------------------------------------------------- */

.afm-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-bottom: 18.4px;
}

.afm-photo {
  min-width: 0;
}

.afm-photo__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.afm-photo__current {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 96px;
}

/*
 * THE PREVIEW HAS TO BE A CIRCLE, WHATEVER THE THEME SAYS ABOUT IMAGES
 *
 * `community.js` replaces the avatar with a bare `<img>` pointing at an object URL. Nearly every
 * WordPress theme carries `img { height: auto }` so that responsive images keep their ratio, and it
 * beat the height set here — so a landscape photograph came back as a wide rounded rectangle that
 * pushed the upload target and the "Tranche d'âge" column out of the grid. The clipping now lives on
 * the wrapper, which is a `<span>` no theme has an opinion about, and the image simply fills it.
 */
.afm-photo__current [data-afc-avatar-current] {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--afm-line);
}

.afm-photo__current [data-afc-avatar-current] > * {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}

.afm-photo__current .afc-avatar,
.afm-photo__current :is(img, .avatar) {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

/*
 * "Supprimer" is a real checkbox, styled as the underlined link the mockup draws. It has to stay a
 * checkbox: removal happens on submit, together with everything else on the page, so that ticking
 * it and then choosing a new photograph in the same visit ends with the new photograph rather than
 * with nothing. A button that deleted immediately would make that sequence destructive.
 */
.afm-photo__remove {
  display: inline-flex;
  align-items: center;
  gap: 6.4px;
  cursor: pointer;
  color: var(--afm-ink-soft);
  font-size: 13px;
}

.afm-photo__remove input {
  width: 16px;
  height: 16px;
  accent-color: var(--afm-bad);
  cursor: pointer;
}

.afm-photo__remove span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.afm-photo__remove:has(input:checked) span {
  color: var(--afm-bad);
}

.afm-photo__status:empty {
  display: none;
}

.afm-photo__status {
  display: block;
  margin-top: 9.6px;
  font-size: 13px;
  color: var(--afm-good);
}

/* The upload target. The real `<input type="file">` is inside this label — visually removed, never
 * `display: none`, so it keeps its place in the focus order and a keyboard reaches it. */
.afm-drop {
  position: relative;
  /* `min-width: 0`, and it is load-bearing: a flex item's default minimum is its content, so a
   * photograph called "Top 10 des lieux du patrimoine.jpg" widened this box past its track and took
   * the whole two-column identity grid with it. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4px;
  min-height: 144px;
  padding: 16px;
  border: 1px dashed var(--afm-line-strong);
  border-radius: var(--afm-radius-sm);
  background: var(--afm-card);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--afm-fast) var(--afm-ease), background var(--afm-fast) var(--afm-ease);
}

.afm-drop:hover,
.afm-drop.is-over {
  border-color: var(--afm-accent-soft);
  background: var(--afm-sunken);
}

/*
 * The input is removed from sight, never from the page: `display: none` takes it out of the focus
 * order, and a photograph upload that cannot be reached with a keyboard is not an upload. Focus is
 * shown on the target instead, which is the thing the eye is looking at.
 */
.afm-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.afm-drop:has(input:focus-visible) {
  outline: 2px solid var(--afm-focus);
  outline-offset: 2px;
  border-color: var(--afm-accent-soft);
}

.afm-drop__icon {
  color: var(--afm-accent-soft);
}

.afm-drop__icon .afc-icon {
  width: 24px;
  height: 24px;
}

.afm-drop__title {
  margin-top: 5.6px;
  font-size: 15px;
  font-weight: 500;
}

.afm-drop__hint,
.afm-drop__file {
  color: var(--afm-ink-soft);
  font-size: 13px;
  line-height: 1.35;
}

/* The chosen file name only appears once there is one: an empty state saying "aucun fichier
 * sélectionné" under a target that says "changer la photo" is the same sentence twice. */
.afm-drop__file {
  display: none;
  margin-top: 6.4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--afm-accent);
  font-weight: 500;
}

.afm-drop.has-file .afm-drop__file {
  display: block;
}

.afm-identity__fields {
  min-width: 0;
}

/* ==========================================================================
 * Chips
 * ========================================================================== */

.afm-interests {
  margin: 0;
  padding: 0;
  border: 0;
}

.afm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.afm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7.2px;
  min-height: 40px;
  padding: 7.2px 16px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-sm);
  background: var(--afm-card);
  color: var(--afm-ink);
  font-size: 14px;
  line-height: 1.2;
}

.afm-chips--static .afm-chip {
  min-height: 32px;
  padding: 4.8px 12px;
  border-radius: var(--afm-radius-pill);
  background: var(--afm-sunken);
  border-color: transparent;
  font-size: 13px;
}

/* A picked interest is a filled olive lozenge with a check, which is the mockup's treatment and the
 * right one: at eight chips in a wrapping grid, a border-colour change is invisible. */
.afm-chip--pick {
  position: relative;
  cursor: pointer;
  transition: background var(--afm-fast) var(--afm-ease), border-color var(--afm-fast) var(--afm-ease),
    color var(--afm-fast) var(--afm-ease);
}

.afm-chip--pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.afm-chip--pick .afc-icon {
  width: 1.05em;
  height: 1.05em;
  opacity: 0;
  transition: opacity var(--afm-fast) var(--afm-ease);
}

.afm-chip--pick:hover {
  border-color: var(--afm-line-strong);
  background: var(--afm-sunken);
}

.afm-chip--pick:has(input:checked) {
  border-color: var(--afm-accent);
  background: var(--afm-accent);
  color: #fff;
}

.afm-chip--pick:has(input:checked) .afc-icon {
  opacity: 1;
}

.afm-chip--pick:has(input:focus-visible) {
  outline: 2px solid var(--afm-focus);
  outline-offset: 2px;
}

/* Past the cap, the unticked chips go quiet rather than disappearing: she needs to see that the
 * others still exist and that the reason she cannot add one is the limit. */
.afm-interests.is-full .afm-chip--pick:not(:has(input:checked)) {
  opacity: 0.45;
}

/* ==========================================================================
 * Setting rows and switches
 * ========================================================================== */

.afm-rows {
  display: flex;
  flex-direction: column;
}

/* `position: relative` is load-bearing, not tidiness: the checkbox inside a switch row is taken out
 * of the flow, and without a positioned ancestor it anchors to the page — a 1px transparent box
 * somewhere in the top-left corner, which on a narrow viewport is enough to create a horizontal
 * scrollbar nobody can find the cause of. */
.afm-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
  border-top: 1px solid var(--afm-line-soft);
}

.afm-row:first-child {
  border-top: 0;
  padding-top: 4px;
}

.afm-rows--compact .afm-row {
  padding-block: 11.2px;
}

.afm-row--switch {
  cursor: pointer;
}

.afm-row__icon {
  flex: none;
  display: inline-flex;
  color: var(--afm-ink-soft);
}

.afm-row__icon .afc-icon {
  width: 18.4px;
  height: 18.4px;
}

.afm-row__text {
  flex: 1 1 auto;
  min-width: 0;
}

.afm-row__text strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.afm-row__text small {
  display: block;
  margin-top: 2.4px;
  color: var(--afm-ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.afm .afm-row__label {
  margin-bottom: 0;
  font-size: 15px;
}

.afm-row--select .afm-select {
  flex: none;
  width: min(320px, 55%);
}

.afm-row--stack {
  align-items: flex-start;
}

.afm-row--stack .afm-row__icon {
  margin-top: 2.4px;
}

.afm-row--stack .afm-chips {
  margin-top: 9.6px;
}

.afm .afm-row__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6.4px;
  color: var(--afm-accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.afm .afm-row__go:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.afm .afm-row__go .afc-icon {
  width: 1.15em;
  height: 1.15em;
}

/*
 * The switch.
 *
 * The checkbox is visually removed but still focusable, and the track is a sibling `<span>` that
 * reads its state through `:has()`. Two consequences worth stating: the whole row is the label, so
 * the target is the full width rather than a 44px lozenge at the end of it; and the control is a
 * real checkbox, so it works with a keyboard, with a screen reader, and with scripting off — which
 * matters more here than anywhere else on the site, because these are privacy settings.
 */
.afm-row--switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.afm-switch {
  flex: none;
  position: relative;
  display: block;
  width: 46px;
  height: 26px;
  border-radius: var(--afm-radius-pill);
  background: #ded7cc;
  transition: background var(--afm-fast) var(--afm-ease);
}

.afm-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(45 37 30 / 22%);
  transition: transform var(--afm-fast) var(--afm-ease);
}

.afm-row--switch:has(input:checked) .afm-switch {
  background: var(--afm-accent);
}

.afm-row--switch:has(input:checked) .afm-switch::after {
  transform: translateX(20px);
}

.afm-row--switch:has(input:focus-visible) .afm-switch {
  outline: 2px solid var(--afm-focus);
  outline-offset: 2px;
}

.afm-row--locked {
  cursor: default;
}

/* --- Tags ---------------------------------------------------------------- */

.afm-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 4.8px 11.2px;
  border-radius: var(--afm-radius-pill);
  background: var(--afm-sand);
  color: var(--afm-accent-deep);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.afm-tag--quiet {
  background: var(--afm-sunken);
  color: var(--afm-ink-soft);
}

.afm-tag--wait {
  background: #fbf1e2;
  color: var(--afm-warn);
}

/* --- The privacy note at the foot of card 5 ------------------------------- */

.afm-note {
  display: flex;
  align-items: center;
  gap: 14.4px;
  flex-wrap: wrap;
  margin-top: 21.6px;
  padding: 16px 18.4px;
  border: 1px solid var(--afm-line-soft);
  border-radius: var(--afm-radius-sm);
  background: var(--afm-sunken);
}

.afm-note__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--afm-card);
  color: var(--afm-accent-soft);
}

.afm-note__icon .afc-icon {
  width: 17.6px;
  height: 17.6px;
}

.afm-note__text {
  flex: 1 1 256px;
  min-width: 0;
}

.afm-note__text strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.afm-note__text p {
  margin: 3.2px 0 0;
  color: var(--afm-ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.afm .afm-note__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6.4px;
  color: var(--afm-ink);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.afm .afm-note__link:hover {
  color: var(--afm-accent);
}

.afm .afm-note__link .afc-icon {
  width: 1.1em;
  height: 1.1em;
}

/* --- The save bar --------------------------------------------------------- */

.afm-save {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18.4px clamp(21.6px, 2.2vw, 29.6px);
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius);
  background: var(--afm-card);
  box-shadow: var(--afm-shadow);
}

.afm-save__act {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7.2px;
}

.afm-save__note {
  margin: 0;
  color: var(--afm-ink-soft);
  font-size: 12px;
}

/* ==========================================================================
 * The preview column
 * ========================================================================== */

.afm-rail {
  position: sticky;
  top: calc(var(--wd-sticky-nav-height, 0px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* `afm-support`, not `afm-help`: `.afm-help` is the small print under a form field, and a card
 * sharing that name would have given every help sentence on the page 20px of padding and centred
 * it. */
.afm-preview,
.afm-privacy,
.afm-support {
  padding: 20px;
}

.afm-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14.4px;
  border-bottom: 1px solid var(--afm-line-soft);
}

.afm-preview__head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.afm-preview__head .afc-icon {
  width: 18.4px;
  height: 18.4px;
  color: var(--afm-ink-soft);
}

.afm-preview__person {
  display: flex;
  align-items: center;
  gap: 13.6px;
  margin-top: 16px;
}

.afm-preview__avatar .afc-avatar,
.afm-preview__avatar :is(img, .avatar) {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--afm-line);
}

.afm-preview__name {
  margin: 0;
  font-family: var(--afm-display);
  font-size: 21.6px;
  font-weight: 400;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.afm-preview__since {
  margin: 2.4px 0 0;
  color: var(--afm-ink-soft);
  font-size: 13px;
}

.afm-preview__bio {
  margin: 16px 0 0;
  color: var(--afm-ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.afm-preview__bio.is-empty {
  color: var(--afm-ink-faint);
  font-style: italic;
}

.afm-preview__interests {
  margin-top: 17.6px;
  padding-top: 17.6px;
  border-top: 1px solid var(--afm-line-soft);
}

.afm-preview__label {
  margin: 0 0 9.6px;
  font-size: 14px;
  font-weight: 500;
}

.afm-preview__more {
  display: inline-flex;
  align-items: center;
  color: var(--afm-ink-soft);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.afm .afm-preview__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 17.6px;
  padding-top: 16px;
  border-top: 1px solid var(--afm-line-soft);
  color: var(--afm-ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.afm .afm-preview__link:hover {
  color: var(--afm-accent);
}

.afm .afm-preview__link .afc-icon {
  width: 1.15em;
  height: 1.15em;
}

.afm-preview__hidden {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 17.6px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--afm-line-soft);
  color: var(--afm-ink-soft);
  font-size: 13px;
}

.afm-preview__hidden .afc-icon {
  width: 16.8px;
  height: 16.8px;
}

/* --- Confidentiality ------------------------------------------------------ */

.afm-privacy__head {
  display: flex;
  align-items: flex-start;
  gap: 13.6px;
}

.afm-privacy__mark {
  flex: none;
  display: inline-flex;
  color: var(--afm-accent-soft);
}

.afm-privacy__mark .afc-icon {
  width: 32px;
  height: 32px;
  stroke-width: 1.2;
}

.afm-privacy__head h2 {
  margin: 0;
  font-family: var(--afm-display);
  font-size: 21.6px;
  font-weight: 400;
  line-height: 1.1;
}

.afm-privacy__head p {
  margin: 4.8px 0 0;
  color: var(--afm-ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.afm-privacy__list {
  display: flex;
  flex-direction: column;
  gap: 11.2px;
  margin-top: 17.6px;
}

.afm-privacy__list li {
  display: flex;
  align-items: center;
  gap: 10.4px;
  font-size: 14px;
}

/* A filled disc with a white tick, which is the mockup's mark and reads as "confirmed" where a bare
 * outline tick reads as "to do". */
.afm-privacy__list span {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21.6px;
  height: 21.6px;
  border-radius: 50%;
  background: var(--afm-accent);
  color: #fff;
}

.afm-privacy__list .afc-icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

/* --- Support -------------------------------------------------------------- */

.afm-support {
  text-align: center;
}

/* The one branded colour in the module, and it is on an outline rather than on the official filled
 * glyph: a solid WhatsApp green beside a column of hairline icons would be the loudest thing on the
 * page, on a card that is a footnote. */
.afm-support__mark {
  display: inline-flex;
  color: var(--afm-whatsapp);
}

.afm-support__mark .afc-icon {
  width: 36px;
  height: 36px;
  stroke-width: 1.3;
}

.afm-support h2 {
  margin: 9.6px 0 4.8px;
  font-family: var(--afm-display);
  font-size: 20.8px;
  font-weight: 400;
  line-height: 1.15;
}

.afm-support p {
  margin: 0 0 16px;
  color: var(--afm-ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

/* ==========================================================================
 * Panels shared by the other six sections
 * ========================================================================== */

.afm-panel {
  padding: clamp(21.6px, 2.2vw, 29.6px);
}

.afm-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.afm-panel__head h2 {
  margin: 0;
  font-family: var(--afm-display);
  font-size: clamp(22.4px, 1.9vw, 28px);
  font-weight: 400;
  line-height: 1.15;
}

.afm-panel__head p {
  margin: 4.8px 0 0;
  color: var(--afm-ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

/* Contributions still under review, marked with the same warm tint the tag beside them uses. It is
 * the one panel on the activity screen that is about waiting rather than about what she has done,
 * and it is first because "j'ai publié et rien n'est apparu" is the complaint it prevents. */
.afm-panel--wait {
  border-color: #ecdfc7;
  background: linear-gradient(180deg, #fdf8ef 0%, var(--afm-card) 60%);
}

/* --- Her four numbers ----------------------------------------------------- */

.afm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
  gap: 12px;
}

.afm-stat {
  padding: 17.6px 20px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius);
  background: var(--afm-card);
  box-shadow: var(--afm-shadow);
}

.afm .afm-stat a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.afm .afm-stat a:hover strong {
  color: var(--afm-accent);
}

.afm-stat strong {
  display: block;
  font-family: var(--afm-display);
  font-size: 29.6px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color var(--afm-fast) var(--afm-ease);
}

.afm-stat span {
  display: block;
  margin-top: 5.6px;
  color: var(--afm-ink-soft);
  font-size: 13px;
}

/* --- The notification feed and the generic list --------------------------- */

.afm-feed,
.afm-list {
  display: flex;
  flex-direction: column;
}

.afm-feed__item,
.afm-list__item {
  display: flex;
  align-items: flex-start;
  gap: 13.6px;
  padding-block: 14.4px;
  border-top: 1px solid var(--afm-line-soft);
}

.afm-feed__item:first-child,
.afm-list__item:first-child {
  border-top: 0;
  padding-top: 4px;
}

.afm-feed__icon,
.afm-list__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--afm-sunken);
  color: var(--afm-ink-soft);
}

.afm-feed__icon .afc-icon,
.afm-list__icon .afc-icon {
  width: 16.8px;
  height: 16.8px;
}

.afm-feed__item.is-unread .afm-feed__icon {
  background: var(--afm-sand);
  color: var(--afm-accent);
}

.afm-feed__body,
.afm-list__body {
  flex: 1 1 auto;
  min-width: 0;
}

.afm .afm-feed__title,
.afm .afm-list__title {
  display: block;
  color: var(--afm-ink);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
}

.afm a.afm-feed__title:hover,
.afm a.afm-list__title:hover {
  color: var(--afm-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.afm-feed__item.is-unread .afm-feed__title {
  font-weight: 500;
}

.afm-feed__text,
.afm-list__text {
  display: block;
  margin-top: 3.2px;
  color: var(--afm-ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.afm-feed__time,
.afm-list__time {
  display: block;
  margin-top: 5.6px;
  color: var(--afm-ink-faint);
  font-size: 12px;
}

/* A dot beside the row, not a counting badge: "3" tells her how many items are waiting in something
 * she is about to open and read all of anyway. */
.afm-feed__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 14.4px;
  border-radius: 50%;
  background: var(--afm-accent);
}

.afm-more {
  margin: 20px 0 0;
  text-align: center;
}

/* --- Badges --------------------------------------------------------------- */

.afm-progress {
  display: flex;
  align-items: center;
  gap: 9.6px;
  margin: 0 0 20px;
  padding: 13.6px 16px;
  border-radius: var(--afm-radius-sm);
  background: var(--afm-sunken);
  color: var(--afm-ink-soft);
  font-size: 14px;
}

.afm-progress .afc-icon {
  width: 17.6px;
  height: 17.6px;
  color: var(--afm-accent-soft);
}

.afm-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 12px;
}

.afm-badge {
  padding: 17.6px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-sm);
  background: var(--afm-card);
}

/* Unheld badges are dimmed rather than hidden. The catalogue used to be fetched and never
 * rendered, so a member with no badges was told she had none and never what there was to earn. */
.afm-badge:not(.is-held) {
  background: var(--afm-sunken);
  color: var(--afm-ink-soft);
}

.afm-badge__mark {
  display: inline-flex;
  color: var(--afm-ink-faint);
}

.afm-badge.is-held .afm-badge__mark {
  color: var(--afm-accent);
}

.afm-badge__mark .afc-icon {
  width: 25.6px;
  height: 25.6px;
  stroke-width: 1.3;
}

.afm-badge__name {
  display: block;
  margin-top: 8px;
  font-family: var(--afm-display);
  font-size: 17.6px;
  font-weight: 400;
}

.afm-badge__text {
  display: block;
  margin-top: 4px;
  color: var(--afm-ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.afm-badge__state {
  display: block;
  margin-top: 9.6px;
  color: var(--afm-ink-faint);
  font-size: 12px;
}

/* --- Appeals -------------------------------------------------------------- */

.afm-appeal {
  padding-top: 16px;
  border-top: 1px solid var(--afm-line-soft);
}

.afm-appeal:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.afm-appeal__subject {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
}

/* --- Empty states --------------------------------------------------------- */

.afm-blank {
  padding: clamp(32px, 5vw, 52px) 20px;
  text-align: center;
}

.afm-blank__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--afm-sunken);
  color: var(--afm-accent-soft);
}

.afm-blank__icon .afc-icon {
  width: 24px;
  height: 24px;
}

.afm-blank__title {
  margin: 14.4px 0 0;
  font-family: var(--afm-display);
  font-size: 21.6px;
  font-weight: 400;
}

.afm-blank__text {
  margin: 8px auto 20px;
  max-width: 44ch;
  color: var(--afm-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

/* ==========================================================================
 * Responsive
 *
 * Three arrangements, and the order of what goes first is the point of each.
 * ========================================================================== */

/* The preview column drops under the panel before it gets too narrow to be a preview. It stays
 * above the fold on a tablet by becoming a row of cards rather than a stack. */
@media (max-width: 1200px) {
  .afm-shell {
    grid-template-columns: var(--afm-side) minmax(0, 1fr);
  }

  .afm-rail {
    position: static;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    align-items: start;
  }
}

@media (max-width: 900px) {
  .afm {
    --afm-gap: 24px;
  }

  .afm-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * The navigation becomes a horizontal rail above the panel. It is the same list in the same
   * order; the group headings ride with their rows rather than disappearing, so "Notifications"
   * and "Sécurité" are still visibly two different kinds of destination.
   */
  .afm-side {
    position: static;
    order: -1;
  }

  .afm-nav {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    margin-inline: calc(var(--afm-gutter) * -1);
    padding-inline: var(--afm-gutter);
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .afm-nav__group + .afm-nav__group {
    margin-top: 0;
  }

  .afm-nav__group {
    flex: none;
  }

  .afm-nav__list {
    flex-direction: row;
    gap: 5.6px;
  }

  .afm-nav__link {
    white-space: nowrap;
  }

  .afm .afm-nav__link.is-current::before {
    inset: auto 8px 0;
    top: auto;
    width: auto;
    height: 3px;
  }

  /* The two cards move to the end of the page: on a phone they sit under the form, which is where
   * "I could not do this myself" happens. */
  .afm-promo {
    display: none;
  }

  .afm-identity {
    grid-template-columns: minmax(0, 1fr);
  }

  .afm-rail {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .afm-mast__inner {
    align-items: flex-start;
  }

  .afm-mast__actions {
    width: 100%;
  }

  .afm .afm-mast__actions .afm-btn {
    flex: 1 1 192px;
  }

  .afm-photo__row {
    flex-direction: column;
    align-items: stretch;
  }

  .afm-photo__current {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: auto;
  }

  /* A select at 55% of a 320px row is 176px, which cannot show "Tous les membres peuvent
   * m'écrire". Below this width the label and the control stack. */
  .afm-row--select {
    align-items: flex-start;
    flex-direction: column;
    gap: 9.6px;
  }

  .afm-row--select .afm-select {
    width: 100%;
  }

  .afm-row--link {
    flex-wrap: wrap;
  }

  .afm-save {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .afm-save__act {
    align-items: stretch;
  }

  .afm-save__note {
    text-align: center;
  }

  .afm .afm-save .afm-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .afm * {
    transition-duration: 1ms !important;
  }
}

/* ==========================================================================
 * THE MESSENGER
 *
 * Rebuilt from mockups `pageMsgMember.png` and `pageMsgMember_Mobile.png`.
 *
 * The one component on this site that is an application rather than a document, and it is built
 * that way: a fixed-height frame with three independently scrolling panes. Everything below follows
 * from that single decision.
 *
 * - **Why fixed height.** In the page flow, reading a conversation meant scrolling the site footer
 *   past the composer, and the newest message — the one you are replying to — ended up furthest from
 *   the box you type in. `height: min(78vh, 900px)` gives the frame a bottom, so the composer has
 *   somewhere to sit and the thread scrolls under a header that stays put.
 * - **Why three panes and not two.** The middle pane is the conversation and gets the room; the list
 *   is a column of names and needs 300px; the context panel is a profile card and needs 280px. The
 *   old inbox gave all three about 200px, which is a column of clipped names beside a column too
 *   narrow for a sentence.
 * - **Why the panes swap with no JavaScript.** The state is in the URL — `?fil=` means a conversation
 *   is open — so below 900px `.is-open` hides the list and shows the thread, and its absence does the
 *   reverse. Every state has an address she can bookmark or send, and nothing breaks with scripting
 *   off.
 * ========================================================================== */

.afm-msg {
  --afm-msg-h: min(78vh, 900px);

  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 296px;
  height: var(--afm-msg-h);
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius);
  background: var(--afm-card);
  box-shadow: var(--afm-shadow);
  overflow: hidden;
}

/* Each pane is its own scroll container. `min-height: 0` on a grid child is what actually allows
 * that: without it a grid item refuses to shrink below its content and the inner `overflow` never
 * engages, which is the classic way a "scrolling pane" ends up scrolling the whole page instead. */
/*
 * With nothing open there is nothing to describe, so the frame is two columns rather than
 * three-with-a-blank. Guarded by `min-width` because `.afm-msg:not(.is-open)` is one class more
 * specific than the `.afm-msg` inside the phone media query — unguarded it won there too, and left a
 * 320px list beside half a screen of empty white.
 */
@media (min-width: 901px) {
  .afm-msg:not(.is-open) {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

.afm-msg > * {
  min-height: 0;
  min-width: 0;
}

/* --- Pane 1: the conversations ------------------------------------------- */

.afm-msg__list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-right: 1px solid var(--afm-line);
  background: var(--afm-page);
}

/*
 * `min-width: 0` on every row of both panes, and it is the whole reason the list stopped bleeding
 * across the conversation.
 *
 * A grid item's default `min-width` is `auto`, which means "never smaller than my content" — so a
 * conversation row holding a long last message widened its own track past the 320px the grid asked
 * for, and the excerpt's `text-overflow: ellipsis` never engaged because there was nothing to clip
 * against. Setting it here is what makes the clip happen; `overflow-x: hidden` on the scroller is
 * the belt to that pair of braces.
 */
.afm-msg__list > *,
.afm-msg__thread > * {
  min-width: 0;
}

.afm-msg__list-top {
  padding: 16px;
  border-bottom: 1px solid var(--afm-line);
}

/*
 * The magnifier is laid out, not positioned.
 *
 * It was `position: absolute; top: 50%` inside the form, which put it in the bottom-left corner of
 * a field whose height WoodMart had already grown past what this file asked for — an absolutely
 * positioned icon is only ever centred on the box you *think* you are centring it on. As a flex
 * child of the pill it cannot land anywhere but on the text baseline, whatever the theme does to
 * the input's height.
 */
.afm-msg__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-inline: 14px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-pill);
  background: var(--afm-card);
  transition: border-color var(--afm-fast) var(--afm-ease), box-shadow var(--afm-fast) var(--afm-ease);
}

.afm-msg__search:focus-within {
  border-color: var(--afm-accent-soft);
  box-shadow: 0 0 0 3px rgb(77 76 56 / 10%);
}

.afm-msg__search-icon {
  flex: none;
  display: inline-flex;
  color: var(--afm-ink-faint);
}

.afm-msg__search-icon .afc-icon {
  width: 16px;
  height: 16px;
}

/* The border, the ground and the radius all live on the wrapper, so the input itself is stripped
 * back to nothing — including the `box-shadow` and `min-height` the theme puts on every field. */
.afm .afm-msg__search input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--afm-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.afm .afm-msg__search input[type="search"]:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

/* The four views scroll sideways rather than wrapping: at this column width they wrap with
 * "Supprimées" alone on a second line, and a lone chip under three others reads as a mistake. */
.afm-msg__views {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.afm-msg__views::-webkit-scrollbar {
  display: none;
}

/* Four chips do not fit in 320px, so the row scrolls — and a scrolling row with a hard edge just
 * looks like a row that is missing its last item. The fade is the affordance. */
.afm-msg__views {
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}

.afm .afm-msg__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--afm-radius-pill);
  color: var(--afm-ink-soft);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--afm-fast) var(--afm-ease), color var(--afm-fast) var(--afm-ease);
}

.afm .afm-msg__view:hover {
  background: var(--afm-sunken);
  color: var(--afm-ink);
}

.afm .afm-msg__view.is-current {
  background: var(--afm-accent);
  color: #fff;
}

.afm-msg__view-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--afm-radius-pill);
  background: rgb(0 0 0 / 10%);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.afm-msg__view.is-current .afm-msg__view-count {
  background: rgb(255 255 255 / 22%);
}

.afm-msg__list-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The shared blank is sized for a full-width panel; inside a 320px column its 44ch measure and its
 * 52px padding both overflow, which is what clipped "…puis écrivez-lui." against the pane edge. */
.afm-msg__list-scroll .afm-blank {
  padding: 32px 16px;
}

.afm-msg__list-scroll .afm-blank__text {
  max-width: none;
  font-size: 13px;
}

.afm-msg__list-scroll .afm-blank__title {
  font-size: 19px;
}

.afm-msg__requests {
  border-bottom: 1px solid var(--afm-line);
  background: var(--afm-sunken);
}

.afm-msg__requests > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  list-style: none;
}

.afm-msg__requests > summary::-webkit-details-marker {
  display: none;
}

.afm-msg__requests > summary .afc-icon {
  width: 16px;
  height: 16px;
  color: var(--afm-accent);
}

.afm-msg__requests-note {
  margin: 0;
  padding: 0 16px 8px;
  color: var(--afm-ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

/* --- A conversation row --------------------------------------------------- */

.afm-convo {
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--afm-line-soft);
}

.afm-convo--request {
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
}

.afm .afm-convo__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 8px 12px 16px;
  color: inherit;
  text-decoration: none;
  transition: background var(--afm-fast) var(--afm-ease);
}

.afm .afm-convo__link:hover {
  background: rgb(77 76 56 / 5%);
}

/* The open row carries a filled surface and a rule down its left edge — the same treatment as the
 * current navigation row, for the same reason: hover is a colour, so the current state cannot be. */
.afm-convo.is-current .afm-convo__link {
  background: var(--afm-sand);
}

.afm-convo.is-current::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  background: var(--afm-accent);
}

.afm-convo__avatar {
  flex: none;
}

.afm-convo__avatar .afc-avatar,
.afm-convo__avatar :is(img, .avatar) {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.afm-convo__body {
  flex: 1 1 auto;
  min-width: 0;
}

.afm-convo__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.afm-convo__who {
  overflow: hidden;
  color: var(--afm-ink);
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.afm-convo__time {
  flex: none;
  color: var(--afm-ink-faint);
  font-size: 11px;
}

.afm-convo__line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

/* Clipped, never wrapped. A row whose height depends on how long the last message was makes the
 * list impossible to scan with the eye, which is the only way anybody reads an inbox. */
.afm-convo__excerpt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--afm-ink-soft);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.afm-convo.is-unread .afm-convo__who {
  font-weight: 600;
}

.afm-convo.is-unread .afm-convo__excerpt {
  color: var(--afm-ink);
}

.afm-convo__count {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: var(--afm-radius-pill);
  background: var(--afm-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.afm-convo__muted {
  flex: none;
  display: inline-flex;
  color: var(--afm-ink-faint);
}

.afm-convo__muted .afc-icon {
  width: 14px;
  height: 14px;
}

/*
 * The row's last column, and the reason it is a column rather than an overlay.
 *
 * It was `position: absolute; top: 8px; right: 8px`, revealed on hover — which works exactly once
 * you have a pointer. On a phone there is none, so it was shown permanently, and a permanently shown
 * overlay is a pill sitting on top of the timestamp and the first three words of every message in
 * the list. Given its own column it cannot collide with anything, it is the same control at every
 * width, and the word it used to shout is now its accessible name.
 */
.afm-convo__flag {
  flex: none;
  display: flex;
  align-items: center;
  padding-right: 8px;
}

.afm .afm-convo__flag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--afm-ink-faint);
  cursor: pointer;
  transition: background var(--afm-fast) var(--afm-ease), color var(--afm-fast) var(--afm-ease);
}

.afm .afm-convo__flag button .afc-icon {
  width: 16px;
  height: 16px;
}

.afm .afm-convo__flag button:hover {
  background: var(--afm-card);
  color: var(--afm-accent);
}

.afm-convo__decide {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.afm .afm-btn--small {
  min-height: var(--af-control-height-sm, 2.25rem);
  padding: var(--af-control-padding-sm, 0 1.1rem);
  font-size: var(--af-control-size-sm, 0.7rem);
}

.afm-msg__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  color: var(--afm-ink-faint);
  font-size: 12px;
}

/* The privacy card at the foot of the list. Our sentence, not the mockup's "chiffrée de bout en
 * bout" — see the note at the top of `area-messages.php`. */
.afm-msg__privacy {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--afm-line);
  background: var(--afm-sunken);
}

.afm-msg__privacy > span {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--afm-card);
  color: var(--afm-accent-soft);
}

.afm-msg__privacy .afc-icon {
  width: 15px;
  height: 15px;
}

.afm-msg__privacy strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}

.afm-msg__privacy p {
  margin: 2px 0 0;
  color: var(--afm-ink-soft);
  font-size: 11px;
  line-height: 1.45;
}

/* --- Pane 2: the conversation --------------------------------------------- */

.afm-msg__thread {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--afm-page);
}

.afm-msg__nothing {
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
}

.afm-msg__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--afm-line);
  background: var(--afm-card);
}

/* Only useful at the width where the list is not beside it. Hidden by the stylesheet rather than
 * omitted by the markup, because the same page has to work at both. */
.afm-msg__back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--afm-ink);
}

.afm .afm-msg__who {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.afm-msg__who-avatar .afc-avatar,
.afm-msg__who-avatar :is(img, .avatar) {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.afm-msg__who strong {
  display: block;
  font-family: var(--afm-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.15;
}

.afm-msg__who small {
  display: block;
  color: var(--afm-ink-soft);
  font-size: 11px;
}

.afm .afm-msg__who:hover strong {
  color: var(--afm-accent);
}

.afm .afm-msg__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--afm-ink-soft);
  cursor: pointer;
  list-style: none;
  transition: background var(--afm-fast) var(--afm-ease), color var(--afm-fast) var(--afm-ease);
}

.afm .afm-msg__tool::-webkit-details-marker {
  display: none;
}

.afm .afm-msg__tool:hover {
  background: var(--afm-sunken);
  color: var(--afm-ink);
}

/* Muted is a state, so it is shown as one. Without this the bell looked identical whether the
 * conversation was silenced or not, and the only way to find out was to open the menu. */
.afm .afm-msg__tool.is-on {
  background: var(--afm-sand);
  color: var(--afm-accent);
}

.afm-msg__tool .afc-icon {
  width: 18px;
  height: 18px;
}

.afm-msg__menu {
  position: relative;
}

.afm-msg__menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  width: 280px;
  padding: 14px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-sm);
  background: var(--afm-card);
  box-shadow: var(--afm-shadow-lift);
}

/* --- The messages --------------------------------------------------------- */

.afm-msg__scroll {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  /* The thread is bottom-anchored: `column-reverse` would flip the DOM order, so instead the list
   * is pushed down by its own container when it is shorter than the pane, which keeps the newest
   * message at the bottom without reversing anything a screen reader reads. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}

.afm-msg__seal,
.afm-bubbles__day > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin: 0 auto 12px;
  padding: 5px 12px;
  border-radius: var(--afm-radius-pill);
  background: var(--afm-sunken);
  color: var(--afm-ink-soft);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.afm-msg__seal {
  max-width: 46ch;
}

.afm-msg__seal .afc-icon {
  flex: none;
  width: 13px;
  height: 13px;
}

.afm-msg__older {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 12px;
}

.afm-msg__older span {
  color: var(--afm-ink-faint);
}

.afm-bubbles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.afm-bubbles__day {
  display: flex;
  justify-content: center;
  margin-block: 8px;
}

.afm-bubbles__day > span {
  margin: 0;
}

/* --- One bubble ----------------------------------------------------------- */

.afm-bubble {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: min(78%, 560px);
  margin-right: auto;
}

.afm-bubble.is-mine {
  margin-right: 0;
  margin-left: auto;
  flex-direction: row-reverse;
}

.afm-bubble__face {
  flex: none;
  align-self: flex-end;
}

.afm-bubble__face .afc-avatar,
.afm-bubble__face :is(img, .avatar) {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/*
 * The bubble itself. Asymmetric radii — the corner nearest the speaker is squared off — which is
 * what a tail does without needing a tail: it gives the shape a direction, and it survives being
 * next to a photograph, which a drawn tail does not.
 */
.afm-bubble__box {
  position: relative;
  min-width: 0;
  padding: 10px 14px 6px;
  border: 1px solid var(--afm-line);
  border-radius: 16px 16px 16px 4px;
  background: var(--afm-card);
  box-shadow: var(--afm-shadow);
}

.afm-bubble.is-mine .afm-bubble__box {
  border-color: transparent;
  border-radius: 16px 16px 4px;
  background: var(--afm-sand);
}

.afm .afm-bubble__text {
  color: var(--afm-ink);
  font-size: 14px;
  line-height: 1.5;
}

.afm .afm-bubble__text > *:first-child {
  margin-top: 0;
}

.afm .afm-bubble__text > *:last-child {
  margin-bottom: 0;
}

.afm-bubble__gone {
  margin: 0;
  color: var(--afm-ink-faint);
  font-size: 13px;
  font-style: italic;
}

.afm-bubble__clock {
  display: block;
  margin-top: 2px;
  color: var(--afm-ink-faint);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.afm-bubble__photos {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  border-radius: 10px;
  overflow: hidden;
}

.afm-bubble__photos--2,
.afm-bubble__photos--3,
.afm-bubble__photos--4 {
  grid-template-columns: 1fr 1fr;
}

.afm-bubble__photos img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: cover;
}

.afm-bubble__photos--1 img {
  max-height: 320px;
}

/* One action per message, on hover or focus. Always in the accessibility tree. */
.afm-bubble__tools {
  align-self: center;
  opacity: 0;
  transition: opacity var(--afm-fast) var(--afm-ease);
}

.afm-bubble:hover .afm-bubble__tools,
.afm-bubble:focus-within .afm-bubble__tools {
  opacity: 1;
}

.afm .afm-bubble__tools :is(button, summary) {
  padding: 2px 6px;
  border: 0;
  background: none;
  color: var(--afm-ink-faint);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  list-style: none;
}

.afm .afm-bubble__tools :is(button, summary):hover {
  color: var(--afm-bad);
}

.afm-bubble__tools .afm-report[open] > form {
  position: absolute;
  right: 0;
  z-index: 4;
  width: 240px;
  padding: 12px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-sm);
  background: var(--afm-card);
  box-shadow: var(--afm-shadow-lift);
}

/* --- The composer --------------------------------------------------------- */

.afm-composer {
  padding: 12px 16px;
  border-top: 1px solid var(--afm-line);
  background: var(--afm-card);
}

.afm-composer__bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.afm .afm-composer__bar textarea {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 140px;
  padding: 11px 16px;
  border: 1px solid var(--afm-line);
  border-radius: 22px;
  background: var(--afm-page);
  color: var(--afm-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: none;
}

.afm .afm-composer__bar textarea:focus {
  border-color: var(--afm-accent-soft);
  box-shadow: 0 0 0 3px rgb(77 76 56 / 10%);
  outline: none;
}

/* The real file input lives inside this label — removed from sight, never from the focus order. */
.afm-composer__clip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--afm-ink-soft);
  cursor: pointer;
  transition: background var(--afm-fast) var(--afm-ease), color var(--afm-fast) var(--afm-ease);
}

.afm-composer__clip:hover {
  background: var(--afm-sunken);
  color: var(--afm-ink);
}

.afm-composer__clip input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.afm-composer__clip:has(input:focus-visible) {
  outline: 2px solid var(--afm-focus);
  outline-offset: 2px;
}

.afm-composer__clip .afc-icon {
  width: 19px;
  height: 19px;
}

.afm .afm-composer__send {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--afm-accent);
  color: #fff;
  cursor: pointer;
  transition: background var(--afm-fast) var(--afm-ease);
}

.afm .afm-composer__send:hover {
  background: var(--afm-accent-deep);
}

.afm-composer__send .afc-icon {
  width: 19px;
  height: 19px;
}

.afm-composer__help {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 8px 0 0;
  color: var(--afm-ink-faint);
  font-size: 11px;
  line-height: 1.4;
}

.afm-composer__waiting {
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--afm-line);
  color: var(--afm-ink-soft);
  font-size: 13px;
  text-align: center;
}

/* --- Pane 3: who you are talking to --------------------------------------- */

.afm-msg__about {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 16px;
  border-left: 1px solid var(--afm-line);
  background: var(--afm-page);
}

.afm-msg__about-person {
  text-align: center;
}

.afm-msg__about-avatar .afc-avatar,
.afm-msg__about-avatar :is(img, .avatar) {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--afm-line), 0 0 0 5px var(--afm-page);
}

.afm-msg__about-name {
  margin: 12px 0 0;
  font-family: var(--afm-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.afm-msg__about-since {
  margin: 2px 0 0;
  color: var(--afm-ink-soft);
  font-size: 12px;
}

.afm-msg__about-block {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--afm-line);
}

.afm-msg__about-block h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
}

.afm-msg__media {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.afm-msg__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
}

.afm-msg__about-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.afm .afm-msg__about-links :is(a, .afm-msg__about-state) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--afm-radius-sm);
  color: var(--afm-ink);
  font-size: 13px;
  text-decoration: none;
}

.afm .afm-msg__about-links a:hover {
  background: var(--afm-sunken);
  color: var(--afm-accent);
}

.afm-msg__about-links .afc-icon {
  width: 16px;
  height: 16px;
  color: var(--afm-ink-soft);
}

.afm-msg__about-links span + span {
  flex: 1 1 auto;
}

.afm-msg__about-links em {
  color: var(--afm-ink-soft);
  font-size: 12px;
  font-style: normal;
}

.afm-msg__about-links a .afc-icon:last-child {
  width: 14px;
  height: 14px;
  color: var(--afm-ink-faint);
}

/* --- Leaving, blocking, reporting ------------------------------------------ */

.afm-safety {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.afm-safety h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.afm .afm-safety__act {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-sm);
  background: var(--afm-card);
  color: var(--afm-ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--afm-fast) var(--afm-ease), color var(--afm-fast) var(--afm-ease);
}

.afm .afm-safety__act:hover {
  border-color: var(--afm-ink-soft);
}

.afm .afm-safety__act--danger {
  color: var(--afm-bad);
}

.afm .afm-safety__act--danger:hover {
  border-color: var(--afm-bad);
  background: #fbebeb;
}

.afm-safety__note {
  display: block;
  margin-top: 4px;
  color: var(--afm-ink-faint);
  font-size: 11px;
  line-height: 1.45;
}

/* The bordered box belongs to the safety panel's "Signaler cette conversation", where it is one of
 * three stacked actions. Inside a bubble the same element is one word of quiet text, and the border
 * turned it into a full-width field sitting under every message. */
.afm .afm-bubble__tools .afm-report > summary {
  padding: 2px 0;
  border: 0;
  font-size: 10px;
}

.afm .afm-report > summary {
  padding: 8px 10px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-sm);
  color: var(--afm-ink);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.afm .afm-report > summary::-webkit-details-marker {
  display: none;
}

.afm .afm-report[open] > summary {
  margin-bottom: 8px;
}

/* ==========================================================================
 * The messenger, responsive
 * ========================================================================== */

/* The context panel is the first thing to go: it is the only pane that repeats information
 * available elsewhere — the profile link, the mute state, the safety actions are all in the
 * header menu too. */
@media (max-width: 1240px) {
  .afm-msg {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .afm-msg__about {
    display: none;
  }
}

/*
 * One pane at a time. `.is-open` is set by the template when the URL carries `?fil=`, so the swap
 * needs no script and every state keeps its own address — which is also what makes the back button
 * do the right thing.
 */
@media (max-width: 900px) {
  .afm-msg {
    --afm-msg-h: min(82vh, 760px);

    grid-template-columns: minmax(0, 1fr);
  }

  .afm-msg__thread {
    display: none;
  }

  .afm-msg.is-open .afm-msg__list {
    display: none;
  }

  .afm-msg.is-open .afm-msg__thread {
    display: grid;
  }

  .afm-msg__back {
    display: inline-flex;
  }

  .afm-msg__list {
    border-right: 0;
  }

  /*
   * A phone thumb is not a mouse pointer: there is no hover, so a control that appears on hover
   * never appears at all. Both are shown permanently — but the per-message one moves *under* the
   * bubble rather than beside it. Left where it was, "Signaler" and "Supprimer" took a third of the
   * width of every bubble on a 390px screen and read as buttons inside the conversation.
   */
  .afm-bubble {
    max-width: 86%;
    flex-wrap: wrap;
  }

  .afm-bubble__tools {
    flex-basis: 100%;
    opacity: 1;
    text-align: left;
  }

  .afm-bubble.is-mine .afm-bubble__tools {
    text-align: right;
  }

  .afm .afm-bubble__tools :is(button, summary) {
    padding: 2px 0;
    font-size: 10px;
  }
}

/* ==========================================================================
 * THE PUBLIC PROFILE
 *
 * Rebuilt from `ProfilePublique.png`, and it reuses the account's card, list, chip and rail
 * components rather than inventing a second set — a member arriving here from her own preferences
 * has to recognise the place, and the fastest way to make two pages feel like one product is for
 * them to be made of the same parts.
 * ========================================================================== */

.afm-profile {
  padding-block: 24px 64px;
}

.afm-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--afm-ink-faint);
  font-size: 12px;
}

.afm .afm-crumbs a {
  color: var(--afm-ink-soft);
  text-decoration: none;
}

.afm .afm-crumbs a:hover {
  color: var(--afm-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- The header card ------------------------------------------------------ */

.afm-phero {
  padding: clamp(20px, 2.6vw, 32px);
  background:
    radial-gradient(90% 140% at 88% 0%, rgb(234 223 210 / 55%) 0%, rgb(255 255 255 / 0%) 60%),
    var(--afm-card);
}

.afm-phero__kind {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  color: var(--afm-ink-soft);
  font-size: 12px;
}

.afm-phero__body {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 28px);
}

.afm-phero__avatar {
  flex: none;
}

.afm-phero__avatar .afc-avatar,
.afm-phero__avatar :is(img, .avatar) {
  width: clamp(88px, 9vw, 128px);
  height: clamp(88px, 9vw, 128px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--afm-line), 0 0 0 6px var(--afm-card);
}

.afm-phero__text {
  min-width: 0;
}

.afm-phero__name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--afm-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

/* The staff seal. Filled rather than outlined, because it is the one mark on this page that is a
 * claim about identity — everything else is a fact about activity. */
.afm-phero__seal {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--afm-good);
  color: #fff;
}

.afm-phero__seal .afc-icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}

.afm-phero__level {
  margin: 4px 0 0;
  color: var(--afm-ink-soft);
  font-size: 13px;
}

.afm-phero__bio {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--afm-ink);
  font-size: 15px;
  line-height: 1.6;
}

.afm-phero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
}

.afm-phero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--afm-ink-soft);
  font-size: 13px;
}

.afm-phero__facts .afc-icon {
  width: 15px;
  height: 15px;
  color: var(--afm-ink-faint);
}

.afm-phero__badges {
  margin-top: 14px;
}

.afm-phero__badges .afc-icon {
  width: 14px;
  height: 14px;
  color: var(--afm-accent-soft);
}

.afm-chip--more {
  background: transparent;
  border-color: var(--afm-line);
  color: var(--afm-ink-soft);
}

/* --- The counters --------------------------------------------------------- */

.afm-pstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--afm-line-soft);
}

.afm-pstats li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.afm-pstats__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--afm-sunken);
  color: var(--afm-accent-soft);
}

.afm-pstats__icon .afc-icon {
  width: 17px;
  height: 17px;
}

.afm-pstats strong {
  display: block;
  font-family: var(--afm-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.afm-pstats small {
  display: block;
  margin-top: 2px;
  color: var(--afm-ink-soft);
  font-size: 12px;
}

/* --- The action bar -------------------------------------------------------- */

.afm-pacts {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--afm-line-soft);
}

.afm-pacts__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.afm-pacts__note {
  flex-basis: 100%;
  margin: 4px 0 0;
  color: var(--afm-ink-faint);
  font-size: 12px;
}

.afm-pacts__status {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
}

.afm-pacts__status:empty {
  display: none;
}

.afm-pwrite {
  position: relative;
}

.afm .afm-pwrite > summary {
  list-style: none;
}

.afm .afm-pwrite > summary::-webkit-details-marker {
  display: none;
}

.afm-pwrite__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  width: min(400px, 88vw);
  padding: 16px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-sm);
  background: var(--afm-card);
  box-shadow: var(--afm-shadow-lift);
}

/* --- The tab rail ---------------------------------------------------------- */

.afm-ptabs {
  display: flex;
  gap: 4px;
  margin: 20px 0 0;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.afm-ptabs::-webkit-scrollbar {
  display: none;
}

.afm .afm-ptabs a {
  padding: 9px 16px;
  border-radius: var(--afm-radius-pill);
  color: var(--afm-ink-soft);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--afm-fast) var(--afm-ease), color var(--afm-fast) var(--afm-ease);
}

.afm .afm-ptabs a:hover {
  background: var(--afm-sunken);
  color: var(--afm-ink);
}

/* Anchors, not tabs. They scroll rather than switch, so `:target` is what marks the section the
 * reader jumped to — and `scroll-margin-top` keeps the heading clear of the sticky site header. */
.afm-pbody :target {
  scroll-margin-top: 96px;
}

/* --- The body -------------------------------------------------------------- */

.afm-pbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--afm-rail);
  align-items: start;
  gap: var(--afm-gap);
  margin-top: 20px;
}

.afm .afm-prose {
  margin: 0 0 16px;
  max-width: 68ch;
  color: var(--afm-ink);
  font-size: 15px;
  line-height: 1.65;
}

.afm-pfigure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0 0;
}

.afm-pfigure strong {
  font-family: var(--afm-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.afm-pfigure span {
  color: var(--afm-ink-soft);
  font-size: 13px;
}

.afm-pbreak {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--afm-line-soft);
  text-align: center;
}

.afm-pbreak strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.afm-pbreak span {
  display: block;
  margin-top: 2px;
  color: var(--afm-ink-soft);
  font-size: 12px;
}

.afm-list--tight .afm-list__item {
  padding-block: 10px;
}

/* Overlapping faces, which is the one place on this site where that treatment is right: they are a
 * caption on a number rather than a list you are meant to read. */
.afm-faces {
  display: flex;
  margin-top: 16px;
  padding-left: 6px;
}

.afm-faces li {
  margin-left: -6px;
}

.afm-faces .afc-avatar,
.afm-faces :is(img, .avatar) {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--afm-card);
}

@media (max-width: 1100px) {
  .afm-pbody {
    grid-template-columns: minmax(0, 1fr);
  }

  .afm-rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  }
}

@media (max-width: 620px) {
  .afm-phero__body {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .afm-phero__name,
  .afm-phero__facts,
  .afm-phero__badges {
    justify-content: center;
  }

  .afm-phero__bio {
    text-align: left;
  }

  .afm-pwrite__panel {
    left: auto;
    right: 0;
  }
}

/* The notice's wrapper is always rendered so the fluid send has something to swap; it must not
 * leave a gap on the six screens out of seven that have nothing to announce. */
.afm-notice:empty {
  display: none;
}

/* ==========================================================================
 * THE CIRCLE DIRECTORY — proposal form and filter bar
 *
 * These two live on `/communaute/cercles/`, which is otherwise an `afc-` page. They are built from
 * the account's components on purpose: a member proposing a circle is doing the same *kind* of thing
 * she does in her preferences — filling in a considered form about herself — and the two screens
 * had no business looking like two different products.
 * ========================================================================== */

.afm-propose {
  margin-block: clamp(40px, 6vw, 72px);
}

.afm-propose__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
}

.afm-kicker {
  margin: 0 0 8px;
  color: var(--afm-ink-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.afm-propose__intro h2 {
  margin: 0;
  font-family: var(--afm-display);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.afm-propose__lede {
  margin: 14px 0 0;
  max-width: 46ch;
  color: var(--afm-ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

/* The three steps. Numbered because they are ordered and because the second one — "aucun cercle
 * n'est publié automatiquement" — is the expectation the whole form depends on. */
.afm-steps {
  margin: 28px 0 0;
  border-top: 1px solid var(--afm-line);
}

.afm-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: baseline;
  gap: 4px 12px;
  padding-block: 14px;
  border-bottom: 1px solid var(--afm-line);
}

.afm-steps__num {
  grid-row: span 2;
  color: var(--afm-accent-soft);
  font-family: var(--afm-display);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.afm-steps strong {
  font-size: 14px;
  font-weight: 500;
}

.afm-steps small {
  grid-column: 2;
  color: var(--afm-ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Where a proposal goes ------------------------------------------------ */

.afm-propose__track {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius);
  background: var(--afm-sunken);
}

.afm-propose__track-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
}

.afm-propose__list li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--afm-line);
}

.afm-propose__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.afm .afm-propose__row :is(a, strong) {
  color: var(--afm-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.afm .afm-propose__row a:hover {
  color: var(--afm-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.afm-propose__list small {
  display: block;
  margin-top: 2px;
  color: var(--afm-ink-faint);
  font-size: 12px;
}

.afm-propose__empty {
  margin: 0;
  color: var(--afm-ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.afm-tag--good {
  background: #eaf3ee;
  color: var(--afm-good);
}

/* --- The form card -------------------------------------------------------- */

.afm-propose__form {
  padding: clamp(20px, 2.6vw, 32px);
}

.afm-field__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.afm .afm-field__foot .afm-help {
  margin-top: 6px;
}

/* The live counter. Grey while she is under the minimum the server enforces, ink once she is past
 * it — so the rule announces itself before it can reject her. */
.afm .afm-count {
  flex: none;
  color: var(--afm-ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.afm .afm-count.is-ok {
  color: var(--afm-good);
}

.afm .afm-help.is-error {
  color: var(--afm-bad);
  font-weight: 500;
}

.afm-field--modes {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.afm-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.afm-mode {
  position: relative;
  display: block;
  cursor: pointer;
}

.afm-mode input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.afm-mode__box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-sm);
  background: var(--afm-card);
  transition: border-color var(--afm-fast) var(--afm-ease), background var(--afm-fast) var(--afm-ease);
}

.afm-mode:hover .afm-mode__box {
  border-color: var(--afm-line-strong);
}

/* A surface and a tick, not a 12px dot. This choice decides whether every future member of the
 * circle is vetted by her or walks straight in. */
.afm-mode:has(input:checked) .afm-mode__box {
  border-color: var(--afm-accent);
  background: var(--afm-sunken);
}

.afm-mode:has(input:focus-visible) .afm-mode__box {
  outline: 2px solid var(--afm-focus);
  outline-offset: 2px;
}

.afm-mode__icon {
  flex: none;
  display: inline-flex;
  color: var(--afm-accent-soft);
}

.afm-mode__icon .afc-icon {
  width: 20px;
  height: 20px;
}

.afm-mode__text {
  flex: 1 1 auto;
  min-width: 0;
}

.afm-mode__text strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.afm-mode__text small {
  display: block;
  margin-top: 3px;
  color: var(--afm-ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.afm-mode__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--afm-line-strong);
  border-radius: 50%;
  color: transparent;
  transition: background var(--afm-fast) var(--afm-ease), border-color var(--afm-fast) var(--afm-ease),
    color var(--afm-fast) var(--afm-ease);
}

.afm-mode__mark .afc-icon {
  width: 11px;
  height: 11px;
  stroke-width: 2.6;
}

.afm-mode:has(input:checked) .afm-mode__mark {
  border-color: var(--afm-accent);
  background: var(--afm-accent);
  color: #fff;
}

.afm-propose__submit {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--afm-line-soft);
}

.afm-propose__status {
  margin: 0;
  flex: 1 1 200px;
  color: var(--afm-ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

/* --- Blocked, and done ----------------------------------------------------- */

.afm-propose__blocked,
.afm-propose__done {
  text-align: center;
}

.afm-propose__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--afm-good);
  color: #fff;
}

.afm-propose__seal .afc-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
}

/* --- The filter bar --------------------------------------------------------- */

.afm-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-block: clamp(24px, 3vw, 36px) 20px;
  padding: 14px 16px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius);
  background: var(--afm-card);
  box-shadow: var(--afm-shadow);
}

.afm-filters__search {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-inline: 14px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-pill);
  background: var(--afm-page);
}

.afm-filters__search:focus-within {
  border-color: var(--afm-accent-soft);
  box-shadow: 0 0 0 3px rgb(77 76 56 / 10%);
}

.afm-filters__icon {
  flex: none;
  display: inline-flex;
  color: var(--afm-ink-faint);
}

.afm-filters__icon .afc-icon {
  width: 16px;
  height: 16px;
}

.afm .afm-filters input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--afm-ink);
  font: inherit;
  font-size: 14px;
}

.afm .afm-filters input[type="search"]:focus {
  outline: none;
  box-shadow: none;
}

.afm-filters__field {
  flex: 0 1 180px;
  margin: 0;
  min-width: 0;
}

.afm .afm-filters select {
  width: 100%;
  min-height: 42px;
  padding: 8px 40px 8px 14px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-pill);
  background: var(--afm-page);
  color: var(--afm-ink);
  font: inherit;
  font-size: 14px;
  appearance: none;
  cursor: pointer;
}

.afm .afm-filters .afm-select .afc-icon {
  right: 14px;
}

.afm-filters__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--afm-line);
  border-radius: var(--afm-radius-pill);
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: border-color var(--afm-fast) var(--afm-ease), background var(--afm-fast) var(--afm-ease);
}

.afm-filters__toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--afm-accent);
  cursor: pointer;
}

.afm-filters__toggle:has(input:checked) {
  border-color: var(--afm-accent);
  background: var(--afm-sand);
}

.afm-filters__act {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.afm .afm-filters__clear {
  color: var(--afm-ink-soft);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.afm .afm-filters__clear:hover {
  color: var(--afm-bad);
}

/* The count is pushed to its own line at every width: it is a result, not a control, and sitting it
 * between two controls made it read as one. */
.afm-filters__count {
  flex-basis: 100%;
  margin: 0;
  color: var(--afm-ink-faint);
  font-size: 12px;
}

@media (max-width: 900px) {
  .afm-propose__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .afm-filters__field {
    flex: 1 1 150px;
  }
}