/* ENCONA Academy Console
   Apple's web product language (system type, inset-grouped content, translucent bars)
   in the ENCONA palette: navy shell, Encona blue accent, gold warnings, raspberry for destructive.
   Light and dark follow the system appearance. */

/* ---------------------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Brand (from the LMS theme, tutor-encona-theme). Encona blue and raspberry are --accent and
     --danger below. */
  --encona-navy: #202046;
  --encona-gold: #ffc000;

  /* Grounds */
  --bg: #f3f3f8;
  --bg-raised: #ffffff;
  --bg-sunken: #ebebf2;
  --bg-elevated: #ffffff;
  --bg-hover: rgba(32, 32, 70, 0.045);
  --bg-pressed: rgba(32, 32, 70, 0.08);
  --bg-selected: rgba(58, 53, 182, 0.1);
  /* Opaque enough that tab labels keep 4.5:1 over any content scrolling beneath */
  --bar-bg: rgba(243, 243, 248, 0.92);
  --backdrop: rgba(14, 14, 32, 0.32);

  /* Text */
  --label: #16162b;
  --label-secondary: #565670;
  --label-tertiary: #8b8ba0;
  --placeholder: #5e5e78;

  /* Lines and fills */
  --separator: rgba(32, 32, 70, 0.12);
  --separator-strong: rgba(32, 32, 70, 0.22);
  --fill: rgba(118, 118, 150, 0.13);
  --fill-strong: rgba(118, 118, 150, 0.22);

  /* Text fields: a hairline with 3:1 or more against the field and whatever is around it, white
     group or grey ground (WCAG 1.4.11). Focus turns it indigo inside a halo. */
  --field-border: #848499;
  --field-border-hover: #6e6e88;
  --field-border-focus: var(--focus);

  /* Accent: Encona blue */
  --accent: #211d70;
  --accent-hover: #2d2894;
  --accent-pressed: #17144f;
  --on-accent: #ffffff;
  /* Subtitles, and the badges and symbols, on an accent fill (the highlighted finder option) */
  --on-accent-secondary: rgba(255, 255, 255, 0.8);
  --on-accent-fill: rgba(255, 255, 255, 0.18);
  --link: #3a35b6;
  --accent-soft: rgba(58, 53, 182, 0.1);
  /* The highlighted row in the finder and the course picker */
  --accent-selected: var(--accent);
  /* Focus rings: 3:1 or more against every ground (8:1 on white) */
  --focus: #3a35b6;
  --focus-soft: rgba(58, 53, 182, 0.22);

  /* States */
  --success: #17693a;
  --success-soft: rgba(28, 120, 67, 0.12);
  --warning: #7a5200;
  --warning-soft: rgba(255, 192, 0, 0.22);
  --danger: #941651;
  --danger-fill: #941651;
  --danger-hover: #7a1143;
  --on-danger: #ffffff;
  --danger-soft: rgba(148, 22, 81, 0.1);

  /* Badges: opaque soft fills so their text contrast doesn't depend on what's behind them */
  --badge-neutral: #ededf1;
  --badge-accent: #ebebf8;
  --badge-success: #e4efe8;
  --badge-warning: #fff1c7;
  --badge-danger: #f4e8ee;

  /* Navy shell */
  --sidebar-bg: #202046;
  --sidebar-label: rgba(255, 255, 255, 0.94);
  --sidebar-label-secondary: rgba(255, 255, 255, 0.64);
  /* The current item, the operator's initials and a hovered icon */
  --sidebar-label-selected: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, 0.07);
  --sidebar-selected: rgba(255, 255, 255, 0.15);
  --sidebar-separator: rgba(255, 255, 255, 0.1);
  --sidebar-avatar: rgba(255, 255, 255, 0.14);
  --sidebar-focus: rgba(255, 255, 255, 0.75);
  --sidebar-scrollbar: rgba(255, 255, 255, 0.22);

  /* The same in both appearances: the app icon (the navy mark on a white tile) and the label on
     the credential pass's navy band */
  --app-icon-bg: #ffffff;
  --pass-band-label: #ffffff;
  --pass-band-label-secondary: rgba(255, 255, 255, 0.78);

  /* Avatars (Contacts-style monogram): white initials stay above 4.5:1 across the gradient */
  --avatar-top: #6c6aa0;
  --avatar-bottom: #504e84;
  --avatar-label: #ffffff;

  /* The selected segment's thumb in a segmented control */
  --segment-selected: var(--bg-raised);

  /* Toasts: a dark pill in both appearances */
  --toast-bg: rgba(28, 28, 46, 0.94);
  --toast-label: #ffffff;
  --toast-icon: #8ee0ad;
  --toast-icon-error: #ff9cc3;
  --toast-action: rgba(255, 255, 255, 0.16);
  --toast-action-hover: rgba(255, 255, 255, 0.26);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Inter Variable", Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Liberation Mono",
    "DejaVu Sans Mono", monospace;
  --text-caption: 0.75rem;   /* 12 */
  --text-footnote: 0.8125rem; /* 13 */
  --text-table: 0.875rem;    /* 14 */
  --text-body: 0.9375rem;    /* 15 */
  --text-headline: 1.0625rem; /* 17 */
  --text-title3: 1.25rem;    /* 20 */
  --text-title2: 1.5rem;     /* 24 */
  --text-title1: 1.875rem;   /* 30 */

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-16: 64px;

  /* Shape */
  --radius-control: 8px;
  --radius-group: 12px;
  --radius-sheet: 16px;
  --radius-pill: 999px;

  /* Depth */
  --shadow-control: 0 1px 1px rgba(16, 16, 40, 0.06);
  --shadow-raised: 0 1px 2px rgba(16, 16, 40, 0.05), 0 0 0 0.5px rgba(16, 16, 40, 0.06);
  --shadow-popover: 0 18px 48px -12px rgba(16, 16, 40, 0.3), 0 4px 12px rgba(16, 16, 40, 0.08),
    0 0 0 0.5px rgba(16, 16, 40, 0.14);
  --shadow-pass: 0 22px 44px -18px rgba(20, 20, 60, 0.35), 0 2px 6px rgba(20, 20, 60, 0.08);
  --shadow-segment: 0 1px 3px rgba(16, 16, 40, 0.12), 0 0 0 0.5px rgba(16, 16, 40, 0.06);
  --shadow-toast: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
  --shadow-app-icon: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --shadow-app-icon-lg: 0 8px 20px -8px rgba(20, 20, 60, 0.45), inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;

  /* Layout */
  --sidebar-width: 248px;
  --toolbar-height: 52px;
  --content-max: 1160px;
  --gutter: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e1a;
    --bg-raised: #1a1a2c;
    --bg-sunken: #121220;
    --bg-elevated: #23233a;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-pressed: rgba(255, 255, 255, 0.09);
    --bg-selected: rgba(150, 146, 255, 0.16);
    --bar-bg: rgba(14, 14, 26, 0.92);
    --backdrop: rgba(0, 0, 0, 0.5);

    --label: #f1f1f7;
    --label-secondary: #a8a8c0;
    --label-tertiary: #6f6f88;
    --placeholder: #8f8faa;

    --separator: rgba(210, 210, 255, 0.1);
    --separator-strong: rgba(210, 210, 255, 0.2);
    --fill: rgba(140, 140, 190, 0.18);
    --fill-strong: rgba(140, 140, 190, 0.28);

    /* Focus is the opaque indigo here: the 60% ring color is no brighter than the rest border. */
    --field-border: #75758f;
    --field-border-hover: #8f8faa;
    --field-border-focus: #aaa6ff;

    --accent: #5650e0;
    --accent-hover: #6660ee;
    --accent-pressed: #4842c4;
    --link: #aaa6ff;
    --accent-soft: rgba(150, 146, 255, 0.16);
    /* A step darker than the accent, so the row's secondary text keeps 4.5:1 */
    --accent-selected: #4842c4;
    --focus: rgba(170, 166, 255, 0.6);
    --focus-soft: rgba(170, 166, 255, 0.25);

    --success: #52c584;
    --success-soft: rgba(82, 197, 132, 0.16);
    --warning: #ffcb52;
    --warning-soft: rgba(255, 192, 0, 0.16);
    --danger: #ff7fb1;
    --danger-fill: #b3215f;
    --danger-hover: #c62b6d;
    --danger-soft: rgba(255, 127, 177, 0.14);

    --badge-neutral: #2f2f46;
    --badge-accent: #2e2d4e;
    --badge-success: #23353a;
    --badge-warning: #3f3525;
    --badge-danger: #3a283f;

    --sidebar-bg: #17172e;
    --sidebar-separator: rgba(255, 255, 255, 0.08);

    --avatar-top: #6e6ca0;
    --avatar-bottom: #4b4978;

    --segment-selected: #44445e;
    --toast-bg: rgba(58, 58, 84, 0.96);

    --shadow-control: 0 1px 1px rgba(0, 0, 0, 0.3);
    --shadow-raised: 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --shadow-popover: 0 18px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
    --shadow-pass: 0 22px 44px -18px rgba(0, 0, 0, 0.8), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
    --shadow-segment: 0 1px 3px rgba(0, 0, 0, 0.35);
  }
}

