/* Ignite › People › Time (the office's My Time / All Time / Non-billable) and Reviews — 3.0. Their own looks only,
   built from tokens.css; the shared pieces (glass, strip, seg, chip, table.t → phone cards, pipe, flags, ih-tools,
   ih-sort, ih-who, ih-chips, ih-cardtop) come from components.css. Every class here starts with ppl-. public/people-page.js */
.ppl { display: flex; flex-direction: column; gap: var(--gap); }
.ppl h2.ppl-h2, .ppl .ppl-h2 { margin: 0; font-size: var(--fs-l); font-weight: var(--fw-x); }
.ppl > h2.ppl-h2 { margin: 6px 0 -6px; }   /* a section heading sits nearer what it introduces: 22 above, 10 below in the 16px column (it was 24) */
.ppl .lede.ppl-lede, .ppl .ppl-note { margin: 0; max-width: 92ch; }
.ppl-ok { color: var(--ok); } .ppl-bad { color: var(--bad); } .ppl-warn { color: var(--warn); }
.ppl .card { margin: 0; }

/* the tools row: dates, the person, the week — every box the same height, labels above */
.ppl-range { align-items: flex-end; }
.ppl-range .field { flex: 0 1 170px; min-width: 0; margin: 0; }   /* 2.x gives every .field a bottom margin; flex-end needs the box to end at its box */
.ppl-range .field.ppl-who, .ppl-range .field.ppl-week { flex: 0 1 260px; }
.ppl-range .input { width: 100%; }
.ppl-range .field .select-wrap { flex: none; }   /* .ih-row's select-wrap basis (190px) is a height inside a column field */
.ppl-step { display: inline-flex; gap: 6px; }
.ppl-xlsx { margin-left: auto; }

/* All Time: one glass panel per person; their weeks beside their name */
.ppl-phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding-bottom: 6px; }
.ppl-grid th, .ppl-grid td { vertical-align: top; }
.ppl-grid td.ppl-date, .ppl-grid td.r { white-space: nowrap; }
.ppl-grid .ppl-t { width: 108px; min-width: 0; padding: 0 8px; font-variant-numeric: tabular-nums; }
/* a trip time from the crew lead's row (w22lead): the same box, quieter — muted ink on a dashed edge */
.ppl-t.ppl-inh { color: var(--muted); border-style: dashed; }
.ppl-grid .ppl-lunch .select { width: 100%; min-width: 0; }
.ppl-grid td.ppl-lunchcell { min-width: 150px; }
.ppl-notes { margin-top: 6px; }
.ppl-notes .chip, .ppl-tcard .ih-chips .chip { display: inline-block; white-space: normal; height: auto; min-height: 18px; padding-block: 2px; line-height: 1.35; }
.ppl-grid tr.ppl-nb td { color: var(--muted); }
/* somebody the ticket is still waiting on, with no line on it yet (2.3.2): a warn tint and edge until the first time typed.
   background-image over the cell's own colour, because the Date column is sticky and --warn-bg is see-through in dark mode */
.ppl-grid tr.ppl-wait td { background-image: linear-gradient(var(--warn-bg), var(--warn-bg)); }
.ppl-grid tr.ppl-wait td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.ppl-tcard.ppl-wait { background-image: linear-gradient(var(--warn-bg), var(--warn-bg)); box-shadow: inset 4px 0 0 var(--warn); }
.ppl-grid tr.ppl-nb a, .ppl-cardlink { font-size: 12.5px; font-weight: var(--fw-semi); color: var(--accent-ink); }
.ppl-tcard { display: grid; gap: 10px; }
.ppl-cardh { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ppl-tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.ppl-tgrid .field.wide { grid-column: 1 / -1; }
.ppl-tgrid .input { width: 100%; }

/* Reviews: one reviewed crew day — the customer's part, operations' part; a poor day wears the warn edge */
.ppl-days { display: flex; flex-direction: column; gap: var(--gap); }   /* stacked day cards, the 16px rhythm (K4 measured 10) */
.ppl-day { display: grid; gap: 10px; border-left: 3px solid var(--ok-line); }
.ppl-day.warn { border-left-color: var(--warn); }
.ppl-part { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--hair); }
.ppl-part > .label { font-size: 11.5px; }
.ppl-part .chip .i { width: 12px; height: 12px; }
.ppl-said { margin: 0; font-size: 13px; color: var(--ink-2); font-style: italic; }
.ppl-crew { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; }
.ppl-stars { font-size: 15px; letter-spacing: 1px; color: var(--warn); white-space: nowrap; line-height: 1; }
.ppl-stars > span { color: var(--faint); }   /* the empty stars are outlines (☆) at the hint colour: 1.3:1 hairline grey read as no rating at all (S7, 10/23) */
.ppl-only { margin: 0; }
.ppl-unlinked p { margin: 0 0 8px; }
.ppl-namecell { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ppl .ppl-br { white-space: nowrap; }
.ppl-rvt th { white-space: normal; vertical-align: bottom; }   /* ten columns: a two-word head takes two lines, not the panel's width */
.ppl-rvt th .ih-sort { white-space: normal; text-align: inherit; }

/* Weekly Review: a person folds open to their days */
.ppl-fold > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 12px;
  padding: 12px 16px; min-height: var(--tap); border-radius: inherit; }
