/* Shared treatment/comparison components. Opt in on body via data-treatment-components.
   :where() adds no specificity; keep this link after site.css and before page styles.
   Local clinical content, chart geometry and deliberate table differences stay on the page. */

/* ---- table ---- */
:where([data-treatment-components~="table"]) .ptable td.num{white-space: normal; font-weight: 400; color: var(--ink-soft);}
:where([data-treatment-components~="table"]) .ptable td.loc{white-space: normal; font-weight: 500; color: var(--ink); min-width: 210px;}
:where([data-treatment-components~="table"]) .ptable td.loc span{display: block; font-weight: 400; color: var(--ink-soft); font-size: 14px; margin-top: 5px; letter-spacing: 0px;}

/* ---- table-wrap ---- */
:where([data-treatment-components~="table-wrap"]) .ptable td:first-child.wrapok{white-space: normal;}

/* ---- table-two ---- */
:where([data-treatment-components~="table-two"]) .ptable.two{table-layout: fixed;}
:where([data-treatment-components~="table-two"]) .ptable.two th,
:where([data-treatment-components~="table-two"]) .ptable.two td{width: 38%;}
:where([data-treatment-components~="table-two"]) .ptable.two th:first-child,
:where([data-treatment-components~="table-two"]) .ptable.two td:first-child{width: 24%;}

/* ---- table-four ---- */
:where([data-treatment-components~="table-four"]) .ptable.four{table-layout: fixed; min-width: 820px;}
:where([data-treatment-components~="table-four"]) .ptable.four th,
:where([data-treatment-components~="table-four"]) .ptable.four td{width: 28%;}
:where([data-treatment-components~="table-four"]) .ptable.four th:first-child,
:where([data-treatment-components~="table-four"]) .ptable.four td:first-child{width: 16%;}

/* ---- table-five ---- */
:where([data-treatment-components~="table-five"]) .ptable.five{table-layout: fixed; min-width: 900px;}
:where([data-treatment-components~="table-five"]) .ptable.five th,
:where([data-treatment-components~="table-five"]) .ptable.five td{width: 21%;}
:where([data-treatment-components~="table-five"]) .ptable.five th:first-child,
:where([data-treatment-components~="table-five"]) .ptable.five td:first-child{width: 16%;}

/* ---- figures ---- */
:where([data-treatment-components~="figures"]) .figcap{font-size: 13px; color: var(--ink-soft); margin-top: 14px; max-width: 70ch;}
:where([data-treatment-components~="figures"]) .legend{display: flex; gap: 22px; align-items: center; margin-bottom: 6px; font-size: 13px; color: var(--ink-soft);}
:where([data-treatment-components~="figures"]) .legend i{display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px;}

/* ---- figure-labels ---- */
:where([data-treatment-components~="figure-labels"]) .figtitle{font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.35; color: var(--ink); margin: 0px 0px 4px; max-width: 70ch;}
:where([data-treatment-components~="figure-labels"]) .figsub{font-size: 13px; color: var(--ink-soft); margin: 0px 0px 16px; max-width: 70ch;}
:where([data-treatment-components~="figure-labels"]) .figtitle + .legend,
:where([data-treatment-components~="figure-labels"]) .figsub + .legend{margin-top: 2px;}

/* ---- poster ---- */
:where([data-treatment-components~="poster"]) .poster .figcap{margin-top: 14px;}

/* ---- ledger ---- */
:where([data-treatment-components~="ledger"]) .ledger .ptable{min-width: 0px; table-layout: fixed;}
:where([data-treatment-components~="ledger"]) .ledger .ptable th{width: auto;}
:where([data-treatment-components~="ledger"]) .ledger .ptable th:first-child,
:where([data-treatment-components~="ledger"]) .ledger .ptable td.loc{width: 22%;}
:where([data-treatment-components~="ledger"]) .ledger .ptable td{white-space: normal; font-weight: 400; color: var(--ink-soft);}
:where([data-treatment-components~="ledger"]) .ledger .ptable td.loc{font-weight: 500; color: var(--ink);}
:where([data-treatment-components~="ledger"]) .ledger.who .ptable th:first-child,
:where([data-treatment-components~="ledger"]) .ledger.who .ptable td.loc{width: 24%;}
@media (max-width:600px){
:where([data-treatment-components~="ledger"]) .ledger{overflow: visible; margin-top: 24px;}
:where([data-treatment-components~="ledger"]) .ledger .ptable,
:where([data-treatment-components~="ledger"]) .ledger .ptable tbody,
:where([data-treatment-components~="ledger"]) .ledger .ptable tr,
:where([data-treatment-components~="ledger"]) .ledger .ptable td{display: block; width: auto;}
:where([data-treatment-components~="ledger"]) .ledger .ptable thead{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;}
:where([data-treatment-components~="ledger"]) .ledger .ptable tr{padding: 18px 0px 6px; border-bottom: 1px solid var(--border);}
:where([data-treatment-components~="ledger"]) .ledger .ptable tr:last-child{border-bottom: none;}
:where([data-treatment-components~="ledger"]) .ledger .ptable td{padding: 0px 0px 14px; border: 0px;}
:where([data-treatment-components~="ledger"]) .ledger .ptable td.loc{font-family: var(--display); font-size: 18px; letter-spacing: -0.4px; line-height: 1.35; padding-bottom: 12px;}
:where([data-treatment-components~="ledger"]) .ledger .ptable td[data-col]::before{content: attr(data-col); display: block; font-family: var(--kicker); font-size: 11px; font-weight: 600; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px;}
:where([data-treatment-components~="ledger"]) .ledger.pair .ptable tr{display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px;}
:where([data-treatment-components~="ledger"]) .ledger.pair .ptable td.loc{grid-column: 1 / -1;}
}

/* ---- technique-captions ---- */
:where([data-treatment-components~="technique-captions"]) .fig-fsn figcaption{margin-top:11px;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}

/* ---- photo-captions ---- */
:where([data-treatment-components~="photo-captions"]) .photo figcaption{font-size:13px;line-height:1.6;color:var(--ink-soft);margin-top:10px}

/* ---- Responsive SVG plot display; geometry and content stay page-local ---- */
:where([data-treatment-components~="responsive-plots"]) .chart{width:100%;height:auto;display:block;overflow:visible}
:where([data-treatment-components~="responsive-plots"]) .fig-m{display:none}
@media(max-width:600px){
  :where([data-treatment-components~="responsive-plots"]) .fig-d{display:none}
  :where([data-treatment-components~="responsive-plots"]) .fig-m{display:block}
}