/* Condition pages in the article frame (Cataract and Retina menu pages).
   Scoped to html.cp. Variant classes: html.cp-clean (hairline sections) | html.cp-panels (tinted rounded sections). */

html.cp {
  --cp-ink: #183d69;
  --cp-ink-2: #244c66;
  --cp-muted: #425c72;
  --cp-line: rgba(24, 61, 105, .13);
  --cp-border: rgba(24, 61, 105, .16);
  --cp-pale: #fbfaf6;
  --cp-rail: #fbfaf6;
  --cp-ivory: #f6f5ef;
  --cp-warm: #f0e6da;
  --cp-wide: min(1560px, calc(100% - 64px));   /* page container: contents box near the left edge */
  --cp-text: 880px;                              /* longest line of running text */
}

/* ---- head: article-style title block -------------------------------------- */
html.cp body #main section.cp-head { width: var(--cp-wide) !important; max-width: none !important; margin: 0 auto !important; padding: 44px 0 0 !important; box-sizing: border-box; background: none !important; }
html.cp body #main .cp-head > * { max-width: none; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }
html.cp body #main .cp-head > .intro { padding: 0 !important; }
html.cp body #main .cp-head > .opening-gallery, html.cp body #main .cp-head > .opening-grid { max-width: 1260px; margin-top: 28px; }
html.cp body #main .cp-head > figure.patient-figure { max-width: 1000px; }
html.cp .cp-head h1 { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.1; font-weight: 650; max-width: none; margin: 0 0 18px; text-wrap: balance; }
html.cp .cp-head .lead { font-size: 19px; line-height: 1.6; font-weight: 400; max-width: 62ch; margin: 0; }

/* ---- frame: rail + reading column ------------------------------------------ */
html.cp .cp-layout { width: var(--cp-wide); margin: 36px auto 72px; display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 40px; align-items: start; }
html.cp .cp-layout .ar-contents { position: sticky; top: 104px; margin: 0; }
html.cp .ar-contents-fold { background: var(--cp-rail); border: 1px solid rgba(21, 58, 88, .1); border-radius: 18px; padding: 14px 14px 10px; }
html.cp .ar-contents-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font: 600 14px/20px Manrope, sans-serif; color: #173e59; padding: 4px 2px; list-style: none; pointer-events: none; }
html.cp .ar-contents-fold > summary::-webkit-details-marker { display: none; }
html.cp .ar-contents-fold > summary::marker { content: ""; }
html.cp .ar-contents-links { display: grid; gap: 2px; margin-top: 8px; }
html.cp .ar-contents-links a { display: block; padding: 8px 9px; border-radius: 9px; color: var(--cp-ink-2); font: 600 13px/19px Manrope, sans-serif; text-decoration: none; }
html.cp .ar-contents-links a:hover { background: rgba(255,253,248,.92); }
html.cp .ar-contents-links a[aria-current="location"] { background: #173e59; color: #fff; }
html.cp .cp-body { min-width: 0; max-width: none; }

/* ---- sections: one rhythm, one type scale ---------------------------------- */
html.cp body #main #cp-body > section.cp-sec { display: block !important; width: auto !important; max-width: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; scroll-margin-top: 110px; }
html.cp body #main #cp-body > section.cp-sec + section.cp-sec { margin-top: 34px !important; padding-top: 34px !important; border-top: 1px solid var(--cp-line) !important; }
html.cp body #main #cp-body > section.cp-sec > .band-inner { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; columns: auto !important; column-count: 1 !important; }
html.cp body #main #cp-body .section-top { display: block !important; margin: 0 !important; padding: 0 !important; }
html.cp body #main #cp-body h2 { font-size: 28px !important; line-height: 1.25 !important; font-weight: 650 !important; margin: 0 0 16px !important; max-width: none !important; text-wrap: balance; }
html.cp body #main #cp-body h3 { font-size: 19px; line-height: 1.4; font-weight: 650; margin: 0 0 8px; }
html.cp body #main #cp-body p, html.cp body #main #cp-body li { font-size: 18px; line-height: 1.6; max-width: var(--cp-text) !important; }
html.cp body #main #cp-body p { margin: 0 0 16px; }
html.cp body #main #cp-body figcaption, html.cp body #main #cp-body figcaption p { font-size: 15px; line-height: 1.55; }
html.cp body #main #cp-body > section.cp-sec > .band-inner > *:last-child { margin-bottom: 0; }

/* ---- shared component treatment: pale panel with a full subtle border ------- */
html.cp body #main #cp-body .matt-note,
html.cp body #main #cp-body .compare-text,
html.cp body #main #cp-body .tech-block,
html.cp body #main #cp-body .pe-note,
html.cp body #main #cp-body .laser-selection > div,
html.cp body #main #cp-body .floater-options article,
html.cp body #main #cp-body .article-download {
  background: var(--cp-pale) !important; border: 1px solid var(--cp-border) !important; border-radius: 16px !important; padding: 22px 24px !important; box-shadow: none !important;
}
html.cp .cp-body .split-content { display: block; }
html.cp .cp-body .split-content > * + * { margin-top: 18px; }
html.cp .cp-body .compare-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }

/* ---- reading block ----------------------------------------------------------- */
html.cp .cp-read-links { display: flex; flex-wrap: wrap; gap: 10px; }
html.cp .cp-read-links .pill { margin: 0; }

/* ---- variants ------------------------------------------------------------------ */
html.cp.cp-panels body #main #cp-body > section.cp-sec { border: 1px solid var(--cp-border) !important; border-radius: 20px !important; padding: 30px !important; }
html.cp.cp-panels body #main #cp-body > section.cp-sec + section.cp-sec { margin-top: 22px !important; padding-top: 30px !important; border: 1px solid var(--cp-border) !important; }
html.cp.cp-panels body #main #cp-body > section.cp-sec.pale { background: var(--cp-pale) !important; }
html.cp.cp-panels body #main #cp-body > section.cp-sec.warm-paper { background: var(--cp-warm) !important; }
html.cp.cp-panels body #main #cp-body > section.cp-sec.blue { background: #234d75 !important; }

/* ---- phones and tablets --------------------------------------------------------- */
@media (max-width: 1059px) {
  html.cp .ar-contents-fold > summary::after { content: "+"; font-size: 22px; line-height: 1; font-weight: 500; }
  html.cp .ar-contents-fold[open] > summary::after { content: "\2212"; }
  html.cp .cp-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
  html.cp .cp-layout .ar-contents { position: static; }
  html.cp .ar-contents-fold > summary { pointer-events: auto; cursor: pointer; min-height: 44px; }
  html.cp .ar-contents-links a { font-size: 16px; line-height: 1.5; min-height: 44px; box-sizing: border-box; padding: 9px 10px; }
}
@media (max-width: 640px) {
  html.cp body #main section.cp-head { padding-top: 24px !important; }
  html.cp .cp-body h2 { font-size: 24px; }
  html.cp-panels .cp-body > section.cp-sec { padding: 22px 18px; }
}


/* ==== batch 2: components inside the reading column ===================================== */
/* text fills the column (legacy rules capped paragraphs at 55-72ch inside wider bands) */
html.cp body #main #cp-body .retina-reading, html.cp body #main #cp-body .reading-paragraph { max-width: none !important; }
/* boxes fill the column (legacy rules capped several at 790-860 px) */
html.cp body #main #cp-body :is(.matt-note, .compare-text, .tech-block, .pe-note, .laser-selection, .floater-options, .article-download, .pe-grid, .tech-split, .vr-panels, .vr-row, .condition-grid, .topic-rows, .video-feature, .erm-decisions, .ga-row, .da-risk, .acc, .compare-grid, .related-videos) { max-width: none !important; }

/* urgent / feature bands become one navy panel */
html.cp body #main #cp-body > section.cp-sec.blue { background: #234d75 !important; color: #faf7ef; border: 0 !important; border-radius: 18px; padding: 28px 30px !important; margin-top: 34px; }
html.cp body #main #cp-body > section.cp-sec.blue:first-child { margin-top: 0; }
html.cp body #main #cp-body > section.cp-sec.blue + section.cp-sec { border-top: 0; padding-top: 0; margin-top: 34px; }
html.cp body #main #cp-body .urgent-compact { display: flex !important; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
html.cp body #main #cp-body .urgent-compact > div:first-child { flex: 1 1 380px; }
html.cp body #main #cp-body .urgent-compact h2 { margin-bottom: 10px; max-width: none !important; }

/* card grids: two across, an odd last card spans the row; single column on phones (legacy rules) */
@media (min-width: 761px) {
html.cp body #main #cp-body .pe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
html.cp body #main #cp-body .pe-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
html.cp body #main #cp-body .floater-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
html.cp body #main #cp-body .pe-grid > * { background: var(--cp-pale) !important; border: 1px solid var(--cp-border) !important; border-radius: 16px !important; padding: 22px 24px !important; box-shadow: none !important; }
html.cp body #main #cp-body .floater-options article { padding: 20px; }

/* tables scroll inside their own box rather than pushing the page wide */
html.cp body #main #cp-body :has(> table) { overflow-x: auto; max-width: 100%; }

/* lists */
html.cp body #main #cp-body .ask-list { columns: 1 !important; column-count: 1 !important; }

/* videos: player on top, the other videos as a row you can scroll */
html.cp body #main #cp-body #related-videos .related-videos.video-boxes { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; max-width: none !important; }
@media (min-width: 761px) {
html.cp body #main #cp-body #related-videos .related-videos.video-boxes:has(> .vid-box + .vid-box) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; align-items: start !important; }
}
html.cp body #main #cp-body #related-videos .related-videos.video-boxes > div.vid-box { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; align-content: start; min-width: 0; max-width: none !important; padding: 0 !important; border: 0 !important; background: none !important; }
html.cp body #main #cp-body #related-videos .related-videos.video-boxes > div.vid-box.vid-playlist { grid-template-columns: minmax(0, 1fr) !important; }
html.cp body #main #cp-body #related-videos .related-videos.video-boxes > div.vid-box > * { grid-column: 1 / -1 !important; grid-row: auto !important; max-width: none !important; }
html.cp body #main #cp-body #related-videos .related-videos.video-boxes > div.vid-box > h3, html.cp body #main #cp-body #related-videos .related-videos.video-boxes > div.vid-box > p { margin: 0; }
html.cp body #main #cp-body #related-videos .related-videos.video-boxes > div.vid-box.vid-playlist > .yt-list { grid-column: 1 !important; grid-row: auto !important; display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-auto-columns: minmax(150px, 34%) !important; gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important; max-height: none !important; contain: none !important; align-self: auto !important; padding: 2px 2px 10px; scroll-snap-type: x mandatory; }
html.cp body #main #cp-body #related-videos .vid-box .yt-stage, html.cp body #main #cp-body #related-videos .vid-box.vid-playlist > .yt-stage { grid-column: 1 !important; grid-row: auto !important; max-width: 100% !important; }
html.cp body #main #cp-body #related-videos .yt-list li { scroll-snap-align: start; min-width: 0; }
html.cp body #main #cp-body #related-videos .related-videos.video-boxes > div.vid-box.vid-playlist > .yt-link, html.cp body #main #cp-body #related-videos .related-videos.video-boxes > div.vid-box > .yt-link { grid-column: 1 !important; grid-row: auto !important; justify-self: start !important; width: auto !important; }

/* reading block */
html.cp .cp-read .ar-inline-read { margin-bottom: 14px; }

/* ERM opening: heading and text share one column inside the reading column */
html.cp body #main #cp-body .erm-heading { display: block !important; }
html.cp body #main #cp-body .erm-heading > * { max-width: none !important; }

/* keyboard focus and no waiting-for-scroll text (same standard as the articles) */
html.cp .ar-contents-links a:focus-visible, html.cp .ar-contents-fold > summary:focus-visible { outline: 2px solid #183d69; outline-offset: 2px; }
html.cp .cp-head .site-reveal-pending, html.cp .cp-body .site-reveal-pending, html.cp .ar-contents .site-reveal-pending { opacity: 1 !important; transform: none !important; filter: none !important; }

/* Option B on tablets and phones: panels use the full screen width, so text is as wide as in Option A */
@media (max-width: 760px) {
  html.cp.cp-panels body #main #cp-body > section.cp-sec,
  html.cp.cp-panels body #main #cp-body > section.cp-sec + section.cp-sec {
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
    border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important;
    padding: 24px 16px !important; margin-top: 12px !important;
  }
  html.cp.cp-panels body #main #cp-body > section.cp-sec:first-child { margin-top: 0 !important; }
  html.cp.cp-panels body #main #cp-body .matt-note, html.cp.cp-panels body #main #cp-body .compare-text,
  html.cp.cp-panels body #main #cp-body .tech-block, html.cp.cp-panels body #main #cp-body .pe-note,
  html.cp.cp-panels body #main #cp-body .laser-selection > div, html.cp.cp-panels body #main #cp-body .floater-options article,
  html.cp.cp-panels body #main #cp-body .article-download, html.cp.cp-panels body #main #cp-body .pe-grid > * {
    padding: 16px 14px !important;
  }
}

/* ---- width budget: keep gutters small so the text gets the room ---------------------------- */
@media (max-width: 1059px) {
  html.cp { --cp-wide: calc(100% - 40px); }
}
@media (max-width: 760px) {
  html.cp { --cp-wide: calc(100% - 24px); }
  html.cp.cp-panels body #main #cp-body > section.cp-sec,
  html.cp.cp-panels body #main #cp-body > section.cp-sec + section.cp-sec { padding: 22px 14px !important; }
  html.cp body #main #cp-body .matt-note, html.cp body #main #cp-body .compare-text, html.cp body #main #cp-body .tech-block,
  html.cp body #main #cp-body .pe-note, html.cp body #main #cp-body .laser-selection > div, html.cp body #main #cp-body .floater-options article,
  html.cp body #main #cp-body .article-download, html.cp body #main #cp-body .pe-grid > * { padding: 14px 12px !important; }
}