/* system/apps/live-user-view/styles.css
 *
 * Sept 2026 -- admin-only "who's using this app right now" view.
 * Mirrors room-monitor's styling conventions.
 *
 * Investigated the "everything renders monospace" theory (Sept 22
 * 2026): there's no systemic bug -- the one real instance of that,
 * `.app-shell p` forcing every paragraph to font-mono, was already
 * found and fixed in an earlier pass (see index.html's own comment on
 * that rule). This file's own mono-heavy look was just its
 * accumulated choices (status line, user id, timestamps, meta text,
 * history rows all separately opted into font-mono); every one of
 * those is font-sans now, same as the rest of the shell.
 */

.live-user-view { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 12px; }

.live-user-view-status {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--slate);
}

.live-user-view-empty {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--slate);
}

.live-user-view-list { display: flex; flex-direction: column; gap: 12px; }

/* Collapsible sections (Sept 21-22 2026, Ron's request): same
   technique as manage-repo-files' <details>/<summary> sections --
   plain native <details>, closed by default, no JS state to own for
   open vs. closed. Nests as many levels deep as the data does (user ->
   Sessions/Recent-apps -> a session -> that session's own App
   history) -- every level reuses this one rule rather than each tier
   inventing its own spacing, so nesting reads from the boxes-within-
   boxes alone (each child <details> already sits inside its parent's
   own 12px padding) with no extra indentation piled on top of that. */
.live-user-view-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
}
.live-user-view-section-body {
  padding-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The summary row: arrow, then whatever content this level has, then
   (person/session rows only) a status bubble pinned to the right
   margin via the content span's own flex:1. `align-items: center`
   vertically centers the arrow against its content whether that
   content is one line (a plain subsection title) or two (a session's
   app name + meta stack) -- Ron, Sept 22 2026: "make the triangle
   vertically center aligned with the text." This is also the ONE
   place font-size is set for "title" text (a person's name, a
   session's current-app line, a subsection's own label) -- Ron, Sept
   22 2026: "the section titles can be larger -- or not; whatever they
   are now is fine," so this size is left as it already was rather
   than changed along with the content-level normalization below. */
.live-user-view-section > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 0;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.live-user-view-section > summary::-webkit-details-marker { display: none; }
.live-user-view-section > summary::marker { content: ''; }

/* A native <summary> marker only renders while the <summary> itself
   keeps the browser default `display: list-item` -- every summary
   here overrides that to `flex`, which would silently drop it (and,
   per app.js's own comment, was actively breaking layout on top of
   that). So every level draws its own arrow instead -- a plain
   CSS border-triangle, not a Unicode glyph (Ron, Sept 22 2026, TWO
   rounds of feedback: a ▶ character has a lot of built-in padding
   inside its own em-box in most fonts, so even a bumped-up font-size
   still rendered smaller/lighter than manage-repo-files' own solid
   native marker -- a border-triangle has no such padding, so its
   pixel dimensions ARE its visible size, finally an actual match
   rather than another guess). */
.lv-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.lv-arrow::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--ink);
  transition: transform 0.15s ease;
}
.live-user-view-section[open] > summary > .lv-arrow::before {
  transform: rotate(90deg);
}

/* Everything BELOW a summary -- names' companion timestamps, session
   meta, every history row -- is one consistent size regardless of how
   many <details> it's nested inside. Ron, Sept 22 2026: "in each
   level of subsection the fonts get smaller... make the fonts the
   same size. The disclosure triangles show me the information
   hierarchy. All this content should be the normal 100% font size."
   var(--fs-md) IS that 100% anchor (see index.html's own type-system
   comment: it's the point --font-scale is exactly 1). */
.live-user-view-lastseen,
.live-user-view-session-meta,
.live-user-view-history-text,
.live-user-view-app-id {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--slate);
}
.live-user-view-app-id { color: var(--slate-light); }

.live-user-view-subsection-title {
  color: var(--ink);
}

/* Sept 22 2026 (Ron): "put triangles and status bubbles in-line with
   each item they represent. Losing too much real estate if separate
   columns." Earlier revision gave the content span its own flex:1 so
   the bubble would land pinned to the row's far right edge -- a clean
   "column," but one that leaves a big dead gap after any short line
   of text. Dropped: content now just takes its own natural width, and
   the bubble immediately follows it (this row's own `gap`) like any
   other inline item, no matter how long or short that row's text is. */
.live-user-view-user-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.live-user-view-session-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.live-user-view-name {
  word-break: break-all;
}

.live-user-view-session-app {
  display: block;
}

.live-user-view-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-user-view-history-text {
  min-width: 0;
}

/* Sept 22 2026 (Ron, third pass on this one): 0.85em instead of a
   fixed pixel size, still em- not rem-relative on purpose -- the
   whole point is scaling with whatever font-size is active on ITS OWN
   line (a summary's title, or a plain content row), not one fixed
   size for the entire screen the way rem would give. Grey default was
   too low-contrast to see comfortably (Ron, screenshot) -- swapped
   from var(--line), a hairline-border color never meant to carry a
   filled shape, to var(--slate-light), the same "muted but legible"
   tone this file already uses for its secondary text. .is-online
   swaps in this app's own green, which build-status's own "success"
   dot was updated to match (see build-status/app.js) so the color
   reads the same everywhere rather than two different greens
   depending which app drew it. */
.live-user-view-status-bubble {
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: var(--slate-light);
  flex-shrink: 0;
}
.live-user-view-status-bubble.is-online {
  background: #3dd96b;
}