/* The sign-in stage carried into the staff pages that set `app_stage` in layouts/base.html (the
   organization list and the organization dashboard): the 8AI night band under a glass bar, a light
   sheet lit from it, and the pieces both pages draw on it. Plain CSS on the staff-aa tokens; the bar is
   components/app_stage_bar.html, which draws the layout's own links, menus, switcher and gates.
   A page's own parts live in its own sheet beside this one. */

/* The faces of the sign-in pages: never swapped in late, so a first visit that misses its first 100 ms
   keeps the metric-matched fallback for that page and no line moves; the next page has them cached. */
@font-face {
  font-family: "Inter Stage";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(/static/vendor/inter/inter-latin-wght-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-display: optional;
  font-weight: 700;
  src: url(/static/vendor/inter/inter-display-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

/* The page: navy under the bar whatever comes first in the content (an observer's notice, a flash
   message), the light page under it. */
body.ds-app-stage {
  --app-font: "Inter Stage", "Inter Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --app-display: "Inter Display", var(--app-font);
  --app-bar-pad: var(--space-8);
  --app-bar-h: calc(4rem + var(--app-bar-pad));
  /* The frame's side gutter, which the menus opening under the row keep too. */
  --app-gutter: 1rem;
  --app-glass: color-mix(in srgb, var(--on-brand) 10%, transparent);
  --app-glass-edge: inset 0 0 0 1px color-mix(in srgb, var(--on-brand) 22%, transparent);
  background: linear-gradient(var(--brand-deep), var(--brand-deep)) top / 100% 360px no-repeat, var(--surface-page);
  color: var(--ink);
  font-family: var(--app-font);
}

/* ---------- The bar: components/app_stage_bar.html on the night band ---------- */
/* One row the height the band is drawn up by (--app-bar-h): the plate, one segmented group of links
   whose last segment is More, then the organization chip and the account disc. Each control is drawn
   whole: below 1024px the group folds into the menu button, below 1280px the chip shows its building
   alone, and nothing in the row shrinks or scrolls, so a word that did not fit would show as an
   overlap in tests/integration/test_stage_top_bar_layout.py rather than be cut. */
.ds-app-stage .ds-app-bar { position: relative; z-index: 30; padding-top: var(--app-bar-pad); color: var(--on-brand); }
.ds-app-bar__row { display: flex; align-items: center; gap: var(--space-16); height: 4rem; }
.ds-app-bar__plate { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-card);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-deep) 60%, transparent), 0 0 0 5px color-mix(in srgb, var(--brand-glow) 55%, transparent),
    0 8px 24px -8px color-mix(in srgb, var(--brand-deep) 80%, transparent); }
.ds-app-bar__mark { width: auto; height: 30px; }
.ds-app-bar__group { display: none; flex: none; align-items: center; gap: 2px; padding: 3px; border-radius: 16px; background: var(--app-glass);
  box-shadow: var(--app-glass-edge); }
.ds-app-bar__link { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--size-tap); margin: 0; padding: 0 14px; border: 0;
  border-radius: 13px; background: transparent; color: var(--on-brand); font: 500 16px/24px var(--app-font); white-space: nowrap; text-decoration: none;
  cursor: pointer; }
.ds-app-bar__link:hover, .ds-app-bar__link.is-current { background: color-mix(in srgb, var(--on-brand) 14%, transparent); }
/* The page the reader is on: the one white segment, as the language switch marks its language. */
.ds-app-bar__link[aria-current="page"] { background: var(--surface-card); color: var(--brand); font-weight: 600;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--brand-band-bottom) 35%, transparent); }
.ds-app-bar__more { position: relative; display: flex; }
.ds-app-bar__more > .ds-app-bar__link { gap: 6px; padding-right: 10px; }
.ds-app-bar__chevron { flex: none; width: 16px; height: 16px; stroke-width: 2; }
.ds-app-bar__glyph { flex: none; width: 22px; height: 22px; stroke-width: 1.75; }
.ds-app-bar__badge { display: inline-grid; flex: none; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
  background: var(--danger); color: var(--on-danger); font: 700 14px/1 var(--app-font); }
