/* Pass the MSRA — session builder (Stage 6B) */

/* The hidden attribute must always win. Author display rules override the
   user-agent [hidden] rule, which is how the player's landing screen once
   showed buttons for sessions that did not exist. */
[data-ptm-qbank-builder] [hidden],
[data-ptm-qbank-builder][hidden] { display: none !important; }

.ptm-builder *, .ptm-builder *::before, .ptm-builder *::after { box-sizing: border-box; }

/* Immersive shell: the builder is a focused task, not a blog page. Mirrors the
   player so the two feel like one product. The .ptm-qbank-builder-active class
   is a JS fallback for page-builder placements where the shortcode is not in
   post_content early enough for the server-side body class. */
.ptm-qbank-focus-page #masthead,
.ptm-qbank-focus-page .site-header,
.ptm-qbank-focus-page #colophon,
.ptm-qbank-focus-page .site-footer,
.ptm-qbank-focus-page .entry-header,
.ptm-qbank-focus-page .entry-title,
.ptm-qbank-focus-page .page-title,
.ptm-qbank-focus-page .ast-title-bar-wrap,
.ptm-qbank-focus-page .breadcrumbs,
.ptm-qbank-focus-page .related-posts,
.ptm-qbank-focus-page .wp-block-post-title,
.ptm-qbank-builder-active #masthead,
.ptm-qbank-builder-active .site-header,
.ptm-qbank-builder-active #colophon,
.ptm-qbank-builder-active .site-footer,
.ptm-qbank-builder-active .entry-header,
.ptm-qbank-builder-active .entry-title,
.ptm-qbank-builder-active .page-title,
.ptm-qbank-builder-active .ast-title-bar-wrap,
.ptm-qbank-builder-active .breadcrumbs,
.ptm-qbank-builder-active .related-posts,
.ptm-qbank-builder-active .wp-block-post-title { display: none !important; }

/* 780px was a single-column width. Two columns inside it left the selector
   about 440px wide on a 1440px screen — a mobile form floating in the middle of
   a desktop. */
.ptm-builder { max-width: 1220px; margin: 0 auto; padding: clamp(12px, 2vw, 24px) clamp(0px, 2vw, 20px); }

/* Theme buttons also restyle the primary action on hover. */
.ptm-builder-start:hover:not(:disabled),
.ptm-builder-start:focus { color: var(--ptm-ui-on-accent) !important; }

.ptm-builder-loading,
.ptm-builder-locked { padding: 28px; background: var(--ptm-ui-surface); border: 1px solid var(--ptm-ui-divider); border-radius: var(--ptm-ui-radius-card); text-align: center; }

.ptm-builder-form { display: grid; gap: 22px; }

.ptm-builder-group { border: 1px solid var(--ptm-ui-divider); border-radius: var(--ptm-ui-radius-card); padding: 18px 20px 20px; margin: 0; background: var(--ptm-ui-surface); }
/* A bordered fieldset renders its legend straddling the top border — the
   browser cuts a notch for it. On a card with a background that reads as the
   heading escaping the box, which is exactly how it looked. Floating the legend
   removes that special rendering and returns it to normal flow inside the card;
   the clearfix keeps the controls below it rather than beside it. */
.ptm-builder-group > legend {
  float: left;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  font-weight: 700;
  font-size: var(--ptm-ui-text-md);
}
/* Block boxes overlap floats — only inline content wraps around them — so the
   controls must clear the legend explicitly rather than relying on it being
   full width. */
.ptm-builder-group > legend ~ * { clear: both; }
.ptm-builder-group::after { content: ''; display: table; clear: both; }
.ptm-builder-hint { margin: 0 0 12px; color: var(--ptm-ui-subtle); font-size: var(--ptm-ui-text-sm); }

.ptm-builder-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; }
.ptm-builder-toolbar-actions { display: flex; gap: 6px; flex: 0 0 auto; }
/* Theme button rules set a white hover colour, which made these unreadable.
   Colour is forced on every state rather than only the default. */
.ptm-builder-link { background: none !important; border: 0; color: var(--ptm-ui-accent-text) !important; cursor: pointer; font-size: var(--ptm-ui-text-sm); font-weight: 700; padding: 4px 2px; text-decoration: underline; text-underline-offset: 2px; }
.ptm-builder-link:hover,
.ptm-builder-link:focus,
.ptm-builder-link:active { background: var(--ptm-ui-surface-muted) !important; color: var(--ptm-ui-accent-text) !important; }
.ptm-builder-link:focus-visible { outline: 2px solid var(--ptm-ui-accent); outline-offset: 2px; }

.ptm-builder-tree { border: 1px solid var(--ptm-ui-surface-muted-2); border-radius: var(--ptm-ui-radius-field); }

/* Only expanded topic lists scroll. Capping the whole tree meant a member had
   to scroll to discover that Specialties existed at all. */
.ptm-tree-topics { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }

.ptm-tree-row + .ptm-tree-row { border-top: 1px solid var(--ptm-ui-surface-muted-2); }

/* "All" sits above the groups and reads as the default choice. */
.ptm-tree-row.is-all { background: var(--ptm-ui-surface-sunken-2); border-bottom: 1px solid var(--ptm-ui-divider); }
.ptm-tree-row.is-all .ptm-tree-name { font-weight: 700; }

.ptm-tree-group + .ptm-tree-group { border-top: 1px solid var(--ptm-ui-divider); }
.ptm-tree-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0; padding: 10px 12px 8px;
  font-size: var(--ptm-ui-text-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ptm-ui-subtle); background: var(--ptm-ui-surface-sunken);
}
.ptm-tree-group-head .ptm-builder-count { background: var(--ptm-ui-divider); }
.ptm-tree-head { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 12px; }
.ptm-tree-toggle { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-height: var(--ptm-ui-control-h); min-width: 0; cursor: pointer; }
.ptm-tree-toggle input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.ptm-tree-name { flex: 1 1 auto; font-weight: 600; min-width: 0; }

.ptm-tree-expand { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--ptm-ui-radius-field); background: none; cursor: pointer; flex: 0 0 auto; }
.ptm-tree-expand:hover { background: var(--ptm-ui-surface-muted); }
.ptm-tree-expand svg { width: 20px; height: 20px; fill: none; stroke: var(--ptm-ui-subtle); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.ptm-tree-row.is-open .ptm-tree-expand svg { transform: rotate(180deg); }
.ptm-tree-expand.is-empty { background: none; cursor: default; }

.ptm-tree-topics { padding: 2px 12px 10px 44px; background: var(--ptm-ui-surface-sunken); border-top: 1px solid var(--ptm-ui-surface-muted-2); }

.ptm-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ptm-builder-option {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--ptm-ui-radius-field); cursor: pointer;
  min-height: var(--ptm-ui-control-h); /* comfortable touch target */
  transition: background .12s ease;
}
.ptm-builder-option:hover { background: var(--ptm-ui-surface-sunken-3); }
.ptm-builder-option input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.ptm-builder-option-name { flex: 1 1 auto; }

/* Mixed topics is a holding pen, not a subject. Muted so it never competes
   with a real topic for attention. */
.ptm-builder-option.is-mixed .ptm-builder-option-name { color: var(--ptm-ui-subtle); font-style: italic; }

.ptm-builder-count {
  flex: 0 0 auto; min-width: 34px; text-align: center;
  padding: 2px 8px; border-radius: var(--ptm-ui-radius-pill);
  background: var(--ptm-ui-surface-muted); color: var(--ptm-ui-ink-soft); font-size: var(--ptm-ui-text-sm); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ptm-builder-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ptm-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; min-height: var(--ptm-ui-control-h);
  border: 1px solid var(--ptm-ui-divider); border-radius: var(--ptm-ui-radius-field); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.ptm-chip:hover { background: var(--ptm-ui-surface-sunken-3); }
.ptm-chip:focus-within { border-color: var(--ptm-ui-accent-text); box-shadow: 0 0 0 3px rgba(43, 75, 216, .18); }
.ptm-chip input { width: 20px; height: 20px; margin: 0; }
.ptm-chip span { display: flex; flex-direction: column; line-height: 1.25; }
.ptm-chip small { color: var(--ptm-ui-subtle); font-size: var(--ptm-ui-text-xs); }

.ptm-builder-message { margin: 0; padding: 12px 14px; border-radius: var(--ptm-ui-radius-field); background: var(--ptm-ui-surface-sunken-3); color: var(--ptm-ui-ink-soft); font-size: var(--ptm-ui-text-sm); min-height: var(--ptm-ui-control-h); display: flex; align-items: center; }
.ptm-builder-message.is-ok { background: var(--ptm-ui-ok-soft); color: var(--ptm-ui-ok-ink); }
.ptm-builder-message.is-short { background: var(--ptm-ui-warn-soft); color: var(--ptm-ui-warn-ink); }
.ptm-builder-message.is-empty { background: var(--ptm-ui-bad-soft); color: var(--ptm-ui-bad-ink); }

.ptm-builder-start {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ptm-ui-control-h); padding: 6px 18px;
  border: 0; border-radius: var(--ptm-ui-radius-pill); cursor: pointer;
  background: var(--ptm-ui-accent); color: var(--ptm-ui-on-accent); font-weight: 700; font-size: var(--ptm-ui-text-sm);
  text-decoration: none;
  transition: background .12s ease, transform .12s ease;
}
.ptm-builder-start:hover:not(:disabled) { background: var(--ptm-ui-accent-dark); }
.ptm-builder-start:disabled { background: var(--ptm-ui-border-strong-2); cursor: not-allowed; }

@media (max-width: 600px) {
  .ptm-builder-group { padding: 14px 14px 16px; }
  .ptm-builder-chips { display: grid; grid-template-columns: repeat(2, 1fr); }
  .ptm-builder-start { width: 100%; }
}

@media (max-width: 420px) {
  /* The embedded dashboard gives the builder a narrower card than its page.
     Let each labelled setting own a row so length chips never force the app
     wider than a 320px viewport. */
  .ptm-builder-controls,
  .ptm-builder-settings,
  .ptm-builder-field { min-width: 0; width: 100%; }
  .ptm-builder-field { align-items: stretch; flex-wrap: wrap; }
  .ptm-builder-field-label { flex: 0 0 100%; }
  .ptm-builder-chips.is-lengths { flex: 1 1 150px; min-width: 0; }
}

/* Coarse pointers get larger controls, matching the player's 40px targets. */
@media (pointer: coarse) {
  .ptm-builder-option { min-height: var(--ptm-ui-control-h-lg); }
  .ptm-builder-option input,
  .ptm-chip input { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ptm-builder-option,
  .ptm-chip,
  .ptm-builder-start { transition: none; }
}

/* Free preview banner ----------------------------------------------------- */
.ptm-builder-free {
  align-items: center;
  background: var(--ptm-ui-surface-sunken-3);
  border: 1px solid var(--ptm-ui-accent-border-2);
  border-radius: var(--ptm-ui-radius-card);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding: 16px 18px;
}
.ptm-builder-free.is-exhausted { background: var(--ptm-ui-warn-soft); border-color: var(--ptm-ui-warn-border); }
.ptm-builder-free strong { display: block; font-size: var(--ptm-ui-text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ptm-ui-subtle); }
.ptm-builder-free p { margin: 4px 0 10px; }
.ptm-builder-free-bar { background: var(--ptm-ui-accent-border-2); border-radius: var(--ptm-ui-radius-pill); height: 8px; min-width: 200px; overflow: hidden; }
.ptm-builder-free-bar > span { background: var(--ptm-ui-accent); border-radius: var(--ptm-ui-radius-pill); display: block; height: 100%; }

/* Deep-link notice --------------------------------------------------------
   Shown when ?specialty= narrowed the tree. Deliberately quieter than the free
   preview banner: it reports a state, it does not ask for anything. */
.ptm-builder-preselect {
  align-items: center;
  margin-bottom: 22px;
  background: var(--ptm-ui-surface-muted);
  border: 1px solid var(--ptm-ui-divider-3);
  border-radius: var(--ptm-ui-radius-card);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  padding: 12px 16px;
}
.ptm-builder-preselect p { margin: 0; color: var(--ptm-ui-ink-soft); font-size: var(--ptm-ui-text-sm); }
.ptm-builder-preselect strong { font-weight: 700; }

/* Two-column layout ------------------------------------------------------
   Tree on the left, session controls on the right. The controls stay in view
   while the member scrolls a long tree, so Start is always one click away
   instead of a scroll to the bottom of sixteen specialties. */
.ptm-builder-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 300px;
}
.ptm-builder-main { min-width: 0; }
.ptm-builder-side { min-width: 0; position: sticky; top: 16px; }
.ptm-builder-side-inner { display: grid; gap: 14px; }
.ptm-builder-side .ptm-builder-group { padding: 14px 16px 16px; }
.ptm-builder-side legend { font-size: var(--ptm-ui-text-sm); margin-bottom: 10px; }

/* Brief / Detailed -------------------------------------------------------- */
.ptm-builder-views { border: 1px solid var(--ptm-ui-border-strong); border-radius: var(--ptm-ui-radius-pill); display: inline-flex; flex: 0 0 auto; overflow: hidden; }
.ptm-builder-view {
  background: none !important; border: 0 !important; color: var(--ptm-ui-ink-soft-2) !important;
  border-radius: var(--ptm-ui-radius-pill); cursor: pointer; font-size: var(--ptm-ui-text-sm); font-weight: 700;
  min-height: var(--ptm-ui-control-h); padding: 6px 14px;
}
.ptm-builder-view.is-active { background: var(--ptm-ui-accent) !important; color: var(--ptm-ui-on-accent) !important; }
.ptm-builder-view:focus-visible { outline: 2px solid var(--ptm-ui-accent); outline-offset: -2px; }

.ptm-builder-toolbar-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }

/* Controls column --------------------------------------------------------- */
.ptm-builder-chips.is-lengths { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ptm-builder-chips.is-stacked { display: grid; gap: 6px; grid-template-columns: 1fr; }

.ptm-builder-custom { align-items: center; display: flex; gap: 10px; margin-top: 12px; }
.ptm-builder-custom span { color: var(--ptm-ui-subtle); font-size: var(--ptm-ui-text-sm); }
.ptm-builder-custom input {
  background: var(--ptm-ui-surface); border: 1px solid var(--ptm-ui-border-strong); border-radius: var(--ptm-ui-radius-field); color: var(--ptm-ui-ink);
  font: inherit; min-height: var(--ptm-ui-control-h); padding: 6px 10px; width: 88px;
}
.ptm-builder-custom input:focus-visible { border-color: var(--ptm-ui-accent-text); outline: 2px solid var(--ptm-ui-accent); outline-offset: 1px; }

.ptm-builder-segmented {
  border: 1px solid var(--ptm-ui-border-strong); border-radius: var(--ptm-ui-radius-pill); display: inline-flex;
  flex: 0 0 auto; gap: 0; overflow: hidden;
}
.ptm-segment { cursor: pointer; display: flex; flex: 1 1 0; }
.ptm-segment input { position: absolute; opacity: 0; pointer-events: none; }
.ptm-segment span {
  border: 0; border-radius: var(--ptm-ui-radius-pill); display: flex; min-height: var(--ptm-ui-control-h); min-width: 62px;
  padding: 6px 14px; text-align: center;
}
.ptm-segment strong { display: block; font-size: var(--ptm-ui-text-sm); }
.ptm-segment small { color: var(--ptm-ui-subtle); display: block; font-size: var(--ptm-ui-text-xs); line-height: 1.3; }
.ptm-segment input:checked + span { background: var(--ptm-ui-accent); color: var(--ptm-ui-on-accent); }
.ptm-segment input:focus-visible + span { outline: 2px solid var(--ptm-ui-accent); outline-offset: -2px; }

/* Mobile action bar ------------------------------------------------------- */
.ptm-builder-sticky { display: none; }

@media (max-width: 900px) {
  /* A sticky sidebar on a phone is a block that eats the screen, so the grid
     stacks and a fixed bar carries Start instead. */
  .ptm-builder-layout { grid-template-columns: minmax(0, 1fr); }
  .ptm-builder-side { position: static; }
  /* Only shown once the real Start has scrolled out of view — see
     syncStickyAccessibility(). Two visible Start buttons would be two answers
     to the same question. */
  .ptm-builder-sticky { display: none; }
  /* Compact: one full-width button and 8px of surround. It previously carried
     a 52px button, a redundant availability line and 20px+ of padding, which
     made a stand-in taller than the control it stands in for. */
  .ptm-builder-sticky.is-active {
    align-items: center; background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--ptm-ui-border-strong); bottom: 0; display: flex; left: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 60;
  }
  .ptm-builder-sticky .ptm-builder-start { margin: 0; min-height: var(--ptm-ui-control-h); padding: 10px 14px; width: 100%; }
  /* Clear the fixed bar so the last specialty is reachable. */
  .ptm-builder-form { padding-bottom: 68px; }
}

/* Master-detail selector --------------------------------------------------
   The specialty list beside the topics of whichever specialty is active. The
   alternative — expanding every specialty inline — is roughly eighty rows, and
   lengthening the page is the problem this release exists to solve. */
