/* =========================================================
   Topic pages (Getting started, Knowing your tracker …): folding sections, numbered steps,
   "Expand all" and "Keep exploring". Shared pieces live in components/ (page-hero, doc-layout,
   quick-answers, article-list). Layout: _includes/layouts/category.njk · Content: _data/categories.js
   ========================================================= */

.cat-section { scroll-margin-top: var(--below-nav); }
.cat-section + .cat-section { margin-top: 48px; }
/* closed sections sit closer together */
.fold:not([open]) + .fold { margin-top: 28px; }
.cat-section__title { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.15; }
.cat-section__desc { margin-top: 4px; color: var(--f2-ink-soft); }
.fold__body .article-list { margin-top: 16px; }

/* Title that opens the section's guide */
.cat-section__link { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.cat-section__link svg { width: 20px; height: 20px; fill: none; stroke: var(--b3-teal-mid); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
.cat-section__link:hover { color: var(--b3-teal-mid); }
.cat-section__link:hover svg { transform: translateX(4px); }

/* The guide's steps as cards: picture, number, title, a short line */
.step-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; margin-top: 18px; counter-reset: none; }
.step-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 0 0 18px; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--b15-white); border: 1px solid var(--line-soft);
  transition: transform .25s var(--ease-out), box-shadow .25s, border-color .2s;
}
.step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgb(6 186 215 / .4); }
.step-card__media { display: grid; place-items: center; height: 130px; padding: 14px 18px; background: var(--b14-surface); }
.step-card__media { overflow: hidden; }
.step-card__media img { width: auto; height: 100px; max-width: 100%; object-fit: contain; transition: transform .35s var(--ease-out); }
.step-card:hover .step-card__media img { transform: scale(1.04); }
.step-card__num {
  display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 18px; position: relative;
  border-radius: 50%; background: var(--b3-teal-mid); color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 0 0 3px var(--b15-white);
}
.step-card__title { margin: 8px 18px 0; font-weight: 900; font-size: 16px; line-height: 1.35; color: var(--f1-ink); }
.step-card__text { margin: 4px 18px 0; font-size: 14px; line-height: 1.5; color: var(--f2-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* A step whose photo is still to come */
.step-card__needed { display: grid; place-items: center; align-content: center; gap: 6px; width: 100%; height: 100%; border: 1.5px dashed rgb(0 120 140 / .35); border-radius: 12px; background: var(--b6-cyan-wash); font-size: 12px; font-weight: 700; color: var(--b3-teal-mid); }
.step-card__needed svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; opacity: .7; }
/* More than three steps: narrower cards, titles only */
.step-cards--many { gap: 12px; }
.step-cards--many .step-card { padding-bottom: 14px; }
.step-cards--many .step-card__num { margin-left: 14px; }
.step-cards--many .step-card__title { margin-inline: 14px; font-size: 15px; }
.step-cards--many .step-card__text { display: none; }
/* App screens: taller pictures, each screen in a small phone outline */
.step-cards--screens .step-card__media { height: 190px; padding: 16px 12px 18px; }
.step-cards--screens .step-card__media img { height: auto; max-height: 100%; }
.mini-phone { display: block; height: 156px; padding: 3px; border-radius: 13px; background: #0d1214; box-shadow: 0 8px 18px -10px rgb(2 19 22 / .5); }
.mini-phone img { display: block; height: 150px !important; max-height: none; width: auto; max-width: none; border-radius: 10px; }
.step-card:hover .mini-phone img { transform: none; }
.step-card:hover .mini-phone { transform: scale(1.04); }
.mini-phone { transition: transform .35s var(--ease-out); }
/* Step strip: numbered points joined by a line, each with its title */
.step-strip { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 20px; padding: 20px 16px 18px; border-radius: var(--radius-lg); border: 1px solid var(--line-soft); }
.step-strip li { position: relative; }
.step-strip li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: repeating-linear-gradient(90deg, var(--b4-cyan) 0 4px, transparent 4px 9px); }
.step-strip__item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 8px; text-align: center; border-radius: 12px; }
.step-strip__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--b4-cyan); background: var(--b15-white); color: var(--b3-teal-mid); font-size: 14px; font-weight: 900; transition: background-color .2s, color .2s, border-color .2s; }
.step-strip__title { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--f1-ink); transition: color .2s; }
.step-strip__item:hover .step-strip__num { background: var(--b3-teal-mid); border-color: var(--b3-teal-mid); color: #fff; }
.step-strip__item:hover .step-strip__title { color: var(--b3-teal-mid); }

/* steps without a picture yet: no empty band */
.step-card--nopic { padding-top: 18px; }
.step-card--nopic .step-card__num { margin-top: 0; box-shadow: none; }

/* Steps: numbered circles joined by a dotted line, the journey motif from the deck */
.cat-sections--steps .cat-section { position: relative; padding-left: 64px; }
.cat-section__num {
  position: absolute; left: 0; top: -4px;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--b15-white); border: 2px solid var(--b4-cyan);
  font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--b3-teal-mid);
}
.cat-sections--steps .cat-section:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 48px; bottom: -44px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--b4-cyan) 0 4px, transparent 4px 10px);
}
.cat-sections--steps .fold:not([open]):not(:last-child)::before { bottom: -24px; }

/* ---------- Folding sections ---------- */
.cat-sections { position: relative; }
/* "Expand all": a quiet control on its own line, top right of the column */
.cat-sections:has(> .expand-all) { padding-top: 44px; }
.expand-all {
  position: absolute; top: 0; right: 0; height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--f2-ink-soft);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color .2s;
}
.expand-all:hover { color: var(--b3-teal-mid); }
.expand-all svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.expand-all[aria-expanded="true"] svg { transform: rotate(180deg); }

.fold > summary { list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold__head { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.fold__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fold > .fold__head:hover .cat-section__title { color: var(--b3-teal-mid); }
.fold__body { animation: rise-in .3s var(--ease-out); }





/* ---------- Keep exploring ---------- */
.cat-more { padding-block: clamp(64px, 8vw, 104px); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  /* the left pane shows only this page's part (site-nav.css), its sections as a swipeable row of chips */
  .snav__here.tree, .snav__here .tree { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .snav__here.tree::-webkit-scrollbar, .snav__here .tree::-webkit-scrollbar { display: none; }
  .snav__here .tree__item::before, .snav__here .tree__guides, .snav__here .tree__chev { display: none; }
  .snav__here .tree__link { padding: 6px 14px 6px 6px; border: 1px solid var(--line-soft); border-radius: 999px; white-space: nowrap; font-size: 14px; }
  .snav__here .tree__link[aria-current="step"] { border-color: var(--b3-teal-mid); }
  .expand-all { position: static; display: flex; margin: 0 0 12px auto; height: auto; }
}
@media (max-width: 600px) {
  .step-cards { grid-template-columns: 1fr; }
  /* the strip runs down instead of across */
  .step-strip { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .step-strip li:not(:last-child)::after { top: 34px; bottom: -12px; left: 15px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--b4-cyan) 0 4px, transparent 4px 9px); }
  .step-strip__item { flex-direction: row; text-align: left; padding: 0; }
  /* phones: picture on the left, words on the right */
  .step-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: start; column-gap: 12px; padding: 12px; }
  .step-card__media { grid-row: 1 / span 3; height: 84px; padding: 8px; border-radius: 12px; }
  .step-card__media img { height: 66px; }
  .step-cards--screens .step-card__media { height: 104px; padding: 8px; }
  .mini-phone { height: 88px; padding: 2px; border-radius: 9px; }
  .mini-phone img { height: 84px !important; border-radius: 7px; }
  .step-cards--many .step-card__num { margin-left: 0; }
  .step-cards--many .step-card__title { margin-inline: 0; }
  .step-card--nopic { grid-template-columns: minmax(0, 1fr); }
  .step-card--nopic > * { grid-column: 1 !important; }
  .step-card__num { grid-column: 2; margin: 0; width: 22px; height: 22px; font-size: 11px; box-shadow: none; }
  .step-card__title, .step-card__text { grid-column: 2; margin-inline: 0; }
  .cat-sections--steps .cat-section { padding-left: 52px; }
  .cat-section__num { width: 36px; height: 36px; font-size: 17px; }
  .cat-sections--steps .cat-section:not(:last-child)::before { left: 17px; top: 40px; }
  .cat-section__title { font-size: 25px; }
}

/* ---------- Topic still being written (comingSoon) ---------- */
.soon-note { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; border-radius: var(--radius-lg); background: var(--b6-cyan-wash); border: 1.5px dashed rgb(0 120 140 / .35); }
.soon-note svg { flex-shrink: 0; width: 26px; height: 26px; margin-top: 2px; fill: none; stroke: var(--b3-teal-mid); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.soon-note__title { font-family: var(--font-body); font-weight: 900; font-size: 18px; line-height: 1.35; }
.soon-note__text { margin-top: 4px; color: var(--f2-ink-soft); }
.soon-note__text a { color: var(--b3-teal-mid); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cat-soon .soon-note + .soon-section { margin-top: 40px; }
.soon-section { padding-bottom: 28px; border-bottom: 1px solid var(--line-soft); }
.soon-section + .soon-section { margin-top: 28px; }
.soon-section__tag { display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: 999px; background: var(--b14-surface); font-size: 12px; font-weight: 700; color: var(--f3-ink-muted); }

/* ---------- Explainer (feature pages with `explain`): read top to bottom like a wiki ---------- */
/* the page's summary, on a soft panel above the chapters */
.wiki-lede { padding: 28px 32px; border-radius: 20px; background: var(--b14-surface); box-shadow: inset 0 0 0 1px var(--line-soft); }
.wiki-lede { scroll-margin-top: var(--below-nav); }
/* heading and text set like the chapters below */
.wiki-lede__title { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.15; margin-bottom: 4px; }
.wiki-lede p { margin-top: 12px; color: var(--f2-ink-soft); line-height: 1.65; }
.wiki-lede + .wiki-chapter { margin-top: 48px; padding-top: 0; border-top: 0; }
.wiki-chapter { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line-soft); scroll-margin-top: var(--below-nav); }
.wiki-chapter--figure { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; align-items: start; }
.wiki-chapter__title { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.15; margin-bottom: 4px; }
.wiki-chapter__text > p { margin-top: 12px; max-width: 64ch; color: var(--f2-ink-soft); line-height: 1.65; }
.wiki-chapter .article-list, .wiki-chapter .quick-answers { margin-top: 20px; }
.wiki-label { margin-top: 28px; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--f3-ink-muted); }

/* term → what it means, one row each */
.wiki-terms { margin-top: 10px; border-top: 1px solid var(--line-soft); }
.wiki-terms > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.wiki-terms dt { font-weight: 800; color: var(--f1-ink); }
.wiki-terms dd { margin: 0; color: var(--f2-ink-soft); line-height: 1.6; }
/* numbered parts (e.g. the Home screen, top to bottom) */
.wiki-terms--numbered dt { display: flex; align-items: center; gap: 10px; }
.wiki-terms__num { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--b4-cyan); color: var(--b15-white); font-size: 13px; font-weight: 900; }
/* situations: a pale band, wider first column */
.wiki-terms--cases { margin-top: 20px; padding: 6px 24px; border: 0; border-radius: var(--radius-lg); background: var(--b14-surface); }
.wiki-terms--cases > div { grid-template-columns: 260px minmax(0, 1fr); border-color: var(--io4-line); }
.wiki-terms--cases > div:last-child { border-bottom: 0; }

