.docx-editor {
  margin-top: 1.5em;
}

/* Pin the toolbars right below the theme's sticky header, with an opaque
   background so they sit cleanly on top of the document pane while it
   scrolls underneath — the same layering the theme's own header already
   uses for the rest of the page. */
.docx-editor__toolbars {
  position: sticky;
  top: 2.4rem;
  z-index: 3;
  background: var(--md-default-bg-color);
  padding-top: 0.5em;
  box-shadow: 0 0.35em 0.35em -0.35em rgba(0, 0, 0, 0.5);
}

/* Give this page's whole grid (header, content, footer) more room so the
   document itself can be as wide as possible without breaking the layout. */
:root:has(#docx-content) .md-grid {
  max-width: 90rem;
}

.docx-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.75em;
}

.docx-editor__toolbar input[type="file"] {
  color: var(--md-default-fg-color);
}

.docx-editor__toolbar button {
  font: inherit;
  font-weight: 600;
  padding: 0.5em 1.1em;
  border: none;
  border-radius: 0.25em;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  cursor: pointer;
}

.docx-editor__toolbar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.docx-editor__format-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
  margin-bottom: 0.75em;
}

.docx-fmt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  min-width: 2.2em;
  padding: 0.35em 0.6em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2em;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
  cursor: pointer;
}

.docx-fmt-btn svg {
  display: block;
}

.docx-fmt-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.docx-fmt-btn--active {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border-color: var(--md-primary-fg-color);
}

.docx-fmt-underline {
  text-decoration: underline;
}

.docx-editor__sep {
  width: 1px;
  height: 1.4em;
  background: var(--md-default-fg-color--lightest);
  margin: 0 0.35em;
}

#docx-font-name,
#docx-font-size {
  font: inherit;
  padding: 0.35em 0.5em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2em;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
}

#docx-font-size {
  width: 4em;
}

#docx-font-name:disabled,
#docx-font-size:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.docx-editor__status {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  margin-bottom: 1em;
}

.docx-editor__status--error {
  color: var(--md-typeset-mark-color, #e57373);
}

.docx-editor__content {
  /* Bound to what's left of the viewport below the sticky toolbars, so the
     document scrolls inside this box instead of growing the whole page. */
  height: calc(100vh - 13rem);
  min-height: 20rem;
  overflow-y: auto;
  padding: 2em 3em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.25em;
  background: #fff;
  color: #000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.docx-editor__content,
.docx-editor__content :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, td, th) {
  color: #000;
}

.docx-editor__content[contenteditable="true"] {
  cursor: text;
}

.docx-editor__content p {
  max-width: none;
}

.docx-editor__content img {
  max-width: 100%;
}

/* Footnotes — a short rule then a list of number + text + delete, matching
   how Word shows footnote text at the bottom of the page. */
.docx-footnote-ref {
  cursor: default;
}

.docx-footnotes {
  margin-top: 2em;
  padding-top: 0.75em;
}

.docx-footnotes__rule {
  width: 30%;
  margin: 0 0 0.75em;
  border: none;
  border-top: 1px solid #000;
}

.docx-footnotes__list {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.docx-footnote {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: 0.85em;
}

.docx-footnote__num {
  flex: none;
}

.docx-footnote__text {
  flex: 1 1 auto;
  cursor: text;
  outline: none;
  border-radius: 0.2em;
}

.docx-footnote__text:focus {
  background: rgba(0, 0, 0, 0.06);
}

.docx-footnote__delete {
  flex: none;
  border: none;
  background: transparent;
  color: #888;
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  padding: 0 0.3em;
  opacity: 0;
  transition: opacity 0.15s;
}

.docx-footnote:hover .docx-footnote__delete,
.docx-footnote__delete:focus {
  opacity: 1;
}

.docx-footnote__delete:hover {
  color: #c0392b;
}

.docx-editor__content .docx-footnote,
.docx-editor__content .docx-footnote-ref {
  color: #000;
}