/* ==========================================================
   vopool - public stylesheet

   The subject is people who left Türkiye for a year and came back. The
   design borrows from what that looks like afterwards: an airmail edge, a
   route drawn between two points, a stamp. One bold element carries the
   page (the map); everything around it stays quiet.
   ========================================================== */

:root {
  /* vopool brand: the teal of the logo, between blue and green.
     The variables are still called blue and cyan because two hundred
     rules refer to them; the names are historical, the colours are not. */
  --brand: #0E9482;
  --brand-deep: #076B5E;
  --brand-soft: #E4F5F1;

  --blue: var(--brand);
  --blue-deep: var(--brand-deep);
  --magenta: #0A7D58;
  --cyan: #17B8B0;

  /* Surfaces: cool paper, not cream */
  --paper: #FFFFFF;
  --paper-2: #F1F7F5;
  --paper-3: #DEEEE9;

  --ink: #10203A;
  --ink-2: #47566E;
  --ink-3: #7C899E;
  --line: #D8E8E3;

  --map-land: #DBE9E4;

  --r-sm: 8px;
  --r: 14px;
  --wrap: 1240px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Bricolage Grotesque", var(--sans);
}

* { box-sizing: border-box; }

html, body { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--magenta); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .6rem;
}
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1rem; max-width: 68ch; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.block { padding-top: 3rem; padding-bottom: 3rem; }
.muted { color: var(--ink-2); }
.small { font-size: .86rem; }
.narrow { max-width: 680px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 200; background: #fff; padding: .5rem .9rem;
  border: 2px solid var(--blue); border-radius: var(--r-sm);
}

/* ---------- airmail edge: the one decorative device ---------- */

.airmail {
  height: 6px;
  background: repeating-linear-gradient(
    115deg,
    var(--blue) 0 14px,
    #fff 14px 26px,
    var(--magenta) 26px 40px,
    #fff 40px 52px
  );
}

/* ---------- staff bar ---------- */

.admin-bar {
  background: #0E1A2B; color: #D7E1EF; font-size: .78rem;
  position: sticky; top: 0; z-index: 120;
}
/* With the staff bar pinned, the site header parks underneath it. */
body.has-staff-bar .site-head { top: 34px; }
.admin-bar-inner {
  display: flex; align-items: center; gap: .4rem;
  min-height: 34px; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.admin-bar-inner::-webkit-scrollbar { display: none; }
.admin-bar-link {
  flex: none; color: #D7E1EF; padding: .2rem .55rem; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: .3rem;
}
.admin-bar-link:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.admin-bar-out:hover { background: rgba(226,75,74,.32); }
.admin-bar-user { flex: none; margin-left: auto; padding-left: .6rem; color: #8FA2BC; }
.abar-count {
  background: var(--magenta); color: #fff; border-radius: 999px;
  font-size: .68rem; padding: 0 .35rem; line-height: 1.5;
}

/* ---------- header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.93);
  border-bottom: 1px solid var(--line);
}
.head-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; display: block; }
.brand-name {
  font-family: var(--display); font-weight: 600; font-size: 1.12rem;
  color: var(--ink); letter-spacing: -0.02em;
}
.brand-name b { color: var(--blue); font-weight: 600; }

.head-nav { display: flex; align-items: center; gap: .4rem; }
.head-nav a {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--ink-2); font-size: .94rem; font-weight: 500;
  padding: .5rem .95rem; border-radius: 999px; background: var(--paper-2);
  border: 1px solid transparent;
}
.head-nav a:hover { background: #DEEEE9; color: var(--blue); text-decoration: none; }
.head-nav a[aria-current="page"] { background: var(--blue); color: #fff; }
.head-nav svg { width: 18px; height: 18px; flex: none; }

.head-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
/* only ever visible on a phone; the wide header carries the full set */
.head-right .phone-action { display: none; }

.lang-switch {
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; font-size: .76rem;
}
.lang-switch a, .lang-switch .lang-on { padding: .25rem .6rem; letter-spacing: .04em; }
.lang-switch a { color: var(--ink-2); }
.lang-switch a:hover { background: var(--paper-2); color: var(--blue); text-decoration: none; }
.lang-switch .lang-on { background: var(--blue); color: #fff; font-weight: 600; }


.tabbar { display: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .65rem 1.2rem; border-radius: 8px; border: 1.5px solid transparent;
  font-family: var(--sans); font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); color: #fff; }
.btn-accent { background: var(--magenta); color: #fff; }
.btn-accent:hover { background: #871966; color: #fff; }
.btn-outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-ghost { color: var(--ink-2); font-weight: 500; padding: .45rem .7rem; }
.btn-ghost:hover { background: var(--paper-2); color: var(--blue); }
.btn-sm { padding: .35rem .8rem; font-size: .84rem; }
.btn-danger:hover { border-color: #A32D2D; color: #A32D2D; }

/* ---------- home ---------- */

.hero { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.hero-grid {
  display: grid; gap: 2.5rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  padding-top: 3.5rem; padding-bottom: 3rem;
}
.hero h1 { max-width: 14ch; }
.hero-lead { font-size: 1.12rem; color: var(--ink-2); max-width: 46ch; }
.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero-map .map-box { background: transparent; }
.hero-map svg.europe { max-height: 430px; }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .6rem; list-style: none; margin: 2rem 0 0; padding: 0;
}
.stats li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: .95rem 1rem; text-align: center;
}
.stats strong {
  display: block; font-family: var(--display); font-size: 1.85rem; font-weight: 600;
  line-height: 1.05; color: var(--blue);
  font-variant-numeric: tabular-nums;  /* the digits do not jump while counting */
}
.stats span { display: block; font-size: .82rem; color: var(--ink-2); margin-top: .2rem; line-height: 1.3; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.section-head p { margin: 0; color: var(--ink-2); }

.country-strip { display: flex; flex-wrap: wrap; gap: .5rem; }
.country-pill {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: .92rem;
}
.country-pill b { font-weight: 600; color: var(--blue); }
.country-pill:hover { border-color: var(--blue); text-decoration: none; }
.country-pill.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.country-pill.on b { color: #fff; }

/* ---------- volunteer cards ---------- */

.people { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.person {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .55rem;
  position: relative;
}
/* The whole card is the link. Real links inside it sit above the overlay so
   they still work. */
.person .row-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.person > *:not(.row-link) { position: relative; z-index: 2; pointer-events: none; }
.person a:not(.row-link), .person button { pointer-events: auto; }
.person:hover { border-color: var(--blue); }
.person-top { display: flex; align-items: center; gap: .7rem; }
.person-name { font-weight: 600; color: var(--ink); line-height: 1.25; }
a.person-name:hover { color: var(--blue); text-decoration: none; }
.person-where { font-size: .87rem; color: var(--ink-2); }

.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cyan); color: #06263F; font-weight: 700; font-size: .9rem;
}
.avatar-lg { width: 76px; height: 76px; font-size: 1.5rem; }

.verified { color: var(--magenta); font-weight: 700; }

.trip-list { display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.trip { display: flex; align-items: baseline; gap: .45rem; font-size: .88rem; color: var(--ink-2); }
.trip b { color: var(--ink); font-weight: 600; }
.trip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #9AA8BD; transform: translateY(-1px);
}
.trip.current::before { background: #2E9E52; }

.state {
  align-self: flex-start; margin-top: auto; padding: .18rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
}
/* One colour per state, used everywhere a state appears: on a project right
   now is green, been and back is grey, getting ready is blue. */
.state-active { background: #E3F5E6; color: #1E7A3A; }
.state-alumni { background: var(--paper-2); color: var(--ink-2); }
.state-planning { background: #E3F0FC; color: #10538F; }

.chip {
  display: inline-block; padding: .22rem .65rem; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-2);
}
a.chip:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }

/* ---------- directory ---------- */

.dir-layout { display: grid; gap: 2rem; grid-template-columns: 268px minmax(0, 1fr); align-items: start; }
.dir-side {
  position: sticky; top: 5.5rem;
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem; background: var(--paper-2);
}
.dir-side h3 {
  font-family: var(--sans); font-size: .82rem; font-weight: 700; color: var(--ink-3);
  margin: 1.1rem 0 .4rem;
}
.dir-side h3:first-of-type { margin-top: 0; }
.dir-side input[type="search"], .dir-side select {
  width: 100%; padding: .55rem .7rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink);
}
.dir-side .btn { width: 100%; margin-top: 1rem; }
.dir-side .btn + .btn { margin-top: .5rem; }

.dir-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; }
.active-filters a.chip { background: var(--blue); border-color: var(--blue); color: #fff; }
.active-filters a.chip:hover { background: var(--blue-deep); color: #fff; }

.pager { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 2.2rem; }
.pager a { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); font-size: .9rem; }
.pager a.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.pager a:hover { border-color: var(--blue); text-decoration: none; }

.empty {
  border: 1px dashed var(--line); border-radius: var(--r);
  padding: 3rem 1.5rem; text-align: center; color: var(--ink-2); background: var(--paper-2);
}
.empty h2 { color: var(--ink); }

/* ---------- profile ---------- */

/* ---------- the profile header ----------
   Photo and numbers on the left, everything said about the person on the
   right: the shape every profile people already use has settled on, because
   it answers "who is this" and "how much have they done" in one glance. */

.profile-head {
  display: flex; gap: 1.8rem; align-items: flex-start; flex-wrap: wrap;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem;
}
.profile-id { display: flex; flex-direction: column; align-items: center; gap: .9rem; flex: none; }
.profile-who { flex: 1 1 320px; min-width: 0; }

.profile-head h1 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .2rem;
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.profile-sub { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.profile-sub .handle { font-family: var(--mono, monospace); font-size: .92rem; }
.profile-where { color: var(--ink-2); }
.profile-bio { margin: .7rem 0 0; white-space: pre-line; }
.profile-meta {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: .8rem 0 0; font-size: .86rem; color: var(--ink-3);
}
.profile-meta .seen-line, .profile-meta .member-no { margin: 0; font-size: .86rem; }
.profile-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }


.bio { white-space: pre-line; font-size: 1.05rem; }
.profile-foot { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--paper-3); }
.timeline li { position: relative; padding: 0 0 1.4rem .4rem; }
.timeline li::before {
  content: ""; position: absolute; left: -1.87rem; top: .45rem;
  width: 11px; height: 11px; border-radius: 50%; background: #9AA8BD; border: 2px solid #fff;
}
.timeline li.current::before { background: #2E9E52; }
.timeline .where { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.timeline .when { font-size: .87rem; color: var(--ink-3); }

/* ---------- map page ---------- */

.map-full { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 1.5rem 0 2rem; }
.map-tools { display: flex; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; }
.map-tools .on { background: var(--blue); border-color: var(--blue); color: #fff; }
.map-box { position: relative; }
svg.europe { display: block; width: 100%; height: auto; max-height: 640px; }
svg.europe path {
  fill: var(--map-land); stroke: var(--paper-2); stroke-width: .8;
  vector-effect: non-scaling-stroke; transition: fill .12s;
}
svg.europe path.has { cursor: pointer; }
svg.europe path.has:hover, svg.europe path.has:focus { stroke: var(--magenta); stroke-width: 1.6; outline: none; }
.map-tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--ink); color: #fff; font-size: .8rem;
  padding: .3rem .55rem; border-radius: var(--r-sm); white-space: nowrap;
}
.map-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .9rem; font-size: .84rem; color: var(--ink-2); }
.map-legend .sw { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: .4rem; vertical-align: -2px; }

/* ---------- forms ---------- */

.form label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink-2); margin: 1.2rem 0 .35rem; }
.form input[type="text"], .form input[type="email"], .form input[type="password"],
.form input[type="date"], .form input[type="file"], .form select, .form textarea {
  width: 100%; padding: .7rem .9rem; font: inherit; font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue); outline: none; }
.form textarea { resize: vertical; }
.hint { font-size: .84rem; color: var(--ink-3); margin: .35rem 0 0; }
.form-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.8rem; }
.two { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
label.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; color: var(--ink); margin: .7rem 0 0; }
label.check input { margin-top: .35rem; flex: none; }
.checks { display: grid; gap: .1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
fieldset.box { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.25rem 1.3rem; margin: 1.8rem 0 0; }
fieldset.box legend { font-weight: 600; padding: 0 .4rem; font-size: .95rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.or-line { display: flex; align-items: center; gap: .8rem; color: var(--ink-3); font-size: .8rem; margin: 1.4rem 0; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.photo-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.photo-fields { flex: 1 1 220px; }
.photo-current { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; }

.notice { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.25rem; margin: 1.2rem 0; background: var(--paper-2); }
.notice.ok { background: #E8F5E4; border-color: #BDE0B2; }
.notice.err { background: #FCEBEB; border-color: #F3C9C7; color: #9B2C2C; }
.notice ul { margin: 0; padding-left: 1.2rem; }
.notice p:last-child { margin-bottom: 0; }

.list { list-style: none; margin: 1.2rem 0; padding: 0; border-top: 1px solid var(--line); }
.list-row {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: .9rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.list-actions { display: flex; gap: .5rem; align-items: center; }
.list-actions form { margin: 0; }

.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.2rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }

/* ---------- footer ---------- */

/* One line: the mark, the links, the copyright, the rights notice. Small
   type, because none of it is what anybody came for. */
.site-foot { background: #0E1A2B; color: #C6D3E5; font-size: .8rem; }
.foot-grid {
  display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap;
  padding-top: .9rem; padding-bottom: .9rem;
}
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.foot-brand { display: inline-flex; align-items: center; gap: .45rem; flex: none; }
.foot-brand img { width: 20px; height: 20px; }
.foot-brand span { font-family: var(--display); font-weight: 600; font-size: .9rem; color: #fff; }
.foot-links a { color: #C6D3E5; white-space: nowrap; }
.foot-links a:hover { color: #fff; }
.foot-copy { color: #7E93B2; white-space: nowrap; }
.foot-bottom-right { margin-left: auto; color: #7E93B2; white-space: nowrap; }

@media (max-width: 720px) {
  .foot-grid { padding-top: .8rem; padding-bottom: .8rem; }
  .foot-bottom-right { margin-left: 0; }
}

/* ---------- mobile ---------- */

/* ---------- photo cropper ---------- */

.crop-stage { margin-top: 1.2rem; display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.crop-stage[hidden] { display: none; }
#photoCanvas {
  width: 240px; height: 240px; border-radius: 50%; cursor: grab;
  border: 3px solid var(--paper-3); touch-action: none; background: var(--paper-2);
}
#photoCanvas:active { cursor: grabbing; }
.crop-controls { flex: 1 1 220px; }
.crop-controls input[type="range"] { width: 100%; }
.crop-controls .btn { margin-top: .8rem; }

.tick { vertical-align: -3px; }

.handle-live { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.handle-live a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 2.5rem; padding-bottom: 2rem; gap: 1.8rem; }
  .dir-layout { grid-template-columns: 1fr; }
  .dir-side { position: static; }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
    box-sizing: border-box;
    /* room for the bar pinned at the bottom, plus the phone's own inset */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .wrap { padding: 0 1rem; }
  .block { padding-top: 1.8rem; padding-bottom: 1.8rem; }

  /* everything that can push a page sideways */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.3rem; }
  p, li, .bio, .share-url, .handle-live a { overflow-wrap: anywhere; }
  img, svg, canvas, table { max-width: 100%; }

  /* the strip stays: it carries the way to report a broken screen */
  .site-head { top: 0; }
  body.has-staff-bar .site-head { top: 0; }
  .admin-bar { position: static; }
  .head-inner { min-height: 54px; gap: .6rem; flex-wrap: nowrap; }
  .brand img { width: 30px; height: 30px; }
  .brand-name { font-size: 1rem; white-space: nowrap; }
  .head-nav { display: none; }
  .site-head { background: #fff; }
  .head-right { gap: .35rem; margin-left: auto; }
  .head-right .btn-ghost, .head-right .btn-primary { display: none; }
  /* the header keeps the doors: sign in and sign up, or sign out */
  .head-right .phone-action,
  .head-right .head-logout {
    display: inline-flex; padding: .32rem .6rem; font-size: .8rem; white-space: nowrap;
  }
  .head-right .head-logout { border: 1px solid var(--line); }
  .head-right .lang-switch { display: inline-flex; }

  /* the bar itself */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
    background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; padding: .5rem .2rem .55rem; color: var(--ink-3);
    font-size: .68rem; font-weight: 600; letter-spacing: .01em; text-decoration: none;
  }
  .tabbar a svg { width: 24px; height: 24px; }
  .tabbar a.on { color: var(--blue); }
  .tabbar a:hover { text-decoration: none; }

  /* hero and map */
  .hero-grid { grid-template-columns: 1fr; padding-top: 1.8rem; padding-bottom: 1.6rem; gap: 1.4rem; }
  .hero h1 { max-width: none; }
  .hero-map svg.europe { max-height: 300px; }
  .map-full { padding-top: 1rem; padding-bottom: 1.4rem; }
  .map-tools { gap: .35rem; }
  .map-tools .btn { flex: 1; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1.5rem; }
  .stats li { padding: .8rem .6rem; }
  .stats strong { font-size: 1.5rem; }
  .stats span { font-size: .76rem; }

  /* lists and cards */
  .people { grid-template-columns: 1fr; }
  .person-row { padding: .9rem 1rem; gap: .8rem; flex-wrap: wrap; }
  .person-row-actions { flex-direction: row; width: 100%; }
  .person-row-actions .btn { flex: 1; }
  .avatar-md { width: 48px; height: 48px; font-size: 1rem; }
  .country-pill { font-size: .86rem; padding: .35rem .7rem; }

  /* directory filters collapse into their own panel */
  .dir-layout { grid-template-columns: 1fr; gap: 1rem; }
  .dir-side { position: static; padding: 1rem; }
  .dir-side h3 { margin-top: .9rem; }

  /* profile */
  .profile-grid, .edit-grid, .contact-grid, .doc-layout { grid-template-columns: 1fr; gap: 1.4rem; }
  /* On a phone: photo and numbers share the top line, the name and the rest
     go underneath at full width, and the buttons span the screen. */
  .profile-head { gap: 1rem; flex-direction: column; align-items: stretch; padding-bottom: 1.1rem; }
  .profile-id { flex-direction: row; align-items: center; gap: 1.1rem; }
  .profile-head h1 { font-size: 1.35rem; }
  .avatar-lg { width: 72px; height: 72px; font-size: 1.3rem; flex: none; }
  .profile-who { flex: 1 1 auto; }
  .profile-actions { width: 100%; margin-top: .9rem; }
  .profile-actions .btn { flex: 1; justify-content: center; }
  .facts { gap: 1.2rem; }
  .facts strong { font-size: 1.4rem; }
  .timeline { padding-left: 1.1rem; }

  /* forms */
  .form input, .form select, .form textarea,
  .modal-body input, .modal-body textarea { font-size: 16px; } /* no zoom on focus */
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
  fieldset.box { padding: .9rem 1rem 1.1rem; }
  .checks { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }

  .modal-box { padding: 1.1rem; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  #photoCanvas { width: 220px; height: 220px; }
  .crop-stage { justify-content: center; }

  /* footer */
  .foot-grid { padding-top: 1.2rem; padding-bottom: 1.2rem; gap: .8rem; flex-direction: column; align-items: flex-start; }
  .foot-links { gap: .3rem .9rem; }
  .foot-bottom { flex-direction: column; gap: .35rem; padding-bottom: 1.4rem; }
  .logo-strip-inner { gap: 1.2rem; padding: 1rem; }
  .logo-strip img { height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- top strip: the programme itself lives elsewhere ---------- */

/* The strip that used to sit under the header now sits above the footer. */
.foot-strip { background: var(--blue); color: #DCE8F7; font-size: .82rem; }
.foot-strip-inner { display: flex; align-items: center; gap: .6rem; min-height: 34px; flex-wrap: wrap; }
.foot-strip a { color: #fff; font-weight: 600; }
.foot-strip a::after { content: " \2192"; }
.foot-strip .report-open { color: #fff; }

/* ---------- profile ---------- */

.facts { display: flex; gap: 2.2rem; list-style: none; margin: 0 0 2rem; padding: 0; flex-wrap: wrap; }
.facts strong { display: block; font-family: var(--display); font-size: 1.8rem; line-height: 1; color: var(--blue); }
.facts span { font-size: .86rem; color: var(--ink-2); }

.profile-grid, .edit-grid, .contact-grid {
  display: grid; gap: 2.5rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) 300px;
}
.profile-side { display: flex; flex-direction: column; gap: 1rem; }
.side-card { border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; background: var(--paper-2); }
.side-card h3 { font-family: var(--sans); font-size: .84rem; font-weight: 700; color: var(--ink-3); margin-bottom: .6rem; }
.side-card .btn { margin-top: .8rem; }
.side-card .trip-list { margin-bottom: .4rem; }
.share-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; color: var(--blue); margin: 0; word-break: break-all; }
.handle { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--blue); }

.handle-field { display: flex; align-items: center; gap: .4rem; }
.handle-field span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-3); font-size: 1.05rem; }
.handle-field input { flex: 1; }

/* ---------- partner logos ---------- */

.logo-strip { background: var(--paper-2); margin-top: 3rem; }
/* The stripe is the site's one recurring mark, so the footer is bracketed by
   it rather than separated from the page by empty space. */
.logo-strip + .airmail, .airmail + .logo-strip { margin: 0; }
.logo-strip-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; flex-wrap: wrap; padding: .9rem 1.5rem;
}
.logo-strip img { height: 32px; width: auto; max-width: 150px; object-fit: contain; }

@media (max-width: 960px) {
  .profile-grid, .edit-grid, .contact-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 720px) {
  .facts { gap: 1.4rem; }
  .facts strong { font-size: 1.5rem; }
  .logo-strip-inner { gap: 1.4rem; padding: 1.2rem 1rem; }
  .logo-strip img { height: 30px; }
  .foot-strip-inner { min-height: 30px; font-size: .78rem; }
}

/* ---------- directory rows ---------- */

.person-rows { display: flex; flex-direction: column; gap: .8rem; }
.person-row {
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 1.1rem 1.2rem;
}
.person-row:hover { border-color: var(--blue); }
.person-row-photo { flex: none; }
.person-row-main { flex: 1 1 auto; min-width: 0; }
.person-row-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.person-row-head .state { margin-top: 0; }
.person-row .person-where { margin: .25rem 0 .5rem; font-size: .9rem; }
.person-row .trip-list { gap: .2rem; }
.person-row .trip .when { color: var(--ink-3); font-size: .84rem; }
.person-row-actions { display: flex; flex-direction: column; gap: .4rem; flex: none; }
.avatar-md { width: 60px; height: 60px; font-size: 1.15rem; }

/* ---------- static pages ---------- */

.page-hero { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 2.6rem 0 2rem; }
.page-hero h1 { max-width: 20ch; margin-bottom: .3rem; }
.doc-layout { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
.doc-link { display: block; padding: .3rem 0; }
.prose { font-size: 1.05rem; line-height: 1.75; }
.prose h2 {
  font-size: 1.3rem; margin: 2.4rem 0 .8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.prose p, .prose li { max-width: 68ch; }
.prose ul { padding-left: 1.2rem; list-style: none; }
.prose ul li { position: relative; padding-left: 1rem; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
}
.prose strong { color: var(--ink); }

@media (max-width: 960px) {
  .doc-layout { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 720px) {
  .person-row { flex-wrap: wrap; }
  .person-row-actions { flex-direction: row; width: 100%; }
  .person-row-actions .btn { flex: 1; }
  .avatar-md { width: 48px; height: 48px; font-size: 1rem; }
}

/* ---------- dialog ---------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 200; background: rgba(16, 32, 58, .55);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.modal-backdrop[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.modal-box {
  background: #fff; border-radius: var(--r); padding: 1.6rem;
  width: 100%; max-width: 620px; max-height: 92vh; overflow: auto;
}
.modal-box h3 { font-family: var(--display); font-size: 1.2rem; margin-bottom: 1rem; }
.modal-box input[type="file"] {
  width: 100%; padding: .7rem .9rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; }
.form-label-plain { font-size: .88rem; font-weight: 600; color: var(--ink-2); margin-bottom: .4rem; }

/* ---------- profile head ---------- */

.profile-sub { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.profile-sub .handle { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 720px) {
  .modal-box { padding: 1.1rem; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  #photoCanvas { width: 200px; height: 200px; }
  .crop-stage { justify-content: center; }
}

.channel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.channel-list li { display: flex; gap: .5rem; align-items: baseline; justify-content: space-between; font-size: .9rem; }
.channel-name { color: var(--ink-3); flex: none; }
.channel-list a, .channel-list span:last-child { word-break: break-all; text-align: right; }

/* ---------- directory tabs and paging ---------- */

.status-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.status-tab {
  padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2); font-size: .92rem; font-weight: 500;
}
.status-tab:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.status-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.pager-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: 2rem;
}
.pager { margin-top: 0; }
.per-page { display: flex; align-items: center; gap: .3rem; font-size: .86rem; color: var(--ink-3); }
.per-page a { padding: .3rem .6rem; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); }
.per-page a.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.per-page a:hover { text-decoration: none; border-color: var(--blue); }

@media (max-width: 720px) {
  .status-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: .2rem; }
  .status-tabs::-webkit-scrollbar { display: none; }
  .status-tab { flex: none; }
  .pager-bar { flex-direction: column; align-items: stretch; gap: .8rem; }
  .pager { justify-content: center; }
  .per-page { justify-content: center; }
}

/* ---------- flags ---------- */

.flag {
  width: 20px; height: 15px; border-radius: 2px; object-fit: cover;
  margin-right: .4rem; vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(16,32,58,.12);
}
.chip .flag, .country-pill .flag { margin-right: .35rem; }

/* ---------- sign-in card ---------- */

.auth-card {
  max-width: 460px; margin: 1rem auto 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); padding: 2rem 1.8rem 1.6rem;
  position: relative; overflow: hidden;
}
.auth-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: repeating-linear-gradient(115deg, var(--blue) 0 12px, #fff 12px 22px, var(--magenta) 22px 34px, #fff 34px 44px);
}
.auth-card h1 { font-size: 1.7rem; margin-top: .4rem; }
.auth-card .form-actions { margin-top: 1.4rem; }
.auth-card .btn { width: 100%; }
.auth-foot {
  display: flex; flex-direction: column; gap: .5rem; margin-top: 1.4rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-2);
}

/* ---------- filters as a disclosure ---------- */

.dir-summary {
  display: none; cursor: pointer; font-weight: 600; color: var(--ink);
  padding: .2rem 0; list-style: none;
}
.dir-summary::-webkit-details-marker { display: none; }
.dir-summary::after { content: " +"; color: var(--ink-3); }
details[open] > .dir-summary::after { content: " -"; }

/* ---------- profile cards with the stripe ---------- */

.side-card {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--line);
}
.side-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: repeating-linear-gradient(180deg, var(--blue) 0 10px, var(--cyan) 10px 20px, var(--magenta) 20px 30px);
  opacity: .85;
}
.side-card { padding-left: 1.5rem; }

.timeline li { padding-bottom: 1.6rem; }
.timeline .where { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }

@media (max-width: 720px) {
  main > section:first-child { padding-top: 1.2rem; }
  .site-foot { margin-top: 0; }
  .logo-strip { margin-top: 2rem; }

  .dir-summary { display: block; }
  .dir-side:not([open]) { padding-bottom: .9rem; }
  .dir-side[open] { padding-bottom: 1rem; }

  .auth-card { padding: 1.5rem 1.2rem 1.2rem; margin-top: .5rem; }
  .side-card { padding-left: 1.3rem; }
}

/* ---------- account rows ---------- */

.channel-row {
  display: grid; gap: .5rem; align-items: center; margin-bottom: .6rem;
  grid-template-columns: 150px minmax(0, 1fr) 140px auto auto;
}
.channel-row select, .channel-row input[type="text"] {
  width: 100%; padding: .55rem .7rem; font: inherit; font-size: .93rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
}
.channel-row label.check { margin: 0; white-space: nowrap; }
.channel-row .btn { white-space: nowrap; }

.contact-bar {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 1rem 1.2rem 1rem 1.5rem; margin: 0 0 1.6rem; position: relative; overflow: hidden;
}
.contact-bar::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: repeating-linear-gradient(180deg, var(--blue) 0 10px, var(--cyan) 10px 20px, var(--magenta) 20px 30px);
}
.contact-bar h3 { font-family: var(--sans); font-size: .82rem; font-weight: 700; color: var(--ink-3); margin-bottom: .6rem; }
.contact-bar .channel-buttons { gap: .5rem; }

@media (max-width: 720px) {
  .channel-row { grid-template-columns: 1fr; gap: .35rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
}

/* ---------- inbox ---------- */

.thread-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.thread {
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--line); background: #fff; color: var(--ink);
}
.thread:last-child { border-bottom: 0; }
.thread:hover { background: var(--paper-2); text-decoration: none; }
.thread.unread { background: #F4F8FD; }
.thread-main { flex: 1 1 auto; min-width: 0; display: block; }
.thread-top { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.thread-top .when { font-size: .8rem; color: var(--ink-3); flex: none; }
.thread-excerpt {
  display: block; color: var(--ink-2); font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread.unread .thread-excerpt { color: var(--ink); font-weight: 500; }
.thread-count {
  flex: none; background: var(--magenta); color: #fff; border-radius: 999px;
  font-size: .75rem; font-weight: 700; padding: .1rem .45rem;
}

.thread-view { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.thread-head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.bubbles { display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem 1.1rem; background: var(--paper-2); }
.bubble {
  max-width: 70%; background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: .7rem .9rem;
}
.bubble p { margin: 0 0 .3rem; white-space: pre-line; }
.bubble .when { font-size: .74rem; color: var(--ink-3); }
.bubble.mine {
  align-self: flex-end; background: var(--blue); border-color: var(--blue); color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.bubble.mine .when { color: #C7DAF2; }

.reply { padding: 1rem 1.1rem 1.1rem; }
.reply textarea { width: 100%; }
.reply .form-actions { margin-top: .8rem; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.tab-icon { position: relative; display: inline-flex; }
.tab-dot {
  position: absolute; top: -4px; right: -8px; background: var(--magenta); color: #fff;
  border-radius: 999px; font-size: .62rem; font-weight: 700; padding: 0 .28rem; line-height: 1.5;
}

@media (max-width: 720px) {
  .bubble { max-width: 85%; }
  .thread { padding: .8rem .9rem; }
}

/* ---------- travel ---------- */

.travel-picker { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.travel-picker select {
  flex: 1 1 240px; padding: .6rem .8rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
}
.travel-chip { display: inline-flex; align-items: center; gap: .25rem; padding-right: .35rem; }
.travel-remove {
  border: 0; background: none; cursor: pointer; color: var(--ink-3);
  font-size: 1rem; line-height: 1; padding: 0 .2rem;
}
.travel-remove:hover { color: var(--magenta); }

.person-map { margin-top: 2.5rem; }
.person-map h2 { margin-bottom: 1rem; }
svg.world { display: block; width: 100%; height: auto; }
svg.world path {
  fill: var(--paper-3); stroke: #fff; stroke-width: .35;
  vector-effect: non-scaling-stroke;
}
svg.world path.marked { stroke: #fff; stroke-width: .5; }

/* ---------- country search box ---------- */

.combo { position: relative; flex: 1 1 260px; }
.combo input {
  width: 100%; padding: .7rem .9rem; font: inherit; font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
}
.combo input:focus { border-color: var(--blue); outline: none; }
.combo-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: .25rem; list-style: none; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: 0 10px 24px rgba(16,32,58,.12); max-height: 280px; overflow: auto;
}
.combo-list li {
  padding: .5rem .6rem; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; gap: .1rem;
}
.combo-list li.on { background: var(--paper-2); }
.combo-list[hidden] { display: none; }

.travel-heading { font-size: 1.2rem; margin-top: 2.2rem; }
.travel-chips { margin-top: .4rem; }

/* ---------- staff badge, read receipts, clickable rows ---------- */

.tick-staff { filter: none; }
.badge-staff {
  display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem;
  border-radius: 999px; background: #FDF0D0; color: #8A6A10; border: 1px solid #F0DCA0;
  font-size: .72rem; font-weight: 700;
}

.bubble .receipt { margin-left: .4rem; font-weight: 700; color: #7FB4F0; }
.bubble .receipt.read { color: #9FE0FF; }

.person-row { position: relative; }
.person-row .row-link { position: absolute; inset: 0; z-index: 1; }
.person-row .person-row-head a,
.person-row .person-row-actions a,
.person-row .person-row-photo { position: relative; z-index: 2; }

/* ---------- contact buttons ---------- */

.channel-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.channel-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2);
}
.channel-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--paper-2); text-decoration: none; }
.channel-btn svg { width: 20px; height: 20px; flex: none; }

.edit-map { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem; background: var(--paper-2); }
.edit-map svg.world { max-height: 260px; }

/* ---------- join call ---------- */

.join-cta {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  background: var(--blue); color: #fff; border-radius: var(--r-lg, 20px);
  padding: 2.2rem 2.4rem; position: relative; overflow: hidden;
}
.join-cta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: repeating-linear-gradient(115deg, #fff 0 14px, var(--cyan) 14px 26px, #fff 26px 40px, var(--magenta) 40px 52px);
}
.join-text { flex: 1 1 320px; }
.join-cta h2 { color: #fff; margin-bottom: .5rem; }
.join-cta p { color: #D6E4F7; max-width: 52ch; }
.join-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.3rem 0 0; }
.join-cta .btn-outline { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.join-cta .btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.join-mark { flex: none; opacity: .9; }
.join-mark img { width: 64px; height: 64px; }

@media (max-width: 720px) {
  .join-cta { padding: 1.6rem 1.3rem; gap: 1.2rem; }
  .join-mark { display: none; }
  .join-actions .btn { flex: 1; }
}

.thread-wrap { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.thread-wrap:last-child { border-bottom: 0; }
.thread-wrap .thread { flex: 1 1 auto; border-bottom: 0; }
.thread-delete { display: flex; align-items: center; padding-right: .5rem; background: #fff; flex: none; }
.thread-delete-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: #A32D2D; cursor: pointer; padding: 0;
}
.thread-delete-btn:hover { background: #FFF5F5; border-color: #A32D2D; color: #8A2525; }
.thread-wrap:hover .thread-delete { background: var(--paper-2); }
.thread-delete button { font-size: 1.2rem; line-height: 1; color: var(--ink-3); }
.thread-delete button:hover { color: var(--magenta); }
.thread-head-actions { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.thread-head-actions form { margin: 0; }

.foot-bottom-right a { color: #93A7C2; }
.foot-bottom-right a:hover { color: #fff; }
.foot-dot { margin: 0 .35rem; opacity: .6; }

.channel-row { grid-template-columns: 150px minmax(0, 1fr) 140px auto auto; }
.channel-move { display: inline-flex; gap: .25rem; }
.channel-move .btn { padding: .35rem .55rem; }

/* ---------- account screen ---------- */

.account-option {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 1.4rem 1.5rem; margin-bottom: 1.2rem;
}
.account-option h2 { font-size: 1.15rem; }
.account-option ul { padding-left: 1.1rem; margin: 0 0 1rem; }
.account-option li { margin-bottom: .25rem; }
.account-option.danger { border-color: #F3C9C7; background: #FFFBFB; }
.btn-danger-solid { background: #A32D2D; color: #fff; }
.btn-danger-solid:hover { background: #872424; color: #fff; }

/* ---------- bio and the visibility mark ---------- */

.profile-bio {
  margin: .5rem 0 0; max-width: 56ch; color: var(--ink);
  font-size: 1rem; line-height: 1.55; white-space: pre-line;
}
.vis-mark {
  display: inline-flex; align-items: center; cursor: help;
  vertical-align: -3px; color: var(--ink-3);
}
.vis-mark.vis-public { color: var(--blue); }
.vis-mark.vis-members { color: var(--ink-3); }
.vis-mark.vis-hidden { color: var(--magenta); }
.person-row .vis-mark, .person .vis-mark { font-size: .85rem; }

/* ---------- the frosted view for visitors ---------- */

.teaser { position: relative; border-radius: var(--r); overflow: hidden; }
.teaser-cards {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  filter: blur(4px); opacity: .7; pointer-events: none; user-select: none;
}
.teaser-person { min-height: 160px; }
.teaser-card {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; min-height: 150px;
}
.teaser-top { display: flex; align-items: center; gap: .7rem; }
.teaser-lines { flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.teaser-line { display: block; height: 10px; border-radius: 5px; background: var(--paper-3); }
.teaser-line.w35 { width: 35%; }
.teaser-line.w45 { width: 45%; }
.teaser-line.w60 { width: 60%; }
.teaser-line.w70 { width: 70%; }
.teaser-line.w80 { width: 80%; }

.teaser-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: .3rem;
  padding: 2rem 1.5rem; background: rgba(255,255,255,.72);
}
.teaser-overlay h2 { max-width: 22ch; }
.teaser-overlay p { color: var(--ink-2); max-width: 44ch; margin: 0; }
.teaser-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem !important; }

@media (max-width: 720px) {
  .teaser-cards { grid-template-columns: 1fr; }
  .teaser-card:nth-child(n+4), .teaser-person:nth-child(n+4) { display: none; }
  .teaser-overlay { padding: 1.5rem 1rem; }
  .teaser-actions .btn { flex: 1; }
}

/* ---------- edit screen: one type scale on both sides ---------- */

.photo-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.d-none { display: none; }

fieldset.box legend {
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  color: var(--ink-3); padding: 0 .4rem;
}
fieldset.box .timeline { margin-top: .4rem; }
fieldset.box .timeline .where { font-family: var(--sans); font-size: 1rem; }

.profile-side .side-card h3 {
  font-family: var(--sans); font-size: .82rem; font-weight: 700; color: var(--ink-3);
}
.profile-side .side-card .btn { width: 100%; }
.profile-side .side-card label.check span strong { font-weight: 600; font-size: .95rem; }

/* ---------- the filter panel as a real button on a phone ---------- */

.dir-summary {
  display: none; align-items: center; justify-content: space-between; gap: .6rem;
  cursor: pointer; list-style: none; font-weight: 600; color: var(--ink);
  padding: .75rem .9rem; margin: -1rem -1rem 0; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line);
}
.dir-summary::after { content: ""; }
.dir-summary-state { font-weight: 500; font-size: .85rem; color: var(--blue); }
details[open] > .dir-summary { margin-bottom: 1rem; border-radius: var(--r) var(--r) 0 0; }

@media (max-width: 720px) {
  .dir-summary { display: flex; }
  .dir-side { padding: 1rem; background: transparent; border: 0; }
  .dir-side:not([open]) { padding-bottom: 0; }
  .photo-buttons .btn { flex: 1; }
}

/* ---------- sign-in providers ---------- */

.provider-buttons { display: flex; flex-direction: column; gap: .6rem; margin: 1.2rem 0; }
.btn-provider {
  justify-content: flex-start; gap: .8rem; padding: .8rem 1.1rem;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-weight: 600; border-radius: var(--r-sm); width: 100%;
}
.btn-provider:hover { border-color: var(--blue); background: var(--paper-2); color: var(--ink); text-decoration: none; }
.btn-provider img { width: 20px; height: 20px; flex: none; }

.password-door { margin-top: .4rem; }
.password-door > summary {
  cursor: pointer; list-style: none; color: var(--ink-2); font-size: .92rem;
  padding: .5rem 0;
}
.password-door > summary::-webkit-details-marker { display: none; }
.password-door > summary::after { content: " +"; color: var(--ink-3); }
.password-door[open] > summary::after { content: " -"; }

.btn.is-busy { opacity: .7; cursor: progress; }

/* ---------- starting a conversation by handle ---------- */

.new-thread {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: .9rem 1rem; margin-bottom: 1rem;
}
.new-thread-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .45rem; }
.new-thread-row { display: flex; gap: .5rem; }
.new-thread-row input { flex: 1; margin: 0; }
.new-thread .hint { margin: .5rem 0 0; }

/* ---------- search field, used in the inbox and the dialog ---------- */

.search-field { position: relative; display: flex; align-items: center; margin: 0; flex: 1; min-width: 0; }
.search-field .search-icon {
  position: absolute; left: .85rem; color: var(--ink-3); pointer-events: none;
}
.search-field input {
  width: 100%; margin: 0; padding: .7rem 2.4rem .7rem 2.7rem;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: .95rem; color: var(--ink);
}
.search-field input:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24,95,165,.12);
}
.search-field input::-webkit-search-cancel-button { display: none; }
.search-clear {
  position: absolute; right: .7rem; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-3); color: var(--ink-2); font-size: 1.05rem; line-height: 1;
}
.search-clear:hover { background: var(--line); color: var(--ink); text-decoration: none; }

/* ---------- inbox toolbar ---------- */

.inbox-tools { display: flex; gap: .7rem; align-items: center; margin-bottom: 1.1rem; }
.inbox-tools .btn { flex: none; gap: .4rem; }

/* ---------- the new-message dialog ---------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 1200; background: rgba(16,32,58,.45);
  display: flex; align-items: center; justify-content: center; padding: 4vh 1rem;
  backdrop-filter: blur(2px);
  overflow: hidden;
}
.modal-backdrop[hidden] { display: none; }
body.modal-open { overflow: hidden; }

.modal-box {
  background: #fff; border-radius: var(--r-lg, 20px); width: 100%; max-width: 460px;
  box-shadow: 0 20px 60px rgba(16,32,58,.28); position: relative;
  display: flex; flex-direction: column; max-height: 92vh; overflow: hidden;
}
/* the airmail stripe the rest of the site uses, so the dialog belongs here */
.modal-box::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: repeating-linear-gradient(115deg, var(--blue) 0 14px, #fff 14px 26px,
    var(--magenta) 26px 40px, #fff 40px 52px);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.3rem .8rem; flex: none;
}
.modal-head h2 { font-size: 1.15rem; margin: 0; }
.modal-close {
  border: 0; background: none; font-size: 1.7rem; line-height: 1; color: var(--ink-3);
  cursor: pointer; padding: 0 .2rem;
}
.modal-close:hover { color: var(--ink); }
.modal-body {
  padding: 0 1.3rem 1.4rem; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.modal-body > .hint { margin: .5rem 0 0; }
.modal-body label { display: block; font-weight: 600; font-size: .9rem; margin: 1rem 0 .4rem; }
.modal-body textarea,
.modal-body input[type="text"] {
  width: 100%; margin: 0; padding: .75rem .9rem; font: inherit; font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink);
  display: block;
}
.modal-body textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.modal-body textarea:focus {
  border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(24,95,165,.12);
}
/* The browser paints an empty required field red on focus. Nobody has failed
   at anything yet: the warning only makes sense once they have left it empty. */
.modal-body textarea:invalid { box-shadow: none; }
.modal-body .search-field input { padding-left: 2.7rem; border-radius: 999px; }
.modal-actions {
  display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem;
  position: sticky; bottom: 0; background: #fff; padding: .8rem 0 .2rem;
}

.people-results { list-style: none; margin: .8rem 0 0; padding: 0; max-height: 280px; overflow-y: auto; }
.people-results li + li { margin-top: .2rem; }
.people-item {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
  border: 1px solid transparent; background: none; padding: .55rem .6rem;
  border-radius: var(--r-sm); cursor: pointer; font: inherit; color: var(--ink);
}
.people-item:hover { background: var(--paper-2); border-color: var(--line); }
.people-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.people-item span { display: flex; flex-direction: column; min-width: 0; }
.people-item strong { font-weight: 600; font-size: .95rem; }
.people-sub { color: var(--ink-3); font-size: .85rem; }
.people-empty { color: var(--ink-3); font-size: .9rem; padding: .7rem .6rem; }

.chosen-person {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; margin: 1rem 0 0;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.chosen-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.chosen-person .btn { margin-left: auto; flex: none; }

@media (max-width: 720px) {
  .inbox-tools { flex-wrap: wrap; }
  .inbox-tools .btn { width: 100%; justify-content: center; }
  /* Full screen on a phone: the dialog is the screen, and its body is the one
     thing that scrolls. dvh rather than vh, so the browser's own bars do not
     push the save button out of reach. */
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal-box { max-width: none; border-radius: 0; max-height: 100vh; max-height: 100dvh; height: 100dvh; }
  .modal-actions .btn { flex: 1; }
  .modal-actions a.btn { text-align: center; }
}

/* ---------- inviting another volunteer ---------- */

.invite-link, .invite-send {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 1.3rem 1.4rem; margin-bottom: 1.1rem;
}
.invite-link label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .45rem; }
.invite-link-row { display: flex; gap: .5rem; }
.invite-link-row input {
  flex: 1; min-width: 0; margin: 0; padding: .7rem .9rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink);
}
.invite-link-row .btn { flex: none; }
.invite-share { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.invite-send h2 { font-size: 1.05rem; margin-bottom: .2rem; }
.invite-send .form { margin-top: .8rem; }
.invite-send .invite-link-row input { background: #fff; }
.invite-count { color: var(--ink-2); }

@media (max-width: 720px) {
  .invite-link-row { flex-direction: column; }
  .invite-share .btn { flex: 1; }
}

.nav-invite { gap: .4rem; }
.nav-invite svg { flex: none; }

.invite-strip {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--paper-2);
  padding: 1.3rem 1.5rem;
}
.invite-strip h2 { font-size: 1.1rem; margin-bottom: .2rem; }
.invite-strip p { color: var(--ink-2); margin: 0; max-width: 54ch; }
.invite-strip .btn { margin-left: auto; flex: none; }

@media (max-width: 720px) {
  .invite-strip .btn { margin-left: 0; }
  .nav-invite span { display: none; }
}

/* ---------- the badge card, same on both profile screens ---------- */

.badge-card { text-align: center; border-color: var(--blue); }
.badge-card img { margin: 0 auto .5rem; display: block; }
.badge-card h3 { color: var(--ink); font-size: .95rem; }
.badge-card .hint { margin-bottom: .9rem; }
.badge-card .btn { width: 100%; }
@media (max-width: 720px) { .badge-card .btn { width: auto; } }
.badge-card.is-verified { border-color: var(--line); }

.badge-card.is-waiting { border-color: var(--line); border-style: dashed; }
.badge-card.is-waiting img { opacity: .5; filter: grayscale(1); }

/* ---------- my ESC projects ---------- */

.projects-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem; align-items: start;
}
.projects-heading { font-size: 1rem; color: var(--ink-2); margin-bottom: .8rem; }
.projects-form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.5rem; position: sticky; top: 1.5rem;
}
.projects-form h2 { font-size: 1.1rem; margin-bottom: .9rem; }
.projects-form .form { margin: 0; }
.project-row strong img { margin-right: .4rem; vertical-align: -2px; }
.scope-note {
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--paper-2);
  padding: 1rem 1.1rem; margin-top: 1.2rem;
}
.scope-note p { margin: 0; }
.scope-note p + p { margin-top: .35rem; color: var(--ink-2); }

@media (max-width: 860px) {
  .projects-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .projects-form { position: static; }
}

/* ---------- my ESC projects ---------- */

.projects-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.projects-count { color: var(--ink-2); font-weight: 600; }
.projects-bar .btn { gap: .4rem; }

.project-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.project-card {
  display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--r); background: #fff; padding: 1.1rem 1.3rem;
}
.project-card.is-current { border-left-color: var(--green, #2E9E52); }
.project-main { flex: 1; min-width: 220px; }
.project-card h2 { font-size: 1.05rem; margin: 0; }
.project-card h2 img { margin-right: .45rem; vertical-align: -2px; }
.project-org { color: var(--ink-2); margin-top: .1rem; }
.project-dates { color: var(--ink-2); font-size: .9rem; margin-top: .35rem; }
.project-now {
  display: inline-block; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px;
  background: #E7F5EC; color: #226E3C; font-size: .8rem; font-weight: 600;
}
.project-len { margin-left: .45rem; color: var(--ink-3); }
.project-field { font-size: .88rem; color: var(--ink-3); margin-top: .25rem; }
.project-note { margin: .5rem 0 0; font-size: .92rem; }
.project-actions { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.project-actions form { margin: 0; }
.project-delete {
  border: 1px solid var(--line); background: #fff; color: #A32D2D;
}
.project-delete:hover { border-color: #A32D2D; background: #FFF5F5; color: #8A2525; }

.scope-note {
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--paper-2);
  padding: 1rem 1.2rem; margin-top: 1.5rem;
}
.scope-note p { margin: 0; }
.scope-note p + p { margin-top: .35rem; color: var(--ink-2); }

#projectModal .modal-box { max-width: 540px; }
#projectModal .modal-body .form { margin: 0; }
#projectModal .two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

@media (max-width: 720px) {
  .project-actions { margin-left: 0; width: 100%; }
  .projects-bar .btn { width: 100%; justify-content: center; }
  #projectModal .two { grid-template-columns: 1fr; }
}

/* ---------- eligibility card ---------- */

.eligibility-card .elig-state { font-weight: 600; margin: 0 0 .4rem; }
.elig-state.is-ok { color: #226E3C; }
.elig-state.is-over { color: var(--ink-2); }
.elig-state.is-soon { color: var(--blue); }
.elig-count {
  display: flex; align-items: baseline; gap: .4rem; margin: .5rem 0 .2rem;
  padding: .7rem .8rem; background: var(--paper-2); border-radius: var(--r-sm);
}
.elig-count strong { font-size: 1.5rem; line-height: 1; color: var(--blue); }
.elig-count span { font-size: .85rem; color: var(--ink-2); }
.elig-months { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .9rem; }
.elig-months p { margin: 0; color: var(--ink-2); }
.elig-months p + p { margin-top: .2rem; }
.elig-months strong { color: var(--ink); }
.elig-disclaimer { margin-top: .7rem; font-size: .8rem; }

/* ---------- fields inside a dialog ---------- */

.modal-body input[type="date"],
.modal-body input[type="email"],
.modal-body input[type="url"],
.modal-body select {
  width: 100%; margin: 0; padding: .7rem .9rem; font: inherit; font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink);
  display: block;
}
.modal-body input[type="date"]:focus,
.modal-body select:focus {
  border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(24,95,165,.12);
}
.modal-body .field-block { margin-top: 1rem; }
.modal-body .field-block label { margin-top: 0; }
.modal-body .field-block .hint { margin: .35rem 0 0; }
.modal-body label.check {
  display: flex; align-items: flex-start; gap: .55rem; font-weight: 500;
  margin: 1rem 0 0; padding: .7rem .8rem; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.modal-body label.check input { width: auto; margin: .2rem 0 0; flex: none; }
.modal-body label.check span { font-weight: 500; }

.modal-box.modal-small { max-width: 380px; }


/* ---------- the footer, on app-like screens ---------- */

@media (max-width: 720px) {
  .logo-strip.hide-on-phone,
  .logo-strip.hide-on-phone + .airmail { display: none; }
}

.seen-line { color: var(--ink-3); font-size: .88rem; margin: .1rem 0 0; }

.rules-accept { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.rules-accept .btn { width: 100%; max-width: 320px; }

.member-no { color: var(--ink-3); font-size: .82rem; margin: .15rem 0 0; }

/* ---------- report a problem ---------- */

.report-open {
  display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none;
  color: inherit; font: inherit; font-weight: 600; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.report-open:hover { opacity: .85; }
.top-sep { opacity: .5; margin: 0 .2rem; }


/* ---------- the top strip on a phone ----------
   Placed at the end of the file on purpose: the desktop sizing above would
   otherwise win by coming later. */

@media (max-width: 720px) {
  .foot-strip { display: block; font-size: .72rem; padding: .3rem 0; }
  .foot-strip .wrap.foot-strip-inner {
    min-height: 0; flex-wrap: wrap; justify-content: center;
    gap: .15rem .45rem; text-align: center; line-height: 1.35;
  }
  .foot-strip .top-sep { display: none; }
  .foot-strip .report-open { font-size: .74rem; }
}

.person-visited { color: var(--ink-3); font-size: .84rem; margin-top: .2rem; }

/* ---------- a row of flags ---------- */

.flag-row { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.flag-row span { display: inline-flex; }
.flag-row .flag {
  width: 22px; height: 16px; border-radius: 3px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(16,32,58,.12);
}
.flag-more {
  font-size: .75rem; color: var(--ink-3); align-self: center; padding-left: .15rem;
}

/* the state, as the opening word of the projects line */
.trip-state, .trip-state-alone {
  list-style: none; font-size: .8rem; font-weight: 600; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .2rem;
}
.trip-state-alone { margin: .4rem 0 0; }
.flag-row-projects { margin-top: .2rem; opacity: .95; }
.person .handle { font-size: .84rem; color: var(--ink-3); }
.person .person-where { margin-top: .5rem; }

.country-pill-plain { cursor: default; }
.country-pill-plain:hover { border-color: var(--line); background: #fff; }

.strip-title {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); margin: 0 0 .5rem;
}
.country-strip + .strip-title { margin-top: 1.1rem; }

.map-modes { margin-bottom: .5rem; }
.map-modes .status-tab { font-weight: 600; }

/* the map's two controls on one line: which map on the left, whose on the right */
.map-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; min-height: 42px;
}
.map-bar .status-tabs { margin: 0; }
.map-who.is-empty { min-height: 1px; }

@media (max-width: 720px) {
  .map-bar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .map-bar .status-tabs { overflow-x: auto; }
}

@media (max-width: 720px) {
  .hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
  .hero-actions .btn { flex: 1 1 calc(50% - .25rem); justify-content: center; }
  /* the third one takes the next line to itself rather than being squeezed */
  .hero-actions .btn:nth-child(3) { flex-basis: 100%; }
}







/* ---------- city suggestions ---------- */

.form .two > div { position: relative; }
.city-suggest {
  list-style: none; margin: .2rem 0 0; padding: .3rem; position: absolute;
  z-index: 40; left: 0; right: 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: 0 10px 30px rgba(16,32,58,.12);
  max-height: 260px; overflow-y: auto;
}
.city-suggest button {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer;
  padding: .55rem .6rem; border-radius: var(--r-sm);
}
.city-suggest button:hover, .city-suggest button:focus { background: var(--paper-2); outline: none; }
.city-suggest button span {
  margin-left: auto; font-size: .78rem; color: var(--ink-3); letter-spacing: .04em;
}

.city-suggest .city-note { padding: .55rem .6rem; color: var(--ink-3); font-size: .88rem; }


/* ---------- cards of equal height ----------
   A card with forty flags and a card with none sat at different heights and
   the grid looked broken. Each card now fills its row, its parts sit in a
   fixed order, and the flags get a couple of lines rather than as many as
   they like. */

.people { align-items: stretch; }
.person { height: 100%; }
.person .trip-list { margin-top: auto; }          /* projects sit above the foot */
.person .person-where {
  margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: .88rem;
}
.person .flag-row { max-height: none; overflow: visible; }
/* Two rows of flags, cut cleanly: the 25th onwards is not drawn rather than
   half-drawn. The full set is on the profile. */
.person .flag-row span:nth-child(n+25) { display: none; }
.person .person-visited { min-height: 1.1rem; }

/* ---------- what the list is narrowed to ---------- */

.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .75rem; border-radius: 999px; font-size: .88rem;
  background: var(--blue); color: #fff; border: 1px solid var(--blue);
}
.filter-chip:hover { background: #14508C; color: #fff; text-decoration: none; }
.filter-chip span { font-size: 1.05rem; line-height: 1; opacity: .8; }
.filter-clear {
  align-self: center; font-size: .85rem; color: var(--ink-2); padding: .2rem .4rem;
}


/* ---------- the map page ----------
   One question per screen: which map, then the map, then the countries in
   order of size. The same shape on a phone and on a desktop, so switching
   between the two maps never rearranges the page. */

.map-page { padding-top: 2rem; padding-bottom: 2.5rem; }
.map-head { margin-bottom: 1.1rem; }
.map-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .3rem; }
.map-head p { color: var(--ink-2); max-width: 62ch; margin: 0; }

.map-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; max-width: 420px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 999px; padding: .25rem; margin-bottom: 1rem;
}
.map-switch-item {
  text-align: center; padding: .55rem .6rem; border-radius: 999px;
  font-weight: 600; font-size: .92rem; color: var(--ink-2);
}
.map-switch-item:hover { text-decoration: none; color: var(--ink); }
.map-switch-item.on { background: var(--blue); color: #fff; }

.map-who-row { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.6rem; }
.map-who-item {
  padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .86rem; color: var(--ink-2); background: #fff;
}
.map-who-item:hover { text-decoration: none; border-color: var(--blue); color: var(--ink); }
.map-who-item.on { background: var(--paper-3); color: var(--ink); border-color: var(--ink-3); }

.map-panel {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 1rem 1rem .8rem; margin-bottom: 1.8rem;
}
.map-panel svg.europe { max-height: 560px; }
.map-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: .6rem;
  border-top: 1px solid var(--line); padding-top: .7rem;
}
.map-summary { margin: 0; color: var(--ink-2); font-size: .9rem; }
.map-legend { display: flex; gap: .9rem; margin: 0; font-size: .8rem; color: var(--ink-3); }

.map-list-head { margin-bottom: .7rem; }
.map-list-head h2 { font-size: 1.15rem; margin-bottom: .15rem; }
.map-list-head .hint { margin: 0; }

/* One country per line, counts aligned: a ranking is read down a column, not
   across a field of bubbles of different widths. */
.map-list {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 1rem;
}
.map-list li { break-inside: avoid; margin-bottom: .3rem; }
.map-list a {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.map-list a:hover { border-color: var(--blue); text-decoration: none; }
.map-list .flag { width: 22px; height: 16px; border-radius: 3px; flex: none; }
.map-list-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-list-count { margin-left: auto; font-weight: 600; color: var(--blue); }
.map-note { margin-top: 1rem; }

@media (max-width: 720px) {
  .map-page { padding-top: 1.2rem; }
  .map-switch { max-width: none; }
  .map-panel { padding: .6rem .6rem .5rem; }
  .map-panel svg.europe { max-height: 52vh; }
  .map-foot { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .map-legend { flex-wrap: wrap; gap: .6rem; }
  .map-list { columns: 1; }
  .map-who-row { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .map-who-item { white-space: nowrap; }
}


/* ---------- the directory on a phone ---------- */

.status-tabs-wrap { flex-wrap: wrap; overflow: visible; }
.tab-short { display: none; }

@media (max-width: 720px) {
  /* Tabs wrap onto two lines with short names instead of scrolling sideways. */
  .status-tabs-wrap { display: flex; flex-wrap: wrap; gap: .35rem; }
  .status-tabs-wrap .status-tab { padding: .4rem .8rem; font-size: .85rem; }
  .tab-long { display: none; }
  .tab-short { display: inline; }

  /* A smaller card: photo, name, one line per project, and the buttons. */
  .person-row { padding: .85rem .9rem; gap: .7rem; }
  .person-row-photo .avatar-md { width: 46px; height: 46px; }
  .person-row-head { gap: .35rem; }
  .person-row .person-name { font-size: 1rem; }
  .person-row .handle { font-size: .8rem; }
  .person-row .person-visited { font-size: .8rem; }
  .person-row .flag-row span:nth-child(n+19) { display: none; }
  .person-row .flag-row .flag { width: 19px; height: 14px; }

  .trip-list { margin: .4rem 0 0; }
  .trip-list .trip {
    display: flex; align-items: baseline; gap: .5rem; padding: .15rem 0; font-size: .9rem;
  }
  .trip-list .trip b { font-weight: 600; min-width: 0; }
  .trip-list .when { margin-left: auto; color: var(--ink-3); font-size: .82rem; white-space: nowrap; }
  .trip-state, .trip-state-alone { font-size: .72rem; margin-bottom: .1rem; }

  .person-row .person-where { font-size: .85rem; margin-top: .45rem; }
  .person-row-actions { gap: .4rem; margin-top: .6rem; }
  .person-row-actions .btn { padding: .45rem .6rem; font-size: .85rem; }
}

.dir-side .filter-note { margin: -.3rem 0 .35rem; font-size: .8rem; }


/* ---------- references ---------- */

.vouches { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.vouches h2 { font-size: 1.15rem; margin-bottom: .8rem; }
.vouch-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .7rem; }
.vouch-list li {
  border: 1px solid var(--line); border-left: 3px solid var(--green, #2E9E52);
  border-radius: var(--r); background: #fff; padding: .9rem 1.1rem;
}
.vouch-body { margin: 0; }
.vouch-by { margin: .45rem 0 0; font-size: .86rem; color: var(--ink-3); }
.vouch-by .when { margin-left: .5rem; }
.vouch-form { margin-top: .6rem; }
.vouch-form textarea { width: 100%; min-height: 84px; }
.vouch-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.clover { vertical-align: -3px; }

.dir-side .filter-check {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem;
  padding: .6rem .7rem; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; font-size: .92rem;
}
.dir-side .filter-check input { width: auto; margin: 0; }

.vouch-own { border-left-color: var(--blue); background: var(--paper-2); }
.vouch-tag {
  margin: 0 0 .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--blue); font-weight: 600;
}
.vouch-own-actions { display: flex; gap: .8rem; align-items: center; margin: .5rem 0 0; }
.vouch-own-actions form { margin: 0; }
.link-button {
  border: 0; background: none; padding: 0; font: inherit; font-size: .86rem;
  color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.link-button.danger { color: #A32D2D; }
.link-button:hover { opacity: .8; }
.vouch-written-head { font-size: .95rem; margin: 1.4rem 0 .6rem; color: var(--ink-2); }
.vouch-written li { border-left-color: var(--ink-3); }

/* ---------- the cookie question ---------- */

.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(16,32,58,.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.cookie-inner {
  max-width: 1100px; margin: 0 auto; padding: .9rem 1.2rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.cookie-text { margin: 0; flex: 1 1 320px; font-size: .9rem; color: var(--ink-2); }
.cookie-actions { display: flex; gap: .5rem; margin-left: auto; }

@media (max-width: 720px) {
  /* above the tab bar, not under it */
  .cookie-bar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: 0; }
  .cookie-inner { padding: .8rem 1rem; gap: .7rem; }
  .cookie-actions { width: 100%; margin-left: 0; }
  .cookie-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- the bell ---------- */

.bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; color: var(--ink-2); flex: none;
}
.bell:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.bell.has-new { color: var(--blue); }
.bell-dot {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: #D8412F; color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center;
  border: 2px solid #fff;
}

/* ---------- the list ---------- */

.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.alert-list li { border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.alert-list li.is-new { border-left: 3px solid var(--blue); background: var(--paper-2); }
.alert-list a, .alert-list > li > div { display: block; padding: .9rem 1.1rem; color: var(--ink); }
.alert-list a:hover { text-decoration: none; background: var(--paper-2); }
.alert-line { display: block; }
.alert-body { display: block; margin-top: .35rem; color: var(--ink-2); font-size: .92rem; white-space: pre-line; }
.alert-when { display: block; margin-top: .35rem; font-size: .8rem; color: var(--ink-3); }
.alert-foot { margin-top: 1.2rem; }

@media (max-width: 720px) {
  .bell { width: 34px; height: 34px; }
}

/* ---------- what reaches you, and how ---------- */

.pref-lead { color: var(--ink-2); margin-bottom: 1rem; }
.pref-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .5rem; }
.pref-list li {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: .9rem 1.1rem;
}
.pref-what { flex: 1 1 260px; min-width: 0; }
.pref-what strong { display: block; }
.pref-switch {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0; white-space: nowrap;
  font-size: .9rem; cursor: pointer;
}
.pref-switch input { width: auto; margin: 0; }


/* ---------- buttons on a phone ----------
   Everything that could stretch was stretching: profile actions, invite
   actions, form actions, all at full width and full height at once. A page
   of slabs. These are still comfortably tappable (40px tall, which is above
   the size a thumb needs) but they no longer dominate the screen. */

@media (max-width: 720px) {
  .btn { padding: .5rem .95rem; font-size: .9rem; }
  .btn-sm { padding: .4rem .75rem; font-size: .85rem; }

  /* Side by side, sized to their words, rather than one slab each. */
  .profile-actions { gap: .45rem; }
  .profile-actions .btn { flex: 0 1 auto; }

  .invite-share { display: flex; flex-wrap: wrap; gap: .45rem; }
  .invite-share .btn { flex: 0 1 auto; }
  .invite-strip .btn { width: auto; margin-left: 0; }

  /* A form's own submit still spans the width: there it is the one thing
     to do on the screen, and a wide target is right. */
  .form-actions .btn { width: 100%; }
  .form-actions .btn + .btn { margin-top: .4rem; }

  .person-row-actions .btn { flex: 0 1 auto; }
  .join-actions .btn { flex: 0 1 auto; }
}

/* a link inside an announcement, where the whole row is already a link */
.alert-body a { text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }

/* ---------- profile sections ---------- */

.profile-section + .profile-section,
.profile-section + .vouches { margin-top: 2rem; }
.profile-section h2 { margin-bottom: .2rem; }
.section-note { color: var(--ink-3); font-size: .88rem; margin: 0 0 .9rem; }
.member-since { color: var(--ink-3); }

/* What the fold reveals has to look like more of the same list, not a
   second list bolted underneath: no extra margins, same spacing. */
/* Stretch, not shrink: with align-items: flex-start the revealed list
   collapsed to the width of its longest line while the first three sat at
   full width, and the two blocks stopped looking like one list. */
.more-block { margin-top: 0; display: flex; flex-direction: column; align-items: stretch; }
.more-block > *:not(summary) { margin: 0; }
.chips + .more-block .chips { margin-top: .4rem; }
.vouch-list + .more-block .vouch-list { margin-top: .7rem; }
/* The toggle sits after whatever it reveals, so opening it does not leave a
   line stranded in the middle of the list. */
.more-block > summary { order: 2; }
.more-block summary {
  cursor: pointer; color: var(--blue); font-size: .88rem; list-style: none;
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem;
  align-self: flex-start;   /* the toggle stays its own size */
}
.more-block summary::-webkit-details-marker { display: none; }
.more-block summary::before { content: "+"; font-weight: 700; }
.more-block[open] summary::before { content: "-"; }
.more-block > *:not(summary) { width: 100%; }
.more-shut, .more-block[open] .more-open { display: none; }
.more-block[open] .more-shut { display: inline; }


/* ---------- saved people and private notes ---------- */

.save-form { display: inline-flex; margin: 0; }
.save-form .btn.is-saved { border-color: var(--blue); color: var(--blue); }

/* The note sits in the sidebar as an ordinary side card; the only thing it
   needs of its own is a marker that this one is private to the reader. */
.note-card { border-left: 3px solid var(--ink-3); }
.note-card .form label { margin-top: 0; }
.note-card textarea { min-height: 72px; }
.note-card .btn { margin-top: .6rem; }
.note-card .hint:last-child { margin-bottom: 0; }

.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.saved-list li {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 1rem 1.1rem;
}
.saved-who { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.saved-who .avatar { width: 44px; height: 44px; }
.saved-note-form textarea { width: 100%; min-height: 56px; }
.saved-actions { display: flex; align-items: center; gap: .9rem; margin-top: .5rem; }
.saved-foot { margin-top: 1.2rem; }

@media (max-width: 980px) { .nav-saved span { display: none; } }

.saved-note { margin: 0 0 .6rem; white-space: pre-line; }
.saved-note.is-empty { color: var(--ink-3); font-style: italic; }
.saved-actions form { margin: 0; display: inline-flex; }
.saved-edit { margin-top: .7rem; }
.saved-edit textarea { width: 100%; }

/* ---------- the icons in the top bar ---------- */

.bar-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; color: var(--ink-2); flex: none;
}
.bar-icon:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
@media (max-width: 720px) { .bar-icon { width: 34px; height: 34px; } }




/* ---------- the inbox ----------
   Pinned to the window rather than sized through the page: the frame starts
   under the header and ends at the bottom edge, and the two panes scroll
   inside it. The old version tried to inherit its height through five
   ancestors and lost the argument with one of them every time. */



/* ---- left: the conversations ---- */

.ib-side-top {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line);
}
.ib-side-top h1 { font-size: 1.1rem; margin: 0; }

.ib-search { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem .4rem; }
.ib-search svg { color: var(--ink-3); flex: none; }
.ib-search input {
  flex: 1; min-width: 0; padding: .5rem .7rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2);
}

.ib-tabs { display: flex; gap: .3rem; padding: .3rem 1rem .6rem; flex-wrap: wrap; }
.ib-tabs a {
  font-size: .8rem; padding: .28rem .7rem; border-radius: 999px; color: var(--ink-2);
  border: 1px solid transparent;
}
.ib-tabs a:hover { text-decoration: none; background: var(--paper-2); }
.ib-tabs a.on { background: var(--blue); color: #fff; }

.ib-none { padding: 1.4rem 1rem; color: var(--ink-2); }

.ib-thread {
  display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem;
  border-bottom: 1px solid var(--line); color: var(--ink); min-width: 0;
}
.ib-thread:hover { background: var(--paper-2); text-decoration: none; }
.ib-thread.on { background: #eef3fb; }
.ib-thread img { border-radius: 999px; object-fit: cover; flex: none; }
.ib-thread-text { min-width: 0; flex: 1; }
.ib-thread-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.ib-thread-top strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-thread-top span { font-size: .74rem; color: var(--ink-3); white-space: nowrap; }
.ib-thread-last {
  display: block; font-size: .85rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ib-thread.unread strong { font-weight: 700; }
.ib-thread.unread .ib-thread-last { color: var(--ink); font-weight: 600; }
.ib-badge {
  flex: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--blue); color: #fff; font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- right: the conversation ---- */

.ib-blank { display: grid; place-items: center; color: var(--ink-3); padding: 2rem; grid-row: 1 / -1; }

.ib-head {
  display: flex; align-items: center; gap: .7rem; padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--line); background: #fff;
}
.ib-head img { border-radius: 999px; object-fit: cover; flex: none; }
.ib-back { display: none; color: var(--ink-2); }
.ib-who { min-width: 0; }
.ib-who a, .ib-who strong { font-weight: 700; color: var(--ink); display: block; }
.ib-who a:hover { color: var(--blue); }
.ib-who span { font-size: .78rem; color: var(--ink-3); }
.ib-head-actions { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.ib-head-actions form { margin: 0; }

.ib-msg {
  max-width: min(560px, 78%); align-self: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: .6rem .85rem;
}
.ib-msg.mine {
  align-self: flex-end; background: var(--blue); border-color: var(--blue); color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.ib-msg p { margin: 0; white-space: pre-line; }
.ib-when { display: block; margin-top: .3rem; font-size: .72rem; color: var(--ink-3); }
.ib-msg.mine .ib-when { color: rgba(255,255,255,.75); }
.ib-receipt.read { color: #9BE7FF; }

.ib-reply textarea {
  flex: 1; min-height: 42px; max-height: 160px; resize: none; padding: .6rem .9rem;
  font: inherit; font-size: .95rem; border: 1px solid var(--line);
  border-radius: 18px; background: var(--paper-2);
}
.ib-reply textarea:focus { border-color: var(--blue); outline: none; background: #fff; }
.ib-reply .btn { flex: none; }

.ib-latest {
  position: absolute; right: 1.2rem; bottom: 5.4rem; width: 36px; height: 36px;
  border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  display: none; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(16,32,58,.14);
}
.ib-latest.show { display: inline-flex; }

@media (max-width: 900px) {
  /* One pane at a time, with a way back. */
  .ib-back { display: inline-flex; }
  .ib-msgs { padding: .8rem; }
  .ib-msg { max-width: 86%; }
  .ib-side-top h1 { font-size: 1rem; }
}

/* ---------- reply and report on a reference ---------- */

.vouch-reply {
  margin-top: .6rem; padding: .6rem .8rem; background: var(--paper-2);
  border-left: 2px solid var(--line); border-radius: 0 8px 8px 0;
}
.vouch-reply-who { font-size: .76rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.vouch-reply p { margin: .2rem 0 0; }
.vouch-tools { display: flex; gap: .9rem; margin: .5rem 0 0; }
.vouch-inline { margin-top: .6rem; }
.vouch-inline textarea { width: 100%; min-height: 56px; }
.vouch-inline .btn { margin-top: .5rem; }

/* ---------- Duvar ---------- */

.wall-search { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.wall-search input {
  flex: 1; padding: .7rem 1rem; font: inherit; border: 1px solid var(--line);
  border-radius: 8px; background: #fff;
}
.wall-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; align-items: start; }

.wall-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.wall-side-head h2 { font-size: 1rem; margin: 0; }
.wall-side-head a { font-size: .82rem; }
.wall-cats { display: flex; flex-wrap: wrap; gap: .3rem; margin: .7rem 0; }
.wall-cats a {
  font-size: .82rem; padding: .3rem .7rem; border-radius: 6px;
  background: var(--paper-2); color: var(--ink-2);
}
.wall-cats a:hover { text-decoration: none; background: var(--paper-3, #DFF2ED); }
.wall-cats a.on { background: var(--blue); color: #fff; }

.wall-list { list-style: none; margin: 0; padding: 0; }
.wall-list a {
  display: flex; gap: .6rem; align-items: baseline; padding: .55rem .2rem; font-size: .95rem;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.wall-list a:hover { text-decoration: none; color: var(--blue); }
.wall-list a.on { color: var(--blue); font-weight: 600; }
.wall-list-title { flex: 1; min-width: 0; }
.wall-list-count { font-size: .78rem; color: var(--ink-3); }
.wall-empty { color: var(--ink-3); padding: .6rem .2rem; }

.wall-topic-head h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; margin-bottom: .25rem; }
.wall-meta { color: var(--ink-3); font-size: .86rem; margin: 0 0 1.2rem; }

.wall-entries { list-style: none; margin: 0; padding: 0; }
.wall-entries li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.wall-body { white-space: pre-line; font-size: .94rem; line-height: 1.62; }
.wall-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .9rem; margin-top: .7rem; flex-wrap: wrap;
}
.wall-acts { display: flex; align-items: center; gap: .9rem; }
.wall-author { margin-left: auto; text-align: right; line-height: 1.35; }
.wall-author .when { display: block; margin: 0; font-size: .78rem; }
.wall-from { margin: 0 0 .5rem; font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.wall-from a { color: var(--blue); }
.wall-write-head { font-size: 1rem; margin: 0 0 .3rem; }
.wall-cats-foot { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.wall-cats-foot h2 { font-size: .9rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .7rem; }
.wall-heart { margin: 0; }
.wall-heart button {
  display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none;
  color: var(--ink-3); cursor: pointer; font: inherit; font-size: .84rem; padding: 0;
}
.wall-heart button.on { color: #D8412F; }
.wall-heart button:disabled { cursor: default; opacity: .6; }
.wall-hearts-flat { display: inline-flex; align-items: center; gap: .3rem; color: #D8412F; font-size: .84rem; }
.wall-permalink { font-size: .8rem; color: var(--ink-3); }
.wall-author { margin-left: auto; font-size: .84rem; color: var(--ink-2); }
.wall-author .when { color: var(--ink-3); margin-left: .4rem; }
.wall-author em { font-style: normal; }

.wall-edit { margin-top: .7rem; }
.wall-edit textarea { width: 100%; }
.wall-pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.6rem; font-size: .85rem; }
.wall-pages a, .wall-per a { padding: .2rem .45rem; color: var(--ink-2); }
.wall-pages a.on, .wall-per a.on { color: #fff; background: var(--blue); border-radius: 6px; }
.wall-write { border-top: 1px solid var(--line); padding-top: 1rem; }
.wall-write textarea { width: 100%; }
.wall-join { border: 1px dashed var(--line); border-radius: var(--r); padding: 1.2rem; background: var(--paper-2); }
.wall-none { border: 1px dashed var(--line); border-radius: var(--r); padding: 1.4rem; background: var(--paper-2); }
.wall-suggest { margin: .4rem 0 1rem 1rem; }
.wall-new .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 900px) {
  .wall-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .wall-new .two { grid-template-columns: 1fr; gap: 0; }
}

.wall-tools { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .4rem; flex-wrap: wrap; }
.wall-tools button {
  border: 1px solid var(--line); background: #fff; border-radius: 6px;
  padding: .22rem .7rem; font: inherit; font-size: .8rem; color: var(--ink-2); cursor: pointer;
}
.wall-tools button:hover { border-color: var(--blue); color: var(--blue); }
.wall-tools .hint { margin: 0; font-size: .78rem; }
.wall-link { text-decoration: underline; text-underline-offset: 2px; }
.wall-link::after {
  content: ""; display: inline-block; width: .55em; height: .55em; margin-left: .25em;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.1em); opacity: .7;
}
.wall-bkz { color: var(--ink-3); }
.wall-bkz a { color: var(--blue); }
.wall-ref { font-weight: 600; }

.wall-search select {
  padding: .7rem .8rem; font: inherit; font-size: .9rem; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink-2); flex: none;
}
.wall-people { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.wall-people a {
  display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff;
}
.wall-people a:hover { border-color: var(--blue); text-decoration: none; }
.wall-people img { border-radius: 999px; object-fit: cover; flex: none; }
.wall-people strong { display: block; }

@media (max-width: 620px) {
  .wall-search { flex-wrap: wrap; }
  .wall-search select { flex: 1 1 100%; }
}

/* ---------- Duvar, second pass ---------- */

.wall-bar { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.wall-bar .wall-search { flex: 1; margin: 0; }
.wall-side-head h2 a { color: var(--blue); }
.wall-side-head h2 a:hover { text-decoration: underline; }

/* the category strip, across the page under the search */
.wall-page > .wall-cats {
  display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.6rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}

/* headings read as links, because they are */
.wall-list a { color: var(--blue); }
.wall-list a:hover { text-decoration: underline; }
.wall-from a { color: var(--blue); }

/* entries on the front of the wall: one height, with a way to read on */
.wall-body.is-clipped {
  max-height: 7.4em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
          mask-image: linear-gradient(#000 70%, transparent);
}
.wall-more {
  border: 0; background: none; padding: 0; margin-top: .3rem;
  color: var(--blue); font: inherit; font-size: .85rem; cursor: pointer;
}
.wall-more:hover { text-decoration: underline; }
.wall-group {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); margin: 1.8rem 0 .6rem;
}

/* the writer, with a face */
.wall-author { display: flex; align-items: center; gap: .6rem; text-align: right; }
.wall-author-text { display: block; line-height: 1.35; }
.wall-face { border-radius: 999px; object-fit: cover; flex: none; width: 32px; height: 32px; }

/* the dotted menu */
.wall-menu { position: relative; }
.wall-dots {
  border: 0; background: none; cursor: pointer; color: var(--ink-3);
  font-size: 1.2rem; line-height: 1; padding: 0 .25rem;
}
.wall-dots:hover { color: var(--ink); }
.wall-menu-list[hidden] { display: none; }
.wall-menu-list {
  position: absolute; left: 0; top: 1.6rem; z-index: 20; min-width: 170px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 26px rgba(16,32,58,.14); padding: .3rem; display: grid;
}
.wall-menu-list button, .wall-menu-list a {
  border: 0; background: none; text-align: left; padding: .45rem .6rem;
  font: inherit; font-size: .88rem; color: var(--ink); cursor: pointer; border-radius: 6px;
}
.wall-menu-list button:hover, .wall-menu-list a:hover { background: var(--paper-2); text-decoration: none; }
.wall-menu-list .danger { color: #A32D2D; }
.wall-drop { display: inline; margin: 0; }

/* ---------- Duvar, third pass ---------- */

/* the two controls at the top are one control, so they match */
.wall-bar { align-items: stretch; }
.wall-bar .btn, .wall-bar input, .wall-bar select { height: 46px; }
.wall-bar .btn { padding: 0 1.2rem; white-space: nowrap; }

/* paragraphs inside an entry sit close, the way printed text does */
.wall-body p { margin: 0 0 .55em; }
.wall-body p:last-child { margin-bottom: 0; }

/* keeping an entry */
.wall-keep { margin: 0; }
.wall-keep button {
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-3);
  display: inline-flex; align-items: center;
}
.wall-keep button.on { color: var(--blue); }

/* the writer's marks */
.wall-mark { color: var(--blue); display: inline-flex; vertical-align: -1px; }
.wall-clover { vertical-align: -1px; }

/* where an entry used to be */
.wall-entries li.is-gone { padding: .6rem 0; }
.wall-gone { margin: 0; color: var(--ink-3); font-size: .86rem; font-style: italic; }
.wall-gone .wall-permalink { font-style: normal; margin-right: .4rem; }

.saved-heading { margin: 2.4rem 0 .2rem; font-size: 1.1rem; }

.wall-mark, .wall-clover { display: inline-flex; vertical-align: -3px; margin-left: .15rem; }
.wall-mark svg, .wall-clover { width: 15px; height: 15px; }
.wall-author-text a { margin-right: .1rem; }

.wall-cats-more { position: relative; display: inline-flex; }
.wall-cats-dots {
  border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer;
  color: var(--ink-2); font-size: 1rem; line-height: 1; padding: .3rem .55rem;
}
.wall-cats-dots:hover { border-color: var(--blue); color: var(--blue); }
.wall-cats-more .wall-menu-list { top: 2.1rem; left: auto; right: 0; min-width: 190px; }

.follow-counts { display: inline-flex; gap: .9rem; margin-left: .2rem; }
.follow-counts a { color: var(--ink-2); font-size: .88rem; cursor: pointer; }
.follow-counts a:hover { color: var(--blue); text-decoration: underline; }
.follow-counts a:hover strong { color: var(--blue); }
.follow-counts strong { color: var(--ink); }
.save-form .btn.is-following { border-color: var(--line); color: var(--ink-2); }
.wall-feed-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.wall-feed-tabs a {
  font-size: .86rem; padding: .35rem .8rem; border-radius: 6px;
  background: var(--paper-2); color: var(--ink-2);
}
.wall-feed-tabs a:hover { text-decoration: none; }
.wall-feed-tabs a.on { background: var(--blue); color: #fff; }

.wall-back { display: none; align-items: center; gap: .3rem; font-size: .88rem; margin-bottom: .8rem; }

@media (max-width: 900px) {
  /* One at a time: the headings, or the one being read. */
  .wall-grid.has-topic .wall-side { display: none; }
  .wall-back { display: inline-flex; }
  .wall-cats { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .6rem; }
  .wall-cats a, .wall-cats-more { flex: none; }
}

.settings-links { display: grid; gap: .5rem; margin-top: 1.6rem; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink);
}
.settings-row:hover { border-color: var(--blue); text-decoration: none; }
.settings-row strong { display: block; }
.settings-row .settings-go { color: var(--ink-3); font-size: 1.3rem; line-height: 1; }
.settings-row.danger strong { color: #A32D2D; }

/* ---------- the profile, as a small card and a set of tabs ---------- */

.pcard { display: flex; gap: 1rem; align-items: flex-start; }
.pcard-photo { border-radius: 999px; object-fit: cover; flex: none; width: 76px; height: 76px; }
.pcard-who { flex: 1; min-width: 0; }
.pcard-who h1 { font-size: 1.3rem; margin: 0 0 .15rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pcard-sub { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .3rem; font-size: .9rem; color: var(--ink-2); }
.pcard-nums { margin: 0; font-size: .86rem; color: var(--ink-3); }
.pcard-nums strong { color: var(--ink); }
.pcard-nums a { color: var(--ink-3); }
.pcard-nums a:hover { color: var(--blue); }
.pcard-bio { margin: .5rem 0 0; }
.pcard-actions { display: flex; gap: .4rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.pcard-actions form { margin: 0; }

.pcard-flags { margin: 1rem 0 0; display: grid; gap: .3rem; }
.pcard-flags .flag-row { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; }
.pcard-flags .flag-row.is-visited { opacity: .85; }

/* Eleven tabs do not fit across a page. Down the left they do, and the
   selected one stays in view while the panel beside it is read. */
.ptab-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2rem; margin-top: 1.4rem; }
.ptabs { display: flex; flex-direction: column; gap: .1rem; align-self: start; position: sticky; top: 5rem; }
.ptabs a {
  padding: .5rem .75rem; color: var(--ink-2); font-size: .92rem; border-radius: 8px;
  border-left: 3px solid transparent;
}
.ptabs a:hover { text-decoration: none; color: var(--ink); background: var(--paper-2); }
.ptabs a.on { color: var(--blue); background: #E4F5F1; border-left-color: var(--blue); font-weight: 600; }

@media (max-width: 860px) {
  /* On a phone the list goes back across the top, where it scrolls. */
  .ptab-layout { grid-template-columns: 1fr; gap: 1.2rem; }
  .ptabs {
    flex-direction: row; overflow-x: auto; gap: .2rem;
    border-bottom: 1px solid var(--line); position: static;
  }
  .ptabs a {
    flex: none; white-space: nowrap; border-left: 0; border-radius: 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .ptabs a.on { background: none; border-bottom-color: var(--blue); }
}

.ptab-body .profile-section:first-child { margin-top: 0; }
.profile-own-links { display: flex; gap: 1.2rem; margin-top: 2rem; font-size: .9rem; }

@media (max-width: 720px) {
  .pcard { flex-wrap: wrap; }
  .pcard-photo { width: 62px; height: 62px; }
  .pcard-actions { width: 100%; justify-content: flex-start; }
  .pcard-who h1 { font-size: 1.15rem; }
}

.pcard-flags.flag-row { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0 0; }
.more-line { margin-top: 1.2rem; }

.wall-topic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wall-topic-head h1 { flex: 1; min-width: 0; }
.topic-follow { margin: 0; flex: none; }
.followed-topics a.is-unread { font-weight: 700; color: var(--ink); }
.followed-topics a.is-unread .wall-list-count { color: var(--blue); font-weight: 700; }

/* Received and written references, told apart by a whisper of colour
   rather than by a different shape. */
.vouch-list.is-received li { background: #f7faff; border-left: 3px solid var(--blue); }
.vouch-list.is-written li { background: var(--paper-2); border-left: 3px solid #cfd8e6; }
.vouch-list.is-received li, .vouch-list.is-written li {
  padding: .8rem 1rem; border-radius: 0 8px 8px 0; margin-bottom: .6rem;
}
.vouches h2, .vouches h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.profile-about { white-space: pre-line; }
.wall-followed { position: relative; }

.pcard-facts { margin: .15rem 0 0; font-size: .82rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .8rem; }

.notice-open {
  margin: 0 0 1rem; padding: .7rem .9rem; font-size: .86rem; color: var(--ink-2);
  background: var(--paper-2); border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0;
}

/* ---------- editing a profile: one column, four sections ---------- */

.edit-single { width: 100%; }
.edit-single p, .edit-single .hint, .edit-single .notice-open { max-width: none; }
.edit-single .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; align-items: start; }
.edit-single .two > div > label:first-child { margin-top: 1.2rem; }
.edit-single .box > label:first-of-type,
.edit-single .box > .two:first-of-type label { margin-top: .6rem; }
.edit-single .box { padding: 1.2rem 1.5rem 1.5rem; margin: 0 0 1.4rem; background: #fff; }
.edit-single .box legend { background: #fff; }
.edit-single textarea { width: 100%; }
.edit-single .handle-field input { width: 100%; }
.edit-single .hint { margin-top: .35rem; }
.edit-single .notice-open { margin: .4rem 0 1rem; }
@media (max-width: 720px) {
  .edit-single .two { grid-template-columns: 1fr; gap: 0; }
  .edit-single .box { padding: 1rem 1rem 1.2rem; }
}
.edit-jump {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.4rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}
.edit-jump a {
  font-size: .85rem; padding: .3rem .75rem; border-radius: 6px;
  background: var(--paper-2); color: var(--ink-2);
}
.edit-jump a:hover { text-decoration: none; background: #DFF2ED; color: var(--ink); }
.edit-jump .edit-jump-out { margin-left: auto; background: none; color: var(--blue); }

.edit-single .box { margin-bottom: 1.6rem; scroll-margin-top: 5rem; }
.edit-single .box legend {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3);
}
.edit-save {
  position: sticky; bottom: 0; display: flex; gap: .6rem; align-items: center;
  padding: .9rem 0; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 30%);
}

@media (max-width: 720px) {
  .edit-jump { overflow-x: auto; flex-wrap: nowrap; }
  .edit-jump a { flex: none; }
  .edit-jump .edit-jump-out { margin-left: 0; }
}

.status-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.status-line .hint { margin: 0; }

/* ---------- the front page, second edition ---------- */

.hero-pulse { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0 0; font-size: .86rem; color: var(--ink-3); }
.hero-pulse span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-pulse span::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: #2BB673;
  box-shadow: 0 0 0 3px rgba(43,182,115,.18);
}

/* the numbers, as a band under the hero */
.figures-wrap { margin-top: -1.6rem; position: relative; z-index: 2; }
.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .6rem; list-style: none; margin: 0; padding: 0;
}
.figures li a {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: .9rem .8rem; text-align: center; color: var(--ink);
  box-shadow: 0 6px 18px rgba(16,32,58,.06);
}
.figures li a:hover { border-color: var(--blue); text-decoration: none; }
.figures strong {
  display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 600;
  line-height: 1.05; color: var(--blue); font-variant-numeric: tabular-nums;
}
.figures span { display: block; font-size: .8rem; color: var(--ink-2); margin-top: .2rem; line-height: 1.3; }

/* what was written lately, with the headings beside it */
.home-wall-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.2rem; align-items: start; }
.home-wall-entries .wall-entries li:first-child { padding-top: 0; }
.home-wall-side h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 0 0 .5rem; }
.home-wall-side .wall-list a { padding: .45rem .1rem; }
.home-wall-cta { margin-top: 1rem; width: 100%; }

/* where everybody has been */
.home-where-label { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 1.2rem 0 .6rem; }
.home-where-label:first-of-type { margin-top: 0; }
.country-pill.is-visited { background: var(--paper-2); }
.country-pill { border-radius: 8px; }

@media (max-width: 900px) {
  .home-wall-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .figures-wrap { margin-top: 1.2rem; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figures strong { font-size: 1.45rem; }
  .hero-grid { padding-top: 2.2rem; padding-bottom: 1.6rem; }
}

/* front page: equal cards, short excerpts */
.figures li { display: flex; }
.figures li a { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 92px; }
.figures span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wall-body.is-clipped.is-short { max-height: 4.6em; }
.people .person { min-height: 100%; }
.people { align-items: stretch; }
.person .person-where { margin-top: auto; }

/* The newcomers: four small cards of exactly the same shape, because the
   only things on them are a face, a name and a place. */
.newcomers {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem;
}
.newcomers a {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1.1rem .8rem; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); text-align: center; height: 100%;
}
.newcomers a:hover { border-color: var(--blue); text-decoration: none; }
.newcomers img { border-radius: 999px; object-fit: cover; width: 56px; height: 56px; }
.newcomers strong {
  font-size: .92rem; display: flex; align-items: center; gap: .25rem; justify-content: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.newcomers strong .tick { width: 14px; height: 14px; border-radius: 0; flex: none; }
.newcomers span {
  font-size: .8rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

@media (max-width: 720px) {
  .newcomers { grid-template-columns: repeat(2, 1fr); }
}

/* Four maps, one row. Two by two read as two separate pairs. */
.map-switch { display: flex; flex-wrap: nowrap; gap: .3rem; overflow-x: auto; }
.map-switch-item { flex: 1 1 0; white-space: nowrap; text-align: center; }
@media (max-width: 560px) {
  .map-switch { gap: .25rem; }
  .map-switch-item { flex: none; font-size: .85rem; padding-left: .7rem; padding-right: .7rem; }
}

/* The language of a heading, and the switch for it. */
.wall-langs-row { display: flex; justify-content: center; margin: 0 0 1rem; }
.wall-langs-row .wall-langs { width: 100%; }
.wall-langs {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .2rem; padding: .35rem; max-width: 100%;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px;
}
.wall-langs a span { margin-left: .35rem; }
.wall-langs a {
  padding: .3rem .5rem; border-radius: 8px; font-size: .85rem; color: var(--ink-2);
  display: inline-flex; align-items: center; background: transparent; flex: none;
}
.wall-langs a:hover { background: #DFF2ED; text-decoration: none; }
.wall-langs a.on { background: var(--blue); color: #fff; }
.wall-langs img, .wall-list-title img, .wall-topic-head h1 img { vertical-align: -2px; }
.wall-list-title img { margin-right: .25rem; }
.wall-topic-head h1 img { margin-right: .4rem; }

.person-projects { margin: .5rem 0 0; font-size: .86rem; color: var(--ink-2); }

/* Organisations somebody volunteers with. */
.org-list { list-style: none; margin: 0; padding: 0; }
.org-list li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.org-list li:last-child { border-bottom: 0; }
.org-name { margin: 0; font-weight: 600; font-size: 1rem; }
.org-now {
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  background: #E7F7F0; color: #1B8A5F; padding: .15rem .45rem; border-radius: 5px; margin-left: .4rem;
}
.org-line { margin: .2rem 0 .5rem; font-size: .88rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .8rem; }
.org-line .when { color: var(--ink-3); }
a.chip:hover { border-color: var(--blue); text-decoration: none; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .3rem 1rem; }

/* The reference dialog: a form in a box over the page, not a box that
   shoves the page around. */
.modal-foot { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; }
#vouchModal textarea { width: 100%; }

/* The organisation dialog: a long form in a box that scrolls on its own. */
.modal-box { max-height: 88vh; display: flex; flex-direction: column; }
.modal-box > .modal-body { overflow-y: auto; }
.modal-sub { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 1.4rem 0 .4rem; }
.org-fields .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.org-fields p, .org-fields .hint { max-width: none; }
.add-row { margin-top: 1.2rem; }
@media (max-width: 720px) { .org-fields .two { grid-template-columns: 1fr; } }

/* Languages and their levels. */
/* Add one, then the next: a box to type in, a level, a button. */
.lang-add { margin-bottom: 1.6rem; }
.lang-add-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; gap: 0 1rem; align-items: end; }
.lang-add-row label { margin-top: 0; }
.lang-add-row .lang-add-go .btn { min-height: 42px; }
.lang-add-row input, .lang-add-row select { margin-bottom: 0; }
.lang-add-go .btn { width: 100%; }
@media (max-width: 720px) { .lang-add-row { grid-template-columns: 1fr; gap: .2rem; } }
.lang-list { list-style: none; margin: 0; padding: 0; }
.lang-list li { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.lang-list.is-editable .lang-name { flex: 1; font-weight: 600; display: flex; align-items: center; }
.lang-list.is-editable form { margin: 0; display: flex; align-items: center; }
.lang-list.is-editable select { margin: 0; width: 13rem; font-size: .88rem; padding: .35rem .6rem; }
.lang-list .icon-button {
  border: 1px solid var(--line); background: #fff; color: var(--ink-3);
  width: 34px; height: 34px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer;
}
.lang-list .icon-button:hover { border-color: #E14F4A; color: #E14F4A; }
.lang-list li:last-child { border-bottom: 0; }
.lang-list a { flex: 1; }
.lang-level { font-size: .78rem; padding: .15rem .5rem; border-radius: 6px; background: var(--paper-2); color: var(--ink-2); }
.lang-level.level-native { background: #E7F7F0; color: #1B8A5F; }
.lang-level.level-c2, .lang-level.level-c1 { background: #E4F5F1; color: var(--blue); }

.lang-list img, .lang-name img { margin-right: .45rem; vertical-align: -2px; }

.age-note { margin-top: -.4rem; }
.provider-note { margin-top: .8rem; }

.operator-name { font-weight: 600; margin: 0 0 .4rem; }
.operator-office { margin: 0 0 .5rem; }

.admin-bar-link.is-warn { color: #FFD9A0; font-weight: 600; }