/* AI Geo Navigators — the masthead logo lockup.
 *
 * One file, loaded by all four views, because four copies of a rule is three
 * copies that will stop matching. Nothing here states a colour; the logo is a
 * bitmap and the brand forbids recolouring, inverting or filtering it.
 *
 * Two files ship and one is chosen by theme rather than by filter:
 *
 *   agn-logo.png        1800x843  (2.14:1) transparent — light grounds
 *   agn-logo-plate.png  2000x1284 (1.56:1) pre-plated  — dark grounds
 *
 * The dark ground is genuinely dark (--surface is a deep navy), and the navy
 * wordmark disappears on it, which is exactly the case the identity spec
 * reserves the pre-plated file for. A <picture> element would have been
 * shorter, but its media queries only see the system preference, and every
 * view here also has a theme button: pressing it must swap the logo too. So
 * the swap is done on the same three-block pattern brand.css uses — system
 * default, explicit dark, explicit light — and the explicit choice wins in
 * both directions.
 *
 * Sizing, from the identity spec: exact aspect ratio, never below 120px wide,
 * clear space around the lockup equal to the wordmark's cap height. The width
 * and height attributes in the markup carry the intrinsic ratio so the row
 * does not reflow while the image loads; `width:120px; height:auto` is what
 * holds the ratio afterwards. Clear space is 8px, which is the cap height of
 * the "GEO NAVIGATORS" line at this size. The plate variant gets none added:
 * it ships with a white margin of 23% of its own width already around the
 * lockup, so the padding is pulled back off it rather than doubled.
 */
/* One height in both themes. The two files have different ratios, so without
   this the masthead grows by five pixels the moment a reader presses the theme
   button. The number is not a magic constant: it is the plate's own intrinsic
   size, written as the division it is. */
.logo{display:flex; align-items:center; flex:none; padding:4px 2px;
  min-height:calc(120px * 1284 / 2000)}
.logo img{display:block; width:120px; height:auto}
.logo .agn-dark{display:none; margin:-4px}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo .agn-light{display:none}
  :root:not([data-theme="light"]) .logo .agn-dark{display:block}
}
:root[data-theme="dark"] .logo .agn-light{display:none}
:root[data-theme="dark"] .logo .agn-dark{display:block}
/* Last, so an explicit light choice beats the system-dark rule above it. */
:root[data-theme="light"] .logo .agn-light{display:block}
:root[data-theme="light"] .logo .agn-dark{display:none}

/* ------------------------------------------------------- the masthead nav --
 *
 * Added with the shared masthead, and kept in this file for the reason the
 * block above gives about the logo: four copies of a rule is three that will
 * stop matching. web/masthead.js writes the markup; these are its rules, and
 * all four views already load this sheet.
 *
 * The platform has four views and used to advertise them as bare glyphs —
 * ◐ ◇ ▤ ⌂ on three of them, and three unlabelled 24px circles inside a strip
 * of eleven identical circles on the fourth. The destination was in a tooltip,
 * which is to say it was in nothing a reader scanning a header ever sees.
 *
 * So the links carry their names, at every width. They are the platform's map
 * of itself: an icon-only navigation is a navigation only its author can use,
 * and the header has a scroll container of its own for the case where the row
 * genuinely will not fit. Nothing here states a colour — every value is a
 * token from brand.css, and the shape deliberately matches the segmented
 * control the console header already uses, so a reader who has learned one has
 * learned the other.
 */
.mnav{display:flex; align-items:center; gap:2px; flex:none; min-width:0;
  background:var(--sunk); border:1px solid var(--line); border-radius:var(--r-ctl); padding:3px}
.mnav .mn{display:inline-flex; align-items:center; white-space:nowrap;
  text-decoration:none; padding:8px 12px; border-radius:calc(var(--r-ctl) - 3px); color:var(--ink-2);
  font-family:var(--sans); font-size:var(--t-sm); font-weight:600; line-height:1.2; letter-spacing:normal;
  transition:color .15s ease, background-color .15s ease}
.mnav .mn:hover{color:var(--brand); background:var(--brand-soft)}
.mnav .mn:focus-visible{outline:2px solid var(--brand); outline-offset:1px}

/* The one mark that says where you are. Before this, no view marked itself at
   all: four tabs open on four views and nothing on any of them said which was
   which. aria-current is the source of truth — a screen reader announces it
   and the highlight is keyed off it, so the two cannot disagree. */
.mnav .mn[aria-current="page"]{background:var(--brand); color:var(--brand-ink);
  box-shadow:var(--sh)}
.mnav .mn[aria-current="page"]:hover{background:var(--brand); color:var(--brand-ink)}