.ds-app-bar__end { display: flex; flex: none; align-items: center; gap: 10px; margin-left: auto; }
/* The organization: an outlined chip, so it reads apart from the filled group of links. */
.ds-app-bar__switch, .ds-app-bar__account { position: relative; display: flex; }
.ds-app-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); width: var(--size-tap); min-height: var(--size-tap);
  padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--on-brand); font: 500 16px/24px var(--app-font); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-brand) 38%, transparent); }
.ds-app-chip:hover { background: color-mix(in srgb, var(--on-brand) 10%, transparent); }
.ds-app-chip__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-app-chip .ds-app-bar__chevron { display: none; }
/* The person: their initials on an azure disc, apart from the white plate at the other end. */
.ds-app-avatar { display: grid; flex: none; place-items: center; width: var(--size-tap); height: var(--size-tap); padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--brand-glow) 24%, var(--brand-deep)); color: var(--on-brand); font: 600 16px/1 var(--app-font); letter-spacing: .02em;
  cursor: pointer; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand-glow) 70%, transparent); }
.ds-app-avatar:hover { background: color-mix(in srgb, var(--brand-glow) 34%, var(--brand-deep)); }
.ds-app-bar__login { display: inline-flex; align-items: center; min-height: var(--size-tap); padding: 0 var(--space-16); border-radius: 15px;
  background: var(--app-glass); box-shadow: var(--app-glass-edge); color: var(--on-brand); font: 500 16px/24px var(--app-font); text-decoration: none; }
.ds-app-bar__menu { display: grid; flex: none; place-items: center; width: var(--size-tap); height: var(--size-tap); padding: 0; border: 0; border-radius: 15px;
  background: var(--app-glass); box-shadow: var(--app-glass-edge); color: var(--on-brand); cursor: pointer; }
.ds-app-bar :is(.ds-app-bar__plate, .ds-app-bar__link, .ds-app-chip, .ds-app-avatar, .ds-app-bar__login, .ds-app-bar__menu):focus-visible {
  outline: 2px solid var(--on-brand); outline-offset: 2px; }

/* ---------- The bar's menus: white cards under their control ---------- */
.ds-app-menu { position: absolute; top: calc(100% + var(--space-8)); z-index: 50; box-sizing: border-box; min-width: 15rem;
  max-width: calc(100vw - 2rem); max-height: calc(100vh - var(--app-bar-h) - 2rem); overflow-y: auto; padding: 6px; border-radius: 18px;
  background: var(--surface-card); color: var(--ink); text-align: left;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent), 0 18px 44px -14px color-mix(in srgb, var(--brand-deep) 60%, transparent); }
.ds-app-menu--start { left: 0; }
.ds-app-menu--end { right: 0; }
.ds-app-menu--wide { width: 20rem; }
.ds-app-menu__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); box-sizing: border-box; width: 100%;
  min-height: var(--size-tap); padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink);
  font: 500 16px/24px var(--app-font); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ds-app-menu__item:hover { background: color-mix(in srgb, var(--ink) 5%, var(--surface-card)); }
