/* ==========================================================================
   QERIONN responsive chrome — extend existing tokens, not a second system.
   Breakpoints mentally signed off: 360, 768, 1024, 1440, 2560, 3840.
   Owner 14 Aug 2026: menu overlap, 65-inch kanban, 44px touch, sticky titles.
   ========================================================================== */

:root {
  --q-header-offset: 96px;
  --q-touch: 44px;
  --q-chrome-max: 1680px;
  --q-dock-edge: 12px;
  --q-dock-gap: 10px;
  --q-fab-slot: calc(var(--q-touch) + var(--q-dock-gap));
  /* Dual-surface contrast chips (WCAG-ish 4.5:1). Gold fill + navy ink,
     never ghost gold on gold and never navy ink on navy. */
  --q-contrast-ink: #07101f;
  --q-contrast-fill: #f0d58a;
  --q-contrast-fill-edge: #c9a227;
  --q-contrast-on-dark: #f4f0e6;
  --q-contrast-muted-on-dark: #d5deeb;
  --q-contrast-dark-fill: #0b1728;
}

html {
  scroll-padding-top: calc(var(--q-header-offset) + 12px);
}

/* Sticky public header must not cover page titles (institution / partner / student). */
body.institution-portal-page .su-page,
body.student-university-page:not(.q-app--student) .su-page,
body.partner-network-page .pn-page {
  padding-top: calc(var(--q-header-offset) + 1.25rem);
}

body.q-app--student .su-page {
  padding-top: calc(var(--q-header-offset) + 0.75rem);
}

.su-hero h1,
.pn-hero h1,
.qo-record-header__title,
.workspace-topbar {
  scroll-margin-top: calc(var(--q-header-offset) + 8px);
}

/* ---- 360px / mobile hamburger for portal pill rows ---- */
@media (max-width: 767.98px) {
  :root {
    --q-header-offset: 88px;
  }

  .inst-nav a,
  .inst-nav-more > summary,
  .pn-nav a,
  .pn-nav-more > summary,
  .q-nav-overflow > summary,
  .nav-toggle,
  .workspace-menu-button,
  .header-profile-chip,
  .q-audio-help,
  .q-guided-help__how > summary {
    min-height: var(--q-touch);
    min-width: var(--q-touch);
  }

  /* Beat later portal CSS (institution_portal overflow:hidden) so the
     Menu panel is not clipped under the sticky header. */
  .inst-nav-primary,
  .pn-nav-primary,
  body.institution-portal-page .inst-nav-primary,
  body.partner-network-page .pn-nav-primary {
    flex-wrap: nowrap;
    overflow: visible !important;
  }

  .q-nav-overflow {
    width: 100%;
  }

  .q-nav-overflow > summary {
    width: 100%;
    justify-content: center;
  }

  .q-nav-overflow-panel {
    position: static;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* ---- 768 / tablet: swipe kanban, readable pills ---- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .inst-nav-primary,
  .pn-nav-primary {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .qo-board,
  .inst-board,
  .pn-board,
  .inst-match-board,
  .q-kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16.5rem, 70vw);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.85rem;
    padding-bottom: 0.5rem;
  }

  .qo-board > *,
  .inst-board > *,
  .pn-board > *,
  .inst-match-board > *,
  .q-kanban > * {
    scroll-snap-align: start;
    min-width: 16.5rem;
  }
}

/* ---- 1024 / laptop: pills stay one row; profile chip wins ---- */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .inst-nav-primary,
  .pn-nav-primary {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .header-actions {
    z-index: 3;
  }

  .site-navigation {
    min-width: 0;
    overflow: hidden;
  }

  .site-navigation.is-open,
  .site-navigation:has(> details[open]),
  .site-navigation:has(> details:hover) {
    overflow: visible;
  }
}

/* Authenticated identity chip: hamburger earlier so Verify / Company never
   paint over the chip or Test banner. Public (signed-out) keeps 1180px. */
@media (max-width: 1439.98px) {
  body:has(.header-profile-chip) .header-inner {
    grid-template-columns: max-content max-content;
  }

  body:has(.header-profile-chip) .site-navigation:not(.is-open) {
    display: none;
  }

  body:has(.header-profile-chip) .nav-toggle {
    display: block;
    justify-self: end;
    min-height: var(--q-touch);
    min-width: var(--q-touch);
  }
}

