/* beindie tool — Steam payout calculator */

/* the copy-link row that sits above the tool body */
.tool-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tool-actions__hint{flex:1 1 240px;min-width:200px;margin:0}
.btn.is-copied{background:var(--yellow);color:#141414;border-color:var(--ink)}

#spRoot .split > .stack{grid-template-columns:minmax(0,1fr)}
#spRoot .split > .stack > *{min-width:0}
#spRoot .panel{min-width:0}
#spRoot .panel .table-wrap{max-width:100%}

.sp-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}
.sp-filter{min-width:200px}
.sp-filter input{padding:8px 11px;font-size:14px}

table.sp-table{min-width:560px;font-size:14.5px}
.sp-table td,.sp-table th{padding:11px 14px}
.sp-table td{vertical-align:middle}
.sp-table b{font-weight:600;font-variant-numeric:tabular-nums}
.sp-table tr.is-head td{background:var(--shade)}
.sp-table tr.is-final td{background:var(--yellow);color:#141414;border-bottom:0}
.sp-table tr.is-final b{color:#141414}
.sp-table tr.is-final:hover td{background:var(--yellow)}
.sp-dash{color:var(--muted)}
.sp-note{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.35;font-weight:400}
.sp-table tr.is-final .sp-note{color:#141414;opacity:.75}

table.sp-wh{min-width:520px;font-size:14px}
.sp-wh td,.sp-wh th{padding:9px 14px}
.sp-wh tr.is-on td{background:var(--shade)}
.sp-wh tr.is-on b{color:var(--ink)}
.sp-pick{
  background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer;
  text-align:left;border-bottom:1px solid transparent;
}
.sp-pick:hover{border-bottom-color:var(--yellow)}
.sp-wh tr.is-on .sp-pick{font-weight:600;border-bottom-color:var(--ink)}

.sp-chart{overflow-x:auto}
.sp-bar{display:block;width:100%;height:auto;min-width:480px}
.sp-bar rect{stroke:var(--ink);stroke-width:1}
.sp-bar .seg-tax{fill:var(--muted);fill-opacity:.45}
.sp-bar .seg-refunds{fill:var(--red);fill-opacity:.55}
.sp-bar .seg-valve{fill:var(--ink);fill-opacity:.28}
.sp-bar .seg-wh{fill:var(--blue);fill-opacity:.45}
.sp-bar .seg-fees{fill:var(--orange);fill-opacity:.5}
.sp-bar .seg-you{fill:var(--yellow)}
.sp-bar__lbl{font-family:var(--pixel);font-size:9px;fill:var(--ink);letter-spacing:.03em}
.sp-bar__tick{font-family:var(--pixel);font-size:8.5px;fill:var(--muted);letter-spacing:.03em}

.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:12px;height:12px;border:1px solid var(--ink);flex:none}
.legend .k-tax{background:var(--muted);opacity:.45}
.legend .k-refunds{background:var(--red);opacity:.55}
.legend .k-valve{background:var(--ink);opacity:.28}
.legend .k-wh{background:var(--blue);opacity:.45}
.legend .k-fees{background:var(--orange);opacity:.5}
.legend .k-you{background:var(--yellow)}

.sp-steps{padding-left:20px;display:grid;gap:8px;font-size:15px;color:var(--muted)}

.sp-paste summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.sp-paste summary::-webkit-details-marker{display:none}
.sp-paste summary::before{content:"+";font-family:var(--pixel);font-size:12px;color:var(--muted)}
.sp-paste[open] summary::before{content:"\2013"}
.sp-paste textarea{font-family:ui-monospace,SFMono-Regular,"Consolas",monospace;font-size:13px;min-height:132px}

@media (max-width:620px){
  table.sp-table{min-width:460px}
  table.sp-wh{min-width:440px}
}

/* ---------- copy buttons: the failure has to be as loud as the success ----------
   site.css styles .is-copied, and site.js only ever reaches that branch. A
   clipboard that is unavailable (a non-secure origin) or refused (a denied
   permission) left the button sitting still, which reads exactly like a
   silent success. The tool scripts handle their own copy buttons and set one
   of these two states every time. */
.is-copyfail{background:var(--red);color:#141414;border-color:var(--ink)}
.copy-note{
  flex:1 1 100%;margin:0;font-size:12.5px;line-height:1.45;
  color:var(--red);font-weight:600;
}
.copy-note:empty{display:none}

/* Anything driven by a thumb: the shared chrome is sized for a mouse, and
   30px of button is not a tap target. */
@media (pointer:coarse){
  .copy,.chip,.seg button,.btn-sm{min-height:40px}
  .copy,.seg button{display:inline-flex;align-items:center;justify-content:center}
}

/* Both tables scroll sideways on a phone; the step name and the country name
   are what make the numbers beside them mean anything. */
@media (max-width:620px){
  .sp-table tbody td:first-child,
  .sp-wh tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--paper-2)}
  .sp-table tr.is-head td:first-child{background:var(--shade)}
  .sp-table tr.is-final td:first-child{background:var(--yellow)}
}