.wiki-figure { margin: 8px 0 0; position: sticky; top: calc(var(--below-nav) + 16px); }
.wiki-figure img { display: block; width: 100%; height: auto; }
.wiki-figure .pointed { margin-top: 40px; }
/* a colour dot beside each light meaning */
.swatch { display: inline-block; width: 12px; height: 12px; margin-right: 10px; border-radius: 50%; vertical-align: 0; background: var(--sw); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw) 22%, transparent); }
.swatch--green { --sw: #25B90D; }
.swatch--red { --sw: #DB2929; }
.swatch--amber { --sw: #FF9F0A; }
.swatch--blue { --sw: #2F6BFF; }
.swatch--off { --sw: transparent; border: 1.5px solid var(--io4-line); box-shadow: none; }
/* photos in a row with captions */
.wiki-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.wiki-strip li { display: flex; flex-direction: column; gap: 8px; }
.wiki-strip img { display: block; width: 100%; height: auto; }
.wiki-strip span { font-size: 14px; font-weight: 700; color: var(--f2-ink-soft); text-align: center; }
.wiki-figure__needed {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 9 / 18; padding: 20px; border: 1.5px dashed var(--io4-line); border-radius: 28px;
  background: var(--b14-surface); text-align: center; font-size: 13px; line-height: 1.45; color: var(--f3-ink-muted);
}
.wiki-figure__needed svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.wiki-figure__needed b { color: var(--f2-ink-soft); }

@media (max-width: 860px) {
  .wiki-lede { padding: 20px; border-radius: 16px; }
  .wiki-lede__title { font-size: 26px; }
  .wiki-chapter { margin-top: 40px; padding-top: 36px; }
  .wiki-chapter--figure { grid-template-columns: 1fr; gap: 24px; }
  .wiki-figure { position: static; width: 200px; margin: 0 auto; }
  .wiki-chapter__title { font-size: 26px; }
}
@media (max-width: 600px) {
  .wiki-terms > div, .wiki-terms--cases > div { grid-template-columns: 1fr; gap: 2px; }
  .wiki-terms--cases { padding: 4px 16px; }
}

/* ---------- Feature hub (Knowing your tracker): feature cards in groups, components/feature-cards.njk ---------- */
.hub { display: flex; flex-direction: column; gap: 24px; }
.ficon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* each group on its own panel, light and darker grey in turn; the left pane jumps to them */
.hub-groups { display: flex; flex-direction: column; gap: 24px; }
.hub-group { padding: 28px; border-radius: 20px; background: var(--b14-surface); scroll-margin-top: 110px; }
.hub-group:nth-child(even) { background: #E8EDEF; }
.hub-group__title { margin-bottom: 18px; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.15; color: var(--f1-ink); }
.hub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px; }
/* a feature still to be written, in the left pane */
.tree__guide--soon { color: var(--f3-ink-muted); cursor: default; }

/* a card: picture on top, then the name and what it covers */
.fcard {
  display: flex; flex-direction: column; overflow: hidden; padding-bottom: 18px;
  border-radius: 16px; background: var(--b15-white); color: var(--f1-ink);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
a.fcard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-soft), var(--shadow-lift); }
a.fcard:active { transform: translateY(-1px); }
a.fcard:focus-visible { outline: 3px solid var(--f1-ink); outline-offset: 2px; }
/* the picture: every card has the same light stage with one thing on it, at the same size and
   place: a phone rising from the bottom edge, the tracker, or the icon */
.fcard__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 14px; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F4F5 100%); border-bottom: 1px solid var(--line-soft);
  color: var(--b3-teal-mid);
}
.fcard__media img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 12px 16px rgb(16 24 26 / .22)); transition: transform .45s var(--ease-out); }
/* the phone is sized by the stage's height, so it's the same on a wide or big card */
.fcard__media--screen img {
  position: absolute; left: 50%; top: 14%; width: auto; height: 92%; aspect-ratio: 360 / 450; object-fit: cover; object-position: top;
  translate: -50% 0; border: 5px solid #0b1416; border-bottom: 0; border-radius: 22px 22px 0 0;
  filter: none; box-shadow: 0 14px 30px rgb(16 24 26 / .18);
}
a.fcard:hover .fcard__media img { transform: translateY(-6px); }
.fcard__media .ficon { width: 30px; height: 30px; padding: 17px; box-sizing: content-box; border-radius: 50%; background: var(--b15-white); box-shadow: 0 8px 20px rgb(4 52 60 / .1); stroke-width: 1.5; }
.fcard__title { padding: 0 18px; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.2; }
.fcard__desc { display: -webkit-box; margin-top: 6px; padding: 0 18px; overflow: hidden; font-size: 14px; line-height: 1.45; color: var(--f2-ink-soft); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* written: a teal arrow after the name */
a.fcard .fcard__title::after {
  content: ""; display: inline-block; width: .65em; height: .65em; margin-left: .3em; vertical-align: .02em; background: var(--b3-teal-mid);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--ease-out);
}
a.fcard:hover .fcard__title::after { transform: translateX(4px); }
/* still to be written: picture and name only, "Coming soon" at the bottom */
.fcard--soon .fcard__title { color: var(--f2-ink-soft); }
.fcard__soon { margin-top: auto; padding: 6px 18px 0; font-size: 12px; font-weight: 900; color: var(--f3-ink-muted); }
/* a group's lead card fills its rows out: its picture takes the extra room */
.fcard--wide { grid-column: span 2; }
.fcard--big { grid-column: span 2; grid-row: span 2; }
.fcard--wide .fcard__media, .fcard--big .fcard__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 160px; }
.fcard--big .fcard__title { font-size: 26px; }
.fcard--big .fcard__desc { font-size: 15px; }
@media (max-width: 1100px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 600px) {
  .hub-groups { gap: 16px; }
  .hub-group { padding: 20px 14px; border-radius: 16px; }
  .hub-group__title { font-size: 26px; }
  .fcard { padding-bottom: 14px; border-radius: 14px; }
  .fcard__media { aspect-ratio: 4 / 3; margin-bottom: 10px; }
  .fcard__title { padding: 0 12px; font-size: 16px; }
  .fcard__desc { padding: 0 12px; font-size: 13px; -webkit-line-clamp: 3; }
  .fcard__soon { padding: 4px 12px 0; font-size: 11px; }
}

