/* The papers a paper is drawn on (Paper::LOOKS; Joey, 2026-10-11: "College Rule, Yellow lined, Index
   Card…", and Cornell notes): only the page under the words changes; the words, their colours and the
   margin are the same on every paper. Plain is the page as it always was.

   Every paper but plain has a pitch, one line of writing, and its rules are drawn at it, so writing
   sits on them (Joey: "make sure all views showed typed contact on the lines properly"): every line
   is one pitch high, the title and headings a little smaller than on plain paper so they fit it, and
   no line has space above or below it but whole pitches. What cannot be one pitch (a picture, a
   table) is made up to whole pitches by lib/ruled.js, so the line after it is back on a rule. The
   same holds on the small page, where the writing is rendered HTML rather than the editor.

   Unlayered, as editor.css is: CodeMirror's own styles are unlayered and would beat a layer. */

@property --pitch { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* ---- The papers themselves: their stock, their rules and their margin lines. ----
   The page's stock is on the sheet. The rules are a stack of backgrounds, --ruling, declared where the
   pitch is known (the editor on the page, the sheet of a small page) and drawn from its top left;
   --x is where the writing starts across it, so a margin line can be put just before it. */
:is(.paper, .mini-page).look-index_card { background-color: var(--card-stock); }
:is(.paper, .mini-page).look-legal { background-color: var(--legal-pad); }
:is(.paper, .mini-page).look-steno { background-color: var(--steno-pad); }

/* A whole number of pixels, so every rule is drawn as crisply as the next. */
.paper.is-ruled .editor .cm-editor { --pitch: round(1.55em, 1px); --x: var(--sheet-start, 0px); }
.mini-page.is-ruled .mini-sheet { --pitch: 1.55em; --x: 2.4em; }
:is(.paper.is-ruled .editor .cm-editor, .mini-page.is-ruled .mini-sheet) {
  --rule-line: var(--paper-rule);
  --rules: repeating-linear-gradient(to bottom, transparent 0 calc(var(--pitch) - 1px), var(--rule-line) calc(var(--pitch) - 1px) var(--pitch));
  --ruling: var(--rules);
}
/* College Ruled: blue rules and a red line down the left, just before the writing. */
:is(.paper.is-ruled.look-lined .editor .cm-editor, .mini-page.is-ruled.look-lined .mini-sheet) {
  --ruling: linear-gradient(to right, transparent max(var(--x) - 0.9em, 6px), var(--paper-margin) 0 calc(max(var(--x) - 0.9em, 6px) + 1px), transparent 0), var(--rules);
}
/* Yellow Legal Pad: yellow, its rules, and two red lines down the left. */
:is(.paper.is-ruled.look-legal .editor .cm-editor, .mini-page.is-ruled.look-legal .mini-sheet) {
  --ruling: linear-gradient(to right, transparent max(var(--x) - 1.15em, 3px), var(--paper-margin) 0 calc(max(var(--x) - 1.15em, 3px) + 1px), transparent 0 max(var(--x) - 0.9em, 7px), var(--paper-margin) 0 calc(max(var(--x) - 0.9em, 7px) + 1px), transparent 0), var(--rules);
}
/* Index Card: card stock, blue rules, and a red one under the title. */
:is(.paper.is-ruled.look-index_card .editor .cm-editor, .mini-page.is-ruled.look-index_card .mini-sheet) {
  --ruling: linear-gradient(to bottom, transparent calc(var(--pitch) - 1.5px), var(--paper-margin) 0 var(--pitch), transparent 0), var(--rules);
}
/* Steno Pad: green, its rules, and a line down the middle. */
:is(.paper.is-ruled.look-steno .editor .cm-editor, .mini-page.is-ruled.look-steno .mini-sheet) {
  --ruling: linear-gradient(to right, transparent calc(50% - 0.5px), var(--paper-margin) 0 calc(50% + 0.5px), transparent 0), var(--rules);
}
/* Graph: squares a pitch wide, the writing on their lines. */
:is(.paper.is-ruled.look-grid .editor .cm-editor, .mini-page.is-ruled.look-grid .mini-sheet) {
  --rule-line: color-mix(in oklab, var(--paper-rule), transparent 50%);
  --ruling: linear-gradient(to right, var(--rule-line) 0 1px, transparent 1px) var(--x) 0 / var(--pitch) var(--pitch),
            linear-gradient(to bottom, transparent calc(var(--pitch) - 1px), var(--rule-line) 0) 0 0 / var(--pitch) var(--pitch);
}
/* Dot Grid: a dot where the squares' lines would cross. */
:is(.paper.is-ruled.look-dots .editor .cm-editor, .mini-page.is-ruled.look-dots .mini-sheet) {
  --ruling: radial-gradient(circle, var(--paper-rule) 0 1.1px, transparent 1.6px) calc(var(--x) - var(--pitch) / 2) calc(var(--pitch) / 2) / var(--pitch) var(--pitch);
}
/* Cornell Notes: rules, a cue column on the left for the questions and key words (a paper's headings
   are drawn there), the notes to its right, and the summary across the foot under a double rule (the
   lines from a heading named Summary). The cue line is drawn by each line, so it stops at the summary. */
.paper.is-ruled.look-cornell { --cue: clamp(5.5rem, 24vw, 12rem); }

/* ---- On the page: the editor. ---- */
.paper.is-ruled .editor .cm-editor .cm-scroller { isolation: isolate; line-height: var(--pitch); }
/* The rules run across the whole sheet, its padding too, behind the writing, from the first line down. */
.paper.is-ruled .editor .cm-editor .cm-scroller::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* Raised a little, so a rule runs just under the letters, as handwriting sits on it. */
  inset-block: -0.3em 0.3em; inset-inline: calc(-1 * var(--sheet-start, 0px)) calc(-1 * var(--sheet-end, 0px));
  background: var(--ruling);
}
.paper.is-ruled .editor .cm-editor .cm-content { padding-block: 0; }
/* A picture, a table or a bookmark keeps no margin of its own above or below it: lib/ruled.js makes
   its height up to whole pitches, and a margin it cannot see would put every line after it off the rules. */
.paper.is-ruled .editor .cm-editor .cm-content > :not(.cm-line) { margin-block: 0 !important; }
/* A bookmark has a height of its own: on ruled paper, four rules. */
.paper.is-ruled .editor .cm-editor .cm-bookmark { block-size: calc(var(--pitch) * 4); }
.paper.is-ruled .editor .cm-editor .cm-line { line-height: var(--pitch); padding-block-start: 0; }
/* The editor's zero-width stand-ins beside a widget hang from the top of the line, not its text, so
   a heading's larger letters never push its line past the pitch. */
.paper.is-ruled .editor .cm-editor .cm-line .cm-widgetBuffer { vertical-align: top; }
.paper.is-ruled .editor .cm-editor .cm-line.cm-title { font-size: 1.35em; line-height: var(--pitch); }
.paper.is-ruled .editor .cm-editor .cm-line.cm-h1 { font-size: 1.35em; }
.paper.is-ruled .editor .cm-editor .cm-line.cm-h2 { font-size: 1.2em; }
.paper.is-ruled .editor .cm-editor .cm-line.cm-h3 { font-size: 1.1em; }
.paper.is-ruled .editor .cm-editor .cm-line:is(.cm-h4, .cm-h5, .cm-h6) { font-size: 1em; }
.paper.is-ruled .editor .cm-editor .cm-line:is(.cm-callout-title, .cm-callout-last) { padding-block: 0; }
.paper.is-ruled .editor .cm-editor .cm-line.cm-callout-head { font-size: 0.6em; }

/* Cornell: the cue line down the page, the notes to its right, headings in the cue column, and the
   title and the summary across the whole page, each laid over the cue line with the page's own rules
   (raised as the page's are), so it starts under the title and stops at the summary. */
