/* Exordium Learning v6.47.0 — Commercial Responsive Foundation
   ========================================================================
   ONE AUTHORITATIVE RESPONSIVE SYSTEM

   This stylesheet owns application chrome and cross-module responsive rules.
   app.css owns domain/component appearance only. Do not reintroduce shell,
   sidebar, topbar, module-switcher, account-menu, or root overflow geometry
   into app.css.

   Supported layout ranges (CSS viewport width, not physical device model):
     >= 1280px   Standard desktop — labelled 264px navigation
     1024-1279px Compact desktop / landscape — 76px navigation rail
     <= 1023px   Tablet / phone — off-canvas navigation drawer
     <= 639px    Phone composition — compact app bar and mobile labels

   Architecture principles:
   1. Grid owns desktop shell geometry. No fixed-sidebar compensation math.
   2. Component adaptation uses the exordium-content query container.
   3. Desktop root scrolling is bounded deliberately; content overflow is never repaired by clipping and is release-gated by client geometry.
   4. Only declared two-dimensional surfaces own horizontal scrolling.
   5. Normal UI must reflow to 320 CSS px and tolerate text-spacing overrides.
   6. Touch-first controls target 44x44 CSS px where practical.
   ======================================================================== */

:root {
  --layout-nav-wide: 264px;
  --layout-nav-rail: 76px;
  --layout-content-gutter: clamp(18px, 2.2vw, 34px);
  --layout-mobile-gutter: 14px;
  --layout-touch-target: 44px;
  --layout-drawer-max: 340px;
  --layout-header-z: 70;
  --layout-nav-z: 100;
  --layout-overlay-z: 90;
}

/* ----- Root contract ---------------------------------------------------- */
html {
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body,
#app {
  min-width: 0;
  max-width: 100%;
}
body {
  min-width: 320px;
}

/* Root boxes intentionally keep their natural auto inline size. Explicit
   width:100% on the root chain can be measured against the nominal viewport
   rather than the scrollbar-reduced client area on some desktop browsers. */
html,
body,
#app {
  overflow-x: visible;
}

/* ----- Application shell: standard desktop ----------------------------- */
.app-shell.shell-v644 {
  position: relative;
  display: grid;
  grid-template-columns: var(--layout-nav-wide) minmax(0, 1fr);
  align-items: start;
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.shell-v644 > .sidebar {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: var(--layout-nav-z);
  align-self: start;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 22px 16px;
  color: var(--navy-ink, #fff);
  background: var(--navy);
  border-right: 4px solid var(--red);
  overflow: hidden;
}
.shell-v644 > .sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  pointer-events: none;
  background: rgba(255,255,255,.04);
}

.shell-v644 .brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 0 0 18px;
}
.shell-v644 .brand > div:last-child {
  min-width: 0;
}
.shell-v644 .brand > div:last-child strong,
.shell-v644 .brand > div:last-child span {
  display: block;
}
.shell-v644 .brand > div:last-child strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-v644 .brand > div:last-child span {
  margin-top: 2px;
  color: #c9dae6;
  font-size: .8rem;
}
.shell-v644 .brand:has(.brand-logo.full) > div:last-child {
  display: none;
}
.shell-v644 .brand-logo.compact {
  display: none;
}

.shell-v644 .nav-sections {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding-right: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.shell-v644 .nav-section {
  display: grid;
  gap: 4px;
}
.shell-v644 .nav-section-direct {
  display: grid;
  gap: 4px;
  margin-bottom: 2px;
}
.shell-v644 .nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  color: #aebfcb;
  background: transparent;
  text-align: left;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .08em;
  font-weight: 800;
}
.shell-v644 .nav-section-toggle:hover,
.shell-v644 .nav-section-toggle:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.shell-v644 .nav-section-toggle i {
  font-style: normal;
  font-size: 1rem;
  transition: transform .15s ease;
}
.shell-v644 .nav-section.open .nav-section-toggle i {
  transform: rotate(180deg);
}
.shell-v644 .nav-section-items {
  display: none;
  gap: 4px;
  padding-left: 4px;
}
.shell-v644 .nav-section.open .nav-section-items,
.shell-v644 .nav-section-direct .nav-section-items {
  display: grid;
}
.shell-v644 .nav-item-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 26px;
  gap: 4px;
  align-items: center;
  min-width: 0;
}
.shell-v644 .sidebar .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  color: #cfdee8;
  background: transparent;
  text-align: left;
  font-weight: 650;
}
.shell-v644 .sidebar .nav-item:hover,
.shell-v644 .sidebar .nav-item.active {
  color: #fff;
  background: rgba(255,255,255,.10);
}
.shell-v644 .sidebar .nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--red);
}
.shell-v644 .nav-item-leading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}
.shell-v644 .nav-item-leading > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-v644 .sidebar nav b {
  position: static;
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--accent-ink, #fff);
  background: var(--red);
  text-align: center;
  font-size: .76rem;
}
.shell-v644 .sidebar .nav-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  color: #eaf1f5;
  background: rgba(255,255,255,.08);
  box-shadow: none;
}
.shell-v644 .sidebar .nav-info:hover,
.shell-v644 .sidebar .nav-info:focus-visible {
  border-color: #fff;
  background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}

.shell-v644 .sidebar-utilities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 10px 0 3px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.shell-v644 .sidebar-utility-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 26px;
  gap: 4px;
  align-items: center;
  min-width: 0;
}
.shell-v644 .sidebar-utility-row > button[data-view] {
  width: 100%;
  min-width: 0;
}
.shell-v644 .sidebar-utilities button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  padding: 8px 7px;
  border: 0;
  border-radius: 9px;
  color: #cbd9e2;
  background: rgba(255,255,255,.06);
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
}
.shell-v644 .sidebar-utilities button:hover,
.shell-v644 .sidebar-utilities button.active {
  color: #fff;
  background: rgba(255,255,255,.13);
}
.shell-v644 .sidebar-footer {
  flex: 0 0 auto;
  display: grid;
  gap: 5px;
  min-width: 0;
  margin-top: 6px;
  padding: 10px 10px 0;
  border-top: 1px solid rgba(255,255,255,.15);
  overflow-wrap: anywhere;
}
.shell-v644 .sidebar-footer small {
  color: #bfd2df;
}
.shell-v644 .signed-in-email {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
}
.shell-v644 .powered-by-shell {
  margin-top: 7px;
  color: #aebfcd;
  font-size: .68rem;
}
.shell-v644 .powered-by-shell strong {
  color: #fff;
  font-size: inherit;
}

/* ----- Workspace -------------------------------------------------------- */
.shell-v644 > .content {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0 var(--layout-content-gutter) 50px;
  container: exordium-content / inline-size;
  overflow-x: visible;
  overflow-y: visible;
}
.shell-v644 > .content > * {
  min-width: 0;
  max-width: 100%;
}

/* ----- Header / module switcher / account ------------------------------- */
.shell-v644 .topbar {
  position: sticky;
  top: 0;
  z-index: var(--layout-header-z);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-width: 0;
  min-height: 84px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(247,249,250,.985), rgba(247,249,250,.92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.shell-v644 .topbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.shell-v644 .topbar-title > div,
.shell-v644 .topbar-actions {
  min-width: 0;
}
.shell-v644 .topbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.shell-v644 .topbar-title .eyebrow {
  color: color-mix(in srgb,var(--navy) 80%,var(--red));
}
.shell-v644 .topbar-signout {
  white-space: nowrap;
}

.shell-v644 .module-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: min(100%,1040px);
  padding: 4px;
  border: 1px solid rgba(var(--navy-rgb),.14);
  border-radius: 999px;
  background: var(--brand-primary-softer,#f3f6f9);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.shell-v644 .module-switcher::-webkit-scrollbar { display: none; }
.shell-v644 .module-switcher button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 9px 15px;
  border: 0;
  border-radius: 999px;
  color: var(--navy);
  background: transparent;
  white-space: nowrap;
  font-weight: 700;
}
.shell-v644 .module-switcher button.active {
  color: var(--navy-ink,#fff);
  background: var(--navy);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.shell-v644 .module-label-mobile { display: none; }

.shell-v644 .account-menu {
  position: relative;
  z-index: calc(var(--layout-header-z) + 1);
  max-width: 100%;
}
.shell-v644 .account-menu > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  max-width: 100%;
  padding: 5px 9px 5px 6px;
  border: 1px solid rgba(var(--navy-rgb),.16);
  border-radius: 999px;
  color: var(--navy);
  background: #fff;
  white-space: nowrap;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(var(--navy-rgb),.035);
}
.shell-v644 .account-menu > summary::-webkit-details-marker { display: none; }
.shell-v644 .account-menu[open] > summary {
  border-color: rgba(var(--navy-rgb),.28);
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb),.055);
}
.shell-v644 .account-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--navy-ink,#fff);
  background: var(--navy);
  font-size: .74rem;
  font-weight: 900;
}
.shell-v644 .account-label { font-size: .78rem; }
.shell-v644 .account-chevron { color: var(--muted); font-size: .8rem; }
.shell-v644 .account-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(300px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 12px;
  border: 1px solid rgba(var(--navy-rgb),.13);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(var(--navy-rgb),.16);
}
.shell-v644 .account-menu-identity {
  display: grid;
  gap: 2px;
  padding: 4px 5px 10px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.shell-v644 .account-menu-identity strong { font-size: .8rem; color: var(--navy); }
.shell-v644 .account-menu-identity small { font-size: .68rem; }
.shell-v644 .account-menu-links {
  display: grid;
  gap: 3px;
  padding-top: 5px;
}
.shell-v644 .account-menu-links button {
  min-height: 38px;
  padding: 8px 9px;
  border: 0;
  border-radius: 9px;
  color: var(--navy);
  background: transparent;
  text-align: left;
  font-weight: 700;
}
.shell-v644 .account-menu-links button:hover { background: var(--brand-primary-softer); }

.shell-v644 .mobile-menu-toggle,
.shell-v644 .mobile-drawer-close,
.shell-v644 .mobile-nav-backdrop {
  display: none;
}

/* ----- Overflow ownership & intrinsic-size contract --------------------- */
.shell-v644 > .content,
.shell-v644 > .content > *,
.shell-v644 > .content :where(
  main, section, article, form, fieldset, header, footer, nav,
  .stack, .grid, .form-grid,
  .panel, .nested-panel, .hero, .metric, .record-row,
  .section-heading, .button-row, .filter-actions, .data-workspace-controls,
  .workforce-program, .workforce-shell, .workforce-program-header,
  .workforce-program-actions, .workforce-plan-header,
  .workforce-dashboard-grid, .workforce-dashboard-kpis, .workforce-admin-grid,
  .workforce-filter-bar, .hours-action-grid, .hours-audit-summary,
  .gm-dashboard-grid, .gm-two-col, .gm-project-layout,
  .gm-work-toolbar, .gm-start-head, .gm-briefing-head,
  .gm-triage-intro, .gm-triage-card,
  .analytics-grid, .analytics-kpis, .analytics-bars, .analytics-bar-row,
  .analytics-panel, .renewal-list, .renewal-list > div, .exception-summary,
  .security-control-grid, .setup-step-grid, .attention-grid,
  .readiness-grid, .configured-list, .data-library-grid,
  .context-bar, .filter-panel, .saved-view-controls,
  .help-centre, .help-guide-card, .help-resource-card,
  .structure-switcher, .pay-code-field, .config-catalogue,
  .metric-drawer, .gm-drawer, .workforce-config-drawer
) {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
}
.shell-v644 > .content :where(
  .section-heading, .button-row, .filter-actions, .data-workspace-controls,
  .workforce-program-header, .workforce-plan-header,
  .workforce-dashboard-grid, .workforce-dashboard-kpis,
  .workforce-filter-bar, .hours-action-grid,
  .analytics-grid, .analytics-kpis, .analytics-bars, .analytics-bar-row,
  .renewal-list, .renewal-list > div, .exception-summary,
  .security-control-grid, .setup-step-grid, .attention-grid,
  .readiness-grid, .data-library-grid, .form-grid,
  .gm-work-toolbar, .gm-start-head, .gm-briefing-head,
  .gm-triage-intro, .gm-triage-card, .saved-view-controls,
  .topbar
) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}
.shell-v644 > .content :where(h1,h2,h3,h4,p,label,legend,small,strong) {
  overflow-wrap: anywhere;
}
.shell-v644 > .content :where(img,svg,canvas,video) {
  max-inline-size: 100%;
}
.shell-v644 > .content fieldset,
.shell-v644 > .content :where(input,select,textarea,button) {
  min-inline-size: 0;
}

