/* HoroscopeBuz — Love Match  (standalone; shares nothing with the birth chart plugin)
   Every text/background pair verified at WCAG AA or better.
   All rules scoped to .hb-lm. */

.hb-lm {
  --blush:   #FFF0F5;
  --panel:   #FFE7F0;
  --well:    #FBD3E1;
  --rule:    #F6BFD1;
  --rule-2:  #FBE0EA;

  --ink:     #3A0F1D;
  --ink-2:   #6B3040;
  --ink-3:   #8A4A5B;

  --rose:      #B0113D;
  --red:       #E01B44;
  --red-light: #FF5C7C;
  --red-deep:  #8C0B2F;
  --pine:      #1A6553;

  /* Pink, used for the hearts and for decorative surfaces only. Text never
     sits on these, so they are free to be loud; every text/background pair in
     this file is still AA or better. --pink-hot is the lightest colour that
     carries white text at AA, which is why the buttons stop there. */
  --pink:      #FF5C9E;
  --pink-soft: #FFA8C8;
  --pink-pale: #FFD6E6;
  --pink-hot:  #E0195F;

  /* One heart, drawn once, reused by every meter on the page as a CSS mask.
     Same outline as the big gauge in hb-love-match.js, so the small hearts and
     the big one are the same shape at every size. */
  --hb-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath transform='translate(2.371,0.639) scale(0.43299)' d='M110,193 C46,143 13,110 13,72 C13,38 38,17 66,17 C87,17 103,29 110,47 C117,29 133,17 154,17 C182,17 207,38 207,72 C207,110 174,143 110,193 Z'/%3E%3C/svg%3E");
  --hb-heart-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath fill='none' stroke='%23000' stroke-width='11' stroke-linejoin='round' transform='translate(2.371,0.639) scale(0.43299)' d='M110,193 C46,143 13,110 13,72 C13,38 38,17 66,17 C87,17 103,29 110,47 C117,29 133,17 154,17 C182,17 207,38 207,72 C207,110 174,143 110,193 Z'/%3E%3C/svg%3E");

  --serif: "Instrument Serif", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r: 12px;
  --shadow: 0 1px 2px rgba(58,15,29,.05), 0 10px 28px rgba(176,17,61,.07);

  box-sizing: border-box;
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px);
  background:
    radial-gradient(120% 70% at 82% -10%, #FFE1EE 0%, rgba(255,225,238,0) 62%),
    radial-gradient(90% 55% at 8% 4%, #FFF5FA 0%, rgba(255,245,250,0) 58%),
    var(--blush);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  border: 1px solid var(--rule);
  border-radius: 16px;
}
.hb-lm *, .hb-lm *::before, .hb-lm *::after { box-sizing: inherit; }
.hb-lm p { margin: 0 0 .8em; }
.hb-lm h1, .hb-lm h2, .hb-lm h3, .hb-lm h4 {
  margin: 0; font-weight: 400; letter-spacing: -.01em; color: var(--ink);
}

/* decorative hearts drifting behind the masthead */
.hb-lm__deco {
  position: absolute; inset: 0 0 auto 0; height: 260px;
  pointer-events: none; z-index: 0; overflow: hidden; border-radius: 16px 16px 0 0;
}
.hb-lm__deco svg {
  position: absolute; fill: var(--pink);
  animation: hb-lm-drift 14s ease-in-out infinite;
}
.hb-lm__deco svg:nth-child(2n)  { animation-duration: 18s; animation-delay: -3s;  }
.hb-lm__deco svg:nth-child(3n)  { animation-duration: 22s; animation-delay: -7s;  }
.hb-lm__deco svg:nth-child(4n)  { animation-duration: 16s; animation-delay: -11s; }
@keyframes hb-lm-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50%      { transform: translate3d(0, -18px, 0) rotate(4deg); }
}

/* CSS-only fallback hearts, so the masthead is still decorated when the script
   is blocked. The script hides these and draws its own set. */
.hb-lm--ready .hb-lm__deco--css { display: none; }
.hb-lm__deco--css span {
  position: absolute; display: block; width: var(--w); height: calc(var(--w) * .92);
  background: var(--pink); opacity: var(--o);
  -webkit-mask: var(--hb-heart) center/100% 100% no-repeat;
          mask: var(--hb-heart) center/100% 100% no-repeat;
  animation: hb-lm-drift 16s ease-in-out infinite;
}
.hb-lm > * { position: relative; z-index: 1; }

.hb-lm__eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--rose); margin-bottom: .8em;
}
.hb-lm__title { font-family: var(--serif); font-size: clamp(32px, 5.4vw, 54px); line-height: 1.04; }
.hb-lm__title em { font-style: italic; color: var(--rose); }
.hb-lm__standfirst { color: var(--ink-2); max-width: 50ch; margin-top: .8em; font-size: 16px; }

/* ---------- form controls ---------- */
.hb-lm label {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px;
}
.hb-lm input[type=text], .hb-lm input[type=date], .hb-lm input[type=time], .hb-lm select {
  width: 100%; padding: 12px 13px; background: #fff;
  border: 1px solid var(--rule); border-radius: 8px; color: var(--ink);
  font-family: var(--mono); font-size: 15px; line-height: 1.3;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hb-lm select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px;
}
.hb-lm input:focus, .hb-lm select:focus {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(224,27,68,.16);
}
.hb-lm input:focus-visible, .hb-lm select:focus-visible, .hb-lm button:focus-visible {
  outline: 2px solid var(--rose); outline-offset: 2px;
}
.hb-lm input::placeholder { color: #B98E9A; }

.hb-lm__cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 15.5px;
  padding: 13px 28px; border-radius: 999px; cursor: pointer;
  color: #fff; border: 1px solid var(--rose);
  background: linear-gradient(180deg, var(--pink-hot) 0%, var(--rose) 100%);
  box-shadow: 0 2px 4px rgba(140,11,47,.18), 0 8px 22px rgba(224,25,95,.28);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.hb-lm__cta:hover { filter: brightness(1.06); box-shadow: 0 2px 4px rgba(140,11,47,.2), 0 10px 26px rgba(224,25,95,.36); }
.hb-lm__cta:active { transform: translateY(1px); }
.hb-lm__actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }

/* ---------- tabs ---------- */
.hb-lm__tabs { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.hb-lm__tab {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid var(--rule); color: var(--ink-2);
}
.hb-lm__tab.is-on { background: var(--rose); border-color: var(--rose); color: #fff; }
.hb-lm__tab:hover:not(.is-on) { background: var(--panel); border-color: var(--red-light); }

.hb-lm__panel {
  margin-top: 18px; padding: 24px; background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.hb-lm__panel[hidden] { display: none; }

.hb-lm__pickers { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: end; }
@media (max-width: 620px) { .hb-lm__pickers { grid-template-columns: 1fr; } }
.hb-lm__swap {
  padding: 12px 15px; border-radius: 999px; cursor: pointer; font-size: 17px;
  background: #fff; border: 1px solid var(--rule); color: var(--rose);
}
.hb-lm__swap:hover { border-color: var(--red); background: var(--panel); }

/* ---------- the heart gauge ---------- */
.hb-lm__result[hidden], .hb-lm__synresult[hidden] { display: none; }
.hb-lm__result, .hb-lm__synresult { margin-top: 26px; }

.hb-lm__head {
  display: grid; grid-template-columns: 230px 1fr; gap: 30px; align-items: center;
  padding: 28px; border: 1px solid var(--pink-soft); border-radius: var(--r);
  background:
    radial-gradient(70% 120% at 16% 50%, #FFF2F7 0%, rgba(255,242,247,0) 70%),
    #fff;
  box-shadow: 0 1px 2px rgba(58,15,29,.05), 0 14px 34px rgba(224,25,95,.13);
}
@media (max-width: 720px) {
  .hb-lm__head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.hb-lm__heart { width: 230px; text-align: center; }
.hb-lm__heartsvg { display: block; width: 100%; height: auto; overflow: visible; }
.hb-lm__beat { transform-origin: 110px 105px; animation: hb-lm-beat 2.4s ease-in-out infinite; }
@keyframes hb-lm-beat {
  0%, 62%, 100% { transform: scale(1); }
  70% { transform: scale(1.045); }
  78% { transform: scale(1); }
  86% { transform: scale(1.028); }
}

/* =========================================================================
   THE HEART METER  (1.4.0)
   Replaces every "72%" readout. A row of hearts filled left to right in
   proportion to the score, including a part-filled heart at the boundary.

   Built from three masked layers rather than per-heart SVG, so PHP and
   JavaScript can render it identically by writing one number, --hb-fill:
     1. --hb-heart      solid, pale  — the empty hearts
     2. --hb-heart      solid, pink  — clipped to --hb-fill, the filled part
     3. --hb-heart-line outline      — the edge, drawn over both
   The mask repeats across the row, so --hb-n hearts always fit exactly.
   ====================================================================== */
.hb-lm__meter {
  --hb-n: 5;          /* how many hearts        */
  --hb-hs: 40px;      /* height of one heart    */
  --hb-fill: 0%;      /* how much of the row is filled */
  position: relative;
  display: block;
  height: var(--hb-hs);
  width: calc(var(--hb-n) * var(--hb-hs) * 100 / 92);
  margin: 0 auto;
}
.hb-lm__meter > i {
  position: absolute; inset: 0;
  -webkit-mask-image: var(--hb-heart);         mask-image: var(--hb-heart);
  -webkit-mask-repeat: repeat-x;               mask-repeat: repeat-x;
  -webkit-mask-size: calc(100% / var(--hb-n)) 100%;
  mask-size: calc(100% / var(--hb-n)) 100%;
}
.hb-lm__meter .hb-lm__mbed  { background: var(--pink-pale); }
.hb-lm__meter .hb-lm__mline {
  background: var(--pink-hot); opacity: .5;
  -webkit-mask-image: var(--hb-heart-line);    mask-image: var(--hb-heart-line);
}
.hb-lm__meter .hb-lm__mfill {
  background: linear-gradient(170deg, #FF8AB8 0%, var(--pink) 46%, var(--pink-hot) 100%);
  filter: drop-shadow(0 2px 5px rgba(224,25,95,.42));
  clip-path: inset(0 calc(100% - var(--hb-fill)) 0 0);
  animation: hb-lm-fillup 1.05s cubic-bezier(.22,1,.36,1) both;
}
/* Fills from empty every time the meter is drawn — including the
   server-rendered one, which has no script to trigger it. */
@keyframes hb-lm-fillup {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 calc(100% - var(--hb-fill)) 0 0); }
}
/* The filled hearts breathe, so the eye lands on them first. */
.hb-lm__meter--lead .hb-lm__mfill {
  animation: hb-lm-fillup 1.05s cubic-bezier(.22,1,.36,1) both,
             hb-lm-glow 2.4s ease-in-out 1.05s infinite;
}
@keyframes hb-lm-glow {
  0%, 100% { filter: drop-shadow(0 2px 5px rgba(224,25,95,.42)); }
  50%      { filter: drop-shadow(0 2px 12px rgba(255,92,158,.85)); }
}

/* Under the big gauge: the meter, then the band it falls in. */
.hb-lm__meterwrap { margin-top: 14px; }

/* The reading inside the gauge. Drawn twice by the renderer — dark on the
   empty part of the heart, white on the filled part — so it stays legible
   wherever the fill line happens to cross it. */
.hb-lm__pctnum { font-family: var(--serif); font-size: 60px; }
.hb-lm__pctsym { font-family: var(--serif); font-size: 28px; }

.hb-lm__pairline { font-family: var(--serif); font-size: 31px; line-height: 1.2; color: var(--ink); }
.hb-lm__pairline em { font-style: normal; color: var(--red); font-size: 22px; margin: 0 10px; }
.hb-lm__band {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 6px 15px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rose);
  background: linear-gradient(180deg, #FFF0F6 0%, var(--panel) 100%);
  border: 1px solid var(--pink-soft);
}
.hb-lm__verdict { margin-top: 15px; font-size: 15.5px; color: var(--ink-2); line-height: 1.55; max-width: 56ch; }
.hb-lm__syncount { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }

/* ---------- working-out panel ---------- */
.hb-lm__work {
  margin-top: 20px; border: 1px solid var(--rule); border-radius: var(--r);
  background: #fff; overflow: hidden; box-shadow: var(--shadow);
}
.hb-lm__work h3 {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--rose); padding: 18px 18px 4px;
}
.hb-lm__work > p { padding: 0 18px; font-size: 14px; color: var(--ink-3); margin: 0 0 14px; }
.hb-lm table { width: 100%; border-collapse: collapse; }
.hb-lm tbody td {
  padding: 12px 18px; border-top: 1px solid var(--rule-2);
  font-family: var(--mono); font-size: 13.5px; color: var(--ink); vertical-align: middle;
}
.hb-lm tbody td:first-child { font-weight: 500; width: 22%; }
.hb-lm__rel { color: var(--ink-3); }
.hb-lm__pts { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The per-component score, on the same hearts as the headline meter so the
   four rows visibly add up to it. */
.hb-lm__meter--mini {
  --hb-hs: 15px;
  display: inline-block; margin: 0 10px 0 0; vertical-align: middle;
}
.hb-lm__meter--mini .hb-lm__mfill { filter: none; }
.hb-lm__meter--mini .hb-lm__mline { opacity: .38; }
.hb-lm__note {
  padding: 12px 18px; border-top: 1px solid var(--rule-2); background: var(--panel);
  font-family: var(--mono); font-size: 12px; color: var(--ink-3); line-height: 1.55;
}

/* ---------- synastry ---------- */
.hb-lm__syngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 700px) { .hb-lm__syngrid { grid-template-columns: 1fr; } }
.hb-lm__person { padding: 20px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); }
.hb-lm__person h4 {
  margin: 0 0 15px; font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--rose);
}
.hb-lm__field { margin-bottom: 13px; position: relative; }
.hb-lm__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hb-lm__ac {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  max-height: 210px; overflow-y: auto; box-shadow: var(--shadow);
}
.hb-lm__ac[hidden] { display: none; }
.hb-lm__ac button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; background: none;
  border: 0; border-bottom: 1px solid var(--rule-2); color: var(--ink);
  font-family: var(--sans); font-size: 14px; cursor: pointer;
}
.hb-lm__ac button:hover { background: var(--panel); }
.hb-lm__ac small { display: block; color: var(--ink-3); font-size: 12px; }

