/* Explicit component colors override the dark Cashier workspace palette. */
body .hnd-confirm-dialog {
  width: min(92vw,520px); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 24px; border-radius: 20px; color: #2b1b12; background: #fffaf1; border: 2px solid #70523c;
}
body .hnd-confirm-dialog :is(h2,p) { color: #2b1b12; }
body .hnd-confirm-dialog .secondary { color: #2b1b12; background: #fffaf1; border: 2px solid #70523c; }
body .hnd-confirm-dialog .primary { color: #fff; background: #51321b; border: 2px solid #51321b; }
body .hnd-confirm-dialog .actions { display: flex; flex-wrap: wrap; gap: 12px; }
body .hnd-confirm-dialog button:focus-visible { outline: 3px solid #175c91; outline-offset: 4px; }
.hnd-confirm-dialog::backdrop { background: rgba(24,13,8,.66); }
body .hnd-confirm-dialog .danger { color: #fff; background: #922b2b; border: 2px solid #922b2b; }
.cashier .pos-confirm-dialog {
  color: #2b1b12; background: #fffaf1; border: 2px solid #70523c;
  max-height: calc(100dvh - 32px); overflow: auto;
}
.cashier .pos-confirm-dialog :is(h2,p,.eyebrow) { color: #2b1b12; }
.cashier .pos-confirm-dialog .secondary {
  color: #2b1b12; background: #fffaf1; border: 2px solid #70523c;
}
.cashier .pos-confirm-dialog .danger {
  color: #ffffff; background: #922b2b; border: 2px solid #922b2b;
}
.cashier .pos-confirm-dialog button:disabled {
  color: #625b53; background: #e3ddd3; border: 2px dashed #625b53;
  opacity: 1; cursor: not-allowed;
}
.cashier .pos-confirm-dialog button:focus-visible,
.safety-card :is(a,button,input,textarea):focus-visible {
  outline: 3px solid #175c91; outline-offset: 4px; box-shadow: 0 0 0 3px #fffaf1;
}
/* Cards follow document flow; login decoration must not reorder content. */
.safety-card { display: block; max-width: 620px; margin: 24px auto; color: #2b1b12; background: #fffaf1; }
.safety-card h1 { font-size: clamp(1.8rem,5vw,2.45rem); line-height: 1.15; margin: 8px 0 18px; color: #2b1b12; }
.safety-card :is(h2,p,label,small,.eyebrow) { color: #2b1b12; }
.safety-card .actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.safety-card .button { display: block; text-align: center; text-decoration: none; white-space: normal; }
.safety-card .primary { color: #fff; background: #51321b; border: 2px solid #51321b; }
.safety-card .secondary { color: #2b1b12; background: #fffaf1; border: 2px solid #70523c; }
.safety-card .danger { color: #fff; background: #922b2b; border: 2px solid #922b2b; white-space: normal; }
.safety-card .back { color: #51321b; text-decoration: underline; }
.emergency-signout { border: 2px solid #922b2b; margin-top: 32px; }
.safety-card .form-grid { grid-template-columns: minmax(0,1fr); }
@media (max-width: 400px) {
  .safety-card { padding: 18px; }
  .cashier .pos-confirm-dialog { padding: 18px; }
  .cashier .pos-confirm-dialog .actions { flex-direction: column; }
}