/* Free betting calculators (/tools/, Claude Design Free tools Rounds 1-2).
   Shared by the hub and the six calculator pages, on top of the homepage styles (nav, final CTA,
   footer, signup modal). Values follow design_handoff_free_tools/ (tokens.json -> layout); the three
   layouts are the homepage's: phone < 720, tablet 720-959, desktop >= 960. */
.tp{
  --padX:20px;--top:20px;--bot:40px;--h1:34px;--h1l:38px;--h1s:-1px;--sub:17px;--subl:24px;
  --pillMt:16px;--pillBleed:-20px;--pillPad:20px;--cardMt:16px;--cardR:20px;--cardPad:16px;--cardGap:20px;
  --key:48px;--keyl:52px;--two:40px;--twol:44px;--sec:48px;--h2:24px;--h2l:28px;--h2s:-0.4px;
  --faqGap:12px;--q:17px;--a:16px;--al:24px;--boxPad:20px;--fGap:16px;
}
@media (min-width:720px){
  .tp{
    --padX:32px;--top:32px;--bot:56px;--h1:44px;--h1l:48px;--h1s:-1.2px;--sub:18px;--subl:27px;
    --pillMt:20px;--pillBleed:0px;--pillPad:0px;--cardMt:20px;--cardR:24px;--cardPad:24px;--cardGap:24px;
    --key:52px;--keyl:56px;--sec:64px;--h2:28px;--h2l:32px;--h2s:-0.6px;
    --faqGap:16px;--q:18px;--al:25px;--boxPad:24px;--fGap:18px;
  }
}
@media (min-width:960px){
  .tp{
    --padX:48px;--top:48px;--bot:80px;--h1:56px;--h1l:60px;--h1s:-1.8px;--sub:19px;--subl:29px;
    --pillMt:24px;--cardMt:24px;--cardPad:32px;--cardGap:32px;
    --key:64px;--keyl:68px;--two:48px;--twol:52px;--sec:88px;--h2:32px;--h2l:36px;--h2s:-0.8px;
    --faqGap:56px;--q:19px;--a:17px;--al:27px;--boxPad:28px;--fGap:20px;
  }
}
.tp *{box-sizing:border-box}
.tp button,.tp input{font-family:inherit}
/* Fields stay clear of the sticky nav when focused or scrolled to. */
html.tools{scroll-padding-top:72px}
@media (min-width:960px){html.tools{scroll-padding-top:96px}}

