/* Document page styles - Basecamp paper effect */

.document__selection-toolbar {
  display: none;
  position: absolute;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--pre-bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 10;
}

.document__selection-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--pre-bg);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--full-contrast);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.document__selection-button:hover {
  background: rgba(25, 29, 38, 0.045);
  border-color: var(--border-light);
}

.document__selection-button svg {
  flex-shrink: 0;
}

.document__selection-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--pre-bg);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--fg);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.document__selection-copy-button:hover {
  color: var(--full-contrast);
  background: rgba(25, 29, 38, 0.045);
  border-color: var(--border-light);
}

.document__selection-copy-icon {
  flex-shrink: 0;
}

.document__selection-copy-icon--hidden {
  display: none;
}

.document__selection-highlight {
  background: var(--highlight-bg);
  border-radius: 2px;
  color: var(--highlight-fg);
  padding: 0;
}

.document__comment-highlight {
  background: var(--highlight-bg);
  border-bottom: 2px solid var(--highlight-border);
  border-radius: 2px;
  color: var(--highlight-fg);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.document__comment-highlight:hover {
  background: var(--highlight-hover);
}

/* The comment currently shown in the popover is identified by its heavier,
   blue accent underline */
.document__comment-highlight--active {
  border-bottom-width: 3px;
  border-bottom-color: var(--accent);
}

.document-node--code .document__selection-highlight,
.document-node--code-block code .document__selection-highlight,
.document-node--code .document__comment-highlight,
.document-node--code-block code .document__comment-highlight {
  color: var(--highlight-fg);
}

.document__comment-card {
  display: none;
  position: absolute;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
  background: var(--pre-bg);
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
  z-index: 10;
  min-width: 320px;
}

.document__comment-textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--full-contrast);
  background: var(--bg);
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.document__comment-textarea::placeholder {
  color: var(--muted);
}

.document__comment-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--pre-bg);
  box-shadow: 0 0 0 2px rgba(9, 78, 206, 0.2);
}

.document__comment-textarea:placeholder-shown {
  height: auto !important;
}

.document__comment-create-error {
  margin: 0;
  font-size: 0.75rem;
  color: var(--red);
}

.document__comment-create-error:empty {
  display: none;
}

.document__comment-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

/* Compact submit button so it stays proportional to the light Cancel action */
.document__comment-actions .button {
  padding: 5px 14px;
  gap: 6px;
  font-size: 0.8125rem;
  line-height: 1.2;
}

.document__comment-cancel {
  padding: 6px 12px;
  background: none;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--full-contrast);
  cursor: pointer;
  transition: color 0.15s ease;
}

.document__comment-cancel:hover {
  color: var(--accent);
}

.document__comment-popover {
  display: none;
  position: absolute;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--pre-bg);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
  z-index: 20;
  min-width: 280px;
  max-width: 360px;
}

.document__comment-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--muted);
}

.document__comment-popover-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.document__comment-delete-form {
  display: inline-flex;
}

.document__comment-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.document__comment-delete:hover {
  color: var(--red);
  background: rgba(194, 42, 30, 0.08);
}

.document__comment-popover-close {
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}

.document__comment-popover-close:hover {
  color: var(--full-contrast);
}

.document__comment-popover-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.document__comment-popover-edit:hover {
  color: var(--full-contrast);
  background: var(--border-light);
}

.document__comment-edit-error {
  margin: 0;
  font-size: 0.75rem;
  color: var(--red);
}

.document__comment-edit-error:empty {
  display: none;
}

.document__comment-destroy-error {
  margin: 0;
  font-size: 0.75rem;
  color: var(--red);
}

.document__comment-destroy-error:empty {
  display: none;
}

.document__comment-popover-body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--full-contrast);
  white-space: pre-wrap;
  /* As a flex item, min-width:auto would otherwise follow the widest unbreakable
     line and blow the popover open instead of letting the code block scroll */
  min-width: 0;
}

.document__comment-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: var(--pre-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 30;
}

.document__toc {
  display: none;
}

.document__toc-toggle {
  position: fixed;
  top: 50%;
  left: max(24px, calc(50% - 450px - 64px));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  z-index: 30;
}

