/* Read-only archive groups share the ledger's glass surface and column layout. */
#archiveView .archive-table-wrap { container-type: inline-size; }
.archive-table .archive-batch-group > td { padding: 0 16px; border-radius: 18px; }
.archive-batch-summary { display: flex; align-items: center; gap: 22px; min-height: 86px; }
.archive-batch-toggle { display: grid; grid-template-columns: 20px auto minmax(260px, 1.35fr) minmax(190px, .8fr) minmax(148px, .65fr) auto; align-items: center; gap: 18px; flex: 1; min-width: 0; min-height: 86px; padding: 12px 0; border: 0; background: transparent; color: var(--blue-900); text-align: left; cursor: pointer; }
/* Long batch controls keep their geometry; feedback belongs to the full row. */
.archive-batch-toggle:is(:active, .pressing, :focus-visible) { transform: none !important; box-shadow: none !important; outline: none; }
.archive-table .archive-batch-group:has(.archive-batch-toggle:is(:active, .pressing)) > td { background: var(--surface-tint); box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 2px 6px var(--accent-shadow); }
.archive-table .archive-batch-group:has(.archive-batch-toggle:focus-visible) > td { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.archive-batch-chevron { width: 18px; height: 18px; color: var(--blue-700); transition: transform 200ms ease; }
.archive-batch-toggle[aria-expanded='true'] .archive-batch-chevron { transform: rotate(90deg); }
.archive-batch-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--glass-edge); border-radius: 9px; background: var(--ice); color: var(--blue-700); font-size: 12px; font-weight: 750; white-space: nowrap; }
.archive-batch-identity, .archive-batch-time, .archive-batch-state { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.archive-batch-label { color: var(--blue-600); font-size: 11px; font-weight: 500; }
.archive-batch-identity strong { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.archive-batch-time time { font-size: 13px; font-variant-numeric: tabular-nums; }
.archive-batch-status { display: inline-block; padding: 4px 9px; border: 1px solid #b1dcc6; border-radius: 8px; background: #e4f4ea; color: #206b48; font-size: 11px; font-weight: 650; white-space: nowrap; }
.archive-batch-status.is-pending { border-color: #efd0a2; background: #fff1df; color: #925416; }
.archive-batch-count { color: var(--blue-800); font-size: 12px; font-weight: 700; white-space: nowrap; }
.archive-batch-count > span { display: block; margin-top: 6px; color: var(--blue-600); font-size: 11px; font-weight: 500; }
.archive-table .archive-batch-group.is-open > td { border-bottom-color: var(--blue-300); }
.archive-table .archive-batch-order > td:first-child { box-shadow: inset 3px 0 0 var(--blue-300); }
.archive-table .archive-batch-order .record-deletion-pending { opacity: .65; }
.archive-note-toggle:focus-visible, .archive-note-content button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: 10px; }
.record-table .archive-note-toggle { display: flex; align-items: center; gap: 3px; width: 100%; max-width: 100%; min-height: 38px; padding: 5px 4px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--blue-800); font: inherit; font-size: 12px; font-weight: 650; text-align: left; cursor: pointer; }
.archive-note-toggle > span { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-note-toggle > svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--blue-600); transition: transform 200ms ease; }
.archive-note-toggle[aria-expanded='true'] > svg { transform: rotate(180deg); }
.record-table .archive-note-toggle:hover, .record-table .archive-note-toggle[aria-expanded='true'] { background: var(--ice-strong); border-color: var(--glass-edge); }
.record-table .archive-note-detail > td { padding: 0 18px 14px; height: auto; text-align: left; }
.archive-note-content { display: flex; align-items: flex-start; gap: 18px; padding: 16px 20px; border: 1px solid var(--glass-edge); border-radius: 14px; background: var(--ice); }
.archive-note-label { flex-shrink: 0; color: var(--blue-600); font-size: 12px; line-height: 1.8; }
.archive-note-content > p { flex: 1; min-width: 0; margin: 0; color: var(--blue-900); font-size: 13px; font-weight: 500; line-height: 1.8; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.archive-note-content > button { flex-shrink: 0; padding: 4px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--blue-700); font-size: 12px; cursor: pointer; }
@container (max-width: 950px) {
  .archive-batch-summary { position: sticky; left: 16px; width: calc(100cqi - 32px); min-height: 0; flex-wrap: wrap; justify-content: flex-end; gap: 0; padding: 8px 0 12px; }
  .archive-batch-toggle { flex: 0 0 100%; grid-template-columns: 18px auto minmax(0, 1fr); min-height: 0; gap: 11px 10px; padding: 5px 0 10px; }
  .archive-batch-chevron { grid-column: 1; grid-row: 1; }
  .archive-batch-badge { grid-column: 2; grid-row: 1; padding: 0 8px; }
  .archive-batch-count { grid-column: 3; grid-row: 1; justify-self: end; }
  .archive-batch-count > span { display: inline; margin-left: 4px; }
  .archive-batch-identity { grid-column: 1 / -1; grid-row: 2; }
  .archive-batch-time { grid-column: 1 / -1; grid-row: 3; }
  .archive-batch-state { grid-column: 1 / -1; grid-row: 4; flex-direction: row; align-items: center; }
  .archive-batch-identity, .archive-batch-time { gap: 4px; }
  .archive-batch-summary > .archive-batch-details { min-height: 34px; }
  .archive-note-content { position: sticky; left: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: calc(100cqi - 36px); padding: 12px; }
  .archive-note-content > p { grid-column: 1 / -1; grid-row: 2; }
  .archive-note-content > button { grid-column: 2; grid-row: 1; }
}
@media (max-width: 700px) {
  html:has(#archiveView.active) { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  #archiveView .archive-table-wrap { scroll-padding-block: 64px 100px; }
  #archiveView .archive-table button { scroll-margin-block: 64px 100px; }
}
@media (prefers-reduced-motion: reduce) { .archive-batch-chevron, .archive-note-toggle > svg { transition: none; } }