/* ===========================
 * Patient Bar Component Styles (LSH-77 Phase 2)
 * ===========================
 * .lsh-patient — the "who is this patient" context surface, ONE
 * component with two skins (D5):
 *   · default        — slim 32px contextual strip, shell-mounted
 *                      (inside .lsh-shell-header, under the header bar)
 *   · --card         — document header row (avatar + stacked name/meta),
 *                      the naeringarmat modal/inline context; usable
 *                      entirely outside a shell
 * State: .lsh-shell[data-patient="none"] hides the shell-mounted bar.
 * The flag is role="img" + aria-label on the flag span itself; the
 * kennitala chip is a copy-to-clipboard button (js/shell.js wires it
 * through the shared js/clipboard.js mechanism).
 * Height rides --shell-patient-h with a fallback so bare fragments
 * (docs demos) render without a .lsh-shell root.
 * ===========================
 * Dark mode handled entirely by semantic tokens via data-theme.
 * =========================== */


/* ─── 1. Default skin — contextual strip ─── */

.lsh-patient {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  height: var(--shell-patient-h, 32px);
  padding: 0 var(--spacing-4) 0 var(--spacing-6);
  border-top: 1px solid var(--border-secondary);
  background: var(--bg-secondary);
  font-size: var(--font-size-sm);
}
.lsh-patient__flag {
  color: var(--fg-brand-primary);
  font-size: var(--font-size-md);
  display: inline-flex;
}
.lsh-patient__name {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}
.lsh-patient__meta {
  color: var(--text-tertiary);
  white-space: nowrap;
}
.lsh-patient__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);
  padding: var(--spacing-0-5) var(--spacing-2);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-normal);
}
.lsh-patient__chip i { color: var(--icon-fg-subtle); font-size: var(--font-size-xs); }
.lsh-patient__chip:hover { background: var(--bg-tertiary); }
.lsh-patient__chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--brand-500);
}
.lsh-patient__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

/* [hidden] must beat the display rules above (engine hides the flag and
   the location chip when the patient data omits them). */
.lsh-patient__flag[hidden],
.lsh-patient__chip[hidden] { display: none; }

/* Contextual visibility — no patient selected (D11). */
.lsh-shell[data-patient="none"] .lsh-patient { display: none; }


/* ─── 2. Card skin — document header row ─── */

.lsh-patient--card {
  height: auto;
  padding: var(--spacing-5) 0;
  border-top: none;
  border-bottom: 1px solid var(--border-secondary);
  background: transparent;
  gap: var(--spacing-3);
}
.lsh-patient__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--bg-brand-primary);
  color: var(--fg-brand-primary);
  font-size: var(--font-size-md);
}
.lsh-patient__main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.lsh-patient--card .lsh-patient__name { font-size: var(--font-size-md); }
.lsh-patient--card .lsh-patient__meta { font-size: var(--font-size-sm); }


/* ─── 3. Responsive (D7) ─── */
/* ≤640px the location chip and the age meta yield; the kennitala chip
   (the copyable identifier) stays. */

@media (max-width: 640px) {
  .lsh-patient__chip:last-of-type,
  .lsh-patient__meta { display: none; }
}