/* /history page. Everything shared (tokens, header + .page-nav, tables,
   badges, the range-toggle segmented control, .filter-chip, skeletons)
   comes from main.css; this file only adds what the three history views
   need. */

.history-intro { color: var(--text-muted); font-size: .92rem; line-height: 1.55; max-width: 62ch; margin: -4px 0 18px; }

/* --- View switch: the same segmented control the Performance section uses --- */
.view-toggle { margin-bottom: 22px; }
.history-view[hidden] { display: none; }

/* --- Ledger --- */
.ledger-filters {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--card-bg); border: 1px solid var(--divider); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .3);
}
.filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 130px; }
.filter-field span {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted);
  font-family: 'IBM Plex Sans', sans-serif;
}
.filter-field select, .filter-field input {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 8px 10px; font: inherit; font-size: .85rem; color: var(--text-primary);
  background: var(--card-bg-alt); border: 1px solid var(--divider); border-radius: 9px;
  color-scheme: dark;
}
.filter-field select:focus-visible, .filter-field input:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
.ledger-filters .filter-chip { align-self: flex-end; margin-bottom: 1px; }
.ledger-filters .filter-chip[hidden] { display: none; }
.ledger-summary {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  font-family: 'IBM Plex Mono', monospace; font-size: .74rem; color: var(--text-muted); margin: 0 2px 10px;
  min-height: 1.1em;
}
.ledger-summary strong { color: var(--text-primary); font-weight: 600; }
.ledger-table th, .ledger-table td { white-space: nowrap; }
.ledger-table th.board-sortable { cursor: pointer; user-select: none; transition: color .14s ease; }
.ledger-table th.board-sortable.active { color: var(--text-primary); }
.ledger-table th.board-sortable:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .ledger-table th.board-sortable:hover { color: var(--text-primary); } }
.ledger-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger-table th.num { text-align: right; }
.ledger-table .cell-sub { display: block; font-family: 'IBM Plex Sans', sans-serif; font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.ledger-table td.cell-player { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; }
.ledger-empty {
  padding: 34px 16px; text-align: center; color: var(--text-muted); font-size: .9rem;
  border: 1px dashed var(--divider); border-radius: 14px;
}
.ledger-empty button { margin-top: 12px; }
.ledger-body-loading { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* --- Week digest --- */
.week-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.week-card {
  background: var(--card-bg); border: 1px solid var(--divider); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .3); padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.week-card.expanded { grid-column: 1 / -1; }
.week-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.week-title { font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 1rem; margin: 0; }
.week-picks-note { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; color: var(--text-muted); white-space: nowrap; }
.week-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.week-stat .label { font-size: .66rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.week-stat .value { font-family: 'IBM Plex Mono', monospace; font-size: 1.15rem; font-weight: 700; margin-top: 2px; }
.week-stat .value.positive { color: var(--win); }
.week-stat .value.negative { color: var(--loss); }
.week-extremes { display: grid; gap: 6px; font-size: .82rem; }
.week-extreme { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.week-extreme .tag { font-family: 'IBM Plex Mono', monospace; font-size: .66rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; flex: none; width: 44px; }
.week-extreme.best .tag { color: var(--win); }
.week-extreme.worst .tag { color: var(--loss); }
.week-extreme .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.week-extreme .units { font-family: 'IBM Plex Mono', monospace; font-weight: 600; margin-left: auto; flex: none; }
.week-extreme.best .units { color: var(--win); }
.week-extreme.worst .units { color: var(--loss); }
.week-extreme.none { color: var(--text-muted); font-style: italic; }
.week-bar { height: 5px; border-radius: 3px; background: rgba(var(--info-rgb), .12); overflow: hidden; display: flex; }
.week-bar span { height: 100%; }
.week-bar .w { background: var(--win); }
.week-bar .l { background: var(--loss); }
.week-bar .p { background: var(--low-confidence); }
.week-toggle {
  align-self: flex-start; margin-top: 2px;
  background: var(--card-bg-alt); border: 1px dashed rgba(var(--info-rgb), .45); border-radius: 20px;
  padding: 5px 14px; font: inherit; font-size: .78rem; color: var(--info); cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
@media (hover: hover) and (pointer: fine) { .week-toggle:hover { border-color: var(--info); color: var(--text-primary); } }
.week-toggle:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.week-rows { margin-top: 2px; }
.week-rows[hidden] { display: none; }

/* --- Calendar heatmap --- */
.cal-legend {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; color: var(--text-muted); margin: 0 2px 14px;
}
.cal-legend .swatches { display: inline-flex; gap: 3px; }
.cal-legend .swatches i { width: 14px; height: 14px; border-radius: 3px; display: block; }
.cal-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cal-month {
  background: var(--card-bg); border: 1px solid var(--divider); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .3); padding: 14px 14px 12px; min-width: 0;
}
.cal-month-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.cal-month-title { font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: .98rem; margin: 0; }
.cal-month-total { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; font-weight: 600; }
.cal-month-total.positive { color: var(--win); }
.cal-month-total.negative { color: var(--loss); }
.cal-month-total.flat { color: var(--text-muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-family: 'IBM Plex Mono', monospace; font-size: .62rem; color: var(--text-muted); text-align: center; padding-bottom: 2px; }
.cal-day {
  aspect-ratio: 1 / 1; border-radius: 6px; border: 1px solid transparent; padding: 0;
  font: inherit; font-family: 'IBM Plex Mono', monospace; font-size: .7rem; color: var(--text-muted);
  background: rgba(var(--info-rgb), .06); cursor: default; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.cal-day.blank { background: transparent; }
.cal-day.has-picks { cursor: pointer; color: var(--text-primary); font-weight: 600; }
.cal-day.pending-only { border-style: dashed; border-color: rgba(var(--info-rgb), .5); color: var(--info); }
.cal-day.has-picks:focus-visible, .cal-day.active { outline: 2px solid var(--text-primary); outline-offset: 1px; }
.cal-tip {
  position: absolute; z-index: 20; pointer-events: none;
  min-width: 150px; max-width: 220px; padding: 9px 11px;
  background: var(--card-bg-alt); border: 1px solid var(--divider); border-radius: 10px;
  box-shadow: 0 10px 24px rgba(var(--shadow-rgb), .55);
  font-size: .78rem; color: var(--text-primary); text-align: left; line-height: 1.4;
}
.cal-tip[hidden] { display: none; }
.cal-tip .tip-date { font-family: 'Space Grotesk', sans-serif; font-weight: 600; margin-bottom: 3px; }
.cal-tip .tip-line { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--text-muted); }
.cal-tip .tip-line strong { color: var(--text-primary); font-weight: 600; }
.cal-tip .positive { color: var(--win); }
.cal-tip .negative { color: var(--loss); }
.cal-wrap { position: relative; }

/* --- Skeletons specific to this page --- */
.skeleton-table { height: 320px; }
.skeleton-week { height: 210px; }
.skeleton-month { height: 300px; max-width: 420px; }

@media (max-width: 480px) {
  .ledger-table .cell-matchup { display: none; }
  .week-extreme { flex-wrap: wrap; }
  .week-extreme .who { white-space: normal; flex: 1 1 60%; }
  .ledger-filters { padding: 12px; gap: 8px 10px; }
  .filter-field { flex-basis: calc(50% - 5px); }
  .week-grid { grid-template-columns: 1fr; }
  .cal-months { grid-template-columns: 1fr; }
  .cal-day { font-size: .64rem; }
}

/* Touch targets at phone width -- the rest of the 44px set lives at the end
   of main.css; these controls only exist on this page. */
@media (max-width: 600px) {
  .filter-field select, .filter-field input { min-height: 44px; }
  #f-clear, .week-toggle { min-height: 44px; }
}

/* --- Ledger rows as cards (phones) -------------------------------------
   Eight columns do not fit a phone: the table used to scroll sideways with
   Result and Units -- the two facts a reader came for -- off screen. Below
   600px each row reflows into a small card:
       line 1  date ............ result  units
       line 2  pick (+ matchup)
       then    market / line / odds / grade, each with its column label
   The DOM stays one <table> (history.js adds explicit roles so the reflow
   does not cost it its semantics), and the header row is visually hidden
   rather than removed so screen readers still get column names. It comes
   back into view while a keyboard user is on a sort header. Applies to the
   Ledger and to the rows inside an open Weeks card; Calendar has no table. */
@media (max-width: 600px) {
  .table-wrap:has(> .ledger-table) { overflow-x: visible; }
  .ledger-table, .ledger-table tbody { display: block; }
  .ledger-table thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .ledger-table thead:focus-within {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    display: block; border-bottom: 1px solid var(--divider);
  }
  .ledger-table thead:focus-within tr { display: flex; flex-wrap: wrap; gap: 0 4px; padding: 4px 8px; }
  .ledger-table thead:focus-within th { border: 0; padding: 8px 6px; }
  .ledger-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "date   result units"
      "pick   pick   pick"
      "market market market"
      "meta   meta   meta";
    gap: 4px 12px; padding: 12px 14px;
    border-bottom: 1px solid var(--divider);
  }
  .ledger-table tbody tr:last-child { border-bottom: none; }
  .ledger-table td { display: block; padding: 0; border: 0; white-space: normal; text-align: left; }
  .ledger-table td[data-label="Date"] { grid-area: date; font-size: .8rem; color: var(--text-muted); }
  .ledger-table td[data-label="Date"] .cell-sub { display: inline; margin: 0 0 0 4px; }
  .ledger-table td[data-label="Result"] { grid-area: result; }
  .ledger-table td[data-label="Units"] { grid-area: units; text-align: right; }
  .ledger-table td[data-label="Pick"] { grid-area: pick; font-size: .95rem; }
  .ledger-table td[data-label="Pick"] .cell-matchup { display: block; }
  .ledger-table td[data-label="Market"] { grid-area: market; }
  /* Line, odds and grade share the last line as a small labelled grid. */
  .ledger-table td[data-label="Line"],
  .ledger-table td[data-label="Odds"],
  .ledger-table td[data-label="Grade"] { grid-row: 4; display: flex; align-items: baseline; gap: 6px; }
  .ledger-table td[data-label="Line"] { grid-column: 1; }
  .ledger-table td[data-label="Odds"] { grid-column: 2; }
  .ledger-table td[data-label="Grade"] { grid-column: 3; justify-content: flex-end; }
  .ledger-table td[data-label="Market"]::before,
  .ledger-table td[data-label="Line"]::before,
  .ledger-table td[data-label="Odds"]::before,
  .ledger-table td[data-label="Grade"]::before {
    content: attr(data-label);
    content: attr(data-label) / "";  /* screen readers already get the header */
    font-family: 'IBM Plex Sans', sans-serif; font-size: .66rem; font-weight: 600;
    letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted);
  }
  .ledger-table td[data-label="Market"]::before { display: block; margin-bottom: 1px; }
}