/* #78 Patient ID / Wristband */
.wb{ display:grid; grid-template-columns: 1fr 1fr; gap:14px;}
@media (max-width:780px){ .wb{ grid-template-columns:1fr;} }

.wb__card{ background:var(--ax-background-default); border:1px solid var(--ax-border-default); border-radius:var(--ax-radius-lg); padding:14px; display:flex; flex-direction:column; gap:10px;}
.wb__card-h{ display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; border-bottom:1px solid var(--ax-border-subtle);}
.wb__card-title{ font-size:12px; font-weight:600; color:var(--ax-text-heading);}
.wb__card-meta{ font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle);}

/* Physical wristband — printed appearance (uses --app-wristband-* aliases) */
.wb__band{ background:var(--ax-surface-paper); color:var(--ax-surface-paper-ink); border-radius:8px; padding:12px 14px; box-shadow: inset 0 0 0 1px var(--ax-border-default), 0 1px 2px color-mix(in srgb, var(--ax-color-zinc-950) 6%, transparent); position:relative; overflow:hidden; min-height:120px;}
.wb__band--alert{ background: repeating-linear-gradient(45deg, var(--ax-surface-paper) 0 8px, var(--ax-error-faint) 8px 16px);}
.wb__band--alert .wb__band-inner{ background:var(--ax-surface-paper); border:2px solid var(--ax-id-band-allergy); padding:10px; border-radius:5px;}
.wb__band-inner{ display:grid; grid-template-columns: 1fr 78px; gap:12px; align-items:center;}
.wb__band-info{ display:flex; flex-direction:column; gap:3px;}
.wb__band-name{ font-size:14px; font-weight:700; line-height:1.2; letter-spacing:-0.01em; color:var(--ax-surface-paper-ink);}
.wb__band-name-th{ font-size:11px; color:var(--ax-surface-paper-ink-meta); line-height:1.3;}
.wb__band-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:4px;}
.wb__band-field{ display:flex; flex-direction:column;}
.wb__band-field-label{ font-family:var(--ax-font-mono); font-size:7px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ax-surface-paper-ink-meta); font-weight:700;}
.wb__band-field-value{ font-family:var(--ax-font-mono); font-size:11px; font-weight:600; color:var(--ax-surface-paper-ink); letter-spacing:0.02em;}
.wb__band-barcode{ display:flex; flex-direction:column; align-items:center; gap:3px;}
.wb__band-barcode-bars{ height:34px; width:100%; background:
  repeating-linear-gradient(90deg, var(--ax-surface-paper-ink) 0 2px, var(--ax-surface-paper) 2px 3px, var(--ax-surface-paper-ink) 3px 4px, var(--ax-surface-paper) 4px 6px, var(--ax-surface-paper-ink) 6px 8px, var(--ax-surface-paper) 8px 9px, var(--ax-surface-paper-ink) 9px 11px, var(--ax-surface-paper) 11px 13px);
}
.wb__band-barcode-id{ font-family:var(--ax-font-mono); font-size:8px; color:var(--ax-surface-paper-ink); letter-spacing:0.06em;}
.wb__band-alert-tag{ position:absolute; top:0; right:0; background:var(--ax-id-band-allergy); color:var(--ax-text-inverted); font-family:var(--ax-font-mono); font-size:9px; font-weight:700; padding:3px 8px; border-bottom-left-radius:5px; letter-spacing:0.06em; text-transform:uppercase;}
.wb__band-alerts{ display:flex; gap:5px; margin-top:5px; flex-wrap:wrap;}
.wb__band-alert-pill{ display:inline-flex; align-items:center; padding:1px 5px; background:var(--ax-id-band-allergy); color:var(--ax-text-inverted); font-family:var(--ax-font-mono); font-size:8px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; border-radius:2px;}

/* Color band variants — hospital safety identity (industry standard) */
.wb__color-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;}
.wb__color-band{ flex:1; min-width:90px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; border-radius:5px; font-family:var(--ax-font-mono); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ax-text-inverted);}
.wb__color-band--red{ background:var(--ax-id-band-allergy);}
.wb__color-band--yellow{ background:var(--ax-id-band-fall-risk); color:var(--ax-surface-paper-ink);}
.wb__color-band--purple{ background:var(--ax-id-band-dnr);}
.wb__color-band--pink{ background:var(--ax-id-band-restricted);}
.wb__color-band--green{ background:var(--ax-id-band-limb-alert);}
.wb__color-band-label{ font-size:8px; opacity:0.85;}

/* Scan demo */
.wb__scan{ display:grid; grid-template-columns: 60px 1fr; gap:10px; padding:10px; background:var(--ax-background-subtle); border-radius:6px; align-items:center;}
.wb__scan-icon{ width:60px; height:60px; border-radius:8px; background:var(--ax-text-heading); color:var(--ax-background-default); display:grid; place-items:center; font-family:var(--ax-font-mono); font-size:24px; font-weight:700;}
.wb__scan-info{ display:flex; flex-direction:column; gap:2px;}
.wb__scan-result{ font-size:11px; color:var(--ax-success-emphasis); font-family:var(--ax-font-mono); font-weight:700; text-transform:uppercase; letter-spacing:0.04em;}
.wb__scan-name{ font-size:13px; font-weight:600; color:var(--ax-text-heading);}
.wb__scan-meta{ font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle);}

/* Two-ID match check list */
.wb__ck{ display:flex; flex-direction:column; gap:5px;}
.wb__ck-row{ display:grid; grid-template-columns: 16px 100px 1fr; gap:8px; align-items:center; font-size:11px;}
.wb__ck-box{ width:13px; height:13px; border-radius:3px; background:var(--ax-success-emphasis); position:relative;}
.wb__ck-box::after{ content:'✓'; position:absolute; top:-3px; left:1.5px; color:var(--ax-background-default); font-size:11px; font-weight:700;}
.wb__ck-label{ font-family:var(--ax-font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ax-text-subtle); font-weight:600;}
.wb__ck-val{ color:var(--ax-text-heading); font-weight:600; font-family:var(--ax-font-mono);}