/*
 * Pair history page (artboard 13). Owned by Task 6.
 * Template: templates/front/history.html.twig. Colours only via site.css custom properties.
 */

.hist-intro{margin-top:10px;font-size:16px;line-height:24px;color:var(--ink3);max-width:72ch}

/* Tab-like bar: "Live forecasts" + threshold filter (JS only). */
.hist-bar{margin-top:24px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;border-bottom:1px solid var(--line)}
.hist-tab{display:inline-flex;align-items:center;min-height:48px;font-size:16px;line-height:20px;font-weight:600;color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand)}
.hist-ctl{padding-bottom:12px}
.hist-ctl .legend{float:left;margin:0 10px 0 0;line-height:44px}
.hist-ctl .seg{display:inline-flex}
.hist-ctl .seg-o{min-width:52px;height:40px;padding:0 12px}

.hist-live{margin-top:24px}
.hist-note{font-size:14px;line-height:20px;color:var(--ink3);max-width:88ch}
.hist-tbl{margin-top:16px;position:relative}
.hist-foot{margin-top:10px;font-size:14px;line-height:20px;color:var(--ink2)}
.hist-empty{border:1px solid var(--line);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:8px;background:var(--s2)}

/* Rows: borders on top so hiding rows (data-th) never leaves a missing or doubled rule. */
.hist-tbl tbody th,.hist-tbl tbody td{border-bottom:0;border-top:1px solid var(--line);vertical-align:middle}
.hist-tbl tbody td a{font-weight:600}
.hist-tbl th,.hist-tbl td{padding-left:14px;padding-right:14px}
.hist-out{display:inline-block;min-width:11ch}

/* Without JS every threshold row is shown, grouped by target. */
html:not(.js) .hist [data-th]{display:table-row}
html:not(.js) .hist-tbl tbody+tbody tr:first-child>*{border-top:2px solid var(--line2)}

/* Related links */
.hist-more{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px}
.hist-more-c{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hist-more-c>a{font-weight:600}

@media (max-width:767px){
  .hist-bar{flex-direction:column;align-items:stretch;gap:0}
  .hist-tab{align-self:flex-start}
  .hist-ctl{padding:12px 0}
  .hist-ctl .legend{float:none;line-height:20px;margin-bottom:6px}
  .hist-ctl .seg{display:grid}
  .hist-tbl th,.hist-tbl td{padding-left:12px;padding-right:12px}
}