/*
 * Home grid geometry contract — shell-anchored screen root + three stable slots.
 *
 * Runtime Home owner adds .kg-screen and data-home-layout="grid" while Home is active.
 * Legacy lower-fill remains a rhythm token only; it must not grow the external feed slot.
 */

@media (max-width: 767px) {
  :root {
    --kg-home-grid-inline: var(--klevby-home-content-inset, var(--kg-screen-inline, 22px));
    --kg-home-grid-scale: var(--klevby-home-scale, 1);
    --kg-home-grid-gap: var(--klevby-home-scaled-gap, calc(var(--klevby-home-section-gap, 14px) * var(--kg-home-grid-scale)));
    --kg-home-grid-feed-offset-y: calc(var(--klevby-home-feed-group-offset-y, 18px) * var(--kg-home-grid-scale));
    --kg-home-grid-lower-fill-y: var(--klevby-home-lower-fill-y, 0px);
    --kg-home-grid-weather-clearance-y: var(--klevby-home-scaled-gap, calc(var(--klevby-home-weather-clearance-y, 12px) * var(--kg-home-grid-scale)));
    --kg-home-grid-hero-row-max-h: calc(var(--klevby-home-hero-row-max-h, 213px) * var(--kg-home-grid-scale));
    --kg-home-grid-hero-to-quick-gap: calc(var(--klevby-home-hero-to-quick-grid-gap, var(--klevby-home-section-gap, 14px)) * var(--kg-home-grid-scale));
    --kg-home-grid-feed-card-visual-min-h: calc(var(--klevby-home-feed-card-visual-min-h, 184px) * var(--kg-home-grid-scale));
    --kg-home-grid-feed-header-h: calc(var(--klevby-home-feed-header-h, 34px) * var(--kg-home-grid-scale));
    --kg-home-grid-feed-card-target-h: calc(var(--klevby-home-feed-card-target-h, 224px) * var(--kg-home-grid-scale));
    --kg-home-grid-feed-card-max-h: calc(var(--klevby-home-feed-card-max-h, 230px) * var(--kg-home-grid-scale));
    --kg-home-grid-quick-to-feed-gap: calc(var(--klevby-home-quick-to-feed-gap, 22px) * var(--kg-home-grid-scale));
    --kg-home-grid-hero-copy-to-quick-gap: calc(var(--klevby-home-hero-copy-to-quick-gap, 50px) * var(--kg-home-grid-scale));
    --kg-home-grid-feed-row-min-h: calc(var(--kg-home-grid-feed-header-h) + var(--kg-home-grid-feed-card-target-h));
  }

  #homeSection.kg-screen[data-home-layout="grid"] {
    position: fixed;
    top: var(--klevby-home-available-top, var(--klevby-app-available-top));
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--klevby-home-available-height, var(--klevby-app-available-height));
    min-height: 0;
    max-height: var(--klevby-home-available-height, var(--klevby-app-available-height));
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      minmax(0, var(--kg-home-grid-hero-row-max-h))
      var(--kg-home-grid-hero-to-quick-gap)
      auto
      var(--kg-home-grid-gap)
      minmax(var(--kg-home-grid-feed-row-min-h), 1fr)
      var(--kg-home-grid-gap)
      auto;
    align-items: stretch;
    align-content: stretch;
    row-gap: 0;
    padding-bottom: var(--kg-home-grid-weather-clearance-y);
    box-sizing: border-box;
    container-type: size;
    container-name: kg-home-screen;
    z-index: 1;
  }

  body[data-home-screen-lock="true"]
    #homeSection.kg-screen[data-home-layout="grid"]:not(.hidden) {
    position: fixed !important;
    top: var(--klevby-home-available-top, var(--klevby-app-available-top)) !important;
    bottom: auto !important;
    height: var(--klevby-home-available-height, var(--klevby-app-available-height)) !important;
    min-height: 0 !important;
    max-height: var(--klevby-home-available-height, var(--klevby-app-available-height)) !important;
  }

  #homeSection.kg-screen[data-home-layout="grid"] > .hero {
    grid-row: 1;
    position: relative;
    inset: auto;
    z-index: 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    max-height: var(--kg-home-grid-hero-row-max-h);
  }

  #homeSection.kg-screen[data-home-layout="grid"] > .hero .hero-feature-chip,
  #homeSection.kg-screen[data-home-layout="grid"] > .hero button {
    pointer-events: auto;
  }

  /*
   * Real Home grid: hero-copy vertical offset is driven only by the shared
   * --klevby-home-hero-copy-nudge-y token from :root (no section-level override).
   */
  #homeSection.kg-screen[data-home-layout="grid"] .hero-copy {
    transform: translate3d(
      0,
      calc(
        var(--klevby-home-hero-copy-shift-y)
        + 23px
        + var(--klevby-home-hero-copy-nudge-y)
      ),
      0
    ) !important;
  }

  #homeSection.kg-screen[data-home-layout="grid"] > #forecastPanel {
    display: none;
  }

  #homeSection.kg-screen[data-home-layout="grid"] > .home-quick-actions {
    grid-row: 3;
    position: relative;
    inset: auto;
    z-index: 2;
    width: min(var(--klevby-home-rail-width, calc(100% - (2 * var(--kg-home-grid-inline)))), calc(100% - (2 * var(--kg-home-grid-inline))));
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: max(
      0px,
      calc(var(--kg-home-grid-quick-to-feed-gap) - var(--kg-home-grid-gap))
    );
    min-width: 0;
    box-sizing: border-box;
    align-self: start;
    transform: none;
    overflow: visible;
  }

  #homeSection.kg-screen[data-home-layout="grid"] > .home-feed-preview {
    grid-row: 5;
    position: relative;
    inset: auto;
    z-index: 2;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(var(--klevby-home-rail-width, calc(100% - (2 * var(--kg-home-grid-inline)))), calc(100% - (2 * var(--kg-home-grid-inline))));
    margin: 0 auto;
    min-width: 0;
    min-height: var(--kg-home-grid-feed-row-min-h);
    height: 100%;
    max-height: none;
    box-sizing: border-box;
    align-self: stretch;
    transform: none;
    overflow: hidden;
  }

  #homeSection.kg-screen[data-home-layout="grid"] > .home-weather-card {
    grid-row: 7;
    position: relative;
    inset: auto;
    z-index: 2;
    width: min(var(--klevby-home-rail-width, calc(100% - (2 * var(--kg-home-grid-inline)))), calc(100% - (2 * var(--kg-home-grid-inline))));
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    min-width: 0;
    box-sizing: border-box;
    align-self: end;
    transform: none;
    overflow: hidden;
  }

  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-rotator,
  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-rotator-viewport,
  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-slide,
  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-card {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-card {
    min-height: 0;
  }

  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-head {
    grid-row: 1;
    min-height: 0;
  }

  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-rotator {
    grid-row: 2;
    position: relative;
    width: 100%;
    min-width: 0;
  }

  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-rotator-viewport {
    position: relative;
    width: 100%;
    min-width: 0;
  }

  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-image,
  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-image img,
  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-ad-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-image {
    position: relative;
    min-height: 0;
    max-height: 100%;
  }

  #homeSection.kg-screen[data-home-layout="grid"] .home-feed-preview-image img {
    position: absolute;
    inset: 0;
  }

  :root[data-home-density="compact"] {
    --kg-home-grid-gap: var(--klevby-home-scaled-gap, calc(var(--klevby-home-section-gap, 12px) * var(--kg-home-grid-scale)));
    --kg-home-grid-feed-offset-y: calc(var(--klevby-home-feed-group-offset-y, 18px) * var(--kg-home-grid-scale));
  }

  :root[data-home-density="tight"] {
    --kg-home-grid-gap: var(--klevby-home-scaled-gap, calc(var(--klevby-home-section-gap, 12px) * var(--kg-home-grid-scale)));
    --kg-home-grid-feed-offset-y: calc(var(--klevby-home-feed-group-offset-y, 12px) * var(--kg-home-grid-scale));
  }
}


/* Temporary Home skeleton geometry diagnostic.
   Keeps one owner for vertical slots between measured header and TouchBar. */
body[data-home-skeleton="true"] #homeSection.kg-screen[data-home-layout="grid"] {
    position: fixed !important;
    top: var(--klevby-home-available-top, var(--klevby-app-available-top)) !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--klevby-home-available-height, var(--klevby-app-available-height)) !important;
    max-height: var(--klevby-home-available-height, var(--klevby-app-available-height)) !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    align-content: stretch !important;
    row-gap: 12px !important;
    transform: none !important;
    box-sizing: border-box !important;
}

body[data-home-skeleton="true"] #homeSection.kg-screen[data-home-layout="grid"] > :not(.home-quick-actions):not(.home-feed-preview):not(.home-weather-card) {
    display: none !important;
}

body[data-home-skeleton="true"] #homeSection .home-quick-actions,
body[data-home-skeleton="true"] #homeSection .home-feed-preview,
body[data-home-skeleton="true"] #homeSection .home-weather-card {
    display: grid !important;
    width: calc(100% - (2 * var(--klevby-home-content-inset, 22px))) !important;
    margin: 0 auto !important;
    transform: none !important;
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

body[data-home-skeleton="true"] #homeSection .home-quick-actions {
    min-height: 112px !important;
    align-self: start !important;
}

