/* SPDX-License-Identifier: MIT — app pages: the viewer and the gone page (/s, /t), /locker, /d,
   /inbox, /send, /watch, /upgrade, /verify (spec §12.2–12.3; 14-ghost-design §4.3, DESIGN.md). Every
   task screen is one centred column that starts with the ghost in the pose of its rule (.a-scene).
   Shared components (buttons, banners, chips, the glass box, the send step) are in widget.css and
   parts.css. Shared tokens only; class prefix a-. */

.a-page { display: flex; flex-direction: column; min-height: 100svh; }
.a-main { flex: 1; display: grid; align-content: start; gap: var(--s-6); padding-block: var(--s-7) var(--s-9); outline: none; }
.a-main > * { min-width: 0; }
.a-main > .a-btn { justify-self: start; }   /* the inbox's "Check again" is sized to its words */
@media (min-width: 1200px) { .a-main { max-width: calc(960px + 2 * var(--gutter)); } }   /* one column, centred like the site's sections */
.a-h1 { font: var(--t-h2); letter-spacing: -.015em; }
.a-notfound { display: grid; gap: var(--s-5); justify-items: center; }
.a-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.a-h2 { font: var(--t-h3); }
.a-lede { font: var(--t-body); font-size: clamp(17px, 1.4vw, 19px); color: var(--fg-2); max-width: 60ch; }
.a-section { display: grid; gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--hair); max-width: 760px; }
.a-section > p { max-width: 64ch; }
.a-note { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-input); background: var(--bg-sunken); max-width: 64ch; }
.a-note .a-icon { margin-top: 3px; }
.a-done { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--t-ui); }
.a-wrap { overflow-wrap: anywhere; }

/* --- /locker: its three things, then (with a locker) who it is beside what it does ------------- */
.a-locker { display: grid; gap: var(--s-6); }
.a-choices { display: grid; gap: var(--s-4); width: 100%; max-width: 860px; justify-self: center; }
.a-choice { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: var(--s-4) 0; }
.a-choice:first-child { padding: var(--s-5); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow); }
.a-figure.a-choice-ghost { inline-size: 76px; }
.a-choice-body { display: grid; gap: var(--s-2); justify-items: start; min-width: 0; }
.a-choice-h { font: var(--t-h3); }
.a-choice-line { color: var(--fg-2); max-width: 46ch; }
.a-choice-body > .a-btn { margin-top: var(--s-2); }
@media (min-width: 760px) {
  .a-choices { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
  .a-choice:first-child { grid-column: 1 / -1; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .a-choice:first-child .a-figure.a-choice-ghost { inline-size: 112px; }
  .a-choices--two .a-choice:first-child { grid-column: auto; grid-template-columns: 76px minmax(0, 1fr); align-items: start; padding: var(--s-4) 0; background: none; box-shadow: none; }
  .a-choices--two .a-choice:first-child .a-figure.a-choice-ghost { inline-size: 76px; }
}
.a-choices.a-choices--two { justify-self: stretch; max-width: none; grid-template-columns: minmax(0, 1fr); }
.a-choices--two .a-choice:first-child { padding: var(--s-4) 0; background: none; box-shadow: none; }
.a-restore-box { justify-self: center; width: 100%; max-width: 860px; }
.a-restore-box > p { color: var(--fg-2); }
.a-scene.a-scene--row { justify-items: start; text-align: left; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-1); align-items: center; }
.a-scene--row .a-figure { inline-size: 72px; grid-row: span 2; }
.a-scene--row .a-scene-h { font: var(--t-h2); letter-spacing: -.015em; max-width: none; align-self: end; }
.a-scene--row .a-say { max-width: none; font: var(--t-body); align-self: start; }
/* The locker: who it is (address, its code, the safety code) beside what it does. */
.a-locker-cols { display: grid; gap: var(--s-7); align-items: start; }
.a-locker-main { display: grid; gap: var(--s-6); min-width: 0; }
.a-identity { display: grid; gap: var(--s-6); align-content: start; }
@media (min-width: 1100px) {
  .a-locker-cols { grid-template-columns: 340px minmax(0, 760px); }
  .a-identity { position: sticky; top: var(--s-6); }
}
.a-section > .a-btn, .a-section > .a-row { justify-self: start; }
.a-id-block { display: grid; gap: var(--s-3); justify-items: start; min-width: 0; }
.a-address { font: var(--t-code); overflow-wrap: anywhere; max-width: 52ch; padding: var(--s-3) var(--s-4); border-radius: var(--r-input); background: var(--bg-sunken); }
.a-dropcard { padding: var(--s-5); border-top: 0; border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow); }
.a-dropcard-head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.a-droplink {
  width: 100%; min-height: 56px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-input); background: var(--bg-sunken);
  color: var(--fg); font: var(--t-code); font-size: clamp(15px, 2.4vw, 19px);
}
.a-inline-form { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--hair); }
.a-inline-form .a-row { flex-wrap: wrap; }
.a-inline-form .a-input { flex: 1 1 14em; min-width: 0; }
.a-inline-form .a-btn { flex: none; white-space: nowrap; }
.a-zone { max-width: 720px; }
.a-zone .md-root { margin-inline: 0; }
.a-kept { list-style: none; padding: 0; display: grid; }
.a-kept-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-block: var(--s-2); border-bottom: 1px solid var(--hair); }
.a-kept-name { font-weight: 700; overflow-wrap: anywhere; }
.a-quota { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--bg-sunken); overflow: hidden; max-width: 480px; }
.a-quota-fill { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(var(--q, 0)); }
.a-viewkey { display: grid; gap: var(--s-3); }
.a-keybanner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
  border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow);
}
.a-keybanner p { flex: 1 1 24ch; }

