/**
 * [fr_compare_all] — the all-programs table.
 *
 * Colours and radii come from the HerDailyFit colour system, not from the
 * --fr-* custom properties (those still define a dead gold and terracotta set
 * that nothing paints). Teal is the primary accent, plum is the capability bar
 * fill, amber means caution. White is the default surface: the only tinted
 * blocks here are the table head and an opened capability profile.
 *
 * Shipped as a file rather than inline: an inline <style>/<script> inside page
 * markup has been stripped by a production output layer on this site before
 * (see the Find Your Stage note in functions.php).
 */
.ca {
  --ink:   #1A1A1A;
  --body:  #333333;
  --muted: #6F6F6F;
  --faint: #8C8C8C;
  --label: #8A8A8A;
  --line:  #E8E8E8;
  --warm:  #FAFAF8;
  --cream: #FEF3E2;   /* life-stage pastels, used only on the fact pills */
  --lav:   #F0E8FF;
  --pink:  #FFEAF2;

  --teal:      #14527A;   /* primary accent */
  --teal-bg:   #E8F4FF;
  --teal-line: #D3E7F7;
  --plum-bar:  #9A789A;   /* capability bar fill */

  --stone:     #55534F;   /* mid capability */
  --stone-bg:  #F1F0EE;
  --stone-line:#E4E2DF;
  --amber:     #8A5416;   /* low capability, means caution */
  --amber-bg:  #FBEEDA;
  --amber-line:#F2E0C4;

  font-size: 15px; line-height: 1.6; color: var(--body);
}
.ca *, .ca *::before, .ca *::after { box-sizing: border-box; }
.ca a { text-decoration: none; color: inherit; }

/* The page renders inside .fr-review-article.prose, which paints an 8px dot
   before every list item and sizes p/li at 16px. None of the lists here are
   prose lists. Three classes deep to clear the theme rule on specificity
   rather than with !important. */
.fr-review-article.prose .ca ul { padding-left: 0; margin: 0; }
.fr-review-article.prose .ca ul > li { padding-left: 0; }
/* ...but the list items that are components set their own padding, and the
   reset above outranks a plain .ca-cap rule, which left the capability rows
   flush against the panel edge. */
.fr-review-article.prose .ca ul > li.ca-cap { padding: 10px 13px; }
.fr-review-article.prose .ca ul > li.ca-bar { padding: 8px 0; }
.fr-review-article.prose .ca ul > li.ca-pills-item { padding: 7px 14px; }
.fr-review-article.prose .ca ul > li::before { content: none; }
/* .fr-review-article.prose li a carries `text-decoration:underline !important`.
   Links here mark themselves with a border-bottom instead, so a browser
   underline would double it. */
.fr-review-article.prose .ca a { text-decoration: none !important; }
/* .fr-review-article.prose p/li carry `font-size:16px !important`, so every
   p or li component here restates its size the same way, exactly as
   .fr-equipment-note--testing does in style.css. The FAQ is left alone on
   purpose: it is prose and should look like prose. */
.fr-review-article.prose p.ca-lede { font-size: 19px !important; line-height: 1.5; }
.fr-review-article.prose .ca-pills li { font-size: 13px !important; }
.fr-review-article.prose p.ca-start__claim { font-size: clamp(20px, 2.3vw, 27px) !important; line-height: 1.32; }
.fr-review-article.prose p.ca-start__foot { font-size: 13.5px !important; line-height: 1.6; }
.fr-review-article.prose .ca-routes li { font-size: 13.5px !important; }
.fr-review-article.prose p.ca-preface { font-size: 14px !important; line-height: 1.55; }
.fr-review-article.prose p.ca-note { font-size: 13.5px !important; line-height: 1.6; }
.fr-review-article.prose .ca-find__body p { font-size: 15.5px !important; line-height: 1.62; }
.fr-review-article.prose p.ca-gap__lede { font-size: 14.5px !important; line-height: 1.6; }
.fr-review-article.prose p.ca-count,
.fr-review-article.prose p.ca-empty,
.fr-review-article.prose p.ca-foot { font-size: 13.5px !important; line-height: 1.6; }
.fr-review-article.prose p.ca-detail__t { font-size: 11px !important; }
.fr-review-article.prose .ca-bar { font-size: 13.5px !important; }
/* .fr-review-article.prose th uppercases and shrinks every th, which is right
   for a prose table header and wrong for a row header holding a brand name. */
