/* ==========================================================================
   ICGC Praise Temple - announcements
   The invitation on Connect, the form and its answers, and the office's page.

   EVERY SELECTOR IS DOUBLED - .ann.ann - and that is not style.

   Connect carries `ad-sec`, and adinkra.css sets `.ad-sec .et_pb_text_inner p`
   at (0,2,1): 19px, a 68ch measure and auto side margins. A single class loses
   to it, and loses SILENTLY - the block simply renders 187px inside the card it
   is supposed to be in, with nothing to say why. The same trap is documented on
   the ministering-bands panel in schedule.css and on .so.so in outline.css.
   ========================================================================== */

.ann {
  --a-ink: #14100C;
  --a-paper: #EFF1EC;
  --a-surface: #FFFFFF;
  --a-gold: #A87524;
  --a-gold-dk: #6B4E17;
  --a-muted: #5A6158;
  --a-rule: #D5DACE;
  --a-green: #0F5D4E;
  --a-clay: #A34032;
  --a-disp: Futura, "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  --a-body: "Iowan Old Style", "Hoefler Text", Palatino, Georgia, serif;

  font-family: var(--a-body);
  color: var(--a-ink);
}

/* Left, explicitly - but ONLY on the form and the office's page.
 *
 * Both pages carry `ad-giving`, the site's role class for a CENTRED page. That
 * is right for the invitation card, which sits in a row with two others that
 * are centred, and wrong for a form: centred, every label floated above the
 * middle of a box whose text starts at the left edge. A form is read down its
 * left margin - that is how you tell at a glance which boxes are still empty.
 *
 * This was one blanket rule on .ann to begin with, and it left-aligned the
 * invitation too, so the announcements card was the odd one out in a row of
 * three. Scoping it is the fix; centring is the default the row already has. */
.ann.ann-form-wrap,
.ann.ann-manage { text-align: left; }

.ann-form-wrap.ann-form-wrap label,
.ann-form-wrap.ann-form-wrap input,
.ann-form-wrap.ann-form-wrap textarea,
.ann-form-wrap.ann-form-wrap p,
.ann-form-wrap.ann-form-wrap h2,
.ann-manage.ann-manage p,
.ann-manage.ann-manage h2,
.ann-manage.ann-manage h3 { text-align: left; }

/* ---- the invitation ------------------------------------------------------
 *
 * Matched to the Bible class and testimony cards it stands beside, value for
 * value, because three invitations in a row that disagree about type size and
 * alignment read as one of them being broken rather than as one of them being
 * new. Every number here was measured off `.tst-cta` on the live page rather
 * than guessed: 34/30/30 padding, a 1px rule all round, 15px eyebrow, 34px
 * title, 18px lede, 16px button.
 *
 * A flex column with `margin-top: auto` on the button, which is how the other
 * two put their buttons on the same line as each other however tall the middle
 * of the card grows. Without it the button follows the text and the row has
 * three buttons at three heights.
 * ------------------------------------------------------------------------ */
.ann.ann-cta {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--a-surface);
  border: 1px solid var(--a-rule);
  border-radius: 3px;
  padding: 34px 30px 30px;
  box-sizing: border-box;
  /* No `height: 100%`. The invites grid is align-items: stretch, so the three
     cards are already the same height as each other - measured at 440px apiece
     - and 100% only mattered as insurance. It cost something though: with
     JavaScript off the panels stay inline in the grid, one of them is 930px
     tall, and 100% of that row made this card a 948px box with a button
     floating in the middle of it. Stretch gives the same result and does not
     inherit a sibling's accident. */
}

.ann.ann .ann-eyebrow {
  font-family: var(--a-disp);
  font-size: 15px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--a-gold);
  margin: 0 0 10px; padding-bottom: 15px;
  max-width: none; margin-inline: 0;
}
.ann.ann .ann-cta-title {
  font-family: var(--a-disp);
  font-size: 34px; font-weight: 700; line-height: 1.12;
  letter-spacing: -0.02em; color: var(--a-ink);
  margin: 0 0 12px;
}
.ann.ann .ann-cta-lede,
.ann.ann .ann-note {
  font-family: var(--a-body);
  font-size: 18px; line-height: 1.6; color: var(--a-muted);
  margin: 0 0 18px; max-width: 62ch; margin-inline: auto;
}

