/* ── Personnel profile card ────────────────────────────────────────────────────────────────
   Ported from the v2/dtoc-board-spike prototype (e8f1324 "floating cards, personnel profile
   card", refined by 15ed223). The prototype was a standalone static page with its own token
   set; this uses the live dashboard's variables so the card inherits the active skin instead
   of pinning the spike's palette.

   Dropped from the prototype deliberately: .pc-recog (the service/first-responder recognition
   band) and .pc-stats (Ops / Logged / Reliability). Neither has a data source, and a card that
   renders an authoritative-looking 0 is worse than one that stays quiet. If those fields ever
   get columns, the markup is in the spike branch.
──────────────────────────────────────────────────────────────────────────────────────────── */

/* Names that open a card. Affordance only — the card itself is opened in JS. */
[data-profile] { cursor: pointer; }
[data-profile]:hover strong,
[data-profile]:hover b { text-decoration: underline; text-underline-offset: 2px; }

#profcard {
  position: fixed;
  z-index: 60;
  width: 320px;
  max-width: calc(100vw - 20px);
  background: var(--bg-surface, #151b18);
  border: 1px solid var(--border, #29332e);
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 28px 66px rgba(0, 0, 0, .72);
  opacity: 0;
  transform: translateY(8px) scale(.97);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, .7, .2, 1);
  overflow: hidden;
}
#profcard.show { opacity: 1; transform: none; pointer-events: auto; }

/* The card can outgrow a short viewport once the activity trail is long. */
#profcard .pc-body { max-height: 70vh; overflow-y: auto; }

.pc-banner {
  height: 44px;
  background: linear-gradient(115deg, var(--red-dark, #7a0a1a), var(--red, #c8102e) 60%, #7a0a1a);
  position: relative;
}
.pc-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--bg-surface, #151b18), transparent 70%);
}

.pc-body { padding: 0 16px 15px; margin-top: -22px; position: relative; }

.pc-av {
  width: 52px; height: 52px; border-radius: 15px;
  border: 3px solid var(--bg-surface, #151b18);
  background: linear-gradient(135deg, var(--bg-hover, #1b2420), var(--bg-raised, #222c27));
  display: grid; place-items: center;
  font-weight: 700; font-size: 19px;
  color: var(--text-primary, #f4f7f4);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
}

.pc-name { font-weight: 700; font-size: 17px; letter-spacing: .4px; margin-top: 9px;
           color: var(--text-primary, #f4f7f4); }
.pc-cs   { font-family: var(--font-mono, monospace); font-size: 11px;
           color: var(--text-secondary, #a8b3ad); margin-top: 2px; word-break: break-all; }

.pc-status {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase;
  border: 1px solid var(--border-dim, #29332e); color: var(--text-secondary, #a8b3ad);
}
.pc-status.active    { color: var(--green-text, #7cff8a); border-color: rgba(13,122,62,.5); }
.pc-status.reserve   { color: var(--amber-text, #d6a84f); border-color: rgba(212,144,10,.5); }
.pc-status.loa       { color: var(--text-muted, #66736c); }
.pc-status.candidate { color: var(--blue-text, #4da3ff); border-color: rgba(21,101,192,.5); }

.pc-sep { height: 1px; background: var(--border-dim, #29332e); margin: 12px 0; }

.pc-lbl { letter-spacing: 2px; font-size: 9.5px; color: var(--text-muted, #66736c);
          text-transform: uppercase; margin: 12px 0 6px; }

.pc-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px;
           font-family: var(--font-mono, monospace); font-size: 10px;
           color: var(--text-secondary, #a8b3ad); }
.pc-meta i { color: var(--text-muted, #66736c); font-style: normal; margin-right: 5px;
             text-transform: uppercase; letter-spacing: 1px; }

.pc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pc-chip  { font-family: var(--font-mono, monospace); font-size: 10px; padding: 3px 9px;
            border-radius: 20px; border: 1px solid var(--border-dim, #29332e);
            color: var(--text-secondary, #a8b3ad); background: var(--bg-base, #0d1110); }
.pc-chip.q { border-color: var(--gold, #d6a84f); color: var(--gold-text, #d6a84f); }

.pc-jacket { font-size: 11.5px; color: var(--text-secondary, #a8b3ad); line-height: 1.55; }
.pc-jacket b { color: var(--text-primary, #f4f7f4); font-weight: 600; }
.pc-dim { color: var(--text-muted, #66736c); }

/* Activity trail — same shape as the Service Record on the full page, tightened. */
.pc-timeline { border-left: 1px solid var(--border-dim, #29332e); padding-left: 10px; }
.pc-tl-item { margin-bottom: 9px; position: relative; }
.pc-tl-item::before {
  content: ""; position: absolute; left: -14px; top: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red, #c8102e);
}
.pc-tl-ev     { font-size: 10px; letter-spacing: 1px; color: var(--text-primary, #f4f7f4); }
.pc-tl-detail { font-size: 11px; color: var(--text-secondary, #a8b3ad); line-height: 1.4; }
.pc-tl-ts     { font-family: var(--font-mono, monospace); font-size: 9px;
                color: var(--text-muted, #66736c); margin-top: 1px; }

.pc-foot {
  font-family: var(--font-mono, monospace); font-size: 9.5px;
  color: var(--text-muted, #66736c);
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border-dim, #29332e);
  display: flex; gap: 6px; align-items: center; justify-content: space-between;
}
.pc-foot .pc-src { color: var(--red-text, #e5484d); text-decoration: none; }
.pc-foot .pc-src:hover { text-decoration: underline; }

/* Touch devices get the card on tap; the hover affordance is meaningless there. */
@media (hover: none) {
  [data-profile]:hover strong, [data-profile]:hover b { text-decoration: none; }
}

/* == AVATARS (v37) : BEGIN ==================================================
 * These rules live HERE, not in a stylesheet of their own, because this is the
 * file base.html actually loads for the profile card. An avatar rule in an
 * unloaded stylesheet is invisible in exactly the way that looks like a broken
 * image rather than a missing link tag.
 *
 * The image is positioned OVER the initials badge rather than replacing it, so
 * a 404, a blocked CDN or a member the bot has never synced degrades to the
 * initials instead of an empty hole where a person's identity goes. */

.pc-av { position: relative; overflow: hidden; }

/* object-fit: cover keeps a non-square CDN image from stretching a face; the
 * badge underneath keeps its own border radius. */
.pc-av-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: var(--bg-raised);
}

/* Roster tables and personnel lists: the same idea at row scale. */
.av {
  position: relative; display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--bg-hover), var(--bg-raised));
  color: var(--text-primary);
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  overflow: hidden; flex: none;
  vertical-align: middle;
}
.av-img { position: absolute; inset: 0; width: 100%; height: 100%;
          object-fit: cover; border-radius: inherit; }
.av-lg { width: 72px; height: 72px; border-radius: 18px; font-size: 24px; }
.av-sm { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; }
/* == AVATARS (v37) : END ==================================================== */