/* The logo's text block stays inside the square's height: measured ink sits 3px inside its top and bottom edges. */

.nav { height: 56px; flex: none; display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 20; }
.brand { flex: none; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
.brand .mark { width: 28px; height: 28px; }
.brand-text { display: flex; flex-direction: column; justify-content: space-between; height: 24px; }
.brand-name { font-size: 16px; line-height: 15px; }
.brand-sub { display: flex; justify-content: space-between; font-size: 7.5px; font-weight: 700; line-height: 7px; letter-spacing: 0; color: var(--ink-soft); }
/* The current page reads at a glance: faint links, the current one in full ink and bold over a
   thick rule that slides to the next one. */
.nav-links { flex: none; display: flex; gap: 26px; align-self: stretch; position: relative; }
.nav-link { display: grid; align-items: center; font-weight: 600; font-size: 15px; color: var(--ink-faint); text-decoration: none; transition: color var(--dur) var(--ease); }
.nav-link > span, .nav-link::before { grid-area: 1 / 1; }
.nav-link > span { display: inline-flex; align-items: center; gap: 7px; }
.nav-link .ico { width: 18px; height: 18px; }
/* The bold label's width, held in reserve, so a link does not shift as it becomes current. */
.nav-link::before { content: attr(data-label); font-weight: 700; visibility: hidden; padding-left: 25px; }
.nav-link:hover { color: var(--ink); }
.nav-link.on { color: var(--ink); font-weight: 700; }
.nav-ink { position: absolute; left: 0; bottom: -1px; width: 0; height: 3px; background: var(--ink); border-radius: 3px 3px 0 0; pointer-events: none; }
.nav-ink.slide { transition: transform var(--dur) var(--ease), width var(--dur) var(--ease); }
.nav-end { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 14px; position: relative; }
.ws { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink-soft); }

/* The frame the extension badge and Feedback share, so the bar's end reads as one set with the avatar. */
.bar-chip { appearance: none; flex: none; height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px 0 10px; border: 1px solid var(--line-hard); border-radius: var(--r); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; transition: border-color var(--dur-fast) var(--ease); }
.bar-chip:hover, .bar-chip[aria-expanded="true"] { border-color: var(--ink); }
.bar-chip svg { flex: none; width: 16px; height: 16px; color: var(--ink-soft); }
.bar-chip > * { pointer-events: none; }
.ext-badge { flex: 0 1 auto; min-width: 0; }
.ext-badge .eb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-ghost); flex: none; }
.ext-badge[data-tone="ok"] .eb-dot { background: var(--ok-solid); }
/* A warning is told by its ring as well as its hue, so it reads without colour; a wash halo was too faint
   on the chip to see. */
.ext-badge[data-tone="need"] .eb-dot { background: var(--warn-solid); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--warn-solid); }
.ext-badge[data-tone="bad"] .eb-dot { background: var(--bad-solid); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--bad-solid); }
/* The one part of the bar that may shorten: its whole word stays in the name, the hover text and the panel. */
.ext-badge .eb-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ext-badge[data-tone="idle"] { color: var(--ink-faint); }
.ext-badge[data-tone="idle"] .eb-dot { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink-faint); }

.pop { padding: 6px; width: min(360px, 100vw - 2 * var(--gutter)); gap: 0; overflow: hidden; top: 46px; right: 0; }
.pop-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.pop-title { font-weight: 700; font-size: 16px; }
.pop-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg); }
.pop-body { padding: 6px 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.dev { display: flex; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: center; }
.dev-ic { width: 36px; height: 36px; border-radius: var(--r); background: var(--paper-2); display: grid; place-items: center; flex: none; color: var(--ink-soft); }
.dev-ic svg { width: 18px; height: 18px; }
.dev-n { font-weight: 700; font-size: 15px; }
.dev-v { font-size: 13px; color: var(--ink-soft); margin-top: 2px; display: flex; align-items: center; gap: 8px; }

.avatar { appearance: none; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--paper-2); color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 1px solid var(--line-hard); cursor: pointer; padding: 0; }
.account { top: 46px; right: 0; width: min(360px, 100vw - 2 * var(--gutter)); }
.account .theme-row { display: flex; flex-wrap: wrap; row-gap: 8px; align-items: center; justify-content: space-between; padding: 6px 6px 6px 10px; font-size: 14px; }
.ext-view { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 16px; }

/* The bar's width tiers, measured from today's words. Whoever changes a page link's word, adds a link
   or adds a badge word re-measures each edge as qa/scenarios/dashboard-bar-widths.md does;
   the badge word's ellipsis keeps the page from scrolling sideways meanwhile. The factory page shares
   these stylesheets but keeps its own header's words, so the word rules name the dashboard's bar. */
/* "No browser" and "Can't check" ask the person to act, so they keep their word longest. */
/* Feedback's word outlasts the badge's, except beside those two, where it gives way to them. */
@media (max-width: 1039px) {
  .ext-badge:not([data-tone="idle"], [data-tone="bad"]) .eb-word { display: none; }
  .nav-end:has(.ext-badge:is([data-tone="idle"], [data-tone="bad"])) .fb-word { display: none; }
  .nav-end:has(.ext-badge:is([data-tone="idle"], [data-tone="bad"])) .bar-feedback { width: 32px; padding: 0; justify-content: center; }
}
@media (max-width: 839px) {
  .ext-badge .eb-word, .fb-word { display: none; }
  .bar-feedback { width: 32px; padding: 0; justify-content: center; }
}
/* A link's word leaves the screen but not the page, so screen readers still read it. */
/* An icon is 18 px wide; the padding makes each target 24 px and the margin gives the width back, so
   the tiers' measurements still hold. */
@media (max-width: 759px) {
  .appbar .nav-link { padding: 0 3px; margin: 0 -3px; }
  .appbar .nav-link > span { font-size: 0; gap: 0; }
  .appbar .nav-link::before { display: none; }
}
@media (max-width: 719px) {
  .nav { gap: 14px; }
  .nav-links { gap: 14px; }
  .nav-end { gap: 8px; }
  .appbar .brand-text { display: none; }
  .ext-badge { position: relative; width: 32px; padding: 0; justify-content: center; }
  .ext-badge .eb-dot { position: absolute; top: -4px; right: -4px; width: 7px; height: 7px; box-shadow: 0 0 0 2px var(--surface); }
  .ext-badge[data-tone="idle"] .eb-dot { box-shadow: inset 0 0 0 1.5px var(--ink-faint), 0 0 0 2px var(--surface); }
}