/* ---------- Related Topics on a feature page: related features as cards ---------- */
.related-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.related-cards > li { display: flex; }
.related-cards .fcard { width: 100%; }
.related-cards .fcard__media { aspect-ratio: 2 / 1; } /* three across: wider cards, same stage height as the hub's */
@media (max-width: 760px) { .related-cards { grid-template-columns: 1fr; } }

/* ---------- Finder (finder: true, e.g. Troubleshooting): category cards, then a section's questions
   beside one answer. Markup: layouts/category.njk · Behaviour: js/components/finder.js (.is-finder).
   Without JavaScript it reads top to bottom: the cards, then each section with every answer. ---------- */
.finder { container: finder / inline-size; }
.finder-label { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--f3-ink-muted); }
/* the open section in the left pane */
.finder-nav .tree__guide[aria-current] { background: var(--b14-surface); color: var(--b3-teal-mid); }

/* Category cards: the hub's groups and cards (.hub-group, .fcard with its lead sizes), each card
   listing its section's first two questions, so people can see they're in the right place */
.finder-cat__qs { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 14px 18px 0; }
.finder-cat__q { position: relative; display: -webkit-box; padding-left: 14px; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--b3-teal-mid); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.finder-cat__q::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
/* the emergency entry (urgent: true): a deep teal stage like the header, marked "Start here" */
.finder-cat--urgent .fcard__media { background: radial-gradient(120% 160% at 100% 0%, var(--b2-teal) 0%, var(--b1-deep-teal) 62%); border-bottom: 0; }
.finder-cat--urgent .fcard__media--screen img { border-color: #02181c; box-shadow: 0 14px 30px rgb(0 0 0 / .35); }
.finder-cat--urgent .fcard__title { font-size: 26px; }
.finder-cat--urgent .fcard__desc { font-size: 15px; }
.finder-cat__flag { position: absolute; top: 16px; left: 18px; z-index: 1; padding: 3px 11px; border-radius: 999px; background: var(--b5-cyan-light); color: var(--b1-deep-teal); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

/* A section: back link, title and line, then its guides and answers */
.finder-section { scroll-margin-top: var(--below-nav); }
.finder-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 900; color: var(--f4-button); transition: color .2s; }
.finder-back svg { width: 16px; height: 16px; rotate: 180deg; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: translate .25s var(--ease-out); }
.finder-back:hover { color: var(--b3-teal-mid); }
.finder-back:hover svg { translate: -3px 0; }
.finder-section__title { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1.12; }
.finder-section__desc { margin-top: 6px; max-width: 65ch; color: var(--f2-ink-soft); }
.finder [tabindex="-1"]:focus { outline: none; } /* headings focused for screen readers, not by the reader */
.finder-section__body { margin-top: 28px; }

/* Guides: a checklist icon sets them apart from the questions */
.finder-guides { display: grid; gap: 4px; margin-bottom: 28px; }
.finder-guide { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--f1-ink); transition: background-color .2s; }
a.finder-guide:hover { background: var(--b6-cyan-wash); }
.finder-guide:focus-visible { outline-offset: -2px; border-radius: 12px; }
.finder-guide__icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--b6-cyan-wash); color: var(--b3-teal-mid); }
a.finder-guide:hover .finder-guide__icon { background: var(--b15-white); }
.finder-guide__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.finder-guide__title { flex: 1; }
.finder-guide__chev { width: 18px; height: 18px; fill: none; stroke: var(--b3-teal-mid); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
a.finder-guide:hover .finder-guide__chev { transform: translateX(3px); }
.finder-guide--soon .finder-guide__title { color: var(--f3-ink-muted); }
.finder-guide__soon { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; background: var(--b14-surface); color: var(--f3-ink-muted); font-size: 12px; font-weight: 800; white-space: nowrap; }

/* Questions: a list of links, each opening its answer page; a chevron on each */
.finder-section__body { max-width: 820px; }
.finder-section__body > .finder-label { margin: 0 0 8px 12px; font-family: inherit; line-height: 1.5; }
.finder-section__body .qa-pager { margin-top: 48px; }
.finder-section > .finder-back { margin-bottom: 24px; }
.doc-main.finder-section { padding-bottom: 32px; }
.finder-qs { display: grid; border-top: 1px solid var(--line-soft); }
.finder-q { display: flex; align-items: center; gap: 16px; padding: 16px 12px; border-bottom: 1px solid var(--line-soft); font-size: 17px; line-height: 1.45; color: var(--f1-ink); transition: background-color .2s, color .2s; }
.finder-q > span { flex: 1; }
.finder-q:hover { background: var(--b14-surface); color: var(--b3-teal-mid); }
.finder-q:focus-visible { outline-offset: -2px; border-radius: 12px; }
.finder-q__chev { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: var(--b3-teal-mid); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
.finder-q:hover .finder-q__chev { transform: translateX(3px); }
.finder-help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--f2-ink-soft); }
.finder-help button { font: inherit; font-size: 14px; font-weight: 700; color: var(--f2-ink-soft); background: var(--b15-white); border: 1px solid var(--io4-line); border-radius: 999px; padding: 4px 14px; cursor: pointer; transition: border-color .2s, color .2s; }
.finder-help button:hover { border-color: var(--b3-teal-mid); color: var(--b3-teal-mid); }

