/* Interactive Treatment & Diet Guide — home page section. Scoped under .ctg.
   Uses px units: the home page scales <html> font-size with vw, which would distort rem.
   Height budget: ≤ ~1 screen on phones (other home sections: 530–820px at 390px wide),
   ≤ ~0.85 screen on laptops (430–650px at 1366x768). */
.ctg { --ctg-brand:#802a8f; --ctg-brand-dark:#5f1f6b; --ctg-pink:#c2506f; --ctg-tint:#f8f0fa; --ctg-line:#e4d5e8;
  --ctg-text:#2d2d2d; --ctg-muted:#5c575e; --ctg-ok:#1f7a4d;
  --ctg-surface:#fff; --ctg-on-brand:#fff; --ctg-focus:#c9a0d2; --ctg-err:#b3261e; --ctg-shadow:rgba(128,42,143,.08);
  /* Side gutters match the other home sections, which scale with the viewport:
     ~23px at 390px (5.9vw), then 5.21vw from 640px up (40px @768, 71px @1366, 100px @1920, 133px @2560). */
  padding:40px max(16px, 5.9vw); background:linear-gradient(180deg,var(--ctg-surface) 0%,var(--ctg-tint) 100%); color:var(--ctg-text); }
/* Own base font size: the home page sets <html> to a vw-based size (~38px at 1366px), which would otherwise
   inflate line boxes around inline elements (e.g. it pushed the search input 14px down). */
.ctg{ font-size:16px; line-height:1.5; }
.ctg *{ font-family:"Poppins",sans-serif; box-sizing:border-box; }
.ctg__vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }
.ctg__wrap{ margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }

/* Intro column */
.ctg__intro{ min-width:0; }
.ctg__eyebrow{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ctg-pink); margin-bottom:6px; }
.ctg__title{ font-size:24px; line-height:1.25; font-weight:600; color:var(--ctg-brand); margin:0 0 8px; text-wrap:balance; }
.ctg__sub{ font-size:14px; line-height:1.55; color:var(--ctg-muted); margin:0; max-width:560px; }
.ctg__rail, .ctg__basis{ display:none; }

/* Card */
.ctg__card{ min-width:0; background:var(--ctg-surface); border:1px solid var(--ctg-line); border-radius:16px; box-shadow:0 4px 18px var(--ctg-shadow); padding:18px 16px; min-height:480px; }
.ctg__progress{ display:flex; gap:6px; margin-bottom:6px; }
.ctg__progress span{ flex:1; height:5px; border-radius:3px; background:var(--ctg-line); transition:background .2s; }
.ctg__progress span.on{ background:var(--ctg-brand); }
.ctg__stepno{ font-size:12.5px; color:var(--ctg-muted); margin:0 0 10px; }
.ctg__q{ font-size:18px; font-weight:600; color:var(--ctg-text); line-height:1.35; margin:0 0 6px; }
.ctg__hint{ font-size:13.5px; color:var(--ctg-muted); line-height:1.55; margin:0 0 14px; }
.ctg__small{ font-weight:400; color:var(--ctg-muted); }
.ctg__h4{ font-size:15px; margin:0 0 8px; color:var(--ctg-text); }

/* Search + cancer tiles */
.ctg__search{ position:relative; margin:8px 0 12px; }
.ctg__search-ico{ position:absolute; left:11px; top:50%; width:20px; height:20px; transform:translateY(-50%); color:var(--ctg-muted); pointer-events:none; }
.ctg__search input{ display:block; width:100%; height:44px; border:2px solid var(--ctg-line); border-radius:10px; padding:0 12px 0 38px; font-size:15px; background:var(--ctg-surface); color:var(--ctg-text); }
.ctg__search input:focus{ outline:3px solid var(--ctg-focus); border-color:var(--ctg-brand); }
.ctg__tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
/* Tier 2/3 and search results: compact row tiles (icon beside label), no inner scroll box */
.ctg__tiles--list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.ctg__tiles--list .ctg__tile > span{ flex-direction:row; justify-content:flex-start; gap:8px; height:50px; padding:6px 10px; text-align:left; }
.ctg__tiles--list .ctg__ico{ width:26px; height:26px; }
.ctg__tiles--list .ctg__tile b{ font-size:12.5px; }
/* Column count follows the card's own width (set by the script as data-cols: 3, 4 or 5),
   and the number of tiles shown always fills whole rows (9 / 16 / 20). */
.ctg__card[data-cols="4"] .ctg__tiles, .ctg__card[data-cols="4"] .ctg__tiles--list{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.ctg__card[data-cols="5"] .ctg__tiles, .ctg__card[data-cols="5"] .ctg__tiles--list{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.ctg__tierhead{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:4px 0 8px; }
.ctg__tierhead span{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ctg-muted); }
.ctg__tierhead .ctg__linkbtn{ padding:0; }
.ctg__tiles--list + .ctg__tierhead{ margin-top:14px; }
.ctg__tile{ position:relative; display:block; cursor:pointer; margin:0; padding:0; border:0; background:none; font:inherit; text-align:inherit; }
.ctg__tile input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.ctg__tile > span{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:80px; padding:6px 4px; border:2px solid var(--ctg-line); border-radius:12px; background:var(--ctg-surface); text-align:center; transition:border-color .15s, background .15s, transform .15s; }
.ctg__tile b{ font-size:12.5px; font-weight:600; line-height:1.2; color:var(--ctg-text); }
.ctg__ico{ width:30px; height:30px; color:var(--ctg-brand); flex:0 0 auto; }
.ctg__tile:hover > span{ border-color:var(--ctg-pink); }
.ctg__tile input:checked + span{ border-color:var(--ctg-brand); background:var(--ctg-tint); }
.ctg__tile input:focus-visible + span, .ctg__tile--more:focus-visible > span{ outline:3px solid var(--ctg-focus); outline-offset:2px; }
.ctg__tile--more > span{ border-style:dashed; background:var(--ctg-tint); }
.ctg__tile--more .ctg__ico{ color:var(--ctg-pink); }
.ctg__tile--more:focus-visible{ outline:none; }
.ctg__linkbtn{ background:none; border:0; padding:8px 0 0; color:var(--ctg-brand); font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:underline; }

/* Radio / checkbox options */
.ctg__opts{ display:grid; grid-template-columns:1fr; gap:8px; border:0; padding:0; margin:0; min-width:0; }
.ctg__opt{ position:relative; display:block; cursor:pointer; }
.ctg__opt input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; margin:0; }
.ctg__opt span{ display:block; border:2px solid var(--ctg-line); border-radius:12px; padding:10px 12px; background:var(--ctg-surface); transition:border-color .15s, background .15s; }
.ctg__opt b{ display:block; font-size:14.5px; font-weight:600; color:var(--ctg-text); }
.ctg__opt small{ display:block; font-size:12.5px; color:var(--ctg-muted); line-height:1.4; margin-top:2px; }
.ctg__opt:hover span{ border-color:var(--ctg-pink); }
.ctg__opt input:checked + span{ border-color:var(--ctg-brand); background:var(--ctg-tint); }
.ctg__opt input:focus-visible + span{ outline:3px solid var(--ctg-focus); outline-offset:2px; }
.ctg__opt--check input:checked + span b::before{ content:"\2713  "; color:var(--ctg-brand); }
/* Symptom pills: wrap to content width so 7 options take 3–4 short rows */
.ctg__pills{ display:flex; flex-wrap:wrap; gap:7px; }
.ctg__pill{ position:relative; cursor:pointer; }
.ctg__pill input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.ctg__pill span{ display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:5px 13px; border:2px solid var(--ctg-line); border-radius:999px; font-size:13.5px; font-weight:500; color:var(--ctg-text); background:var(--ctg-surface); transition:border-color .15s, background .15s; }
.ctg__pill:hover span{ border-color:var(--ctg-pink); }
.ctg__pill input:checked + span{ border-color:var(--ctg-brand); background:var(--ctg-tint); color:var(--ctg-brand-dark); }
.ctg__pill input:checked + span::before{ content:"\2713"; font-weight:700; color:var(--ctg-brand); }
.ctg__pill input:focus-visible + span{ outline:3px solid var(--ctg-focus); outline-offset:2px; }
/* Food preference: 2x2 on phones, one row of 4 from tablet up */
.ctg__opts--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ctg__opts--4 .ctg__opt span{ text-align:center; padding:9px 6px; }
.ctg__opts--4 .ctg__opt b{ font-size:13.5px; }
.ctg__opts--tight .ctg__opt span{ padding:8px 10px; }
.ctg__opts--tight .ctg__opt b{ font-size:13.5px; font-weight:500; }

.ctg__sub-q{ font-size:14.5px; font-weight:600; color:var(--ctg-text); margin:14px 0 8px; }
.ctg__nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.ctg__btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; border:2px solid var(--ctg-brand); transition:background .15s, color .15s; text-decoration:none; }
.ctg__btn--primary{ background:var(--ctg-brand); color:var(--ctg-on-brand); }
.ctg__btn--primary:hover{ background:var(--ctg-brand-dark); border-color:var(--ctg-brand-dark); }
.ctg__btn--ghost{ background:var(--ctg-surface); color:var(--ctg-brand); }
.ctg__btn--ghost:hover{ background:var(--ctg-tint); }
.ctg__btn[disabled]{ opacity:.45; cursor:not-allowed; }
.ctg__btn:focus-visible, .ctg__linkbtn:focus-visible, .ctg__more:focus-visible{ outline:3px solid var(--ctg-focus); outline-offset:2px; }
.ctg__more{ font-size:14px; font-weight:600; color:var(--ctg-brand); text-decoration:none; }
.ctg__more:hover{ text-decoration:underline; }

/* Result */
.ctg__rhead{ display:flex; gap:12px; align-items:flex-start; margin-bottom:6px; }
.ctg__rico{ width:48px; height:48px; flex:0 0 auto; color:var(--ctg-brand); background:var(--ctg-tint); border-radius:12px; padding:6px; }
.ctg__rtitle{ font-size:20px; font-weight:600; color:var(--ctg-brand); margin:0 0 6px; }
.ctg__chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.ctg__chip{ font-size:12px; background:var(--ctg-tint); color:var(--ctg-brand-dark); border-radius:999px; padding:3px 10px; font-weight:500; }
.ctg__lead{ font-size:14px; line-height:1.65; color:var(--ctg-text); margin:0 0 14px; }
.ctg__tabs{ display:flex; gap:8px; margin:0 0 14px; border-bottom:2px solid var(--ctg-line); }
.ctg__tab{ background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-2px; padding:10px 12px; font-size:15px; font-weight:600; color:var(--ctg-muted); cursor:pointer; }
.ctg__tab[aria-selected="true"]{ color:var(--ctg-brand); border-bottom-color:var(--ctg-brand); }
.ctg__tab:focus-visible{ outline:3px solid var(--ctg-focus); outline-offset:2px; }
.ctg__panel[hidden]{ display:none; }

.ctg__steps{ list-style:none; margin:0 0 12px; padding:0; counter-reset:s; }
.ctg__steps li{ position:relative; padding:0 0 12px 44px; counter-increment:s; }
.ctg__steps li::before{ content:counter(s); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; background:var(--ctg-surface); border:2px solid var(--ctg-brand); color:var(--ctg-brand); font-weight:700; font-size:13px; display:grid; place-items:center; }
.ctg__steps li::after{ content:""; position:absolute; left:14px; top:32px; bottom:2px; width:2px; background:var(--ctg-line); }
.ctg__steps li:last-child::after{ display:none; }
.ctg__steps h4{ font-size:15px; font-weight:600; margin:3px 0 3px; color:var(--ctg-text); }
.ctg__steps p{ font-size:13.5px; line-height:1.55; color:var(--ctg-muted); margin:0; }

