/* Codex-specific styles (components + chrome).
 *
 * Design TOKENS live in css/tokens.css (the single token home), loaded before
 * this file. Codex also reuses Backstage's theme.css palette, backstage.css
 * shell chrome, and shared-components.css. Add ONLY Codex component rules here;
 * surface/text/border values come from the tokens, never hex literals. */

/* ── Codex topbar: full-width bar with a centered tab strip ───
 * The shell's --with-tabs inner caps at 1400px + centers it; drop that cap here
 * so the bar spans the full viewport, matching the now full-width content below.
 * Scoped to the Codex page; the legacy Backstage portal topbar, which shares
 * --with-tabs, keeps its cap. The strip is centered between brand and controls
 * by a leading + trailing .bs-topbar-spacer (codex-topbar.js), so .cdx-tabs
 * carries no side margin of its own. */
.bs-topbar-inner--with-tabs { max-width: none; }

/* ── Rich tab strip in the Codex topbar ─────────────────────── */
.cdx-tabs {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  min-width: 0;
  overflow-x: auto;
}
.cdx-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.cdx-tab:hover {
  color: var(--text-primary);
  background: var(--surface-hover, rgba(127, 127, 127, 0.12));
}
.cdx-tab-icon { display: inline-flex; color: var(--accent-color); }
.cdx-tab:not(.active) .cdx-tab-icon { opacity: 0.8; }
.cdx-tab.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

