/* 人生時間軸：沿用「錯位色塊」的暖白、深墨、粉嫩色塊和錯位陰影，標題用粉圓 */
html.line.life,html.line.life:not([data-theme="light"]){
  --bg:#FAF7F2; --paper:#FFFFFF; --ink:#2A2733; --muted:#625C6B; --line:#E4DED3;
  --acc:#E8603F; --acc-txt:#C4411F; --acc-soft:#FFE1D6; --sel:#FFE1D6; --sel-line:#E8603F; --seal:#E8603F;
  --ok:#1C6B47; --warn:#7A5200; --later:#2B4F86; --no:#A23B2C;
  --f-display:"Huninn","jf-openhuninn","Noto Sans TC","PingFang TC",sans-serif;
}
html.life .lrail{display:none}
html.life .lmast{border-bottom:2px solid var(--ink);box-shadow:none}
html.life .lbrand{font-family:var(--f-display);font-weight:400;font-size:19px}
html.life .lpanel{padding:10px 0 8px}
html.life .lgo{border-radius:999px;background:var(--ink)}
html.life .lgo:disabled{background:var(--line);color:var(--muted)}

.life-v{height:100%;min-height:0;gap:8px}

/* 你家 */
.fam{display:flex;gap:6px;align-items:center;padding:0 14px;flex:none;min-height:44px}
.fam button{font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:999px;min-height:40px;display:inline-flex;align-items:center;gap:4px;padding:0 12px;font-size:14px;font-weight:700;white-space:nowrap}
.fam-county .cshape{width:16px;height:16px;fill:var(--acc)}
.fam-who{flex:1;min-width:0;overflow:hidden;justify-content:flex-start;box-shadow:3px 3px 0 #FFE7A6}
.fam-who .pin{margin-right:-4px}
.fam-edit{margin-left:auto;padding-left:10px;font-size:13px;color:var(--muted);text-decoration:underline}
.fam-add{color:var(--acc)}
.fam-who.nudge{animation:nudge 1.4s ease-in-out 2}
@keyframes nudge{20%,60%{transform:translateX(3px)}40%,80%{transform:translateX(-3px)}}
.fam-q{background:#FFE7A6!important;font-size:13px!important}

/* 人頭 */
.pin{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);font-family:var(--f-display);font-size:12px;line-height:1;flex:none;position:relative}
.pin b{font-weight:400}
.pin.p-me{background:#FFE7A6} .pin.p-kid{background:#CFE1FF} .pin.p-bb{background:#FFD3E0} .pin.p-old{background:#C4EDD3}
.pin.big{width:44px;height:44px;font-size:14px;box-shadow:2px 2px 0 var(--ink);animation:pindrop .55s cubic-bezier(.3,1.6,.5,1) both}
.pin.big i{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;font-style:normal;font-size:11px;white-space:nowrap;color:var(--ink);font-family:var(--f-body);font-weight:700;background:var(--paper);padding:0 4px;border-radius:4px}
@keyframes pindrop{from{transform:translateY(-30px);opacity:0}}

/* 時間軸 */
.track{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 14px;padding:0 14px 6px;gap:0;scrollbar-width:none;overscroll-behavior-x:contain;outline:none}
.track::-webkit-scrollbar{display:none}
.st-intro,.st,.st-end{flex:0 0 auto;scroll-snap-align:start;height:100%;display:flex;flex-direction:column}
.st-intro{width:min(74vw,330px);padding:14px 18px 0 2px;gap:12px;position:relative}
.st-intro h1{font-family:var(--f-display)!important;font-weight:400!important;font-size:clamp(30px,8.4vw,40px)!important;line-height:1.25!important}
.st-intro p{font-size:15px;line-height:1.7;color:var(--muted)}
.st-intro::after{content:"";position:absolute;left:0;right:0;top:calc(var(--ly) + 0px);border-top:3px solid var(--ink);opacity:0}
.swipe{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-top:auto;margin-bottom:18px;animation:swipe 1.6s ease-in-out infinite}
@keyframes swipe{50%{transform:translateX(8px)}}
.st{--ly:96px;width:min(80vw,340px);position:relative;padding:0 10px 0 0}
.st::before{content:"";position:absolute;left:0;right:0;top:var(--ly);border-top:3px solid var(--ink)}
.st.detour::before{border-top-style:dashed}
.st:first-of-type::before{left:14px}
.st-h{height:calc(var(--ly) - 10px);background:var(--c);border:2px solid var(--ink);border-radius:18px 18px 18px 4px;margin:0 6px 0 0;padding:10px 14px 8px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;box-shadow:4px 4px 0 var(--ink)}
.st.past .st-h{filter:saturate(.35);opacity:.8}
.st-age{font-size:12px;font-weight:700;color:var(--muted)}
.st-h h2{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.2}
.st-n{position:absolute;right:10px;top:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px}
.st-rail{position:relative;height:0;z-index:1;top:10px}
.st-dot{position:absolute;left:14px;top:3px;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.st.here .st-dot{background:var(--acc)}
.st.detour .st-dot{border-style:dotted}
.st-pins{position:absolute;right:22px;top:-22px;display:flex;gap:6px;flex-direction:row-reverse}
.st-who{margin:30px 0 6px;padding-left:4px;font-size:13.5px;color:var(--muted);min-height:20px}
.st.here .st-who{margin-top:50px;color:var(--ink)}
.st-who b{color:var(--ink)}
.st-list{list-style:none;margin:0;padding:2px 6px 8px 2px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;flex:1;min-height:0;scrollbar-width:none}
.st-list::-webkit-scrollbar{display:none}
.tk{width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:1px 8px;text-align:left;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:12px;padding:7px 10px;min-height:46px;font:inherit;transition:transform .12s}
.tk:active{transform:translate(2px,2px)}
.tk-n{font-weight:700;font-size:14.5px;line-height:1.35}
.tk-b{grid-row:1/3;grid-column:2;align-self:center;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 8px;border:1.5px solid var(--ink);white-space:nowrap}
.tk-a{font-size:12px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.t-likely .tk-b,em.t-likely{background:#C4EDD3}
.t-check .tk-b,em.t-check{background:#FFE7A6}
.t-later .tk-b,.t-future .tk-b{background:#CFE1FF}
.t-guide .tk-b{background:#FFD3E0}
.t-look .tk-b{background:var(--bg)}
.tk.t-likely{box-shadow:3px 3px 0 #9ED9B4}
.tk.t-no{border-style:dashed;color:var(--muted);background:transparent;box-shadow:none}
.tk.t-no .tk-b{border-style:dashed;color:var(--muted)}
.tk.t-no .tk-a{display:none}
.st-end{width:min(60vw,260px);justify-content:center;padding:0 14px;color:var(--muted);font-size:13.5px;line-height:1.7}

/* 下方縮圖：整條人生，目前看到哪一段 */
.scrub{flex:none;display:flex;gap:3px;padding:2px 14px;overflow-x:auto;scrollbar-width:none}
.scrub::-webkit-scrollbar{display:none}
.sc{flex:1 0 34px;height:30px;border:1.5px solid var(--ink);background:var(--c);border-radius:8px;position:relative;font:inherit;font-size:11px;color:var(--ink);padding:0;display:grid;place-items:center;opacity:.6;transition:opacity .2s,transform .2s}
.sc.d{border-style:dashed}
.sc.on{opacity:1;transform:translateY(-3px);box-shadow:2px 2px 0 var(--ink)}
.sc i{position:absolute;top:-5px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--acc);border:1.5px solid var(--ink)}
.sc span{font-weight:700;letter-spacing:-.02em}
.life-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px}
.life-foot .lgo{flex:1}
.life-foot .lgo b{font-family:var(--f-display);font-weight:400;font-size:20px;margin:0 2px}

/* 浮出面板 */
html.life .lsheet{border-top:2px solid var(--ink);border-radius:20px 20px 0 0}
html.life .lsheet-h{font-family:var(--f-display);font-weight:400}
.life-note{font-size:13.5px;background:#FFE7A6;border:1.5px solid var(--ink);border-radius:10px;padding:8px 10px}
.fsec{display:flex;flex-direction:column;gap:8px;border-top:1.5px solid var(--line);padding-top:12px}
.fsec h3{font-family:var(--f-display);font-weight:400;font-size:18px}
.fseg{display:flex;gap:6px}
.fseg.wrap{flex-wrap:wrap}
.fseg button,.fchip,.fadd button{font:inherit;font-size:14.5px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 13px;min-height:42px;font-weight:500}
.fseg button.on,.fchip.on{background:var(--ink);color:#fff;font-weight:700}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{align-self:flex-start}
.frow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 0;border-bottom:1px dashed var(--line)}
.frow select{font:inherit;font-size:15px;border:2px solid var(--ink);border-radius:10px;padding:7px 8px;background:var(--paper);min-height:42px}
.frm{margin-left:auto;border:0;background:none;width:40px;height:40px;font-size:16px;color:var(--muted)}
.fadd{display:flex;gap:6px;flex-wrap:wrap}
.fadd button{border-style:dashed}
.fdone{position:sticky;bottom:-24px;background:var(--bg);padding:10px 0 6px}
.fdone .lgo{width:100%}
html.life .lsheet .counties button{border-radius:10px;border:2px solid var(--ink)}
html.life .lsheet .counties button.on{background:var(--ink);color:#fff}
.now-g{border:2px solid var(--ink);border-radius:14px;overflow:hidden}
.now-h{background:var(--c);font-family:var(--f-display);font-size:16px;padding:6px 12px;border-bottom:2px solid var(--ink)}
.now-i{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;border:0;border-bottom:1px solid var(--line);background:var(--paper);padding:10px 12px;font:inherit;font-weight:700;text-align:left;min-height:48px}
.now-i:last-child{border-bottom:0}
.now-i em{font-style:normal;font-size:12px;border:1.5px solid var(--ink);border-radius:999px;padding:2px 8px;white-space:nowrap}
html.life .lsheet .ring .bar{stroke:var(--acc)}
html.life .lsheet .slip,html.life .lsheet .face{border:2px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 #FFE7A6}
html.life .lsheet .slip.flip{border:0;box-shadow:none}
html.life .lsheet .slip h3{font-family:var(--f-display);font-weight:400;font-size:22px}
html.life .lsheet .fliptn{border-radius:999px}

@media (max-height:740px){
  .st{--ly:82px} .st-h h2{font-size:21px} .st-h{padding:8px 12px 6px}
  .tk{min-height:42px;padding:5px 9px} .tk-n{font-size:14px}
  .sc{height:26px}
}
@media (prefers-reduced-motion:reduce){.swipe,.fam-who.nudge,.pin.big{animation:none}}

/* ===== 10/19 簡化：大一點、好按、少一層 ===== */
.tk{min-height:56px;padding:9px 12px;border-radius:14px}
.tk-n{font-size:16px}
.tk-b{font-size:13px;padding:4px 10px}
.tk-a{font-size:13px}
.tk-more{list-style:none}
.tk-tog{width:100%;min-height:48px;border:2px dashed var(--muted);background:transparent;border-radius:14px;color:var(--muted);font:inherit;font-size:14.5px;font-weight:700}
.tk-no{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.sc{height:40px;flex-basis:40px;font-size:12px}
.fam button{min-height:46px;font-size:15px}
.st-dot{left:14px;width:18px;height:18px;margin-top:-9px;top:1.5px}
html.life .lclose{min-height:46px;padding:6px 18px;font-size:16px;border-width:2px}
/* 攤平的卡片 */
.fc{display:flex;flex-direction:column;gap:12px;border:2px solid var(--ink);border-radius:18px;background:var(--paper);padding:16px 16px 14px;box-shadow:4px 4px 0 #FFE7A6}
.fc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fc-badge{font-size:14px;font-weight:700;border:1.5px solid var(--ink);border-radius:999px;padding:3px 12px}
.fc-badge.t-likely{background:#C4EDD3} .fc-badge.t-check{background:#FFE7A6} .fc-badge.t-later,.fc-badge.t-future{background:#CFE1FF} .fc-badge.t-guide{background:#FFD3E0} .fc-badge.t-no{background:var(--bg)}
.fc-cat{font-size:13px;color:var(--muted)}
.fc-h{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.3}
.fc-amt{font-size:19px;font-weight:700;line-height:1.5;background:#FFF6D6;border-radius:10px;padding:8px 12px}
.fc-sec{display:flex;flex-direction:column;gap:6px;border-top:1.5px dashed var(--line);padding-top:10px}
.fc-sec h3{font-family:var(--f-display);font-weight:400;font-size:17px}
.fc-sec p{font-size:16px;line-height:1.7}
.fc-list{margin:0;padding:0 0 0 1.3em;display:flex;flex-direction:column;gap:4px;font-size:16px;line-height:1.65}
.fc-list li::marker{color:var(--acc)}
.fc-note{font-size:15px!important;background:var(--bg);border-radius:10px;padding:8px 10px}
.fc-pit{font-size:14.5px!important;color:var(--muted)}
.fc .docs2 li{font-size:16px}
.fc .docs2 label{min-height:44px;display:flex;align-items:center;gap:10px}
.fc .docs2 input{width:24px;height:24px;flex:none}
.fc-btns{display:flex;flex-wrap:wrap;gap:8px}
.fc .tele.big{margin:0;min-height:50px;border-radius:999px;font-size:16px;font-weight:700;padding:0 18px;background:var(--ink);color:#fff;border:0}
.fc-tel{display:inline-flex;align-items:center;min-height:50px;border:2px solid var(--ink);border-radius:999px;padding:0 18px;font-weight:700;color:var(--ink);text-decoration:none;font-size:16px}
.fc-v{font-size:14px;color:var(--muted)} .fc-v.v-ok{color:var(--ok)} .fc-v a{font-weight:700;color:var(--acc)}
.life-back{width:100%;min-height:54px;font-size:17px;margin-top:4px}
html.life .lsheet .due{font-size:15px}
.tk-no[hidden]{display:none}
.cg{border:2px solid var(--ink);border-radius:14px;background:var(--paper);overflow:hidden}
.cg-h{width:100%;display:flex;align-items:center;gap:8px;border:0;background:none;font:inherit;color:var(--ink);min-height:52px;padding:0 14px;font-size:16.5px;font-weight:700;text-align:left}
.cg-h span{flex:1}
.cg-h b{font-size:13px;background:var(--ink);color:#fff;border-radius:999px;padding:2px 9px}
.cg-h i{font-style:normal;color:var(--muted)}
.cg.open .cg-h{background:#FFE7A6;border-bottom:2px solid var(--ink)}
.cg .fchips{padding:10px 10px 12px}
.cg .fchip{font-size:15px;min-height:46px}
.life-youth{align-self:flex-start;font-size:15px;padding:6px 0;min-height:44px}
.st-intro .swipe{margin-top:auto}

/* 文字用的橘色加深一點：白底對比 4.5:1 以上（色塊、圓點、邊線還是原本的亮橘） */
html.line.life .fam-add, html.line.life .fc-v a, html.line.life .lno, html.line.life .ltile.k-likely .lk,
html.line.life .lsoon em, html.line.life .ltoc span, html.line.life .lpanel>.steps, html.line.life .ltool button b,
html.line.life .lbr.lit .lbr-h, html.line.life .lbr.lit .lbr-h span{color:var(--acc-txt)}

/* 學生專區的卡片：文字和圓點不要貼到邊框上被吃掉 */
html.life .lsheet .slip-main{padding:14px 16px 8px}
html.life .lsheet .slip>details>*:not(summary){padding-left:16px;padding-right:16px}