/* Five independent illustrated quick cards. On wide desktop the right
   observation rail stays reserved for upcoming Moon/events modules. */
.ae-app--overview .ae-bottom-five{
  position:absolute;
  z-index:8;
  left:calc(clamp(12px,1.1vw,22px) + 16.5px);
  right:calc(clamp(12px,1.1vw,22px) + 16.5px);
  /* The five cells stay exactly their current widths and gaps. Move the
     entire row left so card 1 begins at the same x coordinate as the
     Sky Signals / Day Energies cards (the main canvas's left padding).
     Card 1 is centered inside its grid cell, hence the extra 3.5px. */
  transform:translateX(calc(clamp(14px,1.3vw,22px) - clamp(12px,1.1vw,22px) - 20px));
  bottom:clamp(8px,1.15dvh,15px);
  height:clamp(105px,20.7dvh,211px);
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(3px,calc(.64vw - 2px),9px);
  margin:0;
  pointer-events:auto;
}
.ae-app--overview .ae-bottom-tile{
  position:relative;isolation:isolate;
  min-width:0;min-height:0;
  display:flex;flex-direction:column;
  box-sizing:border-box;
  width:calc(100% - 7px);
  justify-self:center;
  padding:clamp(8px,.82vw,13px) clamp(7px,.95vw,15px) clamp(8px,.76vw,12px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.91);
  outline:1px solid rgba(217,182,199,.51);
  border-radius:clamp(11px,1vw,17px);
  background:linear-gradient(144deg,rgba(255,253,252,.96),rgba(255,243,248,.93) 90%);
  box-shadow:0 8px 24px rgba(97,44,79,.10),0 2px 7px rgba(255,255,255,.60) inset;
  -webkit-backdrop-filter:blur(11px);
  backdrop-filter:blur(11px);
  color:#632247;
  text-decoration:none;
}
.ae-app--overview .ae-bottom-tile:focus-visible{
  outline:2px solid #8e436f;outline-offset:3px;
}
.ae-app--overview .ae-bottom-tile:hover{
  border-color:rgba(219,175,204,.92);
  box-shadow:0 9px 26px rgba(97,44,79,.15),0 2px 7px rgba(255,255,255,.7) inset;
}
.ae-app--overview .ae-bottom-tile__heading{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:6px;
  font:normal clamp(13px,1.08vw,18px)/1.15 Georgia,"Times New Roman",serif;
  white-space:nowrap;min-width:0;
  color:#64244d;
}
.ae-app--overview .ae-bottom-tile__heading > span:nth-child(2){
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ae-app--overview .ae-bottom-tile__symbol{
  display:block;
  flex:0 0 clamp(26px,2.3vw,36px);
  width:clamp(26px,2.3vw,36px);
  height:clamp(26px,2.3vw,36px);
  object-fit:contain;
  box-sizing:border-box;
  background:#fff;
  border:0;
  border-radius:0;
  box-shadow:none;
  pointer-events:none;
}
.ae-app--overview .ae-bottom-tile__data{
  position:relative;z-index:2;
  margin-top:clamp(4px,.5dvh,8px);
  color:#713153;font:normal clamp(11px,.87vw,13px)/1.24 Georgia,serif;
  text-shadow:0 1px 7px rgba(255,255,255,.9);
}
.ae-app--overview .ae-bottom-tile__data span{color:#a84b68}
.ae-app--overview .ae-bottom-tile__degree{
  position:relative;z-index:2;
  margin-top:3px;
  color:#925d78;font:normal clamp(10px,.82vw,12px)/1.15 Georgia,serif;
  text-shadow:0 1px 7px rgba(255,255,255,.9);
}
.ae-app--overview .ae-bottom-tile__art{
  position:absolute;z-index:1;
  left:11%;top:30%;
  width:78%;height:70%;
  object-fit:contain;
  object-position:center;
  opacity:.98;
  pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(161,89,124,.12));
}
.ae-app--overview .ae-bottom-tile--asc .ae-bottom-tile__art{width:90%;left:5%;top:28%;height:75%}
.ae-app--overview .ae-bottom-tile--transit .ae-bottom-tile__art{width:94%;left:3%;top:31%;height:68%}
.ae-app--overview .ae-bottom-tile__foot{
  position:relative;z-index:2;
  display:flex;align-items:end;justify-content:space-between;
  gap:3px;margin-top:auto;
  min-width:0;
  background:linear-gradient(0deg,rgba(255,249,250,.85),rgba(255,249,250,.54) 82%,transparent);
  padding-top:5px;
  color:#88476a;
  font:normal clamp(9px,.75vw,11px)/1.14 Georgia,serif;
  text-shadow:0 1px 5px white;
}
.ae-app--overview .ae-bottom-tile__foot span{font:20px/12px Georgia,serif;color:#673054}
@media(min-width:1450px){
  .ae-app--overview .ae-bottom-five{
    right:calc(clamp(310px,23.5vw,420px) + 16.5px);
  }
}
@media(min-width:1060px) and (max-height:730px){
  .ae-app--overview .ae-bottom-five{
    height:clamp(86px,18dvh,124px);bottom:6px;
  }
  .ae-app--overview .ae-bottom-tile{padding:7px 8px 6px}
  .ae-app--overview .ae-bottom-tile__heading{font-size:clamp(11px,1.05vw,15px);gap:4px}
  .ae-app--overview .ae-bottom-tile__symbol{flex-basis:25px;width:25px;height:25px}
  .ae-app--overview .ae-bottom-tile__data{font-size:clamp(9px,.82vw,11px);margin-top:3px}
  .ae-app--overview .ae-bottom-tile__degree{font-size:9px;margin-top:2px}
  .ae-app--overview .ae-bottom-tile__foot{font-size:9px;padding-top:2px}
  .ae-app--overview .ae-bottom-tile__art{top:35%;height:69%}
}
@media(min-width:701px) and (max-width:1059px){
  .ae-app--overview .ae-bottom-five{height:clamp(102px,20dvh,162px);bottom:7px}
  .ae-app--overview .ae-bottom-tile{padding:7px 8px}
  .ae-app--overview .ae-bottom-tile__heading{font-size:clamp(11px,1.45vw,15px);gap:4px}
  .ae-app--overview .ae-bottom-tile__symbol{flex-basis:24px;width:24px;height:24px}
  .ae-app--overview .ae-bottom-tile__data{font-size:10px;margin-top:4px}
  .ae-app--overview .ae-bottom-tile__degree{font-size:9px;margin-top:2px}
  .ae-app--overview .ae-bottom-tile__foot{font-size:9px}
  .ae-app--overview .ae-bottom-tile__art{top:34%;height:69%;width:90%;left:5%}
}
/* A browser docked to half a desktop monitor is both narrow AND short:
   keep the full five-card row below the two existing left-side panels. */
@media(min-width:701px) and (max-width:1059px) and (max-height:720px){
  .ae-app--overview .ae-bottom-five{height:clamp(84px,17dvh,112px);bottom:6px}
  .ae-app--overview .ae-bottom-tile{padding:5px 7px 5px}
  .ae-app--overview .ae-bottom-tile__heading{font-size:11px}
  .ae-app--overview .ae-bottom-tile__symbol{flex-basis:22px;width:22px;height:22px}
  .ae-app--overview .ae-bottom-tile__data{font-size:9px;margin-top:2px}
  .ae-app--overview .ae-bottom-tile__degree{font-size:8px;margin-top:1px}
  .ae-app--overview .ae-bottom-tile__foot{font-size:8px;padding-top:1px}
  .ae-app--overview .ae-bottom-tile__art{top:34%;height:68%}
}
@media(max-width:700px){
  /* Mobile is allowed to scroll; keep illustrated cards readable instead
     of forcing five narrow unusable columns into a phone-sized screen. */
  .ae-app--overview .ae-bottom-five{
    position:relative;bottom:auto;left:auto;right:auto;
    transform:none; /* mobile 2-column row remains centered */
    width:calc(100% - 12px);height:auto;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;margin:15px auto 8px;
  }
  .ae-app--overview .ae-bottom-tile{height:175px;padding:11px}
  .ae-app--overview .ae-bottom-tile__heading{font-size:16px}
  .ae-app--overview .ae-bottom-tile__symbol{flex-basis:34px;width:34px;height:34px}
  .ae-app--overview .ae-bottom-tile__data{font-size:12px}
  .ae-app--overview .ae-bottom-tile__degree{font-size:11px}
  .ae-app--overview .ae-bottom-tile__foot{font-size:10px}
}

/* Sun and Moon: measured values occupy the upper-right corner.
   Keep the original live template bindings; other three tiles stay unchanged. */
.ae-app--overview .ae-bottom-tile--sun .ae-bottom-tile__corner-value,
.ae-app--overview .ae-bottom-tile--moon .ae-bottom-tile__corner-value{
  position:absolute;
  z-index:3;
  top:clamp(7px,.74vw,12px);
  right:clamp(7px,.83vw,13px);
  margin:0;
  max-width:calc(100% - 16px);
  color:#823458;
  font:normal clamp(19px,1.75vw,28px)/1.05 Georgia,"Times New Roman",serif;
  letter-spacing:-.045em;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 7px rgba(255,255,255,.95);
  pointer-events:none;
}
.ae-app--overview .ae-bottom-tile--sun .ae-bottom-tile__heading,
.ae-app--overview .ae-bottom-tile--moon .ae-bottom-tile__heading{
  padding-top:0;
  max-width:calc(100% - clamp(64px,5.7vw,90px));
}
@media(min-width:701px) and (max-width:1059px){
  .ae-app--overview .ae-bottom-tile--sun .ae-bottom-tile__corner-value,
  .ae-app--overview .ae-bottom-tile--moon .ae-bottom-tile__corner-value{font-size:clamp(17px,2vw,22px)}
  .ae-app--overview .ae-bottom-tile--sun .ae-bottom-tile__heading,
  .ae-app--overview .ae-bottom-tile--moon .ae-bottom-tile__heading{padding-top:0;max-width:calc(100% - 65px)}
}
@media(max-width:700px){
  .ae-app--overview .ae-bottom-tile--sun .ae-bottom-tile__corner-value,
  .ae-app--overview .ae-bottom-tile--moon .ae-bottom-tile__corner-value{font-size:clamp(22px,5vw,29px)}
  .ae-app--overview .ae-bottom-tile--sun .ae-bottom-tile__heading,
  .ae-app--overview .ae-bottom-tile--moon .ae-bottom-tile__heading{padding-top:0;max-width:calc(100% - 78px)}
}

/* Dashboard structural layout: measured content determines vertical space.
   A grid track separates the aspect panel from the bottom five cards.
   Absolute decorative wheel and right rail retain their approved positions.
   When vertical room runs out, scroll the content rather than overlay it. */
@media(min-width:701px){
  .ae-app--overview .ae-main{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    align-content:stretch;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    /* Lower the entire five-card row by 10px without clipping or overlap. */
    padding-bottom:8px;
  }
  .ae-app--overview .ae-dash__intro{grid-column:1;grid-row:1}
  .ae-app--overview .ae-sky-summary{
    grid-column:1;grid-row:2;
    justify-self:start;
  }
  .ae-app--overview .ae-day-energies{
    grid-column:1;grid-row:3;
    justify-self:start;
    margin-bottom:12px;
  }
  .ae-app--overview .ae-bottom-five{
    position:relative;
    grid-column:1;grid-row:5;
    justify-self:start;
    align-self:end;
    flex:none;
    top:auto;bottom:auto;left:auto;right:auto;
    width:calc(100% - clamp(280px,24vw,388px) - 8px);
    max-width:100%;
    margin:0;
    transform:none;
  }
}
@media(min-width:701px) and (max-width:1059px){
  .ae-app--overview .ae-bottom-five{
    width:calc(100% - clamp(212px,27vw,285px) - 8px);
  }
}

/* The original five-cell grid now holds two unchanged luminary tiles and one
   three-cell-wide weekly calendar; no extra vertical row or scrollbar. */
.ae-app--overview .ae-bottom-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.ae-app--overview .ae-week-preview{
  grid-column:3 / span 3;
  align-self:stretch;
  min-width:0;min-height:0;box-sizing:border-box;
  display:flex;flex-direction:column;gap:clamp(3px,.45dvh,6px);
  padding:clamp(6px,.7vw,11px);
  border:1px solid #d5a8c2;border-radius:clamp(9px,.8vw,13px);
  background:linear-gradient(135deg,rgba(255,252,254,.97),rgba(242,219,233,.96));
  box-shadow:0 7px 22px #632c511c;
  overflow:hidden;
  color:#6d3654;
}
.ae-app--overview .ae-week-preview__head{display:flex;align-items:center;justify-content:space-between;gap:7px;flex:0 0 auto}
.ae-app--overview .ae-week-preview__head div{min-width:0}
.ae-app--overview .ae-week-preview__head span{display:block;font:800 clamp(8px,.65vw,10px)/1.25 "Segoe UI",sans-serif;letter-spacing:.08em;color:#a66c90}
.ae-app--overview .ae-week-preview__head strong{display:block;font:normal clamp(12px,1.05vw,17px)/1.2 Georgia,serif;margin-top:2px;color:#602747}
.ae-app--overview .ae-week-preview__head a{flex:0 0 auto;color:#804669;text-decoration:none;font:700 clamp(8px,.7vw,10px) "Segoe UI",sans-serif;white-space:nowrap}
.ae-app--overview .ae-week-preview__days{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(2px,.36vw,6px)}
.ae-app--overview .ae-week-preview__day{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:0;min-height:0;gap:clamp(1px,.4dvh,4px);
  padding:2px 0;
  border:1px solid #ead3e1;border-radius:5px;background:#fffaff;
  color:#7a4965;text-decoration:none;
}
.ae-app--overview .ae-week-preview__day:hover,.ae-app--overview .ae-week-preview__day:focus-visible{background:#f0dce9;outline:1px solid #a87393}
.ae-app--overview .ae-week-preview__day.is-weekend{background:#f3e2ee;border-color:#d9b5cd}
.ae-app--overview .ae-week-preview__day.is-today{background:#e8c9dd;border:2px solid #914b75;color:#5e2549}
.ae-app--overview .ae-week-preview__day-name{font:800 clamp(8px,.72vw,11px)/1.1 "Segoe UI",sans-serif}
.ae-app--overview .ae-week-preview__day strong{font:normal clamp(15px,1.45vw,24px)/1.05 Georgia,serif}
.ae-app--overview .ae-week-preview__day small{font:9px/1 "Segoe UI",sans-serif;color:#a17692}
.ae-app--overview .ae-week-preview__marks{display:flex;justify-content:center;gap:3px;min-height:5px}
.ae-app--overview .ae-week-preview__marks i,.ae-app--overview .ae-week-preview__foot i{display:inline-block;border-radius:50%;height:6px;width:6px}
.ae-app--overview .ae-week-preview .is-phase{background:#c79b5a}
.ae-app--overview .ae-week-preview .is-ingress{background:#9866a4}
.ae-app--overview .ae-week-preview__foot{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto;font:9px/1.15 "Segoe UI",sans-serif;color:#926982}
.ae-app--overview .ae-week-preview__foot span{display:inline-flex;align-items:center;gap:4px}
@media(min-width:701px) and (max-height:730px){
  .ae-app--overview .ae-week-preview{padding:5px 7px;gap:2px}
  .ae-app--overview .ae-week-preview__head strong{font-size:12px}
  .ae-app--overview .ae-week-preview__day strong{font-size:15px}
  .ae-app--overview .ae-week-preview__foot{font-size:8px}
}
@media(max-width:700px){
  .ae-app--overview .ae-week-preview{grid-column:1 / -1;min-height:175px;padding:10px}
  .ae-app--overview .ae-week-preview__day strong{font-size:20px}
}

/* Keep the original two-column mobile layout; the week takes the full row. */
@media(max-width:700px){
 .ae-app--overview .ae-bottom-five{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ae-app--overview .ae-week-preview{grid-column:1 / -1}
}
