/* 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: 3px 0;       /* as short as possible — the app owns the viewport */
  gap: 10px;
}
.site:has(.office-frame) .site-header .brand { font-size: 0.95rem; }
.site:has(.office-frame) .site-header .brand-mark { font-size: 0.95rem; }
.site:has(.office-frame) .site-nav { gap: 10px; }
.site:has(.office-frame) .site-nav a { font-size: 0.8rem; }

.site:has(.office-frame) .site-main {
  padding: 4px 0 8px;   /* 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 the compact header + breadcrumbs
     (~80px total now). */
  height: calc(100vh - 90px);
  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 - 120px); min-height: 440px; }
}