@import url('./tokens.css');

/* ---------- nav ---------- */
.nav-pill {
  position: fixed; top: var(--space-5); left: 50%; transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
  background: rgba(12, 15, 22, 0.72);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-md);
}
.nav-brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; letter-spacing: 0.01em; }
.nav-brand .dot { position: relative; width: 8px; height: 8px; border-radius: 99px; background: var(--state-success); box-shadow: 0 0 12px 2px var(--state-success); animation: signal-blip 2.4s var(--ease) infinite; }
.nav-brand .dot::after, .footer .status i::after {
  content: '';
  position: absolute; inset: -4px;
  border: 1px solid var(--state-success);
  border-radius: 99px;
  animation: radar-ping 2.2s var(--ease) infinite;
}
@keyframes radar-ping {
  0% { transform: scale(0.7); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}
.nav-links { display: flex; gap: var(--space-4); font-size: 13px; color: var(--text-secondary); }
.nav-links a { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); background: var(--surface-hover); }
.nav-cta {
  background: var(--accent); color: var(--text-inverse); font-weight: 600; font-size: 13px;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: none; cursor: pointer;
  transition: transform var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }

@keyframes signal-blip {
  0%, 88% { opacity: 1; transform: scale(1); }
  92% { opacity: 0.25; transform: scale(0.8); }
  96% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- layout ---------- */
.shell { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 var(--space-6); }
.header { padding: 168px 0 var(--space-8); }

.headline {
  max-width: 62rem;
  font-size: clamp(2.75rem, 4.4vw, 4.5rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
  color: var(--text-primary);
}
.headline em { font-style: normal; color: var(--accent); }

.subhead { max-width: 42rem; font-size: 17px; color: var(--text-secondary); margin-bottom: var(--space-7); }

.actions { display: flex; gap: var(--space-4); align-items: center; }
.btn { font-family: var(--font-sans); font-weight: 600; font-size: 14px; border-radius: var(--radius-md); cursor: pointer; transition: all var(--motion-fast) var(--ease); border: 1px solid transparent; padding: 13px 24px; display: inline-flex; align-items: center; gap: var(--space-2); }
.btn-primary { background: var(--accent); color: var(--text-inverse); box-shadow: 0 0 0 1px rgba(76,243,255,0.4), 0 12px 32px -8px rgba(76,243,255,0.45); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--border-glow); }

/* live ticker */
.ticker { margin-top: var(--space-8); display: flex; gap: var(--space-6); flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); }
.ticker span b { color: var(--text-secondary); font-weight: 400; }
.ticker .val { color: var(--accent-text); }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: var(--space-5); padding-bottom: var(--space-8); }
.card {
  --mx: 50%; --my: 50%; --spot: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgb(76 243 255 / var(--spot)), transparent 70%), var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-6); position: relative; overflow: hidden;
  transition: border-color var(--motion-base) var(--ease), transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease), background-color var(--motion-base) var(--ease);
}
.card:hover { border-color: var(--border-glow); box-shadow: var(--shadow-glow); transform: translateY(-4px); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { --spot: 0.28; }
  .card:hover .k { color: var(--accent-text); }
  .card:hover .v { text-shadow: 0 0 18px rgba(76, 243, 255, 0.35); }
}
.card .k { transition: color var(--motion-base) var(--ease); }
.card .v { transition: text-shadow var(--motion-base) var(--ease); }
.card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--accent), transparent 30%);
  opacity: 0; transition: opacity var(--motion-base) var(--ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.card:hover::before { opacity: 0.6; }
.card .k { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.card .v { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; }
.card .v small { font-size: 14px; color: var(--text-secondary); font-weight: 500; margin-left: var(--space-2); }
.card p { color: var(--text-secondary); font-size: 13.5px; margin: var(--space-2) 0 0; }

.col-span-2 { grid-column: span 2; }
.col-span-4 { grid-column: span 4; }
.row-span-2 { grid-row: span 2; }

.sparkline { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin-top: var(--space-5); }
.sparkline i { flex: 1; background: linear-gradient(180deg, var(--accent), transparent); border-radius: 2px 2px 0 0; opacity: 0.85; }

/* scan line */
.scanline { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.7; filter: blur(0.5px); }

/* section title */
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-5); }
.section-title h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.section-title span { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* ---------- run form ---------- */
.console { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-7); position: relative; }
.field { margin-bottom: var(--space-5); }
.field label { display: block; font-size: 12px; color: var(--text-secondary); font-weight: 500; margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.05em; }
.field input, .field select {
  width: 100%; background: var(--surface-sunken); border: 1px solid var(--border-strong); color: var(--text-primary);
  font-family: var(--font-mono); font-size: 14px; padding: 12px var(--space-4); border-radius: var(--radius-md);
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-quiet); outline: none; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border-subtle); padding: var(--space-8) 0 var(--space-7); margin-top: var(--space-8); display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 13px; }
.footer .status { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); }
.footer .status i { width: 6px; height: 6px; border-radius: 99px; background: var(--state-success); box-shadow: 0 0 8px 2px var(--state-success); }

/* ---------- trace list ---------- */
.trace { display: flex; flex-direction: column; gap: var(--space-4); }
.step {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-5); align-items: start;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-5); opacity: 0;
}
.step .idx { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.step .idx .n { width: 32px; height: 32px; border-radius: 99px; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.step .idx .line { flex: 1; width: 1px; background: var(--border-subtle); min-height: 24px; position: relative; overflow: hidden; }
.step .idx .line::after {
  content: '';
  position: absolute; left: 0; top: 0; width: 100%; height: 30%;
  background: linear-gradient(var(--accent), transparent);
  transform: translateY(-100%);
  animation: line-flow 1.8s linear infinite;
}
@keyframes line-flow { to { transform: translateY(430%); } }
.step .body .action { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); margin-bottom: var(--space-2); }
.step .body .reasoning { color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; }
.step .body .reasoning .w { opacity: 0.15; transition: opacity 0.4s var(--ease); }
.step .thumb { width: 128px; height: 80px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--surface-sunken) center/cover no-repeat; position: relative; overflow: hidden; }
.step .thumb .mark { position: absolute; width: 18px; height: 18px; border: 2px solid var(--mark-outline); border-radius: 4px; box-shadow: 0 0 8px var(--mark-outline); }
.step .thumb .mark::after {
  content: '';
  position: absolute; inset: -4px;
  border: 1.5px solid var(--mark-outline);
  border-radius: 6px;
  animation: mark-ping 1.8s var(--ease) infinite;
}
@keyframes mark-ping {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 8px; border-radius: var(--radius-sm); }
.badge.ok { color: var(--state-success); background: var(--state-success-quiet); }
.badge.retried { color: var(--state-warning); background: var(--state-warning-quiet); }
.badge.failed { color: var(--state-danger); background: var(--state-danger-quiet); }
.badge.blocked { color: var(--state-info); background: var(--state-info-quiet); }

/* pinned sidebar */
.run-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-7); align-items: start; }
.rail { position: sticky; top: 120px; display: flex; flex-direction: column; gap: var(--space-4); }
.rail .card { padding: var(--space-5); }

/* history */
.table-wrap { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); background: var(--surface-raised); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
tbody td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; }
tbody tr { background: var(--surface-base); transition: background var(--motion-fast) var(--ease); cursor: pointer; }
tbody tr:hover { background: var(--surface-hover); }
tbody tr:last-child td { border-bottom: none; }

.pagefade { opacity: 0; }