/* Audit: the timeline of signed receipts, the investigation beside it, the chain. On the frame's tokens; nothing below 12px;
   nothing moves unless data moved. */

/* ─── the space: the timeline needs the width; the chain and the counts take what a side column needs ─── */
.space[data-space="audit"]:has(.au-main) { grid-template-columns: minmax(0, 8.6fr) minmax(300px, 3fr); }
.space[data-space="audit"][data-lens="Timeline"] .pane[data-lens="Timeline"] { display: flex; }
@media (max-width: 1099px) {
  .space[data-space="audit"]:has(.au-main) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ─── the timeline pane: the who-rail and the list scroll on their own inside the pane ─── */
.pane.au-pane > .pane-b { display: flex; overflow: hidden; }
.au-body { flex: 1 1 auto; display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 0; min-width: 0; }
.au-rail { display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px; border-right: 1px solid var(--line); background: var(--panel-2); }
.au-rail .lab { padding: 10px 8px 4px; color: var(--quiet); }
.au-who { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "sub n"; align-items: center; gap: 0 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink-2); text-align: left; transition: background var(--t-ui) var(--ease); }
.au-who b { grid-area: name; font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.au-who small { grid-area: sub; font-size: 12px; color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.au-who .n { grid-area: n; font: 400 12px var(--mono); letter-spacing: 0; color: var(--quiet); }
.au-who:hover { background: var(--raised); }
.au-who[aria-pressed="true"] { background: var(--accent-soft); }
.au-who[aria-pressed="true"] b, .au-who[aria-pressed="true"] .n { color: var(--accent); }
.au-who[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 0 2px 2px 0; background: var(--accent-fill); }

/* ─── the list: the investigation filters, then the receipts with their day dividers ─── */
.au-list { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.au-filters { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.au-sel { position: relative; display: inline-flex; min-width: 0; }
.au-sel::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); color: var(--quiet); pointer-events: none; }
.au-filters select { height: 28px; max-width: 220px; padding: 0 26px 0 9px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--panel); color: var(--ink-2); font: 500 12px var(--sans); appearance: none; -webkit-appearance: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-filters select:hover { background: var(--raised); color: var(--ink); }
.au-filters select.on { border-color: var(--accent-edge); background: var(--accent-soft); color: var(--accent); }
.au-sel:has(select.on)::after { color: var(--accent); }
.au-filters .r { margin-left: auto; font-size: 12px; white-space: nowrap; }
.au-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }

.au-scroll .t tr[data-kind="day"] td { position: sticky; top: 34px; z-index: 1; height: 28px; padding: 0 11px; background: var(--panel-2); border-bottom: 1px solid var(--line); font: 500 12px var(--sans); color: var(--ink-2); letter-spacing: .01em; }
.au-scroll .t tr[data-kind="day"] td .n { margin-left: 10px; font: 400 12px var(--mono); letter-spacing: 0; color: var(--quiet); }
.au-scroll .t td.au-when { width: 56px; }
.au-scroll .t td.au-what { color: var(--ink-2); line-height: 1.4; }
.au-scroll .t td.au-what b { color: var(--ink); }
.au-actor { display: none; }
.au-scroll .tfoot .end .verb { height: 24px; padding: 0 8px; font-family: var(--sans); }
.au-scroll .t td.au-rc .hash { justify-content: flex-end; }
.au-scroll .t td.au-rc .sub { margin-left: 8px; }

/* a row lifts under the pointer; a toned row keeps its edge */
.au-scroll .t tbody tr[data-obj] { transition: background var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease); }
.au-scroll .t tbody tr[data-obj]:hover { background: var(--raised); box-shadow: inset 0 1px 0 var(--line-2), inset 0 -1px 0 var(--line-2); }
.au-scroll .t tbody tr[data-obj][data-tone="warn"]:hover { box-shadow: inset 2px 0 0 var(--warn), inset 0 1px 0 var(--line-2), inset 0 -1px 0 var(--line-2); }
.au-scroll .t tbody tr[data-obj][data-tone="stop"]:hover { box-shadow: inset 2px 0 0 var(--stop), inset 0 1px 0 var(--line-2), inset 0 -1px 0 var(--line-2); }
.au-scroll .t tbody tr[data-obj]:hover .hash { color: var(--ink); }

/* a receipt written since the last read arrives with a wash that fades; its edge stays until the next read */
.au-scroll .t tbody tr[data-arrived] { animation: wash 2.8s var(--ease) both; }
.au-scroll .t tbody tr[data-arrived] td:first-child { box-shadow: inset 2px 0 0 var(--accent-fill); }

/* ─── the chain: the state breathes only while it is verified and current ─── */
.chain[data-live] .head .st::before { animation: ring 2.6s ease-in-out infinite; }
.app[data-motion="paused"] .chain[data-live] .head .st::before { animation: none; }
.chain .head .l { min-width: 0; }
.chain .head .end .st { white-space: normal; text-align: right; }

/* ─── what changed: each family's count is a door onto the timeline filtered to it ─── */
.au-counts { display: grid; }
.au-counts > button { display: grid; grid-template-columns: 1fr auto; gap: 10px; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 12.5px; text-align: left; transition: background var(--t-ui) var(--ease); }
.au-counts > button:last-child { border-bottom: 0; }
.au-counts > button:hover { background: var(--raised); color: var(--ink); }
.au-counts > button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent-fill); }
.au-counts .n { font: 400 13px var(--mono); letter-spacing: 0; color: var(--ink); }
.au-counts [data-tone] .n { color: var(--tone); }
.au-counts [aria-pressed="true"] .n { color: var(--accent); }

/* ─── phone: the rail is a strip of chips; the event word folds into the sentence ─── */
@media (max-width: 899px) {
  .pane.au-pane > .pane-b { overflow: visible; }
  .au-body { grid-template-columns: minmax(0, 1fr); }
  .au-rail { flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .au-rail::-webkit-scrollbar { display: none; }
  .au-rail .lab { display: none; }
  .au-who { flex: none; width: auto; height: 32px; grid-template-columns: auto auto; grid-template-areas: "name n"; padding: 0 10px; border: 1px solid var(--line-2); background: var(--panel); }
  .au-who small { display: none; }
  .au-who b { max-width: 160px; }
  .au-who[aria-pressed="true"] { border-color: var(--accent-edge); }
  .au-who[aria-pressed="true"]::before { content: none; }
  .au-filters { flex-wrap: wrap; }
  .au-filters select { height: 32px; max-width: 170px; }
  .au-filters .r { flex: 1 0 100%; margin-left: 0; }
  .au-scroll { max-height: 60vh; }
  .au-ev, .au-who-col { display: none; }
  .au-actor { display: inline; font-weight: 500; }
  .au-scroll .t td.au-what { min-width: 0 !important; }
  .au-scroll .tfoot .end { margin-left: 0; flex: 1 0 100%; padding-left: 0; box-shadow: none; }
  .au-scroll .tfoot .end .verb { min-height: 32px; }
}