/* IBM Carbon Design System skin. Loaded last, on every page.

   The portal's structure lives in app.css, staff.css, m3-components.css, polish.css
   and polish-staff.css. This file turns all of it into Carbon (carbondesignsystem.com):
   the Carbon colour tokens (carbon-tokens.css, --cds-*), square corners, flat tiles
   without shadows or gradients, the dark UI shell header, the left side navigation
   with a 3px active marker, 48px rectangular buttons, filled text fields with a bottom
   border, data tables with a grey header row, tags, inline notifications, and the
   Carbon type scale in IBM Plex Sans (when the device has it) with Carbon's own
   fallbacks. Motion is the short "productive" kind, and none for reduced motion.

   Rules that keep it safe: colours only through variables (the --cds-* tokens or the
   roles), no inline styles, no third-party fonts or scripts. */

:root {
  /* Square everything; avatars and tags keep the full radius. */
  --md-sys-shape-corner-extra-small: 0;
  --md-sys-shape-corner-small: 0;
  --md-sys-shape-corner-medium: 0;
  --md-sys-shape-corner-large: 0;
  --md-sys-shape-corner-extra-large: 0;
  --radius: 0;

  /* Carbon is flat: no resting shadows. */
  --md-sys-elevation-1: none;
  --md-sys-elevation-2: none;
  --md-sys-elevation-3: none;
  --polish-soft: none;
  --polish-lift: 0 2px 6px color-mix(in srgb, var(--cds-overlay) 30%, transparent);
  --polish-glow: transparent;
  --polish-warm: transparent;

  /* Type: IBM Plex Sans first (used when the device has it), then Carbon's fallbacks. */
  --cds-font: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  --cds-mono: "IBM Plex Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --md-ref-typeface-plain: var(--cds-font);

  /* Carbon productive motion. */
  --cds-ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --md-sys-motion-easing-standard: var(--cds-ease);
  --md-sys-motion-duration-short2: 70ms;
  --md-sys-motion-duration-short4: 110ms;
  --md-sys-motion-duration-medium2: 150ms;

  /* The UI shell header is 48px. */
  --header-h: 3rem;
  --header-height: 3rem;
}

/* --- Base ----------------------------------------------------------------------------------- */
html {
  font-size: 16px;
}

body {
  background: var(--cds-background);
  color: var(--cds-text-primary);
  font-family: var(--cds-font);
  font-size: 1rem;
  line-height: calc(1.5rem * var(--md-lang-height));
  letter-spacing: 0.01rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.staff-shell {
  font-size: 0.875rem;
  line-height: calc(1.25rem * var(--md-lang-height));
  letter-spacing: 0.01rem;
}

a {
  color: var(--cds-link-primary);
}

a:hover {
  color: var(--cds-link-hover);
}

code,
kbd,
samp {
  font-family: var(--cds-mono);
  font-size: 0.875em;
}

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

::selection {
  background: var(--cds-highlight);
}

h1,
h2,
h3,
h4 {
  color: var(--cds-text-primary);
  text-wrap: balance;
}

h1 {
  font-size: 2rem;
  font-weight: 400;
  line-height: calc(2.5rem * var(--md-lang-height));
  letter-spacing: 0;
}

h2 {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: calc(1.75rem * var(--md-lang-height));
  letter-spacing: 0;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: calc(1.375rem * var(--md-lang-height));
}

.page-lede,
.muted,
.field-help,
.progress-text {
  color: var(--cds-text-secondary);
}

.muted a {
  color: var(--cds-link-primary);
}

/* No gradient underline on titles, no entrance motion, no hover lift. */
.page-header h1::after,
.app-content > h1::after {
  display: none;
}

.page-header h1,
.app-content > h1 {
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}

main > *,
.app-content > * {
  animation: none !important;
}

.action-card:hover,
.card-awaiting:hover,
.import-card a:hover {
  transform: none;
  box-shadow: none;
}

/* --- UI shell header ---------------------------------------------------------------------------- */
body .site-header,
.staff-shell .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 3rem;
  padding: 0 1rem;
  gap: 0 1rem;
  background: var(--cds-shell-bg);
  color: var(--cds-shell-text);
  border-bottom: 1px solid var(--cds-shell-border);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .site-header::after {
  display: none;
}

body .site-header .brand,
body .site-header .brand-text {
  color: var(--cds-shell-text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01rem;
}

body .site-header .brand {
  gap: 0.75rem;
  min-height: 3rem;
}

body .site-header .brand-mark,
body .site-header .brand-mark {
  width: 32px;
  height: 32px;
  padding: 2px;
  border-radius: 0;
  background: #fff;
}

body .site-header a,
body .site-header .link-button,
body .site-header .muted,
body .site-header .user-email {
  color: var(--cds-shell-text);
}

body .site-header .link-button,
body .site-header .menu-toggle {
  min-height: 3rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cds-shell-text);
  font: inherit;
  font-size: 0.875rem;
}

body .site-header .link-button:hover,
body .site-header .menu-toggle:hover,
body .site-header .user-chip:hover {
  background: var(--cds-shell-hover);
  color: var(--cds-shell-text);
}

body .site-header .menu-toggle {
  padding: 0 0.75rem;
  margin-left: -1rem;
}

body .site-header .user-chip {
  min-height: 3rem;
  padding: 0 0.75rem;
  border-radius: 0;
  color: var(--cds-shell-text);
  text-decoration: none;
}

body .site-header .user-chip-name .muted {
  color: var(--cds-shell-text);
  opacity: 0.75;
}

body .site-header .avatar {
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--cds-button-primary);
  color: var(--cds-text-on-color);
}

