.history {
  min-height: calc(100vh - var(--shell-h) - var(--footer-h));
  min-height: calc(100dvh - var(--shell-h) - var(--footer-h));
  box-sizing: border-box;
  
  padding: var(--page-top) max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) var(--step-8);
  background: var(--surface-ground);
  color: var(--ink-1);
}
.history-title { margin: 0 0 var(--step-5); }
.history-title:focus { outline: none; }
.history-body { max-width: 60rem; }
.history-list { display: grid; gap: var(--step-4); justify-items: start; min-width: 0; }
.history-list > .ur-rows { width: 100%; }
.history-item { display: grid; min-width: 0; }


.history-line-row {
  display: grid;
  grid-template-columns: auto 5.5em minmax(0, 1fr) auto 1rem;
  align-items: center;
  gap: var(--step-3);
  min-height: 60px;
}
.history-line-row .ur-result { min-width: 0; }
.history-main { min-height: var(--touch); }

.history-line-row { border: 1px solid var(--line-1); border-radius: var(--round-2); }
.history-item { position: relative; }
.history-side { display: flex; align-items: center; justify-content: flex-end; gap: var(--step-5); min-width: 0; }
.history-decks { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--step-2); }
.history-vs { color: var(--ink-2); font-size: var(--type-note); text-transform: lowercase; }

.history-line-row .history-decks { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 84px; height: 48px; overflow: hidden; border-radius: var(--round-2); background: var(--surface-ground); }
.history-line-row .history-decks > .history-side-deck { display: block; position: relative; min-width: 0; }
.history-line-row .history-decks .ur-thumb { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.history-line-row .history-decks > .history-side-deck:last-child { margin-left: -14px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
.history-line-row .history-decks > .history-side-deck:first-child { margin-right: 0; }
.history-line-row .history-decks .history-nomark { display: grid; place-items: center; height: 100%; }
.history-figures { color: var(--ink-2); font-size: var(--type-note); font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-nomark { min-width: 2.2em; text-align: center; color: var(--ink-2); }
.history-when { min-width: 7.5em; text-align: right; white-space: nowrap; }

.history-caret {
  position: relative;
  cursor: pointer;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--motion-2) var(--ease-standard);
  justify-self: center;
}

.history-caret::before { content: ""; position: absolute; inset: -1rem; }
.history-line-row.is-open .history-caret { transform: translateY(2px) rotate(-135deg); }
.history-line-row.is-open { border-color: var(--line-2); }


.history-detail {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--step-1));
  z-index: 6;
  display: grid;
  gap: var(--step-4);
  padding: var(--step-4);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  box-shadow: 0 20px 48px oklch(5% 0.02 274 / 0.55);
  transform-origin: 50% 0;
  animation: history-card-in var(--motion-2) var(--ease-spring) both;
}
@keyframes history-card-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes history-card-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.history-detail .ur-skeleton { width: 100%; }

.history-rows { --history-card-room: 24rem; }
.history-rows:has(.history-item:nth-last-child(-n+8) > .history-detail) { padding-bottom: var(--history-card-room); }
@media (max-width: 600px) { .history-rows { --history-card-room: 38rem; } }
.history-facts {
  display: grid;
  
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--step-3) var(--step-6);
  margin: 0;
  align-items: start;
}
.history-fact { display: grid; gap: 2px; min-width: 0; grid-column: span 2; }
.history-fact-deck { grid-column: span 3; }
.history-fact dt { font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.history-fact dd { margin: 0; min-width: 0; font-size: var(--type-read); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.history-deck { padding-top: var(--step-2); }
.history-deck .ur-deckrow-summary { min-height: 0; padding: 0; }
.history-side-deck { display: inline-flex; }

.history-deck-name { min-width: 0; overflow-wrap: break-word; }

@media (max-width: 600px) {
  .history-fact, .history-fact-deck { grid-column: auto; }
  .history-fact-deck { grid-column: 1 / -1; }
}
.history-code-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--step-2) var(--step-3); margin: 0; min-width: 0; }
.history-code-label { font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.history-actions { display: flex; flex-wrap: wrap; gap: var(--step-3); }

.history-trouble { display: grid; gap: var(--step-3); justify-items: start; width: 100%; }
.history-trouble .ur-line { width: 100%; box-sizing: border-box; }
.history-body > .ur-line { width: 100%; box-sizing: border-box; }
.results-history { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--ink-2); }


