/* ENT's pages: the DG set's, a site's, a yard's or workshop's (increment ENT,
 * the owner's item 9 of 2026-10-02). entities.css holds what I1's pages and
 * these share — the header row, the facts, the rows, a group's heading — and
 * this file only what is new: the sections' rhythm, the flagged answer, the
 * transit sentence, the time line ("Rentals · moves", MOCKUP.html:183: rental
 * periods as segments on a bar, the Moves as ticks; then each period as a
 * tinted band with its Moves' cards on top of it) and the pending rows.
 *
 * No frame was drawn for these pages; they are built in the wireframe's
 * language on the owner's word of 2026-09-25 ("build the entire application
 * to the end"): the DG-set pane's label-and-value rows and segments
 * (MOCKUP.html:181-185), the day page's cards, the Pending frame's two-line
 * rows (docs/ui/PROPOSED.html P1). Tokens only (tokens.css carries light AND
 * dark); 44px for everything a finger presses (the rows, the links, the veil
 * button's ::after; the bar and the bands take no press).
 */

/* ----------------------------------------------------------------- rhythm */

.ent__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ------------------------------------------------------------ the header */

/* The losing answer, flagged in words as well as in orange (MOCKUP.html:182). */
.ent__flag {
  display: inline-block;
  margin-inline-start: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--emphasis-edge);
  border-radius: 999px;
  color: var(--warn-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

/* "In transit to Kolhapur since 09:15 with Sharma Transport": the sentence
 * under its label, left to right, in the Move wash the day's Move cards wear,
 * edge to edge of the facts' box. */
.ent__fact--transit {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  margin-inline: calc(-1 * var(--space-3));
  padding: var(--space-2) var(--space-3);
  background: var(--tint-move);
}

.ent__fact--transit .ent__value {
  text-align: start;
}

.ent__fact--transit:first-child {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* ---------------------------------------------------------- the time line */

.eset__note {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-base);
}

.eset__bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* The span from the oldest rental or Move to today. Positions come from the
 * CSS custom properties set-page.js gives each mark through the CSSOM. */
.eset__track {
  position: relative;
  height: 1rem;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* A rental period: the brand green, the one still running the stronger. */
.eset__seg {
  position: absolute;
  inset-block: 0;
  left: var(--from, 0%);
  width: var(--width, 0%);
  background: var(--accent);
  opacity: 0.35;
}

.eset__seg--on {
  opacity: 0.8;
}

/* A Move: a mark in the ink, through the segments. */
.eset__tick {
  position: absolute;
  inset-block: 0;
  left: var(--at, 0%);
  width: 3px;
  margin-inline-start: -1.5px;
  background: var(--ink);
  border-radius: 1px;
}

.eset__axis {
  display: flex;
  justify-content: space-between;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.eset__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A rental period as the background its Moves' cards sit on: the sunken
 * surface, edged in green while it runs, in the quiet border once it ended. */
.eset__band {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-3) var(--space-3);
  background: var(--surface-sunken);
  border-inline-start: 4px solid var(--ink-faint);
  border-radius: var(--radius-sm);
}

.eset__band--on {
  border-inline-start-color: var(--accent);
}

.eset__band-head > p {
  margin: 0;
}

.eset__band-title {
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.eset__band-meta {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.eset__band-flag {
  margin-top: var(--space-1);
  color: var(--warn-ink);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* A clause never breaks inside itself: a narrow line wraps between clauses. */
.eset__clause {
  white-space: nowrap;
}

.eset__band .ent__day {
  margin-top: var(--space-1);
}

.eset__loose {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ------------------------------------------------- the pending items */

/* Pending's own two lines (pending-list-spec.js pendingRowWords), read-only. */
.eset__pending {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.eset__item {
  padding: var(--space-2) var(--space-3);
}

.eset__item + .eset__item {
  border-top: 1px solid var(--border);
}

/* A to-do filed under a waiting item: one step in, under it. */
.eset__item--child {
  padding-inline-start: var(--space-8);
}

.eset__l1 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.eset__item--late .eset__l1 {
  color: var(--warn-ink);
}

.eset__words {
  flex: 1 1 auto;
  min-width: 0;
}

.eset__amount {
  flex: none;
  color: var(--ink);
  font-weight: 600;
}

.eset__l2 {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.eset__clause--late {
  color: var(--warn-ink);
}

.eset__clause--strong {
  font-weight: 700;
}

/* ===================================================================
 * ENT step 2: the customer's, vendor's, contact's and PO's pages, a card's
 * names as links, and the day header's customer chip (the owner's item 9 of
 * 2026-10-02). Built in the same language as above: Pending's two-line rows,
 * the Entities list's rows, the day page's cards and its scope control.
 * =================================================================== */

/* ------------------------------------------------------- a section's bar */

/* A heading with something beside it (the timeline's filter): the heading
 * keeps its words and its count, the control sits at the row's end. */
.ent__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.ent__bar > .ents__group-head {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.epty__pick {
  flex: none;
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* ---------------------------------------------------- pending, by type */

/* "PO awaited · 1": the quiet heading of one type's rows. */
.epty__type {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* An item's chases, under its two lines: one line each, newest first, a
 * rule at the start so they read as the item's own history. */
.epty__chases {
  margin: var(--space-1) 0 0;
  padding: 0 0 0 var(--space-2);
  list-style: none;
  border-inline-start: 2px solid var(--border);
}

.epty__chase {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.epty__chase-day {
  color: var(--ink);
  font-weight: 600;
}

.epty__chase--more {
  font-style: italic;
}

/* ------------------------------------------------------------ the rows */

/* A row only private words make (a Move typed in a private entry): the
 * veil and no link, so no chevron and no hover. */
.ents__row--veiled::after {
  content: none;
}

.ents__row--veiled:hover {
  background: transparent;
}

/* ---------------------------------------------------------- the timeline */

.epty__hidden {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* A month: the day page's serif, a step above its days, a rule over it. */
.epty__month {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

/* --------------------------------------------------- a card's names, linked */

/* The chip's look, a link's behaviour (cards.js): no underline but on
 * hover, the focus ring, and its 44px target drawn by a positioned ::after,
 * so the line keeps its height (veil.js's button does the same). Not centred
 * on the chip: a name often sits on the line right under another, and the
 * later one is painted on top, so a centred target (11.5px up) took the
 * upper name's middle — a tap on "PO 4500999" opened "@Tata Motors" (the
 * first e2e run). It reaches 6px up and the rest of the 44px down, so each
 * name's own box, its middle above all, is always its own. As wide as the
 * chip, never wider: a short code's sideways reach would take its
 * neighbour's edge the same way.
 * S (review of 2026-10-10, finding 7): "Open in DG Fleet Manager" under a
 * Move takes the same target — it stood 17 px tall with none. It is
 * positioned already (below), and what follows it in a card is plain words
 * or a positioned button, so its downward reach takes nothing of theirs. */
a.ref {
  position: relative;
  text-decoration: none;
}

a.ref::after,
a.entry__fleet::after {
  content: "";
  position: absolute;
  top: -6px;
  bottom: calc(1lh - var(--touch) + 6px);
  left: 0;
  right: 0;
}

a.ref:hover {
  text-decoration: underline;
}

a.ref:focus-visible,
a.entry__fleet:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* What a card draws after its names — the fleet link, the Record and Hide
 * buttons, the next card's reveal — is positioned too, so it is painted over
 * a name's downward reach (positioned boxes paint in tree order) and a tap on
 * it stays its own. The photos and the veil's button already are. */
.entry__fleet,
.entry__record-btn,
.entry__hide,
.entry__reveal {
  position: relative;
}

/* ------------------------------------------- the day header's customer chip */

/* The chip that opens the list wears the pressed look while it is open. */
.day__chip[aria-expanded="true"] .day__pill {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

/* The day's customers under the strip: each a 44px link to their page. */
.day__customers {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.day__customer,
.day__customer-note {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: var(--text-base);
}

.day__customer {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.day__customer::after {
  content: "›" / "";
  margin-inline-start: var(--space-1);
  color: var(--ink-faint);
}

.day__customer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.day__customer-note {
  color: var(--ink-muted);
  font-size: var(--text-md);
}