/* Pond UI vNEXT Wave 0/1. Presentation authority for the existing Pond shell.
 * Legacy adapters below replace sizing/color only; charts and domain calculations
 * remain owned by their existing modules. XS=controls, S=metrics, M=cards,
 * L=analytics, XL=major panels. No fixed content heights or clipping masks.
 */
#app .shell.pond-detail-shell {
  --pond-xs:4px; --pond-s:8px; --pond-m:12px; --pond-l:16px; --pond-xl:24px;
  --pond-gutter:var(--pond-m); --pond-section-gap:var(--pond-l);
  --pond-radius:16px; --pond-radius-large:20px;
  --pond-ink:#173f35; --pond-muted:#526d64; --pond-accent:#087c54;
  --pond-surface:#fff; --pond-line:#d5e5dd; --pond-soft:#f2f7f4;
  --pond-dock-height:80px; --pond-dock-offset:12px;
  font-family:var(--ssl-font-ui); color:var(--pond-ink); font-size:14px; line-height:1.5;
}
#app .pond-detail-shell .content {min-width:0; scroll-padding-bottom:calc(var(--pond-dock-height) + var(--pond-dock-offset) + 16px + env(safe-area-inset-bottom,0px))}
#app .pond-detail-shell :is(.desktop-pond-module,.health-route) {min-width:0; gap:var(--pond-section-gap)!important}
#app .pond-detail-shell :is(.pond-module-header,.gm-feed-header,.health-workspace-head) {
  padding:var(--pond-l)!important; gap:var(--pond-m)!important; border-radius:var(--pond-radius)!important;
  background:var(--pond-surface); align-items:center; min-height:0!important;
}
#app .pond-detail-shell :is(.pond-module-title,.gm-feed-title,.health-workspace-head h2) {
  font:800 22px/1.35 var(--ssl-font-ui)!important; letter-spacing:0!important; margin:4px 0!important;
}
#app .pond-detail-shell :is(.pond-module-desc,.gm-feed-desc,.health-workspace-head p) {
  font:400 14px/1.5 var(--ssl-font-ui)!important; color:var(--pond-muted)!important; margin:0!important;
  white-space:normal!important; overflow:visible!important; text-overflow:clip!important;
}
#app .pond-detail-shell :is(.pond-op-title,.section-head h3,.gm-feed-section-title) {font:750 18px/1.4 var(--ssl-font-ui)!important}
#app .pond-detail-shell :is(.pond-module-kicker,.gm-feed-kicker,.eyebrow) {font-size:12px!important; line-height:1.4!important}
#app .pond-detail-shell :is(.pond-op-card,.health-route>.panel,.gm-feed-history,.gm-feed-chart-card) {
  padding:var(--pond-l)!important; border-radius:var(--pond-radius-large)!important;
  min-height:0!important; height:auto; box-sizing:border-box; gap:var(--pond-m);
}
#app .pond-detail-shell :is(.pond-kpi-row,.gm-feed-kpis,.health-summary-grid) {gap:var(--pond-s)!important}
#app .pond-detail-shell :is(.pond-kpi-card,.gm-feed-kpi,.health-status-card,.health-signal-card) {
  padding:var(--pond-m)!important; border-radius:var(--pond-radius)!important; min-width:0;
  min-height:88px!important; height:auto!important; gap:var(--pond-xs)!important; align-content:start;
}
#app .pond-detail-shell :is(.pond-kpi-title,.gm-feed-kpi-label,.health-summary-grid article>span) {font:650 13px/1.45 var(--ssl-font-ui)!important}
#app .pond-detail-shell :is(.pond-kpi-val,.gm-feed-value,.health-summary-grid strong) {
  font:800 28px/1.3 var(--ssl-font-ui)!important; font-variant-numeric:tabular-nums;
  white-space:normal!important; overflow:visible!important; text-overflow:clip!important;
  overflow-wrap:anywhere; min-width:0; max-height:none!important;
}
#app .pond-detail-shell :is(.pond-kpi-sub,.gm-feed-sub,.health-summary-grid small,.pond-op-kicker,.health-quick-actions small) {
  font:400 12px/1.5 var(--ssl-font-ui)!important; color:var(--pond-muted)!important;
  white-space:normal!important; overflow:visible!important; text-overflow:clip!important; max-height:none!important;
}
/* Existing domain CTA classes are adapters to the same hierarchy. No event changes. */
#app .pond-detail-shell :is(button,summary,a.pond-cta,select) {min-height:44px; min-width:44px; touch-action:manipulation; font-family:var(--ssl-font-ui)}
#app .pond-detail-shell .sidebar-bottom :is(.account-settings-button,.legacy-logout) {min-height:44px!important}
#app .pond-detail-shell :is(button.primary,.gm-feed-create,.pond-module-primary-btn,.pond-cta-primary) {
  background:var(--pond-accent)!important; color:#fff!important; border:1px solid var(--pond-accent)!important;
  box-shadow:none!important; border-radius:12px!important; padding:10px 14px!important;
  font-size:14px!important; line-height:1.5!important; white-space:normal!important; height:auto!important;
}
#app .pond-detail-shell :is(button.outline,.pond-back-farm,.pond-cta-secondary) {
  background:var(--pond-surface)!important; color:var(--pond-accent)!important;
  border:1px solid var(--pond-line)!important; box-shadow:none!important; border-radius:12px!important;
  padding:8px 12px!important; font-size:14px!important; line-height:1.5!important;
}
#app .pond-detail-shell :is(.card-link,.pond-cta-tertiary) {background:transparent!important; border:0!important; color:var(--pond-accent)!important; box-shadow:none!important; font-size:14px!important}
#app .pond-detail-shell :is(button.danger,.pond-cta-destructive,.pond-danger-zone button) {background:#fff1f0!important; color:#a32727!important; border:1px solid #d78f8b!important; box-shadow:none!important}
#app .pond-detail-shell :is(button,summary,a):focus-visible {outline:3px solid #267bba!important; outline-offset:3px}
#app .pond-detail-shell button:disabled {opacity:.55; cursor:not-allowed}
/* Content-sized empty state shared by Health, Sale and authority-pending panels.
 * Removes the inherited 150px+ minimum; never hides the explanation or CTA. */
