.home-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "greet greet" "title badge" "voc voc";
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  margin-bottom: 20px;
}

.moon-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 8px 13px 8px 8px;
  flex-shrink: 0;
}
.moon-badge.is-full { border-color: var(--gold); background: linear-gradient(color-mix(in srgb, var(--gold) 9%, transparent), color-mix(in srgb, var(--gold) 9%, transparent)), var(--surface-base, transparent); }
.mb-copy { display: flex; flex-direction: column; line-height: 1.3; }
.mb-copy strong { font-size: 13px; }
.mb-copy span { font-size: 11px; color: var(--text-low); }
.mb-copy:has(.mb-sign) { line-height: 1.2; }
.mb-copy .mb-sign {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 0 7px 0 5px;
  border-radius: 99px;
  font-size: 10px;
  line-height: 13px;
  color: var(--text-mid);
  background: color-mix(in srgb, var(--purple-glow) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--purple-glow) 26%, transparent);
  white-space: nowrap;
}
.mb-sign-glyph { display: inline-flex; color: var(--purple-pale); }

.voc-line {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 16px;
  margin: -7.5px 0 5.5px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
}
.voc-line[hidden] { display: none; }

.home-head > .home-title { display: contents; }
.home-head .eyebrow { grid-area: greet; margin: 0; }
.home-head .home-title > h1 { grid-area: title; margin: 0; white-space: nowrap; }
.home-head .moon-badge { grid-area: badge; justify-self: end; }
.home-head .voc-line { grid-area: voc; margin: 0; }
.home-head .voc-line, .tle-pair > .voc-line { white-space: normal; }
.home-head .voc-detail > span, .tle-pair > .voc-line .voc-detail > span { overflow: visible; text-overflow: clip; }
.home-head:not(:has(.voc-line)) { grid-template-areas: "greet greet" "title badge"; }
.home-head[data-pair="voc"] { grid-template-areas: "greet greet" "title voc" "badge badge"; }
.home-head[data-pair="voc"] .voc-line { justify-self: end; }
.home-head[data-pair="voc"] .moon-badge { justify-self: start; }
.home-head[data-pair="moon-tight"] .moon-badge { min-width: 0; }
@media (max-width: 400px) {
  .home-head .voc-line { display: none; }
  .home-head, .home-head[data-pair] { grid-template-areas: "greet greet" "title badge"; }
  .home-head[data-pair] .moon-badge { justify-self: end; }
}
.home-title .h-serif { margin-bottom: 0; }
.voc-line {
  width: fit-content;
  max-width: 100%;
  height: auto;
  padding-inline-start: 10px;
  border-inline-start: 2px solid color-mix(in srgb, var(--purple-glow) 55%, transparent);
  line-height: normal;
}
.voc-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.voc-label {
  font-size: 8.5px;
  line-height: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-low);
  white-space: normal;
}
[dir="rtl"] .voc-label { letter-spacing: 0; font-size: 9.5px; }
.voc-detail { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; line-height: 14px; color: var(--text-hi); }
.voc-detail > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.voc-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purple-bright);
}
.voc-line.is-void { border-inline-start-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.voc-line.is-void .voc-label { color: var(--gold); }
.voc-line.is-void .voc-dot { background: var(--gold); box-shadow: 0 0 6px var(--gold-dim); }

.fit-screen :is(.moon-badge:not(.is-full), .dr-pill, .big-cell) {
  background: var(--surface-tint), var(--surface-base, transparent);
}


.big-cell .bg-label { letter-spacing: normal; }
.big-cell .bg-sign { transform: translateY(-0.02em); }

.big-cell.is-unknown .bg-sign { color: var(--text-low); }
.big-cell.is-unknown .bg-glyph { opacity: 0.5; }

.big-cell.is-swapped .bg-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 849px) {
  .home-head ~ .fit-flex {
    --wheel-w: min(100cqw, calc(0.78 * var(--screen-h)), 420px, calc(100cqh - var(--below-wheel)));
    --spare: max(0px, calc(100cqh - var(--wheel-w) - var(--below-wheel)));
    --gap-top: min(calc(var(--spare) / 3), 10px);
    --gap-rest: calc((var(--spare) - var(--gap-top)) / 2);
  }
  .home-head ~ .fit-flex > :first-child { margin-top: var(--gap-top); }
  .home-head ~ .fit-flex > .big-three {
    margin-top: calc(10px + var(--gap-rest));
    margin-bottom: calc(var(--cards-after) + var(--gap-rest));
  }
}
@media (max-width: 849px) and (max-height: 560px) {
  .home-head ~ .fit-flex { --wheel-w: min(100cqw, calc(0.62 * var(--screen-h)), 340px, calc(100cqh - var(--below-wheel))); }
}

.mw-rows { display: flex; flex-direction: column; padding: 4px 6px 8px; }
.mw-row { display: grid; grid-template-columns: 5.6em 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px; border-radius: var(--r-md); font-size: 13px; color: var(--text-mid); }
.mw-row.is-today { background: color-mix(in srgb, var(--purple-glow) 14%, transparent); color: var(--text-hi); }
.mw-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mw-glyph { display: inline-flex; justify-content: center; }
.mw-phase { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mw-phase strong { color: var(--text-hi); font-weight: 600; }
.mw-phase span { font-size: 11.5px; color: var(--text-low); }
.mw-sign { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; }
.mw-sign-glyph { display: inline-flex; color: var(--purple-pale); }