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

html, body { height: 100%; }

body { overscroll-behavior-y: none; }

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
}
.scroll {
  flex: 1;
  padding: var(--s-7) var(--s-4) var(--s-9);
  min-width: 0;
}

.muted { color: var(--muted); }

.block + .block { margin-top: var(--s-7); }

.verdict { margin: var(--s-4) 0 0; text-wrap: balance; }
.top { padding-top: var(--s-2); }
.para + .para { margin-top: var(--s-4); }

.rule { margin: var(--s-7) 0 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.card-sunken { background: var(--sunken); border-color: transparent; }

.chips { display: grid; grid-template-columns: repeat(3, 1fr);
         border-top: 1px solid var(--rule);
         border-bottom: 1px solid var(--rule); }
.chip {
  padding: var(--s-4) var(--s-3) var(--s-4) 0;
  min-height: var(--tap-min);
  display: flex; flex-direction: column; gap: var(--s-1);
  align-items: flex-start; justify-content: center;
}
.chip + .chip { border-left: 1px solid var(--rule); padding-left: var(--s-4); }

.mk { width: 1em; height: 1em; vertical-align: -.14em; color: var(--muted); }
.chip .mk { color: var(--ink); }

.chip .lvl { display: flex; align-items: center; gap: var(--s-2);
             color: var(--muted); }

details.why { margin-top: var(--s-6); }
details.why > summary {
  list-style: none; cursor: pointer;
  min-height: var(--tap-min);
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--muted);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
details.why > summary::-webkit-details-marker { display: none; }

details.why > summary .mk { margin-left: auto; width: .85em; height: .85em; }
details.why[open] > summary .mk-more { display: none; }
details.why:not([open]) > summary .mk-less { display: none; }
details.why > .why-body { padding: var(--s-5) 0 var(--s-2); }

.provwrap { display: flex; gap: var(--s-5); align-items: center;
            margin-bottom: var(--s-5); flex-wrap: wrap; }

.prov { display: grid; grid-template-columns: minmax(0, 1fr);
        gap: var(--s-1); min-width: 0; }
.prov .win { color: var(--muted); }
.prov .term { }
.prov .formula {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--muted);
}
.prov .formula svg { width: 1.15em; height: 1.15em; color: var(--ink); }

.prov .formula .fam.w-harmonious svg { color: var(--aspect-harmonious); }
.prov .formula .fam.w-tense      svg { color: var(--aspect-tense); }
.prov .formula .fam.w-neutral    svg { color: var(--aspect-neutral); }

.wordmark { display: block; height: 22px; width: auto; color: var(--ink);
            align-self: flex-start; }

.offer { margin-top: var(--s-8); }
.offer ul { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.offer li { padding: var(--s-3) 0; border-top: 1px solid var(--rule);
            text-wrap: pretty; }

.field-row { display: flex; align-items: center; justify-content: space-between;
             gap: var(--s-4); }
.field-row > span { margin: 0; flex: none; }
.field-row input { width: auto; flex: 1; max-width: 62%; }

.tiers { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.tiers.multi { grid-template-columns: 1fr 1fr; }

.resolved { margin: var(--s-2) 0 0;            color: var(--muted); }

.tier {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-1) var(--s-4);
  width: 100%; min-height: var(--tap-min); text-align: left;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--edge); border-radius: var(--r-sm);
  background: transparent; color: var(--ink); cursor: pointer;

}

.tier.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tier .tn { }
.tier .tp {            display: inline-flex; align-items: center; gap: var(--s-1);
            justify-self: end; }
.tier .tr, .tier .td {            color: var(--muted); }
.tier .td { justify-self: end; display: inline-flex; align-items: center;
            gap: var(--s-1); }

.tiers.multi .tier { grid-template-columns: 1fr; }
.tiers.multi .tier .tp, .tiers.multi .tier .td { justify-self: start; }

.pending { margin: var(--s-4) 0 0; padding-left: var(--s-4);
           border-left: 1px solid var(--rule); text-wrap: pretty; }

