/* Banner 2 parts shared by the toolbar host and the extension pages: one class per part, values from the
   Figma components (section 230:3) through tokens.css. States the design leaves open follow the plan's
   defaults: push-button Hover, Pressed, Focus and Busy, and the dotted focus rectangle. Ink colours tiles,
   badges, lamps and caps; it never goes on a button face, a checkbox or a toggle. */

/* ── Push button (B2/Button 297:5002): Standard, Default (one per window) and Disabled ─────────────── */
.b2-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  height: var(--b2-button-height);
  min-width: 72px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--b2-button-border);
  border-radius: var(--b2-radius-3);
  background: var(--b2-button-face);
  box-shadow: var(--b2-button-bevel);
  color: var(--b2-text);
  font: 600 12px/14px var(--b2-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}
.b2-button svg { display: block; flex: none; width: var(--b2-icon-size); height: var(--b2-icon-size); }
.b2-button--default { border-color: var(--b2-button-border-default); box-shadow: var(--b2-button-ring), var(--b2-button-bevel); }
.b2-button:not(.b2-button--default):hover:not(:disabled, [aria-disabled='true']) { border-color: var(--b2-button-border-hover); }
.b2-button:active:not(:disabled, [aria-disabled='true']) { background: var(--b2-button-face-pressed); box-shadow: var(--b2-sunken); }
.b2-button--default:active:not(:disabled, [aria-disabled='true']) { box-shadow: var(--b2-button-ring), var(--b2-sunken); }
.b2-button:focus-visible { outline: 1px dotted var(--b2-focus); outline-offset: var(--b2-focus-offset); }
/* Busy while its command runs: further clicks are ignored by the code that runs it. */
.b2-button[aria-busy='true'] { cursor: progress; color: color-mix(in srgb, var(--b2-text) 70%, transparent); }
.b2-button:is(:disabled, [aria-disabled='true']) {
  border-color: var(--b2-button-border-disabled);
  background: var(--b2-button-face-disabled);
  box-shadow: none;
  color: var(--b2-button-text-disabled);
  cursor: default;
}

/* ── Badge (B2/Badge 231:51): small capitals on an ink; Gold for editions ─────────────────────────── */
.b2-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: var(--b2-badge-height);
  padding: 0 5px;
  border: 1px solid var(--ink-edge);
  border-radius: var(--b2-radius-2);
  background: var(--ink-fill);
  box-shadow: var(--b2-badge-highlight);
  color: var(--ink-label);
  font: var(--b2-font-caps);
  letter-spacing: var(--b2-caps-tracking);
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
}

/* ── Ink tile: 18×22 in modules and window headers, 20×20 in lists; the glyph takes the ink's Label ── */
.b2-tile {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 22px;
  border: 1px solid var(--ink-edge);
  border-radius: var(--b2-radius-3);
  background: var(--ink-fill);
  box-shadow: var(--b2-ink-highlight);
  color: var(--ink-label);
  overflow: hidden;
}
.b2-tile--square { width: 20px; height: 20px; }
.b2-tile svg { display: block; flex: none; width: var(--b2-icon-size); height: var(--b2-icon-size); }

/* ── Lamp (B2/Status 270:2247): Leaf for green, Gold for yellow, Cherry for red ────────────────────── */
.b2-lamp {
  box-sizing: border-box;
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink-edge);
  border-radius: 50%;
  background: var(--ink-fill);
  box-shadow: var(--b2-ink-highlight);
}

/* ── Check (B2/Check 253:1731): a white box with a navy check; Locked for required items ──────────── */
.b2-check {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--b2-button-border);
  border-radius: var(--b2-radius-2);
  background: var(--b2-field);
  box-shadow: var(--b2-sunken);
  color: var(--b2-text);
  /* The tick is the box's only content: without this, checking moves its baseline, and the box with it. */
  vertical-align: middle;
  appearance: none;
  cursor: pointer;
}
.b2-check:is(:checked, [aria-checked='true'], [data-state='checked'])::before {
  content: '';
  width: 7px;
  height: 4px;
  margin-top: -2px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
}
.b2-check--locked { border-color: var(--b2-check-locked-border); background: var(--b2-check-locked-face); box-shadow: none; color: var(--b2-check-locked-mark); cursor: default; }
.b2-check:is(:disabled, [aria-disabled='true'], [data-disabled]):not(.b2-check--locked) { opacity: var(--b2-disabled-opacity); cursor: default; }
.b2-check:focus-visible { outline: 1px dotted var(--b2-focus); outline-offset: 2px; }

/* ── Field (B2/Field 231:61): Std 24, Flagship 28; a focused field's border is Steel at 1.5px ──────── */
.b2-field {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--b2-field-height);
  min-width: 0;
  padding: 0 8px 0 7px;
  border: 1px solid var(--b2-field-border);
  border-radius: var(--b2-radius-2);
  background: var(--b2-field);
  box-shadow: var(--b2-sunken);
  color: var(--b2-text);
  font: 400 12px/16px var(--b2-sans);
}
.b2-field--flagship { height: var(--b2-field-height-flagship); font-size: 13px; line-height: 17px; }
.b2-field:focus-within { border-color: var(--b2-field-border-focus); box-shadow: inset 0 0 0 .5px var(--b2-field-border-focus), var(--b2-sunken); }
.b2-field svg { display: block; flex: none; width: var(--b2-icon-size); height: var(--b2-icon-size); color: var(--b2-text-2); }
.b2-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
}
.b2-field input::placeholder { color: var(--b2-text-3); opacity: 1; }

/* ── Select (B2/Select 270:114): the field's frame with a chevron; drawn without image URLs ────────── */
.b2-select {
  box-sizing: border-box;
  height: var(--b2-field-height);
  margin: 0;
  padding: 0 24px 0 8px;
  border: 1px solid var(--b2-field-border);
  border-radius: var(--b2-radius-2);
  background:
    linear-gradient(45deg, transparent 50%, var(--b2-text) 50%) calc(100% - 12px) 50% / 4px 4px no-repeat,
    linear-gradient(135deg, var(--b2-text) 50%, transparent 50%) calc(100% - 8px) 50% / 4px 4px no-repeat,
    var(--b2-field);
  box-shadow: var(--b2-sunken);
  color: var(--b2-text);
  font: 400 12px/16px var(--b2-sans);
  appearance: none;
}
.b2-select:focus-visible { border-color: var(--b2-field-border-focus); outline: none; box-shadow: inset 0 0 0 .5px var(--b2-field-border-focus), var(--b2-sunken); }
.b2-select:disabled { opacity: var(--b2-disabled-opacity); }

/* ── Segmented (B2/Segmented 233:38): toggle buttons; the pressed one is sunken, never inked ──────── */
.b2-segmented {
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  height: var(--b2-segmented-height);
  border: 1px solid var(--b2-button-border);
  border-radius: var(--b2-radius-3);
  overflow: hidden;
}
.b2-segmented > :is(button, [role='radio'], [role='button']) {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-radius: 0;
  background: var(--b2-button-face);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  color: var(--b2-text);
  font: 500 11px/14px var(--b2-sans);
  white-space: nowrap;
  cursor: pointer;
}
/* The chosen segment reads bold through a hairline stroke, not a heavier weight, so choosing one changes no width. */
.b2-segmented > :is([aria-pressed='true'], [aria-checked='true'], [data-state='on']) { background: var(--b2-button-face-pressed); box-shadow: var(--b2-sunken); -webkit-text-stroke: .45px currentColor; }
.b2-segmented > :focus-visible { outline: 1px dotted var(--b2-focus); outline-offset: -3px; }