.fr-review-article.prose .ca-table tbody th.ca-th-name {
  text-transform: none; font-size: 14px; background: #FFFFFF;
}
.fr-review-article.prose .ca-table thead th { text-transform: uppercase; }
.fr-review-article.prose .ca-cap { font-size: 12.5px !important; }
.ca-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- section headings: the house 2px ink rule --- */
.ca-find__t {
  margin: 0 0 16px; padding-bottom: 11px; border-bottom: 2px solid var(--ink);
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.2;
}
.ca-intro { margin-bottom: 26px; }
/* Both the lede and the claim run the full width of the page now that there is
   no sidebar. Set larger to compensate: a wide measure at body size is hard to
   read, the same measure at display size is not. */
.ca-lede { margin: 0; font-size: 19px; line-height: 1.5; color: var(--muted); max-width: none; }
.ca-find, .ca-method, .ca-gap { margin: 0 0 34px; }
.ca-find--after { margin-top: 40px; }

/* --- house fact pills, the same opening the compare index uses.
   Pastels carry life stage and are never decorative, so the set here is the
   neutral cream / lavender / pink rotation with the count pill in blue. --- */
.ca-pills { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 18px 0 0; }
.ca-pills li { border-radius: 100px; padding: 7px 14px; font-size: 13px; color: var(--ink); background: var(--cream); }
.ca-pills li:nth-child(1) { background: var(--teal-bg); font-weight: 700; }
.ca-pills li:nth-child(3) { background: var(--lav); }
.ca-pills li:nth-child(4) { background: var(--pink); }

/* --- where to start ---
   The opening answers the question she arrived with. Six routes, each a real
   filter on the table, each in her words rather than our column names. */
.ca-start { margin: 26px 0 34px; padding-top: 22px; border-top: 2px solid var(--ink); }
.ca-start__claim {
  margin: 0; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.32; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink); max-width: none;
}
.ca-start__claim b { color: var(--teal); font-weight: 700; }
.ca-routes {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px;
}
.ca-route { display: flex; }
.ca-route__a {
  flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 17px 17px 15px;
  background: #FFFFFF; display: flex; flex-direction: column; gap: 7px;
  transition: border-color .12s ease;
}
.ca-route--lead .ca-route__a { background: var(--warm); }
.ca-route__a:hover { border-color: var(--ink); }
.ca-route__a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ca-route__q { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.ca-route__n { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ca-route__d { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ca-route__go {
  margin-top: auto; padding-top: 9px; font-size: 13px; font-weight: 700; color: var(--teal);
}
.ca-start__foot { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }

/* one line where the legend used to sit, so the table is not pushed down by
   methodology the reader has not asked for yet */
.ca-preface { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 88ch; }
.ca-preface b { color: var(--ink); font-weight: 700; }
.ca-preface a { color: var(--teal); font-weight: 600; border-bottom: 1px solid var(--teal-line); }
.ca-method { scroll-margin-top: 80px; }

/* the filter a route applied, and the way out of it */
.ca-active { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ca-active[hidden] { display: none; }
.ca-active #ca-active-t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ca-clear {
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 100px; padding: 5px 12px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.ca-clear:hover { border-color: var(--ink); }
.ca-clear:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* --- how to read: white rows, hairline dividers, no fill --- */
.ca-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.ca-legend__item {
  background: #FFFFFF; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid var(--line);
}
.ca-legend__item:last-child { border-right: 0; }
.ca-legend__k {
  font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--label);
}
.ca-legend__v { font-size: 13.5px; line-height: 1.5; color: var(--body); }
.ca-note { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); max-width: 92ch; }

/* --- tools --- */
.ca-tools {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin-bottom: 14px;
}
.ca-search { flex: 1 1 260px; min-width: 0; }
.ca-search input {
  width: 100%; background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 14px; font-family: inherit; font-size: 14.5px; color: var(--ink);
}
.ca-search input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.ca-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ca-chip {
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 100px;
  padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.ca-chip:hover { border-color: var(--ink); }
.ca-chip--on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.ca-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ca-sortby { flex: 0 0 auto; }
.ca-sortby select {
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.ca-sortby select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.ca-caps.ca-caps--facts { margin-bottom: 16px; display: none; } /* mobile only: see the 680px block */
.ca-count { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.ca-count b { color: var(--ink); }
.ca-empty { margin: 28px 0; text-align: center; color: var(--muted); }

/* --- table --- */
.ca-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; }
.ca-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 880px; }
.ca-table th, .ca-table td {
  padding: 12px 14px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line); background: #FFFFFF;
}
.ca-table thead th { padding: 0; background: var(--warm); border-bottom: 2px solid var(--ink); }
.ca-table thead th:not(:has(.ca-sort)) {
  padding: 12px 14px; font-size: 11px; font-weight: 600; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--label);
}
.ca-sort {
  width: 100%; background: none; border: 0; padding: 12px 14px; text-align: inherit;
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--label); cursor: pointer;
}
.ca-sort:hover, .ca-sort--on { color: var(--ink); }
.ca-sort--on::after { content: " \25BC"; font-size: 8px; }
.ca-sort--on.ca-sort--asc::after { content: " \25B2"; }
.ca-sort:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.ca-table tbody tr:last-child th, .ca-table tbody tr:last-child td { border-bottom: 0; }
.ca-row:hover th, .ca-row:hover td { background: var(--warm); }

