/* Reports > Pipeline: the funnel of the growth desk. The other reports are in lists.css.
   One hue (the ink) for every bar, and the count at the end of each bar. The bars grow from one baseline, square at the
   start and round at the end. Ready is a count of today, not of the last 90 days, so its bar is an outline. */

/* ----- the funnel ----- */
.rp-funnel { padding: 6px 20px; }
.rp-steps { margin: 0; padding: 0; list-style: none; }
.rp-step { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; column-gap: 20px; min-height: 56px; padding: 10px 0;
  border-bottom: 1px solid var(--line); }
.rp-step:last-child { border-bottom: 0; }
.rp-step-name { min-width: 0; }
.rp-step-name b { color: var(--ink); font: 500 var(--t-md) var(--sans); }
.rp-step-name .sub { font-variant-numeric: tabular-nums; }
.rp-step-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-step-bar i { flex: none; width: 2px; height: 16px; border-radius: 0 4px 4px 0; background: var(--ink); }
.rp-step.is-zero .rp-step-bar i { border-radius: 0; background: var(--line-2); }
.rp-step.is-now:not(.is-zero) .rp-step-bar i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.rp-step-n { color: var(--ink); font: 600 var(--t-md) var(--sans); font-variant-numeric: tabular-nums; }
.rp-step.is-zero .rp-step-n { color: var(--muted); font-weight: 500; }
.rp-step-names { grid-column: 2; margin-top: 6px; color: var(--muted); font: 400 var(--t-sm) var(--sans); }
/* A name is a link to its file: quieter than a heading, and underlined on hover. */
.rp-step-names .link, .rp-lane .sub .link { color: var(--ink-2); }
.rp-funnel .empty { margin: 0; padding: 28px 24px; }
.rp-funnel + .card-note { margin-top: 12px; }

/* ----- the side: the target and the lanes now ----- */
.rp-target .stands-text { color: var(--ink-2); }
.rp-target .rp-num { margin-top: 14px; }
.rp-of { margin-left: 4px; color: var(--muted); font: 400 var(--t-md) var(--sans); letter-spacing: 0; }
.rp-target .meter { margin-top: 10px; }
.rp-target-sub { margin-top: 10px; font-variant-numeric: tabular-nums; }
.rp-lane { justify-content: space-between; align-items: flex-start; }
.rp-lane b { font-weight: 500; }
.rp-also { display: flex; flex-wrap: wrap; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.rp-also .link { color: var(--muted); }
.rp-also .link:first-child { margin-right: auto; color: var(--ink); font-weight: 500; }

/* A narrow column: the name and the count on one line, the bar under them. A step with none is one line. */
@container (max-width: 520px) {
  .rp-funnel { padding: 2px 16px; }
  .rp-step { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; min-height: 52px; }
  .rp-step-bar { display: contents; }
  .rp-step-name { grid-row: 1; grid-column: 1; align-self: start; }
  .rp-step-name b { display: block; }
  .rp-step-n { grid-row: 1; grid-column: 2; align-self: start; line-height: 20px; }
  .rp-step-bar i { grid-row: 2; grid-column: 1 / -1; }
  .rp-step.is-zero .rp-step-bar i { display: none; }
  .rp-step-names { grid-row: 3; grid-column: 1 / -1; margin-top: 0; }
}
@media (pointer: coarse) {
  .rp-also .link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 759px) {
  .rp-also { flex-direction: column; align-items: flex-start; gap: 0; }
  .rp-also .link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ----- Scorecard: the 12 measures of the 100-day plan (js/reports.js scorecardPage) -----
   One row for each measure: the name and where the number comes from at the left, the number and its target at the right.
   A value that a founder types opens a field in place of the number. */
.sc-rows { padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.sc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-height: 64px; padding: 12px 0;
  border-bottom: 1px solid var(--line); }
.sc-row:last-child { border-bottom: 0; }
.sc-what { min-width: 0; }
.sc-what b { display: block; color: var(--ink); font: 500 var(--t-md) var(--sans); }
.sc-what .sub { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sc-edit { margin-top: 4px; font: 500 var(--t-sm) var(--sans); }
.sc-val { text-align: right; }
.sc-val .sub { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-num { display: block; color: var(--ink); font: 600 20px/26px var(--sans); font-variant-numeric: tabular-nums; }
.sc-num.is-none { color: var(--muted); font-weight: 500; font-size: var(--t-md); }
.sc-row .meter { grid-column: 1 / -1; margin-top: 10px; }
.sc-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.sc-form .input { width: 150px; }
.sc-start { justify-content: flex-start; margin-top: 12px; }
.sc-hours-row { justify-content: space-between; align-items: flex-start; gap: 12px; }
.sc-hours-row b { display: block; font-weight: 500; }
.sc-hours-row .sub { display: block; font-variant-numeric: tabular-nums; }
.sc-actions { display: flex; align-items: center; gap: 12px; }
/* The error of a typed value: on its own line under the field, and no space while there is none. */
.sc-form .sc-error, .sc-hours-form .sc-error { flex-basis: 100%; min-height: 0; margin-top: 0; text-align: inherit; }
.sc-error:empty { display: none; }
.sc-hours-edit { flex-direction: column; align-items: stretch; gap: 10px; }
.sc-hours-edit b { font-weight: 500; }
.sc-hours-form { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.sc-hours-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sc-hour { display: flex; flex-direction: column; gap: 4px; }
.sc-hour .input { width: 100%; }
@container (max-width: 520px) {
  .sc-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .sc-val { text-align: left; }
  .sc-form { justify-content: flex-start; }
}
@media (max-width: 759px) {
  .sc-edit, .sc-hours-row .link { display: inline-flex; align-items: center; min-height: 44px; }
}