/* ============================================================================
   FaceCheck — Currently Inside / Presence page  (Task 10.2)
   Page-specific layout on top of lc-tokens.css + lc-components.css.
   ============================================================================ */

.pr-page-head { margin-bottom: var(--lc-5); }
.pr-page-head h1 { font-size: var(--lc-fs-xl); }
.pr-page-head p { color: var(--lc-ink-2); margin-top: var(--lc-1); max-width: 62ch; }

/* ── KPI row ─────────────────────────────────────────────────────────────── */
.pr-kpis {
  display: grid; gap: var(--lc-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--lc-5);
}
@media (min-width: 620px) { .pr-kpis { grid-template-columns: 1.15fr 1fr 1fr; } }

.pr-kpi {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-r-lg);
  box-shadow: var(--lc-shadow-sm);
  padding: var(--lc-5);
}
.pr-kpi--now { border-color: var(--lc-live-border); background: var(--lc-surface); }

.pr-kpi-label {
  display: flex; align-items: center; gap: var(--lc-2);
  font-family: var(--lc-mono);
  font-size: var(--lc-fs-xs); font-weight: var(--lc-fw-medium);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--lc-ink-2); margin-bottom: var(--lc-3);
}
.pr-kpi--now .pr-kpi-label { color: var(--lc-live-ink); }
.pr-kpi-hist-mark { width: 8px; height: 8px; border-radius: 2px; background: var(--lc-ink-3); flex-shrink: 0; }

.pr-kpi-value {
  font-family: var(--lc-font-display);
  font-size: var(--lc-fs-kpi); font-weight: var(--lc-fw-bold);
  line-height: 1; letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: var(--lc-2);
  unicode-bidi: isolate;
}
.pr-kpi--now .pr-kpi-value { color: var(--lc-live-ink); }
.pr-kpi--today .pr-kpi-value { color: var(--lc-ink); }
.pr-kpi-unit { font-size: var(--lc-fs-base); font-weight: var(--lc-fw-medium); color: var(--lc-ink-2); }
.pr-kpi-sub { font-size: var(--lc-fs-xs); color: var(--lc-ink-3); margin-top: var(--lc-2); }
.pr-kpi-sub bdi { color: var(--lc-ink-3); }

/* ── Roster panel head / toolbar ────────────────────────────────────────── */
.pr-toolbar { display: flex; align-items: center; gap: var(--lc-2); flex-wrap: wrap; margin-inline-start: auto; }

/* sticky toolbar + header on scroll */
.pr-panel .lc-panel-head { position: sticky; top: var(--lc-topbar-h); background: var(--lc-surface); z-index: 5; }

/* ── Roster table (desktop / tablet) ────────────────────────────────────── */
.pr-table-wrap { overflow-x: auto; }
.pr-table { width: 100%; border-collapse: collapse; font-size: var(--lc-fs-base); }
.pr-table thead th {
  position: sticky; top: calc(var(--lc-topbar-h) + 63px);
  background: var(--lc-surface-mut);
  text-align: start; font-size: var(--lc-fs-sm); font-weight: var(--lc-fw-semi);
  color: var(--lc-ink-3); padding: var(--lc-2) var(--lc-5);
  border-bottom: 1px solid var(--lc-border-2);
  white-space: nowrap;
}
.pr-table tbody td {
  padding: var(--lc-3) var(--lc-5);
  border-bottom: 1px solid var(--lc-border-2);
  vertical-align: middle;
}
.pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-table tbody tr {
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: auto var(--lc-row-h);
}
.pr-table tbody tr:hover { background: var(--lc-ground); }
.pr-table tbody tr:focus-visible { background: var(--lc-ground); outline-offset: -2px; }

.pr-who { display: flex; align-items: center; gap: var(--lc-3); min-width: 0; }
.pr-who-nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-who-nm b { font-weight: var(--lc-fw-semi); font-size: var(--lc-fs-base); color: var(--lc-ink); }
.pr-who-nm .lc-chip { align-self: flex-start; }

.pr-col-time { color: var(--lc-ink-2); white-space: nowrap; }
.pr-col-chev { width: 24px; text-align: end; color: var(--lc-ink-3); }
.pr-col-chev svg { width: 14px; height: 14px; }
:dir(rtl) .pr-col-chev svg { transform: scaleX(-1); }