/* ---------- Answer page (layouts/answer.njk): one question, its answer, previous and next ---------- */
.page-hero--question { padding-bottom: clamp(28px, 3vw, 44px); }
.page-hero--question .page-hero__copy { padding-top: clamp(8px, 1.5vw, 16px); }
.page-hero--question .page-hero__kicker { margin-bottom: 10px; }
.page-hero--question .page-hero__title a, .page-hero__crumb { color: inherit; transition: color .2s; }
.page-hero--question .page-hero__title a:hover, .page-hero__crumb:hover { color: var(--b5-cyan-light); }
.qa__q { margin-top: 24px; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3vw, 38px); line-height: 1.18; color: var(--f1-ink); }
.qa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 1120px; padding-bottom: 32px; }
.qa__main { max-width: 760px; }
/* the right pane: the answer's picture, or a placeholder until there is one; under the answer when narrow */
.qa__media { align-self: start; }
.qa__media img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.qa__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 4 / 5; padding: 24px; border: 2px dashed var(--io4-line); border-radius: var(--radius-lg); background: var(--b14-surface); color: var(--f3-ink-muted); text-align: center; }
.qa__placeholder svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qa__placeholder-title { font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.qa__placeholder-text { max-width: 28ch; font-size: 14px; line-height: 1.5; }
@media (min-width: 1100px) {
  .qa { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 48px; }
  .qa__media { position: sticky; top: calc(var(--below-nav) + 24px); margin-top: 52px; }
}
@media (max-width: 1099.98px) { .qa__media:has(.qa__placeholder) { display: none; } } /* narrow: no empty frame under the answer */
.qa__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.qa__top .finder-back { margin-bottom: 0; }
.qa__pos { font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--f3-ink-muted); }
.qa__answer { margin-top: 18px; padding: 32px 36px; border-radius: var(--radius-lg); background: var(--b14-surface); font-size: 19px; line-height: 1.7; color: var(--f1-ink); }
.qa__guides { margin-top: 32px; }
.qa__guides > .finder-label { margin: 0 0 8px 12px; }
.qa__guides .finder-guides { margin-bottom: 0; }
.qa__help { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--io4-line); }
.qa-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.qa-pager__link { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--b15-white); box-shadow: inset 0 0 0 1px var(--line-soft); transition: transform .25s var(--ease-out), box-shadow .25s; }
.qa-pager__link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--b4-cyan), var(--shadow-lift); }
.qa-pager__link--next { text-align: right; }
.qa-pager__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--b3-teal-mid); }
.qa-pager__link--next .qa-pager__label { justify-content: flex-end; }
.qa-pager__label svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qa-pager__link--prev .qa-pager__label svg { rotate: 180deg; }
.qa-pager__q { font-weight: 700; line-height: 1.4; color: var(--f1-ink); }
@media (max-width: 600px) {
  .qa__answer { margin-top: 20px; padding: 22px 20px; font-size: 17px; }
  .qa-pager { grid-template-columns: 1fr; gap: 12px; }
  .qa-pager__link--next { text-align: left; }
  .qa-pager__link--next .qa-pager__label { justify-content: flex-start; }
  .finder-q { padding: 15px 4px; font-size: 16px; }
}
@media (max-width: 860px) {
  .toc:has([data-finder-nav]) { display: none; } /* the cards do the left pane's job */
  .finder-section__title { font-size: 30px; }
}
@media (max-width: 600px) {
  .finder-cat__qs { gap: 4px; padding: 10px 12px 0; }
  .finder-cat__q { font-size: 12px; }
  .finder-cat--urgent .fcard__title { font-size: 20px; }
  .finder-cat--urgent .fcard__desc { font-size: 13px; }
  .finder-cat__flag { top: 12px; left: 12px; font-size: 11px; }
}