/* The product name, written once per view and nowhere else. The logo beside it
   carries the company; this carries what the company built. The view's own
   name sits under it, so a reader can tell "Validation" from "Simulation lab"
   without reading the nav. */
.mtitle{display:flex; flex-direction:column; justify-content:center; gap:3px;
  min-width:0; flex:0 1 auto; padding:2px 0}
.mprod{font-family:var(--sans); font-size:var(--t-md); font-weight:600; line-height:1.2; letter-spacing:normal; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mview{font-family:var(--sans); font-size:var(--t-micro); font-weight:700; line-height:1.2; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Below this the nav is the widest thing in the header and the names are what
   makes it worth having, so the padding gives and the words stay. The
   breakpoint is where the three wrapping headers — the lab, the validation
   view and the dashboard — run out of room on one line: 24px off the nav is
   the difference between the currency switch sitting beside it and dropping
   to a row of its own. */
@media (max-width:1340px){
  .mnav .mn{padding:7px 9px; font-size:var(--t-xs)}
}
@media (max-width:1120px){
  .mprod{font-size:var(--t-sm)}
}
@media (max-width:760px){ .mtitle{display:none} }


/* ---------------------------------------------------- masthead icon button */
/* Defined here because all four views load this file, and because it was
   previously defined four times: 34px with a 10px radius on a sunk ground in
   the console, 31px with a hardcoded 5px radius on the dashboard, 31px with
   the token radius in the lab and in validation — and the console hovered to
   --brand while the other three hovered to --accent. One control, four
   appearances. tools/smoke_test.js now fails if a view redefines it. */
/* ------------------------------------------------------------ the radius scale
   Two tokens, defined here because all four views load this file, and defined
   at all because there was no scale: --r was 12px in the console, 6px in the
   lab and validation, and NEVER DEFINED on the dashboard, where every
   var(--r) resolved to nothing and painted a square corner. Four views, four
   geometries, and one of them by accident.
   --r      panels, cards, the map frame, inputs
   --r-ctl  controls small enough that the panel radius would swallow them
   A view may still override these, but it has to mean it: tools/smoke_test.js
   fails if a view stylesheet redefines --r. */
/* --r-sw  a swatch, a chip, a legend key: small enough that even the control
            radius reads as a circle on it. Added when the depth-class key went
            in with a hardcoded 3px, which is how a fourth radius gets into a
            scale that already had three. */
:root{--r:12px; --r-ctl:10px; --r-sw:3px}
.iconbtn{width:34px; height:34px; border-radius:var(--r-ctl); display:grid; place-items:center;
  cursor:pointer; background:var(--sunk); border:1px solid var(--line); color:var(--ink-2);
  font-size:var(--t-md); text-decoration:none; flex:0 0 auto; padding:0;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease}
.iconbtn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round}
.iconbtn:hover{color:var(--brand); border-color:var(--brand); background:var(--brand-soft)}

/* The currency toggle. It was written four times -- once in dash.css, once
   in lab.css, once in validation.css and once as .curseg in style.css -- and
   the four disagreed on radius, padding, weight and face, so the same control
   rendered four ways in one product. It is one control, so it is one rule,
   and it lives with the masthead it sits in. */
.curtog{display:flex; gap:2px; background:var(--sunk); padding:3px;
  border-radius:var(--r-ctl); border:1px solid var(--line); align-items:center}
.curtog button{border:0; background:transparent; padding:7px 12px; border-radius:calc(var(--r-ctl) - 3px);
  cursor:pointer; font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  color:var(--ink-2); letter-spacing:normal; font-variant-numeric:tabular-nums;
  line-height:1.2; transition:color .15s ease, background-color .15s ease}
.curtog button:hover{color:var(--ink)}
.curtog button[aria-pressed="true"]{background:var(--surface); color:var(--brand);
  box-shadow:var(--sh-soft)}

/* An icon button that carries its word. Same height and same ground as the
   plain .ic it replaces, so the row keeps its rhythm -- the difference is
   that a reader can say what it does before pressing it. */
.icw{height:34px; padding:0 11px 0 9px; border-radius:var(--r-ctl); display:inline-flex;
  align-items:center; gap:6px; cursor:pointer; background:var(--sunk);
  border:1px solid var(--line); color:var(--ink-2); flex:0 0 auto;
  font-family:var(--sans); font-size:var(--t-xs); font-weight:600; white-space:nowrap;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease}
.icw svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.icw:hover{color:var(--brand); border-color:var(--brand); background:var(--brand-soft)}
.icw[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
/* Below this width the row cannot hold three words; the icons still say which
   is which by shape, and the title still says it in words. */
@media (max-width:1440px){ .icw span{display:none} .icw{padding:0 9px} }