/* ICGC Celebrations - the card at the foot of Connect, and its dialog.
   ===========================================================================

   .cel.cel, NOT .cel. The class is doubled on purpose, exactly as abc.css
   doubles .abc. adinkra.css sets font-family, font-size and line-height on
   every `p` inside a page section, and that rule is written LATER in a sheet
   8,800 lines long - so a single-class rule here weighs the same and loses on
   source order alone. The symptom is not an error: the card renders in the body
   serif at the page's own size and looks like a card somebody forgot to style.

   Everything here is measured against the five cards already in that row. They
   have to carry the same button, because side by side a difference reads as a
   mistake rather than as a distinction - which is why every value below is
   lifted from abc.css rather than chosen afresh.
   ========================================================================== */

/* ---- the card itself -----------------------------------------------------
   IT IS A CARD, and nothing else on the page will make it one. The row's
   chrome - white ground, 1px rule, flex column, padding - is written out once
   per card in that card's OWN stylesheet: abc.css and testimony.css share one
   rule, announce.css restates it, forms.css restates it again. There is no
   shared class to join. Shipped without this block the Celebrate card rendered
   as bare text on the beige band beside three white boxes, with a 48px title
   where its neighbours run 25px, and nothing errored - a missing rule and a
   rule that never matched look exactly alike.

   Every number here was MEASURED off the live cards on 26 September 2026
   rather than read off their stylesheets, which is the method announce.css
   used and for the reason that file gives: what abc.css declares for its
   eyebrow is not what the eyebrow computes to, so copying the declaration
   would have put this card 2px and 0.04em away from the row it is joining.
   The measurements, at 1440px: card 26/22/24 on white inside a 1px
   rgb(213,218,206) rule; eyebrow 15px at 0.16em, margin 0 0 10px, 6px below;
   title 25px at 1.1 and -0.01em, margin 0 0 12px; lede 18px at 1.6, 0 0 18px;
   button 16px at 0.13em, 15/30 on the border box. Below 981px the row loosens
   to 34/30/30 with a 34px title - that is the forms.css breakpoint, restated
   here so this card does not depend on forms.css being enqueued.

   If you change one of these, measure all four cards afterwards. Side by side
   a difference reads as a mistake rather than as a distinction, which is the
   sentence abc.css opens its own version of this block with.
   ========================================================================= */
.cel.cel-cta {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--ad-surface);
  border: 1px solid var(--ad-rule);
  padding: 34px 30px 30px;
  margin: 0;
  box-sizing: border-box;
}

.cel.cel .cel-cta-eyebrow {
  font-family: var(--ad-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ad-gold);
  margin: 0 0 10px;
  padding-bottom: 6px;
}
.cel.cel .cel-cta-title {
  font-family: var(--ad-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ad-text);
  margin: 0 0 12px;
  text-wrap: balance;
}
.cel.cel .cel-cta-lede {
  font-family: var(--ad-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ad-text2);
  max-width: 62ch;
  margin: 0 0 18px;
  /* NO `margin-inline: auto` here, though announce.css has it. The card is a
     flex column, and an auto cross-axis margin on a flex item cancels
     `align-items: stretch` - the box then shrink-wraps the text. It makes no
     difference to the three cards beside this one, because their ledes are
     long enough to fill the card anyway; this one is a single short line, so
     it came out 258px wide inside a 276px card while its neighbours were 276.
     Invisible with the text centred, and still wrong. */
}

/* Pushed to the foot, so all four buttons in the row land on one line however
   tall the middle of a card grows. */
.cel.cel .cel-cta-go { margin: auto 0 0; }

/* box-sizing is the load-bearing word, and the note is in abc.css: min-height
   44px on a CONTENT box is not a 44px touch target, it is 44px on top of the
   padding. Scoped to the card, because the panel's own Send It In button sits
   in a form rather than in a row of four. */
/* THE BUTTON'S SIZE IS NOT SET HERE. It was, for about an hour on 26 September
   2026, and that was the wrong place: this card was pinned to the box two
   lines make while its three neighbours went on shrink-wrapping their labels,
   so the row was even at the widths where their words happened to wrap and
   ragged everywhere else. The fix belongs to the ROW, and the row's
   cross-card rules live in forms.css - see the long note there. All this file
   sets is the padding, which forms.css restates anyway; it is kept so a card
   rendered outside that row is not a bare browser button. */
.cel.cel.cel-cta .cel-btn {
  box-sizing: border-box;
  padding: 15px 30px;
  min-height: 44px;
}

/* The row loosens below the desktop breakpoint, and tightens again on a
   phone - both restated from the cards beside this one. */
@media (min-width: 981px) {
  .cel.cel-cta { padding: 26px 22px 24px; }
  .cel.cel .cel-cta-title { font-size: var(--t-h4, 24px); line-height: 1.1; letter-spacing: -0.01em; }
}
@media (max-width: 700px) {
  .cel.cel-cta { padding: 26px 20px 24px; }
}

