@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .prose { @apply text-gray-800 dark:text-gray-200 leading-relaxed; }
  .prose h1 { @apply text-3xl font-bold mt-8 mb-4; scroll-margin-top: 2rem; }
  .prose h2 { @apply text-2xl font-bold mt-6 mb-3; scroll-margin-top: 2rem; }
  .prose h3 { @apply text-xl font-semibold mt-5 mb-2; scroll-margin-top: 2rem; }
  .prose p  { @apply mb-4; }
  .prose ul { @apply list-disc pl-6 mb-4; }
  .prose ol { @apply list-decimal pl-6 mb-4; }
  .prose li { @apply mb-1; }
  .prose blockquote { @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 my-4; }
  .prose pre  { @apply bg-gray-100 dark:bg-gray-800 rounded-lg p-4 my-4 text-sm whitespace-pre-wrap break-words; }
  .prose code { @apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm font-mono break-words; }
  .prose pre code { @apply bg-transparent p-0; }
  .prose table { @apply w-full border-collapse my-4; }
  .prose th { @apply border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-3 py-2 text-left font-semibold; }
  .prose td { @apply border border-gray-300 dark:border-gray-600 px-3 py-2; }
  .prose a  { @apply text-blue-600 dark:text-blue-400 underline; }
  .prose strong { @apply font-bold; }
  .prose em { @apply italic; }
  .prose del { @apply line-through text-gray-500; }
  .prose hr { @apply border-gray-200 dark:border-gray-700 my-6; }
  .prose img { @apply max-w-full rounded-lg my-4; }

  .toc-panel { display: none; }
  @media (min-width: 1400px) { .toc-panel.toc-visible { display: block; } }
  .toc-link { @apply block py-1 px-2 text-sm leading-snug transition-colors duration-150 text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 border-l-2 border-transparent; }
  .toc-link-h3 { @apply pl-5 text-xs; }
  .toc-active { @apply text-blue-600 dark:text-blue-400 border-blue-500 dark:border-blue-400; }
}

@media print {
  nav,
  .document-view-actions,
  .document-terminal-header,
  .toc-panel,
  footer {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .prose {
    color: black !important;
  }

  .prose code,
  .prose pre {
    background: #f3f4f6 !important;
    color: black !important;
  }

  .prose a {
    color: #1d4ed8 !important;
  }

  mark[data-annotation-id] {
    background: none !important;
    border-bottom: none !important;
  }
}
/* ── Developer Mode — Terminal Aesthetic ── */

html.mode-developer {
  --dev-bg: #1a1a1a;
  --dev-bg-deep: #0a0a0a;
  --dev-bg-panel: #071207;
  --dev-fg: #6ee7b7;
  --dev-fg-strong: #4ade80;
  --dev-fg-dim: #4a7a5a;
  --dev-fg-muted: #7dd3a8;
  --dev-border: #1a3a2a;
  --dev-border-strong: #2f7a45;
  --dev-code-bg: #0d1f0d;
  --dev-font: 'Courier New', Courier, monospace;
  --dev-shadow: 0 0 0 1px rgba(74, 222, 128, 0.12), 0 0 32px rgba(74, 222, 128, 0.08);
  color-scheme: dark;
}

/* Dark dev mode: deeper black */
html.mode-developer.dark {
  --dev-bg: #0a0a0a;
}

/* ── Body ── */
html.mode-developer body {
  background-color: var(--dev-bg);
  background-image:
    linear-gradient(rgba(74, 222, 128, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.018) 1px, transparent 1px);
  background-size: 100% 24px, 24px 100%;
  color: var(--dev-fg);
  font-family: var(--dev-font);
}

html.mode-developer ::selection {
  background: var(--dev-fg-strong);
  color: var(--dev-bg-deep);
}

html.mode-developer body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: soft-light;
  opacity: 0.3;
}

/* ── Nav ── */
html.mode-developer nav {
  background-color: var(--dev-bg-deep) !important;
  border-color: var(--dev-border) !important;
  box-shadow: inset 0 -1px 0 rgba(74, 222, 128, 0.12);
}

