/* history.css -- saved calculations.
 *
 * Loaded after app.css, and only on this page. It is a separate sheet rather than
 * another section of app.css because app.css is the planner: a three-column grid,
 * the 3D viewer chrome and an item table. None of that is here, and a page that
 * borrows a stylesheet it uses two rules from is how the sheet this project
 * replaced grew to 2,700 lines.
 *
 * Everything visual comes from the tokens in base.css, so this file has no colours
 * of its own and follows the theme switch for free.
 */

.history-page {
  /* app.css zeroes .workspace padding because the planner's own panels carry it.
     A single card on an empty page has to place itself. */
  padding: 22px 24px 64px;
}
.history-card {
  max-width: 900px;
  margin-inline: auto;
}

/* ── The list ───────────────────────────────────────────────────────────────────
 * One row is one link, so the whole line is the target. Rows are separated by a
 * hairline rather than boxed individually: fifty bordered cards down a page is
 * fifty things to look at, and this is one thing -- a list.
 */
.history-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.history-list li + li {
  border-top: 1px solid var(--line);
}
/* Name, who ran it, when, and the affordance. Four tracks.
 *
 * Sized per row here, which leaves the timestamps ragged: a row carrying a name in
 * the third cell pushes its own date left, out of line with the row above it. The
 * @supports block below fixes that properly by making the four tracks belong to the
 * list rather than to each row. This is the fallback, and it is only untidy, not
 * broken -- which is the right way round.
 */
.history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
}

/* One set of columns for the whole list, so every timestamp lands on the same
   pixel and the dates read as a column instead of as fifty separate right edges.
   `subgrid` twice, because the <li> sits between the list and the link. */
@supports (grid-template-columns: subgrid) {
  .history-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }
  .history-list > li,
  .history-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}
.history-row:hover {
  background: var(--surface-2);
}
.history-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.history-name {
  font-weight: 620;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-row:hover .history-name {
  color: var(--primary);
}
.history-who,
.history-when {
  font-size: 12px;
  white-space: nowrap;
}
.history-who {
  color: var(--text-2);
}
/* Tabular figures, so the digits sit on a fixed pitch and the column does not
   shimmer as the day and hour change down the list. Right-aligned because the
   local-time swap in history.js can change the string's length. */
.history-when {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
/* The affordance, not a decoration: it says the row goes somewhere. Quiet until
   the pointer is on the row, which is when the question is being asked. */
.history-go {
  color: var(--muted-faint);
  transition: transform .12s ease, color .12s ease;
}
.history-row:hover .history-go {
  color: var(--primary);
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  .history-go {
    transition: none;
  }
  .history-row:hover .history-go {
    transform: none;
  }
}

/* ── Pager ──────────────────────────────────────────────────────────────────────
 * Three cells, always. The empty side keeps its width so the range stays put and
 * the remaining link does not jump across the footer between pages.
 */
.history-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}
.history-pager .newer {
  justify-self: start;
}
.history-pager .older {
  justify-self: end;
  flex-direction: row-reverse;
}
/* One glyph, which points right, serves both directions: older continues forward
   through the list so it keeps the arrow as drawn and puts it after the label;
   newer goes back, so it turns around and leads. */
.history-pager .newer .icon {
  transform: rotate(180deg);
}
.history-range {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  justify-self: center;
}
.history-pager-gap {
  display: block;
}

/* ── Nothing to show ───────────────────────────────────────────────────────────*/
.history-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 64px 24px;
  text-align: center;
}
.history-empty .icon {
  color: var(--muted-faint);
  margin-bottom: 4px;
}
.history-empty-title {
  margin: 0;
  font-weight: 680;
  font-size: 15px;
}
.history-empty .hint {
  margin: 0;
  max-width: 46ch;
}
.history-empty .btn {
  margin-top: 12px;
}

/* The rest of this surface has a 1200px floor and a header that assumes it, so a
   responsive history page inside a non-responsive shell would be incoherent. This
   is only about the row: a long calculation name should give up its width before
   the date is pushed off the end of it. */
@media (max-width: 1400px) {
  .history-row {
    gap: 12px;
  }
}