.ttpadding { padding: 1rem 10%; }
.ttpadding-wide { padding: 1rem 5%; }

@media (min-width: 1440px) {
  .ttpadding { padding: 1rem 18%; }
  .ttpadding-wide { padding: 1rem 8%; }
}

@media (min-width: 1920px) {
  .ttpadding { padding: 1rem 25%; }
  .ttpadding-wide { padding: 1rem 6%; }
}

@media (max-width: 768px) {
  .ttpadding { padding: 1rem; }
  .ttpadding-wide { padding: 1rem 4%; }
}

/* hljs */
#editor .hljs-attr,
.ttview .hljs-attr {
	color: var(--hlvar);
}

#editor .hljs-comment,
#editor .hljs-quote,
.ttview .hljs-comment,
.ttview .hljs-quote {
	color: var(--hlComment);
	font-style: italic;
}

.toc-node-view {
	position: relative;
	padding: 1rem;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.toc-node-view:hover {
	border-color: var(--bg-selected-hovered);
	cursor: pointer;
}

.toc-title {
	position: absolute;
	top: 0;
	left: 0.75rem;
	transform: translateY(-50%);
	padding: 0 0.5rem;
	font-size: small;
	color: var(--text-selected);
	background-color: var(--bg);
	border-radius: 999px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.toc-node-view:hover .toc-title {
	opacity: 1;
}

.toc-list, .toc-sublist {
	margin: 0.25rem 0 0 0;
	padding-left: 1.25rem;
	list-style-position: outside;
}

.toc-list {
  	list-style-type: disc;
}

.toc-sublist {
	margin-top: 0.25rem;
	list-style-type: circle;
}
.toc-list > li, .toc-sublist > li{
  	margin: 0.25rem 0;
}

#editor .dv-child-pages-empty,
.ttview .dv-child-pages-empty {
  padding: 0.75rem;
  color: var(--text-alt);
  border: 1px dashed var(--border);
  border-radius: 0.25rem;
  background: var(--bg-overlay);
}

#editor .hljs-keyword,
#editor .hljs-selector-tag,
#editor .hljs-subst,
.ttview .hljs-keyword,
.ttview .hljs-selector-tag,
.ttview .hljs-subst {
	color: var(--hlkeyword);
}

#editor .hljs-number,
#editor .hljs-literal,
#editor .hljs-template-variable,
#editor .hljs-tag .hljs-attr,
.ttview .hljs-number,
.ttview .hljs-literal,
.ttview .hljs-template-variable,
.ttview .hljs-tag .hljs-attr {
	color: var(--hlattr);
}

#editor .hljs-variable,
.ttview .hljs-variable {
	color: var(--hlconst);
}

#editor .hljs-params,
.ttview .hljs-params {
	color: var(--hlvar);
}

#editor .hljs-string,
#editor .hljs-doctag,
.ttview .hljs-string,
.ttview .hljs-doctag {
	color: var(--hlString);
}

#editor .hljs-built_in,
.ttview .hljs-built_in {
	color: var(--hlconst);
}

#editor .hljs-emphasis,
.ttview .hljs-emphasis {
	font-style: italic;
}

#editor .hljs-strong,
.ttview .hljs-strong {
	font-weight: bold;
}

#editor .hljs-title,
.ttview .hljs-title {
	color: var(--hltitle);
}

#editor .class_,
.ttview .class_ {
	color: var(--hlconst);
}

/* Images */
/* #editor img, .ttview img {
	display: inline-block;
	max-width: 100%;
	height: auto;
} */
.tiptap .tt-image-node {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.tiptap .tt-image-stage {
  display: block;
  width: 100%;
  max-width: 100%;
  line-height: 0;
}

.tiptap .tt-image-box {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

.tiptap .tt-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.tiptap .tt-image-node.is-selected .tt-image-box {
  outline: 1px solid var(--bg-selected-hovered);
  outline-offset: 2px;
}

.tiptap .tt-image-handle {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0;
  height: 0;
  border-right: 0.75rem solid var(--text-selected);
  border-top: 0.75rem solid transparent;
  cursor: nwse-resize;
  display: none;
  z-index: 999;
  pointer-events: auto;
  touch-action: none;
}

.tiptap .tt-image-node.is-selected .tt-image-handle {
  display: block;
}

body.tt-image-resizing,
body.tt-image-resizing * {
  cursor: nwse-resize !important;
  user-select: none !important;
}

/* Attachments */
.dv-attachment,
.dv-attachment-node .dv-attachment-card {
  color: var(--text);
  text-decoration: none;
}

.dv-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  vertical-align: middle;
}

.dv-attachment:hover,
.dv-attachment-node .dv-attachment-card:hover {
  text-decoration: none;
  border-color: var(--bg-selected-hovered);
}

.dv-attachment__name,
.dv-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv-attachment__meta,
.dv-attachment-meta {
  color: var(--text-alt);
  font-size: 0.78rem;
}

.dv-attachment-node {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0.5rem 0;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.dv-attachment-node.is-selected {
  border-color: var(--bg-selected-hovered);
}

.dv-attachment-node .dv-attachment-card {
  display: flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--bg-overlay);
  overflow: hidden;
}

.dv-attachment-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-selected);
  background: var(--bg-raised);
}

.dv-attachment-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dv-attachment-node--list .dv-attachment-card {
  width: min(28rem, 100%);
  gap: 0.65rem;
  padding: 0.45rem 0.65rem;
}

.dv-attachment-node--list .dv-attachment-preview {
  width: 2rem;
  height: 2rem;
  font-size: 1.25rem;
  border-radius: 0.2rem;
}

.dv-attachment-node--thumbnail {
  width: 12rem;
}

.dv-attachment-node--thumbnail .dv-attachment-card {
  flex-direction: column;
  align-items: stretch;
}

.dv-attachment-node--thumbnail .dv-attachment-preview {
  height: 6rem;
  font-size: 2rem;
}

.dv-attachment-node--thumbnail .dv-attachment-main {
  padding: 0.45rem 0.55rem;
}

.dv-attachment-actions {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: none;
  gap: 0.25rem;
}

.dv-attachment-node.is-selected .dv-attachment-actions,
.dv-attachment-node:hover .dv-attachment-actions {
  display: flex;
}

.dv-attachment-action {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  color: var(--text);
  background: var(--bg-raised);
  cursor: pointer;
}

.dv-attachment--inline,
.dv-attachment-node--inline {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin: 0 0.15rem;
  vertical-align: baseline;
}

.dv-attachment--inline {
  padding: 0;
  border: 0;
  background: transparent;
}

.dv-attachment-inline-main,
.dv-attachment-node--inline .dv-attachment-card {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.05rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background: transparent;
  transition: background-color 0.25s ease;
}

.dv-attachment-node--inline .dv-attachment-preview {
  width: auto;
  height: auto;
  background: transparent;
  font-size: 0.95rem;
}

.dv-attachment-node--inline .dv-attachment-meta,
.dv-attachment-node--inline .dv-attachment-download {
  display: none;
}

.dv-attachment--card,
.dv-attachment-node--card {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0.5rem 0;
}

.dv-attachment--card {
  padding: 0;
  border: 0;
  background: transparent;
}

.dv-attachment-card-main,
.dv-attachment-node--card .dv-attachment-card {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--bg-overlay);
  box-sizing: border-box;
  transition: background-color 0.25s ease;
}