.hb-lm__hits { list-style: none; margin: 0; padding: 0; }
.hb-lm__hits li {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--rule-2); font-size: 14px;
}
.hb-lm__hits li.is-good { border-left: 3px solid var(--pine); }
.hb-lm__hits li.is-hard { border-left: 3px solid var(--red); }
.hb-lm__hitmark { font-size: 14px; }
.hb-lm__hitg { font-family: var(--mono); font-size: 16px; color: var(--ink); }
.hb-lm__hitn { color: var(--ink-2); }
.hb-lm__hito { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.hb-lm__msg { font-family: var(--mono); font-size: 13px; color: var(--rose); min-height: 1.2em; margin-top: 12px; }
.hb-lm__fine { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 14px; line-height: 1.6; }

/* ---------- share ---------- */
.hb-lm__share {
  margin-top: 22px; padding: 22px 24px; border-radius: var(--r);
  border: 1px solid var(--red-light); background: var(--panel);
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
}
@media (max-width: 720px) { .hb-lm__share { grid-template-columns: 1fr; } }
.hb-lm__share h3 { font-family: var(--serif); font-size: 23px; margin-bottom: 4px; }
.hb-lm__share p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 42ch; }
.hb-lm__sharemsg {
  grid-column: 1 / -1; font-family: var(--mono); font-size: 12.5px;
  color: var(--rose); font-weight: 500; min-height: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
  .hb-lm__beat { animation: none; }
  /* The looping ones are switched off outright rather than shortened — an
     infinite animation at .001ms is a repaint loop, not stillness. The meter
     keeps its filled state because the fill is also expressed as clip-path. */
  .hb-lm__deco svg, .hb-lm__deco--css span { animation: none; }
  .hb-lm__meter .hb-lm__mfill, .hb-lm__meter--lead .hb-lm__mfill {
    animation: none;
    clip-path: inset(0 calc(100% - var(--hb-fill)) 0 0);
  }
  .hb-lm *, .hb-lm *::before, .hb-lm *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

.hb-lm__sharebtns { display: flex; gap: 10px; flex-wrap: wrap; }
.hb-lm__cta--ghost {
  background: #fff; color: var(--rose); border-color: var(--rose);
  box-shadow: 0 1px 2px rgba(58,15,29,.06);
}
.hb-lm__cta--ghost:hover { background: var(--panel); }
.hb-lm__cta[hidden] { display: none; }

/* =========================================================================
   MOBILE / TOUCH  — added in 1.2.0
   Fixes: iOS focus-zoom, iOS date+time field rendering, sticky :hover on
   touch, sub-44px tap targets, and tables that overflowed their container.
   ====================================================================== */

/* 1. Anything hidden stays hidden, whatever the theme's reset does. */
.hb-lm [hidden] { display: none !important; }

/* 2. Never let a long word or a wide grid child push the widget sideways. */
.hb-lm { overflow-wrap: break-word; }
.hb-lm__pickers > *, .hb-lm__syngrid > *, .hb-lm__row2 > *,
.hb-lm__head > *, .hb-lm__share > * { min-width: 0; }

/* 3. Touch behaviour: no 300ms delay, no grey flash, no text selection on
      double-tap of a control. */
.hb-lm button, .hb-lm select, .hb-lm__tab, .hb-lm__cta, .hb-lm__swap {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(176, 17, 61, .12);
}

/* 4. :hover only where a real pointer exists. On touch, :hover sticks after a
      tap and leaves controls looking permanently active. */
@media (hover: none) {
  .hb-lm__cta:hover,
  .hb-lm__tab:hover:not(.is-on),
  .hb-lm__swap:hover,
  .hb-lm__ac button:hover,
  .hb-lm__cta--ghost:hover { filter: none; background: inherit; border-color: inherit; }
  .hb-lm__tab:hover:not(.is-on) { background: #fff; border-color: var(--rule); }
  .hb-lm__cta:hover { background: linear-gradient(180deg, var(--red) 0%, var(--rose) 100%); }
  .hb-lm__cta--ghost:hover { background: #fff; }
  .hb-lm__swap:hover { background: #fff; border-color: var(--rule); }
  .hb-lm__ac button:hover { background: none; }
  .hb-lm__ac button:active { background: var(--panel); }
}

/* 5. iOS date/time inputs. -webkit-appearance:none strips the native chrome,
      which on iOS leaves the value right-aligned in a box with no reliable
      height. Put the height and alignment back. */
.hb-lm input[type=date], .hb-lm input[type=time] {
  min-height: 48px;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}
.hb-lm input[type=date]::-webkit-date-and-time-value,
.hb-lm input[type=time]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-height: 1.3em;
}
.hb-lm input[type=date]::-webkit-calendar-picker-indicator,
.hb-lm input[type=time]::-webkit-calendar-picker-indicator { opacity: .55; }
/* Empty date/time inputs collapse to zero width in older iOS. */
.hb-lm input[type=date]:invalid, .hb-lm input[type=time]:invalid { min-width: 100%; }

/* 6. The autocomplete list: reachable rows, and a height that respects the
      on-screen keyboard rather than running off under it. */
.hb-lm__ac {
  max-height: min(210px, 40vh);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.hb-lm__ac button { min-height: 48px; padding: 10px 14px; }
.hb-lm__ac button:last-child { border-bottom: 0; }

@media (max-width: 720px) {
  .hb-lm { padding: 18px 16px; border-radius: 12px; }

  /* 7. iOS zooms the page whenever a focused field is under 16px, and never
        zooms back out. This is the single biggest cause of "the form is
        broken on my phone". */
  .hb-lm input[type=text], .hb-lm input[type=date],
  .hb-lm input[type=time], .hb-lm select {
    font-size: 16px;
    min-height: 48px;
  }

  /* 8. Full-width, thumb-sized actions. */
  .hb-lm__cta { width: 100%; justify-content: center; min-height: 50px; padding: 14px 20px; }
  .hb-lm__actions { gap: 10px; }
  .hb-lm__sharebtns { width: 100%; }
  .hb-lm__sharebtns .hb-lm__cta { flex: 1 1 100%; }
  .hb-lm__tab { flex: 1 1 auto; justify-content: center; min-height: 46px; }
  .hb-lm__swap { min-height: 46px; width: 100%; }
  .hb-lm__panel { padding: 16px; }

  /* 9. The score breakdown was a 4-column table inside overflow:hidden, so on
        a phone the points column was cut off entirely. Stack it into rows. */
  .hb-lm__work table, .hb-lm__work tbody, .hb-lm__work tr, .hb-lm__work td {
    display: block; width: auto;
  }
  .hb-lm__work tr {
    border-top: 1px solid var(--rule-2);
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    align-items: baseline;
  }
  .hb-lm__work tbody td { border-top: 0; padding: 0; font-size: 13px; }
  .hb-lm__work tbody td:first-child {
    width: auto; grid-column: 1; grid-row: 1;
    font-size: 14px; font-weight: 500;
  }
  .hb-lm__work tbody td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--ink-3); }
  .hb-lm__work tbody td:nth-child(3) { grid-column: 1; grid-row: 3; }
  .hb-lm__pts {
    grid-column: 2; grid-row: 1 / span 3;
    text-align: right; align-self: center;
  }
  .hb-lm__meter--mini { --hb-hs: 13px; display: block; margin: 0 0 5px auto; }

  /* 10. Synastry contact rows: four columns will not fit 360px. */
  .hb-lm__hits li {
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    padding: 12px 16px;
  }
  .hb-lm__hitmark { grid-column: 1; grid-row: 1; }
  .hb-lm__hitg    { grid-column: 2; grid-row: 1; }
  .hb-lm__hitn    { grid-column: 1 / -1; grid-row: 2; font-size: 13.5px; }
  .hb-lm__hito    { grid-column: 1 / -1; grid-row: 3; }

  .hb-lm__note, .hb-lm__fine { font-size: 11.5px; }
  .hb-lm__pairline { font-size: 26px; }
  .hb-lm__pairline em { display: block; margin: 2px 0; }
  .hb-lm__heart { width: min(200px, 62vw); }
  /* Scoped to --lead on purpose: a bare .hb-lm__meter here has the same
     specificity as the .hb-lm__meter--mini rule above and comes later, so it
     would resize the breakdown hearts too. */
  .hb-lm__meter--lead { --hb-hs: 32px; }
  .hb-lm__share { padding: 18px 16px; }
  .hb-lm__share p { max-width: none; }
  .hb-lm__deco { height: 180px; }
}

/* 11. Very narrow phones. */
@media (max-width: 380px) {
  .hb-lm { padding: 14px 12px; }
  .hb-lm__panel, .hb-lm__person { padding: 14px; }
  .hb-lm__row2 { grid-template-columns: 1fr; }
  .hb-lm__tab { font-size: 13.5px; padding: 10px 12px; }
  .hb-lm__meter--lead { --hb-hs: 27px; }
}

/* 12. Landscape phones: keep the heart from eating the whole viewport. */
@media (max-height: 460px) and (orientation: landscape) {
  .hb-lm__heart { width: 150px; }
  .hb-lm__meter--lead { --hb-hs: 24px; }
  .hb-lm__ac { max-height: 33vh; }
}

/* =========================================================================
   NO-JAVASCRIPT FALLBACK + CSS-ONLY TABS  (added 1.6.0 / 1.3.0)
   The tabs and the quick match no longer depend on the script running.
   ====================================================================== */

/* Zodiac glyphs are not in IBM Plex Mono. The generic 'monospace' at the end
   of the stack terminates fallback, so symbol faces have to come before it or
   the signs render as empty boxes. */
.hb-lm__signA, .hb-lm__signB, .hb-lm__pairline, .hb-lm__scorebox {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
               "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2",
               "Noto Sans Symbols", "Segoe UI Emoji", "DejaVu Sans", monospace;
}
.hb-lm__band, .hb-lm__tab { font-variant-emoji: text; }

/* --- tabs driven by radios, so they work with the script switched off --- */
.hb-lm__tabin {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; margin: 0;
}
.hb-lm__tabs label.hb-lm__tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; user-select: none; margin: 0;
  text-transform: none; letter-spacing: normal;
}
.hb-lm__tabbed > .hb-lm__quick,
.hb-lm__tabbed > .hb-lm__syn { display: none; }
.hb-lm__tabin--q:checked ~ .hb-lm__quick,
.hb-lm__tabin--s:checked ~ .hb-lm__syn { display: block; }
.hb-lm__tabin--q:checked ~ .hb-lm__tabs .hb-lm__tab--q,
.hb-lm__tabin--s:checked ~ .hb-lm__tabs .hb-lm__tab--s {
  background: var(--rose); border-color: var(--rose); color: #fff;
}
.hb-lm__tabin:focus-visible ~ .hb-lm__tabs .hb-lm__tab { outline: 2px solid var(--rose); outline-offset: 2px; }

/* --- the opening teaser: heart and score, nothing below it yet --- */
.hb-lm__result--teaser .hb-lm__work,
.hb-lm__result--teaser .hb-lm__share { display: none; }

/* --- "the script is not running" notice ---
   <noscript> only fires when JavaScript is switched off in the browser. It
   cannot catch the far more common case on a WordPress site: JavaScript is on,
   but an optimisation plugin deferred, delayed or excluded this script. The
   widget marks itself .hb-lm--ready once the script initialises, so the absence
   of that class is the signal, and CSS can act on it without any script at all.
   The 2.5s delay keeps it from flashing up while a deferred script is still on
   its way. */
.hb-lm__jswarn { display: none; }
.hb-lm:not(.hb-lm--ready) .hb-lm__jswarn {
  display: block;
  opacity: 0;
  animation: hb-lm-jswarn 1ms linear 2.5s forwards;
}
@keyframes hb-lm-jswarn { to { opacity: 1; } }

/* --- server-rendered score, shown only when the script did not run.
       Same gauge and same meter as the live version, drawn in PHP. --- */
.hb-lm__scorebox { width: 230px; text-align: center; }
.hb-lm__nojsnote {
  margin: 0 0 12px; padding: 11px 14px; border-radius: 8px;
  border-left: 3px solid var(--rose); background: #fff;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
}