/* The health insurance pages' own sheet (feature/health-insurance).
   styles.css is content-hashed into every page's URL, so health rules
   live here and load only on health pages. Tokens only (styles.css
   :root): no literal radius. */
.health-states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 8px; }
@media (max-width: 560px) { .health-states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.health-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-control);
  background: #fff; color: var(--text); text-decoration: none; font-weight: 600;
}
.health-state:hover { border-color: var(--navy); }
.health-state small { font-weight: 400; color: var(--muted); font-size: 12px; }
/* The states' recognised colours (founder, 8 Oct 2026): a band along the
   top and the name in the colour, each tone dark enough to clear 4.5:1
   on the white tile. NSW sky blue, Victoria navy, Queensland maroon,
   WA gold and black, SA red, Tasmania bottle green, ACT blue and gold,
   NT ochre. The tint shows on hover. */
.health-state { border-top: 4px solid var(--st, var(--border)); color: var(--st-text, var(--text)); }
.health-state:hover { background: var(--st-tint, #fff); border-color: var(--st, var(--navy)); border-top-color: var(--st, var(--navy)); }
.health-state[data-state="NSW"] { --st: #1C8BCB; --st-text: #0E6EA3; --st-tint: #EAF4FB; }
.health-state[data-state="VIC"] { --st: #1A2F6E; --st-text: #1A2F6E; --st-tint: #EDF0F8; }
.health-state[data-state="QLD"] { --st: #7A1B2F; --st-text: #7A1B2F; --st-tint: #F8ECEF; }
.health-state[data-state="WA"] { --st: #D4A017; --st-text: #1A1A1A; --st-tint: #FBF5E6; }
.health-state[data-state="SA"] { --st: #C8102E; --st-text: #A50E26; --st-tint: #FBEBED; }
.health-state[data-state="TAS"] { --st: #0B5D3B; --st-text: #0B5D3B; --st-tint: #E8F3EE; }
.health-state[data-state="ACT"] { --st: #1F4E9C; --st-text: #1F4E9C; --st-tint: #EBF0F9; border-bottom: 3px solid #D4A017; }
.health-state[data-state="NT"] { --st: #C4622D; --st-text: #A9501F; --st-tint: #FAEEE6; }
.health-person .opt { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; white-space: normal; }
.health-person .opt input { flex: none; margin-top: 3px; }
.health-person .opt .opt-label { flex: 1; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
/* the choices are sentences too: a label cut mid-word ("Any, including no ambula...") fails its job */
fieldset.facet[data-key="ambulance"] .opt-label, fieldset.facet[data-key="excess"] .opt-label,
fieldset.facet[data-key="adultdeps"] .opt-label, fieldset.facet[data-key="members"] .opt-label {
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
fieldset.facet[data-key="ambulance"] .opt, fieldset.facet[data-key="excess"] .opt,
fieldset.facet[data-key="adultdeps"] .opt, fieldset.facet[data-key="members"] .opt { align-items: flex-start; }
.health-person select, .health-person input[type="number"] {
  width: 100%; max-width: 100%; box-sizing: border-box; padding: 7px 8px; font: inherit;
  border: 1px solid var(--border); border-radius: var(--r-control); background: #fff; color: var(--text);
}
.health-person .person-hint { margin: 2px 0 8px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.health-person label.person-label { display: block; font-weight: 600; margin: 8px 0 4px; font-size: 13px; }
.health-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 8px; }
.health-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.health-table th, .health-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.health-table th { font-weight: 600; }
.health-table td.num, .health-table th.num { text-align: right; white-space: nowrap; }
.health-cover-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .health-cover-groups { grid-template-columns: 1fr; } }
.health-cover-groups h3 { font-size: 14px; margin: 0 0 6px; }
.health-cover-groups ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.health-answers { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.health-answers strong { color: var(--text); font-weight: 600; }
.pill-members { background: #FFF8E7; color: #6b4a12; }
/* a policy with no ambulance cover says so in a caution tone (founder, 9 Oct
   2026: ambulance cover is a core selection); #8A2A2A on #FDEEEE is 7.4:1.
   An accident-only hospital policy, listed on request, the same way. */
.pill-noamb, .pill-accident { background: #FDEEEE; color: #8A2A2A; }
/* THE HEALTH CARD (founder, 9 Oct 2026: "consider card layout ... make it
   best in market"). The family's four-track row (identity | tags |
   figures | actions) is built for two or three bank facts; a health card
   carries five tags, two cover counts and a block of detail, and in that
   row its tags stacked into five bars, its figures squeezed to four-line
   labels and its detail ran nine lines under it. So it has its own grid:
   who and what, the tags in one row, the cover strip and the detail on
   the left; the figure, a pair's split and the action on the right,
   together, where the eye runs down a list. A phone stacks them, the
   figure and the action straight after the tags. */
.prod-card.health-card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "id" "pills" "side" "cover" "under";
  gap: 12px; align-items: start; padding: 18px 20px;
}
.prod-card.health-card > .prod-id { grid-area: id; }
.prod-card.health-card > .prod-pills { grid-area: pills; }
.prod-card.health-card > .health-side { grid-area: side; }
.prod-card.health-card > .health-cover { grid-area: cover; }
.prod-card.health-card > .prod-under { grid-area: under; margin-top: 0; }
/* the second column depends on the card's own width, not the viewport:
   between about 870 and 1040px the filter panel sits beside a list only
   520 to 620px wide, and two columns there squeezed the detail into 280px
   (a 934px-tall card at 900px). A browser without container queries keeps
   one column. */
.results .prod-list { container: health-list / inline-size; }
@container health-list (min-width: 680px) {
  .prod-card.health-card {
    grid-template-columns: minmax(0, 1fr) 224px;
    /* the detail row takes the spare height when the side column is the
       taller, so the left column never spreads out to match it */
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "id side" "pills side" "cover side" "under side";
    column-gap: 28px;
  }
  .prod-card.health-card > .health-side { align-self: stretch; border-left: 1px solid var(--border); padding-left: 24px; }
}
/* THE CARD'S LOOK (the founder, 9 Oct 2026, of the card: "make this look
   way way better"): one type scale with three weights, the facts as
   figures that line up down a list, hairlines between the card's parts,
   and nothing said twice. Who and what: the logo, the fund's name small
   above the policy's name, a pair as two rows labelled Hospital and
   Extras. The facts: the tags in one row, the tier's own dot leading. The
   cover: two meters, the bar the count drawn to scale. The detail: a
   table of the service, its yearly limit (the figure in bold) and one
   example, under a small heading; then the fold; then the Ombudsman's
   figure as the card's last line. The figure and the action in their
   own column, the price large. */
.health-card .prod-id-t { min-width: 0; }
/* the insurer's logo: a wider chip than the 56px square the bank rows
   use, as nearly every health insurer's logo is a wordmark; the text
   fallback keeps the row chip's small type */
.health-card .prod-id { align-items: flex-start; gap: 14px; }
.health-card .prod-id .logo-chip { width: 96px; height: 52px; padding: 6px 8px; }
.health-card .prod-id .logo-chip img { max-width: 100%; max-height: 100%; }
.page-head .logo-chip.lg { margin: 0 0 10px; }
.health-card .prod-brandline { font-size: 12px; font-weight: 500; margin: 1px 0 3px; }
.health-card .prod-name { font-size: 16px; line-height: 1.3; }
/* a pair: two rows, each with its kind as a small label in a column of
   its own, so the two names line up */
.health-two { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.health-two + .health-two { margin-top: 4px; }
.health-two .two-kind {
  flex: none; width: 5.8em; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); line-height: 1.3;
}
.health-two .two-name { font-size: 13.5px; color: var(--text); min-width: 0; line-height: 1.3; }
.health-two .prod-name { min-width: 0; }
/* on a phone the chip beside the names left a name 150px wide, clamped
   to "Basic Hospital Plus..."; the chip and the fund's name share the
   first row and the policy's names take the whole width under them */
@media (max-width: 560px) {
  .health-card .prod-id { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px 14px; }
  .health-card .prod-id-t { display: contents; }
  .health-card .prod-id .prod-brandline { margin: 0; }
  .health-card .prod-id .health-two, .health-card .prod-id > .prod-id-t > .prod-name { grid-column: 1 / -1; }
  .health-card .health-two + .health-two { margin-top: 0; }
  .health-card .prod-name { -webkit-line-clamp: 3; }
}
/* the tags: one row that wraps, not a column of bars */
.health-card .prod-pills { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; }
.health-card .prod-pills .pill { padding: 4px 10px; }
.health-card .pill-note { font-size: 12px; color: var(--muted); margin-left: 2px; }
/* the tier, the government's own and the first thing a shopper looks
   for: its words in the text colour, a dot in its metal's tone leading
   (gold, silver, bronze; basic grey). A circle means a circle, so the
   dot keeps its 50% (the radius rule). */
.health-card .prod-pills .pill-tier, .page-head .prod-pills .pill-tier { font-weight: 600; color: var(--text); }
.pill-tier::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; border-radius: 50%;
  background: var(--tier, #9AA3B2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.tier-gold { --tier: #D4A017; }
.tier-silverplus, .tier-silver { --tier: #8E9AAF; }
.tier-bronzeplus, .tier-bronze { --tier: #B5651D; }
.tier-basicplus, .tier-basic { --tier: #9AA3B2; }
/* the cover counts as meters: the bar is the count to scale, one tone on
   every card (no grading), the count beside it in words; measured values,
   so square ends (CLAUDE.md, corner radius rule 1) */
.health-cover {
  display: flex; flex-direction: column; gap: 7px; padding: 10px 14px;
  border-radius: var(--r-data); background: #F4F6FA; font-size: 13px; color: var(--muted);
}
.cover-meter { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cover-bar { flex: none; width: 112px; height: 7px; border-radius: var(--r-data); background: #DCE4F0; overflow: hidden; }
.cover-bar > span { display: block; height: 100%; background: var(--navy); }
.health-cover strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .cover-bar { width: 84px; } }
/* the figure and the action */
.health-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.health-side .prod-metrics { display: block; }
.health-side .metric strong { font-size: 26px; letter-spacing: -.01em; }
.health-side .metric span { font-size: 12px; margin-top: 4px; }
.health-split { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.health-side .prod-actions { align-self: stretch; margin-top: 4px; }
/* the detail: what the extras pay back, as a table (the service, its
   yearly limit with the figure in bold, one example benefit); the text
   colour, as it is the extras figure, not a footnote */
.health-card .prod-under { gap: 8px; }
.health-payback-block { border-top: 1px solid var(--border); padding-top: 9px; }
.pb-head { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.health-payback {
  display: grid; grid-template-columns: 9.5em minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 14px;
  padding: 5px 0; font-size: 12.5px; line-height: 1.4; color: var(--text);
}
.health-payback + .health-payback { border-top: 1px solid #EEF2F8; }
.health-payback .pb-name { font-weight: 600; }
.health-payback .pb-limit strong { font-weight: 700; }
.health-payback .pb-ex { color: var(--muted); }
.health-payback.pb-not .pb-limit { color: var(--muted); }
.pb-more { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 560px) {
  .health-payback { grid-template-columns: minmax(0, 1fr); row-gap: 1px; padding: 6px 0; }
}
/* the hospital cover detail, folded to its counts; opens to the lists */
.health-excl { font-size: 12px; color: var(--muted); }
.health-excl summary { cursor: pointer; color: var(--text); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.health-excl summary::-webkit-details-marker { display: none; }
.health-excl summary::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 120ms ease; }
.health-excl[open] summary::before { transform: rotate(90deg); }
.health-excl .excl-head { margin: 8px 0 2px; font-weight: 600; color: var(--text); }
.health-excl ul { margin: 0; padding-left: 16px; columns: 2; column-gap: 28px; line-height: 1.5; }
@media (max-width: 560px) { .health-excl ul { columns: 1; } }
/* the Ombudsman's member retention figure (lib/healthservice.mjs): the
   figure in the text colour with its name leading; whose figure it is and
   where it is from in the muted note colour, on the same line */
.prod-under .health-service { color: var(--text); border-top: 1px solid var(--border); padding-top: 8px; margin: 0; font-size: 12.5px; }
.health-service .pb-name { font-weight: 600; }
.health-service-src { color: var(--muted); }
/* the view tabs on a phone: one row, the three sharing the width (at
   375px "Extras only" wrapped onto a row of its own, 5px short) */
@media (max-width: 560px) {
  .results .seg-row .seg { display: flex; flex-wrap: nowrap; width: 100%; }
  .results .seg-row .seg-item { flex: 1 1 0; min-width: 0; padding: 7px 6px; text-align: center; white-space: normal; }
}
/* the row that adds the next 50 cards, then what a default leaves out, a row each */
.list-end-row.health-hidden, .list-end-row.health-more { margin-top: 10px; }
.prod-list + .list-end-row.health-hidden, .prod-list + .list-end-row.health-more { margin-top: 14px; }
.list-end-row.health-more a { display: inline-block; padding: 7px 14px; border: 1px solid var(--blue); border-radius: var(--radius-control, 2px); }
.list-end-row.health-more a:hover { text-decoration: none; background: rgba(37, 99, 235, .07); }
/* a hint inside a choice (members-only funds, policies that cover
   nothing) reads as the About you hints do, not as body text */
fieldset.facet .person-hint { margin: 4px 0 2px; font-size: 12px; color: var(--muted); line-height: 1.4; }
fieldset.facet[data-key="nocover"] .opt-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
fieldset.facet[data-key="nocover"] .opt { align-items: flex-start; }
/* a legend long enough to wrap ("Policies with 0 of 38 hospital
   treatments covered") stays flush left like the short ones */
.facet-panel .facet-toggle { text-align: left; }
/* the policy page's pills sit in a row under the title, not as bars */
/* the family's .prod-pills is a centred column; as a row that would centre the pills, so they start at the left */
.page-head .prod-pills { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 6px; margin: 6px 0 0; width: 100%; }
.page-head .prod-pills .pill { display: inline-block; width: auto; }
/* on a phone the policy page's tables stack each row as labelled lines */
@media (max-width: 560px) {
  .health-table.stack thead { display: none; }
  .health-table.stack tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .health-table.stack td { display: block; border: 0; padding: 2px 0; text-align: left; white-space: normal; }
  .health-table.stack td::before { content: attr(data-label) ": "; font-weight: 600; }
  .health-table.stack td.num { text-align: left; }
}