under a * hairline, so the page reads as a sequence of cards rather than one * undifferentiated column — the seam is the fact that you crossed from * one card to the next. The rule is the same 1px --sc-border the body * header hangs under, at the reading measure, not the pane's width. */ .body-card-more { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--rs-divider); } /* The section's own H2 opens the card, so it needs no lead-in space * of its own on top of the padding above. */ .body-card-more .body-content > :first-child { margin-top: 0; } /* Foot-of-page control: keeps the reading measure and centres in it, * so it sits under the prose rather than out at the pane's edge. */ .load-more { max-width: 720px; display: flex; justify-content: center; margin: 48px 0 8px; } .load-more-btn { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--rs-font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--rs-text); background: var(--rs-surface); border: 1px solid var(--rs-divider); border-radius: 999px; padding: 9px 22px; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .load-more-btn:hover { background: var(--rs-text); color: #fff; border-color: var(--rs-text); } /* How far through the subtree this click takes you. Dimmed against the * label, and it has to survive the inverted hover, so the muted token * gives way to a plain alpha. */ .load-more-count { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.62; } /* Nothing left to load. A quiet full stop rather than a disabled * button, which would look like a control that had failed. */ .load-more-end { font-family: var(--rs-font-ui); font-size: 12px; letter-spacing: 0.04em; color: var(--rs-meta); } .body-card .body-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0 0; } .body-card .body-tag { background: var(--sc-palette-tint); color: var(--sc-palette-bg); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } /* Typed fields (card-as-typed-object) — a definition list above the body. */ .body-card .card-fields { margin: 16px 0 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 14px; } .body-card .card-fields .field-item { display: contents; } .body-card .card-fields .field-key { color: var(--rs-meta); font-weight: 600; letter-spacing: 0.02em; } .body-card .card-fields .field-val { margin: 0; color: var(--rs-text); overflow-wrap: anywhere; } .body-card .card-fields .field-val a { color: var(--sc-palette-tint, #000); } .body-card .card-fields .field-chip { display: inline-block; background: var(--sc-palette-tint); color: var(--sc-palette-bg); font-size: 12px; padding: 1px 8px; border-radius: 999px; margin: 0 2px 2px 0; } /* A date claim's provenance ("as written"), rendered beside the canonical value — never a hover secret (spec/refactor/dates.md §Visible derivation). */ .body-card .card-fields .field-raw { color: var(--rs-meta); font-size: 12px; } /* Citation card = a read-only library index card (mirrors the editor): a left margin with the @citekey call-number + a type glyph/label, a red margin rule, two faint blue rules (top + under the title), and the main column carrying the title heading, the details (author · year, venue), the doi/url links, and the abstract (the card body). */ .body-card.citation-index-card { max-width: 760px; /* The parchment palette — hand-mirror of the app-side definition on :global(.editor.citation-index-card) in src/editor/CardEditor.svelte (the published page loads no app CSS). Change BOTH or neither. */ --cite-rule-red: #e2a49b; --cite-rule-blue: #bcd4e8; --cite-rule-blue-faint: #dfeaf2; --cite-sepia: #8a6d3b; --cite-sepia-dark: #7a5c1e; --cite-ink: #4a4436; --cite-ink-strong: #26221a; --cite-paper: #f3ecd8; --cite-paper-hover: #efe6cd; --cite-border: #e4d8b8; --cite-border-dashed: #cbb98a; --cite-tan: #a8935f; --cite-tan-label: #a08b6a; --cite-placeholder: #b7a074; --cite-dot: #b7ab90; --cite-focus: #b89a5e; --cite-cream: #faf5e6; --cite-control-bg: #fff; --cite-warn: #b45309; --cite-wash: rgba(122, 92, 30, 0.06); --cite-wash-strong: rgba(122, 92, 30, 0.1); } /* The parchment after dark — hand-mirror of the app-side dark block on :global(:root[data-rs-appearance='dark']) .editor.citation-index-card. Change BOTH or neither. These 21 tokens are tuned as PAPER, so on a dark page they are restated rather than inherited or the card reads as a lightbox burning a hole in the page: the paper darkens, the sepia and tan inks lift to hold contrast, and the ruled lines keep their red/blue identity at lower saturation so it still reads as ruled stock. */ :root[data-rs-appearance='dark'] .body-card.citation-index-card { --cite-rule-red: #7d4a44; --cite-rule-blue: #47606f; --cite-rule-blue-faint: #2f3d47; --cite-sepia: #c9a86b; --cite-sepia-dark: #d8b978; --cite-ink: #ddd5c2; --cite-ink-strong: #f1ebdc; --cite-paper: #262218; --cite-paper-hover: #2d281d; --cite-border: #443c29; --cite-border-dashed: #574c33; --cite-tan: #a8935f; --cite-tan-label: #b09b76; --cite-placeholder: #8a7a58; --cite-dot: #6f6752; --cite-focus: #c8a765; --cite-cream: #201d15; --cite-control-bg: #322d24; --cite-warn: #e0a052; --cite-wash: rgba(216, 185, 120, 0.08); --cite-wash-strong: rgba(216, 185, 120, 0.14); } .body-card.citation-index-card .cite-idx { position: relative; display: grid; grid-template-columns: 104px 1fr; column-gap: 20px; padding-top: 12px; border-top: 1px solid var(--cite-rule-blue-faint); } .body-card.citation-index-card .cite-idx::before { content: ''; position: absolute; top: 0; bottom: 0; left: 104px; width: 1px; background: var(--cite-rule-red); pointer-events: none; } .cite-idx-margin { padding-left: 4px; min-width: 0; } .cite-idx-callno { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; color: var(--cite-sepia); word-break: break-all; } .cite-idx-type { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; padding: 8px 4px; background: var(--cite-paper); border: 1px solid var(--cite-border); border-radius: 8px; color: var(--cite-sepia-dark); } .cite-idx-type-icon { display: flex; } .cite-idx-type-icon svg { width: 20px; height: 20px; } .cite-idx-type-label { font-size: 11px; line-height: 1.15; text-align: center; color: var(--cite-sepia-dark); } .cite-idx-main { min-width: 0; } /* A web citation's preview: the page's poster at the details' right edge, a small cover the reader can open; the frame below clears it. */ .cite-idx-preview { float: right; display: block; width: 168px; height: 104px; margin: 0 0 8px 14px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, 0.04); } .cite-idx-preview-img { display: block; width: 100%; height: 100%; background-repeat: no-repeat; } .cite-idx-frame { margin: 1rem 0 0; } /* The frame starts at the text column — the 104px margin plus the 20px gap of the .cite-idx grid above it — level with the title and clear of the red rule's line, as the editor's footer slot is (2026-09-07). */ .body-card.citation-index-card .cite-idx-frame { margin-left: 124px; } .cite-idx-frame .media-el-embed { width: 100%; height: 60vh; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; display: block; } .cite-idx-frame .media-open-link { display: inline-block; margin-top: 0.35rem; font-size: 0.85rem; } .cite-idx-title { margin: 0 0 0.5rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--cite-rule-blue); font-family: var(--rs-font-heading); font-size: 1.6rem; line-height: 1.2; font-weight: 600; color: var(--rs-text); } .cite-idx-details { margin: 0.6rem 0 0; font-family: var(--rs-font-heading); font-size: 16.5px; line-height: 1.75; color: var(--cite-ink-strong); } .cite-idx-details em { font-style: italic; } .cite-idx-links { margin-top: 6px; font-size: 13px; color: var(--rs-meta); } .cite-idx-links .citation-link { color: var(--sc-palette-bg, #0875b9); text-decoration: none; border-bottom: 1px solid var(--sc-palette-tint-strong, rgba(8, 117, 185, 0.22)); overflow-wrap: anywhere; } .cite-idx-links .cite-idx-dot { color: var(--cite-dot); } .body-card.citation-index-card .cite-idx-abstract { margin-top: 1.1rem; } /* Narrow collapse — mirrors the editor face's ≤600px behaviour at the viewer's own single-column breakpoint (720px, same as .app's): the 104px margin column ate ~40% of a phone-width line. The margin becomes a TOP band (call-number + type chip in a row) carrying the red rule as its bottom border; the full-height rule goes away; the grid single-columns. */ @media (max-width: 720px) { .body-card.citation-index-card .cite-idx { grid-template-columns: 1fr; } .body-card.citation-index-card .cite-idx::before { display: none; } .cite-idx-margin { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-left: 0; padding-bottom: 8px; border-bottom: 1px solid var(--cite-rule-red); } .cite-idx-margin .cite-idx-type { margin-top: 0; } .body-card.citation-index-card .cite-idx-frame { margin-left: 0; } } /* Table card = a scholarly FIGURE (spec/refactor/published-tables-maps.md §Published table appearance): the grid, the card body below it as the caption, a quiet provenance footer under that. Its own scoped section with its own custom properties, on the citation card's precedent — nothing here leaks into a GFM table inside ordinary prose (which keeps the .body-content rules above). The grid is its own scroll box with a sticky header, for the reason the editor's is (card-types.md §The grid viewport): past ~30 rows the column names are gone and you are reading values you can no longer name. A figure is also the one card that earns more than the reading measure, so the card widens to the pane. */ .body-card.table-card { max-width: none; --tf-rule: var(--rs-border); --tf-rule-strong: var(--rs-meta); --tf-head-bg: var(--rs-surface); --tf-gutter-ink: var(--rs-meta); --tf-ink: var(--rs-text); --tf-zebra: color-mix(in srgb, var(--tf-rule) 22%, transparent); } .table-figure { margin: 0; } /* NOT a scroll container, on either axis — the grid takes the width and height its sheet needs, the card widens to hold it (the `:has` rule on `.body-card` below), and the body pane is the one scroller. Two rounds of JS (a floated header, a hand-split wheel) existed only to serve a nested scroll box; with one scroller, `position: sticky` pins the header and the row gutter natively and the JS is gone. */ .table-figure .tf-scroll { /* Hug a narrow sheet. A full-width box around a four-column table left the header rule and the zebra stripes ending in mid-air. */ width: max-content; /* A stacking context: the sticky cells' z-indexes stay sealed in one layer below anything the page pins above the grid. */ position: relative; z-index: 0; border: 1px solid var(--tf-rule); border-radius: 3px; background: var(--tf-head-bg); } /* The reading measure is right for prose and a straitjacket for a wide sheet: a card holding a table grows to it, and the pane scrolls. */ .body-card:has(.table-figure) { max-width: none; width: fit-content; min-width: min(720px, 100%); } .table-figure .tf-grid { border-collapse: separate; /* `collapse` drops a sticky header's borders */ border-spacing: 0; font-size: 13px; line-height: 1.5; color: var(--tf-ink); font-variant-numeric: tabular-nums; } .table-figure .tf-grid th, .table-figure .tf-grid td { padding: 4px 10px; text-align: left; font-weight: 400; white-space: pre; max-width: 32rem; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--tf-rule); } .table-figure .tf-grid thead th { position: sticky; /* The pane's top edge, not its padding edge — see `.body-pane`. Pinned at `top: 0` the header floated 56px down with rows scrolling past above it. */ top: calc(-1 * var(--pane-pad-top, 0px)); z-index: 2; /* Against the BODY PANE — the figure's own box is not a scroll container, so the pane's scrollport is the one sticky resolves against. Native. */ background: var(--tf-head-bg); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; /* The rule is drawn on the floating box itself so the rows passing under it have a line to disappear under. */ box-shadow: inset 0 -2px 0 var(--tf-rule-strong); border-bottom: none; } .table-figure .tf-grid tbody tr:nth-child(even) td { background: var(--tf-zebra); } /* The row gutter is sticky, so the cells scroll UNDER it — and the stripe is translucent (a `transparent` mix). Laid straight on, it made every striped row's number a window onto the cell passing beneath. The stripe goes over the gutter's own opaque ground instead. */ .table-figure .tf-grid tbody tr:nth-child(even) .tf-rownum { background: linear-gradient(var(--tf-zebra), var(--tf-zebra)), var(--tf-head-bg); } .table-figure .tf-grid tbody tr:last-child :is(td, th) { border-bottom: none; } /* Merged cells (a column set to merge repeated values): the run reads as one cell. A continuation's ink goes; the rule between two rows of a run goes (the upper cell's bottom rule — this grid draws rules below cells); and every cell of a run wears its HEAD row's stripe, so the zebra does not cut one tall cell into bands. `tr > td` matches the stripe rule's weight. */ .table-figure .tf-grid tbody tr > td.tf-mcont { color: transparent; } .table-figure .tf-grid tbody tr > td.tf-mnext { border-bottom-color: transparent; } .table-figure .tf-grid tbody tr > td.tf-mp { background: transparent; } .table-figure .tf-grid tbody tr > td.tf-mz { background: var(--tf-zebra); } /* The row number is the sheet's coordinate system — the thing you quote to someone else — so it keeps meaning the stored position. Sticky on its own axis, and opaque, or the scrolled columns show through it. */ .table-figure .tf-rownum { position: sticky; /* The pane's left edge, for the same reason the header reaches for its top. */ left: calc(-1 * var(--pane-pad-x, 0px)); z-index: 1; background: var(--tf-head-bg); color: var(--tf-gutter-ink); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; user-select: none; } .table-figure .tf-corner { z-index: 3; } /* Written at the same selector depth as the th/td rule above, or it loses to it and every number sits left. */ .table-figure .tf-grid :is(th, td).tf-num { text-align: right; } /* A value's weight (cell-fills.ts: `bold` beside a colour), as the app draws it. */ .table-figure .tf-grid td.tf-bold { font-weight: 600; } .table-figure .tf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .table-figure .tf-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; } .table-figure .tf-btn { font: inherit; font-size: 12px; color: var(--rs-text); background: var(--rs-surface); border: 1px solid var(--tf-rule); border-radius: 999px; padding: 3px 12px; cursor: pointer; } .table-figure .tf-btn:hover { border-color: var(--tf-rule-strong); } .table-figure .tf-count, .table-figure .tf-note { font-size: 12px; color: var(--rs-meta); margin: 8px 0 0; } .table-figure .tf-note-error { color: var(--cite-warn, #b45309); } /* The card widens to the pane for the GRID's sake; the caption is prose and keeps the reading measure, or a 12-column sheet gives its own caption a 140-character line. */ .table-figure .tf-caption, .table-figure .tf-credits, .map-figure .tf-credits { margin-top: 20px; max-width: var(--rs-measure, 720px); } /* Provenance, rendered by default and never as a hover secret. Quiet enough to read as apparatus, present enough to be found. The map figure wears the same footer — its column roll is the same roll, over the columns the scene reads, and its basemap lines join it rather than starting a second apparatus somewhere else on the card. */ .table-figure .tf-credits, .map-figure .tf-credits { padding-top: 8px; border-top: 1px solid var(--tf-rule); font-size: 11px; line-height: 1.6; color: var(--rs-meta); } /* One roll per line — the renamed-headers note and the derivation note answer different questions, and running them together reads as one long sentence whose halves don't agree. */ .table-figure .tf-credits-roll, .map-figure .tf-credits-roll { display: block; } .table-figure .tf-credits-label, .map-figure .tf-credits-label { margin-right: 6px; } .table-figure .tf-credit + .tf-credit::before, .map-figure .tf-credit + .tf-credit::before { content: ' · '; } .table-figure .tf-credits code, .map-figure .tf-credits code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95em; } /* Search card (spec/refactor/published-search.md): the answer its author published — never the live query. The list face reads as the app's search card reads (SearchHits.svelte: the kind, the title, the opening of the text, the chips that say why), in the reading surface's own ink; the table face is the table figure above, its rows opening the cards they name. */ .body-card.search-card { --sf-rule: var(--rs-border); --sf-muted: var(--rs-meta); --sf-wash: color-mix(in srgb, var(--sf-rule) 40%, transparent); } .search-figure { margin: 0; } .search-figure .sf-hits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sf-rule); } .search-figure .sf-hit { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px 9px; border-bottom: 1px solid var(--sf-rule); cursor: pointer; } .search-figure .sf-hit:hover { background: var(--sf-wash); } .search-figure .sf-hit-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .search-figure a.sf-title { color: inherit; text-decoration: none; } .search-figure a.sf-title:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; } /* The snippet's own links are inert, as in the sidebar's previews: the hit is the target. Its code spans read as code. */ .search-figure .sf-snippet a { pointer-events: none; } .search-figure .sf-snippet code { font-size: 0.9em; background: var(--sf-wash); border-radius: 3px; padding: 0 3px; } .search-figure .sf-kind { flex: none; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-muted); border: 1px solid var(--sf-rule); border-radius: 4px; padding: 0 5px; } .search-figure .sf-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A hit in another of the author's outlines (published-search.md §U3) is a link to its own page: the outline it is in rides after the title, quieter, and the arrow says the click leaves this page. */ .search-figure .sf-outline { flex: none; font-size: 12px; color: var(--sf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; } .search-figure .sf-outline::before { content: '↗ '; } .search-figure .sf-snippet { color: var(--sf-muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .search-figure .sf-why { display: flex; flex-wrap: wrap; gap: 4px; } .search-figure .sf-why-chip { font-size: 10px; color: var(--sf-muted); background: var(--sf-wash); border-radius: 3px; padding: 0 5px; } .search-figure .sf-count, .search-figure .sf-note { font-size: 12px; color: var(--sf-muted); margin: 8px 0 0; } /* The card already holds the measure (and gives it up in portrait); a list does not widen the card the way a grid does, so its caption needs none of its own. */ .search-figure .sf-caption { margin-top: 20px; } /* The reader's box (published-search.md U2): the scope as the finder's own chip — × where the author freed it — and the reader's line beside it. One bordered field, so the chip reads as part of the question. The input is 16px at the least: iOS zooms the page into any smaller field it focuses. */ .search-figure .sf-reader { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 12px; padding: 4px 6px 4px 8px; border: 1px solid var(--sf-rule); border-radius: 8px; } .search-figure .sf-reader:focus-within { border-color: color-mix(in srgb, currentColor 45%, var(--sf-rule)); } .search-figure .sf-scopes { display: inline-flex; align-items: center; gap: 2px; flex: none; max-width: 100%; } .search-figure .sf-scope { font-size: 12px; color: var(--sf-muted); background: var(--sf-wash); border-radius: 999px; padding: 1px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .search-figure .sf-scope + .sf-scope { margin-left: 4px; } .search-figure a.sf-scope-name { color: inherit; font-weight: 600; text-decoration: none; } .search-figure a.sf-scope-name:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 2px; } .search-figure button.sf-scope-off { font: inherit; font-size: 12px; color: var(--sf-muted); background: transparent; border: 1px dashed var(--sf-rule); border-radius: 999px; padding: 1px 9px; margin-left: 4px; white-space: nowrap; cursor: pointer; } .search-figure button.sf-scope-off:hover { color: inherit; background: var(--sf-wash); } .search-figure .sf-scope-x, .search-figure .sf-reader-clear { font: inherit; color: var(--sf-muted); background: transparent; border: 0; cursor: pointer; padding: 2px 4px; border-radius: 4px; } .search-figure .sf-scope-x { font-size: 15px; line-height: 1; } .search-figure .sf-reader-clear { font-size: 12px; } .search-figure .sf-scope-x:hover, .search-figure .sf-reader-clear:hover { color: inherit; background: var(--sf-wash); } .search-figure .sf-reader-input { flex: 1 1 6em; min-width: 0; font: inherit; font-size: max(16px, 1em); color: inherit; background: transparent; border: 0; outline: none; padding: 4px 2px; -webkit-appearance: none; appearance: none; } .search-figure .sf-reader-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .search-figure .sf-reader-note code { font-size: 0.95em; } /* A table-faced card's box sits above its grid, outside the figure the grid draws. */ .search-figure.sf-lead { margin-bottom: 0; } /* A search grid's row opens the card it names (renderers/table.js `targets`): the whole row takes the click, and its first cell is the link the keyboard reaches. */ .table-figure .tf-grid tbody tr.tf-link { cursor: pointer; } .table-figure .tf-grid tbody tr.tf-link:hover > td { background: color-mix(in srgb, var(--tf-rule) 45%, transparent); } .table-figure .tf-grid .tf-hit { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; } /* Map card = the same figure posture as the table (spec/refactor/ published-tables-maps.md §Published map appearance): the drawn scene, the card body below it as the caption. Its own scoped section, and the mark colours are the panel's own (MapPanel.svelte's