/* Shared website chrome. Screen-only rules never restyle printed artwork. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap');

@media screen {
  :root {
    --site-heading-size: 28px;
    --site-section-size: 20px;
    --site-body-size: 15px;
    --site-control-size: 14px;
    --site-font: 'Inter', 'Nirmala UI', system-ui, sans-serif;
    --site-heading-font: 'Outfit', 'Nirmala UI', system-ui, sans-serif;
    --font-main: var(--site-font);
    --font-sans: var(--site-font);
    --font-heading: var(--site-heading-font);
    --font: var(--site-font);
    --site-workspace-bg: #eef1f4;
    --site-panel-bg: #ffffff;
    --site-line: #fed7aa;
  }
  [data-theme="dark"] {
    --site-workspace-bg: #111827;
    --site-panel-bg: #1e293b;
    --site-line: #334155;
  }
  body { font-family: var(--site-font); font-size: var(--site-body-size); }

  /* Documents, template thumbnails and editable content keep their own type. */
  :is(h1, h2, h3, h4):not(:where(.cv-paper, .cv-paper *, .cv-sheet, .cv-sheet *, .standee-acrylic-mockup *, .rich-content, .rich-content *, [contenteditable="true"] *, .editor-preview *, .job-preview-source *)) {
    font-family: var(--site-heading-font) !important;
    line-height: 1.3;
  }
  h1:not(:where(.cv-paper *, .cv-sheet *, .standee-acrylic-mockup *, .rich-content *, [contenteditable="true"] *, .editor-preview *, .job-preview-source *)) { font-size: var(--site-heading-size) !important; }
  :is(h2, h3, h4):not(:where(.cv-paper *, .cv-sheet *, .standee-acrylic-mockup *, .rich-content *, [contenteditable="true"] *, .editor-preview *, .job-preview-source *)) { font-size: var(--site-section-size) !important; }
  p:not(:where(.cv-paper *, .cv-sheet *, .standee-acrylic-mockup *, .rich-content *, [contenteditable="true"] *, .editor-preview *, .job-preview-source *)) {
    font-family: var(--site-font) !important;
    font-size: var(--site-body-size) !important;
    line-height: 1.65;
  }
  :is(button, input, select, textarea, label, .button, .btn):not(:where(.cv-paper *, .cv-sheet *, .standee-acrylic-mockup *, .rich-content *, [contenteditable="true"] *, .editor-preview *, .job-preview-source *, .rich-toolbar *, .rich-color)) {
    font-family: var(--site-font) !important;
    font-size: var(--site-control-size) !important;
  }
  :is(.site-header, .home-header, .gov-header, .studio-top-nav, .studio-header, .editor-toolbar) {
    border-bottom-color: var(--site-line);
  }
  :is(.gov-input, .gov-select, .form-input, .form-select, .form-control) {
    border-radius: 6px;
    border-color: var(--site-line);
  }
  :is(.gov-card, .sidebar-card, .sidebar-card-box, .studio-panel, .tool-card, .setting-group, .form-panel, .saved-row) {
    border-color: var(--site-line);
  }
  :is(.stage-top-bar, .stage-action-bar, .pdf-subtoolbar, .editor-toolbar, .preview-controls) { flex-wrap: wrap; gap: 8px; }

  /* Only the workspace surround is neutral; canvases and sheets keep colors. */
  :is(.studio-center-stage, .studio-sheet-stage, .stage-viewport-box, .stage-viewport, .stage-viewport-surface, .pl-stage, .br-preview-stage, .pn-stage-viewport, .sign-stage-scroll, .pdf-stage-canvas-wrap, .pdf-live-stage, .cv-stage, #previewPages) {
    background-color: var(--site-workspace-bg) !important;
    background-image: none !important;
    min-width: 0;
  }
  .studio-workspace-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  .studio-workspace-column > .studio-center-stage { flex: 1; min-height: 0; padding-top: 24px; }
  .workspace-control-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 8px;
    padding: 10px 12px;
    background: var(--site-panel-bg);
    border-bottom: 1px solid var(--site-line);
    min-width: 0;
    z-index: 2;
  }
  .workspace-control-bar > :is(.stage-toolbar, .floating-sheet-zoom-dock, .pl-stage-zoom-hud, .pl-stage-dimensions, .cv-toolbar) {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 100%;
    border-radius: 6px !important;
    box-shadow: none !important;
    flex-wrap: wrap;
    white-space: normal;
  }
  .workspace-control-bar .stage-toolbar { justify-content: center; background: transparent; border: 0; padding: 0; }
  .workspace-control-bar .floating-sheet-zoom-dock { background: var(--site-panel-bg); border-color: var(--site-line); }
  .workspace-control-bar :is(.zoom-dock-btn, .zoom-dock-pill-btn) { color: var(--text-main, #0f172a); background: transparent; border-color: var(--site-line); }
  #qrMainStage > .workspace-control-bar { display: none; } /* QR already has zoom controls in its top toolbar. */
  .workspace-help { width: 100%; font-size: 14px; text-align: left; }
  .workspace-help summary { cursor: pointer; color: var(--primary); padding: 4px; }
  .workspace-help p { margin: 8px 4px; max-width: none !important; }
  .workspace-control-bar button { min-height: 36px; }
  .floating-sheet-zoom-dock { display: flex; }
  .stage-step-pills { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .header-actions { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .site-table-scroll { max-width: 100%; overflow-x: auto; }
  :is(.stage-paper-size, .editor-toolbar label) { min-width: 0; max-width: 100%; }
  .upload-empty-card {
    background: var(--site-panel-bg) !important;
    border: 1px dashed var(--site-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 24px !important;
  }
  .upload-empty-card::before { display: none; }
  :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid #ea580c; outline-offset: 3px; }
}

@media screen and (max-width: 768px) {
  :root { --site-heading-size: 24px; --site-section-size: 18px; }
  .workspace-control-bar { padding: 8px; gap: 6px; }
  .workspace-control-bar button { min-height: 44px; }
  .studio-workspace-column > .studio-center-stage { min-height: 480px; }
  .editor-toolbar :is(input, select) { max-width: 100%; }
  .editor-toolbar label { flex: 1 1 140px; }
  .editor-toolbar label select { width: 100%; }
  .editor-nav-bar { width: 100%; max-width: 100%; min-width: 0; flex-wrap: wrap; }
  .editor-section-nav { width: 100%; max-width: 100%; min-width: 0; flex-wrap: wrap; }
  .editor-section-nav button { flex: 1 1 90px; min-width: 0; }
  .nav-template-select { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .stage-paper-size { flex-wrap: wrap; }
}
@media print { .workspace-control-bar { display: none !important; } }