svelte-readme 4.0.1 → 4.2.0

package/dist/style.css

@@ -1,65 +1,105 @@
 /**
- * Adapted from github-markdown-css (MIT License)
- * https://github.com/sindresorhus/github-markdown-css
- *
- * Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this
- * software and associated documentation files (the "Software"), to deal in the Software
- * without restriction, including without limitation the rights to use, copy, modify,
- * merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
- * permit persons to whom the Software is furnished to do so, subject to the following
- * conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies
- * or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
- * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
- * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
- * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
- * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
- * OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * Selectors were rescoped from `.markdown-body` to `main`, and rules specific to
- * GitHub's own chrome (diff/blob/octicon/utility classes) were dropped since they never
- * match rendered README markup. The trailing `p`/`pre` rules below are this project's
- * own spacing overrides, not from the upstream stylesheet.
+ * Base markdown rendering styles (scoped to `main`) plus the default code-fence
+ * button styling — both are part of the same opt-out-able default look (see
+ * `disableDefaultCSS` in `svelteReadme.ts`), so they live in one file.
  *
  * Colors, font stacks, and the block-spacing unit are pulled out as custom properties
  * so a consumer can retheme this (e.g. dark mode, brand colors) by overriding them on
  * `:root` or `main`, without having to override individual rules.
+ *
+ * Sizes are in `rem` (assuming the standard 16px browser default) rather than `px`
+ * wherever the value is typographic or a layout measurement, so the page scales with
+ * a user's root font-size preference/zoom. Border widths and shadow offsets stay in
+ * `px` — hairlines and shadow "feel" aren't meant to scale with text size.
  **/
 
 :root {
-  --gh-font-sans: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
-  --gh-font-mono: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-
-  --gh-color-fg: #24292e;
-  --gh-color-fg-muted: #6a737d;
-  --gh-color-fg-subtle: #444d56;
-  --gh-color-link: #0366d6;
-
-  --gh-color-canvas: #fff;
-  --gh-color-canvas-subtle: #f6f8fa;
-  --gh-color-kbd-bg: #fafbfc;
-  --gh-color-code-bg: rgba(27,31,35,.05);
-
-  --gh-color-border: #dfe2e5;
-  --gh-color-border-muted: #eaecef;
-  --gh-color-border-kbd: #d1d5da;
-  --gh-color-border-table: #c6cbd1;
-  --gh-color-hr: #e1e4e8;
-
-  --gh-spacing: 16px;
-  --gh-spacing-lg: 24px;
+  --sr-font-sans:
+    system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  --sr-font-mono:
+    ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
+    monospace;
+
+  --sr-color-fg: #18181b;
+  --sr-color-fg-muted: #71717a;
+  --sr-color-fg-subtle: #52525b;
+  --sr-color-link: #4f46e5;
+
+  --sr-color-canvas: #fff;
+  --sr-color-canvas-subtle: #f4f4f5;
+  --sr-color-kbd-bg: #fafafa;
+  --sr-color-code-bg: rgba(24, 24, 27, 0.06);
+
+  --sr-color-border: #e4e4e7;
+  --sr-color-border-muted: #ececef;
+  --sr-color-border-kbd: #d4d4d8;
+  --sr-color-border-table: #d4d4d8;
+  --sr-color-hr: #e4e4e7;
+
+  /* Glossy top-edge highlight on the code-fence/copy button and `summary`'s bevel
+     (see `.code-fence button`/`summary` below) — a fixed white reads as a subtle sheen
+     on the light canvas but as a harsh glowing line once the surface behind it goes
+     dark, so it's a variable rather than a literal `rgba(255, 255, 255, 0.6)`. */
+  --sr-color-bevel-highlight: rgba(255, 255, 255, 0.6);
+
+  --sr-spacing: 1.5rem;
+  --sr-spacing-lg: 2.5rem;
+  --sr-spacing-xl: 4rem;
+  --sr-box-padding: 1rem;
+
+  --sr-text-2xs: 0.6875rem;
+  --sr-text-xs: 0.75rem;
+  --sr-text-sm: 0.8125rem;
+  --sr-text-base: 0.875rem;
+  --sr-text-lg: 1.125rem;
+  --sr-text-xl: 1.375rem;
+  --sr-text-2xl: 1.75rem;
+  --sr-text-3xl: 2.5rem;
+
+  /* Declared here (rather than on `body`) so `purgeUnusedCss` — which only checks
+     tags/classes/attrs actually present in the server-rendered markup — has no reason
+     to strip it: `:root` has no selector to verify and is always kept, while `body`
+     never literally appears in Svelte's SSR output (which renders only what's inside
+     it). `<html>`'s background still paints the full viewport per the CSS spec's
+     canvas-background propagation, same as if this were set on `body`. */
+  background-color: var(--sr-color-canvas);
+
+  /* Tells the browser which palette this page actually uses, so native chrome that
+     isn't styled by the rules below — form controls, the scrollbar, `<select>`
+     dropdowns — switches to match instead of rendering a light widget on a dark page. */
+  color-scheme: light;
+}
+
+/* Set on `<html>` before first paint by the inline script in the HTML template
+   (see `THEME_INIT_SCRIPT` in `svelteReadme.ts`), so this never flashes the light
+   palette before switching to dark. */
+:root[data-sr-theme="dark"] {
+  --sr-color-fg: #e4e4e7;
+  --sr-color-fg-muted: #a1a1aa;
+  --sr-color-fg-subtle: #d4d4d8;
+  --sr-color-link: #a5b4fc;
+
+  --sr-color-canvas: #18181b;
+  --sr-color-canvas-subtle: #27272a;
+  --sr-color-kbd-bg: #26262b;
+  --sr-color-code-bg: rgba(255, 255, 255, 0.08);
+
+  --sr-color-border: #3f3f46;
+  --sr-color-border-muted: #313136;
+  --sr-color-border-kbd: #52525b;
+  --sr-color-border-table: #52525b;
+  --sr-color-hr: #3f3f46;
+
+  --sr-color-bevel-highlight: rgba(255, 255, 255, 0.06);
+
+  color-scheme: dark;
 }
 
 .anchor {
   float: left;
   line-height: 1;
-  margin-left: -20px;
-  padding-right: 4px;
+  margin-left: -1.25rem;
+  padding-right: 0.25rem;
 }
 
 .anchor:focus {
@@ -79,9 +119,9 @@ main {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   line-height: 1.5;
-  color: var(--gh-color-fg);
-  font-family: var(--gh-font-sans);
-  font-size: 16px;
+  color: var(--sr-color-fg);
+  font-family: var(--sr-font-sans);
+  font-size: var(--sr-text-base);
   word-wrap: break-word;
 }
 
@@ -103,15 +143,9 @@ a:hover {
 }
 
 strong {
-  font-weight: inherit;
   font-weight: bolder;
 }
 
-h1 {
-  font-size: 2em;
-  margin: .67em 0;
-}
-
 img {
   border-style: none;
 }
@@ -119,7 +153,7 @@ img {
 code,
 kbd,
 pre {
-  font-family: monospace,monospace;
+  font-family: monospace;
   font-size: 1em;
 }
 
@@ -138,7 +172,7 @@ input {
   overflow: visible;
 }
 
-[type=checkbox] {
+[type="checkbox"] {
   box-sizing: border-box;
   padding: 0;
 }
@@ -154,7 +188,7 @@ input {
 }
 
 a {
-  color: var(--gh-color-link);
+  color: var(--sr-color-link);
   text-decoration: none;
 }
 
@@ -168,11 +202,11 @@ strong {
 
 hr {
   height: 0;
-  margin: 15px 0;
+  margin: 0.9375rem 0;
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: 1px solid var(--gh-color-border);
+  border-bottom: 1px solid var(--sr-color-border);
 }
 
 hr:after,
@@ -201,69 +235,20 @@ details summary {
 
 kbd {
   display: inline-block;
-  padding: 3px 5px;
-  font: 11px var(--gh-font-mono);
-  line-height: 10px;
-  color: var(--gh-color-fg-subtle);
+  padding: 0.1875rem 0.3125rem;
+  font: var(--sr-text-2xs) var(--sr-font-mono);
+  line-height: 0.625rem;
+  color: var(--sr-color-fg-subtle);
   vertical-align: middle;
-  background-color: var(--gh-color-kbd-bg);
-  border: 1px solid var(--gh-color-border-kbd);
-  border-radius: 3px;
-  box-shadow: inset 0 -1px 0 var(--gh-color-border-kbd);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-h1 {
-  font-size: 32px;
-}
-
-h1,
-h2 {
-  font-weight: 600;
-}
-
-h2 {
-  font-size: 24px;
-}
-
-h3 {
-  font-size: 20px;
-}
-
-h3,
-h4 {
-  font-weight: 600;
-}
-
-h4 {
-  font-size: 16px;
-}
-
-h5 {
-  font-size: 14px;
-}
-
-h5,
-h6 {
-  font-weight: 600;
-}
-
-h6 {
-  font-size: 12px;
+  background-color: var(--sr-color-kbd-bg);
+  border: 1px solid var(--sr-color-border-kbd);
+  border-radius: 0.1875rem;
+  box-shadow: inset 0 -1px 0 var(--sr-color-border-kbd);
 }
 
 p {
   margin-top: 0;
-  margin-bottom: 10px;
+  margin-bottom: 0.625rem;
 }
 
 blockquote {
@@ -295,8 +280,7 @@ dd {
 
 code,
 pre {
-  font-family: var(--gh-font-mono);
-  font-size: 12px;
+  font-family: var(--sr-font-mono);
 }
 
 pre {
@@ -311,18 +295,18 @@ input::-webkit-outer-spin-button {
   appearance: none;
 }
 
-:checked+.radio-label {
+:checked + .radio-label {
   position: relative;
   z-index: 1;
-  border-color: var(--gh-color-link);
+  border-color: var(--sr-color-link);
 }
 
 hr {
-  border-bottom-color: #eee;
+  border-bottom-color: var(--sr-color-border-muted);
 }
 
-main:after,
-.markdown-body:before {
+main:before,
+main:after {
   display: table;
   content: "";
 }
@@ -331,12 +315,14 @@ main:after {
   clear: both;
 }
 
-main>:first-child {
-  margin-top: 0!important;
+main > :first-child {
+  /* biome-ignore lint/complexity/noImportantStyles: must win over arbitrary user-authored margins on the README's first/last rendered element */
+  margin-top: 0 !important;
 }
 
-main>:last-child {
-  margin-bottom: 0!important;
+main > :last-child {
+  /* biome-ignore lint/complexity/noImportantStyles: must win over arbitrary user-authored margins on the README's first/last rendered element */
+  margin-bottom: 0 !important;
 }
 
 a:not([href]) {
@@ -353,28 +339,28 @@ pre,
 table,
 ul {
   margin-top: 0;
-  margin-bottom: var(--gh-spacing);
+  margin-bottom: var(--sr-spacing);
 }
 
 hr {
-  height: .25em;
+  height: 0.25em;
   padding: 0;
-  margin: var(--gh-spacing-lg) 0;
-  background-color: var(--gh-color-hr);
+  margin: var(--sr-spacing-lg) 0;
+  background-color: var(--sr-color-hr);
   border: 0;
 }
 
 blockquote {
   padding: 0 1em;
-  color: var(--gh-color-fg-muted);
-  border-left: .25em solid var(--gh-color-border);
+  color: var(--sr-color-fg-muted);
+  border-left: 0.25em solid var(--sr-color-border);
 }
 
-blockquote>:first-child {
+blockquote > :first-child {
   margin-top: 0;
 }
 
-blockquote>:last-child {
+blockquote > :last-child {
   margin-bottom: 0;
 }
 
@@ -384,41 +370,36 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: var(--gh-spacing-lg);
-  margin-bottom: var(--gh-spacing);
+  margin-top: var(--sr-spacing-lg);
+  margin-bottom: var(--sr-spacing);
   font-weight: 600;
   line-height: 1.25;
 }
 
 h1 {
-  font-size: 2em;
-}
-
-h1,
-h2 {
-  padding-bottom: .3em;
-  border-bottom: 1px solid var(--gh-color-border-muted);
+  font-size: var(--sr-text-3xl);
 }
 
 h2 {
-  font-size: 1.5em;
+  margin-top: var(--sr-spacing-xl);
+  font-size: var(--sr-text-2xl);
 }
 
 h3 {
-  font-size: 1.25em;
+  font-size: var(--sr-text-xl);
 }
 
 h4 {
-  font-size: 1em;
+  font-size: var(--sr-text-lg);
 }
 
 h5 {
-  font-size: .875em;
+  font-size: var(--sr-text-sm);
 }
 
 h6 {
-  font-size: .85em;
-  color: var(--gh-color-fg-muted);
+  font-size: var(--sr-text-xs);
+  color: var(--sr-color-fg-muted);
 }
 
 ol,
@@ -427,23 +408,30 @@ ul {
 }
 
 ol ol,
-ol ul,
+ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* A numbered sub-list (above) reads as a continuation of its parent's sequence —
+   tight to its own numbering flow. A bulleted sub-list is a categorical grouping,
+   so it gets the extra bottom margin to set it apart from the next category. */
 ul ol,
 ul ul {
   margin-top: 0;
-  margin-bottom: 0;
+  margin-bottom: var(--sr-spacing);
 }
 
 li {
   word-wrap: break-all;
 }
 
-li>p {
-  margin-top: var(--gh-spacing);
+li > p {
+  margin-top: var(--sr-spacing);
 }
 
-li+li {
-  margin-top: .25em;
+li + li {
+  margin-top: 0.25em;
 }
 
 dl {
@@ -452,21 +440,24 @@ dl {
 
 dl dt {
   padding: 0;
-  margin-top: var(--gh-spacing);
+  margin-top: var(--sr-spacing);
   font-size: 1em;
   font-style: italic;
   font-weight: 600;
 }
 
 dl dd {
-  padding: 0 var(--gh-spacing);
-  margin-bottom: var(--gh-spacing);
+  padding: 0 var(--sr-spacing);
+  margin-bottom: var(--sr-spacing);
 }
 
 table {
   display: block;
-  width: 100%;
+  width: fit-content;
+  margin-right: -0.8125rem;
+  margin-left: -0.8125rem;
   overflow: auto;
+  font-size: var(--sr-text-sm);
 }
 
 table th {
@@ -475,46 +466,41 @@ table th {
 
 table td,
 table th {
-  padding: 6px 13px;
-  border: 1px solid var(--gh-color-border);
+  padding: 0.375rem 0.8125rem;
+  border: 1px solid var(--sr-color-border);
 }
 
 table tr {
-  background-color: var(--gh-color-canvas);
-  border-top: 1px solid var(--gh-color-border-table);
-}
-
-table tr:nth-child(2n) {
-  background-color: var(--gh-color-canvas-subtle);
+  background-color: var(--sr-color-canvas);
+  border-top: 1px solid var(--sr-color-border-table);
 }
 
 img {
   max-width: 100%;
   box-sizing: initial;
-  background-color: var(--gh-color-canvas);
+  background-color: var(--sr-color-canvas);
 }
 
-img[align=right] {
-  padding-left: 20px;
+img[align="right"] {
+  padding-left: 1.25rem;
 }
 
-img[align=left] {
-  padding-right: 20px;
+img[align="left"] {
+  padding-right: 1.25rem;
 }
 
 code {
-  padding: .2em .4em;
+  padding: 0.2em 0.4em;
   margin: 0;
   font-size: 85%;
-  background-color: var(--gh-color-code-bg);
-  border-radius: 3px;
+  background-color: var(--sr-color-code-bg);
 }
 
 pre {
   word-wrap: normal;
 }
 
-pre>code {
+pre > code {
   padding: 0;
   margin: 0;
   font-size: 100%;
@@ -525,7 +511,7 @@ pre>code {
 }
 
 .highlight {
-  margin-bottom: var(--gh-spacing);
+  margin-bottom: var(--sr-spacing);
 }
 
 .highlight pre {
@@ -535,12 +521,13 @@ pre>code {
 
 .highlight pre,
 pre {
-  padding: var(--gh-spacing);
+  padding: var(--sr-box-padding);
+  margin-right: calc(var(--sr-box-padding) * -1);
+  margin-left: calc(var(--sr-box-padding) * -1);
   overflow: auto;
-  font-size: 85%;
-  line-height: 1.45;
-  background-color: var(--gh-color-canvas-subtle);
-  border-radius: 3px;
+  font-size: var(--sr-text-xs);
+  line-height: 1.4;
+  background-color: var(--sr-color-canvas-subtle);
 }
 
 pre code {
@@ -555,11 +542,204 @@ pre code {
   border: 0;
 }
 
-/* Overrides to keep spacing consistent with our own layout, not GitHub's. */
+/* Overrides to keep spacing consistent with our own layout. */
 
 p {
-  min-height: 28px;
+  min-height: 1.75rem;
 }
 pre {
-  margin-bottom: 48px;
+  margin-bottom: var(--sr-spacing-xl);
+}
+
+/* Default code-fence button styling (formerly `button.css`). */
+
+.code-fence button {
+  font-family: inherit;
+  text-transform: none;
+  position: relative;
+  display: inline-block;
+  padding: 0.1875rem 0.625rem;
+  font-size: var(--sr-text-xs);
+  font-weight: 500;
+  line-height: 1rem;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid var(--sr-color-border);
+  border-radius: 0.375rem;
+  appearance: none;
+  color: var(--sr-color-fg);
+  background: linear-gradient(
+    180deg,
+    var(--sr-color-kbd-bg),
+    var(--sr-color-canvas-subtle)
+  );
+  box-shadow:
+    0 1px 0 rgba(24, 24, 27, 0.04),
+    inset 0 1px 0 var(--sr-color-bevel-highlight);
+  transition:
+    background 0.2s cubic-bezier(0.3, 0, 0.5, 1),
+    box-shadow 0.15s;
+}
+
+.code-fence button:hover {
+  background: linear-gradient(
+    180deg,
+    var(--sr-color-canvas-subtle),
+    var(--sr-color-border)
+  );
+}
+
+.code-fence button:active {
+  background: var(--sr-color-canvas-subtle);
+  box-shadow: inset 0 1px 2px rgba(24, 24, 27, 0.08);
+}
+
+/* Copy-to-clipboard button rendered as the last child of each code snippet's `<pre>`
+   (see `COPY_BUTTON_MARKUP` in `preprocessReadme.ts`) and overlaid on its corner via
+   `position: absolute`. Anchored against `.sr-code-block` (a non-scrolling wrapper
+   `preprocessReadme.ts` adds around every highlighted `<pre>`) rather than `<pre>`
+   itself — `<pre>` has its own `overflow: auto` for long lines, and a `right`-anchored
+   absolute child of a scrolling box drifts with that box's horizontal scroll.
+
+   The bleed (negative margin equal to `pre`'s own padding, same technique as the
+   table/details bleed above) moves from `pre` to `.sr-code-block` here, with `pre`'s
+   own margin canceled below — otherwise `.sr-code-block`'s box (what the button is
+   positioned against) would stop short of `pre`'s bled edge, leaving the button
+   inset from the visible corner by the full bleed amount. */
+
+.sr-code-block {
+  position: relative;
+  margin-right: calc(var(--sr-box-padding) * -1);
+  margin-left: calc(var(--sr-box-padding) * -1);
+}
+
+.sr-code-block pre {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.sr-copy-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  color: var(--sr-color-fg-muted);
+  cursor: pointer;
+  appearance: none;
+  background-color: var(--sr-color-canvas);
+  border: 1px solid var(--sr-color-border);
+  border-radius: 0.375rem;
+}
+
+/* Hidden until hover/focus so it doesn't clutter every code block at rest — but
+   only on devices that actually have a hover affordance. On touch-only devices
+   `(hover: none)` there's no hover to reveal it, so it stays visible instead. */
+@media (hover: hover) {
+  .sr-copy-button {
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  .sr-code-block:hover .sr-copy-button,
+  .sr-copy-button:focus-visible,
+  .sr-copy-button.sr-copy-copied {
+    opacity: 1;
+  }
+}
+
+/* Same specificity as `.sr-copy-check` below (one class each) so source order
+   decides the default state — a `.sr-copy-button svg` selector here would win on
+   specificity regardless of order and defeat that rule's `display: none`. */
+.sr-copy-icon,
+.sr-copy-check {
+  display: block;
+  fill: currentColor;
+}
+
+/* `.sr-copy-copied` is toggled client-side by the copy-button script for 2s of
+   feedback after a successful copy — never present in server-rendered markup. */
+.sr-copy-check {
+  display: none;
+}
+
+.sr-copy-button.sr-copy-copied .sr-copy-icon {
+  display: none;
+}
+
+.sr-copy-button.sr-copy-copied .sr-copy-check {
+  display: block;
+}
+
+/* `details`/`summary`, styled with the same clickable material as the code-fence
+   button above. `summary` bleeds out to the `details` border via a negative
+   margin (same technique as the table/pre bleed) so its background spans the
+   full box edge-to-edge, rather than sitting inset with the revealed content. */
+
+details {
+  padding: 0 var(--sr-box-padding);
+  margin-right: calc(var(--sr-box-padding) * -1);
+  margin-left: calc(var(--sr-box-padding) * -1);
+  border: 1px solid var(--sr-color-border-muted);
+}
+
+/* Bottom padding only applies once there's revealed content to pad — otherwise
+   (closed, just the summary bar) it'd reserve empty space below the summary,
+   showing as a hollow gap before the box's own bottom border. */
+details[open] {
+  padding-bottom: var(--sr-spacing);
+}
+
+summary {
+  padding: 0.75rem var(--sr-box-padding);
+  margin: 0 calc(var(--sr-box-padding) * -1);
+  font-weight: 500;
+  color: var(--sr-color-fg);
+  background: linear-gradient(
+    180deg,
+    var(--sr-color-kbd-bg),
+    var(--sr-color-canvas-subtle)
+  );
+  box-shadow:
+    0 1px 0 rgba(24, 24, 27, 0.04),
+    inset 0 1px 0 var(--sr-color-bevel-highlight);
+  transition:
+    background 0.2s cubic-bezier(0.3, 0, 0.5, 1),
+    box-shadow 0.15s;
+}
+
+summary:hover {
+  background: linear-gradient(
+    180deg,
+    var(--sr-color-canvas-subtle),
+    var(--sr-color-border)
+  );
+}
+
+summary:active {
+  background: var(--sr-color-canvas-subtle);
+  box-shadow: inset 0 1px 2px rgba(24, 24, 27, 0.08);
+}
+
+details[open] > summary {
+  border-bottom: 1px solid var(--sr-color-border-muted);
+}
+
+summary + * {
+  margin-top: var(--sr-spacing);
+}
+
+/* Adjacent `details` conjoin into a single accordion: no gap and no doubled
+   border at the seam between them. */
+details + details {
+  margin-top: 0;
+  border-top: 0;
+}
+
+details:has(+ details) {
+  margin-bottom: 0;
 }