/* Past changes page: view toggle, filters, list (table), card extras, pager, undo dialog, toasts.
   Only on history.html, after app.css. Colours come from the :root tokens; no font-size here (one size, see app.css). */

.hist-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }

/* Segmented List | Grid control */
.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--btn-r) + 3px); }
.seg-btn { font: inherit; font-weight: 500; display: inline-flex; align-items: center; gap: var(--btn-gap); min-height: var(--btn-h); padding: 0 .9rem; border: 0; border-radius: var(--btn-r); background: transparent; color: var(--ink); cursor: pointer; }
.seg-btn:hover { background: var(--raised); }
.seg-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.seg-btn .ic { width: var(--btn-ic); height: var(--btn-ic); }

/* Filters */
.hist-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: 1rem; }
.hist-field { min-width: 0; }
.hist-field label { margin-bottom: .25rem; }
.hist-field select, .hist-field input { width: auto; min-width: 11rem; min-height: var(--btn-h); padding: .35rem .6rem; border-radius: var(--btn-r); border-width: 1px; background: var(--raised); }
.hist-filters .btn { align-self: flex-end; }

/* Pills: Undone, Undo. Words, not colour alone. */
.pill-row { display: inline-flex; flex-wrap: wrap; gap: .35rem; margin-left: .5rem; vertical-align: middle; }
.entry-what .pill-row { display: flex; margin: .5rem 0 0; }
.pill { display: inline-block; border: 1px solid var(--field-line); color: var(--muted); border-radius: 999px; padding: 0 .6rem; font-weight: 600; white-space: nowrap; }
.pill-row .tag { display: inline-block; margin: 0; }
.entry-what .tag { margin-top: 0; }

.undone .sum-text, .undone .entry-what { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--dim); }
.fresh { animation: fresh 2.4s ease-out 1; }
@keyframes fresh { from { background: var(--ok-bg); box-shadow: inset 0 0 0 2px var(--ok-line); } to { background: transparent; box-shadow: inset 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .fresh { animation: none; background: var(--ok-bg); } }
.hist-row:focus { outline: none; }
.hist-row:focus-visible, .entry:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

.who-name { font-weight: 600; overflow-wrap: anywhere; }
.what-type { font-weight: 600; }
.what-where { display: block; color: var(--muted); overflow-wrap: anywhere; }
.entry-kind { color: var(--muted); }
.entry-kind .what-type { color: var(--ink); }
.entry-kind .what-where { display: inline; }
.entry-kind .what-where::before { content: " \00b7  "; }

/* Table */
.hist-table-wrap { margin-top: 1rem; background: var(--panel); border-radius: 12px; overflow: hidden; }
.hist-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hist-table th { text-align: left; color: var(--muted); font-weight: 600; padding: .6rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hist-table td { padding: .55rem .75rem; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.hist-table tr:last-child td { border-bottom: 0; }
.hist-table .hist-row:hover { background: var(--raised); }
.hist-table th:nth-child(1) { width: 14rem; }
.hist-table th:nth-child(2) { width: 10rem; }
.hist-table th:nth-child(3) { width: 13rem; }
.hist-table th:nth-child(5) { width: 13.5rem; }
.sum-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-sum .pill-row { display: flex; margin: .3rem 0 0; }
.hist-detail td { background: var(--bg); }

.actions-cell { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.actions-cell .btn { min-height: var(--btn-h); }
.c-act .actions-cell { justify-content: flex-end; }
.undo-btn .spinner { margin-right: .1rem; }
.undo-btn[aria-busy="true"]:disabled { opacity: 1; }

/* Details: before -> after */
.details { padding: .25rem 0 .1rem; }
.details-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.details-list li { overflow-wrap: anywhere; }
.details-path { display: block; color: var(--muted); font-weight: 600; }
.details-old { text-decoration: line-through; text-decoration-color: var(--dim); color: var(--muted); }
.details-new { font-weight: 600; }

/* Cards (grid view) */
.entry-foot { margin-top: .6rem; }
.entry-foot .actions-cell { justify-content: space-between; }
.entry .details { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }

/* Pager */
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0 0; }
.pager-info { color: var(--muted); min-width: 7rem; text-align: center; }

/* Undo question */
.dlg { width: min(460px, calc(100% - 2rem)); padding: 1.25rem; border: 1px solid var(--field-line); border-radius: 16px; background: var(--panel); color: var(--ink); }
.dlg::backdrop { background: rgba(0, 0, 0, .65); }
.dlg h2 { margin: 0 0 .6rem; }
.dlg p { margin: 0 0 .6rem; overflow-wrap: anywhere; }
.dlg-body { font-weight: 600; background: var(--raised); border-radius: 10px; padding: .6rem .8rem; }
.dlg-note { color: var(--muted); }
.dlg-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.dlg-actions .btn { flex: 1 1 8rem; }

/* Toasts: above the phone tab bar, clear of the round help button */
.toasts { position: fixed; left: 1rem; bottom: 1rem; z-index: 20; display: grid; gap: .5rem; width: min(440px, calc(100% - 6rem)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .5rem; justify-content: space-between; padding: .7rem .6rem .7rem 1rem; border-radius: 12px; background: var(--ok-bg); border-left: 6px solid var(--ok-line); box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
.toast.err { background: var(--err-bg); border-left-color: var(--err); }
.toast-text { flex: 1; min-width: 0; padding-top: .35rem; overflow-wrap: anywhere; }
.toast.err .toast-text { color: var(--err); font-weight: 600; }
.toast-x { flex: none; }

/* Phones: each row is a small block, summary first */
@media (max-width: 760px) {
  .hist-table-wrap { background: none; border-radius: 0; }
  .hist-table, .hist-table tbody { display: block; }
  .hist-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hist-table .hist-row { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "sum sum" "when who" "what what" "act act"; gap: .35rem .75rem; background: var(--panel); border-radius: 12px; padding: .75rem .9rem; margin-bottom: .6rem; }
  .hist-table td { display: block; padding: 0; border: 0; }
  .hist-table .c-sum { grid-area: sum; font-weight: 600; }
  .hist-table .c-when { grid-area: when; }
  .hist-table .c-who { grid-area: who; }
  .hist-table .c-what { grid-area: what; }
  .hist-table .c-act { grid-area: act; }
  .hist-table .c-when, .hist-table .c-who, .hist-table .c-what { color: var(--muted); }
  .hist-table .c-when::before, .hist-table .c-who::before, .hist-table .c-what::before { content: attr(data-label); display: block; color: var(--dim); font-weight: 600; }
  .hist-table .c-who .who-name { font-weight: 400; }
  .hist-table .c-what .what-type { font-weight: 400; }
  .hist-table .c-act .actions-cell { justify-content: space-between; margin-top: .25rem; }
  .sum-text { -webkit-line-clamp: 3; }
  .hist-table .hist-detail { display: block; margin: -.4rem 0 .6rem; }
  .hist-table .hist-detail td { display: block; background: var(--panel); border-radius: 0 0 12px 12px; padding: .5rem .9rem .8rem; }
  .hist-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .hist-field:first-child { grid-column: 1 / -1; }
  .hist-field select, .hist-field input { width: 100%; min-width: 0; }
  .hist-filters .btn { grid-column: 1 / -1; }
  .seg { width: 100%; }
  .seg-btn { flex: 1; justify-content: center; }
  .toasts { left: .75rem; right: .75rem; width: auto; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + .75rem); }
  .pager { gap: .5rem; }
}