/* A regular group's own page (lib/group-page.php). Drawn above the regulars form, and only when the page is opened
   from a group's own link. The look is the site's: Fredoka headings with the logo's star, the cream card, the two
   greens and the gold, the 12px corner. Every pair of colours is measured on its ground (the numbers beside them).

   How things move, two ways and no more, both off when less motion is asked for:
     rise   a session row arrives from 6px low, once, as the page is drawn (a transform: nothing is hidden)
     press  a button goes down onto its own edge
*/

/* --- The band ----------------------------------------------------------------------------------------------
   A band of its own straight after the page's opening band: deep green, the one dark band on the page, so the eye
   lands on the group's page first. Its content lines up with the site's own, measured on the regulars page on
   15 Oct 2026: 113 to 1253 px at 1366 wide (24 px each side, at most 1140 px), 23 to 367 px at 390. */
.pan-gp-band {
  padding: 56px 24px 60px;
  background: var(--deep-green, #24543E);
  color: #FFF6E0;                                   /* 8.1:1 on the green */
}

.pan-gp-inner {
  max-width: min(100%, 1140px);
  margin: 0 auto;
}

.pan-gp {
  margin: 0;
}

.pan-gp-band .pan-gp-kicker {
  color: var(--gold-light, #F3BE62);                /* 5.1:1 on the green */
}

.pan-gp-band .pan-gp-hello,
.pan-gp-band .pan-gp-lead {
  color: #FFF6E0;
}

/* The light card lifts off the green; inside it everything is as on the rest of the site. */
.pan-gp-band .pan-gp-card {
  margin-top: 26px;
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
  color: var(--charcoal, #2B2B2B);
}

@media (max-width: 767px) {
  .pan-gp-band {
    padding: 40px 23px 44px;
  }
}

/* The form's group and email boxes, and the time box when a session fills it in: the website knows them. */
.pan-gp-gone {
  display: none !important;
}

/* --- The head ------------------------------------------------------------------------------------------- */
.pan-gp-head {
  margin: 0 0 18px;
}

.pan-gp-kicker {
  margin: 0 0 6px;
  font-family: var(--font-heading, sans-serif);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hub-green, #2E6B4F);                 /* 5.7:1 on the cream */
}

.pan-gp-hello {
  margin: 0 0 8px;
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: clamp(1.85rem, 1.45rem + 1.7vw, 2.5rem);
  line-height: 1.12;
  color: var(--deep-green, #24543E);                /* 8.6:1 */
  overflow-wrap: anywhere;
}

/* The logo's star, as on every section heading of the site. */
.pan-gp-hello::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-right: .34em;
  vertical-align: .12em;
  background: var(--warm-amber, #E8A33D);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}

.pan-gp-lead {
  margin: 0;
  max-width: 42em;
}

/* --- A card ------------------------------------------------------------------------------------------- */
.pan-gp-card {
  margin: 0 0 16px;
  padding: 20px 24px 24px;
  background: var(--cream-card, #FFFCF3);
  border: 1px solid var(--line, #EADDBB);
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(36, 84, 62, .08));
}

.pan-gp-h3 {
  margin: 0 0 4px;
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.2rem + .5vw, 1.6rem);
  line-height: 1.2;
  color: var(--deep-green, #24543E);
}

.pan-gp-month {
  margin: 18px 0 8px;
  font-family: var(--font-heading, sans-serif);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--muted, #5A5A5A);                     /* 6.6:1 on the card */
}

.pan-gp-empty {
  margin: 8px 0 0;
}

/* --- The sessions --------------------------------------------------------------------------------------- */
.pan-gp-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pan-gp-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--hairline, #E9DDBF);
  border-radius: 12px;
}

.pan-gp-tile {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 58px;
  height: 62px;
  border-radius: 10px;
  background: var(--deep-green, #24543E);
  color: #FFF6E0;                                   /* 8.1:1 */
  line-height: 1;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}

.pan-gp-tile-day,
.pan-gp-tile-mon {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pan-gp-tile-num {
  margin: 3px 0 2px;
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 1.5rem;
}

.pan-gp-what {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pan-gp-when {
  font-family: var(--font-heading, sans-serif);
  font-weight: 600;
  color: var(--charcoal, #2B2B2B);
}

.pan-gp-time {
  color: var(--muted, #5A5A5A);                     /* 6.9:1 on white */
}

/* 1.3.0: a one-off of the group's own, by its name. */
.pan-gp-oneoff {
  font-weight: 600;
  color: var(--deep-green, #24543E);                /* 8.7:1 on white */
}

.pan-gp-row.is-cancelled .pan-gp-oneoff,
.pan-gp-row.is-closed .pan-gp-oneoff {
  color: var(--muted, #5A5A5A);
  text-decoration: line-through;
}

.pan-gp-note {
  font-size: .9375rem;
  color: #7A4A0E;                                   /* 7.5:1 on white */
}

/* Taken out of the calendar: still on the list, crossed out, saying why. */
.pan-gp-row.is-cancelled,
.pan-gp-row.is-closed {
  background: #FBF8F1;
}

.pan-gp-row.is-cancelled .pan-gp-tile,
.pan-gp-row.is-closed .pan-gp-tile {
  background: #E6DFCF;
  color: #2B2B2B;                                   /* 10.7:1 */
  box-shadow: none;
}

.pan-gp-row.is-cancelled :is(.pan-gp-when, .pan-gp-time),
.pan-gp-row.is-closed :is(.pan-gp-when, .pan-gp-time) {
  color: var(--muted, #5A5A5A);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.pan-gp-row.is-cancelled .pan-gp-note,
.pan-gp-row.is-closed .pan-gp-note {
  color: var(--muted, #5A5A5A);                     /* 6.5:1 on the row */
}

.pan-gp-row.is-picked {
  border-color: var(--warm-amber, #E8A33D);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, .35);
}

/* --- What you press ------------------------------------------------------------------------------------
   Green on white with an edge it presses down onto; the hover is the site's own: a lighter gold drawn across
   from the left (ink on it 6.8:1).
   🔴 Two classes and the element, on purpose: the page builder's kit paints EVERY button on the site gold with a
   999px corner (`.elementor-kit-6 button`, one class and one element), and it won against one class (measured
   15 Oct 2026: a gold pill). */
.pan-gp button.pan-gp-btn {
  min-height: 44px;
  padding: 9px 16px;
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  color: var(--deep-green, #24543E);                /* 8.7:1 on white */
  background-color: #fff;
  background-image: linear-gradient(var(--gold-light, #F3BE62), var(--gold-light, #F3BE62));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  border: 2px solid var(--deep-green, #24543E);
  border-radius: var(--radius-btn, 12px);
  box-shadow: 0 3px 0 var(--deep-green, #24543E);
  cursor: pointer;
  transition: background-size .28s var(--ease, ease), transform .12s var(--ease, ease), box-shadow .12s var(--ease, ease);
}

.pan-gp button.pan-gp-btn:is(:hover, :focus, :focus-visible),
.pan-gp .pan-gp-row.is-picked button.pan-gp-btn {
  background-size: 100% 100%;
  color: var(--ink-on-gold, #1E3F30);
}

.pan-gp button.pan-gp-btn:focus-visible,
.pan-gp-picked button.pan-gp-link:focus-visible {
  outline: 3px solid var(--warm-amber, #E8A33D);
  outline-offset: 2px;
}

.pan-gp button.pan-gp-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--deep-green, #24543E);
}

.pan-gp-picked button.pan-gp-link {
  justify-self: start;
  padding: 6px 0;
  font: inherit;
  font-weight: 700;
  color: var(--hub-green, #2E6B4F);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pan-gp-picked button.pan-gp-link:is(:hover, :focus-visible) {
  color: var(--deep-green, #24543E);
  background: none;
  text-decoration-thickness: 2px;
}

/* --- The rules, the lines that wait, and the picked session on the form ---------------------------------- */
/* On the green: cream words on a lighter wash of it (6.5:1), a gold edge. */
.pan-gp-rules {
  max-width: 62em;
  margin: 0;
  padding: 12px 16px;
  font-size: .9375rem;
  line-height: 1.5;
  color: #FFF6E0;
  border-left: 4px solid var(--warm-amber, #E8A33D);
  background: rgba(255, 255, 255, .08);
  border-radius: 0 8px 8px 0;
}

.pan-gp-wait {
  max-width: 62em;
  margin: 0;
  padding: 14px 18px;
  line-height: 1.5;
  color: #FFF6E0;
  border-left: 4px solid var(--gold-light, #F3BE62);
  background: rgba(255, 255, 255, .08);
  border-radius: 0 8px 8px 0;
}

.pan-gp-wait.is-warn {
  border-left-color: var(--warm-amber, #E8A33D);
  background: rgba(232, 163, 61, .18);              /* cream on it 6.3:1 */
}

.pan-gp-picked {
  display: grid;
  gap: 4px;
  margin: 0 0 18px;
  padding: 14px 16px;
  line-height: 1.45;
  border-left: 4px solid var(--warm-amber, #E8A33D);
  background: rgba(232, 163, 61, .14);
  border-radius: 6px;
}

/* 1.8.1: the extra date's start and finish, chosen from two lists (group-page.js, extraTimes()). */
.pan-gp-extra-times {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 0 12px;
}

.pan-gp-extra-time {
  display: grid;
  gap: 4px;
  font-weight: 600;
}

.pan-gp-extra-time select {
  min-width: 9em;
  min-height: 44px;
  font: inherit;
  font-weight: 400;
}

.pan-gp-extra-warn {
  flex-basis: 100%;
  margin: 0;
  color: #b32d2e;
}

.pan-gp-extra-warn:empty {
  display: none;
}

/* --- A phone -------------------------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .pan-gp-card {
    padding: 16px 14px 18px;
  }

  .pan-gp-row {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }

  .pan-gp-tile {
    width: 52px;
    height: 58px;
  }

  .pan-gp button.pan-gp-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* --- Motion --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .pan-gp-row {
    animation: pan-gp-rise .42s var(--ease, ease) both;
  }

  .pan-gp-row:nth-child(2) { animation-delay: .04s; }
  .pan-gp-row:nth-child(3) { animation-delay: .08s; }
  .pan-gp-row:nth-child(4) { animation-delay: .12s; }
  .pan-gp-row:nth-child(n + 5) { animation-delay: .16s; }

  @keyframes pan-gp-rise {
    from { transform: translateY(6px); }
    to   { transform: none; }
  }
}

/* === 3b: the group's whole page ===========================================================================
   Two columns on a wide screen: the sessions, and beside them the weekly times, the requests and the invoices.
   One column on a phone, the sessions first. */
.pan-gp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin: 26px 0 18px;
}

.pan-gp-side {
  display: grid;
  gap: 22px;
}

.pan-gp-band .pan-gp-grid .pan-gp-card {
  margin: 0;
}

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

.pan-gp-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
}

/* --- List or month --------------------------------------------------------------------------------------- */
.pan-gp-switch {
  display: inline-flex;
  padding: 3px;
  background: var(--cream-deep, #F5EACB);
  border: 1px solid var(--line, #EADDBB);
  border-radius: 12px;
}

.pan-gp button.pan-gp-switch-btn {
  min-height: 44px;
  padding: 6px 18px;
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.2;
  color: var(--deep-green, #24543E);                /* 7.3:1 on the sand */
  background: transparent;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  cursor: pointer;
}

.pan-gp button.pan-gp-switch-btn:is(:hover, :focus) {
  color: var(--deep-green, #24543E);
  background: rgba(36, 84, 62, .08);
}

.pan-gp button.pan-gp-switch-btn[aria-pressed="true"],
.pan-gp button.pan-gp-switch-btn[aria-pressed="true"]:is(:hover, :focus) {
  color: #FFF6E0;                                   /* 8.1:1 */
  background: var(--deep-green, #24543E);
}

.pan-gp button.pan-gp-switch-btn:focus-visible,
.pan-gp button.pan-gp-cal-btn:focus-visible {
  outline: 3px solid var(--warm-amber, #E8A33D);
  outline-offset: 2px;
}

/* --- A month at a time ------------------------------------------------------------------------------------- */
.pan-gp-cal {
  margin: 0 0 6px;
}

.pan-gp-cal-grid {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
}

.pan-gp-cal-grid th {
  padding: 2px 0;
  font-size: .8125rem;
  font-weight: 700;
  text-align: center;
  color: var(--muted, #5A5A5A);                     /* 6.6:1 */
  background: none;
  border: 0;
}

.pan-gp-cal-grid td {
  height: 46px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  color: var(--charcoal, #2B2B2B);
  background: none;
  border: 0;
}

.pan-gp-cal-grid td.is-past {
  color: #6B6B6B;                                   /* 5.2:1 */
}

.pan-gp button.pan-gp-cal-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 46px;
  padding: 0;
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 1rem;
  color: #FFF6E0;                                   /* 8.1:1 on the green */
  background: var(--deep-green, #24543E);
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: transform .12s var(--ease, ease);
}

.pan-gp button.pan-gp-cal-btn.is-out {
  color: var(--charcoal, #2B2B2B);                  /* 10.7:1 on the sand */
  background: #E6DFCF;
  box-shadow: none;
}

.pan-gp button.pan-gp-cal-btn.is-out .pan-gp-cal-num {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Every state is the page's own: the kit would otherwise paint a hovered or clicked button gold. */
.pan-gp button.pan-gp-cal-btn:is(:hover, :focus) {
  color: #FFF6E0;
  background: var(--hub-green, #2E6B4F);            /* 5.9:1 */
}

.pan-gp button.pan-gp-cal-btn.is-out:is(:hover, :focus) {
  color: var(--charcoal, #2B2B2B);
  background: #DCD3BF;                              /* 9.5:1 */
}

/* The day picked is gold with ink on it, as the booking calendar marks a picked day (5.4:1). */
.pan-gp button.pan-gp-cal-btn[aria-pressed="true"][data-date] {
  color: var(--ink-on-gold, #1E3F30);
  background: var(--warm-amber, #E8A33D);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, .45);
}

.pan-gp button.pan-gp-cal-btn[aria-pressed="true"] .pan-gp-cal-dot {
  background: var(--deep-green, #24543E);
}

.pan-gp button.pan-gp-cal-btn:active {
  transform: translateY(1px);
}

.pan-gp-cal-dot {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--gold-light, #F3BE62);
}

.pan-gp-cal-btn.is-out .pan-gp-cal-dot {
  display: none;
}

.pan-gp-cal-day {
  margin: 4px 0 0;
}

.pan-gp-cal-day:empty {
  display: none;
}

.pan-gp-cal-key {
  margin: 6px 0 0;
  font-size: .875rem;
  color: var(--muted, #5A5A5A);
}

/* --- The times, the requests and the invoices -------------------------------------------------------------- */
.pan-gp-plain {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.pan-gp-time-row,
.pan-gp-req,
.pan-gp-inv {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--hairline, #E9DDBF);
  border-radius: 12px;
}

.pan-gp-time-day,
.pan-gp-req-what,
.pan-gp-inv-what {
  font-family: var(--font-heading, sans-serif);
  font-weight: 600;
  color: var(--charcoal, #2B2B2B);
}

.pan-gp-time-day {
  color: var(--deep-green, #24543E);                /* 8.7:1 on white */
}

.pan-gp-time-until,
.pan-gp-req-sent,
.pan-gp-inv-meta,
.pan-gp-inv-said {
  font-size: .9375rem;
  color: var(--muted, #5A5A5A);                     /* 6.9:1 on white */
}

.pan-gp-req-note {
  font-size: .9375rem;
}

/* Where a request is up to: a word, and a mark beside it, never a colour alone. */
.pan-gp-chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 2px 10px 2px 8px;
  font-size: .8125rem;
  font-weight: 700;
  border-radius: 6px;
}

.pan-gp-chip.is-waiting {
  color: #6B3F00;                                   /* 7.6:1 */
  background: #FBEBCB;
}

.pan-gp-chip.is-done {
  color: #1E4D36;                                   /* 8.2:1 */
  background: #E3F0E8;
}

.pan-gp-chip.is-closed {
  color: #4A4A4A;                                   /* 7.3:1 */
  background: #EEEAE2;
}

.pan-gp-chip-mark {
  width: 10px;
  height: 10px;
  flex: none;
}

.pan-gp-chip.is-waiting .pan-gp-chip-mark {
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;                     /* a ring not yet closed */
}

.pan-gp-chip.is-done .pan-gp-chip-mark {
  width: 6px;
  height: 10px;
  margin: -3px 2px 0;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);                          /* a tick */
}

.pan-gp-chip.is-closed .pan-gp-chip-mark {
  height: 2px;
  background: currentColor;                          /* a dash */
}

.pan-gp-inv {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}

.pan-gp-inv-what,
.pan-gp-inv-meta {
  grid-column: 1;
}

.pan-gp .pan-gp-inv button.pan-gp-inv-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 44px;
  padding: 7px 14px;
}

.pan-gp-inv-said {
  grid-column: 1 / -1;
}

.pan-gp-inv-said:empty {
  display: none;
}

/* --- The next term ---------------------------------------------------------------------------------------- */
.pan-gp .pan-gp-times button.pan-gp-term-btn {
  width: 100%;
  margin: 14px 0 0;
}

.pan-gp-term-said {
  margin: 8px 0 0;
  font-size: .875rem;
  color: var(--muted, #5A5A5A);                     /* 6.6:1 on the card */
}

/* --- When the group already has as many requests waiting as it may ------------------------------------------- */
.pan-gp-full {
  margin: 12px 0 0;
  padding: 10px 14px;
  line-height: 1.45;
  border-left: 4px solid var(--warm-amber, #E8A33D);
  background: rgba(232, 163, 61, .14);
  border-radius: 0 8px 8px 0;
}

.pan-gp button.pan-gp-btn:disabled {
  opacity: .55;
  background-size: 0% 100%;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* --- Next month's check (3c) ---------------------------------------------------------------------------------
   Across the top of the band from the check day to the month's end, with a gold edge: the first thing a group sees
   while there is something to confirm. */
.pan-gp-band .pan-gp-check {
  border-left: 6px solid var(--warm-amber, #E8A33D);
}

.pan-gp-check p {
  max-width: 62em;
  margin: 8px 0 0;
}

.pan-gp .pan-gp-check button.pan-gp-check-btn {
  min-width: 12em;
  margin: 14px 0 0;
}

.pan-gp-check-done {
  font-weight: 700;
  color: var(--deep-green, #24543E);                /* 8.5:1 on the card */
}

.pan-gp-check-done::before {
  content: "\2713\00a0";
}

.pan-gp-check-done:focus {
  outline: none;
}

.pan-gp-check-more,
.pan-gp-check-said,
.pan-gp-listing-lead,
.pan-gp-listing-said {
  font-size: .9375rem;
  color: var(--muted, #5A5A5A);                     /* 6.6:1 on the card */
}

.pan-gp-check-said:empty,
.pan-gp-listing-said:empty {
  display: none;
}

/* --- On What's On (3c) -----------------------------------------------------------------------------------------
   A box to tick for each weekly time, the whole line the thing to tap (44 px and more), and one session by itself. */
.pan-gp-listing-lead {
  margin: 4px 0 12px;
}

.pan-gp .pan-gp-tick {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0 0 6px;
  padding: 8px 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--deep-green, #24543E);                /* 8.7:1 on white */
  background: #fff;
  border: 1px solid var(--line, #EADDBB);
  border-radius: 10px;
  cursor: pointer;
}

.pan-gp .pan-gp-tick input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  accent-color: var(--hub-green, #2E6B4F);
  cursor: pointer;
}

.pan-gp .pan-gp-tick:has(input:checked) {
  border-color: var(--hub-green, #2E6B4F);
  background: #EEF4F0;
}

.pan-gp .pan-gp-tick:has(input:focus-visible) {
  outline: 3px solid var(--warm-amber, #E8A33D);
  outline-offset: 2px;
}

.pan-gp .pan-gp-tick:has(input:disabled) {
  opacity: .6;
  cursor: progress;
}

.pan-gp-h4 {
  margin: 14px 0 6px;
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--deep-green, #24543E);
}

.pan-gp-alone-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  border-bottom: 1px solid var(--line, #EADDBB);
}

.pan-gp .pan-gp-alone-row button.pan-gp-link {
  min-height: 44px;
  padding: 6px 0;
  font: inherit;
  font-weight: 700;
  color: var(--hub-green, #2E6B4F);                 /* 6.1:1 on the card */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pan-gp .pan-gp-alone-row button.pan-gp-link:is(:hover, :focus, :focus-visible) {
  color: var(--deep-green, #24543E);
  background: none;
  text-decoration-thickness: 2px;
}

.pan-gp .pan-gp-alone-row button.pan-gp-link:focus-visible {
  outline: 3px solid var(--warm-amber, #E8A33D);
  outline-offset: 2px;
}

.pan-gp-select-label {
  display: block;
  margin: 8px 0 4px;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--charcoal, #2B2B2B);
}

.pan-gp .pan-gp-listing select.pan-gp-select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  color: var(--charcoal, #2B2B2B);
  background-color: #fff;
  border: 2px solid var(--deep-green, #24543E);
  border-radius: 10px;
}

.pan-gp .pan-gp-listing select.pan-gp-select:focus-visible {
  outline: 3px solid var(--warm-amber, #E8A33D);
  outline-offset: 2px;
}

.pan-gp .pan-gp-listing button.pan-gp-show-btn {
  width: 100%;
  margin: 10px 0 0;
}

/* A session on What's On says so, quietly, under its time. */
.pan-gp-tag {
  justify-self: start;
  margin: 4px 0 0;
  padding: 1px 8px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--deep-green, #24543E);                /* 7.4:1 on its wash */
  background: #E6EFEA;
  border-radius: 6px;
}

/* --- Under "The regulars" (4b) ---------------------------------------------------------------------------------
   What the group writes for the public, sent to the Hub to check; and taking itself off, which does not wait. */
.pan-gp-words {
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line, #EADDBB);
}

.pan-gp-words-now {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--charcoal, #2B2B2B);
}

.pan-gp-words-wait {
  margin: 0 0 10px;
  padding: 8px 12px;
  color: var(--charcoal, #2B2B2B);
  background: #FCF6E6;
  border-left: 4px solid var(--warm-amber, #E8A33D);
  border-radius: 6px;
}

.pan-gp .pan-gp-field {
  display: block;
  margin: 10px 0 0;
}

.pan-gp .pan-gp-field-label {
  display: block;
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--deep-green, #24543E);
}

.pan-gp .pan-gp-field input,
.pan-gp .pan-gp-field textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  color: var(--charcoal, #2B2B2B);
  background: #fff;
  border: 1px solid var(--line, #EADDBB);
  border-radius: 10px;
}

/* Two lines, as the page asks (rows="2"): the theme gives every textarea on the site a tall fixed height. */
.pan-gp .pan-gp-field textarea {
  height: auto;
  min-height: 0;
  resize: vertical;
  line-height: 1.45;
}

.pan-gp .pan-gp-field input:focus-visible,
.pan-gp .pan-gp-field textarea:focus-visible {
  outline: 3px solid var(--warm-amber, #E8A33D);
  outline-offset: 2px;
  border-color: var(--hub-green, #2E6B4F);
}

.pan-gp .pan-gp-field textarea:disabled,
.pan-gp .pan-gp-field input:disabled {
  opacity: .6;
  cursor: progress;
}

.pan-gp .pan-gp-field-hint {
  display: block;
  margin: 4px 0 0;
  font-size: .9em;
  color: var(--muted, #5A5A5A);                     /* 6.6:1 on the card */
}

.pan-gp .pan-gp-words-send {
  margin-top: 14px;
}

.pan-gp-words-rule {
  margin: 10px 0 0;
  font-size: .92em;
  color: var(--muted, #5A5A5A);
}

.pan-gp .pan-gp-words button.pan-gp-words-off {
  min-height: 44px;
  margin-top: 6px;
  padding: 6px 0;
  font: inherit;
  font-weight: 700;
  color: #9A3A27;                                   /* 6.3:1 on the card */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pan-gp .pan-gp-words button.pan-gp-words-off:is(:hover, :focus-visible) {
  text-decoration-thickness: 2px;
}

.pan-gp .pan-gp-words button.pan-gp-words-off:focus-visible {
  outline: 3px solid var(--warm-amber, #E8A33D);
  outline-offset: 2px;
}

.pan-gp-words-said:empty {
  display: none;
}