/* Increased contrast. This block also applies in dark appearance, after the dark values, so the
   dark block below must set every property it sets: otherwise the light value leaks into dark. */
@media (prefers-contrast: more) {
  :root {
    --label-secondary: #3c3c55;
    --placeholder: #4f4f66;
    --separator: rgba(32, 32, 70, 0.32);
    --separator-strong: rgba(32, 32, 70, 0.55);
    --fill: rgba(80, 80, 120, 0.2);
    --fill-strong: rgba(80, 80, 120, 0.28);
    --field-border: #666680;
    --field-border-hover: #4f4f66;
    --link: #2a2596;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --label-secondary: #d0d0e4;
    --placeholder: #b4b4cc;
    --separator: rgba(220, 220, 255, 0.3);
    --separator-strong: rgba(220, 220, 255, 0.5);
    --fill: rgba(160, 160, 210, 0.24);
    --fill-strong: rgba(160, 160, 210, 0.34);
    --field-border: #9696b0;
    --field-border-hover: #b4b4cc;
    --field-border-focus: #c5c2ff;
    --link: #c5c2ff;
    /* The brighter track needs a brighter thumb to stay apart from it */
    --segment-selected: #55557d;
  }
}

/* ---------------------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Whatever gets focus or is scrolled to stays clear of the sticky toolbar (and, on phones and
     tablets, of the tab bar: see section 15). */
  scroll-padding-top: calc(var(--toolbar-height) + 8px);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.47;
  letter-spacing: -0.009em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul, ol, dl, dd, figure {
  margin: 0;
  padding: 0;
}

ul[role="list"], ol[role="list"] {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration: underline;
}

/* Links inside sentences are underlined, so they don't rely on color alone. */
p a,
.activity-row .row-title a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
}

p a:hover,
.activity-row .row-title a:hover {
  text-decoration-color: currentColor;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

input,
textarea {
  caret-color: var(--link);
}

/* Search fields draw their own magnifier; the browser's clear button and decoration don't
   belong to the design (Escape clears a search field). */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

::selection {
  background: color-mix(in srgb, var(--link) 26%, transparent);
}

::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

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

code,
kbd,
.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.35em;
  border-radius: 5px;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--separator-strong), 0 1px 0 var(--separator-strong);
  color: var(--label-secondary);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
}

hr {
  border: 0;
  height: 1px;
  background: var(--separator);
  margin: var(--space-6) 0;
}

[hidden] {
  display: none !important;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-lg { width: 22px; height: 22px; stroke-width: 1.6; }
.icon-xl { width: 28px; height: 28px; stroke-width: 1.5; }

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------------------
   3. Utilities
   --------------------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-3);
}

