:root {
  --asu-maroon: #8c1d40;
  --asu-gold: #ffc627;
  --asu-black: #191919;
  --asu-gray-2: #484848;
  --asu-gray: #747474;
  --asu-gray-4: #bfbfbf;
  --asu-gray-5: #d0d0d0;
  --asu-gray-6: #e8e8e8;
  --asu-gray-7: #fafafa;
  --asu-white: #ffffff;
  --asu-blue: #00a3e0;
  --asu-green: #78be20;
  --danger: #b72a2a;
  --focus: #0077b6;
  --shadow: 0 12px 30px rgba(25, 25, 25, 0.08);
  --radius: 8px;
  --content: 1140px;
  --font: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
  --layer-modal: 5000;
}

/* Cohesive operations workspaces */
.operations-hero-inner {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 520px);
  min-height: 360px;
}

.operations-hero-copy {
  align-self: center;
  min-width: 0;
}

.hero-context-row,
.hero-stat-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.hero-context-row {
  justify-content: space-between;
}

.hero-campus-label,
.hero-inline-stat,
.hero-stat-row span {
  color: var(--asu-white);
  font-size: 0.86rem;
  font-weight: 700;
}

.hero-inline-stat {
  align-items: baseline;
  display: flex;
  gap: 7px;
  margin-top: 20px;
}

.hero-inline-stat strong,
.hero-stat-row strong {
  color: var(--asu-gold);
  font-size: 1.35rem;
}

.hero-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 22px;
  width: 100%;
}

.hero-stat-row span {
  align-items: baseline;
  display: flex;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.hero-stat-row span + span {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  padding-left: 18px;
}

.hero-campus-switcher {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  display: flex;
  gap: 8px;
  padding: 7px;
}

.hero-campus-switcher label {
  font-size: 0.76rem;
  font-weight: 800;
  padding-left: 4px;
}

.hero-campus-switcher select,
.hero-campus-switcher button {
  border: 0;
  border-radius: 3px;
  min-height: 34px;
}

.hero-campus-switcher select {
  background: var(--asu-white);
  color: var(--asu-black);
  min-width: 170px;
  padding: 5px 9px;
}

.hero-campus-switcher button {
  background: var(--asu-gold);
  color: var(--asu-black);
  cursor: pointer;
  font-weight: 800;
  padding: 5px 10px;
}

.hero-action-dock {
  align-self: center;
  display: grid;
  gap: 7px;
  width: 100%;
}

.hero-action-link {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 4px;
  color: var(--asu-white);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 64px;
  padding: 11px 14px;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.hero-action-link:hover,
.hero-action-link:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--asu-white);
  transform: translateY(-1px);
}

.hero-action-link.is-primary {
  background: var(--asu-gold);
  border-color: var(--asu-gold);
  color: var(--asu-black);
}

.hero-action-link.is-primary:hover,
.hero-action-link.is-primary:focus-visible {
  background: #ffd35a;
}

.hero-action-link > span:first-child {
  display: grid;
  gap: 3px;
}

.hero-action-link strong,
.hero-action-link small {
  letter-spacing: 0;
}

.hero-action-link small {
  font-size: 0.78rem;
  line-height: 1.3;
  opacity: 0.82;
}

.hero-action-count {
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  min-width: 30px;
  padding: 0 8px;
}

.hero-action-link.is-primary .hero-action-count {
  background: rgba(0, 0, 0, 0.12);
}

.store-operations-hero .operations-hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(430px, 560px);
}

.store-dashboard-workspace {
  display: grid;
}

.attention-workspace {
  background: var(--asu-white);
  border-top: 4px solid var(--asu-gold);
}

.attention-heading {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 20px 24px 16px;
}

.attention-heading h2,
.attention-heading p {
  margin: 0;
}

.attention-list {
  border-top: 1px solid var(--asu-gray-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.attention-list a {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 86px;
  padding: 16px 24px;
  text-decoration: none;
}

.attention-list a:nth-child(even) {
  border-left: 1px solid var(--asu-gray-6);
}

.attention-list a:nth-child(n + 3) {
  border-top: 1px solid var(--asu-gray-6);
}

.attention-list a:hover,
.attention-list a:focus-visible {
  background: #fff9e8;
}

.attention-list a span {
  display: grid;
  gap: 3px;
}

.attention-list small {
  color: var(--asu-gray-2);
}

.attention-list b {
  color: var(--asu-maroon);
  font-size: 1.5rem;
}

/* User directory and detail drawer */
.user-workspace {
  background: transparent;
  border: 0;
  display: block;
  height: auto;
  min-height: 0;
}

.user-directory {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-radius: 4px;
  display: block;
  overflow: hidden;
}

[data-user-results] {
  overflow: visible;
}

.user-directory-filters {
  align-items: end;
  background: #f7f7f7;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(280px, 1.4fr) minmax(420px, 1fr) auto;
  padding: 14px 16px;
}

.user-filter-row {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.user-filter-row label:nth-child(3) {
  grid-column: auto;
}

.user-filter-submit {
  min-height: 40px;
}

.user-table-header,
.user-list-item {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(240px, 2fr) minmax(105px, 0.8fr) minmax(130px, 1fr) minmax(95px, 0.8fr) minmax(80px, 0.65fr) 22px;
}

.user-table-header {
  background: var(--asu-white);
  border-bottom: 1px solid var(--asu-gray-5);
  color: var(--asu-gray-2);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 10px 16px;
  text-transform: uppercase;
}

.user-list-item {
  min-height: 76px;
  padding: 12px 16px;
}

.user-list-item.is-selected {
  box-shadow: inset 4px 0 0 var(--asu-gold);
}

.user-table-cell {
  color: var(--asu-gray-1);
  font-size: 0.86rem;
  min-width: 0;
}

.user-balance-cell strong {
  font-size: 1rem;
}

.user-row-open {
  font-size: 1.6rem;
  line-height: 1;
}

.user-list-pagination {
  background: #f7f7f7;
}

.user-detail-shell {
  bottom: 0;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 660px);
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1100;
}

.user-detail-shell.is-open {
  display: grid;
}

.user-drawer-backdrop {
  background: rgba(0, 0, 0, 0.52);
  border: 0;
  cursor: pointer;
  grid-column: 1;
  grid-row: 1;
}

[data-user-detail] {
  background: var(--asu-white);
  box-shadow: -14px 0 38px rgba(0, 0, 0, 0.22);
  grid-column: 2;
  grid-row: 1;
  overflow-y: auto;
}

.icon-only-button.user-drawer-close {
  display: inline-flex;
}

body.has-user-drawer {
  overflow: hidden;
}

.audit-workspace {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  box-shadow: var(--shadow);
}

.audit-live-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  color: var(--asu-gray-2, #5c6670);
}

.audit-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #1a8a3a;
  box-shadow: 0 0 0 0 rgba(26, 138, 58, 0.5);
  animation: audit-live-pulse 2s ease-out infinite;
}

.audit-live-status.is-paused {
  color: var(--asu-gray-3, #747a7f);
}

.audit-live-status.is-paused .audit-live-dot {
  background: var(--asu-gray-4, #bfc5ca);
  animation: none;
}

@keyframes audit-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(26, 138, 58, 0.5); }
  70% { box-shadow: 0 0 0 0.35rem rgba(26, 138, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 138, 58, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .audit-live-dot { animation: none; }
}

/*
 * The filter bar. Every control is labelled above itself rather than by placeholder alone,
 * because six unlabelled boxes in a row is a puzzle -- particularly the two date inputs, which
 * are indistinguishable without being told which end of the range each one is.
 */
.audit-directory-filters {
  align-items: end;
  border-bottom: 1px solid var(--asu-gray-6);
  display: grid;
  gap: 10px 12px;
  grid-template-columns: minmax(240px, 1fr) 150px 150px 150px 90px 160px auto;
  padding: 16px;
}

/*
 * The one control here that is a switch rather than a value, so it does not get the full-width
 * treatment the inputs above share -- a checkbox stretched to its column is unreadable as a
 * checkbox.
 */
.audit-filter-toggle .audit-filter-choice {
  align-items: center;
  display: flex;
  font-size: .82rem;
  gap: 6px;
  line-height: 1.2;
}

.audit-filter-toggle input[type="checkbox"] { width: auto; }

.audit-filter-label {
  color: var(--asu-gray-2);
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.audit-directory-filters select,
.audit-directory-filters input { width: 100%; }
.audit-directory-filters select:disabled { background: var(--asu-gray-7); color: var(--asu-gray-2); }

.audit-filter-actions {
  display: flex;
  gap: 8px;
}

/*
 * The category pills: eleven tiles with counts, standing in for a dropdown of a hundred and
 * thirty action names. The count is the largest thing on each one because the first useful
 * reading of this page is which kinds of thing there are a lot of.
 */
.audit-facets {
  border-bottom: 1px solid var(--asu-gray-6);
  padding: 16px;
}

.audit-facet-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.audit-facet {
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-left: 4px solid var(--asu-gray-4);
  border-radius: 6px;
  color: inherit;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}

.audit-facet:hover {
  background: var(--asu-white);
  border-color: var(--asu-gray-4);
}

/* Selected reads as selected without relying on the left stripe's hue, for the same reason the
 * pills carry text labels: colour alone is not a state indicator. */
.audit-facet.is-active {
  background: #fff8df;
  border-color: var(--asu-gold);
  box-shadow: inset 0 0 0 1px var(--asu-gold);
}

.audit-facet-count {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}

.audit-facet-label {
  align-items: center;
  display: flex;
  font-weight: 700;
  gap: 6px;
}

.audit-facet-label svg {
  flex: 0 0 auto;
  height: 15px;
  width: 15px;
}

.audit-facet-note {
  font-size: .74rem;
  line-height: 1.3;
}

/* The stripe colours match the pill tones the same categories wear on each row. */
.audit-facet.tone-maroon { border-left-color: var(--asu-maroon); }
.audit-facet.tone-gold { border-left-color: var(--asu-gold); }
.audit-facet.tone-blue { border-left-color: var(--asu-blue); }
.audit-facet.tone-green { border-left-color: var(--asu-green); }

.audit-facet-detail {
  align-items: end;
  display: grid;
  gap: 10px 18px;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  margin-top: 14px;
}

.audit-action-picker select { width: 100%; }

/* What the current filters actually resolved to, in words, so the numbers above are anchored. */
.audit-result-summary {
  color: var(--asu-gray-2);
  margin: 0;
  padding-bottom: 6px;
}

/*
 * Day breaks. The list is reverse chronological and long enough that a timestamp on every row is
 * the only thing telling you where you are; a heading per day says it once.
 */
.audit-day-heading {
  background: var(--asu-gray-7);
  border-top: 1px solid var(--asu-gray-6);
  color: var(--asu-gray-2);
  font-size: .78rem;
  letter-spacing: .04em;
  margin: 0;
  padding: 8px 18px;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.audit-list-item {
  align-items: center;
  border-top: 1px solid var(--asu-gray-6);
  color: inherit;
  display: grid;
  gap: 14px;
  grid-template-columns: 78px minmax(200px, 1.4fr) minmax(150px, 1fr) auto 22px;
  padding: 12px 18px;
  text-decoration: none;
}

.audit-list-item:hover, .audit-list-item.is-selected { background: #fff8df; }
.audit-list-item span { min-width: 0; }
.audit-list-item small { color: var(--asu-gray-2); display: block; margin-top: 3px; overflow-wrap: anywhere; }

.audit-list-time {
  color: var(--asu-gray-2);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.audit-detail-content { padding: 20px 24px 90px; }

.settings-page-heading { background: var(--asu-black); border-top: 5px solid var(--asu-gold); color: var(--asu-white); padding: 24px 28px; }
.settings-page-heading h1, .settings-page-heading p { margin: 0 0 6px; }
.settings-tabs { background: var(--asu-white); border: 1px solid var(--asu-gray-6); display: flex; margin-bottom: 18px; overflow-x: auto; }
.settings-tabs a { border-bottom: 4px solid transparent; color: var(--asu-black); flex: 0 0 auto; font-weight: 700; padding: 15px 18px 11px; text-decoration: none; }
.settings-tabs a:hover, .settings-tabs a.is-active { background: var(--asu-gray-7); border-color: var(--asu-gold); }
.settings-toggle-row { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
.settings-toggle-row form { margin: 0; }
.usage-link { cursor: pointer; }
.campus-usage-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campus-usage-grid button { align-items: flex-start; background: var(--asu-gray-7); border: 1px solid var(--asu-gray-6); border-radius: 4px; cursor: pointer; display: flex; flex-direction: column; min-height: 76px; padding: 12px; text-align: left; }
.campus-usage-grid button:hover { border-color: var(--asu-gold); }
.campus-usage-grid strong { font-size: 1.25rem; }
.campus-usage-list { margin-top: 18px; }
.campus-usage-list > a { align-items: center; border-top: 1px solid var(--asu-gray-6); color: inherit; display: flex; justify-content: space-between; padding: 12px 4px; text-decoration: none; }
.campus-usage-list small { color: var(--asu-gray-2); display: block; margin-top: 3px; }
.event-supporting-workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-attention-list { grid-template-columns: 1fr; }
.compact-attention-list a:nth-child(even) { border-left: 0; }
.compact-attention-list a + a { border-top: 1px solid var(--asu-gray-6); }
.compact-attention-list svg { flex: 0 0 auto; height: 20px; width: 20px; }
.student-balance-stat { grid-template-columns: 1fr; }
.student-balance-callout { align-items: center; background: linear-gradient(90deg, rgb(255 198 39 / 18%), rgb(255 255 255 / 6%)); border: 1px solid rgb(255 198 39 / 48%); border-left: 6px solid var(--asu-gold); border-radius: 8px; display: flex; gap: .8rem; margin-top: 1.25rem; max-width: 34rem; padding: .8rem 1rem; }
.student-balance-number { color: var(--asu-gold); font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1; }
.student-balance-label { color: var(--asu-white); font-size: 1.05rem; font-weight: 800; }
@media (max-width: 820px) { .event-supporting-workspace { grid-template-columns: 1fr; } }

@media (max-width: 760px) {
  .audit-directory-filters { grid-template-columns: 1fr 1fr; }
  .audit-filter-search, .audit-filter-actions { grid-column: 1 / -1; }
  .audit-facet-detail { grid-template-columns: 1fr; }
  .audit-facet-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .audit-facet-note { display: none; }
  /* Stacked, with the row's four cells running down the left and the chevron beside them. */
  .audit-list-item { grid-template-columns: minmax(0, 1fr) auto; }
  .audit-list-item > span { grid-column: 1; }
  .audit-list-item > svg { grid-column: 2; grid-row: 1 / span 4; }
}

@media (max-width: 1050px) {
  .operations-hero-inner,
  .store-operations-hero .operations-hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-action-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-directory-filters {
    grid-template-columns: 1fr auto;
  }

  .user-filter-row {
    grid-column: 1;
  }

  .user-filter-submit {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .user-table-header,
  .user-list-item {
    grid-template-columns: minmax(220px, 1.8fr) minmax(95px, 0.8fr) minmax(120px, 1fr) minmax(90px, 0.8fr) minmax(70px, 0.6fr) 20px;
  }
}

@media (max-width: 760px) {
  .operations-hero-inner {
    min-height: 0;
  }

  .hero-action-dock {
    grid-template-columns: 1fr;
  }

  .hero-campus-switcher {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
  }

  .hero-campus-switcher label {
    grid-column: 1 / -1;
  }

  .hero-campus-switcher select {
    min-width: 0;
    width: 100%;
  }

  .hero-stat-row {
    align-items: flex-start;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-stat-row span + span {
    border-left: 0;
    padding-left: 0;
  }

  .attention-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .attention-list {
    grid-template-columns: 1fr;
  }

  .attention-list a:nth-child(even) {
    border-left: 0;
  }

  .attention-list a + a {
    border-top: 1px solid var(--asu-gray-6);
  }

  .user-directory-filters,
  .user-filter-row {
    grid-template-columns: 1fr;
  }

  .user-filter-submit {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .user-table-header {
    display: none;
  }

  .user-list-item {
    gap: 7px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 16px;
  }

  .user-list-identity {
    grid-column: 1;
  }

  .user-table-cell {
    align-items: center;
    display: flex;
    gap: 5px;
    grid-column: 1;
  }

  .user-table-cell::before {
    color: var(--asu-gray-2);
    content: attr(data-label) ":";
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .user-row-open {
    align-self: center;
    grid-column: 2;
    grid-row: 1 / span 5;
  }

  .user-detail-shell,
  .user-detail-shell.is-open {
    display: none;
    grid-template-columns: 1fr;
  }

  .user-detail-shell.is-open {
    display: grid;
  }

  .user-drawer-backdrop {
    display: none;
  }

  [data-user-detail] {
    grid-column: 1;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--asu-gray-7);
  color: var(--asu-black);
  font-family: var(--font);
  letter-spacing: 0;
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
}

.app-lock-page {
  background:
    linear-gradient(135deg, rgba(140, 29, 64, 0.92), rgba(25, 25, 25, 0.88)),
    var(--asu-gray-7);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-lock-shell {
  align-items: center;
  display: grid;
  flex: 1;
  min-height: 0;
  padding: 24px;
}

.app-lock-panel {
  background: var(--asu-white);
  border-top: 6px solid var(--asu-gold);
  box-shadow: 0 22px 70px rgba(25, 25, 25, 0.26);
  color: var(--asu-black);
  margin: 0 auto;
  max-width: 460px;
  padding: clamp(24px, 4vw, 38px);
  width: min(100%, 460px);
}

.app-lock-panel h1 {
  color: var(--asu-black);
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1;
  margin: 0 0 14px;
}

.app-lock-panel .muted {
  color: var(--asu-gray-2);
}

.app-lock-error {
  background: #fff4f4;
  border-left: 4px solid var(--danger);
  color: var(--danger);
  font-weight: 800;
  margin: 0;
  padding: 10px 12px;
}

a {
  color: inherit;
}

img,
svg,
video {
  height: auto;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.ws2-header {
  background: var(--asu-white);
  box-shadow: 0 8px 24px rgba(25, 25, 25, 0.08);
  position: relative;
  isolation: isolate;
  overflow: visible;
  z-index: 300;
}

.ws2-utility {
  background: #e5e5e5;
  min-height: 26px;
  padding: 0 24px;
}

.ws2-utility nav,
.ws2-main,
.app-nav-inner,
.page-shell,
.hero-inner {
  margin: 0 auto;
  max-width: var(--content);
}

.hero-inner > div {
  min-width: 0;
}

.ws2-utility nav {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: flex-end;
  min-height: 26px;
}

.ws2-utility a {
  font-size: 0.75rem;
  text-decoration: none;
}

.utility-logout {
  color: var(--asu-black);
  font-size: 0.75rem;
  margin: 0;
  text-decoration: none;
}

.utility-role {
  background: var(--asu-gray-6);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  padding: 4px 8px;
}

.utility-role.maroon {
  background: var(--asu-maroon);
  color: var(--asu-white);
}

.utility-role.gold,
.utility-role.preview {
  background: var(--asu-gold);
}

.utility-role.green {
  background: var(--asu-green);
}

.utility-role.blue {
  background: var(--asu-blue);
}

.ws2-main {
  align-items: flex-start;
  display: flex;
  min-height: 105px;
  padding-top: 18px;
}

.preview-toolbar {
  bottom: 18px;
  color: var(--asu-black);
  position: fixed;
  left: 18px;
  z-index: 50;
}

.preview-toggle {
  background: var(--asu-gold);
  border: 1px solid rgba(25, 25, 25, 0.18);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(25, 25, 25, 0.22);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
  min-height: 34px;
  padding: 7px 12px;
}

.preview-popout,
.preview-switcher {
  gap: 8px;
}

.preview-popout {
  background: var(--asu-gold);
  border: 1px solid rgba(25, 25, 25, 0.18);
  border-radius: 8px;
  bottom: calc(100% + 8px);
  box-shadow: 0 16px 40px rgba(25, 25, 25, 0.22);
  min-height: 0;
  display: block;
  padding: 16px;
  position: absolute;
  left: 0;
  width: min(430px, calc(100vw - 36px));
}

.preview-switcher { display: grid; grid-template-columns: 1fr; }
.preview-switcher .student-lookup,
.preview-switcher .student-lookup input { width: 100%; }
.preview-switcher p { line-height: 1.45; margin: 0; }
.preview-switcher .button { justify-self: end; }

.preview-toolbar form {
  margin: 0;
}

.preview-switcher label {
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

.preview-switcher select {
  font-size: 0.92rem;
  min-height: 36px;
  min-width: 150px;
  padding: 6px 32px 6px 10px;
}

.preview-toolbar .button {
  font-size: 0.9rem;
  min-height: 36px;
  padding: 7px 12px;
}

.preview-toolbar strong {
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
}

.mobile-menu-button {
  align-items: center;
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: 999px;
  display: none;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-height: 36px;
  padding: 7px 11px;
}

.hamburger-lines {
  display: grid;
  gap: 4px;
  width: 18px;
}

.hamburger-lines span {
  background: var(--asu-black);
  display: block;
  height: 2px;
  width: 18px;
}

.mobile-menu-label {
  font-size: 0.82rem;
  line-height: 1;
}

body.has-preview-toolbar .page-shell,
body.has-preview-toolbar .footer {
  padding-bottom: 78px;
}

.ws2-logo-link {
  flex: 0 0 auto;
  margin-right: 26px;
}

.ws2-logo-link img {
  display: block;
  height: 72px;
  object-fit: contain;
  width: auto;
}

.ws2-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ws2-title-row {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  min-height: 50px;
}

.ws2-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.ws2-kicker {
  color: var(--asu-gray-2);
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 3px;
}

.ws2-nav {
  align-items: stretch;
  display: flex;
  min-height: 45px;
  overflow: visible;
  white-space: nowrap;
}

.ws2-nav a {
  align-items: center;
  border-bottom: 6px solid transparent;
  display: inline-flex;
  font-size: 0.95rem;
  gap: 6px;
  min-height: 45px;
  padding: 0 11px;
  text-decoration: none;
}

.ws2-nav a:hover,
.ws2-nav a.is-active {
  border-bottom-color: var(--asu-gold);
}

.ws2-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-left: auto;
  padding-bottom: 7px;
}

.app-nav {
  background: var(--asu-white);
  border-top: 1px solid var(--asu-gray-6);
}

.app-nav-inner {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 48px;
}

.campus-switcher {
  align-items: center;
  display: flex;
  gap: 8px;
}

.campus-switcher select {
  border: 1px solid var(--asu-gray-4);
  border-radius: var(--radius);
  min-height: 34px;
  padding: 4px 8px;
}

.button,
.icon-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  display: inline-flex;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  line-height: 1.1;
  min-height: 38px;
  padding: 9px 13px;
  text-decoration: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.button.primary {
  background: var(--asu-gold);
  color: var(--asu-black);
}

.button.maroon {
  background: var(--asu-maroon);
  color: var(--asu-white);
}

.button.secondary,
.icon-button {
  background: var(--asu-white);
  border-color: var(--asu-gray-4);
  color: var(--asu-black);
}

.button.danger {
  background: var(--danger);
  color: var(--asu-white);
}

.hero-band {
  background:
    linear-gradient(90deg, rgba(25, 25, 25, 0.92), rgba(25, 25, 25, 0.82)),
    url("/images/asu-poly-santan-dark-pattern.png") center / cover no-repeat;
  color: var(--asu-white);
  position: relative;
}

.hero-band::after {
  background: linear-gradient(90deg, #303030 0 52%, #2d4a27 52% 68%, #005f73 68% 84%, #6b3f24 84% 100%);
  bottom: 0;
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  right: 0;
}

.hero-inner {
  align-items: center;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 280px;
  padding: 56px 32px 62px;
}

.hero-inner h1 {
  display: grid;
  font-size: 3.1rem;
  line-height: 1.08;
  margin: 10px 0 18px;
}

.hero-title-line {
  background: var(--asu-gold);
  box-decoration-break: clone;
  color: var(--asu-black);
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 0 0.16em 0.05em;
  width: fit-content;
  -webkit-box-decoration-break: clone;
}

.eyebrow {
  color: var(--asu-gold);
  font-size: 0.78rem;
  font-weight: 800;
  margin: 0;
}

.hero-inner p {
  color: var(--asu-white);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  max-width: 720px;
}

.metric-tile {
  background: var(--asu-white);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
  color: var(--asu-black);
  min-width: 210px;
  padding: 22px;
}

.metric-tile strong {
  display: block;
  font-size: 2.8rem;
  line-height: 1;
}

.metric-tile span {
  color: var(--asu-gray-2);
  display: block;
  font-weight: 800;
  margin-top: 8px;
}

.page-shell {
  padding: 28px 32px 64px;
}

.grid {
  display: grid;
  gap: 20px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.sidebar-layout {
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
}

.panel,
.card {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}

.panel {
  padding: 22px;
}

.card {
  padding: 18px;
}

.card.gold-top,
.panel.gold-top {
  border-top: 5px solid var(--asu-gold);
}

.card.maroon-left {
  border-left: 5px solid var(--asu-maroon);
}

.store-layout {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.store-product-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.store-card {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
}

.store-card-media {
  aspect-ratio: 4 / 3;
  background: var(--asu-gray-7);
  display: block;
  object-fit: cover;
  width: 100%;
}

.store-card-media--placeholder {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 198, 39, 0.95), rgba(255, 255, 255, 0.78)),
    url("/images/asu-poly-santan-dark-pattern.png") center / cover no-repeat;
  display: flex;
  justify-content: center;
}

.store-card-media--placeholder span {
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(25, 25, 25, 0.14);
  border-radius: var(--radius);
  color: var(--asu-maroon);
  display: inline-flex;
  font-size: 2rem;
  font-weight: 800;
  height: 72px;
  justify-content: center;
  width: 72px;
}

.store-card-body {
  padding: 16px 16px 8px;
}

.store-card-body h2 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.store-card-body p {
  line-height: 1.42;
  margin: 0;
}

.store-card-footer {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

.store-card-footer form {
  margin: 0;
}

.store-card-footer .button {
  min-height: 44px;
  width: 100%;
}

.store-card-footer .button.primary {
  box-shadow: 0 8px 16px rgba(25, 25, 25, 0.08);
}

.store-card-footer .button.primary:hover {
  background: #ffd75a;
  box-shadow: 0 12px 24px rgba(25, 25, 25, 0.16);
  transform: translateY(-2px);
}

.store-card-footer .button.primary:active {
  box-shadow: 0 6px 12px rgba(25, 25, 25, 0.12);
  transform: translateY(0);
}

.store-card-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.store-cart-summary {
  position: sticky;
  top: 18px;
}

.store-image-preview {
  align-items: center;
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  display: flex;
  gap: 12px;
  padding: 10px;
}

.store-image-preview img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  object-fit: cover;
  width: 92px;
}

.store-item-cell {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 58px minmax(0, 1fr);
}

.store-item-thumb {
  aspect-ratio: 1;
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  object-fit: cover;
  width: 58px;
}

.store-item-thumb--empty {
  display: inline-block;
}

.checkout-layout {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.checkout-heading {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.checkout-heading h1,
.checkout-heading p {
  margin-bottom: 0;
}

.checkout-balance {
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  flex: 0 0 auto;
  min-width: 210px;
  padding: 12px 14px;
}

.checkout-balance span,
.checkout-balance strong {
  display: block;
}

.checkout-balance span {
  color: var(--asu-gray-2);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.checkout-balance strong {
  font-size: 1.3rem;
  margin-top: 2px;
}

.checkout-balance-inline {
  margin: 12px 0 4px;
  width: fit-content;
}

.checkout-summary {
  min-width: 0;
}

.checkout-actions {
  position: sticky;
  top: 18px;
}

/*
 * Buttons in this column stack, so an icon at its natural 24px makes one of them taller than
 * its neighbours and the column reads as ragged. Matched to the label instead.
 */
.checkout-actions .button svg {
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

/*
 * A sidebar panel whose contents are a column of choices, all one width.
 *
 * Buttons are inline-flex, so a panel that simply lists three of them sizes each to its own label
 * and leaves the column ragged -- which is how the event request page read with a QR link, a PDF
 * download and a way back stacked in it: three differently sized objects rather than three
 * choices. Stretching them to the panel also puts the icons in a column instead of at three
 * different indents.
 */
.action-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-stack > form {
  margin: 0;
}

.action-stack .button {
  justify-content: flex-start;
  width: 100%;
}

/*
 * A line of explanation under an action, tied to the button above it rather than floating as its
 * own paragraph in the gap.
 */
.action-stack-note {
  font-size: 0.82rem;
  margin: -4px 0 2px;
}

.online-checkout-notice {
  align-items: center;
  border: 1px solid var(--asu-gray-6);
  border-left: 6px solid var(--asu-gold);
  border-radius: var(--radius);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 18px 20px;
}

.online-checkout-notice.is-open {
  border-left-color: #2e7d32;
}

.online-checkout-notice h1 {
  font-size: 1.35rem;
  margin: 8px 0 3px;
}

.online-checkout-notice p,
.online-inventory-source {
  margin: 0;
}

.online-inventory-source {
  flex: 0 0 auto;
}

.online-checkout-inline-status {
  background: #f1f8f2;
  border-left: 4px solid #2e7d32;
  margin: 0;
  padding: 10px 12px;
}

.online-checkout-closed {
  display: grid;
  gap: 12px;
}

.online-checkout-closed h2,
.online-checkout-closed p {
  margin: 0;
}

.cart-item-list {
  border-top: 1px solid var(--asu-gray-6);
  display: grid;
  margin-top: 16px;
}

.cart-item-row {
  align-items: center;
  border-bottom: 1px solid var(--asu-gray-6);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 0;
}

.cart-item-main {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 72px minmax(0, 1fr);
}

.cart-item-thumb {
  aspect-ratio: 1;
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  object-fit: cover;
  width: 72px;
}

.cart-item-thumb--placeholder {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 198, 39, 0.9), rgba(255, 255, 255, 0.78)),
    url("/images/asu-poly-santan-dark-pattern.png") center / cover no-repeat;
  color: var(--asu-maroon);
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
}

.cart-item-row strong,
.cart-item-row span {
  display: block;
}

.cart-item-row-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.cart-item-row-actions form {
  margin: 0;
}

.cart-total {
  align-items: center;
  display: flex;
  font-size: 1.1rem;
  gap: 14px;
  justify-content: flex-end;
  padding-top: 16px;
}

.cart-total span {
  color: var(--asu-gray-2);
  font-weight: 800;
}

.panel h2,
.card h2,
.card h3,
.panel h3 {
  line-height: 1.2;
  margin: 0 0 14px;
  overflow-wrap: anywhere;
}

.muted {
  color: var(--asu-gray-2);
}

.form-grid {
  display: grid;
  gap: 14px;
}

.sso-options {
  display: grid;
  gap: 10px;
}

.sso-options-primary .button {
  justify-content: center;
  width: 100%;
}

.local-login-fallback {
  border-top: 1px solid var(--asu-gray-6);
  padding-top: 12px;
}

.local-login-fallback summary {
  color: var(--asu-gray-2);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 800;
}

.local-login-fallback[open] summary {
  margin-bottom: 12px;
}

.sso-divider {
  align-items: center;
  color: var(--asu-gray-2);
  display: grid;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 10px;
  grid-template-columns: 1fr auto 1fr;
  text-transform: uppercase;
}

.sso-divider::before,
.sso-divider::after {
  background: var(--asu-gray-6);
  content: "";
  height: 1px;
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

label.field {
  color: var(--asu-gray-2);
  display: grid;
  font-size: 0.88rem;
  font-weight: 800;
  gap: 6px;
}

input,
select,
textarea {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-4);
  border-radius: var(--radius);
  color: var(--asu-black);
  min-height: 42px;
  padding: 9px 11px;
  width: 100%;
}

textarea {
  line-height: 1.45;
  min-height: 96px;
  resize: vertical;
}

.check-row {
  align-items: center;
  color: var(--asu-gray-2);
  display: flex;
  font-weight: 700;
  gap: 10px;
}

.check-row input {
  accent-color: var(--asu-maroon);
  height: 20px;
  min-height: 0;
  width: 20px;
}

/*
 * Checkboxes and radios have to opt out of the text-input sizing above: min-height 42px plus
 * width 100% and a border turns a checkbox into a large empty box. .check-row did this
 * locally, so any form using a different class inherited the bug -- which is exactly how the
 * support case reply form ended up with a 42px checkbox floating above its label.
 */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--asu-maroon);
  height: 20px;
  min-height: 0;
  padding: 0;
  width: 20px;
}

.checkbox-field {
  align-items: center;
  color: var(--asu-gray-2);
  display: flex;
  font-weight: 700;
  gap: 10px;
}

.table-wrap {
  overflow-x: auto;
}

.table-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.table-actions form {
  margin: 0;
}

.table-actions .button {
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  min-width: 780px;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--asu-gray-6);
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

/*
 * break-word, not anywhere.
 *
 * Both stop a long unbroken value -- an email, a token, a URL -- from overflowing its cell,
 * which is why one of them belongs here. They differ in what they tell the layout engine
 * about the minimum width: anywhere collapses it to a single character, so the table
 * algorithm treats every column as shrinkable to nothing and squeezes wide tables until
 * words split down the middle. break-word leaves the intrinsic minimum at the longest word,
 * so a column still refuses to go narrower than its content really needs.
 */
td {
  overflow-wrap: break-word;
}

/*
 * Headers never break inside a word. Every one of them is a short label we wrote, so there is
 * no long-value case to defend against, and "Redemptions" rendering as "Redemp" over "tions"
 * is the only thing the inherited rule ever achieved here. nowrap keeps a header on one line
 * and lets .table-wrap scroll instead, which is what that container is for.
 */
th {
  color: var(--asu-gray-2);
  font-size: 0.84rem;
  overflow-wrap: normal;
  white-space: nowrap;
}

.delta-positive {
  color: #2e7d32;
  font-weight: 800;
}

.delta-negative {
  color: var(--danger);
  font-weight: 800;
}

.pill {
  background: var(--asu-gray-6);
  border-radius: 999px;
  color: var(--asu-black);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 9px;
}

.pill.gold {
  background: var(--asu-gold);
}

.pill.maroon {
  background: var(--asu-maroon);
  color: var(--asu-white);
}

.pill.green {
  background: var(--asu-green);
}

.pill.blue {
  background: var(--asu-blue);
}

.qr-unavailable {
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  margin: 18px auto;
  max-width: 420px;
  padding: 24px;
}

.flash {
  border-left: 5px solid var(--asu-gold);
  margin: 18px auto 0;
  max-width: var(--content);
  padding: 12px 16px;
}

.flash.success {
  background: #f7fff2;
  border-left-color: var(--asu-green);
}

.flash.error {
  background: #fff4f4;
  border-left-color: var(--danger);
}

.toast-region {
  bottom: 24px;
  display: grid;
  justify-items: end;
  max-width: min(440px, calc(100vw - 28px));
  pointer-events: none;
  position: fixed;
  right: 24px;
  width: 100%;
  z-index: 1200;
}

body.has-preview-toolbar .toast-region { bottom: 24px; }

.flash.app-toast {
  align-items: start;
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-5);
  border-left-width: 5px;
  box-shadow: 0 14px 38px rgba(25, 25, 25, 0.22);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0;
  max-width: 440px;
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease;
  width: fit-content;
}

.app-toast-message {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  line-height: 1.4;
  min-width: 0;
}

.app-toast-message span {
  overflow-wrap: anywhere;
}

.app-toast-close {
  flex: 0 0 32px;
  height: 32px;
  min-height: 32px;
  width: 32px;
}

.app-toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
}

.qr-image {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  display: block;
  max-width: 330px;
  padding: 14px;
  width: 100%;
}

.branded-qr {
  display: grid;
  margin: 0 auto 18px;
  max-width: 330px;
  place-items: center;
  position: relative;
  width: 100%;
}

.branded-qr .qr-image {
  max-width: none;
}

.branded-qr-badge {
  align-items: center;
  background: var(--asu-maroon);
  border: 5px solid var(--asu-white);
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
  color: var(--asu-gold);
  display: flex;
  font-size: clamp(.72rem, 2.7vw, 1rem);
  font-weight: 900;
  height: 14%;
  justify-content: center;
  left: 50%;
  letter-spacing: -.04em;
  min-height: 38px;
  min-width: 38px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14%;
}

.scanner-box {
  background: #fff;
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  overflow: hidden;
}

.scan-page {
  max-width: 760px;
}

.scan-action-panel {
  display: grid;
  gap: 16px;
}

.scan-action-panel h1,
.scan-action-panel h2,
.scan-action-panel p {
  margin-bottom: 0;
}

.scan-primary-action {
  width: 100%;
}

.scan-camera-view {
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  overflow: hidden;
}

.scan-result {
  border-left: 7px solid var(--asu-maroon);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 18px 20px;
  position: relative;
}

.scan-result h2 {
  font-size: 1.35rem;
  margin: 0 0 6px;
}

.scan-result p {
  font-size: 1.02rem;
  line-height: 1.42;
  margin: 0;
}

.scan-result--success {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-left-color: var(--asu-gold);
  box-shadow: 0 16px 36px rgba(25, 25, 25, 0.12);
}

.scan-result--error {
  background: #fff6f6;
  border: 1px solid rgba(183, 42, 42, 0.24);
  border-left-color: var(--danger);
}

.scan-result--success::before {
  background: var(--asu-gold);
  content: "";
  height: 5px;
  inset: 0 0 auto;
  position: absolute;
}

.scan-result--error h2 {
  color: var(--danger);
}

.redeem-celebration {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.redeem-kicker {
  color: var(--asu-maroon);
  font-size: 1.32rem;
  font-weight: 900;
}

.redeem-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.redeem-points {
  color: var(--asu-maroon);
  font-size: 4rem;
  font-weight: 900;
  line-height: 0.9;
}

.redeem-label {
  color: var(--asu-black);
  font-size: 1.3rem;
  font-weight: 800;
}

.redeem-details {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 16px;
  max-width: 380px;
}

.redeem-details > div {
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-left: 4px solid var(--asu-gold);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.redeem-details span,
.redeem-details strong {
  display: block;
}

.redeem-details span {
  color: var(--asu-gray-2);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.redeem-details strong {
  font-size: 1.05rem;
  margin-top: 3px;
}

.scan-result--success p {
  color: var(--asu-gray-2);
  font-weight: 700;
  margin-top: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  .scan-result--success {
    animation: redeem-pop 0.36s ease-out;
  }
}

@keyframes redeem-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.progress-bar {
  background: var(--asu-gray-6);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.progress-bar span {
  background: var(--asu-gold);
  display: block;
  height: 100%;
}

.staff-issue-page {
  display: grid;
  gap: 20px;
}

.staff-issue-hero {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.staff-issue-hero h1 {
  line-height: 1.1;
  margin: 4px 0 8px;
}

.staff-issue-hero p {
  margin: 0;
  max-width: 720px;
}

.student-card-list {
  display: grid;
  gap: 12px;
}

.student-result-card {
  align-items: center;
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-left: 5px solid var(--asu-maroon);
  border-radius: var(--radius);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px;
}

.student-result-card strong,
.student-result-card span,
.student-result-card small {
  display: block;
}

.student-result-card span {
  color: var(--asu-gray-2);
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.student-result-card small {
  color: var(--asu-gray);
  margin-top: 4px;
}

.modal-backdrop {
  align-items: center;
  background: rgba(25, 25, 25, 0.7);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: var(--layer-modal);
}

.modal-backdrop.is-open {
  display: flex;
}

body.modal-open {
  overflow: hidden;
}

.sensitive-evidence-card {
  margin: 24px 0;
  padding: 18px;
  border: 1px solid #e0c36d;
  border-left: 4px solid var(--maroon);
  border-radius: 10px;
  background: #fffaf0;
}

.sensitive-evidence-card .form-grid { gap: 10px; }
.revealed-evidence-value { display: block; margin-top: 8px; overflow-wrap: anywhere; user-select: all; }

.issue-dialog {
  background: var(--asu-white);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  color: var(--asu-black);
  max-height: calc(100vh - 36px);
  max-width: 520px;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  width: min(100%, 520px);
}

.issue-dialog h2 {
  line-height: 1.15;
  margin: 4px 0 16px;
}

.store-modal {
  max-width: 760px;
  width: min(100%, 760px);
}

.store-modal-wide {
  max-width: 980px;
  width: min(100%, 980px);
}

.admin-modal {
  max-width: 980px;
  width: min(100%, 980px);
}

.admin-record-modal {
  max-width: 1080px;
  width: min(100%, 1080px);
}

.tab-list,
.record-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tab-list .is-active,
.record-filter-list .is-active {
  background: var(--asu-gold);
  border-color: var(--asu-gold);
}

.record-group {
  border-top: 1px solid var(--asu-gray-6);
  padding-top: 14px;
}

.compact-table {
  font-size: 0.9rem;
  min-width: 620px;
}

.admin-data-table {
  font-size: 0.92rem;
  min-width: 900px;
  table-layout: fixed;
}

.admin-data-table th,
.admin-data-table td {
  padding: 11px 10px;
  vertical-align: top;
}

.users-table th:nth-child(1) { width: 30%; }
.users-table th:nth-child(2) { width: 8%; }
.users-table th:nth-child(3) { width: 11%; }
.users-table th:nth-child(4) { width: 8%; }
.users-table th:nth-child(5) { width: 35%; }
.users-table th:nth-child(6) { width: 8%; }

.event-table th:nth-child(1) { width: 36%; }
.event-table th:nth-child(2) { width: 9%; }
.event-table th:nth-child(3) { width: 15%; }
.event-table th:nth-child(4) { width: 12%; }
.event-table th:nth-child(5) { width: 28%; }

.event-table-wide {
  min-width: 760px;
}

.event-table-wide th:nth-child(1) { width: 44%; }
.event-table-wide th:nth-child(2) { width: 10%; }
.event-table-wide th:nth-child(3) { width: 16%; }
.event-table-wide th:nth-child(4) { width: 12%; }
.event-table-wide th:nth-child(5) { width: 18%; }

.event-request-table th:nth-child(1) { width: 28%; }
.event-request-table th:nth-child(2) { width: 30%; }
.event-request-table th:nth-child(3) { width: 12%; }
.event-request-table th:nth-child(4) { width: 8%; }
.event-request-table th:nth-child(5) { width: 10%; }
.event-request-table th:nth-child(6) { width: 8%; }
.event-request-table th:nth-child(7) { width: 8%; }

.nowrap-cell {
  white-space: nowrap;
}

.compact-button {
  font-size: 0.86rem;
  line-height: 1.1;
  min-height: 32px;
  padding: 6px 10px;
}

.compact-actions {
  align-items: flex-start;
  gap: 6px;
}

.compact-actions .button,
.compact-actions form {
  flex: 0 0 auto;
}

.admin-hero-actions {
  align-items: center;
  justify-content: flex-end;
  max-width: 460px;
}

.admin-hero-actions .button {
  min-width: 0;
}

.compact-pill,
.flag-pill,
.audit-action-pill {
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
  padding: 5px 8px;
  white-space: nowrap;
}

.flag-list {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.flag-pill {
  background: #f0f0f0;
}

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

.admin-users-page {
  display: grid;
  gap: 18px;
}

.admin-page-toolbar {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.admin-page-toolbar h1,
.admin-page-toolbar p {
  margin: 0;
}

.admin-page-toolbar h1 {
  font-size: 1.65rem;
}

.toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.import-error-band {
  background: #fff3f3;
  border-left: 4px solid var(--asu-maroon);
  padding: 14px 18px;
}

.import-error-band h2,
.import-error-band p {
  margin: 0 0 6px;
}

.user-workspace {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  height: clamp(560px, calc(100vh - 300px), 760px);
  min-height: 560px;
}

.user-directory {
  border-right: 1px solid var(--asu-gray-6);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

[data-user-results] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.user-directory-filters {
  border-bottom: 1px solid var(--asu-gray-6);
  display: grid;
  gap: 10px;
  padding: 16px;
}

.user-search-field input,
.user-filter-row select {
  min-height: 40px;
  width: 100%;
}

.user-filter-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-filter-row label:nth-child(3) {
  grid-column: 1 / -1;
}

.user-filter-submit {
  justify-self: start;
}

.user-list-summary {
  border-bottom: 1px solid var(--asu-gray-6);
  color: var(--asu-gray-2);
  font-size: 0.82rem;
  padding: 9px 16px;
}

.user-list {
  display: grid;
}

.user-list-item {
  color: inherit;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  text-decoration: none;
}

.user-list-item + .user-list-item {
  border-top: 1px solid var(--asu-gray-6);
}

.user-list-item:hover,
.user-list-item:focus-visible {
  background: #f7f7f7;
}

.user-list-item.is-selected {
  background: #fff7dc;
  box-shadow: inset 4px 0 0 var(--asu-gold);
}

.user-list-identity,
.user-list-meta {
  display: flex;
  min-width: 0;
}

.user-list-identity {
  flex-direction: column;
}

.user-list-identity strong,
.user-list-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-list-identity span {
  color: var(--asu-gray-2);
  font-size: 0.8rem;
}

.user-list-meta {
  align-items: center;
  color: var(--asu-gray-2);
  flex-wrap: wrap;
  font-size: 0.76rem;
  gap: 6px 10px;
}

.status-dot-label {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  white-space: nowrap;
}

.status-dot-label::before {
  background: #777;
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}

.status-dot-label.is-active::before {
  background: #2e7d32;
}

.status-dot-label.is-inactive::before {
  background: #b3261e;
}

.user-list-empty,
.user-list-error {
  display: grid;
  gap: 5px;
  padding: 28px 16px;
}

.user-list-pagination {
  align-items: center;
  border-top: 1px solid var(--asu-gray-6);
  display: flex;
  font-size: 0.8rem;
  gap: 8px;
  justify-content: space-between;
  padding: 12px 16px;
}

[data-user-results].is-loading,
.user-detail-shell.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.user-detail-shell {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

.user-detail-empty {
  left: 50%;
  max-width: 360px;
  position: absolute;
  text-align: center;
  top: 42%;
  transform: translate(-50%, -50%);
  width: calc(100% - 48px);
}

.user-detail-empty h2,
.user-detail-empty p {
  margin: 0 0 8px;
}

.user-detail {
  min-width: 0;
}

.user-detail-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--asu-gray-6);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 20px 24px 16px;
}

.user-detail-header h2,
.user-detail-header p {
  margin: 0;
}

.user-detail-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.icon-only-button.user-drawer-close {
  display: inline-flex;
  flex: 0 0 auto;
  order: 2;
}

.icon-only-button svg {
  height: 19px;
  pointer-events: none;
  stroke-width: 2.25;
  width: 19px;
}

/*
 * Six tabs do not fit a phone, and a plain flex row simply ran them off the right edge with no
 * way to reach the last two. The strip scrolls sideways instead of wrapping: wrapping would push
 * the sticky drawer header taller on exactly the screens with the least room, and a two-line tab
 * strip reads as two groups rather than one. Scrolling is applied at every width rather than
 * behind a breakpoint so adding a seventh tab cannot reintroduce the overflow on a laptop.
 */
.user-detail-tabs {
  border-bottom: 1px solid var(--asu-gray-6);
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 24px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* The strip is short and self-evidently scrollable by its cut-off edge; a bar would crowd it. */
.user-detail-tabs::-webkit-scrollbar {
  display: none;
}

.user-detail-tab {
  background: transparent;
  border: 0;
  border-bottom: 4px solid transparent;
  color: var(--asu-gray-1);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-weight: 700;
  min-height: 48px;
  padding: 0;
  white-space: nowrap;
}

.user-detail-tab.is-active {
  border-color: var(--asu-gold);
}

.user-detail-form,
.user-activity {
  display: grid;
}

.user-form-section {
  display: grid;
  gap: 14px;
  padding: 22px 24px;
}

.user-form-section + .user-form-section {
  border-top: 1px solid var(--asu-gray-6);
}

.user-form-section-heading h3,
.user-form-section-heading p {
  margin: 0 0 3px;
}

.permission-grid {
  display: grid;
  gap: 10px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * A permission and its explanation. The checkbox keeps its own line so the two columns of the
 * grid still align; the explanation sits underneath and pushes the row taller only while it is
 * open, so a form of twenty-two permissions stays scannable by default.
 */
.permission-row {
  display: grid;
  gap: 4px;
}

.permission-help > summary {
  color: var(--asu-gray-3);
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  padding: 2px 0 2px 30px;
}

/* Safari renders a disclosure triangle from a pseudo-element rather than list-style. */
.permission-help > summary::-webkit-details-marker {
  display: none;
}

.permission-help > summary:hover {
  color: var(--asu-maroon);
  text-decoration: underline;
}

.permission-help > summary:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--asu-maroon);
  outline-offset: 2px;
}

.permission-help[open] > summary {
  color: var(--asu-maroon);
}

.permission-help-body {
  background: #f7f7f7;
  border-left: 3px solid var(--asu-gold);
  color: var(--asu-gray-2);
  display: grid;
  font-size: 13px;
  gap: 6px;
  line-height: 1.5;
  margin: 4px 0 6px 30px;
  padding: 10px 12px;
}

.permission-help-body p {
  margin: 0;
}

.permission-help-body strong {
  color: var(--asu-gray-1);
}

.permission-help-impact {
  border-top: 1px solid var(--asu-gray-6);
  padding-top: 6px;
}

@media (max-width: 640px) {
  /* One permission per line: two columns leaves no room for the explanation to read as prose. */
  .permission-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.user-form-actions {
  background: #f7f7f7;
  border-top: 1px solid var(--asu-gray-6);
  bottom: 0;
  padding: 14px 24px;
  position: sticky;
  z-index: 2;
}

/*
 * Balance and the control that changes it read as one unit. Previously the balance was a
 * full-bleed gray band and the form sat loose beneath it, so the top of the tab looked
 * assembled from unrelated parts.
 */
.balance-card {
  border: 1px solid var(--asu-gray-6);
  border-radius: .5rem;
  display: grid;
  gap: 16px;
  margin: 22px 24px 0;
  min-width: 0;
  overflow: hidden;
}

.balance-card-figure {
  background: var(--asu-gray-7);
  border-bottom: 1px solid var(--asu-gray-6);
  display: grid;
  gap: 2px;
  padding: 14px 16px;
}

.balance-card-figure strong {
  font-size: 1.55rem;
  line-height: 1.15;
}

.balance-adjust-form {
  display: grid;
  gap: 12px;
  margin: 0;
  min-width: 0;
  padding: 0 16px 16px;
}

.balance-adjust-heading h3,
.balance-adjust-heading p {
  margin: 0;
}

.balance-adjust-heading {
  display: grid;
  gap: 2px;
}

/* Amount stays narrow, reason takes the slack, and the button sits on the same baseline. */
.balance-adjust-fields {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(110px, .3fr) minmax(0, 1fr) auto;
  min-width: 0;
}

.user-activity-records,
.user-records-section {
  display: grid;
  gap: 14px;
  padding: 22px 24px;
}

.user-activity-records > h3 {
  margin: 0;
}

.user-activity-records,
.user-record-root,
.user-record-groups,
.record-group {
  min-width: 0;
}

.record-filter-control {
  max-width: 360px;
}

/*
 * Card rows matching the email history, rather than the flat hairline list these used to be.
 * The card is the <details> element so an expanded entry keeps its border around the body.
 */
.activity-entry-list {
  display: grid;
  gap: .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.activity-entry-list li {
  display: grid;
  min-width: 0;
}

.activity-entry-details {
  border: 1px solid #ddd;
  border-left: 4px solid var(--asu-maroon);
  border-radius: .4rem;
  min-width: 0;
}

.activity-entry-list strong,
.activity-entry-list span {
  overflow-wrap: anywhere;
}

.activity-entry-details summary {
  align-items: center;
  border-radius: .3rem;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: .75rem;
}

.activity-entry-details summary:hover {
  background: #fff8df;
}

/* The default marker would sit outside the card's padding and break the row alignment. */
.activity-entry-details summary::-webkit-details-marker {
  display: none;
}

.activity-entry-details summary {
  list-style: none;
}

.activity-entry-summary {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.activity-entry-summary .muted {
  color: #555;
}

.activity-entry-expand-label {
  color: var(--asu-maroon);
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.activity-entry-details[open] .activity-entry-expand-label {
  font-size: 0;
}

.activity-entry-details[open] .activity-entry-expand-label::after {
  content: "Hide details";
  font-size: .78rem;
}

.activity-entry-detail-body {
  background: var(--asu-gray-7);
  border-top: 1px solid #ddd;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 12px;
}

.activity-entry-detail-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.activity-entry-detail-list > div {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr);
}

.activity-entry-detail-list dt {
  font-weight: 800;
}

.activity-entry-detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.friendly-audit-summary {
  margin-top: 0;
}

.friendly-audit-change {
  border-top: 1px solid var(--asu-gray-5);
  margin-top: 12px;
  padding-top: 12px;
}

.friendly-audit-change h4 {
  margin: 0 0 8px;
}

.audit-diff-table th[scope="row"] {
  font-weight: 600;
  white-space: nowrap;
}

.audit-diff-table td {
  vertical-align: top;
}

.audit-diff-table tr.audit-diff-changed {
  background: rgba(255, 198, 39, 0.16);
}

.audit-diff-table tr.audit-diff-changed td {
  font-weight: 600;
}

.technical-audit-details {
  border-top: 1px solid var(--asu-gray-5);
  margin-top: 20px;
  padding-top: 14px;
}

.technical-audit-details summary {
  color: var(--asu-maroon);
  cursor: pointer;
  font-weight: 800;
}

/*
 * The "nothing here" line, wherever a list is empty. It had no styling at all, so it rendered as
 * a stray left-aligned sentence where a panel of results had been. Centred and given room, it
 * reads as an answer to the question the page was asked.
 */
.empty-state {
  color: var(--asu-gray-2);
  margin: 0;
  padding: 2.25rem 1rem;
  text-align: center;
}

.activity-empty-state {
  margin: 0;
}

.user-activity-loading,
.user-detail-error {
  padding: 28px 24px;
}

.audit-summary {
  color: var(--asu-gray-2);
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagination-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}

.button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.detail-list {
  display: grid;
  gap: 10px 20px;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0 0 20px;
}

.detail-list dt {
  color: var(--asu-gray-2);
  font-weight: 800;
}

.detail-list dd {
  margin: 0;
}

.json-detail {
  background: #f7f7f7;
  border: 1px solid var(--asu-gray-6);
  border-radius: 8px;
  font-size: 0.86rem;
  max-height: 58vh;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.agreement-version-detail .metric-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 20px;
}

.agreement-version-detail .metric-card {
  background: #fafafa;
  border: 1px solid var(--asu-gray-6);
  border-radius: 8px;
  padding: 14px;
}

.agreement-version-detail .metric-card span {
  color: var(--asu-gray-2);
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.agreement-version-detail .metric-card strong,
.hash-text,
.hash-chip {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.agreement-version-detail .metric-card.wide {
  grid-column: span 2;
}

.agreement-body-preview,
.compact-json {
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
}

.agreement-body-preview {
  background: #fafafa;
  border: 1px solid var(--asu-gray-6);
  border-radius: 8px;
  line-height: 1.6;
  margin: 0;
  padding: 16px;
}

/*
 * Signatures per role, as tiles that are also the filter for the list below them.
 *
 * Deliberately not .metric-card: those are read-only figures, and these are controls. The hover
 * and active treatments say so, and the count is the largest thing on the tile because the count
 * against its population is the entire question -- "have the staff signed yet" is answered by
 * looking, not by reading a table.
 */
.signer-role-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin-bottom: 18px;
}

.signer-role-tile {
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: 6px;
  color: inherit;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}

.signer-role-tile:hover {
  background: var(--asu-white);
  border-color: var(--asu-gray-4);
}

.signer-role-tile.is-active {
  background: #fff8df;
  border-color: var(--asu-gold);
  box-shadow: inset 0 0 0 1px var(--asu-gold);
}

/* A role with nothing outstanding is the one case where nothing needs doing, so it says so. */
.signer-role-tile.is-complete .signer-role-note {
  color: #4a7a12;
  font-weight: 700;
}

.signer-role-count {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.signer-role-name {
  font-weight: 700;
}

.signer-role-note {
  font-size: .76rem;
  line-height: 1.3;
}

.agreement-version-modal textarea {
  min-height: 260px;
}

.compact-filter {
  flex-wrap: nowrap;
}

.event-map {
  border: 1px solid var(--asu-gray-6);
  border-radius: 8px;
  height: 260px;
}

.row-action-menu {
  position: relative;
  width: fit-content;
}

.row-action-menu summary {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-4);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
  list-style: none;
  min-height: 32px;
  padding: 6px 10px;
  white-space: nowrap;
}

.row-action-menu summary::-webkit-details-marker {
  display: none;
}

.row-action-menu[open] > div {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-5);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
  min-width: 150px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
}

.row-action-menu form {
  margin: 0;
}

.qr-modal-dialog {
  height: min(760px, calc(100dvh - 32px));
  max-width: min(720px, calc(100vw - 36px));
  padding: 12px;
  width: min(720px, calc(100vw - 36px));
}

.qr-modal-dialog iframe {
  border: 0;
  border-radius: 8px;
  display: block;
  height: 100%;
  width: 100%;
}

.qr-modal-backdrop {
  overflow: hidden;
}

.variant-editor {
  display: grid;
  gap: 10px;
}

.variant-row {
  align-items: end;
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(130px, 1.2fr) minmax(110px, 1fr) 90px 90px 90px 110px 90px;
  padding: 10px;
}

.variant-row .check-row {
  align-items: center;
  min-height: 42px;
}

.field-helper {
  color: var(--asu-gray-2);
  font-size: 0.84rem;
  font-weight: 700;
  margin: -6px 0 0;
}

/* Campus heading over each block of front desks in the activity office picker. Only rendered
   when the picker spans more than one campus, so a single-campus form looks exactly as before.
   The vertical rhythm lives on .office-campus-group below rather than here, so the heading sits
   with the offices it labels instead of drifting toward the group above it. */
/*
 * The line under the decision note on the missed-scan list, saying the student is sent what is
 * typed above it. Styled like .field-helper but inside the label rather than after it, because the
 * warning has to be read before the field is filled in, not after.
 */
.decision-hint {
  color: var(--asu-gray-2);
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  margin-top: 4px;
}

/*
 * What a declined scan carries in its Decision cell: when, who, and the sentence the student was
 * sent. Narrow and quiet, because it is evidence somebody comes back to rather than something to
 * read down the column.
 */
.decision-note {
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 4px;
  max-width: 34ch;
}

/*
 * Reopen sits in its own form per row, so several of them follow the batch form as siblings. Laid
 * out as a wrapping row rather than stacked, and spaced off the table above.
 */
.inline-decision-form {
  display: inline-block;
  margin: 10px 8px 0 0;
}

.field-subheading {
  color: var(--asu-gray-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.office-campus-group + .office-campus-group {
  margin-top: 18px;
}

/* The checkbox and its help bubble read as one control, so they share a line. The gap below
   separates the option from the first campus heading, which otherwise collided with it. */
.spans-campuses-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 18px;
}

.spans-campuses-row .check-row {
  margin: 0;
}

.admin-settings-page {
  display: grid;
  gap: 20px;
}

.admin-settings-page h1,
.admin-settings-page h2,
.admin-settings-page h3,
.admin-settings-page p {
  margin-bottom: 0;
}

.settings-group {
  display: grid;
  gap: 18px;
}

.settings-group-heading {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.settings-field small {
  color: var(--asu-gray-2);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

.settings-save-bar {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.settings-save-bar .button {
  width: 100%;
}

.settings-action-grid .card {
  display: grid;
  gap: 12px;
}

.settings-management-section {
  display: grid;
  gap: 18px;
  scroll-margin-top: 20px;
}

.management-create-row {
  align-items: end;
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.8fr) auto;
  padding: 14px;
}

.management-create-row-wide {
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.2fr) minmax(90px, 0.45fr) minmax(90px, 0.45fr) auto;
}

.management-table input,
.management-table select {
  min-height: 38px;
  padding: 7px 9px;
}

.management-table .button {
  min-height: 36px;
  white-space: nowrap;
}

.management-usage {
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  margin: 0 4px 5px 0;
  padding: 5px 7px;
  white-space: nowrap;
}

.section-heading-row {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

/*
 * Several actions in one section heading, wrapping rather than squeezing the heading text.
 */
.section-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/*
 * The shared modal, built from the same parts as the kiosk pairing dialog it was generalised
 * from, so a form moved out of a page and into a modal does not have to invent a look.
 */
.app-dialog {
  background: transparent;
  border: 0;
  max-height: calc(100dvh - 2rem);
  max-width: min(38rem, calc(100vw - 2rem));
  padding: 0;
  width: 100%;
}

.app-dialog::backdrop {
  backdrop-filter: blur(2px);
  background: rgb(0 0 0 / 58%);
}

.app-dialog-card {
  background: #fff;
  border-radius: 12px;
  border-top: 6px solid var(--asu-gold);
  box-shadow: 0 24px 70px rgb(0 0 0 / 30%);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.app-dialog-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.app-dialog-header h2 {
  margin: .15rem 0 0;
}

/*
 * Two actions in one modal, each collapsed until wanted, so the dialog opens on a choice rather
 * than on two long forms.
 */
.quick-action-block {
  border-top: 1px solid var(--asu-gray-6);
  margin-top: 1rem;
  padding-top: 1rem;
}

.quick-action-block summary {
  cursor: pointer;
  padding: .25rem 0;
}

.app-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
}

.icon-only-button {
  align-items: center;
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-4);
  border-radius: var(--radius);
  color: var(--asu-black);
  display: inline-flex;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.is-hidden {
  display: none !important;
}

.issue-recipient {
  background: var(--asu-gray-7);
  border-left: 5px solid var(--asu-gold);
  padding: 12px;
}

.issue-recipient span,
.issue-recipient small,
.issue-recipient strong {
  display: block;
}

.issue-recipient span,
.issue-recipient small {
  color: var(--asu-gray-2);
}

.issue-recipient span {
  font-size: 0.78rem;
  font-weight: 800;
}

.point-choice-group {
  border: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}

.point-choice-group legend {
  color: var(--asu-gray-2);
  font-size: 0.88rem;
  font-weight: 800;
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

.point-choice-group label {
  cursor: pointer;
}

.point-choice-group input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.point-choice-group span {
  align-items: center;
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-4);
  border-radius: var(--radius);
  display: flex;
  font-size: 1.25rem;
  font-weight: 800;
  justify-content: center;
  min-height: 56px;
}

.point-choice-group input:checked + span {
  background: var(--asu-gold);
  border-color: var(--asu-gold);
}

.point-choice-group input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.issue-qr-image {
  margin: 0 auto 14px;
}

.issue-url {
  color: var(--asu-gray-2);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.email-status {
  border-left: 5px solid var(--asu-gold);
  line-height: 1.35;
  margin: 12px 0;
  padding: 10px 12px;
}

.email-status span {
  color: var(--asu-gray-2);
  display: block;
  font-size: 0.86rem;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.email-status.is-sent {
  background: #f7fff2;
  border-left-color: var(--asu-green);
}

.email-status.is-skipped {
  background: var(--asu-gray-7);
}

.issue-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.metric-strip {
  background: var(--asu-white);
  border-top: 4px solid var(--asu-gold);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-strip article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 18px 22px;
}

.metric-strip article + article {
  border-left: 1px solid var(--asu-gray-6);
}

.metric-strip strong {
  font-size: 1.55rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.metric-strip span {
  color: var(--asu-gray-2);
  font-size: 0.86rem;
  font-weight: 700;
}

.operations-panel {
  background: var(--asu-white);
  border-top: 4px solid var(--asu-gold);
}

.operations-heading {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 20px 24px;
}

.operations-heading h2,
.operations-heading p,
.operation-row h3,
.operation-row p {
  margin-bottom: 0;
}

.context-chip,
.operation-count {
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  color: var(--asu-gray-1);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 7px 9px;
  white-space: nowrap;
}

.operation-list {
  border-top: 1px solid var(--asu-gray-6);
}

.operation-row {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto minmax(130px, auto);
  padding: 18px 24px;
  transition: background-color 150ms ease;
}

.operation-row + .operation-row {
  border-top: 1px solid var(--asu-gray-6);
}

.operation-row:hover,
.operation-row:focus-within {
  background: #fff9e8;
}

.operation-row h3 {
  font-size: 1.05rem;
}

.operation-row p {
  color: var(--asu-gray-2);
  margin-top: 3px;
}

.operation-row .button {
  justify-content: center;
  min-width: 130px;
}

.store-item-dialog {
  max-width: 1040px;
  overflow-x: hidden;
  padding: 0;
  width: min(100%, 1040px);
}

.store-item-dialog > h2 {
  border-bottom: 1px solid var(--asu-gray-6);
  margin: 0;
  padding: 24px 70px 18px 24px;
}

.store-item-form {
  display: block;
}

.store-item-dialog-body {
  display: grid;
  gap: 24px;
  padding: 22px 24px 24px;
}

.store-form-section {
  display: grid;
  gap: 16px;
}

.store-form-section + .store-form-section {
  border-top: 1px solid var(--asu-gray-6);
  padding-top: 22px;
}

.store-form-section-heading {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.store-form-section-heading h3,
.store-form-section-heading p {
  margin-bottom: 0;
}

.store-details-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr);
}

.store-field-full {
  grid-column: 1 / -1;
}

.store-image-field {
  align-items: end;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.store-item-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.variant-rows {
  display: grid;
  gap: 8px;
}

.variant-column-labels,
.variant-row {
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(120px, 1.35fr) minmax(100px, 1fr) 76px 76px 62px 150px 38px;
}

.variant-column-labels {
  color: var(--asu-gray-2);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0 10px;
  text-transform: uppercase;
}

.variant-row {
  align-items: center;
  padding: 9px;
}

.variant-row .field > span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.variant-row input {
  min-width: 0;
  width: 100%;
}

.variant-options {
  display: grid;
  gap: 3px;
  grid-template-columns: 1fr 1fr;
}

.variant-options .check-row {
  font-size: 0.76rem;
  min-height: 36px;
}

.variant-remove {
  height: 36px;
  width: 36px;
}

.variant-remove:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.store-item-form-footer {
  align-items: center;
  background: var(--asu-white);
  border-top: 1px solid var(--asu-gray-6);
  bottom: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 24px;
  position: sticky;
  z-index: 3;
}

.footer {
  background: var(--asu-black);
  color: var(--asu-white);
  font-size: 0.86rem;
  padding: 28px 32px;
}

.footer-inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--content);
}

.footer-brand {
  display: grid;
  gap: 4px;
}

.footer-brand span {
  color: #d0d0d0;
}

.footer-version {
  color: #d0d0d0;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.minimal-footer {
  padding-block: 16px;
}

.minimal-page {
  background: var(--asu-black);
  color: var(--asu-white);
  min-height: 100vh;
}

/*
 * The kiosk is an unattended display and must never scroll. The modal embed is handled by a
 * person on a phone, and its "Copy redemption link" details expands past a short viewport, so
 * it scrolls when -- and only when -- the content genuinely does not fit.
 */
.embed-page,
.kiosk-page {
  background: var(--asu-black);
  color: var(--asu-white);
  height: 100dvh;
}

.embed-page {
  overflow-y: auto;
}

.kiosk-page {
  background:
    linear-gradient(135deg, rgb(25 25 25 / 94%), rgb(140 29 64 / 72%)),
    url("/images/asu-poly-santan-dark-pattern.png") center / cover fixed no-repeat;
  overflow: hidden;
}

/*
 * min-height rather than height: the view centers its panel with place-items, and a centered
 * grid item taller than its container overflows off the top as well, where no amount of
 * scrolling reaches it. Growing the row instead keeps the overflow entirely below the fold.
 */
.embed-page > main {
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible;
  padding: clamp(10px, 2.4vh, 24px) !important;
}

.embed-page .quick-qr-panel {
  max-height: none;
  overflow: visible;
  padding: clamp(16px, 2.8vh, 32px);
}

.embed-page .quick-qr-panel .branded-qr {
  max-width: min(48vh, 330px);
}

@media (max-width: 980px) {
  .ws2-main {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    padding: 18px 24px;
  }

  .ws2-logo-link img {
    height: 42px;
  }

  .mobile-menu-button {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: 16px;
  }

  .ws2-nav {
    background: var(--asu-white);
    border: 1px solid var(--asu-gray-6);
    border-radius: 8px;
    display: none;
    padding: 8px;
    width: 100%;
  }

  .ws2-nav.is-open {
    display: flex;
  }

  .ws2-nav,
  .ws2-actions,
  .app-nav-inner {
    flex-wrap: wrap;
  }

  .hero-inner,
  .grid.two,
  .grid.three,
  .grid.four,
  .grid.sidebar-layout,
  .store-layout,
  .checkout-layout,
  .management-create-row,
  .management-create-row-wide {
    grid-template-columns: 1fr;
  }

  .store-cart-summary,
  .checkout-actions {
    position: static;
  }

  /*
   * Once a checkout QR exists it is the only thing the student is on this page to do, and
   * they are almost certainly holding a phone at the store counter. Stacked, the actions
   * panel that holds it falls below the whole item list, so it has to be scrolled to. Order
   * it first while the QR is showing; the ordinary cart keeps its usual sequence.
   */
  .checkout-layout-qr-first .checkout-actions {
    order: -1;
  }

  /*
   * At the shared 330px cap the QR alone overshoots an iPhone-sized viewport by the height of
   * its own caption. 260px still scans at arm's length on any phone and is what brings the
   * whole code on screen without scrolling.
   */
  .checkout-layout-qr-first .checkout-actions .qr-image {
    max-width: 260px;
  }

  .online-checkout-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-inner h1 {
    font-size: 2.25rem;
  }
}

@media (max-width: 640px) {
  .ws2-utility {
    padding: 0 12px;
  }

  .ws2-utility nav {
    gap: 12px;
    justify-content: flex-end;
    overflow: hidden;
    white-space: nowrap;
  }

  .ws2-utility nav > a:first-child,
  .ws2-utility nav > a:nth-of-type(3) {
    display: none;
  }

  .ws2-main {
    min-height: 0;
    padding: 12px 14px 0;
  }

  .ws2-logo-link {
    margin-right: 0;
  }

  .ws2-logo-link img {
    height: 34px;
  }

  .ws2-title-row {
    align-items: center;
    min-height: 0;
  }

  .ws2-title {
    font-size: 0.95rem;
  }

  .ws2-kicker {
    font-size: 0.76rem;
  }

  .mobile-menu-button {
    height: 36px;
    margin-left: 10px;
    padding: 0;
    width: 36px;
  }

  .mobile-menu-label {
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    clip-path: inset(50%);
  }

  .ws2-nav {
    gap: 4px;
    margin: 10px 0 0;
  }

  .ws2-nav a {
    border-radius: 6px;
    font-size: 0.88rem;
    min-height: 40px;
    padding: 0 10px;
    width: 100%;
  }

  .ws2-actions {
    flex: 0 0 auto;
    margin-left: 0;
    padding-bottom: 0;
  }

  .ws2-actions .button {
    min-height: 34px;
    padding: 7px 10px;
    width: auto;
  }

  .app-nav-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
  }

  .preview-toolbar {
    bottom: 12px;
    left: 12px;
  }

  .preview-popout {
    min-width: min(320px, calc(100vw - 24px));
    padding: 8px 12px;
  }

  .preview-switcher {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .preview-switcher select {
    min-width: 0;
    width: 100%;
  }

  .preview-toolbar .button {
    white-space: nowrap;
  }

  .campus-switcher {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .hero-inner {
    gap: 18px;
    min-height: 0;
    padding-bottom: 38px;
    padding-top: 30px;
  }

  .hero-inner h1 {
    font-size: 2rem;
    margin-bottom: 12px;
  }

  .hero-inner p {
    font-size: 0.98rem;
  }

  .metric-tile {
    min-width: 0;
    padding: 16px;
    width: 100%;
  }

  .page-shell,
  .hero-inner {
    padding-left: 14px;
    padding-right: 14px;
  }

  .page-shell {
    padding-bottom: 44px;
    padding-top: 18px;
  }

  .panel,
  .card,
  .store-card {
    box-shadow: none;
  }

  .panel,
  .card {
    padding: 16px;
  }

  .store-card {
    padding: 0;
  }

  .checkout-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .checkout-balance,
  .checkout-balance-inline {
    width: 100%;
  }

  .cart-item-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .cart-item-row-actions {
    justify-content: space-between;
  }

  .cart-total {
    justify-content: space-between;
  }

  .redeem-details {
    grid-template-columns: 1fr;
  }

  .redeem-points {
    font-size: 2.65rem;
  }

  .redeem-label {
    font-size: 1.08rem;
  }

  .grid {
    gap: 16px;
  }

  .form-grid.two {
    grid-template-columns: 1fr;
  }

  .variant-row {
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
  }

  .table-actions .button {
    width: auto;
  }

  .table-wrap {
    overflow-x: visible;
  }

  .table-wrap table {
    border-collapse: separate;
    border-spacing: 0;
    display: block;
    min-width: 0;
  }

  .table-wrap thead {
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td {
    display: block;
    width: 100%;
  }

  .table-wrap tr {
    background: var(--asu-white);
    border: 1px solid var(--asu-gray-6);
    border-radius: var(--radius);
    margin-bottom: 12px;
    padding: 12px;
  }

  .table-wrap td {
    border-bottom: 1px solid var(--asu-gray-6);
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    padding: 9px 0;
  }

  .table-wrap td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .table-wrap td::before {
    color: var(--asu-gray-2);
    content: attr(data-label);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .table-wrap td:empty {
    display: none;
  }

  .table-wrap td[data-label="Actions"] {
    grid-template-columns: 1fr;
  }

  .table-wrap td[data-label="Actions"]::before {
    display: none;
  }

  .table-wrap td[data-label="Actions"] .table-actions,
  .table-wrap td[data-label="Actions"] form {
    width: 100%;
  }

  .table-wrap td[data-label="Actions"] .button {
    width: 100%;
  }

  .student-transaction-table td {
    align-items: start;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .student-transaction-table td::before {
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .student-transaction-table .delta-positive,
  .student-transaction-table .delta-negative {
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .icon-only-button {
    width: 38px;
  }

  .staff-issue-hero,
  .student-result-card,
  .issue-modal-actions {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .staff-issue-hero,
  .issue-modal-actions {
    flex-direction: column;
  }

  .issue-dialog {
    max-height: calc(100vh - 24px);
    padding: 20px 16px;
  }

  .modal-backdrop {
    align-items: stretch;
    padding: 12px;
  }

  .footer {
    padding: 22px 14px;
  }
}

/* Version 0.3.1 administration, navigation, and hero refinements. */
[data-settings-detail] {
  background: var(--asu-white);
  box-shadow: -14px 0 38px rgba(0, 0, 0, 0.22);
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow-y: auto;
}

.user-detail-shell.is-loading [data-settings-detail],
[data-campus-usage-results].is-loading {
  opacity: 0.62;
  pointer-events: none;
}

.campus-drawer-loading,
.campus-drawer-error {
  padding: 32px;
}

.campus-drawer-error p {
  margin-bottom: 20px;
}

.campus-detail-fallback {
  margin: 0 auto;
  max-width: 760px;
}

.usage-link {
  color: var(--asu-black);
  cursor: pointer;
  text-decoration: none;
}

.usage-link:hover,
.usage-link:focus-visible {
  border-color: var(--asu-gold);
  text-decoration: underline;
}

.nav-with-count {
  align-items: center;
  display: inline-flex !important;
  gap: 6px;
}

.nav-count {
  align-items: center;
  background: var(--asu-maroon);
  border-radius: 999px;
  color: var(--asu-white);
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 800;
  height: 20px;
  justify-content: center;
  line-height: 1;
  min-width: 20px;
  padding: 0 6px;
}

@media (max-width: 760px) {
  [data-settings-detail] {
    grid-column: 1;
  }
}

@media (max-width: 820px) {
  .admin-page-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .user-workspace {
    display: block;
    min-height: 560px;
  }

  .user-directory {
    border-right: 0;
  }

  .user-detail-shell {
    background: var(--asu-white);
    bottom: 0;
    display: none;
    left: 0;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1100;
  }

  .user-detail-shell.is-open,
  .user-detail-shell.has-selection:target {
    display: block;
  }

  .icon-only-button.user-drawer-close {
    display: inline-flex;
    flex: 0 0 auto;
    order: 2;
  }

  .user-detail-header {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  .user-detail-header,
  .user-detail-tabs {
    background: var(--asu-white);
  }
}

@media (max-width: 640px) {
  .admin-users-page {
    gap: 14px;
  }

  .toolbar-actions,
  .toolbar-actions .button {
    width: 100%;
  }

  .toolbar-actions .button {
    flex: 1 1 0;
  }

  .user-filter-row,
  .permission-grid,
  .balance-adjust-fields {
    grid-template-columns: 1fr;
  }

  .manual-adjustment-submit,
  .record-filter-control {
    justify-self: stretch;
    max-width: none;
    width: 100%;
  }

  .user-filter-submit {
    width: 100%;
  }

  .user-detail-header,
  .user-form-section,
  .user-activity-records,
  .user-records-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .balance-card {
    margin-left: 16px;
    margin-right: 16px;
  }

  .user-detail-tabs {
    padding: 0 16px;
  }
}

@media (max-width: 760px) {
  .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-strip article {
    padding: 14px 16px;
  }

  .metric-strip article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--asu-gray-6);
    grid-column: 1 / -1;
  }

  .operations-heading {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px 16px;
  }

  .operation-row {
    gap: 12px;
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .operation-row .operation-count,
  .operation-row .button {
    justify-self: stretch;
    text-align: center;
    width: 100%;
  }

  .store-item-dialog {
    max-height: calc(100vh - 24px);
    padding: 0;
  }

  .store-item-dialog > h2 {
    padding: 20px 58px 16px 16px;
  }

  .store-item-dialog-body {
    gap: 20px;
    padding: 18px 16px 20px;
  }

  .store-form-section-heading,
  .store-details-grid,
  .store-image-field {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .store-form-section-heading {
    display: grid;
  }

  .store-form-section-heading .button {
    width: 100%;
  }

  .variant-column-labels {
    display: none;
  }

  .variant-row {
    align-items: end;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 12px;
  }

  .variant-row .field:nth-of-type(1),
  .variant-row .field:nth-of-type(2),
  .variant-options {
    grid-column: 1 / -1;
  }

  .variant-row .field > span {
    clip: auto;
    clip-path: none;
    height: auto;
    overflow: visible;
    position: static;
    white-space: normal;
    width: auto;
  }

  .variant-remove {
    grid-column: 2;
    justify-self: end;
  }

  .store-item-form-footer {
    padding: 12px 16px;
  }

  .store-item-form-footer .button {
    flex: 1 1 0;
    width: auto;
  }
}

/* Cascade anchors for the redesigned workspaces. */
.compact-page-hero,
.admin-landing-hero {
  background:
    linear-gradient(90deg, rgba(25, 25, 25, 0.92), rgba(25, 25, 25, 0.82)),
    url("/images/asu-poly-santan-dark-pattern.png") center / cover no-repeat;
  color: var(--asu-white);
  position: relative;
}

.compact-page-hero::after,
.admin-landing-hero::after {
  background: linear-gradient(90deg, #303030 0 52%, #2d4a27 52% 68%, #005f73 68% 84%, #6b3f24 84% 100%);
  bottom: 0;
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  right: 0;
}

.row-action-menu summary svg {
  display: block;
  height: 18px;
  width: 18px;
}

.row-action-menu[open] > div .button {
  justify-content: flex-start;
  width: 100%;
}

.row-action-menu[open] > div .button svg {
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

.compact-page-hero-inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--content);
  min-height: 116px;
  padding: 20px 32px 27px;
}

.compact-page-hero-copy h1,
.compact-page-hero-copy p {
  margin: 0;
}

.compact-page-hero-copy h1 {
  color: var(--asu-white);
  font-size: 2rem;
  line-height: 1.15;
}

.compact-page-hero .eyebrow {
  color: var(--asu-gold);
  margin-bottom: 6px;
}

.compact-campus-switcher {
  flex: 0 0 auto;
  margin: 0;
  max-width: 100%;
  width: fit-content;
}

.compact-campus-switcher select {
  width: clamp(150px, 18vw, 220px);
}

.compact-page-hero + main > .panel.gold-top:first-child > h1:first-child,
.compact-page-hero + main > .panel.gold-top:first-child > .section-heading-row:first-child > div:first-child > h1:first-child {
  display: none;
}

.admin-landing-hero {
  color: var(--asu-white);
  padding: 28px 32px;
}

.admin-landing-hero h1,
.admin-landing-hero p {
  color: var(--asu-white);
}

.admin-landing-hero .eyebrow {
  color: var(--asu-gold);
  margin: 0 0 6px;
}

.supporting-workspace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-attention-list small {
  display: block;
}

.operations-hero .operations-hero-inner {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 520px);
  min-height: 360px;
}

.store-operations-hero .operations-hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(430px, 560px);
}

.admin-users-page .user-workspace {
  background: transparent;
  border: 0;
  display: block;
  height: auto;
  min-height: 0;
}

.admin-users-page .user-directory {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-radius: 4px;
  display: block;
}

.admin-users-page [data-user-results] {
  overflow: visible;
}

.admin-users-page .user-directory-filters {
  grid-template-columns: minmax(280px, 1.4fr) minmax(420px, 1fr) auto;
}

.admin-users-page .user-filter-row {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.admin-users-page .user-filter-row label:nth-child(3) {
  grid-column: auto;
}

.admin-users-page .user-table-header,
.admin-users-page .user-list-item {
  grid-template-columns: minmax(220px, 1.8fr) minmax(115px, 0.9fr) minmax(110px, 0.8fr) minmax(145px, 1.05fr) minmax(85px, 0.7fr) minmax(72px, 0.55fr) 22px;
}

/* Student support cases */
.request-help-fab {
  align-items: center;
  background: var(--asu-gold);
  border: 1px solid #d89f00;
  border-radius: 999px;
  bottom: 22px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
  color: var(--asu-black);
  display: flex;
  font-weight: 800;
  gap: 8px;
  padding: 11px 16px;
  position: fixed;
  right: 22px;
  text-decoration: none;
  z-index: 450;
}

.request-help-fab:hover { background: #ffd053; }
.request-help-fab svg { height: 19px; width: 19px; }
.support-case-form-panel { margin-inline: auto; max-width: 780px; }
.context-card { background: #f7f7f7; border-left: 4px solid var(--asu-gold); display: grid; gap: 5px; padding: 16px; }
.context-card span, .context-card small { color: var(--asu-gray-2); }
.support-case-list { display: grid; }
.support-case-row { align-items: center; border-bottom: 1px solid var(--asu-gray-5); color: var(--asu-black); display: grid; gap: 18px; grid-template-columns: minmax(190px,.8fr) minmax(260px,1.6fr) auto 24px; padding: 17px 14px; text-decoration: none; }
.support-case-row:hover { background: #fff8e1; }
.support-case-row > span:not(.pill) { display: grid; gap: 3px; min-width: 0; }
.support-case-row small { color: var(--asu-gray-2); overflow-wrap: anywhere; }
.admin-case-row { grid-template-columns: minmax(210px,1fr) minmax(250px,1.5fr) minmax(150px,.8fr) auto 24px; }
/*
 * Six filters in four columns left the last two on a second row and the submit button stretched
 * to the full height of the first, which is where "huge" came from. Fields size themselves now,
 * and the button sits on its own row at its natural size.
 */
.support-case-filters {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.support-case-filters .field {
  margin-bottom: 0;
  min-width: 0;
}

.support-case-filters button {
  grid-column: 1 / -1;
  justify-self: start;
}
.case-summary-grid { display: grid; gap: 18px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.case-summary-grid > div { background: #f7f7f7; border-left: 3px solid var(--asu-gold); display: grid; gap: 3px; padding: 13px; }
.case-summary-grid span { color: var(--asu-gray-2); font-size: .78rem; text-transform: uppercase; }
.case-conversation { display: grid; gap: 12px; margin: 18px 0; }
.case-message { background: #f4f4f4; border-left: 4px solid var(--asu-maroon); border-radius: 0 6px 6px 0; padding: 14px 16px; }
.case-message.is-student { border-left-color: var(--asu-gold); }
.case-message.is-internal { background: #fff4ce; border-left-color: #d89f00; }
.case-message header { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; }
.case-message time { color: var(--asu-gray-2); font-size: .78rem; }
.case-message p { margin-bottom: 0; white-space: pre-wrap; }
.case-reply { margin-top: 20px; }
.support-case-columns { display: grid; gap: 22px; grid-template-columns: minmax(0,1.6fr) minmax(300px,.8fr); }
.case-context dl { display: grid; gap: 7px 12px; grid-template-columns: 120px minmax(0,1fr); }
.case-context dt { color: var(--asu-gray-2); font-weight: 700; }
.case-context dd { margin: 0; overflow-wrap: anywhere; }
.case-timeline { border-left: 2px solid var(--asu-gray-5); display: grid; gap: 14px; list-style: none; margin: 12px 0 0 7px; padding-left: 18px; }
.case-timeline li { display: grid; gap: 2px; position: relative; }
.case-timeline li::before { background: var(--asu-gold); border-radius: 50%; content: ""; height: 9px; left: -24px; position: absolute; top: 5px; width: 9px; }
.case-timeline span { color: var(--asu-gray-2); font-size: .8rem; }
.support-guidance { background:#fff8e1; border-left:4px solid var(--asu-gold); border-radius:4px; padding:16px 18px; }
.support-guidance h2,.support-guidance h3 { margin-top:0; }
.support-guidance article[hidden] { display:none; }
.similar-support-cases { background:#eef7ff; border-left:4px solid #00a3e0; display:grid; gap:7px; padding:14px 16px; }
.case-attachments { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.linked-evidence article { background:#f5f5f5; border-left:3px solid var(--asu-maroon); margin:10px 0; padding:12px; }
.linked-evidence p { margin:.35rem 0; }
.template-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.template-grid article { border:1px solid var(--asu-gray-5); border-top:4px solid var(--asu-gold); border-radius:6px; padding:16px; }
.troubleshooting-steps { display:grid; gap:12px; }
.support-sla-card { background:linear-gradient(135deg,#fff 0%,#fafafa 100%); border-top:5px solid var(--asu-gold); overflow:hidden; }
.support-sla-card.is-overdue { border-top-color:var(--asu-maroon); }
.support-sla-heading { align-items:center; display:flex; gap:16px; justify-content:space-between; }
.support-sla-heading h2,.support-sla-heading p { margin:0; }
.support-sla-track { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:28px 0 22px; position:relative; }
.support-sla-line { background:#d7d7d7; height:5px; left:16.66%; position:absolute; right:16.66%; top:21px; }
.support-sla-line span { background:linear-gradient(90deg,var(--asu-maroon),var(--asu-gold)); display:block; height:100%; transition:width .25s ease; width:0; }
.support-sla-line span.through-response { width:50%; }
.support-sla-line span.through-resolution { width:100%; }
.support-sla-step { display:grid; gap:10px; justify-items:center; min-width:0; position:relative; text-align:center; z-index:1; }
.support-sla-dot { align-items:center; background:#fff; border:4px solid #b7b7b7; border-radius:50%; display:flex; height:46px; justify-content:center; width:46px; }
.support-sla-dot svg { height:20px; width:20px; }
.support-sla-step.is-complete .support-sla-dot { background:#2e7d32; border-color:#2e7d32; color:#fff; }
.support-sla-step.is-current .support-sla-dot { background:var(--asu-gold); border-color:var(--asu-gold); }
.support-sla-step.is-overdue .support-sla-dot { background:var(--asu-maroon); border-color:var(--asu-maroon); color:#fff; }
.support-sla-step > div { display:grid; gap:3px; }
.support-sla-step time { font-size:.88rem; font-weight:700; }
.support-sla-step small { color:var(--asu-gray-2); }
.support-sla-card footer { align-items:flex-start; background:#f1f1f1; border-radius:6px; color:var(--asu-gray-2); display:flex; font-size:.86rem; gap:9px; padding:11px 13px; }
.support-sla-card footer svg { flex:0 0 auto; height:18px; width:18px; }
@media (max-width:560px) {
  .support-sla-track { gap:12px; grid-template-columns:1fr; margin-top:20px; }
  .support-sla-line { bottom:16.66%; height:auto; left:21px; right:auto; top:16.66%; width:5px; }
  .support-sla-line span { height:0; width:100%; }
  .support-sla-line span.through-response { height:50%; width:100%; }
  .support-sla-line span.through-resolution { height:100%; width:100%; }
  .support-sla-step { gap:14px; grid-template-columns:46px 1fr; justify-items:start; text-align:left; }
}

@media (max-width: 900px) {
  .case-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .support-case-columns { grid-template-columns: 1fr; }
  .support-case-row, .admin-case-row { grid-template-columns: 1fr auto; }
  .support-case-row > span { grid-column: 1; }
  .support-case-row > .pill, .support-case-row > svg { grid-column: 2; }
}

@media (max-width: 600px) {
  .request-help-fab { bottom: 12px; right: 12px; }
  .request-help-fab span { display: none; }
  .request-help-fab { padding: 12px; }
  .case-summary-grid { grid-template-columns: 1fr; }
  .case-message header { align-items: flex-start; flex-direction: column; gap: 2px; }
}

.worker-access-term {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.worker-access-term small {
  color: var(--asu-gray-2);
  line-height: 1.25;
}

.admin-users-page .user-detail-shell {
  bottom: 0;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 660px);
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1100;
}

.admin-users-page .user-detail-shell.is-open {
  display: grid;
}

@media (max-width: 1050px) {
  .operations-hero .operations-hero-inner,
  .store-operations-hero .operations-hero-inner {
    grid-template-columns: 1fr;
  }

  .admin-users-page .user-directory-filters {
    grid-template-columns: 1fr auto;
  }

  .admin-users-page .user-filter-row {
    grid-column: 1;
  }

  .admin-users-page .user-table-header,
  .admin-users-page .user-list-item {
    grid-template-columns: minmax(190px, 1.5fr) minmax(105px, 0.85fr) minmax(100px, 0.75fr) minmax(135px, 1fr) minmax(80px, 0.65fr) minmax(65px, 0.5fr) 20px;
  }
}

@media (max-width: 760px) {
  .compact-page-hero-inner {
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
    padding: 20px 14px 27px;
  }

  .compact-campus-switcher {
    flex-basis: auto;
  }

  .supporting-workspace {
    grid-template-columns: 1fr;
  }

  .operations-hero .operations-hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .admin-users-page .user-directory-filters,
  .admin-users-page .user-filter-row {
    grid-template-columns: 1fr;
  }

  .admin-users-page .user-list-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-users-page .user-row-open {
    grid-row: 1 / span 6;
  }

  .admin-users-page .user-detail-shell {
    grid-template-columns: 1fr;
  }
}

/* Release 0.1.2 interaction and hero alignment fixes. */
.mobile-menu-button,
.preview-toggle {
  touch-action: manipulation;
}

.mobile-menu-button {
  position: relative;
  z-index: 2;
}

.compact-page-hero,
.admin-landing-hero {
  display: block;
  width: 100%;
}

.admin-landing-hero {
  padding: 0;
}

.admin-landing-hero-inner {
  margin: 0 auto;
  max-width: var(--content);
  min-height: 142px;
  padding: 24px 32px;
  width: 100%;
}

.operations-hero .operations-hero-inner {
  grid-template-rows: auto 1fr;
}

.operations-hero-context {
  align-items: center;
  display: flex;
  gap: 24px;
  grid-column: 1 / -1;
  justify-content: space-between;
  min-width: 0;
}

.operations-hero-context .eyebrow {
  margin: 0;
}

.operations-hero-context .hero-campus-switcher,
.compact-page-hero .hero-campus-switcher {
  margin: 0;
}

.admin-audit-page .user-detail-shell {
  bottom: 0;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 660px);
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1100;
}

.admin-audit-page .user-detail-shell.is-open {
  display: grid;
}

.admin-audit-page [data-audit-detail] {
  background: var(--asu-white);
  box-shadow: -14px 0 38px rgba(0, 0, 0, 0.22);
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow-y: auto;
}

[data-audit-results].is-loading,
.admin-audit-page .user-detail-shell.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 760px) {
  .admin-landing-hero-inner {
    min-height: 0;
    padding: 20px 14px 27px;
  }

  .operations-hero-context {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .admin-audit-page .user-detail-shell {
    grid-template-columns: 1fr;
  }

  .admin-audit-page .user-drawer-backdrop {
    display: none;
  }

  .admin-audit-page [data-audit-detail] {
    grid-column: 1;
  }
}

/* Release 0.1.3 compact operations and campus controls. */
.pill {
  flex: 0 0 auto;
  line-height: 1;
  white-space: nowrap;
  word-break: normal;
}

.staff-issued-table th:nth-child(3),
.staff-issued-table td:nth-child(3),
.staff-issued-table th:nth-child(4),
.staff-issued-table td:nth-child(4),
.staff-issued-table th:nth-child(5),
.staff-issued-table td:nth-child(5),
.staff-issued-table th:nth-child(6),
.staff-issued-table td:nth-child(6) {
  overflow-wrap: normal;
  white-space: nowrap;
}

.staff-code-list {
  display: grid;
  margin-top: 14px;
}

.staff-code-record {
  align-items: center;
  border-top: 1px solid var(--asu-gray-3);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto) auto;
  min-width: 0;
  padding: 16px 0;
}

.staff-code-identity,
.staff-code-fact {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.staff-code-identity strong,
.staff-code-identity span,
.staff-code-fact strong {
  overflow-wrap: anywhere;
}

.staff-code-identity span,
.staff-code-fact > span {
  color: var(--asu-gray);
  font-size: 0.78rem;
}

.staff-code-fact strong {
  font-size: 0.92rem;
}

.staff-code-actions {
  flex-wrap: nowrap;
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
}

.staff-code-identity {
  grid-column: 1;
  grid-row: 1;
}

.staff-code-points {
  grid-column: 1;
  grid-row: 2;
}

.staff-code-expiration {
  grid-column: 2 / 4;
  grid-row: 2;
}

.staff-code-status {
  grid-column: 2;
  grid-row: 1;
}

.danger-icon-button {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--asu-white);
}

.staff-code-empty {
  border-top: 1px solid var(--asu-gray-3);
  margin: 0;
  padding: 18px 0 4px;
}

@media (max-width: 560px) {
  .staff-code-record {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .staff-code-identity {
    grid-column: 1;
    grid-row: 1;
  }

  .staff-code-status {
    grid-column: 2;
    grid-row: 1;
  }

  .staff-code-points {
    grid-column: 1;
    grid-row: 2;
  }

  .staff-code-expiration {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .staff-code-actions {
    grid-column: 2;
    grid-row: 2 / 4;
  }
}

/* Release 0.2.0 SSO onboarding and approval workspace. */
.onboarding-shell {
  align-items: center;
  background: var(--asu-gray-6);
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 110px);
  padding: 36px 20px;
}

.onboarding-panel {
  background: var(--asu-white);
  border-top: 6px solid var(--asu-gold);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.14);
  color: var(--asu-black);
  max-width: 680px;
  padding: 36px;
  width: 100%;
}

.onboarding-heading h1,
.onboarding-status h1 {
  margin: 4px 0 10px;
}

.verified-identity {
  align-items: center;
  background: var(--asu-gray-7);
  display: flex;
  gap: 12px;
  margin: 24px 0;
  padding: 14px 16px;
}

.verified-identity svg {
  color: var(--asu-green);
  flex: 0 0 auto;
}

.verified-identity span {
  display: grid;
  gap: 2px;
}

.onboarding-form {
  display: grid;
  gap: 18px;
}

.onboarding-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/*
 * The Barrett eligibility question. Boxed and given its own legend because it is the one control
 * on this form whose answer closes the request, and it has to read as a question being asked
 * rather than as another field being filled in.
 */
.onboarding-attestation {
  border: 1px solid var(--asu-gray-5);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px;
}

.onboarding-attestation legend {
  font-weight: 700;
  padding: 0 6px;
}

.onboarding-choice {
  align-items: baseline;
  display: flex;
  gap: 10px;
}

.onboarding-choice input {
  flex: 0 0 auto;
  margin: 0;
}

.onboarding-attestation-note {
  background: var(--asu-gray-7);
  border-left: 3px solid var(--asu-gold);
  font-size: 0.92rem;
  margin: 4px 0 0;
  padding: 10px 12px;
}

.link-button {
  background: transparent;
  border: 0;
  color: var(--asu-maroon);
  cursor: pointer;
  font: inherit;
  margin-top: 18px;
  padding: 4px 0;
  text-decoration: underline;
}

.onboarding-status {
  text-align: center;
}

.onboarding-status-icon {
  color: var(--asu-maroon);
  height: 48px;
  margin: 0 auto 14px;
  width: 48px;
}

.onboarding-status-icon.success {
  color: var(--asu-green);
}

.onboarding-summary {
  border-bottom: 1px solid var(--asu-gray-5);
  border-top: 1px solid var(--asu-gray-5);
  display: grid;
  gap: 12px;
  margin: 24px 0;
  padding: 18px 0;
  text-align: left;
}

.onboarding-summary div {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.onboarding-summary dt {
  color: var(--asu-gray);
  font-weight: 700;
}

.account-request-list {
  display: grid;
}

.account-request-record {
  align-items: start;
  border-top: 1px solid var(--asu-gray-5);
  display: grid;
  gap: 16px 24px;
  grid-template-columns: minmax(190px, 1.2fr) minmax(280px, 2fr) auto;
  padding: 22px 0;
}

.account-request-identity {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.account-request-identity span,
.account-request-review {
  overflow-wrap: anywhere;
}

.account-request-facts {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.account-request-facts div {
  display: grid;
  gap: 4px;
}

.account-request-facts dt {
  color: var(--asu-gray);
  font-size: 0.78rem;
  font-weight: 700;
}

.account-request-facts dd {
  margin: 0;
}

.account-request-actions {
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-request-actions form {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.staff-request-record .staff-code-actions {
  grid-row: 1 / 3;
}

@media (max-width: 820px) {
  .account-request-record {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .account-request-facts {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .onboarding-panel {
    padding: 26px 20px;
  }

  .onboarding-actions .button {
    width: 100%;
  }

  .account-request-facts,
  .account-request-actions {
    grid-template-columns: 1fr;
  }

  .account-request-actions form {
    grid-template-columns: 1fr;
  }
}

.hero-campus-switcher {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  gap: 6px;
  padding: 4px 6px;
}

.hero-campus-switcher > svg {
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.hero-campus-switcher select {
  background-color: transparent;
  color: var(--asu-white);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  min-height: 30px;
  min-width: 0;
  padding: 3px 28px 3px 5px;
  width: min(180px, 30vw);
}

.hero-campus-switcher select option {
  background: var(--asu-white);
  color: var(--asu-black);
}

.compact-row-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: max-content;
}

.action-sticky-table th:last-child,
.action-sticky-table td:last-child {
  background: var(--asu-white);
  box-shadow: -10px 0 14px -16px rgba(25, 25, 25, 0.65);
  position: sticky;
  right: 0;
  z-index: 2;
}

.action-sticky-table th:last-child {
  z-index: 3;
}

.store-operations-hero .operations-hero-inner {
  grid-template-columns: minmax(330px, 0.85fr) minmax(540px, 1.15fr);
  min-height: 300px;
}

.store-operations-hero .hero-stat-row {
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.store-operations-hero .hero-stat-row span {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 4px;
  display: grid;
  gap: 7px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 44px;
  padding: 7px 10px;
  white-space: normal;
}

.store-operations-hero .hero-stat-row small {
  color: var(--asu-white);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.15;
}

.store-action-dock {
  align-content: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.store-action-dock .hero-action-link {
  min-height: 70px;
}

.store-action-dock .hero-action-link:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 1050px) {
  .store-operations-hero .operations-hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .operations-hero-context {
    align-items: flex-start;
  }

  .hero-campus-switcher {
    align-self: flex-start;
    display: inline-flex;
    grid-template-columns: none;
    width: auto;
  }

  .hero-campus-switcher select {
    width: min(180px, 62vw);
  }

  .compact-campus-switcher select {
    width: min(220px, calc(100vw - 70px));
  }

  .store-action-dock {
    grid-template-columns: 1fr;
  }

  .store-action-dock .hero-action-link:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .toast-region {
    bottom: 14px;
    left: 14px;
    max-width: none;
    right: 14px;
    width: auto;
  }

  body.has-preview-toolbar .toast-region { bottom: 14px; }

  .flash.app-toast {
    max-width: none;
    width: 100%;
  }

  .action-sticky-table th:last-child,
  .action-sticky-table td:last-child {
    box-shadow: none;
    position: static;
  }

  .compact-row-actions {
    justify-content: flex-start;
    min-width: 0;
  }
}
.roster-preview-heading,
.roster-preview-actions,
.roster-preview-row,
.roster-preview-result {
  display: flex;
  align-items: center;
}

.roster-preview-heading,
.roster-preview-actions,
.roster-preview-row {
  justify-content: space-between;
  gap: 16px;
}

.roster-preview-heading p {
  margin: 0;
}

/* auto-fit rather than a fixed count: the summary gains a tile whenever the import learns to report something new. */
.roster-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 20px 0;
}

.roster-summary-item {
  min-width: 0;
  padding: 12px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fafafa;
}

.roster-summary-item strong,
.roster-summary-item span {
  display: block;
}

.roster-summary-item strong {
  font-size: 1.5rem;
  line-height: 1;
}

.roster-summary-item span {
  margin-top: 6px;
  color: #4a4a4a;
  font-size: 0.82rem;
}

.roster-summary-item.has-error {
  border-color: #a51c30;
  background: #fff5f6;
}

.roster-warning {
  margin: 16px 0;
  padding: 14px 16px;
  border-left: 5px solid #ffc627;
  background: #fff8df;
}

.roster-warning p {
  margin: 4px 0 0;
}

.roster-preview-list {
  max-height: min(45vh, 480px);
  overflow-y: auto;
  margin-top: 16px;
  border-block: 1px solid #dedede;
}

.roster-preview-row {
  padding: 12px 4px;
  border-bottom: 1px solid #e8e8e8;
}

.roster-preview-row:last-child {
  border-bottom: 0;
}

.roster-preview-row > div:first-child,
.roster-preview-result {
  min-width: 0;
}

.roster-preview-row strong,
.roster-preview-row .muted {
  display: block;
  overflow-wrap: anywhere;
}

.roster-preview-result {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  text-align: right;
}

.roster-preview-actions {
  position: sticky;
  bottom: 0;
  margin: 18px -24px -24px;
  padding: 14px 24px;
  border-top: 1px solid #d0d0d0;
  background: #fff;
}

/* Where the apply button sits once the apply is running, so the panel does not change shape. */
.roster-apply-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 260px;
}

.roster-apply-progress progress {
  width: 100%;
  height: 10px;
}

.roster-apply-progress p {
  margin: 0;
  font-size: 0.85rem;
  text-align: right;
}

.roster-mode-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.roster-mode-fieldset legend {
  margin-bottom: 8px;
  font-weight: 700;
}

.roster-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.roster-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #b7b7b7;
  border-radius: 4px;
  cursor: pointer;
}

.roster-mode-option:has(input:checked) {
  border-color: #8c1d40;
  box-shadow: inset 0 0 0 1px #8c1d40;
}

.roster-mode-option input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin-top: 4px;
  padding: 0;
}

.roster-mode-option span {
  min-width: 0;
}

.roster-mode-option strong,
.roster-mode-option small {
  display: block;
}

.roster-mode-option small {
  margin-top: 3px;
  color: #555;
}

.roster-template-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.roster-column-help {
  padding: 12px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fafafa;
  font-size: 0.88rem;
}

.roster-column-help summary {
  cursor: pointer;
  font-weight: 700;
}

.roster-column-help p {
  margin: 10px 0 0;
  color: #4a4a4a;
}

/* The grants and revocations a row makes, under the name it makes them to. */
.roster-access-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.access-grant,
.access-revoke {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.access-grant {
  border: 1px solid #1e7c3f;
  background: #eefbf2;
  color: #14572c;
}

.access-revoke {
  border: 1px solid #a51c30;
  background: #fff5f6;
  color: #7d1523;
}

@media (max-width: 760px) {
  .roster-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roster-mode-options {
    grid-template-columns: 1fr;
  }

  .roster-preview-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .roster-preview-result {
    justify-content: flex-start;
    text-align: left;
  }

  .roster-preview-actions {
    position: static;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .roster-preview-list {
    max-height: none;
    overflow: visible;
  }
}

/* Version 0.3.2 consistent heroes, drawers, and product media. */
.settings-detail-shell {
  bottom: 0;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 660px);
  left: 0;
  min-width: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1100;
}

.settings-detail-shell.is-open {
  display: grid;
}

.store-product-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 290px));
}

.store-card-media {
  aspect-ratio: auto;
  height: 220px;
  object-fit: contain;
  padding: 12px;
}

.store-card-media--placeholder {
  padding: 0;
}

/* Keep full action heroes one standard desktop size while preserving mobile tap targets. */
@media (min-width: 1051px) {
  .operations-hero .operations-hero-inner,
  .store-operations-hero .operations-hero-inner {
    gap: 16px 28px;
    height: auto;
    min-height: 300px;
    padding-bottom: 30px;
    padding-top: 24px;
  }

  .operations-hero .hero-inner h1 {
    font-size: 2.35rem;
    margin-bottom: 9px;
    margin-top: 5px;
  }

  .operations-hero .hero-action-link {
    min-height: 52px;
    padding-bottom: 7px;
    padding-top: 7px;
  }

  .operations-hero .hero-stat-row,
  .operations-hero .hero-inline-stat {
    margin-top: 10px;
  }
}

.compact-page-hero-inner,
.admin-landing-hero-inner {
  height: 140px;
  min-height: 140px;
}

.settings-page-heading {
  border-top: 0;
}

@media (max-width: 760px) {
  .settings-detail-shell,
  .settings-detail-shell.is-open {
    grid-template-columns: 1fr;
  }

  .store-product-grid {
    grid-template-columns: 1fr;
  }

  .store-card-media {
    height: min(240px, 64vw);
  }

  .compact-page-hero-inner,
  .admin-landing-hero-inner {
    height: auto;
    min-height: 0;
  }
}

/* Unified hero hierarchy and cart availability states. */
.operations-hero .operations-hero-inner,
.store-operations-hero .operations-hero-inner {
  gap: 16px 28px;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 520px);
}

.operations-hero .operations-hero-copy h1 {
  color: var(--asu-white);
  font-size: 2.35rem;
  line-height: 1.08;
  margin: 4px 0 10px;
}

.operations-hero .operations-hero-copy > p {
  font-size: 1rem;
  line-height: 1.4;
}

.operations-hero .eyebrow,
.admin-landing-hero .eyebrow,
.compact-page-hero .eyebrow {
  color: var(--asu-gold);
  font-size: 0.8rem;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.operations-hero .hero-action-link.is-primary {
  background: var(--asu-gold);
  border-color: var(--asu-gold);
  color: var(--asu-black);
}

.operations-hero .hero-stat-row strong,
.operations-hero .hero-inline-stat strong {
  color: var(--asu-gold);
}

.admin-landing-hero-inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding-bottom: 27px;
  padding-top: 20px;
}

.admin-landing-hero-inner > div:first-child {
  min-width: 0;
}

.admin-landing-hero h1,
.settings-page-heading h1 {
  color: var(--asu-white);
  font-size: 2rem;
  line-height: 1.12;
  margin: 4px 0 6px;
}

.admin-landing-hero p,
.admin-landing-hero p.muted,
.settings-page-heading p {
  color: var(--asu-white);
  font-size: 1rem;
  line-height: 1.35;
  margin: 0;
  max-width: 760px;
}

.compact-page-hero-copy h1 {
  font-size: 2rem;
  margin: 4px 0 6px;
}

.compact-page-hero-copy p {
  font-size: 1rem;
  line-height: 1.35;
}

.cart-item-row.is-unavailable {
  background: #fff7f7;
  border-left: 4px solid var(--danger);
  margin-left: -14px;
  padding-left: 10px;
}

.cart-availability-warning {
  align-items: center;
  color: #7f1d1d;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.86rem;
  font-weight: 700;
  gap: 7px;
  margin-top: 7px;
}

.checkout-unavailable {
  display: grid;
  gap: 12px;
}

.checkout-unavailable h2,
.checkout-unavailable p {
  margin: 0;
}

.approval-page {
  display: grid;
  gap: 1rem;
}

.point-adjustment-record {
  grid-template-columns: minmax(12rem, 1.25fr) minmax(23rem, 2fr) auto;
}

.point-adjustment-reason {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: var(--asu-gray-7);
  border-radius: 0.45rem;
}

.point-adjustment-delta {
  font-size: 1.15rem;
  font-weight: 800;
}

.point-adjustment-delta.is-positive {
  color: #2d6a32;
}

.point-adjustment-delta.is-negative {
  color: var(--asu-maroon);
}

.cart-hold-status {
  margin: 0.55rem 0 0;
}

.cart-hold-expired {
  margin-bottom: 1rem;
}

.cart-hold-expired p {
  margin-bottom: 0;
}

.store-page-heading {
  margin: 0;
}

.store-page-heading h1 {
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  line-height: 1.1;
  margin: 0 0 0.45rem;
}

.store-page-heading p {
  color: var(--asu-gray-2);
  margin: 0;
}

@media (min-width: 1051px) {
  .operations-hero .operations-hero-inner,
  .store-operations-hero .operations-hero-inner {
    height: 300px;
    min-height: 300px;
    padding-bottom: 26px;
    padding-top: 22px;
  }
}

@media (max-width: 1050px) {
  .operations-hero .operations-hero-inner,
  .store-operations-hero .operations-hero-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .admin-landing-hero-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .operations-hero .operations-hero-copy h1,
  .admin-landing-hero h1,
  .settings-page-heading h1,
  .compact-page-hero-copy h1 {
    font-size: 1.9rem;
  }

  .cart-item-row.is-unavailable {
    margin-left: -8px;
    padding-left: 4px;
  }

  .point-adjustment-record {
    grid-template-columns: 1fr;
  }
}

/* Version 0.6 approval and multi-campus workflows */
/*
 * A tab strip for switching between sections of one page. Written for the approvals queue and
 * since reused by the email log, where two full-height tables meant whichever one somebody came
 * for started below the other.
 */
.section-tabs {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-5);
  border-radius: 8px;
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  width: fit-content;
}

.section-tab {
  align-items: center;
  border-radius: 5px;
  color: var(--asu-black);
  display: flex;
  font-weight: 700;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
}

.section-tab strong {
  align-items: center;
  background: var(--asu-gray-6);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.78rem;
  justify-content: center;
  min-width: 26px;
  padding: 4px 8px;
}

.section-tab.is-active {
  background: var(--asu-gold);
}

.section-tab.is-active strong {
  background: rgba(25, 25, 25, 0.16);
}

/*
 * The approvals queue: a scrolling list of requests beside one open record.
 *
 * Deliberately modelled on .user-workspace above rather than sharing it. The two layouts look
 * alike and are meant to, but that one carries a mobile drawer driven by JavaScript hooks
 * (data-user-detail-shell and friends) that this page has no use for -- approvals resolve their
 * selection on the server, so the list is plain anchors. Borrowing the class would have meant
 * inheriting behaviour this page does not want, and constraining the other page's markup to
 * whatever this one happened to need.
 */
.approval-workspace {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  height: clamp(560px, calc(100vh - 320px), 780px);
  min-height: 560px;
}

.approval-directory {
  border-right: 1px solid var(--asu-gray-6);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.approval-status-filter {
  border-bottom: 1px solid var(--asu-gray-6);
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
}

.approval-status-option {
  border: 1px solid var(--asu-gray-5);
  border-radius: 6px;
  color: var(--asu-black);
  font-weight: 700;
  padding: 9px 12px;
  text-align: center;
  text-decoration: none;
}

.approval-status-option:hover,
.approval-status-option:focus-visible {
  background: #f7f7f7;
}

.approval-status-option.is-active {
  background: var(--asu-gold);
  border-color: var(--asu-gold);
}

.approval-list-summary {
  border-bottom: 1px solid var(--asu-gray-6);
  color: var(--asu-gray-2);
  font-size: 0.82rem;
  margin: 0;
  padding: 9px 16px;
}

/* The list is the only part that scrolls, so the filter above it stays reachable. */
.approval-list {
  display: grid;
  flex: 1 1 auto;
  grid-auto-rows: max-content;
  min-height: 0;
  overflow-y: auto;
}

.approval-list-item {
  color: inherit;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  text-decoration: none;
}

.approval-list-item + .approval-list-item {
  border-top: 1px solid var(--asu-gray-6);
}

.approval-list-item:hover,
.approval-list-item:focus-visible {
  background: #f7f7f7;
}

.approval-list-item.is-selected {
  background: #fff7dc;
  box-shadow: inset 4px 0 0 var(--asu-gold);
}

.approval-list-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.approval-list-identity strong,
.approval-list-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-list-identity span {
  color: var(--asu-gray-2);
  font-size: 0.82rem;
}

.approval-list-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 8px;
}

.approval-list-delta {
  font-weight: 700;
}

.approval-list-delta.is-positive {
  /* Matches .point-adjustment-delta.is-positive; --asu-green is a display lime, not a text colour. */
  color: #2d6a32;
}

.approval-list-delta.is-negative {
  color: var(--asu-maroon);
}

.approval-detail {
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

.approval-detail-empty {
  display: grid;
  gap: 8px;
  place-content: center;
  height: 100%;
  text-align: center;
}

.approval-detail-record {
  display: grid;
  gap: 20px;
}

.approval-detail-header {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.approval-detail-header h2 {
  margin: 0;
}

.approval-detail-header p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.approval-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*
 * Approve and deny sit side by side, each with its own note field. Two separate forms rather
 * than one form with two buttons: denial requires a reason and approval does not, and a single
 * form cannot make one field conditionally required without JavaScript.
 */
.approval-detail-actions {
  border-top: 1px solid var(--asu-gray-5);
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 20px;
}

.approval-detail-actions form {
  align-content: start;
  display: grid;
  gap: 10px;
}

.approval-note-field {
  display: grid;
  gap: 5px;
}

.approval-note-field > span {
  font-size: 0.82rem;
  font-weight: 700;
}

.approval-note-field input {
  min-height: 40px;
  width: 100%;
}

@media (max-width: 900px) {
  /*
   * Stacked rather than side by side, with the list capped so the open record is not pushed
   * below the fold on a phone. The list still scrolls inside its own box.
   */
  .approval-workspace {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }

  .approval-directory {
    border-bottom: 1px solid var(--asu-gray-6);
    border-right: 0;
  }

  .approval-list {
    max-height: 320px;
  }

  .approval-detail {
    padding: 20px 16px;
  }

  .approval-detail-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Event review: the decision at the top, the request under it.
 *
 * Approving an event needs five fields and denying it needs one, so the shared two-column
 * .approval-detail-actions layout floated Deny up beside the header while Approve was pushed
 * below the fold -- the reviewer met the destructive action first and had to scroll to reach the
 * one they wanted. The buttons move to a bar under the header and stay there while the panel
 * scrolls; the fieldsets they submit sit lower down, paired by the form attribute.
 */
.approval-decision-bar {
  background: var(--asu-white);
  border-bottom: 1px solid var(--asu-gray-5);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 4px;
  padding-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.approval-event-decision {
  border-top: 1px solid var(--asu-gray-5);
  display: grid;
  gap: 14px;
  padding-top: 18px;
}

.approval-event-decision h3 {
  margin: 0;
}

/*
 * Two columns so the five approval fields read as two short rows rather than one long ladder.
 * auto-fit rather than a fixed count: the panel is also the full width of a phone.
 */
.approval-event-fields {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.approval-field-wide {
  grid-column: 1 / -1;
}

/* Display QR and, for administrators, Edit -- side by side, wrapping on a phone. */
.approval-event-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.approval-event-fields select,
.approval-event-fields input {
  min-height: 40px;
  width: 100%;
}

.approval-event-deny {
  border-top: 1px dashed var(--asu-gray-5);
  padding-top: 14px;
}

.approval-event-deny input {
  min-height: 40px;
  width: 100%;
}

.adjustment-request-page,
.adjustment-student-list {
  gap: 16px;
}

.adjustment-search-form {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
}

.adjustment-student-card {
  align-items: center;
  border-top: 1px solid var(--asu-gray-5);
  display: grid;
  gap: 14px 22px;
  grid-template-columns: minmax(180px, 1fr) auto;
  padding: 20px 0;
}

.adjustment-student-card > div:first-child,
.adjustment-student-balance {
  display: grid;
  gap: 4px;
}

.adjustment-student-card > div:first-child span,
.adjustment-student-balance span {
  color: var(--asu-gray-2);
  font-size: 0.85rem;
}

.adjustment-request-form {
  align-items: start;
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-5);
  border-radius: var(--radius);
  display: grid;
  gap: 16px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(150px, .55fr) minmax(170px, .45fr) minmax(260px, 1fr);
  padding: 18px;
}

.campus-target-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.store-item-form .variant-row {
  align-items: stretch;
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-5);
  border-radius: 7px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  padding: 12px;
}

.variant-definition-grid {
  align-items: end;
  display: grid;
  gap: 10px;
  /*
   * The last column holds either the remove button or, on a saved variation, a short note
   * explaining why there is no button. Sizing it to the 38px button squeezed that note into a
   * two-line sliver, so it takes the width its content needs.
   */
  grid-template-columns: minmax(150px, 1.35fr) minmax(120px, 1fr) 80px auto auto;
}

/*
 * A checkbox belongs beside its own label. These sit in grid cells that are far wider than the
 * pair needs, and a stretched flex row left the box adrift in the middle of the row with its
 * wording stranded at the far edge, reading as an unlabeled stray control.
 */
.variant-definition-grid > .check-row,
.variant-inventory-grid > .check-row {
  justify-self: start;
  white-space: nowrap;
}

.variant-saved-note {
  align-items: center;
  align-self: center;
  color: var(--asu-gray-3);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 600;
  gap: 6px;
  white-space: nowrap;
}

.store-item-form .variant-row .field > span {
  clip: auto;
  clip-path: none;
  height: auto;
  overflow: visible;
  position: static;
  white-space: normal;
  width: auto;
}

.variant-inventory-grid {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(90px, 140px)) auto;
}

.campus-inventory-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.campus-inventory-grid fieldset {
  align-items: end;
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-5);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(70px, 1fr));
  margin: 0;
  min-width: 0;
  padding: 10px;
}

.campus-inventory-grid fieldset:disabled {
  display: none;
}

.campus-inventory-grid legend {
  font-size: 0.86rem;
  font-weight: 800;
  grid-column: 1 / -1;
  padding: 0 4px;
}

.campus-inventory-grid .check-row {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .section-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .section-tab {
    justify-content: space-between;
  }

  .adjustment-search-form,
  .adjustment-student-card,
  .adjustment-request-form,
  .variant-definition-grid,
  .variant-inventory-grid {
    grid-template-columns: 1fr;
  }

  .adjustment-student-balance {
    justify-self: start;
  }

  .variant-definition-grid .variant-remove {
    justify-self: end;
  }
}

/* Version 0.6.2 unified, content-sized hero system. */
.operations-hero {
  overflow: visible;
}

.operations-hero .operations-hero-inner,
.store-operations-hero .operations-hero-inner {
  align-items: center;
  gap: 18px 32px;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 520px);
  grid-template-rows: auto;
  height: auto;
  min-height: 0;
  padding: 26px 32px 33px;
}

.operations-hero .operations-hero-context {
  grid-column: 1 / -1;
}

.operations-hero .operations-hero-copy {
  align-self: center;
}

.operations-hero .operations-hero-copy h1,
.admin-landing-hero h1,
.compact-page-hero-copy h1 {
  font-size: clamp(2rem, 3vw, 2.4rem);
  line-height: 1.08;
  margin: 5px 0 10px;
}

.operations-hero .operations-hero-copy > p,
.admin-landing-hero p,
.admin-landing-hero p.muted,
.compact-page-hero-copy p {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}

.operations-hero .eyebrow,
.admin-landing-hero .eyebrow,
.compact-page-hero .eyebrow {
  font-size: 0.8rem;
  color: var(--asu-gold);
  line-height: 1.2;
  margin: 0;
}

.operations-hero .hero-action-dock,
.store-operations-hero .store-action-dock {
  align-content: center;
  align-self: center;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.operations-hero .hero-action-link,
.store-operations-hero .hero-action-link {
  min-height: 74px;
  overflow: visible;
  padding: 10px 14px;
}

.operations-hero .hero-action-link:last-child:nth-child(odd),
.store-operations-hero .hero-action-link:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.operations-hero .hero-action-link strong {
  font-size: 1rem;
  line-height: 1.2;
}

.operations-hero .hero-action-link small {
  font-size: 0.78rem;
  line-height: 1.3;
}

.operations-hero .hero-stat-row {
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  margin-top: 16px;
}

.operations-hero .hero-stat-row span {
  align-items: center;
  background: rgba(255, 255, 255, 0.09);
  border: 0;
  border-radius: 4px;
  display: flex;
  gap: 8px;
  min-height: 46px;
  padding: 8px 11px;
  white-space: normal;
}

.operations-hero .hero-stat-row span + span {
  border-left: 0;
  padding-left: 11px;
}

.operations-hero .hero-stat-row small,
.operations-hero .hero-stat-row span {
  font-size: 0.78rem;
  line-height: 1.2;
}

.operations-hero .hero-inline-stat {
  margin-top: 16px;
}

.compact-page-hero-inner,
.admin-landing-hero-inner {
  box-sizing: border-box;
  height: auto;
  min-height: 132px;
  padding: 24px 32px 31px;
}

.admin-landing-hero {
  overflow: visible;
}

@media (max-width: 1050px) {
  .operations-hero .operations-hero-inner,
  .store-operations-hero .operations-hero-inner {
    gap: 20px;
    grid-template-columns: 1fr;
    padding-bottom: 31px;
  }

  .operations-hero .operations-hero-context {
    grid-column: 1;
  }
}

@media (max-width: 700px) {
  .operations-hero .operations-hero-inner,
  .store-operations-hero .operations-hero-inner {
    gap: 18px;
    padding: 20px 14px 27px;
  }

  .operations-hero .operations-hero-context {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .operations-hero .hero-action-dock,
  .store-operations-hero .store-action-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-hero .hero-action-link:last-child:nth-child(odd),
  .store-operations-hero .hero-action-link:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .operations-hero .hero-action-link,
  .store-operations-hero .hero-action-link {
    gap: 9px;
    min-height: 58px;
    padding: 9px 11px;
  }

  .operations-hero .hero-action-link small {
    display: none;
  }

  .operations-hero .hero-action-link strong {
    font-size: 0.94rem;
  }

  .operations-hero .hero-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-hero .operations-hero-copy h1,
  .admin-landing-hero h1,
  .compact-page-hero-copy h1 {
    font-size: 1.9rem;
  }

  .compact-page-hero-inner,
  .admin-landing-hero-inner {
    height: auto;
    min-height: 0;
    padding: 20px 14px 27px;
  }
}

/* Version 0.7 inventory hold workspace. */
.inventory-holds-page {
  display: grid;
  gap: 18px;
}

.hold-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hold-summary-card {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-top: 4px solid var(--asu-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: 5px;
  padding: 18px 20px;
}

.hold-summary-card > span,
.hold-summary-card small {
  color: var(--asu-gray-2);
}

.hold-summary-card > span {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hold-summary-card > strong {
  font-size: 2rem;
  line-height: 1;
}

.inventory-hold-list,
.hold-cart-list,
.active-hold-carts {
  display: grid;
  gap: 10px;
}

.inventory-hold-item {
  border: 1px solid var(--asu-gray-5);
  border-radius: 6px;
  overflow: hidden;
}

.inventory-hold-item > summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  list-style: none;
  min-height: 68px;
  padding: 12px 16px;
}

.inventory-hold-item > summary::-webkit-details-marker {
  display: none;
}

.inventory-hold-item > summary > span:first-child,
.hold-cart-list article > div,
.active-hold-cart-student,
.active-hold-cart-release {
  display: grid;
  gap: 3px;
}

.inventory-hold-item summary small,
.hold-cart-list small,
.active-hold-cart span,
.active-hold-cart small {
  color: var(--asu-gray-2);
  font-size: 0.82rem;
}

.inventory-hold-item[open] > summary {
  background: var(--asu-gray-7);
  border-bottom: 1px solid var(--asu-gray-6);
}

.inventory-hold-item[open] > summary svg {
  transform: rotate(180deg);
}

.hold-item-total {
  white-space: nowrap;
}

.hold-cart-list {
  padding: 8px 16px 14px;
}

.hold-cart-list article {
  align-items: center;
  border-bottom: 1px solid var(--asu-gray-6);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 10px 0;
}

.hold-cart-list article:last-child {
  border-bottom: 0;
}

.active-hold-cart {
  align-items: center;
  border: 1px solid var(--asu-gray-6);
  border-radius: 6px;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(170px, 0.8fr) minmax(240px, 1.5fr) minmax(190px, auto);
  padding: 14px 16px;
}

.active-hold-cart-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
}

.active-hold-cart-release {
  justify-items: end;
  text-align: right;
}

@media (max-width: 760px) {
  .hold-summary-grid {
    grid-template-columns: 1fr;
  }

  .inventory-holds-page .section-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .inventory-holds-page .section-heading-row .button {
    align-self: flex-start;
  }

  .inventory-hold-item > summary {
    gap: 8px 12px;
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  .hold-item-total {
    grid-column: 1;
    white-space: normal;
  }

  .inventory-hold-item > summary svg {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .hold-cart-list article {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .active-hold-cart {
    grid-template-columns: 1fr;
  }

  .active-hold-cart-release {
    justify-items: start;
    text-align: left;
  }
}

/* Compact student catalog, cart drawer, and product image viewer. */
/*
 * The needs-review marker on a QR registry row. Maroon rather than a warning yellow: the rows
 * it appears on are ones an administrator asked to be told about, and yellow reads as advisory
 * next to the status pills already using gold for Expired.
 */
.qr-anomaly-flag {
  align-items: center;
  color: var(--asu-maroon);
  display: inline-flex;
}

.qr-anomaly-flag svg {
  height: 18px;
  width: 18px;
}

/*
 * The registry table. Eleven columns, several holding one short word, left nothing wide enough
 * to read: the created date wrapped mid-value and the view control was squeezed off the row.
 * The widths below are proportions rather than fixed sizes, apart from the action column, which
 * is fixed precisely so nothing can push it out again.
 */
/*
 * The economy ledger, on the same footing as the QR registry below. Eight columns -- one of them
 * a full transaction uuid set in monospace -- left the effective date too narrow to hold its own
 * value, which is the same failure the registry had.
 */
.economy-ledger-table {
  table-layout: fixed;
  width: 100%;
}

.economy-ledger-table td,
.economy-ledger-table th {
  overflow-wrap: anywhere;
  vertical-align: top;
}

.economy-ledger-table small {
  color: var(--asu-gray-2);
  display: inline-block;
  line-height: 1.3;
}

.economy-ledger-table .ledger-cell-when {
  white-space: nowrap;
}

.economy-ledger-table .ledger-uuid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem;
}

.ledger-col-when { width: 13%; }
.ledger-col-student { width: 21%; }
.ledger-col-type { width: 15%; }
.ledger-col-change { width: 13%; }
.ledger-col-source { width: 22%; }
.ledger-col-transaction { width: 16%; }

@media (max-width: 900px) {
  .economy-ledger-table {
    table-layout: auto;
  }
}

.qr-registry-table {
  table-layout: fixed;
  width: 100%;
}

.qr-registry-table td,
.qr-registry-table th {
  overflow-wrap: anywhere;
  vertical-align: top;
}

.qr-registry-table small {
  color: var(--asu-gray-2);
  display: inline-block;
  line-height: 1.3;
}

.qr-col-created { width: 13%; }
.qr-col-code { width: 23%; }
.qr-col-type { width: 14%; }
.qr-col-people { width: 19%; }
.qr-col-usage { width: 12%; }
.qr-col-status { width: 15%; }
.qr-col-action { width: 58px; }

/*
 * The date read as nonsense broken mid-value, which is what it was doing. Split deliberately
 * instead -- day on one line, time under it -- so each part stays whole in a narrow column.
 */
.qr-registry-table .qr-cell-created {
  white-space: nowrap;
}

/* The marker qualifies the status, so it sits with it rather than in a column of its own. */
.qr-status-cell {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 900px) {
  /*
   * Below this the proportions stop helping -- the shared responsive-table treatment stacks each
   * row into labelled lines, and fixed widths would fight it.
   */
  .qr-registry-table {
    table-layout: auto;
  }
}

/*
 * The campaign progress bar, now inline in a table cell rather than the full width of a card.
 */
.email-campaign-table .email-campaign-progress {
  background: var(--asu-gray-6);
  border-radius: 999px;
  display: block;
  height: 6px;
  margin: 0 0 4px;
  max-width: 160px;
  overflow: hidden;
}

.email-campaign-table .email-campaign-progress span {
  background: var(--asu-gold);
  display: block;
  height: 100%;
}

.email-campaign-failed {
  color: var(--asu-maroon);
}

.pagination-gap {
  color: var(--asu-gray-2);
  padding: 0 4px;
}

/*
 * The front-desk board. Tiles rather than rows because the board is read at a glance from
 * arm-length across a counter, and the one that needs attention has to be findable without
 * reading any of them.
 */
/*
 * The waiting list, at the top of the board rather than under the tiles. A person waiting on
 * somebody outranks a count of what is running, and the activity page already treats its
 * attestations this way -- the two screens should read the same.
 */
/*
 * The way into the front desk board from the activity list. It replaced the board's own
 * navigation entry, so it has to look like a destination rather than a footnote.
 */
.desk-board-callout {
  align-items: center;
  background: var(--asu-black);
  border-left: 6px solid var(--asu-gold);
  border-radius: 6px;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 14px 18px;
  text-decoration: none;
}

.desk-board-callout:hover .desk-board-callout-label,
.desk-board-callout:focus-visible .desk-board-callout-label {
  text-decoration: underline;
}

.desk-board-callout-label {
  align-items: center;
  color: var(--asu-gold);
  display: inline-flex;
  font-weight: 900;
  gap: 8px;
}

.desk-board-callout-label svg {
  height: 20px;
  width: 20px;
}

.desk-board-callout-detail {
  color: rgb(255 255 255 / 82%);
  font-size: .9rem;
}

.desk-attention-banner {
  border-top: 4px solid var(--asu-gold);
}

/*
 * The waiting list, compact.
 *
 * Each student was a tall card with a full-width note field under them, so three people waiting
 * filled the screen and pushed the activity tiles out of sight -- on the page whose whole job is
 * being readable at a glance across a counter. One row each now, with the note and both actions
 * on the same line, wrapping only when there is genuinely no room.
 */
.desk-attempt {
  align-items: end;
  gap: 10px 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  padding-top: 10px;
}

.desk-attempt-summary strong {
  display: block;
}

.desk-attempt-summary p {
  color: var(--asu-gray-2);
  font-size: .85rem;
  margin: 2px 0 0;
}

.desk-attempt-actions {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.desk-attempt-actions .field {
  margin-bottom: 0;
  min-width: 200px;
}

.desk-attempt-actions form {
  align-items: end;
  display: flex;
  gap: 8px;
  margin: 0;
}

@media (max-width: 720px) {
  .desk-attempt {
    grid-template-columns: minmax(0, 1fr);
  }
}

.desk-live {
  display: grid;
  gap: 18px;
}

/* Why a kiosk prompt is offered but not usable yet, said plainly next to the button. */
.desk-tile-note {
  align-items: center;
  display: flex;
  font-size: .78rem;
  gap: 6px;
  margin: 8px 0 0;
}

.desk-tile-note svg {
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

/* An awake tablet is the state the button can actually be used in, so it reads as good news. */
.desk-tile-note.is-online {
  color: #4a7a12;
  font-weight: 700;
}

/*
 * The tile's actions, as a footer belonging to the tile.
 *
 * They used to sit loose in the tile's padding as two identical grey buttons, which made them
 * read as things dropped onto the card rather than part of it, and said nothing about which of
 * the two a desk worker reaches for. Full-bleed to the tile's edges on a tinted strip fixes the
 * first; colouring by purpose fixes the second.
 *
 * The negative margins cancel the tile's own 16px padding exactly. They are the reason the strip
 * meets the border instead of stopping short of it, so if the tile's padding changes, these do.
 */
.desk-tile-actions {
  background: var(--asu-gray-7);
  border-radius: 0 0 7px 7px;
  border-top: 1px solid var(--asu-gray-6);
  margin: 4px -16px -16px;
  padding: 12px 16px;
}

.desk-tile-action-row {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

/* One action gets the whole width rather than half of it and an empty gap. */
.desk-tile-action-row.is-single {
  grid-template-columns: 1fr;
}

/* Each half holds a form wrapping its button, so the form has to stretch too. */
.desk-tile-action-row form {
  display: grid;
  margin: 0;
}

/*
 * A tile is read at arm's length across a counter, so the numbers on it are what should be big.
 * These stay smaller than a page button for that reason, and "Show on tablet" is a fixed phrase
 * rather than including the tablet's name, which used to wrap onto three lines for a long one.
 */
.desk-tile-action {
  font-size: .82rem;
  min-height: 34px;
  padding: .45rem .7rem;
  width: 100%;
}

.desk-tile-action svg {
  height: 15px;
  width: 15px;
}

/* Gold: putting the code on the tablet facing the student is what the desk is here to do. */
.desk-tile-action.is-primary {
  background: var(--asu-gold);
  border-color: #e0a800;
  color: var(--asu-black);
}

.desk-tile-action.is-primary:hover:not(:disabled) {
  background: #ffd35c;
}

/*
 * Disabled means the tablet is asleep, which is temporary and recoverable -- so it reads as
 * unavailable rather than as forbidden, and the note underneath says how to fix it.
 */
.desk-tile-action.is-primary:disabled {
  background: var(--asu-gray-6);
  border-color: var(--asu-gray-5);
  color: var(--asu-gray-2);
  cursor: not-allowed;
}

/* White: opening the activity is navigation, and navigation should not shout. */
.desk-tile-action.is-secondary {
  background: var(--asu-white);
  border-color: var(--asu-gray-4);
  color: var(--asu-black);
}

.desk-tile-action.is-secondary:hover {
  border-color: var(--asu-gray-2);
}

.desk-tile-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.desk-tile {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-5);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 16px;
}

/* Gold, matching the pending pill used everywhere else for work that is waiting on somebody. */
.desk-tile.needs-attention {
  border-color: var(--asu-gold);
  box-shadow: inset 4px 0 0 var(--asu-gold);
}

.desk-tile header {
  align-items: start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.desk-tile h3 {
  margin: 0;
}

.desk-tile p {
  margin: 0;
}

.desk-tile-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.desk-tile-stats dt {
  color: var(--asu-gray-2);
  font-size: 0.72rem;
  font-weight: 700;
}

.desk-tile-stats dd {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
}

.desk-tile-stats dd.is-waiting {
  color: var(--asu-maroon);
}

.desk-attempt-list {
  display: grid;
  gap: 12px;
}

.desk-attempt {
  align-items: center;
  border-top: 1px solid var(--asu-gray-6);
  display: grid;
  gap: 12px 24px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
  padding-top: 12px;
}

.desk-attempt form {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 720px) {
  .desk-attempt,
  .desk-attempt form {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

.student-store-page {
  display: grid;
  gap: 22px;
}

.store-catalog-toolbar {
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(25, 25, 25, 0.08);
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(130px, auto) minmax(220px, 420px) auto;
  justify-content: space-between;
  padding: 12px 14px 12px 18px;
  position: sticky;
  top: 10px;
  z-index: 30;
}

.store-search-field,
.elevated-access-search {
  align-items: center;
  display: flex;
  min-width: 0;
  position: relative;
}

.store-search-field svg,
.elevated-access-search svg {
  color: var(--asu-gray-3);
  height: 18px;
  left: 12px;
  pointer-events: none;
  position: absolute;
  width: 18px;
}

.store-search-field input,
.elevated-access-search input {
  min-height: 42px;
  padding: 8px 12px 8px 38px;
  width: 100%;
}

.store-catalog-toolbar h2,
.store-catalog-toolbar p {
  margin: 0;
}

.store-catalog-toolbar h2 {
  font-size: 1.18rem;
}

.store-catalog-toolbar p {
  font-size: 0.88rem;
  margin-top: 2px;
}

.store-cart-button {
  align-items: center;
  background: var(--asu-white);
  border: 2px solid var(--asu-maroon);
  border-radius: 999px;
  color: var(--asu-maroon);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-weight: 800;
  gap: 8px;
  min-height: 44px;
  padding: 6px 7px 6px 14px;
}

.store-cart-button:hover {
  background: #fff5f7;
}

.store-cart-button svg {
  height: 20px;
  width: 20px;
}

.store-cart-count {
  align-items: center;
  background: var(--asu-maroon);
  border-radius: 999px;
  color: var(--asu-white);
  display: inline-flex;
  font-size: 0.82rem;
  justify-content: center;
  min-height: 28px;
  min-width: 28px;
  padding: 2px 7px;
}

.store-product-grid.store-product-grid--compact {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

.store-card.store-card--compact {
  border-radius: 8px;
  grid-template-columns: 116px minmax(0, 1fr);
  grid-template-rows: 1fr;
  min-height: 174px;
  overflow: hidden;
}

.store-card.store-card--compact.is-out-of-stock {
  border-color: var(--asu-maroon);
  box-shadow: inset 4px 0 0 var(--asu-maroon), 0 7px 18px rgba(25, 25, 25, 0.07);
}

.store-card--compact[hidden] {
  display: none;
}

.store-no-results {
  align-items: center;
  border: 1px dashed var(--asu-gray-5);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  padding: 28px;
  text-align: center;
}

.store-no-results[hidden] {
  display: none;
}

.store-no-results svg {
  color: var(--asu-maroon);
  height: 36px;
  margin-bottom: 10px;
  width: 36px;
}

.store-no-results h3,
.store-no-results p {
  margin: 0;
}

.store-card-image-button {
  background: var(--asu-gray-7);
  border: 0;
  cursor: zoom-in;
  display: block;
  min-width: 0;
  padding: 0;
  position: relative;
}

.store-card--compact .store-card-media {
  background: var(--asu-white);
  height: 100%;
  min-height: 174px;
  object-fit: contain;
  padding: 8px;
  width: 116px;
}

.store-card--compact .store-card-media--placeholder {
  padding: 0;
}

.store-card--compact .store-card-media--placeholder span {
  font-size: 1.35rem;
  height: 54px;
  width: 54px;
}

.store-image-zoom {
  align-items: center;
  background: rgba(25, 25, 25, 0.78);
  border-radius: 999px;
  bottom: 8px;
  color: var(--asu-white);
  display: inline-flex;
  height: 30px;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: 8px;
  transition: opacity 140ms ease;
  width: 30px;
}

.store-card-image-button:hover .store-image-zoom,
.store-card-image-button:focus-visible .store-image-zoom {
  opacity: 1;
}

.store-image-zoom svg {
  height: 16px;
  width: 16px;
}

.store-card-content {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
}

.store-card--compact .store-card-body {
  padding: 13px 14px 4px;
}

.store-card--compact .store-card-body h2 {
  font-size: 1rem;
  line-height: 1.22;
  margin: 0 0 5px;
}

.store-card--compact .store-card-body p {
  display: -webkit-box;
  font-size: 0.86rem;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.store-card--compact .store-card-footer {
  gap: 8px;
  padding: 6px 14px 12px;
}

.store-card--compact .store-card-meta {
  gap: 5px;
}

.store-card--compact .pill {
  font-size: 0.74rem;
  padding: 4px 8px;
}

.store-card-add-form {
  align-items: center;
  display: flex;
  gap: 7px;
}

.store-card-add-form .store-variant-field {
  flex: 1 1 auto;
  min-width: 0;
}

.store-card-add-form select {
  font-size: 0.84rem;
  min-height: 38px;
  padding: 6px 30px 6px 8px;
  width: 100%;
}

.store-card--compact .store-card-add-form .button {
  flex: 0 0 auto;
  gap: 4px;
  min-height: 38px;
  padding: 7px 11px;
  width: auto;
}

.store-card--compact .store-card-add-form .button svg {
  height: 16px;
  width: 16px;
}

body.has-store-overlay {
  overflow: hidden;
}

.store-cart-drawer-shell,
.store-image-lightbox {
  inset: 0;
  pointer-events: none;
  position: fixed;
  visibility: hidden;
}

.store-cart-drawer-shell {
  z-index: 1250;
}

.store-cart-drawer-shell.is-open,
.store-image-lightbox.is-open {
  pointer-events: auto;
  visibility: visible;
}

.store-cart-scrim,
.store-image-lightbox-scrim {
  background: rgba(25, 25, 25, 0.58);
  border: 0;
  inset: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  transition: opacity 180ms ease;
  width: 100%;
}

.store-cart-drawer-shell.is-open .store-cart-scrim,
.store-image-lightbox.is-open .store-image-lightbox-scrim {
  opacity: 1;
}

.store-cart-drawer {
  background: var(--asu-white);
  bottom: 0;
  box-shadow: -20px 0 50px rgba(25, 25, 25, 0.24);
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 430px;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(102%);
  transition: transform 220ms ease;
  width: min(92vw, 430px);
}

.store-cart-drawer-shell.is-open .store-cart-drawer {
  transform: translateX(0);
}

.store-cart-drawer-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--asu-gray-6);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 22px 20px 18px;
}

.store-cart-drawer-header h2,
.store-cart-drawer-header p {
  margin: 0;
}

.store-cart-drawer-header .eyebrow {
  color: var(--asu-maroon);
  margin-bottom: 3px;
}

.store-cart-drawer-body {
  overflow-y: auto;
  padding: 8px 20px 20px;
}

.store-cart-drawer-item {
  align-items: flex-start;
  border-bottom: 1px solid var(--asu-gray-6);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 14px 0;
}

/*
 * The drawer is shared with the assisted store, where a worker can take an item back off the
 * counter. The remove control is the last thing in the row so the price stays where a student
 * reading their own cart expects to find it.
 */
.store-cart-drawer-item form {
  margin: 0;
}

.store-cart-hold-note {
  font-size: .82rem;
  margin: 0;
}

/* The override controls sit inside the checkout form, so the whole thing needs to stack. */
.store-cart-checkout-form {
  display: grid;
  gap: .6rem;
}

.store-cart-drawer-item > div {
  display: grid;
  gap: 2px;
}

.store-cart-drawer-item > strong {
  white-space: nowrap;
}

.store-cart-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
}

.store-cart-empty svg {
  color: var(--asu-maroon);
  height: 42px;
  margin-bottom: 12px;
  width: 42px;
}

.store-cart-empty h3,
.store-cart-empty p {
  margin: 0;
}

.store-cart-drawer-footer {
  background: var(--asu-gray-7);
  border-top: 1px solid var(--asu-gray-6);
  display: grid;
  gap: 14px;
  padding: 18px 20px 22px;
}

.store-cart-total {
  align-items: baseline;
  display: flex;
  font-size: 1.08rem;
  justify-content: space-between;
}

.store-cart-drawer-footer .button {
  width: 100%;
}

.store-image-lightbox {
  z-index: 1300;
}

.store-image-lightbox-dialog {
  align-items: center;
  background: var(--asu-white);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(25, 25, 25, 0.34);
  display: grid;
  inset: 50% auto auto 50%;
  justify-items: center;
  margin: 0;
  max-height: 92vh;
  max-width: 92vw;
  min-width: min(620px, 88vw);
  padding: 44px 24px 18px;
  position: absolute;
  transform: translate(-50%, -48%) scale(0.98);
  transition: transform 180ms ease;
}

.store-image-lightbox.is-open .store-image-lightbox-dialog {
  transform: translate(-50%, -50%) scale(1);
}

.store-image-lightbox-dialog img {
  max-height: 72vh;
  max-width: min(760px, 82vw);
  object-fit: contain;
}

.store-image-lightbox-dialog figcaption {
  font-weight: 700;
  padding-top: 12px;
  text-align: center;
}

.store-image-lightbox-close {
  position: absolute;
  right: 12px;
  top: 12px;
}

@media (max-width: 760px) {
  .student-store-page {
    gap: 16px;
  }

  .store-catalog-toolbar {
    gap: 10px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    top: 6px;
  }

  .store-search-field {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .store-cart-button {
    padding-left: 11px;
  }

  .store-product-grid.store-product-grid--compact {
    grid-template-columns: 1fr;
  }

  .store-card.store-card--compact {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 154px;
  }

  .store-card--compact .store-card-media {
    height: 100%;
    min-height: 154px;
    width: 92px;
  }

  .store-card--compact .store-card-body {
    padding-left: 11px;
    padding-right: 11px;
  }

  .store-card--compact .store-card-footer {
    padding-left: 11px;
    padding-right: 11px;
  }

  .store-card-add-form {
    align-items: stretch;
    flex-direction: column;
  }

  .store-card--compact .store-card-add-form .button {
    justify-content: center;
    width: 100%;
  }

  .store-image-lightbox-dialog {
    min-width: 92vw;
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-cart-drawer,
  .store-cart-scrim,
  .store-image-lightbox-dialog,
  .store-image-lightbox-scrim {
    transition: none;
  }
}
/* Version 0.11 recurring activities, bulk issue, and quick QR */
.hero-action-form {
  display: contents;
}

.hero-action-form .hero-action-link {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}

.quick-qr-page {
  background: #191919;
  min-height: 100vh;
  padding: clamp(18px, 4vw, 42px);
  place-items: center;
}

.quick-qr-panel {
  margin: 0 auto;
  max-width: 760px;
  padding: clamp(22px, 5vw, 52px);
  text-align: center;
  width: 100%;
}

.quick-qr-panel .qr-image {
  width: 100%;
}

.quick-qr-panel .branded-qr {
  max-width: min(72vw, 460px);
}

.activity-qr-page {
  display: grid;
  min-height: 100dvh;
  position: relative;
}

.activity-qr-page.is-embedded,
.activity-qr-page.is-kiosk {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: clamp(10px, 2.4vh, 24px);
}

.activity-qr-page.is-kiosk {
  background:
    radial-gradient(circle at 50% 45%, rgb(255 198 39 / 13%), transparent 42%),
    linear-gradient(180deg, rgb(0 0 0 / 6%), rgb(0 0 0 / 20%));
}

.activity-qr-panel {
  align-content: center;
  color: var(--asu-black);
  display: grid;
  gap: clamp(6px, 1.2vh, 14px);
}

.activity-qr-page.is-embedded .activity-qr-panel,
.activity-qr-page.is-kiosk .activity-qr-panel {
  max-height: 100%;
  overflow: hidden;
  padding: clamp(16px, 2.8vh, 32px);
}

.activity-qr-heading h1,
.activity-qr-heading p,
.activity-qr-panel > p {
  margin-block: 0;
}

.activity-qr-heading {
  display: grid;
  gap: .2rem;
}

.activity-qr-location {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .65rem;
  justify-content: center;
}

.activity-qr-location span {
  color: var(--muted);
}

.activity-qr-instruction {
  font-size: clamp(1rem, 2.4vh, 1.3rem);
  font-weight: 700;
}

.activity-qr-code {
  margin-inline: auto;
  max-width: min(54vh, 460px);
  position: relative;
  width: min(72vw, 460px);
}

.activity-qr-code .branded-qr {
  margin-bottom: 0;
  max-width: none;
}

.activity-qr-overlay {
  align-content: center;
  background: rgba(255, 255, 255, .96);
  border: 2px solid var(--asu-gold);
  border-radius: var(--radius);
  color: var(--asu-black);
  display: grid;
  gap: .5rem;
  inset: 0;
  min-height: 180px;
  padding: 1.5rem;
  position: absolute;
  z-index: 3;
}

.activity-qr-overlay[hidden] {
  display: none;
}

.activity-qr-overlay strong {
  color: var(--asu-maroon);
  font-size: 1.4rem;
}

.activity-qr-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.1rem;
  gap: .65rem;
  justify-content: center;
}

.activity-qr-meta > strong {
  font-size: 1.35rem;
}

.qr-link-details {
  margin-inline: auto;
  max-width: 100%;
}

.qr-link-details summary {
  color: var(--asu-maroon);
  cursor: pointer;
  font-weight: 700;
}

.qr-link-copy-row {
  align-items: center;
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
  max-width: 100%;
}

.qr-link-copy-row code {
  background: var(--asu-gray-7);
  border-radius: 4px;
  font-size: .78rem;
  max-width: min(520px, 70vw);
  overflow-wrap: anywhere;
  padding: .45rem;
  text-align: left;
  word-break: break-all;
}

.kiosk-controls {
  display: flex;
  gap: .5rem;
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 5;
}

.is-kiosk .activity-qr-panel {
  background: rgb(255 255 255 / 96%);
  border: 1px solid rgb(255 255 255 / 45%);
  border-top: 7px solid var(--asu-gold);
  box-shadow: 0 24px 70px rgb(0 0 0 / 38%);
  max-width: 900px;
  position: relative;
}

.is-kiosk .activity-qr-code {
  max-width: min(59vh, 560px);
  width: min(74vw, 560px);
}

.is-kiosk .activity-qr-heading h1 {
  color: var(--asu-maroon);
  font-size: clamp(1.7rem, 4vh, 3rem);
}

.is-kiosk .activity-qr-panel::after {
  background: linear-gradient(90deg, var(--asu-maroon) 0 68%, var(--asu-gold) 68% 100%);
  bottom: 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
}

.kiosk-controls .button {
  backdrop-filter: blur(8px);
  background: rgb(255 255 255 / 90%);
  border-color: rgb(255 255 255 / 55%);
  box-shadow: 0 4px 16px rgb(0 0 0 / 22%);
}

.is-kiosk [data-prompted-kiosk="true"]:not([data-kiosk-state="showing"]) {
  grid-template-rows: auto auto auto;
}

.is-kiosk [data-prompted-kiosk="true"]:not([data-kiosk-state="showing"]) .activity-qr-instruction,
.is-kiosk [data-prompted-kiosk="true"]:not([data-kiosk-state="showing"]) .quick-qr-countdown,
.is-kiosk [data-prompted-kiosk="true"]:not([data-kiosk-state="showing"]) [data-activity-availability] {
  display: none;
}

.is-kiosk [data-prompted-kiosk="true"]:not([data-kiosk-state="showing"]) .activity-qr-code {
  height: clamp(104px, 24vh, 170px);
  max-width: min(82vw, 720px);
  min-height: 104px;
  width: min(82vw, 720px);
}

.is-kiosk [data-prompted-kiosk="true"]:not([data-kiosk-state="showing"]) .activity-qr-overlay {
  min-height: 0;
  padding: clamp(.8rem, 2.5vh, 1.5rem);
}

.is-kiosk [data-prompted-kiosk="true"]:not([data-kiosk-state="showing"]) .activity-qr-overlay strong {
  font-size: clamp(1.25rem, 3.6vh, 2rem);
}

.is-kiosk [data-prompted-kiosk="true"]:not([data-kiosk-state="showing"]) .activity-qr-overlay span {
  font-size: clamp(.9rem, 2.4vh, 1.15rem);
}

.is-kiosk [data-prompted-kiosk="true"]:not([data-kiosk-state="showing"]) .activity-qr-meta {
  margin-top: 0;
}

.activity-office-section {
  display: grid;
  gap: 1.25rem;
}

.activity-office-section-header {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.activity-office-section-header h2,
.activity-office-section-header p {
  margin-block: 0;
}

.activity-office-page-actions,
.activity-office-status-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.activity-office-page-actions {
  align-items: center;
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius-sm);
  padding: .65rem;
}

.activity-status-summary { display: grid; gap: .15rem; font-size: .76rem; color: var(--asu-gray-2); }
.activity-status-summary .status-pill { text-transform: capitalize; }
.activity-status-menu { position: relative; }
.activity-status-menu > summary { cursor: pointer; font-weight: 700; padding: .55rem .7rem; }
.activity-status-menu[open] .activity-office-status-form { background: #fff; border: 1px solid var(--asu-gray-5); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); display: grid; padding: .8rem; position: absolute; right: 0; top: calc(100% + .35rem); width: 220px; z-index: 20; }
.kiosk-reveal-status { display: block; font-size: .78rem; font-weight: 700; margin-top: .25rem; max-width: 180px; }
.kiosk-reveal-status.is-success { color: #1f6f2c; }
.kiosk-reveal-status.is-error { color: var(--asu-maroon); }
.office-management-grid { display: grid; gap: .75rem; }
.office-management-card { border: 1px solid var(--asu-gray-5); border-radius: var(--radius-sm); overflow: hidden; }
.office-management-card > summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; padding: 1rem; }
.office-management-card > summary > span:first-child { display: grid; gap: .2rem; }
.office-management-card > form { border-top: 1px solid var(--asu-gray-6); padding: 1rem; }
.danger-zone-panel { border-top: 6px solid var(--asu-maroon); }
.data-maintenance-options, .data-maintenance-review { display: grid; gap: .7rem; }
.data-maintenance-option { align-items: start; border: 1px solid var(--asu-gray-5); border-radius: var(--radius-sm); cursor: pointer; display: flex; gap: .8rem; padding: 1rem; }
.data-maintenance-option:has(input:checked) { background: #fff4ce; border-color: var(--asu-gold); }
.data-maintenance-option input { height: 1.25rem; margin-top: .2rem; width: 1.25rem; }
.data-maintenance-option span { display: grid; gap: .2rem; }
.data-maintenance-review article { align-items: center; border-bottom: 1px solid var(--asu-gray-6); display: flex; gap: 1rem; justify-content: space-between; padding: .8rem 0; }
.data-maintenance-review p { margin: .2rem 0 0; }
.user-balance-panel { padding-inline: clamp(1.25rem, 3vw, 2rem); }
.email-log-search { align-items: center; display: flex; gap: .55rem; }
.email-log-search input { flex: 1; }
.email-log-search .button { flex: 0 0 auto; min-height: 42px; padding: .55rem .9rem; width: auto; }

.activity-office-status-form .field {
  min-width: 150px;
}

.activity-office-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
}

.activity-office-card {
  border: 1px solid var(--asu-gray-5);
  border-left: 5px solid var(--asu-maroon);
  border-radius: var(--radius);
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.activity-office-card-header {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.activity-office-card-header h3,
.activity-office-card-header p {
  margin-block: 0;
}

.activity-office-card-header > div:first-child {
  display: grid;
  gap: .3rem;
}

.activity-office-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.activity-office-metric {
  background: var(--asu-gray-7);
  border-radius: 999px;
  color: var(--asu-gray-1);
  font-size: .82rem;
  font-weight: 700;
  padding: .35rem .65rem;
}

.activity-office-qr-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.kiosk-control-panel {
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius-sm);
  display: grid;
  gap: .75rem;
  padding: 1rem;
}

.kiosk-control-panel h4,
.kiosk-control-panel p,
.kiosk-device-row small {
  margin: 0;
}

.kiosk-control-heading {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.kiosk-device-row {
  align-items: center;
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-radius: var(--radius-sm);
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  padding: .75rem;
}

.kiosk-device-row > div:first-child {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.kiosk-device-actions,
.pending-attempt-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.pending-requests-panel {
  border-top: 5px solid var(--asu-gold);
  display: grid;
  gap: 1rem;
}

.pending-requests-panel > .section-heading-row {
  align-items: start;
}

.pending-request-list {
  display: grid;
  gap: .75rem;
}

.pending-attempt-row {
  align-items: center;
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-5);
  border-left: 5px solid var(--asu-maroon);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1rem 1.1rem;
}

.pending-attempt-row.is-ineligible {
  background: linear-gradient(90deg, #fff8e3, var(--asu-white) 60%);
  border-left-color: var(--asu-gold);
}

.pending-attempt-summary {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.pending-attempt-summary > strong {
  color: var(--asu-maroon);
  font-size: 1.05rem;
}

.pending-attempt-summary p,
.pending-attempt-summary small {
  margin: 0;
}

.pending-attempt-eligibility {
  align-items: center;
  background: #fff1bf;
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .45rem 0 0;
  padding: .55rem .7rem;
}

.kiosk-location-requirement {
  background: #fff7df;
  border-left: 4px solid var(--asu-gold);
  border-radius: var(--radius-sm);
  padding: .75rem;
}

.kiosk-location-requirement p {
  margin: .25rem 0 0;
}

.activity-security-alerts {
  border-top: 5px solid var(--asu-gold);
  margin-bottom: 1.25rem;
}

.activity-security-alert-list {
  display: grid;
  gap: .8rem;
}

.activity-security-alert-card {
  align-items: end;
  background: #fff7df;
  border: 1px solid #e5c45e;
  border-radius: var(--radius-sm);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .35fr);
  padding: 1rem;
}

.activity-security-alert-card h3 {
  margin: .45rem 0 .25rem;
}

.activity-security-alert-card p {
  margin-top: 0;
}

.activity-security-alert-facts {
  display: grid;
  gap: .4rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.activity-security-alert-facts > div {
  min-width: 0;
}

.activity-security-alert-facts dt {
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.activity-security-alert-facts dd {
  margin: .1rem 0 0;
  overflow-wrap: anywhere;
}

.activity-security-alert-action {
  display: grid;
  gap: .5rem;
}

.student-lookup {
  display: block;
  position: relative;
}

.student-lookup-results {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-4);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 10px 24px rgb(0 0 0 / 16%);
  left: 0;
  max-height: 280px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% - 1px);
  z-index: 20;
}

.student-lookup-option,
.student-lookup-empty {
  background: var(--asu-white);
  border: 0;
  border-bottom: 1px solid var(--asu-gray-6);
  color: var(--asu-black);
  display: block;
  font: inherit;
  padding: .7rem .8rem;
  text-align: left;
  width: 100%;
}

.student-lookup-option {
  cursor: pointer;
}

.student-lookup-option:hover,
.student-lookup-option:focus {
  background: #fff4cc;
  outline: 2px solid var(--asu-gold);
  outline-offset: -2px;
}

.student-lookup-empty {
  color: var(--asu-gray-2);
}

.status-dot {
  background: #747474;
  border-radius: 50%;
  display: inline-block;
  height: .55rem;
  margin-right: .35rem;
  width: .55rem;
}

.status-dot.is-online {
  background: #2a8743;
}

.kiosk-device-details {
  font-size: .8rem;
  margin-top: .25rem;
  max-width: 640px;
}

.kiosk-device-details summary {
  color: var(--asu-maroon);
  cursor: pointer;
  font-weight: 700;
}

.kiosk-device-details dl {
  display: grid;
  gap: .35rem;
  margin: .5rem 0 0;
}

.kiosk-device-details dl > div {
  display: grid;
  gap: .15rem;
  grid-template-columns: minmax(120px, .4fr) minmax(0, 1fr);
}

.kiosk-device-details dt {
  font-weight: 700;
}

.kiosk-device-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.kiosk-pair-form {
  align-items: end;
}

.kiosk-pair-disclosure {
  border-top: 1px solid var(--asu-gray-5);
  padding-top: .75rem;
}

.kiosk-pair-disclosure summary {
  color: var(--asu-maroon);
  cursor: pointer;
  font-weight: 800;
}

.kiosk-pair-disclosure .kiosk-pair-form {
  margin-top: .75rem;
}

.kiosk-pairing-dialog {
  background: transparent;
  border: 0;
  max-height: calc(100dvh - 2rem);
  max-width: min(36rem, calc(100vw - 2rem));
  padding: 0;
  width: 100%;
}

.student-store-hero-selector { background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 32%); border-top: 5px solid var(--asu-gold); border-radius: 8px; color: #fff; display: grid; gap: .5rem; min-width: min(100%, 22rem); padding: 1rem; }
.student-store-hero-selector label span { color: var(--asu-gold); font-size: .82rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.student-store-hero-selector small { color: rgb(255 255 255 / 78%); line-height: 1.35; }
.student-store-select-control { align-items: center; background: #fff; border-radius: 4px; color: var(--asu-black); display: grid; grid-template-columns: auto 1fr; }
.student-store-select-control svg { color: var(--asu-maroon); height: 20px; margin-left: .8rem; width: 20px; }
.student-store-select-control select { background: transparent; border: 0; color: var(--asu-black); font-weight: 800; min-width: 0; width: 100%; }
.student-store-page-hero .compact-page-hero-inner { height: auto; min-height: 170px; }
.student-store-page-hero .compact-page-hero-copy { min-width: 0; }
.currency-input { align-items: center; border: 1px solid var(--asu-gray-4); border-radius: 4px; display: grid; grid-template-columns: auto 1fr; overflow: hidden; }
.currency-input > span { background: var(--asu-gray-7); border-right: 1px solid var(--asu-gray-5); font-weight: 800; padding: .7rem .75rem; }
.currency-input input { border: 0; border-radius: 0; min-width: 0; width: 100%; }

.report-summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.report-summary-pills span {
  background: var(--asu-gray-7);
  border-radius: 8px;
  display: grid;
  min-width: 10rem;
  padding: .75rem 1rem;
}

@media (max-width: 620px) {
  .student-store-hero-selector { min-width: 0; width: 100%; }
  .student-balance-callout { align-items: flex-start; flex-direction: column; gap: .35rem; }
}

.kiosk-pairing-dialog::backdrop {
  background: rgb(0 0 0 / 58%);
  backdrop-filter: blur(2px);
}

.kiosk-pairing-dialog-card {
  background: #fff;
  border-radius: 12px;
  border-top: 6px solid var(--asu-gold);
  box-shadow: 0 24px 70px rgb(0 0 0 / 30%);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.kiosk-pairing-dialog-header,
.kiosk-pairing-dialog-actions {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.kiosk-pairing-dialog-header h2 {
  margin: .15rem 0 0;
}

.kiosk-pairing-dialog-header form,
.kiosk-pairing-dialog-actions form {
  margin: 0;
}

.kiosk-pairing-code-value {
  background: var(--asu-gray-7);
  border: 2px solid var(--asu-gold);
  border-radius: 10px;
  color: var(--asu-maroon);
  font-size: clamp(2.75rem, 12vw, 4.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  line-height: 1;
  margin: 1rem 0;
  overflow: hidden;
  padding: 1rem .6rem;
  text-align: center;
  user-select: all;
  white-space: nowrap;
}

.kiosk-pairing-instruction strong {
  overflow-wrap: anywhere;
}

.kiosk-pairing-dialog-actions {
  justify-content: flex-start;
  margin-top: 1.25rem;
}

.kiosk-pairing-copy-status {
  margin: .5rem 0 0;
  min-height: 1.2em;
}

@media (max-width: 480px) {
  .kiosk-pairing-dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .kiosk-pairing-dialog-actions .button,
  .kiosk-pairing-dialog-actions form {
    width: 100%;
  }
}

.kiosk-pair-panel {
  margin: clamp(2rem, 9vh, 7rem) auto;
  max-width: 560px;
}

.bulk-static-note {
  overflow-wrap: anywhere;
}

@media (max-height: 690px) {
  .activity-qr-page.is-embedded .activity-qr-panel {
    gap: 4px;
    padding: 12px 18px;
  }

  .activity-qr-page.is-embedded .activity-qr-code {
    max-width: min(45vh, 320px);
    width: min(60vw, 320px);
  }

  .activity-qr-page.is-embedded .activity-qr-heading h1 {
    font-size: 1.45rem;
    margin-block: .1rem;
  }

  .activity-qr-page.is-embedded .activity-qr-instruction,
  .activity-qr-page.is-embedded .quick-qr-countdown {
    font-size: .9rem;
  }

  .activity-qr-page.is-kiosk {
    padding: 8px;
  }

  .activity-qr-page.is-kiosk .activity-qr-panel {
    gap: 4px;
    padding: 10px 18px;
  }

  .activity-qr-page.is-kiosk .activity-qr-heading h1 {
    font-size: clamp(1.45rem, 6vh, 2.15rem);
  }

  .activity-qr-page.is-kiosk .activity-qr-heading .eyebrow,
  .activity-qr-page.is-kiosk .activity-qr-location,
  .activity-qr-page.is-kiosk .activity-qr-meta {
    font-size: .9rem;
  }

  .activity-qr-page.is-kiosk [data-prompted-kiosk="true"]:not([data-kiosk-state="showing"]) .activity-qr-code {
    height: clamp(92px, 26vh, 124px);
    min-height: 92px;
  }
}

@media (max-width: 560px) {
  .qr-modal-dialog {
    height: calc(100dvh - 16px);
    padding: 8px;
    width: calc(100vw - 12px);
  }

  .activity-qr-page.is-embedded {
    padding: 8px;
  }

  .qr-link-copy-row {
    align-items: stretch;
    flex-direction: column;
  }

  .qr-link-copy-row code {
    max-width: 100%;
  }

  .kiosk-controls {
    right: 8px;
    top: 8px;
  }

  .kiosk-device-row {
    align-items: stretch;
    flex-direction: column;
  }

  .pending-attempt-row,
  .activity-security-alert-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .activity-security-alert-facts {
    grid-template-columns: 1fr;
  }

  .kiosk-device-actions,
  .pending-attempt-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .activity-office-section-header,
  .activity-office-card-header,
  .kiosk-control-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .activity-office-page-actions,
  .activity-office-status-form,
  .activity-office-qr-actions,
  .kiosk-pair-form {
    align-items: stretch;
    flex-direction: column;
  }
}

.quick-qr-brightness-hint,
.quick-qr-countdown {
  align-items: center;
  display: flex;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
}

/* Side by side while they fit; the modal is narrow on a phone, so they stack there. */
.quick-qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.quick-qr-actions form {
  margin: 0;
}

.quick-qr-actions .button {
  white-space: nowrap;
}

.quick-qr-countdown.is-expired {
  color: #8c1d40;
}

.quick-qr-panel .qr-image.is-expired {
  filter: grayscale(1);
  opacity: .18;
}

.activity-builder {
  align-items: start;
}

.filter-bar {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
}

.filter-bar .field {
  min-width: 0;
}

.filter-bar .button {
  justify-content: center;
}

.activity-builder fieldset {
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  padding: 14px;
}

.activity-builder fieldset legend {
  font-weight: 700;
  padding: 0 6px;
}

.activity-redeem-page {
  max-width: 760px;
}

.activity-redeem-status {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 16px;
}

.activity-redeem-status.is-error {
  color: #8c1d40;
}

.bulk-progress {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.bulk-progress progress {
  accent-color: #8c1d40;
  height: 18px;
  width: 100%;
}

.store-availability-notice {
  margin-bottom: 18px;
}

@media (max-width: 760px) {
  .activity-builder,
  .filter-bar {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 761px) and (max-width: 1060px) {
  .filter-bar {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}
.economy-heading,
.economy-filters,
.economy-trend-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.economy-wallet-row {
  grid-template-columns: 7.5rem minmax(8rem, 1fr) 8rem;
}

.economy-heading {
  justify-content: space-between;
  align-items: flex-start;
}

.economy-freshness {
  display: grid;
  min-width: 12rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border, #d5d5d5);
  border-radius: .5rem;
}

.economy-filters {
  flex-wrap: wrap;
  margin-top: 1rem;
}

.economy-filters label {
  display: grid;
  gap: .3rem;
  font-weight: 700;
}

.economy-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

.economy-card {
  display: grid;
  gap: .35rem;
}

.economy-card > span,
.economy-card > small {
  color: #555;
}

.economy-card > strong {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
}

.economy-warning {
  border-left: .4rem solid #b45309;
}

.economy-trend {
  display: grid;
  gap: .65rem;
}

.economy-trend-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(8rem, 1fr) 8rem minmax(12rem, auto);
}

.economy-trend-track {
  overflow: hidden;
  height: .8rem;
  background: #e5e7eb;
  border-radius: 999px;
}

.economy-trend-track span {
  display: block;
  height: 100%;
  background: #8c1d40;
  border-radius: inherit;
}

.economy-controls-heading,
.economy-control-summary,
.economy-inline-actions {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.economy-controls-heading {
  justify-content: space-between;
}

.economy-control-list {
  display: grid;
  gap: .85rem;
}

.economy-control-item {
  border: 1px solid var(--border, #d5d5d5);
  border-radius: .5rem;
  display: grid;
  gap: .8rem;
  padding: 1rem;
}

.economy-control-summary {
  align-items: flex-start;
}

.economy-control-summary h3,
.economy-control-summary p {
  margin: 0 0 .3rem;
}

.economy-inline-actions {
  flex-wrap: wrap;
}

.economy-inline-actions input {
  flex: 1 1 15rem;
}

.economy-severity-critical {
  background: #8c1d40;
  color: white;
}

.economy-severity-warning {
  background: #f59e0b;
  color: #111;
}

.economy-severity-info {
  background: #dbeafe;
  color: #1e3a8a;
}

.economy-scenario-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.economy-scenario-form {
  border: 1px solid var(--border, #d5d5d5);
  border-radius: .5rem;
  display: grid;
  gap: .65rem;
  padding: 1rem;
}

.economy-scenario-form h3 {
  margin: 0;
}

.economy-scenario-form label {
  display: grid;
  gap: .25rem;
  font-weight: 700;
}

.economy-estimate-notice {
  border-left: .35rem solid #ffc627;
  padding-left: 1rem;
}

.economy-subnav {
  border-bottom: 1px solid var(--border, #d5d5d5);
  display: flex;
  gap: .25rem;
  margin-top: 1rem;
}

.economy-subnav a {
  border-bottom: 4px solid transparent;
  color: #191919;
  font-weight: 700;
  padding: .7rem 1rem .6rem;
  text-decoration: none;
}

.economy-subnav a:hover,
.economy-subnav a:focus-visible,
.economy-subnav a.is-active {
  border-bottom-color: #8c1d40;
}

.economy-warmup {
  background: #fff8e1;
  border-left: .4rem solid #ffc627;
  display: grid;
  gap: 1rem;
}

.economy-warmup h2,
.economy-warmup p {
  margin-bottom: .35rem;
  margin-top: 0;
}

.economy-warmup-progress {
  background: #e5e7eb;
  border-radius: 999px;
  height: .8rem;
  overflow: hidden;
}

.economy-warmup-progress span {
  background: #8c1d40;
  border-radius: inherit;
  display: block;
  height: 100%;
}

.economy-warmup-banner {
  align-items: center;
  background: #fff8e1;
  border: 1px solid #f1d482;
  border-left: .35rem solid #ffc627;
  border-radius: .5rem;
  display: grid;
  gap: .6rem 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 22rem);
  padding: .7rem 1rem;
}

.economy-warmup-copy {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .65rem;
}

.economy-warmup-copy strong {
  color: #8c1d40;
}

.economy-warmup-copy span {
  color: #4b4b4b;
  font-size: .9rem;
}

.economy-flow-panel {
  overflow: hidden;
}

.economy-overview-flow-panel {
  overflow: visible;
}

.economy-flow {
  align-items: stretch;
  display: flex;
  gap: .55rem;
  margin-top: 1rem;
  overflow-x: auto;
  padding: .25rem 0 .75rem;
}

.economy-flow-step {
  background: #f7f7f7;
  border: 1px solid var(--border, #d5d5d5);
  border-radius: .6rem;
  display: grid;
  flex: 1 0 10.5rem;
  gap: .3rem;
  min-width: 0;
  padding: 1rem;
}

.economy-flow-step.positive {
  border-top: .35rem solid #2e7d32;
}

.economy-flow-step.negative {
  border-top: .35rem solid #b45309;
}

.economy-flow-step.warning {
  border-top: .35rem solid #ffc627;
}

.economy-flow-step.result {
  background: #8c1d40;
  border-color: #8c1d40;
  border-top: .35rem solid #ffc627;
  color: white;
  flex-basis: 12rem;
}

.economy-flow-step > span {
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.economy-flow-step > strong {
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: 1.05;
}

.economy-flow-step > small {
  color: #555;
}

.economy-flow-step.result > small {
  color: white;
}

.economy-help {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}

.economy-help-button {
  align-items: center;
  background: #fff;
  border: 1px solid #8c1d40;
  border-radius: 999px;
  color: #8c1d40;
  cursor: help;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 800;
  height: 1.15rem;
  justify-content: center;
  line-height: 1;
  margin-left: .2rem;
  padding: 0;
  width: 1.15rem;
}

.economy-flow-step.result .economy-help-button {
  border-color: #ffc627;
  color: #8c1d40;
}

.economy-help-tooltip {
  background: #191919;
  border-radius: .35rem;
  bottom: calc(100% + .45rem);
  color: white;
  font-size: .82rem;
  font-weight: 400;
  left: 50%;
  letter-spacing: normal;
  line-height: 1.35;
  max-width: min(18rem, 75vw);
  opacity: 0;
  padding: .55rem .7rem;
  pointer-events: none;
  position: absolute;
  text-align: left;
  text-transform: none;
  transform: translate(-50%, .2rem);
  transition: opacity .15s ease, transform .15s ease;
  visibility: hidden;
  width: max-content;
  z-index: 20;
}

.economy-help:hover .economy-help-tooltip,
.economy-help:focus-within .economy-help-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.economy-flow-operator {
  align-self: center;
  color: #4b5563;
  flex: 0 0 1.4rem;
  font-size: 1.8rem;
  font-weight: 800;
  text-align: center;
}

.economy-flow-operator.equals {
  color: #8c1d40;
}

.economy-flow-check {
  background: #f7f7f7;
  border-radius: .4rem;
  margin: .5rem 0 0;
  padding: .75rem 1rem;
}

.economy-flow-check.success {
  border-left: .3rem solid #2e7d32;
}

.economy-flow-check.danger {
  border-left: .3rem solid #b91c1c;
}

.economy-flow-ledger .economy-flow-step {
  flex: 1 1 0;
  padding: .75rem;
}

.economy-flow-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  overflow: visible;
}

.economy-flow-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  overflow: visible;
}

.economy-flow-overview .economy-flow-step {
  position: relative;
}

.economy-flow-overview .economy-flow-step[data-flow-prefix]::before {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border, #d5d5d5);
  border-radius: 999px;
  color: #4b5563;
  content: attr(data-flow-prefix);
  display: flex;
  font-size: 1rem;
  font-weight: 800;
  height: 1.65rem;
  justify-content: center;
  left: -.95rem;
  position: absolute;
  top: calc(50% - .825rem);
  width: 1.65rem;
  z-index: 1;
}

.economy-flow-overview .economy-flow-step.result::before {
  color: #8c1d40;
}

.economy-flow-overview .economy-flow-step:first-child .economy-help-tooltip {
  left: 0;
  transform: translate(0, .2rem);
}

.economy-flow-overview .economy-flow-step:first-child .economy-help:hover .economy-help-tooltip,
.economy-flow-overview .economy-flow-step:first-child .economy-help:focus-within .economy-help-tooltip {
  transform: translate(0, 0);
}

.economy-flow-overview .economy-flow-step:last-child .economy-help-tooltip {
  left: auto;
  right: 0;
  transform: translate(0, .2rem);
}

.economy-flow-overview .economy-flow-step:last-child .economy-help:hover .economy-help-tooltip,
.economy-flow-overview .economy-flow-step:last-child .economy-help:focus-within .economy-help-tooltip {
  transform: translate(0, 0);
}

.economy-flow-ledger .economy-flow-step {
  position: relative;
}

.economy-flow-ledger .economy-flow-step[data-flow-prefix]::before {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border, #d5d5d5);
  border-radius: 999px;
  color: #4b5563;
  content: attr(data-flow-prefix);
  display: flex;
  font-size: 1rem;
  font-weight: 800;
  height: 1.65rem;
  justify-content: center;
  left: -.95rem;
  position: absolute;
  top: calc(50% - .825rem);
  width: 1.65rem;
  z-index: 1;
}

.economy-flow-ledger .economy-flow-step.result::before {
  color: #8c1d40;
}

.economy-flow-ledger .economy-flow-step > strong {
  font-size: clamp(1.25rem, 1.9vw, 1.8rem);
}

.economy-ledger-reconciliation {
  overflow: visible;
}

.economy-ledger-credit {
  color: #1b5e20;
}

.economy-ledger-debit {
  color: #9b1c1c;
}

.economy-dashboard code {
  overflow-wrap: anywhere;
}

.economy-secondary-metrics .economy-card {
  align-content: start;
}

.economy-alert-bulk-toolbar {
  align-items: end;
  background: #f7f7f7;
  border: 1px solid var(--border, #d5d5d5);
  border-radius: .5rem;
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(12rem, 1fr) minmax(11rem, .8fr) minmax(15rem, 1.5fr) auto;
  margin: 1rem 0 .5rem;
  padding: .85rem;
}

.economy-alert-bulk-toolbar > label:not(.check-row) {
  display: grid;
  font-weight: 700;
  gap: .25rem;
}

.economy-alert-warmup-note {
  border-left: .25rem solid #ffc627;
  margin: .5rem 0 1rem;
  padding-left: .75rem;
}

.economy-alert-selectable {
  align-items: start;
  display: grid;
  gap: .75rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.economy-alert-checkbox {
  align-items: center;
  display: flex;
  min-height: 2rem;
}

.economy-alert-checkbox input {
  height: 1.15rem;
  width: 1.15rem;
}

.economy-reward-groups {
  display: grid;
  gap: 1rem;
}

.economy-reward-group {
  border: 1px solid var(--border, #d5d5d5);
  border-radius: .65rem;
  overflow: hidden;
}

.economy-reward-group > header {
  align-items: center;
  background: #f7f7f7;
  border-bottom: 1px solid var(--border, #d5d5d5);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .8rem 1rem;
}

.economy-reward-group h3,
.economy-reward-group header span {
  margin: 0;
}

.economy-reward-group header > div > span,
.economy-reward-group-summary {
  color: #555;
  font-size: .85rem;
}

.economy-reward-group .table-wrap {
  border: 0;
  border-radius: 0;
  margin: 0;
}

.economy-reward-detail-link {
  align-items: center;
  color: #8c1d40;
  display: flex;
  font-weight: 700;
  gap: 1rem;
  justify-content: space-between;
  min-width: 13rem;
  text-decoration-thickness: .12rem;
  text-underline-offset: .15rem;
}

.economy-reward-detail-link span:first-child {
  display: grid;
  gap: .1rem;
}

.economy-reward-detail-link small {
  color: #555;
  font-weight: 400;
}

.economy-reward-child:hover {
  background: #fff8e1;
}

@media (max-width: 760px) {
  .economy-heading {
    display: grid;
  }

  .economy-controls-heading,
  .economy-control-summary {
    align-items: stretch;
    display: grid;
  }

  .economy-trend-row {
    grid-template-columns: 1fr;
    gap: .3rem;
  }

  .economy-flow {
    display: grid;
    overflow: visible;
  }

  .economy-flow-operator {
    justify-self: center;
    transform: rotate(90deg);
  }

  .economy-flow-operator.equals {
    transform: none;
  }

  .economy-subnav {
    overflow-x: auto;
  }

  .economy-warmup-banner,
  .economy-alert-bulk-toolbar {
    grid-template-columns: 1fr;
  }

  .economy-reward-group > header {
    align-items: flex-start;
    display: grid;
  }

  .economy-help-tooltip {
    left: 0;
    transform: translate(0, .2rem);
  }

  .economy-help:hover .economy-help-tooltip,
  .economy-help:focus-within .economy-help-tooltip {
    transform: translate(0, 0);
  }
}
.bulk-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border, #d5d5d5);
  border-radius: var(--radius);
  overflow: hidden;
}

.bulk-summary-card {
  min-width: 0;
  padding: 1.15rem 1.3rem;
  display: grid;
  gap: .35rem;
}

.bulk-summary-card + .bulk-summary-card { border-left: 1px solid var(--border, #d5d5d5); }
.bulk-summary-card span { color: var(--muted); font-size: .88rem; }
.bulk-summary-card strong { font-size: 1.45rem; overflow-wrap: anywhere; }
.bulk-issue-table { min-width: 1000px; table-layout: fixed; }
.bulk-issue-table th { white-space: normal; word-break: normal; overflow-wrap: normal; line-height: 1.25; }
.bulk-issue-table input[type="checkbox"] { width: 1.15rem; height: 1.15rem; min-width: 1.15rem; margin: 0; }
.bulk-issue-table input:not([type="checkbox"]) { width: 100%; min-width: 0; }
.bulk-col-include { width: 72px; }
.bulk-col-row { width: 55px; }
.bulk-col-student { width: 205px; }
.bulk-col-bb { width: 80px; }
.bulk-col-reason { width: 150px; }
.bulk-col-note { width: 205px; }
.bulk-col-status { width: 230px; }
.bulk-redemption-status { display: grid; gap: .25rem; margin-top: .65rem; }
.bulk-redemption-status small { display: block; }
.pending-awards-banner {
  margin-top: 1rem;
  background: #fff7d6;
  border: 1px solid #d9ad00;
  border-left: 6px solid var(--gold);
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.pending-awards-banner h2, .pending-awards-banner p { margin: .15rem 0; }
.pending-awards-actions { display: flex; gap: .65rem; flex-wrap: wrap; justify-content: flex-end; }
.pending-awards-actions .button { display: grid; gap: .1rem; }
.pending-awards-actions small { font-weight: 400; }

@media (max-width: 760px) {
  .bulk-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bulk-summary-card:nth-child(3) { border-left: 0; border-top: 1px solid var(--border, #d5d5d5); }
  .bulk-summary-card:nth-child(4) { border-top: 1px solid var(--border, #d5d5d5); }
  .pending-awards-banner { align-items: stretch; flex-direction: column; }
  .pending-awards-actions { justify-content: flex-start; }
}
.qr-allowance-panel {
  display: grid;
  gap: 1rem;
  border-top: 4px solid var(--asu-gold);
}

.qr-allowance-panel h2 {
  margin: .15rem 0 .3rem;
}

.allowance-meter {
  overflow: hidden;
  height: .7rem;
  border-radius: 999px;
  background: #e8e8e8;
}

.allowance-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--asu-maroon), var(--asu-gold));
}

/*
 * Two segments rather than one bar, because the allowance now has two kinds of "not available":
 * Barrett Bucks a student actually received, and Barrett Bucks held by a code nobody has scanned.
 * The second kind can come back, so showing them as one indistinguishable block would misreport
 * how much of the allowance is really gone.
 */
.allowance-meter.is-segmented {
  display: flex;
}

.allowance-meter.is-segmented span {
  border-radius: 0;
  background: none;
}

.allowance-meter.is-segmented span.is-consumed {
  background: var(--asu-maroon);
}

.allowance-meter.is-segmented span.is-reserved {
  /* Hatched, so "held but not spent" is distinguishable without relying on color alone. */
  background: repeating-linear-gradient(
    45deg,
    var(--asu-gold),
    var(--asu-gold) 4px,
    #ffe89a 4px,
    #ffe89a 8px
  );
}

.allowance-breakdown {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .87rem;
}

.allowance-breakdown li {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-top: .2rem;
}

.allowance-key {
  flex: 0 0 auto;
  width: .7rem;
  height: .7rem;
  border-radius: 2px;
  background: #d6d6d6;
}

.allowance-key.is-consumed {
  background: var(--asu-maroon);
}

.allowance-key.is-reserved {
  background: repeating-linear-gradient(
    45deg,
    var(--asu-gold),
    var(--asu-gold) 3px,
    #ffe89a 3px,
    #ffe89a 6px
  );
}

.student-worker-review-panel {
  border-top: 4px solid var(--asu-maroon);
}
.delta-positive, .delta-negative { font-variant-numeric: tabular-nums; white-space: nowrap; }

.impersonation-stop-chip { align-items: center; background: var(--asu-maroon); border-radius: 999px; box-shadow: 0 10px 26px rgba(25,25,25,.25); color: #fff; display: flex; gap: .55rem; padding: .35rem .4rem .35rem .8rem; }
.impersonation-stop-chip button { align-items: center; background: #fff; border: 0; border-radius: 50%; color: var(--asu-maroon); cursor: pointer; display: inline-flex; font-size: 1.15rem; font-weight: 900; height: 1.8rem; justify-content: center; line-height: 1; width: 1.8rem; }
.impersonation-banner { align-items: center; background: var(--asu-maroon); color: #fff; display: flex; gap: 1rem; justify-content: center; padding: .65rem 1rem; position: relative; z-index: 20; }
.impersonation-banner strong { color: var(--asu-gold); }
.impersonation-banner form { margin: 0; }
.impersonation-banner button { background: #fff; border: 0; border-radius: .3rem; color: var(--asu-maroon); cursor: pointer; font-weight: 800; padding: .4rem .65rem; }
.access-pending-banner { background: #fff4ce; border-bottom: 3px solid var(--asu-gold); color: var(--asu-black); padding: .65rem 1rem; text-align: center; }

.student-worker-review-panel .student-worker-review-list { display: none; }
.access-review-summary-action { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem; }
.access-review-summary-action .button { min-height: 34px; padding: .45rem .7rem; width: auto; }

.student-worker-review-list {
  display: grid;
  gap: 1rem;
}

.student-worker-review-card {
  display: grid;
  grid-template-columns: minmax(14rem, .8fr) minmax(20rem, 2fr);
  gap: 1.25rem;
  padding: 1rem;
  border: 1px solid #d9d9d9;
  border-radius: .6rem;
  background: #fff;
}

.student-worker-review-identity,
.student-worker-review-actions {
  display: grid;
  align-content: start;
  gap: .45rem;
}

.student-worker-review-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-worker-review-actions form {
  display: grid;
  align-content: start;
  gap: .65rem;
  padding: .8rem;
  border-radius: .45rem;
  background: #f7f7f7;
}

.access-decision-note {
  padding: .85rem;
  border-left: 4px solid var(--asu-gold);
  background: #fff8df;
}

@media (max-width: 760px) {
  .student-worker-review-card,
  .student-worker-review-actions {
    grid-template-columns: 1fr;
  }
}
.elevated-access-page,
.elevated-access-list {
  display: grid;
  gap: 1rem;
}

.security-summary-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 4px solid var(--asu-gold);
}

.security-summary-panel > div {
  display: grid;
}

.security-summary-panel > div strong {
  color: var(--asu-maroon);
  font-size: 2rem;
}

/*
 * The search sits between the summary and the cards, so the count it reports reads next to
 * the total it narrows rather than above the heading that states that total.
 */
.elevated-access-toolbar {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.elevated-access-search {
  flex: 1 1 320px;
  max-width: 420px;
}

.elevated-access-toolbar p {
  margin: 0;
  white-space: nowrap;
}

.elevated-access-no-results {
  margin: 0;
}

@media (max-width: 640px) {
  .elevated-access-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
  }

  .elevated-access-search {
    max-width: none;
  }
}

.elevated-access-card {
  border-left: 5px solid var(--asu-maroon);
}

.elevated-access-card.is-expired {
  border-left-color: #d32f2f;
}

.elevated-access-card-header,
.student-worker-access-strip,
.permission-chip-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}

.elevated-access-card-header {
  justify-content: space-between;
}

.elevated-access-card-header h2 {
  margin: 0;
}

.student-worker-access-strip {
  margin: .85rem 0;
  padding: .75rem;
  border-radius: .4rem;
  background: #fff8df;
}

.permission-chip {
  padding: .35rem .55rem;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  background: #f5f5f5;
  font-size: .86rem;
}

.permission-chip.is-admin {
  color: #fff;
  border-color: var(--asu-maroon);
  background: var(--asu-maroon);
}

.permission-chip.is-override {
  border-color: #d8a500;
  background: #fff8df;
}

/*
 * A chip is a link to its own entry in the reference now, so it has to stop inheriting the
 * underlined body-link treatment and read as the chip it looks like.
 */
a.permission-chip {
  color: inherit;
  text-decoration: none;
}

a.permission-chip:hover,
a.permission-chip:focus-visible {
  border-color: var(--asu-maroon);
  color: var(--asu-maroon);
  background: #fff;
}

/*
 * Permissions grouped by catalog area on the elevated-access review. The label column is fixed so
 * the group names line up down the card and the chips start at the same place, which is what lets
 * an administrator find the Activities row without reading the others.
 */
.permission-group-chips {
  display: grid;
  gap: .5rem;
  margin-top: .5rem;
}

.permission-group-chip-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: start;
  gap: .6rem;
}

.permission-group-chip-label {
  padding-top: .35rem;
  color: var(--asu-gray-3);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (max-width: 640px) {
  .permission-group-chip-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
  }
}

/*
 * A permission that is held but inert for want of its prerequisite. Warning-toned rather than
 * error-toned: nothing is broken, but the grant is not doing what the checkbox suggests.
 */
.elevated-access-gap {
  margin-top: .75rem;
  padding: .6rem .75rem;
  border-left: 3px solid #d8a500;
  border-radius: .3rem;
  background: #fff8df;
  font-size: .88rem;
}

.elevated-access-gap p {
  margin: 0;
}

.elevated-access-gap p + p {
  margin-top: .35rem;
}

/*
 * The current reporting period, pinned to the top of the first page. Tinted rather than merely
 * labeled, because the whole point of the ordering fix is that the row staff are working in is
 * findable at a glance.
 */
.is-current-period > td {
  background: #fffbe9;
  font-weight: 600;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .85rem;
}

/*
 * When an office code was last reissued. Kept visually quiet -- it is reassurance most of the
 * time, and only matters when somebody is hunting for a stale printout.
 */
.activity-office-rotated {
  margin: .5rem 0 0;
  padding: .4rem .6rem;
  border-left: 3px solid #d8a500;
  border-radius: .25rem;
  background: #fff8df;
  font-size: .84rem;
}

.activity-office-rotate-form {
  margin-top: .4rem;
}

/* Day-of-week selection: seven short labels read better in columns than in the two-wide grid. */
.weekday-grid {
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: .75rem;
}

.weekday-grid .check-row {
  justify-content: center;
  min-width: 0;
  padding: .6rem .35rem;
  text-align: center;
}

.field-label-with-help {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.field-info {
  position: relative;
  display: inline-flex;
}

.field-info-button {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid var(--asu-maroon);
  border-radius: 50%;
  color: var(--asu-maroon);
  background: #fff;
  font: 700 .78rem/1 sans-serif;
  cursor: help;
}

.field-info-tooltip {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + .45rem);
  left: 50%;
  width: max-content;
  max-width: 16rem;
  padding: .45rem .6rem;
  border-radius: .3rem;
  color: #fff;
  background: #191919;
  font-size: .78rem;
  font-weight: 400;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, .2rem);
  visibility: hidden;
}

.field-info:hover .field-info-tooltip,
.field-info:focus-within .field-info-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

@media (max-width: 760px) {
  .weekday-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weekday-grid .check-row:last-child {
    grid-column: 1 / -1;
  }
}

/*
 * The two adjustment types, side by side at the top of the page, so the difference between
 * "goes to an approver" and "applied immediately" is read before either form is filled in.
 */
.adjustment-type-summary {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-bottom: 1rem;
}

.adjustment-type-card {
  padding: .85rem 1rem;
  border: 1px solid #e0e0e0;
  border-left: 3px solid var(--asu-maroon);
  border-radius: .4rem;
  background: #fafafa;
}

.adjustment-type-card h2 {
  margin: 0 0 .35rem;
  font-size: 1rem;
}

.adjustment-type-card p {
  margin: 0 0 .3rem;
  font-size: .88rem;
}

.adjustment-conversion-form {
  margin-top: .85rem;
  padding: 1rem;
  border: 1px solid #d6d6d6;
  border-left: 4px solid var(--asu-gold);
  border-radius: var(--radius);
  background: #fff;
}

.adjustment-workflow-form .adjustment-reason-field { grid-column: auto; }
.adjustment-form-actions { align-items: center; border-top: 1px solid var(--asu-gray-5); display: flex; gap: 16px; grid-column: 1 / -1; justify-content: space-between; margin-top: 4px; padding-top: 16px; }
.adjustment-form-actions p { margin: 0; max-width: 48rem; }
.conversion-value-group { align-items: end; display: grid; gap: 14px; grid-template-columns: minmax(180px, .75fr) minmax(210px, .75fr) minmax(240px, 1fr); }
.conversion-rate { background: #fff8df; border-left: 3px solid var(--asu-gold); display: grid; gap: 3px; margin: 0; padding: 10px 12px; }
.conversion-rate span { color: var(--asu-gray-3); font-size: .78rem; }

.adjustment-process-selector {
  grid-column: 1 / -1;
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: .9rem 0 .2rem;
  padding: .85rem;
  border: 1px solid #d6d6d6;
  border-radius: .4rem;
}

.adjustment-process-selector legend {
  padding: 0 .35rem;
  font-weight: 700;
}

.adjustment-process-option {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .75rem;
  border: 1px solid #d6d6d6;
  border-radius: .35rem;
  cursor: pointer;
}

.adjustment-process-option:has(input:checked) {
  border-color: var(--asu-maroon);
  background: #fff7fa;
}

.adjustment-process-option span,
.adjustment-process-option small {
  display: block;
}

.adjustment-process-option small {
  margin-top: .2rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .adjustment-process-selector {
    grid-template-columns: 1fr;
  }
  .conversion-value-group { grid-template-columns: 1fr; }
  .adjustment-form-actions { align-items: stretch; flex-direction: column; }
  .adjustment-form-actions .button { width: 100%; }
}

.adjustment-conversion-form h3 {
  margin: 0 0 .5rem;
  font-size: .95rem;
}

/*
 * The conversion, shown before it is submitted. It goes gold and bold once there is a real figure
 * in it, so the person at the counter sees the digital total change as they type the paper count.
 */
.adjustment-conversion-preview {
  margin: .35rem 0 .6rem;
  padding: .5rem .65rem;
  border-radius: .3rem;
  background: #f5f5f5;
  color: var(--asu-gray-3);
  font-size: .86rem;
}

.adjustment-conversion-preview.is-active {
  border-left: 3px solid #ffc627;
  background: #fff8df;
  color: #191919;
  font-weight: 600;
}

.adjustment-direction-field {
  margin: 0 0 .5rem;
  padding: 0;
  border: 0;
}

.adjustment-direction-field legend {
  padding: 0;
  font-size: .84rem;
  font-weight: 600;
}

/* The same warning, on the checkbox row in the user drawer where the grant is actually made. */
.permission-row-warning {
  margin: 0;
  padding: .35rem .55rem;
  border-left: 3px solid #d8a500;
  border-radius: .25rem;
  background: #fff8df;
  font-size: .82rem;
  line-height: 1.4;
}
.has-kiosk-theme .kiosk-brand-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .55rem;
  padding: .45rem .85rem;
  border: 2px solid rgba(255, 198, 39, .75);
  border-radius: 999px;
  color: #fff;
  background: var(--asu-maroon);
  box-shadow: 0 .35rem 1rem rgba(140, 29, 64, .2);
  font-size: clamp(.82rem, 1.4vw, 1.05rem);
  letter-spacing: .08em;
}

.activity-qr-page.has-kiosk-theme {
  background:
    linear-gradient(135deg, rgba(25, 25, 25, .9), rgba(72, 9, 31, .88)),
    url("/images/asu-poly-santan-dark-pattern.png") center / cover fixed;
}

.has-kiosk-theme .activity-qr-panel {
  border-top: 6px solid var(--asu-gold);
  color: var(--asu-black);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .34);
}

.activity-qr-code.is-unavailable {
  width: min(92%, 560px);
  max-width: 560px;
  min-height: 112px;
}

.activity-qr-code.is-unavailable .activity-qr-overlay {
  position: relative;
  inset: auto;
  min-height: 112px;
  padding: 1rem 1.25rem;
}

.activity-qr-page.is-embedded .activity-qr-panel {
  gap: clamp(4px, 1vh, 10px);
  padding: clamp(12px, 2vh, 22px);
}

.activity-qr-page.is-embedded .activity-qr-code.is-unavailable {
  min-height: 90px;
}

.activity-qr-page.is-embedded .activity-qr-code.is-unavailable .activity-qr-overlay {
  min-height: 90px;
}

.kiosk-pair-panel,
.kiosk-pair-panel .field,
.kiosk-pair-panel p,
.kiosk-location-requirement,
.kiosk-location-requirement p {
  color: var(--asu-black);
}

.kiosk-pair-title {
  color: var(--asu-maroon) !important;
  font-size: 1rem;
}

.activity-availability-banner {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 1rem 0;
  padding: .8rem 1rem;
  border-left: 5px solid var(--asu-gold);
  background: #fff3cd;
  color: var(--asu-black);
}
.email-detail-page {
  display: grid;
  gap: 1rem;
}

.email-delivery-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.email-delivery-facts > div {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: .3rem;
}

.email-delivery-facts .pill {
  width: auto;
  min-width: 0;
  padding: .35rem .65rem;
}

.email-delivery-facts span {
  color: var(--muted);
  font-size: .82rem;
}

.email-status-message {
  grid-column: 1 / -1;
}

/*
 * The in-app student guide. Long-form reading rather than a dashboard, so the body column is
 * capped near a comfortable measure instead of filling a wide screen, and the contents list
 * sticks alongside it on desktop.
 */
.guide-page {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
}

.guide-contents {
  position: sticky;
  top: 1rem;
}

.guide-contents h2 {
  margin: 0 0 .5rem;
  font-size: 1rem;
}

.guide-contents ol {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .3rem;
}

.guide-contents li {
  font-size: .9rem;
}

.guide-body {
  max-width: 46rem;
  line-height: 1.6;
}

.guide-body h2 {
  margin: 1.9rem 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--asu-gold);
  font-size: 1.3rem;
  /* Anchored from the contents list, so leave room for the sticky header. */
  scroll-margin-top: 1.5rem;
}

.guide-body h2:first-child {
  margin-top: 0;
}

.guide-body p,
.guide-body li {
  font-size: .97rem;
}

.guide-body ul,
.guide-body ol {
  padding-left: 1.3rem;
}

.guide-body li {
  margin: .3rem 0;
}

.guide-shot {
  margin: 1rem 0 1.4rem;
}

.guide-shot img {
  display: block;
  width: 100%;
  border: 1px solid #d5d5d5;
  border-radius: .45rem;
}

/* Phone screenshots keep phone proportions rather than stretching to the column. */
.guide-shot.is-mobile {
  max-width: 17rem;
}

.guide-shot figcaption {
  margin-top: .4rem;
  color: var(--muted);
  font-size: .84rem;
  font-style: italic;
}

@media (max-width: 900px) {
  .guide-page {
    grid-template-columns: 1fr;
  }

  .guide-contents {
    position: static;
  }
}

/*
 * The emailed-QR funnel: sent, link followed, redeemed. Three steps, each either reached or
 * not, so the state has to be readable without reading the text.
 */
.email-funnel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: funnel;
}

.email-funnel > li {
  display: grid;
  align-content: start;
  gap: .3rem;
  padding: .85rem .9rem;
  border-radius: .45rem;
  border: 1px solid #d7d7d7;
  border-top: 4px solid #c7c7c7;
  background: #fafafa;
}

.email-funnel > li.done {
  border-top-color: #007c3e;
  background: #f2f9f5;
}

.email-funnel > li.missed {
  border-top-color: #b62c2c;
  background: #fdf4f4;
}

.email-funnel > li.pending {
  border-top-color: var(--asu-gold);
}

.email-funnel-step {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.email-funnel > li strong {
  font-size: 1.02rem;
}

.email-funnel > li small {
  color: var(--muted);
  line-height: 1.35;
}

.email-funnel-note {
  margin: .9rem 0 0;
  font-size: .87rem;
}

@media (max-width: 760px) {
  .email-funnel {
    grid-template-columns: 1fr;
  }
}

/*
 * The open-activity log. Collapsed by default, so the summary line has to read as a heading
 * rather than as the small print a bare <summary> renders as.
 */
.email-open-log > summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
}

/*
 * A flex <summary> drops the browser's disclosure triangle, which leaves the row looking like
 * a static heading. Draw the marker back in so it reads as something to open.
 */
.email-open-log > summary::marker,
.email-open-log > summary::-webkit-details-marker {
  content: "";
  display: none;
}

.email-open-log > summary::before {
  content: "";
  align-self: center;
  width: 0;
  height: 0;
  border-left: .38rem solid currentColor;
  border-top: .3rem solid transparent;
  border-bottom: .3rem solid transparent;
  transition: transform .15s ease;
}

.email-open-log[open] > summary::before {
  transform: rotate(90deg);
}

.email-open-log > summary strong {
  font-size: 1.05rem;
}

.email-open-log > summary .muted {
  font-size: .85rem;
}

.email-open-log .table-wrap {
  margin-top: .85rem;
}

.email-open-log-table .pill {
  width: auto;
  min-width: 0;
  padding: .2rem .55rem;
  font-size: .75rem;
}

.email-open-log-table td small {
  display: block;
  margin-top: .2rem;
  color: var(--muted);
}

/* User agents are long single tokens; let them wrap instead of stretching the table. */
.email-open-log-agent {
  max-width: 22rem;
  font-size: .8rem;
  word-break: break-word;
}

/* An address broken across lines is unreadable; the wrap belongs in the agent column. */
.email-open-log-table td:last-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Two headline actions sit beside one heading on the email log; they wrap before it does. */
.admin-page-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*
 * The reason a row on the agent rollup is worth a second look. It reads as a note under the
 * number it is about, not as a verdict -- nothing on that page classifies anything.
 */
.email-open-agent-flag {
  color: var(--muted);
  display: block;
  margin-top: .2rem;
  max-width: 16rem;
}

.email-preview-frame {
  width: 100%;
  min-height: 720px;
  border: 1px solid #d5d5d5;
  border-radius: .45rem;
  background: #f3f3f3;
}

.email-text-preview {
  overflow: auto;
  padding: 1rem;
  white-space: pre-wrap;
  background: #f5f5f5;
}

@media (max-width: 760px) {
  .email-delivery-facts {
    grid-template-columns: 1fr 1fr;
  }
}
.email-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.email-catalog-card {
  overflow: hidden;
  border: 1px solid #d7d7d7;
  border-radius: .5rem;
  background: #fff;
}

.email-catalog-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem;
  cursor: pointer;
  list-style: none;
}

.email-catalog-card summary::-webkit-details-marker {
  display: none;
}

.email-catalog-card summary > span:first-child {
  display: grid;
  gap: .25rem;
}

.email-catalog-card[open] summary {
  border-bottom: 1px solid #ddd;
  background: #fff8df;
}

.email-catalog-card dl {
  display: grid;
  gap: .8rem;
  margin: 0;
  padding: .9rem;
}

.email-catalog-card dl > div {
  display: grid;
  gap: .15rem;
}

.email-catalog-card dt {
  color: var(--asu-maroon);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.email-catalog-card dd {
  margin: 0;
}

.email-variable-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.email-variable-list code {
  padding: .2rem .35rem;
  border-radius: .25rem;
  color: var(--asu-maroon);
  background: #f2f2f2;
}

.email-template-body {
  overflow: auto;
  margin: .2rem 0 0;
  padding: .75rem;
  border: 1px solid #ddd;
  border-radius: .35rem;
  background: #f8f8f8;
  font: .85rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .email-catalog-grid {
    grid-template-columns: 1fr;
  }
}
.access-review-hero {
  padding: 2.5rem 1rem;
  color: #fff;
  background: linear-gradient(130deg, rgba(25, 25, 25, .94), rgba(140, 29, 64, .94)), url("/images/hero-campus.jpg") center / cover;
}
.email-preview-panel .section-heading-row { padding: 0; }
.email-preview-panel .section-heading-row form { margin: 0; }
.email-log-when { min-width: 150px; white-space: nowrap; }
.email-log-recipient { min-width: 180px; overflow-wrap: anywhere; }
/*
 * Panels whose partial has no padding of its own. Activity and balance pad from the
 * inside, so they are already inset; these two would sit flush against the drawer edge
 * without this. Measured content inset: activity 24px, emails 24px, help was 0px.
 */
.user-detail [data-user-tab-panel="emails"],
.user-detail [data-user-tab-panel="help"] { padding: 1.5rem; }

.access-review-shell { align-items: start; padding-block: clamp(1.5rem, 5vw, 4rem); }
.access-review-panel { width: min(960px, 100%); }
.access-review-overview { align-items: baseline; background: #fff4ce; border-left: 5px solid var(--asu-gold); display: flex; gap: .5rem; margin: 1rem 0; padding: .85rem 1rem; }
.access-review-overview strong { color: var(--asu-maroon); font-size: 1.8rem; }
.access-review-card { border: 1px solid #ddd; border-top: 5px solid var(--asu-gold); border-radius: .55rem; padding: 1rem; }
.access-days-pill { align-items: center; background: var(--asu-gold); border-radius: 999px; color: var(--asu-black); display: grid; flex: 0 0 88px; height: 88px; justify-items: center; line-height: 1; padding: .7rem; text-align: center; }
.access-days-pill strong { font-size: 1.5rem; }
.access-days-pill span { font-size: .72rem; font-weight: 700; }
.access-days-pill.is-expired { background: var(--asu-maroon); color: #fff; }
.permission-role-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.permission-role-card { background: #f7f7f7; border-left: 4px solid var(--asu-gold); border-radius: .45rem; padding: 1rem; }
.permission-role-card p { margin: .7rem 0 .45rem; }
.permission-role-card small { color: #555; display: block; line-height: 1.45; }
.permission-group-panel { margin-top: 1rem; }
.permission-definition-list { display: grid; gap: .8rem; }
.permission-definition-card { border: 1px solid #ddd; border-radius: .45rem; display: grid; gap: .45rem; grid-template-columns: minmax(210px, .7fr) 1fr 1fr; padding: 1rem; position: relative; }
.permission-definition-card:focus-within { z-index: 30; }
.permission-definition-card h3, .permission-definition-card p { margin: 0; }
.permission-definition-card code { color: #666; font-size: .78rem; overflow-wrap: anywhere; }
.permission-impact { background: #fff7dc; border-left: 3px solid var(--asu-gold); padding: .55rem .7rem; }
.location-map { border: 1px solid #bbb; border-radius: .45rem; height: 320px; overflow: hidden; width: 100%; }
.pending-attempt-row { display: grid; grid-template-columns: minmax(0, 1fr) 210px auto; gap: 1rem; align-items: center; }
.pending-attempt-map-wrap { min-width: 0; }
.pending-attempt-map { width: 100%; height: 118px; border: 1px solid #d5d5d5; border-radius: .5rem; overflow: hidden; background: #eee; }
.pending-attempt-map-wrap small { display: block; margin-top: .3rem; color: #555; }
@media (max-width: 760px) { .pending-attempt-row { grid-template-columns: 1fr; } .pending-attempt-map { height: 150px; } }
.settings-action-link { color: inherit; text-decoration: none; }
.settings-action-link:hover { border-color: var(--asu-maroon); transform: translateY(-1px); }
@media (max-width: 760px) { .permission-definition-card { grid-template-columns: 1fr; } }

.access-review-hero-inner {
  max-width: var(--page-width);
  margin: auto;
}

.access-review-hero h1 {
  margin: .25rem 0;
  color: #fff;
}

.access-review-workspace,
.access-review-cards {
  display: grid;
  gap: 1rem;
}

.access-review-card {
  border-top: 5px solid var(--asu-gold);
}

.access-review-card > header,
.access-review-choice-grid {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.access-review-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.access-review-choice {
  display: grid;
  align-content: start;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: .55rem;
  background: #f7f7f7;
}

.access-review-choice.is-renew {
  border-color: var(--asu-gold);
  background: #fff8df;
}

@media (max-width: 760px) {
  .access-review-choice-grid {
    grid-template-columns: 1fr;
  }
}
.admin-nav-menu { align-self: stretch; position: relative; }
.admin-nav-menu > summary { align-items: center; background: transparent; border: 0; border-bottom: 6px solid transparent; border-radius: 0; cursor: pointer; display: flex; font-size: .95rem; font-weight: 400; gap: .35rem; list-style: none; margin: 0; min-height: 45px; padding: 0 11px; }
.admin-nav-menu > summary::-webkit-details-marker { display: none; }
.admin-nav-menu > summary::after { content: "\25BE"; font-size: .75rem; transition: transform .15s ease; }
.admin-nav-menu[open] > summary::after { transform: rotate(180deg); }
.admin-nav-menu > summary:hover, .admin-nav-menu > summary.is-active { border-bottom-color: var(--asu-gold); color: var(--asu-maroon); }
.admin-nav-icon { display: none; }
.admin-nav-submenu { background: #fff; border: 1px solid #d2d2d2; border-top: 4px solid var(--asu-gold); box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.2); display: grid; left: 0; min-width: 240px; padding: .45rem; position: absolute; top: 100%; z-index: 100; }
.ws2-main, .ws2-content, .ws2-nav, .admin-nav-menu { overflow: visible; position: relative; }
.admin-nav-menu { z-index: 310; }
.admin-nav-menu[open], .admin-nav-menu:hover, .admin-nav-menu:focus-within { z-index: 320; }
.admin-nav-submenu { z-index: 330; }
.pending-access-admin { display: grid; gap: .65rem; }
.pending-access-admin .pill { justify-self: start; }
.filter-tabs { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.filter-tabs a { border: 1px solid var(--asu-gray-5); border-radius: 999px; color: var(--asu-maroon); padding: .45rem .8rem; text-decoration: none; }
.filter-tabs a.is-active { background: var(--asu-maroon); border-color: var(--asu-maroon); color: #fff; font-weight: 700; }
.qr-registry-filters { align-items: end; display: grid; gap: 1rem; grid-template-columns: minmax(260px,2fr) minmax(180px,1fr) minmax(150px,1fr) auto; }
.technical-value { overflow-wrap: anywhere; }
@media (max-width: 760px) { .qr-registry-filters { grid-template-columns: 1fr; } }
.ws2-nav > .admin-nav-menu:last-child .admin-nav-submenu { left: auto; right: 0; }
.admin-nav-submenu a { border-bottom: 1px solid #eee; color: var(--asu-black) !important; justify-content: space-between; padding: .65rem .75rem !important; }
.admin-nav-submenu a:last-child { border-bottom: 0; }
.admin-nav-section-label { color: #666; font-size: .7rem; font-weight: 800; letter-spacing: .04em; padding: .65rem .75rem .25rem; text-transform: uppercase; }
@media (hover: hover) and (min-width: 981px) { .admin-nav-menu:not([open]):not(:hover):not(:focus-within) > .admin-nav-submenu { display: none; } .admin-nav-menu:hover > .admin-nav-submenu, .admin-nav-menu:focus-within > .admin-nav-submenu { display: grid; } }
@media (hover: none) and (min-width: 981px) { .admin-nav-menu:not([open]) > .admin-nav-submenu { display: none; } }
@media (max-width: 980px) {
  .ws2-header, .ws2-main, .ws2-content, .ws2-nav { box-sizing: border-box; max-width: 100%; min-width: 0; }
  .ws2-nav, .ws2-nav.is-open { align-items: stretch; flex-direction: column; flex-wrap: nowrap; overflow-x: clip; white-space: normal; }
  .ws2-nav.is-open { max-height: calc(100dvh - 150px); overflow-y: auto; }
  .admin-nav-menu { align-self: stretch; flex: 0 0 auto; overflow: visible; width: 100%; }
  .admin-nav-menu > summary { box-sizing: border-box; border-bottom: 1px solid #e5e5e5; min-height: 48px; padding: .7rem .75rem; width: 100%; }
  .admin-nav-menu[open] > summary { background: #fff7df; border-bottom: 3px solid var(--asu-gold); }
  .admin-nav-menu:not([open]) > .admin-nav-submenu { display: none; }
  .admin-nav-submenu, .ws2-nav > .admin-nav-menu:last-child .admin-nav-submenu { border: 0; border-left: 4px solid var(--asu-gold); box-shadow: none; box-sizing: border-box; display: grid; left: auto; margin: 0 0 .4rem .75rem; max-width: calc(100% - .75rem); min-width: 0; overflow: visible; padding: .25rem .4rem .5rem; position: static; right: auto; top: auto; width: calc(100% - .75rem); }
  .admin-nav-submenu a { box-sizing: border-box; min-width: 0; overflow-wrap: anywhere; white-space: normal; width: 100%; }
}
.user-email-list {
  display: grid;
  gap: .55rem;
}

.permission-assignees { border-top: 1px solid #ddd; display: grid; gap: .55rem; margin-top: .75rem; padding-top: .75rem; }
.permission-assignee-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.permission-assignee-list form { margin: 0; }
.permission-assignee { align-items: center; background: #f2f2f2; border: 1px solid #d5d5d5; border-radius: 999px; display: inline-flex; gap: .4rem; padding: .25rem .3rem .25rem .7rem; }
.permission-assignee a { color: var(--asu-maroon); font-weight: 700; text-decoration: none; }
.permission-assignee small { color: #666; }
.permission-assignee button { align-items: center; background: #fff; border: 0; border-radius: 50%; color: var(--asu-maroon); cursor: pointer; display: inline-flex; font-size: 1rem; font-weight: 800; height: 1.55rem; justify-content: center; width: 1.55rem; }
.permission-assignee .pill { font-size: .7rem; line-height: 1; padding: .25rem .45rem; }
.permission-assignee-add { align-items: end; display: grid; gap: .55rem; grid-template-columns: minmax(220px, 1fr) auto; max-width: 650px; }
.permission-assignee-add label { display: grid; font-weight: 700; gap: .3rem; }
.permission-assignee-add .student-lookup, .permission-assignee-add input { width: 100%; }
.permission-assignee-add .student-lookup-results { min-width: min(420px, calc(100vw - 64px)); right: auto; z-index: 100; }
@media (max-width: 640px) { .permission-assignee-add { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .impersonation-banner { align-items: flex-start; flex-direction: column; gap: .35rem; } .impersonation-banner form { position: absolute; right: .5rem; top: .5rem; } .impersonation-banner span { padding-right: 3.5rem; } }

/* Official ASU UDS shell and Barrett Bucks application navigation */
.uds-global-header-shell,
.uds-global-footer-shell {
  position: relative;
  width: 100%;
}

/* Measured heights of the mounted UDS header on each side of its Lg (992px)
   breakpoint. Reserving the real height means the page does not shift when the
   header mounts; uds-shell.js replaces --uds-header-height with the live
   measurement, so these only have to hold until the bundle runs. */
:root {
  --uds-header-reserved-height: 106px;
}

@media (min-width: 992px) {
  :root {
    --uds-header-reserved-height: 143px;
  }
}

.uds-global-header-shell {
  background: var(--asu-white);
  min-height: var(--uds-header-height, var(--uds-header-reserved-height));
  z-index: 400;
}

.uds-global-footer-shell {
  background: var(--asu-black);
}

/* The fallback chrome is a degradation path, not a loading state, so it stays
   hidden while the bundle is in flight and a healthy load never paints its header
   and menus twice. /js/uds-shell-fallback.js reveals it when the bundle fails to
   load or mount; the layout's <noscript> rule covers scripting being unavailable. */
html:not(.uds-header-degraded) [data-uds-header-fallback],
html:not(.uds-footer-degraded) [data-uds-footer-fallback] {
  display: none;
}

.uds-header-fallback,
.uds-footer-fallback {
  box-sizing: border-box;
  width: 100%;
}

.uds-header-fallback,
.uds-footer-fallback {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem max(1rem, calc((100% - var(--content)) / 2));
}

.uds-header-fallback {
  background: var(--asu-white);
  color: var(--asu-black);
  min-height: 84px;
}

.uds-header-fallback-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
}

.uds-header-fallback-nav details {
  position: relative;
}

.uds-header-fallback-nav summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.uds-header-fallback-nav summary::-webkit-details-marker {
  display: none;
}

.uds-header-fallback-nav details[open] {
  z-index: 410;
}

.uds-header-fallback-nav details > a,
.uds-header-fallback-heading {
  background: var(--asu-white);
  display: block;
  min-width: 12rem;
  padding: .45rem .65rem;
}

.uds-header-fallback-nav details[open] > :not(summary) {
  border-left: 1px solid var(--asu-gray-5);
  border-right: 1px solid var(--asu-gray-5);
}

.uds-header-fallback-nav details[open] > :last-child {
  border-bottom: 1px solid var(--asu-gray-5);
}

.uds-header-fallback-heading {
  color: var(--asu-gray-2);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.uds-header-fallback-nav .is-active {
  color: var(--asu-maroon);
  text-decoration: underline;
}

.uds-nav-has-alert {
  position: relative;
}

.uds-nav-has-alert::before {
  background: var(--asu-maroon);
  border: 2px solid var(--asu-white);
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  display: block;
  height: .62rem;
  pointer-events: none;
  position: absolute;
  right: .18rem;
  top: .38rem;
  width: .62rem;
  z-index: 2;
}

/*
 * Match the display mode of every other nav item. This was inline-flex, which turned the
 * gold selected/hover bar that the UDS header draws with ::after into a flex item -- and an
 * empty flex item gets shrunk to zero width, so the home link was the one item in the bar
 * that never showed its underline. Measured in Chromium: inline-flex gives a 0px bar,
 * inline-block gives 42px.
 */
.bb-home-nav {
  display: inline-block;
  min-width: 42px;
  position: relative;
  text-align: center;
}

/*
 * A block icon sized to the line box, not an inline one. The minimums forced it to 20px
 * against a 16px line-height, making the home item four pixels taller than every other nav
 * item and dropping its gold bar below theirs. Block also removes the baseline contribution,
 * so the item measures exactly the same height as its text siblings.
 */
.bb-home-nav .bb-home-nav-icon {
  color: var(--asu-black);
  display: block;
  height: 1em;
  margin: 0 auto;
  width: 1.125em;
}

.uds-header-fallback-nav .bb-home-nav {
  color: var(--asu-black);
}

.uds-header-fallback > div {
  display: grid;
  flex: 1;
  gap: .25rem;
}

.uds-header-fallback a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

/* Vertical ASU lockup: constrain by height so the stacked wordmark stays legible. */
.uds-header-fallback img {
  display: block;
  height: auto;
  max-height: 4.25rem;
  max-width: 7rem;
  width: auto;
}

/* Mirrors the UDS endorsed footer: ASU mark first, unit name beneath it, both left aligned. */
.uds-footer-fallback {
  align-items: flex-start;
  background: var(--asu-black);
  color: var(--asu-white);
  flex-direction: column;
  gap: .85rem;
  justify-content: center;
  min-height: 88px;
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}

/* White endorsed ASU mark — only ever shown against the black footer. */
.uds-footer-fallback img {
  display: block;
  height: auto;
  max-height: 2.75rem;
  max-width: 14rem;
  width: auto;
}

.bb-footer-version {
  color: inherit;
  font-size: .85rem;
  white-space: nowrap;
}

#uds-footer-root #wrapper-footer-colophon .colophon {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
}

#uds-footer-root #wrapper-footer-colophon .bb-footer-version {
  margin-left: auto;
}

@media (max-width: 600px) {
  .uds-header-fallback,
  .uds-footer-fallback {
    align-items: flex-start;
    flex-direction: column;
  }

  .uds-header-fallback {
    min-height: 0;
  }

}
.event-request-page { max-width: 980px; }
.event-request-form-panel { padding: clamp(1.25rem, 3vw, 2rem); }
.event-window-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.event-window-grid input { min-width: 0; width: 100%; }
.event-location-fields { align-items: end; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.event-location-or { color: #666; font-weight: 800; padding-bottom: 1rem; text-align: center; }
@media (max-width: 700px) { .event-window-grid, .event-location-fields { grid-template-columns: 1fr; } .event-location-or { padding: 0; } }

/*
 * The one row style every user-detail tab uses. Emails had it, Help pointed at a class that
 * was never written, and Balance/Activity drew flat hairline rows instead -- so the same
 * drawer showed three different visual languages depending on the tab.
 */
.user-email-row,
.user-record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid #ddd;
  border-left: 4px solid var(--asu-maroon);
  border-radius: .4rem;
  color: inherit;
  text-decoration: none;
}

.user-email-row > span:first-child,
.user-record-row > :first-child {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.user-email-row:hover,
a.user-record-row:hover,
.user-record-row summary:hover {
  background: #fff8df;
}

/* Emails put the subject in a <strong> and the meta in a <small>; match that everywhere. */
.user-record-row strong {
  overflow-wrap: anywhere;
}

.user-record-row small,
.user-record-row .user-record-meta {
  color: #555;
  overflow-wrap: anywhere;
}
.email-queue-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;margin:1.25rem 0}.email-queue-stats article{border:1px solid #ddd;border-top:4px solid #ffc627;border-radius:.5rem;padding:1rem;display:grid;gap:.3rem}.email-queue-stats span,.email-queue-stats small{color:#555}.email-queue-stats strong{font-size:1.8rem}.email-campaign-list{display:grid;gap:.85rem}.email-campaign-card{border:1px solid #ddd;border-left:4px solid #8c1d40;border-radius:.45rem;padding:1rem}.email-campaign-heading,.email-campaign-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.email-campaign-heading>div{display:grid;gap:.25rem}.email-campaign-heading small{color:#555}.email-campaign-progress{height:.65rem;background:#e5e5e5;border-radius:999px;overflow:hidden;margin:.8rem 0}.email-campaign-progress span{display:block;height:100%;background:#78be20;border-radius:inherit}.email-campaign-summary{justify-content:flex-start}.email-campaign-summary form{margin-left:auto}.email-campaign-summary form+form{margin-left:0}@media(max-width:1100px){.email-queue-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.email-queue-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.email-campaign-summary form{margin-left:0}}

/*
 * User type-ahead. The list is positioned over the page rather than pushing it, so results
 * appearing under the cursor never shift the control the user is aiming at.
 */
.user-search-combobox {
  display: block;
  min-width: 0;
  position: relative;
}

.user-search-suggestions {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-radius: .4rem;
  box-shadow: 0 10px 24px rgb(0 0 0 / 14%);
  left: 0;
  list-style: none;
  margin: 4px 0 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 60;
}

.user-search-suggestion {
  border-radius: .3rem;
  cursor: pointer;
  display: grid;
  gap: 2px;
  padding: .5rem .6rem;
}

.user-search-suggestion small {
  color: #555;
  overflow-wrap: anywhere;
}

.user-search-suggestion.is-active,
.user-search-suggestion:hover {
  background: #fff8df;
}

/*
 * Status, priority and assignee rendered as three full-width fields stacked on top of each
 * other, so the controls an admin touches least took the space above everything they read most.
 * One row instead, wrapping to two on a narrow screen rather than to three.
 */
.case-toolbar {
  padding: 14px 18px;
}

.case-toolbar-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.case-toolbar-form .field {
  flex: 1 1 140px;
  margin-bottom: 0;
  min-width: 0;
}

.case-toolbar-form .button {
  flex: 0 0 auto;
}

/*
 * The reply box now sits above the conversation rather than below it, so on a long case an admin
 * no longer scrolls past every message to answer. This rule is what keeps the history reading as
 * history and not as a continuation of the form.
 */
.support-admin-detail .case-conversation {
  border-top: 1px solid var(--asu-gray-6);
  margin-top: 1.4rem;
  padding-top: 1.2rem;
}

/*
 * The screenshot upload sat under a bare <hr> with its own h2, which read as a second page
 * section rather than one more thing you can do to this case. Same weight as the reply form.
 */
.case-attach-form {
  border-top: 1px solid var(--asu-gray-6);
  display: grid;
  gap: .6rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
}

.case-attach-form h3 {
  margin: 0;
}

.case-attach-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.case-attach-row input[type="file"] {
  flex: 1 1 240px;
  min-width: 0;
}

.case-attach-row .button {
  flex: 0 0 auto;
}

/* Administrator landing page. */
.admin-dashboard {
  gap: 26px;
}

.admin-dash-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.admin-attention-grid,
.admin-stat-grid,
.admin-quick-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  min-width: 0;
}

/* Maroon rule: these are the cards that mean someone is waiting. */
.admin-attention-card {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-left: 4px solid var(--asu-maroon);
  border-radius: .5rem;
  color: inherit;
  display: grid;
  gap: .3rem;
  padding: 1rem;
  text-decoration: none;
}

.admin-attention-card:hover {
  background: #fff8df;
}

.admin-attention-card strong {
  font-size: 1.2rem;
}

.admin-all-clear {
  background: var(--asu-gray-7);
  border: 1px solid var(--asu-gray-6);
  border-radius: .5rem;
  display: grid;
  gap: .3rem;
  padding: 1.1rem 1.2rem;
}

.admin-stat {
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-top: 4px solid var(--asu-gold);
  border-radius: .5rem;
  display: grid;
  gap: .2rem;
  padding: 1rem;
}

.admin-stat strong {
  font-size: 1.9rem;
  line-height: 1.1;
}

.admin-stat small {
  color: #555;
}

.admin-quick-action {
  align-items: center;
  background: var(--asu-white);
  border: 1px solid var(--asu-gray-6);
  border-radius: .5rem;
  color: inherit;
  display: flex;
  gap: .75rem;
  padding: .9rem 1rem;
  text-decoration: none;
}

.admin-quick-action:hover {
  background: #fff8df;
  border-color: var(--asu-maroon);
}

.admin-quick-action span {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.admin-quick-action small {
  color: #555;
}

.admin-quick-action svg {
  color: var(--asu-maroon);
  flex: 0 0 auto;
  height: 22px;
  width: 22px;
}

/*
 * Role pill beside the signed-in name in the ASU header. The UDS component renders the name
 * as .uds-hdr-name inside .uds-hdr-login-status and knows nothing about this element, so the
 * pill is sized to sit inside that row without changing the header's own height.
 */
.bb-header-role-pill {
  align-items: center;
  background: var(--asu-gray-6);
  border-radius: 999px;
  color: var(--asu-black);
  display: inline-flex;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  margin-left: .4rem;
  padding: .25rem .5rem;
  vertical-align: middle;
  white-space: nowrap;
}

.bb-header-role-pill.maroon {
  background: var(--asu-maroon);
  color: var(--asu-white);
}

.bb-header-role-pill.gold {
  background: var(--asu-gold);
}

.bb-header-role-pill.green {
  background: var(--asu-green);
}

.bb-header-role-pill.blue {
  background: var(--asu-blue);
}

/*
 * Two columns on the administrator landing page.
 *
 * The four sections are siblings in a .grid.two, so each is half the content width and the card
 * grids inside them have to fit two cards into that half rather than four across the whole page
 * -- hence the smaller track below. align-items:start stops a short section stretching to match
 * the tall one beside it.
 */
.admin-dashboard {
  align-items: start;
  gap: 22px 24px;
}

/* A section with nothing beside it takes the whole row rather than leaving a hole. */
.admin-dashboard .admin-dash-span {
  grid-column: 1 / -1;
}

.admin-dashboard .admin-attention-grid,
.admin-dashboard .admin-stat-grid,
.admin-dashboard .admin-quick-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/*
 * Shorter than the full-width originals. Four stats used to be one band across the top, where a
 * 1.9rem figure reads well; two-by-two inside half the page that same figure made the pair of
 * rows taller than the queue list beside it, which defeats the point of pairing them.
 */
.admin-dashboard .admin-stat {
  padding: .8rem .9rem;
}

.admin-dashboard .admin-stat strong {
  font-size: 1.5rem;
}

.admin-dashboard .admin-attention-card,
.admin-dashboard .admin-quick-action {
  padding: .75rem .85rem;
}

.admin-dashboard .admin-attention-card strong {
  font-size: 1.05rem;
}

.admin-dashboard .admin-all-clear {
  padding: .85rem .95rem;
}

/*
 * The landing hero is the only band on this page with nothing actionable in it, so it is the one
 * that gives up vertical space. Everything below it is a queue or a number somebody opened this
 * page to read.
 */
.admin-landing-hero-compact .admin-landing-hero-inner {
  min-height: 0;
  padding: 18px 32px 20px;
}

.admin-landing-hero-compact h1 {
  font-size: clamp(1.6rem, 2.2vw, 1.95rem);
  margin: 3px 0 6px;
}

@media (max-width: 980px) {
  /* Stacked again, so the cards get the full width back and the compacting is unnecessary. */
  .admin-dashboard .admin-attention-grid,
  .admin-dashboard .admin-stat-grid,
  .admin-dashboard .admin-quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}