/* Keep date calendar choices independent from generic text inputs. */
.field-date .field-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.field-date .calendar-toggle-row {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: .7rem;
  white-space: nowrap;
}

.field-date .radio-label {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  width: auto;
  min-height: unset;
  color: #404247;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1;
}

.field-date .radio-label input[type="radio"] {
  appearance: auto;
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  accent-color: #3977cf;
}

.field-date .radio-label span {
  width: auto;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.field-date .birth-pick-btn { width: 100%; }

/* Keep the professional-density chart legible while fitting a phone viewport. */
@media (max-width: 860px) {
  .field-date .field-date-head { align-items: flex-start; }
  .field-date .calendar-toggle-row { gap: .55rem; padding-top: .05rem; }

  .chart-scroll {
    overflow: hidden !important;
    margin: 0;
    padding-bottom: 0;
  }

  .chart-fit {
    width: 100% !important;
    height: auto !important;
    margin: 0;
  }

  .chart-board {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: .67 !important;
    transform: none !important;
  }

  .palace { padding: .48rem .5rem; }
  .palace-name { font-size: .85rem; }
  .palace-branch { font-size: .7rem; }
  .palace-stars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    justify-items: center;
    gap: .1rem .04rem;
    margin-top: .24rem;
    padding-bottom: 1.6rem;
  }
  .palace-stars .star { min-width: 0; }
  .star.major { font-size: .84rem; }
  .star.soft, .star.tough, .star.minor { font-size: .68rem; }
  .palace-stars .star:nth-child(n + 9) { display: inline-flex; }

  .palace-foot {
    position: absolute;
    display: block;
    left: .22rem;
    right: .22rem;
    bottom: .22rem;
    z-index: 2;
    margin: 0;
    color: #6b7078;
    font-size: .4rem;
    line-height: 1.1;
    text-align: center;
  }

  .palace-foot > div:first-child {
    display: block;
    white-space: nowrap;
  }

  .palace-foot strong {
    display: block;
    color: #a7231e;
    font-size: .56rem;
    line-height: 1;
  }

  .palace-foot span { display: block; margin-top: .08rem; font-size: .38rem; }
  .palace-cycle { display: none; }
  .center-card { padding: .58rem; }
  .center-title h3 { font-size: 1.05rem; }
  .center-title p { font-size: .58rem; }
  .birth-summary { gap: .24rem; }
  .summary-name { font-size: .82rem; }
  .summary-line { font-size: .64rem; }
  .summary-grid { gap: .32rem; margin-top: .25rem; }
  .summary-chip small { font-size: .48rem; }
  .summary-chip b { font-size: .66rem; }
  .chart-board .palace-stars .star .brightness { min-width: 11px; height: 11px; font-size: .42rem; }
  .chart-board .palace.is-body:after { font-size: .43rem; }
}

.flow-year.is-selected {
  background: #edf4ff;
  box-shadow: inset 0 -3px 0 #3977cf;
}

