/* Build 1234 — density window panel (hydroDensityWindowHtml). One row per critical point, in depth order: where
   ESD and ECD sit inside the pore-to-fracture window, then ECD and the two margins. Colours follow the Operating
   Window chart legend: pore limit red, fracture limit blue, ESD green, ECD orange. */
.hd-density.hd-dw{display:flex!important;flex-direction:column;justify-content:center;gap:0;position:relative;min-width:0;
  padding:8px 14px 8px!important;font-family:inherit;color:var(--rtx1,var(--ink));--dw-cols:minmax(64px,.8fr) minmax(84px,2.2fr) 46px 58px 58px;--dw-gap:10px}
.hd-dw-head{display:flex;align-items:center;gap:12px;min-width:0;margin-bottom:6px}
.hd-dw-t{display:flex;align-items:center;gap:6px;min-width:0;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--rtx2,var(--muted));white-space:nowrap}
.hd-dw-t .cpk-i{width:13px;height:13px;color:var(--recd,#F59B42);flex:none}
.hd-dw-t small{font-size:10px;letter-spacing:0;text-transform:none;color:var(--rtx3,var(--muted));font-weight:500}
.hd-dw-key{display:flex;gap:10px;margin-left:auto;font-size:10px;color:var(--rtx3,var(--muted));white-space:nowrap}
.hd-dw-key>span{display:inline-flex;align-items:center;gap:4px}
.hd-dw-key i{display:inline-block;flex:none}
.hd-dw-key .k-esd{width:2px;height:10px;background:var(--resd,#8FCB5B);border-radius:1px}
.hd-dw-key .k-ecd{width:8px;height:8px;border-radius:50%;background:var(--recd,#F59B42)}
.hd-dw-key .k-cut{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--recd,#F59B42);box-sizing:border-box}
.hd-dw-cols,.hd-dw-row{display:grid;grid-template-columns:var(--dw-cols);column-gap:var(--dw-gap);align-items:center;min-width:0}
.hd-dw-cols{padding:0 0 3px;font-size:10px;color:var(--rtx3,var(--muted));white-space:nowrap}
.hd-dw-cols>span:nth-child(n+3){text-align:right}
.hd-dw-cols i{font-style:normal;opacity:.7}
.hd-dw-row{min-height:30px;border-top:1px solid var(--rline,var(--line))}
.hd-dw-loc{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.hd-dw-loc b{font-size:12px;font-weight:600;color:var(--rtx1,var(--ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-dw-loc b em{margin-left:5px;padding:0 4px;border:1px solid color-mix(in srgb,var(--raccent,#4D9FFF) 40%,transparent);border-radius:4px;font:600 9px/14px inherit;font-style:normal;color:var(--raccent,#4D9FFF);vertical-align:1px}
.hd-dw-loc small{font:500 10px/1.2 'Geist Mono',ui-monospace,monospace;color:var(--rtx3,var(--muted));white-space:nowrap}
.hd-dw-bar{position:relative;height:16px;min-width:0}
.hd-dw-bar::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;border-radius:1px;background:var(--rline,var(--line))}
.hd-dw-win{position:absolute;top:5px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--rok,#41C878) 30%,transparent)}
.hd-dw-win.open-r{border-radius:3px 0 0 3px}.hd-dw-win.open-l{border-radius:0 3px 3px 0}
.hd-dw-win.none{left:0;right:0;background:none;border-top:1px dashed var(--rtx3,var(--muted));height:0;top:8px}
.hd-dw-lim{position:absolute;top:2px;width:2px;height:12px;margin-left:-1px;border-radius:1px}
.hd-dw-lim.pore{background:var(--rpore,#E5484D)}.hd-dw-lim.frac{background:var(--rfrac,#3D8BFF)}
.hd-dw-esd{position:absolute;top:1px;width:2px;height:14px;margin-left:-1px;border-radius:1px;background:var(--resd,#8FCB5B)}
.hd-dw-ecd{position:absolute;top:3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--recd,#F59B42);box-shadow:0 0 0 2px var(--rbg1,var(--card))}
.hd-dw-cut{position:absolute;top:2px;width:12px;height:12px;margin-left:-6px;border-radius:50%;border:1.5px solid var(--recd,#F59B42);box-sizing:border-box}
.hd-dw-ecdv,.hd-dw-m{text-align:right;font:600 13px/1 'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.hd-dw-ecdv{color:var(--rtx1,var(--ink))}
.hd-dw-m.ok{color:var(--rtx2,var(--muted))}.hd-dw-m.warn{color:var(--rwarn,#E5B84B)}.hd-dw-m.bad{color:var(--rbad,#F1565E)}
.hd-dw-m.na{font:500 10px/1.2 inherit;color:var(--rtx3,var(--muted));white-space:normal}
.hd-dw-m.gov{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.hd-dw-m.gov.ok{color:var(--rtx1,var(--ink))}
.hd-dw-row.plan .hd-dw-bar,.hd-dw-row.plan .hd-dw-ecdv,.hd-dw-row.plan .hd-dw-m{opacity:.72}
/* Ladder: the full EMW → ESD → ECD → loaded ECD steps, APL and entered limits, on demand */
.hd-dw-more{position:relative;flex:none}
.hd-dw-more>summary{list-style:none;cursor:pointer;padding:3px 9px;border:1px solid var(--rline,var(--line));border-radius:7px;font-size:10.5px;font-weight:600;color:var(--rtx2,var(--muted));white-space:nowrap;user-select:none}
.hd-dw-more>summary::-webkit-details-marker{display:none}
.hd-dw-more>summary::after{content:"▾";margin-left:5px;font-size:9px}
.hd-dw-more[open]>summary{color:var(--rtx1,var(--ink));border-color:var(--rtx3,var(--muted))}
.hd-dw-more>summary:focus-visible{outline:2px solid var(--raccent,#4D9FFF);outline-offset:2px}
.hd-dw-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;text-transform:none;letter-spacing:0;font-family:inherit;max-width:min(760px,calc(100vw - 24px));max-height:60vh;overflow:auto;padding:10px 12px;border:1px solid var(--rline,var(--line));border-radius:10px;background:var(--rbg2,var(--card));box-shadow:0 12px 32px rgba(0,0,0,.35)}
.hd-dw-pop table{border-collapse:collapse;font-size:11.5px;white-space:nowrap}
.hd-dw-pop th,.hd-dw-pop td{padding:5px 8px;border-bottom:1px solid var(--rline,var(--line));text-align:right;text-transform:none!important;letter-spacing:0!important}
.hd-dw-pop thead th{font-size:10.5px;font-weight:600;color:var(--rtx2,var(--muted))}
.hd-dw-pop thead th small{display:block;font:500 9.5px 'Geist Mono',ui-monospace,monospace;color:var(--rtx3,var(--muted))}
.hd-dw-pop tbody th{text-align:left;font-weight:500;color:var(--rtx2,var(--muted))}
.hd-dw-pop tbody th .hd-basis{display:inline;margin-left:6px}
.hd-dw-pop td{font-family:'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--rtx1,var(--ink))}
.hd-dw-pop td em{font-style:normal;font-size:10px;color:var(--recd,#F59B42)}
.hd-dw-pop td.na,.hd-dw-pop td i{color:var(--rtx3,var(--muted));font-style:normal}
/* Narrow columns: tighter gaps; very narrow drops the key (the chart legend below says the same) */
@media (max-width:1350px){.hd-density.hd-dw{--dw-cols:minmax(58px,.8fr) minmax(70px,2fr) 42px 52px 52px;--dw-gap:8px}}
@media (max-width:560px){.hd-density.hd-dw{padding:8px 10px!important;--dw-cols:62px minmax(60px,1fr) 40px 48px 48px;--dw-gap:6px}.hd-dw-key{display:none}.hd-dw-more{margin-left:auto}.hd-dw-ecdv,.hd-dw-m{font-size:12px}}
/* The old 72 px ribbon (compare view) is too short for the window: let it grow */
.hydro-app.charts-mode .hd-grow:has(.hd-dw){height:auto!important;max-height:none!important}