/* ==========================================================================
   PAGE: Appeals index + appeal detail — composition only.
   ========================================================================== */

/* sp-7 at the foot, not sp-9. The hero's own 96px bottom padding plus the next
   section's top padding was the 154px blank band measured directly below the
   photograph — the last of the eight, and the only one left after the rhythm
   fix, because the hero was not yet part of that rhythm. It is now. */
.p-appeal { padding-block: var(--sp-7); }

/* --------------------------------------------------------------------------
   FILTER BAR — Urgent · Zakat-eligible · Sadaqah · Seasonal
   --------------------------------------------------------------------------
   Presented as one seated control rather than five loose outlines. Five
   free-floating pills read as debris above a grid of cards; a single recessed
   track reads as a deliberate instrument, and it also makes the pressed state
   obvious at a glance, which matters because it is the only thing telling you
   why the grid below just changed.
   -------------------------------------------------------------------------- */

.p-appeal__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: var(--sp-2);
  margin-block-end: var(--sp-4);
  background-color: var(--surface-sunken);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  /* Only as wide as its contents — a full-width track would look like an
     unfilled input. */
  width: fit-content;
  max-width: 100%;
}

.p-appeal__filter {
  min-height: 42px;
  padding: var(--sp-2) var(--sp-5);
  font-family: var(--ff-utility);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  color: var(--c-text-muted);
  white-space: nowrap;
  transition:
    background-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out),
    box-shadow var(--d-fast) var(--e-out);
}

@media (hover: hover) {
  .p-appeal__filter:hover { color: var(--c-ink); background-color: var(--surface-raised); }
}

.p-appeal__filter[aria-pressed="true"] {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-text-inv);
  box-shadow: var(--shadow-1);
}

/* The count is a live region — it is how a screen-reader user learns the filter
   did anything. Given that job it was too quiet to find visually as well. */
.p-appeal__count {
  font-family: var(--ff-utility);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--c-ink);
  padding-block-end: var(--sp-6);
}

.p-appeal__count::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  margin-inline-end: var(--sp-3);
  vertical-align: 0.25em;
  background-color: var(--c-verdigris);
}

/* --------------------------------------------------------------------------
   STORY SECTIONS — "The need", "What we do"
   --------------------------------------------------------------------------
   Two of these run back to back on every appeal page. As a single .prose block
   inside a 1180px section, the copy capped at 68ch on the left and left the
   whole right half of the page blank — twice, consecutively, which read as a
   rendering fault rather than as white space.

   The heading moves into a narrow left rail and the prose takes the wider right
   column, so the width is used deliberately. The heading is sticky on tall
   viewports: with the eye already down in the paragraphs it keeps the section's
   subject in view, which is the whole argument for this layout over a centred
   column.
   -------------------------------------------------------------------------- */

.p-appeal__story {
  display: grid;
  gap: var(--sp-4);
}

.p-appeal__story-title {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}

@media (min-width: 900px) {
  .p-appeal__story {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--sp-7);
    align-items: start;
  }

  .p-appeal__story-title {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
    /* A hairline tying the heading to its column, echoing the eyebrow rule
       used on the section heads elsewhere. */
    padding-block-start: var(--sp-3);
    border-block-start: 2px solid var(--c-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-appeal__story-title { position: static; }
}

/* --------------------------------------------------------------------------
   DETAIL HERO
   -------------------------------------------------------------------------- */

.p-appeal__hero { display: grid; gap: var(--sp-6); align-items: start; }

@media (min-width: 1024px) {
  .p-appeal__hero { grid-template-columns: 1fr 24rem; gap: var(--sp-7); }
}

/* The hero photograph. Now a portrait frame matching the 4:5 source, so the
   whole image is visible — but 4:5 across a 660px column would stand 825px
   tall and push everything below it off the first screen. Capping the width
   keeps it a figure rather than a second hero. */
.p-appeal__figure {
  display: grid;
  gap: var(--sp-3);
  max-width: 26rem;
  margin: 0;
}

/* From 1024px the figure carries the 4:3 card crop (see the comment in
   tools/build-pages.js) and fills its column. The 26rem cap existed to stop a
   4:5 portrait standing 825px tall across the column; a 4:3 frame at the same
   width is 561px, so the cap is no longer paying for anything except ~330px of
   empty page down the right-hand side of the photograph. */
@media (min-width: 1024px) {
  .p-appeal__figure {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
  }

  .p-appeal__figure .l-frame { --frame-ratio: 4 / 3; }
}

.p-appeal__figure .l-frame {
  /* The frame already matches the image, so this only guards against a future
     image with a different shape being letterboxed against the sunken surface
     rather than silently cropped. */
  background-color: var(--surface-sunken);
}

/* The alt text doubles as a caption. It is written as a plain description of
   what is happening, which is exactly what a caption should say, and it means
   the photograph explains itself to someone who can see it as well as to
   someone who cannot. */
.p-appeal__figcaption {
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  line-height: 1.45;
  color: var(--c-text-muted);
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--c-verdigris);
}

