/* Synthetic HPLC illustration, using the TEM page's visual vocabulary. */
.hplc-page .detail { max-width: none; }
.hplc-overview { margin-top: 22px; }
.hplc-figure { margin: 26px 0; }
.hplc-figure > figcaption { margin-top: 18px; color:var(--prose); font: calc(13px + var(--prose-size-increase))/1.7 var(--font-body); }
.hplc-demo { --hc-accent: #6cd4c8; --hc-amber: #f3b887; font-family: var(--font-ui); color: #e8e4dd; }
.hplc-demo [hidden] { display: none !important; }
.hc-notice { margin: 0 0 18px; border-left: 2px solid var(--hc-accent); padding: 9px 12px; background: #111b1b; color: #c4d3ce; font: 12px/1.6 var(--font-ui); }
.hc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hc-presets button { min-height: 44px; padding: 9px 13px; border: 1px solid #344642; border-radius: 5px; background: #111919; color: #d9e1df; cursor: pointer; font: 13px/1.4 var(--font-ui); }
.hc-presets button[aria-pressed="true"] { color: var(--hc-accent); border-color: var(--hc-accent); background: #142e2a; }
.hc-presets button:hover { background: #1a302b; }
.hc-options { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.hc-options label { display: flex; align-items: center; gap: 9px; min-height: 44px; font: 12px/1.5 var(--font-ui); color: #c8d2cf; cursor: pointer; }
.hc-options label:has(input:disabled) { color: #8f9e99; cursor: default; }
.hc-options input { margin: 0; width: 17px; height: 17px; accent-color: var(--hc-accent); }
.hc-presets button:focus-visible, .hc-options input:focus-visible, .hplc-method summary:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.hc-control-hint { margin: 8px 0 22px; color:var(--prose); font: calc(12px + var(--prose-size-increase))/1.65 var(--font-body); }
.hc-plots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hc-panel { min-width: 0; }
.hc-panel h3 { margin: 0 0 12px; font: 500 14px/1.5 var(--font-ui); }
.hc-panel h3 span { margin-right: 7px; color: var(--hc-accent); font: 12px ui-monospace, monospace; }
.hc-panel svg { display: block; width: 100%; height: auto; border: 1px solid #283936; background: #0a1211; border-radius: 5px; font-family: var(--font-ui); }
.hc-axis { stroke: #718780; fill: none; }
.hc-grid { stroke: #263a34; stroke-width: 1; }
.hc-tick { fill: #b5c6bf; font-size: 14px; }
.hc-axis-label { fill: #d6e0dc; font-size: 14px; }
.hc-window { fill: #f3b8870d; }
.hc-area { fill: #f3b88735; }
.hc-signal { stroke: #6cd4c8; stroke-width: 2.7; fill: none; }
.hc-bound { stroke: #f3b887; stroke-width: 1.2; stroke-dasharray: 4 4; }
.hc-reference-line { stroke: #c0d7cf; stroke-width: 1.3; stroke-dasharray: 1 6; }
.hc-target { stroke: #fff; stroke-width: 1.7; stroke-dasharray: 5 4; fill: none; }
.hc-interferent { stroke: #f3b887; stroke-width: 1.7; stroke-dasharray: 5 4; fill: none; }
.hc-cal-range { fill: #6cd4c80b; }
.hc-standard { fill: #0a1211; stroke: #6cd4c8; stroke-width: 2; }
.hc-guide { stroke: #f3b887; stroke-width: 1.6; stroke-dasharray: 5 4; fill: none; }
.hc-extrapolation { stroke: #8fa69d; stroke-width: 1.5; stroke-dasharray: 3 5; fill: none; }
.hc-estimate { fill: #f3b887; stroke: #0a1211; stroke-width: 1.5; }
.hc-legend { margin: 10px 0 0; color: #aebeb7; font: 11px/1.7 var(--font-ui); }
.hc-key { display: inline-flex; align-items: center; gap: 6px; margin-right: 13px; }
.hc-key::before { content: ''; width: 15px; height: 2px; background: var(--hc-accent); }
.hc-key-reference::before { height: 0; background: transparent; border-top: 2px dotted #c0d7cf; }
.hc-reference { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; color: #b5c6bf; font: 11px/1.6 var(--font-ui); }
.hc-reference strong { font-weight: 500; color: #d6e0dc; }
.hc-key-window::before { height: 9px; background: #f3b88735; border: 1px solid #f3b887; }
.hc-key-estimate::before { height: 7px; width: 7px; border-radius: 50%; background: var(--hc-amber); }
#hplc-component-key { display: block; color: #d9e1df; margin-top: 6px; }
.hc-values { display: flex; flex-wrap: wrap; gap: 18px 38px; padding-top: 20px; margin-top: 22px; }
.hc-values span { display: block; font-size: 12px; color: #b1c0bd; }
.hc-values strong { display: block; font-size: 27px; line-height: 1.4; font-weight: 500; color: var(--hc-accent); font-variant-numeric: tabular-nums; }
.hc-values small { font-size: 14px; color: #b1c0bd; }
.hc-range { margin: 8px 0 18px; color:var(--prose); font: calc(13px + var(--prose-size-increase))/1.6 var(--font-body); }
.hc-decision { padding: 16px; background: #122421; border-radius: 5px; }
.hc-decision > span { font-size: 12px; color: #b1c0bd; }
.hc-decision h3 { margin: 10px 0 6px; color: var(--hc-accent); font: 500 16px/1.5 var(--font-ui); }
.hc-decision p { margin: 0; color:var(--prose); font: calc(14px + var(--prose-size-increase))/1.7 var(--font-body); }
.hplc-method { margin-top: 20px; font: calc(13px + var(--prose-size-increase))/1.8 var(--font-body); color:var(--prose); }
.hplc-method summary { padding: 7px 0; font-family: var(--font-ui); color: #d9e1df; cursor: pointer; }
.hplc-method p { max-width:var(--prose-width); }
@media (max-width: 1100px) and (min-width: 761px), (max-width: 600px) {
  .hc-plots { grid-template-columns: 1fr; gap: 24px; }
  .hc-panel svg { max-width: 540px; }
}
@media print { .hc-interactive { display: none !important; } .hc-plots { grid-template-columns: 1fr; } }