.muted { color: var(--label-secondary); }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.text-footnote { font-size: var(--text-footnote); }
.text-headline { font-size: var(--text-headline); font-weight: 600; }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
/* Only on phones (section 15): e.g. a line that stands in for table cells hidden with .hide-sm */
.show-sm { display: none; }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster-lg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

/* ---------------------------------------------------------------------------------------
   4. App shell: navy sidebar, translucent toolbar, content, mobile tab bar
   --------------------------------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100dvh;
  background: linear-gradient(90deg, var(--sidebar-bg) var(--sidebar-width), transparent var(--sidebar-width));
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: var(--sidebar-bg);
  color: var(--sidebar-label);
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-scrollbar) transparent;
}

.sidebar :focus-visible {
  outline-color: var(--sidebar-focus);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-1) var(--space-2) var(--space-4);
  color: inherit;
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.app-icon {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--app-icon-bg);
  box-shadow: var(--shadow-app-icon);
}

.app-icon img {
  width: 22px;
  height: 22px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.brand-name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-org {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sidebar-label-secondary);
}

.nav-group + .nav-group {
  margin-top: var(--space-5);
}

.nav-title {
  padding: 0 10px 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--sidebar-label-secondary);
  letter-spacing: 0.01em;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--sidebar-label);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

.nav-item .icon {
  opacity: 0.82;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  text-decoration: none;
}

.nav-item[aria-current="page"] {
  background: var(--sidebar-selected);
  color: var(--sidebar-label-selected);
}

.nav-item[aria-current="page"] .icon {
  opacity: 1;
  color: var(--encona-gold);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--sidebar-separator);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-footer .avatar {
  background: var(--sidebar-avatar);
  color: var(--sidebar-label-selected);
}

.operator-name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.operator-role {
  font-size: 0.6875rem;
  color: var(--sidebar-label-secondary);
}

.sidebar-footer .btn-icon {
  color: var(--sidebar-label-secondary);
  background: transparent;
}

.sidebar-footer .btn-icon:hover {
  color: var(--sidebar-label-selected);
  background: var(--sidebar-hover);
}

.credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: var(--space-10) 0 0;
  font-size: 0.6875rem;
  color: var(--label-tertiary);
}

.credit .icon {
  width: 12px;
  height: 12px;
}

.auth .credit {
  margin-top: var(--space-4);
}

.main-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--toolbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--gutter);
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.toolbar.is-scrolled {
  border-bottom-color: var(--separator);
}

.toolbar-mark,
.toolbar-signout {
  display: none;
}

.toolbar-title {
  min-width: 0;
  font-size: var(--text-body);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.toolbar.show-title .toolbar-title,
.toolbar-title.always {
  opacity: 1;
  transform: none;
}

.toolbar-trailing {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.finder-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  height: 32px;
  padding: 0 6px 0 10px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--fill);
  color: var(--placeholder);
  font-size: var(--text-footnote);
  cursor: text;
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease);
}

.finder-trigger:hover {
  background: var(--fill-strong);
}

.finder-trigger .label {
  flex: 1;
}

.finder-trigger kbd {
  font-size: 0.6875rem;
}

.page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-2) var(--gutter) var(--space-16);
  flex: 1;
}

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

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) 0 var(--space-6);
}

.page-title {
  font-size: var(--text-title1);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
}

.page-subtitle {
  margin-top: 6px;
  color: var(--label-secondary);
  font-size: var(--text-body);
  max-width: 68ch;
}

.page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: -6px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: var(--text-body);
  font-weight: 500;
}

.back-link:hover {
  background: var(--bg-hover);
  text-decoration: none;
}

.section {
  margin-top: var(--space-10);
}

.section:first-child {
  margin-top: 0;
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--space-4);
  margin: 0 var(--space-1) var(--space-3);
}

.section-title {
  font-size: var(--text-title3);
  font-weight: 650;
  letter-spacing: -0.016em;
}

.section-note {
  font-size: var(--text-footnote);
  color: var(--label-secondary);
}

.tabbar {
  display: none;
}

/* ---------------------------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--fill);
  color: var(--label);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:hover {
  background: var(--fill-strong);
  text-decoration: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn .icon {
  width: 16px;
  height: 16px;
  margin-left: -2px;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-control);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-primary:active {
  background: var(--accent-pressed);
}

.btn-secondary {
  background: var(--bg-raised);
  border-color: var(--separator-strong);
  box-shadow: var(--shadow-control);
}

.btn-secondary:hover {
  background: var(--bg-raised);
  border-color: color-mix(in srgb, var(--separator-strong) 50%, var(--label-secondary));
}

.btn-plain {
  background: transparent;
  color: var(--link);
  padding: 0 8px;
}

.btn-plain:hover {
  background: var(--bg-hover);
}

.btn-danger {
  background: var(--danger-fill);
  color: var(--on-danger);
  box-shadow: var(--shadow-control);
}

.btn-danger:hover {
  background: var(--danger-hover);
}

.btn-lg {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: var(--text-headline);
  font-weight: 600;
}

.btn-sm {
  min-height: 28px;
  padding: 0 10px;
  font-size: var(--text-footnote);
  border-radius: 7px;
}

.btn-icon {
  width: 32px;
  padding: 0;
}

.btn-icon.btn-sm {
  width: 28px;
}

.btn-icon .icon {
  margin: 0;
}

.btn-block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.btn .spinner {
  display: none;
}

.btn.is-loading {
  pointer-events: none;
}

.btn.is-loading .spinner {
  display: inline-block;
}

.btn.is-loading > .icon {
  display: none;
}

/* ---------------------------------------------------------------------------------------
   6. Forms
   --------------------------------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.label {
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--label);
}

.label .optional {
  font-weight: 400;
  color: var(--label-secondary);
}

.hint {
  font-size: var(--text-footnote);
  color: var(--label-secondary);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--text-footnote);
  color: var(--danger);
}

.field-error .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.field-status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  font-size: var(--text-footnote);
  color: var(--label-secondary);
}

.field-status.is-ok { color: var(--success); }
.field-status.is-bad { color: var(--danger); }
.field-status .icon { width: 15px; height: 15px; }

/* Every text field, search field and select: white, with a hairline that has 3:1 against the
   field and its surroundings, like a macOS text field. */
.input,
.select,
.textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-control);
  background: var(--bg-raised);
  color: var(--label);
  font-size: var(--text-body);
  line-height: 1.35;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  appearance: none;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--field-border-hover);
}

/* A field with focus: its border turns the focus indigo inside a soft halo. */
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 3px var(--focus-soft);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.input-mono {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

.select {
  padding-inline-end: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--label-secondary) 50%),
    linear-gradient(135deg, var(--label-secondary) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* A select inside .select-wrap shows the chevron icon that follows it instead of the drawn
   triangle: <span class="select-wrap"><select class="select">…</select>{{ ui.icon("chevron-down") }}</span> */
.select-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.select-wrap .select {
  background-image: none;
}

.select-wrap > .icon {
  position: absolute;
  top: 50%;
  inset-inline-end: 11px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--label-secondary);
  stroke-width: 2;
  pointer-events: none;
}

.input-group {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.input-group .input {
  flex: 1;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-body);
  cursor: pointer;
}

.check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.check-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.check-text .hint {
  font-size: var(--text-footnote);
}

/* Search field (filters, the course picker, and .search-lg below): a text field with a magnifier,
   like a macOS search field. */
.search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.search > .icon {
  position: absolute;
  inset-inline-start: 10px;
  color: var(--label-secondary);
  pointer-events: none;
}

.search .input {
  padding-inline-start: 34px;
}

/* ui.search_clear(): a link back to the list without the submitted search, at the field's end. */
.search-clear {
  position: absolute;
  inset-inline-end: 4px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--label-secondary);
}

.search-clear:hover {
  background: var(--bg-hover);
  color: var(--label);
}

.search-clear .icon {
  width: 16px;
  height: 16px;
}

.search:has(.search-clear) .input {
  padding-inline-end: 36px;
}

.search-lg .input {
  min-height: 52px;
  padding-inline-start: 46px;
  border-radius: 12px;
  font-size: 1.125rem;
  box-shadow: var(--shadow-raised);
}

/* The raised shadow above would otherwise replace the focus halo. */
.search-lg .input:focus {
  box-shadow: 0 0 0 3px var(--focus-soft), var(--shadow-raised);
}

.search-lg > .icon {
  inset-inline-start: 15px;
  width: 20px;
  height: 20px;
}

/* Segmented control: links with aria-current. When it can't fit its row, it wraps instead of
   hiding segments behind a scroll (filters with a pop-up fallback swap first, below). */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: var(--fill);
  max-width: 100%;
}

.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 7px;
  color: var(--label);
  font-size: var(--text-footnote);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.segment:hover {
  text-decoration: none;
  background: var(--bg-hover);
}

.segment[aria-current="page"] {
  background: var(--segment-selected);
  box-shadow: var(--shadow-segment);
  font-weight: 600;
}

.segment .count {
  color: var(--label-secondary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (prefers-color-scheme: dark) {
  .segment[aria-current="page"] .count {
    color: var(--label);
  }
}

/* ui.segmented_links(..., collapse=N): a pop-up button with the same choices, shown instead of
   the segments while their .toolbar-row (a size container) is narrower than N px. That is how iOS
   swaps a crowded segmented control for a menu. console.css knows N = 820 (six filters with
   counts) and N = 480 (five short ones). */
.filter-menu {
  display: none;
  flex: none;
  max-width: 100%;
}

@container (max-width: 819px) {
  .segmented.collapse-820 {
    display: none;
  }

  .filter-menu.collapse-820 {
    display: block;
  }
}

@container (max-width: 479px) {
  .segmented.collapse-480 {
    display: none;
  }

  .filter-menu.collapse-480 {
    display: block;
  }
}

.filter-button {
  max-width: 100%;
}

.filter-button > .icon:first-child {
  color: var(--label-secondary);
}

.filter-button .count {
  color: var(--label-secondary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.filter-button > .icon:last-child {
  width: 14px;
  height: 14px;
  margin-block: 0;
  margin-inline: 2px -4px;
  color: var(--label-secondary);
  stroke-width: 2.2;
}

/* Password field with generate button */
.secret-field .input {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
}

.secret-field .input-group > .btn-icon {
  width: 40px;
}

.requirements {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.requirement {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-footnote);
  color: var(--label-secondary);
}

.requirement.is-met {
  color: var(--success);
}

.requirement .icon {
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------------------------------------------
   7. Inset grouped lists
   --------------------------------------------------------------------------------------- */

.group {
  background: var(--bg-raised);
  border-radius: var(--radius-group);
  box-shadow: var(--shadow-raised);
}

.group-pad {
  padding: var(--space-5);
}

.group-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--separator);
  font-size: var(--text-footnote);
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 10px var(--space-4);
  color: inherit;
}

.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--row-inset, var(--space-4));
  right: 0;
  height: 1px;
  background: var(--separator);
}

/* The separator starts where the row's text does, as in Apple's inset-grouped lists: past the
   16px padding, the leading element and the 12px gap. A row without one keeps 16px. The session
   list's date tiles (home.css) and the enrollment choices (enroll.css) add their own. */
.row:has(> .avatar),
.row:has(> .cell-person > .avatar) {
  --row-inset: calc(var(--space-4) + 32px + var(--space-3));
}

.row:has(> .row-symbol) {
  --row-inset: calc(var(--space-4) + 30px + var(--space-3));
}

.row:has(> .avatar-sm) {
  --row-inset: calc(var(--space-4) + 28px + var(--space-3));
}

/* A person cell used as a row's body (Home's locked-out list): the same 12px gap as other rows. */
.row > .cell-person {
  gap: var(--space-3);
}

.row:first-child {
  border-top-left-radius: var(--radius-group);
  border-top-right-radius: var(--radius-group);
}

.row:last-child {
  border-bottom-left-radius: var(--radius-group);
  border-bottom-right-radius: var(--radius-group);
}

a.row,
button.row {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

a.row:hover,
button.row:hover {
  background: var(--bg-hover);
  text-decoration: none;
}

a.row:active,
button.row:active {
  background: var(--bg-pressed);
}

.row-symbol {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--link);
}

.row-symbol.is-warning { background: var(--warning-soft); color: var(--warning); }
.row-symbol.is-danger { background: var(--danger-soft); color: var(--danger); }
.row-symbol.is-success { background: var(--success-soft); color: var(--success); }
.row-symbol.is-neutral { background: var(--fill); color: var(--label-secondary); }

.row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.row-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-subtitle {
  font-size: var(--text-footnote);
  color: var(--label-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.row-chevron {
  width: 16px;
  height: 16px;
  color: var(--label-tertiary);
  stroke-width: 2.2;
}

/* Activity rows (views/activity.describe): sentences wrap; the time drops under them on phones
   and in narrow asides. */
.activity-row .row-title,
.activity-row .row-subtitle {
  white-space: normal;
  overflow-wrap: anywhere;
}

.activity-row .row-trail {
  white-space: nowrap;
}

.layout-aside aside .activity-row,
.layout-split .activity-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  row-gap: 4px;
}

.layout-aside aside .activity-row .row-symbol,
.layout-split .activity-row .row-symbol {
  grid-row: span 2;
}

.layout-aside aside .activity-row .row-trail,
.layout-split .activity-row .row-trail {
  grid-column: 2;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .activity-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    row-gap: 4px;
  }

  .activity-row .row-symbol {
    grid-row: span 2;
  }

  .activity-row .row-trail {
    grid-column: 2;
    flex-wrap: wrap;
  }
}

.row-empty {
  padding: var(--space-5) var(--space-4);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

/* Key–value rows */
.kv {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
}

.kv > div {
  display: contents;
}

.kv dt,
.kv dd {
  position: relative;
  padding: 11px var(--space-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kv dt {
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.kv dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.kv > div + div > dt::before,
.kv > div + div > dd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--separator);
}

.kv > div + div > dt::before {
  left: var(--space-4);
}

.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.text-button:hover {
  text-decoration-color: currentColor;
}

.copyable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.copy-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--label-tertiary);
  cursor: pointer;
  flex: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.copy-btn:hover {
  background: var(--bg-hover);
  color: var(--link);
}

.copy-btn .icon {
  width: 15px;
  height: 15px;
}

.copy-btn.is-copied {
  color: var(--success);
}

/* ---------------------------------------------------------------------------------------
   8. Tables
   --------------------------------------------------------------------------------------- */

.table-wrap {
  background: var(--bg-raised);
  border-radius: var(--radius-group);
  box-shadow: var(--shadow-raised);
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-table);
  font-variant-numeric: tabular-nums;
}

.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px var(--space-3);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--separator);
  color: var(--label-secondary);
  font-size: var(--text-caption);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.table th:first-child,
.table td:first-child {
  padding-left: var(--space-4);
}

.table th:last-child,
.table td:last-child {
  padding-right: var(--space-4);
}

.table th.num,
.table td.num {
  text-align: right;
}

.table td {
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--separator);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr.is-link {
  cursor: pointer;
}

.table tbody tr.is-link:hover td {
  background: var(--bg-hover);
}

.table tbody tr.is-muted td {
  color: var(--label-secondary);
}

.table .sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -4px -6px;
  padding: 4px 6px;
  border-radius: 6px;
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.table .sort:hover {
  background: var(--bg-hover);
  color: var(--label);
  text-decoration: none;
}

.table .sort .icon {
  width: 12px;
  height: 12px;
  opacity: 0;
}

.table th[aria-sort] .sort {
  color: var(--label);
}

.table th[aria-sort] .sort .icon {
  opacity: 1;
}

.cell-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cell-person .row-body a,
.cell-title a {
  color: var(--label);
  font-weight: 500;
}

.cell-person .row-body a:hover,
.cell-title a:hover {
  color: var(--link);
}

.cell-actions {
  width: 1%;
  white-space: nowrap;
  text-align: end;
}

/* A 30-character username may break onto a second line rather than widen the table. */
.col-username {
  overflow-wrap: anywhere;
}

/* Tablets and laptops narrower than 1280px: a .hide-md column steps aside and a long sign-in time
   ("yesterday, 11:47 AM") wraps, so the table fits without scrolling sideways. */
@media (max-width: 1279px) {
  .table-stack .hide-md {
    display: none;
  }

  .table-stack .col-signin {
    white-space: normal;
  }
}

/* Pager */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: 0 var(--space-1);
  font-size: var(--text-footnote);
  color: var(--label-secondary);
}

.section-more {
  margin-top: var(--space-3);
  padding: 0 var(--space-1);
  font-size: var(--text-footnote);
}

/* Search and filters above a list. It's a size container, so a filter can trade its segments for
   a pop-up button when the row is too narrow (see the segmented control). */
