/* ═══════════════════════════════════════════════════════════════════════════════
   business-ui.css — the shared design foundation for every Business Profiles
   surface (owner hub, editor, create, and the family B/C/D screens that follow).

   HOW TO USE IT
   Wrap a screen in an element carrying `class="bui"`. That element declares every
   token and opens a CSS container named `bui`; all components below are scoped to
   it, so dropping the markup into any layout — user or admin — cannot leak styles
   out and cannot be reshaped by whatever surrounds it.

   WHY IT IS SCOPED AND CONTAINER-QUERIED, NOT MEDIA-QUERIED
   These panels are embedded inside layouts of different widths (the MVC user
   layout has a container, the preview frames do not). A viewport media query
   would reflow on the window while the component is 400px wide; a container query
   reflows on the component, which is the only width that is true for it.

   WHERE THE BRAND VALUES COME FROM
   --brand / --brand-dark / --brand-soft / --brand-contrast / --brand-font /
   --brand-font-bn are emitted server-side by Views/Shared/_BrandTokens.cshtml from
   Partners.Application.Common.BrandPalette (ADR-0042: one accent per surface, from
   one source). This sheet re-exports them once as --bui-brand* / --bui-font*, each
   carrying the BrandPalette literal as its fallback, and every rule reads the
   re-export. The indirection is not decoration: `--brand: var(--brand, …)` on the
   same element is a reference cycle, which CSS resolves by making the property
   invalid at computed-value time — the fallback would never apply and the accent
   would vanish. A distinct name is what makes the fallback reachable.
   BrandPaletteCssParityTests fails the build if a fallback drifts from the constant.

   WHAT THIS FILE MUST NOT CONTAIN
   Page-specific rules. If a selector only makes sense on one screen, it belongs in
   that screen's own sheet. Everything here is a token or a shared component.

   Light only. The site has no dark theme and this file does not invent one.
   ═══════════════════════════════════════════════════════════════════════════════ */

