[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* `Role Sign In.dc.html:36,46,62` builds the surface as a full-height flex
   column: the header is `flex:none`, the two-column body takes `flex:1` of
   what is left, and the panel centres itself inside that with
   `justify-content:center`. The panel already asks to be centred (see
   `.role-panel`), but it was centring itself inside its own content height —
   `min-height:100dvh` sat on the page while nothing passed that height down —
   so the panel measured 348px against the artboard's ~740 and the form sat
   near the top of an otherwise empty screen. The chain is what was missing,
   not the centring. */
.role-sign-in-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* The two blocks between the header and the body keep their own height; only
   the body absorbs the remainder. `.role-sign-in-blob` is fixed and the live
   region is absolutely positioned, so neither is a flex item here. */
.role-sign-in-page > header,
.role-sign-in-page > .route-state {
  flex: none;
}

/* Decorative blob (design spec: bottom -190px/left -140px/520x520). Fixed
   rather than the mock's card-relative absolute, matching every other
   surface's viewport-anchored blob (e.g. .menu-blob). */
.role-sign-in-blob {
  position: fixed;
  z-index: 0;
  bottom: -190px;
  left: -140px;
  width: 520px;
  height: 520px;
  border-radius: 52% 48% 42% 58%;
  background: radial-gradient(
    circle at 45% 40%,
    var(--color-accent-2-300),
    var(--color-accent-2-200) 55%,
    transparent 74%
  );
  filter: blur(18px);
  opacity: 0.5;
  pointer-events: none;
}

.role-sign-in-page > header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  /* The artboard centres the two header groups against each other and
     baselines only the brand against its subtitle (the inner span). */
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-3);
}

/* The artboard sets the brand to 24px here — .nav-brand's own 18px is the
   size it takes inside a .nav bar, not at the top of a sign-in surface. */
.role-sign-in-page .nav-brand {
  font-size: 24px;
}

.header-subtitle {
  font-size: 13px;
}

.header-event {
  margin-left: auto;
  font-size: 13px;
}

/* — route-state (loading / no open event / offline) —
   Same shape every staff surface's own #<page>-route-state repeats
   (e.g. menu-organic.css): a surface-level card, not a shared component,
   because .route-state/.eyebrow are deliberately per-page across the app. */
.role-sign-in-page > .route-state {
  position: relative;
  z-index: 1;
  margin: 0 var(--space-6) var(--space-3);
  padding: var(--space-4);
  border-radius: 32px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13.5px;
  line-height: 1.5;
}

.role-sign-in-page .route-state h2 {
  margin: var(--space-1) 0 var(--space-2);
  font-size: 27px;
  line-height: 1.12;
}

.role-sign-in-page .eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-700);
}

/* — body: the two-column grid — */
.role-sign-in-body {
  position: relative;
  z-index: 1;
  /* `min-height:0` for the same reason the artboard writes it: a flex item's
     automatic minimum is its content, which would floor the row at the panel's
     own height and undo the fill. */
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--space-4);
  padding: 0 var(--space-6) var(--space-6);
}

/* 1fr is minmax(auto, 1fr): without min-width:0 on the grid items
   themselves, the automatic minimum floors at each item's own min-content
   and the columns cannot actually shrink at narrow/zoomed viewports (the
   exact BUG-4f-zoom-clip mechanism). Keep this. */
.role-sign-in-body > * {
  min-width: 0;
}

@media (max-width: 720px) {
  .role-sign-in-body {
    grid-template-columns: 1fr;
  }
}

/* — left column: role roster — */

.role-roster-footer {
  display: inline-block;
  margin-top: calc(var(--space-3) + var(--space-2));
  font-size: 15px;
}

#role-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* A selectable composite row: name + surfaces line + status tag. Not a
   .card (no shadow by default) and not a .btn (holds three independent
   pieces of content, not one label) — a genuinely new composite, matching
   the design's own bespoke treatment rather than forcing it into either
   existing shape. */
.role-choice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) * 1.5);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.role-choice[aria-pressed="true"] {
  border-color: var(--color-accent-700);
  background: var(--color-accent-100);
  box-shadow: none;
}

/* Hover and pressed, from the same accent ramp .btn-icon's own hover/
   active use (design.md requires both from the ramp, not just selected).
   Each state escalates one rung past its own resting fill — surface to
   accent-100 to accent-200 unselected; accent-100 to accent-200 to
   accent-300 selected — rather than inventing a second formula. */
