/* Chooser (home, /patients) and /start situation and answer pages.
   Design: variant T (Eric, 2026-10-11), spec 00_CHOICES_CHOOSER_SPEC.md. Quiet warm tiles; green means exactly
   one thing, "this is what you chose"; the chosen tile becomes the bar as the same element; no boxes inside
   boxes; one easing curve, three speeds (140 ms state, 160 ms fades, 300 ms movement), a whole step settles within 400 ms.
   At 960px and wider with JavaScript the home chooser collapses in place (assets/js/chooser.js); everywhere
   else the same tiles are plain links to the /start pages, which carry the same two-bar layout.
   Built for a reader of 60 to 70 on an iPad: 72px tiles, 20px labels, 19/29px answer text, 18px notes and button
   labels, 52px buttons, 48px minimum hit areas. */
.ch-home, .ch-page {
  --ink:#2D2C2B; --hair:#DDD5C6; --tint:#ECE6D9; --tint-h:#E4DCCB; --green:#26302B; --bar:#354B3E; --terra:#B26248; --terra-d:#9C5339;
  --ease:cubic-bezier(0.22,1,0.36,1); --serif:'Playfair Display',Georgia,serif;
  font-family:'Inter Tight',sans-serif; color:var(--ink);
}
.ch-home *, .ch-page * { box-sizing:border-box; }
.ch-sr, .ch-qh-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; padding:0; border:0; }
.ch-home :focus, .ch-page :focus { outline:none; }
.ch-home :focus-visible, .ch-page :focus-visible { outline:3px solid var(--terra); outline-offset:2px; }
.ch-gone { display:none !important; }
.ch-notr, .ch-notr * { transition:none !important; }

/* ---------- Chooser (home, /patients) ---------- */
.ch-home { background:#F4F1EA; padding:40px 0 72px; border-top:1px solid #E2DCCD; border-bottom:1px solid #E2DCCD; scroll-margin-top:12px; }
.ch-home.ch-first { border-top:0; padding-top:40px; }
.ch-wrap { position:relative; max-width:1100px; margin:0 auto; padding:0 32px; }
.ch-h { font-family:var(--serif); font-weight:600; font-size:clamp(30px,3.4vw,40px); line-height:1.15; letter-spacing:-.01em; color:var(--ink); margin:0 0 28px; }
.ch-stage { position:relative; }
.ch-stage.ch-clipping { overflow:clip; }

/* ---------- Tiles: the six choices and the second-level questions ---------- */
.ch-choices, .ch-qgrid { position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:0; padding:0; list-style:none; }
.ch-qgrid > li { display:flex; min-width:0; }
.ch-choices.collapsed, .ch-qgrid.collapsed { display:block; }
@media (min-width:760px) {
  .ch-choices, .ch-qgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.ch-choice, .ch-opt {
  position:relative; display:flex; align-items:center; width:100%; min-height:72px; padding:20px 24px;
  border-radius:16px; border:1px solid var(--hair); background:var(--tint); color:var(--ink); text-align:left;
  text-decoration:none; box-shadow:none; -webkit-tap-highlight-color:transparent;
  transition:background-color 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.ch-txt { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.ch-t, .ch-ot { display:block; font-size:20px; line-height:1.3; font-weight:600; margin:0; }
.ch-ot { flex:1 1 auto; min-width:0; }
.ch-sw { display:grid; grid-template-rows:1fr; transition:grid-template-rows 300ms var(--ease), opacity 140ms var(--ease); }
.ch-s { display:block; min-height:0; overflow:hidden; font-size:16px; line-height:1.35; font-weight:400; opacity:.7; margin-top:3px; transition:margin-top 300ms var(--ease); }
.is-bar .ch-s { margin-top:0; }
.ch-chev { flex:none; display:inline-flex; width:20px; height:20px; margin-left:16px; color:inherit; transition:transform 140ms var(--ease), opacity 140ms var(--ease); }
.ch-chev svg { width:20px; height:20px; }
.ch-ck { display:inline-flex; flex:none; width:0; margin-right:0; opacity:0; overflow:hidden; color:#fff; transition:width 300ms var(--ease), margin 300ms var(--ease), opacity 140ms var(--ease); }
.ch-ck svg { flex:none; width:22px; height:22px; }
.ch-chg { position:absolute; right:24px; top:50%; transform:translateY(-50%); font-size:18px; font-weight:500; color:#fff; text-decoration:underline; text-underline-offset:3px; opacity:0; pointer-events:none; white-space:nowrap; transition:opacity 140ms var(--ease); }
@media (hover:hover) {
  .ch-choice:not(.is-bar):hover, .ch-opt:not(.is-bar):hover { background:var(--tint-h); }
  .ch-choice:not(.is-bar):hover .ch-chev, .ch-opt:not(.is-bar):hover .ch-chev { transform:translateX(4px); }
}
.ch-choice:not(.is-bar):active, .ch-opt:not(.is-bar):active { background:var(--tint-h); }

/* ---------- The selected bar: the chosen tile itself (in place), or the same look on the /start pages ---------- */
.ch-bar, .ch-choice.is-bar, .ch-opt.is-bar { background:var(--bar); color:#fff; border-color:var(--bar); }
.ch-choice.is-bar, .ch-opt.is-bar { min-height:64px; padding:10px 120px 10px 24px; }
.ch-opt.is-bar { padding-right:168px; }
.is-bar .ch-sw { grid-template-rows:0fr; opacity:0; }
.is-bar .ch-chev { opacity:0; transform:none; }
.is-bar .ch-ck { width:22px; margin-right:14px; opacity:1; }
.is-bar .ch-chg { opacity:.92; transition-delay:100ms; }
.ch-bar { position:relative; display:flex; align-items:center; min-height:64px; padding:10px 24px; border:1px solid var(--bar); border-radius:16px; margin:0 0 12px; }
.ch-bar .ch-ck { width:22px; margin-right:14px; opacity:1; }
.ch-bar .ch-t { font-size:20px; line-height:1.3; font-weight:600; letter-spacing:0; color:inherit; }
.ch-bar .ch-s { display:none; }
.ch-bar .ch-chg { position:static; transform:none; margin-left:auto; padding-left:16px; min-height:48px; display:inline-flex; align-items:center; opacity:.92; pointer-events:auto; }
.ch-bar .ch-chg::after { content:''; position:absolute; inset:0; border-radius:16px; }
.ch-bar .ch-chg:hover { opacity:1; }
.ch-bar .ch-chg:focus-visible { outline:none; }
.ch-bar .ch-chg:focus-visible::after { outline:3px solid var(--terra); outline-offset:2px; }
.ch-t:focus { outline:none; }

/* Phones: the label gets the whole line and "Change" sits under it, so no bar label wraps unless it has to
   (the long question bars do). */
@media (max-width:639px) {
  .ch-bar { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; row-gap:2px; align-items:start; padding:14px 18px 12px; }
  .ch-bar .ch-ck { margin:2px 0 0; }
  .ch-bar .ch-txt { grid-column:2; }
  .ch-bar .ch-t { font-size:18px; line-height:1.3; }
  .ch-bar .ch-chg { grid-column:2; justify-self:start; margin:0; padding:0; min-height:0; font-size:18px; }
}

/* ---------- In-place stage (desktop): panels open by clipping, never by animating raw height ---------- */
.ch-panel { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows 300ms var(--ease), visibility 0s linear 300ms; }
.ch-panel.open { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows 300ms var(--ease), visibility 0s; }
.ch-clip { min-height:0; overflow:clip; margin:0 -8px; }
.ch-inner { padding:12px 8px 8px; }
.ch-l2 > .ch-always { grid-column:1 / -1; margin-top:12px; }
.ch-l2 > .ch-opt:nth-last-child(2):nth-child(odd), .ch-qgrid > li:last-child:nth-child(odd) { grid-column:1 / -1; }
.ch-l2.collapsed > .ch-always { margin-top:0; }

/* ---------- Questions page extras ---------- */
.ch-qgrid { margin:0 0 24px; }
.ch-l2.ch-qgrid { margin:0; }

/* ---------- Situation and answer pages ---------- */
.ch-page { background:#F4F1EA; min-height:100vh; }
.ch-main { max-width:1100px; margin:0 auto; padding:40px 32px 72px; font-size:19px; line-height:29px; }
.ch-ans:focus { outline:none; }
.ch-qh { font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.3; letter-spacing:-.005em; color:var(--ink); margin:28px 0 20px; }
.ch-qh:focus { outline:none; }
.ch-qh-sr { font-size:1px; }
/* The line over a question list: Inter Tight (the site sans), sits 24px under the bar and 16px over the tiles */
.ch-ql { font-family:'Inter Tight',sans-serif; font-weight:600; font-size:22px; line-height:1.3; letter-spacing:-.01em; color:#2D2C2B; margin:16px 0 16px; }
/* In place, the panel already sits 12px below the bar, so 4px here makes the visible gap 16px, matching the gap below. */
.ch-panel .ch-ql { margin-top:4px; }
.ch-ql:focus { outline:none; }
@media (max-width:639px) { .ch-ql { font-size:20px; } }
.ch-answer, .ch-ans > p.ch-answer { font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.3; letter-spacing:-.005em; color:var(--ink); border:0; padding:0; margin:28px 0 20px; max-width:800px; }
.ch-intro { font-size:19px; line-height:29px; margin:0 0 24px; }
.ch-body { font-size:19px; line-height:29px; }

/* One quiet surface: consecutive sections in an answer read as one tint section split by a hairline */
.ch-card, .ch-gap, .ch-always { background:var(--tint); border:0; border-radius:0; padding:24px; margin:0; color:var(--ink); }
.ch-ans > section:first-of-type { border-radius:16px 16px 0 0; }
.ch-ans > section:last-of-type { border-radius:0 0 16px 16px; }
.ch-ans > section:only-of-type { border-radius:16px; }
.ch-ans > section + section { border-top:1px solid var(--hair); }
.ch-always { border-radius:16px; margin:24px 0 0; background:#E4E9E1; border:1px solid #CFD8CB; }
.ch-always .ch-btn2 { border-color:#6F8570; }
.ch-always .ch-btn2:hover { border-color:var(--green); background:#DCE3D8; }
.ch-card h2, .ch-card h3, .ch-card h4, .ch-gap h2, .ch-gap h3, .ch-gap h4, .ch-always h2, .ch-always h3, .ch-always h4 { font-family:var(--serif); font-weight:600; font-size:24px; line-height:1.25; color:var(--ink); margin:0 0 10px; }
.ch-card p, .ch-gap p, .ch-always p { font-size:19px; line-height:29px; color:var(--ink); margin:0 0 12px; max-width:800px; }
/* The answer sentence sits on the resource surface, above the title: no box of its own */
.ch-card p.ch-answer { font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.3; letter-spacing:-.005em; margin:0 0 18px; max-width:800px; }
.ch-card p.ch-follow { font-size:18px; line-height:1.5; color:var(--ink); margin:0 0 18px; max-width:800px; }
.ch-card p.ch-rec { display:inline-block; font-size:15px; line-height:1; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#2F4A38; background:#DCE5D6; border-radius:999px; padding:7px 12px; margin:0 0 14px; }
.ch-card p:last-child, .ch-gap p:last-child, .ch-always p:last-child { margin-bottom:0; }
.ch-card .ch-gsm { font-size:18px; line-height:27px; opacity:.8; margin:-2px 0 10px; }
.ch-card .ch-price { font-weight:600; margin:14px 0 0; }
.ch-card .ch-alt { font-size:18px; line-height:27px; font-weight:400; opacity:.72; margin:2px 0 0; }
.ch-card .ch-note { font-size:18px; line-height:27px; opacity:.85; margin:18px 0 0; border:0; padding:0; }
.ch-acts { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.ch-always .ch-btn2 { margin-top:4px; }
.ch-btn, .ch-btn2 { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 26px; border-radius:12px; border:1px solid transparent; font:600 18px/1.2 'Inter Tight',sans-serif; text-align:center; text-decoration:none; cursor:pointer; transition:background-color 140ms var(--ease), border-color 140ms var(--ease); }
.ch-btn { background:var(--terra); color:#fff; }
.ch-btn:hover { background:var(--terra-d); }
.ch-btn2 { background:transparent; color:var(--ink); border-color:#BFB5A1; }
.ch-btn2:hover { border-color:var(--ink); }
@media (max-width:639px) {
  .ch-acts { flex-direction:column; }
  .ch-acts .ch-btn, .ch-acts .ch-btn2, .ch-gap .ch-btn2, .ch-always .ch-btn2 { width:100%; }
  .ch-card, .ch-gap, .ch-always { padding:24px 20px; }
  .ch-qh, .ch-answer, .ch-card p.ch-answer { font-size:24px; }
}

/* "Other places to start": one disclosure holds everything that is not the recommendation. One tinted surface. */
.ch-more { margin:16px 0 0; background:var(--tint); border-radius:16px; }
.ch-more > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:12px 24px; font-size:19px; line-height:1.3; font-weight:600; color:var(--ink); cursor:pointer; border-radius:16px; -webkit-tap-highlight-color:transparent; }
.ch-more > summary::-webkit-details-marker { display:none; }
.ch-more > summary::after { content:''; flex:none; width:9px; height:9px; margin:-4px 4px 0 0; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform 140ms var(--ease); }
.ch-more[open] > summary::after { transform:rotate(-135deg); margin-top:4px; }
.ch-more > summary:hover { background:var(--tint-h); }
.ch-more[open] > summary:hover { background:transparent; }
.ch-more > .ch-card, .ch-more > .ch-gap { background:transparent; border-top:1px solid var(--hair); }
.ch-more > :last-child { border-radius:0 0 16px 16px; }

/* Gap block: email sign-up plus Ask Dr. B, inside the same surface */
.ch-form { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 0; }
.ch-form input[type=email] { flex:1 1 260px; min-width:0; height:52px; padding:0 18px; border:1px solid #BFB5A1; border-radius:12px; background:#FBF9F4; font:500 18px 'Inter Tight',sans-serif; color:var(--ink); }
.ch-form button { flex:0 0 auto; min-height:52px; padding:0 26px; border:1px solid transparent; border-radius:12px; background:var(--terra); color:#fff; font:600 18px 'Inter Tight',sans-serif; cursor:pointer; white-space:nowrap; transition:background-color 140ms var(--ease); }
.ch-form button:hover { background:var(--terra-d); }
.ch-gap .ch-or { margin:22px 0 12px; }
.ch-gap .ch-btn2 { display:inline-flex; }
@media (max-width:639px) { .ch-form button { width:100%; } }

/* Text links under the answer, and the footer lines */
.ch-bottom { display:flex; flex-wrap:wrap; gap:0 28px; margin:20px 0 0; padding:0; border:0; }
.ch-lnk, .ch-link { display:inline-flex; align-items:center; min-height:48px; font-size:18px; font-weight:500; color:var(--terra-d); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.ch-lnk:hover, .ch-link:hover { color:var(--ink); }
.ch-fine { font-size:15px; line-height:1.6; color:#5b6253; margin:40px 0 0; }
.ch-mark { font-size:15px; font-weight:600; color:#4a5146; margin:6px 0 0; }


.ch-foot { margin:30px 0 0; font-size:18px; line-height:1.5; color:#3f463b; }
.ch-foot a { color:#9A4E36; font-weight:700; }

/* Explore block: quieter, clearly separate */
/* Hidden while an answer is open (class set by chooser.js); it clips closed on the same 300 ms as the stage. */
.ch-explore-w { display:grid; grid-template-rows:1fr; transition:grid-template-rows 300ms var(--ease), opacity 160ms var(--ease), visibility 0s; }
.ch-explore-w > .ch-explore { min-height:0; overflow:clip; margin:0; padding:44px 0 0; }
.ch-explore-in { padding:30px 0 0; border-top:2px solid #D9D2BF; }
.ch-home.ch-active .ch-explore-w { grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows 300ms var(--ease), opacity 160ms var(--ease), visibility 0s linear 300ms; }
.ch-explore h3 { font-family:'Playfair Display',serif; font-weight:600; font-size:28px; line-height:1.2; color:#25342A; margin:0 0 6px; }
.ch-explore .ch-sub { font-size:18px; color:#4a5146; margin:0 0 14px; }
.ch-rows { list-style:none; margin:0; padding:0; border-top:1px solid #DAD3C2; }
.ch-rows li { border-bottom:1px solid #DAD3C2; }
.ch-rows a { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:62px; padding:12px 4px; font-size:21px; font-weight:600; line-height:1.3; color:#25342A; text-decoration:none; }
.ch-rows a span.ch-arr { flex:none; color:#B26248; font-size:26px; line-height:1; }
.ch-rows a:hover, .ch-rows a:focus-visible { color:#9A4E36; background:#EFEBDD; }
.ch-rows a:focus-visible { outline:3px solid #B26248; outline-offset:-3px; }
.ch-press { margin:20px 0 0; font-size:18px; line-height:1.5; color:#3f463b; }
.ch-press a { color:#9A4E36; font-weight:700; }


/* ---------- Motion on phones and without JS (cross-document view transitions between the /start pages) ----------
   The tapped tile and the bar on the next page share a name, so the tile grows into the bar. One curve, 320 ms
   for the shape, 180 ms for the page fade, 140 ms for the label cross-fade. Desktop in-place motion lives in
   assets/js/chooser.js (same curve and speeds). */
@view-transition { navigation:auto; }
::view-transition-group(*) { animation-duration:320ms; animation-timing-function:cubic-bezier(0.22,1,0.36,1); }
::view-transition-old(*) { animation-duration:140ms; }
/* Text is never stretched while a tile grows into a bar: old and new images keep their own size, anchored left. */
::view-transition-old(*), ::view-transition-new(*) { width:100%; height:100%; object-fit:none; object-position:left center; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:180ms; animation-timing-function:cubic-bezier(0.22,1,0.36,1); object-fit:fill; }
/* Matching names on both pages. Generated from assets/chooser-data.json (scripts/build_chooser_data.py). */
.ch-choice[data-chooser="brca"], body[data-answer="brca"] .ch-bar:not(.ch-bar-q), body[data-answer^="brca/"] .ch-bar:not(.ch-bar-q) { view-transition-name:ch-s-brca; }
.ch-opt[data-chooser="brca/around-surgery"], body[data-answer="brca/around-surgery"] .ch-bar-q { view-transition-name:ch-o-brca-around-surgery; }
.ch-opt[data-chooser="brca/short-version"], body[data-answer="brca/short-version"] .ch-bar-q { view-transition-name:ch-o-brca-short-version; }
.ch-opt[data-chooser="brca/also-breast-cancer"], body[data-answer="brca/also-breast-cancer"] .ch-bar-q { view-transition-name:ch-o-brca-also-breast-cancer; }
.ch-opt[data-chooser="brca/something-else"], body[data-answer="brca/something-else"] .ch-bar-q { view-transition-name:ch-o-brca-something-else; }
.ch-choice[data-chooser="breast-cancer"], body[data-answer="breast-cancer"] .ch-bar:not(.ch-bar-q), body[data-answer^="breast-cancer/"] .ch-bar:not(.ch-bar-q) { view-transition-name:ch-s-breast-cancer; }
.ch-opt[data-chooser="breast-cancer/vaginal-dryness"], body[data-answer="breast-cancer/vaginal-dryness"] .ch-bar-q { view-transition-name:ch-o-breast-cancer-vaginal-dryness; }
.ch-opt[data-chooser="breast-cancer/side-effects"], body[data-answer="breast-cancer/side-effects"] .ch-bar-q { view-transition-name:ch-o-breast-cancer-side-effects; }
.ch-opt[data-chooser="breast-cancer/told-no"], body[data-answer="breast-cancer/told-no"] .ch-bar-q { view-transition-name:ch-o-breast-cancer-told-no; }
.ch-opt[data-chooser="breast-cancer/ovaries-removed"], body[data-answer="breast-cancer/ovaries-removed"] .ch-bar-q { view-transition-name:ch-o-breast-cancer-ovaries-removed; }
.ch-opt[data-chooser="breast-cancer/low-desire"], body[data-answer="breast-cancer/low-desire"] .ch-bar-q { view-transition-name:ch-o-breast-cancer-low-desire; }
.ch-opt[data-chooser="breast-cancer/just-diagnosed"], body[data-answer="breast-cancer/just-diagnosed"] .ch-bar-q { view-transition-name:ch-o-breast-cancer-just-diagnosed; }
.ch-opt[data-chooser="breast-cancer/something-else"], body[data-answer="breast-cancer/something-else"] .ch-bar-q { view-transition-name:ch-o-breast-cancer-something-else; }
.ch-choice[data-chooser="no-cancer"], body[data-answer="no-cancer"] .ch-bar:not(.ch-bar-q), body[data-answer^="no-cancer/"] .ch-bar:not(.ch-bar-q) { view-transition-name:ch-s-no-cancer; }
.ch-opt[data-chooser="no-cancer/should-i-start"], body[data-answer="no-cancer/should-i-start"] .ch-bar-q { view-transition-name:ch-o-no-cancer-should-i-start; }
.ch-opt[data-chooser="no-cancer/afraid-of-cancer"], body[data-answer="no-cancer/afraid-of-cancer"] .ch-bar-q { view-transition-name:ch-o-no-cancer-afraid-of-cancer; }
.ch-opt[data-chooser="no-cancer/dryness"], body[data-answer="no-cancer/dryness"] .ch-bar-q { view-transition-name:ch-o-no-cancer-dryness; }
.ch-opt[data-chooser="no-cancer/low-desire"], body[data-answer="no-cancer/low-desire"] .ch-bar-q { view-transition-name:ch-o-no-cancer-low-desire; }
.ch-opt[data-chooser="no-cancer/something-else"], body[data-answer="no-cancer/something-else"] .ch-bar-q { view-transition-name:ch-o-no-cancer-something-else; }
.ch-choice[data-chooser="not-sure"], body[data-answer="not-sure"] .ch-bar:not(.ch-bar-q), body[data-answer^="not-sure/"] .ch-bar:not(.ch-bar-q) { view-transition-name:ch-s-not-sure; }
.ch-choice[data-chooser="someone-else"], body[data-answer="someone-else"] .ch-bar:not(.ch-bar-q), body[data-answer^="someone-else/"] .ch-bar:not(.ch-bar-q) { view-transition-name:ch-s-someone-else; }
@media (prefers-reduced-motion: reduce) {
  .ch-choice, .ch-opt, .ch-btn, .ch-btn2 { transition:none !important; }
  .ch-sw, .ch-ck, .ch-panel, .ch-chev, .ch-explore-w { transition-duration:0.01ms !important; }
  ::view-transition-group(*) { animation:none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration:120ms !important; animation-timing-function:linear !important; }
  ::view-transition-old(*), ::view-transition-new(*) { animation-duration:120ms !important; animation-timing-function:linear !important; }
}

/* ---------- Phones and portrait tablets ---------- */
@media (max-width:759px) {
  .ch-home { padding:36px 0 52px; }
  .ch-wrap { padding:0 16px; }
  .ch-main { padding:20px 16px 56px; }
  .ch-explore h3 { font-size:25px; }
  .ch-rows a { font-size:20px; }
}