/* Bind each functional tab to its accent token. */
.cdx-tab--lessons      { --accent-color: var(--codex-lessons); }
.cdx-tab--content      { --accent-color: var(--codex-content); }
.cdx-tab--cohorts      { --accent-color: var(--codex-cohorts); }
.cdx-tab--questions    { --accent-color: var(--codex-questions); }
.cdx-tab--certificates { --accent-color: var(--codex-certificates, #8b5cf6); }

/* ── Sub-tabs (5c): one nav, two modes, positioned under the active tab ──────
 * by js/anchored.js. The mode is a global pref toggled in the Settings drawer:
 * 'pill' floats on hover of the active tab; 'bar' is a persistent strip. */
.cdx-subtab {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.8rem;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.cdx-subtab:hover { color: var(--text-primary); background: var(--cdx-card-hover-bg); }
/* active = the Codex highlight idiom: default (dark) text on faint teal, matching
 * #cdx-items-grid rows (.cdx-item-row.is-selected), not a teal-on-surface tone. */
.cdx-subtab.active { color: var(--text-primary); background: var(--cdx-card-sel-bg); }

/* 'bar' mode: a persistent, slim row; the strip centers under the active tab. */
.cdx-subrow {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.cdx-substrip { display: inline-flex; gap: 0.15rem; padding: 0.12rem 0; }

/* 'pill' mode: a floating pill, hidden until the active tab is hovered. */
.cdx-subpill {
  position: absolute;
  z-index: 60;
  display: none;
  gap: 0.15rem;
  align-items: center;
  padding: 0.3rem 0.4rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px var(--shadow);
}
.cdx-subpill.on { display: inline-flex; }

/* ── Mobile bottom navigation (advradar-style) + mobile sub-strip ─────────────
 * Codex chrome is desktop-first: on phones the top .cdx-tabs strip is flex-
 * starved (brand + controls eat the row), so the tabs become unreachable. Below
 * the phone breakpoint we hide that strip and the hover sub-pill, pin a bottom
 * tab bar, and pin a scrollable sub-strip under the topbar. Tokens only, so dark
 * mode is inherited. Codex only; the Backstage portal is a card grid that already
 * reflows on mobile. */
.cdx-botnav { display: none; }            /* desktop: hidden, revealed at the breakpoint */
.cdx-subrow--mobile { display: none; }    /* desktop: hidden, the pill/bar handle subs */

.cdx-botnav-item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 0.3rem 0.2rem;
  text-decoration: none; color: var(--text-secondary);
  font-size: 0.66rem; font-weight: 600;
}
.cdx-botnav-icon { display: inline-flex; color: currentColor; }
.cdx-botnav-item.active { color: var(--accent-color); }
.cdx-botnav-item--lessons   { --accent-color: var(--codex-lessons); }
.cdx-botnav-item--content   { --accent-color: var(--codex-content); }
.cdx-botnav-item--cohorts   { --accent-color: var(--codex-cohorts); }
.cdx-botnav-item--questions { --accent-color: var(--codex-questions); }
.cdx-botnav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mobile hamburger + drawer: desktop-hidden; the phone breakpoint reveals the
 * hamburger and turns each tab's sidebar into an off-canvas drawer. */
.cdx-hamburger { display: none; }
.cdx-drawer-backdrop { display: none; }

@media (max-width: 700px) {
  .cdx-tabs { display: none; }                            /* top strip unusable on phones */
  .cdx-subpill { display: none !important; }              /* hover pill is touch-useless */
  .cdx-subrow:not(.cdx-subrow--mobile) { display: none; } /* desktop persistent bar off */

  .cdx-subrow--mobile {
    display: block;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .cdx-subrow--mobile .cdx-substrip { padding: 0.3rem 0.6rem; }

  .cdx-botnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 60px; z-index: 100;   /* above topbar (90) + sessions sidebar (80); modals sit higher */
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px var(--shadow);
  }
  .cdx-view { padding-bottom: 76px; }                     /* clear the fixed bar */

  /* Hamburger + off-canvas sidebar drawers. Each tab's sidebar slides in from
   * the left over a backdrop; the main pane fills the row behind it. The drawer
   * sits above the topbar/bottom-nav when open (a takeover), so backdrop tap,
   * Escape, or picking an item closes it. */
  .cdx-hamburger { display: inline-flex; }

  /* Collapse the multi-column tab layouts so the main pane fills once its sidebar
   * leaves the flow (at THIS breakpoint, ahead of any tab's own 600px rule). */
  .cdx-bank, .cdx-items-split, .cdx-three-pane { grid-template-columns: 1fr; }

  /* Beat cohorts.css's `.cdx-cohorts-nav { display: contents }` (same specificity,
   * later in source) so the wrapper forms a real box the drawer can position. */
  .cdx-three-pane .cdx-cohorts-nav { display: block; }

  .cdx-bank-sets, .cdx-items-list, .cdx-lessons-sidebar, .cdx-cohorts-nav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 84vw; max-width: 340px;
    z-index: 120;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    border-radius: 0;
    box-sizing: border-box;
    background: var(--surface);   /* opaque panel (the bare cohorts wrapper has no bg of its own) */
  }
  .cdx-bank-sets.is-open, .cdx-items-list.is-open, .cdx-lessons-sidebar.is-open, .cdx-cohorts-nav.is-open {
    transform: none;
    box-shadow: 4px 0 24px var(--shadow);
  }
  .cdx-drawer-backdrop.is-open {
    display: block;
    position: fixed; inset: 0; z-index: 119;
    background: rgba(0, 0, 0, 0.5);
  }
}

/* ── Tab content host ───────────────────────────────────────── */
/* The shared Backstage shell caps .bs-main at 1200px + centers it (a reading
 * measure for the portal/dashboard). Codex faces are multi-pane app layouts
 * (Cohorts 3-pane, Content/Lessons 2-pane, Questions Bank/Sessions/host) whose
 * 1fr pane only cramps at that cap; the content that genuinely needs a measure
 * caps itself internally (Content editor 760px, session detail 60rem, Stats
 * 1200px below). So drop the shell cap and let every face use the full width.
 * This stylesheet loads ONLY on the Codex page, so the override is scoped to
 * Codex; the rest of Backstage keeps its 1200px width. Padding is untouched
 * (the Sessions/host full-bleed views negate exactly 3rem of it). Lessons' own
 * `.bs-app--classvault .bs-main` override still wins for its flush look. */
.bs-main { max-width: none; }
.cdx-view { padding: 0.5rem 1.5rem 1.5rem; }

/* Language toggle button (PT/EN). The topbar renders it only when more than
 * one dictionary is loaded; it shows the language you'd switch TO. */
.cdx-lang-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  margin-right: 0.25rem;
}
.cdx-lang-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

/* ── Notices (js/notice.js) ─────────────────────────────────────────────────
 * Persistent actionable warnings/errors (user closes them) and transient
 * confirmations. Colors come only from themed tokens, so dark is inherited. */
.cdx-notice-host {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
}
.cdx-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--codex-content);
  border-radius: 10px;
  box-shadow: 0 6px 22px var(--shadow);
  color: var(--text-primary);
  font-size: 0.85rem;
  line-height: 1.4;
}
.cdx-notice-glyph { flex-shrink: 0; display: inline-flex; color: var(--codex-content); margin-top: 1px; }
.cdx-notice-msg { flex: 1; min-width: 0; }
.cdx-notice-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 0.3rem;
}
.cdx-notice-close:hover { color: var(--text-primary); }
.cdx-notice--ok    { border-left-color: var(--success); }
.cdx-notice--ok    .cdx-notice-glyph { color: var(--success); }
.cdx-notice--info  { border-left-color: var(--codex-lessons); }
.cdx-notice--info  .cdx-notice-glyph { color: var(--codex-lessons); }
.cdx-notice--warn  { border-left-color: var(--codex-cohorts); }
.cdx-notice--warn  .cdx-notice-glyph { color: var(--codex-cohorts); }
.cdx-notice--error { border-left-color: var(--error); }
.cdx-notice--error .cdx-notice-glyph { color: var(--error); }

/* ── Action menu (js/menu.js) ─────────────────────────────────────────────────
   A small popover of actions opened from a row trigger (✎ / kebab). Fixed-
   positioned body child, so it escapes any clipping list/sidebar. */
.cdx-menu {
  position: fixed;
  z-index: 1000;
  min-width: 140px;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 22px var(--shadow);
  display: flex;
  flex-direction: column;
}
.cdx-menu-item {
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.cdx-menu-item:hover { background: var(--cdx-card-hover-bg, rgba(127,127,127,0.08)); }
.cdx-menu-item.is-danger { color: var(--danger, #ef4444); }
.cdx-menu-item.is-danger:hover { background: rgba(239,68,68,0.1); }

/* ── Developer-mode-only affordance marker ───────────────────────────────────
 * Shared signature for any control gated behind the bs_debug flag (hidden unless
 * localStorage.bs_debug === '1'): a dashed --danger (palette red) border, no new
 * colour. Reads as "dev tool, not a real control". The element keeps its own
 * padding / radius / background; this class only owns the border. Consumers add
 * `cdx-dev-only` to their class list and must NOT declare a competing border.
 * Convention registered in Codex CLAUDE.md ("Developer-mode-only UI"). */
.cdx-dev-only { border: 1px dashed var(--danger); }

/* ── Connection watchdog banner (js/reconnect.js) ────────────────────────────
 * Raised when a Worker call fails as a transport error (the network dropped
 * while the tab sat idle), cleared the moment a call succeeds again. Top-center,
 * non-blocking, above the toast and modals. Amber = recoverable, not a hard
 * error. Entrance mirrors the toast (.cdx-toast) idiom. */
.cdx-reconnect {
  position: fixed; top: 1rem; left: 50%; z-index: 99999;
  display: flex; align-items: center; gap: 0.75rem;
  max-width: min(92vw, 460px);
  padding: 0.6rem 0.9rem;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--cdx-remarcada-text, #d97706);
  border-left: 4px solid var(--cdx-remarcada-text, #d97706);
  border-radius: 10px;
  box-shadow: 0 8px 28px var(--shadow);
  font-size: 0.86rem;
  opacity: 0; transform: translate(-50%, -1rem);
  transition: opacity .3s, transform .3s;
}
.cdx-reconnect.show { opacity: 1; transform: translate(-50%, 0); }
.cdx-reconnect-msg { font-weight: 500; }
.cdx-reconnect-reload {
  border: 0; cursor: pointer; white-space: nowrap;
  padding: 0.35rem 0.7rem; border-radius: 6px;
  background: var(--cdx-btn-primary-bg, var(--primary));
  color: var(--cdx-btn-primary-text, #fff);
  font-size: 0.82rem; font-weight: 600;
}
.cdx-reconnect-reload:hover { filter: brightness(1.05); }
.cdx-reconnect-dismiss {
  border: 0; background: none; cursor: pointer;
  margin-left: -0.25rem; padding: 0 0.2rem;
  color: var(--text-secondary, #888); font-size: 1.1rem; line-height: 1;
}

/* ── Student-identity tier badge (js/participant-tier.js) ─────────────────────
 * A small pill on a participant showing how established their identity is:
 * present (confirmed in a live session) > registered (logged in + LGPD consent)
 * > roster (on the list only). Shared by the cohorts roster and the cert-issue
 * modal. Colour tracks trust: success for present, primary for registered,
 * neutral for roster. */
.cdx-tier {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}
.cdx-tier--present {
  color: var(--success, #16a34a);
  background: var(--success-bg, rgba(22,163,74,0.10));
  border-color: var(--success, #16a34a);
}
.cdx-tier--registered {
  color: var(--primary, #2563eb);
  background: var(--primary-bg, rgba(37,99,235,0.10));
  border-color: var(--primary, #2563eb);
}
.cdx-tier--roster {
  color: var(--text-secondary, #6b7280);
  background: var(--background, rgba(127,127,127,0.08));
  border-color: var(--border, #d1d5db);
}