html.mode-developer nav a,
html.mode-developer nav span,
html.mode-developer nav button {
  color: var(--dev-fg) !important;
  font-family: var(--dev-font);
}

html.mode-developer nav a:hover,
html.mode-developer nav button:hover {
  background-color: var(--dev-code-bg) !important;
  color: var(--dev-fg-strong) !important;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.28);
}

/* ── Nav dropdown panel ── */
html.mode-developer [data-menu-target="panel"] {
  background-color: var(--dev-bg-deep) !important;
  border-color: var(--dev-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

html.mode-developer [data-menu-target="panel"] a,
html.mode-developer [data-menu-target="panel"] button {
  color: var(--dev-fg) !important;
  background-color: transparent !important;
}

html.mode-developer [data-menu-target="panel"] a:hover,
html.mode-developer [data-menu-target="panel"] button:hover {
  background-color: var(--dev-code-bg) !important;
  color: var(--dev-fg-strong) !important;
}

html.mode-developer [data-menu-target="panel"] .border-t {
  border-color: var(--dev-border) !important;
}

html.mode-developer [data-controller~="design-mode"] [data-design-mode-target="panel"] {
  background-color: var(--dev-bg-deep) !important;
  border-color: var(--dev-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

html.mode-developer [data-controller~="design-mode"] [data-design-mode-target="panel"] button {
  background-color: transparent !important;
  color: var(--dev-fg) !important;
  font-family: var(--dev-font);
}

html.mode-developer [data-controller~="design-mode"] [data-design-mode-target="panel"] button:hover {
  background-color: var(--dev-code-bg) !important;
  color: var(--dev-fg-strong) !important;
}

/* ── Main page background ── */
html.mode-developer main {
  background-color: var(--dev-bg);
}

/* ── Headings ── */
html.mode-developer h1,
html.mode-developer h2,
html.mode-developer h3 {
  color: var(--dev-fg-strong);
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.16);
}

html.mode-developer main a {
  color: var(--dev-fg-strong);
  text-underline-offset: 3px;
  text-decoration-color: rgba(74, 222, 128, 0.55);
}

html.mode-developer main a:hover {
  color: #86efac;
  text-decoration-color: currentColor;
}

html.mode-developer .document-view-action {
  background: transparent !important;
  border: 1px solid var(--dev-border-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--dev-fg) !important;
  font-family: var(--dev-font) !important;
  line-height: 1.2;
}

html.mode-developer .document-view-action:hover {
  background: var(--dev-code-bg) !important;
  border-color: var(--dev-fg-strong) !important;
  color: #86efac !important;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.22);
}

html.mode-developer .document-view-actions {
  align-items: stretch;
}

/* ── Borders ── */
html.mode-developer [class*="border-gray"] {
  border-color: var(--dev-border) !important;
}

/* ── Muted text ── */
html.mode-developer [class*="text-gray-4"],
html.mode-developer [class*="text-gray-5"] {
  color: var(--dev-fg-dim) !important;
}

/* ── Body/heading text (dark grays become readable green) ── */
html.mode-developer [class*="text-gray-6"],
html.mode-developer [class*="text-gray-7"],
html.mode-developer [class*="text-gray-8"],
html.mode-developer [class*="text-gray-9"] {
  color: var(--dev-fg) !important;
}

/* ── Footer background ── */
html.mode-developer body > footer {
  background-color: var(--dev-bg-deep) !important;
  border-color: var(--dev-border) !important;
}

/* ── Primary buttons (bg-gray-900) ── */
html.mode-developer [class~="bg-gray-900"] {
  background-color: transparent !important;
  border: 1px solid var(--dev-fg-strong) !important;
  color: var(--dev-fg-strong) !important;
  box-shadow: var(--dev-shadow);
}

html.mode-developer .google-sign-in-button {
  background-color: transparent !important;
  border: 1px solid var(--dev-fg-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--dev-fg-strong) !important;
  font-family: var(--dev-font) !important;
  letter-spacing: 0 !important;
}

html.mode-developer .google-sign-in-button:hover {
  background-color: var(--dev-code-bg) !important;
  color: #86efac !important;
}

html.mode-developer .google-sign-in-button svg {
  filter: grayscale(1);
  opacity: 0.75;
}

/* ── Cards / bordered boxes ── */
html.mode-developer [class*="rounded-lg"],
html.mode-developer [class*="rounded-xl"] {
  border-radius: 0 !important;
}

/* ── Code blocks ── */
html.mode-developer pre,
html.mode-developer code {
  background-color: var(--dev-code-bg) !important;
  border: 1px solid var(--dev-border) !important;
  color: #86efac !important;
}

/* ── Input fields ── */
html.mode-developer input,
html.mode-developer textarea,
html.mode-developer select {
  background-color: var(--dev-code-bg) !important;
  border-color: var(--dev-border) !important;
  color: var(--dev-fg) !important;
  font-family: var(--dev-font) !important;
  border-radius: 0 !important;
  caret-color: var(--dev-fg-strong);
}

html.mode-developer input:focus,
html.mode-developer textarea:focus {
  outline-color: var(--dev-fg-strong) !important;
  border-color: var(--dev-fg-strong) !important;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.16) !important;
}

html.mode-developer label {
  color: var(--dev-fg-muted) !important;
}

html.mode-developer button,
html.mode-developer input[type="submit"] {
  font-family: var(--dev-font);
}

/* ── Dividers ── */
html.mode-developer [class*="divide-gray"] > * + * {
  border-color: var(--dev-border) !important;
}

/* ── Show/hide helpers ── */
/* Note: dev-only uses display:block — only use on block-level containers, not flex/grid wrappers */
.dev-only { display: none; }
html.mode-developer .dev-only { display: block; }

html.mode-developer .dev-hidden { display: none !important; }


/* ── Toasts ── */
html.mode-developer [data-controller~="toast"] {
  background-color: var(--dev-bg-deep) !important;
  border-color: var(--dev-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.15), 0 8px 24px rgba(0, 0, 0, 0.55) !important;
  color: var(--dev-fg) !important;
  font-family: var(--dev-font);
}

html.mode-developer [data-controller~="toast"] p,
html.mode-developer [data-controller~="toast"] button {
  color: var(--dev-fg) !important;
  font-family: var(--dev-font);
}

html.mode-developer [data-controller~="toast"] p:first-child {
  color: var(--dev-fg-strong) !important;
}

html.mode-developer [data-controller~="toast"] button:hover {
  background-color: var(--dev-code-bg) !important;
  color: var(--dev-fg-strong) !important;
}

/* ── Blinking cursor ── */
@keyframes dev-blink { 50% { opacity: 0; } }
.dev-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: currentColor;
  vertical-align: text-bottom;
  animation: dev-blink 1s step-end infinite;
}

/* ── Reusable terminal components ── */
.dev-terminal-shell {
  border: 1px solid var(--dev-border-strong);
  background: var(--dev-bg-panel);
  box-shadow: var(--dev-shadow);
  color: var(--dev-fg);
  overflow: hidden;
}

.dev-terminal-bar {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--dev-border);
  background: var(--dev-bg-deep);
  padding: 9px 14px;
  color: var(--dev-fg-dim);
  font-size: 12px;
  line-height: 1.2;
}

