/* @bowens/brand - generated by build.mjs from tokens/tokens.json and src/*.css. Do not edit dist/ by hand. */
:root{
  --bw-color-blue:#154C97;
  --bw-color-blue-2:#1957A5;
  --bw-color-navy:#05397F;
  --bw-color-blue-pms:#004C97;
  --bw-color-blue-l:#6CA3FF;
  --bw-color-yellow:#FFE300;
  --bw-color-yellow-ui:#F6E500;
  --bw-color-yellow-d:#F5D900;
  --bw-color-on-yellow:#154C97;
  --bw-color-primary:#154C97;
  --bw-color-primary-hover:#05397F;
  --bw-color-on-primary:#FFFFFF;
  --bw-color-accent:#154C97;
  --bw-color-accent-hover:#05397F;
  --bw-color-ink:#1E1E1E;
  --bw-color-text:#666666;
  --bw-color-text-subtle:#767676;
  --bw-color-heading:var(--bw-color-accent);
  --bw-color-link:var(--bw-color-accent);
  --bw-color-line:#E5E5E5;
  --bw-color-line-2:#D8D8D8;
  --bw-color-line-strong:#8A8A8A;
  --bw-color-panel:#F9F9F9;
  --bw-color-bg:#F4F6F9;
  --bw-color-surface:#FFFFFF;
  --bw-color-surface-2:#FFFFFF;
  --bw-color-tint-1:#EEF4FB;
  --bw-color-tint-2:#F2F6FC;
  --bw-color-tint-3:#F7F9FC;
  --bw-color-track:#EBEEF3;
  --bw-color-appbar:var(--bw-color-blue);
  --bw-color-on-appbar:#FFFFFF;
  --bw-color-on-appbar-muted:#DBE6F4;
  --bw-color-tone-navy:var(--bw-color-navy);
  --bw-color-inverse:#0B2A55;
  --bw-color-on-inverse:#FFFFFF;
  --bw-color-overlay:rgba(5,57,127,.42);
  --bw-color-skeleton:#E9EEF5;
  --bw-color-skeleton-hi:#F6F8FB;
  --bw-color-scrollbar:#A9C1DF;
  --bw-color-success:#82CC58;
  --bw-color-success-text:#1A7F37;
  --bw-color-success-bg:#E8F6EC;
  --bw-color-warning:#FFA11B;
  --bw-color-warning-text:#8A5A0A;
  --bw-color-warning-bg:#FBF1DC;
  --bw-color-error:#F83636;
  --bw-color-error-text:#9B241A;
  --bw-color-error-bg:#FFF3F2;
  --bw-color-danger:var(--bw-color-error);
  --bw-color-danger-text:var(--bw-color-error-text);
  --bw-color-danger-bg:var(--bw-color-error-bg);
  --bw-color-danger-fill:#B3261E;
  --bw-color-danger-fill-hover:#7C1C14;
  --bw-color-info:#2F7BE0;
  --bw-color-info-text:var(--bw-color-accent);
  --bw-color-info-bg:var(--bw-color-tint-1);
  --bw-color-focus:rgba(21,76,151,.28);
  --bw-color-focus-ring:#154C97;
  --bw-font-family-sans:"nexa","Jost","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --bw-font-family-display:var(--bw-font-family-sans);
  --bw-font-family-body:var(--bw-font-family-sans);
  --bw-font-family-mono:ui-monospace,"Cascadia Code","Cascadia Mono",Consolas,"SFMono-Regular",Menlo,monospace;
  --bw-font-weight-regular:400;
  --bw-font-weight-medium:500;
  --bw-font-weight-bold:700;
  --bw-font-weight-heavy:800;
  --bw-font-weight-black:900;
  --bw-font-size-xs:10px;
  --bw-font-size-sm:12px;
  --bw-font-size-base:14px;
  --bw-font-size-md:16px;
  --bw-font-size-lg:18px;
  --bw-font-size-xl:22px;
  --bw-font-size-2xl:24px;
  --bw-font-size-3xl:28px;
  --bw-font-size-4xl:32px;
  --bw-font-size-5xl:36px;
  --bw-font-size-6xl:48px;
  --bw-font-line-tight:1.2;
  --bw-font-line-snug:1.35;
  --bw-font-line-body:1.6;
  --bw-font-line-relaxed:2;
  --bw-type-display-size:clamp(30px, 1.6vw + 22px, 48px);
  --bw-type-display-line:1.08;
  --bw-type-display-weight:900;
  --bw-type-display-tracking:-0.01em;
  --bw-type-title-size:clamp(22px, 0.6vw + 19px, 28px);
  --bw-type-title-line:1.15;
  --bw-type-title-weight:900;
  --bw-type-title-tracking:-0.005em;
  --bw-type-heading-size:18px;
  --bw-type-heading-line:1.3;
  --bw-type-heading-weight:800;
  --bw-type-heading-tracking:0;
  --bw-type-body-size:14px;
  --bw-type-body-line:1.6;
  --bw-type-body-weight:400;
  --bw-type-body-tracking:0;
  --bw-type-body-lg-size:16px;
  --bw-type-body-lg-line:1.6;
  --bw-type-body-lg-weight:400;
  --bw-type-body-lg-tracking:0;
  --bw-type-label-size:13px;
  --bw-type-label-line:1.35;
  --bw-type-label-weight:700;
  --bw-type-label-tracking:0;
  --bw-type-caption-size:12px;
  --bw-type-caption-line:1.45;
  --bw-type-caption-weight:500;
  --bw-type-caption-tracking:0;
  --bw-type-overline-size:11px;
  --bw-type-overline-line:1.3;
  --bw-type-overline-weight:800;
  --bw-type-overline-tracking:0.08em;
  --bw-type-mono-size:13px;
  --bw-type-mono-line:1.5;
  --bw-type-mono-weight:500;
  --bw-type-mono-tracking:0;
  --bw-space-0:0px;
  --bw-space-1:4px;
  --bw-space-2:8px;
  --bw-space-3:12px;
  --bw-space-4:16px;
  --bw-space-5:24px;
  --bw-space-6:32px;
  --bw-space-7:48px;
  --bw-space-8:64px;
  --bw-space-9:96px;
  --bw-density-row:12px;
  --bw-density-gap:16px;
  --bw-density-pad:24px;
  --bw-radius-none:0px;
  --bw-radius-xs:2px;
  --bw-radius-sm:4px;
  --bw-radius-md:8px;
  --bw-radius-lg:12px;
  --bw-radius-xl:16px;
  --bw-radius-pill:999px;
  --bw-radius-round:50%;
  --bw-radius-surface:var(--bw-radius-sm);
  --bw-radius-control:var(--bw-radius-none);
  --bw-radius-media:var(--bw-radius-sm);
  --bw-size-control:42px;
  --bw-size-control-sm:32px;
  --bw-size-control-lg:48px;
  --bw-size-target:44px;
  --bw-size-notch:10px;
  --bw-size-appbar:56px;
  --bw-size-sidebar:262px;
  --bw-size-rail:72px;
  --bw-size-panel:440px;
  --bw-size-content:1240px;
  --bw-size-avatar-xs:24px;
  --bw-size-avatar-sm:32px;
  --bw-size-avatar:40px;
  --bw-size-avatar-lg:64px;
  --bw-size-avatar-xl:112px;
  --bw-shadow-none:none;
  --bw-shadow-sm:0 2px 8px rgba(0,0,0,.08);
  --bw-shadow-overlay:0 12px 32px rgba(0,0,0,.18);
  --bw-elevation-0:none;
  --bw-elevation-1:0 1px 2px rgba(16,32,56,.06), 0 1px 3px rgba(16,32,56,.06);
  --bw-elevation-2:0 2px 4px rgba(16,32,56,.06), 0 4px 12px rgba(16,32,56,.08);
  --bw-elevation-3:0 4px 8px rgba(16,32,56,.08), 0 10px 28px rgba(16,32,56,.12);
  --bw-elevation-4:0 8px 16px rgba(16,32,56,.10), 0 24px 56px rgba(16,32,56,.18);
  --bw-motion-fast:.15s cubic-bezier(.2,0,0,1);
  --bw-motion-base:.24s cubic-bezier(.2,0,0,1);
  --bw-motion-duration-instant:80ms;
  --bw-motion-duration-fast:150ms;
  --bw-motion-duration-base:240ms;
  --bw-motion-duration-slow:360ms;
  --bw-motion-ease-standard:cubic-bezier(.2,0,0,1);
  --bw-motion-ease-emphasized:cubic-bezier(.3,0,0,1);
  --bw-motion-ease-exit:cubic-bezier(.3,0,1,1);
  --bw-z-sticky:10;
  --bw-z-appbar:1000;
  --bw-z-drawer:1100;
  --bw-z-menu:1150;
  --bw-z-modal:1200;
  --bw-z-palette:1210;
  --bw-z-savebar:1250;
  --bw-z-toast:1300;
  --bw-z-tooltip:1400;
}
/* themes: opt-in per page (see README). light is the default; data-theme="system" follows the OS. */
:root[data-theme="light"],:root[data-theme="system"]{color-scheme:light}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bw-color-primary:#2D64B5;
  --bw-color-primary-hover:#3A72C4;
  --bw-color-accent:#9CC3FF;
  --bw-color-accent-hover:#C4DBFF;
  --bw-color-ink:#E8EDF4;
  --bw-color-text:#A9B5C6;
  --bw-color-text-subtle:#8C99AB;
  --bw-color-line:#283548;
  --bw-color-line-2:#36465D;
  --bw-color-line-strong:#6C7C93;
  --bw-color-panel:#121B27;
  --bw-color-bg:#0D141E;
  --bw-color-surface:#151F2C;
  --bw-color-surface-2:#1B2738;
  --bw-color-tint-1:#1B2E49;
  --bw-color-tint-2:#19283B;
  --bw-color-tint-3:#172231;
  --bw-color-track:#223045;
  --bw-color-appbar:#0F2B52;
  --bw-color-tone-navy:#3A67A8;
  --bw-color-inverse:#E8EDF4;
  --bw-color-on-inverse:#0D141E;
  --bw-color-overlay:rgba(2,6,12,.66);
  --bw-color-skeleton:#1F2B3D;
  --bw-color-skeleton-hi:#2A3950;
  --bw-color-scrollbar:#3A4B63;
  --bw-color-success-text:#7BD99A;
  --bw-color-success-bg:#11301D;
  --bw-color-warning-text:#F4BE62;
  --bw-color-warning-bg:#33260D;
  --bw-color-error-text:#FF9A90;
  --bw-color-error-bg:#3A1714;
  --bw-color-danger-fill:#C9372C;
  --bw-color-danger-fill-hover:#DB4A3E;
  --bw-color-focus:rgba(156,195,255,.35);
  --bw-color-focus-ring:#9CC3FF;
  --bw-elevation-1:0 1px 2px rgba(0,0,0,.4);
  --bw-elevation-2:0 2px 6px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.3);
  --bw-elevation-3:0 6px 12px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);
  --bw-elevation-4:0 10px 20px rgba(0,0,0,.55), 0 28px 64px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){
  :root[data-theme="system"]{
    color-scheme:dark;
    --bw-color-primary:#2D64B5;
    --bw-color-primary-hover:#3A72C4;
    --bw-color-accent:#9CC3FF;
    --bw-color-accent-hover:#C4DBFF;
    --bw-color-ink:#E8EDF4;
    --bw-color-text:#A9B5C6;
    --bw-color-text-subtle:#8C99AB;
    --bw-color-line:#283548;
    --bw-color-line-2:#36465D;
    --bw-color-line-strong:#6C7C93;
    --bw-color-panel:#121B27;
    --bw-color-bg:#0D141E;
    --bw-color-surface:#151F2C;
    --bw-color-surface-2:#1B2738;
    --bw-color-tint-1:#1B2E49;
    --bw-color-tint-2:#19283B;
    --bw-color-tint-3:#172231;
    --bw-color-track:#223045;
    --bw-color-appbar:#0F2B52;
    --bw-color-tone-navy:#3A67A8;
    --bw-color-inverse:#E8EDF4;
    --bw-color-on-inverse:#0D141E;
    --bw-color-overlay:rgba(2,6,12,.66);
    --bw-color-skeleton:#1F2B3D;
    --bw-color-skeleton-hi:#2A3950;
    --bw-color-scrollbar:#3A4B63;
    --bw-color-success-text:#7BD99A;
    --bw-color-success-bg:#11301D;
    --bw-color-warning-text:#F4BE62;
    --bw-color-warning-bg:#33260D;
    --bw-color-error-text:#FF9A90;
    --bw-color-error-bg:#3A1714;
    --bw-color-danger-fill:#C9372C;
    --bw-color-danger-fill-hover:#DB4A3E;
    --bw-color-focus:rgba(156,195,255,.35);
    --bw-color-focus-ring:#9CC3FF;
    --bw-elevation-1:0 1px 2px rgba(0,0,0,.4);
    --bw-elevation-2:0 2px 6px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.3);
    --bw-elevation-3:0 6px 12px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);
    --bw-elevation-4:0 10px 20px rgba(0,0,0,.55), 0 28px 64px rgba(0,0,0,.5);
  }
}
/* density: put data-density="compact" on <html> or any container (mouse users; touch keeps 44px targets) */
[data-density="compact"]{
  --bw-size-control:34px;
  --bw-size-control-sm:28px;
  --bw-density-row:6px;
  --bw-density-gap:10px;
  --bw-density-pad:16px;
}
/* touch: every control reaches the 44px target */
@media (pointer:coarse){
  :root,[data-density="compact"]{--bw-size-control:var(--bw-size-target);--bw-size-control-sm:var(--bw-size-target)}
}
/* reduced motion: durations collapse to zero (components also drop their animations) */
@media (prefers-reduced-motion:reduce){
  :root{--bw-motion-fast:0s;--bw-motion-base:0s;--bw-motion-duration-instant:0s;--bw-motion-duration-fast:0s;--bw-motion-duration-base:0s;--bw-motion-duration-slow:0s}
}

/* ---- base: opt-in. Everything is scoped to .bw (put it on <body> or an app root), so the stylesheet can sit on a page
   that has its own styles (bowens.com.au, SharePoint) without touching them. Colours are theme tokens: the same rules
   render light or dark (see the README "Themes"). ---- */