.ds-app-menu__item[aria-current="page"] { background: color-mix(in srgb, var(--accent) 9%, var(--surface-card)); color: var(--accent); font-weight: 600; }
.ds-app-menu__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ds-app-menu__group:not(:first-child) { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.ds-app-menu__heading { margin: 6px 12px 4px; font: 600 14px/20px var(--app-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.ds-app-menu__who { margin-bottom: 6px; padding: 8px 12px 12px; border-bottom: 1px solid var(--border); }
.ds-app-menu__name { margin: 0; font: 600 16px/24px var(--app-font); color: var(--ink); overflow-wrap: anywhere; }
.ds-app-menu__role { margin: 0; font: 400 14px/20px var(--app-font); color: var(--ink-subtle); }
/* The menu button's list: under the row, at the window's right gutter. */
.ds-app-bar__sheet { top: 100%; right: var(--app-gutter); width: min(22rem, calc(100% - 2 * var(--app-gutter))); }
/* A phone: the chip's and the disc's menus open under the row at the same gutter, not from a control
   whose right edge would carry a 20rem card past the window's left. */
@media (max-width: 639px) {
  .ds-app-bar__switch, .ds-app-bar__account { position: static; }
  .ds-app-menu--end { top: 100%; right: var(--app-gutter); }
}

/* ---------- The band: the night field under the bar ---------- */
/* Drawn up under the bar when it is the content's first thing and nothing sits between them; the
   bar's height is fixed, so the band's top is the page's top. */
.ds-app-band { position: relative; isolation: isolate; overflow: hidden; color: var(--on-brand); background: var(--brand-deep); }
.ds-app-bar + main > .ds-app-band:first-child { margin-top: calc(-1 * var(--app-bar-h)); padding-top: var(--app-bar-h); }
.ds-app-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, color-mix(in srgb, var(--brand-deep) 75%, transparent) 100%),
    radial-gradient(ellipse 26% 22% at 50% 44%, color-mix(in srgb, var(--brand-glow) 42%, transparent), transparent 72%),
    radial-gradient(ellipse 50% 48% at 50% 52%, color-mix(in srgb, var(--accent) 72%, transparent), transparent 74%),
    radial-gradient(ellipse 80% 42% at 50% -8%, color-mix(in srgb, var(--brand) 95%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 40%, var(--brand-deep)) 0%, var(--brand-deep) 70%); }
/* Grain, so a gradient this wide does not band on a large monitor: one static tile. */
.ds-app-field::after { content: ""; position: absolute; inset: 0; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* A page sets --app-rings-y to centre the rings where its light sits. Where a page draws them beside
   the field rather than inside it, they would otherwise paint over the band's words and take the
   presses on its links. */
.ds-app-rings { position: absolute; left: 50%; top: var(--app-rings-y, 50%); z-index: -1; width: 2800px; height: 2800px; margin: -1400px 0 0 -1400px;
  color: var(--brand-sky); pointer-events: none; }
.ds-app-rings circle { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* The column the bar's links already sit in, so the band, the sheet and the bar share one left edge. */
.ds-app-frame { box-sizing: border-box; width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--app-gutter); }

/* ---------- Words on the band ---------- */
.ds-app-eyebrow { margin: 0; font: 600 16px/24px var(--app-font); letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--on-brand) 80%, transparent); }
.ds-app-title { margin: var(--space-4) 0 0; font: 700 34px/40px var(--app-display); letter-spacing: -.03em; color: var(--on-brand);
  text-wrap: balance; overflow-wrap: anywhere; }
.ds-app-headline { margin: var(--space-4) 0 0; font: 300 30px/36px var(--app-font); letter-spacing: -.024em; color: var(--on-brand);
  text-wrap: balance; overflow-wrap: anywhere; }
.ds-app-lede { margin: var(--space-8) 0 0; font: 400 18px/28px var(--app-font); color: color-mix(in srgb, var(--on-brand) 80%, transparent); }

/* ---------- Actions ---------- */
.ds-app-glass { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--size-tap); padding: 0 var(--space-16);
  border: 0; border-radius: 15px; background: var(--app-glass); box-shadow: var(--app-glass-edge); color: var(--on-brand);
  font: 500 16px/24px var(--app-font); text-decoration: none; white-space: nowrap; cursor: pointer; backdrop-filter: blur(12px); }
.ds-app-glass:hover { background: color-mix(in srgb, var(--on-brand) 18%, transparent); }
.ds-app-glass:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 2px; }
/* The one filled control on a card: white stays at 5.8:1 or more on the gradient's lightest stop. */
.ds-app-primary { display: flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: 56px; border: 0;
  border-radius: var(--radius-xl); color: var(--on-brand); font: 600 17px/24px var(--app-font); text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 65%, var(--brand-glow)), var(--accent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-brand) 22%, transparent), 0 1px 2px color-mix(in srgb, var(--brand-band-bottom) 35%, transparent),
    0 12px 28px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.ds-app-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- The sheet: the light page drawn up over the band, its top edge lit ---------- */
.ds-app-sheet { position: relative; z-index: 1; margin-top: -40px; padding-bottom: var(--space-48); border-radius: 28px 28px 0 0;
  background: var(--surface-page);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--brand-glow) 35%, transparent), 0 -18px 44px -14px color-mix(in srgb, var(--brand-glow) 70%, transparent); }
body.ds-app-stage > footer { margin-top: 0; border-top: 1px solid var(--border); background: var(--surface-page); }

