/* 互动推算体验页（tiyan.html）共用：一行输入（年月日 / 男女 / 几点）、换算卡、问答区与示意图。称骨、八字两页都加载。变量一律 --c-*（CssTokenTest）。 */
#tyApp [hidden] { display: none !important; }

.ty-card { padding-top: 14px; }
/* 一行极简输入：窄屏自动折成两行，按钮占满 */
.ty-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ty-bar input, .ty-bar select { flex: 1 1 130px; min-width: 0; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: var(--radius); font: inherit; font-size: 15px; background: #fff; }
/* 年 / 月 / 日 三个下拉连成一组（窄屏占满一行；手机上点开是系统滚轮） */
.ty-date { display: flex; flex: 2 1 260px; min-width: 0; gap: 0; }
.ty-bar .ty-date select { flex: 1 1 0; min-width: 0; border-radius: 0; margin-left: -1px; padding-left: 8px; padding-right: 4px; }
.ty-bar .ty-date select:first-child { flex-grow: 1.35; margin-left: 0; border-radius: var(--radius) 0 0 var(--radius); }
.ty-bar .ty-date select:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.ty-bar .ty-date select:focus { position: relative; z-index: 1; }
#tyHour { flex: 1 1 150px; }
.ty-bar .btn { flex: 0 0 auto; padding-left: 22px; padding-right: 22px; }
.ty-seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.ty-seg label { cursor: pointer; }
.ty-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ty-seg span { display: block; padding: 9px 14px; font-size: 15px; }
.ty-seg input:checked + span { background: var(--c-primary); color: #fff; }
.ty-seg input:focus-visible + span { outline: 2px solid var(--c-primary); outline-offset: -2px; }
@media (max-width: 560px) { .ty-bar .btn, .ty-date { flex: 1 1 100%; } }
.ty-calc { border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; background: var(--c-paper-card); }
.ty-calc h3 { margin: 0 0 8px; font-size: var(--t-md); font-family: var(--font-serif); }
.ty-calc p { margin: 6px 0 0; }
.ty-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--t-md); }
.ty-eq i { font-style: normal; color: var(--c-gold); font-weight: 700; }
.ty-eq b { color: var(--c-primary-deep); font-family: var(--font-serif); }
.ty-note { color: var(--c-ink-2); font-size: var(--t-sm); background: var(--c-primary-soft); border-radius: 8px; padding: 6px 10px; }
.ty-src { color: var(--c-ink-3); font-size: var(--t-sm); }

.ty-reveal { animation: tyIn .5s ease-out both; animation-delay: var(--d, 0s); }
@keyframes tyIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ty-calcwrap { margin-top: 12px; }
.ty-calcwrap summary { cursor: pointer; color: var(--c-primary-deep); font-size: var(--t-sm); padding: 6px 0; }
.ty-calcwrap .ty-calc { margin-top: 8px; }
.ty-invite { font-size: var(--t-sm); color: var(--c-ink-2); margin: 8px 0 0; }
.ty-fig { margin: 0 0 14px; }
.ty-fig img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--c-line); }
.ty-fig figcaption { margin-top: 6px; font-size: var(--t-sm); color: var(--c-ink-3); text-align: center; }
.ty-explain h3 { font-size: var(--t-md); margin: 14px 0 4px; }
.ty-explain h3:first-child { margin-top: 0; }
.ty-explain p { margin: 0; }

@media (prefers-reduced-motion: reduce) { .ty-reveal { animation: none; } }

/* 「农历」小勾：勾上即把已选日期换算成农历写法；下方确认行同时给出公历与农历，免得把农历生日当公历填 */
.ty-lunar { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; white-space: nowrap; padding: 8px 8px; border: 1px solid var(--c-line); border-radius: var(--radius); font-size: 15px; cursor: pointer; background: #fff; }
.ty-lunar input { width: 16px; height: 16px; accent-color: var(--c-primary); }
.ty-echo { margin: 6px 0 0; font-size: var(--t-sm); color: var(--c-ink-2); text-align: center; min-height: 1.4em; }
.ty-echo b { color: var(--c-primary-deep); }
/* 手机：「农历」小勾与年 / 月 / 日同一行——勾不换行、三个下拉收窄内边距与字号（年份最宽给多一点） */
@media (max-width: 560px) {
  .ty-date { flex: 1 1 calc(100% - 84px); }   /* 占满「农历」勾旁边的整行，男女与几点自然落到第二行 */
  .ty-lunar { padding: 8px 6px; font-size: 14px; }
  .ty-bar .ty-date select { font-size: 14px; padding-left: 5px; padding-right: 0; }
  .ty-bar .ty-date select:first-child { flex-grow: 1.25; }
}