/* Documents owns its editor, preview and page-layout vocabulary. */

.new-document-shell {
  min-height: 100dvh;
  color: var(--fg);
}

.new-document-shell__header,
.new-document-shell__bar {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.new-document-shell__header { margin-bottom: 1.5rem; }
.new-document-shell__content { max-width: 1120px; margin: 0 auto; }
.new-document-shell--editor { background: var(--bg); color: var(--fg); }
.new-document-shell--editor [data-template-name] {
  min-width: 0;
  max-width: 32rem;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
}
.new-document-shell--editor [data-template-name]:focus { box-shadow: 0 2px 0 var(--accent); }
.new-document-shell--editor [data-document-editor-surface]:focus { outline: none; }
.new-document-shell--editor [data-document-editor-frozen-caret] { background: var(--accent); }

.new-document-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  background: var(--surface);
}
.new-document-list { display: flex; flex-direction: column; gap: 0.5rem; }
.new-document-list__item {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.new-document-field { display: grid; gap: 0.35rem; margin-top: 1rem; }
.new-document-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font: inherit;
}
.new-document-error { color: #a52828; margin: 0.75rem 0; }
.new-document-dashboard-card,
.new-document-dashboard-tabs { min-height: 0; }
.new-document-template-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* Editor and read-only surfaces. */
[data-document-editor-surface] { white-space: pre-wrap; outline: none; }
[data-document-editor-surface] p,
[data-document-editor-surface] li,
.document-read-only-surface p,
.document-read-only-surface li {
  margin: 0;
  min-height: 1em;
}
[data-document-editor-surface] [data-table-element] { width: 100%; table-layout: fixed; }
[data-document-editor-surface] [data-table-cell] {
  min-height: 1em;
  vertical-align: top;
}
[data-document-editor-surface] [data-table-cell-content] { min-height: 1em; outline: none; }
[data-document-editor-surface] [data-table-wrapper]:hover [data-table-control] { opacity: 1; }
[data-document-editor-surface] [data-table-control] { opacity: 0; }
[data-table-grid-cell][data-table-grid-active="true"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--fg);
}
[data-table-grid] { order: 1; }
[data-table-grid-label] { order: 2; }
[data-document-editor-surface] li::marker {
  font-family: var(--list-marker-font-family, inherit);
  font-size: var(--list-marker-font-size, inherit);
  font-style: var(--list-marker-font-style, inherit);
  font-weight: var(--list-marker-font-weight, inherit);
}
[data-document-editor-surface] [data-list-marker]::before { content: attr(data-list-marker-label); }
[data-document-editor-surface] [data-list-marker] { user-select: none; }
[data-mark-bold] { font-weight: 700; }
[data-mark-italic] { font-style: italic; }
[data-mark-underline] { text-decoration: underline; }
[data-document-editor-frozen-caret] { z-index: 2; pointer-events: none; }
::highlight(new-document-editor-inactive-selection) { background: #c8cbd3; color: #111827; }

.document-read-only-surface ul,
.document-read-only-surface ol {
  margin: 0;
  padding-left: 1.5rem;
}
.document-read-only-surface table { border-collapse: collapse; }

/* Document logic and editor-side panels. */
.document-side-panel {
  width: min(300px, calc(100vw - 68px));
  max-width: min(300px, calc(100vw - 68px));
}
@media (min-width: 768px) {
  .document-side-panel {
    width: min(32vw, 360px);
    max-width: min(32vw, 360px);
  }
}

document-logic,
document-logic [data-logic-panel],
document-logic [data-panel],
document-logic accordion-ui,
document-logic .accordion-item,
document-logic .accordion-panel,
document-logic .collapsible-content {
  min-width: 0;
  max-width: 100%;
}
document-logic .accordion-toggle {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Page setup is a document-model concern, not a global CDN utility. */
.w-a4 { width: min(100%, 210mm); }
.w-page-a4-portrait { width: min(100%, 210mm); }
.w-page-a4-landscape { width: min(100%, 297mm); }
.w-page-letter-portrait { width: min(100%, 8.5in); }
.w-page-letter-landscape { width: min(100%, 11in); }
.w-page-legal-portrait { width: min(100%, 8.5in); }
.w-page-legal-landscape { width: min(100%, 14in); }
.w-page-a5-portrait { width: min(100%, 148mm); }
.w-page-a5-landscape { width: min(100%, 210mm); }
.h-a4 { height: 297mm; }
.h-page-a4-portrait { height: 297mm; }
.h-page-a4-landscape { height: 210mm; }
.h-page-letter-portrait { height: 11in; }
.h-page-letter-landscape { height: 8.5in; }
.h-page-legal-portrait { height: 14in; }
.h-page-legal-landscape { height: 8.5in; }
.h-page-a5-portrait { height: 210mm; }
.h-page-a5-landscape { height: 148mm; }
.minh-a4 { min-height: 297mm; }
.minh-page-a4-portrait { min-height: 297mm; }
.minh-page-a4-landscape { min-height: 210mm; }
.minh-page-letter-portrait { min-height: 11in; }
.minh-page-letter-landscape { min-height: 8.5in; }
.minh-page-legal-portrait { min-height: 14in; }
.minh-page-legal-landscape { min-height: 8.5in; }
.minh-page-a5-portrait { min-height: 210mm; }
.minh-page-a5-landscape { min-height: 148mm; }

.p-page { padding: 24mm 20mm !important; }
@media (min-width: 768px) {
  .p-md-page { padding: 24mm 20mm !important; }
}
.p-page-normal { padding: 24mm 20mm !important; }
.p-page-narrow { padding: 14mm 12mm !important; }
.p-page-wide { padding: 32mm 26mm !important; }
@media (max-width: 960px) {
  .p-page { padding: 18mm 14mm !important; }
  .p-page-normal { padding: 18mm 14mm !important; }
  .p-page-narrow { padding: 12mm 10mm !important; }
  .p-page-wide { padding: 24mm 18mm !important; }
}
@media (min-width: 768px) and (max-width: 960px) {
  .p-md-page { padding: 18mm 14mm !important; }
}

/* Document typography and paragraph projection. */
.font-arial { font-family: Arial, sans-serif; }
.font-georgia { font-family: Georgia, serif; }
.font-times-new-roman { font-family: "Times New Roman", serif; }
.font-courier-new { font-family: "Courier New", monospace; }
.font-verdana { font-family: Verdana, sans-serif; }
.text-6pt { font-size: 6pt; }
.text-7pt { font-size: 7pt; }
.text-8pt { font-size: 8pt; }
.text-9pt { font-size: 9pt; }
.text-10pt { font-size: 10pt; }
.text-10_5pt { font-size: 10.5pt; }
.text-11pt { font-size: 11pt; }
.text-12pt { font-size: 12pt; }
.text-14pt { font-size: 14pt; }
.text-16pt { font-size: 16pt; }
.text-18pt { font-size: 18pt; }
.text-20pt { font-size: 20pt; }
.text-22pt { font-size: 22pt; }
.text-24pt { font-size: 24pt; }
.text-26pt { font-size: 26pt; }
.text-28pt { font-size: 28pt; }
.text-30pt { font-size: 30pt; }
.text-32pt { font-size: 32pt; }
.text-36pt { font-size: 36pt; }
.text-48pt { font-size: 48pt; }
.text-60pt { font-size: 60pt; }
.text-72pt { font-size: 72pt; }
.text-96pt { font-size: 96pt; }
.list-indent-0 { padding-left: 2rem !important; }
.list-indent-1 { padding-left: 4rem !important; }
.list-indent-2 { padding-left: 6rem !important; }
.list-indent-3 { padding-left: 8rem !important; }
.line-spacing-single { line-height: 1; }
.line-spacing-115 { line-height: 1.15; }
.line-spacing-150 { line-height: 1.5; }
.line-spacing-double { line-height: 2; }

/* Structured tokens, selection and legacy editor compatibility. */
.glow-tone {
  box-shadow: 0 0 0 2px var(--bg-tone), 0 0 16px color-mix(in oklab, var(--bg-tone) 72%, transparent);
}

.document-template-token { color: var(--fg); }
.document-template-token.bg-warning {
  color: #161100;
  border-color: var(--warning);
}
[data-theme="dark"] .document-template-token.bg-warning {
  background: color-mix(in oklab, var(--warning) 48%, #000);
  border-color: color-mix(in oklab, var(--warning) 48%, #000);
  color: var(--fg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .document-template-token.bg-warning {
    background: color-mix(in oklab, var(--warning) 48%, #000);
    border-color: color-mix(in oklab, var(--warning) 48%, #000);
    color: var(--fg);
  }
}
.bg-selection {
  background: color-mix(in oklab, var(--primary) 42%, transparent);
  color: inherit;
}
[data-native-editor] { caret-color: var(--accent); }
[data-native-caret-overlay] { background: var(--accent); }
.document-editor-caret-anchor {
  display: inline;
  position: relative;
  width: 0;
  height: 0;
  overflow: visible;
  vertical-align: baseline;
}
.document-editor-caret-anchor::after {
  content: '';
  position: absolute;
  bottom: -0.2em;
  left: 0;
  width: 3px;
  height: 1.1em;
  border-radius: 999px;
  background: var(--info);
  transform: translateX(-50%);
}
.animate-caret-blink { animation: caret-blink 1s steps(1, end) infinite; }
@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Fixed table controls used by the document toolbar. */
.document-toolbar-table-panel { display: flex; flex-direction: column; }
.document-toolbar-table-grid {
  display: grid;
  grid-template-columns: repeat(8, 32px);
  grid-auto-rows: 32px;
}
.document-toolbar-table-actions { order: 3; }

/* Legacy native prototype kept available for comparison and migration work. */
.document-native-prototype-shell {
  position: relative;
  min-height: 100%;
  padding: 1.5rem 1rem 4rem;
  color: var(--color-text, #f5f7ff);
}
.document-native-prototype-page { box-sizing: border-box; margin: 0 auto; cursor: text; }
.document-native-prototype-editor {
  min-height: 100%;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  font-family: Arial, sans-serif;
  font-size: 12pt;
  user-select: text;
  cursor: text;
  line-height: 1.38;
}
.document-native-prototype-editor.document-native-has-selection,
.document-native-prototype-editor.document-native-has-persistent-caret { caret-color: transparent; }
.document-native-prototype-editor > div { min-height: 1.15em; }
.document-native-prototype-editor > ul,
.document-native-prototype-editor > ol { margin: 0; padding-inline-start: 48px; }
.document-native-prototype-editor > ul > li,
.document-native-prototype-editor > ol > li { min-height: 1.15em; padding-left: 0; }
.document-native-prototype-editor > ul > li::marker,
.document-native-prototype-editor > ol > li::marker { font: inherit; color: inherit; }
.document-native-prototype-list-item { display: flex; align-items: flex-start; padding-left: 0; }
.document-native-prototype-marker {
  flex: 0 0 2em;
  margin-right: 0.5em;
  text-align: right;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  font: inherit;
  line-height: inherit;
}
.document-native-prototype-content { flex: 1 1 auto; min-width: 0; }
.document-native-prototype-variable {
  display: inline-block;
  padding: 0 0.2em;
  border-radius: 0.25em;
  background: rgba(14, 165, 233, 0.22);
  color: inherit;
  white-space: nowrap;
}
.document-native-prototype-caret-overlay {
  position: absolute;
  z-index: 2;
  width: 1px;
  min-width: 1px;
  pointer-events: none;
  user-select: none;
}
::highlight(native-editor-selection) { background-color: rgba(148, 163, 184, 0.42); color: inherit; }