.p-appeal__aside {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 1024px) {
  .p-appeal__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
  }
}

.p-appeal__unit {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  line-height: 1.2;
  color: var(--c-verdigris-ink);
}

/* "What your ₹1,000 really does" — girih cells, not bullet points. */
.p-appeal__breakdown {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.p-appeal__cell {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  /* Squarer and with more air. These were squat 100px boxes with the quantity
     set barely larger than the label, so the row read as a table of small
     print. The contents of the kit are the most concrete thing on the page —
     the one place a donor sees literal kilograms — and they should carry the
     weight of the impact counters on the home page. */
  align-content: center;
  min-height: 8.5rem;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  border: 1px solid var(--c-line);
  /* A verdigris cap, the same device the impact counters use for their rule. */
  border-block-start: 2px solid var(--c-verdigris);
  border-radius: var(--r-md);
  background-color: var(--surface-raised);
  transition:
    transform var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out);
}

@media (hover: hover) {
  .p-appeal__cell:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: var(--shadow-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-appeal__cell { transition: none; }
  .p-appeal__cell:hover { transform: none; }
}

.p-appeal__cell::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 28px;
  height: 28px;
  background-image: url("../../icons/geometry/corner.svg");
  background-size: contain;
  opacity: 0.25;
  color: var(--c-verdigris);
}

.p-appeal__cell-qty {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

.p-appeal__cell-item {
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Gallery */
.p-appeal__gallery {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .p-appeal__gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.p-appeal__gallery button {
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 1;
  background-color: var(--surface-sunken);
}

.p-appeal__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform var(--d-slow) var(--e-out);
}

.p-appeal__gallery button:hover img { transform: scale(1.14); }

/* ==========================================================================
   ZAKAT — in-page give block
   --------------------------------------------------------------------------
   Every Zakat page now carries a real donation form rather than only a link
   out to /donate/. Zakat is an obligation with a deadline and a separate
   accounting trail, so making someone navigate away to discharge it was the
   wrong friction to leave in place.

   The form is the shared [data-donate-widget] — same contract as the hero card
   and the quick-donate panel, bound by donate-widget.js with no extra code,
   and a working GET form to /donate/ without JavaScript. The hidden
   type=zakat field is what keeps the gift on its own ledger.

   The /zakat/calculator/ page deliberately does NOT use this block: its
   summary panel already carries a Give button wired to the amount the
   calculator just worked out, which is strictly more useful than a generic
   set of chips. Two competing CTAs would have undercut it.
   ========================================================================== */

.c-zakat-give {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background-color: var(--surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
}

@media (min-width: 900px) {
  .c-zakat-give {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--sp-7);
    align-items: start;
    padding: var(--sp-7);
  }
}

.c-zakat-give__intro { display: grid; gap: var(--sp-3); align-content: start; }

.c-zakat-give__title {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}

.c-zakat-give__note {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
  max-width: var(--measure-tight);
}

/* The three promises this section exists to make. Set as a checked list rather
   than prose because they are the reassurances a Zakat payer is scanning for. */
.c-zakat-give__points {
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
  padding: 0;
  list-style: none;
}

.c-zakat-give__points li {
  position: relative;
  padding-inline-start: var(--sp-6);
  font-family: var(--ff-utility);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-ink);
}

.c-zakat-give__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.35em;
  width: 0.85em;
  height: 0.45em;
  border-inline-start: 2px solid var(--c-verdigris);
  border-block-end: 2px solid var(--c-verdigris);
  rotate: -45deg;
}

.c-zakat-give__form {
  padding: var(--sp-5);
  background-color: var(--surface-page);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.c-zakat-give__trust {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-4);
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  color: var(--c-text-muted);
}

.c-zakat-give__trust svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--c-verdigris);
}

/* ==========================================================================
   IMPACT — the register photograph
   --------------------------------------------------------------------------
   Capped and centred. At full content width this 16:9 frame ran 1100×619 and
   became the largest thing on a page whose subject is an allocation chart and a
   set of accounts. It is supporting evidence, so it should read as a figure
   rather than as a second hero.
   ========================================================================== */

.p-impact__figure {
  margin: 0;
  max-width: 46rem;
  margin-inline: auto;
}

