/* ==========================================================================
   ICGC Praise Temple — Adult Bible Class
   Loaded only on pages carrying an [icgc_abc_*] shortcode.

   Every rule is written .abc.abc rather than .abc. adinkra.css styles body copy
   at `.ad-sec .et_pb_text_inner p`, which is (0,2,1) — a single class loses to
   it and the declaration silently never lands. Doubling the class is the same
   trick outline.css and schedgen.css already use, and it is cheaper than an
   !important war the next person cannot reason about.

   Colours are all var(--ad-*) from adinkra.css, so this file moves with the
   palette instead of pinning it. schedule.css and outline.css still hard-code
   theirs; this one does not add to that debt.
   ========================================================================== */

.abc.abc {
  --abc-live: var(--ad-green);
  --abc-miss: var(--ad-clay);
  --abc-warn: #6B4E17;          /* gold dark enough for 13px text on a tint */
  text-align: left;
}

/* ---- headings and intros ------------------------------------------------- */
.abc.abc .abc-h {
  font-family: var(--ad-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--ad-text);
  text-align: center;
  margin: 0 0 16px;
}
.abc.abc .abc-h + .abc-lede { margin-top: 0; }
.abc.abc .abc-lede {
  font-family: var(--ad-body);
  font-size: var(--t-lede);
  line-height: 1.75;
  color: var(--ad-text2);
  max-width: 60ch;
  margin: 0 auto 30px;
  text-align: center;
}
.abc.abc h3 {
  font-family: var(--ad-display);
  font-size: var(--t-h5);
  font-weight: 700;
  color: var(--ad-text);
  margin: 0 0 10px;
}
.abc.abc h4 {
  font-family: var(--ad-display);
  font-size: var(--t-h5);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ad-text);
  margin: 0;
}

/* Staff sections stack, so each one after the first needs air above it. */
.abc.abc.abc-staff .abc-h { margin-top: 62px; }
.abc.abc.abc-staff .abc-h:first-child { margin-top: 0; }

/* ---- forms --------------------------------------------------------------- */
.abc.abc .abc-form {
  max-width: 480px;
  margin: 0 auto;
  background: var(--ad-surface);
  border: 1px solid var(--ad-rule);
  padding: 38px 34px;
}
.abc.abc .abc-form-wide { max-width: 620px; }
.abc.abc .abc-intro {
  font-family: var(--ad-body);
  font-size: var(--t-small);
  color: var(--ad-text2);
  line-height: 1.6;
  margin: 0 0 22px;
}
.abc.abc .abc-row { display: flex; flex-direction: column; margin-bottom: 18px; }
/* `hidden` is only a UA rule (display:none), so ANY author display declaration
   beats it — the line above would leave the conditional question on screen with
   the attribute set and nothing to show for it. */
.abc.abc [hidden] { display: none !important; }
.abc.abc .abc-row label,
.abc.abc .abc-legend {
  font-family: var(--ad-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ad-muted);
  margin-bottom: 6px;
}
.abc.abc input[type="text"],
.abc.abc input[type="date"],
.abc.abc select {
  font-family: var(--ad-body);
  font-size: 17px;
  color: var(--ad-text);
  background: var(--ad-paper);
  border: 1px solid var(--ad-rule);
  padding: 13px 15px;
  width: 100%;
  border-radius: 0;
  box-sizing: border-box;
}
.abc.abc input:focus,
.abc.abc select:focus { outline: 2px solid var(--ad-gold); outline-offset: 0; }
.abc.abc .abc-hint {
  font-family: var(--ad-body);
  font-size: var(--t-small);
  color: var(--ad-muted);
  line-height: 1.5;
  margin: 7px 0 0;
}