/* ── Readout (B2/Readout 239:1162): a label cell and a value cell on the hairline ground ──────────── */
.b2-readout {
  box-sizing: border-box;
  display: inline-flex;
  align-items: stretch;
  gap: 1px;
  height: var(--b2-readout-height);
  padding: 1px;
  background: var(--b2-hairline);
  color: var(--b2-text);
}
.b2-readout__label {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  background: var(--b2-readout-label);
  color: var(--b2-text-2);
  font: 600 9px/12px var(--b2-sans);
  letter-spacing: var(--b2-caption-tracking);
  text-transform: uppercase;
}
.b2-readout__value { display: inline-flex; align-items: center; min-width: 0; padding: 0 8px; background: var(--b2-cell-value); font: 500 12px/16px var(--b2-sans); }

/* ── Icon button (B2/Icon button 271:99): 22px; Pressed while its menu is open ────────────────────── */
.b2-icon-button {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--b2-radius-2);
  background: transparent;
  color: var(--b2-text-2);
  cursor: pointer;
  appearance: none;
}
.b2-icon-button svg { display: block; width: var(--b2-icon-size); height: var(--b2-icon-size); }
.b2-icon-button:hover:not(:disabled) { border-color: var(--ink-paper-edge); background: var(--ink-paper-fill); box-shadow: var(--b2-ink-highlight); color: var(--b2-text); }
.b2-icon-button:is([aria-expanded='true'], [data-state='open'], :active):not(:disabled) { border-color: var(--b2-part-border); background: var(--b2-part-open); box-shadow: var(--b2-sunken); color: var(--b2-text); }
.b2-icon-button:focus-visible { outline: 1px dotted var(--b2-focus); outline-offset: -3px; }
.b2-icon-button:disabled { opacity: var(--b2-disabled-opacity); cursor: default; }

/* ── Facts table (pattern 7.4): the hairline "cellspacing=1" table of labels and values ──────────── */
.b2-facts {
  display: grid;
  grid-template-columns: var(--b2-facts-label, 132px) 1fr;
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--b2-hairline);
}
.b2-facts > :is(dt, dd) { margin: 0; padding: 5px 8px; font: 400 12px/16px var(--b2-sans); }
.b2-facts > dt { background: var(--b2-cell-label); color: var(--b2-text-2); }
.b2-facts > dd { background: var(--b2-cell-value); color: var(--b2-text); font-weight: 600; }

/* ── Progress (B2/Progress 253:1746): Leaf blocks of 8px with 2px gaps in a sunken trough ────────── */
.b2-progress {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 18px;
  padding: 3px;
  border: 1px solid var(--b2-window-border);
  border-radius: var(--b2-radius-2);
  background: var(--b2-progress-track);
  box-shadow: var(--b2-sunken);
}
.b2-progress__fill {
  height: 12px;
  width: calc(var(--blocks, 0) * 10px - 2px);
  max-width: 100%;
  background: var(--ink-leaf-fill);
  box-shadow: var(--b2-ink-highlight);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
  mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
}

/* ── Key (B2/Key 271:8756): a Paper keycap for control hints ──────────────────────────────────────── */
.b2-key {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--ink-paper-edge);
  border-bottom-width: 2px;
  border-radius: var(--b2-radius-3);
  background: var(--ink-paper-fill);
  box-shadow: var(--b2-ink-highlight);
  color: var(--b2-text);
  font: 600 11px/14px var(--b2-sans);
}