.ptm-builder-panes { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.ptm-builder-panes:has(.ptm-topics-pane:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Overflow is contained here rather than allowed to lengthen the page, so
   Start stays where the member left it. */
.ptm-builder-tree,
.ptm-topics-pane { max-height: min(56vh, 520px); overflow-y: auto; }

.ptm-topics-pane { border: 1px solid var(--ptm-ui-divider); border-radius: var(--ptm-ui-radius-field); }
.ptm-topics-head {
  align-items: center; background: var(--ptm-ui-surface-sunken); border-bottom: 1px solid var(--ptm-ui-divider);
  display: flex; gap: 8px; padding: 8px 10px; position: sticky; top: 0; z-index: 1;
}
.ptm-topics-head h4 { flex: 1 1 auto; font-size: var(--ptm-ui-text-sm); margin: 0; }
.ptm-topics-list { display: grid; }
.ptm-topics-empty { color: var(--ptm-ui-subtle); font-size: var(--ptm-ui-text-sm); margin: 0; padding: 16px 12px; text-align: center; }
.ptm-tree-row.is-active { background: var(--ptm-ui-accent-soft); box-shadow: inset 3px 0 0 var(--ptm-ui-accent); }

/* Start first ------------------------------------------------------------- */
.ptm-builder-action { display: grid; gap: 6px; }
.ptm-builder-action .ptm-builder-start { margin: 0; width: 100%; }
.ptm-builder-summary {
  color: var(--ptm-ui-subtle); font-size: var(--ptm-ui-text-sm); margin: 0; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Information disclosure -------------------------------------------------- */
.ptm-builder-info-wrap { position: relative; }
.ptm-builder-info {
  align-items: center; background: none !important; border: 0 !important; border-radius: var(--ptm-ui-radius-pill);
  color: var(--ptm-ui-subtle) !important; cursor: pointer; display: inline-flex; height: 32px; justify-content: center; width: 32px;
}
.ptm-builder-info svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; width: 19px; }
.ptm-builder-info:hover, .ptm-builder-info[aria-expanded="true"] { background: var(--ptm-ui-surface-muted) !important; color: var(--ptm-ui-accent-text) !important; }
.ptm-builder-info:focus-visible { outline: 2px solid var(--ptm-ui-accent); outline-offset: 2px; }
.ptm-builder-info-panel {
  background: var(--ptm-ui-surface); border: 1px solid var(--ptm-ui-border-strong); border-radius: var(--ptm-ui-radius-field);
  box-shadow: 0 16px 40px rgba(31,45,77,.16); left: 0; padding: 12px 14px;
  position: absolute; top: 38px; width: min(320px, 78vw); z-index: 40;
}
.ptm-builder-info-panel p { color: var(--ptm-ui-ink-soft-2); font-size: var(--ptm-ui-text-sm); line-height: 1.5; margin: 0 0 8px; }
.ptm-builder-info-panel p:last-child { margin-bottom: 0; }

/* Typography -------------------------------------------------------------- */
.ptm-builder-group legend,
.ptm-tree-group-head,
.ptm-tree-name,
.ptm-builder-count,
.ptm-builder-view,
.ptm-segment strong {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Uppercase headings carried .08em, which pushed four-digit totals apart until
   they read as separate numbers. */
.ptm-tree-group-head { letter-spacing: .04em; }
.ptm-builder-count { font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Density ----------------------------------------------------------------- */
@media (min-width: 901px) {
  .ptm-builder-group { padding: 12px 14px 14px; }
  .ptm-builder-side .ptm-builder-group { padding: 10px 12px 12px; }
  .ptm-builder-side-inner { gap: 10px; }
  .ptm-tree-toggle { min-height: var(--ptm-ui-control-h); }
  .ptm-tree-head { padding: 2px 8px 2px 10px; }
  .ptm-builder-option { min-height: var(--ptm-ui-control-h); }
  .ptm-tree-group-head { padding: 7px 10px 6px; }
  .ptm-builder-toolbar { margin-bottom: 6px; }
  .ptm-builder-toolbar-actions { margin-bottom: 8px; }
  .ptm-builder-custom { margin-top: 8px; }
}

/* Coarse pointers keep full-size targets whatever the desktop density. */
@media (pointer: coarse) {
  .ptm-tree-toggle { min-height: var(--ptm-ui-control-h-lg); }
  .ptm-builder-option { min-height: var(--ptm-ui-control-h-lg); }
}

/* Tutor and Test are the same pill control as Brief and Detailed. */
.ptm-builder-segmented { align-items: stretch; }
.ptm-segment span { flex-direction: column; height: 100%; justify-content: center; width: 100%; }

/* Legend with its information control -------------------------------------- */
.ptm-builder-legend { align-items: center; display: inline-flex; gap: 2px; }
.ptm-builder-toolbar { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.ptm-builder-toolbar-actions { margin: 0; }

/* Question pool in two columns: four stacked rows drove the right column
   taller than the selector beside it. */
@media (min-width: 901px) {
  .ptm-builder-chips.is-stacked { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptm-builder-chips.is-stacked .ptm-chip span { display: block; }
  .ptm-builder-chips.is-stacked small { font-size: var(--ptm-ui-text-xs); line-height: 1.25; }
}

@media (min-width: 901px) {
  /* Tighter still: the selector and the controls should end at roughly the
     same place rather than the controls running on past it. */
  .ptm-builder-tree,
  .ptm-topics-pane { max-height: min(48vh, 460px); }
  .ptm-builder-action { gap: 4px; }
  .ptm-builder-chips.is-lengths { gap: 5px; }
  .ptm-segment span { min-height: var(--ptm-ui-control-h); padding: 7px 9px; }
}

/* One wide workspace -------------------------------------------------------
   The selector and a narrow right-hand rail became a rail too narrow for its
   own labels — "Previously incorrect" could not fit in a 300px column, and
   shrinking the text would only have hidden that. Everything now shares one
   card, so the controls have the page width to sit in. */
.ptm-builder-card {
  background: var(--ptm-ui-surface);
  border: 1px solid var(--ptm-ui-divider);
  border-radius: var(--ptm-ui-radius-card);
  padding: 14px 16px 16px;
}
.ptm-builder-command {
  align-items: center; border-bottom: 1px solid var(--ptm-ui-divider);
  display: flex; flex-wrap: wrap; gap: 10px 14px; padding-bottom: 12px;
}
.ptm-builder-command h2 { font-size: var(--ptm-ui-text-card); margin: 0; }
.ptm-builder-command-end { align-items: center; display: flex; gap: 12px; margin-left: auto; }
.ptm-builder-command .ptm-builder-start {
  background: var(--ptm-ui-accent); border-radius: var(--ptm-ui-radius-pill); color: var(--ptm-ui-on-accent);
  font-size: var(--ptm-ui-text-sm); margin: 0; min-height: var(--ptm-ui-control-h); min-width: 0; padding: 6px 18px; width: auto;
}
.ptm-builder-command .ptm-builder-start:hover:not(:disabled),
.ptm-builder-command .ptm-builder-start:focus { background: var(--ptm-ui-accent-dark); }
.ptm-builder-summary { color: var(--ptm-ui-subtle); font-size: var(--ptm-ui-text-sm); margin: 0; text-align: right; }

.ptm-builder-controls {
  align-items: center; display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 0;
}
.ptm-builder-settings { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 18px; margin-left: auto; }
.ptm-builder-field { align-items: center; display: flex; gap: 8px; }
.ptm-builder-field-label {
  color: var(--ptm-ui-subtle); font-size: var(--ptm-ui-text-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.ptm-builder-select {
  background: var(--ptm-ui-surface); border: 1px solid var(--ptm-ui-border-strong);
  border-radius: var(--ptm-ui-radius-field); color: var(--ptm-ui-ink); font: inherit; font-size: var(--ptm-ui-text-sm);
  min-height: var(--ptm-ui-control-h); padding: 5px 8px;
}
.ptm-builder-custom-input {
  background: var(--ptm-ui-surface); border: 1px solid var(--ptm-ui-border-strong);
  border-radius: var(--ptm-ui-radius-field); color: var(--ptm-ui-ink); font: inherit; font-size: var(--ptm-ui-text-sm);
  min-height: var(--ptm-ui-control-h); padding: 5px 8px; width: 78px;
}

/* Category tabs ----------------------------------------------------------- */
.ptm-builder-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.ptm-builder-tab {
  background: none !important; border: 1px solid var(--ptm-ui-border-strong) !important;
  border-radius: var(--ptm-ui-radius-pill); color: var(--ptm-ui-ink-soft) !important; cursor: pointer;
  font-size: var(--ptm-ui-text-sm); font-weight: 650; min-height: var(--ptm-ui-control-h); padding: 5px 13px;
}
.ptm-builder-tab.is-active {
  background: var(--ptm-ui-accent) !important; border-color: var(--ptm-ui-accent) !important;
  color: var(--ptm-ui-on-accent) !important;
}
.ptm-builder-tab:focus-visible { outline: 2px solid var(--ptm-ui-accent); outline-offset: 2px; }

/* Information lists ------------------------------------------------------- */
.ptm-builder-info.is-inline { height: 26px; width: 26px; }
.ptm-builder-info.is-inline svg { height: 16px; width: 16px; }
.ptm-builder-info-list { display: grid; gap: 2px 10px; grid-template-columns: auto 1fr; margin: 0; }
.ptm-builder-info-list dt { color: var(--ptm-ui-ink); font-size: var(--ptm-ui-text-sm); font-weight: 700; }
.ptm-builder-info-list dd { color: var(--ptm-ui-ink-soft); font-size: var(--ptm-ui-text-sm); margin: 0 0 6px; }

/* Topics pane master ------------------------------------------------------ */
.ptm-topics-all { align-items: center; display: flex; }
.ptm-topics-all input { height: 18px; margin: 0; width: 18px; }
.ptm-topics-count { color: var(--ptm-ui-subtle); font-size: var(--ptm-ui-text-xs); }

@media (min-width: 901px) {
  /* Brief shows every specialty without an internal scrollbar: the table is
     the page, so a scroll region inside a scrolling page is one too many. */
  .ptm-builder-panes { grid-template-columns: minmax(0, 1fr); }
  .ptm-builder-tree { max-height: none; overflow: visible; }
  .ptm-builder-panes:has(.ptm-topics-pane:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  .ptm-builder-panes:has(.ptm-topics-pane:not([hidden])) .ptm-builder-tree { max-height: min(60vh, 560px); overflow-y: auto; }
  .ptm-topics-pane { max-height: min(60vh, 560px); }

  .ptm-tree-head { padding: 0 8px 0 10px; }
  .ptm-tree-toggle { min-height: var(--ptm-ui-control-h); }
  .ptm-tree-group-head { padding: 5px 10px 4px; }
  .ptm-builder-option { min-height: var(--ptm-ui-control-h); }

  /* Specialty names stay on one line without running beneath the count. The
     full server-supplied name remains in the title attribute. */
  .ptm-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ptm-tree-toggle { flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 900px) {
  .ptm-builder-command-end { margin-left: 0; width: 100%; }
  .ptm-builder-command .ptm-builder-start { width: 100%; }
  .ptm-builder-summary { text-align: left; }
  .ptm-builder-settings { margin-left: 0; }
  .ptm-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 600px) {
  .ptm-builder-command-end { align-items: stretch; flex-direction: column; gap: 8px; }
  .ptm-builder-command-end .ptm-builder-summary { font-size: var(--ptm-ui-text-xs); order: 1; text-align: center; white-space: nowrap; width: 100%; }
  .ptm-builder-command-end .ptm-builder-start { order: 2; width: 100%; }
  .ptm-tree-name { font-size: var(--ptm-ui-text-sm); }
}

/* Length chips sit in a row now, not the 2x2 grid the narrow rail needed.
   The grid cost about 110px of height and left the control row half empty. */
@media (min-width: 901px) {
  .ptm-builder-chips.is-lengths { display: flex; flex-wrap: nowrap; gap: 4px; }
  .ptm-builder-chips.is-lengths .ptm-chip { flex: 0 0 auto; }
  .ptm-builder-chips.is-lengths .ptm-chip span { display: flex; align-items: baseline; gap: 3px; padding: 4px 8px; }
  .ptm-builder-chips.is-lengths .ptm-chip small { font-size: var(--ptm-ui-text-xs); }
  .ptm-builder-chips.is-lengths .ptm-chip input { margin: 0 2px 0 0; }
  .ptm-builder-segmented { display: inline-flex; gap: 0; }
  .ptm-segment span { min-height: var(--ptm-ui-control-h); min-width: 62px; padding: 6px 14px; }
  .ptm-builder-controls { padding: 10px 0; }
}

@media (min-width: 901px) {
  /* Rows were 41px: the chip padding inside each length option was setting the
     control row's height, and row padding was stacking on the toggle's own
     min-height. 17 specialties at 41px is 150px more table than at 32px. */
  .ptm-builder-controls { align-items: center; padding: 8px 0; }
  .ptm-builder-controls .ptm-chip span { min-height: var(--ptm-ui-control-h); }
  .ptm-builder-controls .ptm-chip strong { font-size: var(--ptm-ui-text-sm); }

  .ptm-tree-row { padding: 0; }
  .ptm-tree-head { min-height: var(--ptm-ui-control-h); padding: 0 8px 0 10px; }
  .ptm-tree-toggle { min-height: var(--ptm-ui-control-h); padding: 0; }
  .ptm-builder-count { padding: 1px 8px; }
}

@media (min-width: 901px) {
  /* The 40px expand button, not the row, was setting row height — and it is
     only used in Detailed on narrow screens. The length chip stacked its label
     under its number, which is why the control row was 186px. */
  .ptm-tree-expand { height: 32px; width: 32px; }
  .ptm-builder-chips.is-lengths .ptm-chip span { flex-direction: row; }
}

@media (min-width: 901px) {
  /* Each length chip repeated the word "questions" beside its number, so the
     field was 740px wide and the settings wrapped onto a second line. The
     field label already says Questions; the chips only need the number. */
  .ptm-builder-chips.is-lengths .ptm-chip small { display: none; }
  .ptm-builder-chips.is-lengths .ptm-chip span { min-height: var(--ptm-ui-control-h); padding: 3px 9px; }
  .ptm-builder-settings { gap: 8px 14px; }
  .ptm-builder-controls { gap: 8px 14px; }
}

/* Dashboard-era compact command surface ----------------------------------
   The controls still belong to the canonical builder. This is a presentation
   reflow only: one intent row, one taxonomy/pool row and one count row. */
.ptm-builder-command-mode { align-items: center; display: inline-flex; gap: 7px; }
.ptm-builder-command-mode .ptm-builder-info-wrap { flex: 0 0 auto; }
.ptm-builder-controls .ptm-builder-field.is-pool { margin-left: auto; }
.ptm-builder-pool { border: 0; flex-wrap: wrap; margin-bottom: 0; margin-top: 0; padding: 0; }
.ptm-builder-pool-options { display: flex; flex-wrap: wrap; gap: 5px; }
.ptm-builder-pool-option {
  align-items: center; background: var(--ptm-ui-surface) !important; border: 1px solid var(--ptm-ui-border-strong) !important;
  border-radius: var(--ptm-ui-radius-pill); color: var(--ptm-ui-ink) !important; cursor: pointer; display: inline-flex;
  font: inherit; font-size: var(--ptm-ui-text-sm); gap: 5px; height: var(--ptm-ui-control-h); justify-content: center; line-height: 1.2; min-height: var(--ptm-ui-control-h); padding: 0 10px;
}
.ptm-builder-pool-option span { color: var(--ptm-ui-subtle); font-size: var(--ptm-ui-text-xs); }
.ptm-builder-pool-option.is-active { background: var(--ptm-ui-accent) !important; border-color: var(--ptm-ui-accent) !important; color: var(--ptm-ui-on-accent) !important; }
.ptm-builder-pool-option.is-active span { color: inherit; }
.ptm-builder-pool-option:disabled { cursor: not-allowed; opacity: 1; }
.ptm-builder-length-row {
  align-items: center; border-bottom: 1px solid var(--ptm-ui-divider); display: flex;
  flex-wrap: wrap; gap: 8px; padding: 0 0 10px;
}
.ptm-builder-length-row .ptm-builder-field { flex-wrap: wrap; min-width: 0; }
.ptm-builder-chips.is-lengths .ptm-chip {
  background: none; border: 0; min-height: var(--ptm-ui-control-h); padding: 0;
}
.ptm-builder-chips.is-lengths .ptm-chip > input {
  height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px;
}
.ptm-builder-chips.is-lengths .ptm-chip > span {
  align-items: center; border: 1px solid var(--ptm-ui-border-strong); border-radius: var(--ptm-ui-radius-pill);
  display: inline-flex; justify-content: center; min-height: var(--ptm-ui-control-h); min-width: 44px; padding: 5px 11px;
}
.ptm-builder-chips.is-lengths .ptm-chip > input:checked + span {
  background: var(--ptm-ui-accent); border-color: var(--ptm-ui-accent); color: var(--ptm-ui-on-accent);
}
.ptm-builder-chips.is-lengths .ptm-chip > input:checked + span small { color: inherit; }
.ptm-builder-chips.is-lengths .ptm-chip > input:focus-visible + span {
  outline: 2px solid var(--ptm-ui-accent); outline-offset: 2px;
}
.ptm-builder-custom-stepper {
  align-items: center; border: 1px solid var(--ptm-ui-border-strong); border-radius: var(--ptm-ui-radius-field);
  display: inline-flex; overflow: hidden;
}
.ptm-builder-custom-stepper button {
  align-items: center; background: var(--ptm-ui-surface) !important; border: 0 !important;
  border-radius: var(--ptm-ui-radius-pill); color: var(--ptm-ui-ink) !important; cursor: pointer; display: inline-flex;
  font-size: var(--ptm-ui-text-md); height: var(--ptm-ui-control-h); justify-content: center;
  padding: 0 !important; width: var(--ptm-ui-control-h);
}
.ptm-builder-custom-stepper button:hover { background: var(--ptm-ui-surface-muted) !important; }
.ptm-builder-custom-stepper .ptm-builder-custom-input {
  border: 0; border-left: 1px solid var(--ptm-ui-divider);
  border-right: 1px solid var(--ptm-ui-divider); min-height: var(--ptm-ui-control-h); padding: 4px 8px; text-align: center; width: 104px;
}
.ptm-dash-overview .ptm-builder-command { gap: 8px 12px; }

@media (min-width: 901px) {
  .ptm-builder-command-mode .ptm-segment span { min-height: var(--ptm-ui-control-h); }
  .ptm-builder-length-row .ptm-builder-chips.is-lengths .ptm-chip > span { min-height: var(--ptm-ui-control-h); padding: 5px 11px; }
}

@media (max-width: 900px) {
  .ptm-builder-start,
  .ptm-builder-view,
  .ptm-builder-command-mode .ptm-segment span,
  .ptm-builder-tab,
  .ptm-builder-command .ptm-builder-start,
  .ptm-builder-sticky .ptm-builder-start,
  .ptm-builder-select,
  .ptm-builder-pool-option,
  .ptm-builder-custom-input,
  .ptm-builder-custom-stepper .ptm-builder-custom-input,
  .ptm-builder-chips.is-lengths .ptm-chip,
  .ptm-builder-chips.is-lengths .ptm-chip > span { min-height: var(--ptm-ui-control-h-lg); }
  .ptm-builder-chips.is-lengths .ptm-chip > span { height: var(--ptm-ui-control-h-lg); }
  .ptm-builder-custom-stepper button { height: var(--ptm-ui-control-h-lg); width: var(--ptm-ui-control-h-lg); }
  .ptm-builder-pool-option { height: var(--ptm-ui-control-h-lg); }
  .ptm-builder-command-mode { margin-left: auto; }
  .ptm-builder-controls .ptm-builder-field.is-pool { margin-left: 0; }
  .ptm-builder-length-row .ptm-builder-field { width: 100%; }
  .ptm-builder-length-row .ptm-builder-field-label { flex: 0 0 100%; }
}

@media (max-width: 520px) {
  .ptm-builder-command-mode { margin-left: 0; }
  .ptm-builder-command { align-items: stretch; }
  .ptm-builder-views { align-self: flex-start; flex: 0 1 auto; }
  .ptm-builder-command-mode { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; width: 100%; }
  .ptm-builder-command-mode .ptm-builder-field-label { flex: 0 0 100%; }
  .ptm-builder-command-mode .ptm-builder-segmented { flex: 1 1 100%; min-width: 0; width: 100%; }
  .ptm-builder-command-mode .ptm-segment { flex: 1 1 0; min-width: 0; }
  .ptm-builder-controls { align-items: stretch; }
  .ptm-builder-controls .ptm-builder-tabs { width: 100%; }
  .ptm-builder-controls .ptm-builder-field.is-pool { justify-content: space-between; width: 100%; }
  .ptm-builder-select { flex: 1 1 auto; }
  .ptm-builder-chips.is-lengths { flex: 1 1 100%; flex-wrap: wrap; }
  .ptm-builder-length-row .ptm-builder-field { align-items: center; }
  .ptm-builder-length-row .ptm-builder-field-label { flex: 0 0 auto; }
  .ptm-builder-custom-stepper button { height: var(--ptm-ui-control-h-lg); width: var(--ptm-ui-control-h-lg); }
  .ptm-builder-custom-stepper .ptm-builder-custom-input { min-height: var(--ptm-ui-control-h-lg); width: 100px; }
}

@media (pointer: coarse) {
  .ptm-builder-start,
  .ptm-builder-view,
  .ptm-builder-command-mode .ptm-segment span,
  .ptm-builder-tab,
  .ptm-builder-command .ptm-builder-start,
  .ptm-builder-sticky .ptm-builder-start,
  .ptm-builder-select,
  .ptm-builder-pool-option,
  .ptm-builder-custom-input,
  .ptm-builder-custom-stepper .ptm-builder-custom-input,
  .ptm-builder-chips.is-lengths .ptm-chip,
  .ptm-builder-chips.is-lengths .ptm-chip > span,
  .ptm-tree-toggle,
  .ptm-builder-option { min-height: var(--ptm-ui-control-h-lg); }
  .ptm-builder-chips.is-lengths .ptm-chip > span { height: var(--ptm-ui-control-h-lg); }
  .ptm-builder-pool-option { height: var(--ptm-ui-control-h-lg); }
  .ptm-builder-custom-stepper button { height: var(--ptm-ui-control-h-lg); width: var(--ptm-ui-control-h-lg); }
}