/* Focused chart, palette, and report-cover repair. Loaded after current-shells.css. */
body.ll-portalized {
  --ll-approved-navy: #101725;
  --ll-approved-slate: #29354b;
  --ll-approved-wine: #702d5b;
  --ll-approved-pink: #f28fc5;
  --ll-approved-lilac: #c9b8f4;
  --ll-approved-blue: #8fd7f5;
  --ll-approved-cream: #fff8ee;
  --ll-approved-silver: #c7cedd;

  /* Legacy names remain as aliases so old child routes cannot leak yellow. */
  --ll-yellow: var(--ll-approved-lilac);
  --lunar-yellow: var(--ll-approved-lilac);
  --archive-yellow: var(--ll-approved-lilac);
  --ll-solar-yellow: var(--ll-approved-blue);
  --ll-lunar-gold: var(--ll-approved-blue);
  --tool-gold: var(--ll-approved-blue);
  --gold: var(--ll-approved-blue);
  --gold-soft: color-mix(in srgb, var(--ll-approved-blue) 24%, transparent);
}

/* The portal centre column is narrower than the viewport. Give the chart the
   available width first, while keeping the form useful but secondary. */
body.ll-portalized--astrology [data-free-tool="basic-birth-chart"].chart-workspace {
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  max-width: none;
  align-items: start;
}

body.ll-portalized--astrology .chart-form-panel {
  position: static;
  min-width: 0;
  padding: 14px;
  gap: 10px;
}

body.ll-portalized--astrology .chart-form-panel :is(label, .checkbox-label, .tool-field-row, .tool-field-grid) {
  min-width: 0;
}

body.ll-portalized--astrology .chart-form-panel .checkbox-label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

body.ll-portalized--astrology .chart-form-panel .checkbox-label input {
  width: 18px;
  min-height: 18px;
  margin: 0;
}

body.ll-portalized--astrology .chart-view-panel.has-natal-chart {
  min-width: 0;
  padding: 12px;
}

body.ll-portalized--astrology .natal-chart-layout {
  display: grid;
  grid-template-columns: minmax(0, 520px);
  gap: 12px;
  align-items: start;
  justify-content: center;
}

body.ll-portalized--astrology .natal-chart-scroll {
  width: min(100%, 520px);
  max-width: 520px;
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 4px;
  overflow: visible;
}

body.ll-portalized--astrology .natal-chart-svg {
  width: 100%;
  max-width: 520px;
  min-width: 0;
}

body.ll-portalized--astrology .natal-technical-panel {
  min-width: 0;
  padding: 12px;
}

body.ll-portalized--astrology .chart-detail-panel p {
  color: var(--ll-approved-silver);
}

/* One coherent cover component powers catalogues, products, samples, and My Lunar. */
.ll-report-cover {
  --cover-bg: #101725;
  --cover-panel: #202c43;
  --cover-accent: #8fd7f5;
  --cover-accent-2: #f28fc5;
  --cover-ink: #fff8ee;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto minmax(92px, 1fr) auto auto;
  align-content: stretch;
  width: min(100%, 236px);
  aspect-ratio: 3 / 4;
  min-height: 268px;
  margin: 0 auto 12px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cover-accent) 76%, white);
  border-radius: 2px;
  background: var(--cover-bg);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--cover-accent-2) 44%, transparent);
  color: var(--cover-ink);
  text-align: left;
}

.ll-report-cover::before,
.ll-report-cover::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.ll-report-cover::before {
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--cover-accent) 45%, transparent);
}

.ll-report-cover::after {
  right: 9px;
  bottom: 9px;
  width: 54%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--cover-accent-2) 55%, transparent);
  border-radius: 50%;
}

.ll-report-cover__press,
.ll-report-cover__category,
.ll-report-cover__system,
.ll-report-cover__format,
.ll-report-cover__issue {
  position: relative;
  z-index: 2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ll-report-cover__press {
  font: 700 8px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--cover-accent);
}

.ll-report-cover__category {
  margin-top: 5px;
  font: 800 10px/1.2 Arial, sans-serif;
  color: var(--cover-accent-2);
}

.ll-report-cover__motif {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 92px;
  margin: 8px 0;
}

.ll-report-cover__motif i {
  position: absolute;
  display: block;
  border: 1px solid var(--cover-accent);
}

.ll-report-cover > .ll-report-cover__title {
  position: relative;
  z-index: 2;
  align-self: end;
  max-width: 100%;
  font: 700 clamp(18px, 1.7vw, 24px)/1.02 Georgia, "Times New Roman", serif;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.ll-report-cover__system {
  margin-top: 7px;
  color: var(--cover-accent);
  font: 700 8px/1.2 Arial, sans-serif;
}

.ll-report-cover__format,
.ll-report-cover__issue {
  margin-top: 7px;
  font: 700 7px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--ll-approved-silver, #c7cedd);
}

.ll-report-cover__issue {
  position: absolute;
  right: 13px;
  bottom: 13px;
}

.ll-report-cover--astrology { --cover-bg: #101725; --cover-panel: #29354b; --cover-accent: #8fd7f5; --cover-accent-2: #c9b8f4; }
.ll-report-cover--synastry { --cover-bg: #2b1730; --cover-panel: #512746; --cover-accent: #f3abcF; --cover-accent-2: #9fdcf6; }
.ll-report-cover--tarot { --cover-bg: #21152d; --cover-panel: #3f2457; --cover-accent: #c9b8f4; --cover-accent-2: #f28fc5; }
.ll-report-cover--bazi { --cover-bg: #102a32; --cover-panel: #194551; --cover-accent: #8fd7f5; --cover-accent-2: #f3abcf; }
.ll-report-cover--manifestation { --cover-bg: #3b1831; --cover-panel: #702d5b; --cover-accent: #f28fc5; --cover-accent-2: #c9b8f4; }
.ll-report-cover--self { --cover-bg: #1a2336; --cover-panel: #33415d; --cover-accent: #c9b8f4; --cover-accent-2: #8fd7f5; }

.ll-report-cover--astrology .ll-report-cover__motif i { width: 78px; height: 78px; border-radius: 50%; }
.ll-report-cover--astrology .ll-report-cover__motif i:nth-child(2) { width: 55px; height: 55px; }
.ll-report-cover--astrology .ll-report-cover__motif i:nth-child(3) { width: 94px; height: 1px; transform: rotate(32deg); }
.ll-report-cover--astrology .ll-report-cover__motif i:nth-child(4) { width: 94px; height: 1px; transform: rotate(-32deg); }

.ll-report-cover--synastry .ll-report-cover__motif i { width: 66px; height: 66px; border-radius: 50%; transform: translateX(-22px); }
.ll-report-cover--synastry .ll-report-cover__motif i:nth-child(2) { transform: translateX(22px); border-color: var(--cover-accent-2); }
.ll-report-cover--synastry .ll-report-cover__motif i:nth-child(3) { width: 110px; height: 1px; transform: rotate(24deg); }
.ll-report-cover--synastry .ll-report-cover__motif i:nth-child(4) { width: 8px; height: 8px; border-radius: 50%; background: var(--cover-accent-2); }

.ll-report-cover--tarot .ll-report-cover__motif i:first-child { width: 58px; height: 88px; border-radius: 28px 28px 3px 3px; }
.ll-report-cover--tarot .ll-report-cover__motif i:nth-child(2) { width: 29px; height: 29px; border-radius: 50%; background: color-mix(in srgb, var(--cover-accent-2) 28%, transparent); }
.ll-report-cover--tarot .ll-report-cover__motif i:nth-child(3),
.ll-report-cover--tarot .ll-report-cover__motif i:nth-child(4) { width: 40px; height: 1px; transform: rotate(45deg); }
.ll-report-cover--tarot .ll-report-cover__motif i:nth-child(4) { transform: rotate(-45deg); }

.ll-report-cover--bazi .ll-report-cover__motif { grid-template-columns: repeat(4, 18px); gap: 6px; }
.ll-report-cover--bazi .ll-report-cover__motif i { position: relative; width: 18px; height: 76px; background: color-mix(in srgb, var(--cover-panel) 72%, transparent); }
.ll-report-cover--bazi .ll-report-cover__motif i:nth-child(even) { transform: translateY(8px); border-color: var(--cover-accent-2); }

.ll-report-cover--manifestation .ll-report-cover__motif i:first-child { width: 82px; height: 62px; border-radius: 2px; transform: rotate(-4deg); background: color-mix(in srgb, var(--cover-panel) 70%, transparent); }
.ll-report-cover--manifestation .ll-report-cover__motif i:nth-child(2) { width: 54px; height: 1px; transform: translateY(-14px); }
.ll-report-cover--manifestation .ll-report-cover__motif i:nth-child(3) { width: 42px; height: 1px; }
.ll-report-cover--manifestation .ll-report-cover__motif i:nth-child(4) { width: 28px; height: 1px; transform: translateY(14px); }

.ll-report-cover--self .ll-report-cover__motif i:first-child { width: 94px; height: 70px; background: repeating-linear-gradient(0deg, transparent 0 16px, color-mix(in srgb, var(--cover-accent) 42%, transparent) 16px 17px); }
.ll-report-cover--self .ll-report-cover__motif i:nth-child(2) { width: 34px; height: 34px; border-radius: 50%; transform: translate(-20px, -4px); background: var(--cover-panel); }
.ll-report-cover--self .ll-report-cover__motif i:nth-child(3) { width: 30px; height: 1px; transform: translate(25px, -12px); }
.ll-report-cover--self .ll-report-cover__motif i:nth-child(4) { width: 30px; height: 1px; transform: translate(25px, 3px); }

.purchase-panel > .ll-report-cover {
  width: min(100%, 210px);
  min-height: 248px;
}

.account-report-file {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.account-report-file > .ll-report-cover--compact {
  grid-row: 1 / span 2;
  width: 92px;
  min-height: 123px;
  margin: 0;
  padding: 7px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cover-accent-2) 38%, transparent) !important;
}

.ll-report-cover--compact .ll-report-cover__press,
.ll-report-cover--compact .ll-report-cover__system,
.ll-report-cover--compact .ll-report-cover__format,
.ll-report-cover--compact .ll-report-cover__issue { display: none; }
.ll-report-cover--compact .ll-report-cover__category { font-size: 6px; }
.ll-report-cover--compact .ll-report-cover__motif { min-height: 42px; margin: 3px 0; transform: scale(.55); }
.ll-report-cover--compact .ll-report-cover__title { font-size: 10px; line-height: 1.05; }

body.ll-portalized--home .ll-report-stack .ll-report-cover {
  width: 100% !important;
  height: auto !important;
  min-height: 128px !important;
  aspect-ratio: 3 / 4;
  padding: 7px !important;
}

body.ll-portalized--home .ll-report-stack .ll-report-cover > .ll-report-cover__title {
  max-width: 100% !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
}

@media (max-width: 1180px) {
  body.ll-portalized--astrology [data-free-tool="basic-birth-chart"].chart-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  body.ll-portalized--astrology .natal-chart-layout {
    grid-template-columns: minmax(360px, 500px) minmax(150px, 1fr);
    justify-content: center;
  }
}

@media (max-width: 900px) {
  body.ll-portalized--astrology .natal-chart-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {

  body.ll-portalized--astrology .natal-chart-scroll {
    width: min(100%, 520px);
  }

  .ll-report-cover {
    width: min(100%, 220px);
  }

  .account-report-file {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .account-report-file > .ll-report-cover--compact {
    width: 78px;
    min-height: 104px;
  }
}