.dv-attachment-card-icon,
.dv-attachment-node--card .dv-attachment-preview {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.25rem;
  border-radius: 0.25rem;
  color: var(--text-selected);
  background: var(--bg-raised);
}

.dv-attachment-card-copy,
.dv-attachment-node--card .dv-attachment-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.dv-attachment-card-download,
.dv-attachment-download {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--text-alt);
}

.dv-attachment-download:hover {
  color: var(--link);
}

.dv-attachment--thumbnail,
.dv-attachment-node--thumbnail {
  display: inline-block;
  width: 10rem;
  max-width: 10rem;
  margin: 0.5rem 0.35rem 0.5rem 0;
  vertical-align: top;
}

.dv-attachment--thumbnail {
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.dv-attachment-thumb-main,
.dv-attachment-node--thumbnail .dv-attachment-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 10rem;
  height: 7.7rem;
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  background: var(--bg-overlay);
  overflow: visible;
  transition: background-color ease 0.25s;
}

.dv-attachment-thumb-preview,
.dv-attachment-node--thumbnail .dv-attachment-preview {
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 5.5rem;
  color: var(--text-selected);
  font-size: 1.65rem;
}

.dv-attachment-thumb-name,
.dv-attachment-node--thumbnail .dv-attachment-name {
  display: block;
  padding: 0.35rem 0.45rem 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.8rem;
}

