/* =====================================================================
   THE CASE PAGE — polymarket.com's market frame (measured 19 Sep 2026,
   light theme), with three screens in place of the chart: the Graph, the
   Case and the Stats, switched by the icon tabs in the header.
   The case points are raised cards, lit and tilted like photographs.
   Everything is scoped under .kase.
   ===================================================================== */
.kase{--ink:#22272D;--mut:#6A727B;--faint:#8A929B;--line:#E6E8EC;--fill:#F4F5F7;
  --yes:#1C7D28;--no:#E30F0C;--blue:#0062FE;
  max-width:1294px;margin:0 auto;padding:22px 0 90px;color:var(--ink);overflow-x:hidden;
  font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.kase *{box-sizing:border-box}
.kase,.kase *{text-transform:none;font-variant:normal}
.kase button{font:inherit;cursor:pointer;border:none;background:none}
.kase-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.kase-cols>*{min-width:0}

.kase-back{display:inline-flex;align-items:center;gap:7px;padding:0;margin:0 0 16px;
  font:600 14px/20px Inter,sans-serif;color:var(--mut)}
.kase-back:hover{color:var(--ink)}
.kase-back svg{width:13px;height:13px}

/* ---- header ---------------------------------------------------------- */
.kase-head{display:flex;align-items:flex-start;gap:16px;padding-bottom:18px}
.kase-hrow img{width:64px;height:64px;flex:none;border-radius:7.2px;object-fit:cover;
  object-position:center 18%;background:var(--fill);
  box-shadow:0 2px 5px rgba(16,24,40,.12),0 10px 22px rgba(16,24,40,.14)}
.kase-crumb{font:540 14px/20px Inter,sans-serif;color:var(--mut)}
.kase-crumb i{font-style:normal;margin:0 6px}
.kase-h1{margin:2px 0 0;font:600 28px/34px Inter,sans-serif;letter-spacing:-.4px}

/* the three screens live behind these */
.kase-seg{margin-left:auto;flex:none;display:flex;gap:2px;padding:3px;border-radius:9.2px;
  background:var(--fill)}
.kase-seg button{width:40px;height:32px;border-radius:7.2px;color:var(--mut);display:flex;
  align-items:center;justify-content:center;
  transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.kase-seg button svg{width:17px;height:17px}
.kase-seg button:hover{color:var(--ink)}
.kase-seg button.on{background:#fff;color:var(--ink);transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(16,24,40,.10),0 5px 12px rgba(16,24,40,.12)}


.kase-volrow{display:flex;align-items:center;gap:10px;padding-bottom:6px;
  font:500 13px/20px Inter,sans-serif}
.kase-volrow .v{color:var(--ink);font-weight:600}
.kase-volrow .sep{color:var(--line)}
.kase-volrow .d{color:var(--mut);display:inline-flex;align-items:center;gap:5px}
.kase-volrow .d svg{width:12px;height:12px}
.kase-volrow .mark{margin-left:auto;font:700 15px/20px Inter,sans-serif;color:#D8DCE2}

.kase-chance{display:flex;align-items:baseline;gap:10px;padding:6px 0 2px}
.kase-chance b{font:600 34px/40px Inter,sans-serif;letter-spacing:-.8px;color:var(--yes);
  font-variant-numeric:tabular-nums}
.kase-chance>span{font:600 14px/20px Inter,sans-serif;color:var(--no);opacity:0;
  animation:kfade .5s .8s forwards}

/* ---- the screen ------------------------------------------------------ */
.kase-view{position:relative;padding:16px 0 4px;perspective:1500px}
.kase-view>*{animation:kview .36s cubic-bezier(.2,.7,.3,1) both}
@keyframes kview{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes kfade{to{opacity:1}}
@keyframes krise{from{opacity:0;transform:translateY(18px) rotateX(-10deg) scale(.98)}
                 to{opacity:1;transform:none}}
@keyframes kdraw{to{stroke-dashoffset:0}}
@keyframes kgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes kcaret{50%{border-color:transparent}}

.tw{border-right:2px solid transparent;padding-right:2px}
.tw.on{border-right-color:currentColor;animation:kcaret .8s steps(1) infinite}

/* ---- screen: the case ------------------------------------------------ */
.kase-case{display:grid;grid-template-columns:1fr 1fr;gap:0}
.kase-case .kase-cs.y{padding-right:27px}
.kase-case .kase-cs.n{padding-left:27px;border-left:1px solid #ECEEF1}
.kase-cs{min-width:0}
.kase-cs h3{margin:0 0 2px;display:flex;align-items:baseline;gap:8px;
  font:600 17px/24px Inter,sans-serif}
.kase-cs h3 em{font-style:normal;font-weight:600;font-size:14px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.kase-cs.y h3{color:var(--yes)}
.kase-cs.n h3{color:var(--no)}

.kase-c3{position:relative;margin-top:20px;padding:15px 16px 13px;background:#fff;
  border:1px solid #EFF0F3;border-radius:14px;transform-style:preserve-3d;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 18px rgba(16,24,40,.08),
             0 22px 40px rgba(16,24,40,.07);
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s;
  animation:krise .55s cubic-bezier(.2,.7,.3,1) both}
.kase-c3::before{content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,0) 42%);
  opacity:.7}
.kase-c3:hover{transform:translateY(-6px) rotateX(5deg);
  box-shadow:0 3px 6px rgba(16,24,40,.08),0 16px 30px rgba(16,24,40,.13),
             0 38px 64px rgba(16,24,40,.11)}
.kase-c3 .ix{margin-right:9px;font-weight:700;color:var(--faint)}
.kase-c3 .hd{position:relative;font:600 15px/21px Inter,sans-serif;letter-spacing:-.1px}
.kase-c3 .arw{position:relative;margin-top:11px;display:inline-flex;align-items:center;gap:6px;
  font:600 12.5px/16px Inter,sans-serif;color:var(--mut)}
.kase-c3 .arw:hover{color:var(--ink)}
.kase-c3 .arw svg{width:11px;height:11px;transition:transform .24s}
.kase-c3.open .arw svg{transform:rotate(90deg)}
.kase-c3 .bd{position:relative;max-height:0;overflow:hidden;
  transition:max-height .38s cubic-bezier(.2,.7,.3,1)}
.kase-c3.open .bd{max-height:460px}
.kase-c3 .bd p{margin:11px 0 0;font:400 14px/21px Inter,sans-serif;color:var(--mut)}
.kase-c3 .bd .src{margin-top:8px;font:500 12.5px/17px Inter,sans-serif;color:var(--faint)}
.kase-c3 .bd ul{margin:11px 0 3px;padding:11px 13px 11px 29px;border-radius:9.2px;
  background:var(--fill)}
.kase-c3 .bd li{margin-top:6px;font:400 13px/19px Inter,sans-serif;color:var(--mut)}
.kase-c3 .bd li:first-child{margin-top:0}

/* ---- screen: the disagreements --------------------------------------- */
.kase-dhead,.kase-drow{display:grid;
  grid-template-columns:120px 190px minmax(0,1fr) 190px 120px;align-items:center}
.kase-dhead{align-items:baseline;padding-bottom:4px}
.kase-dhead h3{margin:0;display:flex;align-items:baseline;gap:8px;
  font:600 17px/24px Inter,sans-serif}
.kase-dhead h3 em{font-style:normal;font-weight:600;font-size:14px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.kase-dhead .y{color:var(--yes)}
.kase-dhead .n{color:var(--no);justify-self:end}
.kase-drow{padding:20px 0}
.kase-drow+.kase-drow{border-top:1px solid #F1F2F4}
.kase-dq{text-align:center;padding:0 12px;font:600 15px/21px Inter,sans-serif;
  letter-spacing:-.15px;opacity:0;animation:kfade .4s forwards;animation-delay:var(--d)}
.kase-dans{display:flex;flex-direction:column;gap:2px;font:800 24px/28px Inter,sans-serif;
  letter-spacing:-.6px;opacity:0;
  animation:kpop .42s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(var(--d) + .8s)}
.kase-dans.r{align-items:flex-end;text-align:right}
.kase-dans small{font:500 12px/16px Inter,sans-serif;color:var(--faint);letter-spacing:0}
.kase-dans.y{color:var(--yes)}
.kase-dans.n{color:var(--no)}
@keyframes kpop{from{opacity:0;transform:translateY(9px) scale(.94)}to{opacity:1;transform:none}}
@keyframes ktip{to{opacity:.85}}
.kase-arm{display:block;width:190px;height:44px;overflow:visible}
.kase-arm.y{color:var(--yes)}
.kase-arm.n{color:var(--no)}
.kase-arm path{fill:none;stroke:currentColor;stroke-width:1.7;opacity:.6;
  stroke-dasharray:240;stroke-dashoffset:240;
  animation:kdraw .74s cubic-bezier(.4,.1,.2,1) forwards;animation-delay:calc(var(--d) + .18s)}
.kase-arm polygon{fill:currentColor;opacity:0;
  animation:ktip .24s ease forwards;animation-delay:calc(var(--d) + .8s)}

/* ---- screen: the graph ----------------------------------------------- */
/* ---- the chart, after Polymarket's ------------------------------------ */
.kase.gv .kase-chance{display:none}
.kase-graph{position:relative;padding-top:2px}
.kase-graph{width:100%}
.kase-graph .gh{display:flex;align-items:center;gap:9px;margin-bottom:6px;min-width:0}
.kase-graph .gh b,.kase-graph .gh .dl,.kase-graph .gh .mk{white-space:nowrap}
.kase-graph .gh b{font:700 26px/32px Inter,sans-serif;letter-spacing:-.8px;color:var(--yes)}
.kase-graph .gh .dl{display:inline-flex;align-items:center;gap:4px;
  font:700 13.5px/18px Inter,sans-serif;font-variant-numeric:tabular-nums}
.kase-chance>span{display:inline-flex;align-items:center;gap:4px}
.dl .cr,.kase-chance span .cr{width:9px;height:7px;fill:currentColor;flex:none}
.kase-graph .gh b{font-variant-numeric:tabular-nums}
/* a quick flash in the direction the figure moved */
.kase-graph.k-up .gh b{animation:kup .42s ease}
.kase-graph.k-dn .gh b{animation:kdn .42s ease}
@keyframes kup{0%{color:#25A037}100%{color:var(--yes)}}
@keyframes kdn{0%{color:var(--no)}100%{color:var(--yes)}}
.kase-graph .gh .dl.k-up{color:var(--yes)}
.kase-graph .gh .dl.k-dn{color:var(--no)}
.kase-graph .gh .mk{margin-left:auto;font:700 13px/18px Inter,sans-serif;
  color:#D5D9DF;letter-spacing:-.2px}
.kase-graph .gplot{position:relative}
.kase-graph .gplot{position:relative;width:100%}
.kase-graph .gplot svg{display:block;width:100%;max-width:100%;height:300px;overflow:hidden}
.kase-graph .grid{stroke:#E7E9ED;stroke-dasharray:1 5;stroke-linecap:round}
.kase-graph .ylb,.kase-graph .xlb{font:500 12.5px Inter,sans-serif;fill:#9AA1AA}
.kase-graph .ln{stroke:var(--yes);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:5000;stroke-dashoffset:5000;
  animation:kdraw 1.4s cubic-bezier(.4,0,.2,1) .15s forwards}
.kase-graph .dim{stroke:#D3D7DD;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  opacity:0;transition:opacity .12s}
.kase-graph.k-hov .dim{opacity:1}
.kase-graph .end{fill:var(--yes);opacity:0;animation:kfade .3s 1.5s forwards}
.kase-graph.k-hov .end{opacity:0;animation:none}
.kase-graph .cross{stroke:#B9BFC7;stroke-dasharray:3 3;opacity:0}
.kase-graph .dot{fill:var(--yes);stroke:#fff;stroke-width:2.5;opacity:0}
.kase-graph .gstamp{position:absolute;top:-4px;transform:translateX(-50%);opacity:0;
  pointer-events:none;white-space:nowrap;transition:opacity .12s;
  font:500 12.5px/17px Inter,sans-serif;color:#8A929B}
.kase-tip{position:absolute;pointer-events:none;opacity:0;z-index:2;
  transform:translate(13px,-50%);display:flex;align-items:center;gap:7px;
  padding:4px 9px 4px 7px;border-radius:7px;background:#fff;border:1px solid #E6E8EC;
  box-shadow:0 4px 12px rgba(16,24,40,.12);white-space:nowrap;
  font:600 12.5px/17px Inter,sans-serif;color:var(--ink);transition:opacity .12s}
.kase-tip.flip{transform:translate(calc(-100% - 13px),-50%)}
.kase-tip i{width:3px;height:13px;border-radius:2px;background:var(--yes)}
.kase-graph .gfoot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding-top:12px}
.kase-graph .vol{font:500 12.5px/17px Inter,sans-serif;color:#8A929B;white-space:nowrap}
.kase-graph .vol i{font-style:normal;color:#C6CBD2;margin:0 6px}
.kase-ranges{display:flex;justify-content:flex-end;gap:2px;margin-left:auto}
.kase-ranges button{height:29px;padding:0 10px;border-radius:7px;cursor:pointer;
  font:600 12.5px/29px Inter,sans-serif;color:var(--faint);transition:.15s}
.kase-ranges button:hover{color:var(--ink);background:#F7F8F9}
.kase-ranges button.on{background:var(--fill);color:var(--ink)}

/* ---- the stats screen -------------------------------------------------- */
.kase-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kase-tile{background:#fff;border:1px solid #EFF0F3;border-radius:14px;padding:15px 16px 16px;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 18px rgba(16,24,40,.07);
  transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
  animation:krise .5s cubic-bezier(.2,.7,.3,1) both}
.kase-tile:hover{transform:translateY(-5px) rotateX(5deg);
  box-shadow:0 2px 4px rgba(16,24,40,.06),0 16px 30px rgba(16,24,40,.12)}
.kase-tile .k{font:500 13px/18px Inter,sans-serif;color:var(--mut)}
.kase-tile .v{margin-top:5px;font:700 30px/36px Inter,sans-serif;letter-spacing:-1px;
  color:var(--ink)}
.kase-tile .s{margin-top:3px;font:500 12.5px/17px Inter,sans-serif;color:var(--faint)}
.kase-tile.y .v{color:var(--yes)}
.kase-tile.n .v{color:var(--no)}

/* ---- tabs and body --------------------------------------------------- */
.kase-rules{margin-top:34px;background:var(--fill);border:1px solid #E9EBEE;
  border-radius:16px;padding:18px 24px 22px;
  transition:background-color .3s ease,border-color .3s ease}
.kase-rules.y{background:rgba(28,125,40,.09);border-color:rgba(28,125,40,.20)}
.kase-rules.n{background:rgba(227,15,12,.06);border-color:rgba(227,15,12,.18)}
.kase-rules .kase-body p,.kase-rules .kase-body .op{color:var(--mut)}
.kase-rules .kase-body p.lead b,.kase-rules .kase-body .op span{color:var(--ink)}
.kase-tabs{display:flex;align-items:center;gap:16px;padding-bottom:14px}
.kase-tabs button{font:600 16px/22px Inter,sans-serif;color:var(--mut);padding:0;
  transition:color .18s}
.kase-tabs button.on{color:var(--ink)}
.kase-body p{margin:0 0 18px;font:400 14px/22px Inter,sans-serif;color:var(--ink)}
.kase-body p.lead b{font-weight:600}
.kase-body .op{margin:0 0 18px;font:600 14px/22px Inter,sans-serif}
.kase-body .op span{font-weight:400;color:var(--ink)}

.kase-resolver{display:flex;align-items:center;gap:16px;padding:16px 20px;
  border:1px solid var(--line);border-radius:11.2px;margin-bottom:18px}
.kase-resolver .logo{font:800 13px/16px Inter,sans-serif;color:var(--no);letter-spacing:.5px;flex:none}
.kase-resolver .k{font:400 14px/20px Inter,sans-serif;color:var(--mut)}
.kase-resolver .a{font:400 14px/20px Inter,sans-serif;color:var(--blue)}
.kase .kase-ghost{height:32px;padding:0 14px;border:1px solid var(--line);border-radius:7.2px;
  font:600 13px/30px Inter,sans-serif;color:var(--ink);background:#fff}
.kase .kase-ghost:hover{background:var(--fill)}

/* ---- the ticker ------------------------------------------------------ */
.kase-side{position:sticky;top:18px}
.kase-card{border:1px solid var(--line);border-radius:11.2px;padding:20px 18px 22px;background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
.kase-card .top{display:flex;gap:12px;align-items:flex-start}
.kase-card .top img{width:40px;height:40px;flex:none;border-radius:7.2px;object-fit:cover;
  object-position:center 18%;background:var(--fill)}
.kase-card .top .q{font:500 14px/20px Inter,sans-serif;color:var(--mut);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.kase-card .top .o{font:600 16px/24px Inter,sans-serif}
.kase-card .top .o em{font-style:normal;color:var(--yes)}
.kase-bs{display:flex;align-items:center;gap:14px;margin-top:20px;padding-bottom:13px;
  border-bottom:1px solid var(--line)}
.kase-bs button{font:600 16px/22px Inter,sans-serif;color:var(--mut);position:relative;
  padding-bottom:10px;margin-bottom:-11px}
.kase-bs button.on{color:var(--ink)}
.kase-bs button.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ink)}
.kase-bs .mk{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font:500 16px/22px Inter,sans-serif;padding-bottom:10px;margin-bottom:-11px}
.kase-bs .mk svg{width:11px;height:11px;color:var(--mut)}
.kase-yn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.kase-yn button{height:56px;border-radius:8px;font:600 16px/56px Inter,sans-serif;
  transition:transform .18s,box-shadow .18s;font-variant-numeric:tabular-nums}
.kase-yn button:hover{transform:translateY(-1px)}
.kase-yn .y{background:rgba(28,125,40,.10);color:var(--yes)}
.kase-yn .y.on{background:var(--yes);color:#fff}
.kase-yn .n{background:rgba(227,15,12,.09);color:var(--no)}
.kase-yn .n.on{background:var(--no);color:#fff}
.kase-amt{display:flex;align-items:baseline;justify-content:space-between;margin-top:26px}
.kase-amt .l{font:500 16px/24px Inter,sans-serif}
.kase-amt .v{font:600 40px/46px Inter,sans-serif;letter-spacing:-1.2px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.kase .kase-go{width:100%;height:54px;margin-top:22px;border-radius:8px;
  background:var(--fill);color:var(--faint);font:600 16px/54px Inter,sans-serif;
  cursor:default;transition:background-color .22s ease,color .22s ease}
.kase .kase-go.armed{background:#15181D;color:#fff;cursor:pointer}
.kase .kase-go.armed:hover{background:#000}
.kase-terms{margin-top:18px;text-align:center;font:490 13px/18px Inter,sans-serif;color:var(--mut)}
.kase-terms a{color:var(--mut);text-decoration:underline}

/* Apple's own emoji artwork, sitting flat on the top-right corner with
   about a third of it hanging outside the card. The shadow does the lifting;
   nothing is rotated. */
.kase-c3 .em{position:absolute;top:-13px;right:-13px;z-index:3;
  width:38px;height:38px;display:block;pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(16,24,40,.28)) drop-shadow(0 2px 3px rgba(16,24,40,.20));
  transition:transform .28s cubic-bezier(.2,.7,.3,1),filter .28s ease;
  animation:kem .48s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:.42s}
.kase-c3:hover .em{transform:scale(1.13) translateY(-3px);
  filter:drop-shadow(0 13px 17px rgba(16,24,40,.30)) drop-shadow(0 3px 4px rgba(16,24,40,.22))}
.kase-c3 .hd{padding-right:30px}
@keyframes kem{from{opacity:0;transform:scale(.3) translateY(12px)}
               to{opacity:1;transform:none}}

/* ---- the stats panels -------------------------------------------------- */
.kase-panel{margin-top:20px;padding:18px 20px 16px;background:#fff;border:1px solid #EFF0F3;
  border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 18px rgba(16,24,40,.06);
  animation:kview .45s cubic-bezier(.2,.7,.3,1) both}
.kase-panel .t{font:600 15px/21px Inter,sans-serif}
.kase-panel .sub{margin:4px 0 15px;font:400 13px/19px Inter,sans-serif;color:var(--mut)}
.kase-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.kase-two>*{min-width:0}
.kase-cap{margin-top:13px;padding-top:11px;border-top:1px solid #F2F3F5;
  font:500 11.5px/16px Inter,sans-serif;color:#A9B0B8}

/* the bar row, shared by the class swing, the cohorts and the crossover split */
.kase-sw{display:grid;grid-template-columns:minmax(0,1fr) 34% 62px 108px;align-items:center;
  gap:14px;padding:8px 0;border-top:1px solid #F2F3F5}
.kase-sw:first-child{border-top:0}
.kase-sw .lb{font:500 13.5px/19px Inter,sans-serif}
.kase-sw .lb em{display:block;font:500 12px/16px Inter,sans-serif;font-style:normal;
  color:var(--faint);margin-top:1px}
.kase-sw.on .lb{font-weight:700}
.kase-sw.on .lb em{color:var(--yes)}
.kase-sw .tr{height:7px;border-radius:4px;background:#F1F2F4;overflow:hidden}
.kase-sw .bar{height:100%;border-radius:4px;transform-origin:left;
  animation:kgrowx .6s cubic-bezier(.2,.7,.3,1) both}
.kase-sw .bar.y{background:var(--yes)}
.kase-sw .bar.n{background:var(--no)}
.kase-sw .bar.g{background:#BFC5CD}
.kase-sw .vl{text-align:right;font:700 13.5px/19px Inter,sans-serif;
  font-variant-numeric:tabular-nums}
.kase-sw .vl.y{color:var(--yes)}
.kase-sw .vl.n{color:var(--no)}
.kase-sw .nn{font:500 12.5px/17px Inter,sans-serif;color:var(--faint)}
@keyframes kgrowx{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* the movable pool */
.kase-pool .pbar{display:flex;gap:3px;height:34px}
.kase-pool .pbar span{display:flex;align-items:center;justify-content:center;border-radius:7px;
  font:700 13px/34px Inter,sans-serif;color:#fff;transform-origin:left;
  animation:kgrowx .6s cubic-bezier(.2,.7,.3,1) both}
.kase-pool .pbar .y{background:rgba(28,125,40,.88)}
.kase-pool .pbar .n{background:rgba(227,15,12,.74)}
.kase-pool .pnote{margin-top:12px;font:400 13px/20px Inter,sans-serif;color:var(--mut)}
.kase-pool .pnote b{color:var(--ink)}
.kase-pool .pstat{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:15px}
.kase-pool .pstat b{display:block;font:700 26px/32px Inter,sans-serif;letter-spacing:-.8px;
  color:var(--ink);font-variant-numeric:tabular-nums}
.kase-pool .pstat b.w{font-size:19px;line-height:32px;letter-spacing:-.4px}
.kase-pool .pstat span{display:block;margin-top:2px;font:500 12.5px/17px Inter,sans-serif;
  color:var(--faint)}

/* what the opening position is worth */
.kase-open .oline{position:relative;height:8px;border-radius:5px;background:#F1F2F4;margin-top:6px}
.kase-open .oline .seg{position:absolute;top:0;height:8px;border-radius:5px;
  background:rgba(227,15,12,.30)}
.kase-open .oline i{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;
  transform:translate(-50%,-50%);border:2.5px solid #fff;
  box-shadow:0 1px 4px rgba(16,24,40,.25);z-index:1}
.kase-open .oline i.a{background:#A9B0B8}
.kase-open .oline i.b{background:var(--yes)}
.kase-open .olab{display:flex;justify-content:space-between;margin-top:11px;
  font:500 12.5px/17px Inter,sans-serif;color:var(--faint)}
.kase-open .olab b{color:var(--ink);font-weight:700}
.kase-open .ostat{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.kase-open .ostat b{display:block;font:700 26px/32px Inter,sans-serif;letter-spacing:-.8px;
  font-variant-numeric:tabular-nums}
.kase-open .ostat span{display:block;margin-top:2px;font:500 12.5px/17px Inter,sans-serif;
  color:var(--faint)}
.kase-open .ofoot{margin-top:13px;font:400 13px/19px Inter,sans-serif;color:var(--mut)}

/* who moves rooms */
.kase-tbl .hr,.kase-tbl .rw{display:grid;grid-template-columns:minmax(0,1fr) 78px 70px 56px;
  gap:10px;align-items:center}
.kase-tbl .hr{padding-bottom:9px;border-bottom:1px solid #EDEEF1;
  font:600 11.5px/16px Inter,sans-serif;letter-spacing:.02em;color:var(--faint)}
.kase-tbl .hr span+span,.kase-tbl .rw span+span{text-align:right}
.kase-tbl .rw{padding:9px 0;border-top:1px solid #F5F6F7;
  font:500 13.5px/19px Inter,sans-serif;color:var(--mut);font-variant-numeric:tabular-nums;
  animation:kview .4s cubic-bezier(.2,.7,.3,1) both}
.kase-tbl .rw:first-of-type{border-top:0}
.kase-tbl .rw .who{color:var(--ink);font-weight:600}
.kase-tbl .rw .big{color:var(--yes);font-weight:700;font-size:14.5px}

/* how often the room changes its mind */
.kase-xr{display:flex;align-items:center;gap:18px}
.kase-xr svg{flex:none;width:88px;height:88px;transform:rotate(-90deg)}
.kase-xr .bg{fill:none;stroke:#F1F2F4;stroke-width:9}
.kase-xr .fg{fill:none;stroke:var(--yes);stroke-width:9;stroke-linecap:round}
.kase-xr .cnum b{display:block;font:700 30px/34px Inter,sans-serif;letter-spacing:-1px;
  color:var(--ink);font-variant-numeric:tabular-nums}
.kase-xr .cnum span{display:block;margin-top:3px;font:500 12.5px/17px Inter,sans-serif;
  color:var(--faint)}
.cbars{margin-top:15px;padding-top:4px;border-top:1px solid #F2F3F5}
.cbars .kase-sw{grid-template-columns:minmax(0,1fr) 38% 46px;gap:12px}

.kase-note{margin-top:18px;font:400 13px/20px Inter,sans-serif;color:var(--faint)}

/* ---- narrow windows ---------------------------------------------------
   A 340px rail beside minmax(0,1fr) leaves the left column near zero once
   the page is under about 1080px, which is what wrecked the chart. Under
   that width the rail drops below the case instead of competing with it. */
@media (max-width:1080px){
  .kase-cols{grid-template-columns:minmax(0,1fr)}
  .kase-two{grid-template-columns:minmax(0,1fr)}
  .kase-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kase-sw{grid-template-columns:minmax(0,1fr) 28% 62px}
  .kase-sw .nn{display:none}
  .kase-graph .gh b{font-size:22px}
}
@media (max-width:820px){
  .kase-case{grid-template-columns:minmax(0,1fr)}
  .kase-case .kase-cs.y{padding-right:0}
  .kase-case .kase-cs.n{padding-left:0;border-left:0;margin-top:26px}
}
@media (max-width:720px){
  .kase-tiles{grid-template-columns:minmax(0,1fr)}
  .kase-sw{grid-template-columns:minmax(0,1fr) 72px}
  .kase-sw .tr{display:none}
}

/* ---- the odometer ------------------------------------------------------ */
.kase-graph .gh b{display:inline-flex;align-items:center}
.kase-graph .gh .odo{display:inline-flex}
.kase-graph .gh .dg{display:block;height:32px;overflow:hidden}
.kase-graph .gh .col{display:block;will-change:transform;
  transition:transform .45s cubic-bezier(.22,.8,.24,1)}
.kase-graph .gh .col i{display:block;height:32px;line-height:32px;font-style:normal;
  font-variant-numeric:tabular-nums;text-align:center}

/* ---- the Watch pane ---------------------------------------------------- */
.kase-wh{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.kase-wh b{font:700 15px/21px Inter,sans-serif}
.kase-wh span{font:500 12.5px/17px Inter,sans-serif;color:var(--faint)}
.kase-wl{margin-top:10px}
.kase-wr{display:flex;align-items:center;gap:10px;padding:11px 0;
  border-top:1px solid #F2F3F5}
.kase-wr:first-child{border-top:0}
.kase-wr .dot{flex:none;width:7px;height:7px;border-radius:50%;background:#C6CBD2}
.kase-wr.live .dot{background:var(--yes);box-shadow:0 0 0 0 rgba(28,125,40,.5);
  animation:kpulse 1.9s ease-out infinite}
.kase-wr.soon .dot{background:#D9A400}
.kase-wr .who{min-width:0;flex:1}
.kase-wr .n{font:600 13.5px/19px Inter,sans-serif;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.kase-wr .n b.y{color:var(--yes)}
.kase-wr .n b.n{color:var(--no)}
.kase-wr .n i{font-style:normal;color:var(--faint);margin:0 6px;font-weight:500}
.kase-wr .m{font:500 12px/16px Inter,sans-serif;color:var(--faint)}
.kase-wr .m em{font-style:normal;margin:0 5px;color:#C6CBD2}
.kase-wr button{flex:none;height:30px;padding:0 12px;border-radius:7.2px;
  background:var(--fill);font:600 12.5px/30px Inter,sans-serif;color:var(--ink);
  cursor:pointer;transition:background-color .18s}
.kase-wr button:hover{background:#E8EAEE}
.kase-wr.done button{color:var(--faint)}
.kase-wn{margin-top:14px;font:400 12.5px/18px Inter,sans-serif;color:var(--faint)}
@keyframes kpulse{
  0%{box-shadow:0 0 0 0 rgba(28,125,40,.45)}
  70%{box-shadow:0 0 0 7px rgba(28,125,40,0)}
  100%{box-shadow:0 0 0 0 rgba(28,125,40,0)}}

/* ---- the board for this question -------------------------------------
   The top three on a podium, first in the middle and raised, each rank
   riding its own avatar. Everyone else in a list beneath. No card - this
   sits straight in the rail, and it all has to work inside 340px. */
.kase-board{margin-top:26px}
.kase-board .bh{display:flex;align-items:baseline;gap:8px;
  font:600 14px/20px Inter,sans-serif}
.kase-board .bh span{margin-left:auto;font:500 12px/16px Inter,sans-serif;color:var(--faint)}

.kase-board .podium{display:flex;align-items:flex-end;justify-content:center;
  gap:4px;margin-top:16px;padding-bottom:18px;border-bottom:1px solid #EEF0F2}
.kase-board .p{flex:1 1 0;min-width:0;text-align:center;
  animation:kpod .55s cubic-bezier(.2,.7,.3,1) both}
.kase-board .p1{animation-delay:.05s}
.kase-board .p2{animation-delay:.15s}
.kase-board .p3{animation-delay:.25s}
.kase-board .ava{position:relative;margin:0 auto 9px;width:52px;height:52px}
.kase-board .p1 .ava{width:68px;height:68px;margin-bottom:11px}
.kase-board .ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  display:block;background:var(--fill);
  box-shadow:0 10px 18px rgba(16,24,40,.26),0 3px 6px rgba(16,24,40,.18)}
.kase-board .p1 .ava img{box-shadow:0 12px 24px rgba(16,24,40,.26),
  0 3px 6px rgba(16,24,40,.18)}
.kase-board .ava i{position:absolute;right:-1px;bottom:-1px;width:21px;height:21px;
  border-radius:50%;border:2.5px solid #fff;font:700 11px/16px Inter,sans-serif;
  font-style:normal;color:#fff;background:#AEB4BC;
  box-shadow:0 2px 5px rgba(16,24,40,.28)}
.kase-board .p1 .ava i{right:-1px;bottom:1px;width:24px;height:24px;
  font-size:12px;line-height:19px;background:#E8B32C;color:#4A3500}
.kase-board .p2 .ava i{background:#C3C9D1;color:#3C424A}
.kase-board .p3 .ava i{background:#D09A6A;color:#4A3113}
.kase-board .p .nm{font:600 12.5px/17px Inter,sans-serif;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kase-board .p1 .nm{font-size:13.5px}
.kase-board .p .rt{font:700 19px/24px Inter,sans-serif;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums}
.kase-board .p1 .rt{font-size:25px;line-height:30px;letter-spacing:-.8px}
.kase-board .wdl{display:flex;justify-content:center;gap:5px;
  font:700 10.5px/14px Inter,sans-serif;font-variant-numeric:tabular-nums}
.kase-board .wdl .w{color:var(--yes)}
.kase-board .wdl .d{color:#9AA1AA}
.kase-board .wdl .l{color:var(--no)}

.kase-board .rows{margin-top:2px}
.kase-board .brow{display:grid;grid-template-columns:14px 30px minmax(0,1fr) auto 34px;
  align-items:center;gap:9px;padding:9px 0;border-top:1px solid #F3F4F6}
.kase-board .brow:first-child{border-top:0}
.kase-board .brow .r{font:700 12.5px/18px Inter,sans-serif;color:#AEB4BC;text-align:center}
.kase-board .av{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;
  background:var(--fill);
  box-shadow:0 5px 10px rgba(16,24,40,.22),0 1px 3px rgba(16,24,40,.14);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.kase-board .brow .n{font:600 13.5px/19px Inter,sans-serif;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kase-board .brow .n em{font-style:normal;margin-left:5px;font-size:10.5px;
  font-weight:600;color:var(--faint)}
.kase-board .brow .rt{text-align:right;font:700 14px/20px Inter,sans-serif;
  font-variant-numeric:tabular-nums}
.kase-board .brow.me{margin:6px -8px 0;padding:10px 8px;border-top:0;
  border-radius:9px;background:rgba(28,125,40,.07)}
.kase-board .brow.me .rt{color:var(--faint)}
.kase-board .bn{margin-top:10px;font:400 12px/17px Inter,sans-serif;color:var(--faint)}
@keyframes kpod{from{opacity:0;transform:translateY(14px) scale(.9)}
                to{opacity:1;transform:none}}

/* the faces turn under the cursor - a real rotation in the rail's own
   perspective, not a flat scale */
.kase-board .podium,.kase-board .rows{perspective:520px}
.kase-board .ava{transform-style:preserve-3d}
.kase-board .ava img{transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s}
.kase-board .p:hover .ava img{
  transform:rotateY(22deg) rotateX(9deg) translateZ(10px) scale(1.06);
  box-shadow:-10px 14px 24px rgba(16,24,40,.30),0 3px 6px rgba(16,24,40,.18)}
.kase-board .p1:hover .ava img{transform:rotateY(20deg) rotateX(8deg) translateZ(14px) scale(1.05)}
.kase-board .ava i{transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.kase-board .p:hover .ava i{transform:translateZ(22px) scale(1.06)}
.kase-board .brow:hover .av{
  transform:rotateY(24deg) rotateX(10deg) scale(1.1);
  box-shadow:-7px 10px 18px rgba(16,24,40,.26),0 2px 4px rgba(16,24,40,.16)}

/* ---- the header -------------------------------------------------------
   The photo was a rounded square sitting beside a stack of three
   left-aligned lines, which read as a file card. This reads as a title:
   the crumb above the rule, the question alone and large under it, the
   photo round and small at the end of the crumb line. */
.kase-head{display:block;padding-bottom:0;border-bottom:0}
.kase-hrow img{width:30px;height:30px;border-radius:50%;object-fit:cover;
  object-position:center 18%;flex:none;
  box-shadow:0 3px 8px rgba(16,24,40,.20),0 1px 2px rgba(16,24,40,.14)}
.kase-hrow{display:flex;align-items:center;gap:10px}
.kase-crumb{font:600 12.5px/17px Inter,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut)}
.kase-crumb i{font-style:normal;margin:0 7px;color:#CBD0D7}
.kase-h1{margin:12px 0 0;font:700 36px/42px Inter,sans-serif;letter-spacing:-1.1px;
  max-width:19ch}
.kase-volrow{margin-top:14px;padding-top:13px;padding-bottom:0;
  border-top:1px solid var(--line);border-bottom:0}

/* the view tabs sit on the case now, not up in the header */
.kase-seg{margin-left:auto}
.kase-segrow{display:flex;align-items:center;margin-top:20px}
@media (max-width:1080px){.kase-h1{font-size:29px;line-height:35px}}

/* ---- the faceoff ------------------------------------------------------
   A faceoff has no Yes and no No, so the two side tokens become blue and
   black and every rule that reads them follows. Three things must NOT
   follow, because they mean won/lost or yes/no rather than side: the
   W-L record, the answers on the split screen and the arrows that carry
   them. Those are pinned to green and red here. */
.kase.vs{--yes:#15181D;--no:#0062FE}
.kase.vs .kase-yn .y{background:rgba(21,24,29,.07);color:#15181D}
.kase.vs .kase-yn .y.on{background:#15181D;color:#fff}
.kase.vs .kase-yn .n{background:rgba(0,98,254,.10);color:#0062FE}
.kase.vs .kase-yn .n.on{background:#0062FE;color:#fff}
.kase.vs .kase-pool .pbar .y{background:rgba(21,24,29,.85)}
.kase.vs .kase-pool .pbar .n{background:rgba(0,98,254,.88)}
.kase.vs .kase-br .sp .y{background:rgba(21,24,29,.82)}
.kase.vs .kase-br .sp .n{background:rgba(0,98,254,.85)}
.kase.vs .kase-rules.y{background:rgba(21,24,29,.05);border-color:rgba(21,24,29,.16)}
.kase.vs .kase-rules.n{background:rgba(0,98,254,.07);border-color:rgba(0,98,254,.20)}
.kase.vs .brow.me{background:rgba(21,24,29,.05)}
/* won and lost stay green and red whatever the question is */
.kase.vs .kase-board .wdl .w{color:#1C7D28}
.kase.vs .kase-board .wdl .l{color:#E30F0C}
/* and so do the answers to the split questions, which really are yes/no */
.kase.vs .kase-dans.y,.kase.vs .kase-drow .y{color:#1C7D28}
.kase.vs .kase-dans.n,.kase.vs .kase-drow .n{color:#E30F0C}
.kase.vs .kase-arm.y{color:#1C7D28;stroke:#1C7D28;fill:#1C7D28}
.kase.vs .kase-arm.n{color:#E30F0C;stroke:#E30F0C;fill:#E30F0C}

/* two faces in the rail when two people are the question */
.kase-card .top .duo{position:relative;flex:none;width:58px;height:40px}
.kase-card .top .duo img{position:absolute;top:0;width:40px;height:40px;border-radius:50%;
  object-fit:cover;background:var(--fill);border:2px solid #fff}
.kase-card .top .duo img:first-child{left:0;z-index:2}
.kase-card .top .duo img:last-child{left:18px;z-index:1}

/* ---- the side bubble on a face ---------------------------------------
   Which side that debater argues, on the corner opposite the rank. */
.kase-board .ava{position:relative}
.kase-board .avw{position:relative;display:block;width:30px;height:30px}
.kase-board .sd{position:absolute;left:-5px;top:-4px;z-index:3;
  display:block;padding:0 5px;height:15px;border-radius:7.5px;
  font:700 9px/15px Inter,sans-serif;font-style:normal;letter-spacing:.01em;
  color:#fff;white-space:nowrap;max-width:54px;overflow:hidden;text-overflow:clip;
  box-shadow:0 2px 5px rgba(16,24,40,.26)}
.kase-board .p1 .sd{left:-4px;top:-2px;height:17px;border-radius:8.5px;
  font-size:10px;line-height:17px;padding:0 6px}
.kase-board .sd.y{background:var(--yes)}
.kase-board .sd.n{background:var(--no)}
.kase-board .brow .sd{left:-6px;top:-5px;transform:scale(.9);transform-origin:left top}

/* ---- the faceoff headline ---------------------------------------------
   Built like the versus card it opens from: a face on each side turned
   inward, the question between them, and each side's button under its own
   face. The single big figure is redundant once both are on the page. */
.kase.vs .kase-chance,.kase.krank .kase-chance{display:none}
.kase-vshead{position:relative;display:grid;
  grid-template-columns:186px minmax(0,1fr) 186px;align-items:end;min-height:212px}
.kase-vshead .ph{position:relative;height:212px}
.kase-vshead .ph img{position:absolute;bottom:0;left:50%;height:194px;width:auto;
  display:block;transform:translateX(-50%) scaleX(-1);
  filter:drop-shadow(0 2px 3px rgba(16,24,40,.16))
         drop-shadow(0 14px 24px rgba(16,24,40,.20))}
.kase-vshead .mid{align-self:center;text-align:center;padding:0 12px 34px}
.kase-vshead .mid .kase-crumb{display:flex;justify-content:center}
.kase-vshead .mid .kase-h1{margin:11px auto 0;max-width:16ch;text-align:center;
  font-size:30px;line-height:36px;letter-spacing:-.8px}
.kase-vshead .bt{position:absolute;bottom:2px;z-index:2}
.kase-vshead .bt.l{left:0}
.kase-vshead .bt.r{right:0}
.kase-vshead .bt button{height:44px;padding:0 19px;border-radius:10px;cursor:pointer;
  font:700 17px/44px Inter,sans-serif;letter-spacing:-.22px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 14px rgba(16,24,40,.10);
  transition:transform .18s,box-shadow .18s}
.kase-vshead .bt button:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(16,24,40,.08),0 10px 20px rgba(16,24,40,.14)}
.kase-vshead .bt button span{font-weight:600;opacity:.72;margin-left:7px}
.kase-vshead .bt .y{background:#E4E5E7;color:#15181D}
.kase-vshead .bt .n{background:#E0E8FB;color:#1D4ED8}
@media (max-width:1080px){
  .kase-vshead{grid-template-columns:132px minmax(0,1fr) 132px;min-height:176px}
  .kase-vshead .ph{height:176px}
  .kase-vshead .ph img{height:158px}
  .kase-vshead .mid .kase-h1{font-size:24px;line-height:29px}
  .kase-vshead .bt button{height:38px;padding:0 14px;font-size:14.5px;line-height:38px}
}

/* ---- the ranking ------------------------------------------------------
   A field, not two sides: the trophy alone in the headline, the field as a
   list where the case columns would be, and a line a player on the chart.
   Each name owns one colour and uses it in all three places. */
.kase-rkhead{display:flex;align-items:center;gap:20px;padding:4px 0 2px}
.kase-rkhead .tr{width:96px;height:96px;flex:none;border-radius:14px;object-fit:cover;
  background:var(--fill);
  box-shadow:0 2px 4px rgba(16,24,40,.10),0 14px 26px rgba(16,24,40,.18)}
.kase-rkhead .kase-h1{margin:0;max-width:15ch}

.kase-list{border-top:1px solid #EEF0F2}
.kase-lrow{border-bottom:1px solid #EEF0F2;transition:background-color .18s}
.kase-lrow:hover{background:#FBFBFC}
.kase-lrow.sel{background:#F7F9FC}
.kase-lrow .hd{display:grid;
  grid-template-columns:10px minmax(0,1fr) 58px 52px 92px 18px;
  align-items:center;gap:13px;padding:13px 10px;cursor:pointer}
.kase-lrow .sw{width:10px;height:10px;border-radius:3px}
.kase-lrow .nm{font:600 15px/20px Inter,sans-serif;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kase-lrow .nm em{display:block;font:500 12px/16px Inter,sans-serif;font-style:normal;
  color:var(--faint)}
.kase-lrow .pc2{text-align:right;font:700 21px/26px Inter,sans-serif;letter-spacing:-.6px;
  font-variant-numeric:tabular-nums}
.kase-lrow .mv{text-align:right;font:700 12.5px/17px Inter,sans-serif;
  font-variant-numeric:tabular-nums}
.kase-lrow .mv.k-up{color:var(--yes)}
.kase-lrow .mv.k-dn{color:var(--no)}
.kase-lrow .mv.k-fl{color:#C3C9D1}
.kase-lrow .bt{display:flex;gap:7px}
.kase-lrow .bt button{height:36px;width:92px;border-radius:8px;cursor:pointer;
  font:600 13.5px/36px Inter,sans-serif;transition:filter .16s}
.kase-lrow .bt button b{font-weight:700}
.kase-lrow .bt .y{background:rgba(28,125,40,.10);color:var(--yes)}
.kase-lrow .bt .n{background:rgba(227,15,12,.08);color:var(--no)}
.kase-lrow .bt button:hover{filter:brightness(.96)}
.kase-lrow .cv{color:#C3C9D1;display:flex;justify-content:flex-end}
.kase-lrow .cv svg{width:12px;height:12px;transition:transform .24s}
.kase-lrow.open .cv svg{transform:rotate(90deg)}
.kase-lrow .bd{max-height:0;overflow:hidden;
  transition:max-height .34s cubic-bezier(.2,.7,.3,1)}
.kase-lrow.open .bd{max-height:340px}
.kase-lrow .kcase{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:2px 10px 16px}
.kase-lrow .kcase .h{font:700 11px/15px Inter,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:6px}
.kase-lrow .kcase .y .h{color:var(--yes)}
.kase-lrow .kcase .n .h{color:var(--no)}
.kase-lrow .kcase ul{margin:0;padding-left:16px}
.kase-lrow .kcase li{margin-top:5px;font:400 13px/19px Inter,sans-serif;color:var(--mut)}
.kase-lrow .empty{padding:2px 10px 16px;font:400 13px/19px Inter,sans-serif;color:var(--faint)}

/* the chart: one line a player, thinner down the field */
.kase-graph.krank .rkln{stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;opacity:.5;
  stroke-dasharray:5000;stroke-dashoffset:5000;
  animation:kdraw 1.4s cubic-bezier(.4,0,.2,1) .15s forwards}
.kase-graph.krank .rkln.top{stroke-width:2.2;opacity:1}
.kase-graph.krank .gh b{color:var(--ink);font-size:20px;letter-spacing:-.5px}
.kase-legend2{display:flex;flex-wrap:wrap;gap:6px;padding-top:14px}
.kase-legend2 .lchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border-radius:8px;background:var(--fill);cursor:pointer;opacity:.42;
  font:600 12px/28px Inter,sans-serif;color:var(--ink);transition:opacity .16s}
.kase-legend2 .lchip.on{opacity:1}
.kase-legend2 .lchip i{width:8px;height:8px;border-radius:2.5px;flex:none}
.kase-legend2 .lchip b{font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums}
@media (max-width:1080px){
  .kase-lrow .hd{grid-template-columns:10px minmax(0,1fr) 52px 46px 18px;gap:10px}
  .kase-lrow .bt{display:none}
  .kase-lrow .kcase{grid-template-columns:minmax(0,1fr);gap:14px}
  .kase-rkhead .tr{width:72px;height:72px}
}

/* the row offers one action: put me on this name */
.kase-lrow .bt .def{width:92px;height:34px;border-radius:8px;cursor:pointer;
  background:var(--fill);color:var(--ink);font:600 13px/34px Inter,sans-serif;
  transition:background-color .16s,color .16s}
.kase-lrow .bt .def:hover{background:#15181D;color:#fff}
.kase-lrow.sel .bt .def{background:#15181D;color:#fff}

/* the rail picker: who you are defending */
.kase-pick{margin-top:22px}
.kase-pick label{display:block;font:500 13px/18px Inter,sans-serif;color:var(--mut);
  margin-bottom:7px}
.kase-pick .sel{position:relative;display:block}
.kase-pick select{width:100%;height:52px;padding:0 40px 0 14px;border-radius:9px;
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
  font:600 15.5px/52px Inter,sans-serif;letter-spacing:-.2px;
  -webkit-appearance:none;appearance:none}
.kase-pick select:focus{outline:none;border-color:#C6CBD2}
.kase-pick .sel svg{position:absolute;right:14px;top:50%;width:12px;height:12px;
  margin-top:-6px;color:var(--mut);pointer-events:none}
/* the labels in the two-sided rail are not emphasis, so not italic */
.kase-yn button i{font-style:normal}

/* the disagreements screen for a field: names along both ends */
.kase-drow.krank .pl{display:flex;flex-direction:column;gap:7px}
.kase-drow.krank .pl.l{align-items:flex-end}
.kase-drow.krank .pl.r{align-items:flex-start}
.kase-drow.krank .pchip{display:inline-flex;align-items:center;gap:7px;height:30px;
  padding:0 11px;border-radius:9px;background:var(--fill);white-space:nowrap;
  font:600 13px/30px Inter,sans-serif;font-variant-numeric:tabular-nums}
.kase-drow.krank .pchip i{width:8px;height:8px;border-radius:2.5px;flex:none}
.kase-drow.krank .pchip b{font-weight:700;color:var(--faint)}