/* Trustive KYC — design tokens + components */

:root {
  --navy-900: #071433;
  --navy-800: #0a1f44;
  --navy-700: #12305f;
  --navy-100: #e8edf6;
  --orange:   #ff6b35;
  --orange-d: #e2551f;
  --ink:      #14181f;
  --muted:    #5b6472;
  --line:     #dde3ec;
  --bg:       #f6f8fc;
  --card:     #ffffff;
  --ok:       #0f8a5f;
  --ok-bg:    #e6f5ee;
  --warn:     #b26a00;
  --warn-bg:  #fdf1de;
  --err:      #c0392b;
  --err-bg:   #fdecea;
  --radius:   10px;
  --shadow:   0 1px 2px rgba(10,31,68,.06), 0 8px 24px rgba(10,31,68,.06);
  --font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-h:   'Space Grotesk', var(--font);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-h); color: var(--navy-900); line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.65rem; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--navy-700); }
a:hover { color: var(--orange); }
small, .small { font-size: .82rem; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

/* ── layout ───────────────────────────────────────────── */
.site-header {
  background: var(--navy-900);
  color: #fff;
  padding: .85rem 0;
  border-bottom: 3px solid var(--orange);
}
.site-header a { color: #fff; text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.wrap-narrow { max-width: 480px; margin: 0 auto; padding: 0 1.25rem; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { font-family: var(--font-h); font-weight: 700; letter-spacing: -.01em; font-size: 1.05rem; }
.brand span { color: var(--orange); }
.nav { display: flex; gap: 1rem; align-items: center; font-size: .9rem; }
main { padding: 2rem 0 4rem; }
.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0; color: var(--muted); font-size: .82rem; }

/* ── cards & forms ────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.card-tight { padding: 1rem 1.25rem; }
.field { margin-bottom: 1rem; }
label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; color: var(--navy-800); }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--orange);
}
.hint { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.check { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; }
.check input { margin-top: .25rem; }
.check label { font-weight: 400; margin: 0; }

.btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  border: 0;
  padding: .65rem 1.15rem;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--orange-d); color: #fff; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-ghost { background: transparent; color: var(--navy-700); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--navy-100); color: var(--navy-800); }
.btn-sm { padding: .35rem .7rem; font-size: .85rem; }

/* ── feedback ─────────────────────────────────────────── */
.alert { border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; font-size: .9rem; border: 1px solid; }
.alert-success { background: var(--ok-bg);   border-color: #b8e2ce; color: var(--ok); }
.alert-error   { background: var(--err-bg);  border-color: #f3c2bd; color: var(--err); }
.alert-warn    { background: var(--warn-bg); border-color: #f0d8ab; color: var(--warn); }
.alert ul { margin: .25rem 0 0; padding-left: 1.1rem; }

.badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 99px;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.badge-draft    { background: #eceff4; color: #55606f; }
.badge-submitted, .badge-in_review { background: var(--navy-100); color: var(--navy-700); }
.badge-info_requested { background: var(--warn-bg); color: var(--warn); }
.badge-approved { background: var(--ok-bg); color: var(--ok); }
.badge-rejected, .badge-expired, .badge-withdrawn { background: var(--err-bg); color: var(--err); }
.badge-low { background: var(--ok-bg); color: var(--ok); }
.badge-medium { background: var(--warn-bg); color: var(--warn); }
.badge-high, .badge-prohibited { background: var(--err-bg); color: var(--err); }

/* ── tables ───────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
tbody tr:hover { background: #fafbfe; }

/* ── stats ────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem 1rem; display: block; text-decoration: none; transition: border-color .12s, box-shadow .12s;
}
a.stat:hover { border-color: var(--orange); box-shadow: var(--shadow); }
.stat-active { border-color: var(--orange); box-shadow: inset 0 -3px 0 var(--orange); }
.stat .n { font-family: var(--font-h); font-size: 1.6rem; font-weight: 700; color: var(--navy-900); }
.stat .l { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* ── timeline ─────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 1.1rem 1.5rem; border-left: 2px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -6px; top: .35rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--line);
}
.timeline li.done::before { background: var(--ok); }
.timeline li.current::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,107,53,.18); }

/* ── admin shell ──────────────────────────────────────── */
.admin-body { background: #eef1f7; }
.admin-bar { background: var(--navy-900); color: #fff; padding: .6rem 0; }
.admin-bar a { color: #cdd8ea; text-decoration: none; font-size: .88rem; }
.admin-bar a:hover, .admin-bar a.active { color: #fff; }
.admin-nav { display: flex; gap: 1.1rem; align-items: center; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; background: var(--navy-900); padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 400px; background: #fff; border-radius: 12px; padding: 2rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.auth-card .brand { color: var(--navy-900); text-align: center; display: block; margin-bottom: 1.25rem; font-size: 1.15rem; }

.secret-box {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--navy-100); border: 1px dashed var(--navy-700);
  padding: .75rem; border-radius: 8px; word-break: break-all; font-size: .95rem; text-align: center;
}
.code-input { letter-spacing: .5em; text-align: center; font-size: 1.3rem; font-family: ui-monospace, monospace; }

/* ── wizard ───────────────────────────────────────────── */
.wizard { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 800px) { .wizard { grid-template-columns: 1fr; } }

.rail { position: sticky; top: 1rem; }
@media (max-width: 800px) { .rail { position: static; } }
.rail-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .6rem; }
.rail-steps { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: s; }
.rail-step {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem 0; font-size: .88rem; color: var(--muted);
}
.rail-step a { text-decoration: none; color: var(--navy-700); }
.rail-step a:hover { color: var(--orange); }
.rail-num {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: #e6eaf2; color: var(--muted);
  font-size: .74rem; font-weight: 700;
}
.rail-step.done { color: var(--ink); }
.rail-step.done .rail-num { background: var(--ok-bg); color: var(--ok); }
.rail-step.current { color: var(--navy-900); font-weight: 600; }
.rail-step.current .rail-num { background: var(--orange); color: #fff; }
.rail-soon {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .05em;
  background: #e6eaf2; color: var(--muted); padding: .05rem .35rem; border-radius: 99px;
}
.rail-note { font-size: .78rem; color: var(--muted); line-height: 1.45; }
.wizard-main { min-width: 0; }
.wizard-actions {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}

input[type=file] {
  width: 100%; padding: .6rem; font: inherit;
  border: 1px dashed var(--line); border-radius: 8px; background: #fbfcfe;
}
input[type=file]:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.file-feedback { font-size: .8rem; color: var(--ok); margin-top: .3rem; }
.file-feedback.bad { color: var(--err); }
.uploaded {
  font-size: .84rem; color: var(--ok); background: var(--ok-bg);
  border: 1px solid #b8e2ce; border-radius: 8px; padding: .45rem .65rem; margin: 0 0 .5rem;
}

.note-panel {
  background: var(--navy-100); border: 1px solid #c9d6ea;
  border-radius: var(--radius); padding: 1rem; margin: 1rem 0;
}
.note-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--navy-700); margin-bottom: .4rem; }
.note-text {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.35rem; font-weight: 700; letter-spacing: .06em;
  color: var(--navy-900); background: #fff;
  border: 1px dashed var(--navy-700); border-radius: 8px;
  padding: .7rem; text-align: center; margin-bottom: .5rem; word-break: break-word;
}

/* ── case review ──────────────────────────────────────── */
.case-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
@media (max-width: 980px) { .case-grid { grid-template-columns: 1fr; } }
.case-side { position: sticky; top: 1rem; }
@media (max-width: 980px) { .case-side { position: static; } }

.doc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.doc-item { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; background: #fbfcfe; }
.doc-item-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.doc-embed {
  width: 100%; height: 320px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; display: block; margin-bottom: .4rem;
}
.doc-mark { display: flex; gap: .35rem; margin-top: .5rem; flex-wrap: wrap; }
.doc-mark input { flex: 1 1 120px; min-width: 0; }

.factor-list { list-style: none; margin: .5rem 0; padding: 0; }
.factor-list li { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.factor-list li:last-child { border-bottom: 0; }
.factor-points {
  flex: 0 0 46px; text-align: center; align-self: flex-start;
  background: var(--warn-bg); color: var(--warn);
  border-radius: 6px; padding: .15rem .3rem; font-size: .8rem; font-weight: 700;
}
.factor-points.prohibited { background: var(--err-bg); color: var(--err); }
.factor-list .small { display: block; }

.decision-form textarea, .decision-form select { margin-bottom: .5rem; }
.decision-form label.check { margin-bottom: .3rem; }

/* ── document viewer (framed, watermarked) ────────────── */
.doc-viewer { margin: 0; background: #2a2f3a; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.doc-toolbar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--navy-900); color: #dbe4f3; padding: .4rem .6rem; font-size: .8rem;
}
.doc-toolbar .muted { color: #9fb0cc; }
.doc-tools { margin-left: auto; display: flex; gap: .25rem; }
.doc-tools button {
  background: #1b2b4d; color: #fff; border: 0; border-radius: 5px;
  padding: .2rem .5rem; cursor: pointer; font: inherit; line-height: 1.4;
}
.doc-tools button:hover { background: var(--orange); }
.doc-stage { position: relative; flex: 1; overflow: auto; display: grid; place-items: center; }
.doc-stage img { max-width: 100%; transform-origin: center; transition: transform .12s ease-out; }
.doc-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.doc-watermark {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-around;
  transform: rotate(-24deg) scale(1.4); opacity: .16;
}
.doc-watermark span {
  white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .8rem; font-weight: 700; color: #000; text-align: center;
}

/* ── questionnaire ────────────────────────────────────── */
.radio-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.radio-option {
  display: flex; align-items: center; gap: .45rem;
  border: 1px solid var(--line); border-radius: 8px;
  padding: .5rem .8rem; cursor: pointer; font-weight: 400; margin: 0;
  background: #fff;
}
.radio-option:hover { border-color: var(--orange); }
.radio-option:has(input:checked) { border-color: var(--orange); background: #fff6f2; font-weight: 600; }
.field.conditional {
  border-left: 3px solid var(--orange); padding-left: .9rem; margin-left: .1rem;
}
.field.conditional[hidden] { display: none; }

/* ── wallet step ──────────────────────────────────────── */
.sign-message {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .8rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  background: var(--navy-900); color: #dbe4f3;
  border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 .4rem;
  overflow-x: auto;
}
.wallet-connect {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--navy-100); border: 1px solid #c9d6ea;
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem;
}
.wallet-connect .hint { margin: 0; }
textarea.mono, input.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .85rem;
}
details summary { cursor: pointer; padding: .35rem 0; }

.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }