/* ============================================================================
   Practitioners page: bar charts, anti-VEGF comparison table, CTA sub-columns.
   Loaded on that page only -- nothing else uses these.
   ========================================================================== */

/* --- Bar charts ---------------------------------------------------------- */
.bc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-12)}
.bc-card{margin:0;display:flex;flex-direction:column;background:var(--white);border:var(--stroke-hairline) solid var(--line-soft);border-radius:12px;padding:var(--space-8)}
.bc-title{font-size:var(--size-base);font-weight:var(--weight-semibold);color:var(--ink);letter-spacing:var(--tracking-tight);margin-bottom:var(--space-8)}
.bc-grid{display:grid;grid-template-columns:46px minmax(0,1fr);row-gap:var(--space-3)}
.bc-yttl{grid-column:1/3;justify-self:start;font-size:var(--size-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-2)}
.bc-ticks{position:relative;height:240px}
.bc-ticks span{position:absolute;right:10px;transform:translateY(50%);font-size:var(--size-3xs);color:var(--ink-2);font-variant-numeric:tabular-nums}
.bc-plot{position:relative;height:250px;border-left:1px solid var(--line);border-bottom:1px solid var(--neutral-400)}
.bc-plot::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to top,var(--line-soft) 0 1px,transparent 1px 20%)}
.bc-plot::after{content:"";position:absolute;right:0;bottom:-1px;width:1px;height:8px;background:var(--neutral-800)}
.bc-bars{position:absolute;inset:0;display:flex;align-items:flex-end}
.bc-grp{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;position:relative;height:100%}
.bc-bar{width:44px;background:#D4D6D8}
.bc-bar--lds{background:var(--tsk-blue)}
.bc-bar--deep{background:#00345F}
/* Difference bracket spanning the gap between the two bars in a group. */
.bc-brk{position:absolute;width:9px;border:1px solid var(--tsk-blue);border-left:0}
.bc-brk span{position:absolute;left:15px;top:50%;transform:translateY(-50%);padding:3px 7px;background:var(--white);border:var(--stroke-hairline) solid var(--tsk-blue-100);border-radius:var(--radius-xs);font-size:var(--size-3xs);font-weight:var(--weight-medium);color:var(--text-brand);font-variant-numeric:tabular-nums;white-space:nowrap}
.bc-xlabels{display:flex;margin-left:46px;margin-top:var(--space-4)}
.bc-xlabels span{flex:1;text-align:center;padding:0 var(--space-2);font-size:var(--size-2xs);line-height:1.5;letter-spacing:0;color:var(--ink-2)}
.bc-legend{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-8);margin:auto 0 0 46px;padding-top:var(--space-8)}
.bc-legend div{display:flex;align-items:center;gap:var(--space-3);font-size:var(--size-2xs);letter-spacing:0;color:var(--ink-2)}
.bc-sw{width:10px;height:10px;border-radius:2px;background:#D4D6D8;flex:none}
.bc-sw--lds{background:var(--tsk-blue)}
.bc-sw--deep{background:#00345F}

/* --- Anti-VEGF comparison table ------------------------------------------ */
.dt-h{margin:var(--space-24) 0 var(--space-6)}
.dt-card{padding:0}
.dt-ttl{margin:0;font-size:var(--size-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--ink)}
.dt-sub{margin:4px 0 0;font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-2)}
.dt-wrap{border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);margin-top:var(--space-6)}
.dt{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.dt th,.dt td{padding:var(--space-5) var(--space-6);border-bottom:var(--stroke-hairline) solid var(--line-soft);text-align:center;vertical-align:middle}
.dt tbody tr:last-child th,.dt tbody tr:last-child td{border-bottom:0}
.dt thead th{padding-top:var(--space-6);padding-bottom:var(--space-6);border-bottom:var(--stroke-frame) solid var(--line);background:var(--tsk-blue-050);color:#000;font-size:var(--size-base);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}
.dt thead th:first-child{text-align:left;font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium)}
.dt tbody th{text-align:left;width:224px;background:var(--tsk-blue-050);color:#000;font-size:var(--size-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight)}
.dt tbody td{font-size:var(--size-sm);color:var(--neutral-700);line-height:var(--leading-normal);font-variant-numeric:tabular-nums}
.dt tbody td b{font-weight:var(--weight-medium);color:var(--ink)}
.dt tbody td span{display:block;font-size:var(--size-3xs);color:var(--ink-2);margin-top:3px}
.dt-fn{margin:var(--space-4) 0 0;font-size:var(--size-3xs);color:var(--ink-2);line-height:var(--leading-normal)}
.dt-fn b{color:var(--text-brand);font-weight:var(--weight-medium)}

/* --- Device-variable table ------------------------------------------------ */
/* The artboard styles this table entirely with inline attributes; as classes it
   can also collapse and scroll on narrow viewports. */
.vt-wrap{border:var(--stroke-hairline) solid var(--line);border-radius:12px;overflow:hidden;background:var(--white)}
.vt{width:100%;border-collapse:collapse}
.vt th{padding:var(--space-4) var(--space-6);background:var(--tsk-blue-050);color:#000;font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);text-align:left}
.vt thead th:first-child{width:220px}
.vt tbody th{padding:var(--space-5) var(--space-6);border-top:var(--stroke-hairline) solid var(--line-soft);vertical-align:top;background:var(--tsk-blue-050);color:#000;font-size:var(--size-sm);font-weight:var(--weight-medium);text-align:left;text-transform:none;letter-spacing:var(--tracking-tight);white-space:normal}
.vt td{padding:var(--space-5) var(--space-6);border-top:var(--stroke-hairline) solid var(--line-soft);vertical-align:top;font-size:var(--size-sm);color:#000;line-height:var(--leading-normal)}

/* Hub render sits alongside the table, pulled up into the section above it. */
.vt-row{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--space-16);align-items:stretch}
.vt-fig{background:var(--white);border:var(--stroke-hairline) solid var(--line-soft);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--space-8);margin-top:-100px}
.vt-fig img{max-width:100%;max-height:460px;object-fit:contain;display:block}

/* --- Split figure column (clinical problem, gauge and length) ------------- */
.split-440{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:var(--space-20);align-items:stretch}
.split-440--top{align-items:start;gap:var(--space-16);margin-top:var(--space-24)}
.fig-overlap{position:relative}
.fig-overlap img{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(-1 * var(--space-20));width:100%;max-width:440px;display:block}
.fig-boxed{width:100%;background:var(--white);border:var(--stroke-hairline) solid var(--line-soft);border-radius:12px;padding:var(--space-6);display:flex;flex-direction:column;justify-content:center;gap:var(--space-6);overflow:hidden}
.fig-boxed picture{display:block}
.fig-boxed img{width:100%;height:auto;object-fit:contain;display:block}
/* Runs off the right edge: the negative margin cancels the box padding so the
   cannulas meet the border, the way they run out of frame in the source render.
   overflow:hidden on the box clips them to the rounded corner. */
.fig-boxed .fig-bleed-right{width:86%;margin-left:auto;margin-right:calc(-1 * var(--space-6))}
/* Centred variant, for artwork that is symmetrical and reads better contained. */
.fig-boxed .fig-center{width:92%;margin-inline:auto}

/* --- CTA sub-columns ------------------------------------------------------ */
.cta-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:var(--space-10);margin:var(--space-10) 0 var(--space-2);padding-top:var(--space-8);border-top:var(--stroke-hairline) solid rgba(255,255,255,.18)}
.cta-next-c{display:flex;flex-direction:column;gap:var(--space-2)}
.cta-next-c b{font-size:var(--size-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;color:#4FA8E8;color:oklch(from var(--tsk-blue) .78 calc(c*.9) h)}
.cta-next-c .p{color:var(--white)}
.cta-next-c:first-child .p{max-width:48ch}
.cta-next-c:last-child .p{max-width:56ch}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1100px){
  .vt-row{grid-template-columns:minmax(0,1fr)}
  .vt-fig{margin-top:0;order:-1}
}
@media (max-width:900px){
  .bc-row{grid-template-columns:minmax(0,1fr)}
  .split-440,.split-440--top{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
  /* The overlapping figure only works beside a text column; stack it normally. */
  .fig-overlap{min-height:0}
  .fig-overlap img{position:static;transform:none;margin:0 auto}
  .cta-next{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
}
@media (max-width:768px){
  .dt-wrap,.vt-wrap{overflow-x:auto}
  .dt{min-width:680px}
  .vt{min-width:520px}
  .bc-bar{width:32px}
}