/*
 * 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; }
}