/* Diet panel: collapsible sections keep the result short on phones */
.ctg__dbox{ border:1px solid var(--ctg-line); border-radius:12px; min-width:0; margin:0 0 8px; background:var(--ctg-surface); }
.ctg__dbox > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:12px 14px; font-size:15px; font-weight:600; color:var(--ctg-brand); }
.ctg__dbox > summary::-webkit-details-marker{ display:none; }
.ctg__dbox > summary::after{ content:""; margin-left:auto; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s; }
.ctg__dbox[open] > summary::after{ transform:rotate(-135deg); }
.ctg__dbox > summary:focus-visible{ outline:3px solid var(--ctg-focus); outline-offset:2px; border-radius:12px; }
.ctg__dbox--go > summary{ color:var(--ctg-ok); }
.ctg__count{ font-size:11.5px; font-weight:600; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--ctg-tint); color:var(--ctg-brand-dark); display:inline-grid; place-items:center; }
.ctg__dbox ul{ margin:0; padding:0 14px 10px 32px; }
.ctg__dbox li{ font-size:13.5px; line-height:1.55; color:var(--ctg-text); margin-bottom:4px; }
.ctg__meal{ display:grid; grid-template-columns:100px minmax(0,1fr); gap:4px 12px; padding:0 14px 8px; margin:0; }
.ctg__meal dt{ font-size:13px; font-weight:600; color:var(--ctg-brand); }
.ctg__meal dd{ margin:0 0 6px; font-size:13.5px; line-height:1.5; color:var(--ctg-text); }

.ctg__note{ font-size:12px; line-height:1.6; color:var(--ctg-muted); border-top:1px dashed var(--ctg-line); padding-top:10px; margin:12px 0 0; }

/* Ask */
.ctg__ask{ background:var(--ctg-tint); border:1px solid var(--ctg-line); border-left:4px solid var(--ctg-brand); border-radius:14px; padding:14px 16px; margin:4px 0 16px; }
.ctg__ask--bar .ctg__ask-txt p{ margin-bottom:10px; }
.ctg__ask--no{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:10px 16px; }
.ctg__ask--no p{ margin:0; }
.ctg__ask--no .ctg__linkbtn{ padding:0; }
.ctg__ask--bar .ctg__yn .ctg__btn{ flex:1 1 0; padding-left:10px; padding-right:10px; white-space:nowrap; }
.ctg__err:empty{ display:none; }
.ctg__ask .ctg__done{ padding:8px; }
.ctg__ask h3{ font-size:18px; font-weight:600; color:var(--ctg-brand); margin:0 0 4px; }
.ctg__ask p{ font-size:14px; color:var(--ctg-muted); margin:0 0 12px; line-height:1.5; }
.ctg__yn{ display:flex; gap:10px; flex-wrap:wrap; }
.ctg__form{ margin-top:12px; display:grid; gap:12px; }
.ctg__row{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.ctg__field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:4px; color:var(--ctg-text); }
.ctg__field input[type=text], .ctg__field input[type=tel], .ctg__field select{ width:100%; height:46px; border:2px solid var(--ctg-line); border-radius:10px; padding:0 12px; font-size:15px; background:var(--ctg-surface); color:var(--ctg-text); }
.ctg__field input:focus, .ctg__field select:focus{ outline:3px solid var(--ctg-focus); border-color:var(--ctg-brand); }
.ctg__err{ color:var(--ctg-err); font-size:13px; min-height:18px; margin:0; }
.ctg__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ctg__done{ text-align:center; padding:20px 8px; }
.ctg__done h3{ font-size:20px; color:var(--ctg-ok); margin:0 0 8px; font-weight:600; }
.ctg__done p{ font-size:14.5px; color:var(--ctg-muted); line-height:1.6; margin:0; }

/* Tablet */
@media (min-width:640px){
  .ctg__ask--bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .ctg__ask--bar .ctg__ask-txt p{ margin:0; }
  .ctg__ask--bar .ctg__yn{ flex:none; }
  .ctg__ask--bar .ctg__yn .ctg__btn{ flex:none; padding-left:20px; padding-right:20px; }
  .ctg{ padding:48px 5.21vw; }
  .ctg__title{ font-size:28px; }
  .ctg__card{ padding:24px; min-height:500px; }
  /* 16 tiles (15 cancers + "Other cancers") as a 4x4 grid of row tiles */
  .ctg__tiles{ gap:8px; }
  .ctg__tile > span{ flex-direction:row; justify-content:flex-start; gap:10px; height:56px; padding:6px 10px; text-align:left; }
  .ctg__tile .ctg__ico{ width:30px; height:30px; }
  .ctg__tile b{ font-size:13px; }
  .ctg__tiles--list .ctg__tile > span{ height:50px; padding:6px 10px; gap:8px; }
  .ctg__tiles--list .ctg__tile b{ font-size:13px; }
  .ctg__opts--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ctg__opts--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ctg__meal{ grid-template-columns:120px minmax(0,1fr); }
  .ctg__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Desktop: intro + answer rail on the left, card on the right */
@media (min-width:1024px){
  /* vertical padding and type also scale with width, like the rest of the home page */
  .ctg{ padding:clamp(44px, 3.4vw, 88px) 5.21vw; }
  .ctg__wrap{ grid-template-columns:minmax(300px, 30%) minmax(0,1fr); gap:clamp(32px, 3.6vw, 96px); align-items:start; }
  .ctg__intro{ position:sticky; top:96px; }
  .ctg__title{ font-size:clamp(30px, 2.3vw, 56px); }
  .ctg__sub{ font-size:clamp(15px, 0.95vw, 22px); max-width:none; }
  .ctg__eyebrow{ font-size:clamp(12px, 0.75vw, 17px); }
  .ctg__sub{ font-size:15px; }
  .ctg__card{ padding:26px 32px; min-height:460px; }
  .ctg__card .ctg__progress, .ctg__card .ctg__stepno{ display:none; }

  .ctg__rail{ display:block; list-style:none; margin:24px 0 0; padding:0; }
  /* justify-content is set explicitly: the home page's styles.css centres every <button> (display:flex; justify-content:center) */
  .ctg__rail li > span, .ctg__rail li > button{ display:flex; justify-content:flex-start; gap:12px; align-items:flex-start; width:100%; padding:8px 0; background:none; border:0; text-align:left; font:inherit; color:inherit; }
  .ctg__rail li > button{ cursor:pointer; }
  .ctg__rail li > button:hover b{ color:var(--ctg-brand); text-decoration:underline; }
  .ctg__rail li > button:focus-visible{ outline:3px solid var(--ctg-focus); outline-offset:2px; border-radius:8px; }
  .ctg__rail-n{ flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; border:2px solid var(--ctg-line); font-size:12px; font-weight:700; color:var(--ctg-muted); background:var(--ctg-surface); }
  .ctg__rail-t b{ display:block; font-size:14px; font-weight:600; color:var(--ctg-muted); line-height:26px; }
  .ctg__rail-t small{ display:block; font-size:12.5px; color:var(--ctg-text); line-height:1.4; margin-top:-2px; }
  .ctg__rail li.is-now .ctg__rail-n{ border-color:var(--ctg-brand); background:var(--ctg-brand); color:var(--ctg-on-brand); }
  .ctg__rail li.is-now b{ color:var(--ctg-text); }
  .ctg__rail li.is-done .ctg__rail-n{ border-color:var(--ctg-brand); color:var(--ctg-brand); }
  .ctg__basis{ display:block; font-size:12px; line-height:1.5; color:var(--ctg-muted); margin:20px 0 0; padding-top:14px; border-top:1px dashed var(--ctg-line); }
}
@media (prefers-reduced-motion:reduce){ .ctg *{ transition:none !important; scroll-behavior:auto !important; } }