/* ------------------------------------------------------------------
   tools/assets/calculators.css (v=2, 2026-10-19): the extra pieces of the
   two Robux calculators (/tools/devex-calculator, /tools/robux-tax-calculator).
   Loaded after /tools/assets/tools.css on a <body class="sl tl"> page:
     <link rel="stylesheet" href="/tools/assets/calculators.css?v=2">
   Everything here is a .cx-* name and reuses the tools.css and
   seo-landing.css palette (#15101f cards, violet lines, #f6f1ff headings,
   #8f84a3 quiet text).

   Components:
     .cx-error (field error), .cx-status (.is-ok, .is-warn, .is-info) under a result,
     .cx-elig (+ -title, -list) the DevEx requirements under the tool,
     .cx-bar + .cx-seg (.is-you, .is-owner, .is-roblox) + .cx-legend: a revenue split,
     .cx-rates (big rate numbers), .cx-order (cash-out order),
     .cx-timeline (dated changes), .cx-shares + .cx-share (split cards),
     .cx-table-wrap + .cx-table (worked examples), .cx-formula (the sc-panel as text),
     .cx-actions (centred buttons), .cx-link (the "link to this tool" box)
   Static apart from hover. Nothing starts invisible; prefers-reduced-motion
   removes the bar transition.
   ------------------------------------------------------------------ */

:where([class^="cx-"], [class*=" cx-"])[hidden] { display: none !important; }

/* ---------- inside the tool ---------- */
/* the inputs column is often shorter than the result: keep its rows at their own height */
form[data-calc] .tl-split > .tl-fields { align-content: start; }
.cx-error { margin: 0; font-size: 12.5px; line-height: 1.45; color: #fca5a5; }
.tl-result .tl-figure-sub strong { color: #f6f1ff; font-weight: 600; }
.cx-more-link { display: inline-flex; align-items: center; gap: 6px; margin: 16px 0 0; font-size: 14px; font-weight: 600; color: #c4b5fd; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(167, 139, 250, .5); }
.cx-more-link:hover { color: #fff; }

.cx-status {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; margin: 16px 0 0; padding: 12px 14px;
  border: 1px solid rgba(52, 211, 153, .22); border-radius: 12px; background: rgba(52, 211, 153, .06);
  font-size: 13.5px; line-height: 1.5; color: #e6def3; text-wrap: pretty;
}
.cx-status::before {
  content: "\2713"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--rc-font); font-size: 12px; font-weight: 800; line-height: 1; color: #34d399; background: rgba(52, 211, 153, .16);
}
.cx-status.is-warn { border-color: rgba(242, 181, 90, .28); background: rgba(242, 181, 90, .07); }
.cx-status.is-warn::before { content: "!"; color: #f2b55a; background: rgba(242, 181, 90, .16); }
.cx-status.is-info { border-color: rgba(167, 139, 250, .24); background: rgba(139, 92, 246, .07); }
.cx-status.is-info::before { content: "i"; font-family: Georgia, serif; font-style: italic; color: #c4b5fd; background: rgba(139, 92, 246, .18); }
.cx-status + .cx-status { margin-top: 8px; }
.cx-status a { color: #f6f1ff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(167, 139, 250, .5); }

/* the DevEx requirements, right under the calculator */
.cx-elig { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.cx-elig-title { margin: 0; font-size: 11.5px; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: #a78bfa; }
.cx-elig-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 14px 0 0; padding: 0; list-style: none; }
.cx-elig-list li { position: relative; min-width: 0; padding-left: 30px; font-size: 14px; line-height: 1.45; color: #cfc3e0; text-wrap: pretty; }
.cx-elig-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-family: var(--rc-font); font-size: 11px; font-weight: 800; line-height: 1; color: #34d399; background: rgba(52, 211, 153, .14);
}
.cx-elig-list strong { color: #f6f1ff; font-weight: 600; }

/* ---------- a revenue split: one bar, one legend ---------- */
.cx-bar { display: flex; gap: 3px; height: 14px; margin: 0; padding: 0; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .05); list-style: none; }
.cx-seg { flex: var(--w, 0) 1 0%; min-width: 0; height: 100%; transition: flex-grow .3s cubic-bezier(.2, .7, .2, 1); }
.cx-seg:first-child { border-radius: 999px 0 0 999px; }
.cx-seg:last-child { border-radius: 0 999px 999px 0; }
.cx-seg:only-child { border-radius: 999px; }
.cx-seg.is-you { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.cx-seg.is-owner { background: linear-gradient(90deg, #0e7490, #38bdf8); }
.cx-seg.is-roblox { background: rgba(233, 226, 250, .22); }
.cx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; color: #b7abc8; }
.cx-legend li { display: inline-flex; align-items: center; gap: 7px; }
.cx-legend li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: rgba(233, 226, 250, .22); }
.cx-legend li.is-you::before { background: #a78bfa; }
.cx-legend li.is-owner::before { background: #38bdf8; }
.cx-legend b { font-weight: 600; color: #f6f1ff; font-variant-numeric: tabular-nums; }
.tl-result .cx-bar { margin-top: 20px; }
.tl-result .cx-bar + .cx-legend + .tl-kv { margin-top: 14px; }

/* ---------- big rate numbers and the cash-out order ---------- */
.cx-rates .sl-stat-value { font-size: clamp(40px, 1.5rem + 2.8vw, 68px); }
.cx-rates .sl-stat-label strong { display: block; margin-bottom: 4px; color: #e6def3; font-weight: 600; }
.cx-order { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 48px auto 0; padding: 0; list-style: none; }
.cx-order-label { margin-right: 4px; font-size: 13px; font-weight: 500; color: #8f84a3; }
.cx-order li:not(.cx-order-label):not(.cx-order-arrow) {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 14px 0 8px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; background: rgba(255, 255, 255, .025);
  font-size: 14px; font-weight: 500; color: #e6def3;
}
.cx-order-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #c4b5fd; background: rgba(139, 92, 246, .18); border: 1px solid rgba(167, 139, 250, .4); }
.cx-order-arrow { color: #6b6676; font-size: 14px; }

/* ---------- dated changes as a line of dots ---------- */
.cx-timeline { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: 64px auto 0; padding: 0; list-style: none; }
.cx-timeline::before { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; height: 2px; background: linear-gradient(90deg, rgba(167, 139, 250, .6), rgba(167, 139, 250, .18)); }
.cx-timeline li { position: relative; min-width: 0; padding-top: 36px; }
.cx-timeline li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid #a78bfa; background: #2a1a4d; box-shadow: 0 0 0 5px #0c0b10, 0 0 18px -2px rgba(139, 92, 246, .7);
}
.cx-timeline li.is-next::before { border-style: dashed; background: #0c0b10; box-shadow: 0 0 0 5px #0c0b10; }
.cx-when { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: #a78bfa; }
.cx-timeline li.is-next .cx-when { color: #8f84a3; }
.cx-what { display: block; margin-top: 8px; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: #e6def3; text-wrap: pretty; }
.cx-src { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #8f84a3; }
.cx-src a { color: #b7abc8; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rc-line-hover); }

/* ---------- split cards (who gets what on each kind of sale) ---------- */
.cx-shares { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto; padding: 0; list-style: none; }
.cx-shares > li { grid-column: span 2; }
.cx-shares > li:nth-child(n+4) { grid-column: span 3; }
.cx-share {
  display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 20px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px;
  background: linear-gradient(180deg, rgba(139, 92, 246, .07), rgba(255, 255, 255, .015)), #15101f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: border-color .2s ease;
}
.cx-share:hover { border-color: rgba(167, 139, 250, .3); }
.cx-share.is-main { border-color: rgba(167, 139, 250, .32); background: linear-gradient(180deg, rgba(139, 92, 246, .16), #15101f 62%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 90px -40px rgba(124, 58, 237, .55); }
.cx-share-title { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.3; letter-spacing: -.012em; color: #f6f1ff; text-wrap: balance; }
.cx-share-what { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #8f84a3; text-wrap: pretty; }
.cx-share-big { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 14px; }
.cx-share-big b {
  font-size: 48px; font-weight: 650; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  color: #f6f1ff; background: linear-gradient(180deg, #ffffff 25%, #c4b5fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cx-share-big span { font-size: 14px; line-height: 1.35; color: #b7abc8; }
.cx-share-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 13.5px; line-height: 1.5; color: var(--rc-text-2); text-wrap: pretty; }
.cx-share-note a { color: var(--rc-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(167, 139, 250, .5); }

/* ---------- worked examples ---------- */
.cx-table-wrap {
  max-width: 880px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; background: #15101f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.cx-table-wrap:focus-visible { outline: 2px solid var(--rc-focus); outline-offset: 2px; }
.cx-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; color: var(--rc-text-2); }
.cx-table caption { padding: 18px 20px 6px; text-align: left; font-size: 13px; color: #8f84a3; caption-side: bottom; }
.cx-table th, .cx-table td { padding: 14px 20px; text-align: left; vertical-align: top; border-top: 1px solid rgba(255, 255, 255, .06); }
.cx-table thead th { border-top: 0; padding-top: 18px; padding-bottom: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a78bfa; white-space: nowrap; }
.cx-table tbody th { font-weight: 500; color: #e6def3; }
.cx-table .cx-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-table td.cx-num { font-weight: 600; color: #f6f1ff; }
.cx-table th small, .cx-table td small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #8f84a3; white-space: normal; }
.cx-table tr.is-hl td.cx-num { color: #c4b5fd; }
.cx-table-wrap + .v3-note, .cx-table-wrap + .tl-source { margin-top: 18px; }

/* ---------- the formula panel: .sc-panel from seo-landing.css, read as text ---------- */
.sl .cx-formula { margin: 0; min-width: 0; }
.sl .cx-formula .sc-ln { align-items: flex-start; }
.sl .cx-formula .sc-ln code { flex: 1; min-width: 0; padding-top: 1px; white-space: normal; }
.sl .cx-formula .sc-ln b { color: #fbbf24; font-weight: 600; }
.sl .cx-formula .sc-out { margin-left: 0; }
.sl .cx-formula .sc-sep { height: 1px; margin: 8px 0; background: rgba(255, 255, 255, .06); }
.sl .cx-formula .sc-ln .eq { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--rc-font, Inter, sans-serif); font-size: 12px; font-weight: 800; color: #c4b5fd; background: rgba(139, 92, 246, .18); }

/* ---------- centred buttons under a section ---------- */
.cx-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 36px 0 0; }
.cx-actions .btn { min-height: 52px; padding: 0 26px; border-radius: 12px; font-size: 16px; font-weight: 600; }
.cx-actions .btn-secondary { border-color: rgba(233, 226, 250, .14); background: rgba(255, 255, 255, .03); }
.cx-actions .btn-secondary:hover { border-color: rgba(233, 226, 250, .26); background: rgba(255, 255, 255, .06); }
.cx-actions-note { max-width: 64ch; margin: 16px auto 0; font-size: 13.5px; line-height: 1.55; text-align: center; color: #8f84a3; text-wrap: pretty; }
.cx-actions-note a { color: var(--rc-text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rc-line-hover); }

/* ---------- link to this tool ---------- */
.cx-link { max-width: 760px; margin: 0 auto; }
.cx-link .tl-snippet + .tl-hint { margin-top: 10px; text-align: center; }
.cx-link + .sl-pills { margin-top: 40px; }

/* ---------- layout steps ---------- */
@media (max-width: 1000px) {
  .cx-shares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-shares > li, .cx-shares > li:nth-child(n+4) { grid-column: span 1; }
  .cx-shares > li:first-child { grid-column: 1 / -1; }
  .cx-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .cx-timeline::before { display: none; }
}
@media (max-width: 820px) {
  .cx-elig-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cx-shares { grid-template-columns: minmax(0, 1fr); }
  .cx-timeline { grid-template-columns: minmax(0, 1fr); row-gap: 22px; max-width: 520px; margin-top: 48px; }
  .cx-timeline::before { display: block; left: 10px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(167, 139, 250, .6), rgba(167, 139, 250, .18)); }
  .cx-timeline li { padding: 0 0 0 40px; }
  .cx-order { margin-top: 36px; }
  .cx-order-arrow { display: none; }
  .cx-share { padding: 18px 16px; border-radius: 18px; }
  .cx-share-big b { font-size: 42px; }
  .cx-table { font-size: 13.5px; }
  .cx-table th, .cx-table td { padding: 11px 8px; }
  .cx-table th:first-child, .cx-table td:first-child { padding-left: 14px; }
  .cx-table th:last-child, .cx-table td:last-child { padding-right: 14px; }
  .cx-table thead th { font-size: 10.5px; letter-spacing: .06em; white-space: normal; }
  .cx-table th small, .cx-table td small { font-size: 11.5px; }
  .cx-actions .btn { width: 100%; }
}
@media (max-width: 480px) {
  .cx-elig-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- "by hand / ... / this calculator" under How the math works ---------- */
.sc-wrap + .cx-ways { margin-top: 40px; }
@media (max-width: 640px) { .sc-wrap + .cx-ways { margin-top: 28px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cx-seg, .cx-share { transition: none; }
}