/* Pushed to the foot of the card, so all three buttons land on one line. */
.ann.ann .ann-cta-go { margin: auto 0 0; }
/* Same box as the Bible class and testimony invitations beside it - see the
   note in abc.css. box-sizing is the load-bearing word: min-height: 44px on a
   content box is not a 44px touch target, it is 44px ON TOP of the padding, and
   it was making this button 78px tall to guarantee 44. */
.ann.ann .ann-cta-go .ann-btn {
  box-sizing: border-box;
  font-size: 16px; padding: 15px 30px; letter-spacing: 0.13em; min-height: 44px;
}

/* The form inside the dialog is a form, not an invitation - it keeps the
   smaller heading it had, because 34px over a first-name box is a shout. */
.ann-form-wrap.ann-form-wrap .ann-cta-title { font-size: 24px; line-height: 1.15; letter-spacing: 0; }
.ann-form-wrap.ann-form-wrap .ann-eyebrow { font-size: 12px; letter-spacing: 0.2em; padding-bottom: 0; margin-bottom: 8px; }
.ann-form-wrap.ann-form-wrap .ann-cta-lede { font-size: 16px; margin-inline: 0; }

/* ---- when it is open, and when it is not --------------------------------- */
.ann.ann .ann-deadline {
  font-family: var(--a-disp);
  font-size: 13px; letter-spacing: 0.03em;
  color: var(--a-gold-dk); background: #F6F3E9;
  border-radius: 2px; padding: 8px 11px;
  margin: 0 0 16px; display: inline-block; max-width: none; margin-inline: 0;
}
/* Still inline-block, so the pill hugs its words. As a block it stretched the
   full width of the form and read as a banner rather than as a note. */