.dv-attachment-node--thumbnail .dv-attachment-meta,
.dv-attachment-node--thumbnail .dv-attachment-download {
  display: none;
}

.dv-attachment-card {
  cursor: pointer;
}

.dv-attachment-action.is-active {
  color: var(--text-selected);
  border-color: var(--bg-selected-hovered);
  background: var(--bg-selected-pressed);
}

.dv-attachment:hover .dv-attachment-inline-main,
.dv-attachment:hover .dv-attachment-card-main,
.dv-attachment:hover .dv-attachment-thumb-main,
.dv-attachment-node .dv-attachment-card:hover {
  background: var(--bg-overlay-hovered);
  cursor: pointer;
}

.dv-attachment-node .dv-attachment-card {
  box-sizing: border-box;
}

.dv-attachment-node.is-selected {
  border-color: transparent;
}

.dv-attachment-node.is-selected .dv-attachment-card {
  outline: 1px solid var(--bg-selected-hovered);
  outline-offset: 2px;
}

.dv-attachment-actions {
  position: static;
  display: none;
  margin-top: 0.35rem;
  justify-content: flex-start;
}

.dv-attachment-node:hover:not(.is-selected) .dv-attachment-actions {
  display: none;
}

.dv-attachment-node.is-selected .dv-attachment-actions {
  display: flex;
}

.dv-attachment-action {
  width: auto;
  min-width: 0;
  height: 1.75rem;
  gap: 0.35rem;
  padding: 0 0.45rem;
  font-size: 0.8rem;
  color: var(--text-alt);
  background: var(--bg-raised);
}

.dv-attachment-action:hover {
  color: var(--text);
  background: var(--bg-raised-hovered);
}

.dv-attachment-inline-main,
.dv-attachment-node--inline .dv-attachment-card {
  background: var(--bg-overlay);
  border-color: var(--border);
}

.dv-attachment-thumb-main,
.dv-attachment-node--thumbnail .dv-attachment-card {
  overflow: hidden;
}

.dv-attachment-thumb-name,
.dv-attachment-node--thumbnail .dv-attachment-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.dv-file-preview {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--bg);
}

.dv-file-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.2rem;
  padding: 0.7rem 1.4rem;
  background: var(--bg-overlay);
  box-sizing: border-box;
}

.dv-file-preview-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.dv-file-preview-title > i {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-alt);
  background: var(--bg-overlay);
  border-radius: 0.2rem;
}

.dv-file-preview-title span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dv-file-preview-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv-file-preview-title small {
  color: var(--text-alt);
  text-transform: capitalize;
}

.dv-file-preview-tools {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dv-file-preview-tools a,
.dv-file-preview-tools button {
    padding: 0.5rem;
    border: 0;
    color: var(--text-alt);
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}

.dv-file-preview-tools a:hover,
.dv-file-preview-tools button:hover {
  color: var(--text);
  background: var(--bg-overlay-hovered);
}

.dv-file-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.dv-file-preview-code {
  margin: 0;
  padding: 0.7rem 0;
  min-height: 100%;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: var(--bg-sunken);
  line-height: 1.55;
}

.dv-file-preview-line {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  min-height: 1.55rem;
}

.dv-file-preview-line:nth-child(odd) {
  background: var(--bg-raised);
}

.dv-file-preview-line:hover {
  background: var(--bg-overlay-hovered);
}

.dv-file-preview-line-number {
  padding: 0 0.75rem;
  color: var(--text-alt);
  text-align: right;
  user-select: none;
}

.dv-file-preview-line code {
  padding: 0 0.75rem;
  background: transparent;
  white-space: pre;
}

.dv-file-preview-frame,
.dv-file-preview-media {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg-sunken);
}

.dv-file-preview-media {
  object-fit: contain;
}

