/*
 * eSignVerification — verification interface.
 *
 * White ground, air instead of borders: hierarchy comes from type and space.
 * Comfortaa throughout, except for machine identifiers — certificate names,
 * filenames, keys, the curl sample — where a monospace face keeps 0 and O
 * apart and the rounded display face would not.
 *
 * Status colours (valid / invalid / unknown) are deliberately separate from
 * the accent: they carry information, not identity.
 */

:root {
    /* White ground, air instead of borders. One accent; status colours stay
       separate from it because they carry information, not identity. */
    --bg:        #FFFFFF;
    --bg-sunk:   #F7F8FB;
    --card:      #FFFFFF;
    --ink:       #0F1219;
    --ink-2:     #5B6474;
    /* Carries most of the small text on the page — card metadata, check chips,
       certificate fields, the footer. At #9AA2B1 that was 2.6:1 on white, well
       under the 4.5:1 WCAG AA asks for body text, and the page read as washed
       out because the greyest ink was doing the most work. */
    --ink-3:     #6A7284;
    --hair:      #ECEEF3;
    --accent:    #2F5BFF;
    --accent-bg: #EEF2FF;

    /* Buying credit is a different kind of act from verifying a document, so it
       gets its own colour rather than competing with the accent that marks the
       working surface. */
    /* Darkened from #8B7BD8: white button text on it was 3.6:1, and the label
       is small and set at 600. */
    --lilac:     #7461C9;
    --lilac-ink: #4A3F86;
    --lilac-bg:  #F3F0FC;

    /* Section headings. Near-black on it reads at 17:1, so the highlight is
       decoration that costs nothing in legibility. */
    --neon-bg:   #F5FA9E;

    /* Sign-in. From the natural-tone palette (docs/pastel-palette.md, row 7).
       Takes dark ink, not white: white on it is 3.0:1 and fails, dark ink is
       6.2:1. The magenta from the same row is the opposite — it needs white —
       but it sits 77 away from the invalid-red, and a reddish button beside
       red "Invalid" pills misreads on a page whose whole output is verdicts. */
    --turquoise: #04A4B4;

    --ok:      #0C7B6F;
    --ok-bg:   #E6F5F3;
    --bad:     #BF403E;
    --bad-bg:  #FDECEC;
    --warn:    #98641A;
    --warn-bg: #FDF4E3;

    --sans: Comfortaa, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --xs: .78rem;
    --sm: .875rem;
    --md: 1rem;
    --lg: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
    --xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem);
    --xxl: clamp(2.4rem, 1.8rem + 2.8vw, 4rem);

    --shadow: 0 1px 2px rgba(15,18,25,.04), 0 8px 24px rgba(15,18,25,.05);
    --radius: 14px;
  }

  /* Deliberately single-theme. A verification verdict is read as evidence, and
     the status colours below carry meaning rather than decoration — this page
     commits to one ground so green means one thing on every machine. There is
     no dark variant to fall out of step with it. */

  * { box-sizing: border-box; }

  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: var(--md)/1.65 var(--sans);
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 58rem; margin: 0 auto; padding: 0 1.5rem 6rem; }

  .micro {
    font: 500 var(--xs)/1 var(--sans);
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  }

  /* ---- header ---- */
  header {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: space-between;
    padding: 1.5rem 0;
  }
  .brand { display: flex; align-items: baseline; gap: .5rem; letter-spacing: -.01em; }
  /* The memorable half carries the weight; the descriptive tail recedes so a
     23-character name still reads as one thing. */
  .brand-name { font-weight: 700; }
  .brand-tail { font-weight: 400; color: var(--ink-2); }
  .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); }
  .brand small { font: 400 var(--xs)/1 var(--mono); color: var(--ink-3); }

  .tools { display: flex; align-items: center; gap: 1.25rem; font-size: var(--sm); }
  .account { color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .account b { color: var(--ink); font-weight: 600; }

  /* ---- who you are ---- */
  .who {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--bg-sunk); border-radius: 999px; padding: .35rem .4rem .35rem .8rem;
  }
  .who-mail {
    font-size: var(--xs); color: var(--ink-2);
    max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .who-balance {
    font-size: var(--xs); color: var(--ink-2); white-space: nowrap;
    font-variant-numeric: tabular-nums;
    border-left: 1px solid var(--hair); padding-left: .55rem;
  }
  .who-balance b { color: var(--ink); font-weight: 700; }
  .who-out {
    font: 500 var(--xs)/1 var(--sans); padding: .5em .85em; border-radius: 999px;
    background: var(--card); color: var(--ink-2); text-decoration: none; box-shadow: var(--shadow);
  }
  .who-out:hover { color: var(--bad); }

  /* One line under the tagline pointing at the single sign-in button. */
  .gate { margin: 1.6rem 0 0; font-size: var(--sm); color: var(--ink-2); max-width: 48ch; }

  /* ---- hero ---- */
  h1 {
    font: 400 var(--xxl)/1.06 var(--sans);
    letter-spacing: -.02em; text-wrap: balance;
    margin: 3.5rem 0 1rem; max-width: 16ch;
  }
  .tagline { font-size: var(--lg); color: var(--ink-2); max-width: 42ch; margin: 0 0 3rem; font-weight: 400; }

  /* ---- drop ---- */
  .dropbox-label { margin: 0 0 .6rem; }

  .drop {
    display: grid; place-items: center; gap: .35rem;
    padding: 3.5rem 2rem; text-align: center; cursor: pointer;
    background: var(--bg-sunk); border-radius: var(--radius);
    border: 1px dashed transparent;
    transition: background .15s, border-color .15s;
  }
  .drop:hover, .drop:focus-visible { border-color: var(--accent); background: var(--accent-bg); }
  .drop-title { font-size: var(--lg); font-weight: 500; letter-spacing: -.015em; }
  .drop-hint { font-size: var(--sm); color: var(--ink-3); }

  /* ---- search over the local history ---- */
  .find { display: flex; align-items: center; gap: .85rem; margin-top: 1.25rem; }
  .find input {
    flex: 1; font: 400 var(--md)/1.4 var(--sans); color: var(--ink);
    padding: .85rem 1.15rem; background: var(--bg-sunk);
    border: 1px solid transparent; border-radius: 999px; outline: none;
  }
  .find input::placeholder { color: var(--ink-3); }
  .find input:focus { border-color: var(--accent); background: var(--card); box-shadow: var(--shadow); }
  .find-count { font-size: var(--xs); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

  .storage-note {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
    font-size: var(--xs); color: var(--ink-2); margin: .85rem 0 0;
    padding: .7rem 1.15rem; background: var(--ok-bg); border-radius: 10px;
  }
  .storage-icon { font-size: .9em; }
  button.link {
    font: inherit; color: var(--accent); background: none; border: 0; padding: 0;
    cursor: pointer; text-decoration: underline; text-underline-offset: .2em;
  }
  .empty-state { font-size: var(--sm); color: var(--ink-3); text-align: center; padding: 2.5rem 0; margin: 0; }

  /* ---- buying credit ---- */
  button.buy {
    font: 600 var(--sm)/1 var(--sans); padding: .8em 1.4em; cursor: pointer;
    background: var(--lilac); color: #fff; border: 0; border-radius: 999px;
    white-space: nowrap;
  }
  button.buy:hover { filter: brightness(1.08); }
  button.buy.sm { font-size: var(--xs); padding: .55em 1em; }

  .paywall {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
    padding: 1.5rem 1.75rem; background: var(--warn-bg); border-radius: var(--radius);
    /* The paywall stands where the drop box would be, so it needs the same
       separation from the search below that the drop box has. */
    margin-bottom: 1.5rem;
  }
  .paywall-title { font: 500 var(--lg)/1.3 var(--sans); letter-spacing: -.02em; margin: 0; color: var(--ink); }
  .paywall-note { font-size: var(--sm); color: var(--ink-2); margin: .3rem 0 0; max-width: 48ch; }


  /* ---- cards ---- */
  #cards { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }

  /* A pale border as well as the shadow: a history card is a record, and on a
     white ground the shadow alone left its edges to be inferred rather than
     seen. Lavender rather than grey so the outline reads as part of the palette
     and not as a default. */
  .card {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    border: 1px solid #E4DDF6; overflow: hidden;
  }

  .card-head {
    display: flex; flex-wrap: wrap; gap: .75rem 1rem;
    align-items: center; justify-content: space-between;
    padding: 1.15rem 1.5rem;
  }
  .card-file { font: 500 var(--sm)/1.4 var(--mono); word-break: break-all; }
  .card-meta { font-size: var(--xs); color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: .15rem; }

  .pill {
    display: inline-flex; align-items: center; gap: .45em;
    font: 600 var(--xs)/1 var(--sans); letter-spacing: .02em;
    padding: .5em .85em; border-radius: 999px; white-space: nowrap;
  }
  .pill::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; }
  .pill[data-s="valid"]   { background: var(--ok-bg);   color: var(--ok); }
  .pill[data-s="invalid"] { background: var(--bad-bg);  color: var(--bad); }
  .pill[data-s="none"]    { background: var(--warn-bg); color: var(--warn); }

  .sig { padding: 0 1.5rem 1.5rem; }

  .signer { font: 500 var(--xl)/1.2 var(--sans); letter-spacing: -.015em; margin: 0; text-wrap: balance; }
  .signer.alleged { font-size: var(--lg); color: var(--ink-3); font-weight: 400; }
  .alleged-note { font-size: var(--sm); color: var(--bad); margin: .4rem 0 0; }

  .qual { display: inline-block; font: 600 var(--xs)/1 var(--mono); letter-spacing: .06em; padding: .5em .75em; border-radius: 999px; margin-top: .9rem; }
  .qual[data-q="QESig"]   { background: var(--ok-bg);     color: var(--ok); }
  .qual[data-q="AdESig"]  { background: var(--accent-bg); color: var(--accent); }
  .qual[data-q="Unknown"] { background: var(--warn-bg);   color: var(--warn); }

  dl.facts {
    display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .5rem 1.5rem;
    margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--hair);
    font-size: var(--sm);
  }
  dl.facts dt { color: var(--ink-3); font-size: var(--xs); }
  dl.facts dd { margin: 0; font-family: var(--mono); font-size: var(--xs); word-break: break-word; color: var(--ink-2); }

  ul.checks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
  ul.checks li {
    font-size: var(--xs); padding: .45em .8em; border-radius: 999px;
    background: var(--bg-sunk); color: var(--ink-3);
    display: inline-flex; align-items: center; gap: .4em;
  }
  ul.checks li::before { content: "✓"; font-size: .9em; }
  ul.checks li[data-on="true"] { background: var(--ok-bg); color: var(--ok); }
  ul.checks li[data-on="false"] { color: var(--ink-3); }
  ul.checks li[data-on="false"]::before { content: "✕"; }
  ul.checks li[data-on="warn"] { background: var(--warn-bg); color: var(--warn); }
  ul.checks li[data-on="warn"]::before { content: "•"; }

  .card-note { padding: 0 1.5rem 1.5rem; font-size: var(--sm); color: var(--ink-2); }
  .card-note.err { color: var(--bad); }

  /* ---- explanation ---- */
  .explain { margin-top: 6rem; }
  /* Section headings carry the highlight. Inline-block so it sits behind the
     words rather than striping the full column width. */
  .explain h2, .legal h2 {
    display: inline-block;
    background: var(--neon-bg);
    padding: .25em .6em; border-radius: 6px;
  }
  .explain h2 { font: 500 var(--lg)/1.3 var(--sans); letter-spacing: -.02em; margin: 3rem 0 1rem; }
  .lead { font-size: var(--lg); font-weight: 400; color: var(--ink-2); max-width: 52ch; margin: 1rem 0 0; }
  ul.how { list-style: none; padding: 0; margin: 0; max-width: 58ch; }
  ul.how li { padding: .85rem 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); font-size: var(--sm); }
  ul.how li:first-child { border-top: 1px solid var(--hair); }

  .limits-scroll { overflow-x: auto; }
  table.limits { width: 100%; border-collapse: collapse; font-size: var(--sm); min-width: 32rem; }
  table.limits th { text-align: left; padding: 0 1.5rem .75rem 0; }
  table.limits td { padding: .9rem 1.5rem .9rem 0; border-top: 1px solid var(--hair); vertical-align: top; }
  table.limits td.not { color: var(--ink-3); }

  .disclaimer { margin-top: 2rem; font-size: var(--sm); color: var(--ink-3); }
  .listinfo { font: var(--xs)/1.6 var(--mono); color: var(--ink-3); margin-top: .5rem; }

  /* ---- sample ---- */
  .sample { margin-top: 4rem; background: var(--bg-sunk); border-radius: var(--radius); }
  .sample > summary {
    display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
    padding: 1.35rem 2rem; cursor: pointer; list-style: none;
    border-radius: var(--radius);
  }
  .sample > summary::-webkit-details-marker { display: none; }
  .sample > summary::after {
    content: "＋"; margin-left: auto; color: var(--ink-3);
    font-size: var(--md); line-height: 1; transition: transform .15s;
  }
  .sample[open] > summary::after { content: "－"; }
  .sample > summary:hover .sum-title { color: var(--accent); }
  .sum-title { font: 500 var(--lg)/1.3 var(--sans); letter-spacing: -.02em; }
  .sum-hint { font-size: var(--sm); color: var(--ink-3); }
  .sample-body { padding: 0 2rem 2rem; }
  .sample p { font-size: var(--sm); color: var(--ink-2); margin: 0 0 1.25rem; max-width: 56ch; }
  pre {
    margin: 0; padding: 1.15rem; overflow-x: auto; background: var(--card);
    border-radius: 10px; font: var(--xs)/1.8 var(--mono); color: var(--ink-2);
    box-shadow: var(--shadow);
  }
  .key-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; font-size: var(--xs); }
  .key-val { font-family: var(--mono); color: var(--ink-3); }
  button.act {
    font: 500 var(--xs)/1 var(--sans); padding: .55em 1em; cursor: pointer;
    background: var(--card); color: var(--accent); border: 0; border-radius: 999px; box-shadow: var(--shadow);
  }
  button.act:hover { background: var(--accent-bg); }

  /* ---- terms ---- */
  .legal { max-width: 44rem; }
  .legal h1 { margin: 2.5rem 0 .75rem; font-size: var(--xl); max-width: none; }
  .legal .tagline { font-size: var(--md); margin-bottom: .5rem; }
  .legal-meta { font-size: var(--xs); color: var(--ink-3); margin: 0 0 2.5rem; }
  /* The highlight is the separator now, so the hairline rule above it goes —
     a band and a rule together read as two devices doing one job. */
  .legal h2 {
    font: 600 var(--md)/1.35 var(--sans); letter-spacing: -.01em;
    margin: 2.5rem 0 .8rem;
  }
  .legal h3 { font: 600 var(--sm)/1.4 var(--sans); margin: 1.75rem 0 .5rem; }
  .legal p { font-size: var(--sm); color: var(--ink-2); margin: 0 0 .9rem; }
  .legal a { color: var(--accent); }
  .legal strong { color: var(--ink); font-weight: 600; }
  .legal code { font: var(--xs)/1.6 var(--mono); background: var(--bg-sunk); padding: .1em .4em; border-radius: 4px; }
  ul.legal-list { margin: 0 0 1rem; padding-left: 1.2rem; }
  ul.legal-list li { font-size: var(--sm); color: var(--ink-2); margin-bottom: .45rem; }
  .brand-name { text-decoration: none; color: inherit; }

  /* ---- footer ---- */
  .site-foot {
    margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--hair);
    display: grid; gap: 1rem;
  }
  .foot-legal {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    font-size: var(--xs); color: var(--ink-2);
    background: var(--lilac-bg); padding: .9rem 1.15rem; border-radius: 10px;
  }
  .foot-agents {
    display: flex; flex-wrap: wrap; gap: .4rem;
    font: var(--xs)/1.6 var(--mono); color: var(--ink-3);
    padding-top: .9rem; border-top: 1px solid var(--hair);
  }
  .foot-agents a { color: var(--ink-2); text-decoration: none; }
  .foot-agents a:hover { color: var(--accent); }

  .gbtn {
    display: inline-flex; align-items: center; gap: .65rem;
    font: 700 var(--sm)/1 var(--sans); cursor: pointer;
    text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
    padding: .8em 1.4em;
    /* The turquoise outlines the button rather than filling it: Google's mark
       is four saturated colours, and on a saturated ground they stop reading as
       the mark and start reading as noise. White behind it, colour around it. */
    background: var(--card); color: var(--ink);
    border: 2px solid var(--turquoise);
    /* House button shape — three corners round, the top-left stays. Same
       values as .lb-btn in the slot admin, so it is the shape rather than a
       shape that resembles it. */
    border-radius: .3rem 1.2rem 1.2rem 1.2rem;
  }
  .buy-note {
    font-size: var(--xs); color: var(--ink-3); margin: 0 0 .6rem; max-width: 46ch; line-height: 1.5;
  }

  .gbtn:hover { background: var(--bg-sunk); }
  /* The real Google mark, same asset the IFRS module uses, inlined as a data
     URI so no external host is involved. */
  .iconGoogle {
    display: inline-block; width: 18px; height: 18px; vertical-align: middle;
    background-repeat: no-repeat; background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3Cpath fill='none' d='M0 0h48v48H0z'/%3E%3C/svg%3E");
  }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

  /* ---- narrow screens ----------------------------------------------------
   *
   * The layout was fluid but never tested small, and three things broke rather
   * than reflowed: the identity chip is a fixed row of email, balance and sign
   * out that could not fit beside the brand; the fact list is a two-column grid
   * whose 7rem label column left too little for a monospace certificate name;
   * and the vertical rhythm was tuned for a wide page, so a phone spent most of
   * its first screen on whitespace.
   *
   * The limits table is deliberately left to scroll inside .limits-scroll. It
   * is a two-column comparison — stacking it would destroy the comparison,
   * which is the whole point of the table.
   */
  @media (max-width: 40rem) {
    .wrap { padding: 0 1.1rem 4rem; }

    header { gap: .75rem; padding: 1.1rem 0; }
    /* Tools onto their own line, filling it, rather than squeezed beside the brand. */
    .tools { width: 100%; gap: .6rem; flex-wrap: wrap; }

    /* The chip takes the row and lets the address absorb what is left, so a
       long address ellipsises instead of pushing sign-out off screen. */
    /* min-width: 0 on the chip as well as on the address inside it. A flex
       item's default min-width is auto, which refuses to shrink below its
       content's minimum — and that applies at every level of nesting, so
       relaxing it on the inner element alone leaves the outer one holding the
       width open. A long address overflowed the page at 375px for exactly
       this reason while the ellipsis never engaged. */
    .who { flex: 1 1 100%; min-width: 0; justify-content: space-between; }
    /* basis 0, not auto: from auto the address starts at its own text width and
       refuses to give the last pixels back, so the chip stays wider than the
       row it is in. From 0 it takes only what is left over and ellipsises. */
    .who-mail { max-width: none; flex: 1 1 0; min-width: 0; }

    h1 { margin: 2rem 0 .75rem; }
    .tagline { margin-bottom: 2rem; }
    .gate { margin-top: 1.1rem; }

    .drop { padding: 2.5rem 1.25rem; }
    .find { flex-wrap: wrap; }

    /* The limits table stacks rather than scrolling sideways. The pairing is
       what makes it a comparison, so each half keeps its heading — carried on
       the cell as data-label — and the two stay together in one block. A
       horizontally scrolling table on a phone hides half the argument. */
    .limits-scroll { overflow-x: visible; }
    table.limits { min-width: 0; }
    table.limits thead { display: none; }
    table.limits tr {
      display: block; padding: .9rem 0; border-top: 1px solid var(--hair);
    }
    table.limits td {
      display: block; padding: 0; border: 0;
    }
    table.limits td + td { margin-top: .55rem; }
    table.limits td::before {
      content: attr(data-label);
      display: block; margin-bottom: .1rem;
      font: 500 var(--xs)/1.4 var(--sans);
      letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
    }

    /* One column: the label sits above its value instead of stealing 7rem from it. */
    dl.facts { grid-template-columns: 1fr; gap: .15rem; }
    dl.facts dt { margin-top: .7rem; }
    dl.facts dd { margin-bottom: .2rem; }

    .card-head, .sig, .card-note { padding-left: 1.1rem; padding-right: 1.1rem; }

    .explain { margin-top: 3.5rem; }
    .explain h2 { margin: 2rem 0 .8rem; }

    .sample { margin-top: 2.5rem; }
    .sample > summary { padding: 1.1rem 1.25rem; }
    .sample-body { padding: 0 1.25rem 1.5rem; }

    .site-foot { margin-top: 3rem; }
    .paywall { padding: 1.25rem; }
    .legal h1 { margin-top: 1.5rem; }
  }

  /* Below this the uppercase sign-in label and the brand stop sharing a line. */
  @media (max-width: 24rem) {
    .brand { font-size: var(--sm); }
    .gbtn { width: 100%; justify-content: center; }
    button.buy { flex: 1 1 auto; }

    /* Below this an address, a balance and a sign-out cannot share one line at
       any sensible type size — so they stop trying. The address takes the first
       row, the rest the second, and the divider goes with the arrangement it
       was dividing. */
    .who { flex-wrap: wrap; row-gap: .35rem; }
    .who-mail { flex: 1 1 100%; }
    .who-balance { border-left: 0; padding-left: 0; }
  }