/*
 * Lunar Letter layout stability layer.
 *
 * This file is deliberately loaded last. It owns geometry, responsive flow,
 * and readable component sizing; earlier stylesheets continue to own colour,
 * ornament, imagery, and category-specific personality.
 */

:root {
  --ll-page-max: 1260px;
  --ll-shell-gap: 8px;
  --ll-sidebar-left: 185px;
  --ll-sidebar-right: 205px;
  --ll-readable-card-min: 220px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

.ll-portal-shell[data-lunar-shell="portal-v7"],
.ll-portal-grid,
.ll-portal-sidebar,
.ll-portal-main,
.portal-mosaic,
.portal-mosaic > *,
.portal-mosaic main,
.portal-mosaic section,
.portal-mosaic article,
.portal-mosaic header,
.portal-mosaic nav,
.portal-mosaic form,
.portal-mosaic figure,
.portal-mosaic div {
  min-width: 0;
}

.ll-portal-shell[data-lunar-shell="portal-v7"] {
  width: min(var(--ll-page-max), calc(100vw - 24px)) !important;
}

.ll-portal-grid {
  grid-template-columns:
    var(--ll-sidebar-left)
    minmax(0, 1fr)
    var(--ll-sidebar-right) !important;
  gap: var(--ll-shell-gap) !important;
}

.ll-web-panel__title,
.portal-titlebar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  height: auto !important;
  padding: 5px 8px !important;
  line-height: 1.2 !important;
}

/* Home category previews: preserve the current skins, repair their geometry. */
body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview.ll-world-preview {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(132px, .65fr) !important;
  align-items: stretch !important;
  align-content: start !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px !important;
  gap: 10px !important;
  overflow: visible !important;
}

body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview--tarot,
body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview--manifestation {
  grid-template-columns: minmax(132px, .65fr) minmax(0, 1.35fr) !important;
}

body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview--bazi {
  display: block !important;
}

body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview__body {
  align-self: start !important;
  overflow: visible !important;
}

body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview h3 {
  overflow: visible !important;
  font-size: clamp(19px, 2.2vw, 28px) !important;
  line-height: 1.05 !important;
}

body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview p {
  font-size: 15.5px !important;
  line-height: 1.55 !important;
}

body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview__enter,
body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview__links a {
  height: auto !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview figure {
  position: relative !important;
  align-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  margin: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
}

body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview figure > img:first-child {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
}

body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview--astrology figure::before,
body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview--astrology figure::after {
  content: none !important;
  display: none !important;
}

.astrology-preview-chart {
  display: grid;
  place-items: center;
  width: min(100%, 220px);
  margin: auto;
  aspect-ratio: 1;
}

.astrology-preview-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.astrology-preview-chart__houses,
.astrology-preview-chart__axis {
  opacity: .62;
}

.astrology-preview-chart__signs text {
  fill: currentColor;
  stroke: none;
  font: 700 8px/1 monospace;
  text-anchor: middle;
}

/* Manifestation previews should be led by content, not empty fixed canvases. */
.manifest-landing-focal,
.manifestation-preview,
.manifest-preview {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

.manifest-landing-focal {
  aspect-ratio: 4 / 3;
  max-width: 420px;
  margin-inline: auto;
}

.manifest-landing-focal img,
.manifestation-preview img,
.manifest-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}

.manifest-os__grid {
  grid-template-columns:
    var(--ll-sidebar-left)
    minmax(0, 1fr)
    var(--ll-sidebar-right) !important;
  align-items: start !important;
}

/* Session panels may live inside the responsive portal shell after build. */
.daily-draw-app :is(
  .daily-intro,
  .daily-focus-panel,
  .daily-shuffle-panel,
  .daily-spread-panel,
  .daily-select-panel,
  .daily-reveal-panel,
  .daily-result-panel
) {
  width: min(1120px, 100%) !important;
  max-width: 100%;
}

@media (max-width: 1179px) {
  .ll-portal-grid {
    grid-template-columns: 170px minmax(0, 1fr) !important;
  }

  .ll-portal-sidebar--right {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manifest-os__grid {
    grid-template-columns: 170px minmax(0, 1fr) !important;
    grid-template-areas:
      "goals counter"
      "affirmations affirmations"
      "story tools" !important;
  }

  .manifest-os__rail--right {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview.ll-world-preview,
  body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview--tarot,
  body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview--manifestation {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview figure {
    order: 0 !important;
    width: min(100%, 420px) !important;
    justify-self: center;
  }

  body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-world-preview__body {
    order: 1 !important;
  }

}

@media (max-width: 760px) {
  .ll-portal-shell[data-lunar-shell="portal-v7"] {
    width: min(100% - 12px, var(--ll-page-max)) !important;
    margin-inline: auto !important;
  }

  .ll-portal-grid,
  .manifest-os__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ll-portal-sidebar--left,
  .ll-portal-main,
  .ll-portal-sidebar--right,
  .manifest-os__rail,
  .manifest-os__main {
    grid-column: 1 !important;
  }

  .ll-portal-sidebar--right {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine > *,
  body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-worlds-spread > * {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body.ll-portalized--home .portal-mosaic #start-here.ll-home-zine .ll-worlds-spread {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

}

@media (max-width: 430px) {
  .ll-portal-shell[data-lunar-shell="portal-v7"] {
    width: calc(100% - 8px) !important;
    padding: 3px !important;
  }

  .ll-portal-main.portal-mosaic {
    padding: 4px !important;
  }

  .ll-portal-masthead--v6 {
    min-height: 0 !important;
    height: auto !important;
  }

}