/*
 * Rendered Markdown, plus the switch that shows it.
 *
 * Global rather than a component's scoped stylesheet: the preview's elements are
 * built by Markdig and handed over as a MarkupString, so Blazor never stamps its
 * scope attribute on them and a .razor.css file would match nothing.
 *
 * Every value comes from tokens.css. There is not an inline style attribute
 * anywhere in here or in the markup, because the app is served under a strict
 * style-src 'self'.
 */

/* ---------------------------------------------------------------- the switch */

.editor-modes {
  display: inline-flex;
  gap: var(--space-1);
  align-self: flex-start;
  padding: 2px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

/* The chosen side is filled rather than merely darker, so the pair reads as one
   control with a position rather than as two buttons of unequal enthusiasm. */
.editor-modes .is-current {
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------- prose */

.note-prose-empty {
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

/*
 * The rest of the app is dense on purpose: rows a person scans many times a day.
 * This is the one region that is read a line at a time, so it gets a measure and
 * the space between lines that goes with it.
 */
.note-prose {
  max-width: 68ch;
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.7;
  overflow-wrap: break-word;
}

/* Space belongs between blocks, never above the first or below the last, so the
   preview and the textarea it replaces start on the same line. */
.note-prose > * {
  margin: 0;
}

.note-prose > * + * {
  margin-top: var(--space-4);
}

.note-prose h1,
.note-prose h2,
.note-prose h3,
.note-prose h4,
.note-prose h5,
.note-prose h6 {
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}

/* A heading opening a section wants more air above it than below. */
.note-prose > :is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: var(--space-2);
}

.note-prose > * + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: var(--space-8);
}

/* Two steps below the note title, which is --text-2xl: a heading inside a note is
   a heading within the note, not a rival to its name. */
.note-prose h1 { font-size: var(--text-xl); }
.note-prose h2 { font-size: var(--text-lg); }
.note-prose h3 { font-size: var(--text-base); }

.note-prose h4,
.note-prose h5,
.note-prose h6 {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.note-prose a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.note-prose a:hover {
  color: var(--primary-hover);
}

.note-prose strong {
  font-weight: var(--weight-semibold);
}

.note-prose ul,
.note-prose ol {
  padding-left: var(--space-6);
}

.note-prose li + li {
  margin-top: var(--space-1);
}

/* A list nested in a list is a continuation of its parent item, not a new block. */
.note-prose li > ul,
.note-prose li > ol {
  margin-top: var(--space-1);
}

/* Task lists carry their own bullet in the checkbox. */
.note-prose li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: calc(var(--space-6) * -1);
  padding-left: var(--space-6);
}

.note-prose input[type="checkbox"] {
  margin-right: var(--space-2);
  accent-color: var(--primary);
}

.note-prose blockquote {
  border-left: 2px solid var(--border-strong);
  padding-left: var(--space-4);
  color: var(--ink-muted);
}

.note-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

.note-prose pre {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  /* A code block sets its own line length; it scrolls rather than wrapping, so a
     pasted command stays one command. */
  overflow-x: auto;
}

.note-prose pre code {
  background: none;
  padding: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.note-prose hr {
  border: none;
  border-top: 1px solid var(--border);
}

.note-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* A table can be wider than the measure; it scrolls inside its own box so the
   page never does. */
.note-prose table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.note-prose th,
.note-prose td {
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-3);
  text-align: left;
}

.note-prose th {
  background: var(--surface-2);
  font-weight: var(--weight-medium);
}