/* The staff panel (/staff): an app screen of the card pages' family (app.css for the shell, the panels, the tables and
   the chips; flow.css for the fields, the confirmations and the wait for the witnesses; design/DESIGN.md "Il sistema").
   The same no-sidebar shell and 1152px column; the header is the Veil organisation with the staff member's role, on the
   ground, then underline tabs; each tab one 6-column grid (6 x 178.67 + 5 x 16 = 1152). The screen's question, "what
   needs the staff now?", is answered first by the lead: the strip of counts with the open reports first and largest.
   The accent stays on verified data (none here: this screen shows decisions, not proofs); the danger tone marks what is
   in force against a card (alert chips) and the confirmations of what cannot be undone. */

.staff-tabs { overflow-x: auto; scrollbar-width: none; }
.staff-tabs::-webkit-scrollbar { display: none; }
.staff-tabs .tab { flex: none; }
.tab-view { margin-top: var(--s4); }
.tab-view:focus { outline: none; }

/* ---------- the overview ---------- */
/* the lead: the stamp of the staff (28 October 2026). The open reports are the screen's one strong number, at the stamp's
   size, in the lead's ground and twice as wide; the other four counts sit beside it a step down, split by 1px rules. */
.kpis, .panel.lead.kpis { padding: 0; }
.kpi-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); margin: 0; }
.kpi { padding: var(--pad-lead) var(--pad-x) var(--s4); min-width: 0; align-self: stretch; }
.kpi + .kpi { border-left: 1px solid var(--rule); }
.kpi dt { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.kpi dd { margin: var(--s1) 0 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi.lead { padding-top: var(--pad-lead); padding-bottom: var(--pad-lead); }
.kpi.lead dt { color: var(--text); font-weight: 600; }
.kpi.lead dd { font-size: var(--fs-stamp); line-height: var(--lh-stamp); font-weight: 600; letter-spacing: -0.025em; }
.kpi dd a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--control); }
.kpi dd.kpi-s, .kpi.lead dd.kpi-s { margin: 2px 0 0; color: var(--faint); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400; letter-spacing: normal; }
.ov-grid { margin-top: var(--gap); }

/* rows of a list: a line, a grey line under it, a figure or a link on the right */
.rows { display: grid; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s4); padding: var(--s3) 0; }
.row + .row { border-top: 1px solid var(--rule); }
.row .l1 { font-weight: 500; overflow-wrap: anywhere; }
.row .l1 .pill { margin-left: var(--s1); vertical-align: 1px; }
.row .l2 { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.row .r { color: var(--muted); font-size: var(--fs-small); text-align: right; white-space: nowrap; }
.row:has(.mini-av) { grid-template-columns: 28px minmax(0, 1fr) auto; }
.row .l3 { margin-top: var(--s1); color: var(--text); font-size: var(--fs-small); }
.clamp1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--active); color: var(--text); font-size: 11px; font-weight: 600; } /* taste-skill-ignore: initials in a 28px face */
/* a staff member's profile picture, when the card has one: round, filling the face */
.mini-av { overflow: hidden; }
.mini-av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.row .role { justify-content: flex-end; color: var(--text); }
.panel > header .text-btn { font-size: var(--fs-body); line-height: var(--lh-body); }
.rows:empty + .empty, .rows > .empty { padding: var(--s3) 0; }

/* what your role signs: the matrix row, the rest with the roles that can */
.can-list { display: grid; gap: var(--s2); }
.can-list { gap: 0; }
.can-list li { display: block; padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.can-list li.off { margin-top: var(--s2); padding-top: var(--s3); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.can-list svg { display: none; }
.needs { display: block; color: var(--faint); font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---------- find a card ---------- */
.find-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--s3); }
.find-row .field { flex: 1 1 320px; margin-top: 0; }
.flow .find-row input[type="text"] { max-width: none; }
#findHint { margin-top: var(--s3); }
.find-quick h3 { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); font-size: var(--fs-body); font-weight: 600; }
.find-quick .rows { margin-top: var(--s1); }
#findErr { margin-top: var(--s2); }
/* what the staff see on a card, beside the search: a quiet list */
.what-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.what-list li { display: block; }
.what-list .t { font-weight: 500; }
.what-list .s { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }

/* the card's staff view */
.back-line { margin-bottom: var(--s3); }
.back-line .text-btn { font-size: var(--fs-small); line-height: var(--lh-small); }
.cv-head .name-line h2 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.cv-head .badges { height: 26px; }
.cv-head .badges img { width: 20px; height: 20px; }
.cv-head .actions { gap: var(--s5); }
.cv-states { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.cv-head .sum-line { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.cv-line { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--panel); color: var(--text); max-width: 80ch; }
.cv-grid { margin-top: var(--s5); }
.act-buttons { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.act-buttons .btn:not(.final)[aria-expanded="true"] { background: var(--raised); border-color: var(--text); }
/* what ends the card (pass 3, 29 October 2026): its own block under the ordinary actions, set off by a rule and 24px, with
   its name and what happens in the danger ink; its buttons keep the outline, in the danger ink, so they read apart from the
   ones a later statement can lift. The filled danger stays inside the form that signs it */
.act-final { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.act-final-k { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; color: var(--pill-negative-ink); }
.act-final-s { margin: var(--s1) 0 var(--s3); max-width: 72ch; color: var(--text); }
.btn.final { border-color: var(--negative-border); color: var(--pill-negative-ink); }
.btn.final:hover, .btn.final[aria-expanded="true"] { background: var(--pill-negative-bg); border-color: var(--negative); }
.act-form.final > .muted { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--pill-negative-ink); }
/* the overview's search: one field and its button on a row */
.ov-find { display: flex; gap: var(--s2); }
.ov-find input { flex: 1 1 auto; min-width: 0; height: var(--control-height); padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--radius-nested); background: var(--field); color: var(--text); font: inherit; }
.ov-find .btn { flex: none; }
.not-role { margin-top: var(--s3); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.act-form { margin-top: var(--s4); }
.act-form .field + .field, .act-form fieldset + .field, .act-form .field + fieldset { margin-top: var(--s4); }
.act-form .muted { margin: 2px 0 var(--s3); font-size: var(--fs-small); line-height: var(--lh-small); }
/* the button that signs a removal: the danger tone, inside the form that confirms it */
.btn.primary.danger-fill { background: var(--pill-negative-bg); border-color: var(--negative-border); color: var(--pill-negative-ink); }
.btn.primary.danger-fill:hover { background: var(--pill-negative-bg); border-color: var(--negative); }
.choice.dur { margin-top: 0; }
.opt.off { color: var(--faint); cursor: default; }
.opt .needs { display: inline; margin-left: var(--s2); }
.until-row { margin: 2px 0 var(--s1) 28px; }
#durNote { margin-top: var(--s2); }
.act-form .confirm { margin-top: var(--s4); max-width: none; }
.act-form .confirm .field { margin-top: var(--s3); }
#actMsg .verdict { margin-top: var(--s3); }

/* fields of this screen: selects, dates, text areas, the same 36px controls as the flows */
.flow select, .flow input[type="date"], .flow input[type="datetime-local"], .audit-filters select, .audit-filters input,
.report-filters select, .staff-table select, .invite-row select, .invite-row input {
  height: var(--control-height); padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--radius-nested); background: var(--field); color: var(--text); font: inherit; max-width: 100%;
}
.flow textarea, .note-form textarea, .note-edit textarea { min-height: 72px; }
.flow select:focus-visible, .audit-filters select:focus-visible, .audit-filters input:focus-visible, .report-filters select:focus-visible { outline-offset: 0; }

/* a card's moderation history: one statement a row, with its private reason */
.hist { display: grid; }
/* what the public sees of it: the card's own lines in the danger tone, with their entries */
.pub-sees { margin-bottom: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.pub-k { font-size: var(--fs-small); line-height: var(--lh-small); }
.pub-sees ul { display: grid; gap: var(--s1); margin: var(--s2) 0 0; padding: 0; list-style: none; }
.pub-sees li { display: flex; justify-content: space-between; gap: var(--s3); font-weight: 500; }
.pub-sees .r { flex: none; font-weight: 400; font-size: var(--fs-small); }
.pub-sees a.inline { text-decoration-color: var(--pill-negative-ink); }
.hist-row { padding: var(--s3) 0; }
.hist-row + .hist-row { border-top: 1px solid var(--rule); }
.hist-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.hist-top .l1 { font-weight: 500; }
.hist-top .pill { margin-left: var(--s1); vertical-align: 1px; }
.hist-top .r { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.hist-row .l2 { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.reason { margin-top: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--raised); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 80ch; }
.evidence { display: grid; gap: 2px; margin-top: var(--s2); font-size: var(--fs-small); }
.evidence a { overflow-wrap: anywhere; }

/* notes */
.note-form { display: grid; gap: var(--s2); margin-bottom: var(--s2); }
.note-form .actions-row { margin-top: 0; }
.notes { display: grid; }
.note-row { padding: var(--s3) 0; }
.note-row + .note-row, .note-form + .notes .note-row:first-child { border-top: 1px solid var(--rule); }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-row .l2 { margin-top: var(--s1); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.note-acts { display: flex; gap: var(--s4); margin-top: var(--s1); }
.note-acts .text-btn { font-size: var(--fs-body); line-height: var(--lh-body); }
.note-row .confirm { margin-top: var(--s2); max-width: none; }
.note-edit { display: grid; gap: var(--s2); }
.note-edit .actions-row { margin-top: 0; }
textarea { font: inherit; }

/* the card's summary */
.sum-line { color: var(--text); }
.sum-k { margin-top: var(--s3); color: var(--muted); font-size: var(--fs-small); }
.sum-list { display: grid; gap: var(--s1); margin-top: var(--s2); }
.sum-list li span { color: var(--muted); }

/* ---------- reports ---------- */
/* the count cards are the filter (the list pattern of the style): the selected one takes a 1px text-coloured edge */
.report-filters { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s4); }
/* the reports' one filter line (pass 3): the three states as words with their counts, the chosen one in ink on a 2px rule, and
   the category beside them; no boxes */
.count-cards { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.count-card { display: inline-flex; align-items: baseline; gap: var(--s2); min-height: 36px; padding: 0 0 2px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer; font: inherit; font-weight: 500; transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
.count-card:hover { color: var(--text); }
.count-card.on { color: var(--text); border-bottom-color: var(--text); }
.cc-k { font-size: var(--fs-body); }
.cc-v { font-size: var(--fs-body); font-variant-numeric: tabular-nums; color: inherit; }
/* the reports as a ruled table: the card it is about, what it says, when it came; the actions and their form under the row */
.rep-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 96px; column-gap: var(--s5); margin-top: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.rep-cols .r { text-align: right; }
.rep-cols:has(+ .report-list:empty), .rep-cols:has(+ .report-list > .empty-line:only-child) { display: none; }
.report-list:not(.compact) .report-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 96px; column-gap: var(--s5); align-items: baseline; border-top: 0; border-bottom: 1px solid var(--rule); }
.report-list:not(.compact) .report-row > .rep-acts, .report-list:not(.compact) .report-row > .rep-form { grid-column: 2 / -1; }
.report-list:not(.compact) .rep-text { margin-top: 0; }
.rep-when { color: var(--muted); font-size: var(--fs-small); text-align: right; white-space: nowrap; }
.report-list.compact .rep-when { display: block; text-align: left; margin-top: var(--s1); }
.inline-field { margin-top: 0; min-width: 220px; }
.report-filters { align-items: center; }
.report-filters .inline-field { display: flex; align-items: center; gap: var(--s3); }
.report-filters .inline-field label { color: var(--muted); font-weight: 400; white-space: nowrap; }
.inline-field label { font-weight: 500; }
.report-list { display: grid; }
.report-row { padding: var(--s4) 0; }
.report-row + .report-row { border-top: 1px solid var(--rule); }
.rep-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.rep-top .l1 { font-weight: 500; overflow-wrap: anywhere; }
.rep-top .pill { margin-left: var(--s1); vertical-align: 1px; }
.rep-top .r { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.report-row .l2 { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.rep-text { margin-top: var(--s2); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 90ch; }
.rep-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.rep-acts .btn { height: 28px; padding: 0 var(--s3); font-size: var(--fs-small); }
.rep-acts .text-btn { font-size: var(--fs-body); line-height: var(--lh-body); }
.rep-form { margin-top: var(--s3); }
.rep-form .field + .field { margin-top: var(--s3); }
.report-list.compact .report-row { padding: var(--s3) 0; }
.report-list.compact .rep-text { margin-top: var(--s1); font-size: var(--fs-small); }

/* ---------- the audit log ---------- */
.audit-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: var(--s3); align-items: end; margin: var(--s2) 0 var(--s4); }
.audit-filters .field { margin-top: 0; gap: var(--s2); }
.audit-filters label { font-weight: 500; font-size: var(--fs-small); }
.audit-filters select, .audit-filters input { width: 100%; }
.filter-go { display: flex; align-items: center; gap: var(--s3); height: var(--control-height); }
.filters-btn { display: none; height: 28px; padding: 0 var(--s3); font-size: var(--fs-small); }
.audit-table td { vertical-align: top; }
/* the audit as a roll (pass 3): who signed, what they did to which card, when; the entry and the reason at the end */
.audit-table .c-when { white-space: nowrap; color: var(--muted); font-size: var(--fs-small); text-align: right; }
.audit-table .who { display: flex; align-items: center; gap: var(--s3); }
.audit-table .who .kname, .audit-table .who .ksub { display: block; }
.audit-table .c-by .ksub { color: var(--muted); font-size: var(--fs-small); }
.audit-table .c-entry { white-space: nowrap; font-size: var(--fs-small); color: var(--muted); }
.audit-table .c-more { width: 1%; white-space: nowrap; }
.audit-table .c-more .text-btn { font-size: var(--fs-body); line-height: var(--lh-body); }
.audit-table tr.open td { border-bottom: 0; }
.audit-detail td { padding-top: 0; }
.facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--raised); font-size: var(--fs-small); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.facts .reason { margin-top: 0; padding: 0; background: none; font-size: var(--fs-body); }
.stmt { display: block; font-size: var(--fs-small); line-height: 18px; color: var(--muted); white-space: pre-wrap; word-break: break-all; } /* taste-skill-ignore: a signed statement is code */

/* ---------- the staff ---------- */
/* the members (a panel) beside the invitation (or, for the other roles, who changes the staff: a quiet list), then the matrix */
.staff-table td.c-act { width: 1%; white-space: nowrap; }
.staff-table td.c-act .text-btn { font-size: var(--fs-body); line-height: var(--lh-body); }
.role-change { display: inline-flex; align-items: center; gap: var(--s3); }
.staff-table select { height: 28px; padding: 0 var(--s2); }
.staff-table tr.confirm-row td { padding-top: 0; }
.staff-table .confirm { max-width: none; }
#invitePanel .muted { margin: 0 0 var(--s4); font-size: var(--fs-small); line-height: var(--lh-small); }
.invite-form .field + .field { margin-top: var(--s4); }
.flow .invite-form input[type="text"], .invite-form select { width: 100%; max-width: none; }
.invite-form .actions-row { margin-top: var(--s4); }
#staffYou { margin-top: 0; }
#staffState { max-width: none; }
.roles-table td { font-size: var(--fs-body); line-height: var(--lh-body); }
.roles-table th.r, .roles-table td.r { width: 12%; }
.roles-table th.mine { color: var(--text); }
.roles-table tr.off td:first-child { color: var(--muted); }
.roles-table .yes { width: 14px; height: 14px; margin-left: auto; color: var(--text); }
.roles-table .no { color: var(--faint); }
.act-form select { width: 100%; max-width: 480px; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1100px) {
  .audit-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-go { grid-column: 1 / -1; height: auto; }
}
@media (max-width: 960px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi + .kpi { border-left: 0; }
  .kpi { border-top: 1px solid var(--rule); }
  .kpi:nth-child(-n+2) { border-top: 0; }
  .kpi:nth-child(even) { border-left: 1px solid var(--rule); }
  .kpi.lead { grid-column: 1 / -1; }
  .kpi.lead + .kpi { border-left: 0; border-top: 1px solid var(--rule); }
  .kpi.lead ~ .kpi:nth-child(odd) { border-left: 1px solid var(--rule); }
  .kpi.lead ~ .kpi:nth-child(even) { border-left: 0; }
}
@media (max-width: 760px) {
  .rep-cols { display: none; }
  .report-list:not(.compact) .report-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s2); }
  .report-list:not(.compact) .rep-who { grid-column: 1; grid-row: 1; }
  .report-list:not(.compact) .rep-when { grid-column: 2; grid-row: 1; }
  .report-list:not(.compact) .rep-body, .report-list:not(.compact) .report-row > .rep-acts, .report-list:not(.compact) .report-row > .rep-form { grid-column: 1 / -1; }
  .inline-field { flex: 1 1 100%; }
  .inline-field select { width: 100%; }
  .audit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); display: none; }
  .audit-filters.open { display: grid; }
  .filters-btn { display: inline-flex; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dd + dt { margin-top: var(--s2); }
  /* the audit table becomes two-line rows: the action and its card, then who and when */
  .audit-table thead { display: none; }
  .audit-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule); }
  .audit-table tbody tr:last-child { border-bottom: 0; }
  .audit-table td { padding: 0; border-bottom: 0; }
  .audit-table .c-by { grid-column: 1; grid-row: 1; }
  .audit-table .c-entry { grid-column: 2; grid-row: 1; }
  .audit-table .c-act { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s2); }
  .audit-table .c-when { grid-column: 1; grid-row: 3; margin-top: var(--s1); font-size: var(--fs-small); text-align: left; }
  .audit-table .c-more { grid-column: 2 !important; grid-row: 3 !important; align-self: baseline !important; }
  .audit-table .c-more { grid-column: 2; grid-row: 2 / span 3; align-self: end; width: auto; }
  .audit-table tr.audit-detail { display: block; padding: 0 var(--s2) var(--s3); }
  .audit-table tr.audit-detail td { display: block; }
  .audit-table tr.open { border-bottom: 0; }
  .staff-table td.c-act { grid-column: 1 / -1; margin-top: var(--s2); text-align: left; width: auto; }
  .staff-table td.c-act:empty { display: none; }
  .role-change { flex-wrap: wrap; }
  .staff-table tr.confirm-row { display: block; padding: 0 var(--s2) var(--s3); }
  .staff-table tr.confirm-row td { display: block; }
  .roles-table th.r, .roles-table td.r { width: auto; padding-left: var(--s1); padding-right: var(--s1); }
  .act-buttons .btn { flex: 1 1 auto; }
  .until-row { margin-left: 0; }
  .cv-head .actions { justify-content: flex-start; }
  .kpi { padding: var(--s3) var(--pad-x); }
}

