/* =============================================================================
   APEX shell — shared design system + chrome
   Used by every top-level APEX page (dashboard, settings, recruits, etc.)
   The transcript module has its own copy of these tokens in modules/transcript/
   static/app.css for now (since it was themed before this consolidation).
   ============================================================================= */

:root {
  --bg:          #f7f6f3;
  --sidebar:     #fdfcfa;
  --panel:       #ffffff;
  --panel-2:     #f1eee9;
  --line:        #e6e2db;
  --line-bright: #d6d1c8;

  --text:        #1a1a1c;
  --text-2:      #56564f;
  --text-3:      #8b8a82;

  --accent:      #b81322;
  --accent-soft: rgba(184,19,34,0.08);
  --accent-hover:#8f0e1a;

  --success:     #166534;
  --warn:        #92400e;
  --danger:      #b81322;

  --shadow-1:    0 1px 2px rgba(15,15,20,0.04);
  --shadow-2:    0 1px 3px rgba(15,15,20,0.06), 0 4px 12px rgba(15,15,20,0.04);
  --shadow-pop:  0 1px 3px rgba(15,15,20,0.08), 0 12px 32px rgba(15,15,20,0.12);

  --radius-sm:   5px;
  --radius:      8px;
  --radius-lg:   10px;

  /* ---- Motion ----
   * Custom easing curves instead of CSS defaults. ease-out (fast start, gentle
   * settle) is right for UI that responds to a user action — it feels snappy
   * and immediate. Durations stay short (120-200ms) so the interface never
   * feels like it's waiting on itself; perceived speed matters as much as real
   * speed. These are the standard "design-engineering" curves. */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* responsive settle */
  --ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);       /* symmetric moves */
  --dur-fast:   120ms;
  --dur:        160ms;

  /* ---- Aliases ----
   * Older modules (recruits, score_tracker, travel, communication) reference
   * token names that predate the canonical set above. Defining them here as
   * aliases makes every module theme-consistent and fixes a handful of
   * no-fallback var() uses that would otherwise drop the property. Keep these
   * pointed at the canonical tokens — don't introduce new colors. */
  --ink:                 var(--text);          /* burgundy-era "ink" == text */
  --bg-soft:             var(--panel-2);        /* soft panel fill */
  --surface:             var(--panel);          /* white surface */
  --border:              var(--line);
  --border-soft:         var(--line);
  --line-dim:            var(--line);
  --text-muted:          var(--text-3);
  --dim:                 var(--text-3);
  --radius-md:           var(--radius);
  --brand:               var(--accent);         /* APEX burgundy, not blue */
  --brand-primary:       var(--accent);
  --brand-primary-hover: var(--accent-hover);
  --burgundy:            var(--accent);
  --burgundy-hover:      var(--accent-hover);
  --cream:               var(--bg);
  --brand2:              var(--accent-hover);
  --warn-bg:             rgba(146,64,14,0.10);  /* --warn at low alpha */
  --warn-border:         rgba(146,64,14,0.30);
  --warn-text:           var(--warn);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* =============================================================================
   LAYOUT — sidebar + main
   ============================================================================= */

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* =============================================================================
   SIDEBAR
   ============================================================================= */

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.sb-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 8px;
  margin-bottom: 16px;
}
.sb-mark {
  width: 28px; height: 28px;
  background: var(--accent);
  border-radius: 6px;
  display: grid; place-items: center;
}
.sb-brand-text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
}

/* Workspace switcher button (top of sidebar) */
.ws-switch {
  margin: 0 0 16px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  box-shadow: var(--shadow-1);
  position: relative;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
  font: inherit;
}
.ws-switch:hover { background: var(--panel-2); border-color: var(--line-bright); }
.ws-info { flex: 1; min-width: 0; }
.ws-name {
  font-size: 12px; font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-plan { font-size: 10px; color: var(--text-3); }
.ws-chev { color: var(--text-3); display: flex; flex-shrink: 0; }

/* Sidebar items */
.sb-section {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 10px 6px;
}

.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.sb-item:hover { background: var(--panel-2); color: var(--text); }
.sb-item.active {
  background: var(--panel-2);
  color: var(--text);
  font-weight: 500;
}
.sb-item .ico { width: 15px; height: 15px; opacity: 0.85; flex-shrink: 0; }
/* Active item gets a burgundy-filled icon. Removes the dim opacity so the
   icon reads at full strength alongside the bolder text. */
.sb-item.active .ico {
  color: var(--accent);
  opacity: 1;
}
.sb-item .count {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-3);
  font-weight: 500;
}

.sb-spacer { flex: 1; }
.sb-foot {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 8px;
}

/* =============================================================================
   TOPBAR
   ============================================================================= */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

.topbar {
  height: 52px;
  background: var(--sidebar);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.crumbs .c1 { color: var(--text-2); cursor: pointer; transition: color 0.15s; }
.crumbs .c1:hover { color: var(--text); }
.crumbs .sep { color: var(--text-3); }
.crumbs .c2 { color: var(--text); font-weight: 500; }

.topbar-right { display: flex; align-items: center; gap: 10px; }

/* Search trigger pill in the topbar */
.search-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12px;
  color: var(--text-3);
  width: 220px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font: inherit;
  text-align: left;
}
.search-trigger:hover { background: var(--panel); border-color: var(--line-bright); }
.search-trigger .kbd {
  margin-left: auto;
  padding: 1px 5px;
  background: var(--sidebar);
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: var(--text-2);
}

/* User avatar — opens profile menu on click */
.me-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f1f24, #0a0a0c);
  border: none;
  color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s;
}
.me-btn:hover { transform: scale(1.05); }

/* =============================================================================
   POPOVER MENU (used by workspace switcher and profile)
   Anchored absolutely to the trigger via JS-set CSS variables.
   ============================================================================= */

.popover {
  position: absolute;
  z-index: 100;
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 6px;
  display: none;
  /* Subtle fade-in animation */
  animation: popoverIn var(--dur-fast) var(--ease-out);
}
.popover.open { display: block; }
@keyframes popoverIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.popover-header {
  padding: 8px 10px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.popover-header .name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.popover-header .sub  { font-size: 11px; color: var(--text-3); margin-top: 1px; }

.popover-section {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 10px 4px;
}

.popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
}
.popover-item:hover { background: var(--panel-2); }
.popover-item .ico { width: 14px; height: 14px; color: var(--text-2); flex-shrink: 0; }
.popover-item.active { background: var(--accent-soft); color: var(--accent); }
.popover-item.active .ico { color: var(--accent); }
.popover-item .check { margin-left: auto; color: var(--accent); }
.popover-item.danger { color: var(--danger); }
.popover-item.danger .ico { color: var(--danger); }

.popover-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

/* Workspace switcher dropdown — drops below the .ws-switch button.
   The .ws-switch-wrap parent has position: relative so the popover anchors
   to the button regardless of where it sits in the sidebar. */
.ws-switch-wrap {
  position: relative;
  margin: 0 0 16px;
}
.ws-switch-wrap .ws-switch {
  margin: 0;  /* margin moved up to the wrapper */
}
.ws-popover {
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  min-width: 0;
}
.ws-mini {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.ws-popover .popover-item .meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ws-popover .popover-item .meta .nm { font-size: 13px; font-weight: 500; }
.ws-popover .popover-item .meta .pl { font-size: 10.5px; color: var(--text-3); }

/* Profile menu — drops below the avatar (top-right) */
.profile-popover { right: 28px; top: 56px; min-width: 220px; }

/* =============================================================================
   COMMAND PALETTE (⌘K)
   Centered modal over a backdrop scrim.
   ============================================================================= */

.cmdk-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,15,20,0.4);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: none;
  animation: scrimIn var(--dur) var(--ease-out);
}
.cmdk-backdrop.open { display: block; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

.cmdk {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 92vw);
  background: var(--panel);
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  z-index: 201;
  display: none;
  flex-direction: column;
  max-height: 64vh;
  overflow: hidden;
  animation: cmdkIn var(--dur) var(--ease-out);
}
.cmdk.open { display: flex; }
@keyframes cmdkIn {
  from { opacity: 0; transform: translate(-50%, -4px) scale(0.99); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.cmdk-input-wrap svg { color: var(--text-3); }
.cmdk-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--text);
}
.cmdk-input::placeholder { color: var(--text-3); }
.cmdk-input-wrap .esc {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  padding: 2px 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-2);
}

.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-section {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 10px 4px;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.cmdk-item.selected { background: var(--accent-soft); color: var(--accent); }
.cmdk-item.selected .ico { color: var(--accent); }
.cmdk-item.selected .arrow { opacity: 1; color: var(--accent); }
.cmdk-item .ico { width: 15px; height: 15px; color: var(--text-2); flex-shrink: 0; }
.cmdk-item .label { flex: 1; }
.cmdk-item .hint { font-size: 11px; color: var(--text-3); }
.cmdk-item .arrow { opacity: 0; color: var(--text-3); }

.cmdk-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

.cmdk-footer {
  border-top: 1px solid var(--line);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: var(--text-3);
}
.cmdk-footer .keys { display: inline-flex; align-items: center; gap: 4px; }
.cmdk-footer kbd {
  font-family: ui-monospace, monospace;
  padding: 1px 5px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 10px;
  color: var(--text-2);
}

/* =============================================================================
   PAGE-LEVEL CONTENT (header + body sections)
   Used by every "real" page (settings, recruits, etc.)
   ============================================================================= */

.content {
  padding: 32px 32px 60px;
  max-width: 1800px;
  width: 100%;
}

.page-head {
  margin-bottom: 24px;
}
.page-head h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
.page-head .lead {
  color: var(--text-2);
  font-size: 14px;
}

.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 28px 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label .ln { flex: 1; height: 1px; background: var(--line); }
.section-label .count {
  padding: 2px 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  letter-spacing: 0;
  font-family: ui-monospace, monospace;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-1);
}

/* Generic empty-state used by Calendar / Reports placeholders */
.empty-state {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 80px 24px;
  text-align: center;
  box-shadow: var(--shadow-1);
}
.empty-state .ico-wrap {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--text-3);
}
.empty-state h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.empty-state p {
  color: var(--text-2);
  font-size: 13.5px;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.55;
}
.empty-state .pill {
  display: inline-block;
  margin-top: 16px;
  padding: 3px 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  font-family: ui-monospace, monospace;
}

/* =============================================================================
   MODULE TABS — segmented-pill nav (Evaluate / Tracking; Overview / Coaches / …)
   The pattern lives here in the shell so multiple modules can use the same
   classes without duplicating CSS. The base rule is full-width; modules add
   .module-nav to shrink to content width with margin-bottom for content
   placement. .nav-tab works for both <button> (transcript's in-page tab
   switcher) and <a> (twitter's cross-page nav) — text-decoration: none is a
   no-op on buttons but keeps anchors from getting a default underline.
   The .roster-count subcomponent is an optional count-badge slotted inside
   .nav-tab; .roster-count:empty hides itself when there's nothing to show.
   ============================================================================= */

.header-nav {
  display: flex;
  gap: 2px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}
.header-nav.module-nav {
  display: inline-flex;
  margin-bottom: 24px;
}
.nav-tab {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.005em;
  text-decoration: none;
}
.nav-tab:hover { color: var(--text); }
.nav-tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(184,19,34,0.25), 0 0 0 1px var(--accent);
}

/* Optional count-badge inside a nav-tab (e.g. transcript's "Tracking 3"). */
.roster-count {
  font-size: 11px;
  font-family: ui-monospace, monospace;
  font-weight: 500;
  padding: 1px 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-2);
}
.roster-count:empty { display: none; }
.nav-tab.active .roster-count {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

@media (max-width: 720px) {
  /* Tighten the pills + badge so all tabs fit on a 375px viewport without
     wrapping. Both modules use this. */
  .header-nav { padding: 2px; }
  .nav-tab { padding: 5px 10px; font-size: 12px; gap: 5px; }
  .roster-count { font-size: 10px; padding: 0 4px; }
}

/* =============================================================================
   BUTTONS — primary, secondary, danger
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 7px;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-primary {
  background: var(--text);
  color: #fff;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-secondary {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line-bright);
}
.btn-secondary:hover { background: var(--panel-2); border-color: var(--text-3); }
/* Press feedback — the button settles back to neutral on click so the
   interaction feels tactile. Subtle (1px) and fast; never a bounce. */
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-accent:active {
  transform: translateY(0);
  opacity: 0.94;
}
.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* =============================================================================
   MOBILE — sidebar slides off, hamburger toggles it back
   ============================================================================= */

/* Hamburger toggle button — visible only on mobile */
.menu-toggle {
  display: none;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.menu-toggle:hover { background: var(--panel-2); color: var(--text); }

/* Backdrop scrim that appears behind the sidebar on mobile when it's open */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,15,20,0.4);
  z-index: 40;
}
.sidebar-backdrop.open { display: block; }

@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }

  /* Sidebar slides in from the left when .sidebar-open is on body */
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 260px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 28px rgba(15,15,20,0.18);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }

  .menu-toggle { display: inline-flex; }

  /* Topbar tightens */
  .topbar { padding: 0 14px; }

  /* Content fills the screen */
  .content { padding: 22px 16px 40px; }

  /* Search trigger shrinks at mobile widths */
  .search-trigger { width: auto; padding: 5px 8px; }
  .search-trigger span:not(.kbd) { display: none; }
  .search-trigger .kbd { display: none; }

  /* Crumbs — hide breadcrumb on mobile, keep just the workspace name */
  .crumbs .sep, .crumbs .c2 { display: none; }
  .crumbs .c1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
}

/* ---------------------------------------------------------------------------
   Popover-item as a <button> — used by the Sign-out form in base.html so the
   logout POST carries CSRF. The button is laid out identically to a
   .popover-item <a>; .popover-form uses display:contents to make the form
   transparent to the popover's flex/grid layout.
   --------------------------------------------------------------------------- */
.popover-item-button {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.popover-form { display: contents; }

/* =============================================================================
   MODULE GATING — sidebar + hero card disabled states
   =============================================================================
   Used when APEX_ENABLED_MODULES env var restricts module access. Disabled
   modules render in greyed form: visible (so users see them in the product)
   but clearly inert (no hover, no click, lock icon). The "Subscription
   Required" block page (subscription_required.html) handles the case where
   someone hits the route directly. */
.sb-item-disabled {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-3);
  opacity: 0.5;
  cursor: not-allowed;
  user-select: none;
}
.sb-item-disabled .ico {
  display: flex;
  align-items: center;
  width: 16px;
  height: 16px;
  color: var(--text-3);
}
.sb-item-disabled .ico svg {
  width: 16px;
  height: 16px;
}
.sb-lock {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--text-3);
}
.sb-lock svg {
  display: block;
}

/* Hero cards on the dashboard. The locked variant keeps the icon and
   module name visible so users see what's there, but hides the stats
   (no info leak) and replaces them with a "Subscription Required" badge.
   No hover lift, no shadow, no link cursor — clearly inert. */
.hero.hero-locked {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
  background: var(--panel-2);
  border-style: dashed;
}
.hero.hero-locked .deco {
  opacity: 0.4;
}
.hero.hero-locked .icon {
  color: var(--text-3);
}
.hero.hero-locked .name {
  color: var(--text-2);
}
.hero-locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  align-self: flex-start;
}

/* Subscription Required block page — direct-hit fallback for when a user
   navigates to a disabled module's URL (bookmark, manual address bar,
   external link). Just the headline, an icon, and a way back. */
.subscription-gate {
  max-width: 480px;
  margin: 80px auto 0;
  padding: 56px 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.subscription-gate-icon {
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}
.subscription-gate-h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 24px 0;
}
.subscription-gate-back {
  display: inline-block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.subscription-gate-back:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* =============================================================================
   REDUCED MOTION
   Respect the OS-level "reduce motion" setting. Users who enable it (often for
   motion sensitivity / vestibular reasons) get near-instant transitions instead
   of movement — the interface still works identically, just without the motion.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}