/* =====================================================
   PCCCTrace Public Resolver (id.pccctrace.vn) — Design Tokens
   Source: 07-5-ux-public-resolver.md §5 / §7 / §12
   Direction A — "Speed-first Minimalist" (mobile-first, anonymous default)
   Light mode ONLY (trust signal). Large text, WCAG AA, Android Go target.
   ===================================================== */

:root {
  /* Colors — high contrast mobile-friendly (§5.1) */
  --primary:        #1e40af;  /* blue-800 — link, primary button */
  --success:        #16a34a;  /* green-600 — ✅ "thật" */
  --warning:        #d97706;  /* amber-600 — ⚠️ suspect / nghi clone */
  --destructive:    #dc2626;  /* red-600 — ❌ giả / không xác thực */
  --bg:             #ffffff;  /* main — light only */
  --text:           #171717;  /* body high contrast */
  --text-muted:     #525252;  /* meta, still AA */

  /* Surfaces & soft tints */
  --surface:        #ffffff;
  --surface-muted:  #f5f5f5;
  --border:         #e5e5e5;
  --success-soft:   #dcfce7;
  --warning-soft:   #fef3c7;
  --destructive-soft:#fee2e2;
  --primary-soft:   #dbeafe;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 9999px;

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

  /* Layout (§7.1 / §12.1) */
  --content-max: 480px;   /* desktop/tablet center, mobile full */
  --banner-h: 80px;       /* status banner dominant element */
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Tahoma", sans-serif;
  font-size: 16px;             /* §5.2 body — mobile readable */
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-muted);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;            /* §5.2 mono serial */
  letter-spacing: 0.02em;
}

/* ---- The mobile "page" — centered 480px column on wider screens (§12.1) ---- */
.resolver {
  max-width: var(--content-max);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px var(--border);
}
.content {
  flex: 1;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ---- Typography helpers (§5.2) ---- */
.status-text { font-size: 24px; font-weight: 800; line-height: 1.2; }  /* status banner */
.h1 { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; }
.h2 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; }
.body { font-size: 16px; line-height: 1.5; }
.cap { font-size: 14px; color: var(--text-muted); line-height: 1.4; }  /* caption ≥AA */
.muted { color: var(--text-muted); }

/* ============= STATUS BANNER (§5.4 / §7.1) — dominant top element ============= */
.status-banner {
  min-height: var(--banner-h);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  color: #fff;
}
.status-banner .icon {
  flex-shrink: 0;
  width: 48px; height: 48px;     /* 48px icon in status banner (§7.2) */
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; line-height: 1;
}
.status-banner .st-title { font-size: 24px; font-weight: 800; line-height: 1.15; }
.status-banner .st-sub { font-size: 14px; opacity: 0.92; margin-top: 2px; }
.status-banner.is-genuine  { background: var(--success); }
.status-banner.is-suspect  { background: var(--warning); }
.status-banner.is-fake     { background: var(--destructive); }
.status-banner.is-neutral  { background: var(--primary); }

/* ============= CARDS ============= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.card-title { font-size: 14px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--s-3); }

/* Product info card (§5.4 ProductInfoCard) */
.product {
  display: flex; gap: var(--s-4); align-items: flex-start;
}
.product .thumb {
  width: 88px; height: 88px; flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--surface-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: var(--text-muted);
  overflow: hidden;
}
.product .info { flex: 1; min-width: 0; }
.product .info .name { font-size: 18px; font-weight: 700; line-height: 1.3; }
.product .info .maker { font-size: 16px; color: var(--text); margin-top: 2px; }

/* key/value rows */
.kv { display: flex; flex-direction: column; gap: var(--s-3); }
.kv .row { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.kv .row .k { font-size: 14px; color: var(--text-muted); flex-shrink: 0; }
.kv .row .v { font-size: 15px; font-weight: 600; text-align: right; }

/* Activation info (§5.4 ActivationInfo) */
.activation { display: flex; gap: var(--s-3); align-items: flex-start; }
.activation .pin { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.activation .txt .place { font-size: 16px; font-weight: 600; }
.activation .txt .when { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

/* Anomaly explanation (§5.4 AnomalyExplanation — human readable, FR-63) */
.anomaly {
  border-left: 4px solid var(--warning);
  background: var(--warning-soft);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex; gap: var(--s-3);
}
.anomaly.is-fake { border-left-color: var(--destructive); background: var(--destructive-soft); }
.anomaly .ico { font-size: 22px; flex-shrink: 0; }
.anomaly .body-txt { font-size: 15px; line-height: 1.5; }
.anomaly .body-txt b { font-weight: 700; }

/* ============= BUTTONS (≥44pt touch target, §12.2) ============= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  font-size: 16px; font-weight: 700;
  cursor: pointer; transition: filter 0.12s ease;
  text-decoration: none; width: 100%;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-outline:hover { background: var(--surface-muted); }
.btn-danger { background: var(--destructive); color: #fff; }
.btn-call { background: var(--destructive); color: #fff; }     /* tap-to-call 114 */
.btn-warning { background: var(--warning); color: #fff; }
.btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.btn-row { display: flex; flex-direction: column; gap: var(--s-3); }

/* ============= STICKY BOTTOM BANNERS (§7.1) ============= */
.sticky-stack {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-direction: column;
}
/* App install banner (§5.4 AppInstallBanner — subtle) */
.app-banner {
  background: #0f172a; color: #fff;
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
}
.app-banner .txt { flex: 1; font-size: 14px; line-height: 1.35; }
.app-banner .txt b { font-weight: 700; }
.app-banner .stores { display: flex; gap: var(--s-2); flex-shrink: 0; }
.app-banner .store {
  background: rgba(255,255,255,0.12); color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--r-sm); padding: 6px 10px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.app-banner .close { color: rgba(255,255,255,0.6); cursor: pointer; font-size: 20px; padding: 0 4px; flex-shrink: 0; }

/* Consent banner (§5.4 ConsentBanner — sticky bottom IP opt-in, FR-74) */
.consent-banner {
  background: #1f2937; color: #e5e7eb;
  padding: var(--s-3) var(--s-4);
  font-size: 13px; line-height: 1.4;
}
.consent-banner .actions { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.consent-banner .c-btn {
  border-radius: var(--r-sm); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #e5e7eb;
}
.consent-banner .c-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.consent-banner .c-btn.link { border: 0; padding: 7px 8px; color: #93c5fd; }

/* ============= FOOTER (minimal, §7.1) ============= */
.resolver-footer {
  padding: var(--s-4);
  text-align: center;
  font-size: 13px; color: var(--text-muted);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}
.resolver-footer a { color: var(--text-muted); text-decoration: underline; }
.resolver-footer .disclaimer { margin-bottom: var(--s-2); }

/* ============= FORM (§5.4 SuspectReportForm) ============= */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-size: 15px; font-weight: 600; }
.field label .req { color: var(--destructive); }
.field .help { font-size: 13px; color: var(--text-muted); }
.input, .textarea {
  width: 100%; padding: 12px var(--s-3);
  font-size: 16px;            /* ≥16px avoids iOS zoom */
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
}
.input:focus, .textarea:focus { outline: 3px solid var(--primary-soft); border-color: var(--primary); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.upload {
  border: 2px dashed var(--border); border-radius: var(--r-md);
  padding: var(--s-6) var(--s-4); text-align: center; color: var(--text-muted);
  background: var(--surface-muted); cursor: pointer;
}
.upload .big { font-size: 30px; }

/* ============= PILL / BADGE ============= */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 700;
}
.pill-success { background: var(--success-soft); color: #15803d; }
.pill-warning { background: var(--warning-soft); color: #b45309; }
.pill-danger  { background: var(--destructive-soft); color: #b91c1c; }
.pill-primary { background: var(--primary-soft); color: var(--primary); }

/* ============= ERROR / UTILITY PAGE LAYOUT (PR-010/011/012) ============= */
.notice {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--s-8) var(--s-6); gap: var(--s-4);
}
.notice .big-icon { font-size: 64px; line-height: 1; }
.notice h1 { font-size: 24px; font-weight: 800; margin: 0; }
.notice p { font-size: 16px; color: var(--text-muted); margin: 0; max-width: 360px; }
.notice .actions { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); }

/* ============= TIMELINE (inspector audit trail) ============= */
.timeline { display: flex; flex-direction: column; }
.timeline .ev { display: flex; gap: var(--s-3); padding-bottom: var(--s-4); position: relative; }
.timeline .ev:not(:last-child)::before {
  content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--border);
}
.timeline .ev .dot { width: 16px; height: 16px; border-radius: var(--r-full); background: var(--primary); flex-shrink: 0; margin-top: 2px; z-index: 1; }
.timeline .ev .dot.warn { background: var(--warning); }
.timeline .ev .dot.danger { background: var(--destructive); }
.timeline .ev .d { flex: 1; }
.timeline .ev .d .t { font-size: 15px; font-weight: 600; }
.timeline .ev .d .m { font-size: 13px; color: var(--text-muted); }

/* Privileged view ribbon */
.priv-ribbon {
  display: flex; align-items: center; gap: var(--s-2);
  background: #111827; color: #fff;
  padding: 8px var(--s-4); font-size: 13px; font-weight: 600;
}
.priv-ribbon .tag {
  background: rgba(255,255,255,0.15); border-radius: var(--r-sm);
  padding: 2px 8px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
}

/* Skeleton (PR-012) */
.skl { background: linear-gradient(90deg, #ececec 25%, #f5f5f5 37%, #ececec 63%); background-size: 400% 100%; border-radius: var(--r-md); animation: skl 1.4s ease infinite; }
@keyframes skl { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skl { animation: none; } }

/* Tiny demo-note bar at top so reviewers can navigate */
.demo-nav {
  background: #0b1220; color: #cbd5e1;
  font-size: 12px; padding: 7px var(--s-4);
  display: flex; align-items: center; gap: var(--s-3); justify-content: space-between;
}
.demo-nav a { color: #93c5fd; }
.demo-nav .id { font-family: "JetBrains Mono", monospace; color: #fbbf24; font-weight: 700; }