/* ==========================================================================
   AcreMiles — tool pages (compare, offers, status, transfer, perks, value, RTW, saved)
   ========================================================================== */
/* tool index (numbered, editorial) */
.tindex{border-top:1px solid var(--ink)}
.ti{display:grid;grid-template-columns:42px 1fr 22px;gap:12px;align-items:center;width:100%;padding:18px 0;border-bottom:1px solid var(--rule);text-align:left;color:inherit;transition:padding .35s var(--ease)}
.ti:active{padding-left:6px}
.ti-n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.06em;align-self:start;padding-top:4px}
.ti-b b{display:block;font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.3}
.ti-b span{display:block;font-size:12.5px;color:var(--mute);margin-top:3px}
.ti-a{width:20px;height:20px;color:var(--faint);transition:transform .35s var(--ease),color .2s}
.ti:hover .ti-a,.ti:active .ti-a{transform:translateX(4px);color:var(--ink)}
.rail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:-8px -20px 22px;padding:0 20px 2px}
.rail::-webkit-scrollbar{display:none}
.rail-i{flex:none;height:34px;padding:0 13px;border-radius:17px;font-size:12.5px;font-weight:600;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule-2);transition:background .2s,color .2s,transform .2s}
.rail-i:active{transform:scale(.95);background:var(--ink);color:var(--bg)}

/* compare */
.cmp-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cmp-slot{position:relative;text-align:left}
.cmp-slot .pn{font-size:12px;font-weight:600;margin-top:8px;line-height:1.35}
.cmp-x{position:absolute;top:-8px;right:-8px;z-index:3;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;box-shadow:var(--shadow-1)}
.cmp-x svg{width:13px;height:13px}
.cmp-add{aspect-ratio:1.586;border-radius:9px;border:1.5px dashed var(--rule-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:600;color:var(--mute)}
.cmp-add svg{width:20px;height:20px}
.cmp-table{margin-top:18px;border-top:1px solid var(--ink)}
.cmp-row{padding:14px 0;border-bottom:1px solid var(--rule)}
.cmp-row > .kicker{display:block;margin-bottom:8px}
.cmp-vals{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:10px}
.cmp-v{position:relative;min-width:0}
.cmp-v b{display:block;font-family:var(--num);font-weight:600;font-size:16px;line-height:1.25;word-break:break-word}
.cmp-v small{display:block;font-size:11px;color:var(--mute);line-height:1.4;margin-top:3px}
.cmp-v.best b{color:var(--accent)}
.cmp-v.best::before{content:"";position:absolute;left:-7px;top:7px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.pick-dot{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--rule-2);display:grid;place-items:center;color:transparent;flex:none;transition:background .3s,color .3s}
.pick-dot svg{width:15px;height:15px}
.pick-dot.on{background:var(--accent);color:#fff;box-shadow:none}

/* offers */
.offer{border-bottom:1px solid var(--rule)}
.offer-h{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:start;width:100%;padding:16px 0;text-align:left;color:inherit}
.offer-h .t{font-weight:600;font-size:14.5px;line-height:1.4}
.offer-h .d{font-size:12.5px;color:var(--mute);margin-top:4px;line-height:1.5}
.offer-h .d b{color:var(--ink);font-weight:600}
.offer .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.offer.open .body{grid-template-rows:1fr}
.offer .body > div{overflow:hidden}
.offer-b{padding:0 0 16px 70px;font-size:13px;color:var(--ink-2);line-height:1.6}
.offer-b .kicker{display:block;margin:10px 0 4px}
.offer-b p{margin:0}
.offer-b ul{margin:0;padding-left:18px}

/* status ladder */
.st-big{font-family:var(--num);font-weight:500;font-size:60px;line-height:1;color:var(--amber);letter-spacing:-.02em}
.ladder{position:relative;margin:26px 26px 50px;height:6px}
.ladder-track{position:absolute;inset:0;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.ladder-track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;transition:width 1.1s var(--ease)}
.ladder-track .plan{background:rgba(242,182,74,.35)}
.ladder-track .have{background:var(--amber);z-index:1}
.ladder-n{position:absolute;top:-5px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.ladder-n span{width:16px;height:16px;border-radius:50%;background:var(--board);box-shadow:inset 0 0 0 2px var(--board-mute)}
.ladder-n.done span{box-shadow:inset 0 0 0 2px var(--amber);background:var(--amber)}
.ladder-n.tgt span{box-shadow:inset 0 0 0 2px var(--amber),0 0 0 5px rgba(242,182,74,.18)}
.ladder-n b{font-size:11px;font-weight:600;color:var(--board-ink);white-space:nowrap}
.ladder-n small{font-family:var(--mono);font-size:9.5px;color:var(--board-mute)}
.flt{display:grid;grid-template-columns:1fr 104px;gap:8px 10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.flt .text{height:44px}
.flt .chip{justify-self:start}
.flt .ib{justify-self:end;width:36px;height:36px}

/* transfer */
.tf-cards{padding-top:12px}
.tf-c{width:132px;text-align:left;transition:transform .45s var(--spring)}
.tf-c .pn{font-size:11.5px;font-weight:600;margin-top:8px;line-height:1.35}
.tf-c[aria-pressed="false"] .cart-wrap{filter:saturate(.4);opacity:.6}
.tf-c[aria-pressed="true"]{transform:translateY(-6px)}
.tf-c[aria-pressed="true"] .cart{box-shadow:0 0 0 2px var(--accent),0 14px 26px -12px rgba(0,0,0,.5)}
.tf-rule{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:14px;color:var(--mute)}
.tf-rule .num{font-size:36px;color:var(--ink);font-weight:500;line-height:1}
.tf-rule svg{width:20px;height:20px;align-self:center;color:var(--accent)}
.tf-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.tf-facts b{display:block;font-size:13.5px;font-weight:600;margin-top:4px;line-height:1.4}

/* perks */
.perk{padding:18px 0;border-bottom:1px solid var(--rule)}
.perk-h{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.perk-h .thumb{width:58px;flex:none}
.perk-h b{font-size:15px}
.perk-i{padding:8px 0 8px 70px;border-top:1px dashed var(--rule)}
.perk-i:first-of-type{border-top:0}
.perk-i .t{font-weight:600;font-size:14px}
.perk-i .d{font-size:12.5px;color:var(--mute);line-height:1.55;margin-top:2px}
.perk > p{padding-left:70px}

/* value */
.val{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.val-col{padding:16px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--rule)}
.val-f{display:block;margin-top:14px}
.val-f span{display:block;font-size:11.5px;color:var(--mute);line-height:1.35}
.val-f input{width:100%;border:0;border-bottom:1.5px solid var(--ink);background:transparent;font-family:var(--num);font-size:22px;padding:4px 0;outline:none}
.val-f input:focus{border-color:var(--accent)}

/* RTW */
.rtw-card{display:block;width:100%;text-align:left;margin-bottom:14px;color:var(--board-ink);transition:transform .3s var(--ease)}
.rtw-card:active{transform:scale(.985)}
.rtw-in{padding:4px 20px 20px}
.rtw-t{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.3;margin-top:6px}
.rtw-r{font-family:var(--mono);font-size:10.5px;color:var(--board-mute);line-height:1.7;margin-top:6px;letter-spacing:.02em}
.rtw-f{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.rtw-f .num{font-size:28px;font-weight:600;color:var(--amber)}
.rtw-bal{margin-left:auto;font-size:12px;font-weight:600;color:var(--board-ink);padding:4px 10px;border-radius:9px;background:rgba(255,255,255,.08)}
.board-stats{border-color:var(--board-rule) !important;margin-top:4px}
.board-stats > div{border-color:var(--board-rule) !important}
.board-stats b{color:var(--board-ink)}
.board .rtw-verdict.ok{background:rgba(99,197,149,.12);color:#7fd8a9}
.board .rtw-verdict.bad{background:rgba(255,116,70,.14);color:#ff9a78}
.seg-row{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--rule)}
.seg-i{font-size:13px;color:var(--mute);padding-top:3px}
.seg-codes{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:18px}
.seg-codes svg{width:16px;height:16px;color:var(--faint)}
.seg-stay{font-family:var(--sans);font-size:11px;font-weight:700;padding:2px 8px;border-radius:7px;background:var(--bg-2);color:var(--ink-2)}
.seg-stay.tr{background:transparent;box-shadow:inset 0 0 0 1px var(--rule-2);color:var(--mute)}
.seg-d{font-size:12.5px;color:var(--mute);margin:4px 0 6px;line-height:1.5}
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:700;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good)}
.badge.warn{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.badge.bad{background:var(--accent-soft);color:var(--bad)}
.rtw-verdict{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:16px;font-size:13px;line-height:1.55}
.rtw-verdict svg{width:20px;height:20px;flex:none;margin-top:1px}
.rtw-verdict b{display:block;font-size:14px}
.rtw-verdict span{color:inherit;opacity:.85}
.rtw-verdict.ok{background:color-mix(in srgb,var(--good) 11%,transparent);color:var(--good)}
.rtw-verdict.bad{background:var(--accent-soft);color:var(--accent-ink)}
.rule-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.rule-row svg{width:18px;height:18px;flex:none;margin-top:2px}
.rule-row.pass svg{color:var(--good)}
.rule-row.fail svg{color:var(--bad)}
.rule-row b{display:block;font-size:14px;font-weight:600}
.rule-row span{display:block;font-size:12px;color:var(--mute);margin-top:2px;line-height:1.5}
.zt{font-size:12.5px}
.zt-r{display:grid;grid-template-columns:34px 1.4fr 1fr 1fr 1fr;gap:6px;padding:8px 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.zt-h{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--mute)}

/* home: saved & recent */
.saved-c{width:220px;padding:16px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--rule);text-align:left}
.saved-c .t{font-weight:600;font-size:14px;line-height:1.4;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.saved-c .n{font-family:var(--num);font-size:22px;font-weight:600;margin-top:8px}
.recent{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
.recent::-webkit-scrollbar{display:none}
.recent button{flex:none;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);font-size:13px;font-weight:600;white-space:nowrap}
.recent button i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mute);background:var(--bg-2);border-radius:9px;padding:6px 7px}
.prog-seg{width:210px}
@media (prefers-reduced-motion: reduce){ .ti:active{padding-left:0} }
.tf-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tf-facts .wide{grid-column:1 / -1}
.tf-facts b.un{color:var(--mute);font-weight:500}
.tf-src{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule)}
.tf-src p{margin:8px 0 0}
/* status: Cathay flights auto-calculated from the official chart */
.st-add{display:grid;gap:10px;margin-top:14px}
.flt.auto{grid-template-columns:1fr auto 36px;gap:12px}
.flt-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.flt-r .code{font-family:var(--mono);font-size:17px;letter-spacing:.04em}
.flt-r i{font-style:normal;color:var(--accent);font-size:15px}
.flt-r .badge{margin-left:4px}
.flt-d{font-size:12.5px;color:var(--mute);margin-top:5px;line-height:1.45}
.flt-n{text-align:right;white-space:nowrap}
.flt-n b{display:block;font-family:var(--num);font-size:22px;font-weight:600;line-height:1}
.flt-n b small{font-family:var(--mono);font-size:10.5px;margin-left:3px;color:var(--mute);font-weight:600}
.flt-n span{display:block;font-size:11.5px;color:var(--mute);margin-top:5px}
.btn[disabled]{opacity:.38;pointer-events:none}
.cf-ends{display:grid;grid-template-columns:1fr 40px 1fr;align-items:stretch;gap:0}
.cf-end{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);text-align:left;color:inherit;transition:box-shadow .3s var(--ease),transform .4s var(--spring)}
.cf-end:active{transform:scale(.97)}
.cf-end.on{box-shadow:inset 0 0 0 2px var(--accent)}
.cf-end .code{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:.04em;line-height:1}
.cf-end small{font-size:12px;color:var(--mute)}
.cf-mid{display:grid;place-items:center;color:var(--accent);font-size:20px}
.cf-prev{margin-top:24px;padding:20px;border-radius:22px;background:var(--board);color:var(--board-ink)}
.cf-prev .kicker{color:var(--board-mute)}
.cf-prev .note{color:var(--board-mute)}
.cf-nums{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-nums b{display:block;font-family:var(--num);font-size:40px;font-weight:500;line-height:1;margin-top:8px;color:var(--amber)}
.cf-nums div + div b{color:var(--board-ink);font-size:30px;margin-top:14px}
.cf-band{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:18px}
.cf-band div{padding:8px 0 7px;border-radius:9px;background:var(--board-2);text-align:center;transition:background .35s var(--ease),color .35s var(--ease)}
.cf-band small{display:block;font-size:10.5px;color:var(--board-mute)}
.cf-band b{display:block;font-family:var(--mono);font-size:14px;margin-top:3px}
.cf-band .on{background:var(--amber);color:#111215}
.cf-band .on small{color:rgba(17,18,21,.66)}
.st-27{margin:0 0 14px;padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.st-27 li + li{margin-top:6px}
.tf-src .link{white-space:normal;overflow-wrap:anywhere}
.tf-sg{margin-top:10px;font-size:13px;color:var(--ink-2);line-height:1.5}
.tf-sl{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px}
.tf-sl .link{font-size:13.5px}
.cf-prev{box-shadow:inset 0 0 0 1px var(--board-rule)}
.cf-hint{margin:12px 0 0}
.cf-hint b{color:var(--ink);font-weight:600}
.flt-b[data-flt-edit]{cursor:pointer;border-radius:10px;transition:opacity .2s}
.flt-b[data-flt-edit]:active{opacity:.6}

/* lucky draw box in the apply details */
.draw{margin-top:14px;padding:16px 18px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule)}
.draw-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.draw-t{font-weight:700;font-size:15px;margin-top:8px}
.draw-p{margin-top:10px;border-top:1px solid var(--rule)}
.draw-p > div{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.draw-p span{font-size:12px;color:var(--mute)}
.draw-p small{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.draw .fold{margin-top:6px}

/* share sheet (分享圖) */
.share-pair{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:16px}
.share-pair svg,.btn svg{width:17px;height:17px}
.share-sheet{position:fixed;inset:0;z-index:80;pointer-events:none}
.share-sheet.on{pointer-events:auto}
.share-bg{position:absolute;inset:0;background:rgba(10,10,12,.46);opacity:0;transition:opacity .25s}
.share-sheet.on .share-bg{opacity:1}
.share-panel{position:absolute;left:0;right:0;bottom:0;max-height:92vh;overflow:auto;background:var(--surface);border-radius:26px 26px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .35s var(--ease)}
.share-sheet.on .share-panel{transform:none}
.share-grab{width:40px;height:5px;border-radius:3px;background:var(--rule-2);margin:0 auto 8px}
.share-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.share-h b{font-family:var(--serif);font-size:20px}
.share-img img{display:block;width:100%;max-width:420px;margin:0 auto;border-radius:18px;box-shadow:var(--shadow-2)}
.share-img{margin-bottom:16px}
.share-acts{display:grid;gap:10px;max-width:420px;margin:0 auto}
.share-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.share-n{text-align:center;margin:12px 0 0}
@media (min-width:700px){ .share-panel{left:50%;right:auto;width:520px;bottom:auto;top:50%;border-radius:26px;transform:translate(-50%,-40%);opacity:0;transition:transform .35s var(--ease),opacity .25s} .share-sheet.on .share-panel{transform:translate(-50%,-50%);opacity:1} }