/* ---- the card ----

   A note is a card out of the drawer, laid on the desk: square corners at the
   top where the ruling is, the red line across its head, and enough margin
   inside it that the writing is not sitting on the edge. */
.leaf {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 2px solid var(--mark);
  border-radius: 0 0 var(--radius-control) var(--radius-control);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-8) var(--space-6);
}

@media (max-width: 700px) {
  .leaf {
    padding: var(--space-5) var(--space-4);
    border-inline: 0;
    border-radius: 0;
  }
}

/* ---- display type ----

   Headings take the display face. The body face is left alone: Bricolage is
   wide and quirky, which is what makes it a heading face and what would make it
   tiring at fourteen pixels for eight hours. */
.appbar-title,
.page-head h1,
.dash-heading,
.panel-title,
.legal-head h1,
.legal h2,
.editor-title {
  font-family: var(--font-display);
  letter-spacing: -0.022em;
}

/* Bricolage is wide and a little odd, which is what makes it a heading face.
   600 rather than 800: the object is doing the talking here and the type only
   has to be sharp. */
.appbar-title,
.legal-head h1,
.editor-title {
  font-weight: 600;
}

/* Small labels stay in the body face. Bricolage at eleven pixels, tracked out
   and uppercased, is a poster for a design festival. */
.setting-heading,
.group-title,
.label {
  font-family: var(--font-sans);
}

/* ---------------------------------------------------------------- ruled

   Writing on lines.

   The theme has had a ruling since it arrived, painted on the page behind the
   note. It never showed through, because the writing surface paints itself with
   --bg, and even where it did show it did not line up with anything: the rules
   were on the page and the text was in a box on top of it, at a line height
   that had nothing to do with them.

   So the rules go on the text itself, at exactly the line height. 28px in both
   places and neither may move without the other — the whole effect is that the
   two numbers are the same number. */

:root[data-theme^="ruled"] .editor-text,
:root[data-theme^="ruled"] .note-prose.is-editable,
:root[data-theme^="ruled"] .checklist-text {
  /* Pinned, not a ratio. --leading-body is 1.6, which on a 16px body is 25.6px:
     a period that cannot be drawn and cannot be matched. */
  line-height: 28px;

  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 27px,
    var(--rule, oklch(0.902 0.021 252)) 27px 28px);

  /* Local rather than scroll, so the lines travel with the text if the field
     ever scrolls instead of growing. */
  background-attachment: local;
}

/* The title sits on a rule too, and a heavier one, the way the top line of a
   page is heavier than the rest.
   
   One line rather than a ruling. The title is set at more than twice the body
   size, so a 28px repeat does not pass under it — it passes through it, and the
   first thing the theme did was strike out every note's name. */
:root[data-theme^="ruled"] .note-head {
  padding-block-end: var(--space-2);
  border-bottom: 1px solid var(--mark);
}

/* The ruling rules below match [data-theme^="ruled"] rather than the exact name.

   There are two ruled themes now — Ruled and Ruled at night — and every rule
   here is about the ruling rather than about the palette, so both want all of
   them. A prefix match says "any ruled theme" in one character instead of
   thirty-two pairs of selectors, and a third variant would need no edit at all.

   The landing page's --lp-rule override does the same thing for the same reason. */

/* ---- the list is the ruled paper, rather than sitting on top of it ----

   This drew a border under each row and left the page's own --texture running
   behind everything at its own 28px period. A row is 63px tall, so the two
   rhythms shared no common multiple and every row's text landed 7px further out
   of register than the one above it — visible as a drift down the list, and
   visible as two sets of lines crossing in the margins beside the rows. The
   moiré this file's next comment warns about, in the one theme named after its
   ruling.

   The fix is to stop having two rulings. The list carries the ruling itself, at
   the same 28px period as the writing everywhere else in this theme, anchored
   to the top of the list rather than to the top of the scrolling pane — so its
   phase is zero by construction rather than by whatever happens to sit above it
   on that particular page. A row is exactly 56px, which is two rules, with its
   title on the first and its snippet on the second.

   Both lines inside a row are single-line-with-ellipsis already, so pinning
   them to a 28px line box cannot make text wrap out of the space. */

:root[data-theme^="ruled"] .rows {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 27px,
    var(--rule, oklch(0.902 0.021 252)) 27px 28px);

  /* Local, so the ruling scrolls with the list it belongs to rather than with
     the viewport. */
  background-attachment: local;
}

/* Transparent, so the ruling behind them is the ruling you see. They were
   painted --bg to hide the page texture, which is the same problem solved by
   covering it up. */
:root[data-theme^="ruled"] .row {
  background: transparent;
  border-top: none;
  border-bottom: none;
  border-radius: 0;
}

:root[data-theme^="ruled"] .row + .row {
  border-top: none;
}

/* Two rules tall, exactly. */
:root[data-theme^="ruled"] .row-link,
:root[data-theme^="ruled"] .row-skeleton {
  min-height: 56px;
  block-size: 56px;
  padding-block: 0;
}

