/* AL.ii upload surfaces — DESIGN.md v2 (ink + signal, circuit, Instrument Sans + JetBrains Mono). */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --ink: #0F2A44;
  --ink-2: #1A3C5C;
  --ink-muted: #5A6B7E;
  --ink-faint: #94A3B8;
  --signal: #2690D6;
  --signal-deep: #1668A0;
  --signal-050: #E8F4FC;
  --signal-100: #C7E3F5;
  --signal-200: #9FD0ED;
  --canvas: #FFFFFF;
  --canvas-tint: #F7FAFC;
  --border: #E2E8F0;
  --pass: #2F9E6B;
  --pass-tint: #E8F5EE;
  --fail: #C44545;
  --fail-tint: #FAEBEB;
  --needs: #C78A2C;
  --needs-tint: #FAF1E2;
  --r-chip: 999px;
  --r-input: 6px;
  --r-card: 8px;
  --r-hero: 12px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-18: 72px;
  --s-24: 96px;
}

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

html, body {
  font-family: 'Instrument Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Page-wide radial glow from top-left (DESIGN.md v2 signal within-hue gradient, ≤22% peak) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(780px 520px at 8% -4%, rgba(38,144,214,.22) 0%, rgba(38,144,214,0) 55%),
    radial-gradient(480px 360px at 12% 12%, rgba(22,104,160,.14) 0%, rgba(22,104,160,0) 60%);
}

/* Page-wide subtle circuit pattern in signal hue (7% opacity per DESIGN.md) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='none' stroke='%232690D6' stroke-width='0.6' stroke-linecap='round'><path d='M0 36 H58 M58 36 V78 M58 78 H120 M120 78 V26 M120 26 H200 M0 118 H32 M32 118 V152 M32 152 H92 M92 152 V114 M92 114 H146 M146 114 V168 M146 168 H200 M0 186 H66 M66 186 V174 M150 0 V32 M150 32 H182 M182 32 V60'/><circle cx='58' cy='36' r='2.4' fill='%232690D6'/><circle cx='58' cy='78' r='2.4' fill='%232690D6'/><circle cx='120' cy='26' r='2.4' fill='%232690D6'/><circle cx='32' cy='118' r='2.4' fill='%232690D6'/><circle cx='92' cy='152' r='2.4' fill='%232690D6'/><circle cx='146' cy='114' r='2.4' fill='%232690D6'/><circle cx='146' cy='168' r='2.4' fill='%232690D6'/><circle cx='66' cy='186' r='2.4' fill='%232690D6'/><circle cx='150' cy='32' r='2.4' fill='%232690D6'/></g></svg>");
  background-size: 200px 200px;
}

.mono, .num {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-8) var(--s-4) var(--s-12);
  position: relative;
  z-index: 1;
}

.card {
  width: 100%;
  max-width: 720px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-hero);
  box-shadow: 0 1px 2px rgba(15,42,68,.06), 0 8px 24px rgba(15,42,68,.05);
  overflow: hidden;
}

.hero {
  position: relative;
  padding: var(--s-8) var(--s-8) var(--s-6);
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
}
.hero-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.hero-logo {
  height: 88px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 24px rgba(38,144,214,.35));
  image-rendering: -webkit-optimize-contrast;
}
.hero-meta { display: flex; flex-direction: column; }
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-deep);
  margin-bottom: 4px;
}
.hero-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hero-sub {
  font-size: 14px;
  color: var(--ink-muted);
  margin-top: 6px;
  max-width: 60ch;
}

/* Circuit trace pattern — hairline on canvas, 7% opacity per DESIGN.md */
.circuit-bg {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%232690D6' stroke-width='0.6' stroke-linecap='round'><path d='M0 28 H44 M44 28 V60 M44 60 H92 M92 60 V18 M92 18 H160 M0 92 H22 M22 92 V120 M22 120 H70 M70 120 V88 M70 88 H112 M112 88 V132 M112 132 H160 M0 150 H50 M50 150 V138 M118 0 V24 M118 24 H140'/><circle cx='44' cy='28' r='2.2' fill='%232690D6'/><circle cx='44' cy='60' r='2.2' fill='%232690D6'/><circle cx='92' cy='18' r='2.2' fill='%232690D6'/><circle cx='22' cy='92' r='2.2' fill='%232690D6'/><circle cx='70' cy='120' r='2.2' fill='%232690D6'/><circle cx='112' cy='88' r='2.2' fill='%232690D6'/><circle cx='112' cy='132' r='2.2' fill='%232690D6'/><circle cx='50' cy='150' r='2.2' fill='%232690D6'/><circle cx='118' cy='24' r='2.2' fill='%232690D6'/></g></svg>");
  background-size: 160px 160px;
  opacity: 0.07;
  pointer-events: none;
}

/* Form body */
.body { padding: var(--s-8); }

.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-6); }
.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.field .req { color: var(--fail); margin-left: 2px; }
.field .hint { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

.input, .select, .textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 10px 12px;
  transition: border-color 120ms, box-shadow 120ms;
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-050);
}
.textarea { resize: vertical; min-height: 96px; font-family: inherit; }

/* Dropzone */
.dropzone {
  border: 2px dashed var(--border);
  background: var(--canvas-tint);
  border-radius: var(--r-card);
  padding: var(--s-8);
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  position: relative;
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--signal);
  background: var(--signal-050);
}
.dropzone.has-file {
  border-style: solid;
  border-color: var(--pass);
  background: var(--pass-tint);
}
.dz-title { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.dz-sub { font-size: 13px; color: var(--ink-muted); }
.dz-file {
  display: none;
  align-items: center;
  gap: var(--s-2);
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink);
}
.dropzone.has-file .dz-file { display: flex; }
.dropzone.has-file .dz-title,
.dropzone.has-file .dz-sub { display: none; }
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Chips (pill, 999px) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-chip);
  border: 1px solid transparent;
}
.chip.info { color: var(--signal-deep); background: var(--signal-050); border-color: var(--signal-100); }
.chip.ok   { color: var(--pass); background: var(--pass-tint); border-color: #B9E3CC; }

/* Actions */
.actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-8);
  align-items: center;
}
.btn {
  font-family: inherit;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  padding: 11px 20px;
  border-radius: var(--r-input);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--signal);
  color: #FFF;
  border-color: var(--signal-deep);
}
.btn-primary:hover { background: var(--signal-deep); }
.btn-primary:disabled { background: var(--ink-faint); border-color: var(--ink-faint); cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--ink-2); color: var(--ink); }

.notice {
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-input);
  font-size: 13.5px;
  display: none;
}
.notice.show { display: block; }
.notice.ok { background: var(--pass-tint); color: #1E6F4A; border: 1px solid #B9E3CC; }
.notice.err { background: var(--fail-tint); color: #7A2A2A; border: 1px solid #E4B3B3; }
.notice.info { background: var(--signal-050); color: var(--signal-deep); border: 1px solid var(--signal-100); }

/* Footer strip */
.foot {
  padding: var(--s-4) var(--s-8);
  border-top: 1px solid var(--border);
  background: var(--canvas-tint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Progress bar */
.progress {
  margin-top: var(--s-4);
  height: 4px;
  background: var(--border);
  border-radius: var(--r-chip);
  overflow: hidden;
  display: none;
}
.progress.show { display: block; }
.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--signal-deep), var(--signal));
  transition: width 200ms;
}

/* Mobile */
@media (max-width: 640px) {
  .hero { padding: var(--s-6) var(--s-4); }
  .body { padding: var(--s-4); }
  .hero-title { font-size: 22px; }
  .hero-logo { height: 56px; }
}