/* The chrome both pages wear: the bar, the brand, the one tab strip, the * icon buttons, the dropdown menus and the segmented control. * * 🔑 THE BAR MUST NOT CHANGE WHEN THE PAGE DOES. The strip was shared first * and the bar around it was not, so stepping from Map to Overview moved the * brand, resized every icon and changed the bar's height - which reads as * having left the product rather than having changed view. One bar, one * stylesheet, and a tab is the only thing that moves. * * 🔑 THE STRIP IS ONE CONTROL AMONG SEVERAL, SO IT LINES UP WITH THEM. * ⚠️ These were folder tabs: the current one sat ON the bar's bottom * hairline and covered it, so the view you were in was physically attached * to the page below. It is a good effect and it was wrong here - it pushed * the whole strip a few pixels below the device picker and the range, and * a row of controls that nearly lines up reads as a mistake, not as depth. * Everything in the bar now shares one height and one centre line. The * current tab is still a sheet of the page's card colour, just a sheet that * floats rather than one that docks. * * ⚠️ THE ITEMS ARE LINKS, NOT BUTTONS, including the ones that do not leave * the page. They address a view, they belong in history, and middle-click * and open-in-new-tab have to keep working - which a button silently breaks. * dash.js calls preventDefault on its own five and moves the hash itself. * * ⚠️ This file is LINKED BY BOTH PAGES, so it is in nginx's no-cache list * with tokens.css. A stale copy here leaves the chrome unstyled rather than * missing, which is the kind of broken that gets explained away as "looks a * bit off today". */ /* ---------------------------------------------------------------- the bar ⚠️ sticky, not relative: the dashboard scrolls under this bar and the map page does not, and sticky is correct for both. ⚠️ z-index 1200 is above the Leaflet panes (400-700) and its controls (1000), on either page; the menus below it go higher still. ⚠️ The bar wears the PAGE's colour, not the card's - that is what leaves the current tab somewhere to be white against. */ #top{ flex:0 0 auto;position:sticky;top:0;z-index:1200; display:flex;align-items:center;justify-content:space-between; gap:var(--s3);height:54px;padding:0 var(--s3) 0 var(--s4); background:var(--bg);border-bottom:1px solid var(--line); font-family:var(--ui); } /* The brand names the PRODUCT. It does not name the page - that is the strip's job, and a brand that renamed itself per page is how the two bars came to look like two different sites. */ #top .brand{display:flex;align-items:center;gap:var(--s2);font-weight:600; font-size:15px;letter-spacing:-.01em;flex:none;color:var(--brand)} #top .brand svg{width:19px;height:19px;color:var(--brand)} #top .brand span{color:var(--mut);font-weight:400} /* 🔑 THE STRIP IS THE ONLY FLEXIBLE CHILD. #top is space-between and used to hold two things; with the tab strip between them the brand and the tools must keep their size and the strip must be what scrolls, or a narrow window pushes the icon buttons off the edge. */ #top .tools{display:flex;align-items:center;gap:var(--s1);flex:none; margin-left:auto} /* The switcher is fixed-size and sits next to the brand; the SPACE between it and the tools is what flexes now. */ #top .menuwrap{flex:none;margin:0 var(--s3) 0 var(--s4)} /* ⚠️ THE FLEXIBLE SPACE BELONGS TO THE TOOLS, NOT TO WHATEVER IS LAST ON THE LEFT. It used to be `margin-right:auto` on the switcher, which was the last left-hand control - and the moment the day pinner was added after it on ONE of the two pages, the map's bar centred its switcher. Pushing from the right works whatever the left happens to hold. */ #top > #viewnav{flex:none} #top > #day{margin-left:var(--s2);flex:none} #top .sep{width:1px;align-self:center;height:18px;background:var(--line); margin:0 var(--s2);flex:none} /* 🔑 THE HEADER RESETS THE CONTROL BOX, and this is not cosmetic - it was a clipped control. index.html's global rule gives every input and select `padding:9px var(--s3)`; with border-box and a 30px height that leaves a 10px content box for a 19px line, so the device name was sliced through the middle, top and bottom. The height is set here, so the padding must be too. ⚠️ padding-right leaves room for the chevron that same rule draws as a background-image at `right 9px`. */ #top .tools select,#top .tools input{ height:32px;padding:0 26px 0 var(--s2);margin-left:var(--s1); width:auto;max-width:210px;line-height:1} /* --------------------------------------------------------- the switcher 🔑 ONE BUTTON THAT NAMES THE VIEW YOU ARE IN. It replaced a seven-link strip that shared this bar with a device select, five range buttons and three icon buttons - at 1280px the last label rendered as a bare dot, and the strip's overflow scrolled with a hidden scrollbar, so the missing views were missing silently. ⚠️ A FIXED MIN-WIDTH, or the bar jumps as you move between "Map" and "Trips & stops" and everything to the right of it shifts. */ .viewbtn{ display:inline-flex;align-items:center;gap:var(--s2);flex:none; height:32px;min-width:178px;padding:0 var(--s2) 0 var(--s3);margin:0; background:var(--card);border:1px solid var(--line); border-radius:var(--r-md);box-shadow:none;cursor:pointer; color:var(--fg);font:600 var(--fs)/1 var(--ui);letter-spacing:-.01em; transition:border-color var(--t),background var(--t)} .viewbtn:hover{border-color:var(--line2);filter:none} .viewbtn:focus-visible{outline:2px solid var(--ring);outline-offset:1px} .viewbtn > span{flex:1 1 auto;text-align:left} .viewbtn .vi{width:15px;height:15px;flex:none;color:var(--brand)} .viewbtn .chev{width:14px;height:14px;flex:none;color:var(--mut); transition:transform var(--t)} .viewbtn[aria-expanded="true"]{border-color:var(--line2)} .viewbtn[aria-expanded="true"] .chev{transform:rotate(180deg)} /* It hangs off the LEFT end of the bar, so it opens leftward - see .menu, which is written for the theme button at the right end. */ .menu.left{left:0;right:auto;min-width:200px} /* ⚠️ "Trips & stops" wrapped to two lines at the inherited 176px and the row grew; a menu whose rows are different heights reads as a mistake. */ .menu.left .mi > span{white-space:nowrap} /* The items are now, not