/* Exact established floating menu stylesheet is shared from model-a. */
body:not(.website-view) main{padding-bottom:0!important}#bottom.app-tabs{min-height:0;z-index:500}#bottom.app-tabs a{display:flex;max-width:none}#menu-clearance{position:fixed;left:0;right:0;bottom:0;height:var(--menu-reserve,88px);background:#17435c;pointer-events:none;z-index:1}.desktop-window{position:relative;z-index:2}#bottom.app-tabs svg{width:23px;height:23px}.reading #menu-clearance{display:none}.reading main{padding-bottom:calc(110px + env(safe-area-inset-bottom))!important}.reading #bottom{z-index:500}
@media(orientation:landscape) and (max-height:550px){#bottom.app-tabs{position:relative!important;bottom:auto!important;margin:10px 0 calc(10px + env(safe-area-inset-bottom));}#menu-clearance{display:none}.reading #bottom.app-tabs{position:fixed!important;bottom:calc(10px + env(safe-area-inset-bottom))!important}}
/* The pill is a child of the full graph surface; only its internal content zone is reserved. */
.desktop-window{background:radial-gradient(ellipse at 40% 55%,#317b97,#17435c);overflow:hidden}.viewport,#desktop-frame{background:transparent}#menu-clearance{display:none!important}#bottom.app-tabs{position:absolute!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;margin:0!important}.reading #bottom.app-tabs{position:fixed!important}
/* Keep Model A's exact compact spacing; graph.css originally used a 4px footer gap. */
#bottom.app-tabs{gap:3px!important}#bottom.app-tabs a{gap:4px!important}

#graph-tools{position:absolute;left:12px;right:12px;height:94px;display:flex;gap:8px;align-items:stretch;color:white;z-index:20}#graph-tools button{margin:0;min-width:44px;height:44px;min-height:44px;padding:0 8px;border:1px solid #8ab5c366;border-radius:12px;background:#194f68;color:#fff;font:600 13px system-ui;cursor:pointer}#graph-tools button[aria-pressed="true"]{background:#397a96}#graph-tools button:disabled{opacity:.45;cursor:default}#graph-tools button:focus-visible,#legend53:focus-visible{outline:3px solid #ffda70;outline-offset:2px}.mode-stack,.zoom-stack{display:flex;flex-direction:column;gap:4px;width:44px;flex:none}.tools-center{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between}#reset53{width:44px}#legend53{width:100%;display:flex;align-items:center;gap:12px;overflow-x:auto;white-space:nowrap;min-height:44px;font:11px/1.2 system-ui;scrollbar-width:thin;scrollbar-color:#92c9d8 #194f68;touch-action:pan-x;overscroll-behavior-x:contain}#legend53>span,#legend53>button{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:44px!important;font:11px/1.2 system-ui!important;border:0!important;background:transparent!important;padding:0!important}#legend53 i{width:6px;height:6px;border-radius:50%;flex:none}.reading #graph-tools{display:none}@media(prefers-reduced-motion:reduce){#graph-tools *{scroll-behavior:auto!important;transition:none!important}}

/* Kim's 40% reduction applies to the visible button, retaining disjoint 44px hit areas. */
#graph-tools .mode-stack button,#graph-tools .zoom-stack button{border:0;background:transparent!important;padding:0;display:grid;place-items:center;box-shadow:none}#graph-tools .mode-stack button span,#graph-tools .zoom-stack button span{display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;border:1px solid #8ab5c366;border-radius:12px;background:#194f68;font:600 13px system-ui;transform:scale(.6);pointer-events:none}#graph-tools .mode-stack button[aria-pressed="true"] span{background:#397a96}

/* Full-width legend below the raised vertical control stacks. */
#graph-tools{height:140px;justify-content:space-between}.tools-center{position:absolute;inset:0;display:block;pointer-events:none}#reset53{position:absolute;top:22px;left:calc(50% - 22px);pointer-events:auto}#legend53{position:absolute;left:0;bottom:0;height:44px;pointer-events:auto;gap:clamp(5px,1.5vw,12px)}.mode-stack,.zoom-stack{position:relative;z-index:1;height:92px}

/* Extend the graph to the legend; exclude only the two small side-control lanes. */
#graph-tools{pointer-events:none}.mode-stack,.zoom-stack{pointer-events:auto}#desktop-viewport{clip-path:polygon(0 0,100% 0,100% calc(100% - 66px),calc(100% - 60px) calc(100% - 66px),calc(100% - 60px) 100%,60px 100%,60px calc(100% - 66px),0 calc(100% - 66px))}

/* Tight vertical stacks: separate 44×32px hit targets, 5.6px visible spacing. */
#graph-tools{height:112px}.mode-stack,.zoom-stack{height:64px;gap:0}#graph-tools .mode-stack button,#graph-tools .zoom-stack button{position:relative;display:block;height:32px;min-height:32px;flex:0 0 32px}#graph-tools .mode-stack button span,#graph-tools .zoom-stack button span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6)}
/* Responsive legend: all items are visible; no sideways scrolling or clipped labels. */
#legend53{overflow:visible;gap:3px;justify-content:space-between;scrollbar-width:none;font-size:var(--legend-font,11px)}#legend53>span,#legend53>button{font-size:var(--legend-font,11px)!important;gap:3px;letter-spacing:-.1px}#legend53 i{width:4px;height:4px}

/* R57: continuous graph background under the transparent legend and floating menu. */
#desktop-viewport{clip-path:none;background:transparent!important}
#graph-tools,#legend53,.tools-center{background:transparent!important;border:0;box-shadow:none;backdrop-filter:none}
#bottom.app-tabs svg{width:25.3px!important;height:25.3px!important}
#graph-tools .mode-stack button span,#graph-tools .zoom-stack button span{font-size:14.3px}

/* R64: transparent floating legend; wrapping beats unreadably small type. */
#legend53{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:0 10px;height:auto;min-height:44px;bottom:0;overflow:visible;white-space:normal}
#legend53>span,#legend53>button{white-space:nowrap;font-size:11px!important;min-height:22px!important;line-height:1.25!important}
#legend53>button{min-height:44px!important}
#graph-tools{background:none!important}#legend53{background:none!important;text-shadow:0 1px 2px #123b50}
:root{--graph-safe-bottom:env(safe-area-inset-bottom,0px)}
#bottom.app-tabs{bottom:calc(10px + var(--graph-safe-bottom))!important}