/* ==========================================================================
   FUNDRAISE — start a fundraiser
   --------------------------------------------------------------------------
   The form sat alone in a 770px column inside an 1100px section, so a third of
   the page was empty beside it and the two facts a first-time fundraiser needs
   (how long review takes, that receipts still apply) were caption text under the
   submit button where nobody reads them. Two columns puts the reassurance beside
   the work.
   ========================================================================== */

.p-fundraise__create {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 900px) {
  .p-fundraise__create {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--sp-7);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   The form panel. The fields used to float directly on the page ground, which
   read as an unfinished admin form on a page that asks for someone's name and
   money target. Giving them a paper surface with a hairline and a soft lift
   makes the form the object you work on, and lets the aside sit beside it as a
   peer rather than as the only card on the page.
   -------------------------------------------------------------------------- */

.p-fundraise__panel {
  display: grid;
  gap: var(--sp-6);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  background:
    linear-gradient(180deg, var(--c-white) 0%, var(--surface-raised) 46%, var(--surface-raised) 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.p-fundraise__panel-head {
  display: grid;
  gap: var(--sp-2);
  padding-block-end: var(--sp-5);
  border-block-end: 1px solid var(--c-line);
}

.p-fundraise__panel-title {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}

.p-fundraise__panel-note {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* Inputs sit on a card now, so a --surface-raised field on a --surface-raised
   panel would be invisible. White fill restores the tonal step the form.css
   ladder assumes. */
.p-fundraise__panel .c-input,
.p-fundraise__panel .c-textarea,
.p-fundraise__panel .c-select__input {
  background-color: var(--c-white);
}

.p-fundraise__panel .c-input:focus,
.p-fundraise__panel .c-textarea:focus,
.p-fundraise__panel .c-select__input:focus {
  box-shadow: 0 0 0 3px var(--c-verdigris-05);
}

.p-fundraise__submit {
  width: 100%;
  margin-block-start: var(--sp-2);
  box-shadow: 0 10px 26px -12px rgb(222 143 18 / 0.65);
}

/* --------------------------------------------------------------------------
   The reassurance card.
   -------------------------------------------------------------------------- */

.p-fundraise__aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  padding: clamp(var(--sp-5), 2.5vw, var(--sp-6));
  /* Warm-to-cool wash rather than a flat fill — the panel picks up a trace of
     verdigris at the foot, which is where the two guide links sit. */
  background:
    radial-gradient(120% 80% at 100% 0%, var(--c-white) 0%, rgb(255 255 255 / 0) 58%),
    linear-gradient(168deg, var(--surface-raised) 0%, var(--c-verdigris-05) 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

/* The cap is a gradient now, verdigris into marigold — the brand's two accents,
   the same pairing the donate ladder uses. Drawn as a pseudo-element so it
   follows the rounded corners instead of squaring them off the way a
   border-block-start does. */
.p-fundraise__aside::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-verdigris) 0%, var(--c-verdigris) 45%, var(--c-marigold) 100%);
  z-index: 2;
}

.p-fundraise__aside-motif {
  position: absolute;
  inset-block-end: -3.5rem;
  inset-inline-end: -3.5rem;
  width: 15rem;
  height: 15rem;
  fill: none;
  stroke: var(--c-verdigris);
  stroke-width: 1;
  opacity: 0.07;
  pointer-events: none;
  z-index: -1;
}

@media (min-width: 900px) {
  .p-fundraise__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
  }
}

.p-fundraise__aside-head {
  display: grid;
  gap: var(--sp-2);
}

.p-fundraise__aside-title {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}

.p-fundraise__steps {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* Numbered, because these are sequential — and a counter keeps the numbering
   correct if a step is ever added or removed. */
.p-fundraise__steps li {
  position: relative;
  padding-inline-start: var(--sp-7);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-muted);
  counter-increment: step;
}

.p-fundraise__steps li > span { display: block; margin-block-start: 2px; }

.p-fundraise__steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.15em;
  display: grid;
  place-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--r-full);
  background: linear-gradient(150deg, var(--c-verdigris) 0%, var(--c-verdigris-ink) 100%);
  color: var(--c-text-inv);
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  /* A halo in the card's own ground, so the dot reads as raised out of the
     connector line rather than threaded onto it. */
  box-shadow: 0 0 0 4px var(--surface-raised), 0 4px 10px -4px rgb(15 118 110 / 0.55);
  z-index: 1;
}

/* A hairline connecting the steps, so they read as a sequence rather than three
   separate bullets. Stops before the last one — there is nothing after it. It
   fades out downward, which keeps the last segment from ending in a hard stub. */
.p-fundraise__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(0.9375rem - 1px);
  inset-block-start: 1.75rem;
  width: 2px;
  height: calc(100% - 0.9rem);
  background: linear-gradient(180deg, var(--c-verdigris) 0%, var(--c-line) 100%);
  opacity: 0.5;
}

