/* 时位四柱｜移动端第一轮 0.8
   原则：只调整信息层级与手机适配，不改变既有文化视觉体系。 */

.location-cascade-field{
  grid-column:span 2;
  min-width:0;
}
.location-field-title{
  display:block;
  margin-bottom:8px;
  color:#675f55;
  font-size:13px!important;
  line-height:1.5!important;
  letter-spacing:.06em;
}
.location-cascade{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
.location-cascade label{min-width:0}
.location-cascade label small{
  display:block;
  margin:0 0 5px;
  color:#8a8176;
  font-size:11px!important;
  line-height:1.35!important;
}
.location-cascade select{
  width:100%;
  height:48px;
  padding:0 34px 0 12px;
  border:1px solid #cfc6b8;
  border-radius:6px;
  background:#fffefa;
  color:#2d2a25;
  font-size:14px!important;
  line-height:1.35!important;
  appearance:auto;
}
.location-cascade-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
}
.location-cascade-actions small{
  color:#7a7268;
  font-size:11px!important;
  line-height:1.55!important;
}
#location-custom-button{
  height:auto!important;
  min-height:32px;
  padding:5px 10px!important;
  border:1px solid #cfc6b8;
  background:#f8f4ec!important;
  color:#675f55;
  font-size:11px!important;
  white-space:nowrap;
}

