/* Market Masters World (Prompt 23) -- Phase 3: Trading Floor.
   "Dark financial terminal" aesthetic built ONLY on this site's own real
   Obsidian & Emerald tokens (ci-tokens.css) -- no invented palette. Green
   (--ci-green) is reserved for the brand + genuine "up" moves; gold is used
   sparingly (simulation/education badges, highlights) per the directive's
   "controlled gold accents" ask. Every profit/loss indicator pairs colour
   with a +/- glyph or up/down icon so colour is never the only signal
   (WCAG 2.2 non-color-only requirement). */

:root {
  --mm-gold: #d4af6a;
  --mm-gold-soft: rgba(212, 175, 106, 0.14);
  --mm-up: var(--ci-green);
  --mm-down: #e2685c; /* distinct from brand green, used ONLY for down-moves inside the terminal so P&L is legible; the sitewide --ci-danger token stays green per the client's own red-to-green rule -- this is a semantic finance colour, not a UI "danger" state. */
}

.ci-mm-wrap { display: flex; flex-direction: column; gap: var(--ci-s5); font-family: var(--ci-font-body); color: var(--ci-bone); }

/* Persistent, non-dismissible disclosure -- directive requirement: never
   buried in fine print. */
.ci-mm-disclosure {
  display: flex; align-items: center; gap: var(--ci-s3);
  background: var(--mm-gold-soft);
  border: 1px solid rgba(212, 175, 106, 0.35);
  border-radius: var(--ci-r-md);
  padding: var(--ci-s3) var(--ci-s4);
  font-size: var(--ci-fs-small);
  color: var(--ci-text-2);
  position: sticky; top: 0; z-index: 20;
}
.ci-mm-disclosure svg { flex-shrink: 0; color: var(--mm-gold); }
.ci-mm-disclosure b { color: var(--ci-bone); }

.ci-mm-backend-banner {
  display: flex; align-items: center; gap: var(--ci-s2);
  font-size: var(--ci-fs-micro); text-transform: uppercase; letter-spacing: .04em;
  padding: var(--ci-s2) var(--ci-s4); border-radius: var(--ci-r-pill);
  background: var(--ci-chip); color: var(--ci-text-4); width: fit-content;
}
.ci-mm-backend-banner.is-wired { color: var(--ci-green-text); background: var(--ci-green-soft); }
.ci-mm-backend-banner.is-stub { color: var(--mm-gold); background: var(--mm-gold-soft); }
.ci-mm-backend-banner .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.ci-mm-hero { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ci-s4); flex-wrap: wrap; }
.ci-mm-hero h2 { font-family: var(--ci-font-display); font-size: var(--ci-fs-h2); margin: 0; }
.ci-mm-hero p { color: var(--ci-text-3); margin: 0; font-size: var(--ci-fs-small); }

/* Grid: desktop 3-column terminal layout */
.ci-mm-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  gap: var(--ci-s4);
  align-items: start;
}
.ci-mm-col { display: flex; flex-direction: column; gap: var(--ci-s4); min-width: 0; }

.ci-mm-panel {
  background: var(--ci-surface); border: 1px solid var(--ci-line); border-radius: var(--ci-r-lg);
  box-shadow: var(--ci-shadow-card); padding: var(--ci-s4); min-width: 0;
}
.ci-mm-panel h3 {
  font-size: var(--ci-fs-small); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ci-text-4); margin: 0 0 var(--ci-s3) 0; display: flex; justify-content: space-between; align-items: center;
}

/* Watchlist */
.ci-mm-watchlist-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ci-s2);
  padding: var(--ci-s2) var(--ci-s2); border-radius: var(--ci-r-md); cursor: pointer;
  border: 1px solid transparent;
}
.ci-mm-watchlist-row:hover, .ci-mm-watchlist-row:focus-visible { background: var(--ci-surface-2); border-color: var(--ci-line); }
.ci-mm-watchlist-row.active { background: var(--ci-green-soft); border-color: var(--ci-green-ring); }
.ci-mm-watchlist-sym { font-weight: 700; font-family: var(--ci-font-mono); font-size: var(--ci-fs-body); }
.ci-mm-watchlist-name { color: var(--ci-text-4); font-size: var(--ci-fs-micro); display: block; }
.ci-mm-watchlist-price { font-family: var(--ci-font-mono); text-align: right; }
.ci-mm-pin {
  background: none; border: none; color: var(--ci-text-5); cursor: pointer; padding: var(--ci-s1);
  border-radius: var(--ci-r-sm);
}
.ci-mm-pin:hover, .ci-mm-pin:focus-visible { color: var(--mm-gold); }
.ci-mm-pin[aria-pressed="true"] { color: var(--mm-gold); }

/* Non-color-only P&L: every value gets a glyph + icon, never colour alone */
.ci-mm-delta { font-family: var(--ci-font-mono); display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.ci-mm-delta.up { color: var(--mm-up); }
.ci-mm-delta.down { color: var(--mm-down); }
.ci-mm-delta .glyph { font-weight: 900; }
.ci-mm-delta svg { width: 12px; height: 12px; }

/* Chart panel */
.ci-mm-chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-s3); flex-wrap: wrap; margin-bottom: var(--ci-s3); }
.ci-mm-chart-title { display: flex; align-items: baseline; gap: var(--ci-s3); }
.ci-mm-chart-title .sym { font-family: var(--ci-font-mono); font-size: var(--ci-fs-h3); font-weight: 800; }
.ci-mm-chart-title .last { font-family: var(--ci-font-mono); font-size: var(--ci-fs-h3); }
.ci-mm-toggle-group { display: inline-flex; background: var(--ci-surface-2); border-radius: var(--ci-r-pill); padding: 3px; gap: 2px; }
.ci-mm-toggle-group button {
  background: none; border: none; color: var(--ci-text-3); padding: 6px 14px; border-radius: var(--ci-r-pill);
  font-size: var(--ci-fs-small); cursor: pointer; font-weight: 600;
}
.ci-mm-toggle-group button.active { background: var(--ci-green); color: var(--ci-on-green); }
.ci-mm-toggle-group button:focus-visible, .ci-mm-pin:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--ci-green); outline-offset: 2px;
}
#ci-mm-chart-el { width: 100%; height: 420px; }
.ci-mm-fullscreen-btn { background: var(--ci-chip); border: 1px solid var(--ci-line); color: var(--ci-text-2); border-radius: var(--ci-r-sm); padding: 6px 10px; cursor: pointer; font-size: var(--ci-fs-small); }
.ci-mm-chart-wrap.is-fullscreen {
  position: fixed; inset: 0; z-index: 2000; background: var(--ci-ink); padding: var(--ci-s4);
  display: flex; flex-direction: column;
}
.ci-mm-chart-wrap.is-fullscreen #ci-mm-chart-el { flex: 1 1 auto; height: auto; }

/* Order entry */
.ci-mm-order-tabs { display: flex; gap: var(--ci-s2); margin-bottom: var(--ci-s3); }
.ci-mm-order-tabs button {
  flex: 1; padding: 8px; border-radius: var(--ci-r-md); border: 1px solid var(--ci-line);
  background: var(--ci-surface-2); color: var(--ci-text-2); font-weight: 700; cursor: pointer;
}
.ci-mm-order-tabs button[data-side="buy"].active { background: var(--ci-green-soft); color: var(--ci-green-text); border-color: var(--ci-green-ring); }
.ci-mm-order-tabs button[data-side="sell"].active { background: rgba(226,104,92,0.14); color: var(--mm-down); border-color: rgba(226,104,92,0.35); }

.ci-mm-field { margin-bottom: var(--ci-s3); }
.ci-mm-field label { display: block; font-size: var(--ci-fs-micro); color: var(--ci-text-4); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.ci-mm-field input, .ci-mm-field select {
  width: 100%; background: var(--ci-surface-2); border: 1px solid var(--ci-line); border-radius: var(--ci-r-sm);
  color: var(--ci-bone); padding: 10px 12px; font-family: var(--ci-font-mono); font-size: var(--ci-fs-body);
}
.ci-mm-order-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ci-s2); }
.ci-mm-submit-btn {
  width: 100%; padding: 12px; border-radius: var(--ci-r-md); border: none; font-weight: 800;
  cursor: pointer; font-size: var(--ci-fs-body); margin-top: var(--ci-s2);
}
.ci-mm-submit-btn.buy { background: var(--ci-green); color: var(--ci-on-green); }
.ci-mm-submit-btn.sell { background: var(--mm-down); color: #1a0a08; }
.ci-mm-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

.ci-mm-notwired-note {
  margin-top: var(--ci-s3); font-size: var(--ci-fs-small); color: var(--mm-gold); background: var(--mm-gold-soft);
  border: 1px solid rgba(212,175,106,.3); border-radius: var(--ci-r-md); padding: var(--ci-s3);
}

/* Confirmation modal */
.ci-mm-confirm-overlay { position: fixed; inset: 0; background: rgba(7,8,12,.72); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: var(--ci-s4); }
.ci-mm-confirm-card { background: var(--ci-surface); border: 1px solid var(--ci-line-strong); border-radius: var(--ci-r-lg); box-shadow: var(--ci-shadow-card); max-width: 420px; width: 100%; padding: var(--ci-s5); }
.ci-mm-confirm-card h4 { margin: 0 0 var(--ci-s3); font-family: var(--ci-font-display); }
.ci-mm-confirm-row { display: flex; justify-content: space-between; padding: var(--ci-s2) 0; border-bottom: 1px solid var(--ci-line-soft); font-size: var(--ci-fs-small); }
.ci-mm-confirm-actions { display: flex; gap: var(--ci-s3); margin-top: var(--ci-s4); }
.ci-mm-confirm-actions button { flex: 1; padding: 10px; border-radius: var(--ci-r-md); font-weight: 700; cursor: pointer; }
.ci-mm-confirm-actions .cancel { background: var(--ci-surface-2); border: 1px solid var(--ci-line); color: var(--ci-text-2); }
.ci-mm-confirm-actions .confirm { background: var(--ci-green); border: none; color: var(--ci-on-green); }

/* Portfolio summary */
.ci-mm-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ci-s3); }
.ci-mm-stat { background: var(--ci-surface-2); border-radius: var(--ci-r-md); padding: var(--ci-s3); }
.ci-mm-stat .label { font-size: var(--ci-fs-micro); color: var(--ci-text-4); text-transform: uppercase; }
.ci-mm-stat .value { font-family: var(--ci-font-mono); font-size: var(--ci-fs-h3); margin-top: 2px; }

/* Positions / orders tables */
.ci-mm-table { width: 100%; border-collapse: collapse; font-size: var(--ci-fs-small); }
.ci-mm-table th { text-align: left; color: var(--ci-text-4); font-weight: 600; padding: var(--ci-s2); border-bottom: 1px solid var(--ci-line); text-transform: uppercase; font-size: var(--ci-fs-micro); }
.ci-mm-table td { padding: var(--ci-s2); border-bottom: 1px solid var(--ci-line-soft); font-family: var(--ci-font-mono); }
.ci-mm-empty { color: var(--ci-text-4); font-size: var(--ci-fs-small); padding: var(--ci-s4) 0; text-align: center; }

/* News / economic indicators placeholders */
.ci-mm-placeholder-panel { display: flex; align-items: center; gap: var(--ci-s3); color: var(--ci-text-3); font-size: var(--ci-fs-small); }
.ci-mm-placeholder-panel svg { flex-shrink: 0; color: var(--ci-text-5); }

/* Notifications */
.ci-mm-notif-item { display: flex; gap: var(--ci-s2); padding: var(--ci-s2) 0; border-bottom: 1px solid var(--ci-line-soft); font-size: var(--ci-fs-small); }
.ci-mm-notif-item:last-child { border-bottom: none; }
.ci-mm-notif-time { color: var(--ci-text-5); font-size: var(--ci-fs-micro); white-space: nowrap; }

/* ===================== MOBILE: dedicated layout, not a shrink ===================== */
.ci-mm-bottomnav { display: none; }

@media (max-width: 900px) {
  .ci-mm-grid { display: block; }
  .ci-mm-col { display: none; }
  .ci-mm-col.mm-active-panel { display: flex; }

  .ci-mm-swipe-tabs {
    display: flex; gap: var(--ci-s2); overflow-x: auto; padding-bottom: var(--ci-s2); margin-bottom: var(--ci-s3);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ci-mm-swipe-tabs::-webkit-scrollbar { display: none; }
  .ci-mm-swipe-tabs button {
    flex-shrink: 0; background: var(--ci-surface-2); border: 1px solid var(--ci-line); color: var(--ci-text-2);
    padding: 8px 16px; border-radius: var(--ci-r-pill); font-size: var(--ci-fs-small); font-weight: 700; cursor: pointer;
  }
  .ci-mm-swipe-tabs button.active { background: var(--ci-green); color: var(--ci-on-green); border-color: var(--ci-green); }

  #ci-mm-chart-el { height: 280px; }
  .ci-mm-panel { padding: var(--ci-s3); }

  /* Compact touch-friendly order ticket */
  .ci-mm-order-type-grid { grid-template-columns: 1fr; }
  .ci-mm-field input, .ci-mm-field select { padding: 14px 12px; font-size: 16px; } /* 16px avoids iOS auto-zoom */
  .ci-mm-submit-btn { padding: 16px; font-size: var(--ci-fs-h3); }

  /* Real bottom nav bar -- mobile-only component, not present on desktop */
  .ci-mm-bottomnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500;
    background: var(--ci-topbar-bg); backdrop-filter: blur(10px);
    border-top: 1px solid var(--ci-line); padding: 6px env(safe-area-inset-right) calc(6px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    justify-content: space-around;
  }
  .ci-mm-bottomnav button {
    background: none; border: none; color: var(--ci-text-4); display: flex; flex-direction: column; align-items: center;
    gap: 2px; font-size: var(--ci-fs-micro); padding: 6px 10px; cursor: pointer; flex: 1;
  }
  .ci-mm-bottomnav button.active { color: var(--ci-green-text); }
  .ci-mm-bottomnav svg { width: 20px; height: 20px; }
  .ci-mm-wrap { padding-bottom: 72px; } /* clear the fixed bottom nav */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ci-mm-wrap *, .ci-mm-wrap *::before, .ci-mm-wrap *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================================
   Market Masters World Phase 5 (2026-11-03): AI Financial Academy / Mentor /
   Career page (academy.phtml). Own .ci-mma- namespace to avoid any collision
   with Phase 3's trading-floor-specific .ci-mm- classes above, built on the
   same design tokens for visual consistency.
   ============================================================================ */
.ci-mma-tabs { display: flex; gap: var(--ci-s2); border-bottom: 1px solid var(--ci-line); padding-bottom: var(--ci-s2); flex-wrap: wrap; }
.ci-mma-tab {
  background: none; border: none; color: var(--ci-text-3); font-family: var(--ci-font-body);
  font-size: var(--ci-fs-small); padding: var(--ci-s3) var(--ci-s4); border-radius: var(--ci-r-pill); cursor: pointer;
}
.ci-mma-tab.active { background: var(--ci-green-soft); color: var(--ci-green-text); }
.ci-mma-tab:hover { background: var(--ci-surface-2); }

.ci-mma-row { display: flex; gap: var(--ci-s4); align-items: flex-start; }
.ci-mma-row > .ci-mm-col { flex: 1 1 0; min-width: 0; }

.ci-mma-btn {
  background: var(--ci-green); color: var(--ci-on-green); border: none; border-radius: var(--ci-r-md);
  padding: var(--ci-s3) var(--ci-s4); font-size: var(--ci-fs-small); cursor: pointer; font-weight: 600;
}
.ci-mma-btn:hover { filter: brightness(1.08); }
.ci-mma-btn:disabled { opacity: .5; cursor: not-allowed; }
.ci-mma-btn-ghost {
  background: var(--ci-surface-2); color: var(--ci-bone); border: 1px solid var(--ci-line);
  border-radius: var(--ci-r-md); padding: var(--ci-s3) var(--ci-s4); font-size: var(--ci-fs-small); cursor: pointer;
}
.ci-mma-btn-ghost:hover { background: var(--ci-chip); }

.ci-mma-loading { color: var(--ci-text-4); font-size: var(--ci-fs-small); padding: var(--ci-s4) 0; }

.ci-mma-rank-row { display: flex; justify-content: space-between; align-items: baseline; }
.ci-mma-rank-title { font-family: var(--ci-font-display); font-size: var(--ci-fs-h3); color: var(--ci-bone); }
.ci-mma-xp { color: var(--ci-green-text); font-size: var(--ci-fs-small); font-weight: 600; }
.ci-mma-progress { background: var(--ci-surface-2); border-radius: var(--ci-r-pill); height: 10px; margin: var(--ci-s3) 0; overflow: hidden; }
.ci-mma-progress-fill { background: var(--ci-green); height: 100%; border-radius: var(--ci-r-pill); transition: width .3s ease; }

.ci-mma-mission {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ci-s3);
  padding: var(--ci-s3) 0; border-bottom: 1px solid var(--ci-line);
}
.ci-mma-mission:last-child { border-bottom: none; }
.ci-mma-badge {
  font-size: var(--ci-fs-micro); text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px;
  border-radius: var(--ci-r-pill); background: var(--ci-chip); color: var(--ci-text-4); white-space: nowrap;
}
.ci-mma-mission-completed .ci-mma-badge { background: var(--ci-green-soft); color: var(--ci-green-text); }
.ci-mma-quadrant { background: var(--ci-green-soft); color: var(--ci-green-text); display: inline-block; margin-bottom: var(--ci-s2); }

.ci-mma-badges { display: flex; flex-wrap: wrap; gap: var(--ci-s3); }
.ci-mma-achievement {
  padding: var(--ci-s3) var(--ci-s4); border-radius: var(--ci-r-md); font-size: var(--ci-fs-small);
  border: 1px solid var(--ci-line); background: var(--ci-surface-2); color: var(--ci-text-4);
}
.ci-mma-achievement.unlocked { background: var(--ci-green-soft); color: var(--ci-green-text); border-color: var(--ci-green-ring); }

.ci-mma-pathway-tag {
  font-size: var(--ci-fs-micro); text-transform: uppercase; color: var(--ci-text-4); display: block; margin-bottom: 2px;
}
.ci-mma-course { padding: var(--ci-s3) 0; border-bottom: 1px solid var(--ci-line); cursor: pointer; }
.ci-mma-course:last-child { border-bottom: none; }
.ci-mma-lesson-list { padding: var(--ci-s2) 0 0 var(--ci-s3); display: flex; flex-direction: column; gap: 4px; }
.ci-mma-lesson-link { font-size: var(--ci-fs-small); color: var(--ci-text-3); padding: var(--ci-s2); border-radius: var(--ci-r-md); cursor: pointer; }
.ci-mma-lesson-link:hover { background: var(--ci-surface-2); }
.ci-mma-lesson-link.done { color: var(--ci-green-text); }

.ci-mma-choices { display: flex; flex-direction: column; gap: var(--ci-s2); margin-top: var(--ci-s3); }
.ci-mma-quiz-result { margin-top: var(--ci-s3); font-size: var(--ci-fs-small); }

.ci-mma-inline-form { display: flex; gap: var(--ci-s2); margin-top: var(--ci-s2); }
.ci-mma-inline-form input {
  flex: 1; background: var(--ci-surface-2); border: 1px solid var(--ci-line); border-radius: var(--ci-r-md);
  padding: var(--ci-s3); color: var(--ci-bone); font-size: var(--ci-fs-small);
}
.ci-mma-reply { margin-top: var(--ci-s3); font-size: var(--ci-fs-small); color: var(--ci-text-2); line-height: 1.5; }

.ci-mma-chat-log { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--ci-s2); margin-bottom: var(--ci-s2); }
.ci-mma-chat-msg { padding: var(--ci-s3); border-radius: var(--ci-r-md); font-size: var(--ci-fs-small); max-width: 85%; }
.ci-mma-chat-msg.user { background: var(--ci-chip); color: var(--ci-bone); align-self: flex-end; }
.ci-mma-chat-msg.assistant { background: var(--ci-surface-2); color: var(--ci-text-2); align-self: flex-start; }
.ci-mma-chat-msg.thinking { opacity: .6; }

@media (max-width: 900px) {
  .ci-mma-row { flex-direction: column; }
  .ci-mma-inline-form { flex-direction: column; }
  .ci-mma-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}