/* @import must precede all rules — keep this on the first line. Tokens live in
   od-tokens.css so mobile.css can share them; cascade order is unchanged. */
@import url('od-tokens.css');

/* ===================================================================
   OCEAN DEEP — App Shell CSS
   Shared across ALL authenticated pages (layout.html + layout_app.html)

   Design tokens (:root + dark mode) now live in od-tokens.css.
   =================================================================== */

/* ── Layout shell ── */
.od-app-layout {
  display: flex;
  min-height: 100vh;
  background: hsl(var(--od-background));
  font-family: 'Manrope', sans-serif;
  color: hsl(var(--od-foreground));
  position: relative;
}

/* Strip layout_base.html wrappers when the OD shell is rendered.
   The shell manages its own height/spacing inside <main class="flex-grow-1"> +
   <div class="main-content">. The public footer + beta banner no longer
   render on OD pages (layout_app.html doesn't inherit them) so they're not
   suppressed here. */
.main-content:has(.od-app-layout) { padding: 0 !important; margin: 0 !important; }
main:has(.od-app-layout) { flex-grow: 0 !important; }

/* ── Sidebar ── */
.dash-sidebar {
  width: 256px;
  background: hsl(var(--od-sidebar-bg));
  color: hsl(var(--od-sidebar-fg));
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 1040;
  transition: width 0.25s ease, transform 0.25s ease;
}

/* Collapsed: sidebar shrinks to an icon-only rail (desktop side-mode).
   Labels, chevrons, sub-menus, and footer text hide; icons stay so the
   user can still navigate. Mobile rules override this lower down. */
.od-app-layout.od-collapsed .dash-sidebar {
  width: 68px;
}
.od-app-layout.od-collapsed .od-app-main {
  margin-left: 0;
}
/* Collapse tab follows the rail edge */
.od-app-layout.od-collapsed .od-collapse-tab {
  left: 68px;
}
.od-app-layout.od-collapsed .od-collapse-tab .bi-chevron-left { display: none; }
.od-app-layout.od-collapsed .od-collapse-tab .bi-chevron-right { display: inline; }

/* ── Collapsed-rail content rules ── */
/* Brand: hide the wordmark text, keep the icon centred */
.od-app-layout.od-collapsed .dash-sidebar-brand {
  padding: 20px 0 16px;
  justify-content: center;
  font-size: 0; /* hide text node */
}
.od-app-layout.od-collapsed .dash-sidebar-brand > i {
  font-size: 1.4rem;
  margin: 0 !important;
}

/* Top-level nav items: centre the icon, hide the label */
.od-app-layout.od-collapsed .dash-nav-item {
  justify-content: center;
  padding: 10px 0;
  margin: 1px 8px;
  gap: 0;
}
.od-app-layout.od-collapsed .dash-nav-item > span { display: none; }
.od-app-layout.od-collapsed .dash-nav-item.active::before {
  left: -8px;
}

/* Flattened nav in collapsed rail: hide the group-header caption entirely
   (including its decorative pseudo-element rules); the sub-links ARE the
   prominent nav items now and remain visible as icon-only pills. */
.od-app-layout.od-collapsed .dash-nav-group-btn { display: none !important; }
.od-app-layout.od-collapsed .dash-nav-group-btn::before,
.od-app-layout.od-collapsed .dash-nav-group-btn::after { display: none; }

/* "Teacher view" divider: separates the admin sections (pinned at top) from the
   teacher-facing sections an admin can preview below. */
.dash-nav-teacherview-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0.35rem;
  padding: 0.35rem 0.85rem 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--od-sidebar-fg) / 0.55);
  border-top: 1px solid hsl(var(--od-sidebar-border));
}
.dash-nav-teacherview-label i { font-size: 0.8rem; }
.od-app-layout.od-collapsed .dash-nav-teacherview-label span { display: none; }
.od-app-layout.od-collapsed .dash-nav-teacherview-label {
  justify-content: center; padding-inline: 0; border-top-color: transparent;
}

.od-app-layout.od-collapsed .dash-nav-sub {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}
.od-app-layout.od-collapsed .dash-nav-sub a {
  justify-content: center;
  padding: 10px 0;
  width: calc(100% - 16px);
  margin: 1px 8px;
  gap: 0;
  box-shadow: none;
}
.od-app-layout.od-collapsed .dash-nav-sub a > span:not(.nav-icon) { display: none !important; }
.od-app-layout.od-collapsed .dash-nav-sub a > i { font-size: 1.15rem; }
.od-app-layout.od-collapsed .dash-nav-sub a > .nav-icon svg { width: 1.15rem; height: 1.15rem; }

/* Today pill in collapsed rail: icon only, centered, no label/accent bar.
   Reduced top margin to match the icon gap between all other items. */
.od-app-layout.od-collapsed .dash-nav-today {
  justify-content: center;
  padding: 10px 0;
  width: calc(100% - 16px);
  margin: 1px 8px;
  gap: 0;
  box-shadow: none;
}
.od-app-layout.od-collapsed .dash-nav-today > span:not(.nav-icon) { display: none !important; }
.od-app-layout.od-collapsed .dash-nav-today > i { font-size: 1.2rem; }
.od-app-layout.od-collapsed .dash-nav-today > .nav-icon svg { width: 1.2rem; height: 1.2rem; }

/* Locked groups still show a single icon in the rail */
.od-app-layout.od-collapsed .dash-nav-group-locked .dash-nav-group-btn {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  width: calc(100% - 16px);
  margin: 1px 8px;
  gap: 0;
}
.od-app-layout.od-collapsed .dash-nav-group-locked .dash-nav-group-btn > span,
.od-app-layout.od-collapsed .dash-nav-group-locked .dash-nav-group-btn .dash-chevron,
.od-app-layout.od-collapsed .dash-nav-group-locked .dash-nav-group-btn .dash-lock-icon {
  display: none;
}
/* A locked group (individual users' School) has only its single icon, so the
   rotated section label — centred at the group's vertical midpoint — lands
   right on top of the group's accent line. Reserve extra space below the icon
   in the collapsed rail so the group is tall enough for the centred label to
   clear the line. This adds to the group's flow height (unlike an absolute
   spacer), which is what actually shifts the centred ::after label down.
   Expanded layouts are untouched. */
.od-app-layout.od-collapsed .dash-nav-group-locked[data-section-label] {
  padding-bottom: 40px;
}

/* Section dividers with rotated labels in collapsed rail.
   Each .dash-nav-group gets a top accent line and a vertical label to its left. */
.od-app-layout.od-collapsed .dash-nav-group[data-section-label] {
  position: relative;
  margin-top: 5px;
  padding-top: 5px;
}
/* Accent separator line */
.od-app-layout.od-collapsed .dash-nav-group[data-section-label]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--od-ocean-mint) / 0.5) 30%,
    hsl(var(--od-ocean-mint) / 0.5) 70%,
    transparent
  );
}
/* Rotated section label: sits just left of the icon column */
.od-app-layout.od-collapsed .dash-nav-group[data-section-label]::after {
  content: attr(data-section-label);
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  transform-origin: center center;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--od-ocean-mint) / 0.7);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

/* Footer: collapse to icon-sized strip; hide name/role labels */
.od-app-layout.od-collapsed .dash-sidebar-footer {
  align-items: center;
  padding: 8px 0;
}
.od-app-layout.od-collapsed .dash-sidebar-footer .dash-ctrl-btn {
  width: auto;
  padding: 6px;
  text-align: center;
}
.od-app-layout.od-collapsed .dash-sidebar-footer .dash-ctrl-btn > *:not(.dash-avatar-sm):not(i) {
  display: none;
}
.od-app-layout.od-collapsed .dash-sidebar-footer .od-account-pill { display: none; }
.od-app-layout.od-collapsed .dash-sidebar-footer .dash-notif-dot {
  top: 4px;
  right: 4px;
}

/* Collapsed rail: profile dropdown opens to the right, anchored near the
   bottom of the viewport so it isn't clipped by the 64px rail. */
.od-app-layout.od-collapsed #sidebarProfileWrap .dropdown-menu {
  position: fixed !important;
  bottom: 12px !important;
  top: auto !important;
  left: 76px !important;
  right: auto !important;
  transform: none !important;
}

/* Tooltip-on-hover: JS-driven fixed-position pill that escapes the sticky rail */
#od-rail-tooltip {
  position: fixed;
  padding: 4px 10px;
  background: hsl(var(--od-sidebar-bg));
  color: #fff;
  font-size: 0.8rem;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
}
#od-rail-tooltip.visible { opacity: 1; }

