/* irsc-brand:start */
/* irsc-brand 1.2.1 (b2f1b28) - generated by irsc-brand/scripts/sync.py; do not edit */

/*
 * IRSC design tokens. Source of truth: irsc-brand/css/irsc-tokens.css.
 * Apps receive a copy through scripts/sync.py; edit here, never in an app.
 *
 * Brand colors come from the IRSC brand guide. Everything under "UI tints"
 * is derived from those colors for interface states; check every text or
 * control pairing with scripts/check_contrast.py before changing a value.
 *
 * Themes: light is the default. <html data-theme="dark"> forces dark, and
 * <html data-theme="auto"> follows the visitor's system setting. Pages ship
 * with data-theme="light"; js/irsc-theme.js swaps in the visitor's saved
 * choice from the theme switch before the first paint. The dark tokens apply
 * on screen only, so every page prints with the light tokens.
 */

/* Metronic Slab Pro is licensed. These faces only use copies installed on the
   visitor's computer; add licensed woff2 files here to serve it to everyone. */
@font-face {
  font-family: "Metronic Slab Pro";
  font-weight: 300;
  src: local("Metronic Slab Pro Light"), local("MetronicSlabPro-Light");
}
@font-face {
  font-family: "Metronic Slab Pro";
  font-weight: 400;
  src: local("Metronic Slab Pro"), local("Metronic Slab Pro Regular"), local("MetronicSlabPro-Regular");
}
@font-face {
  font-family: "Metronic Slab Pro";
  font-weight: 600;
  src: local("Metronic Slab Pro SemiBold"), local("Metronic Slab Pro Semibold"), local("MetronicSlabPro-SemiBold");
}

:root {
  /* Brand palette (IRSC brand guide) */
  --irsc-blue: #003da5;   /* River Blue, PMS 293C (primary) */
  --irsc-yellow: #fedb00; /* Peregrine Yellow, PMS 108C (primary) */
  --irsc-navy: #062551;   /* PMS 655C (secondary) */
  --irsc-gray: #cfd2d3;   /* PMS 427C (secondary) */
  --irsc-black: #000000;
  --irsc-white: #ffffff;

  /* Type. Headings use Metronic Slab Pro; body copy uses the brand's web fonts. */
  --irsc-font-display: "Metronic Slab Pro", Rockwell, "Roboto Slab", "Trebuchet MS", Verdana, Arial, sans-serif;
  --irsc-font-body: "Trebuchet MS", Verdana, Arial, "Liberation Sans", sans-serif;
  --irsc-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --irsc-weight-light: 300;
  --irsc-weight-regular: 400;
  --irsc-weight-semibold: 600;

  --irsc-text-xs: 0.75rem;
  --irsc-text-sm: 0.875rem;
  --irsc-text-md: 1rem;
  --irsc-text-lg: 1.125rem;
  --irsc-text-xl: 1.375rem;
  --irsc-text-2xl: 1.75rem;
  --irsc-text-3xl: 2.25rem;
  --irsc-leading-tight: 1.2;
  --irsc-leading: 1.55;
  --irsc-measure: 70ch;

  /* Space, shape, depth, motion */
  --irsc-space-1: 0.25rem;
  --irsc-space-2: 0.5rem;
  --irsc-space-3: 0.75rem;
  --irsc-space-4: 1rem;
  --irsc-space-5: 1.5rem;
  --irsc-space-6: 2rem;
  --irsc-space-7: 3rem;
  --irsc-space-8: 4rem;
  --irsc-radius-sm: 4px;
  --irsc-radius-md: 8px;
  --irsc-radius-lg: 12px;
  --irsc-radius-pill: 999px;
  --irsc-control-height: 2.75rem; /* 44px touch target */
  --irsc-header-rule: 4px;        /* Peregrine Yellow rule under the header */
  --irsc-focus-width: 3px;
  --irsc-ease: cubic-bezier(0.2, 0, 0, 1);
  --irsc-duration: 150ms;

  /* UI tints and semantic roles: light theme */
  --irsc-bg: #f5f6f6;              /* page: PMS 427C at 20% */
  --irsc-surface: #ffffff;         /* cards, panels, inputs */
  --irsc-surface-sunken: #ecedee;  /* wells, table headers: PMS 427C at 40% */
  --irsc-text: #000000;
  --irsc-text-muted: #4a5157;
  --irsc-heading: #062551;
  --irsc-border: #cfd2d3;          /* decorative dividers only */
  --irsc-border-strong: #6b7278;   /* input and control outlines (3:1 or better) */
  --irsc-accent: #003da5;          /* primary buttons, selected states */
  --irsc-accent-hover: #062551;
  --irsc-on-accent: #ffffff;
  --irsc-accent-soft: #e6ecf6;     /* River Blue at 10%: selected rows, info */
  --irsc-link: #003da5;
  --irsc-link-hover: #062551;
  --irsc-highlight: #fedb00;       /* never as text or a line on light surfaces */
  --irsc-on-highlight: #000000;
  --irsc-highlight-soft: #fff8cc;  /* Peregrine Yellow at 20%: notices */
  --irsc-focus: #003da5;
  --irsc-focus-halo: #ffffff;
  --irsc-header-bg: #062551;
  --irsc-header-text: #ffffff;
  --irsc-header-muted: #c9d2e0;
  --irsc-header-accent: #fedb00;
  --irsc-header-focus: #fedb00;
  --irsc-danger: #b42318;
  --irsc-danger-soft: #fdecea;
  --irsc-success: #1a6b3a;
  --irsc-success-soft: #e7f4ec;
  --irsc-shadow-1: 0 1px 2px rgb(6 37 81 / 0.08), 0 1px 3px rgb(6 37 81 / 0.06);
  --irsc-shadow-2: 0 4px 12px rgb(6 37 81 / 0.12), 0 2px 4px rgb(6 37 81 / 0.08);
  color-scheme: light;
}

/* Dark theme, on screen only so pages print light. Keep this block and the
   auto block below identical. */
@media screen {
  :root[data-theme="dark"] {
    --irsc-bg: #031229;
    --irsc-surface: #062551;
    --irsc-surface-sunken: #04193a;
    --irsc-text: #ffffff;
    --irsc-text-muted: #bcc6d6;
    --irsc-heading: #ffffff;
    --irsc-border: #23406d;
    --irsc-border-strong: #8a9ab3;
    --irsc-accent: #fedb00;
    --irsc-accent-hover: #ffe75c;
    --irsc-on-accent: #062551;
    --irsc-accent-soft: #0e3470;
    --irsc-link: #a9c4f5;
    --irsc-link-hover: #fedb00;
    --irsc-highlight: #fedb00;
    --irsc-on-highlight: #000000;
    --irsc-highlight-soft: #3d3400;
    --irsc-focus: #fedb00;
    --irsc-focus-halo: #031229;
    --irsc-header-bg: #000000;
    --irsc-header-text: #ffffff;
    --irsc-header-muted: #c9d2e0;
    --irsc-header-accent: #fedb00;
    --irsc-header-focus: #fedb00;
    --irsc-danger: #ff9b91;
    --irsc-danger-soft: #4a1410;
    --irsc-success: #7fdc9f;
    --irsc-success-soft: #0f3a22;
    --irsc-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --irsc-shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --irsc-bg: #031229;
    --irsc-surface: #062551;
    --irsc-surface-sunken: #04193a;
    --irsc-text: #ffffff;
    --irsc-text-muted: #bcc6d6;
    --irsc-heading: #ffffff;
    --irsc-border: #23406d;
    --irsc-border-strong: #8a9ab3;
    --irsc-accent: #fedb00;
    --irsc-accent-hover: #ffe75c;
    --irsc-on-accent: #062551;
    --irsc-accent-soft: #0e3470;
    --irsc-link: #a9c4f5;
    --irsc-link-hover: #fedb00;
    --irsc-highlight: #fedb00;
    --irsc-on-highlight: #000000;
    --irsc-highlight-soft: #3d3400;
    --irsc-focus: #fedb00;
    --irsc-focus-halo: #031229;
    --irsc-header-bg: #000000;
    --irsc-header-text: #ffffff;
    --irsc-header-muted: #c9d2e0;
    --irsc-header-accent: #fedb00;
    --irsc-header-focus: #fedb00;
    --irsc-danger: #ff9b91;
    --irsc-danger-soft: #4a1410;
    --irsc-success: #7fdc9f;
    --irsc-success-soft: #0f3a22;
    --irsc-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --irsc-shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

/*
 * IRSC base: element defaults built only from irsc-tokens.css.
 *
 * Element rules sit inside :where() so they carry zero specificity; any rule
 * an app writes, even a bare element selector, wins without !important.
 * The utility classes and the print rules at the end use plain selectors on
 * purpose so an app's element rules cannot undo them.
 */

/* Box model */
:where(*),
::before,
::after {
  box-sizing: border-box;
}

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

/* Page */
:where(body) {
  margin: 0;
  background: var(--irsc-bg);
  color: var(--irsc-text);
  font-family: var(--irsc-font-body);
  font-size: 1rem;
  line-height: var(--irsc-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings: Metronic Slab Pro semibold where installed, brand fallbacks elsewhere */
:where(h1, h2, h3, h4) {
  margin: 0 0 var(--irsc-space-3);
  color: var(--irsc-heading);
  font-family: var(--irsc-font-display);
  font-weight: var(--irsc-weight-semibold);
  line-height: var(--irsc-leading-tight);
  text-wrap: balance;
}

:where(h1) {
  font-size: var(--irsc-text-3xl);
}

:where(h2) {
  font-size: var(--irsc-text-2xl);
}

:where(h3) {
  font-size: var(--irsc-text-xl);
}

:where(h4) {
  font-size: var(--irsc-text-lg);
}

/* Give a heading room when it follows running content */
:where(p, ul, ol, dl, blockquote, pre, table, figure) + :where(h2, h3, h4) {
  margin-top: var(--irsc-space-6);
}

:where(small) {
  font-size: var(--irsc-text-sm);
}

/* Links */
:where(a) {
  color: var(--irsc-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:where(a:hover) {
  color: var(--irsc-link-hover);
  text-decoration-thickness: 2px;
}

/* Focus: a ring in the focus color with a halo on both sides, so it reads
   on light, dark and brand-colored backgrounds alike. */
:where(:focus-visible) {
  outline: var(--irsc-focus-width) solid var(--irsc-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 calc(var(--irsc-focus-width) + 4px) var(--irsc-focus-halo);
}

/* The header and toasts sit on the header color, where River Blue vanishes (1.6:1) */
:where(.irsc-header :focus-visible, .irsc-toast :focus-visible) {
  outline-color: var(--irsc-header-focus);
  box-shadow: 0 0 0 calc(var(--irsc-focus-width) + 4px) var(--irsc-header-bg);
}

::selection {
  background: var(--irsc-highlight);
  color: var(--irsc-on-highlight);
}

/* Media */
:where(img, svg, video, canvas, picture) {
  max-width: 100%;
}

:where(img, video) {
  height: auto;
}

/* Tables */
:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

:where(th) {
  background: var(--irsc-surface-sunken);
  color: var(--irsc-text);
  font-weight: var(--irsc-weight-semibold);
  text-align: start;
}

/* Form controls take the page font instead of the browser's. Color is left to
   the browser (or a component) so an unstyled control never inherits light
   text from a dark header, toast or app onto its light default background. */
:where(button, input, select, textarea) {
  font: inherit;
}

:where(button, [role="button"], label[for], select, summary) {
  cursor: pointer;
}

:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--irsc-accent);
}

/* Code */
:where(code, kbd, samp, pre) {
  font-family: var(--irsc-font-mono);
  font-size: 0.9em;
}

:where(pre) {
  overflow-x: auto;
  padding: var(--irsc-space-4);
  border-radius: var(--irsc-radius-md);
  background: var(--irsc-surface-sunken);
  color: var(--irsc-text);
}

:where(hr) {
  height: 0;
  margin: var(--irsc-space-6) 0;
  border: 0;
  border-top: 1px solid var(--irsc-border);
}

/* Utilities */

/* Skip link: off screen until a keyboard user tabs to it */
.irsc-skip-link {
  position: absolute;
  top: var(--irsc-space-3);
  left: var(--irsc-space-3);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: var(--irsc-control-height);
  padding: var(--irsc-space-2) var(--irsc-space-4);
  border-radius: var(--irsc-radius-sm);
  background: var(--irsc-highlight);
  color: var(--irsc-on-highlight);
  font-weight: var(--irsc-weight-semibold);
  text-decoration: underline;
  transform: translateY(calc(-100% - var(--irsc-space-4)));
}

.irsc-skip-link:focus {
  transform: none;
}

/* Visually hidden, still read by screen readers */
.irsc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* Motion: honor the visitor's reduced-motion setting everywhere */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Windows high contrast and other forced-color modes drop box shadows and
   backgrounds, so focus and control edges must come from outlines and borders. */
@media (forced-colors: active) {
  :where(:focus-visible),
  :where(.irsc-header :focus-visible, .irsc-toast :focus-visible) {
    outline: var(--irsc-focus-width) solid Highlight;
    box-shadow: none;
  }

  :where(hr) {
    border-top-color: CanvasText;
  }

  /* Its yellow fill is dropped, so give the skip link a visible edge */
  .irsc-skip-link {
    border: 2px solid CanvasText;
  }
}

/* Print: the dark tokens are screen-only, so pages print with the light theme
   and River Blue links. Browsers drop fills on paper by default, so the header
   prints dark on white, buttons and marks keep the fill their label needs (a
   highlight badge would otherwise print as a yellow hairline), and screen-only
   controls are left out. */
@media print {
  :root {
    --irsc-header-bg: var(--irsc-surface);
    --irsc-header-text: var(--irsc-text);
    --irsc-header-muted: var(--irsc-text-muted);
    --irsc-header-accent: var(--irsc-text);
  }

  .irsc-btn,
  .irsc-badge--highlight,
  .irsc-pagination [aria-current="page"],
  .irsc-notice::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* A primary button in the header is filled with the header accent, black here */
  .irsc-header .irsc-btn {
    --irsc-on-accent: var(--irsc-surface);
  }

  .irsc-skip-link,
  .irsc-theme-switch,
  .irsc-toast-region {
    display: none !important;
  }
}

/*
 * IRSC components. Every class starts with .irsc- and every color, size and
 * font comes from irsc-tokens.css. Mobile first: the base rules fit a 360px
 * screen and wider layouts are added with min-width media queries.
 */

/* ---------- Layout ---------- */

/* Container: centered page column with side padding */
.irsc-container {
  width: 100%;
  max-width: var(--irsc-container-max, 72rem);
  margin-inline: auto;
  padding-inline: var(--irsc-space-4);
}

@media (min-width: 48rem) {
  .irsc-container {
    padding-inline: var(--irsc-space-6);
  }
}

/* Stack: vertical rhythm between siblings; set --irsc-stack-gap to change it */
.irsc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--irsc-stack-gap, var(--irsc-space-4));
}

.irsc-stack--sm {
  --irsc-stack-gap: var(--irsc-space-2);
}

.irsc-stack--lg {
  --irsc-stack-gap: var(--irsc-space-6);
}

/* Cluster: a wrapping row, for button groups and badge lists */
.irsc-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--irsc-cluster-gap, var(--irsc-space-3));
}

/* ---------- Header ---------- */

/* Header: navy bar, Peregrine Yellow rule, text wordmark, nav, actions.
   River Blue is 1.6:1 on the header, so a primary button in it turns
   Peregrine Yellow with black text (white on hover). Nothing is reordered:
   the parts wrap in source order (wordmark, nav, actions), so Tab follows
   what the eye reads at every width. */
.irsc-header {
  --irsc-accent: var(--irsc-header-accent);
  --irsc-accent-hover: var(--irsc-header-text);
  --irsc-on-accent: var(--irsc-on-highlight);
  background: var(--irsc-header-bg);
  color: var(--irsc-header-text);
  border-bottom: var(--irsc-header-rule) solid var(--irsc-header-accent);
}

.irsc-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--irsc-space-2) var(--irsc-space-5);
  padding-block: var(--irsc-space-3);
}

/* Plain links and headings on the header color (header, toast) use its text
   color; the page's River Blue links and navy headings would vanish there. */
.irsc-header :where(a),
.irsc-toast :where(a) {
  color: var(--irsc-header-text);
}

.irsc-header :where(h1, h2, h3, h4),
.irsc-toast :where(h1, h2, h3, h4) {
  color: inherit;
}

/* Wordmark: "Indian River State College" eyebrow over the app name (no logo) */
.irsc-wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: none;
  padding-block: var(--irsc-space-1);
  border-radius: var(--irsc-radius-sm);
  color: var(--irsc-header-text);
  text-decoration: none;
}

.irsc-wordmark:hover {
  color: var(--irsc-header-text);
}

.irsc-wordmark__eyebrow {
  color: var(--irsc-header-muted);
  font-family: var(--irsc-font-body);
  font-size: var(--irsc-text-xs);
  font-weight: var(--irsc-weight-semibold);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.irsc-wordmark__name {
  font-family: var(--irsc-font-display);
  font-size: var(--irsc-text-xl);
  font-weight: var(--irsc-weight-semibold);
  line-height: 1.1;
}

/* Header actions: theme switch, sign-in state. They come last and hug the
   right edge on whichever row they land, and so does each row they wrap onto. */
.irsc-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--irsc-space-3);
  margin-left: auto;
  color: var(--irsc-header-muted);
  font-size: var(--irsc-text-sm);
  white-space: nowrap;
}

/* Plain links among the actions (Help, Sign out) get a full 44px target */
.irsc-header__actions :where(a:not(.irsc-btn)) {
  display: inline-flex;
  align-items: center;
  min-height: var(--irsc-control-height);
}

/* Nav: beside the wordmark when it fits, otherwise on the next row with its
   first link lined up under the wordmark. Links wrap rather than scroll out
   of sight. */
.irsc-nav {
  margin-inline: calc(var(--irsc-space-3) * -1);
}

.irsc-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.irsc-nav a {
  display: flex;
  align-items: center;
  min-height: var(--irsc-control-height);
  padding-inline: var(--irsc-space-3);
  border-radius: var(--irsc-radius-sm);
  color: var(--irsc-header-muted);
  font-weight: var(--irsc-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.irsc-nav a:hover {
  color: var(--irsc-header-text);
  text-decoration: underline 1px var(--irsc-header-muted);
  text-underline-offset: 0.45em;
}

/* Current page: white text with a Peregrine Yellow underline marker */
.irsc-nav a[aria-current]:not([aria-current="false"]) {
  color: var(--irsc-header-text);
  text-decoration: underline 3px var(--irsc-header-accent);
  text-underline-offset: 0.45em;
}

/* Links sit edge to edge, so draw the focus ring inside */
.irsc-nav a:focus-visible {
  outline-offset: calc(var(--irsc-focus-width) * -1);
  box-shadow: none;
}

@media (min-width: 60rem) {
  .irsc-header__inner {
    flex-wrap: nowrap;
    min-height: 4.5rem;
    padding-block: 0;
  }

  /* A squeezed nav wraps to a second line before the wordmark or actions shrink */
  .irsc-nav {
    margin-inline: 0;
  }

  .irsc-header__actions {
    flex: none;
    flex-wrap: nowrap;
  }
}

/* ---------- Theme switch ---------- */

/* Theme switch: Light / Dark / Auto, remembered per browser by js/irsc-theme.js.
   Put it in .irsc-header__actions or on any page surface:
   <div class="irsc-theme-switch" role="group" aria-label="Color theme" data-irsc-theme-switch>
     <button type="button" data-irsc-theme-value="light" aria-pressed="true">Light</button>
     <button type="button" data-irsc-theme-value="dark" aria-pressed="false">Dark</button>
     <button type="button" data-irsc-theme-value="auto" aria-pressed="false">Auto</button>
   </div> */
.irsc-theme-switch {
  display: inline-flex;
  flex: none;
  gap: 2px;
  width: fit-content;
  padding: 3px;
  border: 1px solid var(--irsc-theme-switch-edge, var(--irsc-border-strong));
  border-radius: var(--irsc-radius-pill);
}

/* 36px segments; the ::after reaches the group's edge for a 44px touch target */
.irsc-theme-switch button {
  position: relative;
  min-height: 2.25rem;
  margin: 0;
  padding: 0 var(--irsc-space-3);
  border: 0;
  border-radius: var(--irsc-radius-pill);
  background: transparent;
  color: var(--irsc-theme-switch-text, var(--irsc-text-muted));
  font-family: var(--irsc-font-body);
  font-size: var(--irsc-text-sm);
  font-weight: var(--irsc-weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.irsc-theme-switch button::after {
  content: "";
  position: absolute;
  inset-block: min(0px, calc((100% - var(--irsc-control-height)) / 2));
  inset-inline: min(0px, calc((100% - var(--irsc-control-height)) / 2));
}

.irsc-theme-switch button:hover {
  color: var(--irsc-theme-switch-hover, var(--irsc-text));
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Selected: the accent fill. River Blue with white text on a light page, Peregrine
   Yellow with navy text on a dark one, and yellow with black text in the header. */
.irsc-theme-switch [aria-pressed="true"],
.irsc-theme-switch [aria-pressed="true"]:hover {
  background: var(--irsc-accent);
  color: var(--irsc-on-accent);
  text-decoration: none;
}

/* Segments sit edge to edge, so the focus ring goes inside, clear of the edge
   so it still reads on a filled segment. The selected segment is filled with
   the focus color, so its ring takes the label color. */
.irsc-theme-switch button:focus-visible {
  outline-offset: calc(var(--irsc-focus-width) * -1 - 2px);
  box-shadow: none;
}

.irsc-theme-switch [aria-pressed="true"]:focus-visible {
  outline-color: currentColor;
}

.irsc-header .irsc-theme-switch {
  --irsc-theme-switch-edge: var(--irsc-header-muted);
  --irsc-theme-switch-text: var(--irsc-header-muted);
  --irsc-theme-switch-hover: var(--irsc-header-text);
}

/* ---------- Buttons ---------- */

/* Button: River Blue primary (yellow with navy text in dark mode) */
.irsc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--irsc-space-2);
  min-height: var(--irsc-control-height);
  padding: var(--irsc-space-2) var(--irsc-space-5);
  border: 2px solid var(--irsc-accent);
  border-radius: var(--irsc-radius-md);
  background: var(--irsc-accent);
  color: var(--irsc-on-accent);
  font-family: var(--irsc-font-body);
  font-size: var(--irsc-text-md);
  font-weight: var(--irsc-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--irsc-duration) var(--irsc-ease),
    border-color var(--irsc-duration) var(--irsc-ease),
    color var(--irsc-duration) var(--irsc-ease);
}

.irsc-btn:hover {
  border-color: var(--irsc-accent-hover);
  background: var(--irsc-accent-hover);
  color: var(--irsc-on-accent);
}

/* Secondary: outlined, for the second action in a group */
.irsc-btn--secondary {
  border-color: var(--irsc-border-strong);
  background: var(--irsc-surface);
  color: var(--irsc-text);
}

.irsc-btn--secondary:hover {
  border-color: var(--irsc-accent);
  background: var(--irsc-accent-soft);
  color: var(--irsc-text);
}

/* Ghost: text-only, for low-emphasis actions such as Cancel */
.irsc-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--irsc-link);
}

.irsc-btn--ghost:hover {
  border-color: transparent;
  background: var(--irsc-accent-soft);
  color: var(--irsc-link);
}

/* Danger: outlined in red, fills on hover; for destructive actions */
.irsc-btn--danger {
  border-color: var(--irsc-danger);
  background: var(--irsc-surface);
  color: var(--irsc-danger);
}

.irsc-btn--danger:hover {
  border-color: var(--irsc-danger);
  background: var(--irsc-danger);
  color: var(--irsc-surface);
}

/* Small: dense toolbars and table rows. 32px to the eye; the ::after
   extends the touch target to 44px without changing the layout. */
.irsc-btn--sm {
  position: relative;
  min-height: 2rem;
  padding: var(--irsc-space-1) var(--irsc-space-3);
  border-radius: var(--irsc-radius-sm);
  font-size: var(--irsc-text-sm);
}

.irsc-btn--sm::after {
  content: "";
  position: absolute;
  inset-block: min(0px, calc((100% - var(--irsc-control-height)) / 2));
  inset-inline: min(0px, calc((100% - var(--irsc-control-height)) / 2));
}

/* Disabled: muted and inert; applies to <button disabled> and aria-disabled links */
.irsc-btn:disabled,
.irsc-btn[aria-disabled="true"] {
  border-color: var(--irsc-border);
  background: var(--irsc-surface-sunken);
  color: var(--irsc-text-muted);
  cursor: not-allowed;
}

/* Secondary and ghost buttons on the header color (header, toast) */
.irsc-header .irsc-btn--secondary,
.irsc-header .irsc-btn--ghost,
.irsc-toast .irsc-btn--secondary,
.irsc-toast .irsc-btn--ghost {
  border-color: var(--irsc-header-muted);
  background: transparent;
  color: var(--irsc-header-text);
}

.irsc-header .irsc-btn--ghost,
.irsc-toast .irsc-btn--ghost {
  border-color: transparent;
}

.irsc-header .irsc-btn--secondary:hover,
.irsc-header .irsc-btn--ghost:hover,
.irsc-toast .irsc-btn--secondary:hover,
.irsc-toast .irsc-btn--ghost:hover {
  border-color: var(--irsc-header-text);
  background: transparent;
  color: var(--irsc-header-text);
}

/* ---------- Forms ---------- */

/* Field: label, optional hint, optional error, control; link them with aria-describedby */
.irsc-field {
  display: flex;
  flex-direction: column;
  gap: var(--irsc-space-1);
  min-width: 0;
}

.irsc-label,
.irsc-field > label {
  color: var(--irsc-text);
  font-weight: var(--irsc-weight-semibold);
}

/* "(optional)" or "(required)" after a label */
.irsc-label__note {
  color: var(--irsc-text-muted);
  font-weight: var(--irsc-weight-regular);
}

/* Hint: help text under the label */
.irsc-hint {
  margin: 0;
  color: var(--irsc-text-muted);
  font-size: var(--irsc-text-sm);
}

/* Error: what went wrong and how to fix it, shown above the control */
.irsc-error {
  margin: 0;
  color: var(--irsc-danger);
  font-size: var(--irsc-text-sm);
  font-weight: var(--irsc-weight-semibold);
}

/* Text inputs, selects, textareas: class them, or put them inside .irsc-field */
.irsc-input,
.irsc-select,
.irsc-textarea,
.irsc-field :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="hidden"]), select, textarea) {
  display: block;
  width: 100%;
  min-height: var(--irsc-control-height);
  padding: var(--irsc-space-2) var(--irsc-space-3);
  border: 1px solid var(--irsc-border-strong);
  border-radius: var(--irsc-radius-sm);
  background: var(--irsc-surface);
  color: var(--irsc-text);
  font: inherit;
  transition: border-color var(--irsc-duration) var(--irsc-ease);
}

.irsc-textarea,
.irsc-field textarea {
  min-height: 7rem;
  resize: vertical;
}

/* Placeholder: muted text at full opacity so it keeps 4.5:1 (Firefox fades it) */
.irsc-input::placeholder,
.irsc-textarea::placeholder,
.irsc-field :where(input, textarea)::placeholder {
  color: var(--irsc-text-muted);
  opacity: 1;
}

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

.irsc-input:focus-visible,
.irsc-select:focus-visible,
.irsc-textarea:focus-visible,
.irsc-field :where(input, select, textarea):focus-visible {
  border-color: var(--irsc-accent);
}

/* Invalid: red edge, doubled with an inset line so it is not color alone */
.irsc-input[aria-invalid="true"],
.irsc-select[aria-invalid="true"],
.irsc-textarea[aria-invalid="true"],
.irsc-field :where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--irsc-danger);
  box-shadow: inset 0 0 0 1px var(--irsc-danger);
}

.irsc-field--invalid {
  padding-left: var(--irsc-space-4);
  border-left: 4px solid var(--irsc-danger);
}

.irsc-input:disabled,
.irsc-select:disabled,
.irsc-textarea:disabled,
.irsc-field :where(input, select, textarea):disabled {
  border-color: var(--irsc-border);
  background: var(--irsc-surface-sunken);
  color: var(--irsc-text-muted);
  cursor: not-allowed;
}

/* Checkbox and radio rows: native controls tinted with accent-color */
.irsc-check {
  display: flex;
  align-items: flex-start;
  gap: var(--irsc-space-3);
  min-height: var(--irsc-control-height);
  padding-block: var(--irsc-space-2);
  cursor: pointer;
}

.irsc-check input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--irsc-accent);
  cursor: pointer;
}

/* Fieldset: groups radios, checkboxes or related fields under a legend */
.irsc-fieldset {
  min-width: 0;
  margin: 0;
  padding: var(--irsc-space-4);
  border: 1px solid var(--irsc-border);
  border-radius: var(--irsc-radius-md);
}

.irsc-fieldset > legend {
  padding-inline: var(--irsc-space-2);
  color: var(--irsc-heading);
  font-family: var(--irsc-font-display);
  font-size: var(--irsc-text-lg);
  font-weight: var(--irsc-weight-semibold);
}

/* Error summary: top of the form after a failed submit; give it tabindex="-1" and focus it */
.irsc-error-summary {
  padding: var(--irsc-space-4) var(--irsc-space-5);
  border: 2px solid var(--irsc-danger);
  border-left-width: 6px;
  border-radius: var(--irsc-radius-md);
  background: var(--irsc-surface);
  color: var(--irsc-text);
}

.irsc-error-summary > :first-child {
  margin-top: 0;
  color: var(--irsc-danger);
  font-size: var(--irsc-text-lg);
}

.irsc-error-summary ul {
  margin: var(--irsc-space-2) 0 0;
  padding-left: var(--irsc-space-5);
}

.irsc-error-summary a {
  color: var(--irsc-danger);
  font-weight: var(--irsc-weight-semibold);
}

.irsc-error-summary a:hover {
  color: var(--irsc-text);
}

/* ---------- Surfaces ---------- */

/* Card: white panel on the gray page */
.irsc-card {
  padding: var(--irsc-space-5);
  border: 1px solid var(--irsc-border);
  border-radius: var(--irsc-radius-lg);
  background: var(--irsc-surface);
  color: var(--irsc-text);
  box-shadow: var(--irsc-shadow-1);
}

.irsc-card > :last-child {
  margin-bottom: 0;
}

/* Notice: inline message with a left rule and a status mark; --info is the default */
.irsc-notice {
  position: relative;
  padding: var(--irsc-space-4) var(--irsc-space-4) var(--irsc-space-4) calc(var(--irsc-space-4) * 2 + 1.5rem);
  border-left: 4px solid var(--irsc-notice-rule, var(--irsc-accent));
  border-radius: var(--irsc-radius-md);
  background: var(--irsc-notice-bg, var(--irsc-accent-soft));
  color: var(--irsc-text);
}

.irsc-notice::before {
  content: "i";
  content: "i" / "";
  position: absolute;
  top: var(--irsc-space-4);
  left: var(--irsc-space-4);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--irsc-radius-pill);
  background: var(--irsc-notice-mark-bg, var(--irsc-accent));
  color: var(--irsc-notice-mark-text, var(--irsc-on-accent));
  font-family: var(--irsc-font-display);
  font-size: var(--irsc-text-sm);
  font-weight: var(--irsc-weight-semibold);
  line-height: 1;
}

.irsc-notice :where(p, ul, ol) {
  margin: var(--irsc-space-2) 0 0;
}

.irsc-notice > :first-child,
.irsc-notice__title + * {
  margin-top: 0;
}

.irsc-notice > :last-child {
  margin-bottom: 0;
}

/* Notice title: one short line above the message */
.irsc-notice__title {
  display: block;
  margin-bottom: var(--irsc-space-1);
  color: var(--irsc-notice-title, var(--irsc-text));
  font-weight: var(--irsc-weight-semibold);
}

.irsc-notice--success {
  --irsc-notice-bg: var(--irsc-success-soft);
  --irsc-notice-rule: var(--irsc-success);
  --irsc-notice-mark-bg: var(--irsc-success);
  --irsc-notice-mark-text: var(--irsc-surface);
  --irsc-notice-title: var(--irsc-success);
}

.irsc-notice--success::before {
  content: "\2713";
  content: "\2713" / "";
}

/* Warning: pale yellow with a black (white in dark) rule; yellow never as a line on light */
.irsc-notice--warning {
  --irsc-notice-bg: var(--irsc-highlight-soft);
  --irsc-notice-rule: var(--irsc-text);
  --irsc-notice-mark-bg: var(--irsc-highlight);
  --irsc-notice-mark-text: var(--irsc-on-highlight);
}

.irsc-notice--warning::before,
.irsc-notice--danger::before {
  content: "!";
  content: "!" / "";
}

.irsc-notice--danger {
  --irsc-notice-bg: var(--irsc-danger-soft);
  --irsc-notice-rule: var(--irsc-danger);
  --irsc-notice-mark-bg: var(--irsc-danger);
  --irsc-notice-mark-text: var(--irsc-surface);
  --irsc-notice-title: var(--irsc-danger);
}

/* Badge: short status label */
.irsc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--irsc-space-1);
  padding: 0.125rem var(--irsc-space-2);
  border: 1px solid var(--irsc-border);
  border-radius: var(--irsc-radius-pill);
  background: var(--irsc-surface-sunken);
  color: var(--irsc-text);
  font-size: var(--irsc-text-xs);
  font-weight: var(--irsc-weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

/* Accent: River Blue tint; stays distinct from the yellow highlight in dark mode */
.irsc-badge--accent {
  border-color: var(--irsc-link);
  background: var(--irsc-accent-soft);
  color: var(--irsc-link);
}

/* Highlight: Peregrine Yellow with black text, for "New" and "Action needed" */
.irsc-badge--highlight {
  border-color: var(--irsc-highlight);
  background: var(--irsc-highlight);
  color: var(--irsc-on-highlight);
}

.irsc-badge--success {
  border-color: var(--irsc-success-soft);
  background: var(--irsc-success-soft);
  color: var(--irsc-success);
}

.irsc-badge--danger {
  border-color: var(--irsc-danger-soft);
  background: var(--irsc-danger-soft);
  color: var(--irsc-danger);
}

/* ---------- Data ---------- */

/* Table wrap: scrolls wide tables sideways; add tabindex="0" role="region" aria-label */
.irsc-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--irsc-border);
  border-radius: var(--irsc-radius-lg);
  background: var(--irsc-surface);
}

/* Table: sunken header row, divided body rows, accent-soft selection */
.irsc-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--irsc-text);
  font-size: var(--irsc-text-sm);
}

.irsc-table caption {
  padding: var(--irsc-space-3) var(--irsc-space-4);
  color: var(--irsc-text-muted);
  text-align: start;
}

.irsc-table th,
.irsc-table td {
  padding: var(--irsc-space-3) var(--irsc-space-4);
  border-bottom: 1px solid var(--irsc-border);
  text-align: start;
  vertical-align: top;
}

.irsc-table thead th {
  background: var(--irsc-surface-sunken);
  color: var(--irsc-text);
  font-weight: var(--irsc-weight-semibold);
  white-space: nowrap;
}

.irsc-table tbody th {
  background: transparent;
}

.irsc-table tbody tr:last-child > * {
  border-bottom: 0;
}

.irsc-table tbody tr:hover > * {
  background: var(--irsc-bg);
}

/* Selected row: class it, or use aria-selected inside role="grid" */
.irsc-table tbody tr.irsc-is-selected > *,
.irsc-table tbody tr[aria-selected="true"] > * {
  background: var(--irsc-accent-soft);
}

/* Numeric column: right aligned, even digit widths */
.irsc-table .irsc-num {
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* Pagination: page links in a row; mark the current page with aria-current="page" */
.irsc-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--irsc-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.irsc-pagination a,
.irsc-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--irsc-control-height);
  min-height: var(--irsc-control-height);
  padding-inline: var(--irsc-space-3);
  border: 1px solid transparent;
  border-radius: var(--irsc-radius-md);
  color: var(--irsc-link);
  font-weight: var(--irsc-weight-semibold);
  text-decoration: none;
}

.irsc-pagination a:hover {
  border-color: var(--irsc-border-strong);
  background: var(--irsc-accent-soft);
  color: var(--irsc-link);
}

.irsc-pagination a[aria-current="page"] {
  border-color: var(--irsc-accent);
  background: var(--irsc-accent);
  color: var(--irsc-on-accent);
}

.irsc-pagination span,
.irsc-pagination a[aria-disabled="true"] {
  color: var(--irsc-text-muted);
  pointer-events: none;
}

/* ---------- Navigation ---------- */

/* Tabs: role="tablist" row; the selected tab gets an accent bar */
.irsc-tabs__list {
  display: flex;
  gap: var(--irsc-space-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--irsc-border);
  scrollbar-width: thin;
}

.irsc-tabs [role="tab"] {
  position: relative;
  flex: none;
  min-height: var(--irsc-control-height);
  margin: 0;
  padding: var(--irsc-space-2) var(--irsc-space-4);
  border: 0;
  border-radius: var(--irsc-radius-sm) var(--irsc-radius-sm) 0 0;
  background: transparent;
  color: var(--irsc-text-muted);
  font: inherit;
  font-weight: var(--irsc-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.irsc-tabs [role="tab"]:hover {
  background: var(--irsc-surface-sunken);
  color: var(--irsc-text);
}

.irsc-tabs [role="tab"][aria-selected="true"] {
  color: var(--irsc-heading);
  text-decoration: underline 3px var(--irsc-accent);
  text-underline-offset: 0.6em;
}

.irsc-tabs [role="tab"]:focus-visible {
  outline-offset: calc(var(--irsc-focus-width) * -1);
  box-shadow: none;
}

.irsc-tabs [role="tabpanel"] {
  padding-top: var(--irsc-space-5);
}

/* Breadcrumb: ordered list of ancestors; last item has aria-current="page" */
.irsc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--irsc-text-muted);
  font-size: var(--irsc-text-sm);
  list-style: none;
}

.irsc-breadcrumb li + li::before {
  content: "/";
  content: "/" / "";
  margin-inline: var(--irsc-space-2);
  color: var(--irsc-text-muted);
}

.irsc-breadcrumb a {
  color: var(--irsc-link);
}

.irsc-breadcrumb [aria-current="page"] {
  color: var(--irsc-text);
  font-weight: var(--irsc-weight-semibold);
}

/* ---------- Overlays ---------- */

/* Dialog: native <dialog> opened with showModal(); header, body and footer parts */
.irsc-dialog {
  width: min(32rem, calc(100vw - var(--irsc-space-4) * 2));
  max-height: calc(100dvh - var(--irsc-space-6) * 2);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--irsc-border);
  border-radius: var(--irsc-radius-lg);
  background: var(--irsc-surface);
  color: var(--irsc-text);
  box-shadow: var(--irsc-shadow-2);
}

/* Header color at 60%: navy in light, black in dark, so a navy dark-theme
   dialog still stands out. Older browsers don't pass custom properties to
   ::backdrop, hence the fallback. */
.irsc-dialog::backdrop {
  background: color-mix(in srgb, var(--irsc-header-bg, #062551) 60%, transparent);
}

.irsc-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--irsc-space-3);
  padding: var(--irsc-space-5) var(--irsc-space-5) 0;
}

.irsc-dialog__header > :first-child {
  margin: 0;
  font-size: var(--irsc-text-xl);
}

.irsc-dialog__body {
  padding: var(--irsc-space-3) var(--irsc-space-5) var(--irsc-space-5);
}

.irsc-dialog__body > :first-child {
  margin-top: 0;
}

.irsc-dialog__body > :last-child {
  margin-bottom: 0;
}

.irsc-dialog__footer {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: var(--irsc-space-3);
  padding: var(--irsc-space-4) var(--irsc-space-5);
  border-top: 1px solid var(--irsc-border);
  background: var(--irsc-surface-sunken);
}

/* Toast region: fixed stack at the bottom; put role="status" on it */
.irsc-toast-region {
  position: fixed;
  right: var(--irsc-space-4);
  bottom: var(--irsc-space-4);
  left: var(--irsc-space-4);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--irsc-space-2);
  pointer-events: none;
}

@media (min-width: 48rem) {
  .irsc-toast-region {
    left: auto;
    align-items: flex-end;
  }
}

/* Toast: brief confirmation on the header's navy with a yellow edge */
.irsc-toast {
  display: flex;
  align-items: center;
  gap: var(--irsc-space-3);
  width: 100%;
  max-width: 24rem;
  padding: var(--irsc-space-3) var(--irsc-space-4);
  border-left: 4px solid var(--irsc-header-accent);
  border-radius: var(--irsc-radius-md);
  background: var(--irsc-header-bg);
  color: var(--irsc-header-text);
  box-shadow: var(--irsc-shadow-2);
  pointer-events: auto;
  animation: irsc-toast-in 200ms var(--irsc-ease);
}

@keyframes irsc-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

/* Empty state: centered message and next step when a list has nothing in it */
.irsc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--irsc-space-3);
  padding: var(--irsc-space-7) var(--irsc-space-5);
  border: 1px dashed var(--irsc-border-strong);
  border-radius: var(--irsc-radius-lg);
  background: var(--irsc-surface);
  color: var(--irsc-text-muted);
  text-align: center;
}

.irsc-empty__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--irsc-radius-pill);
  background: var(--irsc-accent-soft);
  color: var(--irsc-link);
}

.irsc-empty :where(h2, h3, h4) {
  margin: 0;
  color: var(--irsc-heading);
}

.irsc-empty p {
  max-width: 40ch;
  margin: 0;
}

/* ---------- Footer ---------- */

/* Footer: quiet closing band with college name and app links */
.irsc-footer {
  margin-top: var(--irsc-space-8);
  padding-block: var(--irsc-space-6);
  border-top: 1px solid var(--irsc-border);
  background: var(--irsc-surface);
  color: var(--irsc-text-muted);
  font-size: var(--irsc-text-sm);
}

.irsc-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--irsc-space-3) var(--irsc-space-5);
}

.irsc-footer a {
  color: var(--irsc-link);
}

/* ---------- Forced colors ---------- */

/* Keep component edges and markers visible when the system replaces colors */
@media (forced-colors: active) {
  .irsc-btn,
  .irsc-badge,
  .irsc-card,
  .irsc-notice,
  .irsc-toast,
  .irsc-empty,
  .irsc-table-wrap {
    border: 1px solid CanvasText;
  }

  .irsc-notice::before {
    forced-color-adjust: none;
    background: CanvasText;
    color: Canvas;
  }

  .irsc-pagination a[aria-current="page"] {
    border: 2px solid Highlight;
  }

  /* The accent fill is dropped, so the selected theme gets the system
     highlight plus an underline */
  .irsc-theme-switch [aria-pressed="true"],
  .irsc-theme-switch [aria-pressed="true"]:hover {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    text-decoration: underline 2px;
    text-underline-offset: 0.3em;
  }

  .irsc-btn:disabled,
  .irsc-btn[aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }

  /* The selected-row tint is dropped, so mark the row with a system-color edge */
  .irsc-table tbody tr.irsc-is-selected > *,
  .irsc-table tbody tr[aria-selected="true"] > * {
    border-block: 2px solid Highlight;
  }
}
/* irsc-brand:end */

/* ==========================================================================
   RiverGuide. The IRSC brand bundle above (tokens, base, components) comes from
   irsc-brand/scripts/sync.py; everything below uses its tokens.
   Two modes on <body data-mode>: "welcome" (hero, river card, why) and "chat".
   ========================================================================== */

:root {
  --rg-column: 46rem;
  --rg-radius-card: 40px;
  --rg-radius-canvas: 48px;
  --rg-shadow-soft: 0 1px 0 rgb(6 37 81 / 0.04), 0 18px 40px -18px rgb(6 37 81 / 0.35);
  --rg-shadow-deep: 0 40px 80px -32px rgb(6 37 81 / 0.45);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--irsc-surface);
  color: var(--irsc-text);
  -webkit-font-smoothing: antialiased;
}

/* Elements here set display, which would otherwise override the hidden attribute. */
[hidden] {
  display: none !important;
}

.rg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

svg:not(.rg-river) {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- canvas and bar ---------- */

.rg-canvas {
  margin: 12px;
  padding: 0 clamp(16px, 4vw, 48px) 48px;
  border-radius: var(--rg-radius-canvas);
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--irsc-accent) 14%, transparent), transparent 60%),
    var(--irsc-bg);
  min-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
}

.rg-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--irsc-space-4);
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-block: 24px;
}

.rg-wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--irsc-heading);
  text-decoration: none;
  line-height: 1.05;
}
.rg-wordmark__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rg-wordmark__name {
  font-family: var(--irsc-font-display);
  font-size: 1.625rem;
  font-weight: var(--irsc-weight-semibold);
  letter-spacing: -0.02em;
}
.rg-wordmark__eyebrow {
  color: var(--irsc-text-muted);
  font-size: var(--irsc-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rg-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--irsc-control-height);
  padding: 0 20px;
  border: 0;
  border-radius: var(--irsc-radius-pill);
  background: var(--irsc-heading);
  color: var(--irsc-surface);
  font: inherit;
  font-weight: var(--irsc-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--irsc-duration) var(--irsc-ease);
}
.rg-pill:hover {
  transform: translateY(-1px);
}
.rg-pill svg {
  width: 18px;
  height: 18px;
}

/* ---------- welcome: hero ---------- */

.rg-hero {
  text-align: center;
  padding-top: clamp(16px, 7vh, 88px);
}
.rg-hello {
  margin: 0;
  color: var(--irsc-heading);
  font-family: var(--irsc-font-display);
  font-size: clamp(3.25rem, 10vw, 7rem);
  font-weight: var(--irsc-weight-semibold);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.rg-lede {
  max-width: 34rem;
  margin: 22px auto 0;
  color: var(--irsc-text-muted);
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  line-height: 1.45;
}

/* ---------- the dock: river card in welcome, pinned prompt in chat ---------- */

.rg-dock {
  position: relative;
  width: min(100%, 760px);
  margin: clamp(28px, 6vh, 56px) auto 0;
  border-radius: var(--rg-radius-card);
  overflow: hidden;
  box-shadow: var(--rg-shadow-deep);
}
.rg-stage {
  height: clamp(340px, 50vh, 480px);
}
.rg-river {
  display: block;
  width: 100%;
  height: 100%;
}
.rg-sky-top {
  stop-color: color-mix(in srgb, var(--irsc-blue) 18%, var(--irsc-white));
}
.rg-sky-bottom {
  stop-color: color-mix(in srgb, var(--irsc-blue) 42%, var(--irsc-white));
}
.rg-water-a {
  stop-color: var(--irsc-blue);
}
.rg-water-b {
  stop-color: var(--irsc-navy);
}
.rg-sun {
  fill: var(--irsc-yellow);
}
.rg-wave {
  stroke: none;
}
.rg-wave--1 {
  fill: color-mix(in srgb, var(--irsc-blue) 60%, var(--irsc-white));
}
.rg-wave--3 {
  fill: var(--irsc-navy);
}
@media (prefers-reduced-motion: no-preference) {
  .rg-wave--1 {
    animation: rg-drift 14s ease-in-out infinite alternate;
  }
  .rg-wave--3 {
    animation: rg-drift 11s ease-in-out infinite alternate-reverse;
  }
}
@keyframes rg-drift {
  to {
    transform: translateX(-28px);
  }
}

.rg-compose {
  position: absolute;
  inset: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body[data-mode="welcome"] .rg-starters {
  margin-top: auto; /* the example chips sit low on the card, over the water */
}

.rg-prompt {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 10px 26px;
  border-radius: 34px;
  background: var(--irsc-surface);
  box-shadow: var(--rg-shadow-soft);
  transition: box-shadow var(--irsc-duration) var(--irsc-ease);
}
.rg-prompt:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--irsc-accent) 35%, transparent), var(--rg-shadow-soft);
}
.rg-prompt textarea {
  flex: 1;
  min-height: 28px;
  max-height: 200px;
  margin: 0;
  padding: 11px 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--irsc-text);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.5;
}
.rg-prompt textarea::placeholder {
  color: var(--irsc-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.3s;
}
.rg-prompt textarea.rg-fading::placeholder {
  opacity: 0;
}

.rg-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: var(--irsc-heading);
  color: var(--irsc-surface);
  cursor: pointer;
  transition: transform var(--irsc-duration) var(--irsc-ease), opacity var(--irsc-duration);
}
.rg-send:hover:not(:disabled) {
  transform: scale(1.05);
}
.rg-send:disabled {
  opacity: 0.3;
  cursor: default;
}
.rg-send svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}
.rg-send__wait {
  display: none;
}
body[data-busy] .rg-send {
  opacity: 1;
}
body[data-busy] .rg-send__arrow {
  display: none;
}
body[data-busy] .rg-send__wait {
  display: block;
  stroke-dasharray: 34 60;
  animation: rg-spin 0.9s linear infinite;
}
@keyframes rg-spin {
  to {
    transform: rotate(360deg);
  }
}

.rg-starters,
.rg-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rg-chip {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--irsc-heading) 14%, transparent);
  border-radius: var(--irsc-radius-pill);
  background: color-mix(in srgb, var(--irsc-surface) 86%, transparent);
  backdrop-filter: blur(10px);
  color: var(--irsc-heading);
  font: inherit;
  font-size: var(--irsc-text-sm);
  text-align: start;
  cursor: pointer;
  transition: background var(--irsc-duration), transform var(--irsc-duration) var(--irsc-ease);
}
.rg-chip:hover:not(:disabled) {
  background: var(--irsc-surface);
  transform: translateY(-1px);
}
.rg-chip:disabled {
  opacity: 0.55;
  cursor: default;
}

.rg-chars,
.rg-fine {
  margin: 0;
  color: var(--irsc-text-muted);
  font-size: var(--irsc-text-xs);
  text-align: center;
}
.rg-fine {
  display: none;
}

.rg-notice {
  margin: 0;
  padding: 16px 20px;
  border-radius: 24px;
  background: var(--irsc-surface);
  box-shadow: var(--rg-shadow-soft);
}
.rg-notice p {
  margin: 0;
}
.rg-notice p + p {
  margin-top: 6px;
}
.rg-notice__title {
  color: var(--irsc-heading);
  font-weight: var(--irsc-weight-semibold);
}
.rg-notice--quiet {
  font-size: var(--irsc-text-sm);
}
.rg-highlighted {
  color: var(--irsc-text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rg-highlighted mark {
  padding-inline: 2px;
  border-radius: 3px;
  background: var(--irsc-highlight);
  color: var(--irsc-on-highlight);
}

/* ---------- chat mode ---------- */

body[data-mode="chat"] .rg-canvas {
  margin: 0;
  padding-bottom: 190px;
  border-radius: 0;
  background: var(--irsc-surface);
  min-height: 100dvh;
}
body[data-mode="chat"] .rg-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding-block: 14px;
  background: color-mix(in srgb, var(--irsc-surface) 88%, transparent);
  backdrop-filter: blur(12px);
}
body[data-mode="chat"] .rg-hero,
body[data-mode="chat"] .rg-stage,
body[data-mode="chat"] .rg-starters,
body[data-mode="chat"] .rg-why,
body[data-mode="chat"] .rg-footer {
  display: none;
}
body[data-mode="chat"] .rg-dock {
  position: fixed;
  inset: auto 0 0;
  z-index: 10;
  width: auto;
  margin: 0;
  padding: 24px clamp(12px, 4vw, 24px) max(14px, env(safe-area-inset-bottom));
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: linear-gradient(to top, var(--irsc-surface) 72%, transparent);
}
body[data-mode="chat"] .rg-compose {
  position: static;
  max-width: var(--rg-column);
  margin-inline: auto;
  gap: 8px;
}
body[data-mode="chat"] .rg-prompt {
  outline: 1.5px solid color-mix(in srgb, var(--irsc-heading) 22%, transparent);
}
body[data-mode="chat"] .rg-fine {
  display: block;
}

.rg-thread {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: var(--rg-column);
  margin: 12px auto 0;
  padding: 0;
  list-style: none;
}
body[data-mode="welcome"] .rg-thread {
  display: none;
}

.rg-user {
  align-self: flex-end;
  max-width: 80%;
  padding: 12px 20px;
  border-radius: 26px;
  background: var(--irsc-surface-sunken);
  animation: rg-in 0.25s var(--irsc-ease);
}
.rg-user p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rg-answer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 1.0625rem;
  line-height: 1.65;
  animation: rg-in 0.3s var(--irsc-ease);
}
@keyframes rg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rg-user,
  .rg-answer {
    animation: none;
  }
}

