/* HERD for WordPress: styles for HERD's own markup only. Colours come from the site's
   Kadence palette when it has one, so the same file suits any publication; the fallbacks
   are WTJ's. Everything is scoped to .herd-* so nothing here can restyle the theme. */

.herd-dialog {
  --herd-accent: var(--global-palette1, #3b6d11);
  --herd-ink: var(--global-palette3, #222);
  --herd-muted: #6b6b6b;
  --herd-line: var(--global-palette6, #e0e0d8);
  --herd-error: #a4231b;
  border: 1px solid var(--herd-line);
  border-radius: 8px;
  padding: 0;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  color: var(--herd-ink);
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  font: 16px/1.5 Arial, Helvetica, sans-serif;
}
.herd-dialog::backdrop { background: rgba(20, 24, 16, .55); }

.herd-sheet { position: relative; padding: 28px 28px 24px; }
.herd-dialog h2 {
  margin: 0 0 12px;
  padding-right: 32px;
  font: 700 24px/1.2 Georgia, 'Times New Roman', serif;
  color: var(--herd-ink);
}
.herd-dialog p { margin: 0 0 14px; }
.herd-small { font-size: 14px; color: var(--herd-muted); }
.herd-note { padding: 10px 12px; background: #fdf3e1; border-left: 3px solid #b26b00; font-size: 14px; }

.herd-close {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; padding: 0; /* the theme pads every button; not this one */
  border: 0; border-radius: 50%;
  background: transparent; color: var(--herd-muted);
  font: 28px/1 Arial, sans-serif; cursor: pointer;
}
.herd-close:hover { background: #f2f2ee; color: var(--herd-ink); }

.herd-form label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.herd-form input {
  display: block; box-sizing: border-box; width: 100%;
  margin: 0 0 12px; padding: 11px 12px;
  border: 1px solid #8a8a84; border-radius: 4px;
  font: 16px Arial, sans-serif; color: var(--herd-ink); background: #fff;
}
.herd-form input[aria-invalid='true'] { border-color: var(--herd-error); }
.herd-error { color: var(--herd-error); font-size: 14px; }

.herd-btn {
  display: inline-block; box-sizing: border-box; width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--herd-accent); border-radius: 4px;
  background: var(--herd-accent); color: #fff;
  font: 700 16px Arial, sans-serif; cursor: pointer;
}
.herd-btn:hover { filter: brightness(.92); }
.herd-btn:disabled { opacity: .7; cursor: progress; }
.herd-btn-quiet { background: #fff; color: var(--herd-accent); }
.herd-linkish {
  padding: 0; border: 0; background: none;
  color: var(--herd-accent); font: inherit; text-decoration: underline; cursor: pointer;
}

.herd-dialog :focus-visible { outline: 3px solid var(--herd-accent); outline-offset: 2px; }

@media (max-width: 480px) {
  .herd-sheet { padding: 24px 18px 20px; }
  .herd-dialog h2 { font-size: 22px; }
}

/* ---------- The gate ----------
   [data-herd-gate] is set on <html> only once the script has decided, so with no script
   (or a failed one) nothing below applies and the article stays whole. */
html[data-herd-gate='walled'] [data-herd-gated] { display: none; }
html[data-herd-gate='walled'] [data-herd-preview] { position: relative; }
html[data-herd-gate='walled'] [data-herd-preview]::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

/* The subscribe prompt over the preview: centred, emblem, green rule (Devin's design for
   WTJ's Pelcro prompt, kept). The one place the article stops and asks for something.
   It sits inside the article body, whose own link and heading rules (e.g. WTJ's
   `.wtj-single .wtj-article-body a`, 0-2-1) would otherwise win, so the prompt's inner
   rules use a doubled class (0-3-0) to outrank them without !important. */
.herd-prompt {
  --herd-accent: var(--global-palette1, #3b6d11);
  margin: 8px 0 0;
  padding: 32px 40px 30px;
  border: 1px solid var(--global-palette6, #e0e0d8);
  border-radius: 8px;
  background: #fff;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
}
.herd-prompt-image { display: block; width: 88px; height: 75px; margin: 0 auto 18px; object-fit: contain; }
.herd-prompt.herd-prompt .herd-prompt-title {
  margin: 0 0 10px;
  font: 400 26px/1.25 Georgia, 'Times New Roman', serif;
  color: var(--global-palette3, #222);
}
.herd-prompt.herd-prompt .herd-prompt-text { max-width: 480px; margin: 0 auto 24px; font-size: 16px; line-height: 1.6; color: #555; }
.herd-prompt.herd-prompt .herd-prompt-text p { margin: 0 0 10px; }
.herd-prompt.herd-prompt .herd-btn {
  width: auto; min-width: 200px;
  border: 2px solid var(--herd-accent); border-radius: 4px;
  background: var(--herd-accent); color: #fff;
  font: 700 16px Arial, Helvetica, sans-serif;
  padding: 12px 24px; text-decoration: none;
}
.herd-prompt.herd-prompt .herd-btn:hover, .herd-prompt.herd-prompt .herd-btn:focus-visible { color: #fff; filter: brightness(.92); }
.herd-prompt.herd-prompt .herd-prompt-signin { margin: 18px 0 0; font: 15px Arial, Helvetica, sans-serif; color: #555; }
.herd-prompt.herd-prompt .herd-linkish { color: var(--herd-accent); font: inherit; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.herd-prompt :focus-visible { outline: 3px solid var(--herd-accent); outline-offset: 2px; }

/* The free-article notice: a slim bar along the bottom, out of the article's way. */
.herd-meter {
  --herd-accent: var(--global-palette1, #3b6d11);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 56px 10px 16px;
  background: #fff;
  border-top: 1px solid var(--global-palette6, #e0e0d8);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
  font: 15px/1.4 Arial, Helvetica, sans-serif;
  color: var(--global-palette3, #222);
}
.herd-meter p { margin: 0; text-align: center; }
.herd-meter a { color: var(--herd-accent); font-weight: 700; }
.herd-meter-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: #6b6b6b; font: 26px/1 Arial, sans-serif; cursor: pointer;
}
.herd-meter-close:hover { background: #f2f2ee; color: #222; }
.herd-meter-close:focus-visible { outline: 3px solid var(--herd-accent); outline-offset: 2px; }

@media (max-width: 480px) {
  .herd-prompt { padding: 26px 18px 22px; }
  .herd-prompt.herd-prompt .herd-prompt-title { font-size: 23px; }
  .herd-prompt.herd-prompt .herd-btn { width: 100%; min-width: 0; }
  .herd-meter { font-size: 14px; justify-content: flex-start; }
  .herd-meter p { text-align: left; }
}

/* ---------- Checkout pop-up ---------- */
.herd-checkout { width: min(560px, calc(100vw - 32px)); }
.herd-checkout fieldset { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.herd-legend { margin: 0 0 8px; padding: 0; font-weight: 700; font-size: 14px; }
.herd-center { text-align: center; margin-top: 14px; }

.herd-tier {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 8px; padding: 14px 16px;
  border: 1px solid #c9c9c2; border-radius: 6px;
  cursor: pointer;
}
.herd-tier:has(input:checked) { border: 2px solid var(--herd-accent); padding: 13px 15px; background: #f6f8f2; }
.herd-tier input, .herd-radio input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--herd-accent); }
.herd-tier-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.herd-tier-name { font-weight: 700; font-size: 17px; }
.herd-tier-blurb { font-size: 14px; color: var(--herd-muted); }
.herd-tier-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 10px; background: var(--herd-accent); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: 2px;
}
.herd-tier-price { flex: none; font: 700 20px Georgia, serif; }
.herd-tier-price span { font: 400 13px Arial, sans-serif; color: var(--herd-muted); }

.herd-radio { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; cursor: pointer; }
.herd-radio input { margin-top: 2px; }
.herd-radio > span { display: flex; flex-direction: column; }
.herd-radio .herd-small { margin: 0; }

.herd-back { margin: 0 0 10px; font-size: 14px; }
.herd-stripe { min-height: 120px; margin: 8px -8px 0; }

/* Phones: the pop-up fills the screen (checklist 1.9). */
@media (max-width: 600px) {
  .herd-checkout {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0;
  }
  .herd-checkout .herd-sheet { padding: 20px 16px 28px; }
  .herd-stripe { margin: 8px -4px 0; }
}

/* After a renewal: "use this email from now on?" */
.herd-email-choice { margin: 4px 0 0; }
.herd-email-choice p { margin: 0 0 8px; }
.herd-pair { display: flex; gap: 10px; margin-top: 10px; }
.herd-pair .herd-btn { flex: 1; }

/* ---------- The renewal page (a [data-herd="renewal"] block on /renew) ----------
   Doubled class, like the prompt, so the theme's button and heading styles don't win. */
.herd-renewal {
  --herd-accent: var(--global-palette1, #3b6d11);
  --herd-muted: #6b6b6b;
  box-sizing: border-box; max-width: 560px; margin: 24px auto;
  padding: 32px 36px 28px;
  border: 1px solid var(--global-palette6, #e0e0d8);
  border-radius: 8px; background: #fff;
  font: 16px/1.55 Arial, Helvetica, sans-serif; color: var(--global-palette3, #222);
}
.herd-renewal.herd-renewal .herd-renewal-title { margin: 0 0 6px; font: 400 28px/1.25 Georgia, 'Times New Roman', serif; color: var(--global-palette3, #222); }
.herd-renewal.herd-renewal p { margin: 0 0 14px; }
.herd-renewal .herd-small { font-size: 14px; color: var(--herd-muted); }
.herd-renewal .herd-renewal-price { font-size: 18px; }
.herd-renewal.herd-renewal .herd-btn {
  display: block; box-sizing: border-box; width: 100%; margin: 6px 0 12px;
  padding: 13px 16px; border: 2px solid var(--herd-accent); border-radius: 4px;
  background: var(--herd-accent); color: #fff; font: 700 17px Arial, Helvetica, sans-serif; cursor: pointer; text-decoration: none;
}
.herd-renewal.herd-renewal .herd-btn-quiet { background: #fff; color: var(--herd-accent); }
.herd-renewal.herd-renewal .herd-btn:hover { filter: brightness(.92); }
.herd-renewal.herd-renewal .herd-linkish { padding: 0; border: 0; background: none; color: var(--herd-accent); font: inherit; text-decoration: underline; cursor: pointer; }
.herd-renewal :focus-visible { outline: 3px solid var(--herd-accent); outline-offset: 2px; }
@media (max-width: 480px) {
  .herd-renewal { padding: 24px 18px 20px; margin: 16px 0; }
  .herd-renewal.herd-renewal .herd-renewal-title { font-size: 24px; }
}

/* ---------- The account page and the reading list ([data-herd="account"] on /account/,
   [data-herd="reading-list"] on /reading-list/) ----------
   Open on the page rather than in a card: the theme's own page title is turned off on both
   pages, so the reader's name is the heading (Devin, 2026-10-27). The doubled class keeps the
   theme's inputs and headings out. */
.herd-account.herd-account { max-width: 720px; margin: 8px auto 48px; padding: 0; border: 0; border-radius: 0; background: none; }
.herd-account .herd-eyebrow { margin: 0 0 2px; font-size: 13px; letter-spacing: .04em; color: var(--herd-muted); }
.herd-account.herd-account .herd-acct-name { margin: 0 0 4px; font: 400 32px/1.2 Georgia, 'Times New Roman', serif; color: var(--global-palette3, #222); }
.herd-account .herd-acct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0 0 22px; }
.herd-account .herd-acct-head .herd-small { margin: 0; }
.herd-account.herd-account .herd-acct-head .herd-linkish, .herd-account .herd-head-link { flex: none; margin-top: 6px; font-size: 15px; color: var(--herd-accent); }
.herd-account.herd-account .herd-acct-h { margin: 0 0 6px; font: 400 21px/1.3 Georgia, 'Times New Roman', serif; color: var(--global-palette3, #222); }
.herd-account .herd-acct-h:focus { outline: none; }
.herd-account.herd-account .herd-acct-sec { margin: 34px 0 0; padding: 0; border: 0; }

/* The facts that answer "am I paid up, and until when?" */
.herd-account .herd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 12px; }
.herd-account .herd-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 6px; background: #f5f5ef; }
.herd-account .herd-tile-label { font-size: 13px; color: var(--herd-muted); }
.herd-account .herd-tile-value { font: 700 20px/1.25 Georgia, 'Times New Roman', serif; color: var(--global-palette3, #222); }
.herd-account.herd-account .herd-acct-status .herd-small { margin: 0 0 10px; }
.herd-account.herd-account .herd-acct-status .herd-note { margin: 0 0 12px; }
.herd-account.herd-account .herd-acct-status .herd-acct-actions { align-items: center; margin-top: 4px; }

/* "Your details": a row per item, its form opening in place. */
.herd-account .herd-row { padding: 14px 0; border-top: 1px solid var(--global-palette6, #e0e0d8); }
.herd-account .herd-row:last-child { border-bottom: 1px solid var(--global-palette6, #e0e0d8); }
.herd-account .herd-row-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.herd-account.herd-account .herd-row-text { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.herd-account .herd-row-label { display: block; font-size: 13px; color: var(--herd-muted); }
.herd-account.herd-account .herd-row .herd-linkish { flex: none; font-size: 15px; }
.herd-account.herd-account .herd-row-msg { margin: 6px 0 0; font-size: 14px; }
.herd-account .herd-row-msg:empty { display: none; }
.herd-account .herd-row .herd-note { margin: 10px 0 0; }
.herd-account .herd-row form { margin: 14px 0 2px; }
.herd-account .herd-row-open .herd-row-value { color: var(--herd-muted); }

/* The way to the reading list, and the quiet cancel link at the foot. */
.herd-account.herd-account .herd-reading-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 34px 0 0; padding: 16px 18px; border-radius: 6px;
  background: #eef5e6; color: #2f5a0d; text-decoration: none;
}
.herd-account .herd-reading-link strong { display: block; font: 700 17px Georgia, 'Times New Roman', serif; }
.herd-account .herd-reading-link span span { display: block; font-size: 14px; }
.herd-account .herd-reading-link > span[aria-hidden] { font-size: 22px; }
.herd-account .herd-reading-link:hover strong { text-decoration: underline; }
.herd-account .herd-acct-foot { margin-top: 28px; }
.herd-account.herd-account .herd-acct-foot .herd-cancel-link .herd-linkish { color: var(--herd-muted); font-size: 14px; }
.herd-account .herd-acct-find { padding: 18px 20px 6px; border-radius: 6px; background: #f5f5ef; margin: 0 0 16px; }
.herd-account.herd-account .herd-field { display: block; flex: 1; min-width: 0; margin: 0 0 12px; }
.herd-account.herd-account .herd-field span { display: block; margin: 0 0 4px; font-weight: 700; font-size: 14px; }
.herd-account.herd-account .herd-field input {
  display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 10px 12px;
  border: 1px solid #8a8a84; border-radius: 4px; background: #fff;
  font: 16px Arial, Helvetica, sans-serif; color: var(--global-palette3, #222);
}
.herd-account.herd-account .herd-field input:focus-visible { outline: 3px solid var(--herd-accent); outline-offset: 1px; }
.herd-account.herd-account .herd-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font-size: 15px; cursor: pointer; }
.herd-account.herd-account .herd-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--herd-accent); }
.herd-account .herd-pair, .herd-account .herd-trio { display: flex; gap: 12px; }
.herd-account .herd-trio .herd-field:first-child { flex: 2; }
.herd-account .herd-msg:empty { display: none; }
.herd-account .herd-msg { margin: 4px 0 10px; font-size: 14px; }
.herd-account .herd-msg span { display: block; margin: 0 0 6px; }
.herd-account .herd-ok { color: #2f5a0d; }
.herd-account .herd-error { color: #a4231b; }
.herd-account .herd-note { padding: 10px 12px; background: #fdf3e1; border-left: 3px solid #b26b00; font-size: 14px; }
.herd-account.herd-account .herd-btn { width: auto; min-width: 200px; display: inline-block; }
.herd-account.herd-account .herd-acct-actions .herd-btn { min-width: 0; }
@media (max-width: 480px) {
  .herd-account .herd-pair, .herd-account .herd-trio { flex-direction: column; gap: 0; }
  .herd-account.herd-account .herd-btn { width: 100%; }
  .herd-account.herd-account .herd-acct-name { font-size: 26px; }
  .herd-account .herd-tiles { grid-template-columns: 1fr 1fr; }
}
.herd-account .herd-acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.herd-account.herd-account .herd-acct-actions .herd-btn { margin: 0; }
.herd-account .herd-ok-note { background: #eef5e6; border-left-color: #3b6d11; }
.herd-account .herd-ar-confirm { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--global-palette6, #e0e0d8); border-radius: 6px; background: #fafaf6; }
.herd-account .herd-ar-confirm p { margin: 0 0 10px; }
.herd-account .herd-cancel-link { margin-top: 14px; }
.herd-account .herd-cancel-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--global-palette6, #e0e0d8); }
.herd-account .herd-reasons { margin: 0 0 12px; padding: 0; border: 0; }
.herd-account .herd-reasons legend { margin-bottom: 6px; }

/* Gift checkout: "Who's the gift for?" and "Where should we mail it?" in the pop-up. */
.herd-checkout .herd-gift { margin: 0 0 16px; padding: 14px 16px 6px; border: 1px solid #c9c9c2; border-radius: 6px; }
.herd-checkout .herd-gift .herd-legend { padding: 0 4px; }
.herd-checkout .herd-gift > .herd-small { margin: 0 0 10px; }
.herd-gfield { display: block; flex: 1; min-width: 0; margin: 0 0 10px; }
.herd-gfield span { display: block; margin: 0 0 4px; font-weight: 700; font-size: 14px; }
.herd-gfield input {
  display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 10px 12px;
  border: 1px solid #8a8a84; border-radius: 4px; font: 16px Arial, sans-serif; color: var(--herd-ink); background: #fff;
}
.herd-gfield input[aria-invalid='true'] { border-color: var(--herd-error); }
.herd-gtrio { display: flex; gap: 10px; }
.herd-gtrio .herd-gfield:first-child { flex: 2; }
.herd-checkout .herd-gift .herd-error { margin: -4px 0 10px; }
@media (max-width: 480px) { .herd-gtrio { flex-direction: column; gap: 0; } }

/* "Stay in touch" on the "You're in" screen (2026-11-11): the account page's checkbox look. */
.herd-checkout .herd-optins { margin: 4px 0 18px; padding: 14px 16px 4px; border: 1px solid #c9c9c2; border-radius: 6px; }
.herd-checkout .herd-optins .herd-legend { padding: 0 4px; }
.herd-checkout .herd-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font-size: 15px; cursor: pointer; }
.herd-checkout .herd-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--herd-accent); }
.herd-checkout .herd-optins > .herd-small { margin: 0 0 10px; }
.herd-account .herd-gifts { margin: 0; padding: 0; list-style: none; }
.herd-account .herd-gifts li { margin: 0 0 10px; }

/* The reading list: saved articles as cards, follows as tags. The Save buttons on articles,
   contributors and topics are the theme's own (.wtj-save), styled there. */
.herd-reading .herd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.herd-reading .herd-cards:empty { display: none; }
.herd-reading .herd-card { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 10px; border: 1px solid var(--global-palette6, #e0e0d8); border-radius: 6px; }
.herd-reading .herd-card img, .herd-reading .herd-card-img { flex: none; width: 96px; height: 72px; object-fit: cover; border-radius: 4px; background: #f0f0ea; }
.herd-reading .herd-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.herd-reading .herd-card-title { font: 700 16px/1.3 Georgia, 'Times New Roman', serif; color: var(--global-palette3, #222); text-decoration: none; overflow-wrap: anywhere; }
.herd-reading a.herd-card-title:hover { text-decoration: underline; }
.herd-reading.herd-reading .herd-card .herd-small { margin: 0; font-size: 13px; }
.herd-reading.herd-reading .herd-card .herd-linkish { flex: none; padding: 2px 0; font-size: 14px; }
.herd-reading .herd-chip-label { margin: 14px 0 6px !important; font-size: 13px; color: var(--herd-muted); }
.herd-reading .herd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.herd-reading .herd-chip { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 2px 4px 2px 14px; border-radius: 999px; background: #eef5e6; color: #2f5a0d; font-size: 15px; }
.herd-reading .herd-chip a { color: inherit; text-decoration: none; }
.herd-reading .herd-chip a:hover { text-decoration: underline; }
.herd-reading .herd-chip button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.herd-reading .herd-chip button:hover { background: #dbe9cb; }
.herd-reading.herd-reading .herd-empty { margin: 10px 0 0; padding: 14px 16px; border-radius: 6px; background: #f5f5ef; font-size: 15px; }
@media (max-width: 480px) { .herd-reading .herd-cards { grid-template-columns: 1fr; } }

/* After Save on an article: "Saved to your reading list · View". */
.herd-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 100000;
  display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 11px 16px; border-radius: 6px; background: #222; color: #fff;
  font: 15px/1.4 Arial, Helvetica, sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s;
}
.herd-toast.herd-toast-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.herd-toast a { color: #cfe6b4; font-weight: 700; text-decoration: underline; }
.herd-toast a:focus-visible { outline: 2px solid #cfe6b4; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .herd-toast { transition: none; } }

/* Announcements for screen readers only ("Saved", "Unfollowed"). */
.herd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- The account link's menu (an account link marked data-herd-menu) ----------
   Layout and when it shows; the theme gives it its colours to match the header. Opens on hover
   or keyboard focus where the device can hover, and on .herd-open (a tap) where it can't. */
.herd-acct-menu-host { position: relative; }
.herd-acct-menu { display: none; position: absolute; top: 100%; right: 0; z-index: 1000; min-width: 180px; margin: 0; padding: 6px 0; list-style: none; text-align: left; }
.herd-acct-menu a { display: block; padding: 10px 16px; white-space: nowrap; }
@media (hover: hover) {
  html:is([data-herd='signed-in'], [data-herd='subscriber']) .herd-acct-menu-host:is(:hover, :focus-within) .herd-acct-menu { display: block; }
}
html:is([data-herd='signed-in'], [data-herd='subscriber']) .herd-acct-menu-host.herd-open .herd-acct-menu { display: block; }