/* ---- 1440 desktop: one readable pill row ---- */
@media (min-width: 1440px) {
  .inst-nav-primary,
  .pn-nav-primary {
    flex-wrap: nowrap;
  }
}

/* ---- 2560 / 3840 ultrawide: cap content, do not stretch tables ---- */
@media (min-width: 2560px) {
  :root {
    --q-chrome-max: 1680px;
  }

  body.institution-portal-page .su-shell,
  body.partner-network-page .pn-shell,
  body.q-app--student .su-shell,
  .workspace-content .qo-page,
  .shell {
    max-width: var(--q-chrome-max);
    margin-inline: auto;
  }

  .qo-board,
  .inst-board,
  .pn-board,
  .inst-match-board,
  .q-kanban {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 20rem));
    justify-content: start;
  }

  .su-data-table,
  .pn-table,
  .qo-table,
  .app-grid {
    max-width: var(--q-chrome-max);
  }
}

@media (min-width: 3840px) {
  :root {
    --q-chrome-max: 1800px;
  }
}

/* Overflow slot — same pill language as inst-nav / pn-nav */
.q-nav-overflow {
  position: relative;
  flex: 0 0 auto;
}

.q-nav-overflow > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--q-touch);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 240, 230, 0.92);
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.q-nav-overflow > summary::-webkit-details-marker {
  display: none;
}

.q-nav-overflow-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.45rem);
  left: 0;
  min-width: min(280px, 86vw);
  padding: 0.75rem 0.65rem 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(214, 178, 94, 0.28);
  background:
    linear-gradient(
      160deg,
      rgba(14, 28, 54, 0.98),
      rgba(8, 18, 36, 0.98)
    );
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
  color: var(--q-contrast-on-dark);
}

.q-nav-overflow-panel a,
.q-nav-overflow-item {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  min-height: var(--q-touch);
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  color: var(--q-contrast-on-dark);
  text-decoration: none;
}

.q-nav-overflow-heading {
  margin: 0.55rem 0.55rem 0.35rem;
  color: rgba(240, 213, 138, 0.78);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.q-nav-measuring {
  flex-wrap: nowrap !important;
}

.site-navigation > a,
.site-navigation summary,
.inst-nav a,
.inst-nav-more > summary,
.pn-nav a,
.pn-nav-more > summary,
.q-nav-overflow > summary {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  flex: 0 0 auto;
}

/* Public marketing header (logged-out /students/institutions/ and siblings):
   pills that do not fit go into one More slot. #nav-toggle owns the menu
   at the hamburger breakpoint — never two stacked menus. Staff sign in /
   Request access / contact stay in the reserved actions column and never
   wrap mid-word or accept overflow paint from Help / Company. */
.site-navigation[data-overflow-nav] {
  min-width: 0;
}

@media (min-width: 1181px) {
  header.site-header .site-navigation[data-overflow-nav] {
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  /* 80eea08f clipped leftover pills so they could not paint into
     Staff sign in. That same overflow:hidden also clipped every
     absolutely-positioned submenu (Students, Institutions, Partners,
     Software & Digital, Company, More). Keep the clip only while
     every details is closed; an open submenu must escape the nav box. */
  header.site-header .site-navigation[data-overflow-nav]:has(> details[open]),
  header.site-header .site-navigation[data-overflow-nav]:has(> details:hover) {
    overflow: visible !important;
    z-index: 30;
  }

  header.site-header:has(#site-navigation > details[open]),
  header.site-header:has(#site-navigation > details[open]) .header-inner,
  header.site-header:has(#site-navigation > details:hover),
  header.site-header:has(#site-navigation > details:hover) .header-inner {
    overflow: visible !important;
  }

  header.site-header .header-actions {
    z-index: 5;
    isolation: isolate;
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }

  .header-actions > a.button-quiet.header-secondary-cta:first-child,
  .header-actions .header-secondary-cta,
  .header-actions .header-primary-cta {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap !important;
    word-break: keep-all;
    overflow-wrap: normal;
    flex: 0 0 auto !important;
    max-width: none;
  }
}

.q-nav-is-parked {
  display: none !important;
}

@media (max-width: 1180px) {
  #site-navigation .q-nav-overflow {
    display: none !important;
  }
}

.site-navigation:not(.is-open) .nav-dropdown:not([open]) > .nav-dropdown-panel,
.site-navigation:not(.is-open) .nav-split:not([open]) > .nav-split-panel,
.q-nav-overflow:not([open]) > .q-nav-overflow-panel {
  display: none !important;
  pointer-events: none !important;
}

@media (hover: hover) and (min-width: 1261px) {
  .site-navigation:not(.is-open) .nav-dropdown:not([open]):hover > .nav-dropdown-panel,
  .site-navigation:not(.is-open) .nav-split:not([open]):hover > .nav-split-panel,
  .q-nav-overflow:not([open]):hover > .q-nav-overflow-panel {
    display: grid !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* The desktop panels sit 16px below the trigger. Without a bridge,
     the pointer leaves :hover in that gap and the menu never stays open. */
  .site-navigation .nav-dropdown-panel::before,
  .site-navigation .nav-split-panel::before,
  .q-nav-overflow-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 18px;
  }
}

/* Logged-out login shells: one menu, never two stacked, never over the form. */
body.su-auth-page .su-page,
body.pn-auth-page .pn-page {
  padding-top: calc(var(--q-header-offset) + 1.5rem);
}

@media (max-width: 1100px) {
  body.su-auth-page .su-form-intro,
  body.pn-auth-page .pn-hero {
    position: static;
  }

  body.su-auth-page .su-form-layout,
  body.pn-auth-page .pn-form-card {
    min-width: 0;
  }
}

body.su-auth-page .header-actions,
body.pn-auth-page .header-actions {
  display: none !important;
}

/* Closed-only. A blanket hide of every panel while the hamburger is
   closed also killed desktop click/hover submenus on every login shell. */
body.su-auth-page .site-navigation:not(.is-open) .nav-dropdown:not([open]) > .nav-dropdown-panel,
body.su-auth-page .site-navigation:not(.is-open) .nav-split:not([open]) > .nav-split-panel,
body.pn-auth-page .site-navigation:not(.is-open) .nav-dropdown:not([open]) > .nav-dropdown-panel,
body.pn-auth-page .site-navigation:not(.is-open) .nav-split:not([open]) > .nav-split-panel {
  display: none !important;
  pointer-events: none !important;
}

@media (max-width: 1439.98px) {
  body.su-auth-page .header-inner,
  body.pn-auth-page .header-inner {
    grid-template-columns: max-content max-content;
  }

  body.su-auth-page .site-navigation:not(.is-open),
  body.pn-auth-page .site-navigation:not(.is-open) {
    display: none !important;
  }

  body.su-auth-page .nav-toggle,
  body.pn-auth-page .nav-toggle {
    display: block !important;
    justify-self: end;
  }

  body.su-auth-page .site-navigation.is-open,
  body.pn-auth-page .site-navigation.is-open {
    max-height: min(70vh, 28rem);
    overflow: auto;
    z-index: 40;
  }
}

@media (min-width: 1440px) {
  body.su-auth-page .nav-toggle,
  body.pn-auth-page .nav-toggle {
    display: none !important;
  }

  body.su-auth-page .site-navigation,
  body.pn-auth-page .site-navigation {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
  }

  body.su-auth-page .site-navigation:has(> details[open]),
  body.su-auth-page .site-navigation:has(> details:hover),
  body.pn-auth-page .site-navigation:has(> details[open]),
  body.pn-auth-page .site-navigation:has(> details:hover) {
    overflow: visible !important;
    z-index: 40;
  }
}

/* Shared public-header submenu escape. Every shell that shows this nav
   (home, institution marketing, partner apply, student/partner/institution
   login) must inherit the same open/hover exception so a new page cannot
   re-clip dropdowns with a body-class overflow:hidden. */
@media (min-width: 1181px) {
  header.site-header .site-navigation:has(> details[open]),
  header.site-header .site-navigation:has(> details:hover),
  body.su-auth-page header.site-header .site-navigation:has(> details[open]),
  body.su-auth-page header.site-header .site-navigation:has(> details:hover),
  body.pn-auth-page header.site-header .site-navigation:has(> details[open]),
  body.pn-auth-page header.site-header .site-navigation:has(> details:hover),
  body.institution-portal-page header.site-header .site-navigation:has(> details[open]),
  body.institution-portal-page header.site-header .site-navigation:has(> details:hover),
  body.partner-network-page header.site-header .site-navigation:has(> details[open]),
  body.partner-network-page header.site-header .site-navigation:has(> details:hover),
  body.student-university-page header.site-header .site-navigation:has(> details[open]),
  body.student-university-page header.site-header .site-navigation:has(> details:hover) {
    overflow: visible !important;
    z-index: 40 !important;
  }

  header.site-header:has(#site-navigation > details[open]),
  header.site-header:has(#site-navigation > details[open]) .header-inner,
  header.site-header:has(#site-navigation > details:hover),
  header.site-header:has(#site-navigation > details:hover) .header-inner,
  body.su-auth-page header.site-header:has(#site-navigation > details[open]) .header-inner,
  body.pn-auth-page header.site-header:has(#site-navigation > details[open]) .header-inner,
  body.institution-portal-page header.site-header:has(#site-navigation > details[open]) .header-inner,
  body.partner-network-page header.site-header:has(#site-navigation > details[open]) .header-inner,
  body.student-university-page header.site-header:has(#site-navigation > details[open]) .header-inner {
    overflow: visible !important;
  }

  header.site-header .site-navigation > details[open],
  header.site-header .site-navigation > details:hover {
    isolation: auto;
    overflow: visible !important;
    z-index: 80;
  }
}

header.site-header .site-navigation:not(.is-open) .nav-dropdown[open] > .nav-dropdown-panel,
header.site-header .site-navigation:not(.is-open) .nav-split[open] > .nav-split-panel,
body.su-auth-page header.site-header .site-navigation:not(.is-open) .nav-dropdown[open] > .nav-dropdown-panel,
body.su-auth-page header.site-header .site-navigation:not(.is-open) .nav-split[open] > .nav-split-panel,
body.pn-auth-page header.site-header .site-navigation:not(.is-open) .nav-dropdown[open] > .nav-dropdown-panel,
body.pn-auth-page header.site-header .site-navigation:not(.is-open) .nav-split[open] > .nav-split-panel,
body.institution-portal-page header.site-header .site-navigation:not(.is-open) .nav-dropdown[open] > .nav-dropdown-panel,
body.institution-portal-page header.site-header .site-navigation:not(.is-open) .nav-split[open] > .nav-split-panel,
body.partner-network-page header.site-header .site-navigation:not(.is-open) .nav-dropdown[open] > .nav-dropdown-panel,
body.partner-network-page header.site-header .site-navigation:not(.is-open) .nav-split[open] > .nav-split-panel,
body.student-university-page header.site-header .site-navigation:not(.is-open) .nav-dropdown[open] > .nav-dropdown-panel,
body.student-university-page header.site-header .site-navigation:not(.is-open) .nav-split[open] > .nav-split-panel {
  display: grid !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (hover: hover) and (min-width: 1261px) {
  header.site-header .site-navigation:not(.is-open) .nav-dropdown:not([open]):hover > .nav-dropdown-panel,
  header.site-header .site-navigation:not(.is-open) .nav-split:not([open]):hover > .nav-split-panel,
  body.su-auth-page header.site-header .site-navigation:not(.is-open) .nav-dropdown:not([open]):hover > .nav-dropdown-panel,
  body.su-auth-page header.site-header .site-navigation:not(.is-open) .nav-split:not([open]):hover > .nav-split-panel,
  body.pn-auth-page header.site-header .site-navigation:not(.is-open) .nav-dropdown:not([open]):hover > .nav-dropdown-panel,
  body.pn-auth-page header.site-header .site-navigation:not(.is-open) .nav-split:not([open]):hover > .nav-split-panel,
  body.institution-portal-page header.site-header .site-navigation:not(.is-open) .nav-dropdown:not([open]):hover > .nav-dropdown-panel,
  body.institution-portal-page header.site-header .site-navigation:not(.is-open) .nav-split:not([open]):hover > .nav-split-panel,
  body.partner-network-page header.site-header .site-navigation:not(.is-open) .nav-dropdown:not([open]):hover > .nav-dropdown-panel,
  body.partner-network-page header.site-header .site-navigation:not(.is-open) .nav-split:not([open]):hover > .nav-split-panel,
  body.student-university-page header.site-header .site-navigation:not(.is-open) .nav-dropdown:not([open]):hover > .nav-dropdown-panel,
  body.student-university-page header.site-header .site-navigation:not(.is-open) .nav-split:not([open]):hover > .nav-split-panel {
    display: grid !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Kanban: stacked on phones; never a crushed 8-column table */
@media (max-width: 767.98px) {
  .qo-board,
  .inst-board,
  .pn-board,
  .inst-match-board,
  .q-kanban {
    display: grid;
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
}

.pn-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
  align-items: start;
}

.pn-board__column,
.q-kanban__column {
  min-width: 0;
}

.pn-board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.pn-board__head h2 {
  margin: 0;
  font-size: 1rem;
}

/* Guided help + Listen (browser TTS) */
.q-guided-help {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1.1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(214, 178, 94, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.q-guided-help__lead {
  margin: 0;
  max-width: 72ch;
}

.q-guided-help__hi {
  margin: 0;
  opacity: 0.82;
}

.q-guided-help__how > summary {
  cursor: pointer;
  font-weight: 650;
  min-height: var(--q-touch);
  display: inline-flex;
  align-items: center;
}

.q-guided-help__how p {
  margin: 0.4rem 0 0;
  max-width: 72ch;
}

.q-audio-help,
.q-audio-mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--q-touch);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--q-contrast-fill-edge);
  background: var(--q-contrast-dark-fill);
  color: var(--q-contrast-on-dark);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.q-audio-help::before {
  content: "▶";
  font-size: 0.75rem;
}

.q-audio-mute-dock {
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 30;
}

.workspace-body .q-guided-help {
  background: var(--qo-surface-sunken, #f1f4f8);
  border-color: var(--qo-border, #dce2ea);
  color: var(--qo-text, #142033);
}

body.q-app--student .q-guided-help {
  background: var(--stu-surface, #fff);
  border-color: var(--stu-border, rgba(11, 23, 40, 0.12));
  color: var(--stu-text, #0b1728);
}

.workspace-body .q-audio-help,
.workspace-body .q-audio-mute,
body.q-app--student .q-audio-help,
body.q-app--student .q-audio-mute {
  background: #fff;
  color: var(--q-contrast-ink);
  border-color: var(--q-contrast-fill-edge);
}

.workspace-body .q-audio-mute-dock {
  bottom: 1.25rem;
}

/* Demo chip: public_polish sets .button-gold { color:#07101f !important }
   plus a gold fill. A later ghost rule (transparent bg, gold text without
   !important) leaves navy ink on transparent over navy — the word Demo
   disappears. Keep a solid gold chip with navy ink. */
.q-demo-start.button-gold,
.q-demo-start.button.button-gold,
button.q-demo-start.button-gold,
a.q-demo-start.button-gold,
.qo-btn.q-demo-start {
  background: var(--q-contrast-fill) !important;
  background-image: none !important;
  color: var(--q-contrast-ink) !important;
  border: 1px solid var(--q-contrast-fill-edge) !important;
  font-weight: 800;
  box-shadow: none;
}

body.institution-portal-page .su-mode-banner,
body.student-university-page:not(.q-app--student) .su-mode-banner,
body.partner-network-page .su-mode-banner {
  color: var(--q-contrast-on-dark);
}

body.institution-portal-page .su-help-inline,
body.student-university-page:not(.q-app--student) .su-help-inline {
  color: var(--q-contrast-muted-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .q-nav-overflow-panel,
  .inst-nav-more-panel,
  .pn-nav-more-panel {
    transition: none;
  }
}

/* Workspace All Apps / boards on a phone: hamburger already exists;
   keep cards from stretching a 4k table. */
.workspace-content {
  max-width: 100%;
}

@media (min-width: 1440px) {
  .app-catalogue .app-kanban.qo-board {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .app-catalogue #app-pinned-grid.app-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 2560px) {
  .workspace-content {
    max-width: var(--q-chrome-max);
  }

  .workspace-content:has(.app-catalogue) {
    max-width: none;
  }

  .app-catalogue .app-kanban.qo-board {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }

  .app-catalogue #app-pinned-grid.app-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 3840px) {
  .app-catalogue .app-kanban.qo-board {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
}

@media (max-width: 767.98px) {
  .workspace-menu-button,
  .workspace-sidebar a {
    min-height: var(--q-touch);
  }

  .app-grid {
    grid-template-columns: 1fr;
  }

  .app-group-chips {
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 4px;
  }

  .app-group-chip,
  .app-catalogue .app-card,
  .app-catalogue .app-actions .qo-btn,
  .app-catalogue .app-pin-button {
    min-height: var(--q-touch);
  }

  .app-catalogue .app-kanban.qo-board {
    grid-template-columns: 1fr;
  }

  .app-catalogue #app-pinned-grid.app-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- ≤430px: Service Desk / Ask QERIONN FAB must not sit on the
   sticky header, Smart Assistant, Demo dock, Listen mute, or overflow
   Menu. Malik: menus must not overlap from mobile to 65-inch.
   Size stays ≥44px; Demo chip stays navy-on-gold (rules above). ---- */
@media (max-width: 430px) {
  html {
    scroll-padding-bottom: calc(var(--q-fab-slot) + 28px);
  }

  .guide-launcher,
  #guide-launcher {
    right: max(var(--q-dock-edge), env(safe-area-inset-right, 0px));
    bottom: max(var(--q-dock-edge), env(safe-area-inset-bottom, 0px));
    left: auto;
    top: auto;
    z-index: 1200;
    min-width: var(--q-touch);
    min-height: var(--q-touch);
  }

  /* Ops Smart Assistant: opposite corner from the Service Desk FAB. */
  body.workspace-body .sa-root {
    right: auto;
    left: max(var(--q-dock-edge), env(safe-area-inset-left, 0px));
    bottom: max(var(--q-dock-edge), env(safe-area-inset-bottom, 0px));
    z-index: 80;
  }

  body.workspace-body .sa-chip,
  body.workspace-body .sa-close,
  body.workspace-body .sa-send,
  body.workspace-body .sa-attach,
  body.workspace-body .sa-yes,
  body.workspace-body .sa-no {
    min-width: var(--q-touch);
    min-height: var(--q-touch);
  }

  /* Demo lesson dock: full width above the FAB, never in the same corner. */
  .q-demo-dock,
  body.institution-portal-page .q-demo-dock,
  body.workspace-body .q-demo-dock {
    left: var(--q-dock-edge);
    right: var(--q-dock-edge);
    bottom: calc(var(--q-fab-slot) + var(--q-dock-edge));
    max-width: none;
    z-index: 90;
  }

  .q-audio-mute-dock,
  body.workspace-body .q-audio-mute-dock {
    right: max(var(--q-dock-edge), env(safe-area-inset-right, 0px));
    bottom: calc(var(--q-fab-slot) + var(--q-dock-edge));
    z-index: 85;
  }

  body:has(.q-demo-dock) .q-audio-mute-dock {
    left: max(var(--q-dock-edge), env(safe-area-inset-left, 0px));
    right: auto;
  }

  .q-nav-overflow-panel,
  .inst-nav-more-panel,
  .pn-nav-more-panel {
    position: static;
    max-height: calc(100dvh - var(--q-header-offset) - var(--q-fab-slot) - 24px);
    overflow-y: auto;
    z-index: 40;
    padding-bottom: 0.85rem;
  }

  body.institution-portal-page .su-page,
  body.workspace-body .qo-page,
  body.workspace-body .workspace-content {
    padding-bottom: calc(var(--q-fab-slot) + 28px);
  }

  .qo-module-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--q-touch);
    min-width: var(--q-touch);
  }
}