/* Topic progress view (progress.js). Uses the timeline.css variables, so light and dark follow data-theme. */

.tp-tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 4px 0 14px; border-radius: 11px; background: var(--raised); }
.tp-tabs button { padding: 6px 18px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-size: 14px; font-weight: 550; }
.tp-tabs button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.tp { --air: #d9480f; --gov: #2b8a3e; --dd: #7048e8; --pub: var(--accent); }
:root[data-theme="dark"] .tp { --air: #ff8a4c; --gov: #51cf66; --dd: #b197fc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tp { --air: #ff8a4c; --gov: #51cf66; --dd: #b197fc; } }

.tp-toolbar {
  position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--glass); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.tp-toolbar select { height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 13px; }
.tp-toolbar .tl-pill { height: 32px; font-size: 13px; }
.tp-toolbar .tl-pill.is-on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tp-custom { display: inline-flex; gap: 6px; }
.tp-spacer { flex: 1; }
.tp-live { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; }
.tp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.tp-live.is-active { color: var(--ok); }
.tp-live.is-active .tp-live-dot { background: var(--ok); animation: tp-pulse 2s ease-in-out infinite; }
@keyframes tp-pulse { 50% { opacity: 0.35; } }

.tp-since {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--radius); background: var(--accent-soft); color: var(--text);
}
.tp-since ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; flex: 1; }
.tp-since li { padding: 2px 9px; border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 550; }
.tp-since-when { color: var(--text-2); font-size: 12px; }

.tp-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.tp-card { margin: 0 0 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.tp-card h3, .tp-section-h { margin: 0; font: 650 17px/1.25 var(--font-display); letter-spacing: -0.015em; }
.tp-section-h { margin: 22px 0 10px; font-size: 20px; }
.tp-card h4 { margin: 12px 0 6px; color: var(--text-2); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; }
.tp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tp-muted { color: var(--text-3); font-size: 12.5px; }

/* Story so far */
.tp-slider { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.tp-slider input { flex: 1; accent-color: var(--accent); }
.tp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tp-fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--line); }
.tp-fact-label { color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: capitalize; }
.tp-fact-value { font: 700 22px/1.15 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tp-fact-value.is-long { font-size: 15px; line-height: 1.3; font-weight: 650; }
.tp-fact-history { color: var(--warn); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-fact .tp-cite { align-self: flex-start; margin-top: 4px; }
.tp-story-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.tp-milestones { margin: 0; padding-left: 18px; font-size: 13.5px; }
.tp-milestones li { margin: 4px 0; }
.tp-milestones time { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.tp-questions { margin: 0; padding-left: 18px; font-size: 13.5px; }
.tp-version-note { margin: 10px 0 0; }

.tp-cite {
  display: inline-flex; align-items: center; padding: 1px 8px; margin: 1px 2px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--text-2); font-size: 11.5px; font-weight: 550; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.tp-cite:hover { background: var(--hover); color: var(--text); }
.tp-cite.is-first { border-color: var(--ok); color: var(--ok); }

/* Ask */
.tp-ask { display: flex; gap: 8px; margin: 10px 0 8px; }
.tp-ask input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--sunken); outline: none; }
.tp-ask input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tp-answer p { margin: 6px 0; }
.tp-sources { margin: 6px 0; padding-left: 0; list-style: none; }

/* Heatmap */
.tp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.tp-heat { display: grid; gap: 3px; min-width: 760px; }
.tp-heat-row { display: grid; grid-template-columns: 112px repeat(24, minmax(22px, 1fr)) 96px; gap: 3px; align-items: center; }
.tp-heat-day { color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-heat-h { color: var(--text-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.tp-heat-axis .tp-heat-total { color: var(--text-3); font-size: 10.5px; }
.tp-cell {
  height: 26px; min-width: 0; padding: 0; border: 0; border-radius: 5px; font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--accent) var(--v, 0%), var(--sunken)); color: var(--on-accent);
}
.tp-cell.is-empty { background: var(--sunken); cursor: default; }
.tp-cell:not(.is-empty):hover { outline: 2px solid var(--text); outline-offset: 1px; }
.tp-cell.is-now { box-shadow: inset 0 0 0 2px var(--ok); }
.tp-cell.is-selected { outline: 2px solid var(--warn); outline-offset: 1px; }
.tp-heat-total { display: flex; align-items: center; gap: 6px; }
.tp-bar { display: block; height: 10px; width: var(--w, 0%); max-width: 64px; min-width: 2px; border-radius: 3px; background: var(--accent); opacity: 0.6; }
.tp-bar-n { color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.tp-peak { margin: 0 0 4px 115px; color: var(--text-2); font-size: 12.5px; }
.tp-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--text-3); font-size: 11px; }
.tp-legend .tp-cell { width: 16px; height: 12px; display: inline-block; }
.tp-legend .tp-cell.is-now { margin-left: 10px; background: var(--sunken); }

/* Swimlanes */
.tp-lanes { display: grid; gap: 2px; }
.tp-lane { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 24px; }
.tp-lane-name { color: var(--text); font-size: 12.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-track { position: relative; height: 22px; border-bottom: 1px dashed var(--line); }
.tp-lane-axis .tp-track { height: 18px; border-bottom: 1px solid var(--line-strong); }
.tp-tick { position: absolute; bottom: 2px; transform: translateX(-50%); color: var(--text-3); font-size: 10.5px; white-space: nowrap; }
.tp-tick.is-day { color: var(--text); font-weight: 650; }
.tp-lane-times { display: none; color: var(--text-2); font-size: 12px; }
.tp-lane-group { margin: 10px 0 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.tp-lane-group.g-air { color: var(--air); } .tp-lane-group.g-government { color: var(--gov); }
.tp-lane-group.g-dd { color: var(--dd); } .tp-lane-group.g-publisher { color: var(--pub); }
.tp-dot {
  position: absolute; top: 50%; width: 11px; height: 11px; padding: 0; transform: translate(-50%, -50%);
  border: 2px solid var(--surface); border-radius: 50%; background: var(--pub);
}
.tp-dot.g-air { background: var(--air); } .tp-dot.g-government { background: var(--gov); } .tp-dot.g-dd { background: var(--dd); }
.tp-dot.is-first { width: 15px; height: 15px; box-shadow: 0 0 0 2px var(--ok); z-index: 1; }
.tp-dot:hover, .tp-dot:focus-visible { z-index: 2; transform: translate(-50%, -50%) scale(1.35); }
.tp-firsts { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tp-firsts li { padding: 8px 10px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--line); font-size: 13.5px; }
.tp-follow { margin: 4px 0 0; }
.tp-more { margin: 10px auto 0; display: flex; }

/* Day and hour progression */
.tp-day { margin: 0 0 18px; }
.tp-day-head { position: sticky; top: var(--topnav-h); z-index: 3; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.tp-day-head h3 { margin: 0; font: 650 18px/1.2 var(--font-display); }
.tp-today { margin: 10px 0; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--sunken); border: 1px solid var(--line); }
.tp-today h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; }
.tp-lines { margin: 0; padding-left: 18px; font-size: 14px; }
.tp-lines li { margin: 4px 0; }
.tp-highlights { margin: 10px 0 0; padding-left: 20px; font-size: 14px; }
.tp-highlights li { margin: 0 0 8px; }
.tp-highlights blockquote { margin: 4px 0 0; padding: 4px 10px; border-left: 3px solid var(--accent); color: var(--text-2); font-size: 13px; }
.tp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tp-pill-update { padding: 2px 10px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tp-hour { position: relative; margin: 0 0 12px 0; padding-left: 18px; border-left: 2px solid var(--line-strong); }
.tp-hour-head { display: flex; gap: 10px; align-items: baseline; margin: 0 0 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.tp-hour-head::before { content: ""; position: absolute; left: -7px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.tp-new-hour { margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); }
.tp-new-label { margin: 0 0 2px; color: var(--accent); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.tp-items { display: grid; gap: 6px; }
.tp-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--pub); border-radius: 14px; background: var(--surface); transition: box-shadow 0.2s;
}
.tp-item.g-air { border-left-color: var(--air); } .tp-item.g-government { border-left-color: var(--gov); } .tp-item.g-dd { border-left-color: var(--dd); }
.tp-item.is-flash { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
.tp-item h5 { margin: 2px 0 4px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.tp-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; color: var(--text-2); font-size: 12px; }
.tp-item-meta strong { color: var(--text); }
.tp-item-meta time { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text); }
.tp-body { margin: 0; font-size: 14px; white-space: pre-line; }
.tp-body.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tp-points { margin: 4px 0; padding-left: 18px; font-size: 13.5px; }
.tp-text q { display: block; margin-top: 4px; color: var(--text-2); font-size: 13.5px; }
.tp-rights { margin: 4px 0 0; color: var(--text-3); font-size: 11px; }
.tp-link { padding: 0; border: 0; background: none; color: var(--accent); font-size: 12.5px; }

@media (max-width: 860px) {
  .tp-grid, .tp-story-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .tp-toolbar { position: static; }
  .tp-day-head { top: var(--topnav-h); }
  .tp-lane { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .tp-lane .tp-track, .tp-lane-axis { display: none; }
  .tp-lane-times { display: block; }
  .tp-peak { margin-left: 0; }
}
@media print {
  .tp-toolbar, .tp-ask, .tp-tabs, .tp-more, .tp-slider { display: none !important; }
  .tp-body.is-clamped { -webkit-line-clamp: unset; display: block; }
}