/* --- the key: save, restore, the modal ---------------------------------------------------------- */
.a-keysave, .a-restore { display: grid; gap: var(--s-3); max-width: 60ch; }
.a-field { display: grid; gap: var(--s-2); }
.a-check { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); }
.a-check input { width: 20px; height: 20px; accent-color: var(--fg); flex: none; }
.a-check--strong { font-weight: 600; }
.a-code { padding: var(--s-3) var(--s-4); border-radius: var(--r-input); background: var(--bg-sunken); font: var(--t-code); overflow-wrap: anywhere; }
.a-disclose summary, .a-raw summary { display: list-item; padding-block: var(--s-3); font: var(--t-ui); cursor: pointer; }
.a-disclose[open] { display: grid; gap: var(--s-3); }
.a-filebtn { position: relative; justify-self: start; }
.a-filebtn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.a-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.a-modal {
  margin: auto;
  width: min(92vw, 560px); max-height: 92svh; overflow: auto; padding: var(--s-6) var(--s-5); border: 0; border-radius: var(--r-panel);
  background: var(--bg-raised); color: var(--fg); box-shadow: var(--shadow);
}
.a-modal::backdrop { background: var(--scrim); }
.a-modal h2 { font: var(--t-h3); margin-bottom: var(--s-3); }
.a-modal > p { margin-bottom: var(--s-4); }
.a-modal-actions { margin-top: var(--s-5); }

/* --- a screen's head: the ghost in the pose of its rule, the line, the ghost's sentence --------- */
.a-scene { display: grid; justify-items: center; text-align: center; gap: var(--s-3); }
.a-figure { inline-size: min(48vw, 210px); filter: var(--glow); }
.a-scene-h { font: var(--t-h2); letter-spacing: -.015em; text-wrap: balance; outline: none; max-width: 18ch; }
.a-say { font: var(--t-say); color: var(--fg-2); max-width: 32ch; text-wrap: balance; }
.a-bye { color: var(--fg); }
.a-scene--small { justify-items: start; text-align: left; }
.a-scene--small .a-figure { inline-size: 88px; }
.a-scene--small .a-scene-h { font: var(--t-h3); max-width: none; }
.a-center { text-align: center; }
.a-row--center { justify-content: center; }
:is(.md-root, .a-page) .a-btn--big { min-height: 56px; padding-inline: var(--s-6); font-size: 19px; }
:is(.md-root, .a-page) .a-btn--tari { border-color: var(--tari-text); }

