/* ═══════════════════════════════════════════════════════════════════════════════
   monitorMyLawn — HELP PAGES.  Loaded by /faq and /support.
   Tokens only; NO hex literal may appear here (they live in tokens.css).

   Scope note: this sheet is named for /faq but two pages load it, so treat it as the
   help-and-answers layer on top of assets/css/marketing.css:
     /faq      long-form Q&A       .faqdoc .faqnav .faqgroup .faqback .helpfilter
     /support  self-serve triage   .supmail .accordion__rich .linkgrid
   Everything else is composed from marketing.css. Do not fork a component here that
   already exists there — extend it (see .accordion--help below).

   THREE COMPONENTS WERE DELETED FROM THIS FILE, not moved:
     .helpmast   the two-column masthead, forked verbatim into contact.css. Its
                 `align-items: end` bottom-aligned the columns, which is why the same
                 pattern put the eyebrow 14px out on /support, 45px on /contact and
                 69px on /faq. Both pages now wear marketing.css .pagehero, whose
                 .pagehero__grid hangs both columns off one hairline.
     .helpdoc    the [232px rail | answers] shell. The groups are marketing.css
                 .plate / .plate__grid now, so the second column is the FIG.01–06
                 rail the rest of the site already uses.
     .helpnav    the jump nav, in TWO forked shapes (a sticky rail at >=1080px and a
                 sticky chip bar below it, each with its own hover/current styling).
                 Replaced by ONE marketing.css .contents in the masthead's slot.
   .eyebrow used to live here too, and so did .about-list / .faq-foot for /about; Track
   S promoted .eyebrow into marketing.css and /about moved to its own sheet.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══ MASTHEAD INDEX (/faq) ═══════════════════════════════════════════════════
   marketing.css .contents, in the .pagehero__slot, carrying one extra column: the
   number of answers in each group. Scoped by .faqnav rather than by a .contents--*
   modifier, so nothing here can collide with a future shape of the shared component. */
.faqnav .contents__a { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
.faqnav__n {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .04em; color: var(--mml-text-3); font-variant-numeric: tabular-nums;
}
/* .contents__a paints its hover/current tint in --mml-link; the tally follows it. */
.faqnav .contents__a:hover .faqnav__n,
.faqnav .contents__a[aria-current="true"] .faqnav__n { color: var(--mml-link); }
/* The .faqback links below jump here, and the index is not a .section[id], so
   marketing.css's blanket anchor offset does not reach it. Same constant. */
#faq-contents { scroll-margin-top: var(--anchor-top); }

/* ═══ FILTER ══════════════════════════════════════════════════════════════════
   Progressive enhancement: the markup ships with [hidden] and the inline script
   unhides it, so a no-JS visitor is never shown a control that does nothing.
   It sits in .pagehero__copy under the lede, where .pagehero__actions would go —
   and that block zeroes the lede's bottom margin, so match its --sp-xl. */
.helpfilter { margin-top: var(--sp-xl); display: grid; gap: var(--sp-sm); }
.helpfilter__row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; }
.helpfilter__field { position: relative; flex: 1 1 260px; min-width: 0; display: flex; align-items: center; }
.helpfilter__field > .fa-magnifying-glass {
  position: absolute; left: .72rem; font-size: .82rem; color: var(--mml-text-3); pointer-events: none;
}
.helpfilter__input {
  padding-left: 2.1rem; padding-right: 2.1rem;
  border-radius: var(--r-pill); font-size: .9rem;
  background: var(--mml-surface); border-color: var(--mml-rule-strong);
}
.helpfilter__input::placeholder { color: var(--mml-text-3); opacity: 1; }
/* Safari draws its own clear affordance on type=search; ours is the only one. */
.helpfilter__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.helpfilter__clear {
  position: absolute; right: .3rem;
  width: 1.6rem; height: 1.6rem; display: grid; place-content: center;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--mml-text-3); font-size: .82rem;
}
.helpfilter__clear:hover { color: var(--mml-text); background: var(--mml-surface-hover); }
.helpfilter__count { margin: 0; min-height: 1.2em; font-variant-numeric: tabular-nums; }
.helpfilter__empty { margin: 0; }
/* The expand-all control borrows .pausebtn's shell; its chevron flips instead of the
   play/pause glyph swap that component normally does. */
