/* Session setup: one form surface, with configuration and taxonomy side by side. */
.learner-builder main.home {
  inline-size: min(calc(100% - var(--layout-gutter) * 2), 76rem);
  margin-inline: auto;
  padding-block: var(--space-8);
}
.learner-builder .lc-page-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-block-end: var(--space-6); }
.learner-builder h1 { margin-block-end: var(--space-2); }
.learner-builder .lede { color: var(--color-text-secondary); font-size: var(--type-body); }
.learner-builder .lc-inline-action { display: inline-flex; align-items: center; min-block-size: var(--control-height); font-size: var(--type-body-sm); }
.learner-builder .builder-recovery { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); color: var(--color-text-secondary); }
.learner-builder .builder-recovery:has(#builderStatus:empty) { display: none; }
.learner-builder .bpanel { display: grid; gap: var(--space-4); min-inline-size: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.learner-builder .bpanel > * { min-inline-size: 0; }
.learner-builder .builder-selection { padding-block-end: var(--space-4); border-block-end: 1px solid var(--color-border); }
.learner-builder .lc-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.learner-builder :is(.lc-section-head h2, #session-settings-title) { font-size: var(--type-h3); }
.learner-builder .lc-clear { display: inline-flex; align-items: center; min-block-size: var(--control-height); padding: 0; border: 0; background: transparent; color: var(--color-link); font-size: var(--type-body-sm); text-align: start; }
.learner-builder .lc-clear:disabled { color: var(--color-disabled); cursor: default; }
.learner-builder .builder-session-summary { margin-block-start: var(--space-1); color: var(--color-text-secondary); font-size: var(--type-body-sm); font-variant-numeric: tabular-nums; }
.learner-builder .builder-active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin-block-start: var(--space-3); }
.learner-builder .builder-active-filters li { min-inline-size: 0; max-inline-size: 100%; }
.learner-builder .builder-active-filters button { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-height); max-inline-size: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-xs); background: var(--color-bg-subtle); color: var(--color-text); font-size: var(--type-body-sm); text-align: start; overflow-wrap: anywhere; }
.learner-builder .builder-active-filters button > span { flex: none; margin-inline-start: auto; }
.learner-builder .lc-session-column { container: builder-settings / inline-size; min-inline-size: 0; padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.learner-builder #session-settings-title { margin-block-end: var(--space-2); }
.learner-builder .fsec { min-inline-size: 0; padding-block: var(--space-4); border-block-start: 1px solid var(--color-border); }
.learner-builder #countSec { border: 0; }
.learner-builder .lc-session-column .fsec { display: grid; gap: var(--space-2); padding-block: var(--space-3); }
.learner-builder .lc-session-column .fsec-hd { margin-block-end: 0; }
.learner-builder .fsec-hd { display: block; margin-block-end: var(--space-2); color: var(--color-text); font-size: var(--type-label); font-weight: 600; }
.learner-builder .fsec-note { display: block; margin-block-start: var(--space-2); color: var(--color-text-secondary); font-size: var(--type-caption); line-height: var(--leading-body); }
.learner-builder .setting-control { min-inline-size: 0; }

/* Radios stay familiar and compact; the indicator carries selected state. */
.learner-builder .seg { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); min-inline-size: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.learner-builder .segopt { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-height); min-inline-size: 0; padding: var(--space-2) 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--color-text); font-size: var(--type-label); line-height: 1.4; text-align: start; }
.learner-builder .segopt::before { content: ''; flex: 0 0 1rem; inline-size: 1rem; block-size: 1rem; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface); }
.learner-builder .segopt[aria-checked='true']::before { border: 5px solid var(--color-link); }
.learner-builder .segopt[aria-checked='true'] { font-weight: 600; }
.learner-builder .segopt small { color: var(--color-text-secondary); font-size: var(--type-caption); font-weight: 400; line-height: 1.45; }
.learner-builder [data-seg='count'] { gap: 0 var(--space-5); }
.learner-builder .segopt-roam { flex-basis: 100%; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.learner-builder .segopt-roam small { flex: 1 1 12em; }
.learner-builder :is([data-seg='mode'], [data-seg='time']) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
.learner-builder :is([data-seg='mode'], [data-seg='time']) .segopt { display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-content: start; align-items: start; gap: var(--space-1) var(--space-2); }
.learner-builder :is([data-seg='mode'], [data-seg='time']) .segopt::before { margin-block-start: .15em; }
.learner-builder :is([data-seg='mode'], [data-seg='time']) .segopt small { grid-column: 2; }
.learner-builder .countrow, .learner-builder .timerow { display: grid; gap: var(--space-2); min-inline-size: 0; }
.learner-builder :is(.chipsearch, input[type='number']) { min-block-size: var(--control-height); max-inline-size: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs); background: var(--color-surface); color: var(--color-text); font-size: var(--type-body); }
.learner-builder input[type='number'] { inline-size: 7rem; font-variant-numeric: tabular-nums; }
.learner-builder .timefield { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); font-size: var(--type-label); }
.learner-builder input[aria-invalid='true'] { border-color: var(--color-error); }
.learner-builder .field-error { margin-block-start: var(--space-2); color: var(--color-error); font-size: var(--type-body-sm); }
.learner-builder .roamnote { margin-block-start: var(--space-2); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--color-border-strong); color: var(--color-text-secondary); font-size: var(--type-body-sm); }

/* The complete topic tree scrolls with the page; search never hides selections. */
.learner-builder .builder-filters { align-self: start; border-block: 1px solid var(--color-border); }
.learner-builder .builder-filters > summary { min-block-size: var(--control-height); padding-block: var(--space-3); color: var(--color-text); font-size: var(--type-h3); font-weight: 600; }
.learner-builder .builder-filters > summary span { margin-inline-start: var(--space-2); color: var(--color-text-secondary); font-size: var(--type-caption); font-weight: 400; }
.learner-builder #systemSec { padding-block-start: 0; border: 0; }
.learner-builder #systemSec .lc-section-head { margin-block-end: var(--space-2); }
.learner-builder #systemSec h2 { font-size: var(--type-body); }
.learner-builder .builder-search-label { display: block; margin-block-end: var(--space-2); font-size: var(--type-label); }
.learner-builder .chipsearch { inline-size: 100%; }
.learner-builder .chipsearch::placeholder { color: var(--color-text-secondary); opacity: 1; }
.learner-builder .system-groups { display: grid; margin-block-start: var(--space-4); }
.learner-builder .system-group { min-inline-size: 0; border-block-start: 1px solid var(--color-border); }
.learner-builder .system-group-head { display: flex; align-items: stretch; min-inline-size: 0; }
.learner-builder :is(.system-disclosure, .system-select) { min-block-size: var(--control-height); padding: var(--space-2) 0; border: 0; background: transparent; color: var(--color-text); font-size: var(--type-label); text-align: start; }
.learner-builder .system-disclosure { display: flex; align-items: center; flex: 1; min-inline-size: 0; gap: var(--space-3); font-weight: 500; }
.learner-builder .system-disclosure::before { content: ''; flex: 0 0 .4rem; inline-size: .4rem; block-size: .4rem; margin-inline-start: var(--space-1); border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(-45deg); }
.learner-builder .system-disclosure[aria-expanded='true']::before { transform: rotate(45deg); }
.learner-builder .system-group-title { min-inline-size: 0; overflow-wrap: anywhere; }
.learner-builder .system-group-count { margin-inline-start: auto; padding-inline: var(--space-2); color: var(--color-text-secondary); font-size: var(--type-caption); font-variant-numeric: tabular-nums; }
.learner-builder .system-select { flex: 0 0 auto; max-inline-size: 6rem; padding-inline: var(--space-2); color: var(--color-link); font-size: var(--type-caption); }
.learner-builder .system-select:is([aria-checked='true'], [aria-checked='mixed']) { background: var(--color-brand-subtle); }
.learner-builder .chips { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); min-inline-size: 0; }
.learner-builder .system-topics { display: grid; padding-block: 0 var(--space-2); padding-inline-start: var(--space-5); }
.learner-builder .chip { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-height); max-inline-size: 100%; padding: var(--space-2) 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--color-text); font-size: var(--type-label); line-height: 1.45; text-align: start; }
.learner-builder .chip::before { content: ''; display: grid; place-items: center; flex: 0 0 1rem; inline-size: 1rem; block-size: 1rem; border: 1px solid var(--color-border-strong); border-radius: 2px; background: var(--color-surface); font-size: .75rem; }
.learner-builder .chip[aria-pressed='true']::before { content: '✓'; color: var(--color-text-inverse); border-color: var(--color-link); background: var(--color-link); }
.learner-builder .system-topic { inline-size: 100%; }
.learner-builder .cn { flex: none; margin-inline-start: auto; color: var(--color-text-secondary); font-size: var(--type-caption); font-variant-numeric: tabular-nums; }
.learner-builder .facet-status, .learner-builder .fempty { color: var(--color-text-secondary); font-size: var(--type-body-sm); }
.learner-builder .facet-status { margin-block-start: var(--space-3); }
.learner-builder .lc-advanced { border-block-start: 1px solid var(--color-border); }
.learner-builder .lc-advanced > summary { padding-block: var(--space-3); font-size: var(--type-label); font-weight: 600; }
.learner-builder .lc-advanced > summary span { display: block; margin-block-start: var(--space-1); color: var(--color-text-secondary); font-size: var(--type-caption); font-weight: 400; }
.learner-builder .lc-related-links { padding-block: var(--space-3); font-size: var(--type-body-sm); }
.learner-builder .lc-advanced .fsec-hd .fsec-note { font-weight: 400; }

/* Availability and the primary action belong to the settings they submit. */
.learner-builder .pvbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); background: var(--color-surface); }
.learner-builder .pvcount { display: flex; align-items: baseline; flex: 1 1 10rem; gap: var(--space-2); min-inline-size: 0; }
.learner-builder .pvnum { color: var(--color-text); font-size: var(--type-h3); font-weight: 600; font-variant-numeric: tabular-nums; }
.learner-builder .pvlabel { color: var(--color-text-secondary); font-size: var(--type-caption); }
.learner-builder :is(.startbtn, .btn, .upgradebtn) { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--control-height); max-inline-size: 100%; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: var(--type-label); font-weight: 600; text-align: center; text-decoration: none; }
.learner-builder .startbtn { border-color: var(--color-brand); background: var(--color-brand); color: var(--color-text-inverse); }
.learner-builder .startbtn:disabled { border-color: var(--color-border); background: var(--color-disabled-bg); color: var(--color-disabled); }
.learner-builder .upsell { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-block-end: var(--space-5); padding: var(--space-4); border-inline-start: 2px solid var(--color-border-strong); background: var(--color-bg-subtle); font-size: var(--type-body-sm); }
.learner-builder .upsell .ut { flex: 1 1 16rem; min-inline-size: 0; }
.learner-builder .upsell b { display: block; margin-block-end: var(--space-1); }
.learner-builder footer.foot { font-size: var(--type-caption); }
.learner-builder footer.foot p { max-inline-size: var(--layout-prose); margin-inline: auto; }
.learner-builder footer.foot p + p { margin-block-start: var(--space-2); }
.learner-builder :is(button, input, summary) { scroll-margin-block: 6rem; }
@media (hover: hover) and (pointer: fine) {
  .learner-builder :is(.segopt, .chip, .system-disclosure, .system-select):hover { background: var(--color-bg-subtle); }
  .learner-builder .lc-clear:hover:not(:disabled) { text-decoration: underline; }
  .learner-builder .startbtn:hover:not(:disabled) { border-color: var(--color-brand-hover); background: var(--color-brand-hover); }
}
@media (min-width: 960px) {
  .learner-builder .bpanel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: max-content 1fr; grid-template-areas: 'selection filters' 'settings filters'; gap: var(--space-4) var(--space-8); align-items: start; }
  .learner-builder .builder-selection { grid-area: selection; }
  .learner-builder .lc-session-column { grid-area: settings; }
  .learner-builder .builder-filters { grid-area: filters; }
}
@container builder-settings (min-width: 30rem) {
  .learner-builder .lc-session-column .fsec { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-3); }
  .learner-builder .lc-session-column .fsec-hd { padding-block-start: var(--space-2); }
}
@container builder-settings (max-width: 14rem) {
  .learner-builder :is([data-seg='mode'], [data-seg='time']) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .learner-builder main.home { padding-block: var(--space-5); }
  .learner-builder .lc-session-column { padding: var(--space-4); }
  .learner-builder .pvcount, .learner-builder .startbtn { flex-basis: 100%; }
  .learner-builder .builder-filters > summary span { display: block; margin-inline-start: 1rem; }
}
@media (forced-colors: active) {
  .learner-builder .segopt[aria-checked='true']::before { border-color: Highlight; }
  .learner-builder .chip[aria-pressed='true']::before { border-color: Highlight; background: Highlight; color: HighlightText; forced-color-adjust: none; }
}