/* BandOS portal, on the NSB design system v2 (D112). Loaded after tokens.css and components.css.
   Every value is a token from tokens.css; nothing here types a colour.

   Two jobs, and nothing else:
     1. the server-rendered shell: the system's AppShell held by two checkboxes rather than React
        state, at a desk and on a phone, scrolling inside its own panes;
     2. the small layouts the components leave to a screen (rows, toolbars, filters, the phone's
        card form of a list, the sign-in panel). Every screen is built from the components; there
        is no fallback for markup that is not.
   Rules a later edit must not break: gold is never text on a light ground and a gold fill carries
   navy or ink words; red never touches the shell; an error is crimson, never brand red, and never
   without its icon; silver is a line and never a word; nothing is smaller than 17px; every target is
   at least 44px; the focus ring shows on every ground, navy included. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* The focus ring on every control on every ground: navy against the control, gold outside it. On
   navy the inner ring is drawn in the ground's own colour and the gold carries it, at 6.27 (the
   owed fix: the first build's navy outline vanished on the navy sidebar). */
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.nsb-side :focus-visible, .nsb-top :focus-visible, .nsb-ph--brand :focus-visible,
.nsb-event__head :focus-visible, .nsb-signin__brand :focus-visible {
  box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px var(--focus); }

/* A checkbox that holds a shell state: off the screen, still focusable, its label the control. */
.nsb-toggle { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

/* ---------- the page: banners, then the shell, scrolling inside its panes ---------- */
.nsb-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.nsb-page > .nsb-notice--banner { flex: none; position: static; }
.nsb-shell { flex: 1 1 auto; min-height: 0; height: auto; container: none; position: relative; }
.nsb-shell__grid { height: 100%; }
.nsb-side { overflow-y: auto; }
.nsb-main { overflow-y: auto; height: 100%; }
.nsb-main__inner { padding-bottom: var(--space-16); }

.nsb-side__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.nsb-side__none { margin: 0; color: var(--sidebar-muted); }
.nsb-side__row form { margin: 0; }
.nsb-drawer-close, .nsb-drawer__scrim { display: none; }
.nsb-collapse-btn { cursor: pointer; }
.nsb-collapse-btn__open { display: none; }
.nsb-collapse:checked ~ .nsb-shell__grid .nsb-collapse-btn__open { display: inline-grid; }
.nsb-collapse:checked ~ .nsb-shell__grid .nsb-collapse-btn__close { display: none; }
.nsb-collapse:focus-visible ~ .nsb-shell__grid .nsb-collapse-btn { box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px var(--focus); }
@media (min-width: 769px) {
  .nsb-collapse:checked ~ .nsb-shell__grid .nsb-side__top { justify-content: center; }
}
.nsb-top .nsb-wm { width: 220px; right: -60px; top: -80px; }
.nsb-top .nsb-bell { margin-left: auto; }

/* The top bar and the tab bar, from the system's phone form (bundle.src.css), outside any media
   query so their parts exist; the media query below decides when they show. */
.nsb-top .nsb-crest { --crest-size: 44px; }
.nsb-top__band { flex: 1; min-width: 0; font-weight: 620; line-height: 1.2; }
.nsb-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; padding: 2px 0;
  color: var(--text-muted); text-decoration: none; font: inherit; font-size: 17px; line-height: 1.1; font-weight: 400;
  font-variation-settings: "wdth" 84; background: none; border: 0; cursor: pointer; border-radius: var(--radius-control); position: relative;
}
.nsb-tab__icon { display: grid; place-items: center; width: 60px; height: 30px; border-radius: var(--radius-pill); transition: background-color var(--duration-base) var(--ease-standard); position: relative; }
.nsb-tab[aria-current="page"] { color: var(--text); font-weight: 480; }
.nsb-tab[aria-current="page"] .nsb-tab__icon { background: var(--tab-active); color: var(--on-highlight); }
.nsb-tab .nsb-count { top: -6px; right: 4px; box-shadow: 0 0 0 2px var(--surface); }
@keyframes nsb-drawer-in { from { transform: translateX(-100%); } }

/* ---------- the phone form, at or below the system's breakpoint ---------- */
@media (max-width: 768px) {
  .nsb-shell__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .nsb-shell__grid > .nsb-side { display: none; }
  .nsb-top { display: flex; align-items: center; gap: var(--space-3); min-height: 64px;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); background: var(--header-bg);
    color: var(--header-text); position: relative; isolation: isolate; overflow: hidden; z-index: var(--z-sticky); }
  .nsb-main__inner { padding: var(--space-4) var(--space-4) var(--space-10); gap: var(--space-4); }
  .nsb-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: var(--tabbar-height);
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px #1f22450f;
    z-index: var(--z-tabbar); padding: 6px var(--space-2) calc(6px + env(safe-area-inset-bottom, 0px)); }
  .nsb-tab--current { color: var(--text); font-weight: 480; }
  .nsb-tab--current .nsb-tab__icon { background: var(--tab-active); color: var(--on-highlight); }
  .nsb-drawer-toggle:focus-visible ~ .nsb-shell__grid .nsb-tab--more .nsb-tab__icon { box-shadow: var(--focus-ring); }
  /* More opens the sidebar itself as the drawer, so its badges and sections exist once. */
  .nsb-drawer-toggle:checked ~ .nsb-shell__grid > .nsb-side { display: flex; position: fixed; left: 0; top: 0;
    bottom: 0; width: min(88%, 320px); z-index: var(--z-drawer); box-shadow: var(--shadow-lg);
    animation: nsb-drawer-in var(--duration-slow) var(--ease-enter); }
  .nsb-drawer-toggle:checked ~ .nsb-drawer__scrim { display: block; position: fixed; inset: 0;
    z-index: calc(var(--z-drawer) - 1); background: var(--scrim); cursor: pointer; }
  .nsb-drawer-close { display: inline-grid; cursor: pointer; }
  .nsb-collapse-btn { display: none; }
}

/* ---------- signed out: a navy bar with the lockup, then the page ---------- */
.nsb-plain { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.nsb-plain > .nsb-main { flex: 1 1 auto; }
.nsb-top--plain { display: flex; align-items: center; min-height: 64px; padding: var(--space-2) var(--space-4);
  background: var(--header-bg); color: var(--header-text); position: relative; isolation: isolate; overflow: hidden; }
.nsb-top__home { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target);
  color: var(--header-text); text-decoration: none; }
.nsb-main__inner--narrow { max-width: 48rem; }

/* ---------- widths by class, because the policy allows no inline style ---------- */
.nsb-share-0 { flex: 0 0 0; } .nsb-share-1 { flex: 1 1 0; } .nsb-share-2 { flex: 2 1 0; } .nsb-share-3 { flex: 3 1 0; } .nsb-share-4 { flex: 4 1 0; } .nsb-share-5 { flex: 5 1 0; } .nsb-share-6 { flex: 6 1 0; } .nsb-share-7 { flex: 7 1 0; } .nsb-share-8 { flex: 8 1 0; } .nsb-share-9 { flex: 9 1 0; }
.nsb-share-10 { flex: 10 1 0; } .nsb-share-11 { flex: 11 1 0; } .nsb-share-12 { flex: 12 1 0; } .nsb-share-13 { flex: 13 1 0; } .nsb-share-14 { flex: 14 1 0; } .nsb-share-15 { flex: 15 1 0; } .nsb-share-16 { flex: 16 1 0; } .nsb-share-17 { flex: 17 1 0; } .nsb-share-18 { flex: 18 1 0; } .nsb-share-19 { flex: 19 1 0; }
.nsb-share-20 { flex: 20 1 0; } .nsb-share-21 { flex: 21 1 0; } .nsb-share-22 { flex: 22 1 0; } .nsb-share-23 { flex: 23 1 0; } .nsb-share-24 { flex: 24 1 0; } .nsb-share-25 { flex: 25 1 0; } .nsb-share-26 { flex: 26 1 0; } .nsb-share-27 { flex: 27 1 0; } .nsb-share-28 { flex: 28 1 0; } .nsb-share-29 { flex: 29 1 0; }
.nsb-share-30 { flex: 30 1 0; } .nsb-share-31 { flex: 31 1 0; } .nsb-share-32 { flex: 32 1 0; } .nsb-share-33 { flex: 33 1 0; } .nsb-share-34 { flex: 34 1 0; } .nsb-share-35 { flex: 35 1 0; } .nsb-share-36 { flex: 36 1 0; } .nsb-share-37 { flex: 37 1 0; } .nsb-share-38 { flex: 38 1 0; } .nsb-share-39 { flex: 39 1 0; }
.nsb-share-40 { flex: 40 1 0; } .nsb-share-41 { flex: 41 1 0; } .nsb-share-42 { flex: 42 1 0; } .nsb-share-43 { flex: 43 1 0; } .nsb-share-44 { flex: 44 1 0; } .nsb-share-45 { flex: 45 1 0; } .nsb-share-46 { flex: 46 1 0; } .nsb-share-47 { flex: 47 1 0; } .nsb-share-48 { flex: 48 1 0; } .nsb-share-49 { flex: 49 1 0; }
.nsb-share-50 { flex: 50 1 0; } .nsb-share-51 { flex: 51 1 0; } .nsb-share-52 { flex: 52 1 0; } .nsb-share-53 { flex: 53 1 0; } .nsb-share-54 { flex: 54 1 0; } .nsb-share-55 { flex: 55 1 0; } .nsb-share-56 { flex: 56 1 0; } .nsb-share-57 { flex: 57 1 0; } .nsb-share-58 { flex: 58 1 0; } .nsb-share-59 { flex: 59 1 0; }
.nsb-share-60 { flex: 60 1 0; } .nsb-share-61 { flex: 61 1 0; } .nsb-share-62 { flex: 62 1 0; } .nsb-share-63 { flex: 63 1 0; } .nsb-share-64 { flex: 64 1 0; } .nsb-share-65 { flex: 65 1 0; } .nsb-share-66 { flex: 66 1 0; } .nsb-share-67 { flex: 67 1 0; } .nsb-share-68 { flex: 68 1 0; } .nsb-share-69 { flex: 69 1 0; }
.nsb-share-70 { flex: 70 1 0; } .nsb-share-71 { flex: 71 1 0; } .nsb-share-72 { flex: 72 1 0; } .nsb-share-73 { flex: 73 1 0; } .nsb-share-74 { flex: 74 1 0; } .nsb-share-75 { flex: 75 1 0; } .nsb-share-76 { flex: 76 1 0; } .nsb-share-77 { flex: 77 1 0; } .nsb-share-78 { flex: 78 1 0; } .nsb-share-79 { flex: 79 1 0; }
.nsb-share-80 { flex: 80 1 0; } .nsb-share-81 { flex: 81 1 0; } .nsb-share-82 { flex: 82 1 0; } .nsb-share-83 { flex: 83 1 0; } .nsb-share-84 { flex: 84 1 0; } .nsb-share-85 { flex: 85 1 0; } .nsb-share-86 { flex: 86 1 0; } .nsb-share-87 { flex: 87 1 0; } .nsb-share-88 { flex: 88 1 0; } .nsb-share-89 { flex: 89 1 0; }
.nsb-share-90 { flex: 90 1 0; } .nsb-share-91 { flex: 91 1 0; } .nsb-share-92 { flex: 92 1 0; } .nsb-share-93 { flex: 93 1 0; } .nsb-share-94 { flex: 94 1 0; } .nsb-share-95 { flex: 95 1 0; } .nsb-share-96 { flex: 96 1 0; } .nsb-share-97 { flex: 97 1 0; } .nsb-share-98 { flex: 98 1 0; } .nsb-share-99 { flex: 99 1 0; }
.nsb-share-100 { flex: 100 1 0; }

/* ---------- restyled screens: small layouts the components leave to the screen ---------- */
.nsb-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: var(--space-6); align-items: start; }
.nsb-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nsb-rows > li { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0;
  border-top: 1px solid var(--border); }
.nsb-rows > li:first-child { border-top: 0; padding-top: 0; }
.nsb-rows__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.nsb-rows__text > a { font-weight: 600; }
.nsb-rows__meta { color: var(--text-muted); }
.nsb-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nsb-links a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 560; }
.nsb-card p { margin: 0 0 var(--space-3); }
.nsb-card > :last-child, .nsb-card p:last-child { margin-bottom: 0; }
.nsb-card h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fluid-h4); font-weight: 620; color: var(--text-heading); }
.nsb-card form { margin: 0; }
/* A link in a table cell keeps its 44px target without growing the row; the DataTable leaves it to
   the screen. Element-weight on purpose, so a button in a cell keeps its own box. */
td a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.nsb-inline { display: inline; }
.nsb-more { font-weight: 600; display: inline-flex; align-items: center; min-height: var(--target); }
.nsb-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.nsb-toolbar__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
.nsb-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin: 0; }
.nsb-filter fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.nsb-filter .nsb-field { width: 15rem; max-width: 100%; }
.nsb-filter__clear { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 600; }
.nsb-filter__open { display: none; }
.nsb-filter > .nsb-btn { align-self: flex-end; }
.nsb-pager { display: flex; align-items: center; gap: var(--space-4); }
.nsb-pager a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 600; }
.nsb-sizes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.nsb-sizes a { display: inline-flex; align-items: center; min-height: var(--target); }
.nsb-sizes a[aria-current] { font-weight: 650; text-decoration: none; }
@media (min-width: 769px) { .nsb-hide-desk { display: none !important; } }
@media (max-width: 768px) {
  .nsb-hide-phone { display: none !important; }
  /* A list on a phone is cards, from the same markup (the system's layout="cards"). */
  .nsb-table--auto { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .nsb-table--auto thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nsb-table--auto table, .nsb-table--auto tbody, .nsb-table--auto tr, .nsb-table--auto td { display: block; }
  .nsb-table--auto tbody { display: grid; gap: var(--space-3); }
  .nsb-table--auto tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card-sm); box-shadow: var(--shadow-xs); padding: var(--space-3) var(--space-4); }
  .nsb-table--auto td { border: 0; padding: 6px 0; display: grid; grid-template-columns: minmax(7.5em, 40%) minmax(0, 1fr); gap: var(--space-3); height: auto; }
  .nsb-table--auto td::before { content: attr(data-label); font-weight: 560; color: var(--text-muted); }
  .nsb-table--auto td.nsb-num { text-align: left; }
  .nsb-table--auto td.nsb-table__lead { display: block; font-size: var(--fluid-h3); line-height: 1.25; padding-bottom: var(--space-2); margin-bottom: var(--space-1); border-bottom: 1px solid var(--border); }
  .nsb-table--auto td.nsb-table__lead::before { content: none; }
  .nsb-table--auto td > .nsb-pill { justify-self: start; }
  .nsb-table--auto .nsb-table__tag { display: block; margin: 0; font-size: 17px; }
  .nsb-table--auto tbody tr:hover { background: var(--surface); }
  /* The filter folds behind its button on a phone, opened by a checkbox and its label. */
  .nsb-filter__open { display: inline-flex; cursor: pointer; }
  .nsb-filter-toggle:not(:checked) ~ .nsb-filter { display: none; }
  .nsb-filter-toggle:focus-visible ~ .nsb-toolbar__actions .nsb-filter__open { box-shadow: var(--focus-ring); }
  .nsb-toolbar__actions { order: -1; }
  .nsb-filter, .nsb-filter fieldset, .nsb-filter .nsb-field { width: 100%; }
  .nsb-toolbar, .nsb-toolbar__actions { width: 100%; }
  .nsb-toolbar__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nsb-toolbar__actions > :first-child { grid-column: 1 / -1; }
  .nsb-toolbar__actions .nsb-btn, .nsb-toolbar__actions .nsb-inert { width: 100%; }
  /* Home on a phone opens on the next event; the top bar already names the band. */
  .nsb-ph--home { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
}

/* ---------- sign-in: the system's split panel ---------- */
.nsb-signin-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--surface); }
.nsb-signin { min-height: 100%; border-radius: 0; box-shadow: none; }
.nsb-signin__brand-words { display: flex; flex-direction: column; gap: var(--space-3); }
.nsb-signin__brand .nsb-lead { margin: 0; }
.nsb-signin__inner { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--space-6); }
.nsb-signin__route > p { margin: 0; font-weight: 560; }
.nsb-signin__route .nsb-field { max-width: none; }
.nsb-signin__or { margin: 0; }
.nsb-signin__route form { display: grid; gap: var(--space-3); margin: 0; }
/* The approved photograph (D106), greyscale under navy, only where it exists on the host: it never
   enters git, and a checkout without it shows the navy panel the canvas draws. Never on a phone. */
@media (min-width: 769px) {
  .nsb-signin__brand { background-image: image-set(url(signin/signin-1x.webp) type("image/webp") 1x,
                                                   url(signin/signin-2x.webp) type("image/webp") 2x,
                                                   url(signin/signin-1x.jpg) type("image/jpeg") 1x,
                                                   url(signin/signin-2x.jpg) type("image/jpeg") 2x);
    background-size: cover; background-position: 50% 0%; }
  .nsb-signin__brand::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--header-bg); opacity: 0.82; }
}
@media (max-width: 768px) {
  .nsb-signin { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .nsb-signin__brand { padding: var(--space-6); flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--space-4); }
  .nsb-signin__brand .nsb-crest { --crest-size: 72px; }
  .nsb-signin__brand .nsb-display { --wm: 20px; margin: 0; }
  .nsb-signin__brand .nsb-lead, .nsb-signin__brand .nsb-wm { display: none; }
  .nsb-signin__form { padding: var(--space-6) var(--space-4); justify-content: flex-start; gap: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}