/* The laptop reference is the existing desktop UI at 67% browser zoom.
 * These are real CSS measurements (2/3 of the desktop dimensions), not a
 * scaled surface. The root font, desktop, mobile, and shared Exam UI stay intact.
 * Fluid viewport terms retain their coefficient: (width / scale) * scale.
 */
@media (min-width: 1080px) and (max-width: 1599px) {
  #app[data-quiz-surface] {
    --spacing-xs: 2.667px;
    --spacing-sm: 5.333px;
    --spacing-md: clamp(8px, 6.4px + 0.35vw, 10.667px);
    --spacing-lg: clamp(10.667px, 8px + 0.75vw, 16px);
    --spacing-xl: clamp(13.333px, 10.667px + 1vw, 21.333px);
    --spacing-2xl: clamp(18.667px, 13.333px + 1.5vw, 32px);
    --radius-sm: 6.667px;
    --radius-md: 12px;
    --radius-lg: 18.667px;
    font-size: 10.667px;

    .container { max-width: min(96vw, 1130.667px); }
    .page-header { margin-bottom: calc(var(--spacing-xl) + 2.667px); }
    h1 { font-size: clamp(23.467px, 4vw, 41.6px); }
    h2 { font-size: clamp(16.533px, 2.4vw, 25.067px); }
    h3 { font-size: 12.48px; }
    h4 { font-size: 10.667px; }
    .text-sm { font-size: 9.067px; }
    .page-header-row { gap: 8px; }
    .btn { font-size: 9.813px; padding: 7.333px 10.667px; min-height: 28px; }
    .btn-sm { font-size: 9.067px; padding: var(--spacing-xs) var(--spacing-md); min-height: 24px; }
    .btn-lg { font-size: 11.2px; padding: var(--spacing-md) var(--spacing-xl); }
    input, textarea, select { font-size: 10.667px; min-height: 24px; }
    .filter-pills { gap: 5.333px; }
    .filter-pill { font-size: 9.067px; padding: 2.667px 10.667px; min-height: 24px; }
    .badge { font-size: 8px; padding: 2px 5.333px; }
    .chip-yield { font-size: 7.467px; padding: 1.333px 4px; white-space: nowrap; }

    /* Chooser: narrow mode list and the original four-up detail summary. */
    .qc-layout { grid-template-columns: 213.333px minmax(0, 1fr); gap: 16px; }
    .qc-rail { padding: 8px; gap: 4px; border-radius: 9.333px; top: 13.333px; }
    .qc-rail-group { gap: 4px; }
    .qc-rail-group + .qc-rail-group { margin-top: 4px; padding-top: 6.667px; }
    .qc-rail-label { font-size: 6.827px; padding: 5.333px 8px 2.667px; }
    .qc-rail-item { gap: 8px; padding: 8px 9.333px; border-radius: 6.667px; min-height: 40px; }
    .qc-rail-item__icon { width: 24px; height: 24px; font-size: 11.2px; border-radius: 6px; }
    .qc-rail-item__title { font-size: 8.96px; gap: 4px; }
    .qc-rail-item__sub { font-size: 7.253px; margin-top: 2px; }
    .qc-rail-item__dot { width: 4px; height: 4px; }
    .qc-detail { padding: 18.667px 21.333px; border-radius: 9.333px; min-width: 0; }
    .qc-detail-header { gap: 13.333px; margin-bottom: 5.333px; }
    .qc-detail-icon { width: 48px; height: 48px; border-radius: 10.667px; }
    .qc-detail-icon svg { width: 25.333px; height: 25.333px; }
    .qc-detail-tags { gap: 4px; margin-bottom: 4px; }
    .qc-tag { font-size: 6.827px; padding: 2px 6px; }
    .qc-detail-title { font-size: 15.467px; }
    .qc-detail-desc { font-size: 9.813px; margin-top: 4px; }
    .qc-stats-grid { gap: 8px; margin: 16px 0; padding: 13.333px; border-radius: 8px; }
    .qc-stat-block { gap: 2.667px; min-width: 0; }
    .qc-stat-block__value { font-size: 14.933px; }
    .qc-stat-block__value .qc-unit { font-size: 8.32px; margin-left: 1.333px; }
    .qc-stat-block__label { font-size: 7.68px; }
    .qc-progress-wrap, .qc-sessions-section { margin-bottom: 16px; }
    .qc-progress-wrap-label { font-size: 8px; margin-bottom: 4px; }
    .qc-progress-bar-big { height: 5.333px; }
    .qc-section-header { margin-bottom: 6.667px; }
    .qc-section-title { font-size: 8.32px; }
    .qc-section-count { font-size: 7.253px; padding: 1.333px 5.333px; }
    .qc-session-list { gap: 5.333px; }
    .qc-session-item { gap: 9.333px; padding: 9.333px 10.667px; border-radius: 6.667px; }
    .qc-session-item__topic { font-size: 9.173px; margin-bottom: 2px; }
    .qc-session-item__meta { font-size: 7.467px; }
    .qc-session-item__progress { min-width: 60px; gap: 2.667px; }
    .qc-session-item__percent { font-size: 8.32px; }
    .qc-session-item__bar { width: 53.333px; height: 2.667px; }
    .qc-session-item__delete, .qc-session-item__resume-btn { width: 24px; height: 24px; border-radius: 4px; }
    .qc-session-item__delete:focus-visible { opacity: 1; }
    .qc-session-item__delete svg { width: 10px; height: 10px; }
    .qc-session-item__resume-btn { font-size: 11.733px; }
    .qc-btn { font-size: 9.387px; padding: 8px 14.667px; gap: 5.333px; border-radius: 6.667px; min-height: 28px; }
    .qc-btn svg { width: 12px; height: 12px; }
    .qc-empty-state { padding: 16px 13.333px; font-size: 9.067px; }
    .qc-sessions-show-all { padding: 6.667px; margin-top: 4px; font-size: 8.32px; min-height: 24px; }

    /* Setup: all categories remain present; compact typography removes the
     * broken category names and restores three columns beside the config. */
    .quiz-setup-header { margin-bottom: 0; }
    .quiz-setup-actions { margin-top: 0; }
    .page:has(.setup-grid) { padding-top: 8px; }
    #qs-summary, #domain-toggle { margin-bottom: 2px !important; }
    #cat-pills { gap: 2.667px; margin-bottom: 2px; }
    #quiz-back-btn { padding: 2.667px 5.333px !important; }
    #qs-summary { font-size: 8.533px !important; }
    .setup-grid { grid-template-columns: minmax(0, 1fr) 181.333px; gap: 16px; }
    .category-cards-grid { columns: 3; column-gap: 10.667px; }
    .category-card-header { padding: 10px 16px; gap: 10.667px; min-height: 48px; }
    .category-card-title { font-size: 10.667px; }
    .category-card-count { font-size: 8.533px; margin-top: 1.333px; }
    .category-card-icon svg { width: 21.333px; height: 21.333px; }
    .category-chevron { width: 13.333px; height: 13.333px; }
    .topic-row:not(tr) { padding: 5px 16px; gap: 5.333px; min-height: 26px; }
    .topic-row-name { font-size: 9.387px; }
    .topic-row-count { font-size: 8.32px; min-width: 18.667px; }
    .setup-config-panel { padding: 10.667px; gap: 10.667px; border-radius: 12px; max-height: calc(100dvh - 21.333px); }
    .setup-config-panel h3 { font-size: 10.453px; }
    .setup-config-panel .config-label { font-size: 8.107px; }
    .setup-config-panel .filter-pills { gap: 2.667px; }
    .question-limit input[type="number"] { width: 42.667px; font-size: 9.6px; }
    .question-limit input[type="range"] { min-height: 24px; min-width: 0; width: 0; flex: 1; margin: 0; }
    .selected-count-title { font-size: 7.253px; }
    .selected-count-number { font-size: 13.867px; }
    .selected-count-label { font-size: 7.467px; }
    .quiz-setup-focus-summary { font-size: 10.667px; }

    /* Active questions, feedback, cases, summary, and summary question review. */
    .quiz-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
    .quiz-layout .quiz-wide { min-width: 0; }
    .quiz-layout .aura-sidebar { display: block; min-width: 0; max-height: min(466.667px, calc(100dvh - 24px)); }
    .quiz-layout--collapsed { grid-template-columns: 1fr; max-width: 986.667px; }
    .quiz-layout--collapsed .quiz-wide { max-width: 826.667px; }
    .quiz-layout--collapsed .aura-sidebar { display: none; }
    .question-stem { font-size: 10.667px; }
    .option-btn { font-size: 10.133px; border-width: 1.333px; min-height: 32px; }
    .option-btn .option-letter { font-size: 9.067px; min-width: 18.667px; height: 18.667px; }
    .case-vignette { font-size: 10.133px; }
    .case-indicator { font-size: 8.533px; }
    .lab-table { font-size: 9.387px; }
    .lab-table-title { font-size: 9.6px; }
    .lab-table th { font-size: 8.747px; }
    .lab-table td, .lab-table th { padding: 4px 8px; }
    .score-display .score-current { font-size: 16px; }
    .score-display .score-total { font-size: 10.667px; }
    .flag-btn { font-size: 9.067px; min-height: 24px; padding: 3px 6px; }
    .flag-btn svg { width: 12px; height: 12px; }
    #restart-toolbar-btn, #thumbs-up-btn, #thumbs-down-btn { min-width: 24px; min-height: 24px; }
    .peer-badge__avg { font-size: 10.133px; }
    .peer-badge__you { font-size: 9.067px; }
    .feedback-body, .feedback-header, .feedback-explanation { font-size: 10.667px; }
    .score-summary { padding: 21.333px; }
    .big-score { font-size: 37.333px; }
    .score-label { font-size: 11.733px; }
    .score-message { font-size: 10.667px; }
    .analytics-table { font-size: 9.067px; }
    .analytics-table th, .analytics-table td { padding: 6px 8px; }
    .quiz-summary-row { height: 26px; }
    .retry-banner, .quota-banner { font-size: 9.6px; }

    /* Existing markup uses a few inline rem sizes in helper copy. Only the
     * Quiz subtree overrides them, so shared components keep their defaults. */
    [style*="font-size:0.75rem"], [style*="font-size: 0.75rem"] { font-size: 8px !important; }
    [style*="font-size:0.8rem"], [style*="font-size: 0.8rem"] { font-size: 8.533px !important; }
    [style*="font-size:0.85rem"], [style*="font-size: 0.85rem"] { font-size: 9.067px !important; }
    [style*="font-size:0.9rem"], [style*="font-size: 0.9rem"] { font-size: 9.6px !important; }
    [style*="font-size:0.95rem"], [style*="font-size: 0.95rem"] { font-size: 10.133px !important; }
    [style*="font-size:1.1rem"], [style*="font-size: 1.1rem"] { font-size: 11.733px !important; }
    [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  }
}