.toolbar-row {
  container-type: inline-size;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.toolbar-row .search {
  flex: 1 1 280px;
  max-width: 420px;
}

/* ---------------------------------------------------------------------------------------
   9. Badges, avatars, status
   --------------------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--badge-neutral);
  color: var(--label-secondary);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.badge .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}

.badge-accent { background: var(--badge-accent); color: var(--link); }
.badge-success { background: var(--badge-success); color: var(--success); }
.badge-warning { background: var(--badge-warning); color: var(--warning); }
.badge-danger { background: var(--badge-danger); color: var(--danger); }

.avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--avatar-top), var(--avatar-bottom));
  color: var(--avatar-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
}

.avatar-sm { width: 28px; height: 28px; font-size: 0.75rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.625rem; font-weight: 500; }

/* ---------------------------------------------------------------------------------------
   10. Feedback: notices, toasts, empty states, spinner
   --------------------------------------------------------------------------------------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--label);
  font-size: var(--text-body);
}

.notice > .icon {
  margin-top: 2px;
  color: var(--link);
}

.notice-title {
  font-weight: 600;
}

.notice-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notice-body .hint,
.notice-body p {
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.notice-success { background: var(--success-soft); }
.notice-success > .icon { color: var(--success); }
.notice-warning { background: var(--warning-soft); }
.notice-warning > .icon { color: var(--warning); }
.notice-danger { background: var(--danger-soft); }
.notice-danger > .icon { color: var(--danger); }

.flash-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
}

.toasts {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  transform: translateX(-50%);
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--toast-bg);
  color: var(--toast-label);
  font-size: var(--text-footnote);
  font-weight: 500;
  box-shadow: var(--shadow-toast);
  pointer-events: auto;
  animation: toast-in var(--dur-slow) var(--ease) both;
}

.toast.is-leaving {
  animation: toast-out var(--dur) var(--ease) both;
}

.toast .icon {
  width: 16px;
  height: 16px;
  color: var(--toast-icon);
}

.toast.is-error .icon {
  color: var(--toast-icon-error);
}

.toast-text {
  padding-right: 6px;
}

.toast .toast-action {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  background: var(--toast-action);
  color: var(--toast-label);
  font-weight: 600;
  cursor: pointer;
}

.toast .toast-action:hover {
  background: var(--toast-action-hover);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px); }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.empty-symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--fill);
  color: var(--label-secondary);
}

.empty-title {
  max-width: 100%;
  font-size: var(--text-headline);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.empty-text {
  max-width: 46ch;
  color: var(--label-secondary);
  font-size: var(--text-body);
}

.empty .btn {
  max-width: 100%;
  margin-top: var(--space-3);
}

.empty .btn,
.result-actions .btn {
  height: auto;
  min-height: 32px;
  padding-block: 6px;
  white-space: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.spinner {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: 0.85;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------------------
   11. Dialogs and menus
   --------------------------------------------------------------------------------------- */

.dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sheet);
  background: var(--bg-elevated);
  color: var(--label);
  box-shadow: var(--shadow-popover);
}

.dialog::backdrop {
  background: var(--backdrop);
}

.dialog[open] {
  animation: dialog-in var(--dur-slow) var(--ease) both;
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.dialog-body {
  padding: var(--space-6) var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dialog-title {
  font-size: var(--text-headline);
  font-weight: 600;
}

.dialog-text {
  color: var(--label-secondary);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6) var(--space-6);
}

.menu {
  min-width: 220px;
  margin: 0;
  padding: 5px;
  border: 0;
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--label);
  box-shadow: var(--shadow-popover);
  inset: auto;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: var(--text-table);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-item .icon {
  width: 16px;
  height: 16px;
  color: var(--label-secondary);
}

.menu-item:hover,
.menu-item:focus-visible {
  outline: none;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}

.menu-item:hover .icon,
.menu-item:focus-visible .icon {
  color: inherit;
}

.menu-item.is-danger {
  color: var(--danger);
}

.menu-item.is-danger:hover,
.menu-item.is-danger:focus-visible {
  background: var(--danger-fill);
  color: var(--on-danger);
}

.menu-separator {
  height: 1px;
  margin: 5px 6px;
  background: var(--separator);
}

/* Opened without JavaScript (the button's popovertarget), a menu has no position from console.js:
   it opens in the middle of the window instead. */
.menu:not([style]) {
  inset: 0;
  margin: auto;
}

/* Pop-up menus of choices (filters): a checkmark slot, the label, then a count. */
.menu-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
}

.menu-check .icon {
  color: var(--link);
  stroke-width: 2.2;
}

.menu-count {
  padding-inline-start: var(--space-4);
  color: var(--label-secondary);
  font-variant-numeric: tabular-nums;
}

.menu-item:hover .menu-count,
.menu-item:focus-visible .menu-count {
  color: inherit;
}

/* ---------------------------------------------------------------------------------------
   12. Finder (⌘K): people and courses from any identifier
   --------------------------------------------------------------------------------------- */

.finder {
  width: min(680px, calc(100vw - 24px));
  max-height: min(620px, calc(100dvh - 96px));
  margin: 12vh auto auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--bg-elevated);
  color: var(--label);
  box-shadow: var(--shadow-popover);
  overflow: hidden;
}

.finder[open] {
  display: flex;
  flex-direction: column;
  animation: finder-in var(--dur) var(--ease) both;
}

@keyframes finder-in {
  from { opacity: 0; transform: scale(0.98) translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.finder::backdrop {
  background: var(--backdrop);
}

.finder-input-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4) 0 var(--space-5);
  border-bottom: 1px solid var(--separator);
}

.finder-input-row > .icon {
  width: 22px;
  height: 22px;
  color: var(--label-secondary);
}

.finder-input {
  flex: 1;
  min-width: 0;
  height: 60px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.finder-results {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--space-2) var(--space-2) var(--space-3);
}

/* The listbox itself scrolls, not a wrapper, so it reads as its field's popup; with tabindex="-1"
   it isn't a Tab stop (the field keeps the keyboard). Its messages sit outside it. */
.finder-list {
  min-height: 0;
  overflow-y: auto;
}

.finder-group + .finder-group {
  margin-top: var(--space-2);
}

.finder-group-title {
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--label-secondary);
  font-size: var(--text-caption);
  font-weight: 600;
}

.finder-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 6px var(--space-3);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.finder-option:hover {
  background: var(--bg-hover);
  text-decoration: none;
}

.finder-option[aria-selected="true"] {
  background: var(--accent-selected);
  color: var(--on-accent);
}

.finder-option[aria-selected="true"] .row-subtitle,
.finder-option[aria-selected="true"] .finder-meta {
  color: var(--on-accent-secondary);
}

.finder-option[aria-selected="true"] .badge,
.finder-option[aria-selected="true"] .row-symbol {
  background: var(--on-accent-fill);
  color: var(--on-accent);
}

.finder-meta {
  flex: none;
  color: var(--label-secondary);
  font-size: var(--text-caption);
}

.finder-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px var(--space-5);
  border-top: 1px solid var(--separator);
  color: var(--label-secondary);
  font-size: var(--text-caption);
}

.finder-footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.finder-status {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--label-secondary);
}

.finder-status .empty-title {
  color: var(--label);
}

.finder-status .empty-text {
  margin: 6px auto 0;
}

/* Inline finder (Home) */
.finder-inline {
  position: relative;
}

.finder-inline .finder-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 15;
  padding: var(--space-2);
  border-radius: 14px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-popover);
}

.finder-inline .finder-list {
  max-height: calc(min(520px, 60vh) - 16px);
}

/* Course picker (combobox) */
.picker-search {
  position: relative;
}

.picker-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 15;
  padding: var(--space-2);
  border-radius: 14px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-popover);
}

.picker-results .finder-list {
  max-height: calc(min(420px, 55vh) - 16px);
}

/* Phones: names and course titles in result lists wrap instead of being cut to one word (runs of
   a course differ only at the end), and the picker's status and count move under the title. */
@media (max-width: 720px) {
  .finder-option .row-title,
  .finder-option .row-subtitle {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .picker-results .finder-option {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .picker-results .finder-option > .row-body {
    flex: 1 1 calc(100% - 42px);
  }

  .picker-results .finder-option > .cluster {
    flex-basis: 100%;
    padding-inline-start: 42px;
  }
}

/* The chosen course stands where the field was, so it keeps the field's border. */
.picker-selected {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--bg-raised);
}

/* ---------------------------------------------------------------------------------------
   13. Credential pass: the hand-off card after a reset or a new account
   --------------------------------------------------------------------------------------- */

.pass {
  width: 100%;
  max-width: 440px;
  border-radius: 18px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-pass);
  overflow: hidden;
}

.pass.is-arriving {
  animation: pass-in 420ms var(--ease) both;
}

@keyframes pass-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.pass-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px var(--space-5);
  background: var(--encona-navy);
  border-bottom: 2px solid var(--encona-gold);
  color: var(--pass-band-label);
}

.pass-band img {
  height: 22px;
  width: auto;
}

.pass-kind {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--pass-band-label-secondary);
}

.pass-body {
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pass-name {
  font-size: var(--text-title3);
  font-weight: 650;
  letter-spacing: -0.016em;
  overflow-wrap: anywhere;
}

.pass-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

.pass-field {
  min-width: 0;
}

.pass-field.is-wide {
  grid-column: 1 / -1;
}

.pass-field dt {
  margin-bottom: 3px;
  color: var(--label-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pass-field dd {
  font-size: var(--text-body);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.pass-secret {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-sunken);
}

.pass-secret .value {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  user-select: all;
  overflow-wrap: anywhere;
}

.pass-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-5);
}

.pass-actions .btn {
  flex: 1 1 160px;
}

.pass-message {
  border-top: 1px solid var(--separator);
}

.pass-message summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px var(--space-5);
  color: var(--link);
  font-size: var(--text-footnote);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.pass-message summary::-webkit-details-marker {
  display: none;
}

.pass-message summary .icon {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease);
}

.pass-message[open] summary .icon {
  transform: rotate(90deg);
}

.pass-message pre {
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-4);
  border-radius: 10px;
  background: var(--bg-sunken);
  font-family: var(--font-sans);
  font-size: var(--text-footnote);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------------------
   14. Page compositions
   --------------------------------------------------------------------------------------- */

.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.layout-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  gap: var(--space-8);
  align-items: start;
}

/* Room for "Failed sign-ins" on one line in SF and Segoe too */
.layout-aside .kv {
  grid-template-columns: 128px minmax(0, 1fr);
}

.detail-header + .layout-aside,
.detail-header + .notice + .layout-aside,
.detail-header ~ .layout-aside.section {
  margin-top: var(--space-6);
}

.detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) 0 var(--space-6);
}

.detail-header .page-title {
  font-size: var(--text-title2);
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 6px;
  color: var(--label-secondary);
}

.detail-meta .sep {
  color: var(--label-tertiary);
}

.detail-badges {
  margin-top: 10px;
}

.detail-badges:empty {
  display: none;
}

.detail-header + .notice,
.detail-header + .flash-stack {
  margin-bottom: var(--space-2);
}

.result-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-4);
}

.result-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  text-align: center;
}

.result-header .page-title {
  overflow-wrap: anywhere;
}

.result-header .page-subtitle {
  margin-inline: auto;
}

.result-symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}

.result-symbol.is-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.result-note {
  margin-top: var(--space-2);
  color: var(--label-secondary);
}

.result-note .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  color: var(--success);
}

.result-center > .notice {
  width: 100%;
  max-width: 440px;
  overflow-wrap: anywhere;
}

.result-center > .hint {
  text-align: center;
}

.result-actions {
  justify-content: center;
  max-width: 100%;
}

.result-actions .btn {
  max-width: 100%;
}

.table .cell-title .row-subtitle {
  white-space: normal;
}

.page-header + .section,
.detail-header + .section,
.detail-header + .notice + .section {
  margin-top: var(--space-6);
}

.page-header + .section {
  margin-top: 0;
}

/* Sign-in page */
.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
}

.auth-card {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.auth-brand .app-icon {
  width: 64px;
  height: 64px;
  border-radius: 15px;
  box-shadow: var(--shadow-app-icon-lg);
}

.auth-brand .app-icon img {
  width: 42px;
  height: 42px;
}

.auth-title {
  font-size: var(--text-title2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auth-footnote {
  text-align: center;
  font-size: var(--text-footnote);
  color: var(--label-secondary);
}

/* ---------------------------------------------------------------------------------------
   15. Responsive
   --------------------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .layout-aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1023px) {
  :root {
    --gutter: 20px;
  }

  /* Keep focused controls clear of the tab bar too. */
  html {
    scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom) + 8px);
  }

  .app {
    grid-template-columns: minmax(0, 1fr);
    background: none;
  }

  .sidebar {
    display: none;
  }

  .toolbar-mark {
    display: grid;
  }

  .toolbar-signout {
    display: block;
  }

  .toolbar-mark.app-icon {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  /* A 44px target around the 28px mark */
  .toolbar-mark::after {
    content: "";
    position: absolute;
    inset: -8px;
  }

  .toolbar-mark.app-icon img {
    width: 19px;
    height: 19px;
  }

  .finder-trigger {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    background: transparent;
    color: var(--link);
  }

  .finder-trigger .label,
  .finder-trigger kbd {
    display: none;
  }

  .finder-trigger .icon {
    width: 20px;
    height: 20px;
  }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    height: calc(56px + env(safe-area-inset-bottom));
    padding: 0 max(env(safe-area-inset-left), 8px) env(safe-area-inset-bottom) max(env(safe-area-inset-right), 8px);
    background: var(--bar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--separator);
  }

  .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--label-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    text-decoration: none;
  }

  .tab:hover {
    text-decoration: none;
  }

  .tab .icon {
    width: 23px;
    height: 23px;
  }

  .tab[aria-current="page"] {
    color: var(--link);
  }

  .page {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .layout-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .toasts {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 16px;
    --text-title1: 1.625rem;
  }

  .page-header {
    padding-bottom: var(--space-5);
  }

  .page-actions {
    width: 100%;
  }

  .detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* A long name or email wraps rather than widening the page (320px phones). */
  .detail-header > .grow {
    align-self: stretch;
    min-width: 0;
  }

  .detail-header .page-title {
    overflow-wrap: anywhere;
  }

  .detail-header .copyable {
    max-width: 100%;
  }

  .detail-header .copyable .truncate {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .show-sm {
    display: block;
  }

  .kv,
  .layout-aside .kv {
    grid-template-columns: minmax(84px, 30%) minmax(0, 1fr);
  }

  .kv dt,
  .kv dd {
    padding-inline: var(--space-3);
  }

  .kv dd .truncate {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .detail-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .detail-meta .sep {
    display: none;
  }

  /* Tables become list rows */
  .table-stack thead {
    display: none;
  }

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

  .table-stack tr {
    position: relative;
    padding: 10px var(--space-4);
  }

  .table-stack tr + tr {
    border-top: 1px solid var(--separator);
  }

  .table-stack td {
    padding: 2px 0 !important;
    border: 0;
    text-align: left !important;
  }

  .table-stack td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--label-secondary);
    font-size: var(--text-caption);
  }

  .table-stack td.cell-actions {
    position: absolute;
    top: 10px;
    inset-inline-end: var(--space-3);
    width: auto;
  }

  /* Rows with an actions button keep their text clear of it. */
  .table-stack tr:has(> td.cell-actions) {
    padding-inline-end: calc(var(--space-4) + 44px);
  }

  .table-stack td.hide-sm {
    display: none;
  }

  .pass-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The finder sits 8px from every edge (the browser's own modal max-width would keep it 19px
     from each side). Its field uses Apple's 17px search text in a tighter row, so the whole
     placeholder fits from 375px. */
  .finder {
    width: calc(100% - 16px);
    max-width: none;
    margin-top: 8px;
    max-height: calc(100dvh - 16px);
  }

  .finder-input-row {
    gap: var(--space-2);
    padding: 0 var(--space-2) 0 var(--space-4);
  }

  .finder-input-row > .icon {
    width: 20px;
    height: 20px;
  }

  .finder-input {
    font-size: var(--text-headline);
  }
}

/* The narrowest phones (320px): the magnifier steps aside and the text drops to 16px, which is
   still large enough that iOS doesn't zoom, so "Search people and courses" fits whole. */
@media (max-width: 359px) {
  .finder-input-row > .icon {
    display: none;
  }

  .finder-input {
    font-size: 1rem;
  }
}

/* Touch layouts (a touch screen, or the phone and tablet layouts with the tab bar): every control
   is at least 44 × 44 px, as Apple's guidelines ask. Text links that stand alone get the same
   target from an invisible extension, so the layout doesn't move. These rules come after the ones
   they enlarge, so they win at equal specificity. */
@media (pointer: coarse), (max-width: 1023px) {
  .btn,
  .btn-sm {
    min-height: 44px;
  }

  .btn-icon,
  .btn-icon.btn-sm,
  .secret-field .input-group > .btn-icon {
    width: 44px;
  }

  .input,
  .select {
    min-height: 44px;
  }

  /* 16px text: iOS Safari zooms into any field with smaller text when it gets focus. */
  .input,
  .select,
  .textarea {
    font-size: 1rem;
  }

  .nav-item,
  .menu-item,
  .segment,
  .back-link,
  .check,
  .pass-message summary {
    min-height: 44px;
  }

  .copy-btn,
  .search-clear {
    width: 44px;
    height: 44px;
  }

  .search-clear {
    inset-inline-end: 0;
  }

  .search:has(.search-clear) .input {
    padding-inline-end: 44px;
  }

  /* Column headers are 44px tall, so a sort link's target can fill one. */
  .table th {
    padding-block: 13px;
  }

  .table .sort,
  .section-header a,
  .section-more a,
  .group-footer a {
    position: relative;
  }

  .table .sort::after,
  .section-header a::after,
  .section-more a::after,
  .group-footer a::after {
    content: "";
    position: absolute;
    inset: -13px -6px;
  }
}

/* Keyboard hints mean nothing on a touch screen. */
@media (pointer: coarse) {
  .finder-footer {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------
   16. Motion and transparency preferences
   --------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .spinner {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }

  .pass.is-arriving,
  .toast,
  .dialog[open],
  .finder[open] {
    animation-name: fade-in !important;
    animation-duration: 160ms !important;
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-transparency: reduce) {
  .toolbar,
  .tabbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg);
  }
}

@media (forced-colors: active) {
  .nav-item[aria-current="page"],
  .segment[aria-current="page"],
  .finder-option[aria-selected="true"] {
    outline: 2px solid CanvasText;
  }

  /* Their normal focus look is a background or a box-shadow, which forced colors remove. */
  .menu-item:focus-visible,
  .input:focus,
  .select:focus,
  .textarea:focus,
  .finder-input:focus {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}