/* CardNote template: experimental copy of the live .card/.card__* rules (style.css), under its own
   cardNote/cardNote__* namespace so changes made here never touch the real card. The head/toggle/
   body shell below is its own copy. The body's content (cardNote__preview/__noteclone) is NOT its
   own copy — it reuses the real .note/.lines/.block rules from style.css directly (same markup the
   editor uses, built via buildLine() in cardNote.js), with every size below overridden to fixed,
   static values (the card's own compact type scale, picked across several rounds of comparing a
   geometric scale copy, the real card, and this static-sizing version side by side) — no scaling
   involved, so the note's structure (indents/markers/table proportions) stays a true copy of the
   editor's own markup while the text renders at the card's fixed sizes. */

.cardNote {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: 8px;
  background: var(--card-bg, var(--bg-secondary));
  color: var(--primary);
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* this card's head/title stay at their closed-state values even .is-open — unlike the real card
   (style.css), which shifts the title (padding-bottom 10→4px, line-height 20→16px) and lets it wrap
   to a 2nd line when opened: that shift is the "jump" this card must not have. */
.cardNote.is-open .cardNote__head {
  padding-bottom: 10px;
  line-height: 20px;
}

.cardNote.is-open .cardNote__title {
  white-space: nowrap;
  overflow-wrap: normal;
}

.cardNote__head {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 10px 36px 10px 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-align: left;
}

.cardNote__title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cardNote__title[data-empty] {
  color: var(--primary);
}

.cardNote__title[data-fmt="h1"] {
  color: var(--primary);
}

.cardNote__title[data-fmt="h2"] {
  color: var(--primary);
}

.cardNote__toggle {
  position: absolute;
  top: 1px;
  right: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
}

.cardNote__chevron {
  width: 6px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url(/icons/chevron.svg) center / contain no-repeat;
  mask: url(/icons/chevron.svg) center / contain no-repeat;
  transition: transform 0.3s ease;
}

.cardNote.is-open .cardNote__chevron {
  transform: rotate(-90deg);
}

.cardNote__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.cardNote.is-open .cardNote__more {
  grid-template-rows: 1fr;
}

.cardNote__inner {
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

/* the preview is a copy of the real note (.note/.lines/.block, styled by style.css itself — same
   markup the editor uses, built via buildLine() from noteEditor.js), clamped to CARD_MAX_LINES
   (cardNote.js's clampLines()) instead of growing the card to fit, same as the card's own current
   behaviour; sized to its content on its own (normal flow, no JS involved). The margin's insets
   mirror the old .card__text padding, moved to margin. */
.cardNote__preview {
  position: relative;
  overflow: hidden;
  margin: 0 8px 8px 12px;
}

/* set by clampLines() (cardNote.js) on whichever .block lines fall past CARD_MAX_LINES — scoped to
   the clone so this never affects a .block anywhere else .is-clipped might be reused. */
.cardNote__noteclone .block.is-clipped {
  display: none;
}

/* the 6-dot drag handle doesn't belong on a non-interactive preview (nothing here is draggable) —
   display:none removes it from the flex row entirely, so .note__line's own margin-left becomes the
   line's whole left inset instead of starting after the handle's 24px box. */
.cardNote__noteclone .handle {
  display: none;
}

/* width: fills .cardNote__preview, in normal flow (no transform, no JS resize math). pointer-events:
   decorative preview only — the real controls (fold/drag) live in the editor, this card can't fold
   or reorder anything, so its .handle/.fold buttons (real, focusable markup reused as-is) must not
   intercept clicks. Higher specificity than style.css's own .block[data-fmt] .note__line rules (2
   classes here vs. 1 there) wins without !important. */
.cardNote__noteclone {
  width: 100%;
  pointer-events: none;
}

/* .block's own align-items:flex-start (style.css) relies on .mark/.note__line being the same
   height, true in the editor (both 24px) — no longer true here once .note__line's own min-height is
   fixed below to a different, smaller value while .mark keeps its own fixed (but also different)
   size: flex-start would pin the shorter one to the top of the taller box instead of centring it.
   padding: style.css's own .block{padding:2px 0} is replaced here by .lines' own gap below (0, see
   there) as the single source of spacing between lines — matches how the real card does it (its own
   .card__line has no padding either, just margin-top between lines). */
.cardNote__noteclone .block {
  align-items: center;
  padding: 0;
  --line-start: 2px; /* style.css sets this on .block itself; redeclaring it here (higher specificity)
    overrides every descendant that reads it (.note__line/.mark margin-left, indented and H1/H2 lines)
    at once, instead of touching each of those rules individually. */
}

.cardNote__noteclone .lines {
  gap: 0px;
}

/* the gap from the marker's own shell to the text that follows it, for a line that's both indented
   AND has a kind marker — style.css hardcodes this one as a literal 4px (not --line-start), so it
   needs its own fixed override the same way. */
.cardNote__noteclone .block[data-indent="1"][data-kind]:not([data-kind="rule"]):not([data-kind="table"]) .note__line {
  margin-left: 2px;
}

/* .fold's own fine vertical nudge (style.css: 3.2px H1 / 1.6px H2, centring the fold arrow on the
   heading's cap-height) scaled down to this card's own fixed look. */
.cardNote__noteclone .block[data-fmt="h2"] .fold {
  margin-top: 0.7px;
}

/* .mark's BOX (not its icon) still needs to roughly match .note__line's height, same reasoning as
   .block's align-items above. style.css's own .mark{place-items:center start} (a grid property)
   turned out not to actually centre the icon once its box shrank well past it — in the screenshots
   it kept sitting at the box's bottom edge instead, not spread evenly past both edges as "centred and
   overflowing" would look. Overriding with plain absolute positioning + translateY(-50%) below doesn't
   depend on that grid behaviour at all: it centres the icon on .mark's own midpoint directly.
   width: style.css's own .mark{min-width:24px} is sized for the editor's own 24px icon — fixed here
   instead to this card's own fixed size, picked across several rounds of comparison (it was judged
   to look better than the real card's narrower, 8px marker). */
.cardNote__noteclone .mark {
  width: 10px;
  min-width: 10px;
  height: 10px;
  overflow: visible;
  position: relative;
}

/* the icon ::before's own width/height/mask-size are hardcoded to 24px in style.css's editor rule —
   fixed here to the same size as .mark's own box above. */
.cardNote__noteclone .block[data-kind="point"] .mark::before,
.cardNote__noteclone .block[data-kind="box"] .mark::before,
.cardNote__noteclone .block[data-kind="check"] .mark::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  -webkit-mask-size: 10px;
  mask-size: 10px;
}

/* the markers of a card have their own 10 px drawings (mk-*-xs.svg, 1px line) instead of the 24 px files scaled down */
.cardNote__noteclone .block[data-kind="point"] { --mk: url(/icons/mk-point-xs.svg); }
.cardNote__noteclone .block[data-kind="box"]:not([data-checked="1"]) { --mk: url(/icons/mk-checkbox-xs.svg); }
.cardNote__noteclone .block[data-kind="box"][data-checked="1"] { --mk: url(/icons/mk-checkbox-on-xs.svg); }
.cardNote__noteclone .block[data-kind="check"]:not([data-checked="1"]) { --mk: url(/icons/mk-checklist-xs.svg); }
.cardNote__noteclone .block[data-kind="check"][data-checked="1"] { --mk: url(/icons/mk-checklist-on-xs.svg); }

/* the numbered-list marker's own font-size/line-height are likewise hardcoded in style.css's editor
   rule (16px/24px, sized for the editor's own text) — the real card sets neither, so the marker just
   inherits its line's own text size there; matching that here means reusing the same fixed text size
   as .note__line below, not a number of its own. */
.cardNote__noteclone .block[data-kind="num"] .mark::before {
  font-size: 12px;
  line-height: 14px;
}

/* .note__line is a plain block, not a flex/grid container — when min-height (below) overshoots its
   own content's natural height, the extra space lands below the text (block content stays
   top-aligned), not split evenly around it. display:flex + align-items:center makes the text centre
   in that extra space instead, matching .mark's own centring above. Still loses to
   .block[data-kind="table"] .note__line's own higher-specificity display:grid below, so the table's
   own layout is untouched. Sizes below are the real card's own fixed compact type scale
   (style.css: .card__text, .card__line[data-fmt]). */
.cardNote__noteclone .note__line {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 14px;
  min-height: 16px;
}

.cardNote__noteclone .block[data-fmt="h1"] .note__line {
  font-size: 14px;
  line-height: 16px;
  min-height: 16px;
}

.cardNote__noteclone .block[data-fmt="h2"] .note__line {
  font-size: 12px;
  line-height: 14px;
  min-height: 16px;
}

/* padding: a deliberate departure from the real card (style.css forces .tcell's padding to 0
   outright) — kept at a small fixed 2px instead, picked for this template rather than copied from
   either source. min-width/border-radius: unlike font-size, the real card keeps the SAME literal
   numbers the editor's own .tcell already uses (40px/8px) — it never shrank them for the compact
   card, so they're fixed here unchanged too, not to a smaller target. */
.cardNote__noteclone .tcell {
  font-size: 12px;
  line-height: 14px;
  padding: 0 2px;
  min-width: 40px;
  border-radius: 2px;
}

/* gap: same reasoning as .tcell's min-width/border-radius above: the real card's table keeps the
   editor's own 8px row/column gap unchanged, so it's fixed here too, at 4px (picked for this
   template). */
.cardNote__noteclone .block[data-kind="table"] .note__line {
  grid-template-columns: repeat(var(--cols, 1), max-content);
  gap: 4px;
}

/* the inactive fold-arrow indicator (can't be tapped here — see .cardNote__noteclone .handle above
   for the same reasoning) — sized to the real card's own .card__fold (12px box, 6×8 chevron) instead
   of the editor's .fold/.fold__chevron (24px box, 6×9 — sized for a real tap target). */
.cardNote__noteclone .fold {
  margin-top: 1.4px;
  width: 12px;
  height: 12px;
}

.cardNote__noteclone .fold__chevron {
  width: 6px;
  height: 8px;
}

/* the editor's .fold is coloured like live, active text (#1f2224 H1 / #292c30 H2 — a real button, it
   folds the note) because it IS one there; the real card's own .card__fold uses --primary instead,
   specifically because (its own comment) "the card only shows the fold state, it cannot fold" — same
   here, this preview can't fold anything either. The 2nd selector matches .block[data-fmt="h2"] .fold's
   own higher specificity (style.css) so H2 headings don't keep their dark colour. */
.cardNote__noteclone .fold,
.cardNote__noteclone .block[data-fmt="h2"] .fold {
  color: var(--primary);
}

.cardNote__body {
  display: grid;
}

.cardNote__body > * {
  grid-area: 1 / 1;
  align-self: start;
  min-width: 0;
}

.cardNote.is-menu {
  z-index: 2;
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
}