.ppl-fold > summary::-webkit-details-marker { display: none; }
.ppl-fold > summary > .i { color: var(--muted); transition: transform var(--t-std); }
.ppl-fold[open] > summary > .i { transform: rotate(180deg); }
.ppl-fold > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ppl-foldname { min-width: 0; }
.ppl-foldbody { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.ppl-foldbody > p { margin: 0; }

/* Customer Surveys: where the score comes from, a pipe per question */
.ppl-qs { display: grid; gap: 4px; margin-top: 10px; }
.ppl-q { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(120px, 1fr) 44px; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--hair); }
.ppl-q:first-child { border-top: 0; }
.ppl-qv { text-align: right; font-variant-numeric: tabular-nums; }
.ppl-unsent { margin-top: 10px; }
.ppl-unsentlist { display: grid; margin-top: 6px; }
.ppl-unsentrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--hair); }
.ppl-acts { white-space: nowrap; }
.ppl-svt td:first-child { min-width: 170px; }
.ppl-svt td:nth-last-child(2) { min-width: 220px; }
.ppl-svt td:last-child .chip { white-space: nowrap; }
.ppl-acts .btn + .btn, .ih-cardact .btn + .btn { margin-left: 6px; }
.ppl-cardstatus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ppl-cardstatus .hint { margin: 0; }

/* the survey link box in its pop-up */
.ppl-linkbox { display: flex; gap: 8px; margin: 12px 0 16px; }
.ppl-linkbox .input { flex: 1 1 auto; min-width: 0; }
.ppl-modalacts { display: flex; justify-content: flex-end; }

/* a touch iPad or a narrow window: the line becomes its card (the six times would scroll sideways in a table), one card
   per row with the times three across; a phone takes them two across (≤640, the kit's phone cards) */
@media (min-width: 641px) and (max-width: 1180px) {
  .ppl-person table.t { display: none; }
  .ppl-person .cards { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }
  .ppl-tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ppl-tgrid .field.wide { grid-column: auto; }
}
@media (max-width: 1180px) {
  .ppl-range .field { flex: 1 1 150px; }
  .ppl-range .field.ppl-who, .ppl-range .field.ppl-week { flex: 1 1 180px; }
}
@media (max-width: 1180px), (pointer: coarse) {
  .ppl-range .input { height: var(--tap); }
  .ppl-step .btn { height: var(--tap); }
  .ppl-step .btn.icon { width: var(--tap); }
}
@media (max-width: 1180px) {
  .ppl-grid .ppl-t { width: 100%; min-width: 92px; }
}
@media (max-width: 640px) {
  .ppl-range .field, .ppl-range .field.ppl-who { flex: 1 1 100%; }
  .ppl-range .field.ppl-week { flex: 1 1 0; }   /* the week sits between its arrows, one row */
  .ppl-range:has(.ppl-week) { flex-wrap: nowrap; }
  .ppl-range .field.ppl-datefield { flex: 1 1 calc(50% - 4px); }
  .ppl-step { flex: 1 1 100%; }
  .ppl-step .btn:not(.icon) { flex: 1 1 auto; justify-content: center; }
  .ppl-xlsx { margin-left: 0; flex: 1 1 100%; justify-content: center; }
  .ppl-fold > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .ppl-fold > summary > .ih-chips { grid-column: 1 / -1; grid-row: 2; }
  .ppl-q { grid-template-columns: minmax(0, 1fr) 44px; }
  .ppl-q .pipe { grid-column: 1 / -1; grid-row: 2; }
  .ppl-crew { justify-content: flex-start; }
  .ppl .ih-cardtop { flex-wrap: wrap; }
  .ppl .ppl-tcard .ih-cardtop { flex-wrap: nowrap; }   /* the day's hours stay level with its date */
}
[data-theme="dark"] .ppl :is(input[type="time"], input[type="date"]) { color-scheme: dark; }   /* the clock and calendar marks light on a dark box */

/* ---- Time › Time Off and Time › On Call (D02, w17ignite; Decision 44: entered here, shown on the Schedule as cards) */
.ppl-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ppl-pagenav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppl-pagelabel { min-width: 15ch; text-align: center; font-size: var(--fs-l); }
.ppl-offfoot { margin: 0; }
.ppl-oclist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.ppl-ocday { display: grid; grid-template-columns: 17ch minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 10px 0; border-top: 1px solid var(--hair); }
.ppl-ocday:first-child { border-top: 0; }
.ppl-ocday.today .ppl-ocdate b { color: var(--accent-ink); }
.ppl-ocdate { display: flex; gap: 6px; align-items: baseline; padding-top: 4px; white-space: nowrap; }
.ppl-ocwho { display: grid; gap: 6px; min-width: 0; }
.ppl-ocday.none .ppl-ocwho { padding-top: 4px; }
.ppl-ocp { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who btn" "meta btn"; gap: 2px 12px; align-items: center; }
.ppl-ocp > .scv-who { grid-area: who; }
.ppl-ocp > .btn { grid-area: btn; }
.ppl-ocmeta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; }
@media (max-width: 640px) {
  .ppl-pager > .btn { flex: 1 1 100%; justify-content: center; }
  .ppl-pagenav { flex: 1 1 100%; }
  .ppl-pagelabel { flex: 1 1 auto; min-width: 0; }
  .ppl-ocday { grid-template-columns: minmax(0, 1fr); }
}