/* Office Editor page — special full-screen layout.
   This stylesheet is only linked on the office-editor tool page, so these
   overrides never leak to any other page. The goal: a compact header and an
   editor that fills the whole viewport (full width, full height), with the
   SEO content pushed below the fold. */

/* --- Compact the site chrome (this page only) ------------------------------ */
html:has(.office-frame) body { overflow-x: hidden; }

.site:has(.office-frame) {
  max-width: none;      /* full width instead of the usual 1080px column */
  padding: 0 10px;
}

.site:has(.office-frame) .site-header {
  padding: 6px 0;       /* shorter header — less vertical space above the app */
  gap: 10px;
}
.site:has(.office-frame) .site-header .brand { font-size: 1rem; }
.site:has(.office-frame) .site-nav { gap: 10px; }
.site:has(.office-frame) .site-nav a { font-size: 0.85rem; }

.site:has(.office-frame) .site-main {
  padding: 8px 0 12px;  /* tighter margins so the editor dominates the fold */
}

/* --- Make the tool area edge-to-edge and viewport-tall --------------------- */
.tool-page:has(.office-frame) { max-width: none; }

/* Hide the text-only chrome above/below the editor on first view; the SEO
   sections stay in the DOM (for crawlers) but are pushed below the fold. */
.tool-page:has(.office-frame) .breadcrumbs { margin-bottom: 4px; }
.tool-page:has(.office-frame) .tool-head { display: none; }
.tool-page:has(.office-frame) .privacy-note { display: none; }

.tool-body:has(.office-frame) {
  padding: 6px;
  border-radius: 10px;
}

.office-loading {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 8px 4px;
}

.office-frame {
  display: block;
  width: 100%;
  /* Fill the viewport: everything above is header + breadcrumbs (~110px). */
  height: calc(100vh - 118px);
  min-height: 520px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
}

@media (max-width: 640px) {
  .site:has(.office-frame) { padding: 0 6px; }
  .office-frame { height: calc(100vh - 140px); min-height: 440px; }
}