@media (max-width: 600px) {
  .history { padding-block: var(--page-top) var(--step-7); padding-inline: var(--page-gutter); }
  .history-line-row {
    grid-template-columns: auto 4.5em minmax(0, 1fr) 1rem;
    grid-template-areas: "band res main caret" ". side side side";
    row-gap: var(--step-1);
    padding-block: var(--step-3);
  }
  .history-line-row .history-decks { grid-area: band; align-self: start; width: 64px; height: 40px; }
  .history-line-row .ur-result { grid-area: res; align-self: start; }
  
  .history-line-row .ur-row-name, .history-line-row .ur-row-sub { white-space: normal; overflow-wrap: anywhere; }
  .history-line-row .history-main { grid-area: main; }
  .history-line-row .history-side { grid-area: side; justify-content: space-between; }
  .history-line-row .history-when { min-width: 0; }
  .history-line-row .history-caret { grid-area: caret; }
  .history-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-actions > .ui-btn { flex: 1 1 8rem; }
}

:root[data-input="touch"] :is(.history-vs, .history-fact dt, .history-code-label) { font-size: var(--touch-floor-ui); }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .history-caret { transition: none; }
  :root:not([data-motion="full"]) .history-detail { animation-name: history-card-fade; animation-duration: var(--motion-still); }
}


.history-filters {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--step-3) var(--step-5);
  margin-bottom: var(--step-5); padding: var(--step-4);
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--round-2);
}
.history-field { display: grid; gap: var(--step-1); min-width: 0; }
.history-field-label { font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.history-input {
  box-sizing: border-box; min-height: var(--touch); padding: 0 var(--step-3);
  border: 1px solid var(--line-2); border-radius: var(--round-1); background: var(--surface-2); color: var(--ink-1);
  font: inherit; font-size: var(--type-body);
}
.history-field-search .history-input { width: 11rem; }
.history-input:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.history-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: var(--round-2); overflow: hidden; }
.history-seg-btn {
  min-height: var(--touch); padding: 0 var(--step-3); border: 0; border-right: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: var(--type-body); cursor: pointer; white-space: nowrap;
}
.history-seg-btn:last-child { border-right: 0; }
@media (hover: hover) { .history-seg-btn:hover { color: var(--ink-1); } }
.history-seg-btn[aria-pressed="true"] { background: var(--ink-1); color: var(--surface-ground); }
.history-seg-btn:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-in); }
.history-dates { display: flex; gap: var(--step-3); }
.history-filter-foot { display: flex; align-items: center; gap: var(--step-3); margin-left: auto; min-height: var(--touch); }
.history-count { color: var(--ink-2); font-size: var(--type-note); font-variant-numeric: tabular-nums; }
.history-side .ui-pill { white-space: nowrap; }


.history-filter-row { display: none; }

.history[data-history-folded] .history-filters { display: none; }
.history[data-history-folded="short"] .history-filter-row { display: grid; gap: var(--step-2); margin-bottom: var(--step-4); }
.history[data-history-folded="short"] .history-filter-row-top { max-width: 22rem; }
:root[data-compact] .history-filters { display: none; }
:root[data-compact] .history-filter-row { display: grid; gap: var(--step-2); margin-bottom: var(--step-4); }
.history-filter-row-top { display: flex; align-items: center; gap: var(--step-3); }
.history-filter-row-top .history-count { flex: 1; }
.history-chips { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.history-chips:empty { display: none; }
.history-chip {
  display: inline-flex; align-items: center; gap: var(--step-2); min-height: var(--touch); padding: 0 var(--step-3);
  border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-2); color: var(--ink-1);
  font: inherit; font-size: var(--type-body);
}
.history-chip:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.history-chip-x { color: var(--ink-3); }
.history-sheet-filters { display: grid; gap: var(--step-4); }
.history-sheet-filters .history-field-search .history-input { width: 100%; }
.history-sheet-filters .history-seg { display: flex; }
.history-sheet-filters .history-seg-btn { flex: 1 1 auto; }
.history-sheet-filters .history-dates > .history-field { flex: 1; }
.history-sheet-filters .history-dates .history-input { width: 100%; }
@media (max-width: 600px) {
  .history-side { flex-wrap: wrap; }
}
:root[data-input="touch"] :is(.history-field-label, .history-count) { font-size: var(--touch-floor-ui); }


.side > .panel.decide.replay-bar { height: auto; min-height: 196px; overflow: visible; gap: var(--step-2); }
.table[data-shape="tall"] .side-right > .panel.decide.replay-bar { max-height: none; overflow: visible; }
.replay-label { font-variant-numeric: tabular-nums; }
.replay-controls, .replay-extras { display: flex; flex-wrap: wrap; gap: var(--step-1); }
.replay-controls > .ui-btn { flex: 1 1 auto; }
.replay-scrub-row { display: flex; position: relative; }
.replay-scrub { flex: 1 1 auto; width: 100%; min-height: 44px; accent-color: var(--ink-2); }
.replay-ending { margin: 0; font-size: 0.8125rem; color: var(--ink-2); }

