/* FIF Tools: tool pages. Uses the theme's tokens (paper, ink, saffron, mono). */
main.dir.ft{padding-bottom:72px}
.dir.ft>.ft-app{margin-top:-8px}
.ft-h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px}

/* Panels and inputs */
.ft-app{display:flex;flex-direction:column;gap:16px}
.ft-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px;align-items:start}
.ft-panel{padding:24px;display:flex;flex-direction:column;gap:12px}
.ft-l{font-size:14px;font-weight:500;color:var(--ink)}
.ft-l span{font-weight:400;color:var(--ink3)}
.ft-money{display:flex;align-items:stretch;border:1px solid var(--ink);background:var(--paper);height:58px}
.ft-money>span{width:44px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:22px;color:var(--ink2);border-right:1px solid var(--rule)}
.ft-money input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--mono);font-size:24px;font-weight:500;padding:0 14px;color:var(--ink)}
.ft-money-sm{height:48px}.ft-money-sm input{font-size:18px}
.ft-in{height:48px;border:1px solid var(--ink);background:var(--paper);padding:0 12px;font-size:16px;color:var(--ink);min-width:0}
.ft-sel{position:relative}
.ft-sel select{width:100%;height:50px;appearance:none;-webkit-appearance:none;border:1px solid var(--ink);background:var(--paper);padding:0 40px 0 12px;font-size:16px;color:var(--ink);border-radius:0}
.ft-sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.ft-range{width:100%;accent-color:var(--saffron);height:28px;margin:2px 0}
.ft-chips{display:flex;flex-wrap:wrap;gap:6px}
.ft-chips button{border:1px solid var(--edge);background:var(--card);padding:8px 12px;font-size:14px;color:var(--ink)}
.ft-chips button:hover{border-color:var(--ink)}
.ft-chips button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ft-fine{font-size:13px;line-height:1.55;color:var(--ink3)}
.ft-go{height:50px;padding:0 22px;border:0;background:var(--ink);color:var(--paper);font-size:15px;font-weight:500;align-self:flex-start}
.ft-go:hover{background:var(--ember)}
.ft-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--ink);background:var(--card);color:var(--ink);font-size:14px;font-weight:500}
.ft-btn:hover{background:var(--ink);color:var(--paper)}
.ft-link{font-size:14px;font-weight:500;color:var(--ink);text-decoration-color:var(--saffron);text-underline-offset:4px}
.ft-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:6px}
.ft-actions-row{margin-top:0}
.ft-none{font-size:15px;color:var(--ink2);padding:8px 0}
.ft-out-b{display:flex;flex-direction:column;gap:12px}

/* Results */
.ft-out{border-top:3px solid var(--ink)}
.ft-out>.lbl{color:var(--ember)}
.ft-big{font-family:var(--mono);font-size:clamp(34px,5vw,56px);font-weight:600;line-height:1.05;letter-spacing:-.03em;overflow-wrap:anywhere}
.ft-sub{font-size:16px;line-height:1.55;color:var(--ink2)}
.ft-sub b{color:var(--ink)}
.ft-verdict{font-size:20px;line-height:1.45;font-weight:300}
.ft-verdict b,.ft-verdict strong{font-weight:600}
.ft-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--inner);border:1px solid var(--inner);margin-top:8px}
.ft-stat{background:var(--card);padding:16px;display:flex;flex-direction:column;gap:4px}
.ft-stat .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.ft-stat b{font-family:var(--mono);font-size:22px;font-weight:600;overflow-wrap:anywhere}
.ft-stat .s{font-size:13px;line-height:1.45;color:var(--ink2)}

/* Lists of people */
.ft-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.ft-list{display:flex;flex-direction:column;gap:8px}
.ft-item{display:flex;align-items:center;gap:14px;padding:12px 14px;color:var(--ink);text-decoration:none}
.ft-item:hover{border-color:var(--ink);color:var(--ink)}
.ft-item:hover b{color:var(--ember)}
.ft-age{width:56px;height:56px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--linen)}
.ft-age b{font-family:var(--mono);font-size:22px;font-weight:600;line-height:1}
.ft-age i{font-style:normal;font-size:10px;color:var(--ink3);margin-top:2px;text-transform:uppercase;letter-spacing:.06em}
.ft-item .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ft-item .tx b{font-size:16px;font-weight:600}
.ft-item .tx span{font-size:13px;color:var(--ink2)}
.ft-gap{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ember);background:var(--chip-bg);padding:3px 7px;white-space:nowrap}