.document__toc-toggle[hidden] {
  display: none;
}

.document__toc-toggle:hover {
  background: var(--pre-bg);
  border-color: var(--border-light);
  color: var(--fg);
}

.document__toc-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.document__toc-toggle svg {
  flex-shrink: 0;
}

.document__toc-toggle::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}

.document__toc-toggle:hover::after {
  opacity: 1;
  visibility: visible;
}

.document__sidebar-button {
  display: none;
  position: fixed;
  top: calc(50% + 44px);
  left: max(24px, calc(50% - 450px - 64px));
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  z-index: 25;
}

@media (min-width: 1100px) {
  .document__sidebar-button {
    display: flex;
  }
}

.document:has(.document__toc-panel:not([hidden])) .document__sidebar-button {
  display: none;
}

.document:not(:has(.document__toc)) .document__sidebar-button {
  top: 50%;
}

.document__sidebar-button:hover {
  background: var(--pre-bg);
  border-color: var(--border-light);
  color: var(--fg);
}

.document__sidebar-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.document__sidebar-button svg {
  flex-shrink: 0;
}

.document__sidebar-button::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}

.document__sidebar-button:hover::after {
  opacity: 1;
  visibility: visible;
}

.document__toc-panel {
  position: fixed;
  top: 50%;
  left: max(24px, calc(50% - 450px - 268px));
  width: 244px;
  max-height: calc(100vh - 112px);
  padding: 12px;
  overflow-y: auto;
  z-index: 35;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-50%);
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
}

.document__toc-panel[hidden] {
  display: none;
}

.document__toc-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 8px;
  background: var(--bg);
}

.document__toc-heading {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.document__toc-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.document__toc-close:hover {
  background: rgba(31, 41, 55, 0.06);
  color: var(--full-contrast);
}

.document__toc-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.document__toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.document__toc-item {
  display: block;
  padding: 6px 8px;
  overflow: hidden;
  border-radius: 6px;
  color: var(--fg);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.document__toc-item:hover {
  background: rgba(31, 41, 55, 0.045);
  color: var(--full-contrast);
}

.document__toc-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.document__toc-item--level-2 {
  padding-left: 20px;
}

.document__toc-item--level-3 {
  padding-left: 32px;
}

.document__toc-item--active {
  background: rgba(55, 105, 72, 0.09);
  box-shadow: inset 2px 0 var(--accent);
  color: var(--full-contrast);
  font-weight: 500;
}

/* Toggle needs ~100px of left gutter (36px button + 28px gap + page margin),
   which is available from ~1100px viewport width. The panel keeps the same
   card style at every width: page bg with a hairline border + shadow so it
   stays readable where it overlaps the paper edge on narrower screens. */
@media (min-width: 1100px) {
  .document__toc {
    display: block;
  }
}

.document__comment-nav-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.document__comment-nav-button:hover {
  color: var(--full-contrast);
  background: rgba(25, 29, 38, 0.045);
}

.document__comment-nav-button::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}

.document__comment-nav-button:hover::after {
  opacity: 1;
  visibility: visible;
}

.document__comment-nav-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  padding: 2px 0;
}

.document__comment-nav-divider {
  width: 24px;
  height: 1px;
  margin: 4px 0;
  background: var(--border-light);
}

.document__comment-copy {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--fg);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.document__comment-copy:hover {
  color: var(--full-contrast);
  background: rgba(25, 29, 38, 0.045);
}

.document__comment-copy::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}

.document__comment-copy:hover::after {
  opacity: 1;
  visibility: visible;
}

.document__comment-copy-icon {
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.document__comment-copy-icon--hidden {
  display: none;
}

.document__comment-copy-icon--success {
  color: var(--accent);
}

@keyframes comment-copy-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1);
  }
}

.document__comment-copy--copied {
  animation: comment-copy-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: rgba(46, 139, 74, 0.12) !important;
  color: var(--accent) !important;
}

.document__comment-copy--copied::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .document__comment-copy--copied {
    animation: none;
  }
}

