/* Layout ownership: viewport >=1024 has a summary column; cards use their actual width. */
.compact-header,.simple-hero,.main-calculator { max-width:1280px }
.simple-hero { margin:0 auto; padding:72px 24px 48px }
.simple-hero h1 { font-size:clamp(2.3rem,5vw,4.4rem); letter-spacing:-.065em; line-height:1.08; margin:.5rem 0 1.2rem }
.simple-hero h1 em { color:var(--primary); font-style:normal }
.simple-hero>p:not(.eyebrow) { max-width:610px; color:var(--muted); font-size:1rem; line-height:1.75; margin-bottom:24px }
.main-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr); gap:20px; align-items:start }
.main-layout>* ,.calculator-items,.substance-card,.additional-substance-grid,.field { min-width:0 }
.input-panel,.summary-panel,.metric,.totals-chart-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow) }
.input-panel,.summary-panel { padding:20px }
.summary-panel { position:sticky; top:16px }
.summary-panel h3 { font-size:1.15rem; margin:0 0 20px }
.dose-equation { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; padding:24px 0; border-block:1px solid var(--line) }
.dose-equation strong { color:var(--primary); font:500 clamp(1.5rem,2.5vw,2.6rem)/1.2 'DM Mono',monospace; letter-spacing:-.06em; overflow-wrap:anywhere }
.dose-equation span { color:var(--muted) }
.u100 { display:grid; gap:8px; padding:20px 0 12px }
.u100 span,.summary-note { color:var(--muted); font-size:.8rem; line-height:1.6 }
.u100 b { font:500 .9rem/1.5 'DM Mono',monospace; overflow-wrap:anywhere }
.summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px }
.summary-grid>div { border-top:1px solid var(--line); padding-top:12px; min-width:0 }
.summary-grid span,.metric>span { display:block; color:var(--muted); font-size:.75rem }
.summary-grid b { display:block; margin-top:4px; font:500 .9rem/1.5 'DM Mono',monospace; overflow-wrap:anywhere }
.calculator-items { display:grid; gap:20px }
.additional-substance { container:substance / inline-size; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--bg) }
.additional-substance-head { display:flex; align-items:center; justify-content:space-between; min-height:44px; margin-bottom:12px }
.additional-substance-head strong { font-size:.9rem }
.additional-substance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); align-items:start; gap:16px 12px }
.additional-substance-grid .field { display:flex; flex-direction:column; gap:8px; min-width:0; font-size:.85rem; font-weight:700 }
.field-label { display:block; min-height:1.4em; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4 }
.additional-substance-grid .field>input,.cycle-date-value { width:100%; min-width:0; height:var(--control-height); min-height:var(--control-height); padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit }
.field input[type=number] { appearance:textfield; -moz-appearance:textfield }
.field input[type=number]::-webkit-inner-spin-button,.field input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0 }
.date-group { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,9em),1fr)); font-size:.8rem; gap:16px 12px; min-width:0 }
.adjustments-list { grid-column:1/-1; min-width:0 }
.adjustment-group { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); font-size:.8rem; gap:16px 12px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--surface) 58%,transparent) }
.adjustment-group+.adjustment-group { margin-top:10px }
.adjustment-group { grid-template-columns:repeat(3,minmax(0,1fr)); }
.adjustment-group>.adjustment-field { grid-column:1/-1 }
.adjustment-group[data-start-mode="date"] .date-field { grid-column:span 2 }
.remove-adjustment { position:absolute; top:8px; right:8px; z-index:1; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--primary); font-size:1.1rem; cursor:pointer }
.remove-adjustment:hover,.remove-adjustment:focus-visible { background:var(--primary-muted); border-color:var(--primary) }
.add-adjustment { grid-column:1/-1; justify-self:start; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--primary); font:800 .75rem Inter,sans-serif; cursor:pointer }
.add-adjustment:hover,.add-adjustment:focus-visible { border-color:var(--primary); background:var(--primary-muted) }
.adjustment-control-row { display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; gap:12px; min-width:0; min-height:var(--control-height) }
.range-row { display:grid; grid-template-columns:minmax(0,1fr) 76px; align-items:center; gap:12px; min-width:0 }
.adjustment-number { display:flex; align-items:center; min-width:0; height:var(--control-height); padding:0 6px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--primary) }
.adjustment-number input { width:100%; min-width:0; height:100%; padding:0; border:0; background:transparent; color:var(--primary); font:700 .9rem 'DM Mono',monospace; text-align:right; box-shadow:none; cursor:text }
.adjustment-number input:focus-visible { outline:none }
.adjustment-number:focus-within { outline:2px solid var(--primary); outline-offset:2px }
.adjustment-number span { font:700 .8rem 'DM Mono',monospace }
.adjustment-absolute { display:flex; align-items:center; gap:8px; min-width:0 }
.adjustment-absolute input { width:100%; min-width:0; height:var(--control-height) }
.adjustment-absolute>span { color:var(--primary) }
.field input:focus,.select-trigger:focus-visible { border-color:var(--line) }
.cycle-date-value { display:flex; align-items:center }
.cycle-date b { font:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.model-detail-row { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; gap:12px; margin-top:16px }
.input-help { margin:0; color:var(--muted); font-size:.8rem; line-height:1.6 }
.context-help,.help-button,.remove-item { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--primary); cursor:pointer }
.context-help:hover,.help-button:hover,.remove-item:hover { background:var(--primary-muted) }
.help-button svg,.context-help svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.extra-result { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px }
.extra-result>div { padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); min-width:0 }
.extra-result span { display:block; color:var(--muted); font-size:.72rem }
.extra-result b { display:block; margin-top:6px; font:500 .8rem/1.5 'DM Mono',monospace; overflow-wrap:anywhere }
.extra-result .syringe-split { grid-column:1/-1; background:var(--primary-muted) }
.extra-result small { display:block; margin-top:8px; font-size:.72rem; line-height:1.5 }
.extra-result>span,.validation { color:var(--danger); font-size:.8rem; line-height:1.5 }
.validation:empty { display:none }
.form-group { margin-top:20px }
.group-label { display:block; font:500 .7rem 'DM Mono',monospace; color:var(--muted); letter-spacing:.1em; margin-bottom:12px }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:20px }
.metric { padding:20px; min-width:0 }
.metric strong { display:block; margin:8px 0; color:var(--primary); font:500 1.3rem/1.4 'DM Mono',monospace; overflow-wrap:anywhere }
.metric small { font-size:.75rem; line-height:1.5 }
.totals-chart-card { position:relative; margin-top:20px; padding:24px; min-width:0 }
.totals-chart-head h3 { margin:0; font-size:1.2rem }
.chart-options { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line) }
.chart-options .field { width:180px; flex:none }
.chart-options p { max-width:540px; margin:0; font-size:.8rem; color:var(--muted); line-height:1.6 }
.totals-chart-wrap { position:relative; margin-top:24px; min-width:0; width:100% }
.totals-chart-wrap svg { display:block; width:100%; min-width:0; height:auto; overflow:visible; touch-action:pan-y }
.totals-chart-legend { justify-content:center; flex-wrap:wrap; gap:16px; margin-top:16px }
.totals-chart-legend span { font-size:.8rem }
.legend-unit { flex-basis:100%; text-align:center; color:var(--muted) }
.totals-chart-card .is-muted { opacity:.15 }
.totals-chart-card .is-focused { opacity:1 }
.chart-tooltip { max-width:min(360px,calc(100vw - 24px)); font-size:.8rem; overflow-wrap:anywhere }
.chart-tooltip small { display:block; color:var(--muted); margin:2px 0 10px 16px; font-size:.7rem }
.medical-disclaimer { margin-top:20px; padding:16px; border:1px solid var(--line); border-radius:10px; color:var(--muted); font-size:.8rem; line-height:1.6 }
.help-dialog { width:min(820px,calc(100% - 32px)); max-height:90dvh; padding:0; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); box-shadow:0 24px 80px #0008 }
.help-dialog::backdrop { background:#0009; backdrop-filter:blur(3px) }
.dialog-head { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:20px; border-bottom:1px solid var(--line); background:var(--surface) }
.dialog-head h2 { margin:0 }
.dialog-close { width:44px; height:44px; min-width:44px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--text); font-size:1.4rem; cursor:pointer }
.help-content { padding:0 24px 24px }
.export-open { width:100%; margin-top:20px }
.export-dialog { width:min(900px,calc(100% - 32px)); max-height:90dvh; padding:0; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); box-shadow:0 24px 80px #0008 }
.export-dialog::backdrop { background:#0009; backdrop-filter:blur(3px) }
.export-content { display:grid; gap:18px; padding:20px 24px 24px; overflow:auto }
.export-controls { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:12px }
.export-controls .field { display:flex; flex-direction:column; gap:8px; min-width:0; font-size:.8rem; font-weight:700 }
.export-controls input,.export-controls select { width:100%; min-width:0; height:var(--control-height); padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit }
.export-sections { border:1px solid var(--line); border-radius:10px; padding:14px; margin:0; min-width:0 }
.export-sections legend { padding:0 6px; color:var(--muted); font-size:.75rem; font-weight:800 }
.export-section-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px }
.export-section-option { display:flex; align-items:flex-start; gap:8px; min-width:0; color:var(--text); font-size:.78rem; line-height:1.35 }
.export-section-option input { flex:none; margin-top:2px; accent-color:var(--primary) }
.export-section-option.is-disabled { color:var(--muted); opacity:.65 }
.export-section-option small { display:block; color:var(--muted); font-size:.68rem }
.export-preview-wrap { display:grid; gap:8px; min-width:0 }
.export-preview { min-height:130px; max-height:220px; overflow:auto; margin:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:500 .72rem/1.55 'DM Mono',monospace; white-space:pre-wrap; overflow-wrap:anywhere }
.export-status { min-height:1.3em; margin:0; color:var(--primary); font-size:.78rem }
.export-actions { display:flex; flex-wrap:wrap; gap:10px }
.export-privacy { margin:0; color:var(--muted); font-size:.72rem; line-height:1.5 }
#export-print-root { display:none }
.export-print-document { max-width:780px; margin:0 auto; color:#111; font:11pt/1.45 Arial,sans-serif }
.export-print-document h1 { font-size:22pt; margin:.2rem 0 .5rem }
.export-print-document h2 { font-size:15pt; margin:1.4rem 0 .5rem }
.export-print-document p { margin:.25rem 0 }
.export-print-block { break-inside:avoid; margin:1rem 0 }
.export-print-document table { width:100%; border-collapse:collapse; font-size:9pt }
.export-print-document th,.export-print-document td { padding:5px 6px; border:1px solid #bbb; text-align:left; vertical-align:top; overflow-wrap:anywhere }
.export-print-document th { background:#eee; font-weight:700 }
.export-print-document tr { break-inside:avoid }
.export-print-document svg { display:block; width:100%; height:auto; max-height:360px }
.export-print-document footer { border-top:1px solid #bbb; margin-top:2rem; padding-top:.5rem; font-size:9pt }
.help-content section { padding:24px 0; border-bottom:1px solid var(--line); scroll-margin-top:112px }
.help-content section:focus { outline:none }
.help-content h3 { margin:0 0 16px; font-size:1.05rem }
.help-content dl { display:grid; grid-template-columns:minmax(110px,1fr) 3fr; gap:12px 24px; margin:0 }
.help-content dt { font-weight:800; font-size:.85rem }
.help-content dd { margin:0; color:var(--muted); font-size:.85rem; line-height:1.65 }
.help-note,.model-example p { color:var(--muted); font-size:.8rem; line-height:1.6 }
.model-example { margin-top:20px; padding:16px; border-radius:8px; background:var(--bg) }
[hidden] { display:none!important }
@container substance (min-width:600px) { .extra-result { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media(max-width:1023px) { .main-layout { grid-template-columns:1fr } .summary-panel { position:static } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:650px) {
 .simple-hero { padding:48px 16px 24px }
 .section.main-calculator { padding:32px 12px }
 .input-panel { border:0; padding:0; background:transparent; box-shadow:none }
 .additional-substance { padding:12px }
 .additional-substance-grid { grid-template-columns:1fr }
 .additional-substance-grid .field { font-size:.875rem }
 .date-group,.adjustment-group { gap:16px 10px }
 .adjustment-group { grid-template-columns:1fr }
 .adjustment-group { grid-template-columns:1fr }
 .date-group .field,.adjustment-group>.field:not(.adjustment-field) { font-size:.8rem }
 .adjustment-control-row { grid-template-columns:122px minmax(0,1fr); gap:8px }
 .range-row { grid-template-columns:minmax(0,1fr) 64px; gap:8px }
 .cycle-date-value { padding:0 8px }
 .extra-result { grid-template-columns:1fr }
 .summary-panel,.metric { padding:16px }
 .metrics { grid-template-columns:1fr }
 .totals-chart-card { padding:12px }
 .chart-options { flex-direction:column; align-items:stretch; gap:16px }
 .chart-options .field { width:100% }
 .totals-chart-legend { gap:12px }
 .help-dialog { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; border:0 }
 .export-dialog { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; border:0 }
 .dialog-head { padding:16px }
 .help-content { padding:0 16px 16px }
 .export-content { padding:16px }
 .export-controls,.export-section-options { grid-template-columns:1fr }
 .help-content dl { grid-template-columns:1fr; gap:4px }
 .help-content dd { margin-bottom:12px }
}
@media print {
 body > *:not(#export-print-root) { display:none!important }
 #export-print-root { display:block!important; visibility:visible!important; padding:0 }
 #export-print-root[data-ready="true"] { display:block!important }
 @page { size:A4; margin:16mm }
}
.adjustment-group{grid-template-columns:repeat(3,minmax(0,1fr))}
.adjustment-group>.adjustment-field{grid-column:1/-1}
@media(max-width:650px){.adjustment-group{grid-template-columns:1fr}.adjustment-group>.adjustment-field{grid-column:1/-1}}
@media(max-width:650px){.adjustment-group[data-start-mode="date"] .date-field{grid-column:auto}}