.dev-terminal-title {
  color: var(--dev-fg-strong);
  font-weight: 700;
  text-transform: uppercase;
}

.dev-terminal-status {
  color: var(--dev-fg-dim);
  white-space: nowrap;
}

.dev-terminal-body {
  padding: 24px;
}

.dev-terminal-ascii {
  color: var(--dev-fg-strong);
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 22px;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.2);
  user-select: none;
}

.dev-terminal-line {
  margin-bottom: 8px;
  color: var(--dev-fg);
  line-height: 1.55;
}

.dev-prompt {
  color: var(--dev-fg-strong);
  font-weight: 700;
}

.dev-command {
  color: #e2e8f0;
  margin-left: 8px;
}

.dev-output {
  color: var(--dev-fg);
  line-height: 1.65;
}

.dev-output-muted {
  color: var(--dev-fg-dim);
  font-size: 13px;
  line-height: 1.65;
}

.dev-terminal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 32px;
  border-top: 1px solid var(--dev-border);
  padding-top: 24px;
}

.dev-panel {
  border: 1px solid var(--dev-border);
  background: rgba(13, 31, 13, 0.72);
  padding: 14px;
}

.dev-panel-title {
  color: var(--dev-fg-strong);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.dev-panel-copy {
  color: var(--dev-fg-dim);
  font-size: 11px;
  line-height: 1.5;
}

.dev-terminal-card {
  margin-top: 32px;
  border: 1px solid var(--dev-border);
  background: var(--dev-bg-panel);
}

.dev-terminal-card-header {
  border-bottom: 1px solid var(--dev-border);
  padding: 14px 16px;
}

.dev-terminal-card-title {
  color: var(--dev-fg-strong);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

.dev-terminal-card-copy {
  color: var(--dev-fg-dim);
  font-size: 11px;
}

.dev-terminal-code {
  background: var(--dev-code-bg);
  padding: 14px 16px;
}

.dev-terminal-code pre,
.dev-terminal-code code {
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  color: #86efac !important;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.dev-terminal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--dev-border);
  background: var(--dev-code-bg);
  padding: 10px 16px;
}

.dev-terminal-footer-note {
  color: var(--dev-fg);
  font-size: 11px;
  line-height: 1.4;
}

.dev-terminal-link {
  color: var(--dev-fg-strong);
  font-size: 11px;
  white-space: nowrap;
}

.dev-terminal-link-form {
  margin: 0;
}

.dev-terminal-link-button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.dev-terminal-link-button:hover {
  color: #86efac;
  text-decoration: underline;
}

.dev-terminal-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--dev-fg-strong);
  background: transparent;
  color: var(--dev-fg-strong);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 10px 18px;
  text-transform: lowercase;
  box-shadow: var(--dev-shadow);
}

