/* Backyard Studio 2.0 — living systems, asset library, panel controls, and semantic analysis overlays. */

/* Panel collapse controls stay discoverable without consuming tab space. */
.panel { position: relative; }
.panel-collapse-button {
  position: absolute; z-index: 32; top: 50%; width: 25px; height: 56px;
  display: grid; place-items: center; border: 1px solid var(--line); background: var(--bs-surface-elevated, #fff);
  color: var(--muted); box-shadow: 0 4px 14px rgba(20,38,31,.12); cursor: pointer;
  font: 800 calc(18px * var(--bs-font-scale,1))/1 system-ui; transition: color .15s ease, transform .15s ease, background .15s ease;
}
.panel-collapse-button:hover { color: var(--brand-2); background: color-mix(in srgb,var(--brand-2) 9%,var(--bs-surface-elevated)); transform: translateY(-50%) scale(1.06); }
.panel-collapse-left { right: -13px; border-radius: 0 12px 12px 0; transform: translateY(-50%); }
.panel-collapse-right { left: -13px; border-radius: 12px 0 0 12px; transform: translateY(-50%); }
.panel-restore-handle {
  position: fixed; z-index: 405; top: 48%; display: none; align-items: center; gap: 4px; height: 76px; min-width: 34px;
  border: 1px solid var(--line); background: var(--bs-surface-elevated,#fff); color: var(--ink); box-shadow: 0 8px 28px rgba(16,30,24,.17);
  font: 800 calc(9px * var(--bs-font-scale,1))/1 system-ui; cursor: pointer; writing-mode: vertical-rl;
}
.panel-restore-handle.visible { display: flex; }
.panel-restore-left { left: 0; border-left: 0; border-radius: 0 12px 12px 0; }
.panel-restore-right { right: 0; border-right: 0; border-radius: 12px 0 0 12px; }
.panel-restore-handle:hover { background: color-mix(in srgb,var(--brand-2) 12%,var(--bs-surface-elevated)); }

/* Systems toolbar */
.systems-controls { display:flex; align-items:center; gap:5px; padding-right:7px; margin-right:4px; border-right:1px solid var(--line); }
.systems-year-control { display:flex; align-items:center; gap:5px; height:28px; padding:0 5px 0 8px; border:1px solid var(--line); border-radius:99px; background:var(--bs-surface-elevated,#fff); color:var(--muted); font-size:calc(8px * var(--bs-font-scale)); font-weight:750; }
.systems-year-control select { max-width:66px; border:0; background:transparent; color:var(--ink); font:inherit; outline:0; }

/* Refined library */
.library-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; margin:-2px -2px 11px; padding:14px; border:1px solid color-mix(in srgb,var(--brand-2) 22%,var(--line)); border-radius:14px; background:radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 34%),linear-gradient(145deg,color-mix(in srgb,var(--brand-2) 8%,var(--paper)),var(--paper)); }
.library-hero::after { content:""; position:absolute; width:90px; height:90px; right:-42px; bottom:-48px; border:1px solid color-mix(in srgb,var(--brand-2) 28%,transparent); border-radius:50%; }
.library-hero h2 { margin:2px 0 3px; font-size:calc(15px * var(--bs-font-scale)); line-height:1.08; letter-spacing:-.025em; }
.library-hero p { margin:0; max-width:30ch; color:var(--muted); font-size:calc(8px * var(--bs-font-scale)); line-height:1.45; }
.library-surprise { position:relative; z-index:1; display:grid; gap:2px; place-items:center; min-width:62px; height:58px; border:1px solid color-mix(in srgb,var(--brand-2) 30%,var(--line)); border-radius:12px; background:var(--bs-surface-elevated,#fff); color:var(--ink); font-size:calc(7px * var(--bs-font-scale)); font-weight:800; }
.library-surprise span { font-size:19px; color:var(--brand-2); }
.library-search { margin-bottom:8px; }
.library-categories { margin-bottom:6px; }
.library-subcategories { margin:0 0 8px; }
.catalog-toolbar { display:flex; justify-content:space-between; gap:6px; align-items:center; margin:7px 0; }
.catalog-filter-group { display:flex; gap:4px; min-width:0; }
.catalog-filter { padding:5px 7px; border:1px solid transparent; border-radius:99px; background:transparent; color:var(--muted); font-size:calc(7.5px * var(--bs-font-scale)); font-weight:750; white-space:nowrap; }
.catalog-filter.active { background:color-mix(in srgb,var(--brand-2) 10%,var(--paper)); border-color:color-mix(in srgb,var(--brand-2) 24%,var(--line)); color:var(--brand-2); }
.compact-select { width:auto; min-width:88px; padding:5px 7px; font-size:calc(7.5px * var(--bs-font-scale)); }
.library-count { margin:11px 1px 7px; }
.catalog-grid-v2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.catalog-card-v2 { position:relative; min-width:0; display:grid; grid-template-columns:1fr; gap:7px; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--bs-surface-elevated,#fff); box-shadow:0 2px 0 rgba(20,38,31,.025); transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.catalog-card-v2:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--brand-2) 35%,var(--line)); box-shadow:0 7px 19px rgba(22,42,34,.09); }
.catalog-card-v2.selected { border-color:var(--brand-2); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-2) 15%,transparent); }
.asset-preview { position:relative; height:91px; display:grid; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--asset-accent,#667) 18%,var(--line)); border-radius:9px; background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.82),transparent 24%),linear-gradient(var(--asset-angle,35deg),var(--asset-wash,#eef1ec),color-mix(in srgb,var(--asset-accent,#667) 8%,var(--paper))); }
.asset-preview::before { content:""; position:absolute; inset:0; opacity:.28; background:repeating-linear-gradient(var(--asset-angle,45deg),transparent 0 12px,color-mix(in srgb,var(--asset-accent,#667) 9%,transparent) 12px 13px); }
.asset-preview svg { position:relative; z-index:1; width:76px; height:76px; overflow:visible; filter:drop-shadow(0 3px 2px rgba(31,48,40,.08)); }
.asset-spark { position:absolute; z-index:2; right:8px; bottom:7px; width:5px; height:5px; border-radius:50%; background:var(--asset-accent); box-shadow:-9px -4px 0 -1px color-mix(in srgb,var(--asset-accent) 55%,transparent),-3px -13px 0 -1px color-mix(in srgb,var(--asset-accent) 35%,transparent); }
.asset-favorite { position:absolute; z-index:3; top:13px; right:13px; width:27px; height:27px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.8); border-radius:50%; background:rgba(255,255,255,.84); color:#53615b; box-shadow:0 2px 8px rgba(0,0,0,.08); font-size:14px; }
.asset-favorite.active { color:#b6781c; }
.catalog-copy { min-width:0; }
.catalog-title-row { display:flex; gap:5px; justify-content:space-between; align-items:flex-start; }
.catalog-title-row strong { min-width:0; font-size:calc(9px * var(--bs-font-scale)); line-height:1.22; }
.catalog-copy em { display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:calc(7.2px * var(--bs-font-scale)); }
.asset-category-dot { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--brand-2); margin-top:3px; opacity:.7; }
.catalog-meta { display:flex; flex-wrap:wrap; gap:3px; margin-top:6px; }
.catalog-meta .tag { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 5px; font-size:calc(6.5px * var(--bs-font-scale)); }
.catalog-price { display:flex; justify-content:space-between; align-items:end; gap:5px; padding-top:6px; border-top:1px solid color-mix(in srgb,var(--line) 76%,transparent); }
.catalog-price strong { font-size:calc(8.5px * var(--bs-font-scale)); }
.catalog-price span { max-width:55%; color:var(--muted); font-size:calc(6.3px * var(--bs-font-scale)); text-align:right; line-height:1.2; }
.catalog-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px; }
.catalog-actions button { min-height:29px; border-radius:7px; font-size:calc(7px * var(--bs-font-scale)); font-weight:800; }
.asset-use-button { border:0; background:var(--brand-2); color:white; }
.asset-variation-button,.asset-inline-action { border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.asset-inline-action { grid-column:1/-1; }
.library-empty { grid-column:1/-1; display:grid; gap:3px; padding:30px 16px; border:1px dashed var(--line); border-radius:12px; text-align:center; color:var(--muted); }
.library-empty strong { color:var(--ink); }

/* Deterministic variation studio */
.placement-studio { margin:8px 0 10px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--panel) 80%,var(--paper)); overflow:hidden; }
.placement-studio summary { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:9px 10px; cursor:pointer; list-style:none; }
.placement-studio summary::-webkit-details-marker { display:none; }
.placement-studio summary > span:first-child strong,.placement-studio summary > span:first-child small { display:block; }
.placement-studio summary strong { font-size:calc(8.5px * var(--bs-font-scale)); }
.placement-studio summary small { margin-top:1px; color:var(--muted); font-size:calc(6.7px * var(--bs-font-scale)); }
.placement-seed { padding:3px 6px; border-radius:99px; background:var(--bs-surface-elevated); color:var(--muted); font-size:calc(6.6px * var(--bs-font-scale)); font-weight:750; }
.placement-studio-body { display:grid; gap:9px; padding:9px 10px 11px; border-top:1px solid var(--line); }
.placement-presets { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.placement-presets button { min-height:27px; border:1px solid var(--line); border-radius:6px; background:var(--bs-surface-elevated); color:var(--ink); font-size:calc(6.7px * var(--bs-font-scale)); font-weight:750; }
.placement-presets button:hover { border-color:var(--brand-2); color:var(--brand-2); }
.placement-sliders { display:grid; grid-template-columns:1fr 1fr; gap:7px 9px; }
.placement-sliders label { display:grid; gap:3px; }
.placement-sliders label span { display:flex; justify-content:space-between; gap:5px; color:var(--muted); font-size:calc(6.7px * var(--bs-font-scale)); }
.placement-sliders output { color:var(--ink); font-weight:800; }
.placement-sliders input { width:100%; accent-color:var(--brand-2); }
.placement-studio-body p { margin:0; color:var(--muted); font-size:calc(6.5px * var(--bs-font-scale)); line-height:1.4; }

/* Living Systems / Site Lens */
.site-lens-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px; margin:-2px -2px 10px; border:1px solid color-mix(in srgb,var(--brand-2) 25%,var(--line)); border-radius:14px; background:radial-gradient(circle at 92% 8%,rgba(82,153,119,.16),transparent 36%),linear-gradient(145deg,color-mix(in srgb,#87b991 8%,var(--paper)),var(--paper)); }
.site-lens-hero.attention { border-color:color-mix(in srgb,#c2524a 34%,var(--line)); background:radial-gradient(circle at 92% 8%,rgba(201,83,75,.13),transparent 38%),linear-gradient(145deg,color-mix(in srgb,#d8a44b 7%,var(--paper)),var(--paper)); }
.site-lens-hero h2 { margin:2px 0 4px; font-size:calc(15px * var(--bs-font-scale)); letter-spacing:-.025em; }
.site-lens-hero p { margin:0; color:var(--muted); font-size:calc(7.6px * var(--bs-font-scale)); line-height:1.45; }
.site-health-badge { width:64px; height:64px; display:grid; place-content:center; border-radius:50%; background:var(--bs-surface-elevated); border:1px solid var(--line); text-align:center; box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--brand-2) 8%,transparent); }
.site-health-badge strong { font-size:calc(18px * var(--bs-font-scale)); line-height:1; }
.site-health-badge span { margin-top:2px; color:var(--muted); font-size:calc(6px * var(--bs-font-scale)); line-height:1.1; }
.site-control-card,.site-analysis-section { margin-bottom:10px; padding:11px; border:1px solid var(--line); border-radius:11px; background:var(--bs-surface-elevated); }
.site-year-rail { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin:8px 0 10px; padding:4px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--panel) 84%,var(--paper)); }
.site-year-rail button { min-height:30px; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:calc(7.2px * var(--bs-font-scale)); font-weight:800; }
.site-year-rail button.active { background:var(--brand-2); color:white; box-shadow:0 2px 7px color-mix(in srgb,var(--brand-2) 25%,transparent); }
.site-switch-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.site-switch { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb,var(--panel) 65%,var(--paper)); }
.site-switch strong,.site-switch small { display:block; }
.site-switch strong { font-size:calc(7.8px * var(--bs-font-scale)); }
.site-switch small { margin-top:2px; color:var(--muted); font-size:calc(6.3px * var(--bs-font-scale)); line-height:1.25; }
.site-switch input { width:16px; height:16px; accent-color:var(--brand-2); }
.site-opacity-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.site-opacity-grid label { display:grid; gap:3px; color:var(--muted); font-size:calc(6.8px * var(--bs-font-scale)); }
.site-opacity-grid label span { display:flex; justify-content:space-between; gap:5px; }
.site-opacity-grid output { color:var(--ink); font-weight:800; }
.site-opacity-grid input { width:100%; accent-color:var(--brand-2); }
.site-quick-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; margin-top:9px; }
.site-quick-actions button { min-height:29px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); font-size:calc(6.7px * var(--bs-font-scale)); font-weight:750; }
.site-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:10px; }
.site-summary-grid article { min-width:0; padding:9px; border:1px solid var(--line); border-radius:9px; background:var(--bs-surface-elevated); }
.site-summary-grid article.warn { border-color:color-mix(in srgb,#c64e47 35%,var(--line)); box-shadow:inset 3px 0 #c64e47; }
.site-summary-grid article.ok { box-shadow:inset 3px 0 #3f956b; }
.site-summary-grid span,.site-summary-grid strong,.site-summary-grid small { display:block; }
.site-summary-grid span { color:var(--muted); font-size:calc(6.6px * var(--bs-font-scale)); }
.site-summary-grid strong { margin-top:3px; font-size:calc(11px * var(--bs-font-scale)); }
.site-summary-grid small { margin-top:2px; color:var(--muted); font-size:calc(6px * var(--bs-font-scale)); line-height:1.25; }
.site-issue-list,.site-plant-status-list { display:grid; gap:5px; margin-top:7px; }
.site-issue,.site-plant-status { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:7px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); text-align:left; }
.site-issue.danger { border-color:color-mix(in srgb,#c64e47 38%,var(--line)); background:color-mix(in srgb,#c64e47 5%,var(--paper)); }
.site-issue-icon { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#c64e47; color:#fff; font-weight:900; }
.site-issue strong,.site-issue small,.site-plant-status strong,.site-plant-status small { display:block; }
.site-issue strong,.site-plant-status strong { font-size:calc(7.8px * var(--bs-font-scale)); }
.site-issue small,.site-plant-status small { margin-top:2px; color:var(--muted); font-size:calc(6.3px * var(--bs-font-scale)); line-height:1.3; }
.site-issue b,.site-plant-status b { font-size:calc(6.6px * var(--bs-font-scale)); color:var(--brand-2); }
.site-clear-state { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px; align-items:center; padding:10px; margin-top:7px; border:1px dashed color-mix(in srgb,#3f956b 45%,var(--line)); border-radius:9px; background:color-mix(in srgb,#3f956b 5%,var(--paper)); }
.site-clear-state > span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#3f956b; color:white; font-weight:900; }
.site-clear-state strong,.site-clear-state small { display:block; }
.site-clear-state strong { font-size:calc(8px * var(--bs-font-scale)); }
.site-clear-state small { margin-top:2px; color:var(--muted); font-size:calc(6.3px * var(--bs-font-scale)); line-height:1.35; }
.water-legend { display:flex; gap:5px; margin-top:7px; }
.water-legend span { padding:3px 6px; border-radius:99px; color:white; font-size:calc(6.4px * var(--bs-font-scale)); font-weight:800; }
.water-legend .low { background:#cc4c45; } .water-legend .balanced { background:#238d72; } .water-legend .high { background:#7655c8; }
.site-plant-status i { width:10px; height:10px; border-radius:50%; }
.site-plant-status.low i { background:#cc4c45; } .site-plant-status.balanced i { background:#238d72; } .site-plant-status.high i { background:#7655c8; }
.site-plant-status.low { border-left:3px solid #cc4c45; } .site-plant-status.balanced { border-left:3px solid #238d72; } .site-plant-status.high { border-left:3px solid #7655c8; }

/* Inspector visualization cards */
.growth-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; margin:8px 0; border:1px solid var(--line); border-radius:10px; background:linear-gradient(145deg,color-mix(in srgb,#5f9b72 7%,var(--paper)),var(--paper)); }
.growth-card span,.growth-card strong,.growth-card small { display:block; }
.growth-card span { color:var(--muted); font-size:calc(6.8px * var(--bs-font-scale)); }
.growth-card strong { margin-top:2px; font-size:calc(11px * var(--bs-font-scale)); }
.growth-card small { margin-top:2px; color:var(--muted); font-size:calc(6.2px * var(--bs-font-scale)); }
.growth-ring { --growth:50%; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--brand-2) var(--growth),color-mix(in srgb,var(--line) 70%,transparent) 0); position:relative; }
.growth-ring::after { content:""; position:absolute; inset:5px; border-radius:50%; background:var(--bs-surface-elevated); }
.growth-ring span { position:relative; z-index:1; color:var(--ink); font-size:calc(8px * var(--bs-font-scale)); font-weight:900; }
.cover-control,.water-status { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; margin-top:8px; padding:9px; border:1px solid var(--line); border-radius:9px; background:var(--bs-surface-elevated); }
.cover-control strong,.cover-control small,.water-status span,.water-status strong,.water-status small { display:block; }
.cover-control small,.water-status small { margin-top:2px; color:var(--muted); font-size:calc(6.4px * var(--bs-font-scale)); }
.water-status { grid-template-columns:1fr; box-shadow:inset 3px 0 #cc4c45; }
.water-status.balanced { box-shadow:inset 3px 0 #238d72; } .water-status.high { box-shadow:inset 3px 0 #7655c8; }
.live-range { accent-color:var(--brand-2); }
.inline-notice.danger { border-color:#e4aaa5; background:#fff3f2; color:#8b302b; }
.inline-notice.success { border-color:#aed5be; background:#f1fbf5; color:#286a47; }

/* SVG overlays */
.ls-analysis-overlay { pointer-events:none; }
.ls-root-warning { filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }

/* Theme integration */
body[data-bs-theme="dark"] :is(.catalog-card-v2,.site-control-card,.site-analysis-section,.site-summary-grid article,.growth-card,.cover-control,.water-status,.site-switch,.placement-studio,.site-issue,.site-plant-status,.site-clear-state) { background:#202925; border-color:#39453f; }
body[data-bs-theme="dark"] .asset-favorite { background:rgba(27,36,32,.86); color:#d9e2dd; border-color:#46534d; }
body[data-bs-theme="dark"] .asset-preview { background:linear-gradient(var(--asset-angle,35deg),#26312c,#1d2622); }
body[data-bs-theme="dark"] .inline-notice.danger { background:#3b2422; color:#f0b3ae; border-color:#64403d; }
body[data-bs-theme="dark"] .inline-notice.success { background:#173126; color:#9fddba; border-color:#2f5b45; }
body[data-bs-theme="minimal"] :is(.library-hero,.site-lens-hero,.catalog-card-v2,.placement-studio,.site-control-card,.site-analysis-section,.site-summary-grid article) { border-radius:2px; box-shadow:none; background:#fff; }
body[data-bs-theme="minimal"] .asset-preview { border-radius:1px; filter:grayscale(.75); }
body[data-bs-theme="architect"] .catalog-card-v2,
body[data-bs-theme="architect"] :is(.site-control-card,.site-analysis-section,.site-summary-grid article,.placement-studio) { border-radius:0; }
body[data-bs-theme="architect"] .asset-preview { border-radius:0; background:repeating-linear-gradient(0deg,rgba(28,55,78,.035) 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,rgba(28,55,78,.035) 0 1px,transparent 1px 8px),#f4f0e6; }
body[data-bs-theme="architect"] .site-year-rail button.active { background:#224d72; }

/* Simple mode keeps the living systems essentials and hides diagnostic density controls. */
body[data-bs-mode="simple"] .site-advanced-only { display:none !important; }
body[data-bs-mode="simple"] .catalog-grid-v2 { grid-template-columns:1fr; }
body[data-bs-mode="simple"] .placement-studio { display:none; }

@media (max-width:1250px) {
  .systems-controls .chip-toggle:nth-of-type(2),.systems-controls .chip-toggle:nth-of-type(3) { display:none; }
  .catalog-grid-v2 { grid-template-columns:1fr; }
}
@media (max-width:780px) {
  .panel-collapse-button { display:none; }
  .systems-controls { display:none; }
  .site-switch-grid,.site-opacity-grid,.site-summary-grid { grid-template-columns:1fr; }
}

/* 2.0 quick action density and conceptual irrigation affordance */
.site-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-quick-actions [data-site-action="suggest-water"] {
  border-color: color-mix(in srgb, #2581aa 45%, var(--line));
  background: color-mix(in srgb, #2581aa 8%, var(--paper));
  color: color-mix(in srgb, #2581aa 82%, var(--ink));
}
.site-quick-actions [data-site-action="suggest-water"]::before { content: "≈ "; font-weight: 900; }