/*
 * css/unit-ux.css — question list + standard question card for the IB unit
 * pages (UX phase 1, Sept 2026). Loaded after each page's own styles
 * (css/unit-engine.css, or SLAIUnit2-5's inline block) and scoped to
 * body.unit-ux, so it only restyles pages that opt in.
 */
@import url('/css/tokens.css');

body.unit-ux {
  font-family: var(--ibm-font);
  background: var(--ibm-bg);
  color: var(--ibm-ink);
  padding: 0;
  margin: 0;
}
body.unit-ux .dashboard-container {
  max-width: 1180px; margin: 0 auto 24px; padding: 20px 20px 28px;
  background: transparent; box-shadow: none; border-radius: 0;
}
body.unit-ux .dashboard-container > h1 {
  font: 700 var(--ibm-text-xl)/1.25 var(--ibm-font); color: var(--ibm-dark);
  border: 0; padding: 0; margin: 6px 0 4px; letter-spacing: -0.01em; display: inline;
}
body.unit-ux .unit-crumbs { max-width: 1180px; margin: 0 auto; padding: 14px 20px 0; }
body.unit-ux [data-testid="header-pill"] { vertical-align: middle; }

/* ---------- Toolbar: difficulty chips + Filters ---------- */
.ul-shell { margin-top: 14px; }
.ul-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 14px; border-bottom: 1px solid var(--ibm-line); margin-bottom: 18px; }
.ul-diff { display: flex; gap: 6px; flex-wrap: wrap; }
.ul-diff .ibm-chip { min-height: 34px; }
.ul-diff .ul-chip--easy[aria-pressed="false"]   { color: var(--ibm-diff-easy); }
.ul-diff .ul-chip--medium[aria-pressed="false"] { color: var(--ibm-diff-medium); }
.ul-diff .ul-chip--hard[aria-pressed="false"]   { color: var(--ibm-diff-hard); }
.ul-diff .ul-chip--exam[aria-pressed="false"]   { color: var(--ibm-diff-exam); }
.ul-tools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#ul-tools-slot { display: contents; }

/* ---------- Layout: rail + list ---------- */
.ul-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; }
.ul-rail { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; background: var(--ibm-surface); border: 1px solid var(--ibm-line); border-radius: var(--ibm-r-card); padding: 8px; }
.ul-rail > summary { display: none; }
.ul-topic + .ul-topic { margin-top: 6px; border-top: 1px solid var(--ibm-line); padding-top: 6px; }
.ul-topic-btn, .ul-sub-btn { width: 100%; text-align: left; border: 0; background: transparent; font-family: var(--ibm-font); cursor: pointer; border-radius: var(--ibm-r); color: var(--ibm-ink); }
.ul-topic-btn { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; font-weight: 700; font-size: var(--ibm-text-sm); color: var(--ibm-dark); }
.ul-subs { list-style: none; margin: 0; padding: 0 0 2px; }
.ul-sub-btn { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 7px 10px 8px 16px; font-size: var(--ibm-text-sm); }
.ul-sub-btn .ibm-progress { grid-column: 1 / -1; }
.ul-sub-btn .ul-pct { min-width: 30px; text-align: right; }
.ul-topic-btn:hover, .ul-sub-btn:hover { background: var(--ibm-surface-2); }
.ul-topic-btn.is-on, .ul-sub-btn.is-on { background: var(--ibm-primary-soft); color: var(--ibm-primary); }
.ul-sub-btn.is-on .ul-sub-name { font-weight: 700; }
.ul-count { color: var(--ibm-muted); font-weight: 500; font-size: var(--ibm-text-xs); }
.ul-head { margin: 0 0 14px; scroll-margin-top: 80px; }
.ul-title { font: 700 var(--ibm-text-lg)/1.3 var(--ibm-font) !important; color: var(--ibm-dark) !important; border: 0 !important; padding: 0 !important; margin: 0 0 2px !important; }
.ul-sub { margin: 0; color: var(--ibm-muted); font-size: var(--ibm-text-sm); }
.ul-sub a, .ul-preview a { color: var(--ibm-primary); font-weight: 600; }
.ul-preview { color: var(--ibm-amber); }
.ul-empty { color: var(--ibm-muted); padding: 18px 4px; }
.ul-muted { color: var(--ibm-muted); font-size: var(--ibm-text-xs); }
body.unit-ux #status-message { color: var(--ibm-muted) !important; }