/* ---------- A grouped list: rows on the page tint, hairlines inset from the words ---------- */
.ds-app-list { margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: 18px; background: var(--surface-page); }
.ds-app-list > li { position: relative; }
.ds-app-list > li + li::before { content: ""; position: absolute; top: 0; left: 70px; right: 0; height: 1px; background: var(--border); }
.ds-app-row { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.ds-app-row:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface-page)); }
.ds-app-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.ds-app-row__text { display: grid; flex: 1; min-width: 0; }
.ds-app-row__title { font: 600 17px/24px var(--app-font); color: var(--ink); }
/* ink-subtle, the darker grey under staff-aa: 4.9:1 on the hover tint, where ink-muted falls to 4.3:1. */
.ds-app-row__sub { font: 400 16px/22px var(--app-font); color: var(--ink-subtle); text-wrap: balance; }
.ds-app-row__end { flex: none; width: 20px; height: 20px; color: var(--ink-subtle); }

/* ---------- An icon in a square, in one of four tones ---------- */
.ds-app-icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 13%, var(--surface-card)); }
.ds-app-icon--solid { color: var(--on-brand); background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 80%, var(--surface-card)), var(--tone)); }
.ds-app-icon__glyph { width: 24px; height: 24px; stroke-width: 2; }
.ds-app-icon--sm { width: 40px; height: 40px; }
.ds-app-icon--sm .ds-app-icon__glyph { width: 22px; height: 22px; }
.ds-app-icon--lg { width: 52px; height: 52px; border-radius: 15px; }
.ds-app-icon--lg .ds-app-icon__glyph { width: 28px; height: 28px; }
.ds-app-icon--xl { width: 56px; height: 56px; border-radius: var(--radius-xl); }
.ds-app-icon--xl .ds-app-icon__glyph { width: 30px; height: 30px; }
.ds-app-icon--sky { --tone: color-mix(in srgb, var(--accent) 60%, var(--brand-glow)); }
.ds-app-icon--accent { --tone: var(--accent); }
.ds-app-icon--brand { --tone: var(--brand); }
.ds-app-icon--success { --tone: var(--success); }

@media (prefers-reduced-motion: no-preference) {
  .ds-app-primary, .ds-app-row, .ds-app-glass { transition: transform 160ms ease-out, background-color 160ms ease-out; }
  .ds-app-primary:hover { transform: translateY(-1px); }
  .ds-app-primary:active { transform: scale(.99); }
}
@media (min-width: 640px) {
  body.ds-app-stage { --app-gutter: 1.5rem; }
}
@media (min-width: 641px) {
  body.ds-app-stage { --app-bar-pad: var(--space-12); }
  .ds-app-bar__plate { width: 48px; height: 48px; }
  .ds-app-bar__mark { height: 32px; }
  .ds-app-title { font-size: 44px; line-height: 50px; }
  .ds-app-headline { font-size: 40px; line-height: 48px; }
  .ds-app-lede { font-size: 20px; line-height: 30px; }
  /* The strapline cue of the sign-in stage, on a centred eyebrow: a short azure rule either side. */
  .ds-app-eyebrow--ruled { display: flex; align-items: center; justify-content: center; gap: var(--space-12); color: var(--on-brand); }
  .ds-app-eyebrow--ruled::before, .ds-app-eyebrow--ruled::after { content: ""; flex: none; width: 24px; height: 1.5px; background: var(--brand-glow); }
  .ds-app-sheet { margin-top: -56px; border-radius: 36px 36px 0 0; }
}
@media (min-width: 1024px) {
  body.ds-app-stage { --app-gutter: 2rem; }
  .ds-app-bar__group { display: flex; }
  /* !important over the inline display Alpine leaves on an open list, should the window widen. */
  .ds-app-bar__menu, .ds-app-bar__sheet { display: none !important; }
}
@media (min-width: 1280px) {
  .ds-app-chip { width: auto; padding: 0 12px 0 14px; }
  .ds-app-chip__name { position: static; width: auto; max-width: 20rem; height: auto; clip: auto; text-overflow: ellipsis; }
  .ds-app-chip .ds-app-bar__chevron { display: block; }
}
@media (min-width: 1101px) {
  .ds-app-title { font-size: 56px; line-height: 60px; }
  .ds-app-headline { font-size: 48px; line-height: 56px; }
}
@media (min-width: 1601px) {
  .ds-app-title { font-size: 64px; line-height: 68px; }
  .ds-app-headline { font-size: 56px; line-height: 60px; }
}