/* ── blocks ──
 * Block base, text blocks with their rendered markdown layer, and code blocks.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Block base ────────────────────────────────────── */
.block {
  width: 100%;
  position: relative;
  border-radius: var(--radius);
  transition: background 0.15s var(--ease);
}
/* Consecutive text blocks must read as one document, not a stack of cards, so no
   inter-block gap. Code blocks re-introduce their own margin below — they are a
   genuinely separate object and should still sit apart. */
.block + .block { margin-top: 0; }

@media (hover: hover) {
  /* Only code blocks get a hover tint. Tinting a text block advertised a boundary
     that shouldn't exist once prose flows continuously (issue #30 follow-on). */
  .code-block:hover { background: color-mix(in srgb, var(--fg) 2.5%, transparent); }
}

/* hover gutter controls */
/* Right of the row, not left. The buffer hugs the left edge vim-style, so a gutter
   at `left: -104px` sat between the line numbers and the text — reading as part of
   the document rather than as controls acting on it. The empty space is all on the
   right, which is also where the eye goes looking for row actions (the sidebar's
   rename/delete live there too). */
.gutter {
  position: absolute;
  right: -104px;
  /* Aligned to the first line box now that .block-content has no top padding;
     6px was measured against the old 8px-padded block. */
  top: -1px;
  display: flex;
  gap: 2px;
  opacity: 0;
  /* Slides outward, away from the text — mirrored from the old left-hand version,
     which started shifted right for the same reason. */
  transform: translateX(-4px);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  z-index: 5;
}
.block:hover .gutter,
.gutter:hover { opacity: 1; transform: none; }
.gutter button {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  background: var(--bg-raised);
  color: var(--fg-dim);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.gutter button:hover { color: var(--fg); border-color: var(--border); }
.gutter button[data-act="del"]:hover { color: var(--danger); border-color: var(--danger); }
@media (hover: none) { .gutter { display: none; } }
/* Below 820px the reserved right lane collapses (see #document-container above), so
   the controls tuck inside the column's right edge instead of hanging past it and
   dragging a horizontal scrollbar onto the note. They keep their raised background,
   so they stay readable over the line they overlap — and they only appear on hover.
   This has to live AFTER the base .gutter rule: a media query adds no specificity,
   so declaring it up beside the padding change lost to the `right: -104px` below it. */
@media (max-width: 820px) { .gutter { right: 4px; } }

/* touch toolbar (mobile) */
.touch-tools {
  display: none;
  gap: 4px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  margin: 0 0 6px 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  width: max-content;
}
.touch-tools button {
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--fg-dim);
  font-size: 14px;
  padding: 0 8px;
}
.touch-tools button:active { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }
.touch-tools button[data-act="del"] { color: var(--danger); }
@media (hover: none) {
  .block.active .touch-tools { display: inline-flex; }
}

/* ── Text block ────────────────────────────────────── */
.text-block .block-content {
  background: transparent;
  color: var(--fg);
  /* No vertical padding: with it, consecutive blocks sat 16px apart while lines
     inside a block sat at line-height — the visual tell of a block editor. */
  padding: 0 16px;
  min-height: calc(var(--font-size) * var(--line-height));
  white-space: pre-wrap;
  word-wrap: break-word;
  outline: none;
  caret-color: var(--cursor-color);
  border: none;
}

/* placeholder only on a fresh note (single empty block), not every empty block */
.text-block:only-child .block-content:empty::before {
  content: 'let ideas flow...';
  color: var(--fg);
  opacity: 0.22;
  pointer-events: none;
}

/* rendered markdown layer — shown when block not being edited */
.md-layer {
  display: none;
  /* Must match .block-content exactly — the two layers swap in place, and any
     difference makes text jump when a block gains or loses focus. */
  padding: 0 16px;
  min-height: calc(var(--font-size) * var(--line-height));
  cursor: text;
  word-wrap: break-word;
}
.text-block.has-md:not(.editing) .md-layer { display: block; }
.text-block.has-md:not(.editing) .block-content { display: none; }

.md-mark { color: var(--fg-faint); font-weight: 400; }
.md-h { font-weight: 600; color: color-mix(in srgb, var(--fg) 92%, white); letter-spacing: -0.015em; }
/* Headings keep their larger glyphs but occupy exactly ONE base line, so the line
   box is identical to the raw text the editable shows in its place. line-height is
   the base 1.6 divided by each font-size (1.6/1.5, 1.6/1.25, 1.6/1.1) and the margins
   are gone, because either would make the rendered line taller than the editable one
   and the block would resize as it gained or lost focus.

   It also keeps every line the same height as its number in the gutter — in an editor
   that shows line numbers, a heading that is 1.45 rows tall puts every number below it
   slightly out of step with the line it labels. */
.md-h1 { font-size: 1.5em;  line-height: calc(var(--line-height) / 1.5);  margin: 0; }
.md-h2 { font-size: 1.25em; line-height: calc(var(--line-height) / 1.25); margin: 0; }
.md-h3 { font-size: 1.1em;  line-height: calc(var(--line-height) / 1.1);  margin: 0; }
.md-p { min-height: 1.6em; }
.md-li { padding-left: 4px; }
.md-li .md-mark { color: var(--accent); }
.md-divider {
  height: 1.6em;
  position: relative;
}
.md-divider::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--border);
}
.md-check { display: flex; align-items: baseline; gap: 9px; }
.md-check .cb {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 9px;
  color: var(--accent);
  cursor: pointer;
  transform: translateY(2px);
  transition: border-color 0.15s;
}
.md-check .cb:hover { border-color: var(--accent); }
.md-check.done .cb { background: var(--accent-soft); border-color: var(--accent-line); }
.md-check.done { color: var(--fg-faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--fg) 25%, transparent); }
.md-img {
  display: flex;
  padding: 4px 0;
}
.md-img.left   { justify-content: flex-start; }
.md-img.center { justify-content: center; }
.md-img.right  { justify-content: flex-end; }
.md-img .img-box {
  position: relative;
  display: inline-block;
  max-width: 100%;
  z-index: 2;               /* dragged images ride above neighboring text */
}
.md-img.free { overflow: visible; }
.md-img img {
  display: block;
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  cursor: grab;
  user-select: none;
}
.md-img img.dragging { cursor: grabbing; opacity: 0.85; }
.md-img .img-handle {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--accent);
  border: 2px solid var(--bg-page);
  cursor: nwse-resize;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.md-img .img-box:hover .img-handle { opacity: 1; }
.md-img .img-rotate {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 10px;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.md-img .img-box:hover .img-rotate { opacity: 1; }
@media (hover: none) { .md-img .img-handle, .md-img .img-rotate { opacity: 1; } }

.md-code {
  background: var(--bg-code);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.92em;
  color: var(--accent);
}
strong { color: color-mix(in srgb, var(--fg) 92%, white); }
.md-layer del { color: var(--fg-faint); }
.md-layer mark, .cmd-ico.hl-yellow, .cmd-ico.hl-green, .cmd-ico.hl-red, .cmd-ico.hl-blue {
  color: inherit;
  padding: 0 3px;
  border-radius: 3px;
}
.hl-yellow { background: color-mix(in srgb, #e5c07b 30%, transparent) !important; }
.hl-green  { background: color-mix(in srgb, #4ec94e 25%, transparent) !important; }
.hl-red    { background: color-mix(in srgb, #e06c75 30%, transparent) !important; }
.hl-blue   { background: color-mix(in srgb, #61afef 30%, transparent) !important; }

/* ── Code block ────────────────────────────────────── */
.code-block {
  margin: 10px 0;
  background: var(--bg-code);
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--fg) 1.5%, transparent);
  position: relative;
  z-index: 2;
}
.lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: none;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.lang-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.lang-badge .caret { opacity: 0.6; margin-left: 1px; }
.line-count { font-size: 10px; color: var(--fg-faint); }
.code-head .head-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.code-block:hover .head-actions,
.code-block.active .head-actions { opacity: 1; }
.code-head .head-actions button {
  font-size: 10px;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.code-head .head-actions button:hover { color: var(--fg); border-color: var(--border); }

.code-body { position: relative; }

/* Two-layer: highlight behind, contenteditable in front.
   The two must lay text out IDENTICALLY — the front layer is transparent and
   contributes only the caret, so any metric that differs between them shows up as a
   caret parked away from the glyph it belongs to. */
.hljs-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px 14px;
  margin: 0;
  /* Load-bearing, and easy to lose: this is a <pre>, and the UA stylesheet sets
     `pre { font-family: monospace }`. That default beats inheritance, so without
     this line the highlight layer renders in the browser's stock monospace while the
     editable above it uses the app font — two different sets of glyph metrics under
     one line-height. The caret sat 1.5px above the character it marked, and the
     `.hljs-layer code { font-family: inherit }` below faithfully inherited the wrong
     font, which is what made it look like the font WAS being applied. */
  font-family: inherit;
  font-size: calc(var(--font-size) - 1px);
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
  pointer-events: none;
  background: transparent;
  z-index: 0;
  overflow: hidden;
}

.hljs-layer code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: transparent;
  padding: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* The highlight layer wears hljs's own class so each theme's base `.hljs { color }`
   reaches the tokens hljs does not classify. That class also drags in the theme's
   chrome, which has to be undone here — and the selector has to out-specify what the
   theme actually uses, which is NOT plain `.hljs`:

     pre code.hljs { padding: 1em; … }   (0,1,2)  ← the one that bites
     code.hljs     { padding: 3px 5px }  (0,1,1)
     .hljs         { color; background } (0,1,0)  ← the one we want

   `.hljs-layer code` is only (0,1,1), so `pre code.hljs` beat it and the padding came
   back — which is not cosmetic: it shifts this layer's text out from under the
   transparent editable and puts the caret off its glyph again, the very bug the
   font-family line above fixes. Two classes plus the element is (0,2,1) and clears
   all three. `color` is deliberately left alone; inheriting it is the entire point. */
.hljs-layer code.hljs { background: transparent; padding: 0; }

.code-block .block-content {
  position: relative;
  z-index: 1;
  background: transparent;
  color: transparent;
  caret-color: var(--cursor-color);
  padding: 10px 14px;
  min-height: 2.6em;
  font-size: calc(var(--font-size) - 1px);
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  overflow-x: hidden;
  outline: none;
}