/* --- the viewer and the gone page: one centred column ------------------------------------------- */
.a-view { display: grid; gap: var(--s-5); width: 100%; max-width: 640px; justify-self: center; }
.a-view > .a-btn { justify-self: center; }
.a-view > .a-working { text-align: center; color: var(--fg-2); }
/* the foot of every state (share-simple): Make your own secret, an outline button after the state's own action, then
   the quiet links (What the server knows, whose glass box opens under them, and Report this link) */
.a-view-foot { display: grid; justify-items: center; gap: var(--s-2); margin-top: var(--s-5); }
.a-view-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-5); }
.a-page .a-view-links :is(a, .a-linkbtn) {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap); color: var(--fg-2); font: var(--t-small);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.a-page .a-view-links :is(a, .a-linkbtn):hover { color: var(--fg); }
.a-view-foot .a-known { justify-self: stretch; text-align: left; }
/* while the line after the value shows (ui/invite.js), its button is the one Make your own secret; its × brings this one back */
.a-view:has(.invite) .a-view-own { display: none; }
/* one line under the rule: the server can't scan what it can't see */
.a-scan { display: flex; gap: var(--s-2); align-items: flex-start; justify-self: center; max-width: 72ch; font: var(--t-small); color: var(--fg-2); text-wrap: balance; }
.a-scan .a-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.a-opening { font-variant-numeric: tabular-nums; }
.a-opened-h { font: var(--t-h2); letter-spacing: -.015em; outline: none; }
.a-view[data-state="opened"] { max-width: 760px; }
.a-view[data-state="opened"] > .a-row { justify-self: start; }
.a-after { font: var(--t-body); color: var(--fg-2); max-width: 60ch; }
.a-after--once { font: var(--t-ui); color: var(--fg); }
.a-receipt {
  display: grid; justify-items: center; gap: var(--s-3); justify-self: center; width: min(100%, 460px);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow);
  text-align: center; font: var(--t-small); color: var(--fg-2);
}
.a-receipt:empty { display: none; }
.a-view .a-pw-form { justify-self: center; width: min(100%, 420px); }
.a-view .a-filename { text-align: center; }
.a-alarm { display: flex; gap: var(--s-3); align-items: center; }
.a-alarm .a-icon { width: 32px; height: 32px; color: var(--exit-text); }
.a-filename { font: var(--t-code); overflow-wrap: anywhere; }
.a-filecard { display: grid; place-items: center; gap: var(--s-2); aspect-ratio: 4 / 3; max-width: 320px; border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow); padding: var(--s-4); }
.a-filecard .a-icon { width: 40px; height: 40px; }
.a-meta { font: var(--t-small); color: var(--fg-2); overflow-wrap: anywhere; }
.a-what-you-see { display: grid; gap: var(--s-3); min-width: 0; }
/* The opened file: a card that opens the preview again (ui/lightbox.js shows the file itself) */
button.a-filecard { width: 100%; border: 0; font: inherit; color: inherit; cursor: pointer; transition: translate .15s ease; }
button.a-filecard:hover { translate: 0 -1px; }
button.a-filecard:active { translate: 0 0.5px; }
@media (prefers-reduced-motion: reduce) { button.a-filecard { transition: none; } }
.a-split { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .a-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .a-view:has(.a-split) { max-width: 1040px; } }
.a-split-h { font: var(--t-ui); }
.a-chain-saw { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border-radius: var(--r-input); background: var(--bg-sunken); }
.a-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); }
.a-kv dt { font: var(--t-small); color: var(--fg-2); }
.a-kv dd { font: var(--t-small); overflow-wrap: anywhere; }
.a-kv dd svg { display: inline-block; vertical-align: -4px; }
.a-kv-note { display: block; color: var(--fg-2); }
.a-intact { display: flex; gap: var(--s-2); align-items: center; font: var(--t-small); color: var(--fg-2); }
.a-pw-form { display: grid; gap: var(--s-3); max-width: 420px; }
.a-pw-form .a-btn { justify-self: start; }
.a-view .a-pw-form .a-btn { justify-self: center; }