.bw{
  font-family:var(--bw-font-family-body);font-size:var(--bw-type-body-size);line-height:var(--bw-type-body-line);
  color:var(--bw-color-ink);background:var(--bw-color-bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
}
.bw *,.bw *::before,.bw *::after{box-sizing:border-box}
.bw [hidden]{display:none!important}      /* components set display; [hidden] must still win */
.bw :where(h1,h2,h3,h4,h5,h6){margin:0;color:var(--bw-color-heading);font-family:var(--bw-font-family-display);font-weight:var(--bw-font-weight-black);line-height:var(--bw-font-line-tight)}
.bw :where(h1){font-size:var(--bw-font-size-2xl)}
.bw :where(h2){font-size:var(--bw-font-size-xl)}
.bw :where(h3){font-size:var(--bw-font-size-lg)}
.bw :where(h4,h5,h6){font-size:var(--bw-font-size-md)}
.bw :where(p){margin:0 0 var(--bw-space-3)}
.bw :where(a){color:var(--bw-color-link);font-weight:var(--bw-font-weight-bold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bw :where(a:hover){color:var(--bw-color-accent-hover);text-decoration-thickness:2px}
/* one focus ring everywhere: a solid 2px ring (3:1 on the page) + a soft halo. Keyboard only (:focus-visible). */
.bw :where(:focus-visible){outline:2px solid var(--bw-color-focus-ring);outline-offset:2px}
.bw :where(img,svg,video){max-width:100%}
.bw :where(button,input,select,textarea){font:inherit;color:inherit}
.bw :where(code,kbd,samp,pre){font-family:var(--bw-font-family-mono);font-size:var(--bw-type-mono-size)}
.bw :where(code,kbd,samp){overflow-wrap:anywhere}
.bw :where(pre){max-width:100%;overflow-x:auto}
.bw :where(fieldset){min-width:0}
.bw ::selection{background:var(--bw-color-yellow);color:var(--bw-color-on-yellow)}
@media (prefers-reduced-motion:reduce){.bw *,.bw *::before,.bw *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* iOS zooms into any focused field under 16px */
@media (max-width:760px) and (pointer:coarse){.bw :where(input,select,textarea){font-size:16px}}

/* type roles: display / title / heading / body / label / caption / overline / mono */
.bw-display{font-family:var(--bw-font-family-display);font-size:var(--bw-type-display-size);line-height:var(--bw-type-display-line);font-weight:var(--bw-type-display-weight);letter-spacing:var(--bw-type-display-tracking);color:var(--bw-color-heading)}
.bw-title{font-family:var(--bw-font-family-display);font-size:var(--bw-type-title-size);line-height:var(--bw-type-title-line);font-weight:var(--bw-type-title-weight);letter-spacing:var(--bw-type-title-tracking);color:var(--bw-color-heading);margin:0}
.bw-heading{font-size:var(--bw-type-heading-size);line-height:var(--bw-type-heading-line);font-weight:var(--bw-type-heading-weight);color:var(--bw-color-heading);margin:0}
.bw-body-lg{font-size:var(--bw-type-body-lg-size);line-height:var(--bw-type-body-lg-line)}
.bw-caption{font-size:var(--bw-type-caption-size);line-height:var(--bw-type-caption-line);font-weight:var(--bw-type-caption-weight);color:var(--bw-color-text)}
.bw-overline{font-size:var(--bw-type-overline-size);line-height:var(--bw-type-overline-line);font-weight:var(--bw-type-overline-weight);letter-spacing:var(--bw-type-overline-tracking);text-transform:uppercase;color:var(--bw-color-text)}
.bw-mono{font-family:var(--bw-font-family-mono);font-size:var(--bw-type-mono-size)}
.bw-muted{color:var(--bw-color-text)}
.bw-small{font-size:var(--bw-font-size-sm)}
.bw-num{font-variant-numeric:tabular-nums}
.bw-nowrap{white-space:nowrap}
.bw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bw-show-phone{display:none}
@media (max-width:760px){.bw-hide-phone{display:none}.bw-show-phone{display:inline}}
.bw-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the site's highlight behind a headline word */
.bw-highlight{background:var(--bw-color-yellow);color:var(--bw-color-on-yellow);padding:0 .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* a keyboard key: <kbd class="bw-kbd">Ctrl</kbd> */
.bw-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--bw-color-line-2);border-bottom-width:2px;
  border-radius:var(--bw-radius-xs);background:var(--bw-color-surface);color:var(--bw-color-text);font-family:var(--bw-font-family-mono);font-size:11px;font-weight:var(--bw-font-weight-bold);line-height:1}
/* skip link: the first thing in <body> */
.bw-skip{position:absolute;left:var(--bw-space-3);top:-100px;z-index:var(--bw-z-tooltip);display:inline-flex;align-items:center;min-height:var(--bw-size-target);padding:0 16px;background:var(--bw-color-primary);color:var(--bw-color-on-primary)!important;font-weight:var(--bw-font-weight-heavy)}
.bw-skip:focus{top:var(--bw-space-3)}
/* a centred column for content pages */
.bw-container{width:100%;max-width:var(--bw-size-content);margin-inline:auto}
.bw-stack{display:flex;flex-direction:column;gap:var(--bw-density-gap)}
.bw-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bw-space-2)}

/* icons: <svg class="bw-icon"><use href=".../icons.svg#name"/></svg> - line icons, currentColor */
.bw-icon{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.bw-icon--sm{width:14px;height:14px;vertical-align:-2px}
.bw-icon--lg{width:24px;height:24px}
.bw-icon--xl{width:40px;height:40px;stroke-width:1.6}

/* scrollbars (apps) */
.bw{scrollbar-color:var(--bw-color-scrollbar) transparent}
.bw ::-webkit-scrollbar{width:10px;height:10px}
.bw ::-webkit-scrollbar-thumb{background:var(--bw-color-scrollbar);border:2px solid transparent;background-clip:padding-box;border-radius:var(--bw-radius-pill)}
.bw ::-webkit-scrollbar-track{background:transparent}

/* ---- buttons: the bowens.com.au notched corner (bottom-right cut). The site draws a tab outside the box with ::before /
   ::after (right:-9px); here the cut is a clip-path inside the box, so a button never overflows a table cell or toolbar.
   Colours run through --_bg / --_fg so every variant (and hover) changes in one place. The clip-path would cut an
   outline off, so the focus ring is drawn INSIDE (--_ring: a colour that stands out on that variant's fill). ---- */
.bw-btn{
  --_bg:var(--bw-color-primary);--_fg:var(--bw-color-on-primary);--_bd:transparent;--_bg-h:var(--bw-color-primary-hover);--_fg-h:var(--bw-color-on-primary);
  --_n:var(--bw-size-notch);--_ring:var(--bw-color-yellow);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--bw-space-2);
  min-height:var(--bw-size-control);padding:0 calc(var(--bw-space-5) + var(--_n) / 2) 0 var(--bw-space-5);
  border:1px solid var(--_bd);border-radius:0;background:var(--_bg);color:var(--_fg);
  font:inherit;font-size:var(--bw-font-size-base);font-weight:var(--bw-font-weight-heavy);line-height:1.2;text-decoration:none;white-space:nowrap;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--bw-motion-fast),color var(--bw-motion-fast),border-color var(--bw-motion-fast),transform var(--bw-motion-duration-instant) var(--bw-motion-ease-standard);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--_n)),calc(100% - var(--_n)) 100%,0 100%);
}
.bw-btn:hover{background-color:var(--_bg-h);color:var(--_fg-h)}
.bw-btn:active:not(:disabled){transform:translateY(1px)}
.bw-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--_ring);background-color:var(--_bg-h);color:var(--_fg-h)}
.bw-btn:disabled,.bw-btn[aria-disabled="true"]{--_bg:var(--bw-color-line-2);--_fg:var(--bw-color-text);--_bg-h:var(--bw-color-line-2);--_fg-h:var(--bw-color-text);--_bd:transparent;cursor:not-allowed;background-image:none}
.bw-btn[aria-busy="true"]{cursor:progress}
.bw-btn .bw-icon{margin-left:-2px}

/* variants */
.bw-btn--secondary{--_bg:var(--bw-color-yellow-ui);--_fg:var(--bw-color-on-yellow);--_bg-h:var(--bw-color-yellow-d);--_fg-h:var(--bw-color-on-yellow);--_ring:var(--bw-color-blue)}
.bw-btn--ghost{--_bg:transparent;--_fg:var(--bw-color-accent);--_bd:var(--bw-color-accent);--_bg-h:var(--bw-color-tint-1);--_fg-h:var(--bw-color-accent-hover);--_ring:var(--bw-color-focus-ring);
  /* the border can't follow the cut corner, so a diagonal stroke is drawn across it */
  background-image:linear-gradient(to top left,transparent calc(50% - .7px),var(--_bd) calc(50% - .7px),var(--_bd) calc(50% + .7px),transparent calc(50% + .7px));
  background-size:var(--_n) var(--_n);background-position:100% 100%;background-repeat:no-repeat}
/* quiet: a calm tinted button for toolbars and secondary actions (no border to draw round the notch) */
.bw-btn--quiet{--_bg:var(--bw-color-tint-1);--_fg:var(--bw-color-accent);--_bg-h:var(--bw-color-tint-2);--_fg-h:var(--bw-color-accent-hover);--_ring:var(--bw-color-focus-ring)}
.bw-btn--danger{--_bg:var(--bw-color-danger-fill);--_fg:#fff;--_bg-h:var(--bw-color-danger-fill-hover);--_fg-h:#fff}
.bw-btn--link{--_bg:transparent;--_fg:var(--bw-color-accent);--_bg-h:transparent;--_fg-h:var(--bw-color-accent-hover);--_ring:var(--bw-color-focus-ring);clip-path:none;padding:0 var(--bw-space-1);min-height:24px;text-decoration:underline;text-underline-offset:3px}
.bw-btn--link:focus-visible{box-shadow:none;outline:2px solid var(--bw-color-focus-ring);outline-offset:2px}
@media (pointer:coarse){.bw-btn--link{min-height:var(--bw-size-target);min-width:var(--bw-size-target)}}
.bw-btn--on-blue{--_bg:#fff;--_fg:var(--bw-color-blue);--_bg-h:var(--bw-color-yellow-ui);--_fg-h:var(--bw-color-blue);--_ring:var(--bw-color-blue)}

/* sizes */
.bw-btn--sm{--_n:7px;min-height:var(--bw-size-control-sm);padding:0 calc(var(--bw-space-3) + 4px) 0 var(--bw-space-3);font-size:var(--bw-font-size-sm)}
.bw-btn--lg{--_n:14px;min-height:var(--bw-size-control-lg);padding:0 calc(var(--bw-space-6) + 6px) 0 var(--bw-space-6);font-size:var(--bw-font-size-md)}
.bw-btn--cta{--_n:16px;min-height:72px;padding:0 calc(var(--bw-space-6) + 8px) 0 var(--bw-space-6);font-size:20px}
.bw-btn--block{display:flex;width:100%}
/* a square icon-only button (no notch: too small to read) */
.bw-btn--icon{clip-path:none;width:var(--bw-size-control);min-width:var(--bw-size-control);padding:0}
.bw-btn--icon.bw-btn--sm{width:var(--bw-size-control-sm);min-width:var(--bw-size-control-sm)}
.bw-btn--icon .bw-icon{margin:0}
.bw-btn--icon.bw-btn--ghost{background-image:none}

/* a row of buttons */
.bw-btn-row{display:flex;flex-wrap:wrap;gap:var(--bw-space-2);align-items:center}

/* a bare icon button (toolbars, card corners, close buttons): round hover, 44px on touch */
.bw-iconbtn{display:inline-grid;place-items:center;width:var(--bw-size-control-sm);height:var(--bw-size-control-sm);flex:0 0 auto;padding:0;border:0;border-radius:var(--bw-radius-pill);
  background:transparent;color:var(--bw-color-text);cursor:pointer;transition:background-color var(--bw-motion-fast),color var(--bw-motion-fast)}
.bw-iconbtn:hover{background:var(--bw-color-tint-2);color:var(--bw-color-accent)}
.bw-iconbtn[aria-pressed="true"],.bw-iconbtn[aria-expanded="true"]{background:var(--bw-color-tint-1);color:var(--bw-color-accent)}
.bw-iconbtn:disabled{opacity:.45;cursor:not-allowed;background:transparent}
.bw-iconbtn--lg{width:var(--bw-size-control);height:var(--bw-size-control)}
.bw-iconbtn--sm{width:28px;height:28px}
@media (pointer:coarse){.bw-iconbtn,.bw-iconbtn--sm{min-width:var(--bw-size-target);min-height:var(--bw-size-target)}}

/* ---- forms: square, 1px line, blue labels (site); a visible focus ring (the site removes it - an accessibility gap) ---- */
.bw-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--bw-space-4);min-width:0}
.bw-label{font-size:var(--bw-type-label-size);line-height:var(--bw-type-label-line);font-weight:var(--bw-type-label-weight);color:var(--bw-color-accent)}
.bw-label .bw-req{color:var(--bw-color-danger-text);margin-left:2px}
/* label row with something on the right (a counter, "Optional") */
.bw-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--bw-space-3)}
.bw-label-row>:last-child:not(:first-child){flex:0 0 auto;font-size:var(--bw-font-size-sm);color:var(--bw-color-text);font-variant-numeric:tabular-nums}
.bw-help{font-size:var(--bw-type-caption-size);line-height:var(--bw-type-caption-line);color:var(--bw-color-text)}
.bw-field--error .bw-input,.bw-field--error .bw-select,.bw-field--error .bw-textarea{border-color:var(--bw-color-error);box-shadow:inset 0 -2px 0 var(--bw-color-error)}
.bw-field--error .bw-input:focus,.bw-field--error .bw-select:focus,.bw-field--error .bw-textarea:focus{border-color:var(--bw-color-error);box-shadow:inset 0 -2px 0 var(--bw-color-error),0 0 0 4px var(--bw-color-focus)}
.bw-error-msg{display:flex;gap:6px;align-items:flex-start;font-size:var(--bw-font-size-sm);color:var(--bw-color-error-text);font-weight:var(--bw-font-weight-bold)}

.bw-input,.bw-select,.bw-textarea{
  --_chev:var(--bw-color-accent);
  width:100%;min-height:var(--bw-size-control);padding:8px 12px;border:1px solid var(--bw-color-line-2);border-radius:var(--bw-radius-control);
  background-color:var(--bw-color-surface);color:var(--bw-color-ink);font:inherit;font-size:var(--bw-font-size-base);
  transition:border-color var(--bw-motion-fast),box-shadow var(--bw-motion-fast)
}
.bw-input::placeholder,.bw-textarea::placeholder{color:var(--bw-color-text-subtle);opacity:1}
.bw-input:hover,.bw-select:hover,.bw-textarea:hover{border-color:var(--bw-color-line-strong)}
/* :focus-within too: in date/time inputs Chromium drops :focus once Tab moves past the first part */
.bw-input:focus,.bw-select:focus,.bw-textarea:focus,.bw-input:focus-within{outline:none;border-color:var(--bw-color-focus-ring);box-shadow:0 0 0 1px var(--bw-color-focus-ring),0 0 0 4px var(--bw-color-focus)}
.bw-input:disabled,.bw-select:disabled,.bw-textarea:disabled{background-color:var(--bw-color-panel);color:var(--bw-color-text);cursor:not-allowed}
.bw-input[readonly]{background-color:var(--bw-color-tint-3)}
.bw-input--lg,.bw-select--lg{min-height:var(--bw-size-control-lg);padding-left:20px}
.bw-textarea{min-height:96px;resize:vertical;line-height:var(--bw-font-line-body);max-width:100%}
/* the chevron is two gradient triangles, so it follows the theme (a data: SVG can't read a custom property) */
.bw-select{appearance:none;padding-right:36px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--_chev) 50%),linear-gradient(135deg,var(--_chev) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.bw-select option{background:var(--bw-color-surface);color:var(--bw-color-ink)}

/* checkbox / radio: native, tinted; the whole label is the target (44px on touch) */
.bw-check{display:inline-flex;align-items:center;gap:var(--bw-space-2);cursor:pointer;font-size:var(--bw-font-size-base);min-height:28px}
.bw-check input{width:18px;height:18px;margin:0;accent-color:var(--bw-color-primary);cursor:pointer;flex:0 0 auto}
@media (pointer:coarse){.bw-check{min-height:var(--bw-size-target)}}

/* toggle switch: <label class="bw-toggle"><input type="checkbox"><span></span> Label</label> (or role="switch" on the input) */
.bw-toggle{position:relative;display:inline-flex;align-items:center;gap:var(--bw-space-2);cursor:pointer;min-height:28px}
.bw-toggle input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.bw-toggle span{position:relative;width:42px;height:24px;border-radius:var(--bw-radius-pill);background:var(--bw-color-line-strong);transition:background var(--bw-motion-fast);flex:0 0 auto}
.bw-toggle span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--bw-radius-round);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform var(--bw-motion-duration-fast) var(--bw-motion-ease-emphasized)}
.bw-toggle input:checked+span{background:var(--bw-color-primary)}
.bw-toggle input:checked+span::after{transform:translateX(18px)}
.bw-toggle input:focus-visible+span{outline:2px solid var(--bw-color-focus-ring);outline-offset:2px}
.bw-toggle input:disabled+span{opacity:.5}
.bw-toggle:has(input:disabled){cursor:not-allowed}
@media (pointer:coarse){.bw-toggle{min-height:var(--bw-size-target);min-width:var(--bw-size-target);justify-content:center}}
/* a settings row: label + description left, switch right */
.bw-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--bw-space-4);padding:var(--bw-density-row) 0}
.bw-toggle-row+.bw-toggle-row{border-top:1px solid var(--bw-color-line)}
.bw-toggle-row__text{min-width:0}
.bw-toggle-row__text b{display:block;font-weight:var(--bw-font-weight-bold);color:var(--bw-color-ink)}
.bw-toggle-row__text span{display:block;font-size:var(--bw-font-size-sm);color:var(--bw-color-text)}

/* segmented control (either/or choices): a tinted track with the chosen segment raised.
   <div class="bw-seg" role="radiogroup"><button role="radio" aria-checked="true">A</button>...</div> (aria-pressed works too) */
.bw-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;max-width:100%;
  background:var(--bw-color-track);border-radius:var(--bw-radius-sm)}
.bw-seg--block{display:flex;width:100%}
/* flex 1 0 auto: segments share the width but never shrink below their label - a narrow column wraps them instead of clipping */
.bw-seg>button{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:calc(var(--bw-size-control) - 8px);padding:0 var(--bw-space-4);border:0;border-radius:var(--bw-radius-xs);background:none;cursor:pointer;
  font-weight:var(--bw-font-weight-bold);color:var(--bw-color-text);white-space:nowrap;
  transition:background-color var(--bw-motion-fast),color var(--bw-motion-fast),box-shadow var(--bw-motion-fast)}
.bw-seg>button:hover{color:var(--bw-color-accent)}
.bw-seg>button[aria-pressed="true"],.bw-seg>button[aria-checked="true"],.bw-seg>button[aria-selected="true"]{background:var(--bw-color-surface-2);color:var(--bw-color-accent);box-shadow:var(--bw-elevation-1),inset 0 -2px 0 var(--bw-color-yellow)}
.bw-seg>button:focus-visible{outline:2px solid var(--bw-color-focus-ring);outline-offset:-2px}
.bw-seg--sm>button{min-height:calc(var(--bw-size-control-sm) - 6px);padding:0 var(--bw-space-3);font-size:var(--bw-font-size-sm)}
@media (pointer:coarse){.bw-seg>button,.bw-seg--sm>button{min-height:var(--bw-size-target)}}

/* search box (site header style) */
.bw-search{position:relative;display:flex;align-items:center}
.bw-search>.bw-icon{position:absolute;left:14px;color:var(--bw-color-accent);pointer-events:none}
.bw-search .bw-input{padding-left:42px}
.bw-search>.bw-kbd{position:absolute;right:10px;pointer-events:none}

/* combobox (multi-select with chips) */
.bw-combo{position:relative}
.bw-combo__box{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:var(--bw-size-control);padding:5px 8px;border:1px solid var(--bw-color-line-2);background:var(--bw-color-surface);cursor:text}
.bw-combo__box:focus-within{border-color:var(--bw-color-focus-ring);box-shadow:0 0 0 1px var(--bw-color-focus-ring),0 0 0 4px var(--bw-color-focus)}
.bw-combo__box input{flex:1 1 120px;min-width:80px;border:0;outline:0;padding:4px;background:none;color:var(--bw-color-ink)}
@media (pointer:coarse){.bw-combo__box{padding-top:0;padding-bottom:0}.bw-combo__box input{min-height:var(--bw-size-target)}}
.bw-combo__list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:var(--bw-z-menu);max-height:260px;overflow:auto;margin:0;padding:4px;list-style:none;
  background:var(--bw-color-surface-2);border:1px solid var(--bw-color-line);border-radius:var(--bw-radius-surface);box-shadow:var(--bw-elevation-3)}
.bw-combo__list li{padding:8px 12px;cursor:pointer;border-radius:var(--bw-radius-xs)}
.bw-combo__list li[aria-selected="true"],.bw-combo__list li:hover{background:var(--bw-color-tint-1);color:var(--bw-color-accent)}

/* a two-column form grid that collapses on phones */
.bw-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--bw-space-4)}
.bw-form-grid .bw-field--wide{grid-column:1/-1}
@media (max-width:760px){.bw-form-grid{grid-template-columns:1fr}}
/* a form section: title + description on the left, fields on the right (stacks on phones) */
.bw-form-section{display:flex;flex-wrap:wrap;gap:var(--bw-space-3) var(--bw-space-6);padding:var(--bw-space-5) 0}
/* first child = the title + description (220-320px), everything after it shares the rest; wraps under it when narrow */
.bw-form-section>:first-child{flex:1 1 220px;max-width:320px}
.bw-form-section>:not(:first-child){flex:999 1 360px;min-width:0}
.bw-form-section+.bw-form-section{border-top:1px solid var(--bw-color-line)}
.bw-form-section__title{margin:0 0 4px;font-size:var(--bw-type-heading-size);font-weight:var(--bw-type-heading-weight);color:var(--bw-color-heading)}
.bw-form-section__desc{margin:0;color:var(--bw-color-text);font-size:var(--bw-font-size-sm)}
@media (max-width:760px){.bw-form-section>:first-child{max-width:none}}

/* ---- content: cards (+ media cards), pills / badges / chips, alerts, tables, stat tiles, empty + loading states ---- */

/* card */
.bw-card{position:relative;background:var(--bw-color-surface);border:1px solid var(--bw-color-line);border-radius:var(--bw-radius-surface);padding:var(--bw-density-pad);min-width:0;box-shadow:var(--bw-elevation-1)}
.bw-card--flush{padding:0}
.bw-card--flat{box-shadow:none}
.bw-card--quiet{background:var(--bw-color-panel);box-shadow:none}
.bw-card__head{display:flex;align-items:flex-start;gap:var(--bw-space-3);margin-bottom:var(--bw-space-4)}
.bw-card__title{margin:0;font-size:var(--bw-type-heading-size);line-height:var(--bw-type-heading-line);font-weight:var(--bw-font-weight-black);color:var(--bw-color-heading);display:flex;align-items:center;gap:var(--bw-space-2)}
.bw-card__sub{margin:2px 0 0;font-size:var(--bw-font-size-sm);color:var(--bw-color-text)}
.bw-card__actions{margin-left:auto;display:flex;gap:var(--bw-space-2);flex-wrap:wrap}
/* cards in a row: equal height, the footer pinned to the bottom */
.bw-card--stretch{display:flex;flex-direction:column}
.bw-card--stretch>.bw-card__foot{margin-top:auto;padding-top:var(--bw-space-4)}
.bw-card__foot{display:flex;flex-wrap:wrap;gap:var(--bw-space-2);align-items:center}
/* a whole card that is one link/button: <a class="bw-card bw-card--link"> - lifts on hover */
.bw-card--link{display:block;color:inherit;text-decoration:none;font-weight:inherit;cursor:pointer;transition:box-shadow var(--bw-motion-fast),border-color var(--bw-motion-fast),transform var(--bw-motion-fast)}
.bw-card--link:hover{box-shadow:var(--bw-elevation-2);border-color:var(--bw-color-line-2);color:inherit}
.bw-card--link:active{transform:translateY(1px)}
/* media card (photography-led, like the site): image on top, a yellow rule under it on hover */
.bw-card--media{padding:0;overflow:hidden;display:flex;flex-direction:column}
.bw-card__media{position:relative;aspect-ratio:var(--bw-media-ratio,16/9);background:var(--bw-color-tint-2);overflow:hidden}
.bw-card__media>img,.bw-card__media>video{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--bw-motion-duration-slow) var(--bw-motion-ease-standard)}
.bw-card--link:hover .bw-card__media>img{transform:scale(1.03)}
.bw-card__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--bw-color-yellow);transform:scaleX(0);transform-origin:left;transition:transform var(--bw-motion-base)}
.bw-card--link:hover .bw-card__media::after,.bw-card--link:focus-visible .bw-card__media::after{transform:none}
.bw-card__media .bw-badge,.bw-card__media .bw-pill{position:absolute;left:var(--bw-space-3);top:var(--bw-space-3)}
.bw-card__body{padding:var(--bw-space-4) var(--bw-density-pad) var(--bw-density-pad);display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.bw-card__eyebrow{font-size:var(--bw-type-overline-size);font-weight:var(--bw-type-overline-weight);letter-spacing:var(--bw-type-overline-tracking);text-transform:uppercase;color:var(--bw-color-text)}
.bw-card--media .bw-card__foot{padding:0 var(--bw-density-pad) var(--bw-density-pad);margin-top:auto}

.bw-grid{display:grid;gap:var(--bw-density-gap);grid-template-columns:repeat(var(--bw-cols,3),minmax(0,1fr))}
@media (max-width:1180px){.bw-grid{grid-template-columns:repeat(min(var(--bw-cols,3),2),minmax(0,1fr))}}
@media (max-width:760px){.bw-grid{grid-template-columns:1fr}}
/* card grid that fills by width: <div class="bw-card-grid" style="--bw-min:260px"> */
.bw-card-grid{display:grid;gap:var(--bw-density-gap);grid-template-columns:repeat(auto-fill,minmax(min(var(--bw-min,260px),100%),1fr))}

/* pill (status), badge (site "Bulk Buy Price" label), chip (removable filter tag) */
.bw-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--bw-radius-pill);font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-bold);line-height:1.6;
  background:var(--bw-color-info-bg);color:var(--bw-color-info-text);border:1px solid transparent;white-space:nowrap;vertical-align:middle}
.bw-pill--info{background:var(--bw-color-info-bg);color:var(--bw-color-info-text)}
.bw-pill--good,.bw-pill--success{background:var(--bw-color-success-bg);color:var(--bw-color-success-text)}
.bw-pill--warn,.bw-pill--warning{background:var(--bw-color-warning-bg);color:var(--bw-color-warning-text)}
.bw-pill--bad,.bw-pill--danger{background:var(--bw-color-danger-bg);color:var(--bw-color-danger-text)}
.bw-pill--muted{background:var(--bw-color-panel);color:var(--bw-color-text);border-color:var(--bw-color-line)}
.bw-pill--brand{background:var(--bw-color-yellow);color:var(--bw-color-on-yellow)}
/* status dot inside a pill: <span class="bw-pill bw-pill--good bw-pill--dot">Live</span> */
.bw-pill--dot::before{content:"";width:7px;height:7px;border-radius:var(--bw-radius-round);background:currentColor;flex:0 0 auto}
.bw-pill--outline{background:transparent;border-color:currentColor}
.bw-badge{display:inline-block;padding:4px 8px;font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-bold);background:var(--bw-color-yellow-ui);color:var(--bw-color-on-yellow);line-height:1.3}
.bw-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 12px;border-radius:var(--bw-radius-pill);font-size:var(--bw-font-size-sm);
  background:var(--bw-color-tint-3);border:1px solid var(--bw-color-line-2);color:var(--bw-color-accent);font-weight:var(--bw-font-weight-bold)}
.bw-chip button{display:inline-grid;place-items:center;width:24px;height:24px;border:0;border-radius:var(--bw-radius-round);background:var(--bw-color-primary);color:var(--bw-color-on-primary);cursor:pointer;font-size:12px;line-height:1;padding:0}
.bw-chip[aria-pressed]{cursor:pointer;padding-right:12px}
.bw-chip[aria-pressed="true"]{background:var(--bw-color-primary);border-color:var(--bw-color-primary);color:var(--bw-color-on-primary)}
.bw-chips{display:flex;flex-wrap:wrap;gap:6px}
/* touch: 44px chips; the remove button is a 44px hit area with the round button drawn inside it */
@media (pointer:coarse){.bw-chip{min-height:var(--bw-size-target);padding-left:14px}.bw-chip[aria-pressed]{padding:0 16px}
  .bw-chip button{width:var(--bw-size-target);height:var(--bw-size-target);margin:-4px -4px -4px -6px;background:radial-gradient(circle,var(--bw-color-primary) 11px,transparent 11.5px)}}
.bw-dot{display:inline-block;width:8px;height:8px;border-radius:var(--bw-radius-round);background:var(--bw-color-success);flex:0 0 auto}
.bw-dot--warn{background:var(--bw-color-warning)}.bw-dot--bad{background:var(--bw-color-error)}.bw-dot--off{background:var(--bw-color-line-2)}.bw-dot--info{background:var(--bw-color-info)}
.bw-dot--pulse{animation:bw-pulse 1.6s var(--bw-motion-ease-standard) infinite}
@keyframes bw-pulse{50%{opacity:.35}}

/* alert: left bar + tint */
.bw-alert{display:flex;gap:var(--bw-space-3);align-items:flex-start;padding:var(--bw-space-3) var(--bw-space-4);border-left:4px solid var(--bw-color-accent);border-radius:var(--bw-radius-xs);background:var(--bw-color-info-bg);color:var(--bw-color-ink)}
.bw-alert>.bw-icon{color:var(--bw-color-accent);margin-top:2px}
.bw-alert--good{border-color:var(--bw-color-success);background:var(--bw-color-success-bg)}.bw-alert--good>.bw-icon{color:var(--bw-color-success-text)}
.bw-alert--warn{border-color:var(--bw-color-warning);background:var(--bw-color-warning-bg)}.bw-alert--warn>.bw-icon{color:var(--bw-color-warning-text)}
.bw-alert--bad{border-color:var(--bw-color-error);background:var(--bw-color-error-bg)}.bw-alert--bad>.bw-icon{color:var(--bw-color-error-text)}
.bw-alert b{font-weight:var(--bw-font-weight-heavy)}

/* table: wrap it in .bw-table-wrap; on phones it becomes cards (td needs data-label) */
.bw-table-wrap{overflow:auto;border:1px solid var(--bw-color-line);border-radius:var(--bw-radius-surface);background:var(--bw-color-surface)}
.bw-table{width:100%;border-collapse:collapse;font-size:var(--bw-font-size-base)}
.bw-table th{position:sticky;top:0;z-index:1;text-align:left;padding:10px 12px;background:var(--bw-color-tint-2);color:var(--bw-color-accent);
  font-size:var(--bw-font-size-xs);font-weight:var(--bw-font-weight-heavy);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--bw-color-line-2);white-space:nowrap}
.bw-table td{padding:var(--bw-density-row) 12px;border-bottom:1px solid var(--bw-color-line);vertical-align:middle}
.bw-table tbody tr:last-child td{border-bottom:0}
.bw-table tbody tr:hover{background:var(--bw-color-tint-3)}
.bw-table tbody tr[aria-selected="true"]{background:var(--bw-color-tint-1)}
.bw-table .bw-num,.bw-table td.num,.bw-table th.num{text-align:right}
.bw-table th button.bw-sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:24px}
.bw-table th button.bw-sort:focus-visible{outline:2px solid var(--bw-color-focus-ring);outline-offset:2px}
.bw-table th button.bw-sort::after{content:"";width:0;height:0;border:4px solid transparent;opacity:.35;border-top-color:currentColor;margin-top:4px}
.bw-table th[aria-sort="ascending"] button.bw-sort::after{border-top-color:transparent;border-bottom-color:currentColor;margin:-4px 0 0;opacity:1}
.bw-table th[aria-sort="descending"] button.bw-sort::after{opacity:1}
@media (max-width:760px){
  .bw-table--cards thead{display:none}
  .bw-table--cards,.bw-table--cards tbody,.bw-table--cards tr,.bw-table--cards td{display:block;width:100%}
  .bw-table--cards tr{border-bottom:1px solid var(--bw-color-line-2);padding:var(--bw-space-2) 0}
  .bw-table--cards tbody tr:last-child{border-bottom:0}
  .bw-table--cards td{display:flex;gap:var(--bw-space-3);border:0;padding:4px 12px;min-width:0;overflow-wrap:anywhere}
  .bw-table--cards td[data-label]::before{content:attr(data-label);flex:0 0 40%;color:var(--bw-color-text);font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-bold)}
}

/* stat tile: label, value, note - every row lines up (content starts at the top, label has room for 2 lines) */
.bw-stats{display:grid;gap:var(--bw-space-3);grid-template-columns:repeat(var(--bw-cols,4),minmax(0,1fr))}
@media (max-width:1180px){.bw-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.bw-stats{grid-template-columns:1fr}}
.bw-stat{--_accent:var(--bw-color-accent);display:flex;flex-direction:column;justify-content:flex-start;gap:4px;min-width:0;text-align:left;
  padding:var(--bw-space-4);background:var(--bw-color-surface);border:1px solid var(--bw-color-line);border-left:4px solid var(--_accent);border-radius:var(--bw-radius-xs);color:inherit;font:inherit;box-shadow:var(--bw-elevation-1)}
button.bw-stat,a.bw-stat{cursor:pointer;text-decoration:none;transition:box-shadow var(--bw-motion-fast),background-color var(--bw-motion-fast)}
button.bw-stat:hover,a.bw-stat:hover{background:var(--bw-color-tint-3);box-shadow:var(--bw-elevation-2)}
.bw-stat__label{display:flex;align-items:flex-start;gap:6px;min-height:32px;line-height:16px;font-size:var(--bw-font-size-xs);font-weight:var(--bw-font-weight-heavy);
  text-transform:uppercase;letter-spacing:.06em;color:var(--bw-color-text)}
.bw-stat__value{font-family:var(--bw-font-family-display);font-size:var(--bw-font-size-4xl);font-weight:var(--bw-font-weight-black);line-height:1.1;color:var(--bw-color-ink);font-variant-numeric:tabular-nums}
.bw-stat__note{font-size:var(--bw-font-size-sm);color:var(--bw-color-text)}
.bw-stat--good{--_accent:var(--bw-color-success)}.bw-stat--warn{--_accent:var(--bw-color-warning)}.bw-stat--bad{--_accent:var(--bw-color-error)}.bw-stat--yellow{--_accent:var(--bw-color-yellow)}

/* empty state, with an optional illustration slot: <div class="bw-empty"><div class="bw-empty__art"><img|svg></div>... */
.bw-empty{display:flex;flex-direction:column;align-items:center;gap:var(--bw-space-2);padding:var(--bw-space-7) var(--bw-space-4);text-align:center;color:var(--bw-color-text)}
.bw-empty>.bw-icon{width:36px;height:36px;color:var(--bw-color-blue-l)}
.bw-empty__art{display:grid;place-items:center;width:min(200px,60%);aspect-ratio:4/3;margin-bottom:var(--bw-space-2);color:var(--bw-color-accent)}
.bw-empty__art>img,.bw-empty__art>svg{width:100%;height:100%;object-fit:contain}
/* the default art: a calm round plate behind the icon */
.bw-empty__plate{display:grid;place-items:center;width:72px;height:72px;margin-bottom:var(--bw-space-2);border-radius:var(--bw-radius-round);background:var(--bw-color-tint-1);color:var(--bw-color-accent);box-shadow:inset 0 -4px 0 var(--bw-color-yellow)}
.bw-empty__plate .bw-icon{width:30px;height:30px;stroke-width:1.75}
.bw-empty__title{font-weight:var(--bw-font-weight-black);color:var(--bw-color-heading);font-size:var(--bw-font-size-md)}
.bw-empty__text{max-width:42ch}
.bw-empty__actions{display:flex;flex-wrap:wrap;gap:var(--bw-space-2);justify-content:center;margin-top:var(--bw-space-2)}
.bw-spinner{display:inline-block;width:22px;height:22px;border:3px solid var(--bw-color-tint-1);border-top-color:var(--bw-color-primary);border-radius:var(--bw-radius-round);animation:bw-spin .8s linear infinite;flex:0 0 auto}
.bw-spinner--lg{width:40px;height:40px;border-width:4px}
@keyframes bw-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bw-spinner{animation:bw-spin 2.4s linear infinite!important}}
.bw-loading{display:flex;align-items:center;justify-content:center;gap:var(--bw-space-3);min-height:160px;color:var(--bw-color-text);font-weight:var(--bw-font-weight-bold)}
.bw-loading--page{min-height:100vh}

/* ---- data display: avatar (+ stack), skeleton loaders, list / data rows, key-value lists, badge counts,
   link tiles (app launcher), progress bar ---- */

/* avatar: a photo, or initials on a tint. <span class="bw-avatar"><img alt=""></span> | <span class="bw-avatar">BM</span> */
.bw-avatar{--_s:var(--bw-size-avatar);position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:var(--_s);height:var(--_s);border-radius:var(--bw-radius-round);
  background:var(--bw-color-tint-1);color:var(--bw-color-accent);font-size:calc(var(--_s) * .38);font-weight:var(--bw-font-weight-heavy);line-height:1;letter-spacing:.02em;
  text-transform:uppercase;user-select:none;overflow:visible;vertical-align:middle}
.bw-avatar>img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}
.bw-avatar--xs{--_s:var(--bw-size-avatar-xs)}.bw-avatar--sm{--_s:var(--bw-size-avatar-sm)}.bw-avatar--lg{--_s:var(--bw-size-avatar-lg)}.bw-avatar--xl{--_s:var(--bw-size-avatar-xl)}
/* a deterministic colour from the name: data-tone="0".."5" */
.bw-avatar[data-tone="1"]{background:var(--bw-color-primary);color:var(--bw-color-on-primary)}
.bw-avatar[data-tone="2"]{background:var(--bw-color-yellow);color:var(--bw-color-on-yellow)}
.bw-avatar[data-tone="3"]{background:var(--bw-color-success-bg);color:var(--bw-color-success-text)}
.bw-avatar[data-tone="4"]{background:var(--bw-color-warning-bg);color:var(--bw-color-warning-text)}
.bw-avatar[data-tone="5"]{background:var(--bw-color-tone-navy);color:#fff}
/* the same tones for app-tile icons: <span class="bw-tile__icon" data-tone="1"> */
.bw-tile__icon[data-tone="1"]{background:var(--bw-color-primary);color:var(--bw-color-on-primary)}
.bw-tile__icon[data-tone="2"]{background:var(--bw-color-yellow);color:var(--bw-color-on-yellow)}
.bw-tile__icon[data-tone="3"]{background:var(--bw-color-success-bg);color:var(--bw-color-success-text)}
.bw-tile__icon[data-tone="4"]{background:var(--bw-color-warning-bg);color:var(--bw-color-warning-text)}
.bw-tile__icon[data-tone="5"]{background:var(--bw-color-tone-navy);color:#fff}
/* presence / status dot: <span class="bw-avatar">…<i class="bw-avatar__status" data-status="online"></i></span> */
.bw-avatar__status{position:absolute;right:0;bottom:0;width:max(10px,calc(var(--_s) * .26));height:max(10px,calc(var(--_s) * .26));border-radius:var(--bw-radius-round);
  background:var(--bw-color-line-strong);box-shadow:0 0 0 2px var(--bw-color-surface)}
.bw-avatar__status[data-status="online"]{background:var(--bw-color-success)}
.bw-avatar__status[data-status="busy"]{background:var(--bw-color-error)}
.bw-avatar__status[data-status="away"]{background:var(--bw-color-warning)}
/* avatar stack: overlapping, the last one may be "+3" */
.bw-avatars{display:inline-flex;align-items:center;flex-direction:row-reverse;justify-content:flex-end}
.bw-avatars>.bw-avatar{box-shadow:0 0 0 2px var(--bw-color-surface)}
.bw-avatars>.bw-avatar+.bw-avatar{margin-right:calc(var(--_s) * -.28)}
.bw-avatars__more{background:var(--bw-color-panel);color:var(--bw-color-text);font-size:calc(var(--_s) * .32)}
/* a person: avatar + name + detail */
.bw-person{display:flex;align-items:center;gap:var(--bw-space-3);min-width:0}
.bw-person__text{min-width:0;display:flex;flex-direction:column}
.bw-person__name{font-weight:var(--bw-font-weight-bold);color:var(--bw-color-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-person__meta{font-size:var(--bw-font-size-sm);color:var(--bw-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* skeleton loaders: shapes that stand in for content while it loads */
.bw-skeleton{display:block;min-height:14px;border-radius:var(--bw-radius-xs);
  background:linear-gradient(90deg,var(--bw-color-skeleton) 25%,var(--bw-color-skeleton-hi) 37%,var(--bw-color-skeleton) 63%);background-size:400% 100%;animation:bw-shimmer 1.4s ease infinite}
.bw-skeleton--text{height:.9em;margin:.35em 0;width:var(--w,100%)}
.bw-skeleton--title{height:1.4em;width:var(--w,60%);margin-bottom:var(--bw-space-3)}
.bw-skeleton--circle{width:var(--s,40px);height:var(--s,40px);border-radius:var(--bw-radius-round);flex:0 0 auto}
.bw-skeleton--block{width:100%;height:var(--h,120px)}
.bw-skeleton--media{width:100%;aspect-ratio:16/9;border-radius:0}
@keyframes bw-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.bw-skeleton{background:var(--bw-color-skeleton)!important}}

/* list / data rows: <ul class="bw-list"><li class="bw-row">lead · main (title + meta) · trail</li></ul>
   A row may be one <a>/<button class="bw-row">, the whole row is the target */
.bw-list{list-style:none;margin:0;padding:0;background:var(--bw-color-surface);border:1px solid var(--bw-color-line);border-radius:var(--bw-radius-surface);overflow:hidden}
.bw-list--flush{border:0;border-radius:0;background:transparent}
.bw-list>li+li{border-top:1px solid var(--bw-color-line)}
.bw-row{display:flex;align-items:center;gap:var(--bw-space-3);width:100%;min-height:var(--bw-size-target);padding:var(--bw-density-row) var(--bw-space-4);
  border:0;background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:none;font-weight:inherit}
:is(a,button).bw-row{cursor:pointer;transition:background-color var(--bw-motion-fast)}
:is(a,button).bw-row:hover{background:var(--bw-color-tint-3);color:inherit}
:is(a,button).bw-row:focus-visible{outline:2px solid var(--bw-color-focus-ring);outline-offset:-2px}
.bw-row[aria-selected="true"],.bw-row[aria-current="true"],.bw-row[aria-current="page"]{background:var(--bw-color-tint-1);box-shadow:inset 3px 0 0 var(--bw-color-yellow)}
.bw-row__lead{flex:0 0 auto;display:grid;place-items:center;color:var(--bw-color-accent)}
.bw-row__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.bw-row__title{font-weight:var(--bw-font-weight-bold);color:var(--bw-color-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-row__meta{font-size:var(--bw-font-size-sm);color:var(--bw-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-row__meta--wrap{white-space:normal}
.bw-row__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--bw-space-2);color:var(--bw-color-text);font-size:var(--bw-font-size-sm)}
:is(a,button).bw-row>.bw-row__chev{flex:0 0 auto;color:var(--bw-color-text-subtle)}
@media (max-width:760px){.bw-row--stack{flex-wrap:wrap}.bw-row--stack>.bw-row__trail{width:100%;padding-left:calc(var(--bw-size-avatar) + var(--bw-space-3))}}
/* section heading inside a list */
.bw-list__head{padding:var(--bw-space-2) var(--bw-space-4);background:var(--bw-color-panel);font-size:var(--bw-type-overline-size);font-weight:var(--bw-type-overline-weight);
  letter-spacing:var(--bw-type-overline-tracking);text-transform:uppercase;color:var(--bw-color-text)}

/* key / value list: two columns; .bw-kv--stack puts the label above the value (narrow panels, phones) */
.bw-kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--bw-space-2) var(--bw-space-5);margin:0}
.bw-kv dt{color:var(--bw-color-text);font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-bold);padding-top:1px}
.bw-kv dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--bw-color-ink)}
.bw-kv--lines{row-gap:0;column-gap:0}
.bw-kv--lines dt{padding-right:var(--bw-space-5)}
.bw-kv--lines dt,.bw-kv--lines dd{padding:var(--bw-density-row) 0;border-bottom:1px solid var(--bw-color-line)}
.bw-kv--lines dt:last-of-type,.bw-kv--lines dd:last-of-type{border-bottom:0}
.bw-kv--stack{grid-template-columns:1fr;gap:2px}
.bw-kv--stack dd{margin-bottom:var(--bw-space-3)}
@media (max-width:420px){.bw-kv{grid-template-columns:1fr;gap:2px}.bw-kv dd{margin-bottom:var(--bw-space-3)}.bw-kv--lines dt{border-bottom:0;padding-bottom:0}}

/* badge count: <span class="bw-count">3</span> on nav items, tabs, icon buttons (.bw-count--dot = unread dot) */
.bw-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--bw-radius-pill);
  background:var(--bw-color-yellow);color:var(--bw-color-on-yellow);font-size:11px;font-weight:var(--bw-font-weight-heavy);line-height:1;font-variant-numeric:tabular-nums}
.bw-count--quiet{background:var(--bw-color-track);color:var(--bw-color-text)}
.bw-count--danger{background:var(--bw-color-danger-fill);color:#fff}
.bw-count--dot{min-width:10px;width:10px;height:10px;padding:0}
/* pinned to the corner of an icon button: <button class="bw-iconbtn bw-has-count"><svg/><span class="bw-count">2</span></button> */
.bw-has-count{position:relative}
.bw-has-count>.bw-count{position:absolute;top:-2px;right:-4px;box-shadow:0 0 0 2px var(--bw-color-surface)}

/* link tiles (app launcher / Toolbox): icon or logo, name, one-line description. <a class="bw-tile"> */
.bw-tiles{display:grid;gap:var(--bw-space-3);grid-template-columns:repeat(auto-fill,minmax(min(var(--bw-min,220px),100%),1fr))}
/* every tile in a grid is the SAME size: a fixed height, the name on one line (… when long) and the description clamped
   to two; LinkTile shows the full name in a tooltip on hover / keyboard focus */
.bw-tile{position:relative;display:flex;align-items:center;gap:var(--bw-space-3);height:80px;min-width:0;overflow:hidden;padding:var(--bw-space-3) var(--bw-space-4);
  background:var(--bw-color-surface);border:1px solid var(--bw-color-line);border-radius:var(--bw-radius-surface);color:var(--bw-color-ink);text-decoration:none;font-weight:inherit;
  box-shadow:var(--bw-elevation-1);transition:box-shadow var(--bw-motion-fast),border-color var(--bw-motion-fast),transform var(--bw-motion-fast)}
.bw-tile:hover{border-color:var(--bw-color-line-2);box-shadow:var(--bw-elevation-2);color:var(--bw-color-ink)}
.bw-tile:active{transform:translateY(1px)}
.bw-tile__icon{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:var(--bw-radius-sm);background:var(--bw-color-tint-1);color:var(--bw-color-accent)}
.bw-tile__icon>img{width:28px;height:28px;object-fit:contain}
.bw-tile__icon .bw-icon{width:22px;height:22px}
.bw-tile__text{min-width:0;display:flex;flex-direction:column;gap:1px}
.bw-tile__name{font-weight:var(--bw-font-weight-heavy);color:var(--bw-color-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-tile__desc{font-size:var(--bw-font-size-sm);line-height:1.35;color:var(--bw-color-text);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.bw-tile__ext{position:absolute;top:8px;right:8px;color:var(--bw-color-text-subtle);width:14px;height:14px}
/* compact launcher tiles (icon over name), e.g. in an app-launcher menu */
/* compact (launcher) tiles: icon over the name, a fixed 112px; the name takes at most two lines, then … */
.bw-tile--compact{flex-direction:column;justify-content:flex-start;text-align:center;height:112px;gap:var(--bw-space-2);padding:var(--bw-space-3) var(--bw-space-2);box-shadow:none}
.bw-tile--compact .bw-tile__name{width:100%;white-space:normal;font-size:var(--bw-font-size-sm);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* a generic clamp: <span class="bw-clamp" style="--bw-lines:2"> */
.bw-clamp{display:-webkit-box;-webkit-line-clamp:var(--bw-lines,2);line-clamp:var(--bw-lines,2);-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

/* progress bar: <div class="bw-progress" role="progressbar" aria-valuenow="40"><span style="--v:40%"></span></div> */
.bw-progress{position:relative;height:6px;border-radius:var(--bw-radius-pill);background:var(--bw-color-track);overflow:hidden}
.bw-progress>span{display:block;height:100%;width:var(--v,0%);border-radius:inherit;background:var(--bw-color-primary);transition:width var(--bw-motion-base)}
.bw-progress--good>span{background:var(--bw-color-success)}.bw-progress--warn>span{background:var(--bw-color-warning)}.bw-progress--bad>span{background:var(--bw-color-error)}
.bw-progress--indeterminate>span{width:35%;animation:bw-indeterminate 1.3s var(--bw-motion-ease-standard) infinite}
@keyframes bw-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

/* ---- navigation inside a page: tabs, breadcrumbs, toolbar, stepper ---- */

/* tabs: <div class="bw-tabs" role="tablist"><button role="tab" aria-selected="true">…</button></div> + role="tabpanel"
   An underline in brand yellow on the chosen tab; scrolls sideways on phones instead of wrapping. */
.bw-tabs{display:flex;gap:var(--bw-space-1);border-bottom:1px solid var(--bw-color-line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin-bottom:var(--bw-space-5)}
.bw-tabs::-webkit-scrollbar{display:none}
/* scroll affordance for any sideways-scrolling strip (tabs, chip rows): a fade on the edge that has more content.
   @bowens/ui (Tabs, useScrollFade) sets data-fade-start / data-fade-end; without JS nothing fades and nothing breaks. */
.bw-tabs,.bw-scroll-x{--_fs:0px;--_fe:0px;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--_fs),#000 calc(100% - var(--_fe)),transparent);
  mask-image:linear-gradient(to right,transparent,#000 var(--_fs),#000 calc(100% - var(--_fe)),transparent)}
.bw-scroll-x{display:flex;overflow-x:auto;scrollbar-width:none}
.bw-scroll-x::-webkit-scrollbar{display:none}
:is(.bw-tabs,.bw-scroll-x)[data-fade-start]{--_fs:36px}
:is(.bw-tabs,.bw-scroll-x)[data-fade-end]{--_fe:36px}
.bw-tab,.bw-tabs>[role="tab"]{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--bw-space-2);flex:0 0 auto;min-height:var(--bw-size-target);min-width:var(--bw-size-target);padding:0 var(--bw-space-4);
  border:0;background:none;color:var(--bw-color-text);font:inherit;font-weight:var(--bw-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:color var(--bw-motion-fast)}
.bw-tab:hover,.bw-tabs>[role="tab"]:hover{color:var(--bw-color-accent)}
.bw-tab::after,.bw-tabs>[role="tab"]::after{content:"";position:absolute;left:var(--bw-space-3);right:var(--bw-space-3);bottom:-1px;height:3px;background:var(--bw-color-yellow);
  transform:scaleX(0);transition:transform var(--bw-motion-base)}
.bw-tab[aria-selected="true"],.bw-tab[aria-current="page"],.bw-tabs>[role="tab"][aria-selected="true"]{color:var(--bw-color-accent)}
.bw-tab[aria-selected="true"]::after,.bw-tab[aria-current="page"]::after,.bw-tabs>[role="tab"][aria-selected="true"]::after{transform:none}
.bw-tab:focus-visible,.bw-tabs>[role="tab"]:focus-visible{outline:2px solid var(--bw-color-focus-ring);outline-offset:-4px}
.bw-tab .bw-count,.bw-tabs>[role="tab"] .bw-count{margin-left:2px}
@media (max-width:760px){.bw-tab,.bw-tabs>[role="tab"]{padding:0 var(--bw-space-3)}.bw-tab::after,.bw-tabs>[role="tab"]::after{left:var(--bw-space-2);right:var(--bw-space-2)}}
/* pill tabs (quieter, ID Card style) */
.bw-tabs--pill{border-bottom:0;gap:var(--bw-space-1)}
.bw-tabs--pill>[role="tab"],.bw-tabs--pill>.bw-tab{min-height:36px;border-radius:var(--bw-radius-pill);padding:0 var(--bw-space-4)}
.bw-tabs--pill>[role="tab"]::after,.bw-tabs--pill>.bw-tab::after{display:none}
.bw-tabs.bw-tabs--pill>[aria-selected="true"],.bw-tabs.bw-tabs--pill>[aria-current="page"]{background:var(--bw-color-primary);color:var(--bw-color-on-primary)}
.bw-tabs--pill>[role="tab"]:not([aria-selected="true"]):hover{background:var(--bw-color-tint-2)}
@media (pointer:coarse){.bw-tabs--pill>[role="tab"],.bw-tabs--pill>.bw-tab{min-height:var(--bw-size-target)}}
.bw-tabpanel:focus-visible{outline:2px solid var(--bw-color-focus-ring);outline-offset:4px}

/* breadcrumbs (inline, above a page title): <nav class="bw-breadcrumb" aria-label="Breadcrumb"><ol><li><a>…</a></li>…<li aria-current="page">…</li></ol></nav> */
.bw-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 var(--bw-space-2);padding:0;list-style:none;font-size:var(--bw-font-size-sm)}
.bw-breadcrumb li{display:inline-flex;align-items:center;gap:4px;min-width:0;color:var(--bw-color-text)}
.bw-breadcrumb li+li::before{content:"";width:6px;height:6px;margin:0 6px 0 2px;border:solid var(--bw-color-text-subtle);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.bw-breadcrumb a{color:var(--bw-color-text);font-weight:var(--bw-font-weight-bold);text-decoration:none;padding:4px 2px}
.bw-breadcrumb a:hover{color:var(--bw-color-accent);text-decoration:underline}
@media (pointer:coarse){.bw-breadcrumb a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--bw-size-target);min-width:var(--bw-size-target)}}
.bw-breadcrumb [aria-current="page"]{color:var(--bw-color-ink);font-weight:var(--bw-font-weight-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* toolbar: a row of controls over a list/table - search grows, filters and actions follow, wraps on phones */
.bw-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bw-space-2);margin-bottom:var(--bw-space-3)}
.bw-toolbar__grow{flex:1 1 240px;min-width:0}
.bw-toolbar__sep{width:1px;align-self:stretch;margin:4px var(--bw-space-1);background:var(--bw-color-line)}
.bw-toolbar__end{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--bw-space-2)}
.bw-toolbar__count{color:var(--bw-color-text);font-size:var(--bw-font-size-sm);font-variant-numeric:tabular-nums}
/* the selection bar that replaces a toolbar while rows are selected */
.bw-toolbar--selection{padding:var(--bw-space-2) var(--bw-space-3);background:var(--bw-color-tint-1);border-radius:var(--bw-radius-surface);box-shadow:inset 3px 0 0 var(--bw-color-yellow)}
@media (max-width:760px){.bw-toolbar__end{margin-left:0;width:100%}.bw-toolbar__grow{flex-basis:100%}}

/* stepper: <ol class="bw-stepper"><li data-state="done|current|todo"><span class="bw-step__dot"></span><span class="bw-step__label">…</span></li></ol> */
.bw-stepper{display:flex;margin:0 0 var(--bw-space-5);padding:0;list-style:none;counter-reset:bw-step}
.bw-stepper>li{counter-increment:bw-step;position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  color:var(--bw-color-text);font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-bold)}
.bw-stepper>li::before{content:"";position:absolute;top:15px;left:calc(-50% + 20px);right:calc(50% + 20px);height:2px;background:var(--bw-color-line-2)}
.bw-stepper>li:first-child::before{display:none}
.bw-stepper>li[data-state="done"]::before,.bw-stepper>li[data-state="current"]::before{background:var(--bw-color-primary)}
.bw-step__dot{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--bw-radius-round);border:2px solid var(--bw-color-line-strong);
  background:var(--bw-color-surface);color:var(--bw-color-text);font-weight:var(--bw-font-weight-heavy);font-size:13px}
.bw-step__dot:empty::before{content:counter(bw-step)}
.bw-stepper>li[data-state="done"] .bw-step__dot{background:var(--bw-color-primary);border-color:var(--bw-color-primary);color:var(--bw-color-on-primary)}
.bw-stepper>li[data-state="done"] .bw-step__dot:empty::before{content:"";width:10px;height:6px;border:solid currentColor;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.bw-stepper>li[data-state="current"] .bw-step__dot{border-color:var(--bw-color-primary);color:var(--bw-color-accent);box-shadow:0 0 0 4px var(--bw-color-focus)}
.bw-stepper>li[data-state="current"]{color:var(--bw-color-ink)}
.bw-stepper>li[data-state="error"] .bw-step__dot{border-color:var(--bw-color-error);color:var(--bw-color-error-text)}
.bw-step__label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.bw-step__hint{display:block;font-weight:var(--bw-font-weight-regular);color:var(--bw-color-text);font-size:var(--bw-font-size-xs)}
/* vertical stepper (narrow panels, phones) */
.bw-stepper--vertical{flex-direction:column;gap:var(--bw-space-4)}
.bw-stepper--vertical>li{flex-direction:row;text-align:left;align-items:flex-start;gap:var(--bw-space-3)}
.bw-stepper--vertical>li::before{top:auto;bottom:calc(100% - 0px);left:15px;right:auto;width:2px;height:calc(var(--bw-space-4) + 0px)}
.bw-stepper--vertical .bw-step__label{white-space:normal;padding-top:6px}
@media (max-width:520px){.bw-stepper:not(.bw-stepper--vertical) .bw-step__label{display:none}.bw-stepper:not(.bw-stepper--vertical)>li[data-state="current"] .bw-step__label{display:block;position:absolute;top:40px;white-space:nowrap}.bw-stepper:not(.bw-stepper--vertical){padding-bottom:22px}}

/* pagination: <nav class="bw-pager"><button class="bw-iconbtn">‹</button><span>1–25 of 340</span><button>›</button></nav> */
.bw-pager{display:flex;align-items:center;justify-content:flex-end;gap:var(--bw-space-2);padding:var(--bw-space-2) 0;color:var(--bw-color-text);font-size:var(--bw-font-size-sm);font-variant-numeric:tabular-nums}

/* ---- layout: app bar (+ search / palette trigger), side nav (collapsible rail on desktop, drawer on phones),
   page header, breadcrumb strip, footer, centred panel ---- */

/* app bar (internal apps): brand blue (deeper in dark), logo + app name, actions on the right, the yellow rule under it */
.bw-appbar{position:sticky;top:0;z-index:var(--bw-z-appbar);display:flex;align-items:center;gap:var(--bw-space-4);height:var(--bw-size-appbar);padding:0 var(--bw-space-5);
  background:var(--bw-color-appbar);color:var(--bw-color-on-appbar);border-bottom:3px solid var(--bw-color-yellow)}
.bw-appbar :focus-visible{outline-color:var(--bw-color-yellow)}
.bw-appbar__brand{display:flex;align-items:center;gap:var(--bw-space-3);color:var(--bw-color-on-appbar);text-decoration:none;min-width:0;flex:0 1 auto}
.bw-appbar__brand:hover{color:var(--bw-color-on-appbar)}
@media (pointer:coarse){.bw-appbar__brand{min-height:var(--bw-size-target)}}
.bw-appbar__logo{height:28px;width:auto;display:block;flex:0 0 auto}
.bw-appbar__tag{padding-left:var(--bw-space-3);border-left:1px solid rgba(255,255,255,.3);font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-heavy);
  letter-spacing:.12em;text-transform:uppercase;color:var(--bw-color-on-appbar-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw-appbar__right{margin-left:auto;display:flex;align-items:center;gap:var(--bw-space-2);min-width:0;font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-bold)}
.bw-appbar__user{color:var(--bw-color-on-appbar-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 var(--bw-space-1)}
/* the account slot: a menu or button for the signed-in person (never clipped, shown on every screen) */
.bw-appbar__account{display:flex;align-items:center;flex:0 0 auto;position:relative}
/* the account pill: a 40px pill (drawn by ::before) inside a 44px hit area; the 28px avatar sits 6px in from the pill's
   edges top and bottom, the same 12px of space on both sides of the content, 10px between the avatar and the name */
.bw-appbar__account-btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:var(--bw-size-target);min-width:var(--bw-size-target);max-width:260px;
  appearance:none;-webkit-appearance:none;padding:0 12px;border:0;border-radius:var(--bw-radius-pill);background:none;color:var(--bw-color-on-appbar);
  font:inherit;font-weight:var(--bw-font-weight-bold);cursor:pointer}
.bw-appbar__account-btn::before{content:"";position:absolute;inset:2px 0;border-radius:var(--bw-radius-pill);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background-color var(--bw-motion-fast),box-shadow var(--bw-motion-fast)}
.bw-appbar__account-btn>*{position:relative}
.bw-appbar__account-btn .bw-avatar{--_s:28px;font-size:11px}
.bw-appbar__account-btn:hover::before,.bw-appbar__account-btn[aria-expanded="true"]::before{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.bw-appbar__account-btn:focus-visible{outline:2px solid var(--bw-color-yellow);outline-offset:0}
.bw-appbar__account-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bw-color-on-appbar-muted)}

/* a menu opened from the blue bar is a light/dark surface: its text and focus ring are the surface's, not the bar's */
.bw-appbar .bw-menu{color:var(--bw-color-ink);font-size:var(--bw-font-size-base);font-weight:var(--bw-font-weight-medium);z-index:var(--bw-z-menu)}
.bw-appbar .bw-menu :focus-visible{outline-color:var(--bw-color-focus-ring)}
.bw-appbar .bw-popover{color:var(--bw-color-ink)}
/* the account panel (UserMenu): header (photo, name, e-mail), My profile, the theme selector, Sign out */
.bw-usermenu__panel{width:min(320px,calc(100vw - 16px));padding:0;overflow:hidden}
.bw-usermenu__head{display:flex;align-items:center;gap:var(--bw-space-3);padding:var(--bw-space-4);background:var(--bw-color-tint-3);border-bottom:1px solid var(--bw-color-line)}
.bw-usermenu__who{min-width:0;display:flex;flex-direction:column;gap:2px}
.bw-usermenu__who b{color:var(--bw-color-ink);font-weight:var(--bw-font-weight-heavy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-usermenu__who span{font-size:var(--bw-font-size-sm);color:var(--bw-color-text);overflow-wrap:anywhere}
.bw-usermenu__list{padding:6px}
.bw-usermenu__item{display:flex;align-items:center;gap:var(--bw-space-3);width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:var(--bw-radius-xs);background:none;
  color:var(--bw-color-ink);font:inherit;font-size:var(--bw-font-size-base);font-weight:var(--bw-font-weight-medium);text-align:left;text-decoration:none;cursor:pointer}
.bw-usermenu__item .bw-icon{color:var(--bw-color-text)}
.bw-usermenu__item:hover{background:var(--bw-color-tint-1);color:var(--bw-color-accent)}
.bw-usermenu__item:hover .bw-icon{color:inherit}
.bw-usermenu__item:focus-visible{outline:2px solid var(--bw-color-focus-ring);outline-offset:-2px;background:var(--bw-color-tint-1)}
.bw-usermenu__theme{display:flex;align-items:center;justify-content:space-between;gap:var(--bw-space-3);padding:2px var(--bw-space-4) var(--bw-space-2) 18px}
.bw-usermenu__theme-label{font-weight:var(--bw-font-weight-medium);color:var(--bw-color-ink)}
/* the 3-position theme slider: a track, sun / auto / moon at the stops, a round thumb that snaps between them */
.bw-theme-slider{--_w:120px;position:relative;flex:0 0 auto;width:var(--_w);height:var(--bw-size-target);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:var(--bw-radius-pill)}
.bw-theme-slider__track{position:absolute;left:0;right:0;top:50%;height:32px;margin-top:-16px;border-radius:var(--bw-radius-pill);background:var(--bw-color-track);box-shadow:inset 0 0 0 1px var(--bw-color-line)}
.bw-theme-slider__stops{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 9px;color:var(--bw-color-text-subtle);pointer-events:none}
.bw-theme-slider__stops .bw-icon{width:14px;height:14px;stroke-width:2}
.bw-theme-slider__thumb{position:absolute;top:50%;left:2px;width:28px;height:28px;margin-top:-14px;display:grid;place-items:center;border-radius:var(--bw-radius-round);
  background:var(--bw-color-surface-2);color:var(--bw-color-accent);box-shadow:var(--bw-elevation-2),inset 0 0 0 1px var(--bw-color-line);
  transform:translateX(calc(var(--_pos,1) * (var(--_w) - 32px) / 2));transition:transform var(--bw-motion-duration-base) var(--bw-motion-ease-emphasized)}
.bw-theme-slider__thumb .bw-icon{width:16px;height:16px}
.bw-theme-slider:hover .bw-theme-slider__track{box-shadow:inset 0 0 0 1px var(--bw-color-line-strong)}
.bw-theme-slider:focus-visible{outline:2px solid var(--bw-color-focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.bw-theme-slider__thumb{transition:none}}
.bw-usermenu__label{margin:0 0 6px;font-size:var(--bw-type-overline-size);font-weight:var(--bw-type-overline-weight);letter-spacing:var(--bw-type-overline-tracking);text-transform:uppercase;color:var(--bw-color-text)}

.bw-usermenu__panel hr{margin:0;border:0;border-top:1px solid var(--bw-color-line)}
.bw-appbar .bw-popover :focus-visible{outline-color:var(--bw-color-focus-ring)}
@media (pointer:coarse){.bw-usermenu__item{min-height:var(--bw-size-target)}}/* the account menu's heading is the person's e-mail: keep it as written */
.bw-appbar__account .bw-menu__label{text-transform:none;letter-spacing:0;font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-bold)}
/* icon buttons on the bar (menu, collapse, theme, launcher, notifications) */
.bw-appbar__menu,.bw-appbar__btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border:0;border-radius:var(--bw-radius-pill);
  background:none;color:var(--bw-color-on-appbar);cursor:pointer;transition:background-color var(--bw-motion-fast)}
.bw-appbar__menu:hover,.bw-appbar__btn:hover,.bw-appbar__btn[aria-expanded="true"]{background:rgba(255,255,255,.14)}
.bw-appbar__menu{display:none;margin-left:calc(-1 * var(--bw-space-2))}
.bw-appbar__menu .bw-icon,.bw-appbar__btn .bw-icon{width:22px;height:22px}
.bw-appbar__btn .bw-count{position:absolute;top:2px;right:0;box-shadow:0 0 0 2px var(--bw-color-appbar)}
.bw-appbar__btn{position:relative}
.bw-appbar__collapse{margin-left:calc(-1 * var(--bw-space-2))}
/* the search / command palette trigger: looks like a field, opens the palette */
.bw-appbar__search{display:flex;align-items:center;gap:var(--bw-space-2);flex:0 1 380px;min-width:0;height:38px;margin:0 auto 0 var(--bw-space-4);padding:0 8px 0 12px;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--bw-radius-sm);background:rgba(255,255,255,.1);color:var(--bw-color-on-appbar-muted);font:inherit;font-size:var(--bw-font-size-sm);text-align:left;cursor:pointer;
  transition:background-color var(--bw-motion-fast),border-color var(--bw-motion-fast)}
.bw-appbar__search:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.36)}
.bw-appbar__search>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-appbar__search .bw-kbd{background:transparent;border-color:rgba(255,255,255,.3);color:var(--bw-color-on-appbar-muted)}
.bw-appbar__search+.bw-appbar__right{margin-left:0}
.bw-appbar .bw-btn--signout{--_bg:var(--bw-color-yellow-ui);--_fg:var(--bw-color-on-yellow);--_bg-h:var(--bw-color-yellow-d);--_fg-h:var(--bw-color-on-yellow);--_ring:var(--bw-color-blue);min-height:34px;font-size:var(--bw-font-size-sm)}
@media (pointer:coarse){.bw-appbar__account-btn{min-height:var(--bw-size-target);min-width:var(--bw-size-target)}.bw-appbar__menu,.bw-appbar__btn{width:var(--bw-size-target);height:var(--bw-size-target)}.bw-appbar .bw-btn--signout{min-height:var(--bw-size-target)}}
@media (max-width:760px){
  .bw-appbar{padding:0 var(--bw-space-3);gap:var(--bw-space-1)}
  .bw-appbar__menu{display:inline-flex}
  .bw-appbar__collapse{display:none}
  .bw-appbar__tag,.bw-appbar__user,.bw-appbar__account-name{display:none}
  .bw-appbar__account-btn{padding:0 8px}            /* avatar only: a 44px circle with the avatar centred */
  .bw-appbar__logo{height:22px}
  .bw-appbar__search{flex:0 0 auto;width:40px;height:40px;margin:0 0 0 auto;padding:0;justify-content:center;border:0;background:none;border-radius:var(--bw-radius-pill)}
  .bw-appbar__search>span,.bw-appbar__search>.bw-kbd{display:none}
  .bw-appbar__search .bw-icon{width:22px;height:22px;color:var(--bw-color-on-appbar)}
}
@media (max-width:760px) and (pointer:coarse){.bw-appbar__search{width:var(--bw-size-target);height:var(--bw-size-target)}}

/* site header strips (bowens.com.au style, for public pages) */
.bw-utilitybar{background:var(--bw-color-navy);color:#fff;font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-heavy);min-height:42px;display:flex;align-items:center;padding:0 var(--bw-space-5)}
.bw-navbar{background:var(--bw-color-blue-2);display:flex;gap:var(--bw-space-6);padding:0 var(--bw-space-5);min-height:48px;align-items:stretch;overflow-x:auto}
.bw-navbar a{position:relative;display:flex;align-items:center;color:#fff;text-decoration:none;font-weight:var(--bw-font-weight-heavy);white-space:nowrap}
.bw-navbar a:hover{color:var(--bw-color-yellow-ui)}
.bw-navbar a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:#fff}

/* app layout: sidebar + main. data-collapsed="true" on .bw-layout = the icon rail (desktop) */
.bw-layout{display:flex;align-items:stretch;min-height:calc(100vh - var(--bw-size-appbar))}
.bw-sidenav{flex:0 0 var(--bw-size-sidebar);width:var(--bw-size-sidebar);background:var(--bw-color-surface);border-right:1px solid var(--bw-color-line);
  padding:var(--bw-space-4) 0;display:flex;flex-direction:column;position:sticky;top:var(--bw-size-appbar);height:calc(100vh - var(--bw-size-appbar));overflow-x:hidden;overflow-y:auto;
  transition:width var(--bw-motion-base),flex-basis var(--bw-motion-base)}
.bw-sidenav__group{margin:var(--bw-space-4) var(--bw-space-5) var(--bw-space-1);font-size:var(--bw-font-size-xs);font-weight:var(--bw-font-weight-heavy);letter-spacing:.1em;text-transform:uppercase;color:var(--bw-color-text);white-space:nowrap}
.bw-sidenav__group:first-child{margin-top:0}
.bw-sidenav>div:first-child>.bw-sidenav__group{margin-top:0}
.bw-sidenav__item{position:relative;display:flex;align-items:center;gap:var(--bw-space-3);width:100%;min-height:var(--bw-size-target);padding:8px var(--bw-space-5);border:0;border-left:4px solid transparent;background:none;
  color:var(--bw-color-ink);font:inherit;font-weight:var(--bw-font-weight-bold);text-align:left;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color var(--bw-motion-fast),color var(--bw-motion-fast)}
.bw-sidenav__item:hover{background:var(--bw-color-tint-2);color:var(--bw-color-accent)}
.bw-sidenav__item[aria-current="page"]{border-left-color:var(--bw-color-yellow);background:var(--bw-color-tint-1);color:var(--bw-color-accent)}
.bw-sidenav__item:focus-visible{outline:2px solid var(--bw-color-focus-ring);outline-offset:-2px}
.bw-sidenav__label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bw-sidenav__item .bw-count{margin-left:auto}
.bw-sidenav__foot{margin-top:auto;padding:var(--bw-space-4) var(--bw-space-5) 0;font-size:var(--bw-font-size-sm);color:var(--bw-color-text)}
.bw-main{flex:1 1 auto;min-width:0;padding:var(--bw-space-5) var(--bw-space-6)}
.bw-main:focus{outline:none}
.bw-scrim{display:none}
/* the rail: icons only, labels as tooltips (title), counts become dots */
@media (min-width:761px){
  .bw-layout[data-collapsed="true"] .bw-sidenav{flex-basis:var(--bw-size-rail);width:var(--bw-size-rail)}
  .bw-layout[data-collapsed="true"] .bw-sidenav__item{justify-content:center;padding:8px 0;gap:0}
  .bw-layout[data-collapsed="true"] .bw-sidenav__label,.bw-layout[data-collapsed="true"] .bw-sidenav__foot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .bw-layout[data-collapsed="true"] .bw-sidenav__group{height:1px;margin:var(--bw-space-3) var(--bw-space-4);background:var(--bw-color-line);color:transparent;overflow:hidden}
  .bw-layout[data-collapsed="true"] .bw-sidenav__item .bw-count{position:absolute;top:8px;right:14px;min-width:10px;width:10px;height:10px;padding:0;font-size:0}
  .bw-layout[data-collapsed="true"] .bw-sidenav__item .bw-icon{width:22px;height:22px}
}
@media (max-width:760px){
  .bw-sidenav{position:fixed;left:0;top:0;bottom:0;width:min(var(--bw-size-sidebar),86vw);height:100vh;height:100dvh;z-index:var(--bw-z-drawer);transform:translateX(-102%);visibility:hidden;
    transition:transform var(--bw-motion-base),visibility 0s linear var(--bw-motion-duration-base);box-shadow:var(--bw-elevation-4);padding-top:var(--bw-space-5)}
  .bw-sidenav[data-open="true"]{transform:none;visibility:visible;transition:transform var(--bw-motion-base),visibility 0s}
  .bw-scrim[data-open="true"]{display:block;position:fixed;inset:0;z-index:calc(var(--bw-z-drawer) - 1);background:var(--bw-color-overlay);animation:bw-fade var(--bw-motion-base)}
  .bw-main{padding:var(--bw-space-4) var(--bw-space-4) var(--bw-space-6)}
}

/* page header: title + subtitle on the left, actions on the right (they never drop under a long subtitle) */
.bw-pagehead{display:flex;align-items:flex-start;gap:var(--bw-space-4);margin-bottom:var(--bw-space-5)}
.bw-pagehead__text{flex:1 1 320px;min-width:0}
.bw-pagehead__title{margin:0;font-family:var(--bw-font-family-display);font-size:var(--bw-type-title-size);line-height:var(--bw-type-title-line);font-weight:var(--bw-font-weight-black);letter-spacing:var(--bw-type-title-tracking);color:var(--bw-color-heading)}
.bw-pagehead__sub{margin:6px 0 0;color:var(--bw-color-text);max-width:72ch}
.bw-pagehead__actions{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:var(--bw-space-2);justify-content:flex-end}
@media (max-width:760px){.bw-pagehead{flex-direction:column}.bw-pagehead__text{flex-basis:auto}.bw-pagehead__actions{justify-content:flex-start}}
/* a hero header (portal home): big greeting on a brand panel, photo optional on the right */
.bw-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--bw-space-5);padding:var(--bw-space-6);margin-bottom:var(--bw-space-5);
  background:var(--bw-color-blue);color:#fff;border-radius:var(--bw-radius-surface);overflow:hidden}
.bw-hero::after{content:"";position:absolute;right:0;bottom:0;width:48px;height:48px;background:var(--bw-color-yellow);clip-path:polygon(100% 0,100% 100%,0 100%)}
.bw-hero__title{margin:0;font-family:var(--bw-font-family-display);font-size:var(--bw-type-display-size);line-height:var(--bw-type-display-line);font-weight:var(--bw-font-weight-black);color:#fff}
.bw-hero__sub{margin:var(--bw-space-2) 0 0;color:var(--bw-color-on-appbar-muted);font-size:var(--bw-type-body-lg-size)}
.bw-hero .bw-highlight{color:var(--bw-color-blue)}
@media (max-width:760px){.bw-hero{grid-template-columns:1fr;padding:var(--bw-space-5)}}

/* breadcrumb strip (site style; for inline breadcrumbs above a title use .bw-breadcrumb) */
.bw-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:52px;padding:0 var(--bw-space-5);background:var(--bw-color-panel);font-size:var(--bw-font-size-sm)}
.bw-crumbs a{font-weight:var(--bw-font-weight-heavy);text-decoration:none}
.bw-crumbs>*+*::before{content:"\203A";margin-right:8px;color:var(--bw-color-text)}

/* footer */
.bw-footer{background:var(--bw-color-navy);color:#fff;padding:var(--bw-space-6) var(--bw-space-5)}
.bw-footer h4{color:var(--bw-color-yellow-ui);font-size:var(--bw-font-size-base);font-weight:var(--bw-font-weight-heavy);margin:0 0 var(--bw-space-3)}
.bw-footer a{color:#fff;font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-heavy);text-decoration:none}
.bw-footer a:hover{color:var(--bw-color-yellow-ui)}
.bw-footer__bottom{background:var(--bw-color-blue-2);color:rgba(255,255,255,.7);font-size:var(--bw-font-size-sm);padding:var(--bw-space-3) var(--bw-space-5)}

/* a centred single-panel page (sign-in problems, kiosks, public forms) */
.bw-center{min-height:calc(100vh - var(--bw-size-appbar));display:grid;place-items:center;padding:var(--bw-space-5)}
.bw-panel{width:100%;max-width:560px;background:var(--bw-color-surface);border:1px solid var(--bw-color-line);border-top:4px solid var(--bw-color-yellow);border-radius:var(--bw-radius-surface);padding:var(--bw-space-6);box-shadow:var(--bw-elevation-2)}
@media (max-width:760px){.bw-panel{padding:var(--bw-space-5)}}

/* a two-pane page: list on the left, detail on the right (stacks on phones) */
.bw-split{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:var(--bw-density-gap);align-items:start}
@media (max-width:960px){.bw-split{grid-template-columns:1fr}}

/* ---- overlays: modal / confirm, toast, menu / dropdown ---- */

/* modal: <div class="bw-modal" role="dialog" aria-modal="true"><div class="bw-modal__box">...</div></div> */
.bw-modal{position:fixed;inset:0;z-index:var(--bw-z-modal);display:grid;place-items:center;padding:var(--bw-space-4);background:var(--bw-color-overlay);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:bw-fade var(--bw-motion-duration-fast) var(--bw-motion-ease-standard)}
.bw-modal__box{width:100%;max-width:var(--bw-modal-w,560px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:var(--bw-color-surface-2);color:var(--bw-color-ink);
  border-top:4px solid var(--bw-color-yellow);border-radius:var(--bw-radius-surface);box-shadow:var(--bw-elevation-4);overflow:hidden;
  animation:bw-pop var(--bw-motion-duration-base) var(--bw-motion-ease-emphasized)}
.bw-modal__box:focus{outline:none}
.bw-modal--wide{--bw-modal-w:860px}
.bw-modal__head{display:flex;align-items:center;gap:var(--bw-space-3);padding:var(--bw-space-4) var(--bw-space-5);border-bottom:1px solid var(--bw-color-line)}
.bw-modal__title{margin:0;font-size:var(--bw-type-heading-size);font-weight:var(--bw-font-weight-black);color:var(--bw-color-heading);min-width:0}
.bw-modal__close{margin-left:auto;margin-right:calc(-1 * var(--bw-space-2));width:var(--bw-size-target);height:var(--bw-size-target);flex:0 0 auto;border:0;border-radius:var(--bw-radius-pill);background:none;color:var(--bw-color-text);cursor:pointer;display:grid;place-items:center}
.bw-modal__close:hover{background:var(--bw-color-tint-2);color:var(--bw-color-accent)}
.bw-modal__body{padding:var(--bw-space-5);overflow:auto}
.bw-modal__foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--bw-space-2);padding:var(--bw-space-4) var(--bw-space-5);border-top:1px solid var(--bw-color-line);background:var(--bw-color-tint-3)}
@media (max-width:760px){
  .bw-modal{padding:0;place-items:end stretch}
  .bw-modal__box{max-width:none;max-height:92vh;max-height:92dvh;border-radius:var(--bw-radius-lg) var(--bw-radius-lg) 0 0;animation-name:bw-sheet}
  .bw-modal__foot{padding-bottom:calc(var(--bw-space-4) + env(safe-area-inset-bottom))}
}
@keyframes bw-fade{from{opacity:0}}
@keyframes bw-pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes bw-sheet{from{transform:translateY(40px);opacity:.4}}

/* toasts: <div class="bw-toasts"><div class="bw-toast">...</div></div> */
.bw-toasts{position:fixed;right:var(--bw-space-4);bottom:var(--bw-space-4);z-index:var(--bw-z-toast);display:flex;flex-direction:column;gap:var(--bw-space-2);max-width:min(420px,calc(100vw - 32px));pointer-events:none}
.bw-toast{pointer-events:auto;display:flex;align-items:center;gap:var(--bw-space-3);padding:var(--bw-space-3) var(--bw-space-2) var(--bw-space-3) var(--bw-space-4);background:var(--bw-color-inverse);color:var(--bw-color-on-inverse);
  border-left:4px solid var(--bw-color-yellow);border-radius:var(--bw-radius-sm);box-shadow:var(--bw-elevation-3);font-weight:var(--bw-font-weight-bold);
  animation:bw-up var(--bw-motion-duration-base) var(--bw-motion-ease-emphasized)}
.bw-toast>span{flex:1 1 auto;min-width:0}
.bw-toast--good{border-left-color:var(--bw-color-success)}
.bw-toast--bad{border-left-color:var(--bw-color-error);background:var(--bw-color-danger-fill);color:#fff}
.bw-toast button{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;margin-left:auto;border:0;border-radius:var(--bw-radius-pill);background:none;color:inherit;opacity:.8;cursor:pointer;font-size:18px;line-height:1}
.bw-toast button:hover{opacity:1;background:rgba(127,127,127,.2)}
.bw-toast button:focus-visible{outline:2px solid currentColor;outline-offset:0}
@media (pointer:coarse){.bw-toast button{width:var(--bw-size-target);height:var(--bw-size-target)}}
@keyframes bw-up{from{transform:translateY(8px);opacity:0}}
@media (max-width:760px){.bw-toasts{left:var(--bw-space-3);right:var(--bw-space-3);bottom:calc(var(--bw-space-3) + env(safe-area-inset-bottom));max-width:none}}

/* dropdown menu: <div class="bw-menu" role="menu"><button role="menuitem">…</button><hr>…</div> (position it yourself, or use .bw-popover) */
.bw-menu{position:absolute;z-index:var(--bw-z-menu);min-width:200px;max-width:min(320px,calc(100vw - 24px));padding:4px;background:var(--bw-color-surface-2);color:var(--bw-color-ink);
  border:1px solid var(--bw-color-line);border-radius:var(--bw-radius-surface);box-shadow:var(--bw-elevation-3);animation:bw-pop var(--bw-motion-duration-fast) var(--bw-motion-ease-standard)}
.bw-menu button,.bw-menu a{display:flex;align-items:center;gap:var(--bw-space-2);width:100%;min-height:38px;padding:7px 12px;border:0;border-radius:var(--bw-radius-xs);background:none;font:inherit;color:var(--bw-color-ink);
  text-align:left;text-decoration:none;cursor:pointer;font-weight:var(--bw-font-weight-medium)}
.bw-menu button:hover,.bw-menu a:hover,.bw-menu button:focus-visible,.bw-menu a:focus-visible,.bw-menu [data-active="true"]{background:var(--bw-color-tint-1);color:var(--bw-color-accent);outline:none}
.bw-menu .bw-icon{color:var(--bw-color-text)}
.bw-menu button:hover .bw-icon,.bw-menu a:hover .bw-icon{color:inherit}
.bw-menu .bw-menu__danger{color:var(--bw-color-danger-text)}
.bw-menu .bw-menu__danger .bw-icon{color:inherit}
.bw-menu [aria-disabled="true"],.bw-menu button:disabled{color:var(--bw-color-text-subtle);cursor:not-allowed;background:none}
.bw-menu__hint{margin-left:auto;padding-left:var(--bw-space-3);color:var(--bw-color-text-subtle);font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-regular)}
.bw-menu__label{padding:8px 12px 4px;font-size:var(--bw-type-overline-size);font-weight:var(--bw-type-overline-weight);letter-spacing:var(--bw-type-overline-tracking);text-transform:uppercase;color:var(--bw-color-text)}
.bw-menu [role="menuitemradio"][aria-checked="true"]::after,.bw-menu [role="menuitemcheckbox"][aria-checked="true"]::after{content:"";margin-left:auto;width:10px;height:6px;border:solid var(--bw-color-accent);border-width:0 0 2px 2px;transform:translateY(-2px) rotate(-45deg)}
.bw-menu hr{border:0;border-top:1px solid var(--bw-color-line);margin:4px -4px}
@media (pointer:coarse){.bw-menu button,.bw-menu a{min-height:var(--bw-size-target)}}

/* ---- panels: side panel / drawer, command palette, popover, tooltip, sticky save bar ---- */

/* side panel: slides in from the right (detail views, filters, quick edits); full width on phones.
   <div class="bw-sidepanel" data-open="true"><div class="bw-sidepanel__scrim"></div>
     <aside class="bw-sidepanel__box" role="dialog" aria-modal="true">head / body / foot</aside></div>
   .bw-sidepanel--left slides from the left. */
.bw-sidepanel{position:fixed;inset:0;z-index:var(--bw-z-drawer);pointer-events:none}
.bw-sidepanel__scrim{position:absolute;inset:0;background:var(--bw-color-overlay);opacity:0;transition:opacity var(--bw-motion-base)}
.bw-sidepanel__box{position:absolute;top:0;right:0;bottom:0;width:min(var(--bw-panel-w,var(--bw-size-panel)),100vw);display:flex;flex-direction:column;
  background:var(--bw-color-surface-2);color:var(--bw-color-ink);box-shadow:var(--bw-elevation-4);border-left:4px solid var(--bw-color-yellow);
  transform:translateX(102%);transition:transform var(--bw-motion-duration-base) var(--bw-motion-ease-emphasized)}
.bw-sidepanel__box:focus{outline:none}
.bw-sidepanel--left .bw-sidepanel__box{right:auto;left:0;border-left:0;border-right:4px solid var(--bw-color-yellow);transform:translateX(-102%)}
.bw-sidepanel--wide{--bw-panel-w:720px}
.bw-sidepanel[data-open="true"]{pointer-events:auto}
.bw-sidepanel[data-open="true"] .bw-sidepanel__scrim{opacity:1}
.bw-sidepanel[data-open="true"] .bw-sidepanel__box{transform:none}
.bw-sidepanel__head{display:flex;align-items:flex-start;gap:var(--bw-space-3);padding:var(--bw-space-4) var(--bw-space-3) var(--bw-space-4) var(--bw-space-5);border-bottom:1px solid var(--bw-color-line)}
.bw-sidepanel__title{margin:0;padding-top:8px;font-size:var(--bw-type-heading-size);font-weight:var(--bw-font-weight-black);color:var(--bw-color-heading);min-width:0;flex:1 1 auto}
.bw-sidepanel__sub{margin:2px 0 0;font-size:var(--bw-font-size-sm);color:var(--bw-color-text)}
.bw-sidepanel__body{flex:1 1 auto;overflow:auto;padding:var(--bw-space-5);overscroll-behavior:contain}
.bw-sidepanel__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--bw-space-2);padding:var(--bw-space-3) var(--bw-space-5);border-top:1px solid var(--bw-color-line);background:var(--bw-color-tint-3);
  padding-bottom:calc(var(--bw-space-3) + env(safe-area-inset-bottom))}
.bw-sidepanel__head .bw-modal__close{margin:0}
@media (max-width:760px){.bw-sidepanel__box{width:100vw;border-left:0;border-top:4px solid var(--bw-color-yellow)}}

/* command palette (Ctrl/Cmd+K): a search box over a grouped result list.
   <div class="bw-palette" role="dialog" aria-modal="true"><div class="bw-palette__box">
     <div class="bw-palette__search"><svg/><input role="combobox"></div>
     <ul class="bw-palette__list" role="listbox"><li class="bw-palette__group">Go to</li><li role="option" aria-selected="true">…</li></ul>
     <div class="bw-palette__foot">…</div></div></div> */
.bw-palette{position:fixed;inset:0;z-index:var(--bw-z-palette);display:flex;justify-content:center;align-items:flex-start;padding:min(14vh,120px) var(--bw-space-4) var(--bw-space-4);
  background:var(--bw-color-overlay);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:bw-fade var(--bw-motion-duration-fast)}
.bw-palette__box{width:100%;max-width:640px;max-height:min(560px,calc(100dvh - 2 * var(--bw-space-4)));display:flex;flex-direction:column;overflow:hidden;
  background:var(--bw-color-surface-2);color:var(--bw-color-ink);border-radius:var(--bw-radius-md);box-shadow:var(--bw-elevation-4);border-top:4px solid var(--bw-color-yellow);
  animation:bw-pop var(--bw-motion-duration-base) var(--bw-motion-ease-emphasized)}
.bw-palette__search{display:flex;align-items:center;gap:var(--bw-space-3);padding:0 var(--bw-space-4);border-bottom:1px solid var(--bw-color-line)}
.bw-palette__search>.bw-icon{color:var(--bw-color-accent);width:20px;height:20px}
.bw-palette__search input{flex:1 1 auto;min-width:0;height:56px;border:0;outline:0;background:none;color:var(--bw-color-ink);font:inherit;font-size:var(--bw-font-size-md)}
.bw-palette__search input::placeholder{color:var(--bw-color-text-subtle)}
.bw-palette__list{flex:1 1 auto;margin:0;padding:6px;list-style:none;overflow:auto;overscroll-behavior:contain}
.bw-palette__group{padding:10px 10px 4px;font-size:var(--bw-type-overline-size);font-weight:var(--bw-type-overline-weight);letter-spacing:var(--bw-type-overline-tracking);text-transform:uppercase;color:var(--bw-color-text)}
.bw-palette__item,.bw-palette__list>[role="option"]{display:flex;align-items:center;gap:var(--bw-space-3);min-height:var(--bw-size-target);padding:6px 10px;border-radius:var(--bw-radius-sm);cursor:pointer;color:var(--bw-color-ink)}
.bw-palette__list>[role="option"] .bw-icon{color:var(--bw-color-text)}
.bw-palette__list>[role="option"][aria-selected="true"]{background:var(--bw-color-tint-1);color:var(--bw-color-accent);box-shadow:inset 3px 0 0 var(--bw-color-yellow)}
.bw-palette__list>[role="option"][aria-selected="true"] .bw-icon{color:var(--bw-color-accent)}
.bw-palette__list>[role="option"][aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.bw-palette__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.bw-palette__title{font-weight:var(--bw-font-weight-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-palette__title mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--bw-color-yellow);text-decoration-thickness:3px;text-underline-offset:2px}
.bw-palette__meta{font-size:var(--bw-font-size-sm);color:var(--bw-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-palette__keys{flex:0 0 auto;display:flex;gap:4px}
.bw-palette__empty{padding:var(--bw-space-6) var(--bw-space-4);text-align:center;color:var(--bw-color-text)}
.bw-palette__foot{display:flex;flex-wrap:wrap;gap:var(--bw-space-4);padding:8px var(--bw-space-4);border-top:1px solid var(--bw-color-line);background:var(--bw-color-tint-3);font-size:var(--bw-font-size-sm);color:var(--bw-color-text)}
.bw-palette__foot span{display:inline-flex;align-items:center;gap:6px}
@media (max-width:760px){.bw-palette{padding:0;align-items:stretch}.bw-palette__box{max-width:none;max-height:none;border-radius:0}.bw-palette__foot{display:none}}

/* popover: a floating card anchored to a trigger (menus, pickers, the app launcher).
   <div class="bw-popover-anchor"><button aria-expanded>…</button><div class="bw-popover" data-align="end">…</div></div> */
.bw-popover-anchor{position:relative;display:inline-flex}
.bw-popover{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--bw-z-menu);min-width:220px;max-width:min(360px,calc(100vw - 24px));padding:var(--bw-space-3);
  background:var(--bw-color-surface-2);color:var(--bw-color-ink);border:1px solid var(--bw-color-line);border-radius:var(--bw-radius-surface);box-shadow:var(--bw-elevation-3);
  animation:bw-pop var(--bw-motion-duration-fast) var(--bw-motion-ease-standard)}
.bw-popover[data-align="end"]{left:auto;right:0}
.bw-popover[data-side="top"]{top:auto;bottom:calc(100% + 6px)}
.bw-popover>.bw-menu{position:static;box-shadow:none;border:0;padding:0;min-width:0;animation:none}
.bw-popover-anchor>.bw-menu{top:calc(100% + 6px);left:0}
.bw-popover-anchor>.bw-menu[data-align="end"]{left:auto;right:0}

/* tooltip: short label for an icon button. <span class="bw-tooltip" role="tooltip" data-side="top">Edit</span> placed by JS,
   or the CSS-only form: <button class="bw-tip" data-tip="Edit" aria-label="Edit"> (shows on hover AND keyboard focus) */
.bw-tooltip{position:fixed;z-index:var(--bw-z-tooltip);max-width:min(280px,calc(100vw - 16px));padding:6px 10px;border-radius:var(--bw-radius-sm);background:var(--bw-color-inverse);color:var(--bw-color-on-inverse);
  font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-bold);line-height:1.35;box-shadow:var(--bw-elevation-2);pointer-events:none;animation:bw-fade var(--bw-motion-duration-fast)}
.bw-tooltip .bw-kbd{margin-left:6px;height:18px;min-width:18px;background:transparent;border-color:currentColor;color:inherit;opacity:.8}
.bw-tip{position:relative}
.bw-tip[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);z-index:var(--bw-z-tooltip);white-space:nowrap;
  padding:5px 9px;border-radius:var(--bw-radius-sm);background:var(--bw-color-inverse);color:var(--bw-color-on-inverse);font-size:var(--bw-font-size-sm);font-weight:var(--bw-font-weight-bold);
  line-height:1.3;pointer-events:none;opacity:0;transition:opacity var(--bw-motion-fast),transform var(--bw-motion-fast)}
.bw-tip[data-tip-side="bottom"]::after{bottom:auto;top:calc(100% + 8px);transform:translate(-50%,-4px)}
.bw-tip:hover::after,.bw-tip:focus-visible::after{opacity:1;transform:translate(-50%,0);transition-delay:.35s}
.bw-tip:focus-visible::after{transition-delay:0s}
@media (hover:none){.bw-tip[data-tip]::after{display:none}}

/* sticky save bar: appears while a form has unsaved changes; always in view, above the content.
   <div class="bw-savebar" role="region" aria-label="Unsaved changes"><span class="bw-savebar__text">…</span><button>Discard</button><button>Save</button></div> */
.bw-savebar{position:fixed;left:50%;bottom:calc(var(--bw-space-4) + env(safe-area-inset-bottom));z-index:var(--bw-z-savebar);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--bw-space-2) var(--bw-space-3);
  width:max-content;max-width:calc(100vw - 24px);padding:6px 6px 6px var(--bw-space-4);transform:translateX(-50%);
  background:var(--bw-color-inverse);color:var(--bw-color-on-inverse);border-left:4px solid var(--bw-color-yellow);border-radius:var(--bw-radius-sm);box-shadow:var(--bw-elevation-4);
  font-weight:var(--bw-font-weight-bold);animation:bw-savebar-in var(--bw-motion-duration-base) var(--bw-motion-ease-emphasized)}
