/* accredify_exam_analytics */

:root {
  --aea-navy: #143c64;
  --aea-gradient: linear-gradient(135deg, #0d3c6e 0%, #1565c0 100%);
  --aea-grey: #f4f6f8;
  --aea-radius: 6px;
  --aea-shadow: 0 2px 12px rgba(0,0,0,.10);
  --aea-green: #4caf50;
  --aea-red: #c62828;
  --aea-orange: #ff8a65;
}

.aea-page { max-width: 1100px; margin: 0 auto; padding: 0 20px 48px; color: #000; }
.aea-page * { color: #000; }
/* Analytics/drill-down pages asked to use the full available width, since
   the comparison table has a lot to show (up to 6 columns). */
.aea-page--full { max-width: 100%; padding: 0 28px 48px; }

/* Loosen the theme's Bootstrap .container width on analytics/drill-down
   routes — same confirmed-safe technique used in
   accredify_practice_exam_runtime: scoped to the specific section that
   wraps page content, not a bare .container selector, so it structurally
   cannot reach the site header's own separate .container. */
body.aea-analytics-flow section.vivek-shift-footer-to-bottom > .container {
  max-width: none !important;
  width: 100% !important;
}
/* Same section carries a large top padding/margin from the theme —
   collapse it so page content starts right at the top. */
body.aea-analytics-flow section.vivek-shift-footer-to-bottom {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.aea-hero { background: var(--aea-gradient); padding: 28px 32px; border-radius: 0 0 var(--aea-radius) var(--aea-radius); margin-bottom: 24px; }
.aea-hero h1, .aea-hero p { color: #fff !important; margin: 0; }
.aea-hero h1 { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.aea-hero p { font-size: 14px; opacity: .9; }

.aea-card { background: #fff; border: 1px solid #dde1e4; border-radius: var(--aea-radius); box-shadow: var(--aea-shadow); padding: 24px 28px; margin-bottom: 20px; }

.aea-btn { display: inline-block; padding: 9px 18px; border-radius: 4px; border: 1px solid var(--aea-navy); background: var(--aea-navy); color: #fff !important; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; }
.aea-btn--outline { background: #fff; color: var(--aea-navy) !important; }
.aea-btn--danger { background: var(--aea-red); border-color: var(--aea-red); }
.aea-btn--small { padding: 6px 12px; font-size: 12px; }

/* General-purpose utility classes used across several templates
   (corrections queue, admin tools, debate) — not specific to any one page. */
.aea-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.aea-item-meta { font-size: 12px; opacity: .7; }

/* Modal (Request Correction / View Correction Requests) — one shared
   overlay per page, populated dynamically per-question by JS. */
.aea-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 1000; align-items: center; justify-content: center; padding: 20px;
}
.aea-modal-overlay.aea-open { display: flex; }
.aea-modal {
  background: #fff; border-radius: var(--aea-radius); box-shadow: 0 8px 32px rgba(0,0,0,.25);
  max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto; padding: 28px; position: relative; color: #000;
}
.aea-modal * { color: #000; }
.aea-modal h3 { margin: 0 0 16px; font-size: 18px; }
.aea-modal-close {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  font-size: 24px; cursor: pointer; color: #666; line-height: 1;
}
.aea-modal textarea {
  width: 100%; box-sizing: border-box; min-height: 100px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px;
}
.aea-modal-actions { margin-top: 10px; }
.aea-modal-status { margin-top: 10px; font-size: 12px; }
.aea-modal-request { border: 1px solid #eee; border-radius: 4px; padding: 12px 14px; margin-bottom: 10px; }
.aea-modal-request-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.aea-modal-request-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; }
.aea-modal-request-status--pending { background: #fff3e0; color: #e65100; }
.aea-modal-request-status--accepted { background: #e8f5e9; color: var(--aea-green); }
.aea-modal-request-status--rejected { background: #f0f0f0; color: #666; }
.aea-modal-admin-notes { font-size: 12px; font-style: italic; opacity: .8; margin-top: 6px; }

/* Admin tools + corrections queue tables */
.aea-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.aea-table th, .aea-table td { padding: 10px; border-bottom: 1px solid #eee; text-align: left; }
.aea-table th { background: var(--aea-grey); font-size: 11px; text-transform: uppercase; }
.aea-inline-form { display: flex; gap: 8px; align-items: center; }
.aea-inline-form input[type="number"] { width: 80px; padding: 6px; border: 1px solid #ccc; border-radius: 4px; }

/* ── Shared question comparison table (accredify-question-comparison-table.html.twig) ──
   Used by both the admin dashboard and the candidate drill-down. */
.aeq-card { background: #fff; border: 1px solid #dde1e4; border-radius: var(--aea-radius); box-shadow: var(--aea-shadow); margin-bottom: 24px; overflow: hidden; }
.aeq-meta { font-size: 13px; font-weight: 700; padding: 16px 20px 0; }
.aeq-question-area { padding: 8px 20px 16px; }
.aeq-table-scroll { overflow-x: auto; padding: 16px 20px 20px; }
.aeq-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1000px; }
.aeq-table th, .aeq-table td {
  border: 1px solid #e3e6e8; padding: 8px 10px; text-align: left; vertical-align: top; font-size: 12px;
}
.aeq-table th { background: var(--aea-grey); font-size: 11px; text-transform: uppercase; text-align: left; }
.aeq-admin-note { display: block; text-transform: none !important; font-weight: normal !important; font-style: italic; opacity: .65; font-size: 11px; line-height: 1.4; }

/* Column widths: Options/Parameters column wider, rest share evenly. */
.aeq-table td:first-child, .aeq-table th:first-child { width: 27%; }

/* Correct/wrong icons directly in the options cell — replaces the old
   separate answer-review card entirely. */
.aeq-icon { display: inline-block; width: 14px; font-weight: 700; margin-right: 4px; }
.aeq-icon--correct { color: var(--aea-green); }
.aeq-icon--wrong { color: var(--aea-red); }

/* Request Correction / View Existing Corrections / Debate now live in the
   question description area, under the "Show more" link. */
.aeq-your-actions { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }

/* Collapsible Answer Options / Parameters sections — collapsed on initial
   load, click the section header to expand. The arrow rotates to
   indicate state; the actual hide/show is a plain display:none/table-row
   toggle on the whole <tbody>, driven by JS. flex-wrap:nowrap and
   white-space:nowrap on the label together stop the header text and the
   Expand/Collapse button from breaking onto a second line when the
   column is narrow — previously they could wrap, which also visibly
   broke the row's background fill (the row grew taller than the
   background box that was sized for one line). */
.aeq-section-toggle {
  cursor: pointer; user-select: none; display: flex; align-items: center; flex-wrap: nowrap;
  border: none !important;
}
/* CSS-drawn triangle instead of a text glyph (▸) — a font character's own
   internal shape isn't perfectly symmetric within its box (side bearings
   vary by glyph), so rotating it visually shifted how much space looked
   "used" on either side even though the margin value never changed. A
   border-triangle has an exact, known geometry that rotates predictably. */
.aeq-section-arrow {
  display: inline-block; flex-shrink: 0; margin-right: 12px; transition: transform .15s ease;
  width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 6px solid currentColor;
}
.aeq-section-label { white-space: nowrap; }
.aeq-section-toggle[data-section-expanded="true"] .aeq-section-arrow { transform: rotate(90deg); }
tbody.aeq-section-collapsed { display: none; }

/* Incorrect-cohort columns/cells (candidates 3 & 4, and their header/rows)
   — !important so this stays visible regardless of which parent-child
   hierarchy level (below) a given row belongs to. */
.aeq-col-incorrect { color: var(--aea-red) !important; }
th.aeq-col-incorrect, td.aeq-col-incorrect { background: #fff5f5 !important; }

/* Parent-child visual hierarchy via background shade, darkest-to-lightest:
   the Answer Options section (level 2, the "parent" now that the question
   sits outside the table) → the Parameters section (level 3, its child).
   No indentation changes — shade alone carries the nesting. !important
   guarantees these win outright over the generic .aeq-table th rule
   above regardless of rule order, rather than relying on equal
   specificity happening to resolve the right way. */
.aeq-row-level-2 th, .aeq-row-level-2 td { background: #e4edf7 !important; }
.aeq-row-level-3 th, .aeq-row-level-3 td { background: #f4f8fb !important; }

/* The first column ("Answer Options" / "Candidate Profile", and every row
   label beneath them) stays pure white regardless of which row-level tint
   the rest of that row has — this makes it read as a distinct header
   column running down the left, rather than blending into the colored
   data columns next to it. :first-child gives this higher specificity
   than the row-level rules above, so it wins for just this column
   without needing to touch those rules at all. */
.aeq-table th:first-child, .aeq-table td:first-child { background: #fff !important; }

.aeq-param-heading-row th { font-weight: 700; font-size: 11px; text-transform: uppercase; text-align: left; padding-top: 16px; }
.aeq-param-group-label { text-align: left; }
.aeq-param-label { font-weight: 700; }

/* Every data cell wraps and shows full text — options and deliberations
   can run long, and truncating them defeats the point of a comparison
   table. table-layout:fixed (above) is what makes wrapping predictable
   instead of blowing out column widths to fit one long word. */
.aeq-table td { white-space: normal; word-break: break-word; }

/* Filter bar (drill-down page: Answered Correctly/Incorrectly + domain) */
.aeq-filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.aeq-filter-dropdown { position: relative; }
.aeq-filter-toggle {
  background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer; color: var(--aea-navy) !important;
}
.aeq-filter-menu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 6px;
  background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: var(--aea-shadow);
  padding: 12px 16px; z-index: 50; min-width: 200px;
}
.aeq-filter-menu.aeq-open { display: block; }
.aeq-filter-option { display: block; font-size: 13px; padding: 4px 0; cursor: pointer; }
.aeq-card[data-hidden-by-filter="true"] { display: none; }

/* Expand All/Collapse All (drill-down filter bar) act on the existing
   Answer Options/Candidate Profile sub-sections below (see
   .aeq-section-toggle/tbody.aeq-section-collapsed) — no separate
   whole-card collapse layer. */
.aeq-expand-collapse-all { display: flex; gap: 8px; margin-left: auto; }

/* Expand/Collapse text buttons, inline before the arrow/label. A subtle
   darkening (not a white tint) blends consistently regardless of which
   row-level background color (level 2 or level 3) it sits on top of —
   the previous white-ish overlay created a visibly lighter patch that
   didn't match the rest of the row. */
.aeq-expand-btn {
  background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.15); margin-right: 12px;
  border-radius: 3px; padding: 2px 10px; font-size: 10px; font-weight: 700; cursor: pointer; text-transform: none; flex-shrink: 0;
}

/* Collapsible one-line teaser — used only for the question description
   now (options/deliberations show in full, no teaser). line-clamp gives
   a clean single-line cut with no partial second-line characters
   bleeding through, unlike a fixed max-height which doesn't reliably
   align to the exact line boundary. JS hides the "Show more" button
   entirely when the content doesn't actually overflow one line. */
.aea-collapsible-content {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.aea-collapsible[data-expanded="true"] .aea-collapsible-content {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
.aea-collapsible-toggle { background: none; border: none; color: var(--aea-navy); font-size: 11px; cursor: pointer; padding: 2px 0; text-decoration: underline; }
.aea-collapsible-toggle.aea-toggle-unneeded { display: none; }
/* KaTeX output is excluded (20261009): forcing font-size, line-height,
   margin and padding onto KaTeX's own spans breaks its layout (fractions,
   operators and exponents end up stacked or misplaced, e.g. "5x+8≥8"). */
.aea-question-desc, .aea-question-desc *:not(.katex):not(.katex *) {
  font-size: 15.6px !important; line-height: 1.35 !important; font-weight: 450 !important;
  color: #2196f3 !important; white-space: normal; margin: 0 !important; padding: 0 !important;
}
.aea-question-desc img, .aea-question-desc table { max-width: 100%; height: auto; }

/* Debate */
.aea-debate-post { padding: 12px 0; border-bottom: 1px solid #eee; }
.aea-debate-author { font-weight: 700; font-size: 13px; }
.aea-debate-date { font-size: 11px; opacity: .6; margin-left: 8px; }
.aea-debate-body { font-size: 14px; margin-top: 4px; }
.aea-tag-row { margin-bottom: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.aea-debate-question-text { margin-bottom: 16px; }
.aea-debate-question-text img, .aea-debate-question-text table { max-width: 100%; height: auto; }
.aea-debate-question-text { overflow-x: auto; }
.aea-tag { display: inline-block; background: var(--aea-grey); color: var(--aea-navy); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px; }
.aea-tag--cert { background: var(--aea-navy); color: #fff; }

.aea-debate-teaser-link { color: #fff !important; text-decoration: underline; }
.aea-debate-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .aea-debate-layout { grid-template-columns: minmax(0, 1fr); } }
.aea-debate-main { margin-bottom: 0; }
.aea-debate-sidebar-heading { font-size: 15px; margin: 0 0 12px; color: var(--aea-navy); }
.aea-debate-options-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 13px; }
.aea-debate-options-table td { padding: 6px 10px; border-bottom: 1px solid #eee; }
.aea-debate-option-letter { font-weight: 700; width: 24px; }
.aea-debate-related-link {
  display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; margin-bottom: 6px;
  background: var(--aea-grey); border-radius: 4px; text-decoration: none; font-size: 12px;
}

/* SAT Domain › Skill › Subskill tags on the SAT review card (20260927). */
.aeq-sat-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 4px 0 8px; font-size: 0.8rem; color: #999; }
.aeq-sat-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #eef3f8; color: #234; }
.aeq-sat-tag--skill { background: #e3f2fd; font-weight: 600; }
.aeq-sat-tag--sub { background: #f3f3f3; color: #555; }

/* ── Full page (20261004) ─────────────────────────────────────────────────
   Same technique as accredify_create_product's .acp-layout--fullpage (used
   by /products and /my-products): every wrapper between the theme's
   content section and a .acx-fullpage page gives up its width cap, side
   padding and margins, and the page itself is a solid white sheet running
   from the site header to the footer — so the theme's background photo no
   longer shows around (or through) the page. Scoped by :has(), so only
   pages that render .acx-fullpage are affected; the site header is a
   sibling of this section and is never touched. */
section:has(.acx-fullpage),
section:has(.acx-fullpage) *:has(.acx-fullpage) {
  max-width: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
section:has(.acx-fullpage) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
.aea-page.acx-fullpage {
  max-width: none;
  background: #fff;
  min-height: calc(100vh - 120px);
  padding: 0 40px 48px;
}
.aea-page.acx-fullpage > .aea-hero:first-child {
  margin: 0 -40px 24px;
  border-radius: 0;
  padding: 28px 40px;
}
@media (max-width: 768px) {
  .aea-page.acx-fullpage { padding: 0 16px 32px; }
  .aea-page.acx-fullpage > .aea-hero:first-child { margin: 0 -16px 20px; padding: 22px 16px; }
}

/* ── Debate page colour coding (20261004) ────────────────────────────────
   Same language as the other SAT pages: soft grey page behind white,
   lightly shadowed cards. Teal = discussion (the same teal as the Debate
   button on the Question Review page); indigo = the related-discussions
   sidebar. The question stem sits in a calm box, options get round letter
   badges, posts read as speech cards with an initial avatar, and the
   reply box is a clear, framed composer. */
.aea-debate-page { background: #eef1f6 !important; }
.aea-debate-page .aea-debate-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.aea-debate-hero__eyebrow { margin: 0 0 4px !important; font-size: 12px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.aea-debate-page .aea-debate-hero h1 { font-size: 22px; line-height: 1.3; }
.aea-debate-page .aea-debate-hero__btn {
  display: inline-block; padding: 9px 18px; border-radius: 4px; border: 1.5px solid rgba(255, 255, 255, .7);
  color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.aea-debate-page .aea-debate-hero__btn:hover { background: rgba(255, 255, 255, .15); }

.aea-debate-page .aea-card { border: 0; border-radius: 10px; box-shadow: 0 1px 3px rgba(16, 40, 80, .08), 0 6px 18px rgba(16, 40, 80, .06); }
.aea-debate-page .aea-debate-main { border-top: 4px solid #0e8fa3; padding: 22px 28px 26px; }
.aea-debate-section-title { display: flex; align-items: center; gap: 8px; font-size: 13px !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; color: #0b6f7e !important; }
.aea-debate-section-dot { width: 9px; height: 9px; border-radius: 50%; background: #0e8fa3; }
.aea-debate-section-title--discussion { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e1e6ed; }
.aea-debate-count { margin-left: 4px; text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: #e3f5f7; color: #0b6f7e !important; }

.aea-debate-page .aea-debate-question-text { background: #f8fafc; border: 1px solid #e3e8ef; border-left: 4px solid #0e8fa3; border-radius: 8px; padding: 14px 18px; font-size: 15px; line-height: 1.6; }
.aea-debate-page .aea-debate-question-text p { margin: 0 0 .7em; }
.aea-debate-page .aea-debate-question-text p:last-child { margin-bottom: 0; }

.aea-debate-page .aea-debate-options-table { border-collapse: separate; border-spacing: 0; border: 1px solid #dfe5ec; border-radius: 10px; overflow: hidden; font-size: 14px; }
.aea-debate-page .aea-debate-options-table td { padding: 10px 14px; border-bottom: 1px solid #e8ecf1; background: #fff; }
.aea-debate-page .aea-debate-options-table tr:nth-child(even) td { background: #fafbfc; }
.aea-debate-page .aea-debate-options-table tr:last-child td { border-bottom: 0; }
.aea-debate-page .aea-debate-option-letter { width: 44px; }
.aea-debate-page .aea-debate-option-letter span {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid #8796a8; color: #33475b !important; font-size: 12px; font-weight: 800; background: #fff;
}
.aea-debate-page .aea-tag { background: #e3f5f7; color: #0b6f7e !important; border: 1px solid #bfe6ea; }
.aea-debate-page .aea-tag--cert { background: #0e8fa3; color: #fff !important; border-color: #0e8fa3; }

/* Posts */
.aea-debate-page .aea-debate-post { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 10px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; }
.aea-debate-page .aea-debate-post:nth-child(odd) { background: #f7fbfc; }
.aea-debate-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #0e8fa3; color: #fff !important; font-weight: 800; font-size: 14px; }
.aea-debate-post__main { flex: 1; min-width: 0; }
.aea-debate-post__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.aea-debate-page .aea-debate-author { color: #143c64 !important; }
.aea-debate-page .aea-debate-body { font-size: 14px; line-height: 1.55; white-space: pre-line; }
.aea-debate-empty { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px dashed #bfe6ea; border-radius: 10px; background: #f3fbfc; color: #0b6f7e !important; font-size: 13.5px; }
.aea-debate-empty * { color: #0b6f7e !important; }
.aea-debate-empty__icon { font-size: 18px; }

/* Composer */
.aea-debate-form { margin-top: 16px; padding: 14px 16px 16px; background: #f8fafc; border: 1px solid #e3e8ef; border-radius: 10px; }
.aea-debate-form__label { display: block; font-size: 12px; font-weight: 700; color: #143c64 !important; margin-bottom: 6px; }
.aea-debate-form textarea { display: block; width: 100%; box-sizing: border-box; min-height: 96px; padding: 10px 12px; border: 1px solid #cfd6df; border-radius: 8px; background: #fff; font: inherit; font-size: 14px; resize: vertical; }
.aea-debate-form textarea:focus { outline: none; border-color: #0e8fa3; box-shadow: 0 0 0 3px rgba(14, 143, 163, .18); }
.aea-debate-page .aea-debate-form__btn { margin-top: 10px; padding: 9px 20px; border: 0; border-radius: 6px; background: linear-gradient(135deg, #0b6f7e 0%, #0e8fa3 100%); }
.aea-debate-page .aea-debate-form__btn:hover { filter: brightness(1.05); }

/* Sidebar */
.aea-debate-page .aea-debate-side-card { border-top: 4px solid #3b5bdb; padding: 20px 20px 16px; }
.aea-debate-page .aea-debate-sidebar-heading { color: #2f49b3 !important; font-weight: 800; margin-bottom: 2px; }
.aea-debate-sidebar-sub { font-size: 12px !important; color: #5f6b7a !important; margin: 0 0 12px !important; }
.aea-debate-page .aea-debate-related-link { align-items: center; background: #f4f6fd; border: 1px solid #dfe5f8; border-radius: 8px; padding: 10px 12px; transition: background .15s, border-color .15s; }
.aea-debate-page .aea-debate-related-link:hover { background: #eef2fd; border-color: #b9c7f3; }
.aea-debate-related-link__title { color: #1b1f2a !important; line-height: 1.4; }
.aea-debate-related-link__count { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #fff; border: 1px solid #cdd8f6; color: #2f49b3 !important; white-space: nowrap; }


/* 20261102: card opened from the results-page correction banner link. */
.aeq-card.aeq-card--target { outline: 3px solid #34d399; outline-offset: 2px; transition: outline-color 1s; scroll-margin-top: 90px; }