/* Experimental visual layer. Printing and the upstream viewer keep their own styles. */
:root {
  --surface-canvas: #f3f4f3;
  --surface-sunken: #f3f5f4;
  --border: #dce1de;
  --border-subtle: #e9ecea;
  --border-control: #b6bfba;
  --text: #202824;
  --text-secondary: #4b5650;
  --text-muted: #616b65;
  --r-sm: 8px;
  --r-md: 12px;
}
button { height: 36px; border-color: var(--border); font-size: 13px; }
button:not(:disabled) { transition: background-color .14s, border-color .14s, box-shadow .14s; }
button:hover:not(:disabled) { border-color: #9aa79f; }
button:focus-visible, select:focus-visible { outline-width: 3px; outline-offset: 3px; }
.app-bar { height: 60px; padding-inline: 24px; }
.user-menu-button { width: 40px; height: 40px; display: grid; place-items: center; }
.user-panel { top: 64px; }
.workspace { height: calc(100dvh - 60px); grid-template-columns: minmax(280px, 40fr) 16px minmax(560px, 60fr); padding: 16px 20px 20px; }
.search-panel, .worksheet-panel { box-shadow: 0 2px 5px rgb(25 39 30 / .025); }
.pane-resizer::after { width: 3px; background: #b9c2bc; }
.panel-heading { flex-basis: 56px; height: 56px; padding-inline: 20px; }
.panel-heading h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: -.025em; }
.section-number { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: var(--surface-sunken); color: var(--text-muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.filters { padding: 16px 20px; gap: 10px 12px; }
.filters > label:not(.toggle) { height: 40px; border-color: var(--border-control); border-radius: 8px; font-size: 12px; }
.filters > label:not(.toggle) select { font-size: 14px; padding-left: 10px; }
.assemble-controls { gap: 8px 12px; }
.assemble-count { height: 40px; border-color: var(--border-control); }
.assemble-count .field-label { font-size: 12px; }
.assemble-count .stepper { gap: 0; }
.assemble-count .stepper button { width: 32px; height: 32px; border-radius: 6px; }
.assemble-count .stepper input { width: 3ch; font-size: 14px; }
.assemble-difficulty .segmented { height: 40px; padding: 3px; gap: 2px; background: var(--surface-sunken); border-color: var(--border); }
.assemble-difficulty .segmented button { border: 0; border-radius: 5px; font-size: 13px; }
.assemble-difficulty .segmented button + button { border: 0; }
.assemble-difficulty .segmented button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 4px rgb(20 35 26 / .14); }
.assemble-total { gap: 8px; min-height: 32px; }
.assemble-total .field-label, #target-difficulty-value { font-size: 12px; }
.assemble-total .stepper { height: 32px; gap: 4px; margin-left: auto; }
.assemble-total .stepper button { width: 32px; height: 32px; font-size: 16px; background: transparent; border: 1px solid var(--border); }
.filters .assemble-field button { height: 44px; font-size: 14px; border-radius: 8px; }
.assemble-hint { font-size: 12px; }
.search-panel .list-heading { padding: 18px 20px 12px; }
.candidate-heading-actions { gap: 12px; }
.result-count { font-size: 12px; }
.candidate-view-toggle { padding: 3px; gap: 2px; border-radius: 8px; background: var(--surface-sunken); }
.candidate-view-toggle button { height: 30px; padding-inline: 10px; border: 0; border-radius: 5px; }
.candidate-view-toggle button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgb(20 35 26 / .12); }
.filters.card-filters { padding: 0 20px; }
.candidate-cards { margin: 14px 20px 0; scrollbar-gutter: stable; }
.candidate-card-list { gap: 12px; }
.candidate-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "thumb thumb" "details actions"; border-radius: 10px; }
.candidate-card:hover { border-color: #a7b5ac; }
.candidate-card > .candidate-thumbnail { border: 0; border-bottom: 1px solid var(--border-subtle); padding: 14px; }
.candidate-thumbnail { min-height: 100px; }
.candidate-card > .candidate-details { padding: 10px 12px; align-self: center; }
.candidate-card > .candidate-actions { padding: 8px 12px 8px 0; align-content: center; gap: 6px; }
.candidate-metadata { align-items: center; gap: 5px 10px; font-size: 12px; }
.candidate-card > .candidate-actions button { min-width: 76px; height: 36px; padding-inline: 12px; font-size: 13px; }
.candidate-card.added { background: #f5f7f5; border-color: #a7b5ac; }
.pagination { gap: 16px; padding: 12px 20px; }
.pagination button { height: 36px; }
.worksheet-heading { height: auto; min-height: 60px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.worksheet-heading-lead { gap: 10px; }
.worksheet-heading-lead h2 { flex-basis: 145px; font-size: 16px; }
.worksheet-heading button { height: 34px; font-size: 12px; border-radius: 7px; }
.worksheet-heading .worksheet-actions { gap: 2px; padding-left: 8px; border-left: 1px solid var(--border); }
.worksheet-heading .worksheet-actions button { width: 64px; flex-basis: 64px; background: transparent; border-color: transparent; }
.worksheet-heading .worksheet-actions button:hover:not(:disabled) { background: var(--surface-sunken); }
.worksheet-heading .worksheet-actions button:disabled { color: #828d86; background: transparent; border-color: transparent; }
.worksheet-heading .worksheet-actions #save-worksheet { border-color: var(--border-control); margin-left: 6px; }
.worksheet-heading .worksheet-actions #save-worksheet.primary-button { color: #fff; background: var(--primary); border-color: var(--primary); }
.worksheet-heading .worksheet-actions #save-worksheet.primary-button:hover { background: var(--primary-hover); }
.export-menu button.export-button { background: var(--surface-sunken); }
.export-menu button.export-button:hover { background: var(--border-subtle); }
.worksheet-heading .export-menu-button { background: var(--surface-sunken); border: 1px solid var(--border); }
.worksheet-heading .export-menu-button:hover:not(:disabled) { background: var(--border-subtle); }
.worksheet-heading .layout-menu-button { border-color: transparent; }
.worksheet-heading .export-actions { gap: 4px; }
.worksheet-command-bar { padding: 12px 16px 8px; }
.worksheet-stats { flex-wrap: wrap; overflow: visible; white-space: normal; row-gap: 8px; }
.stats-stack { flex-basis: 220px; height: 24px; }
.stats-tally { overflow: visible; }
.zoom-row button { height: 32px; }
.worksheet-heading-status { display: none; }
.worksheet-status-line { margin: 0 16px 8px; min-height: 18px; font-size: 12px; flex-wrap: wrap; }
.worksheet-status-line .preview-state { white-space: normal; }
/* Keep the live status available to assistive technology without repeating the empty state. */
.worksheet-panel:not(.has-items) .worksheet-command-bar { display: none; }
.worksheet-panel:not(.has-items) .worksheet-status-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; margin: 0; }
.worksheet-panel:not(.has-items) .worksheet-status-line:has(#preview-retry:not([hidden])) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin: 8px 16px; }
.panel-height-resizer { flex-basis: 10px; }
.panel-height-resizer::after { width: 28px; height: 3px; background: #c9d0cb; }
.pdf-preview { margin: 0 12px 12px; }
.preview-pages { padding: 18px; border-color: var(--border-subtle); background: #eef1ee; }
.preview-page { box-shadow: 0 3px 14px rgb(25 39 30 / .08); }
#preview-empty { overflow: auto; gap: 0; padding: 36px 24px; border: 1px solid var(--border-subtle); background: #f7f8f6; align-content: center; }
#preview-empty h3 { margin: 28px 0 10px; color: var(--text); font-size: clamp(20px, 3cqi, 28px); line-height: 1.25; font-weight: 600; letter-spacing: -.035em; }
.empty-description { max-width: 380px; margin: 0; font-size: 14px; line-height: 1.6; }
.empty-paper { width: 132px; height: 168px; padding: 24px 19px; background: white; border: 1px solid #dce1dc; border-radius: 5px; transform: rotate(-5deg); box-shadow: 7px 8px 0 #e9ede8, 0 8px 20px rgb(25 39 30 / .05); }
.paper-heading { height: 5px; width: 70%; border-radius: 2px; background: #97a39a; }
.paper-subheading { margin-top: 8px; height: 3px; width: 45%; background: #dfe4df; }
.paper-question { position: relative; margin-top: 18px; padding-left: 14px; }
.paper-question i { position: absolute; top: -1px; left: 0; width: 6px; height: 6px; border: 1px solid #bbc5bd; border-radius: 50%; }
.paper-question span { display: block; height: 3px; margin-top: 5px; background: #e1e6e1; border-radius: 2px; }
.paper-question span + span { width: 65%; }
.empty-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 510px); margin-top: 28px; }
.empty-paths button { position: relative; height: auto; min-height: 94px; padding: 16px 28px 16px 16px; background: #fff; border-color: #dce1de; border-radius: 10px; text-align: left; white-space: normal; }
.empty-paths button:hover { box-shadow: 0 3px 10px rgb(25 39 30 / .06); }
.start-path-title { display: block; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.start-path-description { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.start-arrow { position: absolute; right: 12px; top: 15px; color: var(--text-muted); font-size: 17px; }
.empty-footnote { margin: 22px 0 0; color: var(--text-muted); font-size: 12px; }
@container (max-width: 520px) {
  .worksheet-heading { padding: 12px; }
  .worksheet-heading .worksheet-actions { border-left: 0; padding-left: 0; padding-top: 8px; }
  .worksheet-heading .worksheet-actions button { flex: 1 1 0; height: 38px; font-size: 13px; }
  .worksheet-heading .worksheet-actions #save-worksheet { margin-left: 4px; }
  .preview-controls { row-gap: 12px; }
  .stats-stack { flex-basis: 100%; }
  .empty-paths { grid-template-columns: 1fr; max-width: 330px; margin-top: 22px; }
  .empty-paths button { min-height: 76px; }
  #preview-empty { padding: 28px 20px; }
  #preview-empty h3 { font-size: 23px; }
  .empty-paper { width: 105px; height: 130px; padding: 18px 16px; }
  .paper-question { margin-top: 13px; }
  .paper-question:last-child { display: none; }
}
@container (max-width: 420px) {
  .panel-heading, .search-panel .list-heading { padding-inline: 16px; }
  .panel-heading h2 { gap: 7px; font-size: 15px; }
  .section-number { width: 22px; height: 22px; }
  .filters { padding-inline: 16px; }
  .filters.card-filters { padding-inline: 16px; }
  .candidate-cards { margin-inline: 16px; }
  .candidate-heading-actions { gap: 6px; }
  .candidate-view-toggle button { padding-inline: 8px; }
  .candidate-card { grid-template-areas: "thumb thumb" "details actions"; }
  .candidate-card > .candidate-actions { grid-template-columns: 1fr; }
}
@container (max-width: 360px) {
  .assemble-controls { grid-template-columns: 1fr; grid-template-areas: "count" "difficulty" "total"; }
  .assemble-count .stepper button { width: 36px; }
  .candidate-heading-actions .result-count { display: none; }
}
@media (max-width: 959px) {
  .app-bar { padding-inline: 16px; }
  .mobile-tabs { padding: 8px 16px; }
  .mobile-tabs button { height: 40px; border-color: transparent; }
  .mobile-tabs button[aria-pressed="true"] { color: var(--text); background: var(--surface-sunken); border-color: var(--border); }
  .workspace, .workspace.panes-stacked { min-height: 0; height: auto; padding: 12px; }
  .workspace .search-panel, .workspace .worksheet-panel,
  .workspace.panes-stacked .search-panel, .workspace.panes-stacked .worksheet-panel { height: max(580px, calc(100dvh - 60px - 57px - 24px)); }
}
@media (max-height: 760px) and (min-width: 960px) {
  .empty-paper { width: 90px; height: 114px; padding: 16px; }
  .paper-question { margin-top: 12px; }
  .paper-question:last-child { display: none; }
  #preview-empty { padding-block: 24px; }
  #preview-empty h3 { margin-top: 22px; }
  .empty-paths { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { button:not(:disabled) { transition: none; } }

.setup-toggle { flex: none; padding-inline: 8px; color: var(--text-muted); background: transparent; border-color: transparent; font-size: 12px; }
.setup-toggle::after { display: inline-block; content: "⌃"; margin-left: 6px; }
.setup-toggle[aria-expanded="false"]::after { transform: rotate(180deg); }
.worksheet-status-line .worksheet-status { font-size: 12px; }
/* Keep desktop browsing dense while narrow cards use their full width for the question. */
@container (min-width: 481px) {
  .candidate-card { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "thumb details" "thumb actions"; }
  .candidate-card > .candidate-thumbnail { border-bottom: 0; border-right: 1px solid var(--border-subtle); }
  .candidate-card > .candidate-actions { padding: 8px 12px 12px; align-content: end; }
  .candidate-card > .candidate-details { align-self: start; padding: 12px; }
}
/* Give page setup enough room before shrinking its words on small desktops. */
@container (min-width: 521px) and (max-width: 680px) {
  .worksheet-heading-lead { gap: 6px; }
  .worksheet-heading-lead h2 { flex-basis: 100px; }
  .worksheet-heading .worksheet-actions { padding-left: 4px; }
  .worksheet-heading .worksheet-actions button { width: 48px; flex-basis: 48px; }
  .worksheet-heading .export-actions .layout-menu-button { flex-shrink: 0; }
}