/* ---- Top section: H1, subhead, calculator pills, card ---- */
.tp-top{padding:var(--top) var(--padX) var(--bot);background:linear-gradient(180deg,#012D5E 0px,#001A36 360px,#000 100%)}
.tp-wrap{max-width:1200px;margin:0 auto}
.tp-intro{max-width:760px}
.tp-h1{margin:0;font-size:var(--h1);line-height:var(--h1l);font-weight:700;letter-spacing:var(--h1s);text-wrap:balance}
.tp-sub{margin:8px 0 0;font-size:var(--sub);line-height:var(--subl);color:#B0B3B8;text-wrap:pretty}
.tp-pills{margin:var(--pillMt) var(--pillBleed) 0;padding:0 var(--pillPad);display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tp-pills::-webkit-scrollbar{display:none}
.tp-pill{flex:none;height:44px;display:flex;align-items:center;padding:0 18px;border-radius:22px;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:16px;font-weight:600;white-space:nowrap}
.tp-pill:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.tp-pill[aria-current="page"]{background:#0B7EFE;border-color:#0B7EFE}

/* ---- Calculator card (= app card), results inside it behind a hairline ---- */
.tc-card{margin-top:var(--cardMt);background:#000;border:1px solid #888;border-radius:var(--cardR);padding:var(--cardPad);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cardGap);align-items:start}
.tc-inputs{display:flex;flex-direction:column;gap:var(--fGap);min-width:0}
.tc-results{display:flex;flex-direction:column;min-width:0;border-top:1px solid rgba(255,255,255,.12);padding-top:12px;scroll-margin-top:72px}
@media (min-width:720px){
  .tc-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tc-results{border-top:0;padding-top:0;border-left:1px solid rgba(255,255,255,.12);padding-left:24px}
}
@media (min-width:960px){
  .tc-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .tc-results{padding-left:32px;position:sticky;top:96px}
}

/* Field */
.tf{display:flex;flex-direction:column;gap:8px;min-width:0}
.tf-label{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#B0B3B8}
.tf-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tf-count{font-size:14px;color:#8A929C;white-space:nowrap;flex:none}
.tf-row{display:flex;gap:8px;align-items:center;min-width:0}
.tf-leg{flex:none;width:28px;font-size:15px;font-weight:700;color:#8A929C;font-variant-numeric:tabular-nums}
.tf-box{flex:1;min-width:0;height:56px;display:flex;align-items:center;gap:4px;padding:0 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);cursor:text}
.tf-box:focus-within{border-color:#0B7EFE;background:rgba(11,126,254,.06);box-shadow:0 0 0 3px rgba(11,126,254,.25)}
.tf.is-err .tf-box{border-color:#F04A4A;background:rgba(240,74,74,.06)}
.tf.is-err .tf-box:focus-within{box-shadow:0 0 0 3px rgba(240,74,74,.25)}
.tf-in{flex:1;min-width:0;width:100%;height:100%;border:0;outline:none;background:transparent;color:#fff;font-size:20px;font-weight:700;
  font-variant-numeric:tabular-nums;padding:0;margin:0;border-radius:0;-webkit-appearance:none;appearance:none}
.tf-in::placeholder{color:#5E6670;opacity:1}
.tf-fix{font-size:20px;font-weight:700;color:#8A929C;flex:none}
.tf-frac{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.tf-slash{font-size:24px;font-weight:600;color:#8A929C}
.tf-msg:empty{display:none}
.tf-err{display:flex;gap:6px;align-items:flex-start;font-size:14px;line-height:19px;color:#F04A4A}
.tf-err .ico{font-size:16px;margin-top:1px}
.tf-help{font-size:14px;line-height:19px;color:#8A929C;font-variant-numeric:tabular-nums}

/* Pill segmented control (the app's Over / Under): +/- toggle and Kelly fraction */
.tf-seg{flex:none;display:flex;gap:2px;height:56px;padding:4px;border-radius:14px;background:rgba(255,255,255,.08)}
.tf-seg button{border:0;border-radius:10px;background:transparent;color:#B0B3B8;font-weight:700;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.tf-seg button[aria-pressed="true"]{background:#0B7EFE;color:#fff}
.tf-sign button{width:44px;font-size:24px}
.tf-seg-full{width:100%}
.tf-seg-full button{flex:1;font-size:17px}

/* Parlay: remove leg, add leg */
.tf-rm{flex:none;width:44px;height:44px;border-radius:22px;border:0;background:rgba(255,255,255,.08);color:#B0B3B8;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:20px}
.tf-add{align-self:flex-start;height:44px;padding:0 4px;border:0;background:transparent;color:#3D96FF;font-size:17px;font-weight:700;
  display:flex;align-items:center;gap:6px;cursor:pointer}
.tf-add .ico{font-size:22px}
.tf-add:disabled{opacity:.4;cursor:default}

/* Results */
.tr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.tr-hl{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}
.tr-label{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#B0B3B8}
.tr-chip{height:26px;display:flex;align-items:center;padding:0 10px;border-radius:13px;font-size:13px;font-weight:700;white-space:nowrap}
.tr-chip.is-pos{background:rgba(31,191,85,.14);color:#1FBF55}
.tr-chip.is-neg{background:rgba(240,74,74,.14);color:#F04A4A}
.tr-chip.is-even{background:rgba(255,255,255,.1);color:#fff}
/* ⓘ (opens the "How it’s calculated" sheet) and copy result: 44 round icon buttons, right of the label. */
.tr-acts{flex:none;display:flex;gap:8px}
.tr-btn{flex:none;width:44px;height:44px;border-radius:22px;border:0;background:rgba(255,255,255,.08);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:20px}
.tr-btn[data-act="info"]{font-size:22px}
.tr-btn:disabled{opacity:.45;cursor:default}
.tr-key{margin-top:2px;font-size:var(--key);line-height:var(--keyl);font-weight:700;letter-spacing:-2px;color:#fff;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tr-key.is-pos{color:#1FBF55}
.tr-key.is-neg{color:#F04A4A}
.tr-two{margin-top:4px;display:flex;justify-content:space-between;gap:16px}
.tr-col{display:flex;flex-direction:column;gap:4px;min-width:0}
.tr-col+.tr-col{text-align:right}
.tr-col-l{font-size:15px;line-height:20px;font-weight:600;color:#B0B3B8}
.tr-col-v{font-size:var(--two);line-height:var(--twol);font-weight:700;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.tr-col-s{font-size:15px;line-height:20px;color:#B0B3B8;font-variant-numeric:tabular-nums}
.tr-rows{margin-top:16px;display:flex;flex-direction:column}
.tr-row{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.12)}
.tr-row span:first-child{flex:1;min-width:0;font-size:16px;line-height:21px;color:#B0B3B8}
.tr-row span:last-child{flex:none;white-space:nowrap;font-size:18px;line-height:22px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.tr-note{margin:12px 0 0;font-size:15px;line-height:21px;color:#B0B3B8;text-wrap:pretty}

/* ---- Sections below the card (all on black) ---- */
.tp-sec{padding:var(--sec) var(--padX) 0;background:#000}
.tp-sec.is-last{padding-bottom:var(--sec)}
.tp-h2{margin:0;font-size:var(--h2);line-height:var(--h2l);font-weight:700;letter-spacing:var(--h2s);text-wrap:balance}
.tp-grid{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
/* Formula and worked example, inside the "How it’s calculated" sheet. */
.tp-h3{margin:20px 0 0;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#B0B3B8}
.tp-intro-p{margin:10px 0 0;font-size:16px;line-height:24px;color:#B0B3B8;text-wrap:pretty}
.tp-dl{margin:12px 0 0;display:flex;flex-direction:column}
.tp-dl div{padding:14px 0;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:4px}
.tp-dl dt{font-size:14px;line-height:20px;color:#8A929C}
.tp-dl dd{margin:0;font-size:19px;line-height:26px;font-weight:700}
.tp-ol{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.tp-ol li{display:flex;gap:12px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12)}
.tp-n{flex:none;width:28px;height:28px;border-radius:14px;background:rgba(255,255,255,.08);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.tp-step{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.tp-step span:first-child{font-size:15px;line-height:21px;color:#B0B3B8}
.tp-step span:last-child{font-size:18px;line-height:25px;font-weight:700;font-variant-numeric:tabular-nums}

/* FAQ: <details> rows like the app's filter list; questions are <h3>s, answers stay in the HTML. */
.tp-faq{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--faqGap);align-items:start}
@media (min-width:960px){.tp-faq{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.tp-faq-list{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.12)}
.tp-faq-list details{border-bottom:1px solid rgba(255,255,255,.12)}
.tp-faq-list summary{min-height:64px;padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent}
.tp-faq-list summary::-webkit-details-marker{display:none}
.tp-faq-list h3{flex:1;min-width:0;margin:0;font-size:var(--q);line-height:1.3;font-weight:700;text-wrap:balance}
.tp-faq-list summary .ico{font-size:20px;color:#B0B3B8;transition:transform .15s}
.tp-faq-list details[open] summary .ico{transform:rotate(180deg)}
.tp-faq-list p{margin:0 0 18px;font-size:var(--a);line-height:var(--al);color:#B0B3B8;max-width:680px;text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.tp-faq-list summary .ico{transition:none}}

/* Related calculators (row cards) and the hub grid */
@media (min-width:720px){.tp-rel{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tp-rel a{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:#000;border:1px solid rgba(255,255,255,.16);color:#fff;min-height:88px;height:100%}
.tp-rel a:hover,.tp-hub a:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.tp-ic{flex:none;width:44px;height:44px;border-radius:22px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
.tp-rel-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tp-rel-t b{font-size:17px;line-height:22px;font-weight:700}
.tp-rel-t span{font-size:14px;line-height:20px;color:#B0B3B8;text-wrap:pretty}
.tp-chev{flex:none;font-size:20px;color:#8A929C}
.tp-hub{margin-top:var(--cardMt);display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:720px){.tp-hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.tp-hub{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tp-hub a{display:flex;flex-direction:column;gap:6px;padding:var(--boxPad);border-radius:20px;background:#000;border:1px solid rgba(255,255,255,.16);color:#fff}
.tp-hub-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tp-hub b{font-size:20px;line-height:24px;font-weight:700}
.tp-hub span.tp-hub-l{font-size:15px;line-height:22px;color:#B0B3B8;text-wrap:pretty}

/* ---- "How it’s calculated" sheet (the app's info sheet: #0E1620 panel, 20px top corners, grabber,
   20/26 bold title, blue "Got it"). Bottom sheet on phones, centred dialog from 720px. ---- */
.tsheet{box-sizing:border-box;padding:0;border:0;margin:auto auto 0;width:100%;max-width:100%;max-height:88vh;max-height:88dvh;
  background:#0E1620;color:#fff;border-radius:20px 20px 0 0;border-top:1px solid rgba(255,255,255,.08);
  font-family:Archivo,system-ui,sans-serif;overflow:hidden}
.tsheet[open]{display:flex;animation:tsheet-up .22s ease-out}
.tsheet::backdrop{background:rgba(0,0,0,.6)}
.tsheet-in{display:flex;flex-direction:column;width:100%;min-height:0;padding:10px 20px calc(20px + env(safe-area-inset-bottom))}
.tsheet-grab{align-self:center;flex:none;width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.1);margin-bottom:8px}
.tsheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.tsheet-t{margin:0;font-size:20px;line-height:26px;font-weight:700}
.tsheet-x{flex:none;width:44px;height:44px;margin-right:-8px;border-radius:22px;border:0;background:transparent;color:#B0B3B8;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:20px}
.tsheet-x:hover{color:#fff}
.tsheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin:0 -20px;padding:0 20px}
.tsheet-body .tp-intro-p{margin-top:4px}
.tsheet-ok{flex:none;margin-top:16px;height:48px;border-radius:12px;border:0;background:#0B7EFE;color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.tsheet-ok:hover{background:#2B8EFF}
.tsheet button:focus-visible{outline:2px solid #3D96FF;outline-offset:3px}
html.tsheet-open,html.tsheet-open body{overflow:hidden}
@media (min-width:720px){
  .tsheet{margin:auto;max-width:560px;max-height:80vh;max-height:80dvh;border-radius:24px;border:1px solid rgba(255,255,255,.08)}
  .tsheet[open]{animation-name:tsheet-in}
  .tsheet-in{padding:20px 28px 28px}
  .tsheet-grab{display:none}
  .tsheet-body{margin:0 -28px;padding:0 28px}
}
@keyframes tsheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes tsheet-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tsheet[open]{animation:none}}

/* ---- Switching calculators (owner, 2026-10-22) ----
   Cross-document view transitions between the /tools/ pages (Safari 18.2+, Chrome 126+; other browsers
   just load the page). The nav and pill row stay still (the active pill's fill cross-fades); the title
   fades out then in, and the card slides 24px toward the tapped pill; the rest of the page cross-fades. Direction comes from the
   "fwd" / "back" type added on pagereveal. Off with reduced motion. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
header[data-sec="header"]{view-transition-name:eh-nav}
.tp-pills{view-transition-name:eh-pills}
.tp-intro{view-transition-name:eh-intro}
.tc-card{view-transition-name:eh-card}
/* Back to back, so old and new text never show on top of each other: out in .12s, then in over .24s. */
::view-transition-group(root){animation-duration:.24s}
::view-transition-group(eh-pills){animation-duration:.2s}
::view-transition-group(eh-intro),::view-transition-group(eh-card){animation-duration:.36s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(eh-intro),::view-transition-old(eh-card){animation:.12s ease-in both eh-fade-out}
::view-transition-new(eh-intro),::view-transition-new(eh-card){animation:.24s cubic-bezier(.2,.8,.2,1) .12s both eh-fade-in}
html:active-view-transition-type(fwd)::view-transition-old(eh-card){animation-name:eh-out-left}
html:active-view-transition-type(fwd)::view-transition-new(eh-card){animation-name:eh-in-right}
html:active-view-transition-type(back)::view-transition-old(eh-card){animation-name:eh-out-right}
html:active-view-transition-type(back)::view-transition-new(eh-card){animation-name:eh-in-left}
@keyframes eh-fade-out{to{opacity:0}}
@keyframes eh-fade-in{from{opacity:0}}
@keyframes eh-out-left{to{opacity:0;transform:translateX(-24px)}}
@keyframes eh-out-right{to{opacity:0;transform:translateX(24px)}}
@keyframes eh-in-right{from{opacity:0;transform:translateX(24px)}}
@keyframes eh-in-left{from{opacity:0;transform:translateX(-24px)}}

/* ---- Compact phone calculator (owner, 2026-10-22): the whole card, inputs and results, fits one iPhone
   screen under the nav (about 610px of Safari's visible height at 390 wide). Tablet and desktop unchanged.
   The subhead and the American-odds help lines are hidden on phones (both stay in the HTML; the results
   already show break-even). Short fields pair up two to a row (.tf-pair). ---- */
.tf-pair{display:contents}
@media (max-width:719.98px){
  .tp-top.is-calc{padding-top:40px;padding-bottom:40px}
  .tp-top.is-calc .tp-h1{font-size:26px;line-height:30px;letter-spacing:-.6px}
  .tp-top.is-calc .tp-sub{display:none}
  .tp-top.is-calc .tp-pills{margin-top:12px}
  .tc-card{margin-top:10px;padding:12px 14px;border-radius:18px;gap:8px}
  .tc-inputs{gap:12px}
  .tf{gap:6px}
  .tf-label{font-size:12px;line-height:16px}
  .tf-box{height:48px;border-radius:12px;padding:0 14px}
  .tf-in,.tf-fix{font-size:18px}
  .tf-seg{height:48px;border-radius:12px;padding:2px}
  .tf-seg button{border-radius:10px}
  .tf-sign button{width:44px;font-size:22px}
  .tf-seg-full button{font-size:16px}
  .tf-frac{gap:6px}
  .tf-frac .tf-box{padding:0 8px}
  .tf-help{display:none}
  .tf-msg:has(> .tf-help:only-child){display:none}
  .tf-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
  .tf-pair > .tf-add{align-self:end;height:48px}
  .tf-pair .tf-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
  .tf-head + .tf{margin-top:-4px}
  /* Results: the ⓘ / copy buttons sit beside the key number instead of on their own row. */
  .tc-results{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding-top:10px}
  .tr-head{display:contents}
  .tr-hl{grid-column:1;grid-row:1;min-height:18px}
  .tr-label{font-size:12px;line-height:16px}
  .tr-chip{height:22px;border-radius:11px;font-size:12px;padding:0 8px}
  .tr-acts{grid-column:2;grid-row:1/3;align-self:center}
  .tr-key{grid-column:1;grid-row:2;margin-top:2px;font-size:40px;line-height:44px;letter-spacing:-1.5px}
  .tr-two{grid-column:1;grid-row:2;margin-top:2px;gap:12px}
  .tr-col-l,.tr-col-s{font-size:13px;line-height:17px}
  .tr-col-v{font-size:32px;line-height:36px;letter-spacing:-1px}
  .tr-rows{grid-column:1/-1;margin-top:4px}
  .tr-row{min-height:34px;gap:12px}
  .tr-row span:first-child{font-size:15px;line-height:19px}
  .tr-row span:last-child{font-size:16px;line-height:20px}
  .tr-note{grid-column:1/-1;margin-top:4px;font-size:13px;line-height:18px}
}