@layer components {
  /* The margin of a sheet: small papers beside the passage each belongs to. */
  /* On the sheet, to the right of the right squiggle. */
  .sheet-body .margin {
    position: relative; min-width: 0; overflow: hidden; opacity: 0; pointer-events: none;
    padding-inline: 0.75rem 1.5rem; transition: opacity 200ms ease-out;
  }
  html[data-margin=open] .sheet-body .margin { opacity: 1; pointer-events: auto; overflow: visible; }
  .sheet-body .margin .slip { position: absolute; inset-inline: 0.75rem 1.5rem; }

  .slip { font-size: 0.8rem; line-height: 1.42; }
  .slip-body { margin-block-start: 0.2em; }
  .slip-meta, .card-meta { font-size: 0.7rem; color: var(--ink-soft); margin-block-start: 0.3em; }
  .slip-meta a, .slip-line a, .card-meta a { color: inherit; }
  .slip-why { font-style: italic; color: var(--ink-soft); margin-block-start: 0.15em; }

  /* ---------------------------------------------------------------------------------------------
     Cards. Each kind is a different piece of paper, the way a person marks up a printout: a
     comment pencilled in the margin, a sticky note, an index card, a clipping, a tag. The hand
     (--hand) is the colour of whoever wrote it; the reader's own, soft ink. */
  .card { --hand: var(--au, var(--ink-soft)); cursor: text; }
  .card-title { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
  .card-title.is-struck { text-decoration: line-through; text-decoration-color: var(--ink-soft); color: var(--ink-soft); }
  .card-body { margin-block-start: 0.2em; overflow-wrap: anywhere; }
  .card-body > * + * { margin-block-start: 0.35em; }
  .card-body ul { padding-inline-start: 1.1em; list-style: disc; }
  .card-body ol { padding-inline-start: 1.3em; list-style: decimal; }
  .card-body code { font-family: var(--mono); font-size: 0.92em; }
  .card-body a { color: inherit; }

  .card-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; margin-block-start: 0.35rem; font-size: 0.7rem; }
  .card-actions form { display: contents; }
  .card-act { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
  .card-act:hover { color: var(--ink); text-decoration-color: currentColor; }
  .card-act.is-quiet { margin-inline-start: auto; }
  .card-act[hidden] { display: none; }
  /* While writing, the only choice is to stop writing. */
  .card.is-editing .card-actions form { display: none; }
  .card-state { color: var(--ink-soft); }
  /* Actions show when the card is pointed at, so a margin full of cards still reads as paper. */
  @media (hover: hover) {
    .card .card-actions { opacity: 0; }
    .card:hover .card-actions, .card:focus-within .card-actions, .card.is-editing .card-actions { opacity: 1; }
  }

  /* Pointed at from a circle on the sheet, or just opened. */
  .card { }
  .card.is-pointed { transform: translateX(-4px); }

  /* Written in place: the card grows a little and lies flat. */
  .card.is-editing { z-index: 5; rotate: 0deg !important; transform: none; }
  .card-editor[hidden] { display: none; }
  /* While writing, the card says what it is, and it can be changed: a circle starts as a note. */
  /* A card's kind while it is written: tabs in a row, the chosen one on a raised pill, as Pages and
     Table are; under them, in soft ink, what that kind is for. */
  .card-kind { display: flex; flex-wrap: wrap; gap: 0.15rem; padding: 0.15rem; border-radius: 999px; background: color-mix(in oklab, var(--desk), transparent 30%); font-size: 0.7rem; margin-block-end: 0.3rem; font-family: var(--font); width: fit-content; }
  .card-kind[hidden], .card-kind-about[hidden] { display: none; }
  .card-kind-shape { padding: 0.15rem 0.6rem; border-radius: 999px; color: var(--ink-soft); }
  .card-kind-shape:hover { color: var(--ink); }
  .card-kind-shape.is-chosen { color: var(--ink); font-weight: 700; background: var(--paper); box-shadow: 0 1px 2px oklch(var(--lch-shade) / 0.15); }
  .card-kind-about { font-size: 0.7rem; color: var(--ink-soft); margin: 0 0 0.35rem; font-family: var(--font); }
  /* Being written, a card sits straight, whatever its kind leans to when it is put down. */
  .card.is-editing { rotate: 0deg; }
  .db-empty { color: var(--ink-soft); }
  /* What a card mentions: its name, underlined as a link is; a picture as a small one beside it. */
  .card-mention { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
  .card-mention.has-picture { display: inline-flex; align-items: center; gap: 0.35em; vertical-align: middle; text-decoration: none; border: 1px solid var(--rule); border-radius: 4px; padding: 0.1em 0.4em 0.1em 0.1em; background: var(--paper); }
  .card-mention-picture { width: 2.2em; height: 2.2em; object-fit: cover; border-radius: 3px; }
  /* A bookmark in a card, a little smaller than in a paper. */
  .card .cm-bookmark { height: 5.2rem; margin-block: 0.35rem; }
  .card-act.card-done { display: inline-grid; place-items: center; width: 1.6rem; height: 1.4rem; border-radius: 5px; color: var(--ink); text-decoration: none; }
  .card-act.card-done:hover { background: var(--desk); }
  .card-editor .editor.is-card { font-size: 0.86rem; }
  .card-editor .cm-editor { min-height: 4.5em; }

  /* A note: pencilled beside the passage. No paper of its own, just the writer's mark. */
  .card.is-note { padding: 0.1rem 0 0.1rem 0.7rem; border-inline-start: 2px solid var(--hand); }
  .card.is-note .card-title { font-weight: 400; }
  .card.is-note.is-editing { background: var(--paper); padding-block: 0.4rem; box-shadow: var(--shadow); }

  /* A sticky note: something to do. Yellow, a little askew, its corner lifting. */
  .card.is-todo {
    background: color-mix(in oklab, var(--paper), var(--accent) 22%); padding: 0.65rem 0.8rem 0.8rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    rotate: -0.6deg;
  }
  .card.is-todo::after {
    content: ""; position: absolute; inset-inline-end: 0; inset-block-end: 0; width: 14px; height: 14px;
    background: linear-gradient(315deg, transparent 50%, color-mix(in oklab, var(--paper), var(--accent) 45%) 50%);
  }
  .card.is-todo:nth-child(even) { rotate: 0.5deg; }
  .card.is-todo.is-done { opacity: 0.6; }
  .card.is-todo.is-done .card-title { text-decoration: line-through; text-decoration-color: var(--ink-soft); }
  .card.is-todo, .card.is-evidence, .card.is-place { position: relative; }

  /* An index card: a decision. Ruled, with a red line under its heading. */
  /* Every line of an index card, its title, its words and its signature, sits on a ruled line: one
     line height for all of it, the ruling at that pitch, red under the title and blue after, and an
     empty ruled line before the signature. */
  .card.is-decision {
    --pitch: 1.45rem; --top: 0.45rem;
    line-height: var(--pitch);
    background-color: var(--paper);
    background-image:
      linear-gradient(to bottom, transparent calc(var(--top) + var(--pitch) - 1.5px), color-mix(in oklab, var(--ink-red), transparent 25%) calc(var(--top) + var(--pitch) - 1.5px) calc(var(--top) + var(--pitch)), transparent calc(var(--top) + var(--pitch))),
      repeating-linear-gradient(to bottom, transparent 0 calc(var(--pitch) - 1px), color-mix(in oklab, var(--caret), var(--paper) 78%) calc(var(--pitch) - 1px) var(--pitch));
    background-position: 0 0, 0 var(--top);
    background-repeat: no-repeat, repeat;
    padding: var(--top) 0.8rem calc(var(--pitch) * 0.5); border-radius: 2px;
    box-shadow: 0 1px 0 var(--rule), 0 6px 14px -12px oklch(var(--lch-shade) / 0.4);
  }
  .card.is-decision .card-title, .card.is-decision .card-body, .card.is-decision .card-body > *, .card.is-decision .card-meta { line-height: var(--pitch); margin: 0; padding: 0; }
  .card.is-decision .card-meta { margin-block-start: var(--pitch); }
  .card.is-decision .card-actions { line-height: var(--pitch); margin-block-start: 0; }
  .card.is-decision.is-superseded { opacity: 0.65; }

  /* Evidence: a clipping, pinned to the margin. Mono, because it is what was observed. */
  .card.is-evidence {
    background: color-mix(in oklab, var(--paper), var(--desk) 40%); padding: 0.7rem 0.75rem 0.6rem; position: relative;
    font-family: var(--mono); font-size: 0.72rem; box-shadow: 0 1px 0 var(--rule), 0 6px 12px -12px oklch(var(--lch-shade) / 0.4);
    rotate: 0.4deg;
  }
  .card.is-evidence .card-title { font-family: var(--font); font-size: 0.8rem; }
  /* Pinned to the margin with a pushpin: a round head, a little light on it, a soft shadow below. */
  .card-clip {
    position: absolute; inset-block-start: -6px; inset-inline-start: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, color-mix(in oklab, var(--c-red), var(--paper) 45%) 0 18%, var(--c-red) 45%, color-mix(in oklab, var(--c-red), var(--ink) 25%) 100%);
    box-shadow: 0 2px 2px -1px oklch(var(--lch-shade) / 0.45);
  }
  .card.is-evidence:has(.card-meta) .card-meta { font-family: var(--font); }

  /* A place: a tag tied on with string, naming where something lives or runs. */
  .card.is-place {
    background: color-mix(in oklab, var(--paper), var(--desk) 55%); padding: 0.45rem 0.75rem 0.5rem 1.6rem;
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
    font-family: var(--mono); font-size: 0.72rem; position: relative;
  }
  .card.is-place::before {
    content: ""; position: absolute; inset-inline-start: 9px; inset-block-start: calc(50% - 4px); width: 8px; height: 8px;
    border-radius: 50%; background: var(--desk); box-shadow: inset 0 0 0 1.5px var(--rule);
  }
  .card.is-place .card-title { font-weight: 400; }
  .card.is-place .card-meta { font-family: var(--font); }

  /* A proposal: a change waiting for review, on a folded sheet. */
  .slip.is-proposal {
    background: var(--paper); padding: 0.55rem 0.8rem 0.6rem; border: 1px dashed var(--ink-soft); border-radius: 2px;
    background-image: linear-gradient(225deg, var(--desk) 0 10px, transparent 10px);
  }
  .slip-review { font-weight: 700; }

  /* A slip: where else this sheet is mentioned. */
  .slip.is-mention { font-size: 0.75rem; color: var(--ink-soft); padding-block: 0.2rem; }

  /* Where things stand, at the top of the binder. */

  /* The top of a margin: what it shows, as a row of small words, and + to add a card. */
  .margin-head { display: flex; align-items: flex-start; gap: 0.6rem; margin-block-end: 0.5rem; font-size: 0.72rem; color: var(--ink-soft); }
  .sheet-body .margin .margin-head { position: absolute; inset-block-start: 0; inset-inline: 0.75rem 1.5rem; z-index: 6; }
  .margin-filters { display: flex; flex-wrap: wrap; gap: 0.15rem 0.2rem; flex: 1; }
  .margin-filter { padding: 0.1rem 0.5rem; border-radius: 999px; }
  .margin-filter:hover { color: var(--ink); background: var(--desk); }
  .margin-filter.is-chosen { color: var(--ink); background: var(--desk); font-weight: 700; }
  .margin-filter[hidden] { display: none; }
  .margin-add { position: relative; }
  .margin-plus {
    display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 7px; border: 1.5px dashed var(--rule);
    color: var(--ink-soft); font-size: 1rem; line-height: 1;
  }
  .margin-plus:hover { color: var(--ink); border-color: var(--ink-soft); }
  .margin-add-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 17rem; padding: 0.4rem; display: grid;
    background: var(--raised); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 16px 36px -14px oklch(var(--lch-shade) / 0.4);
  }
  .margin-add-menu[hidden] { display: none; }
  .margin-add-choice { display: grid; gap: 0.05rem; padding: 0.4rem 0.6rem; border-radius: 7px; text-align: start; color: var(--ink); }
  .margin-add-choice:hover { background: color-mix(in oklab, var(--accent), var(--paper) 78%); }
  .margin-add-name { font-weight: 700; font-size: 0.8rem; }
  .margin-add-hint { font-size: 0.72rem; color: var(--ink-soft); }
  .slip[hidden] { display: none !important; }

  /* The binder's margin, and Home's, flow down the page. */
  .margin.is-binder { opacity: 1; pointer-events: auto; display: grid; gap: 12px; align-content: start; }

  /* A writer's mark on a slip, shown only where the margin is a stack (margin_layer.css). */
  .slip .timeline-who.slip-who { display: none; } /* beside the sheet the card's own colour says who; only the phone's pile shows the mark */
  /* Shown only where the margin is a pile on the desk (margin_layer.css): the words a card marks,
     ringed on it; and what an empty margin says. */
  .slip-quote, .margin-empty { display: none; }
  /* History is the log itself, under its name (Joey, 2026-10-11: "History should just be the log, and
     not be in an additional card"): no paper of its own, beside the sheet or in the layer. */
  .slip-history-top { display: block; margin-block-end: 0.5rem; }
  .slip-history-top .slip-who, .slip-history-last { display: none !important; }
  .slip-history-name { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }

  /* At 1080px and under, the margin is a layer over the page instead: margin_layer.css. */
}

/* Circles on the sheet: blue ballpoint, gone once round and a little past, drawn in the layer under the
   text (lib/circles.js). One blue for everyone for now; a colour picker comes later. Unlayered, like
   the editor's other styles, so CodeMirror's own rules lose. */
:root { --ballpoint: var(--ink-blue); }
.editor .cm-rings { pointer-events: none; }
.editor .cm-ring { position: absolute; color: var(--ballpoint); }
.editor .cm-ring-black { color: var(--ink-black); } .editor .cm-ring-red { color: var(--ink-red); } .editor .cm-ring-green { color: var(--ink-green); }
.editor .cm-ring svg { display: block; overflow: visible; }
.editor .cm-ring-line { fill: none; stroke: currentColor; stroke-opacity: var(--ring-strength); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.editor .cm-ring.is-pointed .cm-ring-line { stroke-opacity: 0.95; }
/* A to-do done: gone from the page, back as it used to be, faint and broken, while its card is pointed at. */
.cm-ring.is-done { opacity: 0; transition: opacity 0.18s; }
.cm-ring.is-done.is-pointed { opacity: 0.6; }
.cm-ring.is-done .cm-ring-line { stroke-dasharray: 3 4; }
.picture-ring.is-done { pointer-events: none; }
.editor .cm-content .cm-circled { cursor: pointer; }

/* Over a selection: one word, Circle. */

/* The line from a card's words to the card, while either is pointed at. */
.margin-leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; color: var(--ink-blue); }
.margin-leader path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-opacity: 0.85; }
/* Over the layer at 1080px and under: on the screen, above the dimmed page and the layer. */
.margin-leader.is-across { position: fixed; z-index: 47; }
.margin-leader circle { fill: currentColor; fill-opacity: 0.85; }
.margin-leader.cm-ring-black { color: var(--ink-black); } .margin-leader.cm-ring-red { color: var(--ink-red); } .margin-leader.cm-ring-green { color: var(--ink-green); }
.editor .cm-ring.is-pointed .cm-ring-line { stroke-opacity: 1; stroke-width: 2.2; }
/* The card pointed at stands out: lifted, and outlined in the ink of its mark. */
.card.is-pointed { box-shadow: 0 0 0 1.5px var(--ink-blue), 0 10px 22px -14px oklch(var(--lch-shade) / 0.45) !important; }

/* Rings on a picture: part of it circled in ballpoint, as words are. Dragging draws a dashed box. */
.has-rings { position: relative; }
.picture-rings { position: absolute; inset: 0; pointer-events: none; }
.picture-ring { position: absolute; pointer-events: auto; cursor: pointer; color: var(--ballpoint); }
.picture-ring.cm-ring-black { color: var(--ink-black); } .picture-ring.cm-ring-red { color: var(--ink-red); } .picture-ring.cm-ring-green { color: var(--ink-green); }
.picture-ring svg { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; }
.picture-ring .cm-ring-line { fill: none; stroke: currentColor; stroke-opacity: 0.8; stroke-width: 1.8; stroke-linecap: round; }
.picture-ring.is-pointed .cm-ring-line, .picture-ring:hover .cm-ring-line { stroke-opacity: 1; stroke-width: 2.4; }
.picture-drawing { position: absolute; border: 1.5px dashed var(--ballpoint); border-radius: 50%; }
.has-rings img { cursor: crosshair; }

/* A mark inside a table cell, drawn by the table itself: the same ballpoint, round the words. */
.editor .cm-ring.is-cell { position: static; display: inline; color: inherit; padding: 0 0.2em; border-radius: 999px; box-shadow: 0 0 0 1.4px color-mix(in oklab, var(--ballpoint), transparent 25%); cursor: pointer; }
.editor .cm-ring.is-cell.cm-ring-black { box-shadow: 0 0 0 1.4px var(--ink-black); } .editor .cm-ring.is-cell.cm-ring-red { box-shadow: 0 0 0 1.4px var(--ink-red); } .editor .cm-ring.is-cell.cm-ring-green { box-shadow: 0 0 0 1.4px var(--ink-green); }
.editor .cm-ring.is-cell.cm-mark-underline { border-radius: 0; box-shadow: 0 1.4px 0 0 var(--ballpoint); padding: 0; }
.editor .cm-ring.is-cell.is-pointed { box-shadow: 0 0 0 2.2px var(--ballpoint); }
/* A done to-do's ring in a cell has the page's two states: off the page, and back faint and broken
   (a dashed outline, never a fade, which would fade the words with it) while its card is pointed at. */
