/* Lead-Safe Certification System v2 — official NJ style per design handoff */
* { box-sizing: border-box; }
body {
  margin: 0; background: #f0f0f0; color: #1f2937;
  font-family: 'Public Sans', sans-serif;
}
a { color: #0b4d8c; } a:hover { color: #003366; }
input, select, button, textarea { font-family: 'Public Sans', sans-serif; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
button:focus-visible, a:focus-visible { outline: 3px solid #ffb400; outline-offset: 2px; }

/* ---------- boot screen (session resolving) ---------- */
.boot-screen { position: fixed; inset: 0; background: #003366; display: flex; align-items: center; justify-content: center; z-index: 100; }
.boot-mark { width: 64px; height: 64px; font-size: 26px; animation: bootpulse 1.1s ease-in-out infinite; }
@keyframes bootpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.9); } }
.boot-screen.hidden { display: none; }

/* ---------- public home / login ---------- */
.pub-home { min-height: 100vh; background: #003366; padding: 0 18px 46px; }
.pub-top { max-width: 940px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 26px 0 16px; }
.pub-rule { max-width: 940px; margin: 0 auto; height: 3px; background: linear-gradient(to right, #ffb400 0%, #ffb400 180px, rgba(255, 180, 0, .12) 100%); }
.pub-hero { max-width: 940px; margin: 24px auto 28px; color: #dbe7f3; font-size: 15px; line-height: 1.75; }
.pub-hero b { color: #ffb400; }
.pub-cards { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.pub-cards .login-card { width: auto; border-top: 4px solid #ffb400; padding: 28px 30px; box-shadow: 0 10px 34px rgba(0, 0, 0, .28); }
.pub-foot-note { max-width: 940px; margin: 26px auto 0; text-align: center; color: #cfe0f0; font-size: 12.5px; line-height: 2; }
.pub-foot-note a { color: #ffb400; font-weight: 800; }
.signin-overlay { position: fixed; inset: 0; background: rgba(0, 10, 30, .68); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.signin-overlay.hidden { display: none; }
@media (max-width: 900px) { .pub-cards { grid-template-columns: 1fr; } }
.login-card { width: 430px; background: #fff; border: 1px solid #b7bcc2; padding: 40px; }
.lookup-card { padding: 24px 28px; }
.law-note { margin-top: 16px; font-size: 11.5px; line-height: 1.55; color: #6b7280; }
.lookup-btn { width: 100%; margin-top: 12px; border: 1px solid #003366; background: none; color: #003366; font-weight: 700; font-size: 12.5px; padding: 10px; cursor: pointer; }
.lookup-btn:hover { background: #003366; color: #fff; }
#lookup-input { margin-top: 10px; }
.lookup-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #e5e7eb; font-size: 13px; }
.lookup-row b { flex: 1; }
.lookup-row .county { font-size: 11px; color: #6b7280; }
.lookup-hint { font-size: 12px; color: #9ca3af; padding: 10px 2px; }
.brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.brand-mark { width: 40px; height: 40px; background: #ffb400; color: #003366; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.brand-name { margin: 0; font-weight: 800; font-size: 17px; line-height: 1.2; color: #003366; }
.brand-sub { font-size: 12px; color: #4b5563; }
.login-rule { height: 2px; background: #003366; margin: 20px 0; }
.login-label { display: block; font-size: 11px; font-weight: 800; color: #4b5563; text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 4px; }
.login-input { width: 100%; padding: 10px 14px; border: 1px solid #b7bcc2; font-size: 14px; background: #f8f9fa; }
.login-input:focus { outline: 2px solid #0b4d8c; border-color: #0b4d8c; }
.login-btn { width: 100%; margin-top: 18px; background: #003366; color: #fff; border: none; padding: 12px; font-size: 14px; font-weight: 800; cursor: pointer; }
.login-btn:hover { background: #0b4d8c; }
.login-btn:disabled { background: #6b7280; cursor: wait; }
.login-note { margin-top: 20px; font-size: 11px; color: #9ca3af; text-align: center; }
.login-error { margin-top: 12px; color: #9a3412; font-size: 12.5px; font-weight: 700; }
.login-error:empty { display: none; }

/* ---------- shell ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { background: #003366; color: #fff; padding: 11px 26px; display: flex; align-items: center; gap: 12px; }
.topbar .brand-mark { width: 28px; height: 28px; font-size: 12px; }
.topbar-title { font-weight: 700; font-size: 14px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.avatar { width: 26px; height: 26px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex: none; }
/* enclose the initials — Leo's navy avatar was invisible on the navy topbar */
.topbar .avatar { border: 2px solid #ffb400; box-sizing: content-box; }
.profile-btn { display: flex; align-items: center; gap: 10px; background: none; border: none; color: #fff; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.profile-btn:hover b { text-decoration: underline; }
.signout-btn { border: 1px solid rgba(255,255,255,.4); background: none; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; cursor: pointer; }
.signout-btn:hover { background: rgba(255,255,255,.12); }
.tabnav-wrap { position: relative; background: #0b4d8c; }
.tabnav { background: #0b4d8c; padding: 0 26px; display: flex; gap: 2px; }
/* scroll hints: faded edges + arrows when more tabs live off-screen */
.tab-fade { position: absolute; top: 0; bottom: 0; width: 36px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 700; pointer-events: none; }
.tab-fade.right { right: 0; background: linear-gradient(to left, #0b4d8c 35%, rgba(11,77,140,0)); }
.tab-fade.left { left: 0; background: linear-gradient(to right, #0b4d8c 35%, rgba(11,77,140,0)); }
.tab-fade.hidden { display: none; }
.tab { display: flex; align-items: center; gap: 8px; border: none; background: transparent; color: #cfe0f0; font-size: 12.5px; font-weight: 700; padding: 9px 18px; cursor: pointer; }
.tab:hover { background: rgba(255,255,255,.12); color: #fff; }
.tab.active { background: #f0f0f0; color: #003366; }
.tab .badge { background: #9a3412; color: #fff; font-size: 10px; font-weight: 800; padding: 1px 7px; }
/* louder red when the count is certificates that have actually lapsed */
.tab .badge.badge-danger { background: #b91c1c; }
/* Sub-tabs — a lighter band under the main nav, so the ten old top-level tabs
   collapse to six without hiding anything. Scrolls sideways on narrow screens
   rather than wrapping to a second line. */
.subnav {
  display: flex; gap: 2px; align-items: center;
  background: #e8eaed; border-bottom: 1px solid #b7bcc2;
  padding: 0 26px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.subnav::-webkit-scrollbar { display: none; }
.subtab {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  border: none; background: transparent; color: #4b5563;
  font-size: 12px; font-weight: 700; padding: 8px 14px; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.subtab:hover { color: #003366; background: rgba(0,51,102,.05); }
.subtab.active { color: #003366; border-bottom-color: #003366; background: #f0f0f0; }
.subtab .badge { background: #9a3412; color: #fff; font-size: 9.5px; font-weight: 800; padding: 1px 6px; }
.subtab .badge.badge-danger { background: #b91c1c; }

.main { flex: 1; padding: 20px 26px 40px; max-width: 1240px; width: 100%; margin: 0 auto; }

/* ---------- shared ---------- */
.h1 { margin: 0; font-size: 21px; font-weight: 800; color: #003366; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.sub { font-size: 12.5px; color: #4b5563; }
.card { background: #fff; border: 1px solid #b7bcc2; }
.card-head { display: flex; justify-content: space-between; align-items: center; background: #e8eaed; border-bottom: 1px solid #b7bcc2; padding: 9px 14px; font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: #1f2937; }
.btn { border: none; background: #003366; color: #fff; font-size: 13px; font-weight: 700; padding: 10px 18px; cursor: pointer; }
.btn:hover { background: #0b4d8c; }
.btn-outline { border: 1px solid #003366; background: none; color: #003366; font-weight: 700; font-size: 12.5px; padding: 9px 16px; cursor: pointer; }
.btn-outline:hover { background: #003366; color: #fff; }
.btn-link { border: none; background: none; color: #0b4d8c; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; }
.pill { font-size: 10px; font-weight: 800; padding: 2px 8px; }
/* card entrance — cards ease down into place when a screen opens.
   Applied only on screen change (see render()), never on data refresh. */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-in > *:not(.stat-grid):not(.dash-grid),
.anim-in > .stat-grid > .stat,
.anim-in > .dash-grid > * {
  animation: cardIn .38s cubic-bezier(.22, .9, .32, 1) both;
}
/* stagger: stat squares cascade first, then the panels below them */
.anim-in > .stat-grid > .stat:nth-child(1) { animation-delay: .03s; }
.anim-in > .stat-grid > .stat:nth-child(2) { animation-delay: .09s; }
.anim-in > .stat-grid > .stat:nth-child(3) { animation-delay: .15s; }
.anim-in > .stat-grid > .stat:nth-child(4) { animation-delay: .21s; }
.anim-in > .dash-grid > *:nth-child(1) { animation-delay: .24s; }
.anim-in > .dash-grid > *:nth-child(2) { animation-delay: .30s; }
/* :not() chain repeated so these beat the shorthand rule's specificity */
.anim-in > *:not(.stat-grid):not(.dash-grid):nth-child(1) { animation-delay: .02s; }
.anim-in > *:not(.stat-grid):not(.dash-grid):nth-child(2) { animation-delay: .07s; }
.anim-in > *:not(.stat-grid):not(.dash-grid):nth-child(3) { animation-delay: .12s; }
.anim-in > *:not(.stat-grid):not(.dash-grid):nth-child(4) { animation-delay: .17s; }
.anim-in > *:not(.stat-grid):not(.dash-grid):nth-child(5) { animation-delay: .22s; }
.anim-in > *:not(.stat-grid):not(.dash-grid):nth-child(n+6) { animation-delay: .26s; }
@media (prefers-reduced-motion: reduce) {
  .anim-in > *:not(.stat-grid):not(.dash-grid),
  .anim-in > .stat-grid > .stat,
  .anim-in > .dash-grid > * { animation: none; }
}

/* floating + button */
.fab { position: fixed; right: 20px; bottom: 24px; width: 58px; height: 58px; border-radius: 50%; background: #ffb400; color: #003366; font-size: 30px; font-weight: 800; border: none; box-shadow: 0 10px 28px rgba(0,0,0,.4); cursor: pointer; z-index: 45; line-height: 1; transition: transform .12s; }
.fab:hover { transform: scale(1.07); }
.fab-menu { position: fixed; right: 20px; bottom: 94px; display: flex; flex-direction: column; gap: 8px; z-index: 45; }
.fab-item { background: #003366; color: #fff; border: none; padding: 13px 20px; font-weight: 700; font-size: 13.5px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35); text-align: left; }
.fab-item:hover { background: #0b4d8c; }

/* AI scan box on New Contact */
.ai-box { border: 1.5px dashed #0b4d8c; background: #f4f8fc; padding: 16px; text-align: center; cursor: pointer; font-size: 13px; color: #0b4d8c; font-weight: 700; }
.ai-box:hover { background: #eaf1f8; }

/* contacts book */
.contact-row { display: grid; grid-template-columns: 46px 1.2fr 1fr; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
.contact-av { width: 38px; height: 38px; border-radius: 50%; background: #0b4d8c; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.prop-chip { display: inline-block; background: #f1f3f5; border: 1px solid #b7bcc2; color: #1f2937; padding: 3px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.prop-chip:hover { border-color: #0b4d8c; color: #0b4d8c; background: #eaf1f8; }
@media (max-width: 900px) {
  .contact-row { grid-template-columns: 46px 1fr; }
  .contact-row > div:last-child { grid-column: 1 / -1; justify-content: flex-start !important; }
}

/* dwelling-unit badge — units read at a glance instead of blending into text */
.unit-badge { display: inline-block; background: #eaf1f8; border: 1.5px solid #0b4d8c; color: #003366; font-weight: 800; font-size: 11.5px; padding: 2px 9px; white-space: nowrap; }
.unit-badge.lg { font-size: 14px; padding: 4px 13px; vertical-align: middle; }
.pill-strict { background: #9a3412; color: #fff; font-size: 9.5px; }
.pill-active { background: #eaf1f8; color: #0b4d8c; }
.pill-due { background: #fff8e6; color: #9a3412; }
/* already lapsed — louder than "due", because the unit has no valid cert */
.pill-danger { background: #fef2f2; color: #b91c1c; }
.pill-sent { background: #eef7ee; color: #1a7f37; }
.pill-expired { background: #fdecec; color: #9a3412; }
.notice { background: #fff8e6; border: 1px solid #e0a800; border-left: 6px solid #e0a800; padding: 13px 16px; margin-bottom: 18px; }
.notice-title { font-weight: 800; font-size: 12px; color: #5c4400; text-transform: uppercase; letter-spacing: .04em; }
.notice-body { font-size: 13px; color: #5c4400; margin-top: 4px; }
.notice .btn-ghost { margin-top: 8px; border: 1px solid #5c4400; background: none; color: #5c4400; font-size: 11.5px; font-weight: 700; padding: 5px 12px; cursor: pointer; }
.notice .btn-ghost:hover { background: #5c4400; color: #fff; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: #fff; border: 1px solid #b7bcc2; padding: 11px 14px; }
.stat-label { font-size: 10.5px; font-weight: 700; color: #4b5563; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 22px; font-weight: 800; margin-top: 3px; }
.stat-sub { font-size: 11px; color: #6b7280; margin-top: 2px; }

.row-btn { display: grid; gap: 8px; align-items: center; width: 100%; padding: 10px 14px; border: none; border-bottom: 1px solid #e5e7eb; background: none; cursor: pointer; text-align: left; font-size: 12.5px; }
.row-btn:hover { background: #f8f9fa; }
.table-head { display: grid; gap: 8px; padding: 9px 14px; background: #e8eaed; border-bottom: 1px solid #b7bcc2; font-size: 10.5px; font-weight: 800; color: #4b5563; text-transform: uppercase; letter-spacing: .04em; }

.field-label { font-size: 11px; font-weight: 800; color: #374151; text-transform: uppercase; margin-bottom: 4px; }
.input, .select, .textarea { width: 100%; padding: 9px 12px; border: 1px solid #b7bcc2; font-size: 13.5px; background: #f8f9fa; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid #0b4d8c; border-color: #0b4d8c; }
.textarea { resize: vertical; min-height: 74px; line-height: 1.5; }

/* ---------- new cert ---------- */
.suggest-wrap { position: relative; }
.suggest-list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #b7bcc2; box-shadow: 0 12px 30px rgba(0,0,0,.15); z-index: 10; max-height: 320px; overflow-y: auto; }
.suggest-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 14px; border: none; border-bottom: 1px solid #e5e7eb; background: none; cursor: pointer; text-align: left; font-size: 13px; }
.suggest-item:hover { background: #eaf1f8; }
.parcel-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.parcel-cell { background: #f8f9fa; border: 1px solid #b7bcc2; padding: 9px 12px; }
.parcel-cell-label { font-size: 10px; font-weight: 800; color: #4b5563; text-transform: uppercase; }
.parcel-cell-value { font-weight: 700; font-size: 13px; margin-top: 2px; }
.unit-chip { display: inline-flex; align-items: center; gap: 6px; background: #eaf1f8; border: 1px solid #0b4d8c; color: #003366; font-size: 12px; font-weight: 700; padding: 4px 10px; margin: 0 8px 8px 0; }
.unit-chip button { border: none; background: none; color: #003366; cursor: pointer; font-size: 13px; padding: 0; line-height: 1; }
.upload-zone { width: 100%; border: 1.5px dashed #b7bcc2; background: #f8f9fa; padding: 16px; font-size: 13px; color: #4b5563; cursor: pointer; text-align: center; }
.upload-zone:hover { border-color: #0b4d8c; color: #0b4d8c; }
.upload-done { display: flex; align-items: center; gap: 10px; background: #eef7ee; border: 1px solid #1a7f37; padding: 10px 14px; font-size: 13px; color: #14532d; }
.form-error { margin-top: 10px; color: #9a3412; font-size: 13px; font-weight: 700; }

/* ---------- cert detail paper ---------- */
.paper { background: #fff; border: 2px solid #003366; box-shadow: 0 6px 24px rgba(0,0,0,.1); max-width: 850px; padding: 40px 50px; font-family: Georgia, 'Times New Roman', serif; }
.paper-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px double #003366; padding-bottom: 10px; }
.paper-title { font-size: 25px; font-weight: 700; letter-spacing: .03em; color: #003366; }
.meta-chip { background: #fff; border: 1px solid #b7bcc2; padding: 8px 13px; font-size: 12px; }
.meta-chip.warn { background: #fff8e6; border-color: #e0a800; color: #5c4400; }

/* ---------- townships ---------- */
.switch { position: relative; width: 46px; height: 26px; border-radius: 99px; border: none; cursor: pointer; background: #b7bcc2; transition: background .15s; flex: none; }
.switch.on { background: #9a3412; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.switch.on .knob { left: 23px; }

/* ---------- public share page ---------- */
.pub-wrap { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; background: #003366; padding: 40px 14px; }
.pub-card { width: 480px; max-width: 100%; background: #fff; border: 1px solid #b7bcc2; box-shadow: 0 12px 40px rgba(0,0,0,.25); overflow: hidden; }
.pub-status { padding: 26px 24px; text-align: center; color: #fff; }
.pub-status.valid { background: #1a7f37; }
.pub-status.expired { background: #9a3412; }
.pub-badge { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 10px; }
.pub-status-title { font-size: 19px; font-weight: 800; }
.pub-status-sub { font-size: 12.5px; opacity: .9; margin-top: 3px; }
.pub-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #e5e7eb; font-size: 13px; }
.pub-row span:first-child { color: #4b5563; white-space: nowrap; }
.pub-row b { text-align: right; }
.pub-sibs { padding: 4px 24px 14px; }
.pub-sib-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #e5e7eb; font-size: 13px; text-decoration: none; color: #1f2937; }
.pub-sib-row b { flex: 1; }
.pub-sib-row:hover { background: #f8f9fa; }
.pub-foot { font-size: 11px; color: #9ca3af; text-align: center; padding: 14px 24px 20px; line-height: 1.6; }

.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
/* long dashboard lists scroll inside their card instead of stretching the page —
   height adapts to the window so the dashboard fits without page scrolling */
.scroll-list { max-height: max(180px, calc(100vh - 600px)); overflow-y: auto; }
@media (max-width: 900px) { .scroll-list { max-height: 320px; } }
/* Wide tables scroll sideways on small screens instead of squishing */
.table-card { overflow-x: auto; }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .main { padding: 14px 12px 44px; }
  .h1 { font-size: 18px; }
  .stat-grid, .stat-grid.cols3 { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .tabnav { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 12px; scrollbar-width: none; }
  .tabnav::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; padding: 9px 13px; }
  .topbar { padding: 10px 12px; flex-wrap: wrap; }
  /* wide tables keep honest column widths and scroll sideways instead of crushing */
  .table-card .table-head, .table-card .row-btn { min-width: 880px; }
  .parcel-grid { grid-template-columns: 1fr 1fr; }
  .paper { padding: 22px 18px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head .btn, .page-head .btn-outline { flex: 1; text-align: center; }
  .meta-chip { font-size: 11.5px; padding: 7px 10px; }
  .login-card { width: min(430px, 92vw); padding: 28px 22px; }
}
@media (max-width: 600px) {
  .topbar-title { display: none; } /* brand mark + user chip still shown */
  .stat-grid, .stat-grid.cols3 { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 21px; }
}

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #cfe0f0; border-top-color: #003366; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; font-size: 13px; padding: 10px 18px; z-index: 99; }

/* Certificate detail header — title/ID block beside the actions on desktop.
   On narrow screens the actions drop below the whole address + block/lot line
   instead of squeezing it into a three-line column. */
.detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.detail-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .detail-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .detail-head-btns { width: 100%; }
  .detail-head-btns > * { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* ---------- delivery log ---------- */
/* Caps at roughly six rows then scrolls, so a heavily re-sent certificate
   can't push the rest of the card off screen. */
.send-log { max-height: 148px; overflow-y: auto; padding-right: 2px; }
.send-row {
  display: flex; gap: 7px; align-items: flex-start;
  padding: 2.5px 0; border-radius: 4px;
}
.send-row:hover { background: #f9fafb; }
/* the ✕ stays out of the way until you hover the row it belongs to */
.send-del {
  flex: none; border: 0; background: none; cursor: pointer;
  color: #9ca3af; font-size: 11px; line-height: 1; padding: 3px 5px;
  border-radius: 4px; opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.send-row:hover .send-del { opacity: 1; }
.send-del:hover { color: #b91c1c; background: #fef2f2; }
.send-del:focus-visible { opacity: 1; outline: 2px solid #b91c1c; outline-offset: 1px; }
.send-del-yes, .send-del-no {
  flex: none; cursor: pointer; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px; border: 1px solid transparent;
}
.send-del-yes { background: #b91c1c; color: #fff; }
.send-del-yes:disabled { opacity: .6; cursor: default; }
.send-del-no { background: #fff; color: #4b5563; border-color: #d1d5db; }
/* touch devices have no hover — keep the control permanently visible */
@media (hover: none) {
  .send-del { opacity: 1; }
}

/* Delivery-failure warning — dismissible. The ✕ only acknowledges it; the
   send records stay as proof, and a newer failure raises it again. */
.send-warn {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 6px 0 2px; padding: 7px 9px;
  background: #fef2f2; border-left: 3px solid #b91c1c; border-radius: 4px;
  font-size: 11px; color: #991b1b; font-weight: 600;
}
.send-warn-x {
  flex: none; border: 0; background: none; cursor: pointer;
  color: #b91c1c; font-size: 11px; line-height: 1; padding: 2px 5px;
  border-radius: 4px; opacity: .65;
}
.send-warn-x:hover { opacity: 1; background: rgba(185,28,28,.12); }
.send-warn-x:disabled { opacity: .3; cursor: default; }

/* iOS Safari zooms into any input whose font-size is under 16px — and it does
   NOT zoom back out on blur, which is why the app stayed magnified after
   signing in. 16px at touch widths prevents the zoom happening at all.
   (viewport maximum-scale=1 would also stop it, but by disabling pinch-zoom
   entirely, which breaks accessibility for anyone who needs to magnify.) */
@media (max-width: 900px) {
  .login-input,
  .input, .select, .textarea { font-size: 16px; }
}

/* contact relationship tag */
.ctype {
  display: inline-block; vertical-align: 1px; margin-left: 4px;
  background: #eef2f7; color: #0b4d8c; border: 1px solid #d6e0ea;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 3px;
}

/* Two-up form row. `min-width:0` is the fix that matters: grid items default
   to min-width:auto, so a native <input type="date"> — which has a wide
   intrinsic size on iOS — refuses to shrink and bleeds past the card edge.
   Below 520px the pair stacks rather than fighting for room. */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-2 > * { min-width: 0; }
.form-row-2 input, .form-row-2 select { max-width: 100%; }
@media (max-width: 520px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* iOS Safari gives <input type="date"> a native intrinsic width it refuses to
   shrink below — even inside a min-width:0 grid item — so the field pushes past
   the card edge on iPhone. Resetting the native appearance plus its own
   min-width is what makes it honour width:100% there. This is NOT reproducible
   in desktop Chrome, where the field already fits. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* Safety net: nothing in this app should ever scroll the page sideways.
   Containers that genuinely need it (tab bars, wide tables) opt in with their
   own overflow-x and still work inside this. */
html, body { max-width: 100%; overflow-x: hidden; }