/* Propium, History page (the Edge Model's pick ledger).
   Adds only what site.css lacks. Every colour is a site.css token and every
   class here starts with ld- (states are is-*), so nothing shared is restyled.

   1. frame        2. filters      3. summary line   4. ledger table
   5. pager        6. record       7. weeks          8. calendar
   9. phone        10. motion */

/* ---------- 1. frame ---------- */
.ld-stack { display: flex; flex-direction: column; }
.ld-top { margin-bottom: 18px; align-items: stretch; }
.ld-solo { grid-column: 1 / -1; }
.ld-views { margin-bottom: 14px; }
.ld-body { min-height: 96px; transition: opacity .15s var(--ease); }
.ld-busy { opacity: .55; pointer-events: none; }
.ld-quiet { margin: 0 0 12px; font-size: 14px; color: var(--muted); }

/* ---------- 2. filters ---------- */
.ld-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 14px 16px 16px; margin-bottom: 12px; }
.ld-field { flex: 1 1 150px; display: grid; gap: 5px; min-width: 0; }
.ld-field > span { font: 600 11px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ld-field select, .ld-field input { min-height: 44px; }
.ld-field select, .ld-field input {
  width: 100%; min-width: 0; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2);
  background-color: var(--bg-2); color: var(--text); font: 500 16px/1.2 var(--f-body); color-scheme: dark;
}
.ld-field select:focus-visible, .ld-field input:focus-visible { outline: 2px solid var(--win); outline-offset: 1px; }
.ld-sortf { display: none; }
.ld-clear { flex: none; }

/* ---------- 3. summary line ---------- */
.ld-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 22px; margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ld-summary strong { color: var(--text); font-weight: 600; }
.ld-summary:empty { display: none; }
.ld-sorted { color: var(--dim); white-space: nowrap; }

/* ---------- 4. ledger table ---------- */
.ld-wrap { overflow-x: auto; padding: 4px 18px 6px; }
.ld-inner { padding: 0; border-top: 1px solid var(--line); }
.ld-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ld-table th, .ld-table td { padding: 10px; text-align: left; vertical-align: middle; }
.ld-table th:first-child, .ld-table td:first-child { padding-left: 0; }
.ld-table th:last-child, .ld-table td:last-child { padding-right: 0; }
.ld-table thead th { padding-block: 4px; font: 600 11px/1.3 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.ld-table tbody tr > * { border-top: 1px solid var(--line); }
.ld-table .ld-num { text-align: right; }
.ld-table .ld-ctr { text-align: center; }
.ld-sort { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 6px; margin-inline: -6px; border-radius: 6px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.ld-sort::after { content: ""; position: absolute; inset: -2px 0; }
.ld-sort > i { width: 8px; font-style: normal; font-size: 9px; line-height: 1; color: var(--win); }
.ld-sort.is-on { color: var(--text); }
@media (hover: hover) {
  .ld-sort:hover { color: var(--text); }
  .ld-table tbody tr:hover > td { background-color: rgba(var(--text-a), .03); }
}
.ld-c-date { width: 1%; white-space: nowrap; font: 600 14.5px/1.25 var(--f-label); letter-spacing: .03em; color: var(--muted); }
.ld-c-pick { min-width: 0; }
.ld-who { display: block; font: 800 20px/1.05 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.ld-sub { display: block; margin-top: 3px; font: 500 12.5px/1.3 var(--f-label); letter-spacing: .03em; text-transform: none; color: var(--muted); }
.ld-sub:empty { display: none; }
.ld-bet { display: none; }
/* The three price figures as one line under the pick, for the widths where
   their columns are folded away (section 9). */
.ld-nums { display: none; flex-wrap: wrap; gap: 1px 12px; margin-top: 5px; color: var(--text); font-variant-numeric: tabular-nums; }
.ld-nums > span { white-space: nowrap; }
.ld-nums i { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ld-c-market { font: 600 14.5px/1.25 var(--f-label); letter-spacing: .02em; color: var(--text); }
.ld-c-line, .ld-c-odds, .ld-c-edge, .ld-c-kelly, .ld-c-fair, .ld-c-units { white-space: nowrap; font: 600 15.5px/1.25 var(--f-label); letter-spacing: .02em; }
.ld-c-line, .ld-c-kelly, .ld-c-fair { color: var(--muted); }
.ld-c-edge, .ld-c-kelly, .ld-c-fair { width: 1%; }
.ld-c-edge { color: var(--text); }
.ld-price { font-weight: 700; color: var(--text); }
.ld-c-units { font-weight: 700; color: var(--text); }
.ld-c-units.neg { color: var(--muted); }
.ld-c-units.pos { color: var(--win); }
.ld-c-score { width: 1%; }
.ld-c-score .dial { vertical-align: middle; }
.ld-c-result { width: 1%; white-space: nowrap; }

/* ---------- 5. pager ---------- */
.ld-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.ld-pager p { margin: 0; min-width: 0; text-align: center; font: 500 13.5px/1.3 var(--f-label); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.ld-step[disabled] { opacity: .4; cursor: default; filter: none; }

/* ---------- 6. record and record by score ---------- */
.ld-dvc { width: 30%; min-width: 96px; }
.ld-dv { min-width: 84px; }
.ld-fill { transform-origin: left center; }
.ld-fill.is-neg { transform-origin: right center; }
@media (max-width: 520px), (min-width: 861px) and (max-width: 1099px) {
  .ld-dvc { display: none; }
}

/* ---------- 7. weeks ---------- */
.ld-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.ld-week { display: grid; gap: 12px; min-width: 0; padding: 16px 18px 18px; }
.ld-week.is-open { grid-column: 1 / -1; }
.ld-week-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.ld-week-head h3 { margin: 0; font: 800 24px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.ld-week-head p { margin: 0; font: 500 12.5px/1.3 var(--f-label); letter-spacing: .04em; color: var(--muted); }
.ld-wk { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ld-wk > div:last-child { grid-column: auto; }
.ld-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(var(--text-a), .06); transform-origin: left center; }
.ld-bar > i { flex: 0 0 calc(var(--p) * 1%); }
.ld-bar > .is-w { background: var(--win); }
.ld-bar > .is-l { background: var(--loss); }
.ld-bar > .is-p { background: var(--dim); }
.ld-ext { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ld-ext li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.ld-ext li > i { font: 600 11px/1.3 var(--f-label); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--dim); }
.ld-ext li > span { min-width: 0; }
.ld-ext li > b { font: 700 14.5px/1.2 var(--f-label); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.ld-ext li > b.pos { color: var(--win); }
.ld-ext li > b.neg { color: var(--muted); }
.ld-toggle { justify-self: start; }

/* ---------- 8. calendar ---------- */
.ld-cal { position: relative; }
.ld-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; font: 500 12.5px/1.3 var(--f-label); letter-spacing: .04em; color: var(--muted); }
.ld-scale { display: inline-flex; gap: 3px; }
.ld-scale > i { width: 14px; height: 14px; border-radius: 4px; background: rgba(var(--text-a), .1); }
.ld-scale > .is-down { background: rgba(var(--loss-a), calc(var(--h) * .45)); }
.ld-scale > .is-up { background: rgba(var(--win-a), calc(var(--h) * .45)); }
.ld-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.ld-month { min-width: 0; padding: 14px 16px 16px; }
.ld-month-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ld-month-head h3 { margin: 0; font: 800 24px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.ld-month-head p { margin: 0; font: 700 14.5px/1.2 var(--f-label); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--muted); }
.ld-month-head p.pos { color: var(--win); }
.ld-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ld-dow { text-align: center; font: 600 10.5px/1.7 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ld-day { position: relative; display: grid; align-content: center; justify-items: center; gap: 2px; width: 100%; min-height: 40px; aspect-ratio: 1; border-radius: 8px; border: 1px solid transparent; background: rgba(var(--text-a), .03); font: 600 13px/1 var(--f-label); font-variant-numeric: tabular-nums; color: var(--dim); text-align: center; }
.ld-day.is-blank { background: none; }
.ld-day > b { font: 700 10.5px/1 var(--f-label); letter-spacing: .01em; }
button.ld-day { color: var(--text); }
button.ld-day::after { content: ""; position: absolute; inset: -3px; }
.ld-day.is-flat { background: rgba(var(--text-a), .1); }
.ld-day.is-up { background: rgba(var(--win-a), calc(var(--h) * .45)); }
.ld-day.is-down { background: rgba(var(--loss-a), calc(var(--h) * .45)); }
.ld-day.is-open { background: none; border: 1px dashed var(--line-2); color: var(--muted); }
.ld-day.is-on { border: 1px solid var(--text); }
@media (hover: hover) and (pointer: fine) {
  button.ld-day { transition: transform .15s var(--ease); }
  button.ld-day:hover { transform: scale(1.08); z-index: 1; }
}
.ld-tip { position: absolute; left: 0; top: 0; z-index: 10; display: grid; gap: 2px; width: max-content; max-width: 240px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-2); box-shadow: 0 18px 36px -18px rgba(var(--shadow-a), .95); font-size: 13.5px; line-height: 1.4; color: var(--muted); pointer-events: none; }
.ld-tip > b { font: 700 13px/1.3 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.ld-tip strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 9. phone ---------- */
/* One column: the record panels drop under the ledger so the picks come first. */
@media (max-width: 860px) {
  .ld-top { order: 2; margin: 24px 0 0; }
}
/* Below 1200px the Edge, Kelly and Fair columns do not fit beside the pick.
   Their cells fold into one line under it, and the Sort field shows so the
   ledger can still be put in order of edge. */
@media (max-width: 1199px) {
  .ld-sortf { display: grid; }
  .ld-table .ld-x { display: none; }
  .ld-nums { display: flex; }
}
/* Each ledger row becomes a card, so nothing scrolls sideways. The Market and
   Line cells fold into the pick line; the header row stays in the page for
   screen readers and comes back when one of its sort buttons takes focus. */
@media (max-width: 720px) {
  .ld-view { min-height: 44px; padding-inline: 16px; }
  .ld-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px 14px; }
  .ld-clear { grid-column: 1 / -1; }
  .ld-wrap { overflow-x: visible; padding: 0 14px; }
  .ld-inner { padding: 0; }
  .ld-table, .ld-table tbody { display: block; }
  .ld-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ld-table thead:focus-within { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .ld-table thead tr { display: flex; flex-wrap: wrap; gap: 0 14px; padding: 6px 0; }
  .ld-table thead th { display: block; padding: 0; }
  .ld-table tbody tr {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "date  date  result"
      "score pick  units"
      "score pick  odds";
    gap: 4px 12px;
    align-items: start;
    padding: 12px 0 13px;
    border-top: 1px solid var(--line);
  }
  .ld-table tbody tr:first-child { border-top: 0; }
  .ld-table tbody tr > td { display: block; padding: 0; border-top: 0; text-align: left; }
  .ld-table tbody tr > .ld-c-market, .ld-table tbody tr > .ld-c-line { display: none; }
  .ld-c-date { grid-area: date; width: auto; align-self: center; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
  .ld-c-result { grid-area: result; width: auto; justify-self: end; }
  .ld-c-score { grid-area: score; width: auto; }
  .ld-c-pick { grid-area: pick; }
  .ld-table tbody tr > .ld-c-units { grid-area: units; justify-self: end; text-align: right; }
  .ld-table tbody tr > .ld-c-odds { grid-area: odds; justify-self: end; text-align: right; }
  .ld-bet { display: block; font-size: 14px; color: var(--text); }
  /* Four figures do not fit on one line of a card, so they sit two by two. */
  .ld-nums { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 1px 14px; }
  .ld-moved { display: none; }
  .ld-pager p > span { display: none; }
  .ld-week { padding: 14px 14px 16px; }
  .ld-month { padding: 12px 12px 14px; }
}
@media (min-width: 721px) and (max-width: 979px) {
  .ld-moved { display: none; }
  .ld-wrap { padding-inline: 14px; }
  .ld-inner { padding-inline: 0; }
  .ld-table th, .ld-table td { padding-inline: 7px; }
}

/* ---------- 10. motion ---------- */
/* Position, scale and opacity only. html.anim is set by the page script when
   motion is allowed; without it everything is drawn settled. */
@keyframes ld-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes ld-fade { from { opacity: 0; } }
@keyframes ld-pop { from { opacity: 0; transform: translateY(4px) scale(.97); } }
@keyframes ld-grow { from { transform: scaleX(0); } }
html.anim .ld-in > * { animation: ld-rise .28s var(--ease) both; animation-delay: calc(var(--i, 0) * 12ms); }
html.anim .ld-tip { animation: ld-pop .15s var(--ease) both; }
html.anim .ld-bar { animation: ld-grow .5s var(--ease) both; }
html.anim .ld-bands:not(.run):not(.done) .ld-fill { transform: scaleX(0); }
html.anim .ld-bands.run .ld-fill { animation: ld-grow .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }