/* ============================================================
   Geozonica 5.3 — Refinement layer (loads last)
   Consolidates the type scale, fixes the oversized next-step
   banner and cramped asset cards, and hosts the top-bar color
   scheme + biome selectors. Override-only; delete to revert.
   ============================================================ */

/* ---------- 1. ONE type scale ----------
   Everything below ~9px is illegible at 100% zoom. We establish a
   small set of steps and map the app's scattered sizes onto them.
   --bs-font-scale still multiplies, so the user font control works. */
:root {
  --t-2xs: var(--fs-caption);
  --t-xs:  var(--fs-caption);
  --t-sm:  var(--fs-small);
  --t-md:  var(--fs-body);
  --t-lg:  var(--fs-large);
  --t-xl:  var(--fs-large);
  --t-2xl: var(--fs-heading);
}

/* Raise the smallest UI text up to legible floors, app-wide. */
.catalog-title-row strong { font-size: var(--t-sm) !important; line-height: 1.25; }
.catalog-copy em { font-size: var(--t-2xs) !important; }
.catalog-meta .tag { font-size: var(--t-2xs) !important; padding: 3px 7px !important; }
.catalog-price strong { font-size: var(--t-sm) !important; }
.catalog-price span { font-size: var(--t-2xs) !important; max-width: 60% !important; }
.catalog-actions button { font-size: var(--t-xs) !important; min-height: 34px !important; }

.tag { font-size: var(--t-2xs) !important; }
.field label { font-size: var(--t-xs) !important; }
.field small { font-size: var(--t-2xs) !important; }

.site-lens-hero p,
.site-switch small, .site-summary-grid span, .site-summary-grid small,
.site-issue small, .site-plant-status small, .growth-card span, .growth-card small,
.cover-control small, .water-status small, .placement-studio summary small,
.site-clear-state small { font-size: var(--t-2xs) !important; line-height: 1.4; }
.site-switch strong, .site-issue strong, .site-plant-status strong,
.growth-card strong, .site-clear-state strong { font-size: var(--t-xs) !important; }
.site-summary-grid strong { font-size: var(--t-lg) !important; }
.site-lens-hero h2 { font-size: var(--t-lg) !important; }

.ds-step-copy strong { font-size: var(--t-sm) !important; }
.ds-step-copy small { font-size: var(--t-2xs) !important; }
.ds-session-meter span { font-size: var(--t-2xs) !important; }
.ds-session-meter strong { font-size: var(--t-md) !important; }

/* ---------- 2. Asset cards: full-width icon, iconic + larger ----------
   The preview was a 91px band with 76px art; the card is a single
   column so the icon can span the full width. Make it a proper hero. */
.catalog-grid, .catalog-grid-v2 { grid-template-columns: 1fr !important; gap: 10px !important; }
/* The markup carries BOTH .catalog-card and .catalog-card-v2; the v1 rule sets a
   45px icon column that fights the v2 single-column layout. Force one column so
   the icon becomes a full-width hero. */
.catalog-card, .catalog-card-v2 {
  grid-template-columns: 1fr !important;
  padding: 10px !important;
  gap: 9px !important;
  align-items: stretch !important;
  text-align: left !important;
}
.asset-preview {
  grid-column: 1 / -1 !important;
  height: 132px !important;
  width: 100% !important;
  border-radius: 10px !important;
}
.asset-preview svg {
  width: 96px !important;
  height: 96px !important;
}
/* Copy + price + actions each span the full single column */
.catalog-copy, .catalog-price, .catalog-actions { grid-column: 1 / -1 !important; }
.catalog-actions { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 6px !important; }
/* Bigger tap targets + clearer hierarchy inside the card */
.catalog-title-row { align-items: center !important; }
.asset-favorite { top: 12px !important; right: 12px !important; width: 30px !important; height: 30px !important; font-size: var(--fs-body) !important; }

/* ---------- 3. Next-step banner: inline, compact, no canvas overlap ----------
   The workflow bar had 2 grid columns but 3 children (steps, next-step,
   session-meter), so the next-step wrapped into a tall floating block that
   overlapped the canvas. Make the bar a single flex row that holds all three
   inline and stays a fixed slim height. */
.ds-workflow-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 56px !important;
  max-height: 92px !important;
  padding: 6px 12px !important;
  overflow: hidden !important;
}
.ds-workflow-steps { display: flex !important; align-items: center !important; gap: 6px !important; flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
.bs-next-step {
  flex: 0 0 auto !important;
  max-width: 280px !important;
  padding: 7px 11px !important;
  border-radius: 9px !important;
  animation: none !important; /* kill the pulsing glow that drew the eye off-canvas */
}
.ds-session-meter { flex: 0 0 auto !important; }
.bs-next-copy span { font-size: var(--t-2xs) !important; }
.bs-next-copy strong { font-size: var(--t-sm) !important; }
.bs-next-symbol { width: 26px !important; height: 26px !important; }
.bs-next-arrow { font-size: var(--t-lg) !important; }

/* ---------- 4. Hourglass: shrink and stop it dominating the rail ---------- */
.bs-rhythm-hero, .bs-hourglass-wrap { width: 22px !important; height: 22px !important; }
.bs-hourglass { width: 20px !important; height: 20px !important; }
.ds-session-meter { min-width: 112px !important; padding: 4px 8px !important; }
/* The soft hourglass footer in the project-path rail took a big block; calm it. */
.v3-step-foot { padding: 8px 10px !important; }
.v3-soft-hourglass { font-size: var(--t-md) !important; }

/* ---------- 5. Top-bar controls: color scheme + biome ---------- */
.geo-topbar-controls { display: inline-flex; align-items: center; gap: 8px; }
.geo-select {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 28px 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2358655e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--ink);
  font: 700 var(--t-xs)/1 var(--body, inherit);
  cursor: pointer;
}
.geo-select:hover { border-color: var(--brand-2); }
.geo-select:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.geo-swatch-label { display: inline-flex; align-items: center; gap: 6px; }
.geo-swatch { width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); flex: none; }

@media (max-width: 1180px) {
  .geo-select { padding: 0 24px 0 9px; }
  .geo-select.geo-biome { display: none; } /* keep color scheme, drop biome first when tight */
}

/* ============================================================
   6. COLOR SCHEMES (data-geo-scheme on <body>)
   Simple, restrained colorways. These retint the app's tokens so
   every surface follows without per-component edits.
   ============================================================ */

/* Muted pastels — soft, low-chroma, calm */
body[data-geo-scheme="pastel"] {
  --brand: #3f5d54;
  --brand-2: #5b7c70;
  --accent: #cfe3c4;
  --accent-ink: #35463a;
  --soft: #f0f1ec;
  --panel: #f7f6f2;
  --line: #e0e0d6;
  --ink: #34413b;
  --muted: #7c857e;
}
/* Black & white — editorial, ink on paper */
body[data-geo-scheme="mono"] {
  --brand: #1b1b1b;
  --brand-2: #333333;
  --accent: #e9e9e9;
  --accent-ink: #111111;
  --soft: #f2f2f2;
  --panel: #fafafa;
  --line: #dcdcdc;
  --ink: #171717;
  --muted: #6a6a6a;
}
body[data-geo-scheme="mono"] .asset-preview { filter: grayscale(1) contrast(1.02); }
body[data-geo-scheme="mono"] .asset-use-button { background: #1b1b1b; }

/* Warm clay — earthy, muted terracotta neutrals */
body[data-geo-scheme="clay"] {
  --brand: #5a4636;
  --brand-2: #7a6250;
  --accent: #e6d3bd;
  --accent-ink: #4a3828;
  --soft: #f3efe9;
  --panel: #faf7f2;
  --line: #e4dccf;
  --ink: #3d332a;
  --muted: #857a6d;
}
/* Slate — cool, architectural grey-blue */
body[data-geo-scheme="slate"] {
  --brand: #2f3b45;
  --brand-2: #4a5b68;
  --accent: #cdd8de;
  --accent-ink: #28323a;
  --soft: #eef1f2;
  --panel: #f7f9f9;
  --line: #dbe1e3;
  --ink: #29323a;
  --muted: #74808a;
}

/* ============================================================
   7. BIOME THEMES (data-geo-biome on <body>)
   Biome retints ONLY the canvas/plan palette variables, so the
   design surface reads as desert/forest/etc. without changing UI
   chrome. Consumed by the asset renderer (js/app.js) via these vars.
   ============================================================ */
:root {
  --biome-veg-1: #6f9c67;   /* primary planting */
  --biome-veg-2: #4c7c53;   /* deep planting / canopy */
  --biome-ground: #e7e2d3;  /* open ground / mulch */
  --biome-hard: #d8cdb8;    /* hardscape wash */
  --biome-water: #9fc2c9;   /* water */
  --biome-accent: #b6a074;  /* path / stone */
}
body[data-geo-biome="desert"] {
  --biome-veg-1: #9caf78; --biome-veg-2: #6e8a5a; --biome-ground: #e7d8bf;
  --biome-hard: #ddc9a6; --biome-water: #b9c9b4; --biome-accent: #c8a97a;
}
body[data-geo-biome="forest"] {
  --biome-veg-1: #5f9163; --biome-veg-2: #3c6b45; --biome-ground: #e0dcc9;
  --biome-hard: #cfc7b2; --biome-water: #8fb7ba; --biome-accent: #9c8a68;
}
body[data-geo-biome="mountain"] {
  --biome-veg-1: #6b8f76; --biome-veg-2: #476b5a; --biome-ground: #dfdccf;
  --biome-hard: #c8c6bd; --biome-water: #a3c1c8; --biome-accent: #8f8d82;
}
body[data-geo-biome="farmland"] {
  --biome-veg-1: #8ba85f; --biome-veg-2: #5f7d3e; --biome-ground: #e8dcc0;
  --biome-hard: #d6c7a6; --biome-water: #a6c3b0; --biome-accent: #b39a68;
}
body[data-geo-biome="coastal"] {
  --biome-veg-1: #7fa982; --biome-veg-2: #557f6d; --biome-ground: #ece5d3;
  --biome-hard: #d9cdb6; --biome-water: #86b6c4; --biome-accent: #c2b184;
}

/* ============================================================
   8. Asset art aesthetic — "landscape architect" treatment
   Refines the existing generated SVG art toward restrained,
   plan-drawing tones: desaturated, consistent ink edges, calm
   ground. Applied at the container level so it covers every
   category without touching the geometry generator.
   ============================================================ */
.asset-preview {
  background:
    linear-gradient(0deg, rgba(40,60,52,.03) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, rgba(40,60,52,.03) 0 1px, transparent 1px 9px),
    var(--biome-ground, #ece7d9) !important;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
}
.asset-preview::before { opacity: .16 !important; } /* mute the hatch overlay */
.asset-preview svg {
  filter: saturate(.72) drop-shadow(0 1px 1px rgba(31,48,40,.10)) !important;
}
/* Plant art reads as canopy studies: unify toward biome greens */
.asset-preview.asset-plant svg { filter: saturate(.66) hue-rotate(-4deg) drop-shadow(0 1px 1px rgba(31,48,40,.10)) !important; }
/* Hardscape/material reads as neutral drafting fills */
.asset-preview.asset-material svg,
.asset-preview.asset-linear svg { filter: saturate(.5) drop-shadow(0 1px 1px rgba(31,48,40,.08)) !important; }
/* Remove the decorative "spark" — too playful for the target aesthetic */
.asset-spark { display: none !important; }

/* Architect scheme pushes it fully to a drafting look */
body[data-geo-scheme="mono"] .asset-preview svg { filter: grayscale(1) contrast(1.05) !important; }
body[data-geo-scheme="slate"] .asset-preview svg { filter: saturate(.55) !important; }

/* ============================================================
   5.6 Legibility + breathing room pass
   Raise the whole type floor, widen spacing, and fix the
   specific overlap/scroll/label issues. Loaded last so it wins.
   ============================================================ */

/* -- 1. Larger, calmer type scale across the app -- */
:root {
  --t-2xs: calc(11px * var(--bs-font-scale, 1));
  --t-xs:  calc(12.5px * var(--bs-font-scale, 1));
  --t-sm:  calc(14px * var(--bs-font-scale, 1));
  --t-md:  calc(15.5px * var(--bs-font-scale, 1));
  --t-lg:  calc(18px * var(--bs-font-scale, 1));
  --t-xl:  calc(22px * var(--bs-font-scale, 1));
  --t-2xl: calc(27px * var(--bs-font-scale, 1));
}
.panel-tab { font-size: var(--t-sm) !important; padding: 11px 15px !important; }
.button { font-size: var(--t-sm) !important; }
.mini-button { font-size: var(--t-xs) !important; }
.field label { font-size: var(--t-xs) !important; }
.field-input, .field-select, input, select, textarea { font-size: var(--t-sm) !important; }
.eyebrow { font-size: var(--t-2xs) !important; letter-spacing: .08em; }
.selection-header strong, .ds-drawer-header h2 { font-size: var(--t-lg) !important; }

/* -- 2. Roomier panels; comfortable scroll, no clipped tools -- */
.left-panel, .right-panel { padding: 4px 2px !important; }
.left-panel .panel-body, .right-panel .panel-body { padding: 12px 14px !important; }
.tool-button { padding: 9px 4px !important; }
.tool-button span { font-size: var(--t-2xs) !important; }
.toolrail { gap: 3px !important; padding: 8px 6px !important; overflow-y: auto !important; }

/* -- 3. Estimate disclaimer: stop the right sidebar overlapping it -- */
.estimate-disclaimer {
  display: block !important;
  position: static !important;
  padding: 8px 14px !important;
  font-size: var(--t-2xs) !important;
  line-height: 1.4 !important;
  color: var(--muted) !important;
  background: color-mix(in srgb, var(--warning) 8%, transparent) !important;
  border-top: 1px solid var(--line) !important;
  white-space: normal !important;
  max-width: 100% !important;
}

/* -- 4. "Project path" top button: calmer, stops shouting -- */
#projectPathButton, [data-ds-project-path], .ds-project-path-button {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
#projectPathButton:hover, [data-ds-project-path]:hover { background: white !important; border-color: var(--brand-2) !important; }

/* -- 5. Library / Inspector tabs: clean, visible, unmistakable active state -- */
.panel-tabs { gap: 4px !important; padding: 8px 8px 0 !important; background: transparent !important; border-bottom: 1px solid var(--line) !important; }
.panel-tab { padding: 10px 12px !important; font-size: var(--fs-small) !important; font-weight: 700 !important; border-radius: 8px 8px 0 0 !important; }
.panel-tab.active {
  background: var(--ink, #18221f) !important;
  color: #ffffff !important;
  box-shadow: 0 -2px 0 var(--accent) inset !important;
}
.panel-tab.active::after { display: none !important; }
.panel-tab:not(.active) { color: var(--muted) !important; background: transparent !important; }
.panel-tab:not(.active):hover { color: var(--ink) !important; background: var(--soft) !important; }

/* -- 6. Guidance/rhythm hero: readable -- */
.bs-rhythm-copy strong { font-size: var(--t-sm) !important; }
.bs-rhythm-copy span, .bs-rhythm-copy small { font-size: var(--t-2xs) !important; }

/* -- 7. Workflow steps clickable affordance (Compass) -- */
.ds-workflow-step { cursor: pointer !important; }
.ds-workflow-step:hover { background: white !important; box-shadow: inset 0 0 0 1px var(--brand-2) !important; }

/* -- 8. Project Compass: move off the tool rail so it stops covering the Note tool -- */
.v2-compass-button {
  left: auto !important;
  right: calc(var(--right-w) + 20px) !important;
  bottom: 18px !important;
  min-width: 0 !important;
  z-index: 70 !important;
}
.v2-compass-button strong { font-size: var(--t-xs) !important; }
.v2-compass-button small { font-size: var(--t-2xs) !important; }
@media (max-width: 1180px) {
  .v2-compass-button { right: 16px !important; }
}

/* ============================================================
   5.6 Conversion: Create-asset upsell (paywalled, separated)
   ============================================================ */
.library-hero { flex-wrap: wrap !important; }
.creator-asset-upsell {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 10px; padding: 11px 13px;
  border: 1px dashed color-mix(in srgb, var(--brand-2) 45%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 10%, white);
  cursor: pointer; text-align: left;
  transition: border-color .14s ease, background .14s ease, transform .12s ease;
}
.creator-asset-upsell:hover { border-color: var(--brand-2); background: color-mix(in srgb, var(--accent) 16%, white); transform: translateY(-1px); }
.creator-asset-upsell .ca-icon {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: var(--brand); color: var(--accent); font-size: var(--fs-large);
}
.creator-asset-upsell .ca-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.creator-asset-upsell .ca-text strong { font-size: var(--t-sm); color: var(--ink); line-height: 1.2; }
.creator-asset-upsell .ca-text small { font-size: var(--t-2xs); color: var(--muted); margin-top: 1px; }
.creator-asset-upsell .ca-lock { font-size: var(--fs-small); flex: none; opacity: .7; }
.creator-asset-upsell.locked { position: relative; }

/* ============================================================
   5.6 Conversion: decision-package value cards + paywall
   ============================================================ */
.ds-value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ds-value-card {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 15px; border: 1px solid var(--line); border-radius: 13px;
  background: white; text-align: left; cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, transform .12s ease;
}
.ds-value-card:hover { border-color: var(--brand-2); box-shadow: 0 6px 18px rgba(16,32,26,.08); transform: translateY(-1px); }
.ds-value-card.warn { border-color: color-mix(in srgb, var(--warning) 55%, var(--line)); background: color-mix(in srgb, var(--warning) 6%, white); }
.ds-value-card .dvc-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--brand); color: var(--accent); font-size: var(--fs-body); }
.ds-value-card .dvc-lock { font-size: var(--fs-large); flex: none; margin-top: 2px; }
.ds-value-card .dvc-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ds-value-card .dvc-body small { font-size: var(--t-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ds-value-card .dvc-body strong { font-size: var(--t-md); color: var(--ink); line-height: 1.25; }
.ds-value-card .dvc-body em { font-size: var(--t-xs); color: var(--brand-2); font-style: normal; margin-top: 3px; font-weight: 600; }
.ds-value-locked .ds-value-card { cursor: default; background: color-mix(in srgb, var(--soft) 60%, white); }
.ds-value-locked .ds-value-card:hover { transform: none; box-shadow: none; border-color: var(--line); }

.ds-paywall-hero { text-align: center; padding: 6px 0 16px; }
.ds-free-badge {
  display: inline-block; padding: 5px 13px; border-radius: 99px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 800; font-size: var(--t-xs); letter-spacing: .06em; margin-bottom: 10px;
}
.ds-paywall-hero h3 { font-family: var(--display-font); font-weight: 600; font-size: var(--t-xl); margin: 0 0 6px; letter-spacing: -.01em; }
.ds-paywall-hero p { font-size: var(--t-sm); color: var(--muted); max-width: 52ch; margin: 0 auto; line-height: 1.5; }

.ds-paywall-cta { text-align: center; padding: 16px; border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 4%, white), color-mix(in srgb, var(--accent) 12%, white)); border: 1px solid color-mix(in srgb, var(--brand-2) 25%, var(--line)); }
.ds-paywall-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 12px; }
.ds-paywall-price strong { font-family: var(--display-font); font-weight: 600; font-size: var(--t-2xl); color: var(--brand); }
.ds-paywall-price span { font-size: var(--t-xs); color: var(--muted); }
.button.large { font-size: var(--t-md) !important; padding: 13px 26px !important; }
.ds-paywall-cta small { display: block; margin-top: 10px; font-size: var(--t-2xs); color: var(--muted); }

@media (max-width: 720px) { .ds-value-grid { grid-template-columns: 1fr; } }

/* ============================================================
   5.6 Super-aesthetic mode: color-coded effort + sun fractions
   Default on (body[data-geo-aesthetic] set at boot).
   ============================================================ */
.geo-chip { display: inline-flex; align-items: center; gap: 5px; }
.geo-effort-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 8%, transparent); }
.geo-sun-icon { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.geo-effort { font-weight: 650; }

/* ============================================================
   5.6 Conversion: welcome value row + upsell CTA
   ============================================================ */
.v3-value-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.v3-value-row span { font-size: var(--fs-caption); font-weight: 600; padding: 5px 11px; border-radius: 99px; }
.v3-value-free { background: var(--accent, #d3ff82); color: var(--accent-ink, #17321f); font-weight: 800 !important; }
.v3-value-lock { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); }
.v3-upsell-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; margin-top: 16px; padding: 15px 18px; cursor: pointer; text-align: left;
  border: 0; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand, #18372f), var(--brand-2, #285a4e));
  color: white;
  box-shadow: 0 10px 30px rgba(18,55,45,.28);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.v3-upsell-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(18,55,45,.34); filter: brightness(1.04); }
.v3-upsell-text { display: flex; flex-direction: column; gap: 2px; }
.v3-upsell-text strong { font-size: var(--fs-body); }
.v3-upsell-text small { font-size: var(--fs-caption); color: rgba(255,255,255,.78); }
.v3-upsell-arrow { font-size: var(--fs-heading); flex: none; color: var(--accent, #d3ff82); }

/* Aesthetic toggle button in the top bar */
.geo-aesthetic-toggle {
  height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--muted); font: 700 var(--t-xs, 12px)/1 var(--body, inherit);
  cursor: pointer; white-space: nowrap; transition: all .14s ease;
}
.geo-aesthetic-toggle.active { background: var(--brand); color: var(--accent); border-color: var(--brand); }
.geo-aesthetic-toggle:hover { border-color: var(--brand-2); }
.geo-aesthetic-toggle:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
@media (max-width: 1180px) { .geo-aesthetic-toggle { display: none; } }

/* ============================================================
   5.7 Library: effort gauge icon + dollar-sign pricing
   ============================================================ */
.geo-effort-gauge { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.geo-effort-bar { width: 3px; border-radius: 1px; background: color-mix(in srgb, var(--muted) 30%, transparent); }
.geo-effort-bar:nth-child(1) { height: 5px; }
.geo-effort-bar:nth-child(2) { height: 8px; }
.geo-effort-bar:nth-child(3) { height: 11px; }
.geo-price-dollars { font-weight: 800; letter-spacing: -1px; }
.geo-price-dollars span { color: color-mix(in srgb, var(--muted) 35%, transparent); }
.geo-price-dollars span.on { color: var(--success, #24704a); }

/* ============================================================
   5.7 Pricing: three tiers + property-value banner
   ============================================================ */
.ds-value-banner {
  padding: 15px 18px; margin-bottom: 16px; border-radius: 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, white), white);
  border: 1px solid color-mix(in srgb, var(--brand-2) 25%, var(--line));
  font-size: var(--fs-body); line-height: 1.5; color: var(--ink);
}
.ds-value-banner strong { color: var(--brand); }
.ds-value-banner b { color: var(--success, #24704a); font-weight: 800; }
.ds-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ds-tier-card { position: relative; display: flex; flex-direction: column; padding: 22px 20px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.ds-tier-card.featured { border-color: var(--brand-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-2) 20%, transparent), 0 16px 40px rgba(16,32,26,.1); }
.ds-tier-flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 99px; background: var(--brand); color: var(--accent); font-size: var(--fs-caption); font-weight: 800; white-space: nowrap; }
.ds-tier-card h3 { font-family: var(--display-font); font-weight: 600; font-size: var(--fs-large); margin: 4px 0 2px; }
.ds-tier-card .ds-plan-price strong { font-size: var(--fs-heading); }
.ds-tier-card .ds-feature-list { flex: 1; margin: 12px 0 16px; }
.ds-tier-card .button.full { margin-top: auto; }
@media (max-width: 800px) { .ds-tier-grid { grid-template-columns: 1fr; } }

/* Example gallery in the new-project modal */
.example-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.example-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.example-card:hover { border-color: var(--brand-2); background: var(--soft); }
.example-card strong { font-size: var(--fs-small); color: var(--ink); }
.example-card small { font-size: var(--fs-caption); color: var(--muted); }

/* Botanical Research link in the library hero */
.library-hero-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.library-research-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border: 1px solid var(--brand-2); border-radius: 9px; background: var(--brand);
  color: white; font-size: var(--fs-small); font-weight: 700; text-decoration: none;
  white-space: nowrap; transition: background .14s ease;
}
.library-research-link:hover { background: var(--brand-2); }
.library-research-link span { color: var(--accent); }

/* "Honest Bid" guarantee band under the pass CTA */
.ds-guarantee {
  margin-top: 12px; padding: 12px 14px; border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 14%, white);
  border: 1px dashed color-mix(in srgb, var(--brand-2) 40%, var(--line));
  font-size: var(--fs-caption); line-height: 1.5; color: var(--ink); text-align: left;
}
.ds-guarantee strong { color: var(--brand); }

/* ============================================================
   Account UI: top-bar control + popover
   ============================================================ */
.account-control { display: inline-flex; align-items: center; }
#accountButton.signed-in { background: var(--brand); color: white; border-color: var(--brand); }
.account-pop {
  position: fixed; z-index: 9999; width: 320px; max-width: calc(100vw - 16px);
  background: white; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(16,32,26,.22); padding: 16px;
}
.account-pop-title { margin: 0 0 4px; font-size: var(--fs-large); font-family: var(--display-font); font-weight: 600; }
.account-pop-sub { margin: 0 0 12px; font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }
.account-pop-user { padding: 4px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.account-pop-user strong { display: block; font-size: var(--fs-body); }
.account-pop-user span { display: block; font-size: var(--fs-caption); color: var(--muted); margin-top: 2px; }
.account-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: var(--fs-body); margin-bottom: 8px; }
.account-input:focus { outline: none; border-color: var(--brand-2); }
.account-menu-item { display: block; width: 100%; text-align: left; padding: 10px 10px; border: 0; background: transparent; border-radius: 8px; font-size: var(--fs-body); color: var(--ink); cursor: pointer; }
.account-menu-item:hover { background: var(--soft); }
.account-menu-item.danger { color: #b0402f; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 12px; }
.account-msg { font-size: var(--fs-small); color: var(--muted); margin-top: 8px; line-height: 1.45; }
.account-msg a { color: var(--brand-2); font-weight: 600; }
.account-ok { color: #24704a; font-weight: 600; }
.account-list { max-height: 260px; overflow: auto; }
.account-list-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; }
.account-list-item:hover { background: var(--soft); }
.account-list-item strong { font-size: var(--fs-small); font-weight: 650; }
.account-list-item span { font-size: var(--fs-caption); color: var(--muted); }