.helpfilter .pausebtn { flex: none; }
.helpfilter .pausebtn i { transition: transform .18s ease; }
.helpfilter .pausebtn[aria-pressed="true"] i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .helpfilter .pausebtn i { transition: none; } }

/* ═══ GROUPS ══════════════════════════════════════════════════════════════════
   Each group is a marketing.css .plate. Only three things are changed: the vertical
   rhythm (a full .plate is built for a whole page section and doubled the space
   between two groups of answers), the anchor offset, and the filter's first-child
   case. */
.faqdoc { min-width: 0; }
/* Every plate is hidden (the filter matched nothing), so the shell has to supply the
   rhythm the plates normally do — otherwise the "no answer matches that" line is
   pinched into ~50px between the masthead's hairline and the dark closing band.
   Set here rather than on the empty paragraph so it cannot leak onto /support, which
   loads this sheet and has no filter. */
.faqdoc.is-empty { padding-block: var(--section-pad); }
.faqgroup.plate { padding-block: calc(var(--section-pad) * .5); }
/* NO scroll-margin-top rule here on purpose. A hard-coded 116px (and 86px above
   1080px) used to live at this spot; making the groups .plate[id] means marketing.css
   already gives them --anchor-top, which is derived from --hdr-h — so the header and
   every anchor on the site now move together instead of drifting apart. Measured
   after the change: all six group anchors land at exactly 70px, header 63px. */
/* Set by the filter script on the first group that survived the query: .plate + .plate
   would otherwise hang a rule above it with a hidden group on the other side. */
.faqgroup.is-first { border-top: 0; }
.faqgroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem var(--sp-lg); margin-bottom: var(--sp-lg); }
.faqgroup__head h2 { margin: 0; }
.faqgroup__no { margin: 0; white-space: nowrap; }
/* While a filter is live the per-group tallies are stale — the honest count is the
   one in the status line, so hide them rather than contradict it. */
.faqdoc.is-filtering .faqgroup__no { display: none; }

/* The way back to the masthead index, inside the plate rail — so it inherits that
   rail's sticky position and stays reachable through a 31-answer page without a
   second sticky nav. Deliberately set in the rail's own mono register (see
   .plate__no) so it reads as part of the FIG apparatus rather than as a button.
   Measured: --mml-text-3 on --mml-bg is 4.94:1 light / 6.50:1 dark; --mml-link on
   hover is 6.04:1 / 6.60:1. Both clear AA — and neither is --mml-primary, which is
   a FILL and would fail as text at this size. */
.faqback {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .11em;
  text-transform: uppercase; font-weight: 700; color: var(--mml-text-3);
}
.faqback i { font-size: .9em; }
.faqback:hover { color: var(--mml-link); text-decoration: none; }
@media (max-width: 1079px) {
  /* The rail is a horizontal row at this width and .plate__tick already eats the
     slack, so the link just needs to stop the row growing a second line. */
  .faqback { margin-left: auto; }
}

/* ═══ ACCORDIONS ══════════════════════════════════════════════════════════════
   Extends marketing.css .accordion / .accordion__i. Nothing here duplicates it:
   only the affordance (a bordered +/− disc), the open state and the answer's
   typographic indent are changed. */
