/* The Entities tab, the entity pages and the Fleet board (increment I1).
 *
 * The wireframe draws none of the three (MOCKUP.html's phone frame stops at
 * the tab bar; :213 is the board's header link), so they speak its language:
 * the day header's row — a serif title with its count on the right —, the
 * chip strip's pills, the Pending frame's groups of bordered two-line rows
 * (docs/ui/PROPOSED.html P1), and the DG-set pane's label-and-value rows
 * (MOCKUP.html:182, `.kv`) with the losing answer in the warning colour.
 *
 * Tokens only (tokens.css carries light AND dark). views.css's two standing
 * rules hold here too: nothing declares `display` on a [data-view] wrapper,
 * and nothing grows a transform, filter, contain or perspective on .shell or
 * a view wrapper. The one rule that touches .shell widens it for the board
 * on a desktop, and only while the board is the view on screen.
 */

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

.ents__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch);
  padding-inline-end: var(--space-3);
  color: var(--accent);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
}

/* Generated marks carry an empty alternative text, so a screen reader hears
 * the link's words alone ("DG sets", not "less-than DG sets"). */
.ents__back::before {
  content: "‹" / "";
  font-size: 1.35rem;
  line-height: 1;
}

/* The day header's row (day.css .day__row) without its 44px floor: nothing
 * in it is a target, and the page's first line sits right under the title. */
.ents__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-1) 0 var(--space-2);
}

/* On a desktop the shell's header ends in its green rule; the title keeps
 * clear of it. */
@media (min-width: 1100px) {
  .ents__head {
    margin-top: var(--space-4);
  }
}

.view__title.ents__title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.ents__meta {
  margin: 0;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.ents__meta:empty {
  display: none;
}

/* ------------------------------------------------------------------ lists */

.ents__list,
.ent,
.ents__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ents__find {
  display: block;
}

/* The chips wrap rather than scroll: every kind stays in sight at 360px, and
 * nothing moves the page sideways. The 44px target is the link; the pill
 * inside it is drawn smaller, as the day page's chips are (day.css). */
.ents__chips,
.board__chips {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-1);
  row-gap: 0;
}

.ents__chip,
.board__chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.ents__pill {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.ents__pill .num {
  font-variant-numeric: tabular-nums;
}

.ents__chip[aria-current="page"] .ents__pill,
.board__chip[aria-pressed="true"] .ents__pill {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}

.ents__chip:focus-visible,
.board__chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 999px;
}

.ents__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ents__group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: 600;
}

.ents__group-count {
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ents__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

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

/* One row, one link: its whole box is the target. The chevron is drawn in
 * the right-hand padding, so a long name wraps before it, never under it. */
.ents__row {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--touch);
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ents__row::after {
  content: "›" / "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--space-3);
  display: flex;
  align-items: center;
  color: var(--ink-faint);
  font-size: 1.35rem;
}

.ents__row:hover {
  background: var(--surface-sunken);
}

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

.ents__name {
  font-weight: 600;
}

.ents__detail,
.ents__l2 {
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* A placeholder's "not in DG Fleet Manager": the office has something to
 * add, so it takes the orange of things needing attention (MOCKUP.html's
 * --warn), as text, 5.57:1 on white. */
.ents__badge {
  color: var(--warn-ink);
  font-size: var(--text-sm);
  font-weight: 500;
}

.ents__l2--warn {
  color: var(--warn-ink);
  font-weight: 500;
}

.ents__empty {
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--ink-muted);
  font-size: var(--text-base);
}

/* ------------------------------------------------------------ an entity */

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

.ent__facts {
  margin: 0;
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.ent__fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

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

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

.ent__value {
  margin: 0;
  min-width: 0;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}

.ent__fact--warn .ent__value {
  color: var(--warn-ink);
}

/* A value that names another entity: the link keeps its 44px target inside
 * the row's own height, as the time chip does on a card (cards.css). */
.ent__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin-block: calc(-1 * var(--space-2));
  color: var(--accent);
  font-weight: 600;
}

.ent__fleet,
.board__refresh {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--touch);
  color: var(--accent);
  font-size: var(--text-base);
  font-weight: 600;
}

.ent__fleet::after {
  content: "↗" / "";
  margin-inline-start: var(--space-1);
}

.board__refresh::after {
  content: "›" / "";
  margin-inline-start: var(--space-1);
}

.ents__back:focus-visible,
.ent__link:focus-visible,
.ent__fleet:focus-visible,
.board__refresh:focus-visible,
.board__set:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.ent__day {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
}

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

/* ------------------------------------------------------------ the board */

/* The chips and "Refresh from DG Fleet Manager" share the row above the
 * table, so the link is on the board's first screen however long the fleet
 * (review 2026-09-25: after the last of 125 rows it sat 11 screens down).
 * Where the row is wide enough (a desktop) the link ends it; where it is not
 * (a phone) it wraps onto a line of its own under the chips, at the start —
 * `space-between` with one item on a line puts it there. Both are 44px
 * tall, so on one line they sit level. */
.board__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: var(--space-3);
  row-gap: 0;
}

/* The table scrolls inside its own box, never the page. */
.board__wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.board__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  line-height: 1.35;
}

.board__col {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.board__cell {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.board__row:last-child .board__cell {
  border-bottom: 0;
}

.board__set {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin-block: calc(-1 * var(--space-2));
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.board__where,
.board__sub,
.board__warn,
.board__moved {
  display: block;
}

.board__sub {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.board__warn {
  color: var(--warn-ink);
  font-size: var(--text-sm);
  font-weight: 500;
}

.board__moved {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* On a phone the table lays its columns out by these widths, not by its
 * words (review 2026-09-25: left to itself, Set — the code on one line, then
 * "kVA · make" — and "Last moved" took two thirds of 390px, and Where broke a
 * word a line, DG-117's row nine lines tall). Set keeps under a third, Last
 * moved the width of a date with its heading on two lines, and Where has the
 * rest; the cells' side padding halves. A DG code still fits its line; a long
 * one in the fleet app's own numbering (PS/R/<MAKE3>/<KVA>/<NN>) wraps inside
 * its cell, after its slashes, rather than widening it. 37.5rem = 600px, the width under which
 * the auto layout starved Where. */
@media (max-width: 37.5rem) {
  .board__table {
    table-layout: fixed;
  }

  .board__col,
  .board__cell {
    padding-inline: var(--space-2);
  }

  .board__col:first-child {
    width: 30%;
  }

  .board__col:last-child {
    width: 4.75rem;
    white-space: normal;
  }

  /* A block here, and its 44px as padding inside the box rather than a
   * minimum around one line, so a code that wraps pushes "kVA · make" down
   * instead of running over it. It wraps after a slash (fleet-board.js puts a
   * <wbr> there) and only mid-word when one piece cannot fit its line; a step
   * smaller than the table's words, so PS/R/<MAKE3>/ fills one line at 360px
   * and a code is two lines at most. S: that is why it stays 14 px
   * (--text-sm on a phone) where the rest of the board went to 16 — at 15 px
   * PS/R/CUM/25/391 took a third line in its 30% column. */
  .board__set {
    display: flex;
    padding-block: var(--space-2);
    font-size: var(--text-sm);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .board__moved {
    white-space: normal;
  }
}

/* The board is a desktop page (§3.8 "Extra pages"): at 1100px and wider the
 * column widens while it is on screen, so a row reads on one line. A literal
 * width, as views.css says why: a media query cannot read a custom property. */
@media (min-width: 1100px) {
  .shell:has(> [data-view="fleet"]:not([hidden])) {
    max-width: 64rem;
  }
}