/* ============================================================================
   HGC design system
   ----------------------------------------------------------------------------
   Loaded AFTER style.css so it can define what that file forgot and refine what
   it got wrong, without a 567 KB rewrite that would risk the whole site.

   Three jobs:
     1. Define the tokens style.css uses but never declares. Six of them resolve
        to nothing today, so `border-radius: var(--radius-md)` renders square.
     2. Give the site one token vocabulary (colour, space, radius, shadow,
        motion, z-index) so new work stops inventing values. style.css currently
        carries 312 distinct hard-coded hex colours.
     3. Carry the dark theme on the same .hgc-dark hook style.css already uses,
        so all 128 existing dark rules keep working unchanged.
   ============================================================================ */

:root {
  /* ---- tokens style.css references but never defines ---------------------
     Without these, style.css silently drops the declaration. --primary-rgb had
     an inline fallback of 139,92,246 (a violet), which is not the HGC purple,
     so tinted surfaces were drifting off-brand. */
  --primary-rgb: 75, 0, 130;
  --radius-md: 12px;
  --accent: #f59e0b;
  --bg-light: #f8fafc;
  --body-bg: #ffffff;

  /* ---- surface + text ---------------------------------------------------- */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-surface-3: #f1f5f9;
  --color-text: #16121f;
  --color-text-secondary: #3f3a4d;
  --color-text-muted: #5f5872;
  --color-border: #e4e0ec;
  --color-border-strong: #cdc6da;

  /* ---- brand ------------------------------------------------------------- */
  --color-primary: #4b0082;
  --color-primary-hover: #3a0066;
  --color-on-primary: #ffffff;
  --color-accent: #7e5d08;

  /* ---- status. Chosen for >=4.5:1 on their own tinted background --------- */
  --color-success: #0e6e3c;  --color-success-bg: #e6f4ec;
  --color-warning: #8a5108;  --color-warning-bg: #fcf1e0;
  --color-danger:  #a82f26;  --color-danger-bg:  #fbeae8;
  --color-info:    #1d4ed8;  --color-info-bg:    #e8eefc;

  --color-overlay: rgba(16, 12, 24, .58);

  /* ---- spacing. A 4px scale, so gaps stop being arbitrary ---------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- radius ------------------------------------------------------------ */
  --radius-sm: 6px; --radius-lg2: 16px; --radius-xl2: 24px; --radius-pill: 999px;

  /* ---- elevation --------------------------------------------------------- */
  --elev-1: 0 1px 2px rgba(16,12,24,.06), 0 1px 3px rgba(16,12,24,.05);
  --elev-2: 0 2px 4px rgba(16,12,24,.05), 0 6px 16px rgba(16,12,24,.07);
  --elev-3: 0 8px 24px rgba(16,12,24,.10), 0 2px 6px rgba(16,12,24,.06);

  /* ---- motion. Named by intent so components stop inventing durations ---- */
  --motion-fast: 140ms;
  --motion-normal: 220ms;
  --motion-slow: 380ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.66,0,.34,1);

  /* ---- z-index ------------------------------------------------------------
     These are calibrated against what style.css ALREADY uses, not invented from
     zero: the site runs up to 100001, the bottom navigation sits at 1200 and the
     header at 1100. A tidy 100/200/300 ladder would have put every toast and
     modal underneath the furniture. Toasts sit above everything because a
     message the user cannot see is not a message.

     Height of the fixed bottom navigation, so overlays can clear it. */
  --bottom-nav-h: 57px;

  --z-sticky: 1000;
  --z-header: 1100;
  --z-drawer: 1200;
  --z-modal: 10000;
  --z-toast: 100002;
  --z-preloader: 100003;

  /* Tells the browser to render form controls, scrollbars and date pickers in
     the matching scheme. Without it those stay light on a dark page. */
  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Dark theme. .hgc-dark is the hook style.css already uses, so its 128 existing
   dark rules keep applying; this only supplies the token layer beneath them.
   --------------------------------------------------------------------------- */
.hgc-dark {
  --primary-rgb: 168, 132, 255;
  --accent: #e0b94a;
  --bg-light: #1b1725;
  --body-bg: #131019;

  --color-bg: #131019;
  --color-surface: #1b1725;
  --color-surface-2: #221d2e;
  --color-surface-3: #2a2438;
  --color-text: #ece8f4;
  --color-text-secondary: #c4bdd4;
  --color-text-muted: #a49bb8;
  --color-border: #2e2840;
  --color-border-strong: #453d5c;

  --color-primary: #b99cff;
  --color-primary-hover: #cbb5ff;
  --color-on-primary: #1a1226;
  --color-accent: #e0b94a;

  --color-success: #63ce8c;  --color-success-bg: #10281a;
  --color-warning: #e5a65c;  --color-warning-bg: #2c2113;
  --color-danger:  #ff8e82;  --color-danger-bg:  #2e1a17;
  --color-info:    #8fb4ff;  --color-info-bg:    #16203a;

  --color-overlay: rgba(0, 0, 0, .66);

  --elev-1: 0 1px 2px rgba(0,0,0,.4);
  --elev-2: 0 2px 4px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.4);
  --elev-3: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);

  color-scheme: dark;
}

/* ============================================================================
   Accessibility
   ============================================================================ */

/* A keyboard ring that is visible on every background, without punishing mouse
   users with an outline on click. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.hgc-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: #cbb5ff;
}

/* The skip link measured 1px wide, so it was unreachable in practice. */
.skip-to-content:focus,
.skip-to-content:focus-visible {
  position: fixed !important;
  top: calc(var(--space-3) + env(safe-area-inset-top, 0px)) !important;
  left: var(--space-3) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: var(--space-3) var(--space-5) !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  z-index: var(--z-toast);
  font-weight: 600;
  white-space: nowrap;
}

/* iOS zooms the page when a focused input is under 16px. */
@media (max-width: 820px) {
  input:not([type=checkbox]):not([type=radio]),
  select, textarea { font-size: max(16px, 1rem); }
}

/* ---- Touch targets ---------------------------------------------------------
   Measured at 375px, these were the controls a finger could miss. WCAG 2.2
   exempts a link sitting inline within a sentence, so plain prose links are
   deliberately left alone; these are standalone controls where the small size
   was an oversight rather than a consequence of the text flow.

   Each fix adds height around the existing text instead of resizing it, so the
   visual design does not move. */
.bcard__link,
.ministry-card__link,
.card__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;          /* was 21px */
}

.hvisit__contact-item {
  min-height: 44px;          /* was 39px, one pixel short of the target */
  display: flex;
  align-items: center;
}

/* A 13px native checkbox is not a touch target. Enlarge the control itself and
   let the associated label carry a full-height hit area beside it. */
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  accent-color: var(--color-primary);
}
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}
/* Where the label is a sibling rather than a wrapper, give it the same height. */
input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   Mobile viewport correctness
   ============================================================================ */

/* Nothing may sit under the notch, the home indicator or the Safari toolbar. */
body { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* 100vh is wrong on mobile Safari: it measures the tallest layout, so the
   bottom of a full-height element hides behind the browser toolbar. */
@supports (height: 100dvh) {
  .preloader, .mobile-menu, .modal--full { height: 100dvh; min-height: 100dvh; }
}

/* ============================================================================
   Devotional freshness
   ============================================================================ */

.devotional-featured__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-left: 3px solid currentColor;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .92rem;
  line-height: 1.5;
}
.devotional-featured--latest .devotional-featured__badge { opacity: .92; }

/* ============================================================================
   Empty states
   ============================================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  text-align: center;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg2);
}
.empty-state__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
}
.empty-state__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
}
.empty-state__text {
  margin: 0;
  max-width: 46ch;
  color: var(--color-text-muted);
  font-size: .94rem;
}

/* ============================================================================
   Toasts
   ----------------------------------------------------------------------------
   The site already carries TWO toast implementations that both claim the same
   class names: assets/js/notifications.js (window.hgcToast, 25 call sites) and
   an inline block in includes/footer.php (window.showToast, 3 call sites). Both
   hard-code `background:#fff`, so a toast stayed a white card on a dark page.

   Adding a third would make it worse. Instead this restyles the classes both
   already use, so the two APIs keep working and finally look like one thing.

   The `html` prefix is deliberate. notifications.js injects its <style> into
   the head at runtime, which lands AFTER this file in source order and would
   win every tie; one extra element in the selector settles it without !important.
   ============================================================================ */

html .hgc-toast-wrap,
html #hgc-toast-wrap,
html #hgc-toast-container {
  position: fixed;
  left: 50%;
  right: auto;
  /* Clear the fixed bottom navigation (57px, z-index 1200) and the iOS home
     indicator. Pinned at the old 24px the toast was simply hidden behind the
     nav bar on every phone. */
  bottom: calc(var(--bottom-nav-h) + var(--space-3) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(420px, calc(100vw - var(--space-4) * 2));
  max-width: none;
  pointer-events: none;
}
/* Above 900px style.css hides the bottom navigation, so the toast can return to
   the corner and sit at the normal margin. */
@media (min-width: 901px) {
  html .hgc-toast-wrap,
  html #hgc-toast-wrap,
  html #hgc-toast-container {
    left: auto;
    right: var(--space-5);
    transform: none;
    bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }
}

html .hgc-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  max-width: none;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  font-size: .94rem;
  line-height: 1.45;
}
html .hgc-toast--success { border-left-color: var(--color-success); }
html .hgc-toast--error   { border-left-color: var(--color-danger); }
html .hgc-toast--warning { border-left-color: var(--color-warning); }
html .hgc-toast--info    { border-left-color: var(--color-info); }

html .hgc-toast__icon { flex: 0 0 auto; margin-top: 1px; }
html .hgc-toast--success .hgc-toast__icon { color: var(--color-success); }
html .hgc-toast--error   .hgc-toast__icon { color: var(--color-danger); }
html .hgc-toast--warning .hgc-toast__icon { color: var(--color-warning); }
html .hgc-toast--info    .hgc-toast__icon { color: var(--color-info); }

/* notifications.js sets its own font-family on the message. */
html .hgc-toast__msg {
  font-family: inherit;
  color: var(--color-text);
  font-size: .94rem;
  line-height: 1.45;
}

/* ============================================================================
   Theme control
   ============================================================================ */

.theme-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.theme-seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.theme-seg__btn:hover { color: var(--color-text); }
.theme-seg__btn[aria-checked="true"] {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--elev-1);
}
.theme-seg__btn svg { width: 16px; height: 16px; }

/* In the mobile drawer the control sits on its own row and needs a real target. */
.theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.theme-row__label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* ============================================================================
   Skeletons. Shaped like the content they replace, and theme aware.
   ============================================================================ */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-3);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.45), transparent);
  animation: hgc-shimmer 1.4s infinite;
}
.hgc-dark .skeleton::after {
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.07), transparent);
}
@keyframes hgc-shimmer { to { transform: translateX(100%) } }
.skeleton--text  { height: .85em; margin: .35em 0; }
.skeleton--title { height: 1.4em; width: 65%; margin: .4em 0 .7em; }
.skeleton--thumb { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-md); }

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* ============================================================================
   Buttons: the loading state only. The width must not jump when the label is
   replaced by a spinner, or the layout shifts under the user's finger.
   ============================================================================ */

.btn[data-loading="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1.05em; height: 1.05em;
  margin: -.525em 0 0 -.525em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-on-primary);
  animation: hgc-spin .6s linear infinite;
}
.btn--outline[data-loading="true"]::after,
.btn--ghost[data-loading="true"]::after { color: var(--color-primary); }
@keyframes hgc-spin { to { transform: rotate(360deg) } }

/* ============================================================================
   Branded error pages
   ============================================================================ */

.errorpage {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.errorpage__inner { max-width: 34rem; }
.errorpage__code {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}
.errorpage__title {
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  text-wrap: balance;
}
.errorpage__text {
  color: var(--color-text-muted);
  margin: 0 auto var(--space-5);
  max-width: 46ch;
  font-size: 1.02rem;
}
.errorpage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.errorpage__links {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.errorpage__links-title {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.errorpage__links-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.errorpage__links-list a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  padding: var(--space-2) 0;
  display: inline-block;
}
.errorpage__links-list a:hover { text-decoration: underline; }

/* ============================================================================
   Live indicator in the navigation
   ----------------------------------------------------------------------------
   "Watch Live" was missing from the navigation entirely. The /live page exists
   and works, but the only link to it was a single button on the home page, so
   from Sermons, About or anywhere else the church's livestream could not be
   reached at all.

   The dot appears only when a stream is genuinely running, driven by the same
   status check the home page already makes.
   ============================================================================ */
.nav-link--live,
.mobile-menu__link.nav-link--live {
  position: relative;
  color: var(--color-danger);
  font-weight: 600;
}
.nav-link--live::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: .45em;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--color-danger);
  box-shadow: 0 0 0 0 currentColor;
  animation: hgc-live-pulse 2s ease-out infinite;
}
@keyframes hgc-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(168, 47, 38, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(168, 47, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(168, 47, 38, 0); }
}
/* A steady dot still communicates "live" without the movement. */
@media (prefers-reduced-motion: reduce) {
  .nav-link--live::after { animation: none; }
}

/* ============================================================================
   Mobile top bar
   ============================================================================ */

/* The installed app draws UNDER the iOS status bar.
   manifest.php declares display:standalone and the head declares
   apple-mobile-web-app-status-bar-style: black-translucent, which together tell
   iOS to extend the web view behind the status bar. The navbar is
   position:sticky at top:0 with no inset, so on a notched iPhone the logo,
   church name and menu button rendered underneath the clock and the Dynamic
   Island. In a browser tab this is invisible, which is why it survived: it only
   appears once somebody installs the app.

   env() resolves to 0px everywhere it does not apply, so this costs nothing on
   Android or on the desktop. */
.navbar {
  padding-top: env(safe-area-inset-top, 0px);
  /* Landscape puts the notch on one side, so the bar needs horizontal insets
     too or the brand slides under it. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* The menu button measured 39x44: five pixels short of the 44px target on the
   axis a thumb is least accurate.

   Size ONLY. My first version also declared display:inline-flex, which
   overrode the `display:none` that hides this button above 1023px. The burger
   then rendered on desktop and pushed the layout 74px past the viewport. A rule
   that means "make this wider" has no business setting display; style.css
   already centres the icon inside its own media query.

   Scoped to where the button actually exists, so it cannot reach desktop. */
@media (max-width: 1023px) {
  .navbar__burger {
    min-width: 44px;
    min-height: 44px;
  }
}

/* At 320px the brand was taking 231px, 72% of the screen, to say a name the
   visitor can already see on the logo. Trimming the wordmark on the narrowest
   phones gives the menu button room to breathe without hiding the identity. */
@media (max-width: 359px) {
  .navbar__wordmark {
    font-size: .95rem;
    letter-spacing: -.01em;
  }
}

/* ============================================================================
   Desktop dropdown toggles
   ----------------------------------------------------------------------------
   These were <span> with no tabindex and no click handler: the menus opened on
   mouseenter and nothing else, so Ministries, Departments, Blog and Connect
   (32 links between them) could not be reached by keyboard at all, nor by touch
   on any device 1024px and wider where the mobile menu does not take over.

   They now carry role="button" and tabindex="0", so they need to look focusable
   and behave like a control under the cursor.
   ============================================================================ */
.nav-dropdown__toggle {
  cursor: pointer;
  user-select: none;          /* double-click was selecting the label text */
}
.nav-dropdown__toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}
/* The chevron should say which way the menu is going. */
.nav-dropdown__toggle .chevron {
  transition: transform var(--motion-fast) var(--ease-out);
}
.nav-dropdown.dropdown-open .nav-dropdown__toggle .chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown__toggle .chevron { transition: none; }
}

