@bkazemi/verily 0.9.3 → 0.9.4

package/README.md

@@ -168,7 +168,7 @@ import { init } from '@bkazemi/verily';
 const client = init({ backendUrl: '/api/verily' });
 ```
 
-Without one, serve `node_modules/@bkazemi/verily/dist/verily.js` yourself, or load it from a CDN such as `https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.9.3/dist/verily.js`. The script defines a global `Verily`.
+Without one, serve `node_modules/@bkazemi/verily/dist/verily.js` yourself, or load it from a CDN such as `https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.9.4/dist/verily.js`. The script defines a global `Verily`.
 
 Then place the badge wherever the account appears:
 
@@ -370,7 +370,7 @@ A static site only needs the script and the badge markup; the backend runs somew
 
 ```html
 <script
-  src="https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.9.3/dist/verily.js"
+  src="https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.9.4/dist/verily.js"
   defer
 ></script>
 <verily-badge

package/dist/browser/evidence-dialog.d.ts

@@ -1,7 +1,7 @@
 import { type Evidence, type ExternalAccount } from '../core/index.js';
 /** The logotype as a link to the project, as both dialogs carry it in their footer. */
 export declare function stampLink(): HTMLAnchorElement;
-export declare const styles = "\n  * { box-sizing: border-box; }\n  dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #dce2de; border-radius: 16px; background: #fff; color: #23312b; box-shadow: 0 24px 90px #10201935; font: 13px/1.6 system-ui, sans-serif; }\n  /* The pane scrolls inside the dialog, which clips its scrollbar to the rounded corners. */\n  dialog[open] { display: flex; flex-direction: column; }\n  .pane { min-height: 0; padding: 24px; overflow-y: auto; }\n  dialog::backdrop { background: #15271f66; }\n  header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n  h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.3px; }\n  button { width: 32px; height: 32px; border: 1px solid #dce2de; border-radius: 8px; background: #fff; color: #52645a; font: 20px system-ui, sans-serif; cursor: pointer; }\n  button:hover { background: #f2f5f1; }\n  .icon { display: grid; place-items: center; padding: 0; }\n  .icon svg { width: 16px; height: 16px; }\n  .title { display: flex; align-items: center; gap: 6px; min-width: 0; }\n  .all { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #52645a; }\n  .all:hover { background: #f2f5f1; }\n  .all svg { width: 16px; height: 16px; }\n  a { color: #245f43; text-underline-offset: 3px; overflow-wrap: anywhere; }\n  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }\n  /* An element given its own display would otherwise go on showing while hidden. */\n  [hidden] { display: none !important; }\n  .summary { display: flex; align-items: center; gap: 8px; margin-top: 16px; }\n  .mark { width: 36px; height: 36px; flex-shrink: 0; }\n  .provider { width: 14px; height: 14px; }\n  .state { font-size: 14px; font-weight: 650; line-height: 1.4; }\n  .muted { color: #6b786f; font-size: 12px; }\n  .account { position: relative; }\n  .veiled > :not(.checking) { filter: blur(4px); opacity: .55; user-select: none; }\n  .checking { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #23312b; font-size: 13px; font-weight: 600; }\n  .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n  @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }\n  /* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n  .summary .signed { display: inline-block; margin-left: 5px; padding: 0 6px; border: 1px solid #cfdcd3; border-radius: 999px; font-size: 10px; font-weight: 550; line-height: 1.3; text-decoration: none; vertical-align: 1px; }\n  .summary a.signed:hover { background: #f2f5f1; }\n  .summary .signed.bad { border-color: #b3261e; color: #b3261e; font-weight: 650; cursor: help; }\n  .caution { display: inline-block; margin-left: 3px; color: #a15c00; vertical-align: -1.5px; }\n  .caution svg { display: block; width: 10px; height: 10px; }\n  .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }\n  .account h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .account a, .account strong { font-weight: 650; font-size: 14px; }\n  /* The account's own name carries that weight; a link inside a line of prose does not. */\n  .summary a, .method a, .additional a { font: inherit; }\n  .reference { margin-top: 2px; }\n  /* A fingerprint in fours: it breaks between groups, and copies as one unbroken word. */\n  .fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }\n  .fingerprint span { display: inline-block; margin-right: .5ch; }\n  .method { margin-top: 8px; }\n  /* In the corner the heading leaves empty, apart from everything that was checked. */\n  .listing { position: absolute; top: 12px; right: 14px; padding: 1px 8px; border: 1px solid #e0e6df; border-radius: 999px; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .listing.preferred { border-color: #245f43; color: #245f43; }\n  /* Quiet, as its pill is: the surface and the name step back, and the controls do not. */\n  .account.retired { background: #f6f8f5; }\n  .account.retired > a, .account.retired > strong, .account.retired > .named > a, .account.retired > .named > strong { color: #6b786f; }\n  /* The name, then a dot and the account's creation date. The date wraps under a long name. */\n  /* Clipped 4px left of the text, which hides the dot when the date wraps to a new line. */\n  .named { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin-left: -4px; padding-left: 4px; overflow-x: clip; }\n  .since { position: relative; white-space: nowrap; }\n  /* The dot sits in the gap before the date. */\n  .since::before { content: \"\u00B7\"; position: absolute; left: -7px; transform: translateX(-50%); }\n  .account.retired .mark { opacity: .45; }\n  .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }\n  summary.group { display: flex; align-items: center; gap: 4px; width: fit-content; border-radius: 4px; list-style: none; cursor: pointer; }\n  summary::-webkit-details-marker { display: none; }\n  .fold { display: flex; align-items: center; gap: 4px; width: auto; height: auto; padding: 2px 8px 2px 4px; margin-left: -4px; border: 0; background: none; font: 550 12px/1.6 system-ui, sans-serif; }\n  .fold svg, summary svg { width: 12px; height: 12px; }\n  .fold[aria-expanded=\"true\"] svg, details[open] > summary svg { transform: rotate(90deg); }\n  @media (prefers-reduced-motion: no-preference) { .fold svg, summary svg { transition: transform .15s; } }\n  /* The fold and what the holder may do share a line, until a question needs the whole of it. */\n  .bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }\n  .account .bar .row { margin: 0 0 0 auto; }\n  .additional { margin-top: 2px; padding-left: 12px; }\n  .joiner { display: block; width: 20px; height: 20px; margin: 8px auto -4px; color: #90a096; }\n  dl { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e5e9e3; display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 11px; }\n  dt { color: #6b786f; }\n  dd { margin: 0; text-align: right; overflow-wrap: anywhere; }\n  .explanation { margin-top: 16px; }\n  .action { width: auto; height: auto; padding: 9px 14px; font: 600 13px/1.3 system-ui, sans-serif; color: #23312b; text-align: left; }\n  .action.primary { border-color: #245f43; background: #245f43; color: #fff; }\n  .action.primary:hover { background: #1d4f37; }\n  .action:disabled { opacity: .6; cursor: progress; }\n  .action.danger:hover { border-color: #b3261e; background: #fdecea; color: #b3261e; }\n  .row { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }\n  .account .row { align-items: center; justify-content: start; flex-wrap: wrap; margin-top: 12px; }\n  .account .action { padding: 5px 10px; font-size: 12px; }\n  .account .action.dots { display: grid; place-items: center; align-self: stretch; width: 30px; padding: 0; }\n  .dots svg { width: 16px; height: 16px; }\n  /* Placed under its button each time it opens, above the dialog and clipped by none of it. */\n  .menu { position: fixed; inset: auto; margin: 0; min-width: 170px; padding: 6px; border: 1px solid #dce2de; border-radius: 10px; background: #fff; color: #23312b; box-shadow: 0 12px 40px #10201930; }\n  .menu:popover-open { display: grid; }\n  .account .menu .action { border: 0; border-radius: 6px; padding: 6px 10px; font-weight: 550; }\n  .menu .danger { color: #b3261e; }\n  .menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid #e5e9e3; }\n  footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }\n  footer a { display: flex; color: inherit; }\n  .logo { display: block; height: 13px; }\n  \n  @media (prefers-reduced-motion: no-preference) {\n    .mark.current path:last-child { animation: verily-draw .8s cubic-bezier(.65, 0, .35, 1) .1s backwards; }\n  }\n  @keyframes verily-draw { from { stroke-dasharray: 0 176; } to { stroke-dasharray: 108 176; } }\n\n";
+export declare const styles = "\n  * { box-sizing: border-box; }\n  dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #dce2de; border-radius: 16px; background: #fff; color: #23312b; box-shadow: 0 24px 90px #10201935; font: 13px/1.6 system-ui, sans-serif; }\n  /* The pane scrolls inside the dialog, which clips its scrollbar to the rounded corners. */\n  dialog[open] { display: flex; flex-direction: column; }\n  .pane { min-height: 0; padding: 24px; overflow-y: auto; }\n  dialog::backdrop { background: #15271f66; }\n  header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n  h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.3px; }\n  button { width: 32px; height: 32px; border: 1px solid #dce2de; border-radius: 8px; background: #fff; color: #52645a; font: 20px system-ui, sans-serif; cursor: pointer; }\n  button:hover { background: #f2f5f1; }\n  .icon { display: grid; place-items: center; padding: 0; }\n  .icon svg { width: 16px; height: 16px; }\n  .title { display: flex; align-items: center; gap: 6px; min-width: 0; }\n  .all { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #52645a; }\n  .all:hover { background: #f2f5f1; }\n  .all svg { width: 16px; height: 16px; }\n  a { color: #245f43; text-underline-offset: 3px; overflow-wrap: anywhere; }\n  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }\n  /* An element given its own display would otherwise go on showing while hidden. */\n  [hidden] { display: none !important; }\n  .summary { display: flex; align-items: center; gap: 8px; margin-top: 16px; }\n  .mark { width: 36px; height: 36px; flex-shrink: 0; }\n  .provider { width: 14px; height: 14px; }\n  .state { font-size: 14px; font-weight: 650; line-height: 1.4; }\n  .muted { color: #6b786f; font-size: 12px; }\n  .account { position: relative; }\n  .veiled > :not(.checking) { filter: blur(4px); opacity: .55; user-select: none; }\n  .checking { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #23312b; font-size: 13px; font-weight: 600; }\n  .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n  @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }\n  /* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n  .summary .signed { display: inline-block; margin-left: 5px; padding: 0 6px; border: 1px solid #cfdcd3; border-radius: 999px; font-size: 10px; font-weight: 550; line-height: 1.3; text-decoration: none; vertical-align: 1px; }\n  .summary a.signed:hover { background: #f2f5f1; }\n  .summary .signed.bad { border-color: #b3261e; color: #b3261e; font-weight: 650; cursor: help; }\n  .caution { display: inline-block; margin-left: 3px; color: #a15c00; vertical-align: -1.5px; }\n  .caution svg { display: block; width: 10px; height: 10px; }\n  .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }\n  .account h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .account a, .account strong { font-weight: 650; font-size: 14px; }\n  /* The account's own name carries that weight; a link inside a line of prose does not. */\n  .summary a, .method a, .additional a { font: inherit; }\n  .reference { margin-top: 2px; }\n  /* A fingerprint in fours: it breaks between groups, and copies as one unbroken word. */\n  .fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }\n  .fingerprint span { display: inline-block; margin-right: .5ch; }\n  .method { margin-top: 8px; }\n  /* In the corner the heading leaves empty, apart from everything that was checked. */\n  .listing { position: absolute; top: 12px; right: 14px; padding: 1px 8px; border: 1px solid #e0e6df; border-radius: 999px; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .listing.preferred { border-color: #245f43; color: #245f43; }\n  /* Quiet, as its pill is: the surface and the name step back, and the controls do not. */\n  .account.retired { background: #f6f8f5; }\n  .account.retired .identity > a, .account.retired .identity > strong, .account.retired .named > a, .account.retired .named > strong { color: #6b786f; }\n  /* The name, then a dot and the account's creation date. The date wraps under a long name. */\n  /* Clipped 4px left of the text, which hides the dot when the date wraps to a new line. */\n  .named { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin-left: -4px; padding-left: 4px; overflow-x: clip; }\n  .since { position: relative; white-space: nowrap; }\n  /* The dot sits in the gap before the date. */\n  .since::before { content: \"\u00B7\"; position: absolute; left: -7px; transform: translateX(-50%); }\n  .account.retired .mark { opacity: .45; }\n  .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }\n  summary.group { display: flex; align-items: center; gap: 4px; width: fit-content; border-radius: 4px; list-style: none; cursor: pointer; }\n  summary::-webkit-details-marker { display: none; }\n  .fold { display: flex; align-items: center; gap: 4px; width: auto; height: auto; padding: 2px 8px 2px 4px; margin-left: -4px; border: 0; background: none; font: 550 12px/1.6 system-ui, sans-serif; }\n  .fold svg, summary svg { width: 12px; height: 12px; }\n  .fold[aria-expanded=\"true\"] svg, details[open] > summary svg { transform: rotate(90deg); }\n  @media (prefers-reduced-motion: no-preference) { .fold svg, summary svg { transition: transform .15s; } }\n  /* The fold and what the holder may do share a line, until a question needs the whole of it. */\n  .bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }\n  .account .bar .row { margin: 0 0 0 auto; }\n  .additional { margin-top: 2px; padding-left: 12px; }\n  .joiner { display: block; width: 20px; height: 20px; margin: 8px auto -4px; color: #90a096; }\n  dl { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e5e9e3; display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 11px; }\n  dt { color: #6b786f; }\n  dd { margin: 0; text-align: right; overflow-wrap: anywhere; }\n  .explanation { margin-top: 16px; }\n  .action { width: auto; height: auto; padding: 9px 14px; font: 600 13px/1.3 system-ui, sans-serif; color: #23312b; text-align: left; }\n  .action.primary { border-color: #245f43; background: #245f43; color: #fff; }\n  .action.primary:hover { background: #1d4f37; }\n  .action:disabled { opacity: .6; cursor: progress; }\n  .action.danger:hover { border-color: #b3261e; background: #fdecea; color: #b3261e; }\n  .row { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }\n  .account .row { align-items: center; justify-content: start; flex-wrap: wrap; margin-top: 12px; }\n  .account .action { padding: 5px 10px; font-size: 12px; }\n  .account .action.dots { display: grid; place-items: center; align-self: stretch; width: 30px; padding: 0; }\n  .dots svg { width: 16px; height: 16px; }\n  /* Placed under its button each time it opens, above the dialog and clipped by none of it. */\n  .menu { position: fixed; inset: auto; margin: 0; min-width: 170px; padding: 6px; border: 1px solid #dce2de; border-radius: 10px; background: #fff; color: #23312b; box-shadow: 0 12px 40px #10201930; }\n  .menu:popover-open { display: grid; }\n  .account .menu .action { border: 0; border-radius: 6px; padding: 6px 10px; font-weight: 550; }\n  .menu .danger { color: #b3261e; }\n  .menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid #e5e9e3; }\n  footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }\n  footer a { display: flex; color: inherit; }\n  .logo { display: block; height: 13px; }\n  /* Four or more accounts on a wide screen: two equal cards to a row. */\n  @media (min-width: 960px) {\n    dialog.many { width: min(900px, calc(100vw - 32px)); }\n    dialog.many .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }\n    /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall as\n       the taller card's part, so the verdicts and details of neighbouring cards line up. */\n    dialog.many .tiles > .account { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-top: 0; }\n    /* The dates sit at the foot of the third part, so they line up too. */\n    dialog.many .tiles .rest { display: flex; flex-direction: column; }\n    dialog.many .tiles .rest > dl { margin-top: auto; }\n    dialog.many .tiles .rest > :has(+ dl) { margin-bottom: 16px; }\n    /* The site's card is one tile wide, centred over the two columns. */\n    dialog.many .local { width: calc(50% - 6px); margin-inline: auto; text-align: center; }\n    dialog.many .local h3, dialog.many .local .named { justify-content: center; }\n    dialog.many .local .additional { padding-left: 0; }\n  }\n  \n  @media (prefers-reduced-motion: no-preference) {\n    .mark.current path:last-child { animation: verily-draw .8s cubic-bezier(.65, 0, .35, 1) .1s backwards; }\n  }\n  @keyframes verily-draw { from { stroke-dasharray: 0 176; } to { stroke-dasharray: 108 176; } }\n\n";
 export declare function node<K extends keyof HTMLElementTagNameMap>(tag: K, text?: string, className?: string): HTMLElementTagNameMap[K];
 /**
  * Points an anchor out of the dialog. Every link here opens in a new tab: the dialog is

package/dist/browser/evidence-dialog.js

@@ -64,7 +64,7 @@ export const styles = `
   .listing.preferred { border-color: #245f43; color: #245f43; }
   /* Quiet, as its pill is: the surface and the name step back, and the controls do not. */
   .account.retired { background: #f6f8f5; }
-  .account.retired > a, .account.retired > strong, .account.retired > .named > a, .account.retired > .named > strong { color: #6b786f; }
+  .account.retired .identity > a, .account.retired .identity > strong, .account.retired .named > a, .account.retired .named > strong { color: #6b786f; }
   /* The name, then a dot and the account's creation date. The date wraps under a long name. */
   /* Clipped 4px left of the text, which hides the dot when the date wraps to a new line. */
   .named { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin-left: -4px; padding-left: 4px; overflow-x: clip; }
@@ -107,6 +107,22 @@ export const styles = `
   footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }
   footer a { display: flex; color: inherit; }
   .logo { display: block; height: 13px; }
+  /* Four or more accounts on a wide screen: two equal cards to a row. */
+  @media (min-width: 960px) {
+    dialog.many { width: min(900px, calc(100vw - 32px)); }
+    dialog.many .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
+    /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall as
+       the taller card's part, so the verdicts and details of neighbouring cards line up. */
+    dialog.many .tiles > .account { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-top: 0; }
+    /* The dates sit at the foot of the third part, so they line up too. */
+    dialog.many .tiles .rest { display: flex; flex-direction: column; }
+    dialog.many .tiles .rest > dl { margin-top: auto; }
+    dialog.many .tiles .rest > :has(+ dl) { margin-bottom: 16px; }
+    /* The site's card is one tile wide, centred over the two columns. */
+    dialog.many .local { width: calc(50% - 6px); margin-inline: auto; text-align: center; }
+    dialog.many .local h3, dialog.many .local .named { justify-content: center; }
+    dialog.many .local .additional { padding-left: 0; }
+  }
   ${markStyles}
 `;
 export function node(tag, text = '', className = '') {
@@ -259,6 +275,8 @@ export function namedCard(heading, external, ...extra) {
 }
 function side(heading, name, reference, url, since, extra) {
     const card = node('section', '', 'account');
+    // The heading, name and reference together, so a grid can line them up as one part.
+    const identity = node('div', '', 'identity');
     const title = node('h3');
     const value = node(url ? 'a' : 'strong', name);
     title.append(...heading);
@@ -268,18 +286,18 @@ function side(heading, name, reference, url, since, extra) {
         // The name and the date share a line, and the date wraps under a long name.
         const named = node('div', '', 'named');
         named.append(value, node('span', since, 'muted since'));
-        card.append(title, named);
+        identity.append(title, named);
     }
     else
-        card.append(title, value);
+        identity.append(title, value);
     if (typeof reference === 'string')
-        card.append(node('div', reference, 'muted reference'));
+        identity.append(node('div', reference, 'muted reference'));
     else if (reference) {
         const groups = node('div', '', 'muted reference fingerprint');
         groups.append(...reference.map((group) => node('span', group)));
-        card.append(groups);
+        identity.append(groups);
     }
-    card.append(...extra);
+    card.append(identity, ...extra);
     return card;
 }
 /** What the holder is told before an account is retired, since it cannot be undone from here. */
@@ -535,6 +553,21 @@ function cautionMark() {
  * Opens and shuts what a card folds away: how its account was shown, every method of it
  * together so that none is put ahead of another, and its dates.
  */
+/**
+ * Scrolls what a reader just opened into view, once it has been laid out. It moves only as
+ * far as needed, and puts the top in view when the whole does not fit in the pane.
+ */
+function reveal(element) {
+    requestAnimationFrame(() => {
+        const pane = element.closest('.pane');
+        const tall = pane !== null && element.offsetHeight > pane.clientHeight;
+        const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+        element.scrollIntoView({
+            block: tall ? 'start' : 'nearest',
+            behavior: still ? 'auto' : 'smooth',
+        });
+    });
+}
 function foldToggle(folded, fold) {
     const toggle = node('button', '', 'fold');
     let shown = fold.open;
@@ -550,6 +583,8 @@ function foldToggle(folded, fold) {
     toggle.onclick = () => {
         set(!shown);
         fold.toggle(shown);
+        if (shown)
+            reveal(folded.at(-1));
     };
     return toggle;
 }
@@ -626,22 +661,25 @@ function externalCard(evidence, manage, later = () => { }, fold, warned = () =>
     if (fold)
         bar.append(foldToggle([...methods, dates], fold), ...row);
     const logo = providerMark(evidence.provider, evidence.attestations.external[0].method);
+    // Everything under the verdict in one part, the third of the card's rows in a grid.
+    const rest = node('div', '', 'rest');
+    rest.append(...(fold ? [bar, ...methods, dates] : [...methods, dates, ...row]));
     const card = namedCard(
     // The mark and the name, or just the name. A mark that falls back to writing the name
     // would print it twice here, since this heading writes it either way.
     logo ? [logo, document.createTextNode(provider)] : [document.createTextNode(provider)], evidence.external, 
     // Status first, then how it was shown, then when. The proof explains the state
     // above it, so it cannot sit before that state has been given.
-    summary, ...(fold ? [] : methods), 
+    summary, 
     // How the holder lists the account, in their words and apart from how it was shown:
-    // nothing checked it, so it is never among the methods above it.
+    // nothing checked it, so it is never among the methods below it.
     ...(evidence.status === 'revoked' || retired
         ? []
         : evidence.mark === 'preferred'
             ? [node('div', 'Preferred', 'listing preferred')]
             : evidence.mark === 'unused'
                 ? [node('div', 'No longer used', 'listing')]
-                : []), ...(fold ? [bar, ...methods, dates] : [dates, ...row]));
+                : []), rest);
     const surface = retired ? 'account retired' : 'account';
     card.className = surface;
     // A signed record is not read, or acted on, before its signature has been checked: until
@@ -678,7 +716,9 @@ function addRow(manage) {
  * The subject once, then each account linked to it on its own card, in the order given.
  * Retired accounts sit in a group of their own at the foot, under what says they are,
  * shut until it is opened unless no other account is left to read. Every record given is
- * of the one subject, which the caller has checked.
+ * of the one subject, which the caller has checked. Returns whether the cards a reader
+ * sees on opening are four or more: the accounts in use, or the retired ones when
+ * nothing else is left and their group starts open.
  */
 function render(content, records, manage, later, folds = { open: false, cards: new Set() }) {
     const [first] = records;
@@ -692,6 +732,7 @@ function render(content, records, manage, later, folds = { open: false, cards: n
         site: first.siteName,
         provider: first.providerName,
     }));
+    localCard.className += ' local';
     const retired = records.filter((record) => record.status === 'retired');
     const listed = records.filter((record) => record.status !== 'retired');
     // A card alone in its group has room for its dates. Among others it folds them.
@@ -708,9 +749,11 @@ function render(content, records, manage, later, folds = { open: false, cards: n
     const count = node('summary', '', 'group');
     count.append(foldMark(), document.createTextNode(`Retired accounts (${retired.length})`));
     // A signature that fails is a warning, and a warning is not left behind a fold.
-    history.append(count, ...cards(retired, () => {
+    const gone = node('div', '', 'tiles');
+    gone.append(...cards(retired, () => {
         history.open = true;
     }));
+    history.append(count, gone);
     // Shut to keep history out of the way of the accounts in use. With none of those there
     // is nothing else to read, so it starts open.
     history.open = folds.retired ?? !listed.length;
@@ -718,11 +761,16 @@ function render(content, records, manage, later, folds = { open: false, cards: n
     // group turns, so what it will be is the opposite of what it is.
     count.addEventListener('click', () => {
         folds.retired = !history.open;
+        if (folds.retired)
+            reveal(history);
     });
-    content.replaceChildren(localCard, linkMark(), ...cards(listed), ...(manage ? [addRow(manage)] : []), ...(retired.length ? [history] : []), 
+    const accounts = node('div', '', 'tiles');
+    accounts.append(...cards(listed));
+    content.replaceChildren(localCard, linkMark(), accounts, ...(manage ? [addRow(manage)] : []), ...(retired.length ? [history] : []), 
     // Nothing below the cards may name a provider. Approval, method and dates belong to
     // the card they came from, and a second provider on this subject gets its own card.
     node('p', 'Verification does not guarantee legal identity, trustworthiness, or permanent ownership.', 'muted explanation'));
+    return (listed.length || retired.length) >= 4;
 }
 /**
  * Fetch fresh, permitted evidence; native dialog supplies focus containment and Escape
@@ -896,7 +944,8 @@ detailsOpen = false) {
         drawn = key;
         // The cards are new, and what the old ones were waiting to try again went with them.
         retries.clear();
-        render(content, records, actions, (retry) => retries.add(retry), folds);
+        const many = render(content, records, actions, (retry) => retries.add(retry), folds);
+        dialog.className = many ? 'many' : '';
     };
     /**
      * Redraws at the moment the next record runs out, where that comes before the next check

package/dist/server/index.js

@@ -386,7 +386,12 @@ function accountCard(e, external, now) {
       <p class="how">
         ${verdict(toneOf(e, now))}${statusLabel(e, now)} · via: <a href="${record}">${e.verifierName}</a>${e.signedUrl && html `<a class="signed-mark" href="${record}#signed">signed</a>`}
       </p>
-    `, externalNotes({ ...e.attestations, external }, { site: e.siteName, provider: e.providerName }), times(retired
+    `, 
+    // Everything under the verdict in one part, the third of the card's rows in a grid.
+    html `
+      <div class="rest">
+        ${externalNotes({ ...e.attestations, external }, { site: e.siteName, provider: e.providerName })}
+        ${times(retired
         ? [
             ['Approved', e.approvedAt],
             ['Last verified', lastProved(e)],
@@ -396,7 +401,9 @@ function accountCard(e, external, now) {
             ['Approved', e.approvedAt],
             [e.expiresAt > now ? 'Valid until' : 'Expired on', e.expiresAt],
             ['Last checked', external[0].artifactUrl ? external[0].confirmedAt : undefined],
-        ]), 
+        ])}
+      </div>
+    `, 
     // The holder's own word on the account, which nothing checked, so it sits apart from
     // the methods, in the card's corner as the dialog has it.
     !retired &&
@@ -421,7 +428,9 @@ function publishedPage(records, base) {
           ${[...subjects.values()].map((held) => {
             const local = localSide(held[0].local, held[0].siteName);
             return html `
-              ${card(local.heading, local.value, held[0].local.profileUrl)}
+              <div class="subject">
+                ${card(local.heading, local.value, held[0].local.profileUrl)}
+              </div>
               ${joiner}
               <div class="accounts">
                 ${accountsOf(held, now).map(({ lead, external }) => accountCard(lead, external, now))}

package/dist/server/render.js

@@ -88,18 +88,20 @@ export function side(heading, name, url, reference, since, extra) {
     const profile = url && safeUrl(url);
     return html `
     <div class="side">
-      <p class="who">${typeof heading === 'string' ? heading : [heading.mark, heading.text]}</p>
-      <p class="name">
-        ${profile ? html `<a href="${profile}" rel="noreferrer">${name}</a>` : name}${since && html `<span class="since">${since}</span>`}
-      </p>
-      ${typeof reference === 'string'
+      <div class="identity">
+        <p class="who">${typeof heading === 'string' ? heading : [heading.mark, heading.text]}</p>
+        <p class="name">
+          ${profile ? html `<a href="${profile}" rel="noreferrer">${name}</a>` : name}${since && html `<span class="since">${since}</span>`}
+        </p>
+        ${typeof reference === 'string'
         ? html `<p class="reference">${reference}</p>`
         : reference &&
             html `
-              <p class="reference fingerprint">
-                ${reference.map((group) => html `<span>${group}</span>`)}
-              </p>
-            `}
+                <p class="reference fingerprint">
+                  ${reference.map((group) => html `<span>${group}</span>`)}
+                </p>
+              `}
+      </div>
       ${extra}
     </div>
   `;

package/dist/server/style.d.ts

@@ -8,7 +8,7 @@
  * leaves. So the styling does the two things that helps with, a measured column and a
  * legible hierarchy, and nothing that would make a record look like a product.
  */
-export declare const stylesheet = ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  --warn: #a4442b;\n  --caution: #b07a12;\n  --syntax-tag: #245f43;\n  --syntax-attr: #8a5a0b;\n  --syntax-string: #2b5f8a;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n    --warn: #e59a82;\n    --caution: #d9a843;\n    --syntax-tag: #7fc4a2;\n    --syntax-attr: #d9a843;\n    --syntax-string: #8fbbe0;\n  }\n}\n\n* { box-sizing: border-box; }\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font: 16px/1.65 system-ui, -apple-system, 'Segoe UI', sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 { margin-bottom: 1.25rem; padding-bottom: 0; border-bottom: none; }\n\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) { display: flex; min-height: 100vh; min-height: 100dvh; }\nmain.single { width: 100%; max-width: 24rem; margin: auto; padding-bottom: 3rem; }\n\nh2 { margin: 2rem 0 .75rem; font-size: 1.125rem; font-weight: 620; letter-spacing: -.01em; }\n\nh3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 620; }\n\np { margin: 0 0 1rem; overflow-wrap: break-word; }\n\na { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }\n\na:hover { text-decoration-thickness: 2px; }\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: .75rem 5.25rem .75rem .875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode { font: .8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }\n\n/* Highlighted HTML, marked up by highlight.js. Brackets stay muted so the names read first. */\n.hljs-tag { color: var(--muted); }\n.hljs-name { color: var(--syntax-tag); }\n.hljs-attr { color: var(--syntax-attr); }\n.hljs-string { color: var(--syntax-string); }\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: .5rem;\n  right: .5rem;\n  padding: .1875rem .5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font: 500 .75rem/1.5 system-ui, sans-serif;\n  user-select: none;\n}\n\n.copy:hover { color: var(--ink); border-color: var(--muted); }\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: .75rem;\n  padding: .875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/*\n * A subject's accounts are peers, so where there is room they sit two across. The page\n * that lists them is wider for it, and a narrow one keeps them in a single column.\n */\nmain:has(.accounts) { max-width: 54rem; }\n\n.accounts {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));\n  gap: .75rem;\n  margin-bottom: .75rem;\n}\n\n.accounts .side { position: relative; display: flex; flex-direction: column; margin-bottom: 0; }\n\n/* How the holder lists the account, in the card's corner and out of the lines below. */\n.listing {\n  position: absolute;\n  top: .75rem;\n  right: .875rem;\n  padding: .0625rem .5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--muted);\n  font-size: .6875rem;\n  font-weight: 550;\n}\n\n.listing.preferred { border-color: var(--accent); color: var(--accent); }\n\n/* The times sit at the foot of the card, so they line up along a row of uneven cards. */\n.accounts .side dl { margin-top: auto; }\n.accounts .side p:last-of-type { margin-bottom: .625rem; }\n\n/* Between a subject and its accounts on the page that lists them. */\n.joiner { display: block; width: 1.25rem; height: 1.25rem; margin: 0 auto .75rem; color: var(--muted); }\n\n.who {\n  margin: 0 0 .125rem;\n  color: var(--muted);\n  font-size: .75rem;\n  font-weight: 550;\n  letter-spacing: .02em;\n}\n\n/* A provider's mark before its name, at the height of the letters. */\n.who .provider { display: inline-block; width: .875rem; height: .875rem; margin-right: .375rem; vertical-align: -.125rem; }\n\n/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */\n.name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; margin: 0 0 0 -4px; padding-left: 4px; overflow-x: clip; font-size: 1.0625rem; font-weight: 620; letter-spacing: -.01em; }\n\n/* The account's creation date, after the name and a dot. It wraps under a long name. */\n.name .since { position: relative; color: var(--muted); font-size: .8125rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; }\n\n/* The dot sits in the gap before the date. */\n.name .since::before { content: \"\u00B7\"; position: absolute; left: -.5rem; transform: translateX(-50%); }\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a { text-decoration: none; }\n\n.name a:hover { text-decoration: underline; }\n\n.reference, .how { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }\n\n.name + .how, .reference + .how { margin-top: .5rem; }\n.fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }\n.fingerprint span { display: inline-block; margin-right: .5ch; }\n.how.additional { padding-left: .75rem; }\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.how .signed-mark { display: inline-block; margin-left: .3125rem; padding: 0 .375rem; border: 1px solid var(--line); border-radius: 999px; font-size: .625rem; font-weight: 550; line-height: 1.3; text-decoration: none; vertical-align: .0625rem; }\n\n.fine { color: var(--muted); font-size: .8125rem; line-height: 1.55; margin-bottom: .625rem; }\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed { font-size: .875rem; line-height: 1.55; margin-bottom: .875rem; }\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target { margin-inline: -.75rem; padding: .625rem .75rem; border-radius: 8px; background: var(--raised); }\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: .3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: .8125rem;\n}\n\ndt { color: var(--muted); }\n\ndd { margin: 0; font-variant-numeric: tabular-nums; }\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl { margin: .5rem 0 1rem; padding-top: 0; border-top: 0; }\n\n/* Right under the heading, the heading's own rule is the one above it. */\nh1 + dl { padding-top: 0; border-top: 0; }\n.side dl { margin: .625rem 0 0; padding-top: .625rem; }\n\n/* The links under a record, ruled off from the record and its disclaimer. */\nfooter { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }\nfooter > :last-child { margin-bottom: 0; }\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child { margin-bottom: 0; }\n\n/* What holds a control that cannot be undone. */\nsection.danger, section.caution { margin-top: 2rem; }\nsection.danger { border-color: var(--warn); }\n\n/* What holds a control that breaks something for a while, but can be recovered from. */\nsection.caution { border-color: var(--caution); }\nsection > h2:first-child { margin-top: 0; }\n\nform { margin: 0 0 1.5rem; }\n\nlabel { display: block; margin: 0 0 .75rem; color: var(--muted); font-size: .8125rem; }\n\ninput, textarea {\n  display: block;\n  width: 100%;\n  margin-top: .375rem;\n  padding: .5rem .625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font: .875rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea { resize: vertical; }\n\ninput:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }\n\nbutton {\n  padding: .5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font: 500 .9375rem/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: .5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: .9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button { margin-left: .5rem; border-color: var(--line); background: none; color: var(--ink); }\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary { border-color: var(--line); background: none; color: var(--ink); }\n\n/* A page's action and its alternative, side by side. */\n.choice { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }\n.choice form { margin: 0; }\n\n/* Ways to verify: one full-width button per method, none filled over the others. */\n.choices { display: grid; gap: .5rem; margin-bottom: 1.5rem; }\n.choices form { margin: 0; }\n\n.choices button {\n  width: 100%;\n  text-align: left;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n}\n\n.choices button:hover { border-color: var(--muted); }\n\n/* A provider's mark before a button's label, at the height of the letters. */\nbutton .provider { width: 1rem; height: 1rem; margin-right: .5rem; vertical-align: -.1875rem; }\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger { border-color: var(--warn); background: var(--warn); }\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection { position: relative; margin-bottom: 1rem; }\n\n.state {\n  position: absolute;\n  top: .75rem;\n  right: .875rem;\n  display: flex;\n  align-items: center;\n  gap: .375rem;\n  height: 1.625rem;\n  padding: 0 .75rem 0 .5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: .8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict { flex-shrink: 0; width: 1rem; height: 1rem; }\n.verdict.pending { opacity: .45; }\n.how .verdict { width: .875rem; height: .875rem; margin-right: .3125rem; vertical-align: -.125rem; }\n/* Cropped to its strokes and taller than the heading's letters, centred beside them. */\nh1:has(.verdict) { display: flex; align-items: center; gap: .75rem; }\nh1 .verdict { width: auto; height: 2.25rem; }\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict { width: auto; height: 100%; }\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing { padding: .3125rem .5rem; text-box: trim-both cap alphabetic; }\n  .state > span { text-box: trim-both cap alphabetic; }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .875rem; }\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence { margin: .375rem 0 0; font-size: .8125rem; }\n\n.connection dl { margin-bottom: .75rem; }\n.connection .side > :last-child { margin-bottom: 0; }\n.connection pre { margin: .75rem 0; background: var(--surface); }\n.connection .actions { margin-top: .875rem; }\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions { display: flex; flex-wrap: wrap; gap: .5rem; }\n.actions form { display: contents; }\n\n.actions button, .actions a.button {\n  margin: 0;\n  padding: .3125rem .75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: .8125rem;\n}\n\n.actions button:hover, .actions a.button:hover { border-color: var(--muted); }\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }\n.ending form { margin: 0; }\n\n.ending button.danger {\n  padding: .3125rem .75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: .8125rem;\n}\n\nfieldset { margin: 0 0 1.25rem; padding: 1rem 1.125rem .25rem; border: 1px solid var(--line); border-radius: 8px; }\n\nlegend { padding: 0 .375rem; color: var(--muted); font-size: .8125rem; }\n\nfieldset label { display: flex; align-items: baseline; gap: .5rem; color: var(--ink); font-size: .9375rem; }\n\nfieldset input { width: auto; margin: 0; }\n\nfieldset p { margin: .25rem 0 .875rem 1.5rem; color: var(--muted); font-size: .8125rem; }\n";
+export declare const stylesheet = ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  --warn: #a4442b;\n  --caution: #b07a12;\n  --syntax-tag: #245f43;\n  --syntax-attr: #8a5a0b;\n  --syntax-string: #2b5f8a;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n    --warn: #e59a82;\n    --caution: #d9a843;\n    --syntax-tag: #7fc4a2;\n    --syntax-attr: #d9a843;\n    --syntax-string: #8fbbe0;\n  }\n}\n\n* { box-sizing: border-box; }\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font: 16px/1.65 system-ui, -apple-system, 'Segoe UI', sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 { margin-bottom: 1.25rem; padding-bottom: 0; border-bottom: none; }\n\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) { display: flex; min-height: 100vh; min-height: 100dvh; }\nmain.single { width: 100%; max-width: 24rem; margin: auto; padding-bottom: 3rem; }\n\nh2 { margin: 2rem 0 .75rem; font-size: 1.125rem; font-weight: 620; letter-spacing: -.01em; }\n\nh3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 620; }\n\np { margin: 0 0 1rem; overflow-wrap: break-word; }\n\na { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }\n\na:hover { text-decoration-thickness: 2px; }\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: .75rem 5.25rem .75rem .875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode { font: .8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }\n\n/* Highlighted HTML, marked up by highlight.js. Brackets stay muted so the names read first. */\n.hljs-tag { color: var(--muted); }\n.hljs-name { color: var(--syntax-tag); }\n.hljs-attr { color: var(--syntax-attr); }\n.hljs-string { color: var(--syntax-string); }\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: .5rem;\n  right: .5rem;\n  padding: .1875rem .5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font: 500 .75rem/1.5 system-ui, sans-serif;\n  user-select: none;\n}\n\n.copy:hover { color: var(--ink); border-color: var(--muted); }\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: .75rem;\n  padding: .875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/*\n * A subject's accounts are peers, so where there is room they sit two across. The page\n * that lists them is wider for it, and a narrow one keeps them in a single column.\n */\nmain:has(.accounts) { max-width: 54rem; }\n\n.accounts {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: .75rem;\n  margin-bottom: .75rem;\n}\n\n.accounts .side { position: relative; display: flex; flex-direction: column; margin-bottom: 0; }\n\n/* How the holder lists the account, in the card's corner and out of the lines below. */\n.listing {\n  position: absolute;\n  top: .75rem;\n  right: .875rem;\n  padding: .0625rem .5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--muted);\n  font-size: .6875rem;\n  font-weight: 550;\n}\n\n.listing.preferred { border-color: var(--accent); color: var(--accent); }\n\n/* The times sit at the foot of the card, so they line up along a row of uneven cards. */\n.accounts .side dl { margin-top: auto; }\n.accounts .rest { display: flex; flex-direction: column; }\n.accounts .rest > p:last-of-type { margin-bottom: .625rem; }\n\n/*\n * Two across, with the subject one card wide and centred above them. Every card on the\n * page is then the same width.\n */\n@media (min-width: 48rem) {\n  .accounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall\n     as the taller card's part, so the verdicts and times of neighbouring cards line up. */\n  .accounts > .side { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }\n  .subject { width: calc(50% - .375rem); margin-inline: auto; text-align: center; }\n  .subject .name { justify-content: center; }\n}\n\n/* Between a subject and its accounts on the page that lists them. */\n.joiner { display: block; width: 1.25rem; height: 1.25rem; margin: 0 auto .75rem; color: var(--muted); }\n\n.who {\n  margin: 0 0 .125rem;\n  color: var(--muted);\n  font-size: .75rem;\n  font-weight: 550;\n  letter-spacing: .02em;\n}\n\n/* A provider's mark before its name, at the height of the letters. */\n.who .provider { display: inline-block; width: .875rem; height: .875rem; margin-right: .375rem; vertical-align: -.125rem; }\n\n/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */\n.name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; margin: 0 0 0 -4px; padding-left: 4px; overflow-x: clip; font-size: 1.0625rem; font-weight: 620; letter-spacing: -.01em; }\n\n/* The account's creation date, after the name and a dot. It wraps under a long name. */\n.name .since { position: relative; color: var(--muted); font-size: .8125rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; }\n\n/* The dot sits in the gap before the date. */\n.name .since::before { content: \"\u00B7\"; position: absolute; left: -.5rem; transform: translateX(-50%); }\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a { text-decoration: none; }\n\n.name a:hover { text-decoration: underline; }\n\n.reference, .how { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }\n\n.identity + .how { margin-top: .5rem; }\n.fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }\n.fingerprint span { display: inline-block; margin-right: .5ch; }\n.how.additional { padding-left: .75rem; }\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.how .signed-mark { display: inline-block; margin-left: .3125rem; padding: 0 .375rem; border: 1px solid var(--line); border-radius: 999px; font-size: .625rem; font-weight: 550; line-height: 1.3; text-decoration: none; vertical-align: .0625rem; }\n\n.fine { color: var(--muted); font-size: .8125rem; line-height: 1.55; margin-bottom: .625rem; }\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed { font-size: .875rem; line-height: 1.55; margin-bottom: .875rem; }\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target { margin-inline: -.75rem; padding: .625rem .75rem; border-radius: 8px; background: var(--raised); }\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: .3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: .8125rem;\n}\n\ndt { color: var(--muted); }\n\ndd { margin: 0; font-variant-numeric: tabular-nums; }\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl { margin: .5rem 0 1rem; padding-top: 0; border-top: 0; }\n\n/* Right under the heading, the heading's own rule is the one above it. */\nh1 + dl { padding-top: 0; border-top: 0; }\n.side dl { margin: .625rem 0 0; padding-top: .625rem; }\n\n/* The links under a record, ruled off from the record and its disclaimer. */\nfooter { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }\nfooter > :last-child { margin-bottom: 0; }\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child { margin-bottom: 0; }\n\n/* What holds a control that cannot be undone. */\nsection.danger, section.caution { margin-top: 2rem; }\nsection.danger { border-color: var(--warn); }\n\n/* What holds a control that breaks something for a while, but can be recovered from. */\nsection.caution { border-color: var(--caution); }\nsection > h2:first-child { margin-top: 0; }\n\nform { margin: 0 0 1.5rem; }\n\nlabel { display: block; margin: 0 0 .75rem; color: var(--muted); font-size: .8125rem; }\n\ninput, textarea {\n  display: block;\n  width: 100%;\n  margin-top: .375rem;\n  padding: .5rem .625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font: .875rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea { resize: vertical; }\n\ninput:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }\n\nbutton {\n  padding: .5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font: 500 .9375rem/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: .5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: .9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button { margin-left: .5rem; border-color: var(--line); background: none; color: var(--ink); }\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary { border-color: var(--line); background: none; color: var(--ink); }\n\n/* A page's action and its alternative, side by side. */\n.choice { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }\n.choice form { margin: 0; }\n\n/* Ways to verify: one full-width button per method, none filled over the others. */\n.choices { display: grid; gap: .5rem; margin-bottom: 1.5rem; }\n.choices form { margin: 0; }\n\n.choices button {\n  width: 100%;\n  text-align: left;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n}\n\n.choices button:hover { border-color: var(--muted); }\n\n/* A provider's mark before a button's label, at the height of the letters. */\nbutton .provider { width: 1rem; height: 1rem; margin-right: .5rem; vertical-align: -.1875rem; }\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger { border-color: var(--warn); background: var(--warn); }\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection { position: relative; margin-bottom: 1rem; }\n\n.state {\n  position: absolute;\n  top: .75rem;\n  right: .875rem;\n  display: flex;\n  align-items: center;\n  gap: .375rem;\n  height: 1.625rem;\n  padding: 0 .75rem 0 .5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: .8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict { flex-shrink: 0; width: 1rem; height: 1rem; }\n.verdict.pending { opacity: .45; }\n.how .verdict { width: .875rem; height: .875rem; margin-right: .3125rem; vertical-align: -.125rem; }\n/* Cropped to its strokes and taller than the heading's letters, centred beside them. */\nh1:has(.verdict) { display: flex; align-items: center; gap: .75rem; }\nh1 .verdict { width: auto; height: 2.25rem; }\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict { width: auto; height: 100%; }\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing { padding: .3125rem .5rem; text-box: trim-both cap alphabetic; }\n  .state > span { text-box: trim-both cap alphabetic; }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .875rem; }\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence { margin: .375rem 0 0; font-size: .8125rem; }\n\n.connection dl { margin-bottom: .75rem; }\n.connection .side > :last-child { margin-bottom: 0; }\n.connection pre { margin: .75rem 0; background: var(--surface); }\n.connection .actions { margin-top: .875rem; }\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions { display: flex; flex-wrap: wrap; gap: .5rem; }\n.actions form { display: contents; }\n\n.actions button, .actions a.button {\n  margin: 0;\n  padding: .3125rem .75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: .8125rem;\n}\n\n.actions button:hover, .actions a.button:hover { border-color: var(--muted); }\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }\n.ending form { margin: 0; }\n\n.ending button.danger {\n  padding: .3125rem .75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: .8125rem;\n}\n\nfieldset { margin: 0 0 1.25rem; padding: 1rem 1.125rem .25rem; border: 1px solid var(--line); border-radius: 8px; }\n\nlegend { padding: 0 .375rem; color: var(--muted); font-size: .8125rem; }\n\nfieldset label { display: flex; align-items: baseline; gap: .5rem; color: var(--ink); font-size: .9375rem; }\n\nfieldset input { width: auto; margin: 0; }\n\nfieldset p { margin: .25rem 0 .875rem 1.5rem; color: var(--muted); font-size: .8125rem; }\n";
 /**
  * A short digest of the sheet above, put in the link's query so a release that changes the
  * styling changes its address. Without that the only safe cache is no cache: a reader who

package/dist/server/style.js

@@ -165,7 +165,7 @@ main:has(.accounts) { max-width: 54rem; }
 
 .accounts {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
+  grid-template-columns: minmax(0, 1fr);
   gap: .75rem;
   margin-bottom: .75rem;
 }
@@ -189,7 +189,21 @@ main:has(.accounts) { max-width: 54rem; }
 
 /* The times sit at the foot of the card, so they line up along a row of uneven cards. */
 .accounts .side dl { margin-top: auto; }
-.accounts .side p:last-of-type { margin-bottom: .625rem; }
+.accounts .rest { display: flex; flex-direction: column; }
+.accounts .rest > p:last-of-type { margin-bottom: .625rem; }
+
+/*
+ * Two across, with the subject one card wide and centred above them. Every card on the
+ * page is then the same width.
+ */
+@media (min-width: 48rem) {
+  .accounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall
+     as the taller card's part, so the verdicts and times of neighbouring cards line up. */
+  .accounts > .side { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
+  .subject { width: calc(50% - .375rem); margin-inline: auto; text-align: center; }
+  .subject .name { justify-content: center; }
+}
 
 /* Between a subject and its accounts on the page that lists them. */
 .joiner { display: block; width: 1.25rem; height: 1.25rem; margin: 0 auto .75rem; color: var(--muted); }
@@ -221,7 +235,7 @@ main:has(.accounts) { max-width: 54rem; }
 
 .reference, .how { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
 
-.name + .how, .reference + .how { margin-top: .5rem; }
+.identity + .how { margin-top: .5rem; }
 .fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }
 .fingerprint span { display: inline-block; margin-right: .5ch; }
 .how.additional { padding-left: .75rem; }

package/dist/verily.js

@@ -10520,7 +10520,7 @@ ${claims(evidence)}`;
   }
 
   // src/version.ts
-  var version = "v0.9.3";
+  var version = "v0.9.4";
 
   // src/browser/evidence-dialog.ts
   function stampLink() {
@@ -10582,7 +10582,7 @@ ${claims(evidence)}`;
   .listing.preferred { border-color: #245f43; color: #245f43; }
   /* Quiet, as its pill is: the surface and the name step back, and the controls do not. */
   .account.retired { background: #f6f8f5; }
-  .account.retired > a, .account.retired > strong, .account.retired > .named > a, .account.retired > .named > strong { color: #6b786f; }
+  .account.retired .identity > a, .account.retired .identity > strong, .account.retired .named > a, .account.retired .named > strong { color: #6b786f; }
   /* The name, then a dot and the account's creation date. The date wraps under a long name. */
   /* Clipped 4px left of the text, which hides the dot when the date wraps to a new line. */
   .named { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin-left: -4px; padding-left: 4px; overflow-x: clip; }
@@ -10625,6 +10625,22 @@ ${claims(evidence)}`;
   footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }
   footer a { display: flex; color: inherit; }
   .logo { display: block; height: 13px; }
+  /* Four or more accounts on a wide screen: two equal cards to a row. */
+  @media (min-width: 960px) {
+    dialog.many { width: min(900px, calc(100vw - 32px)); }
+    dialog.many .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
+    /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall as
+       the taller card's part, so the verdicts and details of neighbouring cards line up. */
+    dialog.many .tiles > .account { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-top: 0; }
+    /* The dates sit at the foot of the third part, so they line up too. */
+    dialog.many .tiles .rest { display: flex; flex-direction: column; }
+    dialog.many .tiles .rest > dl { margin-top: auto; }
+    dialog.many .tiles .rest > :has(+ dl) { margin-bottom: 16px; }
+    /* The site's card is one tile wide, centred over the two columns. */
+    dialog.many .local { width: calc(50% - 6px); margin-inline: auto; text-align: center; }
+    dialog.many .local h3, dialog.many .local .named { justify-content: center; }
+    dialog.many .local .additional { padding-left: 0; }
+  }
   ${markStyles}
 `;
   function node(tag, text = "", className = "") {
@@ -10749,6 +10765,7 @@ ${claims(evidence)}`;
   }
   function side(heading, name, reference, url, since, extra) {
     const card = node("section", "", "account");
+    const identity = node("div", "", "identity");
     const title = node("h3");
     const value = node(url ? "a" : "strong", name);
     title.append(...heading);
@@ -10756,15 +10773,15 @@ ${claims(evidence)}`;
     if (since) {
       const named = node("div", "", "named");
       named.append(value, node("span", since, "muted since"));
-      card.append(title, named);
-    } else card.append(title, value);
-    if (typeof reference === "string") card.append(node("div", reference, "muted reference"));
+      identity.append(title, named);
+    } else identity.append(title, value);
+    if (typeof reference === "string") identity.append(node("div", reference, "muted reference"));
     else if (reference) {
       const groups = node("div", "", "muted reference fingerprint");
       groups.append(...reference.map((group) => node("span", group)));
-      card.append(groups);
+      identity.append(groups);
     }
-    card.append(...extra);
+    card.append(identity, ...extra);
     return card;
   }
   var retiringNote = "Retiring keeps this record as history. It will no longer read as verified, and who can read it cannot be changed afterwards.";
@@ -10958,6 +10975,17 @@ ${claims(evidence)}`;
     }
     return svg;
   }
+  function reveal(element) {
+    requestAnimationFrame(() => {
+      const pane = element.closest(".pane");
+      const tall = pane !== null && element.offsetHeight > pane.clientHeight;
+      const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
+      element.scrollIntoView({
+        block: tall ? "start" : "nearest",
+        behavior: still ? "auto" : "smooth"
+      });
+    });
+  }
   function foldToggle(folded, fold) {
     const toggle = node("button", "", "fold");
     let shown3 = fold.open;
@@ -10972,6 +11000,7 @@ ${claims(evidence)}`;
     toggle.onclick = () => {
       set(!shown3);
       fold.toggle(shown3);
+      if (shown3) reveal(folded.at(-1));
     };
     return toggle;
   }
@@ -11020,6 +11049,8 @@ ${claims(evidence)}`;
     ];
     if (fold) bar.append(foldToggle([...methods, dates], fold), ...row);
     const logo2 = providerMark(evidence.provider, evidence.attestations.external[0].method);
+    const rest = node("div", "", "rest");
+    rest.append(...fold ? [bar, ...methods, dates] : [...methods, dates, ...row]);
     const card = namedCard(
       // The mark and the name, or just the name. A mark that falls back to writing the name
       // would print it twice here, since this heading writes it either way.
@@ -11028,9 +11059,8 @@ ${claims(evidence)}`;
       // Status first, then how it was shown, then when. The proof explains the state
       // above it, so it cannot sit before that state has been given.
       summary,
-      ...fold ? [] : methods,
       ...evidence.status === "revoked" || retired ? [] : evidence.mark === "preferred" ? [node("div", "Preferred", "listing preferred")] : evidence.mark === "unused" ? [node("div", "No longer used", "listing")] : [],
-      ...fold ? [bar, ...methods, dates] : [dates, ...row]
+      rest
     );
     const surface = retired ? "account retired" : "account";
     card.className = surface;
@@ -11074,6 +11104,7 @@ ${claims(evidence)}`;
         provider: first.providerName
       })
     );
+    localCard.className += " local";
     const retired = records.filter((record2) => record2.status === "retired");
     const listed = records.filter((record2) => record2.status !== "retired");
     const cards = (among, warned) => among.map((record2) => {
@@ -11093,20 +11124,24 @@ ${record2.external.id}`;
     const history = node("details", "", "history");
     const count = node("summary", "", "group");
     count.append(foldMark(), document.createTextNode(`Retired accounts (${retired.length})`));
-    history.append(
-      count,
+    const gone = node("div", "", "tiles");
+    gone.append(
       ...cards(retired, () => {
         history.open = true;
       })
     );
+    history.append(count, gone);
     history.open = folds.retired ?? !listed.length;
     count.addEventListener("click", () => {
       folds.retired = !history.open;
+      if (folds.retired) reveal(history);
     });
+    const accounts2 = node("div", "", "tiles");
+    accounts2.append(...cards(listed));
     content.replaceChildren(
       localCard,
       linkMark(),
-      ...cards(listed),
+      accounts2,
       ...manage ? [addRow(manage)] : [],
       ...retired.length ? [history] : [],
       // Nothing below the cards may name a provider. Approval, method and dates belong to
@@ -11117,6 +11152,7 @@ ${record2.external.id}`;
         "muted explanation"
       )
     );
+    return (listed.length || retired.length) >= 4;
   }
   function openEvidenceDialog(opener, load2, opened, arrange2 = (records) => records, manage, detailsOpen = false) {
     const existing = openDialogs.get(opener);
@@ -11237,7 +11273,8 @@ ${record2.external.id}`;
       if (key2 === drawn) return;
       drawn = key2;
       retries.clear();
-      render(content, records, actions, (retry) => retries.add(retry), folds);
+      const many = render(content, records, actions, (retry) => retries.add(retry), folds);
+      dialog.className = many ? "many" : "";
     };
     const watch = (given) => {
       clearTimeout(expiryTimer);

package/dist/version.d.ts

@@ -7,4 +7,4 @@
  * output stays what tsc emitted and nothing has to be substituted into it. A version bump
  * changes this line with package.json.
  */
-export declare const version = "v0.9.3";
+export declare const version = "v0.9.4";

package/dist/version.js

@@ -7,4 +7,4 @@
  * output stays what tsc emitted and nothing has to be substituted into it. A version bump
  * changes this line with package.json.
  */
-export const version = 'v0.9.3';
+export const version = 'v0.9.4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bkazemi/verily",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "Self-hosted account-to-account verification for Node.js",
   "type": "module",
   "license": "MIT",