@bkazemi/verily 0.9.3 → 0.9.5

package/dist/verily.js

@@ -9825,6 +9825,9 @@ var Verily = (() => {
     return attestation.hosted ? where : `${where} | Last checked ${when(attestation.confirmedAt)}`;
   }
 
+  // src/browser/badge.css.ts
+  var badge_css_default = ":host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n}\n* {\n  box-sizing: border-box;\n}\n.badge,\n.peek {\n  border: 1px solid var(--verily-border, #dce2e0);\n  border-radius: 6px;\n  background: var(--verily-surface, #fff);\n  color: var(--verily-text, #202c29);\n  font: var(--verily-font-size, 13px)/1.35\n    var(--verily-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);\n}\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  padding: 3px 5px;\n  text-decoration: none;\n}\nbutton.badge {\n  margin: 0;\n  cursor: pointer;\n}\na[href]:hover,\nbutton.badge:hover {\n  background: var(--verily-hover, #f3f6f4);\n  border-color: var(--verily-border, #dce2e0);\n}\n.badge:focus-visible {\n  outline: 2px solid #357ce5;\n  outline-offset: 2px;\n}\n.name {\n  font-weight: 600;\n  overflow-wrap: anywhere;\n  min-width: 0;\n}\n.more {\n  flex-shrink: 0;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--verily-muted, #65726c);\n}\n.label {\n  display: none;\n  font-size: 11px;\n  color: var(--verily-muted, #65726c);\n}\n.badge:hover .label,\n.badge:focus-within .label {\n  display: inline;\n}\n.icon {\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  font-size: 12px;\n  font-weight: 750;\n}\n.icon .glyph {\n  display: block;\n  width: 12px;\n  height: 12px;\n}\n.mark {\n  display: block;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n}\n.mark.pending {\n  opacity: 0.45;\n}\n/* A dim ring where the account will go; it only spins where motion is welcome. */\n.spinner {\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n  opacity: 0.3;\n}\n.divider {\n  flex-shrink: 0;\n  width: 1px;\n  height: 12px;\n  background: var(--verily-border, #dce2e0);\n}\n/* Several accounts, one to a row. The mark stays beside them and the rule runs their height. */\n.badge.stacked {\n  align-items: stretch;\n  padding: 5px 8px 5px 6px;\n  text-align: left;\n}\n.stacked .mark {\n  align-self: center;\n}\n.stacked .divider {\n  height: auto;\n}\n.rows {\n  display: grid;\n  gap: 4px;\n  min-width: 0;\n}\n.row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n/*\n * The accounts behind a short pill's count, opened beside it. Shut unless the browser\n * has it open as a popover, so one without popovers never shows it at all.\n */\n.peek {\n  display: none;\n  position: fixed;\n  inset: auto;\n  margin: 0;\n  padding: 8px 10px;\n  width: max-content;\n  max-width: min(320px, calc(100vw - 16px));\n  border-radius: 8px;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);\n  pointer-events: none;\n  overflow: hidden;\n}\n/* A row taken out to fit the window: its own display would otherwise keep it showing. */\n.row[hidden] {\n  display: none;\n}\n.peek:popover-open {\n  display: block;\n}\n.peek .via {\n  display: block;\n  margin-top: 6px;\n  font-size: 11px;\n  color: var(--verily-muted, #65726c);\n}\n.provider {\n  display: block;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n}\n.expired .icon {\n  color: #815a12;\n  background: #fbefce;\n}\n.revoked .icon,\n.retired .icon,\n.message .icon {\n  color: #626d69;\n  background: #edf0ee;\n}\n/* Nothing ran out and nothing wants attention: the holder chose this, so it is only quiet. */\n.retired .name {\n  color: var(--verily-muted, #65726c);\n}\n.message {\n  color: var(--verily-muted, #65726c);\n}\n.add {\n  font-weight: 600;\n}\n@media (prefers-reduced-motion: no-preference) {\n  a,\n  button {\n    transition:\n      background 0.12s,\n      border-color 0.12s;\n  }\n  /* The mark is drawn before the answer arrives, so it resolves rather than swaps. */\n  .mark,\n  .mark path {\n    transition:\n      opacity 0.18s ease,\n      stroke 0.18s ease;\n  }\n  .spinner {\n    border-top-color: transparent;\n    opacity: 0.4;\n    animation: verily-spin 0.7s linear infinite;\n  }\n}\n@keyframes verily-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+
   // src/marks.ts
   var github = {
     viewBox: "0 0 16 16",
@@ -9893,13 +9896,11 @@ var Verily = (() => {
     check: { pathLength: "176", "stroke-dasharray": "108 176", "stroke-dashoffset": "-54" }
   };
 
+  // src/browser/mark.css.ts
+  var mark_css_default = "@media (prefers-reduced-motion: no-preference) {\n  .mark.current path:last-child {\n    animation: verily-draw 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.1s backwards;\n  }\n}\n@keyframes verily-draw {\n  from {\n    stroke-dasharray: 0 176;\n  }\n  to {\n    stroke-dasharray: 108 176;\n  }\n}\n";
+
   // src/browser/mark.ts
-  var markStyles = `
-  @media (prefers-reduced-motion: no-preference) {
-    .mark.current path:last-child { animation: verily-draw .8s cubic-bezier(.65, 0, .35, 1) .1s backwards; }
-  }
-  @keyframes verily-draw { from { stroke-dasharray: 0 176; } to { stroke-dasharray: 108 176; } }
-`;
+  var markStyles = mark_css_default;
   function paintMark(svg, tone) {
     const colors = tones[tone];
     svg.setAttribute("class", `mark ${tone}`);
@@ -9976,72 +9977,7 @@ var Verily = (() => {
   }
 
   // src/browser/badge.ts
-  var styles = `
-  :host { display: inline-block; max-width: 100%; vertical-align: middle; }
-  * { box-sizing: border-box; }
-  .badge, .peek {
-    border: 1px solid var(--verily-border, #dce2e0); border-radius: 6px;
-    background: var(--verily-surface, #fff); color: var(--verily-text, #202c29);
-    font: var(--verily-font-size, 13px)/1.35
-      var(--verily-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  }
-  .badge {
-    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 5px;
-    text-decoration: none;
-  }
-  button.badge { margin: 0; cursor: pointer; }
-  a[href]:hover, button.badge:hover { background: var(--verily-hover, #f3f6f4); border-color: var(--verily-border, #dce2e0); }
-  .badge:focus-visible { outline: 2px solid #357ce5; outline-offset: 2px; }
-  .name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
-  .more { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--verily-muted, #65726c); }
-  .label { display: none; font-size: 11px; color: var(--verily-muted, #65726c); }
-  .badge:hover .label, .badge:focus-within .label { display: inline; }
-  .icon { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 750; }
-  .icon .glyph { display: block; width: 12px; height: 12px; }
-  .mark { display: block; flex-shrink: 0; width: 20px; height: 20px; }
-  .mark.pending { opacity: .45; }
-  /* A dim ring where the account will go; it only spins where motion is welcome. */
-  .spinner {
-    flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%;
-    border: 2px solid currentColor; opacity: .3;
-  }
-  .divider { flex-shrink: 0; width: 1px; height: 12px; background: var(--verily-border, #dce2e0); }
-  /* Several accounts, one to a row. The mark stays beside them and the rule runs their height. */
-  .badge.stacked { align-items: stretch; padding: 5px 8px 5px 6px; text-align: left; }
-  .stacked .mark { align-self: center; }
-  .stacked .divider { height: auto; }
-  .rows { display: grid; gap: 4px; min-width: 0; }
-  .row { display: flex; align-items: center; gap: 6px; min-width: 0; }
-  /*
-   * The accounts behind a short pill's count, opened beside it. Shut unless the browser
-   * has it open as a popover, so one without popovers never shows it at all.
-   */
-  .peek {
-    display: none; position: fixed; inset: auto; margin: 0; padding: 8px 10px;
-    width: max-content; max-width: min(320px, calc(100vw - 16px));
-    border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); pointer-events: none;
-    overflow: hidden;
-  }
-  /* A row taken out to fit the window: its own display would otherwise keep it showing. */
-  .row[hidden] { display: none; }
-  .peek:popover-open { display: block; }
-  .peek .via { display: block; margin-top: 6px; font-size: 11px; color: var(--verily-muted, #65726c); }
-  .provider { display: block; flex-shrink: 0; width: 14px; height: 14px; }
-  .expired .icon { color: #815a12; background: #fbefce; }
-  .revoked .icon, .retired .icon, .message .icon { color: #626d69; background: #edf0ee; }
-  /* Nothing ran out and nothing wants attention: the holder chose this, so it is only quiet. */
-  .retired .name { color: var(--verily-muted, #65726c); }
-  .message { color: var(--verily-muted, #65726c); }
-  .add { font-weight: 600; }
-  @media (prefers-reduced-motion: no-preference) {
-    a, button { transition: background .12s, border-color .12s; }
-    /* The mark is drawn before the answer arrives, so it resolves rather than swaps. */
-    .mark, .mark path { transition: opacity .18s ease, stroke .18s ease; }
-    .spinner { border-top-color: transparent; opacity: .4; animation: verily-spin .7s linear infinite; }
-  }
-  @keyframes verily-spin { to { transform: rotate(360deg); } }
-  ${markStyles}
-`;
+  var styles = badge_css_default + markStyles;
   var sheet;
   var frames = /* @__PURE__ */ new WeakMap();
   var pendingKey = "\0pending";
@@ -10319,6 +10255,537 @@ var Verily = (() => {
     return button2;
   }
 
+  // src/browser/evidence-dialog.css.ts
+  var evidence_dialog_css_default = `* {
+  box-sizing: border-box;
+}
+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;
+}
+/* The pane scrolls inside the dialog, which clips its scrollbar to the rounded corners.
+   Contain keeps a scroll past its end from scrolling the page behind. */
+dialog[open] {
+  display: flex;
+  flex-direction: column;
+}
+.pane {
+  min-height: 0;
+  padding: 24px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+dialog::backdrop {
+  background: #15271f66;
+}
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 650;
+  letter-spacing: -0.3px;
+}
+button {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #dce2de;
+  border-radius: 8px;
+  background: #fff;
+  color: #52645a;
+  font:
+    20px system-ui,
+    sans-serif;
+  cursor: pointer;
+}
+button:hover {
+  background: #f2f5f1;
+}
+.icon {
+  display: grid;
+  place-items: center;
+  padding: 0;
+}
+.icon svg {
+  width: 16px;
+  height: 16px;
+}
+.title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.all {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  color: #52645a;
+}
+.all:hover {
+  background: #f2f5f1;
+}
+.all svg {
+  width: 16px;
+  height: 16px;
+}
+a {
+  color: #245f43;
+  text-underline-offset: 3px;
+  overflow-wrap: anywhere;
+}
+a:focus-visible,
+button:focus-visible,
+summary:focus-visible {
+  outline: 2px solid #357ce5;
+  outline-offset: 3px;
+}
+/* An element given its own display would otherwise go on showing while hidden. */
+[hidden] {
+  display: none !important;
+}
+.summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+.mark {
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+}
+.provider {
+  width: 14px;
+  height: 14px;
+}
+.state {
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+.muted {
+  color: #6b786f;
+  font-size: 12px;
+}
+.account {
+  position: relative;
+}
+.veiled > :not(.checking) {
+  filter: blur(4px);
+  opacity: 0.55;
+  user-select: none;
+}
+.checking {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: #23312b;
+  font-size: 13px;
+  font-weight: 600;
+}
+.spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: none;
+  }
+}
+/* The "signed" pill after the verifier's name, one size smaller than the line it sits on. */
+.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;
+}
+.summary a.signed:hover {
+  background: #f2f5f1;
+}
+.summary .signed.bad {
+  border-color: #b3261e;
+  color: #b3261e;
+  font-weight: 650;
+  cursor: help;
+}
+.caution {
+  display: inline-block;
+  margin-left: 3px;
+  color: #a15c00;
+  vertical-align: -1.5px;
+}
+.caution svg {
+  display: block;
+  width: 10px;
+  height: 10px;
+}
+.account {
+  padding: 14px 16px;
+  border: 1px solid #e0e6df;
+  border-radius: 10px;
+  margin-top: 12px;
+}
+.account h3 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 3px;
+  color: #6b786f;
+  font-size: 11px;
+  font-weight: 550;
+}
+.account a,
+.account strong {
+  font-weight: 650;
+  font-size: 14px;
+}
+/* The account's own name carries that weight; a link inside a line of prose does not. */
+.summary a,
+.method a,
+.additional a {
+  font: inherit;
+}
+.reference {
+  margin-top: 2px;
+}
+/* A fingerprint in fours: it breaks between groups, and copies as one unbroken word. */
+.fingerprint {
+  font-family: ui-monospace, monospace;
+  text-wrap: balance;
+}
+.fingerprint span {
+  display: inline-block;
+  margin-right: 0.5ch;
+}
+.method {
+  margin-top: 8px;
+}
+/* In the corner the heading leaves empty, apart from everything that was checked. */
+.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;
+}
+.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 .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;
+}
+.since {
+  position: relative;
+  white-space: nowrap;
+}
+/* The dot sits in the gap before the date. */
+.since::before {
+  content: '\xB7';
+  position: absolute;
+  left: -7px;
+  transform: translateX(-50%);
+}
+.account.retired .mark {
+  opacity: 0.45;
+}
+.group {
+  margin: 20px 0 0;
+  color: #6b786f;
+  font-size: 11px;
+  font-weight: 550;
+}
+summary.group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  border-radius: 4px;
+  list-style: none;
+  cursor: pointer;
+}
+summary::-webkit-details-marker {
+  display: none;
+}
+.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;
+}
+.fold svg,
+summary svg {
+  width: 12px;
+  height: 12px;
+}
+.fold[aria-expanded='true'] svg,
+details[open] > summary svg {
+  transform: rotate(90deg);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .fold svg,
+  summary svg {
+    transition: transform 0.15s;
+  }
+}
+/* The fold and what the holder may do share a line, until a question needs the whole of it. */
+.bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+.account .bar .row {
+  margin: 0 0 0 auto;
+}
+.additional {
+  margin-top: 2px;
+  padding-left: 12px;
+}
+.joiner {
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 8px auto -4px;
+  color: #90a096;
+}
+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;
+}
+dt {
+  color: #6b786f;
+}
+dd {
+  margin: 0;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+.explanation {
+  margin-top: 16px;
+}
+.action {
+  width: auto;
+  height: auto;
+  padding: 9px 14px;
+  font:
+    600 13px/1.3 system-ui,
+    sans-serif;
+  color: #23312b;
+  text-align: left;
+}
+.action.primary {
+  border-color: #245f43;
+  background: #245f43;
+  color: #fff;
+}
+.action.primary:hover {
+  background: #1d4f37;
+}
+.action:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+.action.danger:hover {
+  border-color: #b3261e;
+  background: #fdecea;
+  color: #b3261e;
+}
+.row {
+  display: flex;
+  justify-content: end;
+  gap: 8px;
+  margin-top: 16px;
+}
+.account .row {
+  align-items: center;
+  justify-content: start;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+.account .action {
+  padding: 5px 10px;
+  font-size: 12px;
+}
+.account .action.dots {
+  display: grid;
+  place-items: center;
+  align-self: stretch;
+  width: 30px;
+  padding: 0;
+}
+.dots svg {
+  width: 16px;
+  height: 16px;
+}
+/* Placed under its button each time it opens, above the dialog and clipped by none of it. */
+.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;
+}
+.menu:popover-open {
+  display: grid;
+}
+.account .menu .action {
+  border: 0;
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-weight: 550;
+}
+.menu .danger {
+  color: #b3261e;
+}
+.menu hr {
+  width: 100%;
+  margin: 4px 0;
+  border: 0;
+  border-top: 1px solid #e5e9e3;
+}
+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;
+  }
+}
+`;
+
   // src/browser/signed.ts
   var checks = /* @__PURE__ */ new Map();
   var published = /* @__PURE__ */ new Map();
@@ -10520,7 +10987,7 @@ ${claims(evidence)}`;
   }
 
   // src/version.ts
-  var version = "v0.9.3";
+  var version = "v0.9.5";
 
   // src/browser/evidence-dialog.ts
   function stampLink() {
@@ -10529,104 +10996,29 @@ ${claims(evidence)}`;
     return link;
   }
   var openDialogs = /* @__PURE__ */ new WeakMap();
-  var styles2 = `
-  * { box-sizing: border-box; }
-  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; }
-  /* The pane scrolls inside the dialog, which clips its scrollbar to the rounded corners. */
-  dialog[open] { display: flex; flex-direction: column; }
-  .pane { min-height: 0; padding: 24px; overflow-y: auto; }
-  dialog::backdrop { background: #15271f66; }
-  header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
-  h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.3px; }
-  button { width: 32px; height: 32px; border: 1px solid #dce2de; border-radius: 8px; background: #fff; color: #52645a; font: 20px system-ui, sans-serif; cursor: pointer; }
-  button:hover { background: #f2f5f1; }
-  .icon { display: grid; place-items: center; padding: 0; }
-  .icon svg { width: 16px; height: 16px; }
-  .title { display: flex; align-items: center; gap: 6px; min-width: 0; }
-  .all { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #52645a; }
-  .all:hover { background: #f2f5f1; }
-  .all svg { width: 16px; height: 16px; }
-  a { color: #245f43; text-underline-offset: 3px; overflow-wrap: anywhere; }
-  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }
-  /* An element given its own display would otherwise go on showing while hidden. */
-  [hidden] { display: none !important; }
-  .summary { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
-  .mark { width: 36px; height: 36px; flex-shrink: 0; }
-  .provider { width: 14px; height: 14px; }
-  .state { font-size: 14px; font-weight: 650; line-height: 1.4; }
-  .muted { color: #6b786f; font-size: 12px; }
-  .account { position: relative; }
-  .veiled > :not(.checking) { filter: blur(4px); opacity: .55; user-select: none; }
-  .checking { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #23312b; font-size: 13px; font-weight: 600; }
-  .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
-  @keyframes spin { to { transform: rotate(360deg); } }
-  @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
-  /* The "signed" pill after the verifier's name, one size smaller than the line it sits on. */
-  .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; }
-  .summary a.signed:hover { background: #f2f5f1; }
-  .summary .signed.bad { border-color: #b3261e; color: #b3261e; font-weight: 650; cursor: help; }
-  .caution { display: inline-block; margin-left: 3px; color: #a15c00; vertical-align: -1.5px; }
-  .caution svg { display: block; width: 10px; height: 10px; }
-  .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }
-  .account h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: #6b786f; font-size: 11px; font-weight: 550; }
-  .account a, .account strong { font-weight: 650; font-size: 14px; }
-  /* The account's own name carries that weight; a link inside a line of prose does not. */
-  .summary a, .method a, .additional a { font: inherit; }
-  .reference { margin-top: 2px; }
-  /* A fingerprint in fours: it breaks between groups, and copies as one unbroken word. */
-  .fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }
-  .fingerprint span { display: inline-block; margin-right: .5ch; }
-  .method { margin-top: 8px; }
-  /* In the corner the heading leaves empty, apart from everything that was checked. */
-  .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; }
-  .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; }
-  /* 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; }
-  .since { position: relative; white-space: nowrap; }
-  /* The dot sits in the gap before the date. */
-  .since::before { content: "\xB7"; position: absolute; left: -7px; transform: translateX(-50%); }
-  .account.retired .mark { opacity: .45; }
-  .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }
-  summary.group { display: flex; align-items: center; gap: 4px; width: fit-content; border-radius: 4px; list-style: none; cursor: pointer; }
-  summary::-webkit-details-marker { display: none; }
-  .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; }
-  .fold svg, summary svg { width: 12px; height: 12px; }
-  .fold[aria-expanded="true"] svg, details[open] > summary svg { transform: rotate(90deg); }
-  @media (prefers-reduced-motion: no-preference) { .fold svg, summary svg { transition: transform .15s; } }
-  /* The fold and what the holder may do share a line, until a question needs the whole of it. */
-  .bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
-  .account .bar .row { margin: 0 0 0 auto; }
-  .additional { margin-top: 2px; padding-left: 12px; }
-  .joiner { display: block; width: 20px; height: 20px; margin: 8px auto -4px; color: #90a096; }
-  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; }
-  dt { color: #6b786f; }
-  dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
-  .explanation { margin-top: 16px; }
-  .action { width: auto; height: auto; padding: 9px 14px; font: 600 13px/1.3 system-ui, sans-serif; color: #23312b; text-align: left; }
-  .action.primary { border-color: #245f43; background: #245f43; color: #fff; }
-  .action.primary:hover { background: #1d4f37; }
-  .action:disabled { opacity: .6; cursor: progress; }
-  .action.danger:hover { border-color: #b3261e; background: #fdecea; color: #b3261e; }
-  .row { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }
-  .account .row { align-items: center; justify-content: start; flex-wrap: wrap; margin-top: 12px; }
-  .account .action { padding: 5px 10px; font-size: 12px; }
-  .account .action.dots { display: grid; place-items: center; align-self: stretch; width: 30px; padding: 0; }
-  .dots svg { width: 16px; height: 16px; }
-  /* Placed under its button each time it opens, above the dialog and clipped by none of it. */
-  .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; }
-  .menu:popover-open { display: grid; }
-  .account .menu .action { border: 0; border-radius: 6px; padding: 6px 10px; font-weight: 550; }
-  .menu .danger { color: #b3261e; }
-  .menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid #e5e9e3; }
-  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; }
-  ${markStyles}
-`;
+  var holds = 0;
+  var release = () => {
+  };
+  function holdPage(dialog) {
+    if (holds++ === 0) {
+      const { style, clientWidth } = document.documentElement;
+      const held = ["overflow-x", "overflow-y", "scrollbar-gutter"];
+      const saved = held.map((name) => [
+        style.getPropertyValue(name),
+        style.getPropertyPriority(name)
+      ]);
+      if (innerWidth > clientWidth) style.setProperty("scrollbar-gutter", "stable", "important");
+      style.setProperty("overflow-x", "hidden", "important");
+      style.setProperty("overflow-y", "hidden", "important");
+      release = () => held.forEach((name, i2) => {
+        const [value, priority] = saved[i2];
+        if (value) style.setProperty(name, value, priority);
+        else style.removeProperty(name);
+      });
+    }
+    dialog.addEventListener("close", () => --holds === 0 && release(), { once: true });
+  }
+  var styles2 = evidence_dialog_css_default + markStyles;
   function node(tag, text = "", className = "") {
     const element = document.createElement(tag);
     element.textContent = text;
@@ -10749,6 +11141,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 +11149,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 +11351,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 +11376,7 @@ ${claims(evidence)}`;
     toggle.onclick = () => {
       set(!shown3);
       fold.toggle(shown3);
+      if (shown3) reveal(folded.at(-1));
     };
     return toggle;
   }
@@ -11020,6 +11425,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 +11435,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 +11480,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 +11500,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 +11528,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 +11649,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);
@@ -11299,34 +11712,16 @@ ${record2.external.id}`;
       { once: true }
     );
     if (opened && [opened].flat().length) draw(opened);
+    holdPage(dialog);
     dialog.showModal();
     void refresh();
   }
 
+  // src/browser/connect-dialog.css.ts
+  var connect_dialog_css_default = ".steps > p:first-child {\n  margin-top: 0;\n}\n.choices {\n  display: grid;\n  gap: 8px;\n  margin-top: 16px;\n}\n/* With a way back beside it, the heading sits by that and not in the middle. */\nheader.backed h2 {\n  margin-right: auto;\n}\n.choices .action {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.choices .more {\n  margin-left: auto;\n  color: #6b786f;\n  font-weight: 500;\n  font-size: 12px;\n}\n.row.start {\n  justify-content: start;\n}\n/* The block scrolls and its frame does not, so the copy button stays in its corner. */\n.code {\n  position: relative;\n  margin: 10px 0;\n}\npre {\n  margin: 0;\n  padding: 10px 64px 10px 12px;\n  border: 1px solid #e0e6df;\n  border-radius: 8px;\n  background: #f6f8f5;\n  font:\n    12px/1.5 ui-monospace,\n    monospace;\n  white-space: pre;\n  overflow-x: auto;\n}\n.code .action {\n  position: absolute;\n  top: 9px;\n  right: 9px;\n  padding: 3px 8px;\n  font-size: 11px;\n}\nlabel {\n  display: grid;\n  gap: 4px;\n  margin-top: 12px;\n  font-weight: 600;\n}\ninput[type='url'],\ninput[type='email'],\ninput[type='tel'],\ninput[type='text'],\ntextarea {\n  width: 100%;\n  padding: 8px 10px;\n  border: 1px solid #cfd8d2;\n  border-radius: 8px;\n  font:\n    13px/1.4 system-ui,\n    sans-serif;\n  color: inherit;\n  background: #fff;\n}\ntextarea {\n  font-family: ui-monospace, monospace;\n  font-size: 12px;\n  resize: vertical;\n}\nfieldset {\n  margin: 16px 0 0;\n  padding: 10px 14px;\n  border: 1px solid #e0e6df;\n  border-radius: 10px;\n}\nlegend {\n  padding: 0 4px;\n  color: #6b786f;\n  font-size: 11px;\n  font-weight: 550;\n}\nfieldset label {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  margin-top: 4px;\n  font-weight: 500;\n}\n/* A radio has no baseline to speak of, so it is set in the middle of the label's first line. */\nfieldset input {\n  flex-shrink: 0;\n  align-self: flex-start;\n  width: 13px;\n  height: 13px;\n  font: inherit;\n  margin-top: 4px;\n  margin-top: calc((1lh - 13px) / 2);\n  margin-bottom: 0;\n}\n.error {\n  color: #9b2c33;\n}\n";
+
   // src/browser/connect-dialog.ts
-  var connectStyles = `
-  ${styles2}
-  .steps > p:first-child { margin-top: 0; }
-  .choices { display: grid; gap: 8px; margin-top: 16px; }
-  /* With a way back beside it, the heading sits by that and not in the middle. */
-  header.backed h2 { margin-right: auto; }
-  .choices .action { display: flex; align-items: center; gap: 8px; }
-  .choices .more { margin-left: auto; color: #6b786f; font-weight: 500; font-size: 12px; }
-  .row.start { justify-content: start; }
-  /* The block scrolls and its frame does not, so the copy button stays in its corner. */
-  .code { position: relative; margin: 10px 0; }
-  pre { margin: 0; padding: 10px 64px 10px 12px; border: 1px solid #e0e6df; border-radius: 8px; background: #f6f8f5; font: 12px/1.5 ui-monospace, monospace; white-space: pre; overflow-x: auto; }
-  .code .action { position: absolute; top: 9px; right: 9px; padding: 3px 8px; font-size: 11px; }
-  label { display: grid; gap: 4px; margin-top: 12px; font-weight: 600; }
-  input[type=url], input[type=email], input[type=tel], input[type=text], textarea { width: 100%; padding: 8px 10px; border: 1px solid #cfd8d2; border-radius: 8px; font: 13px/1.4 system-ui, sans-serif; color: inherit; background: #fff; }
-  textarea { font-family: ui-monospace, monospace; font-size: 12px; resize: vertical; }
-  fieldset { margin: 16px 0 0; padding: 10px 14px; border: 1px solid #e0e6df; border-radius: 10px; }
-  legend { padding: 0 4px; color: #6b786f; font-size: 11px; font-weight: 550; }
-  fieldset label { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-weight: 500; }
-  /* A radio has no baseline to speak of, so it is set in the middle of the label's first line. */
-  fieldset input { flex-shrink: 0; align-self: flex-start; width: 13px; height: 13px; font: inherit; margin-top: 4px; margin-top: calc((1lh - 13px) / 2); margin-bottom: 0; }
-  .error { color: #9b2c33; }
-`;
+  var connectStyles = styles2 + connect_dialog_css_default;
   function codeBlock(code) {
     const block = node("div", "", "code");
     const scroller = node("pre");
@@ -11777,6 +12172,7 @@ ${record2.external.id}`;
         { once: true }
       )
     );
+    holdPage(dialog);
     dialog.showModal();
     void choose();
     return closed;