/*
 * Brief Analyzer — Shared Design System
 * Used by all demo pages (01–05)
 */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --grad: linear-gradient(135deg, #7B3FBE 0%, #C04190 52%, #E8714A 100%);
  --grad-s: linear-gradient(135deg, rgba(123,63,190,.07) 0%, rgba(192,65,144,.05) 52%, rgba(232,113,74,.07) 100%);
  --purple: #7B3FBE;
  --pink:   #C04190;
  --coral:  #E8714A;

  /* Ink */
  --ink:    #0F0F0F;
  --ink2:   #3A3A3A;
  --muted:  #737373;

  /* Surfaces */
  --bg:     #FAFAF9;
  --stone:  #F6F5F3;
  --white:  #FFFFFF;
  --border: #E8E7E4;

  /* Semantic */
  --green:  #16a34a;
  --green-bg: #DCFCE7;
  --green-text: #15803D;
  --amber:  #d97706;
  --amber-bg: #FEF3C7;
  --amber-text: #92400E;
  --red:    #dc2626;
  --red-bg: #FEE2E2;
  --red-text: #991B1B;
  --blue:   #2563eb;
  --blue-bg: #DBEAFE;
  --blue-text: #1D4ED8;

  /* Typography */
  --fd: 'Sora', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --fm: 'JetBrains Mono', monospace;

  /* Shadows */
  --sh-card: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
  --sh-float: 0 4px 6px rgba(0,0,0,.04), 0 20px 48px rgba(0,0,0,.10);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── DEMO NAV ── */
.demo-nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.demo-nav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.demo-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.demo-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.demo-nav-logo img {
  width: 26px;
  height: 26px;
  min-width: 26px;
  max-width: 26px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
.demo-nav-product {
  font-family: var(--fd);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  text-decoration: none;
  transition: color .15s;
}
.demo-nav-product:hover { color: var(--purple); }
.demo-nav-sep {
  width: 1px;
  height: 14px;
  background: var(--border);
  flex-shrink: 0;
}
.demo-brand-name {
  font-family: var(--fd);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.demo-badge {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--grad-s);
  color: var(--purple);
  border: 1px solid rgba(123,63,190,.2);
  padding: 2px 7px;
  border-radius: 100px;
}

/* Step bar — now clickable */
.step-bar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
}
.step-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background .15s;
}
.step-item:hover { background: var(--stone); }
.step-item.active:hover { background: transparent; cursor: default; }
.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6875rem;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--fm);
}
.step-label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media(max-width:600px) {
  .step-label { display: none; }
}
.step-connector {
  width: 24px;
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 .25rem;
}
/* Step states */
.step-item.done .step-num   { background: var(--green-bg); color: var(--green-text); }
.step-item.done .step-label { color: var(--green-text); }
.step-item.active .step-num  { background: var(--purple); color: white; }
.step-item.active .step-label { color: var(--ink); font-weight: 600; }
.step-item.todo .step-num   { background: var(--stone); color: var(--muted); }

/* ── PAGE CONTAINER ── */
.page { max-width: 960px; margin: 0 auto; padding: 1.75rem 2rem 4rem; }

/* ── CARD ── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sh-card);
  margin-bottom: 1.25rem;
}
.card-header {
  padding: 1rem 1.375rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.card-header h2 {
  font-family: var(--fd);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
}
.card-body { padding: 1.375rem; }
.card-body-flush { padding: 0; }

/* ── TYPOGRAPHY ── */
h1 { font-family: var(--fd); font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
h2 { font-family: var(--fd); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
h3 { font-family: var(--fd); font-size: 1rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
p  { color: var(--ink2); font-size: .9375rem; line-height: 1.65; }

.page-title { margin-bottom: .375rem; }
.page-sub   { font-size: .9rem; color: var(--muted); margin-bottom: 1.5rem; }

.eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: .625rem;
  display: block;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: white;
  font-family: var(--fb);
  font-size: .875rem;
  font-weight: 600;
  padding: .625rem 1.25rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .15s;
  white-space: nowrap;
}
.btn-primary:hover { background: #2a2a2a; transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--fb);
  font-size: .875rem;
  font-weight: 600;
  padding: .625rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.btn-secondary:hover { background: var(--border); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 500;
  padding: .625rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.btn-ghost:hover { border-color: #bbb; color: var(--ink); }

/* ── BADGES / CHIPS ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.chip-pass   { background: var(--green-bg);  color: var(--green-text); }
.chip-review { background: var(--amber-bg);  color: var(--amber-text); }
.chip-fail   { background: var(--red-bg);    color: var(--red-text); }
.chip-info   { background: var(--blue-bg);   color: var(--blue-text); }
.chip-neutral{ background: var(--stone);     color: var(--muted); }
.chip-purple { background: rgba(123,63,190,.1); color: var(--purple); }

/* Status dot */
.status-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .58rem; font-weight: 700;
  flex-shrink: 0;
}
.dot-pass   { background: var(--green-bg);  color: var(--green-text); }
.dot-review { background: var(--amber-bg);  color: var(--amber-text); }
.dot-fail   { background: var(--red-bg);    color: var(--red-text); }
.dot-pulse  { animation: pulseRed 2s ease-in-out infinite; }
@keyframes pulseRed {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%     { box-shadow: 0 0 0 5px rgba(220,38,38,.15); }
}

/* Severity chips */
.sev-critical { background: var(--red-bg);    color: var(--red-text); }
.sev-required { background: var(--amber-bg);  color: var(--amber-text); }
.sev-moderate { background: var(--blue-bg);   color: var(--blue-text); }
.sev-minor    { background: var(--stone);     color: var(--muted); }

/* Category chips */
.cat-msg { background: #EDE9FE; color: #6D28D9; }
.cat-vis { background: #DBEAFE; color: #1D4ED8; }
.cat-bsf { background: var(--red-bg); color: var(--red-text); }
.cat-ton { background: var(--amber-bg); color: var(--amber-text); }
.cat-leg { background: var(--green-bg); color: var(--green-text); }

/* ── CONTEXT BANNER ── */
.context-banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: rgba(123,63,190,.05);
  border: 1px solid rgba(123,63,190,.14);
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.context-banner-step {
  font-family: var(--fm);
  font-size: .65rem;
  font-weight: 500;
  color: var(--purple);
  background: rgba(123,63,190,.1);
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}
.context-banner-text {
  font-size: .85rem;
  color: var(--ink2);
  line-height: 1.4;
}
.context-banner-text strong {
  color: var(--ink);
  font-weight: 600;
}


.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .625rem 1rem;
  background: var(--stone);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.data-table td {
  padding: .875rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.04);
  font-size: .85rem;
  color: var(--ink2);
  vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #FAFAF9; }
.data-table tr.row-fail td { background: #FFF8F8; }
.data-table tr.row-fail:hover td { background: #FFF3F3; }

/* ── STAT ROW ── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
@media(max-width:600px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat-cell {
  background: var(--white);
  padding: 1.25rem 1rem;
  text-align: center;
}
.stat-val {
  font-family: var(--fd);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
  display: block;
  margin-bottom: .25rem;
}
.sv-blue   { color: var(--purple); }
.sv-green  { color: var(--green); }
.sv-amber  { color: var(--amber); }
.sv-red    { color: var(--red); }
.stat-lbl  { font-size: .78rem; color: var(--muted); }

/* ── PAGE NAV (prev/next) ── */
.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  margin-top: .5rem;
  border-top: 1px solid var(--border);
  gap: 1rem;
}
.page-nav-spacer { flex: 1; }

/* ── ACTIVITY FEED ── */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.activity-item:last-child { border-bottom: none; }
.act-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.ad-green  { background: var(--green); }
.ad-blue   { background: var(--purple); }
.ad-amber  { background: var(--amber); }
.ad-red    { background: var(--red); }
.act-text  { flex: 1; font-size: .875rem; color: var(--ink2); line-height: 1.5; }
.act-text strong { color: var(--ink); font-weight: 600; }
.act-time  { font-size: .75rem; color: var(--muted); flex-shrink: 0; }

/* ── UPLOAD AREA ── */
.upload-area {
  border: 2px dashed rgba(123,63,190,.3);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: rgba(123,63,190,.02);
  cursor: pointer;
  transition: all .2s;
}
.upload-area:hover {
  border-color: rgba(123,63,190,.5);
  background: rgba(123,63,190,.04);
}
.upload-icon { font-size: 2rem; margin-bottom: .75rem; }
.upload-label { font-family: var(--fd); font-size: .9375rem; font-weight: 600; color: var(--ink); margin-bottom: .375rem; }
.upload-sub { font-size: .82rem; color: var(--muted); }

/* ── FILE ROW ── */
.file-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.file-row:last-child { border-bottom: none; }
.file-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.fi-pdf  { background: rgba(220,38,38,.1); }
.fi-vid  { background: rgba(123,63,190,.1); }
.file-info { flex: 1; min-width: 0; }
.file-name { font-size: .85rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { font-size: .75rem; color: var(--muted); margin-top: 1px; }

/* ── DEMO FOOTER ── */
.demo-footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 2rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  font-size: .75rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.demo-footer a { color: var(--muted); text-decoration: none; transition: color .15s; }
.demo-footer a:hover { color: var(--ink); }
.demo-footer .grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

/* ── UTILS ── */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-muted { color: var(--muted); }
.text-small { font-size: .82rem; }
.mono { font-family: var(--fm); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .5s ease both; }