.bw-savebar--error{background:var(--bw-color-danger-fill);color:#fff;border-left-color:#fff}
.bw-savebar__text{min-width:0;padding:4px 0;display:inline-flex;align-items:center;gap:var(--bw-space-2)}
.bw-savebar__actions{display:flex;gap:6px;flex:0 0 auto}
.bw-savebar .bw-btn{min-height:36px}
.bw-savebar .bw-btn--quiet{--_bg:transparent;--_fg:currentColor;--_bg-h:rgba(127,127,127,.22);--_fg-h:currentColor;--_ring:var(--bw-color-yellow)}
.bw-savebar .bw-btn:not(.bw-btn--quiet){--_bg:var(--bw-color-yellow-ui);--_fg:var(--bw-color-on-yellow);--_bg-h:var(--bw-color-yellow-d);--_fg-h:var(--bw-color-on-yellow);--_ring:var(--bw-color-blue)}
@media (pointer:coarse){.bw-savebar .bw-btn{min-height:var(--bw-size-target)}}
@keyframes bw-savebar-in{from{transform:translate(-50%,16px);opacity:0}}
/* page bottom padding so the bar never covers the last field: put .bw-has-savebar on the scrolling container */
.bw-has-savebar{padding-bottom:96px!important;scroll-padding-bottom:96px}
@media (max-width:760px){.bw-savebar{left:var(--bw-space-3);right:var(--bw-space-3);width:auto;transform:none;justify-content:space-between}@keyframes bw-savebar-in{from{transform:translateY(16px);opacity:0}}}

/* ---- media: file drop zone, image cropper frame, photo frame ---- */

/* drop zone: <label class="bw-dropzone"><input type="file" class="bw-sr">icon, title, hint</label>
   data-drag="true" while a file is over it; data-state="error" for a rejected file */
.bw-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--bw-space-2);min-height:180px;padding:var(--bw-space-5);
  border:2px dashed var(--bw-color-line-strong);border-radius:var(--bw-radius-surface);background:var(--bw-color-tint-3);color:var(--bw-color-text);text-align:center;cursor:pointer;
  transition:border-color var(--bw-motion-fast),background-color var(--bw-motion-fast)}
.bw-dropzone:hover{border-color:var(--bw-color-accent);background:var(--bw-color-tint-2)}
.bw-dropzone:focus-within,.bw-dropzone:focus-visible{outline:2px solid var(--bw-color-focus-ring);outline-offset:2px}
.bw-dropzone[data-drag="true"]{border-color:var(--bw-color-primary);border-style:solid;background:var(--bw-color-tint-1);color:var(--bw-color-accent)}
.bw-dropzone[data-state="error"]{border-color:var(--bw-color-error);background:var(--bw-color-error-bg)}
.bw-dropzone[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.bw-dropzone__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--bw-radius-round);background:var(--bw-color-surface);color:var(--bw-color-accent);box-shadow:var(--bw-elevation-1)}
.bw-dropzone__icon .bw-icon{width:26px;height:26px}
.bw-dropzone__title{font-weight:var(--bw-font-weight-heavy);color:var(--bw-color-ink)}
.bw-dropzone__title u{color:var(--bw-color-accent);text-underline-offset:3px}
.bw-dropzone__hint{font-size:var(--bw-font-size-sm)}
.bw-dropzone--compact{flex-direction:row;min-height:72px;gap:var(--bw-space-3);text-align:left}
/* chosen files under a drop zone */
.bw-files{list-style:none;margin:var(--bw-space-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--bw-space-2)}
.bw-file{display:flex;align-items:center;gap:var(--bw-space-3);padding:var(--bw-space-2) var(--bw-space-2) var(--bw-space-2) var(--bw-space-3);border:1px solid var(--bw-color-line);border-radius:var(--bw-radius-sm);background:var(--bw-color-surface)}
.bw-file__thumb{width:40px;height:40px;flex:0 0 auto;border-radius:var(--bw-radius-xs);object-fit:cover;background:var(--bw-color-tint-2)}
.bw-file__main{flex:1 1 auto;min-width:0}
.bw-file__name{font-weight:var(--bw-font-weight-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-file__meta{font-size:var(--bw-font-size-sm);color:var(--bw-color-text)}
.bw-file .bw-progress{margin-top:6px}

/* image cropper frame: a square (or --ratio) viewport, the image moved / zoomed inside, a circle or square guide over it.
   <div class="bw-cropper" tabindex="0" role="application" aria-label="…"><img class="bw-cropper__img" style="transform:…"><div class="bw-cropper__guide"></div></div>
   + .bw-cropper__controls (zoom slider + buttons) under it */
.bw-cropper{position:relative;width:100%;max-width:var(--bw-crop-size,360px);aspect-ratio:var(--bw-crop-ratio,1);overflow:hidden;border-radius:var(--bw-radius-surface);
  background:repeating-conic-gradient(var(--bw-color-tint-2) 0 25%,var(--bw-color-surface) 0 50%) 0 0/20px 20px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.bw-cropper:active{cursor:grabbing}
.bw-cropper:focus-visible{outline:2px solid var(--bw-color-focus-ring);outline-offset:3px}
.bw-cropper__img{position:absolute;left:0;top:0;max-width:none!important;transform-origin:0 0;pointer-events:none;will-change:transform}
.bw-cropper__guide{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9)}
/* the round guide (profile photos): darkens outside the circle */
.bw-cropper--round .bw-cropper__guide{border-radius:var(--bw-radius-round);box-shadow:0 0 0 999px rgba(5,20,40,.5),inset 0 0 0 2px rgba(255,255,255,.9)}
/* rule-of-thirds lines while dragging */
.bw-cropper[data-dragging="true"] .bw-cropper__guide{background:
  linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.5) calc(33.33% - .5px),rgba(255,255,255,.5) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.5) calc(66.66% - .5px),rgba(255,255,255,.5) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
  linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.5) calc(33.33% - .5px),rgba(255,255,255,.5) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.5) calc(66.66% - .5px),rgba(255,255,255,.5) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.bw-cropper__controls{display:flex;align-items:center;gap:var(--bw-space-2);width:100%;max-width:var(--bw-crop-size,360px);margin-top:var(--bw-space-3)}
