/* Appily twentyone — Greensphere Field Plot Survey company info */

.page-field-plot {
  --fp-ink: #1a2418;
  --fp-muted: #5c6658;
  --fp-line: #c4d4bc;
  --fp-paper: #f4f7f0;
  --fp-grid: #dce8d4;
  --fp-soil: #4a3828;
  --fp-soil-light: #6b5344;
  --fp-green: #1a5c38;
  --fp-green-light: #2d8a55;
  --fp-survey: #8b6914;
  --fp-survey-light: #c4a035;
  --fp-contour: rgba(74, 56, 40, 0.12);
  background: var(--fp-paper);
}

/* Shared */
.fp-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fp-survey-light);
}

.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.fp-btn-primary {
  background: var(--fp-green);
  color: #fff;
  border-color: var(--fp-green);
}

.fp-btn-primary:hover {
  background: var(--fp-green-light);
  border-color: var(--fp-green-light);
}

.fp-btn-outline {
  background: transparent;
  color: var(--fp-green);
  border-color: var(--fp-green);
}

.fp-btn-outline:hover {
  background: rgba(26, 92, 56, 0.08);
}

/* ── Survey hero ── */
.fp-survey {
  position: relative;
  padding: 44px 0 48px;
  background: linear-gradient(175deg, #2a3d28 0%, #3d5a38 45%, #5a7a4a 100%);
  color: #fff;
  overflow: hidden;
}

.fp-contours {
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(
      ellipse 120% 80% at 30% 70%,
      transparent 0,
      transparent 18px,
      var(--fp-contour) 18px,
      var(--fp-contour) 20px
    ),
    repeating-radial-gradient(
      ellipse 100% 60% at 70% 40%,
      transparent 0,
      transparent 24px,
      rgba(255, 255, 255, 0.04) 24px,
      rgba(255, 255, 255, 0.04) 26px
    );
  pointer-events: none;
}

.fp-grid-lines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(255, 255, 255, 0.06) 39px,
      rgba(255, 255, 255, 0.06) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      rgba(255, 255, 255, 0.06) 39px,
      rgba(255, 255, 255, 0.06) 40px
    );
  pointer-events: none;
}

.fp-marker-n {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--fp-survey-light);
  border: 2px solid var(--fp-survey-light);
  border-radius: 50%;
  opacity: 0.7;
}

.fp-survey-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(200px, 0.8fr);
  gap: 32px;
  align-items: center;
}

.fp-survey-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.12;
  margin: 0 0 12px;
  color: #fff;
}

.fp-survey-copy h1 em {
  font-style: normal;
  color: #b8e8a0;
}

.fp-lede {
  margin: 0 0 20px;
  max-width: 54ch;
  line-height: 1.65;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.88);
}

.fp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fp-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fp-stats strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  line-height: 1;
}

.fp-stats span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* Survey tripod badge */
.fp-tripod {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 20px 22px 18px;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(196, 160, 53, 0.45);
  border-radius: 6px;
  text-align: center;
}

.fp-tripod-legs {
  position: relative;
  width: 56px;
  height: 40px;
  margin: 0 auto 8px;
}

.fp-tripod-legs span {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 32px;
  background: var(--fp-survey-light);
  border-radius: 1px;
}

.fp-tripod-legs span:nth-child(1) { left: 8px; transform: rotate(-18deg); }
.fp-tripod-legs span:nth-child(2) { left: 50%; margin-left: -1.5px; }
.fp-tripod-legs span:nth-child(3) { right: 8px; transform: rotate(18deg); }


.fp-tripod-scope {
  display: block;
  width: 22px;
  height: 14px;
  margin: -4px auto 4px;
  background: #3d2814;
  border: 2px solid var(--fp-survey-light);
  border-radius: 3px;
}

.fp-tripod-label {
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.fp-tripod-code {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fp-survey-light);
}

.fp-tripod-entity {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
}

.fp-survey-lip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--fp-soil-light),
    var(--fp-soil-light) 6px,
    var(--fp-survey) 6px,
    var(--fp-survey) 12px
  );
}

/* ── Registry layout ── */
.fp-registry {
  padding: 32px 0 64px;
}

.fp-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* Boundary stake rail */
.fp-boundary-rail {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
}

.fp-rail-kicker {
  margin-bottom: 8px;
  padding-left: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fp-muted);
}

.fp-rail-line {
  position: absolute;
  left: 9px;
  top: 40px;
  bottom: 16px;
  width: 2px;
  background: repeating-linear-gradient(
    180deg,
    var(--fp-survey),
    var(--fp-survey) 6px,
    transparent 6px,
    transparent 12px
  );
  opacity: 0.5;
}

.fp-boundary-rail {
  position: sticky;
}

.fp-stake {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 20px;
  text-decoration: none;
  border-radius: 0 4px 4px 0;
  transition: background 0.15s;
}

.fp-stake:hover {
  background: rgba(26, 92, 56, 0.06);
}

.fp-stake.is-active {
  background: rgba(26, 92, 56, 0.1);
}

.fp-stake-post {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: var(--fp-survey-light);
  border: 2px solid var(--fp-soil);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.fp-stake.is-active .fp-stake-post {
  background: var(--fp-green);
  border-color: var(--fp-green);
}

.fp-stake-num {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--fp-survey);
  min-width: 20px;
}

.fp-stake.is-active .fp-stake-num {
  color: var(--fp-green);
}

.fp-stake-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fp-muted);
}

.fp-stake.is-active .fp-stake-label {
  color: var(--fp-ink);
}

/* Sheets */
.fp-sheets {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.fp-sheet {
  padding: 24px 26px 26px;
  background: #fff;
  border: 1px solid var(--fp-line);
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(26, 36, 24, 0.06);
}

.fp-sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--fp-grid);
}

.fp-sheet-code {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--fp-survey);
}

.fp-sheet-head h2 {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--fp-ink);
}

.fp-sheet-ref {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fp-muted);
}

.fp-sheet-lede {
  margin: 0 0 18px;
  line-height: 1.65;
  font-size: 0.92rem;
  color: var(--fp-muted);
}

/* Story grids */
.fp-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.85fr);
  gap: 24px;
  align-items: start;
}

.fp-story-grid-reverse {
  direction: rtl;
}

.fp-story-grid-reverse > * {
  direction: ltr;
}

.fp-story-copy p {
  margin: 0 0 14px;
  line-height: 1.65;
  font-size: 0.92rem;
  color: var(--fp-ink);
}

.fp-story-copy p:last-child {
  margin-bottom: 0;
}

.fp-mission-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fp-mission-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fp-ink);
}

.fp-mission-mark {
  flex-shrink: 0;
  color: var(--fp-green);
  font-size: 0.6rem;
  margin-top: 6px;
}

.fp-mission-list strong {
  color: var(--fp-green);
}

/* Survey photo mount */
.fp-photo-mount {
  position: relative;
  margin: 0;
  padding: 8px;
  background: var(--fp-paper);
  border: 2px solid var(--fp-line);
  border-radius: 2px;
}

.fp-photo-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--fp-survey);
}

.fp-photo-tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.fp-photo-tr { top: 4px; right: 4px; border-left: none; border-bottom: none; }
.fp-photo-bl { bottom: 4px; left: 4px; border-right: none; border-top: none; }
.fp-photo-br { bottom: 4px; right: 4px; border-left: none; border-top: none; }

.fp-photo-mount img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1px;
}

.fp-photo-mount figcaption {
  margin-top: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fp-muted);
  text-align: center;
}

.fp-photo-mount-sm {
  max-width: 280px;
}

/* Plot grid (catalog aisles) */
.fp-plot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.fp-plot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 12px;
  text-decoration: none;
  background: var(--fp-paper);
  border: 1px solid var(--fp-line);
  border-radius: 4px;
  border-top: 3px solid var(--fp-green);
  transition: transform 0.15s, box-shadow 0.15s;
}

.fp-plot:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(26, 92, 56, 0.12);
}

.fp-plot-pin {
  font-size: 1.2rem;
  line-height: 1;
}

.fp-plot-code {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--fp-survey);
}

.fp-plot-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--fp-ink);
  line-height: 1.25;
}

.fp-plot-count {
  font-size: 0.72rem;
  color: var(--fp-muted);
}

.fp-tone-leaf { border-top-color: #3d8a55; }
.fp-tone-root { border-top-color: #c47d3a; }
.fp-tone-gourd { border-top-color: #e8a830; }
.fp-tone-crisp { border-top-color: #5a9a6a; }
.fp-tone-pepper { border-top-color: #d45a3a; }
.fp-tone-bulb { border-top-color: #9a7b4f; }
.fp-tone-exotic { border-top-color: #6a4a8a; }

.fp-benefit-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.fp-benefit-strip li {
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fp-green);
  background: rgba(26, 92, 56, 0.08);
  border: 1px solid rgba(26, 92, 56, 0.2);
  border-radius: 3px;
}

.fp-catalog-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.fp-catalog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Compass values */
.fp-compass {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1;
  min-height: 320px;
}

.fp-compass-ring {
  position: absolute;
  inset: 12%;
  border: 3px solid var(--fp-line);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0%, var(--fp-paper) 70%),
    repeating-conic-gradient(
      from 0deg,
      transparent 0deg 44deg,
      rgba(139, 105, 20, 0.08) 44deg 45deg
    );
}

.fp-compass-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--fp-green);
  background: #fff;
  border: 2px solid var(--fp-green);
  border-radius: 50%;
  z-index: 2;
}

.fp-compass-point {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  max-width: 110px;
}

.fp-compass-point strong {
  font-size: 0.82rem;
  color: var(--fp-ink);
}

.fp-compass-point span:last-child {
  font-size: 0.72rem;
  color: var(--fp-muted);
}

.fp-point-icon {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.fp-point-n { top: 0; left: 50%; transform: translateX(-50%); }
.fp-point-s { bottom: 0; left: 50%; transform: translateX(-50%); }
.fp-point-e { right: 0; top: 50%; transform: translateY(-50%); }
.fp-point-w { left: 0; top: 50%; transform: translateY(-50%); }

/* Legal monument */
.fp-sheet-monument {
  background: linear-gradient(180deg, #fff 0%, var(--fp-paper) 100%);
}

.fp-monument {
  position: relative;
  padding-top: 12px;
}

.fp-monument-cap {
  display: block;
  width: 80%;
  max-width: 400px;
  height: 16px;
  margin: 0 auto 0;
  background: linear-gradient(180deg, var(--fp-soil-light), var(--fp-soil));
  border-radius: 4px 4px 0 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fp-monument-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px;
  background: #fff;
  border: 2px solid var(--fp-soil-light);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.fp-monument-plate {
  padding: 12px 14px;
  background: var(--fp-paper);
  border-left: 3px solid var(--fp-survey);
  border-radius: 0 4px 4px 0;
}

.fp-monument-plate-wide {
  grid-column: 1 / -1;
}

.fp-monument-primary {
  border-left-color: var(--fp-green);
  background: rgba(26, 92, 56, 0.06);
}

.fp-monument-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fp-muted);
}

.fp-monument-value {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fp-ink);
  word-break: break-word;
}

.fp-monument-value a {
  color: var(--fp-green);
  font-weight: 600;
}

.fp-mono {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em;
}

.fp-policy-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.fp-policy-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--fp-line);
  border-radius: 4px;
  transition: border-color 0.15s, background 0.15s;
}

.fp-policy-marker:hover {
  border-color: var(--fp-green);
  background: rgba(26, 92, 56, 0.04);
}

.fp-marker-stake {
  width: 8px;
  height: 20px;
  background: var(--fp-survey-light);
  border-radius: 1px;
  flex-shrink: 0;
}

.fp-policy-marker strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--fp-ink);
  line-height: 1.3;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .fp-survey-grid {
    grid-template-columns: 1fr;
  }

  .fp-tripod {
    max-width: 260px;
  }

  .fp-layout {
    grid-template-columns: 1fr;
  }

  .fp-boundary-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--fp-line);
  }

  .fp-rail-line,
  .fp-rail-kicker {
    display: none;
  }

  .fp-stake {
    padding: 8px 12px;
    border: 1px solid var(--fp-line);
    border-radius: 4px;
  }

  .fp-stake-post {
    display: none;
  }

  .fp-story-grid,
  .fp-story-grid-reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .fp-monument-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .fp-survey {
    padding: 32px 0 40px;
  }

  .fp-sheet {
    padding: 20px 18px 22px;
  }

  .fp-compass {
    min-height: 280px;
  }

  .fp-compass-point {
    max-width: 90px;
  }

  .fp-compass-point strong {
    font-size: 0.72rem;
  }

  .fp-catalog-actions {
    flex-direction: column;
    width: 100%;
  }

  .fp-catalog-actions .fp-btn {
    width: 100%;
    text-align: center;
  }
}