/* 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(--mono);
}

/* 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}
#top .tabs{flex:1 1 auto;margin:0 var(--s3);justify-content:flex-start}
#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 strip */

.tabs{
  display:flex;align-items:center;gap:2px;
  min-width:0;overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}

.tabs a{
  display:flex;align-items:center;gap:7px;
  /* ⚠️ The SAME height as the select and the segmented control - 32px -
     because they stand in a row together and the eye reads the odd one out
     as broken before it reads it as different. */
  padding:0 var(--s3);height:32px;
  border:1px solid transparent;
  border-radius:var(--r-md);
  color:var(--mut);text-decoration:none;white-space:nowrap;
  font:500 12.5px/1 var(--mono);letter-spacing:-.01em;
  transition:color var(--t),background var(--t),border-color var(--t);
}
/* 🔑 ONE QUIET SQUARE PER TAB, and only the current one is filled.
   ⚠️ The reference gives every tab its own hue. Six hues were costed here
   and the worst pair separates by dE 0.8 under dichromacy - a colour code
   a colourblind reader cannot read is decoration pretending to be
   information. Every tab carries its name, so the square is rhythm, and
   the one state it reports - which view am I in - is carried by the fill,
   the sheet and the weight as well as by hue. */
.tabs a::before{
  content:"";width:8px;height:8px;flex:none;border-radius:2px;
  background:var(--line2);transition:background var(--t);
}
.tabs a:hover{color:var(--fg)}
.tabs a:hover::before{background:var(--mut)}
.tabs a:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}

.tabs a[aria-current="page"]{
  color:var(--brand);font-weight:600;
  background:var(--card);border-color:var(--line);
}
.tabs a[aria-current="page"]::before{background:var(--brand)}

/* A hairline between the page switcher and whatever the page keeps to its
   right, so the strip reads as a group rather than as loose links. */
.navsep{width:1px;align-self:center;height:18px;background:var(--line);
        margin:0 var(--s2);flex:none}

/* ------------------------------------------------------------ icon buttons
   🔑 INLINE SVG BECAUSE OF THE CSP. nginx sends `script-src 'self'` and no
   font or sprite host is whitelisted, so an icon font or a CDN sprite would
   silently render nothing. These are paths in the document; they cannot
   fail to load.
   ⚠️ Every one carries a title and an aria-label - an icon with no name is
   a guess, and this row is five of them in a line.
   ⚠️ GHOST, NOT BOXED. The box is reserved for things you type into or
   pick from. */
.ico{width:32px;height:32px;min-width:0;padding:0;margin:0;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r);background:transparent;
  border:1px solid transparent;color:var(--mut);font-weight:500;
  box-shadow:none}
.ico:hover{color:var(--fg);background:var(--card);border-color:var(--line);
  filter:none}
.ico.on{color:var(--card);background:var(--brand);border-color:var(--brand);
  box-shadow:none}
.ico.on:hover{color:var(--card);background:var(--brand);filter:brightness(1.07)}
.ico:disabled{opacity:.4}
.ico svg{width:18px;height:18px;display:block;pointer-events:none}

/* ------------------------------------------------------- segmented control
   🔑 A RANGE IS FIVE CHOICES, SO IT SHOWS FIVE CHOICES. It was a <select>,
   which hides four of them behind a click and tells you nothing about what
   the alternatives are. ⚠️ It collapses back to a scrollable row rather
   than a menu on a narrow screen - a control that changes KIND between
   breakpoints has to be learned twice. */
.seg{display:inline-flex;align-items:stretch;flex:none;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);overflow:hidden}
.seg button{
  appearance:none;border:0;margin:0;height:32px;padding:0 var(--s2);
  line-height:1;
  background:transparent;color:var(--mut);cursor:pointer;
  font:500 12px/1 var(--mono);border-radius:0;box-shadow:none;
  border-left:1px solid var(--line);
  transition:color var(--t),background var(--t)}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--fg);background:var(--bg)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.seg button:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}

/* ---- a dropdown menu --------------------------------------------------
   ⚠️ right:0, not left:0. This hangs off a button near the right edge of
   the header; anchored left it would run off the side of the window on a
   narrow screen, and nothing would clip it because #top is not scrollable.
   ⚠️ z-index above #top's 1200, or the menu renders behind the bar it
   drops out of. */
.menuwrap{position:relative;display:flex;align-items:center}
.menu{position:absolute;z-index:1400;top:calc(100% + 6px);right:0;
  min-width:176px;padding:var(--s1);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);font-family:var(--mono)}
.mi{display:flex;align-items:center;gap:var(--s3);width:100%;margin:0;
  padding:var(--s2) var(--s3);font:500 12.5px/1.4 var(--mono);text-align:left;
  background:transparent;color:var(--fg);border:0;border-radius:var(--r-sm);
  box-shadow:none;cursor:pointer;height:auto}
.mi:hover{background:var(--bg);filter:none}
.mi > svg{width:15px;height:15px;flex:none;color:var(--mut)}
.mi > span{flex:1 1 auto}
/* 🔑 The tick occupies its slot whether or not it is shown. Hiding it
   with display:none would shuffle the labels left by 16px as the
   selection moves, which reads as the menu twitching. */
.mi .tick{color:var(--brand);visibility:hidden}
.mi[aria-checked="true"]{color:var(--brand)}
.mi[aria-checked="true"] > svg:first-child{color:var(--brand)}
.mi[aria-checked="true"] .tick{visibility:visible}

/* ------------------------------------------------------------- narrow
   🔑 THE HEADER DID NOT FIT. Brand (~100px) plus seven icons with gaps and
   a separator comes to roughly 400px, against a 390px iPhone viewport - and
   #top has no wrap and no overflow handling, so the Sign Out button was
   simply pushed off the end.
   ⚠️ Shrinking the brand rather than the controls: the second word of the
   brand is decoration, and every icon is a function.
   ⚠️ 720px, where the map page's own mobile layout starts at 620. The bar
   now carries a six-tab strip as well as the brand and the tools, so it
   runs out of room before the page below it does. */
@media (max-width:720px){
  #top{height:48px;padding:0 var(--s1) 0 var(--s2);gap:var(--s2)}
  #top .brand{font-size:13px}
  #top .brand span{display:none}
  #top .brand svg{width:17px;height:17px}
  #top .tools{gap:0}
  #top .sep{margin:0 var(--s1)}
  #top .tabs{margin:0 var(--s2)}
  .menu{min-width:160px}
  .tabs a{padding:0 var(--s2);font-size:11.5px;gap:5px}
  .seg button{padding:0 6px}
  /* 🔑 THE TOOLS SCROLL RATHER THAN SPILL. The map's bar carries the device,
     five range segments and seven icons; on a phone that does not fit, and
     #top has no wrap - the last button simply left the window. Scrolling
     keeps every control reachable and keeps each one the SAME control it is
     on a desktop, which collapsing the segments into a menu would not. */
  #top .tools{min-width:0;overflow-x:auto;scrollbar-width:none}
  #top .tools::-webkit-scrollbar{display:none}
  #top .tools select{max-width:120px}
}

/* ⚠️ A FINGER IS NOT A MOUSE POINTER. 32px is comfortable to click and
   small to tap; the usual floor is 44. Keyed on the POINTER, not the
   width, because a tablet at 1024px is still touched. */
@media (pointer:coarse){
  .ico{width:42px;height:42px}
  .mi{padding:var(--s3)}
  .seg button{height:38px;padding:0 var(--s3)}
}