.receipt { margin-top: var(--s-6); }
.receipt .kvs { margin: var(--s-5) 0 0; }
.receipt .kv b { display: inline-flex; align-items: baseline; gap: var(--s-1); }

.receipt-thin {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--sunken); border-radius: var(--r-sm);
}
.receipt-thin .t-caption { flex: 1; min-width: 0; overflow: hidden;
                           text-overflow: ellipsis; white-space: nowrap; }
.receipt-thin .amt {                     display: inline-flex; align-items: center;
                     gap: var(--s-1); flex: none; }

.door { margin-top: var(--s-8); }

.reading .cover { padding-top: var(--s-4); }
.reading .cover .t-display { text-wrap: balance; }
.reading .cover-fig { margin-top: var(--s-7); display: flex;
                      justify-content: center; }
.cover-wheel { width: 100%; max-width: 300px; height: auto; }

.reading .sec { scroll-margin-top: var(--s-5); }
.reading .sec .t-title { margin: 0; }
.reading .sec .para { margin-top: var(--s-4); }

.reading .end { margin-top: var(--s-9); }
.reading .end .rule { display: block; width: var(--s-9); height: 0;
                      border-top: 1px solid var(--ink); margin: 0 0 var(--s-4); }
.reading .end p { margin: 0; text-wrap: pretty; }

.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--tap-min);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  background: var(--ink); color: var(--ground);
  cursor: pointer;
  transition: opacity var(--m-fast) var(--m-ease);
}
.btn:active { opacity: .82; }
.btn-quiet { background: transparent; color: var(--ink); }

.btn-ticket { justify-content: space-between; gap: var(--s-4);
              padding-inline: var(--s-5); }
.btn-ticket i { flex: 1; height: 1px; background: currentColor; opacity: .3; }
.btn-ticket .price {                     display: inline-flex; align-items: center; gap: var(--s-1); }
.mk.star { width: .82em; height: .82em; color: currentColor; }

.btn-danger { background: var(--danger-fill); color: var(--ink);
              border-color: var(--danger-edge); }

.tabs {
  position: sticky; bottom: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--ground);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  min-height: var(--tap-min);
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--muted);
}

.tab[aria-current="page"] { color: var(--ink); box-shadow: inset 0 2px 0 var(--ink); }

.screen { flex: 1; display: flex; flex-direction: column; min-height: 0;
          animation: enter var(--m-base) var(--m-ease) both; }
@keyframes enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.screen.leaving { animation: leave var(--m-fast) var(--m-ease) both; }
@keyframes leave { to { opacity: 0; } }

