/* History uses the site's existing theme tokens and shared card/modal styles. */
#page-hist .stage-head { padding: 24px 24px 18px; }
#page-hist h1 { font-size: 28px; line-height: 1.25; margin-bottom: 8px; }
#page-hist .hist-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 20px; }
#page-hist .hist-filter { display: flex; align-items: center; gap: 10px; min-width: 0; }
#page-hist .hist-filter-label { color: var(--muted); font-size: 13px; white-space: nowrap; }
#page-hist .hist-kinds { display: flex; gap: 4px; padding: 4px; background: var(--field-bg); border-radius: 12px; }
#page-hist .hist-kinds button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
#page-hist .hist-kinds button[aria-pressed="true"] { background: var(--accent-soft); color: var(--gold); font-weight: 600; }
#page-hist #histTime { width: 158px; max-width: none; height: 44px; border-radius: 12px; background-color: var(--field-bg); }
#page-hist #histTime.active { border-color: var(--accent); color: var(--gold); background-color: var(--accent-soft); }
#page-hist #histTime option { color: var(--text); background: var(--panel); }
#page-hist .hist-summary { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
#page-hist #hist {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  grid-auto-rows: max-content; align-content: start; gap: 20px; padding: 24px;
  scrollbar-gutter: stable; overflow-x: hidden;
}
#hist .clip { display: flex; flex-direction: column; min-width: 0; background: var(--panel); border-color: var(--line); box-shadow: none; }
#hist .hist-card-head { order: 0; padding: 14px 78px 12px 16px; min-height: 76px; }
#hist .hist-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; }
#hist .hist-kind { color: var(--gold); font-weight: 600; }
#hist .hist-state { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
#hist .hist-state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
#hist .clip-ok .hist-state { color: var(--ok); }
#hist .clip-bad .hist-state { color: var(--bad); }
#hist .hist-date { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
#hist .clip-x {
  position: absolute; top: 8px; right: 8px; float: none; margin: 0;
  width: auto; min-width: 56px; height: 44px; padding: 0 10px;
  font-size: 12px; line-height: 1; border: 0; border-radius: 10px;
  color: var(--bad); background: transparent;
}
#hist .clip-x:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }
#hist .clip-cancel { min-height: 44px; padding: 0 14px; border-radius: 10px; }
#hist .hist-preview, #hist .clip-well { order: 1; position: relative; flex: 0 0 auto; aspect-ratio: 16 / 9; width: 100%; min-width: 0; overflow: hidden; background: var(--field-bg); }
#hist .hist-preview img, #hist .hist-preview video {
  display: block; width: 100%; height: 100%; max-height: none; aspect-ratio: 16 / 9;
  object-fit: contain; border-radius: 0; margin: 0; background: var(--field-bg);
}
#hist .hist-preview img { cursor: pointer; }
#hist .hist-preview video { background: #000; }
#hist .hist-preview video:fullscreen, #hist .hist-preview video:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; }
#hist .hist-preview[aria-busy="true"] img { visibility: hidden; }
#hist .hist-media-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; font-size: 13px; color: var(--muted); background: var(--panel); }
#hist .hist-spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: hist-spin .8s linear infinite; }
@keyframes hist-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #hist .hist-spinner { animation: none; } }
#hist .hist-media-status button, #hist .hist-playback button { min-height: 44px; border: 0; border-radius: 10px; padding: 0 14px; cursor: pointer; color: var(--gold); background: var(--accent-soft); }
#hist .hist-playback { order: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--field-bg); }
#hist .hist-playback span { color: var(--muted); font-size: 12px; }
#hist .hist-playback button[aria-pressed="true"] { color: var(--btn-fg); background: var(--btn-bg); }
#hist .clip-prompt { order: 3; padding: 14px 16px 8px; border: 0; color: var(--text); font-size: 13px; line-height: 1.6; min-height: 4.8em; max-height: 7.8em; }
#hist .clip-meta { order: 4; padding: 4px 16px 14px; font-size: 12px; }
#hist .clip-actions, #hist .clip-ok .clip-actions {
  order: 5; position: static; display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; margin-top: auto; padding: 12px; border-top: 1px solid var(--line); background: transparent;
}
#hist .clip-actions a, #hist .clip-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--gold); font-size: 13px; }
#hist .clip-ok .clip-actions a, #hist .clip-ok .clip-actions button { color: var(--gold); }
#hist .clip-actions button[data-redo] { background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; padding: 0 20px; }
#hist .clip-actions a:hover, #hist .clip-actions button:not([data-redo]):hover { background: var(--accent-soft); }
#hist .hist-more { flex: 1 1 auto; min-width: 0; }
#hist .hist-more summary { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--muted); font-size: 13px; cursor: pointer; list-style: none; }
#hist .hist-more summary::-webkit-details-marker { display: none; }
#hist .hist-more summary::after { content: "⌄"; margin-left: 6px; }
#hist .hist-more[open] { flex-basis: 100%; }
#hist .hist-more[open] summary { justify-content: flex-start; background: var(--field-bg); }
#hist .hist-more[open] summary::after { content: "⌃"; }
#hist .hist-more > div { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 4px; }
#hist .hist-empty { grid-column: 1 / -1; text-align: center; padding: clamp(32px, 7vh, 80px) 16px; color: var(--muted); }
#hist .hist-empty svg { width: 42px; height: 42px; margin-bottom: 16px; stroke: var(--gold); fill: none; stroke-width: 1.4; }
#hist .hist-empty h2 { margin: 0 0 8px; color: var(--text); font-size: 20px; font-weight: 600; }
#hist .hist-empty p { margin: 0 0 20px; font-size: 14px; }
#hist .hist-empty button { height: 44px; padding: 0 20px; }
#page-hist button:focus-visible, #page-hist a:focus-visible, #page-hist summary:focus-visible, #page-hist img:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#histDelete .modal-card { max-height: calc(100dvh - 32px); overflow: auto; }
#histDelete h2 { font-size: 20px; margin: 0 0 12px; }
#histDelete .hist-delete-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
#histDelete button { min-height: 44px; margin: 0; padding: 0 18px; border-radius: 12px; }
#histDelete .hist-danger { border: 0; background: var(--bad); color: var(--bg); font-weight: 600; cursor: pointer; }
#histDelete .hist-danger:disabled { opacity: .6; cursor: wait; }
#histDeleteError { color: var(--bad); margin-top: 12px; font-size: 13px; }
@media (max-width: 720px) {
  #page-hist .stage-head { padding: 20px 16px 14px; }
  #page-hist h1 { font-size: 24px; }
  #page-hist .hist-toolbar { gap: 10px 16px; margin-top: 16px; }
  #page-hist .hist-filter { justify-content: space-between; flex: 1 1 100%; }
  #page-hist .hist-kinds button { min-height: 44px; padding: 0 18px; }
  #page-hist #hist { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; scrollbar-gutter: auto; }
  #histDelete .hist-delete-actions button { flex: 1; }
}