.document {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

.document--markdown-wide {
  max-width: 90vw;
  padding-inline: 0;
}

.document--markdown .document__paper {
  padding-inline: clamp(16px, 4.5vw, 64px);
}

.document--markdown-wide .document__paper {
  padding-inline: clamp(16px, 2vw, 32px);
}

.document__width-toggle[aria-pressed="true"] {
  color: var(--accent);
  background: var(--border-light);
  border-color: var(--border);
}

/* Edge annotations can overlap the fixed navigation on the wider canvas. */
.document--markdown .document__selection-toolbar,
.document--markdown .document__comment-card,
.document--markdown .document__comment-popover {
  z-index: 40;
}

/* HTML files get a wider canvas so their own layouts (dashboards, charts) fit */
.document--wide {
  display: flex;
  flex-direction: column;
  max-width: 90vw;
  height: 100dvh;
  padding-bottom: 0;
}

/* Uploaded HTML brings its own look, so the app chrome sits on plain white */
.html-document-page {
  background-color: var(--pre-bg);
}

.html-document-page .document__header {
  background: var(--pre-bg);
}

/* Wide documents leave navigation in the page margin, outside their content. */
.document--markdown-wide .document__toc-toggle,
.document--markdown-wide .document__sidebar-button {
  left: max(4px, calc(2.5vw - 18px));
}

.html-document-page .document__toc-toggle,
.html-document-page .document__sidebar-button {
  left: 16px;
}

.document__scroll-top-button {
  display: none;
  color: var(--accent);
}

/* Keep the accent blue even on hover (shared .icon-button:hover would darken it) */
.icon-button.document__scroll-top-button:hover {
  color: var(--accent);
}

.document__scroll-top-button--visible {
  display: inline-flex;
}

.document__header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 4px 0 2px;
  background: var(--bg);
}

/* Explicit header slots so adding buttons never reshuffles the whole bar: */
.document__leading {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.document__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.document__home-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

.document__home-button:hover {
  background-color: var(--border-light);
  color: var(--full-contrast);
}

.document__home-button svg {
  flex-shrink: 0;
}

.document__title-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.document__title-wrapper {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.document__title-display {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.document__title-display[hidden] {
  display: none;
}

.document__title {
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  color: var(--full-contrast);
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document__rename-form {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 480px;
  width: 100%;
}

.document__rename-form[hidden] {
  display: none;
}

.document__rename-input {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 4px 8px;
  font-size: 0.8125rem;
  box-sizing: border-box;
}

.document__save-button,
.document__cancel-button {
  flex-shrink: 0;
  height: 28px;
  padding: 4px 10px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  box-sizing: border-box;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.document__save-button {
  color: #ffffff;
  background: var(--accent);
  border: 1px solid var(--accent);
}

.document__save-button:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.document__cancel-button {
  color: var(--fg);
  background: transparent;
  border: 1px solid transparent;
}

.document__cancel-button:hover {
  color: var(--full-contrast);
  background: rgba(25, 29, 38, 0.045);
}

/* Copy button uses the shared .icon-button component; only the icon-swap state lives here */
.document__copy-icon--hidden {
  display: none;
}

.document__switcher-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 8px 0;
  background: var(--pre-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 50;
}

.document__switcher-panel[hidden] {
  display: none;
}

.document__switcher-header {
  display: flex;
  align-items: center;
  padding: 0 12px 6px;
}

.document__switcher-heading {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.document__switcher-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

.document__switcher-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  color: var(--fg);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.document__switcher-item:hover {
  background: rgba(31, 41, 55, 0.045);
  color: var(--full-contrast);
}

.document__switcher-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.document__switcher-name {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document__switcher-name::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  padding: 6px 10px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  transform: translateY(4px);
  z-index: 60;
  pointer-events: none;
}

.document__switcher-name:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.document__switcher-time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.document__editor {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.document__editor-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  background: var(--pre-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 50;
}

.document__editor-panel[hidden] {
  display: none;
}

.document__editor-panel-header {
  margin-bottom: 8px;
}

.document__editor-panel-heading {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.document__editor-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.document__editor-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg);
}

.document__editor-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--full-contrast);
  background: var(--pre-bg);
}

.document__editor-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.document__editor-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.document__editor-error {
  margin: 0;
  font-size: 0.75rem;
  color: var(--red);
}

.document__editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.document__editor-actions .button {
  padding: 6px 12px;
  font-size: 0.8125rem;
  border-radius: 8px;
}

.document__editor-select {
  width: 100%;
}

.document__editor-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}

.document__editor-code {
  display: block;
  font-family: var(--mono-font);
  font-size: 0.6875rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document__title::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  padding: 6px 10px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  transform: translateY(-4px);
  z-index: 50;
  pointer-events: none;
}

.document__title:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.document__version {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  background: rgba(25, 29, 38, 0.045);
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.document__paper {
  position: relative;
  background: var(--pre-bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--pre-shadow);
  padding: 48px 64px;
  min-height: 600px;
}

/* Body text sits one notch below the guide's 16px — Quattro S runs visually large */
.document__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 700px) minmax(0, 1fr);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg);
}

/* Keep every ordinary block on the reading track; only visual blocks break out. */
.document__content > * {
  grid-column: 2;
  min-width: 0;
}

.document__content > .document-node--table,
.document__content > .document__mermaid {
  grid-column: 1 / -1;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
}

/* The iframe scrolls internally; the page itself never scrolls for HTML files */
.document__paper--html {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  min-height: 0;
}

/* Clips only the frame, so the selection toolbar can overhang the viewer */
.html-viewer {
  flex: 1;
  min-height: 480px;
  overflow: hidden;
  border-radius: 8px;
}

/* Document content panels */
.document__content[hidden],
.document__archived-panel[hidden],
.html-archived-panel[hidden],
.html-viewer[hidden] {
  display: none !important;
}

/* Shown in place of the file when the nav's inbox button is pressed */
.document__archived-panel {
  flex: 1;
  min-height: 0;
}

.document__paper--html .document__archived-panel,
.html-archived-panel {
  overflow-y: auto;
  padding: 0 40px 40px;
}

.html-viewer__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--pre-bg);
}

/* Document node styles */
.document-node {
  margin: 0;
  padding: 0;
}

.document-node--paragraph {
  margin-bottom: 16px;
}

.document-node--heading {
  font-family: var(--title-font);
  font-weight: 400;
  color: var(--full-contrast);
}

.document-node--heading-1 {
  margin-top: 40px;
  margin-bottom: 10px;
  font-size: 2.25rem;
  color: var(--title-color);
}

.document-node--heading-2 {
  margin-top: 56px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.document-node--heading-3 {
  margin-top: 34px;
  padding-bottom: 8px;
  font-size: 1.1875rem;
  border-bottom: 1px dashed var(--border-light);
}

.document-node--heading-4 {
  margin-top: 28px;
  font-size: 1.0625rem;
}

.document-node--heading-5 {
  margin-top: 24px;
  font-size: 1rem;
}

.document-node--heading-6 {
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.document-node--strong {
  font-weight: 700;
}

.document-node--emph {
  font-style: italic;
}

.document-node--code {
  font-family: var(--mono-font);
  font-size: 0.875em;
  background: var(--inline-code-bg);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--inline-code-fg);
}

.document-node--code-block {
  background: var(--pre-bg);
  border: 1px solid var(--pre-border);
  box-shadow: 0 1px 2px rgba(9, 78, 206, 0.06), 0 8px 18px -6px rgba(9, 78, 206, 0.16);
  border-radius: 8px;
  padding: 18px 22px;
  overflow-x: auto;
  margin-bottom: 16px;
}

.document-node--code-block code {
  font-family: var(--mono-font);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--full-contrast);
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: block;
  white-space: pre;
}

/* Syntax token tints, mapped to DocNotate's paper palette */
.tok-com,
.hljs-comment,
.hljs-quote {
  color: var(--muted);
  font-style: italic;
}

.tok-key,
.hljs-keyword,
.hljs-selector-tag,
.hljs-operator {
  color: var(--full-contrast);
  font-weight: 600;
}

.tok-str,
.hljs-string,
.hljs-regexp,
.hljs-meta .hljs-string {
  color: var(--accent);
}

.tok-num,
.hljs-number,
.hljs-literal,
.hljs-type,
.hljs-built_in,
.hljs-variable.constant_ {
  color: var(--purple);
}

.tok-fn,
.hljs-title,
.hljs-title.function_,
.hljs-title.class_,
.hljs-section,
.hljs-attr,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet {
  color: var(--amber);
}

.hljs-addition {
  color: var(--green);
}

.hljs-deletion {
  color: var(--red);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

/* Mermaid diagrams rendered client-side by Pele; theme tokens map onto Pele's
   CSS variables so diagrams match the paper */
.document__mermaid {
  position: relative;
  margin-bottom: 16px;
}

.document__mermaid-canvas,
.mermaid-modal__canvas {
  --pele-bg: var(--pre-bg);
  --pele-fg: var(--full-contrast);
  --pele-muted: var(--muted);
  --pele-line: var(--fg);
  --pele-surface: var(--bg);
  --pele-surface-alt: var(--note-bg);
  --pele-border: var(--border);
  --pele-accent: var(--accent);
  --pele-critical: var(--red);
  --pele-error: var(--red);
  --pele-font: var(--font);
  --pele-font-mono: var(--mono-font);
  --pele-zoom-bottom: 8px;
  --pele-zoom-right: 8px;
}

.document__mermaid-canvas {
  /* Reserve a rail so expand and zoom controls never cover diagram labels. */
  padding: 40px 44px 8px 0;
  min-height: 160px;
  overflow-x: auto;
}

.document__mermaid .pele,
.mermaid-modal__canvas .pele {
  display: block;
  margin: 0 auto;
}

.document__mermaid-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: var(--pre-bg);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(9, 78, 206, 0.08);
}

/* Wide-view dialog for diagrams, re-rendered at full width. The foundation
   reset zeroes margins, so centering has to be re-declared explicitly. */
.mermaid-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92%, 1240px);
  height: min(86%, 860px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--pre-bg);
  box-shadow: 0 24px 60px rgba(9, 78, 206, 0.25);
}

.mermaid-modal[open] {
  display: flex;
  flex-direction: column;
}

.mermaid-modal::backdrop {
  background: var(--backdrop-bg);
}

.mermaid-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}

.mermaid-modal__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--full-contrast);
}

.mermaid-modal__canvas {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

.document-node--mermaid-source-hidden {
  display: none;
}

.document__mermaid-error {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--warn-border);
  border-radius: 8px;
  background: var(--warn-bg);
  font-size: 0.8125rem;
}

.document__mermaid-error-summary {
  color: var(--red);
  font-weight: 600;
  cursor: pointer;
}

.document__mermaid-error-detail {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--pre-border);
  border-radius: 6px;
  background: var(--pre-bg);
  font-family: var(--mono-font);
  font-size: 12px;
  line-height: 1.6;
  color: var(--full-contrast);
  white-space: pre-wrap;
  overflow-x: auto;
}

.document-node--list {
  margin-bottom: 16px;
  padding-left: 24px;
}

.document-node--list ul,
.document-node--list ol {
  margin-top: 8px;
  margin-bottom: 8px;
}

.document-node--item {
  margin-bottom: 4px;
}

.document-node--link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}

.document-node--link:hover {
  color: var(--accent);
  text-decoration-color: rgba(9, 78, 206, 0.5);
}

.document-node--blockquote {
  border-left: 3px solid var(--border);
  padding-left: 16px;
  margin-bottom: 16px;
  color: var(--muted);
}

.document-node--blockquote p {
  margin-bottom: 8px;
}

.document-node--blockquote p:last-child {
  margin-bottom: 0;
}

.document-node--thematic-break {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

.document-node--table {
  display: block;
  width: 100%;
  margin: 18px 0;
  overflow-x: auto;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
}

.document-node--table-row {
  border-bottom: 1px solid var(--table-border);
}

.document-node--table-cell {
  min-width: 8rem;
  padding: 6px 12px;
  border: 1px solid var(--table-border);
  text-align: left;
  vertical-align: top;
}

.document-node--table-cell-th {
  background: var(--table-header-bg);
  color: var(--full-contrast);
  font-weight: 700;
}

.document-node--table tbody tr:nth-child(2n) {
  background: var(--table-alternate-bg);
}

.document-node--image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--border-light);
}

.document-node--softbreak,
.document-node--linebreak {
  display: block;
}

.document-node--softbreak + .document-node--softbreak,
.document-node--linebreak + .document-node--linebreak {
  margin-top: 8px;
}

/* Block-level node IDs */
[id^="block-"] {
  scroll-margin-top: 24px;
}

[id^="block-"]:target {
  background: rgba(9, 78, 206, 0.09);
  border-radius: 4px;
  padding: 4px 8px;
  margin-left: -8px;
  margin-right: -8px;
}

/* Previous comments section */
.document__archived {
  margin-top: 0;
  padding-top: 32px;
  max-width: 800px;
  margin-inline: auto;
}

.document__archived-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 32px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.document__archived-title::before,
.document__archived-title::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 120px;
  background-image: linear-gradient(to right, transparent, var(--border) 25%, var(--border) 75%, transparent);
}

.document__archived-version {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.document__archived-version:not(:first-child) {
  margin-top: 32px;
}

.document__archived-version-name {
  flex-shrink: 0;
  margin: 0;
  padding: 4px 10px;
  background: var(--muted);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 6px;
}

.document__archived-version-line {
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.document__archived-version-checkall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.document__archived-version-checkall:hover {
  color: var(--full-contrast);
  background: rgba(25, 29, 38, 0.045);
}

.document__archived-version-checkall--resolved {
  color: var(--green);
}

.document__archived-list {
  display: flex;
  flex-direction: column;
}

.document__archived-comment {
  display: flex;
  gap: 16px;
  padding-bottom: 24px;
}

.document__archived-comment:last-child {
  padding-bottom: 0;
}

.document__archived-comment-timeline {
  position: relative;
  width: 20px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.document__archived-comment-timeline::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}

.document__archived-comment:last-child .document__archived-comment-timeline::after {
  display: none;
}

.document__archived-comment-dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--border);
}

.document__archived-comment-content {
  flex: 1;
  min-width: 0;
}

.document__archived-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.document__archived-comment--resolved {
  opacity: 0.65;
}

.document__archived-comment--resolved .document__archived-comment-quote {
  text-decoration: line-through;
}

.document__archived-comment-quote {
  margin: 0 0 8px;
  font-style: italic;
  color: var(--fg);
}

.document__archived-comment-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--full-contrast);
  white-space: pre-wrap;
}

.document__archived-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--muted);
}

.document__archived-comment-badge {
  padding: 2px 6px;
  background: rgba(24, 133, 84, 0.1);
  color: #0f5e3b;
  border-radius: 4px;
  font-weight: 500;
}

.document__archived-comment-resolve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.document__archived-comment-resolve:hover {
  color: var(--full-contrast);
  background: rgba(25, 29, 38, 0.045);
}

.document__archived-comment--resolved .document__archived-comment-resolve {
  color: var(--green);
}

/* Floating inbox button */
.document__comment-inbox-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--fg);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.document__comment-inbox-button:hover {
  color: var(--full-contrast);
  background: rgba(25, 29, 38, 0.045);
}

.document__comment-inbox-button[aria-pressed="true"] {
  color: var(--full-contrast);
  background: var(--border-light);
}

/* While the archived list is open, the same button shows a document icon to switch back */
.document__comment-inbox-icon--file {
  display: none;
}

.document__comment-inbox-button[aria-pressed="true"] .document__comment-inbox-icon--inbox {
  display: none;
}

.document__comment-inbox-button[aria-pressed="true"] .document__comment-inbox-icon--file {
  display: inline;
}

.document__comment-inbox-button::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}

.document__comment-inbox-button:hover::after {
  opacity: 1;
  visibility: visible;
}

.document__comment-inbox-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--muted);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.document__comment-inbox-badge[hidden] {
  display: none;
}