.header-search input,
body .site-header .header-search input {
  min-height: 2rem;
  padding: 0 1rem 0 2.5rem;
  border: 0;
  border-bottom: 1px solid var(--cds-shell-border);
  border-radius: 0;
  background: var(--cds-shell-hover);
  color: var(--cds-shell-text);
}

.header-search input::placeholder {
  color: var(--cds-shell-text);
  opacity: 0.7;
}

.header-search .icon {
  color: var(--cds-shell-text);
}

body .site-header .header-search input:focus {
  outline: 2px solid var(--cds-shell-text);
  outline-offset: -2px;
  background: var(--cds-shell-hover);
}

body .site-header :focus-visible {
  outline: 2px solid var(--cds-shell-text);
  outline-offset: -2px;
}

/* --- Side navigation -------------------------------------------------------------------------------- */
.sidebar {
  background: var(--cds-background);
  border-right: 1px solid var(--cds-border-subtle);
}

.sidebar .nav-group + .nav-group {
  border-top: 1px solid var(--cds-border-subtle);
}

.nav-group-title {
  color: var(--cds-text-helper);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
}

.nav-item {
  min-height: 2.5rem;
  border-radius: 0;
  color: var(--cds-text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01rem;
}

.nav-item .icon {
  color: var(--cds-text-secondary);
}

@media (hover: hover) {
  .nav-item:hover {
    background-color: var(--cds-layer-hover);
    color: var(--cds-text-primary);
  }
}

.nav-item.active {
  background-color: var(--cds-layer-accent);
  color: var(--cds-text-primary);
  font-weight: 600;
}

.nav-item.active::before {
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0;
  background: var(--cds-interactive);
}

.nav-item.active .icon {
  color: var(--cds-text-primary);
}

.sidebar-search input {
  border-radius: 0;
}

/* --- Buttons --------------------------------------------------------------------------------------- */
.button,
button.button,
a.button {
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--cds-button-primary);
  color: var(--cds-text-on-color);
  font-family: var(--cds-font);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01rem;
  line-height: 1.125rem;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 110ms var(--cds-ease), box-shadow 110ms var(--cds-ease);
}

.button:hover,
a.button:hover {
  background: var(--cds-button-primary-hover);
  color: var(--cds-text-on-color);
}

.button:active,
a.button:active {
  background: var(--cds-button-primary-active);
  transform: none;
}

.button:focus-visible,
a.button:focus-visible {
  outline: none;
  border-color: var(--cds-focus);
  box-shadow: inset 0 0 0 1px var(--cds-focus), inset 0 0 0 2px var(--cds-focus-inset);
}

.button.button-small,
.button-small {
  min-height: 2rem;
  padding: 0 1rem;
}

/* Carbon "tertiary": an outlined button. */
.button.button-secondary,
a.button.button-secondary {
  border-color: var(--cds-interactive);
  background: transparent;
  color: var(--cds-link-primary);
}

.button.button-secondary:hover,
a.button.button-secondary:hover {
  background: var(--cds-button-primary-hover);
  border-color: var(--cds-button-primary-hover);
  color: var(--cds-text-on-color);
}

/* Danger. */
.button.button-danger,
.dialog .button.button-danger {
  background: var(--cds-button-danger);
  color: var(--cds-text-on-color);
}

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

.button.button-google {
  border-color: var(--cds-border-strong);
  background: var(--cds-background);
  color: var(--cds-text-primary);
}

.button.button-google:hover {
  background: var(--cds-layer-hover);
  color: var(--cds-text-primary);
}

.button[disabled],
.button:disabled {
  border-color: transparent;
  background: var(--cds-layer-accent);
  color: var(--cds-text-disabled);
  cursor: not-allowed;
}

.button.button-primary {
  min-height: 3rem;
  font-size: 0.875rem;
  padding: 0 1.5rem;
}

.action-link {
  font-weight: 400;
}

/* Small actions inside tables and cards: Carbon ghost/tertiary small buttons. */
.actions-cell .inline-form button,
.bulk-actions button,
.row-actions button {
  min-height: 2rem;
  border: 1px solid var(--cds-interactive);
  border-radius: 0;
  background: transparent;
  color: var(--cds-link-primary);
  font-family: var(--cds-font);
  font-size: 0.875rem;
  font-weight: 400;
}

.actions-cell .inline-form button:hover,
.bulk-actions button:hover {
  background: var(--cds-button-primary-hover);
  border-color: var(--cds-button-primary-hover);
  color: var(--cds-text-on-color);
}

.actions-cell .inline-form button[data-confirm],
.bulk-actions button[data-confirm] {
  border-color: var(--cds-button-danger);
  color: var(--cds-text-error);
}

.actions-cell .inline-form button[data-confirm]:hover,
.bulk-actions button[data-confirm]:hover {
  background: var(--cds-button-danger);
  border-color: var(--cds-button-danger);
  color: var(--cds-text-on-color);
}

.action-danger,
.action-link.action-danger {
  color: var(--cds-text-error);
}

/* --- Text fields ------------------------------------------------------------------------------------- */
.form-field label,
.filters .form-field label,
.dropzone label {
  color: var(--cds-text-secondary);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  text-transform: none;
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea,
.filters input,
.filters select,
.table-filter input,
.audit-filters input,
.audit-filters select,
.actions-cell input[type="date"],
.bulk-actions input[type="date"] {
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong);
  border-radius: 0;
  background: var(--cds-field-01);
  color: var(--cds-text-primary);
  font-family: var(--cds-font);
  font-size: 0.875rem;
}

.form-field textarea {
  padding: 0.6875rem 1rem;
}

.form-field input:hover,
.form-field select:hover,
.filters input:hover,
.filters select:hover {
  background: var(--cds-field-hover);
}