.bw-cropper__controls input[type="range"]{flex:1 1 auto;min-width:0;accent-color:var(--bw-color-primary);height:var(--bw-size-control-sm)}
.bw-cropper__hint{max-width:var(--bw-crop-size,360px);margin-top:var(--bw-space-2);font-size:var(--bw-font-size-sm);color:var(--bw-color-text)}

/* a photo frame (profile picture preview, generated headshots): a square with the brand notch */
.bw-photo{position:relative;display:block;width:100%;aspect-ratio:var(--bw-photo-ratio,1);overflow:hidden;background:var(--bw-color-tint-2);border-radius:var(--bw-radius-media)}
.bw-photo>img{width:100%;height:100%;object-fit:cover;display:block}
.bw-photo--notch{clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);border-radius:0}
.bw-photo[aria-checked="true"],.bw-photo[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bw-color-surface),0 0 0 6px var(--bw-color-primary)}
button.bw-photo{padding:0;border:0;cursor:pointer}
button.bw-photo:focus-visible{outline:3px solid var(--bw-color-focus-ring);outline-offset:3px}

/* ---- THE Bowens loading screen: what every Bowens app shows while it starts (it grew out of the IT SharePoint
   apps' centred "Loading <app>…" page). Full-screen on the app ground, the Bowens mark, "Loading <app>…" and a calm
   indeterminate bar. Light / dark through the tokens; no animation under reduced motion.
   STANDALONE-SAFE: every token has a fallback, because build.mjs also inlines this file into dist/loading-screen.html
   (a boot screen painted from index.html before any script or the full stylesheet arrives).
   Markup (the boot snippet, @bowens/ui <LoadingScreen>, bowens-app-shell.js all render exactly this):
     <div class="bw-loading-screen" id="bw-boot" role="status" aria-live="polite">
       <div class="bw-loading-screen__inner">
         <span class="bw-loading-screen__mark" aria-hidden="true"><svg>…the mark…</svg></span>
         <div class="bw-loading-screen__text">Loading Registry…</div>
         <div class="bw-loading-screen__bar" aria-hidden="true"><span></span></div>
       </div>
     </div>
   Leaving: set data-state="done" (fades out), then remove it. ---- */
.bw-loading-screen{
  position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px;
  --_bg:var(--bw-color-bg,#F4F6F9);--_fg:var(--bw-color-accent,#154C97);--_track:var(--bw-color-track,#EBEEF3);--_sub:var(--bw-color-text,#666666);
  background:var(--_bg);color:var(--_fg);
  font-family:var(--bw-font-family-body,"nexa","Jost","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif);
  text-align:center;opacity:1;visibility:visible;
  transition:opacity var(--bw-motion-duration-base,240ms) var(--bw-motion-ease-standard,cubic-bezier(.2,0,0,1)),visibility 0s linear 0s
}
.bw-loading-screen[data-state="done"]{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--bw-motion-duration-base,240ms) var(--bw-motion-ease-standard,cubic-bezier(.2,0,0,1)),visibility 0s linear var(--bw-motion-duration-base,240ms)}
/* inside a container instead of the whole window (a section still loading) */
.bw-loading-screen--inline{position:relative;inset:auto;z-index:auto;min-height:240px;background:transparent}
.bw-loading-screen__inner{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:min(420px,100%)}
.bw-loading-screen__mark{display:block;width:56px;height:56px;border-radius:var(--bw-radius-md,8px);overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.04),var(--bw-elevation-2,0 2px 4px rgba(16,32,56,.06),0 4px 12px rgba(16,32,56,.08));
  animation:bw-loading-breathe 1.8s cubic-bezier(.4,0,.2,1) infinite}
.bw-loading-screen__mark svg,.bw-loading-screen__mark img{display:block;width:100%;height:100%}
.bw-loading-screen__text{font-size:15px;line-height:1.4;font-weight:var(--bw-font-weight-bold,700);color:var(--_fg);overflow-wrap:anywhere}
.bw-loading-screen__sub{margin-top:-10px;font-size:13px;color:var(--_sub)}
/* the bar: a yellow segment gliding along a quiet track */
.bw-loading-screen__bar{position:relative;width:168px;max-width:60vw;height:4px;border-radius:999px;overflow:hidden;background:var(--_track)}
.bw-loading-screen__bar>span{position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:inherit;background:var(--bw-color-yellow,#FFE300);
  box-shadow:inset 0 0 0 1px rgba(21,76,151,.08);animation:bw-loading-glide 1.3s cubic-bezier(.4,0,.2,1) infinite}
/* standalone (no brand tokens on the page yet, e.g. a boot screen before the stylesheet): follow a dark OS. Where the
   tokens ARE loaded they win (the var() resolves), so a page forced light (data-theme="light") or light by design stays light. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bw-loading-screen{--_bg:var(--bw-color-bg,#0D141E);--_fg:var(--bw-color-accent,#9CC3FF);--_track:var(--bw-color-track,#223045);--_sub:var(--bw-color-text,#A9B5C6)}
}
@keyframes bw-loading-glide{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@keyframes bw-loading-breathe{0%,100%{transform:scale(1)}50%{transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){
  .bw-loading-screen,.bw-loading-screen[data-state="done"]{transition:none!important}
  .bw-loading-screen__mark{animation:none!important}
  /* a still, half-filled bar instead of motion */
  .bw-loading-screen__bar>span{animation:none!important;transform:none;left:30%}
}