/* ── Choice (B2/Choice 271:8755): an answer row A–D; Selected is the navy box with a Gold letter ──── */
.b2-choice {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--b2-hairline);
  border-radius: var(--b2-radius-2);
  background: var(--b2-window);
  color: var(--b2-text);
  font: 400 13px/18px var(--b2-sans);
  text-align: left;
  cursor: pointer;
}
.b2-choice__letter {
  --ink-fill: var(--ink-paper-fill); --ink-edge: var(--ink-paper-edge); --ink-label: var(--ink-paper-label);
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink-edge);
  border-radius: var(--b2-radius-3);
  background: var(--ink-fill);
  box-shadow: var(--b2-ink-highlight);
  color: var(--ink-label);
  font: 600 12px/16px var(--b2-sans);
}
.b2-choice:is([aria-checked='true'], [aria-pressed='true'], [data-state='checked']) { border-color: var(--b2-select-border); background: var(--b2-select); color: var(--b2-select-text); -webkit-text-stroke: .35px currentColor; }
/* The check's place is kept while it is hidden, so choosing an answer never rewraps it. */
.b2-choice__check--off { visibility: hidden; }
.b2-choice:is([aria-checked='true'], [aria-pressed='true'], [data-state='checked']) .b2-choice__letter { --ink-fill: var(--ink-gold-fill); --ink-edge: var(--ink-gold-edge); --ink-label: var(--ink-gold-label); }
.b2-choice:focus-visible { outline: 1px dotted var(--b2-focus); outline-offset: 2px; }

/* ── Step (B2/Step 253:1745): a wizard step, read like the docs tree index ───────────────────────── */
.b2-step {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 178px;
  padding: 5px 10px 5px 6px;
  border: 1px solid transparent;
  border-radius: var(--b2-radius-2);
  color: color-mix(in srgb, var(--b2-text) 65%, transparent);
  font: 400 13px/18px var(--b2-sans);
}
.b2-step__number {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--b2-text) 45%, transparent);
  border-radius: var(--b2-radius-2);
  color: color-mix(in srgb, var(--b2-text) 60%, transparent);
  font: 600 11px/14px var(--b2-sans);
}
.b2-step--done { color: color-mix(in srgb, var(--b2-text) 85%, transparent); }
.b2-step--done .b2-step__number { border-color: var(--ink-leaf-edge); background: var(--ink-leaf-fill); box-shadow: var(--b2-ink-highlight); color: var(--ink-leaf-label); }
.b2-step--current { border-color: var(--b2-select-border); background: var(--b2-window); box-shadow: var(--b2-step-shadow); color: var(--b2-text); font-weight: 600; }
.b2-step--current .b2-step__number { border-color: var(--ink-gold-edge); background: var(--ink-gold-fill); box-shadow: var(--b2-ink-highlight); color: var(--ink-gold-label); }

/* ── Etched rule (B2/Etched rule 300:4996): the installer's separator, with its name on the line ──── */
.b2-etched {
  position: relative;
  height: 12px;
  margin: 0;
  border: 0;
  background: linear-gradient(var(--b2-etch), var(--b2-etch)) 0 5px / 100% 1px no-repeat, linear-gradient(var(--b2-etch-light), var(--b2-etch-light)) 0 6px / 100% 1px no-repeat;
  color: var(--b2-etch-label);
  font: 400 11px/14px var(--b2-sans);
}
.b2-etched > span { position: absolute; top: -1px; left: 10px; padding: 0 4px; background: var(--b2-button-area); }

/* ── Chevron: the 16px expand_more glyph of tabs and modules that open a menu or window ───────────── */
.b2-chevron { display: inline-flex; flex: none; width: var(--b2-icon-size); height: var(--b2-icon-size); color: var(--b2-text-2); }
.b2-chevron svg { display: block; width: 100%; height: 100%; }

/* ── Tab (B2/Tab 231:83): an index tab with a 2px ink cap; Pressed while its menu or window is open ── */
.b2-tab {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: var(--b2-tab-height);
  margin: 0;
  padding: 2px 9px 0 8px;
  border: 1px solid var(--b2-part-border);
  border-radius: var(--b2-radius-tab);
  background: var(--b2-part);
  color: var(--b2-text);
  font: 500 12px/16px var(--b2-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}
/* The cap covers the top edge; the tab's own corners round it. */
.b2-tab::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto;
  height: var(--b2-cap);
  border-radius: var(--b2-radius-tab);
  background: var(--ink-fill);
  pointer-events: none;
}
.b2-tab svg { display: block; flex: none; width: var(--b2-icon-size); height: var(--b2-icon-size); color: var(--ink-edge); }
.b2-tab .b2-chevron svg { color: var(--b2-text-2); }
.b2-tab:hover:not(:disabled, [aria-disabled='true'], [aria-expanded='true'], [aria-pressed='true'], .is-open) { border-color: var(--b2-part-border-hover); background: var(--b2-part-hover); }
/* Open, a tab loses its bottom border to join its window, and its label reads semibold through a hairline stroke
   rather than a heavier weight, so nothing in the bar moves. */
.b2-tab:is([aria-expanded='true'], .is-open) { border-color: var(--b2-part-border); border-bottom-width: 0; background: var(--b2-part-open); -webkit-text-stroke: .25px currentColor; }
.b2-tab:is([aria-expanded='true'], .is-open)::before { height: var(--b2-cap-open); }
/* A checked toggle tab takes the selected segment's face. */
.b2-tab[aria-pressed='true'] { background: var(--b2-button-face-pressed); box-shadow: var(--b2-sunken); }
.b2-tab:focus-visible { outline: 1px dotted var(--b2-focus); outline-offset: var(--b2-focus-offset); }
.b2-tab[aria-busy='true'] { cursor: progress; color: color-mix(in srgb, var(--b2-text) 70%, transparent); }
.b2-tab:is(:disabled, [aria-disabled='true']) { opacity: var(--b2-disabled-opacity); cursor: default; }

/* ── Module (B2/Module 233:27): a tall index tab with an ink tile, a title and a subtitle ─────────── */
.b2-module {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: var(--b2-module-height);
  margin: 0;
  /* No top pad: the two lines (27px) centre in the 28px inside the border, so the subtitle's descenders clear the
     shelf line that the module stands on. */
  padding: 0 7px 0 4px;
  border: 1px solid var(--b2-part-border);
  border-radius: var(--b2-radius-tab);
  background: var(--b2-part);
  color: var(--b2-text);
  font: 600 12px/15px var(--b2-sans);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}
.b2-module::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto;
  height: var(--b2-cap);
  border-radius: var(--b2-radius-tab);
  background: var(--ink-fill);
  pointer-events: none;
}
.b2-module__text { display: flex; flex-direction: column; min-width: 0; }
.b2-module__subtitle { color: var(--b2-text-2); font: 400 10px/12px var(--b2-sans); }
.b2-module:hover:not(:disabled, [aria-disabled='true'], [aria-expanded='true'], .is-open) { border-color: var(--b2-part-border-hover); background: var(--b2-part-hover); }
.b2-module:is([aria-expanded='true'], .is-open) { border-color: var(--b2-part-border); border-bottom-width: 0; padding-bottom: 1px; background: var(--b2-part-open); }
.b2-module:is([aria-expanded='true'], .is-open)::before { height: var(--b2-cap-open); }
.b2-module:focus-visible { outline: 1px dotted var(--b2-focus); outline-offset: var(--b2-focus-offset); }
.b2-module[aria-busy='true'] { cursor: progress; color: color-mix(in srgb, var(--b2-text) 70%, transparent); }
.b2-module:is(:disabled, [aria-disabled='true']) { opacity: var(--b2-disabled-opacity); cursor: default; }

