/* Pond narrow-iPhone responsive hardening v1.
 * Presentation only: preserve readable type, allow values/labels to wrap,
 * and reduce structural chrome before reducing typography. */
@media (max-width: 500px) {
  #app .shell.pond-detail-shell { --pond-gutter:10px; --pond-section-gap:10px; }
  #app .shell.pond-detail-shell .content {
    padding-left:var(--pond-gutter)!important;
    padding-right:var(--pond-gutter)!important;
    padding-bottom:calc(var(--pond-dock-height) + var(--pond-dock-offset) + 42px + env(safe-area-inset-bottom,0px))!important;
    scroll-padding-bottom:calc(var(--pond-dock-height) + var(--pond-dock-offset) + 42px + env(safe-area-inset-bottom,0px))!important;
  }
  #app .pond-detail-shell .po-ref-round { padding:7px 10px!important; gap:8px!important; }
  #app .pond-detail-shell .po-ref-round-icon { width:30px!important; height:30px!important; flex-basis:30px!important; }
  #app .pond-detail-shell .po-ref-round-icon .production-icon-tile { width:23px!important; height:23px!important; }
  #app .pond-detail-shell .po-ref-round-eyebrow { font-size:9px!important; }
  #app .pond-detail-shell .po-ref-round-static { min-height:22px!important; }
  #app .pond-detail-shell .po-ref-round>div>small { font-size:9px!important; }

  /* Owner-approved Overview keeps two rows of three KPIs, but narrow widths
     must not ellipsize business values such as density or shrimp size. */
  #app .pond-detail-shell .po-ref-kpis { gap:7px!important; }
  #app .pond-detail-shell .po-ref-kpi {
    grid-template-columns:24px minmax(0,1fr)!important;
    gap:5px!important;
    min-height:70px!important;
    padding:7px 7px!important;
  }
  #app .pond-detail-shell .po-ref-kpi-icon { width:24px!important; height:24px!important; }
  #app .pond-detail-shell .po-ref-kpi-icon svg { width:18px!important; height:18px!important; }
  #app .pond-detail-shell .po-ref-kpi>div { min-width:0!important; }
  #app .pond-detail-shell .po-ref-kpi small,
  #app .pond-detail-shell .po-ref-kpi b,
  #app .pond-detail-shell .po-ref-kpi em {
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  #app .pond-detail-shell .po-ref-kpi small { font-size:9px!important; line-height:1.2!important; }
  #app .pond-detail-shell .po-ref-kpi b { font-size:14px!important; line-height:1.15!important; }
  #app .pond-detail-shell .po-ref-kpi em { box-sizing:border-box!important; width:100%!important; max-width:100%; padding:2px 4px!important; font-size:8px!important; text-align:center; }
  @supports (container-type:inline-size) {
    #app .pond-detail-shell .po-ref-kpi { container-type:inline-size; }
    @container (max-width: 112px) {
      #app .pond-detail-shell .po-ref-kpi { grid-template-columns:22px minmax(0,1fr)!important; min-height:68px!important; padding:6px!important; }
      #app .pond-detail-shell .po-ref-kpi-icon { width:22px!important; height:22px!important; }
      #app .pond-detail-shell .po-ref-kpi-icon svg { width:17px!important; height:17px!important; }
      #app .pond-detail-shell .po-ref-kpi em { width:auto!important; justify-self:start; max-width:100%; padding:2px 3px!important; font-size:7.5px!important; }
    }
  }

  /* Shared two-column KPI surfaces (Water/Growth/etc.) retain hierarchy while
     allowing long bilingual labels and units to wrap naturally. */
  #app .pond-detail-shell :is(.pond-kpi-row,.water-kpi-row) { gap:8px!important; }
  #app .pond-detail-shell :is(.pond-kpi-card,.water-kpi-fast,.water-kpi-slow) {
    min-width:0!important;
    padding:11px!important;
  }
  #app .pond-detail-shell .pond-kpi-head { align-items:flex-start!important; gap:6px!important; }
  #app .pond-detail-shell .pond-kpi-title {
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    line-height:1.3!important;
  }
  #app .pond-detail-shell .pond-kpi-val {
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    line-height:1.15!important;
  }
  #app .pond-detail-shell .pond-kpi-sub {
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    line-height:1.35!important;
  }
}

@media (max-width: 374px) {
  #app .shell.pond-detail-shell { --pond-gutter:8px; }
  #app .pond-detail-shell .po-ref-kpis { gap:6px!important; }
  #app .pond-detail-shell .po-ref-kpi {
    grid-template-columns:22px minmax(0,1fr)!important;
    min-height:68px!important;
    padding:6px!important;
  }
  #app .pond-detail-shell .po-ref-kpi-icon { width:22px!important; height:22px!important; }
  #app .pond-detail-shell .po-ref-kpi-icon svg { width:17px!important; height:17px!important; }
  #app .pond-detail-shell .po-ref-production { grid-template-columns:minmax(0,1.35fr) minmax(98px,.65fr)!important; }
  #app .pond-detail-shell .po-ref-production-main { padding:14px 11px!important; }
  #app .pond-detail-shell .po-ref-production-facts { padding:11px 8px!important; }
  #app .pond-detail-shell :is(.pond-kpi-card,.water-kpi-fast,.water-kpi-slow) { padding:10px!important; }
}