/* The timeline's cards — DAY-PAGE-PLAN §4 (increment B), MOCKUP.html's `.tl`.
 *
 * Tokens only (tokens.css carries light AND dark, so nothing here needs a
 * media query of its own). The lime and per-kind left stripes are retired:
 * a card's kind is its wash — money green, movement blue-grey — and a system
 * line is dashed and muted, as the wireframe draws them.
 *
 * Text on a tinted card uses --ink or --ink-muted, never --ink-faint (§3's
 * token table). A `.ref` chip on a tinted card sits on --surface, because in
 * light mode --tint-money IS --surface-sunken.
 */

/* ------------------------------------------------------------ the list */

.today__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);
}

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

/* ------------------------------------------------------------ a card */

.entry {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.4;
  /* The height of one line of the card's words: the time chip sits on it. */
  --entry-line: calc(var(--text-base) * 1.4);
}

.entry[data-kind="expense"] {
  background: var(--tint-money);
  border-color: transparent;
}

.entry[data-kind="move"] {
  background: var(--tint-move);
  border-color: transparent;
}

.entry[data-system] {
  background: transparent;
  border-style: dashed;
  color: var(--ink-muted);
}

.entry__main {
  min-width: 0;
}

.entry__main > p {
  margin: 0;
  overflow-wrap: anywhere;
}

/* S, step 2: a card's lines keep to the measure (tokens.css, about 75
 * characters). On a phone the card is narrower than that and nothing
 * changes; in the 42rem column from 704px a long note ran to 83 characters
 * a line. An expense's amount is not in any of these paragraphs — it is
 * their sibling, floated to the CARD's edge (below) — so it stays there.
 * Below the desk only: the three panes keep the wrapping they were
 * approved with. */
@media (max-width: 1099.98px) {
  .entry__main > p {
    max-width: var(--measure);
  }
}

.entry__title,
.entry__body {
  white-space: pre-wrap;
}

.entry__detail,
.entry__paper,
.entry__body,
.entry__sub,
.entry__record {
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* ------------------------------------------------------------ the time column
 *
 * The chip's line box is the title's first line (--entry-line), so the
 * time sits level with the words. As a button it is a full 44px target that
 * does not reach past its own card: the negative block margin gives back the
 * card's padding, and a one-line card is then 44px of target tall. */

.entry__when {
  position: relative;
  min-width: 0;
}

.entry__time {
  display: block;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--entry-line);
}

/* No min-height: a button centres its content in any spare height, which
 * dropped the time below line 1. The bottom padding makes up the 44px. */