/* an organisation's mark in the card's summary (since 24 October 2026): its logo or its initials, a 20px rounded square */
.sum-org { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: var(--s2); vertical-align: -5px; border-radius: var(--radius-small); overflow: hidden; background: var(--active); color: var(--text); font-size: 11px; font-weight: 600; } /* taste-skill-ignore: initials in a 20px mark */
.sum-org img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* the header's two ways out (the API keys, the Veil organisation): links side by side, with air between them */
#panel .object .actions { gap: var(--s5); align-items: center; flex-wrap: wrap; }

/* ---------- UX pass, 29 October 2026 ---------- */
/* a row's two ways out: the card's page and the log, as the header's links, small, under the row's words */
.row-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s2); }
.row-links .card-link { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.row-links .card-link:hover { color: var(--text); }
/* the keyboard in the tables: one row in the tab order, its focus the text colour on the active ground (never the accent) */
[data-row]:focus { outline: none; }
[data-row]:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; border-radius: var(--radius-small); background: var(--panel); }
/* the filter line of a long list stays under the bar, on the ground, with a rule once rows pass under it */
.sticky-line { position: sticky; top: calc(49px + env(safe-area-inset-top, 0px)); z-index: 3; background: var(--ground); border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease-out); }
.sticky-line.stuck { border-bottom-color: var(--rule); }
.report-filters.sticky-line { padding-block: var(--s2); margin-bottom: var(--s2); }
#auditForm.sticky-line { padding-block: var(--s2) var(--s3); margin-bottom: var(--s2); }
#v-audit .panel > header.sticky-line { position: static; }
/* the receipt of a signed action: when, and its entry in the public log */
.receipt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); margin-top: var(--s1); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.verdict .receipt { display: flex; }
.receipt-line { margin-top: var(--s2); }
.receipt .card-link { font-size: var(--fs-small); }
#repReceipt .verdict { margin-bottom: var(--s3); }
.cv-grid section[tabindex="-1"]:focus { outline: none; }
.cv-grid section[aria-labelledby] { scroll-margin-top: 64px; }
@media (max-width: 760px) {
  /* on a phone the audit's filters fold behind one button, so its header line is the one that stays */
  #v-audit .panel > header.sticky-line { position: sticky; padding-block: var(--s2); }
  #auditForm.sticky-line { position: static; }
}
.verdict .receipt .card-link, .verdict .receipt .card-link span { color: var(--text); }

/* Tablet (from the tablet-and-motion pass, 30 October 2026): "You are <role>" in two columns where the rail is the page's
   width (761-960 px; at 961-1100 it is still the narrow rail beside the overview, where two columns would not fit), so the
   list does not run one long column */
@media (min-width: 761px) and (max-width: 960px) { #youCan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); } }