:root{
  --tm-bg: ;
  --tm-fg: ;
  --tm-card: ;
  --tm-muted: ;
  --tm-accent: ;
  --tm-editor-font: 16px;
  --tm-editor-line: 1.55;
  --tm-editor-max: 75ch;
}
body{
  background: var(--tm-bg, var(--bs-body-bg));
  color: var(--tm-fg, var(--bs-body-color));
}
.card{ background: var(--tm-card, var(--bs-body-bg)); }
.text-secondary, .text-muted{ color: var(--tm-muted, var(--bs-secondary-color)) !important; }
.btn-primary{
  background-color: var(--tm-accent, var(--bs-primary)) !important;
  border-color: var(--tm-accent, var(--bs-primary)) !important;
}
.editor-textarea{
  font-size: var(--tm-editor-font);
  line-height: var(--tm-editor-line);
}
.editor-pane{ max-width: var(--tm-editor-max); }

:root {
  --editor-max: 980px;
}

.editor-shell {
  min-height: calc(100vh - 56px);
}

.editor-textarea {
  min-height: 55vh;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  resize: vertical;
}

@media (max-width: 576px) {
  .editor-textarea {
    min-height: 62vh;
  }
}

/* Slightly more app-like feel on mobile */
body {
  -webkit-tap-highlight-color: transparent;
}

.navbar-brand {
  letter-spacing: 0.2px;
}

/* Make editor feel consistent across themes */
.editor-textarea {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Slightly larger tap targets on mobile */
@media (max-width: 576px) {
  .btn, .form-control {
    min-height: 44px;
  }
}

/* === Textomatic sticky toolbar + focus mode === */
.editor-toolbar {
  z-index: 1030; /* above content, below modals */
}

.format-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.format-toolbar .btn {
  padding: .25rem .5rem;
}

.format-toolbar .btn-group .btn {
  padding: .25rem .55rem;
}

/* Focus mode: hide navbar */
body.focus-mode nav.navbar {
  display: none !important;
}

body.focus-mode .editor-shell {
  min-height: 100vh;
}

/* Typewriter effect marker */
.editor-textarea.typewriter {}

/* Editor width helper */
.editor-container {
  max-width: var(--editor-max);
  margin: 0 auto;
}

/* Mobile: better tap targets */
@media (max-width: 576px) {
  .format-toolbar .btn,
  .format-toolbar .btn-group .btn {
    min-height: 44px;
    padding: .35rem .65rem;
  }
}

mark {
  padding: 0 .12rem;
  border-radius: .25rem;
}

/* Markdown preview split view */
.editor-split {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .editor-split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .preview-pane {
    position: sticky;
    top: 132px; /* below toolbars */
    align-self: start;
    max-height: calc(100vh - 160px);
    overflow: auto;
  }
}

.preview-content h1 { font-size: 1.6rem; margin-top: .5rem; }
.preview-content h2 { font-size: 1.3rem; margin-top: .75rem; }
.preview-content h3 { font-size: 1.1rem; margin-top: .75rem; }
.preview-content pre { white-space: pre-wrap; }
.preview-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.preview-content ul, .preview-content ol { padding-left: 1.25rem; }
.preview-content .task { list-style: none; padding-left: 0; }
.preview-content .task li { display: flex; gap: .5rem; align-items: flex-start; }
.preview-content input[type="checkbox"] { margin-top: .25rem; }

/* Typewriter mode: centres typing */
body.typewriter-on .editor-textarea{
  scroll-behavior: smooth;
}