.form-card .form-field input:focus,
.form-card .form-field select:focus,
.form-card .form-field textarea:focus,
.filters input:focus,
.filters select:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-bottom-color: transparent;
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

.form-field input[aria-invalid="true"],
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  outline: 2px solid var(--cds-support-error);
  outline-offset: -2px;
}

.field-error,
.required {
  color: var(--cds-text-error);
}

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

/* --- Tiles ---------------------------------------------------------------------------------------------- */
.panel,
.card,
.form-card,
.filters,
.kpi-card,
.stat-tile,
.action-card,
.feature-card,
.summary-tile,
.health-item,
.program-card,
.step-cards li,
.import-card a,
.import-columns,
.benchmark-card,
.instructor-card,
.comment-list li,
.analytics-chart,
.result-group,
.table-scroll,
.empty-state,
.dropzone,
.steps li,
.submit-bar,
.coverage-list li,
.report-seal {
  border: 0;
  border-radius: 0;
  background: var(--cds-layer-01);
  box-shadow: none;
}

.panel {
  padding: 1rem 1.5rem 1.5rem;
}

.panel > h2:first-child,
.panel-header h2,
.section-title {
  font-weight: 400;
}

.panel h3 {
  padding-left: 0;
  border-left: 0;
  font-size: 1rem;
  font-weight: 600;
}

.panel-header {
  border-bottom: 0;
}

/* Things nested in a tile sit on the second layer. */
.panel .detail-grid > div,
.panel .table-scroll,
.panel .kpi-card,
.panel .coverage-list li,
.panel .analytics-chart,
.filters .form-field input,
.filters .form-field select,
.form-card .form-field input,
.form-card .form-field select,
.form-card .form-field textarea,
.panel .form-field input,
.panel .form-field select {
  background: var(--cds-layer-02);
}

.panel .table-scroll {
  background: transparent;
}

.detail-grid > div {
  border: 0;
  border-radius: 0;
}

.detail-grid dt {
  color: var(--cds-text-secondary);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  text-transform: none;
}

.action-card {
  border: 0;
}

@media (hover: hover) {
  .action-card:hover,
  .import-card a:hover {
    background: var(--cds-layer-hover);
  }
}

.action-card .icon,
.feature-icon,
.section-icon {
  border-radius: 0;
  background: transparent;
  color: var(--cds-interactive);
}

.action-card .icon {
  padding: 0;
  width: 24px;
  height: 24px;
}

.filters {
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Carbon page headers and heroes: a flat tile, no gradient. */
.hero,
.page-header.page-hero,
.report-hero,
.student-hero,
.profile-hero,
.thanks-hero,
.landing-hero2 {
  border: 0;
  border-radius: 0;
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
  box-shadow: none;
}

.hero h1,
.page-hero h1,
.report-hero h1,
.student-hero h1,
.profile-hero h1,
.thanks-hero h1,
.landing-hero2 h1,
.hero .page-lede,
.page-hero .page-lede,
.page-hero p,
.profile-hero p,
.profile-hero .page-lede,
.student-hero p,
.thanks-lede,
.landing-sub,
.landing-note {
  color: var(--cds-text-primary);
}

.hero,
.page-header.page-hero,
.report-hero,
.profile-hero {
  border-left: 4px solid var(--cds-interactive);
}

.page-hero-icon,
.profile-avatar,
.profile-avatar-square {
  border-radius: 0;
  background: var(--cds-button-primary);
  color: var(--cds-text-on-color);
  box-shadow: none;
}

.profile-avatar:not(.profile-avatar-square) {
  border-radius: var(--md-sys-shape-corner-full);
}

.avatar-sm,
.course-avatar {
  background: var(--cds-layer-accent);
  color: var(--cds-text-primary);
}

.avatar-square,
.course-avatar {
  border-radius: 0;
}

.avatar-sm.avatar-square {
  background: var(--cds-layer-accent);
  color: var(--cds-text-primary);
}

.hero .chip,
.profile-chips .chip,
.profile-chips .badge {
  background: var(--cds-layer-accent);
  border: 0;
  color: var(--cds-text-primary);
}

/* --- Tables ------------------------------------------------------------------------------------------------ */
.table-scroll {
  background: transparent;
}

.table-scroll table {
  border-collapse: collapse;
}

.table-scroll thead th,
.table-scroll thead {
  background: var(--cds-layer-accent);
  color: var(--cds-text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01rem;
  text-transform: none;
}

.table-scroll th,
.table-scroll td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cds-background);
  background: var(--cds-layer-01);
}

.table-scroll thead th {
  background: var(--cds-layer-accent);
}

.table-scroll tbody tr {
  background: var(--cds-layer-01);
}

@media (hover: hover) {
  .table-scroll tbody tr:hover td,
  .table-scroll tbody tr:hover th {
    background: var(--cds-layer-hover);
  }
}

.panel .table-scroll th,
.panel .table-scroll td {
  background: var(--cds-layer-02);
}

.panel .table-scroll thead th {
  background: var(--cds-layer-accent);
}

.sort-btn {
  color: inherit;
  font: inherit;
}

.child-row td {
  background: var(--cds-layer-02);
}

.num {
  font-variant-numeric: tabular-nums;
}

/* Rows that become cards on a phone. */
@media (max-width: 719px) {
  .responsive-table tr {
    border: 0;
    border-radius: 0;
    background: var(--cds-layer-01);
    box-shadow: none;
  }

  .responsive-table td,
  .responsive-table th {
    background: transparent;
  }

  .responsive-table td:first-child {
    border-bottom-color: var(--cds-border-subtle);
  }
}

/* --- Tags (badges and chips) --------------------------------------------------------------------------- */
.badge,
.chip,
.count-pill,
.count-badge,
.heat-key,
.delta {
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 1rem;
  font-family: var(--cds-font);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  line-height: 1.5rem;
}

.badge,
.chip,
.chip-soft,
.badge-muted,
.badge-closed,
.count-pill {
  background: var(--cds-tag-gray-bg);
  color: var(--cds-tag-gray-fg);
}

.badge-open,
.chip[aria-current="page"],
.count-badge {
  background: var(--cds-tag-blue-bg);
  color: var(--cds-tag-blue-fg);
}

.badge-scheduled {
  background: var(--cds-tag-purple-bg);
  color: var(--cds-tag-purple-fg);
}

.badge-success,
.badge-health-ok,
.count-pill-ok {
  background: var(--cds-tag-green-bg);
  color: var(--cds-tag-green-fg);
}

.badge-danger,
.badge-cancelled,
.badge-health-fail,
.badge-urgent {
  background: var(--cds-tag-red-bg);
  color: var(--cds-tag-red-fg);
}

.badge-health-warn {
  background: var(--cds-tag-magenta-bg);
  color: var(--cds-tag-magenta-fg);
}

.badge::before {
  display: none;
}

a.chip:hover {
  background: var(--cds-layer-hover);
  color: var(--cds-text-primary);
}

.spec-chip {
  border: 0;
  border-radius: 1rem;
  background: var(--cds-tag-gray-bg);
}

.spec-chip a {
  color: var(--cds-tag-gray-fg);
}

.spec-chip a + a {
  border-left-color: var(--cds-layer-hover);
}

/* Changes: green up, red down, grey flat. The arrow and the sign carry it too. */
.delta-up {
  background: var(--cds-tag-green-bg);
  color: var(--cds-tag-green-fg);
}

.delta-down {
  background: var(--cds-tag-red-bg);
  color: var(--cds-tag-red-fg);
}

.delta-flat {
  background: var(--cds-tag-gray-bg);
  color: var(--cds-tag-gray-fg);
}

/* --- Inline notifications ----------------------------------------------------------------------------------- */
.notice {
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--cds-support-info) 40%, transparent);
  border-left: 3px solid var(--cds-support-info);
  border-radius: 0;
  background: var(--cds-notification-info);
  color: var(--cds-text-primary);
  box-shadow: none;
}

.notice > .icon,
.notice .icon {
  color: var(--cds-support-info);
}

.notice-success {
  border-color: color-mix(in srgb, var(--cds-support-success) 40%, transparent);
  border-left-color: var(--cds-support-success);
  background: var(--cds-notification-success);
  box-shadow: none;
}

.notice-success .icon {
  color: var(--cds-support-success);
}

.notice-error {
  border-color: color-mix(in srgb, var(--cds-support-error) 40%, transparent);
  border-left-color: var(--cds-support-error);
  background: var(--cds-notification-error);
  box-shadow: none;
}

.notice-error .icon {
  color: var(--cds-text-error);
}

.notice-anonymity,
.anonymity-card {
  background: var(--cds-notification-info);
  color: var(--cds-text-primary);
}

.anonymity-icon {
  border-radius: 0;
  background: transparent;
  color: var(--cds-support-info);
}

.form-error-summary {
  border: 0;
  border-left: 3px solid var(--cds-support-error);
  border-radius: 0;
  background: var(--cds-notification-error);
  color: var(--cds-text-primary);
}

/* --- Progress, rings and charts ---------------------------------------------------------------------------------- */
.progress-track {
  height: 0.5rem;
  border-radius: 0;
  background: var(--cds-layer-accent);
}

.progress-fill {
  border-radius: 0;
  background: var(--cds-interactive);
}

.progress-track-mini {
  height: 0.25rem;
}

.kpi-ring .ring-track,
.ring-track {
  stroke: var(--cds-layer-accent);
}

.kpi-ring .ring-value,
.ring-value {
  stroke: var(--cds-interactive);
  stroke-linecap: butt;
}

.kpi-warn .kpi-ring .ring-value {
  stroke: var(--cds-support-error);
}

.kpi-icon {
  background: transparent;
  color: var(--cds-interactive);
}

.kpi-ok .kpi-icon {
  background: transparent;
  color: var(--cds-support-success);
}

.kpi-warn .kpi-icon {
  background: transparent;
  color: var(--cds-text-error);
}

.kpi-value,
.stat-tile-value,
.summary-tile strong {
  font-weight: 300;
}

.kpi-card {
  padding: 1rem;
}

.stat-tile::before {
  background: var(--cds-interactive);
}

.stat-tile-warn::before {
  background: var(--cds-support-error);
}

.stat-tile-icon {
  background: transparent;
  color: var(--cds-interactive);
}

.heat-below-2 {
  background: var(--cds-tag-red-bg);
  color: var(--cds-tag-red-fg);
}

.heat-below-1 {
  background: color-mix(in srgb, var(--cds-tag-red-bg) 45%, var(--cds-layer-01));
  color: var(--cds-text-primary);
}

.heat-near,
.heat-none {
  background: var(--cds-layer-02);
  color: var(--cds-text-primary);
}

.heat-above-1 {
  background: color-mix(in srgb, var(--cds-tag-blue-bg) 45%, var(--cds-layer-01));
  color: var(--cds-text-primary);
}

.heat-above-2 {
  background: var(--cds-tag-blue-bg);
  color: var(--cds-tag-blue-fg);
}

.action-item {
  border: 0;
  border-radius: 0;
  background: var(--cds-layer-02);
}

.action-item::before {
  border-radius: 0;
  background: var(--cds-border-strong);
}

.action-item:has(.badge-urgent)::before {
  background: var(--cds-support-error);
}

.action-item:has(.badge-scheduled)::before {
  background: var(--cds-tag-purple-fg);
}

.health-item::before {
  border-radius: 0;
  background: var(--cds-support-success);
}

.health-item.health-warn::before {
  background: var(--cds-support-warning);
}

.health-item.health-fail::before {
  background: var(--cds-support-error);
}

.health-overall {
  color: var(--cds-text-primary);
}

/* --- Pagination and breadcrumbs --------------------------------------------------------------------------------------- */
.pagination a {
  border: 1px solid var(--cds-border-subtle);
  border-radius: 0;
  background: var(--cds-layer-01);
  color: var(--cds-link-primary);
}

.pagination a:hover {
  background: var(--cds-layer-hover);
}

.breadcrumbs a {
  color: var(--cds-link-primary);
}

.breadcrumbs li + li::before {
  content: "/";
  color: var(--cds-text-helper);
}

/* --- Dialog -------------------------------------------------------------------------------------------------------------------- */
.dialog {
  border: 0;
  border-radius: 0;
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--cds-overlay) 30%, transparent);
}

.dialog::backdrop {
  background: color-mix(in srgb, var(--cds-overlay) 50%, transparent);
}

/* --- Sign-in landing -------------------------------------------------------------------------------------------------------------- */
.landing-hero2 {
  padding: 3rem 2rem;
  border-left: 0;
}

.landing-hero2 h1 {
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 300;
  line-height: calc(1.15 * var(--md-lang-height));
  letter-spacing: 0;
}

.eyebrow {
  color: var(--cds-text-helper);
  font-weight: 400;
  letter-spacing: 0.02rem;
  text-transform: none;
}

.landing-hero2 .landing-logo {
  border-radius: 0;
  box-shadow: none;
}

.landing-art svg {
  filter: none;
}

.trust-row li {
  border-radius: 1rem;
  background: var(--cds-tag-blue-bg);
  color: var(--cds-tag-blue-fg);
}

.landing-cta .button-google {
  box-shadow: none;
}

.feature-card,
.steps li {
  background: var(--cds-layer-01);
}

.feature-card:nth-child(2) .feature-icon,
.feature-card:nth-child(3) .feature-icon {
  background: transparent;
  color: var(--cds-interactive);
}

.steps li::before,
.import-card a::before,
.step-cards li::before,
.sec-num,
.import-steps li::before {
  border-radius: 0;
  background: var(--cds-button-primary);
  color: var(--cds-text-on-color);
}

.landing-section h2 {
  font-weight: 400;
}

.landing-art .art-card,
.landing-art .art-line,
.landing-art .art-soft {
  fill: var(--cds-layer-02);
}

/* --- Student pages ------------------------------------------------------------------------------------------------------------------- */
.student-hero {
  border-left: 4px solid var(--cds-interactive);
}

.card-awaiting {
  border: 0;
  border-left: 4px solid var(--cds-interactive);
  background: var(--cds-layer-01);
  box-shadow: none;
}

.card-completed {
  border-left: 4px solid var(--cds-support-success);
}

.card-not-available {
  border-left: 4px solid var(--cds-support-error);
}

.card-opening-soon {
  border-left: 4px solid var(--cds-border-strong);
}

.course-avatar {
  background: var(--cds-layer-accent);
  color: var(--cds-text-primary);
}

.card-awaiting:nth-of-type(even) .course-avatar {
  background: var(--cds-layer-accent);
  color: var(--cds-text-primary);
}

.all-done {
  border-radius: 0;
  border-left: 3px solid var(--cds-support-success);
  background: var(--cds-notification-success);
  color: var(--cds-text-primary);
}

.empty-state .icon {
  border-radius: 0;
  background: transparent;
  color: var(--cds-interactive);
}

/* The feedback form: Carbon tiles with selectable radio tiles inside. */
#feedback-form .question {
  border: 0;
  border-radius: 0;
  background: var(--cds-layer-01);
  box-shadow: none;
}

#feedback-form .question-answered {
  border: 0;
  box-shadow: inset 3px 0 0 var(--cds-support-success);
}

#feedback-form .question-error {
  background: var(--cds-notification-error);
  box-shadow: inset 3px 0 0 var(--cds-support-error);
}

#feedback-form .question:focus-within {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

#feedback-form .question-text::before {
  border-radius: 0;
  background: var(--cds-layer-accent);
  color: var(--cds-text-primary);
}

#feedback-form .question-answered .question-text::before {
  background: var(--cds-support-success);
  color: var(--cds-text-on-color);
}

#feedback-form .question > div > div > label:has(input[type="radio"]) {
  border: 1px solid var(--cds-border-subtle);
  border-radius: 0;
  background: var(--cds-layer-02);
  color: var(--cds-text-primary);
}

@media (hover: hover) {
  #feedback-form .question > div > div > label:has(input[type="radio"]):hover {
    border-color: var(--cds-border-strong);
    background: var(--cds-layer-hover);
  }
}

#feedback-form .question > div > div > label:has(input[type="radio"]:checked) {
  border: 2px solid var(--cds-interactive);
  background: var(--cds-highlight);
  color: var(--cds-text-primary);
}

#feedback-form .question > div > div > label:has(input[type="radio"])::before {
  border-color: var(--cds-text-primary);
  background: transparent;
}

#feedback-form .question > div > div > label:has(input[type="radio"]:checked)::before {
  border-color: var(--cds-interactive);
  background: var(--cds-interactive);
  box-shadow: inset 0 0 0 3px var(--cds-highlight);
}

#feedback-form .question textarea,
#feedback-form .question input[type="text"] {
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong);
  border-radius: 0;
  background: var(--cds-field-01);
}

.form-progress {
  border: 0;
  border-bottom: 1px solid var(--cds-border-subtle);
  border-radius: 0;
  background: var(--cds-background);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.submit-bar {
  background: var(--cds-layer-01);
}

.thanks-hero {
  border-left: 4px solid var(--cds-support-success);
}

.thanks-ring {
  fill: var(--cds-support-success);
}

.thanks-tick {
  stroke: var(--cds-text-on-color);
}

.thanks-note {
  border-radius: 1rem;
  background: var(--cds-tag-green-bg);
  color: var(--cds-tag-green-fg);
}

/* --- Misc ------------------------------------------------------------------------------------------------------------------------------- */
.calendar-week {
  border: 0;
  border-radius: 0;
  background: var(--cds-layer-01);
  box-shadow: none;
}

.calendar-week.calendar-current {
  box-shadow: inset 4px 0 0 var(--cds-interactive);
}

.calendar-events li {
  border-radius: 0;
  background: var(--cds-layer-02);
}

.date-tile {
  border-radius: 0;
  background: var(--cds-button-primary);
  color: var(--cds-text-on-color);
}

.form-card .section-title {
  border-radius: 0;
  border-left: 4px solid var(--cds-interactive);
  background: var(--cds-layer-02);
  font-weight: 400;
}

.form-card .form-actions {
  border-radius: 0;
  border-top: 1px solid var(--cds-border-subtle);
  background: var(--cds-layer-01);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.program-card {
  background: var(--cds-layer-01);
}

.program-card-head {
  background: var(--cds-layer-01);
  border-bottom: 1px solid var(--cds-background);
}

.discipline-row {
  border-bottom: 1px solid var(--cds-background);
  background: var(--cds-layer-02);
}

.signoff-line {
  border-bottom-color: var(--cds-text-primary);
}

.report-seal {
  border-left: 4px solid var(--cds-support-success);
  background: var(--cds-notification-success);
}

.report-seal.seal-warn {
  border-left-color: var(--cds-support-error);
  background: var(--cds-notification-error);
}

.nav-scrim {
  background: color-mix(in srgb, var(--cds-overlay) 50%, transparent);
}

.site-footer {
  border-top: 1px solid var(--cds-border-subtle);
  box-shadow: none;
  color: var(--cds-text-secondary);
}

.skip-link {
  border-radius: 0;
  background: var(--cds-background);
  color: var(--cds-link-primary);
}

@media print {
  .hero,
  .report-hero,
  .profile-hero,
  .page-header.page-hero,
  .panel,
  .kpi-card,
  .table-scroll th,
  .table-scroll td {
    background: none !important;
    border-color: var(--cds-border-strong);
  }
}

/* --- Specificity fixes: rules in the older files are written with :is() chains and
   .staff-shell prefixes, so the Carbon ones that must win repeat those chains. -------------------- */
.button:not(.button-secondary):not(.button-danger):not(.button-google):not(.button-small) {
  box-shadow: none;
}

:root
  :is(
    .form-field,
    .form-card .form-field,
    .question,
    .filters .form-field,
    .inline-add,
    .table-filter,
    .audit-filters .form-field
  )
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"]),
    select,
    textarea
  ) {
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong);
  border-radius: 0;
  background: var(--cds-field-01);
  box-shadow: none;
  font: 400 0.875rem/1.25rem var(--cds-font);
  letter-spacing: 0.01rem;
}

:root :is(.form-field, .form-card .form-field, .question, .filters .form-field) textarea {
  padding: 0.6875rem 1rem;
}

:root
  :is(
    .form-field,
    .form-card .form-field,
    .question,
    .filters .form-field,
    .inline-add,
    .table-filter
  )
  :is(input, select, textarea):hover {
  border-color: var(--cds-border-strong);
  background: var(--cds-field-hover);
}

:root
  :is(
    .form-field,
    .form-card .form-field,
    .question,
    .filters .form-field,
    .inline-add,
    .table-filter
  )
  :is(input, select, textarea):focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
  border-bottom-color: transparent;
  box-shadow: none;
}

:root :is(.form-field, .question) :is(input, select, textarea)[aria-invalid="true"] {
  outline: 2px solid var(--cds-support-error);
  outline-offset: -2px;
  border-color: transparent;
}

:root :is(.form-field, .question) :is(input, select, textarea):disabled {
  opacity: 1;
  background: var(--cds-layer-accent);
  color: var(--cds-text-disabled);
}

/* Panels and tiles that the older files give an outline or a radius. */
:root .panel,
:root .card,
:root .form-card,
:root .filters,
:root .stat-tile,
:root .action-card,
:root .table-scroll,
:root .result-list,
:root .error-page {
  border-radius: 0;
}

:root .panel .table-scroll,
:root .form-card .table-scroll {
  border: 0;
  border-radius: 0;
}

/* Fields inside a tile sit on the second layer (white in the light theme). */
:root
  :is(.filters .form-field, .panel .form-field, .form-card .form-field)
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"]),
    select,
    textarea
  ) {
  background: var(--cds-layer-02);
}

:root
  :is(.filters .form-field, .panel .form-field, .form-card .form-field)
  :is(input, select, textarea):hover {
  background: var(--cds-layer-hover);
}

/* --- Header, search and navigation refinement ---------------------------------------------------- */
/* Brand: the university name in semibold, the product name quieter after a thin divider. */
body .site-header .brand-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}

body .site-header .brand-name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
}

body .site-header .brand-product {
  padding-left: 0.75rem;
  border-left: 1px solid var(--cds-shell-border);
  font-size: 0.875rem;
  font-weight: 400;
  opacity: 0.72;
}