/* --- /d/<id>: the open bag, one compact column (the head in a row, the two buttons, whose drive, the fine print) -- */
.a-droppage { display: grid; gap: var(--s-4); width: 100%; max-width: 720px; justify-self: center; }
.a-droppage .md-root { margin-inline: 0; }
.a-droppage > .a-scene--row .a-figure { align-self: start; margin-top: 2px; }   /* beside the title, however long the sentence */
.a-droppage .a-dd-leave { gap: var(--s-2); }
.a-droppage .md-zone { padding: var(--s-5) var(--s-4); }
.a-dd-limits { padding-inline: var(--s-1); }
/* Whose drive is this? Its drive ID: the 12 emoji in Settings' 6 × 2 grid, under the same name. */
.a-dd-id { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-4); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow); }
.a-dd-id-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-4); }
.a-dd-id-h { font: var(--t-ui); font-weight: 600; }
.a-dd-id-top > .a-more { font: var(--t-small); }
.a-dd-id-body { display: grid; gap: var(--s-3); align-items: center; }
.a-dd-id-code { display: grid; gap: var(--s-1); min-width: 0; }
.a-dd-id-label { font: var(--t-small); font-weight: 600; color: var(--fg-2); }
.a-page .a-dd-id .a-safety { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 20rem; font-size: 20px; line-height: 1.2; }
.a-dd-id .a-safety > span { padding: 6px 0; border-radius: var(--r-input); background: color-mix(in srgb, var(--fg) 6%, transparent); }   /* a tile in both themes */
.a-dd-id-say { display: grid; gap: var(--s-1); min-width: 0; }
@media (min-width: 640px) { .a-dd-id-body { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: var(--s-5); } }
/* ux-feedback-1: the run (ui/progress.js's steps) and the done moment, each on one card in the column */
.a-dd-run { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow); }
.a-dd-run > .a-linkbtn { justify-self: start; min-height: 32px; }
.a-dd-run > .md-chip, .a-dd-run > .md-exif-slot > .md-chip { justify-self: start; }
.a-dd-run > .md-exif-slot:empty { display: none; }
.a-dd-run > .a-banner { margin: 0; }
.a-droppage > .done { padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow); }
.a-droppage > .done .md-chip { margin-top: var(--s-1); padding: 0; background: none; color: var(--fg-2); text-align: left; }
/* the photo's chip: the words wrap beside the tick on a phone, Keep the photo as it was goes under them */
:is(.a-dd-run, .done) .md-chip { border-radius: var(--r-input); }
:is(.a-dd-run, .done) .md-chip > span { flex: 1 1 14ch; min-width: 0; }
.a-droppage > .done .a-dd-foot { justify-self: stretch; margin-top: var(--s-3); text-align: left; }
.a-dd-foot { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--hair); }
.a-dd-foot > .a-caption { max-width: none; }
.a-droppage > .a-btn, .a-droppage > .a-more { justify-self: center; }

/* --- /inbox, /send, /watch, /upgrade, /verify: the ghost's head over one centred column --------- */
.a-inbox, .a-watch, .a-upgrade, .a-verify, .a-tx-view, .a-send-page { display: grid; gap: var(--s-5); width: 100%; max-width: 760px; justify-self: center; }
.a-upgrade { max-width: 960px; }
.a-inbox > :empty { display: none; }   /* the problems slot takes no row while there is none */
.a-scanline { font: var(--t-code); color: var(--fg-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-input); background: var(--bg-sunken); }
.a-items { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.a-item { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow); }
.a-item--this { outline: 2px solid var(--tari-text); outline-offset: 2px; }
.a-item-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.a-item-what { display: inline-flex; align-items: center; gap: var(--s-2); flex: 1 1 18ch; font: var(--t-ui); overflow-wrap: anywhere; }
.a-item-view:empty { display: none; }
.a-item-view { padding-top: var(--s-4); border-top: 1px solid var(--hair); }
.a-memo { font: var(--t-small); overflow-wrap: anywhere; }
.a-form { display: grid; gap: var(--s-3); max-width: 640px; }
.a-form .a-btn { justify-self: start; }
.a-summary { display: grid; gap: var(--s-1); font: var(--t-h3); }
.a-summary strong { font-weight: 750; }
.a-table { width: 100%; font: var(--t-small); font-variant-numeric: tabular-nums; }
.a-table th, .a-table td { text-align: left; padding: var(--s-2) var(--s-3) var(--s-2) 0; vertical-align: top; }
.a-table thead th { font-weight: 650; color: var(--fg-2); border-bottom: 1px solid var(--hair); }
.a-peek-link { display: contents; }
.a-limit { justify-self: center; max-width: 52ch; color: var(--fg-2); }
.a-receipt--left { justify-items: start; text-align: left; width: 100%; }

/* --- /upgrade ----------------------------------------------------------------------------------- */
.a-plans { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .a-plans { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.a-plan { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow); }
.a-plan:first-child { background: var(--bg-sunken); box-shadow: none; }
.a-plan .a-btn { justify-self: start; }
.a-plan .a-card-h { font: var(--t-h3); min-height: 2.6em; }   /* a title that wraps doesn't push its price below the others' */
.a-plan-price { font: var(--t-h3); font-variant-numeric: tabular-nums; }
.a-pay-text { color: var(--pay-text); }
.a-invoice { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow); max-width: 640px; }
.a-invoice-status { font: var(--t-ui); }
.a-paysteps { gap: var(--s-2); }
/* A completed step shows the check in ink; green only where the chain itself confirmed something (11-brand P-21). */
.a-paysteps .a-step--done::before { display: none; }
.a-paysteps .a-step--done svg { width: 18px; height: 18px; border-radius: 50%; outline: 1px solid var(--line); }
.a-paysteps .a-step--chain svg { background: var(--ok); color: var(--on-ok); }

/* --- /verify/tx: what the chain sees ------------------------------------------------------------ */
.a-outputs, .a-inputs { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.a-output { padding: var(--s-4); border-radius: var(--r-input); background: var(--bg-sunken); }
.a-inputs li { font: var(--t-code); overflow-wrap: anywhere; }
.a-raw pre { max-height: 50svh; overflow: auto; padding: var(--s-3); border-radius: var(--r-input); background: var(--bg-sunken); font: var(--t-code); white-space: pre-wrap; overflow-wrap: anywhere; }
.a-direct { display: grid; gap: var(--s-2); }
/* /verify/tx (ux-feedback-1): the summary first; the chain's whole record and the direct check fold under it */
.a-tx-view > .done { padding-top: var(--s-2); }
.a-tx-facts { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .a-tx-facts { grid-template-columns: 1fr 1fr; } }
.a-tx-fact { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4) var(--s-5); border-radius: var(--r-panel); background: var(--bg-raised); box-shadow: var(--shadow); }
.a-tx-fact-h { display: flex; align-items: center; gap: var(--s-2); font: var(--t-ui); color: var(--fg); }
.a-tx-fact > p { text-wrap: pretty; }
.a-tx-fact > p:not(.a-caption) { font: var(--t-small); }
.a-fold { border-top: 1px solid var(--hair); }
.a-fold > summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font: var(--t-ui); cursor: pointer; list-style: none; }
.a-fold > summary::-webkit-details-marker { display: none; }
.a-fold > summary svg { transition: transform var(--dur-2) var(--ease-out); }
.a-fold[open] > summary svg { transform: rotate(90deg); }
.a-fold > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-input); }
.a-fold-body { display: grid; gap: var(--s-4); padding-bottom: var(--s-5); min-width: 0; }

/* --- the bottom bar of phones (spec §12.2) ------------------------------------------------------ */
.a-bottom { display: none; }
@media (max-width: 640px) {
  .a-bottom {
    position: sticky; bottom: 0; z-index: var(--z-header); display: grid; grid-template-columns: repeat(3, 1fr);
    padding-bottom: env(safe-area-inset-bottom); background: var(--bg-raised); box-shadow: 0 -1px 0 var(--hair);
  }
  .a-bottom a {
    display: grid; justify-items: center; gap: 2px; min-height: 56px; padding: var(--s-2) 0;
    font: var(--t-small); color: var(--fg-2); text-decoration: none;
  }
  .a-bottom a[aria-current="page"] { color: var(--fg); font-weight: 600; }
  .a-bottom-icon { width: 24px; height: 24px; }
  .a-main { padding-top: var(--s-6); }
}

/* the locker's codes to scan (its address, its drop link): bigger than the card's, for longer text */
.a-page .md-qr { justify-items: start; text-align: left; margin-top: var(--s-3); }
.a-page .md-qr svg { width: 240px; height: 240px; }