/* Scoped additions for /hydrogen/ tools; the site supplies fonts, colors and chrome. */
.h-explorer{margin:2.5rem 0;padding:clamp(1rem,3vw,1.8rem);border:1px solid #c8d3ca;border-radius:.8rem;background:#f6f7f1;color:#173e3f;scroll-margin-top:6rem}
.h-explorer,.h-explorer *{box-sizing:border-box}
.h-explorer h2,.h-explorer h3{color:inherit}
.h-explorer>h2{margin-top:0}
.h-explorer p{line-height:1.8}
.h-explorer fieldset{min-width:0;margin:1.5rem 0;padding:0;border:0}
.h-explorer legend{padding:0 0 .9rem;font-weight:700;font-size:1.05rem}
.h-explorer .h-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem}
.h-explorer .h-control{min-width:0}
.h-explorer .h-control label{display:block;margin-bottom:.45rem;font-weight:600;line-height:1.6}
.h-explorer .h-control label output{float:right;margin-left:.5rem;font-weight:500;font-variant-numeric:tabular-nums}
.h-explorer input[type=range]{display:block;width:100%;min-height:44px;margin:.2rem 0;accent-color:#245955;cursor:pointer}
.h-explorer input[type=number],.h-explorer select{width:100%;min-height:44px;padding:.55rem .65rem;border:1px solid #91a69b;border-radius:.35rem;background:#fffefa;color:#183d3f;font:inherit;line-height:1.3}
.h-explorer input[type=number]{font-variant-numeric:tabular-nums}
.h-explorer input[type=checkbox]{width:1.2rem;height:1.2rem;margin:0 .5rem 0 0;accent-color:#245955;vertical-align:middle}
.h-explorer .h-check{display:flex;align-items:center;min-height:44px;gap:.4rem;font-weight:600;line-height:1.6}
.h-explorer .h-control-wide{grid-column:1/-1}
.h-explorer .h-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.h-explorer button{min-height:44px;padding:.6rem .9rem;border:1px solid #245955;border-radius:.35rem;background:#245955;color:#fffefa;font:inherit;font-weight:600;line-height:1.4;cursor:pointer}
.h-explorer button.h-secondary{background:#fffefa;color:#214b48}
.h-explorer button[aria-pressed=true]{background:#845a22;border-color:#845a22;color:#fffefa}
.h-explorer button:hover:not(:disabled){background:#173e3f;color:#fffefa}
.h-explorer button:disabled,.h-explorer fieldset:disabled{opacity:.65;cursor:default}
.h-explorer :is(input,select,button,a,[tabindex]):focus-visible{outline:3px solid #976519;outline-offset:4px}
.h-explorer input[aria-invalid=true]{border:2px solid #9a341e}
.h-explorer .h-hint{font-size:.9rem;color:#495f57;line-height:1.7;margin:.45rem 0 0}
.h-explorer .h-error{padding:.8rem 1rem;border-left:3px solid #9a341e;background:#fff0e8;color:#702b1a;font-weight:600}
.h-explorer [hidden]{display:none!important}
.h-explorer .h-status{margin:1rem 0;padding:.8rem 1rem;background:#fffefa;border-left:3px solid #956728;min-height:3.6rem;line-height:1.7;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.h-explorer .h-mode{display:inline-block;margin:.4rem 0;padding:.35rem .65rem;border:1px solid #a7baad;border-radius:.25rem;background:#edf2e7;font-size:.9rem;font-weight:650}
.h-explorer .h-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.4rem 0}
.h-explorer .h-metric{min-width:0;padding:1rem;border:1px solid #d0dad0;background:#fffefa}
.h-explorer .h-metric dt{font-size:.84rem;font-weight:600;line-height:1.6;color:#425c51}
.h-explorer .h-metric dd{margin:.45rem 0 0;font-size:clamp(1.08rem,2.4vw,1.35rem);font-weight:650;line-height:1.5;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.h-explorer .h-chart-wrap{margin:1.5rem 0 .8rem;background:#fffefa;border:1px solid #d0dad0;border-radius:.4rem;padding:.3rem;overflow:hidden}
.h-explorer .h-chart-wrap svg{display:block;width:100%;height:auto;max-height:36rem;background:#fffefa}
.h-explorer .h-chart-wrap figcaption{padding:.6rem .8rem;color:#495f57;font-size:.88rem;line-height:1.7}
.h-explorer .h-chart-label{font:20px system-ui,sans-serif;fill:#173e3f}
.h-explorer .h-chart-small{font:17px system-ui,sans-serif;fill:#35534b}
.h-explorer .h-chart-bold{font-weight:650}
.h-explorer .h-chart-grid{stroke:#e1e7df;stroke-width:1}
.h-explorer .h-chart-axis{stroke:#718d80;stroke-width:1.5}
.h-explorer .h-chart-level{stroke:#9baea0;stroke-width:1.2}
.h-explorer .h-chart-selected{stroke:#8c5d20;stroke-width:3}
.h-explorer .h-chart-threshold{stroke:#617e71;stroke-width:1.5;stroke-dasharray:6 4}
.h-explorer .h-chart-arrow,.h-explorer .h-chart-arrow-head{stroke:#8c5d20;stroke-width:2.6;fill:none}
.h-explorer .h-chart-curve{stroke:#245955;stroke-width:3;fill:none}
.h-explorer .h-chart-area{fill:#d5e2d0;stroke:none}
.h-explorer .h-chart-marker{stroke:#8c5d20;stroke-width:2;stroke-dasharray:6 4}
.h-explorer .h-chart-node{stroke:#8e8273;stroke-width:1.5;stroke-dasharray:3 4}
.h-explorer .h-chart-point{fill:#8c5d20;stroke:#fffefa;stroke-width:1}
.h-explorer .h-chart-bar{fill:#34675b}
.h-explorer .h-table-wrap{max-width:100%;overflow:auto;margin:1rem 0 1.5rem;border:1px solid #c8d3ca;border-radius:.3rem;background:#fffefa;overscroll-behavior-x:contain}
.h-explorer table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.65;font-variant-numeric:tabular-nums}
.h-explorer caption{text-align:left;padding:.75rem .8rem;font-weight:700;color:#173e3f}
.h-explorer .h-scroll-hint{display:none;font-size:.8rem;font-weight:400;margin-top:.3rem;color:#495f57}
.h-explorer th,.h-explorer td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid #d5ddd3;vertical-align:top}
.h-explorer thead th{background:#eaf0e6;color:#244b43}
.h-explorer tbody th{font-weight:600}
.h-explorer td{white-space:nowrap}
.h-explorer .h-wide-table{min-width:560px}
.h-explorer details{margin:1rem 0;padding:.7rem .9rem;border:1px solid #c8d3ca;background:#fffefa}
.h-explorer summary{min-height:32px;line-height:1.6;font-weight:650;cursor:pointer}
.h-explorer .h-equation{padding:.8rem 1rem;border-left:3px solid #9a7644;background:#fffefa;overflow-wrap:anywhere;line-height:1.9;font-family:Georgia,serif}
.h-explorer .h-equation code{font:inherit;background:transparent;color:inherit;padding:0}
.h-explorer .h-footnote{font-size:.85rem;line-height:1.8;color:#495f57;margin:1.3rem 0 0}
.h-explorer .h-number-pair{display:grid;grid-template-columns:minmax(0,1fr) 7rem;align-items:center;gap:.8rem}
.h-explorer .h-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:560px){
 .h-explorer .h-controls{grid-template-columns:1fr}
 .h-explorer .h-scroll-hint{display:block}
 .h-explorer .h-metrics{grid-template-columns:1fr}
 .h-explorer .h-control label output{float:none;display:block;margin:.2rem 0 0}
 .h-explorer .h-number-pair{grid-template-columns:minmax(0,1fr) 6.5rem}
 .h-explorer .h-actions button{flex:1 1 8rem}
 .h-explorer .h-chart-label{font-size:23px}
 .h-explorer .h-chart-small{font-size:19px}
 .h-explorer .h-status{font-size:.95rem}
 .h-explorer th,.h-explorer td{padding:.55rem .6rem}
}
@media(prefers-reduced-motion:reduce){.h-explorer *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{
 .h-explorer fieldset,.h-explorer .h-actions{display:none}
 .h-explorer{padding:1rem;background:#fff;border-color:#888;break-inside:auto}
 .h-explorer .h-table-wrap{overflow:visible;border:0}
 .h-explorer .h-wide-table{min-width:0;font-size:8pt}
 .h-explorer .h-chart-wrap{break-inside:avoid}
 .h-explorer .h-chart-wrap svg{max-height:16cm}
 .h-explorer .h-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
