/* A run of shades that share a drive.
 *
 * Reads as one thing with parts, rather than as a table of loose rows: the
 * panels are numbered in the order they hang and the joints sit between them,
 * so the shape of the run is visible before any number is read.
 *
 * Loaded after 20-pricing.css deliberately — the file numbers ARE the cascade
 * here, and a run appears on the quote page alongside the price breakdown.
 */

.run-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.run-head h2 { margin: 0; }

.run-shape {
  margin: 3px 0 0;
  font-size: 13px;
}

.run-measure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.run-measure strong { font-size: 16px; }

.run-refusal ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* The panels. A list, because the order is the meaning. */
.panels {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.panel {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.panel:first-child { border-top: 0; }

.panel-number {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.panel-what { display: flex; align-items: center; gap: 7px; min-width: 0; }
.panel-price { min-width: 90px; }

/* The joint between two panels. Indented under the panel it follows and drawn
 * with a rule, so a run reads as a run rather than as a list with notes in it. */
.joint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 2px 40px;
  font-size: 12.5px;
}

.joint-mark {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  margin-top: -7px;
}

.run-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 2px solid var(--line);
  font-size: 14px;
}

.run-shared { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.run-foot .num { font-size: 16px; font-weight: 500; }

@media (max-width: 720px) {
  .panel {
    grid-template-columns: 24px minmax(0, 1fr);
    row-gap: 6px;
  }

  /* The size, price and actions drop under the name rather than being squeezed
   * into columns nobody can read on a phone on a job site. */
  .panel-size,
  .panel-price { grid-column: 2; }

  .panel-price { text-align: left; }
}

/* A run on the customer's side of the fence.
 *
 * Less than the staff view carries — no joints, no angles, no editing — but the
 * grouping and the drive charge are both there, because a subtotal that does
 * not equal the rows above it is a phone call. */
.pub-group td,
.accept-group td {
  padding-top: 14px;
  border-bottom: 0;
  font-size: 14px;
}

.pub-group:first-child td,
.accept-group:first-child td { padding-top: 0; }

/* Loading somebody else's system into this one.
 *
 * The tally is the first thing on the page because the first question anybody
 * has is "what is already in here", and five counts answer it faster than five
 * paragraphs. */
.import-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.import-tally-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.import-tally-number {
  font-size: 22px;
  line-height: 1.1;
}

.import-notes {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
}

.import-notes li { margin: 3px 0; }