.rg-markdown {
  overflow-wrap: anywhere;
}
.rg-markdown > :first-child {
  margin-top: 0;
}
.rg-markdown > :last-child {
  margin-bottom: 0;
}
.rg-markdown p,
.rg-markdown ul,
.rg-markdown ol {
  margin: 0 0 14px;
}
.rg-markdown li + li {
  margin-top: 4px;
}
.rg-markdown strong {
  color: var(--irsc-heading);
}
.rg-markdown a {
  color: var(--irsc-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rg-markdown table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--irsc-text-sm);
}
.rg-markdown th,
.rg-markdown td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--irsc-border);
  text-align: start;
}

.rg-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--irsc-text-muted);
  font-size: var(--irsc-text-sm);
}
.rg-status__label {
  background: linear-gradient(90deg, var(--irsc-text-muted) 30%, var(--irsc-accent) 50%, var(--irsc-text-muted) 70%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rg-shimmer 2.2s linear infinite;
}
@keyframes rg-shimmer {
  to {
    background-position: -300% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rg-status__label {
    animation: none;
    color: var(--irsc-text-muted);
  }
}
.rg-status__queries {
  display: contents;
}
.rg-query {
  padding: 3px 10px;
  border-radius: var(--irsc-radius-pill);
  background: var(--irsc-surface-sunken);
  color: var(--irsc-text);
  font-size: var(--irsc-text-xs);
}

.rg-after {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rg-after:empty {
  display: none;
}

.rg-sources {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 2px 2px 6px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}
.rg-sources a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 15rem;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--irsc-border);
  border-radius: 18px;
  background: var(--irsc-surface);
  color: var(--irsc-text);
  text-decoration: none;
  transition: border-color var(--irsc-duration), transform var(--irsc-duration) var(--irsc-ease);
}
.rg-sources a:hover {
  border-color: var(--irsc-accent);
  transform: translateY(-1px);
}
.rg-source-host {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--irsc-text-muted);
  font-size: var(--irsc-text-xs);
}
.rg-source-host::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--irsc-accent);
}
.rg-source-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--irsc-heading);
  font-size: var(--irsc-text-sm);
  font-weight: var(--irsc-weight-semibold);
  line-height: 1.35;
}

.rg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--irsc-text-muted);
  font-size: var(--irsc-text-xs);
}
.rg-icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--irsc-text-muted);
  cursor: pointer;
}
.rg-icon-button:hover {
  background: var(--irsc-surface-sunken);
  color: var(--irsc-heading);
}
.rg-icon-button svg {
  width: 18px;
  height: 18px;
}
.rg-meta__tools {
  margin-inline-start: auto;
}

.rg-next-label {
  margin: 4px 0 0;
  color: var(--irsc-text-muted);
  font-size: var(--irsc-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rg-followups .rg-chip {
  background: var(--irsc-surface);
}

.rg-crisis {
  padding: 18px 20px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--irsc-accent) 9%, var(--irsc-surface));
  box-shadow: inset 4px 0 0 var(--irsc-accent);
}
.rg-crisis p {
  margin: 0;
}
.rg-crisis p + p {
  margin-top: 6px;
}
.rg-crisis__title {
  color: var(--irsc-heading);
  font-weight: var(--irsc-weight-semibold);
}

.rg-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: var(--rg-column);
  margin: 24px auto 0;
  padding: 14px 18px;
  border-radius: 20px;
  border: 1px solid var(--irsc-border);
}
.rg-error p {
  margin: 0;
}
.rg-error svg {
  width: 20px;
  height: 20px;
}
.rg-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--irsc-link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- why ---------- */

.rg-why {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 10vw, 120px);
  max-width: 1040px;
  margin: clamp(80px, 14vw, 160px) auto;
  padding: 0 24px;
}
.rg-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 6vw, 80px);
}
.rg-feature:nth-child(even) .rg-tile {
  order: 2;
}
.rg-feature h2 {
  margin: 0 0 14px;
  color: var(--irsc-heading);
  font-family: var(--irsc-font-display);
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.rg-feature p {
  max-width: 26rem;
  margin: 0;
  color: var(--irsc-text-muted);
  font-size: 1.0625rem;
}
@media (max-width: 720px) {
  .rg-feature {
    grid-template-columns: 1fr;
  }
  .rg-feature:nth-child(even) .rg-tile {
    order: 0;
  }
}

.rg-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rg-radius-card);
}
.rg-tile--pages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 26px;
  background: var(--irsc-navy);
  transform-style: preserve-3d;
}
.rg-tile--pages span {
  border-radius: 12px;
  background:
    linear-gradient(var(--irsc-blue), var(--irsc-blue)) 14px 16px / 45% 8px no-repeat,
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--irsc-navy) 16%, transparent) 0 5px,
      transparent 5px 13px
    ) 14px 36px / calc(100% - 28px) calc(100% - 52px) no-repeat,
    var(--irsc-white);
  transform: rotate(-4deg) translateY(var(--y, 0));
  box-shadow: 0 12px 24px -10px rgb(0 0 0 / 0.5);
}
.rg-tile--pages span:nth-child(2n) {
  --y: 14px;
}
.rg-tile--pages span:nth-child(3n) {
  --y: -8px;
  background-color: var(--irsc-yellow);
}
.rg-tile--lock {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--irsc-blue) 70%, transparent), transparent 60%),
    var(--irsc-navy);
}
.rg-tile--lock svg {
  width: 96px;
  height: 96px;
  padding: 22px;
  border-radius: 50%;
  background: var(--irsc-white);
  color: var(--irsc-navy);
  stroke-width: 3;
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--irsc-white) 12%, transparent),
    0 0 0 40px color-mix(in srgb, var(--irsc-white) 6%, transparent);
}
.rg-tile--sources {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 0 12%;
  background: var(--irsc-surface-sunken);
}
.rg-tile--sources span {
  padding: 12px 20px;
  border-radius: var(--irsc-radius-pill);
  background: var(--irsc-surface);
  color: var(--irsc-heading);
  font-weight: var(--irsc-weight-semibold);
  box-shadow: var(--rg-shadow-soft);
}
.rg-tile--sources span:nth-child(1) {
  background: var(--irsc-heading);
  color: var(--irsc-surface);
}
.rg-tile--sources span:nth-child(2) {
  margin-left: 18%;
}
.rg-tile--sources span:nth-child(3) {
  margin-left: 6%;
}
.rg-tile--sources span:nth-child(4) {
  margin-left: 26%;
}

/* ---------- footer ---------- */

.rg-footer {
  padding: 0 clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
}
.rg-giant {
  margin: 0;
  color: var(--irsc-heading);
  font-family: var(--irsc-font-display);
  font-size: clamp(4rem, 18vw, 16rem);
  font-weight: var(--irsc-weight-semibold);
  line-height: 0.85;
  letter-spacing: -0.055em;
  text-align: center;
}
.rg-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: 1200px;
  margin: 36px auto 0;
  color: var(--irsc-text-muted);
  font-size: var(--irsc-text-sm);
}
.rg-footer__row p {
  max-width: 44rem;
  margin: 0;
}

/* ---------- small screens ---------- */

@media (max-width: 560px) {
  .rg-canvas {
    margin: 0;
    border-radius: 0 0 32px 32px;
    padding-inline: 16px;
  }
  .rg-dock {
    width: calc(100% + 32px);
    margin-inline: -16px;
    border-radius: 32px;
  }
  .rg-stage {
    height: 430px;
  }
  .rg-compose {
    inset: 12px;
  }
  .rg-prompt textarea {
    font-size: 1rem;
  }
  .rg-prompt {
    padding-left: 20px;
  }
  .rg-starters .rg-chip {
    font-size: var(--irsc-text-xs);
  }
  .rg-user {
    max-width: 88%;
  }
}

.rg-river {
  stroke: none;
}