/* Agro-AI — Danifo design system skin, NZT BusinessLab brand.
   Tokens (colors / fonts / spacing / type / radius / motion / semantic) are
   vendored under assets/css/tokens/ and imported below. The .nzt wordmark and
   .df-cta pill recipes are lifted from nzt-businesslab's site.css so this demo
   matches the NZT landing it links out from. */
@import "assets/css/tokens/tokens.css";

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

body {
  margin: 0;
  font-family: var(--danifo-font-body);
  font-size: var(--ts-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--danifo-orange); outline-offset: 3px; border-radius: 2px; }

/* ── NZT BusinessLab wordmark (from nzt-businesslab/site.css) ─────────────── */
.nzt { display: inline-flex; align-items: center; gap: var(--space-2); line-height: 1; }
.nzt__spark { width: 22px; height: 22px; flex: none; color: var(--danifo-orange); }
.nzt__name { display: inline-flex; align-items: baseline; gap: 0.32em; }
.nzt__n {
  font-family: var(--danifo-font-display); font-weight: 900; font-size: 20px;
  letter-spacing: 0.02em; color: var(--text-primary);
}
.nzt__b {
  font-family: var(--danifo-font-body); font-weight: 400; font-size: 18px;
  letter-spacing: 0.01em; color: var(--text-secondary);
}
.nzt--on-dark .nzt__n { color: #fff; }
.nzt--on-dark .nzt__b { color: rgba(255, 255, 255, 0.82); }
.nzt--lg .nzt__spark { width: 26px; height: 26px; }
.nzt--lg .nzt__n { font-size: 24px; }
.nzt--lg .nzt__b { font-size: 21px; }

/* ── Header (navy branded band) ──────────────────────────────────────────── */
.site-header { position: relative; background: #0E0B2C; color: #fff; overflow: hidden; }
.site-header__mesh {
  position: absolute; inset: -60% -10% auto -10%; height: 240%;
  background:
    radial-gradient(40% 60% at 12% 30%, rgba(244, 121, 41, 0.28), transparent 70%),
    radial-gradient(38% 55% at 88% 20%, rgba(96, 72, 157, 0.30), transparent 75%);
  filter: blur(46px); z-index: 0; pointer-events: none;
}
.site-header__inner {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 0 auto;
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.brand { display: flex; flex-direction: column; gap: var(--space-2); }
.brand__sub {
  margin: 0; font-size: var(--ts-small); font-weight: 400;
  color: rgba(255, 255, 255, 0.72); letter-spacing: 0.01em;
}
.badge {
  align-self: flex-start;
  font-family: var(--danifo-font-body); font-weight: 700; font-size: var(--ts-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--danifo-orange);
  background: rgba(244, 121, 41, 0.14); border: 1px solid rgba(244, 121, 41, 0.45);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  max-width: 1080px; margin: var(--space-7) auto; padding: 0 var(--space-6);
}
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; gap: var(--space-4); margin: var(--space-6) auto; }
  .site-header__inner { padding: var(--space-4) var(--space-5); }
}

.panel {
  background: var(--surface-default); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
@media (max-width: 860px) { .panel { padding: var(--space-5); } }

.panel h2 {
  font-family: var(--danifo-font-body); font-weight: 700; font-size: var(--ts-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-accent); margin: 0 0 var(--space-4);
}
.panel h2:not(:first-child) { margin-top: var(--space-6); }

/* ── Line-art icon chip (dropzone + placeholder) ─────────────────────────── */
.icon-chip {
  width: 60px; height: 60px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-purple-soft); color: var(--danifo-orange);
}
.icon-chip svg {
  width: 32px; height: 32px;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Dropzone ────────────────────────────────────────────────────────────── */
.dropzone {
  display: block; position: relative; cursor: pointer;
  border: 1.5px dashed rgba(41, 37, 106, 0.22); border-radius: var(--radius-md);
  background: var(--surface-default); overflow: hidden; min-height: 210px;
  transition: border-color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}
.dropzone:hover, .dropzone.dragover { border-color: var(--danifo-orange); background: #fff7f1; }
.dropzone-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-7) var(--space-4); text-align: center;
  color: var(--text-secondary); min-height: 210px;
}
.dropzone-inner p { margin: 0; font-size: var(--ts-body); }
.dropzone-inner strong { color: var(--text-primary); }
.dz-hint { font-size: var(--ts-small) !important; color: var(--text-secondary); opacity: 0.8; }
.preview { display: block; width: 100%; max-height: 380px; object-fit: contain; background: #0E0B2C; }

/* ── Examples ────────────────────────────────────────────────────────────── */
.examples { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.examples-label { font-size: var(--ts-small); color: var(--text-secondary); }
.example-thumbs { display: flex; gap: var(--space-2); }
.ex-thumb {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: var(--surface-default);
  cursor: pointer; color: var(--text-primary);
  font-family: var(--danifo-font-display); font-weight: 900; font-size: var(--ts-small);
  transition: border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.ex-thumb:hover { border-color: var(--danifo-orange); color: var(--danifo-orange); }

/* ── Form ────────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 480px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid label {
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: var(--ts-small); font-weight: 700; color: var(--text-secondary);
}
.form-grid select, .form-grid input {
  font-family: var(--danifo-font-body); font-size: var(--ts-body); font-weight: 400;
  color: var(--text-primary); height: 46px; padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-default);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.form-grid select:focus, .form-grid input:focus {
  outline: none; border-color: var(--danifo-orange);
  box-shadow: 0 0 0 2px rgba(244, 121, 41, 0.35);
}

/* ── Primary button (df-cta pill) ────────────────────────────────────────── */
.primary {
  margin-top: var(--space-5); width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);
  background: var(--action-default); color: var(--text-on-orange);
  font-family: var(--danifo-font-body); font-weight: 700; font-size: var(--ts-body); letter-spacing: 0.01em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.primary:hover:not(:disabled), .primary:focus-visible:not(:disabled) {
  background: var(--action-hover); transform: translateY(-2px);
}
.primary:disabled { background: var(--danifo-light-gray); color: #8a8a93; cursor: not-allowed; }
.df-cta__icon {
  width: 1.15em; height: 1.15em; flex: none;
  transition: transform var(--duration-base) var(--ease-emphasized);
}
.primary:hover:not(:disabled) .df-cta__icon { transform: translateX(4px); }

.error { color: #d92d20; font-size: var(--ts-small); margin-top: var(--space-3); font-weight: 700; }

/* ── Results ─────────────────────────────────────────────────────────────── */
.placeholder, .loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--text-secondary);
  padding: var(--space-8) var(--space-5); gap: var(--space-4); min-height: 300px;
}
.placeholder p { max-width: 330px; font-size: var(--ts-body); }
.placeholder em { font-style: normal; font-weight: 700; color: var(--text-primary); }

.spinner {
  width: 40px; height: 40px; border: 3px solid var(--border-subtle);
  border-top-color: var(--danifo-orange); border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.result figure { margin: 0 0 var(--space-5); }
#result-image {
  width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: #0E0B2C;
}
.result figcaption { font-size: var(--ts-small); color: var(--text-secondary); margin-top: var(--space-2); text-align: center; }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.metric {
  background: var(--surface-default); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-3); text-align: center;
}
.metric.headline { background: var(--surface-orange); border-color: var(--surface-orange); }
.metric-value {
  display: block; font-family: var(--danifo-font-display); font-weight: 900;
  font-size: 30px; line-height: 1.05; color: var(--text-primary);
}
.metric.headline .metric-value { color: var(--text-on-orange); }
.metric-label { font-size: var(--ts-small); color: var(--text-secondary); margin-top: var(--space-2); display: block; }
.metric.headline .metric-label { color: rgba(255, 255, 255, 0.88); }

.range { text-align: center; color: var(--text-secondary); font-size: var(--ts-body); margin: var(--space-4) 0 var(--space-1); }
.method { margin-top: var(--space-3); font-size: var(--ts-small); }
.method summary { cursor: pointer; color: var(--danifo-orange); font-weight: 700; }
.method p { color: var(--text-secondary); }
.disclaimer { font-size: var(--ts-small); color: var(--text-secondary); }

/* ── Footer (navy, with wordmark) ────────────────────────────────────────── */
.foot { background: #0E0B2C; color: rgba(255, 255, 255, 0.7); padding: var(--space-6); margin-top: var(--space-7); }
.foot__inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.foot__copy { font-size: var(--ts-small); }

.hidden { display: none !important; }