/* ==========================================================================
   CocoaChain — Generated imagery
   Self-contained gradient/SVG "photography" so the UI ships with zero
   external assets while still reading as a rich, image-led product.
   ========================================================================== */

.ph {
  position: relative; overflow: hidden;
  background: var(--bg-inset);
  isolation: isolate;
}
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.ph::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 45% at 22% 18%, rgba(255,255,255,.24), transparent 60%),
    linear-gradient(180deg, transparent 40%, rgba(10,22,14,.34));
  mix-blend-mode: soft-light;
}

/* leafy canopy — farm */
.ph-farm::before {
  background-image:
    radial-gradient(circle at 18% 22%, #7cc46e 0 8%, transparent 8.5%),
    radial-gradient(circle at 62% 12%, #5daa52 0 11%, transparent 11.5%),
    radial-gradient(circle at 88% 40%, #3b7d3a 0 14%, transparent 14.5%),
    radial-gradient(circle at 30% 74%, #2f6b30 0 18%, transparent 18.5%),
    radial-gradient(circle at 72% 82%, #4e9646 0 15%, transparent 15.5%),
    linear-gradient(160deg, #8fd07e, #2e6a2f 62%, #1c4720);
}
/* ripe pods — harvest */
.ph-harvest::before {
  background-image:
    radial-gradient(ellipse 14% 26% at 26% 46%, #e0a54a 0 100%, transparent),
    radial-gradient(ellipse 12% 24% at 52% 62%, #c68a2b 0 100%, transparent),
    radial-gradient(ellipse 13% 25% at 76% 38%, #b9762a 0 100%, transparent),
    linear-gradient(150deg, #4f8f46, #2a5c2c 70%, #1d4322);
}
/* fermentation boxes — warm wood */
.ph-ferment::before {
  background-image:
    repeating-linear-gradient(96deg, rgba(0,0,0,.12) 0 3px, transparent 3px 26px),
    linear-gradient(160deg, #b98a4e, #7a5227 55%, #4a3018);
}
/* drying beds — sun */
.ph-dry::before {
  background-image:
    radial-gradient(circle at 76% 18%, rgba(255,236,180,.95) 0 9%, transparent 34%),
    repeating-linear-gradient(0deg, rgba(90,58,26,.35) 0 2px, transparent 2px 14px),
    linear-gradient(170deg, #f2d59a, #c99a4e 55%, #8a6231);
}
/* sorting / grading table */
.ph-sort::before {
  background-image:
    radial-gradient(circle at 30% 40%, #6b4423 0 5%, transparent 5.5%),
    radial-gradient(circle at 58% 30%, #7d5028 0 4%, transparent 4.5%),
    radial-gradient(circle at 44% 66%, #5a381d 0 6%, transparent 6.5%),
    radial-gradient(circle at 78% 60%, #6b4423 0 5%, transparent 5.5%),
    linear-gradient(150deg, #d8c3a2, #a8895f);
}
/* jute sacks — packaging */
.ph-pack::before {
  background-image:
    repeating-linear-gradient(45deg, rgba(120,88,48,.28) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(120,88,48,.22) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #d9c19a, #a98a5c 60%, #7d6440);
}
/* warehouse interior */
.ph-warehouse::before {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.1) 0 8%, transparent 8% 20%),
    repeating-linear-gradient(90deg, rgba(20,32,26,.35) 0 12px, transparent 12px 68px),
    linear-gradient(170deg, #5c6b63, #2e3a34 60%, #1b241f);
}
/* port / shipment */
.ph-ship::before {
  background-image:
    radial-gradient(circle at 80% 22%, rgba(255,224,168,.7) 0 7%, transparent 30%),
    linear-gradient(180deg, #7fb3d5 0 46%, #2b5f80 46% 60%, #17384d);
}
/* chocolate / consumer */
.ph-cocoa::before {
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 10px, transparent 10px 42px),
    linear-gradient(160deg, #7b4a25, #4a2a14 60%, #2c180b);
}
/* portrait tile */
.ph-portrait::before {
  background-image:
    radial-gradient(circle at 50% 34%, #d8a97a 0 15%, transparent 15.5%),
    radial-gradient(ellipse 34% 30% at 50% 88%, #3b5f74 0 100%, transparent),
    linear-gradient(160deg, #9fc48f, #4d7a4f);
}
/* map plate */
.ph-map::before {
  background-image:
    radial-gradient(circle at 30% 40%, rgba(93,170,82,.5) 0 18%, transparent 19%),
    radial-gradient(circle at 70% 66%, rgba(198,138,43,.4) 0 14%, transparent 15%),
    linear-gradient(160deg, #cfe3d4, #9fbfae);
}
[data-theme="dark"] .ph-map::before {
  background-image:
    radial-gradient(circle at 30% 40%, rgba(93,170,82,.4) 0 18%, transparent 19%),
    radial-gradient(circle at 70% 66%, rgba(198,138,43,.3) 0 14%, transparent 15%),
    linear-gradient(160deg, #1e2a24, #131b17);
}

/* stage badge over a photo */
.ph-badge {
  position: absolute; z-index: 2; left: 10px; top: 10px;
  padding: 4px 9px; border-radius: var(--r-full);
  background: rgba(10, 18, 13, .55); backdrop-filter: blur(6px);
  color: #fff; font-size: var(--text-2xs); font-weight: 600;
}

/* hero photo for public trace page */
.hero-photo {
  position: relative; border-radius: var(--r-2xl); overflow: hidden;
  min-height: 340px;
}
.hero-photo .hero-copy {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: var(--s-7);
  background: linear-gradient(180deg, transparent, rgba(8, 16, 11, .8));
  color: #fff;
}

/* blockchain lattice backdrop for auth + hero panels */
.lattice {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.lattice svg { width: 100%; height: 100%; }
.lattice .lk { stroke: rgba(255,255,255,.22); stroke-width: 1; }
.lattice .nd { fill: rgba(255,255,255,.55); }
.lattice .nd.hot { fill: #dff3db; }

/* ==========================================================================
   AUTH LAYOUT
   ========================================================================== */
.auth {
  height: 100vh; height: 100dvh; display: grid;
  grid-template-columns: 1.05fr .95fr;
  position: relative; z-index: 1; overflow: hidden;
}
.auth-art {
  position: relative; overflow: hidden; height: 100%;
  background: linear-gradient(150deg, #2a5e2c, #3b7d3a 40%, #1c4a22 78%, #14361a);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s-9);
  color: #fff;
}
.auth-art::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 40% at 15% 12%, rgba(198,138,43,.42), transparent 70%),
    radial-gradient(46% 46% at 85% 78%, rgba(93,170,82,.5), transparent 70%);
}
.auth-art > * { position: relative; z-index: 2; }
.auth-quote { font-size: var(--text-3xl); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.25; max-width: 16ch; }
.auth-stats { display: flex; gap: var(--s-7); flex-wrap: wrap; }
.auth-stat .v { font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-tight); }
.auth-stat .l { font-size: var(--text-xs); opacity: .74; }

.auth-form {
  display: grid; place-items: center; padding: var(--s-6) var(--s-7);
  background: var(--bg-canvas);
  height: 100%; overflow-y: auto;
}
.auth-card { width: min(420px, 100%); }

@media (max-width: 940px) {
  .auth { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; grid-template-columns: 1fr; }
  .auth-form { height: auto; overflow-y: visible; }
  .auth-art { display: none; }
}

/* social buttons */
.social-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.social-btn {
  height: 42px; border-radius: var(--r-md);
  border: 1px solid var(--brd-2); background: var(--bg-surface);
  display: grid; place-items: center;
  transition: all var(--dur-2) var(--ease);
}
.social-btn:hover { border-color: var(--brd-3); background: var(--bg-hover); transform: translateY(-2px); }
.social-btn svg { width: 19px; height: 19px; }

/* role simulator (login page) */
.role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.role-card {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--brd-2); background: var(--bg-surface);
  transition: all var(--dur-2) var(--ease); cursor: pointer; width: 100%;
}
.role-card:hover { border-color: var(--brand-400); background: var(--bg-hover); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.role-card:active { transform: translateY(0); }
.role-card .ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--accent-fg);
}
.role-card .ic svg { width: 15px; height: 15px; }
.role-card .body { min-width: 0; }
.role-card .t { font-size: var(--text-sm); font-weight: 600; }
.role-card .s { font-size: var(--text-2xs); color: var(--text-3); display: block; margin-top: 2px; line-height: 1.35; }

/* divider with label */
.or {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--text-4); font-size: var(--text-xs);
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--brd-1); }

/* ==========================================================================
   PUBLIC TRACE PAGE
   ========================================================================== */
.public-shell { position: relative; z-index: 1; }
.public-nav {
  position: sticky; top: 0; z-index: 40;
  height: 66px; display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-7);
  background: var(--bg-topbar);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--brd-1);
}
.public-wrap { max-width: 1080px; margin-inline: auto; padding: var(--s-8) var(--s-6) var(--s-11); }
@media (max-width: 720px) { .public-wrap { padding: var(--s-5) var(--s-4) var(--s-9); } .public-nav { padding: 0 var(--s-4); } }

/* error / success pages */
.state-page {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--s-7); position: relative; z-index: 1; text-align: center;
}
.state-inner { max-width: 520px; }
.state-art { width: 200px; height: 200px; margin: 0 auto var(--s-6); }