/* ── Visually hidden: out of sight, still in the accessibility tree (narrow-level labels) ─────────── */
.b2-vh {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* ── Page controls (the page kit, src/components/b2): parts that Bundleware's own pages add ───────── */

/* Icon: a 16px Banner 2 glyph in its own box, whichever part holds it; a size on the box scales it. */
.b2-icon { display: inline-flex; flex: none; width: var(--b2-icon-size); height: var(--b2-icon-size); }
.b2-icon > svg { display: block; width: 100%; height: 100%; }
/* The check's mark is Icon/check at 12px: a light tick of about a pixel, drawn without an image so that no page's
   policy can remove it. */
.b2-check:is(:checked, [aria-checked='true'], [data-state='checked'])::before { box-sizing: content-box; width: 6px; height: 3px; border-width: 0 0 1.25px 1.25px; }
/* A letter or number in an ink tile, such as a step or instruction number, or the "?" of a message box. */
.b2-tile__letter { font: 600 12px/15px var(--b2-sans); text-align: center; }

/* Facts on pages: 28px rows. A status value is a badge and a regular detail line, with the button that acts on it
   under them. */
.b2-facts--page > :is(dt, dd) { padding: 6px 8px; }
.b2-facts--page > dd:has(> .b2-facts__actions) { padding-bottom: 8px; }
.b2-facts__line { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.b2-facts__detail { flex: 1 1 auto; min-width: 0; color: var(--b2-text-2); }
.b2-facts__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* Hairline table on pages: a <table> on the #CCCCFF ground with cellspacing=1, header cells #E6E6FF. */
.b2-table { border-collapse: separate; border-spacing: 1px; background: var(--b2-hairline); color: var(--b2-text); font: 400 12px/16px var(--b2-sans); }
.b2-table :is(th, td) { padding: 6px 8px; background: var(--b2-cell-value); text-align: left; vertical-align: top; }
.b2-table thead th { background: var(--b2-cell-head); font-weight: 600; }
.b2-table th[scope='row'] { background: var(--b2-cell-label); color: var(--b2-text-2); font-weight: 400; }

/* A choice's answer fills the row, so its check sits at the right. */
.b2-choice__answer { flex: 1 1 auto; min-width: 0; }
/* A secondary glyph after a tab's label, such as open_in_new on a link that leaves the page. */
.b2-tab .b2-tab__trail svg { color: var(--b2-text-2); }
/* The Dashboard's modules are links. */
.b2-module:any-link { text-decoration: none; }

/* Row menu (B2/Menu row 271:128): a tree-index menu under a row's icon button, 24px rows with dotted guides
   (├ for a middle row, └ for the last), the navy box on the highlighted row, a caption and a note. */
.b2-menu {
  z-index: 50;
  box-sizing: border-box;
  width: 216px;
  max-width: calc(100vw - 16px);
  padding: 4px 0 7px;
  border: 1px solid var(--b2-window-border);
  background: var(--b2-window);
  box-shadow: var(--b2-window-shadow);
  color: var(--b2-text);
  font: 400 12px/16px var(--b2-sans);
  outline: none;
}
.b2-menu__caption { padding: 6px 10px 3px; color: var(--b2-title); font: var(--b2-font-caption); letter-spacing: var(--b2-caption-tracking); text-transform: uppercase; }
.b2-menu__row { box-sizing: border-box; display: flex; align-items: center; gap: 1px; height: var(--b2-row-height); padding: 0 6px 0 10px; outline: none; cursor: default; }
.b2-menu__guide { position: relative; flex: none; align-self: stretch; width: 14px; }
.b2-menu__guide::before { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; border-left: 1px dotted var(--b2-guide); }
.b2-menu__guide::after { content: ''; position: absolute; top: 12px; left: 4px; width: 9px; border-top: 1px dotted var(--b2-guide); }
.b2-menu__row--last .b2-menu__guide::before { bottom: 11px; }
.b2-menu__label { box-sizing: border-box; display: flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; height: 20px; padding: 0 6px; white-space: nowrap; }
.b2-menu__row[data-highlighted] .b2-menu__label { background: var(--b2-select); color: var(--b2-select-text); }
.b2-menu__row:focus-visible .b2-menu__label { outline: 1px dotted currentColor; outline-offset: -3px; }
.b2-menu__row[data-disabled] { opacity: var(--b2-disabled-opacity); }
.b2-menu__separator { height: 1px; margin: 5px 0; background: var(--b2-separator); }
.b2-menu__note { margin: 0; padding: 0 10px 0 12px; color: var(--b2-text-2); font: var(--b2-font-note); }