.bui {
  /* ── Brand, from BrandPalette via _BrandTokens.cshtml ──────────────────── */
  --bui-brand: var(--brand, #d6006c);
  --bui-brand-dark: var(--brand-dark, #ad0058);
  --bui-brand-soft: var(--brand-soft, #fdeaf3);
  --bui-brand-contrast: var(--brand-contrast, #ffffff);
  --bui-font: var(--brand-font, 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  --bui-font-bn: var(--brand-font-bn, 'Tiro Bangla', 'Noto Sans Bengali', serif);

  /* ── Neutral ramp. #64748b is the floor: 4.8:1 on white, and nothing on a
        Business surface is set lighter than the floor. ───────────────────── */
  --bui-ink: #0f172a;
  --bui-label: #334155;
  --bui-subtle: #475569;
  --bui-muted: #64748b;
  --bui-line: #e6e8ee;
  --bui-line-strong: #d4dae4;
  --bui-canvas: #f7f8fb;
  --bui-surface: #ffffff;
  --bui-sunken: #f1f3f7;
  --bui-chip: #f1f5f9;

  /* ── Semantic. Deliberately not brand: a rebrand must be free to move the
        accent without turning "saved" and "failed" into the same colour. ─── */
  --bui-ok: #15803d;
  --bui-ok-soft: #ecfdf5;
  --bui-ok-line: #bfe8cd;
  --bui-warn-ink: #92400e;
  --bui-warn-soft: #fffbeb;
  --bui-warn-line: #f5e2b8;
  --bui-danger: #b42318;
  --bui-danger-soft: #fef2f2;
  --bui-danger-line: #f3c9c5;

  /* ── Radius ladder. Concentric: a control inside a panel steps one rung
        down, never matches it, or the two edges read as one thick border. ── */
  --bui-r-sm: 9px;
  --bui-r-md: 11px;
  --bui-r-lg: 14px;
  --bui-r-xl: 18px;
  --bui-r-full: 999px;

  /* ── Elevation, three rungs. e3 is the only shadow that casts UPWARD; it
        belongs to the save bar and marks it as rising off the page. ──────── */
  --bui-e1: 0 1px 2px rgba(16, 24, 40, .05);
  --bui-e2: 0 1px 3px rgba(16, 24, 40, .07), 0 10px 24px -18px rgba(16, 24, 40, .4);
  --bui-e3: 0 -1px 0 var(--bui-line), 0 -12px 32px -24px rgba(16, 24, 40, .5);
  /* Two-part ring: a surface-coloured gap then the accent, so the ring stays
     visible on a white panel and on a tinted one alike. */
  --bui-focus: 0 0 0 2px var(--bui-surface), 0 0 0 4px var(--bui-brand);

  /* Three shades the design draws that BrandPalette does not hold, DERIVED from the accent rather
     than written as hexes of their own: a rebrand must move all three with it, and a literal here is
     the copy that gets missed. --bui-on-soft is text on --bui-brand-soft (6.9:1, past AA). */
  --bui-on-soft: var(--bui-brand-dark);
  --bui-brand-lift: color-mix(in srgb, var(--bui-brand) 78%, #fff);
  --bui-brand-edge: color-mix(in srgb, var(--bui-brand) 25%, #fff);
  --bui-brand-glow: color-mix(in srgb, var(--bui-brand) 28%, transparent);

  /* ── Rhythm. 4pt base, 8pt above 8. Nothing sits between two tokens. ──── */
  --bui-s1: 4px;
  --bui-s2: 8px;
  --bui-s3: 12px;
  --bui-s4: 16px;
  --bui-s5: 20px;
  --bui-s6: 24px;
  --bui-s8: 32px;
  --bui-s10: 40px;
  --bui-s12: 48px;

  /* ── Motion. Five durations, three curves. ────────────────────────────── */
  --bui-press: 90ms;
  --bui-fast: 160ms;
  --bui-base: 240ms;
  --bui-measure: 420ms;
  --bui-arrive: 900ms;
  --bui-ease-press: cubic-bezier(.2, 0, .38, .9);
  --bui-ease-base: cubic-bezier(.2, .6, .2, 1);
  --bui-ease-arrive: cubic-bezier(.16, 1, .3, 1);

  background: var(--bui-canvas);
  color: var(--bui-ink);
  font-family: var(--bui-font);
  font-size: 14.5px;
  line-height: 1.5;
  container-type: inline-size;
  container-name: bui;
}

.bui *,
.bui *::before,
.bui *::after { box-sizing: border-box; }

/* ── THE BOUNDARY ────────────────────────────────────────────────────────────
   Every page that loads this file also loads about thirty legacy stylesheets —
   bootstrap, four Kendo themes, style.css, CustomCssAdsDetails — whose rules are
   UNSCOPED: `label{font-weight:600}`, `.badge{text-transform:uppercase}`,
   `.url{padding-top:50px}`. A `.bui x` selector outranks those, but ONLY for the
   properties it actually declares; anything it leaves to the cascade is decided
   by whichever legacy file happened to load last.

   So the foundation states its own value for every property those rules touch.
   Do the same for anything added here: the audit is to clone a live `.bui`
   subtree into a frame that loads this file alone and diff the computed styles
   (the procedure, and what it caught, are in the P9-D plan doc). */
.bui :where(label) { font-weight: inherit; }
.bui :where(b, strong) { font-weight: 700; }
.bui :where(svg, img) { vertical-align: middle; }
/* A rule drawn as a BACKGROUND, not a border: style.css carries
   `hr { border-top: 0 !important }`, which no specificity can outrank, so a
   separator built the obvious way is invisible on every page of this site. */
.bui :where(hr) {
  margin: 0; border: 0; height: 1px; background: var(--bui-line); opacity: 1;
}
/* `hidden` is the attribute every script here toggles, and a component's own
   `display` outranks the bare `[hidden]` rule the legacy reset provides. This is
   the one !important the foundation allows itself: an element told to be hidden
   is hidden, whatever component it belongs to. */
.bui [hidden] { display: none !important; }

.bui :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.bui :where(ul) { padding: 0; list-style: none; }
.bui :where(button, input, select, textarea) { font: inherit; color: inherit; }
.bui :where(a) { color: var(--bui-brand); text-decoration: none; }
.bui :where(a:hover) { color: var(--bui-brand-dark); text-decoration: underline; }
.bui :where(a.btn, a.btn:hover, a.chip, a.chip:hover) { text-decoration: none; }
/* NOT wrapped in :where(). The ring is carried by box-shadow, and :where() scores
   zero — so every component that declares a box-shadow of its own (the primary
   button, the logo camera, the pressed preview tab) outranked it and showed no
   focus ring at all, while `outline: none` still applied. */
.bui :focus-visible { outline: none; box-shadow: var(--bui-focus); border-radius: var(--bui-r-sm); }
/* The three that carry their own shadow keep it AND the ring, so the shape a
   seller recognises does not change at the moment they focus it. */
.bui .btn--primary:focus-visible { box-shadow: 0 1px 2px var(--bui-brand-glow), var(--bui-focus); }
.bui .idlogo-cam:focus-visible { box-shadow: var(--bui-e1), var(--bui-focus); }
.bui .pv-seg button[aria-pressed="true"]:focus-visible { box-shadow: var(--bui-e1), var(--bui-focus); }

/* Tabular figures with tightened tracking: "148" and "150" must line up in a
   meter, and a live count must not shift the text beside it as it changes. */
.bui .num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bui .bn { font-family: var(--bui-font-bn); }
.bui .sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── The one centred measure ─────────────────────────────────────────────────
   max-width AND margin-inline:auto together. A max-width alone is what produces
   the left-hugging column with dead space beside it (Rule 16). */
.bui-page { max-width: 1320px; margin-inline: auto; padding-inline: var(--bui-s6); }
@container bui (max-width: 1320px) { .bui-page { max-width: 100%; } }
@container bui (max-width: 520px) { .bui-page { padding-inline: var(--bui-s4); } }

/* ── Type scale ──────────────────────────────────────────────────────────── */
.bui .t-display { font-size: 27px; font-weight: 900; letter-spacing: -.025em; line-height: 1.12; }
.bui .t-h1 { font-size: 21px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; }
.bui .t-h2 { font-size: 16px; font-weight: 900; letter-spacing: -.01em; line-height: 1.3; }
.bui .t-h3 { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.bui .t-body { font-size: 14.5px; line-height: 1.5; }
.bui .t-small { font-size: 13px; line-height: 1.45; color: var(--bui-subtle); }
.bui .t-micro { font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--bui-muted); }
.bui .t-figure { font-size: 30px; font-weight: 900; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
/* Prose is capped, the column is not narrowed to achieve it (Rule 16). */
.bui .prose { max-width: 66ch; }
.bui .note-s { font-size: 12.5px; color: var(--bui-muted); }

/* ── Buttons — one accent, four weights ──────────────────────────────────── */
.bui .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 14px; border-radius: var(--bui-r-md);
  border: 1px solid var(--bui-line-strong); background: var(--bui-surface);
  color: var(--bui-label); font-size: 13.5px; font-weight: 700; cursor: pointer;
  margin: 0; text-align: center; text-transform: none; vertical-align: middle;
  -webkit-appearance: none; appearance: none;
  transition: background var(--bui-press) var(--bui-ease-press),
              border-color var(--bui-fast), color var(--bui-fast), transform var(--bui-press);
}
.bui .btn:hover { background: var(--bui-sunken); border-color: #c3cbd8; color: var(--bui-ink); }
/* Sinks on pointer-DOWN: the acknowledgement arrives before the request does. */
.bui .btn:active { transform: translateY(1px); }
.bui .btn[disabled],
.bui .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; background: var(--bui-surface); }
.bui .btn--primary {
  background: var(--bui-brand); border-color: var(--bui-brand); color: var(--bui-brand-contrast);
  box-shadow: 0 1px 2px var(--bui-brand-glow);
}
.bui .btn--primary:hover { background: var(--bui-brand-dark); border-color: var(--bui-brand-dark); color: var(--bui-brand-contrast); }
/* A disabled PRIMARY keeps its magenta and dims whole. The generic disabled rule
   resets the background to white, which would leave white text on white. */
.bui .btn--primary[disabled],
.bui .btn--primary[aria-disabled="true"] {
  background: var(--bui-brand); border-color: var(--bui-brand); color: var(--bui-brand-contrast); opacity: .5;
}
.bui .btn--ghost { background: transparent; border-color: transparent; color: var(--bui-subtle); }
.bui .btn--ghost:hover { background: var(--bui-chip); border-color: transparent; }
.bui .btn--sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: var(--bui-r-sm); }
.bui .btn--lg { min-height: 44px; padding: 0 20px; font-size: 15px; }
.bui .btn--icon { width: 38px; padding: 0; }
.bui .btn--lg.btn--icon { width: 44px; }
.bui .btn--danger { color: var(--bui-danger); }
.bui .btn--danger:hover { background: var(--bui-danger-soft); border-color: var(--bui-danger-line); color: var(--bui-danger); }
.bui .btn .i { width: 17px; height: 17px; flex: none; }
/* The "opens in a new place" mark that trails a label. Smaller and quieter than
   the icon that leads one, because it is a footnote to the word, not the word. */
.bui .i--tiny { width: 13px; height: 13px; opacity: .6; }

/* ── Badges, chips, pills ────────────────────────────────────────────────── */
.bui .badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: var(--bui-r-full); background: var(--bui-chip); color: var(--bui-subtle);
  font-size: 11.5px; font-weight: 900; letter-spacing: .01em;
  margin: 0; border: 0; line-height: 1.5; text-align: center; text-transform: none;
  vertical-align: middle;
}
.bui .badge--ok, .bui .badge--verified { background: var(--bui-ok-soft); color: var(--bui-ok); }
.bui .badge--draft { background: var(--bui-warn-soft); color: var(--bui-warn-ink); }
/* ADR-0042: a tier's own colour appears ONLY as the ring and mark of its own
   badge, bound to --tier-accent inside that badge and nowhere else on the
   surface. A Gold page and a Free page are otherwise the same product. */
.bui .badge--tier {
  background: var(--bui-surface); color: var(--bui-ink); padding: 3px 10px 3px 4px;
  box-shadow: inset 0 0 0 2px var(--tier-accent, var(--bui-line));
}
.bui .tier-mark {
  width: 19px; height: 19px; border-radius: var(--bui-r-full); display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--tier-accent, #94a3b8) 18%, #fff);
  color: var(--tier-accent, #64748b); font-size: 10px; font-weight: 900; overflow: hidden;
}
.bui .tier-mark img { width: 100%; height: 100%; object-fit: contain; }
.bui .tier-mark .i { width: 11px; height: 11px; }
.bui .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: var(--bui-r-full); border: 1px solid var(--bui-line);
  background: var(--bui-surface); color: var(--bui-subtle);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: border-color var(--bui-fast), background var(--bui-fast), color var(--bui-fast);
}
.bui .chip:hover { border-color: var(--bui-brand); color: var(--bui-brand); background: var(--bui-brand-soft); }
.bui .chip .i { width: 14px; height: 14px; color: var(--bui-muted); }
.bui .chip:hover .i { color: var(--bui-brand); }
.bui .chip--error { border-color: var(--bui-danger-line); background: var(--bui-danger-soft); color: var(--bui-danger); cursor: default; }

/* ── Status band cell — plan · usage · health, three equal cells ─────────── */
.bui .band {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--bui-s6);
  background: var(--bui-surface); border: 1px solid var(--bui-line);
  border-radius: var(--bui-r-xl); box-shadow: var(--bui-e1); overflow: hidden;
}
.bui .cell {
  padding: var(--bui-s5) var(--bui-s6); border-right: 1px solid var(--bui-line); min-width: 0;
  display: flex; flex-direction: column; gap: var(--bui-s3);
}
.bui .cell:last-child { border-right: 0; }
.bui .cell-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bui-s3); }
.bui .cell-body { display: flex; flex-direction: column; gap: 6px; flex: 0 1 auto; }
/* Actions attach to their own cell, not to a shared baseline across cells. */
.bui .cell-foot { display: flex; align-items: center; gap: var(--bui-s2); margin-top: 6px; padding-top: var(--bui-s1); flex-wrap: wrap; }
.bui .lead { display: flex; align-items: baseline; gap: 8px; font-size: inherit; font-weight: inherit; }
.bui .lead small { font-size: 13px; font-weight: 700; color: var(--bui-muted); letter-spacing: 0; }

/* ── Meter that FILLS as the allowance is used ───────────────────────────── */
.bui .meter { display: flex; flex-direction: column; gap: 6px; }
.bui .meter-track {
  height: 8px; border-radius: var(--bui-r-full); background: var(--bui-sunken);
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .05);
}
.bui .meter-fill {
  height: 100%; border-radius: var(--bui-r-full);
  background: linear-gradient(90deg, var(--bui-brand), var(--bui-brand-lift));
  width: var(--pct, 0%); min-width: 6px;
  transition: width var(--bui-measure) var(--bui-ease-base);
}
.bui .meter--warn .meter-fill { background: linear-gradient(90deg, #b45309, #d97706); }
.bui .meter-legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--bui-muted); font-variant-numeric: tabular-nums; }

/* ── Health ring ─────────────────────────────────────────────────────────── */
.bui .ringrow { display: flex; align-items: center; gap: var(--bui-s4); }
.bui .ring {
  --pct: 0;
  position: relative; width: 76px; height: 76px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--bui-brand) calc(var(--pct) * 1%), var(--bui-sunken) 0);
  transition: background var(--bui-measure) var(--bui-ease-base);
}
.bui .ring::before { content: ""; position: absolute; width: 58px; height: 58px; border-radius: 50%; background: var(--bui-surface); }
.bui .ring > span {
  position: relative; font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; color: var(--bui-ink);
}
.bui .ring > span small { font-size: 11px; font-weight: 700; color: var(--bui-muted); }
.bui .ring.is-done { --pct: 100; }
.bui .ring.is-done > span { color: var(--bui-ok); }
.bui .ring .i { width: 26px; height: 26px; color: var(--bui-ok); }
.bui .tasks { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── KPI with sparkline ──────────────────────────────────────────────────── */
.bui .strip {
  margin-top: var(--bui-s4); background: var(--bui-surface); border: 1px solid var(--bui-line);
  border-radius: var(--bui-r-xl); box-shadow: var(--bui-e1); padding: var(--bui-s5) var(--bui-s6);
}
.bui .strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bui-s4); flex-wrap: wrap; }
.bui .strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bui-s4); margin-top: var(--bui-s4); }
.bui .metric { position: relative; display: flex; flex-direction: column; gap: 3px; padding-left: var(--bui-s4); border-left: 1px solid var(--bui-line); min-width: 0; }
.bui .metric:first-child { padding-left: 0; border-left: 0; }
.bui .metric dt { font-size: 12px; font-weight: 700; color: var(--bui-muted); }
.bui .metric dd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bui .metric .v { font-size: 25px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* Direction carries an arrow as well as a colour — colour is never the only
   signal (WCAG 1.4.1). */
.bui .delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
.bui .delta--up { color: var(--bui-ok); }
.bui .delta--down { color: var(--bui-danger); }
.bui .delta--flat { color: var(--bui-muted); font-weight: 700; }
.bui .delta .i { width: 11px; height: 11px; }
.bui .delta--down .i { transform: rotate(90deg); }
.bui .spark { margin-top: 5px; height: 26px; width: 100%; overflow: visible; }
.bui .spark path.line { fill: none; stroke: var(--bui-brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bui .spark path.area { fill: url(#bpSparkFade); stroke: none; }
.bui .spark circle { fill: var(--bui-brand); }

/* ── Rail — a list of buttons, not a tablist ─────────────────────────────── */
.bui .rail {
  position: sticky; top: var(--bui-s4); background: var(--bui-surface); border: 1px solid var(--bui-line);
  border-radius: var(--bui-r-xl); box-shadow: var(--bui-e1); padding: var(--bui-s2);
  display: flex; flex-direction: column; gap: 2px;
}
.bui .rail-h { padding: 10px 12px 8px; }
.bui .rail-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 9px 11px; border-radius: var(--bui-r-md);
  border: 1px solid transparent; background: transparent; color: var(--bui-label);
  font-size: 13.5px; font-weight: 700; cursor: pointer; min-height: 38px;
  transition: background var(--bui-fast), color var(--bui-fast);
}
.bui .rail-item:hover { background: var(--bui-chip); color: var(--bui-ink); }
.bui .rail-item[aria-current="true"] { background: var(--bui-brand-soft); color: var(--bui-on-soft); border-color: var(--bui-brand-edge); }
.bui .rail-item .ct { font-size: 11.5px; font-weight: 900; color: var(--bui-muted); font-variant-numeric: tabular-nums; }
.bui .rail-item[aria-current="true"] .ct { color: var(--bui-on-soft); }
/* The dot is a proportion; the count beside it is the same fact in words, so
   the dot is never the only signal. */
.bui .dot { width: 8px; height: 8px; border-radius: var(--bui-r-full); flex: none; background: conic-gradient(var(--bui-brand) calc(var(--pct, 0) * 1%), var(--bui-line-strong) 0); }
.bui .dot--full { background: var(--bui-ok); }
.bui .dot--empty { background: var(--bui-line-strong); box-shadow: inset 0 0 0 1px #c3cbd8; }
.bui .rail-item .warn { width: 15px; height: 15px; color: var(--bui-danger); }

/* ── Pane ────────────────────────────────────────────────────────────────── */
.bui .pane {
  background: var(--bui-surface); border: 1px solid var(--bui-line); border-radius: var(--bui-r-xl);
  box-shadow: var(--bui-e1); padding: var(--bui-s6) var(--bui-s6) var(--bui-s8); min-width: 0;
}
.bui .pane-head { padding-bottom: var(--bui-s4); border-bottom: 1px solid var(--bui-line); margin-bottom: var(--bui-s5); }
.bui .pane-head p { margin-top: 5px; color: var(--bui-subtle); font-size: 13.5px; max-width: 64ch; }
/* A pane that stands on its own rather than inside the workspace grid — the two
   "not available right now" screens, where there is no rail and no preview. */
.bui .pane--alone { margin-top: var(--bui-s6); }
/* The actions that belong to one field or one pane: the rename's button, an
   upload, a retry pair. Full width inside the field grid so a button never
   half-fills a column. */
.bui .pane-acts { display: flex; gap: var(--bui-s2); flex-wrap: wrap; margin-top: var(--bui-s3); }
.bui .fields > .pane-acts { grid-column: 1 / -1; }
.bui .panes { min-width: 0; }

/* ── Field: label · control · help · example · error ─────────────────────── */
.bui .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bui-s5) var(--bui-s4); }
.bui .f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bui .f--full { grid-column: 1 / -1; }
.bui .f-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bui .f-label label, .bui .f-label .lbl { font-size: 13px; font-weight: 900; color: var(--bui-label); }
.bui .f-label .opt { font-size: 11.5px; font-weight: 700; color: var(--bui-muted); }
.bui .f-help { font-size: 12.5px; line-height: 1.45; color: var(--bui-muted); max-width: 60ch; }
.bui .f-eg { font-size: 12px; color: var(--bui-muted); }
.bui .f-eg b { font-weight: 700; color: var(--bui-subtle); }
.bui input[type="text"], .bui input[type="url"], .bui input[type="email"],
.bui input[type="tel"], .bui input[type="time"], .bui select, .bui textarea {
  width: 100%; min-height: 40px; padding: 9px 12px; border-radius: var(--bui-r-md);
  border: 1px solid var(--bui-line-strong); background: var(--bui-surface); color: var(--bui-ink);
  font-size: 14px; transition: border-color var(--bui-fast), box-shadow var(--bui-fast);
}
.bui textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.bui input::placeholder, .bui textarea::placeholder { color: #9aa4b2; }
.bui input:hover, .bui select:hover, .bui textarea:hover { border-color: #bac3d1; }
.bui input:focus-visible, .bui select:focus-visible, .bui textarea:focus-visible { border-color: var(--bui-brand); box-shadow: var(--bui-focus); }
/* Disabled reads as a sunken, muted FIELD, not as a washed-out one: the browser's
   own 0.7 opacity on a disabled select would dim the sunken fill a second time. */
.bui input[disabled], .bui select[disabled], .bui textarea[disabled] { background: var(--bui-sunken); color: var(--bui-muted); cursor: not-allowed; opacity: 1; }
.bui .f-err { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--bui-danger); }
.bui .f-err .i { width: 14px; height: 14px; margin-top: 2px; flex: none; }
.bui .f.is-error input, .bui .f.is-error textarea, .bui .f.is-error select { border-color: var(--bui-danger); background: #fffbfb; }
.bui .f-ok { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--bui-ok); }
.bui .f-ok .i { width: 14px; height: 14px; flex: none; }
.bui .f-count { font-size: 11.5px; color: var(--bui-muted); font-variant-numeric: tabular-nums; text-align: right; }
/* The tally changes colour only near the cap, and the number itself is the signal — colour is never
   the only one (rule 16). Same two states the editor's counter uses. */
.bui .f-count[data-bp-count-state="near"] { color: var(--bui-warn-ink); font-weight: 800; }
.bui .f-count[data-bp-count-state="full"] { color: var(--bui-danger); font-weight: 800; }
/* EN and বাংলা are one decision, made once — so they sit side by side. */
.bui .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bui-s4); grid-column: 1 / -1; }
.bui .pair .f { min-width: 0; }
.bui .langtag {
  display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 5px;
  background: var(--bui-chip); color: var(--bui-muted); font-size: 10px; font-weight: 900; letter-spacing: .06em;
}
.bui .prefix {
  display: flex; align-items: stretch; border: 1px solid var(--bui-line-strong);
  border-radius: var(--bui-r-md); overflow: hidden; background: var(--bui-surface);
  transition: border-color var(--bui-fast), box-shadow var(--bui-fast);
}
.bui .prefix:focus-within { border-color: var(--bui-brand); box-shadow: var(--bui-focus); }
.bui .prefix span {
  display: grid; place-items: center; padding: 0 2px 0 12px; background: var(--bui-sunken);
  color: var(--bui-subtle); font-size: 13px; white-space: nowrap; border-right: 1px solid var(--bui-line);
}
.bui .prefix input { border: 0; border-radius: 0; min-height: 38px; }
.bui .prefix input:focus-visible { box-shadow: none; }
.bui .lock {
  display: flex; gap: 7px; align-items: flex-start; padding: 9px 11px; border-radius: var(--bui-r-md);
  background: var(--bui-warn-soft); color: var(--bui-warn-ink); font-size: 12.5px; font-weight: 700;
}
.bui .lock .i { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.bui .sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.bui .sugg-lead { font-size: 12.5px; color: var(--bui-muted); font-weight: 700; }

/* ── Week grid (opening hours) ───────────────────────────────────────────── */
.bui .week { border: 1px solid var(--bui-line); border-radius: var(--bui-r-lg); overflow: hidden; grid-column: 1 / -1; }
.bui .wrow {
  display: grid; grid-template-columns: 120px 96px minmax(0, 1fr) minmax(0, 1fr); gap: var(--bui-s3);
  align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--bui-line); font-size: 13.5px;
}
.bui .wrow:last-child { border-bottom: 0; }
.bui .wrow:nth-child(odd) { background: #fbfcfd; }
.bui .wrow.is-closed { color: var(--bui-muted); }
/* The closed day's boxes are read-only, not disabled (a disabled input posts
   nothing and would truncate the week's indexed arrays), so the sunken,
   not-for-you look has to be drawn rather than inherited from :disabled. */
.bui .wrow.is-closed .tfield input,
.bui .wrow input[readonly] { background: var(--bui-sunken); color: var(--bui-muted); cursor: not-allowed; }
.bui .wday { font-weight: 700; }
.bui .check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--bui-subtle); cursor: pointer; }
.bui .check input { width: 17px; height: 17px; accent-color: var(--bui-brand); cursor: pointer; }
/* The visible caption is aria-hidden; each box carries its own aria-label
   ("Monday opens" / "Monday closes") so the two are told apart by voice. */
.bui .tcap { font-size: 11px; font-weight: 900; color: var(--bui-muted); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 3px; }

/* ── Dropzone — a real <label> around a visually-hidden file input ───────── */
.bui .drop {
  position: relative; display: grid; place-items: center; gap: 8px; text-align: center; padding: var(--bui-s6);
  border: 1.5px dashed var(--bui-line-strong); border-radius: var(--bui-r-lg); background: var(--bui-sunken);
  color: var(--bui-subtle); cursor: pointer;
  transition: border-color var(--bui-fast), background var(--bui-fast), color var(--bui-fast);
}
.bui .drop:hover { border-color: var(--bui-brand); background: var(--bui-brand-soft); color: var(--bui-on-soft); }
.bui .drop:focus-within { border-color: var(--bui-brand); box-shadow: var(--bui-focus); }
.bui .drop.is-over { border-color: var(--bui-brand); border-style: solid; background: var(--bui-brand-soft); color: var(--bui-on-soft); }
.bui .drop.is-disabled { opacity: .55; cursor: not-allowed; border-style: dashed; }
.bui .drop.is-error { border-color: var(--bui-danger); background: var(--bui-danger-soft); color: var(--bui-danger); }
.bui .drop .i { width: 24px; height: 24px; opacity: .7; }
.bui .drop b { font-size: 13.5px; }
.bui .drop small { font-size: 12px; color: var(--bui-subtle); }
.bui .drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bui .shot { display: flex; gap: var(--bui-s4); align-items: flex-start; padding: var(--bui-s4); border: 1px solid var(--bui-line); border-radius: var(--bui-r-lg); background: var(--bui-surface); }
.bui .ph {
  background: linear-gradient(135deg, #e7ebf2, #f4f6fa); border: 1px solid var(--bui-line);
  display: grid; place-items: center; color: var(--bui-muted); flex: none;
  border-radius: var(--bui-r-md); overflow: hidden;
}
.bui .ph img { width: 100%; height: 100%; object-fit: cover; }
.bui .ph .i { width: 20px; height: 20px; opacity: .6; }
.bui .ph--logo { width: 72px; height: 72px; border-radius: 16px; }
.bui .ph--cover { width: 180px; height: 60px; }
.bui .shot-body { flex: 1; min-width: 0; }
.bui .shot-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Real progress from the upload, never a spinner: a 2.4 MB photo on a Dhaka
   mobile connection is a minute of somebody's life and they should see it move. */
.bui .prog { height: 6px; border-radius: var(--bui-r-full); background: var(--bui-sunken); overflow: hidden; margin-top: 8px; }
.bui .prog i { display: block; height: 100%; background: var(--bui-brand); width: var(--pct, 0%); border-radius: var(--bui-r-full); transition: width var(--bui-base) linear; }
.bui .prog-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

/* ── Crop stage ──────────────────────────────────────────────────────────── */
.bui .crop { border: 1px solid var(--bui-line); border-radius: var(--bui-r-lg); overflow: hidden; background: #0f172a; }
.bui .crop-stage {
  position: relative; height: 190px; display: grid; place-items: center; overflow: hidden;
  background: repeating-conic-gradient(#1e293b 0 25%, #172033 0 50%) 0 0 / 16px 16px;
  touch-action: none;
}
.bui .crop-img { position: absolute; transform-origin: center; user-select: none; -webkit-user-drag: none; }
.bui .crop-mask { position: absolute; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .6); border: 2px solid #fff; border-radius: 4px; pointer-events: none; }
/* The logo is cropped to the circle it is actually drawn in on ads and in chat,
   never to a square that something else then clips. */
.bui .crop-mask--1x1 { width: 150px; height: 150px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.bui .crop-mask--3x1 { width: 330px; height: 110px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.bui .crop-bar { display: flex; align-items: center; gap: var(--bui-s3); padding: 10px 12px; background: var(--bui-surface); border-top: 1px solid var(--bui-line); flex-wrap: wrap; }
.bui .crop-bar input[type="range"] { flex: 1; min-width: 100px; accent-color: var(--bui-brand); }

/* ── Live preview ────────────────────────────────────────────────────────── */
.bui .pv { position: sticky; top: var(--bui-s4); display: flex; flex-direction: column; gap: var(--bui-s3); max-height: calc(100vh - var(--bui-s8)); min-height: 0; }
.bui .pv-wrap { min-width: 0; }
.bui .pv-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bui-s3); }
.bui .pv-seg { display: inline-flex; padding: 2px; background: var(--bui-sunken); border-radius: var(--bui-r-full); gap: 2px; }
.bui .pv-seg button { border: 0; background: transparent; border-radius: var(--bui-r-full); padding: 4px 10px; font-size: 12px; font-weight: 900; color: var(--bui-muted); cursor: pointer; }
.bui .pv-seg button[aria-pressed="true"] { background: var(--bui-surface); color: var(--bui-ink); box-shadow: var(--bui-e1); }
.bui .pv-frame {
  background: var(--bui-surface); border: 1px solid var(--bui-line); border-radius: var(--bui-r-xl);
  box-shadow: var(--bui-e2); overflow: hidden; margin-inline: auto; width: 100%;
  overflow-y: auto; scrollbar-width: thin;
  transition: max-width var(--bui-base) var(--bui-ease-base);
}
.bui .pv-frame[data-device="phone"] { max-width: 320px; }
.bui .pv-cover { aspect-ratio: 3 / 1; background: linear-gradient(135deg, #eef1f6, #e3e8f0); position: relative; display: grid; place-items: center; color: var(--bui-muted); font-size: 11.5px; font-weight: 700; overflow: hidden; }
.bui .pv-cover img { width: 100%; height: 100%; object-fit: cover; }
.bui .pv-body { padding: var(--bui-s4) var(--bui-s5) var(--bui-s5); display: flex; flex-direction: column; gap: 10px; }
.bui .pv-idrow { display: flex; gap: 12px; align-items: flex-start; margin-top: -34px; }
.bui .pv-logo {
  width: 56px; height: 56px; border-radius: 14px; border: 3px solid var(--bui-surface); flex: none;
  background: linear-gradient(145deg, #fff, #eef1f6); display: grid; place-items: center;
  font-size: 20px; font-weight: 900; color: var(--bui-brand); box-shadow: var(--bui-e1); overflow: hidden;
}
.bui .pv-logo img { width: 100%; height: 100%; object-fit: cover; }
.bui .pv-name { font-size: 17px; font-weight: 900; letter-spacing: -.02em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bui .pv-name .seal { width: 15px; height: 15px; }
.bui .pv-bn { font-family: var(--bui-font-bn); font-size: 13.5px; color: var(--bui-subtle); }
.bui .pv-tag { font-size: 13px; color: var(--bui-subtle); }
.bui .pv-tag.is-empty, .bui .pv-line.is-empty { color: #9aa4b2; font-style: italic; }
.bui .pv-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.bui .pv-act { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: var(--bui-r-full); background: var(--bui-brand); color: var(--bui-brand-contrast); font-size: 12px; font-weight: 900; }
.bui .pv-act--q { background: var(--bui-chip); color: var(--bui-subtle); }
.bui .pv-act .i { width: 13px; height: 13px; }
.bui .pv-line { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--bui-subtle); }
.bui .pv-line .i { width: 14px; height: 14px; color: var(--bui-muted); flex: none; }
.bui .pv-tags { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
.bui .pv-foot { font-size: 12px; color: var(--bui-muted); padding-top: 2px; }
.bui .pv-toggle { display: none; margin-left: auto; flex: none; }

/* ── Save bar — the only thing on the page that casts a shadow upward ────── */
.bui .savebar {
  position: sticky; bottom: 0; z-index: 30; margin-top: var(--bui-s5);
  background: rgba(255, 255, 255, .93); backdrop-filter: blur(10px); box-shadow: var(--bui-e3);
  border-radius: var(--bui-r-xl) var(--bui-r-xl) 0 0;
  transition: transform var(--bui-base) var(--bui-ease-base), opacity var(--bui-fast);
}
/* Hidden ONLY where a script is running to bring it back — see hub.js's `is-js`.
   `visibility` and not opacity alone, because an opacity-0 bar is still a tab
   stop, and a keyboard user was landing on an invisible Save on every load. */
.bui.is-js .savebar[data-shown="false"] {
  transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none;
}
.bui .savebar[data-shown="true"] { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.bui .savebar-in { max-width: 1320px; margin-inline: auto; padding: 12px var(--bui-s6); display: flex; align-items: center; gap: var(--bui-s4); flex-wrap: wrap; }
.bui .savebar .count { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 900; color: var(--bui-ink); }
.bui .savebar .count .i { width: 16px; height: 16px; color: var(--bui-brand); flex: none; }
.bui .savebar .spacer { flex: 1; }
.bui .savebar .kbd { font-size: 11px; font-weight: 700; color: var(--bui-muted); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--bui-line); background: var(--bui-surface); font-family: ui-monospace, Menlo, monospace; }
.bui .savebar.is-error { background: var(--bui-danger-soft); }
.bui .savebar.is-error .count, .bui .savebar.is-error .count .i { color: var(--bui-danger); }
.bui .savebar.is-success { background: var(--bui-ok-soft); }
.bui .savebar.is-success .count, .bui .savebar.is-success .count .i { color: var(--bui-ok); }
.bui .savebar.is-busy .count .i { color: var(--bui-muted); }
.bui .savebar.is-locked .count, .bui .savebar.is-locked .count .i { color: var(--bui-muted); }

/* ── Alerts, toast, and the honest "unavailable" ─────────────────────────── */
.bui .alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--bui-r-lg); font-size: 13.5px;
  margin: var(--bui-s4) 0 0; border: 0; position: static; }
.bui .alert .i { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.bui .alert--err { background: var(--bui-danger-soft); color: var(--bui-danger); box-shadow: inset 0 0 0 1px var(--bui-danger-line); }
.bui .alert--warn { background: var(--bui-warn-soft); color: var(--bui-warn-ink); box-shadow: inset 0 0 0 1px var(--bui-warn-line); }
.bui .alert--ok { background: var(--bui-ok-soft); color: var(--bui-ok); box-shadow: inset 0 0 0 1px var(--bui-ok-line); }
.bui .alert--info { background: var(--bui-chip); color: var(--bui-subtle); box-shadow: inset 0 0 0 1px var(--bui-line); }
/* An unresolved value is said to be unavailable; it is never rendered as if it
   were real data (Rule 16). */
/* --bui-subtle, not --bui-muted: muted grey (#64748b) on the sunken fill
   (#f1f3f7) measures 4.29:1, under the 4.5:1 AA floor for text this size. The
   file's 4.8:1 note was measured on white. Same reason at .prefix span and
   .drop small, which sit on the same fill. */
.bui .unavail { display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px; border-radius: var(--bui-r-md); background: var(--bui-sunken); color: var(--bui-subtle); font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--bui-line); }
.bui .unavail .i { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.bui-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 1080;
  display: flex; align-items: center; gap: 10px; max-width: min(92vw, 460px);
  padding: 11px 16px; border-radius: var(--bui-r-lg, 14px); background: #0f172a; color: #fff;
  font-size: 13.5px; font-weight: 700; box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .6);
  opacity: 0; pointer-events: none; transition: opacity 240ms cubic-bezier(.2, .6, .2, 1), transform 240ms cubic-bezier(.2, .6, .2, 1);
}
.bui-toast[data-shown="true"] { opacity: 1; transform: translate(-50%, 0); }
.bui-toast .i { width: 17px; height: 17px; flex: none; }
.bui-toast--err { background: #7f1d1d; }
.bui-toast--ok { background: #14532d; }

/* ── Overflow menu ───────────────────────────────────────────────────────── */
.bui .ovf { position: relative; }
.bui .ovf-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 224px; padding: 6px;
  background: var(--bui-surface); border: 1px solid var(--bui-line); border-radius: var(--bui-r-lg);
  box-shadow: var(--bui-e2); display: none;
}
.bui .ovf-menu[data-open="true"] { display: block; }
.bui .ovf-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--bui-r-sm); color: var(--bui-label); font-size: 13.5px; font-weight: 700; }
.bui .ovf-menu a:hover { background: var(--bui-chip); color: var(--bui-ink); text-decoration: none; }
.bui .ovf-menu a .i { width: 17px; height: 17px; color: var(--bui-muted); flex: none; }
.bui .ovf-menu hr { margin: 5px 4px; }
.bui .ovf-menu .muted { color: var(--bui-muted); font-size: 11.5px; font-weight: 700; padding: 7px 10px 3px; letter-spacing: .07em; text-transform: uppercase; }

/* ── Identity header ─────────────────────────────────────────────────────── */
.bui .idhead { background: var(--bui-surface); border-bottom: 1px solid var(--bui-line); }
/* NEITHER min-height NOR max-height on a box with an aspect-ratio: a limit in
   one axis is transferred through the ratio to the other, so a min-height
   becomes a minimum WIDTH and overflows the phone frame. The height is set by
   the ratio alone, per breakpoint. */
.bui .cover {
  position: relative; aspect-ratio: 7 / 1; overflow: hidden;
  background:
    radial-gradient(120% 160% at 12% 0%, var(--bui-brand-soft) 0%, transparent 55%),
    linear-gradient(135deg, #eef1f6, #e3e8f0 60%, #f4f6fa);
}
.bui .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bui .cover::after { content: ""; position: absolute; inset: auto 0 0 0; height: 56%; background: linear-gradient(to top, rgba(15, 23, 42, .28), transparent); pointer-events: none; }
.bui .cover-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--bui-muted); text-align: center; padding-inline: var(--bui-s4); }
.bui .cover-empty .i { width: 26px; height: 26px; opacity: .5; }
.bui .cover-empty b { font-size: 13px; }
.bui .cover-empty small { font-size: 12px; }
.bui .cover-edit { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); }
.bui .idbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--bui-s5); align-items: center; padding: 0 0 var(--bui-s5); }
.bui .idlogo {
  width: 88px; height: 88px; border-radius: 20px; margin-top: -30px; position: relative; flex: none;
  background: linear-gradient(145deg, #fff, #eef1f6); border: 3px solid var(--bui-surface);
  box-shadow: var(--bui-e2); display: grid; place-items: center; overflow: visible;
}
.bui .idlogo > span { font-size: 30px; font-weight: 900; color: var(--bui-brand); letter-spacing: -.04em; }
.bui .idlogo > img { width: 100%; height: 100%; object-fit: cover; border-radius: 17px; }
.bui .idlogo-cam {
  position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: var(--bui-r-full);
  background: var(--bui-surface); border: 1px solid var(--bui-line-strong); display: grid; place-items: center;
  box-shadow: var(--bui-e1); cursor: pointer; color: var(--bui-subtle); padding: 0;
}
.bui .idlogo-cam .i { width: 15px; height: 15px; }
/* It is a link now, so the generic anchor hover would underline an icon. */
.bui .idlogo-cam:hover { color: var(--bui-ink); text-decoration: none; }
/* min-width:0 so a long business name wraps inside the grid column instead of
   pushing the action buttons off the measure. */
.bui .idwho { min-width: 0; }
.bui .idname { display: flex; align-items: center; gap: var(--bui-s3); flex-wrap: wrap; }
.bui .idname h1 { font-size: 24px; font-weight: 900; letter-spacing: -.025em; }
.bui .seal { width: 19px; height: 19px; color: var(--bui-ok); flex: none; }
.bui .idmeta { display: flex; align-items: center; gap: var(--bui-s3); flex-wrap: wrap; margin-top: 5px; font-size: 13px; color: var(--bui-muted); }
.bui .idurl { display: inline-flex; align-items: center; gap: var(--bui-s2); min-width: 0; flex-wrap: wrap; }
.bui .idmeta .idlink { color: var(--bui-subtle); font-weight: 700; word-break: break-word; }
.bui .idmeta .sep { width: 3px; height: 3px; border-radius: var(--bui-r-full); background: var(--bui-line-strong); }
.bui .idacts { display: flex; align-items: center; gap: var(--bui-s2); flex: none; }

/* ── Workspace grid ──────────────────────────────────────────────────────── */
.bui .work { display: grid; grid-template-columns: 236px minmax(0, 1fr) 400px; gap: var(--bui-s6); align-items: start; margin-top: var(--bui-s6); padding-bottom: var(--bui-s5); }
.bui .work--2 { grid-template-columns: minmax(0, 1fr) 400px; }
.bui .crumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--bui-muted); padding: 18px 0 10px; flex-wrap: wrap; }
.bui .crumb a { font-weight: 700; }
.bui .crumb .i { width: 13px; height: 13px; }

/* ── First-day greeting ──────────────────────────────────────────────────── */
.bui .hello {
  background: var(--bui-surface); border: 1px solid var(--bui-line); border-radius: var(--bui-r-xl);
  box-shadow: var(--bui-e1); padding: var(--bui-s8) var(--bui-s8) var(--bui-s6); margin-top: var(--bui-s6);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--bui-s8);
}
.bui .steps { display: flex; flex-direction: column; gap: 10px; margin-top: var(--bui-s5); }
.bui .step {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--bui-s3);
  padding: 13px 15px; border: 1px solid var(--bui-line); border-radius: var(--bui-r-lg); background: var(--bui-surface);
  transition: border-color var(--bui-fast), box-shadow var(--bui-fast);
}
.bui .step:hover { border-color: var(--bui-line-strong); box-shadow: var(--bui-e1); }
.bui .step-n { width: 26px; height: 26px; border-radius: var(--bui-r-full); display: grid; place-items: center; flex: none; background: var(--bui-brand-soft); color: var(--bui-on-soft); font-size: 12px; font-weight: 900; }
.bui .step.is-done .step-n { background: var(--bui-ok-soft); color: var(--bui-ok); }
.bui .step-t { font-size: 13.5px; font-weight: 900; display: block; }
.bui .step-s { font-size: 12.5px; color: var(--bui-muted); display: block; }
.bui .plancard { border: 1px solid var(--bui-line); border-radius: var(--bui-r-xl); padding: var(--bui-s5); background: linear-gradient(180deg, #fff, #fbfcfe); display: flex; flex-direction: column; gap: 10px; height: max-content; }
.bui .plancard > .badge { align-self: flex-start; }
.bui .plancard > .btn { align-self: stretch; }
.bui .plancard ul { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--bui-subtle); }
.bui .plancard li { display: flex; gap: 8px; align-items: flex-start; }
.bui .plancard li .i { width: 15px; height: 15px; color: var(--bui-ok); flex: none; margin-top: 2px; }
.bui .nothing { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: var(--bui-s4); padding: var(--bui-s5) var(--bui-s6); background: var(--bui-surface); border: 1px solid var(--bui-line); border-radius: var(--bui-r-xl); box-shadow: var(--bui-e1); }

.bui .nothing-body { flex: 1; min-width: 220px; }
.bui .i--lg { width: 20px; height: 20px; color: var(--bui-muted); flex: none; }
/* The greeting's own copy, and the two quiet provenance lines that keep the screen
   honest about where a figure came from. */
.bui .bui-hello-lead { margin-top: 10px; color: var(--bui-subtle); }
.bui .bui-plancard-src { font-size: 11.5px; }
.bui .bui-health-note { max-width: 26ch; }
.bui .bui-strip-foot { margin-top: var(--bui-s3); }
/* ═══ Container queries: 1340 / 1040 / 900 / 660 ═══════════════════════════ */
@container bui (max-width: 1340px) {
  .bui .work { grid-template-columns: 212px minmax(0, 1fr) 352px; gap: var(--bui-s5); }
  .bui .work--2 { grid-template-columns: minmax(0, 1fr) 352px; }
  .bui .idlogo { width: 76px; height: 76px; border-radius: 18px; }
  .bui .idname h1 { font-size: 22px; }
  .bui .cover { aspect-ratio: 6 / 1; }
}
@container bui (max-width: 1040px) {
  /* Rail becomes a scrolling tab row; the preview becomes a toggle that opens
     under the fields. */
  .bui .work, .bui .work--2 { grid-template-columns: minmax(0, 1fr); gap: var(--bui-s4); }
  .bui .rail {
    position: static; flex-direction: row; overflow-x: auto; padding: 6px;
    border-radius: var(--bui-r-lg); scrollbar-width: thin;
    scroll-snap-type: x proximity;
    /* The fade at the trailing edge is the affordance macOS takes away by hiding
       its overlay scrollbar: a row that merely stops reads as a row that ends. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .bui .rail-item { scroll-snap-align: start; }
  .bui .rail-h { display: none; }
  .bui .rail-item { width: auto; flex: none; grid-template-columns: auto auto auto; white-space: nowrap; }
  .bui .pv { position: static; max-height: none; }
  .bui .pv-wrap[data-open="false"] { display: none; }
  .bui .pv-toggle { display: inline-flex; }
  .bui .band { grid-template-columns: 1fr; }
  .bui .cell { border-right: 0; border-bottom: 1px solid var(--bui-line); }
  .bui .cell:last-child { border-bottom: 0; }
  .bui .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bui-s4) var(--bui-s5); }
  .bui .metric:nth-child(3) { padding-left: 0; border-left: 0; }
  .bui .hello { grid-template-columns: minmax(0, 1fr); gap: var(--bui-s6); padding: var(--bui-s6); }
  .bui .cover { aspect-ratio: 5 / 1; }
}
@container bui (max-width: 900px) {
  .bui .idbar { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--bui-s3); }
  .bui .idacts { grid-column: 1 / -1; }
}
@container bui (max-width: 660px) {
  .bui .idbar { grid-template-columns: minmax(0, 1fr); }
  .bui .idacts { flex-wrap: wrap; }
  .bui .idacts .btn--primary { flex: 1 1 100%; }
  .bui .idacts > .btn:nth-child(2) { flex: 1; }
  .bui .idmeta { row-gap: 2px; }
  /* A separator dot that leads a wrapped row reads as a bullet, not a divider. */
  .bui .idmeta .sep { display: none; }
  .bui .idlogo { width: 64px; height: 64px; border-radius: 16px; margin-top: -24px; }
  .bui .idlogo > span { font-size: 24px; }
  .bui .idname h1 { font-size: 19px; }
  .bui .cover { aspect-ratio: 3.4 / 1; }
  /* At 115px tall the empty-state sentence and the button cannot both sit in the
     cover without colliding, so the button becomes the whole message. */
  .bui .cover-empty b, .bui .cover-empty small { display: none; }
  .bui .cover-empty { padding-bottom: 34px; }
  .bui .cover-edit { left: 50%; right: auto; transform: translateX(-50%); bottom: 12px; }
  .bui .fields { grid-template-columns: minmax(0, 1fr); }
  .bui .pair { grid-template-columns: minmax(0, 1fr); gap: var(--bui-s5); }
  .bui .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bui .metric .v { font-size: 21px; }
  .bui .pane { padding: var(--bui-s5) var(--bui-s4) var(--bui-s6); border-radius: var(--bui-r-lg); }
  .bui .wrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding: 10px 12px; }
  .bui .wrow .wday { grid-column: 1; }
  .bui .wrow .check { grid-column: 2; justify-self: end; }
  .bui .wrow .tfield { grid-column: span 1; }
  .bui .savebar-in { padding: 10px var(--bui-s4); gap: var(--bui-s2); }
  .bui .savebar .count { width: 100%; }
  /* `auto` rather than `0`: with a zero basis a long verb — "Create page and
     continue to your plan" — is crushed into half a phone's width and wraps to
     three lines. Basis auto lets the pair share the row when both are short and
     take a full-width row each when one is not. */
  .bui .savebar .btn { flex: 1 1 auto; }
  .bui .savebar .kbd { display: none; }
  .bui .band { border-radius: var(--bui-r-lg); }
  .bui .ring { width: 64px; height: 64px; }
  .bui .ring::before { width: 48px; height: 48px; }
  .bui .ring > span { font-size: 18px; }
  /* Every control on a phone is a 44px touch target. */
  .bui .btn { min-height: 44px; }
  .bui .btn--sm { min-height: 38px; }
}

/* ── Motion, and the one place it is switched off ────────────────────────────
   The 90ms press is deliberately kept: it carries feedback, not decoration.
   Everything else collapses to 1ms, so a value SNAPS to its new value — the
   number is the message, the sweep is not. */
@media (prefers-reduced-motion: reduce) {
  .bui *, .bui *::before, .bui *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .bui .savebar { transition: opacity 120ms !important; }
  .bui-toast { transition: opacity 120ms !important; }
  /* The press, restated: the blanket rule above is `*`, so without this line it
     collapsed the one piece of motion the comment promises to keep. The press is
     a colour and a 1px sink under the finger — feedback, not a sweep. */
  .bui .btn { transition: background 90ms linear, transform 90ms linear !important; }
}

/* ── Page head, and the tile a list of pages is made of ──────────────────────
   Shared because the owner's list, the admin's list and the directory all show
   the same object and must not look like three different products. */
.bui .headrow {
  display: flex; gap: var(--bui-s5); align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; padding: var(--bui-s8) 0 var(--bui-s2);
}
.bui .headrow h1 { font-size: 27px; font-weight: 900; letter-spacing: -.025em; line-height: 1.12; }
.bui .headrow p { margin-top: 8px; color: var(--bui-subtle); max-width: 66ch; }
.bui .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: var(--bui-s4); margin-top: var(--bui-s5); }
.bui .tile {
  background: var(--bui-surface); border: 1px solid var(--bui-line); border-radius: var(--bui-r-xl);
  box-shadow: var(--bui-e1); padding: var(--bui-s5); display: flex; flex-direction: column;
  gap: var(--bui-s3); min-width: 0;
}
.bui .tile-top { display: flex; gap: var(--bui-s3); align-items: center; min-width: 0; }
.bui .tile-logo {
  width: 48px; height: 48px; border-radius: 13px; flex: none; overflow: hidden; display: grid;
  place-items: center; background: linear-gradient(145deg, #fff, #eef1f6);
  border: 1px solid var(--bui-line); color: var(--bui-brand); font-size: 19px; font-weight: 900;
}
.bui .tile-logo img { width: 100%; height: 100%; object-fit: cover; }
.bui .tile-name { font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.bui .tile-handle { font-size: 12.5px; color: var(--bui-muted); word-break: break-word; }
.bui .tile-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bui .tile-acts { display: flex; gap: var(--bui-s2); flex-wrap: wrap; margin-top: auto; padding-top: var(--bui-s2); }
/* The cap meter above a list, which reads the same way as the ads meter inside a
   page: it FILLS as the allowance is used. */
.bui .capbar {
  display: flex; flex-direction: column; gap: 8px; margin-top: var(--bui-s4);
  padding: var(--bui-s4) var(--bui-s5); background: var(--bui-surface);
  border: 1px solid var(--bui-line); border-radius: var(--bui-r-lg); box-shadow: var(--bui-e1);
}
.bui .capbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bui-s3); flex-wrap: wrap; }
.bui .bui-create-lead, .bui .bui-create-notice { margin-top: 8px; }
.bui .bui-min { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════
   P9-E — THE OWNER TOOLS. Team · Reviews · Insights · Verification · QR & print.

   Everything above is shared with the hub, the editor and the list. What follows is
   shared by the five tool screens and by nothing else — the tab strip they all wear,
   and the five components each of them is made of. Nothing here re-declares a token,
   a colour or a radius: a rule that wanted one it could not find would be a rule that
   belongs above.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── The tab strip ───────────────────────────────────────────────────────────
   Seven destinations, one of them current. It scrolls sideways inside its own
   strip so the page body never does (rule 16 §1), and the current tab is scrolled
   into view on load — a strip that arrives showing no selection reads as a page
   with no place in it. */
.bui .toolnav {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-bottom: -1px;
  padding-top: 2px;
}
.bui .toolnav::-webkit-scrollbar { display: none; }
.bui .toolnav a {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 11px 13px 12px; font-size: 13.5px; font-weight: 700; color: var(--bui-subtle);
  border-bottom: 2px solid transparent; border-radius: var(--bui-r-sm) var(--bui-r-sm) 0 0;
  min-height: 44px; text-decoration: none;
  transition: color var(--bui-fast), background var(--bui-fast), border-color var(--bui-fast);
}
.bui .toolnav a:hover { color: var(--bui-ink); background: var(--bui-sunken); text-decoration: none; }
.bui .toolnav a[aria-current="page"] { color: var(--bui-brand); border-bottom-color: var(--bui-brand); }
.bui .toolnav a .i { width: 16px; height: 16px; color: var(--bui-muted); flex: none; }
.bui .toolnav a[aria-current="page"] .i { color: var(--bui-brand); }
/* The count on Reviews is WORK, not vanity: unanswered reviews, the only number on
   the bar that asks the owner to do something. Quiet when it is nought. */
.bui .toolnav a .ct {
  font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--bui-brand-contrast); background: var(--bui-brand);
  border-radius: var(--bui-r-full); padding: 1px 6px; min-width: 18px; text-align: center;
}
.bui .toolnav a .ct--quiet { background: var(--bui-chip); color: var(--bui-muted); }

/* The identity strip the tool screens wear: the editor's header without its cover
   photo, because these screens are about the page's affairs and not its looks. */
.bui .idstrip { display: flex; align-items: center; gap: var(--bui-s4); padding: var(--bui-s5) 0 var(--bui-s3); }
.bui .idstrip .idlogo {
  width: 52px; height: 52px; border-radius: 15px; margin-top: 0; border-width: 1px;
  border-color: var(--bui-line); box-shadow: var(--bui-e1);
}
.bui .idstrip .idlogo > span { font-size: 20px; }
.bui .idstrip .idlogo > img { border-radius: 14px; }
.bui .idstrip .idname h1 { font-size: 19px; }

/* ── Two columns: the work, and what explains it ─────────────────────────── */
.bui .wrap2 { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: var(--bui-s5); align-items: start; margin-top: var(--bui-s5); }
.bui .stack { display: flex; flex-direction: column; gap: var(--bui-s4); min-width: 0; }
.bui .toolbody { padding-bottom: var(--bui-s12); }

/* A pane whose rows reach its edges — a table, a list of reviews, a list of
   documents. The head keeps its padding; the rows supply their own. */
.bui .pane--flush { padding: 0; overflow: hidden; }
.bui .pane--flush .pane-head { padding: var(--bui-s5) var(--bui-s6) var(--bui-s4); margin-bottom: 0; }
.bui .pane-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bui-s4); flex-wrap: wrap; }
.bui .filters { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.bui .chip .ct { font-variant-numeric: tabular-nums; font-weight: 900; color: var(--bui-muted); }
.bui .chip[aria-current="true"] .ct { color: var(--bui-on-soft); }

/* ── A dense grid, which must LOOK scrollable (rule 16 §1) ───────────────── */
.bui .scrollframe { overflow-x: auto; scrollbar-color: var(--bui-line-strong) transparent; }
.bui .scrollframe::-webkit-scrollbar { height: 9px; }
.bui .scrollframe::-webkit-scrollbar-thumb { background: var(--bui-line-strong); border-radius: var(--bui-r-full); border: 2px solid var(--bui-surface); }
.bui .scrollframe:focus-visible { box-shadow: var(--bui-focus); border-radius: var(--bui-r-sm); }
.bui table.dgrid { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.bui table.dgrid th, .bui table.dgrid td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--bui-line); vertical-align: middle; }
.bui table.dgrid thead th {
  background: var(--bui-sunken); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bui-muted); font-weight: 900; white-space: nowrap;
}
.bui table.dgrid tbody tr:last-child td, .bui table.dgrid tbody tr:last-child th { border-bottom: 0; }
.bui table.dgrid tbody tr:hover { background: #fbfcfd; }
.bui table.dgrid td.n, .bui table.dgrid th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bui .scrollhint { font-size: 11.5px; color: var(--bui-subtle); padding: 8px 14px 12px; }

/* ── Avatars and people ──────────────────────────────────────────────────── */
.bui .av {
  width: 36px; height: 36px; border-radius: var(--bui-r-full); flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, #eef1f6, #e3e8f0); color: var(--bui-subtle);
  font-size: 13px; font-weight: 900; box-shadow: inset 0 0 0 1px var(--bui-line); overflow: hidden;
}
.bui .av img { width: 100%; height: 100%; object-fit: cover; }
.bui .av .i { width: 16px; height: 16px; }
.bui .av--owner { background: linear-gradient(145deg, #fde8f2, #fbd0e4); color: var(--bui-on-soft); box-shadow: inset 0 0 0 1px var(--bui-brand-edge); }
.bui .av--wait { background: var(--bui-warn-soft); color: var(--bui-warn-ink); box-shadow: inset 0 0 0 1px var(--bui-warn-line); }
.bui .av--off { background: var(--bui-sunken); color: #8a94a3; }
.bui .person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.bui .person b { display: block; font-size: 13.5px; font-weight: 900; }
.bui .person small { display: block; font-size: 12px; color: var(--bui-muted); }
.bui .person .you { font-size: 10.5px; font-weight: 900; color: var(--bui-subtle); background: var(--bui-chip); border-radius: 5px; padding: 1px 5px; margin-left: 5px; vertical-align: 1px; }

/* ── The seven grants, as a row of marks ─────────────────────────────────────
   Always in the same order. Reading ACROSS tells you one person; reading DOWN
   compares two without opening anything. Colour is never the only signal — an off
   mark is grey AND hollow, each carries a title, and the row carries one
   aria-label written as a sentence. */
.bui .gset { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.bui .gchip {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--bui-brand-soft); color: var(--bui-on-soft); box-shadow: inset 0 0 0 1px var(--bui-brand-edge);
}
.bui .gchip .i { width: 14px; height: 14px; }
.bui .gchip.is-off { background: var(--bui-sunken); color: #aab3c0; box-shadow: inset 0 0 0 1px var(--bui-line); }
.bui .gchip.is-owner { background: var(--bui-ok-soft); color: var(--bui-ok); box-shadow: inset 0 0 0 1px var(--bui-ok-line); }
.bui .presetname { display: block; font-size: 12.5px; font-weight: 900; margin-bottom: 5px; }
.bui .presetname small { font-weight: 700; color: var(--bui-muted); }
.bui tr.is-pending > * { background: #fffdf6; }
.bui tr.is-past td, .bui tr.is-past th { color: var(--bui-muted); }
.bui tr.is-past .person b { color: var(--bui-muted); font-weight: 700; }
/* One line, and the grid scrolls if that costs width. Two stacked buttons in a
   32px-tall row read as two separate rows to anybody scanning down the column. */
.bui .rowacts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.bui table.dgrid td:last-child { white-space: nowrap; }
.bui .copyrow { display: flex; gap: 6px; align-items: center; margin-top: 7px; flex-wrap: wrap; }
.bui .copyrow input { min-height: 32px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; background: var(--bui-sunken); max-width: 290px; }
.bui .seatrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bui-s3); }
.bui .legendkey { display: grid; gap: 8px; margin-top: var(--bui-s2); }
.bui .legendkey li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--bui-subtle); }
.bui .legendkey li .i { flex: none; margin-top: 1px; }
.bui .legendkey .gchip { margin-top: -2px; }

/* ── The grant switch ────────────────────────────────────────────────────────
   A real role="switch" with aria-checked, operated by Space. The track is 22px but
   the whole 44px row is the hit area. */
.bui .swrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start;
  padding: 11px; border-radius: var(--bui-r-md); border: 1px solid transparent; min-height: 44px;
  transition: background var(--bui-fast), border-color var(--bui-fast);
}
.bui .swrow:hover { background: var(--bui-sunken); }
.bui .swrow b { display: block; font-size: 13px; font-weight: 900; }
.bui .swrow small { display: block; font-size: 12px; color: var(--bui-muted); margin-top: 2px; }
/* A real checkbox wearing a switch, NOT a button that mirrors a hidden input: one
   control, one tab stop, Space toggles it, and the form posts and works with the
   script switched off entirely. */
.bui input.sw {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 38px; height: 22px; min-height: 0; padding: 0; margin: 1px 0 0; border: 0;
  border-radius: var(--bui-r-full); background: var(--bui-line-strong); cursor: pointer;
  transition: background var(--bui-fast) var(--bui-ease-base);
}
.bui input.sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: var(--bui-r-full); background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .3);
  transition: transform var(--bui-fast) var(--bui-ease-base);
}
.bui input.sw:checked { background: var(--bui-brand); }
.bui input.sw:checked::after { transform: translateX(16px); }
.bui input.sw:hover { background: #c3cbd8; }
.bui input.sw:checked:hover { background: var(--bui-brand-dark); }
.bui input.sw[disabled] { cursor: not-allowed; opacity: .6; }
/* Windows High Contrast paints no backgrounds, so the knob alone would carry the
   state — which is invisible there. The forced-colors border is the state. */
@media (forced-colors: active) {
  .bui input.sw { border: 1px solid CanvasText; }
  .bui input.sw:checked { background: Highlight; }
}
.bui .swrow label { display: block; cursor: pointer; }

/* Presets: choose by name first, adjust by switch after. Touch a switch and the
   preset falls to Custom — never a screen showing "Editor" while granting
   something Editor does not grant. */
.bui .presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.bui .preset {
  display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 11px 12px; cursor: pointer;
  border: 1px solid var(--bui-line-strong); border-radius: var(--bui-r-md); background: var(--bui-surface);
  transition: border-color var(--bui-fast), background var(--bui-fast), box-shadow var(--bui-fast);
}
.bui .preset:hover { border-color: #bac3d1; background: var(--bui-sunken); }
.bui .preset b { font-size: 13px; font-weight: 900; }
.bui .preset small { font-size: 11.5px; color: var(--bui-muted); line-height: 1.35; }
.bui .preset[aria-pressed="true"] { border-color: var(--bui-brand); background: var(--bui-brand-soft); box-shadow: inset 0 0 0 1px var(--bui-brand); }
.bui .preset[aria-pressed="true"] b { color: var(--bui-on-soft); }

/* SIGNATURE — the access sentence. Seven bits rendered as one sentence, so nobody
   hands a stranger the billing screen by accident. */
.bui .sentence {
  border-radius: var(--bui-r-lg); padding: 13px 15px; background: linear-gradient(180deg, #fff, #fbfcfe);
  box-shadow: inset 0 0 0 1px var(--bui-line); font-size: 13.5px; line-height: 1.55; color: var(--bui-subtle);
}
.bui .sentence .can { color: var(--bui-ink); font-weight: 900; }
.bui .sentence .cant { color: var(--bui-muted); font-weight: 700; }
.bui .sentence .hd { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--bui-muted); margin-bottom: 6px; }
.bui .sentence .hd .i { width: 14px; height: 14px; color: var(--bui-brand); }

/* ── Dialogs. Native <dialog>: focus moves in, is trapped and returns, Escape
   closes — all of it for free and none of it re-implemented. Each one is ALSO
   openable by the server through its own query string, so the whole flow works
   with no script at all. ────────────────────────────────────────────────────── */
.bui .sheetdlg, .bui .askdlg {
  border: 0; padding: 0; color: var(--bui-ink); background: var(--bui-surface);
  max-height: 100dvh; box-shadow: var(--bui-e2), 0 40px 80px -40px rgba(16, 24, 40, .6);
}
.bui .sheetdlg::backdrop, .bui .askdlg::backdrop { background: rgba(15, 23, 42, .42); }
.bui .sheetdlg {
  width: 452px; max-width: 100%; height: 100dvh; max-height: 100dvh;
  margin: 0 0 0 auto; border-radius: 0; border-left: 1px solid var(--bui-line);
}
/* The layout lives on [open], never on the class: an author `display` beats the
   browser's own `dialog:not([open]) { display: none }` whatever its specificity,
   so a shut drawer would otherwise stack up in the page below the footer. */
.bui .sheetdlg[open] {
  display: flex; flex-direction: column;
  animation: bui-sheet-in var(--bui-base) var(--bui-ease-base);
}
@keyframes bui-sheet-in { from { transform: translateX(24px); opacity: .4; } }
.bui .dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bui-s3); padding: var(--bui-s5) var(--bui-s5) var(--bui-s4); border-bottom: 1px solid var(--bui-line); }
.bui .dlg-head h2 { font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.bui .dlg-head p { font-size: 12.5px; color: var(--bui-muted); margin-top: 4px; max-width: 44ch; }
.bui .dlg-body { padding: var(--bui-s5); display: flex; flex-direction: column; gap: var(--bui-s4); overflow: auto; }
.bui .dlg-foot { margin-top: auto; padding: var(--bui-s4) var(--bui-s5); border-top: 1px solid var(--bui-line); display: flex; align-items: center; gap: var(--bui-s3); flex-wrap: wrap; }
.bui .dlg-foot .spacer { flex: 1; }
.bui .askdlg { width: 430px; max-width: calc(100% - 32px); border-radius: var(--bui-r-xl); padding: var(--bui-s6); }
.bui .askdlg h2 { font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.bui .askdlg p { font-size: 13.5px; color: var(--bui-subtle); margin-top: var(--bui-s3); }
.bui .askdlg .acts { display: flex; gap: var(--bui-s2); justify-content: flex-end; margin-top: var(--bui-s5); flex-wrap: wrap; }
.bui .warnmark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--bui-danger-soft); color: var(--bui-danger); }
.bui .warnmark .i { width: 20px; height: 20px; }
.bui .found { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--bui-r-md); background: var(--bui-ok-soft); box-shadow: inset 0 0 0 1px var(--bui-ok-line); }
.bui .found b { font-size: 13px; font-weight: 900; color: var(--bui-ink); }
.bui .found small { font-size: 12px; color: var(--bui-ok); font-weight: 700; display: block; }

