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(--sc-border); } /* 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(--sc-body-font); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--sc-text); background: var(--sc-row-bg, #fff); border: 1px solid var(--sc-border); 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(--sc-text); color: #fff; border-color: var(--sc-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(--sc-body-font); font-size: 12px; letter-spacing: 0.04em; color: var(--sc-muted); } .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(--sc-muted, #777); font-weight: 600; letter-spacing: 0.02em; } .body-card .card-fields .field-val { margin: 0; color: var(--sc-text, #111); 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(--sc-palette-muted, #8a8a86); 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; } .cite-idx-title { margin: 0 0 0.5rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--cite-rule-blue); font-family: var(--sc-heading-font, 'Playfair Display', Georgia, serif); font-size: 1.6rem; line-height: 1.2; font-weight: 600; color: var(--sc-text, #1a1a1a); } .cite-idx-details { margin: 0.6rem 0 0; font-family: var(--sc-heading-font, Georgia, 'Times New Roman', serif); 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(--sc-muted, #777); } .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; } } /* 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, var(--sc-border, #e5e5e0)); --tf-rule-strong: var(--sc-muted, #6b6b6b); --tf-head-bg: var(--sc-row-bg, #ffffff); --tf-gutter-ink: var(--sc-muted, #6b6b6b); --tf-ink: var(--rs-text, var(--sc-text, #1a1a1a)); --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; top: 0; 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, .table-figure .tf-grid tbody tr:nth-child(even) .tf-rownum { background: var(--tf-zebra); } .table-figure .tf-grid tbody tr:last-child :is(td, th) { border-bottom: none; } /* 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; left: 0; 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; } .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(--sc-text); background: var(--sc-row-bg, #fff); 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(--sc-muted, #6b6b6b); 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(--sc-muted, #6b6b6b); } /* 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; } /* 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