/* ============================================================================
   Desktop navigation: fitting the row
   ----------------------------------------------------------------------------
   Adding "Watch Live" took the top row to 15 items and pushed it past the
   viewport at 1440, clipping the account button at the right edge. I measured
   this: with Watch Live hidden the overflow is 0, so the new item is what tipped
   it, not a pre-existing fault.

   Watch Live earns its place (it was the one primary destination with no route
   to it), so the row has to give the space back. Trimming 3px of padding from
   each side of 15 items recovers about 90px, which is more than the ~70px
   needed, and 14px of horizontal padding is still a comfortable target on a
   pointer device.

   Scoped to the band where the desktop row is shown and space is tight. Above
   1600px the original spacing returns.
   ============================================================================ */
@media (min-width: 1024px) and (max-width: 1599px) {
  .navbar__links > li > .nav-link,
  .navbar__links > li > .nav-dropdown__toggle {
    padding-left: 5px;
    padding-right: 5px;
  }
  .navbar__links { gap: 4px; }
}

/* Below 1200px the row is tighter still: drop the two lowest-value labels to
   the mobile menu rather than let anything clip. Both remain reachable there
   and in the footer. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .navbar__links > li.nav-item--optional { display: none; }
}

/* ============================================================================
   Draft preview bar
   ----------------------------------------------------------------------------
   Shown only to signed-in staff viewing unpublished content with ?preview=1.
   It is deliberately loud: a preview that looks identical to the live page is
   how somebody ends up believing a draft is published.
   ============================================================================ */
.hgc-preview-bar {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-header) + 1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-bottom: 2px solid currentColor;
  font-size: .92rem;
  line-height: 1.4;
}
.hgc-preview-bar__tag {
  flex: 0 0 auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .25em .6em;
  border-radius: var(--radius-sm);
  background: currentColor;
}
/* The tag's own text has to read against the tag's background, which is
   currentColor: invert it rather than picking a second colour. */
.hgc-preview-bar__tag { color: var(--color-warning-bg); background: var(--color-warning); }
.hgc-preview-bar__text { flex: 1 1 16ch; min-width: 0; }
.hgc-preview-bar__link {
  flex: 0 0 auto;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ============================================================================
   Share bar
   ============================================================================ */
.hgc-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}
.hgc-share__label {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}
.hgc-share__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hgc-share__btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;                 /* a share button is a touch target */
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.hgc-share__btn:hover { background: var(--color-surface-3); color: var(--color-text); }
.hgc-share__btn svg { flex: 0 0 auto; }

/* Brand colour on hover only: a row of five saturated buttons shouts over the
   content it is meant to help share. */
.hgc-share__btn--wa:hover { border-color:#25D366; color:#128C7E; }
.hgc-share__btn--fb:hover { border-color:#1877F2; color:#1877F2; }
.hgc-share__btn--x:hover  { border-color:var(--color-text); color:var(--color-text); }
.hgc-share__btn--tg:hover { border-color:#229ED9; color:#229ED9; }

@media (max-width: 420px) {
  /* Labels go, icons stay: five words do not fit a narrow phone. */
  .hgc-share__btn span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .hgc-share__btn { min-width: 44px; justify-content: center; padding: 0 var(--space-3); }
}