.dev-terminal-button:hover {
  background: var(--dev-code-bg);
  color: #86efac;
}

.dev-command-block {
  margin-top: 24px;
}

html.mode-developer .document-terminal-header {
  display: block;
}

.document-terminal-header {
  display: none;
  border: 1px solid var(--dev-border);
  border-bottom: 0;
  background: var(--dev-bg-deep);
  color: var(--dev-fg-dim);
  font-family: var(--dev-font);
  font-size: 12px;
  padding: 10px 14px;
}

html.mode-developer #document-content {
  border: 1px solid var(--dev-border);
  background: rgba(7, 18, 7, 0.7);
  padding: 24px;
  box-shadow: var(--dev-shadow);
}

/* ── Document editor ── */
html.mode-developer .document-editor {
  background: var(--dev-bg-panel);
  border-top: 1px solid var(--dev-border);
  color: #d1fae5;
}

html.mode-developer .dev-editor-appbar {
  align-items: center;
  background: var(--dev-bg-deep);
  border-bottom: 1px solid var(--dev-border);
  box-shadow: inset 0 -1px 0 rgba(74, 222, 128, 0.12);
  color: var(--dev-fg-dim);
  display: flex;
  flex: none;
  font-family: var(--dev-font);
  font-size: 12px;
  gap: 8px;
  min-height: 38px;
  padding: 9px 20px;
}

html.mode-developer .dev-editor-appbar-status {
  color: var(--dev-fg-muted);
  margin-left: auto;
  white-space: nowrap;
}

html.mode-developer .document-editor-titlebar {
  background: rgba(7, 18, 7, 0.92);
  border-color: var(--dev-border) !important;
  padding-bottom: 14px;
  padding-top: 14px;
}

html.mode-developer .document-title-input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #d1fae5 !important;
  font-family: var(--dev-font) !important;
  letter-spacing: 0;
}

html.mode-developer .document-title-input::placeholder {
  color: var(--dev-fg-dim);
}

html.mode-developer .document-editor-split {
  background: var(--dev-bg-deep);
}

html.mode-developer .document-editor-split > * + * {
  border-color: var(--dev-border) !important;
}

html.mode-developer .document-editor-pane {
  background: var(--dev-bg-panel);
  min-width: 0;
}

html.mode-developer .document-editor-pane-header {
  display: none;
}

html.mode-developer .document-editor-source {
  background: #071207 !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #d1fae5 !important;
  font-size: 15px;
  line-height: 1.65;
  padding: 24px;
  tab-size: 2;
}

html.mode-developer .document-editor-source::placeholder {
  color: rgba(125, 211, 168, 0.55);
}

html.mode-developer .document-editor-preview {
  background: #071207 !important;
  color: #d1fae5;
  font-family: var(--dev-font);
  font-size: 15px;
  line-height: 1.65;
  padding: 24px;
}

html.mode-developer .document-editor-preview p,
html.mode-developer .document-editor-preview li {
  color: #d1fae5;
}

html.mode-developer .document-editor-preview h1,
html.mode-developer .document-editor-preview h2,
html.mode-developer .document-editor-preview h3 {
  color: var(--dev-fg-strong);
}

html.mode-developer .document-editor-preview a {
  color: #86efac;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.mode-developer .document-editor-preview pre,
html.mode-developer .document-editor-preview code {
  background: var(--dev-code-bg) !important;
  border-color: var(--dev-border) !important;
  color: #bbf7d0 !important;
}

html.mode-developer .document-editor-toolbar {
  background: var(--dev-bg-deep) !important;
  border-color: var(--dev-border) !important;
  color: var(--dev-fg-muted);
  gap: 10px 18px;
}

html.mode-developer .document-editor-toolbar label,
html.mode-developer .document-editor-toolbar button,
html.mode-developer .document-editor-toolbar a,
html.mode-developer .document-editor-toolbar select,
html.mode-developer .document-editor-toolbar input {
  font-family: var(--dev-font) !important;
}

html.mode-developer .document-editor-toolbar label {
  color: var(--dev-fg-muted) !important;
}

html.mode-developer .document-editor-toolbar select,
html.mode-developer .document-editor-toolbar input[type="date"],
html.mode-developer .document-editor-toolbar [data-expires-target="button"] {
  background: var(--dev-code-bg) !important;
  border-color: var(--dev-border-strong) !important;
  color: #d1fae5 !important;
}

html.mode-developer .document-editor-toolbar [data-editor-target="statusIndicator"] {
  color: var(--dev-fg-muted) !important;
}

html.mode-developer .document-editor-toolbar [data-editor-target="statusIndicator"]::before {
  content: "status: ";
}

html.mode-developer .document-editor-toolbar [data-editor-target="statusIndicator"].text-red-500 {
  color: #f87171 !important;
}

html.mode-developer .visibility-email-modal {
  background: rgba(7, 18, 7, 0.82) !important;
  backdrop-filter: blur(1px);
}

html.mode-developer .visibility-email-dialog {
  background: var(--dev-bg-panel) !important;
  border: 1px solid var(--dev-border-strong) !important;
  border-radius: 0 !important;
  box-shadow: var(--dev-shadow) !important;
  color: #d1fae5 !important;
  max-width: 32rem;
}

html.mode-developer .visibility-email-title {
  color: var(--dev-fg-strong) !important;
  font-family: var(--dev-font);
  font-size: 14px;
  letter-spacing: 0;
}

html.mode-developer .visibility-email-copy {
  color: var(--dev-fg-dim) !important;
  font-family: var(--dev-font);
  line-height: 1.6;
}

html.mode-developer .visibility-email-copy em {
  color: var(--dev-fg-strong);
  font-style: normal;
}

html.mode-developer .visibility-email-error {
  border-top: 1px solid rgba(248, 113, 113, 0.35);
  color: #fca5a5;
  font-family: var(--dev-font);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 12px;
  padding-top: 10px;
}

html.mode-developer .visibility-email-dialog textarea {
  background: var(--dev-code-bg) !important;
  border: 1px solid var(--dev-border-strong) !important;
  border-radius: 0 !important;
  color: #d1fae5 !important;
  font-family: var(--dev-font) !important;
  font-size: 14px;
  line-height: 1.6;
  min-height: 10rem;
  padding: 14px !important;
  resize: vertical;
}

html.mode-developer .visibility-email-dialog textarea::placeholder {
  color: rgba(125, 211, 168, 0.55);
}

html.mode-developer .visibility-email-dialog textarea:focus {
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.16) !important;
}

html.mode-developer .visibility-email-actions {
  border-top: 1px solid var(--dev-border);
  margin-top: 16px;
  padding-top: 14px;
}

html.mode-developer .visibility-email-cancel,
html.mode-developer .visibility-email-confirm {
  border-radius: 0 !important;
  font-family: var(--dev-font);
  letter-spacing: 0;
}

html.mode-developer .visibility-email-cancel {
  background: transparent !important;
  border-color: var(--dev-border-strong) !important;
  color: var(--dev-fg) !important;
}

html.mode-developer .visibility-email-cancel:hover {
  background: var(--dev-code-bg) !important;
  color: #d1fae5 !important;
}

html.mode-developer .visibility-email-confirm {
  background: var(--dev-code-bg) !important;
  border: 1px solid var(--dev-fg-strong) !important;
  color: #d1fae5 !important;
}

html.mode-developer .visibility-email-confirm:hover {
  background: rgba(74, 222, 128, 0.12) !important;
  color: #86efac !important;
}

html.mode-developer .visibility-email-confirm:disabled {
  background: rgba(13, 31, 13, 0.55) !important;
  border-color: var(--dev-border) !important;
  box-shadow: none !important;
  color: rgba(209, 250, 229, 0.45) !important;
  cursor: not-allowed !important;
  text-shadow: none !important;
}

@media (max-width: 640px) {
  .dev-terminal-body {
    padding: 18px;
  }

  .dev-terminal-status {
    display: none;
  }

  .dev-terminal-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  html.mode-developer .document-editor-split {
    grid-template-columns: 1fr;
  }

  html.mode-developer .document-editor-split > * + * {
    border-left: 0;
    border-top: 1px solid var(--dev-border);
  }

  html.mode-developer .document-editor-source,
  html.mode-developer .document-editor-preview {
    padding: 18px;
  }
}

/* ── Prose (document reading view) ── */
html.mode-developer .prose {
  color: var(--dev-fg);
  font-family: var(--dev-font);
}

html.mode-developer .prose h1,
html.mode-developer .prose h2,
html.mode-developer .prose h3 {
  color: var(--dev-fg-strong);
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.15);
}

html.mode-developer .prose p,
html.mode-developer .prose li {
  color: var(--dev-fg);
}

html.mode-developer .prose a {
  color: var(--dev-fg-strong);
  text-decoration: underline;
}

html.mode-developer .prose a:hover {
  color: #86efac;
}

html.mode-developer .prose strong {
  color: var(--dev-fg-strong);
}

html.mode-developer .prose em {
  color: var(--dev-fg);
}

html.mode-developer .prose blockquote {
  border-left-color: var(--dev-border);
  color: var(--dev-fg-dim);
  position: relative;
  padding-left: 1.5em;
}

html.mode-developer .prose blockquote::before {
  content: ">";
  color: var(--dev-fg-strong);
  left: 0;
  position: absolute;
  top: 0;
}

html.mode-developer .prose hr {
  border-color: var(--dev-border);
}

html.mode-developer .prose code {
  background-color: var(--dev-code-bg) !important;
  border: 1px solid var(--dev-border) !important;
  color: #86efac !important;
  border-radius: 0 !important;
}

html.mode-developer .prose pre {
  background-color: var(--dev-code-bg) !important;
  border: 1px solid var(--dev-border) !important;
  border-radius: 0 !important;
}

html.mode-developer .prose pre code {
  border: none !important;
  background: transparent !important;
}

html.mode-developer .prose table th {
  background-color: var(--dev-code-bg);
  border-color: var(--dev-border);
  color: var(--dev-fg-strong);
}

html.mode-developer .prose table td {
  border-color: var(--dev-border);
  color: var(--dev-fg);
}

html.mode-developer .prose del {
  color: var(--dev-fg-dim);
}

html.mode-developer .prose img {
  border-radius: 0 !important;
  border: 1px solid var(--dev-border);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */