/* ── Tokens ── Scoped to this tool's own wrapper rather than :root, so its names can never collide with another tool's or leak into the shared chrome. Values map onto the shared theme (base/theme.css). */ .cwnd_page { --cwnd-bg: var(--surface-page); --cwnd-surface: var(--surface-card); --cwnd-border: var(--border-strong); --cwnd-border-lite: var(--border); --cwnd-text: var(--text-primary); --cwnd-text-dim: var(--text-body); --cwnd-text-dimmer: var(--text-muted); --cwnd-radius: var(--radius-card); --cwnd-radius-sm: 8px; --cwnd-radius-xs: 6px; /* Sizing below is deliberately kept in px, not rem — :root is the element, so a font-size set here would apply to the whole page (not just this tool's own UI), throwing every other tool's shared nav out of sync with this one. */ } /* Scoped to .cwnd_page, not body: body also contains the shared nav and footer as siblings of this tool's content, so flexing body directly would flex the nav/footer themselves instead of just these 3 cards, breaking both their spacing and the "collapse the settings/legend and the chart grows to fill the freed space" behavior below. */ .cwnd_page { display: flex; flex-direction: column; gap: 10px; /* No top padding — the shared .main-content-placeholder margin already gives every tool page the same gap below the nav. Side/bottom padding come from the same shared tokens the other three tools use (base/layout.css) so the inset from the screen edge matches everywhere, not just the amount left over below the nav. */ padding: 0 var(--tool-padding-x) var(--tool-padding-bottom); color: var(--cwnd-text); /* Fills whatever vertical space is actually left over after the nav, banner and footer, inherited through the `fill-height` chain in base/layout.css (this page sets bodyClass: fill-height). That slack is what .cwnd_chart_card's flex:1 expands into when the settings or legend card is collapsed, and it stays correct if the nav or footer height ever changes since nothing here hardcodes a viewport-minus-chrome value. */ flex: 1 0 auto; min-height: 0; } /* ── Utility ── */ .cwnd_sr_only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* ── Control Card ── */ .cwnd_ctrl_card { background: var(--cwnd-surface); border: 1px solid var(--cwnd-border); border-radius: var(--cwnd-radius); padding: 8px 14px; flex-shrink: 0; } .cwnd_ctrl_top { display: flex; align-items: center; gap: 10px; min-height: 36px; } .cwnd_algo_row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .cwnd_btn_algo { font-family: inherit; font-size: 13px; font-weight: 500; padding: 5px 16px; border-radius: var(--cwnd-radius-sm); border: 1px solid var(--cwnd-border); background: var(--cwnd-surface); color: var(--cwnd-text-dim); cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s, border-color 0.12s; } .cwnd_btn_algo:hover { background: var(--surface-hover); } .cwnd_btn_algo.cwnd_btn_active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); } /* future: reserved algo buttons get a faint style */ .cwnd_btn_algo.cwnd_btn_reserved { opacity: 0.45; cursor: default; } .cwnd_gear_btn { margin-left: auto; padding: 5px 9px; border-radius: var(--cwnd-radius-xs); border: 1px solid var(--cwnd-border); background: var(--cwnd-surface); color: var(--cwnd-text-dimmer); font-size: 15px; cursor: pointer; line-height: 1; flex-shrink: 0; transition: background 0.12s; } .cwnd_gear_btn:hover { background: var(--surface-hover); } .cwnd_gear_btn.cwnd_gear_open { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); } /* ── Expanded Sections ── Animated open/close at the same 0.3s ease the site already uses for the mobile menu slide and the info-panel fade (see nav.css). display:none can't transition, so instead this collapses via max-height + opacity with overflow:hidden, and stays laid out (display:flex) the whole time. max-height is a generous fixed cap rather than the content's real height — CSS can't animate to "auto" — sized to comfortably clear this panel's tallest reasonable state (all 3 sections stacked full-width on mobile). */ .cwnd_ctrl_body { border-top: 1px solid var(--cwnd-border-lite); margin-top: 8px; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 0; row-gap: 6px; max-height: 600px; opacity: 1; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease, border-top-color 0.3s ease; } .cwnd_ctrl_body.cwnd_hidden { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; border-top-color: transparent; } .cwnd_section { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 4px 14px 4px 0; flex-wrap: wrap; } .cwnd_section + .cwnd_section { border-left: 1px solid var(--cwnd-border); padding-left: 14px; } .cwnd_section_label { font-size: 12px; color: var(--cwnd-text-dimmer); white-space: nowrap; } .cwnd_chk_group { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cwnd-text-dim); cursor: pointer; user-select: none; white-space: nowrap; } .cwnd_chk_group input[type=checkbox] { width: 13px; height: 13px; accent-color: var(--data-cwnd); cursor: pointer; margin: 0; } .cwnd_slider_group { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cwnd-text-dim); white-space: nowrap; } .cwnd_slider_val { font-weight: 600; color: var(--cwnd-text); min-width: 28px; text-align: right; font-size: 12px; } .cwnd_unit { font-size: 11px; color: var(--text-muted); } .cwnd_page input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: var(--cwnd-border); outline: none; cursor: pointer; } .cwnd_page input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--data-cwnd); border: 2px solid var(--surface-card); box-shadow: 0 0 0 1.5px var(--data-cwnd); cursor: pointer; } .cwnd_page input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--data-cwnd); border: none; cursor: pointer; } .cwnd_page input[type=range]:disabled { opacity: 0.35; cursor: default; } .cwnd_sm_btn { font-family: inherit; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--cwnd-radius-xs); border: 1px solid var(--cwnd-border); background: var(--cwnd-surface); color: var(--cwnd-text-dim); cursor: pointer; white-space: nowrap; transition: background 0.1s; } .cwnd_sm_btn:hover { background: var(--surface-hover); } .cwnd_sm_btn.cwnd_sm_active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); } .cwnd_reset_btn { font-family: inherit; font-size: 12px; padding: 5px 12px; border-radius: var(--cwnd-radius-xs); border: 1px solid var(--cwnd-border); background: var(--cwnd-surface); color: var(--cwnd-text-dim); cursor: pointer; white-space: nowrap; transition: background 0.1s, border-color 0.1s, color 0.1s; } .cwnd_reset_btn:hover { background: var(--data-err-bg); border-color: var(--data-loss-hard); color: var(--data-err); } .cwnd_nav_btn { width: 24px; height: 24px; border-radius: 50%; padding: 0; border: 1px solid var(--cwnd-border); background: var(--cwnd-surface); color: var(--cwnd-text-dim); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; transition: background 0.1s, border-color 0.1s, color 0.1s; } .cwnd_nav_btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); } .cwnd_nav_btn:disabled { opacity: 0.35; cursor: default; } .cwnd_nav_btn.cwnd_flash_ok { background: var(--accent-soft) !important; border-color: var(--data-cwnd) !important; color: var(--accent-strong) !important; } .cwnd_nav_btn.cwnd_flash_fail { background: var(--data-err-bg) !important; border-color: var(--data-loss-hard) !important; color: var(--data-err) !important; } /* ── Zoom label ── */ .cwnd_zoom_label { font-size: 12px; font-weight: 600; color: var(--cwnd-text); min-width: 60px; text-align: center; } /* ── Chart Card ── */ .cwnd_chart_card { background: var(--cwnd-surface); border: 1px solid var(--cwnd-border); border-radius: var(--cwnd-radius); padding: 10px 14px; flex: 1; display: flex; flex-direction: column; min-height: 0; } .cwnd_hint { font-size: 11px; color: var(--cwnd-text-dimmer); margin-bottom: 8px; flex-shrink: 0; font-style: italic; } .cwnd_chart_wrap { position: relative; flex: 1; min-height: 300px; touch-action: pan-y; cursor: grab; overflow: hidden; } .cwnd_chart_wrap:active { cursor: grabbing; } .cwnd_chart_wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 2; } /* ── Tooltip ── */ .cwnd_tooltip { position: absolute; pointer-events: none; background: var(--cwnd-surface); border: 1px solid var(--cwnd-border); border-radius: var(--cwnd-radius-sm); padding: 10px 14px; font-size: 12px; color: var(--cwnd-text); line-height: 1.85; min-width: 190px; max-width: 270px; display: none; z-index: 20; box-shadow: var(--shadow-pop); } .cwnd_tt_title { font-weight: 700; font-size: 13px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--cwnd-border-lite); } .cwnd_tt_row { display: flex; justify-content: space-between; gap: 14px; } .cwnd_tt_lbl { color: var(--cwnd-text-dimmer); } .cwnd_tt_val { font-weight: 500; } .cwnd_tt_divider { border: none; border-top: 1px solid var(--cwnd-border-lite); margin: 5px 0; } .cwnd_tt_status { font-size: 11px; color: var(--cwnd-text-dim); line-height: 1.6; margin-top: 4px; } .cwnd_phase_ss { color: var(--data-loss-soft-ink); } .cwnd_phase_fr { color: var(--data-loss-hard-ink); } .cwnd_phase_ca { color: var(--data-phase-ca-ink); } /* ── Popover ── */ .cwnd_popover { position: absolute; background: var(--cwnd-surface); border: 1px solid var(--cwnd-border); border-radius: var(--cwnd-radius-sm); padding: 14px 16px; font-size: 13px; z-index: 50; box-shadow: var(--shadow-pop); min-width: 220px; display: none; } .cwnd_popover { display: none; } .cwnd_pop_title { font-weight: 600; margin-bottom: 6px; font-size: 13px; } .cwnd_pop_desc { font-size: 12px; color: var(--cwnd-text-dim); margin-bottom: 12px; line-height: 1.5; } .cwnd_pop_btns { display: flex; flex-direction: column; gap: 6px; } .cwnd_pop_btn { font-family: inherit; font-size: 12px; font-weight: 500; padding: 7px 12px; border-radius: var(--cwnd-radius-xs); border: 1px solid var(--cwnd-border); cursor: pointer; text-align: left; transition: opacity 0.1s; } .cwnd_pop_btn:hover { opacity: 0.85; } /* --data-warn/--data-warn-bg are a solid bg+text pair — distinct from the translucent --data-phase-* tokens used for the chart's phase-shading rectangles below, which are the wrong choice for an opaque button background (in dusk they're only 14% opaque). Same idea as --data-err/--data-err-bg for the hard-loss button underneath. */ .cwnd_pop_soft { background: var(--data-warn-bg); color: var(--data-warn); border-color: var(--data-loss-soft); } .cwnd_pop_hard { background: var(--data-err-bg); color: var(--data-err); border-color: var(--data-loss-hard); } .cwnd_pop_remove { background: var(--surface-hover); color: var(--cwnd-text-dim); } .cwnd_pop_cancel { background: var(--cwnd-bg); color: var(--cwnd-text-dim); } /* ── Legend Card ── */ .cwnd_legend_card { background: var(--cwnd-surface); border: 1px solid var(--cwnd-border); border-radius: var(--cwnd-radius); overflow: hidden; flex-shrink: 0; } .cwnd_legend_header { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; cursor: pointer; user-select: none; } .cwnd_legend_header:hover { background: var(--surface-hover); } .cwnd_legend_htitle { font-size: 12px; font-weight: 600; color: var(--cwnd-text-dimmer); text-transform: uppercase; letter-spacing: 0.06em; } .cwnd_legend_chev { font-size: 11px; color: var(--text-muted); transition: transform 0.2s; } .cwnd_legend_chev.cwnd_chev_open { transform: rotate(180deg); } /* Same animated-collapse approach as .cwnd_ctrl_body above: display stays grid the whole time so max-height/opacity can transition (0.3s ease, matching the mobile menu and info panel), instead of the display:none snap this replaces. */ .cwnd_legend_body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 24px; padding: 0 16px; border-top: 1px solid var(--cwnd-border-lite); max-height: 0; opacity: 0; overflow: hidden; border-top-color: transparent; transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, border-top-color 0.3s ease; } .cwnd_legend_body.cwnd_leg_open { padding: 8px 16px 14px; max-height: 400px; opacity: 1; border-top-color: var(--cwnd-border-lite); } .cwnd_legend_col { display: flex; flex-direction: column; gap: 7px; } .cwnd_legend_col_title { font-size: 11px; font-weight: 600; color: var(--data-axis); margin-bottom: 3px; letter-spacing: 0.04em; text-transform: uppercase; } .cwnd_leg_item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cwnd-text-dim); } .cwnd_leg_dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .cwnd_leg_diam { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 1px; flex-shrink: 0; } .cwnd_leg_dash { width: 24px; height: 0; flex-shrink: 0; margin-top: 7px; } .cwnd_leg_rect { width: 14px; height: 10px; border-radius: 2px; flex-shrink: 0; } .cwnd_leg_inactive { opacity: 0.35; } /* Legend swatches — the exact same tokens the chart itself paints with (see COLOR_TOKENS in tcp-reno-tahoe-visualizer.js), so the legend can never drift out of sync with what's actually on the chart, in any theme. */ .cwnd_leg_swatch_cwnd { background: var(--data-cwnd); border: 1.5px solid var(--data-cwnd-line); } .cwnd_leg_swatch_soft { background: var(--data-loss-soft); border: 1.5px solid var(--text-primary); } .cwnd_leg_swatch_hard { background: var(--data-loss-hard); border: 1.5px solid var(--text-primary); } .cwnd_leg_swatch_netlimit { border-top: 2px dotted var(--data-netlimit); } .cwnd_leg_swatch_ssthresh { border-top: 2px dashed var(--data-ssthresh); } .cwnd_leg_swatch_wmax { border-top: 2px dashed var(--data-wmax); } .cwnd_leg_swatch_phase_ss { background: var(--data-phase-ss); border: 1px solid var(--data-phase-ss-line); } .cwnd_leg_swatch_phase_fr { background: var(--data-phase-fr); border: 1px solid var(--data-phase-fr-line); } .cwnd_leg_swatch_phase_ca { background: var(--data-phase-ca); border: 1px solid var(--data-phase-ca-line); } @media (max-width: 640px) { .cwnd_legend_body.cwnd_leg_open { grid-template-columns: 1fr 1fr; max-height: 500px; } .cwnd_section + .cwnd_section { border-left: none; padding-left: 0; border-top: 1px solid var(--cwnd-border-lite); padding-top: 6px; margin-top: 2px; width: 100%; } }