/* ============================================================
   Stage 2 · Screen 8.15 — Decision history
   ============================================================ */
.hist {
  width: 100%;
}

/* In-progress card (Decisions portfolio landing) */
.hist-inprog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }

/* New-decision card — the primary create entry, accent tile */
.hist-newcard {
  display: flex; flex-direction: column; gap: var(--space-2);
  width: 100%; height: 100%;
  padding: var(--space-4);
  background: none; border: none; cursor: pointer; text-align: left;
  color: var(--ink-primary);
  transition: background var(--dur-state) var(--ease-enter);
}
.hist-newcard:hover { background: var(--accent-primary-soft); }
.hist-newcard__top { display: flex; align-items: center; justify-content: space-between; }
.hist-newcard__plus {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--accent-primary); color: var(--surface-raised);
}
.hist-newcard__title { font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1.15; text-wrap: balance; margin-top: var(--space-2); }
.hist-newcard__sub { font-size: 13px; color: var(--ink-secondary); text-wrap: pretty; }
.hist-newcard__arrow { flex-shrink: 0; font-size: 22px; color: var(--accent-primary); transition: transform var(--dur-state) var(--ease-enter); }
.hist-newcard:hover .hist-newcard__arrow { transform: translateX(3px); }

/* Recent-decisions table card (flush body): filters header + scroll region */
.hist-reccard { display: flex; flex-direction: column; min-width: 0; }
.hist-reccard__filters {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-soft);
}
.hist-reccard__filters .slicerbar { padding: 0; background: none; border: none; }
.hist-reccard__scroll { padding: var(--space-4); }
.hist-inprog__row {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  background: none; border: none; padding: var(--space-3) var(--space-2);
  text-align: left; cursor: pointer; color: var(--ink-primary);
  border-radius: var(--radius-md);
  transition: background var(--dur-state) var(--ease-enter);
}
.hist-inprog__row:hover { background: var(--surface-sunk); }
.hist-inprog__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hist-inprog__cta { color: var(--accent-data); white-space: nowrap; }

/* Top */
.hist__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--space-6);
}
.hist__back {
  color: var(--ink-tertiary);
  text-decoration: none;
}
.hist__back:hover { color: var(--ink-primary); }
.hist__title { margin: 0 0 var(--space-2); }
.hist__sub  { margin: 0; color: var(--ink-secondary); max-width: 620px; }
.hist__locale {
  display: flex; align-items: center; gap: var(--space-1);
  background: none; border: 1px solid var(--line-soft);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-tertiary);
  cursor: pointer;
}
.hist__locale .is-active { color: var(--ink-primary); font-weight: 500; }

.hist__main { display: flex; flex-direction: column; gap: var(--space-6); }

/* Stats row */
.hist-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hist-stats__cell {
  padding: var(--space-5);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.hist-stats__cell:last-child { border-right: none; }
.hist-stats__lbl {
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.hist-stats__v {
  margin: var(--space-1) 0 0;
  color: var(--ink-primary);
  font-feature-settings: "tnum" 1;
}
.hist-stats__sub { margin: 0; color: var(--ink-secondary); }

@media (max-width: 880px) {
  .hist-stats { grid-template-columns: repeat(2, 1fr); }
  .hist-stats__cell:nth-child(2) { border-right: none; }
  .hist-stats__cell:nth-child(1), .hist-stats__cell:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
}

/* Filter bar */
.hist-filters {
  display: flex; flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  align-items: center;
}
.hist-filters__group {
  display: flex; align-items: center; gap: var(--space-3);
}
.hist-filters__lbl {
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hist-filters__pills { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.hist-filters__pill {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  font-size: 13px;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 140ms var(--ease-enter), color 140ms var(--ease-enter);
}
.hist-filters__pill:hover {
  background: var(--surface-sunk);
  color: var(--ink-primary);
}
.hist-filters__pill.is-active {
  background: var(--ink-primary);
  color: var(--surface-raised);
}
.hist-filters__search {
  display: flex; align-items: center; gap: var(--space-2);
  margin-left: auto;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-canvas);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--ink-tertiary);
  flex: 0 1 240px;
}
.hist-filters__search:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-soft);
}
.hist-filters__input {
  background: none; border: none; outline: none;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-primary);
  flex: 1;
  min-width: 0;
}

/* Timeline */
.hist-tl { display: flex; flex-direction: column; gap: var(--space-7); }
.hist-tl__group {}
.hist-tl__group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line-soft);
}
.hist-tl__group-title {
  margin: 0;
  color: var(--ink-secondary);
}
.hist-tl__group-count {
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}

.hist-tl__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }

.hist-tl__row {
  display: grid;
  grid-template-columns: 28px 1fr 24px;
  gap: var(--space-4);
  align-items: flex-start;
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-5) var(--space-3);
  text-align: left;
  cursor: pointer;
  color: var(--ink-primary);
  position: relative;
  border-bottom: 1px solid var(--line-soft);
  transition: background 140ms var(--ease-enter);
}
.hist-tl__list li:last-child .hist-tl__row { border-bottom: none; }
.hist-tl__row:hover { background: var(--surface-sunk); }
.hist-tl__row:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: -2px; }

/* timeline dot */
.hist-tl__dot {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding-top: 4px;
}
.hist-tl__dot-inner {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line-default);
}
.hist-tl__dot-inner.is-running {
  background: var(--accent-data);
  box-shadow: 0 0 0 3px var(--accent-data-soft);
  animation: hist-pulse 1400ms infinite ease-in-out;
}
.hist-tl__dot-inner.is-recommended {
  background: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-soft);
}
.hist-tl__dot-inner.is-deferred {
  background: var(--ink-tertiary);
}
.hist-tl__dot-inner.is-hold {
  background: var(--state-warning, #B6804B);
  box-shadow: 0 0 0 3px var(--state-warning-soft, #F1E2D2);
}
@keyframes hist-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

.hist-tl__row-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.hist-tl__row-meta-top {
  display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap;
  row-gap: var(--space-1);
  line-height: 1.4;
  color: var(--ink-tertiary);
}
.hist-tl__row-type {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-secondary);
}
.hist-tl__row-id { font-family: var(--font-mono); font-size: 11px; }
.hist-tl__row-date { font-variant-numeric: tabular-nums; }
.hist-tl__row-title { margin: 0; text-wrap: pretty; }
.hist-tl__row-headline {
  margin: 0;
  color: var(--ink-secondary);
  text-wrap: pretty;
}
.hist-tl__row-foot {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.hist-tl__row-conf {
  display: flex; align-items: center; gap: var(--space-2);
  min-width: 140px;
}

.hist-tl__arrow {
  color: var(--ink-tertiary);
  font-size: 18px;
  padding-top: 4px;
  transition: transform 140ms var(--ease-enter), color 140ms var(--ease-enter);
}
.hist-tl__row:hover .hist-tl__arrow {
  transform: translateX(3px);
  color: var(--ink-primary);
}

/* Outcome marker */
.hist-outcome {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.hist-outcome.is-followed   { background: var(--state-positive-soft, #E8EFD9); color: var(--state-positive, #5A7438); }
.hist-outcome.is-overridden { background: var(--surface-sunk); color: var(--ink-secondary); }
.hist-outcome.is-pending    { background: var(--accent-primary-soft); color: var(--accent-primary); }

@media (max-width: 720px) {
  .hist-tl__row { grid-template-columns: 24px 1fr; gap: var(--space-3); padding: var(--space-4) var(--space-2); }
  .hist-tl__arrow { display: none; }
  .hist-filters__search { margin-left: 0; flex: 1 1 100%; }
}

/* ============================================================
   Mobile — Stage 2 Screen 8.15 history
   ============================================================ */
@media (max-width: 767px) {
  .hist { padding: var(--space-4) var(--space-4) var(--space-6); }

  /* Top — stack header */
  .hist__top {
    flex-direction: column; align-items: stretch; gap: var(--space-3);
    padding-bottom: var(--space-4); margin-bottom: var(--space-4);
  }
  .hist__title.t-h1 { font-size: 26px; line-height: 32px; }
  .hist__locale { align-self: flex-start; }

  .hist__main { gap: var(--space-4); }

  /* Stats grid → 2x2 already at 880; further compress to single column on tiny screens */

  /* Filters — stack groups vertically */
  .hist-filters { padding: var(--space-3); gap: var(--space-3); }
  .hist-filters__group { flex-direction: column; align-items: flex-start; gap: var(--space-2); width: 100%; }
  .hist-filters__pills { width: 100%; }
  .hist-filters__pill { min-height: 32px; padding: var(--space-1) var(--space-3); }
  .hist-filters__search { width: 100%; flex: 1 1 100%; }

  /* Timeline — already collapses; tighten group head */
  .hist-tl { gap: var(--space-5); }
  .hist-tl__group-head { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .hist-tl__row { padding: var(--space-3) var(--space-1); }
  .hist-tl__row-meta-top { gap: var(--space-2); font-size: 11px; }
  .hist-tl__row-id { display: none; }                     /* save horizontal room */
  .hist-tl__row-foot { gap: var(--space-2); }
  .hist-tl__row-conf { min-width: 0; flex: 1; }
}

@media (max-width: 413px) {
  .hist-stats { grid-template-columns: 1fr; }
  .hist-stats__cell { border-right: none !important; }
  .hist-stats__cell:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
}