/* A card's own signed statements (30 October 2026; docs/ux/statements.md): the alerts on its accounts and the
   Statements section on the card (u.html, o.html), and the statements page (statements.html: /u/<n>/statements, /o/<n>/statements,
   /statements/<id>). The page is the verify page's screen (verify.css): the lead holds the stamp, then the ledger line of one
   statement or the register of all of them; beside it the card. Tokens only (tokens.css); no new colour. */

/* ---------- on the card ---------- */
/* an alert in force: a notice in the warning tone, the owner's words with the entry and what this browser found */
.notice.said-alert { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.notice.said-alert svg { color: var(--warning); }
.notice.said-alert a.inline { color: inherit; }
.said-bad { color: var(--pill-negative-ink); }

/* the Statements section: a register of the latest three, title and excerpt, the stamp of each one's check, the date */
.said-list { display: grid; margin-top: var(--gap-in); }
.said-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); align-items: baseline; padding: var(--s3) 0; }
.said-row + .said-row { border-top: 1px solid var(--rule); }
.said-row .l1 { font-weight: 500; }
.said-row .said-title { color: var(--text); text-decoration: none; }
.said-row .said-title:hover { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.said-row .said-excerpt { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.said-row time { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.said-row .said-proof { margin-top: var(--s1); align-items: baseline; }
.said-row .said-proof .dot { transform: translateY(-1px); }
.said-row.struck s, .said-item.struck .said-h s { text-decoration-thickness: 1px; color: var(--muted); }
.said-proof a.inline { color: inherit; }

/* ---------- the statements page ---------- */
.crumb a svg { width: 12px; height: 12px; transform: rotate(180deg); }
.sgrid > #result { align-self: start; }
.sgrid > #cardBox { align-self: start; }

/* one statement: its title at the section's size, the text in full with its line breaks, the link, the ledger line under it */
.said-one { margin-top: var(--s5); max-width: 72ch; }
.said-h { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; overflow-wrap: anywhere; }
.said-text { margin-top: var(--s2); white-space: pre-line; overflow-wrap: anywhere; }
.said-link, .said-retract { margin-top: var(--s3); overflow-wrap: anywhere; }
.said-retract { color: var(--muted); }
.said-one + .chain { margin-top: var(--s5); }

/* the register: each statement a row of the lead, divided by 1px, the stamp of its check under it */
.said-items { display: grid; margin-top: var(--s5); }
.said-item { padding: var(--s4) 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); align-items: baseline; }
.said-item + .said-item { border-top: 1px solid var(--rule); }
.said-item .said-h a { color: var(--text); text-decoration: none; }
.said-item .said-h a:hover { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.said-item > time { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.said-item .said-body { grid-column: 1 / -1; min-width: 0; max-width: 72ch; }
.said-item .stamp { margin-top: var(--s2); align-items: baseline; }
.said-item .stamp > span:last-child, .said-row .stamp > span:last-child { min-width: 0; }
.said-item .stamp .dot { transform: translateY(-1px); }
.said-item .own-retract { grid-column: 1 / -1; margin-top: var(--s2); }
.said-item.struck .said-text { color: var(--muted); }
.more-row { margin-top: var(--s4); }

/* the card beside it */
#cardBox .share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s4); }
#cardEmpty { color: var(--muted); }
#dFeed a { overflow-wrap: anywhere; }
.about-p { max-width: 60ch; }
.about-p + .about-p { margin-top: var(--s3); color: var(--muted); }

/* the owner's form: the fields, what it costs to sign, then the one confirmation and the receipt */
#ownerPanel .field textarea { min-height: 144px; }
#ownerPanel .stakes { margin-top: var(--s4); background: var(--raised); color: var(--text); font-weight: 400; }
#ownerPanel .form-row { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
#ownerPanel .err { color: var(--pill-negative-ink); }
.owner-confirm { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--raised); max-width: 720px; }
.owner-confirm b { font-weight: 600; }
.owner-confirm span { color: var(--muted); }
.owner-confirm .actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s3); }
.owner-state { margin-top: var(--s3); max-width: 72ch; outline: none; }
.owner-state b { font-weight: 600; }
.owner-state.done b { color: var(--pill-positive-ink); }
.owner-state span { color: var(--muted); }
.own-retract-form { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.own-retract-form .field { margin-top: var(--s2); }
.own-retract-form .actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s3); }
#result, #ownerPanel, #cardBox { scroll-margin-top: 64px; }

/* the owner's way to a new statement, under the card's Statements section */
.said-new { margin-top: var(--s3); }

/* the owner's alerts on the card (said-owner.js): one block under the accounts, a form at a time */
.said-own { margin-top: var(--s4); }
.said-own .links-more { color: var(--muted); }
.said-own .links-more .text-btn { margin-left: var(--s2); }
.said-own .in-force { margin-top: var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.said-own form { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.said-own fieldset { border: 0; padding: 0; margin: 0; }
.said-own legend { font-weight: 500; padding: 0; }
.said-own .choice { display: flex; gap: var(--s2); align-items: baseline; margin-top: var(--s2); }
.said-own .conseq { margin-top: var(--s3); font-size: var(--fs-small); line-height: var(--lh-small); }
.said-own .actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s3); }
.said-own .err { color: var(--pill-negative-ink); margin-top: var(--s2); }

@media (max-width: 640px) {
  .said-row, .said-item { grid-template-columns: minmax(0, 1fr); }
  .said-row time, .said-item > time { grid-row: 1; margin-bottom: var(--s1); }
}