/* selling: styles for this area only. Tokens only (castomo-dashkit rule 4: no colour literal outside 00-tokens.css), logical properties only. */

/* ------------------------------------------------------------------ shared by Today, To do and Pipeline */

/* The kit's .table-card has no padding so the table can run edge to edge; its head gets the card's own inset instead. */
.sell-table-card > .card-head { padding-block: var(--card-pad) 0; padding-inline: var(--card-pad); }
.sell-table-card .card-head + .table-scroll { margin-block-start: var(--s2); }

/* A cell with a second, quieter line under the main text (a place kind, a domain). */
.sell-cell { display: grid; gap: 2px; min-inline-size: 0; }
.sell-sub { color: var(--ink-3); font-size: var(--t-1); }

/* The model's reasoning for a grade runs long; it wraps at a readable measure instead of widening the table. */
.sell-why { display: block; max-inline-size: 42ch; font-size: var(--t-1); }

/* "Showing only <workspace>": a quiet line, with its mark, above the lists it filtered. */
.sell-scope { display: flex; align-items: center; gap: var(--s0); }
.sell-scope .ci { --ci-size: 16px; flex: none; }

/* A table's action cell: buttons side by side and never wrapping into the next column. On a phone the cell is
   just its buttons; a "Actions" label before them says nothing the buttons do not. */
.sell-table-card td .btn-row { flex-wrap: nowrap; }
.sell-table-card td.shrink::before { display: none; }

/* ------------------------------------------------------------------ Today: first steps */

.sell-guide .meter { margin-block-end: var(--s2); }
.sell-loop-title { margin-block: var(--s3) var(--s1); font-size: var(--t1); color: var(--ink); }
.sell-loop > li { align-items: flex-start; }
.sell-loop .list-main { flex: 1 1 24ch; }
.sell-loop .btn { flex: none; }

/* ------------------------------------------------------------------ To do */

/* A card is marked by what it needs from the person with an edge in the tone, as well as by its badge and its words. */
.sell-action { border-inline-start: 4px solid var(--rule-strong); }
.sell-action[data-urgency="now"] { border-inline-start-color: var(--bad); }
.sell-action[data-urgency="soon"] { border-inline-start-color: var(--warn); }
.sell-action-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s0) var(--s1); }
.sell-action-head .card-title { flex: 1 1 24ch; min-inline-size: 0; }
.sell-action > p { margin-block: var(--s0) var(--s2); color: var(--ink-2); }

/* ------------------------------------------------------------------ Pipeline: the board */

/*
 * The stages are a row of equal tiles, one per stage, and on a phone a list of rows: the stage on the left, its
 * count on the right. Either way every item has a place, so no row ever ends in a hole (the kit's rule against
 * grids that depend on the width).
 */
.sell-board { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s1); }
.sell-board-closed { margin-block-start: var(--s2); }
.sell-col {
  flex: 1 1 0;
  min-inline-size: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  border-block-start: 3px solid var(--rule-strong);
}
.sell-col[data-kind="customer"] { border-block-start-color: var(--ok); }
.sell-col[data-empty] { opacity: .65; }
.sell-board-closed .sell-col { border-block-start-width: 2px; }
/* The two exits are as wide as one working stage (seven of them share the row), so the archive sits under the pipeline's first columns. */
.sell-board-closed .sell-col { flex: 0 0 calc((100% - 6 * var(--s1)) / 7); }
.sell-stage { color: var(--ink-2); font-weight: 650; font-size: var(--t-1); overflow-wrap: anywhere; }
.sell-count { color: var(--ink); font-size: var(--t3); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sell-board-closed .sell-count { font-size: var(--t2); }
.sell-tag { color: var(--ink-3); font-size: var(--t-1); }
.sell-age { color: var(--ink-3); font-size: var(--t-1); }

@media (max-width: 860px) {
  .sell-board { flex-direction: column; gap: var(--s0); }
  /* One inset on a phone: the tile is marked by a rule on its start edge and a tint, not by more padding. */
  .sell-col {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    padding-block: var(--s0);
    padding-inline: var(--s1) 0;
    border-block-start: 0;
    border-inline-start: 3px solid var(--rule-strong);
    border-radius: 0;
  }
  .sell-col[data-kind="customer"] { border-inline-start-color: var(--ok); }
  .sell-board-closed .sell-col { border-block-start-width: 0; flex: 0 0 auto; }
  .sell-count, .sell-board-closed .sell-count { grid-column: 2; grid-row: 1 / span 2; font-size: var(--t2); }
  .sell-tag, .sell-age { grid-column: 1; }
}

/* ------------------------------------------------------------------ Pipeline: the machine's health */

.sell-health > li { align-items: flex-start; flex-wrap: wrap; }
.sell-health .list-main { flex: 1 1 28ch; }
.sell-health-value { display: flex; align-items: center; gap: var(--s0); flex: none; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }