/*
 * Guru base: Guru design tokens v1.24.6. element defaults and the signature components, built only
 * on var(--gb-*). Load AFTER guru-tokens.css.
 *
 * This is the reference implementation of BRAND.md. A product may use it
 * as-is, or keep its own component CSS, provided that CSS meets the same
 * rules. Hand-maintained (not generated). Keep it small: product-specific
 * components belong in the product.
 */

/* --- Base --------------------------------------------------------------- */

html {
  font-family: var(--gb-font);
  font-size: 100%;                 /* never px: respects the user's text size */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--gb-paper);
  color: var(--gb-text);
  font-size: var(--gb-text-base);
  font-weight: var(--gb-weight-body);
  line-height: var(--gb-leading-body);
  -webkit-font-smoothing: antialiased;
}
/* A compact container (UI-06) re-reads the body size, so its own text steps
   down with its controls, not just the controls. */
[data-density="compact"] { font-size: var(--gb-text-base); }

h1, h2, h3, h4 { color: var(--gb-ink); font-weight: var(--gb-weight-strong); margin: 0 0 var(--gb-space-3); }
/* <b> and <strong> are 'bolder' by default: 700 from 400, which TYP-03
   forbids, and the variable Lexend renders it. The help names controls in
   <b> (UI-15), so they take the label weight (found in a product audit). */
b, strong { font-weight: var(--gb-weight-strong); }
h1 { font-size: var(--gb-text-2xl); line-height: var(--gb-leading-tight); letter-spacing: var(--gb-tracking-display); }
h2 { font-size: var(--gb-text-xl);  line-height: var(--gb-leading-snug); }
h3 { font-size: var(--gb-text-lg);  line-height: var(--gb-leading-snug); }
h4 { font-size: var(--gb-text-md);  line-height: var(--gb-leading-snug); }

/* Body prose is justified (TYP-10). Hyphenation is what makes that work in
   a narrow column, and it needs lang="en-GB" on <html>. The last line is
   never stretched. Put an email address, URL or reference in .gb-nowrap or
   on its own line so a justified line is never forced open around it. */
/* text-align-last: auto (not left) so a one-line paragraph that a product
   centres stays centred; the measure lives on .gb-prose only, so it does not
   leak into a product's own layout (TYP-09 applies it to running prose). */
p, .gb-prose { margin: 0 0 var(--gb-space-4); text-align: justify; text-align-last: auto; hyphens: auto; }
.gb-prose, .gb-prose p { max-width: var(--gb-measure); }
/* Short text is not justified (TYP-10): one to three lines in a card, a hero
   lead, a tag line. Justifying them opens wide gaps ("Guru  Statements
   converts  bank"; found on the website). .gb-text-center centres a short
   line where TYP-10 allows it (a hero, an empty state, a splash). */
:is(.gb-card, .gb-help__card) p, p.gb-short { text-align: left; hyphens: manual; }
p.gb-text-center, .gb-text-center p { text-align: center; text-align-last: center; hyphens: manual; }
/* Only running prose is justified (TYP-10). Headings, list items, table cells
   and captions inside .gb-prose would otherwise inherit it, and a two-line
   heading stretches its spaces (found by Guru Bellwether). */
.gb-prose :is(h1, h2, h3, h4, h5, h6, li, dt, th, td, figcaption, label, summary) { text-align: left; hyphens: manual; }
li, th, td, label, figcaption, .gb-hint, .gb-error, .gb-label, .gb-tag, .gb-btn, address { text-align: left; hyphens: manual; }
.gb-nowrap { white-space: nowrap; }

/* Links in running text are underlined: colour is never the only signal
   (WCAG 1.4.1). Navigation and button-like links opt out with .gb-link-plain. */
a { color: var(--gb-teal-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--gb-teal-700); text-decoration-thickness: 2px; }
.gb-link-plain { text-decoration: none; }
.gb-link-plain:hover { text-decoration: underline; }

code, kbd, samp, pre { font-family: var(--gb-font-mono); font-size: var(--gb-text-sm); }

::selection { background: var(--gb-selection); }

.gb-num { font-variant-numeric: tabular-nums; text-align: right; }
.gb-figures { font-variant-numeric: tabular-nums lining-nums; }

.gb-label {
  font-size: var(--gb-text-xs);
  font-weight: var(--gb-weight-strong);
  letter-spacing: var(--gb-tracking-label);
  text-transform: uppercase;
  color: var(--gb-text-subtle);
}

/* --- Focus: one treatment everywhere, never removed ----------------------
   An outline, not a box-shadow, because outlines survive Windows High
   Contrast / forced-colors mode and box-shadows do not. 2px solid at a 2px
   offset measures >=3:1 against every Guru ground (docs/ACCESSIBILITY.md). */

:focus-visible { outline: 2px solid var(--gb-focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* --- Accessibility helpers --------------------------------------------- */

.gb-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.gb-skip-link {
  position: absolute; left: var(--gb-space-4); top: -100px; z-index: 1000;
  padding: var(--gb-space-2) var(--gb-space-4);
  background: var(--gb-teal); color: var(--gb-on-teal);
  border-radius: var(--gb-radius-sm); font-weight: var(--gb-weight-medium); text-decoration: none;
}
/* Shown on keyboard focus only (:focus-visible). Outlook moves focus into an
   add-in's pane after a mouse click, and on any :focus that showed "Skip to
   content" to mouse users (Guru Archive's exception since 28 September). A
   keyboard user still gets it on the first Tab. */
.gb-skip-link:focus-visible { top: var(--gb-space-4); }

/* --- Theme-aware logo -----------------------------------------------------
   Ship BOTH files and let CSS pick, so the logo follows the same theme
   switch as the tokens (OS preference, overridable by data-theme):

   <a href="/" class="gb-brand">
     <img class="gb-logo gb-logo--light" src="/brand/guru-flow-lockup-light.svg" alt="Guru Flow" height="32">
     <img class="gb-logo gb-logo--dark"  src="/brand/guru-flow-lockup-dark.svg"  alt="Guru Flow" height="32">
   </a>
   display:none removes the hidden one from the accessibility tree too. */

.gb-logo { display: block; height: 100%; width: auto; }
.gb-logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gb-logo--light { display: none; }
  :root:not([data-theme="light"]) .gb-logo--dark { display: block; }
}
:root[data-theme="dark"] .gb-logo--light { display: none; }
:root[data-theme="dark"] .gb-logo--dark { display: block; }
/* On the shell (dark in both themes) always use the dark artwork. */
.gb-on-shell .gb-logo--light { display: none !important; }
/* A <picture> round the logo (for the forced-colours sources, LOGO-04) must not
   break the sizing above: let the img inside be laid out as if unwrapped. */
/* Any picture wrapping a Guru logo, whatever the product calls the link. */
picture:has(> img.gb-logo), .gb-brand picture, .gb-auth__brand picture, .gb-panebar picture { display: contents; }
.gb-on-shell .gb-logo--dark { display: block !important; }

/* content-box: the 32px is the lockup's own height (LOGO-07). Under the common
   `*, *::before { box-sizing: border-box }` reset its padding ate into it and
   the rail lockup shrank to about 16px (found in a product's rail). */
.gb-brand { display: inline-flex; align-items: center; height: 32px; text-decoration: none; box-sizing: content-box; }

/* --- Buttons ------------------------------------------------------------ */

.gb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gb-space-2);
  /* border-box explicitly: <button> gets it from the browser, but an <a> or
     <input type=submit> styled as a button does not, and would render ~60 px. */
  box-sizing: border-box;
  min-height: var(--gb-control); padding: var(--gb-control-pad-y) 16px;
  font: inherit; font-size: var(--gb-text-base); font-weight: var(--gb-weight-medium); line-height: 1.4;
  border: 1px solid transparent;   /* shows in forced-colors mode */
  border-radius: var(--gb-radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--gb-motion-fast) ease, border-color var(--gb-motion-fast) ease, color var(--gb-motion-fast) ease;
}
.gb-btn--primary   { background: var(--gb-teal); color: var(--gb-on-teal); }
.gb-btn--primary:hover { background: var(--gb-teal-600); }
.gb-btn--secondary { background: var(--gb-surface); color: var(--gb-text); border-color: var(--gb-border-control); }
.gb-btn--secondary:hover { background: var(--gb-surface-sunken); }
.gb-btn--ghost     { background: transparent; color: var(--gb-text-muted); }
.gb-btn--ghost:hover { background: var(--gb-surface-sunken); color: var(--gb-text); }
.gb-btn--danger    { background: var(--gb-danger); color: var(--gb-on-danger); }
.gb-btn--danger:hover { filter: brightness(0.92); }
.gb-btn--sm { min-height: var(--gb-control-sm); padding: 4px 12px; font-size: var(--gb-text-sm); }
.gb-btn:disabled, .gb-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* --- Form controls -------------------------------------------------------- */

.gb-field { display: grid; gap: var(--gb-space-1); margin-bottom: var(--gb-space-4); }
.gb-field > label { font-size: var(--gb-text-sm); font-weight: var(--gb-weight-medium); color: var(--gb-text); }
.gb-hint  { font-size: var(--gb-text-sm); color: var(--gb-text-muted); }
.gb-error { font-size: var(--gb-text-sm); color: var(--gb-danger); font-weight: var(--gb-weight-medium); }

.gb-input, .gb-select, .gb-textarea {
  box-sizing: border-box; width: 100%;
  min-height: var(--gb-control); padding: var(--gb-control-input-pad-y) 12px;
  font: inherit; font-size: var(--gb-text-base); line-height: 1.4;
  color: var(--gb-text); background: var(--gb-surface);
  border: 1px solid var(--gb-border-control);   /* >=3:1, WCAG 1.4.11 */
  border-radius: var(--gb-radius-sm);
}
.gb-input::placeholder, .gb-textarea::placeholder { color: var(--gb-text-subtle); opacity: 1; }
.gb-input:focus-visible, .gb-select:focus-visible, .gb-textarea:focus-visible { border-color: var(--gb-focus); }
.gb-input[aria-invalid="true"], .gb-select[aria-invalid="true"], .gb-textarea[aria-invalid="true"] { border-color: var(--gb-danger); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gb-teal); width: 18px; height: 18px; }

/* --- Cards ---------------------------------------------------------------- */

.gb-card {
  display: flex; flex-direction: column;
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-md);
  box-shadow: var(--gb-shadow-sm);
}
.gb-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gb-space-3);
  padding: var(--gb-space-4) var(--gb-space-5);
  border-bottom: 1px solid var(--gb-border);
}
/* The signature: a 3px teal margin rule down the card title. */
.gb-card__title {
  margin: 0; padding-left: var(--gb-space-3);
  border-left: 3px solid var(--gb-teal);
  font-size: var(--gb-text-lg); font-weight: var(--gb-weight-strong); line-height: var(--gb-leading-snug);
}
.gb-card__body { padding: var(--gb-space-4) var(--gb-space-5); }
.gb-card__footer {
  margin-top: auto; padding: var(--gb-space-3) var(--gb-space-5);
  background: var(--gb-surface-sunken); border-top: 1px solid var(--gb-border);
  border-radius: 0 0 var(--gb-radius-md) var(--gb-radius-md);
  font-size: var(--gb-text-sm); color: var(--gb-text-subtle);
}

/* --- Tags (status carries its WORD, never colour alone) ------------------- */

.gb-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border: 1px solid var(--gb-border); border-radius: var(--gb-radius-sm);
  background: var(--gb-surface-sunken); color: var(--gb-text-muted);
  font-size: var(--gb-text-xs); font-weight: var(--gb-weight-strong);
  letter-spacing: var(--gb-tracking-label); text-transform: uppercase; line-height: 1.5;
}
.gb-tag--teal    { background: var(--gb-teal-050);    color: var(--gb-teal-700); border-color: transparent; }
.gb-tag--success { background: var(--gb-success-bg);  color: var(--gb-success); border-color: transparent; }
.gb-tag--warning { background: var(--gb-warning-bg);  color: var(--gb-warning); border-color: transparent; }
.gb-tag--danger  { background: var(--gb-danger-bg);   color: var(--gb-danger);  border-color: transparent; }
.gb-tag--info    { background: var(--gb-info-bg);     color: var(--gb-info);    border-color: transparent; }

/* --- Icons (UI-14) -----------------------------------------------------------
   <svg class="gb-icon gb-icon--folder" aria-hidden="true"><use href="/brand/guru-icons.svg#gi-folder"/></svg>
   The sprite's parts carry no stroke settings, so these rules size and colour
   them; the tinted body reads --gi-fill. */

.gb-icon {
  width: 16px; height: 16px; flex: none; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  color: var(--gb-text-muted);
}
.gb-icon--20 { width: 20px; height: 20px; }
.gb-icon--24 { width: 24px; height: 24px; }
.gb-icon--folder   { color: var(--gb-teal-600); --gi-fill: var(--gb-teal-100); }
.gb-icon--mail     { color: var(--gb-cat-violet); --gi-fill: color-mix(in srgb, var(--gb-cat-violet) 16%, transparent); }
.gb-icon--document { color: var(--gb-cat-plum);   --gi-fill: color-mix(in srgb, var(--gb-cat-plum) 16%, transparent); }
.gb-icon--chevron  { color: var(--gb-text-subtle); }
/* An icon that toggles (favourite star, follow bell) shows "on" as teal-600 and filled. */
.gb-icon--on       { color: var(--gb-teal-600); --gi-fill: currentColor; }
/* Hover: kept at low specificity (:where) so a product can override it simply. */
:where(button, a):hover > .gb-icon:where(:not(.gb-icon--folder, .gb-icon--mail, .gb-icon--document)) { color: var(--gb-teal-600); }
/* Inside a button, the dark shell, the rail or a pane bar an icon takes its
   parent's colour: text-muted and teal-600 do not hold contrast on shell-bg,
   and a button's icon should match its label. The rail's current page is
   therefore shell-link, from the link itself. */
.gb-btn .gb-icon, .gb-rail .gb-icon, .gb-panebar .gb-icon, .gb-on-shell .gb-icon,
.gb-rail :where(a, button):hover > .gb-icon, .gb-btn:hover > .gb-icon { color: inherit; }
/* Forced colours: a standalone icon is CanvasText; inside a link or button the
   inherit rules above give it the control's system colour (LinkText /
   ButtonText), so it matches its label. That is intended (UI-14). */
@media (forced-colors: active) { .gb-icon { color: CanvasText; --gi-fill: none; } }

/* --- Scannable codes (COL-01): light in every theme ----------------------- */

.gb-scan { display: inline-block; padding: 16px; background: var(--gb-scan-ground); color: var(--gb-scan-ink); border-radius: var(--gb-radius-md); line-height: 0; }
.gb-scan svg, .gb-scan img { display: block; }
@media (forced-colors: active) { .gb-scan { forced-color-adjust: none; background: #fff; } }

/* --- Callout --------------------------------------------------------------- */

.gb-callout {
  padding: var(--gb-space-4) var(--gb-space-5);
  background: var(--gb-teal-050); color: var(--gb-text);
  border: 1px solid var(--gb-teal-100); border-radius: var(--gb-radius-md);
}

/* --- Toasts (UI-12) --------------------------------------------------------
   Markup is created by guru-toast.js; these styles are the contract:
   <div class="gb-toasts" aria-label="Notifications">
     <div class="gb-toast gb-toast--success" role="status">
       <div class="gb-toast__text">Rule saved.</div>
       <button class="gb-toast__action" type="button">Undo</button>
       <button class="gb-toast__close" type="button" aria-label="Dismiss">x</button>
     </div>
   </div> */

.gb-toasts {
  position: fixed; right: var(--gb-space-4); bottom: var(--gb-space-4); z-index: 1100;
  display: flex; flex-direction: column; gap: var(--gb-space-2);
  width: min(400px, calc(100vw - 2 * var(--gb-space-4)));
  pointer-events: none;
}
.gb-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--gb-space-3);
  padding: var(--gb-space-3) var(--gb-space-3) var(--gb-space-3) var(--gb-space-4);
  background: var(--gb-surface); color: var(--gb-text);
  border: 1px solid var(--gb-border); border-left: 3px solid var(--gb-info);
  border-radius: var(--gb-radius-md); box-shadow: var(--gb-shadow-lg);
  font-size: var(--gb-text-base); line-height: var(--gb-leading-snug);
  animation: gb-toast-in var(--gb-motion-fast) ease-out;
}
.gb-toast--success { border-left-color: var(--gb-success); }
.gb-toast--warning { border-left-color: var(--gb-warning); }
.gb-toast--danger  { border-left-color: var(--gb-danger); }
.gb-toast--info    { border-left-color: var(--gb-info); }
.gb-toast__text { flex: 1; padding-top: 2px; text-align: left; hyphens: manual; }
.gb-toast__action {
  flex: none; margin-top: -2px; padding: 4px 8px;
  background: none; border: 1px solid transparent; border-radius: var(--gb-radius-sm);
  color: var(--gb-teal-600); font: inherit; font-weight: var(--gb-weight-medium); cursor: pointer;
}
.gb-toast__action:hover { background: var(--gb-surface-sunken); }
.gb-toast__close {
  flex: none; width: 28px; height: 28px; margin: -4px -4px -4px 0; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--gb-radius-sm);
  color: var(--gb-text-muted); cursor: pointer;
}
.gb-toast__close:hover { background: var(--gb-surface-sunken); color: var(--gb-text); }
.gb-toast--leaving { opacity: 0; transition: opacity 160ms ease; }
@keyframes gb-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .gb-toasts { left: var(--gb-space-4); right: var(--gb-space-4); width: auto; bottom: calc(var(--gb-space-4) + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .gb-toast { animation: none; }
  .gb-toast--leaving { transition: none; }
}

/* --- Info tips (UI-13) -------------------------------------------------------
   <button type="button" class="gb-infotip" aria-label="About the insolvency date"
           data-tip="..."></button>   + guru-infotip.js. The icon is Lucide
   'info', drawn with a mask so it takes currentColor. Lucide is ISC and 'info'
   is derived from Feather (MIT): both licences are in LICENSE-lucide.txt, which
   travels with this file (EXT-05). */

.gb-infotip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: -4px 0 -4px 2px; padding: 0; vertical-align: middle;
  background: none; border: 0; border-radius: var(--gb-radius-pill);
  color: var(--gb-text-muted); cursor: pointer;
}
.gb-infotip::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gb-infotip:hover, .gb-infotip[aria-expanded="true"] { color: var(--gb-teal-600); }
.gb-infotip__bubble {
  position: fixed; z-index: 1200;
  max-width: min(280px, calc(100vw - 32px));
  padding: 10px 12px;
  background: var(--gb-surface); color: var(--gb-text);
  border: 1px solid var(--gb-border); border-radius: var(--gb-radius-md);
  box-shadow: var(--gb-shadow-lg);
  font-size: var(--gb-text-sm); line-height: var(--gb-leading-body);
  text-align: left; hyphens: manual;
}
.gb-infotip__bubble a { color: var(--gb-teal-600); }
@media (forced-colors: active) {
  .gb-infotip::before { forced-color-adjust: none; background: ButtonText; }
  .gb-infotip__bubble { border-color: CanvasText; }
}

/* --- App shell: dark rail + work surface (dark in BOTH themes) ------------ */

.gb-shell { display: grid; grid-template-columns: var(--gb-sidebar-width) minmax(0, 1fr); min-height: 100vh; }
/* The rail holds the viewport height and scrolls on its own, so its foot (the
   account block, UI-01) stays at the bottom of the screen on a long page. */
.gb-rail {
  background: var(--gb-shell-bg); color: var(--gb-shell-text); color-scheme: dark;
  display: flex; flex-direction: column; gap: var(--gb-space-1);
  padding: var(--gb-space-4) var(--gb-space-3);
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto;
  box-sizing: border-box;   /* the padding sits inside the viewport height */
}
.gb-rail .gb-brand { padding: 0 var(--gb-space-2) var(--gb-space-4); }
.gb-rail__nav { display: flex; flex-direction: column; gap: var(--gb-space-1); }
.gb-rail a, .gb-rail__item {
  display: flex; align-items: center; gap: var(--gb-space-2);
  min-height: 36px; padding: 0 var(--gb-space-3);
  border-radius: var(--gb-radius-sm);
  color: var(--gb-shell-muted); text-decoration: none; font-weight: var(--gb-weight-medium);
}
button.gb-rail__item {
  width: 100%; border: 0; background: none; font: inherit; font-weight: var(--gb-weight-medium);
  text-align: left; cursor: pointer;
}
.gb-rail a:hover, .gb-rail__item:hover { background: var(--gb-shell-raised); color: var(--gb-shell-text); }
.gb-rail a[aria-current="page"] { background: var(--gb-shell-raised); color: var(--gb-shell-link); box-shadow: inset 3px 0 0 var(--gb-shell-link); }
.gb-rail :focus-visible { outline-color: var(--gb-shell-link); }

