.lir-app { max-width: 720px; margin: 0 auto; }
.lir-app *,
.lir-endorse *,
.lir-scrub * { box-sizing: border-box; }

.lir-step { margin: 0 0 1.5rem; }

.lir-app fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.lir-app legend { font-weight: 500; margin-bottom: .5rem; padding: 0; }

.lir-radio { display: block; padding: 12px 14px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.lir-radio:hover { border-color: var(--wp--preset--color--accent-1, #eb0045); background: #faf7f8; background: color-mix(in srgb, var(--wp--preset--color--accent-1, #eb0045) 6%, #ffffff); }
.lir-radio input { margin-right: 10px; }

.lir-app label,
.lir-endorse label,
.lir-scrub label { display: block; font-weight: 500; margin: 14px 0 6px; }
.lir-app input[type="text"],
.lir-app input[type="email"],
.lir-app input[type="tel"],
.lir-app input[type="file"],
.lir-app select,
.lir-app textarea,
.lir-endorse input[type="text"],
.lir-endorse input[type="email"],
.lir-endorse input[type="tel"],
.lir-endorse input[type="file"],
.lir-endorse select,
.lir-endorse textarea,
.lir-scrub input[type="text"],
.lir-scrub input[type="email"] { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; font: inherit; background: #fff; }
.lir-app textarea,
.lir-endorse textarea { min-height: 120px; resize: vertical; }

.lir-postcode-row { display: flex; gap: 8px; }
.lir-postcode-row input { flex: 1; }

.lir-btn { background: #eb0045; background: var(--wp--preset--color--accent-1, #eb0045); color: #fff; border: 0; border-radius: 9999px; padding: 11px 24px; font-weight: 500; font-size: 1rem; cursor: pointer; white-space: nowrap; transition: background-color .2s ease; }
.lir-btn:hover { background: #a30232; background: var(--wp--preset--color--accent-3, #a30232); }
.lir-btn:disabled { opacity: .6; cursor: default; }

.lir-app :focus-visible,
.lir-endorse :focus-visible,
.lir-scrub :focus-visible { outline: 2px solid var(--wp--preset--color--accent-1, #eb0045); outline-offset: 2px; }

.lir-or { margin: 1rem 0 .5rem; color: #767676; }
#lir-map { height: 360px; border: 1px solid #ececec; border-radius: 10px; overflow: hidden; }
.lir-hint { font-size: .9rem; color: #767676; margin: 6px 0 0; }

.lir-privacy { font-size: .85rem; color: #767676; margin: 16px 0 0; }
.lir-privacy p { margin: 0; }

.lir-msg { padding: 16px 18px; border: 1px solid #ececec; border-radius: 10px; background: #fafafa; }

.lir-cards-heading { margin: 0 0 12px; font-size: 1.05rem; }
.lir-cards { display: flex; flex-direction: column; gap: 12px; }
.lir-card { border: 1px solid #ececec; border-radius: 10px; padding: 18px; }
.lir-card-link { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.lir-card-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.10); border-color: var(--wp--preset--color--accent-1, #eb0045); }
.lir-card-body { display: flex; align-items: center; gap: 16px; }
.lir-card-photo { width: 84px; height: 84px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.lir-card-name { font-weight: 500; margin: 0; }
.lir-card-ward { color: #767676; margin: 2px 0 0; }

.lir-submit { margin-top: 18px; }
.lir-done { padding: 18px; border: 1px solid #ececec; border-radius: 10px; background: #f3faf4; }
.lir-done-msg p:first-child { margin-top: 0; }
.lir-done-msg p:last-child { margin-bottom: 0; }
.lir-done-btn { display: inline-block; margin-top: 14px; text-decoration: none; }

.lir-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Themed map pin */
.lir-pin svg path { fill: var(--wp--preset--color--accent-1, #eb0045); }

/* Public issue map */
.lir-public-map { height: 480px; border: 1px solid #ececec; border-radius: 10px; overflow: hidden; }

/* Solved-by attribution in the public map popup */
.lir-pop-cllr { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #ececec; }
.lir-pop-photo { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.lir-pop-label { color: #767676; font-size: .85em; }

/* ============================================================
   Endorsements — form, list, map, and the deletion form.

   These roots (.lir-endorse, .lir-endorsements, .lir-scrub,
   .lir-endorse-map) are not inside .lir-app, so the base field rules
   above have been widened to reach them rather than duplicated here.
   ============================================================ */

/* ---- Endorsement form ---------------------------------- */

.lir-endorse__form > p { margin: 0 0 4px; }

/* The photo field's hint is a <span> that JS fills while an image is
   processed. It is empty most of the time, so it must collapse
   completely rather than reserve a line. */
span.lir-hint { display: block; margin: 6px 0 0; }
span.lir-hint:empty { display: none; }

/* Consent. These are two separate decisions and must read as two
   deliberate blocks — never merged, never shrunk to small print.
   The label goes back to a flex row so the checkbox sits beside the
   text instead of above it. */
.lir-consent { margin: 16px 0 0; }
.lir-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background: #fbfbfb;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.lir-consent label:hover {
  border-color: var(--wp--preset--color--accent-1, #eb0045);
  background: color-mix(in srgb, var(--wp--preset--color--accent-1, #eb0045) 4%, #ffffff);
}
.lir-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--wp--preset--color--accent-1, #eb0045);
}
.lir-consent + .lir-consent { margin-top: 10px; }

.lir-endorse__form .lir-btn { margin-top: 6px; }

/* Status line under the button, and the panel that replaces the whole
   form on success (JS swaps in .lir-endorse__done). */
.lir-endorse__msg:empty { display: none; }
.lir-endorse__msg,
.lir-scrub__msg { margin: 12px 0 0; }
.lir-endorse__done,
.lir-scrub__done {
  margin: 0;
  padding: 20px 22px;
  border: 1px solid #cfe6d4;
  border-radius: 10px;
  background: #f3faf4;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ---- Deletion form (from unsubscribe links) ------------- */

.lir-scrub__form > p { margin: 0 0 4px; }
.lir-scrub .lir-btn { margin-top: 12px; }

/* ---- Endorsements list --------------------------------- */

.lir-endorsements__group {
  margin: 32px 0 14px;
  font-size: 1.05rem;
}
.lir-endorsements__group:first-child { margin-top: 0; }

.lir-endorsements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.lir-endorsement {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
}
/* Records with neither photo nor logo nor initials close the gap
   rather than leaving an empty column. */
.lir-endorsement:not(:has(.lir-endorsement__photo)):not(:has(.lir-endorsement__logo)):not(:has(.lir-endorsement__mark)) {
  grid-template-columns: 1fr;
}

.lir-endorsement__photo,
.lir-endorsement__logo,
.lir-endorsement__mark {
  grid-column: 1;
  width: 96px;
  height: 96px;
  border-radius: 10px;
}
.lir-endorsement__photo { object-fit: cover; }
/* A logo is artwork, not a portrait — contain it and don't crop. */
.lir-endorsement__logo {
  object-fit: contain;
  background: #fafafa;
  padding: 8px;
}
/* Typographic stand-in when an organisation has no logo: a tinted
   panel with the initials, same footprint as a logo so the two sit
   together in one list without either looking broken. */
.lir-endorsement__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--wp--preset--color--accent-1, #eb0045) 8%, #ffffff);
  color: var(--wp--preset--color--accent-3, #a30232);
  font-family: var(--wp--preset--font-family--display, 'Playfair Display', Georgia, serif);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

.lir-endorsement__words {
  grid-column: 2;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}
.lir-endorsement__words:empty { display: none; }

.lir-endorsement__who {
  grid-column: 2;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: .95rem;
}
/* Words may be absent on office-added organisation records; the
   attribution then sits directly under the mark without a gap. */
.lir-endorsement__words:empty + .lir-endorsement__who { margin-top: 0; }

.lir-endorsement__name { font-weight: 600; }
.lir-endorsement__role,
.lir-endorsement__town { color: #767676; }
/* Role and town are optional — no separators left stranded. */
.lir-endorsement__role:empty,
.lir-endorsement__town:empty { display: none; }

@media (max-width: 480px) {
  .lir-endorsement { grid-template-columns: 64px 1fr; gap: 14px; padding: 16px; }
  .lir-endorsement__photo,
  .lir-endorsement__logo,
  .lir-endorsement__mark { width: 64px; height: 64px; }
  .lir-endorsement__mark { font-size: 1.15rem; }
}

/* ---- Endorser map -------------------------------------- */

/* Leaflet renders nothing without an explicit height. Scotland is tall
   and narrow, so the map wants height rather than width. */
.lir-endorse-map {
  min-height: 560px;
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 782px) {
  .lir-endorse-map { min-height: 380px; }
}

/* Popups are default Leaflet; give them the page's type. */
.lir-endorse-map .leaflet-popup-content {
  margin: 12px 14px;
  font: inherit;
  font-size: .95rem;
  line-height: 1.5;
}
.lir-endorse-map .leaflet-popup-content p { margin: 0 0 4px; }
.lir-endorse-map .leaflet-popup-content p:last-child { margin-bottom: 0; }

/* Pin colour comes from the plugin's accent setting via JS; this only
   adds the outline so pins read against both land and sea. */
.lir-endorse-map .leaflet-interactive {
  stroke: #fff;
  stroke-width: 1.5;
}

/* ---- Optional: side-by-side layout --------------------- */

/* The form and map are separate blocks with headings between them, so
   there is no plugin wrapper to lay out. Wrap them in a group with the
   class lir-endorse-layout (or use a Columns block) to get the 2:1
   split; stacked and form-first on mobile via source order. */
@media (min-width: 783px) {
  .lir-endorse-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
  }
}

/* Map sizing lives here as well as in the theme: a map area can be any shape,
   and one taller than it is wide would otherwise run far past the bottom of the
   screen. This also applies inside the block editor, where the theme's styles
   are not necessarily loaded. */
.lir-map__frame { position: relative; }
.lir-map__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 720px);
  margin: 0 auto;
}
.lir-endorse-with-map { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 860px) {
  .lir-endorse-with-map { grid-template-columns: 1.15fr .85fr; gap: 40px; }
  .lir-endorse-with-map--left .lir-endorse-with-map__form { order: 2; }
  .lir-endorse-with-map--left .lir-endorse-with-map__map  { order: 1; }
}
.lir-endorse-with-map__map .lir-map__svg { max-height: min(70vh, 640px); }

/* --- Map pins -------------------------------------------------------------
   One colour per kind of endorser. Set as custom properties so a theme can
   change them without rewriting the selectors. Green and blue were chosen for
   MPs and MSPs; the shapes differ in size too, because colour alone is not
   enough for a reader who cannot distinguish them.                          */

/* The areas themselves. These had no styling at all: on the public site a
   theme filled them, and anywhere without one — the admin screens — every
   path fell back to the browser default and the map drew as a black
   silhouette. Defaults live here now; a theme overrides the properties. */
.lir-map__svg {
  --lir-area-fill: #e6e4e0;
  --lir-area-line: #ffffff;
  --lir-area-on: var(--wp--preset--color--accent-1, #d4193c);
}
.lir-map__area {
  fill: var(--lir-area-fill);
  stroke: var(--lir-area-line);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
}
.lir-map__area.is-on { fill: var(--lir-area-on); }

.lir-map__svg {
  --lir-pin-mp: #2f6b4f;
  --lir-pin-msp: #1f5170;
  --lir-pin-councillor: #a8442a;
  --lir-pin-member: #7d7466;
}

.lir-map__dot { fill: var(--lir-pin-member); }
.lir-map__halo { fill: var(--lir-pin-member); opacity: .18; }

.lir-map__pin--mp .lir-map__dot { fill: var(--lir-pin-mp); }
.lir-map__pin--mp .lir-map__halo { fill: var(--lir-pin-mp); }
.lir-map__pin--msp .lir-map__dot { fill: var(--lir-pin-msp); }
.lir-map__pin--msp .lir-map__halo { fill: var(--lir-pin-msp); }
.lir-map__pin--councillor .lir-map__dot { fill: var(--lir-pin-councillor); }
.lir-map__pin--councillor .lir-map__halo { fill: var(--lir-pin-councillor); }

.lir-map__pin:focus-visible .lir-map__halo { opacity: .5; }

/* Key */
.lir-map__key {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 18px;
  margin: 14px 0 0; padding: 0; list-style: none;
  font-size: 13px; color: #5b5346;
}
.lir-map__key li { display: flex; align-items: center; gap: 7px; }
/* Every swatch is the same 11px square whatever is drawn inside it.
   border-box matters here: the nomination swatch has a border and the dots
   do not, so on content-box it came out 13px — bigger than the dots and
   sitting low against the text. The explicit min/max and aspect-ratio stop a
   long label squeezing a dot into an oval, which is what a bare flex-basis
   allowed. */
.lir-map__key i {
  box-sizing: border-box;
  display: block;
  width: 11px; height: 11px;
  min-width: 11px; max-width: 11px;
  min-height: 11px; max-height: 11px;
  aspect-ratio: 1 / 1;
  flex: none;
  align-self: center;
  border-radius: 50%;
  background: var(--lir-key, #7d7466);
}
/* The swatches read the same variables the map dots and nomination shading do,
   so when a theme recolours the pins the key follows — otherwise the key shows
   the plugin's defaults while the map shows the theme's colours. */
.lir-map__key .is-mp i { background: var(--lir-pin-mp, #2f6b4f); }
.lir-map__key .is-msp i { background: var(--lir-pin-msp, #1f5170); }
.lir-map__key .is-councillor i { background: var(--lir-pin-councillor, #a8442a); }
.lir-map__key .is-member i { background: var(--lir-pin-member, #7d7466); }
.lir-map__key .is-nomination i {
  border-radius: 2px;
  background: color-mix(in srgb, var(--lir-area-on, #d4193c) 18%, transparent);
  border: 1px solid var(--lir-area-on, #d4193c);
  box-shadow: none;
}

/* The pin control inside the moderation queue. The map there is a control,
   not the page, so it is capped hard — a card is for reading what somebody
   wrote and deciding, not for looking at Scotland. */
.lir-pin { margin: 10px 0 14px; }
.lir-pin__map { max-width: 260px; }
.lir-pin__map .lir-map__svg { max-height: 300px; }
.lir-pin__where { margin: 0 0 6px; font-size: 13px; }
.lir-pin__place { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
.lir-pin__msg:empty { display: none; }

/* Affiliates: a row of logos under the tally. Names only when no logo held. */
.lir-map__affiliates {
	display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center;
	margin: 14px 0 6px;
}
.lir-map__afflogo { max-height: 44px; max-width: 130px; width: auto; height: auto; }
.lir-map__affname { font-weight: 600; font-size: .9em; opacity: .85; }

/* ---------------------------------------------------------------------------
 * Endorsement cards — mechanism only
 *
 * Enough for the paging to work anywhere: a snapping track, a grid of pages,
 * and a place for the zoom buttons to sit. Everything else — colour, border,
 * type, photo size — is the theme's, so it survives a plugin update.
 * ------------------------------------------------------------------------ */
.lir-ecards { position: relative; }
.lir-ecards__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.lir-ecards__track::-webkit-scrollbar { display: none; }
/*
 * Columns rather than a grid.
 *
 * In a grid every card in a row is as tall as the tallest, so a two-line
 * quote beside a ten-line one leaves eight lines of nothing. Columns let each
 * card be its own height and stack underneath the last, and the browser
 * balances the columns for us — so a short quote sits on top of a long one and
 * the block still comes out level at the bottom.
 *
 * The cost is that cards read down each column rather than across the row.
 * For a wall of quotes, where nobody reads in order, that is worth the space.
 */
.lir-ecards__page {
	flex: 0 0 100%;
	scroll-snap-align: start;
	column-count: 2;
	column-gap: 14px;
}
.lir-ecard {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	display: flex;
	flex-direction: column;
	margin: 0 0 14px;
}
.lir-ecard__who { display: flex; align-items: center; gap: 10px; }
.lir-ecard__id { display: flex; flex-direction: column; min-width: 0; }
.lir-ecards__nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.lir-ecards__dots { display: flex; }
@media (max-width: 700px) { .lir-ecards__page { column-count: 1; } }

/* Zoom and pan need these to behave; how the buttons look is the theme's. */
.lir-map__frame { touch-action: pan-y; cursor: grab; }
.lir-map__frame.is-grabbing { cursor: grabbing; }
.lir-map__zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
/* The frame is grab-cursored for dragging; its controls are not draggable. */
.lir-map__zoom button { cursor: pointer; }

/* Admin-only note under the map naming anyone who could not be placed. */
.lir-map__admin {
	margin: 12px 0 0; padding: 10px 12px;
	border: 1px dashed rgba(0,0,0,.2); border-radius: 6px;
	font-size: 13px; line-height: 1.5;
}

/* Strokes are given in user units too, so on a large viewBox a 1-unit outline
   vanishes exactly as the pins did. Non-scaling keeps them at screen width. */
.lir-map__dot,
.lir-map__area { vector-effect: non-scaling-stroke; }

/* ---- endorser strip: mechanism only ----
   The view clips and fades; the track scrolls inside it; the arrows sit over
   the fades, outside the track so they do not scroll away with it. */
.lir-strip { position: relative; }
.lir-strip__view { overflow: hidden; }
.lir-strip__track {
	display: flex; gap: 14px;
	overflow-x: auto;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lir-strip__track::-webkit-scrollbar { display: none; }
.lir-strip__card { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.lir-strip__id { display: flex; flex-direction: column; min-width: 0; }
.lir-strip__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lir-strip__arrow--prev { left: 0; }
.lir-strip__arrow--next { right: 0; }
/* Room for the arrows at each end, so a card never begins underneath one. The
   fade still starts at the very edge, so the row reads as continuing past it.
   Only where the arrows are actually shown: on a phone this negative margin
   dragged the whole row 30px outside the page gutter, so the first card ran
   off the left edge while the label above it sat correctly indented. */
@media (min-width: 601px) {
	.lir-strip__view { padding: 0 30px; margin: 0 -30px; }
}
.lir-strip__label { margin: 0 0 10px; }

/* Affiliate nominations: a logo with the organisation's name underneath.
   The mark is a fixed height box so logos of different proportions line up on
   their baseline rather than each setting its own row height. */
.lir-affs__label { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #5b5346; margin: 0 0 10px; }
.lir-affs__group { font-size: 14px; margin: 18px 0 10px; }
.lir-affs__group:first-of-type { margin-top: 0; }
.lir-affs__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 18px 14px; margin: 0 0 4px; padding: 0; list-style: none;
}
.lir-aff { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.lir-aff__mark { display: flex; align-items: center; justify-content: center; height: 46px; }
.lir-aff__logo { max-height: 46px; max-width: 100%; width: auto; height: auto; }
.lir-aff__name { font-size: 12px; line-height: 1.3; color: #3f3a33; }
@media (max-width: 480px) { .lir-affs__grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } }

/* A fixed number across, kept at every width — two big logos side by side read
   better beside a tall map than a row of small ones. The mark box grows with
   the column count so the logos actually use the space. */
.lir-affs--c2 .lir-affs__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
.lir-affs--c3 .lir-affs__grid { grid-template-columns: repeat(3, 1fr); }
.lir-affs--c4 .lir-affs__grid { grid-template-columns: repeat(4, 1fr); }
.lir-affs--c2 .lir-aff__mark { height: 84px; }
.lir-affs--c2 .lir-aff__logo { max-height: 84px; }
.lir-affs--c3 .lir-aff__mark { height: 64px; }
.lir-affs--c3 .lir-aff__logo { max-height: 64px; }
.lir-affs--c2 .lir-aff__name { font-size: 13px; }
@media (max-width: 480px) {
  .lir-affs--c2 .lir-affs__grid { grid-template-columns: repeat(2, 1fr); }
  .lir-affs--c2 .lir-aff__mark { height: 64px; }
  .lir-affs--c2 .lir-aff__logo { max-height: 64px; }
}

/* Cards that wrap, rather than one row that scrolls. Same card, different
   container: nothing moves, so the overflow and the arrows go with it. */
.lir-strip--grid .lir-strip__view { overflow: visible; }
.lir-strip--grid .lir-strip__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px 16px;
  overflow: visible;
}
.lir-strip--grid .lir-strip__card { flex: 0 1 auto; }
@media (max-width: 480px) {
  .lir-strip--grid .lir-strip__track { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* A theme may fade the ends of the row and give the card a minimum width, both
   right for something that scrolls sideways. Neither is right for cards that
   wrap: there is nothing to scroll to, and a card wider than its grid column
   pushes the whole block past the column it sits in. */
.lir-strip--grid .lir-strip__view { -webkit-mask-image: none; mask-image: none; }
.lir-strip--grid .lir-strip__card { min-width: 0; }

/* On a phone the cards go small and square — face above the name, three across
   and three rows at most. A dozen full-width rows of one card each is a wall to
   scroll past; a tidy block of faces says the same thing in a screenful. */
@media (max-width: 600px) {
  .lir-strip--grid .lir-strip__track { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .lir-strip--grid .lir-strip__card {
    /* The width has to be released explicitly. A theme sizes these cards for a
       row that scrolls — 43vw each, so a finger sees two and a bit — and four
       of those across is nearly twice the screen. In a grid the column decides
       the width, so the card must not. */
    width: auto; max-width: none; min-width: 0;
    flex-direction: column; align-items: center; text-align: center;
    gap: 6px; padding: 7px;
  }
  .lir-strip--grid .lir-strip__photo,
  .lir-strip--grid .lir-strip__mono { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .lir-strip--grid .lir-strip__id { width: 100%; align-items: center; }
  .lir-strip--grid .lir-strip__name { font-size: 11px; line-height: 1.2; }
  /* At this size a ward name wraps to three lines and doubles the height of
     the card for something nobody is reading on a phone. The face and the name
     carry it. */
  .lir-strip--grid .lir-strip__place { display: none; }
  /* Three rows, whatever the block was asked to show. */
  .lir-strip--grid .lir-strip__card:nth-child(n+13) { display: none; }
}

/* Cards that wrap, paged. The container is the quote deck's, so the arrows and
   dots match; its page is a masonry column set, which is right for quotes of
   different lengths and wrong for a grid of equal cards. */
.lir-strip__paged .lir-ecards__page { column-count: initial; column-gap: normal; }
.lir-strip__paged .lir-ecards__nav { margin-top: 14px; }