/* Banner 2 page layout: Bundleware's own pages (the popup, the Dashboard, setup and the removal dialogs), from the
   Figma page "Bundleware 2027 · Final" (230:2) through tokens.css. Controls live in parts.css; a page imports
   tokens.css, parts.css, this file, then its own app.css for its surface. The page kit in src/components/b2 draws
   this markup. Never part of the content script. */

/* ── Bundleware Nunito: the capitals and digits of the watermark letters on poster glass ─────────────────── */
@font-face {
  font-family: 'Bundleware Nunito';
  src: url('../fonts/nunito-bold-caps.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039, U+0041-005A;
}

/* ── Poster glass (Bundleware's own surfaces) ──────────────────────────────────────────────────────────────
   Bottom to top: the toolbar-collage photo under the ice wash, frosted as the poster's glass frosts it; the glass
   bands, two hard-edged cyan-to-teal bands at 20 % on an axis skewed with the box (PosterGlass.svelte draws them
   as an SVG gradient in the box's own space, as Figma does); one blurred white glow; an optional watermark letter;
   then the content, in navy. Figma's Brand/Glass effect has no CSS equivalent: the frost is a blur of the photo.
   Each surface sets its wash, glow and watermark below. */
.b2-glass {
  --glass-wash: .72;
  --glass-frost: 6px;
  --glow-x: 0px;
  --glow-y: 0px;
  --glow-w: 0px;
  --glow-h: 0px;
  --glow-blur: 12px;
  --glow-opacity: .75;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--b2-ice-wash);
  color: var(--b2-text);
}
.b2-glass__photo, .b2-glass__bands, .b2-glass__noise, .b2-glass__glow, .b2-glass .b2-watermark { position: absolute; z-index: -1; pointer-events: none; }
.b2-glass__photo {
  --wash: color-mix(in srgb, var(--b2-ice-wash) calc(var(--glass-wash) * 100%), transparent);
  inset: -12px;
  background: linear-gradient(var(--wash), var(--wash)), url('./backgrounds/poster-1600.webp') center / cover no-repeat;
  filter: blur(var(--glass-frost));
}
.b2-glass__bands { top: -12px; left: -12px; width: calc(100% + 24px); height: calc(100% + 24px); opacity: .2; }
.b2-glass__cyan { stop-color: var(--b2-glass-cyan); }
.b2-glass__teal { stop-color: var(--b2-glass-teal); }
/* The glass's grain: fine black noise at 25 %, the layer at 15 %. */
.b2-glass__noise {
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--glass-grain, .15);
}
.b2-glass__glow {
  left: var(--glow-x);
  top: var(--glow-y);
  width: var(--glow-w);
  height: var(--glow-h);
  border-radius: 50%;
  background: var(--b2-window);
  opacity: var(--glow-opacity);
  filter: blur(var(--glow-blur));
}
/* A giant initial in white at 55 %, clipped by its surface: "B" for Bundleware, a toolbar's initial on removal. */
.b2-watermark {
  left: var(--watermark-x, 0);
  top: var(--watermark-y, 0);
  color: color-mix(in srgb, var(--b2-window) 55%, transparent);
  font: 700 var(--watermark-size, 120px) / 1 var(--b2-display);
  white-space: nowrap;
  user-select: none;
}

/* Surfaces (pages-spec §0.3): the wash's opacity, the glow's box, blur and opacity, the watermark's size and place.
   A Figma layer blur of R is a CSS blur of R/2. */
.b2-glass--popup { --glass-wash: .7; --glow-x: -42px; --glow-y: -14px; --glow-w: 418px; --glow-h: 40px; --watermark-size: 120px; --watermark-x: 236px; --watermark-y: -40px; }
.b2-glass--dashboard { --glass-wash: .66; --glow-x: -70px; --glow-y: -14px; --glow-w: 700px; --glow-h: 40px; }
.b2-glass--panel { --glass-wash: .72; --glow-x: -32px; --glow-y: -47px; --glow-w: 231px; --glow-h: 156px; --glow-blur: 30px; --watermark-size: 300px; --watermark-x: 46px; --watermark-y: 250px; }
.b2-glass--page { --glass-wash: .5; --glow-x: 14.9%; --glow-y: 40px; --glow-w: 70.4%; --glow-h: 220px; --glow-blur: 50px; --glow-opacity: .6; }
.b2-glass--title { --glass-wash: .78; --glow-x: -66px; --glow-y: -12px; --glow-w: 484px; --glow-h: 40px; }
.b2-glass--banner { --glass-wash: .72; --glow-x: -84px; --glow-y: -12px; --glow-w: 614px; --glow-h: 40px; --watermark-size: 160px; --watermark-x: 390px; --watermark-y: -52px; }

/* ── Brand: the Bundle box mark and the BUNDLEWARE logotype (outlined artwork, never set as text) ────────── */
/* A mark's box is its size; artwork that runs past its cut (the ProSearcher lens, B2/Type shadow) overflows it. */
.b2-mark { display: inline-block; flex: none; vertical-align: middle; }
.b2-mark > svg { display: block; overflow: visible; }
.b2-logotype { display: block; flex: none; height: auto; }

/* ── Popup header and footer (B2/Popup header 271:129, B2/Popup footer 271:139), 44px each ────────────────── */
.b2-popup-header {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px 0 12px;
  border-bottom: 1px solid var(--ink-steel-edge);
}
/* The plate highlight along the top, over the glass. */
.b2-popup-header::after { content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: var(--b2-plate-highlight); pointer-events: none; }
.b2-popup-header__version { margin-left: auto; color: color-mix(in srgb, var(--b2-text) 70%, transparent); font: var(--b2-font-note); white-space: nowrap; }
.b2-popup-footer {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-top: 1px solid var(--b2-hairline);
  background: var(--b2-bar);
}
.b2-popup-footer__link { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: var(--b2-text); font: 600 12px/16px var(--b2-sans); text-decoration: underline; }
/* The book in Steel, the Fill's middle stop. */
.b2-popup-footer__link > .b2-icon { color: #4677AA; }
.b2-popup-footer__link:focus-visible { outline: 1px dotted var(--b2-focus); outline-offset: 2px; }

/* ── Popup strip (B2/Popup strip 276:6483): a band under the header, tinted by purpose, with a message, a
   detail line and at most one button. Steel for protected pages, Cherry for a change that did not apply. The
   tints are the page strip's (bar.css). ─────────────────────────────────────────────────────────────────── */
.b2-strip {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  border-bottom: 1px solid var(--ink-edge);
  background: var(--strip-tint, var(--b2-bar));
}
.b2-strip[data-ink='steel'] { --strip-tint: linear-gradient(#EEF3FA, #DCE6F3); }
.b2-strip[data-ink='cherry'] { --strip-tint: linear-gradient(#FFF1F3, #FBDDE2); }
.b2-strip[data-ink='teal'] { --strip-tint: linear-gradient(#EAFBF8, #D3F2EC); }
.b2-strip[data-ink='gold'] { --strip-tint: linear-gradient(#FFFBEA, #FFF0C2); }
.b2-strip__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.b2-strip__message, .b2-strip__detail { margin: 0; font: 400 12px/16px var(--b2-sans); }
.b2-strip__message { color: var(--ink-edge); font-weight: 500; }
.b2-strip[data-ink='gold'] .b2-strip__message { color: var(--ink-label); }
.b2-strip__detail { color: var(--b2-text-2); }
.b2-strip .b2-tile__letter { font: 900 13px/16px var(--b2-sans); }

/* ── Wizard sheet (pages-spec §0.6): setup and the removal dialogs ────────────────────────────────────────
   A poster-glass side panel (logotype, edition badge, steps, version) beside the content: a header with the
   heading and a 34px ink tile, an etched rule, the body, and the installer's button area. */
.b2-sheet {
  box-sizing: content-box;
  display: flex;
  width: 760px;
  height: 520px;
  border: 1px solid var(--b2-window-border);
  background: var(--b2-window);
  box-shadow: var(--b2-dialog-shadow);
  color: var(--b2-text);
  font: 400 13px/19px var(--b2-sans);
  text-align: left;
  overflow: hidden;
}
.b2-sheet--removal { box-sizing: border-box; width: 720px; height: auto; }
.b2-sheet__panel { box-sizing: border-box; display: flex; flex: none; flex-direction: column; width: 210px; padding: 22px 16px 18px; }
.b2-sheet--removal .b2-sheet__panel { width: 190px; --glow-x: -29px; --glow-y: -49px; --glow-w: 209px; --glow-h: 163px; --watermark-x: 30px; --watermark-y: 251px; }
.b2-sheet__edition { display: flex; padding: 8px 0 18px; }
.b2-sheet__rule { flex: none; height: 1px; background: color-mix(in srgb, var(--b2-text) 15%, transparent); }
.b2-sheet__toolbar { display: flex; align-items: flex-start; gap: 8px; padding-top: 14px; }
.b2-sheet__toolbar-text { display: flex; flex-direction: column; min-width: 0; }
.b2-sheet__toolbar-name { font: 600 12px/15px var(--b2-sans); overflow-wrap: anywhere; }
.b2-sheet__toolbar-detail { color: color-mix(in srgb, var(--b2-text) 65%, transparent); font: 400 11px/14px var(--b2-sans); }
.b2-steps { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px 0 0; list-style: none; }
/* Steps fill the panel: 178px on setup's, 158px on a removal dialog's. */
.b2-steps > .b2-step { width: auto; }
.b2-sheet__version { margin: auto 0 0; color: color-mix(in srgb, var(--b2-text) 65%, transparent); font: var(--b2-font-note); }
.b2-sheet__version > span { display: block; }
.b2-sheet__content { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.b2-sheet__header { display: flex; flex: none; align-items: flex-start; gap: 16px; padding: 22px 24px 16px 28px; }
.b2-sheet__titles { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.b2-sheet__heading { margin: 0; color: var(--b2-title); font: var(--b2-font-heading); }
.b2-sheet__subtitle { margin: 0; color: var(--b2-text-2); font: 400 13px/19px var(--b2-sans); }
/* The etched rule under the header: #A9AFD6 over white. */
.b2-sheet__divider { flex: none; height: 2px; background: linear-gradient(var(--b2-etch) 50%, var(--b2-etch-light) 50%); }
.b2-sheet__body { box-sizing: border-box; display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-height: 0; padding: 16px 28px 12px; overflow: auto; }
.b2-sheet--removal .b2-sheet__body { padding-bottom: 16px; }
/* The Welcome page has no header: its heading opens the body. */
.b2-sheet__body--welcome { gap: 14px; padding: 34px 32px 16px; }
.b2-sheet__buttons {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  background: var(--b2-button-area);
}
.b2-sheet__buttons > .b2-etched { position: absolute; top: -6px; right: 0; left: 0; }
.b2-sheet__note { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--b2-text-2); font: var(--b2-font-note); }

/* ── Message box (pages-spec §1.9): a poster-glass title band, a tile and the message, and the installer's
   buttons under a plain etched line ────────────────────────────────────────────────────────────────────── */
.b2-message-box {
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--b2-window-border);
  background: var(--b2-window);
  box-shadow: var(--b2-dialog-shadow);
  color: var(--b2-text);
  text-align: left;
  outline: none;
}
.b2-message-box__title { box-sizing: border-box; display: flex; flex: none; align-items: center; gap: 8px; height: 30px; padding: 7px 12px; font: 600 12px/16px var(--b2-sans); }
.b2-message-box__body { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.b2-message-box__body .b2-tile__letter { font: 600 18px/22px var(--b2-sans); }
.b2-message-box__message { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.b2-message-box__lead { margin: 0; font: 600 13px/18px var(--b2-sans); }
.b2-message-box__text { margin: 0; color: var(--b2-text-2); font: 400 12px/17px var(--b2-sans); }
.b2-message-box__buttons {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 46px;
  padding: 10px 16px 12px;
  background:
    linear-gradient(var(--b2-etch), var(--b2-etch)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--b2-etch-light), var(--b2-etch-light)) 0 1px / 100% 1px no-repeat,
    var(--b2-button-area);
}

/* ── Scrim: navy at 35 % over the whole page, under a dialog centred on it ──────────────────────────────── */
.b2-scrim { position: fixed; inset: 0; z-index: 100; box-sizing: border-box; display: grid; place-items: center; padding: 16px; overflow: auto; background: var(--b2-scrim); }

/* ── Dashboard shell (B2/Dashboard shell 270:42) ───────────────────────────────────────────────────────────
   A poster-glass banner, index tabs standing on a lavender shelf, the 8px strip that the open tab joins, the
   content, and a paper status bar. */
.b2-dashboard { display: flex; flex-direction: column; min-height: 100vh; background: var(--b2-window); color: var(--b2-text); font: 400 12px/16px var(--b2-sans); }
.b2-dashboard__banner {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 28px 0 24px;
  border-bottom: 1px solid var(--ink-steel-edge);
}
/* The product's name beside the logotype is a wordmark: Tinos on glass, engraved. */
.b2-dashboard__wordmark { margin: 0; color: var(--b2-text); font: var(--b2-font-wordmark-banner); text-shadow: var(--b2-type-engrave); white-space: nowrap; }
.b2-dashboard__version { margin-left: auto; color: color-mix(in srgb, var(--b2-text) 70%, transparent); font: var(--b2-font-note); white-space: nowrap; }
.b2-dashboard__shelf {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
  padding: 0 24px;
  background: var(--b2-dashboard-shelf);
  box-shadow: var(--b2-shelf-highlight);
}
/* The shelf line is its own layer, so the open tab paints over it and joins the strip. */
.b2-dashboard__shelf::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: #B9BEE0; }
.b2-dashboard__shelf > :is(.b2-tab, .b2-module) { z-index: 1; }
.b2-dashboard__aside { margin-left: auto; }
.b2-dashboard__strip { flex: none; height: var(--b2-strip-height); background: var(--b2-strip); }
.b2-dashboard__content { flex: 1 1 auto; min-height: 0; }
.b2-dashboard__status {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  height: 28px;
  padding: 0 16px;
  border-top: 1px solid var(--b2-hairline);
  background: var(--b2-bar);
}
.b2-dashboard__status-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2-dashboard__summary { color: var(--b2-text-2); white-space: nowrap; }

/* ── Index row (B2/Index row 270:132): a tree-index row used as a list; the current row is the navy box ───── */
.b2-index-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--b2-index-row-height);
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--b2-text);
  font: 400 12px/16px var(--b2-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}
.b2-index-row__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; }
.b2-index-row__name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.b2-index-row__detail { color: var(--b2-text-2); font: 400 11px/14px var(--b2-sans); }
.b2-index-row:hover:not([aria-current='true'], :disabled) { background: var(--b2-cell-head); }
.b2-index-row[aria-current='true'] { background: var(--b2-select); color: var(--b2-select-text); }
.b2-index-row[aria-current='true'] .b2-index-row__detail { color: var(--b2-select-detail); }
.b2-index-row:focus-visible { outline: 1px dotted currentColor; outline-offset: -3px; }
.b2-index-row:disabled { opacity: var(--b2-disabled-opacity); cursor: default; }

/* ── Tree row (B2/Tree row 269:57): the docs tree index, 18px rows ────────────────────────────────────────
   The box: open shows a minus, closed adds the plus, none keeps the slot. Rest items are maroon, the path to the
   current page Steel, the current page the navy box. Children indent 13px over a guide under the box. */
.b2-tree-row { display: flex; align-items: center; gap: 5px; min-height: var(--b2-tree-row-height); color: var(--b2-title); font: 400 13px/18px var(--b2-sans); }
.b2-tree-row__box { position: relative; box-sizing: border-box; flex: none; width: 9px; height: 9px; border: 1px solid var(--b2-tree-box-border); background: var(--b2-tree-box); }
.b2-tree-row__box::before { content: ''; position: absolute; top: 3px; left: 1px; width: 5px; height: 1px; background: var(--b2-text); }
.b2-tree-row__box--closed::after { content: ''; position: absolute; top: 1px; left: 3px; width: 1px; height: 5px; background: var(--b2-text); }
.b2-tree-row__box--none { border: 0; background: none; }
.b2-tree-row__box--none::before { content: none; }
.b2-tree-row__label { color: inherit; text-decoration: none; }
.b2-tree-row--path { color: var(--b2-tree-path); }
.b2-tree-row--current .b2-tree-row__label { padding: 0 3px; background: var(--b2-select); color: var(--b2-select-text); }
.b2-tree-children { margin: 0; padding: 0 0 0 4px; list-style: none; }
.b2-tree-children > * { padding-left: 9px; box-shadow: inset 1px 0 0 var(--b2-tree-guide); }

/* ── Diff line (B2/Diff line 270:163): old and new line numbers, a sign and the code, on hairlines ───────── */
.b2-diff { border: 1px solid var(--b2-hairline); background: var(--b2-window); color: var(--b2-code-plain); font: var(--b2-font-code); }
.b2-diff__line { display: grid; grid-template-columns: 38px 38px 18px minmax(0, 1fr); gap: 1px; min-height: 18px; background: var(--b2-diff-ground); }
.b2-diff__old, .b2-diff__new, .b2-diff__sign { background: var(--b2-diff-gutter); }
.b2-diff__old, .b2-diff__new { box-sizing: border-box; padding-right: 6px; color: var(--b2-code-line-number); font: 400 11px/18px var(--b2-mono); text-align: right; }
.b2-diff__sign { font: 700 12px/18px var(--b2-mono); text-align: center; }
.b2-diff__code { padding: 0 8px; overflow: hidden; background: var(--b2-window); text-overflow: ellipsis; white-space: pre; }
.b2-diff__line--added > :not(.b2-diff__code) { background: var(--b2-diff-added-gutter); }
.b2-diff__line--added > .b2-diff__code { background: var(--b2-diff-added); }
.b2-diff__line--added > .b2-diff__sign { color: var(--b2-code-comment); }
.b2-diff__line--removed > :not(.b2-diff__code) { background: var(--b2-diff-removed-gutter); }
.b2-diff__line--removed > .b2-diff__code { background: var(--b2-diff-removed); }
.b2-diff__line--removed > .b2-diff__sign { color: var(--b2-code-string); }
/* Unchanged lines folded into one cell. */
.b2-diff__line--fold { display: flex; align-items: center; gap: 6px; padding-left: 96px; background: var(--b2-diff-fold); color: var(--b2-text-2); font: 400 11px/14px var(--b2-sans); }

/* ── Allow User Scripts (pages-spec §5.6): the numbered steps and Chrome's details card, in the Dashboard's guide
   and on setup's User Scripts page ─────────────────────────────────────────────────────────────────────────── */
.b2-guide-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.b2-guide-steps > li { display: flex; align-items: flex-start; gap: 10px; font: 400 13px/20px var(--b2-sans); }
.b2-guide-steps strong { font-weight: 600; }
/* Chrome's details page, as a facsimile: where Allow User Scripts is (§1.7). */
.b2-chrome { display: flex; flex-direction: column; gap: 5px; }
.b2-chrome-url { color: var(--b2-text-2); font: 400 11px/14px var(--b2-mono); }
.b2-chrome-card { display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 16px; border: 1px solid #DADCE0; border-radius: 8px; background: #FFFFFF; }
.b2-chrome-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; color: #1F1F1F; font: 400 13px/18px var(--b2-sans); }
.b2-chrome-text > i { display: block; width: 300px; max-width: 100%; height: 6px; border-radius: 3px; background: #E3E3E3; }
.b2-chrome-text > i + i { width: 186px; }
.b2-chrome-ring { box-sizing: border-box; display: flex; flex: none; width: 44px; height: 28px; padding: 3px; border: 2px solid #FF9A2E; border-radius: 13px; }
.b2-chrome-toggle { position: relative; width: 34px; height: 18px; margin: -1px; border-radius: 9px; background: #0B57D0; }
.b2-chrome-toggle::after { content: ''; position: absolute; top: 3px; left: 19px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; }