/* SPDX-License-Identifier: MIT OR Apache-2.0 * * notation.css — the key to the manuscript's sigla, styled once for the two * places it is read: the book page's notation toggle (a sheet above the * section-nav bar) and the front matter's sigla leaf (the whole key at rest). * Shared so the two can never drift apart; the markup they share is in * btc-notation.js. * * The file also holds the chrome of the sheet itself — the toggle in the nav * bar and the panel it raises — because the bar now carries two of them: the * notation key, which every page has, and the commentary on this passage, * which only some do (btc-commentary.js). Two keys to a page, dressed alike * and opening into the same slot, so a reader learns one gesture. */ /* ── The nav bar's sheets: a toggle centred in the section-nav bar which, opened, raises its panel above the bar (absolute against the sticky nav), scrolling within itself rather than growing the bar. ── */ .nav-sheet { margin: 0; min-width: 0; } .nav-sheet summary { cursor: pointer; font:500 11px/1 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color: var(--dim); list-style: none; text-align: center; } .nav-sheet summary::-webkit-details-marker { display: none; } .nav-sheet summary::before { content: '+ '; color: var(--accent); } .nav-sheet[open] summary::before { content: '– '; } .nav-sheet-body { position: absolute; bottom: 100%; left: 0; right: 0; max-height: min(64vh, 560px); overflow-y: auto; overscroll-behavior: contain; background: var(--page); border-top: 1px solid var(--rule); padding: 16px 2px 12px; } /* The sheet rises and falls rather than blinking. Short — a key is furniture, and a reader opening one mid-sentence should not be made to wait for it. Opening needs no script: the panel is display:none until the details opens, so simply appearing starts the animation. Closing does, since the panel has to finish falling before the details drops it (see closeSheet). */ @keyframes sheet-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* No from: the fall starts wherever the panel is, so one released past the dismiss threshold carries on from the finger instead of snapping back to zero first. Clicked shut, it starts at rest and falls the whole way. */ @keyframes sheet-fall { to { opacity: 0; transform: translateY(24px); } } .nav-sheet[open] > .nav-sheet-body { animation: sheet-rise 130ms cubic-bezier(.2,.7,.3,1); } .nav-sheet.closing > .nav-sheet-body { animation: sheet-fall 110ms ease-in forwards; } /* A finger dragging the sheet down carries it, so the gesture is visibly the one that dismisses it; released short of the threshold, it springs back. */ .nav-sheet.dragging > .nav-sheet-body { animation: none; transition: none; } .nav-sheet.springing > .nav-sheet-body { transition: transform 120ms ease-out; transform: none; } @media (prefers-reduced-motion: reduce) { .nav-sheet[open] > .nav-sheet-body, .nav-sheet.closing > .nav-sheet-body { animation: none; } .nav-sheet.springing > .nav-sheet-body { transition: none; } } /* The scope line above the key: what the sheet is showing, and the way to the whole of it. Apparatus about the key, not part of it. */ .key-scope { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; } .key-scope-note { font: italic 400 calc(13px * var(--scale-notation, 1))/1.4 'Newsreader',serif; color: var(--meta); } .key-scope-link { font: 500 calc(11px * var(--scale-notation, 1))/1 'IBM Plex Mono',monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } /* ── Notation: a key to the manuscript's sigla — the glyphs that notate a script's opcodes, and the marks drawn in each transaction's margins. ── */ /* The key's text follows the reader's chosen type size for the notation region (--scale-notation, set on by btc-fontscale.js; 1 wherever it isn't -- the module writes effective values, so the key follows the body size until the reader diverges it). Every size that carries the key's content scales; the toggle in the nav bar is chrome and holds. */ .notation-group { margin: 0 0 22px; } .notation-group > h4 { margin: 0 0 11px; font: 600 calc(10px * var(--scale-notation, 1))/1 'IBM Plex Mono',monospace; letter-spacing:.18em; text-transform: uppercase; color: var(--accent); } .glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 7px 22px; } .glyph-row { display: flex; align-items: baseline; gap: 12px; } .glyph-row .g { flex: 0 0 1.7em; text-align: center; font: 400 calc(17px * var(--scale-notation, 1))/1.3 'Newsreader', system-ui, 'Segoe UI Symbol', 'Apple Symbols', serif; color: var(--ink); font-variant-numeric: normal; } .glyph-row .g i { font-style: normal; opacity: .5; font-size: .82em; } .glyph-row .m { font: 400 calc(13px * var(--scale-notation, 1))/1.45 'Public Sans', sans-serif; color: var(--dim); } .glyph-row .m b { color: var(--ink-soft); font-weight: 500; } /* Data-type letters (p s h r w t) glow gold in the key, as they do on chain. */ .glyph-row .g b { color: var(--accent); } .notation-note { margin: 12px 0 0; font-size: calc(12px * var(--scale-notation, 1)); line-height: 1.5; color: var(--meta); } /* Common script patterns: one row per payment type, read as a state transition -- the unspent output at rest (UTXO), the script a node runs then discards (validator), and the spend that consumes it, split across where it lives on the wire: the input's scriptSig (STXO) and its witness (Witness). Legacy types write the STXO and leave the witness empty; segwit types empty the scriptSig (∅) and write the witness. Wide, so it scrolls in its own container on narrow screens. */ .pattern-scroll { overflow-x: auto; } .pattern-table { display: grid; grid-template-columns: repeat(5, max-content); gap: 9px 22px; align-items: baseline; } .pattern-table .phead, .pattern-table .pname { font: 600 calc(10px * var(--scale-notation, 1))/1.5 'IBM Plex Mono',monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--meta); white-space: nowrap; } .pattern-table .phead { color: var(--accent); } .pattern-table .seq { font: 400 calc(16px * var(--scale-notation, 1))/1.5 'Newsreader', system-ui, 'Segoe UI Symbol', serif; color: var(--ink-soft); white-space: nowrap; } .pattern-table .none { color: var(--meta); } /* Gold and bold mark what the chain keeps: the UTXO's lock, the STXO's authorization, and any datum read from a confirmed output -- a committed hash. White, regular weight marks the ephemeral validator: the operations it runs, plus the transaction's own data, which stays unverified until a block puts it on chain (where it turns gold). Bold carries the split into a black-and-white print. */ .pattern-table .op { font-weight: 700; } .pattern-table .op-push { font-weight: 400; } .pattern-table .ph { color: var(--accent); font-style: normal; font-weight: 700; } .pattern-table .seq.exec .op, .pattern-table .seq.exec .ph { color: var(--ink); font-weight: 400; } .pattern-table .seq.exec .ph.chain { color: var(--accent); font-weight: 700; } /* The Lightning table carries two extra columns: what each channel party computes independently, off chain -- keys from its own secret k, signatures, and the same script hash h, reached without a secret crossing the wire. Off-chain work never turns gold, so calc rows render plain throughout. */ .pattern-table.two-party { grid-template-columns: repeat(7, max-content); } .pattern-table .seq.calc .op, .pattern-table .seq.calc .ph { color: var(--ink); font-weight: 400; } @media (max-width: 480px) { .glyph-grid { grid-template-columns: 1fr; } }