/* Off-screen rather than display:none — some bots skip hidden fields. */
.abc.abc .abc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- choice lists -------------------------------------------------------- */
.abc.abc .abc-choices {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ad-rule);
  background: var(--ad-paper);
}
.abc.abc .abc-choices label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  margin: 0;
  cursor: pointer;
  font-family: var(--ad-body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ad-text);
}
.abc.abc .abc-choices label + label { border-top: 1px solid var(--ad-rule); }
.abc.abc .abc-choices input { width: 19px; height: 19px; flex: 0 0 19px; accent-color: var(--ad-gold); }
.abc.abc .abc-choices label:has(input:checked) {
  background: #FBF7EF;
  box-shadow: inset 3px 0 0 var(--ad-gold);
}
.abc.abc .abc-shutrow { opacity: 0.45; cursor: not-allowed; }
.abc.abc .abc-tag {
  margin-left: auto;
  font-family: var(--ad-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ad-muted);
  text-align: right;
}
.abc.abc .abc-tag-live { color: #fff; background: var(--abc-live); padding: 3px 7px; }

/* ---- buttons ------------------------------------------------------------- */
.abc.abc .abc-btn {
  display: inline-block;
  font-family: var(--ad-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 32px;
  min-height: 44px;
  border: 2px solid var(--ad-gold);
  background: var(--ad-gold);
  color: #14100C;
  cursor: pointer;
}
.abc.abc .abc-btn:hover { background: var(--ad-gold-bright); border-color: var(--ad-gold-bright); }

/* ---- the invitation on Connect --------------------------------------------
   Three cards sit in that row - this one, Testimonies and Announcements - and
   they have to be the same button, because side by side a difference reads as a
   mistake rather than a distinction.

   They were 80, 53 and 78px tall. Two things did that. The padding and border
   were set independently in three stylesheets, and `min-height: 44px` was being
   applied to the CONTENT box: 44 is meant to be the whole touch target, so on a
   content-box button with 30px of vertical padding it is not a floor at all, it
   is 25px of inflation. The button was already over 44px before it was asked to
   be. Sized to the border box it does what it was written to do and the three
   land on 55px together.

   Scoped to the card on purpose. The same content-box min-height is in twenty
   other rules across this site and correcting all of them is a separate job
   with its own before-and-after.
   ------------------------------------------------------------------------- */
/* .abc.abc.abc-cta, not `.abc.abc .abc-cta` - the card carries both classes on
   the SAME element, so a descendant combinator looks for an .abc-cta inside an
   .abc and finds nothing. It fails silently, the way a selector that matches no
   element always does. */
.abc.abc.abc-cta .abc-btn {
  box-sizing: border-box;
  padding: 15px 30px;
  min-height: 44px;
}
.abc.abc .abc-btn-line { background: none; border-color: var(--ad-text); color: var(--ad-text); }
.abc.abc .abc-btn-line:hover { background: var(--ad-text); color: var(--ad-paper); }

/* 44px on every side: these are pressed on a phone, in a room, at the moment a
   class is starting — the worst possible time for a near-miss. */
.abc.abc .abc-b {
  font-family: var(--ad-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 13px;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ad-text);
  background: none;
  color: var(--ad-text);
  cursor: pointer;
}
.abc.abc .abc-b:hover { background: var(--ad-surface2); }
.abc.abc .abc-b-go { background: var(--ad-gold); border-color: var(--ad-gold); color: #14100C; }
.abc.abc .abc-b-go:hover { background: var(--ad-gold-bright); }
.abc.abc .abc-b-stop { border-color: var(--abc-miss); color: var(--abc-miss); }
.abc.abc .abc-inline { display: inline; margin: 0; }

/* ---- the thank-you card -------------------------------------------------- */
.abc.abc .abc-done {
  max-width: 480px;
  margin: 0 auto;
  background: var(--ad-surface);
  border: 1px solid var(--ad-rule);
  padding: 38px 34px;
  text-align: center;
}
.abc.abc .abc-tick {
  width: 54px; height: 54px; line-height: 54px;
  border-radius: 50%;
  background: var(--abc-live);
  color: #fff;
  font-family: var(--ad-display);
  font-size: 26px;
  margin: 0 auto 16px;
}
.abc.abc .abc-done p {
  font-family: var(--ad-body);
  font-size: var(--t-small);
  color: var(--ad-text2);
  line-height: 1.7;
  margin: 0 0 14px;
}

/* The "we could not place you" card. Gold, not clay: this is a detour, not an
   error, and the person reading it has done nothing wrong. Red would tell
   somebody standing in a church foyer that they had failed at something. */
.abc.abc .abc-done-office { max-width: 560px; border-top: 3px solid var(--ad-gold); }
.abc.abc .abc-tick-office { background: var(--ad-gold); color: #14100C; font-weight: 700; }
.abc.abc .abc-quiet {
  font-family: var(--ad-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ad-muted);
  text-decoration: underline;
}
.abc.abc .abc-quiet:hover { color: var(--ad-text); }

/* The line explaining, before the form is filled in, that the name has to match
   the one on record. Sits above the fields rather than beside one of them. */
.abc.abc .abc-hint-lead {
  border-left: 3px solid var(--ad-rule);
  padding-left: 13px;
  margin: 0 0 22px;
}

/* ==========================================================================
   The invitation at the foot of Connect

   Rendered by a shortcode rather than by Divi modules, because the whole block
   changes when a class is meeting - so it has to bring its own type with it
   instead of borrowing .ad-eyebrow / .ad-title / .ad-lede, which are scoped to
   Divi's text-module wrappers.
   ========================================================================== */
.abc.abc-cta { text-align: center; }
.abc.abc .abc-cta-eyebrow {
  font-family: var(--ad-display);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ad-gold);
  margin: 0 0 6px;
}
.abc.abc .abc-cta-title {
  font-family: var(--ad-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--ad-text);
  margin: 0;
  text-wrap: balance;
}
.abc.abc .abc-cta-lede {
  font-family: var(--ad-body);
  font-size: var(--t-lede);
  line-height: 1.75;
  color: var(--ad-text2);
  max-width: 60ch;
  margin: 16px auto 30px;
}
/* A quiet pill, not the full-width green bar the register itself uses — this is
   a signpost on another page, and shouting it here would compete with the
   contact form directly above. */
.abc.abc .abc-cta-live {
  margin: 14px 0 0;
}
.abc.abc .abc-cta-live span {
  display: inline-block;
  font-family: var(--ad-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--abc-live);
  color: #fff;
  padding: 5px 11px;
}

/* ---- the live strip ------------------------------------------------------ */
.abc.abc .abc-live {
  background: var(--abc-live);
  color: #fff;
  max-width: 620px;
  margin: 0 auto 24px;
  padding: 13px 18px;
  text-align: center;
  font-family: var(--ad-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.abc.abc .abc-live b {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 4px;
}
.abc.abc .abc-live span { display: block; }

/* ---- messages ------------------------------------------------------------ */
.abc.abc .abc-errors {
  border-left: 3px solid var(--abc-miss);
  background: rgba(163, 64, 50, 0.07);
  padding: 14px 16px;
  margin: 0 auto 22px;
  max-width: 620px;
}
.abc.abc .abc-errors p {
  font-family: var(--ad-body);
  font-size: var(--t-small);
  color: var(--ad-text);
  margin: 0;
}
.abc.abc .abc-shut {
  border: 1px dashed var(--ad-rule);
  background: rgba(0, 0, 0, 0.02);
  padding: 26px;
  text-align: center;
  font-family: var(--ad-body);
  font-size: var(--t-small);
  color: var(--ad-muted);
  line-height: 1.6;
}
.abc.abc .abc-shut b { color: var(--ad-text); }
.abc.abc .abc-note {
  border-left: 3px solid var(--ad-gold);
  background: rgba(168, 117, 36, 0.07);
  padding: 14px 16px;
  margin: 22px 0 0;
  font-family: var(--ad-body);
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ad-text);
}
.abc.abc .abc-unknown {
  border-left: 3px solid var(--abc-miss);
  background: rgba(163, 64, 50, 0.07);
  padding: 14px 16px;
  margin: 20px 0 0;
  font-family: var(--ad-body);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ad-text);
}
.abc.abc .abc-unknown ul { margin: 8px 0 0; padding-left: 20px; }
.abc.abc .abc-unknown li { margin-bottom: 5px; }

/* ---- landing on a section, not under the header -------------------------- */
/* Every control on the staff screen reloads the page and names where to land.
   A fragment puts the target at y=0, which on this site is behind two fixed
   bars: Divi's header shrinks to 67px once the page has scrolled, and a signed-
   in leader also has the 32px admin bar above it. Landing at 0 would show the
   middle of a box with its heading hidden, which reads as jumping to the wrong
   place. 110px clears both and leaves a little air above the heading.

   Phones only need the admin bar: Divi releases the header below 981px, so it
   scrolls away with the page and 60px is the whole cover. */
.abc.abc [id^="abc-c-"],
.abc.abc #abc-window,
.abc.abc #abc-courses,
.abc.abc #abc-signins,
.abc.abc #abc-track { scroll-margin-top: 110px; }

@media (max-width: 980px) {
  .abc.abc [id^="abc-c-"],
  .abc.abc #abc-window,
  .abc.abc #abc-courses,
  .abc.abc #abc-signins,
  .abc.abc #abc-track { scroll-margin-top: 60px; }
}

/* ---- the staff boxes ----------------------------------------------------- */
.abc.abc .abc-box { border: 1px solid var(--ad-rule); background: var(--ad-surface); }
.abc.abc .abc-box-head {
  background: var(--ad-ink);
  color: #F2EDE3;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--ad-display);
}
.abc.abc .abc-k {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ad-gold);
  color: #14100C;
  padding: 4px 9px;
}
.abc.abc .abc-w { font-size: 15px; opacity: 0.78; }
.abc.abc .abc-box-body { padding: 30px 26px; }

/* ---- course cards -------------------------------------------------------- */
/* align-items:start, or every card grows to match whichever one has a panel
   open, leaving a hand's width of white space under the other three. */
.abc.abc .abc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 14px;
  align-items: start;
}
.abc.abc .abc-card {
  border: 1px solid var(--ad-rule);
  background: var(--ad-surface);
  padding: 17px 17px 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.abc.abc .abc-card.is-live { border-color: var(--abc-live); box-shadow: inset 0 0 0 1px var(--abc-live); }
.abc.abc .abc-card.is-done { background: var(--ad-surface2); }
.abc.abc .abc-meta {
  font-family: var(--ad-body);
  font-size: 15px;
  color: var(--ad-muted);
  line-height: 1.6;
  margin: 0;
}
.abc.abc .abc-meta b { color: var(--ad-text); }
.abc.abc .abc-state {
  font-family: var(--ad-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  align-self: flex-start;
  background: var(--ad-surface2);
  color: #4A5148;
}
.abc.abc .abc-state-live { background: var(--abc-live); color: #fff; }
.abc.abc .abc-state-done { background: var(--ad-ink); color: #F2EDE3; }
.abc.abc .abc-state-ext  { background: var(--ad-gold); color: #14100C; }
.abc.abc .abc-btns { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* week progress */
.abc.abc .abc-wk { display: flex; gap: 3px; flex-wrap: wrap; }
.abc.abc .abc-wk i {
  width: 13px; height: 13px; display: block;
  background: var(--ad-surface2);
  border: 1px solid var(--ad-rule);
}
.abc.abc .abc-wk i.is-done  { background: var(--abc-live); border-color: var(--abc-live); }
.abc.abc .abc-wk i.is-now   { background: var(--ad-gold);  border-color: var(--ad-gold); }
.abc.abc .abc-wk i.is-extra { background: transparent; border-color: var(--ad-gold); border-style: dashed; }
.abc.abc .abc-wk i.is-extra.is-done { background: var(--ad-gold); border-style: solid; }

/* the panel the Rota Manager answers */
.abc.abc .abc-panel { border-top: 1px solid var(--ad-rule); padding-top: 13px; margin: 0; }
.abc.abc .abc-panel label {
  font-family: var(--ad-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ad-muted);
  display: block;
  margin-bottom: 9px;
}
.abc.abc .abc-outcome {
  font-family: var(--ad-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ad-text);
  border-left: 3px solid var(--ad-gold);
  padding-left: 11px;
  margin: 11px 0 0;
}
/* This one is a sentence, not a field label — everything the label rule imposes
   has to be undone by name, or it renders in letterspaced uppercase and reads
   as shouting. font-size alone does not do it. */
.abc.abc .abc-mk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 0;
  font-family: var(--ad-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--ad-text2);
  cursor: pointer;
}
.abc.abc .abc-mk input { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 2px; accent-color: var(--ad-gold); }

/* ---- signing in ---------------------------------------------------------- */
.abc.abc .abc-signin + .abc-signin { margin-top: 34px; border-top: 1px solid var(--ad-rule); padding-top: 28px; }
.abc.abc .abc-ticks { display: flex; flex-direction: column; margin: 0 0 16px; }
.abc.abc .abc-ticks label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid var(--ad-rule);
  background: var(--ad-paper);
  font-family: var(--ad-body);
  font-size: 17px;
  cursor: pointer;
}
.abc.abc .abc-ticks label + label { border-top: 0; }
.abc.abc .abc-ticks input { width: 19px; height: 19px; flex: 0 0 19px; accent-color: var(--ad-gold); }

/* ---- the tracker --------------------------------------------------------- */
.abc.abc .abc-sum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px;
  background: var(--ad-rule);
  border: 1px solid var(--ad-rule);
  margin-bottom: 26px;
}
.abc.abc .abc-sum > div { background: var(--ad-surface); padding: 16px 18px; }
.abc.abc .abc-n {
  font-family: var(--ad-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ad-text);
}
.abc.abc .abc-n.abc-sm { font-size: var(--t-h4); }
.abc.abc .abc-n.is-warn { color: var(--abc-warn); }
.abc.abc .abc-n.is-bad  { color: var(--abc-miss); }
.abc.abc .abc-n.is-good { color: var(--abc-live); }
.abc.abc .abc-kk {
  font-family: var(--ad-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ad-muted);
  margin-top: 7px;
}

.abc.abc .abc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.abc.abc .abc-tabs a {
  font-family: var(--ad-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ad-rule);
  color: var(--ad-text2);
}
.abc.abc .abc-tabs a.is-on { background: var(--ad-gold); border-color: var(--ad-gold); color: #14100C; }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.abc.abc .abc-grid-wrap { overflow-x: auto; }
.abc.abc .abc-grid {
  border-collapse: collapse;
  width: 100%;
  min-width: 700px;
  font-family: var(--ad-body);
}
.abc.abc .abc-grid th,
.abc.abc .abc-grid td {
  border-bottom: 1px solid var(--ad-rule);
  padding: 10px 8px;
  text-align: center;
}
.abc.abc .abc-grid th {
  font-family: var(--ad-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ad-muted);
  vertical-align: bottom;
  line-height: 1.35;
}
.abc.abc .abc-grid th small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 3px;
}
.abc.abc .abc-grid thead th { border-bottom: 2px solid var(--ad-rule); }
.abc.abc .abc-grid th.is-live  { color: var(--abc-live); }
.abc.abc .abc-grid th.is-extra { color: var(--abc-warn); }
.abc.abc .abc-grid .abc-nm { text-align: left; white-space: nowrap; }
.abc.abc .abc-grid td.abc-nm { font-size: var(--t-small); color: var(--ad-text); }
.abc.abc .abc-grid tbody tr:hover { background: rgba(0, 0, 0, 0.02); }
.abc.abc .abc-empty { padding: 30px; color: var(--ad-muted); font-size: var(--t-small); }

.abc.abc .abc-dot {
  display: inline-block;
  width: 22px; height: 22px; line-height: 20px;
  border: 1px solid transparent;
  font-family: var(--ad-display);
  font-size: 12px;
  font-weight: 700;
}
.abc.abc .abc-dot.is-p { background: var(--abc-live); color: #fff; }
.abc.abc .abc-dot.is-a { background: var(--abc-miss); color: #fff; }
.abc.abc .abc-dot.is-n { background: transparent; border-color: var(--ad-rule); color: #9AA096; }
/* An absence a make-up week has covered. The cross STAYS — the person did miss
   that week and the record should keep saying so — and the ring says it no
   longer counts against them. */
.abc.abc .abc-dot.is-a.is-made {
  background: transparent;
  border: 2px solid var(--abc-miss);
  color: var(--abc-miss);
}

.abc.abc .abc-stand {
  font-family: var(--ad-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  white-space: nowrap;
  display: inline-block;
}
.abc.abc .abc-stand.is-ok   { color: var(--abc-live); background: rgba(15, 93, 78, 0.09); }
.abc.abc .abc-stand.is-edge { color: var(--abc-warn); background: rgba(168, 117, 36, 0.16); }
.abc.abc .abc-stand.is-out  { color: #fff; background: var(--abc-miss); }

/* ==========================================================================
   The staff section for anybody who cannot see it.

   The shortcode returns nothing at all — the roster is never queried, let alone
   printed — but Divi still writes the section wrapper, and an empty section is
   74px of unexplained space. This collapses it. Note the direction: the markup
   is absent FIRST and this only tidies up after. Hiding a rendered roster with
   CSS would leave every name and every absence in the page source.
   ========================================================================== */
body.abc-no-staff .ad-abc-staff { display: none; }

/* ---- narrow -------------------------------------------------------------- */
@media (max-width: 700px) {
  .abc.abc .abc-form { padding: 28px 20px; }
  .abc.abc .abc-box-body { padding: 22px 16px; }
  .abc.abc.abc-staff .abc-h { margin-top: 44px; }
}

/* ==========================================================================
   The enrolment form as a dialog on Connect

   The overlay element does not exist in the markup - abc.js creates it and
   moves the panel inside. So `display: none` here is safe in a way that
   hiding the panel itself would not be: without JavaScript there is no
   .abc-ov at all, and the panel renders inline at the foot of Connect exactly
   as the server sent it. The server never renders anything hidden.
   ========================================================================== */

.abc-ov.abc-ov {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;               /* over Divi's fixed header, which sits at 99999 */
  background: rgba(20, 16, 12, 0.62);
  padding: 4vh 16px;
  overflow-y: auto;
  align-items: flex-start;
  justify-content: center;
}

.abc-ov.abc-ov.is-open { display: flex; }

/* Stops the page behind scrolling under the dialog. overflow on <html> rather
   than <body>, because iOS ignores it on body. */
html.abc-noscroll { overflow: hidden; }

.abc-ov.abc-ov .abc-panel {
  position: relative;
  background: var(--ad-surface);
  width: 100%;
  max-width: 640px;
  border-radius: 3px;
  box-shadow: 0 18px 60px rgba(20, 16, 12, 0.34);
  padding: 26px 26px 30px;
  margin: 0;
}

.abc-ov.abc-ov .abc-panel:focus { outline: none; }

.abc-ov.abc-ov .abc-ov-x {
  position: absolute;
  top: 8px;
  right: 8px;
  /* 44px, not the 30px the glyph needs. This is the control somebody reaches
     for one-handed on a phone with the keyboard up. */
  min-width: 44px;
  min-height: 44px;
  font-size: 30px;
  line-height: 1;
  color: var(--ad-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.abc-ov.abc-ov .abc-ov-x:hover { color: var(--ad-ink); }
.abc-ov.abc-ov .abc-ov-x:focus-visible {
  outline: 3px solid var(--ad-gold);
  outline-offset: 2px;
}

/* The panel's own first heading sits under the close button otherwise. */
.abc-ov.abc-ov .abc-panel > .abc > *:first-child,
.abc-ov.abc-ov .abc-panel > .abc-form > *:first-child { margin-top: 0; }
.abc-ov.abc-ov .abc-panel h2,
.abc-ov.abc-ov .abc-panel h3 { padding-right: 44px; }

@media (max-width: 767px) {
  .abc-ov.abc-ov { padding: 0; }
  .abc-ov.abc-ov .abc-panel {
    max-width: none;
    min-height: 100%;
    border-radius: 0;
    padding: 22px 18px 30px;
  }
}

/* Inline - no JavaScript, so no overlay was ever created. Give the panel a
   little air so it does not run straight on from the call to action above it. */
.abc.abc.abc-panel { margin-top: var(--sp-4, 32px); }

/* ---- the registration period -------------------------------------------- */

.abc.abc .abc-window-state {
  font-family: var(--ad-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}
.abc.abc .abc-window-state.is-open { background: rgba(15, 93, 78, 0.12);  color: var(--ad-green); }
.abc.abc .abc-window-state.is-shut { background: rgba(163, 64, 50, 0.10); color: var(--ad-clay); }
.abc.abc .abc-window-state.is-none { background: rgba(108, 114, 105, 0.14); color: var(--ad-text2); }

.abc.abc .abc-window-dates {
  font-family: var(--ad-display);
  font-size: var(--t-label);
  color: var(--ad-muted);
  margin-left: auto;
}

.abc.abc .abc-window-note {
  font-size: var(--t-small);
  color: var(--ad-text2);
  margin: 0 0 var(--sp-3);
  max-width: 62ch;
}

/* Side by side where there is room, stacked on a phone. Two dates that belong
   to one period should not read as two unrelated settings. */
.abc.abc .abc-window-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: var(--sp-2) var(--sp-3);
  align-items: end;
}
.abc.abc .abc-window-form .abc-hint,
.abc.abc .abc-window-do { grid-column: 1 / -1; }

.abc.abc .abc-window-do {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}

.abc.abc .abc-quiet-btn {
  font-family: var(--ad-display);
  font-size: 16px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 var(--sp-2);
  color: var(--ad-text2);
  background: transparent;
  border: 2px solid var(--ad-rule);
  border-radius: 2px;
  cursor: pointer;
}
.abc.abc .abc-quiet-btn:hover { border-color: var(--ad-clay); color: var(--ad-clay); }

@media (max-width: 600px) {
  .abc.abc .abc-window-form { grid-template-columns: 1fr; }
  .abc.abc .abc-window-do .abc-btn,
  .abc.abc .abc-window-do .abc-quiet-btn { width: 100%; }
}

/* ---- the info button beside the heading ---------------------------------- */

.abc.abc .abc-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* The panel is positioned against this row, so it opens under the button
     rather than shoving the whole form down the page - which is the thing this
     was meant to fix. */
  position: relative;
  margin-bottom: var(--sp-2);
}

.abc.abc .abc-head .abc-h { margin: 0; }

.abc.abc .abc-info { position: static; }

.abc.abc .abc-info-btn {
  /* list-style, not ::-webkit-details-marker alone - Firefox and Safari use
     different mechanisms for the disclosure triangle and leaving either one
     puts an arrow beside the "i". */
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--ad-gold);
  color: var(--ad-gold);
  font-family: var(--ad-display);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  cursor: pointer;
  user-select: none;
}
.abc.abc .abc-info-btn::-webkit-details-marker { display: none; }
.abc.abc .abc-info-btn::marker { content: ''; }

/* 34px is right beside a heading and wrong under a thumb. Asked of the browser
   rather than inferred from the width, because the page cache varies on
   User-Agent here and a width query would hand a phone the desktop answer. */
@media (pointer: coarse) {
  .abc.abc .abc-info-btn { width: 44px; height: 44px; font-size: 20px; }
}

.abc.abc .abc-info-btn:hover { background: var(--ad-gold); color: var(--ad-paper); }
.abc.abc .abc-info-btn:focus-visible {
  outline: 3px solid var(--ad-gold);
  outline-offset: 3px;
}
.abc.abc .abc-info[open] .abc-info-btn { background: var(--ad-gold); color: var(--ad-paper); }

.abc.abc .abc-info-body {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--ad-surface);
  border: 1px solid var(--ad-rule);
  border-left: 4px solid var(--ad-gold);
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(20, 16, 12, 0.16);
  padding: var(--sp-3);
  max-width: 62ch;
}

.abc.abc .abc-info-body p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ad-text2);
  margin: 0 0 var(--sp-2);
}
.abc.abc .abc-info-body p:last-child { margin-bottom: 0; }

/* Visually hidden, still announced - the button's only visible content is an
   "i", which is not a label. */
.abc.abc .abc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .abc.abc .abc-info-body { padding: var(--sp-2); }
}