.dv-file-preview-audio,
.dv-file-preview-empty,
.dv-file-preview-loading {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dv-file-preview-empty {
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.dv-file-preview-empty > i {
  font-size: 4rem;
  color: var(--text-alt);
}

.dv-file-preview-empty a {
  margin-top: 1rem;
  padding: 0.5rem 0.8rem;
  border-radius: 0.5rem;
  color: var(--text-black);
  background: var(--icon-info);
  transition: background-color 0.15s ease;
}

.dv-file-preview-empty a:hover {
  background: var(--bg-selected-bold);
  text-decoration: none;
}

/* Panels */
#editor .info-block,
.ttview .info-block {
	display: flex;
	gap: 1rem;
	padding: 1rem;
	border-radius: 0.25rem;
	margin: 0.75rem 0;
}

#editor .info-block__icon,
.ttview .info-block__icon {
	display: flex;
	align-items: start;
	margin-right: 0.5rem;
}

#editor .info-block__svg,
.ttview .info-block__svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

#editor .info-block__body,
.ttview .info-block__body {
	flex: 1 1 auto;
	color: var(--text);
}

#editor .info-block__body > *,
.ttview .info-block__body > * {
	margin: 0;
}

/* Variants */
#editor .info-block--note,
.ttview .info-block--note {
	background: var(--panel-bg-note);
}

#editor .info-block--note .info-block__svg,
.ttview .info-block--note .info-block__svg {
	color: var(--icon-note);
}

#editor .info-block--info,
.ttview .info-block--info {
	background: var(--panel-bg-info);
}

#editor .info-block--info .info-block__svg,
.ttview .info-block--info .info-block__svg {
	color: var(--icon-info);
}

#editor .info-block--warning,
.ttview .info-block--warning {
	background: var(--panel-bg-warning);
}

#editor .info-block--warning .info-block__svg,
.ttview .info-block--warning .info-block__svg {
	color: var(--icon-warning);
}

#editor .info-block--error,
.ttview .info-block--error {
	background: var(--panel-bg-danger);
}

#editor .info-block--error .info-block__svg,
.ttview .info-block--error .info-block__svg {
	color: var(--icon-danger);
}

#editor .info-block--success,
.ttview .info-block--success {
	background: var(--panel-bg-success);
}

#editor .info-block--success .info-block__svg,
.ttview .info-block--success .info-block__svg {
	color: var(--icon-success);
}

/* Headings */
#editor h1,
#editor h2,
#editor h3,
#editor h4,
#editor h5,
#editor h6,
.ttview h1,
.ttview h2,
.ttview h3,
.ttview h4,
.ttview h5,
.ttview h6 {
	font-weight: 500;
}

#editor hr,
.ttview hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 2rem 0;
}

#editor pre, .ttview pre {
	padding: 0.5rem;
	background-color: var(--bg-overlay);
	border: 1px solid var(--border);
	border-radius: 0.25rem;
	line-height: 1.4;
	overflow-x: auto;
}

#editor code, .ttview code {
	font-size: 1rem;
	background-color: var(--bg-overlay);
	border-radius: 0.25rem;
	padding: 0 0.25rem;
}

#editor pre code, .ttview pre code {
	padding: 0;
	position: relative;
	/* word-break: keep-all; */
}

.ttview .code-copy-btn {
	position: absolute;
	top: 0.3rem;
	right: 0.3rem;
	z-index: 2;
	padding: 0.25rem 0.4rem;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	cursor: pointer;
	font-size: 1rem;
	color: var(--text);
	transition: all 0.25s ease;
}

.ttview .code-copy-btn:hover {
	border: 1px solid var(--border);
	background-color: var(--bg-raised-pressed);
}

.ttview .code-copy-wrap {
	position: relative;
}

.ttview .code-copy-wrap > pre {
	margin: 0;
}

#editor blockquote,
.ttview blockquote {
	background: var(--bg-overlay);
	border-left: 10px solid var(--bg-overlay-pressed);
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border-radius: 0.25rem;
}

#editor blockquote > p,
.ttview blockquote > p {
	margin: 0;
}

#editor a,
.ttview a {
	color: var(--link);
	cursor: pointer;
}

#editor a:hover,
.ttview a:hover {
	text-decoration: underline;
}

#editor table,
.ttview table {
	color: var(--text);
	margin: 0;
	overflow: hidden;
	table-layout: fixed;
	max-width: 100%;
}

#editor table p,
.ttview table p {
	margin: 0;
	width: fit-content;
}

#editor table th,
.ttview table th {
	background-color: var(--bg-overlay);
}

#editor table th,
#editor table td,
.ttview table th,
.ttview table td {
	position: relative;
	border: solid 1px var(--border);
	padding: 0.5rem 0.6875rem;
	box-sizing: border-box;
	min-width: 1rem;
	vertical-align: top;
}

.table-horizontal-borders tr td {
  border-left: solid 1px transparent;
  border-right: solid 1px transparent;
  border-top: solid 1px transparent;
  border-bottom: solid 1px var(--border);
}

/* These already target .tiptap; they don't need #editor/.ttview */
.tiptap table .column-resize-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	right: -2px;
	width: 3px;
	z-index: 10;
	pointer-events: none;
	background-color: var(--brand);
}

.tiptap table .column-resize-handle {
	right: -1px;
}

/* .tiptap [data-resize-container] {
  justify-content: flex-start;
  align-items: flex-start;
}

.tiptap [data-resize-wrapper] {
  flex: 0 0 auto !important;
  display: inline-block !important;
  max-width: 100%;
} */

.tiptap.resize-cursor {
	cursor: ew-resize;
	cursor: col-resize;
}

/* .tiptap [data-resize-handle] {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  z-index: 10;
}

.tiptap [data-resize-handle]:hover {
  background: rgba(0, 0, 0, 0.8);
}

.tiptap [data-resize-handle='top-left'],
.tiptap [data-resize-handle='top-right'],
.tiptap [data-resize-handle='bottom-left'],
.tiptap [data-resize-handle='bottom-right'] {
  width: 8px;
  height: 8px;
}

.tiptap [data-resize-handle='top-left'] {
  top: -4px;
  left: -4px;
  cursor: nwse-resize;
}

.tiptap [data-resize-handle='top-right'] {
  top: -4px;
  right: -4px;
  cursor: nesw-resize;
}

.tiptap [data-resize-handle='bottom-left'] {
  bottom: -4px;
  left: -4px;
  cursor: nesw-resize;
}

.tiptap [data-resize-handle='bottom-right'] {
  bottom: -4px;
  right: -4px;
  cursor: nwse-resize;
}

.tiptap [data-resize-handle='top'],
.tiptap [data-resize-handle='bottom'] {
  height: 6px;
  left: 8px;
  right: 8px;
}

.tiptap [data-resize-handle='top'] {
  top: -3px;
  cursor: ns-resize;
}

.tiptap [data-resize-handle='bottom'] {
  bottom: -3px;
  cursor: ns-resize;
}

.tiptap [data-resize-handle='left'],
.tiptap [data-resize-handle='right'] {
  width: 6px;
  top: 8px;
  bottom: 8px;
}

.tiptap [data-resize-handle='left'] {
  left: -3px;
  cursor: ew-resize;
}

.tiptap [data-resize-handle='right'] {
  right: -3px;
  cursor: ew-resize;
}

.tiptap [data-resize-state="true"] [data-resize-wrapper] {
  outline: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0.125rem;
} */

/* API Blocks */
.dv-api-builder,
.dv-api-endpoint {
  display: block;
  margin: 2rem 0;
}

.dv-api-builder {
  padding: 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.dv-api-builder:hover {
  border-color: var(--bg-selected-hovered);
  cursor: pointer;
}

.dv-api-render,
.dv-api-editor {
  display: block;
  width: 100%;
}

.dv-api-render {
  line-height: 1.55;
}

.dv-api-layout,
.dv-api-main {
  display: block;
  min-width: 0;
}

.dv-api-examples {
  display: none;
}

.dv-api-header,
.dv-api-section,
.dv-api-editor-top,
.dv-api-editor-section {
  display: block;
  margin-bottom: 1.75rem;
}

.dv-api-title {
  margin: 0 0 0.55rem;
}

.dv-api-route-row,
.dv-api-response-meta,
.dv-api-editor-route-row,
.dv-api-editor-section-header,
.dv-api-editor-item-header,
.dv-api-editor-item-grid,
.dv-api-checkbox-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.dv-api-route-row {
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}

.dv-api-route,
.dv-api-response-status,
.dv-api-response-language,
.dv-api-param-name,
.dv-api-param-type,
.dv-api-param-required,
.dv-api-param-optional,
.dv-api-input,
.dv-api-textarea,
.dv-api-select,
.dv-api-code-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
}

.dv-api-route {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.dv-api-description {
  max-width: 72ch;
  margin: 0.4rem 0 0;
  color: var(--text-alt);
}

.dv-api-section-title {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 650;
}

.dv-api-method {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.dv-api-method-get {background-color: var(--panel-bg-info-hovered);}
.dv-api-method-post {background-color: var(--panel-bg-success-hovered);}
.dv-api-method-put,
.dv-api-method-patch {background-color: var(--panel-bg-warning-hovered);}
.dv-api-method-delete {background-color: var(--panel-bg-danger-hovered);}

.dv-api-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
}

.dv-api-param-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: auto;
}

.dv-api-param-table th,
.dv-api-param-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.dv-api-param-table th {
  color: var(--text-alt);
  font-size: 0.82rem;
  font-weight: 650;
  text-transform: uppercase;
}

.dv-api-param-table tr:last-child td {
  border-bottom: 0;
}

.dv-api-param-description {
  min-width: 16rem;
}

.dv-api-param-required {
  color: var(--hlattr);
  font-weight: 650;
}

.dv-api-param-optional {
  color: var(--text-alt);
}

.dv-api-response-list,
.dv-api-editor-list,
.dv-api-editor-sections {
  display: grid;
  gap: 1rem;
}

.dv-api-response-item {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.dv-api-response-item {
  overflow: hidden;
}

.dv-api-response-meta {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.dv-api-response-status {
  font-weight: 700;
}

.dv-api-response-title {
  font-weight: 650;
}

.dv-api-response-language {
  margin-left: auto;
  color: var(--text-alt);
}

.dv-api-response-details {
  display: block;
}

.dv-api-response-summary {
  padding: 0.75rem 0.9rem;
  color: var(--text-alt);
  cursor: pointer;
}

.dv-api-response-summary:hover {
  color: var(--text);
}

.dv-api-code-block {
  margin: 0;
  padding: 1rem;
  white-space: pre;
  overflow-x: auto;
}

.dv-api-examples-sticky {
  position: sticky;
  top: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.dv-api-examples-header {
  padding: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.dv-api-examples-title {
  margin-bottom: 0.65rem;
  font-weight: 650;
}

.dv-api-examples-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dv-api-example-option {
  width: auto;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--text-alt);
  font-size: 0.8rem;
}

.dv-api-example-option:hover,
.dv-api-example-option.is-active {
  border-color: var(--bg-selected-hovered);
  color: var(--text);
}

.dv-api-example-code {
  max-height: 34rem;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  white-space: pre;
}

.dv-api-example-code[hidden] {
  display: none;
}

.dv-api-editor-section {
  padding: 1rem;
  background: var(--bg-overlay);
  border-radius: 0.5rem;
}

.dv-api-editor-section-header,
.dv-api-editor-item-header {
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.dv-api-editor-section-header {
  justify-content: space-between;
}

.dv-api-editor-item-header .dv-api-button {
  width: auto;
  margin-left: auto;
}

.dv-api-editor-section-title {
  font-weight: 650;
}

.dv-api-editor-item {
  padding: 0.85rem;
  background: var(--bg-raised);
  border: 1px solid transparent;
  border-radius: 0.5rem;
}

.dv-api-field {
  display: block;
  margin-bottom: 0.75rem;
}

.dv-api-field-label,
.dv-api-empty {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-alt);
  font-size: 0.85rem;
}

.dv-api-field-route {
  flex: 1 1 20rem;
}

.dv-api-field-method {
  flex: 0 0 10rem;
}

.dv-api-field-compact {
  flex: 0 0 9rem;
}

.dv-api-input,
.dv-api-textarea,
.dv-api-select,
.dv-api-button {
  width: 100%;
  box-sizing: border-box;
}

.dv-api-textarea {
  resize: vertical;
}

.dv-api-checkbox-wrap {
  min-height: 2.25rem;
  gap: 0.45rem;
}

.dv-api-button {
  cursor: pointer;
}

.dv-api-editor-item-grid > .dv-api-field {
  flex: 1 1 12rem;
  min-width: 0;
}

.dv-api-editor-item-grid-response > .dv-api-field {
  flex-basis: 10rem;
}

@media (max-width: 700px) {
  .dv-api-builder {
    padding: 0.75rem;
  }

  .dv-api-response-language {
    margin-left: 0;
  }
}

@media (min-width: 1100px) {
  .ttpadding-wide .dv-api-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
    gap: 1.25rem;
    align-items: start;
  }

  .ttpadding-wide .dv-api-examples {
    display: block;
    min-width: 0;
  }
}

/* Version History Block */
#editor .dv-version-history,
.ttview .dv-version-history {
  display: block;
  width: 100%;
  margin: 1.5rem 0;
  overflow-y: scroll;
  max-height: 30rem;
}

#editor .dv-version-history-node {
  border: 1px solid transparent;
  border-radius: 0.25rem;
  padding: 0.25rem;
}

#editor .dv-version-history-node:hover {
  border-color: var(--bg-selected-hovered);
  cursor: grab;
}

#editor .dv-version-history-scroll,
.ttview .dv-version-history-scroll {
  width: 100%;
  overflow-x: auto;
}

#editor .dv-version-history-table,
.ttview .dv-version-history-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: auto;
}

#editor .dv-version-history-table th,
#editor .dv-version-history-table td,
.ttview .dv-version-history-table th,
.ttview .dv-version-history-table td {
  padding: 0.75rem 0.65rem;
  border-top: 1px solid var(--border);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  vertical-align: top;
  text-align: left;
}

#editor .dv-version-history-table th,
.ttview .dv-version-history-table th {
  font-weight: 600;
  background: transparent;
}

#editor .dv-version-history-version,
.ttview .dv-version-history-version {
  width: 12rem;
  font-weight: 600;
  white-space: nowrap;
}

#editor .dv-version-history-date,
.ttview .dv-version-history-date {
  width: 14rem;
  white-space: nowrap;
}

#editor .dv-version-history-editor,
.ttview .dv-version-history-editor {
  font-weight: 600;
}

#editor .dv-version-history-empty,
.ttview .dv-version-history-empty {
  padding: 0.75rem;
  color: var(--text-alt);
  border: 1px dashed var(--border);
  border-radius: 0.25rem;
  background: var(--bg-overlay);
}

/* Suggestion Menu */
.mention {
    text-decoration: none;
    border-radius: 0.35rem;
    padding: 0.05rem 0.25rem;
    font-weight: 500;
}

.mention-menu {
    position: fixed;
    z-index: 9999;
    min-width: 220px;
    max-width: 320px;
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    padding: 0.35rem;
}

.mention-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-align: left;
    padding: 0.5rem;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
}

.mention-menu-item:hover {
    background: var(--bg-overlay-hovered);
}

.mention-menu-item.is-selected {
    background: var(--bg-selected-hovered);
}

.mention-menu-prefix {
    opacity: 0.65;
    font-weight: 700;
}

.mention-menu-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-menu-empty {
    padding: 0.5rem;
    opacity: 0.7;
}

.slash-command-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.slash-command-description {
    color: var(--text-alt);
    font-size: 0.75rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Table Controls */
.tt-table-add-btn {
    position: fixed;
    z-index: 9999;

    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid var(--link);
    background: var(--link);
    color: white;

    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    font-family: Arial, sans-serif;

    cursor: pointer;
    user-select: none;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.tt-table-add-btn::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
}

.tt-table-add-btn:hover {
    background: var(--bg-selected-bold);
}

.tt-table-row-guide,
.tt-table-col-guide {
    position: fixed;
    z-index: 9998;
    pointer-events: none;
    background: var(--link);
}

.tt-table-row-guide {
    height: 2px;
}

.tt-table-col-guide {
    width: 2px;
}

.ProseMirror td.tt-table-row-hover,
.ProseMirror th.tt-table-row-hover,
.ProseMirror td.tt-table-col-hover,
.ProseMirror th.tt-table-col-hover {
    background-color: rgba(37, 99, 235, 0.12);
}