body[data-home-skeleton="true"] #homeSection .home-feed-preview {
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
}

body[data-home-skeleton="true"] #homeSection .home-weather-card {
    min-height: 78px !important;
    align-self: end !important;
    padding: 0 !important;
}

body[data-home-skeleton="true"] #homeSection .home-quick-actions > *,
body[data-home-skeleton="true"] #homeSection .home-feed-preview > *,
body[data-home-skeleton="true"] #homeSection .home-weather-card > * {
    display: none !important;
}

body[data-home-skeleton="true"] #homeSection .home-quick-actions::before,
body[data-home-skeleton="true"] #homeSection .home-feed-preview::before,
body[data-home-skeleton="true"] #homeSection .home-weather-card::before {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    border: 1px dashed rgba(255, 248, 234, 0.42) !important;
    border-radius: 18px !important;
    background: rgba(8, 16, 23, 0.64) !important;
    color: rgba(255, 248, 234, 0.82) !important;
    font: 800 12px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0.14em !important;
    box-sizing: border-box !important;
}

body[data-home-skeleton="true"] #homeSection .home-quick-actions::before {
    content: "QUICK SLOT" !important;
}

body[data-home-skeleton="true"] #homeSection .home-feed-preview::before {
    content: "FEED SLOT" !important;
}

body[data-home-skeleton="true"] #homeSection .home-weather-card::before {
    content: "WEATHER SLOT" !important;
}

body[data-home-skeleton="true"] #homeSection .home-feed-preview-card,
body[data-home-skeleton="true"] #homeSection .home-feed-preview-image,
body[data-home-skeleton="true"] #homeSection .home-feed-preview-image img,
body[data-home-skeleton="true"] #homeSection .home-feed-preview-rotator-viewport {
    height: auto !important;
    min-height: 0 !important;
}


.home-skeleton-dev-tap-zone {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 8px) !important;
    z-index: 2147483000 !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    color: transparent !important;
    font: 800 10px/1.1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    -webkit-tap-highlight-color: transparent !important;
}

body[data-home-skeleton="true"] .home-skeleton-dev-tap-zone {
    pointer-events: auto !important;
    width: 112px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255, 248, 234, 0.42) !important;
    opacity: 1 !important;
    background: rgba(8, 16, 23, 0.88) !important;
    color: rgba(255, 248, 234, 0.92) !important;
    box-shadow: 0 8px 20px rgba(0, 8, 16, 0.34) !important;
}


.home-skeleton-diagnostics-overlay {
    display: none !important;
    position: fixed !important;
    left: calc(env(safe-area-inset-left, 0px) + 12px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
    bottom: calc(var(--klevby-bottom-chrome-total, 86px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
    z-index: 2147482000 !important;
    max-width: 240px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 248, 234, 0.30) !important;
    border-radius: 12px !important;
    background: rgba(6, 12, 18, 0.86) !important;
    color: rgba(255, 248, 234, 0.90) !important;
    box-shadow: 0 10px 24px rgba(0, 8, 16, 0.34) !important;
    font: 700 10px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
    white-space: pre-line !important;
    pointer-events: none !important;
}

body[data-home-skeleton="true"] .home-skeleton-diagnostics-overlay {
    display: block !important;
}

/* Final Home skeleton viewport override.
   Must stay after legacy density/flex rules so skeleton mode anchors #homeSection to measured shell geometry. */
body[data-home-skeleton="true"] #homeSection,
body[data-home-skeleton="true"] #homeSection.kg-screen,
body[data-home-skeleton="true"] #homeSection[data-home-layout="grid"],
body[data-home-skeleton="true"] #homeSection.kg-screen[data-home-layout="grid"] {
    position: fixed !important;
    top: var(--klevby-home-available-top, var(--klevby-app-available-top)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: var(--klevby-home-available-height, var(--klevby-app-available-height)) !important;
    min-height: 0 !important;
    max-height: var(--klevby-home-available-height, var(--klevby-app-available-height)) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    align-content: stretch !important;
    row-gap: 12px !important;
    box-sizing: border-box !important;
}