.accordion--help .accordion__i {
  padding-left: var(--sp-md);
  box-shadow: inset 2px 0 0 transparent;
  transition: background .18s ease, box-shadow .18s ease;
}
.accordion--help .accordion__i:hover { background: var(--mml-surface-hover); }
.accordion--help .accordion__i[open] {
  background: rgba(var(--mml-primary-rgb), .05);
  box-shadow: inset 2px 0 0 var(--mml-primary);
}
.accordion--help .accordion__i summary { padding-right: var(--sp-md); gap: var(--sp-md); align-items: flex-start; }
.accordion--help .accordion__i summary > span:not(.n) { line-height: 1.4; }
.accordion--help .accordion__i summary::after {
  content: "+";
  flex: none; margin-left: auto;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  border: 1px solid var(--mml-rule-strong);
  display: grid; place-content: center;
  font-family: var(--font-mono); font-size: .95rem; font-weight: 700; line-height: 1;
  color: var(--mml-text-3);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.accordion--help .accordion__i summary:hover::after { color: var(--mml-link); border-color: var(--mml-link); }
.accordion--help .accordion__i[open] summary::after {
  content: "\2212";
  color: var(--mml-link); border-color: rgba(var(--mml-primary-rgb), .55);
  background: rgba(var(--mml-primary-rgb), .12);
}
.accordion--help .accordion__i summary .n { padding-top: .18rem; }
.accordion--help .accordion__i > p { padding-right: var(--sp-md); }

/* Rich answers (/support carries trusted markup inside the disclosure). */
.accordion__rich {
  padding: 0 var(--sp-md) 0 2.3rem; margin-bottom: var(--sp-lg);
  color: var(--mml-text-2); font-size: .93rem; line-height: 1.62; max-width: 74ch;
}
.accordion__rich > :last-child { margin-bottom: 0; }
.accordion__rich p { margin: 0 0 var(--sp-md); }
.accordion__rich ul, .accordion__rich ol { margin: 0 0 var(--sp-md); padding-left: 1.2rem; display: grid; gap: var(--sp-sm); }
.accordion__rich li { line-height: 1.6; }
.accordion__rich li::marker { color: var(--mml-text-3); font-family: var(--font-mono); font-size: .85em; }
.accordion__rich strong { color: var(--mml-text); font-weight: 650; }
.accordion__rich em { color: var(--mml-text); font-style: italic; }
.accordion__rich code {
  font-family: var(--font-mono); font-size: .84em;
  background: var(--mml-surface-hover); border: 1px solid var(--mml-rule);
  padding: .1em .38em; border-radius: var(--r-sm); color: var(--mml-text);
  overflow-wrap: anywhere;
}

/* The answer indent aligns copy under the question, past the "01" marker. At phone
   width that costs a third of the measure, so it is dropped. */
@media (max-width: 560px) {
  .accordion--help .accordion__i > p,
  .accordion__rich { padding-left: 0; }
  .accordion--help .accordion__i summary { font-size: .96rem; }
}

/* ═══ /support ════════════════════════════════════════════════════════════════ */
/* marketing.css .steptrack is a grid; on an <ol> it still needs the list chrome
   reset that .hairgrid does for itself. HANDOFF: worth folding into marketing.css. */
ol.steptrack, ul.steptrack { list-style: none; margin: 0; padding: 0; }

/* "More answers": a hairline index where the whole cell is the target. */
.linkgrid > li { padding: 0; }
.linkgrid > li > a {
  display: block; height: 100%;
  padding: var(--sp-lg) var(--sp-lg) var(--sp-lg) 0;
  box-shadow: inset 2px 0 0 transparent;
  transition: background .16s ease, box-shadow .16s ease;
}
/* Two columns: every cell in the LEFT one flushes with the container, not just the
   first. .hairgrid's own :first-child rule only covers cell 1. */
@media (min-width: 680px) {
  .linkgrid > li > a { padding-left: var(--sp-lg); }
  .linkgrid > li:nth-child(odd) > a { padding-left: 0; }
}
.linkgrid > li > a:hover { background: var(--mml-surface-hover); box-shadow: inset 2px 0 0 var(--mml-primary); text-decoration: none; }
.linkgrid .k { color: var(--mml-link); font-size: .68rem; }
.linkgrid .k i { margin-left: .35rem; font-size: .82em; }
.linkgrid .v { color: var(--mml-text-2); font-weight: 400; }

/* Email block: the one thing a stuck visitor is looking for, so it leads the page
   and the address is set in the measured-value mono face at display size. */
.supmail {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg);
  /* One rule across the whole block, so the address and the three facts hang off
     the same line instead of the hairgrid carrying its own shorter one. */
  border-top: 1px solid var(--mml-rule); padding-top: var(--sp-lg);
}
@media (min-width: 900px) {
  .supmail { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: var(--sp-3xl); align-items: start; }
}
.supmail__addr h2 { margin: 0 0 var(--sp-xs); display: flex; align-items: center; gap: var(--sp-sm); }
.supmail__facts { align-self: start; border-top: 0; }
.supmail__facts > * { padding-top: 0; }
.mailrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-sm) var(--sp-lg); margin: 0; }
.mailrow a {
  font-family: var(--font-mono); font-size: clamp(1rem, .92rem + .45vw, 1.28rem);
  font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere;
}

/* The "never send us a secret" note. Same warn ink the .spec-tbc chip already
   uses over the same amber tint. */
.supnote { margin-top: var(--sp-2xl); }
.supnote p { margin: 0; color: var(--mml-text-2); font-size: .9rem; line-height: 1.6; }
.callout--warn > .k { color: var(--mml-viz-warn); display: flex; align-items: center; gap: .4rem; }