/* Bill Companion — legal-document reading UI. Two colour schemes; the toggle stamps data-theme on and must beat the media query in both directions, so every token is declared three times. */ :root { --bg: #f7f6f3; --panel: #ffffff; --ink: #1b1a17; --ink-dim: #5f5b52; --ink-faint: #8b857a; --rule: #e2ded6; --rule-strong: #cdc7bb; --accent: #7a4b1e; --accent-soft: #f0e2d2; --usc: #1f5f3f; --usc-soft: #dcefe4; --cfr: #1e4e79; --cfr-soft: #dbe8f5; --law: #6b3a7a; --law-soft: #ece0f2; --internal-soft: #ece9e2; --warn: #8a5a00; --warn-soft: #faeece; --err: #9b2c2c; --err-soft: #f7e0e0; /* Diff colours are their own tokens, not aliases of --usc/--err: those carry "U.S. Code" and "error" meaning elsewhere, and added/removed text must not shift if either is retuned. */ --ins: #14663a; --ins-soft: #dcf2e5; --del: #9e2b2b; --del-soft: #fbe2e2; --focus: #b8860b; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05); --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; } @media (prefers-color-scheme: dark) { :root { --bg: #14140f; --panel: #1c1c17; --ink: #eae6dc; --ink-dim: #a8a294; --ink-faint: #7d7767; --rule: #302f27; --rule-strong: #45443a; --accent: #d9a066; --accent-soft: #3a2c1c; --usc: #6cc194; --usc-soft: #1c3329; --cfr: #77b0e0; --cfr-soft: #17293a; --law: #c193d6; --law-soft: #2e2036; --internal-soft: #2a2922; --warn: #e0b366; --warn-soft: #33280f; --err: #e58b8b; --err-soft: #3a1e1e; --ins: #7fd3a3; --ins-soft: #17331f; --del: #f09a9a; --del-soft: #3b1d1d; --focus: #d9b04a; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); } } :root[data-theme="light"] { --bg: #f7f6f3; --panel: #ffffff; --ink: #1b1a17; --ink-dim: #5f5b52; --ink-faint: #8b857a; --rule: #e2ded6; --rule-strong: #cdc7bb; --accent: #7a4b1e; --accent-soft: #f0e2d2; --usc: #1f5f3f; --usc-soft: #dcefe4; --cfr: #1e4e79; --cfr-soft: #dbe8f5; --law: #6b3a7a; --law-soft: #ece0f2; --internal-soft: #ece9e2; --warn: #8a5a00; --warn-soft: #faeece; --err: #9b2c2c; --err-soft: #f7e0e0; --focus: #b8860b; --ins: #14663a; --ins-soft: #dcf2e5; --del: #9e2b2b; --del-soft: #fbe2e2; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05); } :root[data-theme="dark"] { --bg: #14140f; --panel: #1c1c17; --ink: #eae6dc; --ink-dim: #a8a294; --ink-faint: #7d7767; --rule: #302f27; --rule-strong: #45443a; --accent: #d9a066; --accent-soft: #3a2c1c; --usc: #6cc194; --usc-soft: #1c3329; --cfr: #77b0e0; --cfr-soft: #17293a; --law: #c193d6; --law-soft: #2e2036; --internal-soft: #2a2922; --warn: #e0b366; --warn-soft: #33280f; --err: #e58b8b; --err-soft: #3a1e1e; --focus: #d9b04a; --ins: #7fd3a3; --ins-soft: #17331f; --del: #f09a9a; --del-soft: #3b1d1d; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); } * { box-sizing: border-box; } /* The `hidden` attribute must always win. The UA stylesheet's `[hidden] { display: none }` loses to ANY author rule that sets display — author origin beats user-agent origin regardless of specificity. So `.modal { display: grid }` silently defeats `modal.hidden = true`, leaving the paste dialog permanently on screen and making its Parse button look dead. Same trap for `.billmeta { display: flex }`. Declare it once, here. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------------- topbar */ .topbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--rule); flex: 0 0 auto; flex-wrap: wrap; } .brand { font-weight: 650; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; } .brand .mark { font-family: var(--serif); font-size: 22px; color: var(--accent); line-height: 1; transform: translateY(1px); } .loaders { display: flex; gap: 6px; } .spacer { flex: 1 1 auto; } .btn { font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 7px; border: 1px solid var(--rule-strong); background: var(--panel); color: var(--ink); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; } .btn:hover { background: var(--accent-soft); border-color: var(--accent); } .btn.ghost { border-color: transparent; background: transparent; color: var(--ink-dim); } .btn.ghost:hover { background: var(--accent-soft); color: var(--ink); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.tiny { font-size: 12px; padding: 3px 8px; } .btn.icon { font-size: 15px; padding: 5px 9px; } .btn:focus-visible, a:focus-visible, select:focus-visible, .gutter:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* The library menu behind "Load a bill". Anchored to its own wrapper so it hangs under the button wherever the toolbar wraps, and capped in height because thirteen entries is taller than a short viewport. */ .menuwrap { position: relative; display: inline-block; } .menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 40; min-width: 302px; max-width: min(94vw, 400px); max-height: min(62vh, 460px); overflow-y: auto; background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 9px; padding: 4px; box-shadow: 0 8px 26px rgba(0, 0, 0, .17); } .menuitem { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; width: 100%; text-align: left; font: inherit; cursor: pointer; background: none; border: 0; border-radius: 6px; padding: 7px 9px; color: var(--ink); } .menuitem:hover, .menuitem:focus-visible { background: var(--accent-soft); outline: none; } .menuitem:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); } .menuitem-name { font-size: 13px; font-weight: 600; } /* Right-aligned and dimmed: the size is a warning about load time, not a label, and it must not compete with the bill's name for the eye. */ .menuitem-size { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; align-self: center; } .menuitem-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-dim); margin-top: 1px; line-height: 1.35; } .billmeta { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .billmeta .desig { font-family: var(--mono); font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent); padding: 2px 7px; border-radius: 5px; white-space: nowrap; } .billmeta .short { font-size: 13px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42ch; } .status { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .status.busy::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 6px; border: 2px solid var(--rule-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; } @keyframes spin { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------- split */ .split { flex: 1 1 auto; display: grid; grid-template-columns: var(--split, 1fr) 7px minmax(0, 1fr); min-height: 0; } .pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); } .pane-bill { border-right: 1px solid var(--rule); } .pane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--rule); flex: 0 0 auto; background: var(--panel); position: sticky; top: 0; z-index: 2; } .pane-head h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); } .pane-tools { display: flex; align-items: center; gap: 8px; } .pane-body { flex: 1 1 auto; overflow: auto; padding: 18px 22px 60vh; scroll-behavior: smooth; } .pane-ctx .pane-body { padding-bottom: 30vh; } .gutter { background: var(--rule); cursor: col-resize; } .gutter:hover, .gutter.dragging { background: var(--accent); } .chk { font-size: 12px; color: var(--ink-dim); display: flex; align-items: center; gap: 4px; cursor: pointer; } .jump { font: inherit; font-size: 12px; max-width: 22ch; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--panel); color: var(--ink); } /* ----------------------------------------------------------------- empty */ .empty { height: 100%; display: grid; place-items: center; padding: 30px; } .empty-inner { text-align: center; max-width: 34ch; } .empty .big { font-family: var(--serif); font-size: 54px; color: var(--rule-strong); line-height: 1; } .empty h3 { margin: 10px 0 4px; font-size: 16px; font-weight: 600; } .empty p { margin: 5px 0; font-size: 13px; color: var(--ink-dim); } .dim { color: var(--ink-faint) !important; font-size: 12px !important; } .split.dragover .pane-bill { background: var(--accent-soft); } /* ------------------------------------------------------------- bill text */ .billtext { font-family: var(--serif); font-size: 16px; line-height: 1.62; max-width: 74ch; } .billtext p { margin: 0 0 .72em; white-space: pre-wrap; } .billtext .sec-head { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin: 1.9em 0 .55em; padding-top: .5em; border-top: 1px solid var(--rule); scroll-margin-top: 54px; } .billtext .sec-head:first-child { margin-top: 0; border-top: 0; padding-top: 0; } /* An appropriations heading IS the provision's first sentence — "Sec. 101. Not later than 30 days after the last day of each month, …". It keeps the rule and the spacing that mark a new section, and drops the caps and the accent colour, which would otherwise shout a whole paragraph of prose. */ .billtext .sec-head.run-in { font-family: var(--serif); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); } /* Where the section sits, above its own heading. Sits inside the .sec-head paragraph, so it has to opt out of that rule's caps and accent colour. */ .billtext .sec-where { display: block; margin-bottom: .35em; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: none; color: var(--ink-faint); white-space: normal; } .billtext .sec-where .sep { margin: 0 .45em; opacity: .65; } .billtext .div-head { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 2.2em 0 .3em; } /* citation chips */ .cite { cursor: pointer; border-radius: 4px; padding: 0 3px; margin: 0 -1px; border-bottom: 1.5px solid currentColor; text-decoration: none; transition: background .1s; } .cite:hover { filter: brightness(.96); } .cite-usc { background: var(--usc-soft); color: var(--usc); } .cite-cfr { background: var(--cfr-soft); color: var(--cfr); } .cite-publaw, .cite-stat { background: var(--law-soft); color: var(--law); } .cite-act { background: var(--accent-soft); color: var(--accent); } .cite-internal { background: var(--internal-soft); color: var(--ink-dim); border-bottom-style: dotted; border-bottom-color: var(--ink-faint); } /* Address composed from the enclosing instruction, not written out in the bill. */ .cite.rel { border-bottom-style: dashed; } .cite.rel::before { content: "↳"; font-size: .78em; opacity: .55; margin-right: .18em; } .cite.active { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 20%, transparent); } /* The paragraph an internal cross-reference points at, after clicking it. Deliberately persistent rather than a fade: the reader clicked "subparagraph (C)" in order to read subparagraph (C), and a highlight that has gone by the time their eye lands is worse than none. Cleared on the next click. A left bar rather than a background wash, so it doesn't fight the green/red diff marks that often sit in the same paragraph. */ .billtext p.jump-target { background: color-mix(in srgb, var(--focus) 12%, transparent); box-shadow: -3px 0 0 0 var(--focus); border-radius: 0 3px 3px 0; padding: .15em .3em .15em .4em; margin-left: -.4em; } /* A guess, not a match: nothing at the referenced level exists inside the provision the reference sits in, so this came from outside the scope that reference governs. Marked differently from a certain answer because the eye goes to the highlight before it goes to the pane — a dashed rule and the caution colour rather than the focus colour, so the two are not confusable at a glance. The pane says the same thing in words. */ .billtext p.jump-target.jump-guess { background: color-mix(in srgb, var(--warn) 10%, transparent); box-shadow: -3px 0 0 0 var(--warn); border-left: 0; outline: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); outline-offset: 2px; } /* The redline, drawn into the text of the LAW in the right-hand pane: red strikethrough for language the bill takes out of the statute book, green for language it puts in. These deliberately do not appear in the bill pane — see the note in render-bill.js. Marking the bill's own quoted operands there said nothing the quote marks didn't, and painted a phrase being *removed* from the law in the colours of something being added to the page. Inline rather than block: a strike and its replacement sit next to each other mid-sentence, so the surrounding provision has to keep reading as prose. */ .ins, .del { border-radius: 4px; padding: .05em .22em; margin: 0 -.02em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .ins { background: var(--ins-soft); color: var(--ins); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ins) 45%, transparent); } .del { background: var(--del-soft); color: var(--del); text-decoration: line-through; /* Keep the strike visible over the tinted background without letting it bleed onto a nested citation chip's own underline. */ text-decoration-color: color-mix(in srgb, var(--del) 70%, transparent); text-decoration-thickness: 1.5px; } .del .cite { text-decoration: line-through; } /* Language this bill inserted that the law already contains — the amendment has happened. The bill's colour, because this text is the bill's work, but not the filled background `.ins` uses: a fill reads as "pending change", and nothing here is pending. An underline instead, dashed to say "in force" rather than "proposed". Same reasoning as .node.was-added, inline instead of block. */ .was-ins { color: var(--ins); text-decoration: underline dashed; text-decoration-color: color-mix(in srgb, var(--ins) 55%, transparent); text-underline-offset: 2px; } /* A whole provision the bill adds at the end. The inline .ins above is for words landing inside a sentence. This is a new subparagraph or subsection following its siblings, so it is a block: it keeps the outline the bill wrote (markers on their own lines) instead of collapsing the new law into one green paragraph. The rule is the seam between what the provision says now and what this bill would add to it. */ .node.added { margin-top: .35em; padding-left: .7em; border-left: 2px solid color-mix(in srgb, var(--ins) 55%, transparent); } .node.added .ins { display: block; white-space: pre-wrap; background: none; box-shadow: none; padding: 0; } /* amendment blocks */ .amend { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); padding: .55em .8em; margin: 0 0 .8em -0.85em; border-radius: 0 6px 6px 0; } .amend .amend-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: .3em; cursor: pointer; } .amend .amend-tag:hover { text-decoration: underline; } /* The target of this instruction was inferred, not written down. It has to read as a qualifier on the address beside it rather than as part of the address — hence the caution colour and the lighter weight against the tag's own accent and bold. */ .amend .amend-tag .amend-implied { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--warn); border: 1px solid var(--warn-soft); border-radius: 3px; padding: 0 4px; cursor: help; } .amend-ops { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .4em; } .op { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--rule-strong); color: var(--ink-dim); } .op-strike { background: var(--err-soft); color: var(--err); border-color: transparent; } .op-insert { background: var(--usc-soft); color: var(--usc); border-color: transparent; } .op-repeal { background: var(--err-soft); color: var(--err); border-color: transparent; font-weight: 700; } .billtext.filtered p:not(.has-amend):not(.sec-head) { display: none; } /* A note, with its own heading as the label. The heading is the only thing that tells a reader which note they are looking at, so it leads rather than being run into the text — which is exactly how it used to arrive. */ .card .note { margin: 0 0 10px; } .card .note:last-child { margin-bottom: 0; } .card .notehead { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; } .card .note p { margin: 0; } /* The full amendment history, behind a count. Monospaced digits and one act per line: this is a list to scan for a particular Public Law, not prose. */ .credit-list { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; } .credit-list > div { font-size: 11.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; padding-left: 10px; border-left: 1px solid var(--rule); } /* --------------------------------------------------------- context pane */ .srcbadge { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); } .ctx-title { margin: 0 0 2px; font-size: 19px; font-weight: 650; letter-spacing: -.01em; } .ctx-sub { margin: 0 0 14px; font-size: 13px; color: var(--ink-dim); } .crumbs { display: flex; flex-wrap: wrap; gap: 3px 5px; margin: 0 0 14px; font-size: 12px; } .crumbs .crumb { color: var(--ink-dim); background: var(--internal-soft); padding: 2px 8px; border-radius: 20px; border: 1px solid transparent; cursor: default; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* A crumb that links out is an , and the UA underlines those. Inside a pill that reads as a mistake, and the hover rule below is already the affordance — border and ink both change. Set here rather than on a link variant so the two element types are pixel-identical. */ text-decoration: none; } .crumbs .crumb.clickable { cursor: pointer; } .crumbs .crumb.clickable:hover { border-color: var(--accent); color: var(--ink); } .crumbs .sep { color: var(--ink-faint); align-self: center; } .crumbs .crumb.here { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .ladder { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; align-items: center; } .ladder .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-right: 3px; } .ladder button { font: inherit; font-family: var(--mono); font-size: 11.5px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--panel); color: var(--ink-dim); cursor: pointer; } .ladder button:hover { border-color: var(--accent); color: var(--ink); } .ladder button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .prov { font-family: var(--serif); font-size: 15.5px; line-height: 1.6; } .prov .node { margin: 0 0 .55em; } .prov .node > .body { display: block; } .prov .marker { font-weight: 700; color: var(--ink-dim); margin-right: .35em; font-family: var(--sans); font-size: .88em; } .prov .nodehead { font-family: var(--sans); font-size: .84em; font-weight: 700; letter-spacing: .02em; color: var(--accent); margin-right: .5em; } .prov .kids { margin-left: 1.5em; border-left: 1px solid var(--rule); padding-left: .9em; } .prov .node.on-path > .body > .marker { color: var(--accent); } .prov .node.focus { background: color-mix(in srgb, var(--focus) 14%, transparent); border-radius: 6px; padding: .45em .6em; margin-left: -.6em; box-shadow: inset 3px 0 0 var(--focus); } /* The section's own lead-in — the sentence every subsection below hangs off ("For purposes of this section—"). It introduces the list rather than being an item in it, so it gets a little more air beneath than a sibling node. The class had been carried since the pane was written and never styled: it is set with `className =` rather than classList.add, which is the hole the markup contract above had until it was widened. */ .prov .node.lead-in { margin-bottom: .85em; } /* A provision this bill added, already in force. Marked, not coloured as an insertion: nothing is being added to the law on screen — the law already reads this way, because of this bill. The rule down the side says "this is the bill's work" without claiming it is a pending change. */ .prov .node.was-added > .body { border-left: 2px solid var(--ins); padding-left: 8px; } .prov .node.was-added > .body > .marker { color: var(--ins); } .prov .node.dimmed { opacity: .45; } .prov .node.dimmed:hover { opacity: 1; } .sechead { font-family: var(--sans); font-size: 13px; font-weight: 700; margin: 0 0 .5em; padding-bottom: .4em; border-bottom: 1px solid var(--rule); scroll-margin-top: 50px; } .sechead .n { font-family: var(--mono); color: var(--accent); margin-right: .5em; } .card { border: 1px solid var(--rule); border-radius: 9px; padding: 12px 14px; margin: 0 0 14px; background: var(--panel); box-shadow: var(--shadow); } .card h4 { margin: 0 0 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .card.warn { border-color: var(--warn); background: var(--warn-soft); } .card.warn h4 { color: var(--warn); } .card.err { border-color: var(--err); background: var(--err-soft); } .card.err h4 { color: var(--err); } .card p { margin: 0 0 6px; font-size: 13px; } .card p:last-child { margin-bottom: 0; } .card code, .remedy { font-family: var(--mono); font-size: 12px; background: var(--internal-soft); padding: 2px 6px; border-radius: 5px; display: inline-block; } .remedy { margin-top: 4px; user-select: all; } /* amendment effect preview */ .effect .op-row { display: flex; gap: 8px; align-items: baseline; margin: 0 0 6px; font-size: 13px; } .effect .op-kind { flex: 0 0 auto; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; min-width: 62px; text-align: center; } .effect .op-kind.strike { background: var(--del-soft); color: var(--del); } .effect .op-kind.insert { background: var(--ins-soft); color: var(--ins); } .effect .op-kind.other { background: var(--internal-soft); color: var(--ink-dim); } .effect .op-text { font-family: var(--serif); border-radius: 4px; padding: .05em .25em; } .effect .op-text.struck { background: var(--del-soft); color: var(--del); text-decoration: line-through; text-decoration-color: var(--del); text-decoration-thickness: 1.5px; } .effect .op-text.added { background: var(--ins-soft); color: var(--ins); } .effect .found { font-size: 11px; color: var(--usc); } .effect .notfound { font-size: 11px; color: var(--warn); } mark.hit { background: color-mix(in srgb, var(--err) 22%, transparent); border-radius: 3px; } .links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .links a { font-size: 12px; color: var(--ink-dim); text-decoration: none; border: 1px solid var(--rule-strong); padding: 3px 9px; border-radius: 6px; } .links a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .links a::after { content: " ↗"; font-size: 9px; opacity: .6; } .asof { font-size: 11px; color: var(--ink-faint); margin-top: 10px; } /* ----------------------------------------------------------------- modal */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 50; padding: 20px; } .modal-box { background: var(--panel); border-radius: 12px; padding: 18px; width: min(760px, 100%); box-shadow: var(--shadow); border: 1px solid var(--rule); } .modal-box h3 { margin: 0 0 10px; font-size: 15px; } .modal-box textarea { width: 100%; height: 46vh; resize: vertical; font-family: var(--mono); font-size: 12.5px; padding: 10px; border-radius: 8px; border: 1px solid var(--rule-strong); background: var(--bg); color: var(--ink); line-height: 1.45; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } /* about ------------------------------------------------------------------ */ .about-box { width: min(520px, 100%); } .about-box p { margin: 0 0 10px; line-height: 1.5; } .about-box h4 { margin: 16px 0 6px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); } .about-box .credit { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); } /* Inline, not the pill treatment .links a gets — this one sits in a sentence. */ .about-box .credit a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); } .about-box .credit a:hover { border-bottom-color: var(--accent); } .about-box .credit a::after { content: " ↗"; font-size: 9px; opacity: .6; } .about-box code { font-family: var(--mono); font-size: .92em; } .snippet { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; margin: 0; padding: 10px; border-radius: 8px; border: 1px solid var(--rule-strong); background: var(--bg); color: var(--ink); white-space: pre-wrap; word-break: break-all; user-select: all; } /* Embedded in someone else's page: the frame is short, so the header gives up its padding rather than the panes giving up their height. */ :root[data-embed] .topbar { padding-block: 6px; } :root[data-embed] .brand { font-size: 15px; } /* ---------------------------------------------------------------- mobile */ @media (max-width: 860px) { .split { grid-template-columns: 1fr; grid-template-rows: 1fr 7px 1fr; } .gutter { cursor: row-resize; } .pane-bill { border-right: 0; border-bottom: 1px solid var(--rule); } .billmeta { order: 10; width: 100%; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } .pane-body { scroll-behavior: auto; } }