/* Side mode: left-wrapper is a transparent pass-through block */
.dash-sidebar-left {
  display: contents;
}

.dash-sidebar-brand {
  padding: 20px 20px 16px;
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  border-bottom: 1px solid hsl(var(--od-sidebar-border));
  white-space: nowrap;
}

.dash-sidebar-nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 1px 12px;
  color: hsl(var(--od-sidebar-fg));
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.15s;
  border-radius: 0.5rem;
  position: relative;
}
.dash-nav-item > i { color: hsl(var(--od-ocean-mint)); font-size: 1rem; }
.dash-nav-item:hover { background: hsl(var(--od-sidebar-accent)); color: #fff; text-decoration: none; }
.dash-nav-item.active { background: hsl(var(--od-sidebar-accent) / 0.9); color: #fff; font-weight: 600; }
.dash-nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 9999px 9999px 0;
  background: hsl(var(--od-ocean-mint));
  box-shadow: 0 0 0 1px hsl(var(--od-ocean-mint) / 0.4);
}

/* Pinned Today entry sits above the groups with a small separator */
.dash-nav-pinned {
  margin-bottom: 8px !important;
  border-bottom: 1px solid hsl(var(--od-sidebar-border));
  border-radius: 0 !important;
  padding-bottom: 14px !important;
}
.dash-nav-pinned.active { background: transparent !important; color: #fff; font-weight: 600; }
.dash-nav-pinned.active > i { color: hsl(var(--od-ocean-mint)); }

.dash-nav-group { margin-bottom: 8px; }
/* Flattened sidebar: group buttons demoted to small CENTERED section
   headings with mint accent rules either side (non-interactive).
   The pseudo-elements draw the horizontal lines flanking the label. */
.dash-nav-group-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 24px);
  margin: 10px 12px 6px;
  padding: 2px 0;
  background: none;
  border: none;
  color: hsl(var(--od-ocean-mint));
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: default;
  transition: none;
  text-align: center;
  justify-content: center;
  border-radius: 0;
}
.dash-nav-group-btn::before,
.dash-nav-group-btn::after {
  content: '';
  flex: 1;
  height: 1px;
  background: hsl(var(--od-ocean-mint) / 0.35);
}
.dash-nav-group-btn:hover { background: none; color: hsl(var(--od-ocean-mint)); }
.dash-nav-group-btn > i:first-child { color: hsl(var(--od-ocean-mint)); font-size: 0.85rem; flex-shrink: 0; }
.dash-nav-group-btn > span { flex-shrink: 0; }
.dash-chevron { margin-left: auto; font-size: 0.7rem; transition: transform 0.2s; }
.dash-nav-group.open .dash-chevron { transform: rotate(180deg); }

.dash-nav-sub { display: flex; flex-direction: column; gap: 1px; }
.dash-nav-group.open .dash-nav-sub { max-height: none; }
.dash-nav-sub a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  margin: 0 12px;
  color: hsl(var(--od-sidebar-fg));
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  border-radius: 0.5rem;
  opacity: 1;
}
.dash-nav-sub a:hover { background: hsl(var(--od-sidebar-accent)); color: #fff; }
.dash-nav-sub a.active {
  color: #fff;
  font-weight: 600;
  background: hsl(var(--od-ocean-teal) / 0.85);
  box-shadow: inset 4px 0 0 hsl(var(--od-ocean-mint));
}
.dash-nav-sub a.active > i { color: #fff; }
.dash-nav-sub a > i { font-size: 1.05rem; color: hsl(var(--od-sidebar-fg) / 0.85); }

/* Custom SVG nav icons */
.nav-icon { display: inline-flex; align-items: center; }
.dash-nav-today > .nav-icon svg { width: 1.05rem; height: 1.05rem; color: hsl(var(--od-ocean-mint)); }
.dash-nav-today.active > .nav-icon svg { color: #fff; }
.dash-nav-sub a > .nav-icon svg { width: 1.05rem; height: 1.05rem; color: hsl(var(--od-sidebar-fg) / 0.85); }
.dash-nav-sub a.active > .nav-icon svg { color: #fff; }
.dash-nav-sub a:hover > .nav-icon svg { color: #fff; }

/* Sidebar footer: always flex so top-mode override works */
.dash-sidebar-footer {
  display: flex;
  flex-direction: column;
  border-top: 1px solid hsl(var(--od-sidebar-border));
  padding: 8px 0;
}

/* ── Compact sidebar for school accounts (nav_lock_side → .od-compact-nav) ──
   Tightens the expanded side-nav so a longer nav (with the Department section)
   fits on screen at once. Scoped with :not(.od-collapsed) so it never fights the
   collapsed icon rail (which is already compact) or top mode (school accounts are
   locked to side, so they never reach top mode anyway). */
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-sidebar-nav { padding: 4px 0; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-nav-group { margin-bottom: 1px; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-nav-group-btn { margin: 4px 12px 2px; font-size: 0.62rem; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-nav-group-btn > i:first-child { font-size: 0.75rem; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-nav-sub { gap: 0; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-nav-sub a { padding: 3px 10px; gap: 8px; font-size: 0.78rem; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-nav-sub a > i { font-size: 0.85rem; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-nav-sub a > .nav-icon svg { width: 0.85rem; height: 0.85rem; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-nav-item { padding: 5px 12px; font-size: 0.8rem; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-nav-item > i { font-size: 0.9rem; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-nav-today > .nav-icon svg { width: 0.9rem; height: 0.9rem; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-nav-pinned { margin-bottom: 2px !important; padding-bottom: 6px !important; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-sidebar-brand { padding: 10px 20px 8px; font-size: 0.95rem; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-sidebar-footer { padding: 2px 0; }
.od-app-layout.od-compact-nav:not(.od-collapsed) .dash-sidebar-footer .dash-ctrl-btn { padding: 4px 12px; margin: 1px 12px; }

/* Collapsed icon rail, compact accounts: match the icon size + vertical spacing
   of the expanded compact nav (above) so collapsing doesn't enlarge everything.
   Higher specificity than the base .od-collapsed rail rules, so these win. */
.od-app-layout.od-compact-nav.od-collapsed .dash-nav-sub { gap: 0; }
.od-app-layout.od-compact-nav.od-collapsed .dash-nav-sub a { padding: 4px 0; margin: 1px 8px; }
.od-app-layout.od-compact-nav.od-collapsed .dash-nav-sub a > i { font-size: 0.9rem; }
.od-app-layout.od-compact-nav.od-collapsed .dash-nav-sub a > .nav-icon svg { width: 0.9rem; height: 0.9rem; }
.od-app-layout.od-compact-nav.od-collapsed .dash-nav-item { padding: 4px 0; }
.od-app-layout.od-compact-nav.od-collapsed .dash-nav-item > i { font-size: 0.9rem; }
.od-app-layout.od-compact-nav.od-collapsed .dash-nav-today { padding: 4px 0; }
.od-app-layout.od-compact-nav.od-collapsed .dash-nav-today > i { font-size: 0.9rem; }
.od-app-layout.od-compact-nav.od-collapsed .dash-nav-today > .nav-icon svg { width: 0.9rem; height: 0.9rem; }

/* ── Main area ── */
.od-app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: margin-left 0.25s ease;
}

/* ── Top bar ── */
.dash-topbar {
  background: hsl(var(--od-card));
  padding: 0 24px;
  height: 48px;
  border-bottom: 1px solid hsl(var(--od-border));
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.dash-topbar-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: hsl(var(--od-foreground));
}
.dash-topbar-subtitle { font-size: 0.8rem; color: hsl(var(--od-muted-fg)); display: block; }
.od-sidebar-toggle {
  background: none;
  border: 1px solid hsl(var(--od-border));
  border-radius: 6px;
  font-size: 1.1rem;
  color: hsl(var(--od-muted-fg));
  padding: 5px 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.od-sidebar-toggle:hover { background: hsl(var(--od-muted)); color: hsl(var(--od-foreground)); }

/* ── Sidebar collapse tab (desktop side-mode only) ── */
.od-collapse-tab {
  position: fixed;
  left: 256px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 160px;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  z-index: 1041;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: left 0.25s ease;
}
.od-collapse-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.od-collapse-svg path {
  fill: hsl(var(--od-sidebar-bg));
  transition: fill 0.15s;
}
.od-collapse-tab:hover .od-collapse-svg path {
  fill: hsl(var(--od-sidebar-accent));
}
.od-collapse-icon {
  position: relative;
  z-index: 1;
  font-size: 0.5rem;
  color: hsl(var(--od-sidebar-fg));
}
/* Chevron direction: show left when open, right when collapsed */
.od-collapse-tab .bi-chevron-left { display: inline; }
.od-collapse-tab .bi-chevron-right { display: none; }

/* Mobile-only hamburger toggle — hidden on desktop */
.od-mobile-toggle {
  display: none;
}
@media (max-width: 992px) {
  .od-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1035;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1.3rem;
    background: hsl(var(--od-card));
    border: 1px solid hsl(var(--od-border));
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
}

/* ── Sidebar footer controls ── */
.dash-ctrl-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
}
.dash-avatar-sm {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, hsl(var(--od-ocean-teal)), hsl(var(--od-ocean-mint)));
  color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-size: 0.7rem; font-weight: 600;
  flex-shrink: 0;
}
.dash-notif-dot {
  position: absolute; top: 8px; right: 12px;
  width: 8px; height: 8px;
  background: hsl(var(--od-destructive)); border-radius: 50%;
}
.dash-sidebar-footer .dropdown-menu-dark {
  --bs-dropdown-bg: hsl(210 50% 18%);
  --bs-dropdown-border-color: hsl(210 45% 22%);
  min-width: 200px;
  z-index: 1070 !important;
}

/* Account type pill shown in footer */
.od-account-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 1em;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-decoration: none;
}
.od-account-pill.pill-institution { background: #0f766e; color: #fff; }
.od-account-pill.pill-pro         { background: #6d28d9; color: #fff; }
.od-account-pill.pill-trial       { background: #b45309; color: #fff; }

/* ── Top mode (desktop ≥993px) ── */
@media (min-width: 993px) {
  .od-app-layout.od-nav-top {
    flex-direction: column;
    transition: flex-direction 0s;
  }

  .od-nav-top .dash-sidebar {
    width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    /* 5-col grid: [left-zone] [spacer] [center: groups] [spacer] [right-zone]
       1fr spacers on both sides force the groups to true viewport-center. */
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    position: sticky;
    top: 0;
    overflow: visible;
    border-bottom: 1px solid hsl(var(--od-sidebar-border));
    z-index: 1050;
  }

  /* Left cell: wraps brand + today side by side */
  .od-nav-top .dash-sidebar-left {
    grid-column: 1;
    justify-self: start;
    align-self: stretch;
    display: flex;
    align-items: center;
    height: 48px;
  }
  .od-nav-top .dash-sidebar-brand {
    border-bottom: none;
    border-right: none;
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    white-space: nowrap;
    flex-shrink: 0;
    height: 48px;
  }

  /* Nav sits in the center cell (col 3 of 5-col grid) */
  .od-nav-top .dash-sidebar-nav {
    grid-column: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0;
    overflow: visible;
    align-items: center;
    justify-content: center;
    min-height: 0;
    gap: 0;
    height: 48px;
  }

  .od-nav-top .dash-nav-item {
    white-space: nowrap;
    margin: 0 8px;
    padding: 6px 10px;
  }

  /* Active indicator: background tint only (no left bar) */
  .od-nav-top .dash-nav-item.active::before { display: none; }

  .od-nav-top .dash-nav-group { position: relative; }
  /* In top mode the group btn IS the dropdown trigger — restore interactive
     styling (the flattened side-mode caption style is overridden here). */
  .od-nav-top .dash-nav-group-btn {
    white-space: nowrap;
    width: auto;
    height: 48px;
    margin: 0;
    padding: 0 14px 9px 14px;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: normal;
    color: hsl(var(--od-sidebar-fg));
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: inset 0 -3px 0 transparent;
    align-self: stretch;
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    text-transform: capitalize;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
  }
  .od-nav-top .dash-nav-group-btn:hover {
    background: hsl(var(--od-ocean-teal) / 0.15);
    color: #fff;
  }
  /* Active group: filled pill + bottom stripe; only when sub-link is active */
  .od-nav-top .dash-nav-group.active-section > .dash-nav-group-btn {
    color: #fff;
    font-weight: 600;
    background: hsl(var(--od-ocean-teal) / 0.35);
    box-shadow: inset 0 -3px 0 hsl(var(--od-ocean-mint));
    padding-bottom: 7px;
  }
  .od-nav-top .dash-nav-group-btn > i:first-child { font-size: 1rem; }
  /* In top mode the group btn is the dropdown trigger — its decorative
     side-mode accent rules don't apply here. */
  .od-nav-top .dash-nav-group-btn::before,
  .od-nav-top .dash-nav-group-btn::after { display: none; }

  /* Sub-items: hidden by default, revealed on hover */
  .od-nav-top .dash-nav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: hsl(var(--od-sidebar-bg));
    border-radius: 0 0 var(--od-radius) var(--od-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 1060;
    padding: 6px 0;
    display: none;
  }
  .od-nav-top .dash-nav-group:hover > .dash-nav-sub,
  .od-nav-top .dash-nav-group.open > .dash-nav-sub {
    display: flex;
    flex-direction: column;
  }
  .od-nav-top .dash-nav-sub a {
    margin: 0;
    border-left: none;
    border-radius: 0;
    padding: 8px 16px;
    font-size: 0.86rem;
    gap: 10px;
  }
  .od-nav-top .dash-nav-sub a.active {
    box-shadow: none;
    background: hsl(var(--od-ocean-teal) / 0.85);
  }

  /* Today in top mode — lives in .dash-sidebar-left, inline with brand */
  .od-nav-top .dash-nav-today {
    position: static;
    margin: 0;
    padding: 0 14px 9px 14px;
    height: 48px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: hsl(var(--od-sidebar-fg));
    background: transparent;
    border-radius: 0;
    border: none;
    border-right: 1px solid hsl(var(--od-sidebar-border));
    box-shadow: inset 0 -3px 0 transparent;
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    white-space: nowrap;
    align-self: stretch;
    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: normal;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
  }
  .od-nav-top .dash-nav-today > span { display: inline; }
  .od-nav-top .dash-nav-today > i { font-size: 1rem; color: hsl(var(--od-ocean-mint)); }
  .od-nav-top .dash-nav-today:hover {
    background: hsl(var(--od-ocean-teal) / 0.15);
    color: #fff;
  }
  .od-nav-top .dash-nav-today.active {
    color: #fff;
    font-weight: 600;
    background: hsl(var(--od-ocean-teal) / 0.35) !important;
    box-shadow: inset 0 -3px 0 hsl(var(--od-ocean-mint)) !important;
    padding-bottom: 10px !important;
  }
  .od-nav-top .dash-nav-today.active > i { color: hsl(var(--od-ocean-mint)); }

  /* Footer occupies the right grid cell — full height so border spans the bar */
  .od-nav-top .dash-sidebar-footer {
    grid-column: 5;
    justify-self: end;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    border-top: none;
    border-left: 1px solid hsl(var(--od-sidebar-border));
    padding: 0 16px;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  /* Account pill visible in top mode */
  .od-nav-top .od-account-pill {
    margin: 0 4px;
  }

  /* Hide text labels in top mode */
  .od-nav-top .dash-ctrl-label { display: none; }

  /* Icon-only buttons in top mode footer */
  .od-nav-top .dash-sidebar-footer .dash-nav-item,
  .od-nav-top .dash-sidebar-footer .dash-ctrl-btn {
    width: auto;
    height: auto;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 6px;
    font-size: 1rem;
  }

  /* Profile dropdown wrapper: shrink to button size */
  .od-nav-top #sidebarProfileWrap {
    display: flex;
    align-items: center;
    position: relative;
  }
  .od-nav-top #sidebarProfileWrap .dropdown-menu {
    top: 100%; bottom: auto;
    right: 0; left: auto;
    z-index: 1070 !important;
  }

  /* Notification dot position for icon-only */
  .od-nav-top .dash-notif-dot {
    top: 4px; right: 4px;
  }

  /* Hide sidebar toggle in topbar when in top mode */
  .od-nav-top .od-sidebar-toggle { display: none; }

  /* Hide collapse tab in top mode (sidebar is horizontal bar) */
  .od-nav-top .od-collapse-tab { display: none; }

  /* Chevron hidden in top mode (hover reveals dropdown) */
  .od-nav-top .dash-chevron { display: none; }

  /* Sidebar collapse has no effect in top mode */
  .od-app-layout.od-nav-top.od-collapsed .dash-sidebar {
    transform: none;
    position: sticky;
    width: 100%;
  }
}

/* ── Content area (dot-grid) ── */
.od-app-content {
  padding: 16px 24px 24px 24px;
  flex: 1;
  background-image: radial-gradient(circle, hsl(var(--od-border)) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Scrollbars ── */
.dash-sidebar::-webkit-scrollbar,
.dash-sidebar-nav::-webkit-scrollbar,
.od-app-main::-webkit-scrollbar { width: 6px; }
.dash-sidebar::-webkit-scrollbar-track,
.dash-sidebar-nav::-webkit-scrollbar-track,
.od-app-main::-webkit-scrollbar-track { background: transparent; }
.dash-sidebar::-webkit-scrollbar-thumb,
.dash-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.dash-sidebar::-webkit-scrollbar-thumb:hover,
.dash-sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
.od-app-main::-webkit-scrollbar-thumb { background: hsl(var(--od-border)); border-radius: 3px; }
.od-app-main::-webkit-scrollbar-thumb:hover { background: hsl(var(--od-muted-fg) / 0.3); }

/* ── Mobile shell (≤768px): sticky top bar + off-canvas drawer ──
   The .od-mobile-bar partial is included in layout_app.html. It is hidden
   on desktop and replaces both side-nav and top-nav layouts on phones and
   narrow split-screen. The drawer reuses the existing #dashSidebar markup. */
.od-mobile-bar { display: none; }
.od-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1041;
  background: rgba(0, 0, 0, 0.45);
  animation: odDrawerFadeIn .18s ease both;
}
@keyframes odDrawerFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 768px) {
  .od-mobile-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 1040;
    height: 56px;
    padding: 0 12px;
    background: hsl(var(--od-sidebar-bg));
    color: hsl(var(--od-sidebar-fg));
    border-bottom: 1px solid hsl(var(--od-sidebar-border));
  }
  .od-mobile-burger,
  .od-mobile-iconbtn {
    background: transparent;
    border: none;
    color: inherit;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    position: relative; /* anchor for .dash-notif-dot */
  }
  .od-mobile-burger:hover,
  .od-mobile-iconbtn:hover { background: hsl(var(--od-sidebar-border) / 0.4); }
  .od-mobile-brand {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: inherit;
    text-decoration: none;
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .od-mobile-brand i { font-size: 1.1rem; color: hsl(var(--od-ocean-mint)); }
  .od-mobile-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .od-mobile-bar .dropdown-menu { font-size: 0.92rem; }
  /* Hide the legacy tablet-band burger and the desktop topbar on mobile */
  .od-mobile-toggle,
  .od-collapse-tab,
  .dash-topbar { display: none !important; }
  /* In top-nav mode the sidebar IS the horizontal bar — hide it too on mobile */
  .od-app-layout.od-nav-top .dash-sidebar { display: none !important; }
  /* Drawer sizing wins over the desktop rail width */
  .dash-sidebar { width: 280px !important; }
  .dash-sidebar.open {
    box-shadow: 4px 0 20px rgba(0,0,0,0.45);
  }
  /* Lock body scroll while the drawer is open */
  body.od-drawer-open { overflow: hidden; }
  /* Content padding on phones is already trimmed by the existing 576px rule;
     keep dot-grid background but tighten the top gutter under the mobile bar */
  .od-app-content { padding-top: 12px; }
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .dash-sidebar {
    position: fixed !important;
    left: -270px;
    transition: left 0.3s ease, transform 0.25s ease;
    box-shadow: none;
    transform: none !important;
  }
  .dash-sidebar.open {
    left: 0 !important;
    z-index: 1042;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
  }
  /* :not(.open) so the drawer-opening rule above wins when both classes
     are present (e.g. user collapsed the rail on desktop, then resized
     narrow before the resize-sync sheds .od-collapsed). */
  .od-app-layout.od-collapsed .dash-sidebar:not(.open) {
    transform: none !important;
    left: -270px !important;
    width: 256px !important; /* override desktop 64px rail on mobile */
  }
  .od-app-main { margin-left: 0 !important; }
  .od-collapse-tab { display: none; }
}

@media (max-width: 576px) {
  .od-app-content { padding: 12px 16px 16px 16px; }
  .dash-topbar { padding: 0 12px; height: auto; min-height: 56px; }
}

/* ── Locked nav groups (individual users) ── */
.dash-nav-group-locked .dash-nav-group-btn {
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
}
.dash-nav-group-locked .dash-nav-group-btn:hover {
  opacity: 0.75;
}

.dash-lock-icon {
  margin-left: auto;
  font-size: 14px;
  line-height: 1;
}

/* Locked sub-item (e.g. Markbook for trial users): greyed upgrade teaser.
   Same look as a locked group but rendered as a single nav link. */
.dash-nav-sub a.dash-nav-sub-locked {
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
}
.dash-nav-sub a.dash-nav-sub-locked:hover { opacity: 0.75; }
/* In the collapsed rail the label is hidden, so drop the trailing lock too —
   the icon alone stands in for the item, matching locked groups. */
.od-app-layout.od-collapsed .dash-nav-sub a.dash-nav-sub-locked .dash-lock-icon { display: none; }

/* Lock icon aligned at 9px for locked groups (same as regular groups) */
.od-nav-top .dash-nav-group-locked > .dash-nav-group-btn {
  padding-bottom: 9px;
}

/* ── Account pill inside the user dropdown ── */
.od-dropdown-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.od-dropdown-pill.pill-institution { background: hsl(var(--od-ocean-teal) / 0.18); color: hsl(var(--od-ocean-mint)); }
.od-dropdown-pill.pill-pro         { background: hsl(45 85% 50% / 0.18); color: hsl(45 85% 65%); }
.od-dropdown-pill.pill-trial       { background: hsl(210 25% 60% / 0.25); color: #fff; }
.od-dropdown-pill.pill-trial:hover { background: hsl(210 25% 60% / 0.4); color: #fff; }

@media (min-width: 993px) {
  .od-nav-top .dash-lock-icon {
    font-size: 12px;
  }
}

/* ── Upgrade popover ── */
.locked-popover-overlay {
  position: fixed;
  inset: 0;
  z-index: 1069;
}

.locked-popover-container {
  position: fixed;
  z-index: 1070;
  width: 288px;
  background: hsl(var(--od-sidebar-bg));
  border: 1px solid hsl(var(--od-sidebar-border));
  border-radius: var(--od-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: 16px;
  font-family: 'Manrope', sans-serif;
  color: hsl(var(--od-sidebar-fg));
}

.locked-popover-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.locked-popover-tile {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, hsl(var(--od-ocean-teal)), hsl(var(--od-ocean-mint)));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}

.locked-popover-title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: #fff;
}

.locked-popover-body {
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0 0 14px 0;
  opacity: 0.85;
}

.locked-popover-actions {
  display: flex;
  gap: 8px;
}

.locked-popover-btn {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
}

.locked-popover-btn.btn-outline-light {
  border: 1px solid hsl(var(--od-sidebar-border));
  color: hsl(var(--od-sidebar-fg));
  background: transparent;
}
.locked-popover-btn.btn-outline-light:hover {
  background: hsl(var(--od-sidebar-accent));
  color: #fff;
}

.locked-popover-btn-primary {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  background: linear-gradient(135deg, hsl(var(--od-ocean-teal)), hsl(var(--od-ocean-mint)));
  color: #fff;
  border: none;
}
.locked-popover-btn-primary:hover {
  filter: brightness(1.1);
  color: #fff;
  text-decoration: none;
}

/* ── Authenticated page footer ── */
.od-site-footer {
  background: hsl(210 60% 8%);
  border-top: 1px solid hsl(var(--od-sidebar-border));
  padding: 12px 24px;
  flex-shrink: 0;
  /* Footer is dark — set base color so text is visible regardless of theme */
  color: rgba(255, 255, 255, 0.85);
}
.od-site-footer-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.od-site-footer-brand {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  letter-spacing: 0.05em;
  margin-right: auto;
}
.od-site-footer-copy {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}
.od-site-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.od-site-footer-links a {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.od-site-footer-links a:hover {
  color: #fff;
}

/* ── Dark mode ── */
/* Token overrides moved to od-tokens.css (imported at the top of this file). */

/* ─────────────────────────────────────────────────────────────────────
   Sidebar — always-expanded mode (no chevron, no click-to-collapse)
   Only applies in side-nav mode; top-nav mode uses hover-reveal instead.
   ───────────────────────────────────────────────────────────────────── */
.od-app-layout:not(.od-nav-top) .dash-sidebar .dash-nav-group:not(.dash-nav-group-locked) .dash-nav-sub {
  display: flex !important;
  flex-direction: column;
}
.od-app-layout:not(.od-nav-top) .dash-sidebar .dash-nav-group-btn { cursor: default; }
.dash-sidebar .dash-chevron { display: none; }

/* ─────────────────────────────────────────────────────────────────────
   Dashboard hero grid: Next-Up / Setup card on left + side column right
   ───────────────────────────────────────────────────────────────────── */
.dash-greeting-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 18px;
  flex-wrap: wrap;
}
.dash-bonjour {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  margin: 0;
  color: hsl(var(--od-foreground));
}
.dash-day-meta {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: hsl(var(--od-muted-fg));
  margin: 0;
  font-weight: 600;
}

.dash-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) {
  .dash-hero-grid { grid-template-columns: 1fr; }
}
.dash-hero-side { display: flex; flex-direction: column; gap: 16px; align-self: start; }
.dash-hero-side .dash-card { margin-bottom: 0; }
.dash-hero-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.dash-hero-main > .dash-nextup-card,
.dash-hero-main > .dash-schedule-card { margin-bottom: 0; }
.dash-hero-main > .dash-schedule-card { flex: 1 1 auto; }

/* ─── Setup mode (empty state) ───────────────────────────────────────── */
.dash-setup-card {
  background: hsl(var(--od-card));
  border: 1px solid hsl(var(--od-border));
  border-left: 4px solid hsl(var(--od-ocean-teal, var(--od-primary)));
  border-radius: var(--od-radius);
  padding: 24px;
}
.dash-setup-intro { margin-bottom: 18px; }
.dash-setup-message {
  font-size: 0.98rem;
  color: hsl(var(--od-foreground));
  margin: 0;
  line-height: 1.55;
}
.dash-setup-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.dash-setup-progress-track {
  flex: 1;
  height: 6px;
  background: hsl(var(--od-muted));
  border-radius: 999px;
  overflow: hidden;
}
.dash-setup-progress-fill {
  height: 100%;
  background: hsl(var(--od-ocean-teal, var(--od-primary)));
  border-radius: 999px;
  transition: width 0.3s ease;
}
.dash-setup-progress-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--od-muted-fg));
  white-space: nowrap;
}
.dash-setup-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-setup-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: hsl(var(--od-muted) / 0.5);
  border: 1px solid hsl(var(--od-border));
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s;
}
.dash-setup-step:hover { background: hsl(var(--od-muted)); }
.dash-setup-step-tick { font-size: 1.4rem; color: hsl(var(--od-muted-fg)); }
.dash-setup-step.done .dash-setup-step-tick { color: hsl(var(--od-ocean-teal, var(--od-primary))); }
.dash-setup-step-body { flex: 1; min-width: 0; }
.dash-setup-step-body strong {
  display: block;
  font-size: 0.95rem;
  color: hsl(var(--od-foreground));
  margin-bottom: 2px;
}
.dash-setup-step.done .dash-setup-step-body strong {
  text-decoration: line-through;
  color: hsl(var(--od-muted-fg));
}
.dash-setup-step-body p {
  font-size: 0.82rem;
  color: hsl(var(--od-muted-fg));
  margin: 0;
}
.dash-setup-step-action {
  background: hsl(var(--od-ocean-teal, var(--od-primary)));
  color: white;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dash-setup-step-action:hover { filter: brightness(1.1); color: white; }
.dash-setup-step-done-pill {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: hsl(var(--od-ocean-teal, var(--od-primary)));
  background: hsl(var(--od-ocean-teal, var(--od-primary)) / 0.12);
  padding: 6px 10px;
  border-radius: 999px;
}

/* ─── Quickstart panel (works-right-away) ────────────────────────────── */
.dash-quickstart-card {
  background: hsl(var(--od-card));
  border: 1px solid hsl(var(--od-border));
  border-radius: var(--od-radius);
  padding: 20px;
}
.dash-quickstart-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: hsl(var(--od-foreground));
}
.dash-quickstart-subtitle {
  font-size: 0.82rem;
  color: hsl(var(--od-muted-fg));
  margin: 0 0 14px;
}
.dash-quickstart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  color: hsl(var(--od-foreground));
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.dash-quickstart-item + .dash-quickstart-item { margin-top: 4px; }
.dash-quickstart-item:hover {
  background: hsl(var(--od-muted) / 0.6);
  border-color: hsl(var(--od-border));
  color: hsl(var(--od-foreground));
}
.dash-quickstart-item > i:first-child {
  font-size: 1.3rem;
  color: hsl(var(--od-ocean-teal, var(--od-primary)));
  width: 28px;
  text-align: center;
}
.dash-quickstart-item > div { flex: 1; display: flex; flex-direction: column; }
.dash-quickstart-item > div strong {
  font-size: 0.92rem;
  font-weight: 600;
}
.dash-quickstart-item > div span {
  font-size: 0.78rem;
  color: hsl(var(--od-muted-fg));
}
.dash-quickstart-arrow {
  color: hsl(var(--od-muted-fg));
  font-size: 0.95rem;
  transition: transform 0.15s;
}
.dash-quickstart-item:hover .dash-quickstart-arrow { transform: translateX(2px); }

/* ─── Next-Up card (full dashboard mode) ─────────────────────────────── */
.dash-nextup-card {
  background: linear-gradient(135deg, hsl(var(--od-sidebar-bg)), hsl(var(--od-sidebar-accent) / 0.6));
  color: hsl(210 20% 96%);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.dash-nextup-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 1px hsl(var(--od-ocean-mint) / 0.18),
    0 0 0 40px hsl(var(--od-ocean-mint) / 0.06),
    0 0 0 80px hsl(var(--od-ocean-mint) / 0.05),
    0 0 0 130px hsl(var(--od-ocean-mint) / 0.04),
    0 0 0 190px hsl(var(--od-ocean-mint) / 0.03),
    0 0 0 260px hsl(var(--od-ocean-mint) / 0.02);
  pointer-events: none;
  z-index: 0;
}
.dash-nextup-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% -10%, hsl(var(--od-ocean-mint) / 0.10) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.dash-nextup-pill {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: hsl(174 60% 65%);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.dash-nextup-time {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  color: white;
  position: relative;
  z-index: 1;
}
.dash-nextup-time-meta {
  font-size: 0.85rem;
  color: hsl(210 20% 78%);
  margin-top: -4px;
  position: relative;
  z-index: 1;
}
.dash-nextup-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  margin: 6px 0 0;
  color: white;
  position: relative;
  z-index: 1;
}
.dash-nextup-class-code,
a.dash-nextup-class-code:link,
a.dash-nextup-class-code:visited {
  color: hsl(174 60% 65%);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
a.dash-nextup-class-code:hover {
  color: hsl(174 65% 78%);
  text-decoration: underline;
}
.dash-nextup-sub {
  font-size: 0.92rem;
  color: hsl(210 20% 82%);
  margin: 0;
  position: relative;
  z-index: 1;
}
.dash-nextup-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid hsl(210 30% 30% / 0.5);
  border-bottom: 1px solid hsl(210 30% 30% / 0.5);
  position: relative;
  z-index: 1;
}
.dash-nextup-stats > div { display: flex; flex-direction: column; gap: 2px; }
.dash-nextup-stats .lbl {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: hsl(210 20% 65%);
  font-weight: 700;
  text-transform: uppercase;
}
.dash-nextup-stats .val {
  font-size: 1.05rem;
  font-weight: 700;
  color: white;
}
.dash-nextup-stats .val.ready { color: hsl(155 60% 65%); }
.dash-nextup-stats .val.not-set { color: hsl(35 80% 65%); }
.dash-nextup-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) { .dash-nextup-body { grid-template-columns: 1fr; } }
.dash-nextup-lo h4 {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: hsl(210 20% 65%);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.dash-nextup-lo p { font-size: 0.92rem; color: hsl(210 20% 88%); margin: 0 0 12px; }
.dash-nextup-lo p.dash-nextup-lesson-title {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(210 20% 96%);
}
.dash-nextup-lo-list {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 0.92rem;
  color: hsl(210 20% 88%);
}
.dash-nextup-lo-list li { margin: 0 0 4px; }
.dash-nextup-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-chip {
  background: hsl(210 35% 22%);
  color: hsl(210 20% 92%);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
}
.dash-nextup-students-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.dash-nextup-students-count {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.dash-nextup-students-count-lbl {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: hsl(210 20% 70%);
  font-weight: 600;
  text-transform: uppercase;
}
.dash-students-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
}
.dash-student-pip {
  background: linear-gradient(135deg, hsl(335 65% 55%), hsl(295 55% 50%));
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.dash-student-pip.overflow {
  background: hsl(210 35% 30%);
  color: hsl(210 20% 88%);
}
.dash-nextup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}
.dash-nextup-empty {
  font-size: 1.1rem;
  font-weight: 600;
  color: hsl(210 20% 85%);
  margin: 0;
}
.dash-nextup-empty-sub {
  font-size: 0.88rem;
  color: hsl(210 20% 70%);
  margin: 0;
}

/* ─── Next-Up Notes section ─────────────────────────────────────────── */
.dash-nextup-notes {
  grid-column: 1 / -1;
  border-top: 1px solid hsl(210 30% 30% / 0.4);
  padding-top: 12px;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}
.dash-nextup-notes h4 {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: hsl(210 20% 65%);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.dash-nextup-note-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.84rem;
  line-height: 1.5;
  padding: 2px 0;
}
.dash-note-icon { font-size: 0.78rem; flex-shrink: 0; position: relative; top: 1px; }
.dash-note-text { flex: 1; color: hsl(210 20% 88%); }
.dash-note-due  { font-size: 0.76rem; font-weight: 600; flex-shrink: 0; }
.dash-note-event .dash-note-icon        { color: hsl(210 20% 65%); }
.dash-note-event .dash-note-text        { color: hsl(210 20% 80%); }
.dash-note-next-session .dash-note-icon { color: hsl(174 55% 58%); }
.dash-note-next-session .dash-note-text { color: hsl(174 30% 82%); }
.dash-note-homework .dash-note-icon     { color: hsl(38 90% 62%); }
.dash-note-homework .dash-note-text     { color: hsl(38 30% 88%); }
.dash-note-homework .dash-note-due      { color: hsl(38 85% 62%); }
.dash-note-empty {
  font-size: 0.82rem;
  color: hsl(210 20% 55%);
  font-style: italic;
  margin: 0;
}

/* ─── Embedded scheme panel (docked top-right of Next-Up hero) ───────── */
.dash-nextup-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  position: relative;
  z-index: 1;
}
.dash-nextup-top-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-nextup-scheme {
  width: 380px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 13px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  color: hsl(210 20% 92%);
  /* Push slightly into the Next-Up centre */
  margin-left: -12px;
  margin-bottom: -8px;
}
.dash-nextup-scheme-top {
  display: flex;
  align-items: center;
  gap: 13px;
}
.dash-nextup-scheme-ring {
  --pct: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    conic-gradient(
      hsl(174 60% 60%) calc(var(--pct) * 1%),
      rgba(255, 255, 255, 0.12) 0
    );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dash-nextup-scheme-ring::after {
  content: '';
  position: absolute;
  inset: 6px;
  background: hsl(var(--od-sidebar-bg));
  border-radius: 50%;
}
.dash-nextup-scheme-ring-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 1px;
}
.dash-nextup-scheme-ring-text strong {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
.dash-nextup-scheme-ring-text small {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: hsl(210 20% 70%);
  font-weight: 700;
}
.dash-nextup-scheme-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-nextup-scheme-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: hsl(174 60% 65%);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-nextup-scheme-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.01rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.dash-nextup-scheme-pct {
  font-size: 0.81rem;
  color: hsl(210 20% 72%);
}
.dash-nextup-scheme-assess {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: hsl(186 56% 49% / 0.14);
  border: 1px solid hsl(186 56% 49% / 0.28);
  border-radius: 8px;
  padding: 6px 10px;
  align-self: flex-start;
}
.dash-nextup-scheme-assess-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: hsl(186 56% 49%);
  color: #fff;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 4px;
}
.dash-nextup-scheme-assess-text {
  font-size: 0.86rem;
  font-weight: 600;
  color: #fff;
}
.dash-nextup-scheme-pips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.dash-nextup-scheme-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: inline-block;
}
.dash-nextup-scheme-pip-done { background: hsl(174 60% 60%); }
.dash-nextup-scheme-pip-next {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 2px hsl(174 60% 60%);
}
.dash-nextup-scheme-pip-assessment { background: hsl(35 90% 60%); }
.dash-nextup-scheme-pip-feedback   { background: hsl(220 70% 65%); }
.dash-nextup-scheme-pip[data-pip-label] {
  position: relative;
  cursor: default;
}
.dash-nextup-scheme-pip[data-pip-label]:hover::after {
  content: attr(data-pip-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  background: hsl(var(--od-sidebar-bg));
  color: hsl(var(--od-sidebar-fg));
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  z-index: 100;
  pointer-events: none;
}

/* Collapse scheme panel below hero content on narrow hero widths */
@media (max-width: 720px) {
  .dash-nextup-top { flex-direction: column; }
  .dash-nextup-scheme { width: 100%; }
}

/* (Standalone .dash-session-card removed — scheme now embedded in Next-Up hero) */

/* ─── Deadlines card ─────────────────────────────────────────────────── */
.dash-deadlines-card {
  background: hsl(var(--od-card));
  border: 1px solid hsl(var(--od-border));
  border-radius: var(--od-radius);
  padding: 16px 18px;
}
.dash-deadlines-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-bottom: 10px;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.0rem;
  font-weight: 700;
  color: hsl(var(--od-foreground));
}
.dash-deadlines-chevron { transition: transform 0.18s ease; }
.dash-deadlines-card.expanded .dash-deadlines-chevron { transform: rotate(180deg); }
.dash-deadlines-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: hsl(var(--od-muted-fg));
}
.dash-deadlines-count {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: hsl(var(--od-foreground));
}
.dash-deadlines-count.overdue { color: hsl(0 75% 60%); }
.dash-deadlines-label { margin-right: 8px; }
.dash-deadlines-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.dash-deadlines-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: hsl(var(--od-foreground));
  border: 1px solid transparent;
  background: hsl(var(--od-muted) / 0.4);
}
.dash-deadlines-item:hover {
  background: hsl(var(--od-muted));
  border-color: hsl(var(--od-border));
  color: hsl(var(--od-foreground));
}
.dash-deadlines-item > i {
  color: hsl(var(--od-ocean-teal, var(--od-primary)));
  font-size: 1rem;
}
.dash-deadlines-item .dl-title {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-deadlines-item .dl-date {
  font-size: 0.78rem;
  color: hsl(var(--od-muted-fg));
  font-weight: 600;
  white-space: nowrap;
}
.dash-deadlines-empty {
  font-size: 0.85rem;
  color: hsl(var(--od-muted-fg));
  margin: 8px 0 0;
}

/* --- "Needs confirming" card (unfinished-session reconciliation) --- */
.dash-needsconfirm-card {
  background: hsl(var(--od-card));
  border: 1px solid hsl(38 90% 55% / 0.55);
  border-left: 3px solid hsl(38 90% 55%);
  border-radius: var(--od-radius);
  padding: 16px 18px;
}
.dash-needsconfirm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.0rem;
  font-weight: 700;
  color: hsl(var(--od-foreground));
}
.dash-needsconfirm-header .ttl i { color: hsl(38 90% 50%); }
.dash-needsconfirm-count {
  margin-left: auto;
  min-width: 22px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: white;
  background: hsl(38 90% 48%);
  border-radius: 999px;
  padding: 1px 8px;
}
.dash-needsconfirm-intro {
  font-size: 0.82rem;
  color: hsl(var(--od-muted-fg));
  margin: 8px 0 12px;
}
.dash-needsconfirm-list { display: flex; flex-direction: column; gap: 10px; }
.dash-needsconfirm-item {
  border: 1px solid hsl(var(--od-border));
  border-radius: 10px;
  padding: 10px 12px;
  background: hsl(var(--od-muted) / 0.35);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dash-needsconfirm-item.nc-removing { opacity: 0; transform: translateX(12px); }
.dash-needsconfirm-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dash-needsconfirm-item-top .nc-class {
  font-weight: 700;
  font-size: 0.9rem;
  color: hsl(var(--od-foreground));
}
.nc-state {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 7px;
  border-radius: 999px;
}
.nc-state-paused { background: hsl(38 90% 90%); color: hsl(38 80% 32%); }
.nc-state-stale { background: hsl(0 75% 92%); color: hsl(0 65% 42%); }
.nc-state-auto_finished { background: hsl(210 40% 90%); color: hsl(210 50% 38%); }
.dash-needsconfirm-item-top .nc-date {
  margin-left: auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: hsl(var(--od-muted-fg));
}
.dash-needsconfirm-hint {
  font-size: 0.8rem;
  color: hsl(38 60% 32%);
  background: hsl(38 90% 95%);
  border-radius: 7px;
  padding: 6px 9px;
  margin: 8px 0;
}
.dash-needsconfirm-hint i { margin-right: 4px; }
.dash-needsconfirm-lessons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}
.dash-needsconfirm-lesson {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-needsconfirm-lesson .ncl-title {
  flex: 1;
  font-size: 0.82rem;
  color: hsl(var(--od-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-needsconfirm-lesson.is-mismatch .ncl-title { font-weight: 700; }
.ncl-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid hsl(var(--od-border));
  font-size: 0.85rem;
  flex-shrink: 0;
}
.ncl-cell.nc-save-error { outline: 2px solid hsl(0 75% 55%); }
.dash-needsconfirm-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.dash-needsconfirm-open {
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--od-ocean-teal, var(--od-primary)));
  text-decoration: none;
}
.dash-needsconfirm-open:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────
   Pinned "Today" sidebar tab (only renders on the dashboard)
   ───────────────────────────────────────────────────────────────────── */
.dash-nav-today {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 8px 12px 12px;
  padding: 11px 12px;
  border-radius: 0.5rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  color: hsl(var(--od-sidebar-fg));
  border-bottom: 1px solid transparent;
}
.dash-nav-today > i { font-size: 1.05rem; color: hsl(var(--od-ocean-mint)); }

.dash-nav-today.active {
  background: hsl(var(--od-ocean-teal) / 0.85);
  color: #fff;
  position: relative;
  box-shadow: inset 4px 0 0 hsl(var(--od-ocean-mint));
}
.dash-nav-today.active > i { color: #fff; }

/* ─────────────────────────────────────────────────────────────────────
   Sidebar footer: tidy up the "grey box" — neutralise browser button
   defaults so the bottom controls match the dark sidebar.
   ───────────────────────────────────────────────────────────────────── */
.dash-sidebar-footer .dash-ctrl-btn {
  background: transparent;
  border: 0;
  color: hsl(var(--od-sidebar-fg));
  width: calc(100% - 24px);
  margin: 1px 12px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  border-radius: 0.5rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dash-sidebar-footer .dash-ctrl-btn:hover {
  background: hsl(var(--od-sidebar-accent));
  color: #fff;
}
.dash-sidebar-footer .dash-ctrl-btn > i {
  color: hsl(var(--od-ocean-mint));
  font-size: 1rem;
}
.dash-sidebar-footer .dash-avatar-sm {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: hsl(var(--od-ocean-teal));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
}
.dash-sidebar-footer #sidebarProfileWrap { width: 100%; }
.dash-sidebar-footer #sidebarProfileWrap .dash-ctrl-btn { padding: 8px 10px; }
.dash-sidebar-footer .dash-notif-dot {
  position: absolute;
  top: 8px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--od-destructive));
}

/* ═══════════════════════════════════════════════════════════════════════
   WELCOME HUB — new-user onboarding home (solo users)
   All colour via --od-* tokens; fonts Sora (headings) / Manrope (body).
   ═══════════════════════════════════════════════════════════════════════ */
.welcome-hub { display: flex; flex-direction: column; gap: 28px; }

/* ── A. Hero ── */
.welcome-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 34px 40px;
  border-radius: 22px;
  background: linear-gradient(135deg, hsl(var(--od-sidebar-bg)), hsl(var(--od-ocean-mid)));
  color: #fff;
}
.welcome-hero-glow {
  position: absolute;
  top: -120px; right: -80px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--od-ocean-mint) / 0.25) 0%, transparent 68%);
  pointer-events: none;
}
.welcome-hero-body { position: relative; z-index: 1; min-width: 0; }
.welcome-eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
  color: hsl(var(--od-ocean-mint));
  margin: 0 0 8px;
}
.welcome-h1 {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 2rem; font-weight: 700; line-height: 1.12;
  color: #fff; margin: 0 0 10px;
}
.welcome-hero-sub {
  font-size: 0.96rem; line-height: 1.55;
  color: hsl(210 20% 82%);
  margin: 0 0 18px; max-width: 56ch;
}
.welcome-ghost-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 600;
  color: #fff; cursor: pointer;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s;
}
.welcome-ghost-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.6); }
.welcome-ghost-btn .bi { font-size: 1rem; }

.welcome-ring {
  --welcome-pct: 0;
  position: relative; z-index: 1;
  width: 132px; height: 132px; flex-shrink: 0;
  border-radius: 50%;
  background:
    conic-gradient(hsl(var(--od-ocean-mint)) calc(var(--welcome-pct) * 1%), rgba(255,255,255,0.16) 0);
  display: flex; align-items: center; justify-content: center;
}
.welcome-ring::after {
  content: ''; position: absolute; inset: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--od-sidebar-bg)), hsl(var(--od-ocean-mid)));
}
.welcome-ring-center {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.welcome-ring-center strong {
  font-family: 'Sora', system-ui, sans-serif; font-size: 1.7rem; font-weight: 800; color: #fff;
}
.welcome-ring-center small {
  font-size: 0.6rem; letter-spacing: 0.1em; font-weight: 700;
  color: hsl(210 20% 75%); margin-top: 3px;
}

/* ── Section heads (Essentials / Going further) ── */
.welcome-section-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.welcome-section-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.25rem; font-weight: 700; color: hsl(var(--od-foreground)); margin: 0;
}
.welcome-section-help { font-size: 0.9rem; color: hsl(var(--od-muted-fg)); margin: 0; flex: 1; min-width: 180px; }
.welcome-pill {
  display: inline-flex; align-items: center;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 12px; border-radius: 9999px; white-space: nowrap;
}
.welcome-pill-primary { color: hsl(var(--od-primary)); background: hsl(var(--od-primary) / 0.12); }
.welcome-pill-muted   { color: hsl(var(--od-muted-fg)); background: hsl(var(--od-muted)); }

/* ── C. Essentials cards ── */
.welcome-essentials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.welcome-ess-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 22px 20px 20px;
  background: hsl(var(--od-card));
  border: 1px solid hsl(var(--od-border));
  border-radius: 14px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.welcome-ess-card.is-lead {
  border-color: hsl(var(--od-primary) / 0.55);
  box-shadow: 0 0 0 3px hsl(var(--od-primary) / 0.12);
}
.welcome-ess-num {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: 'Sora', system-ui, sans-serif; font-size: 0.82rem; font-weight: 700;
  color: hsl(var(--od-on-feature)); background: hsl(var(--od-primary));
}
.welcome-ess-illus {
  height: 84px; margin-bottom: 16px; border-radius: 10px;
  background: hsl(var(--od-primary) / 0.08);
  display: flex; align-items: center; justify-content: center;
}
.welcome-ess-illus .bi { font-size: 2rem; color: hsl(var(--od-primary)); }
.welcome-ess-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.05rem; font-weight: 600; color: hsl(var(--od-foreground)); margin: 0 0 6px;
}
.welcome-ess-desc { font-size: 0.86rem; line-height: 1.5; color: hsl(var(--od-muted-fg)); margin: 0 0 16px; flex: 1; }
.welcome-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; width: 100%;
  font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 600;
  border-radius: 10px; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.welcome-cta-primary { background: hsl(var(--od-primary)); color: hsl(var(--od-on-feature)); border: 1px solid hsl(var(--od-primary)); }