@media (max-width: 899px) {
  body .site-header .brand-product {
    display: none;
  }
}

@media (max-width: 479px) {
  body.staff-shell .site-header .brand-text {
    display: none;
  }
}

/* Search: a wide, centred field with an icon, a shortcut hint and a clear focus state. */
body .site-header .header-search {
  flex: 1 1 22rem;
  max-width: 36rem;
  margin: 0 auto;
}

body .site-header .header-search .icon {
  left: 0.875rem;
  opacity: 0.7;
}

body .site-header .header-search input {
  width: 100%;
  min-height: 2.25rem;
  padding: 0 2.75rem 0 2.5rem;
  border: 1px solid transparent;
  border-bottom-color: var(--cds-shell-border);
  background: var(--cds-shell-hover);
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.01rem;
  transition: border-color var(--md-sys-motion-duration-short4) var(--cds-ease),
    background-color var(--md-sys-motion-duration-short4) var(--cds-ease);
}

body .site-header .header-search input:hover {
  border-color: var(--cds-shell-border);
}

body .site-header .header-search input::placeholder {
  opacity: 0.65;
}

body .site-header .header-search input:focus {
  border-color: var(--cds-shell-text);
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--cds-shell-text);
}

body .site-header .header-search:focus-within .icon {
  opacity: 1;
}

.search-hint {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  min-width: 1.375rem;
  padding: 0 0.375rem;
  border: 1px solid var(--cds-shell-border);
  background: var(--cds-shell-bg);
  color: var(--cds-shell-text);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
  opacity: 0.8;
  transform: translateY(-50%);
  pointer-events: none;
}

.header-search:focus-within .search-hint {
  display: none;
}

@media (hover: none) {
  .search-hint {
    display: none;
  }
}

/* Account area: the person on the left, sign out set apart by a divider. */
body .site-header .user-chip-name strong {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.125rem;
}

body .site-header .user-chip-name .muted {
  font-size: 0.75rem;
  line-height: 1rem;
}

body .site-header .site-nav .link-button {
  border-left: 1px solid var(--cds-shell-border);
}

/* Side navigation: quiet section titles, readable items, a clear current page. */
.nav-group-title {
  padding: 0.75rem 1rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.nav-item {
  min-height: 2.5rem;
  color: var(--cds-text-primary);
  font-weight: 400;
  transition: background-color var(--md-sys-motion-duration-short2) var(--cds-ease);
}

.nav-item .icon {
  color: var(--cds-text-secondary);
}

.nav-item:hover .icon {
  color: var(--cds-text-primary);
}

.nav-item.active {
  background-color: var(--cds-layer-01);
  font-weight: 600;
}

.nav-item.active .icon {
  color: var(--cds-link-primary);
}

.nav-item:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

/* The search that lives inside the phone drawer matches the header field. */
.sidebar .sidebar-search input {
  min-height: 2.5rem;
  padding: 0 1rem 0 2.5rem;
  border: 1px solid transparent;
  border-bottom-color: var(--cds-border-strong);
  border-radius: 0;
  background: var(--cds-field-01);
  color: var(--cds-text-primary);
  font: inherit;
  font-size: 0.875rem;
}

.sidebar .sidebar-search input:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

.sidebar .sidebar-search .icon {
  color: var(--cds-text-secondary);
}


/* --- UX audit refinements ------------------------------------------------------------------------ */
/* Section titles are 12px, Carbon's smallest label size; nothing is set smaller. */
.nav-group-title {
  font-size: 0.75rem;
}

/* Tap targets: sort buttons and row action links are at least 32px tall. */
.sort-btn {
  min-height: 2rem;
  padding-block: 0.375rem;
}

.action-link {
  min-height: 2rem;
  align-items: center;
}

/* Disclosure (<details>): a chevron that turns, a 40px target, no browser triangle. */
details > summary {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > summary::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.75rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--md-sys-motion-duration-short4) var(--cds-ease);
}

details[open] > summary::before {
  transform: rotate(45deg);
}

details > summary:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}

/* The anonymity note on the feedback form: one reassuring line, the detail on request. */
.anonymity-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--cds-support-info);
  background: var(--cds-notification-info);
  color: var(--cds-text-primary);
}

.anonymity-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--cds-link-primary);
}

.anonymity-body {
  min-width: 0;
}

.anonymity-title {
  margin: 0;
}

.anonymity-more ul {
  display: grid;
  gap: 0.375rem;
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.25rem;
}

.class-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--cds-text-secondary);
}

/* Sign-in and other plain message pages. */
.empty-state-page {
  max-width: 34rem;
  margin: 3rem auto;
  padding: 2rem;
  border-left: 4px solid var(--cds-interactive);
  background: var(--cds-layer-01);
}

.empty-state-page h1 {
  margin-top: 0;
}

/* On a phone the sign-in content comes first and the illustration follows it, so the
   button is on the first screen. */
@media (max-width: 760px) {
  .landing-hero2 {
    padding: 1.5rem 1.25rem;
  }

  .landing-art {
    order: 2;
  }

  .landing-art svg {
    max-width: 200px;
  }
}

.anonymity-more {
  margin: 0;
}

/* An icon followed by one message: the icon sits beside the text with a gap, however long. */
.notice:has(> svg.icon:first-child + span:last-child) {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.notice:has(> svg.icon:first-child + span:last-child) > svg.icon {
  margin-top: 0.125rem;
}

/* Links in table cells are tall enough to tap. */
.table-scroll td a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
}

/* Type on the student pages: the questions are the content, and the status lines are for
   reading on a phone, so neither is set at the 12px helper size. */
.question-text {
  font-size: 1.125rem;
}

