/* Screen layout only. PDF page sizes, font presets and export stay at 0.4.1. */
body { font-size: 14px; }
.app-shell {
  grid-template-columns: clamp(280px, 24%, 360px) minmax(0, 1fr);
  height: 100dvh;
}
.sidebar { min-width: 0; padding: 14px; gap: 12px; }
.sidebar > * { flex-shrink: 0; }
.brand > div:last-child { min-width: 0; }
.brand-mark { flex-shrink: 0; }
.brand p { font-size: 12px; line-height: 1.5; }
.library-search-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
.library-search-row button { padding: 0 9px; }
.control-grid, .quick-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.note { overflow-wrap: anywhere; }
.workspace { grid-template-rows: auto minmax(0, 1fr); }
.workspace.has-page-rail { grid-template-columns: minmax(0, 1fr) 132px; }
.toolbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(320px, 520px) auto auto;
  grid-template-areas: "pages status support exports zoom";
  gap: 8px 12px;
  padding: 10px 14px;
}
.page-tools { grid-area: pages; }
.toolbar-status { grid-area: status; font-size: 12px; }
.support-widget { grid-area: support; min-width: 0; max-width: none; }
.export-tools { grid-area: exports; }
.zoom-tools { grid-area: zoom; justify-content: flex-end; }
.page-tools, .zoom-tools, .export-tools { gap: 6px; flex-direction: row; }
.page-tools button, .zoom-tools button { width: 34px; min-height: 34px; flex-shrink: 0; }
#pageIndicator { min-width: 72px; white-space: nowrap; font-size: 12px; }
#zoomIndicator { min-width: 48px; font-size: 12px; }
.export-tools button { min-height: 36px; padding: 0 10px; font-size: 13px; }
#supportButton { min-width: 0; min-height: 56px; padding: 7px 12px; }
.support-button-main { font-size: 14px; }
.support-button-sub { font-size: 12px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.support-popover {
  left: 0;
  right: auto;
  width: min(500px, calc(100vw - 28px));
  min-width: 0;
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
  transform: translateY(-4px);
}
.support-widget:hover .support-popover,
.support-widget:focus-within .support-popover,
.support-widget.pinned .support-popover { transform: translateY(0); }
.support-popover::before { left: 28px; right: auto; }
.support-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.support-codes figure { min-width: 0; }
.support-codes img { height: auto; }
.preview-wrap, .workspace.has-page-rail .preview-wrap {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: safe center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
  padding: 16px;
  overflow: auto;
}
.page-stage, .empty-state { flex-shrink: 0; }
.empty-state { max-width: 100%; }
.page-rail {
  position: static;
  grid-row: 2;
  grid-column: 2;
  width: auto;
  min-width: 0;
  margin: 10px 10px 10px 0;
}
.page-thumb-list { padding: 7px; }
.browser-preview { inset: 12px; min-height: 0; }
.browser-preview-bar { flex-wrap: wrap; gap: 6px; }
.browser-preview-bar span { flex-basis: 120px; }

@media (min-width: 761px) and (max-width: 1679px) {
  body { height: 100dvh; overflow: hidden; }
  .app-shell { height: 100dvh; min-height: 0; }
  .sidebar { min-height: 0; border-right: 1px solid var(--line); border-bottom: 0; }
  .workspace { min-height: 0; overflow: hidden; }
  .toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "pages status zoom" "support support exports";
    align-items: center;
  }
  .toolbar-status { order: 0; }
  .export-tools { justify-content: flex-end; }
  .export-tools button { flex: 0 0 auto; }
  .page-rail { display: grid; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .app-shell { grid-template-columns: 268px minmax(0, 1fr); }
  .sidebar { padding: 10px; }
  .panel { padding: 10px; }
  .workspace.has-page-rail { grid-template-columns: minmax(0, 1fr) 104px; }
  .toolbar { grid-template-areas: "pages status zoom" "support support support" "exports exports exports"; }
  .export-tools { justify-content: stretch; }
  .export-tools button { flex: 1 1 0; }
}

@media (max-height: 800px) and (min-width: 761px) {
  .drop-zone { min-height: 70px; }
  .library-list { max-height: 180px; }
  .sidebar { gap: 10px; }
}

@media (max-width: 760px) {
  body { height: auto; overflow: auto; }
  .app-shell { display: flex; flex-direction: column; height: auto; min-height: 100dvh; }
  .workspace { order: -1; height: 78dvh; min-height: 460px; overflow: hidden; }
  .sidebar { border-right: 0; border-bottom: 0; min-height: auto; }
  .toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "pages zoom" "status status" "support support" "exports exports";
    gap: 7px;
    padding: 10px;
  }
  .toolbar-status { order: 0; }
  .page-tools, .zoom-tools { display: flex; align-items: center; }
  .zoom-tools { justify-content: flex-end; }
  .export-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .export-tools button { padding: 0 3px; font-size: 12px; }
  #supportButton { text-align: left; min-height: 54px; }
  .workspace.has-page-rail { grid-template-columns: minmax(0, 1fr); }
  .page-rail { display: none; }
  .control-grid, .button-row, .layout-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-popover { width: min(500px, calc(100vw - 20px)); max-height: calc(100dvh - 200px); }
}