/* One rule each, with the text sitting on the line rather than floating between
   two of them: a 28px line box puts the baseline just above the rule at its
   foot, which is where handwriting goes. */
:root[data-theme^="ruled"] .row-text {
  gap: 0;
}

:root[data-theme^="ruled"] .row-title,
:root[data-theme^="ruled"] .row-snippet {
  line-height: 28px;
}

/* Where one note ends and the next begins.

   With every row two rules tall and the ruling continuous, a list of notes read
   as title, snippet, title, snippet down an unbroken page — correct as paper
   and useless as a list, because nothing said which snippet belonged to which
   title. A notebook solves this with a margin; this solves it by making the
   rule at each note's boundary darker than the rule inside it.

   An inset shadow rather than a border, because a border would add a pixel to a
   row whose height has to stay exactly two rules. It lands on the ruling that is
   already there, so it reads as one line drawn more firmly rather than as a
   second line. */
:root[data-theme^="ruled"] .row + .row {
  box-shadow: inset 0 1px 0 var(--border-strong);
}

/* Everything in the row sits on the first line, not in the middle of the pair.

   .row-link centres its children, which puts anything short — the glyph, the
   timestamp — exactly halfway down a 56px row, which is exactly where the rule
   between the two lines is. The timestamp came out struck through and the
   glyph's tile broke the rule into segments. Both are the same mistake as the
   editor's title being struck through by its own ruling, one component along. */
:root[data-theme^="ruled"] .row-link {
  align-items: flex-start;
}

:root[data-theme^="ruled"] .row-time {
  line-height: 28px;
}

/* The glyph keeps its tile but sits inside the first line rather than across
   the rule, so the line runs behind it unbroken. */
:root[data-theme^="ruled"] .row-icon {
  margin-block-start: 1px;
}

/* Hovering must not paint over the ruling, or the line the eye is following
   disappears under the pointer. A tint rather than a fill. */
@media (hover: hover) {
  :root[data-theme^="ruled"] .row-link:hover {
    background: color-mix(in oklch, var(--surface-hover) 55%, transparent);
  }
}

/* The page's own ruling is left to the theme's --texture, which draws it behind
   everything. Where the writing is, the rules above take over: two rulings at
   different periods in the same column is a moiré, not a notebook. */
:root[data-theme^="ruled"] .leaf {
  background: var(--bg);
}

/* ---- the preview on the same ruling as the writing ----

   The textarea sits on the grid honestly: one pinned 28px line-height, no
   padding, so every line of type lands on a rule. The rendered preview did not.
   Its line-height is 1.7 and its margins come off a 4px scale, so the first
   paragraph is already off the grid and everything below it drifts further —
   visible on a phone, where the column is narrow enough that a paragraph wraps
   four or five times before the eye leaves it.

   Ruling that does not line up with the text is worse than no ruling: it reads
   as a rendering fault rather than as paper. So the preview goes on the same
   28px grid the writing is on. Every vertical measurement below is 28 or a
   multiple of it — that is the whole rule, and any new one has to obey it. */

:root[data-theme^="ruled"] .note-prose.is-editable > *,
:root[data-theme^="ruled"] .note-prose.is-editable li,
:root[data-theme^="ruled"] .note-prose.is-editable blockquote > * {
  line-height: 28px;
}

:root[data-theme^="ruled"] .note-prose.is-editable > * + * {
  margin-top: 28px;
}

/* A heading is one line of the grid, whatever size it is set at. --text-xl on a
   28px line box is tight rather than cramped, and it keeps the ruling true,
   which is the thing being bought here. */
:root[data-theme^="ruled"] .note-prose.is-editable :is(h1, h2, h3, h4, h5, h6) {
  line-height: 28px;
}

/* Its own line above, and the text that belongs to it on the next one. */
:root[data-theme^="ruled"] .note-prose.is-editable > * + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 56px;
}

:root[data-theme^="ruled"] .note-prose.is-editable > :is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 28px;
}

/* List items are already a line each; the 4px they were carrying between them
   is exactly the amount that breaks a grid. */
:root[data-theme^="ruled"] .note-prose.is-editable li + li,
:root[data-theme^="ruled"] .note-prose.is-editable li > ul,
:root[data-theme^="ruled"] .note-prose.is-editable li > ol {
  margin-top: 0;
}

/* Quotes and code keep their inset, horizontally. Vertical padding on either
   would push everything below them off by however much it was. */
:root[data-theme^="ruled"] .note-prose.is-editable :is(blockquote, pre) {
  padding-block: 0;
}

/* A rule occupies one line, like everything else. */
:root[data-theme^="ruled"] .note-prose.is-editable hr {
  margin-block: 0;
  block-size: 28px;
  border: none;
  border-top: 1px solid var(--mark);
}

/* And where the grid genuinely cannot hold — a picture is whatever height the
   picture is, and no CSS makes it a multiple of 28 — the ruling comes off
   rather than drifting. Paper with no lines is a choice; paper with lines that
   miss the text is a printing fault. */
:root[data-theme^="ruled"] .note-prose.is-editable:has(:is(img, table, video, svg, iframe)) {
  background-image: none;
}