/* progress-split.css -- OWNER: the Progress screen (Graph / History in the
 * public ledger; Overview / History / Materials in the review lab).
 *
 * Loaded by index.html after app.css. Everything for the three-way split and
 * the Show more folds belongs in this file.
 *
 * House rules that still apply here:
 *   - no url(), no raw hex (colour values come from styles/tokens.css)
 *   - three concept blocks at most on the first screen
 *   - lists open at three rows and grow through Show more
 *   - honour prefers-reduced-motion
 */

/* ===================================================================
   The sub-view switcher
   -------------------------------------------------------------------
   app.css already gives .progress-tabs its padding, shared with
   .plan-tabs. What is added here is stickiness: History can run to nine
   rows plus three filters, and the way back to Overview must not be a
   scroll to the top. The header is outside .app-main, so top:0 is the
   top of the scrolling area and nothing overlaps it.
   =================================================================== */

.progress-tabs {
  position: sticky;
  top: 0;
  /* Above the rows it scrolls over, below .primary-bar (z-index 10) and
     below the sheet layer, both of which must stay in front of it. */
  z-index: 6;
  background: var(--paper);
  border-bottom: var(--rule) solid var(--line);
}

/* ===================================================================
   Production graph -- the V1 Week / Day bars inside the V2 record
   -------------------------------------------------------------------
   The first segmented control changes the kind of record. This smaller
   one changes only the graph's calendar range. The bars component is the
   same one used by the review-lab Overview, so chart colour, zero marks,
   target size and horizontal containment stay inherited.
   =================================================================== */

.progress-chart-range {
  max-width: 190px;
  margin-bottom: 18px;
}

.progress-chart-range .segmented {
  padding: 2px;
  border: var(--rule) solid var(--line);
  border-radius: 999px;
  background: var(--paper-deep);
}

.progress-chart-range .segment {
  min-height: 44px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.progress-chart-range .segment.is-selected {
  background: var(--green-soft);
  color: var(--green);
  box-shadow: none;
}

/* Graph / History is the page-level choice, so it reads as tabs rather than
   another large grey switch. The range control above is deliberately smaller
   to keep the two levels from competing. */
.progress-remote-tabs {
  padding: 0 var(--gutter);
}

.progress-remote-tabs .segmented {
  gap: 20px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.progress-remote-tabs .segment {
  position: relative;
  min-height: 52px;
  border-radius: 0;
  color: var(--muted);
  font-weight: 600;
  box-shadow: none;
}

.progress-remote-tabs .segment::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 48px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: transparent;
  content: '';
  transform: translateX(-50%);
}

.progress-remote-tabs .segment.is-selected {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.progress-remote-tabs .segment.is-selected::after {
  background: var(--green);
}

.progress-record-bars.has-time-axis {
  --progress-chart-height: clamp(144px, 18vh, 160px);
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  overflow: visible;
}

.progress-bars-axis {
  position: relative;
  height: var(--progress-chart-height);
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.progress-bars-axis-label {
  position: absolute;
  right: 9px;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(50%);
}

.progress-bars-axis-label.is-zero { transform: none; }

.progress-bars-scroll {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.progress-bars-scroll::-webkit-scrollbar { display: none; }

.progress-record-bars .bars-plot {
  display: block;
  width: 100%;
  min-width: min-content;
  height: auto;
  padding-top: 0;
}

.progress-bars-series,
.progress-bars-labels {
  display: flex;
  gap: 8px;
  min-width: min-content;
}

/* Seven 44px day targets need 308px before any spacing. Until the regular
   50px axis plus six 8px gaps fit, remove only those decorative gaps and let
   the axis use the same 44px rhythm as a tap target. Eight Week columns keep
   their gaps and horizontal scroll, preserving longer-range readability. */
@media (max-width: 439px) {
  .progress-record-bars.is-day-range.has-time-axis {
    grid-template-columns: var(--tap) minmax(0, 1fr);
  }

  .progress-record-bars.is-day-range .progress-bars-series,
  .progress-record-bars.is-day-range .progress-bars-labels {
    gap: 0;
  }
}

/* Below 385px the section gutters leave under 308px beside the axis. Expand
   just the chart back to the safe viewport edges; its range control and
   selected-day detail retain the normal reading gutter. */
@media (max-width: 384px) {
  .progress-record-bars.is-day-range.has-time-axis {
    width: calc(100% + var(--gutter) + var(--gutter));
    margin-right: calc(0px - var(--gutter));
    margin-left: calc(0px - var(--gutter));
  }
}

.progress-bars-series {
  position: relative;
  align-items: flex-end;
  height: var(--progress-chart-height);
}

.progress-bars-series .bar-col {
  z-index: 1;
  height: 100%;
}

.progress-bars-labels {
  align-items: flex-start;
}

.progress-bar-label-cell {
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  min-width: var(--tap);
}

.progress-record-bars .bar-label {
  white-space: pre-line;
  text-align: center;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.progress-bars-gridline {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 0;
  border-top: var(--rule) solid var(--line);
  pointer-events: none;
}

.progress-record-bars .bar-fill {
  max-width: 30px;
  border: var(--rule) solid var(--green-line);
  border-bottom: 0;
  border-radius: 6px 6px 2px 2px;
  background: color-mix(in srgb, var(--green) 76%, var(--paper));
}

.progress-record-bars .bar-col.is-current .bar-fill {
  background: var(--green);
}

.progress-bar-selection-marker {
  position: absolute;
  top: 5px;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  border-top: 8px solid var(--green);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  pointer-events: none;
  transform: translateX(-50%);
}

/* The full-height hit target must not draw a second selection line under the
   chart. Keyboard focus gets the same fixed marker before activation, then
   the real selected marker takes over after the button is pressed. */
.progress-record-bars .bar-hit:focus-visible {
  outline: 0;
  box-shadow: none;
}

.progress-bars-series .bar-col:has(.bar-hit:focus-visible):not(.is-selected)::after {
  position: absolute;
  top: 5px;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  border-top: 8px solid var(--ink);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: '';
  pointer-events: none;
  transform: translateX(-50%);
}

.progress-chart-picked {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  margin-top: 12px;
  padding: 9px 12px;
  border: var(--rule) solid var(--green-line);
  border-radius: 12px;
  background: var(--green-soft);
}

.progress-chart-picked-icon { color: var(--green); }

.progress-chart-picked-label {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-chart-picked-value {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.progress-chart-picked-details {
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: var(--rule) solid var(--green-line);
}

.progress-chart-picked-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.progress-chart-picked-detail + .progress-chart-picked-detail {
  border-top: var(--rule) solid var(--green-line);
}

.progress-chart-picked-detail-main { min-width: 0; }

.progress-chart-picked-material {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-chart-picked-movement,
.progress-chart-picked-more {
  color: var(--muted);
  font-size: 14px;
}

.progress-chart-picked-duration {
  color: var(--ink-soft);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.progress-chart-picked-more {
  margin-top: 5px;
}

.progress-chart-section > .state-block {
  padding-right: 0;
  padding-left: 0;
}

/* A sticky bar hides whatever a programmatic scroll lands under it. The
   undo band is scrolled into view from a sheet that sits far down the
   page, and keyboard focus walks the blocks the same way, so both keep a
   switcher's height of clearance. */
#panel-progress > .section,
[data-refocus="undo-band"] { scroll-margin-top: 76px; }

/* ===================================================================
   Overview -- the quiet milestone line
   -------------------------------------------------------------------
   One line, not a block: a milestone does not help anyone sit down, so
   it rides along under the hours instead of owning a section. The
   "Noted" action only exists while a milestone is unacknowledged, so
   the row has to survive having exactly one child.
   =================================================================== */

.progress-milestone {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.progress-milestone > .note { margin: 0; min-width: 0; }
.progress-milestone > .text-action { flex: 0 0 auto; }

/* ===================================================================
   History -- the three filters
   -------------------------------------------------------------------
   Month and type are short and sit side by side; the material names are
   long, so that one takes the full width underneath. Below 340px of
   content the pair stacks rather than squeezing two selects into a
   space neither can show a value in.
   =================================================================== */

.progress-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin-bottom: 12px;
}

/* .field carries a 16px bottom margin for stacked forms; inside a grid
   the gap already does that work. */
.progress-filters > .field {
  margin-bottom: 0;
  min-width: 0;
}

.progress-filters > .field-wide { grid-column: 1 / -1; }

@media (max-width: 359px) {
  .progress-filters { grid-template-columns: 1fr; }
}

/* ===================================================================
   Production ledger -- dated groups with scannable session facts
   -------------------------------------------------------------------
   The API returns a flat 14-day list. The view groups it into days, so a
   reader can compare each day's total before reading the individual time,
   material, duration and source beneath it.
   =================================================================== */

.progress-ledger-section > .section-note { margin-bottom: 0; }

.progress-ledger-section > .section-head .btn-icon {
  flex: 0 0 auto;
}

.progress-heatmap-panel {
  padding: 14px var(--gutter) 16px;
  border-top: var(--rule) solid var(--line);
  background: var(--paper);
}

.progress-heatmap-note {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.progress-heatmap-grid {
  width: min(100%, 340px);
  gap: 4px;
}

.progress-heatmap-grid .heat-cell.is-future { opacity: 0.32; }

.progress-heatmap-grid .heat-cell.is-today {
  box-shadow: inset 0 0 0 1px var(--ink-soft);
}

.progress-heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
}

.progress-heatmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.progress-heatmap-legend-item .heat-cell {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

.progress-ledger-day {
  border-top: var(--rule) solid var(--line);
}

.progress-ledger-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--gutter) 7px;
  background: var(--ink-faint);
}

.progress-ledger-day-label {
  min-width: 0;
  font-size: 14px;
  color: var(--ink);
}

.progress-ledger-day-total,
.progress-ledger-duration,
.progress-ledger-clock {
  font-variant-numeric: tabular-nums;
}

.progress-ledger-day-total {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--ink-soft);
}

.progress-ledger-session {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: var(--tap);
  padding: 9px var(--gutter);
  border-bottom: var(--rule) solid var(--line);
}

.progress-ledger-session:last-child { border-bottom: 0; }

.progress-ledger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}

.progress-ledger-entry { min-width: 0; }

.progress-ledger-material {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-ledger-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.progress-ledger-clock + .progress-ledger-source::before {
  margin-right: 7px;
  content: '\00b7';
}

.progress-ledger-duration {
  align-self: center;
  padding-left: 6px;
  font-size: 14px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ===================================================================
   Reduced motion
   -------------------------------------------------------------------
   Nothing in this file animates, and the sticky switcher is position,
   not movement. The guard is here so that a later addition inherits the
   rule instead of having to remember it -- and it is written twice
   because ?reduced=1 sets the body class while the OS setting comes
   through the media query.
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .progress-tabs .segment,
  .progress-chart-range .segment,
  .progress-record-bars .bar-fill,
  .progress-ledger-section .btn-icon,
  .progress-filters .input { transition: none; }
}

body.reduced-motion .progress-tabs .segment,
body.reduced-motion .progress-chart-range .segment,
body.reduced-motion .progress-record-bars .bar-fill,
body.reduced-motion .progress-ledger-section .btn-icon,
body.reduced-motion .progress-filters .input { transition: none; }