.ann.ann .ann-deadline-in { margin-bottom: 20px; }
.ann.ann .ann-deadline-shut { color: var(--a-clay); background: #FBEDE9; }

/* ---- buttons ------------------------------------------------------------- */
.ann.ann .ann-btn {
  display: inline-block;
  font-family: var(--a-disp);
  font-size: 14px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 13px 22px;
  border: 2px solid var(--a-gold); border-radius: 0;
  text-decoration: none; cursor: pointer;
  /* 44px before padding is counted, because this is tapped on a phone at the
     back of a hall. */
  min-height: 44px;
  transition: background-color .18s, color .18s;
}
.ann.ann .ann-btn-solid { background: var(--a-gold); color: var(--a-ink); }
.ann.ann .ann-btn-solid:hover { background: #C08A2E; border-color: #C08A2E; }
.ann.ann .ann-btn-line { background: none; color: var(--a-gold-dk); }
.ann.ann .ann-btn-line:hover { background: var(--a-ink); border-color: var(--a-ink); color: var(--a-paper); }
.ann.ann .ann-btn-quiet {
  background: none; color: var(--a-muted); border-color: var(--a-rule);
}
.ann.ann .ann-btn-quiet:hover { border-color: var(--a-muted); color: var(--a-ink); }
.ann.ann .ann-btn-wide { width: 100%; text-align: center; }
.ann.ann .ann-btn-sm { font-size: 12px; padding: 10px 14px; letter-spacing: 0.08em; }

/* ---- the panel, and the dialog it becomes -------------------------------- */
/* Visible by default. announce.js lifts it into a <dialog>; with no script it
   stays here under the invitation and the form still posts. */
.ann.ann-panel {
  background: var(--a-surface);
  border: 1px solid var(--a-rule);
  border-radius: 3px;
  padding: 24px;
  margin-top: 18px;
  box-sizing: border-box;
}
.ann.ann-panel[hidden] { display: none; }

.ann-dialog {
  border: 0; border-radius: 4px; padding: 0;
  max-width: 560px; width: calc(100% - 32px);
  background: var(--a-surface);
  box-shadow: 0 18px 44px rgba(20, 16, 12, 0.22);
}
.ann-dialog::backdrop { background: rgba(20, 16, 12, 0.55); }
.ann-dialog .ann-panel { margin-top: 0; border: 0; }
.ann-dialog-x {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; font-size: 26px; line-height: 1;
  color: var(--a-muted); cursor: pointer;
  min-width: 44px; min-height: 44px;
}

/* ---- the form ------------------------------------------------------------ */

/* Held to a readable measure here rather than on the row.
 *
 * The page data asks for max_width="620px" and Divi writes it without
 * !important, so adinkra's own row width wins and the form came out 1152px
 * across at 1280 - two name fields half a metre apart, and a heading box you
 * could lose a cursor in. Set on the wrapper, it holds wherever the shortcode
 * is dropped, including inside the dialog on Connect. */
.ann.ann-form-wrap { max-width: 620px; }
.ann.ann .ann-form label {
  display: block;
  font-family: var(--a-disp);
  font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--a-ink);
  margin: 0 0 14px;
}
.ann.ann .ann-form input[type="text"],
.ann.ann .ann-form textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
  font-family: var(--a-body);
  /* 16px or iOS zooms the page the moment the field is focused. */
  font-size: 16px; color: var(--a-ink);
  background: var(--a-surface);
  border: 1px solid var(--a-rule); border-radius: 2px;
  padding: 11px 12px; min-height: 46px;
}
.ann.ann .ann-form textarea { min-height: 120px; }
.ann.ann .ann-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ann.ann .ann-hint {
  display: block; font-family: var(--a-body); font-size: 13px; font-weight: 400;
  font-style: italic; color: var(--a-muted); margin-top: 5px;
}
.ann.ann .ann-privacy { font-size: 14px; color: var(--a-muted); margin: 0 0 10px; max-width: 62ch; margin-inline: 0; }
.ann.ann .ann-legal { font-size: 12px; color: var(--a-muted); margin: 0 0 16px; line-height: 1.5; max-width: 62ch; margin-inline: 0; }
.ann.ann .ann-legal a { color: var(--a-gold-dk); }
.ann.ann .ann-warn {
  font-family: var(--a-disp); font-size: 14px; color: var(--a-clay);
  background: #FBEDE9; border-left: 3px solid var(--a-clay);
  padding: 11px 14px; margin: 0 0 16px; max-width: none; margin-inline: 0;
}

/* The honeypot. Not display:none - some bots skip anything hidden that way -
   and off-screen rather than transparent, so nothing about it is reachable by
   a person using a pointer either. aria-hidden and tabindex -1 are on the
   markup, so a screen reader never announces it. */
.ann.ann .ann-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---- what it says back --------------------------------------------------- */
.ann.ann .ann-recap {
  background: #F7F8F5; border-left: 3px solid var(--a-gold);
  padding: 12px 15px; font-size: 16px; margin: 16px 0 0; max-width: none; margin-inline: 0;
}
.ann.ann .ann-urgent {
  background: #FBEDE9; border-left: 3px solid var(--a-clay);
  border-radius: 2px; padding: 14px 16px; margin: 18px 0 0;
}
.ann.ann .ann-urgent-h {
  font-family: var(--a-disp); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-clay);
  margin: 0 0 6px; max-width: none; margin-inline: 0;
}
.ann.ann .ann-urgent p { font-size: 15px; margin: 0; max-width: 62ch; margin-inline: 0; }

.ann.ann .ann-keep {
  background: #F7F8F5; border: 1px solid var(--a-rule); border-radius: 2px;
  padding: 14px 16px; margin-top: 16px;
}
.ann.ann .ann-keep-h {
  font-family: var(--a-disp); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-muted);
  margin: 0 0 8px; max-width: none; margin-inline: 0;
}
.ann.ann .ann-keep-body { font-size: 15px; margin: 0 0 12px; max-width: none; margin-inline: 0; }

/* ---- the gate ------------------------------------------------------------ */
.ann.ann-gate {
  background: var(--a-surface); border: 1px solid var(--a-rule);
  border-radius: 3px; padding: 34px; max-width: 460px; margin: 0 auto;
  text-align: center;
}
.ann.ann-gate .ann-cta-title,
.ann.ann-gate .ann-eyebrow { text-align: center; }
.ann.ann-gate .ann-cta-lede { margin-inline: auto; }

/* ---- the office's page --------------------------------------------------- */
/* margin-inline is half the rule, not a tidy-up.
 *
 * A max-width on its own does not centre anything - it caps the width and
 * leaves the box in normal flow, hard against the left edge. Measured at a
 * 1280px viewport this sat 64px from the left with 356px of nothing to its
 * right, inside a row that was itself centred correctly. The row being centred
 * is what makes it look deliberate rather than broken, so it reads as a design
 * choice until somebody measures it.
 *
 * text-align below is a separate question and stays left: the announcements are
 * paragraphs to be read, and centred prose is hard work. The BOX is centred;
 * its contents are not. */
.ann.ann-manage { max-width: 860px; margin-inline: auto; }
.ann.ann .ann-queue-head {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
}
.ann.ann .ann-h-left {
  font-family: var(--a-disp); font-size: 21px; font-weight: 700;
  text-align: left; margin: 0; color: var(--a-ink);
}
.ann.ann .ann-queue-shut {
  font-family: var(--a-disp); font-size: 12px; letter-spacing: 0.06em;
  color: var(--a-clay); background: #FBEDE9; padding: 5px 9px; border-radius: 2px;
}
.ann.ann .ann-none { font-size: 17px; color: var(--a-muted); max-width: none; margin-inline: 0; }

.ann.ann .ann-item {
  background: var(--a-surface);
  border: 1px solid var(--a-rule); border-left: 3px solid var(--a-green);
  border-radius: 3px; padding: 16px 18px; margin-bottom: 14px;
  box-sizing: border-box;
}
.ann.ann .ann-item-flag { border-left-color: var(--a-clay); background: #FDF8F6; }
.ann.ann .ann-item-rolled { border-left-color: var(--a-gold); background: #FCFAF4; }

.ann.ann .ann-item-head {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: baseline; justify-content: space-between; margin-bottom: 8px;
}
.ann.ann .ann-who { font-family: var(--a-disp); font-size: 13px; font-weight: 700; }
.ann.ann .ann-who-ok { color: var(--a-green); }
.ann.ann .ann-who-many { color: var(--a-clay); }
.ann.ann .ann-when { font-family: var(--a-disp); font-size: 12px; color: var(--a-muted); }

.ann.ann .ann-rolltag {
  display: inline-block; font-family: var(--a-disp); font-size: 11px;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--a-gold-dk); background: #F6F3E9;
  padding: 3px 8px; border-radius: 2px; margin-bottom: 7px;
}
.ann.ann .ann-item-title {
  font-family: var(--a-disp); font-size: 17px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  text-align: left; color: var(--a-ink); margin: 0 0 6px;
}
.ann.ann .ann-item-body { font-size: 16px; margin: 0 0 8px; max-width: none; margin-inline: 0; }
.ann.ann .ann-item-contact {
  font-family: var(--a-disp); font-size: 13px; color: var(--a-muted);
  margin: 0 0 10px; max-width: none; margin-inline: 0;
}
.ann.ann .ann-flagnote {
  font-size: 14px; font-style: italic; color: var(--a-clay);
  margin: 0 0 10px; max-width: 62ch; margin-inline: 0;
}
.ann.ann .ann-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* The one that ends it and writes to the sender, kept off the row you click
   along.

   The GAP is what separates it - 24px against the 8px between the routine
   buttons, which reads as a break at any width, and on a phone where all four
   go full width that 3:1 difference is the whole signal. The hairline is
   reinforcement: --a-rule measures 1.44:1 on white, so it is the same quiet
   division as the card borders and not something anybody has to see to
   understand the button. */
.ann.ann .ann-actions-end {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--a-rule);
}

/* ---- three ways of saying it ---------------------------------------------
   Inset and tinted so the block reads as somebody else's draft sitting beside
   the announcement, not as part of it. The card the office is editing is white;
   these are not.
   ------------------------------------------------------------------------- */

.ann.ann .ann-sugg {
  margin: 4px 0 14px;
  padding: 12px 13px 4px;
  background: #F7F8F5;
  border: 1px solid var(--a-rule);
  border-left: 3px solid var(--a-gold);
  border-radius: 2px;
}
.ann.ann .ann-sugg-head {
  font-family: var(--a-disp); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-gold-dk);
  margin: 0 0 10px; max-width: none; margin-inline: 0;
}
.ann.ann .ann-sugg-one {
  background: var(--a-surface);
  border: 1px solid var(--a-rule); border-radius: 2px;
  padding: 11px 12px; margin: 0 0 9px;
}
.ann.ann .ann-sugg-tag {
  display: inline-block; font-family: var(--a-disp); font-size: 10px;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--a-muted); margin-bottom: 6px;
}
.ann.ann .ann-sugg-title {
  font-family: var(--a-disp); font-size: 15px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--a-ink);
  margin: 0 0 5px; max-width: none; margin-inline: 0;
}
.ann.ann .ann-sugg-body {
  font-size: 15px; line-height: 1.55; color: var(--a-ink);
  margin: 0 0 9px; max-width: none; margin-inline: 0;
}

/* The verse, boxed away from the wording.
   It is the one part of a suggestion that asserts something checkable, and the
   one part nothing here can check - so it does not get to look like prose the
   office has already read. The clay rule is the same colour the page uses for
   "confirm this before it goes out" everywhere else. */
.ann.ann .ann-sugg-verse {
  background: #FBEDE9; border-left: 3px solid var(--a-clay);
  padding: 8px 10px; margin: 0 0 9px; border-radius: 2px;
}
.ann.ann .ann-sugg-verse-t {
  font-size: 15px; font-style: italic; line-height: 1.5; color: var(--a-ink);
  margin: 0 0 4px; max-width: none; margin-inline: 0;
}
.ann.ann .ann-sugg-ref {
  font-family: var(--a-disp); font-size: 12px; font-style: normal;
  letter-spacing: 0.04em; color: var(--a-clay); white-space: nowrap;
}
.ann.ann .ann-sugg-check {
  font-family: var(--a-disp); font-size: 12px; color: var(--a-clay);
  margin: 0; max-width: none; margin-inline: 0;
}
.ann.ann .ann-sugg-go { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }

/* While a rewording is in flight. announce.js disables every button on the
   item and renames the one that was pressed; this is what disabled looks
   like, at a tone that reads as "not now" rather than as a broken control —
   --a-rule measures 1.44:1 and would just make the row vanish. */
.ann.ann .ann-item-form.is-thinking .ann-btn[disabled] {
  color: var(--a-muted); border-color: var(--a-muted);
  background: none; cursor: progress;
}
.ann.ann .ann-item-form.is-thinking .ann-btn-solid[disabled] {
  background: #E8E4DA; border-color: #E8E4DA; color: var(--a-muted);
}

/* ---- changing the wording ------------------------------------------------
   The title keeps the display face, the uppercase and the letterspacing it has
   when it is only being read, so editing it does not change what it looks like
   - you are looking at the notice, not at a form that describes one.

   The boxes are quiet until you go near them: a hairline rule rather than a
   field border, so eight announcements read as eight announcements instead of
   sixteen inputs. Focus brings the gold up, which is the one moment you want to
   be certain which box has the caret.
   ------------------------------------------------------------------------- */

.ann.ann .ann-item-form { margin: 0; }

.ann.ann .ann-edit-lab {
  display: block; font-family: var(--a-disp); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-muted);
  margin: 0 0 3px;
}
.ann.ann .ann-edit-lab + * { margin-bottom: 9px; }