.chart-board .center-card { z-index: 1; }
.chart-board .triad-arrow-layer { z-index: 5; }
.chart-board .palace { z-index: 3; }
.chart-board .palace.is-active { z-index: 4; }
.triad-arrow-line.is-opposite { stroke: #5aa77a; }

.health-focus { margin-top: .55rem; padding: .5rem .56rem; border: 1px solid #d7e4f3; background: #f8fbff; color: #4e6074; font-size: .64rem; line-height: 1.65; }
.health-focus > b { display: block; color: #2d619e; font-size: .68rem; }
.health-focus p { margin: .25rem 0 0; }
.health-focus strong { color: #3f5269; }
.health-focus small { display: block; margin-top: .34rem; padding-top: .3rem; border-top: 1px dashed #cbd8e6; color: #718095; font-size: .57rem; line-height: 1.55; }
.domain-focus { margin-top: .55rem; padding: .5rem .56rem; border: 1px solid #d7e4f3; background: #f8fbff; color: #4e6074; font-size: .64rem; line-height: 1.65; }
.domain-focus > b { display: block; color: #2d619e; font-size: .68rem; }
.domain-focus p { margin: .25rem 0 0; }
.domain-focus strong { color: #3f5269; }
.domain-focus small { display: block; margin-top: .34rem; padding-top: .3rem; border-top: 1px dashed #cbd8e6; color: #718095; font-size: .57rem; line-height: 1.55; }
.domain-attention-years { margin-top: .48rem; padding-top: .42rem; border-top: 1px dashed #d7e0eb; color: #526276; font-size: .62rem; }
.domain-attention-years > b { color: #3f679c; }
.domain-attention-years ul { display: grid; gap: .22rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.domain-attention-years li { display: flex; gap: .28rem; align-items: baseline; }
.domain-attention-years li b { flex: 0 0 auto; color: #6b5a30; }
.flight-rules { margin: 0; border-bottom: 1px solid #e1e8f1; background: #fbfdff; }
.flight-rules summary { padding: .5rem .78rem; color: #3269ae; font-size: .66rem; font-weight: 700; cursor: pointer; user-select: none; }
.flight-rules ol { display: grid; gap: .35rem; margin: 0; padding: 0 .86rem .68rem 1.9rem; color: #5a6879; font-size: .61rem; line-height: 1.6; }
.flight-rules li { padding-left: .08rem; }
.flight-rules li b { display: block; color: #3d5875; font-size: .64rem; }
.flight-rules li span { display: block; }

.interpret-panel { max-width: 1040px; }
.interpret-header h2 { font-size: 1.35rem; }
.interpret-body { padding: 1.2rem; }
.interpret-overview h3,
.interpret-section-title { font-size: 1.16rem; }
.interpret-overview p { font-size: .94rem; line-height: 1.82; }
.interpret-badge { font-size: .78rem; }
.interpret-decade.detailed > header strong { font-size: 1.16rem; }
.interpret-decade.detailed > header span,
.decade-mutagen { font-size: .76rem; }
.decade-life { font-size: .88rem; line-height: 1.78; }
.decade-domain { padding: .86rem .9rem; }
.decade-domain-head b { font-size: 1rem; }
.decade-domain-head i { font-size: .72rem; }
.decade-domain > p { font-size: .88rem; line-height: 1.82; }
.domain-focus { padding: .7rem .74rem; font-size: .82rem; line-height: 1.78; }
.domain-focus > b { font-size: .92rem; }
.domain-focus small { font-size: .74rem; line-height: 1.65; }
.domain-attention-years { font-size: .8rem; line-height: 1.68; }
.domain-attention-years > b { font-size: .88rem; }
.domain-attention-years ul { gap: .36rem; }
.decade-evidence summary,
.flight-rules summary { font-size: .82rem; }
.decade-evidence ul,
.flight-rules ol { font-size: .78rem; line-height: 1.76; }
.flight-rules li b { font-size: .84rem; }

@media (max-width: 860px) {
  .interpret-header h2 { font-size: 1.24rem; }
  .interpret-body { padding: .9rem; }
  .interpret-overview p,
  .decade-life,
  .decade-domain > p { font-size: .9rem; }
  .decade-domain-head b { font-size: 1.02rem; }
  .domain-focus { font-size: .84rem; }
  .domain-attention-years { font-size: .82rem; }
  .decade-evidence ul,
  .flight-rules ol { font-size: .8rem; }
}

@media (max-width: 420px) {
  .field-date .field-date-head { gap: .35rem; }
  .field-date .calendar-toggle-row { gap: .42rem; }
  .field-date .radio-label { gap: .18rem; font-size: .72rem; }
  .palace { padding: .4rem; }
  .palace-name { font-size: .8rem; }
  .palace-stars { gap: .12rem .06rem; }
  .star.major { font-size: .8rem; }
}