.ca-th-name { position: sticky; left: 0; z-index: 1; width: 30%; min-width: 250px; }
.ca-table tbody th.ca-th-name { box-shadow: 1px 0 0 var(--line); font-weight: 400; padding-left: 30px; }
.ca-table thead th.ca-th-name { box-shadow: 1px 0 0 var(--line); }
.ca-prog { display: flex; align-items: center; gap: 11px; }
.ca-prog__img { flex: 0 0 auto; width: 40px; height: 30px; border-radius: 8px; overflow: hidden; background: var(--stone-bg); }
.ca-prog__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-prog__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ca-prog__n {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  -webkit-text-fill-color: var(--ink); line-height: 1.25; overflow-wrap: anywhere;
}
.ca-prog:hover .ca-prog__n { color: var(--teal); -webkit-text-fill-color: var(--teal); }
.ca-prog .fr-status-badge { align-self: flex-start; }

.ca-num { text-align: right; white-space: nowrap; }
.ca-score { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ca-score--meno { color: var(--teal); }
.ca-na { color: var(--faint); font-size: 12.5px; font-weight: 400; }
.ca-eq { color: var(--muted); }
.ca-foot { margin: 22px 0 0; font-size: 13.5px; color: var(--muted); }
.ca-hide { display: none; }

/* --- capability gap chart: counts, not averages --- */
.ca-gap__lede { margin: 0 0 16px; font-size: 14.5px; color: var(--muted); max-width: 78ch; }
.ca-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ca-bar {
  display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 3fr) 86px;
  align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.ca-bar:last-child { border-bottom: 0; }
.ca-bar__l { font-size: 13.5px; color: var(--body); }
.ca-bar__track { height: 10px; background: var(--stone-bg); border-radius: 100px; overflow: hidden; }
.ca-bar__fill { display: block; height: 100%; background: var(--plum-bar); border-radius: 100px; }
.ca-bar__v { font-size: 15px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ca-bar__v small { font-size: 11.5px; font-weight: 400; color: var(--faint); }

/* --- expandable capability profile ---
   Click, not hover: hover does not exist on touch, and this is the deepest
   data on the page. The detail row ships in the HTML and is hidden, so it is
   read by crawlers and assistants that never run the script. */
.ca-th-name { position: relative; }
.ca-open {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px;
}
.ca-open::before, .ca-open::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--muted);
  transform: translate(-50%, -50%); transition: opacity .12s ease;
}
.ca-open::before { width: 9px; height: 1.5px; }
.ca-open::after  { width: 1.5px; height: 9px; }
.ca-open[aria-expanded="true"]::after { opacity: 0; }
.ca-open:hover { border-color: var(--ink); }
.ca-open:hover::before, .ca-open:hover::after { background: var(--ink); }
.ca-open:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.ca-detail[hidden] { display: none; }
.ca-detail > td { padding: 0; background: var(--warm); }
.ca-detail__in { padding: 18px 20px 20px; }
.ca-detail__t {
  margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--label);
}
.ca-detail__t strong { color: var(--ink); font-weight: 700; }
.ca-caps {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #FFFFFF;
}
.ca-cap {
  padding: 10px 13px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.ca-cap__l { font-size: 12.5px; color: var(--body); }
.ca-cap__v {
  flex: 0 0 auto; border-radius: 100px; padding: 4px 11px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--stone-bg); color: var(--stone); border: 1px solid var(--stone-line);
}
.ca-cap__v em { font-style: normal; font-weight: 600; font-size: 11px; letter-spacing: .04em; }
.ca-cap__v--hi { background: var(--teal-bg); color: var(--teal); border-color: var(--teal-line); }
.ca-cap__v--lo { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.ca-cap__v--na { color: var(--faint); }
/* Facts are sentences, not scores. "Studio membership ~$150 to 250/mo (varies
   by location)" cannot live in a nowrap pill, so these are plain text. Declared
   after .ca-cap__v deliberately: at equal specificity the later rule wins, and
   the earlier placement was being silently overridden. */
.ca-cap__v.ca-cap__v--fact {
  background: none; border: 0; border-radius: 0; padding: 0;
  white-space: normal; overflow-wrap: anywhere; text-align: right; max-width: 62%;
  font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--ink);
}
.ca-detail__go {
  font-size: 13px; font-weight: 700;
  color: var(--teal); -webkit-text-fill-color: var(--teal); border-bottom: 1px solid var(--teal-line);
}

@media (max-width: 900px) { .ca-find__body { columns: 1; } }
@media (max-width: 680px) {
  /* The table drops from seven columns to three. Seven in 375px means dragging
     sideways to reach the two numbers she came for; three fit, so the whole
     comparison is vertical. Price, session length, equipment and perimenopause
     content move into each row's own detail, which is one tap away. */
  .ca-c2 { display: none; }
  /* table-layout:fixed so the three columns obey their percentages instead of
     being pushed wide by the longest program name */
  .ca-table { min-width: 0; table-layout: fixed; }
  /* auto, not visible: the three columns fit, but a long badge or name can
     still nudge a few pixels over, and that should scroll inside the table
     rather than spill across the page */
  .ca-wrap { overflow-x: auto; }
  /* relative, not static: .ca-open is absolutely positioned against this cell,
     and static would send it to the nearest positioned ancestor up the page */
  .ca-th-name { position: relative; min-width: 0; width: 52%; }
  .ca-table tbody th.ca-th-name, .ca-table thead th.ca-th-name { box-shadow: none; }
  .ca-table tbody th.ca-th-name { padding-left: 26px; padding-right: 6px; }
  .ca-num { width: 24%; }
  .ca-table th, .ca-table td { padding: 10px 6px; }
  /* "MENOPAUSE FIT" at 11px with 1.1px tracking is wider than its own column,
     so it spilled out of the cell. Tighter type lets it wrap inside. */
  .ca-sort, .ca-table thead th:not(:has(.ca-sort)) {
    font-size: 10px; letter-spacing: .03em; padding: 10px 4px; overflow-wrap: anywhere;
  }
  .ca-prog__img { display: none; }        /* the name is the identifier at this width */
  .ca-prog { gap: 0; }
  .ca-prog__n { font-size: 13.5px; }
  .ca-prog .fr-status-badge { font-size: 9.5px; padding: 2px 7px; }
  .ca-score { font-size: 15.5px; }
  /* 20px is far under the 44px minimum tap target, and the program link sits
     6px away, so a near miss navigated instead of expanding. Bigger control,
     and the whole row is tappable (see compare-all.js). */
  .ca-open { width: 30px; height: 30px; }
  .ca-table tbody th.ca-th-name { padding-left: 36px; }
  .ca-row { cursor: pointer; }
  .ca-caps.ca-caps--facts { display: grid; }
  /* the profile grid's 230px minimum was still forcing the table wider than
     its container, even with table-layout:fixed */
  .ca-caps { grid-template-columns: 1fr; }
  .ca-detail__in { min-width: 0; }
  /* Side by side leaves ~120px for a value like "~35 to 45 min (Minis <20 min)".
     Stacked, each fact gets the full panel width. */
  .ca-caps--facts .ca-cap { flex-direction: column; align-items: flex-start; gap: 3px; }
  .ca-cap__v.ca-cap__v--fact { max-width: 100%; text-align: left; font-size: 13px; }

  /* Six stacked route cards put the table almost four screens down. Keeping the
     question and the count but dropping the explanation halves that, and the
     question is the part she is scanning for anyway. */
  .ca-routes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ca-route__a { padding: 12px 13px 11px; gap: 5px; }
  .ca-route__q { font-size: 13.5px; }
  .ca-route__d { display: none; }
  .ca-route__go { display: none; }
  .ca-start__claim { font-size: 18px; }
  .ca-lede { font-size: 16.5px; }
  .ca-find__t { font-size: 19px; }
  .ca-find__n { font-size: 26px; }
  .ca-find__body p { font-size: 15px; }
  /* In a column flex container `flex: 1 1 260px` sets a 260px HEIGHT, which
     was leaving a tall blank gap between the search box and the filters. */
  .ca-tools { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; }
  .ca-search { flex: 0 0 auto; }
  .ca-sortby select { width: 100%; }

  /* The expanded profile is a full-bleed cell inside the table, so its own
     padding is the only thing keeping the chips off the table edge. */
  .ca-detail > td { padding: 0; }
  .ca-detail__in { padding: 14px 14px 16px; }
  .ca-cap { border-right: 0; }
  .fr-review-article.prose .ca ul > li.ca-cap { padding: 10px 12px; }
}