.ann.ann .ann-edit-title,
.ann.ann .ann-edit-body {
  display: block; width: 100%; box-sizing: border-box;
  color: var(--a-ink); background: #FCFDFB;
  border: 1px solid var(--a-rule); border-radius: 2px;
  padding: 8px 10px;
}
.ann.ann .ann-edit-title {
  font-family: var(--a-disp); font-size: 17px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.ann.ann .ann-edit-body {
  /* 16px or iOS zooms the page the moment the field is focused. */
  font-family: var(--a-body); font-size: 16px; line-height: 1.55;
  resize: vertical;
}
.ann.ann .ann-edit-title:hover,
.ann.ann .ann-edit-body:hover { border-color: var(--a-muted); }
.ann.ann .ann-edit-title:focus,
.ann.ann .ann-edit-body:focus {
  outline: none; background: var(--a-surface);
  border-color: var(--a-gold); box-shadow: 0 0 0 2px rgba(168, 117, 36, 0.18);
}

/* What they actually sent, shut by default. It is the answer to a question
   nobody asks most weeks, so it should not take up the room every week. */
.ann.ann .ann-orig {
  margin: 0 0 10px; padding: 8px 10px;
  background: #F7F8F5; border: 1px solid var(--a-rule); border-radius: 2px;
}
.ann.ann .ann-orig > summary {
  font-family: var(--a-disp); font-size: 12px; color: var(--a-muted);
  cursor: pointer; list-style: revert;
}
.ann.ann .ann-orig > summary:hover { color: var(--a-ink); }
.ann.ann .ann-orig-t {
  font-family: var(--a-disp); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--a-muted);
  margin: 9px 0 4px; max-width: none; margin-inline: 0;
}
.ann.ann .ann-orig-b {
  font-size: 15px; color: var(--a-muted); margin: 0;
  max-width: none; margin-inline: 0;
}

.ann.ann .ann-said-line {
  font-family: var(--a-disp); font-size: 14px;
  padding: 11px 14px; border-radius: 2px; margin: 0 0 16px;
  background: #F1F5EF; border-left: 3px solid var(--a-green); color: var(--a-green);
  max-width: none; margin-inline: 0;
}
.ann.ann .ann-said-denied,
.ann.ann .ann-said-error {
  background: #FBEDE9; border-left-color: var(--a-clay); color: var(--a-clay);
}
/* "Added to Sunday 9 August" is worth being able to check. The item has left the
   queue by then, so without this the only confirmation is a sentence. */
.ann.ann .ann-said-go {
  margin-left: 8px; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
/* Bar and text the same colour, the way the other two states do it - and muted
   rather than --a-rule, which measures 1.25:1 and would read as a block that
   forgot to have an accent rather than a quiet one. */
.ann.ann .ann-said-nochange {
  background: #F7F8F5; border-left-color: var(--a-muted); color: var(--a-muted);
}

/* ---- phones -------------------------------------------------------------- */
@media (max-width: 640px) {
  .ann.ann-cta, .ann.ann-panel { padding: 18px 16px; }

  /* A gutter of its own on the standalone page.
     The page's row is width:90% on a desktop and full width here, with no
     padding of its own, so the fields sat flush against both edges of the
     screen - typing into a box whose border IS the edge of the phone. The
     dialog on Connect has its own padding and is unaffected. */
  .ann.ann-form-wrap { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
  .ann-dialog .ann.ann-form-wrap { padding-left: 0; padding-right: 0; }
  .ann.ann .ann-row2 { grid-template-columns: 1fr; }
  .ann.ann .ann-item-head { flex-direction: column; gap: 3px; }
  /* Each action full width. Three uppercase buttons side by side at 375px wrap
     into a ragged block where the one you meant is not where you looked.
     The two on a suggestion card are the same case and matter more: one of
     them takes a Bible verse and the other does not, so which is which must
     not depend on remembering their widths. */
  .ann.ann .ann-actions .ann-btn,
  .ann.ann .ann-sugg-go .ann-btn { flex: 1 1 100%; text-align: center; }
  .ann.ann .ann-queue-head { flex-direction: column; gap: 6px; }
}

@media print {
  /* The office prints the queue to work through it; the buttons are no use on
     paper and the flags very much are. */
  .ann.ann .ann-actions,
  .ann.ann .ann-btn { display: none !important; }
}