/* =====================================================
   PCCCTrace Mobile App (Flutter) — Prototype Design Tokens
   Source: 07-4-ux-mobile-dn-consumer.md §5 / §7 / §11
   Direction A — "Camera-first Glassmorphism" · Material 3 seed #1e40af
   HTML simulation of a phone (390×844) — phone-first, no framework.
   ===================================================== */

:root {
  /* Material 3 color tokens (§5.1) */
  --primary:        #1e40af;
  --primary-2:      #2447a8;
  --on-primary:     #ffffff;
  --primary-container:#dbeafe;
  --success:        #16a34a;
  --warning:        #d97706;
  --error:          #dc2626;
  --surface:        #ffffff;
  --surface-dim:    #fafafa;
  --surface-2:      #f1f5f9;
  --surface-3:      #e9eef5;
  --on-surface:     #171717;
  --on-surface-2:   #525252;
  --on-surface-muted:#737373;
  --outline:        #e5e5e5;
  --outline-2:      #d4d4d4;

  --success-soft:   #dcfce7;
  --warning-soft:   #fef3c7;
  --error-soft:     #fee2e2;
  --primary-soft:   #dbeafe;

  /* Radius (Material 3-ish) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* Spacing (§5.3) — 4/8/12/16/24/32/48 dp */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px;

  /* Device metrics */
  --device-w: 390px;
  --device-h: 844px;
  --statusbar-h: 44px;
  --appbar-h: 56px;
  --bottomnav-h: 72px;

  --font: "Roboto", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: #0b1220;            /* desk backdrop behind the phone */
  color: var(--on-surface);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 12px 48px;
  min-height: 100vh;
}
a { color: var(--primary); text-decoration: none; }
.mono { font-family: var(--mono); letter-spacing: 0.02em; }

/* ---- demo nav strip above the phone ---- */
.demo-nav {
  width: var(--device-w); max-width: 100%;
  color: #94a3b8; font-size: 12px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.demo-nav a { color: #93c5fd; }
.demo-nav .id { font-family: var(--mono); color: #fbbf24; font-weight: 700; }

/* ============= PHONE FRAME ============= */
.phone {
  width: var(--device-w); max-width: 100%;
  height: var(--device-h);
  background: var(--surface-dim);
  border-radius: 44px;
  border: 10px solid #11151c;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 0 0 2px #2a2f37;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}
/* notch */
.phone::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 150px; height: 26px; background: #11151c;
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; z-index: 60;
}

/* status bar */
.statusbar {
  height: var(--statusbar-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; padding-top: 6px;
  font-size: 13px; font-weight: 600; color: var(--on-surface);
  background: transparent; position: relative; z-index: 5;
}
.statusbar.on-dark { color: #fff; }
.statusbar .clock { font-variant-numeric: tabular-nums; }
.statusbar .sysicons { display: flex; gap: 6px; font-size: 12px; letter-spacing: 1px; }

/* app bar */
.appbar {
  height: var(--appbar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4);
  background: var(--surface);
  border-bottom: 1px solid var(--outline);
}
.appbar.primary { background: var(--primary); color: #fff; border-bottom: 0; }
.appbar .back { font-size: 22px; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin-left: -6px; }
.appbar .title { font-size: 18px; font-weight: 700; flex: 1; }
.appbar .actions { display: flex; gap: var(--s-2); align-items: center; }
.appbar .actions .ic { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; border-radius: var(--r-full); cursor: pointer; }
.appbar.primary .actions .ic:hover { background: rgba(255,255,255,0.15); }

/* scrollable content */
.screen {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.screen.flush { padding: 0; }
.screen.center { justify-content: center; align-items: center; text-align: center; }
.screen::-webkit-scrollbar { width: 0; }

/* ============= BOTTOM NAV + FAB ============= */
.bottomnav {
  height: var(--bottomnav-h); flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--outline);
  display: flex; align-items: center; justify-content: space-around;
  position: relative; padding-bottom: 8px;
}
.bottomnav .tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; color: var(--on-surface-muted); cursor: pointer; flex: 1; text-align: center;
}
.bottomnav .tab .ic { font-size: 22px; }
.bottomnav .tab.active { color: var(--primary); font-weight: 600; }
.bottomnav .fab-slot { flex: 1; display: flex; justify-content: center; }
.fab {
  width: 60px; height: 60px; border-radius: var(--r-full);
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-top: -28px;
  box-shadow: 0 8px 18px rgba(30,64,175,0.4); cursor: pointer;
  border: 4px solid var(--surface-dim);
}
.fab:active { transform: scale(0.95); }

/* ============= TYPOGRAPHY ============= */
.display { font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.headline { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; }
.title-lg { font-size: 18px; font-weight: 700; margin: 0; }
.title { font-size: 16px; font-weight: 600; margin: 0; }
.body { font-size: 16px; }
.cap { font-size: 14px; color: var(--on-surface-2); line-height: 1.45; }
.overline { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-muted); }
.muted { color: var(--on-surface-muted); }
.center-text { text-align: center; }

/* ============= BUTTONS (≥48dp) ============= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 var(--s-4); width: 100%;
  border-radius: var(--r-full); border: 1.5px solid transparent;
  font-size: 16px; font-weight: 700; cursor: pointer;
  font-family: inherit; text-decoration: none; transition: filter .12s;
}
.btn:active { transform: translateY(1px); }
.btn-filled { background: var(--primary); color: #fff; }
.btn-filled:hover { filter: brightness(1.08); }
.btn-tonal { background: var(--primary-container); color: var(--primary); }
.btn-outline { background: var(--surface); color: var(--on-surface); border-color: var(--outline-2); }
.btn-text { background: transparent; color: var(--primary); min-height: 44px; width: auto; }
.btn-success { background: var(--success); color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-error { background: var(--error); color: #fff; }
.btn-sm { min-height: 40px; font-size: 14px; padding: 0 var(--s-3); width: auto; }
.btn-stack { display: flex; flex-direction: column; gap: var(--s-3); }

/* ============= CARDS / LIST ============= */
.card {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--r-lg); padding: var(--s-4);
}
.card-flat { background: var(--surface-2); border: 0; }
.tile {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); background: var(--surface);
  border: 1px solid var(--outline); border-radius: var(--r-md);
}
.tile .lead { width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.tile .body-txt { flex: 1; min-width: 0; }
.tile .body-txt .t { font-size: 15px; font-weight: 600; }
.tile .body-txt .s { font-size: 13px; color: var(--on-surface-muted); }
.tile .trail { color: var(--on-surface-muted); font-size: 18px; }

/* role picker cards (MO-001) */
.role-card {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4); background: var(--surface);
  border: 1.5px solid var(--outline); border-radius: var(--r-lg); cursor: pointer;
  text-decoration: none; color: inherit; transition: .14s;
}
.role-card:hover { border-color: var(--primary); box-shadow: 0 6px 16px rgba(30,64,175,0.1); }
.role-card .emoji { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--primary-container);
  display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.role-card .rc-body { flex: 1; }
.role-card .rc-body .t { font-size: 17px; font-weight: 700; }
.role-card .rc-body .s { font-size: 13px; color: var(--on-surface-2); }
.role-card .arrow { color: var(--on-surface-muted); font-size: 20px; }

/* ============= CHIPS / BADGES ============= */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--on-surface-2);
  border: 1px solid var(--outline);
}
.chip.active { background: var(--primary-container); color: var(--primary); border-color: var(--primary); }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700;
}
.badge-success { background: var(--success-soft); color: #15803d; }
.badge-warning { background: var(--warning-soft); color: #b45309; }
.badge-error { background: var(--error-soft); color: #b91c1c; }
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-neutral { background: var(--surface-3); color: var(--on-surface-2); }

/* ============= FORM FIELDS ============= */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field label .req { color: var(--error); }
.input {
  width: 100%; min-height: 52px; padding: 0 var(--s-4);
  font-size: 16px; background: var(--surface);
  border: 1.5px solid var(--outline-2); border-radius: var(--r-md); color: var(--on-surface);
  font-family: inherit;
}
textarea.input { padding: 12px var(--s-4); min-height: 96px; resize: vertical; line-height: 1.5; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field .help { font-size: 12px; color: var(--on-surface-muted); }

/* OTP boxes */
.otp { display: flex; gap: 8px; justify-content: center; }
.otp .box {
  width: 46px; height: 56px; border: 1.5px solid var(--outline-2); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; font-family: var(--mono); background: var(--surface);
}
.otp .box.filled { border-color: var(--primary); color: var(--primary); }
.otp .box.cursor { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* upload */
.upload {
  border: 2px dashed var(--outline-2); border-radius: var(--r-md);
  padding: var(--s-6) var(--s-4); text-align: center; color: var(--on-surface-muted);
  background: var(--surface-2); cursor: pointer;
}
.upload .big { font-size: 30px; }

/* toggle switch */
.switch { width: 46px; height: 28px; border-radius: var(--r-full); background: var(--outline-2); position: relative; flex-shrink: 0; cursor: pointer; }
.switch.on { background: var(--primary); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--r-full); background: #fff; transition: .15s; }
.switch.on::after { left: 21px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.row { display: flex; align-items: center; gap: var(--s-3); }

/* ============= CAMERA VIEWFINDER (glassmorphism) ============= */
.viewfinder {
  flex: 1; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #1f2937 0%, #0b1220 75%);
  display: flex; flex-direction: column;
}
.viewfinder .vf-top, .viewfinder .vf-bottom {
  position: relative; z-index: 3; padding: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
}
.viewfinder .vf-bottom { margin-top: auto; flex-direction: column; gap: var(--s-3); }
.glass {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18); color: #fff;
  border-radius: var(--r-full);
}
.vf-ic {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer;
}
/* scan frame with corner guides */
.scan-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-54%);
  width: 230px; height: 230px; z-index: 2;
}
.scan-frame .corner { position: absolute; width: 40px; height: 40px; border: 4px solid #fff; }
.scan-frame .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.scan-frame .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.scan-frame .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.scan-frame .br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.scan-frame .laser { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--primary); box-shadow: 0 0 12px 2px var(--primary); animation: laser 2.2s ease-in-out infinite; }
@keyframes laser { 0%,100% { top: 12%; } 50% { top: 88%; } }
@media (prefers-reduced-motion: reduce) { .scan-frame .laser { animation: none; } }
.vf-hint { z-index: 3; text-align: center; color: #e5e7eb; font-size: 14px; padding: 0 var(--s-6) var(--s-2); }

/* big shutter */
.shutter { width: 72px; height: 72px; border-radius: var(--r-full); background: #fff; border: 4px solid rgba(255,255,255,0.5); margin: 0 auto; cursor: pointer; }

/* continuous counter */
.counter { text-align: center; color: #fff; }
.counter .num { font-size: 44px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.counter .lbl { font-size: 13px; opacity: 0.85; }

/* mini recent scan list (glass) */
.mini-list { display: flex; flex-direction: column; gap: 6px; }
.mini-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #fff; padding: 6px 10px; }
.mini-row .dot { width: 8px; height: 8px; border-radius: var(--r-full); flex-shrink: 0; }
.dot-ok { background: var(--success); }
.dot-warn { background: var(--warning); }
.dot-err { background: var(--error); }

/* ============= BOTTOM SHEET (result) ============= */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--surface);
  border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl);
  padding: var(--s-3) var(--s-4) var(--s-6);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--outline-2); margin: 0 auto var(--s-2); }
.sheet .res-head { display: flex; align-items: center; gap: var(--s-3); }
.sheet .res-icon { width: 52px; height: 52px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.res-ok   .res-icon { background: var(--success-soft); }
.res-warn .res-icon { background: var(--warning-soft); }
.res-err  .res-icon { background: var(--error-soft); }
.sheet .res-status { font-size: 18px; font-weight: 800; }
.res-ok   .res-status { color: #15803d; }
.res-warn .res-status { color: #b45309; }
.res-err  .res-status { color: #b91c1c; }

/* status banner (full-width, scan result top) */
.statusband { padding: var(--s-3) var(--s-4); color: #fff; display: flex; align-items: center; gap: var(--s-3); }
.statusband.ok { background: var(--success); }
.statusband.warn { background: var(--warning); }
.statusband.err { background: var(--error); }
.statusband .ic { font-size: 26px; }
.statusband .st { font-size: 17px; font-weight: 800; }

/* KPI mini (dashboard) */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.kpi { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--r-md); padding: var(--s-3); }
.kpi .v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 12px; color: var(--on-surface-muted); }
.kpi .d { font-size: 12px; font-weight: 600; }
.kpi .d.up { color: var(--success); } .kpi .d.down { color: var(--error); }

/* consent / snackbar / inline banners */
.banner { border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: 14px; line-height: 1.45; }
.banner-info { background: var(--primary-soft); color: #1e3a8a; }
.banner-warn { background: var(--warning-soft); color: #92400e; }
.banner-error { background: var(--error-soft); color: #991b1b; }
.snackbar { position: absolute; left: var(--s-4); right: var(--s-4); bottom: calc(var(--bottomnav-h) + 12px); z-index: 45;
  background: #1f2937; color: #fff; border-radius: var(--r-md); padding: 12px var(--s-4); font-size: 14px;
  display: flex; align-items: center; gap: var(--s-3); }
.snackbar .act { margin-left: auto; color: #93c5fd; font-weight: 700; }

/* serial mono display */
.serial { font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: 0.08em; }

/* QR placeholder */
.qr {
  width: 180px; height: 180px; margin: 0 auto; border-radius: var(--r-md);
  background-image:
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%),
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%);
  background-size: 18px 18px; background-position: 0 0, 9px 9px;
  border: 8px solid #fff; box-shadow: 0 0 0 1px var(--outline);
}

/* offline indicator on appbar */
.offline-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--r-full); background: rgba(255,255,255,0.18); font-size: 12px; font-weight: 600; }

/* empty state */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-12) var(--s-6); text-align: center; }
.empty .art { font-size: 56px; opacity: 0.5; }

/* list divider helper */
.list { display: flex; flex-direction: column; gap: var(--s-2); }
.section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--on-surface-muted); margin: var(--s-2) 0 0; }

.spacer { flex: 1; }
.mt-auto { margin-top: auto; }