.editor .cm-ring.is-cell.is-done { box-shadow: none; cursor: text; }
.editor .cm-ring.is-cell.is-done.is-pointed { box-shadow: none; outline: 1.4px dashed color-mix(in oklab, var(--ballpoint), transparent 40%); outline-offset: 1px; }
.editor .cm-ring.is-cell.is-done.is-pointed.cm-ring-black { outline-color: color-mix(in oklab, var(--ink-black), transparent 40%); } .editor .cm-ring.is-cell.is-done.is-pointed.cm-ring-red { outline-color: color-mix(in oklab, var(--ink-red), transparent 40%); } .editor .cm-ring.is-cell.is-done.is-pointed.cm-ring-green { outline-color: color-mix(in oklab, var(--ink-green), transparent 40%); }

/* A paper's fields: a plain list at the top of its margin, each value written where it is. */
  .slip.is-fields { padding: 0.5rem 0.7rem 0.6rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); font-size: 0.8rem; }
  .fields-list { display: grid; gap: 0.2rem; margin: 0; }
  .fields-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; }
  .fields-row dt { color: var(--ink-soft); font-size: 0.74rem; }
  .fields-row dd { margin: 0; min-width: 0; }
  .fields-row .db-value { min-height: 1.3em; }
  .fields-row .db-edit input, .fields-row .db-edit select { max-width: 100%; }
  .fields-made { margin-block-start: 0.4rem; font-size: 0.7rem; color: var(--ink-soft); }

@layer components {
  /* A mention of an agent ([[Claude]]): its small mark before its name, a way to its page. */
  .card-mention.is-agent { display: inline-flex; align-items: center; gap: 0.3em; vertical-align: middle; }
  .card-mention-mark { width: 1.1em !important; height: 1.1em !important; font-size: 0.42em !important; }
}