.paper.is-ruled.look-cornell .editor .cm-editor {
  --ruling: linear-gradient(to right, transparent calc(var(--x) + var(--cue)), var(--paper-margin) 0 calc(var(--x) + var(--cue) + 1px), transparent 0), var(--rules);
}
.paper.is-ruled.look-cornell .editor .cm-editor .cm-content { padding-inline-start: calc(var(--cue) + 0.75rem); }
.paper.is-ruled.look-cornell .editor .cm-editor .cm-line.cm-h:not(.cm-title, .cm-summary) {
  margin-inline-start: calc(-1 * (var(--cue) + 0.75rem)); padding-inline-end: 0.75rem; inline-size: var(--cue); box-sizing: content-box;
}
.paper.is-ruled.look-cornell .editor .cm-editor .cm-line:is(.cm-title, .cm-summary) {
  position: relative; margin-inline-start: calc(-1 * (var(--cue) + 0.75rem));
  background: linear-gradient(to right, transparent calc(var(--cue) - 1px), var(--paper) 0 calc(var(--cue) + 2px), transparent 0);
}
/* The title also covers the little of the cue line above it, where the raised rules begin. */
.paper.is-ruled.look-cornell .editor .cm-editor .cm-line.cm-title { background-size: 100% calc(100% - 0.3em); background-repeat: no-repeat; }
.paper.is-ruled.look-cornell .editor .cm-editor .cm-line.cm-title::before {
  content: ""; position: absolute; inset-block-start: -0.3em; block-size: 0.3em; inset-inline-start: calc(var(--cue) - 1px); inline-size: 3px; background: var(--paper);
}
.paper.is-ruled.look-cornell .editor .cm-editor .cm-line.cm-summary.is-start::after {
  content: ""; position: absolute; inset-block-start: calc(-0.3em - 2px); inset-inline: 0; block-size: 4px;
  border-block: 1px solid var(--paper-margin); pointer-events: none;
}

/* On a phone the cue column is too narrow for a heading's words: a heading runs across the cue line,
   over it, as the title does. */
@media (max-width: 60ch) {
  .paper.is-ruled.look-cornell .editor .cm-editor .cm-line.cm-h:not(.cm-title, .cm-summary) {
    inline-size: auto; padding-inline-end: 0;
    background: linear-gradient(to right, transparent calc(var(--cue) - 1px), var(--paper) 0 calc(var(--cue) + 2px), transparent 0);
  }
}

/* ---- On the small page: the writing as HTML (MiniHelper), and a paper's swatch. ---- */
.mini-page.is-ruled .mini-sheet {
  min-block-size: 100%; box-sizing: border-box;
  /* Its writing a little lower than a pitch down, so a rule runs just under the letters, as on the page. */
  line-height: var(--pitch); padding-block-start: calc(var(--pitch) + 0.3em);
  background: var(--ruling);
}
.mini-page.is-ruled .mini-sheet > * + * { margin-block-start: var(--pitch); }
.mini-page.is-ruled .mini-sheet > h1:first-child { margin-block-end: 0; }
.mini-page.is-ruled :is(h1, h2, h3, h4, h5, h6, p, li, pre, th, td, blockquote) { line-height: var(--pitch); }
.mini-page.is-ruled :is(h2, h3, h4, h5, h6) { margin-block-start: var(--pitch); }
.mini-page.is-ruled.is-writing h1 { font-size: 1.35em; }
.mini-page.is-ruled.is-writing h2 { font-size: 1.2em; }
.mini-page.is-ruled.is-writing h3 { font-size: 1.1em; }
.mini-page.is-ruled.is-writing pre { padding-block: 0; }
.mini-page.is-ruled.is-writing :is(th, td) { padding-block: 0; border-block-end: 0; }
.mini-page.is-ruled.is-writing .mini-image { display: block; block-size: calc(var(--pitch) * 3); }
.mini-page.is-ruled.is-writing .mini-callout { padding-block: 0; }
.mini-page.is-ruled.is-writing hr { block-size: var(--pitch); margin: 0; border: 0; background: linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--ink-soft) 0 calc(50% + 0.5px), transparent 0); }
.mini-page.is-ruled.look-cornell .mini-sheet {
  --cue: 30cqw; --x: calc(var(--cue) + 0.6em); padding-inline-start: var(--x);
  --ruling: linear-gradient(to right, transparent calc(var(--x) - 0.45em), var(--paper-margin) 0 calc(var(--x) - 0.45em + 1px), transparent 0), var(--rules);
}
.mini-page.is-ruled.look-cornell .mini-sheet > :is(h2, h3, h4, h5, h6) { margin-inline-start: calc(-1 * var(--x) + 0.6em); inline-size: calc(var(--cue) - 0.6em); }
/* The title and the summary across the page, over the cue line; the summary under a double rule. */
.mini-page.is-ruled.look-cornell .mini-sheet > :is(h1:first-child, .mini-summary) {
  margin-inline-start: calc(-1 * var(--x)); padding-inline: 0.6em;
  background: linear-gradient(to right, transparent calc(var(--x) - 0.45em - 1px), var(--paper) 0 calc(var(--x) - 0.45em + 2px), transparent 0);
}
.mini-page.is-ruled.look-cornell .mini-summary { margin-block-start: calc(var(--pitch) - 3px); border-block-start: 3px double var(--paper-margin); }
.mini-page.is-ruled.look-cornell .mini-summary > :first-child { margin-block-start: 0; }

/* A swatch: a blank small page of the paper, to choose it by, with rules close enough to see. */
.mini-page.is-swatch { display: inline-block; flex: none; inline-size: 1.05rem; block-size: 1.35rem; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; vertical-align: middle; background-color: var(--paper); }
.mini-page.is-swatch .mini-sheet { display: block; block-size: 100%; padding: 0; --pitch: 3px; --x: 4px; font-size: 3px; }
.mini-page.is-swatch.look-cornell .mini-sheet { --cue: 3px; }
/* Its stock over the sheet's own white, which a swatch's own rule would otherwise put back. */
.mini-page.is-swatch.look-index_card { background-color: var(--card-stock); }
.mini-page.is-swatch.look-legal { background-color: var(--legal-pad); }
.mini-page.is-swatch.look-steno { background-color: var(--steno-pad); }
.new-choice.is-look { display: flex !important; align-items: center; gap: 0.6rem; }
.new-menu-title.is-first { border-block-start: 0; margin-block-start: 0; }

/* The papers to choose from, in a dialog: each a bigger swatch over its name. */
.looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem 0.7rem; }
.look-form { display: contents; }
.look-choice { display: grid; justify-items: center; gap: 0.35rem; padding: 0.3rem; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 0.75rem; text-align: center; cursor: pointer; }
.look-choice .mini-page.is-swatch { inline-size: 3.4rem; block-size: 4.4rem; }
.look-choice .mini-page.is-swatch .mini-sheet { --pitch: 6px; --x: 9px; }
.look-choice .mini-page.is-swatch.look-cornell .mini-sheet { --cue: 12px; }
.look-choice:hover .mini-page { box-shadow: 0 0 0 1px var(--ink-soft); }
.look-choice.is-chosen { font-weight: 700; }
.look-choice.is-chosen .mini-page { box-shadow: 0 0 0 2px var(--ink); }
.look-choice:focus-visible { outline: 2px solid var(--caret); outline-offset: 2px; }
@media (max-width: 30rem) { .looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The templates page and its form draw their papers' swatches at a page's proportions. */
.type-item .mini-page.is-swatch, .type-look .mini-page.is-swatch { inline-size: 2.6rem; block-size: 3.3rem; }
.type-item .mini-page.is-swatch .mini-sheet, .type-look .mini-page.is-swatch .mini-sheet { --pitch: 5px; --x: 7px; }