/* AllowID demo gate — brand palette from the guide.
   Deep Navy #0D1B2A · Primary Blue #1565FF · Accent Cyan #00C2FF · Light Gray #F2F5F9 */

:root {
  --navy: #0D1B2A;
  --blue: #1565FF;
  --cyan: #00C2FF;
  --gray: #F2F5F9;
  --line: rgba(255,255,255,.10);
  --green: #17b26a;
  --red: #e5484d;
  --amber: #f5a524;
  --purple: #9b6dff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--gray);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

.bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
}
.wordmark { font-weight: 700; font-size: 20px; letter-spacing: -.5px; }
.wordmark .id { color: var(--cyan); }
.gate-name { color: #9fb0c4; }
.factor {
  margin-left: auto; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cyan); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
}

main {
  display: grid; grid-template-columns: minmax(320px, 1fr) minmax(280px, 420px);
  gap: 24px; padding: 24px; align-items: start;
}
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }

/* ---- camera ---- */
.viewport {
  position: relative; aspect-ratio: 4/3; width: 100%; max-width: 520px;
  background: #06101b; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
#cam { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The scan window. This is not decoration: gate.js reads its rendered geometry
   and decodes only the pixels underneath it, so changing this width changes what
   the gate actually looks at. Keep it square. */
.reticle {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  width: 38%; aspect-ratio: 1; border: 3px solid rgba(255,255,255,.85); border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(6,16,27,.45);   /* dim everything outside it */
  pointer-events: none;
}
.hidden { display: none !important; }

.controls { display: flex; gap: 10px; margin-top: 14px; }
button {
  font: inherit; font-weight: 600; border-radius: 12px; padding: 11px 18px;
  border: 1px solid transparent; cursor: pointer;
}
.primary { background: linear-gradient(90deg, var(--blue), var(--cyan)); color: #fff; }
.ghost { background: transparent; color: var(--gray); border-color: var(--line); }
.allow { background: var(--green); color: #05210f; }
.deny  { background: var(--red); color: #2a0507; }

.manual { margin-top: 16px; color: #9fb0c4; }
.manual summary { cursor: pointer; }
.manual-row { display: flex; gap: 8px; margin-top: 10px; }
#manual-code {
  flex: 1; font: 600 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em; text-transform: uppercase;
  background: #06101b; color: var(--gray);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
}
.hint { font-size: 13px; color: #7d8fa3; }

/* ---- LED, per 03-reader-firmware.md §8 ---- */
.led {
  border-radius: 18px; padding: 34px 20px; text-align: center;
  font-size: 22px; font-weight: 700; letter-spacing: -.2px;
  border: 1px solid var(--line); transition: background .16s, color .16s;
}
.led.idle      { background: #0a1725; color: #7d8fa3; }
.led.inflight  { background: rgba(21,101,255,.18); color: #7fb0ff; }
.led.awaiting  { background: rgba(0,194,255,.16); color: var(--cyan); }
.led.allowed   { background: var(--green); color: #05210f; }
.led.denied    { background: var(--red); color: #fff; }
.led.unknown   { background: var(--amber); color: #2a1a00; }
.led.error     { background: var(--purple); color: #12002e; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }

.subject { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.who { font-size: 18px; font-weight: 600; }
.ref { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #7d8fa3; margin-top: 4px; }

.palm { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.palm-ask { margin: 0 0 6px; font-weight: 600; }
.palm-note { margin: 0 0 12px; font-size: 13px; color: #7d8fa3; }
.palm-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

.timing { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: #7d8fa3; min-height: 1.4em; }

/* ---- log ---- */
.log { padding: 0 24px 24px; }
.log h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: #7d8fa3; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
th { color: #7d8fa3; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.d-allowed { color: #62d99b; } .d-denied { color: #ff8a8f; } .d-unknown { color: #ffcc73; }

footer { padding: 0 24px 40px; color: #7d8fa3; font-size: 13px; max-width: 70ch; }