button.entry__time {
  width: 100%;
  margin-block: calc(-1 * var(--space-2));
  padding: var(--space-2) 0 calc(var(--touch) - var(--space-2) - var(--entry-line));
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

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

.entry__time--failed {
  color: var(--warn-ink);
  text-decoration: underline dotted;
}

/* The editor: wider than the column, laid over the words for as long as it is
 * open — a time input with its picker glyph needs about 7.5rem. */
.entry__time-input {
  position: relative;
  z-index: 1;
  width: 7.5rem;
  min-height: var(--touch);
  margin-block: calc(-1 * var(--space-2));
  padding: 0 var(--space-1);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------ the words */

.entry__amount {
  float: right;
  margin-inline-start: var(--space-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.entry__tag {
  color: var(--ink-muted);
}

/* A chip and a placeholder note are atomic in the line: a wrap moves them
 * whole, never splits "#SUB-2026-003" at a hyphen or leaves "Manager" alone.
 * max-width lets a name longer than the line still wrap inside its own box
 * rather than push the card sideways. */
.ref,
.ref__badge {
  display: inline-block;
  max-width: 100%;
}

.ref {
  padding: 0 var(--space-1);
  background: var(--surface-sunken);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-weight: 600;
}

.entry[data-kind="expense"] .ref,
.entry[data-kind="move"] .ref {
  background: var(--surface);
}

.ref--pending {
  color: var(--warn-ink);
}

.ref--closed {
  color: var(--ink-muted);
  font-weight: 500;
}

/* A placeholder master's note: `[#Kolhapur] not in DG Fleet Manager`. */
.ref__badge {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

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

/* "Open in DG Fleet Manager": one box (inline-block), for the 44 px target
 * entity-pages.css draws round it beside a name's (S). */
.entry__fleet {
  display: inline-block;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* A Move's typed remark: muted, two lines at most. The whole text stays in
 * the DOM — the clamp is paint, not an edit. */
.entry__remark {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* Bug 1b's Record row: the button keeps the 44px target inside the card.
 * The last word and its dash are one run, so a wrap takes the button alone
 * and never starts a line with the dash. */
.entry__record-end {
  white-space: nowrap;
}

.entry__record-btn {
  min-height: var(--touch);
  margin-inline-start: var(--space-1);
  padding: 0 var(--space-3);
}

/* ------------------------------------------------------------ private
 *
 * §1 decision 15: locked, the card is its time, a lock, a veil with no text
 * behind it, and one button. The veil is bars, blurred — a filter on a card is
 * safe because no card is an ancestor of the dock or the sheets. */

.entry[data-private="locked"] .entry__main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.entry__lock {
  position: relative;
  flex: none;
  width: 0.75rem;
  height: 0.625rem;
  margin-top: 0.3rem;
  border-radius: 2px;
  background: var(--ink-muted);
}

.entry__lock::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0.125rem;
  right: 0.125rem;
  height: 0.3125rem;
  border: 2px solid var(--ink-muted);
  border-bottom: 0;
  border-radius: 0.3125rem 0.3125rem 0 0;
}

.entry__veil {
  flex: 1 1 auto;
  min-width: 2rem;
  height: 0.875rem;
  background: repeating-linear-gradient(
    90deg,
    var(--ink-faint) 0 2.25rem,
    transparent 2.25rem 2.75rem
  );
  border-radius: var(--radius-sm);
  opacity: 0.45;
  filter: blur(3px);
}

.entry__reveal,
.entry__hide {
  flex: none;
  min-height: var(--touch);
  margin-block: calc(-1 * var(--space-2));
  padding: 0 var(--space-1);
  background: transparent;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
}

.entry__hide {
  display: block;
  margin: 0 0 calc(-1 * var(--space-2)) auto;
}

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

/* ------------------------------------------------ a private pending item
 *
 * The owner's decision of 2026-09-25: an item born in a private entry, and
 * its chases, are veiled wherever they appear outside their card — the
 * strip, Close day, the photo sheet, a card's sub-line (veil.js). One button,
 * `Private item — tap to show`, in the reveal's own look; inline, so a row
 * keeps its height, with its 44 px tap area drawn by a positioned ::after. */
.veil__show {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.veil__show::after {
  content: "";
  position: absolute;
  inset: calc((1lh - var(--touch)) / 2) 0;
}

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

/* ------------------------------------------------------------ photos (E)
 *
 * DAY-PAGE-PLAN §6: a card's photos, at most three and then `+N`, INLINE at
 * the end of the card's last text line, as the wireframe draws them (§8 Q8,
 * the owner's answer of 2026-09-24; MOCKUP.html:152-156). Each is a box
 * holding a 2.6 × 1.8rem image; a link's 44px touch target is its `::after`,
 * centred on the image, since a 44px box does not fit in a line of text.
 * The image's own background is the --border placeholder tile, seen while a
 * lazy image loads; the plain tile (a photo that cannot be shown, or has no
 * address) is the same box, empty.
 * A photo still waiting to upload wears a dashed orange edge: dashed, so the
 * state is not told by colour alone. --warn-ink, not --emphasis-edge: the
 * edge must keep 3:1 on the Move wash as well, where the edge token falls
 * just short (2.8:1). */

.entry__thumbs {
  white-space: nowrap; /* the boxes and +N wrap as one run */
}

/* 0.4rem apart, not --space-1: two waiting photos' 2px dashed edges then
 * stay 2.4px apart, as E's fix of the fidelity review's L9 left them; at
 * 0.25rem they touched and read as one box. */
.entry__thumb {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: 0.4rem;
  border-radius: var(--radius-sm);
}

/* 44px around a 42 × 29px image: 1px past its sides, 8px past top and bottom.
 * Neighbours' centres are 48px apart, so two targets never overlap. */
a.entry__thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--touch);
  height: var(--touch);
  margin: calc(var(--touch) / -2) 0 0 calc(var(--touch) / -2);
}

/* A Move's remark that carries photos shows whole, so the photos end the
 * text as the wireframe draws them (NEXT-PLAN N6: the two-line clamp above
 * is B's call, not his). */
.entry__remark:has(> .entry__thumbs) {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}

/* A button under a line of photos keeps clear of their targets. */
.entry__main > :has(> .entry__thumbs) + :is(.entry__record, .entry__hide) {
  margin-top: var(--space-2);
}

.entry__thumb-img,
.entry__thumb-tile {
  display: block;
  width: 2.6rem;
  height: 1.8rem;
  border-radius: var(--radius-sm);
  background: var(--border);
}

.entry__thumb-img {
  object-fit: cover;
}

/* Offset 0: at 1px two waiting photos side by side drew their edges 0.4px
 * apart and read as one box (fidelity review of E, L9); now 2.4px. */
.entry__thumb--waiting .entry__thumb-img,
.entry__thumb--waiting .entry__thumb-tile {
  outline: 2px dashed var(--warn-ink);
  outline-offset: 0;
}

a.entry__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.entry__thumb-more {
  margin-inline-start: var(--space-1);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}