.cel.cel .cel-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;
}
.cel.cel .cel-btn:hover {
  background: var(--ad-gold-bright);
  border-color: var(--ad-gold-bright);
}

/* ---- the panel, before and after the script reaches it --------------------
   Unupgraded it is an ordinary block at the foot of the page: a bordered form
   somebody can fill in. .is-dialog is added by celebrate.js and only then does
   any of the fixed positioning below apply, so nothing here can hide the form
   from somebody whose browser never ran the script.
   ========================================================================== */
.cel.cel-panel {
  max-width: 34rem;
  margin: 28px auto 0;
  padding: 28px;
  background: var(--ad-paper);
  border: 1px solid var(--ad-rule, rgba(20,16,12,.14));
}
.cel.cel-panel.is-dialog {
  position: fixed;
  z-index: 10001;          /* over the site header, which sits at 10000 */
  inset: auto 50% auto auto;
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(34rem, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(20, 16, 12, .35);
}
.cel-veil {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(20, 16, 12, .55);
}
html.cel-open { overflow: hidden; }

.cel.cel .cel-close {
  float: right;
  width: 44px;
  height: 44px;
  margin: -12px -12px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 30px;
  line-height: 1;
  color: var(--ad-text2);
  cursor: pointer;
}
.cel.cel .cel-close:hover { color: var(--ad-text); }

/* ---- the form ------------------------------------------------------------ */
.cel.cel .cel-form { text-align: left; }
.cel.cel .cel-field { margin: 0 0 20px; }
.cel.cel .cel-field label {
  display: block;
  font-family: var(--ad-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ad-text);
  margin: 0 0 7px;
}
.cel.cel .cel-field input[type="text"],
.cel.cel .cel-field input[type="file"],
.cel.cel .cel-field select {
  width: 100%;
  font-family: var(--ad-body);
  font-size: 17px;
  line-height: 1.5;
  padding: 13px 14px;
  min-height: 44px;
  border: 1px solid var(--ad-rule, rgba(20,16,12,.24));
  background: #fff;
  color: var(--ad-text);
}
.cel.cel .cel-hint {
  display: block;
  font-family: var(--ad-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ad-text2);
  margin-top: 7px;
}

/* A said-out-loud answer, not a colour. Green on paper measures badly here and
   somebody who cannot tell the two apart still has the sentence. */
.cel.cel .cel-note {
  font-family: var(--ad-body);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 4px solid var(--ad-gold);
  background: rgba(184, 128, 31, .10);
  color: var(--ad-text);
}
.cel.cel .cel-note-bad {
  border-left-color: #A3341F;
  background: rgba(163, 52, 31, .10);
}

/* ---- the list behind Media Ministry -------------------------------------- */
.cel-admin { margin: 0; }
.cel-admin .cel-week { margin: 0 0 32px; }
.cel-admin .cel-week h3 { margin: 0 0 10px; }

/* A finished week folds away, and the heading inside the <summary> is the same
   <h3> the open week uses - so a folded week is set in the same type rather
   than in whatever a summary inherits, without measuring anything. The h3 goes
   inline because <summary> is a list-item: a block heading inside it drops
   below the disclosure triangle and leaves the marker stranded on its own line.
   A folded week is 32px from the next, like an open one, so the list does not
   tighten up as weeks close. */
.cel-admin details.cel-week { margin: 0 0 14px; }
.cel-admin details.cel-week[open] { margin-bottom: 32px; }
.cel-admin details.cel-week > summary {
  cursor: pointer;
  padding: 6px 0;
}
.cel-admin details.cel-week > summary h3 {
  display: inline;
  margin: 0;
}
.cel-admin details.cel-week > summary:hover h3 { color: var(--ad-gold); }
.cel-admin details.cel-week[open] > summary { margin-bottom: 10px; }

/* The count is the whole point of a folded row - it says whether that week is
   worth opening without opening it. Quiet, and not the --ad-text2 grey, which
   measures badly on this ground for text this small. */
.cel-admin .cel-tally {
  font-family: var(--ad-body);
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: #6B6F68;
}
.cel-admin .cel-now {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A6414;
}
.cel-admin .cel-table { width: 100%; border-collapse: collapse; }
.cel-admin .cel-table th,
.cel-admin .cel-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(20, 16, 12, .12);
  vertical-align: middle;
}
.cel-admin .cel-table th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cel-admin .cel-thumb { display: inline-block; margin: 0 6px 0 0; }
.cel-admin .cel-thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;    /* the slide crops to a circle, so the list does too */
  display: block;
}
/* Not a grey. A "waiting" that measures 1.6:1 on this ground reads as a page
   that failed to render rather than as a row with nothing in it yet - the same
   arithmetic that put --so-spent in outline.css. */
.cel-admin .cel-waiting {
  font-size: 14px;
  font-style: italic;
  color: #6B6F68;
}
.cel-admin .cel-built {
  font-size: 13px;
  color: #6B6F68;
  margin: 8px 0 0;
}