/* 节气：主页面只保留“处于哪个节气阶段”的结论，天文细节作为依据展开。 */
.terms-head{
  position:relative;
  gap:18px;
}
.term-detail-toggle{
  align-self:center;
  flex:none;
  min-width:118px;
  padding:7px 12px;
  border:1px solid #cfc6b8;
  background:#f7f2e9;
  color:#6c5e50;
  cursor:pointer;
  font-size:12px!important;
  line-height:1.4!important;
}
.term-detail-wrap[hidden]{display:none!important}
.term-detail-wrap{border-top:1px solid #e1dbd1}

/* 岁运在手机上作为第二层信息，默认折叠；桌面端保持原样。 */
.fortune-mobile-toggle{display:none}

@media(max-width:850px){
  .location-cascade-field{grid-column:1 / -1}
}

@media(max-width:760px){
  /* 出生地点：手机端按省—市—县区纵向选择，避免大列表溢出。 */
  .location-cascade{
    grid-template-columns:1fr;
    gap:10px;
  }
  .location-cascade label small{font-size:12px!important}
  .location-cascade select{
    height:48px;
    font-size:15px!important;
  }
  .location-cascade-actions{
    align-items:flex-start;
    flex-direction:column;
  }
  #location-custom-button{align-self:flex-start}

  /* 节气结论优先，详情退到第二层。 */
  .solar-terms-panel{margin-inline:0!important}
  .terms-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    padding:18px 16px!important;
  }
  .terms-head strong{font-size:20px!important}
  .terms-head small{font-size:12px!important;line-height:1.65!important}
  .term-detail-toggle{
    width:100%;
    min-height:40px;
    text-align:center;
  }
  .term-detail-wrap .terms-strip{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    overflow:visible!important;
  }
  .term-detail-wrap .terms-strip article{
    min-width:0!important;
    padding:14px 12px!important;
  }
  .term-detail-wrap .jie-distance{
    display:grid!important;
    gap:6px;
    padding:14px 16px!important;
  }

  /* 基本命盘：保留我们的纸张与朱砂体系，只借鉴成熟产品的手机信息结构。 */
  .chart-section{
    padding:48px 12px 54px!important;
  }
  .chart-section .section-heading{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:12px!important;
    margin-bottom:18px!important;
  }
  #chart-pillars{
    width:100%;
    font-size:clamp(22px,6.7vw,27px)!important;
    line-height:1.22!important;
    letter-spacing:.055em!important;
    white-space:nowrap;
  }
  .chart-summary{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
  }
  .chart-summary span{
    padding:5px 8px!important;
    font-size:11px!important;
  }
  .chart-grid{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:54px repeat(4,minmax(0,1fr))!important;
    overflow:hidden!important;
  }
  .row-labels,.chart-grid article{
    min-width:0!important;
    grid-template-rows:34px 60px 60px minmax(46px,auto) minmax(46px,auto) 38px 38px minmax(88px,auto)!important;
  }
  .row-labels span{
    justify-content:center!important;
    padding:0 3px!important;
    text-align:center!important;
    font-size:10px!important;
    line-height:1.25!important;
  }
  .chart-grid article>*{
    min-width:0!important;
    padding:4px 3px!important;
    text-align:center!important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .chart-grid article>strong{
    font-size:34px!important;
    line-height:1!important;
  }
  .pillar-label{
    letter-spacing:.04em!important;
    font-size:10.5px!important;
    line-height:1.25!important;
    white-space:normal!important;
  }
  .pillar-label em{
    display:block;
    margin:0!important;
    font-size:9px!important;
    line-height:1.2!important;
  }
  .chart-grid article>span:not(.pillar-label){
    font-size:10.5px!important;
    line-height:1.35!important;
  }

  .chart-grid article>.pillar-star-list{white-space:pre-line!important;overflow-wrap:normal!important;word-break:keep-all!important;color:#9a7441!important;font-size:10px!important;line-height:1.55!important;padding-top:7px!important;padding-bottom:7px!important}
  .chart-tools{
    flex-wrap:wrap!important;
    gap:0!important;
    margin-top:12px!important;
  }
  .chart-tools button,.chart-tools a{
    flex:1 1 20%;
    padding:10px 3px!important;
    text-align:center;
    font-size:11px!important;
  }
  .chart-tools>span{display:none!important}

  /* 岁运第二层入口。 */
  .fortune-mobile-toggle{
    width:100%;
    margin:24px 0 0;
    padding:14px 16px;
    border:1px solid #d5cec3;
    background:#fbfaf6;
    color:#2d2a25;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    text-align:left;
  }
  .fortune-mobile-toggle strong{
    font-family:var(--font-serif);
    font-size:18px!important;
    font-weight:500;
    letter-spacing:.06em;
  }
  .fortune-mobile-toggle small{
    color:#8a8176;
    font-size:11px!important;
    text-align:left;
  }
  .fortune-mobile-toggle span{
    color:var(--red);
    font-size:12px!important;
  }
  #fortune-panel[hidden]{display:none!important}

  /* 五行等后续内容不再横向撑出屏幕。 */
  .five-panel{
    grid-template-columns:1fr!important;
    gap:22px!important;
    padding:22px 16px!important;
  }
  .five-title{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
    gap:12px!important;
  }
  .element-bars{min-width:0!important}

  /* 手机端页面禁止由内部组件制造整页横向滚动。 */
  html,body{max-width:100%;overflow-x:hidden}
  main{max-width:100%;overflow-x:clip}
}

@media(max-width:390px){
  .chart-grid{grid-template-columns:48px repeat(4,minmax(0,1fr))!important}
  .chart-grid article>strong{font-size:31px!important}
  .chart-grid article>span:not(.pillar-label){font-size:10px!important}
  .row-labels span{font-size:9.5px!important}
}


/* 0.11：个性化研判 + 扩展神煞显示 */
.verify-category{display:inline-block;margin-right:.6em;color:var(--red);font-weight:600;letter-spacing:.06em}
.pillar-shensha-panel{display:none!important}
@media(max-width:760px){
 .pillar-shensha-panel{display:none!important}
 .pillar-shensha-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:11px 10px;border-bottom:1px solid #e2dcd2}
 .pillar-shensha-head span{color:var(--red);font-family:var(--font-serif);font-size:15px!important;letter-spacing:.08em}
 .pillar-shensha-head small{color:#8a8176;font-size:9.5px!important;text-align:right}
 .pillar-shensha-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
 .pillar-shensha-grid article{min-width:0;padding:10px 4px 12px;text-align:center;border-right:1px solid #e2dcd2}
 .pillar-shensha-grid article:last-child{border-right:0}
 .pillar-shensha-grid span{display:block;color:#7a7268;font-size:10px!important;margin-bottom:3px}
 .pillar-shensha-grid strong{display:block;color:#2d2a25;font-size:13px!important;font-weight:500;margin-bottom:5px}
 .pillar-shensha-grid small{display:block;color:#9a7441;font-size:10px!important;line-height:1.35!important;overflow-wrap:anywhere}
}

/* 0.12 收束：排盘结果四柱化；原则卡片极简 */
.calculation-proof .pillar-proof-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:100%!important;
  margin:14px 0 12px!important;
  white-space:normal!important;
}
.calculation-proof .pillar-proof-grid>span{
  display:grid!important;
  grid-template-rows:auto auto!important;
  justify-items:center!important;
  align-items:center!important;
  gap:4px!important;
  min-width:0!important;
  padding:3px 5px!important;
  border-right:1px solid rgba(255,255,255,.18)!important;
}
.calculation-proof .pillar-proof-grid>span:last-child{border-right:0!important}
.calculation-proof .pillar-proof-grid b{
  display:block!important;
  color:inherit!important;
  font-family:var(--font-serif)!important;
  font-size:30px!important;
  font-weight:500!important;
  line-height:1.05!important;
}
.principles>div{align-content:start!important}
.principles>div>strong{margin-top:16px!important;margin-bottom:0!important}
@media (max-width:768px){
  .calculation-proof .pillar-proof-grid{margin:12px 0 10px!important}
  .calculation-proof .pillar-proof-grid b{font-size:28px!important}
  .principles>div{padding-top:22px!important;padding-bottom:22px!important}
}