Visitor sign in kiosk: multi-site, badge printing, WWCC expiry warnings, admin accounts with 2FA

public/css/kiosk.css

@@ -6,8 +6,10 @@
   --rule: #c9d3dc;
   --deep: #0b4f4a;
   --deep-dark: #083a36;
+  --on-brand: #ffffff;
   --exit: #2c4a6b;
   --exit-dark: #1f3650;
+  --on-exit: #ffffff;
   --alert: #96162f;
   --focus: #0b4f4a;
 }
@@ -45,7 +47,17 @@ body {
   gap: 16px;
   padding: 14px 22px;
   background: var(--deep);
-  color: #eef5f3;
+  color: var(--on-brand);
+}
+
+/* An uploaded banner sits in the bar in place of the site name. Transparent PNGs
+   are the point, so nothing is painted behind it. */
+.banner {
+  max-height: 64px;
+  max-width: min(70%, 460px);
+  width: auto;
+  object-fit: contain;
+  display: block;
 }
 
 .site { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
@@ -108,11 +120,11 @@ h2 { font-size: 25px; margin: 4px 0 20px; }
   border-left: 7px solid var(--deep-dark);
   border-radius: 3px;
   background: var(--deep);
-  color: #fff;
+  color: var(--on-brand);
   font: inherit;
   cursor: pointer;
 }
-.door-out { background: var(--exit); border-left-color: var(--exit-dark); }
+.door-out { background: var(--exit); border-left-color: var(--exit-dark); color: var(--on-exit); }
 .door:active { transform: translateY(1px); }
 
 .door-title { display: block; font-size: 27px; font-weight: 650; letter-spacing: -0.01em; }
@@ -131,6 +143,7 @@ h2 { font-size: 25px; margin: 4px 0 20px; }
   cursor: pointer;
 }
 .text-action:hover { background: var(--card); }
+.text-action, .field input, .picker, .choice, .host-option { color: var(--ink); }
 
 /* ------------------------------------------------------- step rail */
 
@@ -280,11 +293,11 @@ a:focus-visible {
   padding: 7px 14px;
   border-radius: 2px;
   background: var(--deep);
-  color: #fff;
+  color: var(--on-brand);
   font-size: 14px;
   font-weight: 600;
 }
-#screen-done-out .mark { background: var(--exit); }
+#screen-done-out .mark { background: var(--exit); color: var(--on-exit); }
 
 /* ------------------------------------------------------------ buttons */
 
@@ -306,7 +319,7 @@ a:focus-visible {
 .nav .primary {
   border: 1px solid var(--deep);
   background: var(--deep);
-  color: #fff;
+  color: var(--on-brand);
   font-weight: 600;
 }
 .nav .ghost {