/* ===========================================================================
   ICGC Praise Temple - Service outline (run sheet)

   Loaded only on the page carrying [icgc_service_outline].

   TIERS, made legible at a glance because that distinction is the page:

     auto      filled from the duty schedule     no card, names in roster colours
     week      written for this Sunday           white card, ink edge
     standing  said every Sunday                 white card, gold edge
     manager   the notifications                 white card, ink edge, own tag
     fixed     the congregational declaration    hairline rule, no card
     cue       a direction, not words to read    quiet italic, no card

   Green and clay carry meaning elsewhere on this site - "in person" versus
   "online" - so neither is spent here. Gold and ink do the work.

   ---------------------------------------------------------------------------
   WHY EVERY SELECTOR REPEATS ITS CLASS: `.so.so` not `.so`

   The outline renders inside a Divi text module inside an .ad-sec section, so
   adinkra.css is aiming rules straight at it:

       .ad-sec .et_pb_text_inner p   (0,2,1)   font-size 19px, body serif
       .ad-sec .et_pb_text_inner a   (0,2,1)   colour gold
       .ad-sec h1, .ad-sec h2, ...   (0,1,1)   text-align center

   A single-class rule here is (0,1,0) and loses every one of those - measured,
   not assumed: the eyebrow came out 19px Iowan instead of 13px Futura, the
   headings came out centred, and the solid button rendered gold-on-gold with
   its label invisible.

   Repeating the class costs one token and takes the scope to (0,2,0), so a rule
   targeting a child lands at (0,3,0) and wins on class count. Prefixing with
   .ad-sec instead would tie this file to a wrapper it does not own and would
   style nothing at all if the shortcode were placed on a page without the
   design system. !important is the third option and the worst: adinkra.css
   would have to escalate to match, and the next person inherits a war.

   ---------------------------------------------------------------------------
   READING COLOUR

   Body copy is #242821, not the site's usual #5A6158. That grey is right for
   marketing prose read once at a desk; this sheet is read off a phone held at
   arm's length, in a room lit for worship rather than for reading, by someone
   who is about to say the words out loud. Contrast on paper is 13.4:1 here
   against 6.9:1 before. Headings and labels darkened to match.
   ========================================================================= */

.so {
  --so-ink:      #14100C;
  --so-paper:    #EFF1EC;
  --so-surface:  #FFFFFF;
  --so-gold:     #A87524;
  --so-gold-dk:  #6B4E17;
  --so-text:     #14170F;   /* headings */
  --so-read:     #242821;   /* body copy - deliberately dark, see above */
  --so-muted:    #555B51;   /* labels and meta */
  --so-rule:     #D5DACE;
  /* A control that is present but exhausted. --so-rule was the obvious choice
     and measured 1.25:1 against the paper, which is not faded - it is gone, and
     an arrow that vanishes reads as a page that failed to render rather than as
     one edge of a range. 2.5:1 is legible without competing with the live arrow
     beside it at 6.8:1. */
  --so-spent:    #939A8F;

  --so-display: Futura, "Avenir Next", "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
  --so-body:    "Iowan Old Style", "Hoefler Text", Palatino, "Palatino Linotype", Georgia, serif;
}

/* 1080, not 860, and the number was picked by measuring rather than by taste.
 *
 * The reading text inside the blocks was landing at 51 characters a line, well
 * under the 66-75 that is comfortable - the sheet was too NARROW, not too wide.
 * At 1080 it measures about 71. The site's own rows cap at 1180, which would
 * take it past 78 and start costing accuracy on the return sweep to the next
 * line, so this deliberately stops short of the row rather than filling it.
 *
 * Only in effect above 1080px. A max-width does nothing when there is less room
 * than the cap, so every phone and tablet is untouched by this - measured
 * across five combinations, the 390px layout did not move by a pixel. The
 * outline's own breakpoints are at 380, 640, 700 and 900 plus pointer:coarse,
 * all of them below even the old 860, so none is being crossed either. */
.so.so {
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
  color: var(--so-read);
  font-family: var(--so-body);
  font-size: 18px;
  line-height: 1.6;
}

/* The cap that was ACTUALLY holding the sheet in, and it was not the one above.
 *
 * adinkra.css carries
 *
 *     .ad-sec .et_pb_text_inner ul, .ad-sec .et_pb_text_inner ol { max-width: 68ch }
 *
 * which is right for a prose bullet list and wrong for this: the run sheet is an
 * <ol>, so it inherited a measure written for something else and stopped at
 * about 719px. Raising the container alone changed nothing at all - the sheet
 * stayed 719px wide and the line length stayed at 51 - it simply re-centred in
 * a wider box.
 *
 * (0,3,0) against adinkra's (0,2,1), so it wins on class count rather than by
 * escalating. Scoped here rather than adding a :not() to adinkra.css, because
 * that rule is doing its job on every other page and this is the one exception. */
.so.so .so-run { max-width: none; }

/* Divi centres text modules; a run sheet is reading copy. */
.so.so p,
.so.so h2,
.so.so h3,
.so.so li { text-align: left; }

/* ---- gate ---------------------------------------------------------------- */
.so-gate.so-gate {
  max-width: 460px;
  margin: 0 auto;
  padding: 40px 34px 34px;
  background: #fff;
  border: 1px solid #D5DACE;
  text-align: center;
}
.so-gate.so-gate .so-gate-eyebrow {
  font-family: Futura, "Avenir Next", "Century Gothic", sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #A87524; margin: 0 0 10px; text-align: center;
}
.so-gate.so-gate .so-gate-title {
  font-family: Futura, "Avenir Next", "Century Gothic", sans-serif;
  font-size: 30px; font-weight: 500; margin: 0 0 12px; color: #14170F; text-align: center;
}
.so-gate.so-gate .so-gate-note {
  color: #242821; margin: 0 0 24px; font-size: 18px; text-align: center;
}

/* ---- header -------------------------------------------------------------- */
.so.so .so-head {
  border-bottom: 2px solid var(--so-ink);
  padding-bottom: 20px;
  margin-bottom: 30px;
}
/* The date and the service type are centred; everything below them stays left,
   because the run sheet is read line by line down the page and centred body
   copy is slower to scan. Only these two are the "which Sunday is this"
   heading, and they read as a unit sitting above the rule. */
.so.so .so-date {
  font-family: var(--so-display);
  font-size: clamp(30px, 4vw, 40px); font-weight: 700; line-height: 1.1;
  letter-spacing: -0.01em; color: var(--so-text); margin: 0;
  text-align: center;
}
/* The service title - Father's Day, Communion Service, Thanksgiving. It was set
   at 17px, quieter than the date above it, which is the wrong way round on a
   day that is not an ordinary Sunday: the date tells you which week, the title
   tells you what is different about it. */
.so.so .so-service-title {
  font-family: var(--so-display);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--so-gold-dk); margin: 10px 0 0; line-height: 1.25;
  text-align: center;
}

/* Communion in clay. Not the site's brightest red - that is reserved for
   errors, and this is not one - but unmistakably not the gold used for every
   other Sunday. Contrast against paper is 5.9:1, so it stays legible rather
   than becoming decoration. */
.so.so .so-service-title.so-communion { color: #9B2C1B; }

.so.so .so-warn,
.so.so .so-saved {
  font-family: var(--so-display);
  font-size: 15px; line-height: 1.5; margin: 14px 0 0; padding: 11px 14px;
}
.so.so .so-warn  { background: #FBF3E3; border-left: 3px solid var(--so-gold); color: #5A4111; }
.so.so .so-saved { background: #E4EDE6; border-left: 3px solid #0F5D4E; color: #123A31; }
.so.so .so-warn a { color: #5A4111; text-decoration: underline; }

/* Previous | Edit this week | Next, on one line.
 *
 * A three-column grid rather than flex with space-between: the two links are
 * not the same width, so space-between would put the button at the midpoint of
 * the leftover space rather than the middle of the row - off-centre by half the
 * difference, which is visible. Equal 1fr tracks either side centre it against
 * the page no matter what the links say.
 *
 * The middle track is auto, so with no edit button - a viewer, or while already
 * editing - it collapses to nothing and the two links still sit at the ends.
 */
.so.so .so-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
}
.so.so .so-nav .so-navlink { justify-self: start; }
.so.so .so-nav .so-nav-action { justify-self: center; }
.so.so .so-nav .so-navlink-next { justify-self: end; }
.so.so .so-navlink {
  font-family: var(--so-display);
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--so-gold-dk); text-decoration: none;
  padding: 6px 0;   /* a real tap target on a phone */
}
.so.so .so-navlink:hover { text-decoration: underline; color: var(--so-gold); }

/* An arrow the window will not follow. Same box, same place - only the colour
   and the pointer say it is spent, so nothing in the bar moves when a Member
   reaches the far end of the month. The duty roster draws the same control in
   --s-rule and it is invisible there too; this is the corrected tone. */
.so.so .so-navlink-off {
  color: var(--so-spent);
  cursor: default;
}
.so.so .so-navlink-off:hover { text-decoration: none; color: var(--so-spent); }

/* Why the arrow is spent. Without this the page looks broken rather than
   bounded - "next Sunday" being unclickable in the middle of a month reads as a
   bug, and the person it reads that way to is the one who cannot fix it. */
.so.so .so-scope-note {
  font-family: var(--so-body);
  font-size: 15px;
  color: var(--so-muted);
  margin: 12px 0 0;
  max-width: 62ch;
}


.so.so .so-meta {
  font-family: var(--so-display);
  font-size: 14px; color: var(--so-muted); margin: 14px 0 0;
}

/* ---- buttons ------------------------------------------------------------- */
.so.so .so-btn,
.so-gate.so-gate .so-btn {
  display: inline-block;
  font-family: Futura, "Avenir Next", "Century Gothic", sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 14px 22px; border: 2px solid #A87524; min-height: 44px;
  cursor: pointer; text-decoration: none; border-radius: 0; line-height: 1.2;
  box-sizing: border-box;
}
.so.so .so-btn-solid,
.so-gate.so-gate .so-btn-solid { background: #A87524; color: #14100C; }
.so.so .so-btn-solid:hover,
.so-gate.so-gate .so-btn-solid:hover { background: #C08A2E; border-color: #C08A2E; color: #14100C; }
.so.so .so-btn-line { background: transparent; color: #7A5518; }
.so.so .so-btn-line:hover { background: #A87524; color: #14100C; }
.so.so .so-btn-small { font-size: 13px; padding: 11px 16px; letter-spacing: 0.09em; }
.so.so .so-btn[disabled] { opacity: 0.5; cursor: default; }

/* ---- the run sheet ------------------------------------------------------- */
.so.so .so-run { list-style: none; margin: 0; padding: 0; }
.so.so .so-run > li { list-style: none; margin: 0 0 34px; padding: 0; }

/* Underlined, and in ink rather than the hairline grey it used to be.
 *
 * The rule was --so-rule at 1px, which is the same line used between two
 * notices and under a block label - so the nine section headings, which are the
 * one structure on this sheet, were separated by the quietest line the page
 * owns. On paper the print stylesheet has always drawn them in solid black at
 * 1pt; this is the screen agreeing with the page it prints.
 *
 * 2px ink, matching the rule under the date at the top: both say "a new part of
 * the sheet starts here", and there is no reason for them to say it in two
 * different voices. */
.so.so .so-seg-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-bottom: 2px solid var(--so-ink);
  padding-bottom: 8px; margin-bottom: 16px;
}
/* The badge takes --so-gold-dk, not --so-gold, and this is the one place on the
   page where that distinction is not taste.

   The number is 13px, which WCAG treats as small text at a 4.5:1 bar. White on
   --so-gold measures 4.01:1 and fails it; white on --so-gold-dk measures 7.70:1.
   The title beside it is 22px bold, which counts as LARGE text at a 3:1 bar, so
   --so-gold at 3.53:1 passes there. Same colour family, two different answers,
   because they are two different sizes.

   White rather than --so-paper: on a mid-tone badge the paper tint costs about
   a point of contrast for nothing. */
.so.so .so-seg-num {
  font-family: var(--so-display);
  font-size: 13px; font-weight: 700;
  background: var(--so-gold-dk); color: #FFFFFF;
  width: 24px; height: 24px; flex: 0 0 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* flex-basis 0, not auto, is what keeps the number badge beside the title.
 *
 * With flex-wrap on, the browser decides where the lines break using each
 * item's CONTENT width, and only then shrinks what is on each line. So a long
 * title - "Word Ministration (Pray for Tithers - 2nd and 4th Sunday)" - is
 * measured at its full width, does not fit beside the number, and the whole
 * item moves to the next flex line. min-width:0 does not help: it permits
 * shrinking, and shrinking happens after the line break has already been made.
 *
 * The visible result was not a wrapped title. It was the number alone on one
 * row, the title on a second and the time on a third, while every other section
 * is a single row - section 7 stopped looking like a section.
 *
 * A basis of zero makes the title measure as nothing when lines are decided, so
 * it always fits beside the number, then grows into whatever room is left and
 * wraps its text inside itself. Wrapping words is intended; wrapping the layout
 * is not.
 */
/* Gold, so the nine section names carry from arm's length in a room lit for
   worship rather than for reading.
 *
 * Gold and NOT the clay used for a communion Sunday, which was the obvious
 * first answer and the wrong one. #9B2C1B is how this page says THIS Sunday is
 * communion - it is the single title not in gold. Spend it on all nine headings
 * and the service title stops being marked by colour at all; it would keep only
 * its size and centring. Gold costs nothing here because it is already the
 * page's second voice - the eyebrow, the buttons, the service title on an
 * ordinary Sunday.
 *
 * 3.53:1 on paper. Under the 4.5 wanted for body text and over the 3.0 WCAG
 * asks of large text, which this is at 22px/700. The badge is 13px and is a
 * different question - see the note there. */
.so.so .so-seg-title {
  font-family: var(--so-display);
  font-size: 22px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.25;
  color: var(--so-gold); margin: 0; flex: 1 1 0; min-width: 0; padding: 0;
}

/* A qualifier under a section name - "Pray for Tithers - 2nd and 4th Sunday".
 *
 * Small and regular weight on purpose. It is a condition on the section, not
 * part of what the section is called, and at heading size it competed with the
 * name for the same glance. Two thirds the size and off the bold puts it a
 * clear step down, so the eye reads "Word Ministration" first and finds the
 * condition only when it is looking for it.
 *
 * display:block is what puts it on its own line while staying inside the h3 -
 * see the note in the template on why it is not a flex child of its own.
 */
.so.so .so-seg-sub {
  display: block;
  font-family: var(--so-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--so-muted);
  margin-top: 3px;
}

/* A heading inside a segment - "Notifications" under the call to worship.
 *
 * Set to match a numbered segment heading: same face, same weight, same rule
 * beneath. The number is what it deliberately lacks, because it is not a step
 * in the running order and numbering it would renumber every segment below.
 *
 * Slightly smaller than a segment title so the hierarchy still reads on a
 * sheet being followed at a glance - same voice, one level down.
 */
.so.so .so-block-heading {
  font-family: var(--so-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--so-text);
  margin: 26px 0 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--so-rule);
}
.so.so .so-block-heading:first-child { margin-top: 0; }

@media (max-width: 380px) {
  .so.so .so-block-heading { font-size: 17px; }
}
/* margin-left:auto, not just the title's flex-grow. A long segment name -
   "Closing - visitors, birthdays and benediction" - takes the whole line and
   wraps the time onto the next one, where flex-grow has nothing left to push
   against and the time lands hard left under the number, reading as a stray
   heading. Pushed right explicitly, it stays a time.
   The pair is wrapped so the duration never strands on a third line. */
.so.so .so-seg-when {
  margin-left: auto;
  display: inline-flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
}
.so.so .so-seg-time {
  font-family: var(--so-display);
  font-size: 17px; font-weight: 700; color: var(--so-text);
  font-variant-numeric: tabular-nums;
}
.so.so .so-seg-dur {
  font-family: var(--so-display);
  font-size: 14px; color: var(--so-muted); letter-spacing: 0.03em;
}

.so.so .so-seg-body { padding-left: 36px; }

/* ---- tier tags ----------------------------------------------------------- */
.so.so .so-tag {
  display: inline-block;
  font-family: var(--so-display);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 7px; margin-left: 8px; vertical-align: 2px; line-height: 1.2;
  white-space: nowrap;
}
.so.so .so-tag-auto     { background: #F0E2C6; color: #5A4111; }
.so.so .so-tag-week     { background: var(--so-ink); color: var(--so-paper); }
/* Carried and monthly are both "already written, still yours to change", so
   they read as a lighter version of THIS WEEK rather than a different family. */
.so.so .so-tag-carried  { background: #DCE0D7; color: #2A2F26; }
.so.so .so-tag-monthly  { background: #DCE0D7; color: #2A2F26; }
.so.so .so-tag-standing { background: transparent; color: var(--so-gold-dk); border: 1px solid var(--so-gold); }
.so.so .so-tag-notice   { background: transparent; color: var(--so-text); border: 1px solid var(--so-ink); }
.so.so .so-tag-fixed    { background: transparent; color: var(--so-muted); border: 1px solid var(--so-rule); }
.so.so .so-tag-cue      { background: transparent; color: var(--so-muted); font-style: italic; letter-spacing: 0.06em; }

/* ---- blocks -------------------------------------------------------------- */
.so.so .so-block { margin: 0 0 18px; }
.so.so .so-block:last-child { margin-bottom: 0; }

.so.so .so-block-label {
  font-family: var(--so-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--so-muted); margin: 0 0 7px; line-height: 1.5;
}

.so.so .so-text p { margin: 0 0 11px; font-size: 18px; line-height: 1.6; color: var(--so-read); }
.so.so .so-text p:last-child { margin-bottom: 0; }

/* auto - roster colours come straight from the schedule's own renderer, so a
   person is the same colour on the calendar and on the run sheet. The colour
   itself is inline; only weight and the separator belong here. */
.so.so .so-block-auto .so-name {
  font-family: var(--so-display);
  font-size: 21px; font-weight: 700; color: var(--so-text); margin: 0; line-height: 1.4;
}
.so.so .so-name .sch-name { font-weight: 700; }
.so.so .so-name .sch-name-tbd { font-weight: 400; color: var(--so-muted); font-style: italic; }
.so.so .so-name .sch-name-sep { color: var(--so-rule); margin: 0 6px; font-weight: 400; }
.so.so .so-block-auto .so-name-empty {
  font-weight: 400; font-size: 17px; color: var(--so-muted); font-style: italic;
}

/* The ministration line is a sentence, not a name.
 *
 * Every other auto block is two or three words - a person - so 21px bold is
 * right for them. The same treatment on a twenty-word sentence turns the whole
 * line into a shout and, worse, flattens it: the names stop standing out
 * because everything around them is already as heavy as they are.
 *
 * Dropping the connective words to regular weight lets .sch-name do its job.
 * The names keep their 700 and their roster colour and become the thing the eye
 * lands on, which is what somebody glancing down mid-service is looking for.
 */
.so.so .so-block-ministration .so-name {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
}

/* Who is actually preaching, when the spoken line does not name them. Quiet on
   purpose - it is information for the people running the service, not a line to
   be read out, and it must not be mistaken for one. */
.so.so .so-ministration-who {
  font-family: var(--so-display);
  font-size: 15px;
  color: var(--so-muted);
  margin: 8px 0 0;
  line-height: 1.5;
}
.so.so .so-ministration-who .sch-name { font-weight: 700; }

/* week - written for this Sunday */
.so.so .so-block-week {
  background: var(--so-surface);
  border: 1px solid var(--so-rule);
  border-left: 3px solid var(--so-ink);
  padding: 15px 17px;
}
.so.so .so-block-week .so-block-label { color: var(--so-text); }

/* carried and monthly - stored per date (or per month) like a week block, so
   the same card, with a softer edge: the words are already there and were not
   typed by whoever is looking at the sheet now. */
.so.so .so-block-carried,
.so.so .so-block-monthly {
  background: var(--so-surface);
  border: 1px solid var(--so-rule);
  border-left: 3px solid #8A9184;
  padding: 15px 17px;
}
.so.so .so-block-carried .so-block-label,
.so.so .so-block-monthly .so-block-label { color: var(--so-text); }

/* remove-a-notice: a link, not a button. It sits inside a list of boxes and a
   third bordered control per row would compete with the fields themselves. */
.so.so .so-notice-tools { margin: 2px 0 0; text-align: right; }
.so.so .so-linkbtn {
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font-family: var(--so-display); font-size: 13px; letter-spacing: 0.04em;
  color: #8A4A3C; text-decoration: underline; min-height: 32px;
}
.so.so .so-linkbtn:hover { color: #A34032; }

/* standing - editable, but the edit lands on every Sunday, so the edge is gold
   rather than ink: close enough to read as "you may type here", different
   enough to make you look twice before you do. */
.so.so .so-block-standing {
  background: var(--so-surface);
  border: 1px solid var(--so-rule);
  border-left: 3px solid var(--so-gold);
  padding: 15px 17px;
}
.so.so .so-block-standing .so-block-label { color: var(--so-text); }

/* fixed - present but quiet; you check it is there, you do not read it fresh */
.so.so .so-block-fixed {
  border-left: 1px solid var(--so-rule);
  padding-left: 15px;
}

/* The offering declaration is styled further down, under "THE DECLARATION READS
   AS A CUE". There used to be a second rule for it here, setting font and
   spacing that the later one silently overrode - same specificity, later in the
   file, so this copy never won and editing it appeared to do nothing. One rule
   now, where the treatment is actually described. */

/* cue - said aloud
 *
 * These were set as quiet italic stage directions on the assumption that they
 * were instructions to the person running the service. They are not: all four
 * are sentences read into a microphone - "Kindly turn your attention to the
 * screens", "The Zee Band will minister to us". Something you have to say at a
 * specific moment, while looking up at a congregation, has to be findable at a
 * glance, so they are now the most prominent short lines on the sheet: bold,
 * larger than body copy, and in full contrast rather than muted.
 *
 * The band's name is no longer fixed - the two offering cues are composed from
 * whichever band the duty schedule names for that month. */
.so.so .so-block-cue { margin: 18px 0; }
.so.so .so-cue {
  font-family: var(--so-display);
  font-size: 20px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.4;
  color: var(--so-text); margin: 0;
}
.so.so .so-cue::before { content: "\25B8\00A0"; color: var(--so-gold); }

.so.so .so-empty {
  font-style: italic; color: var(--so-muted); font-size: 17px; margin: 0;
}

/* ---- notifications ------------------------------------------------------- */
.so.so .so-notices { list-style: none; margin: 0; padding: 0; }
.so.so .so-notices > li {
  list-style: none;
  margin: 0 0 15px; padding: 0 0 15px;
  border-bottom: 1px dotted var(--so-rule);
}
.so.so .so-notices > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.so.so .so-notice-title {
  font-family: var(--so-display);
  font-size: 15px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--so-gold-dk); margin: 0 0 6px; line-height: 1.4;
}

/* ---- the flyer on a notice ------------------------------------------------
   Under the spoken copy, not inside it. Whoever reads the sheet aloud should be
   able to pass it without their eye catching; whoever makes the slides on a
   Saturday needs to find it. So it is small, labelled and set apart.

   .so.so like everything else here — Divi's own rules reach a bare .so-* class
   and win, which on this page shows up as a link that is suddenly the body
   typeface and the body colour. */
.so.so .so-notice-flyer {
  margin: 8px 0 0;
  font-size: 14px;
}
.so.so .so-notice-flyer-img {
  display: block;
  max-width: 220px;
  height: auto;
  border: 1px solid var(--so-rule);
  border-radius: 3px;
  margin: 0 0 6px;
}
.so.so .so-notice-flyer-link {
  color: var(--so-gold-dk);
  text-decoration: underline;
}

@media print {
  /* A run sheet is printed to be read from, and the artwork is not the thing
     being read. The link's TEXT stays, so the printed sheet still records that
     a flyer exists and somebody can go and find it. */
  .so.so .so-notice-flyer-img { display: none; }
}

/* ---- editing ------------------------------------------------------------- */
.so.so .so-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; margin: 0 0 8px;
  border: 1px solid #B9BFB3; background: #FCFDFB;
  /* 16px minimum: anything smaller makes iOS Safari zoom the whole page on
     focus, and the person then has to pinch back out to reach Save. */
  font-family: var(--so-body); font-size: 17px; line-height: 1.5;
  color: var(--so-text);
}
.so.so .so-input:focus { outline: 2px solid var(--so-gold); outline-offset: -2px; background: #fff; }
.so.so .so-input-title {
  font-family: var(--so-display); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; font-size: 15px;
}
.so.so .so-hint { font-size: 15px; color: var(--so-muted); margin: 0; font-style: italic; line-height: 1.5; }
.so.so .so-hint-locked {
  font-style: normal; background: #F1F3EE; border-left: 3px solid var(--so-rule);
  padding: 10px 13px; margin: 0 0 12px;
}

.so.so .so-notice-edit {
  border-top: 1px dotted var(--so-rule);
  padding-top: 13px; margin-top: 13px;
}
.so.so .so-notice-edit:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.so.so .so-notice-add-wrap { margin: 14px 0 10px; }

/* ---------------------------------------------------------------------------
   Moving a notice

   Added 25 August 2026. The notices are read out in the order they appear, and
   until now the only way to change that order was to retype them.

   SHOWN AT EVERY WIDTH, which is the one place this deliberately differs from
   the sections' .so-move above. Those hide above 900px because a section can be
   dragged with a mouse instead; a notice is a block with a textarea in it and
   has no drag, so hiding these on a desktop would mean the feature did not
   exist on the machine the run sheet is usually prepared on.

   34px for a mouse, 44px once the pointer is coarse - the same minimum the
   section buttons use, and for the same reason: this sheet gets edited standing
   up between services.

   Disabled at the ends by opacity rather than by hiding, matching .so-move-btn.
   A control that disappears moves the one next to it, and on a phone that means
   the button under your thumb is no longer the button you aimed at.
   --------------------------------------------------------------------------- */
/* so-notice-ORDER, not so-notice-head.
 *
 * .so-notice-head already exists, further down this file: it is the row holding
 * the block's label and the Tell button. The first version of this used the same
 * name, and because that rule is declared later it won - so these controls would
 * have inherited baseline alignment and a 10px gap meant for a heading, and the
 * one row nobody was looking at would have been the one that changed. The test
 * caught it by counting: nine head rows on a page with eight notice slots. */
.so.so .so-notice-order {
  display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
}
.so.so .so-notice-num {
  font-family: var(--so-display); font-weight: 700; font-size: 13px;
  color: var(--so-muted); min-width: 1.4em;
}
.so.so .so-notice-move { display: inline-flex; gap: 4px; }
.so.so .so-notice-move-btn {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--so-body); font-size: 17px; line-height: 1; cursor: pointer;
  background: var(--so-surface); border: 1px solid var(--so-rule); color: var(--so-ink);
}
.so.so .so-notice-move-btn:hover { border-color: var(--so-gold); }
.so.so .so-notice-move-btn:active { background: var(--so-gold); border-color: var(--so-gold); }
.so.so .so-notice-move-btn:focus-visible { outline: 2px solid var(--so-gold); outline-offset: 1px; }
.so.so .so-notice-move-btn[disabled] { opacity: 0.3; cursor: default; }

@media (pointer: coarse), (max-width: 900px) {
  .so.so .so-notice-move-btn { width: 44px; height: 44px; font-size: 20px; }
}

.so.so .so-save-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 10px; flex-wrap: wrap;
  background: var(--so-paper);
  border-top: 2px solid var(--so-ink);
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  margin-top: 10px;
}

/* In edit mode the tiers you cannot touch step back, so the boxes that need
   filling in are the only thing with contrast. Not so faint that a proofreader
   cannot still read them - 0.62, measured, not 0.45. */
.so-editing.so-editing .so-block-fixed,
.so-editing.so-editing .so-block-cue { opacity: 0.62; }

/* ---- key ----------------------------------------------------------------- */
.so.so .so-key { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--so-rule); }
.so.so .so-key-title {
  font-family: var(--so-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--so-muted); margin: 0 0 12px;
}
.so.so .so-key ul { list-style: none; margin: 0; padding: 0; }
.so.so .so-key li {
  list-style: none; margin: 0 0 9px; padding: 0;
  font-size: 16px; line-height: 1.6; color: var(--so-read); text-align: left;
}
.so.so .so-key .so-tag { margin-left: 0; margin-right: 6px; }

/* ---- phones --------------------------------------------------------------
   The run sheet is used on a phone more than anywhere else - it is what the
   person on the mic is holding. So the phone layout is not a shrunken desktop:
   the indent under each segment goes (it buys nothing at 375px and costs a
   tenth of the line), the segment header stacks in reading order, and every
   control clears 44px.
   ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  .so.so { font-size: 17px; }

  .so.so .so-seg-body { padding-left: 0; }

  .so.so .so-seg-head {
    gap: 6px 10px;
    align-items: center;
  }
  /* Phone order: the section says what it is, then when, then how to move it.
   *
   * Everything without an `order` sits at 0, so the handle and the tools used to
   * come first by default. That was tolerable while the handle was one small
   * glyph; with two 44px buttons beside it the controls filled the first line
   * and pushed the title to the fourth, so a section announced itself with a row
   * of buttons and you read its name last. The controls are explicitly last now
   * rather than implicitly first. */
  .so.so .so-seg-num   { order: 1; }
  .so.so .so-seg-when  { order: 2; margin-left: auto; }
  .so.so .so-seg-time  { font-size: 16px; }
  .so.so .so-seg-title { order: 3; flex: 1 1 100%; font-size: 20px; }
  .so.so .so-grip      { order: 4; }
  .so.so .so-move      { order: 5; }
  .so.so .so-segtools  { order: 6; }

  .so.so .so-block-week,
  .so.so .so-block-standing { padding: 13px 14px; }
  .so.so .so-block-fixed { padding-left: 12px; }

  .so.so .so-text p { font-size: 17px; }

  .so.so .so-btn { width: 100%; text-align: center; }

  /* Three across is too tight on a phone. The two links keep their row and the
     button drops beneath them, full width - it is already width:100% down here,
     and a centred button squeezed between two links would be neither. */
  .so.so .so-nav {
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
  }
  .so.so .so-nav .so-navlink      { grid-row: 1; grid-column: 1; }
  .so.so .so-nav .so-navlink-next { grid-row: 1; grid-column: 2; }
  .so.so .so-nav .so-nav-action   { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; }

  /* Previous/Next are the most-tapped things on the page and measured 36px,
     under the 44px minimum - easy to miss with a thumb while holding a mic. */
  .so.so .so-navlink {
    min-height: 44px;
    display: inline-flex; align-items: center;
    padding: 10px 0;
  }

  .so.so .so-save-bar { flex-direction: column; }

  /* A tag that wraps onto its own line under a long label reads as a heading,
     so let the label and its tag break together instead. */
  .so.so .so-block-label { font-size: 11px; letter-spacing: 0.13em; }
  .so.so .so-tag { margin-left: 6px; }
}

@media (max-width: 380px) {
  .so.so .so-seg-title { font-size: 19px; }
  .so.so .so-date { font-size: 27px; }
}

/* ---- print ---------------------------------------------------------------
   There is no Print button any more, but the browser's own print command still
   works and someone will use it. Drop the screen furniture, keep the tier
   distinction as weight and rule rather than colour, and never break a segment
   across a page - losing the second half of the offering declaration to a page
   turn is exactly the failure that matters here.
   ------------------------------------------------------------------------ */
@media print {
  .so.so .so-nav,
  .so.so .so-scope-note,
  .so.so .so-save-bar,
  .so.so .so-key,
  .so.so .so-hint,
  .so.so .so-warn,
  .so.so .so-saved,
  .so.so .so-notice-add-wrap { display: none !important; }

  .so.so { max-width: none; font-size: 11pt; line-height: 1.4; color: #000; }
  .so.so .so-run > li { margin-bottom: 18pt; break-inside: avoid; page-break-inside: avoid; }
  .so.so .so-head { border-bottom: 2pt solid #000; }
  .so.so .so-seg-head { border-bottom: 1pt solid #000; }
  .so.so .so-seg-num {
    background: #000 !important; color: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Back to black on paper. Gold is 3.5:1 on screen, which is fine at 22px in
     colour and becomes a mid-grey on a mono printer - the same reason the
     subtitle and the roster colours are forced back below. The badge above
     already forces black-on-white for exactly this. */
  .so.so .so-seg-title { font-size: 14pt; color: #000; }
  /* Grey does not survive a photocopy, so the step down is size alone here. */
  .so.so .so-seg-sub { font-size: 10pt; color: #000; }
  .so.so .so-block-week,
  .so.so .so-block-standing { border: 1pt solid #999; border-left: 3pt solid #000; background: none; }
  .so.so .so-block-fixed { border-left: 1pt solid #ccc; }
  .so.so .so-tag { border: 1pt solid #999; color: #000 !important; background: none !important; }
  .so.so .so-text p { font-size: 11pt; }
  /* Roster colour costs ink and photocopies badly - same rule the schedule uses. */
  .so.so .so-name .sch-name { color: #000 !important; font-weight: 700; }
}

/* ==========================================================================
   THE DECLARATION READS AS A CUE
   ========================================================================== */
/* Same treatment as "We will rise and sing our hymn": display type, bold, full
   contrast, gold marker, no label. Both lines are spoken; only one of them
   looked it. */

/* The heading is back, as of 5 August 2026.
 *
 * It was hidden on the reasoning that this block reads as a cue and a cue
 * carries no label. True of the one-line cues; not true of this, which is
 * twelve lines the congregation says together and the only thing on the sheet
 * that changes who is speaking. Without a heading, "As we prepare to receive
 * our offerings" ran straight on from the words of encouragement above it with
 * nothing marking where one ends and the other begins.
 *
 * It keeps the block-label treatment every other section uses rather than
 * inventing a heading style for one block - what was missing was the label, not
 * a new kind of thing. */
.so.so .so-declaration .so-block-label { display: block; }

/* No hairline; the marker does the work of saying where the words start. */
.so.so .so-declaration {
  border-left: 0;
  padding-left: 0;
  margin: 18px 0;
}

/* Sentence case, not uppercase.
 *
 * It was set in caps to match the projected slide. The church has since written
 * it out with a capital opening each line - "Thank you God / For this
 * opportunity" - and that capital does work uppercase destroys: with every
 * letter the same height there is nothing marking where one line starts and the
 * last ended, so twelve short lines read as one wall.
 *
 * The tracking went with the caps. Letterspacing is a fix for uppercase, whose
 * letters have no ascenders or descenders to tell them apart; on sentence case
 * it only loosens words that were already legible.
 *
 * The leading is open because each line is a breath the congregation takes
 * together - the gap between lines is the pause, not decoration.
 */
.so.so .so-declaration .so-text p {
  font-family: var(--so-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--so-text);
}

/* The marker on the opening line only. Repeating it on every paragraph would
   read as a list of separate instructions rather than one thing said. */
.so.so .so-declaration .so-text p:first-child::before {
  content: "\25B8\00A0";
  color: var(--so-gold);
}

/* On a phone, every line on ONE line.
 *
 * Each line here is a breath the congregation takes together, so a line that
 * wraps is not a typographic nuisance - it puts a fold in the middle of a
 * phrase and the room takes the breath in the wrong place. At 20px the longest
 * line ("I declare abundance and increase upon me now!") needs about twice the
 * width a 375px phone has.
 *
 * Sized off the width AVAILABLE, not off the viewport, and that distinction is
 * the whole rule. Divi insets the page 28px each side - a fixed 56px whatever
 * the screen - so a plain vw factor tuned at 375px still wraps at 320px, where
 * those 56px are a much larger share of the screen. `100vw - 56px` is the
 * measure the text actually gets.
 *
 * The divisor is measured, not chosen. The longest line ("I declare abundance
 * and increase upon me now!") renders 26.25x its font-size in this face, so
 * available / 26.25 is the largest size that fits exactly; 27.5 leaves about
 * five per cent for the fallback faces, which are not all the same width as
 * Futura. min() keeps every width above ~606px at the desktop 20px.
 *
 * NOT solved by shortening the words. What is said is the church's, and the
 * line breaks are where it breathes. */
@media (max-width: 700px) {
  .so.so .so-declaration .so-text p {
    font-size: min(20px, calc((100vw - 56px) / 27.5));
    line-height: 1.75;   /* opened up, because the type came down */
  }
}

@media print {
  /* Matches the cue's own print treatment - the marker survives, the weight
     does not need to. */
  .so.so .so-declaration .so-text p { font-size: 11pt; }
}


/* ===========================================================================
   THIS SUNDAY'S RUNNING ORDER

   The default order carries from Sunday to Sunday; a Sunday somebody has
   rearranged stores its own and nothing else. Everything below is either the
   controls for doing that, or the two things a reader needs to be told about
   it - that this Sunday differs from the usual, and when the service now ends.

   Every selector repeats .so for the reason given at the top of this file: a
   single-class rule loses to adinkra.css aiming .ad-sec .et_pb_text_inner at
   the same elements.
   ========================================================================= */

/* Said in the header, because somebody reading the sheet at 9:25 needs to know
   the order in front of them is not the usual one before they trust it. */
.so.so .so-custom-flag {
  display: inline-block;
  font-family: var(--so-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #F0E2C6;
  color: #5A4111;
  border-left: 3px solid var(--so-gold);
  padding: 7px 13px;
  margin: 6px 0 0;
}

.so.so .so-orderbar {
  background: #F0E2C6;
  border-left: 3px solid var(--so-gold);
  color: #5A4111;
  padding: 14px 18px;
  margin: 0 0 24px;
}
.so.so .so-orderbar p {
  font-family: var(--so-body);
  font-size: 15px;
  line-height: 1.55;
  color: #5A4111;
  margin: 0;
}
.so.so .so-orderbar strong { color: #3F2D0B; }
.so.so .so-orderbar-row { margin-top: 12px; }

.so.so .so-reset {
  font-family: var(--so-display);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: 1px solid #A87524;
  color: #6B4E17;
  padding: 10px 15px;
}
.so.so .so-reset:hover { background: #A87524; color: #14100C; }

/* The handle is a real <button> so it takes keyboard focus - dragging is the one
   interaction here with no keyboard equivalent of its own, and outline.js moves
   the section on the arrow keys when this has focus. */
.so.so .so-grip {
  font-family: var(--so-body);
  font-size: 19px;
  line-height: 1;
  cursor: grab;
  background: transparent;
  border: 1px solid transparent;
  color: var(--so-muted);
  padding: 5px 9px;
  margin-right: 2px;
  touch-action: none;        /* without this a touch-drag scrolls the page */
  user-select: none;
}
.so.so .so-grip:hover { color: var(--so-text); background: #F4F1EA; }
.so.so .so-grip:focus-visible { outline: 2px solid var(--so-gold); outline-offset: 1px; }
.so.so .so-grip:active { cursor: grabbing; }

/* ---- moving a section by tapping ----------------------------------------
 * Hidden where dragging is comfortable, shown where it is not.
 *
 * The switch is `pointer: coarse` - a question about the input device, asked of
 * the browser, which is the only party that actually knows. Not a User-Agent
 * check on the server: this host's LiteSpeed cache varies on User-Agent, so
 * markup chosen from the UA and then cached gets served to the wrong device.
 * The width query beside it is only a fallback for a browser too old for
 * pointer queries; on its own it would miss a tablet in landscape and catch a
 * narrow desktop window.
 * ---------------------------------------------------------------------- */
.so.so .so-move { display: none; gap: 4px; margin-right: 4px; }

@media (pointer: coarse), (max-width: 900px) {
  .so.so .so-move { display: inline-flex; }

  /* The controls and the layout that fits them MUST share one condition.
   *
   * This is the bug that shipped: the buttons appeared on `pointer: coarse`
   * while the stacked head lived behind `max-width: 640px`. A phone matches the
   * first and - because its layout viewport is wider than 640 - not the second,
   * so two 44px buttons joined a single-row head that had no room for them.
   *
   * Three things had to line up, which is why it survived testing:
   *   1. `.so-seg-title` is `flex: 1 1 0; min-width: 0` - free to shrink to
   *      nothing rather than to its longest word;
   *   2. Divi's PER-PAGE generated CSS sets `.et_pb_text { word-wrap:
   *      break-word }` - et-cache/3096/et-divi-dynamic-3096-critical.css - and
   *      the shortcode renders inside a Text module, so the heading inherits it
   *      and breaks mid-word once it is narrow enough;
   *   3. the two conditions above disagreed.
   * The result was a column one letter wide: P / r / a / y / e / r.
   *
   * Wherever the buttons are shown, the title now takes a row of its own and the
   * controls come after it. */
  .so.so .so-seg-head { flex-wrap: wrap; align-items: center; }
  .so.so .so-seg-num   { order: 1; }
  .so.so .so-seg-when  { order: 2; margin-left: auto; }
  .so.so .so-seg-title { order: 3; flex: 1 1 100%; }
  .so.so .so-grip      { order: 4; }
  .so.so .so-move      { order: 5; }
  .so.so .so-segtools  { order: 6; }

  .so.so .so-move-btn {
    /* 44px square. The grip is 29px, which is a target you aim at rather than
       one you hit, and this sheet is edited standing up between services. */
    width: 44px;
    height: 44px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--so-body);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    background: var(--so-surface);
    border: 1px solid var(--so-rule);
    color: var(--so-text);
    padding: 0;
    /* Stops the double-tap-to-zoom delay, so the second tap of a two-place move
       registers as a tap rather than being swallowed as a gesture. */
    touch-action: manipulation;
  }
  .so.so .so-move-btn:active { background: var(--so-gold); border-color: var(--so-gold); }
  .so.so .so-move-btn:focus-visible { outline: 2px solid var(--so-gold); outline-offset: 1px; }

  /* Dimmed, still occupying its space. See the note in the PHP: a control that
     disappears moves the one next to it, and on a phone that means the button
     under your thumb is no longer the button you aimed at. */
  .so.so .so-move-btn[disabled] { opacity: 0.3; cursor: default; }

  /* The handle stays - dragging still works and some people prefer it - but it
     gets a real target too rather than a 29px glyph beside two 44px buttons. */
  .so.so .so-grip {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* The other controls on the strip, brought up to the same minimum. 34px was
     fine for a mouse and is not for a thumb. */
  .so.so .so-segtools button,
  .so.so .so-addsec button,
  .so.so .so-reset {
    min-height: 44px;
    padding-left: 16px;
    padding-right: 16px;
    touch-action: manipulation;
  }
  .so.so .so-dur-edit {
    min-height: 44px;
    width: 68px;
    font-size: 16px;   /* 16px or iOS zooms the page when the field is focused */
  }

  /* ---- a compact row for the length of a drag --------------------------
   *
   * Folding the bodies away was not enough on a phone. A collapsed row still
   * measured 266px here - the heading wraps to three lines at 375px and keeps
   * its clock and its duration - so the nine sections came to 2,442px, which
   * is THREE screens. Dragging across three screens means dragging while the
   * page scrolls underneath you, and that is the whole of what makes
   * rearranging on a phone unpleasant.
   *
   * Held to one line each the same nine come to 522px: the entire order on one
   * screen, and a drag becomes a short movement whose start and finish are
   * both visible. Measured, not estimated - 266px to 58px a row.
   *
   * Inside the same media query as the controls, deliberately. The note above
   * about `pointer: coarse` and `max-width: 640px` disagreeing is the bug this
   * file already shipped once, where a heading was squeezed into a column one
   * letter wide. Anything that changes this layout shares that condition.
   *
   * THE ARROWS ARE NOT REMOVED - they are hidden for the length of the drag
   * and nothing more. Rendering them here was measured too and costs no height
   * at all, since they sit on the same line; they go because a control you
   * cannot tap mid-drag should not be taking a quarter of a 375px row from the
   * title, which is the only thing identifying what you are holding. They are
   * back the moment the finger lifts, which is when they are of any use.
   *
   * `.so.so.so-dragging`, not the `.so-dragging.so-dragging` used further up
   * this file. Both classes sit on the same element, so either doubling is
   * legal - but (0,3,0) ties with `.so-editing.so-editing .so-seg-when` and
   * `.so.so .so-segtools`, both of which are LATER in the file and therefore
   * win. Written that way first and it half-worked: the arrows went, the clock
   * and the tools stayed, and the row came out 217px instead of 58px. Three
   * classes settle it on specificity rather than on position.
   * ------------------------------------------------------------------- */
  .so.so.so-dragging .so-seg-head {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px 8px;
    min-height: 0;
  }

  /* The clock goes. It is recomputed live as the order changes, so mid-drag it
     is a number flickering through values nobody asked for - and on this screen
     it is also the thing forcing the heading onto a third line. Every time is
     right there again the moment the section lands. */
  .so.so.so-dragging .so-seg-when,
  .so.so.so-dragging .so-segtools,
  .so.so.so-dragging .so-move { display: none; }

  .so.so.so-dragging .so-seg-num { order: 1; flex: none; }
  .so.so.so-dragging .so-seg-title {
    order: 2;
    flex: 1 1 auto;
    /* min-width:0 or the flex item refuses to shrink below its longest word and
       the ellipsis never engages - the same property that let the heading break
       mid-word in the bug noted above, wanted here for the opposite reason. */
    min-width: 0;
    font-size: 15px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .so.so.so-dragging .so-grip { order: 3; flex: none; }

  .so.so.so-dragging .so-seg { margin-bottom: 4px; }
}

/* The segment head becomes a control strip while editing, so it needs an edge
   to sit on - as bare text the handle and the Remove button read as content. */
.so-editing.so-editing .so-seg-head {
  background: var(--so-surface);
  border: 1px solid var(--so-rule);
  border-left: 3px solid var(--so-gold);
  padding: 11px 13px;
  align-items: center;
}

.so.so .so-segtools { display: inline-flex; gap: 5px; align-items: center; margin-left: 12px; }
.so.so .so-segtools button {
  font-family: var(--so-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  background: var(--so-surface);
  border: 1px solid var(--so-rule);
  color: var(--so-text);
  height: 34px;
  padding: 0 12px;
}
.so.so .so-segtools button:hover { background: var(--so-gold); border-color: var(--so-gold); color: #14100C; }

.so.so .so-dur-edit {
  font-family: var(--so-body);
  font-size: 14px;
  width: 56px;
  text-align: right;
  border: 1px solid var(--so-rule);
  padding: 8px 6px;
}
.so.so .so-dur-unit { font-family: var(--so-display); font-size: 13px; color: var(--so-muted); }

/* The clock stays on screen while rearranging. Hiding it until save is how you
   find out at 11:50 on a Sunday that the service now runs past midday. */
/* block, not the inherited inline-flex: as a flex row the time and the duration
   sat side by side and the pair was 183px wide. Stacked they are about 120px, and
   those 60px go to the section title, which is the thing being squeezed. */
.so-editing.so-editing .so-seg-when {
  margin-left: auto;
  text-align: right;
  display: block;
}
.so-editing.so-editing .so-seg-when .so-seg-time { display: block; }

/* flex-basis 0, not the inherited auto.
   Editing adds a handle, a minutes box and a Remove button to a head that
   already held a number, a title and a clock. With flex-basis:auto the title's
   base size is its max-content width - "Closing - Visitors, Birthdays and
   Benediction" is about 480px - so the line overflowed and flex-wrap moved the
   controls to a second row BEFORE any shrinking was considered. Measured on the
   deployed page at 1440px: five of the eight heads were 105px tall instead of
   62px, with the minutes box and Remove stranded under the title.
   Rows on this page cap at 900px, so there is less room than the wider harness
   the mockup was built in suggested. */
/* min-width 12ch, not 0, and never broken mid-word.
 *
 * flex-basis:0 is deliberate and explained above; min-width:0 was what let the
 * title shrink without limit. Divi's per-page CSS sets
 * `.et_pb_text { word-wrap: break-word }` and this heading sits inside a Text
 * module, so "without limit" became one letter per line on a phone.
 *
 * Two guards rather than one, because the media queries that were supposed to
 * prevent this disagreed with each other once already:
 *   min-width  - a floor, so the box cannot vanish;
 *   word-break - so even a box narrower than the longest word spills rather
 *                than shredding a section's name into a vertical column.
 * A reader can cope with a title that overflows slightly. A column of single
 * letters is not a title at all.
 *
 * Both cost nothing at desktop width, where the title has hundreds of pixels,
 * and 12ch still lets the flex-basis:0 trick keep the number beside the title. */
.so-editing.so-editing .so-seg-title {
  flex: 1 1 0%;
  min-width: 12ch;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* The touch case, repeated HERE rather than only in the media block further up.
 *
 * `.so-editing.so-editing .so-seg-title` and `.so.so .so-seg-title` have the
 * same specificity - three classes each - so the later one in the file wins,
 * and the rule above is later than the media block. The result was a title that
 * did not collapse but never got its own row either: 198px and four lines deep
 * on a phone, while the media query it was written into appeared to be doing
 * nothing.
 *
 * Equal specificity is decided by source order. When a rule must beat one that
 * is written below it, it has to be written below it too. */
@media (pointer: coarse), (max-width: 900px) {
  .so-editing.so-editing .so-seg-title { flex: 1 1 100%; min-width: 0; }
}

/* Bodies fold away for the duration of a drag, so all of the order fits on one
   screen. Expanded, the announcements section alone is over 2,000px tall, and
   dragging past it to reach the section below is the actual difficulty. */
.so-dragging.so-dragging .so-seg-body { display: none; }
.so-dragging.so-dragging .so-seg { margin-bottom: 8px; }
.so-dragging.so-dragging .so-grip { cursor: grabbing; }
.so-dragging.so-dragging { user-select: none; }

/* A section on its way to a new place.
 *
 * The class is added by outline.js only for the length of one move and taken
 * off again on transitionend, so a section is transition-free the rest of the
 * time - which is what lets a drag set transforms without them animating.
 *
 * Duration comes in per-section as --so-slide, because it is scaled to the
 * distance travelled: swapping two short sections and sliding past the
 * announcements are not the same journey. The fallback is only reached if the
 * class is somehow applied without it.
 *
 * The curve leaves quickly and arrives slowly. What the editor is reading is
 * where a section ENDS UP, so the end of the movement is the part worth
 * spending the time on. */
.so.so .so-seg.is-sliding {
  transition: transform var(--so-slide, 220ms) cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Asked for less motion means none, not less. The reorder still happens - the
   sections simply arrive the way they did before any of this. outline.js checks
   the same query and skips the transforms entirely, so this rule is the belt to
   that braces: a browser that reports the preference to CSS but not to
   matchMedia still gets a still page. */
@media (prefers-reduced-motion: reduce) {
  .so.so .so-seg.is-sliding { transition: none; }
}

.so.so .so-seg.is-lifted { position: relative; z-index: 5; }
.so.so .so-seg.is-lifted > .so-seg-head {
  border-color: var(--so-gold);
  border-left-width: 5px;
  box-shadow: 0 6px 18px rgba(20, 16, 12, 0.18);
}

/* Added for this Sunday. Green rather than gold: gold is this page's own accent
   and is already carrying the handle, the reset and the order bar, so a fourth
   use of it would stop meaning anything. */
.so.so .so-seg-added > .so-seg-head { border-left-color: #2F6B3C; }
.so.so .so-added-tag {
  font-family: var(--so-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2F6B3C;
  margin-left: 9px;
  white-space: nowrap;
}

.so.so .so-addsec {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px 0 30px;
}
.so.so .so-addsec input {
  font-family: var(--so-body);
  font-size: 15px;
  padding: 11px 13px;
  border: 1px solid var(--so-rule);
  flex: 1 1 260px;
}

/* When the service ends, and how many sections got it there. It is the number
   people actually argue about, and a reorder moves it without anyone looking. */
.so.so .so-endsat {
  font-family: var(--so-display);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--so-muted);
  margin: 0 0 28px;
  padding-left: 36px;
}
.so.so .so-endsat strong { color: var(--so-text); }
.so.so .so-endsat-late strong { color: #8C2F1D; }

@media (max-width: 640px) {
  /* The head carries a handle, a number, a title, a clock and two controls. At
     phone width they wrap rather than squeezing the title to nothing. */
  .so.so .so-seg-head { flex-wrap: wrap; }
  .so.so .so-segtools { margin-left: 0; }
  .so-editing.so-editing .so-seg-when { margin-left: 0; text-align: left; width: 100%; }
  .so.so .so-endsat { padding-left: 0; }
}

@media print {
  /* None of the controls belong on paper, and neither does the drag affordance.
     The custom-order flag does - a printed sheet in the wrong order with nothing
     saying so is worse than no printed sheet. */
  .so.so .so-grip,
  .so.so .so-move,
  .so.so .so-segtools,
  .so.so .so-orderbar,
  .so.so .so-addsec { display: none; }
  .so.so .so-endsat { padding-left: 0; font-size: 10pt; }
  .so.so .so-custom-flag { background: none; border-left: 2px solid #000; font-size: 9pt; }
}

/* The form's default button - what Enter in a text field submits. It exists
   because this form has an Add, a Remove per section and a Reset in it, and the
   first submit button in the markup is the one Enter reaches. Before this, Enter
   in the "new section" box on a rearranged Sunday hit the reset button and threw
   the rearrangement away.

   Clipped rather than display:none: a hidden-but-present button is what makes it
   the default, and taking it out of the tab order keeps it out of the way. */
.so.so .so-enter-guard {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* ==========================================================================
   SERVICE OUTLINE — TELLING PEOPLE THE NOTICES CHANGED, AND COLLAPSING THEM
   ==========================================================================
   Every selector is doubled - .so.so - like everything else in that file.
   Divi writes !important on colours and fonts from the Builder at a specificity
   a single class loses to, and a rule here that quietly does nothing is worse
   than one that is obviously missing.
   ========================================================================== */

/* ---- the button, beside the Notifications label -------------------------- */
/* The label is a 12px letterspaced caption and the button has to sit ON it
   without becoming the loudest thing in the block - the notices themselves are
   what people are here to read. */
.so.so .so-notice-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 7px;
}
.so.so .so-notice-head .so-block-label { margin: 0; }

.so.so .so-tellbtn {
  margin-left: auto;
  font-family: var(--so-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--so-gold-dk);
  background: transparent;
  border: 1px solid var(--so-gold);
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.so.so .so-tellbtn:hover { background: var(--so-gold); color: #14100C; }

/* When it has already been sent this week. Still pressable - the notices can
   change twice - but it stops looking like something waiting to be done. */
.so.so .so-tellbtn.is-sent {
  color: var(--so-muted);
  border-color: var(--so-rule);
}
.so.so .so-tell-when {
  font-family: var(--so-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--so-muted);
}

/* ---- who is about to be told -------------------------------------------- */
/* Shown BEFORE anything is sent. A notify button that does not say who it is
   about to email is a button people are afraid to press, and the ones who press
   it anyway find out afterwards. */
.so.so .so-tell-panel {
  border: 1px solid var(--so-gold);
  background: #FCFAF4;
  padding: 18px 20px;
  margin: 0 0 16px;
}
/* After the send, not before it.
   The confirmation inherits the panel above, which is right - it is the same
   box, now saying what happened. A thicker left edge is the only change,
   because the words and the single OK button already say it is a result rather
   than a prompt.
   The failed state does NOT inherit the gold: "Nobody was told" set in the same
   cream and gold as a normal panel reads as everything having gone fine, which
   is the one impression it must not give. */
.so.so .so-tell-done { border-left-width: 4px; }
.so.so .so-tell-failed {
  border-color: #8A2B2B;
  border-left-width: 4px;
  background: #FBF4F4;
}

.so.so .so-tell-title {
  font-family: var(--so-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--so-text);
  margin: 0 0 4px;
}
.so.so .so-tell-note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--so-muted);
  margin: 0 0 12px;
}
.so.so .so-tell-who { list-style: none; margin: 0 0 14px; padding: 0; }
.so.so .so-tell-who li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  font-size: 16px;
  margin: 0 0 5px;
  color: var(--so-text);
}
.so.so .so-tell-mail { font-size: 14px; color: var(--so-muted); }
/* Why somebody is on the list, said on the row rather than in a footnote -
   "why is George on here" is the question this whole feature will get asked. */
.so.so .so-tell-why {
  font-family: var(--so-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--so-muted);
  border: 1px solid var(--so-rule);
  padding: 2px 7px;
}
.so.so .so-tell-acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- a Member's collapsed notifications ---------------------------------- */
/* A <details>, so it folds with no JavaScript. The marker goes because the row
   already says "tap to read" - a disclosure triangle next to those words is the
   same instruction twice, in two visual languages. */
.so.so .so-notice-fold { margin: 0; }
.so.so .so-notice-peek::-webkit-details-marker { display: none; }
.so.so .so-notice-peek::marker { content: ""; }
.so.so .so-notice-fold[open] > .so-notice-peek { margin-bottom: 14px; }
/* One row instead of the list. It says how many there are, because "there are
   notices" and "there are four notices" are different amounts of information
   and the second one costs nothing. */
.so.so .so-notice-peek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* border-box, or the borders sit on top of the 100% and the page is 2px too
     wide on a phone. .so-input a few rules down says the same thing for the
     same reason - this file renders inside a Divi module and cannot assume the
     border-box reset it would get anywhere else. */
  box-sizing: border-box;
  text-align: left;
  background: #FCFDFB;
  border: 1px solid var(--so-rule);
  border-left: 3px solid var(--so-gold);
  padding: 14px 16px;
  font-family: var(--so-body);
  font-size: 17px;
  color: var(--so-text);
  cursor: pointer;
}
.so.so .so-notice-peek:hover { background: #fff; border-color: var(--so-gold); }
.so.so .so-peek-count {
  font-family: var(--so-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--so-muted);
  margin-left: auto;
}

/* ---- the popup ----------------------------------------------------------- */
/* A real <dialog>, as the Bible class form uses. Everything inside it is the
   markup that was already on the page, moved - so a browser too old for
   <dialog> shows the list in place and nothing is lost. */
.so.so .so-pop {
  border: 0;
  padding: 0;
  max-width: 640px;
  width: calc(100% - 32px);
  background: var(--so-paper);
  color: var(--so-text);
}
.so.so .so-pop::backdrop { background: rgba(20, 16, 12, 0.55); }
.so.so .so-pop-in { padding: 26px 26px 24px; }
.so.so .so-pop-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--so-rule);
}
.so.so .so-pop-title {
  font-family: var(--so-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--so-text);
  margin: 0;
}
.so.so .so-pop-close {
  margin-left: auto;
  font-family: var(--so-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--so-rule);
  color: var(--so-muted);
  padding: 6px 13px;
  cursor: pointer;
}
.so.so .so-pop-close:hover { border-color: var(--so-ink); color: var(--so-text); }

@media print {
  /* On paper the notices are read out, so they are never collapsed and the
     button is not a thing you can press. */
  .so.so .so-tellbtn,
  .so.so .so-tell-panel,
  .so.so .so-notice-peek { display: none !important; }
}