/* Small-screen layout only. Keep the existing themes and export/print sizes. */
@media screen and (max-width: 768px) {
  .gov-header, .site-header { position: relative; height: auto; }
  .gov-header-inner, .header-inner { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .gov-header-inner { height: auto; }
  .gov-brand, .brand-logo { min-width: 0; }
  .gov-emblem, .brand-badge { flex-shrink: 0; }
  .gov-brand-title { flex-wrap: wrap; gap: 6px; }
  .gov-brand-subtitle { font-size: 11px; }
  .gov-header-nav {
    width: 100%; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto; padding-bottom: 4px;
  }
  .gov-header-nav > * { flex-shrink: 0; }
  .gov-header-link { min-height: 44px; white-space: nowrap; }
  .gov-header .header-search {
    display: block; order: 2; flex: 1 0 100% !important;
    max-width: none !important; margin: 0 !important;
  }
  .header-search-kbd { display: none; }
  .header-actions { flex-wrap: wrap; gap: 8px; min-width: 0; }
  .gov-header-actions { flex-wrap: wrap; min-width: 0; gap: 8px; }
  .work-grid, .scanner-layout { grid-template-columns: minmax(0, 1fr); }
  .work-grid > *, .scanner-layout > *, .studio-workspace-grid > * { min-width: 0; }
  .work-hero, .work-card-head, .asset-title { flex-wrap: wrap; }
  .work-card { min-width: 0; padding: 14px; }
  .work-card canvas { max-width: 100%; height: auto; }
  .work-card input, .work-card select { width: 100%; }
  .gov-seo-article-section { width: 100%; min-width: 0; padding: 0 12px; }
  .gov-seo-card { min-width: 0; padding: 16px; }
  .gov-table-wrap { max-width: 100%; overflow-x: auto; }
  .gov-footer-inner, .gov-footer-links { flex-wrap: wrap; min-width: 0; }
  .gov-toast { min-width: 0; max-width: calc(100vw - 24px); white-space: normal; }
  .stage-zoom-dock { flex-wrap: wrap; max-width: 100%; border-radius: 12px; }
  .calc-grid, .gov-app-layout { grid-template-columns: minmax(0, 1fr); }
  .calc-card, .calc-card .form-group, .gov-app-layout > * { min-width: 0; }
  .calc-fields-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash-cell { min-width: 0; }
  .calc-filter-pill { max-width: 100%; white-space: normal; text-align: left; }
  .gov-controls-sidebar { position: static; max-height: none; padding-right: 0; }
  .qr-stage-card { padding: 16px 12px; min-width: 0; }
  .qr-canvas-holder canvas { max-width: 100%; height: auto; }
  .qr-action-bar, .qr-mode-switcher-bar { flex-wrap: wrap; max-width: 100%; }
  .pl-checkerboard-wrap { flex-shrink: 0; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea {
    min-width: 0; max-width: 100%; font-size: 16px;
  }
  .btn, .gov-btn { min-height: 44px; }
  .hero-section { padding: 24px 0; }
  .flagship-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-badge { font-size: 12px; }
  .greeting-quote-card { padding: 16px; }
  .site-footer .container > * { min-width: 0; flex-wrap: wrap; }
  .studio-workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .floating-tools-sidebar { position: static; max-height: none; min-width: 0; padding-right: 0; }
  .stage-main-wrapper { padding: 12px; }
  .stage-step-pills { min-width: 0; max-width: 100%; flex-wrap: wrap; border-radius: 12px; }
  .stage-step-pill { min-height: 44px; white-space: normal; }
  .stage-top-bar, .pdf-subtoolbar { min-width: 0; }
  .std-studio-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .std-sidebar, .std-main-stage, .std-panel { min-width: 0; }
  .std-main-stage { position: static; }
  .std-panel { padding: 14px; }
  .std-panel-header { flex-wrap: wrap; gap: 8px; }
  .std-panel > [style*="display: flex"] { flex-wrap: wrap; }
  .std-panel :is(input, select), .std-panel [style*="grid"] > *,
  .std-main-stage [style*="grid"] > * { min-width: 0; }
  .std-panel [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .std-main-stage [style*="grid-template-columns: 1fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .stage-tabs { flex-wrap: wrap; }
  .stage-tab { white-space: normal; min-height: 44px; }
  .asset-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-pill { min-width: 0; white-space: normal; min-height: 44px; }
}

@media screen and (max-width: 1200px) {
  .studio-app .studio-layers-panel[style*="display: flex"] {
    display: flex !important; position: fixed; grid-area: auto;
    top: 70px; right: 8px; bottom: 84px; width: min(320px, calc(100vw - 16px));
    z-index: 120; border: 1px solid var(--border-color);
  }
}

@media screen and (max-width: 860px) {
  .studio-app .studio-layers-panel[style*="display: flex"] { top: 210px; }
  /* A bounded drawer below the canvas keeps both tools and artwork reachable. */
  .studio-app, .studio-app.drawer-closed {
    height: 100dvh; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(150px, 1fr) auto minmax(0, 32dvh);
    grid-template-areas: "header" "stage" "sidebar" "drawer";
  }
  .studio-app.drawer-closed { grid-template-rows: auto minmax(150px, 1fr) auto 0; }
  .studio-header {
    display: grid; grid-template-columns: minmax(0, 1fr);
    padding: 8px; gap: 6px; min-width: 0;
  }
  .studio-header-left { flex-wrap: wrap; gap: 6px; }
  .studio-header-center, .studio-header-right {
    min-width: 0; max-width: 100%; overflow-x: auto; padding-bottom: 3px;
  }
  .studio-header-center > *, .studio-header-right > * { flex-shrink: 0; }
  #plPageTransparencyPopup {
    position: fixed; top: 160px !important; left: 12px !important;
    right: 12px !important; min-width: 0 !important; max-width: calc(100vw - 24px);
  }
  .studio-header .btn { min-height: 40px; }
  .studio-sidebar {
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    justify-content: flex-start; padding: 4px; gap: 4px;
    min-width: 0; border-right: 0; border-top: 1px solid var(--border-color);
  }
  .studio-sidebar > * { flex-shrink: 0; }
  .studio-stage, .studio-drawer { min-width: 0; min-height: 0; }
  .studio-drawer { border-right: 0; border-top: 1px solid var(--border-color); }
  .drawer-content { min-height: 0; }
  .stage-viewport { min-width: 0; min-height: 0; padding: 12px 8px 50px; }
  .canva-bottom-bar { overflow-x: auto; gap: 12px; }
  .canva-bottom-bar > * { flex-shrink: 0; }
  #plDrawerCloseBtn { min-width: 44px; min-height: 44px; }
  .pl-dialog-overlay [style*="grid-template-columns: 1fr 360px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .pl-dialog-card {
    min-width: 0; max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px); overflow: auto !important;
  }
  .pl-dialog-card h2 { flex-wrap: wrap; }
  #plSaveDialog .pl-dialog-card > div:last-child,
  #plSaveDialog .pl-dialog-card > div:last-child > div { flex-wrap: wrap; gap: 10px; }
  .pl-dialog-card [style*="grid"] > * { min-width: 0; }
  .pl-resize-modal, .pl-modal-menu {
    position: fixed; left: 12px !important; right: 12px !important;
    top: 100px !important; width: auto; min-width: 0;
    max-width: calc(100vw - 24px); max-height: calc(100dvh - 124px); overflow-y: auto;
  }
  .pl-dl-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Allow vertical page scrolling when a phone is held in landscape. */
@media screen and (max-width: 860px) and (max-height: 600px) {
  html:has(.studio-app), body:has(.studio-app) { height: auto; overflow-y: auto; }
  .studio-app {
    height: auto; min-height: 100dvh;
    grid-template-rows: auto minmax(220px, 50dvh) auto minmax(0, 40dvh);
  }
  .studio-app.drawer-closed { height: auto; grid-template-rows: auto minmax(220px, 50dvh) auto 0; }
  .studio-app .studio-layers-panel[style*="display: flex"] { top: 12px; bottom: 12px; }
}