/* tablet: fold time into duration cell, source → icon only */
@media (max-width: 1023px) and (min-width: 768px) {
  .pr-table th.pr-th-time, .pr-table td.pr-td-time { display: none; }
  .pr-td-dur .pr-inline-time { display: inline; color: var(--lc-ink-3); font-size: var(--lc-fs-xs); margin-inline-end: var(--lc-2); }
  .pr-source-label { display: none; }
}
.pr-inline-time { display: none; }

/* ── Roster cards (mobile) ──────────────────────────────────────────────── */
.pr-cards { display: none; padding: var(--lc-4); gap: var(--lc-3); }
.pr-card {
  background: var(--lc-surface); border: 1px solid var(--lc-border);
  border-radius: var(--lc-r-md); padding: var(--lc-3) var(--lc-4);
  display: grid; gap: var(--lc-2); box-shadow: var(--lc-shadow-xs);
  cursor: pointer;
  content-visibility: auto; contain-intrinsic-size: auto 108px;
}
.pr-card:active { background: var(--lc-ground); }
.pr-card-r1 { display: flex; align-items: center; gap: var(--lc-3); }
.pr-card-r1 b { flex: 1; font-weight: var(--lc-fw-semi); font-size: var(--lc-fs-base); min-width: 0; }
.pr-card-r1 svg.pr-card-chev { width: 14px; height: 14px; color: var(--lc-ink-3); flex-shrink: 0; }
:dir(rtl) .pr-card-chev { transform: scaleX(-1); }
.pr-card-r2 { display: flex; align-items: center; gap: var(--lc-2); font-size: var(--lc-fs-sm); color: var(--lc-ink-2); }
.pr-card-r3 {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lc-2);
  padding-top: var(--lc-2); border-top: 1px solid var(--lc-border-2);
}
.pr-card-r3 .pr-card-time { font-size: var(--lc-fs-sm); color: var(--lc-ink-2); }

@media (max-width: 767px) {
  .pr-table-wrap { display: none; }
  .pr-cards { display: grid; }
  .pr-panel .lc-panel-head { flex-direction: column; align-items: stretch; }
  .pr-toolbar { margin-inline-start: 0; flex-direction: column; align-items: stretch; }
  .pr-toolbar .lc-search { min-width: 0; }
  .pr-toolbar .lc-segmented { overflow-x: auto; }
  .pr-toolbar .lc-menu, .pr-toolbar .lc-menu-btn { width: 100%; }
  .pr-toolbar .lc-menu-btn { justify-content: space-between; }
}

/* ── Loading skeleton rows ──────────────────────────────────────────────── */
.pr-skel-row { display: flex; align-items: center; gap: var(--lc-3); padding: var(--lc-3) var(--lc-5); border-bottom: 1px solid var(--lc-border-2); }
.pr-skel-av { width: 38px; height: 38px; border-radius: var(--lc-r-md); flex-shrink: 0; }
.pr-skel-line { height: 10px; }
.pr-skel-dur { width: 70px; height: 22px; border-radius: var(--lc-r-sm); margin-inline-start: auto; }

/* ── Stale banner ──────────────────────────────────────────────────────── */
.pr-stale {
  display: none; align-items: center; gap: var(--lc-2);
  font-size: var(--lc-fs-sm); color: var(--lc-warn);
  background: var(--lc-warn-wash);
  padding: var(--lc-2) var(--lc-5);
  border-bottom: 1px solid var(--lc-warn-wash);
}
.pr-stale[data-show="true"] { display: flex; }
.pr-stale .pr-stale-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lc-warn); }

/* ── Large-list hint ───────────────────────────────────────────────────── */
.pr-list-hint {
  font-size: var(--lc-fs-xs); color: var(--lc-ink-3);
  padding: var(--lc-3) var(--lc-5); border-top: 1px solid var(--lc-border-2);
  text-align: center;
}

/* ── Dashboard preview shares the duration/source primitives via a scoped
   copy — see dashboard.css .db-now-* . Nothing from this file leaks to the
   dark pages. */