.progress-text {
  font-size: 0.875rem;
}

code,
kbd {
  font-size: 0.875rem;
}

.form-meta {
  font-size: 0.875rem;
}

/* Windows High Contrast and other forced-colour modes remove backgrounds, so anything that
   is only a filled shape gets an outline, and focus uses the system highlight colour. */
@media (forced-colors: active) {
  .button,
  button.button,
  a.button,
  .tag,
  .badge,
  .chip,
  .kpi-card,
  .program-card,
  .faculty-card,
  .panel,
  .notice,
  .anonymity-card {
    border: 1px solid CanvasText;
  }

  input:not([type="checkbox"], [type="radio"], [type="hidden"]),
  select,
  textarea {
    border: 1px solid ButtonText;
  }

  .progress-track {
    border: 1px solid CanvasText;
  }

  .progress-fill,
  .ring-value {
    background: Highlight;
    stroke: Highlight;
    forced-color-adjust: none;
  }

  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .nav-item.active {
    border-left: 3px solid Highlight;
  }
}


/* --- Results: how people answered, what a score is compared with ---------------------------------- */
.strength-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.strength-grid section {
  padding: 1rem 1.25rem;
  background: var(--cds-layer-01);
  border-left: 4px solid var(--cds-border-strong);
}

.strength-grid h3 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.strength-grid ol {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding-left: 1.25rem;
}

.question-table .question-cell {
  min-width: 14rem;
  max-width: 26rem;
}

.spread-cell {
  min-width: 14rem;
}

.spread {
  display: block;
  width: 100%;
  height: 0.75rem;
  background: var(--cds-layer-accent);
}

.seg,
.swatch {
  stroke: var(--cds-background);
  stroke-width: 0.4;
}

/* The first option (the best answer) is the strongest blue, the last the palest, so the order
   reads without colour names; every segment is also listed with its label and share. */
.seg-0 { fill: var(--cds-interactive); }
.seg-1 { fill: color-mix(in srgb, var(--cds-interactive) 78%, var(--cds-layer-accent)); }
.seg-2 { fill: color-mix(in srgb, var(--cds-interactive) 56%, var(--cds-layer-accent)); }
.seg-3 { fill: color-mix(in srgb, var(--cds-interactive) 36%, var(--cds-layer-accent)); }
.seg-4 { fill: color-mix(in srgb, var(--cds-interactive) 18%, var(--cds-layer-accent)); }

.swatch {
  display: inline-block;
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--cds-border-strong);
  stroke: none;
}

.swatch.seg-0 { background: var(--cds-interactive); }
.swatch.seg-1 { background: color-mix(in srgb, var(--cds-interactive) 78%, var(--cds-layer-accent)); }
.swatch.seg-2 { background: color-mix(in srgb, var(--cds-interactive) 56%, var(--cds-layer-accent)); }
.swatch.seg-3 { background: color-mix(in srgb, var(--cds-interactive) 36%, var(--cds-layer-accent)); }
.swatch.seg-4 { background: color-mix(in srgb, var(--cds-interactive) 18%, var(--cds-layer-accent)); }

.spread-legend {
  display: grid;
  gap: 0.125rem 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  line-height: 1rem;
}

.spread-legend li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.spread-legend .legend-label {
  min-width: 0;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-cell {
  min-width: 15rem;
}

.compare {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.5rem;
  align-items: baseline;
}

.compare-label {
  min-width: 8rem;
  color: var(--cds-text-secondary);
}

.compare-up .delta,
.compare-down .delta {
  font-weight: 600;
}

.question-grid th[scope="row"] {
  min-width: 16rem;
  max-width: 28rem;
  font-weight: 400;
}

/* --- Explore and share: glossary, comparison table, one-page print sheets ----------------------- */
.glossary {
  margin-block: 1.5rem;
  border: 1px solid var(--cds-border-subtle);
  background: var(--cds-layer-01);
}

.glossary summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font: 600 0.875rem/1.25rem var(--cds-font);
  color: var(--cds-text-primary);
}

.glossary dl {
  margin: 0;
  padding: 0 1rem 1rem;
}

.glossary dt {
  margin-top: 0.75rem;
  font: 600 0.875rem/1.25rem var(--cds-font);
  color: var(--cds-text-primary);
}

.glossary dd {
  margin: 0.125rem 0 0;
  font: 400 0.875rem/1.25rem var(--cds-font);
  color: var(--cds-text-secondary);
  max-width: 48rem;
}

.compare-table .compare-index th,
.compare-table .compare-index td {
  background: var(--cds-layer-01);
}

.compare-table th[scope="row"] {
  font-weight: 400;
  text-align: left;
}

.print-sheet {
  max-width: 52rem;
  margin-inline: auto;
}

.print-table th,
.print-table td {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--cds-border-subtle);
  text-align: left;
}

.print-table .num {
  text-align: right;
}

@media print {
  @page {
    size: A4;
    margin: 14mm;
  }

  .no-print,
  .site-header,
  .site-footer,
  .skip-link,
  .nav-scrim {
    display: none !important;
  }

  .print-sheet {
    max-width: none;
  }

  .print-sheet h1 {
    font-size: 1.5rem;
  }

  .print-table tr,
  .print-sheet li,
  .print-sheet h2,
  .print-sheet h3 {
    break-inside: avoid;
  }

  .glossary {
    display: none;
  }
}

/* --- Completion screens: the automatic-refresh switch ------------------------------------------- */
.auto-refresh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-block: 0 1rem;
  font: 400 0.875rem/1.25rem var(--cds-font);
  color: var(--cds-text-secondary);
}

.auto-refresh-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

html:not(.js) .auto-refresh {
  display: none;
}