/* ============================================================
   HOME DASHBOARD — «Небо сегодня» + «Ваши транзиты»
   Reuses tokens.css (surfaces, aspect/element colors, fonts) and the
   glyph/mono/element/aspect color utilities from chart.css.
   Loaded after chart.css.
   ============================================================ */

/* .dash is the scroll container — the parent .screen is overflow:hidden and
   the dashboard is taller than the viewport. Content is centred to 960px;
   the scrollbar sits at the viewport edge. */
.dash{
  position:relative; height:100%; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:28px 20px calc(env(safe-area-inset-bottom) + 40px);
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.dash-topbar,.dash-grid,.dash-loading,.dash .home-foot{
  width:100%; max-width:1200px;
}
/* keep the decorative rings fixed behind the scrolling content */
.dash .home-deco{ position:fixed; inset:0; opacity:.5; }
/* footer flows after the cards instead of overlaying the viewport bottom */
.dash .home-foot{ position:static; left:auto; right:auto; bottom:auto; margin-top:4px; }

/* — top bar: logo · date · enter — */
.dash-topbar{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:16px;
  padding-bottom:6px; border-bottom:1px solid var(--line-soft);
}
.dash-date{
  font-family:var(--font-serif); font-style:italic;
  font-size:18px; color:var(--ink-dim); letter-spacing:.01em;
  text-transform:lowercase;
}
.dash-enter{ margin-left:auto; }

/* — grid of cards — */
.dash-grid,.dash-loading{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:18px;
}
@media (min-width:760px){
  .dash-grid,.dash-loading{ grid-template-columns:1fr 1fr; align-items:start; }
}

.dash-card{
  background:var(--card); border:1px solid var(--card-bd);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:20px 20px 22px;
}
.dash-h{
  font-family:var(--font-serif); font-weight:500;
  font-size:22px; color:var(--ink); margin:0 0 16px;
  display:flex; align-items:baseline; gap:10px;
}
.dash-h-sub{
  font-family:var(--font-hand); font-size:19px; color:var(--accent);
  font-weight:400;
}
.sky-sub-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin:2px 0 9px;
}

/* — skeletons — */
.dash-skeleton{ min-height:220px; opacity:.5;
  background:linear-gradient(100deg,var(--card) 30%,var(--card-2) 50%,var(--card) 70%);
  background-size:200% 100%; animation:dashShimmer 1.4s var(--ease) infinite; }
@keyframes dashShimmer{ from{background-position:200% 0} to{background-position:-200% 0} }

/* ---------------- SKY TODAY ---------------- */
.sky-lums{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.sky-lum{
  flex:1 1 140px; display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line);
}
.sky-lum-glyph{ font-size:26px; color:var(--accent); line-height:1; }
.sky-lum-title{ font-size:14.5px; color:var(--ink); font-weight:600; }
.sky-lum-sub{
  display:flex; align-items:center; gap:6px; margin-top:3px;
  font-size:13px; color:var(--ink-dim);
}
.sky-lum-sub .glyph{ font-size:15px; }
.sky-lum-sub .sep,.detail-pos .sep{ color:var(--ink-ghost); }

.retro-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.retro-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--r-pill);
  background:var(--card-2); border:1px solid var(--card-bd);
  font-size:13px; color:var(--ink-dim);
}
.retro-chip .glyph{ font-size:15px; color:var(--ink); }
.sky-body{ display:inline-flex; align-items:center; gap:5px; }
.retro-mark{ color:var(--asp-square); font-weight:600; }

.sky-ahead{ margin-top:18px; }
.ahead-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.ahead-row{
  display:flex; align-items:baseline; gap:12px;
  padding:7px 2px; border-top:1px solid var(--line-soft); font-size:13.5px;
}
.ahead-row:first-child{ border-top:0; }
.ahead-when{ flex:0 0 54px; color:var(--ink-faint); font-size:12.5px; }
.ahead-what{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--ink-dim); }
.ahead-what .glyph{ font-size:15px; color:var(--ink); }
.ahead-verb{ color:var(--ink-faint); }
.station-retro{ color:var(--asp-square); }
.station-direct{ color:var(--dig-domicile); }

/* ---------------- TRANSITS ---------------- */
.tr-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.tr-row{
  padding:12px 14px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--tr-accent,var(--line));
}
.tr-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.tr-pair{ display:inline-flex; align-items:center; gap:5px; font-size:17px; }
.tr-pair .glyph{ color:var(--ink); }
.tr-pair .asp-glyph{ font-size:14px; }
.tr-title{ font-size:14px; color:var(--ink); }
.tr-natal-tag{
  margin-left:6px; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:1px 6px;
}
.tr-orb{ margin-left:auto; font-size:12.5px; color:var(--ink-faint); }
.tr-tag{
  font-size:11px; padding:2px 9px; border-radius:var(--r-pill);
  border:1px solid var(--tr-accent,var(--line)); color:var(--tr-accent,var(--ink-dim));
}
.tr-theme{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:9px; font-size:13px; color:var(--ink-dim);
}
.tr-kw{ color:var(--ink); }
.tr-theme-dash{ color:var(--ink-ghost); }
.tr-note{ margin:6px 0 0; font-size:12.5px; color:var(--ink-faint); line-height:1.45; }

/* aspect accent per row (drives left border + tag) */
.tr-row.asp-bd-conjunction{ --tr-accent:var(--asp-conjunction); }
.tr-row.asp-bd-sextile{ --tr-accent:var(--asp-sextile); }
.tr-row.asp-bd-square{ --tr-accent:var(--asp-square); }
.tr-row.asp-bd-trine{ --tr-accent:var(--asp-trine); }
.tr-row.asp-bd-opposition{ --tr-accent:var(--asp-opposition); }
.tr-row.asp-bd-quincunx{ --tr-accent:var(--asp-quincunx); }
.tr-row.asp-bd-semisextile{ --tr-accent:var(--asp-semisextile); }