/* Annona Intake — Design tokens
 * Warm, daylight-friendly counterpart to the dark trading-desk platform.
 * Large tap targets, high contrast, photo-forward.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

.intake-root {
  /* Paper / surfaces */
  --paper:        #FBF7F0;          /* cream background */
  --paper-dim:    #F3EEE3;          /* section dividers */
  --card:         #FFFFFF;
  --card-shadow:  0 1px 2px rgba(62, 41, 20, 0.04), 0 6px 20px rgba(62, 41, 20, 0.06);

  /* Ink */
  --ink:          #2B1D10;          /* coffee-bean dark */
  --ink-2:        #5A4634;          /* secondary text */
  --ink-3:        #917E6B;          /* muted */
  --ink-line:     rgba(62, 41, 20, 0.09);

  /* Brand + semantic */
  --gold:         #B8894B;          /* matches platform goud */
  --gold-dim:     #C9A876;
  --gold-soft:    #F3E4C7;          /* chip bg */

  --green:        #4E7A3E;          /* confirmed */
  --green-soft:   #DCE8D2;

  --rust:         #B85C34;          /* weighing / in-progress */
  --rust-soft:    #F3D9CA;

  --red:          #B53A2F;          /* alerts */
  --blue:         #2F6FA8;          /* links / info */

  /* Layout */
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    28px;

  --tap-min:      56px;             /* iOS HIG says 44, we want field-usable */
  --tap-lg:       72px;             /* primary CTAs */

  color: var(--ink);
  background: var(--paper);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.intake-root * { box-sizing: border-box; }

.intake-root .f-display { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
.intake-root .f-num     { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* Screen scaffolding */
.intake-screen {
  width: 100%;
  height: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  color: var(--ink);
}

.intake-screen .scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.intake-screen .topbar {
  padding: 10px 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-line);
  min-height: 56px;
}
.intake-screen .topbar h1 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.intake-screen .topbar .back {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--paper-dim);
  color: var(--ink);
  flex-shrink: 0;
}

/* Bottom CTA shelf */
.intake-screen .shelf {
  padding: 12px 16px 20px;
  background: var(--paper);
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Primary button */
.btn-primary {
  height: var(--tap-lg);
  padding: 0 22px;
  background: var(--ink);
  color: #FBF7F0;
  border-radius: var(--radius-lg);
  font-size: 17px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  width: 100%;
}
.btn-primary.gold { background: var(--gold); color: #2B1D10; }
.btn-primary.green { background: var(--green); color: #FBF7F0; }
.btn-primary:disabled { background: var(--paper-dim); color: var(--ink-3); }

.btn-secondary {
  height: var(--tap-min);
  padding: 0 18px;
  background: var(--paper-dim);
  color: var(--ink);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Card */
.intake-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* Row (for lists) */
.intake-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: var(--tap-min);
  border-bottom: 1px solid var(--ink-line);
  background: var(--card);
  cursor: pointer;
}
.intake-row:last-child { border-bottom: none; }

/* Chip / pill */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 13px;
  font-weight: 500;
}
.chip.green { background: var(--green-soft); color: var(--green); }
.chip.rust  { background: var(--rust-soft); color: var(--rust); }
.chip.ink   { background: var(--ink); color: #FBF7F0; }
.chip.outline { background: transparent; border: 1px solid var(--ink-line); color: var(--ink-2); }

/* Avatar (photo of producer, plot, etc.) */
.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 18px;
  color: #FBF7F0;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), var(--rust));
  overflow: hidden;
}
.avatar.lg { width: 80px; height: 80px; font-size: 28px; }
.avatar.xl { width: 120px; height: 120px; font-size: 40px; }
.avatar.square { border-radius: 16px; }

/* Plot image placeholder */
.plot-thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15), transparent 40%),
    linear-gradient(135deg, #6B8E4E, #4E6B35);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.plot-thumb::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 8px);
}

/* Keyboard numeric big input */
.big-number {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 48px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}
.big-number .unit {
  font-size: 20px;
  color: var(--ink-3);
  margin-left: 8px;
  font-weight: 500;
}

/* Progress dots */
.dots { display: flex; gap: 6px; align-items: center; }
.dots .d {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-line);
}
.dots .d.active { background: var(--ink); width: 18px; border-radius: 3px; }

/* Metric card */
.metric {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--card-shadow);
}
.metric .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 500; }
.metric .value { font-family: 'Fraunces', serif; font-weight: 500; font-size: 28px; margin-top: 4px; letter-spacing: -0.01em; }
.metric .sub   { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* Scanner viewfinder */
.viewfinder {
  position: relative;
  aspect-ratio: 1;
  background: #1a1410;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.viewfinder::before {
  content: '';
  position: absolute;
  inset: 12%;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.3);
}
.viewfinder .corner {
  position: absolute;
  width: 24px; height: 24px;
  border-color: var(--gold);
  border-style: solid;
}
.viewfinder .scan-bar {
  position: absolute;
  left: 14%; right: 14%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: scan 2s linear infinite;
}
@keyframes scan {
  0% { top: 16%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 80%; opacity: 0; }
}

/* QR code fake */
.qr {
  width: 120px; height: 120px;
  background:
    linear-gradient(0deg, transparent 48%, #2B1D10 48% 52%, transparent 52%),
    linear-gradient(90deg, transparent 32%, #2B1D10 32% 36%, transparent 36% 62%, #2B1D10 62% 66%, transparent 66%),
    linear-gradient(0deg, transparent 12%, #2B1D10 12% 16%, transparent 16% 28%, #2B1D10 28% 32%, transparent 32% 68%, #2B1D10 68% 72%, transparent 72% 88%, #2B1D10 88%),
    #FFFFFF;
  border-radius: 10px;
  padding: 8px;
  box-shadow: var(--card-shadow);
  position: relative;
}
.qr::before, .qr::after {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  border: 4px solid #2B1D10;
  border-radius: 3px;
}
.qr::before { top: 10px; left: 10px; }
.qr::after  { top: 10px; right: 10px; }