/* The rail foot (UI-01, THM-06): Help, the theme switch, who is signed in,
   and Sign out, in that order, below the navigation. On a narrow screen it
   folds into an account menu opened by .gb-rail__me (a native popover: no
   script, Escape and click-outside close it). */
.gb-rail__me { display: none; }
.gb-rail__foot, .gb-rail__foot[popover] {
  box-sizing: border-box; display: flex; flex-direction: column; gap: var(--gb-space-1);
  position: static; inset: auto; width: auto; height: auto; overflow: visible;
  margin: auto 0 0; padding: var(--gb-space-3) 0 0;
  border: 0; border-top: 1px solid var(--gb-shell-border);
  background: transparent; color: inherit;
}
.gb-rail__theme {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gb-space-2);
  min-height: 36px; padding: 0 var(--gb-space-3);
  color: var(--gb-shell-muted); font-size: var(--gb-text-sm); font-weight: var(--gb-weight-medium);
}
.gb-rail__theme select {
  min-height: 30px; padding: 2px var(--gb-space-2);
  background: var(--gb-shell-raised); color: var(--gb-shell-text);
  border: 1px solid var(--gb-shell-muted); border-radius: var(--gb-radius-sm);
  font: inherit; font-size: var(--gb-text-sm);
}
.gb-rail__user {
  display: flex; align-items: center; gap: var(--gb-space-2);
  padding: var(--gb-space-2) var(--gb-space-3) var(--gb-space-1);
  margin-top: var(--gb-space-1); border-top: 1px solid var(--gb-shell-border);
  min-width: 0;
}
.gb-rail__who { display: grid; min-width: 0; line-height: 1.25; }
.gb-rail__name { color: var(--gb-shell-text); font-weight: var(--gb-weight-strong); font-size: var(--gb-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-rail__role { color: var(--gb-shell-muted); font-size: var(--gb-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-rail__foot form { margin: 0; }
/* Initials in a circle. Never teal (teal is identity, COL-03). */
.gb-avatar {
  flex: none; display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gb-shell-raised); color: var(--gb-shell-text);
  border: 1px solid var(--gb-shell-muted);
  font-size: var(--gb-text-xs); font-weight: var(--gb-weight-strong); letter-spacing: 0.02em;
}

/* The top bar is optional (UI-01): a page title, breadcrumbs, search or the
   page's own actions. Account and theme controls live in the rail foot. */
.gb-topbar {
  display: flex; align-items: center; gap: var(--gb-space-4);
  height: var(--gb-topbar-height); padding: 0 var(--gb-space-5);
  background: var(--gb-surface); border-bottom: 1px solid var(--gb-border);
}
/* A top bar that stays on screen while the page scrolls (wide screens only:
   below 1024px the rail's bar is the sticky one). It tells the help page how
   much of the window it covers (found by Guru Bellwether: a sticky bar hid the
   help's contents column and the heading a link had just jumped to). A product
   with its own sticky bar sets --gb-help-sticky-offset on its shell instead. */
@media (min-width: 1025px) {
  .gb-topbar--sticky { position: sticky; top: 0; z-index: 5; }
  .gb-shell:has(.gb-topbar--sticky) { --gb-help-sticky-offset: var(--gb-topbar-height); }
}
.gb-main { padding: var(--gb-space-6) var(--gb-space-5); }
/* The console's work area is not capped: a data-table page fills it (UI-17).
   A mixed page (a dashboard, a record, settings) caps its content at
   --gb-content-max with this modifier. */
.gb-main--capped { box-sizing: border-box; max-width: calc(var(--gb-content-max) + 2 * var(--gb-space-5)); }
@media (max-width: 1024px) {
  /* Bar on top, work below: without explicit rows a short page stretches the
     bar to fill the viewport. */
  .gb-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .gb-rail {
    flex-direction: row; align-items: center; overflow-x: auto; overflow-y: visible;
    height: auto; align-self: stretch; z-index: 10; padding: var(--gb-space-2) var(--gb-space-3);
  }
  .gb-rail .gb-brand { padding: 0 var(--gb-space-3) 0 0; }
  .gb-rail__nav { flex-direction: row; }
  /* Sticky at the bar's right end: with many links the bar scrolls sideways,
     and the account menu must never scroll out of reach (found by Guru
     Bellwether). The shell-coloured strip lets links slide under it. */
  .gb-rail__me {
    display: inline-grid; place-items: center; flex: none; margin-left: auto;
    position: sticky; right: 0; z-index: 1;
    padding: 2px 0 2px var(--gb-space-2); border: 0; background: var(--gb-shell-bg); cursor: pointer;
    box-shadow: var(--gb-space-3) 0 0 var(--gb-shell-bg);   /* covers the bar's right padding too */
  }
  .gb-rail a { white-space: nowrap; }
  .gb-rail__me:focus-visible { outline: none; }
  .gb-rail__me:focus-visible .gb-avatar { outline: 2px solid var(--gb-shell-link); outline-offset: 2px; }
  /* Closed: hidden. Open: a dark menu under the bar, at the right. */
  .gb-rail__foot[popover]:not(:popover-open) { display: none; }
  .gb-rail__foot[popover]:popover-open {
    position: fixed; inset: 60px var(--gb-space-3) auto auto; margin: 0;
    width: min(300px, calc(100vw - 2 * var(--gb-space-3))); max-height: calc(100vh - 72px); overflow-y: auto;
    padding: var(--gb-space-2);
    background: var(--gb-shell-bg); color: var(--gb-shell-text); color-scheme: dark;
    border: 1px solid var(--gb-shell-border); border-radius: var(--gb-radius-md);
    box-shadow: var(--gb-shadow-lg);
  }
}

/* --- Plain shell: a bar and one column ------------------------------------
   For signed-in pages that have nowhere to navigate: applying, awaiting
   approval, accepting an invitation, and single-purpose tools such as a
   statement upload. The lockup sits in a surface top bar (light artwork,
   theme-swapped), never in a dark rail, because a rail with no links is
   dead weight. Guru Accounts' PlainShell is the model. */

.gb-plain { min-height: 100vh; display: flex; flex-direction: column; background: var(--gb-paper); }
.gb-plain__bar {
  display: flex; align-items: center; gap: var(--gb-space-4);
  height: var(--gb-topbar-height); padding: 0 var(--gb-space-5);
  background: var(--gb-surface); border-bottom: 1px solid var(--gb-border);
}
.gb-plain__bar nav { margin-left: auto; display: flex; align-items: center; gap: var(--gb-space-4); font-size: var(--gb-text-sm); }
.gb-plain__bar nav a { white-space: nowrap; }
/* A compact control in the bar (the theme switch, THM-06). */
.gb-plain__bar .gb-select { width: auto; min-height: 32px; padding: 2px var(--gb-space-2); font-size: var(--gb-text-sm); }
/* On a phone the lockup, a back link and a theme switch don't fit in one row:
   the bar wraps, and its links take their own row (found by Guru Bellwether). */
@media (max-width: 560px) {
  .gb-plain__bar { flex-wrap: wrap; height: auto; min-height: var(--gb-topbar-height); row-gap: var(--gb-space-2); padding: var(--gb-space-2) var(--gb-space-4); }
  .gb-plain__bar nav { margin-left: 0; width: 100%; justify-content: space-between; flex-wrap: wrap; }
}
/* The task column (a form, an upload, a notice) is 760px. A page that holds a
   document, a table or the help uses the width it is given, up to
   --gb-content-max (UI-17): add .gb-plain__main--wide, or it happens by
   itself for the help and for a list table. Only running prose is capped. */
.gb-plain__main { box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto; padding: var(--gb-space-6) var(--gb-space-4) var(--gb-space-7); flex: 1; }
.gb-plain__foot { padding: var(--gb-space-4) var(--gb-space-5); border-top: 1px solid var(--gb-border); font-size: var(--gb-text-sm); color: var(--gb-text-subtle); }

/* --- Narrow pane top bar (UI-01c): an Office task pane, a sidebar --------- */

.gb-panebar {
  display: flex; align-items: center; gap: var(--gb-space-3);
  min-height: 52px; padding: 0 var(--gb-space-4);
  background: var(--gb-shell-bg); color: var(--gb-shell-text);
}
.gb-panebar .gb-brand { height: 28px; }

/* --- Product switcher (UI-19) ---------------------------------------------
   The rail's lockup is a button that opens a menu of the Guru products the
   signed-in person's firm uses: a native popover, so no script; Escape and a
   click outside close it, and the button reports open or closed itself.
   <button class="gb-switcher" type="button" popovertarget="gb-products"
           aria-label="Guru Statements: switch product">
     <img src="/brand/guru-statements-lockup-dark.svg" alt="" height="28">
     <svg class="gb-icon" aria-hidden="true"><use href="/brand/guru-icons.svg#gi-chevron-down"/></svg>
   </button>
   <nav class="gb-switcher__menu" id="gb-products" popover aria-label="Guru products">
     <p class="gb-switcher__title">Your firm's Guru products</p>
     <a class="gb-switcher__item" href="https://bsc.insolvency.guru/" aria-current="page">
       <img class="gb-switcher__logo--light" src="/brand/guru-statements-lockup-light.svg" alt="Guru Statements" height="22">
       <img class="gb-switcher__logo--dark" src="/brand/guru-statements-lockup-dark.svg" alt="Guru Statements" height="22">
       <span class="gb-switcher__line">Convert bank statements into an investigation workbook</span>
       <svg class="gb-icon" aria-hidden="true"><use href="/brand/guru-icons.svg#gi-check"/></svg>
     </a>
     …one item per product the firm uses…
     <a class="gb-switcher__account" href="https://app.insolvency.guru/">
       <svg class="gb-icon" aria-hidden="true"><use href="/brand/guru-icons.svg#gi-user"/></svg>Your Guru account</a>
   </nav> */
.gb-switcher {
  display: inline-flex; align-items: center; gap: var(--gb-space-1); flex: none;
  margin: 0 0 var(--gb-space-3); padding: 6px var(--gb-space-2); min-height: 40px; box-sizing: border-box;
  border: 0; border-radius: var(--gb-radius-sm); background: none; color: var(--gb-shell-muted); cursor: pointer;
}
.gb-switcher > img { height: 28px; width: auto; display: block; }
.gb-switcher > .gb-icon { width: 16px; height: 16px; transition: transform 120ms ease; }
.gb-switcher:hover, .gb-switcher:has(+ .gb-switcher__menu:popover-open) { background: var(--gb-shell-raised); color: var(--gb-shell-text); }
.gb-switcher:has(+ .gb-switcher__menu:popover-open) > .gb-icon { transform: rotate(180deg); }
.gb-switcher__menu[popover] {
  position: fixed; inset: auto; top: 60px; left: var(--gb-space-3); margin: 0;
  width: 320px; max-width: calc(100vw - 2 * var(--gb-space-3)); box-sizing: border-box; padding: var(--gb-space-2);
  background: var(--gb-surface); color: var(--gb-text); color-scheme: light dark;
  border: 1px solid var(--gb-border); border-radius: var(--gb-radius-md); box-shadow: var(--gb-shadow-lg);
}
.gb-switcher__title {
  margin: var(--gb-space-1) var(--gb-space-2) 6px; text-align: left;
  font-size: var(--gb-text-xs); font-weight: var(--gb-weight-strong); letter-spacing: var(--gb-tracking-label);
  text-transform: uppercase; color: var(--gb-text-subtle);
}
/* Placed after the rail's own link rules, which these must override. */
.gb-switcher__menu a.gb-switcher__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--gb-space-2);
  min-height: 0; padding: var(--gb-space-2); border-radius: var(--gb-radius-sm);
  color: var(--gb-text-muted); background: none; box-shadow: none; text-decoration: none; font-weight: var(--gb-weight-body);
  white-space: normal;   /* the narrow rail sets nowrap on its links */
}
.gb-switcher__menu a.gb-switcher__item:hover,
.gb-switcher__menu a.gb-switcher__item[aria-current="page"] { background: var(--gb-surface-sunken); color: var(--gb-text); box-shadow: none; }
.gb-switcher__item > img { grid-column: 1; height: 22px; width: auto; justify-self: start; }
.gb-switcher__line { grid-column: 1; font-size: var(--gb-text-xs); line-height: 1.35; color: var(--gb-text-muted); }
.gb-switcher__item > .gb-icon { grid-column: 2; grid-row: 1 / span 2; color: var(--gb-teal-600); }
.gb-switcher__item:not([aria-current="page"]) > .gb-icon { display: none; }
.gb-switcher__menu a.gb-switcher__account {
  display: flex; align-items: center; gap: var(--gb-space-2); min-height: 36px;
  margin-top: 6px; padding: 0 var(--gb-space-2); border-top: 1px solid var(--gb-border); border-radius: 0;
  color: var(--gb-teal-600); background: none; box-shadow: none; text-decoration: none; font-weight: var(--gb-weight-medium);
}
.gb-switcher__menu a.gb-switcher__account:hover { color: var(--gb-text); background: none; }
.gb-switcher__menu :focus-visible { outline-color: var(--gb-focus); }
/* Each product's lockup in the theme the menu is shown in (the menu is not
   on the shell, so the rail's always-dark rule must not reach it). */
.gb-switcher__logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gb-switcher__logo--light { display: none; }
  :root:not([data-theme="light"]) .gb-switcher__logo--dark { display: block; }
}
:root[data-theme="dark"] .gb-switcher__logo--light { display: none; }
:root[data-theme="dark"] .gb-switcher__logo--dark { display: block; }
@media (max-width: 1024px) {
  .gb-switcher { margin: 0 var(--gb-space-2) 0 0; }
  .gb-switcher__menu[popover] { top: 56px; }
}

/* --- Attribution (UI-18) -------------------------------------------------
   The lines a data source's licence requires, ONCE per page, at the foot of
   the page's content, folded behind a quiet info control so they are there
   but not prominent (the owner, 14 October 2026). The text stays in the page,
   so anyone can open it and it is there for search; it opens with a click or
   the keyboard and needs no script.
   <details class="gb-attribution">
     <summary><svg class="gb-icon" aria-hidden="true"><use href="/brand/guru-icons.svg#gi-info"/></svg>Data sources</summary>
     <p>Source: …</p><p>Contains …</p>
   </details> */
.gb-attribution { margin-top: var(--gb-space-6); font-size: var(--gb-text-xs); line-height: 1.5; color: var(--gb-text-subtle); }
.gb-attribution > summary {
  display: inline-flex; align-items: center; gap: var(--gb-space-1); min-height: 24px;
  cursor: pointer; list-style: none; color: var(--gb-text-subtle); border-radius: var(--gb-radius-sm);
}
.gb-attribution > summary::-webkit-details-marker { display: none; }
.gb-attribution > summary .gb-icon { width: 16px; height: 16px; flex: none; }
.gb-attribution > summary:hover, .gb-attribution[open] > summary { color: var(--gb-teal-600); }
.gb-attribution > :not(summary) { margin-top: var(--gb-space-2); }
.gb-attribution p { margin: 0; text-align: left; hyphens: manual; }
/* A statement a licence needs SHOWN, not one click away (Guru Security's
   ruling): one line straight after the closed block, the same quiet style. */
.gb-attribution__shown { margin: var(--gb-space-1) 0 0; font-size: var(--gb-text-xs); line-height: 1.5; color: var(--gb-text-subtle); text-align: left; hyphens: manual; }

/* --- A list table (the Cookies page, UI-16; any short list) ---------------
   <div class="gb-list-table-wrap"><table class="gb-list-table">…</table></div>
   The wrap lets a wide table scroll inside its own box on a phone, so the
   page never scrolls sideways. Cells are left-aligned.
   NOT named .gb-table: Guru Bellwether has had its own .gb-table since
   September, and v1.10.0's rules under that name leaked onto every one of its
   tables. Check the products for a class name before adding one here. */

.gb-list-table-wrap { overflow-x: auto; max-width: 100%; margin: 0 0 var(--gb-space-5); }
/* min-width: on a phone the table scrolls in its box before its columns squash. */
.gb-list-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--gb-text-sm); text-align: left; }
.gb-list-table caption { text-align: left; padding-bottom: var(--gb-space-2); color: var(--gb-text-muted); }
.gb-list-table :is(th, td) { padding: var(--gb-space-2) var(--gb-space-3); border-bottom: 1px solid var(--gb-border); vertical-align: top; text-align: left; hyphens: manual; }
.gb-list-table thead th { font-weight: var(--gb-weight-strong); color: var(--gb-text-muted); border-bottom-color: var(--gb-border-control); white-space: nowrap; }
.gb-list-table tbody th { font-weight: var(--gb-weight-medium); }
.gb-list-table code { white-space: nowrap; }
/* Cells wrap. A short value that should stay on one line (who sets a cookie)
   takes .gb-nowrap, and a code (a cookie name) never breaks. Until 1.13.2 the
   first and last columns never wrapped: a long last column (a credit line on
   a product's Sources and licences page) pushed the table to 2,000 px and
   squeezed the middle columns into slivers. */
/* A row header or a code is shown exactly as written: a product's own th
   styling (uppercase column labels) must not capitalise a cookie name, which
   is case-sensitive (found by Guru Accounts). */
.gb-list-table tbody :is(th, td), .gb-list-table code { text-transform: none; letter-spacing: normal; }
/* A page with a list table, or the help, uses the width it is given (UI-17),
   so a table's short cells do not wrap while there is room beside it. The
   words round it keep the reading measure. */
.gb-plain__main--wide, .gb-plain__main:has(.gb-list-table), .gb-plain__main:has(.gb-help) {
  max-width: calc(var(--gb-content-max) + 2 * var(--gb-space-5)); padding-inline: var(--gb-space-5);
}
.gb-plain__main--wide > p, .gb-plain__main:has(.gb-list-table) > p { max-width: var(--gb-measure); }
@media (max-width: 560px) {
  .gb-plain__main--wide, .gb-plain__main:has(.gb-list-table), .gb-plain__main:has(.gb-help) { padding-inline: var(--gb-space-4); }
}
/* On a phone the table stacks: each row a block, each cell under its own
   label (data-label on the td, repeating the column heading). A five-column
   table scrolling sideways with a squeezed description is a poor read (from
   Guru Bellwether, whose own tables stack the same way). */
@media (max-width: 720px) {
  .gb-list-table { min-width: 0; }
  .gb-list-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gb-list-table tbody tr { display: block; padding: var(--gb-space-3) 0; border-bottom: 1px solid var(--gb-border); }
  .gb-list-table tbody :is(th, td) { display: block; padding: 2px 0; border: 0; white-space: normal; }
  .gb-list-table tbody th[scope="row"] { font-weight: var(--gb-weight-strong); margin-bottom: var(--gb-space-1); }
  .gb-list-table code { white-space: normal; overflow-wrap: anywhere; }
  .gb-list-table td[data-label]::before {
    content: attr(data-label); display: block; margin-top: var(--gb-space-2);
    font-size: var(--gb-text-xs); font-weight: var(--gb-weight-strong); color: var(--gb-text-muted);
  }
}
@media (forced-colors: active) { .gb-list-table :is(th, td), .gb-list-table tbody tr { border-bottom-color: CanvasText; } }

/* --- Numbered how-to steps (UI-15) ----------------------------------------
   One action per step. Neutral numbers: teal is identity, and a step number
   is neither identity nor status (COL-03). */

ol.gb-steps { list-style: none; counter-reset: gb-step; margin: var(--gb-space-4) 0; padding: 0; display: grid; gap: var(--gb-space-3); max-width: var(--gb-measure); }
ol.gb-steps > li { counter-increment: gb-step; position: relative; min-height: 28px; padding: 2px 0 0 40px; text-align: left; }
ol.gb-steps > li::before {
  content: counter(gb-step); position: absolute; left: 0; top: 0;
  box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gb-surface); color: var(--gb-ink); border: 1.5px solid var(--gb-border-control);
  font-size: var(--gb-text-sm); font-weight: var(--gb-weight-strong);
}
@media (forced-colors: active) { ol.gb-steps > li::before { border-color: CanvasText; } }