/* Am I Too Late */
.ft-agebar{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}
.ft-agerow{display:flex;align-items:center;gap:16px;flex:1;min-width:240px}
.ft-agein{width:100px;height:58px;border:1px solid var(--ink);background:var(--paper);font-family:var(--mono);font-size:28px;font-weight:600;text-align:center;color:var(--ink)}
.ft-hist{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;height:180px;align-items:end;margin-top:8px}
.hb{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.hb .c{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.hb .bar{flex:1;width:100%;display:flex;align-items:flex-end}
.hb .bar i{display:block;width:100%;background:var(--rule);transition:height 400ms var(--ease)}
.hb.me .bar i{background:var(--saffron)}
.hb .l{font-size:12px;color:var(--ink2);text-align:center;display:flex;flex-direction:column;line-height:1.2}
.hb .l em{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ember);text-transform:uppercase}

/* Head to Head */
.ft-vs{flex-direction:row;align-items:flex-end;gap:12px}
.ft-vs-pick{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ft-swap{width:50px;height:50px;flex:none;border:1px solid var(--ink);background:var(--card);font-size:20px;color:var(--ink)}
.ft-swap:hover{background:var(--ink);color:var(--paper)}
.ft-duel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:start;margin-top:4px}
.ft-side{display:flex;flex-direction:column;gap:6px;min-width:0}
.ft-side .nm{font-size:20px;font-weight:600;color:var(--ink);text-decoration:none}
.ft-side .nm:hover{color:var(--ember)}
.ft-side .rl{font-size:13px;color:var(--ink2)}
.ft-side .nw{font-family:var(--mono);font-size:30px;font-weight:600}
.ft-side .bar{height:10px;background:var(--inner)}
.ft-side .bar i{display:block;height:100%;background:var(--saffron);transition:width 500ms var(--ease)}
.ft-side .asof{font-size:12px;color:var(--ink3)}
.ft-vsdot{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink3);padding-top:10px}
.ft-table table{width:100%;border-collapse:collapse;font-size:15px}
.ft-table th,.ft-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--inner);vertical-align:top}
.ft-table thead th{font-size:13px;font-weight:600;border-bottom:2px solid var(--ink)}
.ft-table tbody th{font-weight:400;color:var(--ink2);width:34%}
.ft-table td.win{font-weight:600;background:linear-gradient(transparent 62%,var(--marker) 62%) no-repeat}
.ft-chips-pairs button{font-size:13px}

/* Birthday Twins */
.ft-today{background:var(--callout);padding:12px 16px;font-size:15px}
.ft-today .lbl{color:var(--ember);margin-right:8px}
.ft-bday{flex-direction:row;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ft-bday>div{display:flex;flex-direction:column;gap:8px;flex:1 1 120px}
.ft-bday .ft-in{width:100%}
.ft-bres .ft-verdict{margin-bottom:6px}
.ft-list-tight{margin-top:8px}

/* Challenge */
.ft-modes{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--rule)}
.ft-modes::-webkit-scrollbar{display:none}
.ft-modes button{flex:none;border:0;background:transparent;padding:12px 14px;font-size:15px;color:var(--ink2);box-shadow:inset 0 -3px 0 transparent}
.ft-modes button[aria-selected=true]{color:var(--ink);font-weight:600;box-shadow:inset 0 -3px 0 var(--saffron)}
.ft-quiz,.ft-end{max-width:760px;width:100%}
.ft-qbar{display:flex;align-items:center;gap:12px}
.ft-score{margin-left:auto;font-family:var(--mono);font-size:14px;font-weight:600}
.ft-streak{font-family:var(--mono);font-size:12px;font-weight:600;background:var(--saffron);color:var(--ink);padding:3px 8px}
.ft-prog{height:4px;background:var(--inner)}
.ft-prog i{display:block;height:100%;width:0;background:var(--ink);transition:width 400ms var(--ease)}
.ft-q{font-size:clamp(22px,3vw,30px);font-weight:500;line-height:1.25;letter-spacing:-.015em;margin-top:8px}
.ft-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ft-opts button{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border:1px solid var(--edge);background:var(--card);text-align:left;font-size:17px;color:var(--ink);transition:border-color 150ms ease,background 150ms ease}
.ft-opts button:hover:not(:disabled){border-color:var(--ink)}
.ft-opts button .k{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--linen);font-family:var(--mono);font-size:13px;font-weight:600}
.ft-opts button:disabled{cursor:default}
.ft-opts button.ok{border-color:var(--gain);background:#E9F5EC}
.ft-opts button.ok .k{background:var(--gain);color:#fff}
.ft-opts button.bad{border-color:var(--loss);background:#FBECE8}
.ft-opts button.bad .k{background:var(--loss);color:#fff}
.ft-fb{font-size:15px;line-height:1.55;color:var(--ink2);min-height:24px}
.ft-fb.is-ok b{color:var(--gain)}.ft-fb.is-bad b{color:var(--loss)}
.ft-fb a{color:var(--ink);font-weight:500;text-decoration-color:var(--saffron);text-underline-offset:3px}

/* Fortune Cart */
.ft-cartbar{flex-direction:row;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ft-cartbar>div{flex:1 1 320px;display:flex;flex-direction:column;gap:8px}
.ft-cartbar .ft-verdict{flex:1 1 320px}
.ft-cart{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ft-ci{padding:20px;display:flex;flex-direction:column;gap:6px}
.ft-ci-n{font-family:var(--mono);font-size:34px;font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--ember);overflow-wrap:anywhere}
.ft-ci-n i{font-style:normal;font-size:22px;margin-left:2px}
.ft-ci b{font-size:18px;font-weight:600}
.ft-ci .d{font-size:13px;color:var(--ink2)}
.ft-ci .pr{font-family:var(--mono);font-size:14px;font-weight:500;margin-top:4px}
.ft-ci .sh{font-size:12px;color:var(--ink3)}
.src-l{font-size:12px;color:var(--ink3);margin-top:auto;padding-top:8px}
.ft-customrow{display:flex;gap:8px;flex-wrap:wrap}
.ft-customrow .ft-in{flex:2 1 200px}
.ft-customrow .ft-money{flex:1 1 180px}
.ft-out-custom{font-size:17px;line-height:1.5}

/* Revenue Clock */
.ft-clock{background:var(--ink);border-color:var(--ink);color:#F5EFE2;padding:28px}
.ft-clock .lbl{color:var(--marigold);margin-top:8px}
.ft-clock .ft-l{color:#F5EFE2}
.ft-clock .ft-sel select{background:#2A2824;color:#F5EFE2;border-color:#57534B}
.ft-clock .ft-sel::after{border-color:#F5EFE2}
.ft-clock-pick{max-width:420px;display:flex;flex-direction:column;gap:8px}
.ft-ticker{font-family:var(--mono);font-size:clamp(40px,7vw,84px);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--marigold);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ft-clock .ft-sub{color:#CFC6B4}
.ft-table tbody td b{font-family:var(--mono)}
.ft-board ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ft-board li a{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--inner);color:var(--ink);text-decoration:none;font-size:15px}
.ft-board li.on a{font-weight:600}
.ft-board .track{height:10px;background:var(--inner)}
.ft-board .track i{display:block;height:100%;background:var(--rule)}
.ft-board li.on .track i{background:var(--saffron)}
.ft-board .v{font-family:var(--mono);font-size:14px}
.ft-empty{font-size:17px}

/* FAQ and more */
.ft-faq{display:flex;flex-direction:column;gap:8px;max-width:860px;margin-top:20px}
.ft-faq details{padding:0}
.ft-faq summary{cursor:pointer;padding:16px 20px;font-size:17px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
.ft-faq summary::-webkit-details-marker{display:none}
.ft-faq summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--ember)}
.ft-faq details[open] summary::after{content:"−"}
.ft-faq details p{padding:0 20px 18px;font-size:16px;line-height:1.65;color:var(--ink2)}
.ft-more{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.ft-more .sec-h{display:flex;justify-content:space-between;align-items:baseline}
.ft-more .sec-h h2{font-size:24px;font-weight:500}

@media (max-width:899.98px){
  main.dir.ft{padding:0 16px 40px;gap:24px}
  main.dir.ft>.dir-top{margin:0 -16px}
  main.dir.ft>.dir-band{margin:0 -16px;padding:16px}
  .ft-two,.ft-cols{grid-template-columns:1fr}
  .ft-panel{padding:18px}
  .ft-opts{grid-template-columns:1fr}
  .ft-opts.two{grid-template-columns:1fr 1fr}
  .ft-vs{flex-direction:column;align-items:stretch}
  .ft-swap{align-self:center;transform:rotate(90deg)}
  .ft-duel{grid-template-columns:1fr 1fr}
  .ft-vsdot{display:none}
  .ft-side .nw{font-size:22px}
  .ft-side .nm{font-size:16px}
  .ft-table{overflow-x:auto}
  .ft-table table{font-size:14px;min-width:420px}
  .ft-hist{height:150px;gap:4px}
  .hb .l{font-size:10px}
  .ft-board li a{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .ft-board .track{grid-column:1/-1;order:3}
  .ft-agebar{flex-direction:column;align-items:stretch}
  .ft-bday .ft-go{width:100%}
}
@media (prefers-reduced-motion:reduce){.ft-prog i,.ft-side .bar i,.hb .bar i{transition:none}}