.p-fundraise__steps strong {
  display: block;
  color: var(--c-ink);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-tight);
}

.p-fundraise__aside-foot {
  display: grid;
  gap: var(--sp-3);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--c-line);
}

.p-fundraise__aside-note {
  font-family: var(--ff-utility);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* Stacked full-width, not a cluster. In a 22rem column the two labels wrapped
   to different heights and left a ragged pair; as rows they read as a small
   menu of two choices. */
.p-fundraise__aside-links {
  display: grid;
  gap: var(--sp-2);
}

/* The white rest fill has to come with its own :hover, and that is not a
   preference. `.c-btn--secondary:hover` is one class plus one pseudo-class —
   the same specificity as `.p-fundraise__aside-links .c-btn` — and this file
   loads after button.css, so a rest-state --btn-bg set here also wins during
   hover. The label went white over a still-white fill and disappeared. */
.p-fundraise__aside-links .c-btn {
  justify-content: space-between;
  width: 100%;
  --btn-bg: var(--c-white);
}

.p-fundraise__aside-links .c-btn:hover,
.p-fundraise__aside-links .c-btn:focus-visible {
  --btn-bg: var(--c-verdigris-ink);
  --btn-fg: var(--c-text-inv);
  --btn-border: var(--c-verdigris-ink);
}

.p-fundraise__aside-links .c-btn::after {
  content: "→";
  font-family: var(--ff-utility);
  transition: transform var(--d-fast) var(--e-out);
}

.p-fundraise__aside-links .c-btn:hover::after { transform: translateX(3px); }

/* The trust line. It restates what step 3 says, but as a seal at the foot of
   the card — the place people look for it after they have read the steps. */
.p-fundraise__aside-seal {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  color: var(--c-verdigris-ink);
}

.p-fundraise__aside-seal svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
  .p-fundraise__aside-links .c-btn::after { transition: none; }
}

/* ==========================================================================
   APPEAL DETAIL — RHYTHM AND PANELS
   --------------------------------------------------------------------------
   Measured before changing anything: a full-page capture of
   /appeals/emergency-relief/ at 1440px contained EIGHT bands of completely
   blank page, 113–182px each, between 994px and 3936px of scroll. They were
   not one mistake but the same mistake eight times — every block on the page
   was its own `.l-section--tight`, so each boundary paid the bottom padding of
   one section plus the top padding of the next (~54px each at this width),
   then added the heading's own margins on top.

   Two changes, in this order:

     1. Adjacent sections stop double-paying. One gap, not two.
     2. The blocks that were bare content on the page ground — the breakdown,
        the giving ladder, the districts, the FAQs, the amanah pair — sit on the
        same panel surface used by /about/, /get-involved/ and /contact/. That
        is what makes the space around them read as composition rather than as
        a gap, and it makes the appeal pages part of the same document family.
   ========================================================================== */

/* The rhythm fix that started here now lives in 04-layout.css as
   `.l-section + .l-section`, because the same double-padding was measured on the
   Zakat, About and Get Involved pages too. `.p-appeal__sec` is kept as the hook
   for anything appeal-specific rather than deleted mid-flight. */

/* The panel surface. Same geometry as .p-about__panel and .p-contact__panel —
   deliberately, so an appeal reads as the same kind of document as the
   governance page it keeps referring to. */
.p-appeal__panel {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  background: linear-gradient(180deg, var(--c-white) 0%, var(--surface-raised) 46%, var(--surface-raised) 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

/* `.prose` sets its own max-width and vertical rhythm; when the panel is also
   the prose block (the amanah pair) the grid gap would double-space it. */
.p-appeal__panel.prose { display: block; max-width: none; }

.p-appeal__panel .l-section__head { max-width: 52ch; }

/* Districts: heading left, chips right. This was the 182px band. */
@media (min-width: 900px) {
  .p-appeal__panel--split {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-6);
  }
}

.p-appeal__districts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* .c-tag's default fill is --c-paper, which is the panel's own colour — inside
   the panel the district chips had no edge at all and read as loose text. White
   with a hairline gives them back their shape, and a verdigris dot marks each as
   a place rather than a label. */
.p-appeal__districts .c-tag {
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
}

.p-appeal__districts .c-tag::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--r-full);
  background-color: var(--c-verdigris);
}

/* The ladder rows are on white inside the panel now, so their own hover tint
   needs to escalate from white rather than from the page ground. */
.p-appeal__panel .c-ladder__row { background-color: var(--c-white); }
.p-appeal__panel .c-ladder__row:hover { background-color: var(--c-verdigris-05); }