/* css/presence.css — who else is looking at this entry (CIT-4): rings, sentence, the slot above Approve.
   One of the files src/index.html links in order; see tokens.css for why. */

/* ==========================================================================
   WHO ELSE IS LOOKING AT THIS ENTRY — CIT-4
   ==========================================================================
   The shape is docs/mockups/cit4-presence.html, walked and approved. It is one
   sentence in two places: initials in a ring on the queue row, where there is
   no room for a sentence, and the sentence itself directly above the Approve
   button. components.js composes both from one function so they cannot drift.

   IT USES THE PENDING TOKENS AND ADDS NO COLOUR. The palette is LOCKED and this
   introduces nothing: --pending is the amber already on every one of these rows
   as the IN REVIEW stamp, and it means the same thing here that it means there
   — something is in progress and nothing has gone wrong. The precedent is
   CIT-3's `temporary` stamp, which reused the same treatment for the same
   reason. A new hue for a new state is how a locked palette stops being one.

   NOTHING ANIMATES, and that is a requirement rather than restraint: somebody
   arriving must not pop, and must not move the Approve button under a hand
   already travelling towards it. There is no transition on any rule below, and
   .here-slot further down reserves the line's height whether or not anybody is
   in it — which is what actually keeps the button still.
   ========================================================================== */
/* line-height IS STATED HERE rather than inherited, and .here-slot's reserved
   height is computed from these two numbers — see the block further down. An
   inherited value would mean the reserved space and the thing it is reserving
   space for could drift apart the day body's line-height moves, and the whole
   point of the slot is that they cannot. */
.here{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--legible);font-size:.875rem;line-height:1.55;color:var(--ink-soft);
}

/* THE GAP IS FOR THE SENTENCE AND IS WRONG FOR THE RINGS, which overlap on
   purpose. Left on, each ring after the first sat gap(6.4px) - overlap(8px) =
   1.6px further right than intended: four rings measured 99px in an 83px cell
   and the "+1" was clipped by the pinned actions column. A measurement, from the
   Part 0 run — the suite cannot see a clipped ring and nor can a person, because
   what is left looks like a "+".

   [role="img"] IS THE BADGE FORM. components.js gives the ring group that role
   so a screen reader gets one accessible name instead of a string of initials,
   which makes it the honest selector for "this .here is rings, not a sentence". */
.here[role="img"]{gap:0}

/* The live dot beside the sentence. Decoration — aria-hidden in components.js —
   and the only thing on the screen that is purely a colour, which is why it is
   never alone: the sentence is right beside it. */
.here-dot{
  flex:0 0 auto;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--pending);box-shadow:0 0 0 3px var(--pending-wash);
}

/* The ring. 26px so two letters read at a glance in a 44px row, bordered rather
   than filled so it does not compete with the stamps, and overlapped -8px so
   three of them plus a "+1" fit the column the queue gives them. */
.here-who{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  font-family:var(--data);font-size:.625rem;font-weight:600;letter-spacing:.02em;
  line-height:1;
  color:var(--pending);background:var(--pending-wash);
  border:1px solid var(--pending);
}
.here-who + .here-who{margin-left:-8px}
/* The count, not a person. Neutral ground and the structural rule colour, so it
   reads as "and more" rather than as a fourth face. */
.here-more{background:var(--paper);color:var(--ink-soft);border-color:var(--rule-strong)}

/* The queue cell, and the arithmetic is why it is not the standard .6rem.
   Four rings — three faces and a "+1" — are 26 + 18 + 18 + 18 = 80px. The review
   queue gives the column 10%, and the narrowest the table is ever laid out at is
   ui/table.js's --dt-min floor of 922px for that screen, so 10% is 92px. The
   standard padding leaves 72 and clips the last ring; .25rem leaves 84.

   THAT CLIP IS NOT COSMETIC, which is why the number is worked out here rather
   than eyeballed: the ring it would take is the "+1", and losing it turns "three
   others are on this" into "three people, and that is all of them".

   nowrap so a ring never wraps under its neighbours and grows the row.

   `dt-c-here` RATHER THAN THE MOCK'S `.here-cell`, and the swap is the one place
   this differs from the prototype. ui/table.js already stamps `dt-c-<key>` on
   every cell of every column precisely so a screen can address one of its
   columns from the stylesheet; inventing a second hook for the same job would
   have meant a new option on the shared table for one screen's benefit. The key
   IS `here`, so the class reads the same either way.

   `.dt-table td.dt-c-here`, NOT a bare class and NOT !important. The padding it
   overrides is `.dt-table td`, which is (0,1,1); one more class beats it at
   (0,2,1) with nothing to argue about later. The one !important in this file is
   on .dt-actions-cell and has its own paragraph. */
.dt-table td.dt-c-here{padding-left:.25rem;padding-right:.25rem;white-space:nowrap}

/* ==========================================================================
   THE SLOT ABOVE THE APPROVE BUTTON, AND WHY IT IS ALWAYS THERE
   ==========================================================================
   THE HARD REQUIREMENT IS THAT NOTHING MOVES THE APPROVE BUTTON UNDER A HAND
   TRAVELLING TOWARDS IT. The sentence sits directly above that button, and
   somebody arriving while she is reading would otherwise insert a line and
   push the button down by about twenty pixels — at the exact moment she is
   reaching for it. That is the one interaction failure this feature could
   actually cause, and it is caused by the thing that makes it useful.

   So the SPACE is reserved and only the CONTENT arrives. min-height holds one
   line whether or not anybody is in it, and .here--beside carries no margin of
   its own, so the geometry of the card is identical in both states and the
   button never moves.

   IT IS ONLY RENDERED WHERE A DECISION IS ABOUT TO BE MADE — submission-detail
   draws the slot alongside the Approve button and nowhere else — so the empty
   line of reserved space is paid for on the one screen it buys something on,
   and not on every view of every entry.

   THE HEIGHT IS CALCULATED FROM THE SENTENCE'S OWN TYPE rather than written as
   a number, because a number is a thing that goes stale silently: the reserved
   space and the line it reserves space for have to be the same height or the
   button moves by the difference. `.875rem * 1.55` is exactly .here's font-size
   times its line-height, both stated on that rule. In rem, so it grows with a
   reader's own font size (WCAG 1.4.4) exactly as the sentence does.

   AND THE LINE IS `display:flex`, NOT `inline-flex`. This is where the first
   version lost three pixels: an inline-level child gives its block parent a LINE
   BOX, and a line box carries the parent's own strut — 16px at line-height 1.55
   is 24.8px, against the 21.7px the sentence itself measures. So the slot grew
   by 2.8px the moment somebody arrived, and the button moved by 2.8px, which is
   exactly the failure the slot exists to prevent, three pixels at a time.
   Measured in Chrome during the Part 0 run; a screenshot pair is what made it
   visible and scripts/presence_proof.mjs is what measures it now.
   ========================================================================== */
.here-slot{min-height:calc(.875rem * 1.55)}
.here--beside{margin:0;display:flex}


@media (max-width:640px){
  /* WHO ELSE IS HERE, ON A PHONE — CIT-4. The cell keeps its own full-width line
     below the summary, and THE CLEAR SPACE IS ON THE RINGS RATHER THAN ON THE
     CELL. That is the whole trick: the rings only exist when somebody is there,
     so an empty presence cell is a zero-height flex item and costs a phone row
     nothing at all — which is what "nobody else draws nothing" has to mean in a
     layout where every cell is its own line. A margin on the cell would have put
     five pixels into every row of a queue where the common case is nobody. */
  /* order:3, SO IT IS LAST ON A PHONE THOUGH IT IS NOT LAST IN THE DOM. The
     review queue declares this column before its narrow-only summary line — it
     has to, because a display:none cell shifts every cell after it a column left
     on the desktop — and DOM order would then put the marker between the hours
     and the meta line, in the middle of the facts about the entry rather than
     after them. Everything else in the row is order:2. */
  .dt-table td.dt-c-here{padding:0;order:3}
  .dt-table td.dt-c-here .here{margin-top:.3rem}
}