/* PAGE DESIGN ROLL — Field Guide Card Mosaic (orders)
   Roll: card mosaic · outlined field-guide cards · spacing dividers · hover lift
   Signature: growth-stage status pills (seed → sprout → leaf → harvest)
   Tokens: --fg-* · grower copy · plot ledger metaphor */

.page-a113-fieldguide.page-orders {
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(125, 91, 166, 0.08), transparent 55%),
    radial-gradient(ellipse 60% 45% at 0% 5%, rgba(74, 103, 65, 0.1), transparent 52%),
    var(--fg-wheat);
}

.fg-ord-main { padding-bottom: var(--a113-space-5); }

.fg-ord-mast-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a113-space-2);
  align-items: flex-end;
  justify-content: space-between;
}

.fg-ord-count {
  display: grid;
  place-items: center;
  min-width: 4.75rem;
  padding: 0.7rem 1rem;
  background: var(--fg-herb);
  color: var(--fg-on-herb);
  border-radius: var(--a113-radius-md);
  text-align: center;
  box-shadow: 0 3px 0 var(--fg-herb-deep);
}
.fg-ord-count strong {
  font-family: var(--fg-font-logo);
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 400;
}
.fg-ord-count span {
  font-family: var(--fg-font-tab);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-sun);
}

.fg-ord-loading {
  padding: 1rem 1.15rem;
  margin-bottom: var(--a113-space-2);
  background: var(--a113-cyan-wash);
  border: 2px solid var(--a113-border);
  border-radius: var(--a113-radius-md);
  font-weight: 600;
  color: var(--fg-herb-deep);
}

.fg-ord-guest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-top: var(--a113-space-2);
}

.fg-ord-head {
  margin-bottom: var(--a113-space-3);
}
.fg-ord-head h2 {
  margin: 0 0 0.2rem;
  font-family: var(--fg-font-logo);
  font-size: var(--a113-type-lg);
  font-weight: 400;
  color: var(--fg-bark);
}
.fg-ord-head p {
  margin: 0;
  font-size: var(--a113-type-sm);
  color: var(--fg-mute);
}

.fg-ord-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--a113-space-3);
}

/* Field-guide card */
.fg-card {
  display: flex;
  flex-direction: column;
  background: var(--a113-surface);
  border: 2px solid var(--a113-border);
  border-radius: var(--a113-radius-lg);
  overflow: hidden;
  box-shadow: var(--a113-shadow-soft);
  transition: transform 0.25s var(--a113-ease), box-shadow 0.25s var(--a113-ease), border-color 0.25s;
  animation: fg-card-in 0.45s var(--a113-ease) both;
  animation-delay: calc(var(--fg-i, 0) * 60ms);
}
.fg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--a113-shadow-lift);
  border-color: var(--fg-kraft-deep);
}
@keyframes fg-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.fg-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px dashed var(--a113-border);
  background: linear-gradient(180deg, rgba(232, 220, 200, 0.35) 0%, transparent 100%);
}
.fg-card-id {
  margin: 0;
  font-family: var(--fg-font-tab);
  font-size: var(--a113-type-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-bark);
}

/* Growth-stage status pills */
.fg-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.22em 0.7em;
  border-radius: var(--a113-radius-pill);
  font-family: var(--fg-font-tab);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
}
.fg-stage-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fg-card.tone-placed .fg-stage-pill,
.fg-card.tone-seed .fg-stage-pill {
  background: #F0E6D4;
  color: #6B4E2E;
  border-color: var(--fg-kraft-deep);
}
.fg-card.tone-placed .fg-stage-pill::before,
.fg-card.tone-seed .fg-stage-pill::before { background: #8B6914; }
.fg-card.tone-packed .fg-stage-pill,
.fg-card.tone-sprout .fg-stage-pill {
  background: #E2F0DC;
  color: var(--fg-herb-deep);
  border-color: rgba(74, 103, 65, 0.35);
}
.fg-card.tone-packed .fg-stage-pill::before,
.fg-card.tone-sprout .fg-stage-pill::before { background: #6BBF59; }
.fg-card.tone-shipped .fg-stage-pill,
.fg-card.tone-leaf .fg-stage-pill {
  background: var(--a113-cyan-wash);
  color: var(--fg-herb-deep);
  border-color: rgba(74, 103, 65, 0.4);
}
.fg-card.tone-shipped .fg-stage-pill::before,
.fg-card.tone-leaf .fg-stage-pill::before { background: var(--fg-herb); }
.fg-card.tone-delivered .fg-stage-pill,
.fg-card.tone-harvest .fg-stage-pill {
  background: #FFF3CC;
  color: #7A5A10;
  border-color: var(--fg-sun-deep);
}
.fg-card.tone-delivered .fg-stage-pill::before,
.fg-card.tone-harvest .fg-stage-pill::before { background: var(--fg-sun); }
.fg-card.tone-cancelled .fg-stage-pill,
.fg-card.tone-wilted .fg-stage-pill {
  background: #FCE8E4;
  color: var(--a113-err);
  border-color: rgba(199, 62, 29, 0.35);
}
.fg-card.tone-cancelled .fg-stage-pill::before,
.fg-card.tone-wilted .fg-stage-pill::before { background: var(--a113-err); }

.fg-card-body {
  flex: 1;
  padding: 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.fg-card-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem 1rem;
  margin: 0;
  font-size: var(--a113-type-sm);
}
.fg-card-meta div { display: flex; flex-direction: column; gap: 0.1em; }
.fg-card-meta dt {
  font-family: var(--fg-font-tab);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
}
.fg-card-meta dd {
  margin: 0;
  font-weight: 600;
  color: var(--fg-ink);
}
.fg-card-items {
  margin: 0;
  font-size: var(--a113-type-xs);
  color: var(--fg-mute);
  line-height: 1.45;
}
.fg-card-date {
  font-family: var(--fg-font-script);
  font-size: 1.05rem;
  color: var(--fg-lavender-deep);
}

.fg-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.75rem 1.1rem 1rem;
  border-top: 1px dashed var(--a113-border);
  background: rgba(245, 237, 214, 0.35);
}

.fg-ord-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  margin-top: var(--a113-space-2);
  padding-top: var(--a113-space-2);
}
.fg-ord-links a {
  font-size: var(--a113-type-sm);
  font-weight: 700;
  color: var(--fg-herb-deep);
  text-decoration: none;
}
.fg-ord-links a:hover { color: var(--fg-lavender-deep); }

@media (prefers-reduced-motion: reduce) {
  .fg-card { animation: none; transition: none; }
  .fg-card:hover { transform: none; }
}