/* ── Reviews ─────────────────────────────────────────────────────────────── */
.bui .ratesum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bui-s6); align-items: center; }
.bui .ratebig { text-align: center; padding-right: var(--bui-s6); border-right: 1px solid var(--bui-line); }
.bui .ratebig .n { font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; display: block; }
.bui .ratebig small { display: block; font-size: 12px; color: var(--bui-muted); margin-top: 6px; }
/* Amber, and it is the ONE non-brand hue on these screens. A rating is a fact
   customers reported about the shop, not a brand surface — ADR-0042's rule is one
   accent per surface, which the magenta reply, chips and buttons hold. It is also
   never the only signal: every bar is duplicated by its number. */
.bui .stars { display: inline-flex; gap: 2px; color: #b7791f; }
.bui .stars .i { width: 15px; height: 15px; }
.bui .stars--sm .i { width: 13px; height: 13px; }
.bui .stars .i.off { color: var(--bui-line-strong); }
.bui .dist { display: grid; gap: 5px; }
.bui .distrow { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 10px; align-items: center; font-size: 12px; color: var(--bui-subtle); }
.bui .distrow .bar { height: 7px; border-radius: var(--bui-r-full); background: var(--bui-sunken); overflow: hidden; }
.bui .distrow .bar i { display: block; height: 100%; border-radius: var(--bui-r-full); background: #d9a441; width: var(--pct, 0%); transition: width var(--bui-measure) var(--bui-ease-base); }
.bui .distrow .ct { text-align: right; font-variant-numeric: tabular-nums; }
.bui .rev { padding: var(--bui-s5) var(--bui-s6); border-bottom: 1px solid var(--bui-line); }
.bui .rev:last-of-type { border-bottom: 0; }
.bui .revtop { display: flex; align-items: flex-start; gap: 11px; }
.bui .revtop .who { flex: 1; min-width: 0; }
.bui .revtop b { font-size: 13.5px; font-weight: 900; }
.bui .revmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; color: var(--bui-muted); }
.bui .rev h3 { font-size: 14.5px; font-weight: 900; margin-top: 11px; }
.bui .rev .text { font-size: 13.5px; color: var(--bui-subtle); margin-top: 5px; max-width: 68ch; line-height: 1.55; white-space: pre-line; }
.bui .replied { margin-top: var(--bui-s3); padding: 12px 14px 13px; border-radius: var(--bui-r-md); background: var(--bui-sunken); border-left: 3px solid var(--bui-brand); }
.bui .replied .hd { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--bui-muted); }
.bui .replied .hd .i { width: 13px; height: 13px; color: var(--bui-brand); }
.bui .replied p { font-size: 13.5px; color: var(--bui-subtle); margin-top: 6px; max-width: 68ch; white-space: pre-line; }
.bui .composer { margin-top: var(--bui-s3); padding: var(--bui-s4); border-radius: var(--bui-r-lg); background: var(--bui-sunken); box-shadow: inset 0 0 0 1px var(--bui-line); display: flex; flex-direction: column; gap: 9px; }
.bui .composer textarea { background: var(--bui-surface); }
.bui .composer .foot { display: flex; align-items: center; gap: var(--bui-s3); flex-wrap: wrap; }
.bui .composer .foot .spacer { flex: 1; }
/* SIGNATURE — the reply as the customer will read it, shown before the button that
   makes it permanent. */