#app .pond-detail-shell :is(.health-empty,.pond-clean-empty,.pond-empty) {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  min-height:0!important; height:auto!important; padding:var(--pond-m)!important;
  gap:var(--pond-xs)!important; text-align:left!important; background:var(--pond-soft); border-radius:12px;
}
#app .pond-detail-shell :is(.health-empty b,.pond-clean-empty-title) {font:750 15px/1.5 var(--ssl-font-ui)!important; margin:0!important}
#app .pond-detail-shell :is(.health-empty span,.pond-clean-empty-desc) {font:400 14px/1.5 var(--ssl-font-ui)!important; color:var(--pond-muted)!important; margin:0!important; max-width:none!important}
#app .pond-detail-shell .pond-clean-empty-icon {font-size:20px!important; margin:0!important}
#app .pond-detail-shell .health-route .section-head {gap:12px; flex-wrap:wrap; margin-bottom:12px}
#app .pond-detail-shell .health-route :is(.health-timeline,.health-lab-list) {min-height:0; gap:8px}
#app .pond-detail-shell .health-quick-actions {gap:8px!important}
#app .pond-detail-shell .health-quick-actions button {padding:12px!important; min-height:72px!important}
#app .pond-detail-shell .health-quick-actions b {font-size:14px!important}
#app .pond-detail-shell .pond-history-disclosure {grid-column:1/-1; min-width:0; margin-top:8px}
#app .pond-detail-shell .pond-history-disclosure>summary {display:flex; align-items:center; padding:8px 12px; border:1px solid var(--pond-line); border-radius:12px; color:var(--pond-accent); font-weight:700; cursor:pointer}
#app .pond-detail-shell .pond-history-disclosure[open]>summary {margin-bottom:8px}
/* Typed state variants: owner renderer supplies state; CSS never infers facts. */
#app .pond-detail-shell [data-pond-state] {border-inline-start:3px solid var(--pond-line)}
#app .pond-detail-shell [data-pond-state="primary"] {border-color:var(--pond-accent)}
#app .pond-detail-shell :is([data-pond-state="healthy"],[data-pond-state="confirmed-zero"]) {border-color:#20815b}
#app .pond-detail-shell :is([data-pond-state="warning"],[data-pond-state="stale"]) {border-color:#b88622; background:#fff9e9}
#app .pond-detail-shell [data-pond-state="critical"] {border-color:#bd3939; background:#fff1f0}
#app .pond-detail-shell :is([data-pond-state="modeled"],[data-pond-state="forecast"]) {border-color:#5778ae; background:#f1f5fc}
#app .pond-detail-shell :is([data-pond-state="missing"],[data-pond-state="unavailable"]) {border-color:#81938c; border-inline-start-style:dashed}
#app .pond-detail-shell :is([data-pond-state="pending"],[data-pond-state="COST_PENDING"],[data-pond-state="loading"]) {border-color:#ac741c; border-inline-start-style:dashed; background:#fff9e9}
#app .pond-detail-shell .pond-state-label {display:block; font-size:12px; line-height:1.5; color:var(--pond-muted); font-weight:600}
/* One dock geometry. Retire effective legacy 10.5px label / 64px max-height rules. */
@media(max-width:900px) {
  #app .shell.pond-detail-shell .content {padding:12px var(--pond-gutter) calc(var(--pond-dock-height) + var(--pond-dock-offset) + 20px + env(safe-area-inset-bottom,0px))!important}
  #app .pond-detail-shell .pond-context-heading {display:flex!important; align-items:center; justify-content:space-between; gap:12px; padding:0!important; margin:0 0 12px!important; min-height:44px}
  #app .pond-detail-shell .pond-context-heading>span {font-size:16px!important; font-weight:700; min-width:0; overflow-wrap:anywhere}
  #app .pond-detail-shell .pond-context-heading .pond-back-farm {font-size:12px!important; flex:0 1 auto}
  #app .pond-detail-shell :is(.pond-module-header,.gm-feed-header,.health-workspace-head) {display:flex!important; flex-wrap:wrap; align-items:flex-start}
  #app .pond-detail-shell :is(.pond-module-header,.gm-feed-header,.health-workspace-head)>div {flex:1 1 100%; min-width:0}
  #app .pond-detail-shell :is(.pond-module-header,.gm-feed-header,.health-workspace-head)>button {width:100%; min-height:44px}
  #app .pond-detail-shell .pond-module-island {
    display:grid!important; position:fixed!important; z-index:100; box-sizing:border-box;
    left:12px!important; right:12px!important; bottom:calc(var(--pond-dock-offset) + env(safe-area-inset-bottom,0px))!important;
    width:auto!important; height:var(--pond-dock-height)!important; min-height:var(--pond-dock-height)!important; max-height:none!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:0!important; padding:6px!important; margin:0!important;
    border-radius:24px!important; background:rgba(249,253,250,.97)!important; border:1px solid var(--pond-line)!important;
    box-shadow:0 6px 24px #123c321c!important; backdrop-filter:blur(8px)!important;
  }
  #app .pond-detail-shell :is(.pond-module-item,.pond-module-more,.pond-module-more>summary) {
    box-sizing:border-box; width:100%!important; min-width:44px!important; height:66px!important; min-height:66px!important; max-height:none!important;
  }
  #app .pond-detail-shell :is(.pond-module-item,.pond-module-more>summary) {
    display:flex!important; flex-direction:column; justify-content:center!important; align-items:center;
    padding:3px 0!important; gap:4px!important; border-radius:16px!important; text-align:center;
  }
  #app .pond-detail-shell :is(.pond-module-label,.pond-module-more>summary>span:last-child) {
    font:650 12px/1.25 var(--ssl-font-ui)!important; letter-spacing:-.02em!important;
    white-space:normal!important; overflow:visible!important; max-height:none!important; height:auto!important;
  }
  #app .pond-detail-shell :is(.pond-module-icon,.pond-module-icon .production-icon-tile,.pond-module-more-icon) {
    display:grid!important; place-items:center; width:28px!important; height:28px!important; min-height:28px!important;
    background:transparent!important; border:0!important; box-shadow:none!important; color:inherit!important;
  }
  #app .pond-detail-shell .pond-module-icon .production-icon-svg.pond-module-img {width:25px!important; height:25px!important}
  #app .pond-detail-shell :is(.pond-module-item.active,.pond-module-more.active>summary) {background:var(--pond-accent)!important; color:white!important; border:0!important; box-shadow:none!important}
  #app .pond-detail-shell :is(.pond-module-item.active .pond-module-label,.pond-module-more.active>summary>span) {color:white!important}
  #app .pond-detail-shell .pond-module-more-sheet {bottom:calc(var(--pond-dock-height) + 16px)!important; max-height:calc(100dvh - 140px - env(safe-area-inset-bottom,0px)); overflow-y:auto; padding:12px}
}
@media(min-width:901px) {
  #app .pond-detail-shell :is(.pond-module-title,.gm-feed-title,.health-workspace-head h2) {font-size:26px!important}
  #app .pond-detail-shell .health-summary-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Pond mobile spatial rhythm v2.
 * Keep Overview as the density reference: 4/8/12/16/24 spacing, compact by
 * removing duplicate whitespace rather than shrinking readable type. */
@media(max-width:900px) {
  #app .shell.pond-detail-shell {
    --pond-gutter:12px;
    --pond-section-gap:12px;
    --pond-dock-clearance:calc(var(--pond-dock-height) + var(--pond-dock-offset) + 24px + env(safe-area-inset-bottom,0px));
  }
  #app .shell.pond-detail-shell .content {
    padding:8px var(--pond-gutter) var(--pond-dock-clearance)!important;
    scroll-padding-bottom:var(--pond-dock-clearance)!important;
  }
  #app .pond-detail-shell .pond-context-heading {
    margin:0 0 8px!important;
    min-height:40px!important;
    gap:8px!important;
  }
  #app .pond-detail-shell :is(.desktop-pond-module,.health-route,.cost-workspace,.financial-cockpit) {
    gap:12px!important;
    margin-block:0!important;
  }
  #app .pond-detail-shell :is(.pond-module-header,.gm-feed-header,.health-workspace-head,.cost-workspace-head) {
    padding:16px!important;
    gap:8px!important;
    margin-block:0!important;
  }
  #app .pond-detail-shell :is(.pond-module-title,.gm-feed-title,.health-workspace-head h2,.cost-workspace-head h2) {
    margin:2px 0!important;
  }
  #app .pond-detail-shell :is(.pond-op-card,.health-route>.panel,.gm-feed-history,.gm-feed-chart-card) {
    padding:16px!important;
    gap:8px!important;
    margin-block:0!important;
  }
  #app .pond-detail-shell :is(.pond-kpi-row,.gm-feed-kpis,.health-summary-grid) {gap:10px!important}
  #app .pond-detail-shell :is(.pond-kpi-card,.gm-feed-kpi,.health-status-card,.health-signal-card) {
    padding:12px!important;
    min-height:84px!important;
  }
  #app .pond-detail-shell :is(.pond-module-header,.gm-feed-header,.health-workspace-head) > button {
    margin-top:4px!important;
  }
  #app .pond-detail-shell :is(.pond-history-disclosure,.health-route .section-head) {margin-top:4px!important}
  #app .pond-detail-shell .pond-module-island {
    bottom:calc(var(--pond-dock-offset) + env(safe-area-inset-bottom,0px))!important;
  }

  /* Canonical cost loading is an intrinsic content state, never a viewport filler. */
  #app .pond-detail-shell .cost-workspace:has(.financial-canonical-loading),
  #app .pond-detail-shell .financial-cockpit:has(.financial-canonical-loading) {
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    min-height:0!important;
    height:auto!important;
  }
  #app .pond-detail-shell .financial-canonical-loading {
    margin:0!important;
    padding:16px!important;
    min-height:0!important;
    height:auto!important;
  }
  #app .pond-detail-shell .financial-canonical-loading>div {margin-top:10px!important; gap:8px!important}
  #app .pond-detail-shell .financial-canonical-loading i {height:52px!important}

  /* Semantic SVG tiles share one restrained geometry across Pond metrics. */
  #app .pond-detail-shell :is(.pond-kpi-icon,.gm-feed-kpi-icon,.gm-pond-feed-icon,.pond-clean-empty-icon) {
    display:grid!important;
    place-items:center!important;
    flex:0 0 28px!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    padding:0!important;
    margin:0!important;
    border-radius:9px!important;
    background:var(--pond-soft)!important;
    color:var(--pond-accent)!important;
    font-size:16px!important;
    line-height:1!important;
  }
  #app .pond-detail-shell .pond-semantic-icon-tile {display:grid;place-items:center;width:100%;height:100%;color:inherit}
  #app .pond-detail-shell .pond-semantic-icon {display:block;width:19px;height:19px;color:inherit}
}