.role-choice:hover {
  background: var(--color-accent-100);
}

.role-choice:active {
  background: var(--color-accent-200);
}

.role-choice[aria-pressed="true"]:hover {
  background: var(--color-accent-200);
}

.role-choice[aria-pressed="true"]:active {
  background: var(--color-accent-300);
}

/* The design's own structure (RoleSignIn.dc.md §3): name and surfaces
   share ONE flex:1/min-width:0 container, with the status tag as its
   sibling — not three flex siblings of the button directly. Three
   siblings with the surfaces line forced onto its own row via
   flex-basis:100% left nothing claiming the flexible space, so the tag
   itself wrapped below at narrower widths instead of sitting beside the
   text block the way the design draws it. */
.role-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.role-choice-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
}

/* — right column: the panel — */
/* .card composed for ground, radius (32px) and column flow; the deltas are
   the artboard's own var(--space-6) padding and centred block.
   `gap: 0` is load-bearing: .card's default var(--space-2) row gap ADDS to
   the margins the artboard draws on each child, so the heading→blurb step
   measured 17.6px against the artboard's 8.8 and blurb→form 35.2 against
   26.4. The artboard wraps the panel's children in a plain <div> and spaces
   them with margins alone; this file carries those same margins, so the
   gap has to go rather than be subtracted out of every child. */
.role-panel {
  padding: var(--space-6);
  gap: 0;
  justify-content: center;
  min-height: 320px;
}

.role-panel-heading {
  font-size: 31px;
  margin: 0 0 var(--space-2);
}

/* Signed-in only: the artboard's heading sits var(--space-2) below the
   "Session open" tag. Signed-out, the heading is the panel's first child
   and keeps its 0 top margin. */
.role-panel > .tag + .role-panel-heading {
  margin-top: var(--space-2);
}

/* A flex column stretches its items, so the inline-flex tag and the ghost
   sign-out button were both blockified to the panel's full width. The
   artboard draws each hugging its own content. */
.role-panel > .tag,
.role-end-session {
  align-self: flex-start;
}

/* — signed-out: the sign-in form — */
.role-sign-in-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: 520px;
  margin-top: var(--space-6);
}

.role-sign-in-form .field {
  flex: 1;
  min-width: 260px;
}

/* The Registration Desk's name field (#237) takes its own row, so the
   passphrase and the button stay one aligned row beneath it. */
.role-sign-in-form .field-full {
  flex: 1 0 100%;
}

/* .input composed for border/radius/focus; the delta is this form's taller
   52px target over the shared 36px default. */
.role-sign-in-form .input {
  min-height: 52px;
}

/* .btn .btn-primary composed for color/hover/active/disabled; the delta is
   the same 52px target as the field beside it. */
.role-sign-in-form .btn-primary {
  flex: none;
  min-height: 52px;
}

.role-sign-in-error {
  flex: 1 0 100%;
  /* The bare-<p> rule ends every paragraph with var(--space-3); the
     artboard's refusal card carries no margin at all — the form's own gap
     is the only space under it. */
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: 20px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-size: 13px;
  line-height: 1.5;
}

/* — signed-in: deep links + end session — */
.role-open-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

/* .btn .btn-primary composed for shape, color, hover (accent-700) and
   active (accent-800) — the pill's RESTING fill is one rung past
   .btn-primary's own default (accent-700, not the base accent), which is
   the one genuine color delta the design asks for; layout deltas are the
   19px inline padding, 48px height and 9px icon gap the design's pills
   use. Composing .btn-primary rather than recreating the fill from
   scratch is what gives this a real :active state — it had none before. */
.role-open-link {
  min-height: 48px;
  padding: 0 19px;
  background: var(--color-accent-700);
  /* The artboard draws these pills as plain anchors, so their labels are
     Figtree — deliberately unlike the Caprasimo `Sign in` button one panel
     over, which the artboard does mark up as .btn. .btn's heading face is
     the one thing not to inherit here. */
  font-family: var(--font-body);
  font-size: 14px;
  gap: 9px;
}

.role-open-link svg {
  flex: none;
}

/* .btn .btn-ghost composed for color/hover/active; the delta is the 44px
   touch floor and the top margin separating it from the pills above. */
.role-end-session {
  margin-top: var(--space-6);
  min-height: 44px;
}

/* Brand and surface name travel together on the left. */
.header-identity {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}