/* A paper drawn small (MiniHelper): the start of its markdown, rendered, at the small page's scale
   (stack.css sets the page: 6.2px type, line-height 1.45), so it reads as the page shrunk. Every rule
   is under .mini-page.is-writing, which outranks stack.css's .mini-page whichever loads first. */
@layer components {
  /* The page shrunk, never redrawn: the tile is a container, and the sheet inside it is the paper at
     its own proportions (76ch of 18px type, so 2.2% of the tile's width a letter), its padding the
     paper's (2.25rem top, 4ch left, 2ch right), so the miniature is the page, whatever the tile's size. */
  .mini-page.is-writing { display: block; padding: 0; container-type: inline-size; color: color-mix(in oklab, var(--ink), var(--paper) 25%); overflow-wrap: break-word; }
  .mini-sheet { font-size: 2.2cqw; line-height: 1.55; padding: 2em 1.25em 0 2.4em; }
  .mini-sheet > * + * { margin-block-start: 0.9em; }
  .mini-page.is-writing :where(p, ul, ol, dl, pre, blockquote, table, hr, h1, h2, h3, h4, h5, h6) { margin-block-end: 0; }

  /* Headings as the paper sets them; the title, first, larger as it always was. */
  .mini-page.is-writing :is(h1, h2, h3, h4, h5, h6) { color: var(--ink); font-weight: 700; line-height: 1.2; }
  .mini-page.is-writing h1 { font-size: 1.6em; }
  .mini-page.is-writing h2 { font-size: 1.3em; margin-block-start: 1.2em; }
  .mini-page.is-writing h3 { font-size: 1.1em; margin-block-start: 0.9em; }
  .mini-page.is-writing :is(h4, h5, h6) { font-size: 1em; }
  .mini-sheet > :first-child { margin-block-start: 0; }
  .mini-sheet > h1:first-child { margin-block-end: 0.2em; }
  .mini-page.is-writing strong { color: var(--ink); }
  .mini-page.is-writing del { text-decoration-color: var(--ink-soft); }

  /* Lists, and to-dos as small boxes. */
  .mini-page.is-writing :is(ul, ol) { padding-inline-start: 1.6em; }
  .mini-page.is-writing ul { list-style: disc; }
  .mini-page.is-writing ol { list-style: decimal; }
  .mini-page.is-writing li::marker { color: var(--ink-soft); }
  .mini-page.is-writing li.mini-task { list-style: none; margin-inline-start: -1.6em; }
  .mini-page.is-writing li > p { margin: 0; }
  .mini-box {
    display: inline-block; width: 0.95em; height: 0.95em; margin-inline-end: 0.45em; vertical-align: -0.12em;
    border: 1px solid var(--ink-soft); border-radius: 1.5px; background: var(--paper);
  }
  .mini-box.is-ticked { position: relative; background: var(--ink); border-color: var(--ink); }
  .mini-box.is-ticked::after {
    content: ""; position: absolute; inset: 8% 30% 30% 30%; rotate: 40deg;
    border: solid var(--paper); border-width: 0 1px 1px 0;
  }


  /* A table: a tiny real one, its rule lines under each row. */
  .mini-page.is-writing table { border-collapse: collapse; font-size: 0.88em; line-height: 1.4; min-width: 60%; }
  .mini-page.is-writing :is(th, td) { text-align: start; vertical-align: top; padding: 0.3em 0.9em 0.3em 0; border-block-end: 0.5px solid var(--rule); }
  .mini-page.is-writing th { color: var(--ink); font-weight: 700; border-block-end-color: var(--ink-soft); }

  /* Quotes, callouts in their colour, code on the code tint, a rule across. */
  .mini-page.is-writing blockquote { border-inline-start: 1.5px solid var(--rule); padding-inline-start: 1.25ch; color: var(--ink-soft); }
  .mini-callout { --tint: var(--c-gray); padding: 0.6em 1.5ch; background: color-mix(in oklab, var(--tint), var(--paper) 86%); border-inline-start: 1.5px solid var(--tint); }
  .mini-callout > * + * { margin-block-start: 0.4em; }
  .mini-callout-title { font-weight: 700; color: var(--ink); }
  .mini-callout.is-gray { --tint: var(--c-gray); } .mini-callout.is-brown { --tint: var(--c-brown); }
  .mini-callout.is-orange { --tint: var(--c-orange); } .mini-callout.is-yellow { --tint: var(--c-yellow); }
  .mini-callout.is-green { --tint: var(--c-green); } .mini-callout.is-blue { --tint: var(--c-blue); }
  .mini-callout.is-purple { --tint: var(--c-purple); } .mini-callout.is-pink { --tint: var(--c-pink); }
  .mini-callout.is-red { --tint: var(--c-red); }
  .mini-page.is-writing pre { font-family: var(--mono); font-size: 0.82em; background: var(--desk); padding: 0.4em 1.25ch; white-space: pre; overflow: hidden; }
  .mini-page.is-writing pre code { font-size: 1em; background: none; padding: 0; }
  .mini-page.is-writing code { font-family: var(--mono); font-size: 0.86em; background: var(--desk); border-radius: 1px; padding: 0.05em 0.2em; }
  .mini-page.is-writing hr { border: 0; border-block-start: 0.5px solid var(--rule); }

  /* Coloured words; maths as its TeX, in italic; a picture as a grey box where it stands. */
  .mini-colour.is-gray { color: var(--c-gray); } .mini-colour.is-brown { color: var(--c-brown); }
  .mini-colour.is-orange { color: var(--c-orange); } .mini-colour.is-yellow { color: var(--c-yellow); }
  .mini-colour.is-green { color: var(--c-green); } .mini-colour.is-blue { color: var(--c-blue); }
  .mini-colour.is-purple { color: var(--c-purple); } .mini-colour.is-pink { color: var(--c-pink); }
  .mini-colour.is-red { color: var(--c-red); }
  .mini-maths { font-style: italic; }
  .mini-maths.is-display { display: block; text-align: center; }
  .mini-image { display: block; aspect-ratio: 4 / 3; background: color-mix(in oklab, var(--rule), var(--paper) 30%); border-radius: 1px; }
}

/* A bookmark, small: a hairline rectangle with its site, where it stands. */
.mini-bookmark { display: block; margin-block: 0.4em; padding: 0.5em 0.6em; border: 1px solid var(--rule); border-radius: 2px; font-size: 0.85em; color: var(--ink-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }