/* Presentation-only shell for the tools other than the three document editors. */
.tool-utility-page .chatbot-window:not(.open) { visibility: hidden; }
.tool-utility-page .site-main {
  max-width: 1440px;
  padding-top: 18px;
}
.tool-utility-page[data-utility-slug="image-editor"] .site-main,
.tool-utility-page[data-utility-slug="short-video-editor"] .site-main {
  max-width: 1920px;
}
.tool-utility-page .site-main > :is(.hero, .hero-panel) {
  margin-bottom: 14px;
}
.tool-utility-page :is(.hero .hero-title, .hero-panel h1) {
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  line-height: 1.4;
  margin: 0;
}
.tool-utility-page :is(.hero .hero-description, .hero-panel .hero-copy > p) {
  font-size: .875rem;
  line-height: 1.65;
  margin-top: 8px;
}
.tool-utility-nav { display: none; }
html:not([data-workspace-ready="true"]) .tool-utility-page .hero-card { display: block; }
html:not([data-workspace-ready="true"]) .tool-utility-page .site-main > .breadcrumbs { display: flex; }
html:not([data-workspace-ready="true"]) .tool-utility-page #tool-guide-toggle { display: none; }
html[data-workspace-ready="true"] .tool-utility-nav {
  display: flex;
  gap: 4px;
  position: sticky;
  top: var(--utility-header-height, 56px);
  z-index: 80;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: 2px solid var(--line);
  border-radius: 12px 12px 0 0;
  padding: 4px 8px 0;
  margin-bottom: 16px;
}
.tool-utility-nav .tool-header-button {
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 5px 5px 0 0;
  font-size: .875rem;
  font-weight: 600;
  white-space: normal;
}
.tool-utility-nav .tool-header-button[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-bottom-color: var(--accent);
}
html[data-workspace-ready="true"] .tool-utility-page:not(.tool-guide-visible)
  :is(.hero .hero-description, .hero-panel .hero-copy > p) {
  display: none;
}
.tool-utility-page .tool-active-section {
  margin-top: 0;
  scroll-margin-top: calc(var(--utility-header-height, 56px) + 64px);
}
.tool-utility-page .tool-secondary-content {
  scroll-margin-top: calc(var(--utility-header-height, 56px) + 72px);
}
.tool-utility-page .tool-active-section > .container > .card {
  margin-inline: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.tool-utility-page .tool-active-section :is(.surface-card, .card) {
  box-shadow: none;
  border-color: var(--line);
}
.tool-utility-page .pw-gen-output { min-width: 0; }
.tool-utility-page .pw-gen-display > button { flex-shrink: 0; }
.tool-utility-page .tool-active-section :is(.btn-outline, .btn-secondary, .btn-ghost) {
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
}
.tool-utility-page .tool-active-section .btn {
  gap: 6px;
}
@media (max-width: 800px) {
  .tool-utility-page .site-main {
    width: calc(100% - 20px);
    padding-top: 12px;
  }
  .tool-utility-page .tool-header { gap: 8px; }
  .tool-utility-page .tool-header-title {
    font-size: .8125rem;
    max-width: none;
  }
  .tool-utility-page .tool-header-actions > .tool-header-button,
  .tool-utility-page .tool-header-menu > summary {
    min-width: 40px;
    min-height: 40px;
  }
  .tool-utility-nav { margin-bottom: 12px; padding-inline: 3px; }
  .tool-utility-nav .tool-header-button { flex: 1; padding-inline: 8px; }
  .tool-utility-nav .tool-header-button span,
  .tool-utility-nav #tool-guide-toggle span { display: inline; }
  .tool-utility-page .tool-active-section :is(.surface-card, .card) {
    padding: 16px;
    border-radius: 12px;
  }
  /* Spacious desktop upload illustrations must not push the action off a phone. */
  .tool-utility-page .tool-active-section :is(
    .ic-dropzone, .b64-dropzone, .wc-dropzone, .cp-dropzone,
    .pdfc-dropzone, .pdfp-dropzone, .vm-dropzone, .sv-dropzone,
    .p2w-dropzone, .i2p-dropzone, .merge-pdf-dropzone
  ) { padding: 24px 14px; }
  .tool-utility-page .tool-active-section :is(.pdfc-drop-icon, .pdfp-drop-icon, .vm-drop-icon) {
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
  }
  .tool-utility-page .tool-active-section > .container { min-width: 0; }
  .tool-utility-page :is(.qr-tool-grid, .cpk-tool, .mtg-tool) {
    grid-template-columns: minmax(0, 1fr);
  }
  .tool-utility-page :is(.qr-tool-grid, .cpk-tool, .mtg-tool) > *,
  .tool-utility-page :is(.mtg-half, .cpk-format-input, .ip-card-body) { min-width: 0; }
  .tool-utility-page :is(.qr-form-card, .qr-preview-card) { padding: 16px !important; }
  .tool-utility-page .qr-preview-card canvas {
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .tool-utility-page .qr-color-row { flex-wrap: wrap; }
  .tool-utility-page .qr-color-label { min-width: 110px; }
  .tool-utility-page .qr-color-label input { flex-shrink: 0; }
  .tool-utility-page .j2c-tabs { flex-wrap: wrap; }
  .tool-utility-page .ip-card-label { overflow-wrap: anywhere; }
  .tool-utility-page .tool-active-section :is(input, select, textarea) {
    max-width: 100%;
  }
  .tool-utility-page .tool-active-section :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .tool-utility-page .mtg-row { flex-direction: column; }
  .tool-utility-page .qr-download-group { flex-direction: column; }
  .tool-utility-page .pw-gen-checks { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tool-utility-page { scroll-behavior: auto; }
}
@media print {
  html[data-workspace-ready="true"] .tool-utility-nav { display: none; }
}