.replay-filmed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2); }
.replay-chip { display: inline-block; padding: 0 var(--step-2); border: 1px solid var(--line-2); border-radius: var(--round-1); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.replay-filmed-line { font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.replay-bar.is-phone .replay-controls > .ui-btn { min-width: 44px; }
.history-replay-row { margin: var(--step-3) 0 0; }
.history-replay-none { color: var(--ink-3); font-size: 0.875rem; }
.history-sandbox-turns { display: flex; flex-direction: column; gap: var(--step-3); }
.history-sandbox-turn { display: flex; flex-direction: column; gap: var(--step-1); }
.history-sandbox-turn .ui-btn { width: 100%; min-height: 44px; justify-content: flex-start; }
.history-sandbox-turn.is-greyed { opacity: 0.75; }
.history-sandbox-why { margin: 0; color: var(--ink-3); font-size: 0.875rem; }


.history-free-log { display: grid; gap: var(--step-1); max-height: 22rem; overflow-y: auto; padding: var(--step-2); border: 1px solid var(--line-2); border-radius: 8px; }
.history-free-log-title { margin: 0; font-size: var(--type-label); color: var(--ink-2); font-weight: 600; }
.history-free-log .log-row { height: auto; min-height: 0; }

.replay-mark { position: absolute; top: 2px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); }



.replay-mark[data-replay-mark="review-inaccuracy"] { background: var(--ink-2); height: 14px; width: 3px; margin-left: -1.5px; }
.replay-mark[data-replay-mark="review-mistake"] { background: var(--warn); height: 16px; width: 4px; margin-left: -2px; }
.replay-mark[data-replay-mark="review-blunder"] { background: var(--bad); height: 18px; width: 4px; margin-left: -2px; top: 0; }


.review-panel:not(.review-sheet) { max-height: 40vh; overflow-y: auto; }
.review-panel { display: grid; gap: var(--step-2); padding-top: var(--step-2); border-top: 1px solid var(--line-2); }
.review-panel p, .review-panel h3 { margin: 0; }
.review-title { font-size: var(--type-body); font-weight: 600; color: var(--ink-1); }
.review-you, .review-computer, .review-why, .review-line, .review-more, .review-status { font-size: var(--type-note); line-height: 1.45; color: var(--ink-2); }
.review-computer { color: var(--ink-1); }
.review-actions { display: flex; flex-wrap: wrap; gap: var(--step-1); }
.review-actions > .ui-btn { flex: 1 1 auto; }
.review-items { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--step-2); }
.review-item { display: grid; gap: var(--step-1); }
.review-item > .ui-btn { height: auto; min-height: 44px; justify-content: flex-start; text-align: left; white-space: normal; padding: var(--step-2) 0; }
.review-lesson { font-size: var(--type-note); color: var(--ink-2); }
.review-scale { font-size: var(--type-note); color: var(--ink-3); }


.review-panel.review-sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-anchored); max-height: 52dvh; overflow-y: auto; gap: var(--step-2);
  padding: var(--step-2) var(--step-4) calc(var(--step-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-2);
  border-radius: calc(var(--round-2) * 2) calc(var(--round-2) * 2) 0 0; background: var(--surface-overlay); box-shadow: 0 -16px var(--shadow-sheet-blur) var(--shadow-sheet-ink);
}
.review-panel.review-sheet[data-open="false"] { max-height: none; overflow: visible; padding-block: 0 env(safe-area-inset-bottom, 0px); }
.review-panel.review-sheet.is-summary { max-height: calc(100dvh - 48px); }
.review-panel.review-sheet > .ui-btn { width: 100%; justify-content: center; }
.review-panel.review-sheet > .ui-btn::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--ink-3); margin-right: var(--step-3); }


.history-review-chip { white-space: nowrap; }
.history-trend { margin: 0 0 var(--step-3); color: var(--ink-2); font-size: var(--type-note); font-variant-numeric: tabular-nums; }


.arrow-ghost { pointer-events: none; --ghost: var(--ink-1); }
.arrow-ghost-line { fill: none; stroke: var(--ghost); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 8; opacity: 0.9; }
.arrow-ghost .arrow-head-mark { fill: var(--ghost); opacity: 0.9; }
.arrow-ghost-box { fill: none; stroke: var(--ghost); stroke-width: 2.5; stroke-dasharray: 7 5; }
.arrow-ghost-lift .arrow-ghost-box { fill: rgb(255 255 255 / 0.06); }
.arrow-ghost-mark, .arrow-ghost-chip-text { fill: var(--ghost); font: 600 12px/1 system-ui, sans-serif; }
.arrow-ghost-chip-box { fill: var(--surface-overlay); stroke: var(--ghost); stroke-width: 2; stroke-dasharray: 6 4; }
.arrow-ghost-chip-text { font-size: 14px; }