/* --- The document layout: help (UI-15) and any long document page (UI-17) --
   A methodology, a privacy notice and terms use it too. The class is named
   .gb-help for history's sake; read it as "document". A contents column
   beside the text:
   <div class="gb-help">
     <nav class="gb-help__contents" aria-label="Contents">
       <p class="gb-help__title">Contents</p>
       <ul><li><a href="/help#how-to">How-to guides</a>
             <ul><li><a href="/help#invite">Invite a colleague</a></li></ul></li></ul>
     </nav>
     <div class="gb-help__body"> h1, h2[id], h3[id], p, ol.gb-steps … </div>
   </div>
   guru-help.js marks the section being read (aria-current="true"). From 1100px
   the contents column is sticky; below that it is one wrapped row of the h2
   entries above the text. Help text is left-aligned, never justified. From
   Guru Accounts. */

.gb-help { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gb-space-5); max-width: var(--gb-content-max); }
.gb-help__body { min-width: 0; }
/* Every page on this layout (help, Cookies, Sources, a privacy notice,
   terms) is ONE column of sections whose text fills the body column and
   reflows with the window, up to content-max: no 80ch cap (the owner, 9 and
   11 October 2026). */
.gb-help__body { --gb-help-measure: none; }
.gb-help__body :is(p, li, dd) { text-align: left; hyphens: manual; max-width: var(--gb-help-measure); }
.gb-help__body ol.gb-steps { max-width: var(--gb-help-measure); }
.gb-help__body h2 { margin-top: var(--gb-space-7); }
.gb-help__body > h1 + .gb-hint + h2, .gb-help__body > h1 + p + h2 { margin-top: var(--gb-space-5); }
.gb-help__body h3 { margin-top: var(--gb-space-6); }
/* --gb-help-sticky-offset: the height of whatever is stuck to the top of the
   window above the help (a sticky top bar, the rail's bar on a narrow
   screen). A heading jumped to, and the sticky contents column, sit below it. */
.gb-help__body :is(h2, h3, p)[id] { scroll-margin-top: calc(var(--gb-help-sticky-offset, 0px) + var(--gb-space-5)); }
.gb-help__contents { font-size: var(--gb-text-sm); }
.gb-help__title {
  margin: 0 0 var(--gb-space-2); text-align: left;
  font-size: var(--gb-text-xs); font-weight: var(--gb-weight-strong);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--gb-text-subtle);
}
.gb-help__contents ul { list-style: none; margin: 0; padding: 0; }
.gb-help__contents > ul > li + li { margin-top: var(--gb-space-2); }
.gb-help__contents ul ul { margin: 2px 0 0; padding-left: var(--gb-space-2); border-left: 1px solid var(--gb-border); }
/* Tight, so thirty entries fit a laptop's window; 24px tall all the same (A11Y-04). */
.gb-help__contents a {
  display: block; box-sizing: border-box; min-height: 24px; padding: 3px var(--gb-space-2); line-height: 1.3;
  border-radius: var(--gb-radius-sm); color: var(--gb-text-muted); text-decoration: none;
}
.gb-help__contents > ul > li > a { color: var(--gb-text); font-weight: var(--gb-weight-medium); }
.gb-help__contents a:hover { color: var(--gb-text); background: var(--gb-surface-sunken); }
.gb-help__contents a[aria-current="true"] {
  color: var(--gb-teal-600); background: var(--gb-surface-sunken); box-shadow: inset 2px 0 0 var(--gb-teal-600);
}
@media (min-width: 1100px) {
  .gb-help { grid-template-columns: 240px minmax(0, 1fr); gap: var(--gb-space-7); }
  .gb-help__contents {
    position: sticky; top: calc(var(--gb-help-sticky-offset, 0px) + var(--gb-space-5)); align-self: start;
    max-height: calc(100vh - var(--gb-help-sticky-offset, 0px) - 2 * var(--gb-space-5)); overflow-y: auto;
  }
}
@media (max-width: 1099px) {
  .gb-help__contents ul ul { display: none; }
  .gb-help__contents > ul { display: flex; flex-wrap: wrap; gap: var(--gb-space-1) var(--gb-space-3); }
  .gb-help__contents > ul > li, .gb-help__contents > ul > li + li { margin: 0; }
}
/* The help's content (UI-15): easy to scan, never a wall of text and never a
   wall of boxes. Cards only for the short overview and the roles; the guides
   open, under thin rules, two abreast where there is room; the questions
   folded. Columns fill a wide screen, never longer lines (UI-17). From Guru
   Accounts (the owner, 1 October 2026). */
.gb-help__lead { font-size: var(--gb-text-md); color: var(--gb-text); }

/* Getting started and the roles: short cards in a row. With .gb-card. */
.gb-help__cards {
  display: grid; gap: var(--gb-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin: var(--gb-space-4) 0;
}
.gb-help__card { padding: var(--gb-space-4) var(--gb-space-5); }
.gb-help__card p { margin: 0; }
.gb-help__card .gb-help__card-title {
  display: flex; align-items: center; gap: var(--gb-space-2);
  margin-bottom: var(--gb-space-2);
  font-weight: var(--gb-weight-strong); color: var(--gb-ink);
}
.gb-help__card-title .gb-icon { color: var(--gb-teal-600); flex: none; }

/* A notice (with .gb-callout): the icon beside the words, and as wide as the
   content round it. A notice narrower than its section reads as a stray box. */
.gb-help__callout { display: flex; gap: var(--gb-space-3); align-items: flex-start; box-sizing: border-box; }
.gb-help__callout > .gb-icon { flex: none; margin-top: 2px; color: var(--gb-teal-600); }
.gb-help__callout p { margin: 0; }

/* How-to guides: a small label per group, then the group's guides, one column
   or two side by side where each still gets a reading width. */
.gb-help__group {
  margin: var(--gb-space-6) 0 0; max-width: none; text-align: left;
  font-size: var(--gb-text-xs); font-weight: var(--gb-weight-strong);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--gb-text-subtle);
}
h2 + .gb-help__group { margin-top: 0; }
.gb-help__guides {
  display: grid; column-gap: var(--gb-space-7);
  grid-template-columns: minmax(0, 1fr);
}
.gb-help__guide { padding: var(--gb-space-4) 0 var(--gb-space-5); border-top: 1px solid var(--gb-border); min-width: 0; }
/* h2 too: on a document page the sections two abreast are headed with h2. */
/* A legal or methodology document may keep TYP-10's justified paragraphs:
   .gb-help--document on the .gb-help block (found by Guru Statements, whose
   privacy notice is justified). Help itself stays left-aligned. */
.gb-help--document .gb-help__body p:not(.gb-hint):not(.gb-help__who):not(.gb-help__note):not(.gb-help__card-title) {
  text-align: justify; text-align-last: auto; hyphens: auto;
}
/* Below 560px, justified text is left-aligned (TYP-10). Chromium on Windows
   and Android does not hyphenate English, so a justified line on a phone
   opens gaps wider than a word (found by Guru Statements). */
@media (max-width: 559px) {
  p, .gb-prose, .gb-help--document .gb-help__body p { text-align: left; hyphens: manual; }
}
/* Sections are never two abreast and text never flows into columns: both
   left uneven gaps beside short sections (the owner, 9 October 2026). The
   classes stay so existing markup still works. */
.gb-help__columns { columns: auto; }
.gb-help__body .gb-help__guide :is(h2, h3) { margin: 0; }
.gb-help__body .gb-help__guide h2 { margin-bottom: var(--gb-space-2); }
/* Three variations for a document page (from Guru Bellwether's methodology
   and privacy pages):
   --wide: a section that spans both columns, for one holding a table, a card
     grid or .gb-help__columns;
   .gb-help__columns: a long section's paragraphs or list items flow into
     reading-width columns, so five paragraphs do not sit as one column
     beside an empty half;
   .gb-help__cards--wide: cards of a sentence or more (definitions) get a
     22rem minimum; at 240px they grow very tall. */
.gb-help__guide--wide { grid-column: 1 / -1; }
.gb-help__columns > * { break-inside: avoid; }
.gb-help__cards--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
/* Who a guide is for: a quiet line under its title, not a tag. */
.gb-help__who {
  display: flex; align-items: center; gap: var(--gb-space-1);
  margin: var(--gb-space-1) 0 0; font-size: var(--gb-text-sm); color: var(--gb-text-muted);
}
.gb-help__who .gb-icon { flex: none; }
.gb-help__guide ol.gb-steps { margin: var(--gb-space-3) 0 0; }
/* A paragraph in a guide or a document section, after its "For …" line or
   its steps, keeps a gap above it (found by Guru Flow). */
.gb-help__body .gb-help__guide > p:not(.gb-help__who):not(.gb-help__note) { margin: var(--gb-space-3) 0 0; }
/* A tip: an icon and grey text, an aside rather than a footer. */
.gb-help__body .gb-help__note {
  display: flex; gap: var(--gb-space-2); align-items: flex-start;
  margin: var(--gb-space-3) 0 0; max-width: none;
  color: var(--gb-text-muted); font-size: var(--gb-text-sm);
}
.gb-help__note > .gb-icon { flex: none; margin-top: 3px; }

/* Troubleshooting: each question a <details>, opening on its answer, one
   after another at full width (one column, like the rest of the page).
   guru-help.js opens the question a link points at. */
.gb-help__questions { columns: auto; }
.gb-help__question { border-top: 1px solid var(--gb-border); min-width: 0; break-inside: avoid; }
.gb-help__question summary {
  display: flex; align-items: center; gap: var(--gb-space-3);
  padding: var(--gb-space-3) 0; cursor: pointer; list-style: none;
}
.gb-help__question summary::-webkit-details-marker { display: none; }
.gb-help__body .gb-help__question summary h3 { flex: 1; margin: 0; font-size: var(--gb-text-base); }
.gb-help__question summary .gb-icon { flex: none; color: var(--gb-text-subtle); transition: transform 0.15s ease; }
.gb-help__question[open] summary .gb-icon { transform: rotate(180deg); }
.gb-help__question summary:hover h3 { color: var(--gb-teal-600); }
.gb-help__question > p { margin: 0 0 var(--gb-space-4); }
@media (prefers-reduced-motion: reduce) { .gb-help__question summary .gb-icon { transition: none; } }
/* A jump lands a guide's or a question's heading clear of the top. */
.gb-help__body :is(.gb-help__guide, .gb-help__question) :is(h2, h3)[id] { scroll-margin-top: calc(var(--gb-help-sticky-offset, 0px) + 2 * var(--gb-space-5)); }
@media (forced-colors: active) {
  .gb-help__guide, .gb-help__question { border-top-color: CanvasText; }
  .gb-help__card-title .gb-icon, .gb-help__callout > .gb-icon { color: CanvasText; }
}

/* Below 1024px the rail is a sticky bar across the top: a heading jumped to
   must land below it. */
@media (max-width: 1024px) { .gb-shell { --gb-help-sticky-offset: 48px; } }
/* A work surface that scrolls sideways for wide tables (overflow-x: auto,
   UI-11) is a scroll container, and a sticky child then sticks to IT, which
   never scrolls: the contents would leave with the text. Clipping is not a
   scroll container, and the page still never scrolls sideways. */
.gb-main:has(.gb-help), main:has(> .gb-help) { overflow-x: clip; }
@media (forced-colors: active) {
  .gb-help__contents a[aria-current="true"] { outline: 2px solid Highlight; outline-offset: -2px; box-shadow: none; }
}

/* --- Empty state and drop zone (BG-04) ------------------------------------ */

.gb-empty {
  display: grid; justify-items: center; gap: var(--gb-space-3); text-align: center;
  padding: var(--gb-space-7) var(--gb-space-5);
  background: var(--gb-bg-pattern);
  border: 1px solid var(--gb-border); border-radius: var(--gb-radius-md);
  color: var(--gb-text-muted);
}
.gb-empty--drop { border: 2px dashed var(--gb-border-control); }
.gb-empty--drop.is-over { border-color: var(--gb-focus); }

/* --- Sign-in: brand panel + form column ----------------------------------- */

.gb-auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(360px, 4fr); min-height: 100vh; }
.gb-auth__brand {
  background: var(--gb-bg-auth); color: var(--gb-shell-text);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--gb-space-7);
}
.gb-auth__form { display: flex; flex-direction: column; justify-content: center; padding: var(--gb-space-7) var(--gb-space-6); background: var(--gb-surface); }
.gb-auth__form > * { width: 100%; max-width: 380px; margin-inline: auto; }
/* The stacked logo on the brand panel: no inline style needed (a strict CSP
   blocks style attributes). */
.gb-auth__brand .gb-logo { height: 120px; width: auto; }
@media (max-width: 860px) { .gb-auth__brand .gb-logo { height: 72px; } }
@media (max-width: 860px) {
  .gb-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .gb-auth__brand { padding: var(--gb-space-5); min-height: 0; }
}

/* --- The logo tab (insolvency.guru marketing signature) --------------------
   A white tab hanging below the navbar with the logo in it. Marketing and
   public, single-purpose pages only; the signed-in products use the shell. */

.gb-logo-tab {
  display: inline-block; line-height: 0;
  padding: 14px 32px 12px;
  background: var(--gb-surface);
  border: 1px solid var(--gb-border); border-top: none;
  border-radius: 0 0 var(--gb-radius-tab) var(--gb-radius-tab);
  box-shadow: var(--gb-shadow-md);
}

/* --- Brand grounds --------------------------------------------------------- */

.gb-hero    { background: var(--gb-bg-hero); }
.gb-pattern { background: var(--gb-bg-pattern); }

/* --- Motion and forced colours --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;   /* an infinite spinner must STOP, not spin faster */
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .gb-btn, .gb-tag, .gb-card { border-color: CanvasText; }
  .gb-rail a[aria-current="page"] { outline: 2px solid Highlight; box-shadow: none; }
  .gb-rail__foot, .gb-rail__user { border-color: CanvasText; }
  .gb-rail__foot[popover]:popover-open { border: 1px solid CanvasText; }
  .gb-avatar, .gb-rail__theme select { border-color: CanvasText; }
  .gb-card__title { border-left-color: CanvasText; }
}