.bui .pubprev { border-radius: var(--bui-r-md); background: var(--bui-surface); box-shadow: inset 0 0 0 1px var(--bui-line); padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.bui .pubprev .hd { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--bui-muted); }
.bui .pubprev .hd .i { width: 13px; height: 13px; color: var(--bui-brand); }
.bui .pubprev .bubble { display: flex; gap: 9px; align-items: flex-start; }
.bui .pubprev .bubble .av { width: 28px; height: 28px; font-size: 11px; }
.bui .pubprev .bubble b { font-size: 12.5px; display: block; }
.bui .pubprev .bubble p { font-size: 13px; color: var(--bui-subtle); line-height: 1.5; margin-top: 3px; white-space: pre-line; }
.bui .pubprev-hint { color: var(--bui-muted); font-style: italic; margin-top: 3px; }
.bui .warnline { display: flex; gap: 6px; align-items: flex-start; max-width: 46ch; font-size: 13px; color: var(--bui-subtle); }
.bui .warnline .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--bui-warn-ink); }
.bui .pager { display: flex; gap: var(--bui-s2); align-items: center; justify-content: center; padding: var(--bui-s4); border-top: 1px solid var(--bui-line); flex-wrap: wrap; }
.bui .pager .pos { font-size: 12.5px; color: var(--bui-muted); font-variant-numeric: tabular-nums; }

/* ── Insights ────────────────────────────────────────────────────────────── */
.bui .seg { display: inline-flex; padding: 3px; background: var(--bui-sunken); border-radius: var(--bui-r-full); gap: 2px; box-shadow: inset 0 0 0 1px var(--bui-line); }
.bui .seg a, .bui .seg span {
  border: 0; background: transparent; border-radius: var(--bui-r-full); padding: 8px 13px;
  font-size: 12.5px; font-weight: 900; color: var(--bui-muted); text-decoration: none; min-height: 34px;
  display: inline-flex; align-items: center;
}
.bui .seg a:hover { color: var(--bui-ink); text-decoration: none; }
.bui .seg [aria-current="page"] { background: var(--bui-surface); color: var(--bui-ink); box-shadow: var(--bui-e1); }
.bui .seg [aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* The switcher when nothing could be read: still legible, plainly not a control. */
.bui .seg--inert { opacity: .6; }
.bui .seg--inert span { cursor: default; }
.bui .seg--inert [aria-current="true"] { background: var(--bui-surface); color: var(--bui-ink); box-shadow: var(--bui-e1); }
.bui .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bui-s5) var(--bui-s4); }
.bui .kpis .metric:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.bui .metric dt .i { width: 14px; height: 14px; }
.bui .metric dt { display: flex; align-items: center; gap: 6px; }
/* "Not counted yet" is a sentence, not a figure, and it must never wear a figure's
   size — a muted 14px line cannot be mistaken for a bad week (rule 16). */
.bui .metric .v.is-none { font-size: 14px; font-weight: 700; color: var(--bui-muted); letter-spacing: 0; }
.bui .metric .why { font-size: 12px; color: var(--bui-muted); margin-top: 4px; }
.bui .peaktag { font-size: 11px; font-weight: 900; color: var(--bui-brand); display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.bui .peaktag .i { width: 11px; height: 11px; }
/* The break in a sparkline is a DAY NOBODY COUNTED, drawn as a dashed span rather
   than joined through — a straight line across it would assert numbers we do not
   have. */
.bui .spark path.gap { fill: none; stroke: var(--bui-line-strong); stroke-width: 1.4; stroke-dasharray: 2 3; stroke-linecap: round; }
.bui tr.is-peak > * { background: var(--bui-brand-soft); }
.bui td.na { color: var(--bui-muted); font-style: italic; font-size: 12.5px; }

/* ── Verification ────────────────────────────────────────────────────────── */
.bui .vhero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--bui-s5); align-items: center; }
.bui .vsteps { display: flex; align-items: flex-start; gap: 0; margin-top: var(--bui-s5); }
.bui .vstep { flex: 1; display: flex; flex-direction: column; gap: 6px; position: relative; padding-right: var(--bui-s4); }
.bui .vstep::before { content: ""; position: absolute; left: 13px; right: 6px; top: 12px; height: 2px; background: var(--bui-line); }
.bui .vstep:last-child { flex: none; padding-right: 0; }
.bui .vstep:last-child::before { display: none; }
.bui .vstep.is-done::before { background: var(--bui-ok); }
.bui .vdot {
  width: 26px; height: 26px; border-radius: var(--bui-r-full); display: grid; place-items: center;
  position: relative; z-index: 1; background: var(--bui-surface); box-shadow: inset 0 0 0 2px var(--bui-line);
  color: var(--bui-muted); font-size: 11px; font-weight: 900;
}
.bui .vdot .i { width: 14px; height: 14px; }
.bui .vstep.is-done .vdot { background: var(--bui-ok); box-shadow: none; color: #fff; }
.bui .vstep.is-now .vdot { background: var(--bui-brand); box-shadow: 0 0 0 4px var(--bui-brand-soft); color: #fff; }
.bui .vstep.is-bad .vdot { background: var(--bui-danger-soft); box-shadow: inset 0 0 0 2px var(--bui-danger-line); color: var(--bui-danger); }
.bui .vstep b { font-size: 13px; font-weight: 900; }
.bui .vstep small { font-size: 12px; color: var(--bui-muted); }
.bui .vstep.is-next b, .bui .vstep.is-next small { color: var(--bui-muted); }
.bui .docrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--bui-s3); align-items: center; padding: 13px var(--bui-s5); border-bottom: 1px solid var(--bui-line); }
.bui .docrow:last-of-type { border-bottom: 0; }
.bui .docrow:hover { background: #fbfcfd; }
.bui .docicon { width: 38px; height: 44px; border-radius: 7px; flex: none; display: grid; place-items: center; position: relative; background: var(--bui-sunken); box-shadow: inset 0 0 0 1px var(--bui-line); color: var(--bui-muted); }
.bui .docicon .i { width: 18px; height: 18px; }
.bui .docicon span { position: absolute; bottom: 4px; font-size: 8px; font-weight: 900; letter-spacing: .04em; }
.bui .docrow b { display: block; font-size: 13.5px; font-weight: 900; }
.bui .docrow .bn { font-size: 12.5px; color: var(--bui-subtle); display: block; }
.bui .docrow small { display: block; font-size: 12px; color: var(--bui-muted); margin-top: 2px; }
.bui .docacts { display: flex; gap: 6px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.bui .vault { display: flex; gap: 10px; align-items: flex-start; }
.bui .vault > .i { width: 18px; height: 18px; flex: none; color: var(--bui-subtle); margin-top: 1px; }
.bui .vault b { font-size: 13px; font-weight: 900; }
.bui .vault p { font-size: 12.5px; color: var(--bui-subtle); margin-top: 3px; line-height: 1.5; }
.bui .quote { display: block; margin-top: 8px; padding: 10px 12px; background: var(--bui-surface); border-radius: var(--bui-r-md); color: var(--bui-subtle); font-style: italic; }
.bui .quote + .by { display: block; margin-top: 6px; font-size: 12px; }

/* ── QR and print ────────────────────────────────────────────────────────── */
.bui .qrstage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bui-s6); align-items: start; margin-top: var(--bui-s4); }
.bui .qrcard {
  width: 250px; flex: none; background: #fff; border-radius: var(--bui-r-lg); padding: 20px 18px 16px;
  box-shadow: var(--bui-e2); border: 1px solid var(--bui-line); text-align: center;
  display: flex; flex-direction: column; gap: 11px; margin: 0;
}
.bui .qrbox { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.bui .qrbox svg { width: 100%; height: 100%; display: block; }
.bui .qrcap b { display: block; font-size: 14px; font-weight: 900; letter-spacing: -.01em; }
.bui .qrcap .addr { display: block; font-size: 12px; color: var(--bui-subtle); font-family: ui-monospace, Menlo, monospace; margin-top: 2px; word-break: break-all; }
.bui .qrcap .cta { display: block; font-size: 11.5px; font-weight: 900; color: var(--bui-brand); margin-top: 7px; text-transform: uppercase; letter-spacing: .07em; }
.bui .dl-list { display: grid; gap: 9px; margin-top: var(--bui-s3); }
.bui .dl {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 13px;
  cursor: pointer; border: 1px solid var(--bui-line-strong); border-radius: var(--bui-r-md);
  background: var(--bui-surface); color: var(--bui-label); min-height: 44px;
  transition: border-color var(--bui-fast), background var(--bui-fast), transform var(--bui-press);
}
.bui .dl:hover { border-color: var(--bui-brand); background: var(--bui-brand-soft); text-decoration: none; color: var(--bui-ink); }
.bui .dl:active { transform: translateY(1px); }
.bui .dl > .i { width: 18px; height: 18px; color: var(--bui-muted); flex: none; }
.bui .dl:hover > .i { color: var(--bui-brand); }
.bui .dl .nm { font-size: 13.5px; font-weight: 900; display: block; }
.bui .dl .mt { font-size: 12px; color: var(--bui-muted); display: block; margin-top: 1px; }
.bui .dl .go { margin-left: auto; color: var(--bui-muted); }
/* SIGNATURE — the poster thumbnails are miniature renders of the real sheet, not
   icons: the owner sees the layout, the caption and the code's place before a PDF
   is fetched. */
.bui .posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bui-s4); margin-top: var(--bui-s3); }
/* Two rows, the thumbnail row stretched: three sheets of different paper sizes
   then sit on one baseline and their captions line up across the row. */
.bui .poster { display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 9px; cursor: pointer; border: 0; background: transparent; padding: 0; text-align: left; color: inherit; }
.bui .sheet {
  background: #fff; border: 1px solid var(--bui-line-strong); border-radius: 6px; box-shadow: var(--bui-e1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 10px 8px;
  /* A4 and A5 are both ISO 216, so both are 1:√2 portrait. A landscape box with a
     code in it is not a picture of a poster, which is the whole point of the
     thumbnail — the owner is meant to recognise the sheet before fetching 2 MB. */
  aspect-ratio: 1 / 1.414; width: 100%; max-width: 168px; margin-inline: auto;
  transition: box-shadow var(--bui-fast) var(--bui-ease-base), transform var(--bui-fast) var(--bui-ease-base), border-color var(--bui-fast);
}
.bui .poster:hover .sheet { box-shadow: var(--bui-e2); transform: translateY(-2px); border-color: var(--bui-brand); }
.bui .poster:focus-visible .sheet { box-shadow: var(--bui-focus); }
/* One height for all three; the A5 is NARROWER because an A5 is smaller, which is
   the whole point of a thumbnail. */
/* An A5 IS smaller than an A4, and the thumbnails say so by being smaller. */
.bui .sheet--a5 { max-width: 124px; }
/* A sheet of labels is landscape-agnostic; it keeps the same footprint as the A4
   so the three captions sit on one line. */
.bui .sheet--st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 8px; place-items: stretch; }
.bui .sheet .mini { width: 52%; aspect-ratio: 1; }
.bui .sheet--a5 .mini { width: 56%; }
.bui .sheet .mini svg { width: 100%; height: 100%; display: block; }
.bui .sheet .lbl { font-size: 7px; font-weight: 900; letter-spacing: -.01em; text-align: center; line-height: 1.25; }
.bui .sheet .lbl span { display: block; font-weight: 700; color: var(--bui-muted); font-size: 6px; margin-top: 1px; }
.bui .sheet .lbl--url { color: var(--bui-muted); }
.bui .warnline--spaced { margin-top: var(--bui-s4); }
.bui .figrow { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.bui .unavail--tight { margin-top: 8px; }
/* ── Composition helpers. Rule 16 bans a style="" on an element, and these are the
   handful of arrangements the five tool screens repeat: a gap between two blocks
   taken from the spacing scale, a note whose icon sits beside its first line, and
   the flush padding a panel body needs when its header owns the top edge. ────── */
.bui .sp2 { margin-top: var(--bui-s2); }
.bui .sp3 { margin-top: var(--bui-s3); }
.bui .sp4 { margin-top: var(--bui-s4); }
.bui .sp5 { margin-top: var(--bui-s5); }
.bui .padbox { padding: 0 var(--bui-s6) var(--bui-s6); }
.bui .noteline { display: flex; align-items: flex-start; gap: 7px; }
.bui .iconrow { display: flex; align-items: center; gap: var(--bui-s2); }
.bui .pane-acts--mid { align-items: center; }
.bui .pane-acts .spacer { flex: 1; }
.bui .av--xs { width: 26px; height: 26px; font-size: 10px; }
.bui .legendkey--wide { gap: 11px; }
/* A destructive confirm: the danger colour is the fill, not a hint beside it, because
   this button is the one that takes a person off a page. */
.bui .btn--destructive { background: var(--bui-danger); border-color: var(--bui-danger); color: #fff; box-shadow: none; }
.bui .btn--destructive:hover { background: #8f1c13; border-color: #8f1c13; color: #fff; }
.bui .btn--destructive:disabled { background: var(--bui-danger-soft); border-color: var(--bui-danger-line); color: var(--bui-danger); }

.bui .sheet .cell { border: 1px dashed var(--bui-line); border-radius: 3px; display: grid; place-items: center; padding: 2px; }
.bui .sheet .cell svg { width: 74%; height: auto; }
.bui .poster .nm { font-size: 13px; font-weight: 900; }
.bui .poster .mt { font-size: 12px; color: var(--bui-muted); display: block; margin-top: 1px; }
.bui .tips { display: grid; gap: 11px; }
.bui .tips li { display: flex; gap: 11px; align-items: flex-start; }
.bui .tipico { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--bui-brand-soft); color: var(--bui-on-soft); }
.bui .tipico .i { width: 16px; height: 16px; }
.bui .tips b { font-size: 13px; font-weight: 900; display: block; }
.bui .tips small { font-size: 12.5px; color: var(--bui-muted); display: block; margin-top: 1px; }
.bui .copyfield { display: flex; gap: 7px; align-items: center; }
.bui .copyfield input { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: var(--bui-sunken); }
.bui .live { font-size: 12.5px; color: var(--bui-ok); font-weight: 700; min-height: 18px; display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.bui .live .i { width: 14px; height: 14px; }

/* Reporting is a second, quieter form under a review — never a button beside the
   reply, where a mis-aimed click sends a customer to moderation. */
.bui .reportbox { margin-top: var(--bui-s3); }
.bui .reportbox > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  color: var(--bui-muted); font-weight: 700; padding: 6px 0; min-height: 32px;
}
.bui .reportbox > summary::-webkit-details-marker { display: none; }
.bui .reportbox > summary:hover { color: var(--bui-danger); }
.bui .reportbox > summary:focus-visible { box-shadow: var(--bui-focus); border-radius: var(--bui-r-sm); }
.bui .reportbox[open] > summary { color: var(--bui-danger); }
.bui .reportbox form {
  display: flex; flex-direction: column; gap: var(--bui-s3); margin-top: var(--bui-s2);
  padding: var(--bui-s4); border-radius: var(--bui-r-md); background: var(--bui-warn-soft);
  box-shadow: inset 0 0 0 1px var(--bui-warn-line);
}
.bui .reportbox form .t-small { color: var(--bui-warn-ink); max-width: 64ch; }

/* A code for a page that is not published yet: shown, so the owner knows it exists
   and is waiting — and grey, so nobody prints it. No download button is drawn at
   all beside it, because a button that refuses on click is not a capability. */
.bui .qrcard.is-waiting { opacity: .5; filter: grayscale(1); }

/* ═══ The tool screens' own container queries ══════════════════════════════ */
@container bui (max-width: 1040px) {
  .bui .wrap2 { grid-template-columns: minmax(0, 1fr); }
  .bui .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bui .kpis .metric:nth-child(4n + 1) { padding-left: var(--bui-s4); border-left: 1px solid var(--bui-line); }
  .bui .kpis .metric:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}
@container bui (max-width: 660px) {
  .bui .idstrip { flex-wrap: wrap; gap: var(--bui-s3); padding-top: var(--bui-s4); }
  .bui .idstrip .idacts { width: 100%; }
  .bui .idstrip .idacts .btn { flex: 1; }
  .bui .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bui-s4); }
  .bui .kpis .metric:nth-child(3n + 1) { padding-left: var(--bui-s4); border-left: 1px solid var(--bui-line); }
  .bui .kpis .metric:nth-child(odd) { padding-left: 0; border-left: 0; }
  .bui .metric .v { font-size: 21px; }
  .bui .ratesum { grid-template-columns: minmax(0, 1fr); gap: var(--bui-s4); }
  .bui .ratebig { display: flex; align-items: center; gap: var(--bui-s4); text-align: left; padding: 0 0 var(--bui-s4); border-right: 0; border-bottom: 1px solid var(--bui-line); }
  .bui .ratebig small { margin-top: 0; }
  .bui .rev { padding: var(--bui-s4); }
  .bui .qrstage { grid-template-columns: minmax(0, 1fr); }
  .bui .qrcard { width: 100%; max-width: 290px; margin-inline: auto; }
  .bui .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bui .presets { grid-template-columns: minmax(0, 1fr); }
  .bui .sheetdlg { width: 100%; border-left: 0; }
  .bui .vhero { grid-template-columns: minmax(0, 1fr); }
  .bui .vsteps { flex-direction: column; gap: var(--bui-s3); }
  .bui .vstep { flex: none; padding-right: 0; padding-left: 34px; }
  .bui .vstep .vdot { position: absolute; left: 0; top: 0; }
  .bui .vstep::before { left: 12px; top: 26px; bottom: -14px; right: auto; width: 2px; height: auto; }
  .bui .docrow { grid-template-columns: auto minmax(0, 1fr); }
  .bui .docacts { grid-column: 1 / -1; justify-content: flex-start; }
  /* A dense grid becomes cards on a phone. The row header stays a <th> and every
     cell carries its column name, so the table is still a table to a screen
     reader (rule 16 §6). */
  .bui .cardify thead { display: none; }
  .bui .cardify tbody tr { display: grid; gap: 8px; padding: var(--bui-s4); border-bottom: 1px solid var(--bui-line); }
  .bui .cardify tbody td, .bui .cardify tbody th { display: block; padding: 0; border: 0; text-align: left; }
  .bui .cardify tbody td.n { text-align: left; }
  .bui .cardify .rowacts { justify-content: flex-start; }
  /* The grid is cards here and nothing scrolls sideways, so the hint that says so
     would be an instruction for a gesture that does nothing. */
  .bui .scrollhint { display: none; }
  /* A day of eight counters is eight stacked rows — a card taller than the phone.
     In pairs it is four, and the day header spans both. */
  .bui .cardify--pairs tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bui .cardify--pairs tbody th { grid-column: 1 / -1; }
  .bui .cardify td[data-l]::before, .bui .cardify th[data-l]::before {
    content: attr(data-l); display: block; font-size: 10.5px; font-weight: 900;
    letter-spacing: .08em; text-transform: uppercase; color: var(--bui-muted); margin-bottom: 4px;
  }
}

/* ── Print: the QR card, and nothing else ────────────────────────────────────
   What prints is the artefact somebody sticks on a counter — the code, the name and
   the address. Every control, every panel of advice and the page's own chrome are
   the screen's furniture and have no business on the paper. */
@media print {
  .bui .noprint, .bui .toolnav, .bui .idacts, .bui .headrow .pane-acts { display: none !important; }
  .bui .wrap2 { grid-template-columns: minmax(0, 1fr); }
  .bui .qrcard { box-shadow: none; border-color: #999; width: 320px; margin-inline: auto; }
  .bui .pane { box-shadow: none; border: 0; padding: 0; }
}