/* Aura can be docked inside Quiz or floated outside the app subtree. */
@media (min-width: 1080px) and (max-width: 1599px) {
  #app[data-quiz-surface], body:has(#app[data-quiz-surface]) .aura-chat-root {
    .aura-chat-header { padding: 9.333px 10.667px; }
    .aura-chat-header-title { font-size: 9.333px; gap: 5.333px; }
    .aura-chat-header-title svg { width: 14px; height: 14px; }
    .aura-chat-header-actions button { min-width: 24px; min-height: 24px; padding: 3px; }
    .aura-chat-header-actions button svg { width: 12px; height: 12px; }
    .aura-chat-messages { padding: 10.667px; gap: 8px; }
    .aura-chat-msg { font-size: 8.667px; padding: 6.667px 9.333px; }
    .aura-chat-answer p { margin: 4px 0; }
    .aura-chat-answer ul { padding-left: 12px; margin: 2.667px 0 6.667px; }
    .aura-chat-table { font-size: 8px; }
    .aura-chat-section summary { font-size: 8.667px; min-height: 24px; }
    .aura-chat-footer { padding: 8px 10.667px; }
    .aura-chat-input { padding: 5.333px 8px; font-size: 8.667px; }
    .aura-chat-send { width: 24px; height: 24px; }
    .aura-chat-tabs { padding: 2.667px; }
    .aura-chat-tab-btn { font-size: 8.667px; min-height: 24px; }
    .aura-notepad-wrap { padding: 8px; }
    .aura-notepad { font-size: 8.667px; padding: 8px; }
    .aura-pebc-calc-host { padding: 6.667px; }
    .pebc-calc-window--compact { width: 302px; }
    .pebc-calc-window--compact .pebc-calc-titlebar { height: 24px; }
    .pebc-calc-window--compact .pebc-calc-titlebar h1 { font-size: 9.333px; }
    .pebc-calc-window--compact .pebc-calc-body { padding: 5.333px; }
    .pebc-calc-window--compact .pebc-calc-tabs { min-height: 24px; }
    .pebc-calc-window--compact .pebc-calc-tab { height: 24px; padding: 0 6.667px; font-size: 9.333px; }
    .pebc-calc-window--compact .pebc-calc-digit-grouping { height: 24px; min-width: 69.333px; font-size: 8px; }
    .pebc-calc-window--compact .pebc-calc-panel { padding: 6.667px; }
    .pebc-calc-window--compact .pebc-calc-screen { height: 28px; margin-bottom: 5.333px; font-size: 13.333px; }
    .pebc-calc-window--compact .pebc-calc-keyboard { gap: 4px; }
    .pebc-calc-window--compact .pebc-calc-row { grid-template-columns: repeat(10, minmax(24px, 1fr)); gap: 4px; }
    .pebc-calc-window--compact .pebc-calc-key { height: 24px; font-size: 8px; padding: 0 2px; }
    .pebc-calc-window--compact .pebc-calc-key--red { font-size: 7.333px; }
    .pebc-calc-window--compact .pebc-calc-key--green, .pebc-calc-window--compact .pebc-calc-key--blue { font-size: 12px; }
    .pebc-calc-window--compact .pebc-calc-key--copy { height: 24px; }
  }
  body:has(#app[data-quiz-surface]) .aura-chat-root {
    .aura-chat-fab { width: 37.333px; height: 37.333px; right: 16px; bottom: 16px; }
    .aura-chat-fab svg { width: 18.667px; height: 18.667px; }
    .aura-chat-panel { width: 253.333px; height: 346.667px; right: 16px; bottom: 16px; max-height: calc(100dvh - 32px); border-radius: 12px; }
    .aura-chat-panel--maximized { width: 506.667px; height: min(546.667px, calc(100dvh - 32px)); }
  }
}
/* Keep every entitled mode visible in the short laptop window. */
@media (min-width: 1080px) and (max-width: 1599px) and (max-height: 650px) and (pointer: fine) {
  #app[data-quiz-surface] {
    .qc-rail-group { gap: 3px; }
    .qc-rail-label { padding-top: 3px; padding-bottom: 1px; }
    .qc-rail-item { padding-block: 6px; min-height: 38px; }
  }
}

@media (min-width: 1080px) and (max-width: 1599px) and (pointer: coarse) {
  #app[data-quiz-surface] {
    .btn, .qc-btn, .filter-pill, .topic-row:not(tr), .option-btn,
    input:not([type="checkbox"]), .qc-rail-item { min-height: 44px; }
    .qc-session-item__delete, .qc-session-item__resume-btn { width: 44px; height: 44px; }
    .aura-chat-header-actions button, .aura-chat-tab-btn, .pebc-calc-window--compact .pebc-calc-key { min-height: 44px; }
  }
}

@media (min-width: 1080px) and (max-width: 1599px) and (pointer: coarse) {
  body:has(#app[data-quiz-surface]) .aura-chat-root {
    .aura-chat-fab, .aura-chat-send { width: 44px; height: 44px; }
    .aura-chat-header-actions button, .aura-chat-tab-btn, .pebc-calc-key { min-height: 44px; }
  }
}