/* Pond Icon System v2: one outline family; category tiles are green.
   Existing status badges retain their warning/error meaning. */
#app .pond-detail-shell .pond-semantic-icon-tile {display:inline-grid;place-items:center;width:100%;height:100%;vertical-align:middle}
#app .pond-detail-shell .pond-semantic-icon {display:block;width:22px;height:22px;flex:none;color:inherit}
#app .pond-detail-shell .po-ref-kpi {background:var(--pond-surface,#fff);border-color:var(--pond-line,#dce8e1)}
#app .pond-detail-shell .po-ref-kpi-icon,
#app .pond-detail-shell .po-ref-production-facts i {background:var(--pond-soft,#eaf5ee);color:#21684e}
#app .pond-detail-shell .po-ref-kpi.tone-amber {border-color:#e9d5a6}
#app .pond-detail-shell .po-ref-kpi.tone-rose {border-color:#ecced4}
#app .pond-detail-shell .pond-semantic-icon-tile[data-pond-icon="status-warning"] {color:#a8640b}
#app .pond-detail-shell .pond-semantic-icon-tile[data-pond-icon="unknown"] {color:#68776f}
#app .pond-detail-shell :is(.po-ref-chart-card,.po-ref-finance-card) h3>.production-icon-tile {
  flex:none;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border-radius:11px;
  background:var(--pond-soft,#eaf5ee);
  color:#21684e;
  box-sizing:border-box;
}
#app .pond-detail-shell :is(.po-ref-chart-card,.po-ref-finance-card) h3>.production-icon-tile>.production-icon-svg {
  width:20px;
  height:20px;
  display:block;
}
:root[data-theme="dark"] #app .pond-detail-shell :is(.po-ref-kpi-icon,.po-ref-production-facts i) {color:#a8d7bd}

:root[data-theme="dark"] #app .pond-detail-shell {
 --pond-ink:#e0eee7; --pond-muted:#bdcec6; --pond-accent:#16855f; --pond-surface:#143a30; --pond-line:#527568; --pond-soft:#1b4438;
}