.shell-v644 .mobile-scroll-hint { display: none; }

/* Explicit horizontal-scroll owners. No other normal surface should require
   page-level horizontal movement. */
.shell-v644 :where(
  .table-wrap, .data-sheet-wrap, .auto-table-scroll,
  .workspace-context-tabs, .workforce-data-nav, .data-workspace-tabs,
  .budget-workspace-tabs, .workforce-tabs, .gm-work-tabs,
  .profile-tabs, .segmented-control
) {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.shell-v644 :where(.table-wrap,.data-sheet-wrap,.auto-table-scroll) {
  scrollbar-gutter: stable;
}
.shell-v644 .auto-table-scroll > table {
  width: 100%;
  min-width: max-content;
}
.shell-v644 .table-wrap.compact-table table {
  width: 100%;
  min-width: 0;
}
.shell-v644 :where(.metric-drawer,.gm-drawer,.workforce-config-drawer) {
  inline-size: min(680px,100%);
  max-inline-size: 100%;
}

/* ----- Common component container queries ------------------------------ */
@container exordium-content (max-width: 1200px) {
  .gm-dashboard-kpis,
  .gm-dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric-grid-six,
  .analytics-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@container exordium-content (max-width: 900px) {
  .gm-dashboard-grid,
  .analytics-grid,
  .review-layout,
  .manage-layout,
  .manage-layout.wide-left,
  .assistant-layout,
  .policy-intelligence-layout,
  .policy-builder-layout,
  .repository-layout,
  .gm-project-layout,
  .gm-two-col,
  .report-builder-grid { grid-template-columns: 1fr; }
  .metric-grid,
  .gm-dashboard-kpis,
  .analytics-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .queue-list { position: static; max-height: none; }
}
@container exordium-content (max-width: 620px) {
  .metric-grid,
  .metric-grid-six,
  .analytics-grid,
  .analytics-kpis,
  .gm-dashboard-grid,
  .gm-dashboard-kpis,
  .gm-status-strip,
  .flow-list,
  .assignment-cards,
  .program-grid,
  .talk-grid,
  .quality-grid,
  .style-picker,
  .permission-grid,
  .attention-person-grid,
  .help-resource-grid,
  .security-control-grid,
  .form-grid.two,
  .form-grid.three,
  .check-grid,
  .context-bar,
  .filter-panel { grid-template-columns: 1fr; }
}

/* Header composition is driven by the actual workspace width. A constrained
   desktop gets a deliberate second row rather than squeezed/clipped controls. */
@container exordium-content (max-width: 1420px) and (min-width: 760px) {
  .shell-v644 .topbar {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 9px;
    min-height: 0;
    padding: 12px 0 10px;
  }
  .shell-v644 .topbar-title {
    grid-column: 1;
    grid-row: 1;
  }
  .shell-v644 .topbar-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .shell-v644 .module-switcher {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 14px;
  }
  .shell-v644 .module-switcher .module-label-full { display: none; }
  .shell-v644 .module-switcher .module-label-mobile { display: inline; }
  .shell-v644 .module-switcher button {
    flex: 0 0 auto;
    padding-inline: 12px;
  }
}

/* Workforce filters respond to usable workspace, not physical monitor width. */
@container exordium-content (max-width: 1450px) {
  .workforce-filter-bar { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .workforce-filter-title { grid-column: 1 / -1; }
  .wf-multi-menu {
    position: fixed;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(440px,calc(100vw - 28px));
    max-width: none;
    max-height: min(72vh,520px);
    overflow: auto;
  }
}
@container exordium-content (max-width: 900px) {
  .workforce-filter-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@container exordium-content (max-width: 580px) {
  .workforce-filter-bar { grid-template-columns: minmax(0,1fr); }
}
@container exordium-content (min-width: 1451px) {
  .workforce-filter-bar > .wf-multi-field:last-of-type .wf-multi-menu {
    left: auto;
    right: 0;
  }
}

@container exordium-content (max-width: 1160px) and (min-width: 700px) {
  .shell-v644 .workforce-program-header {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    align-items: start;
    gap: 18px;
  }
  .shell-v644 .workforce-program-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
  }
  .shell-v644 .workforce-program-actions .workforce-year-control {
    flex: 1 1 260px;
    max-width: 420px;
  }
}

/* Daily Hours is a routine operational table. It must fit common desktop
   workspaces; local horizontal scroll remains available below that range. */
@container exordium-content (max-width: 1220px) and (min-width: 900px) {
  .shell-v644 .weekly-hours-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    table-layout: fixed;
  }
  .shell-v644 .weekly-hours-grid th,
  .shell-v644 .weekly-hours-grid td {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
    overflow-wrap: anywhere;
  }
  .shell-v644 .weekly-hours-grid th:nth-child(1),
  .shell-v644 .weekly-hours-grid td:nth-child(1) { width: 16%; }
  .shell-v644 .weekly-hours-grid th:nth-child(2),
  .shell-v644 .weekly-hours-grid td:nth-child(2) { width: 9%; }
  .shell-v644 .weekly-hours-grid th:nth-child(3),
  .shell-v644 .weekly-hours-grid td:nth-child(3) { width: 8%; }
  .shell-v644 .weekly-hours-grid th:nth-child(n+4):nth-child(-n+10),
  .shell-v644 .weekly-hours-grid td:nth-child(n+4):nth-child(-n+10) { width: 7.2%; }
  .shell-v644 .weekly-hours-grid th:nth-child(11),
  .shell-v644 .weekly-hours-grid td:nth-child(11) { width: 7%; }
  .shell-v644 .weekly-hours-grid th:nth-child(12),
  .shell-v644 .weekly-hours-grid td:nth-child(12) { width: 9.6%; }
  .shell-v644 .weekly-hours-grid .compact-hours-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 4px;
    padding-right: 4px;
  }
  .shell-v644 .weekly-hours-grid thead th small { white-space: normal; }

  .shell-v644 .workforce-annual-table,
  .shell-v644 .workforce-planning-table { min-width: 900px; }
  .shell-v644 .workforce-performance-table { min-width: 1020px; }
  .shell-v644 .wage-analysis-table { min-width: 1160px; }
}

.shell-v644 .workforce-week-days-row > td {
  padding: 0 10px 14px;
  background: var(--surface);
}
.shell-v644 .workforce-week-days-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.shell-v644 .workforce-week-days-table table {
  width: 100%;
  min-width: 620px;
}
@container exordium-content (min-width: 900px) {
  .shell-v644 .workforce-week-days-table table {
    min-width: 0;
    table-layout: auto;
  }
}

/* Analytics labels may truncate on dense desktop, but must reveal meaningful
   text when the component becomes narrow. */
.shell-v644 .analytics-bars,
.shell-v644 .analytics-bar-row,
.shell-v644 .analytics-bar-row > div:first-child,
.shell-v644 .analytics-bar-row strong,
.shell-v644 .analytics-bar-row span {
  min-width: 0;
  max-width: 100%;
}
.shell-v644 .analytics-bar-row > div:first-child { width: 100%; }
@container exordium-content (max-width: 720px) {
  .analytics-bar-row > div:first-child { align-items: flex-start; }
  .analytics-bar-row strong,
  .renewal-list strong,
  .renewal-list span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .renewal-list > div {
    grid-template-columns: minmax(0,1fr) auto;
    align-items: start;
  }
  .renewal-list > div > span { grid-column: 1 / -1; }
}

/* ----- Desktop viewport / scrollbar ownership --------------------------
   Desktop Exordium is a bounded application shell. The workspace owns the
   vertical scrollbar, so its client width is the real usable width and a
   browser/root scrollbar cannot cover the application edge. Mobile keeps
   normal document scrolling for native browser behaviour. */
@media (min-width: 1024px) {
  html,
  body,
  #app {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }
  .app-shell.shell-v644 {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .shell-v644 > .sidebar {
    height: 100vh;
    height: 100dvh;
  }
  .shell-v644 > .content {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }
}

/* ----- Compact desktop: 1024–1279 -------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --layout-content-gutter: clamp(16px,1.6vw,24px); }

  .app-shell.shell-v644 {
    grid-template-columns: var(--layout-nav-rail) minmax(0,1fr);
  }
  .shell-v644 > .sidebar {
    padding: 16px 10px 14px;
  }
  .shell-v644 .brand {
    justify-content: center;
    min-height: 54px;
    margin: 0 0 10px;
    padding: 3px 0 13px;
  }
  .shell-v644 .brand > div:last-child,
  .shell-v644 .brand-logo.full { display: none; }
  .shell-v644 .brand-logo.compact,
  .shell-v644 .platform-brand-mark {
    display: block;
    width: 44px;
    max-width: 44px;
    height: 44px;
    max-height: 44px;
  }
  .shell-v644 .brand-mark {
    width: 44px;
    height: 44px;
    margin: auto;
  }
  .shell-v644 .nav-section { margin: 2px 0 4px; }
  .shell-v644 .nav-section-toggle { display: none; }
  .shell-v644 .nav-section-items {
    display: grid;
    gap: 4px;
    padding: 0;
  }
  .shell-v644 .nav-item-row {
    display: block;
    width: 100%;
  }
  .shell-v644 .sidebar .nav-item {
    width: 52px;
    height: 48px;
    min-height: 48px;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
  }
  .shell-v644 .sidebar .nav-item.active::before {
    top: 9px;
    bottom: 9px;
  }
  .shell-v644 .nav-item-leading {
    justify-content: center;
    gap: 0;
  }
  .shell-v644 .nav-item-leading > span:last-child { display: none; }
  .shell-v644 .sidebar .nav-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
    opacity: .94;
  }
  .shell-v644 .sidebar nav b {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    padding: 1px 4px;
    font-size: .58rem;
    line-height: 1.35;
  }
  .shell-v644 .sidebar .nav-info { display: none; }
  .shell-v644 .sidebar-utilities {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-top: 9px;
  }
  .shell-v644 .sidebar-utility-row { display: block; }
  .shell-v644 .sidebar-utilities button {
    width: 52px;
    height: 46px;
    min-height: 46px;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
  }
  .shell-v644 .sidebar-utilities .nav-item-leading {
    justify-content: center;
    gap: 0;
  }
  .shell-v644 .sidebar-utilities .nav-item-leading > span:last-child { display: none; }
  .shell-v644 .sidebar-footer { display: none; }
}

/* ----- Tablet / phone drawer: <=1023 ----------------------------------- */
@media (max-width: 1023px) {
  body.mobile-nav-open {
    overflow: hidden;
    overscroll-behavior: none;
  }
  .app-shell.shell-v644 {
    display: block;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .shell-v644 > .content {
    display: block;
    width: 100%;
    max-width: 100%;
    padding-left: max(var(--layout-mobile-gutter),env(safe-area-inset-left,0px));
    padding-right: max(var(--layout-mobile-gutter),env(safe-area-inset-right,0px));
    padding-bottom: max(42px,env(safe-area-inset-bottom,0px));
  }
  .shell-v644 > .sidebar {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--layout-nav-z);
    width: min(var(--layout-drawer-max),88vw);
    max-width: calc(100vw - max(12px,env(safe-area-inset-right,0px)));
    height: 100vh;
    height: 100dvh;
    padding-top: max(18px,env(safe-area-inset-top,0px));
    padding-right: 16px;
    padding-bottom: max(18px,env(safe-area-inset-bottom,0px));
    padding-left: max(16px,env(safe-area-inset-left,0px));
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 0 24px 60px rgba(9,24,40,.28);
    border-right: 4px solid var(--red);
  }
  .shell-v644 > .sidebar.mobile-menu-open { transform: translateX(0); }
  .shell-v644 > .sidebar .brand {
    width: calc(100% - 42px);
    max-width: calc(100% - 42px);
    margin: 0 42px 14px 0;
  }
  .shell-v644 > .sidebar .brand > div:last-child { display: block; }
  .shell-v644 > .sidebar .brand-logo.full { display: block; }
  .shell-v644 > .sidebar .brand-logo.compact { display: none; }
  .shell-v644 > .sidebar .nav-section-toggle { display: flex; }
  .shell-v644 > .sidebar .nav-item-row {
    grid-template-columns: minmax(0,1fr) 26px;
  }
  .shell-v644 > .sidebar .nav-item {
    width: 100%;
    min-width: 0;
  }
  .shell-v644 > .sidebar .nav-item-leading {
    justify-content: flex-start;
    gap: 10px;
  }
  .shell-v644 > .sidebar .nav-item-leading > span:last-child { display: inline; }
  .shell-v644 > .sidebar .nav-info { display: inline-flex; }
  .shell-v644 > .sidebar .sidebar-utilities { grid-template-columns: 1fr; }
  .shell-v644 > .sidebar .sidebar-utility-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 26px;
  }
  .shell-v644 > .sidebar .sidebar-utilities button {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 7px;
    justify-content: flex-start;
  }
  .shell-v644 > .sidebar .sidebar-utilities .nav-item-leading {
    justify-content: flex-start;
    gap: 8px;
  }
  .shell-v644 > .sidebar .sidebar-utilities .nav-item-leading > span:last-child { display: inline; }
  .shell-v644 > .sidebar .sidebar-footer { display: grid; }

  .shell-v644 .mobile-drawer-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: max(12px,env(safe-area-inset-top,0px));
    right: 12px;
    width: var(--layout-touch-target);
    min-width: var(--layout-touch-target);
    height: var(--layout-touch-target);
    min-height: var(--layout-touch-target);
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    background: rgba(255,255,255,.08);
    font-size: 1.5rem;
    line-height: 1;
  }
  .shell-v644 .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--layout-overlay-z);
    border: 0;
    background: rgba(11,24,38,.48);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .shell-v644 .mobile-nav-backdrop[hidden] { display: none; }

  .shell-v644 .topbar {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 8px 10px;
    min-height: 0;
    padding: 10px 0 9px;
  }
  .shell-v644 .topbar-title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .shell-v644 .topbar-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .shell-v644 .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: var(--layout-touch-target);
    padding: 9px 11px;
    border: 1px solid #b9c8d2;
    border-radius: 10px;
    color: var(--navy);
    background: #fff;
    font-weight: 800;
  }
  .shell-v644 .module-switcher {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0,1fr);
    gap: 4px;
    width: 100%;
    max-width: 100%;
    padding: 4px;
    border-radius: 13px;
    overflow: visible;
  }
  .shell-v644 .module-switcher button {
    width: 100%;
    max-width: 100%;
    padding-inline: 9px;
    overflow: hidden;
  }
  .shell-v644 .module-switcher button > span { min-width: 0; }

  /* Touch-capable tablet controls. */
  .shell-v644 :where(button,summary,input,select,textarea) {
    touch-action: manipulation;
  }
}

.shell-v644 .context-label-mobile { display: none; }

/* ----- Phone composition: <=639 ---------------------------------------- */
@media (max-width: 639px) {
  .shell-v644 > .content {
    padding-left: max(12px,env(safe-area-inset-left,0px));
    padding-right: max(12px,env(safe-area-inset-right,0px));
    padding-bottom: max(34px,env(safe-area-inset-bottom,0px));
    font-size: 1rem;
    line-height: 1.5;
  }
  /* Phone interactions use one product-wide minimum hit height. This applies
     to semantic buttons/summary controls so small pills and text actions do
     not become sub-target controls when the desktop composition collapses. */
  .shell-v644 > .content :where(button,summary),
  .shell-v644 .topbar :where(button,summary) {
    min-height: var(--layout-touch-target);
  }
  .shell-v644 .topbar {
    position: relative;
    grid-template-columns: minmax(0,1fr) var(--layout-touch-target);
    gap: 9px 10px;
    margin-bottom: 18px;
    padding: 10px 0 12px;
  }
  .shell-v644 .topbar-title {
    display: grid;
    grid-template-columns: var(--layout-touch-target) minmax(0,1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .shell-v644 .mobile-menu-toggle {
    width: var(--layout-touch-target);
    min-width: var(--layout-touch-target);
    height: var(--layout-touch-target);
    min-height: var(--layout-touch-target);
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(21,37,61,.05);
  }
  .shell-v644 .mobile-menu-toggle b { display: none; }
  .shell-v644 .topbar-title .eyebrow { display: none; }
  .shell-v644 .topbar-title h1 {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.18rem;
    line-height: 1.22;
    letter-spacing: -.012em;
  }
  .shell-v644 .topbar-actions {
    width: var(--layout-touch-target);
    min-width: var(--layout-touch-target);
  }
  .shell-v644 .account-menu,
  .shell-v644 .account-menu summary {
    width: var(--layout-touch-target);
    min-width: var(--layout-touch-target);
    height: var(--layout-touch-target);
    min-height: var(--layout-touch-target);
  }
  .shell-v644 .account-menu summary {
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 12px;
  }
  .shell-v644 .account-label,
  .shell-v644 .account-chevron { display: none; }
  .shell-v644 .account-avatar {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }
  .shell-v644 .account-menu-panel {
    position: fixed;
    top: calc(max(10px,env(safe-area-inset-top,0px)) + 58px);
    right: max(10px,env(safe-area-inset-right,0px));
    left: auto;
    width: min(320px,calc(100vw - 20px));
    max-width: calc(100vw - 20px);
  }

  /* v6.100.2: a customer can now have many entitled modules. On phones the
     global workspace picker is a touch-friendly horizontal rail instead of an
     equal-width grid that crushes or clips module names. */
  .shell-v644 .module-switcher {
    display: flex;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    padding: 4px;
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 4px;
    box-shadow: inset 0 0 0 1px rgba(var(--navy-rgb),.04);
  }
  .shell-v644 .module-switcher .module-icon,
  .shell-v644 .module-label-full { display: none; }
  .shell-v644 .module-label-mobile { display: inline; }
  .shell-v644 .module-switcher button {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: max-content;
    min-height: var(--layout-touch-target);
    padding: 8px 12px;
    border-radius: 9px;
    overflow: visible;
    font-size: .79rem;
    line-height: 1.2;
    text-align: center;
    text-overflow: clip;
    scroll-snap-align: nearest;
  }
  .shell-v644 .module-switcher button.active {
    padding-inline: 13px;
  }

  /* Mobile type floor and flexible line boxes. */
  .shell-v644 > .content :where(p,li,label,legend) { line-height: 1.5; }
  .shell-v644 > .content :where(
    small,.muted,.audience-chip,.status,.environment,
    .analytics-metric span,.analytics-metric small,.metric-drill em,
    .first-use-strip,.workforce-year-control small,.workforce-year-control label,
    .readiness-card small,.configured-list small,.renewal-list span,.renewal-list b
  ) {
    font-size: max(.75rem,12px);
    line-height: 1.42;
  }
  .shell-v644 > .content .eyebrow {
    font-size: .75rem;
    line-height: 1.35;
    letter-spacing: .09em;
  }
  .shell-v644 > .content h2 {
    font-size: clamp(1.24rem,6vw,1.5rem);
    line-height: 1.24;
    letter-spacing: -.012em;
  }
  .shell-v644 > .content h3 { font-size: 1rem; line-height: 1.3; }
  .shell-v644 > .content :where(input,select,textarea) {
    min-height: var(--layout-touch-target);
    font-size: 16px;
    line-height: 1.35;
  }
  .shell-v644 > .content button {
    font-size: max(.82rem,13px);
    line-height: 1.25;
  }
  .shell-v644 > .content .analytics-bar-row > div:first-child {
    font-size: max(.78rem,12.5px);
    line-height: 1.4;
  }
  .shell-v644 > .content .line-chart text { font-size: 12px; }
  .shell-v644 > .content :where(.audience-chip,.status) {
    white-space: normal;
    text-align: center;
  }

  .shell-v644 .panel {
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(21,37,61,.045);
  }
  .shell-v644 .panel.compact { padding: 15px; }
  .shell-v644 .hero { padding: 18px; border-radius: 16px; }
  .shell-v644 .stack { gap: 14px; }
  .shell-v644 .gap-lg { gap: 16px; }
  .shell-v644 .section-heading {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
  }
  .shell-v644 .section-heading p { margin-bottom: 0; }
  .shell-v644 :where(.workforce-program-header,.section-heading) { align-items: stretch; }
  .shell-v644 :where(.workforce-program-actions,.section-heading > .button-row) {
    width: 100%;
    max-width: 100%;
  }
  .shell-v644 :where(.button-row,.filter-actions,.data-workspace-controls,.gm-work-controls) {
    width: 100%;
    max-width: 100%;
    gap: 8px;
  }
  .shell-v644 :where(.button-row,.filter-actions) > button {
    flex: 1 1 min(150px,100%);
  }

  /* Phone workspace navigation is a local tab strip. */
  .shell-v644 :where(
    .workspace-context-tabs,.workforce-data-nav,.data-workspace-tabs,
    .budget-workspace-tabs,.workforce-tabs,.gm-work-tabs,.profile-tabs
  ) {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 5px;
    border-radius: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .shell-v644 :where(
    .workspace-context-tabs,.workforce-data-nav,.data-workspace-tabs,
    .budget-workspace-tabs,.workforce-tabs,.gm-work-tabs,.profile-tabs
  )::-webkit-scrollbar { display: none; }
  .shell-v644 :where(
    .workspace-context-tabs,.workforce-data-nav,.data-workspace-tabs,
    .budget-workspace-tabs,.workforce-tabs,.gm-work-tabs,.profile-tabs
  ) button {
    flex: 0 0 auto;
    min-height: var(--layout-touch-target);
    padding: 9px 11px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
    font-size: .8rem;
    line-height: 1.2;
    scroll-snap-align: start;
  }
  .shell-v644 :where(
    .workspace-context-tabs,.workforce-data-nav,.data-workspace-tabs,
    .budget-workspace-tabs,.workforce-tabs,.gm-work-tabs,.profile-tabs
  ) button.active {
    border-bottom-color: var(--red);
    color: var(--navy);
    font-weight: 850;
  }

  /* Mobile text and account actions use an explicit readable/usable floor.
     12px is the minimum for secondary/readable copy; icons may remain smaller
     only when they do not convey standalone text. */
  .shell-v644 > .content :where(small,em),
  .shell-v644 .account-menu-identity small,
  .shell-v644 > .content :where(
    .workspace-context-header .section-heading p,
    .analytics-metric span,.analytics-metric.metric-drill em,
    .calendar-timeline,.readiness-score span,
    .help-module-chips span,.help-module-group-head p,.help-resource-type,
    .gm-item-kicker,.gm-item-meta,.gm-connection-state,.gm-next-action span,
    .gm-loop-list span,.gm-action-line span,.gm-cleanup-reason span,
    .gm-triage-chips span,.gm-triage-reason span,.gm-triage-change>span,
    .gm-triage-sender-rule>span,.gm-command-bar span,.gm-dashboard-kpi span,
    .gm-trend-chart span,.gm-chart-legend span,.gm-donut span,.gm-health-list span,
    .gm-source-badge,.gm-work-controls>label>span,.gm-project-kpis span,
    .gm-mailbox-permission span,.gm-source-state
  ) {
    font-size: 12px;
    line-height: 1.4;
  }
  .shell-v644 > .content .gm-dashboard-kpi small {
    font-size: 12px;
    line-height: 1.4;
  }
  /* Component rules in app.css deliberately use micro-labels on desktop. On
     phones, promote those labels to the product readability floor. These
     selectors are intentionally explicit so larger body/heading type is not
     flattened to 12px. */
  .shell-v644 .donut span,
  .shell-v644 .analytics-metric.metric-drill em,
  .shell-v644 .first-use-open strong,
  .shell-v644 .first-use-open small,
  .shell-v644 .compact-tabs button span,
  .shell-v644 .gm-work-tabs button b,
  .shell-v644 .gm-work-result-head,
  .shell-v644 .gm-work-result-head strong {
    font-size: 12px;
    line-height: 1.4;
  }
  .shell-v644 .account-menu-links button {
    min-height: var(--layout-touch-target);
  }
  .shell-v644 .account-menu-panel {
    position: fixed;
    top: max(64px, calc(env(safe-area-inset-top, 0px) + 54px));
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    width: auto;
    max-width: none;
  }

  .shell-v644 .first-use-dismiss,
  .shell-v644 .wf-month-drill {
    min-width: var(--layout-touch-target);
    min-height: var(--layout-touch-target);
  }
  .shell-v644 .first-use-dismiss {
    width: var(--layout-touch-target);
    height: var(--layout-touch-target);
    flex: 0 0 var(--layout-touch-target);
  }
  .shell-v644 .wf-month-drill {
    padding-left: 6px;
    padding-right: 6px;
  }

  .shell-v644 .workforce-context-tabs .context-label-full { display: none; }
  .shell-v644 .workforce-context-tabs .context-label-mobile { display: inline; }

  /* Dense staffing data is a two-dimensional surface on phones. Keep columns
     readable and make the table itself the scroll owner rather than squeezing
     seven operational columns into the phone canvas. */
  .shell-v644 .mobile-scroll-hint {
    display: block;
    margin: -2px 0 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
  }
  .shell-v644 .workforce-roster-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .shell-v644 .workforce-roster-table {
    min-width: 680px;
    table-layout: auto;
  }
  .shell-v644 .workforce-roster-table :where(th,td) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Very narrow time-series components own their unavoidable width locally. */
@media (max-width: 359px) {
  .shell-v644 .bar-chart {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* Coarse pointers get the enhanced target even on hybrid/large screens. */
@media (hover: none) and (pointer: coarse) {
  .shell-v644 :where(button,summary,input,select,textarea) {
    touch-action: manipulation;
  }
  .shell-v644 > .content :where(input,select,textarea) {
    min-height: var(--layout-touch-target);
  }
}

/* User text-spacing overrides must expand line boxes rather than clip content. */
.shell-v644 :where(button,summary,.status,.environment) {
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shell-v644 > .sidebar,
  .shell-v644 .nav-section-toggle i {
    transition: none;
  }
}

/* ----- v6.44 mobile polish and Command Centre Assistant ---------------- */
@media (max-width: 1023px) {
  /* Mobile navigation owns its full usable width. Do not reserve a desktop
     scrollbar gutter inside the off-canvas drawer; Safari can otherwise
     subtract it from the final info-control column. */
  .shell-v644 > .sidebar .nav-sections {
    padding-right: 0;
    scrollbar-gutter: auto;
  }
  .shell-v644 > .sidebar .nav-item-row,
  .shell-v644 > .sidebar .sidebar-utility-row {
    grid-template-columns: minmax(0,1fr) 40px;
    gap: 8px;
  }
  .shell-v644 > .sidebar .nav-info {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    justify-self: end;
    flex: 0 0 40px;
  }
}

@media (max-width: 639px) {
  /* Command Centre adds one deliberately compact assistant action beside the
     account control. The content column therefore remains flexible rather
     than assuming only one 44px action exists. */
  .shell-v644 .topbar {
    grid-template-columns: minmax(0,1fr) auto;
  }
  .shell-v644 .topbar-actions {
    width: auto;
    min-width: 0;
    gap: 7px;
  }
  .shell-v644 .command-assistant-trigger {
    width: var(--layout-touch-target);
    min-width: var(--layout-touch-target);
    height: var(--layout-touch-target);
    min-height: var(--layout-touch-target);
    padding: 0;
    border-radius: 12px;
  }
  .shell-v644 .command-assistant-trigger > span { display: none; }
  .shell-v644 .command-assistant-trigger-icon {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }

  /* Mobile analytics cards are vertical information blocks. Explicit grid
     composition prevents Safari from compressing label/value/note/action into
     one line when a button participates in surrounding flex/grid layouts. */
  .shell-v644 .analytics-metric,
  .shell-v644 .interactive-metric {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    align-content: start;
    justify-items: start;
    gap: 5px;
    min-height: 0;
    padding: 16px;
    text-align: left;
  }
  .shell-v644 .analytics-metric > :where(span,strong,small,em) {
    display: block;
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    white-space: normal;
  }
  .shell-v644 .interactive-metric > em {
    margin-top: 7px;
    color: var(--red-dark);
    opacity: 1;
  }
  /* Metric drill actions must participate in the phone card's grid flow.
     Desktop positions Inspect at the card edge; leaving that absolute on a
     one-column phone card can paint it over the value. */
  .shell-v644 .analytics-metric.metric-drill {
    padding-bottom: 16px;
  }
  .shell-v644 .analytics-metric.metric-drill > em {
    position: static;
    left: auto;
    bottom: auto;
    margin-top: 6px;
    align-self: start;
    justify-self: start;
  }

  /* Security controls become concise status rows on phones instead of tall
     decorative tiles. All copy uses normal high-contrast application colors. */
  .shell-v644 .security-analytics {
    gap: 14px;
    background-color: #fff;
    background-image: linear-gradient(180deg,#fff,#f7f9fa);
  }
  .shell-v644 .security-control-grid { gap: 8px; }
  .shell-v644 .security-control-grid article {
    grid-template-columns: 36px minmax(0,1fr);
    grid-template-rows: auto auto;
    min-height: 64px;
    padding: 10px 12px;
  }
  .shell-v644 .security-check {
    width: 32px;
    height: 32px;
  }
  .shell-v644 .security-foot {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  /* The assistant becomes a dedicated mobile sheet only while open. */
  .command-assistant-scrim {
    opacity: 1;
    pointer-events: auto;
    background: rgba(9,22,38,.34);
  }
  .command-assistant-drawer {
    top: max(8px,env(safe-area-inset-top,0px));
    right: max(8px,env(safe-area-inset-right,0px));
    bottom: max(8px,env(safe-area-inset-bottom,0px));
    left: max(8px,env(safe-area-inset-left,0px));
    width: auto;
    max-width: none;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 70px rgba(9,22,38,.28);
  }
  .command-assistant-head {
    padding: 14px 14px 11px;
  }
  .command-assistant-head p:not(.eyebrow) { display: none; }
  .command-assistant-close {
    width: var(--layout-touch-target);
    min-width: var(--layout-touch-target);
    height: var(--layout-touch-target);
    min-height: var(--layout-touch-target);
  }
  .command-assistant-body {
    grid-template-rows: auto minmax(150px,1fr) auto;
    gap: 10px;
    padding: 12px 14px max(14px,env(safe-area-inset-bottom,0px));
  }
  .command-assistant-body .gm-suggestion-row {
    margin-inline: -2px;
    padding: 2px 2px 5px;
  }
  .command-assistant-body .gm-suggestion-row button {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .command-assistant-chat {
    min-height: 150px;
    padding: 10px;
  }
  .command-assistant-body .gm-assistant-form {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "question question" "attach send";
    align-items: stretch;
  }
  .command-assistant-body .gm-assistant-form textarea {
    min-height: 84px;
    max-height: 180px;
  }
  .command-assistant-body .gm-assistant-form button {
    width: auto;
    min-width: 64px;
  }
}

@media (max-width: 380px) {
  .command-assistant-body .gm-assistant-form {
    grid-template-columns: 1fr;
    grid-template-areas: "question" "attach" "send";
  }
  .command-assistant-body .gm-assistant-form button { width: 100%; }
}

/* v6.73.0 — Adaptive intelligence / detail surfaces
   On phone-size viewports, cross-module detail drawers become true focused workspaces rather
   than narrow desktop drawers with a distracting strip of the underlying page visible. This
   applies consistently to Command Centre, Workforce and shared metric detail surfaces. */
.shell-v644 > .content :where(.gm-connected-context,.gm-context-details-grid,.exordium-evidence-surface) {
  min-inline-size: 0;
  max-inline-size: 100%;
}
@media (max-width: 639px) {
  .shell-v644 :where(.metric-drawer,.gm-drawer,.workforce-config-drawer) {
    inline-size: 100vw;
    width: 100vw;
    max-inline-size: 100vw;
    max-width: 100vw;
    block-size: 100dvh;
    height: 100dvh;
  }
}

/* v6.75.0 — Sitewide adaptive-UX hardening.
   Small screens reflow controls instead of shrinking/overlapping them. Keep these rules
   conservative and shared so future modules inherit the same mobile contract. */
.shell-v644 > .content :where(.workspace-section-nav,.button-row,.filter-actions,.data-workspace-controls,.gm-sync-action-group,.section-actions,.toolbar-actions) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}
.shell-v644 > .content :where(.workspace-section-nav,.button-row,.filter-actions,.data-workspace-controls,.gm-sync-action-group,.section-actions,.toolbar-actions) :where(span,strong,small,b) {
  overflow-wrap: anywhere;
}
@media (max-width: 639px) {
  .shell-v644 > .content :where(.button-row,.filter-actions,.data-workspace-controls,.gm-sync-action-group,.section-actions,.toolbar-actions) {
    flex-wrap: wrap;
  }
  .shell-v644 > .content :where(.button-row,.filter-actions,.data-workspace-controls,.gm-sync-action-group,.section-actions,.toolbar-actions) > :where(button,a,label,select,input) {
    min-inline-size: 0;
  }
  .shell-v644 .first-use-open > span:last-child {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }
  .shell-v644 .first-use-open strong,
  .shell-v644 .first-use-open small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .shell-v644 > .content :where(.section-heading,.gm-drawer-header,.metric-drawer-head,.drawer-head) {
    min-inline-size: 0;
  }
  .shell-v644 > .content :where(.section-heading,.gm-drawer-header,.metric-drawer-head,.drawer-head) > * {
    min-inline-size: 0;
  }
  .shell-v644 > .content :where(.section-heading,.gm-drawer-header,.metric-drawer-head,.drawer-head) :where(h1,h2,h3,p,strong,span,small) {
    overflow-wrap: anywhere;
  }
  .shell-v644 > .content :where(.tag-row,.chip-row,.badge-row,.status-row) {
    flex-wrap: wrap;
  }
}

/* v6.87.0 — Mobile app-shell anchoring and local overflow ownership */
@media (max-width:1023px){
  html,body,#app{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
  .app-shell.shell-v644,.shell-v644>.content,.shell-v644 .workforce-shell,.shell-v644 .workforce-program{min-width:0;max-width:100%;overflow-x:clip}
  .shell-v644 :where(.table-wrap,.data-sheet-wrap,.auto-table-scroll,.workspace-context-tabs,.workforce-tabs,.workforce-data-nav,.budget-workspace-tabs,.data-workspace-tabs){overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .shell-v644 :where(.table-wrap,.data-sheet-wrap,.auto-table-scroll){max-width:100%;touch-action:pan-x pan-y}
}
@media (max-width:639px){
  .shell-v644>.content{overflow-x:clip}
  .shell-v644 :where(.panel,.hero,.workforce-program-header,.workforce-filter-panel,.workforce-filter-bar,.data-workspace-controls,.section-heading){min-width:0;max-width:100%}
  .shell-v644 :where(.workspace-context-tabs,.workforce-tabs,.workforce-data-nav,.budget-workspace-tabs,.data-workspace-tabs){touch-action:pan-x pan-y}
}
\n\n/* v6.102.4 — module navigation must never wrap into an accidental second line.\n   Compact labels preserve the entire workspace set; horizontal scrolling remains\n   the safe overflow behavior for unusually narrow or heavily entitled layouts. */\n@media (min-width:640px) and (max-width:1279px){\n  .shell-v644 .module-switcher{display:flex;grid-auto-flow:initial;grid-auto-columns:initial;justify-content:flex-start;flex-wrap:nowrap;gap:5px;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain}\n  .shell-v644 .module-switcher::-webkit-scrollbar{display:none}\n  .shell-v644 .module-switcher .module-label-full{display:none}\n  .shell-v644 .module-switcher .module-label-mobile{display:inline}\n  .shell-v644 .module-switcher button{flex:0 0 auto;width:auto;max-width:none;min-width:max-content;padding:8px 11px}\n}\n@media (min-width:1280px){\n  .shell-v644 .nav-item-leading>span:last-child{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}\n  .shell-v644 .sidebar .nav-item{height:auto;min-height:46px}\n}\n

/* v6.119.0 mobile operating-density pass */
@media (max-width:639px){
  .shell-v644 .content{padding-top:12px}.shell-v644 .stack.gap-lg{gap:12px}.shell-v644 .panel,.shell-v644 .hero{padding:14px}.shell-v644 .section-heading{margin-bottom:10px}.shell-v644 .section-heading p,.shell-v644 .hero p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.shell-v644 .eyebrow{margin-bottom:3px}.shell-v644 .dashboard-visual-kpis,.shell-v644 .workforce-kpis,.shell-v644 .overview-status-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.shell-v644 .dashboard-visual-card,.shell-v644 .workforce-kpis>*,.shell-v644 .overview-status-strip>article{padding:11px}.shell-v644 .filter-more>summary{min-height:44px}.shell-v644 .workspace-loading-state{min-height:160px;margin:0;padding:20px}.shell-v644 .learning-workspace-tabs{position:sticky;top:0;z-index:5;background:var(--page,#f5f7fa);padding-block:4px;overflow-x:auto;flex-wrap:nowrap}.shell-v644 .learning-workspace-tabs button{flex:0 0 auto}.shell-v644 .learning-page-heading{gap:10px}.shell-v644 .learning-page-heading>div>p{-webkit-line-clamp:2}.shell-v644 .button-row{gap:8px}
}

@media (max-width: 760px){
  .purchasing-decision-strip{grid-template-columns:1fr}
  .purchasing-decision-strip>div{padding:10px 12px}
  .progressive-help{margin-top:9px;padding-top:8px}
  .progressive-help p{font-size:.92rem}
}