.sheet-back {
  position: fixed; inset: 0; background: var(--ink); opacity: 0;
  animation: fade var(--m-base) var(--m-ease) forwards; z-index: 10;
}
@keyframes fade { to { opacity: .38; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11;
  max-width: 480px; margin: 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: var(--s-4) var(--s-4) calc(var(--s-7) + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto;

  overscroll-behavior: contain;
  animation: rise var(--m-slow) var(--m-ease) both;
}
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
.sheet.closing { animation: sink var(--m-base) var(--m-ease) both; }
@keyframes sink { to { transform: translateY(100%); } }
.sheet-grip {
  width: 36px; height: 4px; border-radius: var(--r-sm);
  background: var(--rule); margin: 0 auto var(--s-5);
}
.sheet h2 { margin: 0; }
.sheet .close {
  margin-top: var(--s-6); width: 100%; min-height: var(--tap-min);
  background: none; border: 1px solid var(--edge); border-radius: var(--r-sm);
  color: var(--ink);  cursor: pointer;
}

.w-hit { fill: transparent; cursor: pointer; }
.w-hit:focus-visible { fill: var(--sunken); }

.sk { background: var(--sunken); border-radius: var(--r-sm); }
.sk-line { height: 1em; margin-top: var(--s-2); }
@media (prefers-reduced-motion: no-preference) {
  .sk { animation: pulse 1.6s var(--m-ease) infinite; }
  @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
}

.wheel {
  --w-hair: 1;
  --w-tick: 1.5;
  --w-chord: 1.6;
  display: block; width: 100%; height: auto;
}

.wheel-compact { --w-hair: 2; --w-tick: 3; --w-chord: 3.2; }

.w-ring, .w-div, .w-house, .w-tick { fill: none; stroke: var(--draw); }
.w-ring, .w-ring-inner, .w-div { stroke-width: var(--w-hair); }
.w-house { stroke-width: var(--w-hair); stroke-dasharray: 2 4; }
.w-tick { stroke: var(--muted); stroke-width: var(--w-tick); }
.w-body, .w-transit, .w-sign, .w-am { color: var(--ink); }
.w-transit, .w-sign { color: var(--muted); }
.w-knock { fill: var(--ground); }
.w-asp { stroke-width: var(--w-chord); opacity: var(--chord-alpha); fill: none; }
.w-harmonious { color: var(--aspect-harmonious); stroke: var(--aspect-harmonious); }
.w-tense      { color: var(--aspect-tense);      stroke: var(--aspect-tense); }
.w-neutral    { color: var(--aspect-neutral);    stroke: var(--aspect-neutral); }

.w-lc-harmonious { stroke-width: calc(var(--w-chord) * .85); }
.w-lc-tense      { stroke-width: calc(var(--w-chord) * 1.6); }
.w-lc-neutral    { stroke-width: calc(var(--w-chord) * .85);
                   stroke-dasharray: 3 3; }
.w-neutral:not(.w-lc-neutral) { stroke-dasharray: 3 3; }

.w-asp.w-hero { opacity: 1; stroke-width: calc(var(--w-chord) * 2.2); }
.w-asp.w-ground { opacity: .2; stroke-width: calc(var(--w-chord) * .7); }
.w-lead { color: var(--ink); }
line.w-tick.w-lead { stroke: var(--ink); stroke-width: calc(var(--w-tick) * 1.5); }

.chartlet { width: 100%; max-width: 168px; height: auto; flex: none; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
          margin-top: var(--s-4); }
.legend span { display: flex; align-items: center; gap: var(--s-2);
               color: var(--muted); }
.legend i { width: 22px; height: 0; border-top-width: 2px;
            border-top-style: solid; display: inline-block; }

table.bodies { width: 100%; border-collapse: collapse; margin-top: var(--s-5); }
table.bodies td { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule);
                  }
table.bodies td:first-child { width: 1.6em; }
table.bodies svg { width: 1.15em; height: 1.15em; color: var(--ink); }
table.bodies .nm { }
table.bodies .dg { text-align: right; white-space: nowrap; color: var(--muted); }

.note { border-left: 2px solid var(--ink); padding-left: var(--s-5); }
.note p { margin: 0; }

.field { display: block; margin-top: var(--s-5); }
.field > span { display: block; color: var(--muted); }
.field input, .field select {
  width: 100%; min-height: var(--tap-min); margin-top: var(--s-1);
  padding: var(--s-3); background: var(--surface); color: var(--ink);
  border: 1px solid var(--edge); border-radius: var(--r-sm);
}
.steps { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.steps i { flex: 1; height: 2px; background: var(--rule); }
.steps i.on { background: var(--ink); }

.footer { margin-top: var(--s-9); padding-top: var(--s-5);
          border-top: 1px solid var(--rule); }

.footer p { margin: 0 0 var(--s-3);
            color: var(--muted); }

.footer .links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.footer a { color: var(--muted); display: inline-flex; align-items: center;
            min-height: var(--tap-min); }

.centered { min-height: 100%; display: grid; place-items: start stretch;
            padding: var(--s-7); text-align: left; }

.has-sky { display: flex; flex-direction: column; position: relative;
           overflow: hidden; }
.has-sky > .centre { position: relative; z-index: 1; flex: 1;
                     display: flex; flex-direction: column;
                     justify-content: center; }

.sheet-head { display: flex; align-items: center; gap: var(--s-4);
              margin-bottom: var(--s-5); }
.sheet-head svg.big { width: 34px; height: 34px; color: var(--ink); }
.kv { display: flex; justify-content: space-between; align-items: baseline;
      gap: var(--s-4); padding: var(--s-3) 0;
      border-bottom: 1px solid var(--rule); }
.kv span {           color: var(--muted); }

.kv b svg, .sheet svg.fam { width: 1.1em; height: 1.1em; vertical-align: -.12em; }
.fam.w-harmonious, .fam.w-harmonious svg { color: var(--aspect-harmonious); }
.fam.w-tense,      .fam.w-tense svg      { color: var(--aspect-tense); }
.fam.w-neutral,    .fam.w-neutral svg    { color: var(--aspect-neutral); }
.screen.still { animation: none; }

.sky {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; color: var(--ink); pointer-events: none;
  animation: skyin var(--m-slow) var(--m-ease) both;
}

@keyframes skyin { from { opacity: 0; } to { opacity: inherit; } }

.sky { opacity: .62; }
:root[data-theme="dark"] .sky,
:root:not([data-theme="light"]) .sky { opacity: .92; }

.sky-horizon { stroke: var(--muted); stroke-width: 1; opacity: .65; }
.has-sky .btn { background: var(--ink); }

body.has-main .btn-ticket,
body.has-main [data-act="generate"],
body.has-main [data-act="next"] { display: none; }

.chip-none { color: var(--muted); }

.consent { margin-top: var(--s-6); text-align: left; }
.cbox {
  display: flex; align-items: flex-start; gap: var(--s-4);
  width: 100%; min-height: var(--tap-min); padding: var(--s-2) 0;
  border: 0; background: transparent; color: var(--ink);
  text-align: left; cursor: pointer;
}
.cbox .tick {
  flex: none; width: 22px; height: 22px; margin-top: .12em;
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.cbox .tick .mk { width: 16px; height: 16px; color: var(--ink); }
.cbox .ctext { text-wrap: pretty; }
.cbox a { color: var(--ink); }

.consent.nagging .cbox .tick { border-color: var(--danger-edge);
                               box-shadow: 0 0 0 2px var(--danger-edge); }
.refund { margin: var(--s-2) 0 0 calc(22px + var(--s-4)); text-wrap: pretty; }

.nag { margin: var(--s-2) 0 0 calc(22px + var(--s-4));
       display: flex; gap: var(--s-3); align-items: baseline; }

.nag-sign { flex: 0 0 auto; color: var(--danger-mark); }

.factlist { margin: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
.factlist div { display: grid; gap: var(--s-1); }
.factlist dt, .factlist dd { margin: 0; }
.factlist dt { color: var(--muted); }

.arch { margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.arow-day {
  display: grid; gap: var(--s-1); justify-items: start;
  width: 100%; min-height: var(--tap-min); padding: var(--s-4) 0;
  text-align: left; background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.ad-when, .ad-kind { color: var(--muted); }
.ad-verdict { text-wrap: pretty; }

.why-all { margin-top: var(--s-8); }
.why-one + .why-one { margin-top: var(--s-6);
                      padding-top: var(--s-6);
                      border-top: 1px solid var(--rule); }

.topbar-stamp { color: var(--ink); }

.gen { margin-top: var(--s-6); }
.gsteps { list-style: none; margin: var(--s-5) 0 0; padding: 0;
          display: grid; gap: var(--s-4); }
.gstep { display: flex; align-items: baseline; gap: var(--s-3);
         color: var(--muted); }
.gstep.on { color: var(--ink); }
.gstep-mark { flex: 0 0 auto; width: 16px; height: 16px;
              display: inline-flex; align-items: center; justify-content: center; }
.gstep-mark .mk { width: 16px; height: 16px; color: var(--ink); }

.leave { margin-top: var(--s-8); }

.qrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); width: 100%; min-height: var(--tap-min);
  margin-top: var(--s-7); padding: var(--s-3) 0;
  border: 0; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: transparent; color: var(--muted);
  text-align: left; cursor: pointer;
}
.qrow .mk { color: var(--muted); }

.danger-foot { margin-top: var(--s-10); padding-top: var(--s-5);
               border-top: 1px solid var(--rule); }
.card.danger { margin-top: var(--s-10); border-color: var(--danger-edge); }

.legal-line p { margin: 0; }
.legal-line .links { margin-top: var(--s-2); }

.chart-head { margin: var(--s-5) 0 0; text-wrap: balance; }

.sec-h { margin: 0 0 var(--s-2); }
.sec-note { margin: 0 0 var(--s-4); text-wrap: pretty; }
.rows { display: grid; }

.prow, .arow, .place {
  display: grid; align-items: center; gap: var(--s-3);
  width: 100%; min-height: var(--tap-min); padding: var(--s-3) 0;
  border: 0; border-bottom: 1px solid var(--rule);
  background: transparent; color: var(--ink); text-align: left;
  cursor: pointer;
}

.prow { grid-template-columns: 1.4em auto 1.2em minmax(0, 1fr) auto auto auto; }
.arow { grid-template-columns: 1.2em 1fr auto; }

.place { grid-template-columns: minmax(0, 1fr) auto; }
.place .nm { min-width: 0; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.prow .g, .prow .sg, .arow .g { width: 1.1em; height: 1.1em; color: var(--ink); }
.prow .sg { color: var(--muted); }
.prow .nm { white-space: nowrap; }
.arow .nm { min-width: 0; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.prow .sn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 344px) {
  .prow { grid-template-columns: 1.4em auto 1.2em auto auto auto; }
  .prow .sn { display: none; }
}
.prow .sn, .prow .dg, .prow .hs, .arow .dg, .place .dg {
  color: var(--muted); white-space: nowrap;
}
.prow .hs { min-width: 4.4em; text-align: right; }
.prow .dg { min-width: 4.2em; text-align: right; }
.arow .dg { min-width: 3.6em; text-align: right; }
.arow .fam.w-harmonious { color: var(--aspect-harmonious); }
.arow .fam.w-tense      { color: var(--aspect-tense); }
.arow .fam.w-neutral    { color: var(--aspect-neutral); }

.prow.on, .arow.on { box-shadow: inset 2px 0 0 var(--ink); padding-left: var(--s-3); }

.agroup + .agroup { margin-top: var(--s-6); }
.agroup > .t-micro { padding-bottom: var(--s-2); }

.w-pickring { fill: none; stroke: var(--ink); stroke-width: 1.5; }

.no-time { margin: var(--s-4) 0 0; }
.no-time p { margin: 0; text-wrap: pretty; }
.linkish {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding: 0; border: 0; background: transparent; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.prow.no-house { grid-template-columns: 1.4em auto 1.2em minmax(0, 1fr) auto auto; }
@media (max-width: 344px) {
  .prow.no-house { grid-template-columns: 1.4em auto 1.2em auto auto; }
}

.chosen-none { display: block; }
.chosen-none > span { display: block;                      color: var(--muted); }

.notice, .offline { margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4);
           background: var(--sunken); border-radius: var(--r-sm);
           text-wrap: pretty; }
.nag-wide { margin-left: 0; }

.dayhead { position: relative; }
.band { position: relative; height: 150px; margin-bottom: var(--s-5);
        overflow: hidden; }
.band .sky { position: absolute; inset: 0; }
.dayhead-body { position: relative; }
.dayhead .verdict { margin: var(--s-3) 0 0; }

.evidence { margin-top: var(--s-6); }

.evidence .provwrap { margin-bottom: 0; flex-wrap: nowrap; align-items: center; }

.evidence .chartlet { width: clamp(104px, 40%, 152px); }
.evidence .prov { flex: 1; min-width: 0; }

.buys { margin-top: var(--s-5); padding-left: var(--s-4);
        border-left: 1px solid var(--rule); }
.buys dl { margin: var(--s-3) 0 0; display: grid; gap: var(--s-3); }
.buys dt { }
.buys dd { margin: var(--s-1) 0 0;           color: var(--muted); text-wrap: pretty; }

.month + .month { margin-top: var(--s-8); }
.wdays, .dgrid { display: grid; grid-template-columns: repeat(7, 1fr); }
.wdays { gap: var(--s-1); margin-bottom: var(--s-2); }
.wdays span {              color: var(--muted);
              text-align: center; }
.dgrid { gap: var(--s-1); }
.pad { display: block; }

.dcell {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s-2);
  min-height: var(--tap-min); padding: var(--s-2) 0;
  border: 0; background: transparent; cursor: pointer;
}

.sky .w-nasp, .w-nasp { stroke-width: .6; opacity: .5; }
.w-config { fill: none; stroke: currentColor; stroke-width: .5; opacity: .35; }
.w-cfg-grand-trine { color: var(--aspect-harmonious); }
.w-cfg-t-square    { color: var(--aspect-tense); }
.w-cfg-yod         { color: var(--aspect-neutral); }

.theme { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.theme .tsw {
  flex: 1 1 0; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge); border-radius: 2px;
  background: transparent; color: var(--muted); cursor: pointer;
  min-height: var(--tap-min);
}
.theme .tsw.on { border-color: var(--ink); color: var(--ink); }

.prow .rx { color: var(--muted); }
.prow .rx svg { width: 1em; height: 1em; }

.dcell .dn {             color: var(--muted); }

.dcell.shut { cursor: default; }

.dcell.future-paid .dn { color: var(--muted); opacity: .55; }
.dcell.future-paid::after {
  content: ""; display: block; width: 62%; height: 0;
  margin-top: var(--s-2);
  border-top: 1px dotted var(--aspect-neutral); opacity: .7;
}

.dcell .dm { display: block; width: 62%; height: 0;
             border-top-width: calc(1px + var(--w) * 3px);
             border-top-style: solid; }
.dcell .dm.w-harmonious { border-color: var(--aspect-harmonious); }
.dcell .dm.w-tense      { border-color: var(--aspect-tense); }

.fam.w-minor, .w-minor { color: var(--aspect-minor); stroke: var(--aspect-minor);
                         border-color: var(--aspect-minor); }

.formula .deg { color: var(--muted); }
.dcell .dm.w-neutral    { border-color: var(--aspect-neutral);
                          border-top-style: dashed; }

.dcell.paid .dn { color: var(--ink); text-decoration: underline;
                  text-underline-offset: 2px; }

.dcell.owned { position: relative; }
.dcell.owned .dn { color: var(--ink); }
.dcell.owned::after { content: ""; position: absolute; bottom: var(--s-1);
                      width: 3px; height: 3px; border-radius: 50%;
                      background: var(--ink); }

.reading-body .para.lead { }
.reading-body .para.lead + .para { margin-top: var(--s-5); }

.see-in-chart { margin-top: 0; }

.building svg.wheel { --draw-ms: 1400ms; }
.building .w-ring, .building .w-ring-inner, .building .w-div,
.building .w-house {
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  animation: draw var(--draw-ms) var(--m-ease) forwards;
}
.building .w-body, .building .w-transit, .building .w-sign, .building .w-am,
.building .w-asp, .building .w-tick, .building .w-knock, .building .w-hit {
  opacity: 0; animation: settle var(--m-slow) var(--m-ease) 1100ms forwards;
}
@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes settle { to { opacity: 1; } }

.building .w-asp { animation-name: settle-chord; }
@keyframes settle-chord { to { opacity: var(--chord-alpha); } }

@media (prefers-reduced-motion: reduce) {
  .building .w-ring, .building .w-ring-inner, .building .w-div,
  .building .w-house { stroke-dasharray: none; stroke-dashoffset: 0;
                       animation: none; }
  .building .w-body, .building .w-transit, .building .w-sign, .building .w-am,
  .building .w-tick, .building .w-knock, .building .w-hit { opacity: 1;
                                                            animation: none; }
  .building .w-asp { opacity: var(--chord-alpha); animation: none; }
}

.key { margin-top: var(--s-5); padding-top: var(--s-4);
       border-top: 1px solid var(--rule); }
.key .legend { margin: 0; color: var(--ink); }
.key .why { margin-top: var(--s-4); }
.key p { margin: var(--s-3) 0 0; }
.chart-head + .no-time { margin-top: var(--s-3); }

.reading .cover .band-cover { margin-bottom: var(--s-6); }

.provline { display: flex; flex-wrap: wrap; align-items: baseline;
            gap: var(--s-2) var(--s-4); }
.provline .formula { display: inline-flex; align-items: center;
                     gap: var(--s-2); flex: 0 0 auto; }
.provline .formula svg { width: 1.15em; height: 1.15em; color: var(--ink); }
.provline .formula .fam.w-harmonious svg { color: var(--aspect-harmonious); }
.provline .formula .fam.w-tense      svg { color: var(--aspect-tense); }
.provline .formula .fam.w-neutral    svg { color: var(--aspect-neutral); }
.provline .term { flex: 0 0 auto; }
.provline .pair { color: var(--muted);
                  flex: 1 1 auto; min-width: 0; }
.provline .orb { color: var(--muted);
                 flex: 0 0 auto; }

.proofline { margin: var(--s-5) 0; padding-left: var(--s-4);
             border-left: 2px solid var(--rule);
             display: grid; gap: var(--s-3); justify-items: start; }

.dayhead { padding-top: var(--s-6); }
.doorline { margin: var(--s-4) 0 0; color: var(--muted); }
.doorline .linkish { color: var(--ink); }

.reading-body + .chips { margin-top: var(--s-8); }
.chips { display: block; border-bottom: none; }

.chip { flex-direction: column; align-items: start;
        justify-content: start; gap: var(--s-2);
        padding: var(--s-4) 0; }
.chip + .chip { border-left: none; padding-left: 0;
                border-top: 1px solid var(--rule); }
.chip .lvl { color: var(--muted); }

.chip b.chip-none { color: var(--muted); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin: 0;
  min-height: var(--tap-min);
}

.topbar + .dayhead { padding-top: var(--s-4); }
.topbar-title {
  flex: 1 1 auto; text-align: center;
  color: var(--muted);
}
.icon-btn, .icon-btn-space {
  flex: 0 0 auto;
  width: var(--tap-min); height: var(--tap-min);
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn .mk { width: 20px; height: 20px; }
.icon-btn:active { opacity: .55; }

.mlist { display: block; }
.mrow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label go" "hint go";
  align-items: center;
  column-gap: var(--s-4);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s-4) 0;
  background: none; border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.mrow-label { grid-area: label; }
.mrow-hint { grid-area: hint; margin-top: 2px; }
.mrow .mk-go {
  grid-area: go;
  width: 16px; height: 16px;
  color: var(--muted);
}
.mrow:active { opacity: .6; }

.mrow-gap { height: var(--s-6); }

.kv {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-5) 0;
}
.kv dt { margin: 0; }
.kv dd { margin: 0; text-align: right; }

.hero-wheel {
  display: flex; justify-content: flex-start;
  width: 100%; padding: var(--s-4) 0 var(--s-2);
  background: none; border: 0;
  cursor: pointer;

}

.hero-wheel.hero-wide {
  margin-inline: calc(var(--s-4) * -1);
  width: calc(100% + var(--s-4) * 2);
}

.hero-wheel:not(.hero-wide) { justify-content: center; }
.hero-wheel:not(.hero-wide) .chartlet { max-width: 300px; }
.hero-wheel:active { opacity: .7; }

.hero-wheel .wheel-fragment {
  width: 100%; max-width: none;

  max-height: 240px;
  --w-hair: 1; --w-tick: 2; --w-chord: 2.2;
}

.proofline.hero-proof { margin-top: var(--s-2); }

.spent { margin-top: var(--s-6); }