/* ---------- Filters panel (old form) ---------- */
.ul-filters { background: var(--ibm-surface); border: 1px solid var(--ibm-line); border-radius: var(--ibm-r-card); box-shadow: var(--ibm-shadow-lift); padding: 14px 16px 16px; margin: 0 0 18px; }
.ul-shell .ul-filters { order: -1; }
.ul-filters-head { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 10px; position: relative; padding-right: 40px; }
.ul-filters-head strong { color: var(--ibm-dark); }
.ul-filters-close { position: absolute; top: -6px; right: -6px; border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--ibm-muted); padding: 6px 8px; border-radius: var(--ibm-r); }
.ul-filters-close:hover { background: var(--ibm-surface-2); color: var(--ibm-dark); }
body.unit-ux .ul-filters .controls-grid { margin: 0; background: var(--ibm-surface-2); border-radius: var(--ibm-r); }
body.unit-ux .ul-filters .control-group label { text-transform: none; letter-spacing: 0; font-size: var(--ibm-text-sm); }
body.unit-ux .ul-filters .btn-generate { height: 44px; font-size: var(--ibm-text-md); border-radius: var(--ibm-r); background: var(--ibm-primary); letter-spacing: 0; box-shadow: none; }
body.unit-ux .ul-filters .checkbox-dropdown-list { min-height: 0; }
/* Desktop: the panel floats under the toolbar as a popover. */
@media (min-width: 861px) {
  .ul-shell { position: relative; }
  .ul-filters { position: absolute; z-index: 60; right: 0; top: 58px; width: min(880px, 100%); max-height: 70vh; overflow: auto; }
}

/* ---------- Standard question card ---------- */
body.unit-ux .worksheet-grid { gap: 16px; }
body.unit-ux .question-card {
  border: 1px solid var(--ibm-line); border-left: 1px solid var(--ibm-line);
  border-radius: var(--ibm-r-card); box-shadow: var(--ibm-shadow);
  padding: 16px 20px 18px; background: var(--ibm-surface);
}
body.unit-ux .card-meta.uc-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; justify-content: flex-start;
  background: transparent; padding: 0 0 10px; margin: 0 0 12px; border-bottom: 1px solid var(--ibm-line); border-radius: 0;
  font: 600 var(--ibm-text-sm)/1.4 var(--ibm-font); color: var(--ibm-ink-2);
}
.uc-q { color: var(--ibm-dark); font-weight: 800; }
.uc-dot { color: var(--ibm-line-strong); }
.uc-diff--easy { color: var(--ibm-diff-easy); }
.uc-diff--medium { color: var(--ibm-diff-medium); }
.uc-diff--hard { color: var(--ibm-diff-hard); }
.uc-diff--exam { color: var(--ibm-diff-exam); }
.uc-calc { background: none !important; padding: 0 !important; font-size: inherit !important; color: inherit !important; }
.ul-shell[data-mode="list"] .uc-topic { display: none; }
.uc-topic { margin-left: auto; color: var(--ibm-muted); font-weight: 500; font-size: var(--ibm-text-xs); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.unit-ux .q-visual-chip { margin-left: 4px; }
body.unit-ux .card-prompt { font-size: 1.05rem; line-height: 1.6; margin: 0 0 14px; color: var(--ibm-ink); }

.uc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
body.unit-ux .uc-btn, body.unit-ux .uc-actions .uc-btn.slv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px; border-radius: var(--ibm-r);
  font: 600 var(--ibm-text-sm)/1.2 var(--ibm-font); cursor: pointer; flex: 0 0 auto;
  border: 1px solid var(--ibm-line-strong); background: var(--ibm-surface); color: var(--ibm-primary);
  text-decoration: none; transition: background .12s ease, border-color .12s ease;
}
body.unit-ux .uc-btn:hover, body.unit-ux .uc-actions .uc-btn.slv-btn:hover { border-color: var(--ibm-primary); background: var(--ibm-primary-soft); }
body.unit-ux .uc-btn:focus-visible { outline: none; box-shadow: var(--ibm-focus); }
body.unit-ux .uc-btn--primary, body.unit-ux .uc-btn--scheme { background: var(--ibm-primary); border-color: var(--ibm-primary); color: #fff; }
body.unit-ux .uc-btn--primary:hover, body.unit-ux .uc-btn--scheme:hover { background: var(--ibm-primary-hover); border-color: var(--ibm-primary-hover); color: #fff; }
body.unit-ux .uc-btn--ai.is-on { background: var(--ibm-primary-soft); border-color: var(--ibm-primary); }
body.unit-ux .uc-btn--ghost { border-color: transparent; background: transparent; }
body.unit-ux .uc-btn--ghost:hover { background: var(--ibm-primary-soft); border-color: transparent; }
body.unit-ux .uc-btn--sm { min-height: 34px; padding: 5px 12px; }

.uc-upload { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; margin-top: 12px; align-items: stretch; }
.uc-upload[hidden] { display: none; }
body.unit-ux .uc-upload .drop-zone { min-height: 110px; display: flex; flex-direction: column; justify-content: center; border: 2px dashed var(--ibm-line-strong); background: var(--ibm-surface-2); border-radius: var(--ibm-r); }
body.unit-ux .uc-upload .drop-zone p { color: var(--ibm-ink-2); font-size: var(--ibm-text-sm); }
.uc-upload-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.uc-hint { font-size: var(--ibm-text-xs); color: var(--ibm-muted); }

body.unit-ux .scheme-panel { font-family: var(--ibm-font); border: 1px solid var(--ibm-line); border-top: 3px solid var(--ibm-primary); border-radius: var(--ibm-r); background: #fbfcfe; margin-top: 14px; }
body.unit-ux .scheme-header { text-transform: none; letter-spacing: 0; font-size: var(--ibm-text-md); border-bottom: 1px solid var(--ibm-line); }
body.unit-ux .scheme-header::before { content: none; }

.uc-after { margin-top: 12px; }
.uc-after[hidden] { display: none; }
body.unit-ux .uc-selfmark { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: var(--ibm-surface-2); border-radius: var(--ibm-r); font-size: var(--ibm-text-sm); color: var(--ibm-ink-2); }
.uc-selfmark-q { font-weight: 700; color: var(--ibm-dark); }
.uc-selfmark input[type="number"] { width: 64px; min-height: 36px; padding: 6px 8px; border: 1px solid var(--ibm-line-strong); border-radius: var(--ibm-r); font: inherit; text-align: center; }
.uc-muted { color: var(--ibm-muted); }
.uc-status { color: var(--ibm-green); font-weight: 600; }
body.unit-ux .uc-selfmark .self-rating.uc-quick { display: inline-flex; margin: 0 0 0 auto; padding: 0; border: 0; gap: 6px; flex-wrap: wrap; }
body.unit-ux .uc-selfmark .self-rating.uc-quick > span:first-child { display: none; }
body.unit-ux .uc-selfmark .self-rating button { min-height: 34px; font-size: var(--ibm-text-xs); border-radius: var(--ibm-r); font-family: var(--ibm-font); }
body.unit-ux .uc-selfmark .self-rating .rating-status { flex-basis: 100%; }

/* ---------- Phones ---------- */
@media (max-width: 860px) {
  .ul-layout { grid-template-columns: 1fr; gap: 12px; }
  .ul-rail { position: static; max-height: none; padding: 0; }
  .ul-rail > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 700; color: var(--ibm-dark); list-style: none; }
  .ul-rail > summary::-webkit-details-marker { display: none; }
  .ul-rail > summary::after { content: "▾"; margin-left: auto; color: var(--ibm-muted); }
  .ul-rail[open] > summary::after { content: "▴"; }
  .ul-rail-current { color: var(--ibm-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .ul-rail-body { padding: 0 8px 8px; }
  /* Filters = bottom drawer */
  .ul-filters { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; margin: 0; border-radius: 16px 16px 0 0; max-height: 82vh; overflow: auto; }
  body.ul-filters-open::after { content: ""; position: fixed; inset: 0; background: rgba(6,37,89,0.35); z-index: 2999; }
  body.unit-ux .dashboard-container { padding: 12px 14px 24px; }
  body.unit-ux .unit-crumbs { padding: 10px 14px 0; }
  body.unit-ux .question-card { padding: 14px 14px 16px; }
  .uc-topic { margin-left: 0; max-width: 100%; flex-basis: 100%; }
  .uc-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.unit-ux .uc-btn { padding: 8px 6px; white-space: normal; text-align: center; line-height: 1.2; }
  .uc-upload { grid-template-columns: 1fr; }
  .ul-tools { margin-left: 0; width: 100%; }
  body.unit-ux .controls-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Calculator help (js/calc-badge.js) ---------- */
.uc-tools { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 8px 0 0; font-size: 0.86rem; }
.uc-calc-help { color: var(--ibm-primary); font-weight: 600; text-decoration: none; }
.uc-calc-help:hover { text-decoration: underline; }
/* CLS (Sept 2026): js/unit-ux.js rebuilds #main at DOMContentLoaded, which on
   a throttled phone is ~3 s after first paint (it waits for every deferred
   and module script). Until then the old configuration form was painted and
   then yanked into the Filters panel, collapsing ~1000px of layout (CLS 0.37
   on SLAAUnit1). Before the shell exists, hide what it is about to move, and
   give the shell enough height that the question list loading into it does
   not push the cards below it (extension card, footer) around. */
body.unit-ux #main > .controls-grid,
body.unit-ux #main > #difficulty-split-mount { display: none; }
body.unit-ux .ul-shell { min-height: calc(100vh - 160px); }
/* The static "questions by topic" block (scripts/inject-question-links.js)
   sits after #main; show it once the shell exists so the shell's insertion
   does not push it down the first screen. */
body.unit-ux #main:not(:has(#ul-shell)) ~ .qlinks { display: none; }