.welcome-cta-primary:hover { background: hsl(var(--od-ocean-mid)); color: #fff; }
.welcome-cta-ghost { background: transparent; color: hsl(var(--od-primary)); border: 1px solid hsl(var(--od-border)); }
.welcome-cta-ghost:hover { background: hsl(var(--od-primary) / 0.08); border-color: hsl(var(--od-primary) / 0.4); }
/* Completed essential: clearly-done treatment — success-tinted card with a
   large "Done ✓" badge anchored to the bottom-right corner. */
.welcome-ess-card.is-done {
  background: hsl(var(--od-success) / 0.08);
  border-color: hsl(var(--od-success) / 0.45);
}
.welcome-ess-card.is-done .welcome-ess-num {
  background: hsl(var(--od-success));
}
.welcome-done-badge {
  align-self: flex-end;          /* push to the right edge of the card */
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto;              /* sit at the bottom of the flex column */
  padding: 8px 14px;
  border-radius: 9999px;
  background: hsl(var(--od-success) / 0.15);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.05rem; font-weight: 700; line-height: 1;
  color: hsl(var(--od-success));
  letter-spacing: 0.01em;
}
.welcome-done-badge .welcome-done-text { order: 0; }   /* "Done" first */
.welcome-done-badge .bi { order: 1; font-size: 1.5rem; }  /* larger tick after */

/* ── D. Going further cards (whole card is the link) ── */
.welcome-further-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.welcome-further-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 16px;
  background: hsl(var(--od-card));
  border: 1px solid hsl(var(--od-border));
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.welcome-further-icon {
  width: 38px; height: 38px; margin-bottom: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: hsl(var(--od-muted));
  color: hsl(var(--od-muted-fg)); font-size: 1.1rem;
}
.welcome-further-card strong { font-size: 0.92rem; color: hsl(var(--od-foreground)); }
.welcome-further-card span { font-size: 0.8rem; color: hsl(var(--od-muted-fg)); }

/* Shared hover lift for clickable cards */
.welcome-ess-card:hover,
.welcome-further-card:hover,
.welcome-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.07);
}
.welcome-further-card:hover { border-color: hsl(var(--od-primary) / 0.4); }

/* ── E. Use it right now (warm band) ── */
.welcome-now {
  display: grid; grid-template-columns: minmax(220px, 0.7fr) 2.6fr; gap: 24px;
  padding: 26px;
  border-radius: 20px;
  background: linear-gradient(135deg, hsl(var(--od-feature-soft)), hsl(var(--od-feature-soft) / 0.65));
  border: 1px solid hsl(var(--od-feature) / 0.25);
}
.welcome-now-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.welcome-now-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 9999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: hsl(var(--od-on-feature)); background: hsl(var(--od-feature));
}
.welcome-now-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.4rem; font-weight: 700; color: hsl(var(--od-feature-ink)); margin: 4px 0 0;
}
.welcome-now-copy { font-size: 0.9rem; line-height: 1.5; color: hsl(var(--od-feature-ink) / 0.85); margin: 0; }
.welcome-now-arrow {
  font-size: 1.6rem; color: hsl(var(--od-feature)); margin-top: 4px;
  animation: welcomeArrowBob 1.4s ease-in-out infinite;
}
@keyframes welcomeArrowBob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

.welcome-now-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.welcome-tool-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 16px;
  background: hsl(var(--od-card));
  border: 1px solid hsl(var(--od-border));
  border-radius: 14px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.welcome-tool-icon {
  width: 38px; height: 38px; margin-bottom: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: hsl(var(--od-feature) / 0.14);
  color: hsl(var(--od-feature)); font-size: 1.15rem;
}
.welcome-tool-card strong { font-size: 0.95rem; color: hsl(var(--od-foreground)); }
.welcome-tool-desc { font-size: 0.8rem; color: hsl(var(--od-muted-fg)); }
.welcome-tool-note {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 8px 0 2px; padding: 7px 9px;
  font-size: 0.74rem; line-height: 1.4;
  color: hsl(var(--od-feature-ink));
  background: hsl(var(--od-feature) / 0.1);
  border-radius: 8px;
}
.welcome-tool-note .bi { flex-shrink: 0; margin-top: 1px; }
.welcome-open-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; margin-top: auto; padding: 9px 14px;
  font-family: 'Manrope', sans-serif; font-size: 0.86rem; font-weight: 600;
  color: hsl(var(--od-on-feature)); background: hsl(var(--od-feature));
  border-radius: 10px; text-decoration: none;
  transition: background 0.15s;
}
.welcome-open-btn:hover { background: hsl(var(--od-feature-hover)); color: hsl(var(--od-on-feature)); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .welcome-further-grid,
  .welcome-now-grid { grid-template-columns: repeat(2, 1fr); }
  .welcome-now { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .welcome-hero { grid-template-columns: 1fr; justify-items: start; padding: 26px 22px; }
  .welcome-ring { margin-top: 6px; }
  .welcome-essentials-grid { grid-template-columns: 1fr; }
  .welcome-further-grid,
  .welcome-now-grid { grid-template-columns: 1fr; }
  .welcome-h1 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-now-arrow { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   Signup attribution card — the "How did you find us?" prompt
   (templates/partials/_signup_survey_card.html)

   A corner card, deliberately not a modal: no backdrop, so the page
   stays fully usable behind it. z-index sits below Bootstrap's 1055
   so a real modal always covers it.
   ═══════════════════════════════════════════════════════════════ */
.tps-card {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;
  width: 330px;
  max-width: calc(100vw - 40px);
  background: hsl(var(--od-card));
  border: 1px solid hsl(var(--od-border));
  border-radius: var(--od-radius);
  box-shadow: 0 12px 32px hsl(var(--od-ocean-dark) / 0.18);
  color: hsl(var(--od-foreground));
  font-family: var(--od-font-body);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}
.tps-card.is-open { opacity: 1; transform: translateY(0); }

.tps-body { position: relative; padding: 18px 18px 14px; }

.tps-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: hsl(var(--od-muted-fg));
  font-size: .75rem;
  cursor: pointer;
  transition: var(--od-transition);
}
.tps-close:hover { background: hsl(var(--od-muted)); color: hsl(var(--od-foreground)); }

.tps-title {
  font-family: var(--od-font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 28px 4px 0;
  color: hsl(var(--od-foreground));
}
.tps-sub {
  font-size: .8rem;
  line-height: 1.45;
  color: hsl(var(--od-muted-fg));
  margin: 0 0 14px;
}

.tps-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
/* `[hidden] { display: none }` is UA-origin, so the author `display: grid`
   above beats it. Without this rule, setting .hidden on the grid does nothing
   and the "Other" step renders underneath all eight buttons. */
.tps-options[hidden] { display: none; }
.tps-option {
  padding: 9px 8px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  text-align: center;
  background: hsl(var(--od-muted));
  color: hsl(var(--od-foreground));
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: var(--od-transition);
}
.tps-option:hover {
  background: hsl(var(--od-primary));
  color: hsl(var(--od-primary-fg));
  transform: translateY(-1px);
}
.tps-option:focus-visible {
  outline: 2px solid hsl(var(--od-primary));
  outline-offset: 2px;
}

/* ── "Other" free-text step ── */
.tps-other-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: hsl(var(--od-foreground));
}
.tps-other-input {
  width: 100%;
  padding: 9px 10px;
  font-family: inherit;
  font-size: .82rem;
  color: hsl(var(--od-foreground));
  background: hsl(var(--od-background));
  border: 1px solid hsl(var(--od-border));
  border-radius: 9px;
}
.tps-other-input:focus {
  outline: none;
  border-color: hsl(var(--od-primary));
  box-shadow: 0 0 0 3px hsl(var(--od-primary) / 0.15);
}
.tps-other-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.tps-back {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: .78rem;
  color: hsl(var(--od-muted-fg));
  cursor: pointer;
}
.tps-back:hover { color: hsl(var(--od-foreground)); text-decoration: underline; }
.tps-send {
  padding: 8px 16px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  background: hsl(var(--od-primary));
  color: hsl(var(--od-primary-fg));
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: var(--od-transition);
}
.tps-send:hover { background: hsl(var(--od-ocean-mid)); }

/* ── Footer ── */
.tps-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.tps-later,
.tps-never {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: .78rem;
  color: hsl(var(--od-muted-fg));
  cursor: pointer;
}
.tps-never { font-size: .72rem; }
.tps-later:hover,
.tps-never:hover { color: hsl(var(--od-foreground)); text-decoration: underline; }

/* ── Thank-you state ── */
.tps-thanks {
  padding: 30px 18px;
  text-align: center;
}
.tps-thanks i {
  font-size: 1.6rem;
  color: hsl(var(--od-success));
}
.tps-thanks p {
  margin: 8px 0 0;
  font-size: .85rem;
  font-weight: 500;
  color: hsl(var(--od-foreground));
}

@media (max-width: 560px) {
  .tps-card { right: 12px; left: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tps-card { transition: opacity .01s; transform: none; }
  .tps-option:hover { transform: none; }
}